/* ─── AllCoaching · Educator Dashboard ───────────────────────────────────────
   A Shopify-inspired, editorial-feeling control plane for educators.
   Warm cream surface · ochre accent · Instrument Serif italics · Geist UI.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Type */
  --ui: 'Inter Tight', 'Geist', -apple-system, system-ui, sans-serif;
  --display: 'Instrument Serif', 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Geist Mono', monospace;

  /* Surfaces */
  --bg:        #FAF8F4;
  --bg-tint:   #F6F2EA;
  --surface:   #FFFFFF;
  --surface-2: #F5F2EC;
  --surface-3: #EFEBE2;
  --sidebar:   #15110D;
  --sidebar-2: #1F1A14;

  /* Ink */
  --ink-1: #15110D;
  --ink-2: #4F4840;
  --ink-3: #8C8378;
  --ink-4: #B6AEA1;
  --on-dark-1: #FAF8F4;
  --on-dark-2: rgba(250,248,244,0.72);
  --on-dark-3: rgba(250,248,244,0.42);

  /* Lines */
  --line:        rgba(20, 17, 13, 0.07);
  --line-2:      rgba(20, 17, 13, 0.12);
  --line-strong: rgba(20, 17, 13, 0.22);
  --line-dark:   rgba(255, 255, 255, 0.08);

  /* Accent — ochre */
  --accent:      #C58B43;
  --accent-deep: #8E5F22;
  --accent-soft: #F5E8D2;
  --accent-line: #E8CFA3;
  --accent-grad: linear-gradient(135deg, #E0A95C 0%, #C58B43 55%, #8E5F22 100%);

  /* Semantic */
  --positive:      #2F8F4E;
  --positive-soft: #DCF1DE;
  --negative:      #C44232;
  --negative-soft: #F4DCD6;
  --info:          #3A6FBF;
  --info-soft:     #DCE5F4;
  --warning:       #B08518;
  --warning-soft:  #F4EAD0;

  /* Shadows — refined cool-warm cascade */
  --sh-1: 0 1px 2px rgba(38, 28, 14, 0.05);
  --sh-2: 0 6px 18px -6px rgba(38, 28, 14, 0.10), 0 2px 4px -2px rgba(38, 28, 14, 0.06);
  --sh-3: 0 24px 48px -16px rgba(38, 28, 14, 0.18), 0 8px 18px -6px rgba(38, 28, 14, 0.10);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --ring: 0 0 0 3px rgba(197, 139, 67, 0.22);

  /* Layout */
  --rail: 248px;
  --rail-collapsed: 72px;
  --topbar: 64px;
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 16px;
  --radius-4: 22px;

  /* Easing */
  --ease: cubic-bezier(0.22, 0.85, 0.25, 1);
}

* { box-sizing: border-box; }
*:focus { outline: none; }
*:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}
html, body { margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
body {
  font-family: var(--ui);
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(197, 139, 67, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(58, 111, 191, 0.04), transparent 60%);
  background-attachment: fixed;
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv11","kern","liga","calt","ss03";
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
::selection { background: var(--accent-soft); color: var(--ink-1); }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ─── Typographic refinement · the "bold" voice ──────────────────── */
/* Inter Tight 700 reads loud and tech-bro at small sizes — we want
   editorial confidence. Use 600 as the default emphasis weight; mono
   keeps 700 (it's narrower and looks crisp). Numbers go tabular for
   alignment, headings get refined optical tightening. */
strong, b, dt, th { font-weight: 600; letter-spacing: -0.01em; }
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.015em;
  font-feature-settings: "ss01","cv11","kern","liga","calt","ss03";
}
.italic, .display,
[class*="page-title"],
[class*="kpi-value"],
.modal-head h3,
.drawer-head h3 {
  font-feature-settings: "ss01","liga","dlig","calt","kern";
  font-variant-numeric: lining-nums proportional-nums;
}
.num, [class*="num"],
.table .num, .table .right.num,
.kpi-value, .kpi-delta,
.cell-id,
table, td, th {
  font-variant-numeric: tabular-nums lining-nums;
}
/* Mono is used for micro-labels, codes, numbers — let it stay punchy */
.mono, code, kbd, samp { font-feature-settings: "ss01","ss02","calt","zero","cv02"; letter-spacing: 0.2px; }
/* When mono is used for bold counters, the 700 weight on JetBrains Mono
   reads cleaner than Inter Tight 700 — keep it. */

/* ─── App shell ─────────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  grid-template-rows: var(--topbar) 1fr;
  grid-template-areas:
    "rail topbar"
    "rail main";
  min-height: 100vh;
}
.app.collapsed { grid-template-columns: var(--rail-collapsed) 1fr; }

.rail   {
  grid-area: rail;
  background: linear-gradient(180deg, #1A150F 0%, #15110D 60%, #100C09 100%);
  color: var(--on-dark-1);
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.topbar {
  grid-area: topbar;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px;
  padding: 0 32px;
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(250, 248, 244, 0.78);
}
.main   {
  grid-area: main;
  padding: 32px 36px 120px;
  max-width: 1520px;
  width: 100%;
  /* Containment: prevent wide tables / hero strips from forcing the grid item
     to grow beyond its column. Inner `.table-wrap` handles its own scroll. */
  min-width: 0;
  overflow-x: hidden;
}

/* ─── Sidebar ──────────────────────────────────────────────────────────── */
.rail-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 20px 18px 16px;
  position: relative;
}
.rail-brand::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197, 139, 67, 0.18), transparent);
}
.rail-brand .brand-img {
  width: 30px; height: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(197, 139, 67, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.rail-brand .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-grad); display: grid; place-items: center; color: #15110D; font-family: var(--display); font-style: italic; font-weight: 600; font-size: 17px; box-shadow: 0 4px 12px rgba(197, 139, 67, 0.28); }
.rail-brand .word { font-family: var(--display); font-style: italic; font-size: 19px; letter-spacing: -0.3px; color: #F5D8AE; }
.rail-brand .word sup { font-family: var(--mono); font-style: normal; font-size: 7.5px; letter-spacing: 1.6px; vertical-align: super; color: var(--accent); margin-left: 3px; opacity: 0.9; }

.rail-section { padding: 4px 18px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(245, 216, 174, 0.42); margin-top: 18px; margin-bottom: 4px; }
.rail-list { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.rail-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--on-dark-2);
  border: none; background: transparent;
  width: 100%; text-align: left;
  font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
  position: relative;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.rail-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--on-dark-1);
}
.rail-item.active {
  background: rgba(197, 139, 67, 0.14);
  color: #F5D8AE;
  box-shadow: inset 0 0 0 1px rgba(197, 139, 67, 0.18);
}
.rail-item.active::before {
  content: '';
  position: absolute;
  left: -10px; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.rail-item.active .rail-icon { color: var(--accent); }
.rail-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; transition: opacity .18s; }
.rail-item:hover .rail-icon, .rail-item.active .rail-icon { opacity: 1; }
.rail-badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark-1);
}
.rail-item.active .rail-badge {
  background: rgba(197, 139, 67, 0.24);
  color: #F5D8AE;
}

.rail-children { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 6px; position: relative; margin-left: 24px; border-left: 1px solid rgba(255,255,255,0.06); }
.rail-item.rail-child { padding-left: 14px; font-size: 12.5px; font-weight: 400; }
.rail-item.rail-child.active::before { display: none; }
.rail-item.rail-child .rail-icon { width: 14px; height: 14px; opacity: 0.75; }
.rail-tick { width: 10px; height: 1px; background: rgba(255,255,255,0.12); margin-left: -10px; margin-right: 4px; flex-shrink: 0; transition: background .18s, width .18s; }
.rail-item.rail-child:hover .rail-tick { background: rgba(255,255,255,0.22); }
.rail-item.rail-child.active .rail-tick { background: var(--accent); width: 12px; }

.rail-foot { margin-top: auto; padding: 14px 12px 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.rail-me {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .18s var(--ease);
  border: 1px solid transparent;
}
.rail-me:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
.rail-me .name { font-size: 12.5px; font-weight: 600; color: var(--on-dark-1); }
.rail-me .role { font-size: 10px; color: rgba(245, 216, 174, 0.52); font-family: var(--mono); letter-spacing: .6px; text-transform: uppercase; }

.app.collapsed .rail-brand .word,
.app.collapsed .rail-section,
.app.collapsed .rail-item span:not(.rail-badge),
.app.collapsed .rail-badge,
.app.collapsed .rail-me .meta { display: none; }
.app.collapsed .rail-item { justify-content: center; }
.app.collapsed .rail-me { justify-content: center; }

/* ─── Topbar ───────────────────────────────────────────────────────────── */
.tb-search {
  flex: 1; max-width: 540px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  box-shadow: var(--sh-1), var(--sh-inset);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.tb-search:focus-within {
  border-color: var(--accent-line);
  box-shadow: var(--ring), var(--sh-inset);
}
.tb-search input { border: none; background: transparent; outline: none; flex: 1; font-size: 13px; color: var(--ink-1); }
.tb-search input::placeholder { color: var(--ink-3); }
.tb-search kbd { font-family: var(--mono); font-size: 10px; color: var(--ink-3); border: 1px solid var(--line-2); padding: 2px 6px; border-radius: 5px; background: var(--bg-tint); letter-spacing: 0.4px; }
.tb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tb-icon-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  display: grid; place-items: center;
  color: var(--ink-2);
  position: relative;
  box-shadow: var(--sh-1);
  transition: all .18s var(--ease);
}
.tb-icon-btn:hover {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-1);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.tb-icon-btn:active { transform: translateY(0); }
.tb-icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 2px rgba(197, 139, 67, 0.32); }
.tb-divider { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
.tb-cta {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: var(--ink-1);
  color: var(--on-dark-1);
  border: none;
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 12px -2px rgba(20, 17, 13, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: all .18s var(--ease);
}
.tb-cta:hover {
  background: #2A2218;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -2px rgba(20, 17, 13, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.tb-cta:active { transform: translateY(0); }
.tb-mode {
  display: flex; gap: 2px;
  background: var(--bg-tint);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.tb-mode button {
  padding: 5px 11px;
  border: none; background: transparent;
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-3);
  border-radius: 7px;
  letter-spacing: 0.2px;
  transition: all .18s var(--ease);
  font-family: var(--mono);
}
.tb-mode button:hover { color: var(--ink-1); }
.tb-mode button.active {
  background: var(--surface);
  box-shadow: var(--sh-1);
  color: var(--ink-1);
}

/* ─── Page header ──────────────────────────────────────────────────────── */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 24px; flex-wrap: wrap; }
.page-eyebrow {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.page-eyebrow::before {
  content: '';
  width: 14px; height: 1px;
  background: var(--accent);
}
.page-title {
  font-family: var(--display);
  font-style: italic;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.8px;
  margin: 0;
  color: var(--ink-1);
}
.page-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 8px; max-width: 580px; line-height: 1.55; }
.page-actions { display: flex; gap: 8px; align-items: center; }

/* ─── Card ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  box-shadow: var(--sh-1);
  transition: box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover {
  border-color: var(--line-2);
  box-shadow: var(--sh-2);
}
.card-head {
  padding: 18px 20px 15px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line);
}
.card-head h3 {
  margin: 0;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.15px;
  color: var(--ink-1);
}
.card-head .meta { margin-left: auto; font-size: 12px; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.2px; }
.card-body { padding: 20px; }
.card-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-3); background: var(--bg-tint); border-radius: 0 0 var(--radius-3) var(--radius-3); }

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: all .18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(0) scale(0.985); }
.btn-primary {
  background: var(--ink-1);
  color: var(--on-dark-1);
  box-shadow: 0 4px 10px -2px rgba(20, 17, 13, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn-primary:hover {
  background: #2A2218;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -2px rgba(20, 17, 13, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.btn-accent {
  background: var(--accent-grad);
  color: #2A1B07;
  box-shadow: 0 4px 12px -2px rgba(197, 139, 67, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-accent:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -2px rgba(197, 139, 67, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-ghost {
  background: var(--surface);
  color: var(--ink-1);
  border-color: var(--line-2);
  box-shadow: var(--sh-1);
}
.btn-ghost:hover {
  background: var(--surface);
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.btn-text { background: transparent; color: var(--ink-2); font-weight: 500; }
.btn-text:hover { background: var(--surface-2); color: var(--ink-1); }
.btn-danger { background: var(--negative); color: white; box-shadow: 0 4px 12px -2px rgba(196, 66, 50, 0.32); }
.btn-danger:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 8px; }
.btn-lg { padding: 12px 20px; font-size: 14px; border-radius: 11px; }
.btn-icon { width: 34px; height: 34px; padding: 0; justify-content: center; }

/* ─── Tag / chip ───────────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--bg-tint); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; letter-spacing: -0.005em; }
.tag-positive { background: var(--positive-soft); color: var(--positive); border-color: rgba(47,143,78,0.18); }
.tag-negative { background: var(--negative-soft); color: var(--negative); border-color: rgba(196,66,50,0.18); }
.tag-info     { background: var(--info-soft);     color: var(--info);     border-color: rgba(58,111,191,0.18); }
.tag-warning  { background: var(--warning-soft);  color: var(--warning);  border-color: rgba(176,133,24,0.18); }
.tag-accent   { background: var(--accent-soft);   color: var(--accent-deep); border-color: var(--accent-line); }
.tag-ink      { background: var(--ink-1);         color: var(--on-dark-1); }
.tag-live     { background: #FCE7E2; color: var(--negative); border-color: rgba(196,66,50,0.18); }
.tag-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--negative); animation: ac-pulse 1.6s infinite; }
.tag-dot { width: 6px; height: 6px; border-radius: 50%; }

/* ─── KPI cards ────────────────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  box-shadow: var(--sh-1);
  position: relative;
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-line) 50%, transparent 100%);
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.kpi:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
  box-shadow: var(--sh-2);
}
.kpi:hover::before { opacity: 0.8; }
.kpi-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 10.5px; color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.kpi-head .ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: all .22s var(--ease);
}
.kpi:hover .kpi-head .ico {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-deep);
}
.kpi-value {
  font-family: var(--display);
  font-style: italic;
  font-size: 36px;
  letter-spacing: -0.6px;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--ink-1);
}
.kpi-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); }
.kpi-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  font-family: var(--mono);
  letter-spacing: 0.2px;
}
.kpi-delta.up { background: var(--positive-soft); color: var(--positive); }
.kpi-delta.down { background: var(--negative-soft); color: var(--negative); }
.kpi-spark { position: absolute; right: 12px; bottom: 12px; opacity: 0.55; transition: opacity .22s var(--ease); }
.kpi:hover .kpi-spark { opacity: 0.9; }

/* ─── Table ────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left;
  padding: 11px 14px;
  font-weight: 600;
  color: var(--ink-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-family: var(--mono);
  background: var(--bg-tint);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  transition: background .15s var(--ease);
}
.table tr { transition: background .15s var(--ease); }
.table tr:hover td { background: var(--bg-tint); }
.table tr:last-child td { border-bottom: none; }
.table .num { font-variant-numeric: tabular-nums; }
.table .right { text-align: right; }
.table .center { text-align: center; }
.table .ck { width: 36px; }
.table-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.table-toolbar .grow { flex: 1; }

/* Cell helpers */
.cell-id { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.cell-stack { display: flex; align-items: center; gap: 10px; }
.cell-stack .pri { font-weight: 500; color: var(--ink-1); }
.cell-stack .sec { font-size: 11.5px; color: var(--ink-3); }
.thumb { width: 56px; height: 36px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--surface-3); }
.thumb-sm { width: 42px; height: 28px; border-radius: 5px; flex-shrink: 0; }

/* ─── Forms ────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.field .hint { font-size: 11.5px; color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-1);
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow: var(--sh-1);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.textarea { min-height: 96px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.input-group { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); overflow: hidden; }
.input-group .input { border: none; }
.input-group .pre, .input-group .post { padding: 10px 12px; background: var(--surface-2); color: var(--ink-3); font-size: 12.5px; display: grid; place-items: center; border-right: 1px solid var(--line); }
.input-group .post { border-right: none; border-left: 1px solid var(--line); }

/* Switch */
.switch { position: relative; width: 36px; height: 20px; background: var(--line-strong); border-radius: 999px; transition: background .2s; flex-shrink: 0; cursor: pointer; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.switch.on { background: var(--ink-1); }
.switch.on::after { transform: translateX(16px); }

/* Checkbox */
.ck-box { width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 5px; display: grid; place-items: center; cursor: pointer; background: var(--surface); transition: all .15s; }
.ck-box.on { background: var(--ink-1); border-color: var(--ink-1); color: white; }

/* ─── Tabs ─────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.tabs button {
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 13px; font-weight: 600;
  color: var(--ink-3);
  margin-bottom: -1px;
  display: flex; align-items: center; gap: 7px;
  letter-spacing: -0.005em;
  transition: color .18s var(--ease), border-color .18s var(--ease);
  position: relative;
}
.tabs button.active {
  color: var(--ink-1);
  border-bottom-color: var(--ink-1);
}
.tabs button:hover:not(.active) {
  color: var(--ink-2);
  border-bottom-color: var(--line-2);
}
.tabs .count {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg-tint);
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.tabs button.active .count {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: var(--accent-line);
}

/* ─── Charts ───────────────────────────────────────────────────────────── */
.chart-grid path.area { fill: url(#g-area); }
.chart-grid path.line { fill: none; stroke: var(--ink-1); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.chart-grid line.grid { stroke: var(--line); stroke-width: 1; }
.chart-grid text.tick { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-3); }
.chart-grid circle.dot { fill: var(--surface); stroke: var(--ink-1); stroke-width: 1.5; }

.donut .seg { transition: opacity .2s; }
.donut .seg:hover { opacity: 0.7; }

/* ─── Progress / bars ──────────────────────────────────────────────────── */
.bar { width: 100%; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ink-1); border-radius: 3px; }
.bar.accent > i { background: var(--accent); }
.bar.positive > i { background: var(--positive); }

/* ─── Modal / drawer ──────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; background: rgba(20,17,13,0.42); z-index: 200; display: grid; place-items: center; backdrop-filter: blur(2px); animation: ac-fade .2s both; }
.modal { background: var(--surface); border-radius: var(--radius-3); width: min(560px, calc(100vw - 32px)); max-height: 86vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-3); animation: ac-pop .25s cubic-bezier(.2,.85,.25,1) both; }
.modal-head { padding: 18px 22px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-family: var(--display); font-style: italic; font-size: 22px; letter-spacing: -0.3px; }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface-2); }

.drawer-scrim { position: fixed; inset: 0; background: rgba(20,17,13,0.42); z-index: 200; backdrop-filter: blur(2px); animation: ac-fade .2s both; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 92vw); background: var(--surface); box-shadow: var(--sh-3); z-index: 210; display: flex; flex-direction: column; animation: ac-slide-l .28s cubic-bezier(.2,.85,.25,1) both; }
.drawer-head { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.drawer-head h3 { margin: 0; font-family: var(--display); font-style: italic; font-size: 24px; letter-spacing: -0.3px; flex: 1; }
.drawer-body { flex: 1; padding: 22px 24px; overflow-y: auto; }
.drawer-foot { padding: 14px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface-2); }

/* ─── Empty / drop zone ───────────────────────────────────────────────── */
.dropzone { border: 1.5px dashed var(--line-strong); border-radius: var(--radius-3); padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: var(--surface-2); transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; color: var(--ink-2); border: 1px solid var(--line); }
.dropzone .pri { font-size: 14px; font-weight: 600; }
.dropzone .sec { font-size: 12.5px; color: var(--ink-3); }

.empty { padding: 60px 20px; text-align: center; color: var(--ink-3); }
.empty .ico { width: 64px; height: 64px; border-radius: 16px; background: var(--surface-2); display: grid; place-items: center; margin: 0 auto 12px; color: var(--ink-2); }
.empty h4 { margin: 0 0 6px; font-size: 16px; color: var(--ink-1); font-family: var(--display); font-style: italic; }

/* ─── Avatar ──────────────────────────────────────────────────────────── */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; font-weight: 600; color: #15110D; font-size: 12.5px; font-family: var(--ui); flex-shrink: 0; overflow: hidden; }

/* ─── Animations ──────────────────────────────────────────────────────── */
@keyframes ac-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ac-pop    { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ac-slide-l{ from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes ac-fade-up{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ac-pulse  { 0% { transform: scale(1); opacity: .9; } 60% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes ac-spin   { to { transform: rotate(360deg); } }
@keyframes ac-shimmer{ 0% { background-position: -300% 0; } 100% { background-position: 300% 0; } }
.fade-up { animation: ac-fade-up .42s cubic-bezier(.2,.85,.25,1) both; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }
.rail ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); background-clip: padding-box; border: 2px solid transparent; }
.rail ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); background-clip: padding-box; border: 2px solid transparent; }

/* ─── Misc utilities ──────────────────────────────────────────────────── */
.row { display: flex; align-items: center; }
.row.gap { gap: 10px; }
.col { display: flex; flex-direction: column; }
.spread { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.stretch { align-items: stretch; }
.grow { flex: 1; }
.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); }
.dim { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.italic { font-family: var(--display); font-style: italic; }
.num { font-variant-numeric: tabular-nums; }
.divider { height: 1px; background: var(--line); margin: 18px 0; }
.muted-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-2); padding: 14px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

/* Status pill (text + dot) */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.status.live::before     { background: var(--negative); box-shadow: 0 0 0 3px rgba(196,66,50,0.18); }
.status.published::before{ background: var(--positive); }
.status.draft::before    { background: var(--ink-3); }
.status.scheduled::before{ background: var(--info); }
.status.failed::before   { background: var(--negative); }
.status.pending::before  { background: var(--warning); }

/* Toast */
.toast-zone { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 300; }
.toast { background: var(--ink-1); color: var(--on-dark-1); padding: 12px 16px; border-radius: 10px; font-size: 13px; box-shadow: var(--sh-3); display: flex; align-items: center; gap: 10px; animation: ac-fade-up .25s both; }
.toast .ico { color: var(--accent); }

/* Live tile */
.live-tile { background: linear-gradient(135deg, #1B1815 0%, #2A211B 100%); color: var(--on-dark-1); padding: 18px; border-radius: var(--radius-3); position: relative; overflow: hidden; }
.live-tile::after { content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(224,58,58,0.32), transparent 70%); }

/* ─── Live class · minimalist cards ─────────────────────────────────────── */
.live-hero-mini {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  padding: 22px 24px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.live-hero-mini.is-live {
  border-color: rgba(196,66,50,0.18);
  background: linear-gradient(135deg, #FFF 0%, #FCE7E2 100%);
}
.live-hero-mini .pulse-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--negative);
  position: relative;
}
.live-hero-mini .pulse-dot::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid var(--negative);
  animation: ac-pulse 1.8s infinite;
}
.live-hero-mini .hero-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.6px;
  color: var(--negative); text-transform: uppercase; font-weight: 700;
  margin-bottom: 6px;
}
.live-hero-mini .hero-title {
  font-family: var(--display); font-style: italic;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.3px;
  color: var(--ink-1);
}
.live-hero-mini .hero-meta {
  font-size: 12px; color: var(--ink-3);
  margin-top: 6px; display: flex; gap: 10px; align-items: center;
}

/* Single live class card row */
.lvc-row {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 22px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  margin-bottom: 10px;
  align-items: center;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.lvc-row:hover {
  box-shadow: 0 10px 24px rgba(20,17,13,0.06), 0 2px 6px rgba(20,17,13,0.04);
  transform: translateY(-1px);
  border-color: var(--line-2);
}
.lvc-row .date-col {
  text-align: center;
  padding: 8px 0;
  border-right: 1px solid var(--line);
  padding-right: 22px;
}
.lvc-row .date-col .day {
  font-family: var(--display); font-style: italic;
  font-size: 36px; line-height: 1;
  color: var(--ink-1);
  letter-spacing: -0.6px;
}
.lvc-row .date-col .mo {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px;
  color: var(--ink-3); text-transform: uppercase;
  margin-top: 4px; font-weight: 700;
}
.lvc-row .date-col .wd {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px;
  color: var(--ink-4); text-transform: uppercase;
  margin-top: 2px;
}
.lvc-row .date-col.live { border-right-color: rgba(196,66,50,0.24); }
.lvc-row .date-col.live .day { color: var(--negative); }
.lvc-row .date-col.live .mo  { color: var(--negative); }

.lvc-row .info { min-width: 0; }
.lvc-row .info .title-line {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.lvc-row .info .title-line .ttl {
  font-size: 15px; font-weight: 600; line-height: 1.3;
  color: var(--ink-1);
  letter-spacing: -0.1px;
}
.lvc-row .info .meta-line {
  display: flex; gap: 12px; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.4px;
  flex-wrap: wrap;
}
.lvc-row .info .meta-line .dot { color: var(--ink-4); }
.lvc-row .info .meta-line .live-now {
  color: var(--negative); font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
}
.lvc-row .info .meta-line .live-now::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--negative);
  animation: ac-pulse 1.6s infinite;
}
.lvc-row .info .assignments {
  margin-top: 8px;
}
.lvc-row .actions {
  display: flex; gap: 8px; align-items: center;
}

/* Past recordings — even more compact */
.lvc-row.recorded .date-col .day { color: var(--ink-2); }
.lvc-row.recorded .date-col .mo  { color: var(--ink-3); }

/* Hero strip — used on dashboard */
.hero-strip { background: linear-gradient(135deg, #FAF8F4 0%, #F5E8D2 60%, #E8CFA3 100%); border: 1px solid var(--accent-line); border-radius: var(--radius-3); padding: 22px 24px; display: flex; align-items: center; gap: 24px; position: relative; overflow: hidden; }
.hero-strip::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(197,139,67,0.28), transparent 70%); }
.hero-strip .greet { font-family: var(--display); font-style: italic; font-size: 30px; letter-spacing: -0.4px; }

/* Settings sidebar */
.set-rail { width: 220px; flex-shrink: 0; }
.set-rail .item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.set-rail .item:hover { background: var(--surface-2); }
.set-rail .item.active { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-1); font-weight: 500; box-shadow: var(--sh-1); }

/* Plan card */
.plan-card { padding: 22px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--surface); display: flex; flex-direction: column; gap: 14px; position: relative; }
.plan-card.featured { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 60%); }
.plan-card.featured::before { content: 'CURRENT'; position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; padding: 2px 7px; border-radius: 5px; background: var(--accent); color: #2A1B07; }
.plan-card .price { font-family: var(--display); font-style: italic; font-size: 36px; letter-spacing: -0.4px; line-height: 1; }
.plan-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.plan-card li { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); }

/* Calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .h { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); padding: 6px; text-transform: uppercase; letter-spacing: 1px; text-align: center; }
.cal .d { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; cursor: pointer; transition: border-color .15s; min-height: 64px; }
.cal .d:hover { border-color: var(--line-strong); }
.cal .d.dim { background: var(--surface-2); color: var(--ink-4); }
.cal .d.today { border-color: var(--ink-1); }
.cal .d .ev { font-size: 10px; padding: 2px 5px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .d .ev.live { background: #FCE7E2; color: var(--negative); }

/* Misc */
.dot-sep { color: var(--ink-4); padding: 0 6px; }
.scrubbar { width: 100%; height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.scrubbar > i { display: block; height: 100%; background: var(--ink-1); }

.shimmer { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 300% 100%; animation: ac-shimmer 2s infinite; }

/* Logo image */
.brand-img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }

/* ─── YouTube Studio · video upload ────────────────────────────────────── */
.ys-scrim { position: fixed; inset: 0; background: rgba(20,17,13,0.52); z-index: 220; display: grid; place-items: center; backdrop-filter: blur(2px); animation: ac-fade .2s both; }
.ys-shell { width: min(1180px, calc(100vw - 32px)); height: min(88vh, 800px); background: var(--surface); border-radius: 16px; box-shadow: var(--sh-3); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; animation: ac-pop .25s cubic-bezier(.2,.85,.25,1) both; }
.ys-head { padding: 14px 22px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.ys-head h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
.ys-head .filename { font-family: var(--mono); font-size: 12px; color: var(--ink-3); padding: 3px 8px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); }
.ys-head .saved { font-size: 12px; color: var(--ink-3); margin-left: auto; }
.ys-head .saved .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--positive); margin-right: 6px; vertical-align: 1px; }
.ys-body { display: grid; grid-template-columns: 220px 1fr 320px; min-height: 0; }
.ys-rail { padding: 18px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.ys-rail .step { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 9px; font-size: 13px; cursor: pointer; color: var(--ink-2); border: none; background: transparent; text-align: left; width: 100%; }
.ys-rail .step:hover { background: var(--surface-2); }
.ys-rail .step.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 500; }
.ys-rail .step .num { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--ink-2); flex-shrink: 0; }
.ys-rail .step.active .num { background: var(--accent); color: #2A1B07; }
.ys-rail .step .num.ok { background: var(--positive); color: #fff; }
.ys-rail .step .meta { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.ys-rail .step .col { flex: 1; min-width: 0; }
.ys-main { padding: 24px 28px; overflow-y: auto; }
.ys-section { margin-bottom: 26px; }
.ys-section h4 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.ys-section .desc { font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; max-width: 600px; }
.ys-side { padding: 22px 20px; border-left: 1px solid var(--line); background: var(--surface-2); overflow-y: auto; }
.ys-side .ys-prev { background: var(--ink-1); border-radius: 10px; aspect-ratio: 16/9; position: relative; overflow: hidden; }
.ys-side .ys-prev .play { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.78); }
.ys-side .ys-prev .duration { position: absolute; bottom: 8px; right: 8px; padding: 2px 6px; font-size: 10.5px; font-family: var(--mono); color: #fff; background: rgba(0,0,0,0.7); border-radius: 4px; }
.ys-side .row-meta { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ys-side .row-meta .l { color: var(--ink-3); width: 88px; flex-shrink: 0; }
.ys-side .row-meta .v { flex: 1; color: var(--ink-1); word-break: break-all; }
.ys-side .row-meta:last-child { border-bottom: none; }
.ys-foot { padding: 12px 22px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 16px; background: var(--surface-2); }
.ys-prog { flex: 1; display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.ys-prog .row { font-size: 12.5px; color: var(--ink-2); }
.ys-prog .row .ok { color: var(--positive); }
.ys-bar { width: 100%; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.ys-bar > i { display: block; height: 100%; background: var(--accent); transition: width .25s ease-out; }
.ys-bar.complete > i { background: var(--positive); }

/* Thumbnail tile (3 auto + upload) */
.thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.thumb-opt { aspect-ratio: 16/9; border-radius: 8px; cursor: pointer; position: relative; overflow: hidden; border: 2px solid transparent; transition: border-color .15s, transform .15s; }
.thumb-opt.active { border-color: var(--accent); transform: scale(1.02); }
.thumb-opt::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.0); transition: background .15s; }
.thumb-opt:hover::after { background: rgba(0,0,0,0.08); }
.thumb-opt .stamp { position: absolute; bottom: 4px; right: 4px; padding: 1px 5px; font-size: 9.5px; font-family: var(--mono); background: rgba(0,0,0,0.72); color: #fff; border-radius: 3px; letter-spacing: 0.5px; }
.thumb-opt .thumb-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #2A1B07; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25); z-index: 2; }
.thumb-upload { aspect-ratio: 16/9; border-radius: 8px; border: 1.5px dashed var(--line-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface-2); cursor: pointer; gap: 4px; transition: all .15s; }
.thumb-upload:hover { border-color: var(--accent); background: var(--accent-soft); }
.thumb-upload .l { font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.thumb-upload .dim { font-size: 10px; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.4px; }

/* ─── Course detail hero (app-style course landing) ─────────────────── */
.cd-hero {
  position: relative;
  border-radius: var(--radius-3);
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: var(--sh-2);
}
.cd-hero .cd-cover {
  aspect-ratio: 24 / 9;
  position: relative;
  overflow: hidden;
}
.cd-hero .cd-cover .grad-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(20,17,13,0.18) 60%, rgba(20,17,13,0.78));
}
.cd-hero .cd-cover-meta {
  position: absolute; left: 24px; right: 24px; bottom: 22px;
  display: flex; align-items: flex-end; gap: 20px;
  color: #fff;
}
.cd-hero .cd-cover-meta .ttl {
  font-family: var(--display); font-style: italic;
  font-size: 34px; line-height: 1.1; letter-spacing: -0.4px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  max-width: 700px;
  margin-bottom: 6px;
}
.cd-hero .cd-cover-meta .sub {
  font-size: 13px; color: rgba(255,255,255,0.86);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.cd-hero .cd-cover-meta .sub .v {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
}
.cd-hero .cd-cover-top {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; align-items: center; gap: 8px;
}
.cd-hero .cd-cover-top .pill {
  padding: 4px 10px; border-radius: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px;
  background: rgba(255,255,255,0.94); color: var(--ink-1);
  text-transform: uppercase;
}

.cd-stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 18px 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cd-stats .stat {
  text-align: center;
  border-right: 1px solid var(--line);
}
.cd-stats .stat:last-child { border-right: none; }
.cd-stats .stat .v {
  font-family: var(--display); font-style: italic;
  font-size: 24px; line-height: 1; letter-spacing: -0.3px;
  color: var(--ink-1);
}
.cd-stats .stat .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px;
  color: var(--ink-3); text-transform: uppercase;
  margin-top: 4px;
}

.cd-actions {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--surface);
}

/* Course breadcrumb */
.cd-breadcrumb {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.cd-breadcrumb .crumb {
  font-size: 12.5px; color: var(--ink-3);
}
.cd-breadcrumb .crumb.curr { color: var(--ink-1); font-weight: 500; }
.cd-breadcrumb .sep { color: var(--ink-4); font-family: var(--mono); }

/* Outcomes editor card */
.outcomes-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.outcome-card {
  display: grid; grid-template-columns: 22px 1fr auto;
  gap: 10px; align-items: center;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.outcome-card .ck {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--positive-soft); color: var(--positive);
  display: grid; place-items: center;
}
.outcome-card input {
  border: none; background: transparent;
  font-size: 13px; outline: none;
  width: 100%;
}
.outcome-card input:focus { outline: none; }

/* Reviews aggregate */
.rev-agg {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 24px; padding: 18px;
  background: var(--surface-2);
  border-radius: var(--radius-2);
  margin-bottom: 16px;
}
.rev-agg .big {
  font-family: var(--display); font-style: italic;
  font-size: 56px; line-height: 1; color: var(--ink-1);
}
.rev-agg .stars { display: flex; gap: 2px; margin-top: 6px; }
.rev-agg .sub { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.rev-bars { display: flex; flex-direction: column; gap: 5px; }
.rev-bar-row { display: grid; grid-template-columns: 26px 14px 1fr 36px; gap: 8px; align-items: center; font-size: 12px; }

/* ─── Community compose (YouTube-style) ──────────────────────────────── */
.compose-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  padding: 16px 18px;
  margin-bottom: 18px;
  transition: box-shadow .2s, border-color .2s;
}
.compose-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.compose-card .compose-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.compose-card .compose-head .name {
  font-size: 13.5px; font-weight: 600;
}
.compose-card .compose-head .where {
  font-size: 11.5px; color: var(--ink-3);
  margin-top: 1px;
}
.compose-card .type-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.compose-card .type-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.compose-card .type-chip:hover { background: var(--surface); border-color: var(--line-2); }
.compose-card .type-chip.active {
  background: var(--ink-1); color: var(--on-dark-1);
  border-color: var(--ink-1);
}
.compose-card textarea.compose-input {
  width: 100%; min-height: 84px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  font-family: var(--ui); font-size: 14px;
  color: var(--ink-1); outline: none;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.compose-card textarea.compose-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.compose-card .compose-attach {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 14px; margin-top: 12px;
  padding: 12px; border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
}
.compose-card .compose-attach.image {
  grid-template-columns: 100px 1fr;
}
.compose-card .compose-attach .preview {
  aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  position: relative;
}
.compose-card .compose-attach.short .preview { aspect-ratio: 9/16; max-height: 200px; }
.compose-card .compose-attach.image .preview { aspect-ratio: 16/9; }
.compose-card .compose-attach .preview .badge {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 6px; font-size: 9.5px; font-family: var(--mono);
  background: rgba(0,0,0,0.78); color: #fff;
  border-radius: 4px; letter-spacing: 0.4px;
}
.compose-card .compose-attach .info {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  font-size: 13px;
}
.compose-card .compose-attach .info .title {
  font-weight: 500;
}
.compose-card .compose-attach .info .meta {
  font-size: 11.5px; color: var(--ink-3);
}
.compose-card .compose-attach .info .actions {
  display: flex; gap: 6px; margin-top: 4px;
}
.compose-card .poll-opt-row {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 6px;
}
.compose-card .poll-opt-row .marker {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--ink-3); display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
}
.compose-card .poll-opt-row .marker.correct {
  background: var(--positive); color: #fff; border-color: var(--positive);
}
.compose-card .compose-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.compose-card .compose-foot .audience-pill {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.5px;
  padding: 4px 9px; border-radius: 6px;
  background: var(--surface-2); color: var(--ink-2);
  cursor: pointer; border: 1px solid var(--line);
}
.compose-card .compose-foot .audience-pill.paid {
  background: var(--accent-soft); color: var(--accent-deep);
  border-color: var(--accent-line);
}
.compose-card .compose-foot .schedule-pill {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.5px;
  padding: 4px 9px; border-radius: 6px;
  background: var(--info-soft); color: var(--info);
  border: 1px solid rgba(58,111,191,0.18);
}

/* Community post card refinements */
.com-post {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.com-post:hover {
  box-shadow: var(--sh-1);
  border-color: var(--line-2);
}
.com-post.pinned {
  border-color: var(--accent-line);
}
.com-post.pinned::before {
  content: 'PINNED'; display: block;
  background: var(--accent-soft); color: var(--accent-deep);
  padding: 5px 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px;
  font-weight: 700;
}
.com-post.scheduled {
  border-color: rgba(58,111,191,0.18);
  background: linear-gradient(180deg, var(--info-soft) 0%, var(--surface) 30%);
}
.com-post.draft {
  border-style: dashed;
  background: var(--surface-2);
}
.com-post .ph {
  padding: 14px 18px;
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
}
.com-post .ph .who { display: flex; flex-direction: column; min-width: 0; }
.com-post .ph .who .row1 {
  display: flex; align-items: center; gap: 6px;
}
.com-post .ph .who .nm {
  font-size: 13.5px; font-weight: 600;
}
.com-post .ph .who .time {
  font-size: 11.5px; color: var(--ink-3);
  font-family: var(--mono);
}
.com-post .ph .who .post-kind {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--ink-3);
  margin-top: 2px;
}
.com-post .ph .actions {
  display: flex; gap: 6px;
}
.com-post .pb { padding: 0 18px 14px; }
.com-post .pb .body-text {
  font-size: 14px; line-height: 1.55; color: var(--ink-1);
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.com-post .pb .embed {
  margin: 8px 0 0;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
}
.com-post .pb .embed.short {
  max-width: 280px;
}
.com-post .pb .lecture-embed {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 14px; align-items: center;
  padding: 12px; border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
}
.com-post .pb .lecture-embed:hover { background: var(--surface); }
.com-post .pb .lecture-embed .l-thumb {
  aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  position: relative;
}
.com-post .pb .lecture-embed .l-thumb .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255,255,255,0.92);
}
.com-post .pb .lecture-embed .l-info .pri {
  font-size: 13.5px; font-weight: 600; line-height: 1.3;
  margin-bottom: 4px;
}
.com-post .pb .lecture-embed .l-info .sec {
  font-size: 11.5px; color: var(--ink-3);
}

/* Engagement bar */
.com-engage {
  display: flex; gap: 4px; align-items: center;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.com-engage .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  background: transparent; border: none;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.com-engage .pill:hover { background: var(--surface-2); color: var(--ink-1); }
.com-engage .pill.like.active { color: var(--accent-deep); }
.com-engage .pill.like.active svg { color: var(--accent); }
.com-engage .pill.active { color: var(--accent-deep); background: var(--accent-soft); }
.com-engage .like-group {
  display: inline-flex; align-items: center;
  background: var(--surface-2); border-radius: 999px;
  padding: 2px 4px;
}
.com-engage .like-group .pill {
  padding: 5px 12px;
}
.com-engage .like-group .sep {
  width: 1px; height: 16px; background: var(--line-2);
}
.com-engage .impressions {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); padding-right: 4px;
}

/* Schedule chip in post header */
.com-post .ph .sched-chip {
  background: var(--info-soft); color: var(--info);
  padding: 3px 8px; border-radius: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.6px;
  font-weight: 700; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
}

/* ─── Reply composer + educator reply + chat thread ───────────────────── */
.reply-composer {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  animation: ac-fade-up .22s cubic-bezier(.2,.85,.25,1) both;
}
.reply-composer .row-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.reply-composer .row-head .badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.6px;
  padding: 2px 6px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent-deep);
  text-transform: uppercase;
}
.reply-composer textarea {
  width: 100%; min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface);
  font-size: 13px; font-family: var(--ui); color: var(--ink-1);
  outline: none; resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.reply-composer textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.reply-composer .composer-foot {
  display: flex; gap: 8px; align-items: center;
  margin-top: 8px;
}
.reply-composer .composer-foot .hint {
  font-size: 11px; color: var(--ink-3);
}

/* Saved educator reply (shown below review/comment/doubt) */
.ed-reply {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 10px; align-items: flex-start;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 12px 14px;
  margin-top: 10px;
}
.ed-reply .ed-head {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 4px;
}
.ed-reply .ed-name {
  font-size: 12.5px; font-weight: 600; color: var(--accent-deep);
}
.ed-reply .ed-time {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
}
.ed-reply .ed-text {
  font-size: 13px; line-height: 1.5; color: var(--ink-1);
  white-space: pre-wrap;
}

/* Chat-style thread (Doubts) */
.chat-thread {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  border: 1px solid var(--line);
}
.chat-thread .msg-list {
  display: flex; flex-direction: column;
  gap: 8px;
  max-height: 360px; overflow-y: auto;
  padding-bottom: 4px;
}
.chat-thread .msg {
  display: flex; gap: 8px;
  max-width: 88%;
}
.chat-thread .msg.educator {
  align-self: flex-end; flex-direction: row-reverse;
}
.chat-thread .msg .bubble {
  padding: 8px 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.45; color: var(--ink-1);
  white-space: pre-wrap;
}
.chat-thread .msg.educator .bubble {
  background: var(--ink-1); color: var(--on-dark-1);
  border-color: var(--ink-1);
  border-bottom-right-radius: 5px;
}
.chat-thread .msg.student .bubble {
  border-bottom-left-radius: 5px;
}
.chat-thread .msg .time {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3); margin-top: 4px;
}
.chat-thread .msg.educator .time { text-align: right; }
.chat-thread .composer {
  display: flex; gap: 8px; align-items: center;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.chat-thread .composer input {
  flex: 1; padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 13px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.chat-thread .composer input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.chat-thread .composer .send-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  background: var(--accent); color: #2A1B07;
  transition: background .15s, transform .12s;
}
.chat-thread .composer .send-btn:disabled {
  background: var(--surface-3); color: var(--ink-3); cursor: not-allowed;
}
.chat-thread .composer .send-btn:not(:disabled):hover {
  background: var(--accent-deep); color: #fff;
}
.chat-thread .composer .send-btn:active { transform: scale(0.95); }

.chat-thread .typing {
  font-size: 11px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
}
.chat-thread .typing .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-3); display: inline-block;
  animation: typing-dot 1.4s infinite;
}
.chat-thread .typing .dot:nth-child(2) { animation-delay: .2s; }
.chat-thread .typing .dot:nth-child(3) { animation-delay: .4s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* ─── App-style course content (Live / Videos / PDF / Tests / Schedule) */
.app-tab-bar {
  display: flex; gap: 6px;
  padding: 0 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app-tab-bar::-webkit-scrollbar { display: none; }
.app-tab-bar .filter-chip {
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-1);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: all .15s;
}
.app-tab-bar .filter-chip:hover { background: var(--surface-2); }
.app-tab-bar .filter-chip.active {
  background: var(--ink-1); color: var(--bg);
  border-color: var(--ink-1);
}
.app-tab-bar .filter-chip .cn {
  font-family: var(--mono); font-size: 10.5px; opacity: 0.7;
  margin-left: 2px;
}

/* App-style video / lesson card */
.lcard {
  background: var(--surface);
  border-radius: 16px; overflow: hidden;
  margin-bottom: 18px;
  position: relative;
  border: 1px solid var(--line);
  transition: box-shadow .22s cubic-bezier(.2,.85,.25,1),
              transform .22s cubic-bezier(.2,.85,.25,1),
              border-color .22s;
}
.lcard:hover {
  box-shadow: 0 18px 40px rgba(20,17,13,0.10), 0 4px 12px rgba(20,17,13,0.06);
  transform: translateY(-2px);
  border-color: var(--line-2);
}
.lcard .lcover {
  aspect-ratio: 16/9; position: relative; overflow: hidden;
  border-radius: 16px 16px 0 0;
  isolation: isolate;
}
.lcard .lcover::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 24%, transparent 70%, rgba(0,0,0,0.32));
  pointer-events: none;
}
.lcard .lcover .play-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: rgba(0,0,0,0);
  transition: background .25s;
}
.lcard:hover .lcover .play-overlay { background: rgba(0,0,0,0.16); }
.lcard .lcover .play-btn {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(10px);
  display: grid; place-items: center;
  color: var(--ink-1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.12);
  transform: scale(0.9);
  opacity: 0.85;
  transition: transform .25s cubic-bezier(.2,.85,.25,1), opacity .2s;
}
.lcard:hover .lcover .play-btn { transform: scale(1); opacity: 1; }
.lcard .lcover .play-btn::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.32);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s, transform .25s;
}
.lcard:hover .lcover .play-btn::after { opacity: 1; transform: scale(1); }
.lcard .lcover .duration {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  padding: 4px 9px; font-size: 11px; font-family: var(--mono); font-weight: 500;
  color: #fff; background: rgba(0,0,0,0.78); border-radius: 6px;
  backdrop-filter: blur(4px);
  letter-spacing: 0.4px;
}
.lcard .lcover .badge-l {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: flex; gap: 6px;
}
.lcard .lcover .badge-l .b {
  padding: 4px 9px; border-radius: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.6px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.96); color: var(--ink-1);
  font-weight: 700;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.lcard .lcover .badge-l .b.live {
  background: var(--negative); color: #fff;
}
.lcard .lcover .badge-l .b.live::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; margin-right: 5px; vertical-align: 1px;
  animation: ac-pulse 1.6s infinite;
}
.lcard .lcover .badge-l .b.free {
  background: var(--positive); color: #fff;
}
.lcard .lcover .actions-overlay {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: flex; gap: 5px; opacity: 0;
  transform: translateY(-3px);
  transition: opacity .2s, transform .2s;
}
.lcard:hover .lcover .actions-overlay {
  opacity: 1; transform: translateY(0);
}
.lcard .lcover .actions-overlay button {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255,255,255,0.96); border: none;
  display: grid; place-items: center; color: var(--ink-1);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.20);
  backdrop-filter: blur(8px);
  transition: background .15s;
}
.lcard .lcover .actions-overlay button:hover { background: #fff; }

.lcard .lbody {
  padding: 14px 16px 8px;
  display: grid; grid-template-columns: 38px 1fr;
  gap: 12px;
}
.lcard .lbody .ltitle {
  font-size: 14.5px; font-weight: 600; line-height: 1.35;
  color: var(--ink-1);
  margin-bottom: 5px;
  letter-spacing: -0.1px;
}
.lcard .lbody .lmeta {
  font-size: 12px; color: var(--ink-3);
  display: flex; gap: 7px; flex-wrap: wrap;
  align-items: center;
}
.lcard .lbody .lmeta .dot { color: var(--ink-4); font-weight: 700; }
.lcard .lfoot {
  padding: 6px 16px 14px;
  display: flex; gap: 4px; align-items: center;
}
.lcard .lfoot .laction {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-3);
  background: transparent; border: none;
  padding: 7px 12px; border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lcard .lfoot .laction:hover {
  background: var(--surface-2);
  color: var(--ink-1);
}
.lcard .lfoot .laction.on { color: var(--accent-deep); }

/* PDF card — refined book-style */
.pcard-app {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 10px;
  transition: box-shadow .22s cubic-bezier(.2,.85,.25,1),
              transform .22s cubic-bezier(.2,.85,.25,1),
              border-color .22s;
}
.pcard-app:hover {
  box-shadow: 0 12px 28px rgba(20,17,13,0.08), 0 2px 8px rgba(20,17,13,0.04);
  transform: translateY(-1px);
  border-color: var(--line-2);
}
.pcard-app .pthumb {
  aspect-ratio: 3/4; border-radius: 9px;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 14px rgba(20,17,13,0.10), 0 1px 2px rgba(20,17,13,0.06);
}
.pcard-app .pthumb::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.18), transparent 40%);
}
.pcard-app .pthumb::after {
  content: 'PDF'; position: absolute; bottom: 6px; left: 6px;
  font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.7px;
  color: rgba(255,255,255,0.86);
}
.pcard-app .pinfo .ptitle {
  font-size: 14px; font-weight: 600; line-height: 1.35;
  margin-bottom: 5px;
  letter-spacing: -0.1px;
}
.pcard-app .pinfo .pmeta {
  font-size: 11.5px; color: var(--ink-3);
  display: flex; gap: 7px; flex-wrap: wrap;
  align-items: center;
}

