/* ============================================================
   CREATOR STUDIO WEBAPP — Priya's authoring workspace
   ============================================================
   Sprint: BTX-MOCKUPS-V3-WEBAPP-001 (creator persona)
   Architecture: real product feel matching apps/student + apps/tpo.
   Author "Priya Iyer · Studio Lead" (Surya-internal in Phase 1 —
   teacher/college seats open in Phase 2 per BTX-VISION-LOCK).
   Sidebar = 2 groups: Studio (6 items) + Utilities (2 items).
   ============================================================ */
body{background:var(--fog);margin:0;font-family:'Inter',sans-serif;color:var(--ink);min-height:100vh}
[x-cloak]{display:none !important}
/* Brand palette inlined as a fallback so colors always render even if _shared/brand.css fails to load (cache / file:// / offline). Values mirror brand.css :root. */
:root{
  --honey:#F59E0B; --honey-d:#B45309; --honey-soft:#FCD34D; --honey-glow:#FEF3C7; --honey-cream:#FEF6E0;
  --teal:#0F766E; --teal-d:#134E4A; --teal-soft:#99F6E4; --teal-glow:#CCFBF1;
  --plum:#6B21A8; --plum-d:#581C87; --plum-soft:#C4B5FD; --plum-glow:#EDE9FE;
  --emerald:#10B981; --emerald-d:#059669; --emerald-glow:#D1FAE5;
  --rose:#E11D48; --rose-d:#9F1239; --rose-glow:#FFE4E6;
  --ink:#0B1220; --ink-2:#1E293B; --ink-3:#334155;
  --body:#475569; --mute:#64748B; --line:#E2E8F0;
  --cream:#FBF7EE; --cream-2:#F5EFE2; --mist:#F1F5F9; --fog:#F8FAFC;
}

