:root{--bg:#f5f7fb;--panel:#fff;--text:#172033;--muted:#728097;--line:#e7ebf1;--nav:#101722;--nav2:#162131;--accent:#5b5cf0;--accent2:#7b61ff;--success:#15945f;--danger:#d64545;--warning:#b7791f;--shadow:0 12px 35px rgba(28,39,60,.06)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:14px}a{color:inherit}.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;background:linear-gradient(180deg,#111925 0%,#0d131d 100%);color:#fff;padding:20px 14px;display:flex;flex-direction:column;z-index:50;border-right:1px solid rgba(255,255,255,.04)}.brand-wrap{padding:2px 8px 20px;border-bottom:1px solid rgba(255,255,255,.07)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#9c67ff);display:grid;place-items:center;font-weight:900;font-size:20px;box-shadow:0 8px 20px rgba(91,92,240,.3)}.brand strong{display:block;font-size:17px;letter-spacing:.8px}.brand small{display:block;color:#8f9bad;font-size:11px;margin-top:1px;font-weight:600}.side-nav{display:flex;flex-direction:column;gap:18px;padding:18px 2px 10px;overflow:auto}.nav-group{display:grid;gap:4px}.nav-label{color:#657286;text-transform:uppercase;letter-spacing:1.2px;font-size:9px;font-weight:800;padding:0 10px 7px}.side-nav a{display:flex;align-items:center;gap:11px;text-decoration:none;color:#aeb8c8;padding:10px 11px;border-radius:9px;font-weight:650;transition:.16s}.side-nav a>span:first-child{width:20px;text-align:center;font-size:15px}.side-nav a:hover{background:rgba(255,255,255,.055);color:#fff}.side-nav a.active{background:#1d293a;color:#fff;box-shadow:inset 3px 0 0 var(--accent)}.side-nav .accent-link{color:#d8d8ff}.side-nav .accent-link.active{background:linear-gradient(90deg,rgba(91,92,240,.24),rgba(91,92,240,.07));box-shadow:inset 3px 0 0 #898aff}.fb-dot,.stat-icon.fb,.qa-icon.fb,.page-avatar{font-family:Arial,sans-serif;font-weight:900}.nav-bottom{margin-top:2px}.logout{margin-top:auto;padding:12px 4px 0;border-top:1px solid rgba(255,255,255,.07)}.logout button{width:100%;background:transparent;border:0;color:#8f9bad;text-align:left;padding:9px 10px;cursor:pointer;font-weight:650}.logout button:hover{color:#fff}.main{margin-left:260px;min-height:100vh}.topbar{height:68px;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:20}.workspace-pill{font-size:12px;font-weight:750;color:#5e6b7e;border:1px solid var(--line);padding:7px 11px;border-radius:20px;background:#fff}.user-chip{display:flex;align-items:center;gap:9px;font-weight:700;color:#445066}.avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#eef0ff;color:var(--accent);font-size:12px}.mobile-menu{display:none}.content-wrap{padding:34px;max-width:1540px;margin:0 auto}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:25px}.page-head h1{font-size:31px;line-height:1.12;margin:2px 0 7px;letter-spacing:-.7px}.page-head p{margin:0;color:var(--muted);max-width:760px}.eyebrow{font-size:10px!important;font-weight:850!important;letter-spacing:1.5px;color:var(--accent)!important;margin-bottom:8px!important}.btn,button.primary,.primary{border:0;border-radius:10px;padding:10px 15px;cursor:pointer;text-decoration:none;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px}.btn.primary,.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 7px 18px rgba(91,92,240,.18)}.btn.primary:hover{filter:brightness(.97)}.btn.primary:disabled{opacity:.45;cursor:not-allowed}.btn.secondary{background:#fff;border:1px solid var(--line);color:#536176}.btn.danger{background:#fff0f0;color:var(--danger);border:1px solid #ffd5d5}.btn.large{padding:12px 18px}.panel,.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:18px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;display:flex;align-items:center;gap:14px;box-shadow:0 8px 24px rgba(28,39,60,.035)}.stat-icon{width:44px;height:44px;border-radius:12px;background:#f0f1ff;color:var(--accent);display:grid;place-items:center;font-size:18px;font-weight:900}.stat-card strong{display:block;font-size:25px;letter-spacing:-.5px}.stat-card span:last-child{font-size:12px;color:var(--muted);font-weight:650}.dashboard-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:18px;margin-bottom:18px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:16px}.panel-head h2,.panel h2{font-size:17px;margin:0 0 4px;letter-spacing:-.2px}.panel-head p{color:var(--muted);margin:0;font-size:12px}.panel-head>a{font-size:12px;color:var(--accent);font-weight:750;text-decoration:none}.quick-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.quick-actions a{border:1px solid var(--line);border-radius:12px;padding:13px;text-decoration:none;display:grid;grid-template-columns:35px 1fr;column-gap:10px;align-items:center;transition:.15s}.quick-actions a:hover{border-color:#cfd3ff;background:#fafaff;transform:translateY(-1px)}.qa-icon{grid-row:1/3;width:35px;height:35px;border-radius:10px;background:#f1f3f7;color:#536176;display:grid;place-items:center;font-weight:900}.quick-actions b{font-size:13px}.quick-actions small{color:var(--muted);font-size:10px;margin-top:2px}.health-list{display:grid;gap:2px}.health-list>div{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #f0f2f5}.health-list>div:last-child{border:0}.health-list b,.health-list small{display:block}.health-list small{color:var(--muted);font-size:10px;margin-top:2px}.health-list strong{font-size:12px}.status-dot{width:8px;height:8px;border-radius:50%}.status-dot.good{background:#2db97c;box-shadow:0 0 0 4px #e8f8f1}.status-dot.bad{background:#e25656;box-shadow:0 0 0 4px #fff0f0}.status-dot.warn{background:#e4a73a;box-shadow:0 0 0 4px #fff7e7}.table-wrap{overflow:auto;margin:0 -4px}table{width:100%;border-collapse:collapse;min-width:650px}th,td{text-align:left;padding:13px 10px;border-bottom:1px solid #edf0f4;vertical-align:middle}th{font-size:9px;letter-spacing:.8px;color:#8390a2;text-transform:uppercase;font-weight:850}td{font-size:12px;color:#536176}tbody tr:last-child td{border-bottom:0}.post-cell{display:flex;align-items:center;gap:10px;min-width:260px}.post-cell img,.thumb-empty{width:44px;height:44px;border-radius:9px;object-fit:cover;flex:0 0 auto}.thumb-empty{background:#f0f2f6;display:grid;place-items:center;color:#7a8799;font-weight:850}.post-cell b,.post-cell small{display:block}.post-cell b{color:#273247;font-size:12px;margin-bottom:3px}.post-cell small{color:#8a95a6;font-size:10px;max-width:440px}.destinations{display:flex;gap:5px;flex-wrap:wrap}.destinations span,.destinations em{background:#f1f3f7;border-radius:20px;padding:4px 8px;font-size:9px;font-style:normal}.badge,.pill{display:inline-flex;align-items:center;border-radius:20px;padding:5px 8px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.25px;background:#eef1f5;color:#657186}.badge.published,.pill.published{background:#e9f8f1;color:#168157}.badge.queued,.badge.pending,.badge.ready,.badge.processing,.badge.publishing{background:#edf0ff;color:#5558cc}.badge.failed,.pill.failed{background:#fff0f0;color:#c84949}.badge.partial{background:#fff6e3;color:#9a6a19}.badge.draft{background:#eef1f5;color:#6e7887}.badge.big{padding:7px 11px;font-size:10px}.table-link{color:var(--accent);text-decoration:none;font-weight:750}.empty-state{text-align:center;padding:35px 20px;display:grid;justify-items:center;gap:6px}.empty-state b{color:#334056;font-size:14px}.empty-state span{color:var(--muted);font-size:12px}.empty-state .btn{margin-top:7px}.flash,.ok,.err{padding:12px 14px;border-radius:11px;margin-bottom:17px;font-size:12px;font-weight:650}.flash.success,.ok{background:#e9f8f1;color:#137a51;border:1px solid #cceede}.flash.error,.err{background:#fff0f0;color:#b74242;border:1px solid #ffdada}.notice{padding:14px 16px;border-radius:12px;margin-bottom:16px}.notice.warning{background:#fff8e8;border:1px solid #f5e2b0;color:#845d17}.composer-grid{display:grid;grid-template-columns:minmax(0,1.48fr) minmax(330px,.72fr);gap:18px;align-items:start}.composer-side{display:grid;gap:18px;position:sticky;top:88px}.composer-main{padding:24px}.section-title{display:flex;align-items:center;gap:11px;margin-bottom:20px}.section-title>span{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#eeefff;color:var(--accent);font-weight:850}.section-title h2{margin:0;font-size:16px}.section-title p{margin:2px 0 0;color:var(--muted);font-size:11px}.section-title.compact{margin-bottom:14px}.field{display:grid;gap:7px;margin-bottom:16px}.field label{font-size:11px;color:#4b586d;font-weight:800}.field label small{font-weight:500;color:#98a2b2}.field input,.field textarea,.field select,.grid input,.grid select,.grid textarea,.login input{width:100%;border:1px solid #dfe4eb;border-radius:10px;background:#fff;padding:11px 12px;color:#273247;font:inherit;outline:none}.field textarea{resize:vertical;line-height:1.55}.field input:focus,.field textarea:focus,.field select:focus{border-color:#aeb0ff;box-shadow:0 0 0 3px #f1f1ff}.field-meta{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#9aa4b2}.hint{font-size:9px;color:#929dad}.upload-box{position:relative;border:1.5px dashed #ccd3de;border-radius:13px;background:#fafbfc;min-height:145px;display:grid;place-items:center;overflow:hidden}.upload-box>input{position:absolute;opacity:0;pointer-events:none}.upload-box>label{display:grid;justify-items:center;gap:5px;cursor:pointer;padding:24px;width:100%;text-align:center}.upload-box label b{font-size:12px}.upload-box label small{color:var(--muted);font-size:10px}.upload-icon{font-size:22px;color:var(--accent)}.image-preview{position:absolute;inset:0;background:#fff}.image-preview img{width:100%;height:100%;object-fit:cover}.image-preview button{position:absolute;right:10px;top:10px;background:#fff;border:0;border-radius:8px;padding:7px 9px;font-size:10px;font-weight:750;cursor:pointer}.select-actions{display:flex;justify-content:flex-end;gap:10px;margin:-3px 0 8px}.select-actions button{border:0;background:transparent;color:var(--accent);font-size:9px;font-weight:750;cursor:pointer;padding:2px}.page-picker{display:grid;gap:7px;max-height:290px;overflow:auto;padding-right:2px}.page-picker label{display:grid;grid-template-columns:auto 34px 1fr auto;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;padding:9px;cursor:pointer}.page-picker input{accent-color:var(--accent)}.page-avatar{width:31px;height:31px;display:grid;place-items:center;background:#1877f2;color:#fff;border-radius:50%;font-size:17px}.page-picker b,.page-picker small{display:block}.page-picker b{font-size:11px}.page-picker small{color:var(--muted);font-size:9px;margin-top:1px}.page-picker i{font-style:normal;color:transparent;font-weight:900}.page-picker label:has(input:checked){border-color:#bbbdfd;background:#f9f9ff}.page-picker label:has(input:checked) i{color:var(--accent)}.empty-mini{display:grid;gap:5px;background:#f7f8fb;border-radius:11px;padding:14px}.empty-mini b{font-size:11px}.empty-mini span{font-size:10px;color:var(--muted)}.empty-mini a{font-size:10px;color:var(--accent);font-weight:750}.input-suffix{display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid #dfe4eb;border-radius:10px;overflow:hidden}.input-suffix input{border:0!important;border-radius:0!important;box-shadow:none!important}.input-suffix span{padding:0 11px;color:#8d98a8;font-size:10px}.toggle-row{display:flex;align-items:center;gap:10px;margin:4px 0 14px;cursor:pointer}.toggle-row>input{display:none}.toggle{width:36px;height:20px;border-radius:20px;background:#d8dde5;position:relative;flex:0 0 auto;transition:.15s}.toggle:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.15s}.toggle-row input:checked+.toggle{background:var(--accent)}.toggle-row input:checked+.toggle:after{left:19px}.toggle-row b,.toggle-row small{display:block}.toggle-row b{font-size:11px}.toggle-row small{color:var(--muted);font-size:9px;margin-top:1px}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.composer-actions{display:grid;grid-template-columns:.8fr 1.2fr;gap:10px}.form-card{max-width:920px}.form-grid,.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.full{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;padding-top:17px;border-top:1px solid var(--line)}.detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-bottom:16px}.detail-image{width:100%;max-height:480px;object-fit:contain;background:#f4f5f7;border-radius:12px;margin:10px 0 18px}.content-preview{white-space:normal;line-height:1.65;color:#39465a}.comment-preview{margin-top:20px;background:#f6f8fb;border-radius:11px;padding:14px}.comment-preview b{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#78859a}.comment-preview p{margin:7px 0 0;line-height:1.5}.delivery-list{display:grid;gap:8px}.delivery-list>div{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:11px}.delivery-list b,.delivery-list small,.delivery-list em{display:block}.delivery-list b{font-size:11px}.delivery-list small{font-size:9px;color:var(--muted);margin-top:2px}.delivery-list em{font-size:9px;color:var(--danger);font-style:normal;margin-top:4px}.block{display:block;margin-top:2px;color:var(--muted);font-size:9px}.roadmap{max-width:780px;padding:35px}.roadmap>span{font-size:9px;background:#efefff;color:var(--accent);padding:5px 8px;border-radius:20px;font-weight:850}.roadmap h2{font-size:22px;margin-top:13px}.roadmap p{color:var(--muted);line-height:1.6}.pagination-wrap{margin-top:14px}.pagination-wrap nav{display:flex;justify-content:flex-end}.pagination-wrap svg{width:16px}.pagination-wrap .flex{display:flex;gap:6px}.pagination-wrap a,.pagination-wrap span{font-size:10px}.login{display:grid;place-items:center;min-height:100vh;background:#111925}.login .card{width:min(420px,92vw);display:grid;gap:16px}.login label{display:grid;gap:7px}.warn code{display:block;margin:10px 0;word-break:break-all}.errorline{display:block;color:#b42318;margin-top:6px;max-width:600px}
@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.composer-grid,.detail-grid{grid-template-columns:1fr}.composer-side{position:static}.quick-actions{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.2s}.nav-open .sidebar{transform:translateX(0);box-shadow:10px 0 30px rgba(0,0,0,.2)}.main{margin-left:0}.mobile-menu{display:inline-flex;border:0;background:transparent;font-size:20px;cursor:pointer;margin-right:8px}.content-wrap{padding:24px 18px}.topbar{padding:0 18px}.page-head{align-items:flex-start}.page-head h1{font-size:27px}}
@media(max-width:620px){.stat-grid,.quick-actions,.form-grid,.grid,.two-fields{grid-template-columns:1fr}.page-head{display:grid}.page-head .btn{width:100%}.content-wrap{padding:20px 13px}.panel,.card,.composer-main{padding:16px;border-radius:14px}.composer-actions{grid-template-columns:1fr}.user-chip>span:last-child{display:none}.workspace-pill{font-size:10px}.stat-card{padding:14px}.stat-card strong{font-size:22px}.page-head h1{font-size:25px}.quick-actions a{grid-template-columns:34px 1fr}.full{grid-column:auto}.topbar{height:60px}.composer-side{gap:13px}}
.connection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:12px}.connection-card{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--panel-2,#111827)}.connection-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#1877f2;color:#fff;font:bold 24px Arial}.connection-info{display:flex;flex-direction:column;min-width:0;flex:1}.connection-info small{color:var(--muted);margin-top:3px}.connection-actions{display:flex;align-items:center;gap:7px}.btn.small{padding:8px 10px;font-size:12px}.icon-danger{width:34px;height:34px;border:0;border-radius:9px;background:rgba(239,68,68,.12);color:#ef4444;font-size:20px;cursor:pointer}.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.section-head h2{margin:2px 0 0}.muted{color:var(--muted);line-height:1.65}.mini-list{display:grid;gap:10px;margin-top:14px}.mini-list span{display:flex;flex-direction:column;padding:11px;border:1px solid var(--border);border-radius:10px}.mini-list small{color:var(--muted);margin-top:4px}
.publish-mode{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}.mode-card{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:11px;cursor:pointer;background:#fff}.mode-card:has(input:checked){border-color:#b8baff;background:#f8f8ff;box-shadow:0 0 0 2px rgba(91,92,240,.06)}.mode-card input{margin-top:2px;accent-color:var(--accent)}.mode-card b,.mode-card small{display:block}.mode-card b{font-size:11px;color:#344056}.mode-card small{font-size:9px;color:var(--muted);line-height:1.45;margin-top:2px}.queue-section{margin-bottom:18px}.queue-actions{display:flex;gap:6px;flex-wrap:wrap}.queue-actions form{margin:0}.queue-actions .btn{white-space:nowrap}@media(max-width:620px){.publish-mode{grid-template-columns:1fr}}

/* =========================================================
   SPY PUBLISHER — PHASE 4 / FUTURE CONTROL CENTER UI
   Visual-only enhancement. No functional/database changes.
   ========================================================= */
:root{
  --bg:#eef3f9;
  --panel:rgba(255,255,255,.82);
  --panel-solid:#fff;
  --panel-2:#f7f9fc;
  --text:#0d1b2f;
  --muted:#718098;
  --line:rgba(111,132,164,.18);
  --border:rgba(111,132,164,.18);
  --nav:#08111f;
  --nav2:#0c1728;
  --accent:#6c5cff;
  --accent2:#8c5cff;
  --cyan:#22d3ee;
  --blue:#2f80ff;
  --success:#14b87a;
  --danger:#f05252;
  --warning:#f2a93b;
  --shadow:0 24px 70px rgba(15,35,68,.09);
  --glow:0 0 0 1px rgba(108,92,255,.08),0 18px 45px rgba(108,92,255,.08);
}
html{background:#edf3fa}
body{
  background:
    radial-gradient(circle at 78% -10%,rgba(108,92,255,.13),transparent 30%),
    radial-gradient(circle at 25% 4%,rgba(34,211,238,.09),transparent 24%),
    linear-gradient(180deg,#f4f7fb 0%,#edf3fa 100%);
  min-height:100vh;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.28;
  background-image:linear-gradient(rgba(76,99,135,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(76,99,135,.07) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 75%);
}
.sidebar{
  width:272px;padding:19px 14px 18px;
  background:
    radial-gradient(circle at 10% 0%,rgba(34,211,238,.12),transparent 23%),
    radial-gradient(circle at 90% 12%,rgba(108,92,255,.18),transparent 28%),
    linear-gradient(180deg,#0b1524 0%,#07101d 72%,#060c16 100%);
  border-right:1px solid rgba(123,151,190,.13);
  box-shadow:18px 0 55px rgba(6,15,28,.12);
}
.main{margin-left:272px}
.brand-wrap{padding:4px 8px 21px;border-bottom:1px solid rgba(255,255,255,.075)}
.brand-mark{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(145deg,#7867ff 0%,#5f64ff 48%,#20cdea 140%);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 28px rgba(101,92,255,.35),0 0 30px rgba(34,211,238,.08);
}
.brand strong{font-size:18px;letter-spacing:1.25px}.brand small{color:#8493aa;font-size:10px;letter-spacing:.35px}
.nav-label{color:#54657d;letter-spacing:1.65px;font-size:8px;padding-left:13px}
.side-nav{gap:17px;padding-top:18px}.side-nav a{
  position:relative;color:#9ba9bc;padding:11px 12px;border-radius:12px;font-size:12px;font-weight:690;
  border:1px solid transparent;transition:.18s ease;
}
.side-nav a:hover{color:#fff;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.045);transform:translateX(2px)}
.side-nav a.active{
  color:#fff;background:linear-gradient(90deg,rgba(108,92,255,.23),rgba(34,211,238,.07));
  border-color:rgba(123,115,255,.18);box-shadow:inset 3px 0 0 #7b70ff,0 10px 25px rgba(0,0,0,.08);
}
.side-nav a.active:after{content:"";position:absolute;right:11px;width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.logout button{border-radius:10px;transition:.18s}.logout button:hover{background:rgba(255,255,255,.04)}
.topbar{
  height:72px;padding:0 34px;
  background:rgba(247,250,253,.72);backdrop-filter:blur(24px) saturate(145%);
  border-bottom:1px solid rgba(119,139,167,.15);box-shadow:0 8px 30px rgba(28,46,74,.03)
}
.workspace-pill{
  position:relative;padding:8px 13px 8px 30px;background:rgba(255,255,255,.7);border-color:rgba(111,132,164,.18);
  box-shadow:0 8px 25px rgba(28,46,74,.04);font-size:11px
}
.workspace-pill:before{content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#19c782;box-shadow:0 0 0 4px rgba(25,199,130,.12),0 0 12px rgba(25,199,130,.55)}
.user-chip{padding:5px 7px 5px 5px;border-radius:22px;background:rgba(255,255,255,.52);border:1px solid rgba(111,132,164,.14)}
.avatar{background:linear-gradient(145deg,#ecebff,#e6f9ff);box-shadow:inset 0 0 0 1px rgba(108,92,255,.09)}
.content-wrap{padding:38px 38px 50px;max-width:1600px}
.page-head{margin-bottom:28px}.page-head h1{font-size:34px;letter-spacing:-1.15px;color:#0c1b31}.page-head p{font-size:13px;line-height:1.65}.eyebrow{color:#665cff!important;letter-spacing:1.85px!important;font-size:9px!important}
.btn,button.primary,.primary{border-radius:12px;min-height:40px;transition:.18s ease}
.btn.primary,.primary{
  background:linear-gradient(135deg,#635cff 0%,#755cff 58%,#2ab9e8 140%);
  box-shadow:0 12px 30px rgba(99,92,255,.22),inset 0 1px 0 rgba(255,255,255,.19)
}
.btn.primary:hover{transform:translateY(-1px);filter:saturate(1.08);box-shadow:0 16px 34px rgba(99,92,255,.28)}
.btn.secondary{background:rgba(255,255,255,.74);backdrop-filter:blur(12px);border-color:rgba(111,132,164,.2);box-shadow:0 6px 18px rgba(30,50,80,.035)}
.panel,.card{
  background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(135%);
  border:1px solid rgba(111,132,164,.17);border-radius:20px;box-shadow:var(--shadow);padding:22px;
}
.panel{position:relative}.panel:before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(108,92,255,.22),rgba(34,211,238,.14),transparent);opacity:.8}
.stat-grid{gap:17px;margin-bottom:20px}.stat-card{
  position:relative;overflow:hidden;border-radius:18px;padding:20px;background:rgba(255,255,255,.8);border:1px solid rgba(111,132,164,.16);box-shadow:0 18px 45px rgba(23,45,77,.055)
}
.stat-card:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-52px;top:-55px;background:radial-gradient(circle,rgba(108,92,255,.12),transparent 70%)}
.stat-card:nth-child(2):after{background:radial-gradient(circle,rgba(47,128,255,.14),transparent 70%)}.stat-card:nth-child(3):after{background:radial-gradient(circle,rgba(34,211,238,.15),transparent 70%)}.stat-card:nth-child(4):after{background:radial-gradient(circle,rgba(20,184,122,.14),transparent 70%)}
.stat-icon{width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#efefff,#eef9ff);color:#665cff;box-shadow:inset 0 0 0 1px rgba(108,92,255,.08)}
.stat-card strong{font-size:27px;color:#10213a}.stat-card span:last-child{font-size:11px;color:#76849a}
.dashboard-grid{gap:20px;margin-bottom:20px}.panel-head h2,.panel h2{font-size:18px;color:#14243c}.quick-actions{gap:12px}.quick-actions a{
  border-radius:15px;padding:15px;border-color:rgba(111,132,164,.17);background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(248,250,253,.68));
}
.quick-actions a:hover{border-color:rgba(108,92,255,.3);background:linear-gradient(145deg,#fff,#f7f7ff);transform:translateY(-2px);box-shadow:0 13px 28px rgba(52,54,130,.08)}
.qa-icon{border-radius:12px;background:linear-gradient(145deg,#eef0ff,#eefaff);color:#665cff}
.health-list>div{padding:13px 2px;border-color:rgba(111,132,164,.11)}
.status-dot.good{box-shadow:0 0 0 4px rgba(45,185,124,.10),0 0 13px rgba(45,185,124,.25)}
.table-wrap{border-radius:15px}table{background:transparent}th{padding-top:11px;padding-bottom:11px;color:#7c8ba0}td{padding-top:14px;padding-bottom:14px;color:#52647b}tbody tr{transition:.15s ease}tbody tr:hover{background:rgba(105,95,255,.025)}
.badge,.pill{border:1px solid rgba(111,132,164,.1);padding:6px 9px}.badge.published,.pill.published{box-shadow:0 0 0 1px rgba(20,184,122,.04)}
.flash,.ok,.err{border-radius:14px;padding:13px 16px;box-shadow:0 8px 28px rgba(25,45,70,.04)}
.composer-grid{grid-template-columns:minmax(0,1.5fr) minmax(360px,.7fr);gap:20px}.composer-side{gap:20px;top:92px}.composer-main{padding:26px}
.section-title>span{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#efefff,#eafbff);color:#675cff;box-shadow:inset 0 0 0 1px rgba(108,92,255,.07)}
.field{gap:8px;margin-bottom:18px}.field label{font-size:10px;letter-spacing:.15px;color:#45566d}.field input,.field textarea,.field select,.grid input,.grid select,.grid textarea,.login input{
  border-radius:13px;border-color:rgba(111,132,164,.22);background:rgba(255,255,255,.78);padding:12px 13px;transition:.16s ease
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(108,92,255,.52);box-shadow:0 0 0 4px rgba(108,92,255,.08),0 9px 22px rgba(52,55,130,.05);background:#fff}
.upload-box{border-radius:16px;border-color:rgba(111,132,164,.27);background:linear-gradient(145deg,rgba(247,249,252,.85),rgba(241,246,251,.72));min-height:170px}.upload-box:hover{border-color:rgba(108,92,255,.38);background:linear-gradient(145deg,#fafaff,#f4fbfd)}
/* Always preview the complete uploaded image; never visually crop it. */
.image-preview{background:linear-gradient(145deg,#f2f5f9,#eaf0f6);display:grid;place-items:center;padding:8px}.image-preview img{width:100%;height:100%;object-fit:contain;border-radius:11px;background:#101827}.image-preview button{right:15px;top:15px;border:1px solid rgba(111,132,164,.2);box-shadow:0 7px 18px rgba(10,20,35,.08)}
.page-picker{max-height:330px;gap:8px}.page-picker label{border-radius:14px;padding:10px;border-color:rgba(111,132,164,.18);background:rgba(255,255,255,.56);transition:.15s ease}.page-picker label:hover{border-color:rgba(108,92,255,.26);background:#fff;transform:translateX(1px)}.page-picker label:has(input:checked){border-color:rgba(108,92,255,.42);background:linear-gradient(90deg,rgba(108,92,255,.065),rgba(34,211,238,.035));box-shadow:inset 3px 0 0 #6d61ff}.page-avatar{box-shadow:0 7px 18px rgba(24,119,242,.17)}
.publish-mode{gap:10px;margin-bottom:16px}.mode-card{border-radius:14px;padding:12px;background:rgba(255,255,255,.64);border-color:rgba(111,132,164,.18);transition:.16s}.mode-card:hover{background:#fff;border-color:rgba(108,92,255,.25)}.mode-card:has(input:checked){border-color:rgba(108,92,255,.42);background:linear-gradient(145deg,rgba(108,92,255,.07),rgba(34,211,238,.035));box-shadow:0 8px 24px rgba(69,61,150,.05)}
.toggle{background:#cfd7e3}.toggle-row input:checked+.toggle{background:linear-gradient(90deg,#6d60ff,#28bddf);box-shadow:0 0 0 3px rgba(108,92,255,.08)}
.connection-card{border-radius:16px!important;background:linear-gradient(120deg,#0d192b,#111d30)!important;border:1px solid rgba(100,129,171,.17)!important;box-shadow:0 16px 35px rgba(9,19,34,.10)}.connection-info b{color:#fff}.connection-info small{color:#8495ad!important}.connection-icon{box-shadow:0 8px 22px rgba(24,119,242,.23)}
.empty-state{padding:42px 20px}.empty-state b{font-size:15px}.empty-state span{line-height:1.55}
.login{background:radial-gradient(circle at 20% 15%,rgba(108,92,255,.28),transparent 28%),radial-gradient(circle at 80% 85%,rgba(34,211,238,.18),transparent 26%),#07101d}.login .card{background:rgba(255,255,255,.92);backdrop-filter:blur(20px);border-radius:22px;box-shadow:0 35px 90px rgba(0,0,0,.28)}
@media(max-width:1100px){.composer-grid{grid-template-columns:1fr}.composer-side{position:static}.main{margin-left:272px}}
@media(max-width:900px){.main{margin-left:0}.content-wrap{padding:25px 18px 38px}.topbar{height:64px;padding:0 18px}.sidebar{width:272px}.page-head h1{font-size:29px}}
@media(max-width:620px){.content-wrap{padding:20px 12px 32px}.panel,.card,.composer-main{border-radius:17px;padding:16px}.page-head h1{font-size:27px}.publish-mode{grid-template-columns:1fr}.image-preview{padding:5px}}

/* Phase 4.1: keep image preview hidden until a file is actually selected */
.image-preview[hidden]{display:none!important}
.upload-box:has(.image-preview:not([hidden]))>label{display:none}

/* Phase 5: multi Facebook account grouping */
.account-stack{display:grid;gap:18px}.account-panel{overflow:hidden}.account-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.account-identity{display:flex;align-items:center;gap:13px;min-width:0}.account-identity h2{margin:2px 0 3px;font-size:18px}.account-identity small{color:var(--muted)}.connection-icon.manual{background:linear-gradient(135deg,var(--accent),#9c67ff)}.account-page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:10px}.account-page-card{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.58);transition:.16s}.account-page-card:hover{transform:translateY(-1px);border-color:rgba(91,92,240,.3);box-shadow:0 8px 24px rgba(31,40,68,.06)}.account-page-card>img,.picker-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#eef1f7}.account-page-meta{min-width:0}.account-page-meta b,.account-page-meta small{display:block}.account-page-meta b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-page-meta small{font-size:9px;color:var(--muted);margin-top:2px}.account-page-side{display:grid;justify-items:end;gap:6px}.account-page-side .table-link{font-size:9px}
.account-filter{display:flex;gap:6px;overflow-x:auto;padding:1px 1px 10px;margin-bottom:4px;scrollbar-width:thin}.account-filter button{border:1px solid var(--line);background:rgba(255,255,255,.7);color:#5c687b;border-radius:999px;padding:7px 9px;white-space:nowrap;font-size:9px;font-weight:800;cursor:pointer;transition:.15s}.account-filter button span{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;padding:0 5px;border-radius:999px;background:#eef1f7;color:#6e798a}.account-filter button.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff;box-shadow:0 7px 18px rgba(91,92,240,.22)}.account-filter button.active span{background:rgba(255,255,255,.2);color:#fff}.account-page-picker{max-height:390px}.picker-group{display:grid;gap:7px}.picker-group[hidden]{display:none!important}.picker-group+.picker-group{margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}.picker-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px 2px}.picker-group-head b,.picker-group-head small{display:block}.picker-group-head b{font-size:10px;color:#3d4960}.picker-group-head small{font-size:8px;color:var(--muted);margin-top:1px}.picker-group-head button{border:0;background:transparent;color:var(--accent);font-size:8px;font-weight:800;cursor:pointer}.page-picker .picker-avatar{width:31px;height:31px}.selected-summary{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-size:9px;color:var(--muted)}.selected-summary b{font-size:12px;color:var(--accent)}
@media(max-width:720px){.account-panel-head{align-items:flex-start;flex-direction:column}.account-page-grid{grid-template-columns:1fr}.connection-actions{width:100%;justify-content:space-between}.connection-actions form:first-child{flex:1}.connection-actions form:first-child .btn{width:100%}.account-page-card{grid-template-columns:38px 1fr auto}.account-filter{margin-left:-2px;margin-right:-2px}}

/* Phase 5.1 — compact multi-account layout */
.compact-head{margin-bottom:18px}.head-actions{display:flex;gap:8px;flex-wrap:wrap}.compact-accounts{gap:10px}.account-compact{border:1px solid rgba(111,132,164,.17);border-radius:16px;background:rgba(255,255,255,.76);box-shadow:0 10px 28px rgba(23,45,77,.045);overflow:hidden}.account-compact>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;user-select:none;transition:.15s}.account-compact>summary::-webkit-details-marker{display:none}.account-compact>summary:hover{background:rgba(108,92,255,.025)}.account-compact[open]>summary{border-bottom:1px solid rgba(111,132,164,.12);background:linear-gradient(90deg,rgba(108,92,255,.035),rgba(34,211,238,.018))}.account-summary-main{display:flex;align-items:center;gap:10px;min-width:0}.account-compact .connection-icon{width:34px;height:34px;border-radius:10px;flex:0 0 34px}.account-summary-text{min-width:0}.account-title-line{display:flex;align-items:center;gap:8px;min-width:0}.account-title-line strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#14243c}.account-summary-text small{display:block;font-size:9px;color:var(--muted);margin-top:2px}.count-pill{font-size:8px;font-weight:850;padding:4px 7px;border-radius:999px;background:#eef0ff;color:#655cf4;white-space:nowrap}.chevron{font-size:17px;color:#8591a5;transition:.18s}.account-compact[open] .chevron{transform:rotate(180deg)}.account-compact-body{padding:10px 12px 12px}.account-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;padding:0 2px}.account-toolbar>span{font-size:9px;font-weight:800;color:#6a788e;text-transform:uppercase;letter-spacing:.5px}.btn.tiny{padding:6px 9px!important;font-size:8px!important;border-radius:9px!important}.compact-danger{width:28px!important;height:28px!important;border-radius:9px!important}.compact-grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:7px}.compact-page-card{grid-template-columns:31px minmax(0,1fr) auto!important;gap:8px!important;padding:7px 8px!important;border-radius:10px!important;min-height:47px}.compact-page-card>img,.compact-page-card>.page-avatar{width:29px!important;height:29px!important;border-radius:8px!important}.compact-page-card .account-page-meta b{font-size:10px!important}.compact-page-card .account-page-meta small{font-size:8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-page-actions{display:flex;align-items:center;gap:7px}.status-dot-mini{width:7px;height:7px;border-radius:50%;display:inline-block;box-shadow:0 0 0 3px rgba(111,132,164,.08)}.status-dot-mini.on{background:#18b46c;box-shadow:0 0 0 3px rgba(24,180,108,.11)}.status-dot-mini.off{background:#a8b2c1}.mini-edit{font-size:8px;font-weight:800;color:var(--accent);text-decoration:none}.manual-compact{margin-top:10px}
/* Compact page selection inside composer */
.account-page-picker{max-height:330px}.picker-group{gap:5px}.picker-group-head{padding:3px 1px}.page-picker label{padding:7px 8px!important;border-radius:10px!important}.page-picker .picker-avatar{width:27px!important;height:27px!important}.page-picker label span:nth-of-type(2) b{font-size:9px}.page-picker label span:nth-of-type(2) small{font-size:7px}.account-filter{padding-bottom:7px}.account-filter button{padding:6px 8px;font-size:8px}
@media(max-width:720px){.compact-grid{grid-template-columns:1fr 1fr}.account-toolbar{align-items:flex-start}.account-title-line{align-items:flex-start;flex-direction:column;gap:3px}.count-pill{padding:3px 6px}.compact-page-card{grid-template-columns:29px minmax(0,1fr) auto!important}}
@media(max-width:480px){.compact-grid{grid-template-columns:1fr}.head-actions{width:100%}.head-actions .btn{flex:1;text-align:center}.account-compact>summary{padding:11px}.account-compact-body{padding:8px}.account-toolbar>span{display:none}}