/* ═══════════════════════════════════════════════════════════════
   Sivarr — Premium AI OS Design System  v5
   Primary AI colour: Electric Teal #0FDBAD (dark) / #0D7A5F (light)
   Font: Plus Jakarta Sans (all weights — no display font)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Brand palette */
  --teal:    #0D7A5F; --teal2: #E6F5F0; --teal3: #5DCAA5; --teal4: #085041;
  --purple:  #534AB7; --purple2: #EEEDFE; --purple3: #3C3489;
  --coral:   #E8614A; --coral2: #FDF0ED; --coral3: #993C1D;
  --amber:   #854F0B; --amber2: #FEF6E4; --amber3: #EF9F27;
  --green:   #3B6D11; --green2: #EAF3DE; --green3: #059669;
  --red:     #A32D2D; --red2:   #FCEBEB; --red3:   #E24B4A;
  --blue:    #185FA5; --blue2:  #E6F1FB;
  --pink:    #993556; --pink2:  #FBEAF0;

  /* Surfaces — light mode */
  --bg:   #F9FAFB;
  --bg2:  #FFFFFF;
  --bg3:  #F2F4F7;
  --sidebar-bg:     #F7F8FA;
  --sidebar-border: #E8EAED;

  /* Text — light mode */
  --text1: #0D1117; --text2: #374151; --text3: #6B7280; --text4: #9CA3AF;

  /* Borders & shadows */
  --border:  #E5E7EB; --border2: #D1D5DB;
  --shadow:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow2: 0 4px 16px rgba(0,0,0,.08);
  --shadow3: 0 8px 32px rgba(0,0,0,.12);
  --glow-teal:   0 0 20px rgba(13,122,95,.25);
  --glow-purple: 0 0 20px rgba(83,74,183,.25);

  /* Shape */
  --radius:  9px; --radius2: 14px; --radius3: 18px;
  --sb-width: 256px; --topbar-h: 54px;

  /* Typography */
  --font:         'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, sans-serif;

  /* Motion */
  --transition: all 0.16s cubic-bezier(.4, 0, .2, 1);
  --spring:     all 0.28s cubic-bezier(.34, 1.56, .64, 1);

  /* AI gradient — used on AI elements */
  --ai-grad: linear-gradient(135deg, #0D7A5F 0%, #534AB7 100%);
  --ai-glow: 0 0 32px rgba(13,122,95,.3), 0 0 12px rgba(83,74,183,.2);

  /* Legacy compat */
  --accent: #0D7A5F; --accent2: #534AB7;
  --surface: var(--bg2); --card: var(--bg2);
  --text: var(--text1); --muted: var(--text3); --muted2: var(--text4);
  --yellow: var(--amber3); --fg: var(--text1);
}

/* ── DARK MODE — Warm Charcoal palette ─────────────────────── */
[data-theme="dark"] {
  /* Plain dark neutral backgrounds */
  --bg:  #1C1C1C;
  --bg2: #242424;
  --bg3: #2E2E2E;
  --sidebar-bg:     #161616;
  --sidebar-border: #2A2A2A;
  --border:  #2E2E2E; --border2: #3A3A3A;

  /* Text — warm off-white hierarchy */
  --text1: #F4F3F1; --text2: #C0BDB9; --text3: #7A7672; --text4: #54514E;

  /* Shadows — richer in dark mode */
  --shadow:  0 1px 4px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow2: 0 4px 20px rgba(0,0,0,.6);
  --shadow3: 0 12px 40px rgba(0,0,0,.7);

  /* Electric accent tints for dark mode — visible but not garish */
  --teal:    #0FDBAD;   /* Electric teal — pops on dark */
  --teal2:   rgba(15,219,173,.1);
  --teal3:   rgba(15,219,173,.2);
  --teal4:   #0AB58F;
  --purple:  #8B80F0;   /* Lighter purple — readable on dark */
  --purple2: rgba(139,128,240,.12);
  --purple3: #6458CC;

  /* Status colours — brighter in dark */
  --green3:  #34D399;
  --red3:    #F87171;
  --amber3:  #FBBF24;

  /* Semantic tint backgrounds */
  --coral2: rgba(232,97,74,.1); --amber2: rgba(239,159,39,.1);
  --green2: rgba(59,109,17,.12); --red2:   rgba(163,45,45,.1);
  --blue2:  rgba(24,95,165,.1); --pink2:  rgba(153,53,86,.1);

  /* AI elements */
  --ai-grad: linear-gradient(135deg, #0FDBAD 0%, #8B80F0 100%);
  --ai-glow: 0 0 32px rgba(15,219,173,.25), 0 0 12px rgba(139,128,240,.2);
  --glow-teal:   0 0 20px rgba(15,219,173,.3);
  --glow-purple: 0 0 20px rgba(139,128,240,.3);

  /* Legacy */
  --surface: var(--bg2); --card: var(--bg2);
  --text: var(--text1); --muted: var(--text3); --muted2: var(--text4);
  --fg: var(--text1);
}

/* ── BASE ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text2);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

body.dashboard-active { overflow: hidden; }

/* Premium scrollbars */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text4); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); }

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); }
input, textarea, select { font-family: var(--font); }

/* Panel headings — Plus Jakarta Sans, weight 800 */
h1,h2,h3,.panel-title,.section-title,
.vh-title,.card-title,.h-card-title,.h-stat-val,
.chat-header-name,.siva-brief-name {
  font-family: var(--font-display);
}

/* Selection colour */
::selection { background: rgba(13,122,95,.25); color: var(--text1); }
[data-theme="dark"] ::selection { background: rgba(15,219,173,.2); }

/* Focus ring — keyboard users */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* Smooth page transitions */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* AI shimmer — used on loading states */
.ai-shimmer {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%);
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--radius);
}

/* ── OFFLINE BANNER ────────────────────────────────────────── */
#offline-banner {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 95;
  background: var(--amber3); color: #1a1000;
  padding: 7px 20px;
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 600;
  animation: fadeIn .2s ease;
}
#offline-banner i { font-size: 1rem; flex-shrink: 0; }
body.offline .layout {
  padding-top: calc(var(--topbar-h) + 34px);
}

/* ── TOPBAR ────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: rgba(var(--bg2-rgb, 255,255,255), .85);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 16px; gap: 12px; z-index: 100;
}
[data-theme="dark"] .topbar {
  background: rgba(22,22,22,.92);
  border-bottom-color: rgba(255,255,255,.05);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}

.tb-brand {
  display: flex; align-items: center; gap: 9px;
  width: var(--sb-width); flex-shrink: 0;
  cursor: pointer; user-select: none; text-decoration: none;
}

.tb-logo {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--ai-grad);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; box-shadow: var(--glow-teal);
}
.tb-logo img { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) invert(1); }

.tb-name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 800; color: var(--text1);
  letter-spacing: -.03em; white-space: nowrap;
}
.tb-name span { color: var(--teal); }

.tb-center { flex: 1; max-width: 520px; }

.tb-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius2); padding: 0 14px; height: 36px;
  cursor: pointer; transition: var(--transition);
}
.tb-search:hover {
  border-color: var(--teal);
  background: var(--bg2);
  box-shadow: 0 0 0 3px var(--teal2);
}
[data-theme="dark"] .tb-search:hover { box-shadow: 0 0 0 3px rgba(15,219,173,.1); }
.tb-search span { font-size: 14px; color: var(--text4); flex: 1; }
.tb-search kbd {
  font-size: 11px; color: var(--text4);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 6px; font-family: var(--font);
}

.tb-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.global-save-status {
  font-size: .8rem; white-space: nowrap; color: var(--text4);
  padding: 0 6px; transition: color .2s, opacity .2s; pointer-events: none;
}

.tb-btn, .tb-icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 18px; transition: var(--transition);
  border: none; background: transparent; cursor: pointer; position: relative;
}
.tb-btn:hover, .tb-icon-btn:hover { background: var(--bg3); color: var(--text1); }

.pa {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ai-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  cursor: pointer; flex-shrink: 0; overflow: hidden; font-family: var(--font);
}

.tb-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ai-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  cursor: pointer; flex-shrink: 0; overflow: hidden; font-family: var(--font);
}

.tb-ham {
  display: none; width: 34px; height: 34px;
  border-radius: var(--radius); align-items: center; justify-content: center;
  color: var(--text3); font-size: 20px; border: none; background: transparent;
}

/* ── OVERLAY (mobile) ──────────────────────────────────────── */
.overlay {
  display:none;
  position:fixed; inset:0;
  background: rgba(0,0,0,.4); z-index:89;
  opacity:0; transition:opacity .25s;
}
.overlay.show { opacity:1; }

/* ── LAYOUT ────────────────────────────────────────────────── */
.layout {
  display:flex;
  padding-top: var(--topbar-h);
  height:100vh;
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar {
  width: var(--sb-width); flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column; overflow: hidden;
  position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 90;
  transition: transform .25s cubic-bezier(.4,0,.2,1), width .2s;
}

/* ── Workspace header ─── */
.sb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sb-ws {
  display: flex; align-items: center; gap: 9px; min-width: 0;
}
.sb-ws-av {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: .72rem; font-weight: 900; color: #fff;
}
.sb-ws-name {
  font-family: var(--font); font-size: .88rem; font-weight: 800;
  color: var(--text1); letter-spacing: -.02em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sb-new-btn {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--text3); font-size: .88rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--transition);
}
.sb-new-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--teal2); }

/* ── Scroll area ─── */
.sb-scroll {
  flex: 1; overflow-y: auto; padding: 8px 10px;
}
.sb-scroll::-webkit-scrollbar { width: 2px; }
.sb-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Section labels ─── */
.sb-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--text4); text-transform: uppercase;
  padding: 14px 6px 5px; white-space: nowrap;
}
.sb-section-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 6px 5px;
}
.sb-nav-group { margin-bottom: 4px; }

/* ── Nav items ─── */
.si {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 9px; cursor: pointer;
  transition: background .15s; position: relative;
  border: none; background: transparent; width: 100%; text-align: left;
  margin-bottom: 1px;
}
.si:hover { background: var(--bg3); }
.si.on { background: var(--teal2); }

.si-icon {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--text3);
  transition: color .15s, background .15s;
}
.si:hover .si-icon { color: var(--text2); }
.si.on .si-icon    { color: var(--teal); }

/* legacy .si-ic compat */
.si-ic {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--text3); transition: color .15s;
}
.si:hover .si-ic { color: var(--text2); }
.si.on .si-ic    { color: var(--teal); }

.si-lb {
  font-size: 14px; color: var(--text2); flex: 1;
  font-weight: 500; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; transition: color .15s;
}
.si.on .si-lb { color: var(--text1); font-weight: 600; }

.si-new-badge {
  font-size: .6rem; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(135deg, var(--teal), var(--accent2));
  color: #fff; padding: 2px 7px; border-radius: 20px;
  text-transform: uppercase; flex-shrink: 0;
}
.si-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
}

/* Legacy badge compat */
.si-bd {
  font-size: 11px; border-radius: 20px; padding: 1px 6px;
  font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.bd-teal   { background: var(--teal2);   color: var(--teal); }
.bd-red    { background: rgba(239,68,68,.12); color: #ef4444; }
.bd-gray   { background: var(--bg3); border: 1px solid var(--border); color: var(--text3); }
.bd-purple { background: var(--purple2);  color: var(--accent2); }

/* Sub-nav (kept for legacy compat) */
.si-ch { font-size: 13px; color: var(--text4); transition: transform .2s; flex-shrink: 0; }
.si-ch.op { transform: rotate(180deg); }
.sub-nav { overflow: hidden; max-height: 0; transition: max-height .25s; }
.sub-nav.open { max-height: 400px; }
.ssi {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 28px; border-radius: 8px;
  cursor: pointer; transition: background .15s;
  border: none; background: transparent; width: 100%; text-align: left;
}
.ssi:hover { background: var(--bg3); }
.ssi.on { background: var(--teal2); }
.ssd { width: 5px; height: 5px; border-radius: 50%; background: var(--border2); flex-shrink: 0; }
.ssi.on .ssd { background: var(--teal); }
.ss-lb { font-size: 13px; color: var(--text3); flex: 1; }
.ssi.on .ss-lb { color: var(--text1); font-weight: 600; }
.sdiv { height: 1px; background: var(--border); margin: 6px 0; }

/* ── Spaces list ─── */
.sb-spaces-add {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid var(--border); background: transparent;
  color: var(--text4); font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--transition);
}
.sb-spaces-add:hover { border-color: var(--teal); color: var(--teal); }
.sb-spaces-head { cursor: pointer; user-select: none; }
.sb-spaces-caret { font-size: .8rem; color: var(--text4); transition: transform .18s; }
#sgi-spaces.collapsed { display: none; }
.sb-spaces-head.collapsed .sb-spaces-caret { transform: rotate(-90deg); }

.sp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 9px;
  cursor: pointer; transition: background .15s; margin-bottom: 1px;
}
.sp-row:hover { background: var(--bg3); }
.sp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sp-lb { font-size: 14px; color: var(--text3); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.sp-row.active .sp-lb { color: var(--text1); font-weight: 600; }

/* ── Footer ─── */
.sb-foot {
  padding: 10px; border-top: 1px solid var(--border); flex-shrink: 0;
  display: flex; flex-direction: column; gap: 6px;
}

.sb-upgrade-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 9px 11px;
  background: linear-gradient(135deg, var(--teal2), var(--purple2, rgba(83,74,183,.08)));
  border: 1px solid rgba(13,122,95,.25); border-radius: 10px;
  cursor: pointer; transition: opacity .15s;
}
.sb-upgrade-btn:hover { opacity: .82; }
.sb-upgrade-left { display: flex; align-items: center; gap: 9px; }
.sb-upgrade-icon {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: var(--teal); color: #fff; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
}
.sb-upgrade-plan  { font-size: .73rem; font-weight: 800; color: var(--teal); text-transform: uppercase; letter-spacing: .05em; }
.sb-upgrade-label { font-size: .8rem; color: var(--text1); font-weight: 600; margin-top: 1px; }
.sb-upgrade-caret { font-size: .8rem; color: var(--text3); }

.sb-user-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 10px;
  cursor: pointer; transition: background .15s;
}
.sb-user-row:hover { background: var(--bg3); }

.u-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; overflow: hidden;
}
/* legacy .user-row compat */
.user-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 10px;
  cursor: pointer; transition: background .15s;
}
.user-row:hover { background: var(--bg3); }
.u-info { flex: 1; min-width: 0; }
.u-name { font-size: 14px; font-weight: 700; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-role { font-size: 12px; color: var(--text3); }

.sb-icon-action {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  border: none; background: transparent; color: var(--text3); font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--transition);
}
.sb-icon-action:hover { background: var(--bg3); color: var(--text1); }

/* ── Collapsed sidebar (tablet) ─── */
.sidebar.collapsed { width: 52px; }
.sidebar.collapsed .si-lb, .sidebar.collapsed .sb-section-label,
.sidebar.collapsed .sb-section-row .sb-section-label,
.sidebar.collapsed .sub-nav, .sidebar.collapsed .si-ch,
.sidebar.collapsed .si-bd, .sidebar.collapsed .sb-spaces,
.sidebar.collapsed .u-name, .sidebar.collapsed .u-role,
.sidebar.collapsed .sb-ws-name, .sidebar.collapsed .sb-new-btn,
.sidebar.collapsed .sb-upgrade-label, .sidebar.collapsed .sb-upgrade-plan,
.sidebar.collapsed .sb-upgrade-left div, .sidebar.collapsed .sb-icon-action span,
.sidebar.collapsed .sb-spaces-add,
.sidebar.collapsed .si-new-badge, .sidebar.collapsed .si-dot { display: none !important; }
.sidebar.collapsed .sb-header { padding: 10px 8px; justify-content: center; }
.sidebar.collapsed .sb-scroll { padding: 8px 6px; }
.sidebar.collapsed .si  { padding: 8px; justify-content: center; border-radius: 8px; }
.sidebar.collapsed .si-icon, .sidebar.collapsed .si-ic { margin: 0; }
.sidebar.collapsed .sb-foot { padding: 8px 6px; }
.sidebar.collapsed .sb-user-row, .sidebar.collapsed .user-row { padding: 6px; justify-content: center; }
.sidebar.collapsed .sb-upgrade-btn { justify-content: center; padding: 9px; }
.sidebar.collapsed .sb-upgrade-caret { display: none; }
.sidebar.collapsed ~ .main { margin-left: 52px; }

.sidebar.retracted { transform: translateX(calc(-1 * var(--sb-width))); }
.sidebar.retracted ~ .main { margin-left: 0; }

/* ── Legacy sg/sl compat ─── */
.sg { display: none; } /* replaced by .sb-section-label */
.sg-items { overflow: hidden; }
.sg-items.collapsed { display: none; }
.sl { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text4); text-transform: uppercase; }

/* Paywall overlay */
.paywall-overlay {
  position:absolute; inset:0; z-index:50;
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(2px);
}
.paywall-card {
  text-align:center; max-width:340px; padding:32px 28px;
  background:var(--card); border:1.5px solid var(--border);
  border-radius:18px; box-shadow:0 8px 40px rgba(0,0,0,.18);
}
.paywall-icon {
  width:52px; height:52px; border-radius:14px;
  background:var(--teal2); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin:0 auto 14px;
}
.paywall-card h3 { font-size:1.1rem; font-weight:800; color:var(--fg); margin-bottom:8px; }
.paywall-card p  { font-size:.84rem; color:var(--text3); line-height:1.55; margin-bottom:20px; }
.paywall-perks { list-style:none; padding:0; margin:0 0 20px; text-align:left; display:flex; flex-direction:column; gap:6px; }
.paywall-perks li { font-size:.8rem; color:var(--text2); display:flex; gap:7px; align-items:center; }
.paywall-perks li::before { content:'✓'; color:var(--teal); font-weight:700; flex-shrink:0; }
.paywall-btn {
  width:100%; padding:10px; background:var(--teal); color:#fff;
  border:none; border-radius:10px; font-family:var(--font);
  font-size:.88rem; font-weight:700; cursor:pointer;
}
.paywall-btn:hover { opacity:.88; }

/* Integration cards in Library */
.int-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-bottom:24px; }
.int-cat-head { grid-column:1/-1; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:10px; padding-bottom:2px; border-bottom:1px solid var(--border); }
.int-cat-head:first-child { margin-top:0; }
.int-card {
  border:1.5px solid var(--border); border-radius:12px; padding:16px;
  display:flex; flex-direction:column; gap:8px; background:var(--bg2);
}
.int-card.connected { border-color:var(--teal); }
.int-header { display:flex; align-items:center; gap:10px; }
.int-logo { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.int-name { font-size:.88rem; font-weight:700; color:var(--fg); }
.int-status { font-size:.72rem; color:var(--muted); }
.int-status.ok { color:var(--teal); }
.int-btn {
  margin-top:auto; padding:7px 10px; border:1px solid var(--border);
  border-radius:8px; background:var(--bg); color:var(--fg);
  font-family:var(--font); font-size:.78rem; font-weight:600; cursor:pointer;
}
.int-btn.connected-btn { background:var(--teal2); color:var(--teal); border-color:var(--teal); }
.int-btn.int-soon { background:transparent; color:var(--muted); border-style:dashed; cursor:help; }
.int-btn.int-soon:hover { border-color:var(--muted); }
.int-btn:hover { border-color:var(--teal); }

/* Sidebar collapsed (tablet) */
.sidebar.collapsed { width:52px; }
.sidebar.collapsed .si-lb, .sidebar.collapsed .sl,
.sidebar.collapsed .sub-nav, .sidebar.collapsed .si-ch,
.sidebar.collapsed .si-bd, .sidebar.collapsed .sb-spaces,
.sidebar.collapsed .u-name, .sidebar.collapsed .u-role,
.sidebar.collapsed .sg-chev, .sidebar.collapsed .sb-spaces-add { display:none!important; }
.sidebar.collapsed .sg { padding:6px 8px; justify-content:center; }
.sidebar.collapsed .si    { padding:8px; justify-content:center; }
.sidebar.collapsed .si-ic { margin:0; }
.sidebar.collapsed .sb-foot { padding:8px; }
.sidebar.collapsed .user-row { padding:4px; justify-content:center; }
.sidebar.collapsed .u-av { width:32px; height:32px; }
.sidebar.collapsed ~ .main { margin-left:52px; }

/* Sidebar fully retracted (slides off-screen) */
.sidebar.retracted { transform:translateX(calc(-1 * var(--sb-width))); }
.sidebar.retracted ~ .main { margin-left:0; }

/* ── MAIN CONTENT ──────────────────────────────────────────── */
.main {
  margin-left: var(--sb-width);
  flex:1; display:flex; flex-direction:column;
  min-height:0; overflow:hidden;
}

/* ── PANELS (views) ────────────────────────────────────────── */
.panel {
  display: none; flex: 1; flex-direction: column;
  overflow: hidden; background: var(--bg);
  animation: fadeUp .2s cubic-bezier(.4,0,.2,1);
}
.panel.active { display: flex; }
[data-theme="dark"] .panel {
  background: var(--bg);
}

/* ── VIEW HEADER ───────────────────────────────────────────── */
.view-head {
  height: 54px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px; gap: 10px;
  flex-shrink: 0; background: var(--bg2);
}
[data-theme="dark"] .view-head {
  background: rgba(28,28,28,.88);
  border-bottom-color: rgba(255,255,255,.06);
}
.vh-icon  { font-size: 20px; color: var(--text3); }
.vh-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800; color: var(--text1); flex: 1;
  letter-spacing: -.03em;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 36px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--text2); font-family: var(--font); white-space: nowrap;
}
.btn:hover { background: var(--bg3); border-color: var(--border2); }
.btn.primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn.primary:hover { background: var(--teal4); }
.btn.ghost { border: none; background: transparent; }
.btn.ghost:hover { background: var(--bg3); }

.btn-start {
  background: var(--teal); color: #fff;
  border: none; border-radius: var(--radius);
  padding: 11px 22px; font-size: .92rem; font-weight: 700;
  cursor: pointer; transition: opacity .2s; font-family: var(--font);
}
.btn-start:hover { opacity: .88; }

/* ── NAV TABS ──────────────────────────────────────────────── */
.nav-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  overflow-x: auto; flex-shrink: 0; background: var(--bg2);
}
.nav-tabs::-webkit-scrollbar { height: 0; }
.ntab {
  padding: 0 18px; height: 44px;
  display: flex; align-items: center;
  font-size: 15px; color: var(--text3);
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: var(--transition); font-weight: 500;
}
.ntab.on { color: var(--text1); font-weight: 600; border-bottom-color: var(--teal); }
.ntab:hover:not(.on) { color: var(--text2); background: var(--bg3); }

/* ── CONTENT AREA ──────────────────────────────────────────── */
.content {
  flex: 1; overflow-y: auto;
  padding: 24px; background: var(--bg);
}
.content::-webkit-scrollbar { width: 5px; }
.content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── CARDS ─────────────────────────────────────────────────── */
.card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius2); padding: 18px 20px;
  transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow2); border-color: var(--border2); }
[data-theme="dark"] .card:hover {
  border-color: rgba(15,219,173,.15);
  box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(15,219,173,.08);
}
.card-hd {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 14px;
}
.card-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 800; color: var(--text1); letter-spacing: -.03em;
}
.card-link  { font-size: 14px; color: var(--teal); cursor: pointer; font-weight: 600; }
.card-link:hover { text-decoration: underline; }

/* ── STAT GRID ─────────────────────────────────────────────── */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px; margin-bottom: 18px;
}
.stat {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius2); padding: 16px 18px;
}
.stat-lbl { font-size: 14px; color: var(--text3); margin-bottom: 5px; font-weight: 500; }
.stat-val { font-size: 26px; font-weight: 800; color: var(--text1); line-height: 1; letter-spacing: -.02em; }
.stat-sub { font-size: 13px; color: var(--text3); margin-top: 5px; }
.stat-sub.up { color: var(--green3); }
.stat-sub.dn { color: var(--red3); }

/* Grid layouts */
.g2  { display: grid; grid-template-columns: 1fr 1fr;    gap: 14px; margin-bottom: 16px; }
.g3l { display: grid; grid-template-columns: 3fr 2fr;    gap: 14px; margin-bottom: 16px; }
.g3r { display: grid; grid-template-columns: 2fr 3fr;    gap: 14px; margin-bottom: 16px; }
.flex-col { display: flex; flex-direction: column; gap: 12px; }

/* ── CHIPS ─────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 13px; font-weight: 600;
}
.c-teal   { background: var(--teal2);   color: var(--teal4); }
.c-purple { background: var(--purple2); color: var(--purple3); }
.c-amber  { background: var(--amber2);  color: var(--amber); }
.c-coral  { background: var(--coral2);  color: var(--coral3); }
.c-green  { background: var(--green2);  color: var(--green); }
.c-red    { background: var(--red2);    color: var(--red); }
.c-gray   { background: var(--bg3); color: var(--text3); border: 1px solid var(--border); }

/* ── PROGRESS ──────────────────────────────────────────────── */
.prog-wrap { background: var(--bg3); height: 7px; border-radius: 4px; overflow: hidden; }
.prog-fill  { height: 100%; border-radius: 4px; transition: width .4s; }

/* ── Sivarr BOX ────────────────────────────────────────────── */
.siva-box {
  background: var(--teal2);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 16px; margin-bottom: 14px;
}
.siva-tag  { font-size: 13px; font-weight: 700; color: var(--teal); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.siva-text { font-size: 15px; color: var(--teal); line-height: 1.65; }

/* ── TASK ROWS ─────────────────────────────────────────────── */
.task-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.task-row:last-child { border-bottom: none; }
.t-chk {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--border2); flex-shrink: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.t-chk.done { background: var(--teal); border-color: var(--teal); }
.t-chk.done::after {
  content: ''; width: 9px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px,-1px); display: block;
}
.t-txt { flex: 1; font-size: 15px; color: var(--text1); font-weight: 500; line-height: 1.4; }
.t-txt.done { text-decoration: line-through; color: var(--text4); }
.t-due { font-size: 13px; color: var(--text4); }

/* ── LOGIN ─────────────────────────────────────────────────── */
#dashboard { display: none; }

#login-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  background: var(--bg);
  overflow: hidden;
}

/* Left branding panel */
.login-left {
  width: 46%;
  flex-shrink: 0;
  background: linear-gradient(145deg, #063d30 0%, #0D7A5F 55%, #14a882 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 4rem;
  position: relative; overflow: hidden;
}
.ll-content { position: relative; z-index: 2; }
.ll-logo {
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 2.75rem;
}
.ll-logo img {
  width: 42px; height: 42px; object-fit: contain;
  filter: brightness(0) invert(1);
}
.ll-logo span {
  font-family: var(--font);
  font-size: 1.65rem; font-weight: 800;
  color: #fff; letter-spacing: -.03em;
}
.ll-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.13); color: rgba(255,255,255,.95);
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.2);
  padding: 5px 14px; margin-bottom: 1.5rem;
}
.ll-headline {
  font-family: var(--font);
  font-size: 3rem; font-weight: 800; color: #fff;
  line-height: 1.1; letter-spacing: -.03em; margin-bottom: 2.5rem;
}
.ll-features { display: flex; flex-direction: column; gap: 1.1rem; }
.ll-feat {
  display: flex; align-items: center; gap: 13px;
  color: rgba(255,255,255,.85); font-size: 1rem; font-weight: 400;
}
.ll-feat i { font-size: 1.2rem; color: rgba(255,255,255,.7); flex-shrink: 0; }
.ll-orb {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.07); pointer-events: none;
}
.ll-orb1 { width: 500px; height: 500px; top: -180px; right: -200px; }
.ll-orb2 { width: 300px; height: 300px; bottom: -110px; left: -90px; }

/* Right form panel */
.login-right {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 2rem; overflow-y: auto; background: var(--bg);
}
.login-card {
  width: 100%; max-width: 420px;
  animation: fadeUp .4s ease;
}

/* Mobile brand (hidden on desktop) */
.lc-brand-mob {
  display: none; align-items: center; gap: 9px; margin-bottom: 2rem;
}
.lc-logo-sm {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--teal);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lc-logo-sm img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }
.lc-brand-mob span {
  font-family: var(--font);
  font-size: 1.2rem; font-weight: 800; color: var(--text1); letter-spacing: -.03em;
}

/* Heading */
.login-card h1 {
  font-family: var(--font);
  font-size: 2.1rem; font-weight: 800; color: var(--text1);
  letter-spacing: -.03em; margin-bottom: .5rem;
}
.login-card > p {
  color: var(--text3); font-size: 1rem; margin-bottom: 1.85rem;
}

/* Auth tabs — underline style */
.auth-tabs {
  display: flex; border-bottom: 1px solid var(--border); margin-bottom: 1.85rem;
}
.auth-tab {
  flex: 1; padding: 10px 0; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: .95rem; font-weight: 600; color: var(--text3);
  cursor: pointer; transition: var(--transition); font-family: var(--font);
}
.auth-tab:hover { color: var(--text1); }
.auth-tab.active { color: var(--teal); border-bottom-color: var(--teal); }

/* Field */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block; font-size: .78rem; font-weight: 600;
  color: var(--text3); margin-bottom: 7px;
  text-transform: uppercase; letter-spacing: .06em;
}

/* Field with leading icon */
.field-ic {
  display: flex; align-items: center;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: var(--transition);
}
.field-ic:focus-within {
  border-color: var(--teal); background: var(--bg2);
  box-shadow: 0 0 0 3px rgba(13,122,95,.1);
}
.field-ic > i.ti {
  font-size: 17px; color: var(--text4);
  padding: 0 0 0 14px; flex-shrink: 0;
}
.field-ic input {
  flex: 1; border: none; background: transparent;
  padding: 12px 14px; color: var(--text1);
  font-size: .95rem; outline: none; font-family: var(--font);
}
.field-ic input::placeholder { color: var(--text4); }
.field-eye {
  background: none; border: none; padding: 0 14px;
  color: var(--text4); cursor: pointer;
  font-size: 17px; display: flex; align-items: center;
  transition: color .15s; flex-shrink: 0;
}
.field-eye:hover { color: var(--text2); }

/* Old plain input fallback */
.field input:not([class]) {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  color: var(--text1); font-size: .95rem; outline: none;
  transition: var(--transition);
}
.field input:not([class]):focus { border-color: var(--teal); }
.field input::placeholder { color: var(--text4); }

/* Error */
.login-err {
  font-size: .84rem; color: var(--red);
  min-height: 18px; margin-bottom: 10px; text-align: center;
}

/* Submit button */
.btn-login {
  width: 100%; background: var(--teal); color: #fff;
  border: none; border-radius: var(--radius); padding: 14px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  font-family: var(--font); letter-spacing: -.01em;
  transition: opacity .2s, transform .1s;
}
.btn-login:hover { opacity: .9; }
.btn-login:active { transform: scale(.99); }

/* Chat error bubble + retry */
.msg-error {
  border: 1px solid var(--coral) !important;
  color: var(--coral) !important;
  background: rgba(255, 80, 80, .06) !important;
}
.chat-retry-btn {
  display: inline-block; margin-top: 7px;
  background: none; border: 1px solid var(--coral);
  color: var(--coral); border-radius: 8px;
  padding: 3px 12px; font-size: .76rem; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.chat-retry-btn:hover { background: rgba(255, 80, 80, .12); }

/* Ghost back / link button used in auth sub-flows */
.auth-back-btn {
  background: none; border: none; cursor: pointer;
  color: var(--teal); font-size: 0.85rem; padding: 4px 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; transition: opacity .15s;
}
.auth-back-btn:hover { opacity: .75; }

/* Footer note */
.login-note {
  text-align: center; font-size: .8rem; color: var(--text4);
  margin-top: 1.1rem; line-height: 1.5;
}
.auth-or {
  display:flex; align-items:center; gap:10px; margin:16px 0 12px;
  color:var(--text4); font-size:.8rem;
}
.auth-or::before, .auth-or::after {
  content:''; flex:1; height:1px; background:var(--border);
}
.btn-google {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:11px; border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--bg); color:var(--fg); font-family:var(--font); font-size:.92rem;
  font-weight:600; cursor:pointer; text-decoration:none; transition:background .15s;
}
.btn-google:hover { background:var(--bg2); }

/* Pricing cards */
.pricing-card {
  border:1.5px solid var(--border); border-radius:12px; padding:20px 16px 16px;
  display:flex; flex-direction:column; gap:10px; background:var(--bg2);
  transition:border-color .15s, box-shadow .15s;
}
.pricing-card:hover { border-color:var(--teal); box-shadow:0 0 0 3px var(--teal2); }
.pricing-card.featured { border-color:var(--teal); background:var(--teal2); }
.pricing-name  { font-size:.78rem; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.06em; }
.pricing-price { font-size:1.5rem; font-weight:800; color:var(--fg); line-height:1; }
.pricing-price span { font-size:.76rem; font-weight:400; color:var(--muted); }
.pricing-perks { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; }
.pricing-perks li { font-size:.78rem; color:var(--text3); display:flex; gap:6px; align-items:center; }
.pricing-perks li::before { content:'✓'; color:var(--teal); font-weight:700; flex-shrink:0; }
.pricing-btn {
  margin-top:auto; padding:9px; background:var(--teal); color:#fff;
  border:none; border-radius:8px; font-family:var(--font); font-size:.82rem;
  font-weight:700; cursor:pointer; transition:opacity .15s;
}
.pricing-btn:hover { opacity:.88; }
.pricing-btn.free-btn { background:var(--bg3); color:var(--fg); }

/* Dark mode adjustments */
[data-theme="dark"] .login-left {
  background: linear-gradient(145deg, #042e24 0%, #085041 55%, #0a6b55 100%);
}

/* Mobile */
@media (max-width: 768px) {
  #login-screen { flex-direction: column; }
  .login-left   { display: none; }
  .login-right  { width: 100%; padding: 2rem 1.25rem; }
  .lc-brand-mob { display: flex; }
  .login-card h1 { font-size: 1.65rem; }
}

/* ── PROFILE DROPDOWN ──────────────────────────────────────── */
.profile-menu   { position:relative; }
.profile-trigger {
  display:flex; align-items:center; gap:7px;
  background:transparent; border:none; cursor:pointer;
  padding:0;
}
.profile-trigger .pa {
  width:32px; height:32px; border-radius:50%;
  background:var(--purple);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff;
  overflow:hidden;
}
.profile-trigger .pn { font-size:13px; font-weight:600; color:var(--text1); }
.profile-trigger .pa-arrow { font-size:10px; color:var(--text4); }

.profile-dropdown {
  display:none; position:absolute; right:0; top:42px;
  width:220px; background:var(--bg2);
  border:1px solid var(--border); border-radius:var(--radius2);
  box-shadow:var(--shadow2); z-index:200;
  overflow:hidden;
}
.profile-dropdown.open { display:block; animation:fadeUp .15s ease; }
.profile-trigger.open + .profile-dropdown { display:block; }

.pd-header { padding:14px 12px; border-bottom:1px solid var(--border); }
.pd-name { font-size:14px; font-weight:700; color:var(--text1); }
.pd-matric { font-size:12px; color:var(--text3); margin-top:2px; }

.pd-item {
  display:flex; align-items:center; gap:9px;
  width:100%; padding:9px 14px; background:none; border:none;
  font-size:13px; color:var(--text2); cursor:pointer;
  transition:var(--transition); text-align:left;
}
.pd-item:hover { background:var(--bg3); }
.pd-item.danger { color:var(--red3); }
.pd-item.danger:hover { background:var(--red2); }
.pd-icon { font-size:15px; }

.pd-divider { height:1px; background:var(--border); margin:4px 0; }

.pd-toggle {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px; cursor:pointer; transition:var(--transition);
}
.pd-toggle:hover { background:var(--bg3); }
.pd-toggle-left { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text2); }

.toggle-sw {
  width:32px; height:18px; border-radius:9px;
  background:var(--border); position:relative;
  transition:background .2s;
}
.toggle-sw::after {
  content:''; position:absolute;
  width:14px; height:14px; border-radius:50%;
  background:#fff; top:2px; left:2px;
  transition:left .2s; box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.toggle-sw.on { background:var(--teal); }
.toggle-sw.on::after { left:16px; }

/* ── CHAT PANEL ────────────────────────────────────────────── */
#panel-chat {
  display:none; flex-direction:column;
  height:100%; overflow:hidden;
}
#panel-chat.active { display:flex; }

