/* ============================================================
   IELTS LAB — Shared Design System (UI/UX Pro Max)
   Style: Swiss Modernism 2.0 + Soft UI Evolution
   Single teal accent · Bebas Neue display · DM Sans body
   Safe to include on any page: only adds NEW tokens & polish,
   never redefines a page's existing --teal/--bg/etc.
   ============================================================ */

:root {
  /* radius scale */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  /* elevation scale (light) */
  --sh-1: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.05);
  --sh-2: 0 4px 12px rgba(15,23,42,.06), 0 12px 28px rgba(15,23,42,.07);
  --sh-glow: 0 14px 40px rgba(0,191,165,.18);
  /* layout */
  --maxw: 1180px;
  /* motion */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .15s;
  --t-base: .25s;
}

[data-theme="dark"] {
  --sh-1: 0 1px 2px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.3);
  --sh-2: 0 4px 14px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4);
  --sh-glow: 0 14px 40px rgba(0,191,165,.22);
}

/* ── Global polish (safe, broadly beneficial) ── */
html { scroll-behavior: smooth; }

::selection { background: rgba(0,191,165,.22); color: inherit; }

/* Accessible focus rings without disturbing mouse users */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--teal, #00bfa5);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Refined scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--teal, #00bfa5) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--teal, #00bfa5) 55%, transparent);
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--teal, #00bfa5);
  background-clip: content-box;
}

/* ── Reusable Pro Max components (opt-in via class) ── */

