/* ============================================================================
 * AiduEdSuite — School Mark Sheet Manager — styles
 * Sections: 1) tokens/theme  2) app shell  3) components  4) mark sheet
 *           5) style variants  6) print
 * ==========================================================================*/

/* ---- 1. tokens ---------------------------------------------------------- */
:root {
  --bg: #eef1f6;
  --panel: #ffffff;
  --panel-2: #f6f8fb;
  --ink: #1a2230;
  --ink-soft: #5a6678;
  --ph: #9aa7b8;         /* input placeholders — clearly lighter than typed text */
  --line: #dde3ec;
  --line-strong: #c4cddd;
  --brand: #1f4e8c;      /* school navy */
  --brand-2: #2a63bb;    /* link/accent blue — WCAG-AA on bg + panels */
  --accent: #946510;     /* crest gold (AA as text on panels) */
  --good: #157a4c;
  --warn: #a05e0a;
  --bad: #d23b3b;
  --on-fill: #fff;       /* text that sits on a saturated brand/status fill */
  --shadow: 0 1px 3px rgba(20,30,50,.08), 0 6px 22px rgba(20,30,50,.08);
  --radius: 10px;
  --r-sm: 7px;
}
[data-theme="dark"] {
  --bg: #0e1420;
  --panel: #161d2b;
  --panel-2: #1c2536;
  --ink: #e7ecf5;
  --ink-soft: #93a0b6;
  --ph: #626f86;         /* input placeholders — dimmer than typed text (dark) */
  --line: #273248;
  --line-strong: #35435f;
  --brand: #6ea8ff;
  --brand-2: #6ea0ea;    /* link — AA on dark panels */
  --accent: #e2b455;
  --good: #35c98a;
  --warn: #eaa845;
  --bad: #f2685f;
  --on-fill: #0e1420;    /* bright dark-mode fills carry dark text, not white */
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 26px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-2); text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }

/* kill number-input spinners everywhere (admin request) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* checkboxes/radios must not stretch full width (they sit inline beside labels) */
input[type=checkbox], input[type=radio] { width: auto; flex: none; margin: 0; accent-color: var(--brand); }

/* ---- 2. app shell ------------------------------------------------------- */
.app { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
.side {
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
/* object-fit:contain — a school crest is rarely square, and without this it was
   stretched to fit the 34x34 box. Letterbox it instead of distorting it. */
.brand img { width: 34px; height: 34px; object-fit: contain; }
/* The school crest, wherever a monogram placeholder would otherwise sit (every
   dashboard style, via ctx.crestEl). contain — never stretch a crest to fill a
   square box. When a real crest is set, drop the placeholder's gradient tile so
   the crest sits on its own rather than on a coloured chip. */
.crest-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.has-crest { background: none !important; border: none !important; box-shadow: none !important; padding: 0; }
.brand b { font-size: 13px; line-height: 1.1; }
.brand small { color: var(--ink-soft); font-size: 10.5px; display: block; }
.nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: var(--r-sm);
  color: var(--ink-soft); font-weight: 550; font-size: 13px; cursor: pointer;
}
.nav a .ic { width: 17px; text-align: center; opacity: .9; }
.nav a:hover { background: var(--panel-2); color: var(--ink); }
.nav a.active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.nav-sep { height: 1px; background: var(--line); margin: 6px 10px; }
/* user-arrangeable menu: a subtle drag handle per item (shown on hover / always on touch) */
.nav a .nav-grip { opacity: 0; cursor: grab; color: var(--ink-faint, #9aa4b2); font-size: 12px; line-height: 1; margin: 0 1px 0 -3px; touch-action: none; transition: opacity .12s; }
.nav a:hover .nav-grip { opacity: .55; }
.nav a .nav-grip:active { cursor: grabbing; }
.nav a.nav-drag.dragging { opacity: .95; background: var(--panel-2); border-radius: var(--r-sm, 8px); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); outline: 1px dashed var(--brand, #6b8afd); }
/* while a drag is live: make the drop lanes readable and stop text selection fighting it */
.nav.nav-dragging { user-select: none; cursor: grabbing; }
.nav.nav-dragging .nav-adv.open, .nav.nav-dragging .nav-grp-main { background: color-mix(in srgb, var(--panel-2) 55%, transparent); border-radius: var(--r-sm, 8px); }
.nav.nav-dragging .nav-advtoggle:not(.open) { outline: 1px dashed var(--line); outline-offset: -1px; }
.nav a.nav-drag { cursor: grab; }
.nav a.nav-drag:active { cursor: grabbing; }
.app.nav-collapsed .nav-grip { display: none; }
@media (hover: none) { .nav a .nav-grip { opacity: .4; } }
/* collapsible "Advanced" folder — keeps the sidebar short by default */
.nav-advtoggle { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px; margin-top: 2px; border: none; background: none; color: var(--ink-soft); font: inherit; font-weight: 550; font-size: 13px; border-radius: var(--r-sm); cursor: pointer; text-align: left; }
.nav-advtoggle .ic { width: 17px; text-align: center; opacity: .9; }
.nav-advtoggle .adv-caret { margin-left: auto; display: inline-block; font-size: 11px; opacity: .7; transition: transform .18s ease; }
.nav-advtoggle:hover { background: var(--panel-2); color: var(--ink); }
.nav-advtoggle.open { color: var(--ink); }
.nav-advtoggle.open .adv-caret { transform: rotate(90deg); }
.nav-adv { display: none; margin: 2px 0 2px 8px; padding-left: 6px; border-left: 1px solid var(--line); }
.nav-adv.open { display: block; }
.app.nav-collapsed .nav-advtoggle .label, .app.nav-collapsed .nav-advtoggle .adv-caret { display: none; }
.app.nav-collapsed .nav-adv { margin-left: 0; padding-left: 0; border-left: none; }
.side-foot { padding: 9px; border-top: 1px solid var(--line); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.i18n-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.i18n-seg { border: 0; background: var(--panel); color: var(--ink-soft); font-weight: 700; font-size: 12px; padding: 4px 9px; cursor: pointer; }
.i18n-seg.active { background: var(--brand); color: var(--on-fill); }

/* ---- collapsed sidebar (icon-only rail) -------------------------------- */
.app.nav-collapsed { grid-template-columns: 58px 1fr; }
.app.nav-collapsed .brand { justify-content: center; padding: 14px 6px 12px; }
.app.nav-collapsed .brand > div { display: none; }
.app.nav-collapsed .nav a { justify-content: center; padding: 9px 6px; }
.app.nav-collapsed .nav a .label { display: none; }
.app.nav-collapsed .side-foot { justify-content: center; }
.app.nav-collapsed .side-foot .muted { display: none; }
.app.nav-collapsed .side-foot .btn { padding: 6px 8px; }
.nav-toggle { border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); border-radius: var(--r-sm); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; }
.nav-toggle:hover { background: var(--panel-2); color: var(--ink); }

/* ---- action-sheet menu (⋯ More) ---------------------------------------- */
.menu-list { display: flex; flex-direction: column; gap: 4px; }
.menu-item { display: flex; align-items: flex-start; gap: 11px; text-align: left; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; color: var(--ink); }
.menu-item:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.menu-item.danger:hover { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, transparent); }
.menu-item .mi-ic { font-size: 17px; line-height: 1.3; width: 20px; text-align: center; flex: none; }
.menu-item.danger > span:last-child > div:first-child { color: var(--bad); }

/* ---- inline spreadsheet edit (Students → Edit all) --------------------- */
.data-edit td { padding: 5px 6px; vertical-align: middle; }
.data-edit input, .data-edit select { padding: 5px 7px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.data-edit input:focus, .data-edit select:focus { border-color: var(--brand); outline: none; }
.yc-nav .cchip { cursor: pointer; }

/* ---- duplicate review groups ------------------------------------------ */
.dup-group { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; margin-bottom: 8px; background: var(--panel); }
.dup-row { gap: 8px; align-items: center; padding: 4px 0; border-top: 1px dashed var(--line); }
.dup-row:first-of-type { border-top: none; }

.main { min-width: 0; display: flex; flex-direction: column; }
/* ---- THE TOP BAR: one line, one height, one rhythm ----------------------
   WHAT WAS WRONG, measured rather than guessed. At a 1000px window the sidebar
   left the bar 790px and its nine children measured ~1003px. Because nothing in
   here had a height and nothing was `nowrap`, the overflow was absorbed by
   WRAPPING INSIDE the controls: "↷ Redo" came out 49px tall on two lines,
   "＋ Quick actions ▾" came out 67px tall on three, and the nine children sat at
   nine different vertical offsets (y = -8 … 14) inside a 52px strip. Nothing
   could line up because nothing was the same size.
   THE FIX IS THREE RULES, and each one is load-bearing:
     1. the page SUBTITLE never prints here. It was a full sentence in a 52px
        strip, so the left half of the bar needed two rows before any control had
        misbehaved. It survives as the h1's hover tooltip (wireTitleTip in
        app.js) — CLAUDE.md rule 1 applied to the chrome.
     2. every control is 32px tall and `white-space: nowrap`. A label can now be
        as long as it likes; it cannot make the bar taller.
     3. only three things may shrink, and in a fixed order — the search box, then
        the role label, then the title. Everything else is `flex: none`, so the
        identity cluster on the right never gets squeezed out of alignment.
   REJECTED: `flex-wrap` on the bar. Wrapping is what it was already doing, and a
   two-row header steals content height on exactly the small screens that can
   least afford it (the phone layout reached the same conclusion — see
   mobile.css, which keeps one 52px line and scrolls it sideways instead).
   ALSO REJECTED: hiding whole controls below a width. The owner uses them; only
   a secondary WORD is allowed to drop out, never a button. */
.topbar {
  height: 52px; min-height: 52px; display: flex; align-items: center; flex-wrap: nowrap;
  gap: 8px; padding: 0 16px;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20;
}
.topbar > * { flex: none; }                        /* nothing flexes unless it is told to, below */
/* SHRINK ORDER when the bar runs short, and it is deliberate: the search box
   gives way first and almost entirely (flex-shrink 200, set where it is built),
   then the role label, and the page TITLE last of all — a near-zero factor rather
   than 0, so it can still yield in the last resort instead of overflowing the bar,
   but never for the sake of a search box that has room left. */
/* A FLOOR, NOT JUST A SHRINK FACTOR. Shrink factors decide who gives way first;
   they say nothing about when to stop. With min-width:0 the last unfrozen item
   absorbs the whole remaining deficit in one pass and clamps at zero — measured
   at an 822px window the page heading went from 139px to 0px across about ten
   pixels of resizing, with overflow:hidden so there was not even an ellipsis.
   A heading that silently is not there is worse than a bar that scrolls. */
.topbar .ttl { display: flex; align-items: center; flex: 0 0.02 auto; min-width: 4.5rem; overflow: hidden; }
.topbar .ttl h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* min-width:0 is not decoration: a flex item defaults to min-width:auto, so
   without it the h1 refuses to shrink and gets chopped by .ttl's overflow instead
   of ellipsising itself — a title cut mid-letter with no "…" to say so. */
.topbar h1 { font-size: 16px; line-height: 1.25; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* #pageSub still EXISTS — nineteen modules write to it and this pass does not own
   them — but it is never painted. app.js mirrors it into the h1's title=. */
.topbar #pageSub { display: none; }
.topbar .spacer { flex: 1 1 auto; min-width: 0; }
/* One height for every control in the bar, whatever it is built from. The
   compound `.topbar .btn.sm` is not redundant: `.btn.sm` sets `padding` as a
   shorthand further down this file and would otherwise put the vertical padding
   back and re-break the alignment. */
.topbar .btn, .topbar .btn.sm, .topbar .nav-toggle, .topbar #gsInput { height: 32px; }
.topbar .btn, .topbar .btn.sm { padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.topbar .nav-toggle { width: 32px; height: 32px; }
.topbar .btn.tb-icon { width: 32px; padding-left: 0; padding-right: 0; justify-content: center; font-size: 15px; }
.topbar .btn.tb-icon svg.lu { width: 17px; height: 17px; margin: 0; vertical-align: middle; }
.tb-flip { transform: scaleX(-1); }                                 /* redo = the undo arrow, mirrored (see undoArrow in app.js) */
.tb-pair { display: inline-flex; align-items: center; gap: 2px; }   /* Undo + Redo read as one control */
.tb-caret { font-size: .78em; opacity: .7; }
/* The role chip carries a STATE ("you are previewing as Teacher"), so its label
   stays visible at every width — it just ellipsises instead of growing the bar.
   min-width:0 broke that promise in the worst way: it removed the chip's own
   min-content floor, so at 1024px on a two-school account the chip shrank to 22px
   — twenty of which were padding, the label gone entirely, and the 👤 icon
   rendering twelve pixels OUTSIDE its own button. A control drawn outside itself
   reads as a broken page, not as a tight one.
   So the floor is the icon plus a few characters. Past that the bar scrolls, which
   is honest, instead of the chip turning inside out. */
.topbar .tb-role { flex: 0 1 auto; min-width: 4.25rem; }
.tb-role-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Below this the bar is tight enough that a secondary WORD costs more than it
   earns. Only the "Actions" word goes; the ＋ and the tooltip stay. */
@media (max-width: 1000px) { .topbar .tb-lbl { display: none; } }
/* THE PAGE USES THE SCREEN IT HAS. 1400px was a sensible cap for prose and the
   wrong one for this app: a 1900px laptop with the sidebar open gave the content
   1655px and then centred 1400 of it, so every page carried ~127px of empty
   gutter down each side while tables scrolled sideways inside the remainder. On a
   dense screen of marks that is not whitespace, it is a smaller table.
   2000px is still a cap, because a 3440px ultrawide would otherwise stretch a
   mark sheet to a width nobody can read across — but on every screen a school
   actually owns it is no cap at all. Side padding went up slightly so content
   does not touch the frame now that it reaches it. */
.view { padding: 16px 22px 60px; max-width: 2000px; width: 100%; margin: 0 auto; }

/* ---- 3. components ------------------------------------------------------ */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.pad { padding: 14px 16px; }
.grid { display: grid; gap: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--ink-soft); }
.small { font-size: 12px; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.tag.g { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.tag.b { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.tag.w { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.tag.n { background: var(--panel-2); color: var(--ink-soft); }

/* colour-coded chips (year / class / stream / division) */
/* Unselected chips are NEUTRAL (grey) — only the selected chip carries its stream/year colour. */
.cchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); white-space: nowrap; }
.cchip.click { cursor: pointer; transition: .12s; }
.cchip.click:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); }
.cchip.active { color: #fff; background: var(--c); border-color: var(--c); }
.chip-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-yeargroup { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
/* dual-thumb date-range slider (Activity log): two native range inputs
   stacked — tracks ignore the pointer, only the thumbs take it, so either
   end drags independently over one shared track */
.range2 { position: relative; height: 26px; flex: 1; min-width: 150px; max-width: 320px; }
.range2 input[type=range] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 26px; }
.range2 input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--line); border-radius: 2px; margin-top: 11px; }
.range2 input[type=range]::-moz-range-track { height: 4px; background: var(--line); border-radius: 2px; }
.range2 input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); margin-top: -6px; cursor: ew-resize; }
.range2 input[type=range]::-moz-range-thumb { pointer-events: auto; width: 13px; height: 13px; border-radius: 50%; background: var(--brand); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: ew-resize; }

/* tick-chips on the student profile's UDISE census section: one tick = Yes in
   the DCF, so fourteen Yes/No questions read as two short rows of pills */
.udchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); cursor: pointer; font-size: .85em; user-select: none; }
.udchip input { margin: 0; accent-color: var(--brand); }
.udchip:has(input:checked) { border-color: var(--brand); color: var(--brand); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: .12s;
}
.btn:hover { border-color: var(--brand-2); color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-fill); }
.btn.primary:hover { background: var(--brand-2); color: var(--on-fill); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* A search result teleports you somewhere. This shows WHERE it lives in the menu,
   so the next time you want it you can walk there instead of searching again. */
.nav a.nav-flash { animation: navFlash 1.3s ease-out 1; border-radius: 8px; }
@keyframes navFlash {
  0%, 100% { background: transparent; }
  15%, 55% { background: color-mix(in srgb, var(--brand) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .nav a.nav-flash { animation: none; background: color-mix(in srgb, var(--brand) 18%, transparent); }
}

/* Live conditions for a button that is disabled until they are met. Sits with
   the fields it is about, so a person never has to press a button to discover
   what is wrong with what they typed — the old arrangement announced "Passwords
   don't match" as a toast in the far corner, after the fact, and faded. */
.reqs { list-style: none; margin: 10px 0 0; padding: 10px 12px; display: grid; gap: 6px;
        border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.reqs .req { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-soft);
             transition: color .18s; }
.reqs .req-mark { width: 15px; text-align: center; font-weight: 700; flex: 0 0 auto; }
.reqs .req.ok { color: var(--good); }
.reqs .req.bad { color: var(--bad); font-weight: 600; }

label.fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
/* "Labels at the side" arrangement (aidu_field_layout). Grid rather than flex-row
   because the label is a bare text node — grid wraps loose text in an anonymous
   item that a column track can size, which flex cannot do. */
.fld-side label.fld { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 10px; }
.fld-side label.fld > input, .fld-side label.fld > select, .fld-side label.fld > textarea, .fld-side label.fld > div { width: 100%; min-width: 0; }
@media (max-width: 560px) { .fld-side label.fld { display: flex; flex-direction: column; align-items: stretch; } }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 18%, transparent); }
textarea { resize: vertical; min-height: 90px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }
/* placeholders read as a hint, not as already-entered text — clearly greyer than typed input */
input::placeholder, textarea::placeholder { color: var(--ph); opacity: 1; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--ph); opacity: 1; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: var(--ph); opacity: 1; }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.data th { color: var(--ink-soft); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
table.data tr:hover td { background: var(--panel-2); }
select.stat-sel { padding: 3px 6px; font-size: 12px; width: auto; }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; }
.stat { padding: 13px 15px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.stat .n { font-size: 26px; font-weight: 720; letter-spacing: -.02em; }
.stat .l { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.stat.click { cursor: pointer; transition: .12s; }
.stat.click:hover { border-color: var(--brand-2); transform: translateY(-2px); }

/* big clickable drill-down tiles (Classes browser) */
.bigtile { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 40px 20px 20px; cursor: pointer; transition: .14s; }
.bigtile:hover { border-color: var(--brand-2); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(20,30,50,.14); }
.bigtile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: var(--radius) 0 0 var(--radius); background: var(--c, var(--brand)); }
.bt-title { font-size: 20px; font-weight: 720; letter-spacing: -.01em; color: var(--c, var(--ink)); }
.bt-sub { color: var(--ink-soft); font-size: 12.5px; margin-top: 4px; }
.bt-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--ink-soft); }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(10,16,28,.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); width: min(680px, 100%); max-height: 90vh; overflow: auto; border: 1px solid var(--line); }
.modal-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.modal-body { padding: 16px 18px; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }

/* watermark designer preview */
.wm-preview { position: relative; width: 100%; height: 150px; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.wm-preview .sheet-watermark { color: #8fb3dd; }

/* inline edit popover */
.popover { position: absolute; z-index: 300; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); padding: 10px 11px; width: 232px; }
.pop-title { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
.pop-hint { color: var(--ink-soft); font-size: 11px; margin-bottom: 7px; }
.popover input[type=text], .popover input:not([type]), .popover textarea { width: 100%; }
.pop-chk { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pop-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 11px; }
.pop-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.pop-opts .btn { min-width: 34px; font-weight: 700; }

/* toast */
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
/* a dialog's buttons sit bottom-right — move toasts bottom-LEFT while one is open,
   and above the dialog so they stay readable */
#toasts.with-modal { right: auto; left: 16px; z-index: 1400; }
/* cc.aidued.com — the platform console's own sign-in page (never the school
   marketing landing). Dark, focused, obviously not a school app. */
.cc-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 50% -10%, #1d2b45 0%, #0f1626 55%, #0b101b 100%); }
.cc-inner { width: 100%; max-width: 460px; }
.cc-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: #eaf1ff; }
.cc-mark { font-size: 30px; }
.cc-title { display: block; font-size: 19px; letter-spacing: 0.2px; }
.cc-sub { font-size: 12.5px; opacity: 0.72; margin-top: 2px; }
.cc-foot { margin-top: 16px; text-align: center; font-size: 12.5px; color: rgba(234, 241, 255, 0.66); }
.cc-foot a { color: #8fb6ff; }
/* shown when a signed-in account is bounced for not being platform staff */
.cc-denied { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; text-align: left;
  background: rgba(220, 60, 60, 0.14); border: 1px solid rgba(255, 120, 120, 0.42); color: #ffdcdc; }
.cc-denied b { display: block; margin-bottom: 4px; }
.cc-denied a { color: #8fb6ff; }
/* the console host never shows school marketing / demo entry points */
body.cc-host .lp-nav-demo, body.cc-host .lp-cta-demo, body.cc-host .landing-page { display: none !important; }
body.cc-host .login-banner2 { display: none; }

/* spinner shown while an upload is being read */
.up-spin { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); border-top-color: var(--brand); animation: upspin .7s linear infinite; }
@keyframes upspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .up-spin { animation-duration: 2.2s; } }
/* progress bar (smoothProgress) — eases between real checkpoints, shows an ETA */
.pgz { margin-top: 8px; }
.pgz-track { height: 8px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.pgz-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-2, var(--brand))); transition: width .16s linear; }
@media (prefers-reduced-motion: reduce) { .pgz-fill { transition: none; } }
.toast { background: var(--panel); border: 1px solid var(--line-strong); border-left: 4px solid var(--brand); border-radius: var(--r-sm); padding: 10px 14px; box-shadow: var(--shadow); font-size: 13px; max-width: 340px; animation: slidein .2s; }
.toast.good { border-left-color: var(--good); }
.toast.bad { border-left-color: var(--bad); }
.toast.warn { border-left-color: var(--warn); }
@keyframes slidein { from { transform: translateY(8px); opacity: 0; } }

/* dropzone */
.dropzone { border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--ink-soft); cursor: pointer; transition: .12s; }
.dropzone.over { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 8%, transparent); color: var(--brand); }

