/* ================================================================
   NeuroSchool — shared UI foundation (UX Phase A)

   Scope of this file is intentionally small: design tokens that new and
   refactored views can use, plus global accessibility fixes. It does not
   restyle existing pages; module-by-module adoption is planned in
   docs/UX_PWA_IMPROVEMENT.md (Phase B).
   ================================================================ */

:root {
    /* B6: role/section header gradients. White text needs >= 4.5:1 on both stops (all pairs here pass). */
    --ns-grad-blue-start: #1d4ed8;   --ns-grad-blue-end: #0369a1;
    --ns-grad-green-start: #0f766e;  --ns-grad-green-end: #15803d;
    --ns-grad-rose-start: #be185d;   --ns-grad-rose-end: #b91c1c;
    --ns-grad-teal-start: #134e5e;   --ns-grad-teal-end: #15803d;
    --ns-grad-violet-start: #6f42c1; --ns-grad-violet-end: #be185d;

    /* Brand (contrast-checked: white text on --ns-primary is 6.5:1, AA for normal text) */
    --ns-primary: #4c51bf;
    --ns-primary-hover: #3c40a0;
    --ns-primary-subtle: #eef0ff;
    --ns-accent: #764ba2;

    /* Text and surfaces */
    --ns-text: #1f2333;
    --ns-text-muted: #4a5068;      /* 8.0:1 on white */
    --ns-surface: #ffffff;
    --ns-surface-alt: #f6f7fb;
    --ns-border: #dfe2ec;

    /* Feedback */
    --ns-success: #16794a;
    --ns-warning: #8a5a00;
    --ns-danger: #b42318;
    --ns-info: #1f5fbf;
    --ns-focus: #1a56db;

    /* Typography — Bangla-first stack, falls back to system fonts */
    --ns-font-sans: "Hind Siliguri", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ns-line-height: 1.6;          /* Bangla conjuncts need more line height than Latin text */

    /* Spacing scale (4px base) */
    --ns-space-1: 0.25rem;
    --ns-space-2: 0.5rem;
    --ns-space-3: 0.75rem;
    --ns-space-4: 1rem;
    --ns-space-5: 1.5rem;
    --ns-space-6: 2rem;

    /* Shape and elevation */
    --ns-radius-sm: 6px;
    --ns-radius: 10px;
    --ns-radius-lg: 14px;
    --ns-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
    --ns-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);

    /* Minimum touch target (WCAG 2.5.8 asks 24px; 44px is the comfortable target) */
    --ns-touch-target: 44px;
}

body {
    line-height: var(--ns-line-height);
}

/* ---------------------------------------------------------------
   Phase B1: brand navbar — solid Indigo (approved #4C51BF).
   Bootstrap's navbar-dark links are white at 55% opacity, which was 2.2:1 on
   the old #667eea gradient; here they are 92% white = 5.8:1 (WCAG AA).
   --------------------------------------------------------------- */
.ns-navbar {
    background-color: var(--ns-primary);
    --bs-navbar-color: rgba(255, 255, 255, 0.92);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
}

/* ---------------------------------------------------------------
   Skip link — hidden until focused with the keyboard
   --------------------------------------------------------------- */
.ns-skip-link {
    position: absolute;
    top: -100px;
    left: var(--ns-space-2);
    z-index: 2000;
    padding: var(--ns-space-2) var(--ns-space-4);
    background: var(--ns-surface);
    color: var(--ns-primary);
    border: 2px solid var(--ns-focus);
    border-radius: var(--ns-radius-sm);
    font-weight: 600;
    text-decoration: none;
}

.ns-skip-link:focus {
    top: var(--ns-space-2);
}

/* The skip target receives focus programmatically; no outline box around the whole page */
#main-content:focus {
    outline: none;
}

/* ---------------------------------------------------------------
   Visible keyboard focus everywhere (mouse clicks are unaffected)
   --------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--ns-focus);
    outline-offset: 2px;
}

.navbar-dark .nav-link:focus-visible,
.navbar-dark .navbar-brand:focus-visible,
.navbar-dark .navbar-toggler:focus-visible {
    outline-color: #ffffff;
}

/* ---------------------------------------------------------------
   Touch targets for the main navigation on small screens
   --------------------------------------------------------------- */
.navbar-toggler {
    min-width: var(--ns-touch-target);
    min-height: var(--ns-touch-target);
}

@media (max-width: 991.98px) {
    .navbar .nav-link,
    .navbar .dropdown-item {
        min-height: var(--ns-touch-target);
        display: flex;
        align-items: center;
        gap: var(--ns-space-2);
    }
}

/* ---------------------------------------------------------------
   Respect the user's reduced-motion setting (WCAG 2.3.3)
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------
   Long words / URLs must not push the page sideways on phones
   --------------------------------------------------------------- */
main {
    overflow-wrap: break-word; /* does not change table column sizing, unlike "anywhere" */
}

main img,
main video {
    max-width: 100%;
}

/* ================================================================
   Phase B3 — navigation shell
   Desktop (≥992px, signed in): sticky sidebar left of the content.
   Mobile (<992px): bottom bar with 4 role-specific items + "Menu" (offcanvas).
   ================================================================ */
:root {
    --ns-topbar-height: 56px;
    --ns-sidebar-width: 248px;
    --ns-bottom-nav-height: 64px;
}

.ns-account-btn {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.55);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: var(--ns-space-2);
}

.ns-account-btn:hover,
.ns-account-btn:focus-visible,
.ns-account-btn.show {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.14);
}

.ns-shell {
    display: flex;
    align-items: flex-start;
    flex: 1 0 auto; /* body is a flex column (see _Layout): the shell, not <main>, pushes the footer down */
    width: 100%;
}

.ns-shell > main {
    flex: 1 1 auto;
    min-width: 0; /* lets wide tables/charts scroll inside main instead of widening the page */
}

/* ---------- Sidebar (desktop) ---------- */
.ns-sidebar {
    flex: 0 0 var(--ns-sidebar-width);
    width: var(--ns-sidebar-width);
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding: var(--ns-space-4) var(--ns-space-3) var(--ns-space-6);
    background: var(--ns-surface-alt);
    border-right: 1px solid var(--ns-border);
}

/* ---------- Shared section list (sidebar + offcanvas) ---------- */
.ns-nav-section + .ns-nav-section {
    margin-top: var(--ns-space-4);
}

.ns-nav-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ns-text-muted);
    margin: 0 0 var(--ns-space-1);
    padding: 0 var(--ns-space-3);
}

.ns-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ns-nav-link {
    display: flex;
    align-items: center;
    gap: var(--ns-space-3);
    min-height: 40px;
    padding: var(--ns-space-2) var(--ns-space-3);
    border-radius: var(--ns-radius-sm);
    color: var(--ns-text);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.3;
}

.ns-nav-link i {
    font-size: 1.05rem;
    color: var(--ns-text-muted);
    flex: 0 0 auto;
}

.ns-nav-link:hover {
    background: var(--ns-primary-subtle);
    color: var(--ns-primary-hover);
}

.ns-nav-link.active {
    background: var(--ns-primary-subtle);
    color: var(--ns-primary-hover);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--ns-primary);
}

.ns-nav-link.active i,
.ns-nav-link:hover i {
    color: var(--ns-primary);
}

/* ---------- Offcanvas (mobile full menu) ---------- */
.ns-offcanvas {
    --bs-offcanvas-width: min(320px, 88vw);
}

.ns-offcanvas .ns-nav-link {
    min-height: var(--ns-touch-target);
}

/* ---------- Bottom bar (mobile) ---------- */
.ns-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--ns-surface);
    border-top: 1px solid var(--ns-border);
    box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
}

.ns-bottom-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ns-bottom-nav li {
    flex: 1 1 0;
    min-width: 0;
}

.ns-bottom-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: var(--ns-bottom-nav-height);
    padding: 6px 2px;
    background: none;
    border: 0;
    color: var(--ns-text-muted);
    font-size: 0.72rem;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
}

.ns-bottom-link span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns-bottom-link i {
    font-size: 1.3rem;
}

.ns-bottom-link.active {
    color: var(--ns-primary);
    font-weight: 600;
}