/* Test card — exam-style with diff stripe */
.tcard-app {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .22s cubic-bezier(.2,.85,.25,1),
              transform .22s cubic-bezier(.2,.85,.25,1),
              border-color .22s;
}
.tcard-app:hover {
  box-shadow: 0 12px 28px rgba(20,17,13,0.08), 0 2px 8px rgba(20,17,13,0.04);
  transform: translateY(-1px);
  border-color: var(--line-2);
}
.tcard-app::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ink-1);
}
.tcard-app.diff-easy::before   { background: var(--positive); }
.tcard-app.diff-medium::before { background: var(--warning); }
.tcard-app.diff-hard::before   { background: var(--negative); }

.tcard-app .tinner { padding: 18px; }
.tcard-app .tcat {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.7px;
  color: var(--ink-3); text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 600;
}
.tcard-app .ttl {
  font-size: 15px; font-weight: 600; line-height: 1.3;
  margin-bottom: 14px;
  letter-spacing: -0.1px;
}
.tcard-app .tstats {
  display: flex; gap: 24px; padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.tcard-app .tstat { flex: 1; }
.tcard-app .tstat .v {
  font-family: var(--display); font-style: italic;
  font-size: 22px; line-height: 1; color: var(--ink-1);
  letter-spacing: -0.4px;
}
.tcard-app .tstat .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.7px;
  color: var(--ink-3); text-transform: uppercase;
  margin-top: 5px;
  font-weight: 500;
}
.tcard-app .tactions { display: flex; gap: 12px; align-items: center; }
.tcard-app .tdiff {
  padding: 4px 9px; border-radius: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
}
.tcard-app .tdiff.easy   { background: var(--positive-soft); color: var(--positive); }
.tcard-app .tdiff.medium { background: var(--warning-soft);  color: var(--warning); }
.tcard-app .tdiff.hard   { background: var(--negative-soft); color: var(--negative); }

/* Schedule day group — refined */
.sched-day {
  margin-bottom: 24px;
  position: relative;
}
.sched-day .day-l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.1px;
  color: var(--ink-3); text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.sched-day .day-l::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.sched-event {
  display: grid; grid-template-columns: 64px 36px 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  align-items: center;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.sched-event:hover {
  box-shadow: var(--sh-1);
  transform: translateY(-1px);
  border-color: var(--line-2);
}
.sched-event .stime {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.4px;
}
.sched-event .sicon {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
}
.sched-event .sicon.live  { background: rgba(196,66,50,0.13);  color: var(--negative); }
.sched-event .sicon.video { background: rgba(20,17,13,0.06);   color: var(--ink-1); }
.sched-event .sicon.test  { background: var(--info-soft);       color: var(--info); }
.sched-event .sttl {
  font-size: 13.5px; line-height: 1.35; font-weight: 500;
}

/* Filter chip · add custom + custom chip styles */
.app-tab-bar .filter-chip.add {
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  color: var(--ink-3);
  font-weight: 500;
}
.app-tab-bar .filter-chip.add:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  background: var(--accent-soft);
}
.app-tab-bar .filter-chip.custom {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-deep);
  padding-right: 6px;
}
.app-tab-bar .filter-chip.custom.active {
  background: var(--accent);
  color: #2A1B07;
  border-color: var(--accent);
}
.app-tab-bar .filter-chip.custom .x {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-grid; place-items: center;
  margin-left: 5px;
  background: rgba(0,0,0,0.06);
  cursor: pointer;
  font-size: 10px;
}
.app-tab-bar .filter-chip.custom.active .x { background: rgba(0,0,0,0.18); }
.app-tab-bar .filter-chip.custom .x:hover { background: rgba(0,0,0,0.16); }

/* Add-filter popover */
.flt-popover {
  position: absolute; z-index: 220;
  width: 320px; padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(20,17,13,0.16), 0 6px 16px rgba(20,17,13,0.08);
  animation: ac-menu-in .18s cubic-bezier(.2,.85,.25,1) both;
}
.flt-popover.floating {
  position: fixed;
  width: 340px;
  padding: 0;
  overflow: hidden;
}
.flt-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
}
.flt-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  display: grid; place-items: center; flex-shrink: 0;
}
.flt-head-text { flex: 1; min-width: 0; }
.flt-title {
  font-size: 13.5px; font-weight: 600; color: var(--ink-1);
  line-height: 1.3;
}
.flt-sub {
  font-size: 11.5px; color: var(--ink-3);
  margin-top: 2px; line-height: 1.4;
}
.flt-close {
  width: 24px; height: 24px; border-radius: 6px;
  border: 0; background: transparent; color: var(--ink-3);
  cursor: pointer; display: grid; place-items: center;
  margin: -2px -2px 0 0;
  transition: background .15s;
}
.flt-close:hover { background: var(--surface-2); color: var(--ink-1); }
.flt-body { padding: 14px; }
.flt-presets {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.flt-popover .pres-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
}
.flt-popover .pres {
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 500; cursor: pointer;
  transition: all .15s; color: var(--ink-2);
}
.flt-popover .pres:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }
.flt-popover .pres.active {
  background: var(--accent); border-color: var(--accent);
  color: #2A1B07;
}
.flt-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.filter-chip.add.open {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent-deep);
  background: var(--accent-soft);
}

/* Section header (italic display) */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.sec-head .ttl {
  font-family: var(--display); font-style: italic;
  font-size: 22px; letter-spacing: -0.3px;
  color: var(--ink-1);
}
.sec-head .cnt {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3);
}

/* ─── Curriculum (modules + lessons, drag-drop) ─────────────────────── */
.crm-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.crm-empty {
  padding: 56px 24px; text-align: center;
  background: var(--surface-2);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-3);
}
.crm-empty .ico {
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center;
  margin: 0 auto 14px; border: 1px solid var(--line);
}
.crm-empty .pri { font-family: var(--display); font-style: italic; font-size: 18px; margin-bottom: 4px; }
.crm-empty .sec { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; max-width: 400px; margin-left: auto; margin-right: auto; }