/* ── CHAT PANEL ─────────────────────────────────────────────── */
/* ── CHAT PANEL HEADER ──────────────────────────────────────── */
.chat-header {
  display:flex; align-items:center; gap:12px;
  padding:14px 20px 12px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  flex-shrink:0;
}
.chat-header-av {
  width:40px; height:40px; border-radius:14px; flex-shrink:0;
  background: linear-gradient(135deg, var(--teal), var(--accent2));
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--glow-teal);
  position:relative;
}
.chat-header-av::after {
  content:''; position:absolute; inset:-1px; border-radius:15px;
  background: linear-gradient(135deg, var(--teal), var(--accent2));
  z-index:-1; filter:blur(6px); opacity:.4;
}
.chat-header-av img { width:22px; height:22px; object-fit:contain; filter:brightness(0) invert(1); }
.chat-header-info { flex:1; min-width:0; }
.chat-header-name {
  font-family:var(--font); font-weight:800; font-size:.92rem;
  color:var(--text1); letter-spacing:-.02em;
}
.chat-header-status {
  font-size:.72rem; color:var(--muted,#888); margin-top:1px;
  display:flex; align-items:center; gap:5px;
}
.chat-status-dot {
  width:7px; height:7px; border-radius:50%;
  background:#22c55e; flex-shrink:0;
  box-shadow:0 0 6px #22c55e88;
  animation:statusPulse 2.5s ease-in-out infinite;
}
.chat-status-dot.thinking {
  background:var(--accent,#0D7A5F);
  box-shadow:0 0 6px rgba(13,122,95,.6);
  animation:statusPulse .9s ease-in-out infinite;
}
@keyframes statusPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.55; transform:scale(.85); }
}
.chat-header-actions { display:flex; gap:6px; }
.chat-hdr-btn {
  width:32px; height:32px; border-radius:9px;
  border:1px solid var(--border); background:var(--bg2);
  color:var(--text3); font-size:.85rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
}
.chat-hdr-btn:hover { border-color:var(--teal); color:var(--teal); background:var(--teal2); }

/* ── MESSAGES AREA ──────────────────────────────────────────── */
.chat-msgs {
  flex: 1; overflow-y: auto;
  /* Horizontal padding centres messages within --chat-max */
  padding: 24px max(20px, calc((100% - var(--chat-max)) / 2)) 16px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg);
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
[data-theme="dark"] .chat-msgs {
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(15,219,173,.04), transparent);
}
.chat-msgs::-webkit-scrollbar { width: 3px; }
.chat-msgs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── MESSAGE ROWS ───────────────────────────────────────────── */
.msg {
  display: flex; align-items: flex-end; gap: 10px;
  max-width: 84%; animation: msgSlideIn .22s cubic-bezier(.4,0,.2,1);
}
.msg.user   { align-self: flex-end;  flex-direction: row-reverse; }
.msg.sivarr { align-self: flex-start; }

@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Avatar */
.msg-av {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: .65rem;
  margin-bottom: 2px; letter-spacing: .02em;
}
.msg.sivarr .msg-av {
  background: var(--ai-grad);
  color: #fff; box-shadow: var(--ai-glow);
}
.msg.user .msg-av {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
}

/* Bubble wrapper */
.msg-inner { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg.user   .msg-inner { align-items: flex-end; }
.msg.sivarr .msg-inner { align-items: flex-start; }

/* Bubbles */
.msg-bub {
  padding: 12px 16px; border-radius: 18px;
  font-size: .9rem; line-height: 1.68; word-break: break-word;
  position: relative; transition: box-shadow .2s;
}

/* AI bubble — subtle intelligence tint */
.msg.sivarr .msg-bub {
  background: var(--bg2); color: var(--text1);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow);
}
[data-theme="dark"] .msg.sivarr .msg-bub {
  background: rgba(28,28,28,.97);
  border-color: rgba(15,219,173,.12);
  box-shadow: 0 2px 12px rgba(0,0,0,.4), 0 0 0 1px rgba(15,219,173,.06);
}

/* User bubble — brand gradient */
.msg.user .msg-bub {
  background: var(--ai-grad);
  color: #fff; border-bottom-right-radius: 4px;
  box-shadow: var(--glow-teal);
}
.msg-bub.md-body { font-size: .9rem; }

/* Action buttons (hover only) */
.msg-actions {
  display:flex; gap:4px; flex-wrap:wrap;
  opacity:0; transition:opacity .18s; height:0; overflow:hidden;
  pointer-events:none;
}
.msg:hover .msg-actions,
.msg-actions:focus-within {
  opacity:1; height:auto; pointer-events:auto;
}
.action-btn {
  font-size:.7rem; padding:3px 9px; border-radius:6px;
  border:1px solid var(--border); background:var(--bg2);
  color:var(--text3); font-family:var(--font); cursor:pointer;
  transition:var(--transition); font-weight:600;
}
.action-btn:hover { border-color:var(--teal); color:var(--teal); background:var(--teal2); }

/* Suggestion pills */
.chat-suggestions {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
  opacity:0; animation:fadeUp .3s .1s forwards;
}
.chat-sug-pill {
  font-size:.76rem; padding:5px 12px; border-radius:20px;
  border:1px solid var(--border); background:var(--surface);
  color:var(--text2); font-family:var(--font-body); cursor:pointer;
  transition:var(--transition); line-height:1.3; text-align:left;
}
.chat-sug-pill:hover { border-color:var(--teal); color:var(--teal); background:var(--teal2); }

/* Error bubble */
.msg-bub.msg-error { border-color:var(--coral); }

/* Day divider */
.chat-day-divider {
  display:flex; align-items:center; gap:10px;
  color:var(--text4); font-size:.72rem; margin:8px 0;
  user-select:none;
}
.chat-day-divider::before,
.chat-day-divider::after {
  content:''; flex:1; height:1px; background:var(--border);
}

/* Uncertain tag */
.uncertain {
  font-size:.72rem; color:var(--amber,#f59e0b);
  margin-top:4px; display:flex; align-items:center; gap:4px;
}

/* ── TYPING INDICATOR ───────────────────────────────────────── */
.typing {
  display:flex; align-items:center; gap:5px;
  padding:13px 16px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:18px; border-bottom-left-radius:5px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.typing span {
  width:7px; height:7px; border-radius:50%;
  background:linear-gradient(135deg,#0D7A5F,#534AB7);
  display:inline-block;
  animation:typingBounce 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay:.18s; }
.typing span:nth-child(3) { animation-delay:.36s; }
@keyframes typingBounce {
  0%,80%,100% { transform:translateY(0) scale(1); opacity:.5; }
  40%          { transform:translateY(-7px) scale(1.1); opacity:1; }
}

/* ── CHAT WELCOME SCREEN ────────────────────────────────────── */
/* ── CHAT WELCOME SCREEN ─────────────────────────────────────── */
#chat-welcome {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100%; padding: 2.5rem 1.5rem 1rem;
  text-align: center; animation: fadeUp .45s cubic-bezier(.4,0,.2,1);
}

/* Glowing AI orb */
.chat-welcome-orb {
  width: 92px; height: 92px; border-radius: 26px;
  background: var(--ai-grad);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.75rem; position: relative;
  box-shadow: var(--ai-glow), 0 0 0 1px rgba(255,255,255,.07);
  animation: orbPulse 3.5s ease-in-out infinite;
}
@keyframes orbPulse {
  0%,100% { box-shadow: var(--ai-glow), 0 0 0 1px rgba(255,255,255,.06); }
  50%     { box-shadow: 0 0 56px rgba(var(--teal-rgb,13,122,95),.45), 0 0 20px rgba(83,74,183,.3), 0 0 0 1px rgba(255,255,255,.1); }
}
.chat-welcome-orb::after {
  content: ''; position: absolute; inset: -6px; border-radius: 32px;
  background: var(--ai-grad); opacity: .2; filter: blur(16px); z-index: -1;
  animation: orbPulse 3.5s ease-in-out infinite;
}
.chat-welcome-orb img { width: 50px; height: 50px; object-fit: contain; filter: brightness(0) invert(1); }

/* Greeting */
.chat-welcome-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900; letter-spacing: -.04em;
  color: var(--text1); margin-bottom: .4rem; line-height: 1.1;
}
.chat-welcome-heading .name-teal {
  background: var(--ai-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.chat-welcome-sub {
  font-size: .95rem; color: var(--text3); margin-bottom: 2.4rem; line-height: 1.6;
}
.chat-welcome-hint {
  font-size: .74rem; color: var(--text4); margin-top: 1.6rem;
  display: flex; align-items: center; gap: 6px;
}
.chat-welcome-hint::before { content: '✦'; color: var(--teal); font-size: .6rem; }

/* 2×2 prompt cards — colour-coded per action */
.chat-prompt-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; max-width: 520px; width: 100%;
}
.chat-prompt-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 16px 15px;
  text-align: left; cursor: pointer;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--font); position: relative; overflow: hidden;
}
.chat-prompt-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: var(--cpc-grad, linear-gradient(135deg,var(--teal2),transparent));
  transition: opacity .2s;
}
.chat-prompt-card:hover { transform: translateY(-2px); box-shadow: var(--shadow2); }
.chat-prompt-card:hover { border-color: var(--cpc-color, var(--teal)); }
.chat-prompt-card:hover::before { opacity: 1; }
[data-theme="dark"] .chat-prompt-card { background: rgba(255,255,255,.03); }
[data-theme="dark"] .chat-prompt-card:hover { background: rgba(255,255,255,.06); }

.cpc-icon-wrap {
  width: 32px; height: 32px; border-radius: 9px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; background: var(--cpc-bg, var(--teal2)); color: var(--cpc-color, var(--teal));
  transition: transform .2s;
  position: relative;
}
.chat-prompt-card:hover .cpc-icon-wrap { transform: scale(1.08); }
.cpc-title { font-size: .86rem; font-weight: 700; color: var(--text1); line-height: 1.2; position: relative; }
.cpc-sub   { font-size: .74rem; color: var(--text3); line-height: 1.4; position: relative; }

/* ── CHAT BAR ───────────────────────────────────────────────── */
.chat-bar {
  padding: 10px 14px max(16px, env(safe-area-inset-bottom, 16px));
  margin: 0 auto 12px;
  width: calc(100% - 24px);
  max-width: var(--chat-max);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg2);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.03) inset;
  transition: border-color .2s, box-shadow .2s;
}
.chat-bar:focus-within {
  border-color:rgba(13,122,95,.4);
  box-shadow:0 4px 32px rgba(13,122,95,.12),
             0 0 0 1px rgba(13,122,95,.15) inset;
}

/* Pill action row */
.chat-action-pills {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.chat-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:20px;
  border:1px solid var(--border); background:var(--bg);
  color:var(--text3); font-family:var(--font);
  font-size:.76rem; font-weight:600; cursor:pointer;
  transition:all .18s;
}
.chat-pill i { font-size:.82rem; }
.chat-pill:hover { border-color:var(--teal); color:var(--teal); background:var(--teal2); transform:translateY(-1px); }
.chat-msg-counter {
  margin-left:auto; font-size:.73rem; color:var(--text4); white-space:nowrap;
}

/* Input row */
.chat-input-row {
  display:flex; align-items:flex-end; gap:8px;
}
.chat-input {
  flex:1; background:transparent; border:none;
  padding:6px 4px;
  color:var(--text1); font-size:.9rem; resize:none;
  font-family:var(--font); outline:none; line-height:1.55;
  min-height:36px;
}
.chat-input::placeholder { color:var(--text4); }
.chat-icon-btn {
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg3);
  color:var(--text3); font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:all .18s;
}
.chat-icon-btn:hover { border-color:var(--teal); color:var(--teal); transform:scale(1.05); }
.chat-icon-btn.active { background:var(--coral); border-color:var(--coral); color:#fff; }
.chat-send-btn {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,#0D7A5F,#534AB7);
  color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:all .2s;
  font-size:.95rem;
  box-shadow:0 2px 8px rgba(13,122,95,.3);
}
.chat-send-btn:hover { transform:scale(1.08); box-shadow:0 4px 16px rgba(13,122,95,.4); }
.chat-send-btn:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

/* Keep old .send-btn alias */
.send-btn { display:none; }

/* ── CHAT WELCOME SCREEN ────────────────────────────────────── */
#chat-welcome {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  min-height:100%; padding:2.5rem 1.5rem;
  text-align:center; animation:fadeUp .45s ease;
}

.chat-welcome-orb {
  width:80px; height:80px; border-radius:20px;
  background:linear-gradient(145deg,#1e293b,#0f172a);
  border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.6rem;
  box-shadow:0 8px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04);
}
[data-theme="dark"] .chat-welcome-orb {
  background:linear-gradient(145deg,#1e2a3a,#0d1520);
}
.chat-welcome-orb img { width:52px; height:52px; object-fit:contain; }

.chat-welcome-heading {
  font-size:1.9rem; font-weight:800; letter-spacing:-.04em;
  color:var(--text1); margin-bottom:.35rem; line-height:1.1;
}
.chat-welcome-sub {
  font-size:.95rem; color:var(--text3); margin-bottom:2rem;
}
.chat-welcome-hint {
  font-size:.75rem; color:var(--text4); margin-top:1.5rem;
}

/* 2×2 prompt card grid */
.chat-prompt-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; max-width:520px; width:100%;
}
.chat-prompt-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:14px; padding:16px 16px 14px;
  text-align:left; cursor:pointer;
  transition:var(--transition); display:flex; flex-direction:column; gap:4px;
  font-family:var(--font);
}
.chat-prompt-card:hover {
  border-color:var(--teal); background:var(--teal2);
  transform:translateY(-1px); box-shadow:var(--shadow2);
}
[data-theme="dark"] .chat-prompt-card:hover { background:var(--bg3); }
.cpc-icon {
  font-size:1rem; color:var(--text3); margin-bottom:4px;
}
.chat-prompt-card:hover .cpc-icon { color:var(--teal4); }
.cpc-title {
  font-size:.88rem; font-weight:700; color:var(--text1); line-height:1.2;
}
.cpc-sub {
  font-size:.76rem; color:var(--text3); line-height:1.4;
}

/* ── CHAT BAR ───────────────────────────────────────────────── */
.chat-bar {
  padding: 10px 16px max(20px, env(safe-area-inset-bottom, 20px));
  margin: 0 auto 32px;
  width: calc(100% - 48px);
  max-width: var(--chat-max);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg2);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,.13);
}

/* Pill action row */
.chat-action-pills {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.chat-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:20px;
  border:1px solid var(--border); background:var(--bg);
  color:var(--text3); font-family:var(--font);
  font-size:.78rem; font-weight:600; cursor:pointer;
  transition:var(--transition);
}
.chat-pill i { font-size:.85rem; }
.chat-pill:hover { border-color:var(--teal); color:var(--teal4); background:var(--teal2); }
.chat-msg-counter {
  margin-left:auto; font-size:.74rem; color:var(--text4); white-space:nowrap;
}

/* Input row */
.chat-input-row {
  display:flex; align-items:flex-end; gap:8px;
}
.chat-input {
  flex:1; background:var(--bg); border:1px solid var(--border);
  border-radius:12px; padding:10px 14px;
  color:var(--text1); font-size:.9rem; resize:none;
  font-family:var(--font); outline:none; line-height:1.55;
  transition:var(--transition); min-height:52px;
}
.chat-input:focus { border-color:var(--teal); }
.chat-input::placeholder { color:var(--text4); }
.chat-icon-btn {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--bg);
  color:var(--text3); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:var(--transition);
}
.chat-icon-btn:hover { border-color:var(--teal); color:var(--teal4); }
.chat-icon-btn.active { background:var(--coral); border-color:var(--coral); color:#fff; }
.chat-send-btn {
  width:38px; height:38px; border-radius:50%;
  background:var(--teal); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:var(--transition);
  font-size:1rem;
}
.chat-send-btn:hover { background:var(--teal4); transform:scale(1.05); }
.chat-send-btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }

/* Keep old .send-btn alias so existing JS ($('sb').disabled) still works */
.send-btn { display:none; }

/* ── QUIZ PANEL ────────────────────────────────────────────── */
.quiz-wrap { flex:1; overflow-y:auto; padding:24px; }

.quiz-start-card {
  max-width:480px; margin:0 auto; padding:2rem;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius3); text-align:center;
  box-shadow:var(--shadow2);
}
.quiz-start-card h2 {
  font-size:1.25rem; font-weight:800; color:var(--text1);
  margin-bottom:.75rem;
}

.quiz-card {
  max-width:600px; margin:0 auto;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius3); padding:1.5rem;
  box-shadow:var(--shadow2);
}

.quiz-q-text {
  font-size:1.05rem; font-weight:700; color:var(--text1);
  margin-bottom:1.25rem; line-height:1.5;
}

.quiz-opt {
  display:block; width:100%; padding:11px 16px;
  background:var(--bg3); border:1.5px solid var(--border);
  border-radius:var(--radius); text-align:left;
  font-size:.9rem; color:var(--text2); cursor:pointer;
  margin-bottom:.5rem; transition:var(--transition);
  font-family:var(--font);
}
.quiz-opt:hover { border-color:var(--teal); background:var(--teal2); color:var(--teal4); }
.quiz-opt.correct { border-color:var(--green3); background:var(--green2); color:var(--green); }
.quiz-opt.wrong   { border-color:var(--red3);   background:var(--red2);   color:var(--red); }

.quiz-meta { font-size:.78rem; color:var(--text4); }
.quiz-score { font-size:.88rem; color:var(--text3); font-weight:600; }

/* ── STATS / PROGRESS PANEL ────────────────────────────────── */
.stats-wrap { flex:1; overflow-y:auto; padding:24px; }

.stat-block {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:16px;
  margin-bottom:12px;
}

.stats-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;
}
.stat-card {
  background:var(--bg2); border:1px solid var(--border);
  border-top:3px solid var(--sc, var(--accent));
  border-radius:var(--radius2); padding:12px 14px;
  transition:var(--transition);
}
.stat-card:hover { box-shadow:var(--shadow); }
.sc-label {
  font-size:.82rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;
}
.sc-val {
  font-size:1.7rem; font-weight:800; font-family:var(--font);
  line-height:1; letter-spacing:-.03em;
}

/* ── NOTES PANEL ───────────────────────────────────────────── */
.note-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:13px 15px;
  cursor:pointer; transition:var(--transition); margin-bottom:8px;
}
.note-card:hover { box-shadow:var(--shadow); border-color:var(--border2); }
.note-tag {
  display:inline-block;
  background:var(--teal2); color:var(--teal4);
  border-radius:20px; padding:2px 9px;
  font-size:12px; font-weight:600; margin-bottom:6px;
}
.note-text { font-size:16px; color:var(--text2); line-height:1.65; }
.note-date { font-size:14px; color:var(--text4); margin-top:6px; }

.note-tag-pill {
  display:inline-flex; align-items:center;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:20px; padding:3px 10px;
  font-size:13px; color:var(--text3); cursor:pointer;
  transition:var(--transition); white-space:nowrap;
}
.note-tag-pill:hover, .note-tag-pill.active {
  background:var(--teal2); border-color:var(--teal);
  color:var(--teal4);
}

/* ── FLUX / TASKS ──────────────────────────────────────────── */
.sh-col {
  flex-shrink:0; width:220px;
  display:flex; flex-direction:column;
}
.sh-col-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 4px; margin-bottom:8px;
}
.sh-col-title { font-size:14px; font-weight:600; color:var(--text2); }
.sh-col-count {
  font-size:13px; color:var(--text4);
  background:var(--bg3); border-radius:20px; padding:1px 7px;
}
.sh-col-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

.sh-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px;
  margin-bottom:8px; cursor:pointer; transition:var(--transition);
}
.sh-card:hover { border-color:var(--teal); box-shadow:var(--shadow); }
.sh-card-title { font-size:14px; color:var(--text1); margin-bottom:6px; font-weight:500; }

.sh-col-body {
  flex:1; overflow-y:auto; min-height:80px;
  background:var(--bg3); border-radius:var(--radius);
  padding:4px; border:1px dashed var(--border2);
}

.sh-col-add {
  width:100%; padding:7px; border:none;
  background:none; color:var(--text4);
  font-size:14px; cursor:pointer;
  transition:var(--transition); font-family:var(--font);
  border-radius:var(--radius); margin-top:4px;
}
.sh-col-add:hover { background:var(--bg3); color:var(--teal); }

.sh-th {
  padding:8px 12px; font-size:13px; font-weight:600;
  color:var(--text4); border-bottom:1px solid var(--border);
  background:var(--bg2); white-space:nowrap;
  text-transform:uppercase; letter-spacing:.05em;
}
.sh-td {
  padding:8px 12px; font-size:14px; color:var(--text2);
  border-bottom:1px solid var(--border); vertical-align:middle;
}

.sh-view-btn {
  padding:5px 11px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg2);
  color:var(--text3); font-size:13px; font-weight:600;
  cursor:pointer; transition:var(--transition); font-family:var(--font);
}
.sh-view-btn:hover, .sh-view-btn.active {
  background:var(--teal2); border-color:var(--teal); color:var(--teal4);
}

.sh-add-task-btn {
  padding:5px 12px; background:var(--teal); color:#fff;
  border:none; border-radius:var(--radius);
  font-size:13px; font-weight:700; cursor:pointer;
  font-family:var(--font); transition:opacity .2s;
}
.sh-add-task-btn:hover { opacity:.88; }

.sh-filter-opt {
  display:flex; align-items:center; gap:7px; padding:3px 0;
  font-size:.82rem; cursor:pointer; color:var(--text2);
}
.sh-filter-opt input { accent-color:var(--teal); cursor:pointer; }

.sh-ai-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px;
}
.sh-ai-title { font-size:13px; font-weight:700; color:var(--text2); margin-bottom:6px; }

.sh-input {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:7px 10px;
  color:var(--text1); font-size:.82rem; outline:none;
  transition:var(--transition); font-family:var(--font);
}
.sh-input:focus { border-color:var(--teal); background:var(--bg2); }
.sh-input::placeholder { color:var(--text4); }

.sh-add-btn {
  padding:7px 12px; background:var(--teal); color:#fff;
  border:none; border-radius:var(--radius);
  font-size:.78rem; font-weight:700; cursor:pointer;
  font-family:var(--font); transition:opacity .2s;
}
.sh-add-btn:hover { opacity:.88; }

.sh-field-group { margin-bottom:.875rem; }
.sh-field-label {
  display:block; font-size:.72rem; font-weight:600;
  color:var(--text4); margin-bottom:4px;
  text-transform:uppercase; letter-spacing:.05em;
}

/* ── STUDY DECK (Lab) ──────────────────────────────────────── */
.lab-tab {
  padding:5px 12px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg2);
  color:var(--text3); font-size:11px; font-weight:600;
  cursor:pointer; transition:var(--transition); font-family:var(--font);
}
.lab-tab:hover, .lab-tab.active {
  background:var(--teal2); border-color:var(--teal); color:var(--teal4);
}
.lab-content {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:14px;
  font-size:.87rem; color:var(--text2); line-height:1.7;
  white-space:pre-wrap;
}

/* ── STUDY PLAN ────────────────────────────────────────────── */
.sp-hrs-btn {
  padding:6px 12px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg2);
  color:var(--text3); font-size:.82rem; font-weight:600;
  cursor:pointer; transition:var(--transition); font-family:var(--font);
}
.sp-hrs-btn:hover, .sp-hrs-active {
  background:var(--teal2); border-color:var(--teal); color:var(--teal4);
}

/* ── CLASSES PANEL ─────────────────────────────────────────── */
.class-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:14px;
  cursor:pointer; transition:var(--transition); margin-bottom:8px;
}
.class-card:hover { box-shadow:var(--shadow); border-color:var(--border2); }

/* ── EMPTY STATE ───────────────────────────────────────────── */
/* ── EMPTY STATES ───────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 24px; text-align: center;
  animation: fadeUp .3s cubic-bezier(.4,0,.2,1);
}
.es-orb {
  width: 72px; height: 72px; border-radius: 20px;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
[data-theme="dark"] .es-orb {
  background: var(--bg3); border-color: var(--border2);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.es-icon { font-size: 2.5rem; margin-bottom: .75rem; opacity: .35; }
.es-title {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
  color: var(--text1); letter-spacing: -.02em; margin-bottom: 8px;
}
.es-text { font-size: .88rem; color: var(--text4); line-height: 1.6; max-width: 280px; }
.es-cta {
  margin-top: 20px; padding: 10px 22px;
  background: var(--teal); color: #fff; border: none; border-radius: 10px;
  font-size: .88rem; font-weight: 700; cursor: pointer; font-family: var(--font);
  transition: all .18s; box-shadow: 0 0 16px rgba(13,122,95,.25);
}
.es-cta:hover { opacity: .88; transform: translateY(-1px); }

/* ── THEME TRANSITION ───────────────────────────────────────── */
/* Smooth colour transition when toggling dark/light mode */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .15s ease,
    box-shadow .25s ease !important;
}

/* ── FEEDBACK ──────────────────────────────────────────────── */
/* ── NOTIFICATIONS ─────────────────────────────────────────── */
#notif-panel { animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* ── FEEDBACK ──────────────────────────────────────────────── */
.feedback-btn {
  display:flex; align-items:center; gap:7px;
  width:100%; padding:9px 12px; margin-top:8px;
  background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--text3); font-size:.8rem; font-weight:500; cursor:pointer;
  font-family:var(--font); transition:background .15s, color .15s;
}
.feedback-btn:hover { background:var(--surface2); color:var(--text); }
.fb-star {
  background:none; border:none; font-size:1.6rem; cursor:pointer;
  color:var(--border); line-height:1; padding:0; transition:color .1s;
}
.fb-star.active, .fb-star:hover { color:#f59e0b; }

/* ── ACTION BUTTONS ────────────────────────────────────────── */
.action-btn {
  padding:5px 12px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg2);
  color:var(--text3); font-size:.92rem; font-weight:600;
  cursor:pointer; transition:var(--transition); font-family:var(--font);
}
.action-btn:hover { border-color:var(--teal); color:var(--teal); background:var(--teal2); }

/* ── SETTINGS ──────────────────────────────────────────────── */
.st-section {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); margin-bottom:8px;
  overflow:hidden; transition:var(--transition);
}
.st-section-hd {
  display:flex; align-items:center; gap:10px;
  padding:13px 14px; cursor:pointer; user-select:none;
  transition:var(--transition);
}
.st-section-hd:hover { background:var(--bg3); }
.st-section-chevron {
  margin-left:auto; font-size:11px; color:var(--text4);
  transition:transform .2s; flex-shrink:0;
}
.st-section.open .st-section-chevron { transform:rotate(180deg); }
.st-section-icon {
  width:28px; height:28px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
.st-section-title { font-size:15px; font-weight:700; color:var(--text1); flex:1; }
.st-section-body {
  display:none; flex-direction:column; gap:10px;
  padding:0 14px 14px;
}
.st-section.open .st-section-body { display:flex; }

/* Settings action buttons */
.st-btn {
  display:flex; align-items:center; gap:8px;
  width:100%; padding:9px 14px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text2);
  font-family:var(--font); font-size:.82rem; font-weight:500;
  cursor:pointer; transition:var(--transition); text-align:left;
}
.st-btn:hover { background:var(--bg2); border-color:var(--border2); color:var(--text1); }
.st-btn.danger { color:var(--red3); }
.st-btn.danger:hover { background:var(--red2); border-color:var(--red3); }
.st-row {
  display:flex; align-items:center; justify-content:space-between;
  font-size:15px; color:var(--text2);
}
.st-label { font-size:13px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; }
.st-input {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:8px 11px;
  color:var(--text1); font-size:.88rem; outline:none;
  transition:var(--transition); font-family:var(--font);
}
.st-input:focus { border-color:var(--teal); background:var(--bg2); }
.st-toggle {
  width:36px; height:20px; border-radius:10px;
  background:var(--border2); position:relative;
  cursor:pointer; border:none; transition:background .2s;
}
.st-toggle::after {
  content:''; position:absolute;
  width:16px; height:16px; border-radius:50%;
  background:#fff; top:2px; left:2px;
  transition:left .2s; box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.st-toggle.on { background:var(--teal); }
.st-toggle.on::after { left:18px; }

/* Accent dots */
.st-accent-dot {
  width:24px; height:24px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:var(--transition);
}
.st-accent-dot.sel { border-color:var(--text1); transform:scale(1.1); }

/* ── MODAL ─────────────────────────────────────────────────── */
.modal-bg {
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.4); z-index:1000;
  align-items:center; justify-content:center;
  padding:1rem;
}
.modal-bg.open { display:flex; animation:fadeUp .15s ease; }
.modal-box {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius3); padding:1.5rem;
  width:100%; max-width:520px; max-height:90vh;
  overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.25rem;
}
.modal-title { font-size:1.15rem; font-weight:700; color:var(--text1); }
.modal-close {
  background:none; border:none; color:var(--text4);
  font-size:1.1rem; cursor:pointer; padding:4px;
  border-radius:var(--radius); transition:var(--transition);
}
.modal-close:hover { background:var(--bg3); color:var(--text1); }

/* ── TOAST ─────────────────────────────────────────────────── */
.toast {
  display: none;
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg2); color: var(--text1);
  border: 1px solid var(--border2);
  border-radius: 999px; padding: 11px 22px;
  font-size: .88rem; font-weight: 600; z-index: 9999;
  white-space: nowrap;
  box-shadow: var(--shadow3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.toast.show {
  display: block;
  animation: toastIn .3s cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"] .toast {
  background: rgba(28,28,28,.96);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

/* ── COMMAND PALETTE ───────────────────────────────────────── */
#cmd-bg {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:5000;
  align-items:flex-start; justify-content:center;
  padding-top:15vh;
}
#cmd-bg.open { display:flex; animation:fadeUp .15s ease; }
.cmd-box, #cmd-box {
  width:100%; max-width:520px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 24px 64px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden;
}
#cmd-input {
  width:100%; padding:14px 18px;
  background:transparent; border:none; border-bottom:1px solid var(--border);
  font-size:1rem; color:var(--text1); outline:none; font-family:var(--font);
}
#cmd-input::placeholder { color:var(--text4); }
#cmd-results { max-height:360px; overflow-y:auto; padding:4px 0; }
.cmd-item {
  display:flex; align-items:center; gap:12px;
  padding:9px 18px; cursor:pointer; transition:var(--transition);
  width:100%; background:transparent; border:none;
  text-align:left; color:var(--text1); font-family:var(--font);
  border-radius:0;
}
.cmd-item:hover, .cmd-item.focused { background:var(--bg3); }
.cmd-icon { font-size:16px; width:22px; text-align:center; flex-shrink:0; }
.cmd-item-icon {
  font-size:15px; width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg3); border-radius:8px;
  border:1px solid var(--border);
}
.cmd-item-label { font-size:.9rem; font-weight:500; color:var(--text1); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmd-item-tag {
  font-size:.68rem; font-weight:600; color:var(--text3);
  background:var(--bg3); border:1px solid var(--border);
  padding:2px 9px; border-radius:20px; flex-shrink:0;
}
.cmd-label { font-size:15px; font-weight:600; color:var(--text1); }
.cmd-tag { font-size:13px; color:var(--text4); margin-left:auto; }
.cmd-empty { padding:28px 18px; text-align:center; font-size:.88rem; color:var(--text3); line-height:1.6; }
.cmd-section-label {
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text3); padding:10px 18px 4px;
}
[data-theme="dark"] .cmd-section-label { color: var(--text2); }
.cmd-input-wrap {
  display:flex; align-items:center;
  border-bottom:1px solid var(--border);
}
.cmd-hint {
  font-size:.72rem; color:var(--text4);
  background:var(--bg3); border:1px solid var(--border);
  border-radius:5px; padding:2px 8px; margin-right:14px;
  font-family:var(--font); flex-shrink:0;
}
/* ── Cmd palette footer — keyboard shortcut hints ───────────── */
.cmd-footer {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg3);
}
.cmd-footer-hint {
  display: flex; align-items: center; gap: 5px;
  font-size: .7rem; color: var(--text4);
}
.cmd-footer-hint kbd {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 4px; padding: 1px 6px;
  font-size: .7rem; font-family: var(--font); color: var(--text3);
  box-shadow: 0 1px 0 var(--border2);
}

/* ── ANNOUNCEMENT POPUP ────────────────────────────────────── */
#ann-popup {
  position:fixed; top:60px; left:50%; transform:translateX(-50%) translateY(-110%);
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:12px 16px;
  max-width:440px; width:90%; z-index:500;
  box-shadow:var(--shadow2); transition:transform .35s cubic-bezier(.4,0,.2,1);
}

/* ── R-CARDS (rich cards) ──────────────────────────────────── */
.r-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:14px;
}
.r-title { font-size:.92rem; font-weight:700; color:var(--text1); margin-bottom:.5rem; }

/* ── HOME PANEL ────────────────────────────────────────────── */
.home-grid {
  display:grid; grid-template-columns:2fr 1fr;
  gap:14px; margin-bottom:14px;
}

/* ── SNAV COMPAT ───────────────────────────────────────────── */
/* Kept for legacy JS calls */
.snav-item { display:none; }
.snav-section-btn { display:none; }
.nav-btn { display:none; }
.mn-btn { display:none; }
.tab-bar { display:none; }

/* ── VOICE BTN ─────────────────────────────────────────────── */
#voice-btn {
  width:36px; height:36px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg3);
  color:var(--text3); font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition); flex-shrink:0;
}
#voice-btn:hover { border-color:var(--teal); color:var(--teal); background:var(--teal2); }
#voice-btn.recording { background:var(--red2); border-color:var(--red3); color:var(--red3); }

/* ── STUDY GROUPS ──────────────────────────────────────────── */
.group-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:13px;
  cursor:pointer; transition:var(--transition); margin-bottom:8px;
}
.group-card:hover { box-shadow:var(--shadow); }

/* ── EXAM PANEL ────────────────────────────────────────────── */
.exam-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:14px;
  margin-bottom:10px; transition:var(--transition);
}
.exam-card:hover { box-shadow:var(--shadow); }

/* ── PROGRESS / ANALYTICS ──────────────────────────────────── */
.anl-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.anl-lbl { font-size:14px; color:var(--text3); width:72px; flex-shrink:0; text-align:right; }
.anl-track { flex:1; height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; }
.anl-fill  { height:100%; border-radius:4px; }
.anl-val   { font-size:14px; font-weight:600; color:var(--text1); width:32px; text-align:right; flex-shrink:0; }

/* Goal card */
.goal-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:16px;
  margin-bottom:10px; transition:var(--transition);
}
.goal-card:hover { box-shadow:var(--shadow); }
.goal-hd { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.goal-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.goal-name { font-size:16px; font-weight:600; color:var(--text1); flex:1; }
.goal-pct  { font-size:16px; font-weight:700; }
.goal-sub  { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.goal-stat { background:var(--bg3); border-radius:var(--radius); padding:8px; }
.gs-lbl { font-size:12px; color:var(--text4); margin-bottom:2px; }
.gs-val { font-size:16px; font-weight:700; color:var(--text1); }

/* ── GOALS PANEL (gl-* classes) ────────────────────────────── */
.gl-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin-bottom:16px;
}
.gl-stat {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; text-align:center;
}
.gl-stat-val {
  font-family:var(--font); font-size:1.3rem; font-weight:800;
  color:var(--text); line-height:1;
}
.gl-stat-lbl {
  font-size:.68rem; color:var(--muted); margin-top:3px;
  text-transform:uppercase; letter-spacing:.05em; font-weight:600;
}
.gl-stat.overdue .gl-stat-val  { color:#ef4444; }
.gl-stat.completed .gl-stat-val { color:#22c55e; }

.gl-filters { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.gl-filter-btn {
  padding:5px 14px; border-radius:20px; border:1px solid var(--border);
  background:var(--bg2); color:var(--muted); font-size:.75rem;
  font-weight:700; cursor:pointer; font-family:var(--font);
  transition:var(--transition);
}
.gl-filter-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.gl-filter-btn:hover:not(.active) { border-color:var(--accent); color:var(--accent); }

.gl-add-form {
  max-height:0; overflow:hidden;
  transition:max-height .35s ease, padding .35s ease;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:14px; margin-bottom:16px; padding:0 16px;
}
.gl-add-form.open { max-height:460px; padding:16px; }

.gl-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:14px; padding:16px; margin-bottom:10px;
  transition:var(--transition);
}
.gl-card:hover { box-shadow:var(--shadow); border-color:var(--border2); }
.gl-card.done { opacity:.72; }
.gl-card.done .gl-title { text-decoration:line-through; color:var(--muted); }

.gl-title {
  font-family:var(--font); font-size:.94rem; font-weight:800;
  color:var(--text); letter-spacing:-.01em; line-height:1.3;
}

.gl-prog-wrap {
  height:5px; background:var(--bg3); border-radius:3px;
  overflow:hidden; margin:10px 0 4px;
}
.gl-prog-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  transition:width .4s ease;
}
.gl-prog-fill.done { background:#22c55e; }

.gl-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.gl-action-btn {
  padding:4px 11px; border-radius:7px; border:1px solid var(--border);
  background:none; color:var(--text2); font-size:.75rem; font-weight:600;
  cursor:pointer; font-family:var(--font-body); transition:var(--transition);
  white-space:nowrap;
}
.gl-action-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent)08; }
.gl-action-btn.done-btn:hover  { border-color:#22c55e; color:#22c55e; background:#22c55e10; }
.gl-action-btn.del-btn:hover   { border-color:#ef4444; color:#ef4444; background:#ef444410; }
.gl-action-btn.siva-btn { color:var(--accent2); border-color:var(--accent2)50; }
.gl-action-btn.siva-btn:hover  { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent2)); }

.gl-edit-form {
  background:var(--bg3); border:1px solid var(--border); border-radius:10px;
  padding:12px; margin:8px 0; display:flex; flex-direction:column; gap:7px;
}
.gl-edit-title {
  font-size:.7rem; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em;
}
.gl-edit-input {
  width:100%; padding:7px 10px; border:1px solid var(--border);
  border-radius:8px; background:var(--bg2); color:var(--text);
  font-size:.82rem; font-family:inherit; outline:none;
  transition:border-color .15s; box-sizing:border-box;
}
.gl-edit-input:focus { border-color:var(--accent); }
.gl-edit-save {
  flex:1; background:var(--accent); color:#fff; border:none;
  border-radius:8px; padding:7px; font-family:var(--font);
  font-size:.8rem; font-weight:700; cursor:pointer;
}
.gl-edit-cancel {
  flex:1; background:none; border:1px solid var(--border);
  border-radius:8px; padding:7px; color:var(--muted);
  font-family:var(--font); font-size:.8rem; font-weight:700; cursor:pointer;
}
@media (max-width:600px) { .gl-stats { grid-template-columns:repeat(2,1fr); } }

/* ── CONTENT HUB ───────────────────────────────────────────── */
.ch-platform-btn {
  display:flex; align-items:center; gap:12px;
  width:100%; padding:10px 14px; background:var(--bg3);
  border:1px solid var(--border); border-radius:var(--radius);
  cursor:pointer; transition:var(--transition); margin-bottom:8px;
  font-family:var(--font);
}
.ch-platform-btn:hover { border-color:var(--teal); background:var(--teal2); }
.ch-platform-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}
.ch-connect-badge {
  margin-left:auto; background:var(--teal2); color:var(--teal4);
  border-radius:20px; padding:2px 10px;
  font-size:11px; font-weight:600;
}
.ch-tab {
  padding:5px 12px; border-radius:20px;
  border:1px solid var(--border); background:var(--bg2);
  color:var(--text3); font-size:11px; font-weight:600;
  cursor:pointer; transition:var(--transition); font-family:var(--font);
}
.ch-tab:hover, .ch-tab.active {
  background:var(--teal2); border-color:var(--teal); color:var(--teal4);
}
.ch-eng-bar {
  height:8px; background:var(--bg3); border-radius:4px; overflow:hidden;
}
.ch-eng-fill {
  height:100%; background:var(--teal); border-radius:4px; transition:width .4s;
}