@media (max-width: 991.98px) {
    /* Keep the last content, footer and floating PWA messages above the bottom bar */
    /* "html body" outranks the installed-app (display-mode: standalone) rule inside _Layout */
    html body {
        padding-bottom: calc(var(--ns-bottom-nav-height) + env(safe-area-inset-bottom));
    }

    .pwa-update-toast,
    .pwa-install-banner {
        bottom: calc(var(--ns-bottom-nav-height) + 12px + env(safe-area-inset-bottom)) !important;
    }
}

@media print {
    .ns-sidebar,
    .ns-bottom-nav,
    .ns-offcanvas {
        display: none !important;
    }
}

/* ---------------------------------------------------------------
   Phase B5a: busy state for a submit button while its form is posting
   (see site.js). The button stays focusable; a spinner signals progress.
   --------------------------------------------------------------- */
.ns-is-submitting {
    position: relative;
    pointer-events: none;
    opacity: 0.75;
}

.ns-is-submitting::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    vertical-align: -0.125em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ns-spin 0.75s linear infinite;
}

@keyframes ns-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------
   Phase B2 (2026-10-14): Bootstrap's "primary" = brand Indigo (#4C51BF).
   Bootstrap 5.3.0 is pinned in _Layout; these are its documented CSS variables.
   Contrast (WCAG 2.1, checked in UxPwaGuardTests):
     white on #4C51BF 6.5:1 · on #3C40A0 (hover) 8.6:1 · on #33378A (active) 10.2:1
     #4C51BF text on white 6.5:1, on --ns-primary-subtle 5.7:1
     white on #764BA2 (gradient end) 6.4:1  — the old #667EEA gradient start was 3.7:1 (failed AA).
   --------------------------------------------------------------- */
:root {
    --ns-primary-active: #33378a;
    --ns-primary-border-subtle: #c7c9f0;
    --ns-primary-text-emphasis: #1e2155;
    --ns-primary-focus-ring: rgba(76, 81, 191, 0.35);

    --bs-primary: #4c51bf;
    --bs-primary-rgb: 76, 81, 191;
    --bs-primary-text-emphasis: var(--ns-primary-text-emphasis);
    --bs-primary-bg-subtle: var(--ns-primary-subtle);
    --bs-primary-border-subtle: var(--ns-primary-border-subtle);
    --bs-link-color: #4c51bf;
    --bs-link-color-rgb: 76, 81, 191;
    --bs-link-hover-color: #3c40a0;
    --bs-link-hover-color-rgb: 60, 64, 160;
    --bs-focus-ring-color: var(--ns-primary-focus-ring);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ns-primary);
    --bs-btn-border-color: var(--ns-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ns-primary-hover);
    --bs-btn-hover-border-color: var(--ns-primary-hover);
    --bs-btn-focus-shadow-rgb: 76, 81, 191;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ns-primary-active);
    --bs-btn-active-border-color: var(--ns-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ns-primary);
    --bs-btn-disabled-border-color: var(--ns-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--ns-primary);
    --bs-btn-border-color: var(--ns-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ns-primary);
    --bs-btn-hover-border-color: var(--ns-primary);
    --bs-btn-focus-shadow-rgb: 76, 81, 191;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ns-primary-active);
    --bs-btn-active-border-color: var(--ns-primary-active);
    --bs-btn-disabled-color: var(--ns-primary);
    --bs-btn-disabled-border-color: var(--ns-primary);
}

.btn-link {
    --bs-btn-color: var(--ns-primary);
    --bs-btn-hover-color: var(--ns-primary-hover);
    --bs-btn-active-color: var(--ns-primary-active);
}

/* Form controls: Bootstrap hard-codes a blue focus border/shadow. */
.form-control:focus,
.form-select:focus {
    border-color: #9a9de0;
    box-shadow: 0 0 0 0.25rem var(--ns-primary-focus-ring);
}

.form-check-input:checked {
    background-color: var(--ns-primary);
    border-color: var(--ns-primary);
}

.form-check-input:focus {
    border-color: #9a9de0;
    box-shadow: 0 0 0 0.25rem var(--ns-primary-focus-ring);
}

.form-range::-webkit-slider-thumb { background-color: var(--ns-primary); }
.form-range::-moz-range-thumb { background-color: var(--ns-primary); }

.pagination {
    --bs-pagination-color: var(--ns-primary);
    --bs-pagination-hover-color: var(--ns-primary-hover);
    --bs-pagination-focus-color: var(--ns-primary-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--ns-primary-focus-ring);
    --bs-pagination-active-bg: var(--ns-primary);
    --bs-pagination-active-border-color: var(--ns-primary);
}

.nav-pills { --bs-nav-pills-link-active-bg: var(--ns-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--ns-primary); }
.list-group {
    --bs-list-group-active-bg: var(--ns-primary);
    --bs-list-group-active-border-color: var(--ns-primary);
}
.progress, .progress-stacked { --bs-progress-bar-bg: var(--ns-primary); }
.accordion {
    --bs-accordion-active-color: var(--ns-primary-text-emphasis);
    --bs-accordion-active-bg: var(--ns-primary-subtle);
    --bs-accordion-btn-focus-border-color: #9a9de0;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--ns-primary-focus-ring);
}

/* One shared brand gradient (was copied into 11 views as #667EEA → #764BA2). */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--ns-primary) 0%, var(--ns-accent) 100%);
    color: #fff;
}

/* ---------------------------------------------------------------
   Phase B6 (2026-10-14): shared pieces that replace per-view inline styles.
   --------------------------------------------------------------- */
/* nsUi.notify() toasts: below the top bar, above the mobile bottom nav and modals' backdrop. */
.ns-toast-region {
    top: calc(var(--ns-topbar-height) + 0.5rem);
    z-index: 1090;
    max-width: min(420px, 100vw);
}
/* Messages are plain text; keep their line breaks (\n) visible. */
.ns-toast-region .toast-body,
#ns-confirm-body { white-space: pre-line; }

/* Tables -> cards on phones. Add .ns-table-stack to the <table>; site.js copies each column
   header into the cell's data-label. Wider screens keep the normal table. */
@media (max-width: 575.98px) {
    .table.ns-table-stack thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .table.ns-table-stack,
    .table.ns-table-stack tbody,
    .table.ns-table-stack tr,
    .table.ns-table-stack td { display: block; width: 100%; }
    .table.ns-table-stack tr {
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius-lg, 0.5rem);
        margin-bottom: 0.75rem;
        padding: 0.25rem 0.75rem;
        background: var(--bs-body-bg);
    }
    .table.ns-table-stack td {
        display: flex; justify-content: space-between; align-items: center; gap: 1rem;
        border: 0; padding: 0.375rem 0; text-align: end;
    }
    .table.ns-table-stack td::before {
        content: attr(data-label);
        font-weight: 600; text-align: start;
        color: var(--bs-secondary-color);
    }
    .table.ns-table-stack td:not([data-label])::before,
    .table.ns-table-stack td[data-label=""]::before { content: none; }
    .table.ns-table-stack td[data-label=""] { justify-content: flex-end; }
}

/* Progress bar heights (were style="height: 6/8/10px"). */
.progress.ns-progress-xs { height: 0.375rem; }
.progress.ns-progress-sm { height: 0.5rem; }
.progress.ns-progress-md { height: 0.625rem; }

/* Course card cover image (was style="height:180px; object-fit:cover"). */
.ns-card-img {
    height: 180px;
    object-fit: cover;
}

/* Small badge text: 12px minimum (was 10px). */
.badge.ns-badge-sm { font-size: 0.75rem; }

/* ---------------------------------------------------------------
   Phase B4 (2026-10-14): shared page header (<ns-page-header> tag helper).
   --------------------------------------------------------------- */
.ns-page-header { margin-bottom: 1.25rem; }
.ns-page-header .breadcrumb { margin-bottom: 0.5rem; font-size: 0.875rem; }
.ns-page-header__main {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
}
.ns-page-header__text { min-width: 0; }
.ns-page-title {
    margin: 0; font-weight: 700; line-height: 1.25;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    overflow-wrap: anywhere;
}
.ns-page-title .bi { color: var(--ns-primary); }
.ns-page-title-note { color: var(--bs-secondary-color); font-size: 1rem; font-weight: 400; }
.ns-page-subtitle { margin: 0.25rem 0 0; color: var(--bs-secondary-color); }
.ns-page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
@media (max-width: 575.98px) {
    .ns-page-actions { width: 100%; }
    .ns-page-actions > .btn, .ns-page-actions > form { flex: 1 1 auto; }
}

