/* Font: Be Vietnam Pro is loaded from App.razor with Inter as fallback.
   Legacy --font-primary below aliases to the Vietnamese-safe stack so old pages
   automatically pick up the master design system font. */

/* Lucide inline SVG icons — block display so grid/flex containers center correctly.
   No margin by default; icon-text spacing must use gap on the parent container.
   Use .lucide-inline class on the parent when you need the icon inline with text. */
.lucide {
    display: block;
    flex-shrink: 0;
    line-height: 0;
}
/* 1. :root VARIABLES
   Legacy tokens REMAPPED 2026-05-03 to align with master design system.
   --primary-* now mirror --brand-primary* so any page using legacy
   names automatically gets the consolidated color story.            */
   :root{
    /* Brand / Teal — aligned with --brand-primary in Tokens.css */
    --primary-800: #04342C; /* was #134B47 — now matches --brand-primary-dark */
    --primary-600: #085041; /* was #1F6F68 — now matches --brand-primary */
    --primary-500: #0F6E56; /* was #2E8B83 — slightly less saturated mid-teal */
    --primary-100: #E1F5EE; /* was #E6F2F0 — matches --brand-primary-soft */
    --primary-50:  #F0FAF5; /* was #F2FBFA — barely changed */

    /* Accent */
    --accent-500: #FF6A3D;
    --accent-600: #FF5A29;

    /* Neutrals — aligned with master --bg-base/--bg-surface/--text-* */
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #FAFAF7; /* was #F8FAFC — matches --bg-base */
    --text-900: #1A1A18;  /* was #0F172A — matches --text-primary */
    --text-700: #5F5E5A;  /* was #334155 — matches --text-secondary (warm gray) */
    --text-500: #888780;  /* was #64748B — matches --text-tertiary */
    --border:   rgba(0,0,0,0.08); /* was #E5E7EB — matches --border-subtle */
    --divider:  rgba(0,0,0,0.06); /* was #EEF2F7 */
  
    /* Status — aligned with --*-token semantic palette in Tokens.css */
    --success:    #3B6D11;
    --success-bg: #EAF3DE;
    --warning:    #854F0B;
    --warning-bg: #FAEEDA;
    --info:       #185FA5;
    --info-bg:    #E6F1FB;
    --danger:     #A32D2D;
    --danger-bg:  #FCEBEB;
  
    /* Legacy Variables (mapped) */
    --primary-color: var(--primary-600);
    --primary-dark: var(--primary-800);
    --primary-light: var(--primary-500);
    --secondary-color: var(--accent-500);
    --success-color: var(--success);
    --danger-color: var(--danger);
    --warning-color: var(--warning);
    --info-color: var(--info);
    --light-color: var(--primary-50);
    --dark-color: var(--text-900);
  
    --primary-gradient:linear-gradient(135deg,var(--primary-600) 0%,var(--primary-500) 100%);
    --success-gradient:linear-gradient(135deg,var(--success) 0%,#15803d 100%);
    --danger-gradient:linear-gradient(135deg,var(--danger) 0%,#b91c1c 100%);
  
    /* Typography — alias to Inter (loaded in App.razor head). */
    --font-primary: var(--font-sans, 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
    --font-heading: var(--font-primary);
  
    /* Spacing */
    --spacing-xs:.25rem; --spacing-sm:.5rem; --spacing-md:1rem;
    --spacing-lg:1.5rem; --spacing-xl:2rem; --spacing-2xl:3rem;
  
  /* Radius / Shadows / Transitions */
  --radius-sm:.25rem; --radius-md:.5rem; --radius-lg:1rem; --radius-xl:1.5rem; --radius-full:9999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
  --shadow-md:0 4px 6px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 10px 25px rgba(0,0,0,.15),0 5px 10px rgba(0,0,0,.05);
  --shadow-xl:0 20px 40px rgba(0,0,0,.2);
  --transition-fast:150ms ease; --transition-base:250ms ease; --transition-slow:350ms ease;

  /* Motion durations */
  --motion-instant: 100ms;
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --motion-slower: 600ms;
  --motion-celebrate: 1500ms;

  /* Easings */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;

  /* Stagger delays (for list/grid entry orchestration) */
  --stagger-tight: 30ms;
  --stagger-base: 50ms;
  --stagger-loose: 80ms;

  /* Functional shadows for motion patterns */
  --shadow-hover: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  --shadow-modal: 0 8px 32px rgba(0,0,0,.16);
  --shadow-focus: 0 0 0 3px var(--primary-ring);

  /* Topic color ramps (light) — for icon containers, category badges */
  --c-amber-bg: #FAEEDA;   --c-amber-fg: #BA7517;
  --c-blue-bg: #E6F1FB;    --c-blue-fg: #185FA5;
  --c-purple-bg: #EEEDFE;  --c-purple-fg: #534AB7;
  --c-pink-bg: #FBEAF0;    --c-pink-fg: #993556;
  --c-coral-bg: #FAECE7;   --c-coral-fg: #993C1D;
  --c-teal-bg: #E1F5EE;    --c-teal-fg: #0F6E56;
  --c-green-bg: #EAF3DE;   --c-green-fg: #639922;
  
  /* Layout Variables (from MainLayout.css) */
  --sidebar-width:252px;
  --topbar-height:72px;
  --topbar-height-mobile:64px;
  --layout-footer-height:64px;
  --page-gutter-x:28px;
  --section-gap:28px;
  --card-padding:24px;
  --control-height:42px;
  --content-shell-max:1200px;
  --content-shell-wide-max:1320px;
  --question-panel-width:352px;
  --sidebar-header-pad-y:25px;
  --sidebar-header-pad-x:20px;
  --footer-pad-y:20px;
  --footer-pad-x:30px;
  --topbar-primary-actions-max:980px;
  --topbar-upgrade-max:300px;
  --topbar-community-max:620px;
  --topbar-user-max:240px;
  --app-dvh:100vh;
  --panel-offset-top:calc(var(--topbar-height) + 12px);
  --panel-offset-fab:calc(var(--topbar-height) + 16px);
  --panel-max-h:calc(var(--app-dvh) - (var(--topbar-height) + 24px));
  /* Z-Index Scale (centralized) */
  --z-topbar:50;
  --z-navbar:1000;
  --z-question-overlay:1290;
  --z-question-fab:1295;
  --z-question-panel:1300;
  --z-question-modal:1500;
  --z-sidebar:1600;
  --z-blazor-error:2000;
  --z-sidebar-overlay:2050;
  --z-topbar-elevated:2100;
  --z-sidebar-mobile:2300;
  --z-modal:9999;
  --z-reconnect:99999;
  --z-style-loader:100000;
  --bg-light:var(--surface-2);
  --border-color:var(--border);
  /* Note: --text-primary, --text-secondary, --primary-ring intentionally
     NOT redefined here — they come from Tokens.css so the master design
     system stays the single source of truth. */
}

@supports (height:100dvh){
  :root{
    --app-dvh:100dvh;
  }
}

@media (min-width:1440px) and (max-width:1799px){
  :root{
    --sidebar-width:236px;
    --topbar-height:70px;
    --layout-footer-height:60px;
    --page-gutter-x:26px;
    --section-gap:26px;
    --card-padding:22px;
    --control-height:41px;
    --content-shell-max:1180px;
    --content-shell-wide-max:1300px;
    --question-panel-width:336px;
    --sidebar-header-pad-y:23px;
    --sidebar-header-pad-x:18px;
    --footer-pad-y:18px;
    --footer-pad-x:24px;
    --topbar-primary-actions-max:1100px;
    --topbar-upgrade-max:282px;
    --topbar-community-max:620px;
    --topbar-user-max:230px;
  }
}

@media (min-width:1280px) and (max-width:1439px){
  :root{
    --sidebar-width:220px;
    --topbar-height:68px;
    --layout-footer-height:58px;
    --page-gutter-x:22px;
    --section-gap:24px;
    --card-padding:20px;
    --control-height:40px;
    --content-shell-max:1160px;
    --content-shell-wide-max:1260px;
    --question-panel-width:328px;
    --sidebar-header-pad-y:21px;
    --sidebar-header-pad-x:17px;
    --footer-pad-y:17px;
    --footer-pad-x:22px;
    --topbar-primary-actions-max:1040px;
    --topbar-upgrade-max:270px;
    --topbar-community-max:620px;
    --topbar-user-max:230px;
  }
}

@media (min-width:1024px) and (max-width:1279px){
  :root{
    --sidebar-width:212px;
    --topbar-height:64px;
    --layout-footer-height:56px;
    --page-gutter-x:18px;
    --section-gap:20px;
    --card-padding:16px;
    --control-height:38px;
    --content-shell-max:1120px;
    --content-shell-wide-max:1200px;
    --question-panel-width:304px;
    --sidebar-header-pad-y:20px;
    --sidebar-header-pad-x:16px;
    --footer-pad-y:16px;
    --footer-pad-x:18px;
    --topbar-primary-actions-max:900px;
    --topbar-upgrade-max:236px;
    --topbar-community-max:520px;
    --topbar-user-max:204px;
  }
}
  

/* Responsive laptop zoom is defined near the end of this file so it wins
   over later global density tokens. */
/* 2. ACCESSIBILITY PREFERENCES */
  :focus-visible{ outline:2px solid var(--primary-color); outline-offset:2px; }
  @media (prefers-reduced-motion:reduce){
    :root{
      --motion-instant:0ms; --motion-fast:0ms; --motion-base:0ms;
      --motion-slow:0ms; --motion-slower:0ms; --motion-celebrate:0ms;
      --stagger-tight:0ms; --stagger-base:0ms; --stagger-loose:0ms;
      --transition-fast:0ms ease; --transition-base:0ms ease; --transition-slow:0ms ease;
    }
    *,*::before,*::after{
      animation-duration:.01ms!important;
      animation-iteration-count:1!important;
      transition-duration:.01ms!important;
      scroll-behavior:auto!important;
    }
  }
  
  /* 3. RESET & BASE */
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; width:100%; min-width:0; }
  body{
    font-family:var(--font-primary); font-size:16px; line-height:1.6;
    color:var(--dark-color); background-color:var(--surface-2); overflow-x:hidden;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-dvh, 100dvh);
    width:100%;
    min-width:0;
  }

  html.layout-sidebar-lock,
  body.layout-sidebar-lock,
  html.question-panel-lock,
  body.question-panel-lock{
    overflow:hidden;
  }
  
    /* Headings — weight 500 per master design (Inter is loaded only at 400/500) */
  h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading); font-weight:500; line-height:1.3;
    margin-bottom:var(--spacing-md); color:var(--text-primary);
  }
  h1{font-size:2.5rem} h2{font-size:2rem} h3{font-size:1.75rem}
  h4{font-size:1.5rem} h5{font-size:1.25rem} h6{font-size:1rem}
  
  /* 4. LINKS */
  a{ color:var(--primary-color); text-decoration:none; transition:color var(--transition-fast); }
  a:hover{ color:var(--primary-light); }
  
  /* 5. BUTTONS (DRY) */
  .btn{
    display:inline-block; padding:.75rem 1.5rem; font-weight:500; text-align:center;
    white-space:nowrap; vertical-align:middle; user-select:none; border:1px solid transparent;
    border-radius:var(--radius-md); transition:transform var(--transition-base), box-shadow var(--transition-base);
    cursor:pointer; font-size:1rem; line-height:1.5; position:relative; overflow:hidden;
  }
  .btn:focus{ outline:none; box-shadow:0 0 0 .2rem var(--primary-ring); }
  
  .btn--base{ color:#fff; border:none; background:var(--primary-gradient); }
  .btn--secondary{ background:var(--secondary-color); color:#fff; }
  .btn--success{ background:var(--success-gradient); color:#fff; }
  .btn--danger{ background:var(--danger-gradient); color:#fff; }
  
  .btn--outline-primary{
    background:transparent; color:var(--primary-color); border:2px solid var(--primary-color);
  }
  .btn--hover-elevate:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
  .btn:active{ transform:translateY(0); }
  
    /* Loading state (keeps .btn markup smaller) */
  .btn--loading{ color:transparent; pointer-events:none; }
  .btn--loading::after{
    content:""; position:absolute; width:20px; height:20px; top:50%; left:50%;
    transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; border-top-color:transparent;
    animation:spinner .6s linear infinite;
  }
  
  /* 6. CARD */
  .card{
    background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
    border:1px solid var(--border); transition:transform var(--transition-base), box-shadow var(--transition-base);
    overflow:hidden;
  }
  .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-xl); }
  .card-header{ background:var(--primary-gradient); color:#fff; padding:var(--spacing-lg); font-weight:500; border-bottom:none; }
  .card-body{ padding:var(--spacing-lg); }
  .card-footer{ background:var(--surface-2); border-top:1px solid var(--divider); padding:var(--spacing-md) var(--spacing-lg); }
  
  /* 7. FORMS */
  .form-control{
    display:block; width:100%; padding:.75rem 1rem; font-size:1rem; line-height:1.5;
    color:var(--dark-color); background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-md);
    transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
    background-clip:padding-box;
  }
  .form-control:focus{ border-color:var(--primary-500); outline:0; box-shadow:0 0 0 .2rem var(--primary-ring); }
  .form-control::placeholder{ color:var(--text-500); opacity:1; }
  
  .form-label{ display:inline-block; margin-bottom:.5rem; font-weight:500; color:var(--dark-color); }
  
    /* Validation (reuse same spacing + icon sizing) */
  .form-control.is-valid,
  .form-control.is-invalid{ padding-right:calc(1.5em + .75rem); background-repeat:no-repeat; background-position:right calc(.375em + .1875rem) center; background-size:calc(.75em + .375rem) calc(.75em + .375rem); }
  .form-control.is-valid{ border-color:var(--success-color); background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2348bb78' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); }
  .form-control.is-invalid{ border-color:var(--danger-color); background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23f56565' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f56565' stroke='none'/%3e%3c/svg%3e"); }
  
  .invalid-feedback{ display:none; width:100%; margin-top:.25rem; font-size:.875rem; color:var(--danger-color); }
  .form-control.is-invalid ~ .invalid-feedback{ display:block; }
  
  /* 8. NAVBAR & NAV */
  .navbar{ background:var(--bg); box-shadow:var(--shadow-sm); padding:var(--spacing-md) 0; position:sticky; top:0; z-index:var(--z-navbar); }
  .navbar-brand{ font-size:1.5rem; font-weight:500; color:var(--primary-color); display:flex; align-items:center; gap:.5rem; }
  .navbar-nav{ display:flex; list-style:none; align-items:center; gap:.25rem; padding:0; margin:0; }
  .nav-link{ padding:.5rem 1rem; color:var(--dark-color); font-weight:500; border-radius:var(--radius-md); transition:background var(--transition-fast), color var(--transition-fast); }
  .nav-link:hover{ background:var(--primary-50); color:var(--primary-color); }
  .nav-link.active{ background:var(--primary-100); color:var(--primary-600); }
  
  /* 9. UTILITIES (container, text, spacing) */
  .container{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--spacing-lg); }
  .text-center{text-align:center} .text-left{text-align:left} .text-right{text-align:right}
  
  .text-primary{color:var(--primary-color)} .text-success{color:var(--success-color)} .text-danger{color:var(--danger-color)}
  .text-warning{color:var(--warning-color)} .text-muted{color:var(--text-500)}
  
  .bg-primary{background:var(--primary-color)} .bg-success{background:var(--success-gradient)} .bg-danger{background:var(--danger-gradient)}
  .bg-light{background:var(--surface-2)} .bg-dark{background:var(--dark-color)}
  
  .mt-1{margin-top:var(--spacing-sm)} .mt-2{margin-top:var(--spacing-md)} .mt-3{margin-top:var(--spacing-lg)}
  .mt-4{margin-top:var(--spacing-xl)} .mt-5{margin-top:var(--spacing-2xl)}
  
  .mb-1{margin-bottom:var(--spacing-sm)} .mb-2{margin-bottom:var(--spacing-md)} .mb-3{margin-bottom:var(--spacing-lg)}
  .mb-4{margin-bottom:var(--spacing-xl)} .mb-5{margin-bottom:var(--spacing-2xl)}
  
  .p-1{padding:var(--spacing-sm)} .p-2{padding:var(--spacing-md)} .p-3{padding:var(--spacing-lg)}
  .p-4{padding:var(--spacing-xl)} .p-5{padding:var(--spacing-2xl)}
  
  /* 10. LOADING & ANIMATIONS */
  .loading-spinner{
    width:50px; height:50px; border:5px solid var(--light-color); border-top:5px solid var(--primary-color);
    border-radius:50%; animation:spinner 1s linear infinite;
  }
  
    /* Fade / Slide helpers */
  .fade-in{ animation:fadeIn var(--transition-slow) both; }
  @keyframes fadeIn{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none;} }
  .slide-in{ animation:slideIn var(--transition-base) both; }
  @keyframes slideIn{ from{ transform:translateX(-100%);} to{ transform:none;} }

  /* Page enter motion (opt-in to avoid global transform side effects) */
  body.page-transitions-enabled .page-content,
  body.page-transitions-enabled .admin-content{
    animation:pageEnter 420ms cubic-bezier(.16,1,.3,1) both;
  }
  body.page-transitions-enabled .page-content > *,
  body.page-transitions-enabled .admin-content > *{
    animation:contentRise 520ms cubic-bezier(.16,1,.3,1) both;
    animation-delay:60ms;
  }
  @keyframes pageEnter{
    from{ opacity:0; }
    to{ opacity:1; }
  }
  @keyframes contentRise{
    from{ opacity:0; }
    to{ opacity:1; }
  }
  
  /* Legacy global page motion (kept disabled by default) */
  .page-content,
  .admin-content{
    animation:none;
  }
  .page-content > *,
  .admin-content > *{
    animation:none;
  }
  
    /* Spinner */
  @keyframes spinner{ to{ transform:rotate(360deg);} }
  
  /* 11. BADGES / ALERTS */
  .badge{ display:inline-block; padding:.25rem .75rem; font-size:.875rem; font-weight:500; line-height:1; border-radius:var(--radius-full); white-space:nowrap; }
  .badge-primary{ background:var(--primary-100); color:var(--primary-600); }
  .badge-success{ background:var(--success-bg); color:var(--success); }
  .badge-danger{ background:var(--danger-bg); color:var(--danger); }
  
  .alert{
    padding:var(--spacing-md) var(--spacing-lg); margin-bottom:var(--spacing-md);
    border:1px solid transparent; border-radius:var(--radius-md); position:relative;
  }
  .alert-success{ color:#166534; background-color:var(--success-bg); border-color:#bbf7d0; }
  .alert-danger{ color:#991b1b; background-color:var(--danger-bg); border-color:#fecaca; }
  .alert-warning{ color:#92400e; background-color:var(--warning-bg); border-color:#fde68a; }
  .alert-info{ color:#1d4ed8; background-color:var(--info-bg); border-color:#bfdbfe; }
  
  /* 12. PROGRESS */
  .progress{ display:flex; height:1rem; overflow:hidden; font-size:.75rem; background:var(--border); border-radius:var(--radius-full); }
  .progress-bar{ display:flex; align-items:center; justify-content:center; color:#fff; white-space:nowrap; background:var(--primary-500); transition:width .6s ease; }
  .progress-bar-striped{ background-image:linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size:1rem 1rem; }
  .progress-bar-animated{ animation:progress-bar-stripes 1s linear infinite; }
  @keyframes progress-bar-stripes{ from{ background-position:1rem 0; } to{ background-position:0 0; } }
  
  /* 13. TABLES */
  .table{ width:100%; margin-bottom:var(--spacing-md); background:var(--surface); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
  .table thead th{ background:var(--primary-color); color:#fff; font-weight:500; padding:var(--spacing-md); text-align:left; border:none; }
  .table tbody td{ padding:var(--spacing-md); border-bottom:1px solid var(--border); }
  .table tbody tr:hover{ background:var(--primary-50); }
  .table tbody tr:last-child td{ border-bottom:none; }
  
  /* 14. MODALS */
  .modal{ display:none; position:fixed; z-index:var(--z-modal); inset:0; overflow:auto; background:rgba(0,0,0,.5); animation:fadeIn var(--transition-fast); }
  .modal.show{ display:block; }
  .modal-dialog{ margin:3rem auto; max-width:500px; width:auto; position:relative; }
  .modal-content{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); animation:slideDown var(--transition-base); }
  @keyframes slideDown{ from{ transform:translateY(-50px); opacity:0; } to{ transform:none; opacity:1; } }
  .modal-header{ padding:var(--spacing-lg); border-bottom:1px solid var(--divider); }
  .modal-title{ margin:0; font-size:1.25rem; font-weight:500; }
  .modal-body{ padding:var(--spacing-lg); }
  .modal-footer{ padding:var(--spacing-lg); border-top:1px solid var(--divider); display:flex; justify-content:flex-end; gap:var(--spacing-sm); }
  
  /* 15. TOOLTIP */
  .tooltip{ position:relative; display:inline-block; }
  .tooltip .tooltiptext{
    visibility:hidden; width:120px; background:var(--text-900); color:#fff; text-align:center;
    border-radius:var(--radius-md); padding:var(--spacing-sm); position:absolute; z-index:1;
    bottom:125%; left:50%; transform:translateX(-50%); opacity:0; transition:opacity var(--transition-fast);
  }
  .tooltip:hover .tooltiptext{ visibility:visible; opacity:1; }
  
  /* 16. BLAZOR ERROR BOUNDARY */
  .blazor-error-boundary{
    background:var(--danger-gradient); padding:var(--spacing-lg); color:#fff; border-radius:var(--radius-md);
    margin:var(--spacing-lg); box-shadow:var(--shadow-lg); position:relative; animation:shake .5s;
  }
  @keyframes shake{
    0%,100%{ transform:translateX(0); } 10%,30%,50%,70%,90%{ transform:translateX(-5px);} 20%,40%,60%,80%{ transform:translateX(5px); }
  }
  .blazor-error-boundary::before{ content:"⚠️"; font-size:2rem; margin-right:var(--spacing-md); display:inline-block; vertical-align:middle; }
  .blazor-error-boundary::after{
    content:"Đã xảy ra lỗi không mong muốn. Vui lòng tải lại trang hoặc liên hệ hỗ trợ.";
    display:block; margin-top:var(--spacing-sm); font-size:.875rem; opacity:.9;
  }
  
/* 17. RESPONSIVE */
  @media (max-width:1024px){
    .container{ max-width:100%; }
    .table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .modal-dialog{ max-width:calc(100% - 3rem); }
  }
  @media (max-width:768px){
    :root{ --topbar-height:var(--topbar-height-mobile); }
    h1{font-size:2rem} h2{font-size:1.75rem} h3{font-size:1.5rem}
    .container{ padding:0 var(--spacing-md); }
    .navbar-nav{ flex-direction:column; width:100%; }
    .modal-dialog{ margin:1rem; max-width:calc(100% - 2rem); }
    .btn{ padding:.5rem 1rem; font-size:.875rem; }
  }
  @media (max-width:480px){
    body{ font-size:14px; }
    .card{ border-radius:var(--radius-md); }
    .table{ font-size:.875rem; }
  }
  
/* 18. Print */
  @media print{
    body{ background:#fff; color:#000; }
    .navbar,.btn,.modal{ display:none!important; }
    a{ color:#000; text-decoration:underline; }
  }

/* 19. UTILITY CLASSES - Hover Effects */
.hover-lift{ transition:transform var(--transition-base), box-shadow var(--transition-base); }
.hover-lift:hover{ transform:translateY(-5px); box-shadow:var(--shadow-xl); }
.hover-lift-sm:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.hover-scale{ transition:transform var(--transition-base); }
.hover-scale:hover{ transform:scale(1.05); }
.hover-scale-sm:hover{ transform:scale(1.02); }

/* 20. UTILITY CLASSES - Border Radius */
.rounded-sm{ border-radius:var(--radius-sm); }
.rounded-md{ border-radius:var(--radius-md); }
.rounded-lg{ border-radius:var(--radius-lg); }
.rounded-xl{ border-radius:var(--radius-xl); }
.rounded-full{ border-radius:var(--radius-full); }
.rounded-pill{ border-radius:50px; }

/* 21. UTILITY CLASSES - Shadows */
.shadow-sm{ box-shadow:var(--shadow-sm); }
.shadow-md{ box-shadow:var(--shadow-md); }
.shadow-lg{ box-shadow:var(--shadow-lg); }
.shadow-xl{ box-shadow:var(--shadow-xl); }
.shadow-none{ box-shadow:none; }

/* 22. UTILITY CLASSES - Flex */
.d-flex{ display:flex; }
.flex-column{ flex-direction:column; }
.flex-row{ flex-direction:row; }
.align-items-center{ align-items:center; }
.align-items-start{ align-items:flex-start; }
.align-items-end{ align-items:flex-end; }
.justify-content-center{ justify-content:center; }
.justify-content-between{ justify-content:space-between; }
.justify-content-around{ justify-content:space-around; }
.justify-content-end{ justify-content:flex-end; }
.gap-1{ gap:var(--spacing-sm); }
.gap-2{ gap:var(--spacing-md); }
.gap-3{ gap:var(--spacing-lg); }

/* 23. UTILITY CLASSES - Spinner Sizes */
.spinner-sm{ width:1rem; height:1rem; border-width:0.15em; }
.spinner-md{ width:2rem; height:2rem; border-width:0.2em; }
.spinner-lg{ width:3rem; height:3rem; border-width:0.25em; }

/* 24. UTILITY CLASSES - Animations */
.slide-up{ animation:slideUp var(--transition-base) both; }
@keyframes slideUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } }
.slide-down{ animation:slideDown var(--transition-base) both; }
.pulse{ animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }

/* 25. UTILITY CLASSES - Position */
.position-relative{ position:relative; }
.position-absolute{ position:absolute; }
.position-fixed{ position:fixed; }
.position-sticky{ position:sticky; }

/* 26. UTILITY CLASSES - Display */
.d-none{ display:none; }
.d-block{ display:block; }
.d-inline{ display:inline; }
.d-inline-block{ display:inline-block; }

/* 27. UTILITY CLASSES - Width/Height */
.w-100{ width:100%; }
.h-100{ height:100%; }
.min-h-screen{ min-height:var(--app-dvh); }
.max-w-xs{ max-width:320px; }
.max-w-sm{ max-width:500px; }
.max-w-md{ max-width:700px; }
.max-w-lg{ max-width:900px; }
.max-w-xl{ max-width:1200px; }

/* 28. UTILITY CLASSES - Overflow */
.overflow-hidden{ overflow:hidden; }
.overflow-auto{ overflow:auto; }
.overflow-scroll{ overflow:scroll; }

/* 29. UTILITY CLASSES - Common constraints */
.max-h-thumb{ max-height:120px; }
.max-h-list{ max-height:320px; overflow:auto; }
.img-contain{ max-height:120px; max-width:100%; object-fit:contain; }

/* ============================================================
   30. DESIGN SYSTEM v2 — added 2026-04
   New tokens for redesigned surfaces (start: Student Dashboard).
   Additive: legacy tokens above are unchanged so other pages
   keep working until each is migrated. Dark-mode here is scoped
   to .ds-v2 containers only — never affects un-migrated pages.
============================================================ */
:root{
  /* Brand */
  --brand-primary: #085041;        /* dark teal — featured cards, primary CTA */
  --brand-primary-soft: #E1F5EE;   /* hover, subtle bg, active sidebar item */

  /* Surfaces */
  --bg-base: #FAFAF7;
  --bg-surface: #FFFFFF;
  --bg-muted: #F1EFE8;

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-default: rgba(0, 0, 0, 0.15);

  /* Text */
  --text-primary-v2:   #1A1A18;
  --text-secondary-v2: #5F5E5A;
  --text-tertiary-v2:  #888780;

  /* Semantic — only for status, not as primary chrome */
  --info-v2: #185FA5;       --info-bg-v2: #E6F1FB;
  --success-v2: #3B6D11;    --success-bg-v2: #EAF3DE;
  --warning-v2: #854F0B;    --warning-bg-v2: #FAEEDA;
  --danger-v2: #A32D2D;     --danger-bg-v2: #FCEBEB;

  /* Difficulty dots */
  --diff-easy: #3B6D11;
  --diff-medium: #B5840E;
  --diff-hard: #A32D2D;

  /* Typography (v2) — alias to canonical --font-sans from Tokens.css */
  --font-sans-v2: var(--font-sans, "Be Vietnam Pro", "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);

  /* Shape */
  --radius-card: 12px;
  --radius-input: 8px;
  --radius-pill: 999px;
  --border-hairline: 0.5px;
}

@media (prefers-color-scheme: dark){
  /* Scoped: only swaps tokens for elements inside .ds-v2.
     Light mode pages above are unaffected. */
  .ds-v2{
    --bg-base: #101312;
    --bg-surface: #1D211E;
    --bg-muted: #202721;
    --text-primary-v2: #F4F6F3;
    --text-secondary-v2: #A9B3AD;
    --text-tertiary-v2: #7F8A84;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.14);
    --brand-primary-soft: rgba(16,191,165,0.12);
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background:
      linear-gradient(180deg, rgba(16, 191, 165, 0.03), transparent 260px),
      var(--bg-base, #101312);
  }

  .page-content {
    background:
      linear-gradient(180deg, rgba(16, 191, 165, 0.02), transparent 300px),
      var(--bg-base, #101312);
  }
}

[data-theme="dark"] body,
body[data-theme="dark"] {
  background:
    linear-gradient(180deg, rgba(16, 191, 165, 0.03), transparent 260px),
    var(--bg-base, #101312);
}

[data-theme="dark"] .page-content,
body[data-theme="dark"] .page-content {
  background:
    linear-gradient(180deg, rgba(16, 191, 165, 0.02), transparent 300px),
    var(--bg-base, #101312);
}

.ds-v2{
  font-family: var(--font-sans-v2);
  color: var(--text-primary-v2);
  background: var(--bg-base);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}
.ds-v2 :where(h1,h2,h3,h4,h5,h6){
  font-family: var(--font-sans-v2);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  color: var(--text-primary-v2);
}
.ds-v2 button{ font-family: inherit; }
.ds-v2 :where(a){ color: inherit; text-decoration: none; }

/* 31. Product polish pass - global density and chrome cohesion */
:root{
  --content-shell-max: 1160px;
  --content-shell-wide-max: 1240px;
  --topbar-height: 64px;
  --layout-footer-height: 52px;
  --page-gutter-x: 24px;
  --section-gap: 20px;
  --card-padding: 18px;
  --control-height: 38px;
  --question-panel-width: 336px;
}

@supports (height: 100dvh){
  :root{ --app-dvh: 100dvh; }
}

body{
  background:
    linear-gradient(180deg, rgba(225, 245, 238, 0.22), transparent 260px),
    var(--bg-base, #FAFAF7);
}

.page-content{
  background:
    linear-gradient(180deg, rgba(225, 245, 238, 0.18), transparent 300px),
    var(--bg-base, #FAFAF7);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand-primary: #4FC49E;
    --brand-primary-hover: #66D2AD;
    --brand-primary-dark: #D9F8EA;
    --brand-primary-strong: #D9F8EA;
    --brand-primary-soft: rgba(79, 196, 158, 0.14);
    --primary-ring: rgba(79, 196, 158, 0.22);

    --primary-800: #D9F8EA;
    --primary-600: #9FE1CB;
    --primary-500: #66D2AD;
    --primary-100: rgba(79, 196, 158, 0.18);
    --primary-50: rgba(79, 196, 158, 0.1);
    --primary-color: var(--primary-600);
    --primary-dark: var(--primary-800);
    --primary-light: var(--primary-500);
    --primary-gradient: linear-gradient(135deg, #0F6E56 0%, #085041 100%);

    --bg: #101312;
    --surface: #1D211E;
    --surface-2: #101312;
    --muted: #202721;
    --bg-base: #101312;
    --bg-surface: #1D211E;
    --bg-muted: #202721;
    --bg-elevated: #222923;
    --bg-hover: #263029;

    --text: #F4F6F3;
    --text-2: #C9D3CD;
    --text-3: #94A199;
    --text-900: #F4F6F3;
    --text-700: #C9D3CD;
    --text-500: #94A199;
    --text-primary: var(--text-900);
    --text-secondary: var(--text-700);
    --text-muted: var(--text-500);
    --text-tertiary: var(--text-500);
    --dark-color: var(--text-900);
    --light-color: var(--primary-50);

    --border: rgba(255, 255, 255, 0.08);
    --divider: rgba(255, 255, 255, 0.08);
    --border-subtle: var(--border);
    --border-default: rgba(255, 255, 255, 0.14);
    --border-strong: rgba(255, 255, 255, 0.22);
    --input-bg: #171D1A;
    --input-text: var(--text-primary);
    --input-border: var(--border-default);
    --focus-ring: 0 0 0 3px rgba(79, 196, 158, 0.22);

    --text-primary-v2: #F4F6F3;
    --text-secondary-v2: #C9D3CD;
    --text-tertiary-v2: #94A199;
  }

  :root:not([data-theme="light"]) body,
  :root:not([data-theme="light"]) .page-content{
    color: var(--text-primary, #F4F6F3);
    background:
      linear-gradient(180deg, rgba(16, 191, 165, 0.03), transparent 260px),
      var(--bg-base, #101312);
  }
}

[data-theme="dark"],
body[data-theme="dark"]{
  --brand-primary: #4FC49E;
  --brand-primary-hover: #66D2AD;
  --brand-primary-dark: #D9F8EA;
  --brand-primary-strong: #D9F8EA;
  --brand-primary-soft: rgba(79, 196, 158, 0.14);
  --primary-ring: rgba(79, 196, 158, 0.22);

  --primary-800: #D9F8EA;
  --primary-600: #9FE1CB;
  --primary-500: #66D2AD;
  --primary-100: rgba(79, 196, 158, 0.18);
  --primary-50: rgba(79, 196, 158, 0.1);
  --primary-color: var(--primary-600);
  --primary-dark: var(--primary-800);
  --primary-light: var(--primary-500);
  --primary-gradient: linear-gradient(135deg, #0F6E56 0%, #085041 100%);

  --bg: #101312;
  --surface: #1D211E;
  --surface-2: #101312;
  --muted: #202721;
  --bg-base: #101312;
  --bg-surface: #1D211E;
  --bg-muted: #202721;
  --bg-elevated: #222923;
  --bg-hover: #263029;

  --text: #F4F6F3;
  --text-2: #C9D3CD;
  --text-3: #94A199;
  --text-900: #F4F6F3;
  --text-700: #C9D3CD;
  --text-500: #94A199;
  --text-primary: var(--text-900);
  --text-secondary: var(--text-700);
  --text-muted: var(--text-500);
  --text-tertiary: var(--text-500);
  --dark-color: var(--text-900);
  --light-color: var(--primary-50);

  --border: rgba(255, 255, 255, 0.08);
  --divider: rgba(255, 255, 255, 0.08);
  --border-subtle: var(--border);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.22);
  --input-bg: #171D1A;
  --input-text: var(--text-primary);
  --input-border: var(--border-default);
  --focus-ring: 0 0 0 3px rgba(79, 196, 158, 0.22);

  --text-primary-v2: #F4F6F3;
  --text-secondary-v2: #C9D3CD;
  --text-tertiary-v2: #94A199;
}

[data-theme="dark"] body,
body[data-theme="dark"],
[data-theme="dark"] .page-content,
body[data-theme="dark"] .page-content{
  color: var(--text-primary, #F4F6F3);
  background:
    linear-gradient(180deg, rgba(16, 191, 165, 0.03), transparent 260px),
    var(--bg-base, #101312);
}

:where(.module-options-page, .exam-container, .do-test-container){
  font-family: var(--font-sans);
}

:where(.module-options-page, .exam-container, .do-test-container) :where(h1, h2, h3, h4, h5, h6){
  font-weight: 500;
  letter-spacing: 0;
}

:where(.module-options-page, .exam-container, .do-test-container) :where(.btn, button, a){
  transition:
    background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
}

:where(.module-options-page, .exam-container, .do-test-container) :where(.btn, button):active{
  transform: scale(0.98);
  transition-duration: var(--motion-instant);
}

@media (max-width: 768px){
  :root{
    --topbar-height: var(--topbar-height-mobile);
    --page-gutter-x: 16px;
    --section-gap: 16px;
    --card-padding: 16px;
  }
}

/* ==============================================
   RESPONSIVE ZOOM - Laptop & small-desktop scaling
   Keep laptop screens visually close to a larger desktop monitor.
============================================== */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (max-width: 1365px) {
  html { zoom: 0.75; }
  :root { --app-dvh: calc(100vh / 0.75); }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1366px) and (max-width: 1599px) {
  html { zoom: 0.8; }
  :root { --app-dvh: calc(100vh / 0.8); }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1600px) and (max-width: 1799px) {
  html { zoom: 0.85; }
  :root { --app-dvh: calc(100vh / 0.85); }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1800px) and (max-width: 1919px) {
  html { zoom: 0.92; }
  :root { --app-dvh: calc(100vh / 0.92); }
}

@media (hover: none), (pointer: coarse) {
  html { zoom: 1; }
  :root { --app-dvh: 100dvh; }
}