/* Module card */
.mod-card {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
  position: relative;
}
.mod-card:hover { box-shadow: var(--sh-1); }
.mod-card.dragging { opacity: 0.4; background: var(--accent-soft); }
.mod-card.drop-over::before {
  content: '';
  position: absolute; left: 8px; right: 8px; top: -2px;
  height: 3px; background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 0 4px var(--accent-soft);
  z-index: 5;
}
.mod-head {
  display: grid;
  grid-template-columns: 26px 36px 1fr auto;
  gap: 12px;
  padding: 14px 16px;
  align-items: center;
  cursor: pointer;
}
.mod-head:hover { background: var(--surface-2); }
.mod-head .grip {
  width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--ink-3); cursor: grab;
  background: var(--surface-2); border: 1px solid var(--line);
}
.mod-head .grip:active { cursor: grabbing; }
.mod-head .num {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--ink-1); color: var(--on-dark-1);
  display: grid; place-items: center;
  font-family: var(--display); font-style: italic; font-size: 16px;
  flex-shrink: 0;
}
.mod-info { min-width: 0; }
.mod-info .pri {
  font-size: 14.5px; font-weight: 600; line-height: 1.3;
  display: flex; align-items: center; gap: 8px;
}
.mod-info .desc {
  font-size: 12px; color: var(--ink-3);
  margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mod-info .meta {
  font-size: 11px; color: var(--ink-3); font-family: var(--mono);
  letter-spacing: 0.4px;
  margin-top: 5px;
  display: flex; gap: 10px;
}

.mod-body {
  border-top: 1px solid var(--line);
  padding: 4px 0;
  background: var(--surface);
}

/* Lesson row */
.lsn-row {
  display: grid;
  grid-template-columns: 22px 26px 32px 1fr auto auto auto;
  gap: 10px;
  padding: 8px 16px 8px 30px;
  align-items: center;
  position: relative;
  background: var(--surface);
  transition: background .12s;
}
.lsn-row:hover { background: var(--surface-2); }
.lsn-row.dragging { opacity: 0.4; }
.lsn-row.drop-over::before {
  content: '';
  position: absolute; left: 30px; right: 16px; top: 0;
  height: 2px; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-radius: 1px;
}
.lsn-row .grip {
  width: 22px; height: 22px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-3); cursor: grab;
  display: grid; place-items: center;
}
.lsn-row .grip:active { cursor: grabbing; }
.lsn-row .lnum {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); text-align: center;
}
.lsn-row .l-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.lsn-row .l-icon.video { background: var(--info-soft); color: var(--info); }
.lsn-row .l-icon.pdf   { background: var(--positive-soft); color: var(--positive); }
.lsn-row .l-icon.test  { background: var(--warning-soft); color: var(--warning); }
.lsn-row .l-icon.live  { background: var(--negative-soft); color: var(--negative); }
.lsn-row .l-info { min-width: 0; }
.lsn-row .l-info .pri {
  font-size: 13px; font-weight: 500; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lsn-row .l-info .meta {
  font-size: 11px; color: var(--ink-3); margin-top: 2px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.lsn-row .l-prev {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: 5px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase;
  background: var(--surface-2); color: var(--ink-3);
  border: 1px solid var(--line);
  cursor: pointer; transition: all .12s;
}
.lsn-row .l-prev.on {
  background: var(--positive-soft); color: var(--positive);
  border-color: rgba(47,143,78,0.18);
}

.add-lesson-bar {
  border-top: 1px solid var(--line);
  padding: 8px 16px 10px;
  display: flex; gap: 6px; flex-wrap: wrap;
  background: var(--surface-2);
}

/* ─── Free-feed list (drag-drop reorderable) ────────────────────────── */
.feed-row {
  display: grid;
  grid-template-columns: 28px 32px 92px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  cursor: default;
  position: relative;
  transition: background .12s, box-shadow .15s;
}
.feed-row:first-child { border-top: 1px solid var(--line); }
.feed-row:hover { background: var(--surface-2); }
.feed-row.dragging { opacity: 0.4; background: var(--accent-soft); }
.feed-row.drop-over::before {
  content: '';
  position: absolute; left: 12px; right: 12px; top: -1px;
  height: 2px; background: var(--accent);
  border-radius: 1px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.feed-row.drop-over-bottom::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--accent);
  border-radius: 1px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.feed-row .grip {
  width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--ink-3); cursor: grab;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: background .12s, color .12s;
}
.feed-row .grip:hover { color: var(--ink-1); background: var(--surface); }
.feed-row .grip:active { cursor: grabbing; }
.feed-row .order {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--accent); color: #2A1B07;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.feed-row .meta { min-width: 0; }
.feed-row .meta .pri {
  font-size: 13.5px; font-weight: 500; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-row .meta .sec {
  font-size: 11.5px; color: var(--ink-3);
  margin-top: 3px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}

/* Empty-feed state */
.feed-empty {
  padding: 56px 24px; text-align: center;
  border-top: 1px solid var(--line);
}
.feed-empty .ico {
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--accent-soft); color: var(--accent-deep);
  display: grid; place-items: center;
  margin: 0 auto 14px;
}
.feed-empty .pri { font-family: var(--display); font-style: italic; font-size: 18px; margin-bottom: 4px; }
.feed-empty .sec { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; max-width: 360px; margin-left: auto; margin-right: auto; }

/* Library picker — type chips */
.lib-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 12px 22px 0;
}
.lib-chip {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.lib-chip:hover { background: var(--surface-2); }
.lib-chip.active {
  background: var(--ink-1); color: var(--on-dark-1);
  border-color: var(--ink-1);
}
.lib-chip .count {
  font-family: var(--mono); font-size: 10px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface-2); color: var(--ink-3);
}
.lib-chip.active .count {
  background: rgba(255,255,255,0.16);
  color: var(--on-dark-1);
}
.lib-chip.live .count {
  background: var(--negative-soft); color: var(--negative);
}
.lib-chip.live.active .count {
  background: rgba(196,66,50,0.22); color: #fff;
}

/* Library picker rows */
.lib-row {
  display: grid;
  grid-template-columns: 28px 92px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.lib-row:hover { background: var(--surface-2); }
.lib-row.selected {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.lib-row .meta { min-width: 0; }

/* ─── Question row helpers (test editor) ────────────────────────────── */
.qnum {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--surface), border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--ink-2); flex-shrink: 0;
  border: 1px solid var(--line-2);
}
.qmove {
  width: 22px; height: 22px; padding: 0;
  border-radius: 5px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-3);
  display: grid; place-items: center; cursor: pointer;
}
.qmove:hover:not(:disabled) { background: var(--surface); color: var(--ink-2); }
.qmove:disabled { opacity: 0.35; cursor: not-allowed; }

/* ─── Thumbnail editor (in video drawer) ──────────────────────────────── */
.thumb-editor { margin-bottom: 22px; }
.thumb-hero {
  position: relative; margin-bottom: 14px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(20,17,13,0.10);
}
.thumb-hero .duration {
  position: absolute; bottom: 10px; right: 10px;
  padding: 3px 7px; font-size: 11px; font-family: var(--mono);
  color: #fff; background: rgba(0,0,0,0.78); border-radius: 5px;
  letter-spacing: 0.3px;
}
.thumb-hero .stamp {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 8px; font-size: 10px; font-family: var(--mono);
  letter-spacing: 1.2px; color: #fff;
  background: rgba(20,17,13,0.78);
  border-radius: 5px;
  text-transform: uppercase;
}
.thumb-hero .stamp.custom { background: var(--accent); color: #2A1B07; }
.thumb-hero .change-overlay {
  position: absolute; inset: 0; background: rgba(20,17,13,0.42);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.thumb-hero:hover .change-overlay { opacity: 1; pointer-events: auto; }
.thumb-hero .change-overlay .change-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 9px;
  background: var(--surface); color: var(--ink-1);
  font-size: 13px; font-weight: 500;
  cursor: pointer; border: none;
  box-shadow: var(--sh-2);
}
.thumb-hero .title-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.62));
  padding: 18px 20px;
  pointer-events: none;
}
.thumb-hero .title-overlay .t {
  font-family: var(--display); font-style: italic;
  font-size: 22px; line-height: 1.15; color: #fff;
  letter-spacing: -0.2px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.thumb-section { margin-bottom: 14px; }
.thumb-section .head { display: flex; align-items: center; margin-bottom: 8px; }
.thumb-section .head .eyebrow { margin-bottom: 0; }

/* Palette chip row */
.palette-row { display: flex; gap: 6px; flex-wrap: wrap; }
.palette-chip {
  width: 48px; height: 32px; border-radius: 7px; cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s, transform .15s;
  display: grid; place-items: center;
  position: relative;
}
.palette-chip.active { border-color: var(--ink-1); transform: scale(1.05); }
.palette-chip:not(.active):hover { border-color: var(--line-strong); }
.palette-chip .check-mark {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,0.72); color: #fff;
  display: grid; place-items: center;
}

/* Radio card (audience, visibility) */
.radio-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 10px; cursor: pointer; transition: all .15s; background: var(--surface); }
.radio-card.active { border-color: var(--accent); background: var(--accent-soft); }
.radio-card .dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex-shrink: 0; margin-top: 1px; display: grid; place-items: center; }
.radio-card.active .dot { border-color: var(--accent-deep); }
.radio-card.active .dot::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-deep); }
.radio-card .pri { font-size: 13.5px; font-weight: 500; color: var(--ink-1); }
.radio-card .sec { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

/* Big text input with char counter */
.input-counted { position: relative; }
.input-counted .count { position: absolute; bottom: 6px; right: 10px; font-size: 11px; font-family: var(--mono); color: var(--ink-3); background: var(--surface); padding: 1px 4px; border-radius: 3px; }

/* Visibility / advanced toggle row */
.show-more-toggle { padding: 10px 0; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 6px 0 18px; }
.show-more-toggle:hover { color: var(--accent-deep); }

/* ─── Action menu (popover, body-portal) ────────────────────────────────── */
.am-trigger { display: inline-flex; }

.menu-pop.floating {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(20,17,13,0.16), 0 6px 16px rgba(20,17,13,0.08), 0 1px 2px rgba(20,17,13,0.06);
  padding: 6px;
  z-index: 9999;
  transform-origin: top right;
  animation: ac-menu-in .16s cubic-bezier(.2,.85,.25,1) both;
}
.menu-pop.floating.flip-up { transform-origin: bottom right; animation-name: ac-menu-up-in; }

@keyframes ac-menu-in    { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ac-menu-up-in { from { opacity: 0; transform: scale(0.96) translateY(4px);  } to { opacity: 1; transform: scale(1) translateY(0); } }

.menu-pop .menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; min-height: 34px;
  width: 100%; border: none; background: transparent;
  font-size: 13px; line-height: 1.2; color: var(--ink-1);
  border-radius: 8px; text-align: left; cursor: pointer;
  white-space: nowrap; transition: background .12s, color .12s;
}
.menu-pop .menu-item:hover { background: var(--surface-2); }
.menu-pop .menu-item:active { background: var(--surface-3); }
.menu-pop .menu-item:disabled { opacity: 0.45; cursor: not-allowed; }
.menu-pop .menu-item .menu-ico {
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 6px; background: var(--surface-2);
  color: var(--ink-2);
  transition: background .12s;
}
.menu-pop .menu-item:hover .menu-ico { background: var(--surface-3); }
.menu-pop .menu-item .menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-pop .menu-item .shortcut {
  margin-left: 14px; font-family: var(--mono);
  font-size: 10.5px; color: var(--ink-3);
  padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px;
  flex-shrink: 0;
}

.menu-pop .menu-item.danger { color: var(--negative); }
.menu-pop .menu-item.danger .menu-ico { background: var(--negative-soft); color: var(--negative); }
.menu-pop .menu-item.danger:hover { background: var(--negative-soft); }
.menu-pop .menu-item.danger:hover .menu-ico { background: rgba(196,66,50,0.18); }

.menu-pop .menu-divider {
  height: 1px; background: var(--line);
  margin: 6px 4px;
}
.menu-pop .menu-section {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px;
  color: var(--ink-3); padding: 10px 10px 4px;
  text-transform: uppercase;
}

/* Card hover-action overlay */
.ccard .card-actions {
  position: absolute; top: 8px; right: 8px;
  display: flex; gap: 4px; opacity: 0; transition: opacity .15s;
  z-index: 5;
}
.ccard:hover .card-actions { opacity: 1; }
.ccard .card-actions .ca-btn {
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(4px);
  border: 1px solid var(--line); color: var(--ink-1);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  transition: background .12s;
}
.ccard .card-actions .ca-btn:hover { background: #fff; }
.ccard .card-actions .ca-btn.menu-active { background: var(--ink-1); color: #fff; }

/* The video card already has .vthumb that's overflow hidden — exempt actions */
.vcard .card-actions { top: 8px; left: 8px; right: auto; }
.vcard:hover .vthumb .play { opacity: 1; }
.vcard:hover .vthumb .badges { opacity: 0; }
.vcard .vthumb .badges { transition: opacity .15s; }

/* PDF actions go top-left of document (price tag + corner fold are top-right) */
.pcard .pdoc .card-actions { top: 10px; left: 10px; right: auto; }

/* Test card has no image — put actions in topbar (always visible) */
.tcard .topbar .card-actions { position: static; opacity: 1; margin-left: 0; }
.tcard .topbar .card-actions .ca-btn { background: var(--surface-2); border-color: var(--line); box-shadow: none; }
.tcard .topbar .card-actions .ca-btn:hover { background: var(--surface); }

/* ─── Per-type content grids ────────────────────────────────────────────── */
.cgrid           { padding: 16px; display: grid; gap: 14px; }
.cgrid.video     { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cgrid.pdf       { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cgrid.test      { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Common card chrome */
.ccard           { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-3); cursor: pointer; transition: box-shadow .15s, transform .15s; overflow: hidden; }
.ccard:hover     { box-shadow: var(--sh-2); transform: translateY(-1px); }
.ccard .ccard-foot { padding: 10px 14px 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 36px; }

/* ─── Video card (16:9 thumb, play overlay) ─────────────────────────────── */
.vcard .vthumb       { position: relative; aspect-ratio: 16/9; background: var(--surface-2); }
.vcard .vthumb .play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .2s, background .2s; background: rgba(0,0,0,0); }
.vcard:hover .vthumb .play { opacity: 1; background: rgba(0,0,0,0.18); }
.vcard .vthumb .play .pbtn { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.95); display: grid; place-items: center; color: var(--ink-1); }
.vcard .vthumb .duration { position: absolute; bottom: 8px; right: 8px; padding: 2px 6px; font-size: 11px; font-family: var(--mono); color: #fff; background: rgba(0,0,0,0.78); border-radius: 4px; letter-spacing: 0.3px; }
.vcard .vthumb .status   { position: absolute; top: 8px; right: 8px; }
.vcard .vthumb .badges   { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.vcard .vthumb .badge    { padding: 2px 6px; font-size: 10px; font-family: var(--mono); color: #fff; background: rgba(20,17,13,0.78); border-radius: 4px; letter-spacing: 0.3px; }
.vcard .vmeta            { padding: 12px 14px 6px; }
.vcard .vmeta .vtitle    { font-weight: 500; font-size: 13.5px; line-height: 1.35; height: 38px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vcard .vmeta .vstats    { display: flex; gap: 12px; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); align-items: center; }
.vcard .vmeta .vstats .stat { display: inline-flex; align-items: center; gap: 4px; }
.vcard .vmeta .progress  { margin-top: 10px; }
.vcard .vmeta .progress .l { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); margin-bottom: 4px; font-family: var(--mono); }

/* ─── PDF card (portrait document) ─────────────────────────────────────── */
.pcard .pdoc { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.pcard .pdoc .cover { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pcard .pdoc .pheader { padding: 16px 14px 10px; position: relative; }
.pcard .pdoc .pheader .stamp { font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.4px; color: rgba(255,255,255,0.78); text-transform: uppercase; }
.pcard .pdoc .pheader .ptitle { font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.18; color: #fff; margin-top: 4px; height: 40px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcard .pdoc .pbody { flex: 1; background: rgba(255,255,255,0.94); margin: 0 12px 12px; border-radius: 6px; padding: 12px 12px 0; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.10); }
.pcard .pdoc .pbody .line { height: 4px; border-radius: 1px; background: rgba(20,17,13,0.10); }
.pcard .pdoc .pbody .line:nth-child(1) { width: 90%; }
.pcard .pdoc .pbody .line:nth-child(2) { width: 76%; }
.pcard .pdoc .pbody .line:nth-child(3) { width: 92%; }
.pcard .pdoc .pbody .line:nth-child(4) { width: 60%; }
.pcard .pdoc .pbody .line:nth-child(5) { width: 86%; }
.pcard .pdoc .pbody .line:nth-child(6) { width: 70%; }
.pcard .pdoc .corner { position: absolute; top: 0; right: 0; width: 32px; height: 32px; background: rgba(255,255,255,0.16); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.pcard .pdoc .corner::after { content: ''; position: absolute; top: 0; right: 0; width: 32px; height: 32px; clip-path: polygon(0 0, 100% 100%, 100% 0); background: rgba(255,255,255,0.10); }
.pcard .pdoc .pricetag { position: absolute; top: 10px; right: 10px; padding: 2px 7px; font-size: 10px; font-family: var(--mono); font-weight: 600; letter-spacing: 0.4px; border-radius: 5px; background: rgba(0,0,0,0.62); color: #fff; backdrop-filter: blur(4px); }
.pcard .pdoc .pstatus { position: absolute; bottom: 10px; left: 10px; }
.pcard .pmeta { padding: 12px 14px 6px; }
.pcard .pmeta .pcounts { display: flex; gap: 10px; font-size: 11px; color: var(--ink-3); font-family: var(--mono); align-items: center; }
.pcard .pmeta .pcounts .num { color: var(--ink-1); font-weight: 500; }
.pcard .pmeta .ptype { margin-top: 8px; }

/* ─── Test card (data-dense, no image) ─────────────────────────────────── */
.tcard .tstrip            { height: 4px; }
.tcard .tstrip.easy       { background: var(--positive); }
.tcard .tstrip.medium     { background: var(--warning); }
.tcard .tstrip.hard       { background: var(--negative); }
.tcard .thero             { padding: 18px 18px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tcard .thero .stat       { }
.tcard .thero .stat .v    { font-family: var(--display); font-style: italic; font-size: 32px; line-height: 1; letter-spacing: -0.4px; color: var(--ink-1); }
.tcard .thero .stat .l    { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--ink-3); text-transform: uppercase; margin-top: 4px; }
.tcard .ttitle            { padding: 0 18px 8px; font-weight: 500; font-size: 13.5px; line-height: 1.35; height: 38px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tcard .tdivider          { height: 1px; background: var(--line); margin: 0 18px; }
.tcard .tperf             { padding: 12px 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tcard .tperf .stat       { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.tcard .tperf .stat .v    { color: var(--ink-1); font-weight: 600; font-size: 13px; font-family: var(--ui); display: block; margin-bottom: 1px; }
.tcard .topbar            { padding: 0 14px 0; display: flex; align-items: center; gap: 6px; min-height: 28px; }
.tcard .ttag              { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.6px; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
.tcard .ttag.easy         { background: var(--positive-soft); color: var(--positive); }
.tcard .ttag.medium       { background: var(--warning-soft); color: var(--warning); }
.tcard .ttag.hard         { background: var(--negative-soft); color: var(--negative); }
.tcard .neg               { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

/* ─── Type-specific table cells ─────────────────────────────────────────── */
.diff-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; font-family: var(--mono); letter-spacing: 0.4px; }
.diff-pill.easy   { background: var(--positive-soft); color: var(--positive); }
.diff-pill.medium { background: var(--warning-soft);  color: var(--warning); }
.diff-pill.hard   { background: var(--negative-soft); color: var(--negative); }
.diff-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.score-bar { width: 60px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; display: inline-block; vertical-align: middle; margin-left: 6px; }
.score-bar > i { display: block; height: 100%; background: var(--accent); }

/* ─── Assignment chips (read-only, on cards/tables) ─────────────────────── */
.ass-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ass-chips.dense { gap: 3px; }
.ass-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; height: 20px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); font-size: 10.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; max-width: 140px; overflow: hidden; }
.ass-chip .ass-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ass-chip .ass-name { overflow: hidden; text-overflow: ellipsis; }
.ass-chip .ass-tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.4px; padding: 0 4px; border-radius: 3px; background: var(--positive-soft); color: var(--positive); text-transform: uppercase; }
.ass-chip.free { background: var(--positive-soft); border-color: rgba(47,143,78,0.18); color: var(--positive); }
.ass-chip.free .ass-tag { background: rgba(47,143,78,0.16); }
.ass-chip.more { color: var(--ink-3); font-family: var(--mono); }
.ass-chip.ass-standalone { background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-3); font-style: italic; font-weight: 400; }

/* ─── Assignment editor (in upload modals & drawer) ─────────────────────── */
.ass-editor { display: flex; flex-direction: column; gap: 8px; }
.ass-empty { display: flex; gap: 12px; padding: 16px; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: var(--surface-2); align-items: center; }
.ass-row { display: grid; grid-template-columns: auto 56px 1fr 130px 80px 110px 28px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.ass-row > .ass-controls + .ass-controls { /* spacing already by gap */ }
.ass-row .ass-cover { width: 56px; height: 36px; border-radius: 6px; flex-shrink: 0; }
.ass-grip { width: 22px; height: 22px; padding: 0; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; color: var(--ink-3); cursor: pointer; }
.ass-grip:hover:not(:disabled) { background: var(--surface); color: var(--ink-2); }
.ass-grip:disabled { opacity: 0.35; cursor: not-allowed; }
.ass-row .ass-grip + .ass-grip { margin-top: 2px; }
.ass-meta { min-width: 0; }
.ass-title { font-size: 12.5px; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ass-controls { display: flex; flex-direction: column; gap: 3px; }
.ass-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.6px; color: var(--ink-3); text-transform: uppercase; }
.ass-select { padding: 6px 8px; font-size: 12px; height: 28px; }
.ass-order { padding: 6px 8px; font-size: 12px; height: 28px; text-align: center; font-family: var(--mono); }

/* When ass-row is in tight container, shift grip stack */
.ass-row > button.ass-grip:first-child { grid-column: 1; align-self: flex-end; }
.ass-row > button.ass-grip:nth-child(2) { grid-column: 1; align-self: flex-start; }

/* Add-to-course details */
.ass-add { border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface-2); }
.ass-add summary { padding: 12px 14px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-2); list-style: none; }
.ass-add summary::-webkit-details-marker { display: none; }
.ass-add[open] summary { border-bottom: 1px solid var(--line); color: var(--ink-1); }
.ass-add-list { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.ass-add-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; background: var(--surface); border-radius: 8px; cursor: pointer; text-align: left; width: 100%; }
.ass-add-row:hover { background: var(--accent-soft); }
.ass-add-row .ass-cover { width: 44px; height: 28px; border-radius: 5px; flex-shrink: 0; }


/* ─── Live schedule · access mode cards ─────────────────────────────── */
.access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.access-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  text-align: left;
  transition: all .18s cubic-bezier(.2,.85,.25,1);
  display: flex; flex-direction: column; gap: 8px;
  font-family: inherit;
}
.access-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.access-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(214,178,79,0.12);
}
.ac-head {
  display: flex; align-items: center; gap: 8px;
}
.ac-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.access-card.active .ac-icon {
  background: var(--accent);
  color: #2A1B07;
  border-color: var(--accent);
}
.ac-label {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-1);
  line-height: 1.3;
}
.ac-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all .15s;
  background: var(--surface);
}
.ac-radio.on {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
.ac-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.access-card.active .ac-sub { color: var(--ink-2); }

@media (max-width: 920px) {
  .access-grid { grid-template-columns: 1fr; }
}

/* ─── Topbar count badge + avatar button + bell active ─────────────── */
.tb-icon-btn.active {
  background: var(--ink-1);
  color: var(--on-dark-1);
  border-color: var(--ink-1);
}
.tb-count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent-grad);
  color: #2A1B07;
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.2px;
  display: grid; place-items: center;
  border: 2px solid var(--bg);
  box-shadow: 0 2px 6px rgba(197, 139, 67, 0.32);
}
.tb-icon-btn.active .tb-count {
  border-color: var(--ink-1);
}
.tb-avatar {
  width: 36px; height: 36px;
  padding: 0;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--sh-1);
  transition: all .18s var(--ease);
  margin-left: 4px;
  cursor: pointer;
}
.tb-avatar:hover {
  border-color: var(--accent-line);
  box-shadow: var(--sh-2), 0 0 0 3px var(--accent-soft);
  transform: translateY(-1px);
}

/* ─── Notifications panel ──────────────────────────────────────────── */
.notif-panel {
  position: fixed;
  z-index: 220;
  width: 380px;
  max-height: min(640px, 80vh);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: var(--sh-3);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: ac-menu-in .2s var(--ease) both;
}
.notif-head {
  display: flex; align-items: center;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.notif-head h4 {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: var(--ink-1);
}
.notif-badge {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent-grad);
  color: #2A1B07;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 700;
}
.notif-link {
  background: transparent;
  border: 0;
  color: var(--accent-deep);
  font-size: 12px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s var(--ease);
  cursor: pointer;
}
.notif-link:hover:not(:disabled) { background: var(--accent-soft); }
.notif-link:disabled { color: var(--ink-3); cursor: not-allowed; }

.notif-tabs {
  display: flex; gap: 2px;
  padding: 8px 14px 0;
  border-bottom: 1px solid var(--line);
}
.notif-tabs button {
  padding: 8px 12px;
  background: transparent;
  border: 0; border-bottom: 2px solid transparent;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-3);
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.notif-tabs button:hover { color: var(--ink-2); }
.notif-tabs button.active { color: var(--ink-1); border-bottom-color: var(--ink-1); }
.notif-tabs .c {
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 5px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-3);
}
.notif-tabs button.active .c {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-deep);
}

.notif-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.notif-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-3);
}
.notif-empty .pri {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-1);
  margin-top: 10px;
  margin-bottom: 4px;
}
.notif-empty .sec { font-size: 12.5px; }