/* ================================================================
   UI/UX pass (2026-10-24) — typography, colour consistency, shared
   components (hero, stat, empty, progress, skeleton), page states and
   form feedback. Rules that used to live in an inline <style> block in
   _Layout.cshtml are here too, so the browser can cache them.
   ================================================================ */

/* ---------- Typography and base colours ---------- */
:root {
    /* Bangla-first: Windows ships "Nirmala UI", Android/ChromeOS "Noto Sans Bengali". No web font download. */
    --ns-font-sans: "Hind Siliguri", "Noto Sans Bengali", "Nirmala UI", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--ns-font-sans);
    --bs-body-color: var(--ns-text);
    --bs-emphasis-color: var(--ns-text);
    --bs-secondary-color: var(--ns-text-muted);   /* Bootstrap's 75%-black muted text was 4.4:1 on light grey */
    --bs-border-color: var(--ns-border);
}

body {
    font-family: var(--ns-font-sans);
    color: var(--ns-text);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.3;               /* Bangla matras and conjuncts clip at Bootstrap's 1.2 */
    color: inherit;
}

.text-muted { color: var(--ns-text-muted) !important; }

/* Text (not icons) in Bootstrap's info/warning colours is 1.6–2:1 on white. Use the 5.3
   "emphasis" shades for text; decorative icons keep the bright colour. */
:where(p, span, small, strong, b, em, div, label, td, th, li, dd, dt, a, h1, h2, h3, h4, h5, h6).text-warning:not(:is(.text-bg-dark, .bg-dark, [class*="bg-gradient"], .bg-primary, .bg-success, .bg-danger, .bg-secondary, .text-white, .navbar) *) {
    color: var(--bs-warning-text-emphasis) !important;
}
:where(p, span, small, strong, b, em, div, label, td, th, li, dd, dt, a, h1, h2, h3, h4, h5, h6).text-info:not(:is(.text-bg-dark, .bg-dark, [class*="bg-gradient"], .bg-primary, .bg-success, .bg-danger, .bg-secondary, .text-white, .navbar) *) {
    color: var(--bs-info-text-emphasis) !important;
}

/* Emoji used as decoration next to text should not change line height. */
.ns-emoji { font-style: normal; line-height: 1; }

/* ---------- Page container rhythm ---------- */
.ns-page {
    padding-top: var(--ns-space-5);
    padding-bottom: var(--ns-space-6);
}
@media (max-width: 575.98px) {
    .ns-page { padding-top: var(--ns-space-4); }
    .container-fluid.py-4 { padding-top: var(--ns-space-4) !important; }
}

/* Section headings inside cards: one consistent size. */
.ns-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ns-space-2);
}
.ns-section-title > .bi { color: var(--ns-primary); }

.ns-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ns-space-2);
    background: transparent;
    border: 0;
    padding: var(--ns-space-4) var(--ns-space-4) 0;
}
@media (min-width: 768px) {
    .ns-card-header { padding: var(--ns-space-5) var(--ns-space-5) 0; }
}

/* ---------- Cards: lift only when the whole card is clickable ---------- */
.card { --bs-card-border-color: var(--ns-border); }
a.card,
.card.ns-card-link,
.card:has(.stretched-link) {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.card:hover,
.card.ns-card-link:hover,
.card:has(.stretched-link):hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.10) !important;
}
a.card:focus-within,
.card:has(.stretched-link:focus-visible) {
    outline: 3px solid var(--ns-focus);
    outline-offset: 2px;
}

/* ---------- Hero banner (role dashboards) ---------- */
.ns-hero {
    border: 0;
    border-radius: var(--ns-radius-lg);
    color: #fff;
    padding: var(--ns-space-5);
    margin-bottom: var(--ns-space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ns-space-4);
    box-shadow: var(--ns-shadow);
}
.ns-hero:not([class*="bg-gradient"]) {
    background: linear-gradient(135deg, var(--ns-primary) 0%, var(--ns-accent) 100%);
}
.ns-hero__text { min-width: 0; flex: 1 1 22rem; }
.ns-hero__title {
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 700;
    margin: 0 0 var(--ns-space-1);
    overflow-wrap: anywhere;
}
.ns-hero__lead { margin: 0; opacity: 0.95; }
.ns-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ns-space-2);
    margin-top: var(--ns-space-3);
    padding: 0;
    list-style: none;
}
.ns-hero__meta > li,
.ns-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ns-text);
}
.ns-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ns-space-2);
    align-items: center;
}
.ns-hero .btn-outline-light { --bs-btn-hover-color: var(--ns-primary-text-emphasis); }
@media (max-width: 575.98px) {
    .ns-hero { padding: var(--ns-space-4); }
    .ns-hero__actions { width: 100%; }
    .ns-hero__actions > .btn { flex: 1 1 auto; }
}

/* ---------- Stat cards (<ns-stat>) ---------- */
.ns-stat {
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-lg);
    box-shadow: var(--ns-shadow-sm);
    height: 100%;
    position: relative;
}
.ns-stat .card-body {
    display: flex;
    align-items: flex-start;
    gap: var(--ns-space-3);
    padding: var(--ns-space-4);
}
.ns-stat__icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--ns-primary-subtle);
    color: var(--ns-primary-text-emphasis);
}
.ns-stat--success .ns-stat__icon { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.ns-stat--warning .ns-stat__icon { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.ns-stat--info .ns-stat__icon { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.ns-stat--danger .ns-stat__icon { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.ns-stat--secondary .ns-stat__icon { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); }
.ns-stat__body { min-width: 0; }
.ns-stat__label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ns-text-muted);
}
.ns-stat__value {
    margin: 0.125rem 0 0;
    font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.ns-stat__hint {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--ns-text-muted);
}
.ns-stat a.stretched-link { color: inherit; text-decoration: none; }
@media (max-width: 575.98px) {
    .ns-stat .card-body { flex-direction: column; gap: var(--ns-space-2); padding: var(--ns-space-3); }
    .ns-stat__icon { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
}

/* ---------- Empty state (<ns-empty-state>) ---------- */
.ns-empty {
    text-align: center;
    padding: var(--ns-space-6) var(--ns-space-4);
    color: var(--ns-text-muted);
}
.ns-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--ns-surface-alt);
    color: var(--ns-primary);
    font-size: 1.75rem;
    margin-bottom: var(--ns-space-3);
}
.ns-empty__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ns-text);
    margin: 0 0 var(--ns-space-1);
}
.ns-empty__text { margin: 0 auto; max-width: 32rem; }
.ns-empty__actions {
    margin-top: var(--ns-space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ns-space-2);
    justify-content: center;
}
.ns-empty--compact { padding: var(--ns-space-4) var(--ns-space-3); }
.ns-empty--compact .ns-empty__icon { width: 3rem; height: 3rem; font-size: 1.25rem; }

/* ---------- Progress (<ns-progress>) ---------- */
.ns-progress-row {
    display: flex;
    align-items: center;
    gap: var(--ns-space-2);
}
.ns-progress-row > .progress { flex: 1 1 auto; }
.ns-progress-value {
    flex: 0 0 auto;
    min-width: 3ch;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

/* ---------- Loading: skeletons and busy regions ---------- */
.ns-skeleton {
    display: block;
    background: linear-gradient(90deg, #eceef4 25%, #f6f7fb 37%, #eceef4 63%);
    background-size: 400% 100%;
    border-radius: var(--ns-radius-sm);
    animation: ns-shimmer 1.4s ease infinite;
    min-height: 1em;
}
.ns-skeleton--text { height: 0.875rem; margin-bottom: 0.5rem; }
.ns-skeleton--title { height: 1.25rem; width: 60%; margin-bottom: 0.75rem; }
.ns-skeleton--block { height: 6rem; }
@keyframes ns-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
[aria-busy="true"].ns-loading-region {
    position: relative;
    min-height: 4rem;
}
[aria-busy="true"].ns-loading-region::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    border-radius: inherit;
}
[aria-busy="true"].ns-loading-region::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(50% - 1rem);
    left: calc(50% - 1rem);
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--ns-primary);
    border-right-color: transparent;
    border-radius: 50%;
    animation: ns-spin 0.75s linear infinite;
}

