/* 00-fonts.css */
/* PT Sans & PT Serif — ParaType, SIL Open Font License 1.1 (see /fonts/OFL.txt) */
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(/fonts/PTSans-400-cyrillic.woff2) format('woff2');}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(/fonts/PTSans-400-latin.woff2) format('woff2');}
@font-face{font-family:'PT Sans';font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(/fonts/PTSans-400i-cyrillic.woff2) format('woff2');}
@font-face{font-family:'PT Sans';font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(/fonts/PTSans-400i-latin.woff2) format('woff2');}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(/fonts/PTSans-700-cyrillic.woff2) format('woff2');}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(/fonts/PTSans-700-latin.woff2) format('woff2');}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(/fonts/PTSerif-400-cyrillic.woff2) format('woff2');}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(/fonts/PTSerif-400-latin.woff2) format('woff2');}
@font-face{font-family:'PT Serif';font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(/fonts/PTSerif-400i-cyrillic.woff2) format('woff2');}
@font-face{font-family:'PT Serif';font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(/fonts/PTSerif-400i-latin.woff2) format('woff2');}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;src:url(/fonts/PTSerif-700-cyrillic.woff2) format('woff2');}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;src:url(/fonts/PTSerif-700-latin.woff2) format('woff2');}

/* 01-base.css */
/* ============================================================
   LINGVESSA — DESIGN SYSTEM
   A committed, single-theme brand system (not viewer-theme reactive):
   this artifact presents fixed product mockups, like comps in a
   deck — its colors are the product's brand decisions, not a UI
   that should invert for a dark-mode reader. Background and every
   color below are painted explicitly so the page holds regardless
   of host theme.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root{
  /* ---- Brand: ink & greens ---- */
  --ink:            #172620;
  --ink-soft:       #4C5B53;
  --ink-faint:      #7C8A81;

  --emerald-900:    #0A2A22;
  --emerald-800:    #0D372C;
  --emerald-700:    #11543F;
  --emerald-600:    #166B51;
  --emerald-500:    #1D8264;
  --emerald-100:    #E3EEE7;
  --emerald-50:     #F1F6F2;

  /* ---- Brand: gold (spend sparingly) ---- */
  --gold-700:       #7E5C2C;
  --gold-600:       #9C733A;
  --gold-500:       #B6894A;
  --gold-300:       #D8B67C;
  --gold-100:       #F1E6D2;

  /* ---- Neutrals: warm, not grey ---- */
  --parchment:      #F7F4EB;
  --parchment-dim:  #F0ECDF;
  --paper:          #FFFFFF;
  --line:           #E2DAC7;
  --line-strong:    #CDBF9E;

  /* ---- Semantic status (distinct from brand + gold accent) ---- */
  --good:           #2F7D52;
  --good-bg:        #E4F1E9;
  --good-line:      #BFDCC9;
  --warn:           #A9701F;
  --warn-bg:        #F8EDD8;
  --warn-line:      #E7CE9C;
  --bad:            #B23B34;
  --bad-bg:         #F7E5E2;
  --bad-line:       #E9BFB8;
  --info:           #3E6E8E;
  --info-bg:        #E6EEF3;
  --info-line:      #BFD6E3;

  --focus-ring:     #2D6E8E;

  /* ---- Type ---- */
  --font-display: 'PT Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'PT Sans', 'Segoe UI', Tahoma, sans-serif;

  /* ---- Scale ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  --radius-s: 6px; --radius-m: 10px; --radius-l: 18px; --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(23,38,32,.06), 0 6px 20px -8px rgba(23,38,32,.18);
  --shadow-pop:  0 12px 40px -12px rgba(10,42,34,.35);

  --header-h: 64px;
  --rail-w: 236px;
}

/* ============================================================
   FONTS — PT Serif (display) + PT Sans (UI), ParaType's Cyrillic
   system pair — chosen because the interface is genuinely
   RU/UK/EN, and both faces share the same underlying proportions.
   ============================================================ */


/* ============================================================
   TYPE SCALE
   ============================================================ */
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-1{ font-family: var(--font-display); font-weight:700; font-size: clamp(2.4rem, 1.9rem + 2vw, 3.4rem); line-height:1.08; letter-spacing:-.01em; text-wrap: balance; margin:0; }
.display-2{ font-family: var(--font-display); font-weight:700; font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem); line-height:1.12; letter-spacing:-.005em; text-wrap: balance; margin:0; }
.h1{ font-family: var(--font-display); font-weight:700; font-size:1.75rem; line-height:1.2; text-wrap:balance; margin:0; }
.h2{ font-family: var(--font-display); font-weight:700; font-size:1.4rem; line-height:1.25; text-wrap:balance; margin:0; }
.h3{ font-family: var(--font-display); font-weight:700; font-size:1.15rem; line-height:1.3; margin:0; }
.h4{ font-family: var(--font-body); font-weight:700; font-size:.95rem; line-height:1.35; margin:0; }
.lead{ font-size:1.125rem; line-height:1.6; color: var(--ink-soft); max-width:62ch; }
.body-text{ font-size:1rem; line-height:1.65; color: var(--ink); max-width:65ch; }
p{ margin:0 0 var(--space-3); }
.small{ font-size:.875rem; line-height:1.5; color: var(--ink-soft); }
.caption{ font-size:.75rem; line-height:1.4; color: var(--ink-faint); }
.eyebrow{ font-family: var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color: var(--gold-600); }
.eyebrow.on-dark{ color: var(--gold-300); }
.tabular{ font-variant-numeric: tabular-nums; }
a{ color: var(--emerald-700); }
a.gold{ color: var(--gold-600); }
.on-dark a.gold{ color: var(--gold-300); }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.wrap{ flex-wrap:wrap; }
.g1{gap:var(--space-1)} .g2{gap:var(--space-2)} .g3{gap:var(--space-3)} .g4{gap:var(--space-4)}
.g5{gap:var(--space-5)} .g6{gap:var(--space-6)} .g8{gap:var(--space-8)}
.grow{ flex:1 1 auto; min-width:0; }
.between{ justify-content:space-between; }
.center{ align-items:center; justify-content:center; }
.container{ max-width:1180px; margin:0 auto; padding-inline:var(--space-8); }
@media (max-width:900px){ .container{ padding-inline:var(--space-5);} }

.grid{ display:grid; gap: var(--space-5); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:860px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

.hr{ border:0; border-top:1px solid var(--line); margin: var(--space-6) 0; }
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--emerald-900); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:999; }
.skip-link:focus{ left:0; }