/* Floating glass navbar */
.ux-nav {
  position: fixed; top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  width: calc(100% - 32px); max-width: var(--maxw);
  height: 58px; padding: 0 14px 0 22px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--border, #e2e6ea);
  border-radius: 16px;
  box-shadow: var(--sh-1);
}
[data-theme="dark"] .ux-nav {
  background: rgba(15,23,42,.72);
  border-color: var(--border, #334155);
}

/* Soft-UI card */
.ux-card {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e2e6ea);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base), border-color var(--t-base);
}
.ux-card.is-interactive { cursor: pointer; }
.ux-card.is-interactive:hover {
  transform: translateY(-5px);
  border-color: var(--teal, #00bfa5);
  box-shadow: var(--sh-glow);
}

/* Buttons */
.ux-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 700;
  padding: 12px 24px;
  border: none; border-radius: 12px;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base);
}
.ux-btn-primary { background: var(--teal, #00bfa5); color: #fff; }
.ux-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--sh-glow); background: var(--teal-dim, #00897b); }
.ux-btn-ghost {
  background: transparent; color: var(--sub, #475569);
  border: 1.5px solid var(--border, #e2e6ea);
}
.ux-btn-ghost:hover { border-color: var(--teal, #00bfa5); color: var(--teal, #00bfa5); }
.ux-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Section heading helpers */
.ux-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--teal, #00bfa5);
}
.ux-title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px; line-height: 1;
  color: var(--text, #0f172a);
}

/* Pulse dot */
.ux-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal, #00bfa5);
  animation: uxPulse 2s ease infinite;
}
@keyframes uxPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.8); }
}

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


/* ============================================================
   2026 REDESIGN OVERLAY — matches new index.html design system
   Clash Display (display) · Satoshi (body) via font aliasing,
   plus unified color tokens for light & dark themes.
   ============================================================ */

@font-face {
  font-family: 'Clash Display';
  src: url('https://cdn.fontshare.com/wf/VFMK2COV3DN37JR7JQ4CAOJPZ7KWKNY7/ODD5YJNDLHZZB2MIT3DPVH4EIHAMZ34D/BSY64LPTT3OPLVKAZKL3AHKRWZ3D74AC.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/VFMK2COV3DN37JR7JQ4CAOJPZ7KWKNY7/ODD5YJNDLHZZB2MIT3DPVH4EIHAMZ34D/BSY64LPTT3OPLVKAZKL3AHKRWZ3D74AC.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('https://cdn.fontshare.com/wf/2GQIT54GKQY3JRFTSHS4ARTRNRQISSAA/3CIP5EBHRRHE5FVQU3VFROPUERNDSTDF/JTSL5QESUXATU47LCPUNHZQBDDIWDOSW.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/2GQIT54GKQY3JRFTSHS4ARTRNRQISSAA/3CIP5EBHRRHE5FVQU3VFROPUERNDSTDF/JTSL5QESUXATU47LCPUNHZQBDDIWDOSW.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('https://cdn.fontshare.com/wf/FPDAZ2S6SW4QMSRIIKNNGTPM6VIXYMKO/5HNPQ453FRLIQWV2FNOBUU3FKTDZQVSG/Z3MGHFHX6DCTLQ55LJYRJ5MDCZPMFZU6.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/FPDAZ2S6SW4QMSRIIKNNGTPM6VIXYMKO/5HNPQ453FRLIQWV2FNOBUU3FKTDZQVSG/Z3MGHFHX6DCTLQ55LJYRJ5MDCZPMFZU6.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('https://cdn.fontshare.com/wf/BFBSY7LX5W2U2EROCLVVTQP4VS7S4PC3/IIUX4FGTMD2LK2VWD3RVTAS4SSMUN7B5/53RZKGODFYDW3QHTIL7IPOWTBCSUEZK7.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/BFBSY7LX5W2U2EROCLVVTQP4VS7S4PC3/IIUX4FGTMD2LK2VWD3RVTAS4SSMUN7B5/53RZKGODFYDW3QHTIL7IPOWTBCSUEZK7.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('https://cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Font aliases: upgrade legacy families site-wide */
@font-face {
  font-family: 'Bebas Neue';
  src: url('https://cdn.fontshare.com/wf/FPDAZ2S6SW4QMSRIIKNNGTPM6VIXYMKO/5HNPQ453FRLIQWV2FNOBUU3FKTDZQVSG/Z3MGHFHX6DCTLQ55LJYRJ5MDCZPMFZU6.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/FPDAZ2S6SW4QMSRIIKNNGTPM6VIXYMKO/5HNPQ453FRLIQWV2FNOBUU3FKTDZQVSG/Z3MGHFHX6DCTLQ55LJYRJ5MDCZPMFZU6.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 70%;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('https://cdn.fontshare.com/wf/BFBSY7LX5W2U2EROCLVVTQP4VS7S4PC3/IIUX4FGTMD2LK2VWD3RVTAS4SSMUN7B5/53RZKGODFYDW3QHTIL7IPOWTBCSUEZK7.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/BFBSY7LX5W2U2EROCLVVTQP4VS7S4PC3/IIUX4FGTMD2LK2VWD3RVTAS4SSMUN7B5/53RZKGODFYDW3QHTIL7IPOWTBCSUEZK7.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 70%;
}
@font-face {
  font-family: 'DM Sans';
  src: url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('https://cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('https://cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('https://cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2') format('woff2'),
       url('https://cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff') format('woff');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* ── Unified 2026 palette (specificity-boosted so it wins over page tokens) ── */
:root:root {
  --bg:#f2f4f3;
  --bg-soft:#e9edec;
  --panel:#ffffff;
  --card:#ffffff;
  --bg-card:#ffffff;
  --surface:#ffffff;
  --text:#0a0f0e;
  --sub:#454f4d;
  --muted:#8a9491;
  --border:#e0e5e3;
  --border-light:#eaeeec;
  --border-mid:#c6cecb;
  --teal:#00bfa5;
  --teal-dim:#00907d;
  --teal-pale:rgba(0,191,165,.09);
  --teal-glow:rgba(0,191,165,.22);
}
html[data-theme="dark"]:root:root {
  --bg:#060809;
  --bg-soft:#0a0d0e;
  --panel:#0c0f10;
  --card:#0c0f10;
  --bg-card:#0c0f10;
  --surface:#0c0f10;
  --text:#eef2f1;
  --sub:#9fadaa;
  --muted:#5d6a67;
  --border:#1b2220;
  --border-light:#161c1a;
  --border-mid:#2b3532;
  --teal:#00d6b9;
  --teal-dim:#00bfa5;
  --teal-pale:rgba(0,214,185,.09);
  --teal-glow:rgba(0,214,185,.16);
}

/* ── Global 2026 polish ── */
html body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* ═══════════════════ SHARED NAV (index.html style — hardcoded colors) ═══════════════════ */
/* Light-mode hardcoded values from index.html design tokens */
nav#main-nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:500;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 12px 0 22px;height:60px;width:calc(100% - 36px);max-width:1200px;
  background:rgba(255,255,255,.66);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px solid #e0e5e3;border-radius:100px;
  box-shadow:0 1px 2px rgba(10,15,14,.05),0 4px 14px rgba(10,15,14,.05);
  transition:box-shadow .3s,border-color .3s;}
nav#main-nav.scrolled{box-shadow:0 8px 30px rgba(10,15,14,.09),0 24px 60px rgba(10,15,14,.08);border-color:#c6cecb;}
nav#main-nav .nav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:19px;letter-spacing:.06em;}
nav#main-nav .nav-logo img{width:27px;height:27px;border-radius:7px;object-fit:contain;transition:transform .4s;}
nav#main-nav .nav-logo:hover img{transform:rotate(-12deg) scale(1.12);}
nav#main-nav .logo-ielts{color:#0a0f0e;}
nav#main-nav .logo-lab{color:#00bfa5;}
nav#main-nav .nav-links{display:flex;align-items:center;gap:4px;list-style:none;}
nav#main-nav .nav-links a{color:#454f4d;text-decoration:none;font-size:13.5px;font-weight:500;
  padding:8px 14px;border-radius:100px;transition:color .2s,background .2s;}
nav#main-nav .nav-links a:hover{color:#0a0f0e;background:rgba(0,191,165,.09);}
nav#main-nav .nav-right{display:flex;align-items:center;gap:10px;}
nav#main-nav #theme-toggle-btn{border:1px solid #e0e5e3;background:none;cursor:pointer;font-size:15px;line-height:1;
  width:38px;height:38px;border-radius:50%;color:#0a0f0e;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .2s,background .2s,transform .2s;}
nav#main-nav #theme-toggle-btn:hover{border-color:#00bfa5;background:rgba(0,191,165,.09);transform:rotate(20deg);}
nav#main-nav .btn-nav-login{background:none;border:none;color:#454f4d;font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:100px;cursor:pointer;transition:color .2s;}
nav#main-nav .btn-nav-login:hover{color:#00bfa5;}
nav#main-nav .btn-nav-register{background:#0a0f0e;border:none;color:#f2f4f3;font-size:13.5px;font-weight:700;padding:9px 20px;border-radius:100px;cursor:pointer;transition:all .25s;}
nav#main-nav .btn-nav-register:hover{background:#00bfa5;color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,191,165,.22);}
nav#main-nav .nav-user{display:none;align-items:center;gap:10px;position:relative;}
nav#main-nav .nav-user.visible{display:flex;}
nav#main-nav .nav-auth.hidden{display:none;}
nav#main-nav .user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#00bfa5,#00907d);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;transition:box-shadow .2s;}
nav#main-nav .user-avatar:hover{box-shadow:0 0 0 4px rgba(0,191,165,.09);}
nav#main-nav .user-name-nav{font-size:13.5px;color:#0a0f0e;font-weight:600;}
nav#main-nav .user-menu-toggle{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #e0e5e3;border-radius:50%;background:none;color:#8a9491;cursor:pointer;transition:all .2s;padding:0;flex-shrink:0;}
nav#main-nav .user-menu-toggle:hover{border-color:#00bfa5;color:#00bfa5;}
nav#main-nav .user-menu-toggle svg{width:13px;height:13px;transition:transform .25s;pointer-events:none;}
nav#main-nav .nav-user.dropdown-open .user-menu-toggle{border-color:#00bfa5;color:#00bfa5;}
nav#main-nav .nav-user.dropdown-open .user-menu-toggle svg{transform:rotate(180deg);}
nav#main-nav .user-dropdown{display:none;position:absolute;top:calc(100% + 16px);right:0;background:#fff;
  border:1px solid #e0e5e3;border-radius:16px;min-width:200px;
  box-shadow:0 8px 30px rgba(10,15,14,.09),0 24px 60px rgba(10,15,14,.08);z-index:600;overflow:hidden;}
nav#main-nav .nav-user.dropdown-open .user-dropdown{display:block!important;pointer-events:auto;}
nav#main-nav .dropdown-header{padding:14px 16px;border-bottom:1px solid #e0e5e3;}
nav#main-nav .dropdown-header .d-name{font-size:14px;font-weight:700;color:#0a0f0e;}
nav#main-nav .dropdown-header .d-email{font-size:12px;color:#8a9491;margin-top:2px;}
nav#main-nav .dropdown-item{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13px;color:#454f4d;cursor:pointer;
  transition:all .15s;border:none;background:none;width:100%;text-align:left;font-weight:500;}
nav#main-nav .dropdown-item:hover{background:rgba(0,191,165,.09);color:#00bfa5;}
nav#main-nav .dropdown-item.danger:hover{background:rgba(224,85,85,.08);color:#e05555;}
nav#main-nav .dropdown-item svg{width:15px;height:15px;flex-shrink:0;}
nav#main-nav .hamburger{display:none;background:none;border:1px solid #e0e5e3;color:#454f4d;
  width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .2s;padding:0;}
nav#main-nav .hamburger:hover,nav#main-nav .hamburger.open{border-color:#00bfa5;color:#00bfa5;background:rgba(0,191,165,.09);}
nav#main-nav .hamburger svg{width:17px;height:17px;display:block;pointer-events:none;}
.mobile-nav{position:fixed;top:88px;left:18px;right:18px;background:#fff;border:1px solid #e0e5e3;
  border-radius:24px;box-shadow:0 8px 30px rgba(10,15,14,.09),0 24px 60px rgba(10,15,14,.08);z-index:490;padding:8px;opacity:0;pointer-events:none;
  transform:translateY(-10px) scale(.98);transition:opacity .25s,transform .25s;}
.mobile-nav.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.mobile-nav a{display:flex;align-items:center;gap:12px;padding:15px 16px;color:#454f4d;text-decoration:none;
  font-size:15px;font-weight:600;border-radius:14px;transition:background .15s,color .15s;min-height:48px;}
.mobile-nav a:hover,.mobile-nav a:active{background:rgba(0,191,165,.09);color:#00bfa5;}
.mobile-nav-divider{height:1px;background:#e0e5e3;margin:4px 8px;}
/* Dark mode overrides — exact index.html dark tokens */
[data-theme="dark"] nav#main-nav{background:rgba(9,12,13,.72);border-color:#1b2220;
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.35);}
[data-theme="dark"] nav#main-nav.scrolled{box-shadow:0 8px 32px rgba(0,0,0,.5),0 28px 70px rgba(0,0,0,.45);border-color:#2b3532;}
[data-theme="dark"] nav#main-nav .logo-ielts{color:#eef2f1;}
[data-theme="dark"] nav#main-nav .logo-lab{color:#00d6b9;}
[data-theme="dark"] nav#main-nav .nav-links a{color:#9fadaa;}
[data-theme="dark"] nav#main-nav .nav-links a:hover{color:#eef2f1;background:rgba(0,214,185,.09);}
[data-theme="dark"] nav#main-nav #theme-toggle-btn{border-color:#1b2220;color:#eef2f1;}
[data-theme="dark"] nav#main-nav #theme-toggle-btn:hover{border-color:#00d6b9;background:rgba(0,214,185,.09);}
[data-theme="dark"] nav#main-nav .btn-nav-login{color:#9fadaa;}
[data-theme="dark"] nav#main-nav .btn-nav-login:hover{color:#00d6b9;}
[data-theme="dark"] nav#main-nav .btn-nav-register{background:#eef2f1;color:#060809;}
[data-theme="dark"] nav#main-nav .btn-nav-register:hover{background:#00d6b9;color:#fff;box-shadow:0 8px 20px rgba(0,214,185,.16);}
[data-theme="dark"] nav#main-nav .user-avatar{background:linear-gradient(135deg,#00d6b9,#00bfa5);}
[data-theme="dark"] nav#main-nav .user-name-nav{color:#eef2f1;}
[data-theme="dark"] nav#main-nav .user-menu-toggle{border-color:#1b2220;color:#5d6a67;}
[data-theme="dark"] nav#main-nav .user-menu-toggle:hover,[data-theme="dark"] nav#main-nav .nav-user.dropdown-open .user-menu-toggle{border-color:#00d6b9;color:#00d6b9;}
[data-theme="dark"] nav#main-nav .user-dropdown{background:#0c0f10;border-color:#1b2220;}
[data-theme="dark"] nav#main-nav .dropdown-header{border-color:#1b2220;}
[data-theme="dark"] nav#main-nav .dropdown-header .d-name{color:#eef2f1;}
[data-theme="dark"] nav#main-nav .dropdown-header .d-email{color:#5d6a67;}
[data-theme="dark"] nav#main-nav .dropdown-item{color:#9fadaa;}
[data-theme="dark"] nav#main-nav .dropdown-item:hover{background:rgba(0,214,185,.09);color:#00d6b9;}
[data-theme="dark"] nav#main-nav .hamburger{border-color:#1b2220;color:#9fadaa;}
[data-theme="dark"] nav#main-nav .hamburger:hover,[data-theme="dark"] nav#main-nav .hamburger.open{border-color:#00d6b9;color:#00d6b9;background:rgba(0,214,185,.09);}
[data-theme="dark"] .mobile-nav{background:#0c0f10;border-color:#1b2220;box-shadow:0 8px 32px rgba(0,0,0,.5),0 28px 70px rgba(0,0,0,.45);}
[data-theme="dark"] .mobile-nav a{color:#9fadaa;}
[data-theme="dark"] .mobile-nav a:hover,[data-theme="dark"] .mobile-nav a:active{background:rgba(0,214,185,.09);color:#00d6b9;}
[data-theme="dark"] .mobile-nav-divider{background:#1b2220;}
@media(max-width:860px){nav#main-nav .nav-links{display:none;}nav#main-nav .btn-nav-login,nav#main-nav .btn-nav-register{display:none;}nav#main-nav .hamburger{display:flex;}}