/* Nomica components v0.2 — CSS tham khảo cho preview, wireframe & bot Kỹ thuật. Chỉ dùng biến từ tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nm-color-bg);color:var(--nm-color-text);font-family:var(--nm-font-body);font-size:var(--nm-text-md);font-weight:var(--nm-weight-body);line-height:var(--nm-leading-body);transition:background var(--nm-duration-base) var(--nm-ease-standard)}
h1,h2,h3,h4{font-family:var(--nm-font-heading);font-weight:var(--nm-weight-heading);line-height:var(--nm-leading-heading);margin:0 0 var(--nm-space-3)}
h1{font-size:var(--nm-text-3xl)} h2{font-size:var(--nm-text-2xl)} h3{font-size:var(--nm-text-xl)} h4{font-size:var(--nm-text-lg)}
p{margin:0 0 var(--nm-space-3)}
[data-age],[data-surface],[data-theme]{font-family:var(--nm-font-body);font-weight:var(--nm-weight-body);line-height:var(--nm-leading-body);color:var(--nm-color-text)}
a{color:var(--nm-color-brand-text);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--nm-color-focus-ring);outline-offset:2px;border-radius:var(--nm-radius-xs)}
.nm-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Song ngữ: EN chính, VN phụ ---------- */
.nm-bi{display:inline-flex;flex-direction:column;gap:.1em}
.nm-bi__en{font-weight:inherit}
.nm-bi__vi{font-size:calc(1em * var(--nm-bi-vi-scale));color:var(--nm-color-text-secondary);font-weight:400;font-family:var(--nm-font-body)}
.nm-bi--inline{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 .5em}
.nm-bi--inline .nm-bi__vi::before{content:"· ";color:var(--nm-color-text-muted)}
[data-lang-mode="en"] .nm-bi__vi{display:none}
[data-lang-mode="vi"] .nm-bi__en{display:none}
[data-lang-mode="vi"] .nm-bi__vi{font-size:1em;color:inherit}

/* ---------- Button ---------- */
.nm-btn{--_bg:var(--nm-color-brand);--_fg:var(--nm-color-on-brand);--_bd:transparent;--_sh:var(--nm-shadow-button);
a.nm-btn{text-decoration:none} /* v0.3: nút dạng liên kết (<a class="nm-btn">) không gạch chân */
  display:inline-flex;align-items:center;justify-content:center;gap:var(--nm-space-2);min-height:var(--nm-control-md);min-width:var(--nm-touch-target);
  padding:0 calc(var(--nm-control-md) * .45);border:2px solid var(--_bd);border-radius:var(--nm-radius-md);background:var(--_bg);color:var(--_fg);
  font:inherit;font-family:var(--nm-font-heading);font-weight:700;font-size:var(--nm-text-md);line-height:1.2;cursor:pointer;box-shadow:var(--_sh);
  transition:transform var(--nm-duration-fast) var(--nm-ease),background var(--nm-duration-fast) var(--nm-ease-standard),box-shadow var(--nm-duration-fast)}