.notif-row {
  display: flex; gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  transition: background .15s var(--ease);
  align-items: flex-start;
}
.notif-row:last-child { border-bottom: 0; }
.notif-row:hover { background: var(--bg-tint); }
.notif-row.unread { background: rgba(197, 139, 67, 0.04); }
.notif-row.unread:hover { background: var(--accent-soft); }
.notif-ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.notif-meta { flex: 1; min-width: 0; }
.notif-meta .pri {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.notif-meta .pri strong { color: var(--ink-1); font-weight: 600; }
.notif-meta .pri em { font-style: normal; color: var(--ink-1); font-weight: 500; }
.notif-meta .prev {
  font-size: 11.5px;
  color: var(--ink-3);
  background: var(--bg-tint);
  padding: 6px 9px;
  border-radius: 6px;
  margin-top: 5px;
  border: 1px solid var(--line);
  font-style: italic;
}
.notif-meta .sec {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0.2px;
  margin-top: 5px;
}
.notif-meta .sec .dot { color: var(--ink-4); }
.notif-meta .sec .amt { color: var(--ink-1); font-weight: 600; }
.notif-cta {
  margin-left: auto;
  background: var(--ink-1);
  color: var(--on-dark-1);
  border: 0; border-radius: 6px;
  padding: 3px 8px;
  font-family: var(--ui);
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background .15s var(--ease);
}
.notif-cta:hover { background: #2A2218; }
.notif-pip {
  position: absolute;
  top: 18px; right: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(197, 139, 67, 0.18);
}

.notif-foot {
  display: flex; align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg-tint);
}

@keyframes ac-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Global search palette (⌘K) ──────────────────────────────────── */
.search-palette { display: flex; flex-direction: column; gap: 4px; margin: -6px -6px -6px -6px; }
.sp-input {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-tint);
  margin-bottom: 10px;
}
.sp-input input {
  flex: 1; border: none; background: none; outline: none;
  font-family: var(--ui); font-size: 14.5px; color: var(--ink-1);
}
.sp-input input::placeholder { color: var(--ink-3); }
.sp-section {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--ink-3);
  padding: 6px 8px 8px;
}
.sp-list { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; }
.sp-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px;
  border-radius: 9px;
  cursor: pointer;
  border: none; background: none; width: 100%; text-align: left;
  transition: background .12s var(--ease);
}
.sp-row:hover, .sp-row.active { background: var(--bg-tint); }
.sp-row.current { opacity: 0.6; }
.sp-ico {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
}
.sp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-label { font-size: 13.5px; font-weight: 500; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-current {
  margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--ink-3); background: var(--surface-2);
  padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line); flex-shrink: 0;
}

/* ─── Notifications page (full inbox) ─────────────────────────────── */
.nx-summary {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.nx-sum {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--sh-1);
  transition: all .18s var(--ease);
}
.nx-sum:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.nx-sum-ico {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--bg-tint); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-2);
}
.nx-sum-v {
  font-family: var(--display); font-style: italic;
  font-size: 22px; line-height: 1; letter-spacing: -0.3px;
  color: var(--ink-1);
}
.nx-sum-l {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-3); margin-top: 4px;
}
.nx-sum-accent   .nx-sum-ico { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }
.nx-sum-positive .nx-sum-ico { background: var(--positive-soft); border-color: rgba(47,143,78,0.18); color: var(--positive); }
.nx-sum-info     .nx-sum-ico { background: var(--info-soft); border-color: rgba(58,111,191,0.18); color: var(--info); }
.nx-sum-negative .nx-sum-ico { background: var(--negative-soft); border-color: rgba(196,66,50,0.18); color: var(--negative); }

@media (max-width: 1100px) { .nx-summary { grid-template-columns: repeat(3, 1fr); } }

.nx-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: flex-start;
}
.nx-side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--sh-1);
  position: sticky;
  top: calc(var(--topbar) + 16px);
  display: flex; flex-direction: column; gap: 2px;
}
.nx-side-head {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 10px 4px;
}
.nx-cat {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-2);
  width: 100%; text-align: left;
  transition: all .15s var(--ease);
}
.nx-cat:hover { background: var(--bg-tint); color: var(--ink-1); }
.nx-cat.active {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 600;
}
.nx-cat-ico {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
  flex-shrink: 0;
  transition: all .15s var(--ease);
}
.nx-cat.active .nx-cat-ico {
  background: var(--accent);
  border-color: var(--accent);
  color: #2A1B07;
}
.nx-cat-ico.positive  { color: var(--positive); }
.nx-cat-ico.negative  { color: var(--negative); }
.nx-cat-ico.info      { color: var(--info); }
.nx-cat-ico.accent    { color: var(--accent-deep); }
.nx-cat-label { flex: 1; min-width: 0; }
.nx-cat-count {
  font-family: var(--mono); font-size: 10px;
  padding: 1px 6px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-3);
}
.nx-cat.active .nx-cat-count { background: var(--surface); border-color: var(--accent-line); color: var(--accent-deep); }

.nx-side-tip {
  margin-top: 18px;
  padding: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 10px;
}
.nx-side-tip .lnk {
  background: transparent; border: 0; padding: 0;
  color: var(--accent-deep); font-weight: 600;
  text-decoration: underline; cursor: pointer;
  font-size: 11.5px;
}

.nx-feed-card { overflow: hidden; }
.nx-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.nx-check { display: grid; place-items: center; width: 24px; }
.nx-search {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 280px;
}
.nx-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  font-size: 12.5px;
}

.nx-row {
  display: grid;
  grid-template-columns: 24px 22px 46px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .15s var(--ease);
}
.nx-row:last-child { border-bottom: 0; }
.nx-row:hover { background: var(--bg-tint); }
.nx-row.unread { background: rgba(197, 139, 67, 0.04); }
.nx-row.unread:hover { background: var(--accent-soft); }

.nx-star {
  background: transparent; border: 0;
  width: 22px; height: 22px;
  border-radius: 5px;
  display: grid; place-items: center;
  color: var(--ink-4);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.nx-star:hover { background: var(--surface-2); color: var(--warning); }
.nx-star.on { color: var(--warning); }

.nx-avatar { cursor: pointer; }
.nx-kind-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
}

.nx-body { cursor: pointer; min-width: 0; }
.nx-line1 {
  font-size: 13px; line-height: 1.45;
  color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: 4px;
}
.nx-line1 strong { color: var(--ink-1); font-weight: 600; }
.nx-line1 .nx-text { color: var(--ink-3); }
.nx-line1 em { font-style: normal; color: var(--ink-1); font-weight: 500; }
.nx-prev {
  font-size: 12px;
  color: var(--ink-3);
  background: var(--bg-tint);
  padding: 7px 10px;
  border-radius: 7px;
  margin-top: 6px;
  border: 1px solid var(--line);
  font-style: italic;
  line-height: 1.45;
}
.nx-line2 {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--ink-3);
  margin-top: 6px;
  letter-spacing: 0.2px;
  flex-wrap: wrap;
}
.nx-line2 .dot { color: var(--ink-4); }
.nx-time { color: var(--ink-3); }
.nx-amount { color: var(--ink-1); font-weight: 700; }

.nx-cat-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.nx-cat-pill.positive { background: var(--positive-soft); border-color: rgba(47,143,78,0.18); color: var(--positive); }
.nx-cat-pill.negative { background: var(--negative-soft); border-color: rgba(196,66,50,0.18); color: var(--negative); }
.nx-cat-pill.info     { background: var(--info-soft); border-color: rgba(58,111,191,0.18); color: var(--info); }
.nx-cat-pill.accent   { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }

.nx-actions { display: flex; align-items: center; gap: 6px; }

.nx-pip {
  position: absolute;
  top: 18px; right: 16px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(197, 139, 67, 0.18);
}

@media (max-width: 980px) {
  .nx-layout { grid-template-columns: 1fr; }
  .nx-side { position: static; }
}

/* Sent feed kind icon */
.snx-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  display: grid; place-items: center;
}

/* ─── Send notification modal ──────────────────────────────────────── */
.sn-stepper {
  display: flex; align-items: center;
  padding: 4px 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.sn-step {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-3);
  font-size: 12.5px; font-weight: 500;
}
.sn-step-n {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3);
  transition: all .18s var(--ease);
}
.sn-step.active { color: var(--ink-1); }
.sn-step.active .sn-step-n {
  background: var(--accent);
  border-color: var(--accent);
  color: #2A1B07;
}
.sn-step.done .sn-step-n {
  background: var(--positive);
  border-color: var(--positive);
  color: #fff;
}
.sn-step-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.sn-step-body { display: flex; flex-direction: column; }

.sn-type-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.sn-type {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; text-align: left;
  transition: all .18s var(--ease);
}
.sn-type:hover { border-color: var(--line-strong); background: var(--bg-tint); }
.sn-type.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(197, 139, 67, 0.16);
}
.sn-type-ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
  flex-shrink: 0;
}
.sn-type.active .sn-type-ico {
  background: var(--accent);
  border-color: var(--accent);
  color: #2A1B07;
}
.sn-type-l { font-size: 12.5px; font-weight: 600; color: var(--ink-1); line-height: 1.3; }
.sn-type-s { font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }

.sn-preview-wrap {
  margin-top: 6px;
  padding: 14px;
  background: linear-gradient(135deg, #15110D 0%, #1F1A14 100%);
  border-radius: 12px;
  color: var(--on-dark-1);
}
.sn-preview-wrap .eyebrow {
  color: rgba(245, 216, 174, 0.62);
}
.sn-preview {
  background: var(--surface);
  color: var(--ink-1);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; gap: 12px;
  align-items: flex-start;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.36);
}
.sn-prev-bell {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sn-prev-body { flex: 1; min-width: 0; }
.sn-prev-app {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--ink-3);
  font-family: var(--mono); letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.sn-prev-title {
  font-size: 13px; font-weight: 600;
  color: var(--ink-1); line-height: 1.35;
}
.sn-prev-text {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 4px;
  line-height: 1.5;
}
.sn-prev-cta {
  margin-top: 10px;
  background: var(--ink-1);
  color: var(--on-dark-1);
  border: 0; border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
}

/* Audience selector */
.sn-aud-list { display: flex; flex-direction: column; gap: 6px; }
.sn-aud {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer; text-align: left;
  transition: all .18s var(--ease);
}
.sn-aud:hover { border-color: var(--line-strong); background: var(--bg-tint); }
.sn-aud.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(197, 139, 67, 0.16);
}
.sn-aud-radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all .15s;
}
.sn-aud.active .sn-aud-radio {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
.sn-aud-meta { flex: 1; min-width: 0; }
.sn-aud-l { font-size: 13px; font-weight: 600; color: var(--ink-1); line-height: 1.3; }
.sn-aud-s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.sn-aud-count { text-align: right; flex-shrink: 0; }
.sn-aud-n {
  font-family: var(--display); font-style: italic;
  font-size: 20px; line-height: 1; color: var(--ink-1);
}
.sn-aud-u {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-3); margin-top: 3px;
}

/* Delivery channels */
.sn-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sn-channel {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all .18s var(--ease);
  background: var(--surface);
}
.sn-channel:hover { border-color: var(--line-strong); }
.sn-channel.on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.sn-channel-ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
}
.sn-channel.on .sn-channel-ico {
  background: var(--accent);
  border-color: var(--accent);
  color: #2A1B07;
}
.sn-channel-l { font-size: 12.5px; font-weight: 600; color: var(--ink-1); }
.sn-channel-s { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* When · radio cards */
.sn-when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sn-when-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: all .18s var(--ease);
}
.sn-when-opt:hover { border-color: var(--line-strong); }
.sn-when-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.sn-when-opt input { margin-top: 2px; accent-color: var(--accent-deep); }
.sn-when-l { font-size: 13px; font-weight: 600; color: var(--ink-1); }
.sn-when-s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }

.lnk-inline {
  background: transparent; border: 0; padding: 0;
  color: var(--accent-deep); font-weight: 600;
  text-decoration: underline; cursor: pointer;
  font-size: 13px;
}

/* ─── Add payment method ─────────────────────────────────────────── */
.pm-kind-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 16px;
}
.pm-kind {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer; text-align: left;
  transition: all .18s var(--ease);
}
.pm-kind:hover { border-color: var(--line-strong); background: var(--bg-tint); }
.pm-kind.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(197, 139, 67, 0.16);
}
.pm-kind-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
  flex-shrink: 0;
}
.pm-kind.active .pm-kind-ico {
  background: var(--accent);
  border-color: var(--accent);
  color: #2A1B07;
}
.pm-kind-l { font-size: 12.5px; font-weight: 600; color: var(--ink-1); line-height: 1.3; }
.pm-kind-s { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.pm-radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  flex-shrink: 0; margin-left: auto;
  transition: all .15s;
}
.pm-radio.on {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* Card preview */
.pm-card-preview {
  padding: 18px 18px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #15110D 0%, #2A211B 50%, #4A2A1B 100%);
  color: var(--on-dark-1);
  position: relative;
  overflow: hidden;
  min-height: 152px;
  display: flex; flex-direction: column;
  box-shadow: 0 14px 28px -10px rgba(20, 17, 13, 0.32);
}
.pm-card-preview::before {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,139,67,0.28), transparent 70%);
}
.pm-brand {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  position: relative; z-index: 1;
}
.pm-num {
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 3px;
  margin-top: 22px;
  color: rgba(245, 216, 174, 0.96);
  position: relative; z-index: 1;
}
.pm-c-l {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(245, 216, 174, 0.52);
  margin-bottom: 2px;
}
.pm-c-v {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(245, 216, 174, 0.96);
  letter-spacing: 0.5px;
}

