:root{font-family:Arial,Helvetica,sans-serif;color:#1f2937;background:#f3f6fa}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 28px;background:#fff;border-bottom:1px solid #dfe5ec}.title-wrap{display:flex;align-items:center;gap:12px}.fb-logo,.page-logo{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#1877f2;color:#fff;font-weight:800}.fb-logo{width:44px;height:44px;font-size:28px}.page-logo{width:44px;height:44px;font-size:25px;flex:0 0 44px}h1,h2,p{margin-top:0}h1{margin-bottom:3px;font-size:21px}h2{margin-bottom:4px;font-size:17px}.title-wrap p,.card-heading p,.logs-heading p{margin-bottom:0;color:#6b7280;font-size:12px}.sdk-status{padding:7px 10px;border-radius:999px;background:#eef1f5;font-size:12px;font-weight:700}.sdk-status.ready{background:#e7f7ed;color:#14733a}.sdk-status.error{background:#fff0f0;color:#a52b2b}.layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr);gap:18px;padding:20px}.content{min-width:0}.warning,.alert{margin-bottom:14px;padding:12px 14px;border-radius:9px;font-size:13px}.warning{border:1px solid #eed28c;background:#fff9e8;color:#805d09}.alert.error{border:1px solid #efbcbc;background:#fff1f1;color:#9b2727}.alert.success{border:1px solid #bed6f7;background:#edf5ff;color:#28538b}.card{margin-bottom:16px;padding:19px;border:1px solid #dfe5ec;border-radius:13px;background:#fff;box-shadow:0 7px 22px #1f2d460f}.card-heading{margin-bottom:15px}.card-heading.split{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.actions{display:flex;flex-wrap:wrap;gap:9px}.top-space{margin-top:15px}.button,.small-button,.log-actions button{border-radius:8px;cursor:pointer;font-weight:700}.button{min-height:40px;padding:9px 14px;border:1px solid transparent;font-size:13px}.button.primary{background:#1877f2;color:#fff}.button.secondary{border-color:#d4dae3;background:#fff;color:#344054}.button:disabled,.small-button:disabled{cursor:not-allowed;opacity:.5}.profile{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid #e0e5ec;border-radius:9px;background:#fafbfd}.profile img{width:44px;height:44px;border-radius:50%}.profile div{display:flex;flex:1;flex-direction:column}.profile small{margin-top:3px;color:#6b7280;font-size:11px}.permissions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:14px}.permission{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:8px;background:#fff0f0;color:#9d3030;font-size:11px;font-weight:700}.permission.granted{background:#e9f8ef;color:#16743c}.empty{display:flex;min-height:130px;align-items:center;justify-content:center;color:#7a8597}.page-list{display:flex;max-height:420px;flex-direction:column;gap:8px;overflow-y:auto}.page{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid #e0e5ec;border-radius:9px}.page img{width:44px;height:44px;border-radius:50%;object-fit:cover}.page-details{display:flex;flex:1;min-width:0;flex-direction:column}.page-details strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-details small{margin-top:3px;color:#6b7280;font-size:11px}.page-message{margin-top:4px;font-size:11px}.page-message.connected{color:#14733a}.page-message.error{color:#a52b2b}.small-button{padding:7px 9px;border:1px solid #d4dae3;background:#fff;color:#344054;font-size:11px}.logs{position:sticky;top:14px;display:flex;max-height:calc(100vh - 28px);min-width:0;flex-direction:column;overflow:hidden;border-radius:13px;background:#111827;color:#dce5f1}.logs-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px;border-bottom:1px solid #2b3545}.logs-heading h2{color:#fff}.logs-heading p{color:#8491a5}.log-actions{display:flex;gap:6px}.log-actions button{padding:6px 8px;border:1px solid #3b4658;background:#1b2534;color:#d5deeb;font-size:10px}.log-list{flex:1;overflow-y:auto;padding:9px}.log{margin-bottom:7px;padding:9px;border-left:3px solid #5d86bc;border-radius:6px;background:#172132}.log.success{border-left-color:#36a86b}.log.warn{border-left-color:#d7a43f}.log.error{border-left-color:#db5353}.log-title{display:flex;justify-content:space-between;gap:8px}.log-title strong{font-size:11px}.log-title span{color:#738096;font-size:9px}.log pre{max-height:200px;overflow:auto;margin:7px 0 0;padding:7px;border-radius:5px;background:#0d1420;color:#aebbd0;font-family:Consolas,monospace;font-size:9px;line-height:1.4;white-space:pre-wrap;word-break:break-word}@media (max-width: 1000px){.layout{grid-template-columns:1fr}.logs{position:static;max-height:600px}}@media (max-width: 620px){.header{padding:12px 14px}.layout{padding:13px}.card{padding:14px}.card-heading.split,.profile{align-items:flex-start;flex-direction:column}.permissions{grid-template-columns:1fr}.button{width:100%}}