/* segmented / chips */
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; padding: 3px; gap: 2px; }
.seg button { border: none; background: transparent; color: var(--ink-soft); padding: 5px 12px; border-radius: 18px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.seg button.active { background: var(--panel); color: var(--brand); box-shadow: var(--shadow); }

details.adv { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0; margin-top: 8px; background: var(--panel-2); }
details.adv > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 12.5px; color: var(--ink-soft); list-style: none; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before { content: '▸ '; }
details.adv[open] > summary::before { content: '▾ '; }
details.adv .adv-body { padding: 12px; border-top: 1px solid var(--line); }

/* ---- 4. THE MARK SHEET (pixel-faithful to the .docx) -------------------- */
.sheet-scroll { overflow-x: auto; padding-bottom: 8px; }
/* Full A4-landscape page (29.7 x 21cm) with 1in margins — matches the .docx */
.sheet {
  position: relative;
  width: 29.7cm;
  min-height: 21cm;
  margin: 0 auto 22px;
  padding: 1in;
  background: #ffffff;
  color: #000000;
  font-family: 'Mizo Synod Times', 'Times New Roman', Georgia, serif;
  font-size: 13pt;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  overflow: hidden;
}
/* Tiled TEXT watermark: school name repeated to fill the page, pale blue,
   Mizo Synod Times 13pt — exactly like the Word watermark textbox. */
.sheet-watermark {
  position: absolute; inset: 0.12in; z-index: 0; overflow: hidden;
  color: #8fb3dd;
  font-family: 'Mizo Synod Times', 'Times New Roman', serif;
  font-size: 13pt; line-height: 1.6; letter-spacing: 0;
  text-transform: uppercase; pointer-events: none; user-select: none;
}
/* repeated-name text (classic, or overlaid on a pattern): justified so every
   line fills the full width, overflow truncated at the bottom — no white margins */
.sheet-watermark.wm-text { text-align: justify; text-align-last: justify; padding: 2pt 2pt 0; }
/* colour & opacity are set inline by App.watermark.apply per style */
.sheet > *:not(.sheet-watermark) { position: relative; z-index: 1; }
/* black bounding box around the whole statement (close to the page edge) */
.sheet::before { content: ""; position: absolute; inset: 0.1in; border: 1.5pt solid #000; z-index: 1; pointer-events: none; }
table.mk td.grade-name { text-align: center; }

.sheet-head { text-align: center; }
.sheet-school { font-family: 'Arial Black', 'Arial', sans-serif; font-size: 13pt; line-height: 1.12; }
.sheet-title { font-family: 'Arial Black', 'Arial', sans-serif; font-size: 13pt; line-height: 1.12; }
.sheet-term  { font-family: 'Arial Black', 'Arial', sans-serif; font-size: 11pt; line-height: 1.15; }
.sheet-year  { font-family: 'Arial Black', 'Arial', sans-serif; font-size: 13pt; line-height: 1.2; margin-bottom: 2pt; }

/* left + right info columns pushed to the edges; crest absolutely centred on the
   sheet so the on-screen view matches the exported/printed sheet exactly. */
.sheet-info { display: flex; align-items: center; justify-content: space-between; gap: 0; margin: 3pt 0 4pt; position: relative; }
.sheet-info .info-col:first-child { flex: none; width: 3.7in; }
.sheet-info .info-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.sheet-info .info-logo img { width: 0.85in; height: auto; display: block; }
.sheet-info .info-col:last-child { flex: none; width: 2.9in; }
.info-row { display: flex; align-items: baseline; margin: 1pt 0; }
.info-label { width: 1.7in; flex: none; }
.info-col:last-child .info-label { width: 1.4in; }
.info-colon { width: 8px; }
.info-value { flex: 1; padding-left: 4px; white-space: nowrap; }   /* keep a long student / parent name on ONE line (the value column is narrow in portrait) */
.info-value .ph { color: #999; font-style: italic; }
.info-value.editable, .foot-dateval.editable { cursor: text; border-bottom: 1px dotted transparent; }
.info-value.editable:hover, .foot-dateval.editable:hover { border-bottom-color: var(--brand-2); background: #eef4ff; }
.foot-dateval .ph { color: #aaa; font-style: italic; }

table.mk { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 2pt; }
table.mk th, table.mk td {
  border: 0.75pt solid #000; padding: 1pt 3pt; text-align: center;
  font-size: 12pt; line-height: 1.05; vertical-align: middle; word-wrap: break-word;
}
table.mk thead th { font-weight: 400; }
table.mk .sub-th { font-size: 10.5pt; white-space: nowrap; word-break: keep-all; }
/* "Subject Symbol" header printed vertically, on two lines, reads bottom-to-top */
table.mk th.c-symhead { writing-mode: vertical-rl; transform: rotate(180deg); white-space: pre; padding: 2pt 1pt; font-size: 9.5pt; line-height: 1.25; text-align: center; font-weight: 700; }
table.mk td.c-sym { font-weight: 700; }
table.mk td.l, table.mk th.l { text-align: left; padding-left: 5pt; }
table.mk td.b { font-weight: 700; }
table.mk .c-name { text-align: left; padding-left: 5pt; white-space: nowrap; }   /* long subject names (e.g. POLITICAL SCIENCE) stay on ONE line — the Subject column is widened to fit, never wrapped */
table.mk .c-words { white-space: nowrap; }   /* the spelled-out total ("Four Seven") stays on one line too */
table.mk .c-total { font-weight: 700; }
table.mk .row-band { font-weight: 400; }
table.mk .grand-row td { font-weight: 700; }
table.mk .blank-row td { height: 20pt; }
table.mk .grade-cell { height: 18pt; }
table.mk td.over-full { color: #c00; font-weight: 700; background: #ffecec; }
/* A failed subject: the TOTAL prints red. Each obtained mark (theory / practical / internal)
   prints red ONLY when THAT paper is below its OWN pass mark (.mk-fail) — a paper the student
   PASSED stays black even if the subject fails on another paper (e.g. a passed theory 18/17 stays
   black when the practical 2/3 fails). Matches the School-format statement's per-paper colouring.
   The subject NAME never reddens, so only the marks flag the fail. */
table.mk tr.sub-fail .c-total { color: #c00; }
table.mk td.c-mark.mk-fail { color: #c00; }
/* Absent (AB) prints red too, per subject (the mark cells + the total cell). */
table.mk .c-mark.ab,
table.mk .c-total.ab { color: #c00; }
.awaited { color: #b98; font-size: 10pt; }
[data-theme] table.mk td.over-full { background: #ffecec; } /* keep on sheet regardless of theme */

.sheet-result { margin: 5pt 0 2pt; font-size: 14pt; font-weight: 700; }
.res-label { margin-right: 4px; }
.res-fail { color: #FF0000; }
.res-dropped { color: #888; }
.res-tag { font-weight: 400; font-size: 11pt; color: #666; }
.res-pending { color: #b26a00; font-weight: 600; font-size: 12pt; }
.res-pct { font-weight: 400; font-size: 11pt; color: #333; }
.sheet-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 16pt; font-size: 12pt; }
.foot-sign { font-weight: 400; text-align: right; padding-right: 0.4in; white-space: nowrap; }

/* preview wrapper controls */
.sheet-tools { position: sticky; top: 52px; z-index: 15; background: var(--bg); padding: 8px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sheet-flagbar { margin: 0 auto 8px; max-width: 9.7in; }

/* ---- 5. style variants -------------------------------------------------- */
/* modern: navy headers, zebra, rounded frame */
.sheet--modern { border-radius: 8px; }
.sheet--modern table.mk th, .sheet--modern table.mk td { border-color: #b9c4d6; }
.sheet--modern table.mk thead th { background: var(--brand); color: #fff; border-color: var(--brand); }
.sheet--modern table.mk .row-band td { background: #eef3fb; }
.sheet--modern table.mk .grand-row td { background: #f4f7fc; }
.sheet--modern .sheet-school { color: var(--brand); }
.sheet--modern table.mk .subj-row:nth-child(even) td { background: #fafcff; }

/* compact: tighter, smaller type to fit more per page */
.sheet--compact { font-size: 11.5pt; min-height: 5.6in; padding: 0.25in 0.32in; }
.sheet--compact table.mk th, .sheet--compact table.mk td { font-size: 10.5pt; padding: 0.5pt 2pt; }
.sheet--compact .sheet-school, .sheet--compact .sheet-title, .sheet--compact .sheet-year { font-size: 12pt; }
.sheet--compact .blank-row td { height: 13pt; }

/* elegant: serif headers, gold rules, refined */
.sheet--elegant { border: 1.5pt double #b58a2e; }
.sheet--elegant .sheet-school { font-family: 'Georgia', serif; letter-spacing: .04em; color: #6a4f16; }
.sheet--elegant .sheet-title { font-family: 'Georgia', serif; letter-spacing: .2em; font-size: 12pt; }
.sheet--elegant table.mk thead th { background: #f6efdd; border-color: #cbb277; }
.sheet--elegant table.mk th, .sheet--elegant table.mk td { border-color: #cbb277; }
.sheet--elegant table.mk .grand-row td { background: #faf5e8; }

/* ledger: bold navy "examination ledger" (landscape) */
.sheet--ledger .sheet-school { color: #12305e; letter-spacing: .05em; }
.sheet--ledger .sheet-title { display: inline-block; background: #12305e; color: #fff; padding: 2pt 16pt; letter-spacing: .12em; }
.sheet--ledger::before { border-color: #12305e; }
.sheet--ledger table.mk th, .sheet--ledger table.mk td { border-color: #12305e; }
.sheet--ledger table.mk thead th { background: #12305e; color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.sheet--ledger table.mk th.c-symhead { color: #fff; }
.sheet--ledger table.mk .subj-row:nth-child(even) td { background: #eef2f8; }
.sheet--ledger table.mk .grand-row td { background: #dbe4f0; }
.sheet--ledger .sheet-result { color: #12305e; }

/* ---- 5b. portrait (vertical) templates --------------------------------- */
/* narrower A4-portrait page; shrink the two info columns so they fit the width */
.sheet--portrait { width: 21cm; min-height: 29.7cm; }
.sheet--portrait .sheet-info .info-col:first-child { width: 2.9in; }
.sheet--portrait .sheet-info .info-col:last-child { width: 2.5in; }
.sheet--portrait .info-label { width: 1.35in; }
.sheet--portrait .sheet-info .info-col:last-child .info-label { width: 1.05in; }
.sheet--portrait .sheet-info .info-logo img { width: 0.8in; }
.sheet--portrait table.mk th, .sheet--portrait table.mk td { font-size: 11pt; }
.sheet--portrait .sheet-foot { margin-top: 22pt; }

/* university: formal degree marksheet, serif, underlined title */
.sheet--university { border: 1pt solid #444; }
.sheet--university::before { inset: 0.16in; border: 0.75pt solid #999; }
.sheet--university .sheet-school { font-family: Georgia, 'Times New Roman', serif; font-size: 17pt; letter-spacing: .01em; }
.sheet--university .sheet-title { font-family: Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: .1em; text-decoration: underline; text-underline-offset: 3pt; font-size: 12pt; }
.sheet--university .sheet-year { font-family: Georgia, serif; font-size: 11pt; }
.sheet--university table.mk thead th { background: #f2f2f2; font-style: italic; font-weight: 600; }
.sheet--university table.mk th, .sheet--university table.mk td { border-color: #666; }
.sheet--university .sheet-result { border: 0.75pt solid #666; padding: 4pt 10pt; display: inline-block; }

/* gradecard: coloured (teal) header band, rounded, no black frame */
.sheet--gradecard { border: none; }
.sheet--gradecard::before { display: none; }
.sheet--gradecard .sheet-head { background: linear-gradient(135deg, #0d7d7d, #0a5c5c); color: #fff; margin: -1in -1in 10pt; padding: 16pt 1in 12pt; }
.sheet--gradecard .sheet-school, .sheet--gradecard .sheet-title, .sheet--gradecard .sheet-year { color: #fff; }
.sheet--gradecard .sheet-title { letter-spacing: .18em; font-size: 12pt; }
.sheet--gradecard table.mk thead th { background: #0d7d7d; color: #fff; border-color: #0d7d7d; }
.sheet--gradecard table.mk th.c-symhead { color: #fff; }
.sheet--gradecard table.mk th, .sheet--gradecard table.mk td { border-color: #bcd6d6; }
.sheet--gradecard table.mk .subj-row:nth-child(even) td { background: #f0f8f8; }
.sheet--gradecard table.mk .grand-row td { background: #e2f0f0; }
.sheet--gradecard .sheet-result { color: #0a5c5c; }

/* report: school report-card look — blue band + boxed student details */
.sheet--report { border: none; }
.sheet--report::before { display: none; }
.sheet--report .sheet-head { background: #274b8e; color: #fff; margin: -1in -1in 10pt; padding: 16pt 1in 12pt; }
.sheet--report .sheet-school, .sheet--report .sheet-title, .sheet--report .sheet-year { color: #fff; }
.sheet--report .sheet-title { letter-spacing: .14em; font-size: 12pt; }
.sheet--report .sheet-info { border: 1pt solid #cdd8ec; background: #f6f9ff; padding: 8pt 12pt; border-radius: 5pt; margin-bottom: 8pt; }
.sheet--report table.mk thead th { background: #e8eefb; color: #1e3a73; border-color: #b9c8e6; }
.sheet--report table.mk th.c-symhead { color: #1e3a73; }
.sheet--report table.mk th, .sheet--report table.mk td { border-color: #c8d3e8; }
.sheet--report table.mk .subj-row:nth-child(even) td { background: #f6f9ff; }
.sheet--report table.mk .grand-row td { background: #eaf0fb; }
.sheet--report .sheet-result { color: #274b8e; }

/* certificate: ornate gold double border, serif */
.sheet--certificate { border: 3pt double #b58a2e; padding: 0.85in; }
.sheet--certificate::before { inset: 0.22in; border: 1pt solid #cbb277; }
.sheet--certificate .sheet-school { font-family: Georgia, serif; color: #7a5a12; letter-spacing: .05em; }
.sheet--certificate .sheet-title { font-family: Georgia, serif; letter-spacing: .28em; font-size: 12pt; color: #7a5a12; }
.sheet--certificate .sheet-year { font-family: Georgia, serif; }
.sheet--certificate table.mk thead th { background: #faf3e0; border-color: #cbb277; font-family: Georgia, serif; }
.sheet--certificate table.mk th, .sheet--certificate table.mk td { border-color: #cbb277; }
.sheet--certificate table.mk .grand-row td { background: #f8f1de; }
.sheet--certificate .sheet-result { font-family: Georgia, serif; color: #7a5a12; }

/* ---- 6. print ----------------------------------------------------------- */
@media print {
  @page { size: A4 landscape; margin: 0; }
  body { background: #fff; }
  .side, .topbar, .sheet-tools, .sheet-flagbar, #toasts, .modal-back, .popover, .noprint { display: none !important; }
  .app { display: block; }
  .view { padding: 0; max-width: none; }
  .sheet-scroll { overflow: visible; }
  /* 29.6 / 20.9, not 29.7 / 21. A sheet sized to EXACTLY the paper leaves the
     browser no room for its own sub-pixel rounding, and it lands a fraction over
     — so every mark sheet printed as TWO pages, the second one blank. Measured:
     a two-student proof came out four pages. One millimetre of slack costs
     nothing visible and fixes it. */
  /* deliberately NOT overflow:hidden — a sheet that genuinely runs long must
     spill onto a second page where somebody notices, not lose the overflow */
  .sheet {
    width: 29.6cm; height: 20.9cm; min-height: 20.9cm; margin: 0; box-shadow: none;
    padding: 1in; page-break-after: always;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;   /* keep pale-blue watermark */
  }
  /* vertical templates print on a portrait A4 page (@page size swapped in JS) */
  .sheet--portrait { width: 20.9cm; height: 29.6cm; min-height: 29.6cm; }
  /* A captured statement carries the school's OWN margins inside its grid, and
     it is scaled on screen to fit the box it is measured in. Letting the generic
     1in print padding apply would shrink that box by 192px AFTER the scale was
     chosen — so the last rows spilled to a second page, and the scale that was
     supposed to prevent exactly that was computed against the wrong height.
     Print padding must equal the screen padding it was fitted to. */
  .sheet--stmt { padding: 8mm 8mm 6mm; }
  .sheet:last-child { page-break-after: auto; }
  .awaited { visibility: hidden; }                 /* unfilled prints blank */
  table.mk td.over-full { background: transparent !important; }
}

/* ---- results summary infographic --------------------------------------- */
.sum-doc { background: var(--panel); }
.sum-head { display: flex; align-items: center; gap: 14px; padding: 4px 2px 16px; border-bottom: 2px solid var(--brand); margin-bottom: 16px; }
.sum-head .sum-logo { width: 54px; height: 54px; object-fit: contain; }
.sum-school { font-weight: 800; font-size: 18px; color: var(--ink); letter-spacing: .01em; }
.sum-title { font-size: 13px; color: var(--ink-soft); font-weight: 600; margin-top: 2px; }
.sum-stats { grid-template-columns: repeat(6, 1fr); }
.sum-stream { text-align: center; padding: 14px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.sum-stream-h { font-weight: 700; color: var(--c); margin-bottom: 10px; }
.sum-ring { position: relative; width: 92px; height: 92px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.sum-ring::before { content: ''; position: absolute; width: 66px; height: 66px; border-radius: 50%; background: var(--panel); }
.sum-ring span { position: relative; font-weight: 800; font-size: 18px; color: var(--ink); }
.sum-stack { height: 14px; border-radius: 8px; overflow: hidden; background: var(--panel-2); display: flex; }
.sum-cls { border: 1px solid var(--line); }
.sum-foot { text-align: center; padding: 16px 0 4px; margin-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .sum-stats { grid-template-columns: repeat(3, 1fr); } .sum-charts { grid-template-columns: 1fr !important; } }

/* ---- consolidated Results Sheet (printable, paginated like the mark sheet) - */
.result-doc { }
.result-sheet { position: relative; background: #fff; color: #111; margin: 0 auto 18px; box-shadow: 0 2px 16px rgba(0,0,0,.14); box-sizing: border-box; display: flex; flex-direction: column; }
.result-sheet.rs-a4.rs-landscape { width: 29.4cm; max-width: 100%; min-height: 20.6cm; padding: 8mm 9mm; }
.result-sheet.rs-a4.rs-portrait  { width: 20.6cm; max-width: 100%; min-height: 28.8cm; padding: 9mm 10mm; }
.result-sheet.rs-a3.rs-landscape { width: 41.6cm; max-width: 100%; min-height: 28.8cm; padding: 10mm 11mm; }
.result-sheet.rs-a3.rs-portrait  { width: 28.8cm; max-width: 100%; min-height: 41.6cm; padding: 11mm 12mm; }
/* Fix top/bottom indent — uniform vertical padding across all paper sizes (leaves left/right untouched). Doubled class raises specificity to override the per-size rules above. */
.result-sheet.rs-fixv.rs-fixv { padding-top: 13mm; padding-bottom: 13mm; }
/* Stretch rows to fill the page: the table grows into the empty space above the
   footer and the body rows share the extra height evenly (header stays natural). */
.result-sheet.rs-stretch > .rs-table { flex: 1 1 auto; height: 1px; }
.result-sheet.rs-stretch > .rs-table > tbody { height: 100%; }
.result-sheet.rs-stretch > .rs-pagefoot { margin-top: 6px; }
/* watermark layer — behind the content, above the white sheet */
.rs-watermark { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rs-wm-text { font: bold 22px/2 Arial, sans-serif; letter-spacing: 3px; word-break: break-word; padding: 6mm; }
.result-sheet > .rs-head, .result-sheet > .rs-table, .result-sheet > .rs-summary, .result-sheet > .rs-sign, .result-sheet > .rs-pagefoot { position: relative; z-index: 1; }
/* compact header — a few tight lines to leave room for rows */
.rs-head { text-align: center; margin-bottom: 7px; }
.rs-school { font-weight: 800; font-size: 13pt; line-height: 1.1; }
.rs-cls { font-weight: 700; font-size: 11pt; margin-top: 1px; }
.rs-res { font-weight: 800; letter-spacing: .06em; font-size: 10pt; color: #111; margin-top: 2px; }
.rs-logo { width: 46px; height: 46px; object-fit: contain; }
/* header arrangements */
.rs-head-2 { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; gap: 14px; }
.rs-head-2 .rs-h-right { text-align: right; }
.rs-head-3 { display: flex; align-items: center; gap: 14px; text-align: left; }
.rs-head-3 .rs-h-left { flex: 0 0 auto; }
.rs-head-3 .rs-h-mid { flex: 1; text-align: center; }
.rs-head-3 .rs-h-right { flex: 0 0 auto; text-align: right; }
/* subject legend (when abbreviated) */
.rs-legend { margin-top: 6px; font-size: 8.5pt; color: #333; line-height: 1.5; }
.rs-legend-h { font-weight: 700; }
.rs-table { width: auto; border-collapse: collapse; font-size: 10pt; table-layout: fixed; margin: 0 auto; }
/* fixed indent: table fills the sheet content area → identical L/R indent for every
   class; columns share the width proportionally (manual widths ignored in this mode) */
.rs-table.rs-fill { width: 100%; table-layout: fixed; }
/* draggable logo overlay in the header */
.rs-logo-free { position: absolute; z-index: 2; object-fit: contain; }
.rs-logo-free.rs-logo-drag { cursor: move; outline: 1px dashed var(--brand, #2e6fc4); }
/* clickable cells on the on-screen results sheet (edit student / edit mark) */
.rs-table td.rs-clickable { cursor: pointer; }
.rs-table td.rs-clickable:hover { background: color-mix(in srgb, var(--brand, #2e6fc4) 14%, transparent); box-shadow: inset 0 0 0 1px var(--brand, #2e6fc4); }
/* inline header text editing */
.rs-editing { outline: 1px dashed var(--brand, #2e6fc4); outline-offset: 2px; cursor: text; min-width: 40px; border-radius: 3px; }
.rs-editing:focus { outline: 2px solid var(--brand, #2e6fc4); background: color-mix(in srgb, var(--brand, #2e6fc4) 6%, transparent); }
.rs-table th, .rs-table td { border: 1px solid #000; padding: 3px 5px; text-align: center; vertical-align: middle; overflow: hidden; word-wrap: break-word; }
.rs-table th { position: relative; }
/* student names sit on ONE line: the .rs-nm span keeps its natural width so JS can
   measure it and scale the font to fit the column (no wrapping); widen the column and
   the name grows back. During a column drag we disable text-selection for smoothness. */
.rs-table td.rs-name { white-space: nowrap; overflow: hidden; }
.rs-table td.rs-name .rs-nm { display: block; box-sizing: border-box; white-space: nowrap; overflow: hidden; line-height: 1.15; }
.rs-resizing, .rs-resizing * { user-select: none !important; -webkit-user-select: none !important; }
/* term tabs on a class card: one card per class, its terms as tabs */
.term-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: -2px 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.term-tab { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-soft); border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.term-tab:hover { border-color: var(--brand); color: var(--ink); }
.term-tab.on { background: var(--brand); border-color: var(--brand); color: var(--on-fill, #fff); }
.term-tab .term-now { font-size: 10px; opacity: 0.85; }
.term-tab.term-add { background: none; border-style: dashed; }

/* inline stroke icons (icons.js) — Lucide-style, light tints, size follows text */
svg.lu { width: 1.06em; height: 1.06em; display: inline-block; vertical-align: -0.16em; flex: none; }
button svg.lu, .btn svg.lu { margin-right: 1px; }
/* inside filled/primary controls the icon follows the button's own text colour */
.btn.primary svg.lu, .primary svg.lu, .nav-item.active svg.lu { color: inherit !important; }

/* compact toolbar dropdowns (toolMenu): a button + anchored popover of controls */
.tool-menu { position: relative; display: inline-block; }
.tool-menu .tm-caret { font-size: 0.78em; opacity: 0.7; margin-left: 2px; }
.tool-menu-pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 248px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); padding: 10px; }
.tool-menu-pop.tm-left { right: auto; left: 0; }
.tm-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tm-row .tm-lb { flex: none; width: 92px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.tm-row select, .tm-row input[type="range"] { flex: 1; width: auto; min-width: 0; }
.tm-sep { height: 1px; background: var(--line); margin: 8px -4px; }
.tm-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 9px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--ink); }
.tm-item:hover { background: var(--panel-2); }
/* click a header (R.No / Position) to order the sheet; active order is underlined */
.rs-table th.rs-sortable:hover { background: color-mix(in srgb, var(--brand, #2e6fc4) 12%, transparent); }
.rs-table th.rs-sort-on { text-decoration: underline; }
.rs-sort-ar { font-size: 0.82em; opacity: 0.65; }
/* narrow utility headers never wrap mid-word ("R.N / o") */
.rs-table th.rs-rno, .rs-table th.rs-pos, .rs-table th.rs-total, .rs-table th.rs-pct, .rs-table th.rs-div { white-space: nowrap; }
/* floating text-style bar (click any sheet text) */
.rs-textbar { position: fixed; z-index: 9000; display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22); padding: 6px 8px; }
.rs-textbar select { width: auto; }
.rs-click-text { cursor: pointer; }
.rs-click-text:hover { outline: 1px dashed color-mix(in srgb, var(--brand, #2e6fc4) 55%, transparent); outline-offset: 2px; }
/* visible drag handle on the header logo */
.rs-logo-drag { cursor: move; }
.rs-logo-drag:hover { outline: 1px dashed var(--brand, #2e6fc4); outline-offset: 2px; }
/* Drag-to-resize grip on column headers (screen only).
   These used to be INVISIBLE until the cursor landed on the exact 9px strip, so
   the resize existed but nobody could find it. Hovering anywhere on the table now
   reveals every boundary; the one under the cursor highlights. */
.rs-col-grip { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; }
.rs-table:hover .rs-col-grip::after,
.mk:hover .tbl-col-grip::after,
table.data:hover .tbl-col-grip::after {
  content: ''; position: absolute; top: 12%; bottom: 12%; left: 50%; width: 2px;
  transform: translateX(-50%); border-radius: 2px; background: rgba(46,111,196,.30);
}
.rs-col-grip:hover { background: rgba(46,111,196,.5); }
/* drag bar to set uniform row height (vertical resize) */
.rs-table tbody td { height: var(--rs-rowh, auto); }
.rs-row-grip { width: 68px; height: 9px; margin: 3px auto 0; border-radius: 5px; background: rgba(46,111,196,.28); cursor: ns-resize; }
.rs-row-grip:hover { background: rgba(46,111,196,.55); }
/* generic table resizer (mark sheets + preview/list tables) */
.tbl-col-grip { position: absolute; top: 0; right: -4px; width: 9px; cursor: col-resize; z-index: 6; }
.tbl-col-grip:hover { background: rgba(46,111,196,.5); }
/* the boundary hint (see .rs-col-grip above) needs a positioning context */
.tbl-col-grip, .rs-col-grip { position: absolute; }
.tbl-row-grip { width: 68px; height: 9px; margin: 3px auto 6px; border-radius: 5px; background: rgba(46,111,196,.28); cursor: ns-resize; }
.tbl-row-grip:hover { background: rgba(46,111,196,.55); }
table.mk tbody tr.subj-row td { height: var(--rowh, auto); }
.rs-table th.l, .rs-table td.l { text-align: left; }
.rs-table thead th { font-weight: 700; }
.rs-name { white-space: normal; }
.rs-sub { font-size: 9pt; }
.rs-total, .rs-pos { font-weight: 600; }
.rs-fail { color: #c00; font-weight: 700; }
.rs-dropped td { color: #999; text-decoration: line-through; }
.rs-dropped td.rs-div { text-decoration: none; }
.rs-empty { text-align: center; color: #666; padding: 22px; font-style: italic; }
/* class summary block (last page) */
.rs-summary { margin-top: 8mm; border: 1px solid #999; border-radius: 6px; padding: 6px 10px; max-width: 15cm; }
.rs-summary-h { font-weight: 700; font-size: 10pt; margin-bottom: 4px; }
.rs-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 18px; }
.rs-summary-cell { display: flex; justify-content: space-between; font-size: 9pt; padding: 2px 0; border-bottom: 1px dotted #ccc; }
.rs-summary-k { color: #444; } .rs-summary-v { font-weight: 700; }
/* Principal signature — open space for a seal/stamp, last page only (no rule line) */
.rs-sign { display: flex; justify-content: flex-end; margin-top: 14mm; }
.rs-sign-box { width: 6cm; height: 2.8cm; display: flex; align-items: flex-end; justify-content: center; }
.rs-sign-label { font-size: 10pt; font-weight: 700; }
/* page-number footer, pinned to the bottom of each page */
.rs-pagefoot { margin-top: auto; padding-top: 8px; text-align: center; font-size: 8.5pt; color: #555; }

/* design: modern — accent header, soft grid */
.rs--modern .rs-table th, .rs--modern .rs-table td { border-color: #c7d0dd; }
.rs--modern .rs-table thead th { background: var(--rs-accent, #1f4e8c); color: #fff; border-color: var(--rs-accent, #1f4e8c); }
.rs--modern .rs-cls, .rs--modern .rs-res { color: var(--rs-accent, #1f4e8c); }
/* design: striped — zebra rows, accent header */
.rs--striped .rs-table th, .rs--striped .rs-table td { border-color: #dfe5ee; }
.rs--striped .rs-table thead th { background: var(--rs-accent, #2e6fc4); color: #fff; border-color: var(--rs-accent, #2e6fc4); }
.rs--striped .rs-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--rs-accent, #2e6fc4) 9%, #fff); }
/* design: minimal — hairline horizontal rules only */
.rs--minimal .rs-table th, .rs--minimal .rs-table td { border: 0; border-bottom: 1px solid #e6e6e6; }
.rs--minimal .rs-table thead th { border-bottom: 2px solid var(--rs-accent, #333); text-transform: uppercase; font-size: 8.5pt; letter-spacing: .04em; }
/* design: bold — heavy accent header, strong totals */
.rs--bold .rs-table th, .rs--bold .rs-table td { border: 1.5px solid #111; }
.rs--bold .rs-table thead th { background: var(--rs-accent, #111); color: #fff; text-transform: uppercase; font-size: 8.5pt; }
.rs--bold .rs-total, .rs--bold .rs-pos { font-weight: 800; }
.rs--bold .rs-school, .rs--bold .rs-cls, .rs--bold .rs-res { text-transform: uppercase; }
/* design: elegant — serif, accent rules */
.rs--elegant { font-family: Georgia, 'Times New Roman', serif; }
.rs--elegant .rs-table th, .rs--elegant .rs-table td { border-color: color-mix(in srgb, var(--rs-accent, #cbb277) 60%, #999); }
.rs--elegant .rs-table thead th { background: color-mix(in srgb, var(--rs-accent, #cbb277) 22%, #fff); color: var(--rs-accent, #6a4f16); }
.rs--elegant .rs-school, .rs--elegant .rs-cls, .rs--elegant .rs-res { color: var(--rs-accent, #6a4f16); letter-spacing: .04em; }

/* login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background:
  radial-gradient(1200px 500px at 50% -10%, color-mix(in srgb, var(--brand) 22%, var(--bg)), var(--bg)); }
.login-card { width: min(380px,100%); text-align: center; padding: 30px 28px; }
.login-card img { width: 64px; height: 64px; margin-bottom: 10px; }

/* pre-login marketing hero (infographics beside the sign-in card) */
.login-layout { display: flex; gap: 48px; align-items: center; width: 100%; max-width: 1010px; }
.login-layout .login-card { flex: none; }
.login-hero { flex: 1.15; min-width: 0; }
.lh-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.lh-brand img { width: 40px; height: 40px; }
.lh-brand b { font-size: 18px; color: var(--ink); letter-spacing: -.01em; line-height: 1.1; }
.lh-brand span { font-size: 12px; color: var(--ink-soft); display: block; }
.lh-head { font-size: 30px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 12px; color: var(--ink); font-weight: 760; }
.lh-head u { text-decoration-color: var(--brand-2); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.lh-sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; max-width: 48ch; line-height: 1.5; }
.lh-stats { display: flex; gap: 12px; margin-bottom: 22px; }
.lh-stat { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 12px; box-shadow: var(--shadow); }
.lh-stat-n { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--brand); }
.lh-stat-n span { font-size: 15px; margin-left: 1px; }
.lh-stat.b .lh-stat-n { color: var(--good); }
.lh-stat.c .lh-stat-n { color: var(--accent); }
.lh-stat-l { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.3; }
.lh-vals { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.lh-val { display: flex; gap: 12px; align-items: flex-start; }
.lh-val-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; background: color-mix(in srgb, var(--brand) 12%, transparent); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.lh-val-t { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.lh-val-d { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.lh-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.lh-step { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.lh-step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--on-fill); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.lh-arrow { color: var(--ink-soft); }
.lh-note { font-size: 11.5px; color: var(--good); font-weight: 600; }
@media (max-width: 900px) {
  .login-layout { flex-direction: column-reverse; gap: 28px; max-width: 440px; }
  .login-hero { width: 100%; }
  .lh-head { font-size: 24px; }
}

/* AI Insights card (dashboard) */
.ai-card { overflow: hidden; }
.ai-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; user-select: none; }
.ai-head:hover { background: var(--panel-2); }
.ai-title { display: flex; align-items: center; gap: 8px; }
.ai-badge { background: linear-gradient(135deg, #6a5cff, #b44cff); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; }
.ai-title b { font-size: 14px; }
.ai-live { font-size: 10.5px; color: var(--good); font-weight: 700; }
.ai-teaser { max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.ai-chev { color: var(--ink-soft); font-size: 12px; width: 16px; text-align: center; }
.ai-card .ai-body { display: none; padding: 0 16px 16px; }
.ai-card.open .ai-body { display: block; }
.ai-card.open .ai-teaser { display: none; }
.ai-ins { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; }
.ai-ins-ic { flex: none; width: 22px; text-align: center; }
.ai-sec-h { font-weight: 700; font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; }
.ai-chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; text-align: center; min-width: 84px; }
.ai-chip b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.ai-chip span { font-size: 11px; color: var(--ink-soft); }
.ai-clsrow:hover { background: var(--panel-2); border-radius: 8px; }
.ai-acts { margin: 0; padding-left: 18px; }
.ai-acts li { font-size: 13px; margin: 5px 0; line-height: 1.4; }

/* responsive */
/* ---- mobile: sidebar becomes a slide-in drawer, header stays uncluttered -- */
.nav-backdrop { display: none; }
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .side {
    position: fixed; top: 0; left: 0; height: 100vh; width: 264px; max-width: 84vw;
    z-index: 60; transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 2px 0 20px rgba(0,0,0,.22); flex-direction: column;
  }
  .app.mobile-nav-open .side { transform: translateX(0); }
  .nav { flex-direction: column; flex-wrap: nowrap; }
  .nav a { font-size: 14px; padding: 11px 12px; }               /* comfortable touch targets */
  .side-foot { justify-content: flex-start; }
  /* the icon-rail collapse doesn't apply on phones — the drawer always shows labels */
  .app.nav-collapsed .side { transform: translateX(-100%); }
  .app.nav-collapsed.mobile-nav-open .side { transform: translateX(0); }
  .app.nav-collapsed .brand { justify-content: flex-start; padding: 14px 14px 12px; }
  .app.nav-collapsed .brand > div { display: block; }
  .app.nav-collapsed .nav a { justify-content: flex-start; padding: 11px 12px; }
  .app.nav-collapsed .nav a .label { display: inline; }

  .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app.mobile-nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  .topbar { padding: 0 10px; gap: 6px; }
  /* With the spacer gone the title has to do the pushing, or the identity cluster
     drifts left and leaves a hole on the right. */
  .topbar .spacer { display: none; }
  .topbar .ttl { flex: 1 1 auto; }
  .topbar h1 { font-size: 15px; }
  /* #pageSub and the h1's ellipsis are handled once, in the base .topbar block.
     Undo used to be hidden here while Redo was left behind — a lone Redo, which
     is worse than neither. Now that both are 32px icons the pair costs 66px and
     both stay. */
  /* (was: hide a since-removed Enter-marks button; the surviving .topbar .btn.primary.sm is Quick Actions and must stay visible) */
  .att-seg { min-width: 38px; min-height: 38px; }                /* comfortable touch targets on mobile */
  .view { padding: 12px 12px 64px; }
}
@media (max-width: 420px) {
  .brand b { font-size: 12px; }
  .nav a { font-size: 13.5px; }
  .view { padding: 10px 10px 64px; }
}

/* ======================================================================
   Pre-login marketing / landing page (.lp)
   ====================================================================== */
.lp { min-height: 100vh; background: var(--bg); color: var(--ink); }
.lp * { box-sizing: border-box; }
.lp-theme { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; width: 34px; height: 34px; font-size: 16px; cursor: pointer; line-height: 1; }
.lp-theme:hover { border-color: var(--brand); }
.powered-by { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-soft); }
.powered-by img, .powered-by svg { width: 18px; height: 18px; }
.powered-by b { color: var(--ink); font-weight: 700; }
.lp u { text-decoration-color: var(--brand-2); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.lp code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; font-size: .92em; }

/* nav */
.lp-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 10px 22px;
  background: color-mix(in srgb, var(--panel) 55%, transparent); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.lp-nav-demo { border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--panel) 55%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font: inherit; font-weight: 700; font-size: 13px; border-radius: 9px; padding: 7px 13px; cursor: pointer; }
.lp-nav-demo:hover { border-color: var(--brand); color: var(--brand); }
.lp-brand { display: flex; align-items: center; gap: 9px; }
.lp-brand img { width: 34px; height: 34px; }
.lp-brand b { font-size: 16px; color: var(--ink); letter-spacing: -.01em; line-height: 1; }
.lp-brand small { display: block; font-size: 10.5px; color: var(--ink-soft); }
.lp-navlinks { display: flex; gap: 20px; margin-left: auto; }
.lp-navlinks a { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.lp-navlinks a:hover { color: var(--brand); }
.lp-nav > .btn { margin-left: 8px; }

/* hero */
.lp-hero { display: grid; grid-template-columns: 1.25fr .85fr; gap: 40px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 54px 24px 40px; border-radius: 0 0 22px 22px;
  background:
    linear-gradient(color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 95%, transparent)),
    radial-gradient(1100px 460px at 20% -10%, color-mix(in srgb, var(--brand) 16%, var(--bg)), transparent),
    url(../assets/scenes/bg.jpg) center/cover no-repeat; }
.lp-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent); padding: 4px 11px; border-radius: 20px; margin-bottom: 16px; }
.lp-h1 { font-size: 40px; line-height: 1.08; letter-spacing: -.025em; font-weight: 800; margin: 0 0 16px; }
.lp-lead { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); max-width: 54ch; margin: 0 0 22px; }
.lp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.lp-cta-row .btn { padding: 11px 20px; font-size: 14px; }
.btn.ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.btn.ghost:hover { background: var(--panel-2); }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip { font-size: 12px; font-weight: 600; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.lp-hero-login { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.lp-login-tag { font-size: 12px; font-weight: 700; color: var(--brand); text-align: center; margin-bottom: 4px; }
.lp-login-foot { font-size: 10.5px; color: var(--ink-soft); text-align: center; margin-top: 10px; }
/* the injected sign-in card, made compact inside the hero */
.lp .login-card { width: 100%; margin: 0; padding: 18px 18px 20px; box-shadow: none; border: none; background: transparent; }
.lp .login-card img { width: 42px; height: 42px; margin-bottom: 6px; }
.lp .login-card h2 { font-size: 16px; }
.login-banner2 { position: relative; height: 132px; border-radius: 14px; overflow: hidden; margin-bottom: 12px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.login-banner2::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,15,25,.12), rgba(10,15,25,.5)); }
.login-banner2 .lb-badge { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 10px 26px rgba(0,0,0,.42); }
.lp .login-card .lb-badge img.lb-logo { width: 54px; height: 54px; margin: 0; }

/* stat band */
.lp-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; max-width: 1120px; margin: 8px auto; padding: 0 24px; }
.lp-band-item { text-align: center; padding: 16px 8px; }
.lp-band-item b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--brand); }
.lp-band-item span { font-size: 12px; color: var(--ink-soft); }

/* sections */
.lp-sec { max-width: 1120px; margin: 0 auto; padding: 52px 24px; }
.lp-sec-alt { max-width: none; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-sec-alt > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.lp-sec-head { text-align: center; margin-bottom: 30px; }
.lp-sec-head h2 { font-size: 27px; letter-spacing: -.02em; font-weight: 780; margin: 0 0 8px; }
.lp-sec-head p { font-size: 14px; color: var(--ink-soft); margin: 0; }

/* problem → solution cards */
.lp-prob-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.lp-prob { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.lp-prob:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 12%, transparent); }
.lp-prob-ic { flex: none; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--panel-2)); transition: transform .2s ease, background .2s ease; }
.lp-prob-ic svg { width: 30px; height: 30px; display: block; }
.lp-prob:hover .lp-prob-ic { transform: translateY(-2px) scale(1.05); background: color-mix(in srgb, var(--brand) 16%, var(--panel-2)); }

/* website editor — layout picker thumbnails */
.ws-arch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; max-height: 264px; overflow: auto; padding: 2px; }
.ws-arch { padding: 0; border: 2px solid var(--line); border-radius: 9px; background: var(--panel); cursor: pointer; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease; }
.ws-arch:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.ws-arch.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.ws-arch-thumb { width: 100%; aspect-ratio: 200 / 130; line-height: 0; background: var(--panel-2); }
.ws-arch-thumb svg { display: block; width: 100%; height: 100%; }
.ws-arch-name { font-size: 10.5px; font-weight: 700; color: var(--ink); padding: 4px 5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-prob-b p { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 3px 0 10px; }
.lp-x { font-size: 12px; font-weight: 800; color: var(--bad); text-transform: uppercase; letter-spacing: .03em; }
.lp-v { font-size: 12px; font-weight: 800; color: var(--good); text-transform: uppercase; letter-spacing: .03em; }
.lp-save { display: inline-block; font-size: 12px; font-weight: 700; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); border-radius: 8px; padding: 5px 10px; margin-top: 2px; }
.lp-prob-b { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.lp-prob-b b { font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.lp-fix { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.lp-prob-b .lp-save { align-self: flex-start; margin-top: 6px; }

/* time table */
.lp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.lp-table { width: 100%; border-collapse: collapse; background: var(--panel); min-width: 560px; }
.lp-table th, .lp-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.lp-table thead th { background: var(--panel-2); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.lp-table tbody tr:last-child td { border-bottom: none; }
.lp-table td:nth-child(2) { color: var(--bad); }
.lp-table td:nth-child(3) { color: var(--good); font-weight: 600; }
.lp-pill { display: inline-block; font-weight: 800; font-size: 12px; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); border-radius: 20px; padding: 3px 10px; }
.lp-time-note { text-align: center; font-size: 15px; color: var(--ink); margin-top: 22px; }

/* feature suite */
.lp-feat-h { font-size: 14px; font-weight: 800; margin: 8px 0 12px; }
.lp-feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; margin-bottom: 24px; }
.lp-feat { display: flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px; }
.lp-feat i { font-size: 18px; font-style: normal; line-height: 1; flex: 0 0 auto; }
.lp-feat b { font-size: 12.5px; font-weight: 700; }
.lp-feat span { display: none; }
.lp-feat-soft .lp-feat { background: var(--panel-2); border-style: dashed; }

/* mizoram */
.lp-miz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.lp-miz { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 11px; padding: 15px 16px; }
.lp-miz b { font-size: 14px; }
.lp-miz p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 5px 0 0; }

/* white-label */
.lp-white { background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 92%, #000), var(--brand-2)); color: #fff; max-width: none; }
.lp-white-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.lp-white .lp-eyebrow { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.lp-white h2 { font-size: 28px; margin: 0 0 12px; letter-spacing: -.02em; }
.lp-white u { text-decoration-color: #ffd873; }
.lp-white-copy > p { font-size: 14.5px; line-height: 1.55; opacity: .95; }
.lp-white-list { margin: 14px 0 0; padding-left: 0; list-style: none; }
.lp-white-list li { font-size: 13.5px; padding: 5px 0 5px 26px; position: relative; }
.lp-white-list li::before { content: '✓'; position: absolute; left: 0; font-weight: 800; color: #ffd873; }
.lp-white code { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); color: #fff; }
.lp-white-card { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 16px; padding: 20px; }
.lp-wc-row { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.lp-wc-row img { width: 46px; height: 46px; background: #fff; border-radius: 10px; padding: 4px; }
.lp-wc-line { height: 1px; background: rgba(255,255,255,.25); margin: 16px 0; }
.lp-wc-mock { background: #fff; color: #1a2230; border-radius: 10px; padding: 16px; text-align: center; }
.lp-wc-mockhead { font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.lp-wc-mocksub { font-size: 11px; color: #5a6678; margin-top: 3px; }

/* referral bonus */
.lp-refer-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.lp-refer h2 { font-size: 28px; margin: 0 0 12px; letter-spacing: -.02em; }
.lp-refer u { text-decoration-color: #ffd873; text-underline-offset: 3px; }
.lp-refer-copy > p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.lp-refer-list { margin: 14px 0 18px; padding-left: 0; list-style: none; }
.lp-refer-list li { font-size: 13.5px; padding: 5px 0 5px 26px; position: relative; }
.lp-refer-list li::before { content: '🎁'; position: absolute; left: 0; font-size: 13px; }
.lp-refer-note { margin: 10px 0 0; }
.lp-refer-art { background: linear-gradient(150deg, rgba(255,216,115,.16), var(--panel-2)); border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; text-align: center; }
.lp-refer-badge { font-size: 40px; line-height: 1; }
.lp-refer-chain { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 16px 0 10px; }
.lp-refer-chain span { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; }
.lp-refer-chain em { font-style: normal; color: var(--brand); font-weight: 800; }
.lp-refer-credit { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--brand); }
@media (max-width: 760px) { .lp-refer-in { grid-template-columns: 1fr; } }

/* pricing */
.lp-bill { display: flex; justify-content: center; gap: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 24px; padding: 4px; width: max-content; margin: 0 auto 26px; }
.lp-bill-btn { border: none; background: transparent; color: var(--ink-soft); font: inherit; font-weight: 700; font-size: 13px; padding: 8px 18px; border-radius: 20px; cursor: pointer; }
.lp-bill-btn.active { background: var(--brand); color: var(--on-fill); }
.lp-bill-btn em { font-style: normal; font-size: 11px; opacity: .85; }
.lp-price-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; max-width: 860px; margin: 0 auto; }
.lp-price-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.lp-price-main { border: 2px solid var(--brand); }
.lp-price-tag { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.lp-price-big { font-size: 40px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 2px; color: var(--brand); }
.lp-price-big span { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.lp-price-sub { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 16px; }
.lp-inc { list-style: none; padding: 0; margin: 0 0 18px; }
.lp-inc li { font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.lp-calc-n { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.lp-calc-n span { color: var(--brand); }
.lp-price-calc input[type=range] { width: 100%; accent-color: var(--brand); margin-bottom: 14px; }
.lp-calc-total { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.lp-calc-save { margin-top: 12px; font-size: 12.5px; color: var(--good); font-weight: 600; background: color-mix(in srgb, var(--good) 10%, transparent); border-radius: 8px; padding: 8px 10px; }
.lp-calc-hint { font-size: 11px; color: var(--ink-soft); margin-top: 8px; }
.lp-2yr { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; max-width: 860px; margin: 18px auto 0; position: relative;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 16px; padding: 20px 24px; }
.lp-2yr-badge { position: absolute; top: -11px; left: 22px; background: var(--accent); color: #3a2b06; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; }
.lp-2yr-copy { flex: 1; min-width: 260px; }
.lp-2yr-copy b { font-size: 15px; }
.lp-2yr-copy p { font-size: 13px; color: var(--ink-soft); margin: 5px 0 0; line-height: 1.5; }
.lp-2yr .btn { flex: none; }
.lp-fineprint { max-width: 860px; margin: 16px auto 0; font-size: 11.5px; color: var(--ink-soft); text-align: center; line-height: 1.5; }

/* real-photo gallery */
.lp-gallery { max-width: 1120px; margin: 0 auto; padding: 56px 24px; }
/* one-at-a-time photo stage (not an all-at-once grid) */
.lp-gal-stage { position: relative; max-width: 880px; margin: 0 auto; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--panel-2); }
.lp-gal-one { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.lp-gal-one.on { opacity: 1; }
.lp-gal-one img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-gal-one figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 42px 18px 16px; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.66)); }
.lp-gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.4); color: #fff; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.lp-gal-arrow:hover { background: rgba(0,0,0,.66); }
.lp-gal-arrow.prev { left: 12px; } .lp-gal-arrow.next { right: 12px; }
.lp-gal-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; justify-content: center; gap: 6px; }
.lp-gal-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.5); transition: all .2s; }
.lp-gal-dots button.on { background: #fff; width: 20px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .lp-gal-one { transition: none; } }

/* final + footer */
.lp-final { text-align: center; padding: 56px 24px; background: var(--panel); border-top: 1px solid var(--line); }
.lp-final h2 { font-size: 28px; letter-spacing: -.02em; margin: 0 0 8px; }
.lp-final p { color: var(--ink-soft); margin: 0 0 20px; }
.lp-foot { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: 1120px; margin: 0 auto; padding: 26px 24px 40px; }
.lp-foot img { width: 30px; height: 30px; }
.lp-foot span { font-size: 12px; color: var(--ink-soft); }
.lp-powered { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-soft); padding-left: 12px; border-left: 1px solid var(--line); }
.lp-powered svg { color: var(--brand); }
.lp-powered b { color: var(--ink); font-weight: 800; letter-spacing: .01em; }
/* AiAwt Apps company mark — swaps black↔white with the theme */
.lp-powered .aiawt-mark { width: auto; height: 16px; vertical-align: -3px; opacity: .9; }
.aiawt-dk { display: none; }
[data-theme="dark"] .aiawt-lt { display: none; }
[data-theme="dark"] .aiawt-dk { display: inline; }

/* ── Transformation carousel (landing) — mobile-first ── */
.lp-transform { padding: 44px 0; }
.lp-tf-head { text-align: center; margin: 0 auto 22px; max-width: 560px; }
.lp-tf-head h2 { font-size: 1.5rem; margin: 0 0 6px; letter-spacing: -.5px; }
.lp-tf-head p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.lp-car { display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 0 auto; }
.lp-car-view { overflow: hidden; flex: 1; border-radius: var(--radius); }
.lp-car-track { display: flex; transition: transform .35s cubic-bezier(.4,0,.2,1); will-change: transform; }
.lp-slide { min-width: 100%; padding: 8px 6px; }
.lp-tf { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lp-tf-panel { width: 100%; max-width: 320px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; text-align: center; box-shadow: var(--shadow); }
.lp-tf-panel.after { border-color: var(--brand-2); }
.lp-tf-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.lp-tf-tag.good { color: var(--good); }
.lp-tf-art { font-size: 2.8rem; line-height: 1.2; margin-top: 6px; }
/* The "…and much more" slide was written with its OWN class names (.lp-tf-more /
   .lp-tf-morein) while every sibling slide uses .lp-tf-panel — and of that pair,
   only .lp-tf-art was ever given a rule. So the container stayed an UNSTYLED div
   and its <b>, <span> and <button> flowed as inline text: the heading ran
   straight into the feature list ("…and much moreAttendance · fees · …") and the
   button came to rest ON TOP of the words beside it. Narrow screens made it
   obvious; it was wrong at every width.
   Same card treatment as the siblings, laid out as a column so a button can
   never share a line with text. */
.lp-tf-more { width: 100%; display: flex; justify-content: center; }
.lp-tf-morein {
  width: 100%; max-width: 320px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; text-align: center; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.lp-tf-morein b { font-size: 1.05rem; }
.lp-tf-morein span { color: var(--ink-soft); font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.lp-tf-morein .btn { width: 100%; max-width: 220px; margin-top: 2px; min-height: 44px; }
/* --- transform mini-"screenshots": crafted, offline, no external assets --- */
.lp-shot { margin-top: 9px; height: 158px; overflow: hidden; border-radius: 10px; text-align: left;
  border: 1px solid rgba(0,0,0,.10); box-shadow: 0 3px 12px rgba(0,0,0,.14);
  position: relative; user-select: none; font: 500 9px/1.35 system-ui, "Segoe UI", sans-serif; }
/* handwritten register on ruled paper */
.lp-shot.paper { background: #fbf7ea; padding: 9px 10px 9px 24px; color: #26456b;
  font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive; font-size: 11px;
  background-image: repeating-linear-gradient(#fbf7ea 0 19px, #cfe0ec 19px 20px); transform: rotate(-1deg); }
.lp-shot.paper::before { content:""; position:absolute; left:15px; top:0; bottom:0; width:1px; background:#e2a0a0; }
.lp-shot.paper .h { display:flex; justify-content:space-between; font-weight:700; text-decoration:underline; margin-bottom:2px; }
.lp-shot.paper .r { display:flex; justify-content:space-between; line-height:20px; }
.lp-shot.paper .r span:last-child { color:#b0322b; }
/* clean document: marksheet / report card */
.lp-shot.doc { background:#fff; color:#1a2230; }
.lp-shot.doc .top { background: var(--brand-2); color:#fff; padding:7px 9px; display:flex; align-items:center; gap:7px; }
.lp-shot.doc .crest { width:16px; height:16px; border-radius:50%; flex:0 0 auto;
  background: rgba(255,255,255,.28); box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset; }
.lp-shot.doc .top b { display:block; font-size:9px; font-weight:800; line-height:1.2; }
.lp-shot.doc .top small { display:block; font-size:6.5px; letter-spacing:.5px; opacity:.9; font-weight:700; }
.lp-shot.doc table { width:100%; border-collapse:collapse; }
.lp-shot.doc th, .lp-shot.doc td { padding:2.5px 9px; border-bottom:1px solid #eef1f5; font-size:8.5px; }
.lp-shot.doc th { color:#8a93a3; font-size:6.5px; text-transform:uppercase; letter-spacing:.4px; text-align:left; }
.lp-shot.doc td:last-child, .lp-shot.doc th:last-child { text-align:right; }
.lp-shot.doc .tot td { font-weight:800; border-top:1px solid #d9dee6; border-bottom:none; }
.lp-shot.doc .div { display:inline-block; margin:6px 9px; padding:2px 8px; border-radius:20px;
  background:#e7f6ec; color:#1a7f45; font-weight:800; font-size:7.5px; letter-spacing:.2px; }
/* WhatsApp chat (marks in / reminder out) */
.lp-shot.wa { background:#e5ddd5; }
.lp-shot.wa .bar { background:#075e54; color:#fff; padding:6px 9px; font-size:8px; font-weight:700; display:flex; align-items:center; gap:6px; }
.lp-shot.wa .bar .av { width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,.3); flex:0 0 auto; }
.lp-shot.wa .msgs { padding:8px; display:flex; flex-direction:column; gap:6px; }
.lp-shot.wa .b { max-width:86%; padding:5px 7px; border-radius:8px; font-size:8px; line-height:1.4;
  color:#111b21; box-shadow:0 1px 1px rgba(0,0,0,.10); }
.lp-shot.wa .b.in { background:#fff; align-self:flex-start; border-top-left-radius:2px; }
.lp-shot.wa .b.out { background:#dcf8c6; align-self:flex-end; border-top-right-radius:2px; }
.lp-shot.wa .b .t { display:block; font-size:6.5px; color:#667781; text-align:right; margin-top:2px; }
.lp-shot.wa .tick { color:#34b7f1; font-weight:700; }
/* textbook page with a phone capturing it */
.lp-shot.book { background:#f3ede2; padding:13px 12px; }
.lp-shot.book .ln { height:4px; width:56%; background:#d8cebd; border-radius:2px; margin-bottom:7px; }
.lp-shot.book .ln.s { width:40%; }
.lp-shot.book .phone { position:absolute; right:13px; top:12px; width:60px; height:120px; border-radius:11px;
  background:#11151c; border:2px solid #2a2f3a; box-shadow:0 8px 18px rgba(0,0,0,.4); transform:rotate(5deg); }
.lp-shot.book .phone .cam { position:absolute; inset:8px 6px 6px; border-radius:6px;
  background:linear-gradient(180deg,#3a4658,#1c2431); }
.lp-shot.book .phone .cam::after { content:"◉"; position:absolute; right:5px; bottom:3px; color:#ff5a5a; font-size:9px; }
/* homework question list */
.lp-shot.hw { background:#fff; color:#22292f; padding:9px 10px; }
.lp-shot.hw .qh { display:flex; justify-content:space-between; font-size:8px; font-weight:800; color:var(--brand-2); margin-bottom:7px; }
.lp-shot.hw .qh span:last-child { color:var(--accent); font-weight:700; }
.lp-shot.hw .q { display:flex; gap:6px; align-items:flex-start; margin-bottom:6px; }
.lp-shot.hw .q .n { flex:0 0 auto; width:13px; height:13px; border-radius:4px; background:#eef1f5;
  color:#55606e; font-size:7.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.lp-shot.hw .q .qt { flex:1; font-size:8px; line-height:1.4; color:#2b333c; }
/* fee/attendance ledger */
.lp-shot.led { background:#fff; color:#22292f; padding:10px; }
.lp-shot.led .lh { font-size:8px; font-weight:800; color:#55606e; margin-bottom:6px; }
.lp-shot.led .row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid #f0f2f5; font-size:8.5px; }
.lp-shot.led .due { background:#fdecec; color:#c0392b; font-weight:800; padding:1px 7px; border-radius:10px; font-size:7.5px; }
.lp-shot.led .abs { background:#fff4e5; color:#b9770e; font-weight:800; padding:1px 7px; border-radius:10px; font-size:7.5px; }
@media (min-width: 720px) { .lp-shot { max-width: 300px; } }
.lp-tf-arrow { font-size: 1.5rem; color: var(--accent); transform: rotate(90deg); }
.lp-tf-cap { text-align: center; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; margin: 14px auto 0; max-width: 460px; }
.lp-car-arrow { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; display: none; }
.lp-car-arrow:hover { border-color: var(--brand-2); }
.lp-car-dots { display: flex; justify-content: center; gap: 0; margin-top: 14px; }
.lp-car-dots button { width: 24px; height: 24px; border: none; background: transparent; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.lp-car-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: width .3s, background .3s; }
.lp-car-dots button.on::before { background: var(--brand-2); width: 22px; border-radius: 4px; }
@media (min-width: 700px) {
  .lp-tf-head h2 { font-size: 2rem; }
  .lp-tf { flex-direction: row; justify-content: center; gap: 18px; }
  .lp-tf-arrow { transform: none; }
  .lp-car-arrow { display: block; }
}
@media (prefers-reduced-motion: reduce) { .lp-car-track { transition: none; } }
/* global reduced-motion guard — honours the OS setting for every animation/transition
   (0.001ms, not 0, so transitionend still fires for JS that awaits it) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 860px) {
  .lp-navlinks { display: none; }
  .lp-brand img { width: 40px; height: 40px; }
  .lp-brand small { display: none; }
  .lp-brand b { font-size: 16.5px; }
  .lp-nav { gap: 8px; padding: 9px 12px; }
  .lp-lang { margin-left: auto; }
  .lp-theme { display: none; }
  .lp-nav-demo { padding: 7px 10px; font-size: 12px; }
  .lp-nav-signin.btn { padding: 7px 11px; font-size: 12px; }
  .lp-hero { grid-template-columns: 1fr; padding-top: 32px; }
  .lp-hero-login { order: -1; max-width: 380px; }
  .lp-h1 { font-size: 30px; }
  .lp-band { grid-template-columns: repeat(2, 1fr); }
  .lp-white-in, .lp-price-grid { grid-template-columns: 1fr; }
  .lp-gal-stage { aspect-ratio: 4 / 3; border-radius: 14px; }
  .lp-gal-one figcaption { font-size: 13.5px; padding: 34px 14px 14px; }
  .lp-gal.g-wide { grid-column: span 2; grid-row: span 1; }
  .lp-gal.g-big { grid-column: span 2; grid-row: span 2; }
  .lp-gal.g-tall { grid-column: span 1; grid-row: span 2; }
}

/* ---- Attendance module ---- */
.att-table td { vertical-align: middle; }
.att-segs { display: inline-flex; gap: 4px; }
.att-seg { width: 30px; height: 27px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  border-radius: 6px; font-weight: 800; font-size: 12px; cursor: pointer; transition: .1s; }
.att-seg:hover { border-color: var(--brand-2); color: var(--ink); }
.att-seg.on.P { background: var(--good); color: var(--on-fill); border-color: var(--good); }
.att-seg.on.A { background: var(--bad); color: var(--on-fill); border-color: var(--bad); }
.att-seg.on.L { background: var(--warn); color: var(--on-fill); border-color: var(--warn); }

/* landing: Mizo toggle + AiEng callout */
.lp-lang { border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-soft); font: inherit; font-weight: 800; font-size: 12px; border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.lp-lang:hover, .lp-lang.on { border-color: var(--brand); color: var(--brand); }
.lp-aieng-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: center; }
.lp-aieng-img { width: 100%; max-width: 240px; justify-self: center; filter: drop-shadow(0 8px 22px rgba(200,120,20,.28)); }
.lp-aieng-copy h2 { font-size: 28px; letter-spacing: -.02em; margin: 6px 0 12px; }
.lp-aieng-copy > p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); max-width: 54ch; }
.lp-aieng-mz { background: color-mix(in srgb, var(--accent) 12%, transparent); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; color: var(--ink) !important; margin: 12px 0 16px; }
@media (max-width: 760px) { .lp-aieng-in { grid-template-columns: 1fr; text-align: center; } .lp-aieng-copy > p { margin-inline: auto; } }

/* dashboard: top performers card */
.tp-sub { font-weight: 700; font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 4px; }
.tp-topper:hover, .dashboard .row[onclick]:hover { background: var(--panel-2); border-radius: 8px; }

/* landing: 🏆 Mizoram Merit Board */
.lp-merit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.lp-mcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.lp-mcard.own { border-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 40%), var(--panel); }
.lp-mc-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.lp-mc-head b { font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-mc-tag { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 999px; padding: 2px 9px; }
.lp-mc-tag.sample { color: var(--ink-soft); background: var(--panel-2); }
.lp-mc-meta { font-size: 12px; color: var(--ink-soft); margin: 3px 0 8px; }
.lp-mc-best { color: var(--accent); font-weight: 700; }
.lp-mc-list { list-style: none; margin: 0; padding: 0; }
.lp-mc-list li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; }
.lp-mc-list li span { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.lp-mc-more { margin-top: 9px; width: 100%; background: var(--panel-2); color: var(--brand); border: 1px solid var(--line); border-radius: 8px; padding: 7px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.lp-mc-more:hover { border-color: var(--brand); }
.lp-mc-ext { margin-top: 8px; }
.lp-mc-year { font-size: 12px; color: var(--ink-soft); margin: 8px 0 2px; }
.lp-mc-ext ol { list-style: none; margin: 0; padding: 0; }
.lp-mc-ext li { display: flex; gap: 6px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.lp-mc-ext li span { color: var(--ink-soft); margin-left: auto; white-space: nowrap; }
.lp-merit-note { font-size: 12px; color: var(--ink-soft); margin-top: 12px; text-align: center; }

/* landing footer: legal/trust links */
.lp-foot-links { display: block; margin-top: 3px; font-size: 12px; }
.lp-foot-links a { color: var(--ink-soft); text-decoration: none; }
.lp-foot-links a:hover { color: var(--brand); text-decoration: underline; }

/* footer: full AiAwt lockup (black on light, white on dark via aiawt-lt/dk) */
.lp-powered .aiawt-full, .aiawt-full { height: 52px !important; width: auto; vertical-align: middle; }

/* ===== landing v2: video hero + media marquee (mobile-first, snug) ===== */
/* ===== hero — calm, theme-native (no video, no perpetual motion) ===== */
.lp-hero2 { position: relative; isolation: isolate; overflow: hidden; padding: clamp(30px, 6vw, 72px) clamp(16px, 4vw, 44px) clamp(38px, 6vw, 76px); display: flex; align-items: center; }
/* soothing hero wash — soft directional gradient, no circular hotspots */
.lp-hero2-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    linear-gradient(178deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent 46%),
    linear-gradient(212deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%),
    var(--bg); }
.lp-hero2-in { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 50px); align-items: center; }
@media (min-width: 900px) { .lp-hero2-in { grid-template-columns: 1.12fr .88fr; } }
.lp-eyebrow2 { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent); display: inline-block; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.lp-h1-2 { color: var(--ink); font-size: clamp(31px, 5.4vw, 54px); line-height: 1.05; letter-spacing: -.03em; font-weight: 820; margin: 16px 0 14px; text-wrap: balance; }
.lp-h1-2 em { font-style: normal; background: linear-gradient(92deg, var(--brand), var(--brand-2) 55%, #12a35f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead2 { color: var(--ink-soft); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; max-width: 54ch; margin: 0 0 6px; }
/* smaller, italic English under the Mizo-first hero copy */
.lp-h-en { margin: -6px 0 14px; color: var(--ink-soft); font-style: italic; font-size: clamp(14px, 1.5vw, 17px); font-weight: 500; opacity: .82; line-height: 1.3; }
.lp-lead-en { margin: 0 0 22px; color: var(--ink-soft); font-style: italic; font-size: clamp(12.5px, 1.3vw, 14px); font-weight: 400; opacity: .72; line-height: 1.5; max-width: 54ch; }
.lp-lead-link { color: var(--brand); font-weight: 700; text-decoration: none; white-space: nowrap; border-bottom: 1.5px solid color-mix(in srgb, var(--brand) 38%, transparent); cursor: pointer; }
.lp-lead-link:hover { border-bottom-color: var(--brand); }
/* (removed dead landing CSS: .lp-journey / .lp-jp* / .lp-mods — unused after the hero declutter + capability-strip removal) */
.lp-cta2 { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-cta-demo, .lp-cta-start { border: 0; cursor: pointer; font-weight: 800; font-size: clamp(13.5px, 1.3vw, 15px); padding: 13px 22px; border-radius: 12px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; }
.lp-cta-demo { background: var(--brand); color: var(--on-fill); box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 32%, transparent); }
.lp-cta-start { background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); }
.lp-cta-demo:hover, .lp-cta-start:hover { transform: translateY(-2px); }
.lp-cta-start:hover { border-color: var(--brand); color: var(--brand); }
/* secondary CTA as a quiet text link (one primary button wins the hero) */
.lp-cta-textlink { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--brand); font-weight: 600; font-size: 14px; padding: 8px 6px; text-decoration: underline; text-underline-offset: 3px; }
.lp-cta-textlink:hover { transform: none; opacity: .8; }
@media (max-width: 560px) { .lp-cta-demo, .lp-cta-start { flex: 1 1 100%; } }
.lp-cta-note { margin: 14px 0 0; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; }
.lp-hero-strip { display: flex; gap: 10px; margin-top: 22px; max-width: 470px; }
.lp-hero-strip img { flex: 1; width: 0; height: 98px; object-fit: cover; border-radius: 14px; box-shadow: 0 6px 18px rgba(20, 40, 80, .16); transition: transform .25s ease; }
.lp-hero-strip img:hover { transform: translateY(-3px); }
@media (max-width: 720px) { .lp-hero-strip { max-width: none; } .lp-hero-strip img { height: 82px; } }
.lp-chips2 { margin-top: 16px; display: flex; gap: 7px; flex-wrap: wrap; }
.lp-chip2 { color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.lp-chip2.lp-chip-stat { background: color-mix(in srgb, #12a35f 12%, var(--panel)); border-color: color-mix(in srgb, #12a35f 40%, var(--line)); color: color-mix(in srgb, #0b6b3f 80%, var(--ink)); font-weight: 800; }
.lp-hero-right { position: relative; }
.lp-hero-right .lp-hero-login2 { position: relative; z-index: 1; }
/* (removed dead landing CSS: .lp-hero-doc — the "Statement of Marks" hero card removed this session) */
.lp-founding { background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-founding-in { max-width: 1120px; margin: 0 auto; padding: 15px 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.lp-fnd-badge { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #f59e0b, #f97316); padding: 7px 13px; border-radius: 999px; box-shadow: 0 6px 16px rgba(245,130,20,.3); }
.lp-fnd-copy { flex: 1 1 300px; margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.lp-fnd-copy b { color: var(--ink); }
.lp-fnd-marks { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-fnd-marks span { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; }
/* value band — "worth ₹3–5 lakh, free" + easy integration/migration/setup/guides */
.lp-chip2.lp-chip-value { background: color-mix(in srgb, var(--accent) 15%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: color-mix(in srgb, var(--accent) 72%, var(--ink)); font-weight: 800; }
.lp-value { max-width: 1120px; margin: 14px auto; padding: 0 24px; }
.lp-value-in { background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 12%, var(--panel)), var(--panel) 62%); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow); }
.lp-value-hero { text-align: center; max-width: 660px; margin: 0 auto 24px; }
.lp-value-eyebrow { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.lp-value-strike { font-size: clamp(19px, 3.6vw, 28px); font-weight: 800; color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 72%, transparent); text-decoration-thickness: 2px; margin: 3px 0 4px; }
.lp-value-plus { font-size: clamp(12.5px, 1.8vw, 15px); font-weight: 700; color: var(--ink-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 55%, transparent); margin: 2px 0 6px; }
.lp-value-big { font-size: clamp(30px, 6vw, 50px); font-weight: 850; letter-spacing: -.03em; line-height: 1.02; color: var(--ink); }
.lp-value-big em { font-style: normal; background: linear-gradient(92deg, var(--good), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-value-sub { font-size: clamp(14px, 1.6vw, 16px); color: var(--ink-soft); line-height: 1.55; margin: 12px auto 0; max-width: 56ch; }
.lp-value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 860px) { .lp-value-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .lp-value-grid { grid-template-columns: 1fr; } }
/* full-bleed picture cards (image fills the box; text on a dark scrim) */
.lp-value-c { position: relative; isolation: isolate; min-height: 210px; border: 1px solid var(--line); border-radius: 14px; padding: 15px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background-color: #0b1024; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 6px 18px rgba(16, 24, 48, .12); }
.lp-value-c::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(179deg, rgba(8, 12, 30, 0) 22%, rgba(8, 12, 30, .42) 52%, rgba(6, 9, 22, .86) 100%); }
.lp-value-c b { position: relative; display: block; font-size: 15px; margin-bottom: 4px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.lp-value-c span { position: relative; font-size: 12.5px; color: rgba(255, 255, 255, .92); line-height: 1.5; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }

/* weather sky styling now lives in js/sky.js (reusable Sky module) */

/* "Explore the demo school" typing splash → seeded demo, no password */
.lp-demo-splash { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, #1a2450, #070b22); animation: dsFade .22s ease; }
@keyframes dsFade { from { opacity: 0; } to { opacity: 1; } }
.lp-ds-card { width: min(342px, 88vw); background: #fff; border-radius: 18px; padding: 26px 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); text-align: center; }
.lp-ds-logo { font-size: 40px; line-height: 1; }
.lp-ds-title { font-weight: 800; font-size: 16px; margin: 8px 0 18px; color: #14213d; }
.lp-ds-f { text-align: left; margin-bottom: 12px; }
.lp-ds-f label { display: block; font-size: 11px; font-weight: 700; color: #6b7688; margin-bottom: 4px; }
.lp-ds-in { border: 1.5px solid #d7deea; border-radius: 9px; padding: 9px 11px; min-height: 20px; font: 600 14px/1.2 ui-monospace, Menlo, Consolas, monospace; color: #14213d; display: flex; align-items: center; }
.lp-ds-cur { width: 2px; height: 15px; background: #2e6fc4; margin-left: 1px; animation: dsBlink 1s step-end infinite; }
@keyframes dsBlink { 50% { opacity: 0; } }
.lp-ds-btn { margin-top: 6px; background: #2e6fc4; color: #fff; font-weight: 800; padding: 11px; border-radius: 10px; font-size: 14px; transition: background .25s; }
.lp-ds-btn.go { background: #12a35f; }

/* hairline scrollbars everywhere (ultra-thin on the sidebar rail) */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 24%, transparent) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 36%, transparent); }
::-webkit-scrollbar-corner { background: transparent; }
.side, .side * { scrollbar-width: thin; }
.side::-webkit-scrollbar { width: 4px; height: 4px; }
@media (max-width: 640px) { .lp-fnd-copy { flex-basis: 100%; } }
.lp-hero-login2 { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 16px; box-shadow: 0 20px 50px rgba(15,25,50,.14); min-width: 0; }
.lp-hero-login2 .login-card { border-radius: 16px; }
.lp-hero-login2 .btn.primary { border-radius: 12px; }
.lp-hero-login2 .login-card h2, .lp-hero-login2 .lp-login-tag { color: var(--ink); }
.lp-hero-login2 .lp-login-tag { color: var(--brand); font-weight: 700; }
.lp-hero-login2 .lp-login-foot, .lp-hero-login2 .muted, .lp-hero-login2 .small { color: var(--ink-soft); }
.lp-hero-login2 input:not([type="checkbox"]) { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; }
.lp-hero-login2 input:not([type="checkbox"])::placeholder { color: var(--ink-soft); }
.lp-hero-login2 input:not([type="checkbox"]):focus { border-color: var(--brand); background: var(--panel); outline: none; }
.lp-login-tag:empty, .lp-login-foot:empty { display: none; }
@media (max-width: 720px) { .lp-hero-right { order: 1; } .lp-hero2-copy { order: 0; } }

.lp-templates { padding: clamp(30px, 5vw, 66px) clamp(16px, 4vw, 32px) clamp(34px, 5vw, 70px); max-width: 1180px; margin: 0 auto; }
/* horizontal carousel: bigger cards, snap-scroll, swipe on touch */
.lp-carousel { position: relative; }
.lp-tpl-grid { display: flex; gap: 22px; margin-top: 24px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scroll-padding-inline: 4px; padding: 10px 4px 22px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 45%, transparent) transparent; }
.lp-tpl-grid::-webkit-scrollbar { height: 8px; }
.lp-tpl-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 40%, transparent); border-radius: 999px; }
.lp-tpl-grid::-webkit-scrollbar-track { background: transparent; }
.lp-car-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel, #fff); color: var(--brand); font: 400 26px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 8px 24px rgba(15,25,50,.22); display: flex; align-items: center; justify-content: center; padding-bottom: 3px; transition: opacity .16s ease, transform .16s ease, background .16s ease, color .16s ease; }
.lp-car-btn.prev { left: -8px; }
.lp-car-btn.next { right: -8px; }
.lp-car-btn:hover { background: var(--brand); color: var(--on-fill); }
.lp-car-btn.off { opacity: .3; pointer-events: none; }
.lp-tpl-swipe { text-align: center; margin-top: 10px; color: var(--muted, #6b7480); font: 600 12.5px/1 system-ui, sans-serif; }
@media (min-width: 981px) { .lp-tpl-swipe { display: none; } }
.lp-tpl-foot { text-align: center; margin-top: 24px; }
.lp-tpl { --cw: 440px; --sc: 1.4667; position: relative; flex: 0 0 var(--cw); width: var(--cw); aspect-ratio: 4/3; scroll-snap-align: start; background: var(--tb); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(15,25,50,.12); font-family: system-ui, sans-serif; transition: transform .18s ease, box-shadow .18s ease; }
.lp-tpl:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(15,25,50,.2); }
/* the preview is authored at a fixed 300×225 canvas, then uniformly scaled to
   fill the (bigger) card — so enlarging never distorts the mini-website */
.lp-tpl .t-stage { position: absolute; top: 0; left: 0; width: 300px; height: 225px; transform-origin: top left; transform: scale(var(--sc)); display: flex; flex-direction: column; background: var(--tb); overflow: hidden; }
.lp-tpl .t-crest { flex: 0 0 auto; display: inline-flex; align-items: center; height: 16px; }
.lp-tpl .t-crest .tc { height: 16px; width: auto; display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.3)); }
.lp-tpl .t-crest .c1 { fill: var(--ta); }
.lp-tpl .t-crest .c2 { fill: #fff; }
.lp-tpl .t-crest .ring { fill: none; stroke: #fff; stroke-width: 1.3; }
.lp-tpl .t-cta { align-self: flex-start; font: 800 8px/1 system-ui, sans-serif; letter-spacing: .3px; color: #fff; background: var(--ta); padding: 4px 8px; border-radius: 5px; }
.lp-tpl .t-label { position: absolute; top: 10px; right: 10px; background: rgba(15,20,32,.82); color: #fff; font: 800 11px/1 system-ui, sans-serif; letter-spacing: .3px; padding: 6px 11px; border-radius: 20px; z-index: 3; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* 1 SPLIT */
.tpl-split .t-bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--tp); }
.tpl-split .t-bar b { color: #fff; font: 800 9px/1 system-ui; flex: 1; }
.tpl-split .t-nav { display: flex; gap: 8px; }
.tpl-split .t-nav a { color: rgba(255,255,255,.85); font: 600 7px/1 system-ui; }
.tpl-split .t-split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.tpl-split .t-sp-img { background-size: cover; background-position: center; }
.tpl-split .t-sp-txt { padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: var(--tb); }
.tpl-split .t-sp-txt b { color: var(--tp); font: 800 13px/1.1 system-ui; }
.tpl-split .t-sp-txt span { color: #4a5568; font: 500 8.5px/1.35 system-ui; }
/* 2 CENTERED */
.tpl-centered .t-cbar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 8px; background: var(--tp); }
.tpl-centered .t-nav { display: flex; gap: 8px; flex: 1; }
.tpl-centered .t-nav.l { justify-content: flex-end; }
.tpl-centered .t-nav.r { justify-content: flex-start; }
.tpl-centered .t-nav a { color: rgba(255,255,255,.85); font: 600 7px/1 system-ui; }
.tpl-centered .t-chero { flex: 1; min-height: 0; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 10px; }
.tpl-centered .t-chero small { color: var(--ta); font: 800 7px/1 system-ui; letter-spacing: 1.5px; }
.tpl-centered .t-chero b { color: #fff; font: 800 14px/1.15 system-ui; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.tpl-centered .t-chero .t-cta { align-self: center; }
.tpl-centered .t-row { display: flex; justify-content: center; gap: 12px; padding: 7px; background: var(--tb); }
.tpl-centered .t-row em { font-style: normal; color: color-mix(in srgb, var(--tp) 60%, #333); font: 700 7.5px/1 system-ui; }
/* 3 MAGAZINE */
.tpl-magazine .t-mhead { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 2px solid var(--tp); }
.tpl-magazine .t-mh-brand { display: flex; align-items: center; gap: 7px; }
.tpl-magazine .t-mhead b { color: var(--tp); font: 800 13px/1 Georgia, serif; letter-spacing: -.3px; }
.tpl-magazine .t-mhead span { color: #8a94a3; font: 600 7px/1 system-ui; }
.tpl-magazine .t-mgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 8px; }
.tpl-magazine .t-mgrid span { background-size: cover; background-position: center; border-radius: 3px; }
.tpl-magazine .t-mgrid .a { grid-row: span 2; }
.tpl-magazine .t-mfoot { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--tp); }
.tpl-magazine .t-mfoot em { font-style: normal; color: rgba(255,255,255,.9); font: 700 7.5px/1 system-ui; }
.tpl-magazine .t-mfoot .t-cta { margin-left: auto; }
/* 4 SIDEBAR */
.tpl-sidebar .t-side { flex: 1; display: grid; grid-template-columns: 30% 1fr; min-height: 0; }
.tpl-sidebar .t-rail { background: var(--tp); display: flex; flex-direction: column; gap: 7px; padding: 10px 9px; }
.tpl-sidebar .t-rail .t-crest { margin-bottom: 4px; }
.tpl-sidebar .t-rail a { color: rgba(255,255,255,.72); font: 600 8px/1 system-ui; }
.tpl-sidebar .t-rail a.on { color: #fff; font-weight: 800; }
.tpl-sidebar .t-main { display: flex; flex-direction: column; min-height: 0; background: var(--tb); }
.tpl-sidebar .t-mhero { flex: 1.4; min-height: 0; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 10px; }
.tpl-sidebar .t-mhero b { color: #fff; font: 800 12px/1.1 system-ui; text-shadow: 0 1px 5px rgba(0,0,0,.55); }
.tpl-sidebar .t-cards { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px; }
.tpl-sidebar .t-cards span { background-size: cover; background-position: center; border-radius: 4px; }
/* 5 FULL-BLEED */
.tpl-fullbleed .t-full { flex: 1; min-height: 0; background-size: cover; background-position: center; display: flex; flex-direction: column; padding: 11px 12px; }
.tpl-fullbleed .t-fulltop { display: flex; align-items: center; gap: 7px; }
.tpl-fullbleed .t-fulltop b { color: #fff; font: 800 9.5px/1 system-ui; flex: 1; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.tpl-fullbleed .t-dots { display: flex; gap: 4px; }
.tpl-fullbleed .t-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.7); }
.tpl-fullbleed .t-fullcopy { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.tpl-fullbleed .t-fullcopy b { color: #fff; font: 800 17px/1.08 system-ui; letter-spacing: -.3px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.tpl-fullbleed .t-fullcopy span { color: rgba(255,255,255,.9); font: 500 8.5px/1.3 system-ui; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* 6 MINIMAL */
.tpl-minimal { background: #fff; }
.tpl-minimal .t-minbar { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: 1px solid #eef1f5; }
.tpl-minimal .t-crest .c1 { fill: var(--tp); }
.tpl-minimal .t-minbar b { color: var(--tp); font: 800 9px/1 system-ui; flex: 1; letter-spacing: .3px; }
.tpl-minimal .t-nav { display: flex; gap: 8px; }
.tpl-minimal .t-nav a { color: #9aa3b0; font: 600 7px/1 system-ui; }
.tpl-minimal .t-minhero { padding: 16px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.tpl-minimal .t-minhero b { color: #1a2230; font: 800 20px/1.02 Georgia, serif; letter-spacing: -.5px; }
.tpl-minimal .t-minhero span { color: #6b7480; font: 500 8.5px/1.35 system-ui; }
.tpl-minimal .t-minhero .t-cta { background: none; color: var(--ta); padding: 0; font-size: 9px; }
.tpl-minimal .t-minband { flex: 1; min-height: 24px; background-size: cover; background-position: center; margin: 6px 12px 12px; border-radius: 6px; }
@media (max-width: 980px) { .lp-tpl { --cw: 380px; --sc: 1.2667; } }
@media (max-width: 560px) { .lp-tpl { --cw: 300px; --sc: 1; } }
/* clickable template cards → open the builder pre-loaded with that design */
.lp-tpl { cursor: pointer; }
.lp-tpl:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.lp-tpl .t-use { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: var(--brand); color: var(--on-fill); font: 800 13px/1 system-ui, sans-serif; padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 22px rgba(15,25,50,.34); opacity: 1; transition: transform .16s ease, box-shadow .16s ease; z-index: 4; white-space: nowrap; pointer-events: none; }
.lp-tpl:hover .t-use, .lp-tpl:focus-visible .t-use { transform: translateX(-50%) translateY(-3px); box-shadow: 0 14px 30px rgba(15,25,50,.42); }
/* "try it now" strip */
.lp-try { max-width: 1120px; margin: 0 auto; padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lp-try-lead { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.lp-try-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-try-b { border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font: inherit; font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 10px; cursor: pointer; transition: transform .14s ease, border-color .14s ease, color .14s ease; }
.lp-try-b:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--brand); }
@media (max-width: 560px) { .lp-try-b { flex: 1 1 44%; } }
/* try-before-signup conversion banner (in-app, fixed bottom) */
.try-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 14px; max-width: min(680px, calc(100vw - 24px)); padding: 11px 12px 11px 18px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 14px 40px rgba(15,25,50,.28); }
.try-banner .tb-txt { font-size: 13px; color: var(--ink-soft); }
.try-banner .tb-txt b { color: var(--ink); }
.try-banner .tb-claim { flex: 0 0 auto; white-space: nowrap; }
.try-banner .tb-x { flex: 0 0 auto; border: 0; background: transparent; color: var(--ink-soft); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.try-banner .tb-x:hover { background: var(--panel-2); color: var(--ink); }
@media (max-width: 560px) { .try-banner { flex-wrap: wrap; bottom: 10px; } .try-banner .tb-txt { flex: 1 1 100%; } }
.lp { overflow-x: hidden; }

/* ===== roles & permissions matrix (team.js) ===== */
.pmx-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.pm-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.pm-table th, .pm-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.pm-table thead th { position: sticky; top: 0; background: var(--panel-2); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); z-index: 1; }
.pm-table td.pm-area, .pm-table th:first-child { text-align: left; position: sticky; left: 0; background: var(--panel); z-index: 1; }
.pm-table thead th:first-child { z-index: 2; }
.pm-table tbody tr:last-child td { border-bottom: 0; }
.pm-table td.pm-area b { font-weight: 700; }
.pm-sens { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); border-radius: 20px; padding: 1px 7px; vertical-align: middle; }
.pm-owner { color: var(--good); font-weight: 800; }
.pm-cell input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--brand); }
.pm-cell input:disabled { cursor: default; opacity: .55; }
.pm-cell.pm-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.pm-flag { color: var(--warn); font-weight: 800; }
.pm-warnbox { background: color-mix(in srgb, var(--warn) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 42%, var(--line)); border-radius: 10px; padding: 12px 14px; line-height: 1.5; }

/* ── platform inbox (notices AiduEd sends the school) ─────────────────────── */
.pm-wrap { position: fixed; top: 12px; right: 14px; z-index: 4000; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pm-bell { position: relative; border: 1px solid var(--line, #e5e8ef); background: var(--panel, #fff); border-radius: 999px; padding: 7px 12px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.12); font-size: 15px; }
.pm-badge { position: absolute; top: -5px; right: -5px; background: #d64545; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 999px; padding: 0 3px; }
.pm-panel { width: min(340px, 92vw); max-height: 70vh; overflow: auto; background: var(--panel, #fff); border: 1px solid var(--line, #e5e8ef); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.22); }
.pm-panel-h { padding: 10px 14px; border-bottom: 1px solid var(--line, #e5e8ef); font-size: 13px; }
.pm-item { padding: 11px 14px; border-bottom: 1px solid var(--line, #e5e8ef); border-left: 3px solid var(--line, #e5e8ef); }
.pm-item.pm-warn { border-left-color: #d69e1e; }
.pm-item.pm-action { border-left-color: #d64545; }
.pm-item-t { font-weight: 700; font-size: 13.5px; }
.pm-item-b { font-size: 12.5px; color: var(--ink-soft, #55607a); margin-top: 3px; white-space: pre-wrap; }
.pm-link { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--brand, #2e6fc4); }
.pm-dismiss { display: block; margin-top: 8px; border: none; background: var(--panel-2, #f2f4f9); border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--ink-soft, #55607a); }

/* ── Enter Marks · Type panel (fast answer-paper entry) ───────────────────── */
.ty-row{display:grid;grid-template-columns:44px 1fr 96px auto;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line);}
.ty-row:last-child{border-bottom:none;}
.ty-roll{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:13px;text-align:center;}
.ty-name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ty-mark{width:100%;text-align:center;font-size:17px;font-weight:700;padding:9px 8px;border:1.5px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);}
.ty-mark:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);}
.ty-mark.over{border-color:var(--bad);color:var(--bad);}
.ty-flag{font-size:11px;color:var(--bad);min-width:34px;white-space:nowrap;}

/* ── Enter Marks · Grid (Excel) view + voice ─────────────────────────────── */
.ty-gridwrap{overflow:auto;border:1px solid var(--line);border-radius:10px;max-height:70vh;}
.ty-grid{border-collapse:collapse;font-size:13px;min-width:100%;}
.ty-grid th{position:sticky;top:0;background:var(--panel-2);border-bottom:1px solid var(--line);padding:6px 8px;font-size:11px;text-align:center;white-space:nowrap;z-index:2;}
.ty-grid th.ty-gname{text-align:left;left:0;z-index:3;}
.ty-grid td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;}
.ty-grid td.ty-groll{padding:4px 8px;text-align:center;color:var(--ink-soft);font-size:12px;}
.ty-grid td.ty-gname{padding:4px 8px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;position:sticky;left:0;background:var(--panel);}
.ty-cell{width:56px;text-align:center;border:none;background:transparent;font-size:14px;font-weight:600;padding:7px 4px;color:var(--ink);}
.ty-cell:focus{outline:2px solid var(--brand);outline-offset:-2px;background:color-mix(in srgb,var(--brand) 8%,transparent);}
.ty-cell.over{color:var(--bad);}
.ty-heard{font-style:italic;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}