/* ── SUGGEST / WEAK AREA ───────────────────────────────────── */
.suggest-txt { font-size:.82rem; color:var(--text3); margin-bottom:.875rem; }
.btn-suggest {
  background:var(--teal); color:#fff; border:none;
  border-radius:var(--radius); padding:9px 18px;
  font-size:.85rem; font-weight:700; cursor:pointer;
  font-family:var(--font); transition:opacity .2s;
}
.btn-suggest:hover { opacity:.88; }

/* ── STAT ROW (sidebar) ────────────────────────────────────── */
.stat-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:3px 0;
}
.stat-row .sl { font-size:13px; color:var(--text3); text-transform:none; padding:0; }
.stat-row .sv { font-size:14px; font-weight:700; color:var(--text1); }

/* ── POMODORO ──────────────────────────────────────────────── */
#timer-display {
  font-size:52px; font-weight:700; color:var(--teal);
  font-variant-numeric:tabular-nums; letter-spacing:-2px;
  margin-bottom:16px; text-align:center;
}

/* ── ASK NOTES ─────────────────────────────────────────────── */
.ask-notes-panel { flex:1; overflow-y:auto; padding:24px; }

/* ── GENERATE QUIZ / QUIZZES PANEL ────────────────────────── */
.quizzes-wrap { flex:1; overflow-y:auto; padding:24px; }

/* ── HOME PANEL ────────────────────────────────────────────── */
#panel-home .content { flex:1; overflow-y:auto; }

/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes orb-pulse {
  0%,100% { box-shadow:0 0 30px rgba(13,122,95,.2), 0 0 60px rgba(13,122,95,.08); }
  50%      { box-shadow:0 0 50px rgba(13,122,95,.35), 0 0 100px rgba(13,122,95,.15); }
}
@keyframes toastIn {
  from { opacity:0; transform:translateX(-50%) translateY(10px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ── HOME PANEL REDESIGN ───────────────────────────────────── */
.home-wrap { flex:1; overflow-y:auto; padding:24px; }

/* ── GETTING STARTED GUIDE SECTION ─────────────────────────── */
.gs-section {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:16px; padding:20px; margin-bottom:18px;
  animation:fadeUp .4s cubic-bezier(.4,0,.2,1);
}
.gs-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:18px; flex-wrap:wrap;
}
.gs-header-left { display:flex; align-items:flex-start; gap:12px; flex:1; min-width:0; }
.gs-badge {
  background:linear-gradient(135deg,var(--teal),var(--accent2));
  color:#fff; font-size:.65rem; font-weight:800; letter-spacing:.06em;
  padding:3px 8px; border-radius:20px; flex-shrink:0; margin-top:2px;
  text-transform:uppercase;
}
.gs-title {
  font-family:var(--font); font-weight:800; font-size:.95rem;
  color:var(--text1); letter-spacing:-.02em;
}
.gs-sub { font-size:.76rem; color:var(--muted); margin-top:3px; }

.gs-progress-wrap {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.gs-progress-bar {
  width:80px; height:5px; background:var(--bg3); border-radius:10px; overflow:hidden;
}
.gs-progress-fill {
  height:100%; background:linear-gradient(90deg,var(--teal),var(--accent2));
  border-radius:10px; transition:width .4s ease;
}
.gs-progress-label { font-size:.72rem; color:var(--muted); white-space:nowrap; }
.gs-dismiss {
  width:28px; height:28px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg3); color:var(--muted); font-size:.82rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:var(--transition);
}
.gs-dismiss:hover { border-color:var(--red3,#ef4444); color:var(--red3,#ef4444); background:rgba(239,68,68,.08); }

/* Video cards scroll row */
.gs-videos-wrap {
  overflow-x:auto; margin:0 -20px; padding:0 20px 6px;
  scrollbar-width:none;
}
.gs-videos-wrap::-webkit-scrollbar { display:none; }
.gs-videos {
  display:flex; gap:12px; padding-bottom:2px;
  width:max-content;
}
.gs-vid-card {
  width:170px; flex-shrink:0; cursor:pointer; transition:transform .2s;
}
.gs-vid-card:hover { transform:translateY(-2px); }
.gs-vid-card.done .gs-vid-thumb { opacity:.55; }
.gs-vid-card.done .gs-vid-done-badge { opacity:1; }
.gs-vid-card.done .gs-vid-title { color:var(--muted); text-decoration:line-through; }

.gs-vid-thumb {
  width:100%; aspect-ratio:16/9; border-radius:10px;
  background:var(--bg3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; margin-bottom:8px;
}
.gs-vid-placeholder {
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); width:100%; height:100%;
}
.gs-vid-play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); opacity:0; transition:opacity .18s;
  color:#fff; font-size:1.4rem;
}
.gs-vid-card:hover .gs-vid-play { opacity:1; }
.gs-vid-duration {
  position:absolute; bottom:6px; right:7px;
  background:rgba(0,0,0,.65); color:#fff; font-size:.65rem;
  font-weight:700; padding:2px 5px; border-radius:4px;
}
.gs-vid-done-badge {
  position:absolute; top:6px; right:6px;
  width:20px; height:20px; border-radius:50%;
  background:var(--teal); color:#fff; font-size:.7rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s;
}
.gs-vid-title {
  font-size:.8rem; font-weight:700; color:var(--text1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s;
}
.gs-vid-desc { font-size:.72rem; color:var(--muted); margin-top:2px; }

/* Quick tips row */
.gs-tips {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin-top:16px;
}
.gs-tip {
  display:flex; align-items:flex-start; gap:10px;
  background:var(--bg3); border-radius:10px; padding:10px 12px;
  border:1px solid var(--border);
}
.gs-tip-icon {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.gs-tip-title { font-size:.78rem; font-weight:700; color:var(--text1); }
.gs-tip-desc  { font-size:.7rem; color:var(--muted); margin-top:2px; line-height:1.4; }

@media (max-width:900px) {
  .gs-tips { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .gs-tips { grid-template-columns:1fr; }
  .gs-header { flex-direction:column; }
}

.siva-brief {
  background: linear-gradient(135deg, var(--teal) 0%, #1a5c8c 50%, var(--purple) 100%);
  border-radius: var(--radius3); padding: 20px 22px; margin-bottom: 18px;
  color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 8px 32px rgba(13,122,95,.25), 0 2px 8px rgba(83,74,183,.2);
}
[data-theme="dark"] .siva-brief {
  background: linear-gradient(135deg, #065242 0%, #0a1a30 50%, #1e1858 100%);
  border: 1px solid rgba(15,219,173,.15);
  box-shadow: 0 0 40px rgba(15,219,173,.12), 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.siva-brief::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 85% 15%, rgba(255,255,255,.14) 0%, transparent 60%);
  pointer-events: none;
}
.siva-brief::after {
  content: ''; position: absolute; bottom: -20px; right: -20px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  pointer-events: none;
}
.siva-brief-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; position: relative; }
.siva-brief-av {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);
}
.siva-brief-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.siva-brief-name {
  font-family: var(--font-display); font-size: .92rem; font-weight: 700;
  opacity: .95; letter-spacing: -.02em;
}
.siva-brief-badge {
  margin-left: auto; background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px; padding: 3px 11px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.siva-brief-msg {
  font-size: 1.05rem; line-height: 1.6; position: relative; opacity: .95; font-weight: 400;
}
.brief-pulse {
  display:inline-block;
  color:var(--text4);
  font-size:.85rem;
  animation: briefFade 1.4s ease-in-out infinite;
}
@keyframes briefFade {
  0%,100% { opacity:.4; }
  50%      { opacity:1; }
}

.siva-pills {
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;
}
.siva-pill {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:20px; padding:5px 12px;
  font-size:14px; color:var(--text2); cursor:pointer;
  transition:var(--transition); font-family:var(--font);
}
.siva-pill:hover { border-color:var(--teal); color:var(--teal); background:var(--teal2); }
.sp-add {
  background:var(--teal2); border-color:var(--teal); color:var(--teal4);
}

.h-stat-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; margin-bottom:18px;
}
.h-stat-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:18px;
  transition:var(--transition);
}
.h-stat-card:hover { box-shadow:var(--shadow); }
.h-stat-ic {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; margin-bottom:12px;
}
.h-stat-val { font-family:var(--font-display); font-size:1.9rem; font-weight:900; color:var(--text1); letter-spacing:-.04em; }
.h-stat-lbl { font-size:.88rem; color:var(--text3); margin-top:4px; }
.h-stat-chg { font-size:.84rem; font-weight:600; margin-top:5px; }
.chg-up { color:var(--green3); }
.chg-dn { color:var(--red3); }

.h2col { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.h2col-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:18px; overflow:hidden;
}
.h-card-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.h-card-title { font-family:var(--font-display); font-size:1rem; font-weight:800; color:var(--text1); letter-spacing:-.03em; }
.h-card-link {
  font-size:.86rem; color:var(--teal); font-weight:600;
  background:none; border:none; cursor:pointer; font-family:var(--font);
}

.priority-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--border);
}
.priority-item:last-child { border-bottom:none; }
.pr-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pr-text { font-size:1rem; color:var(--text2); flex:1; }
.pr-tag {
  font-size:.78rem; font-weight:600; border-radius:20px;
  padding:3px 9px; white-space:nowrap;
}

.sched-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:7px 0; border-bottom:1px solid var(--border);
}
.sched-item:last-child { border-bottom:none; }
.sched-time { font-size:.72rem; color:var(--text3); width:44px; flex-shrink:0; padding-top:1px; }
.sched-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.sched-info { flex:1; }
.sched-name { font-size:.82rem; color:var(--text1); font-weight:500; }
.sched-sub { font-size:.7rem; color:var(--text3); }

.habit-check-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--border);
}
.habit-check-row:last-child { border-bottom:none; }
.habit-cb {
  width:18px; height:18px; border-radius:5px;
  border:2px solid var(--border2); background:var(--bg);
  cursor:pointer; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; transition:var(--transition);
}
.habit-cb.done { background:var(--teal); border-color:var(--teal); color:#fff; }
.habit-cb.done::after { content:'✓'; font-size:.65rem; font-weight:700; }
.habit-name { font-size:.9rem; color:var(--text2); flex:1; font-weight:500; }
.habit-streak { font-size:.7rem; color:var(--amber3); font-weight:600; }

/* ── HABITS PANEL ──────────────────────────────────────────── */
.habits-wrap { flex:1; overflow-y:auto; padding:24px; }
.habit-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:14px; margin-bottom:10px;
  transition:var(--transition);
}
.habit-card:hover { box-shadow:var(--shadow); }
.habit-emoji { font-size:1.3rem; flex-shrink:0; }
.habit-info { flex:1; min-width:0; }
.habit-title { font-size:.9rem; font-weight:600; color:var(--text1); }
.habit-sub2 { font-size:.73rem; color:var(--text3); margin-top:2px; }
.habit-pct { font-size:.8rem; font-weight:700; color:var(--text1); }
/* habit card action buttons */
.hab-card-actions { display:flex; gap:2px; opacity:0; transition:opacity .15s; }
.habit-card:hover .hab-card-actions { opacity:1; }
.habit-action-btn {
  background:none; border:none; color:var(--muted); cursor:pointer;
  padding:4px 5px; border-radius:5px; font-size:.8rem; transition:var(--transition);
}
.habit-action-btn:hover { color:var(--accent); background:var(--teal2); }
/* 28-day heatmap grid */
.hab-heatmap-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-top:10px;
}
.hm-cell {
  aspect-ratio:1; border-radius:3px; background:var(--border);
  transition:background .15s; cursor:default;
}
.hm-cell.done { background:var(--teal); }
.new-habit-btn {
  width:100%; padding:11px; border-radius:var(--radius2);
  border:1.5px dashed var(--border2); background:transparent;
  color:var(--text3); font-family:var(--font); font-size:.82rem;
  cursor:pointer; transition:var(--transition); margin-top:4px;
}
.new-habit-btn:hover { border-color:var(--teal); color:var(--teal); background:var(--teal2); }

/* ── JOURNAL PANEL ─────────────────────────────────────────── */
.journal-wrap { flex:1; overflow-y:auto; padding:24px; }
.journal-prompt {
  background:linear-gradient(135deg,var(--purple2),var(--teal2));
  border:1px solid var(--purple);
  border-radius:var(--radius2); padding:14px 16px; margin-bottom:16px;
  font-size:.85rem; color:var(--text1); line-height:1.55;
}
.journal-prompt strong { color:var(--purple3); }
.journal-editor {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:14px; margin-bottom:16px;
}
.journal-editor textarea {
  width:100%; border:none; outliWhne:none; background:transparent;
  font-family:var(--font); font-size:.88rem; color:var(--text1);
  resize:none; line-height:1.7; min-height:120px;
}
.journal-editor textarea::placeholder { color:var(--text4); }
.journal-entry {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:13px 15px; margin-bottom:8px;
  cursor:pointer; transition:var(--transition);
}
.journal-entry:hover { box-shadow:var(--shadow); }
.je-date { font-size:.76rem; color:var(--text4); margin-bottom:5px; }
.je-text { font-size:.9rem; color:var(--text2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.je-mood { font-size:.75rem; margin-top:6px; }

/* ── CALENDAR PANEL ────────────────────────────────────────── */
.cal-wrap { flex:1; overflow-y:auto; padding:24px; }
.cal-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.cal-nav-btn {
  width:28px; height:28px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg2);
  color:var(--text2); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:13px;
  transition:var(--transition);
}
.cal-nav-btn:hover { background:var(--bg3); }
.cal-month { font-size:.95rem; font-weight:700; color:var(--text1); }
.cal-grid {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:3px; margin-bottom:16px;
}
.cal-dh {
  text-align:center; font-size:.68rem; font-weight:600;
  color:var(--text4); padding:4px 0; text-transform:uppercase;
}
.cal-cell {
  aspect-ratio:1; border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; cursor:pointer; position:relative;
  transition:var(--transition); padding:3px;
}
.cal-cell:hover { background:var(--bg3); }
.cal-num { font-size:.78rem; color:var(--text2); line-height:1; }
.cal-cell.today .cal-num { background:var(--teal); color:#fff; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.cal-cell.other-month .cal-num { color:var(--text4); }
.cal-cell.selected { background:var(--teal2); }
.cal-ev { width:4px; height:4px; border-radius:50%; background:var(--teal); margin-top:2px; }
.ev-list { margin-top:4px; }
.ev-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--border);
}
.ev-row:last-child { border-bottom:none; }
.ev-time { font-size:.72rem; color:var(--text3); width:44px; flex-shrink:0; }
.ev-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ev-info { flex:1; }
.ev-name { font-size:.83rem; color:var(--text1); font-weight:500; }
.ev-sub { font-size:.7rem; color:var(--text3); }

/* ── KANBAN ────────────────────────────────────────────────── */
.kanban { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; height:100%; }
.kb-col {
  flex-shrink:0; width:210px;
  background:var(--bg3); border-radius:var(--radius2);
  padding:10px; display:flex; flex-direction:column;
}
.kb-col-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.kb-col-title { font-size:.78rem; font-weight:700; color:var(--text2); }
.kb-col-count {
  font-size:.65rem; background:var(--bg2); border:1px solid var(--border);
  border-radius:20px; padding:1px 7px; color:var(--text4);
}
.kb-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px; margin-bottom:6px;
  cursor:grab; transition:var(--transition);
}
.kb-card:hover { box-shadow:var(--shadow); }
.kb-card-title { font-size:.8rem; color:var(--text1); font-weight:500; margin-bottom:5px; }
.kb-card-tag {
  font-size:.65rem; font-weight:600; border-radius:20px;
  padding:2px 7px; display:inline-block;
}
.kb-add {
  width:100%; padding:7px; background:none; border:none;
  color:var(--text4); font-size:.75rem; cursor:pointer;
  font-family:var(--font); border-radius:var(--radius);
  transition:var(--transition); margin-top:2px;
}
.kb-add:hover { background:var(--bg2); color:var(--teal); }

/* ── INBOX PANEL ───────────────────────────────────────────── */
.inbox-wrap { flex:1; overflow-y:auto; padding:24px; }
.inbox-section { margin-bottom:20px; }
.inbox-section-title {
  font-size:.7rem; font-weight:600; color:var(--text4);
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:8px;
}
.inbox-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; background:var(--bg2);
  border:1px solid var(--border); border-radius:var(--radius2);
  margin-bottom:6px; cursor:pointer; transition:var(--transition);
}
.inbox-item:hover { box-shadow:var(--shadow); }
.inbox-item.unread { border-left:3px solid var(--teal); }
.inbox-av {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#fff; font-weight:700; flex-shrink:0;
}
.inbox-body { flex:1; }
.inbox-sender { font-size:.82rem; font-weight:600; color:var(--text1); }
.inbox-preview { font-size:.78rem; color:var(--text3); margin-top:2px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.inbox-time { font-size:.7rem; color:var(--text4); flex-shrink:0; }

/* ── COMMUNITY PANEL ───────────────────────────────────────── */
.community-wrap { flex:1; overflow-y:auto; padding:24px; }
.feed-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:14px; margin-bottom:10px;
  cursor:pointer; transition:var(--transition);
}
.feed-card:hover { box-shadow:var(--shadow); }
.feed-hd { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.feed-av {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--teal),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#fff; font-weight:700; overflow:hidden;
}
.feed-name { font-size:.85rem; font-weight:600; color:var(--text1); }
.feed-time { font-size:.72rem; color:var(--text4); }
.feed-body { font-size:.83rem; color:var(--text2); line-height:1.6; margin-bottom:10px; }
.feed-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
.feed-tag {
  font-size:.68rem; font-weight:600; border-radius:20px; padding:2px 9px;
  background:var(--teal2); color:var(--teal4);
}
.feed-actions { display:flex; gap:10px; }
.feed-action-btn {
  display:flex; align-items:center; gap:5px;
  background:none; border:none; color:var(--text3);
  font-size:.78rem; cursor:pointer; font-family:var(--font);
  transition:var(--transition);
}
.feed-action-btn:hover { color:var(--teal); }
.feat-badge {
  font-size:.65rem; font-weight:700; border-radius:20px;
  padding:2px 8px; background:var(--amber2); color:var(--amber);
  border:1px solid var(--amber3);
}

/* ── LIBRARY PANEL ─────────────────────────────────────────── */
.library-wrap { flex:1; overflow-y:auto; padding:24px; }
.lib-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px; margin-bottom:16px;
}
.lib-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); padding:14px; cursor:pointer;
  transition:var(--transition); text-align:center;
}
.lib-card:hover { box-shadow:var(--shadow); border-color:var(--teal); }
.lib-logo {
  width:48px; height:48px; border-radius:12px; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
}
.lib-name { font-size:.82rem; font-weight:600; color:var(--text1); margin-bottom:4px; }
.lib-desc { font-size:.72rem; color:var(--text3); line-height:1.4; margin-bottom:10px; }
.lib-btn {
  display:inline-block; padding:5px 14px; border-radius:20px;
  background:var(--teal2); color:var(--teal4);
  border:1px solid var(--teal); font-size:.72rem; font-weight:600;
  cursor:pointer; font-family:var(--font); transition:var(--transition);
}
.lib-btn:hover { background:var(--teal); color:#fff; }

/* ── PROJECT ITEM ──────────────────────────────────────────── */
.proj-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:6px; cursor:pointer;
  transition:var(--transition);
}
.proj-item:hover { box-shadow:var(--shadow); }
.health-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.proj-name { font-size:.83rem; color:var(--text1); font-weight:500; flex:1; }

/* ── TEMPLATES (Template Library) ──────────────────────────── */
.tpl-scroll {
  flex:1; overflow-y:auto;
  padding:1.25rem max(24px, calc((100% - var(--panel-max)) / 2)) 60px;
}

.tpl-search-wrap {
  display:flex; align-items:center; gap:7px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:9px; padding:6px 11px; color:var(--text4);
}
.tpl-search-wrap i { font-size:15px; }
.tpl-search-wrap input {
  border:none; background:none; outline:none;
  font-family:var(--font); font-size:.82rem; color:var(--text1); width:180px;
}
.tpl-search-wrap input::placeholder { color:var(--text4); }

.tpl-lede { font-size:.82rem; color:var(--text3); margin-bottom:18px; }

.tpl-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.tpl-chip {
  padding:6px 14px; border-radius:20px; border:1px solid var(--border);
  background:var(--bg2); color:var(--text3); font-family:var(--font);
  font-size:.78rem; font-weight:600; cursor:pointer;
  transition:var(--transition); white-space:nowrap;
}
.tpl-chip:hover { background:var(--bg3); color:var(--text1); }
.tpl-chip.active { background:var(--teal2); color:var(--teal4); border-color:var(--teal); }

.tpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }

.tpl-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius2); overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; transition:var(--transition);
}
.tpl-card:hover { transform:translateY(-2px); border-color:var(--border2); box-shadow:var(--shadow); }
.tpl-card:hover .tpl-preview-overlay { opacity:1; }

.tpl-preview {
  height:150px; position:relative; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.tpl-preview > i { font-size:46px; color:#fff; opacity:.92; }
.tpl-preview--weekly { background:linear-gradient(145deg,#0D7A5F,#0a5f4a); }
.tpl-preview--daily  { background:linear-gradient(145deg,#534AB7,#3d3690); }
.tpl-preview--habit  { background:linear-gradient(145deg,#DC6803,#b35402); }
.tpl-preview--budget { background:linear-gradient(145deg,#0D7A5F,#534AB7); }

.tpl-preview-overlay {
  position:absolute; inset:0; background:rgba(8,8,17,.55);
  display:flex; align-items:center; justify-content:center; opacity:0;
  transition:var(--transition); backdrop-filter:blur(2px);
}
.tpl-preview-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; border-radius:8px; padding:8px 16px; font-size:.78rem; font-weight:700;
}

.tpl-card-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.tpl-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.tpl-name { font-size:.9rem; font-weight:700; color:var(--text1); line-height:1.3; }
.tpl-desc {
  font-size:.78rem; color:var(--text3); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.tpl-tags { display:flex; gap:5px; flex-wrap:wrap; }
.tpl-tag {
  font-size:.66rem; padding:3px 8px; border-radius:6px;
  background:var(--bg3); border:1px solid var(--border); color:var(--text3);
}

.tpl-badge {
  font-size:.6rem; font-weight:700; border-radius:5px; padding:2px 7px;
  letter-spacing:.04em; text-transform:uppercase; flex-shrink:0;
}
.tpl-badge--new { background:var(--teal2); color:var(--teal4); border:1px solid var(--teal); }
.tpl-badge--popular { background:rgba(251,191,36,.14); color:#d4860b; border:1px solid rgba(251,191,36,.4); }

.tpl-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:10px; border-top:1px solid var(--border);
}
.tpl-type { font-size:.7rem; color:var(--text4); }
.tpl-use-btn {
  font-size:.76rem; font-weight:700; padding:6px 13px; border-radius:8px;
  border:1px solid var(--border); background:none; color:var(--text2);
  cursor:pointer; font-family:var(--font); transition:var(--transition);
}
.tpl-use-btn:hover { background:var(--teal2); border-color:var(--teal); color:var(--teal4); }

/* Preview modal */
.tpl-modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:2000;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  transition:opacity .2s; backdrop-filter:blur(4px);
}
.tpl-modal-backdrop.open { opacity:1; pointer-events:all; }
.tpl-modal {
  width:980px; max-width:94vw; height:88vh; background:var(--bg);
  border:1px solid var(--border2); border-radius:16px; display:flex; flex-direction:column;
  overflow:hidden; transform:translateY(18px) scale(.98); transition:transform .25s ease;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
}
.tpl-modal-backdrop.open .tpl-modal { transform:none; }
.tpl-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0; gap:12px;
}
.tpl-modal-title { font-size:.95rem; font-weight:700; color:var(--text1); }
.tpl-modal-desc { font-size:.76rem; color:var(--text3); margin-top:2px; }
.tpl-modal-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tpl-modal-use-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border:none;
  border-radius:8px; padding:8px 16px; font-size:.8rem; font-weight:700; cursor:pointer;
  font-family:var(--font); transition:var(--transition);
}
.tpl-modal-use-btn:hover { opacity:.9; }
.tpl-modal-close {
  width:32px; height:32px; border-radius:8px; background:var(--bg3);
  border:1px solid var(--border); color:var(--text3); display:flex; align-items:center;
  justify-content:center; cursor:pointer; font-size:15px; transition:var(--transition);
}
.tpl-modal-close:hover { color:var(--text1); background:var(--bg2); }
.tpl-modal-body { flex:1; background:#fff; position:relative; overflow:hidden; display:flex; }
.tpl-iframe-loader {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:12px; color:var(--text3); font-size:.82rem; background:var(--bg);
}
.tpl-spinner {
  width:26px; height:26px; border:2px solid var(--border);
  border-top-color:var(--teal); border-radius:50%; animation:tplSpin .7s linear infinite;
}
@keyframes tplSpin { to { transform:rotate(360deg); } }

@media(max-width:600px){
  .tpl-search-wrap input { width:120px; }
  .tpl-modal { height:92vh; }
  .tpl-modal-use-btn { padding:8px 11px; font-size:0; gap:0; }
  .tpl-modal-use-btn i { font-size:16px; }
}

/* ── DOC EDITOR ────────────────────────────────────────────── */
#panel-notes { flex-direction:row; overflow:hidden; }

.doc-sidebar {
  width:220px; flex-shrink:0; border-right:1px solid var(--border);
  display:flex; flex-direction:column; background:var(--bg);
  overflow:hidden;
}
.doc-sb-top {
  padding:12px 10px 8px; border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px; flex-shrink:0;
}
.doc-new-btn {
  display:flex; align-items:center; gap:6px; justify-content:center;
  padding:8px; border-radius:var(--radius); border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-family:var(--font); font-size:.78rem; font-weight:700;
  cursor:pointer; transition:var(--transition);
}
.doc-new-btn:hover { opacity:.88; }
.doc-search-wrap {
  position:relative;
}
.doc-search-icon {
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  color:var(--text4); font-size:13px; pointer-events:none;
}
.doc-search-input {
  width:100%; padding:7px 10px 7px 28px; box-sizing:border-box;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text1);
  font-family:var(--font); font-size:.78rem; outline:none;
  transition:var(--transition);
}
.doc-search-input:focus { border-color:var(--teal); }

.doc-list {
  flex:1; overflow-y:auto; padding:6px;
}
.doc-list-empty {
  text-align:center; color:var(--text4); font-size:.75rem; padding:20px 8px;
}
.doc-item {
  padding:9px 10px; border-radius:var(--radius); cursor:pointer;
  margin-bottom:3px; transition:var(--transition); border:1px solid transparent;
}
.doc-item:hover { background:var(--bg3); }
.doc-item.active { background:var(--teal2); border-color:var(--teal); }
.doc-item-title {
  font-size:.82rem; font-weight:600; color:var(--text1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.doc-item.active .doc-item-title { color:var(--teal4); }
.doc-item-meta {
  font-size:.7rem; color:var(--text4); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.doc-item-row {
  display:flex; align-items:center; justify-content:space-between; gap:4px;
}
.doc-delete-btn {
  visibility:hidden; background:none; border:none; color:var(--text4);
  font-size:12px; padding:2px 4px; border-radius:4px; cursor:pointer;
  transition:var(--transition); flex-shrink:0;
}
.doc-item:hover .doc-delete-btn { visibility:visible; }
.doc-delete-btn:hover { color:var(--red3); background:var(--red2); }

.doc-editor-area {
  flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden;
}
.doc-empty-state {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; padding:40px;
}
.doc-es-icon { font-size:40px; }
.doc-es-title { font-size:1rem; font-weight:700; color:var(--text1); }
.doc-es-sub { font-size:.8rem; color:var(--text3); text-align:center; }
.doc-es-btn {
  padding:9px 20px; border-radius:var(--radius); border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-family:var(--font); font-size:.82rem; font-weight:700;
  cursor:pointer; margin-top:4px; transition:var(--transition);
}
.doc-es-btn:hover { opacity:.88; }

.doc-editor-wrap {
  flex:1; display:flex; flex-direction:column; overflow:hidden;
}
.doc-toolbar {
  display:flex; align-items:center; gap:4px; padding:8px 16px;
  border-bottom:1px solid var(--border); flex-shrink:0;
  background:var(--bg2); flex-wrap:wrap;
}
.doc-tb-group { display:flex; align-items:center; gap:2px; }
.doc-tb-sep {
  width:1px; height:18px; background:var(--border); margin:0 4px; flex-shrink:0;
}
.doc-tb-btn {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:6px; border:none;
  background:transparent; color:var(--text3);
  font-family:var(--font); cursor:pointer; transition:var(--transition);
}
.doc-tb-btn:hover { background:var(--bg3); color:var(--text1); }
.doc-tb-btn.active { background:var(--teal2); color:var(--teal4); }
.doc-siva-btn {
  display:flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:20px; border:none; margin-left:auto;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-family:var(--font); font-size:.74rem; font-weight:700;
  cursor:pointer; transition:var(--transition); flex-shrink:0;
}
.doc-siva-btn:hover { opacity:.88; }

.doc-title-area {
  padding:16px 24px 6px; flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.doc-title-input {
  width:100%; border:none; outline:none; background:transparent;
  font-family:var(--font); font-size:1.5rem; font-weight:800;
  color:var(--text1); letter-spacing:-.03em;
}
.doc-title-input::placeholder { color:var(--text4); }

/* .doc-content is the Tiptap mount point — scroll container */
.doc-content {
  flex:1; overflow-y:auto; padding:16px 24px;
  color:var(--text1); font-family:var(--font);
  font-size:.9rem; line-height:1.75; min-height:0;
}

/* ── ProseMirror (Tiptap) ──────────────────────────────────── */
.ProseMirror {
  outline: none;
  min-height: calc(100% - 8px);
  caret-color: var(--teal);
}

/* Placeholder (Tiptap Placeholder extension) */
.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left; height: 0;
  color: var(--text4); pointer-events: none;
}

/* Typography */
.ProseMirror h1 { font-family:var(--font-display); font-size:1.7rem; font-weight:900; margin:1.1rem 0 .4rem; letter-spacing:-.03em; color:var(--text1); line-height:1.2; }
.ProseMirror h2 { font-family:var(--font-display); font-size:1.3rem; font-weight:800; margin:1rem 0 .35rem; letter-spacing:-.02em; }
.ProseMirror h3 { font-family:var(--font-display); font-size:1.05rem; font-weight:700; margin:.85rem 0 .3rem; color:var(--text2); }
.ProseMirror p  { margin:.3rem 0; }
.ProseMirror ul, .ProseMirror ol { padding-left:1.5rem; margin:.4rem 0; }
.ProseMirror li { margin:.2rem 0; }
.ProseMirror blockquote {
  border-left:3px solid var(--teal); margin:.7rem 0; padding:.4rem .9rem;
  background:var(--teal2); border-radius:0 var(--radius) var(--radius) 0;
  color:var(--text2); font-style:italic;
}
.ProseMirror hr {
  border:none; border-top:1px solid var(--border); margin:1.2rem 0;
}
.ProseMirror pre {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius); padding:.8rem 1rem; margin:.6rem 0;
  font-family:'Courier New',monospace; font-size:.82rem;
  overflow-x:auto; white-space:pre;
}
.ProseMirror code {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:4px; padding:1px 6px;
  font-family:'Courier New',monospace; font-size:.82rem;
}
.ProseMirror strong { font-weight:700; }
.ProseMirror em     { font-style:italic; }
.ProseMirror u      { text-decoration:underline; }
.ProseMirror s      { text-decoration:line-through; color:var(--text3); }

/* Selection */
.ProseMirror ::selection { background:rgba(13,122,95,.25); }
[data-theme="dark"] .ProseMirror ::selection { background:rgba(15,219,173,.2); }

/* ── Slash command menu ────────────────────────────────────── */
#slash-menu {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px;
  box-shadow: var(--shadow3);
  min-width: 220px; max-height: 300px; overflow-y: auto;
}
.slash-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  transition: background .12s;
}
.slash-item:hover, .slash-item.sel { background: var(--bg3); }
.slash-ic {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--text2);
}
.slash-lb { font-size: .85rem; font-weight: 600; color: var(--text1); }
.slash-ds { font-size: .72rem; color: var(--text3); margin-top: 1px; }

.doc-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 24px; border-top:1px solid var(--border);
  flex-shrink:0; background:var(--bg2);
}
.doc-save-status { font-size:.72rem; color:var(--text4); }
.doc-word-count  { font-size:.72rem; color:var(--text4); }

/* ── DAILY Sivarr BRIEF ────────────────────────────────────── */
.brief-overlay {
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.65); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.brief-overlay.open { display:flex; }

.brief-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:24px; padding:32px 36px; max-width:440px; width:100%;
  box-shadow:var(--shadow2); text-align:center;
  animation:briefIn .35s cubic-bezier(.22,1,.36,1);
}
@keyframes briefIn {
  from { opacity:0; transform:translateY(20px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.brief-siva-row {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:16px;
}
.brief-siva-av {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal2),var(--purple2));
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:2px solid var(--teal);
}
.brief-siva-av img { width:24px; height:24px; object-fit:contain; }
.brief-siva-label { font-size:.75rem; font-weight:700; color:var(--teal); letter-spacing:.04em; }

.brief-greeting {
  font-family:var(--font); font-size:1.6rem; font-weight:800;
  color:var(--text1); letter-spacing:-.04em; margin-bottom:4px;
}
.brief-date-line {
  font-size:.8rem; color:var(--text3); margin-bottom:16px;
}
.brief-msg {
  font-size:.9rem; color:var(--text2); line-height:1.65;
  margin-bottom:18px; padding:12px 16px;
  background:var(--bg3); border-radius:var(--radius2);
  border:1px solid var(--border); text-align:left;
}
.brief-chips {
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px;
  justify-content:center;
}
.brief-chip {
  display:flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:20px;
  background:var(--bg3); border:1px solid var(--border);
  font-size:.76rem; font-weight:600; color:var(--text2);
}
.brief-chip.urgent { background:var(--red2); border-color:var(--red3); color:var(--red3); }
.brief-chip.streak { background:var(--amber2); border-color:var(--amber3); color:var(--amber); }
.brief-chip.goal   { background:var(--teal2); border-color:var(--teal); color:var(--teal4); }

.brief-go-btn {
  display:block; width:100%; padding:13px;
  border-radius:var(--radius2); border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-family:var(--font); font-size:.9rem; font-weight:700;
  cursor:pointer; transition:var(--transition); margin-bottom:8px;
}
.brief-go-btn:hover { opacity:.9; }
.brief-skip-btn {
  display:block; width:100%; padding:9px;
  border-radius:var(--radius2); border:none; background:none;
  color:var(--text4); font-family:var(--font); font-size:.8rem;
  cursor:pointer; transition:var(--transition);
}
.brief-skip-btn:hover { color:var(--text2); }

/* ── FOCUS MODE ─────────────────────────────────────────────── */
.focus-overlay {
  position:fixed; inset:0; z-index:2500;
  background:#0A0D14; display:none;
  align-items:center; justify-content:center; flex-direction:column;
}
.focus-overlay.open { display:flex; }

.focus-screen {
  display:flex; flex-direction:column; align-items:center;
  gap:16px; position:relative; width:100%; max-width:340px;
}
.focus-close-x {
  position:absolute; top:-40px; right:0;
  background:rgba(255,255,255,.08); border:none; border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); cursor:pointer; font-size:16px;
  transition:var(--transition);
}
.focus-close-x:hover { background:rgba(255,255,255,.15); color:#fff; }

.focus-task-name {
  font-family:var(--font); font-size:.9rem; font-weight:600;
  color:rgba(255,255,255,.65); letter-spacing:.02em;
  max-width:280px; text-align:center; text-overflow:ellipsis;
  overflow:hidden; white-space:nowrap;
}
.focus-ring-wrap {
  position:relative; width:200px; height:200px;
  display:flex; align-items:center; justify-content:center;
}
.focus-svg { position:absolute; inset:0; width:100%; height:100%; }
.focus-inner { text-align:center; }
.focus-time {
  font-family:var(--font); font-size:2.8rem; font-weight:800;
  color:#fff; letter-spacing:-.04em; line-height:1;
}
.focus-label-sm {
  font-size:.7rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.4); margin-top:4px;
}

.focus-controls {
  display:flex; align-items:center; gap:16px;
}
.focus-ctrl-btn {
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%; cursor:pointer; transition:var(--transition);
}
.focus-ctrl-sec {
  width:44px; height:44px; font-size:16px;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.6);
}
.focus-ctrl-sec:hover { background:rgba(255,255,255,.15); color:#fff; }
.focus-ctrl-pri {
  width:60px; height:60px; font-size:22px;
  background:linear-gradient(135deg,var(--teal),var(--purple));
  color:#fff; box-shadow:0 0 24px rgba(13,122,95,.4);
}
.focus-ctrl-pri:hover { box-shadow:0 0 32px rgba(13,122,95,.6); }

.focus-session-dots {
  display:flex; gap:8px; margin-top:4px;
}
.fsd {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.2);
}
.fsd.fsd-active { background:var(--teal3); }
.fsd.fsd-done   { background:rgba(255,255,255,.5); }

.focus-done-screen {
  display:flex; flex-direction:column; align-items:center;
  gap:14px; max-width:360px; width:100%; padding:0 20px;
}
.focus-done-emoji { font-size:3rem; }
.focus-done-title {
  font-family:var(--font); font-size:1.5rem; font-weight:800;
  color:#fff; letter-spacing:-.03em;
}
.focus-done-sub { font-size:.85rem; color:rgba(255,255,255,.55); text-align:center; }
.focus-done-input {
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius2); padding:12px 14px; color:#fff;
  font-family:var(--font); font-size:.85rem; outline:none; resize:none; min-height:80px;
  transition:var(--transition);
}
.focus-done-input::placeholder { color:rgba(255,255,255,.3); }
.focus-done-input:focus { border-color:var(--teal); }
.focus-done-actions { display:flex; gap:10px; width:100%; }
.fda-sec {
  flex:1; padding:11px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.7);
  font-family:var(--font); font-size:.82rem; font-weight:600; cursor:pointer;
  transition:var(--transition); display:flex; align-items:center; justify-content:center; gap:6px;
}
.fda-sec:hover { background:rgba(255,255,255,.1); color:#fff; }
.fda-pri {
  flex:1; padding:11px; border-radius:var(--radius); border:none;
  background:linear-gradient(135deg,var(--teal),var(--purple));
  color:#fff; font-family:var(--font); font-size:.82rem; font-weight:700; cursor:pointer;
  transition:var(--transition);
}
.fda-pri:hover { opacity:.88; }

/* ── QUICK CAPTURE (cmd palette extension) ─────────────────── */
.cmd-capture-row {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:8px 12px; border-top:1px solid var(--border);
  background:var(--bg3);
}
.cmd-capture-label {
  font-size:.7rem; font-weight:700; color:var(--text4);
  text-transform:uppercase; letter-spacing:.06em; flex-shrink:0;
}
.cmd-cap-btn {
  padding:4px 10px; border-radius:20px; border:1px solid var(--border);
  background:var(--bg2); color:var(--text2);
  font-family:var(--font); font-size:.74rem; font-weight:600;
  cursor:pointer; transition:var(--transition);
}
.cmd-cap-btn:hover { background:var(--teal2); border-color:var(--teal); color:var(--teal4); }

/* Focus button on task rows */
.task-focus-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:6px; border:1px solid var(--border);
  background:transparent; color:var(--text4); font-size:.72rem;
  cursor:pointer; transition:var(--transition); flex-shrink:0;
}
.task-focus-btn:hover { background:var(--teal2); border-color:var(--teal); color:var(--teal4); }

/* ── SPACE SWITCHER ─────────────────────────────────────────── */
.space-switcher {
  display:flex; gap:4px; padding:10px 12px 6px;
  border-bottom:1px solid var(--border);
}
.ss-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 4px; border-radius:8px; border:1px solid transparent;
  background:transparent; color:var(--text4); cursor:pointer;
  font-family:var(--font); font-size:.68rem; font-weight:600;
  transition:var(--transition);
}
.ss-btn i { font-size:14px; }
.ss-btn:hover { background:var(--bg2); color:var(--text2); }
.ss-btn.active { background:var(--teal2); color:var(--teal4); border-color:var(--teal); }