.nm-btn:hover{--_bg:var(--nm-color-brand-hover)}
.nm-btn:active{--_bg:var(--nm-color-brand-active);transform:translateY(2px);box-shadow:none}
.nm-btn--secondary{--_bg:var(--nm-color-surface);--_fg:var(--nm-color-brand-text);--_bd:var(--nm-color-brand);--_sh:none}
.nm-btn--secondary:hover{--_bg:var(--nm-color-brand-soft)} .nm-btn--secondary:active{--_bg:var(--nm-color-brand-soft-hover)}
.nm-btn--ghost{--_bg:transparent;--_fg:var(--nm-color-brand-text);--_sh:none}
.nm-btn--ghost:hover,.nm-btn--ghost:active{--_bg:var(--nm-color-brand-soft)}
.nm-btn--accent{--_bg:var(--nm-color-accent);--_fg:var(--nm-color-on-accent);--_sh:0 4px 0 var(--nm-sun-700)}
.nm-btn--accent:hover,.nm-btn--accent:active{--_bg:var(--nm-sun-300)}
.nm-btn--danger{--_bg:var(--nm-color-danger);--_fg:var(--nm-color-on-danger);--_sh:none}
.nm-btn--danger:hover,.nm-btn--danger:active{--_bg:var(--nm-color-danger-text)}
.nm-btn--sm{min-height:var(--nm-control-sm);font-size:var(--nm-text-sm);padding:0 var(--nm-space-3);border-radius:var(--nm-radius-sm)}
.nm-btn--lg{min-height:var(--nm-control-lg);font-size:var(--nm-text-lg);border-radius:var(--nm-radius-lg)}
.nm-btn[disabled],.nm-btn[aria-disabled="true"]{--_bg:var(--nm-color-surface-sunken);--_fg:var(--nm-color-text-disabled);--_bd:var(--nm-color-border);--_sh:none;cursor:not-allowed;transform:none}
.nm-btn[aria-busy="true"]{cursor:progress}
.nm-btn[aria-busy="true"]::before{content:"";width:1em;height:1em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:nm-spin .8s linear infinite}
@keyframes nm-spin{to{transform:rotate(360deg)}}
.nm-icon{width:var(--nm-icon-size);height:var(--nm-icon-size);fill:currentColor;flex:none;vertical-align:-.15em} /* Phosphor Icons 2.1.1 (MIT), weight theo --nm-icon-regular/--nm-icon-bold */
.nm-btn .nm-icon{width:1.25em;height:1.25em}

/* ---------- Input ---------- */
.nm-field{display:flex;flex-direction:column;gap:var(--nm-space-1);max-width:28rem}
.nm-label{font-weight:600;font-size:var(--nm-text-sm)}
.nm-help{font-size:var(--nm-text-sm);color:var(--nm-color-text-secondary)}
.nm-input{min-height:var(--nm-control-md);padding:0 var(--nm-space-3);border:2px solid var(--nm-color-border-strong);border-radius:var(--nm-radius-sm);background:var(--nm-color-surface);color:var(--nm-color-text);font:inherit;font-size:var(--nm-text-md)}
.nm-input::placeholder{color:var(--nm-color-text-muted)}
.nm-input:hover{border-color:var(--nm-color-text-secondary)}
.nm-input:focus-visible{outline:3px solid var(--nm-color-focus-ring);outline-offset:1px;border-color:var(--nm-color-brand)}
.nm-input[aria-invalid="true"]{border-color:var(--nm-color-danger)}
.nm-input[disabled]{background:var(--nm-color-surface-sunken);color:var(--nm-color-text-disabled);border-color:var(--nm-color-border)}
.nm-error{display:flex;gap:var(--nm-space-1);align-items:center;color:var(--nm-color-danger-text);font-size:var(--nm-text-sm);font-weight:600}

/* ---------- Card ---------- */
.nm-card{background:var(--nm-color-surface-raised);border:1px solid var(--nm-color-border);border-radius:var(--nm-radius-lg);padding:var(--nm-space-5);box-shadow:var(--nm-shadow-sm)}
.nm-card--interactive{cursor:pointer;transition:transform var(--nm-duration-fast) var(--nm-ease),box-shadow var(--nm-duration-fast)}
.nm-card--interactive:hover{transform:translateY(-2px);box-shadow:var(--nm-shadow-md)}