:focus-visible{ outline: 2.5px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
button, [role="button"], a, input, select, textarea{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}


/* 02-components.css */
/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  appearance:none; border:1px solid transparent; cursor:pointer;
  font-family: var(--font-body); font-weight:700; font-size:.9rem;
  padding: 11px 20px; border-radius: var(--radius-m);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  line-height:1.2; white-space:nowrap; text-decoration:none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn-lg{ padding:14px 26px; font-size:1rem; border-radius: var(--radius-m); }
.btn-sm{ padding:7px 13px; font-size:.8125rem; border-radius: var(--radius-s); }
.btn-icon{ padding:9px; width:38px; height:38px; }

.btn-primary{ background: var(--emerald-700); color:#fff; }
.btn-primary:hover{ background: var(--emerald-600); }
.btn-gold{ background: var(--gold-600); color:#fff; }
.btn-gold:hover{ background: var(--gold-700); }
.btn-secondary{ background: transparent; border-color: var(--emerald-700); color: var(--emerald-700); }
.btn-secondary:hover{ background: var(--emerald-50); }
.btn-secondary.selected{ background: var(--emerald-700); border-color: var(--emerald-700); color:#fff; }
.btn-ghost{ background: transparent; color: var(--ink-soft); }
.btn-ghost:hover{ background: rgba(23,38,32,.06); color:var(--ink); }
.btn-danger{ background: transparent; border-color: var(--bad-line); color: var(--bad); }
.btn-danger:hover{ background: var(--bad-bg); }
.btn-on-dark{ background: var(--gold-500); color: var(--emerald-900); }
.btn-on-dark:hover{ background: var(--gold-300); }
.btn-on-dark-ghost{ background: transparent; border-color: rgba(247,244,235,.4); color:#F7F4EB; }
.btn-on-dark-ghost:hover{ background: rgba(247,244,235,.1); }
.btn-block{ width:100%; }

.btn .spinner{ display:none; }
.btn.is-loading .btn-label{ visibility:hidden; }
.btn.is-loading .spinner{ display:inline-block; position:absolute; }
.btn{ position:relative; }
.spinner{ width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation: spin .7s linear infinite; opacity:.85;}
@keyframes spin{ to{ transform:rotate(360deg); } }

.icon-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.875rem; color:var(--emerald-700); text-decoration:none; }
.icon-link:hover{ text-decoration:underline; }
.icon-link svg{ width:16px; height:16px; }

/* ============================================================
   FORMS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom: var(--space-4); }
.field label, .field-label{ font-size:.8125rem; font-weight:700; color: var(--ink); }
.field .hint{ font-size:.78rem; color: var(--ink-faint); }
.field .error-text{ font-size:.78rem; color: var(--bad); font-weight:700; display:flex; gap:5px; align-items:center; }

.input, select.input, textarea.input{
  width:100%; font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  background: var(--paper); border:1.5px solid var(--line-strong); border-radius: var(--radius-s);
  padding: 11px 13px; transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder{ color: var(--ink-faint); }
.input:hover{ border-color: var(--gold-500); }
.input:focus{ outline:none; border-color: var(--emerald-600); box-shadow: 0 0 0 3px var(--emerald-100); }
.field.has-error .input{ border-color: var(--bad); }
.field.has-error .input:focus{ box-shadow: 0 0 0 3px var(--bad-bg); }
textarea.input{ resize:vertical; min-height:88px; }
select.input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234C5B53' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }

.input-group{ display:flex; align-items:stretch; }
.input-group .input{ border-radius:0; }
.input-group > :first-child .input, .input-group > :first-child{ border-top-left-radius: var(--radius-s); border-bottom-left-radius: var(--radius-s); }
.input-group > :last-child .input, .input-group > :last-child{ border-top-right-radius: var(--radius-s); border-bottom-right-radius: var(--radius-s); }

.check-row{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:.875rem; color:var(--ink); }
.check-row input[type="checkbox"], .check-row input[type="radio"]{
  appearance:none; width:19px; height:19px; flex:none; margin-top:1px;
  border:1.5px solid var(--line-strong); background:var(--paper); cursor:pointer; position:relative;
}
.check-row input[type="checkbox"]{ border-radius:5px; }
.check-row input[type="radio"]{ border-radius:50%; }
.check-row input:checked{ background: var(--emerald-700); border-color:var(--emerald-700); }
.check-row input[type="checkbox"]:checked::after{ content:""; position:absolute; left:5px; top:1px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(40deg); }
.check-row input[type="radio"]:checked::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:#fff; }

.switch{ position:relative; width:42px; height:24px; flex:none; }
.switch input{ opacity:0; position:absolute; inset:0; margin:0; cursor:pointer; }
.switch .track{ position:absolute; inset:0; background: var(--line-strong); border-radius: 999px; transition:.15s; }
.switch .thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:.15s; }
.switch input:checked + .track{ background: var(--emerald-600); }
.switch input:checked + .track .thumb{ transform: translateX(18px); }
.switch input:focus-visible + .track{ outline:2.5px solid var(--focus-ring); outline-offset:2px; }

.tz-note{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--ink-soft); background:var(--emerald-50); border:1px solid var(--emerald-100); padding:6px 10px; border-radius:var(--radius-pill); }

/* ============================================================
   CARDS
   ============================================================ */
.card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.card-pad{ padding: var(--space-6); }
.card-pad-sm{ padding: var(--space-4) var(--space-5); }
.card-flat{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-m); }

.card-next-lesson{ border-left:4px solid var(--gold-500); }
.card-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }

.stat-tile{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); padding:var(--space-4) var(--space-5); }
.stat-tile .num{ font-family:var(--font-display); font-weight:700; font-size:1.9rem; color:var(--emerald-800); }
.stat-tile .label{ font-size:.8rem; color:var(--ink-soft); }

/* ============================================================
   BADGES / PILLS / STATUS
   ============================================================ */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; padding:4px 10px 4px 8px; border-radius:var(--radius-pill); border:1px solid transparent; white-space:nowrap; }
.pill .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.pill-good{ background:var(--good-bg); color:var(--good); border-color:var(--good-line); }
.pill-good .dot{ background:var(--good); }
.pill-warn{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }
.pill-warn .dot{ background:var(--warn); }
.pill-bad{ background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line); }
.pill-bad .dot{ background:var(--bad); }
.pill-info{ background:var(--info-bg); color:var(--info); border-color:var(--info-line); }
.pill-info .dot{ background:var(--info); }
.pill-neutral{ background:var(--parchment-dim); color:var(--ink-soft); border-color:var(--line); }
.pill-neutral .dot{ background:var(--ink-faint); }
.pill-gold{ background:var(--gold-100); color:var(--gold-700); border-color:var(--gold-300); }
.pill-gold .dot{ background:var(--gold-600); }