/* ---------- Offline banner ---------- */
.ns-offline-banner {
    position: sticky;
    top: 0;
    z-index: 1031;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ns-space-2);
    padding: var(--ns-space-2) var(--ns-space-4);
    background: #3b2f00;
    color: #fff8e1;
    font-size: 0.9375rem;
    text-align: center;
}
.ns-offline-banner[hidden] { display: none; }

/* ---------- Status / error pages ---------- */
.ns-status-page {
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--ns-space-6) var(--ns-space-4);
    text-align: center;
}
.ns-status-page__code {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ns-primary-text-emphasis);
    background: var(--ns-primary-subtle);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    margin-bottom: var(--ns-space-3);
}
.ns-status-page__icon {
    font-size: 3rem;
    color: var(--ns-primary);
    display: block;
    margin-bottom: var(--ns-space-2);
}
.ns-status-page h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; }
.ns-status-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ns-space-2);
    margin-top: var(--ns-space-5);
}

/* ---------- Forms: feedback and validation ---------- */
.form-label,
.col-form-label { font-weight: 600; }
.form-text { color: var(--ns-text-muted); }

/* Required marker added by site.js to labels of required fields (visible "*", announced via aria-required). */
.ns-required::after {
    content: " *";
    color: var(--ns-danger);
    font-weight: 700;
}

/* ASP.NET's unobtrusive validation classes, styled like Bootstrap's invalid state. */
.input-validation-error,
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
    border-color: var(--ns-danger) !important;
}
.input-validation-error:focus,
.form-control[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 0.25rem rgba(180, 35, 24, 0.25) !important;
}
.field-validation-error {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ns-danger) !important;
}
.field-validation-error:not(:empty)::before {
    content: "\26A0\FE0E  ";          /* ⚠ — not colour alone (WCAG 1.4.1) */
}
.field-validation-valid { display: none; }
.validation-summary-valid { display: none !important; }   /* stops an empty red box showing */
.validation-summary-errors {
    color: var(--ns-danger);
}
.validation-summary-errors ul { margin-bottom: 0; padding-left: 1.25rem; }

.ns-error-summary {
    border-left: 4px solid var(--ns-danger);
}
.ns-error-summary:focus { outline: 3px solid var(--ns-focus); outline-offset: 2px; }
.ns-error-summary h2 { font-size: 1rem; font-weight: 700; margin-bottom: var(--ns-space-2); }
.ns-error-summary ul { margin: 0; padding-left: 1.25rem; }
.ns-error-summary a { color: inherit; font-weight: 600; }

/* Password show/hide button added by site.js */
.ns-pw-wrap { position: relative; }
.ns-pw-wrap > .form-control,
.form-floating > .form-control.ns-has-pw-toggle { padding-right: 3rem; }
.ns-pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: var(--ns-touch-target);
    height: 100%;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ns-text-muted);
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}
.form-floating > .ns-pw-toggle { height: calc(3.5rem + 2px); }
.ns-pw-toggle:hover { color: var(--ns-primary); }

/* Character counter for textareas with a max length */
.ns-char-count {
    display: block;
    text-align: end;
    font-size: 0.8125rem;
    color: var(--ns-text-muted);
    font-variant-numeric: tabular-nums;
}
.ns-char-count.is-near { color: var(--bs-warning-text-emphasis); font-weight: 600; }
.ns-char-count.is-over { color: var(--ns-danger); font-weight: 700; }

/* Tap targets for small buttons on touch screens (WCAG 2.5.8) */
@media (pointer: coarse) {
    .btn-sm { min-height: 36px; }
    .btn:not(.btn-sm):not(.btn-close):not(.btn-link) { min-height: var(--ns-touch-target); }
    .form-control:not(.form-control-sm), .form-select:not(.form-select-sm) { min-height: var(--ns-touch-target); }
}

/* ================================================================
   Moved from the inline <style> in _Layout.cshtml (2026-10-24)
   ================================================================ */
/* ---------- Navbar / dropdown ---------- */
.navbar-brand { font-weight: 700; font-size: 1.375rem; }
.navbar-brand i { margin-right: 8px; }

.dropdown-menu {
    border-radius: var(--ns-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    max-height: 80vh;
    overflow-y: auto;
}
.dropdown-item { padding: 8px 20px; transition: background-color 0.2s ease; }
.dropdown-item:hover { background-color: var(--ns-surface-alt); }
.dropdown-item i { width: 20px; margin-right: 10px; text-align: center; }
.dropdown-header {
    background-color: var(--ns-surface-alt);
    font-weight: 700;
    color: var(--ns-text);
    padding: 8px 20px;
}
.dropdown-divider { margin: 4px 0; }

/* ---------- Learning path badge (white text now ≥ 4.5:1 on every colour) ---------- */
.learning-path-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
}
.learning-path-badge.academic { background-color: var(--ns-success); }   /* was #28a745, 3.1:1 */
.learning-path-badge.admission { background-color: #b45309; }           /* was #fd7e14, 2.6:1 */
.learning-path-badge.job { background-color: #6f42c1; }

/* ---------- Section gradients (white text ≥ 4.5:1 on both stops) ---------- */
.bg-gradient-teacher,
.bg-gradient-exam,
.bg-gradient-calendar { background: linear-gradient(135deg, var(--ns-grad-green-start) 0%, var(--ns-grad-green-end) 100%); }
.bg-gradient-student,
.bg-gradient-analytics { background: linear-gradient(135deg, var(--ns-grad-blue-start) 0%, var(--ns-grad-blue-end) 100%); }
.bg-gradient-parent { background: linear-gradient(135deg, var(--ns-grad-rose-start) 0%, var(--ns-grad-rose-end) 100%); }
.bg-gradient-admin,
.bg-gradient-audit,
.bg-gradient-integration { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); }
.bg-gradient-recommendation { background: linear-gradient(135deg, var(--ns-primary) 0%, var(--ns-accent) 100%); }
.bg-gradient-virus { background: linear-gradient(135deg, var(--ns-grad-teal-start) 0%, var(--ns-grad-teal-end) 100%); }
[class*="bg-gradient-"] { color: #fff; }

/* ---------- Chat typing indicator ---------- */
.typing-dot {
    width: 8px;
    height: 8px;
    background-color: var(--ns-text-muted);
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
    display: inline-block;
    margin: 0 2px;
}
.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-10px); }
}
#chatMessages { scroll-behavior: smooth; }

/* ---------- Forum / search / exam cards (clickable lists) ---------- */
.category-card,
.search-result-item,
.exam-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.category-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; }
.search-result-item:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important; }
.exam-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; }
.category-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.search-form .input-group-text { border-radius: 50px 0 0 50px; }
.search-form .form-control { border-radius: 0; }
.search-form .btn { border-radius: 0 50px 50px 0; }
.exam-badge { position: absolute; top: 10px; right: 10px; }

