@font-face{
  font-family:'Afrah';
  src:url('../assets/Afrah-Regular.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#080b14;
  --bg-elevated:#101626;
  --surface:rgba(13,18,31,.70);
  --surface-strong:rgba(16,22,37,.90);
  --surface-soft:rgba(255,255,255,.046);
  --surface-hover:rgba(255,255,255,.075);
  --stroke:rgba(255,255,255,.105);
  --stroke-strong:rgba(255,255,255,.18);
  --stroke-focus:rgba(125,167,255,.8);
  --text:#f4f7ff;
  --muted:#aab7d1;
  --muted-strong:#cbd5eb;
  --primary:#6d8cff;
  --primary-2:#a3b9ff;
  --primary-glow:rgba(96,124,255,.29);
  --success:#4ed88b;
  --warning:#ffbd56;
  --danger:#ff6879;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --shadow-lg:0 28px 80px rgba(0,0,0,.34);
  --shadow-md:0 18px 44px rgba(0,0,0,.22);
  --shadow-sm:0 8px 20px rgba(0,0,0,.18);
  --font-body:'Afrah', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display:'Afrah', Inter, ui-sans-serif, system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{min-height:100%; scroll-behavior:smooth}
body,button,input,select,textarea{font-family:var(--font-body)}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:var(--bg);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed;
  inset:-30px;
  z-index:-3;
  background-image:url('../assets/bg-frozen-smoke.jpg');
  background-position:center;
  background-size:cover;
  filter:blur(7px) saturate(1.12) brightness(.5);
  transform:scale(1.06);
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 76% 4%, rgba(215,48,64,.18), transparent 31rem),
    radial-gradient(circle at 26% 32%, rgba(50,90,221,.19), transparent 32rem),
    radial-gradient(circle at 53% 94%, rgba(91,44,108,.16), transparent 32rem),
    linear-gradient(115deg, rgba(5,7,12,.78), rgba(7,10,18,.56) 54%, rgba(5,7,12,.82));
}