.avatar{ width:40px; height:40px; border-radius:50%; background:var(--emerald-100); color:var(--emerald-800); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex:none; font-family:var(--font-display); }
.avatar-lg{ width:56px; height:56px; font-size:1.05rem; }
.avatar-sm{ width:28px; height:28px; font-size:.7rem; }

/* ============================================================
   TABLE
   ============================================================ */
table.table{ width:100%; border-collapse:collapse; font-size:.875rem; min-width:640px; }
.table th{ text-align:left; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; padding:10px 14px; border-bottom:1.5px solid var(--line-strong); background:var(--parchment-dim); position:sticky; top:0; }
.table td{ padding:13px 14px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:middle; }
.table tbody tr:hover{ background: var(--emerald-50); }
.table tr.is-selected{ background: var(--emerald-100); }

/* ============================================================
   TABS
   ============================================================ */
.tabs{ display:flex; gap: var(--space-5); border-bottom:1.5px solid var(--line); overflow-x:auto; }
.tab{ background:none; border:none; cursor:pointer; padding:12px 2px; font-family:var(--font-body); font-weight:700; font-size:.875rem; color:var(--ink-faint); border-bottom:2.5px solid transparent; white-space:nowrap; margin-bottom:-1.5px; }
.tab:hover{ color:var(--ink); }
.tab[aria-selected="true"]{ color:var(--emerald-800); border-bottom-color:var(--gold-500); }

/* ============================================================
   MODAL / OVERLAY / TOAST
   ============================================================ */
.overlay{ position:fixed; inset:0; background:rgba(10,26,20,.55); backdrop-filter: blur(1px); display:flex; align-items:center; justify-content:center; padding:20px; z-index:200; opacity:0; pointer-events:none; transition:opacity .15s ease; }
.overlay.is-open{ opacity:1; pointer-events:auto; }
.modal{ background:var(--paper); border-radius:var(--radius-l); max-width:480px; width:100%; box-shadow:var(--shadow-pop); transform:translateY(8px) scale(.98); transition:transform .15s ease; max-height:88vh; display:flex; flex-direction:column; }
.overlay.is-open .modal{ transform:translateY(0) scale(1); }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); padding:var(--space-5) var(--space-6) 0; }
.modal-body{ padding: var(--space-4) var(--space-6); overflow-y:auto; }
.modal-foot{ padding: var(--space-5) var(--space-6); display:flex; justify-content:flex-end; gap:var(--space-3); border-top:1px solid var(--line); }
.modal-close{ background:none; border:none; cursor:pointer; color:var(--ink-faint); padding:4px; border-radius:6px; }
.modal-close:hover{ background:rgba(23,38,32,.08); color:var(--ink); }
.modal-wide{ max-width:640px; }

