/* ==========================================================================
   Matrix – design system
   Colour rules (Tutorial 4 – Vision):
   • DESATURATED base (backgrounds, panels, menus, headers) = less eye strain, professional
   • SATURATED colour only where something must stand out (main buttons, red flags, alerts)
   • No pure blue for text / thin lines / small shapes; blue-grey only as large backgrounds
   • Never colour alone: every status also has an icon and a word
   Heuristics (Tutorial 3): consistent components (H3), visible status (H5), undo (H1), minimal (H8)
   ========================================================================== */
:root {
  --bg: #F3F6F8; --surface: #FFFFFF; --ink: #1E2A35; --ink-2: #455564; --muted: #5C6977; --line: #DCE3E9; --line-2: #EBF0F3;
  --brand: #3E6E8E; --brand-ink: #2B5470; --brand-50: #EBF2F6; --brand-100: #D8E5EE;
  --side: #2B3A46; --side-ink: #E7EDF1; --side-hover: rgba(255,255,255,.09); --side-active: rgba(255,255,255,.16);
  --action: #C2410C; --action-hover: #9A3412;
  --good: #2D7A4D; --good-bg: #E3F1E8; --good-line: #A8D3B8; --good-fill: #3E9A63;
  --warn: #8F5600; --warn-bg: #FCF0D6; --warn-line: #E8C77E; --warn-fill: #C98A0B;
  --bad: #B3261E; --bad-bg: #FBE7E5; --bad-line: #EDB1AC; --bad-fill: #C9483F;
  --calc: #85470A; --calc-bg: #FDEBD3; --calc-line: #E9B678;
  --concept: #583B96; --concept-bg: #ECE6F8; --concept-line: #BBA8E6;
  --lang: #0E655E; --lang-bg: #DDF1EE; --lang-line: #8CCFC5;
  --radius: 14px; --shadow: 0 1px 2px rgba(30,42,53,.06), 0 4px 14px rgba(30,42,53,.05);
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --hand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg); }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; color: var(--ink); }
h1 { font-size: 1.7rem; font-weight: 800; } h2 { font-size: 1.2rem; font-weight: 800; } h3 { font-size: 1.05rem; font-weight: 700; } h4 { font-size: .95rem; font-weight: 700; }
p { margin: 0 0 .7em; } a { color: var(--brand-ink); text-underline-offset: 2px; } a:hover { color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .85em; background: var(--brand-50); padding: 1px 6px; border-radius: 6px; word-break: break-all; }
kbd { font-family: inherit; font-size: .78rem; border: 1px solid var(--line); border-bottom-width: 2px; background: #fff; border-radius: 5px; padding: 0 5px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .center { text-align: center; } .lead { font-size: 1.1rem; color: var(--ink-2); }
.good { color: var(--good); } .mid { color: var(--warn); } .low, .bad { color: var(--bad); } .warn { color: var(--warn); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ---------- layout shell: top bar + hamburger side panel (same for every role) ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.menu-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; flex: none; }
.menu-btn:hover { background: var(--line-2); }
.menu-dot { position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--action); border: 2px solid #fff; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 1.05rem; }
.brand-name { font-weight: 800; font-size: 1.2rem; }
.brand-lg .brand-mark { width: 48px; height: 48px; font-size: 1.5rem; } .brand-lg .brand-name { font-size: 1.8rem; }
.topbar-crumbs { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 600; padding-left: 10px; } .topbar-crumbs a { font-weight: 600; } .topbar-crumbs strong { color: var(--ink); }
.topbar-actions { display: flex; gap: 8px; margin-left: auto; flex: none; }
.drawer-back { position: fixed; inset: 0; background: rgba(30,42,53,.45); z-index: 40; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); background: #fff; z-index: 50; display: flex; flex-direction: column; transform: translateX(-102%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; box-shadow: 8px 0 30px rgba(0,0,0,.18); }
.drawer.is-open { transform: none; visibility: visible; transition: transform .2s ease; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); } .drawer-head .brand-name { font-size: 1.1rem; }
.nav { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.nav-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 700; min-height: 48px; }
.nav-item:hover { background: var(--line-2); color: var(--ink); } .nav-item.is-active { background: var(--brand-50); color: var(--brand-ink); box-shadow: inset 4px 0 0 var(--brand); }
.nav-badge { background: var(--action); color: #fff; border-radius: 99px; font-size: .75rem; font-weight: 800; padding: 1px 8px; min-width: 24px; text-align: center; }
.drawer-foot { margin-top: auto; padding: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.who strong { display: block; } .who span:not(.avatar) { font-size: .82rem; color: var(--muted); }
.main { padding: 20px 24px 48px; width: 100%; max-width: 1240px; margin: 0 auto; outline: 0; display: flex; flex-direction: column; gap: 16px; }
.main > * { margin-top: 0 !important; margin-bottom: 0 !important; }
body.no-scroll { overflow: hidden; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0; flex-wrap: wrap; } .page-head h1 { margin-bottom: 2px; } .page-head p { margin: 0; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; align-items: stretch; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.grid-main-side { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 14px; } .stack-lg { display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0; } .grid-2 > .card, .grid-2 > .stack-lg > .card, .grid-cards > .card, .det-grid > .card { margin-bottom: 0; }
.pad { padding: 20px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .card-head h2 { margin: 0; }
.sticky { position: sticky; top: 84px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 18px; border-radius: 11px; border: 2px solid transparent; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s, transform .06s; line-height: 1.2; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-action { background: var(--action); color: #fff; } .btn-primary:hover, .btn-action:hover { background: var(--action-hover); color: #fff; }
.btn-soft { background: var(--brand-50); color: var(--brand-ink); border-color: var(--brand-100); } .btn-soft:hover { background: var(--brand-100); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--line-2); color: var(--ink); }
.btn-danger { background: var(--bad); color: #fff; } .btn-danger:hover { background: #8E1D17; color: #fff; }
.btn-danger-ghost { background: transparent; color: var(--bad); border-color: var(--bad-line); } .btn-danger-ghost:hover { background: var(--bad-bg); color: var(--bad); }
.btn-sm { min-height: 36px; padding: 5px 12px; font-size: .88rem; border-radius: 9px; } .btn-lg { min-height: 52px; padding: 12px 24px; font-size: 1.05rem; } .btn-xl { min-height: 62px; padding: 14px 30px; font-size: 1.2rem; border-radius: 16px; }
.btn-block { width: 100%; } .btn-disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; } .btn[disabled]:hover { background: inherit; }
.table .btn-primary { background: var(--brand); } .table .btn-primary:hover { background: var(--brand-ink); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--brand-ink); text-decoration: underline; cursor: pointer; font: inherit; }
.icon-btn { min-width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit; font-weight: 700; color: var(--ink); text-decoration: none; position: relative; }
.icon-btn:hover { background: var(--line-2); } .bell-dot { position: absolute; top: 6px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--action); border: 2px solid #fff; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; border: 0; padding: 0; min-width: 0; } .field.inline { margin: 0; }
label, legend { font-weight: 700; font-size: .92rem; } legend { padding: 0; margin-bottom: 6px; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; color: var(--ink); background: #fff; border: 2px solid #C5D0D9; border-radius: 10px; }
textarea { resize: vertical; line-height: 1.5; } input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { border-color: var(--ink); outline: 0; box-shadow: 0 0 0 3px rgba(30,42,53,.15); }
[aria-invalid=true] { border-color: var(--bad) !important; background: var(--bad-bg); }
.hint { color: var(--muted); } .form-err { color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-line); border-radius: 10px; padding: 9px 12px; font-weight: 600; margin: 0 0 12px; }
.pw-wrap { position: relative; } .pw-wrap input { padding-right: 48px; } .pw-toggle { position: absolute; right: 4px; top: 4px; height: 36px; width: 40px; border: 0; background: none; cursor: pointer; font-size: 1rem; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 600; margin: 6px 0; } .check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.check small { font-weight: 400; } .check-big { font-size: 1.05rem; padding: 12px 14px; background: var(--brand-50); border-radius: 12px; margin: 14px 0; }
.filters { display: flex; gap: 16px; flex-wrap: wrap; margin: 0; align-items: flex-end; } .filters .field input, .filters .field select { min-width: 190px; }
.chips-row { gap: 8px; }
.radio-chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip-radio input { position: absolute; opacity: 0; } .chip-radio span { display: inline-block; padding: 8px 14px; border-radius: 99px; border: 2px solid var(--line); background: #fff; font-weight: 700; cursor: pointer; }
.chip-radio input:checked + span { background: var(--brand-50); border-color: var(--brand); } .chip-radio input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.radio-stack { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.radio-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff; }
.radio-card:has(input:checked) { border-color: var(--brand); background: var(--brand-50); } .radio-card input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--brand); }
.radio-card small { display: block; color: var(--muted); font-weight: 400; } .radio-card.big { padding: 18px; font-size: 1.15rem; }
.chip-btn { border: 2px solid var(--line); background: #fff; color: var(--ink); border-radius: 99px; padding: 6px 14px; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; min-height: 38px; }
.chip-btn.is-on { background: var(--ink); color: #fff; border-color: var(--ink); } .chip-btn:hover:not(.is-on) { background: var(--line-2); }
.avatar-pick { display: flex; flex-wrap: wrap; gap: 8px; } .avatar-opt input { position: absolute; opacity: 0; } .avatar-opt span { display: grid; place-items: center; width: 56px; height: 56px; font-size: 1.8rem; border: 3px solid var(--line); border-radius: 16px; cursor: pointer; background: #fff; }
.avatar-opt input:checked + span { border-color: var(--brand); background: var(--brand-50); } .avatar-opt input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.add-row { display: flex; gap: 8px; margin-top: 12px; } .add-row select { flex: 1; }

/* ---------- small components ---------- */
.avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-100); color: var(--brand-ink); font-weight: 800; font-size: .85rem; flex: none; }
.avatar.lg { width: 56px; height: 56px; font-size: 1.6rem; } .avatar.xl { width: 76px; height: 76px; font-size: 2.2rem; }
.sidebar .avatar { background: rgba(255,255,255,.18); color: #fff; }
.who-link, .who { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .sidebar .who { color: inherit; } .who-link small { display: block; color: var(--muted); font-weight: 400; } .who-link:hover strong { text-decoration: underline; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: .8rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.badge-good { background: var(--good-bg); color: var(--good); border-color: var(--good-line); } .badge-wait, .badge-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.badge-bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); } .badge-neutral { background: var(--line-2); color: var(--ink-2); border-color: var(--line); }
.code-pill { display: inline-block; background: var(--brand-50); color: var(--brand-ink); border: 1px solid var(--brand-100); border-radius: 99px; padding: 2px 12px; font-weight: 800; letter-spacing: .5px; font-size: .9rem; }
.link-code { white-space: nowrap; }
.bar { height: 10px; border-radius: 99px; background: #E3EAF0; overflow: hidden; min-width: 60px; flex: 1 1 auto; } .bar-xl { height: 22px; margin: 20px 0 10px; }
.bar-fill { display: block; height: 100%; border-radius: 99px; transition: width .35s ease; } .bar-fill.good { background: var(--good-fill); } .bar-fill.mid { background: var(--warn-fill); } .bar-fill.low { background: var(--bad-fill); }
.prog-cell { display: flex; flex-direction: column; gap: 4px; min-width: 110px; } .progress-line { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; } .progress-line > span { white-space: nowrap; font-size: .9rem; }
.cause-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; font-size: .82rem; font-weight: 800; border: 2px solid; white-space: nowrap; }
.c-calc { background: var(--calc-bg); color: var(--calc); border-color: var(--calc-line); } .c-concept { background: var(--concept-bg); color: var(--concept); border-color: var(--concept-line); } .c-lang { background: var(--lang-bg); color: var(--lang); border-color: var(--lang-line); }
.c-none { background: var(--line-2); color: var(--ink-2); border-color: var(--line); }
.cause-chip.is-ai { border-style: dashed; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 6px, transparent 6px 12px); }
.chip-state { color: var(--good); }
.state-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 6px; font-size: .78rem; font-weight: 800; }
.state-tag.is-ai { background: #fff; color: var(--ink-2); border: 2px dashed #9AA8B4; } .state-tag.is-confirmed { background: var(--good-bg); color: var(--good); border: 2px solid var(--good-line); } .state-tag.is-rejected { background: var(--line-2); color: var(--ink-2); border: 2px solid var(--line); }
.conf-meter { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--ink-2); } .conf-bars { display: inline-flex; gap: 3px; align-items: flex-end; } .conf-bars i { width: 7px; background: #CBD5DD; border-radius: 2px; } .conf-bars i:nth-child(1) { height: 8px; } .conf-bars i:nth-child(2) { height: 13px; } .conf-bars i:nth-child(3) { height: 18px; } .conf-bars i.on { background: var(--ink-2); }
.lang-tag { display: inline-block; font-size: .7rem; font-weight: 800; border-radius: 5px; padding: 1px 6px; border: 1px solid; vertical-align: 1px; } .lang-en { background: #EEF0F2; color: #3C4A57; border-color: #CBD3DA; } .lang-de { background: #FBF0D9; color: #7A4F00; border-color: #E5C98A; }
.empty { text-align: center; padding: 28px 16px; } .empty-icon, .big-ico { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; } .empty p { color: var(--muted); max-width: 46ch; margin: 0 auto 14px; }
.note { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.ok-box, .ok-banner { background: var(--good-bg); border: 1px solid var(--good-line); color: var(--good); border-radius: 10px; padding: 10px 14px; font-weight: 700; margin: 10px 0; }
.info-banner { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; font-weight: 600; }
.warn-box { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-weight: 600; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.warn-text, .gate-warn { color: var(--bad); font-weight: 700; margin: 4px 0; }
.plain-list { list-style: none; margin: 0; padding: 0; } .plain-list > li { padding: 9px 0; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .plain-list > li:last-child { border: 0; }
.plain-list.bullets { list-style: disc; padding-left: 20px; } .plain-list.bullets > li { display: list-item; border: 0; padding: 4px 0; } .plain-list.big li { font-size: 1.15rem; justify-content: flex-start; }
.insight-box { background: var(--lang-bg); border: 1px solid var(--lang-line); color: #0A4A45; border-radius: 10px; padding: 10px 14px; font-weight: 600; margin-top: 12px; }

/* ---------- tables, stats, tabs ---------- */
.table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table th { text-align: left; font-size: .75rem; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); white-space: nowrap; } .table th.num { text-align: right; }
.table td { padding: 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; } .table tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: #F8FAFB; }
.table-tight td { padding: 9px 10px; } .table .actions { text-align: right; white-space: nowrap; } .table .actions .btn + .btn { margin-left: 6px; } .is-over { background: #FFFAEC; } .is-current-row { background: var(--brand-50); font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; } .stats-sm { margin: 12px 0 16px; } .stats-inline { display: flex; gap: 14px; margin: 0; margin-left: auto; flex-wrap: wrap; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; } .stats-sm .stat, .stats-inline .stat { background: var(--bg); box-shadow: none; }
.stat-label { color: var(--muted); font-size: .85rem; font-weight: 700; } .stat-val { font-size: 2rem; font-weight: 800; line-height: 1.15; } .stat-sub { color: var(--muted); font-size: .82rem; }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 0; overflow-x: auto; }
.tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 16px; font: inherit; font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap; min-height: 44px; } .tab:hover { color: var(--ink); background: var(--line-2); }
.tab.is-on { color: var(--ink); border-bottom-color: var(--action); } .tab-n { display: inline-block; background: var(--line); border-radius: 99px; padding: 0 8px; font-size: .78rem; margin-left: 4px; }
.tabs-sm, .cmp-tabs { margin: 6px 0 14px; } .tab-sm { padding: 6px 12px; min-height: 38px; font-size: .9rem; }
.insight { margin-bottom: 14px; } .insight-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .quick-btn { display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--brand-100); text-decoration: none; font-weight: 700; color: var(--ink); min-height: 60px; } .quick-btn:hover { background: var(--brand-100); } .quick-btn span { font-size: 1.5rem; }
.class-top { display: flex; gap: 14px; align-items: center; } .class-ico { font-size: 2rem; width: 56px; height: 56px; display: grid; place-items: center; background: var(--brand-50); border-radius: 14px; } .class-top h2 { margin: 0 0 2px; } .class-top p { margin: 0; }
.class-stats { display: flex; gap: 24px; margin: 16px 0 6px; } .class-stats div { display: flex; flex-direction: column; } .class-stats strong { font-size: 1.15rem; } .class-stats span { color: var(--muted); font-size: .8rem; }
.profile { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .profile-main { flex: 1; min-width: 200px; } .profile-main h1, .profile-main h2 { margin-bottom: 2px; }
.dummy-box { border: 2px dashed #9AAAB7; background: #FAFBFC; }
.topic-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr auto; gap: 12px; align-items: center; padding: 6px 0; } .topic-row strong { min-width: 90px; text-align: right; font-size: .9rem; }
.cmp { margin-bottom: 14px; } .cmp-row { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr 70px; gap: 12px; align-items: center; padding: 5px 0; } .cmp-val { text-align: right; font-weight: 800; }
.spark, .line-chart { display: block; } .spark { width: 90px; height: 28px; } .line-chart { width: 100%; height: auto; max-height: 240px; }
.chart-line { fill: none; stroke: var(--ink-2); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .chart-dot { fill: #fff; stroke: var(--ink-2); stroke-width: 2.5; } .chart-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.chart-axis { font-size: 10px; fill: var(--muted); font-family: var(--font); } .chart-val { font-size: 11px; font-weight: 700; fill: var(--ink); font-family: var(--font); }
.notif-list { list-style: none; margin: 0; padding: 0; } .notif button { width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px 20px; border: 0; border-bottom: 1px solid var(--line-2); background: none; font: inherit; cursor: pointer; color: var(--ink); } .notif button:hover { background: #F8FAFB; }
.notif.is-new button { background: #FFF8EC; } .notif-ico { font-size: 1.5rem; } .notif-main { flex: 1; display: flex; flex-direction: column; } .notif-main span { color: var(--ink-2); } .notif-time { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--action); margin-left: 6px; }

/* ---------- toasts & modals ---------- */
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 40px)); }
.toast { display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: pop .2s ease; font-weight: 600; }
.toast-success { background: #1F5A38; } .toast-error { background: #8E1D17; } .toast-btn { margin-left: auto; background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 800; cursor: pointer; }
.modal-back { position: fixed; inset: 0; background: rgba(30,42,53,.55); display: grid; place-items: center; padding: 16px; z-index: 200; }
.modal { background: #fff; border-radius: 18px; width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: pop .18s ease; } .modal-wide { width: min(760px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 8px; } .modal-head h2 { margin: 0; } .modal-body { padding: 8px 22px 12px; overflow: auto; } .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 20px; flex-wrap: wrap; }
.confirm-text { font-size: 1.02rem; } .help-list { list-style: none; padding: 0; margin: 0; } .help-list li { padding: 10px 0; border-bottom: 1px solid var(--line-2); } .help-list strong, .help-list span { display: block; } .help-list span { color: var(--ink-2); }
.tour h3 { font-size: 1.4rem; } .tour p { font-size: 1.05rem; color: var(--ink-2); } .tour-step { color: var(--muted); font-weight: 700; font-size: .85rem; margin-bottom: 4px; }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .shake { animation: shake .3s; }

/* ---------- auth / invitation / inbox ---------- */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-hero { background: linear-gradient(160deg, #35566D, #2B3A46); color: #fff; padding: 56px 56px; display: flex; flex-direction: column; justify-content: center; gap: 14px; } .auth-hero h1 { color: #fff; font-size: 2.4rem; margin-top: 18px; } .auth-hero p { font-size: 1.1rem; opacity: .92; max-width: 44ch; } .auth-hero .brand { padding: 0; }
.hero-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 12px; font-size: 1.05rem; } .hero-list span { display: inline-block; width: 36px; }
.auth-card { padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; max-width: 560px; width: 100%; margin: 0 auto; }
.seg { display: flex; gap: 6px; background: var(--line-2); padding: 5px; border-radius: 14px; margin: 8px 0 20px; } .seg-btn { flex: 1; text-align: center; border: 0; background: transparent; padding: 10px 8px; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; color: var(--ink-2); text-decoration: none; min-height: 44px; } .seg-btn.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.demo-box { margin: 20px 0 14px; border: 2px dashed #B3C0CB; border-radius: 14px; padding: 14px 16px; background: #FAFBFC; } .demo-btns { display: flex; flex-wrap: wrap; gap: 8px; } .demo-box p { margin: 2px 0 10px; }
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .invite-card { max-width: 620px; width: 100%; margin: 0; text-align: left; } .invite-card .big-ico { text-align: center; } .invite-action { margin-top: 18px; }
.invite-box { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 14px 0; flex-wrap: wrap; } .invite-box > div { flex: 1; min-width: 160px; } .invite-box strong, .invite-box span:not(.avatar):not(.code-pill) { display: block; } .invite-box div span { color: var(--muted); font-size: .9rem; }
.inbox-page { max-width: 760px; margin: 0 auto; padding: 28px 16px 60px; } .inbox-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; } .inbox-head h1 { margin-bottom: 2px; }
.mail { background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 18px; box-shadow: var(--shadow); } .mail > header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); } .mail > header > div { flex: 1; } .mail > header span:not(.avatar):not(.badge) { display: block; color: var(--muted); font-size: .85rem; } .mail-body { padding: 20px 24px 24px; }

/* ---------- teacher: exam review ---------- */
.exam-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .exam-head-main { flex: 1; min-width: 220px; } .exam-head h1 { margin: 0; font-size: 1.4rem; } .exam-head p { margin: 0; }
.stepper { margin-bottom: 14px; overflow-x: auto; } .stepper ol { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; min-width: 640px; } .stepper li { flex: 1; } .stepper button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font: inherit; font-weight: 700; color: var(--ink-2); cursor: pointer; min-height: 52px; text-align: left; }
.stepper button:disabled { opacity: .55; cursor: not-allowed; } .step-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); font-size: .85rem; flex: none; }
.stepper .is-current button { border-color: var(--ink); color: var(--ink); background: #fff; box-shadow: var(--shadow); } .stepper .is-current .step-dot { background: var(--ink); color: #fff; } .stepper .is-done .step-dot { background: var(--good-bg); color: var(--good); }
.review-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; } .kbd-hint { margin-left: auto; }
.step-body { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.step-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; bottom: 0; background: rgba(243,246,248,.96); padding: 12px 0; border-top: 1px solid var(--line); } .step-foot-mid { flex: 1; min-width: 160px; }
.grid-ocr { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; } .grid-ocr > .card { margin: 0; } .grid-ocr > .card:first-child { position: sticky; top: 84px; }
.zoom { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.paper-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #E8ECEF; padding: 12px; }
.paper { --z: 1.15; background: #FFFEF8; background-image: repeating-linear-gradient(transparent 0, transparent 31px, #E2E8EE 31px, #E2E8EE 32px); padding: 18px 20px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.15); transform-origin: top left; font-size: calc(.92rem * var(--z)); color: #333; }
.paper-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-bottom: 2px solid #3B4651; padding-bottom: 8px; margin-bottom: 14px; font-weight: 700; }
.hand, .hand-sm, .hand-lg { font-family: var(--hand); color: #1F2F55; font-weight: 700; } .hand { font-size: calc(1.45rem * var(--z, 1)); } .hand-sm { font-size: 1.25rem; } .hand-lg { font-size: 2rem; display: block; line-height: 1.1; }
.paper-q { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; margin: 4px 0; border-radius: 6px; border: 2px solid transparent; flex-wrap: wrap; } .paper-q.hl { background: #FFF2C2; border-color: #E5B93A; } .pq-no { font-weight: 800; } .pq-text { flex: 1; min-width: 160px; }
.paper-foot { text-align: center; color: #5F6B76; font-size: .75rem; margin-top: 14px; }
.ocr-item { border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: #fff; } .ocr-item.is-low { border-color: var(--warn-line); background: #FFFCF3; } .ocr-item.is-verified { border-color: var(--good-line); background: #F6FBF8; }
.ocr-item header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .ocr-conf { margin-left: auto; font-weight: 800; font-size: .85rem; } .ocr-row { display: flex; gap: 12px; align-items: flex-end; } .ocr-row .field { flex: 1; margin: 0; }
.score-in { width: 74px !important; min-height: 40px !important; text-align: center; font-weight: 800; }
.total-line { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-2); } .total-line.big { font-size: 1.1rem; border: 0; padding-top: 14px; } .total-line.big strong { font-size: 1.3rem; }
.det-top h3 { margin-top: 16px; } .det-summary { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .det-summary p { margin: 0; max-width: 62ch; }
.legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; } .legend-t { font-size: .8rem; color: var(--muted); margin-right: 8px; }
.gap-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .gap-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #FAFBFC; display: flex; flex-direction: column; gap: 2px; font-size: .9rem; } .recur { color: var(--calc); font-weight: 700; }
.det-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; } .det-list { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto; padding: 3px; }
.mistake { text-align: left; font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; } .mistake:hover { border-color: #A9B6C1; } .mistake.is-sel { border-color: var(--ink); box-shadow: var(--shadow); }
.m-top, .m-bottom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .m-ans { font-size: .9rem; } .m-confirmed, .m-changed { background: #F6FBF8; }
.detail-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; } .detail-head h3 { margin-bottom: 4px; } .q-text { font-size: 1.05rem; margin: 0; } .ans-pair { display: flex; gap: 26px; } .ans-pair > div { display: flex; flex-direction: column; } .correct { font-size: 1.5rem; color: var(--good); }
.ai-says { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; margin: 8px 0 10px; } .ai-says > div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .why { background: #F6F8FA; border-radius: 10px; padding: 10px 14px; }
.ev-block { margin: 12px 0; } .ev-block h4 { margin-bottom: 4px; } .ev-list { margin: 0; padding-left: 20px; } .ev-list li { margin: 3px 0; }
.reword { background: var(--lang-bg); border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
.decision { margin-top: 18px; padding: 16px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--brand-100); } .decision.is-done { background: #F6FBF8; border-color: var(--good-line); } .decision h4 { margin-bottom: 6px; } .decision .btn-row { margin-top: 10px; }
.radio-card span { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.flag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; } .flag-grid > .card { margin: 0; } .flag-card header { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .flag-card h3 { margin: 0 0 4px; } .flag-ico { font-size: 1.8rem; } .f-confirmed { border-color: var(--bad-line); background: #FFFAFA; } .f-dismissed { background: #FAFBFC; }
.check-list { list-style: none; padding: 0; margin: 12px 0 0; } .check-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); align-items: center; } .check-list small { display: block; color: var(--muted); } .chk { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none; } .check-list .ok .chk { background: var(--good-bg); color: var(--good); } .check-list .todo .chk { background: var(--bad-bg); color: var(--bad); }
.pr-item { flex-wrap: wrap; } .vocab { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .vocab span { background: var(--lang-bg); border: 1px solid var(--lang-line); border-radius: 8px; padding: 4px 10px; }
.kid-card { background: #FFF8E6; border: 2px solid #F0D58C; border-radius: 18px; padding: 16px 18px; } .kid-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 6px; } .kid-practice { margin-top: 10px; padding: 8px 12px; background: #fff; border-radius: 10px; font-weight: 700; }
.released-box { text-align: center; } .released-box .btn-row { justify-content: center; } .history { padding-left: 20px; } .history li { margin: 6px 0; }

/* ---------- student (friendly theme) ---------- */
.theme-student { font-size: 18px; --bg: #F7F5EF; --radius: 20px; }
.theme-student .main { max-width: 980px; gap: 18px; }
.theme-student .card { border-width: 2px; border-radius: 20px; } .theme-student h1 { font-size: 2rem; } .theme-student h2 { font-size: 1.3rem; }
.theme-student .btn { min-height: 52px; border-radius: 14px; } .theme-student .btn-sm { min-height: 44px; }
.theme-student .topbar { min-height: 64px; }
.hello { margin: 0; } .hello h1 { margin-bottom: 4px; }
.hero-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: #FFF4E2; border-color: #F0D4A0; } .hero-action h2 { margin-bottom: 4px; } .hero-action p { margin: 0; }
.status-card { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .status-card > div:nth-child(2) { flex: 1; min-width: 220px; } .status-card h2 { margin: 6px 0 2px; } .status-card p { margin: 0; color: var(--ink-2); } .status-card .big-ico { font-size: 3rem; margin: 0; }
.status-card.is-wait { background: #FFF9E8; border-color: var(--warn-line); } .status-card.is-ready { background: #EFF8F2; border-color: var(--good-line); }
.status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 99px; font-weight: 800; font-size: .9rem; border: 2px solid; } .status-chip.wait { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); } .status-chip.good { background: var(--good-bg); color: var(--good); border-color: var(--good-line); } .status-chip.big { font-size: 1.05rem; padding: 7px 18px; }
.narrow { max-width: 680px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 16px; } .big-card h1 { margin-bottom: 8px; } .center-card { text-align: center; padding: 36px 24px; } .center-card .btn-row { justify-content: center; }
.wiz { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 18px; justify-content: center; } .wiz li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; background: #fff; border: 2px solid var(--line); font-weight: 700; color: var(--muted); } .wiz li span { width: 30px; height: 30px; border-radius: 50%; background: var(--line-2); display: grid; place-items: center; }
.wiz .is-cur { border-color: var(--ink); color: var(--ink); } .wiz .is-cur span { background: var(--ink); color: #fff; } .wiz .is-done span { background: var(--good-bg); color: var(--good); }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 34px 18px; border: 3px dashed #8FA3B3; border-radius: 22px; background: #F8FAFC; cursor: pointer; margin: 14px 0; } .dropzone:hover, .dropzone:focus-within { background: var(--brand-50); border-color: var(--ink); } .dropzone small { color: var(--muted); }
.page-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; } .page-thumb { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 14px; } .page-thumb img, .sample-pg { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: #FFFEF8; border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.6rem; } .pg-name { flex: 1; display: flex; flex-direction: column; min-width: 0; } .pg-name small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spin { animation: bob 1.2s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.tracker { list-style: none; margin: 22px 0; padding: 0; position: relative; } .tracker li { display: flex; gap: 16px; align-items: flex-start; padding: 10px 0; position: relative; } .tracker li:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 52px; bottom: -8px; width: 3px; background: var(--line); }
.trk-dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; background: var(--line-2); flex: none; font-weight: 800; } .tracker .done .trk-dot { background: var(--good-bg); color: var(--good); } .tracker .now .trk-dot { background: var(--warn-bg); border: 3px solid var(--warn-fill); } .tracker small { display: block; color: var(--muted); } .tracker .todo { opacity: .7; }
.wait-card h1 { margin: 12px 0 6px; } .locked-box { background: var(--line-2); border-radius: 14px; padding: 12px 16px; margin: 6px 0 4px; }
.result-hero { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; } .ring-wrap { width: 150px; flex: none; } .ring { width: 150px; height: 150px; } .ring-bg { fill: none; stroke: #E3EAF0; stroke-width: 12; } .ring-fg { fill: none; stroke: var(--good-fill); stroke-width: 12; stroke-linecap: round; } .ring-text { font-size: 38px; font-weight: 800; fill: var(--ink); font-family: var(--font); }
.result-main { flex: 1; min-width: 240px; } .result-main h1 { margin: 8px 0 4px; }
.stars { display: inline-flex; gap: 2px; } .star { font-size: 1.5rem; color: #D6DDE3; } .star.on { color: #E3A008; text-shadow: 0 0 0 #B97C00; } .star-row { margin: 4px 0; } .star-row .star { font-size: 2.1rem; }
.feedback-card { background: #FFFDF6; } .fb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .fb-head span.muted { display: block; font-size: .85rem; } .fb-text p { font-size: 1.05rem; margin: 0 0 .8em; } .fb-comment { background: #fff; border: 2px dashed var(--warn-line); border-radius: 14px; padding: 10px 14px; font-weight: 600; }
.chip-good { background: var(--good-bg); color: var(--good); border: 2px solid var(--good-line); padding: 6px 14px; border-radius: 99px; font-weight: 800; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .area-card { border: 2px solid; border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; margin-bottom: 8px; } .area-grid .area-card { margin: 0; } .area-card span { font-size: .92rem; opacity: .9; }
.help-banner { display: flex; gap: 14px; align-items: center; background: #FFF4DA; border: 2px solid var(--warn-line); border-radius: 18px; padding: 14px 18px; margin-bottom: 20px; } .help-banner p { margin: 2px 0 0; } .help-banner .big-ico { margin: 0; font-size: 2.2rem; } .help-banner.small { padding: 8px 14px; margin: 8px 0 0; }
.q-list { list-style: none; padding: 0; margin: 0; } .q-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line-2); } .q-row:last-child { border: 0; } .q-ico { font-size: 1.4rem; } .q-main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; } .q-main small { color: var(--muted); } .q-ans { margin-top: 4px; } .q-pts { font-weight: 800; }
.pr-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-2); width: 100%; } .plain-list > .pr-row:last-child { border: 0; } .ex-ico { font-size: 2rem; width: 52px; height: 52px; display: grid; place-items: center; background: var(--brand-50); border-radius: 14px; flex: none; } .ex-main { flex: 1; display: flex; flex-direction: column; } .ex-main small { color: var(--muted); }
.practice-mini { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; } .practice-mini div { display: flex; flex-direction: column; }
.msg-list { list-style: none; padding: 0; margin: 0; } .msg-list li { border-bottom: 1px solid var(--line-2); } .msg-list li:last-child { border: 0; } .msg-list a { display: flex; flex-direction: column; padding: 10px 0; text-decoration: none; color: var(--ink); } .msg-list span { color: var(--ink-2); }
.card-stack { display: flex; flex-direction: column; gap: 12px; } .sec-title { margin: 0; }
.exam-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: #fff; border: 2px solid var(--line); border-radius: 20px; text-decoration: none; color: var(--ink); flex-wrap: wrap; } a.exam-card:hover { border-color: var(--ink); } .exam-card .ex-main { flex: 1; min-width: 180px; } .exam-card.is-wait { background: #FFFBEE; } .exam-card.is-ready { background: #F2FAF5; } .old-score { font-size: 1.2rem; }
.prog-dots { display: flex; gap: 8px; margin-bottom: 14px; } .prog-dots span { flex: 1; height: 12px; border-radius: 99px; background: #E3EAF0; } .prog-dots .done { background: var(--good-fill); } .prog-dots .cur { background: var(--warn-fill); }
.q-big { font-size: 1.9rem; margin: 10px 0 18px; } .opt-stack { display: flex; flex-direction: column; gap: 12px; } .opt { min-height: 64px; font: inherit; font-size: 1.3rem; font-weight: 800; border-radius: 18px; border: 3px solid var(--line); background: #fff; cursor: pointer; color: var(--ink); padding: 12px 18px; text-align: left; } .opt:hover:not([disabled]) { border-color: var(--ink); } .opt.is-right { background: var(--good-bg); border-color: var(--good-fill); } .opt.is-wrong { background: var(--bad-bg); border-color: var(--bad-fill); } .opt[disabled] { cursor: default; }
.fb-good { color: var(--good); font-size: 1.3rem; font-weight: 800; margin: 14px 0 0; } .fb-try { color: var(--warn); font-size: 1.2rem; font-weight: 800; margin: 14px 0 0; } .hint-box { background: var(--warn-bg); border-radius: 14px; padding: 10px 14px; font-weight: 600; margin-top: 10px; }
.garden { list-style: none; padding: 0; margin: 0; } .garden-item { display: flex; align-items: center; gap: 14px; padding: 8px 0; } .g-ico { font-size: 1.9rem; } .g-main { flex: 1; display: flex; flex-direction: column; gap: 4px; } .g-word { font-weight: 800; font-size: .9rem; min-width: 88px; text-align: right; }
.badge-row { display: flex; flex-wrap: wrap; gap: 12px; } .medal { display: inline-flex; align-items: center; gap: 8px; background: #FFF4DA; border: 2px solid var(--warn-line); padding: 8px 16px; border-radius: 99px; font-weight: 800; } .medal span { font-size: 1.4rem; }
.exam-rows { list-style: none; padding: 0; margin: 0; } .exam-rows li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); } .exam-rows li > span:first-child { flex: 1; display: flex; flex-direction: column; } .exam-rows small { color: var(--muted); }
.join-form .input-xl { font-size: 1.4rem; min-height: 60px; text-transform: uppercase; letter-spacing: 1px; } .join-form .btn { margin-top: 4px; }

/* ---------- parent ---------- */
.theme-parent { --bg: #F5F7F4; }
.master-detail { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; } .master-detail > .card { margin: 0; } .list-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; margin: 8px 0; font: inherit; color: var(--ink); cursor: pointer; } .list-item span:first-child { display: flex; flex-direction: column; } .list-item small { color: var(--muted); } .list-item.is-sel { border-color: var(--ink); background: var(--brand-50); }
.pill { font-weight: 800; padding: 3px 12px; border-radius: 99px; background: var(--line-2); } .pill.good { background: var(--good-bg); } .pill.mid { background: var(--warn-bg); } .pill.low { background: var(--bad-bg); }
.detail-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .detail-top h2 { margin: 2px 0 0; } .big-score strong { font-size: 2.8rem; line-height: 1; } .big-score span { color: var(--muted); font-size: 1.2rem; } .big-num { font-size: 2.4rem; }
.box { background: var(--bg); border-radius: 14px; padding: 14px 18px; margin: 14px 0; } .result-line { display: flex; gap: 22px; align-items: flex-start; margin: 10px 0 14px; flex-wrap: wrap; } .result-line .fb-text { flex: 1; min-width: 260px; } .result-line .fb-text p { font-size: 1rem; }
.tip-list { list-style: none; padding: 0; margin: 0; } .tip-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); } .tip-list li:last-child { border: 0; } .tip-list span { font-size: 1.3rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, 1fr); } .det-grid, .grid-main-side { grid-template-columns: 1fr; } .det-list, .sticky { position: static; max-height: none; } .viewer-panels.mode-both { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; } .auth-hero { padding: 28px 22px; } .auth-hero h1 { font-size: 1.8rem; } .auth-card { padding: 26px 20px; }
  .main { padding: 18px 14px 56px; } .topbar { padding: 0 12px; } .brand-name { display: none; } .topbar-crumbs { display: none; }
  .grid-2, .master-detail { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .kbd-hint { display: none; } .profile .stats-inline { margin-left: 0; }
  .step-foot { position: static; } .table { font-size: .88rem; } .wiz li { font-size: .85rem; padding-right: 10px; } .result-hero { justify-content: center; text-align: center; }
  .topic-row { grid-template-columns: 1fr; gap: 4px; } .topic-row strong { text-align: left; } .cmp-row { grid-template-columns: 1fr; gap: 2px; } .cmp-val { text-align: left; } .ocr-row { flex-direction: column; align-items: stretch; } .ocr-grid { grid-template-columns: 1fr; } .pipeline ol { min-width: 760px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print { .topbar, .drawer, .step-foot, #toasts { display: none !important; } }

/* ---------- new in this version ---------- */
.seg-sm { margin: 0; padding: 3px; } .seg-sm .seg-btn { min-height: 36px; padding: 5px 12px; font-size: .88rem; }
.modal-xl { width: min(1180px, 100%); max-height: calc(100vh - 24px); }
.link-cell { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; } .link-cell code { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.link-line { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; } .parent-col { min-width: 260px; } .table-links td { white-space: normal; vertical-align: top; } .table-links td.actions { white-space: nowrap; }
.btn-stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.inline-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .inline-form .field { margin: 0; flex: 1; min-width: 220px; }
.status-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pipe-dots { display: inline-flex; gap: 4px; } .pipe-dots i { width: 14px; height: 6px; border-radius: 3px; background: #D3DCE3; } .pipe-dots i.done { background: var(--good-fill); } .pipe-dots i.cur { background: var(--warn-fill); }
/* review pipeline */
.pipeline { margin: 0; overflow-x: auto; } .pipeline ol { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; min-width: 680px; }
.pipeline li { flex: 1; position: relative; } .pipeline li:not(:last-child)::after { content: ''; position: absolute; top: 31px; left: calc(50% + 24px); right: calc(-50% + 24px); height: 3px; background: var(--line); border-radius: 2px; } .pipeline li.is-done:not(:last-child)::after { background: var(--good-fill); }
.pipeline button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 0; background: none; font: inherit; color: var(--ink-2); cursor: pointer; border-radius: 12px; text-align: center; } .pipeline button:hover:not(:disabled) { background: var(--line-2); } .pipeline button:disabled { cursor: not-allowed; opacity: .6; }
.pipeline .step-dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--line); font-weight: 800; position: relative; z-index: 1; }
.pipeline .is-done .step-dot { background: var(--good-bg); border-color: var(--good-fill); color: var(--good); } .pipeline .is-current .step-dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.step-txt { display: flex; flex-direction: column; } .step-name { font-weight: 800; color: var(--ink); font-size: .95rem; } .step-sub { font-size: .8rem; color: var(--muted); } .pipeline .is-current .step-name { text-decoration: underline; text-underline-offset: 4px; }
/* page viewer: scan next to the AI's reading */
.viewer-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .viewer-bar .zoom { margin-left: auto; }
.viewer-panels { display: grid; gap: 16px; } .viewer-panels.mode-both { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vpanel h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
.vpanel .paper-wrap { max-height: 440px; }
.aipage { background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.15); padding: 16px 18px; min-height: 100%; } .aipage-head { display: flex; flex-direction: column; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 10px; }
.ai-q { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 8px 8px; border: 2px solid transparent; border-bottom-color: var(--line-2); border-radius: 8px; } .ai-q.hl { background: #FFF2C2; border-color: #E5B93A; } .ai-q.is-low { background: #FFFCF3; } .ai-q.is-verified { background: #F6FBF8; }
.ai-no { font-weight: 800; } .ai-text { color: var(--ink-2); font-size: .92rem; } .ai-read { font-family: ui-monospace, Consolas, monospace; font-weight: 700; background: var(--brand-50); border-radius: 6px; padding: 1px 8px; justify-self: end; }
.ai-meta { grid-column: 2 / 4; display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; font-weight: 700; } .ai-conf.good { color: var(--good); } .ai-conf.mid { color: var(--warn); } .ai-conf.low { color: var(--bad); } .ai-low { color: var(--bad); } .ai-ok { color: var(--good); } .ai-score { margin-left: auto; color: var(--ink-2); }
.ocr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ocr-grid .ocr-item { margin: 0; }
.note-in { width: 100%; margin-top: 8px; min-height: 38px !important; font-size: .9rem; border-style: dashed !important; } .note-field { margin-top: 14px; margin-bottom: 0; }
@media (max-width: 760px) { .ocr-grid { grid-template-columns: 1fr; } }

.auth-hero .brand { color: #fff; }
.auth-hero .brand-mark { background: rgba(255,255,255,.18); }

.prog-cell .bar { flex: none; width: 100%; } .seg-btn { white-space: nowrap; }


/* ======================= v3: landing, sign-in, chat, charts ======================= */
/* landing */
.land { background: #fff; }
.land-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px; padding: 12px max(20px, calc((100vw - 1180px) / 2)); background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); }
.land-links { display: flex; gap: 18px; margin-left: 12px; } .land-links .linkbtn { color: var(--ink-2); text-decoration: none; font-weight: 700; padding: 8px 4px; } .land-links .linkbtn:hover { color: var(--ink); text-decoration: underline; }
.land-cta { margin-left: auto; display: flex; gap: 10px; }
.land-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 56px 20px; }
.eyebrow { font-weight: 800; color: var(--brand-ink); text-transform: uppercase; letter-spacing: .6px; font-size: .78rem; margin-bottom: 10px; }
.land-hero h1 { font-size: 3rem; line-height: 1.1; letter-spacing: -.5px; margin-bottom: 14px; } .land-hero h1 em { font-style: normal; color: var(--action); } .land-hero .lead { max-width: 52ch; margin-bottom: 20px; }
.mock { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px rgba(30,42,53,.14); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mock-head { display: flex; justify-content: space-between; align-items: center; } .mock-q { margin: 0; font-size: 1.02rem; }
.mock-ans { display: flex; gap: 32px; } .mock-ans > div { display: flex; flex-direction: column; } .mock .why { margin: 0; } .mock-btns { display: flex; gap: 8px; flex-wrap: wrap; } .mock .ai-says { margin: 0; }
.land-sec { max-width: 1180px; margin: 0 auto; padding: 48px 20px; } .land-sec.alt { max-width: none; background: var(--bg); padding-left: max(20px, calc((100vw - 1180px) / 2)); padding-right: max(20px, calc((100vw - 1180px) / 2)); }
.land-sec h2 { font-size: 1.8rem; margin-bottom: 16px; } .land-sec-head { max-width: 720px; margin-bottom: 20px; } .land-sec-head h2 { margin-bottom: 8px; }
.land-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; margin: 0; } .land-steps li { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: #fff; } .land-steps h3 { margin-bottom: 4px; } .land-steps p { margin: 0; color: var(--ink-2); }
.land-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; margin-bottom: 10px; }
.land-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .land-cards h3 { margin: 10px 0 4px; } .land-cards p { margin: 0; }
.tick-list { list-style: none; padding: 0; margin: 8px 0 0; } .tick-list li { padding: 6px 0 6px 26px; position: relative; } .tick-list li::before { content: '✔'; position: absolute; left: 0; color: var(--good); font-weight: 800; }
.land-sec.cta { text-align: center; max-width: none; background: var(--ink); color: #fff; } .land-sec.cta h2, .land-sec.cta .lead { color: #fff; } .land-sec.cta .lead { max-width: 56ch; margin: 0 auto 20px; } .land-sec.cta .btn-row { justify-content: center; margin-top: 0; } .land-sec.cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); } .land-sec.cta .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.land-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px max(20px, calc((100vw - 1180px) / 2)); color: var(--muted); font-size: .88rem; border-top: 1px solid var(--line); }
/* sign in */
.login-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.auth-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; }
.login-main { flex: 1; display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 300px); gap: 16px; justify-content: center; align-items: start; padding: 8px 20px 48px; } .login-main.single { grid-template-columns: minmax(0, 520px); }
.login-card { padding: 28px; } .login-card h1 { margin-bottom: 4px; } .login-card form { margin-top: 4px; } .login-card .invite-action { margin-top: 12px; }
.role-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 20px; }
.role-tab { border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 8px; text-align: center; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 2px; min-height: 60px; justify-content: center; } .role-tab span { font-size: .74rem; color: var(--muted); } .role-tab:hover { background: var(--line-2); } .role-tab.is-on { border-color: var(--ink); background: var(--brand-50); }
.login-demo h2 { font-size: 1.05rem; } .login-demo .stack { margin: 12px 0; }
/* chat */
.chat-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.inbox { padding: 12px; } .inbox h2 { padding: 4px 8px 8px; font-size: 1rem; margin: 0; }
.inbox-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; text-decoration: none; color: var(--ink); } .inbox-item:hover { background: var(--line-2); } .inbox-item.is-sel { background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand); }
.inbox-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .inbox-main small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-card { display: flex; flex-direction: column; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .chat-head > div { flex: 1; display: flex; flex-direction: column; }
.chat-thread { height: min(50vh, 440px); overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: #FAFBFC; } .chat-thread.is-empty { align-items: center; justify-content: center; }
.chat-day { align-self: center; font-size: .75rem; color: var(--muted); font-weight: 700; margin: 4px 0; }
.bubble-row { display: flex; } .bubble-row.is-me { justify-content: flex-end; } .bubble { max-width: min(520px, 82%); padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); } .is-me .bubble { background: var(--brand-50); border-color: var(--brand-100); }
.bubble-who { display: block; font-size: .74rem; font-weight: 800; color: var(--muted); margin-bottom: 2px; } .bubble-time { display: block; font-size: .7rem; color: var(--muted); text-align: right; margin-top: 4px; }
.composer { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .composer .form-err { margin: 0; } .composer-row { display: flex; gap: 10px; align-items: flex-end; } .composer-row textarea { flex: 1; } .composer-foot { display: flex; justify-content: space-between; }
/* charts */
.chart-scroll { overflow-x: auto; } .trend { width: 100%; min-width: 520px; height: auto; display: block; }
.chart-grid { stroke: var(--line); stroke-width: 1; } .chart-goal { stroke: var(--good); stroke-width: 1.5; stroke-dasharray: 6 5; } .chart-goal-t { font-size: 11px; fill: var(--good); font-weight: 700; font-family: var(--font); }
.chart-area { fill: rgba(62,110,142,.10); stroke: none; } .chart-line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart-hit { fill: transparent; cursor: pointer; } .chart-dot { stroke: #fff; stroke-width: 3; transition: r .12s; } .chart-dot.good { fill: var(--good-fill); } .chart-dot.mid { fill: var(--warn-fill); } .chart-dot.low { fill: var(--bad-fill); }
.chart-pt:hover .chart-dot, .chart-pt:focus .chart-dot { r: 10; } .chart-pt:focus { outline: none; } .chart-pt:focus-visible .chart-dot { stroke: var(--ink); }
.chart-val { font-size: 12px; font-weight: 800; fill: var(--ink); font-family: var(--font); } .chart-axis { font-size: 11px; fill: var(--muted); font-family: var(--font); } .chart-x { font-size: 11.5px; fill: var(--ink-2); font-family: var(--font); font-weight: 700; } .chart-x-date { fill: var(--muted); font-weight: 600; font-size: 10.5px; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; margin: 8px 0 0; align-items: center; } .lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; } .lg-dot.good { background: var(--good-fill); } .lg-dot.mid { background: var(--warn-fill); } .lg-dot.low { background: var(--bad-fill); }
[data-tip] { cursor: help; } .topic-row[data-tip]:hover, .cmp-row[data-tip]:hover, .garden-item[data-tip]:hover { background: var(--line-2); border-radius: 8px; } .topic-row, .cmp-row { padding-left: 6px; padding-right: 6px; } .topic-row .bar, .cmp-row .bar { height: 12px; }
.tooltip { position: fixed; z-index: 400; display: none; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 10px; font-size: .82rem; line-height: 1.4; max-width: 270px; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.28); } .tooltip strong { display: block; margin-bottom: 2px; } .tooltip span { display: block; color: #DCE6EE; }
/* parent extras */
.pages-details { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: #fff; } .pages-details summary { cursor: pointer; font-weight: 800; padding: 12px 0; } .pages-details[open] summary { border-bottom: 1px solid var(--line-2); margin-bottom: 12px; } .pages-details .viewer-panels { padding-bottom: 14px; }
.box-note { background: #FFF8E6; border: 1px solid var(--warn-line); } .tip-ico { width: 26px; text-align: center; flex: none; font-weight: 800; color: var(--brand-ink); }
.detail-col > * + *, .list-col > h2 + * { margin-top: 12px; } .detail-col h3 { margin-top: 18px; margin-bottom: 0; } .detail-col .box h3 { margin-top: 0; }
@media (max-width: 900px) { .land-hero { grid-template-columns: 1fr; padding: 32px 20px; gap: 28px; } .land-hero h1 { font-size: 2.2rem; } .land-steps, .land-cards { grid-template-columns: 1fr 1fr; } .land-links { display: none; } .login-main { grid-template-columns: minmax(0, 1fr); } .chat-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .land-steps, .land-cards { grid-template-columns: 1fr; } .land-cta .btn-ghost { display: none; } .role-tab span { display: none; } }

.chart-scroll .trend { max-width: 800px; margin: 0 auto; }

.g-main .bar { flex: none; width: 100%; } .pad > .btn { margin-top: 14px; }

/* ======================= front page: hero + sign in / create account ======================= */
.auth2 { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth2-art { background: linear-gradient(160deg, #35566D, #26343F); color: #fff; padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.auth2-art .brand { color: #fff; } .auth2-art .brand-mark { background: rgba(255,255,255,.18); }
.auth2-art h1 { color: #fff; font-size: 2.7rem; line-height: 1.12; letter-spacing: -.4px; margin: 20px 0 0; }
.auth2-art p { font-size: 1.1rem; max-width: 44ch; opacity: .92; margin: 0; }
.auth2-points { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 1.05rem; }
.auth2-points li::before { content: '✔'; margin-right: 12px; color: #A8D3B8; font-weight: 800; }
.auth2-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px 20px; background: var(--bg); }
.auth2-card { width: 100%; max-width: 460px; padding: 28px; margin: 0; } .auth2-card h1, .auth2-card h2 { font-size: 1.6rem; margin: 4px 0 4px; } .auth2-card > .muted { margin-bottom: 16px; }
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--line-2); border-radius: 12px; margin-bottom: 14px; }
.auth-switch button { border: 0; background: transparent; padding: 10px; border-radius: 9px; font: inherit; font-weight: 800; color: var(--ink-2); cursor: pointer; min-height: 44px; } .auth-switch button.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.auth2-card .role-tabs { margin: 0 0 16px; } .auth2-card .role-tab { min-height: 46px; }
.auth2-card .field { margin-bottom: 12px; }
.field-msg { min-height: 0; font-size: .82rem; font-weight: 700; } .field-msg.is-bad { color: var(--bad); } .field-msg.is-ok { color: var(--good); }
.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: .8rem; color: var(--muted); font-weight: 700; } .pw-meter i { flex: 1; height: 6px; border-radius: 3px; background: #E3EAF0; position: relative; overflow: hidden; } .pw-meter i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--c, #C9483F); transition: width .2s; } .pw-meter span { min-width: 120px; }
.forgot { margin: -4px 0 12px; text-align: right; }
.demo-line { text-align: center; color: var(--muted); font-size: .9rem; margin: 0; line-height: 1.8; }
@media (max-width: 900px) { .auth2 { grid-template-columns: 1fr; } .auth2-art { padding: 28px 22px; gap: 10px; } .auth2-art h1 { font-size: 1.9rem; margin-top: 10px; } .auth2-points { display: none; } .auth2-main { padding: 20px 14px 32px; } }

.pw-wrap input { padding-right: 70px; } .pw-toggle { width: auto; padding: 0 12px; right: 4px; font: inherit; font-size: .85rem; font-weight: 800; color: var(--brand-ink); cursor: pointer; }

/* ---- translation, word helper, sorting, alerts ---- */
.q-trans { background: var(--lang-bg); border: 1px solid var(--lang-line); border-radius: 10px; padding: 8px 12px; margin: 8px 0 0; font-weight: 600; color: #0A4A45; }
details.q-trans { display: block; margin-top: 6px; padding: 6px 12px; } details.q-trans summary { cursor: pointer; font-weight: 800; font-size: .9rem; } details.q-trans p { margin: 6px 0 0; }
.ai-trans { grid-column: 2 / 4; font-size: .82rem; color: #0A4A45; background: var(--lang-bg); border-radius: 6px; padding: 2px 8px; }
.sort-box { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } .sort-box label { font-weight: 800; font-size: .88rem; } .sort-box select { min-height: 38px; width: auto; padding: 4px 10px; }
.tip-box { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 12px; padding: 10px 14px; margin: 0 0 8px; }
.focus-card { background: #FFF8E6; border-color: var(--warn-line); } .focus-card h2 { font-size: 1.5rem; margin-bottom: 4px; } .focus-card .lead { margin: 0; color: var(--ink); }
.word-helper .vocab { margin: 8px 0; } .alert-card { border-color: var(--bad-line); background: #FFFAFA; }

.avatar.lg { font-size: 1.15rem; } .avatar.xl { font-size: 1.6rem; }

/* ======================= review workspace (teacher) =======================
   One calm card per step. Colour roles: orange = continue / release, green = confirm,
   soft = secondary, ghost = back / reset. */
.btn-confirm { background: var(--good); color: #fff; } .btn-confirm:hover { background: #236340; color: #fff; }
.btn.is-done { color: var(--good); border-color: var(--good-line); background: #fff; }
.rv-head { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 12px 16px; }
.rv-who { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 260px; } .rv-who strong { display: block; } .rv-who span:not(.avatar) { display: block; color: var(--muted); font-size: .86rem; } .rv-who .avatar.lg { width: 44px; height: 44px; font-size: 1rem; }
.rv-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-tools { display: inline-flex; gap: 2px; padding: 3px; background: var(--line-2); border-radius: 10px; } .rv-tools .btn { border-color: transparent; min-height: 34px; } .rv-tools .btn:hover:not([disabled]) { background: #fff; }
.pipeline { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; }
.rv-step { padding: 0; overflow: hidden; }
.rv-step-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 0; flex-wrap: wrap; } .rv-step-head h2 { margin: 0; font-size: 1.25rem; } .rv-step-head p { margin: 2px 0 0; }
.rv-body { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.rv-actions { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); background: #FAFBFC; flex-wrap: wrap; } .rv-msg { flex: 1; min-width: 140px; text-align: center; }
/* smart check */
.smart-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font-weight: 800; font-size: .85rem; border: 1px solid; white-space: nowrap; }
.smart-chip.smart-ok { background: var(--good-bg); color: var(--good); border-color: var(--good-line); } .smart-chip.smart-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); } .smart-chip.smart-info { background: var(--line-2); color: var(--ink-2); border-color: var(--line); }
.smart-bar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: #FAFBFC; }
.smart-bar.is-warn { background: #FFFAEC; border-color: var(--warn-line); } .smart-bar.is-ok { background: #F3FAF6; border-color: var(--good-line); }
.smart-list { flex: 1; min-width: 220px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: .92rem; }
.smart-list li { display: flex; gap: 8px; align-items: baseline; } .smart-list .smart-ico { width: 16px; flex: none; font-weight: 800; } .smart-list .smart-warn { color: #6B4200; } .smart-list .smart-ok { color: var(--good); }
.smart-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* filters and toolbars */
.rv-chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip-n { display: inline-block; min-width: 20px; text-align: center; background: rgba(30,42,53,.09); border-radius: 99px; padding: 0 6px; font-size: .75rem; margin-left: 4px; } .chip-btn.is-on .chip-n { background: rgba(255,255,255,.25); }
.rv-toolbar { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
/* step 1 */
.rv-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; } .rv-viewer { position: sticky; top: 76px; } .rv-viewer .paper-wrap { max-height: 540px; }
.rv-answers { display: flex; flex-direction: column; gap: 10px; } .rv-rows { display: flex; flex-direction: column; gap: 8px; }
.rv-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 52px auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.rv-row.is-low { border-color: var(--warn-line); background: #FFFCF3; } .rv-row.is-verified { background: #F6FBF8; border-color: var(--good-line); } .rv-row.hl { box-shadow: 0 0 0 2px #E5B93A; }
.rv-q { font-weight: 800; display: flex; align-items: center; gap: 6px; } .rv-conf { font-weight: 800; font-size: .85rem; text-align: right; white-space: nowrap; }
.answer-in { min-height: 38px !important; }
.rv-sub { grid-column: 2 / -1; display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--muted); } .rv-note { grid-column: 2 / -1; }
.viewer-bar { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .viewer-tools { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
/* step 2 */
.rv-split-2 { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: start; } .rv-split-2:has(> .rv-panel) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-table .is-attn { background: #FFFAEC; } .rv-table td { vertical-align: middle; }
.rv-total { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 76px; }
.rv-total-n { font-size: 2.6rem; line-height: 1; font-weight: 800; } .rv-total-n small { font-size: 1rem; color: var(--muted); font-weight: 700; } .rv-total-pct { font-weight: 800; color: var(--ink-2); }
.rv-total dl { display: grid; grid-template-columns: auto auto; gap: 4px 12px; margin: 6px 0 0; font-size: .9rem; } .rv-total dt { color: var(--muted); } .rv-total dd { margin: 0; text-align: right; font-weight: 700; }
/* step 3 */
.rv-master { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.rv-list { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow: auto; padding: 2px; }
.rv-item { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit; color: var(--ink); cursor: pointer; } .rv-item:hover { border-color: #A9B6C1; } .rv-item.is-sel { border-color: var(--ink); box-shadow: var(--shadow); } .rv-item.m-confirmed, .rv-item.m-changed { background: #F6FBF8; } .rv-item.m-rejected { background: #FAFBFC; }
.rv-item-top, .rv-item-bot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rv-state { margin-left: auto; font-size: .76rem; font-weight: 800; color: var(--muted); }
.rv-detail { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rv-sub-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; } .rv-sub-tabs .tab { margin-bottom: -1px; }
.ev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .ev-block h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 4px; } .ev-block { margin: 0; }
.rv-decide { margin: 4px -16px -16px; padding: 14px 16px; border-top: 1px solid var(--line); background: #FAFBFC; border-radius: 0 0 14px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; } .rv-decide.is-done { background: #F6FBF8; } .rv-decide .radio-stack { width: 100%; margin: 0; } .rv-decide-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-gaps { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: #FAFBFC; } .rv-gaps summary { cursor: pointer; font-weight: 800; padding: 10px 0; } .rv-gaps[open] summary { border-bottom: 1px solid var(--line-2); margin-bottom: 10px; } .rv-gaps .gap-row { padding-bottom: 12px; }
/* step 4 */
.rv-flags { display: flex; flex-direction: column; gap: 12px; }
.rv-flag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff; } .rv-flag.f-confirmed { border-color: var(--bad-line); background: #FFFAFA; } .rv-flag.f-dismissed { background: #FAFBFC; }
.rv-flag p { margin: 6px 0; } .rv-flag-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .rv-flag-top h3 { margin: 0; }
.rv-flag-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 170px; }
.rv-ev { margin: 6px 0; } .rv-ev summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
/* step 5 */
.rv-fb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; } .rv-fb-edit, .rv-fb-side { display: flex; flex-direction: column; gap: 12px; }
.rv-panel { border: 1px solid var(--line); border-radius: 14px; padding: 16px; } .rv-panel h3 { margin-bottom: 8px; }
.check-chips { display: flex; flex-wrap: wrap; gap: 6px; } .check-chip { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; border: 1px solid; } .check-chip.ok { background: var(--good-bg); color: var(--good); border-color: var(--good-line); } .check-chip.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.rv-fb-tabs .seg { width: 100%; } .rv-fb-tabs .seg-btn { flex: 1; }
.rv-ready-t { display: flex; flex-direction: column; flex: 1; }
.rv-body.released-box { text-align: left; } .released-box .btn-row { justify-content: flex-start; margin-top: 0; }
@media (max-width: 1100px) { .rv-split, .rv-split-2, .rv-split-2:has(> .rv-panel), .rv-master, .rv-fb, .ev-grid { grid-template-columns: 1fr; } .rv-viewer, .rv-total, .rv-list { position: static; max-height: none; } .rv-flag { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .rv-row { grid-template-columns: 56px minmax(0, 1fr); } .rv-conf { text-align: left; } .rv-row .btn { grid-column: 2; justify-self: start; } .rv-head-right { width: 100%; } .rv-body, .rv-step-head, .rv-actions { padding-left: 14px; padding-right: 14px; } }

.rv-panel > .btn { margin-top: 14px; } .rv-panel > .gate-warn { margin-top: 8px; }

.remember-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 14px; flex-wrap: wrap; } .remember-row .check { margin: 0; font-weight: 600; font-size: .92rem; }

/* dummy-data switch + empty-account start steps */
.dummy-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px dashed #9AAAB7; background: #FAFBFC; } .dummy-card.is-on { border-color: var(--warn-line); background: #FFFAEC; } .dummy-card p { margin: 2px 0 0; }
.start-steps { counter-reset: s; list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 14px; } .start-steps li { display: flex; gap: 12px; align-items: flex-start; } .start-steps li::before { counter-increment: s; content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; } .start-steps strong { display: block; } .start-steps span { color: var(--muted); }

.start-steps li > div span { display: block; }

/* small screens: nothing may push the page sideways */
.main > *, .card, .grid-2 > *, .master-detail > *, .area-grid > *, .rv-fb > *, .profile-main { min-width: 0; }
.area-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.list-item, .list-item > * { min-width: 0; } .list-item strong, .area-card h2, .area-card h3, .card-head a { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .rv-fb-tabs .seg { flex-wrap: wrap; } .rv-fb-tabs .seg-btn { white-space: normal; min-width: 0; padding: 8px 6px; font-size: .88rem; }
  .card-head > * { max-width: 100%; } .badge { max-width: 100%; white-space: normal; }
  .table-wrap { max-width: 100%; }
}
.table-wrap { position: relative; }

/* student home + classes: same calm layout as the teacher pages */
.class-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.class-tile { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.class-tile h3 { margin: 2px 0 0; font-size: 1.05rem; overflow-wrap: anywhere; } .class-tile p { margin: 0; }
.ct-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .ct-subject { font-weight: 700; font-size: .8rem; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.ct-act { margin-top: auto; padding-top: 10px; }
.cell-sub { display: block; color: var(--muted); font-size: .82rem; }
.filter-row { margin: 0; }
.theme-student .page-head h1 { font-size: 1.7rem; }

.class-card.is-new { border-color: var(--good-line); box-shadow: 0 0 0 3px rgba(60,140,90,.18); }

/* marked exam: the exam page by page with the teacher's marks */
.mk-page { margin: 16px 0; } .mk-page h3 { margin: 0 0 10px; }
.mk-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mk-sheet { background: #E8ECEF; border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0; } .mk-sheet .paper { --z: 1; } .mk-photo img, .paper-photo img { display: block; max-width: 100%; height: auto; border-radius: 4px; background: #fff; }
.paper-photo { padding: 0; background: #fff; } .paper-photo img { width: calc(var(--z, 1) * 100%); max-width: none; } .paper-photo .paper-foot { padding: 6px; }
.pq-mark { margin-left: auto; font-weight: 800; font-size: .85rem; padding: 2px 8px; border-radius: 99px; white-space: nowrap; } .pq-mark.ok { background: #E4F4EA; color: #1E6B3A; } .pq-mark.bad { background: #FBE5E3; color: #A02A22; }
.mk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mk-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .mk-row.is-ok { border-color: var(--good-line); } .mk-row.is-bad { border-color: #E8B4AE; }
.mk-sym { font-weight: 900; font-size: 1.1rem; width: 22px; text-align: center; } .is-ok .mk-sym { color: #1E6B3A; } .is-bad .mk-sym { color: #A02A22; }
.mk-main { flex: 1; min-width: 0; overflow-wrap: anywhere; } .mk-main small { display: block; color: var(--muted); margin-top: 4px; } .mk-pts { font-weight: 800; white-space: nowrap; }
.plain-link { color: inherit; text-decoration: none; } .plain-link:hover { text-decoration: underline; }
.score-in::-webkit-outer-spin-button, .score-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .score-in { -moz-appearance: textfield; }
@media (max-width: 820px) { .mk-grid { grid-template-columns: 1fr; } }

.howto { border: 1px solid var(--line); background: #F7F9FB; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: .93rem; }
.howto summary { font-weight: 700; cursor: pointer; } .howto ol { margin: 8px 0 2px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); }

.cell-sub { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; }
.mk-pts { display: flex; flex-direction: column; align-items: flex-end; } .mk-pts small { color: var(--muted); font-size: .72rem; font-weight: 400; }
.mk-more { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mk-more > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #F4F6F8; font-size: .9rem; } .mk-more strong { font-size: .76rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.mk-more .mk-why { background: #FFF6EA; } .mk-more .mk-note.is-teacher { background: #EAF4EE; } .mk-more .mk-gap { background: #EEF1FA; }

.msg-btn { position: relative; } .icon-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--action); color: #fff; font-size: .72rem; font-weight: 800; display: inline-grid; place-items: center; border: 2px solid #fff; box-sizing: content-box; } .icon-count[hidden] { display: none; }