/* ============================================================================
   Dabour Hub — NX design system (English site, rebuilt 2026-11-05)
   Derived from the 41 design boards in UI DESIGN.zip: light editorial surfaces,
   ink typography, subject-coded accents, covers as the hero of every listing.
   Scoped to nx-* so /ar/, /eg/ and /eg-en/ keep their own presentation layer.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
    --nx-bg: #f5f7fa;
    --nx-bg-2: #eef2f7;
    --nx-surface: #ffffff;
    --nx-surface-2: #fafbfd;
    --nx-ink: #101828;
    --nx-ink-2: #344054;
    --nx-muted: #5b6474;
    --nx-faint: #8a94a6;
    --nx-line: #e4e8ee;
    --nx-line-2: #d7dde6;

    --nx-bio: #12b58a;   --nx-bio-2: #0d9c7a;
    --nx-chem: #6d28d9;  --nx-chem-2: #4f3fe0;
    --nx-phys: #2563eb;  --nx-phys-2: #1d4ed8;
    --nx-comb: #0891b2;
    --nx-amber: #f59e0b; --nx-amber-2: #d97706;
    --nx-ok: #16a34a;    --nx-bad: #dc2626;    --nx-warn: #d97706;

    /* the accent in play; cards override these with --t/--t2 from covers/palette.json */
    --nx-acc: var(--nx-bio);
    --nx-acc-2: var(--nx-bio-2);
    --nx-acc-ink: #0b3d33;
    --nx-acc-tint: #e8fbf5;

    --nx-r-sm: 10px;
    --nx-r: 14px;
    --nx-r-lg: 18px;
    --nx-r-xl: 24px;
    --nx-r-pill: 999px;

    --nx-sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
    --nx-sh-2: 0 4px 12px -2px rgba(16, 24, 40, .08), 0 2px 6px -2px rgba(16, 24, 40, .05);
    --nx-sh-3: 0 18px 40px -12px rgba(16, 24, 40, .18), 0 6px 14px -6px rgba(16, 24, 40, .10);
    --nx-sh-acc: 0 14px 30px -12px color-mix(in srgb, var(--nx-acc) 55%, transparent);

    --nx-max: 1240px;
    --nx-max-wide: 1420px;
    --nx-gut: 24px;
    --nx-top-h: 68px;
    --nx-ff: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nx-fd: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
    --nx-ease: cubic-bezier(.22, .61, .36, 1);
}

