@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
/* ==========================================================================
   NovaPush — Premium Theme
   Glassmorphism · Aurora gradients · Refined dark aesthetic
   ========================================================================== */
:root{
  --bg:#070b16;
  --bg-2:#0b1020;
  --panel:rgba(20,28,50,.72);
  --panel-solid:#121a32;
  --panel-2:#101a34;
  --line:rgba(125,160,230,.13);
  --line-strong:rgba(140,180,250,.24);
  --text:#eef4ff;
  --muted:#8a9dc0;
  --muted-2:#6b7e9e;
  --blue:#818CF8;
  --blue-deep:#2f7bf0;
  --cyan:#22D3EE;
  --purple:#a97bff;
  --violet:#A78BFA;
  --green:#3dd9a0;
  --orange:#ffb069;
  --pink:#ff7eb6;
  --danger:#ff5c7a;
  --radius:18px;
  --radius-sm:12px;
  --radius-xs:9px;
  --shadow:0 24px 70px rgba(0,0,0,.36);
  --shadow-lg:0 40px 120px rgba(0,0,0,.46);
  --glow-blue:0 0 28px rgba(99,102,241,.32);
  --grad-primary:linear-gradient(135deg,#6366F1 0%,#8B5CF6 50%,#22D3EE 100%);
  --grad-accent:linear-gradient(135deg,#818CF8 0%,#A78BFA 100%);
  --grad-aurora:linear-gradient(120deg,rgba(62,224,208,.06),rgba(139,92,246,.05));
  --font:'Hind Siliguri',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-head:'Space Grotesk',var(--font);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 var(--font);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4,strong,.brand-head{font-family:var(--font-head)}
h1,h2,h3,h4,p{margin-top:0}
h1{font-size:25px;margin-bottom:0;letter-spacing:-.04em}
h2{font-size:17px;margin:0;letter-spacing:-.03em}
h3{font-size:15px;letter-spacing:-.02em}
.muted{color:var(--muted)}
.eyebrow,.nav-label{display:block;color:#6e83a0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.lead-copy{color:var(--muted);font-size:15px;margin:8px 0 0;line-height:1.65}
.text-gradient{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-secondary{color:var(--muted)}

/* ===== Brand ===== */
.brand{display:flex;align-items:center;gap:11px;color:#f5f8ff;font-size:16px;font-family:var(--font-head)}
.brand small{display:block;color:#8298bd;font:500 10px var(--font);letter-spacing:.05em;margin-top:2px}
.brand-mark{display:block;width:38px;height:38px;border-radius:13px;object-fit:cover;background:var(--grad-primary);box-shadow:0 10px 30px rgba(99,102,241,.34),0 0 18px rgba(139,92,246,.22);position:relative;overflow:hidden}
.brand-mark.is-3d{background:transparent;border:1px solid rgba(140,180,250,.18)}
.brand-mark::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 60%);border-radius:13px;pointer-events:none}
.brand-mark.is-3d::after{display:none}

/* ===== App Shell / Sidebar ===== */
.app-shell{display:flex;min-height:100vh;background:
  radial-gradient(ellipse 70% 50% at 75% -5%,rgba(74,117,204,.1),transparent 50%),
  radial-gradient(ellipse 50% 40% at 10% 100%,rgba(140,101,255,.06),transparent 50%),
  var(--bg)}
.sidebar{width:262px;padding:27px 17px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;background:rgba(8,13,24,.78);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);z-index:3}
.workspace-switcher{display:flex;align-items:center;gap:10px;margin:32px 4px 24px;padding:11px 12px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px}
.workspace-switcher small,.profile-mini small,.account-row small,.connection-row small,.table-person small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.workspace-switcher strong{font-size:12px;display:block;margin-top:3px}
.workspace-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.primary-nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto}
.nav-label{margin:14px 11px 8px}
.primary-nav a{display:flex;align-items:center;gap:12px;color:#91a2bc;border-radius:11px;padding:11px 12px;transition:all .2s ease;font-weight:500}
.primary-nav a:hover{color:#fff;background:linear-gradient(90deg,rgba(73,154,255,.14),rgba(73,154,255,.03))}
.primary-nav a.is-active{color:#fff;background:linear-gradient(90deg,rgba(73,154,255,.18),rgba(140,101,255,.06));box-shadow:inset 2px 0 var(--blue)}
.nav-icon{width:19px;text-align:center;color:#8fa5c4;font-size:18px}
.is-active .nav-icon{color:var(--blue)}
.sidebar-footer{margin-top:auto;border-top:1px solid var(--line);padding-top:15px}
.profile-mini{display:flex;align-items:center;gap:9px;padding:7px;border-radius:11px;transition:background .2s}
.profile-mini:hover{background:rgba(255,255,255,.04)}
.profile-mini strong{display:block;font-size:12px}
.avatar{display:grid;place-items:center;background:linear-gradient(135deg,#3d6a9e,#8b68d7);width:34px;height:34px;border-radius:11px;font:600 13px var(--font-head);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}

/* ===== Main Content ===== */
.main-content{margin-left:262px;width:calc(100% - 262px);padding:29px 42px 80px;max-width:1600px}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px}
.topbar-actions{display:flex;align-items:center;gap:12px}
.icon-button{border:1px solid var(--line);background:rgba(255,255,255,.035);color:#a5b5cc;border-radius:10px;width:36px;height:36px;display:inline-grid;place-items:center;position:relative;cursor:pointer;font-size:16px;transition:all .2s}
.icon-button:hover{background:rgba(255,255,255,.08);color:#fff;border-color:var(--line-strong)}
.notification-dot{width:5px;height:5px;position:absolute;right:8px;top:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue)}

/* ===== Buttons ===== */
.btn{border:0;border-radius:11px;font-weight:700;padding:11px 18px;transition:all .2s ease;cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn span{font-size:1.1em}
.btn-primary{background:var(--grad-primary);color:#fff;box-shadow:0 8px 28px rgba(99,102,241,.25)}
.btn-primary:hover{transform:translateY(-2px);color:#fff;box-shadow:0 12px 36px rgba(99,102,241,.35)}
.btn-secondary{background:rgba(255,255,255,.065);border:1px solid var(--line);color:#dbe7fa}
.btn-secondary:hover{background:rgba(255,255,255,.1);color:#fff;border-color:var(--line-strong)}
.btn-outline-light{background:transparent;border:1px solid var(--line-strong);color:#dbe7fa}
.btn-outline-light:hover{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(130,175,240,.4)}
.btn-outline-danger{background:transparent;border:1px solid rgba(255,126,146,.3);color:#ff9cae}
.btn-outline-danger:hover{background:rgba(255,126,146,.08)}
.btn-danger-soft{background:rgba(255,126,146,.1);border:1px solid rgba(255,126,146,.2);color:#ff9cae}
.btn-sm{padding:7px 14px;font-size:12px;border-radius:9px}
.btn-lg{padding:14px 28px;font-size:15px;border-radius:13px}
.text-link{color:var(--blue);font-weight:700;transition:color .2s}
.text-link:hover{color:#7cc0ff}
.text-warning{color:var(--orange)}

/* ===== Alerts ===== */
.app-alert{border:0;border-radius:13px;background:rgba(84,214,173,.13);color:#9df2d5;margin-bottom:20px;padding:14px 18px;border:1px solid rgba(84,214,173,.2);font-weight:500}
.alert-danger{background:rgba(255,126,146,.12);color:#ffb1bd;border:1px solid rgba(255,126,146,.2)}
.alert-success{background:rgba(84,214,173,.12);color:#9df2d5;border:1px solid rgba(84,214,173,.2)}
.alert{border-radius:13px;padding:14px 18px;font-weight:500;border:1px solid var(--line)}

/* ===== Panels & Cards (Glassmorphism) ===== */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:22px}
.panel-heading{display:flex;align-items:start;justify-content:space-between;margin-bottom:20px}
.panel-heading h2{margin-top:5px}

/* ===== Stats ===== */
.welcome-row,.page-intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:23px;gap:15px;flex-wrap:wrap}
.date-chip,.setup-status{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);padding:9px 14px;color:#9caec7;font-size:12px;font-weight:500;backdrop-filter:blur(8px)}
.live-pulse,.setup-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 9px var(--green);animation:livePulse 2.4s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 9px var(--green)}50%{opacity:.5;box-shadow:0 0 16px var(--green)}}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat-card{background:linear-gradient(155deg,rgba(20,33,52,.88),rgba(11,20,34,.85));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 20px 18px;min-height:162px;position:relative;overflow:hidden;backdrop-filter:blur(14px);transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .3s;animation:statRise .5s ease backwards}
.stat-card:nth-child(1){animation-delay:.05s}.stat-card:nth-child(2){animation-delay:.12s}.stat-card:nth-child(3){animation-delay:.19s}.stat-card:nth-child(4){animation-delay:.26s}
@keyframes statRise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.stat-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 32px 80px rgba(0,0,0,.42),0 0 0 1px rgba(99,102,241,.08)}
.stat-card::before{content:'';position:absolute;width:150px;height:150px;border-radius:50%;right:-60px;top:-70px;background:radial-gradient(circle,rgba(83,161,255,.1),transparent 70%);transition:opacity .3s}
.stat-card::after{content:'';position:absolute;inset:0;background:linear-gradient(165deg,rgba(255,255,255,.05),transparent 45%);border-radius:var(--radius);pointer-events:none;opacity:.7}
.stat-card:hover::before{opacity:1.5}
.stat-primary{background:linear-gradient(155deg,rgba(40,83,136,.55),rgba(16,33,59,.9));border-color:rgba(91,173,255,.28);box-shadow:var(--shadow),0 0 36px rgba(99,102,241,.1)}
.stat-primary::before{background:radial-gradient(circle,rgba(83,161,255,.18),transparent 70%)}
.stat-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(83,168,255,.16);color:var(--blue);margin-bottom:16px;font-size:18px;box-shadow:0 6px 20px rgba(99,102,241,.14),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .3s}
.stat-card:hover .stat-icon{transform:scale(1.08) rotate(-4deg)}
.stat-icon.purple{color:var(--purple);background:rgba(169,136,255,.16);box-shadow:0 6px 20px rgba(169,136,255,.14),inset 0 1px 0 rgba(255,255,255,.08)}
.stat-icon.orange{color:var(--orange);background:rgba(255,185,105,.15);box-shadow:0 6px 20px rgba(255,185,105,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.stat-icon.green{color:var(--green);background:rgba(84,214,173,.14);box-shadow:0 6px 20px rgba(84,214,173,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.stat-label{display:block;color:#b8c6dd;font-size:12px;font-weight:600}
.stat-label small{display:block;color:var(--muted-2);font-size:10px;margin-top:3px;font-weight:400}
.stat-card strong{font-size:30px;display:block;margin-top:10px;letter-spacing:-.05em;font-family:var(--font-head);background:linear-gradient(180deg,#fff,#d0e0f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat-suffix{font:400 12px var(--font);color:var(--muted);-webkit-text-fill-color:var(--muted)}
.stat-trend{display:inline-flex;align-items:center;gap:4px;color:var(--green);font-size:10px;margin-top:10px;font-weight:700;padding:3px 8px;border-radius:20px;background:rgba(61,217,160,.1);border:1px solid rgba(61,217,160,.15)}
.stat-trend small{color:var(--muted-2);margin-left:2px;font-weight:400}
.stat-trend.neutral{color:#9db3d2;background:rgba(157,179,210,.08);border-color:rgba(157,179,210,.12)}
.stat-trend.warm{color:var(--orange);background:rgba(255,185,105,.1);border-color:rgba(255,185,105,.15)}
.stat-trend.down{color:#ff8f8f;background:rgba(255,143,143,.1);border-color:rgba(255,143,143,.15)}
.stat-trend a{color:inherit}

/* ===== Content Grid ===== */
.content-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:18px;margin-bottom:18px}
.lower-grid{grid-template-columns:1fr 1fr}
.lower-grid>.panel{animation:statRise .5s ease .38s backwards}
.lower-grid>.panel:nth-child(2){animation-delay:.44s}

/* ===== Forms ===== */
.select-control,.stack-form input,.stack-form textarea,.stack-form select,.filter-bar input,.filter-bar select{background:#0b1422;border:1px solid var(--line);color:#dce8fa;border-radius:10px;padding:11px 13px;outline:0;transition:border-color .2s,box-shadow .2s;width:100%}
.select-control:focus,.stack-form input:focus,.stack-form textarea:focus,.stack-form select:focus,.filter-bar input:focus{border-color:rgba(83,168,255,.6);box-shadow:0 0 0 3px rgba(83,168,255,.1)}
.stack-form{display:flex;flex-direction:column;gap:16px}
.stack-form label{display:flex;flex-direction:column;gap:7px;color:#aebdd2;font-size:11px;font-weight:700}
.stack-form input,.stack-form textarea,.stack-form select{font:14px var(--font);font-weight:400;resize:vertical}

/* ===== Charts ===== */
.chart-panel{min-height:340px;animation:statRise .5s ease .28s backwards}
.chart-placeholder{height:240px;position:relative;margin-top:20px;background:linear-gradient(to bottom,transparent 0 42px,rgba(165,187,217,.05) 43px 44px);border-bottom:1px solid var(--line);overflow:hidden}
.chart-area{position:absolute;inset:32px 0 30px;background:linear-gradient(180deg,rgba(99,102,241,.22) 0%,rgba(139,92,246,.08) 50%,transparent 100%);clip-path:polygon(0 70%,8% 62%,17% 70%,26% 45%,37% 53%,46% 33%,55% 42%,63% 27%,73% 32%,81% 16%,89% 27%,100% 5%,100% 100%,0 100%);animation:chartFadeIn .8s ease .5s backwards}
@keyframes chartFadeIn{from{opacity:0}to{opacity:1}}
.chart-line{position:absolute;inset:32px 0 30px;clip-path:polygon(0 70%,8% 62%,17% 70%,26% 45%,37% 53%,46% 33%,55% 42%,63% 27%,73% 32%,81% 16%,89% 27%,100% 5%,100% 0,0 0)}
.chart-line::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 8%,#5baeff 8% 8.5%,transparent 8.5% 17%,#5baeff 17% 17.5%,transparent 17.5% 26%,#5baeff 26% 26.5%,transparent 26.5% 37%,#5baeff 37% 37.5%,transparent 37.5% 46%,#5baeff 46% 46.5%,transparent 46.5% 55%,#5baeff 55% 55.5%,transparent 55.5% 63%,#5baeff 63% 63.5%,transparent 63.5% 73%,#5baeff 73% 73.5%,transparent 73.5% 81%,#5baeff 81% 81.5%,transparent 81.5% 89%,#5baeff 89% 89.5%,transparent 89.5% 100%,#5baeff 100%);filter:drop-shadow(0 0 6px rgba(91,174,255,.5))}
.chart-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px rgba(91,174,255,.8),0 0 0 3px rgba(91,174,255,.15);animation:chartDotPulse 2s ease-in-out infinite}
@keyframes chartDotPulse{0%,100%{box-shadow:0 0 12px rgba(91,174,255,.8),0 0 0 3px rgba(91,174,255,.15)}50%{box-shadow:0 0 18px rgba(91,174,255,1),0 0 0 5px rgba(91,174,255,.08)}}
.axis{position:absolute;right:0;color:#61728b;font-size:10px}
.axis-1{bottom:4px}.axis-2{top:90px}.axis-3{top:2px}
.chart-foot{position:absolute;bottom:-21px;left:0;right:0;display:flex;justify-content:space-between;color:#62738e;font-size:10px}

/* ===== Activity / Accounts ===== */
.activity-panel{animation:statRise .5s ease .33s backwards}
.activity-list,.account-list{display:flex;flex-direction:column;gap:16px}
.activity-row{display:flex;gap:13px;padding:6px 0;transition:transform .2s}
.activity-row:hover{transform:translateX(3px)}
.activity-dot{margin-top:5px;width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px rgba(129,140,248,.6);position:relative}
.activity-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(129,140,248,.25);animation:dotRipple 2.5s ease-out infinite}
@keyframes dotRipple{0%{opacity:.6;transform:scale(.7)}100%{opacity:0;transform:scale(2.2)}}
.activity-dot.publish{background:var(--green);box-shadow:0 0 12px rgba(84,214,173,.6)}
.activity-dot.publish::after{border-color:rgba(84,214,173,.25)}
.activity-dot.team{background:var(--purple);box-shadow:0 0 12px rgba(176,140,255,.6)}
.activity-dot.team::after{border-color:rgba(176,140,255,.25)}
.activity-row strong{font-size:12px}
.activity-row p{margin:4px 0 5px;color:#9aabc2;font-size:12px}
.activity-row small{color:#61738f;font-size:10px}
.account-row,.connection-row,.revenue-row{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:12px;border:1px solid transparent;transition:all .2s;margin:0 -12px}
.account-row:hover,.connection-row:hover,.revenue-row:hover{background:rgba(255,255,255,.03);border-color:var(--line)}
.account-row:last-child,.connection-row:last-child,.revenue-row:last-child{border-bottom:0;padding-bottom:10px}
.account-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;font:700 12px var(--font-head);color:white}
.account-logo-svg{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid var(--line);transition:transform .2s}
.account-row:hover .account-logo-svg{transform:scale(1.08)}
.account-logo.facebook{background:#315cc7}
.account-logo.instagram{background:linear-gradient(140deg,#ef8f56,#a150d3)}
.account-logo.youtube{background:#c93742}
.account-logo.tiktok{background:#273b62}
.status-pill{margin-left:auto;border-radius:30px;padding:5px 11px;font-size:10px;color:#aebcd1;background:rgba(255,255,255,.07);font-weight:600;white-space:nowrap}
.status-pill.connected{background:rgba(84,214,173,.12);color:#7fe6c4;border:1px solid rgba(84,214,173,.2)}
.status-pill.pending{background:rgba(255,185,105,.12);color:#ffc984;border:1px solid rgba(255,185,105,.2)}
.status-pill.expired,.status-pill.error{background:rgba(255,126,146,.12);color:#ff9ead;border:1px solid rgba(255,126,146,.2)}

/* ===== Account selection (page-selection feature) ===== */
.select-pill{border-radius:30px;padding:5px 10px;font-size:10px;font-weight:700;white-space:nowrap}
.select-pill.is-on{background:rgba(62,224,208,.13);color:#7ce8dc;border:1px solid rgba(62,224,208,.25)}
.select-pill.is-off{background:rgba(255,255,255,.05);color:var(--muted-2);border:1px solid var(--line)}
.connection-row.is-deselected{opacity:.55}
.connection-row.is-deselected:hover{opacity:.8}
.fb-select-note{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 14px;border-radius:12px;border:1px solid rgba(99,102,241,.22);background:linear-gradient(135deg,rgba(62,224,208,.07),rgba(139,92,246,.05));font-size:12px;color:var(--muted)}
.fb-select-note>span:first-child{display:none}
.fb-select-note>div{line-height:1.6}

/* ===== Quick Actions ===== */
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.quick-actions a{padding:20px 16px;border:1px solid var(--line);border-radius:14px;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:block;position:relative;overflow:hidden;background:rgba(255,255,255,.02)}
.quick-actions a::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.06));opacity:0;transition:opacity .3s}
.quick-actions a:hover{border-color:rgba(129,140,248,.4);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.3),0 0 0 1px rgba(99,102,241,.08)}
.quick-actions a:hover::before{opacity:1}
.quick-actions a>*{position:relative;z-index:1}
.quick-actions span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--blue);font-size:20px;margin-bottom:16px;background:rgba(83,168,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .3s,background .3s}
.quick-actions a:hover span{transform:scale(1.1) translateY(-2px);background:rgba(83,168,255,.2)}
.quick-actions strong,.quick-actions small{display:block}
.quick-actions strong{font-size:13px}
.quick-actions small{color:var(--muted);font-size:10px;line-height:1.45;margin-top:6px}

/* ===== Empty States ===== */
.empty-state{text-align:center;padding:48px 25px;color:var(--muted)}
.empty-state.compact{padding:28px 12px}
.empty-state.wide{grid-column:1/-1}
.empty-state h3{color:#dce8f7;font-size:16px;margin:12px 0 5px}
.empty-state p{font-size:12px;line-height:1.6}
.empty-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(129,140,248,.1);color:var(--blue);font-size:22px}

/* ===== Filter / Search ===== */
.filter-bar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.search-field{display:flex;align-items:center;gap:10px;flex:1;border:1px solid var(--line);background:#0b1422;border-radius:10px;padding:0 12px;color:var(--muted)}
.search-field input{border:0!important;box-shadow:none!important;background:transparent;flex:1}

/* ===== Media Grid ===== */
.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.media-card{background:var(--panel-solid);border:1px solid var(--line);border-radius:15px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.media-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.media-preview{height:165px;background:linear-gradient(135deg,#1b324a,#111b31);position:relative;display:grid;place-items:center;overflow:hidden}
.media-preview img{width:100%;height:100%;object-fit:cover}
.media-preview.video{background:radial-gradient(circle at 30% 30%,#435b78,#101a2c)}
.media-preview.document{background:linear-gradient(130deg,#263b57,#162035)}
.media-type-mark{font:700 19px var(--font-head);color:#b8d7ff;opacity:.8}
.risk-badge{position:absolute;top:10px;right:10px;padding:5px 8px;border-radius:30px;background:rgba(8,13,24,.72);font-size:9px;color:#99abbe;font-weight:600}
.risk-badge.low{color:var(--green)}.risk-badge.medium{color:var(--orange)}.risk-badge.high{color:var(--danger)}
.media-meta{padding:13px}
.media-meta strong,.media-meta span,.media-meta small{display:block}
.media-meta strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-meta span,.media-meta small{color:var(--muted);font-size:10px;margin-top:5px}
.media-meta small{color:var(--blue)}

/* ===== Upload Layout ===== */
.upload-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:17px}
.upload-main{min-height:475px}
.dropzone{border:2px dashed rgba(95,166,255,.35);background:radial-gradient(circle at 50% 32%,rgba(78,142,235,.1),transparent 40%),#0d1929;border-radius:15px;min-height:425px;display:grid;place-content:center;text-align:center;position:relative;transition:all .25s}
.dropzone.dragging{border-color:var(--blue);background-color:#10233d;box-shadow:var(--glow-blue)}
.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-mark{display:grid;place-items:center;margin:0 auto 17px;width:60px;height:60px;border-radius:18px;background:rgba(129,140,248,.14);color:var(--blue);font-size:26px}
.dropzone h2{font-size:19px}
.dropzone p{color:var(--muted);margin:7px 0}
.dropzone small{color:#61738e;font-size:10px}
.selected-file{color:var(--green);font-size:11px;margin-top:17px;font-weight:600}
.upload-side{height:max-content}
.copyright-note{display:flex;gap:10px;padding:12px;border-radius:12px;border:1px solid rgba(255,185,105,.18);background:rgba(255,185,105,.07);color:var(--orange)}
.copyright-note strong,.copyright-note small{display:block}
.copyright-note strong{font-size:11px}
.copyright-note small{color:#a8aeb9;line-height:1.5;margin-top:4px;font-weight:400}
.copyright-note>span{font-size:19px}
.upload-preview{display:none}

/* ===== Upload Gate Banner (no accounts connected) ===== */
.upload-gate{background:linear-gradient(135deg,rgba(91,169,255,.12),rgba(176,140,255,.08));border:1px solid rgba(91,169,255,.25);border-radius:16px;padding:28px;text-align:center;margin-bottom:18px}
.upload-gate .gate-icon{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--grad-primary);color:#fff;font-size:26px;margin-bottom:14px;box-shadow:0 10px 30px rgba(129,140,248,.3)}
.upload-gate h2{font-size:20px;margin-bottom:8px}
.upload-gate p{color:var(--muted);font-size:14px;max-width:440px;margin:0 auto 18px;line-height:1.6}
.connected-platforms-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:12px;border:1px solid rgba(84,214,173,.2);background:rgba(84,214,173,.06);margin-bottom:18px}
.connected-platforms-bar .cp-label{font-size:12px;font-weight:700;color:#7fe6c4}
.connected-platforms-bar .cp-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cp-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:12px;font-weight:600;color:#cfe0f5}

/* ===== Platform Toggle Selector (per-post platform selection) ===== */
.platform-toggles{background:linear-gradient(180deg,rgba(20,28,50,.6),rgba(16,24,44,.4));border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:18px}
.upload-layout > .platform-toggles{grid-column:1 / -1}
.pt-header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.pt-hint{color:var(--muted-2);font-size:12px}
.pt-list{display:flex;flex-direction:column;gap:9px}
.pt-item{display:block;padding:12px 14px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.025);transition:all .25s ease}
.pt-item:hover{border-color:rgba(99,102,241,.25);background:rgba(99,102,241,.04)}
.pt-item.is-off{opacity:.5}
.pt-main{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.pt-checkbox{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pt-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.05);flex-shrink:0}
.pt-info{display:flex;flex-direction:column;flex:1;line-height:1.3}
.pt-info strong{font-size:13px;color:#e8f0ff;font-weight:600}
.pt-info small{font-size:11px;color:var(--muted)}
.pt-switch{width:42px;height:24px;border-radius:100px;background:rgba(255,255,255,.12);position:relative;flex-shrink:0;transition:background .25s ease}
.pt-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.2,.8,.3,1);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.pt-knob::after{content:'';position:absolute;left:6px;top:4px;width:5px;height:8px;border:solid #4f46e5;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity .15s ease}
.pt-item .pt-checkbox:checked ~ .pt-switch .pt-knob::after{opacity:1}
.pt-item .pt-checkbox:checked ~ .pt-switch{background:var(--grad-primary)}
.pt-item .pt-checkbox:checked ~ .pt-switch .pt-knob{transform:translateX(18px)}
.pt-format{margin:10px 0 0 50px;padding-top:10px;border-top:1px dashed var(--line)}
.pt-format-field{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pt-format-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2)}
.pt-format-select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:9px;color:#e8f0ff;font-size:13px;padding:7px 30px 7px 12px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393a4c4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.pt-format-select:focus{outline:none;border-color:rgba(99,102,241,.5);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.pt-format-select option{background:#141c32;color:#e8f0ff}
.pt-format-static{font-size:12px;color:var(--muted)}
.pt-summary{margin-top:13px;font-size:12px;color:var(--muted);padding-top:12px;border-top:1px solid var(--line)}
.pt-summary strong{color:var(--cyan)}
.pt-add{display:inline-block;margin-top:10px;font-size:12px}

/* ===== Multi-hashtag chip input ===== */
.hashtag-field{border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(11,20,34,.6)}
.hashtag-field legend{font-size:11px;font-weight:700;color:#aebdd2;margin-bottom:8px}
.hashtag-field legend small{font-weight:400}
.hashtag-chips{display:flex;flex-wrap:wrap;gap:7px;min-height:6px;margin-bottom:9px}
.hashtag-chips:empty{margin-bottom:0}
.hashtag-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;background:rgba(129,140,248,.16);border:1px solid rgba(129,140,248,.35);font-size:12px;font-weight:600;color:#bcd8ff}
.hashtag-chip .hashtag-remove{background:none;border:none;color:#9bb8e6;cursor:pointer;font-size:15px;line-height:1;padding:0 0 0 2px}
.hashtag-chip .hashtag-remove:hover{color:#fff}
.hashtag-input-row{display:flex;align-items:center;gap:10px}
.hashtag-input-row input{flex:1;background:transparent;border:none;color:#dce8fa;font:14px var(--font);outline:0;padding:4px 0}
.hashtag-input-row input::placeholder{color:var(--muted)}
.hashtag-count{white-space:nowrap}

/* ===== Copyright risk bar + confirmation gate ===== */
.copyright-note{flex-direction:column;gap:8px}
.copyright-note>span.copyright-icon{align-self:flex-start;font-size:19px}
.copyright-risk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:9px;margin-top:8px;font-size:12px}
.copyright-risk-bar .risk-level{font-weight:800;letter-spacing:.06em;font-size:11px;padding:2px 8px;border-radius:6px}
.copyright-risk-bar .risk-detail{color:#a8aeb9;font-weight:400}
.copyright-risk-bar.risk-high{background:rgba(255,77,109,.12);border:1px solid rgba(255,77,109,.4);color:#ff8aa0}
.copyright-risk-bar.risk-high .risk-level{background:rgba(255,77,109,.25);color:#ffb3bf}
.copyright-risk-bar.risk-medium{background:rgba(255,185,105,.12);border:1px solid rgba(255,185,105,.35);color:#ffc78a}
.copyright-risk-bar.risk-medium .risk-level{background:rgba(255,185,105,.25);color:#ffd9a8}
.copyright-risk-bar.risk-low{background:rgba(84,214,173,.1);border:1px solid rgba(84,214,173,.3);color:#8fe9c6}
.copyright-risk-bar.risk-low .risk-level{background:rgba(84,214,173,.25);color:#aaf2d6}
.copyright-confirm{margin-top:10px;padding:10px 12px;border-radius:9px;border:1px dashed rgba(255,77,109,.4);background:rgba(255,77,109,.05)}
.confirm-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:12px;color:#cdd6e3;line-height:1.5;font-weight:400}
.confirm-check input{margin-top:2px;flex-shrink:0;accent-color:#ff4d6d;width:16px;height:16px}
[data-publish-btn]{transition:opacity .2s,transform .2s}
[data-publish-btn]:disabled{opacity:.45;cursor:not-allowed}

/* ===== Schedule / Calendar ===== */
.schedule-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:17px}
.calendar-grid{border:1px solid var(--line);border-radius:13px;overflow:hidden}
.calendar-week,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr)}
.calendar-week{background:rgba(255,255,255,.035);color:#6d809e;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.calendar-week span{padding:11px;border-right:1px solid var(--line)}
.calendar-days{grid-auto-rows:90px}
.calendar-day{border-top:1px solid var(--line);border-right:1px solid var(--line);padding:8px;color:#657791;position:relative}
.calendar-day.today>span{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:var(--blue);color:#fff}
.calendar-event{margin-top:9px;padding:5px 6px;background:rgba(129,140,248,.14);border-left:2px solid var(--blue);border-radius:5px;color:#b9d8ff;font-size:9px;white-space:nowrap;overflow:hidden}
.queue-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.queue-item:last-child{border-bottom:0}
.queue-time{font:600 11px var(--font-head);color:#b9cbdf;min-width:46px}
.queue-time small,.queue-item div small{display:block;color:var(--muted);font:10px var(--font);margin-top:3px}
.queue-item strong{font-size:12px}

/* ===== Modals ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(1,6,15,.75);backdrop-filter:blur(10px);align-items:center;justify-content:center;padding:20px;z-index:20}
.modal-overlay.is-open{display:flex}
.modal-card{width:min(100%,450px);background:#111d30;border:1px solid var(--line-strong);box-shadow:var(--shadow);border-radius:18px;padding:23px}
.modal-card fieldset{border:0;padding:0}
.modal-card legend{color:#aebdd2;font-size:11px;font-weight:700}
.platform-checks{display:flex;flex-wrap:wrap;gap:10px}
.platform-checks label{color:#9badc5;font-size:11px}
.check-label{display:flex!important;flex-direction:row!important;align-items:center}
.form-row-between{display:flex;justify-content:space-between;align-items:center;font-size:11px}
.check-label input,.platform-checks input{accent-color:var(--blue);width:14px!important;height:14px!important}
.calendar-actions{display:flex;gap:5px}

/* ===== Analytics ===== */
.insight-stats .stat-card{min-height:127px}
.wide-chart{min-height:340px}
.analytics-bars{height:235px;display:flex;align-items:end;gap:9px;padding:18px 8px 0;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0 45px,rgba(165,187,217,.07) 46px 47px)}
.bar-group{display:flex;align-items:end;justify-content:center;gap:2px;flex:1;height:100%;position:relative}
.bar{display:block;width:42%;min-height:5px;border-radius:4px 4px 0 0}
.bar.reach,.legend-dot.reach{background:linear-gradient(180deg,#65c2ff,#478cff)}
.bar.engage,.legend-dot.engage{background:linear-gradient(180deg,#b295ff,#8068ef)}
.bar-group small{position:absolute;bottom:-22px;color:#62738e;font-size:9px;white-space:nowrap}
.legend{display:flex;gap:15px;color:#8191a8;font-size:10px;margin-top:28px}
.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}
.performer-row{display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line);padding:13px 0}
.performer-row:last-child{border:0}
.performer-rank{color:#657791;font:12px var(--font-head)}
.performer-row strong,.performer-row small{display:block}
.performer-row strong{font-size:11px;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.performer-row small{font-size:10px;color:var(--muted);margin-top:3px}
.score{margin-left:auto;color:var(--green);font:600 12px var(--font-head)}

/* ===== Earnings ===== */
.income-hero{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(120deg,rgba(37,88,134,.4),rgba(24,34,68,.88));margin-bottom:17px;overflow:hidden;min-height:170px;border-radius:var(--radius);border:1px solid var(--line-strong)}
.income-hero strong{font:700 42px var(--font-head);display:block;margin:10px 0 3px;letter-spacing:-.04em}
.income-hero p{color:#9caeca;margin:0}
.income-spark{display:flex;align-items:end;gap:8px;height:100px;transform:rotate(-5deg)}
.income-spark span{width:14px;border-radius:6px 6px 2px 2px;background:linear-gradient(#65b7ff,#7867e8);height:32px}
.income-spark span:nth-child(2){height:50px}.income-spark span:nth-child(3){height:42px}
.income-spark span:nth-child(4){height:75px}.income-spark span:nth-child(5){height:55px}
.income-spark span:nth-child(6){height:89px}.income-spark span:nth-child(7){height:73px}
.earnings-list>div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0;color:#92a4bd;font-size:11px}
.earnings-list strong{color:#dce8f8}
.member-count{color:var(--muted);font-size:11px}

/* ===== Tables ===== */
.table-wrap{overflow:auto}
.app-table{width:100%;border-collapse:collapse}
.app-table th{color:#69809d;font-size:10px;text-transform:uppercase;letter-spacing:.1em;text-align:left;font-weight:600;padding:10px 8px;border-bottom:1px solid var(--line)}
.app-table td{padding:15px 8px;border-bottom:1px solid var(--line);color:#aab9ce;font-size:11px}
.table-person{display:flex;align-items:center;gap:10px}
.table-person strong{display:block;color:#e0ebfa;font-size:12px}
.role-tag{color:#b5c5db;background:rgba(255,255,255,.06);padding:5px 9px;border-radius:7px;font-weight:600}

/* ===== Setup ===== */
.setup-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:17px;margin-bottom:17px}
.setup-intro{background:radial-gradient(circle at 84% 10%,rgba(123,102,236,.18),transparent 35%),linear-gradient(145deg,#172743,#101830);min-height:340px}
.setup-intro h2{font-size:31px;line-height:1.08;margin:15px 0 13px}
.setup-intro>p{color:#9eafc7;line-height:1.65;max-width:450px}
.setup-steps{display:flex;gap:25px;margin-top:35px}
.setup-steps span,.setup-steps strong,.setup-steps small{display:block}
.setup-steps span{color:var(--blue);font:600 13px var(--font-head);margin-bottom:11px}
.setup-steps strong{font-size:11px}
.setup-steps small{color:var(--muted);font-size:10px;margin-top:4px;line-height:1.5}
.provider-guide{margin-top:17px}
.provider-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.provider-cards>div{border:1px solid var(--line);border-radius:13px;padding:18px;transition:all .25s ease;background:rgba(255,255,255,.02)}
.provider-cards>div:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.provider-cards strong,.provider-cards small{display:block}
.provider-cards strong{font-size:13px}
.provider-cards small{color:var(--muted);font-size:11px;margin-top:4px;line-height:1.5}

/* ===== Settings ===== */
.settings-layout{display:grid;grid-template-columns:200px minmax(0,600px);gap:17px;align-items:start}
.settings-tabs{display:flex;flex-direction:column;gap:4px}
.settings-tabs a{color:#8395af;border-radius:10px;padding:11px 13px;font-weight:600;transition:all .2s}
.settings-tabs a.active,.settings-tabs a:hover{background:rgba(129,140,248,.1);color:#dceaff}
.divider{border-color:var(--line);margin:25px 0}

/* ===== Notifications ===== */
.notification-panel{max-width:850px}
.notification-row{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--line);position:relative}
.notification-row:last-child{border-bottom:0}
.notification-row strong{font-size:12px}
.notification-row p{color:#9cacc1;margin:5px 0;font-size:12px}
.notification-row small{color:#657790;font-size:10px}
.unread-mark{width:6px;height:6px;border-radius:50%;background:var(--blue);margin-left:auto;margin-top:5px;box-shadow:0 0 8px var(--blue)}

/* ===== Auth Pages ===== */
.auth-body{min-height:100vh;background:radial-gradient(circle at 20% 10%,rgba(67,113,202,.2),transparent 30%),radial-gradient(circle at 90% 90%,rgba(129,81,211,.14),transparent 32%),#080d18;font-family:var(--font)}
.auth-layout{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;max-width:1250px;margin:auto}
.auth-promo{display:flex;flex-direction:column;padding:42px 8vw 42px 5vw;position:relative}
.promo-copy{margin:auto 0 15vh;max-width:540px}
.promo-copy h1{font-size:clamp(40px,5vw,66px);line-height:.99;letter-spacing:-.065em;margin:18px 0;font-family:var(--font-head)}
.promo-copy p{color:#9aacc6;font-size:17px;line-height:1.6;max-width:430px}
.promo-metric{display:flex;align-items:center;gap:15px;border-top:1px solid var(--line);padding-top:18px;color:#8fa4bf}
.promo-metric strong{font:600 25px var(--font-head);color:#b2d8ff}
.promo-metric span{font-size:11px;line-height:1.5}
.auth-card-wrap{display:flex;align-items:center;justify-content:center;padding:30px 7vw 30px 3vw}
.auth-card{width:min(100%,400px);padding:40px;border:1px solid var(--line-strong);border-radius:22px;background:rgba(16,27,44,.76);box-shadow:var(--shadow-lg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.auth-card h2{font-size:27px;margin:10px 0 0}
.auth-card .stack-form{margin-top:27px}
.auth-card label{font-size:11px}
.password-field{display:flex;align-items:center;background:#0b1422;border:1px solid var(--line);border-radius:10px}
.password-field input{border:0!important;background:transparent!important;box-shadow:none!important}
.password-field button{border:0;background:transparent;color:var(--blue);font-size:10px;padding:0 10px;cursor:pointer;font-weight:700}
.auth-foot{text-align:center;color:var(--muted);font-size:11px;margin:22px 0 0}
.auth-foot a{color:var(--blue);font-weight:700}
.auth-grid-deco{position:fixed;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none;z-index:0}
.auth-promo,.auth-card-wrap{position:relative;z-index:1}
.promo-platforms{display:flex;gap:14px;margin-top:auto;padding-top:30px}
.promo-platforms .pp-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:rgba(18,27,46,.7);border:1px solid var(--line);backdrop-filter:blur(10px);transition:transform .3s, border-color .3s, box-shadow .3s}
.promo-platforms .pp-icon:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 8px 30px rgba(91,169,255,.15)}
.auth-orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.18;pointer-events:none}
.orb-a{width:260px;height:260px;background:#818CF8;top:-70px;right:15%}
.orb-b{width:320px;height:320px;background:#A78BFA;bottom:-130px;left:5%}

/* ===== Error Pages ===== */
.error-body{min-height:100vh;display:grid;place-items:center;text-align:center;background:var(--bg);padding:25px;font-family:var(--font)}
.error-body>div{max-width:440px}
.error-body h1{font-size:42px;margin:14px 0}
.error-body p{color:var(--muted);line-height:1.6}
.database-error{padding:35px;border:1px solid var(--line);border-radius:18px;background:var(--panel-solid)}
code{color:#9dcbff;background:rgba(255,255,255,.06);padding:2px 7px;border-radius:6px;font-size:.9em}

/* ===== SVG Platform Icons ===== */
.account-logo-svg{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
.platform-svg{display:block;transition:transform .25s ease,filter .25s ease}
.connection-row:hover .platform-svg,.account-row:hover .platform-svg,.revenue-row:hover .platform-svg{transform:scale(1.08) rotate(-2deg)}
.provider-cards .platform-svg{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}

/* ===== Owner Mode ===== */
.owner-mode-panel{margin-bottom:17px}
.owner-mode-panel .credential-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:18px}
.owner-mode-panel code{background:rgba(255,255,255,.06);padding:2px 8px;border-radius:8px;color:#9fd1ff}
.owner-mode-panel details summary::-webkit-details-marker{display:none}
.owner-mode-panel .badge{font-weight:600;letter-spacing:.02em}
.owner-step{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted);margin-bottom:8px;line-height:1.6}
.owner-step-no{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(129,140,248,.15);color:#8fd1ff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.owner-step a{color:#8fd1ff}

/* ===== Animations ===== */
@keyframes chx-pulse{0%,100%{filter:drop-shadow(0 0 0 rgba(129,140,248,0))}50%{filter:drop-shadow(0 0 10px rgba(129,140,248,.55))}}
@keyframes hubFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hubPulse{0%{transform:scale(1);opacity:.4}50%{transform:scale(1.15);opacity:.8}100%{transform:scale(1);opacity:.4}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes orbDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-15px)}}
.fade-up{animation:fadeUp .5s ease both}
.connection-row .status-pill.connected{box-shadow:0 0 0 2px rgba(46,204,113,.12)}

/* ==========================================================================
   LANDING PAGE (Bengali homepage — premium look)
   ========================================================================== */
.landing-body{background:
  radial-gradient(ellipse 60% 50% at 15% -5%,rgba(62,224,208,.12),transparent 50%),
  radial-gradient(ellipse 55% 45% at 90% 5%,rgba(139,92,246,.14),transparent 48%),
  radial-gradient(ellipse 70% 50% at 50% 105%,rgba(99,102,241,.08),transparent 55%),
  var(--bg);color:var(--text);min-height:100vh;font-family:var(--font);overflow-x:hidden}
.landing-header{display:flex;align-items:center;justify-content:space-between;padding:20px 6vw;position:relative;z-index:3;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.landing-nav{display:flex;align-items:center;gap:18px}
.landing-nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;transition:color .2s}
.landing-nav a:hover{color:#fff}
.landing-nav a.btn{color:#fff}
.landing-hero{display:flex;align-items:center;gap:48px;padding:30px 6vw 80px;position:relative;z-index:2;flex-wrap:wrap}
.landing-hero-copy{flex:1 1 420px;min-width:320px}
.landing-hero-copy .eyebrow{margin-bottom:8px;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:100px;background:rgba(62,224,208,.08);border:1px solid rgba(62,224,208,.2);color:#7ce8dc;text-transform:none;letter-spacing:.02em;font-size:12px}
.landing-hero-copy .eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.landing-hero-copy h1{font-size:clamp(30px,4.4vw,52px);line-height:1.18;margin:16px 0 18px;font-weight:800;font-family:var(--font-head);letter-spacing:-.035em}
.landing-cta{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 24px}
.landing-trust{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;flex-wrap:wrap}
.landing-trust span{display:inline-flex;line-height:0}
.landing-trust small{margin-left:6px;color:var(--muted-2)}
.landing-hero-art{flex:1 1 420px;min-width:320px;display:flex;justify-content:center;position:relative}
.hub-svg{width:100%;max-width:560px;filter:drop-shadow(0 24px 70px rgba(99,102,241,.22));animation:hubFloat 5s ease-in-out infinite}
.hub-svg .platform-svg{filter:none}
.hub-pulse{animation:hubPulse 2s ease-in-out infinite}
.section-heading{text-align:center;max-width:620px;margin:0 auto 40px}
.section-heading .eyebrow{margin-bottom:10px;display:inline-block;color:var(--cyan);text-transform:none;letter-spacing:.02em;font-size:12px;font-weight:700}
.section-heading h2{font-size:clamp(25px,3.2vw,36px);font-weight:800;margin-top:6px;font-family:var(--font-head);letter-spacing:-.03em}
.landing-features{padding:30px 6vw 80px;position:relative;z-index:2}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;max-width:1140px;margin:0 auto}
.feature-card{background:linear-gradient(180deg,rgba(30,42,72,.5),rgba(16,24,44,.4));border:1px solid var(--line);border-radius:22px;padding:30px 26px;transition:all .35s cubic-bezier(.2,.8,.3,1);position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(62,224,208,.1),rgba(139,92,246,.05) 50%,transparent 70%);opacity:0;transition:opacity .35s}
.feature-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.4),transparent);opacity:0;transition:opacity .35s}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(99,102,241,.28);box-shadow:0 24px 60px rgba(0,0,0,.3),0 0 30px rgba(99,102,241,.1)}
.feature-card:hover::before,.feature-card:hover::after{opacity:1}
.feature-icon{font-size:30px;display:inline-grid;place-items:center;width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,rgba(62,224,208,.15),rgba(139,92,246,.12));border:1px solid rgba(99,102,241,.2);margin-bottom:16px;position:relative}
.feature-card h3{font-size:17px;font-weight:700;margin-bottom:10px;position:relative}
.feature-card p{color:var(--muted);font-size:14px;line-height:1.72;margin:0;position:relative}
.landing-how{padding:20px 6vw 90px;position:relative;z-index:2}
.landing-steps{max-width:900px;margin:0 auto}
.landing-steps>div{background:linear-gradient(180deg,rgba(30,42,72,.45),rgba(16,24,44,.35));border:1px solid var(--line);border-radius:18px;padding:22px 24px;transition:all .3s}
.landing-steps>div:hover{border-color:rgba(99,102,241,.25);transform:translateY(-3px)}
.landing-steps span{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--grad-primary);color:#06121a;font:700 16px var(--font-head);margin-bottom:12px}
.landing-footer{display:flex;justify-content:space-between;padding:24px 6vw;color:var(--muted);font-size:13px;border-top:1px solid var(--line);position:relative;z-index:2;flex-wrap:wrap;gap:10px}
.landing-footer .brand{justify-content:flex-start}

/* ==========================================================================
   MOBILE NAV
   ========================================================================== */
.mobile-nav{display:none}

/* ==========================================================================
   SITE FOOTER + SVG SPLASH LOADER
   ========================================================================== */
.site-footer{padding:14px 28px;border-top:1px solid var(--line);background:rgba(8,13,24,.6);margin-top:auto}
.site-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:1200px;margin:0 auto;flex-wrap:wrap}
.site-footer span{color:#5a7099;font-size:12px}
.site-footer a{color:#7da2d6;font-size:12px;text-decoration:none;font-weight:600}
.site-footer a:hover{color:#b9d4ff;text-decoration:underline}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1100px){
  .main-content{padding-left:25px;padding-right:25px}
  .sidebar{width:215px}
  .main-content{margin-left:215px;width:calc(100% - 215px)}
  .media-grid{grid-template-columns:repeat(3,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .sidebar{display:none}
  .main-content{margin:0;width:100%;padding:22px 16px 90px}
  .topbar{align-items:center;margin-bottom:23px}
  .topbar h1{font-size:20px}
  .topbar .eyebrow{font-size:8px}
  .topbar-actions .icon-button{display:none}
  .page-intro,.welcome-row{align-items:start;gap:15px}
  .page-intro .btn{white-space:nowrap;padding:9px 11px;font-size:11px}
  .content-grid,.upload-layout,.schedule-layout,.setup-grid,.settings-layout,.lower-grid{grid-template-columns:1fr}
  .stats-grid{gap:10px}
  .stat-card{min-height:137px;padding:15px}
  .stat-card strong{font-size:24px}
  .stat-icon{width:34px;height:34px;font-size:16px}
  .quick-actions{grid-template-columns:1fr}
  .media-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .media-preview{height:140px}
  .filter-bar{flex-wrap:wrap}
  .filter-bar .search-field{flex-basis:100%}
  .upload-main{min-height:auto}
  .dropzone{min-height:350px}
  .calendar-grid{min-width:620px}
  .setup-intro h2{font-size:27px}
  .setup-steps{gap:10px;flex-wrap:wrap}
  .setup-steps>div{flex:1;min-width:110px}
  .provider-cards{grid-template-columns:1fr}
  .income-spark{transform:scale(.7) rotate(-5deg);margin-right:-35px}
  .income-hero strong{font-size:31px}
  .auth-layout{grid-template-columns:1fr}
  .auth-promo{min-height:300px;padding:27px 25px 0}
  .promo-copy{margin:auto 0 30px}
  .promo-copy h1{font-size:40px}
  .promo-copy p{font-size:14px}
  .promo-metric{display:none}
  .auth-card-wrap{padding:15px 20px 55px}
  .auth-card{padding:27px 23px}
  .mobile-nav{display:flex;position:fixed;z-index:10;bottom:0;left:0;right:0;height:67px;background:rgba(10,18,32,.94);border-top:1px solid var(--line);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);justify-content:space-around;align-items:center}
  .mobile-nav a{color:#788ba7;font-size:16px;text-align:center;position:relative;flex:0 1 auto;min-width:0;padding:0 4px}
  .mobile-nav a small{display:block;font-size:8.5px;margin-top:3px}
  .mobile-nav a.is-active{color:var(--blue)}
  .mobile-create{width:40px;height:40px!important;border-radius:13px;background:var(--grad-primary);color:#fff!important;display:grid;place-items:center;box-shadow:0 7px 18px rgba(99,102,241,.3);flex:0 0 40px}
  .site-footer{padding-bottom:78px}
  .site-footer-inner{justify-content:center;text-align:center}
}
@media(max-width:760px){
  /* Landing page — stack hero vertically, shrink the hub art so the
     four platform nodes never clip on narrow phone screens. */
  .landing-hero{flex-direction:column;align-items:flex-start;gap:24px;padding:18px 5vw 50px}
  .landing-hero-copy{flex:none;min-width:0;width:100%}
  .landing-hero-copy h1{font-size:clamp(26px,7vw,34px)}
  .landing-hero-art{flex:none;min-width:0;width:100%;margin-top:6px}
  .hub-svg{max-width:340px}
  .landing-features{padding:24px 5vw 60px}
  .landing-how{padding:18px 5vw 70px}
  .feature-grid{grid-template-columns:1fr;gap:16px}
  .landing-steps{flex-direction:column}
  .landing-steps>div{flex:none;min-width:0}
}
@media(max-width:640px){
  .landing-header{padding:14px 5vw}
  .landing-header .brand small{display:none}
  .landing-header .brand span strong{font-size:15px}
  .landing-nav{gap:8px}
  .landing-nav a:not(.btn){display:none}
  .landing-nav .btn-sm{padding:5px 10px;font-size:12px}
  .landing-cta{flex-direction:column}
  .landing-cta .btn{width:100%;text-align:center}
  .landing-trust{gap:8px;justify-content:center}
  .landing-trust small{margin-left:0;width:100%;text-align:center}
  .landing-footer{flex-direction:column;gap:6px;text-align:center}
  .hub-svg{max-width:300px}
  .section-heading h2{font-size:clamp(22px,6vw,28px)}
}

/* ------------------------------------------------------------------ *
 * Public per-platform landing pages + shared public-page components
 * (breadcrumb, benefits, prose, FAQ, related-platform links).
 * ------------------------------------------------------------------ */
.breadcrumb-nav{padding:18px 6vw 0;position:relative;z-index:2;font-size:13px;color:var(--muted-2)}
.breadcrumb-nav a{color:var(--muted);text-decoration:none;transition:color .2s}
.breadcrumb-nav a:hover{color:#fff}
.breadcrumb-nav .sep{margin:0 8px;color:var(--muted-2)}

.platform-hero{display:flex;align-items:center;gap:48px;padding:24px 6vw 60px;position:relative;z-index:2;flex-wrap:wrap}
.platform-hero-copy{flex:1 1 460px;min-width:300px}
.platform-hero-copy h1{font-size:clamp(28px,3.8vw,44px);line-height:1.2;margin:16px 0 16px;font-weight:800;font-family:var(--font-head);letter-spacing:-.03em}
.platform-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:100px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);color:#c7d2fe;font-size:12px;font-weight:700;letter-spacing:.02em}
.platform-badge svg{display:block}
.platform-hero-art{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.platform-orb{width:190px;height:190px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,rgba(99,102,241,.3),rgba(16,24,44,.25));border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 0 40px rgba(99,102,241,.12)}
.platform-orb svg{width:104px;height:104px}

.benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:1140px;margin:0 auto}
.benefit-card{background:linear-gradient(180deg,rgba(30,42,72,.5),rgba(16,24,44,.4));border:1px solid var(--line);border-radius:18px;padding:24px 22px;transition:all .3s cubic-bezier(.2,.8,.3,1)}
.benefit-card:hover{transform:translateY(-4px);border-color:rgba(99,102,241,.28);box-shadow:0 20px 50px rgba(0,0,0,.28)}
.benefit-card h3{font-size:16px;font-weight:700;margin:0 0 8px;display:flex;align-items:center;gap:10px;color:#eef4ff}
.benefit-card h3::before{content:'';width:18px;height:18px;flex:0 0 18px;border-radius:6px;background:var(--grad-primary);box-shadow:0 0 12px rgba(99,102,241,.4)}
.benefit-card p{color:var(--muted);font-size:14px;line-height:1.72;margin:0}

.prose-section{padding:8px 6vw 60px;position:relative;z-index:2}
.prose{max-width:820px;margin:0 auto;color:var(--muted);font-size:15.5px;line-height:1.85}
.prose p{margin:0 0 18px}
.prose strong{color:#dbe6fb}

.faq-section{padding:20px 6vw 80px;position:relative;z-index:2}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:linear-gradient(180deg,rgba(30,42,72,.45),rgba(16,24,44,.35));border:1px solid var(--line);border-radius:14px;padding:0 20px;transition:border-color .25s}
.faq-item[open]{border-color:rgba(99,102,241,.3)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 30px 18px 0;font-weight:700;font-size:15px;position:relative;color:#e8eefc}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--cyan);font-weight:400;line-height:1}
.faq-item[open] summary::after{content:'\2212'}
.faq-item p{color:var(--muted);font-size:14px;line-height:1.78;margin:0 0 18px}

.related-platforms{padding:8px 6vw 80px;position:relative;z-index:2}
.platform-link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;max-width:1140px;margin:0 auto}
.platform-link{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,rgba(30,42,72,.45),rgba(16,24,44,.35));border:1px solid var(--line);border-radius:16px;padding:18px 20px;text-decoration:none;color:inherit;transition:all .3s}
.platform-link:hover{transform:translateY(-3px);border-color:rgba(99,102,241,.3);color:inherit}
.platform-link svg{flex:0 0 auto}
.platform-link strong{display:block;font-size:15px;font-weight:700;color:#e8eefc}
.platform-link small{color:var(--muted-2);font-size:12px;line-height:1.4}

@media(max-width:900px){
  .platform-hero{flex-direction:column;align-items:flex-start;gap:26px;padding:18px 5vw 44px}
  .platform-hero-copy{flex:none;width:100%}
  .platform-hero-art{width:100%;justify-content:flex-start}
  .platform-orb{width:150px;height:150px}
  .platform-orb svg{width:82px;height:82px}
}