/* ---------- Calendar ---------- */
.calendar-day { aspect-ratio: 1 / 1; min-height: 80px; }
.calendar-day.empty { visibility: hidden; }
.day-cell {
    background-color: #f8f9fa;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    min-height: 80px;
    padding: 6px;
    transition: background-color 0.2s ease;
    cursor: default;
}
.day-cell:hover { background-color: #e9ecef; }
.day-cell.today { background-color: #e3f2fd; border: 2px solid var(--ns-primary); }
.day-cell.has-event { background-color: #fff3cd; }
.day-number { font-size: 0.875rem; font-weight: 500; }
.event-dot {
    font-size: 0.6875rem;          /* was 8px (6px on phones) — unreadable */
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    cursor: pointer;
}
.event-dot:hover { opacity: 0.85; }

/* ---------- Page frame ---------- */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
main { flex: 1; }
footer { margin-top: auto; }
.container-fluid.px-0 { padding-left: 0; padding-right: 0; }
.ns-footer a { color: var(--ns-text-muted); }
.ns-footer a:hover { color: var(--ns-primary); }

/* ---------- PWA ---------- */
.pwa-installed .pwa-install-banner { display: none !important; }
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .navbar { padding-top: env(safe-area-inset-top); }
}

@media (max-width: 767.98px) {
    .calendar-day { min-height: 60px; }
    .day-cell { min-height: 60px; padding: 4px; }
    .day-number { font-size: 0.75rem; }
    .event-dot { font-size: 0.625rem; padding: 1px 4px; }
    .dropdown-menu { max-height: 60vh; }
}

@media print {
    .ns-offline-banner,
    .ns-toast-region,
    .ns-pw-toggle { display: none !important; }
    .ns-hero { color: #000 !important; background: none !important; box-shadow: none; border: 1px solid #000; }
}


/* Small shared utilities (2026-10-24) */
.min-w-0 { min-width: 0; }
.ns-avatar-50 { width: 50px; height: 50px; object-fit: cover; }
.ns-alert-accent { border: 0; border-left: 4px solid currentColor; }

/* Bottom bar: the current tab gets a bar on top, not colour alone (WCAG 1.4.1). */
.ns-bottom-link { position: relative; }
.ns-bottom-link.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--ns-primary);
}
.ns-summary-replaced { display: none !important; }

/* ================================================================
   Design refresh — step one (2026-11-08). See the design plan doc.
   1) Dark theme: Bootstrap 5.3's data-bs-theme="dark" + our tokens.
   2) New shared components: ns-card, ns-badge, ns-ai-card, ns-ring,
      the AI tutor button, the top-bar search.
   Light mode looks exactly as before; nothing here restyles a page
   that does not use the new classes.
   ================================================================ */
:root {
    --ns-ai: #6f42c1;                 /* AI accent (violet): only on AI-made content */
    --ns-ai-subtle: #f3eefc;
    --ns-ai-border: #d9c9f3;
    --ns-chart-1: #4c51bf; --ns-chart-2: #16794a; --ns-chart-3: #b45309;
    --ns-chart-4: #be185d; --ns-chart-5: #0369a1; --ns-chart-6: #764ba2;
    --ns-radius-xl: 20px;
    color-scheme: light;
}

/* ---------- 1) Dark theme ----------
   Contrast checked on --ns-surface-alt #12141c: text 15:1, muted text 8.2:1, links 8.5:1;
   white on the dark-mode button fill #6166e0 is 4.7:1. */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --ns-primary: #6166e0;
    --ns-primary-hover: #7a7ff0;
    --ns-primary-active: #8b90ff;
    --ns-primary-subtle: #23264a;
    --ns-primary-border-subtle: #3a3e78;
    --ns-primary-text-emphasis: #c7c9ff;
    --ns-primary-focus-ring: rgba(139, 144, 255, 0.45);
    --ns-accent: #a78bfa;
    --ns-text: #e6e8f0;
    --ns-text-muted: #a7adc2;
    --ns-surface: #1a1d29;
    --ns-surface-alt: #12141c;
    --ns-border: #2e3346;
    --ns-success: #34d399;
    --ns-warning: #fbbf24;
    --ns-danger: #f87171;
    --ns-info: #60a5fa;
    --ns-focus: #8b90ff;
    --ns-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ns-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    --ns-ai: #c4b5fd;
    --ns-ai-subtle: #251d3d;
    --ns-ai-border: #4a3a78;
    --ns-chart-1: #8b90ff; --ns-chart-2: #34d399; --ns-chart-3: #fbbf24;
    --ns-chart-4: #f472b6; --ns-chart-5: #60a5fa; --ns-chart-6: #c4b5fd;

    --bs-body-bg: var(--ns-surface-alt);
    --bs-body-bg-rgb: 18, 20, 28;
    --bs-secondary-bg: var(--ns-surface);
    --bs-tertiary-bg: #161925;
    --bs-primary: #6166e0;
    --bs-primary-rgb: 97, 102, 224;
    --bs-link-color: #a5a9ff;
    --bs-link-color-rgb: 165, 169, 255;
    --bs-link-hover-color: #c7c9ff;
    --bs-link-hover-color-rgb: 199, 201, 255;
}
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .list-group-item { --bs-card-bg: var(--ns-surface); background-color: var(--ns-surface); }
/* Pages still carry bg-white / bg-light / text-dark from before; until steps 3–6 move them to tokens, map them here. */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light { background-color: var(--ns-surface) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--ns-text) !important; }
[data-bs-theme="dark"] .text-primary { color: var(--bs-link-color) !important; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--bs-link-color); --bs-btn-border-color: var(--ns-primary); }
[data-bs-theme="dark"] .btn-link { --bs-btn-color: var(--bs-link-color); }
[data-bs-theme="dark"] .ns-skeleton { background: linear-gradient(90deg, #1f2331 25%, #282d3f 37%, #1f2331 63%); background-size: 400% 100%; }
[data-bs-theme="dark"] [aria-busy="true"].ns-loading-region::after { background: rgba(18, 20, 28, 0.65); }
[data-bs-theme="dark"] .learning-path-badge,
[data-bs-theme="dark"] .ns-chip { color: #0b0d12; }
[data-bs-theme="dark"] .ns-navbar { background-color: #1d2040; border-bottom: 1px solid var(--ns-border); }
[data-bs-theme="dark"] .ns-footer { background-color: var(--ns-surface) !important; }
[data-bs-theme="dark"] img.ns-invert-dark { filter: invert(1) hue-rotate(180deg); }

/* ---------- 2a) ns-card: one card design (title row + body), no coloured header ---------- */
.ns-card {
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-lg);
    box-shadow: var(--ns-shadow-sm);
    min-width: 0;
}
.ns-card__head {
    display: flex;
    align-items: center;
    gap: var(--ns-space-3);
    padding: var(--ns-space-4) var(--ns-space-4) 0;
}
.ns-card__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--ns-space-2);
}
.ns-card__title > .bi { color: var(--ns-primary); }
.ns-card__link { font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ns-card__body { padding: var(--ns-space-4); }
@media (min-width: 768px) {
    .ns-card__head { padding: var(--ns-space-5) var(--ns-space-5) 0; }
    .ns-card__body { padding: var(--ns-space-4) var(--ns-space-5) var(--ns-space-5); }
}
.ns-card--primary { border-top: 3px solid var(--ns-primary); }

/* ---------- 2b) ns-ai-card: AI-made suggestions, always marked ✦ and violet ---------- */
.ns-ai-card {
    background: var(--ns-ai-subtle);
    border: 1px solid var(--ns-ai-border);
    border-radius: var(--ns-radius-lg);
    padding: var(--ns-space-4);
    min-width: 0;
}
.ns-ai-card__head { display: flex; align-items: center; gap: var(--ns-space-2); margin-bottom: var(--ns-space-2); }
.ns-ai-card__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--ns-ai); color: var(--ns-surface); font-size: 0.9rem; flex: 0 0 auto;
}
.ns-ai-card__title { margin: 0; font-size: 1rem; font-weight: 700; flex: 1 1 auto; min-width: 0; }
.ns-ai-card__why { margin: 0 0 var(--ns-space-3); color: var(--ns-text-muted); font-size: 0.9rem; }
.ns-ai-card__note { margin: var(--ns-space-2) 0 0; font-size: 0.8125rem; color: var(--ns-text-muted); }

/* ---------- 2c) ns-badge: status and difficulty in one look ---------- */
.ns-badge {
    display: inline-flex; align-items: center; gap: 0.3em;
    padding: 0.2em 0.65em; border-radius: 999px;
    font-size: 0.8125rem; font-weight: 600; line-height: 1.4;
    border: 1px solid transparent; white-space: nowrap;
}
.ns-badge--primary { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-color: var(--bs-primary-border-subtle); }
.ns-badge--success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: var(--bs-success-border-subtle); }
.ns-badge--warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); }
.ns-badge--danger  { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis);  border-color: var(--bs-danger-border-subtle); }
.ns-badge--info    { background: var(--bs-info-bg-subtle);    color: var(--bs-info-text-emphasis);    border-color: var(--bs-info-border-subtle); }
.ns-badge--secondary { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); border-color: var(--bs-secondary-border-subtle); }
.ns-badge--ai { background: var(--ns-ai-subtle); color: var(--ns-ai); border-color: var(--ns-ai-border); }
[data-bs-theme="dark"] .ns-badge--ai { color: var(--ns-ai); }