/* UPI quick tags */
.pm-upi-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.pm-upi-tag {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.pm-upi-tag:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-deep);
}

/* ─── Change bank modal ─────────────────────────────────────────── */
.bank-current, .bank-preview {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-tint);
}
.bank-preview {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  margin-top: 6px;
}
.bank-current-ico, .bank-preview-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--info);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.bank-preview-ico {
  background: var(--accent);
  color: #2A1B07;
}
.bank-agree {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-tint);
  cursor: pointer;
}

/* ─── Course schedule · calendar ─────────────────────────────────── */
.cal-head {
  display: flex; align-items: flex-end; gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cal-title {
  margin: 0;
  font-family: var(--display); font-style: italic;
  font-size: 38px; letter-spacing: -0.6px;
  line-height: 1;
  color: var(--ink-1);
}
.cal-year {
  font-family: var(--mono); font-style: normal;
  font-size: 14px; letter-spacing: 1.5px;
  color: var(--ink-3); margin-left: 8px;
  vertical-align: middle;
}
.cal-nav {
  display: inline-flex; align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.cal-nav button {
  background: transparent; border: 0;
  padding: 0 12px; height: 34px;
  color: var(--ink-2);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center;
  transition: all .15s var(--ease);
}
.cal-nav button:hover { background: var(--bg-tint); color: var(--ink-1); }
.cal-nav button + button { border-left: 1px solid var(--line); }
.cal-nav-today { letter-spacing: -0.005em; }

.cal-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
}
.cal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s var(--ease);
  box-shadow: var(--sh-1);
}
.cal-chip:hover { border-color: var(--line-strong); }
.cal-chip.active { background: var(--ink-1); color: var(--on-dark-1); border-color: var(--ink-1); }
.cal-chip .cn { font-family: var(--mono); font-size: 10px; opacity: 0.6; }
.cal-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-3);
}
.cal-chip.live  .cal-chip-dot { background: var(--negative); }
.cal-chip.video .cal-chip-dot { background: var(--info); }
.cal-chip.pdf   .cal-chip-dot { background: var(--positive); }
.cal-chip.test  .cal-chip-dot { background: var(--warning); }

.cal-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: flex-start;
}

.cal-grid-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.cal-wd {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--bg-tint);
  border-bottom: 1px solid var(--line);
}
.cal-wd > div {
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  text-align: left;
}
.cal-wd > div:nth-child(6),
.cal-wd > div:nth-child(7) { color: var(--accent-deep); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-day {
  min-height: 116px;
  padding: 8px 8px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0; border-left: 0;
  text-align: left;
  cursor: pointer;
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
  font-family: inherit;
}
.cal-day:hover { background: var(--bg-tint); }
.cal-day.dim   { background: rgba(245, 242, 236, 0.5); }
.cal-day.dim .cal-day-n { color: var(--ink-4); }
.cal-day.weekend:not(.dim) { background: rgba(246, 242, 234, 0.4); }
.cal-day.weekend:hover { background: var(--bg-tint); }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-grid > .cal-day:nth-last-child(-n+7) { border-bottom: 0; }

.cal-day.today {
  background: var(--accent-soft);
}
.cal-day.today:hover { background: rgba(245, 232, 210, 0.85); }
.cal-day.selected {
  box-shadow: inset 0 0 0 2px var(--ink-1);
  background: var(--surface);
}
.cal-day.today.selected { box-shadow: inset 0 0 0 2px var(--accent-deep); }

.cal-day-n {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.3px;
}
.cal-day.today .cal-day-n {
  color: var(--accent-deep);
}
.cal-today-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(197, 139, 67, 0.18);
}

.cal-day-events {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0;
}
.cal-ev {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  background: var(--bg-tint);
  color: var(--ink-2);
  white-space: nowrap; overflow: hidden;
  border-left: 2px solid var(--ink-3);
  transition: all .15s var(--ease);
}
.cal-ev.live  { border-left-color: var(--negative); background: rgba(196, 66, 50, 0.06); }
.cal-ev.video { border-left-color: var(--info);     background: rgba(58, 111, 191, 0.06); }
.cal-ev.short { border-left-color: var(--info);     background: rgba(58, 111, 191, 0.06); }
.cal-ev.pdf   { border-left-color: var(--positive); background: rgba(47, 143, 78, 0.06); }
.cal-ev.test  { border-left-color: var(--warning);  background: rgba(176, 133, 24, 0.07); }
.cal-day:hover .cal-ev { background: var(--surface); }
.cal-ev-dot { display: none; }
.cal-ev-t {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.2px;
  color: var(--ink-3); flex-shrink: 0;
}
.cal-ev.live  .cal-ev-t { color: var(--negative); }
.cal-ev.video .cal-ev-t { color: var(--info); }
.cal-ev.pdf   .cal-ev-t { color: var(--positive); }
.cal-ev.test  .cal-ev-t { color: var(--warning); }
.cal-ev-l {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  font-weight: 500; color: var(--ink-1);
}
.cal-ev-more {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  padding: 1px 6px;
  font-weight: 600;
}

/* Side panel */
.cal-side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  box-shadow: var(--sh-1);
  padding: 18px;
  position: sticky;
  top: calc(var(--topbar) + 16px);
}
.cal-side-head { margin-bottom: 14px; }
.cal-side-title {
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  letter-spacing: -0.3px;
  color: var(--ink-1);
  margin-top: 4px;
}

.cal-empty {
  text-align: center;
  padding: 22px 8px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--bg-tint);
}
.cal-empty-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  margin: 0 auto 8px;
  color: var(--ink-3);
}
.cal-empty .pri {
  font-family: var(--display); font-style: italic;
  font-size: 16px; color: var(--ink-1);
}
.cal-empty .sec {
  font-size: 12px; color: var(--ink-3);
  margin-top: 4px; padding: 0 8px;
  line-height: 1.45;
}

.cal-side-list { display: flex; flex-direction: column; gap: 4px; }
.cal-side-row {
  display: grid;
  grid-template-columns: 50px 2px 22px 1fr auto;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background .15s var(--ease);
  position: relative;
}
.cal-side-row:hover { background: var(--bg-tint); }
.cal-side-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.3px;
  padding-top: 4px;
}
.cal-side-rail {
  width: 2px; height: 100%;
  background: var(--ink-3);
  border-radius: 1px;
}
.cal-side-row.live  .cal-side-rail { background: var(--negative); }
.cal-side-row.video .cal-side-rail,
.cal-side-row.short .cal-side-rail { background: var(--info); }
.cal-side-row.pdf   .cal-side-rail { background: var(--positive); }
.cal-side-row.test  .cal-side-rail { background: var(--warning); }
.cal-side-ico {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  margin-top: 1px;
}
.cal-side-body { min-width: 0; }
.cal-side-kind {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  margin-bottom: 2px;
}
.cal-side-ttl {
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-1);
  line-height: 1.35;
}

.cal-up-head {
  margin-top: 18px;
  margin-bottom: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}
.cal-up-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s var(--ease);
}
.cal-up-row:hover { background: var(--bg-tint); }
.cal-up-date {
  width: 44px;
  text-align: center;
  border-right: 1px solid var(--line);
  padding-right: 12px;
}
.cal-up-date .d {
  font-family: var(--display); font-style: italic;
  font-size: 20px; line-height: 1; color: var(--ink-1);
}
.cal-up-date .m {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-3); margin-top: 3px;
}
.cal-up-body { flex: 1; min-width: 0; }
.cal-up-dot { width: 6px; height: 6px; border-radius: 50%; }
.cal-up-ttl {
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-1); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-side { position: static; }
  .cal-day { min-height: 92px; }
}

/* Schedule content modal */
.cal-kind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cal-kind {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: all .18s var(--ease);
}
.cal-kind:hover { border-color: var(--line-strong); background: var(--bg-tint); }
.cal-kind.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(197, 139, 67, 0.16);
}
.cal-kind-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.cal-kind.active .cal-kind-ico {
  background: var(--surface);
  border-color: var(--accent-line);
}
.cal-kind-l { font-size: 12.5px; font-weight: 600; color: var(--ink-1); line-height: 1.3; }
.cal-kind-s { font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }

.cal-src-tab {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.cal-src-tab.active {
  color: var(--ink-1);
  border-bottom-color: var(--ink-1);
}

.cal-pool {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  max-height: 220px;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.cal-pool-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  transition: background .15s var(--ease);
}
.cal-pool-row:last-child { border-bottom: 0; }
.cal-pool-row:hover { background: var(--bg-tint); }
.cal-pool-row.active { background: var(--accent-soft); }
.cal-pool-radio {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.cal-pool-row.active .cal-pool-radio {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
.cal-pool-t {
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cal-notify {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-tint);
  margin-top: 8px;
  cursor: pointer;
}

/* ─── Compose · schedule popover ────────────────────────────────── */
.sched-pop {
  position: fixed; z-index: 230;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: var(--sh-3);
  overflow: hidden;
  animation: ac-menu-in .18s var(--ease) both;
}
.sched-pop-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-1);
}
.sched-pop-x {
  width: 22px; height: 22px;
  border: 0; background: transparent;
  border-radius: 5px;
  color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center;
}
.sched-pop-x:hover { background: var(--bg-tint); color: var(--ink-1); }
.sched-pop-body { padding: 12px 14px; }
.sched-pop-body .field { margin-bottom: 0; }
.sched-pop-body .field + .field { margin-top: 8px; }
.sched-pop-quick {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.sched-pop-quick button {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-tint);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.2px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.sched-pop-quick button:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-deep);
}
.sched-pop-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg-tint);
}
.sched-pop-clear {
  background: transparent; border: 0;
  font-size: 11.5px; font-weight: 600;
  color: var(--negative);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.sched-pop-clear:hover { background: var(--negative-soft); }

/* ─── Test · Leaderboard ────────────────────────────────────────── */
.lb-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.lb-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--sh-1);
}
.lb-stat.accent {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 100%);
  border-color: var(--accent-line);
}
.lb-stat-ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
  flex-shrink: 0;
}
.lb-stat.accent .lb-stat-ico {
  background: var(--accent);
  border-color: var(--accent);
  color: #2A1B07;
}
.lb-stat-l {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.lb-stat-v {
  font-family: var(--display); font-style: italic;
  font-size: 22px; line-height: 1; color: var(--ink-1);
  letter-spacing: -0.3px;
}
.lb-stat-s { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

@media (max-width: 1100px) { .lb-kpis { grid-template-columns: repeat(2, 1fr); } }

/* Podium */
.lb-podium {
  display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 12px;
  align-items: end;
  margin-bottom: 18px;
  padding: 22px 16px 18px;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 100%);
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  position: relative; overflow: hidden;
}
.lb-podium::before {
  content: '';
  position: absolute;
  inset: 0 -40% auto auto;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,139,67,0.16), transparent 70%);
  pointer-events: none;
}
.lb-stand {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 16px 14px 14px;
  text-align: center;
  position: relative;
  box-shadow: var(--sh-2);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.lb-stand.p1 {
  transform: translateY(-12px);
  border-color: var(--accent);
  box-shadow: 0 24px 48px -16px rgba(197, 139, 67, 0.32), 0 8px 18px -6px rgba(38, 28, 14, 0.10);
  background: linear-gradient(180deg, #FFF7E8 0%, var(--surface) 70%);
}
.lb-stand.p2 { border-color: rgba(182, 174, 161, 0.4); }
.lb-stand.p3 { border-color: rgba(176, 133, 24, 0.32); }
.lb-stand-empty { min-height: 1px; }
.lb-stand-medal {
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid currentColor;
  display: grid; place-items: center;
  box-shadow: var(--sh-2);
}
.lb-stand.p1 .lb-stand-medal { width: 40px; height: 40px; }
.lb-stand-rank {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 1.4px;
  color: var(--ink-3);
  margin-top: 4px;
}
.lb-stand.p1 .lb-stand-rank { color: var(--accent-deep); }
.lb-stand-name {
  font-family: var(--display); font-style: italic;
  font-size: 18px;
  color: var(--ink-1);
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.lb-stand.p1 .lb-stand-name { font-size: 22px; }
.lb-stand-meta { font-size: 11px; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.3px; }
.lb-stand-score {
  margin-top: 6px;
  padding: 6px 12px;
  background: var(--bg-tint);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 18px; font-weight: 700;
  color: var(--ink-1);
}
.lb-stand-score .dim { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.lb-stand.p1 .lb-stand-score { background: var(--accent); color: #2A1B07; }
.lb-stand-pct {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.4px;
  color: var(--positive); font-weight: 700;
}

.lb-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.lb-windows {
  display: inline-flex;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.lb-windows button {
  background: transparent; border: 0;
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.3px;
  color: var(--ink-3); font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.lb-windows button:hover { color: var(--ink-1); }
.lb-windows button.active {
  background: var(--surface);
  box-shadow: var(--sh-1);
  color: var(--ink-1);
}
.lb-rank {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: 0.2px;
  font-weight: 700;
}

/* ─── Test · Feedback ─────────────────────────────────────────── */
.fb-summary {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 16px;
  align-items: center;
  box-shadow: var(--sh-1);
}
.fb-agg { text-align: center; }
.fb-big {
  font-family: var(--display); font-style: italic;
  font-size: 56px; line-height: 1;
  color: var(--ink-1); letter-spacing: -0.8px;
}
.fb-stars {
  display: inline-flex; gap: 3px;
  margin-top: 6px;
}
.fb-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.fb-bars { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fb-bar-row {
  display: grid; grid-template-columns: 38px 1fr 28px;
  gap: 10px; align-items: center;
  font-size: 12px;
  color: var(--ink-2);
}

@media (max-width: 720px) {
  .fb-summary { grid-template-columns: 1fr; }
}

.fb-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.fb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.fb-chip:hover { border-color: var(--line-strong); }
.fb-chip.active {
  background: var(--ink-1); color: var(--on-dark-1); border-color: var(--ink-1);
}
.fb-chip .cn {
  font-family: var(--mono);
  font-size: 10px; opacity: 0.6; margin-left: 2px;
}

.fb-list { display: flex; flex-direction: column; gap: 10px; }
.fb-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .18s var(--ease), opacity .18s var(--ease);
  box-shadow: var(--sh-1);
}
.fb-item:hover { border-color: var(--line-2); }
.fb-item.hidden  { opacity: 0.6; }
.fb-item.flagged { border-color: rgba(176, 133, 24, 0.32); background: var(--warning-soft); }

.fb-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.fb-name { font-size: 13.5px; font-weight: 600; color: var(--ink-1); }
.fb-score {
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--mono);
  letter-spacing: 0.2px;
}
.fb-score strong { color: var(--ink-1); font-weight: 700; }
.fb-text {
  font-size: 13.5px;
  color: var(--ink-1);
  line-height: 1.55;
  font-style: italic;
  padding: 8px 12px;
  background: var(--bg-tint);
  border-left: 3px solid var(--warning);
  border-radius: 0 8px 8px 0;
  margin-bottom: 8px;
}

/* ─── Educator Onboarding ──────────────────────────────────────── */
.onb {
  min-height: 100vh;
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(197, 139, 67, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(58, 111, 191, 0.06), transparent 60%);
  background-attachment: fixed;
  display: flex; flex-direction: column;
}
.onb-top {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 36px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 248, 244, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  position: sticky; top: 0; z-index: 10;
}
.onb-brand { display: flex; align-items: center; gap: 12px; }
.onb-logo {
  width: 34px; height: 34px; border-radius: 9px;
  box-shadow: 0 4px 12px rgba(197, 139, 67, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.onb-brand-text .word {
  font-family: var(--display); font-style: italic;
  font-size: 18px; letter-spacing: -0.2px;
  color: var(--ink-1);
}
.onb-brand-text .word sup {
  font-family: var(--mono); font-style: normal;
  font-size: 7.5px; letter-spacing: 1.6px;
  color: var(--accent-deep); vertical-align: super; margin-left: 3px;
}
.onb-brand-text .sub {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-3); margin-top: 2px;
}
.onb-skip {
  background: transparent; border: 0;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 7px;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.onb-skip:hover { color: var(--ink-1); background: var(--bg-tint); }

/* Step rail */
.onb-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 18px 36px 4px;
  flex-wrap: wrap;
}
.onb-rail-dot {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  cursor: default;
  position: relative;
}
.onb-rail-dot::after {
  content: '';
  width: 28px; height: 1px;
  background: var(--line-2);
  margin-left: 10px;
}
.onb-rail-dot:last-child::after { display: none; }
.onb-rail-dot.done { cursor: pointer; }
.onb-rail-dot .dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-tint);
  border: 1.5px solid var(--line-2);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 700;
  color: var(--ink-3);
  transition: all .22s var(--ease);
}
.onb-rail-dot.active .dot {
  background: var(--accent-grad);
  border-color: var(--accent);
  color: #2A1B07;
  box-shadow: 0 0 0 4px rgba(197, 139, 67, 0.18);
}
.onb-rail-dot.done .dot {
  background: var(--positive);
  border-color: var(--positive);
  color: #fff;
}
.onb-rail-dot .lbl .t {
  font-size: 12px; font-weight: 600;
  color: var(--ink-3);
  letter-spacing: -0.005em;
}
.onb-rail-dot.active .lbl .t { color: var(--ink-1); }
.onb-rail-dot.done .lbl .t { color: var(--ink-2); }
.onb-rail-dot .lbl .s {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-4);
}

@media (max-width: 820px) {
  .onb-rail-dot .lbl { display: none; }
}

/* Body */
.onb-body {
  flex: 1;
  padding: 22px 36px 120px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.onb-step { animation: ac-fade-up .4s var(--ease) both; }
.onb-center { display: flex; flex-direction: column; align-items: center; }

.onb-headline {
  text-align: left;
  margin-bottom: 28px;
  max-width: 720px;
}
.onb-center .onb-headline { text-align: center; margin-left: auto; margin-right: auto; }
.onb-h1 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.8px;
  color: var(--ink-1);
  margin: 8px 0 10px;
  font-weight: 400;
}
.onb-h1 em {
  font-style: italic;
  color: var(--accent-deep);
}
.onb-h1-display { font-size: clamp(28px, 3.5vw, 44px); }
.onb-lede {
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 580px;
}
.onb-center .onb-lede { margin-left: auto; margin-right: auto; }

/* Reusable card */
.onb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--sh-1);
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}
.onb-center .onb-card { margin: 0 auto; }
.onb-btn-wide { width: 100%; justify-content: center; padding: 12px 18px !important; }

/* Premium auth CTA — Send OTP / Verify & continue */
.onb-cta {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 22px;
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(135deg, #E0A95C 0%, #C58B43 50%, #8E5F22 100%);
  color: #2A1B07;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 24px -6px rgba(197, 139, 67, 0.50),
    0 4px 10px -2px rgba(20, 17, 13, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(20, 17, 13, 0.08);
  transition: transform .22s var(--ease), filter .22s var(--ease);
}
.onb-cta::before {
  /* swept highlight on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.42) 50%, transparent 75%);
  transform: translateX(-100%);
  transition: transform .55s var(--ease);
  pointer-events: none;
}
.onb-cta:hover:not(.disabled):not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 16px 36px -8px rgba(197, 139, 67, 0.60),
    0 6px 14px -4px rgba(20, 17, 13, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(20, 17, 13, 0.08);
}
.onb-cta:hover:not(.disabled):not(:disabled)::before { transform: translateX(100%); }
.onb-cta:active:not(.disabled):not(:disabled) { transform: translateY(-1px) scale(0.99); }
.onb-cta.disabled,
.onb-cta:disabled {
  background: var(--bg-tint);
  color: var(--ink-3);
  cursor: not-allowed;
  box-shadow:
    0 1px 2px rgba(38, 28, 14, 0.05),
    0 0 0 0 transparent,
    inset 0 0 0 0 transparent,
    inset 0 0 0 0 transparent;
}
.onb-cta svg {
  transition: transform .22s var(--ease);
}
.onb-cta:hover:not(.disabled):not(:disabled) svg {
  transform: translateX(3px);
}

/* Mobile-number input · simple flat input with a +91 prefix chip */
.onb-tel {
  font-family: var(--mono);
  font-size: 16px; letter-spacing: 0.6px;
  padding-left: 56px !important;
  background-image: linear-gradient(90deg, var(--bg-tint) 0%, var(--bg-tint) 46px, transparent 46px);
}
.onb-tel + .hint::before {
  content: '';
}
.field:has(.onb-tel) { position: relative; }
.field:has(.onb-tel)::before {
  content: '+91';
  position: absolute;
  left: 14px;
  bottom: 32px;
  font-family: var(--mono);
  font-size: 13px; font-weight: 700;
  color: var(--ink-2);
  pointer-events: none;
  letter-spacing: 0.4px;
  z-index: 1;
}

.onb-trust {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-3);
  flex-wrap: wrap;
  font-family: var(--mono); letter-spacing: 0.3px;
}
.onb-trust span { display: inline-flex; align-items: center; gap: 4px; }
.onb-trust .dot { color: var(--ink-4); }

.onb-otp {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.onb-otp-box {
  width: 100%;
  min-width: 0; /* override input intrinsic size so maxLength=6 on box 0 doesn't stretch the grid */
  aspect-ratio: 1;
  padding: 0;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  text-align: center;
  font-family: var(--mono);
  font-size: 22px; font-weight: 700;
  color: var(--ink-1);
  outline: 0;
  transition: all .15s var(--ease);
  box-shadow: var(--sh-1);
}
.onb-otp-box:hover { border-color: var(--line-strong); }
.onb-otp-box:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  transform: translateY(-1px);
}
/* Filled state — let the educator see progress */
.onb-otp-box:not(:placeholder-shown) {
  border-color: var(--ink-2);
  background: var(--bg-tint);
}

.onb-link {
  background: transparent; border: 0; padding: 0;
  color: var(--accent-deep); font-weight: 600;
  text-decoration: underline; cursor: pointer;
  font-size: inherit;
}

.onb-success {
  text-align: center;
  padding: 24px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.onb-success-ico {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--positive);
  display: grid; place-items: center;
  box-shadow: 0 0 0 8px var(--positive-soft);
  margin-bottom: 14px;
  animation: onb-pulse 1.6s var(--ease) infinite;
}
@keyframes onb-pulse {
  0%, 100% { box-shadow: 0 0 0 8px var(--positive-soft); }
  50%      { box-shadow: 0 0 0 14px var(--positive-soft); }
}
.onb-success-t {
  font-family: var(--display); font-style: italic;
  font-size: 24px; letter-spacing: -0.3px;
  color: var(--ink-1);
}
.onb-success-s {
  font-size: 13px; color: var(--ink-3);
}

.onb-proof {
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  max-width: 480px;
}
.onb-proof-avatars { display: flex; }
.onb-proof-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  margin-left: -8px;
}
.onb-proof-av:first-child { margin-left: 0; }
.onb-proof-text {
  font-size: 12.5px; color: var(--ink-2);
  line-height: 1.5;
}

/* Two-column splits */
.onb-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 920px;
}
.onb-grid-2 .onb-card { max-width: none; margin: 0; }
@media (max-width: 820px) { .onb-grid-2 { grid-template-columns: 1fr; } }

.onb-aside {
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.onb-aside-body { display: flex; flex-direction: column; gap: 10px; }
.onb-aside-body p {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}
.onb-aside-body p strong { color: var(--ink-1); }
.onb-aside-tip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: auto;
}

/* Subject group toolbar (chips + search) */
.onb-subject-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  max-width: 1080px;
}
.onb-group-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.onb-group-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s var(--ease);
  letter-spacing: -0.005em;
  box-shadow: var(--sh-1);
}
.onb-group-chip:hover { border-color: var(--line-strong); color: var(--ink-1); }
.onb-group-chip.on {
  background: var(--ink-1);
  color: var(--on-dark-1);
  border-color: var(--ink-1);
}
.onb-group-chip .cn {
  font-family: var(--mono);
  font-size: 10px; opacity: 0.55;
  margin-left: 2px;
}
.onb-subject-search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 260px;
  box-shadow: var(--sh-1);
}
.onb-subject-search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: 0;
  font-size: 12.5px; color: var(--ink-1);
  font-family: inherit;
}