/* ── TOPBAR ─────────────────────────────────────────── */
.app-topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);height:62px;display:flex;align-items:center;padding:0 24px;gap:16px;box-shadow:0 1px 2px rgba(11,18,32,.03)}
.app-topbar .brand-mark{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;color:inherit}
.app-topbar .hex{width:24px;height:28px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 96'><polygon fill='%237C3AED' points='42,2 80,24 80,72 42,94 4,72 4,24'/></svg>") center/contain no-repeat;flex-shrink:0}
.app-topbar .brand-name{font-family:'Inter';font-weight:800;font-size:15px;color:var(--ink);letter-spacing:-0.015em}
.app-topbar .brand-sub{font-family:'JetBrains Mono';font-size:10px;color:var(--mute);letter-spacing:.16em;text-transform:uppercase;margin-left:8px;padding-left:8px;border-left:1px solid var(--line)}
.app-topbar .spacer{flex:1}
.app-topbar .tb-search{flex:0 1 320px;display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--mist);border:1px solid transparent;border-radius:8px;cursor:text;transition:.15s;font-size:12.5px;color:var(--mute)}
.app-topbar .tb-search:hover,.app-topbar .tb-search:focus-within{background:#fff;border-color:var(--line)}
.app-topbar .tb-search input{flex:1;border:0;outline:0;background:transparent;font-family:'Inter';font-size:12.5px;color:var(--ink)}
.app-topbar .tb-search kbd{font-family:'JetBrains Mono';font-size:10px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--mute)}
.app-topbar .tb-search-wrap{position:relative;flex:0 1 320px;display:flex}
.app-topbar .tb-search-wrap .tb-search{flex:1}
.tb-search-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:300;background:#fff;border:1px solid #E5E7EB;border-radius:10px;box-shadow:0 14px 34px rgba(15,23,42,.16);padding:6px;max-height:360px;overflow:auto}
.tb-search-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;border-radius:7px;cursor:pointer;text-align:left;font-family:'Inter';font-size:13px;color:#111827}
.tb-search-item:hover,.tb-search-item.active{background:#F3F4F6}
.tb-search-item .si-ic{width:18px;text-align:center;color:#6B7280;font-size:13px}
.tb-search-item .si-lbl{flex:1}
.tb-search-item .si-grp{font-size:10px;color:#9CA3AF;text-transform:uppercase;letter-spacing:.06em;font-family:'JetBrains Mono',monospace}
.tb-search-empty{padding:14px 12px;font-size:12.5px;color:#6B7280}
.app-topbar .tb-icon{position:relative;width:36px;height:36px;border-radius:8px;background:transparent;border:none;cursor:pointer;display:grid;place-items:center;font-size:16px;color:var(--ink-2);transition:.15s}
.app-topbar .tb-icon:hover{background:var(--plum-glow);color:var(--plum-d)}
.app-topbar .tb-icon .badge{position:absolute;top:4px;right:4px;background:var(--plum);color:#fff;font-family:'JetBrains Mono';font-size:9px;font-weight:700;padding:1px 4px;border-radius:999px;min-width:16px;text-align:center;line-height:1.3}
.app-topbar .tb-user{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;cursor:pointer;transition:.15s}
.app-topbar .tb-user:hover{background:var(--mist)}
.app-topbar .tb-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--plum),var(--plum-d));color:#fff;display:grid;place-items:center;font-weight:700;font-size:12.5px;letter-spacing:.02em}
.app-topbar .tb-user-info{font-size:12px;line-height:1.25;display:none}
.app-topbar .tb-user-info b{display:block;color:var(--ink);font-weight:600;font-size:12.5px}
.app-topbar .tb-user-info span{color:var(--mute);font-size:10.5px}
@media (min-width:900px){.app-topbar .tb-user-info{display:block}}
@media (max-width:600px){.app-topbar{padding:0 14px;gap:8px}.app-topbar .tb-search-wrap{display:none}.app-topbar .brand-sub{display:none}}

/* ── APP VIEW WRAPPER ─── */
.app-main{padding:0;background:var(--fog)}
.app-view{padding:28px 32px 64px;max-width:1280px;margin:0 auto;animation:viewFadeIn .18s ease-out}
@keyframes viewFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.app-view-head{margin-bottom:24px}
.app-view-head h1{font-family:'Inter';font-weight:800;font-size:30px;letter-spacing:-0.02em;color:var(--ink);margin:0 0 6px;line-height:1.15}
.app-view-head h1 .em{color:var(--plum-d);font-style:italic;font-weight:500}
.app-view-head .sub{font-size:14px;color:var(--mute);margin:0;line-height:1.5}
.app-view-head .crumbs{font-family:'JetBrains Mono';font-size:10.5px;color:var(--mute);letter-spacing:.06em;margin-bottom:6px}
.app-view-head .crumbs b{color:var(--ink-2)}
.app-view-head .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.app-view-head .head-row .actions{display:flex;gap:8px;flex-shrink:0}
.app-view-head .head-row .actions .btn{padding:8px 14px;background:#fff;border:1px solid var(--line);border-radius:8px;font-family:'Inter';font-weight:600;font-size:12.5px;color:var(--ink);cursor:pointer;transition:.15s}
.app-view-head .head-row .actions .btn:hover{border-color:var(--plum);color:var(--plum-d)}
.app-view-head .head-row .actions .btn.primary{background:var(--plum-d);border-color:var(--plum-d);color:#fff}
.app-view-head .head-row .actions .btn.primary:hover{background:var(--ink);border-color:var(--ink)}
@media (max-width:600px){.app-view{padding:18px 16px 48px}.app-view-head h1{font-size:22px}}

/* ── DASH GRID + CARDS ──────────────────────────────── */
.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.dash-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;transition:.15s}
.dash-card:hover{border-color:#CBD5E1}
.dash-card.span-6{grid-column:span 6}
.dash-card.span-4{grid-column:span 4}
.dash-card.span-3{grid-column:span 3}
.dash-card.span-8{grid-column:span 8}
.dash-card.span-12{grid-column:span 12}
@media (max-width:900px){.dash-card.span-6,.dash-card.span-8,.dash-card.span-4,.dash-card.span-3{grid-column:span 12}}
.dash-card .ch{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.dash-card .ch h3{font-family:'Inter';font-weight:700;font-size:14px;color:var(--ink);margin:0;letter-spacing:-0.01em;line-height:1.25}
.dash-card .ch .lbl{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:2px;display:block}
.dash-card .pill{font-family:'JetBrains Mono';font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;background:var(--plum-glow);color:var(--plum-d);flex-shrink:0}
.dash-card .pill.em{background:var(--emerald-glow);color:var(--emerald-d)}
.dash-card .pill.tl{background:var(--teal-glow);color:var(--teal-d)}
.dash-card .pill.rs{background:var(--rose-glow);color:var(--rose-d)}
.dash-card .pill.hn{background:var(--honey-glow);color:var(--honey-d)}
.dash-card .pill.mute{background:var(--mist);color:var(--mute)}
.dash-card .card-action{margin-top:auto;padding:8px 0 0;font-family:'Inter';font-size:12.5px;font-weight:600;color:var(--plum-d);background:transparent;border:none;cursor:pointer;text-align:left;display:inline-flex;align-items:center;gap:4px;transition:.12s}
.dash-card .card-action:hover{color:var(--ink);transform:translateX(2px)}

/* Studio hero (home dashboard) */
.studio-hero{background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 100%);color:#fff;border-color:var(--ink);position:relative;overflow:hidden}
.studio-hero::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'><polygon fill='none' stroke='%237C3AED' stroke-width='1' points='42,2 80,24 80,72 42,94 4,72 4,24'/></svg>");background-repeat:repeat;background-size:84px 96px;opacity:.07;pointer-events:none}
.studio-hero .ch h3,.studio-hero .ch .lbl{color:#fff}
.studio-hero .ch .lbl{color:var(--plum-soft)}
.studio-hero .hero-stats{display:flex;gap:32px;flex-wrap:wrap;margin:14px 0 10px;position:relative;z-index:1}
.studio-hero .hs{display:flex;flex-direction:column}
.studio-hero .hs .v{font-family:'Inter';font-weight:800;font-size:34px;line-height:1;letter-spacing:-0.02em;color:#fff;margin-bottom:4px}
.studio-hero .hs .v .of{font-size:14px;font-weight:500;color:#FFFFFFA0}
.studio-hero .hs .l{font-family:'JetBrains Mono';font-size:10px;color:var(--plum-soft);letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.studio-hero .hs .d{font-family:'JetBrains Mono';font-size:10.5px;color:var(--emerald-glow);letter-spacing:.04em;margin-top:3px}
.studio-hero .card-action{color:var(--plum-soft)}
.studio-hero .card-action:hover{color:#fff}

/* KPI strip (lifted from admin.html cs-kpi pattern) */
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi-strip .kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.kpi-strip .kpi.featured{border-color:var(--plum-d);background:linear-gradient(180deg,var(--plum-glow) 0%,#fff 60%)}
.kpi-strip .kpi.honey{border-color:var(--honey);background:linear-gradient(180deg,var(--honey-glow) 0%,#fff 60%)}
.kpi-strip .kpi.em{border-color:var(--emerald);background:linear-gradient(180deg,var(--emerald-glow) 0%,#fff 60%)}
.kpi-strip .kpi .l{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}
.kpi-strip .kpi .v{font-family:'Inter';font-weight:800;font-size:24px;color:var(--ink);line-height:1.1;letter-spacing:-0.015em}
.kpi-strip .kpi .v .sub{font-size:11px;font-weight:500;color:var(--mute);margin-left:4px;letter-spacing:0}
.kpi-strip .kpi .d{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.04em;font-weight:600;margin-top:2px}
.kpi-strip .kpi .d.up{color:var(--emerald-d)}
.kpi-strip .kpi .d.down{color:var(--rose-d)}
.kpi-strip .kpi .d.neutral{color:var(--mute)}
@media (max-width:900px){.kpi-strip{grid-template-columns:repeat(2,1fr)}}

/* Status banner */
.status-banner{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;background:var(--plum-glow);border:1px solid var(--plum-soft);border-left:4px solid var(--plum-d);border-radius:10px;margin-bottom:18px}
.status-banner .dot{width:10px;height:10px;border-radius:50%;background:var(--plum-d);flex-shrink:0;margin-top:5px}
.status-banner .body{flex:1;font-size:13px;line-height:1.55;color:var(--ink-2)}
.status-banner .body b{color:var(--plum-d);font-weight:700}
.status-banner .meta{font-family:'JetBrains Mono';font-size:10px;color:var(--plum-d);letter-spacing:.1em;text-transform:uppercase;font-weight:700;flex-shrink:0;align-self:center}

/* Activity feed */
.activity-feed{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--line);padding-left:14px;margin-left:6px}
.activity-item{position:relative;padding:8px 0 14px}
.activity-item::before{content:"";position:absolute;left:-21px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--plum-d);border:2px solid #fff;box-shadow:0 0 0 2px var(--line)}
.activity-item.fresh::before{background:var(--emerald-d);box-shadow:0 0 0 2px var(--emerald-glow);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.activity-item .ai-msg{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.activity-item .ai-msg b{color:var(--ink);font-weight:600}
.activity-item .ai-time{font-family:'JetBrains Mono';font-size:10px;color:var(--mute);letter-spacing:.06em;margin-top:2px}

/* Quick-action cards (home) */
.qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.qa-grid{grid-template-columns:1fr}}
.qa-card{background:var(--fog);border:1px solid var(--line);border-radius:10px;padding:14px 16px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:6px;text-align:left;font-family:inherit}
.qa-card:hover{background:#fff;border-color:var(--plum-soft);transform:translateY(-1px)}
.qa-card .ic{width:34px;height:34px;border-radius:8px;background:var(--plum-glow);color:var(--plum-d);display:grid;place-items:center;font-size:16px;font-weight:800;margin-bottom:4px}
.qa-card .t{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.2}
.qa-card .d{font-size:11.5px;color:var(--mute);line-height:1.4}

/* Mini-table (used on home + cohorts + library) */
.mini-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.mini-tbl th{text-align:left;font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line)}
.mini-tbl td{padding:10px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.mini-tbl tr:last-child td{border-bottom:none}
.mini-tbl tr:hover{background:var(--fog)}
.mini-tbl .name{font-weight:600;color:var(--ink)}
.mini-tbl .id{font-family:'JetBrains Mono';font-size:11px;color:var(--mute)}
.mini-tbl .num{font-family:'JetBrains Mono';font-weight:600;color:var(--ink)}
.mini-tbl .act-cell{display:flex;gap:6px;justify-content:flex-end}
.mini-tbl .act-cell button{padding:5px 10px;background:transparent;border:1px solid var(--line);border-radius:6px;font-family:'Inter';font-size:11px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.12s}
.mini-tbl .act-cell button:hover{border-color:var(--plum-d);color:var(--plum-d)}
.mini-tbl .badge{font-family:'JetBrains Mono';font-size:9px;font-weight:700;padding:2px 7px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase}
.mini-tbl .badge.em{background:var(--emerald-glow);color:var(--emerald-d)}
.mini-tbl .badge.pl{background:var(--plum-glow);color:var(--plum-d)}
.mini-tbl .badge.hn{background:var(--honey-glow);color:var(--honey-d)}
.mini-tbl .badge.mute{background:var(--mist);color:var(--mute)}
.mini-tbl .badge.draft{background:var(--honey-glow);color:var(--honey-d)}

/* Track cards grid (Tracks view — lifted from admin.html) */
.track-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:900px){.track-grid{grid-template-columns:1fr}}
.track-card{background:var(--fog);border:1px solid var(--line);border-radius:12px;padding:18px 20px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:10px}
.track-card:hover{background:#fff;border-color:var(--plum-soft);transform:translateY(-1px)}
.track-card .tc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.track-card .tc-title{font-family:'Inter';font-weight:700;font-size:14.5px;color:var(--ink);margin:0;line-height:1.25}
.track-card .tc-status{font-family:'JetBrains Mono';font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--emerald-glow);color:var(--emerald-d);padding:3px 9px;border-radius:999px;flex-shrink:0}
.track-card .tc-status.draft{background:var(--honey-glow);color:var(--honey-d)}
.track-card .tc-outcomes{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin:0}
.track-card .tc-meta{display:flex;gap:14px;flex-wrap:wrap;padding-top:8px;border-top:1px dashed var(--line)}
.track-card .tc-meta .m{font-size:11.5px;color:var(--mute);font-family:'JetBrains Mono';letter-spacing:.04em}
.track-card .tc-meta .m b{color:var(--ink);font-weight:700;font-family:'Inter'}

/* Assign-row (Cohorts view — quick assign panel) */
.assign-list{display:flex;flex-direction:column;gap:8px}
.assign-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--fog);border:1px solid var(--line);border-radius:8px;transition:.15s}
.assign-row:hover{background:#fff;border-color:var(--plum-soft)}
.assign-row b{font-family:'JetBrains Mono';font-size:12px;color:var(--ink);font-weight:700;flex-shrink:0}
.assign-row span{font-size:11.5px;color:var(--mute);flex:1;min-width:0}
.assign-row .act-btn{padding:5px 12px;background:var(--plum-d);color:#fff;border:none;border-radius:6px;font-family:'Inter';font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0;transition:.12s}
.assign-row .act-btn:hover{background:var(--ink)}

/* Mini-courses list (lifted from admin.html mc-list) */
.mc-list{display:flex;flex-direction:column;gap:8px}
.mc-row{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--fog);border:1px solid var(--line);border-radius:10px;transition:.15s}
.mc-row:hover{background:#fff;border-color:var(--plum-soft)}
.mc-row .ic{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-size:16px;font-weight:800;flex-shrink:0}
.mc-row .ic.video{background:var(--teal-glow);color:var(--teal-d)}
.mc-row .ic.text{background:var(--honey-glow);color:var(--honey-d)}
.mc-row .ic.quiz{background:var(--plum-glow);color:var(--plum-d)}
.mc-row .body{flex:1;min-width:0;display:flex;flex-direction:column}
.mc-row .body b{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:2px}
.mc-row .body span{font-size:11px;color:var(--mute);font-family:'JetBrains Mono';letter-spacing:.04em}
.mc-row .typ{font-family:'JetBrains Mono';font-size:10px;font-weight:700;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;min-width:48px;text-align:center}
.mc-row .dur{font-family:'JetBrains Mono';font-size:11px;font-weight:600;color:var(--ink-2);min-width:55px;text-align:center}
.mc-row .badge-st{font-family:'JetBrains Mono';font-size:9px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;background:var(--emerald-glow);color:var(--emerald-d)}
.mc-row .badge-st.draft{background:var(--honey-glow);color:var(--honey-d)}
.mc-row .act-btn{padding:6px 12px;background:transparent;border:1px solid var(--line);border-radius:6px;font-family:'Inter';font-size:11.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.12s}
.mc-row .act-btn:hover{border-color:var(--plum-d);color:var(--plum-d)}

/* Filter row (mini-courses + library) */
.filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:10px}
.filter-row .l{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700}
.filter-row .chip{padding:5px 11px;background:var(--fog);border:1px solid var(--line);border-radius:999px;font-family:'Inter';font-size:11.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.12s}
.filter-row .chip:hover{background:#fff;border-color:var(--plum-soft);color:var(--plum-d)}
.filter-row .chip.active{background:var(--plum-d);color:#fff;border-color:var(--plum-d)}

/* Library grid (cross-cut content) */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.lib-card{background:var(--fog);border:1px solid var(--line);border-radius:10px;padding:14px 16px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:8px}
.lib-card:hover{background:#fff;border-color:var(--plum-soft);transform:translateY(-1px)}
.lib-card .lc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.lib-card .lc-type{font-family:'JetBrains Mono';font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--plum-glow);color:var(--plum-d)}
.lib-card .lc-type.track{background:var(--teal-glow);color:var(--teal-d)}
.lib-card .lc-type.cohort{background:var(--emerald-glow);color:var(--emerald-d)}
.lib-card .lc-type.mini{background:var(--honey-glow);color:var(--honey-d)}
.lib-card .lc-type.quiz{background:var(--rose-glow);color:var(--rose-d)}
.lib-card .lc-st{font-family:'JetBrains Mono';font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.lib-card .lc-st.live{color:var(--emerald-d)}
.lib-card .lc-st.draft{color:var(--honey-d)}
.lib-card .lc-title{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
.lib-card .lc-meta{font-size:11.5px;color:var(--mute);font-family:'JetBrains Mono';letter-spacing:.04em;line-height:1.4}

/* Analytics — bar chart (pure CSS) */
.bar-chart{display:flex;flex-direction:column;gap:8px}
.bc-row{display:grid;grid-template-columns:140px 1fr 60px;gap:10px;align-items:center}
.bc-row .lbl{font-size:12px;color:var(--ink-2);font-weight:600}
.bc-row .bar{height:14px;background:var(--line);border-radius:7px;overflow:hidden;position:relative}
.bc-row .bar .fill{height:100%;background:linear-gradient(90deg,var(--plum-soft),var(--plum-d));border-radius:7px;transition:.3s}
.bc-row .bar .fill.em{background:linear-gradient(90deg,#A7F3D0,var(--emerald-d))}
.bc-row .bar .fill.hn{background:linear-gradient(90deg,#FDE68A,var(--honey-d))}
.bc-row .bar .fill.tl{background:linear-gradient(90deg,#99F6E4,var(--teal-d))}
.bc-row .num{font-family:'JetBrains Mono';font-size:11.5px;font-weight:700;color:var(--ink);text-align:right}

/* Funnel (drop-off) */
.funnel{display:flex;flex-direction:column;gap:6px}
.fn-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.fn-row .stage{flex:0 0 160px;color:var(--ink-2);font-weight:600}
.fn-row .bar{height:32px;background:linear-gradient(90deg,var(--plum-d),var(--plum));border-radius:6px;display:flex;align-items:center;padding:0 12px;color:#fff;font-family:'JetBrains Mono';font-size:11px;font-weight:700;letter-spacing:.04em;transition:.3s}
.fn-row.s1 .bar{width:100%}
.fn-row.s2 .bar{width:78%}
.fn-row.s3 .bar{width:54%;background:linear-gradient(90deg,var(--honey-d),var(--honey))}
.fn-row.s4 .bar{width:36%;background:linear-gradient(90deg,var(--rose),var(--rose-d))}

/* Sparkline (engagement over time) */
.spark{display:flex;align-items:flex-end;gap:4px;height:64px;padding:8px 0}
.spark .b{flex:1;background:linear-gradient(180deg,var(--plum-soft),var(--plum-d));border-radius:3px 3px 0 0;min-width:8px}
.spark .b.now{background:linear-gradient(180deg,var(--plum-d),var(--ink))}

/* Sample profile generator form */
.spg-form{background:var(--fog);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-top:6px}
.spg-form .form-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.spg-form .field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:120px}
.spg-form .field label{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700}
.spg-form .field select,.spg-form .field input{padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;font-family:'Inter';font-size:12.5px;color:var(--ink);outline:0}
.spg-form .field select:focus,.spg-form .field input:focus{border-color:var(--plum-d)}
.spg-form .gen-btn{padding:9px 18px;background:var(--plum-d);color:#fff;border:none;border-radius:8px;font-family:'Inter';font-weight:600;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:6px;flex-shrink:0;transition:.15s}
.spg-form .gen-btn:hover{background:var(--ink)}

/* Settings rows */
.settings-rows{display:flex;flex-direction:column;gap:8px;max-width:760px}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:10px}
.set-row .sr-body{flex:1;min-width:0}
.set-row .sr-title{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:2px}
.set-row .sr-desc{font-size:11.5px;color:var(--mute);line-height:1.4}
.set-row .sr-control{flex-shrink:0;margin-left:14px}
.set-row .sr-toggle{width:42px;height:24px;background:var(--line);border-radius:999px;position:relative;cursor:pointer;transition:.18s;border:none;padding:0}
.set-row .sr-toggle.on{background:var(--plum-d)}
.set-row .sr-toggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.set-row .sr-toggle.on::after{left:21px}

/* Profile form (settings) */
.profile-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px}
.profile-form .pf-field{display:flex;flex-direction:column;gap:5px}
.profile-form .pf-field.full{grid-column:span 2}
.profile-form .pf-label{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700}
.profile-form .pf-value{padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:8px;font-family:'Inter';font-size:13.5px;color:var(--ink);font-weight:500}
.profile-form .pf-value.locked{background:var(--mist);color:var(--mute)}
@media (max-width:900px){.profile-form{grid-template-columns:1fr}.profile-form .pf-field.full{grid-column:span 1}}

/* Profile header — avatar + identity strip */
.profile-head{display:flex;align-items:center;gap:22px;padding:4px 2px 24px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.pf-avatar-wrap{position:relative;flex-shrink:0;width:96px;height:96px}
.pf-avatar{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--honey),var(--honey-d));box-shadow:0 4px 14px rgba(180,83,9,.22),inset 0 0 0 1px rgba(255,255,255,.18);user-select:none}
.pf-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.pf-avatar .pf-initials{font-family:'Inter';font-weight:800;font-size:34px;color:#fff;letter-spacing:.02em;text-transform:uppercase}
.pf-avatar-edit{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;border:2.5px solid #fff;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;font-size:14px;line-height:1;box-shadow:0 2px 6px rgba(11,18,32,.25);transition:.15s}
.pf-avatar-edit:hover{background:var(--honey-d);transform:scale(1.06)}
.pf-avatar-edit:focus-visible{outline:2px solid var(--honey);outline-offset:2px}
.pf-identity{display:flex;flex-direction:column;gap:5px;min-width:0}
.pf-identity .pf-name{font-family:'Inter';font-weight:800;font-size:22px;letter-spacing:-0.02em;color:var(--ink);line-height:1.1}
.pf-identity .pf-role{font-size:13.5px;color:var(--body);font-weight:500}
.pf-identity .pf-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px}
.pf-identity .pf-badge{font-family:'JetBrains Mono';font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--mist);color:var(--ink-3)}
.pf-identity .pf-badge.ok{background:var(--emerald-glow);color:var(--emerald-d)}
.pf-photo-input{display:none}
@media (max-width:600px){.profile-head{flex-direction:column;align-items:flex-start;text-align:left}}

/* Avatar crop & zoom modal */
.crop-overlay{position:fixed;inset:0;z-index:200;background:rgba(11,18,32,.55);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px}
.crop-modal{background:#fff;border-radius:16px;width:100%;max-width:360px;padding:22px;box-shadow:0 20px 60px rgba(11,18,32,.35);display:flex;flex-direction:column;gap:16px}
.crop-modal h3{margin:0;font-family:'Inter';font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.crop-modal .crop-sub{font-size:12.5px;color:var(--mute);margin-top:-10px}
.crop-stage{position:relative;width:280px;height:280px;margin:0 auto;border-radius:50%;overflow:hidden;background:var(--mist);cursor:grab;touch-action:none;box-shadow:inset 0 0 0 2px rgba(11,18,32,.06)}
.crop-stage.grabbing{cursor:grabbing}
.crop-stage img{position:absolute;left:0;top:0;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.crop-zoom{display:flex;align-items:center;gap:10px}
.crop-zoom .zlabel{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700}
.crop-zoom input[type=range]{flex:1;accent-color:var(--honey-d);cursor:pointer}
.crop-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}
.crop-btn{padding:9px 18px;border-radius:8px;font-family:'Inter';font-weight:600;font-size:13px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink-2);transition:.15s}
.crop-btn:hover{background:var(--mist)}
.crop-btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.crop-btn.primary:hover{background:var(--honey-d);border-color:var(--honey-d)}

/* Empty/placeholder */
.placeholder{padding:48px 32px;text-align:center;color:var(--mute);background:#fff;border:1px dashed var(--line);border-radius:14px}
.placeholder h3{margin:0 0 8px;color:var(--ink);font-family:'Inter';font-weight:700;font-size:18px}
.placeholder p{font-size:13px;margin:0;line-height:1.55}

/* ── AUTH SCREENS (login / signup) — Creator plum theme ── */
.auth-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--fog);padding:24px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:40px;max-width:400px;width:100%;box-shadow:0 4px 24px rgba(11,18,32,.06)}
.auth-card h2{font-family:'Inter';font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
.auth-card .sub{font-size:13.5px;color:var(--mute);margin:0 0 28px;line-height:1.5}
.auth-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.auth-field label{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:700}
.auth-field input{padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-family:'Inter';font-size:13.5px;color:var(--ink);outline:none;transition:.15s;box-sizing:border-box;width:100%}
.auth-field input:focus{border-color:var(--plum-d);box-shadow:0 0 0 3px var(--plum-glow)}
.auth-btn{width:100%;padding:12px;background:var(--plum-d);color:#fff;border:none;border-radius:10px;font-family:'Inter';font-weight:700;font-size:14px;cursor:pointer;margin-top:6px;transition:.15s}
.auth-btn:hover{background:var(--ink)}
.auth-btn.sec{background:#fff;color:var(--ink);border:1px solid var(--line);margin-top:8px}
.auth-btn.sec:hover{background:var(--fog);border-color:var(--plum-d);color:var(--plum-d)}
.auth-switch{text-align:center;margin-top:18px;font-size:13px;color:var(--mute)}
.auth-switch a{color:var(--plum-d);font-weight:600;cursor:pointer;text-decoration:none}
.auth-dpdp{margin-top:16px;padding:11px 14px;background:var(--plum-glow);border-radius:8px;font-size:11.5px;color:var(--ink-2);line-height:1.55;border:1px solid var(--plum-soft)}
.auth-back{display:block;text-align:center;margin-top:14px;font-size:12px;color:var(--mute);cursor:pointer;text-decoration:none}
.auth-back:hover{color:var(--plum-d)}
/* ── topbar account dropdown ─────────────────────────────────────── */
.app-topbar .tb-user-wrap{position:relative}
.app-topbar .tb-user-caret{color:var(--mute);font-size:10px;margin-left:2px}
.app-topbar .tb-user-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:214px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(11,18,32,.18);padding:6px;z-index:60}
.app-topbar .tb-user-menu .um-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.app-topbar .tb-user-menu .um-head b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.app-topbar .tb-user-menu .um-head span{font-size:11px;color:var(--mute)}
.app-topbar .tb-user-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink-2);transition:.12s}
.app-topbar .tb-user-menu button:hover{background:var(--mist)}
.app-topbar .tb-user-menu button.danger{color:var(--rose-d)}
.app-topbar .tb-user-menu button.danger:hover{background:#fde8ec}
.app-topbar .tb-user-menu .um-sep{height:1px;background:var(--line);margin:6px 0}

/* ── Dark mode surface overrides ─────────────────────────────────────────
   Tokens (--ink, --line, --mute, etc.) flip in shared/brand.css. Here we
   only remap hardcoded #fff surfaces → var(--surface) (elevated panels) and
   var(--ink)-bg surfaces → var(--deep) (stays dark in both themes). */
[data-theme="dark"] .app-topbar,
[data-theme="dark"] .app-topbar .tb-search:hover,
[data-theme="dark"] .app-topbar .tb-search:focus-within,
[data-theme="dark"] .tb-search-pop,
[data-theme="dark"] .app-view-head .head-row .actions .btn,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .kpi-strip .kpi,
[data-theme="dark"] .filter-row,
[data-theme="dark"] .filter-row .chip:hover,
[data-theme="dark"] .set-row,
[data-theme="dark"] .profile-form .pf-value,
[data-theme="dark"] .crop-modal,
[data-theme="dark"] .crop-btn,
[data-theme="dark"] .placeholder,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .auth-btn.sec,
[data-theme="dark"] .app-topbar .tb-user-menu{background:var(--surface)}
/* search-pop uses a hardcoded light border */
[data-theme="dark"] .tb-search-pop{border-color:var(--line)}
/* surfaces that intentionally stay dark in BOTH themes */
[data-theme="dark"] .pf-avatar-edit,
[data-theme="dark"] .crop-btn.primary{background:var(--deep)}