/* ---------- 2d) ns-ring: round progress (score, course completion) ---------- */
.ns-ring {
    --ns-ring-size: 6rem;
    --ns-ring-width: 0.6rem;
    --ns-ring-color: var(--ns-primary);
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--ns-ring-size);
    height: var(--ns-ring-size);
    border-radius: 50%;
    background: conic-gradient(var(--ns-ring-color) calc(var(--ns-ring-value) * 1%), var(--ns-border) 0);
    flex: 0 0 auto;
}
.ns-ring::before {
    content: "";
    position: absolute;
    inset: var(--ns-ring-width);
    border-radius: 50%;
    background: var(--ns-surface);
}
.ns-ring__value { position: relative; font-weight: 700; font-size: calc(var(--ns-ring-size) * 0.24); line-height: 1; }
.ns-ring__label { position: relative; display: block; font-size: 0.75rem; color: var(--ns-text-muted); font-weight: 500; margin-top: 0.15rem; text-align: center; }
.ns-ring--sm { --ns-ring-size: 3.5rem; --ns-ring-width: 0.4rem; }
.ns-ring--lg { --ns-ring-size: 8.5rem; --ns-ring-width: 0.75rem; }
.ns-ring--success { --ns-ring-color: var(--ns-success); }
.ns-ring--warning { --ns-ring-color: var(--ns-warning); }
.ns-ring--danger  { --ns-ring-color: var(--ns-danger); }

/* ---------- 2e) Tables -> cards on phones: use the existing .ns-table-stack (see above). ---------- */