/* ── NEW PANEL SHARED WRAPPER ───────────────────────────────── */
.np-wrap {
  max-width:860px; margin:0 auto; padding:0 0 40px;
  display:flex; flex-direction:column; gap:0;
}
.np-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:20px; flex-wrap:wrap;
}
.np-title { font-size:1.25rem; font-weight:700; color:var(--text); margin:0; }
.np-sub   { font-size:.82rem; color:var(--text4); margin:4px 0 0; }
.np-action-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:8px; border:none;
  background:var(--teal); color:#fff;
  font-family:var(--font); font-size:.8rem; font-weight:600;
  cursor:pointer; transition:var(--transition); flex-shrink:0;
}
.np-action-btn:hover { opacity:.88; }
.np-section-title {
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text4); margin-bottom:10px;
}

/* ── TEAM DASHBOARD ─────────────────────────────────────────── */
.org-stats-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px;
}
.org-stat-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; padding:14px 12px; text-align:center;
}
.org-stat-val { font-size:1.5rem; font-weight:700; color:var(--teal4); }
.org-stat-lbl { font-size:.72rem; color:var(--text4); margin-top:2px; }
.team-member-list { display:flex; flex-direction:column; gap:8px; }
.team-member-card {
  display:flex; align-items:center; gap:12px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; padding:10px 14px;
}
.tm-av {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--teal),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:#fff;
}
.tm-info { flex:1; min-width:0; }
.tm-name  { font-size:.88rem; font-weight:600; color:var(--text); }
.tm-role  { font-size:.74rem; color:var(--text4); }
.tm-badge {
  font-size:.68rem; font-weight:700; padding:2px 8px;
  border-radius:20px; background:var(--teal2); color:var(--teal4);
}
.team-activity { display:flex; flex-direction:column; gap:6px; }
.ta-item { display:flex; align-items:flex-start; gap:8px; }
.ta-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; background:var(--border); }
.ta-text { font-size:.82rem; color:var(--text2); }

/* ── TEAM CHAT ──────────────────────────────────────────────── */
.chat-panel-wrap {
  display:flex; flex-direction:column; height:100%; max-width:800px; margin:0 auto; width:100%;
}
.chat-panel-head {
  display:flex; align-items:center; gap:10px;
  padding:0 0 14px; border-bottom:1px solid var(--border); margin-bottom:12px;
}
.chat-panel-title { font-size:1rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.chat-panel-badge {
  font-size:.72rem; font-weight:600; padding:3px 10px;
  border-radius:20px; background:var(--bg2); color:var(--text4);
  border:1px solid var(--border);
}
.chat-panel-messages {
  flex:1; overflow-y:auto; display:flex; flex-direction:column;
  gap:10px; padding:0 0 8px; min-height:0;
}
.chat-panel-empty { color:var(--text4); font-size:.85rem; text-align:center; padding:40px 0; }
.chat-msg { display:flex; gap:10px; }
.chat-msg.me { flex-direction:row-reverse; }
.chat-msg-av {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--teal),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:11px; color:#fff;
}
.chat-msg-body { max-width:70%; }
.chat-msg-meta { font-size:.68rem; color:var(--text4); margin-bottom:3px; }
.chat-msg.me .chat-msg-meta { text-align:right; }
.chat-msg-bubble {
  padding:8px 12px; border-radius:10px; font-size:.84rem;
  background:var(--bg2); color:var(--text); border:1px solid var(--border);
}
.chat-msg.me .chat-msg-bubble { background:var(--teal); color:#fff; border-color:var(--teal); }
.chat-panel-input-row {
  display:flex; gap:8px; padding:10px 0 0; border-top:1px solid var(--border); margin-top:8px;
}
.chat-panel-input {
  flex:1; padding:9px 14px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg2); color:var(--text);
  font-family:var(--font); font-size:.85rem; outline:none;
  transition:var(--transition);
}
.chat-panel-input:focus { border-color:var(--teal); }
.chat-panel-send {
  padding:9px 16px; border-radius:8px; border:none;
  background:var(--teal); color:#fff; cursor:pointer;
  font-size:.9rem; transition:var(--transition);
}
.chat-panel-send:hover { opacity:.85; }

/* ── PROJECTS ───────────────────────────────────────────────── */
.projects-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;
}
.projects-empty { color:var(--text4); font-size:.85rem; padding:40px 0; }
.project-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:16px; cursor:pointer;
  transition:var(--transition); position:relative;
}
.project-card:hover { border-color:var(--teal); transform:translateY(-1px); box-shadow:var(--shadow1); }
.proj-color { width:100%; height:4px; border-radius:2px; margin-bottom:12px; }
.proj-name  { font-size:.95rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.proj-desc  { font-size:.78rem; color:var(--text4); margin-bottom:10px; }
.proj-meta  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.proj-badge {
  font-size:.68rem; font-weight:600; padding:2px 8px;
  border-radius:20px; background:var(--teal2); color:var(--teal4);
}
.proj-tasks { font-size:.72rem; color:var(--text4); }

/* ── HR / PEOPLE ────────────────────────────────────────────── */
.hr-tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:0; }
.hr-tab {
  padding:7px 16px; border-radius:8px 8px 0 0; border:none;
  background:transparent; color:var(--text4);
  font-family:var(--font); font-size:.82rem; font-weight:600;
  cursor:pointer; transition:var(--transition); border-bottom:2px solid transparent;
}
.hr-tab:hover { color:var(--text2); }
.hr-tab.active { color:var(--teal4); border-bottom-color:var(--teal); }
.hr-directory-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.hr-member-row {
  display:flex; align-items:center; gap:12px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; padding:10px 14px;
}
.hr-empty { color:var(--text4); font-size:.85rem; padding:30px 0; }
.hr-role-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.hr-role-badge {
  font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:20px;
}
.hr-role-desc { font-size:.82rem; color:var(--text2); }

/* ── AUTOMATIONS ────────────────────────────────────────────── */
.auto-builder {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:18px; margin-bottom:16px; display:flex;
  flex-direction:column; gap:10px;
}
.auto-builder-title { font-size:.9rem; font-weight:700; color:var(--text); }
.auto-row { display:flex; align-items:center; gap:10px; }
.auto-label {
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text4); width:40px; flex-shrink:0;
}
.auto-select {
  flex:1; padding:8px 12px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:.84rem; outline:none; cursor:pointer;
}
.auto-label-input {
  width:100%; padding:8px 12px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:.84rem; outline:none;
}
.auto-label-input:focus, .auto-select:focus { border-color:var(--teal); }
.auto-save-btn {
  padding:8px 18px; border-radius:8px; border:none;
  background:var(--teal); color:#fff;
  font-family:var(--font); font-size:.82rem; font-weight:600;
  cursor:pointer; transition:var(--transition);
}
.auto-save-btn:hover { opacity:.88; }
.auto-cancel-btn {
  padding:8px 14px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--text4);
  font-family:var(--font); font-size:.82rem; font-weight:600;
  cursor:pointer; transition:var(--transition);
}
.auto-cancel-btn:hover { border-color:var(--teal); color:var(--text2); }
.auto-list { display:flex; flex-direction:column; gap:8px; }
.auto-empty { color:var(--text4); font-size:.85rem; padding:24px 0; }
.auto-rule-card {
  display:flex; align-items:center; gap:12px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; padding:12px 14px;
}
.auto-rule-icon { font-size:1.1rem; flex-shrink:0; }
.auto-rule-info { flex:1; min-width:0; }
.auto-rule-name { font-size:.88rem; font-weight:600; color:var(--text); }
.auto-rule-desc { font-size:.76rem; color:var(--text4); }
.auto-rule-toggle {
  width:34px; height:18px; border-radius:9px; cursor:pointer;
  background:var(--teal); border:none; position:relative; flex-shrink:0;
  transition:var(--transition);
}
.auto-rule-toggle::after {
  content:''; position:absolute; top:2px; right:2px;
  width:14px; height:14px; border-radius:50%; background:#fff;
  transition:var(--transition);
}
.auto-rule-toggle.off { background:var(--border); }
.auto-rule-toggle.off::after { right:auto; left:2px; }

/* ── OPPORTUNITIES ──────────────────────────────────────────── */
.opp-filter-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.opp-filter {
  padding:5px 14px; border-radius:20px; border:1px solid var(--border);
  background:var(--bg2); color:var(--text4);
  font-family:var(--font); font-size:.78rem; font-weight:600;
  cursor:pointer; transition:var(--transition);
}
.opp-filter:hover  { border-color:var(--teal); color:var(--text2); }
.opp-filter.active { background:var(--teal); color:#fff; border-color:var(--teal); }
#panel-opportunities { overflow-y: auto; }
.opp-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.opp-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:16px; cursor:pointer;
  transition:var(--transition); display:flex; flex-direction:column; gap:8px;
}
.opp-card:hover { border-color:var(--teal); box-shadow:var(--shadow1); }
.opp-card-type {
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:2px 8px; border-radius:20px;
  background:var(--teal2); color:var(--teal4); width:fit-content;
}
.opp-card-title { font-size:.92rem; font-weight:700; color:var(--text); }
.opp-card-org   { font-size:.78rem; color:var(--text4); }
.opp-card-desc  { font-size:.8rem; color:var(--text2); line-height:1.5; }
.opp-card-meta  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
.opp-deadline   { font-size:.72rem; color:var(--amber); font-weight:600; }
.opp-apply-btn  {
  margin-top:auto; padding:7px 14px; border-radius:8px; border:none;
  background:var(--teal); color:#fff;
  font-family:var(--font); font-size:.78rem; font-weight:600;
  cursor:pointer; transition:var(--transition); width:fit-content;
}
.opp-apply-btn:hover { opacity:.85; }
.opp-empty { color:var(--text4); font-size:.85rem; padding:40px 0; }

/* ── USER PROFILE ───────────────────────────────────────────── */
.profile-hero {
  display:flex; align-items:flex-start; gap:16px;
  margin-bottom:20px; flex-wrap:wrap;
}
.profile-av-lg {
  width:72px; height:72px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:26px; color:#fff;
}
.profile-hero-info { flex:1; min-width:0; }
.profile-name { font-size:1.3rem; font-weight:700; color:var(--text); }
.profile-bio, .profile-bio-disp  {
  font-size:.84rem; color:var(--text4); margin-top:4px; cursor:pointer;
  transition:var(--transition);
}
.profile-bio:hover, .profile-bio-disp:hover { color:var(--text2); }
.profile-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.profile-tag  {
  font-size:.72rem; font-weight:600; padding:2px 10px;
  border-radius:20px; background:var(--teal2); color:var(--teal4);
}
.profile-stats-row {
  display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap;
}
.profile-stat {
  flex:1; min-width:100px; background:var(--bg2);
  border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; text-align:center;
}
.profile-stat span { font-size:1.4rem; font-weight:700; color:var(--teal4); display:block; }
.profile-stat small { font-size:.72rem; color:var(--text4); }
.achievements-grid {
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px;
}
.achieve-badge {
  display:flex; align-items:center; gap:6px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:20px; padding:6px 12px;
  font-size:.78rem; color:var(--text2);
}
.achieve-badge .a-icon { font-size:1rem; }
.achieve-empty { color:var(--text4); font-size:.84rem; }
.skills-wrap { display:flex; gap:8px; flex-wrap:wrap; }
.skill-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:20px; padding:5px 12px;
  font-size:.8rem; color:var(--text2); font-weight:500;
}
.skill-tag button {
  background:none; border:none; color:var(--text4); cursor:pointer;
  font-size:.8rem; padding:0; line-height:1;
}
.skill-tag button:hover { color:var(--red,#e53e3e); }
.skill-add-btn {
  padding:5px 14px; border-radius:20px; border:1px dashed var(--border);
  background:transparent; color:var(--text4);
  font-family:var(--font); font-size:.78rem; cursor:pointer;
  transition:var(--transition);
}
.skill-add-btn:hover { border-color:var(--teal); color:var(--teal4); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM
   Breakpoints: 480 · 720 · 900 · 1280 · 1440 · 1920
   ═══════════════════════════════════════════════════════════════ */

/* ── Universal panel content max-width ──────────────────────── */
/* Prevents content from stretching on wide monitors / TVs.
   The panel background fills edge-to-edge; only the inner
   content is constrained and centred. Works across all screens:
   mobile → tablet → laptop → 4K → TV.                         */
:root {
  --panel-max:   1180px;   /* Standard panels (home, habits, etc.)  */
  --chat-max:     860px;   /* Chat & single-column focused panels    */
  --wide-max:    1400px;   /* Wide dashboard panels                  */
  --settings-max: 680px;   /* Settings, goals — narrower feels right */
}

/* ── Centering mixin via padding ─────────────────────────────── */
/* Applied to every panel scroll container.
   padding-left/right = at least 24px but grows on wider screens  */
.home-wrap,
.habits-wrap,
.journal-wrap,
.cal-wrap,
.community-wrap,
.library-wrap,
.quiz-wrap,
.stats-wrap,
.ask-notes-panel,
.quizzes-wrap,
.inbox-wrap {
  padding-left:  max(24px, calc((100% - var(--panel-max)) / 2));
  padding-right: max(24px, calc((100% - var(--panel-max)) / 2));
}

/* Panels that use a narrower column feel (settings, goals, etc.) */
#panel-settings > div,
#panel-goals    > div,
#panel-progress > div {
  max-width: var(--settings-max);
  margin:    0 auto;
  width:     100%;
}

/* Settings & goals scroll containers — apply lateral padding on big screens */
#panel-settings,
#panel-goals,
#panel-progress {
  overflow-y: auto;
  padding-left:  max(24px, calc((100% - var(--settings-max)) / 2));
  padding-right: max(24px, calc((100% - var(--settings-max)) / 2));
}
/* Override the inline padding on the inner div so we don't double-pad */
#panel-settings > div,
#panel-goals    > div,
#panel-progress > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Full-width panels with their own internal layout */
#panel-flux      > .content,
.os-main         > .os-content {
  max-width:   var(--wide-max);
  margin-left:  auto;
  margin-right: auto;
  width: 100%;
}

/* Standard panels that use view-head + scrollable inner div.
   The scrollable div is always the last child (after .view-head).
   --panel-max centering keeps content readable on wide screens.  */
#panel-courses    > div:last-child,
#panel-lab        > div:last-child,
#panel-announcements > div:last-child,
#panel-studyplan  > div:last-child,
#panel-contenthub > div:last-child {
  padding-left:  max(24px, calc((100% - var(--panel-max)) / 2));
  padding-right: max(24px, calc((100% - var(--panel-max)) / 2));
}

/* .content class used across many feature panels */
.content {
  padding-left:  max(24px, calc((100% - var(--panel-max)) / 2)) !important;
  padding-right: max(24px, calc((100% - var(--panel-max)) / 2)) !important;
}

/* Chat welcome screen — constrain greeting width on large displays */
#chat-welcome {
  max-width: var(--chat-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ── Tablet · 900px ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .stat-grid    { grid-template-columns: repeat(2,1fr); }
  .g3l, .g3r   { grid-template-columns: 1fr; }
  .home-grid    { grid-template-columns: 1fr; }
  .h-stat-grid  { grid-template-columns: repeat(2,1fr); }
  .h2col        { grid-template-columns: 1fr; }
  .org-stats-row { grid-template-columns: repeat(2,1fr); }
  .opp-grid     { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
}

/* ── Mobile · 720px ─────────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --panel-max: 9999px; --chat-max: 9999px; }
  .topbar   { padding: 0 12px; gap: 8px; }
  .tb-brand { width: auto; }
  .tb-center { display: none; }
  .tb-ham   { display: flex; }
  .sidebar  { transform: translateX(calc(-1 * var(--sb-width))); }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: var(--shadow2); }
  .main     { margin-left: 0 !important; }
  .overlay  { display: block; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .g2       { grid-template-columns: 1fr; }
  .view-head { padding: 0 14px; }

  /* Reset ALL centering on mobile — full width with small padding */
  .home-wrap, .habits-wrap, .journal-wrap, .cal-wrap,
  .community-wrap, .library-wrap, .quiz-wrap, .stats-wrap,
  .ask-notes-panel, .quizzes-wrap, .inbox-wrap {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  #panel-settings, #panel-goals, #panel-progress {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  #panel-settings > div, #panel-goals > div, #panel-progress > div {
    max-width: 100% !important;
  }
  #panel-courses    > div:last-child,
  #panel-lab        > div:last-child,
  #panel-announcements > div:last-child,
  #panel-studyplan  > div:last-child,
  #panel-contenthub > div:last-child {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  #panel-templates .tpl-scroll { padding-left: 16px; padding-right: 16px; }
  .content { padding: 14px !important; }
  .chat-msgs { padding-left: 12px !important; padding-right: 12px !important; }
  #chat-welcome { max-width: 100%; }
}

/* ── Small mobile · 480px ───────────────────────────────────── */
@media (max-width: 480px) {
  .stat-grid  { grid-template-columns: repeat(2,1fr); }
  .stat-val   { font-size: 18px; }
  .content    { padding: 12px; }
  .doc-sidebar { width: 160px; }
  .doc-title-input { font-size: 1.1rem; }
  .brief-card { padding: 24px 20px; }
  .brief-greeting { font-size: 1.3rem; }
  .chat-prompt-grid { grid-template-columns: 1fr; max-width: 340px; }
  .chat-welcome-heading { font-size: 1.5rem; }
  .chat-action-pills { gap: 4px; }
  .chat-pill  { font-size: .72rem; padding: 4px 10px; }
  .chat-header { padding: 10px 14px; }
  .chat-header-av { width: 34px; height: 34px; border-radius: 10px; }
  .msg        { max-width: 90%; }
  .chat-hdr-btn { width: 28px; height: 28px; font-size: .78rem; }
  .h-stat-grid { grid-template-columns: repeat(2,1fr); }
  .h2col      { grid-template-columns: 1fr; }
  .siva-brief { padding: 16px 16px; }
  .home-wrap  { padding: 16px; }
}

/* ── Large desktop · 1280px+ ────────────────────────────────── */
@media (min-width: 1280px) {
  :root { --sb-width: 264px; --panel-max: 1180px; --chat-max: 860px; }
}

/* ── XL desktop · 1440px+ ───────────────────────────────────── */
@media (min-width: 1440px) {
  :root {
    --sb-width:  272px;
    --panel-max: 1240px;
    --chat-max:   900px;
    --topbar-h:   56px;
  }
  .view-head { height: 56px; padding: 0 28px; }
  .h-stat-grid { gap: 16px; }
  .h-stat-card { padding: 22px; }
}

/* ── Wide / TV · 1920px+ ────────────────────────────────────── */
@media (min-width: 1920px) {
  :root {
    --sb-width:  300px;
    --panel-max: 1380px;
    --chat-max:  1000px;
    --topbar-h:   58px;
  }
  html { font-size: 17px; }
  .view-head { height: 58px; padding: 0 32px; }
  .msg { max-width: 72%; }
  .h-stat-grid { grid-template-columns: repeat(4,1fr); gap: 18px; }
}

/* ── Ultra-wide · 2560px+ ───────────────────────────────────── */
@media (min-width: 2560px) {
  :root {
    --sb-width:  320px;
    --panel-max: 1600px;
    --chat-max:  1100px;
  }
  html { font-size: 18px; }
}

/* ══════════════════════════════════════════════════
   ORG SPACE (Work Hub)  — os-* classes
   ══════════════════════════════════════════════════ */
/* .os-panel must NOT set display — .panel{display:none} and .panel.active{display:flex}
   already control panel visibility; adding display here would break that cascade */
.panel.os-panel { flex-direction:column; height:100%; overflow:hidden; }

/* Hero bar */
.os-hero {
  display:flex; align-items:center; gap:14px;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.os-hero-icon {
  width:52px; height:52px; border-radius:14px;
  background:var(--teal2); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; flex-shrink:0;
  position:relative; cursor:pointer; overflow:hidden;
}
.os-hero-icon img {
  width:100%; height:100%; object-fit:cover; border-radius:14px;
}
.os-hero-icon-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.7rem; opacity:0; transition:opacity .15s;
  border-radius:14px; pointer-events:none;
}
.os-hero-icon:hover .os-hero-icon-overlay { opacity:1; }
.os-hero-info { flex:1; min-width:0; }
.os-hero-name { font-size:1.1rem; font-weight:700; color:var(--fg); }
.os-hero-meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size:.78rem; color:var(--muted); margin-top:2px;
}
.os-sep { color:var(--border); }
.os-online-badge { color:var(--teal); display:flex; align-items:center; gap:3px; }
.os-hero-actions { display:flex; gap:8px; flex-shrink:0; }

/* Buttons */
.os-btn-primary {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--teal); color:#fff; border:none; cursor:pointer;
  padding:7px 14px; border-radius:8px; font-size:.82rem; font-weight:600;
  transition:background .15s;
}
.os-btn-primary:hover { background:var(--teal4); }
.os-btn-ghost {
  display:inline-flex; align-items:center; gap:5px;
  background:transparent; color:var(--muted); border:1px solid var(--border);
  cursor:pointer; padding:7px 14px; border-radius:8px; font-size:.82rem;
  transition:background .15s;
}
.os-btn-ghost:hover { background:var(--hover); color:var(--fg); }
.os-btn-icon {
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--muted); border:1px solid var(--border);
  cursor:pointer; width:34px; height:34px; border-radius:8px; font-size:1rem;
  transition:background .15s;
}
.os-btn-icon:hover { background:var(--hover); color:var(--fg); }

/* Tab bar */
.os-tabs {
  display:flex; gap:2px; padding:0 20px;
  border-bottom:1px solid var(--border);
  overflow-x:auto; flex-shrink:0; scrollbar-width:none;
}
.os-tabs::-webkit-scrollbar { display:none; }
.os-tab {
  display:inline-flex; align-items:center; gap:5px;
  padding:10px 14px; border:none; background:transparent;
  color:var(--muted); font-size:.82rem; font-weight:500; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
  transition:color .15s, border-color .15s;
}
.os-tab:hover { color:var(--fg); }
.os-tab.on { color:var(--teal); border-bottom-color:var(--teal); font-weight:600; }

/* Panes — use #panel-org for highest specificity to beat any cascade */
#panel-org .os-pane { display:none !important; flex:1; overflow:hidden; flex-direction:column; }
#panel-org .os-pane.on { display:flex !important; }

/* Scrollable content area */
.os-scroll {
  flex:1; overflow-y:auto; padding:18px 22px;
  display:flex; flex-direction:column; gap:14px;
}

/* Toolbar row above pane content */
.os-toolbar {
  display:flex; align-items:center; gap:8px;
  padding:12px 20px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.os-toolbar-label { font-size:.8rem; color:var(--muted); }
.os-tool-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:7px; border:1px solid var(--border);
  background:transparent; color:var(--muted); font-size:.8rem; cursor:pointer;
  transition:background .15s, color .15s;
}
.os-tool-btn:hover { background:var(--hover); color:var(--fg); }
.os-tool-btn.os-tool-active { background:var(--teal2); color:var(--teal); border-color:var(--teal2); }
.os-tool-btn.os-tool-action { background:var(--teal); color:#fff; border-color:var(--teal); }
.os-tool-btn.os-tool-action:hover { background:var(--teal4); }

/* Stat row */
.os-stat-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.os-stat {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px;
}
.os-stat-lbl { font-size:.74rem; color:var(--muted); margin-bottom:4px; }
.os-stat-val { font-size:1.6rem; font-weight:700; color:var(--fg); line-height:1; }
.os-stat-sub { font-size:.72rem; color:var(--muted); margin-top:4px; }
.os-stat-sub.os-s { color:var(--teal); }

/* 2-col grid */
.os-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Cards */
.os-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px;
}
.os-card-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.os-card-title {
  display:flex; align-items:center; gap:6px;
  font-size:.85rem; font-weight:600; color:var(--fg);
}
.os-card-link { font-size:.78rem; color:var(--teal); cursor:pointer; }
.os-card-link:hover { text-decoration:underline; }
.os-empty { font-size:.82rem; color:var(--muted); padding:8px 0; }

/* Kanban board */
.os-kanban {
  display:flex; gap:12px; min-height:320px;
  padding:4px 0 8px;
}
.os-col {
  flex:0 0 230px; display:flex; flex-direction:column;
  background:var(--hover); border-radius:10px; padding:10px;
}
.os-col-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px; padding:0 2px;
}
.os-col-title { font-size:.8rem; font-weight:600; color:var(--fg); }
.os-col-count {
  font-size:.72rem; background:var(--border); color:var(--muted);
  padding:1px 7px; border-radius:20px;
}
.os-task-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:8px; padding:10px; margin-bottom:6px;
  font-size:.82rem; color:var(--fg); cursor:pointer;
  transition:box-shadow .15s;
}
.os-task-card:hover { box-shadow:var(--shadow1); }
.os-task-tag {
  display:inline-block; font-size:.68rem; padding:1px 7px;
  border-radius:20px; background:var(--teal2); color:var(--teal);
  margin-bottom:5px; font-weight:500;
}
.os-task-title { font-weight:500; margin-bottom:4px; }
.os-task-meta { font-size:.72rem; color:var(--muted); display:flex; gap:8px; }
.os-add-card-btn {
  margin-top:4px; width:100%; background:transparent; border:1px dashed var(--border);
  color:var(--muted); border-radius:8px; padding:7px; font-size:.8rem;
  cursor:pointer; transition:background .15s;
}
.os-add-card-btn:hover { background:var(--card); color:var(--fg); }

/* Projects grid */
.os-proj-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px; padding:4px 0;
}
.os-proj-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px; cursor:pointer;
  transition:box-shadow .15s;
}
.os-proj-card:hover { box-shadow:var(--shadow1); }
.os-proj-stripe {
  width:32px; height:4px; border-radius:4px;
  margin-bottom:10px;
}
.os-proj-name { font-size:.9rem; font-weight:600; color:var(--fg); margin-bottom:4px; }
.os-proj-desc { font-size:.78rem; color:var(--muted); margin-bottom:10px; }
.os-proj-meta { display:flex; align-items:center; justify-content:space-between; }
.os-proj-badge {
  font-size:.68rem; padding:2px 8px; border-radius:20px;
  background:var(--teal2); color:var(--teal); font-weight:600;
}
.os-proj-tasks-count { font-size:.74rem; color:var(--muted); }

/* Docs grid */
.os-docs-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px; padding:4px 0;
}
.os-doc-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px; cursor:pointer;
  transition:box-shadow .15s;
}
.os-doc-card:hover { box-shadow:var(--shadow1); }
.os-doc-icon { font-size:1.4rem; margin-bottom:8px; }
.os-doc-name { font-size:.85rem; font-weight:600; color:var(--fg); margin-bottom:2px; }
.os-doc-meta { font-size:.72rem; color:var(--muted); }

/* Members */
.os-member-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.os-member-row:last-child { border-bottom:none; }
.os-member-av {
  width:36px; height:36px; border-radius:50%;
  background:var(--teal2); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:700; flex-shrink:0;
}
.os-member-name { font-size:.88rem; font-weight:600; color:var(--fg); }
.os-member-role { font-size:.75rem; color:var(--muted); }
.os-member-info { flex:1; }
.os-member-badge {
  font-size:.68rem; padding:2px 8px; border-radius:20px;
  background:var(--purple2); color:var(--purple); font-weight:500;
}

/* Invite box */
.os-invite-box {
  background:var(--card); border:1px dashed var(--border);
  border-radius:12px; padding:20px;
}
.os-invite-title { font-size:.88rem; font-weight:600; color:var(--fg); margin-bottom:4px; }
.os-invite-sub { font-size:.78rem; color:var(--muted); margin-bottom:12px; }
.os-invite-row { display:flex; gap:8px; }
.os-invite-input {
  flex:1; padding:8px 12px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg);
  color:var(--fg); font-size:.85rem;
}
.os-invite-input:focus { outline:none; border-color:var(--teal); }

/* Insights — bar chart */
.os-bar-chart { display:flex; align-items:flex-end; gap:6px; height:80px; padding-top:8px; }
.os-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.os-bar-fill {
  width:100%; border-radius:4px 4px 0 0;
  background:var(--teal2); min-height:2px;
  transition:height .3s;
}
.os-bar-lbl { font-size:.62rem; color:var(--muted); }

/* ── Org Chat (Slack-style) ──────────────────────────────── */
.os-pane-chat { flex-direction:row !important; overflow:hidden; }