h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--font-display); color:#fff; font-weight:700}
a{color:#d4def8;text-decoration:none}
a:hover{text-decoration:none}
small{display:block}
code{
  display:inline-block;
  padding:.08rem .36rem;
  border:1px solid rgba(255,255,255,.07);
  border-radius:7px;
  background:rgba(255,255,255,.07);
  color:#d8e5ff;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.91em;
}
.muted{color:var(--muted)}
.small{font-size:.83rem}

.skip-link{
  position:fixed;
  left:18px;
  top:12px;
  z-index:100;
  transform:translateY(-160%);
  padding:10px 14px;
  border-radius:10px;
  color:#fff;
  background:var(--primary);
  transition:transform .18s ease;
}
.skip-link:focus{transform:translateY(0)}

.layout{
  display:grid;
  grid-template-columns:272px minmax(0,1fr);
  min-height:100vh;
}
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:22px 16px 18px;
  background:rgba(7,10,18,.56);
  border-right:1px solid rgba(255,255,255,.075);
  backdrop-filter:blur(22px) saturate(1.12);
  -webkit-backdrop-filter:blur(22px) saturate(1.12);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:17px;
  padding:9px 8px 25px;
  color:#fff;
}
.brand-mark{
  position:relative;
  display:block;
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:14px;
  background:linear-gradient(145deg, rgba(125,152,255,.96), rgba(149,59,84,.92));
  box-shadow:0 12px 30px rgba(76,77,177,.34), inset 0 1px 1px rgba(255,255,255,.26);
}
.brand-mark::before,.brand-mark::after,.brand-mark span{
  content:'';
  position:absolute;
  display:block;
  border-radius:5px;
  border:1.6px solid rgba(255,255,255,.94);
}
.brand-mark::before{inset:10px 19px 10px 10px}
.brand-mark::after{inset:10px 10px 10px 19px}
.brand-mark span{inset:17px 15px}
.brand-copy{display:grid;line-height:1.15;gap:4px}
.brand-copy strong{font-size:1.03rem;letter-spacing:-.015em;white-space:nowrap}
.brand-copy small{font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.nav{display:grid;gap:7px}
.nav a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:50px;
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:15px;
  color:var(--muted-strong);
  font-weight:600;
  transition:color .17s ease, background .17s ease, border-color .17s ease, transform .17s ease;
}
.nav a:hover{
  color:#fff;
  background:rgba(255,255,255,.042);
}
.nav a.active{
  color:#fff;
  border-color:rgba(121,149,255,.24);
  background:linear-gradient(100deg, rgba(91,118,227,.18), rgba(255,255,255,.04));
  box-shadow:inset 2px 0 0 var(--primary), 0 10px 28px rgba(0,0,0,.11);
}
.nav-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  color:#dce6ff;
  font-size:1.04rem;
  font-weight:500;
}
.nav a.active .nav-icon{
  background:rgba(110,140,255,.22);
  color:#fff;
}
.sidebar-foot{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px;
  background:rgba(255,255,255,.037);
}
.sidebar-foot strong{display:block;font-size:.81rem;color:#e8eefc}
.sidebar-foot small{font-size:.69rem;color:var(--muted);white-space:nowrap}
.online-dot{
  width:9px;height:9px;border-radius:99px;background:var(--success);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(78,216,139,.14),0 0 16px rgba(78,216,139,.7);
}

.main{
  width:100%;
  max-width:1350px;
  padding:34px 38px 44px;
}
.page-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:26px;
}
.page-title{max-width:680px}
.eyebrow,.section-label{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  margin-bottom:12px;
  color:var(--primary-2);
  font-size:.69rem;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.eyebrow::before{
  content:'';
  width:24px;height:1px;background:var(--primary-2);margin-right:10px;opacity:.8;
}
h1{
  margin-bottom:9px;
  font-size:clamp(2.45rem,4.4vw,3.35rem);
  letter-spacing:-.052em;
  line-height:1.04;
}
.page-title p{
  max-width:560px;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.58;
}
h2{
  font-size:1.28rem;
  letter-spacing:-.025em;
  line-height:1.2;
}
h3{font-size:1.04rem;letter-spacing:-.015em}

.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card,.kpi{
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  background:linear-gradient(145deg, rgba(255,255,255,.067), rgba(255,255,255,.029));
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(20px) saturate(1.09);
  -webkit-backdrop-filter:blur(20px) saturate(1.09);
}
.card{padding:25px}
.kpi-grid{margin-bottom:20px}
.kpi{
  position:relative;
  min-height:139px;
  padding:21px 22px 18px;
  overflow:hidden;
}
.kpi::after{
  content:'';
  position:absolute;
  right:-25px;top:-35px;
  width:110px;height:110px;border-radius:50%;
  opacity:.2;filter:blur(3px);
}
.scheduled-kpi::after{background:var(--warning)}
.published-kpi::after{background:var(--success)}
.failed-kpi::after{background:var(--danger)}
.kpi-label{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.83rem;
  font-weight:650;
  color:var(--muted-strong);
}
.kpi-label::before{content:'';width:7px;height:7px;border-radius:99px;background:var(--primary)}
.scheduled-kpi .kpi-label::before{background:var(--warning)}
.published-kpi .kpi-label::before{background:var(--success)}
.failed-kpi .kpi-label::before{background:var(--danger)}
.kpi .value{
  margin:12px 0 7px;
  color:#fff;
  font-family:var(--font-display);
  font-size:2.5rem;
  font-weight:650;
  letter-spacing:-.06em;
  line-height:1;
}
.kpi small{font-size:.79rem;color:var(--muted)}

button,.button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  border:1px solid rgba(130,158,255,.46);
  border-radius:14px;
  padding:10px 17px;
  color:#fff;
  background:linear-gradient(135deg, #637eff, #778eff);
  font:inherit;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 13px 27px rgba(77,98,211,.28), inset 0 1px 0 rgba(255,255,255,.27);
  transition:background .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
button:hover,.button:hover{
  transform:translateY(-1px);
  box-shadow:0 17px 31px rgba(77,98,211,.36), inset 0 1px 0 rgba(255,255,255,.27);
}
button:active,.button:active{transform:translateY(0)}
button.ghost,.button.ghost{
  color:#e7edf9;
  border-color:var(--stroke);
  background:rgba(255,255,255,.038);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
button.ghost:hover,.button.ghost:hover{
  border-color:var(--stroke-strong);
  background:rgba(255,255,255,.072);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
button.danger,.button.danger{
  color:#ffd8dd;border-color:rgba(255,104,121,.3);background:rgba(255,104,121,.09)
}
button.danger:hover,.button.danger:hover{background:rgba(255,104,121,.16)}
button:disabled{opacity:.48;pointer-events:none}
button:focus-visible,.button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:3px solid rgba(118,149,255,.55);
  outline-offset:2px;
}
.icon-action span{font-size:1.1rem;line-height:1}

.stack{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.split{justify-content:space-between}
.panel-heading{
  align-items:flex-end;
  margin-bottom:22px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.panel-heading .section-label{margin:0 0 5px}
.panel-heading h2{margin-bottom:5px}
.divider{height:1px;margin:21px 0;background:rgba(255,255,255,.075)}
.footer-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:19px}

.form-layout{align-items:start}
.form-row{display:grid;gap:8px;margin-bottom:18px}
label{
  color:#e8eefc;
  font-size:.86rem;
  font-weight:650;
  letter-spacing:.005em;
}
input,select,textarea{
  display:block;
  width:100%;
  border:1px solid rgba(255,255,255,.105);
  border-radius:13px;
  padding:13px 14px;
  color:var(--text);
  background:rgba(5,8,16,.3);
  font:inherit;
  outline:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15);
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
input::placeholder,textarea::placeholder{color:rgba(170,183,209,.65)}
textarea{min-height:132px;resize:vertical}
select{color:#e9eeff}
select option{color:#111827;background:#fff}
input[type="file"]{padding:7px 8px;color:var(--muted-strong)}
input[type="file"]::file-selector-button{
  border:1px solid var(--stroke-strong);
  border-radius:9px;
  margin-right:11px;
  padding:8px 11px;
  color:#f1f5ff;
  background:rgba(255,255,255,.07);
  font:inherit;
  font-size:.86rem;
  cursor:pointer;
}
input:hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.18)}
input:focus,select:focus,textarea:focus{
  border-color:var(--stroke-focus);
  background:rgba(7,11,22,.48);
  box-shadow:0 0 0 4px rgba(102,134,255,.13), inset 0 1px 2px rgba(0,0,0,.12);
}
input[readonly]{color:#d5def1;background:rgba(255,255,255,.032)}
.form-row small{font-size:.78rem;line-height:1.48;color:var(--muted)}

.notice{
  display:block;
  margin-bottom:18px;
  padding:13px 15px;
  border:1px solid var(--stroke);
  border-radius:13px;
  color:var(--muted-strong);
  background:rgba(255,255,255,.052);
}
.notice.success{color:#d8ffe9;border-color:rgba(78,216,139,.3);background:rgba(78,216,139,.10)}
.notice.error{color:#ffdade;border-color:rgba(255,104,121,.3);background:rgba(255,104,121,.095)}

/* Planner */
.planner-panel{min-height:350px}
.list{display:grid;gap:17px}
.planner-grid{
  grid-template-columns:repeat(auto-fill,minmax(300px,348px));
  align-items:start;
  justify-content:start;
  gap:18px;
}
.post-card{
  border:1px solid var(--stroke);
  border-radius:20px;
  background:rgba(8,12,23,.38);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.075);
}
.planner-card-compact,.planner-card-only-post{
  width:100%;
  padding:0;
  overflow:hidden;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.planner-card-compact:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 20px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.planner-sim-preview,.planner-card-shell{
  margin:0;
  max-width:none;
  border:0;
  border-radius:20px;
  overflow:hidden;
  background:transparent;
}
.planner-sim-top,.planner-sim-top-with-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:11px;
  padding:13px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.planner-sim-top-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.sim-avatar{
  display:grid;
  place-items:center;
  width:43px;height:43px;border-radius:50%;flex:0 0 auto;
  color:#fff;font-weight:750;font-size:.86rem;letter-spacing:.03em;
  background:linear-gradient(135deg,#6b84ff,#ab495d);
  box-shadow:0 8px 21px rgba(79,82,196,.27);
}
.small-avatar{width:37px;height:37px;font-size:.73rem}
.planner-sim-user{min-width:0}
.planner-sim-user strong{display:block;color:#f7f9ff;line-height:1.25;font-size:.91rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planner-sim-user span{display:block;color:var(--muted);font-size:.73rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planner-inline-status{flex:0 0 auto}
.badge{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--stroke);
  border-radius:999px;
  padding:5px 9px;
  color:var(--muted-strong);
  background:rgba(255,255,255,.06);
  font-size:.66rem;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.075em;
}
.badge.scheduled{border-color:rgba(255,189,86,.28);background:rgba(255,189,86,.12);color:#ffe4ad}
.badge.published{border-color:rgba(78,216,139,.29);background:rgba(78,216,139,.12);color:#d8ffe9}
.badge.failed,.badge.error{border-color:rgba(255,104,121,.29);background:rgba(255,104,121,.12);color:#ffd8de}
.badge.partial_error{border-color:rgba(255,161,80,.29);background:rgba(255,161,80,.12);color:#ffe1bc}
.badge.cancelled{border-color:rgba(170,183,209,.24);background:rgba(170,183,209,.08);color:#dbe4f8}
.planner-media-preview{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(3,6,12,.48);
}
.planner-media-link:hover{text-decoration:none}
.planner-media-preview img,.planner-media-preview video{
  display:block;
  width:100%;
  height:auto;
  max-height:670px;
  object-fit:contain;
  background:rgba(3,6,12,.48);
}
.planner-video-link video{min-height:238px}
.planner-video-badge{
  position:absolute;right:12px;bottom:12px;
  display:grid;place-items:center;
  width:37px;height:37px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  color:#fff;background:rgba(8,11,20,.78);
  box-shadow:0 10px 22px rgba(0,0,0,.24);
}
.media-error-text{display:none;padding:32px 18px;text-align:center;color:var(--muted)}
.media-load-error img{display:none}
.media-load-error .media-error-text{display:block}
.planner-media-file{display:block;padding:25px 14px;color:#dfe7fb;text-align:center;background:rgba(255,255,255,.025)}
.planner-sim-actions{
  display:flex;align-items:center;gap:14px;
  padding:10px 13px 5px;
  color:var(--muted-strong);font-size:.75rem;
}
.planner-delete-post,.planner-retry-post{
  min-height:0;padding:0;border:0;border-radius:0;
  color:var(--muted-strong);background:transparent;box-shadow:none;
  font:inherit;font-weight:inherit;cursor:pointer;
}
.planner-delete-post{color:#ffc8d0}
.planner-delete-post:hover,.planner-retry-post:hover{
  transform:none;box-shadow:none;text-decoration:underline;color:#fff;
}
.planner-sim-caption{
  padding:8px 13px 14px;
  color:#ecf1fd;font-size:.82rem;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;overflow:hidden;
}
.compact-actions{margin:0;padding:0 13px 13px}
.compact-actions .ghost{min-height:35px;padding:7px 12px;font-size:.79rem}

/* Create post */
.composer-layout{grid-template-columns:minmax(355px,1.06fr) minmax(335px,.94fr);gap:20px}
.section-heading,.settings-group-heading{
  display:flex;align-items:flex-start;gap:13px;margin-bottom:22px;
}
.section-heading h2,.settings-group-heading h2{margin-bottom:4px}
.section-heading p,.settings-group-heading p{font-size:.84rem}
.section-number{
  display:grid;place-items:center;flex:0 0 auto;
  width:36px;height:36px;border-radius:11px;
  color:var(--primary-2);background:rgba(105,137,255,.13);border:1px solid rgba(111,142,255,.21);
  font-size:.72rem;font-weight:750;letter-spacing:.08em;
}
.composer-content,.composer-settings{padding:24px}
.upload-row{margin-top:4px}
.preview-row{margin-top:7px;margin-bottom:0}
.schedule-grid{gap:12px}
.accounts-step{margin-bottom:15px}
.checkbox-list{display:grid;gap:9px;max-height:314px;overflow:auto;padding-right:3px}
.checkbox-item{
  display:flex;align-items:flex-start;gap:10px;
  border:1px solid rgba(255,255,255,.085);border-radius:13px;
  padding:11px 12px;color:#edf2ff;background:rgba(255,255,255,.034);
  cursor:pointer;transition:border-color .16s ease,background .16s ease;
}
.checkbox-item:hover{border-color:rgba(255,255,255,.17);background:rgba(255,255,255,.064)}
.checkbox-item input{width:auto;margin:4px 0 0;accent-color:var(--primary)}
.checkbox-item strong{font-size:.91rem}
.simulated-post-preview{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:19px;
  padding:9px;
  background:rgba(4,7,14,.27);
}
.sim-post-card{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(8,11,20,.49);
}
.sim-post-header{display:flex;align-items:center;gap:11px;padding:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.sim-post-user{min-width:0}
.sim-post-user strong{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-post-user span{display:block;color:var(--muted);font-size:.76rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-post-media{
  min-height:293px;display:grid;place-items:center;padding:20px;
  color:var(--muted);font-size:.86rem;text-align:center;
  background:linear-gradient(145deg, rgba(98,126,226,.07), rgba(255,255,255,.018));
}
.sim-post-media img,.sim-post-media video{display:block;width:100%;max-height:455px;object-fit:contain;background:rgba(3,6,12,.52)}
.sim-post-actions{display:flex;gap:14px;padding:10px 12px 3px;color:var(--muted-strong);font-size:.77rem;font-weight:550}
.sim-post-caption{padding:9px 12px 13px;color:#e9effc;font-size:.84rem;white-space:pre-wrap;word-break:break-word}
.sticky-submit{padding-top:2px}

/* Accounts */
.accounts-main{display:grid;align-content:start;gap:18px}
.accounts-main .page-header{margin-bottom:7px}
.connect-accounts-card{display:grid;gap:20px}
.section-intro .section-label{margin-bottom:7px}
.section-intro h2{margin-bottom:6px}
.section-intro p{font-size:.9rem}
.provider-login-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.provider-login{
  position:relative;justify-content:flex-start;min-height:82px;padding:14px 13px;gap:12px;text-align:left;
  border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.036);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.provider-login:hover{border-color:rgba(255,255,255,.17);background:rgba(255,255,255,.065);box-shadow:var(--shadow-sm)}
.provider-icon{
  display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:13px;
  color:#fff;font-family:Arial,sans-serif;font-size:29px;font-weight:700;line-height:1;
}
.facebook-login .provider-icon{background:#1877f2}
.instagram-login .provider-icon{background:linear-gradient(145deg,#833ab4,#fd1d1d,#fcb045)}
.tiktok-login .provider-icon{background:#07080c;text-shadow:2px 1px #fe2c55,-2px -1px #25f4ee}
.instagram-camera{position:relative}
.instagram-camera::before{content:'';width:21px;height:21px;border:2px solid #fff;border-radius:6px}
.instagram-camera::after{content:'';position:absolute;width:6px;height:6px;border:2px solid #fff;border-radius:50%;top:19px;left:19px;box-shadow:8px -8px 0 -2px #fff}
.provider-copy{display:grid;align-content:center;gap:1px}
.provider-copy strong{font-size:.96rem}
.provider-copy small{color:var(--muted);font-size:.76rem;font-weight:500}
.provider-arrow{margin-left:auto;color:var(--muted);font-size:1.04rem;transition:transform .16s ease,color .16s ease}
.provider-login:hover .provider-arrow{color:#fff;transform:translateX(2px)}
.account-list-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.account-list-toolbar .section-label{margin-bottom:6px}
.account-list-toolbar h2{margin-bottom:4px}
.toolbar-buttons{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.platform-account-groups{display:grid;gap:20px}
.account-platform-panel{display:grid;gap:12px}
.platform-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.platform-panel-header h3{font-size:1rem}
.platform-count{
  border:1px solid var(--stroke);border-radius:999px;padding:4px 11px;
  color:var(--muted);background:rgba(255,255,255,.036);font-size:.77rem;
}
.connected-account-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:12px}
.connected-account-card{
  border:1px solid rgba(255,255,255,.085);border-radius:17px;padding:15px;
  background:rgba(255,255,255,.029);transition:border-color .16s ease,background .16s ease;
}
.connected-account-card:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.045)}
.post-head{display:flex;align-items:flex-start;justify-content:space-between;gap:11px;margin-bottom:11px}
.connected-account-identity{display:flex;align-items:center;gap:10px;min-width:0}
.connected-account-identity strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.provider-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#9ca3af;box-shadow:0 0 12px currentColor}
.provider-dot.facebook{background:#1877f2}.provider-dot.instagram{background:#e1306c}.provider-dot.tiktok{background:#25f4ee}
.end-stack{align-items:flex-end;gap:5px}
.account-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:11px 0}
.account-meta-grid div{min-width:0;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:8px 9px;background:rgba(4,7,14,.22)}
.account-meta-grid span{display:block;color:var(--muted);font-size:.64rem;text-transform:uppercase;letter-spacing:.09em}
.account-meta-grid strong{display:block;margin-top:2px;font-size:.79rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.token-check-message{margin:7px 0 0;font-size:.78rem}
.account-token-status{margin:6px 0 0}
.connected-actions{margin-top:13px}
.connected-actions button{min-height:37px;padding:8px 11px;font-size:.79rem}
.empty-account-state{
  display:grid;gap:5px;text-align:center;border:1px dashed rgba(255,255,255,.15);border-radius:15px;
  padding:30px 18px;color:var(--muted);background:rgba(255,255,255,.018)
}
.empty-account-state strong{color:#f5f8ff;font-size:1rem}
.manual-account-card{padding:0;overflow:hidden}
.manual-account-card summary{
  list-style:none;cursor:pointer;padding:20px 24px;color:#ebf1ff;font-weight:650;
  transition:background .16s ease;
}
.manual-account-card summary:hover{background:rgba(255,255,255,.032)}
.manual-account-card summary::-webkit-details-marker{display:none}
.manual-account-card summary::after{content:'＋';float:right;color:var(--muted)}
.manual-account-card[open] summary::after{content:'−'}
.manual-account-card[open] summary{border-bottom:1px solid rgba(255,255,255,.07)}
.manual-help{padding:20px 24px 0;font-size:.86rem}
.manual-account-form{padding:18px 24px 24px}
.loading-accounts{padding:10px 0}

/* Settings */
.settings-page{max-width:1360px}
.settings-card{padding:26px}
.settings-form{display:grid;gap:18px}
.settings-group{
  border:1px solid rgba(255,255,255,.07);border-radius:18px;
  padding:21px 21px 5px;background:rgba(255,255,255,.021);
}
.settings-group-heading{margin-bottom:20px}
.settings-group .grid{gap:0 16px}
.form-span-2{grid-column:1 / -1}
.settings-actions{padding:3px 0 0;margin-top:0}
.help-card{margin-top:20px}
.help-card ol{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;
  margin:19px 0 0;padding:0;list-style:none;counter-reset:help;
}
.help-card li{
  position:relative;counter-increment:help;padding:0 0 0 32px;font-size:.87rem;line-height:1.55;
}
.help-card li::before{
  content:counter(help);position:absolute;top:1px;left:0;display:grid;place-items:center;
  width:22px;height:22px;border-radius:7px;color:var(--primary-2);background:rgba(101,133,255,.11);font-size:.7rem;font-weight:700;
}

/* Shared modal */
.modal-backdrop{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(3,5,10,.72);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.modal-backdrop.hidden{display:none}
.modal-card{
  width:min(610px,100%);max-height:86vh;overflow:auto;border:1px solid var(--stroke-strong);
  border-radius:24px;padding:22px;background:var(--surface-strong);box-shadow:0 30px 80px rgba(0,0,0,.48);
}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:16px}
.modal-head h2{margin-bottom:5px}
.modal-close{font-size:22px;min-width:42px;padding:6px 10px}
.retry-accounts{display:grid;gap:9px;margin:12px 0}

.media-preview{
  display:grid;place-items:center;min-height:74px;overflow:hidden;border:1px dashed var(--stroke-strong);
  border-radius:13px;color:var(--muted);background:rgba(255,255,255,.025)
}
.media-preview:empty::before{content:'Preview media'}
.media-preview img,.media-preview video{display:block;width:100%;max-height:430px;object-fit:contain}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.035);border-radius:999px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)}

@media(max-width:1120px){
  .layout{grid-template-columns:248px minmax(0,1fr)}
  .main{padding:30px 25px 38px}
  .provider-login-grid{grid-template-columns:1fr}
  .composer-layout{grid-template-columns:1fr}
}
@media(max-width:900px){
  .layout{display:block}
  .sidebar{
    position:relative;height:auto;display:block;padding:14px 18px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07)
  }
  .brand{padding:4px 4px 15px}
  .brand-mark{width:40px;height:40px}
  .nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .nav a{justify-content:center;padding:7px 8px;min-height:48px}
  .nav-icon{width:31px;height:31px}
  .sidebar-foot{display:none}
  .main{padding:25px 18px 34px}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .planner-grid{justify-content:center}
  .help-card ol{grid-template-columns:1fr}
}
@media(max-width:680px){
  body{font-size:14px}
  .sidebar{padding:12px}
  .brand-copy strong{font-size:.98rem}
  .nav a{display:grid;gap:3px;min-height:61px;font-size:.71rem;text-align:center;padding:6px 3px}
  .nav-icon{margin:auto;width:30px;height:30px;font-size:.95rem}
  .main{padding:21px 12px 30px}
  .page-header{display:grid;gap:17px;margin-bottom:20px}
  h1{font-size:2.25rem}
  .page-title p{font-size:.94rem}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .kpi-grid{gap:10px}
  .kpi{min-height:107px;padding:17px 18px}
  .kpi .value{font-size:2.1rem;margin:7px 0 4px}
  .card{padding:18px;border-radius:20px}
  .planner-panel{padding:16px}
  .panel-heading{align-items:start;margin-bottom:16px;padding-bottom:16px}
  .planner-grid{grid-template-columns:1fr;gap:13px}
  .composer-content,.composer-settings,.settings-card{padding:16px}
  .settings-group{padding:16px 14px 1px;border-radius:15px}
  .section-heading,.settings-group-heading{margin-bottom:17px}
  .sim-post-media{min-height:235px}
  .account-list-toolbar{display:grid;align-items:start}
  .toolbar-buttons{justify-content:start}
  .provider-login{min-height:75px}
  .connected-account-grid{grid-template-columns:1fr}
  .account-meta-grid{grid-template-columns:1fr}
  .form-span-2{grid-column:auto}
  .help-card{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}
}

/* ===== Visual refinement update ===== */
:root{
  --surface:rgba(20,27,45,.44);
  --surface-strong:rgba(23,30,49,.72);
  --surface-soft:rgba(255,255,255,.07);
  --surface-hover:rgba(255,255,255,.10);
  --stroke:rgba(255,255,255,.12);
  --stroke-strong:rgba(255,255,255,.22);
  --shadow-lg:0 28px 80px rgba(0,0,0,.28);
  --shadow-md:0 18px 44px rgba(0,0,0,.18);
  --shadow-sm:0 8px 20px rgba(0,0,0,.14);
}

body::before{
  filter:blur(5px) saturate(1.12) brightness(.74);
}
body::after{
  background:
    radial-gradient(circle at 76% 4%, rgba(215,48,64,.14), transparent 31rem),
    radial-gradient(circle at 26% 32%, rgba(50,90,221,.16), transparent 32rem),
    radial-gradient(circle at 53% 94%, rgba(91,44,108,.12), transparent 32rem),
    linear-gradient(115deg, rgba(5,7,12,.44), rgba(7,10,18,.24) 54%, rgba(5,7,12,.50));
}

.sidebar{
  background:rgba(7,10,18,.34);
  border-right:1px solid rgba(255,255,255,.09);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.02);
}
.brand{
  gap:14px;
}
.brand-logo{
  display:block;
  flex:0 0 auto;
  width:58px;
  height:58px;
  object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.18));
}
.brand-copy strong{
  font-size:1.08rem;
}
.brand-copy small{
  color:rgba(238,243,255,.72);
}
.nav a{
  background:rgba(255,255,255,.022);
}
.nav a:hover{
  background:rgba(255,255,255,.065);
}
.nav-icon{
  background:rgba(255,255,255,.06);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.nav a.active{
  background:linear-gradient(100deg, rgba(91,118,227,.20), rgba(255,255,255,.07));
}
.nav a.active .nav-icon{
  background:rgba(110,140,255,.28);
  color:#fff;
}
.sidebar-foot{
  background:rgba(255,255,255,.06);
}
.card,.kpi{
  background:linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.11);
}
.post-card,
.sim-post-card,
.connected-account-card,
.settings-group,
.media-preview,
.simulated-post-preview,
.provider-login,
.empty-account-state,
.account-meta-grid div,
.planner-media-preview,
.sim-post-media,
.modal-card{
  background-color:rgba(255,255,255,.055);
}
input,select,textarea{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.13);
}
input:focus,select:focus,textarea:focus{
  background:rgba(255,255,255,.10);
}
.notice{
  background:rgba(255,255,255,.08);
}
.provider-login:hover,
.connected-account-card:hover,
.checkbox-item:hover,
.manual-account-card summary:hover{
  background:rgba(255,255,255,.08);
}
.planner-media-preview,
.planner-media-preview img,
.planner-media-preview video,
.sim-post-media img,
.sim-post-media video{
  background:rgba(255,255,255,.04);
}
@media(max-width:900px){
  .brand-logo{width:48px;height:48px}
}


/* Public website homepage and review-visible legal access */
.public-home-page{display:flex;flex-direction:column;min-height:100vh}
.public-header{
  width:min(1240px,calc(100% - 42px));
  margin:0 auto;
  padding:22px 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.public-brand{display:flex;align-items:center;gap:12px;color:#fff}
.public-brand .brand-logo{width:52px;height:52px;object-fit:contain}
.public-brand strong{display:block;font-size:1.14rem;letter-spacing:-.015em}
.public-brand small{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.public-nav{display:flex;align-items:center;gap:23px;flex-wrap:wrap}
.public-nav a:not(.button){color:var(--muted-strong);font-weight:600}
.public-nav a:not(.button):hover{color:#fff}
.public-nav-button{min-height:46px;padding:0 18px}
.public-main{width:min(1240px,calc(100% - 42px));margin:0 auto;flex:1;padding:48px 0 54px}
.public-hero{display:grid;grid-template-columns:minmax(400px,1fr) minmax(295px,385px);gap:48px;align-items:center;min-height:530px}
.public-hero-copy h1{font-size:clamp(3.7rem,8vw,6.4rem);line-height:.95;letter-spacing:-.065em;margin:4px 0 24px}
.public-lead{max-width:680px;font-size:1.08rem;line-height:1.75;color:var(--muted-strong)}
.public-actions{display:flex;gap:12px;flex-wrap:wrap;margin:34px 0 30px}
.public-actions .button{min-height:52px;padding:0 25px}
.legal-access{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:720px;
  border-top:1px solid var(--stroke);padding-top:25px;color:var(--muted)
}
.legal-access a{color:#dbe6ff;font-weight:650;text-decoration:underline;text-underline-offset:4px}
.public-preview{padding:34px 30px;border:1px solid var(--stroke);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-lg);backdrop-filter:blur(20px)}
.workflow-list{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:20px;counter-reset:steps}
.workflow-list li{display:grid;grid-template-columns:34px 1fr;column-gap:14px;row-gap:4px;counter-increment:steps}
.workflow-list li::before{content:counter(steps,'0');grid-row:1 / span 2;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(110,140,255,.19);color:var(--primary-2);font-size:.78rem;font-weight:700}
.workflow-list strong{font-size:1rem;color:#fff}
.workflow-list span{grid-column:2;color:var(--muted);font-size:.9rem;line-height:1.55}
.public-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:28px}
.public-feature{min-height:200px;padding:28px}
.public-feature h2{font-size:1.3rem;margin-bottom:12px}
.public-feature p{color:var(--muted);line-height:1.65}
.public-footer{
  width:min(1240px,calc(100% - 42px));margin:0 auto;padding:30px 0 35px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--stroke);color:var(--muted)
}
.public-footer strong{display:block;color:#fff;margin-bottom:2px}
.public-footer p{font-size:.9rem;color:var(--muted)}
.public-footer nav{display:flex;gap:22px;flex-wrap:wrap}
.public-footer nav a{color:var(--muted-strong);font-weight:600}
.public-footer nav a:hover{color:#fff}
.app-legal-footer{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:32px;padding:23px 0 0;
  border-top:1px solid var(--stroke);color:var(--muted);font-size:.89rem
}
.app-legal-footer a{color:var(--muted-strong);font-weight:600}
.app-legal-footer a:hover{color:#fff}
@media (max-width:940px){
  .public-hero{grid-template-columns:1fr;gap:30px;min-height:auto;padding:28px 0}
  .public-preview{max-width:560px}
  .public-features{grid-template-columns:1fr}
}
@media (max-width:640px){
  .public-header{align-items:flex-start;flex-direction:column;width:min(100% - 32px,1240px)}
  .public-nav{gap:16px}
  .public-main,.public-footer{width:min(100% - 32px,1240px)}
  .public-main{padding:26px 0 38px}
  .public-hero-copy h1{font-size:clamp(3rem,17vw,4.2rem)}
  .public-actions .button{width:100%;justify-content:center}
  .legal-access{align-items:flex-start;flex-direction:column;gap:9px}
}