/* Subjects grid · now 6-wide because there's many more */
.onb-subjects {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 24px;
  max-width: 1080px;
}
@media (max-width: 1100px) { .onb-subjects { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 920px)  { .onb-subjects { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .onb-subjects { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px)  { .onb-subjects { grid-template-columns: repeat(2, 1fr); } }
.onb-subject {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer;
  transition: all .18s var(--ease);
  position: relative;
  text-align: center;
}
.onb-subject:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--sh-2); }
.onb-subject.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(197, 139, 67, 0.18), var(--sh-2);
}
.onb-subject-art {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,0.18);
}
.onb-subject-l {
  font-size: 12px; font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.005em;
}
.onb-subject-check {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-deep);
  display: grid; place-items: center;
}

.onb-goals {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  max-width: 920px;
}
.onb-goal {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  text-align: left;
  margin-bottom: 6px;
  transition: all .15s var(--ease);
}
.onb-goal:last-child { margin-bottom: 0; }
.onb-goal:hover { border-color: var(--line-strong); background: var(--bg-tint); }
.onb-goal.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink-1);
  font-weight: 600;
}
.onb-goal-radio {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.onb-goal.on .onb-goal-radio { background: var(--accent-deep); border-color: var(--accent-deep); }

/* Brand step grid + phone preview */
.onb-brand-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  max-width: 1080px;
  align-items: flex-start;
}
@media (max-width: 980px) { .onb-brand-grid { grid-template-columns: 1fr; } }
.academy-input {
  font-family: var(--display); font-style: italic;
  font-size: 22px !important; letter-spacing: -0.3px;
}

.onb-logo-drop {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--bg-tint);
  cursor: pointer;
  transition: all .18s var(--ease);
}
.onb-logo-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.onb-logo-empty {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--display); font-style: italic;
  font-size: 26px;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,0.32);
  flex-shrink: 0;
}
.onb-logo-preview {
  width: 56px; height: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  flex-shrink: 0;
}
.onb-logo-preview img { width: 100%; height: 100%; object-fit: cover; }

.onb-swatches {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
}
.onb-swatch {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid var(--surface);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .18s var(--ease);
  box-shadow: var(--sh-1);
  outline: 0;
}
.onb-swatch:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.onb-swatch.on {
  box-shadow: 0 0 0 3px var(--ink-1), 0 6px 14px -4px rgba(0,0,0,0.32);
}

/* Phone preview · real AllCoaching app vibe */
.onb-preview-col { display: flex; flex-direction: column; align-items: center; gap: 14px; position: sticky; top: 92px; }
.onb-preview-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}
.onb-preview-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  animation: ac-pulse 1.6s infinite;
}
.onb-preview-foot {
  font-size: 11.5px; color: var(--ink-3); text-align: center;
  max-width: 280px; line-height: 1.5;
}

/* Brand preview · flat device card (no iPhone bezel / no notch) */
.onb-phone {
  width: 300px; height: 580px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  padding: 0;
  position: relative;
  box-shadow:
    0 24px 56px -16px rgba(20, 17, 13, 0.22),
    0 8px 18px -6px rgba(20, 17, 13, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: block;
  overflow: hidden;
}
.onb-phone-notch { display: none; }
.onb-phone-screen {
  width: 100%; height: 100%;
  border-radius: 20px;
  background: var(--surface);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
.onb-app-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 4px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  color: var(--ink-1);
  letter-spacing: 0.3px;
}

.onb-app-cover {
  padding: 14px 14px 16px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.onb-app-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(255,255,255,0.16), transparent 60%);
  pointer-events: none;
}
.onb-app-cover-tools {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 8px;
}
.onb-app-cover-tools button {
  width: 24px; height: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
}
.onb-app-logo {
  position: relative; z-index: 1;
  width: 52px; height: 52px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 2px solid rgba(255,255,255,0.5);
  margin-bottom: 8px;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,0.42);
}
.onb-app-logo img { width: 100%; height: 100%; object-fit: cover; }
.onb-app-logo.placeholder {
  display: grid; place-items: center;
  font-family: var(--display); font-style: italic;
  font-size: 22px; color: var(--ink-1);
  font-weight: 700;
}
.onb-app-name {
  position: relative; z-index: 1;
  font-family: var(--display); font-style: italic;
  font-size: 18px; letter-spacing: -0.3px;
  line-height: 1.1;
}
.onb-app-tag {
  position: relative; z-index: 1;
  font-size: 10.5px;
  opacity: 0.82;
  margin-top: 3px; margin-bottom: 8px;
}
.onb-app-meta {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px;
  font-family: var(--mono); letter-spacing: 0.3px;
  flex-wrap: wrap;
}
.onb-app-meta span { display: inline-flex; align-items: center; gap: 3px; }
.onb-app-meta .dot { opacity: 0.5; }

.onb-app-live {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--surface);
  border-top: 1.5px solid;
  border-bottom: 1px solid var(--line);
}
.onb-app-live .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--negative);
  animation: ac-pulse 1.4s infinite;
}

.onb-app-tabs {
  display: flex; gap: 14px;
  padding: 8px 14px 4px;
  border-bottom: 1px solid var(--line);
}
.onb-app-tabs button {
  background: transparent; border: 0;
  font-size: 10.5px; font-weight: 600;
  color: var(--ink-3);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.onb-app-tabs button.active {
  border-bottom-color: currentColor;
}

.onb-app-courses { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow: auto; }
.onb-app-course {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: 9px;
  background: var(--bg-tint);
}
.onb-app-course .thumb {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.onb-app-course .t {
  font-size: 11px; font-weight: 600;
  color: var(--ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.onb-app-course .s {
  font-size: 9.5px;
  font-family: var(--mono); letter-spacing: 0.2px;
  color: var(--ink-3);
  margin-top: 1px;
}
.onb-app-course .price {
  font-size: 11px; font-weight: 700;
  font-family: var(--mono);
}

.onb-app-bottom {
  display: flex; align-items: center; justify-content: space-around;
  padding: 7px 0 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.onb-app-bottom button {
  background: transparent; border: 0;
  color: var(--ink-3);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color .18s var(--ease);
}
.onb-app-bottom button .lbl {
  font-size: 8.5px;
  font-family: var(--mono);
  letter-spacing: 0.3px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.7;
}
.onb-app-bottom button.active .lbl { opacity: 1; }

/* Canvas swap animation between screens */
.onb-app-canvas {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: onb-canvas .42s var(--ease) both;
}
@keyframes onb-canvas {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Stacked cover (Home screen) */
.onb-app-cover-stack {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.onb-app-cover-stack .onb-app-name { line-height: 1.15; margin-bottom: 2px; }
.onb-app-cover-stack .onb-app-tag { margin-bottom: 0; }

/* Compact cover (About / Profile) */
.onb-app-cover.compact {
  text-align: center;
  padding-top: 20px; padding-bottom: 22px;
}
.onb-app-cover.compact .onb-app-logo.big {
  margin: 0 auto 10px;
  width: 62px; height: 62px;
  border-radius: 16px;
  font-size: 24px;
}
.onb-app-name.center, .onb-app-tag.center { text-align: center; }

/* Sub-header (Live screen) */
.onb-app-sub-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.onb-app-logo.small {
  width: 32px; height: 32px;
  border-radius: 9px;
  font-size: 14px;
  flex-shrink: 0;
  overflow: hidden;
}
.onb-app-logo.small img { width: 100%; height: 100%; object-fit: cover; }
.onb-app-sub-name {
  font-family: var(--display); font-style: italic;
  font-size: 15px; letter-spacing: -0.2px;
  color: var(--ink-1);
  line-height: 1.15;
}
.onb-app-sub-tag {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}
.onb-app-pill {
  background: transparent; border: 0;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 9.5px; font-weight: 700;
  font-family: var(--ui); letter-spacing: 0.2px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Live hero card */
.onb-app-livehero {
  margin: 10px 12px;
  border-radius: 12px;
  height: 90px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 10px 12px;
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(20,17,13,0.32);
}
.onb-app-livehero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.42) 100%);
}
.onb-app-livehero-overlay { position: relative; z-index: 1; }
.onb-app-livehero-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.36);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 8.5px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.onb-app-livehero-badge .pulse {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--negative);
  animation: ac-pulse 1.4s infinite;
}
.onb-app-livehero-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.onb-app-livehero-meta {
  font-size: 9.5px;
  opacity: 0.82;
  margin-top: 2px;
}
.onb-app-livehero-play {
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.32);
  display: grid; place-items: center;
  z-index: 1;
}

.onb-app-section-h {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  padding: 10px 14px 6px;
}

.onb-app-livelist { padding: 0 12px 6px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.onb-app-liverow {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-radius: 9px;
  background: var(--bg-tint);
}
.onb-app-livedate {
  width: 36px;
  text-align: center;
  border-right: 1.5px solid;
  padding-right: 8px;
}
.onb-app-livedate .d {
  font-family: var(--display); font-style: italic;
  font-size: 18px; line-height: 1;
  letter-spacing: -0.3px;
}
.onb-app-livedate .m {
  font-family: var(--mono);
  font-size: 8px; letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}
.onb-app-liverow .t {
  font-size: 10.5px; font-weight: 700;
  color: var(--ink-1);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.onb-app-liverow .s {
  font-size: 9px;
  font-family: var(--mono); letter-spacing: 0.2px;
  color: var(--ink-3);
  margin-top: 2px;
}
.onb-app-remind {
  background: transparent;
  border: 1px solid;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.2px;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Profile stats strip */
.onb-app-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 14px 10px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.onb-app-stats > div {
  border-right: 1px solid var(--line);
}
.onb-app-stats > div:last-child { border-right: 0; }
.onb-app-stats .v {
  font-family: var(--display); font-style: italic;
  font-size: 20px; line-height: 1;
  letter-spacing: -0.3px;
  color: var(--ink-1);
}
.onb-app-stats .l {
  font-family: var(--mono);
  font-size: 8.5px; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-top: 5px;
}

.onb-app-cta-row {
  display: flex; gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.onb-app-cta-primary {
  flex: 1;
  border: 0;
  color: #fff;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.onb-app-cta-secondary {
  flex: 1;
  background: var(--bg-tint);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.onb-app-cta-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--bg-tint);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--ink-2);
  cursor: pointer;
}

.onb-app-about {
  padding: 4px 14px 14px;
  flex: 1; overflow: hidden;
}
.onb-app-about p {
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 10px;
}
.onb-app-tags {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.onb-app-tags span {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  font-size: 9.5px; font-weight: 600;
  color: var(--ink-2);
}
.onb-app-certs {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 4px;
}
.onb-app-certs .cert {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px;
  color: var(--ink-2);
  padding: 5px 8px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 7px;
}

/* Screen dots indicator */
.onb-phone-dots {
  display: flex; gap: 6px;
  margin-top: 4px;
}
.onb-phone-dots button {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  border: 0;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.onb-phone-dots button.on {
  width: 22px;
}

/* Plans */
.onb-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1100px;
  align-items: stretch;
}
@media (max-width: 920px) { .onb-plans { grid-template-columns: 1fr; } }
.onb-plan {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 12px;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: all .22s var(--ease);
}
.onb-plan:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--sh-2); }
.onb-plan.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(197, 139, 67, 0.16), var(--sh-3);
}
.onb-plan.featured {
  background: linear-gradient(180deg, #FFF7E8 0%, var(--surface) 70%);
  border-color: var(--accent-line);
}
.onb-plan.featured.active { border-color: var(--accent); }
.onb-plan-badge {
  position: absolute; top: -10px; left: 22px;
  padding: 4px 10px;
  background: var(--accent-grad);
  color: #2A1B07;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.6px; font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 4px 10px -2px rgba(197, 139, 67, 0.42);
}
.onb-plan-eyebrow {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.onb-plan-name {
  font-family: var(--display); font-style: italic;
  font-size: 32px; letter-spacing: -0.5px;
  color: var(--ink-1);
  line-height: 1;
}
.onb-plan-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: -4px;
}
.onb-plan-price .big {
  font-family: var(--display); font-style: italic;
  font-size: 36px; letter-spacing: -0.6px;
  color: var(--accent-deep);
  font-weight: 400;
}
.onb-plan-price .per {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.3px;
  color: var(--ink-3);
}
.onb-plan-txn {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: -8px;
}
.onb-plan-sub {
  font-size: 12.5px;
  color: var(--ink-2);
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.onb-plan-features {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 7px;
  flex: 1;
}
.onb-plan-features li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.onb-plan-features li svg { margin-top: 4px; flex-shrink: 0; }
.onb-plan-cta {
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  text-align: center;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .18s var(--ease);
}
.onb-plan-cta.on {
  background: var(--ink-1);
  color: var(--on-dark-1);
  border-color: var(--ink-1);
}
.onb-plan.featured .onb-plan-cta:not(.on) {
  background: var(--accent-grad);
  color: #2A1B07;
  border-color: var(--accent);
  box-shadow: 0 4px 10px -2px rgba(197, 139, 67, 0.32);
}

.onb-plan-guarantee {
  margin-top: 20px;
  max-width: 1100px;
  padding: 14px 18px;
  background: var(--positive-soft);
  border: 1px solid rgba(47, 143, 78, 0.16);
  border-radius: 12px;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--ink-2);
  line-height: 1.55;
}
.onb-plan-guarantee svg { margin-top: 2px; flex-shrink: 0; }
.onb-plan-guarantee strong { color: var(--positive); font-weight: 700; }

/* Launch step */
.onb-launch {
  text-align: center;
  max-width: 720px;
  width: 100%;
}
.onb-launch-ring {
  width: 84px; height: 84px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto;
  box-shadow: 0 0 0 14px rgba(197, 139, 67, 0.12),
              0 0 0 28px rgba(197, 139, 67, 0.06),
              0 14px 28px -8px rgba(197, 139, 67, 0.42);
  animation: onb-pulse 2s var(--ease) infinite;
}
.onb-launch-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 14px;
}
.onb-launch-stats .stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 14px;
}
.onb-launch-stats .v {
  font-family: var(--display); font-style: italic;
  font-size: 28px; letter-spacing: -0.5px;
  color: var(--ink-1);
  line-height: 1;
}
.onb-launch-stats .l {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
  margin-top: 8px;
}
@media (max-width: 720px) { .onb-launch-stats { grid-template-columns: 1fr; } }

.onb-launch-plan {
  display: flex; align-items: center; gap: 12px;
  margin: 22px auto 0;
  max-width: 480px;
  padding: 12px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  text-align: left;
}

.onb-launch-bullets {
  margin-top: 30px;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.onb-launch-bullets div { display: flex; align-items: center; gap: 8px; justify-content: center; }

/* Footer nav */
.onb-foot {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 36px;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
}
.onb-foot-counter {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.6px;
  color: var(--ink-3);
}

/* ─── Referrals page ────────────────────────────────────────────── */
.rf-hero {
  background: linear-gradient(135deg, #1A150F 0%, #2A211B 60%, #4A2A1B 100%);
  color: var(--on-dark-1);
  border-radius: var(--radius-3);
  padding: 24px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  position: relative;
  overflow: hidden;
}
.rf-hero::before {
  content: '';
  position: absolute;
  right: -80px; top: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197,139,67,0.32), transparent 70%);
  pointer-events: none;
}
.rf-hero-l { position: relative; z-index: 1; }
.rf-hero-link {
  display: flex; align-items: center; gap: 0;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  overflow: hidden;
}
.rf-hero-link code {
  flex: 1;
  padding: 14px 16px;
  font-family: var(--mono); font-size: 13px;
  color: var(--on-dark-1);
  background: transparent;
  word-break: break-all;
}
.rf-hero-copy {
  background: var(--accent-grad);
  color: #2A1B07;
  border: 0;
  padding: 14px 18px;
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.rf-hero-copy:hover { filter: brightness(1.05); }
.rf-hero-meta {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 12px;
  color: rgba(245, 216, 174, 0.82);
}
.rf-hero-meta .dot { color: rgba(245, 216, 174, 0.32); }
.rf-hero-meta svg { color: var(--accent); }

.rf-hero-share { position: relative; z-index: 1; }
.rf-share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rf-share {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--on-dark-1);
  padding: 11px 12px;
  border-radius: 9px;
  font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer;
  transition: all .18s var(--ease);
  letter-spacing: -0.005em;
}
.rf-share:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  transform: translateY(-1px);
}
.rf-share.whatsapp:hover { color: #4ED36A; }
.rf-share.email:hover    { color: #E0A95C; }
.rf-share.twitter:hover  { color: #6DA1E0; }
.rf-share.embed:hover    { color: var(--accent); }

@media (max-width: 1100px) {
  .rf-hero { grid-template-columns: 1fr; }
}

.rf-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.rf-tier {
  background: var(--bg-tint);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  transition: all .22s var(--ease);
}
.rf-tier:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.rf-tier.current {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(197, 139, 67, 0.16);
}
.rf-tier-head {
  display: flex; align-items: flex-start; justify-content: space-between;
}
.rf-tier-name {
  font-family: var(--display); font-style: italic;
  font-size: 22px; letter-spacing: -0.3px;
  color: var(--ink-1);
}
.rf-tier-cut {
  font-family: var(--mono); font-size: 28px;
  font-weight: 700;
  color: var(--accent-deep);
  letter-spacing: -1px;
}
.rf-tier-perks {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.rf-tier-perks li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.45;
  color: var(--ink-2);
}
.rf-tier-perks li svg { margin-top: 3px; flex-shrink: 0; }

@media (max-width: 980px) { .rf-tiers { grid-template-columns: 1fr; } }

.rf-steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.rf-steps li {
  display: flex; gap: 14px;
  align-items: flex-start;
}
.rf-step-n {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--accent-grad);
  color: #2A1B07;
  font-family: var(--display); font-style: italic;
  font-size: 18px; font-weight: 600;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px -2px rgba(197, 139, 67, 0.32);
  flex-shrink: 0;
}
.rf-step-t {
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-1); line-height: 1.3;
  margin-bottom: 3px;
}
.rf-step-d {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}

.rf-faq { display: flex; flex-direction: column; gap: 4px; }
.rf-faq-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color .15s;
}
.rf-faq-item:hover { border-color: var(--line-2); }
.rf-faq-item[open] { background: var(--bg-tint); }
.rf-faq-item summary {
  list-style: none;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px; font-weight: 600;
  color: var(--ink-1);
  display: flex; align-items: center; gap: 10px;
}
.rf-faq-item summary::-webkit-details-marker { display: none; }
.rf-faq-chev { color: var(--ink-3); transition: transform .18s var(--ease); }
.rf-faq-item[open] .rf-faq-chev { transform: rotate(90deg); }
.rf-faq-a {
  padding: 0 14px 14px 38px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* ─── Course lesson table (library-style) ───────────────────────────── */
.clt-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.clt-search {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 100%; max-width: 280px;
}
.clt-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  font-size: 12.5px; color: var(--ink-1);
  font-family: inherit;
}
.clt-search input::placeholder { color: var(--ink-3); }
.clt-status {
  font-size: 12.5px;
  padding: 6px 30px 6px 12px;
  height: 32px;
  min-width: 130px;
}