/* Left channel sidebar */
.oc-sidebar {
  width:210px; flex-shrink:0;
  background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:0 0 12px; overflow-y:auto;
}
.oc-ws-name {
  font-size:.82rem; font-weight:700; color:var(--fg);
  padding:14px 14px 8px; letter-spacing:.03em;
  border-bottom:1px solid var(--border); margin-bottom:8px;
}
.oc-section-lbl {
  font-size:.62rem; font-weight:700; color:var(--text4);
  letter-spacing:.08em; padding:4px 14px 4px;
}
.oc-ch-item {
  display:flex; align-items:center; gap:7px;
  padding:5px 14px; cursor:pointer; border-radius:0;
  font-size:.82rem; color:var(--text3);
  transition:background .12s;
}
.oc-ch-item:hover { background:var(--bg3); color:var(--fg); }
.oc-ch-item.active { background:var(--teal2); color:var(--teal); font-weight:600; }
.oc-ch-hash { font-size:.9rem; opacity:.5; flex-shrink:0; }
.oc-ch-unread {
  width:7px; height:7px; border-radius:50%;
  background:var(--amber3,#f59e0b); margin-left:auto; flex-shrink:0;
}
.oc-ch-rename {
  flex:1; min-width:0; background:var(--bg); border:1px solid var(--accent);
  border-radius:4px; color:var(--fg); font-size:.82rem; padding:1px 5px; outline:none;
}
.oc-dm-item {
  display:flex; align-items:center; gap:8px;
  padding:5px 14px; cursor:pointer;
  font-size:.82rem; color:var(--text3); transition:background .12s;
}
.oc-dm-item:hover { background:var(--bg3); color:var(--fg); }
.oc-dm-item.active { background:var(--teal2); color:var(--teal); font-weight:600; }
.oc-presence-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.oc-presence-dot.online  { background:#22c55e; }
.oc-presence-dot.offline { background:var(--border); }
.oc-dm-av {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:var(--purple2); color:var(--purple);
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; font-weight:700;
}

/* Main chat area */
.oc-main {
  flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; min-height:0;
}
.oc-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid var(--border);
  flex-shrink:0; gap:12px;
}
.oc-ch-name { font-size:.92rem; font-weight:700; color:var(--fg); }
.oc-ch-desc { font-size:.72rem; color:var(--text4); margin-top:1px; }
.oc-presence { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.oc-presence-chip {
  display:flex; align-items:center; gap:4px;
  font-size:.68rem; color:var(--text3); white-space:nowrap;
}

/* Messages */
.oc-msgs {
  flex:1; overflow-y:auto; padding:12px 20px;
  display:flex; flex-direction:column; gap:2px; min-height:0;
}
.oc-msg {
  display:flex; gap:14px; padding:6px 0;
  border-radius:8px; transition:background .1s;
}
.oc-msg:hover { background:var(--bg2); padding-left:8px; padding-right:8px; margin:0 -8px; }
.oc-msg-av {
  width:65px; height:65px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:700; color:#fff; margin-top:1px;
}
.oc-msg-body { flex:1; min-width:0; }
.oc-msg-meta { display:flex; align-items:baseline; gap:9px; margin-bottom:3px; }
.oc-msg-name { font-size:.9rem; font-weight:600; color:var(--fg); }
.oc-msg-time { font-size:.72rem; color:var(--text4); }
.oc-msg-text { font-size:.92rem; color:var(--text2); line-height:1.6; word-break:break-word; }
.oc-msg-continued { padding-top:1px; }
.oc-msg-continued .oc-msg-av { visibility:hidden; }
.oc-msg-continued:hover .oc-msg-av { visibility:hidden; }
.oc-chat-empty { font-size:.84rem; color:var(--muted); text-align:center; padding:3rem 0; }

/* Input bar */
.oc-bar {
  display:flex; align-items:center; gap:6px;
  margin:10px 16px 14px; padding:6px 8px 6px 12px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--bg2); flex-shrink:0;
}
.oc-input {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--fg); font-size:.88rem; font-family:var(--font);
  padding:4px 0;
}
.oc-input::placeholder { color:var(--text4); }
.oc-bar-icon {
  background:none; border:none; color:var(--text4);
  cursor:pointer; padding:5px; border-radius:6px; font-size:1rem;
  display:flex; align-items:center; transition:color .15s, background .15s;
}
.oc-bar-icon:hover { color:var(--fg); background:var(--bg3); }
.oc-send-btn {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  background:var(--teal); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.oc-send-btn:hover { background:var(--teal4,#0a6652); }

/* Emoji picker */
.oc-emoji-picker {
  position:absolute; bottom:72px; right:20px; z-index:200;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:10px; box-shadow:0 8px 32px rgba(0,0,0,.25);
  display:grid; grid-template-columns:repeat(8,32px); gap:4px;
}
.oc-emoji-btn-item {
  width:32px; height:32px; background:none; border:none;
  border-radius:6px; font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .1s;
}
.oc-emoji-btn-item:hover { background:var(--bg3); }

/* Legacy styles kept for backwards-compat just in case */
.os-chat-empty { font-size:.84rem; color:var(--muted); text-align:center; padding:2rem 0; }

/* Responsive */
@media (max-width:900px) {
  .os-stat-row { grid-template-columns:repeat(2,1fr); }
  .os-grid2 { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .os-hero { padding:14px 16px 10px; gap:10px; }
  .os-hero-actions { display:flex !important; gap:6px; flex-shrink:0; }
  /* Icon-only on small screens — hide text labels, keep icons */
  .os-hero-actions .btn-lbl { display:none; }
  .os-hero-actions .os-btn-ghost,
  .os-hero-actions .os-btn-primary { padding:7px 9px; }
  .os-scroll { padding:14px 16px; }
  .os-toolbar { padding:10px 14px; }
  .os-stat-row { grid-template-columns:repeat(2,1fr); }
  .os-tabs { padding:0 12px; }
}

/* ── Sivarr AI BRIEFING ─────────────────────────────────────── */
.os-briefing-card { border-left:3px solid var(--teal); }
.os-briefing-text {
  font-size:.88rem; color:var(--fg); line-height:1.65;
  padding:6px 0 4px; min-height:40px;
}

/* ── GOALS & OKRs ───────────────────────────────────────────── */
.os-goal-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px; margin-bottom:12px;
}
.os-goal-head {
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.os-goal-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.os-goal-title { flex:1; font-size:.9rem; font-weight:600; color:var(--fg); }
.os-goal-badge {
  font-size:.68rem; padding:2px 7px; border-radius:20px;
  font-weight:600; text-transform:uppercase; letter-spacing:.04em;
}
.os-goal-pct { font-size:.82rem; font-weight:700; color:var(--teal); min-width:36px; text-align:right; }
.os-goal-menu {
  background:none; border:none; color:var(--muted); cursor:pointer;
  padding:3px 5px; border-radius:6px; font-size:.85rem;
}
.os-goal-menu:hover { background:var(--surface2); color:var(--fg); }
.os-goal-desc { font-size:.8rem; color:var(--muted); margin-bottom:8px; }
.os-goal-bar-wrap {
  width:100%; height:6px; background:var(--surface2);
  border-radius:4px; overflow:hidden; margin-bottom:10px;
}
.os-goal-bar-fill {
  height:100%; background:linear-gradient(90deg,var(--teal),var(--teal4));
  border-radius:4px; transition:width .4s;
}

/* Key results */
.os-kr-list { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.os-kr-row { display:flex; align-items:center; gap:8px; }
.os-kr-title { flex:1; font-size:.8rem; color:var(--fg); }
.os-kr-progress { display:flex; align-items:center; gap:6px; }
.os-kr-bar { width:80px; height:4px; background:var(--surface2); border-radius:3px; overflow:hidden; }
.os-kr-fill { height:100%; background:var(--teal); border-radius:3px; transition:width .3s; }
.os-kr-val { font-size:.72rem; color:var(--muted); white-space:nowrap; }
.os-kr-add {
  background:none; border:1px dashed var(--border); border-radius:8px;
  color:var(--muted); font-size:.78rem; padding:5px 10px; cursor:pointer;
  margin-top:4px; transition:border-color .15s, color .15s;
}
.os-kr-add:hover { border-color:var(--teal); color:var(--teal); }

/* Goals mini on overview */
.os-task-card .os-goal-bar-wrap { margin:5px 0 2px; height:4px; }

/* Founder tab highlight */
.os-tab-founder { color:var(--amber) !important; }
.os-tab-founder.on,
.os-tab-founder:hover { color:var(--amber) !important; border-color:var(--amber) !important; }

/* ── FOUNDER MODE ───────────────────────────────────────────── */
.os-stat-green .os-stat-val { color:var(--coral); }
.os-stat-teal  .os-stat-val { color:var(--teal); }
.os-stat-blue  .os-stat-val { color:var(--purple); }
.founder-form { display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.founder-form label { font-size:.78rem; color:var(--muted); font-weight:500; margin-top:4px; }
.founder-form input, .founder-form select { margin-bottom:0; }
.fd-inv-grid { display:flex; flex-direction:column; gap:8px; }
.fd-inv-card {
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px;
}
.fd-inv-av {
  width:34px; height:34px; border-radius:50%; background:var(--purple2);
  color:var(--purple); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; flex-shrink:0;
}
.fd-inv-name { font-size:.85rem; font-weight:600; color:var(--fg); }
.fd-inv-firm { font-size:.75rem; color:var(--muted); }
.fd-inv-badge {
  font-size:.68rem; padding:2px 8px; border-radius:20px;
  font-weight:600; text-transform:capitalize; white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   SPACES — Sidebar zone (lives inside sb-scroll as a sg section)
═══════════════════════════════════════════════════════════════ */

/* + button inside the Spaces section header */
.sb-spaces-add {
  background: none; border: none; cursor: pointer;
  color: var(--text4); font-size: 11px; padding: 2px 4px;
  border-radius: 4px; line-height: 1; display: flex; align-items: center;
  transition: var(--transition);
}
.sb-spaces-add:hover { background: var(--bg3); color: var(--text2); }

/* Space items share .si styling; dot indicator */
.sp-si-dot { font-size: 10px !important; }

/* Options button on hover */
.sb-space-more {
  opacity: 0; background: none; border: none; cursor: pointer;
  padding: 2px 3px; border-radius: 4px; flex-shrink: 0;
  transition: opacity .15s;
}
.si.sp-si:hover .sb-space-more { opacity: 1; }
.sb-space-more:hover { background: var(--bg3); }

/* ═══════════════════════════════════════════════════════════════
   SPACES — Panel base (shared Personal + Academic)
═══════════════════════════════════════════════════════════════ */
.sp-panel {
  flex-direction: column;
  height: 100%; overflow: hidden;
}

/* Hide all sp-panes by default, show active */
#panel-personal .sp-pane,
#panel-academic  .sp-pane { display: none !important; }
#panel-personal .sp-pane.on,
#panel-academic  .sp-pane.on { display: flex !important; }

/* Hero */
.sp-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.sp-hero-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.sp-hero-blue  .sp-hero-icon { background: var(--blue2,#E6F1FB); }
.sp-hero-amber .sp-hero-icon { background: var(--amber2,#FEF6E4); }

.sp-hero-info { flex: 1; }
.sp-hero-name {
  font-size: 1.05rem; font-weight: 700; color: var(--fg);
  cursor: pointer; border-radius: 4px; padding: 1px 4px;
  display: inline-block;
}
.sp-hero-name:hover { background: var(--hover); }
.sp-hero-sub { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.sp-hero-actions { display: flex; gap: 8px; }
.sp-hero-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 8px; font-size: .8rem; font-weight: 600;
  border: none; cursor: pointer; transition: opacity .15s;
}
.sp-hero-btn:hover { opacity: .85; }
.sp-hero-blue  .sp-hero-btn { background: var(--blue,#185FA5); color: #fff; }
.sp-hero-amber .sp-hero-btn { background: var(--amber3,#EF9F27); color: #fff; }

.sp-streak {
  display: flex; align-items: center; gap: 4px;
  font-size: .75rem; color: var(--orange,#F6A623); font-weight: 600;
  padding: 4px 8px; background: rgba(246,166,35,.1); border-radius: 8px;
}

/* Tabs */
.sp-tabs {
  display: flex; gap: 0; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; padding: 0 16px;
}
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab {
  padding: 10px 14px; font-size: .8rem; font-weight: 500;
  color: var(--muted); border: none; background: none; cursor: pointer;
  white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.sp-tab:hover { color: var(--fg); }
.sp-tab.on { color: var(--fg); font-weight: 700; }
.sp-panel.sp-hero-blue  .sp-tab.on { border-bottom-color: var(--blue,#185FA5); }
.sp-panel.sp-hero-amber .sp-tab.on { border-bottom-color: var(--amber3,#EF9F27); }

/* Pane scaffold */
.sp-pane {
  flex: 1; flex-direction: column; overflow: hidden; min-height: 0;
}
.sp-scroll {
  flex: 1; overflow-y: auto; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.sp-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  gap: 10px;
}
.sp-toolbar-title { font-size: .88rem; font-weight: 700; color: var(--fg); }

/* Stat row */
.sp-stat-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
}
.sp-stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; text-align: center;
}
.sp-stat-val { font-size: 1.4rem; font-weight: 800; color: var(--fg); }
.sp-stat-lbl { font-size: .68rem; color: var(--muted); margin-top: 2px; }

/* 2-column grid */
.sp-grid2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.sp-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.sp-card-title { font-size: .82rem; font-weight: 700; color: var(--fg); }
.sp-card-sub   { font-size: .74rem; color: var(--muted); }

/* Kanban (reuses os-kanban layout) */
.sp-kanban {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
  flex: 1;
}
.sp-kanban::-webkit-scrollbar { height: 4px; }
.sp-kanban::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Goals grid */
.sp-goals-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 12px;
}
.sp-goal-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.sp-goal-title { font-size: .84rem; font-weight: 700; color: var(--fg); }
.sp-goal-bar-bg {
  height: 5px; background: var(--border); border-radius: 3px; overflow: hidden;
}
.sp-goal-bar-fill {
  height: 100%; border-radius: 3px; background: var(--blue,#185FA5); transition: width .3s;
}
.sp-goal-meta { font-size: .68rem; color: var(--muted); display: flex; justify-content: space-between; }

/* Habits list */
.sp-habits-list { display: flex; flex-direction: column; gap: 10px; }
.sp-habit-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
}
.sp-habit-check {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  border: 2px solid var(--border); background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .7rem;
}
.sp-habit-check.done { background: var(--blue,#185FA5); border-color: var(--blue,#185FA5); color: #fff; }
.sp-habit-name { flex: 1; font-size: .84rem; color: var(--fg); }
.sp-habit-streak { font-size: .7rem; color: var(--muted); }

/* Journal */
.sp-journal-editor {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.sp-journal-editor textarea {
  width: 100%; min-height: 100px; border: none; background: transparent;
  color: var(--fg); font-size: .88rem; resize: vertical; font-family: inherit;
}
.sp-journal-editor textarea:focus { outline: none; }
.sp-journal-actions {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
}
.sp-journal-entries { display: flex; flex-direction: column; gap: 10px; }
.sp-journal-entry {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.sp-journal-entry-date { font-size: .68rem; color: var(--muted); margin-bottom: 4px; }
.sp-journal-entry-text { font-size: .84rem; color: var(--fg); white-space: pre-wrap; }

/* Notes grid */
.sp-notes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 12px;
}
.sp-note-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; min-height: 110px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; transition: box-shadow .15s;
}
.sp-note-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.sp-note-title { font-size: .82rem; font-weight: 700; color: var(--fg); }
.sp-note-preview { font-size: .76rem; color: var(--muted); flex: 1; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; }
.sp-note-date { font-size: .64rem; color: var(--muted); }

/* ── Academic: Course cards ──────────────────────────────── */
.sp-courses-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px;
}
.sp-course-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; cursor: pointer;
  transition: box-shadow .15s;
}
.sp-course-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.sp-course-banner {
  height: 6px; background: var(--amber3,#EF9F27);
}
.sp-course-body { padding: 12px 14px; }
.sp-course-title { font-size: .84rem; font-weight: 700; color: var(--fg); }
.sp-course-code  { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.sp-course-prog  { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.sp-course-bar   { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.sp-course-bar-fill { height:100%; background:var(--amber3,#EF9F27); border-radius:2px; }
.sp-course-pct   { font-size:.66rem; color:var(--muted); }

/* ── Academic: Flashcard ─────────────────────────────────── */
.sp-deck-area {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.sp-flashcard-wrap {
  width: 100%; max-width: 480px; height: 230px;
  perspective: 1000px; cursor: pointer;
}
.sp-flashcard {
  width: 100%; height: 100%;
  position: relative; transform-style: preserve-3d;
  transition: transform .5s ease;
}
.sp-flashcard.flipped { transform: rotateY(180deg); }
.sp-fc-face {
  position: absolute; inset: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--fg); text-align: center;
}
.sp-fc-back { transform: rotateY(180deg); }
.sp-fc-label {
  position: absolute; top: 10px; left: 14px;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.sp-rate-row { display: flex; gap: 10px; justify-content: center; }
.sp-rate-btn {
  padding: 7px 18px; border-radius: 8px; border: none; cursor: pointer;
  font-size: .8rem; font-weight: 600; transition: opacity .15s;
}
.sp-rate-btn:hover { opacity: .8; }
.sp-rate-again  { background: #fee2e2; color: #dc2626; }
.sp-rate-hard   { background: #fef3c7; color: #d97706; }
.sp-rate-good   { background: #d1fae5; color: #059669; }
.sp-rate-easy   { background: #dbeafe; color: #2563eb; }
.sp-deck-nav    { display: flex; align-items: center; gap: 12px; font-size: .8rem; color: var(--muted); }
.sp-deck-nav button {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 12px; cursor: pointer; color: var(--fg); font-size: .8rem;
}
.sp-deck-nav button:hover { background: var(--hover); }

/* ── Academic: Timer ─────────────────────────────────────── */
.sp-timer-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 24px 0;
}
.sp-timer-mode-row { display: flex; gap: 8px; }
.sp-timer-mode-btn {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: none; cursor: pointer; font-size: .78rem; color: var(--muted);
  transition: all .15s;
}
.sp-timer-mode-btn.on {
  background: var(--amber3,#EF9F27); border-color: var(--amber3,#EF9F27);
  color: #fff; font-weight: 600;
}
.sp-timer-display {
  font-size: 3.5rem; font-weight: 800; letter-spacing: .04em;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.sp-timer-controls { display: flex; gap: 12px; }
.sp-timer-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 22px; border-radius: 10px; border: none; cursor: pointer;
  font-size: .85rem; font-weight: 600; transition: opacity .15s;
}
.sp-timer-btn:hover { opacity: .85; }
.sp-timer-start { background: var(--amber3,#EF9F27); color: #fff; }
.sp-timer-reset { background: var(--card); border: 1px solid var(--border); color: var(--fg); }
.sp-timer-sessions {
  font-size: .78rem; color: var(--muted);
}

/* ── Academic: Quiz ──────────────────────────────────────── */
.sp-quiz-config {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 420px; margin: 0 auto;
}
.sp-quiz-config select,
.sp-quiz-config input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  font-size: .84rem;
}
.sp-quiz-active { display: flex; flex-direction: column; gap: 14px; }
.sp-quiz-q { font-size: .95rem; font-weight: 700; color: var(--fg); }
.sp-quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.sp-quiz-opt {
  padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); cursor: pointer; font-size: .85rem; color: var(--fg);
  text-align: left; transition: background .15s;
}
.sp-quiz-opt:hover   { background: var(--hover); }
.sp-quiz-opt.correct { background: #d1fae5; border-color: #059669; color: #065f46; }
.sp-quiz-opt.wrong   { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
.sp-quiz-result {
  text-align: center; padding: 24px;
  font-size: 1rem; color: var(--fg);
}

/* ── Academic: Study Groups ──────────────────────────────── */
.sp-groups-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px;
}
.sp-group-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.sp-group-name   { font-size: .88rem; font-weight: 700; color: var(--fg); }
.sp-group-sub    { font-size: .72rem; color: var(--muted); }
.sp-group-badge  {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .68rem; padding: 3px 8px; border-radius: 10px;
  background: var(--amber2,#FEF6E4); color: var(--amber3,#EF9F27);
  font-weight: 600; width: fit-content;
}

/* ── Academic: Planner ───────────────────────────────────── */
.sp-plan-content { display: flex; flex-direction: column; gap: 12px; }
.sp-plan-week {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.sp-plan-week-hd {
  padding: 10px 14px; font-size: .82rem; font-weight: 700;
  border-bottom: 1px solid var(--border); color: var(--fg);
}
.sp-plan-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
}
.sp-plan-item:last-child { border-bottom: none; }
.sp-plan-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--amber3,#EF9F27);
}
.sp-plan-text { font-size: .82rem; color: var(--fg); flex: 1; }
.sp-plan-due  { font-size: .7rem; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   CREATE SPACE MODAL
═══════════════════════════════════════════════════════════════ */
.csp-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.csp-modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; width: 100%; max-width: 460px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  display: flex; flex-direction: column; overflow: hidden;
}
.csp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
}
.csp-head h3 { font-size: 1rem; font-weight: 700; color: var(--fg); margin: 0; }
.csp-head button {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 1.1rem; padding: 4px;
  border-radius: 6px;
}
.csp-head button:hover { background: var(--hover); color: var(--fg); }
.csp-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.csp-label {
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.csp-name-input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  font-size: .88rem; box-sizing: border-box;
}
.csp-name-input:focus { outline: none; border-color: var(--teal); }
.csp-types { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.csp-type {
  border: 2px solid var(--border); border-radius: 12px;
  padding: 14px 10px; text-align: center; cursor: pointer;
  transition: all .15s; display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.csp-type:hover { border-color: var(--teal); background: var(--hover); }
.csp-type.selected { border-color: var(--teal); background: var(--teal2); }
.csp-type-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.csp-type-name  { font-size: .78rem; font-weight: 700; color: var(--fg); }
.csp-type-desc  { font-size: .66rem; color: var(--muted); line-height: 1.3; }
.csp-type[data-type="personal"]  .csp-type-icon { background: var(--blue2,#E6F1FB); }
.csp-type[data-type="org"]       .csp-type-icon { background: var(--teal2); }
.csp-type[data-type="academic"]  .csp-type-icon { background: var(--amber2,#FEF6E4); }
.csp-type[data-type="personal"].selected  { border-color: var(--blue,#185FA5); background: var(--blue2,#E6F1FB); }
.csp-type[data-type="org"].selected       { border-color: var(--teal); background: var(--teal2); }
.csp-type[data-type="academic"].selected  { border-color: var(--amber3,#EF9F27); background: var(--amber2,#FEF6E4); }
.csp-footer {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}
.csp-btn-cancel {
  padding: 8px 18px; border-radius: 8px; border: 1px solid var(--border);
  background: none; cursor: pointer; font-size: .84rem; color: var(--fg);
}
.csp-btn-cancel:hover { background: var(--hover); }
.csp-btn-create {
  padding: 8px 20px; border-radius: 8px; border: none;
  background: var(--teal); color: #fff; cursor: pointer;
  font-size: .84rem; font-weight: 700;
}
.csp-btn-create:hover { background: var(--teal4); }

/* Responsive */
@media (max-width:900px) {
  .sp-stat-row { grid-template-columns: repeat(2,1fr); }
  .sp-grid2    { grid-template-columns: 1fr; }
}
@media (max-width:600px) {
  .sp-hero { padding: 12px 14px 10px; gap: 10px; }
  .sp-hero-actions { display: flex !important; gap: 6px; flex-shrink: 0; }
  /* Icon-only on small screens — hide text labels, keep icons */
  .sp-hero-actions .btn-lbl { display: none; }
  .sp-hero-actions .sp-btn-ghost,
  .sp-hero-actions .sp-btn-primary { padding: 7px 9px; }
  .sp-scroll { padding: 12px 14px; }
  .sp-toolbar { padding: 8px 12px; }
  .sp-stat-row { grid-template-columns: repeat(2,1fr); }
  .sp-tabs { padding: 0 10px; }
  .csp-types { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   SPACES — supplemental classes (matched to HTML)
═══════════════════════════════════════════════════════════════ */

/* Hero variants */
.sp-ic-blue  { background: var(--blue2,#E6F1FB); color: var(--blue,#185FA5); }
.sp-ic-amber { background: var(--amber2,#FEF6E4); color: var(--amber3,#EF9F27); }
.sp-hero-meta { font-size: .74rem; color: var(--muted); margin-top: 3px; }

/* Colored stat values */
.sp-val-blue  { color: var(--blue,#185FA5); }
.sp-val-amber { color: var(--amber3,#EF9F27); }

/* Shared buttons */
.sp-btn-primary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer;
  font-size: .82rem; font-weight: 700; transition: opacity .15s;
}
.sp-btn-primary:hover { opacity: .85; }
.sp-btn-blue  { background: var(--blue,#185FA5); color: #fff; }
.sp-btn-amber { background: var(--amber3,#EF9F27); color: #fff; }
.sp-btn-ghost {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: none; cursor: pointer;
  font-size: .82rem; color: var(--fg); transition: background .15s;
}
.sp-btn-ghost:hover { background: var(--hover); }

/* Toolbar buttons */
.sp-tool-btn {
  padding: 6px 12px; border-radius: 7px; border: 1px solid transparent;
  background: none; cursor: pointer; font-size: .78rem; color: var(--muted);
  transition: all .15s;
}
.sp-tool-btn:hover { background: var(--hover); color: var(--fg); }
.sp-tool-active, .sp-tool-amber-active {
  background: var(--hover); color: var(--fg); border-color: var(--border);
}

/* Card head / link */
.sp-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.sp-card-link {
  font-size: .72rem; color: var(--muted); cursor: pointer;
}
.sp-card-link:hover { color: var(--fg); text-decoration: underline; }

/* Empty state */
.sp-empty { font-size: .8rem; color: var(--muted); padding: 8px 0; }

/* Habit stat header */
.sp-hstats { display: flex; gap: 20px; }
.sp-hstat  { display: flex; flex-direction: column; align-items: center; }
.sp-hstat-val { font-size: 1.1rem; font-weight: 800; color: var(--fg); }
.sp-hstat-lbl { font-size: .66rem; color: var(--muted); margin-top: 1px; }

/* Journal layout */
.sp-grid2-journal { align-items: start; }
.sp-journal-left  { display: flex; flex-direction: column; gap: 10px; }
.sp-journal-right { display: flex; flex-direction: column; gap: 10px; }
.sp-journal-prompt {
  font-size: .84rem; color: var(--muted); font-style: italic; padding: 8px 0;
}
.sp-mood-row { display: flex; gap: 8px; }
.sp-mood-btn {
  font-size: 1.2rem; background: none; border: none; cursor: pointer;
  padding: 4px; border-radius: 6px; transition: transform .15s;
}
.sp-mood-btn:hover { transform: scale(1.2); }
.sp-journal-input {
  width: 100%; min-height: 120px; padding: 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  font-size: .88rem; resize: vertical; font-family: inherit; box-sizing: border-box;
}
.sp-journal-input:focus { outline: none; border-color: var(--blue,#185FA5); }

/* Form inputs */
.sp-input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  font-size: .84rem; box-sizing: border-box;
}
.sp-input:focus { outline: none; border-color: var(--teal); }
.sp-select {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  font-size: .84rem;
}
.sp-label {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}

/* Amber tab active variant */
.sp-tab-amber.on { border-bottom-color: var(--amber3,#EF9F27); color: var(--fg); }

/* Flashcard — updated to match HTML structure */
.sp-flashcard {
  width: 100%; max-width: 480px; height: 220px;
  cursor: pointer; margin: 0 auto 12px;
}
.sp-flashcard-inner {
  width: 100%; height: 100%;
  position: relative; transform-style: preserve-3d;
  transition: transform .5s ease;
  perspective: 1000px;
}
.sp-flashcard-inner.flipped { transform: rotateY(180deg); }
.sp-card-front,
.sp-card-back {
  position: absolute; inset: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px 28px; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--fg); text-align: center;
}
.sp-card-back { transform: rotateY(180deg); background: var(--amber2,#FEF6E4); }
.sp-fc-counter {
  position: absolute; top: 10px; left: 14px;
  font-size: .66rem; color: var(--muted); font-weight: 600;
}
.sp-fc-question { font-size: .96rem; font-weight: 600; color: var(--fg); }
.sp-fc-answer   { font-size: .9rem;  color: var(--fg); }
.sp-fc-flip     { font-size: .68rem; color: var(--muted); margin-top: 10px; }
.sp-deck-rate-row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.sp-deck-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 8px;
}
.sp-dstat { text-align: center; }
.sp-dstat span { font-size: 1.1rem; font-weight: 800; color: var(--fg); display: block; }
.sp-dstat small { font-size: .66rem; color: var(--muted); }

/* Timer — matched to HTML classes */
.sp-timer-modes { display: flex; gap: 8px; justify-content: center; }
.sp-tmode-btn {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: none; cursor: pointer; font-size: .78rem; color: var(--muted);
  transition: all .15s;
}
.sp-tmode-btn:hover { background: var(--hover); color: var(--fg); }
.sp-tmode-active {
  background: var(--amber3,#EF9F27); border-color: var(--amber3,#EF9F27);
  color: #fff; font-weight: 600;
}
.sp-timer-label { font-size: .78rem; color: var(--muted); }
.sp-timer-btns  { display: flex; gap: 12px; }
.sp-timer-stats { display: flex; gap: 28px; margin-top: 6px; }
.sp-tstat       { text-align: center; }
.sp-tstat-val   { font-size: 1.3rem; font-weight: 800; color: var(--fg); }
.sp-tstat-lbl   { font-size: .66rem; color: var(--muted); margin-top: 2px; }
.sp-timer-start { background: var(--amber3,#EF9F27); color: #fff; }

/* Quiz — matched to HTML classes */
.sp-quiz-wrap   { display: flex; flex-direction: column; gap: 14px; }
.sp-quiz-prog-bar {
  height: 5px; background: var(--border); border-radius: 3px; overflow: hidden;
}
.sp-quiz-counter { font-size: .72rem; color: var(--muted); }
.sp-quiz-question { font-size: .95rem; font-weight: 700; color: var(--fg); }
.sp-quiz-options  { display: flex; flex-direction: column; gap: 8px; }
.sp-quiz-nav {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px;
}
.sp-diff-row { display: flex; gap: 8px; }
.sp-diff-btn {
  flex: 1; padding: 7px; border-radius: 8px; border: 1px solid var(--border);
  background: none; cursor: pointer; font-size: .78rem; color: var(--muted);
  transition: all .15s;
}
.sp-diff-btn:hover { background: var(--hover); color: var(--fg); }
.sp-diff-active {
  background: var(--amber2,#FEF6E4); border-color: var(--amber3,#EF9F27);
  color: var(--amber3,#EF9F27); font-weight: 700;
}

/* Academic deck filter tabs */
.sp-deck-filter { display: flex; gap: 6px; margin-bottom: 12px; }

/* Insights strip */
.sp-insight-strip {
  font-size: .8rem; padding: 10px 12px; border-radius: 8px; color: var(--muted);
}
.sp-insight-amber { background: var(--amber2,#FEF6E4); color: var(--amber3,#EF9F27); }
.sp-insight-blue  { background: var(--blue2,#E6F1FB);  color: var(--blue,#185FA5); }

/* Bar chart placeholder */
.sp-bar-chart { min-height: 80px; display: flex; align-items: center; justify-content: center; }

/* Create space modal — csp-close */
.csp-close {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 1.1rem; padding: 4px; border-radius: 6px;
}
.csp-close:hover { background: var(--hover); color: var(--fg); }
.csp-sub { font-size: .82rem; color: var(--muted); padding: 0 20px 12px; margin: 0; }

/* teal button variant */
.sp-btn-teal { background: var(--teal); color: #fff; }
.sp-btn-teal:hover { background: var(--teal4,var(--teal)); }

/* ═══════════════════════════════════════════════════════════
   AGENTS MARKETPLACE
═══════════════════════════════════════════════════════════ */

/* ── Sidebar badge ───────────────────────────────────────── */
.si-badge {
  font-size:.58rem; font-weight:800; border-radius:20px;
  padding:1px 6px; margin-left:auto; text-transform:uppercase; letter-spacing:.04em;
}
.si-badge--new { background:var(--accent); color:#fff; }

/* ── Panel shell ─────────────────────────────────────────── */
#panel-agents { flex-direction:column; overflow:hidden; }

/* ── Top bar ─────────────────────────────────────────────── */
.ag-topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:0 18px; height:52px; flex-shrink:0;
  border-bottom:1px solid var(--border); background:var(--bg);
}
.ag-topbar-left  { display:flex; align-items:center; gap:8px; }
.ag-topbar-right { display:flex; align-items:center; gap:8px; }
.ag-topbar-title {
  font-family:var(--font); font-size:.95rem; font-weight:800;
  letter-spacing:-.02em; color:var(--text);
}
.ag-back-btn {
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:1rem; padding:5px 6px; border-radius:7px; transition:var(--transition);
  display:flex; align-items:center;
}
.ag-back-btn:hover { background:var(--hover); color:var(--text); }
.ag-tb-btn {
  display:flex; align-items:center; gap:5px; padding:6px 13px;
  border:1px solid var(--border); border-radius:8px; background:var(--bg2);
  color:var(--text2); font-family:var(--font); font-size:.75rem;
  font-weight:600; cursor:pointer; transition:var(--transition); white-space:nowrap;
}
.ag-tb-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--bg3); }
.ag-tb-btn--primary {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent; color:#fff;
}
.ag-tb-btn--primary:hover { opacity:.88; color:#fff; }

/* ── View scroll wrapper ─────────────────────────────────── */
.ag-view-wrap { flex:1; overflow-y:auto; }

/* ── Loading state ───────────────────────────────────────── */
.ag-loading {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; height:200px; color:var(--muted); font-size:.84rem;
}
.ag-spinner {
  width:26px; height:26px; border:3px solid var(--border);
  border-top-color:var(--accent); border-radius:50%;
  animation:ag-spin .7s linear infinite;
}
@keyframes ag-spin { to { transform:rotate(360deg); } }

/* ── Marketplace layout ──────────────────────────────────── */
.ag-market-wrap { max-width:1060px; margin:0 auto; padding:24px 20px 60px; }

/* ── Category tabs ───────────────────────────────────────── */
.ag-cats {
  display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; margin-bottom:18px;
  scrollbar-width:none;
}
.ag-cats::-webkit-scrollbar { display:none; }
.ag-cat {
  display:flex; align-items:center; gap:5px; padding:6px 13px;
  border:1px solid var(--border); border-radius:20px; background:var(--bg2);
  color:var(--text3); font-size:.75rem; font-weight:600; cursor:pointer;
  white-space:nowrap; transition:var(--transition); flex-shrink:0;
  font-family:var(--font);
}
.ag-cat:hover { border-color:var(--accent); color:var(--accent); }
.ag-cat.active {
  background:var(--accent); border-color:var(--accent); color:#fff;
}

/* ── Filter chips ────────────────────────────────────────── */
.ag-filters {
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px;
}
.ag-chip {
  padding:4px 11px; border:1px solid var(--border); border-radius:20px;
  background:var(--bg2); color:var(--text3); font-size:.72rem; font-weight:600;
  cursor:pointer; transition:var(--transition); font-family:var(--font);
}
.ag-chip:hover  { border-color:var(--accent); color:var(--accent); }
.ag-chip.active { background:var(--accent2,#7c3aed); border-color:transparent; color:#fff; }

/* ── Featured banner ─────────────────────────────────────── */
.ag-featured {
  display:grid; grid-template-columns:1fr 2fr; gap:0;
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  margin-bottom:28px; background:var(--bg2);
}
.ag-feat-thumb {
  display:flex; align-items:center; justify-content:center;
  min-height:160px; font-size:3rem; position:relative;
}
.ag-feat-thumb::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 60%, var(--bg2));
}
.ag-feat-body {
  padding:22px 22px 22px 16px; display:flex; flex-direction:column;
  justify-content:center; gap:6px;
}
.ag-feat-label {
  font-size:.65rem; font-weight:800; color:var(--accent); text-transform:uppercase;
  letter-spacing:.08em;
}
.ag-feat-name {
  font-family:var(--font); font-size:1.15rem; font-weight:800;
  letter-spacing:-.02em; line-height:1.2;
}
.ag-feat-desc { font-size:.8rem; color:var(--muted); line-height:1.5; }
.ag-feat-meta {
  display:flex; align-items:center; gap:12px; font-size:.72rem; color:var(--muted);
  margin-top:2px;
}
.ag-feat-meta strong { color:var(--text2); }
.ag-feat-actions { display:flex; gap:8px; margin-top:8px; }

/* ── Section heading ─────────────────────────────────────── */
.ag-section-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.ag-section-title {
  font-family:var(--font); font-size:.84rem; font-weight:800;
  letter-spacing:-.01em; color:var(--text);
}
.ag-section-link {
  font-size:.72rem; color:var(--accent); cursor:pointer; font-weight:600;
  background:none; border:none; padding:0;
}
.ag-section-link:hover { text-decoration:underline; }

/* ── Template grid ───────────────────────────────────────── */
.ag-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin-bottom:32px;
}
.ag-card {
  border:1px solid var(--border); border-radius:14px; background:var(--bg2);
  overflow:hidden; cursor:pointer; transition:var(--transition);
  display:flex; flex-direction:column;
}
.ag-card:hover { box-shadow:var(--shadow); border-color:var(--border2); transform:translateY(-2px); }
.ag-card-thumb {
  height:80px; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; flex-shrink:0;
}
.ag-card-body { padding:12px 13px; flex:1; display:flex; flex-direction:column; gap:5px; }
.ag-card-tag {
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted);
}
.ag-card-name {
  font-family:var(--font); font-size:.86rem; font-weight:700;
  letter-spacing:-.01em; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.ag-card-meta {
  display:flex; align-items:center; gap:5px; font-size:.7rem; color:var(--muted);
  margin-top:2px;
}
.ag-mini-av {
  width:16px; height:16px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  font-size:.55rem; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.ag-card-rating { color:#f59e0b; font-weight:700; }
.ag-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:8px;
  border-top:1px solid var(--border);
}
.ag-price { font-size:.82rem; font-weight:800; color:var(--text); font-family:var(--font); }
.ag-price.free { color:var(--green,#22c55e); }
.ag-get-btn {
  padding:4px 12px; border-radius:7px; border:none; cursor:pointer;
  font-size:.72rem; font-weight:700; font-family:var(--font);
  background:var(--accent); color:#fff; transition:var(--transition);
}
.ag-get-btn:hover { opacity:.85; }
.ag-get-btn.owned { background:var(--bg3); color:var(--muted); cursor:default; }

/* ── Agents directory row ────────────────────────────────── */
.ag-agent-row {
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--border); cursor:pointer;
  transition:var(--transition);
}
.ag-agent-row:hover { background:var(--hover); margin:0 -12px; padding:12px 12px; border-radius:10px; }
.ag-agent-row:last-child { border-bottom:none; }
.ag-agent-av {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  font-size:1rem; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.ag-agent-info { flex:1; min-width:0; }
.ag-agent-name {
  font-size:.86rem; font-weight:700; display:flex; align-items:center; gap:5px;
}
.ag-verified-badge { color:#4f6ef7; font-size:.7rem; }
.ag-agent-stats { font-size:.72rem; color:var(--muted); margin-top:1px; }

/* ── Template detail view ────────────────────────────────── */
.ag-detail-wrap { max-width:900px; margin:0 auto; padding:24px 20px 60px; }
.ag-detail-grid {
  display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start;
}
.ag-detail-thumb {
  height:160px; border-radius:14px; display:flex;
  align-items:center; justify-content:center; font-size:3.5rem;
  margin-bottom:18px;
}
.ag-detail-cat  { font-size:.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.ag-detail-name { font-family:var(--font); font-size:1.4rem; font-weight:800; letter-spacing:-.03em; margin-bottom:12px; line-height:1.2; }
.ag-detail-agent-row {
  display:flex; align-items:center; gap:8px; font-size:.8rem;
  color:var(--text2); margin-bottom:16px;
}
.ag-detail-agent-av {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  font-size:.75rem; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.ag-detail-stars { color:#f59e0b; }
.ag-detail-desc { font-size:.84rem; color:var(--text2); line-height:1.65; margin-bottom:20px; }
.ag-detail-stats-row {
  display:flex; gap:16px; font-size:.78rem; color:var(--muted);
  padding:14px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  margin-bottom:20px;
}
.ag-detail-stats-row strong { color:var(--text2); }
.ag-detail-cta {
  width:100%; padding:12px; border:none; border-radius:10px; cursor:pointer;
  font-family:var(--font); font-size:.88rem; font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; transition:var(--transition); margin-bottom:10px;
}
.ag-detail-cta:hover { opacity:.88; }
.ag-detail-cta.owned { background:var(--bg3); color:var(--muted); cursor:default; }
.ag-detail-secondary {
  width:100%; padding:10px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg2); color:var(--text2); font-family:var(--font);
  font-size:.82rem; font-weight:600; cursor:pointer; transition:var(--transition);
}
.ag-detail-secondary:hover { border-color:var(--accent); color:var(--accent); }
.ag-detail-report {
  width:100%; margin-top:8px; padding:8px; border:1px solid transparent; border-radius:10px;
  background:none; color:var(--muted); font-family:var(--font);
  font-size:.76rem; font-weight:600; cursor:pointer; transition:var(--transition);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.ag-detail-report:hover { color:var(--red,#dc2626); border-color:var(--red,#dc2626); }
.ag-detail-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  padding:16px; margin-bottom:14px;
}
.ag-detail-card-title {
  font-size:.78rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); margin-bottom:12px;
}
.ag-included-item {
  display:flex; align-items:flex-start; gap:8px; padding:6px 0;
  font-size:.8rem; color:var(--text2); border-bottom:1px solid var(--border);
}
.ag-included-item:last-child { border-bottom:none; }
.ag-included-item i { color:var(--accent); margin-top:1px; flex-shrink:0; }
.ag-review-item { padding:10px 0; border-bottom:1px solid var(--border); }
.ag-review-item:last-child { border-bottom:none; }
.ag-review-header { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.ag-review-av {
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:var(--bg3); font-size:.65rem; font-weight:800; color:var(--text3);
  display:flex; align-items:center; justify-content:center;
}
.ag-review-name { font-size:.78rem; font-weight:700; }
.ag-review-stars { font-size:.72rem; color:#f59e0b; margin-left:auto; }
.ag-review-text { font-size:.78rem; color:var(--text2); line-height:1.5; }

/* ── Agent profile view ──────────────────────────────────── */
.ag-profile-wrap { max-width:900px; margin:0 auto; padding:24px 20px 60px; }
.ag-profile-hero {
  display:flex; align-items:flex-start; gap:16px;
  padding:20px; background:var(--bg2); border:1px solid var(--border);
  border-radius:16px; margin-bottom:24px;
}
.ag-profile-av {
  width:60px; height:60px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  font-size:1.5rem; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.ag-profile-info { flex:1; }
.ag-profile-name {
  font-family:var(--font); font-size:1.15rem; font-weight:800;
  display:flex; align-items:center; gap:8px; letter-spacing:-.02em;
}
.ag-profile-bio { font-size:.82rem; color:var(--muted); margin:4px 0 12px; }
.ag-profile-stats { display:flex; gap:20px; font-size:.78rem; color:var(--muted); }
.ag-profile-stats strong { color:var(--text2); display:block; font-size:1rem; font-weight:800; }
.ag-follow-btn {
  padding:8px 18px; border-radius:9px; border:none; cursor:pointer;
  font-family:var(--font); font-size:.78rem; font-weight:700;
  background:var(--accent); color:#fff; transition:var(--transition); flex-shrink:0;
}
.ag-follow-btn.following { background:var(--bg3); color:var(--text2); border:1px solid var(--border); }
.ag-follow-btn:hover { opacity:.85; }

/* ── Become an agent form ────────────────────────────────── */
.ag-apply-wrap { max-width:580px; margin:0 auto; padding:32px 20px 60px; }
.ag-apply-steps {
  display:flex; justify-content:center; gap:0; margin-bottom:32px;
}
.ag-apply-step {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  flex:1; position:relative;
}
.ag-apply-step::before {
  content:''; position:absolute; top:14px; left:50%; width:100%; height:2px;
  background:var(--border); z-index:0;
}
.ag-apply-step:last-child::before { display:none; }
.ag-step-dot {
  width:28px; height:28px; border-radius:50%; border:2px solid var(--border);
  background:var(--bg2); display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800; color:var(--muted); position:relative; z-index:1;
  transition:var(--transition);
}
.ag-apply-step.active .ag-step-dot { border-color:var(--accent); background:var(--accent); color:#fff; }
.ag-apply-step.done   .ag-step-dot { border-color:var(--accent); background:var(--accent); color:#fff; }
.ag-step-label { font-size:.65rem; color:var(--muted); text-align:center; font-weight:600; }
.ag-apply-step.active .ag-step-label { color:var(--accent); }
.ag-apply-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:24px;
  margin-bottom:16px;
}
.ag-apply-title {
  font-family:var(--font); font-size:1.1rem; font-weight:800; margin-bottom:4px;
}
.ag-apply-sub { font-size:.82rem; color:var(--muted); margin-bottom:20px; }
.ag-field { margin-bottom:14px; }
.ag-field label { font-size:.75rem; font-weight:700; color:var(--text2); display:block; margin-bottom:5px; }
.ag-field input, .ag-field textarea, .ag-field select {
  width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:9px;
  background:var(--bg3); color:var(--text); font-family:var(--font); font-size:.84rem;
  transition:var(--transition); box-sizing:border-box; resize:vertical;
}
.ag-field input:focus, .ag-field textarea:focus, .ag-field select:focus {
  outline:none; border-color:var(--accent);
}
.ag-spec-grid { display:flex; flex-wrap:wrap; gap:7px; }
.ag-spec-chip {
  padding:5px 12px; border:1px solid var(--border); border-radius:20px;
  background:var(--bg3); color:var(--text3); font-size:.75rem; font-weight:600;
  cursor:pointer; transition:var(--transition); font-family:var(--font);
}
.ag-spec-chip.sel { background:var(--accent); border-color:var(--accent); color:#fff; }
.ag-earn-card {
  background:linear-gradient(135deg,var(--accent)12,var(--accent2)08);
  border:1px solid var(--accent)30; border-radius:12px; padding:14px; margin-bottom:16px;
}
.ag-apply-nav { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.ag-btn-next {
  padding:10px 24px; border:none; border-radius:9px; cursor:pointer;
  font-family:var(--font); font-size:.84rem; font-weight:700;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;
  transition:var(--transition);
}
.ag-btn-next:hover { opacity:.88; }
.ag-btn-back {
  padding:10px 18px; border:1px solid var(--border); border-radius:9px; cursor:pointer;
  font-family:var(--font); font-size:.84rem; font-weight:600;
  background:var(--bg2); color:var(--text2); transition:var(--transition);
}
.ag-btn-back:hover { border-color:var(--accent); color:var(--accent); }

/* ── Creator dashboard ───────────────────────────────────── */
.ag-dash-wrap { max-width:900px; margin:0 auto; padding:24px 20px 60px; }
.ag-dash-tabs { display:flex; gap:4px; margin-bottom:24px; border-bottom:1px solid var(--border); }
.ag-dash-tab {
  padding:8px 16px; font-size:.78rem; font-weight:700; color:var(--muted);
  background:none; border:none; cursor:pointer; transition:var(--transition);
  border-bottom:2px solid transparent; margin-bottom:-1px; font-family:var(--font);
}
.ag-dash-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.ag-dash-tab:hover  { color:var(--text2); }
.ag-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:24px; }
.ag-stat-card {
  background:var(--bg2); border:1px solid var(--border);
  border-top:3px solid var(--c1,var(--accent));
  border-radius:12px; padding:14px 12px;
}
.ag-stat-label { font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.ag-stat-val { font-size:1.4rem; font-weight:800; font-family:var(--font); letter-spacing:-.03em; }
.ag-bar-chart { margin-bottom:24px; }
.ag-bar-row { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:.78rem; }
.ag-bar-label { width:130px; flex-shrink:0; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-bar-track { flex:1; height:7px; background:var(--border); border-radius:4px; overflow:hidden; }
.ag-bar-fill  { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .6s ease; }
.ag-bar-val { width:48px; text-align:right; color:var(--muted); flex-shrink:0; }
.ag-tpl-table { width:100%; border-collapse:collapse; font-size:.8rem; margin-bottom:24px; }
.ag-tpl-table th {
  text-align:left; padding:8px 10px; font-size:.68rem; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--border);
}
.ag-tpl-table td { padding:10px; border-bottom:1px solid var(--border); color:var(--text2); }
.ag-tpl-table tr:hover td { background:var(--hover); }
.ag-status-badge {
  display:inline-block; padding:2px 9px; border-radius:20px;
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.ag-status-badge.live     { background:#22c55e20; color:#22c55e; }
.ag-status-badge.draft    { background:var(--bg3); color:var(--muted); }
.ag-status-badge.review   { background:#f59e0b20; color:#f59e0b; }
.ag-status-badge.suspended{ background:#ef444420; color:#ef4444; }
.ag-earnings-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.ag-earnings-table th {
  text-align:left; padding:8px 10px; font-size:.68rem; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:.05em;
  border-bottom:2px solid var(--border);
}
.ag-earnings-table td { padding:9px 10px; border-bottom:1px solid var(--border); color:var(--text2); }
.ag-payout-card {
  background:linear-gradient(135deg,#22c55e12,transparent);
  border:1px solid #22c55e30; border-radius:12px; padding:16px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:space-between;
}

/* ── Template builder ────────────────────────────────────── */
.ag-builder-wrap { max-width:680px; margin:0 auto; padding:24px 20px 60px; }
.ag-builder-steps {
  display:flex; gap:6px; margin-bottom:24px;
}
.ag-builder-step {
  flex:1; height:4px; border-radius:2px; background:var(--border); transition:var(--transition);
}
.ag-builder-step.done   { background:var(--accent); }
.ag-builder-step.active { background:var(--accent2,#7c3aed); }
.ag-pricing-toggle {
  display:flex; background:var(--bg3); border-radius:9px; padding:3px; gap:3px;
  margin-bottom:16px;
}
.ag-pricing-opt {
  flex:1; padding:7px 0; text-align:center; border:none; background:none;
  border-radius:7px; font-family:var(--font); font-size:.8rem; font-weight:700;
  color:var(--muted); cursor:pointer; transition:var(--transition);
}
.ag-pricing-opt.active { background:var(--bg); box-shadow:0 1px 3px rgba(0,0,0,.2); color:var(--text); }
.ag-preview-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; max-width:240px;
}
.ag-color-picker { display:flex; gap:7px; flex-wrap:wrap; }
.ag-color-swatch {
  width:28px; height:28px; border-radius:7px; cursor:pointer; border:2px solid transparent;
  transition:var(--transition);
}
.ag-color-swatch.sel { border-color:var(--text); transform:scale(1.1); }
.ag-contents-check { display:flex; flex-direction:column; gap:8px; }
.ag-content-row {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--border); border-radius:9px; background:var(--bg3);
  cursor:pointer; transition:var(--transition);
}
.ag-content-row:hover { border-color:var(--accent); }
.ag-content-row.sel { border-color:var(--accent); background:var(--accent)10; }
.ag-content-row input[type=checkbox] { accent-color:var(--accent); width:14px; height:14px; flex-shrink:0; }
.ag-content-icon { font-size:1.1rem; flex-shrink:0; }
.ag-content-info { flex:1; }
.ag-content-name { font-size:.82rem; font-weight:700; }
.ag-content-desc { font-size:.7rem; color:var(--muted); }

/* ── Directory ───────────────────────────────────────────── */
.ag-dir-wrap { max-width:860px; margin:0 auto; padding:24px 20px 60px; }
.ag-dir-sort { display:flex; gap:8px; margin-bottom:20px; }
.ag-dir-sort-btn {
  padding:5px 13px; border:1px solid var(--border); border-radius:7px;
  background:var(--bg2); color:var(--text3); font-size:.74rem; font-weight:600;
  cursor:pointer; transition:var(--transition); font-family:var(--font);
}
.ag-dir-sort-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── Empty / error states ────────────────────────────────── */
.ag-empty {
  text-align:center; padding:60px 20px; color:var(--muted); font-size:.84rem;
}
.ag-empty-icon { font-size:2.4rem; margin-bottom:10px; }

/* ── Launch / empty hero ─────────────────────────────────── */
.ag-launch-hero {
  text-align:center; padding:48px 24px 40px;
  background:var(--card); border:1px dashed var(--border); border-radius:16px;
  margin:4px 0 8px;
}
.ag-launch-icon { font-size:2.8rem; margin-bottom:14px; }
.ag-launch-title { font-size:1.1rem; font-weight:700; color:var(--fg); margin-bottom:8px; }
.ag-launch-desc { font-size:.84rem; color:var(--muted); max-width:360px; margin:0 auto 18px; line-height:1.55; }

/* ── Success install toast ───────────────────────────────── */
.ag-install-success {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:var(--green,#22c55e); color:#fff; border-radius:30px;
  padding:10px 22px; font-size:.84rem; font-weight:700; font-family:var(--font);
  box-shadow:0 4px 20px rgba(0,0,0,.3); z-index:9999; animation:ag-fadeup .3s ease;
  pointer-events:none;
}
@keyframes ag-fadeup { from { opacity:0; transform:translateX(-50%) translateY(10px); } }

/* ── Marketplace search bar ──────────────────────────────── */
.ag-search-bar {
  display:flex; align-items:center; gap:8px;
  background:var(--bg2); border:1.5px solid var(--border); border-radius:10px;
  padding:8px 12px; margin-bottom:14px; transition:border-color .2s;
}
.ag-search-bar:focus-within { border-color:var(--accent); }
.ag-search-bar > i { color:var(--muted); font-size:.9rem; flex-shrink:0; }
.ag-search-bar input {
  flex:1; border:none; background:none; outline:none;
  font-size:.84rem; color:var(--text); font-family:inherit;
}
.ag-search-bar input::placeholder { color:var(--muted); }
.ag-search-clear {
  width:18px; height:18px; border-radius:50%; border:none;
  background:var(--muted); color:#fff; cursor:pointer;
  font-size:.6rem; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; line-height:1; opacity:.65; transition:opacity .15s;
}
.ag-search-clear:hover { opacity:1; }

/* ── Builder step 2 — content editor ────────────────────── */
.ag-contents-list { display:flex; flex-direction:column; gap:8px; }
.ag-content-section {
  border:1.5px solid var(--border); border-radius:12px; overflow:hidden;
  transition:border-color .2s;
}
.ag-content-section.open { border-color:var(--accent); }
.ag-content-header {
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  cursor:pointer; user-select:none; background:var(--bg2);
  transition:background .15s;
}
.ag-content-header:hover { background:var(--bg3); }
.ag-content-icon { font-size:1.15rem; flex-shrink:0; }
.ag-content-info { flex:1; min-width:0; }
.ag-content-name { font-size:.83rem; font-weight:700; color:var(--text); }
.ag-content-desc { font-size:.71rem; color:var(--muted); }
.ag-content-count {
  font-size:.68rem; font-weight:700; color:var(--accent);
  background:var(--accent)15; border-radius:20px; padding:2px 8px;
  white-space:nowrap; flex-shrink:0;
}
.ag-content-chevron {
  font-size:.78rem; color:var(--muted); flex-shrink:0;
  transition:transform .2s;
}
.ag-content-section.open .ag-content-chevron { transform:rotate(90deg); }
.ag-content-editor {
  padding:12px 14px; background:var(--bg);
  border-top:1px solid var(--border);
}
.ag-items-list { display:flex; flex-direction:column; gap:7px; margin-bottom:10px; }
.ag-item-row {
  display:flex; align-items:center; gap:7px;
}
.ag-item-row input,
.ag-item-row select {
  padding:6px 9px; border:1px solid var(--border); border-radius:7px;
  background:var(--bg2); color:var(--text); font-size:.78rem;
  font-family:inherit; outline:none; transition:border-color .15s;
}
.ag-item-row input:focus,
.ag-item-row select:focus { border-color:var(--accent); }
.ag-item-row input { min-width:0; }
.ag-item-row select { flex-shrink:0; }
.ag-item-del {
  width:26px; height:26px; border-radius:6px; border:1px solid var(--border);
  background:none; cursor:pointer; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:var(--transition); font-size:.8rem;
}
.ag-item-del:hover {
  background:#ef444410; color:#ef4444; border-color:#ef444440;
}
.ag-add-item-btn {
  display:inline-flex; align-items:center; gap:5px; padding:6px 11px;
  border:1.5px dashed var(--border); border-radius:8px;
  background:none; color:var(--accent); font-size:.75rem; font-weight:700;
  cursor:pointer; font-family:inherit; transition:var(--transition);
}
.ag-add-item-btn:hover {
  border-color:var(--accent); background:var(--accent)08;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:900px) {
  .ag-grid { grid-template-columns:repeat(2,1fr); }
  .ag-detail-grid { grid-template-columns:1fr; }
  .ag-featured { grid-template-columns:1fr; }
  .ag-feat-thumb { min-height:100px; }
  .ag-stat-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .ag-grid { grid-template-columns:1fr; }
  .ag-topbar { padding:0 12px; }
  .ag-tb-btn span { display:none; }
}

/* ── NGN / Currency toggle ───────────────────────────────── */
.ag-currency-toggle {
  display:flex; align-items:center; background:var(--bg3);
  border:1px solid var(--border); border-radius:8px; padding:2px;
  gap:2px; flex-shrink:0;
}
.ag-currency-opt {
  padding:4px 10px; border-radius:6px; border:none; background:none;
  font-size:.72rem; font-weight:700; color:var(--muted); cursor:pointer;
  transition:var(--transition); font-family:var(--font); white-space:nowrap;
}
.ag-currency-opt.active {
  background:var(--bg); color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.ag-currency-opt.ngn.active { color:#22c55e; }
.ag-currency-opt.usd.active { color:var(--accent); }

/* ── Paystack button ─────────────────────────────────────── */
.ag-paystack-btn {
  display:flex; align-items:center; gap:7px; width:100%;
  padding:11px 14px; border:none; border-radius:10px; cursor:pointer;
  font-family:var(--font); font-size:.88rem; font-weight:700;
  background:#0ba4db; color:#fff; transition:var(--transition);
  margin-bottom:8px; justify-content:center;
}
.ag-paystack-btn:hover { background:#0991c4; }
.ag-paystack-btn .ag-paystack-logo {
  font-size:.72rem; background:#fff; color:#0ba4db;
  border-radius:4px; padding:1px 5px; font-weight:900; letter-spacing:.03em;
}
.ag-paystack-btn.disabled { opacity:.5; cursor:not-allowed; }

/* NGN price display */
.ag-price-ngn {
  font-size:.72rem; color:var(--muted); margin-top:1px;
  font-weight:600;
}
.ag-price.ngn-active { display:none; }
.ag-currency-ngn .ag-price { display:none; }
.ag-currency-ngn .ag-price-ngn { display:block !important; color:var(--green,#22c55e); }

/* ── NGN price badge on cards ────────────────────────────── */
.ag-ngn-price {
  font-size:.8rem; font-weight:800; font-family:var(--font);
  color:#22c55e;
}
.ag-ngn-price.free { color:var(--green,#22c55e); }

/* ── Payment method selector ─────────────────────────────── */
.ag-pay-methods {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;
}
.ag-pay-method {
  border:2px solid var(--border); border-radius:10px; padding:12px 10px;
  cursor:pointer; text-align:center; transition:var(--transition);
  background:var(--bg2);
}
.ag-pay-method:hover { border-color:var(--accent); }
.ag-pay-method.active.stripe  { border-color:var(--accent); background:var(--accent)10; }
.ag-pay-method.active.paystack{ border-color:#0ba4db; background:#0ba4db10; }
.ag-pay-method-icon { font-size:1.3rem; margin-bottom:4px; }
.ag-pay-method-label { font-size:.72rem; font-weight:700; color:var(--text2); }
.ag-pay-method-sub   { font-size:.65rem; color:var(--muted); margin-top:1px; }

/* override csp-types inside modal to have horizontal padding */
#create-space-modal .csp-types  { padding: 0 20px; }
#create-space-modal #csp-name-row { padding: 0 20px; }
#create-space-modal .csp-footer  {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL DIALOG MODAL  (siModal)
   Replaces all native prompt() / confirm() / alert() calls
   ═══════════════════════════════════════════════════════════════ */
/* Generic modal backdrop — used by pricing modal and other ad-hoc modals */
.si-modal-bg {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  z-index: 9999; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto;
}
.si-modal-bg[style*="flex"] { display: flex !important; }
.si-modal {
  position: relative; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 18px; width: 100%; box-shadow: 0 24px 64px rgba(0,0,0,.4);
  animation: si-modal-in .18s cubic-bezier(.34,1.3,.64,1);
  max-height: 90vh; overflow-y: auto;
}
.si-modal-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--bg3); border: none; border-radius: 50%;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text3); font-size: .85rem; z-index: 2;
}
.si-modal-close:hover { background: var(--border); color: var(--fg); }

.si-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
  z-index: 9999; align-items: center; justify-content: center; padding: 20px;
}
.si-modal-overlay.open { display: flex; }
@keyframes si-modal-in {
  from { opacity:0; transform:translateY(10px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.si-modal-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; width: 100%; max-width: 420px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35); overflow: hidden;
  animation: si-modal-in .18s cubic-bezier(.34,1.3,.64,1);
}
.si-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px; border-bottom: 1px solid var(--border);
}
.si-modal-title { font-size: .9rem; font-weight: 700; color: var(--text1); }
.si-modal-x {
  width: 26px; height: 26px; border: none; background: none;
  color: var(--text3); cursor: pointer; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; transition: background .12s, color .12s;
}
.si-modal-x:hover { background: var(--bg3); color: var(--text1); }
.si-modal-desc { padding: 10px 18px 0; font-size: .78rem; color: var(--text3); line-height: 1.5; }
.si-modal-body { padding: 14px 18px; }
.si-modal-form-body { padding: 14px 18px; max-height: 55vh; overflow-y: auto; }
.si-modal-confirm-body { padding: 16px 18px 6px; }
.si-modal-confirm-msg { font-size: .86rem; color: var(--text2); line-height: 1.65; margin: 0; }
.si-modal-input {
  width: 100%; background: var(--bg3); border: 1.5px solid var(--border);
  border-radius: 8px; color: var(--text1); font-size: .86rem;
  padding: 9px 12px; outline: none; font-family: var(--font);
  box-sizing: border-box; transition: border-color .15s;
}
.si-modal-input:focus { border-color: var(--accent); }
.si-modal-textarea { resize: vertical; min-height: 72px; }
.si-modal-field { margin-bottom: 14px; }
.si-modal-field:last-child { margin-bottom: 0; }
.si-modal-label {
  display: block; font-size: .72rem; font-weight: 700; color: var(--text3);
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: .05em;
}
.si-modal-emoji-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.si-modal-emoji-btn {
  width: 36px; height: 36px; border: 2px solid transparent;
  background: var(--bg3); border-radius: 8px; font-size: 1.1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, background .12s;
}
.si-modal-emoji-btn:hover { background: var(--border); }
.si-modal-emoji-btn.sel { border-color: var(--accent); background: var(--teal2); }
.si-modal-ft {
  display: flex; gap: 8px; padding: 12px 18px 16px;
  border-top: 1px solid var(--border); justify-content: flex-end;
}
.si-modal-btn {
  padding: 8px 20px; border-radius: 8px; font-size: .82rem;
  font-weight: 700; cursor: pointer; border: none;
  font-family: var(--font); transition: opacity .15s, background .15s;
}
.si-modal-btn-cancel { background: var(--bg3); color: var(--text2); }
.si-modal-btn-cancel:hover { background: var(--border); }
.si-modal-btn-primary { background: var(--accent); color: #fff; }
.si-modal-btn-primary:hover { opacity: .85; }
.si-modal-btn-primary.danger { background: var(--red3,#ef4444); }

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING FLOW
   Shown once to new users after first sign-up
   ═══════════════════════════════════════════════════════════════ */
.si-onboard-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
@keyframes si-ob-in {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.si-onboard-box {
  width: 100%; max-width: 540px; text-align: center;
  animation: si-ob-in .3s cubic-bezier(.34,1.2,.64,1);
}
.si-ob-logo {
  font-size: 1.4rem; font-weight: 800; color: var(--accent);
  letter-spacing: -.03em; margin-bottom: 32px;
}
.si-ob-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 36px; }
.si-ob-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border); transition: background .25s, width .25s;
}
.si-ob-dot.active { background: var(--accent); width: 20px; border-radius: 4px; }
.si-ob-emoji { font-size: 3rem; margin-bottom: 16px; }
.si-ob-title { font-size: 1.6rem; font-weight: 800; color: var(--text1); line-height: 1.2; margin-bottom: 10px; }
.si-ob-sub { font-size: .9rem; color: var(--text3); line-height: 1.6; margin-bottom: 32px; max-width: 380px; margin-left: auto; margin-right: auto; }
.si-ob-role-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 32px; }
.si-ob-role-card {
  padding: 18px 12px; border: 2px solid var(--border); border-radius: 14px;
  background: var(--bg2); cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.si-ob-role-card:hover { border-color: var(--accent); background: var(--teal2); transform: translateY(-2px); }
.si-ob-role-card.sel { border-color: var(--accent); background: linear-gradient(135deg,var(--teal2),var(--accent2)18); box-shadow: 0 0 0 1px var(--accent); }
.si-ob-role-card .si-ob-role-icon { font-size: 2rem; }
.si-ob-role-card .si-ob-role-label { font-size: .85rem; font-weight: 700; color: var(--text1); }
.si-ob-role-card .si-ob-role-desc { font-size: .7rem; color: var(--text3); text-align: center; line-height: 1.4; }
.si-ob-goal-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; text-align: left; }
.si-ob-goal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.si-ob-input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--bg2); color: var(--text); font-family: var(--font-body); font-size: .88rem;
  outline: none; box-sizing: border-box; transition: border-color .15s;
}
.si-ob-input:focus { border-color: var(--accent); }
.si-ob-input::placeholder { color: var(--text4); }
.si-ob-select {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--bg2); color: var(--text); font-family: var(--font-body); font-size: .88rem;
  outline: none; box-sizing: border-box; appearance: none;
}
.si-ob-skip-step { background: none; border: none; color: var(--text4); font-size: .78rem; cursor: pointer; font-family: var(--font); text-decoration: underline; }
.si-ob-skip-step:hover { color: var(--text2); }
.si-ob-int-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 28px; }
.si-ob-int-btn {
  padding: 14px 8px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--bg2); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 7px; transition: border-color .15s, background .15s; font-family: var(--font);
}
.si-ob-int-btn:hover { border-color: var(--accent); background: var(--teal2); }
.si-ob-int-btn.done { border-color: var(--teal); background: #0fdbad12; }
.si-ob-int-icon { font-size: 1.5rem; }
.si-ob-int-label { font-size: .72rem; font-weight: 700; color: var(--text2); }
.si-ob-done-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.si-ob-action-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg2);
  cursor: pointer; text-align: left; font-family: var(--font); transition: border-color .15s, background .15s;
}
.si-ob-action-card:hover { border-color: var(--accent); background: var(--teal2); }
.si-ob-action-icon { font-size: 1.4rem; flex-shrink: 0; }
.si-ob-action-label { font-size: .82rem; font-weight: 700; color: var(--text1); }
.si-ob-action-desc  { font-size: .72rem; color: var(--text3); margin-top: 1px; }
.si-ob-actions { display: flex; gap: 10px; justify-content: center; align-items: center; }
.si-ob-btn-pri {
  padding: 12px 32px; background: var(--accent); color: #fff;
  border: none; border-radius: 10px; font-size: .88rem; font-weight: 700;
  cursor: pointer; font-family: var(--font); transition: opacity .15s;
}
.si-ob-btn-pri:hover { opacity: .85; }
.si-ob-btn-sec {
  padding: 12px 20px; background: none; color: var(--text3);
  border: none; font-size: .82rem; cursor: pointer; font-family: var(--font);
  transition: color .15s;
}
.si-ob-btn-sec:hover { color: var(--text1); }
.si-ob-skip { position: absolute; top: 18px; right: 20px; background: none; border: none; color: var(--text4); font-size: .8rem; cursor: pointer; font-family: var(--font); }
.si-ob-skip:hover { color: var(--text2); }
@media (max-width:480px) {
  .si-ob-role-grid  { grid-template-columns: 1fr; }
  .si-ob-int-grid   { grid-template-columns: 1fr; }
  .si-ob-goal-row   { grid-template-columns: 1fr; }
  .si-ob-title      { font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV  — 3 tabs: Today · AI · Me
   ═══════════════════════════════════════════════════════════════ */
.mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 8000;
  background: var(--bg2); border-top: 1px solid var(--border);
  padding: 0 0 env(safe-area-inset-bottom, 0);
}
.mobile-nav-inner {
  display: flex; align-items: flex-end; justify-content: space-around;
  height: 60px;
}
.mob-nav-btn {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  padding: 8px 0 6px; flex: 1; min-height: 52px;
  color: var(--muted); transition: color .15s;
}
.mob-nav-btn.active { color: var(--teal); }
.mob-nav-btn i      { font-size: 1.2rem; }
.mob-nav-btn span   { font-size: .62rem; font-weight: 700; letter-spacing: .02em; }

/* ── AI centre tab — glowing orb ── */
.mob-ai-btn         { position: relative; }
.mob-ai-orb {
  width: 42px; height: 42px; border-radius: 14px;
  background: var(--teal); margin-bottom: 2px; margin-top: -8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px rgba(13,122,95,.5);
  transition: box-shadow .2s, transform .15s;
}
.mob-ai-btn.active .mob-ai-orb {
  box-shadow: 0 0 24px rgba(13,122,95,.7);
  transform: translateY(-2px);
}
.mob-ai-btn .mob-ai-orb i { font-size: 1.15rem; color: #fff; }
.mob-ai-btn.active { color: var(--teal); }
.mob-ai-btn span    { font-size: .62rem; font-weight: 700; }

/* ── FAB (quick capture) ── */
.mob-fab {
  display: none;
  position: fixed; bottom: 76px; right: 18px; z-index: 7999;
  width: 50px; height: 50px; border-radius: 25px;
  background: var(--teal); border: none; cursor: pointer;
  align-items: center; justify-content: center;
  color: #fff; font-size: 1.4rem;
  box-shadow: 0 4px 16px rgba(13,122,95,.45);
  transition: transform .15s, box-shadow .15s;
}
.mob-fab:active { transform: scale(.92); }

@media (max-width: 720px) {
  .mobile-nav { display: block; }
  .mob-fab    { display: flex; }
  .main       { padding-bottom: 60px !important; }
}

/* ── Me mobile panel ── */
#panel-me-mobile .me-profile-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 18px; padding: 16px; margin-bottom: 20px;
}
#panel-me-mobile .me-av {
  width: 52px; height: 52px; border-radius: 26px;
  background: var(--ai-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
#panel-me-mobile .me-name  { font-size: 1rem; font-weight: 800; color: var(--text1); }
#panel-me-mobile .me-plan  { font-size: .72rem; color: var(--text3); margin-top: 3px; }
#panel-me-mobile .me-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 10px; margin-bottom: 20px;
}
#panel-me-mobile .me-stat {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 10px; text-align: center;
}
#panel-me-mobile .me-stat-val { font-size: 1.6rem; font-weight: 800; color: var(--text1); letter-spacing: -.04em; }
#panel-me-mobile .me-stat-lbl { font-size: .68rem; color: var(--text3); margin-top: 3px; font-weight: 600; }
#panel-me-mobile .me-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px;
}
#panel-me-mobile .me-link-btn {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; text-align: left; transition: border-color .15s;
}
#panel-me-mobile .me-link-btn:hover { border-color: var(--teal); }
#panel-me-mobile .me-link-icon { font-size: 1.4rem; }
#panel-me-mobile .me-link-label { font-size: .88rem; font-weight: 700; color: var(--text1); }
#panel-me-mobile .me-link-sub   { font-size: .72rem; color: var(--text3); }
#panel-me-mobile .me-sign-out {
  width: 100%; padding: 13px; border-radius: 12px;
  border: 1px solid var(--border); background: none;
  color: var(--coral); font-family: var(--font); font-size: .88rem;
  font-weight: 700; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   ORG ANNOUNCEMENTS
   ═══════════════════════════════════════════════════════════════ */
.ann-compose-bar {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ann-compose-box {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
}
.ann-title-input {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  font-size: .88rem; font-weight: 600; font-family: var(--font);
}
.ann-title-input:focus { outline: none; border-color: var(--teal); }
.ann-body-input {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  font-size: .84rem; font-family: var(--font); resize: none; min-height: 56px;
}
.ann-body-input:focus { outline: none; border-color: var(--teal); }
.ann-compose-footer {
  display: flex; align-items: center; gap: 10px; padding-top: 4px;
}
.ann-post-btn {
  padding: 7px 18px; background: var(--teal); color: #fff;
  border: none; border-radius: 8px; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
.ann-post-btn:hover { opacity: .85; }
.ann-pin-toggle {
  display: flex; align-items: center; gap: 5px;
  font-size: .78rem; color: var(--muted); cursor: pointer;
}
.ann-feed { flex: 1; overflow-y: auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; }
.ann-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
}
.ann-card.pinned { border-color: var(--teal); background: var(--teal2,rgba(13,122,95,.06)); }
.ann-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ann-pin-badge {
  font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  background: var(--teal); color: #fff; text-transform: uppercase; letter-spacing: .06em;
}
.ann-card-title { font-size: .9rem; font-weight: 700; color: var(--fg); flex: 1; }
.ann-card-body  { font-size: .83rem; color: var(--text3); line-height: 1.6; }
.ann-card-meta  { font-size: .7rem; color: var(--muted); margin-top: 8px; }
.ann-del-btn {
  background: none; border: none; color: var(--muted); font-size: .8rem;
  cursor: pointer; padding: 3px 6px; border-radius: 6px; transition: color .12s;
}
.ann-del-btn:hover { color: var(--coral); }

/* ═══════════════════════════════════════════════════════════════
   ANALYTICS DASHBOARD
   ═══════════════════════════════════════════════════════════════ */
.analytics-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px;
}
.an-stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; text-align: center;
}
.an-stat-val  { font-size: 1.8rem; font-weight: 800; color: var(--fg); }
.an-stat-lbl  { font-size: .72rem; color: var(--muted); margin-top: 3px; }
.an-stat-teal .an-stat-val { color: var(--teal); }
.an-chart-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; margin-bottom: 16px;
}
.an-chart-title { font-size: .82rem; font-weight: 700; color: var(--fg); margin-bottom: 14px; }
.an-bar-chart {
  display: flex; align-items: flex-end; gap: 8px; height: 100px;
}
.an-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.an-bar-fill {
  width: 100%; border-radius: 4px 4px 0 0; background: var(--teal2);
  border-top: 2px solid var(--teal); min-height: 3px; transition: height .4s;
}
.an-bar-lbl { font-size: .6rem; color: var(--muted); }
.an-status-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.an-status-row { display: flex; align-items: center; gap: 10px; }
.an-status-label { font-size: .8rem; color: var(--fg); min-width: 80px; }
.an-status-bar-wrap { flex: 1; height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
.an-status-bar-fill { height: 100%; border-radius: 4px; transition: width .4s; }
.an-status-bar-fill.todo     { background: var(--muted); }
.an-status-bar-fill.inprog   { background: var(--teal); }
.an-status-bar-fill.done     { background: #22c55e; }
.an-status-bar-fill.blocked  { background: var(--coral); }
.an-status-count { font-size: .72rem; color: var(--muted); min-width: 30px; text-align: right; }
@media (max-width: 720px) {
  .analytics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .analytics-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   MONO INTEGRATION
   ═══════════════════════════════════════════════════════════════ */
.mono-connect-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px; text-align: center;
  max-width: 380px; margin: 20px auto;
}
.mono-logo {
  width: 52px; height: 52px; border-radius: 14px;
  background: #000; color: #fff; font-size: 1.2rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.mono-connect-title { font-size: 1rem; font-weight: 700; color: var(--fg); margin-bottom: 6px; }
.mono-connect-desc  { font-size: .82rem; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.mono-connect-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; background: #000; color: #fff; border: none;
  border-radius: 9px; font-size: .84rem; font-weight: 700; cursor: pointer;
  transition: opacity .15s;
}
.mono-connect-btn:hover { opacity: .8; }
.mono-account-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.mono-acc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mono-acc-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: #000; color: #fff; font-size: .8rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.mono-acc-name  { font-size: .9rem; font-weight: 700; color: var(--fg); }
.mono-acc-bank  { font-size: .74rem; color: var(--muted); }
.mono-bal-row   { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.mono-bal-label { font-size: .78rem; color: var(--muted); }
.mono-bal-val   { font-size: 1.1rem; font-weight: 800; color: var(--fg); }
.mono-txn-list  { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mono-txn-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.mono-txn-row:last-child { border-bottom: none; }
.mono-txn-narration { flex: 1; font-size: .82rem; color: var(--fg); }
.mono-txn-date  { font-size: .7rem; color: var(--muted); }
.mono-txn-amount { font-size: .84rem; font-weight: 700; }
.mono-txn-amount.credit { color: #22c55e; }
.mono-txn-amount.debit  { color: var(--coral); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Pricing modal — single column on mobile */
@media (max-width: 640px) {
  #pricing-cards { flex-direction: column !important; gap: 12px !important; }
  .pricing-card  { min-width: unset !important; max-width: 100% !important; }
}

/* Org chat mobile layout */
@media (max-width: 720px) {
  .os-pane-chat { flex-direction: column !important; }
  .oc-sidebar {
    width: 100% !important; height: 48px; flex-direction: row !important;
    overflow-x: auto; overflow-y: hidden !important;
    align-items: center; padding: 0 10px !important; gap: 4px;
    border-right: none !important; border-bottom: 1px solid var(--border);
  }
  .oc-ws-name { display: none; }
  .oc-section-lbl { display: none; }
  .oc-ch-item { flex-shrink: 0; white-space: nowrap; padding: 6px 10px; border-radius: 20px; }
  .oc-ch-item.active { background: var(--teal2); color: var(--teal); }
}

/* Doc editor on mobile — horizontal scroll, not wrap */
@media (max-width: 640px) {
  .dh-toolbar { flex-wrap: nowrap !important; overflow-x: auto !important; }
  .dh-tool-btn, .dh-tb-btn { flex-shrink: 0; min-height: 36px; }
}

/* Onboarding on mobile */
@media (max-width: 480px) {
  .si-onboard-box { padding: 0 8px; }
  .si-ob-actions  { flex-direction: column; gap: 6px; }
  .si-ob-btn-pri  { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING STEP 5 — Connect Integration
   ═══════════════════════════════════════════════════════════════ */
.si-ob-int-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px;
}
.si-ob-int-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px; background: var(--bg2); border: 2px solid var(--border);
  border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s;
  font-family: var(--font);
}
.si-ob-int-btn:hover  { border-color: var(--teal); background: var(--teal2); }
.si-ob-int-btn.done   { border-color: #22c55e; background: rgba(34,197,94,.07); }
.si-ob-int-icon { font-size: 1.5rem; }
.si-ob-int-label { font-size: .72rem; font-weight: 700; color: var(--text2); }
@media (max-width: 480px) {
  .si-ob-int-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   DOC EDITOR ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */
.dh-font-size-select {
  padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); font-size: .78rem;
  font-family: var(--font); cursor: pointer;
}
.dh-font-size-select:focus { outline: none; border-color: var(--teal); }
.dh-link-modal {
  position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dh-link-modal-box {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px;
}
.dh-link-modal-title { font-size: .92rem; font-weight: 700; color: var(--fg); }
.dh-link-input {
  padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--fg); font-size: .84rem; font-family: var(--font); width: 100%;
}
.dh-link-input:focus { outline: none; border-color: var(--teal); }
.dh-link-footer { display: flex; gap: 8px; justify-content: flex-end; }
.dh-link-cancel {
  padding: 7px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: none; cursor: pointer; font-size: .82rem; color: var(--fg);
}
.dh-link-insert {
  padding: 7px 18px; border-radius: 8px; border: none;
  background: var(--teal); color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer;
}

/* Doc hub toolbar — base styles (no base CSS existed) */
.dh-toolbar {
  display: flex; align-items: center; gap: 3px; padding: 6px 12px;
  border-bottom: 1px solid var(--border); background: var(--bg2);
  flex-shrink: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dh-toolbar::-webkit-scrollbar { display: none; }
.dh-tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; border-radius: 6px; border: none;
  background: transparent; color: var(--text3); font-family: var(--font);
  font-size: .82rem; cursor: pointer; transition: background .12s, color .12s;
  flex-shrink: 0;
}
.dh-tool-btn:hover { background: var(--bg3); color: var(--fg); }
.dh-sep {
  width: 1px; height: 18px; background: var(--border);
  margin: 0 3px; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE FULL POLISH
   All 12 issues addressed systematically.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

  /* ── 1. Layout — account for topbar + bottom nav height ────── */
  .layout {
    /* CSS custom property so panels can reference it */
    --mob-nav-h: 60px;
  }
  /* The main area must shrink by bottom nav height on mobile */
  .main {
    padding-bottom: var(--mob-nav-h) !important;
  }
  /* Sidebar must stop above bottom nav so upgrade btn is reachable */
  .sidebar {
    bottom: var(--mob-nav-h) !important;
  }

  /* ── 2. Chat bar — lift above bottom nav ─────────────────────
     The panel-chat uses flex column; chat-bar is the last child.
     Adding padding-bottom here gives breathing room above the nav. */
  .chat-bar {
    margin-bottom: 0 !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  }
  /* Org chat input bar */
  .oc-bar {
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  }

  /* ── 3. Org tabs — all 9 tabs scrollable without wrapping ─── */
  .os-tabs {
    padding: 0 8px !important;
    gap: 0 !important;
  }
  .os-tab {
    padding: 10px 10px !important;
    font-size: .75rem !important;
    min-height: 44px;
  }

  /* ── 4. Touch targets — min 44×44 px for all tappable things ─ */
  .nav-btn { min-height: 44px; }
  .tb-icon-btn,
  .chat-icon-btn,
  .chat-send-btn,
  .si-modal-close,
  .os-card-link,
  .os-tool-btn { min-height: 44px; min-width: 44px; }
  .mob-nav-btn { min-height: 52px; }

  /* ── 5. Personal & academic space tabs ───────────────────────
     Already have overflow-x:auto but need tab padding tightened */
  .sp-tab { padding: 10px 10px !important; font-size: .76rem !important; min-height: 44px; }

  /* ── 6. Home dashboard grid — single column ──────────────────  */
  .home-grid { grid-template-columns: 1fr !important; }

  /* ── 7. Doc editor toolbars — horizontal scroll not wrap ─────
     Override "flex-wrap:wrap" which creates 3 rows on small screens */
  .dh-toolbar,
  .doc-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  .dh-tool-btn,
  .doc-tb-btn { min-height: 38px; }

  /* ── 8. Profile dropdown — prevent off-screen right ─────────
     On small phones right:0 can still overflow; clamp to viewport */
  .profile-dropdown {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 16px);
  }

  /* ── 9. Library / integrations grids ─────────────────────────
     3-column int-grid is too cramped; collapse to 2 then 1 */
  .int-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .lib-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── 10. Topbar — tighten on small screens ───────────────────
     The right action icons remain, search hidden (done already) */
  .tb-brand { gap: 6px; }
  .tb-name  { font-size: 13px; }

  /* ── 11. Org chat mobile — horizontal channel bar (override) ─
     Already set in earlier media query, adding height fix */
  .oc-sidebar { min-height: 48px !important; max-height: 48px !important; }
  .oc-main    { flex: 1; min-height: 0; }

  /* ── 12. Analytics grid — 2 columns on tablet ───────────────── */
  .analytics-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── iOS font-size zoom fix — must be at least 16px on input focus ─
   Scoped to mobile only so desktop keeps smaller, nicer type.       */
@media (max-width: 720px) {
  input:not([type=range]):not([type=checkbox]):not([type=radio]),
  textarea,
  select {
    font-size: 16px !important;
  }
  /* But keep placeholder styling readable */
  input::placeholder,
  textarea::placeholder { font-size: 14px !important; }
}

@media (max-width: 480px) {
  /* ── Bottom nav — safe area aware height ────────────────────── */
  .mobile-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  }
  .layout { --mob-nav-h: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* ── Modals as bottom sheets ─────────────────────────────────
     On small phones, center modals feel cramped.
     Slide up from bottom instead — more thumb-friendly.          */
  .si-modal-bg {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .si-modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh !important;
    max-width: 100% !important;
    animation: si-modal-mob-in .22s cubic-bezier(.34,1.1,.64,1) !important;
  }
  @keyframes si-modal-mob-in {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .si-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .si-modal-box {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Pricing modal — full-width bottom sheet */
  #pricing-modal.si-modal-bg .si-modal {
    padding: 24px 16px 32px !important;
  }

  /* ── Integrations / library — single column ────────────────── */
  .int-grid { grid-template-columns: 1fr !important; }
  .lib-grid { grid-template-columns: 1fr !important; }

  /* ── Analytics — 2×3 grid on phone ─────────────────────────── */
  .analytics-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Org space ───────────────────────────────────────────────── */
  .os-hero { padding: 10px 12px !important; gap: 10px; }
  .os-stat { padding: 10px 12px !important; }
  .os-stat-row { grid-template-columns: repeat(2, 1fr) !important; }
  .os-scroll { padding: 12px !important; }
  .os-card { padding: 12px !important; }
  .os-grid2 { grid-template-columns: 1fr !important; }

  /* ── Topbar — show logo icon only, hide name text ───────────── */
  .tb-name { display: none; }

  /* ── Content padding ─────────────────────────────────────────── */
  .content { padding: 12px !important; }
  .view-head { padding: 0 12px !important; }

  /* ── Cards & grids ───────────────────────────────────────────── */
  .stat-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .h-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Onboarding ──────────────────────────────────────────────── */
  .si-ob-actions { flex-direction: column; gap: 8px; }
  .si-ob-btn-pri { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   PAYSTACK FINANCIAL DASHBOARD  — ps-* classes
   ═══════════════════════════════════════════════════════════════ */

/* Inner tab bar */
.ps-tab-bar {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  overflow-x: auto; flex-shrink: 0; scrollbar-width: none;
  background: var(--bg2);
}
.ps-tab-bar::-webkit-scrollbar { display: none; }
.ps-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 14px; font-size: .8rem; font-weight: 500; color: var(--text3);
  border: none; background: transparent; cursor: pointer; font-family: var(--font);
  border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0;
  transition: color .15s;
}
.ps-tab:hover { color: var(--text1); }
.ps-tab.on { color: var(--teal); border-bottom-color: var(--teal); }

/* Panes */
.ps-pane { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.ps-pane.on { display: flex; }

/* Loading state */
.ps-loading {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 48px 20px; font-size: .84rem; color: var(--text4);
}
@keyframes ps-spin { to { transform: rotate(360deg); } }
.ps-spin { display: inline-block; animation: ps-spin .8s linear infinite; }

/* Stat row */
.ps-stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px;
}
.ps-stat-row-3 { grid-template-columns: repeat(3, 1fr); }
.ps-stat {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 14px;
}
.ps-stat-green { border-color: var(--teal); }
.ps-stat-lbl { font-size: .72rem; color: var(--text4); margin-bottom: 4px; }
.ps-stat-val { font-size: 1.25rem; font-weight: 600; color: var(--text1); }
.ps-stat-sub { font-size: .72rem; margin-top: 3px; color: var(--text3); }
.ps-green { color: var(--teal) !important; }
.ps-amber { color: var(--amber3) !important; }

/* 2-column grid */
.ps-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }

/* Table rows */
.ps-th-row {
  display: grid; gap: 8px; padding: 7px 16px;
  border-bottom: 1px solid var(--border);
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text4);
}
.ps-tr {
  display: grid; gap: 8px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); font-size: .8rem; cursor: pointer;
  transition: background .1s;
}
.ps-tr:last-child { border-bottom: none; }
.ps-tr:hover { background: var(--bg3); }
.ps-ref { font-family: monospace; font-size: .72rem; color: var(--purple); }
.ps-cust-name { font-weight: 500; font-size: .82rem; }
.ps-cust-email { font-size: .7rem; color: var(--text4); }
.ps-amount { font-weight: 600; }
.ps-amount-g { color: var(--teal); }
.ps-amount-r { color: var(--red3); }
.ps-badge {
  display: inline-block; font-size: .68rem; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
}
.ps-badge-s { background: var(--green2); color: var(--green3); }
.ps-badge-f { background: var(--red2); color: var(--red3); }
.ps-badge-w { background: var(--amber2); color: var(--amber3); }
.ps-badge-n { background: var(--bg3); color: var(--text4); }
.ps-badge-i { background: var(--blue2); color: var(--blue); }

/* Filter bar */
.ps-filter-bar {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ps-select {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text2); font-size: .78rem;
  font-family: var(--font); cursor: pointer;
}
.ps-select:focus { outline: none; border-color: var(--teal); }

/* Channel bars */
.ps-ch-row { margin-bottom: 10px; }
.ps-ch-label { display: flex; justify-content: space-between; font-size: .78rem; margin-bottom: 3px; }
.ps-ch-val { font-weight: 600; }
.ps-ch-bar-bg { height: 5px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.ps-ch-bar-fill { height: 100%; border-radius: 3px; background: var(--teal); }

/* AI insights */
.ps-insights-wrap { display: flex; flex-direction: column; gap: 8px; }
.ps-insight {
  border-left: 3px solid; border-radius: 0 8px 8px 0;
  padding: 9px 12px; font-size: .8rem; line-height: 1.55;
}
.ps-insight-g { border-left-color: var(--teal); background: var(--teal2); }
.ps-insight-a { border-left-color: var(--amber3); background: var(--amber2); }
.ps-insight-b { border-left-color: var(--blue); background: var(--blue2); }

/* Bar chart */
.ps-bar-chart {
  display: flex; align-items: flex-end; gap: 5px; height: 80px; padding: 8px 0;
}
.ps-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ps-bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--teal); opacity: .7; min-height: 3px; }
.ps-bar-lbl { font-size: .68rem; color: var(--text4); white-space: nowrap; }

/* Weekday bars */
.ps-wd-row { display: flex; align-items: center; gap: 10px; font-size: .78rem; margin-bottom: 6px; }
.ps-wd-lbl { width: 28px; text-align: right; color: var(--text4); }
.ps-wd-bar-bg { flex: 1; height: 6px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.ps-wd-bar-fill { height: 100%; border-radius: 3px; background: var(--teal); }
.ps-wd-val { width: 70px; text-align: right; font-weight: 500; color: var(--text1); }

/* Rate bars */
.ps-rate-row { margin-bottom: 10px; }
.ps-rate-label { display: flex; justify-content: space-between; font-size: .78rem; margin-bottom: 4px; }
.ps-rate-val { font-weight: 600; }
.ps-rate-bg { height: 6px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.ps-rate-fill { height: 100%; border-radius: 3px; }

/* Connect card */
.ps-connect-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px; max-width: 400px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ps-connect-icon {
  width: 52px; height: 52px; border-radius: 13px;
  background: linear-gradient(135deg, #00c3f7, #0082eb);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff;
}
.ps-connect-title { font-size: 1.05rem; font-weight: 700; color: var(--text1); }
.ps-connect-sub { font-size: .82rem; color: var(--text3); line-height: 1.6; text-align: center; }
.ps-key-perms {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.ps-perm-row {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--text2); margin-bottom: 6px;
}
.ps-perm-row:last-child { margin-bottom: 0; }
.ps-connected-box {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: var(--green2); border: 1px solid var(--green3);
  border-radius: 8px; padding: 10px 14px; font-size: .82rem;
  font-weight: 600; color: var(--green3);
}
.ps-err { font-size: .78rem; color: var(--red3); padding: 6px 0; }

/* Responsive */
@media (max-width: 900px) {
  .ps-stat-row { grid-template-columns: repeat(2, 1fr); }
  .ps-stat-row-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ps-stat-row { grid-template-columns: repeat(2, 1fr) !important; }
  .ps-grid2 { grid-template-columns: 1fr !important; }
}

/* ── Quick-Add topbar button ───────────────────────────────── */
.tb-quickadd-btn {
  background: var(--teal) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  width: 32px !important;
  height: 32px !important;
}
.tb-quickadd-btn:hover { opacity: .88; }

/* ── NL Quick-Add overlay ─────────────────────────────────── */
.nl-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 2000;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.nl-overlay.open { display: flex; }
.nl-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius3);
  width: min(620px, calc(100vw - 2rem));
  box-shadow: var(--shadow3);
  animation: nlSlideIn .22s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}
@keyframes nlSlideIn {
  from { opacity: 0; transform: translateY(-16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
}
.nl-hint { font-size: .75rem; font-weight: 600; color: var(--text3); letter-spacing: .03em; text-transform: uppercase; }
.nl-close { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 1rem; padding: 2px 4px; border-radius: 6px; }
.nl-close:hover { background: var(--bg3); color: var(--text1); }
.nl-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.nl-spark { font-size: 1.1rem; color: var(--teal); flex-shrink: 0; }
.nl-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text1);
  font-weight: 500;
}
.nl-input::placeholder { color: var(--text4); font-weight: 400; font-size: .9rem; }
.nl-preview { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.nl-prev-label { font-size: .7rem; font-weight: 700; color: var(--text4); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.nl-prev-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.nl-badge {
  font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 99px;
  background: var(--teal2); color: var(--teal);
  text-transform: capitalize;
}
.nl-badge.goal   { background: var(--purple2); color: var(--purple); }
.nl-badge.note   { background: var(--bg3); color: var(--text2); }
.nl-prev-title { font-size: .9rem; font-weight: 600; color: var(--text1); flex: 1; }
.nl-prev-meta  { font-size: .78rem; color: var(--text3); font-weight: 500; }
.nl-prev-actions { display: flex; gap: 8px; }
.nl-btn-sec {
  flex: 1; padding: 9px; border-radius: var(--radius); border: 1px solid var(--border);
  background: none; color: var(--text2); font-family: var(--font); font-size: .85rem;
  font-weight: 600; cursor: pointer;
}
.nl-btn-sec:hover { background: var(--bg3); }
.nl-btn-pri {
  flex: 2; padding: 9px; border-radius: var(--radius); border: none;
  background: var(--teal); color: #fff; font-family: var(--font); font-size: .85rem;
  font-weight: 700; cursor: pointer;
}
.nl-btn-pri:hover { opacity: .88; }
.nl-examples {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.nl-ex-chip {
  font-size: .75rem; font-weight: 600; color: var(--text2);
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 99px; padding: 5px 12px; cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.nl-ex-chip:hover { background: var(--teal2); color: var(--teal); border-color: var(--teal); }

/* ── Weekly Review Panel ──────────────────────────────────── */
.review-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  max-width: var(--panel-max);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.review-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.review-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 18px 16px;
  text-align: center;
}
.rs-val { font-size: 1.5rem; font-weight: 800; color: var(--text1); letter-spacing: -.04em; line-height: 1; margin-bottom: 6px; }
.rs-lbl { font-size: .72rem; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.review-ai-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 24px;
}
.review-ai-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.review-ai-orb {
  width: 40px; height: 40px; border-radius: 14px;
  background: linear-gradient(135deg, var(--teal), var(--purple));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; flex-shrink: 0;
}
.review-ai-title { font-weight: 800; font-size: 1rem; color: var(--text1); }
.review-ai-week  { font-size: .78rem; color: var(--text3); margin-top: 2px; font-weight: 500; }
.review-ai-content {
  font-size: .9rem;
  color: var(--text2);
  line-height: 1.75;
  white-space: pre-wrap;
}
.review-ai-content strong { color: var(--text1); font-weight: 700; }
.review-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  gap: 12px;
}
.review-empty .es-orb {
  width: 60px; height: 60px; border-radius: 20px;
  background: var(--teal2); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 8px;
}
.review-empty .es-title { font-size: 1.1rem; font-weight: 800; color: var(--text1); }
.review-empty .es-sub { font-size: .875rem; color: var(--text3); max-width: 400px; line-height: 1.6; }
.review-empty .es-cta {
  margin-top: 8px; padding: 10px 22px;
  background: var(--teal); color: #fff; border: none; border-radius: var(--radius);
  font-family: var(--font); font-size: .88rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
}
.review-empty .es-cta:hover { opacity: .88; }
#review-gen-btn i { margin-right: 4px; }
@media (max-width: 700px) {
  .review-stats-row { grid-template-columns: repeat(2, 1fr); }
  .review-body { padding: 16px; }
}

/* ── Finance Panel ────────────────────────────────────────────── */
.fin-wrap { display:flex; flex-direction:column; gap:14px; padding:0 0 32px; }
.fin-tabs { display:flex; gap:6px; margin-bottom:2px; }
.fin-tab {
  padding:6px 14px; border-radius:20px; border:1px solid var(--border);
  background:none; color:var(--text3); font-family:var(--font); font-size:.78rem;
  font-weight:600; cursor:pointer; transition:all .15s;
}
.fin-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.fin-tab:not(.active):hover { border-color:var(--accent); color:var(--accent); }
.fin-summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.fin-stat {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:14px 12px; text-align:center;
}
.fin-stat-val { font-family:var(--font); font-size:1.15rem; font-weight:800; letter-spacing:-.02em; }
.fin-stat-lbl { font-size:.68rem; color:var(--text3); margin-top:3px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.fin-card {
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px;
}
.fin-card-title { font-family:var(--font); font-size:.8rem; font-weight:700; color:var(--text2); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.fin-tx-list { display:flex; flex-direction:column; gap:2px; }
.fin-tx {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:10px; transition:background .1s; cursor:default;
}
.fin-tx:hover { background:var(--surface2); }
.fin-tx-icon {
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:1rem; flex-shrink:0;
}
.fin-tx-icon.income  { background:#0fdbad18; }
.fin-tx-icon.expense { background:#f87171 18; }
.fin-tx-info { flex:1; min-width:0; }
.fin-tx-note { font-size:.82rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fin-tx-meta { font-size:.7rem; color:var(--text3); margin-top:1px; }
.fin-tx-amt { font-family:var(--font); font-size:.88rem; font-weight:700; white-space:nowrap; }
.fin-tx-amt.income  { color:var(--teal); }
.fin-tx-amt.expense { color:#f87171; }
.fin-tx-del { background:none; border:none; color:var(--text4); cursor:pointer; padding:4px; border-radius:6px; opacity:0; transition:opacity .1s; font-size:.8rem; }
.fin-tx:hover .fin-tx-del { opacity:1; }
.fin-tx-del:hover { color:#f87171; }
.fin-add-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fin-add-btn {
  display:flex; align-items:center; gap:5px; padding:8px 16px;
  border-radius:10px; border:none; font-family:var(--font); font-size:.8rem;
  font-weight:700; cursor:pointer; transition:all .15s;
}
.fin-add-btn.income  { background:#0fdbad18; color:var(--teal); }
.fin-add-btn.income:hover  { background:#0fdbad30; }
.fin-add-btn.expense { background:#f8717118; color:#f87171; }
.fin-add-btn.expense:hover { background:#f8717130; }
.fin-budget-row { display:flex; flex-direction:column; gap:10px; }
.fin-budget-item { display:flex; flex-direction:column; gap:4px; }
.fin-budget-head { display:flex; align-items:center; justify-content:space-between; }
.fin-budget-label { font-size:.78rem; font-weight:600; color:var(--text2); display:flex; align-items:center; gap:5px; }
.fin-budget-nums  { font-size:.72rem; color:var(--text3); }
.fin-budget-bar   { height:5px; background:var(--border2); border-radius:3px; overflow:hidden; }
.fin-budget-fill  { height:100%; border-radius:3px; transition:width .5s ease; }
.fin-budget-edit  {
  display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:4px;
}
.fin-budget-input {
  flex:1; min-width:80px; padding:6px 10px; border:1px solid var(--border);
  border-radius:8px; background:var(--bg2); color:var(--text); font-family:var(--font-body);
  font-size:.8rem; outline:none;
}
.fin-budget-input:focus { border-color:var(--accent); }
.fin-save-budget {
  padding:6px 12px; background:var(--accent); color:#fff; border:none;
  border-radius:8px; font-family:var(--font); font-size:.78rem; font-weight:700; cursor:pointer;
}
.fin-empty { text-align:center; padding:2rem 1rem; color:var(--text3); font-size:.82rem; }
.fin-bal-card {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:16px; padding:20px; color:#fff; position:relative; overflow:hidden;
}
.fin-bal-label { font-size:.72rem; font-weight:600; opacity:.8; text-transform:uppercase; letter-spacing:.06em; }
.fin-bal-amount { font-family:var(--font); font-size:2rem; font-weight:800; letter-spacing:-.03em; margin:4px 0 2px; }
.fin-bal-sub { font-size:.72rem; opacity:.75; }
.fin-bar-chart { display:flex; flex-direction:column; gap:6px; }
.fin-bar-row { display:grid; grid-template-columns:80px 1fr 60px; align-items:center; gap:8px; }
.fin-bar-cat { font-size:.72rem; color:var(--text3); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fin-bar-track { height:6px; background:var(--border2); border-radius:3px; overflow:hidden; }
.fin-bar-fill  { height:100%; border-radius:3px; transition:width .5s ease; }
.fin-bar-pct   { font-size:.7rem; color:var(--text3); text-align:right; }
@media (max-width:600px) {
  .fin-summary-grid { grid-template-columns:repeat(2,1fr); }
}

/* ── Agent selector chips in SIVA chat ───────────────────────── */
.agent-selector { display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:6px 16px 0; }
.agent-chip {
  display:flex; align-items:center; gap:5px; padding:5px 11px;
  border-radius:20px; border:1px solid var(--border); background:none;
  font-family:var(--font); font-size:.72rem; font-weight:600; color:var(--text3);
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.agent-chip.active {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-color:transparent; color:#fff;
}
.agent-chip.locked { opacity:.55; cursor:default; }
.agent-chip:not(.active):not(.locked):hover { border-color:var(--accent); color:var(--accent); }
.agent-chip-badge {
  font-size:.6rem; padding:1px 5px; border-radius:10px;
  font-weight:700; line-height:1.4;
}
.agent-chip.active .agent-chip-badge { background:#ffffff30; }
.agent-chip:not(.active) .agent-chip-badge { background:var(--accent2)20; color:var(--accent2); }

/* ── Skills Panel ─────────────────────────────────────────────── */
.sk-wrap { display:flex; flex-direction:column; gap:14px; padding-bottom:32px; }
.sk-summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sk-stat {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:14px 12px; text-align:center;
}
.sk-stat-val { font-family:var(--font); font-size:1.2rem; font-weight:800; letter-spacing:-.02em; }
.sk-stat-lbl { font-size:.68rem; color:var(--text3); margin-top:3px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.sk-card {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:16px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .15s;
}
.sk-card:hover { border-color:var(--accent); }
.sk-card-head { display:flex; align-items:center; gap:10px; }
.sk-emoji {
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:1.3rem; background:var(--surface2); flex-shrink:0;
}
.sk-info { flex:1; min-width:0; }
.sk-name { font-family:var(--font); font-size:.92rem; font-weight:800; color:var(--text); }
.sk-meta { display:flex; align-items:center; gap:6px; margin-top:2px; flex-wrap:wrap; }
.sk-cat-badge {
  font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:10px;
  background:var(--accent)18; color:var(--accent); letter-spacing:.03em;
}
.sk-level-label { font-size:.7rem; color:var(--text3); }
.sk-card-actions { display:flex; gap:6px; opacity:0; transition:opacity .15s; }
.sk-card:hover .sk-card-actions { opacity:1; }
.sk-action-btn {
  padding:5px 10px; border-radius:8px; border:1px solid var(--border);
  background:none; color:var(--text3); font-family:var(--font); font-size:.72rem;
  font-weight:600; cursor:pointer; display:flex; align-items:center; gap:4px;
  transition:all .12s;
}
.sk-action-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--teal2); }
.sk-action-btn.siva { border-color:var(--accent2)60; color:var(--accent2); }
.sk-action-btn.siva:hover { background:var(--accent2)12; }
.sk-action-btn.danger:hover { border-color:#f87171; color:#f87171; background:#f8717112; }
.sk-progress-wrap { display:flex; flex-direction:column; gap:4px; }
.sk-progress-head { display:flex; justify-content:space-between; align-items:center; }
.sk-progress-nums { font-size:.72rem; color:var(--text3); }
.sk-progress-bar  { height:7px; background:var(--border2); border-radius:4px; overflow:visible; position:relative; }
.sk-progress-fill { height:100%; border-radius:4px; transition:width .5s ease; }
.sk-progress-target {
  position:absolute; top:-3px; width:3px; height:13px;
  background:var(--text3); border-radius:2px; transform:translateX(-50%);
  opacity:.6;
}
.sk-sessions { display:flex; gap:16px; }
.sk-session-stat { font-size:.72rem; color:var(--text3); }
.sk-session-stat strong { color:var(--text2); font-weight:700; }
.sk-empty { text-align:center; padding:3rem 1rem; color:var(--text3); }
.sk-empty-icon { font-size:2.5rem; margin-bottom:8px; }
.sk-empty-title { font-family:var(--font); font-size:.95rem; font-weight:700; color:var(--text2); margin-bottom:4px; }
.sk-empty-sub { font-size:.82rem; }
.sk-filter-row { display:flex; gap:6px; flex-wrap:wrap; }
.sk-filter-btn {
  padding:5px 12px; border-radius:16px; border:1px solid var(--border);
  background:none; color:var(--text3); font-family:var(--font); font-size:.75rem;
  font-weight:600; cursor:pointer; transition:all .12s;
}
.sk-filter-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.sk-filter-btn:not(.active):hover { border-color:var(--accent); color:var(--accent); }
@media (max-width:600px) { .sk-summary-grid { grid-template-columns:repeat(2,1fr); } }

/* ── Community composer ───────────────────────────────────────── */
.comm-composer {
  display:flex; gap:10px; padding:14px; margin-bottom:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
}
.comm-composer-av {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font); font-weight:800; font-size:.9rem; color:#fff;
}
.comm-composer-body { flex:1; min-width:0; }
.comm-composer-input {
  width:100%; background:var(--bg2); border:1.5px solid var(--border); border-radius:10px;
  padding:10px 12px; color:var(--text); font-family:var(--font-body); font-size:.88rem;
  resize:none; outline:none; box-sizing:border-box; min-height:64px;
  transition:border-color .15s; line-height:1.5;
}
.comm-composer-input:focus { border-color:var(--accent); }
.comm-composer-footer { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.comm-composer-cat {
  padding:5px 10px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg2); color:var(--text3); font-family:var(--font);
  font-size:.75rem; outline:none; cursor:pointer;
}
.comm-char-count { font-size:.7rem; color:var(--text4); }
.comm-post-btn {
  margin-left:auto; padding:7px 18px; background:var(--accent); color:#fff;
  border:none; border-radius:8px; font-family:var(--font); font-size:.78rem;
  font-weight:700; cursor:pointer; transition:opacity .15s;
}
.comm-post-btn:hover { opacity:.85; }
.comm-post-btn:disabled { opacity:.45; cursor:default; }
.feed-author-link {
  cursor:pointer; color:var(--text1); font-weight:700;
  transition:color .12s;
}
.feed-author-link:hover { color:var(--accent); }
.feed-delete-btn {
  background:none; border:none; color:var(--text4); cursor:pointer;
  font-size:.72rem; padding:2px 6px; border-radius:5px; transition:color .12s;
}
.feed-delete-btn:hover { color:#f87171; }

/* ── Profile — updated sections ──────────────────────────────── */
.profile-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0; }
.profile-stat {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:12px 10px; text-align:center;
}
.profile-stat span { display:block; font-family:var(--font); font-size:1.1rem; font-weight:800; color:var(--accent); }
.profile-stat small { font-size:.68rem; color:var(--text3); text-transform:uppercase; letter-spacing:.04em; margin-top:3px; display:block; }
.profile-skill-row {
  display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--border); cursor:pointer;
}
.profile-skill-row:last-child { border-bottom:none; }
.profile-skill-row:hover { opacity:.8; }
.profile-post-item {
  padding:10px 0; border-bottom:1px solid var(--border); cursor:pointer;
}
.profile-post-item:last-child { border-bottom:none; }
.profile-post-body { font-size:.82rem; color:var(--text2); line-height:1.5; margin-bottom:4px; }
.profile-post-meta { font-size:.7rem; color:var(--text4); display:flex; gap:10px; }

/* ── Flashcards ──────────────────────────────────────────────── */
.flash-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; padding:8px 0 24px; }
.flash-progress { font-size:.78rem; color:var(--text3); font-weight:600; }
.flash-progress strong { color:var(--teal); }
.flash-progress-bar { width:100%; max-width:340px; height:5px; background:var(--border2); border-radius:3px; overflow:hidden; }
.flash-progress-fill { height:100%; background:var(--teal); border-radius:3px; transition:width .4s ease; }
.flash-card-scene { width:100%; max-width:360px; height:200px; perspective:800px; cursor:pointer; }
.flash-card-inner {
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.flash-card-scene.flipped .flash-card-inner { transform:rotateY(180deg); }
.flash-card-face {
  position:absolute; inset:0; backface-visibility:hidden;
  border:1.5px solid var(--border); border-radius:16px;
  background:var(--surface); padding:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.flash-card-face.back { transform:rotateY(180deg); background:var(--teal)10; border-color:var(--teal)40; }
.flash-card-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text4); margin-bottom:10px; }
.flash-card-text { font-size:.92rem; color:var(--text); line-height:1.55; font-weight:500; }
.flash-hint { font-size:.72rem; color:var(--text4); margin-top:8px; }
.flash-btns { display:flex; gap:10px; }
.flash-btn {
  padding:10px 24px; border-radius:10px; border:none; font-family:var(--font);
  font-size:.82rem; font-weight:700; cursor:pointer; transition:opacity .15s;
}
.flash-btn.again  { background:#f8717118; color:#f87171; border:1px solid #f8717140; }
.flash-btn.known  { background:#22c55e18; color:#22c55e; border:1px solid #22c55e40; }
.flash-btn:hover  { opacity:.8; }
.flash-btn:disabled { opacity:.35; cursor:default; }
.flash-done { text-align:center; padding:20px; }
.flash-done-emoji { font-size:2.5rem; margin-bottom:8px; }
.flash-done-title { font-family:var(--font); font-size:1rem; font-weight:800; color:var(--text); margin-bottom:4px; }
.flash-done-sub { font-size:.82rem; color:var(--text3); margin-bottom:14px; }
.flash-restart-btn { padding:9px 22px; background:var(--accent); color:#fff; border:none; border-radius:10px; font-family:var(--font); font-size:.82rem; font-weight:700; cursor:pointer; }

/* ═══════════════════════════════════════════════════
   ACADEMIC SPACE v3 — Dual-Role Dashboard
   Prefix .acad-* (no collision). Brand-mapped: spec's
   --bg-card/--text-* and cyan/indigo are remapped to
   Sivarr's real theme tokens via the scope block below.
═══════════════════════════════════════════════════ */
#panel-academic {
  --bg-card:        var(--card);
  --border-color:   var(--border);
  --text-primary:   var(--text);
  --text-secondary: var(--muted);
  --text-muted:     var(--text4);
  /* academic accent = Sivarr teal (theme-aware, readable on dark) */
  --acad-accent:      var(--teal);
  --acad-accent-soft: var(--teal2);
  --acad-accent-line: var(--teal3);
  --acad-grad:        linear-gradient(135deg, var(--teal), var(--accent2));
}

/* ── Role selector cards (create-space modal) ── */
.acad-role-card { background:var(--card); border:2px solid var(--border); border-radius:12px; padding:16px; cursor:pointer; transition:border-color .15s, background .15s; text-align:center; }
.acad-role-card:hover { border-color:var(--border2); background:rgba(127,127,127,.04); }
.acad-role-card--active { border-color:var(--teal); background:var(--teal2); }
.acad-role-icon { font-size:28px; margin-bottom:6px; }
.acad-role-name { font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.acad-role-desc { font-size:11px; color:var(--muted); line-height:1.4; }

/* ── Space topbar ── */
.acad-topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 0 10px; flex-wrap:wrap; gap:10px; border-bottom:1px solid var(--border-color); margin-bottom:16px; }
.acad-topbar-left { display:flex; align-items:center; gap:10px; }
.acad-topbar-right { display:flex; align-items:center; gap:8px; }
.acad-role-pill { display:flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:rgba(127,127,127,.08); border:1px solid var(--border-color); font-size:11px; font-weight:700; color:var(--text-secondary); }
.acad-role-pill--lecturer { background:var(--purple2); color:var(--purple); border-color:var(--purple3); }
.acad-role-pill--student  { background:var(--teal2); color:var(--teal); border-color:var(--teal3); }
.acad-space-name-label { font-size:16px; font-weight:800; color:var(--text-primary); }
.acad-search-bar { display:flex; align-items:center; gap:7px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:8px; padding:0 12px; height:32px; }
.acad-search-bar input { background:transparent; border:none; outline:none; color:var(--text-primary); font-size:12px; width:180px; font-family:inherit; }
.acad-search-bar input::placeholder { color:var(--text-muted); }
.acad-topbar-btn { width:32px; height:32px; border-radius:8px; background:var(--bg-card); border:1px solid var(--border-color); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary); font-size:15px; transition:background .15s; font-family:inherit; }
.acad-topbar-btn:hover { background:rgba(127,127,127,.08); color:var(--text-primary); }

/* ── Welcome banner ── */
.acad-welcome-banner { background:var(--acad-grad); border-radius:14px; padding:22px 28px; position:relative; overflow:hidden; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.acad-welcome-banner::before { content:''; position:absolute; top:-40px; right:-40px; width:220px; height:220px; background:rgba(255,255,255,.06); border-radius:50%; pointer-events:none; }
.acad-welcome-eyebrow { font-size:10px; font-weight:700; letter-spacing:.14em; color:rgba(255,255,255,.7); text-transform:uppercase; margin-bottom:6px; }
.acad-welcome-headline { font-size:17px; font-weight:700; color:#fff; line-height:1.35; }
.acad-welcome-sub { font-size:11.5px; color:rgba(255,255,255,.7); margin-top:4px; }
.acad-welcome-ctas { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.acad-welcome-stat-cluster { display:flex; gap:16px; flex-wrap:wrap; z-index:1; }

/* ── Metric row ── */
.acad-metric-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
@media (max-width:900px){ .acad-metric-row { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .acad-metric-row { grid-template-columns:1fr; } }
.acad-metric-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:6px; transition:border-color .15s; }
.acad-metric-card:hover { border-color:var(--border2); }
.acad-metric-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.acad-icon-teal   { background:var(--teal2);   color:var(--teal); }
.acad-icon-purple { background:var(--purple2); color:var(--purple); }
.acad-icon-orange { background:var(--amber2);  color:var(--amber3); }
.acad-icon-gold   { background:var(--amber2);  color:var(--amber3); }
.acad-metric-label { font-size:10px; font-weight:600; letter-spacing:.06em; color:var(--text-muted); text-transform:uppercase; }
.acad-metric-value { font-size:24px; font-weight:800; color:var(--text-primary); letter-spacing:-.5px; line-height:1; }
.acad-metric-value span { font-size:13px; font-weight:500; color:var(--text-secondary); }

/* ── Tab bar ── */
.acad-tab-bar { display:flex; gap:4px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:4px; width:fit-content; margin-bottom:16px; flex-wrap:wrap; }
.acad-tab { padding:6px 14px; border-radius:7px; font-size:12px; font-weight:500; color:var(--text-secondary); cursor:pointer; transition:all .15s; background:transparent; border:none; font-family:inherit; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.acad-tab.active { background:var(--acad-accent-soft); color:var(--acad-accent); border:1px solid var(--acad-accent-line); font-weight:600; }
.acad-tab:hover:not(.active) { background:rgba(127,127,127,.06); color:var(--text-primary); }
.acad-tab-content { animation:acadFadeIn .18s ease; }
@keyframes acadFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* ── Toolbar / segment ── */
.acad-tab-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; flex-wrap:wrap; }
.acad-segment-ctrl { display:flex; background:var(--bg-card); border:1px solid var(--border-color); border-radius:8px; padding:3px; gap:2px; }
.acad-seg { padding:5px 14px; border-radius:6px; font-size:11.5px; font-weight:500; color:var(--text-secondary); background:transparent; border:none; cursor:pointer; font-family:inherit; transition:all .15s; }
.acad-seg.active { background:var(--acad-accent-soft); color:var(--acad-accent); font-weight:600; }

/* ── Cards ── */
.acad-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; overflow:hidden; }
.acad-card-header { padding:13px 16px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border-color); flex-wrap:wrap; gap:6px; }
.acad-card-title { font-size:12.5px; font-weight:700; color:var(--text-primary); }
.acad-card-badge { font-size:9.5px; font-weight:600; padding:2px 8px; border-radius:4px; background:var(--acad-accent-soft); color:var(--acad-accent); border:1px solid var(--acad-accent-line); }
.acad-badge-red { background:var(--red2); color:var(--red3); border:1px solid var(--red2); }
.acad-card-body { padding:14px 16px; }
.acad-ai-badge { font-size:9px; font-weight:700; padding:2px 7px; border-radius:4px; background:var(--acad-grad); color:#fff; letter-spacing:.06em; text-transform:uppercase; }

/* ── Layout helpers ── */
.acad-split { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:800px){ .acad-split { grid-template-columns:1fr; } }
.acad-split-3 { display:grid; grid-template-columns:1fr 2fr; gap:14px; }
@media (max-width:900px){ .acad-split-3 { grid-template-columns:1fr; } }
.acad-col-span-1 { grid-column:span 1; }
.acad-col-span-2 { grid-column:span 2; }
.acad-col-span-full { grid-column:1/-1; }

/* ── Buttons ── */
.acad-btn-teal { padding:7px 16px; background:var(--acad-accent-soft); border:1px solid var(--acad-accent-line); border-radius:8px; color:var(--acad-accent); font-size:11.5px; font-weight:600; cursor:pointer; transition:background .15s; font-family:inherit; }
.acad-btn-teal:hover { background:var(--acad-accent-line); }
.acad-btn-ghost { padding:7px 14px; background:transparent; border:1px solid var(--border-color); border-radius:8px; color:var(--text-secondary); font-size:11.5px; cursor:pointer; transition:background .15s; font-family:inherit; display:inline-flex; align-items:center; gap:5px; }
.acad-btn-ghost:hover { background:rgba(127,127,127,.06); color:var(--text-primary); }
.acad-btn-sm { padding:4px 10px !important; font-size:10.5px !important; }
.acad-generate-btn { width:100%; padding:11px; background:var(--acad-grad); border:none; border-radius:10px; font-size:12.5px; font-weight:700; color:#fff; cursor:pointer; margin-bottom:12px; transition:opacity .15s; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:7px; }
.acad-generate-btn:hover { opacity:.9; }
.acad-generate-btn:disabled { opacity:.6; cursor:not-allowed; }
.acad-action-btn { font-size:10px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid var(--border-color); color:var(--text-secondary); background:rgba(127,127,127,.05); cursor:pointer; transition:all .15s; white-space:nowrap; font-family:inherit; display:inline-flex; align-items:center; gap:4px; }
.acad-action-btn:hover { border-color:var(--acad-accent); color:var(--acad-accent); }
.acad-action-btn--teal   { border-color:var(--acad-accent-line); color:var(--acad-accent); background:var(--acad-accent-soft); }
.acad-action-btn--red    { border-color:var(--red2); color:var(--red3); background:var(--red2); }
.acad-action-btn--orange { border-color:var(--amber2); color:var(--amber3); background:var(--amber2); }

/* ── Tags ── */
.acad-tag { font-size:9.5px; font-weight:600; padding:2px 7px; border-radius:4px; }
.acad-tag--red    { background:var(--red2); color:var(--red3); border:1px solid var(--red2); }
.acad-tag--orange { background:var(--amber2); color:var(--amber3); border:1px solid var(--amber2); }
.acad-tag--blue   { background:var(--blue2); color:var(--blue); border:1px solid var(--blue2); }
.acad-tag--teal   { background:var(--teal2); color:var(--teal); border:1px solid var(--teal3); }
.acad-tag--purple { background:var(--purple2); color:var(--purple); border:1px solid var(--purple3); }

/* ── Priority items ── */
.acad-priority-item { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-color); }
.acad-priority-item:last-child { border-bottom:none; }
.acad-checkbox { width:16px; height:16px; border-radius:4px; border:1.5px solid var(--border2); flex-shrink:0; margin-top:1px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; transition:background .15s; user-select:none; }
.acad-checkbox--checked { background:var(--acad-accent); border-color:var(--acad-accent); }
.acad-priority-meta { flex:1; }
.acad-priority-title { font-size:12px; font-weight:600; color:var(--text-primary); line-height:1.3; }
.acad-priority-title--done { text-decoration:line-through; opacity:.5; }
.acad-priority-sub { font-size:10.5px; color:var(--text-secondary); margin-top:2px; }
.acad-priority-tags { display:flex; gap:5px; margin-top:5px; flex-wrap:wrap; }
.acad-priority-actions { display:flex; gap:5px; margin-top:7px; flex-wrap:wrap; }

/* ── AI result / inputs ── */
.acad-brief-desc { font-size:11px; color:var(--text-muted); line-height:1.5; margin-bottom:12px; }
.acad-ai-result { background:rgba(127,127,127,.04); border-radius:10px; border:1px solid var(--border-color); overflow:hidden; }
.acad-ai-result-header { padding:9px 14px; background:var(--acad-accent-soft); border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:8px; }
.acad-ai-dot { width:6px; height:6px; background:var(--acad-accent); border-radius:50%; animation:acadPulse 2s infinite; }
@keyframes acadPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.acad-ai-result-title { font-size:11px; font-weight:700; color:var(--acad-accent); text-transform:uppercase; letter-spacing:.08em; }
.acad-ai-section { padding:10px 14px; border-bottom:1px solid var(--border-color); }
.acad-ai-section:last-child { border-bottom:none; }
.acad-ai-section-text { font-size:11.5px; color:var(--text-secondary); line-height:1.55; }
.acad-ai-textarea { width:100%; background:rgba(127,127,127,.05); border:1px solid var(--border-color); border-radius:9px; padding:10px 14px; color:var(--text-primary); font-size:12px; font-family:inherit; outline:none; resize:vertical; min-height:80px; margin-bottom:10px; transition:border-color .15s; }
.acad-ai-textarea:focus { border-color:var(--acad-accent); }
.acad-label { font-size:10.5px; font-weight:600; color:var(--text-muted); display:block; margin-bottom:5px; text-transform:uppercase; letter-spacing:.06em; }

/* ── Data grid ── */
.acad-data-grid { width:100%; border-collapse:collapse; font-size:11.5px; }
.acad-data-grid th { text-align:left; padding:9px 14px; font-size:9.5px; font-weight:700; letter-spacing:.08em; color:var(--text-muted); text-transform:uppercase; border-bottom:1px solid var(--border-color); background:rgba(127,127,127,.03); }
.acad-data-grid td { padding:10px 14px; border-bottom:1px solid var(--border-color); color:var(--text-secondary); vertical-align:middle; }
.acad-data-grid tr:last-child td { border-bottom:none; }
.acad-data-grid tr:hover td { background:rgba(127,127,127,.03); }
.acad-table-empty { text-align:center; padding:32px; color:var(--text-muted); font-size:12px; }
.acad-module-name { font-weight:600; color:var(--text-primary); font-size:12px; }
.acad-module-code { font-size:10px; font-family:monospace; background:rgba(127,127,127,.06); padding:2px 6px; border-radius:4px; color:var(--text-secondary); border:1px solid var(--border-color); }
.acad-attend-bar { width:56px; height:5px; background:var(--border); border-radius:3px; overflow:hidden; display:inline-block; vertical-align:middle; }
.acad-attend-fill { height:100%; border-radius:3px; }
.acad-webhook-btn { width:24px; height:24px; background:var(--acad-accent-soft); border:1px solid var(--acad-accent-line); border-radius:6px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--acad-accent); font-size:11px; text-decoration:none; }

/* ── Course grid ── */
.acad-course-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.acad-course-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; padding:16px; cursor:pointer; transition:border-color .15s, transform .1s; }
.acad-course-card:hover { border-color:var(--border2); transform:translateY(-2px); }
.acad-course-card--add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-style:dashed; color:var(--text-muted); font-size:12px; min-height:120px; }
.acad-course-card--add:hover { border-color:var(--acad-accent); color:var(--acad-accent); }
.acad-course-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; margin-bottom:6px; }
.acad-course-name { font-size:13px; font-weight:700; color:var(--text-primary); line-height:1.3; }
.acad-course-meta { display:flex; gap:10px; font-size:11px; color:var(--text-muted); }
.acad-course-meta span { display:flex; align-items:center; gap:4px; }

/* ── Kanban ── */
.acad-kanban { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; min-height:320px; }
@media (max-width:960px){ .acad-kanban { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .acad-kanban { grid-template-columns:1fr; } }
.acad-kanban-col { background:rgba(127,127,127,.03); border-radius:12px; border:1px solid var(--border-color); display:flex; flex-direction:column; overflow:hidden; }
.acad-kanban-col-header { padding:10px 12px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; gap:6px; }
.acad-col-title { font-size:11px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:5px; }
.acad-col-count { font-size:10px; background:var(--bg-card); border:1px solid var(--border-color); color:var(--text-muted); padding:1px 6px; border-radius:4px; font-weight:600; }
.acad-col-count--teal { color:var(--acad-accent); border-color:var(--acad-accent-line); background:var(--acad-accent-soft); }
.acad-kanban-cards { padding:8px; display:flex; flex-direction:column; gap:6px; flex:1; }
.acad-kanban-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:9px; padding:10px; cursor:pointer; transition:border-color .15s, transform .1s; }
.acad-kanban-card:hover { border-color:var(--border2); transform:translateY(-1px); }
.acad-kcard-title { font-size:11.5px; font-weight:600; color:var(--text-primary); line-height:1.35; margin-bottom:6px; }
.acad-kcard-tags { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; }
.acad-kcard-footer { display:flex; align-items:center; justify-content:space-between; }
.acad-kcard-weight { font-size:10px; color:var(--text-muted); }
.acad-col-add { padding:8px; border-top:1px solid var(--border-color); }
.acad-add-card-btn { width:100%; padding:5px; border:1px dashed var(--border2); border-radius:7px; background:transparent; color:var(--text-muted); font-size:11px; cursor:pointer; transition:border-color .15s, color .15s; font-family:inherit; }
.acad-add-card-btn:hover { border-color:var(--acad-accent); color:var(--acad-accent); }

/* ── Research ── */
.acad-research-layout { display:grid; grid-template-columns:1fr 280px; gap:14px; }
@media (max-width:900px){ .acad-research-layout { grid-template-columns:1fr; } }
.acad-research-input-row { display:flex; gap:8px; margin-bottom:8px; }
.acad-research-input { flex:1; background:rgba(127,127,127,.05); border:1px solid var(--border-color); border-radius:9px; padding:9px 14px; color:var(--text-primary); font-size:12px; font-family:inherit; outline:none; transition:border-color .15s; }
.acad-research-input:focus { border-color:var(--acad-accent); }
.acad-research-input::placeholder { color:var(--text-muted); }
.acad-research-btn { padding:9px 16px; background:var(--acad-grad); border:none; border-radius:9px; color:#fff; font-size:11.5px; font-weight:700; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:5px; }
.acad-cite-format-row { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.acad-format-btn { font-size:10px; padding:3px 9px; background:rgba(127,127,127,.05); border:1px solid var(--border-color); border-radius:5px; color:var(--text-secondary); cursor:pointer; font-family:inherit; transition:all .15s; }
.acad-format-btn.active { background:var(--acad-accent-soft); border-color:var(--acad-accent-line); color:var(--acad-accent); }
.acad-citation-item { background:rgba(127,127,127,.04); border:1px solid var(--border-color); border-radius:10px; padding:12px 14px; margin-bottom:8px; transition:border-color .15s; }
.acad-citation-item:hover { border-color:var(--border2); }
.acad-citation-title { font-size:12px; font-weight:600; color:var(--text-primary); margin-bottom:5px; }
.acad-citation-ref { font-size:10px; color:var(--text-muted); font-family:monospace; background:rgba(127,127,127,.04); border:1px solid var(--border-color); padding:5px 8px; border-radius:5px; line-height:1.5; margin-top:4px; word-break:break-word; }
.acad-citation-footer { display:flex; gap:6px; margin-top:8px; align-items:center; flex-wrap:wrap; }
.acad-source-badge { font-size:9.5px; font-weight:600; padding:2px 7px; border-radius:4px; }
.acad-source-badge--teal   { background:var(--teal2); color:var(--teal); border:1px solid var(--teal3); }
.acad-source-badge--purple { background:var(--purple2); color:var(--purple); border:1px solid var(--purple3); }
.acad-stat-row { display:flex; justify-content:space-between; font-size:12px; color:var(--text-secondary); padding:4px 0; border-bottom:1px solid var(--border-color); }
.acad-stat-row:last-child { border-bottom:none; }
.acad-index-row { display:flex; align-items:center; gap:8px; padding:7px; background:rgba(127,127,127,.04); border-radius:8px; border:1px solid var(--border-color); }
.acad-index-row--inactive { opacity:.5; }
.acad-index-icon { font-size:15px; flex-shrink:0; color:var(--text-secondary); }
.acad-index-name { font-size:11px; font-weight:600; color:var(--text-primary); }
.acad-index-status { font-size:9.5px; color:var(--text-muted); }
.acad-online-dot { width:7px; height:7px; background:var(--teal3); border-radius:50%; margin-left:auto; flex-shrink:0; }

/* ── Study groups ── */
.acad-groups-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.acad-group-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; padding:16px; cursor:pointer; transition:border-color .15s; }
.acad-group-card:hover { border-color:var(--border2); }
.acad-group-header { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:4px; }
.acad-group-name { font-size:13px; font-weight:700; color:var(--text-primary); }
.acad-group-avatars { display:flex; margin:10px 0 6px; }
.acad-mini-avatar { width:22px; height:22px; border-radius:50%; background:var(--acad-grad); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; border:2px solid var(--bg-card); margin-left:-5px; }
.acad-mini-avatar:first-child { margin-left:0; }
.acad-group-footer { display:flex; align-items:center; justify-content:space-between; }

/* ── AI tutor ── */
.acad-ai-tutor-layout { display:grid; grid-template-columns:1fr 300px; gap:14px; align-items:start; }
@media (max-width:900px){ .acad-ai-tutor-layout { grid-template-columns:1fr; } }
.acad-tutor-chat-card { display:flex; flex-direction:column; }
.acad-tutor-messages { padding:14px 16px; display:flex; flex-direction:column; gap:10px; max-height:340px; overflow-y:auto; }
.acad-tutor-msg { display:flex; gap:8px; align-items:flex-start; }
.acad-tutor-msg--user { flex-direction:row-reverse; }
.acad-tutor-avatar { width:28px; height:28px; border-radius:50%; background:var(--acad-grad); display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff; flex-shrink:0; }
.acad-tutor-bubble { background:rgba(127,127,127,.06); border:1px solid var(--border-color); border-radius:10px; padding:9px 12px; font-size:12px; color:var(--text-secondary); line-height:1.5; max-width:85%; }
.acad-tutor-msg--user .acad-tutor-bubble { background:var(--acad-accent-soft); border-color:var(--acad-accent-line); color:var(--text-primary); }
.acad-tutor-input-row { display:flex; gap:8px; padding:10px 16px; border-top:1px solid var(--border-color); }
.acad-tutor-quick-prompts { display:flex; gap:5px; padding:8px 16px 12px; flex-wrap:wrap; border-top:1px solid var(--border-color); }

/* ── Pomodoro ── */
.acad-pomo-mode-bar { display:inline-flex; gap:3px; background:rgba(127,127,127,.05); border:1px solid var(--border-color); border-radius:8px; padding:3px; margin-bottom:14px; }
.acad-pomo-display { font-size:48px; font-weight:800; color:var(--text-primary); letter-spacing:-2px; line-height:1; font-variant-numeric:tabular-nums; }
.acad-pomo-label { font-size:11px; color:var(--text-muted); margin-top:4px; }
.acad-pomo-sessions { font-size:10.5px; color:var(--text-muted); margin-top:10px; }

/* ── Flashcard ── */
.acad-flashcard { width:100%; min-height:100px; cursor:pointer; perspective:800px; }
.acad-flashcard-inner { position:relative; width:100%; transform-style:preserve-3d; transition:transform .4s; }
.acad-flashcard-inner--flipped { transform:rotateY(180deg); }
.acad-flashcard-front, .acad-flashcard-back { backface-visibility:hidden; padding:16px; background:rgba(127,127,127,.04); border-radius:10px; border:1px solid var(--border-color); min-height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; }
.acad-flashcard-back { position:absolute; top:0; left:0; width:100%; transform:rotateY(180deg); background:var(--acad-accent-soft); border-color:var(--acad-accent-line); }
.acad-fc-label { font-size:9.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; }
.acad-fc-text { font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.4; }
.acad-fc-hint { font-size:10px; color:var(--text-muted); }

/* ── Deadline strip ── */
.acad-deadline-strip { padding:4px 0; }
.acad-deadline-chip { background:rgba(127,127,127,.04); border:1px solid var(--border-color); border-radius:10px; padding:10px 14px; min-width:100px; text-align:center; flex-shrink:0; }
.acad-deadline-module { font-size:11px; font-weight:700; color:var(--text-primary); }
.acad-deadline-date { font-size:10px; color:var(--text-muted); margin-top:2px; }
.acad-deadline-days { font-size:12px; font-weight:700; color:var(--acad-accent); margin-top:4px; }

/* ── Schedule / AI tools / shared ── */
.acad-schedule-item { display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-bottom:1px solid var(--border-color); }
.acad-schedule-item:last-child { border-bottom:none; }
.acad-schedule-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.acad-ai-tools-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:800px){ .acad-ai-tools-grid { grid-template-columns:1fr; } }
.acad-empty-state { text-align:center; padding:32px 16px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.acad-empty-state div { font-size:12px; color:var(--text-muted); }
.acad-search-inline { background:rgba(127,127,127,.05); border:1px solid var(--border-color); border-radius:8px; padding:7px 12px; color:var(--text-primary); font-size:12px; font-family:inherit; outline:none; transition:border-color .15s; }
.acad-search-inline:focus { border-color:var(--acad-accent); }
.acad-select { background:rgba(127,127,127,.05); border:1px solid var(--border-color); border-radius:8px; padding:7px 10px; color:var(--text-secondary); font-size:11.5px; font-family:inherit; outline:none; cursor:pointer; }
.acad-select-sm { padding:4px 8px !important; font-size:10.5px !important; }
.acad-notes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; padding:14px 16px; }
.acad-assess-panel { display:block; }

/* ═══════════════════════════════════════════
   SIVARR — Marketplace (Extensions/Integrations/Templates)
   Brand-mapped: alias spec vars → Sivarr theme vars. Prefix .mkt- .sset-
═══════════════════════════════════════════ */
#panel-marketplace, .mkt-modal-overlay {
  --bg-card: var(--card);
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-muted: var(--muted2);
  --border-color: var(--border);
  --accent: var(--teal);
}

/* Header */
.mkt-header { display:flex; align-items:flex-start; justify-content:space-between; padding:4px 0 18px; flex-wrap:wrap; gap:12px; }
.mkt-eyebrow { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted2); margin-bottom:5px; display:flex; align-items:center; gap:8px; }
.mkt-preview-badge { font-size:9px; font-weight:800; letter-spacing:.08em; padding:2px 7px; border-radius:5px; background:rgba(83,74,183,.14); color:var(--accent2); border:1px solid rgba(83,74,183,.3); }
.mkt-title { font-size:20px; font-weight:800; color:var(--text); letter-spacing:-.3px; margin-bottom:4px; }
.mkt-sub { font-size:12px; color:var(--muted); }
.mkt-brief-desc { font-size:11px; color:var(--muted2); line-height:1.5; }

/* Buttons */
.mkt-btn-teal { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:rgba(15,219,173,.1); border:1px solid rgba(15,219,173,.25); border-radius:8px; color:var(--teal); font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s; }
.mkt-btn-teal:hover { background:rgba(15,219,173,.18); }
.mkt-btn-ghost { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; background:transparent; border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:11.5px; cursor:pointer; font-family:inherit; transition:all .15s; }
.mkt-btn-ghost:hover { border-color:var(--border2); color:var(--text); }
.mkt-btn-danger { color:#f87171 !important; border-color:rgba(239,68,68,.2) !important; }
.mkt-btn-danger:hover { background:rgba(239,68,68,.08) !important; }
.mkt-btn-sm { padding:4px 10px !important; font-size:10.5px !important; }
.mkt-publish-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; background:linear-gradient(135deg,var(--accent2),var(--teal)); border:none; border-radius:10px; color:#fff; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.mkt-generate-btn { width:100%; padding:11px; background:linear-gradient(135deg,var(--accent2),var(--teal)); border:none; border-radius:10px; font-size:12.5px; font-weight:700; color:#fff; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:7px; transition:opacity .15s; }
.mkt-generate-btn:hover { opacity:.9; }

/* Filter row */
.mkt-filter-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.mkt-type-tabs { display:flex; gap:3px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:3px; }
.mkt-type-tab { padding:5px 13px; border-radius:7px; font-size:12px; font-weight:500; color:var(--muted); background:transparent; border:none; cursor:pointer; font-family:inherit; transition:all .15s; white-space:nowrap; }
.mkt-type-tab.active { background:rgba(15,219,173,.1); color:var(--teal); font-weight:600; }
.mkt-search { display:flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--border); border-radius:9px; padding:0 12px; height:34px; flex:1; max-width:280px; }
.mkt-search input { background:transparent; border:none; outline:none; color:var(--text); font-size:12px; width:100%; font-family:inherit; }
.mkt-search input::placeholder { color:var(--muted2); }
.mkt-search i { color:var(--muted2); font-size:13px; }
.mkt-sort { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:7px 10px; color:var(--muted); font-size:11.5px; font-family:inherit; outline:none; cursor:pointer; }

/* Subnav */
.mkt-subnav { display:flex; border-bottom:1px solid var(--border); margin-bottom:18px; }
.mkt-subnav-btn { padding:8px 16px; background:transparent; border:none; border-bottom:2px solid transparent; color:var(--muted); font-size:12px; font-weight:500; cursor:pointer; font-family:inherit; transition:all .15s; display:flex; align-items:center; gap:6px; }
.mkt-subnav-btn.active { color:var(--teal); border-bottom-color:var(--teal); }
.mkt-count-badge { font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:4px; background:rgba(15,219,173,.1); color:var(--teal); border:1px solid rgba(15,219,173,.2); }

/* Category pills */
.mkt-category-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.mkt-cat-pill { padding:5px 12px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:11px; cursor:pointer; font-family:inherit; transition:all .15s; white-space:nowrap; }
.mkt-cat-pill.active { background:rgba(15,219,173,.1); border-color:rgba(15,219,173,.25); color:var(--teal); }
.mkt-cat-pill--official { background:rgba(83,74,183,.12); border-color:rgba(83,74,183,.3); color:var(--accent2); }

/* Featured */
.mkt-featured-strip { margin-bottom:20px; }
.mkt-featured-label { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); margin-bottom:10px; }
.mkt-featured-cards { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.mkt-featured-card { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 16px; cursor:pointer; flex-shrink:0; transition:border-color .15s; min-width:180px; }
.mkt-featured-card:hover { border-color:var(--border2); }

/* Grid + cards */
.mkt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.mkt-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; cursor:pointer; transition:border-color .15s, transform .1s; display:flex; flex-direction:column; }
.mkt-card:hover { border-color:var(--border2); transform:translateY(-2px); }
.mkt-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.mkt-item-icon { font-size:28px; line-height:1; }
.mkt-item-type-badge { font-size:9px; font-weight:700; padding:2px 7px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.mkt-type-extension { background:rgba(15,219,173,.1); color:var(--teal); border:1px solid rgba(15,219,173,.2); }
.mkt-type-integration { background:rgba(83,74,183,.12); color:var(--accent2); border:1px solid rgba(83,74,183,.25); }
.mkt-type-template { background:rgba(245,158,11,.1); color:#fb923c; border:1px solid rgba(245,158,11,.2); }
.mkt-item-name { font-size:13px; font-weight:700; color:var(--text); margin-bottom:2px; }
.mkt-item-author { font-size:10.5px; color:var(--muted2); margin-bottom:6px; }
.mkt-item-desc { font-size:11px; color:var(--muted); line-height:1.45; flex:1; }
.mkt-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:6px; }
.mkt-item-stats { display:flex; gap:8px; font-size:10px; color:var(--muted2); }
.mkt-install-btn { padding:5px 12px; background:var(--teal); color:#08231d; border:none; border-radius:7px; font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; transition:opacity .15s; flex-shrink:0; }
.mkt-install-btn:hover { opacity:.85; }
.mkt-install-btn--installed { background:rgba(15,219,173,.1); color:var(--teal); border:1px solid rgba(15,219,173,.2); }
.mkt-install-btn.mkt-btn-lg { padding:9px 20px; font-size:12.5px; }

/* Installed list */
.mkt-installed-header { margin-bottom:14px; }
.mkt-section-title { font-size:13px; font-weight:700; color:var(--text); }
.mkt-section-label { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); margin-bottom:8px; }
.mkt-installed-row { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:8px; transition:border-color .15s; }
.mkt-installed-row:hover { border-color:var(--border2); }
.mkt-meta-stat { font-size:11px; color:var(--muted2); }

/* Creator metrics */
.mkt-metric-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
@media (max-width:800px){ .mkt-metric-row { grid-template-columns:repeat(2,1fr); } }
.mkt-metric-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.mkt-metric-label { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted2); margin-bottom:6px; }
.mkt-metric-value { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-.5px; line-height:1; }
.mkt-metric-sub { font-size:10.5px; color:var(--muted); margin-top:4px; }

/* Reviews */
.mkt-reviews-section { display:flex; flex-direction:column; gap:16px; }
.mkt-review-form { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; padding:16px; }
.mkt-star-row { display:flex; gap:4px; margin-bottom:8px; }
.mkt-star { background:transparent; border:none; font-size:20px; color:rgba(255,255,255,.2); cursor:pointer; padding:0; transition:color .15s; font-family:inherit; }
.mkt-star--active { color:#f59e0b; }
.mkt-star:hover { color:#f59e0b; }
.mkt-review-input { width:100%; min-height:72px; margin:8px 0; resize:vertical; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:9px; padding:10px 12px; color:var(--text); font-size:12px; font-family:inherit; outline:none; }
.mkt-review-item { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:8px; }
.mkt-review-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.mkt-review-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--accent2),#7209b7); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; }
.mkt-review-author { font-size:12px; font-weight:600; color:var(--text); }
.mkt-review-stars { font-size:11px; color:#f59e0b; margin-top:1px; }
.mkt-review-date { font-size:10px; color:var(--muted2); margin-left:auto; }
.mkt-review-body { font-size:12px; color:var(--muted); line-height:1.5; }

/* Publish type cards */
.mkt-publish-type-card { padding:14px; border:1.5px solid var(--border); border-radius:10px; cursor:pointer; text-align:center; transition:all .15s; color:var(--muted); }
.mkt-publish-type-card:hover { border-color:var(--border2); }
.mkt-publish-type-card.active { border-color:var(--teal); background:rgba(15,219,173,.06); color:var(--text); }

/* Detail / publish / settings modals */
.mkt-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.mkt-modal { background:var(--card); border:1px solid var(--border2); border-radius:18px; width:100%; max-width:600px; max-height:85vh; overflow-y:auto; padding:28px; position:relative; }
.mkt-modal-close { position:absolute; top:16px; right:16px; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); font-size:14px; font-family:inherit; }
.mkt-modal-header { display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.mkt-modal-icon { font-size:40px; line-height:1; flex-shrink:0; }
.mkt-modal-name { font-size:18px; font-weight:800; color:var(--text); margin-bottom:3px; }
.mkt-modal-author { font-size:11px; color:var(--muted2); margin-bottom:6px; }
.mkt-modal-meta-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.mkt-modal-actions { margin-left:auto; flex-shrink:0; }
.mkt-modal-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:16px; }
.mkt-modal-tab { padding:7px 14px; background:transparent; border:none; border-bottom:2px solid transparent; color:var(--muted); font-size:12px; font-weight:500; cursor:pointer; font-family:inherit; transition:all .15s; display:flex; align-items:center; gap:5px; }
.mkt-modal-tab.active { color:var(--teal); border-bottom-color:var(--teal); }
.mkt-detail-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.mkt-field { display:flex; flex-direction:column; margin-bottom:12px; }
.mkt-field label { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2); margin-bottom:5px; }
.mkt-field input, .mkt-field select, .mkt-field textarea { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:9px; padding:9px 12px; color:var(--text); font-size:12.5px; font-family:inherit; outline:none; }
.mkt-field input:focus, .mkt-field select:focus, .mkt-field textarea:focus { border-color:var(--teal); }

/* Space settings toggles */
.sset-toggle-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.sset-toggle-row:last-child { border-bottom:none; }
.sset-toggle { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; cursor:pointer; }
.sset-toggle input { position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; margin:0; z-index:1; }
.sset-toggle-track { position:absolute; inset:0; background:rgba(255,255,255,.1); border-radius:999px; transition:background .2s; border:1px solid var(--border); }
.sset-toggle input:checked + .sset-toggle-track { background:rgba(15,219,173,.3); border-color:rgba(15,219,173,.4); }
.sset-toggle-track::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,.5); transition:transform .2s; }
.sset-toggle input:checked + .sset-toggle-track::after { transform:translateX(16px); background:var(--teal); }

/* Empty state */
.mkt-empty-state { text-align:center; padding:40px 16px; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted2); font-size:12px; }

/* ── Phase 4a: injected extension tabs ── */
.ext-tab-shell { padding:20px 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; max-width:480px; margin:0 auto; }
.ext-tab-icon { font-size:36px; margin-bottom:4px; }
.ext-tab-name { font-size:16px; font-weight:700; color:var(--text); }
.ext-tab-desc { font-size:12px; color:var(--muted); line-height:1.5; }
.ext-pomo-display { font-size:52px; font-weight:800; color:var(--text); letter-spacing:-2px; margin:14px 0 4px; font-variant-numeric:tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   STAGE 1 — Unified tab visual language across all three spaces
   Org (.os-tab) · Academic (.acad-tab) · Personal (.sp-tab) share ONE look:
   flat horizontal-scroll bar + animated active underline. Each space keeps its
   own JS switcher and accent colour. CSS-only — no markup/switcher change.
   (Academic was the pill outlier; brought into the underline language here.)
═══════════════════════════════════════════════════════════ */
.os-tabs, .sp-tabs, .acad-tab-bar {
  display:flex; gap:2px; padding:0 16px; width:auto; margin-bottom:0;
  background:transparent; border:none; border-bottom:1px solid var(--border);
  border-radius:0; overflow-x:auto; flex-wrap:nowrap; flex-shrink:0; scrollbar-width:none;
}
.os-tabs::-webkit-scrollbar, .sp-tabs::-webkit-scrollbar, .acad-tab-bar::-webkit-scrollbar { display:none; }
.os-tab, .sp-tab, .acad-tab {
  display:inline-flex; align-items:center; gap:5px;
  padding:10px 14px; border:none; border-radius:0; background:transparent;
  color:var(--muted); font-size:.82rem; font-weight:500; cursor:pointer;
  white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .18s ease, border-color .18s ease;
}
.os-tab:hover:not(.on), .sp-tab:hover:not(.on), .acad-tab:hover:not(.active) {
  color:var(--fg); background:transparent;
}
/* Academic active → accent underline (was a pill); Org/Personal active rules already underline */
.acad-tab.active {
  background:transparent; border:none; border-bottom:2px solid var(--acad-accent);
  color:var(--acad-accent); font-weight:600; border-radius:0;
}

/* ── Stage 2: collapsible sidebar sections ── */
.sb-sec-head { cursor:pointer; user-select:none; }
.sb-sec-caret { font-size:.8rem; color:var(--text4); transition:transform .18s; }
.sb-nav-group.collapsed { display:none; }
.sb-sec-caret.collapsed { transform:rotate(-90deg); }

/* ── Stage 4: extension onboarding steps ── */
.mkt-onboard-step { font-size:.82rem; color:var(--muted); padding:6px 0; border-bottom:1px solid var(--border); line-height:1.5; }
.mkt-onboard-step:last-child { border-bottom:none; }
.mkt-onboard-step strong { color:var(--text); }