/* ---------- 2f) AI tutor button (step two: app shell) ---------- */
.ns-ai-fab {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 1029;
    display: inline-flex;
    align-items: center;
    gap: var(--ns-space-2);
    min-height: 48px;
    padding: 0 1.1rem;
    border-radius: 999px;
    background: var(--ns-ai);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(76, 81, 191, 0.35);
}
.ns-ai-fab:hover, .ns-ai-fab:focus-visible { color: #ffffff; filter: brightness(1.08); }
[data-bs-theme="dark"] .ns-ai-fab { color: #1a1030; }
@media (max-width: 991.98px) {
    .ns-ai-fab { bottom: calc(var(--ns-bottom-nav-height) + 0.75rem + env(safe-area-inset-bottom)); padding: 0; width: 52px; justify-content: center; }
    .ns-ai-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media print { .ns-ai-fab { display: none; } }

/* ---------- 2g) Top-bar search (signed-in, desktop) ---------- */
.ns-top-search { max-width: 22rem; flex: 1 1 14rem; margin: 0 var(--ns-space-3); }
.ns-top-search .form-control {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    border-radius: 999px;
    padding-left: 2.25rem;
}
.ns-top-search .form-control::placeholder { color: rgba(255, 255, 255, 0.8); }
.ns-top-search .form-control:focus { background: rgba(255, 255, 255, 0.22); box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35); }
.ns-top-search .bi { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.85); pointer-events: none; }

/* ---------- 2h) Settings switches in the menu (language + theme) ---------- */
.ns-menu-switches { display: grid; gap: var(--ns-space-2); padding: var(--ns-space-2) var(--ns-space-3); }
.ns-menu-switches .btn { min-height: 36px; }

/* ---------- Design refresh, step three (2026-11-08): student dashboard ---------- */
.ns-min-w-0 { min-width: 0; }
.ns-min-w-12 { min-width: 12rem; }
.ns-course-list { display: grid; gap: var(--ns-space-4); }
.ns-plan { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--ns-space-2); }
.ns-plan a { font-weight: 600; text-decoration: none; }
.ns-plan a:hover { text-decoration: underline; }
/* This week: seven bars, height = share of the busiest day (set in --ns-bar). */
.ns-week {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--ns-space-2);
    align-items: end;
    height: 9.5rem;
}
.ns-week__day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 0.25rem; min-width: 0; }
.ns-week__value { font-size: 0.75rem; color: var(--ns-text-muted); min-height: 1.1em; }
.ns-week__bar {
    width: min(2.25rem, 100%);
    height: max(var(--ns-bar, 0%), 3px);
    max-height: calc(100% - 2.6rem);
    border-radius: 6px 6px 2px 2px;
    background: var(--ns-primary-subtle);
    border: 1px solid var(--ns-primary-border-subtle, #c7c9f0);
}
.ns-week__day.is-today .ns-week__bar { background: var(--ns-primary); border-color: var(--ns-primary); }
.ns-week__label { font-size: 0.8125rem; color: var(--ns-text-muted); white-space: nowrap; }
.ns-week__day.is-today .ns-week__label { color: var(--ns-text); font-weight: 700; }

/* Design step 3: keep the floating AI tutor button from covering the last links of a page. */
body:has(.ns-ai-fab) .ns-page { padding-bottom: 5.5rem; }

/* ---------- Design step 3: course card (My Courses, Discover) ---------- */
.ns-course-card {
    display: flex; flex-direction: column; height: 100%; min-width: 0;
    background: var(--ns-surface); border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-lg); box-shadow: var(--ns-shadow-sm); overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ns-course-card:hover, .ns-course-card:focus-within { transform: translateY(-3px); box-shadow: var(--ns-shadow); }
.ns-course-card__cover {
    position: relative; min-height: 5.5rem; padding: 0.75rem;
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.4rem;
    color: #fff; background: linear-gradient(135deg, var(--ns-cover-a), var(--ns-cover-b));
}
.ns-course-card__cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ns-course-card__cover > :not(img) { position: relative; }
.ns-course-card__tag {
    display: inline-flex; align-items: center; padding: 0.2em 0.65em; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; background: rgba(0, 0, 0, 0.28); color: #fff;
}
.ns-course-card__icon {
    position: absolute !important; right: 0.85rem; bottom: -1.1rem;
    width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
    font-size: 1.15rem; color: var(--ns-primary); background: var(--ns-surface);
    border: 1px solid var(--ns-border); box-shadow: var(--ns-shadow-sm);
}
.ns-course-card__body { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; padding: 1.1rem 1rem 0.75rem; }
.ns-course-card__title { font-size: 1rem; font-weight: 700; line-height: 1.35; margin: 0; padding-right: 2.5rem; }
.ns-course-card__desc {
    margin: 0; font-size: 0.875rem; color: var(--ns-text-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ns-course-card__meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.8125rem; color: var(--ns-text-muted); }
.ns-course-card__foot { padding: 0 1rem 1rem; }
.ns-cover-blue   { --ns-cover-a: var(--ns-grad-blue-start);   --ns-cover-b: var(--ns-grad-blue-end); }
.ns-cover-violet { --ns-cover-a: var(--ns-grad-violet-start); --ns-cover-b: var(--ns-grad-violet-end); }
.ns-cover-teal   { --ns-cover-a: var(--ns-grad-teal-start);   --ns-cover-b: var(--ns-grad-teal-end); }
.ns-cover-green  { --ns-cover-a: var(--ns-grad-green-start);  --ns-cover-b: var(--ns-grad-green-end); }
.ns-cover-rose   { --ns-cover-a: var(--ns-grad-rose-start);   --ns-cover-b: var(--ns-grad-rose-end); }
@media (prefers-reduced-motion: reduce) {
    .ns-course-card { transition: none; }
    .ns-course-card:hover, .ns-course-card:focus-within { transform: none; }
}

/* ---------- Design step 3: answer review (result pages) ---------- */
.ns-pre-line { white-space: pre-line; }
.ns-answer {
    background: var(--ns-surface); border: 1px solid var(--ns-border); border-left: 4px solid var(--ns-border);
    border-radius: var(--ns-radius); padding: 1rem 1.1rem; margin-bottom: 0.75rem;
}
.ns-answer--right   { border-left-color: var(--bs-success); }
.ns-answer--wrong   { border-left-color: var(--bs-danger); }
.ns-answer--skipped { border-left-color: var(--bs-secondary); }

.ns-surface-alt { background: var(--ns-surface-alt); }

/* ---------- Design step 3: question runner (Quiz/Take) ---------- */
.ns-quiz-bar {
    position: sticky; top: calc(var(--ns-topbar-height) + 0.5rem); z-index: 1010;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 1.25rem; align-items: center;
    background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
    box-shadow: var(--ns-shadow-sm); padding: 0.85rem 1rem; margin-bottom: 1rem;
}
.ns-quiz-bar__progress { grid-column: 1 / -1; }
.ns-quiz-bar__actions { display: flex; align-items: center; gap: 0.5rem; grid-row: 1; grid-column: 2; }
@media (min-width: 992px) {
    .ns-quiz-bar { grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 1fr) auto; }
    .ns-quiz-bar__progress { grid-column: auto; }
    .ns-quiz-bar__actions { grid-column: 3; }
}
.ns-timer {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border-radius: 999px;
    font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); border: 1px solid var(--bs-secondary-border-subtle);
}
.ns-timer--low { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); border-color: var(--bs-danger-border-subtle); }
.ns-question {
    background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
    padding: 1.1rem 1.15rem; margin-bottom: 1rem; scroll-margin-top: calc(var(--ns-topbar-height) + 9rem);
}
.ns-question.is-answered { border-color: var(--bs-success-border-subtle); }
.ns-question__text { font-size: 1.05rem; line-height: 1.7; margin-bottom: 1rem; }
.ns-question__img { max-height: 15rem; }
.ns-options { display: grid; gap: 0.5rem; }
@media (min-width: 576px) { .ns-options--two { grid-template-columns: 1fr 1fr; } }
.ns-option {
    display: flex; align-items: center; gap: 0.75rem; min-height: var(--ns-touch-target);
    padding: 0.65rem 0.9rem; border: 1px solid var(--ns-border); border-radius: var(--ns-radius);
    cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ns-option:hover { background: var(--ns-surface-alt); }
.ns-option .form-check-input { margin: 0; flex-shrink: 0; }
.ns-option:has(input:checked) { border-color: var(--ns-primary); background: var(--ns-primary-subtle); }
.ns-option:has(input:focus-visible) { outline: 3px solid var(--ns-focus); outline-offset: 2px; }
.ns-option__key {
    flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.8125rem; font-weight: 700; background: var(--ns-surface-alt); color: var(--ns-text-muted);
}
.ns-option:has(input:checked) .ns-option__key { background: var(--ns-primary); color: #fff; }
.ns-option__text { min-width: 0; overflow-wrap: anywhere; }
.short-answer-input { resize: vertical; min-height: 7.5rem; line-height: 1.6; }
.ns-qnav-wrap { position: sticky; top: calc(var(--ns-topbar-height) + 9rem); }
.ns-qnav { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr)); gap: 0.4rem; }
.ns-qnav a {
    display: grid; place-items: center; height: 2.5rem; border-radius: var(--ns-radius-sm);
    border: 1px solid var(--ns-border); color: var(--ns-text); text-decoration: none; font-weight: 600; font-size: 0.875rem;
}
.ns-qnav a:hover { border-color: var(--ns-primary); }
.ns-qnav a.is-answered { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.ns-qnav-dot { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; border: 1px solid var(--ns-border); vertical-align: middle; }
.ns-qnav-dot--done { background: var(--bs-success); border-color: var(--bs-success); }
@media (prefers-reduced-motion: reduce) { .ns-option { transition: none; } }

/* ---------- Design step 3: revision plan ---------- */
.ns-focus {
    display: flex; flex-direction: column; padding: 1rem; border-radius: var(--ns-radius);
    background: var(--ns-surface); border: 1px solid var(--ns-border); border-left: 4px solid var(--ns-border);
}
.ns-focus--danger  { border-left-color: var(--bs-danger); }
.ns-focus--warning { border-left-color: var(--bs-warning); }
.ns-focus--info    { border-left-color: var(--bs-info); }
.ns-focus--success { border-left-color: var(--bs-success); }
.ns-task-list { list-style: none; padding: 0; margin: 0; }
.ns-task { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid var(--ns-border); }
.ns-task:last-child { border-bottom: 0; }
.ns-task__icon { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--ns-surface-alt); flex-shrink: 0; }
.ns-days { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.ns-day {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.6rem 0.25rem;
    border-radius: var(--ns-radius-sm); background: var(--ns-surface-alt); border: 1px solid transparent; font-size: 0.875rem;
}
.ns-day.is-done { background: var(--bs-success-bg-subtle); }
.ns-day.is-today { border-color: var(--ns-primary); }
.ns-milestone--done { border-color: var(--bs-success-border-subtle); background: var(--bs-success-bg-subtle); }
.ns-chart-box { position: relative; height: 12rem; }

/* ---------- Design step 3: AI tutor chat ---------- */
.ns-tutor__grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .ns-tutor__grid { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; } .ns-tutor__side { position: sticky; top: calc(var(--ns-topbar-height) + 1rem); } }
.ns-tutor__avatar {
    flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-grid; place-items: center;
    color: #fff; background: linear-gradient(135deg, var(--ns-primary), var(--ns-ai)); font-size: 1.15rem;
}
.ns-tutor__avatar--lg { width: 4rem; height: 4rem; font-size: 1.75rem; }
.ns-tutor__upsell { padding: 0.6rem 0.75rem; border-radius: var(--ns-radius); background: var(--ns-ai-subtle); border: 1px solid var(--ns-ai-border); }
.ns-chat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ns-chat__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--ns-border); }
.ns-chat__messages {
    height: clamp(20rem, calc(100vh - var(--ns-topbar-height) - 17rem), 60rem);
    overflow-y: auto; padding: 1rem; scroll-behavior: smooth; background: var(--ns-surface-alt);
}
@media (prefers-reduced-motion: reduce) { .ns-chat__messages { scroll-behavior: auto; } }
.ns-chat__welcome { text-align: center; padding: 2.5rem 1rem; }
.ns-chat__prompts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.ns-chat__composer { padding: 0.85rem 1rem 1rem; border-top: 1px solid var(--ns-border); background: var(--ns-surface); }
.ns-msg { display: flex; align-items: flex-end; gap: 0.5rem; margin-bottom: 0.9rem; }
.ns-msg--me { justify-content: flex-end; }
.ns-msg__avatar {
    flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
    color: #fff; background: linear-gradient(135deg, var(--ns-primary), var(--ns-ai)); font-size: 0.95rem;
}
.ns-bubble {
    max-width: min(46rem, 85%); padding: 0.7rem 0.95rem; border-radius: 1.1rem; line-height: 1.6; overflow-wrap: anywhere;
    background: var(--ns-surface); border: 1px solid var(--ns-border); border-bottom-left-radius: 0.35rem;
}
.ns-msg--me .ns-bubble { background: var(--ns-primary); color: #fff; border-color: var(--ns-primary); border-bottom-left-radius: 1.1rem; border-bottom-right-radius: 0.35rem; }
.ns-bubble--error { background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text-emphasis); }
.ns-bubble__time { display: block; margin-top: 0.25rem; font-size: 0.7rem; opacity: 0.7; }
.ns-typing { display: inline-flex; gap: 0.25rem; vertical-align: middle; }
.ns-typing span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ns-text-muted); animation: ns-typing 1.4s infinite ease-in-out; }
.ns-typing span:nth-child(2) { animation-delay: 0.2s; }
.ns-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ns-typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-0.4rem); } }
@media (prefers-reduced-motion: reduce) { .ns-typing span { animation: none; } }
.ns-composer { border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-surface); padding: 0.4rem; }
.ns-composer:focus-within { border-color: var(--ns-primary); box-shadow: 0 0 0 0.2rem var(--ns-primary-focus-ring); }
.ns-composer__input { border: 0; resize: none; box-shadow: none !important; background: transparent; }
.ns-composer__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.25rem 0; }
.ns-composer__tools { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ns-composer__tools .btn.btn-danger { color: #fff; }
.ns-attach { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border: 1px dashed var(--ns-border); border-radius: var(--ns-radius); background: var(--ns-surface-alt); }
.ns-attach__img { max-width: 6rem; max-height: 5rem; object-fit: cover; }
.rtl-text { direction: rtl; text-align: right; }
/* H6: AI answers rendered from Markdown */
.ns-md[data-md] { white-space: pre-wrap; }
.ns-md > :last-child { margin-bottom: 0; }
.ns-md p { margin-bottom: 0.5rem; }
.ns-md ul, .ns-md ol { padding-left: 1.4rem; margin-bottom: 0.5rem; }
.ns-md li { margin-bottom: 0.15rem; }
.ns-md .ns-md-heading { margin-top: 0.4rem; }
.ns-md pre { background: var(--ns-surface-alt); border: 1px solid var(--ns-border); border-radius: 0.5rem; padding: 0.6rem 0.8rem; white-space: pre-wrap; margin-bottom: 0.5rem; }
.ns-md code { color: var(--ns-ai); }
.ns-md pre code { color: inherit; }
.ns-md blockquote { border-left: 3px solid var(--ns-border); padding-left: 0.7rem; color: var(--ns-text-muted); margin-bottom: 0.5rem; }
.ns-md .ns-math { color: var(--ns-primary); }

/* ---------- Design step 4: parent & teacher detail pages ---------- */
.ns-kv > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--ns-border); }
.ns-kv > div:last-child { border-bottom: 0; }
.ns-kv dt { font-weight: 400; color: var(--ns-text-muted); }
.ns-kv dd { margin: 0; font-weight: 700; text-align: right; }
.ns-tile { padding: 0.85rem 0.5rem; border-radius: var(--ns-radius); background: var(--ns-surface-alt); }
.ns-note { padding: 0.55rem 0.8rem; border-radius: var(--ns-radius); border: 1px solid var(--ns-border); }
.ns-note--success { background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); }
.ns-note--warning { background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); }
.ns-child-avatar {
    flex-shrink: 0; width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    font-size: 2.25rem; color: var(--ns-primary); background: var(--ns-primary-subtle);
}
.ns-child-avatar img { width: 100%; height: 100%; object-fit: cover; }
@media print { .no-print { display: none !important; } .ns-card { box-shadow: none; } }