/* ---------- Badge ---------- */
.nm-badge{display:inline-flex;align-items:center;gap:.35em;padding:.15em .65em;border-radius:var(--nm-radius-pill);font-size:var(--nm-text-xs);font-weight:700;line-height:1.5;white-space:nowrap;background:var(--nm-color-brand-soft);color:var(--nm-color-brand-text)}
.nm-badge .nm-icon{width:1.1em;height:1.1em}
.nm-badge--free{background:var(--nm-color-free-bg);color:var(--nm-color-free-text)}
.nm-badge--locked{background:var(--nm-color-locked-bg);color:var(--nm-color-locked-text)}
.nm-badge--premium{background:var(--nm-color-accent);color:var(--nm-color-on-accent)}
.nm-badge--success{background:var(--nm-color-success-soft);color:var(--nm-color-success-text)}
.nm-badge--warning{background:var(--nm-color-warning-soft);color:var(--nm-color-warning-text)}
.nm-badge--danger{background:var(--nm-color-danger-soft);color:var(--nm-color-danger-text)}
.nm-credit{display:inline-flex;align-items:center;gap:.4em;padding:.2em .75em .2em .3em;border-radius:var(--nm-radius-pill);background:var(--nm-color-credit-bg);color:var(--nm-color-credit-text);font-weight:800}
.nm-credit__coin{width:1.5em;height:1.5em;border-radius:50%;background:var(--nm-color-credit-icon);display:grid;place-items:center;color:var(--nm-ink-900);font-size:.75em;font-weight:900;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.nm-credit--gain{animation:nm-pop var(--nm-duration-slow) var(--nm-ease)}
@keyframes nm-pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---------- Tabs ---------- */
.nm-tabs{display:flex;gap:var(--nm-space-1);border-bottom:2px solid var(--nm-color-border);overflow-x:auto}
.nm-tab{min-height:var(--nm-touch-target);padding:0 var(--nm-space-4);border:0;background:none;color:var(--nm-color-text-secondary);font:inherit;font-weight:700;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:var(--nm-radius-sm) var(--nm-radius-sm) 0 0}
.nm-tab:hover{color:var(--nm-color-text);background:var(--nm-color-surface-sunken)}
.nm-tab[aria-selected="true"]{color:var(--nm-color-brand-text);border-bottom-color:var(--nm-color-brand)}
[data-age="primary"] .nm-tabs{border:0;background:var(--nm-color-surface-sunken);padding:var(--nm-space-1);border-radius:var(--nm-radius-pill)}
[data-age="primary"] .nm-tab{border-radius:var(--nm-radius-pill);border:0;margin:0}
[data-age="primary"] .nm-tab[aria-selected="true"]{background:var(--nm-color-brand);color:var(--nm-color-on-brand)}

/* ---------- Progress ---------- */
.nm-progress{height:calc(var(--nm-space-2) + 4px);background:var(--nm-color-surface-sunken);border:1px solid var(--nm-color-border);border-radius:var(--nm-radius-pill);overflow:hidden}
.nm-progress__bar{height:100%;background:var(--nm-color-secondary);border-radius:inherit;transition:width var(--nm-duration-slow) var(--nm-ease)}
[data-age="primary"] .nm-progress{height:18px}
[data-age="primary"] .nm-progress__bar{background:repeating-linear-gradient(-45deg,var(--nm-mint-500) 0 10px,var(--nm-mint-400) 10px 20px)}

/* ---------- Day card (Ngày N) ---------- */
.nm-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--nm-space-3)}
[data-age="primary"] .nm-days{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--nm-space-4)}
.nm-day{position:relative;display:flex;flex-direction:column;gap:var(--nm-space-2);min-height:150px;padding:var(--nm-space-4);border-radius:var(--nm-radius-lg);border:2px solid var(--nm-color-border);background:var(--nm-color-surface);color:inherit;text-align:left;font:inherit;cursor:pointer;box-shadow:var(--nm-shadow-sm);transition:transform var(--nm-duration-fast) var(--nm-ease)}
.nm-day:hover{transform:translateY(-2px);box-shadow:var(--nm-shadow-md)}
.nm-day__num{font-family:var(--nm-font-heading);font-weight:800;font-size:var(--nm-text-xl);line-height:1.1}
.nm-day__title{font-size:var(--nm-text-sm);font-weight:600}
.nm-day__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:var(--nm-space-2)}
.nm-day--free{border-color:var(--nm-color-secondary)}
.nm-day--locked{background:var(--nm-color-surface-sunken);border-style:dashed;border-color:var(--nm-color-border-strong)}
.nm-day--current{border-color:var(--nm-color-brand);box-shadow:0 0 0 4px var(--nm-color-brand-soft-hover),var(--nm-shadow-md)}
.nm-day--done .nm-day__num::after{content:" ✓";color:var(--nm-color-success-text)}
.nm-day__peek{font-size:var(--nm-text-xs);color:var(--nm-color-text-secondary)}