.clt-wrap { overflow-x: auto; }
.clt-table { table-layout: auto; }
.clt-table thead th {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  padding: 11px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.clt-table tbody td {
  padding: 12px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-1);
}
.clt-table tbody tr {
  transition: background .12s;
}
.clt-table tbody tr:hover { background: var(--surface-2); }
.clt-table tbody tr.dragging { opacity: 0.45; }
.clt-table tbody tr.drop-over td { box-shadow: inset 0 2px 0 var(--accent); }
.clt-table .right { text-align: right; }
.clt-table .num { font-family: var(--mono); font-size: 12px; }

.clt-title {
  font-weight: 500; font-size: 13px; line-height: 1.3;
  max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink-1);
}

.clt-grip-col { width: 26px; padding: 0 !important; }
.clt-grip-cell {
  text-align: center; color: var(--ink-3);
  cursor: grab; padding: 0 !important; width: 26px;
  user-select: none;
}
.clt-grip-cell:active { cursor: grabbing; }
.clt-table tr:hover .clt-grip-cell { color: var(--ink-2); }

.clt-order-col { width: 38px; padding: 11px 6px !important; text-align: center; }
.clt-order-cell { text-align: center; padding: 12px 6px !important; }
.clt-order-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
}
.clt-table tr:hover .clt-order-badge {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep);
}

.clt-kindtag {
  position: absolute; top: 4px; left: 4px;
  background: rgba(20,17,13,0.84); color: #fff;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.4px;
  padding: 2px 5px; border-radius: 3px;
}

.clt-table .ass-chips .ass-chip {
  max-width: 160px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYER · Global breakpoints
   Mobile-first refinement. Touches every page surface so the dashboard works
   beautifully on tablets and phones without breaking the editorial aesthetic.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Tablet · ≤1100px ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --rail: 72px; } /* auto-collapse the rail */
  .app .rail-brand .word,
  .app .rail-section,
  .app .rail-item span:not(.rail-badge),
  .app .rail-badge,
  .app .rail-me .meta,
  .app .rail-foot > div:first-child:not(.rail-me) { display: none; }
  .app .rail-item { justify-content: center; padding: 9px 0; }
  .app .rail-item.active::before { left: 0; }
  .app .rail-me { justify-content: center; }
  .app .rail-children { margin-left: 0; padding: 0 4px; border-left: 0; }
  .app .rail-item.rail-child { padding: 6px 0; }
  .app .rail-tick { display: none; }

  .main { padding: 22px 24px 96px; }
  .topbar { padding: 0 20px; gap: 10px; }
  .tb-search { max-width: 360px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-3 .span-2 { grid-column: span 2; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet · ≤900px ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .page-title { font-size: 34px !important; letter-spacing: -0.5px; }
  .page-head { gap: 14px; }
  .page-actions { width: 100%; }
  .page-actions .tb-mode { flex: 1; }

  .tb-cta span,
  .tb-icon-btn[title="Help"] { display: none; }
  .tb-search kbd { display: none; }

  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }
  .grid-3 .span-2 { grid-column: auto; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

  /* Stack KPI cards 2 per row on tablet */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-value { font-size: 30px; }

  /* Card tighter padding */
  .card-head, .card-body { padding: 14px 16px; }

  /* Notification two-column layout collapses */
  .nx-layout { grid-template-columns: 1fr; }
  .nx-side { position: static; }
  .nx-summary { grid-template-columns: repeat(3, 1fr); }
}

/* ── Phone · ≤720px ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Rail becomes an off-canvas drawer; only the topbar's hamburger surfaces it */
  .app { grid-template-columns: 0 1fr; }
  .app.collapsed { grid-template-columns: 0 1fr; }
  .rail {
    position: fixed; top: 0; left: 0;
    width: 280px; height: 100vh;
    z-index: 220;
    transform: translateX(-105%);
    transition: transform .26s var(--ease);
    box-shadow: 0 24px 48px rgba(20, 17, 13, 0.32);
    overflow-y: auto;
  }
  .app.mobile-nav-open .rail { transform: translateX(0); }
  /* On mobile, always show labels even if `.collapsed` class is on */
  .app .rail-brand .word,
  .app .rail-section,
  .app .rail-item span:not(.rail-badge),
  .app .rail-badge,
  .app .rail-me .meta { display: revert; }
  .app .rail-item { justify-content: flex-start; padding: 9px 12px; }
  .app .rail-me { justify-content: flex-start; }
  .app .rail-children { margin-left: 24px; padding: 2px 0 4px; border-left: 1px solid rgba(255,255,255,0.08); }
  .app .rail-item.rail-child { padding: 9px 14px; }
  .app .rail-tick { display: inline-block; }
  /* Backdrop */
  .rail-scrim {
    position: fixed; inset: 0;
    background: rgba(20, 17, 13, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 210;
    animation: ac-fade .22s var(--ease) both;
  }

  .topbar { padding: 0 14px; gap: 8px; }
  .tb-search { max-width: none; padding: 8px 10px; }
  .tb-divider,
  .tb-cta { display: none; }
  .tb-icon-btn { width: 32px; height: 32px; }
  .tb-icon-btn[title="Help"] { display: none; }
  .tb-avatar { width: 32px; height: 32px; }

  .main { padding: 18px 16px 80px; }

  /* Page head — actions wrap below title */
  .page-head { flex-direction: column; align-items: flex-start; }
  .page-title { font-size: 28px !important; letter-spacing: -0.4px; }
  .page-actions { width: 100%; flex-wrap: wrap; }
  .page-actions > * { flex: 1 1 auto; }

  /* KPIs single col */
  .kpi-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  /* Tables — already scroll, but tighten cells */
  .table th, .table td { padding: 10px 10px; }
  .table-toolbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .clt-toolbar { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .clt-search { max-width: none; width: 100%; }

  /* Tabs — allow scroll */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex-shrink: 0; }

  /* Modal — full-width minus 8px */
  .modal { width: calc(100vw - 16px) !important; max-height: 92vh; border-radius: 14px; }
  .modal-head { padding: 14px 18px; }
  .modal-body { padding: 18px; }
  .modal-foot { padding: 12px 18px; flex-wrap: wrap; }

  .field-row { grid-template-columns: 1fr; }

  /* Drawer — full-width slide */
  .drawer { width: 100vw; }
  .drawer-head, .drawer-body, .drawer-foot { padding-left: 18px; padding-right: 18px; }

  /* Notifications */
  .nx-summary { grid-template-columns: repeat(2, 1fr); }
  .nx-row { grid-template-columns: 22px 22px 40px 1fr auto; gap: 8px; padding: 10px 12px; }

  /* Cards · uniform tighter padding */
  .card { border-radius: 14px; }
  .card-head { padding: 14px 14px 12px; }
  .card-body { padding: 14px; }
  .card-foot { padding: 12px 14px; }

  /* Course detail */
  .course-hero, .lvc-row { padding: 14px; }
  .cgrid.video { grid-template-columns: 1fr 1fr; }
  .cgrid.pdf,
  .cgrid.test { grid-template-columns: 1fr; }

  /* Charts — let them scroll if they overflow */
  .chart-grid { overflow-x: auto; }

  /* Settings rail collapses */
  .set-rail { width: 100%; flex-shrink: 0; margin-bottom: 14px; }

  /* Live-class hero */
  .live-hero-mini {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Sched calendar — smaller days */
  .cal-day { min-height: 78px; padding: 6px 5px 4px; }
  .cal-day-events { gap: 1px; }
  .cal-ev { padding: 1px 4px; font-size: 9.5px; }
  .cal-ev-l { display: none; }
  .cal-wd > div { padding: 7px 6px; font-size: 9px; }

  /* ── Dashboard ───────────────────────────────────── */
  /* Live tile · stack title + CTA */
  .live-tile > .row.gap { flex-direction: column; align-items: stretch; gap: 12px; }
  .live-tile > .row.gap > .row.gap { flex: 1; }
  .live-tile .btn { width: 100%; justify-content: center; }

  /* Hero strips (free content / referrals / live mini) — stack */
  .hero-strip,
  .live-hero-mini,
  .rf-hero {
    grid-template-columns: 1fr !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 18px !important;
  }
  .rf-hero-share { width: 100%; }
  .rf-share-row { grid-template-columns: 1fr 1fr; }
  .rf-hero-link code { font-size: 11px; padding: 12px 14px; word-break: break-all; }
  .rf-hero-copy { padding: 12px 14px; }

  /* Course detail hero · single column */
  .course-hero { padding: 16px; }
  .course-hero-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .course-hero .row.gap { flex-wrap: wrap; }

  /* Compose card (community) · let foot stack on tight widths */
  .compose-card { padding: 14px; }
  .compose-foot { flex-wrap: wrap; gap: 8px; }
  .audience-pill,
  .schedule-pill { width: 100%; justify-content: flex-start; }

  /* Posts feed · post cards full width */
  .com-post { padding: 14px; }

  /* Assignments editor · stack cleanly */
  .ass-row {
    grid-template-columns: auto 56px 1fr !important;
    grid-template-rows: auto auto;
    row-gap: 8px;
  }
  .ass-row > .ass-controls { grid-column: 2 / -1; }
  .ass-row > button.ass-grip:first-child,
  .ass-row > button.ass-grip:nth-child(2) { grid-row: 1; }

  /* Notification panel · fit phone screen */
  .notif-panel {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
    left: 8px !important;
    max-height: 80vh;
  }

  /* Settings layout · stack rail + content */
  .set-rail { width: 100%; flex-shrink: 0; margin-bottom: 14px; }
  .set-rail .col { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .set-rail .item { flex: 1 1 calc(50% - 4px); padding: 8px 10px; }
  .set-rail .item > div .dim { display: none; }

  /* Analytics · funnel rows stack */
  .funnel-row { grid-template-columns: 90px 1fr 70px !important; gap: 8px; }

  /* Tabs bar inside course detail · wrap into rows */
  .tabs button .count { font-size: 9.5px; }

  /* Modal in mobile · stack footer buttons */
  .modal-foot { gap: 6px; }
  .modal-foot .btn { padding: 8px 12px; font-size: 12.5px; }

  /* Plan cards (onboarding step 5) · stack */
  .onb-plans { grid-template-columns: 1fr; }
  .onb-plan-name { font-size: 28px; }
  .onb-plan-price .big { font-size: 32px; }

  /* Schedule access cards */
  .access-grid { grid-template-columns: 1fr; }

  /* Test feedback summary · stack */
  .fb-summary { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .fb-bars { padding: 0 14px; }

  /* Test leaderboard podium · stack */
  .lb-podium { grid-template-columns: 1fr; padding: 18px 14px; }
  .lb-stand.p1 { transform: translateY(0); order: -1; }
  .lb-kpis { grid-template-columns: 1fr 1fr; }

  /* Course detail content grid · 1 col on phone */
  .feed-row {
    grid-template-columns: 22px 1fr !important;
    grid-template-rows: auto auto;
    gap: 8px;
  }
  .feed-row .grip,
  .feed-row .order { display: none; }
  .feed-row .meta { grid-column: 1 / -1; min-width: 0; }
  .feed-row > .row.gap { grid-column: 1 / -1; justify-content: flex-end; }

  /* CourseLessonTable · convert to card-style rows */
  .clt-table thead { display: none; }
  .clt-table, .clt-table tbody, .clt-table tr, .clt-table td { display: block; width: 100%; }
  .clt-table tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  .clt-table td {
    padding: 4px 0;
    border: 0;
    text-align: left !important;
  }
  .clt-table td:empty { display: none; }
  .clt-table td.right { text-align: left !important; }
  .clt-table td .num,
  .clt-table td.right.num { font-family: var(--mono); font-size: 12px; }
  .clt-table .clt-title { white-space: normal; max-width: none; }
}

/* ── Small phone · ≤480px ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-title { font-size: 24px !important; }
  .page-sub { font-size: 12.5px; }
  .kpi-value { font-size: 26px; }
  .modal-head h3 { font-size: 18px; }

  .tabs button { padding: 9px 10px; font-size: 12px; }

  /* Sidebar onboarding */
  .onb-top { padding: 14px 18px; }
  .onb-rail { padding: 12px 12px 4px; gap: 0; }
  .onb-rail-dot { padding: 4px 6px; }
  .onb-rail-dot::after { width: 14px; margin-left: 6px; }
  .onb-body { padding: 16px 18px 110px; }
  .onb-foot { padding: 12px 18px; }
  .onb-h1 { font-size: 26px !important; letter-spacing: -0.5px !important; }
  .onb-lede { font-size: 13px; }
  .onb-card { padding: 18px; }
  .onb-cta { padding: 14px 18px; font-size: 14px; }

  .onb-phone { width: 100%; max-width: 320px; }

  /* Course detail tabs · be more horizontal */
  .tabs-bar { gap: 12px; }
}

/* ── Touch device tweaks — no hover lifts (avoid sticky hover states) ──── */
@media (hover: none) and (pointer: coarse) {
  .kpi:hover,
  .card:hover,
  .btn:hover,
  .tb-icon-btn:hover,
  .onb-cta:hover { transform: none !important; }
}