.toast-stack{ position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:10px; z-index:300; width:min(360px,90vw); }
.toast{ background:var(--emerald-900); color:#F7F4EB; padding:13px 16px; border-radius:var(--radius-m); box-shadow:var(--shadow-pop); display:flex; gap:10px; align-items:flex-start; font-size:.875rem; animation: toast-in .18s ease; }
.toast.good{ background:#1E4433; } .toast.bad{ background:#5B2323; } .toast.info{ background:var(--emerald-900); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.toast svg{ flex:none; margin-top:1px; }

/* ============================================================
   EMPTY / ERROR / LOADING states
   ============================================================ */
.state-block{ text-align:center; padding: var(--space-10) var(--space-6); color:var(--ink-soft); }
.state-block svg{ opacity:.5; margin-bottom:var(--space-3); }
.state-block .h4{ color:var(--ink); margin-bottom:4px; }
.skeleton{ background: linear-gradient(90deg, var(--parchment-dim) 25%, var(--line) 37%, var(--parchment-dim) 63%); background-size:400% 100%; animation: sk 1.4s ease infinite; border-radius:var(--radius-s); }
@keyframes sk{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* ============================================================
   LOGO MARKS
   ============================================================ */
.lv-mark{ display:inline-flex; flex:none; }
.lv-word{ font-family:var(--font-display); font-weight:700; letter-spacing:.01em; }
.lv-lockup{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.lv-lockup .lv-word{ font-size:1.15rem; color:var(--emerald-900); line-height:1; }
.lv-lockup.on-dark .lv-word{ color:#F7F4EB; }

/* 07-room.css */
/* ============================================================
   EXERCISE COMPONENTS (shared: room + homework)
   ============================================================ */
.mc-list{ display:flex; flex-direction:column; gap:8px; }
.mc-opt{ display:flex; align-items:center; gap:10px; text-align:left; width:100%; background:var(--paper); border:1.5px solid var(--line-strong); border-radius:var(--radius-s); padding:11px 14px; cursor:pointer; font-size:.9rem; color:var(--ink); font-family:var(--font-body); }
.mc-opt:hover{ border-color:var(--emerald-500); }
.mc-opt .opt-letter{ width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; color:var(--ink-soft); flex:none; }
.mc-opt.selected{ border-color:var(--emerald-600); background:var(--emerald-50); }
.mc-opt.selected .opt-letter{ background:var(--emerald-600); border-color:var(--emerald-600); color:#fff; }
.mc-opt.is-correct{ border-color:var(--good); background:var(--good-bg); }
.mc-opt.is-correct .opt-letter{ background:var(--good); border-color:var(--good); color:#fff; }
.mc-opt.is-wrong{ border-color:var(--bad); background:var(--bad-bg); }
.mc-opt.is-wrong .opt-letter{ background:var(--bad); border-color:var(--bad); color:#fff; }

.mc-feedback{ display:none; align-items:flex-start; gap:9px; margin-top:10px; padding:11px 13px; border-radius:var(--radius-s); font-size:.85rem; border:1px solid transparent; }
.mc-feedback.fb-good{ background:var(--good-bg); border-color:var(--good-line); color:#1E5B3D; }
.mc-feedback.fb-bad{ background:var(--bad-bg); border-color:var(--bad-line); color:#7E2B26; }
.mc-feedback .fb-text{ flex:1; }
.mc-feedback [data-mc-retry], .mc-feedback [data-word-reset]{ display:none; flex:none; }

.match-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
@media (max-width:640px){ .match-grid{ grid-template-columns:1fr; } }
.match-col{ display:flex; flex-direction:column; gap:8px; }
.match-btn{ text-align:left; background:var(--paper); border:1.5px solid var(--line-strong); border-radius:var(--radius-s); padding:10px 13px; font-size:.875rem; cursor:pointer; color:var(--ink); }
.match-btn.selected{ border-color:var(--gold-600); background:var(--gold-100); }
.match-btn.paired{ border-color:var(--good); background:var(--good-bg); color:var(--good); cursor:default; }
.match-btn.mismatch{ border-color:var(--bad); background:var(--bad-bg); }

.word-pool{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--space-3); }
.word-chip{ background:var(--paper); border:1.5px solid var(--line-strong); border-radius:999px; padding:8px 15px; font-size:.875rem; font-weight:700; color:var(--emerald-800); cursor:pointer; font-family:var(--font-body); }
.word-chip:disabled{ opacity:.3; cursor:default; }
.word-answer{ min-height:48px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px; background:var(--parchment-dim); border:1.5px dashed var(--line-strong); border-radius:var(--radius-s); margin-bottom:var(--space-3); }
.word-chip.placed{ background:var(--emerald-700); border-color:var(--emerald-700); color:#fff; }

.recorder{ display:flex; align-items:center; gap:14px; background:var(--parchment-dim); border:1px solid var(--line); border-radius:var(--radius-m); padding:14px 16px; flex-wrap:wrap; }
.rec-btn{ display:flex; align-items:center; gap:8px; background:var(--bad); color:#fff; border:none; border-radius:999px; padding:10px 18px; font-weight:700; font-size:.85rem; cursor:pointer; }
.rec-btn .rec-dot{ width:9px; height:9px; border-radius:50%; background:#fff; }
[data-recorder][data-recording-state="on"] .rec-btn .rec-dot{ animation: rec-pulse 1s ease infinite; }
@keyframes rec-pulse{ 50%{ opacity:.25; } }
.rec-timer{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-soft); min-width:36px; }
.rec-wave{ display:flex; align-items:center; gap:2px; height:26px; flex:1; min-width:120px; }
.rec-wave span{ width:3px; background:var(--emerald-500); border-radius:2px; }
.rec-status{ display:none; align-items:center; gap:6px; font-size:.8rem; color:var(--good); font-weight:700; width:100%; }

.player{ display:flex; align-items:center; gap:12px; background:var(--parchment-dim); border:1px solid var(--line); border-radius:var(--radius-m); padding:12px 16px; }
.player-btn{ width:38px; height:38px; border-radius:50%; background:var(--emerald-700); color:#fff; border:none; display:flex; align-items:center; justify-content:center; flex:none; cursor:pointer; }
.player-track{ flex:1; height:5px; background:var(--line-strong); border-radius:999px; position:relative; }
.player-track::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:34%; background:var(--emerald-600); border-radius:999px; }
.video-plate{ position:relative; aspect-ratio:16/9; background:var(--emerald-900); border-radius:var(--radius-m); display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden; }
.video-plate .play-btn{ width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.video-plate .dur{ position:absolute; right:10px; bottom:8px; font-size:.72rem; background:rgba(0,0,0,.45); padding:2px 7px; border-radius:5px; }

/* ============================================================
   LEARNING ROOM
   ============================================================ */
.room-shell{ min-height:100vh; display:flex; flex-direction:column; background:var(--parchment); }
.room-topbar{ height:58px; flex:none; background:var(--emerald-900); color:#EFEAD9; display:flex; align-items:center; gap:var(--space-4); padding-inline:var(--space-5); }
.room-topbar .rt-title{ font-weight:700; font-size:.9rem; }
.room-topbar .rt-sub{ font-size:.75rem; color:#B9C6BD; }
.room-topbar .rt-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.rec-indicator{ display:none; align-items:center; gap:6px; background:rgba(178,59,52,.2); border:1px solid #B23B34; color:#F3B7B2; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:700; }
.room-app[data-recording="on"] .rec-indicator{ display:flex; }
.rec-indicator .dot{ width:7px; height:7px; border-radius:50%; background:#E4544B; animation: rec-pulse 1.1s ease infinite; }

.room-body{ flex:1; display:grid; grid-template-columns: 1fr 300px; gap:1px; background:var(--line); min-height:0; }
.room-app.material-expanded .room-body{ grid-template-columns: 1fr 0px; }
.room-app.material-expanded .room-video-col{ display:none; }
.room-app.in-person .room-video-col{ display:none; }
.room-app.in-person .room-body{ grid-template-columns: 1fr; }

.room-material{ background:var(--parchment); padding:var(--space-5) var(--space-6) var(--space-10); overflow-y:auto; }
.room-video-col{ background:#0F231C; display:flex; flex-direction:column; gap:10px; padding:10px; overflow-y:auto; }
.video-tile{ position:relative; aspect-ratio:4/3; background:#123329; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.video-tile .vt-name{ position:absolute; left:8px; bottom:8px; font-size:.7rem; color:#fff; background:rgba(0,0,0,.4); padding:2px 8px; border-radius:6px; }
.video-tile .vt-mic{ position:absolute; right:8px; bottom:8px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; }
.video-tile .vt-avatar{ width:56px; height:56px; border-radius:50%; background:var(--gold-500); color:var(--emerald-900); font-family:var(--font-display); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }

.room-controls{ flex:none; background:var(--emerald-900); padding:12px 16px; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.ctrl-btn{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#EFEAD9; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ctrl-btn:hover{ background:rgba(255,255,255,.16); }
.ctrl-btn.is-off{ background:#B23B34; border-color:#B23B34; color:#fff; }
.ctrl-btn.end-call{ background:#B23B34; border-color:#B23B34; }
.ctrl-btn.end-call:hover{ background:#961F1F; }
.ctrl-label-btn{ display:flex; align-items:center; gap:7px; height:42px; padding:0 14px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#EFEAD9; cursor:pointer; font-size:.8rem; font-weight:700; }
.ctrl-label-btn.is-active{ background:var(--gold-500); border-color:var(--gold-500); color:var(--emerald-900); }

.room-panel{ display:none; flex-direction:column; background:var(--paper); border-radius:12px; overflow:hidden; max-height:280px; }
.room-panel.is-open{ display:flex; }
.room-panel .rp-head{ padding:9px 12px; font-size:.75rem; font-weight:700; background:var(--parchment-dim); border-bottom:1px solid var(--line); }
.room-panel .rp-body{ padding:10px 12px; overflow-y:auto; font-size:.8rem; }
.chat-msg{ margin-bottom:8px; }
.chat-msg b{ color:var(--emerald-800); }
.room-panel .rp-input{ border-top:1px solid var(--line); padding:8px; display:flex; gap:6px; }
.room-panel .rp-input input{ flex:1; border:1px solid var(--line-strong); border-radius:999px; padding:7px 12px; font-size:.8rem; }

.room-stages{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:var(--space-5); }
.stage-chip{ flex:none; background:var(--paper); border:1.5px solid var(--line-strong); border-radius:999px; padding:8px 15px; font-size:.8rem; font-weight:700; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
.stage-chip.active{ background:var(--emerald-700); border-color:var(--emerald-700); color:#fff; }
.stage-chip .n{ opacity:.7; margin-right:4px; }

.room-app.independent-mode .independent-note{ display:flex !important; }
.teacher-only{ display:none; }
.room-app.role-teacher .teacher-only{ display:block; }
.room-app.role-teacher .student-only-note{ display:none; }
.teacher-note{ background:var(--gold-100); border:1.5px dashed var(--gold-500); border-radius:var(--radius-s); padding:12px 14px; margin-top:var(--space-3); font-size:.82rem; color:var(--gold-700); }
.teacher-note .lbl{ font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.68rem; display:block; margin-bottom:4px; }

.save-pill{ display:inline-flex; }

.reconnect-overlay{ position:absolute; inset:0; background:rgba(10,26,20,.85); color:#fff; display:none; align-items:center; justify-content:center; flex-direction:column; gap:10px; z-index:50; text-align:center; padding:20px; }
.room-app[data-connection="lost"] .reconnect-overlay{ display:flex; }
.room-app{ position:relative; }

.device-toggle-row{ display:flex; gap:8px; }

@media (max-width: 900px){
  .room-body{ grid-template-columns:1fr; }
  .room-video-col{ flex-direction:row; overflow-x:auto; }
  .video-tile{ width:130px; aspect-ratio:4/3; }
  .room-panel{ max-height:none; }
}
.room-mobile-switch{ display:none; }
@media (max-width: 900px){
  .room-mobile-switch{ display:flex; gap:6px; padding:8px 12px; background:var(--paper); border-bottom:1px solid var(--line); }
  .room-mobile-switch button{ flex:1; border:1px solid var(--line-strong); background:var(--paper); border-radius:8px; padding:8px; font-size:.78rem; font-weight:700; color:var(--ink-soft); cursor:pointer; }
  .room-mobile-switch button.active{ background:var(--emerald-100); border-color:var(--emerald-600); color:var(--emerald-800); }
  .room-app:not([data-mobile-view="material"]) .room-material{ display:none; }
  .room-app:not([data-mobile-view="video"]) .room-video-col{ display:none !important; }
  .room-app[data-mobile-view="chat"] .room-material{ display:none; }
  .room-app[data-mobile-view="chat"] [data-panel="chat"]{ display:flex !important; }
  .room-app:not([data-mobile-view="chat"]) [data-panel="chat"].mobile-forced{ display:none !important; }
}

/* ============================================================
   DEVICE CHECK
   ============================================================ */
.device-check{ max-width:620px; margin:0 auto; padding: var(--space-10) var(--space-5); }
.device-preview{ aspect-ratio:16/10; background:var(--emerald-900); border-radius:var(--radius-l); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; margin-bottom:var(--space-5); }
.device-preview .dp-avatar{ width:88px; height:88px; border-radius:50%; background:var(--gold-500); color:var(--emerald-900); font-family:var(--font-display); font-size:2rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.device-check[data-state="checking"] .dc-denied, .device-check[data-state="checking"] .dc-waiting, .device-check[data-state="checking"] .dc-ready{ display:none; }
.device-check[data-state="denied"] .dc-ok{ display:none; }
.device-check[data-state="denied"] .device-preview{ background:var(--bad-bg); }
.device-check:not([data-state="denied"]) .dc-denied{ display:none; }
.device-check[data-state="waiting"] .dc-cta{ display:none; }
.device-check:not([data-state="waiting"]) .dc-waiting{ display:none; }
.device-check[data-state="ready"] .dc-waiting{ display:none; }
.device-check:not([data-state="ready"]) .dc-ready{ display:none; }
.mic-meter{ display:flex; gap:3px; align-items:flex-end; height:18px; }
.mic-meter span{ width:4px; background:var(--good); border-radius:2px; }

/* 03-app.css */
/* ============================================================
   APP SHELL — adapted from the design prototype (03-shell.css)
   without the prototype chrome; container queries → media queries.
   ============================================================ */
html{ -webkit-text-size-adjust:100%; }
body{ min-height:100vh; }
#app{ min-height:100vh; }
img, video{ max-width:100%; }
.ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hide-xs{ }
@media (max-width:520px){ .hide-xs{ display:none !important; } }
@media (max-width:900px){ .hide-sm{ display:none !important; } }
.plain-link{ color:inherit; text-decoration:none; }
.plain-link:hover{ color:var(--emerald-700); }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.85em; background:var(--parchment-dim); padding:1px 5px; border-radius:4px; word-break:break-all; }
.btn.disabled, a.btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.app-shell{ display:flex; min-height:100vh; align-items:stretch; }
.app-rail{ width:var(--rail-w); flex:none; background:var(--emerald-900); color:#E7E2D1; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.app-rail .rail-brand{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.app-rail .rail-brand .lv-word{ color:#fff; font-size:1.05rem; }
.rail-burger{ display:none; background:none; border:0; color:#EFEAD9; cursor:pointer; padding:6px; border-radius:8px; }
.app-rail nav{ padding:14px 10px; flex:1; overflow-y:auto; }
.app-rail .rail-section-label{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8AA093; padding:14px 10px 6px; }
.rail-link{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; color:#D7DFD5; text-decoration:none; font-size:.875rem; font-weight:700; cursor:pointer; border-left:3px solid transparent; margin-bottom:2px; font-family:var(--font-body); text-align:left; }
.rail-link svg{ width:18px; height:18px; flex:none; opacity:.85; }
.rail-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.rail-link.active{ background:rgba(214,182,124,.14); color:#fff; border-left-color:var(--gold-500); }
.rail-link .badge-n, .badge-n{ margin-left:auto; background:var(--gold-500); color:var(--emerald-900); font-size:.68rem; font-weight:700; padding:1px 7px; border-radius:999px; }
.app-rail .rail-foot{ padding:14px; border-top:1px solid rgba(255,255,255,.08); }

.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.app-topbar{ min-height:64px; flex:none; display:flex; align-items:center; gap:var(--space-4); padding-inline:var(--space-6); border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:30; }
.app-topbar .tb-title{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-content{ flex:1; padding: var(--space-6); width:100%; max-width:1280px; }
.app-content.narrow{ max-width:980px; }
.tb-bell{ position:relative; }
.bell-dot{ position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--gold-500); border:2px solid var(--paper); }
.user-menu-wrap{ position:relative; }
.user-menu{ position:absolute; right:0; top:calc(100% + 6px); min-width:220px; padding:6px; z-index:60; display:flex; flex-direction:column; }
.user-menu a, .user-menu button{ display:block; text-align:left; padding:9px 12px; border-radius:8px; background:none; border:0; font:inherit; font-size:.875rem; color:var(--ink); text-decoration:none; cursor:pointer; }
.user-menu a:hover, .user-menu button:hover{ background:var(--emerald-50); }
.test-banner{ background:var(--gold-100); color:var(--gold-700); border-bottom:1px solid var(--gold-300); font-size:.8rem; font-weight:700; padding:7px var(--space-6); }
.verify-banner{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:9px var(--space-6); background:var(--info-bg); color:var(--info); border-bottom:1px solid var(--info-line); font-size:.85rem; }

.lang-switch{ display:flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; flex:none; }
.lang-switch button{ appearance:none; border:0; background:var(--paper); color:var(--ink-soft); font-size:.72rem; font-weight:700; padding:6px 10px; cursor:pointer; }
.lang-switch button.active{ background:var(--emerald-700); color:#fff; }
.lang-switch.on-dark{ border-color:rgba(247,244,235,.3); }
.lang-switch.on-dark button{ background:transparent; color:#DCE6DF; }
.lang-switch.on-dark button.active{ background:var(--gold-500); color:var(--emerald-900); }
.user-chip{ display:flex; align-items:center; gap:9px; cursor:pointer; padding:5px 8px 5px 5px; border-radius:999px; border:1px solid transparent; background:none; }
.user-chip:hover{ background:var(--parchment-dim); }

.mobile-tabbar{ display:none; }
.tab-badge{ position:absolute; top:2px; margin-left:18px; background:var(--gold-500); color:var(--emerald-900); font-size:.6rem; padding:0 5px; border-radius:99px; }

@media (max-width: 900px){
  .app-shell{ flex-direction:column; }
  .app-rail{ width:100%; height:auto; position:sticky; top:0; z-index:40; }
  .app-rail .rail-brand{ border:0; padding:10px 14px; }
  .rail-burger{ display:inline-flex; }
  .app-rail nav, .app-rail .rail-foot{ display:none; }
  .app-rail.is-open{ height:100vh; overflow-y:auto; }
  .app-rail.is-open nav, .app-rail.is-open .rail-foot{ display:block; }
  .app-topbar{ position:static; padding-inline:var(--space-4); min-height:56px; flex-wrap:wrap; gap:var(--space-2); }
  .tb-lang{ display:none; }
  .app-content{ padding: var(--space-4); padding-bottom:84px; }
  .mobile-tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; background:var(--paper); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); gap:2px; z-index:45; }
  .mobile-tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 2px; border-radius:10px; color:var(--ink-faint); text-decoration:none; font-size:.62rem; font-weight:700; position:relative; }
  .mobile-tabbar a svg{ width:19px; height:19px; }
  .mobile-tabbar a.active{ color:var(--emerald-700); }
}

/* ============================================================
   PUBLIC SITE
   ============================================================ */
.pub-header{ position:sticky; top:0; z-index:50; background:rgba(10,42,34,.95); backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,.08); }
.pub-header .container{ min-height:76px; display:flex; align-items:center; gap:var(--space-6); }
.pub-nav{ display:flex; gap:var(--space-6); margin-left:var(--space-4); }
.pub-nav a{ color:#DCE6DF; text-decoration:none; font-size:.9rem; font-weight:700; cursor:pointer; }
.pub-nav a:hover{ color:#fff; }
.pub-header-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.pub-burger{ display:none; background:none; border:0; color:#EFEAD9; cursor:pointer; padding:6px; }
@media (max-width: 980px){
  .pub-burger{ display:inline-flex; }
  .pub-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--emerald-900); flex-direction:column; padding:16px 20px; margin:0; gap:14px; border-bottom:1px solid rgba(255,255,255,.1); }
  .pub-nav.is-open{ display:flex; }
  .pub-header .container{ gap:var(--space-3); min-height:64px; }
  .pub-header-actions{ gap:8px; }
}
@media (max-width: 420px){ .pub-header .lv-word{ display:none; } }
.pub-footer{ background: var(--emerald-900); color:#C9D6CE; padding: var(--space-16) 0 var(--space-8); }
.pub-footer a{ color:#C9D6CE; text-decoration:none; }
.pub-footer a:hover{ color:#fff; }
.pub-footer h4{ color:#fff; margin:0 0 var(--space-3); font-size:.95rem; }
.pub-footer .foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); }
@media (max-width: 760px){ .pub-footer .foot-grid{ grid-template-columns:1fr 1fr; } }
.section-dark{ background: var(--emerald-900); color:#EFEAD9; }
.section-dark .h1, .section-dark .h2, .section-dark .display-1, .section-dark .display-2{ color:#fff; }
.section-dark .lead, .section-dark .body-text{ color:#C9D6CE; }
.section-dark .card{ color:var(--ink); }
.hero-crest{ position:absolute; right:-60px; top:-40px; opacity:.14; pointer-events:none; }
.how-grid{ grid-template-columns:1fr 1fr; align-items:center; gap:var(--space-12); }
@media (max-width:860px){ .how-grid{ grid-template-columns:1fr; gap:var(--space-8); } .hero-crest{ display:none; } }
.mock-chip{ background:#1B3A2F; border-radius:6px; padding:7px 10px; font-size:.78rem; color:#EFEAD9; }
.mock-chip.gold{ background:var(--gold-500); color:var(--emerald-900); font-weight:700; }
.mock-tile{ background:#1B3A2F; border-radius:8px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; color:#EFEAD9; }
.auth-page{ min-height:100vh; background:var(--parchment); }
.auth-top{ display:flex; justify-content:space-between; align-items:center; padding:14px 20px; }
.otp-input{ font-size:1.4rem; letter-spacing:.3em; text-align:center; font-variant-numeric:tabular-nums; }
.secret-code{ font-size:.95rem; letter-spacing:.06em; padding:6px 10px; }
.progress-bar{ height:5px; background:var(--line); border-radius:99px; overflow:hidden; }
.progress-bar > div{ height:100%; background:var(--emerald-600); border-radius:99px; transition:width .3s; }
.progress-bar.thin{ height:4px; margin-top:4px; }

/* ============================================================
   COMMON BLOCKS
   ============================================================ */
.notice{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:var(--radius-m); border:1px solid transparent; font-size:.875rem; }
.notice svg{ flex:none; margin-top:1px; }
.notice-info{ background:var(--info-bg); border-color:var(--info-line); color:#2B536D; }
.notice-good{ background:var(--good-bg); border-color:var(--good-line); color:#1E5B3D; }
.notice-warn{ background:var(--warn-bg); border-color:var(--warn-line); color:#7A4F12; }
.notice-bad{ background:var(--bad-bg); border-color:var(--bad-line); color:#7E2B26; }
.notice a{ color:inherit; font-weight:700; }
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:var(--space-5); }
.list-card{ display:block; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
.list-card:hover{ border-color:var(--gold-300); box-shadow:0 1px 2px rgba(23,38,32,.06), 0 10px 26px -12px rgba(23,38,32,.3); }
.overview-grid{ grid-template-columns:1.6fr 1fr; align-items:start; }
@media (max-width:860px){ .overview-grid{ grid-template-columns:1fr; } }
.todo-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:.875rem; }
.todo-list li{ display:flex; gap:8px; align-items:center; }
.todo-list svg{ color:var(--emerald-600); flex:none; }
.slot-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; }
.booking-row{ display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; }
.booking-when{ min-width:150px; }
.agenda-row{ padding-bottom:10px; border-bottom:1px solid var(--line); }
.avail-row, .ledger-row, .pay-row{ padding:6px 0; border-bottom:1px solid var(--line); }
.feature-row{ padding-bottom:8px; border-bottom:1px dashed var(--line); }
.note-item{ padding:10px 12px; background:var(--gold-100); border:1px dashed var(--gold-300); border-radius:var(--radius-s); }
.bar-chart{ display:flex; align-items:flex-end; gap:12px; height:160px; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; }
.bar{ width:100%; max-width:46px; background:var(--emerald-600); border-radius:6px 6px 0 0; margin-top:auto; min-height:4px; position:relative; }
.bar span{ position:absolute; top:-18px; left:0; right:0; text-align:center; font-size:.72rem; color:var(--ink-soft); font-weight:700; }
.notif{ text-align:left; width:100%; cursor:pointer; font:inherit; color:inherit; }
.notif.unread{ border-left:4px solid var(--gold-500); }
.pill-x{ background:none; border:0; cursor:pointer; margin-left:4px; font-size:1rem; line-height:1; color:inherit; }
.sticky-status{ position:sticky; top:64px; z-index:5; background:var(--parchment); padding:8px 0; margin-bottom:var(--space-4); }
@media (max-width:900px){ .sticky-status{ top:56px; } }
.audit-diff{ max-width:420px; word-break:break-word; font-family:ui-monospace, monospace; font-size:.72rem; }

/* flashcards */
.flashcard-wrap{ max-width:520px; margin:0 auto; text-align:center; }
.flashcard{ width:100%; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; cursor:pointer; border:1px solid var(--line); font:inherit; color:inherit; }

/* messages */
.msg-layout{ display:grid; grid-template-columns:300px 1fr; gap:var(--space-5); height:calc(100vh - 64px - 48px); min-height:480px; }
.msg-list{ overflow-y:auto; padding:6px; }
.msg-item{ display:flex; gap:10px; align-items:center; padding:10px; border-radius:10px; text-decoration:none; color:inherit; }
.msg-item:hover{ background:var(--emerald-50); }
.msg-item.active{ background:var(--emerald-100); }
.msg-conv{ display:flex; flex-direction:column; overflow:hidden; }
.msg-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); }
.msg-back{ display:none; }
.msg-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; background:var(--parchment); }
.msg{ max-width:75%; padding:9px 12px; border-radius:14px; font-size:.9rem; line-height:1.45; }
.msg.mine{ align-self:flex-end; background:var(--emerald-700); color:#fff; border-bottom-right-radius:4px; }
.msg.theirs{ align-self:flex-start; background:var(--paper); border:1px solid var(--line); border-bottom-left-radius:4px; }
.msg-text{ white-space:pre-wrap; word-break:break-word; }
.msg-time{ font-size:.66rem; opacity:.7; margin-top:3px; text-align:right; }
.msg-day{ align-self:center; font-size:.72rem; color:var(--ink-faint); padding:4px 10px; }
.msg-img{ max-width:240px; border-radius:8px; display:block; margin-top:4px; }
.msg-file{ display:inline-flex; gap:4px; align-items:center; color:inherit; font-size:.82rem; margin-top:4px; }
.msg-input{ display:flex; gap:8px; align-items:flex-end; padding:10px; border-top:1px solid var(--line); flex-wrap:wrap; }
.msg-input textarea{ min-height:42px; resize:none; }
@media (max-width:900px){
  .msg-layout{ grid-template-columns:1fr; height:auto; }
  .msg-layout.has-conv .msg-list{ display:none; }
  .msg-layout:not(.has-conv) .msg-conv, .msg-layout:not(.has-conv) .msg-empty{ display:none; }
  .msg-back{ display:inline-flex; }
  .msg-conv{ height:calc(100vh - 56px - 60px - 90px); min-height:420px; }
}

/* editor */
.editor-layout{ display:grid; grid-template-columns:1fr 280px; gap:var(--space-5); align-items:start; }
.editor-side{ position:sticky; top:80px; }
@media (max-width:1000px){ .editor-layout{ grid-template-columns:1fr; } .editor-side{ position:static; } }
.block-card{ border-left:3px solid var(--line-strong); }
.opt-edit{ display:grid; grid-template-columns:auto 1fr 1fr auto; gap:8px; align-items:center; }
@media (max-width:700px){ .opt-edit{ grid-template-columns:auto 1fr auto; } .opt-edit > :nth-child(3){ grid-column:2 / 3; } }
.type-menu{ display:flex; flex-wrap:wrap; gap:8px; }
.type-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1.5px solid var(--line-strong); background:var(--paper); border-radius:999px; font:inherit; font-size:.8rem; font-weight:700; color:var(--emerald-800); cursor:pointer; }
.type-btn:hover{ border-color:var(--emerald-600); background:var(--emerald-50); }
.insert-after{ margin-top:10px; padding-top:8px; border-top:1px dashed var(--line); }
.note-edit{ margin-top:10px; }
.note-edit summary{ cursor:pointer; color:var(--gold-700); font-weight:700; }
.note-edit textarea{ margin-top:6px; background:var(--gold-100); }
.rte-bar{ display:flex; gap:4px; margin-bottom:6px; }
.rte-bar button{ border:1px solid var(--line-strong); background:var(--paper); border-radius:6px; padding:4px 10px; cursor:pointer; font:inherit; font-size:.8rem; }
.rte-body{ min-height:110px; line-height:1.6; }
.rich p{ margin:0 0 .6em; }
.rich ul, .rich ol{ margin:0 0 .6em; padding-left:1.3em; }

/* exercises */
.ex-block{ scroll-margin-top:90px; }
.section-title{ padding-bottom:6px; border-bottom:2px solid var(--gold-300); }
.gap-text{ line-height:2.3; }
.gap-input{ display:inline-block; width:auto; padding:5px 9px; margin:0 3px; font-size:.95rem; }
.gap-input.ok{ border-color:var(--good); background:var(--good-bg); }
.gap-input.bad{ border-color:var(--bad); background:var(--bad-bg); }
.match-btn:disabled{ cursor:default; }
.match-btn.linked{ border-color:var(--emerald-600); background:var(--emerald-50); }
.match-btn.used{ opacity:.55; }
.match-link{ display:block; font-size:.78rem; color:var(--ink-soft); margin-top:3px; }
.rec-dot.pulsing{ animation: rec-pulse 1s ease infinite; }
.block-img{ border-radius:var(--radius-m); border:1px solid var(--line); max-height:420px; object-fit:contain; background:#fff; }
.block-video{ width:100%; max-width:640px; border-radius:var(--radius-m); background:#000; }
.doc-link{ display:inline-flex; align-items:center; text-decoration:none; color:inherit; }
.teacher-comment{ background:var(--info-bg); border:1px solid var(--info-line); border-radius:var(--radius-s); padding:10px 12px; margin-top:10px; font-size:.85rem; color:#2B536D; white-space:pre-wrap; }
.teacher-comment .lbl, .answer-box .lbl{ display:block; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.66rem; margin-bottom:4px; }
.teacher-view{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); padding:14px 16px; }
.teacher-view.is-focus{ border-color:var(--gold-500); box-shadow:0 0 0 3px var(--gold-100); }
.answer-box{ background:var(--emerald-50); border:1px solid var(--emerald-100); border-radius:var(--radius-s); padding:10px 12px; margin-top:8px; font-size:.88rem; }
.key-list{ margin:0 0 6px; padding-left:18px; }
.key-list .is-key{ color:var(--good); font-weight:700; }
.review-grid{ grid-template-columns:1fr 140px; gap:8px; }
@media (max-width:600px){ .review-grid{ grid-template-columns:1fr; } }
.teacher-note{ display:block; }
.stripe-mount{ min-height:120px; }

/* room (overrides for the live product) */
.room-page{ min-height:100vh; background:var(--parchment); }
.room-shell{ height:100vh; height:100dvh; min-height:0; }
.room-body{ min-height:0; overflow:hidden; }
.room-material{ position:relative; }
.room-video-col .vt-video{ position:absolute; inset:0; width:100%; height:100%; border-radius:12px; background:#0F231C; }
.video-tile{ overflow:hidden; }
.video-tile.small-tile{ aspect-ratio:16/9; }
.vt-name{ z-index:2; } .vt-mic{ z-index:2; }
.ctrl-btn.light{ background:var(--emerald-100); color:var(--emerald-800); border-color:var(--emerald-100); }
.ctrl-btn.light.is-off{ background:#B23B34; color:#fff; border-color:#B23B34; }
.pb-btn{ appearance:none; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:#EFEAD9; border-radius:8px; padding:7px 11px; font-size:.78rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); }
.pb-btn:hover{ background:rgba(255,255,255,.1); }
.pb-btn.is-active{ background:var(--gold-500); border-color:var(--gold-500); color:var(--emerald-900); }
.pb-btn.light{ color:var(--ink); border-color:var(--line-strong); background:var(--paper); }
.pb-btn.light.is-active{ background:var(--gold-100); border-color:var(--gold-500); }
.online-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#4ADE80; margin-left:4px; vertical-align:middle; }
.dp-video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.dp-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,26,20,.4); }
.room-toast{ position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:var(--bad); color:#fff; padding:10px 16px; border-radius:10px; z-index:80; }
.stage-chip:disabled{ opacity:.55; cursor:default; }
@media (max-width: 900px){
  .room-body{ grid-template-columns:1fr; }
  .room-video-col{ flex-direction:column; overflow-y:auto; }
  .video-tile{ width:100%; aspect-ratio:16/10; }
  .room-panel{ max-height:none; }
  .room-mobile-switch{ display:flex; gap:6px; padding:8px 12px; background:var(--paper); border-bottom:1px solid var(--line); }
  .room-mobile-switch button{ flex:1; border:1px solid var(--line-strong); background:var(--paper); border-radius:8px; padding:8px; font-size:.78rem; font-weight:700; color:var(--ink-soft); cursor:pointer; }
  .room-mobile-switch button.active{ background:var(--emerald-100); border-color:var(--emerald-600); color:var(--emerald-800); }
  .room-app:not([data-mobile-view="material"]) .room-material{ display:none; }
  .room-app[data-mobile-view="material"] .room-video-col{ display:none !important; }
  .room-app[data-mobile-view="chat"] .video-tile{ display:none; }
  .room-app.in-person .room-video-col{ display:flex !important; }
  .room-controls{ padding:8px; gap:6px; }
  .ctrl-label-btn{ padding:0 10px; font-size:.72rem; }
  .room-topbar{ padding-inline:var(--space-3); }
}
@media (min-width: 901px){ .room-mobile-switch{ display:none; } }
.room-app.in-person .room-body{ grid-template-columns: 1fr 300px; }
.room-app.in-person .room-video-col{ display:flex; }
@media (max-width:900px){ .room-app.in-person .room-body{ grid-template-columns:1fr; } }

@media print{ .app-rail, .app-topbar, .mobile-tabbar{ display:none !important; } }