/* ---------- Design step 5: three-step registration ---------- */
.ns-stepper { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0 0 1.5rem; counter-reset: none; }
.ns-stepper li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; position: relative; font-size: 0.8125rem; color: var(--ns-text-muted); text-align: center; }
.ns-stepper li:not(:last-child)::after {
    content: ""; position: absolute; top: 1rem; left: calc(50% + 1.25rem); right: calc(-50% + 1.25rem);
    height: 2px; background: var(--ns-border);
}
.ns-stepper li.is-done:not(:last-child)::after { background: var(--bs-success); }
.ns-stepper__num {
    width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
    background: var(--ns-surface-alt); border: 2px solid var(--ns-border); color: var(--ns-text-muted);
}
.ns-stepper li.is-current { color: var(--ns-text); font-weight: 600; }
.ns-stepper li.is-current .ns-stepper__num { background: var(--ns-primary); border-color: var(--ns-primary); color: #fff; }
.ns-stepper li.is-done .ns-stepper__num { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.ns-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.ns-step:focus { outline: none; }
.ns-wizard .ns-step:not(.is-active) { display: none; }
.ns-step__nav { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1rem; }

/* Design step 5: about page value icon */
.ns-value-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: 1.15rem; color: var(--ns-primary); background: var(--ns-primary-subtle); }

/* 2026-11-08: practice certificate (Practice/Certificate) — prints on one landscape page */
.ns-certificate {
    max-width: 52rem; margin: 0 auto; padding: 3rem 2.5rem; text-align: center; background: var(--ns-surface);
    border: 6px double var(--ns-primary); border-radius: var(--ns-radius-lg); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}
.ns-certificate__seal { width: 4.5rem; height: 4.5rem; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: #fff; background: var(--ns-primary); }
.ns-certificate__kicker { letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8125rem; color: var(--ns-text-muted); }
.ns-certificate__name { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--ns-primary); margin: 0.75rem 0; border-bottom: 2px solid var(--ns-border); display: inline-block; padding: 0 1.5rem 0.25rem; }
.ns-certificate__exam { font-size: 1.25rem; font-weight: 600; }
.ns-certificate__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; font-size: 0.875rem; color: var(--ns-text-muted); }
.ns-certificate__meta strong { display: block; font-size: 1.05rem; color: var(--ns-text); }
@page ns-certificate { size: landscape; margin: 1cm; }   /* named page: only the certificate prints landscape */
@media print {
    .ns-certificate { page: ns-certificate; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 2026-11-08: top-bar switches (Views/Shared/_HeaderSwitches.cshtml) — BN | EN pill + colour-theme button */
.ns-header-switches { display: flex; align-items: center; gap: var(--ns-space-2); }
.ns-lang-pill { display: inline-flex; margin: 0; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.4); }
.ns-lang-pill button {
    border: 0; background: transparent; color: #ffffff;   /* CI axe: 90% white on the tinted pill was 4.2:1 */ font-weight: 700; font-size: 0.75rem; line-height: 1;
    padding: 0.45rem 0.65rem; border-radius: 999px; min-width: 2.4rem; min-height: 30px;
}
.ns-lang-pill button.is-active { background: #ffffff; color: var(--ns-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.ns-lang-pill button:not(.is-active):hover { color: #ffffff; background: rgba(255, 255, 255, 0.14); }
.ns-lang-pill button:focus-visible { outline: 2px solid #ffffff; outline-offset: 1px; }
.ns-theme-btn { width: 40px; justify-content: center; padding: 0; }
/* CI keyboard test: the icon-only account / theme buttons need a visible focus ring, not only a lighter background */
.ns-account-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.ns-theme-menu { min-width: 12rem; }
.ns-theme-menu .dropdown-item { display: flex; align-items: center; gap: var(--ns-space-2); }
/* the top bar now has both switches on desktop; the copy in the sidebar menu stays for the mobile menu only */
.ns-sidebar .ns-menu-switches { display: none; }

/* 2026-11-08: phones — the top bar stays on one line (the account button used to drop to a second row) */
@media (max-width: 575.98px) {
    .ns-navbar .container-fluid { flex-wrap: nowrap; gap: 0.375rem; padding-left: 0.5rem; padding-right: 0.5rem; }
    .ns-navbar .navbar-brand { font-size: 1.1rem; margin-right: auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .ns-navbar .navbar-toggler { padding: 0.25rem 0.45rem; margin-right: 0 !important; }
    .ns-navbar .container-fluid > .me-2 { margin-right: 0 !important; }
    .ns-header-switches { gap: 0.375rem; }
    .ns-lang-pill button { min-width: 2rem; padding: 0.4rem 0.45rem; min-height: 28px; }
    .ns-navbar .ns-account-btn { min-height: 36px; }
    .ns-theme-btn { width: 36px; }
}
/* very narrow phones: the logo icon alone, so every button still fits */
@media (max-width: 400px) {
    .ns-navbar .ns-brand-text { display: none; }
}

/* 2026-11-08: menu sections are dropdowns (Views/Shared/_NavSections.cshtml, Bootstrap collapse) */
.ns-nav-heading { padding: 0; }
.ns-nav-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-2);
    background: none; border: 0; border-radius: var(--ns-radius-sm); color: inherit;
    font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left;
    padding: 0.4rem var(--ns-space-3); min-height: 32px; cursor: pointer;
}
.ns-nav-toggle:hover { background: var(--ns-primary-subtle); color: var(--ns-primary); }
.ns-nav-toggle:focus-visible { outline: 2px solid var(--ns-primary); outline-offset: 1px; }
.ns-nav-toggle .bi { font-size: 0.8rem; transition: transform 0.2s ease; }
.ns-nav-toggle.collapsed .bi { transform: rotate(-90deg); }
.ns-nav-section + .ns-nav-section { margin-top: var(--ns-space-2); }
@media (prefers-reduced-motion: reduce) { .ns-nav-toggle .bi { transition: none; } }

/* 2026-11-08: the AI tutor button no longer covers the end of a page, and on phones it slides away while
   scrolling down (wwwroot/js/site.js) */
body:has(.ns-ai-fab) main { padding-bottom: 5.5rem; }
.ns-ai-fab { transition: transform 0.25s ease, opacity 0.25s ease; }
.ns-ai-fab.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ns-ai-fab { transition: none; } }

/* 2026-11-08: one brand mark everywhere (images/logo-mark.svg = the installed app icon) */
.ns-brand-mark { display: inline-block; vertical-align: middle; border-radius: 8px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
.ns-navbar .navbar-brand { display: inline-flex; align-items: center; gap: 0.5rem; }

/* 2026-11-08 (UI review 7): page headers use the shared hero; old pages wrapped it in .row > .col-12 */
.row > .col-12 > .ns-hero { margin-bottom: 0; }
.ns-hero > .row, .ns-hero > .d-flex { flex: 1 1 100%; }
.ns-hero > .row { margin-left: 0; margin-right: 0; }