/* subject coding: any block can declare its subject and the whole card re-colours */
[data-subj="Biology"]          { --nx-acc: var(--nx-bio);  --nx-acc-2: var(--nx-bio-2);  --nx-acc-tint: #e9fbf5; --nx-acc-ink: #0a3b31; }
[data-subj="Chemistry"]        { --nx-acc: var(--nx-chem); --nx-acc-2: var(--nx-chem-2); --nx-acc-tint: #f1ecfe; --nx-acc-ink: #2c1a5e; }
[data-subj="Physics"]          { --nx-acc: var(--nx-phys); --nx-acc-2: var(--nx-phys-2); --nx-acc-tint: #e9f0fe; --nx-acc-ink: #12306b; }
[data-subj="Combined Science"] { --nx-acc: var(--nx-comb); --nx-acc-2: #0e7490;          --nx-acc-tint: #e6f7fb; --nx-acc-ink: #0c3a45; }
/* a palette cover wins over the subject default */
[data-acc] { --nx-acc: var(--t); --nx-acc-2: var(--t2); --nx-acc-tint: var(--tl); }

/* ---------- 2. base ---------- */
html.nx { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.nx {
    margin: 0; background: var(--nx-bg); color: var(--nx-ink);
    font: 400 16px/1.6 var(--nx-ff); letter-spacing: -.006em;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.nx img { max-width: 100%; height: auto; }
body.nx a { color: inherit; text-decoration: none; }
body.nx :focus-visible { outline: 3px solid color-mix(in srgb, var(--nx-acc) 60%, white); outline-offset: 2px; border-radius: 6px; }
body.nx h1, body.nx h2, body.nx h3, body.nx h4 { margin: 0; font-weight: 700; letter-spacing: -.028em; color: var(--nx-ink); }
body.nx p { margin: 0; }
body.nx button, body.nx input, body.nx select, body.nx textarea { font: inherit; color: inherit; }
body.nx ul, body.nx ol { margin: 0; padding: 0; list-style: none; }
body.nx table { border-collapse: collapse; width: 100%; }
/* the filter and tab scripts hide nodes with the hidden attribute — a grid/flex rule must not win */
body.nx [hidden] { display: none !important; }

.nx-wrap { width: min(100% - (var(--nx-gut) * 2), var(--nx-max)); margin-inline: auto; }
.nx-wrap--wide { width: min(100% - (var(--nx-gut) * 2), var(--nx-max-wide)); }
.nx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nx-skip { position: fixed; inset: 8px auto auto 8px; z-index: 200; background: var(--nx-surface); color: var(--nx-acc-2); padding: 10px 16px; border-radius: var(--nx-r-sm); box-shadow: var(--nx-sh-3); transform: translateY(-200%); }
.nx-skip:focus { transform: none; }

/* display type: the boards pair a serif headline with an Inter body */
.nx-d { font-family: var(--nx-fd); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; }
.nx-h1 { font-size: clamp(38px, 5.4vw, 62px); }
.nx-h2 { font-family: var(--nx-fd); font-size: clamp(27px, 3.3vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.nx-h3 { font-size: clamp(18px, 1.5vw, 21px); font-weight: 650; letter-spacing: -.02em; line-height: 1.28; }
.nx-lede { font-size: clamp(16px, 1.35vw, 19px); color: var(--nx-muted); line-height: 1.62; max-width: 62ch; }
.nx-em { font-style: italic; color: var(--nx-acc-2); }

/* eyebrow + section header, the repeating rhythm of the boards */
.nx-eb { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--nx-acc-2); }
.nx-eb::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--nx-acc); }
.nx-sec { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; margin: 0 0 26px; }
.nx-sec__t { display: grid; gap: 10px; max-width: 72ch; }
.nx-sec__sub { color: var(--nx-muted); font-size: 15.5px; line-height: 1.55; }
.nx-sec__a { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nx-band { padding: clamp(44px, 5vw, 72px) 0; }
.nx-band--tint { background: linear-gradient(180deg, #fff 0%, var(--nx-bg) 100%); }
.nx-band--soft { background: var(--nx-surface); border-block: 1px solid var(--nx-line); }
.nx-band + .nx-band { padding-top: clamp(30px, 3.4vw, 48px); }

/* ---------- 3. controls ---------- */
.nx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: var(--nx-r-sm); border: 1px solid transparent;
    font-size: 15px; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
    background: var(--nx-acc); color: #fff; box-shadow: var(--nx-sh-acc);
    transition: transform .18s var(--nx-ease), box-shadow .18s var(--nx-ease), background .18s var(--nx-ease);
}
.nx-btn:hover { background: var(--nx-acc-2); transform: translateY(-1px); }
.nx-btn:active { transform: translateY(0); }
.nx-btn--ink { background: var(--nx-ink); color: #fff; box-shadow: var(--nx-sh-2); }
.nx-btn--ink:hover { background: #1d2939; }
.nx-btn--amber { background: var(--nx-amber); color: #241703; box-shadow: 0 14px 28px -14px rgba(245, 158, 11, .8); }
.nx-btn--amber:hover { background: var(--nx-amber-2); color: #fff; }
.nx-btn--ghost { background: var(--nx-surface); color: var(--nx-ink); border-color: var(--nx-line-2); box-shadow: var(--nx-sh-1); }
.nx-btn--ghost:hover { border-color: var(--nx-acc); color: var(--nx-acc-2); background: var(--nx-acc-tint); }
.nx-btn--soft { background: var(--nx-acc-tint); color: var(--nx-acc-2); box-shadow: none; }
.nx-btn--soft:hover { background: color-mix(in srgb, var(--nx-acc-tint) 60%, var(--nx-acc)); color: #fff; }
.nx-btn--sm { padding: 8px 14px; font-size: 13.5px; border-radius: 9px; }
.nx-btn--lg { padding: 15px 26px; font-size: 16.5px; border-radius: 12px; }
.nx-btn--block { width: 100%; }
.nx-btn--icon { padding: 9px; border-radius: 10px; }

.nx-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--nx-r-pill);
    border: 1px solid var(--nx-line-2); background: var(--nx-surface); color: var(--nx-ink-2);
    font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: all .16s var(--nx-ease);
}
.nx-chip:hover { border-color: var(--nx-acc); color: var(--nx-acc-2); }
.nx-chip[aria-pressed="true"], .nx-chip.on { background: var(--nx-ink); border-color: var(--nx-ink); color: #fff; }
.nx-chip__n { font-variant-numeric: tabular-nums; color: var(--nx-faint); font-weight: 500; }
.nx-chip[aria-pressed="true"] .nx-chip__n { color: rgba(255, 255, 255, .7); }

.nx-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 650; letter-spacing: .01em; background: var(--nx-bg-2); color: var(--nx-muted); }
.nx-tag--acc { background: var(--nx-acc-tint); color: var(--nx-acc-2); }
.nx-tag--ink { background: var(--nx-ink); color: #fff; }
.nx-tag--amber { background: #fff4e0; color: #97630b; }
.nx-tag--ok { background: #e7f8ee; color: #14663a; }
.nx-tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.nx-i { flex: none; }
.nx-ltr { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--nx-acc-2); }
.nx-ltr:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 4. top bar, drawer, search ---------- */
.nx-top {
    position: sticky; top: 0; z-index: 90; height: var(--nx-top-h);
    background: color-mix(in srgb, #fff 86%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--nx-line);
    transition: box-shadow .25s var(--nx-ease), border-color .25s var(--nx-ease);
}
.nx-top.is-stuck { box-shadow: 0 10px 26px -22px rgba(16, 24, 40, .55); border-color: transparent; }
.nx-top__in { height: 100%; display: flex; align-items: center; gap: 18px; }
.nx-brand { display: flex; align-items: center; gap: 11px; flex: none; }
.nx-mark { width: 34px; height: 30px; flex: none; }
.nx-brand__t { display: grid; line-height: 1.05; }
.nx-brand__t b { font-size: 19px; font-weight: 800; letter-spacing: -.035em; }
.nx-brand__t b span { font-family: var(--nx-fd); font-style: italic; font-weight: 600; color: var(--nx-acc-2); }
.nx-brand__t small { font-size: 9.5px; font-weight: 650; letter-spacing: .17em; color: var(--nx-faint); text-transform: uppercase; }
.nx-ctx { display: flex; align-items: center; gap: 8px; padding-left: 16px; margin-left: 2px; border-left: 1px solid var(--nx-line); color: var(--nx-muted); font-size: 13.5px; font-weight: 600; max-width: 30ch; }
.nx-ctx b { color: var(--nx-ink); font-weight: 650; }

.nx-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nx-nav a { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--nx-r-pill); font-size: 14.5px; font-weight: 600; color: var(--nx-ink-2); transition: color .16s, background .16s; }
.nx-nav a:hover { color: var(--nx-acc-2); background: var(--nx-acc-tint); }
.nx-nav a.on { color: var(--nx-acc-2); background: var(--nx-acc-tint); }
.nx-nav a.on::after { content: ""; position: absolute; bottom: 3px; left: 50%; translate: -50% 0; width: 5px; height: 5px; border-radius: 50%; background: var(--nx-acc); }

.nx-search { display: flex; align-items: center; gap: 9px; flex: 1 1 240px; max-width: 340px; padding: 9px 14px; border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-pill); background: var(--nx-surface-2); color: var(--nx-faint); transition: all .18s var(--nx-ease); }
.nx-search:focus-within { border-color: var(--nx-acc); background: #fff; box-shadow: 0 0 0 4px var(--nx-acc-tint); color: var(--nx-acc-2); }
.nx-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 14px; color: var(--nx-ink); }
.nx-search input::placeholder { color: var(--nx-faint); }
.nx-search kbd { font: 600 10.5px/1 var(--nx-ff); color: var(--nx-faint); border: 1px solid var(--nx-line-2); border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px; background: #fff; }
.nx-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.nx-cart { position: relative; display: inline-flex; padding: 9px; border-radius: 10px; border: 1px solid var(--nx-line); background: #fff; color: var(--nx-ink-2); }
.nx-cart:hover { border-color: var(--nx-acc); color: var(--nx-acc-2); }
.nx-cart b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--nx-amber); color: #241703; font: 700 11px/18px var(--nx-ff); text-align: center; }
.nx-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--nx-acc); color: #fff; font-weight: 700; font-size: 15px; box-shadow: var(--nx-sh-acc); }
.nx-burger { display: none; padding: 8px; border: 1px solid var(--nx-line); background: #fff; border-radius: 10px; cursor: pointer; }

.nx-drawer { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: min(84vw, 330px) 1fr; opacity: 0; pointer-events: none; transition: opacity .24s var(--nx-ease); }
.nx-drawer.is-open { opacity: 1; pointer-events: auto; }
.nx-drawer__bg { background: rgba(16, 24, 40, .44); backdrop-filter: blur(2px); }
.nx-drawer__p { background: var(--nx-surface); padding: 20px 18px 28px; overflow-y: auto; box-shadow: var(--nx-sh-3); translate: -102% 0; transition: translate .28s var(--nx-ease); }
.nx-drawer.is-open .nx-drawer__p { translate: 0 0; }
.nx-drawer__x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--nx-line); background: #fff; cursor: pointer; margin-bottom: 16px; }
.nx-drawer__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--nx-faint); margin: 20px 0 8px; }
.nx-drawer__p a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--nx-r-sm); font-weight: 600; color: var(--nx-ink-2); }
.nx-drawer__p a:hover, .nx-drawer__p a.on { background: var(--nx-acc-tint); color: var(--nx-acc-2); }

/* breadcrumbs */
.nx-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--nx-faint); padding: 16px 0 0; }
.nx-crumbs a { color: var(--nx-muted); font-weight: 550; }
.nx-crumbs a:hover { color: var(--nx-acc-2); }
.nx-crumbs b { color: var(--nx-ink); font-weight: 650; }

/* ---------- 5. hero ---------- */
.nx-hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 84px) 0 clamp(34px, 4vw, 56px); background:
    radial-gradient(1000px 420px at 78% -12%, color-mix(in srgb, var(--nx-acc) 13%, transparent), transparent 70%),
    radial-gradient(760px 340px at 4% 8%, #fff, transparent 66%), var(--nx-bg); }
.nx-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--nx-line), transparent); }
.nx-hero__g { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.nx-hero__t { display: grid; gap: 20px; justify-items: start; }
.nx-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.nx-hero__note { display: flex; gap: 18px; flex-wrap: wrap; color: var(--nx-muted); font-size: 13.5px; }
.nx-hero__note span { display: inline-flex; align-items: center; gap: 7px; }
.nx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 6px; background: var(--nx-line); border-radius: var(--nx-r); overflow: hidden; box-shadow: var(--nx-sh-1); }
.nx-stats div { background: #fff; padding: 15px 16px; }
.nx-stats b { display: block; font: 700 clamp(21px, 2.4vw, 28px)/1.1 var(--nx-ff); letter-spacing: -.03em; color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.nx-stats span { font-size: 11.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--nx-faint); }

/* cover stack: the boards always show work, never abstract shapes */
.nx-stack { position: relative; display: grid; gap: 16px; padding: 6px; }
.nx-stack__c { border-radius: var(--nx-r-lg); overflow: hidden; background: #fff; border: 1px solid var(--nx-line); box-shadow: var(--nx-sh-3); }
.nx-stack__c img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.nx-stack__m { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.nx-stack__m b { font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; }
.nx-stack__m span { font-size: 12.5px; color: var(--nx-muted); }
.nx-stack__f { margin-left: auto; display: flex; gap: 6px; }
.nx-stack__fl { position: absolute; inset-block: 12%; inset-inline-end: -14px; width: 46%; border-radius: var(--nx-r-lg); background: #fff; border: 1px solid var(--nx-line); box-shadow: var(--nx-sh-2); rotate: 2.6deg; z-index: -1; }
.nx-stack__fl2 { position: absolute; inset-block: 24%; inset-inline-end: -26px; width: 40%; border-radius: var(--nx-r-lg); background: var(--nx-acc-tint); border: 1px solid color-mix(in srgb, var(--nx-acc) 22%, #fff); rotate: -3deg; z-index: -2; }

/* ---------- 6. cards ---------- */
.nx-grid { display: grid; gap: 20px; }
.nx-grid--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-grid--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-grid--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-grid--tight { gap: 14px; }

.nx-card { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r-lg); box-shadow: var(--nx-sh-1); transition: transform .2s var(--nx-ease), box-shadow .2s var(--nx-ease), border-color .2s; }
.nx-card:hover { transform: translateY(-3px); box-shadow: var(--nx-sh-3); border-color: color-mix(in srgb, var(--nx-acc) 30%, var(--nx-line)); }

/* course cover card */
.nx-cc { display: grid; grid-template-rows: auto 1fr; overflow: hidden; position: relative; }
.nx-cc__img { display: block; position: relative; background: var(--nx-bg-2); }
.nx-cc__img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.nx-cc__img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(180deg, transparent, rgba(8, 12, 20, .34)); }
.nx-cc__lv { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 5px 10px; border-radius: var(--nx-r-pill); background: rgba(255, 255, 255, .93); color: var(--nx-acc-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(4px); }
.nx-cc__bd { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 5px 10px; border-radius: var(--nx-r-pill); background: var(--nx-ink); color: #fff; font-size: 11px; font-weight: 650; }
.nx-cc__b { display: grid; gap: 12px; padding: 16px 17px 18px; align-content: start; }
.nx-cc__t { font-size: 17px; font-weight: 680; letter-spacing: -.022em; line-height: 1.3; }
.nx-cc__t a:hover { color: var(--nx-acc-2); }
.nx-cc__d { font-size: 13.6px; color: var(--nx-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-cc__m { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--nx-faint); font-weight: 600; }
.nx-cc__m span { display: inline-flex; align-items: center; gap: 5px; }
.nx-cc__m b { color: var(--nx-ink-2); font-variant-numeric: tabular-nums; }
.nx-cc__f { display: flex; align-items: center; gap: 10px; margin-top: 2px; padding-top: 13px; border-top: 1px dashed var(--nx-line); }
.nx-cc__go { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--nx-acc-tint); color: var(--nx-acc-2); transition: all .2s var(--nx-ease); }
.nx-cc:hover .nx-cc__go { background: var(--nx-acc); color: #fff; transform: translateX(2px); }
.nx-prog { display: grid; gap: 5px; flex: 1; }
.nx-prog__bar { height: 6px; border-radius: 3px; background: var(--nx-bg-2); overflow: hidden; }
.nx-prog__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--nx-acc), var(--nx-acc-2)); }
.nx-prog__t { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nx-faint); }

/* subject tiles */
.nx-sub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nx-sub__c { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 20px; border-radius: var(--nx-r-lg); background: #fff; border: 1px solid var(--nx-line); box-shadow: var(--nx-sh-1); }
.nx-sub__c::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--nx-acc); }
.nx-sub__c::after { content: ""; position: absolute; right: -22px; top: -22px; width: 92px; height: 92px; border-radius: 50%; background: var(--nx-acc-tint); }
.nx-sub__c:hover { transform: translateY(-3px); box-shadow: var(--nx-sh-2); }
.nx-sub__i { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--nx-acc); color: #fff; box-shadow: var(--nx-sh-acc); }
.nx-sub__c b { position: relative; z-index: 1; font-size: 16.5px; font-weight: 680; letter-spacing: -.02em; }
.nx-sub__c span { position: relative; z-index: 1; font-size: 13px; color: var(--nx-muted); }
.nx-sub__c u { position: relative; z-index: 1; text-decoration: none; font-size: 12px; font-weight: 650; color: var(--nx-acc-2); display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; }

/* lesson / quiz list rows */
.nx-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: var(--nx-r); background: #fff; border: 1px solid var(--nx-line); transition: all .16s var(--nx-ease); }
.nx-row:hover { border-color: color-mix(in srgb, var(--nx-acc) 40%, var(--nx-line)); box-shadow: var(--nx-sh-2); }
.nx-row__n { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--nx-acc-tint); color: var(--nx-acc-2); font: 700 12.5px/1 var(--nx-ff); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nx-row__n.is-done { background: var(--nx-ok); color: #fff; }
.nx-row__t { min-width: 0; display: grid; gap: 3px; flex: 1; }
.nx-row__t b { font-size: 15px; font-weight: 620; letter-spacing: -.015em; line-height: 1.35; }
.nx-row__t span { font-size: 12.5px; color: var(--nx-faint); }
.nx-row__a { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.nx-list { display: grid; gap: 10px; }

/* the Learn / Quiz / Question Bank trio */
.nx-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nx-trio a { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 12px; border-radius: var(--nx-r); border: 1px solid var(--nx-line-2); background: #fff; font-size: 14.5px; font-weight: 650; color: var(--nx-ink-2); transition: all .18s var(--nx-ease); }
.nx-trio a:hover { background: var(--nx-acc); border-color: var(--nx-acc); color: #fff; box-shadow: var(--nx-sh-acc); transform: translateY(-2px); }
.nx-trio a[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.nx-trio--lg a { padding: 19px 14px; font-size: 15.5px; }

/* book card */
.nx-bk { display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.nx-bk__img { background: linear-gradient(160deg, var(--nx-bg-2), #fff); display: grid; place-items: center; padding: 16px; }
.nx-bk__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; box-shadow: var(--nx-sh-2); }
.nx-bk__b { display: grid; gap: 9px; padding: 15px 16px 17px; align-content: start; }
.nx-bk__t { font-size: 15.5px; font-weight: 660; line-height: 1.32; letter-spacing: -.018em; }
.nx-bk__p { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.nx-bk__p b { font-size: 19px; font-weight: 750; letter-spacing: -.03em; color: var(--nx-ink); }
.nx-bk__p s { color: var(--nx-faint); font-size: 13px; }

/* figure card (lesson diagrams with their own explanation) */
.nx-fig { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; padding: 18px; }
.nx-fig figure { margin: 0; border-radius: var(--nx-r); overflow: hidden; background: var(--nx-surface-2); border: 1px solid var(--nx-line); }
.nx-fig figure img { display: block; width: 100%; cursor: zoom-in; }
.nx-fig figcaption { padding: 10px 13px; font-size: 12.5px; color: var(--nx-muted); background: #fff; border-top: 1px solid var(--nx-line); }
.nx-fig figcaption b { display: block; color: var(--nx-acc-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; }
.nx-fig__t { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 680; letter-spacing: -.02em; margin-bottom: 8px; }
.nx-fig__t i { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--nx-ink); color: #fff; font: 700 12px/1 var(--nx-ff); font-style: normal; }
.nx-fig__x { font-size: 15px; color: var(--nx-ink-2); line-height: 1.65; }
.nx-fig__x p + p { margin-top: 10px; }

/* ---------- 7. page furniture: rails, tabs, filters ---------- */
.nx-side { display: grid; gap: 22px; align-content: start; position: sticky; top: calc(var(--nx-top-h) + 20px); }
.nx-side__b { background: #fff; border: 1px solid var(--nx-line); border-radius: var(--nx-r-lg); padding: 16px; box-shadow: var(--nx-sh-1); }
.nx-side__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--nx-faint); margin-bottom: 12px; }
.nx-side__c { display: grid; gap: 3px; }
.nx-side__c a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 550; color: var(--nx-ink-2); }
.nx-side__c a:hover { background: var(--nx-bg); }
.nx-side__c a.on { background: var(--nx-acc-tint); color: var(--nx-acc-2); font-weight: 680; }
.nx-side__c a em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--nx-faint); font-variant-numeric: tabular-nums; }
.nx-split { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: clamp(20px, 2.6vw, 34px); align-items: start; }
.nx-split--r { grid-template-columns: minmax(0, 1fr) 320px; }

.nx-tabs { display: flex; gap: 4px; padding: 5px; background: var(--nx-bg-2); border-radius: var(--nx-r-pill); width: fit-content; max-width: 100%; overflow-x: auto; }
.nx-tabs button, .nx-tabs a { border: 0; background: none; padding: 9px 17px; border-radius: var(--nx-r-pill); font-size: 14px; font-weight: 620; color: var(--nx-muted); cursor: pointer; white-space: nowrap; transition: all .18s var(--nx-ease); }
.nx-tabs .on, .nx-tabs [aria-selected="true"] { background: #fff; color: var(--nx-ink); box-shadow: var(--nx-sh-1); }
.nx-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.nx-filters__lbl { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nx-faint); }

/* part / unit anchors inside course + lesson pages */
.nx-parts { display: flex; gap: 8px; flex-wrap: wrap; }
.nx-parts a { padding: 8px 13px; border-radius: var(--nx-r-pill); border: 1px solid var(--nx-line-2); background: #fff; font-size: 13.5px; font-weight: 620; color: var(--nx-ink-2); }
.nx-parts a.on { background: var(--nx-ink); border-color: var(--nx-ink); color: #fff; }

/* ---------- 8. quiz player ---------- */
.nx-play { background: #fff; border: 1px solid var(--nx-line); border-radius: var(--nx-r-xl); box-shadow: var(--nx-sh-2); overflow: hidden; }
.nx-play__bar { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--nx-line); background: var(--nx-surface-2); }
.nx-play__q { font-size: 13.5px; font-weight: 700; color: var(--nx-muted); font-variant-numeric: tabular-nums; }
.nx-play__tm { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--nx-r-pill); background: #fff; border: 1px solid var(--nx-line-2); font: 700 14px/1 var(--nx-ff); font-variant-numeric: tabular-nums; color: var(--nx-ink-2); }
.nx-play__tm.is-low { color: var(--nx-bad); border-color: color-mix(in srgb, var(--nx-bad) 40%, #fff); background: #fff2f2; }
.nx-play__dots { display: flex; gap: 5px; margin-left: auto; flex-wrap: wrap; }
.nx-play__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--nx-line-2); cursor: pointer; }
.nx-play__dots i.on { background: var(--nx-acc); box-shadow: 0 0 0 3px var(--nx-acc-tint); }
.nx-play__dots i.ok { background: var(--nx-ok); }
.nx-play__dots i.no { background: var(--nx-bad); }
.nx-play__body { padding: clamp(20px, 3vw, 34px); display: grid; gap: 22px; }
.nx-play__ask { font-size: clamp(18px, 2vw, 23px); font-weight: 640; line-height: 1.42; letter-spacing: -.022em; }
.nx-play__fig { border: 1px solid var(--nx-line); border-radius: var(--nx-r); overflow: hidden; background: var(--nx-surface-2); }
.nx-play__opts { display: grid; gap: 11px; }
.nx-opt { display: flex; align-items: center; gap: 14px; padding: 15px 17px; border-radius: var(--nx-r); border: 1.5px solid var(--nx-line); background: #fff; cursor: pointer; font-size: 15.5px; font-weight: 550; text-align: left; width: 100%; transition: all .16s var(--nx-ease); }
.nx-opt:hover { border-color: var(--nx-acc); background: var(--nx-acc-tint); }
.nx-opt__l { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--nx-bg-2); color: var(--nx-ink-2); font: 700 15px/1 var(--nx-ff); }
.nx-opt.is-sel { border-color: var(--nx-acc); box-shadow: 0 0 0 3px var(--nx-acc-tint); }
.nx-opt.is-sel .nx-opt__l { background: var(--nx-acc); color: #fff; }
.nx-opt.is-ok { border-color: var(--nx-ok); background: #f1fcf5; }
.nx-opt.is-ok .nx-opt__l { background: var(--nx-ok); color: #fff; }
.nx-opt.is-no { border-color: var(--nx-bad); background: #fdf3f3; }
.nx-opt.is-no .nx-opt__l { background: var(--nx-bad); color: #fff; }
.nx-opt__k { margin-left: auto; color: var(--nx-faint); font-size: 12px; }
.nx-play__foot { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--nx-line); background: var(--nx-surface-2); flex-wrap: wrap; }
.nx-why { border-radius: var(--nx-r); border: 1px dashed color-mix(in srgb, var(--nx-ok) 45%, var(--nx-line)); background: #f4fbf7; padding: 16px 18px; display: grid; gap: 8px; }
.nx-why b { color: #14663a; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.nx-why p { font-size: 15px; color: var(--nx-ink-2); line-height: 1.6; }
.nx-why ol { display: grid; gap: 7px; counter-reset: s; }
.nx-why ol li { counter-increment: s; padding-left: 30px; position: relative; font-size: 14.5px; color: var(--nx-ink-2); }
.nx-why ol li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 7px; background: #fff; border: 1px solid var(--nx-line); display: grid; place-items: center; font: 700 11.5px/1 var(--nx-ff); color: #14663a; }

/* results donut */
.nx-res { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 38px); align-items: center; padding: clamp(22px, 3vw, 34px); }
.nx-donut { position: relative; width: 168px; height: 168px; }
.nx-donut svg { transform: rotate(-90deg); }
.nx-donut__t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.nx-donut__t b { font: 750 34px/1 var(--nx-ff); letter-spacing: -.04em; }
.nx-donut__t span { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nx-faint); }
.nx-res__g { display: grid; gap: 14px; }
.nx-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--nx-line); border-radius: var(--nx-r); overflow: hidden; }
.nx-kv div { background: #fff; padding: 13px 15px; }
.nx-kv b { display: block; font-size: 20px; font-weight: 730; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.nx-kv span { font-size: 11.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--nx-faint); }

/* ---------- 9. tables ---------- */
.nx-tbl { background: #fff; border: 1px solid var(--nx-line); border-radius: var(--nx-r-lg); overflow: hidden; box-shadow: var(--nx-sh-1); }
.nx-tbl table { font-size: 14.5px; }
.nx-tbl th { text-align: left; padding: 13px 18px; background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-line); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nx-faint); white-space: nowrap; }
.nx-tbl td { padding: 14px 18px; border-bottom: 1px solid var(--nx-line); vertical-align: middle; }
.nx-tbl tr:last-child td { border-bottom: 0; }
.nx-tbl tbody tr:hover { background: var(--nx-acc-tint); }
.nx-tbl td b { font-weight: 640; letter-spacing: -.01em; }
.nx-tbl .num { font-variant-numeric: tabular-nums; text-align: right; }
.nx-tbl--compare th:first-child, .nx-tbl--compare td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; font-weight: 660; }
.nx-tbl__scroll { overflow-x: auto; }

/* ---------- 10. prose (notes, guides, static pages) ---------- */
.nx-prose { font-size: 17px; line-height: 1.75; color: var(--nx-ink-2); display: grid; gap: 18px; max-width: 74ch; }
.nx-prose h2 { font-family: var(--nx-fd); font-size: 26px; margin-top: 14px; letter-spacing: -.03em; }
.nx-prose h3 { font-size: 19.5px; margin-top: 10px; }
.nx-prose p > strong { color: var(--nx-ink); }
.nx-prose ul.b { display: grid; gap: 9px; padding-left: 4px; }
.nx-prose ul.b li { position: relative; padding-left: 26px; }
.nx-prose ul.b li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 3px; background: var(--nx-acc); rotate: 45deg; }
.nx-prose blockquote { margin: 0; padding: 18px 22px; border-radius: var(--nx-r); background: var(--nx-acc-tint); border-left: 4px solid var(--nx-acc); font-family: var(--nx-fd); font-size: 18px; color: var(--nx-acc-ink); }
.nx-prose a { color: var(--nx-acc-2); text-decoration: underline; text-underline-offset: 3px; }
.nx-callout { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--nx-r-lg); background: #fff; border: 1px solid var(--nx-line); box-shadow: var(--nx-sh-1); }
.nx-callout--amber { background: #fffaef; border-color: #f6e3ba; }

/* ---------- 11. footer ---------- */
.nx-foot { margin-top: clamp(40px, 6vw, 80px); background: #0b1120; color: #aeb8c8; }
.nx-foot__g { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(24px, 4vw, 54px); padding: clamp(36px, 5vw, 62px) 0 30px; }
.nx-foot .nx-brand__t b { color: #fff; }
.nx-foot .nx-brand__t small { color: #7b8698; }
.nx-foot__x { display: grid; gap: 14px; max-width: 34ch; margin-top: 14px; font-size: 14px; line-height: 1.6; color: #93a0b4; }
.nx-foot h4 { color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.nx-foot ul { display: grid; gap: 9px; font-size: 14.5px; }
.nx-foot ul a { color: #93a0b4; }
.nx-foot ul a:hover { color: #fff; }
.nx-foot__b { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; padding: 20px 0 26px; border-top: 1px solid #1d2637; font-size: 13px; color: #7b8698; }
.nx-foot__b nav { display: flex; gap: 20px; flex-wrap: wrap; }
.nx-foot__soc { display: flex; gap: 9px; }
.nx-foot__soc a { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #151d2e; color: #aeb8c8; }
.nx-foot__soc a:hover { background: var(--nx-acc); color: #fff; }

/* mobile bottom bar */
.nx-tabbar { position: sticky; bottom: 0; z-index: 80; display: none; background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--nx-line); }
.nx-tabbar a { display: grid; justify-items: center; gap: 3px; padding: 9px 4px calc(9px + env(safe-area-inset-bottom)); font-size: 11px; font-weight: 650; color: var(--nx-muted); }
.nx-tabbar a.on { color: var(--nx-acc-2); }

/* ---------- 12. odds and ends ---------- */
.nx-empty { display: grid; gap: 10px; justify-items: center; text-align: center; padding: clamp(40px, 7vw, 84px) 24px; }
.nx-empty__i { width: 68px; height: 68px; border-radius: 22px; display: grid; place-items: center; background: var(--nx-acc-tint); color: var(--nx-acc-2); }
.nx-marq { overflow: hidden; display: flex; gap: 10px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.nx-marq__t { display: flex; gap: 10px; flex: none; animation: nx-mv 42s linear infinite; }
@keyframes nx-mv { to { transform: translateX(calc(-50% - 5px)); } }
.nx-zoom { position: fixed; inset: 0; z-index: 160; background: rgba(11, 17, 32, .9); display: grid; place-items: center; padding: 4vw; opacity: 0; pointer-events: none; transition: opacity .22s; }
.nx-zoom.is-open { opacity: 1; pointer-events: auto; }
.nx-zoom img { max-width: 100%; max-height: 88vh; border-radius: var(--nx-r); background: #fff; box-shadow: var(--nx-sh-3); }
.nx-hero__c { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.nx-note { padding: 20px 22px; }
.nx-hi { background: linear-gradient(180deg, transparent 62%, var(--nx-acc-tint) 0); }
.nx-badge { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 8px; background: var(--nx-acc); color: #fff; font: 700 12px/1 var(--nx-ff); }
.nx-steps { display: grid; gap: 0; counter-reset: st; }
.nx-steps > div { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--nx-line); }
.nx-steps > div:last-child { border-bottom: 0; }
.nx-steps > div::before { counter-increment: st; content: counter(st, decimal-leading-zero); font: 750 22px/1 var(--nx-ff); color: var(--nx-acc); letter-spacing: -.04em; }
.nx-steps b { font-size: 16.5px; font-weight: 670; display: block; margin-bottom: 4px; }
.nx-steps p { font-size: 14.5px; color: var(--nx-muted); }

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

/* ---------- 13. responsive ---------- */
@media (max-width: 1180px) {
    .nx-grid--c4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nx-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
    .nx-hero__g { grid-template-columns: 1fr; }
    .nx-stack { max-width: 640px; }
    .nx-split, .nx-split--r { grid-template-columns: 1fr; }
    .nx-side { position: static; }
    .nx-grid--c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-fig { grid-template-columns: 1fr; }
    .nx-nav { display: none; }
    .nx-burger { display: inline-grid; place-items: center; }
    .nx-search { max-width: none; }
}
@media (max-width: 760px) {
    :root { --nx-gut: 16px; }
    .nx-top { height: 62px; }
    .nx-grid--c2, .nx-grid--c3, .nx-grid--c4 { grid-template-columns: 1fr; }
    .nx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-kv { grid-template-columns: 1fr; }
    .nx-sub { grid-template-columns: 1fr; }
    .nx-trio { grid-template-columns: 1fr; }
    .nx-foot__g { grid-template-columns: 1fr 1fr; }
    .nx-res { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .nx-search { display: none; }
    .nx-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); }
    .nx-ctx { display: none; }
}
@media print {
    .nx-top, .nx-foot, .nx-tabbar, .nx-drawer, .nx-search, .nx-btn { display: none !important; }
    body.nx { background: #fff; }
}

/* ---------- 14. study-plan widget (dhn/dhn-me.js) wearing the NX design ---------- */
.dme-scrim { background: rgba(16, 24, 40, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dme {
    padding: 26px 26px 22px; border-radius: var(--nx-r-xl); border: 1px solid var(--nx-line);
    background: var(--nx-surface); color: var(--nx-ink); font-family: var(--nx-ff);
    box-shadow: var(--nx-sh-3); letter-spacing: -.006em;
}
.dme, .dme button, .dme input, .dme select, .dme-bar, .dme-related-h { font-family: var(--nx-ff); }
.dme-x { background: var(--nx-bg-2); color: var(--nx-muted); }
.dme-x:hover { background: var(--nx-acc-tint); color: var(--nx-acc-2); }
.dme-kick { background: var(--nx-acc-tint); color: var(--nx-acc-2); letter-spacing: .11em; font-weight: 700; }
.dme h2, .dme-related-h h2, .dme-lh h3 { font-family: var(--nx-fd); color: var(--nx-ink); letter-spacing: -.03em; }
.dme h2 { font-size: 27px; }
.dme-sub, .dme h3, .dme-lh small { color: var(--nx-muted); }
.dme h3 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nx-faint); }
.dme-chips button {
    padding: 8px 14px; border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-pill);
    background: var(--nx-surface); color: var(--nx-ink-2); font-size: 13.5px; font-weight: 600;
}
.dme-chips button:hover { border-color: var(--nx-acc); color: var(--nx-acc-2); }
.dme-chips button.on, .dme-tab.on {
    background: var(--nx-ink); border-color: var(--nx-ink); color: #fff; box-shadow: var(--nx-sh-2); transform: none;
}
.dme-row label { color: var(--nx-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dme-row input, .dme-row select {
    height: 44px; padding: 0 13px; border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-sm);
    background: #fff; color: var(--nx-ink); font-weight: 500;
}
.dme-row input:focus-visible, .dme-row select:focus-visible { border-color: var(--nx-acc); box-shadow: 0 0 0 4px var(--nx-acc-tint); outline: none; }
.dme-act button { min-height: 46px; padding: 0 20px; border-radius: var(--nx-r-sm); font-weight: 600; font-size: 15px; }
.dme-skip { border: 1px solid var(--nx-line-2); background: var(--nx-surface); color: var(--nx-ink); box-shadow: var(--nx-sh-1); }
.dme-skip:hover { border-color: var(--nx-acc); color: var(--nx-acc-2); background: var(--nx-acc-tint); }
.dme-ok { background: var(--nx-acc); color: #fff; box-shadow: var(--nx-sh-acc); }
.dme-ok:hover { background: var(--nx-acc-2); transform: translateY(-1px); }
.dme-bar { background: var(--nx-acc-tint); border: 1px solid color-mix(in srgb, var(--nx-acc) 22%, #fff); border-radius: var(--nx-r); color: var(--nx-acc-ink); }
.dme-bar b { color: var(--nx-ink); }
.dme-bar button, .dme-related-h button {
    padding: 7px 13px; border: 1px solid var(--nx-line-2); border-radius: 9px;
    background: #fff; color: var(--nx-acc-2); font-weight: 600; font-size: 13.5px;
}
.dme-bar button:hover, .dme-related-h button:hover { border-color: var(--nx-acc); background: var(--nx-acc); color: #fff; }
.dme-tab { padding: 8px 14px; border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-pill); background: var(--nx-surface); color: var(--nx-ink-2); font-weight: 600; font-size: 13.5px; }
.dme-tab em { background: var(--nx-bg-2); color: var(--nx-muted); }
.dme-tab.on em { background: rgba(255, 255, 255, .2); color: #fff; }
.dme-tab[data-k="biology"] span { background: var(--nx-bio); }
.dme-tab[data-k="chemistry"] span { background: var(--nx-chem); }
.dme-tab[data-k="physics"] span { background: var(--nx-phys); }
.dme-tab[data-k="combined-science"] span { background: var(--nx-comb); }
.dme-lh { border-inline-start: 3px solid var(--nx-acc); }
.dme-arr button { width: 32px; height: 32px; border: 1px solid var(--nx-line-2); background: #fff; color: var(--nx-ink-2); font-size: 18px; }
.dme-arr button:hover { border-color: var(--nx-acc); color: var(--nx-acc-2); }

/* ---- 15. lesson result card (search, lesson rails) ---- */
.nx-lc { display: grid; grid-template-columns: 148px minmax(0, 1fr); overflow: hidden; }
.nx-lc__i { display: block; background: var(--nx-bg-2); }
.nx-lc__i img { display: block; width: 100%; height: 100%; min-height: 132px; object-fit: cover; }
.nx-lc__b { display: grid; gap: 9px; align-content: start; padding: 15px 17px 16px; }
.nx-lc__t { font-size: 16.5px; font-weight: 670; letter-spacing: -.02em; line-height: 1.32; }
.nx-lc__t b { color: var(--nx-acc-2); font-weight: 750; margin-right: 5px; }
.nx-lc__m { font-size: 12.8px; color: var(--nx-muted); }
@media (max-width: 620px) { .nx-lc { grid-template-columns: 108px minmax(0, 1fr); } .nx-lc__b { padding: 12px 13px; } }