/* ---------- Lesson player (v0.2) ----------
   data-guide="full|mini|hidden" (hidden chỉ cho phép khi data-age="high" hoặc có data-surface; app kiểm tra, CSS không chặn), data-guide-side="right|left".
   Quy tắc: nhân vật KHÔNG BAO GIỜ đè lên bảng (công thức) hay phụ đề:
   - Desktop/tablet (>600px): nhân vật nằm trong stage, bảng và phụ đề chừa vùng an toàn bằng padding = bề rộng nhân vật.
   - Di động (≤600px): nhân vật ra khỏi stage, nằm trong dải phụ đề (cạnh phụ đề) như cửa sổ livestream. */
.nm-player{position:relative;border-radius:var(--nm-radius-lg);overflow:hidden;background:var(--nm-ink-900);color:var(--nm-ink-0);box-shadow:var(--nm-shadow-lg);max-width:960px;container:nm-player / inline-size;
  --_gw:var(--nm-guide-w);--_gm:calc(var(--nm-guide-mini) * 1.25);--_safe-end:calc(var(--_gw) + 5%);--_subs-end:calc(var(--_gw) + 5%)}
.nm-player[data-guide="mini"]{--_safe-end:calc(var(--_gm) + 28px);--_subs-end:calc(var(--_gm) + 28px)}
.nm-player[data-guide="hidden"]{--_safe-end:6%;--_subs-end:3%}
.nm-player__screen{position:relative}
.nm-player__stage{position:relative;aspect-ratio:16/9;background:#FFFFFF;color:var(--nm-ink-900);display:grid;place-items:center;overflow:hidden;container-type:inline-size}
[data-theme="dark"] .nm-player__stage{background:#FFFFFF}
.nm-player__board{font-size:clamp(15px,3.6cqw,34px);text-align:center;padding:5% var(--_safe-end) 18% 6%;max-width:100%;box-sizing:border-box}
.nm-player[data-guide-side="left"] .nm-player__board,.nm-player--guide-left .nm-player__board{padding:5% 6% 18% var(--_safe-end)}
.nm-player__mark{background:linear-gradient(transparent 55%,var(--nm-sun-200) 55%);padding:0 .1em}
.nm-guide{position:absolute;z-index:2;right:2.5%;bottom:4%;width:var(--_gw);aspect-ratio:3/4;border-radius:var(--nm-radius-lg);overflow:hidden;background:linear-gradient(160deg,var(--nm-blue-100),var(--nm-mint-100));border:3px solid #fff;box-shadow:0 6px 18px rgba(14,18,27,.25);transition:width var(--nm-duration-base) var(--nm-ease-standard)}
.nm-guide--left,.nm-player[data-guide-side="left"] .nm-guide{right:auto;left:2.5%}
.nm-player[data-guide="mini"] .nm-guide{width:var(--_gm);aspect-ratio:1;border-radius:50%;bottom:4%}
.nm-player[data-guide="mini"] .nm-guide__name{display:none}
.nm-player[data-guide="mini"] .nm-guide__live{top:auto;bottom:4%;left:50%;transform:translateX(-50%);font-size:0;padding:3px}
.nm-player[data-guide="mini"] .nm-guide svg{inset:10%;width:80%;height:80%}
.nm-player[data-guide="hidden"] .nm-guide{display:none}
.nm-guide__live{position:absolute;top:6%;left:6%;display:inline-flex;align-items:center;gap:4px;background:var(--nm-coral-600);color:#fff;font:800 11px/1.6 var(--nm-font-ui);padding:0 7px;border-radius:var(--nm-radius-pill);letter-spacing:.04em}
.nm-guide__live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:nm-blink 1.4s infinite}
@keyframes nm-blink{50%{opacity:.25}}
.nm-guide__name{position:absolute;left:0;right:0;bottom:0;background:rgba(14,18,27,.82);color:#fff;font:700 12px/1.8 var(--nm-font-ui);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm-guide svg{position:absolute;inset:12% 8% 14%;width:84%;height:74%}
.nm-guide__btn{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(14,18,27,.6);color:#fff;display:grid;place-items:center;cursor:pointer}
.nm-player[data-guide="mini"] .nm-guide__btn{display:none}
.nm-subs{position:absolute;left:3%;right:var(--_subs-end);bottom:3.5%;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.nm-player[data-guide-side="left"] .nm-subs,.nm-player--guide-left .nm-subs{left:var(--_subs-end);right:3%}
.nm-subs__line{background:rgba(14,18,27,.82);padding:.15em .6em;border-radius:var(--nm-radius-sm);text-align:center;max-width:100%}
.nm-subs__en{color:var(--nm-color-subtitle-en);font:700 clamp(14px,2vw,22px)/1.45 var(--nm-font-ui)}
.nm-subs__vi{color:var(--nm-color-subtitle-vi);font:500 clamp(12px,1.7vw,18px)/1.5 var(--nm-font-ui)}
.nm-subs__word{text-decoration:underline dotted;text-underline-offset:.2em;pointer-events:auto;cursor:help}
.nm-player__controls{display:flex;align-items:center;gap:var(--nm-space-2);padding:var(--nm-space-2) var(--nm-space-3);background:var(--nm-ink-900)}
.nm-player__controls .nm-btn{--_bg:transparent;--_fg:#fff;--_sh:none;min-height:var(--nm-touch-target);padding:0 var(--nm-space-2)}
.nm-player__controls .nm-btn:hover{--_bg:rgba(255,255,255,.12)}
.nm-player__seek{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.25);position:relative}
.nm-player__seek>span{position:absolute;inset:0 auto 0 0;background:var(--nm-sun-400);border-radius:inherit}
.nm-player__seek>i{position:absolute;top:-4px;width:2px;height:14px;background:rgba(255,255,255,.7)}
.nm-player__time{font:600 var(--nm-text-xs)/1 var(--nm-font-numeric);color:var(--nm-ink-200);min-width:4.6ch;text-align:center}
.nm-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.4);color:#fff;font:700 12px/1 var(--nm-font-ui);background:transparent}
.nm-chip[aria-pressed="true"]{background:#fff;color:var(--nm-ink-900)}
@container nm-player (max-width:600px){   /* theo bề rộng trình phát (không theo viewport) → đúng cả khi nhúng trong khung hẹp */
  .nm-player__screen{--_gw:76px;--_gm:52px}
  .nm-player__stage{position:static}             /* nhân vật ra khỏi stage → không thể đè bảng */
  .nm-player__board,.nm-player[data-guide-side="left"] .nm-player__board,.nm-player--guide-left .nm-player__board{padding:5% 5%;font-size:clamp(15px,5.2cqw,26px)}
  .nm-subs{position:relative;left:auto;right:auto;bottom:auto;min-height:calc(var(--_gw) * 4 / 3 + 16px);padding:var(--nm-space-2) calc(var(--_gw) + 20px) var(--nm-space-2) var(--nm-space-3);background:var(--nm-ink-950);justify-content:center;box-sizing:border-box}
  .nm-player[data-guide-side="left"] .nm-subs,.nm-player--guide-left .nm-subs{left:auto;right:auto;padding:var(--nm-space-2) var(--nm-space-3) var(--nm-space-2) calc(var(--_gw) + 20px)}
  .nm-player[data-guide="mini"] .nm-subs{min-height:calc(var(--_gm) + 16px);padding-right:calc(var(--_gm) + 20px)}
  .nm-player[data-guide="mini"][data-guide-side="left"] .nm-subs{padding-right:var(--nm-space-3);padding-left:calc(var(--_gm) + 20px)}
  .nm-player[data-guide="hidden"] .nm-subs{min-height:0;padding:var(--nm-space-2) var(--nm-space-3)}
  .nm-subs__line{max-width:100%;background:transparent;padding:0}
  .nm-guide{bottom:8px;right:8px;border-width:2px}
  .nm-guide--left,.nm-player[data-guide-side="left"] .nm-guide{left:8px;right:auto}
  .nm-player[data-guide="mini"] .nm-guide{bottom:8px}
  .nm-guide__live{font-size:9px;padding:0 5px}
  .nm-guide__name{font-size:10px}
  .nm-player__controls{flex-wrap:wrap}
  .nm-player__seek{order:-1;flex-basis:100%;margin:6px 0}
}
/* Khi trình phát ≤600px, nhân vật ra khỏi stage, nằm trong .nm-player__screen ở dải phụ đề. Markup: controls phải đặt NGOÀI .nm-player__screen. */

/* ---------- Exercise ---------- */
.nm-q{display:flex;flex-direction:column;gap:var(--nm-space-3)}
.nm-q__stem{font-size:var(--nm-text-lg);font-weight:600}
.nm-options{display:grid;gap:var(--nm-space-2);grid-template-columns:1fr}
[data-age="primary"] .nm-options{grid-template-columns:1fr 1fr;gap:var(--nm-space-3)}
.nm-option{display:flex;align-items:center;gap:var(--nm-space-3);min-height:var(--nm-touch-target);padding:var(--nm-space-2) var(--nm-space-3);border:2px solid var(--nm-color-border-strong);border-radius:var(--nm-radius-md);background:var(--nm-color-surface);color:inherit;font:inherit;text-align:left;cursor:pointer}
[data-age="primary"] .nm-option{min-height:72px;font-size:var(--nm-text-lg);border-width:3px}
.nm-option:hover{border-color:var(--nm-color-brand);background:var(--nm-color-brand-soft)}
.nm-option__key{flex:none;display:grid;place-items:center;width:2em;height:2em;border-radius:var(--nm-radius-sm);background:var(--nm-color-surface-sunken);font-weight:800;border:1px solid var(--nm-color-border)}
.nm-option[aria-checked="true"]{border-color:var(--nm-color-brand);background:var(--nm-color-brand-soft)}
.nm-option[aria-checked="true"] .nm-option__key{background:var(--nm-color-brand);color:var(--nm-color-on-brand);border-color:transparent}
.nm-option[data-result="correct"]{border-color:var(--nm-color-success);background:var(--nm-color-success-soft)}
.nm-option[data-result="correct"] .nm-option__key{background:var(--nm-color-success);color:var(--nm-color-on-success)}
.nm-option[data-result="wrong"]{border-color:var(--nm-color-danger);background:var(--nm-color-danger-soft)}
.nm-option[data-result="wrong"] .nm-option__key{background:var(--nm-color-danger);color:var(--nm-color-on-danger)}
.nm-option__status{margin-left:auto;font-weight:700;font-size:var(--nm-text-sm)}
.nm-option[data-result="correct"] .nm-option__status{color:var(--nm-color-success-text)}
.nm-option[data-result="wrong"] .nm-option__status{color:var(--nm-color-danger-text)}
.nm-blank{display:inline-flex;align-items:center;gap:var(--nm-space-2);flex-wrap:wrap}
.nm-blank .nm-input{width:6.5em;text-align:center;font-family:var(--nm-font-numeric);font-weight:700;font-size:var(--nm-text-lg)}

/* ---------- Alert / Toast / Modal ---------- */
.nm-alert{display:flex;gap:var(--nm-space-3);align-items:flex-start;padding:var(--nm-space-3) var(--nm-space-4);border-radius:var(--nm-radius-md);border:1px solid;border-left-width:6px}
.nm-alert__title{font-weight:800;margin:0}
.nm-alert p{margin:0}
.nm-alert--success{background:var(--nm-color-success-soft);color:var(--nm-color-success-text);border-color:var(--nm-color-success)}
.nm-alert--danger{background:var(--nm-color-danger-soft);color:var(--nm-color-danger-text);border-color:var(--nm-color-danger)}
.nm-alert--warning{background:var(--nm-color-warning-soft);color:var(--nm-color-warning-text);border-color:var(--nm-color-warning)}
.nm-alert--info{background:var(--nm-color-info-soft);color:var(--nm-color-info-text);border-color:var(--nm-color-info)}
.nm-toast{display:flex;gap:var(--nm-space-3);align-items:center;min-width:280px;max-width:420px;padding:var(--nm-space-3) var(--nm-space-4);border-radius:var(--nm-radius-md);background:var(--nm-ink-900);color:var(--nm-ink-0);box-shadow:var(--nm-shadow-lg)}
[data-theme="dark"] .nm-toast{background:var(--nm-ink-100);color:var(--nm-ink-900)}
.nm-toast__action{margin-left:auto;background:none;border:0;color:var(--nm-sun-300);font:inherit;font-weight:800;cursor:pointer;min-height:var(--nm-touch-target)}
[data-theme="dark"] .nm-toast__action{color:var(--nm-blue-700)}
.nm-toasts{position:fixed;right:var(--nm-space-4);bottom:var(--nm-space-4);display:flex;flex-direction:column;gap:var(--nm-space-2);z-index:var(--nm-z-toast)}
.nm-backdrop{position:fixed;inset:0;background:rgba(14,18,27,.55);display:grid;place-items:center;padding:var(--nm-space-4);z-index:var(--nm-z-modal)}
.nm-backdrop[hidden]{display:none}
.nm-modal{width:min(520px,100%);background:var(--nm-color-surface-raised);color:var(--nm-color-text);border-radius:var(--nm-radius-xl);padding:var(--nm-space-6);box-shadow:var(--nm-shadow-lg);animation:nm-rise var(--nm-duration-base) var(--nm-ease)}
.nm-modal__actions{display:flex;gap:var(--nm-space-2);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--nm-space-5)}
@keyframes nm-rise{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- Table (giáo viên/admin) ---------- */
.nm-table{width:100%;border-collapse:collapse;font-size:var(--nm-text-sm);background:var(--nm-color-surface)}
.nm-table th,.nm-table td{padding:var(--nm-space-2) var(--nm-space-3);border-bottom:1px solid var(--nm-color-border);text-align:left}
.nm-table th{font-weight:700;color:var(--nm-color-text-secondary);background:var(--nm-color-surface-sunken);font-size:var(--nm-text-xs);text-transform:uppercase;letter-spacing:.04em}
.nm-table th:lang(vi){text-transform:none;letter-spacing:0} /* v0.3: không viết hoa tiêu đề cột tiếng Việt (§4.2) */
.nm-table td.num{text-align:right;font-family:var(--nm-font-numeric)}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}
.nm-option .katex,.nm-q__stem .katex{font-size:1.25em}
[data-age="primary"] .nm-option .katex{font-size:1.5em}
.nm-option__status{white-space:nowrap}
.nm-input[data-result="correct"]{border-color:var(--nm-color-success);background:var(--nm-color-success-soft)}
.nm-input[data-result="wrong"],.nm-input[aria-invalid="true"]{border-color:var(--nm-color-danger)}
.nm-player__screen{position:relative}