/* ==========================================================================
   GLOBAL DESIGN SYSTEM TOKENS - ROYAL BLUE & CLEAN LIGHT THEME
   ========================================================================== */
:root {
  /* Primary & Accents */
  --color-primary: #155EEF;
  --color-primary-hover: #0F4CD9;
  --color-primary-light: #F0F6FF;

  /* Surfaces & Backgrounds */
  --bg-page: #F0F6FF;
  --surface-card: #FFFFFF;
  --border-subtle: #DBEAFE;

  /* Typography */
  --text-heading: #12346B;
  --text-body: #334155;
  --text-muted: #64748B;

  /* Status Colors */
  --badge-success-bg: #ECFDF5;
  --badge-success-text: #059669;
  --badge-pending-bg: #FFFBEB;
  --badge-pending-text: #D97706;

  /* Legacy & Brand Token Compatibility */
  --ink: #12346B;
  --ink-2: #334155;
  --muted: #64748B;
  --bg: #F0F6FF;
  --surface: #FFFFFF;
  --surface-solid: #FFFFFF;
  --line: #DBEAFE;
  --hair: #DBEAFE;
  --primary: #155EEF;
  --primary-deep: #12346B;
  --primary-ink: #FFFFFF;
  --primary-soft: #F0F6FF;
  --accent: #155EEF;
  --accent-soft: #F0F6FF;
  --grad: linear-gradient(135deg, #155EEF 0%, #12346B 100%);
  --danger: #E11D48;
  --danger-soft: #FFE4EA;
  --ok: #059669;
  --ok-soft: #DCFCE7;
  --gold: #F59E0B;
  --gold-soft: #FEF3C7;
  --shadow-card: 0 2px 10px rgba(18, 52, 107, 0.04);
  --shadow-hover: 0 8px 24px rgba(18, 52, 107, 0.08);
  --ease: cubic-bezier(.165, .84, .44, 1);
  --serif: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 14px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --color-primary: #388BFD;
  --color-primary-hover: #155EEF;
  --color-primary-light: #061224;
  --bg-page: #061224;
  --surface-card: #081426;
  --border-subtle: rgba(255, 255, 255, 0.1);
  --text-heading: #F8FAFC;
  --text-body: #CBD5E1;
  --text-muted: #94A3B8;
  --badge-success-bg: rgba(5, 150, 105, 0.2);
  --badge-success-text: #34D399;
  --badge-pending-bg: rgba(217, 119, 6, 0.2);
  --badge-pending-text: #FBBF24;

  --ink: #FFFFFF;
  --ink-2: #CBD5E1;
  --muted: #94A3B8;
  --bg: #061224;
  --surface: #081426;
  --surface-solid: #0A1A30;
  --line: rgba(255, 255, 255, 0.1);
  --hair: rgba(255, 255, 255, 0.08);
  --primary: #388BFD;
  --primary-soft: rgba(56, 139, 253, 0.15);
  --accent: #388BFD;
  --accent-soft: rgba(56, 139, 253, 0.15);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* Base Body & Container */
body, .dashboard-container, .admin-main-container, .dash-wrap, .student-dashboard-wrapper, main.main {
  background-color: var(--bg-page) !important;
  color: var(--text-body) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Headings Across All Pages */
h1, h2, h3, h4, h5, .page-title, .section-title {
  color: var(--text-heading) !important;
  font-weight: 700 !important;
}

/* Uniform Cards Across All Pages (Settings, Tables, Exams, Metrics) */
.admin-card, .dashboard-card, .settings-card, .table-card, 
.panel, .stats-box, .module-card, .exam-card, .card, .glass-card-3d, .domain-card, .res-card, .uni-card, .mock-card, .papers-card, .analytics-stat-card, .analytics-panel-card {
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(18, 52, 107, 0.04) !important;
}

/* Consistent Sidebar (Admin & Student) */
.admin-sidebar, .student-sidebar, aside.sidebar {
  background-color: var(--surface-card) !important;
  border-right: 1px solid var(--border-subtle) !important;
}

.sidebar a.nav-link, .admin-sidebar .sidebar-item, .admin-nav-link, .adm-dropdown-toggle, .adm-dropdown-menu a {
  color: var(--text-heading) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.sidebar a.nav-link:hover, .admin-sidebar .sidebar-item:hover, .admin-nav-link:hover, .adm-dropdown-toggle:hover, .adm-dropdown-menu a:hover {
  background-color: var(--bg-page) !important;
  color: var(--color-primary) !important;
}

/* Active Sidebar Tab */
.sidebar a.nav-link.active, 
.admin-sidebar .sidebar-item.active,
.admin-sidebar .active,
.admin-nav-link.active,
.adm-dropdown-menu a.active,
.adm-dropdown.is-open > .adm-dropdown-toggle.is-active {
  background: var(--bg-page) !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  border-left: 4px solid var(--color-primary) !important;
  box-shadow: none !important;
}

/* Form Inputs, Select Boxes & Search Bars */
input[type="text"], input[type="email"], input[type="password"], 
input[type="number"], select, textarea, .form-control {
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-heading) !important;
  border-radius: 8px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.15) !important;
}

/* Data Tables Across All Pages (Students, Payments, Questions) */
table, .data-table {
  background: var(--surface-card) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

table th {
  background-color: var(--bg-page) !important;
  color: var(--text-heading) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

table td {
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-body) !important;
}

table tr:hover td {
  background-color: rgba(240, 246, 255, 0.5) !important;
}

/* Primary Action Buttons */
.btn-primary, .btn-submit, .btn-save, .btn-action, .btn:not(.btn-ghost):not(.btn-danger):not(.linkbtn-danger):not(.spin-btn-action) {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease !important;
}

.btn-primary:hover, .btn-submit:hover, .btn-save:hover, .btn:not(.btn-ghost):not(.btn-danger):not(.linkbtn-danger):not(.spin-btn-action):hover {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}


body{background:var(--bg);color:var(--ink-2);font-family:var(--sans);transition:background .3s var(--ease),color .3s var(--ease)}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(600px 400px at 85% -5%,rgba(21,94,239,.08),transparent 70%),radial-gradient(500px 380px at -5% 30%,rgba(18,52,107,.05),transparent 70%)}
.is-admin{--bg:#EEF3F7}html[data-theme=dark] .is-admin{--bg:#061224}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);letter-spacing:-.02em;font-weight:800}
h1{font-weight:800}
a{color:var(--primary)}
.eyebrow{color:var(--accent)!important;font-family:var(--serif);font-weight:700;letter-spacing:.12em}
.lead{color:var(--ink-2)}.muted,.meta{color:var(--muted)}
code{background:var(--primary-soft);color:var(--ink)}

/* Glass cards */
.card,.glass-card-3d,.uni-card,.mock-card,.papers-card,.res-card,.domain-card,.list-item,.empty,.uni-hero,.mock-bar,.table-wrap,.lockpage{
  background:var(--surface)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--hair)!important;box-shadow:var(--shadow-card);transition:all .3s var(--ease)}
html[data-theme=dark] .card,html[data-theme=dark] .uni-card,html[data-theme=dark] .mock-card,html[data-theme=dark] .papers-card,html[data-theme=dark] .list-item,html[data-theme=dark] .empty,html[data-theme=dark] .table-wrap,html[data-theme=dark] .uni-hero,html[data-theme=dark] .mock-bar{border-color:var(--line)!important}
.card{border-radius:28px}.list-item{border-radius:18px}.empty{border-radius:28px}.table-wrap{border-radius:22px}
a.card:hover,.uni-card:hover,.mock-card:hover,a.list-item:hover,.domain-card:hover,.res-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(21,94,239,.35)!important}
.uni-card:before{background:linear-gradient(135deg,rgba(21,94,239,.14),rgba(11,79,138,.10))}
.mock-card.vip,.card.vip{background:linear-gradient(160deg,var(--gold-soft),var(--surface))!important;border-color:rgba(245,158,11,.45)!important}
.exam-card.is-unlocked{box-shadow:0 0 0 2px var(--primary) inset,var(--shadow-card)}

/* Buttons & pills */
.btn{background:var(--grad);color:#fff!important;border:0;border-radius:999px;font-family:var(--serif);font-weight:700;box-shadow:0 8px 18px -6px rgba(21,94,239,.45);transition:all .3s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -8px rgba(21,94,239,.55);background:var(--grad);filter:brightness(1.06)}
.btn-ghost{background:transparent!important;color:var(--primary)!important;border:1.5px solid var(--primary)!important;box-shadow:none}
.btn-ghost:hover{background:var(--primary-soft)!important}
.btn-danger{background:linear-gradient(135deg,#F43F5E,#E11D48)!important;box-shadow:0 8px 18px -6px rgba(225,29,72,.4)}
.btn-vip{background:linear-gradient(135deg,#FBBF24,#F59E0B 45%,#D97706)!important;color:#1F1300!important;box-shadow:0 8px 18px -6px rgba(245,158,11,.5)}
.chip,.lockbtn,.chap-btn,.iconbtn{border-radius:999px!important;background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--ink)!important;transition:all .25s var(--ease)}
.chip:hover,.chap-btn:hover{border-color:var(--primary)!important;color:var(--primary)!important}
.chip-ai{background:var(--primary-soft)!important;border-color:rgba(21,94,239,.3)!important}
.chip-del:hover{border-color:var(--danger)!important;color:var(--danger)!important}
.chap-btn.active,.tabs a.active{background:var(--grad)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 18px rgba(21,94,239,.35)}
.tabs a{border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.lockbtn.is-locked{background:var(--gold-soft)!important;border-color:rgba(245,158,11,.5)!important}
.lockbtn.is-free{color:var(--primary)!important;border-color:rgba(21,94,239,.4)!important}
.chip-stat{background:var(--primary-soft);color:var(--ink)}

/* Forms */
input,select,textarea{background:var(--surface-solid);color:var(--ink);border:1px solid var(--line);border-radius:14px;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px rgba(21,94,239,.15)}
label{color:var(--ink-2)}

/* Tables, badges, alerts */
table{color:var(--ink-2)}th{color:var(--muted);background:transparent}th,td{border-color:var(--line)!important}
.badge{border-radius:999px;font-family:var(--serif)}
.badge-published,.badge-approved,.badge-active,.badge-free{background:var(--ok-soft);color:var(--ok)}
.badge-draft,.badge-pending,.badge-hidden,.badge-in{background:var(--gold-soft);color:#B45309}
html[data-theme=dark] .badge-draft,html[data-theme=dark] .badge-pending,html[data-theme=dark] .badge-hidden{color:var(--gold)}
.badge-archived,.badge-suspended,.badge-rejected,.badge-locked{background:var(--danger-soft);color:var(--danger)}
.badge-premium{background:var(--grad);color:#fff}
.alert{border-radius:18px;border:1px solid var(--line);backdrop-filter:blur(12px)}
.alert-ok{background:var(--ok-soft);color:var(--ok)}.alert-err{background:var(--danger-soft);color:var(--danger)}
.alert-warn{background:var(--gold-soft);color:#92400E}html[data-theme=dark] .alert-warn{color:var(--gold)}
.demo-banner{background:var(--grad);color:#fff}.demo-banner a{color:#fff}
.bar{background:var(--primary-soft)}.bar span{background:var(--grad)}
.lockhelp{background:var(--primary-soft);border-color:rgba(21,94,239,.25);color:var(--ink-2);border-radius:18px}

/* Header */
.topbar,.is-admin .topbar{position:sticky;top:0;z-index:30;background:rgba(244,248,251,.85)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)!important;box-shadow:0 6px 24px -18px rgba(21,94,239,.35)}
html[data-theme=dark] .topbar{background:rgba(4,13,26,.9)!important}
.topbar-inner{gap:14px}
.mainnav a,.linkbtn,.is-admin .mainnav a,.is-admin .linkbtn{color:var(--ink-2)!important;border-radius:999px;font-family:var(--serif);font-weight:600;position:relative}
.mainnav a:hover{background:var(--primary-soft)!important;color:var(--primary)!important}
.mainnav a.active,.is-admin .mainnav a.active{background:transparent!important;color:var(--primary)!important}
.mainnav a.active:after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--accent)}
.mainnav .btn{color:#fff!important}
.brand-logo.dark{display:none}html[data-theme=dark] .brand-logo.light{display:none}html[data-theme=dark] .brand-logo.dark{display:block}
.nav-search{display:flex;align-items:center;gap:6px;background:var(--surface-solid);border:1px solid var(--line);border-radius:999px;padding:0 6px 0 12px;height:40px;min-width:0}
.nav-search input{border:0;background:transparent;padding:0;height:38px;width:150px;box-shadow:none!important;font-size:.9rem}
.nav-search svg{flex-shrink:0;color:var(--muted)}
.theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface-solid);display:grid;place-items:center;cursor:pointer;color:var(--ink);flex-shrink:0;transition:all .3s var(--ease)}
.theme-toggle:hover{transform:rotate(18deg);border-color:var(--primary);color:var(--primary)}
.theme-toggle .moon{display:none}html[data-theme=dark] .theme-toggle .sun{display:none}html[data-theme=dark] .theme-toggle .moon{display:block}
.navbtn{background:var(--surface-solid)!important;border-color:var(--line)!important;border-radius:14px!important}
.navbtn span{background:var(--ink)!important}
.avatar{box-shadow:0 0 0 2px rgba(21,94,239,.35)}
.avatar-ph,.uni-logo-ph{background:var(--grad)!important;color:#fff}
@media(max-width:1280px){.is-admin .mainnav{background:var(--surface-solid)!important}}
@media(max-width:900px){.mainnav,.is-admin .mainnav{background:var(--surface-solid)!important;border-radius:0 0 24px 24px}.mainnav a.active:after{display:none}.mainnav a.active{background:var(--primary-soft)!important}}
@media(max-width:1100px){.nav-search{display:none}}

/* Hero / exam hero / papers */
.exam-hero{background:radial-gradient(120% 140% at 100% 0%,#155EEF 0%,transparent 55%),radial-gradient(90% 120% at 0% 100%,rgba(56,139,253,.45) 0%,transparent 60%),linear-gradient(135deg,#061A3A,#12346B)!important;border-radius:32px!important;box-shadow:0 30px 60px -30px rgba(11,44,92,.7)!important}
.exam-hero .eyebrow{color:#93C5FD!important}.exam-hero .lead{color:#E0F2F1}
.papers-head{background:var(--grad)!important}
.paper-item{border-color:var(--line)!important;color:var(--ink)}.paper-item:hover{background:var(--primary-soft)}
.paper-year{background:var(--primary-soft);color:var(--primary)}.paper-item.locked .paper-year{background:var(--gold-soft);color:#B45309}
.uni-logo{background:#fff;border-color:var(--line)}
.free-tag{background:var(--ok-soft);color:var(--ok)}.vip-tag{background:var(--gold-soft);color:#B45309;border-radius:999px;padding:2px 8px;font-style:normal;font-size:.72rem;font-weight:700}
.timer{background:var(--grad)!important;border-radius:999px!important}.timer.warn{background:linear-gradient(135deg,#F43F5E,#E11D48)!important}
.qn{background:var(--grad)}.opt{border-color:var(--line);background:var(--surface-solid)}.opt:hover{border-color:var(--primary)}
.opt-l{background:var(--primary-soft);color:var(--primary)}.opt:has(input:checked){background:var(--primary-soft);border-color:var(--primary)}.opt:has(input:checked) .opt-l{background:var(--grad);color:#fff}
.ring{background:conic-gradient(var(--primary) calc(var(--p)*1%),var(--primary-soft) 0)}.ring span{background:var(--surface-solid);color:var(--ink)}
.explain{background:var(--primary-soft);color:var(--ink-2)}
.reader-bar{background:var(--grad)}.hero-card{background:var(--grad)}
.access-pill.is-on{background:var(--grad)}.access-pill.is-off{background:var(--primary-soft);color:var(--ink-2)}
.allaccess-cta{background:linear-gradient(135deg,var(--gold-soft),var(--surface))!important}
.topic-row,.topic-row summary{border-radius:16px}.topic-row{background:var(--primary-soft);border:1px solid var(--line)}
.t-item{border-radius:14px;background:var(--surface-solid);border:1px solid var(--line);color:var(--ink)}
.t-item:hover{border-color:var(--primary)}
.uni-hero{border-radius:32px!important;background-image:linear-gradient(135deg,rgba(21,94,239,.08),transparent 60%)!important}
.pdf-frame{border-radius:24px;border-color:var(--line)}
.filebtn{background:var(--grad);border-radius:999px}
.fmt{background:var(--primary-soft);color:var(--ink-2)}

/* Footer */
.site-footer{margin-top:40px;background:#0B1220;color:#94A3B8;border-top:1px solid rgba(255,255,255,.1);border-radius:44px 44px 0 0;padding:56px 0 24px}
.site-footer h4{color:#fff;font-size:1rem;margin:0 0 14px}
.site-footer a{color:#CBD5E1;text-decoration:none}.site-footer a:hover{color:#539BF5}
.foot-grid{display:grid;grid-template-columns:4fr 2fr 3fr 3fr;gap:36px}
.foot-logo{height:46px;margin-bottom:14px}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);font-size:1rem;transition:all .3s var(--ease)}
.foot-social a:hover{background:var(--grad);transform:translateY(-3px)}
.foot-social a i,
.foot-social a svg{width:20px !important;height:20px !important;display:block;}
.foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.92rem}
.foot-list li:before{content:"›";color:#539BF5;font-weight:800;margin-right:8px}
.foot-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.foot-chips span{font-size:.75rem;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#E2E8F0}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:.85rem}
.footer{display:none}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.site-footer{border-radius:32px 32px 0 0}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* Home */
.announce{background:var(--grad);color:#fff;text-align:center;font:600 .88rem var(--serif);padding:9px 44px;position:relative}
.announce button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:0;color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer}
.h-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:20px 0 40px}
.trust{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:600 .82rem var(--serif);color:var(--ink);box-shadow:var(--shadow-card)}
.ping{position:relative;width:9px;height:9px;border-radius:50%;background:#22C55E}.ping:after{content:"";position:absolute;inset:0;border-radius:50%;background:#22C55E;animation:ping 1.4s infinite}
@keyframes ping{75%,100%{transform:scale(2.4);opacity:0}}
.h-hero h1{font-size:clamp(2.4rem,5.5vw,4rem);line-height:1.05;margin:18px 0}
.grad-text{background:linear-gradient(120deg,#155EEF,#388BFD 55%,#155EEF);-webkit-background-clip:text;background-clip:text;color:transparent}
.h-cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.h-badges{display:flex;flex-wrap:wrap;gap:10px}.h-badges span{font-size:.85rem;padding:7px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.h-art{position:relative}.h-art:before{content:"";position:absolute;inset:8% 8%;background:radial-gradient(circle,rgba(21,94,239,.45),transparent 70%);filter:blur(40px);z-index:-1}
.h-art img{width:100%;height:auto;border-radius:32px;display:block;box-shadow:var(--shadow-hover);border:6px solid var(--surface)}
.section{margin:72px 0}.sec-head{text-align:center;max-width:680px;margin:0 auto 32px}.sec-head h2{font-size:clamp(1.7rem,3.5vw,2.4rem)}
.exam-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.exam-c{display:flex;flex-direction:column;gap:10px;padding:24px;text-decoration:none;color:var(--ink-2)}
.exam-c .ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:1.8rem;background:var(--primary-soft)}
.exam-c h3{margin:0;font-size:1.3rem}.exam-c .pill{align-self:flex-start;margin-top:auto}
.exam-badge{align-self:flex-start;font:700 .7rem var(--serif);letter-spacing:.08em;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.checks{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px}.checks li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.checks li:before{content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:.8rem;font-weight:800}
.switcher{padding:18px;text-align:center}
.sw-tabs{display:inline-flex;gap:6px;padding:5px;border-radius:999px;background:var(--primary-soft);margin-bottom:14px;flex-wrap:wrap;justify-content:center}
.sw-tabs button{border:0;background:transparent;padding:8px 14px;border-radius:999px;font:600 .85rem var(--serif);color:var(--ink-2);cursor:pointer;transition:all .3s var(--ease)}
.sw-tabs button.on{background:var(--grad);color:#fff;box-shadow:0 8px 18px rgba(21,94,239,.35)}
.sw-stage{position:relative;aspect-ratio:7/8;border-radius:24px;overflow:hidden}
.sw-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.sw-stage img.on{opacity:1;transform:none}
.sw-badge{position:absolute;left:14px;bottom:14px;z-index:2;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.9);color:#061A3A;font:700 .82rem var(--serif);backdrop-filter:blur(8px)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{padding:26px}.feat .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;background:var(--grad);margin-bottom:14px;box-shadow:0 10px 20px -8px rgba(21,94,239,.5)}
.feat h3{margin:0 0 6px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{padding:24px;position:relative}.step:before{counter-increment:s;content:counter(s);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font:800 1rem var(--serif);margin-bottom:12px}
.ep-strip{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;padding:16px 22px}
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;margin:0 auto}
.price-card{padding:30px;display:flex;flex-direction:column;gap:12px}.price-card .amt{font:800 2.6rem var(--serif);color:var(--ink)}.price-card .amt small{font-size:1rem;color:var(--muted);font-weight:600}
.price-card.best{background:linear-gradient(160deg,rgba(21,94,239,.08),var(--surface))!important;border-color:rgba(21,94,239,.4)!important;position:relative}
.best-tag{position:absolute;top:18px;right:18px;font:700 .72rem var(--serif);padding:5px 10px;border-radius:999px;background:var(--grad);color:#fff}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat-c{text-align:center;padding:24px}.stat-c b{display:block;font:800 2.2rem var(--serif);color:var(--ink)}.stat-c b span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.faq{max-width:780px;margin:0 auto;display:grid;gap:12px}
.faq details{padding:0;border-radius:20px!important}.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font:700 1rem var(--serif);color:var(--ink);display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font-size:1.4rem;line-height:1;color:var(--primary);transition:transform .3s var(--ease)}
.faq details[open] summary:after{transform:rotate(45deg)}.faq details p{padding:0 22px 18px;margin:0}
.final-cta{border-radius:36px;padding:52px 28px;text-align:center;color:#fff;background:radial-gradient(80% 120% at 100% 0%,#155EEF,transparent 60%),var(--grad);box-shadow:0 30px 60px -30px rgba(11,44,92,.8)}
.final-cta h2{color:#fff;font-size:clamp(1.7rem,4vw,2.6rem)}.final-cta p{color:#E0F2F1}
.final-cta .btn{background:#fff!important;color:#12346B!important}
@media(max-width:960px){.h-hero,.about{grid-template-columns:1fr}.feat-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.stats-strip{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.feat-grid,.steps,.pricing{grid-template-columns:1fr}.section{margin:48px 0}}

/* Search */
.search-big{display:flex;gap:10px;margin-bottom:22px}.search-big input{flex:1;border-radius:999px;padding:12px 20px}
.brand{order:1}.mainnav{order:2}.nav-search{order:3}.theme-toggle{order:4}.navbtn{order:5}
.brand-logo.dark{filter:drop-shadow(0 0 10px rgba(56,139,253,.55))}

/* === VIP animated domain cards === */
@keyframes dcIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
@keyframes dcSpin{to{--dc-a:360deg}}
@keyframes dcFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-6deg)}}
@keyframes dcShine{0%{left:-60%}100%{left:130%}}
@property --dc-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.exam-c{position:relative;overflow:hidden;isolation:isolate;animation:dcIn .7s cubic-bezier(.2,.8,.2,1) both;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s!important}
.exam-c:nth-child(2){animation-delay:.08s}.exam-c:nth-child(3){animation-delay:.16s}.exam-c:nth-child(4){animation-delay:.24s}.exam-c:nth-child(5){animation-delay:.32s}.exam-c:nth-child(6){animation-delay:.4s}
.exam-c::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--dc-a),transparent 0 60%,#539BF5,#539BF5,#f0c75e,transparent 95%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;animation:dcSpin 3s linear infinite;z-index:-1;pointer-events:none}
.exam-c::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none}
.exam-c:hover{transform:translateY(-10px) scale(1.02)!important;box-shadow:0 28px 50px -22px rgba(21,94,239,.55),0 0 0 1px rgba(94,234,212,.25)!important}
.exam-c:hover::before{opacity:1}
.exam-c:hover::after{animation:dcShine .9s ease}
.exam-c>*:not(.btn){position:relative}
.exam-c .ic{transition:transform .4s}
.exam-c:hover .ic{animation:dcFloat 1.6s ease-in-out infinite}
.exam-c .btn{transition:transform .3s,box-shadow .3s;background:linear-gradient(135deg,#155EEF,#388BFD)!important}
.exam-c:hover .btn{transform:translateX(4px);box-shadow:0 10px 22px -8px rgba(20,184,166,.8)}
[data-theme=dark] .exam-c::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent)}
@media (prefers-reduced-motion:reduce){.exam-c,.exam-c::before,.exam-c:hover *{animation:none!important}}

/* ===== Brand polish layer (navy + teal) ===== */
:root{--ink:#12346B;--ink-2:#3F5068;--muted:#64748B;--primary:#155EEF;--primary-deep:#12346B;--teal:#155EEF;--teal-bright:#388BFD;--navy:#12346B;--navy-deep:#061A3A;
  --grad:linear-gradient(135deg,#388BFD 0%,#155EEF 40%,#12346B 100%);--grad-soft:linear-gradient(135deg,rgba(20,184,166,.12),rgba(11,44,92,.08));
  --grad-text:linear-gradient(100deg,#12346B 10%,#155EEF 60%,#388BFD);
  --shadow-card:0 18px 40px -16px rgba(11,44,92,.16),0 0 0 1px rgba(255,255,255,.6) inset;--shadow-hover:0 28px 50px -18px rgba(21,94,239,.32)}
html[data-theme=dark]{--ink:#F1F7FB;--ink-2:#C9D6E3;--muted:#8FA3B8;--primary:#388BFD;--accent:#539BF5;--teal:#388BFD;
  --grad:linear-gradient(135deg,#388BFD 0%,#0EA5A0 45%,#155EEF 100%);--grad-text:linear-gradient(100deg,#FFFFFF 10%,#539BF5 60%,#388BFD);
  --shadow-card:0 18px 40px -16px rgba(0,0,0,.55),0 0 0 1px rgba(94,234,212,.06) inset;--shadow-hover:0 28px 50px -18px rgba(56,139,253,.28)}
body:before{background:radial-gradient(640px 420px at 88% -8%,rgba(20,184,166,.16),transparent 70%),radial-gradient(560px 420px at -8% 28%,rgba(11,44,92,.10),transparent 70%),radial-gradient(500px 360px at 50% 110%,rgba(21,94,239,.08),transparent 70%)!important}
html[data-theme=dark] body:before{background:radial-gradient(640px 420px at 88% -8%,rgba(56,139,253,.14),transparent 70%),radial-gradient(560px 420px at -8% 28%,rgba(11,79,138,.28),transparent 70%)!important}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.exam-hero h1,.hero-card h1,.papers-head h1,.uni-hero h1{background:none;color:#fff;-webkit-text-fill-color:#fff}
.eyebrow{color:var(--teal)!important}
::selection{background:rgba(20,184,166,.28);color:inherit}
:focus-visible{outline:3px solid rgba(20,184,166,.55);outline-offset:2px;border-radius:8px}
.btn{position:relative;overflow:hidden}
.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover:after{transform:translateX(120%)}
.btn:active{transform:scale(.97)}
.mainnav a.active:after{background:var(--grad)}
.exam-hero{background:radial-gradient(120% 140% at 100% 0%,rgba(20,184,166,.55) 0%,transparent 55%),radial-gradient(90% 120% at 0% 100%,rgba(56,139,253,.25) 0%,transparent 60%),linear-gradient(135deg,#061A3A,#12346B 55%,#155EEF)!important}
.site-footer{background:linear-gradient(180deg,#12346B,#061A3A)!important;color:#C9D6E3}
.site-footer h4{color:#fff}.site-footer a{color:#C9D6E3}.site-footer a:hover{color:#539BF5}
html[data-theme=dark] .site-footer{background:linear-gradient(180deg,#071A33,#030A15)!important}
.ring{background:conic-gradient(var(--teal) calc(var(--p)*1%),var(--primary-soft) 0)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:linear-gradient(var(--teal),var(--navy));border-radius:10px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

html[data-theme=dark] .grad-text{background:linear-gradient(120deg,#539BF5,#388BFD 50%,#38BDF8);-webkit-background-clip:text;background-clip:text}
.exam-c .btn{background:var(--grad)!important}

/* ===== Exam cards v2: 3D tilt, spotlight, living border, reveal ===== */
.exam-cards{perspective:1200px;gap:22px}
.exam-c{--c1:#388BFD;--c2:#12346B;--mx:50%;--my:50%;--rx:0deg;--ry:0deg;
  transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));padding:26px 24px 24px;border-radius:28px!important;
  animation:none;transition:opacity .8s cubic-bezier(.2,.8,.2,1),translate .8s cubic-bezier(.2,.8,.2,1),scale .8s cubic-bezier(.2,.8,.2,1),transform .25s ease-out,box-shadow .4s!important}
html.fx .exam-c:not(.in){opacity:0;translate:0 40px;scale:.96}
.exam-c:nth-child(5n+1){--c1:#388BFD;--c2:#12346B}
.exam-c:nth-child(5n+2){--c1:#388BFD;--c2:#0E7490}
.exam-c:nth-child(5n+3){--c1:#34D399;--c2:#047857}
.exam-c:nth-child(5n+4){--c1:#38BDF8;--c2:#155EEF}
.exam-c:nth-child(5n+5){--c1:#FBBF24;--c2:#12346B}
/* top accent bar */
.exam-c>.exam-badge{background:color-mix(in oklab,var(--c1) 16%,transparent)!important;color:var(--c2)!important;border:1px solid color-mix(in oklab,var(--c1) 35%,transparent);letter-spacing:.08em}
html[data-theme=dark] .exam-c>.exam-badge{color:var(--c1)!important}
/* living border: always slowly rotating, brighter on hover */
.exam-c::before{background:conic-gradient(from var(--dc-a),transparent 0 55%,var(--c1),#539BF5,#F0C75E,transparent 92%)!important;opacity:.35!important;animation:dcSpin 6s linear infinite!important}
.exam-c:hover::before{opacity:1!important;animation-duration:2.4s!important}
@keyframes dcSpin{to{--dc-a:360deg}}
/* cursor spotlight */
.exam-c .spot{position:absolute!important;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in oklab,var(--c1) 26%,transparent),transparent 65%)}
.exam-c:hover .spot{opacity:1}
/* icon: gradient tile, orbit ring, float */
.exam-c .ic{background:linear-gradient(140deg,color-mix(in oklab,var(--c1) 22%,transparent),color-mix(in oklab,var(--c2) 12%,transparent))!important;
  box-shadow:0 10px 24px -12px var(--c1),inset 0 0 0 1px color-mix(in oklab,var(--c1) 30%,transparent);transform:translateZ(40px)}
.exam-c .ic:after{content:"";position:absolute;inset:-6px;border-radius:22px;border:1.5px dashed color-mix(in oklab,var(--c1) 55%,transparent);opacity:0;transform:scale(.8) rotate(0);transition:opacity .4s,transform .6s}
.exam-c:hover .ic:after{opacity:1;transform:scale(1) rotate(90deg)}
.exam-c h3{transform:translateZ(30px);transition:color .3s}
.exam-c:hover h3{color:var(--c2)}html[data-theme=dark] .exam-c:hover h3{color:var(--c1)}
.exam-c .meta{transform:translateZ(18px)}
/* button */
.exam-c .btn{background:linear-gradient(135deg,var(--c1),var(--c2))!important;transform:translateZ(36px);box-shadow:0 10px 22px -10px var(--c1)!important}
.exam-c:hover .btn{transform:translateZ(36px) translateX(4px);box-shadow:0 16px 30px -10px var(--c1)!important}
.exam-c:hover{box-shadow:0 34px 60px -26px color-mix(in oklab,var(--c1) 70%,transparent),0 0 0 1px color-mix(in oklab,var(--c1) 30%,transparent)!important}
/* glare */
.exam-c .glare{position:absolute!important;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(calc(var(--gl,120deg)),rgba(255,255,255,.35),transparent 45%)}
.exam-c:hover .glare{opacity:.6}html[data-theme=dark] .exam-c:hover .glare{opacity:.18}
/* section reveal on scroll */
.fx-rise{transition:opacity .9s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.2,.8,.2,1)}
html.fx .fx-rise:not(.in){opacity:0;translate:0 30px}
@media (hover:none){.exam-c{transform:none}}
@media (prefers-reduced-motion:reduce){.exam-c,.fx-rise{opacity:1!important;translate:none!important;scale:none!important;transform:none!important}}
@media(min-width:1100px){.exam-cards{grid-template-columns:repeat(5,1fr)!important;gap:18px}}

/* ===================== VIP layer v3: navbar, landing, site motion ===================== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
body:not(.is-admin) main.main{animation:pageIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(16px)}}

/* scroll progress */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));z-index:60;background:linear-gradient(90deg,#388BFD,#539BF5,#F0C75E);box-shadow:0 0 12px rgba(20,184,166,.7);pointer-events:none}

/* ---- NAVBAR: floating glass capsule ---- */
body:not(.is-admin) .topbar{background:transparent!important;border-bottom:0!important;box-shadow:none!important;backdrop-filter:none;padding:12px 0 0;transition:padding .35s var(--ease)}
body:not(.is-admin) .topbar-inner{position:relative;background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(160%);border-radius:22px;padding:8px 10px 8px 18px;min-height:64px;
  box-shadow:0 12px 34px -18px rgba(11,44,92,.35),inset 0 0 0 1px rgba(255,255,255,.7);transition:all .35s var(--ease)}
body:not(.is-admin) .topbar-inner:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,rgba(20,184,166,.55),rgba(11,44,92,.15) 40%,rgba(240,199,94,.45));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
html[data-theme=dark] body:not(.is-admin) .topbar-inner{background:rgba(8,20,40,.72);box-shadow:0 12px 34px -18px rgba(0,0,0,.8),inset 0 0 0 1px rgba(94,234,212,.08)}
body:not(.is-admin) .topbar.scrolled{padding-top:6px}
body:not(.is-admin) .topbar.scrolled .topbar-inner{min-height:56px;background:rgba(255,255,255,.88);box-shadow:0 18px 40px -20px rgba(11,44,92,.45),inset 0 0 0 1px rgba(255,255,255,.7)}
html[data-theme=dark] body:not(.is-admin) .topbar.scrolled .topbar-inner{background:rgba(6,16,32,.9)}
.brand-logo{transition:transform .4s var(--ease),filter .4s}.brand:hover .brand-logo{transform:scale(1.04) rotate(-1deg);filter:drop-shadow(0 6px 14px rgba(20,184,166,.35))}
body:not(.is-admin) .mainnav{gap:4px}
body:not(.is-admin) .mainnav a{padding:9px 14px;transition:color .25s,background .25s,transform .25s}
body:not(.is-admin) .mainnav a:hover{transform:translateY(-1px)}
body:not(.is-admin) .mainnav a.active{background:linear-gradient(135deg,rgba(20,184,166,.14),rgba(11,44,92,.06))!important;box-shadow:inset 0 0 0 1px rgba(20,184,166,.25)}
body:not(.is-admin) .mainnav a.active:after{left:50%;right:auto;width:18px;margin-left:-9px;bottom:3px;height:3px;border-radius:3px;animation:dotIn .4s var(--ease)}
@keyframes dotIn{from{width:0;margin-left:0}}
.mainnav .btn{background:var(--grad)!important;padding:10px 18px!important;box-shadow:0 10px 24px -10px rgba(21,94,239,.9)!important;animation:glowPulse 3s ease-in-out infinite}
@keyframes glowPulse{50%{box-shadow:0 10px 30px -6px rgba(20,184,166,.75)}}
.nav-search{transition:all .35s var(--ease)}.nav-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 4px rgba(20,184,166,.15)}
.nav-search:focus-within input{width:210px}
.nav-search kbd{font:600 .68rem var(--sans);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 6px;margin-right:2px}
.theme-toggle svg{transition:transform .6s var(--ease)}.theme-toggle:hover svg{transform:rotate(90deg) scale(1.1)}
.nav-me .avatar{transition:transform .3s}.nav-me:hover .avatar{transform:scale(1.08)}
/* hamburger -> X and drawer */
.navbtn span{transition:transform .35s var(--ease),opacity .2s}
.navtoggle:checked+.navbtn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle:checked+.navbtn span:nth-child(2){opacity:0}
.navtoggle:checked+.navbtn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
  body:not(.is-admin) .mainnav{top:calc(100% + 8px)!important;left:0;right:0;border-radius:22px!important;padding:12px!important;box-shadow:0 30px 60px -20px rgba(11,44,92,.45)!important;
    transform-origin:top center;transform:translateY(-10px) scale(.97);opacity:0;visibility:hidden;transition:all .35s var(--ease)!important;display:flex!important}
  body:not(.is-admin) .navtoggle:checked~.mainnav{transform:none;opacity:1;visibility:visible}
  body:not(.is-admin) .navtoggle:checked~.mainnav>*{animation:drawerItem .45s var(--ease) both}
  body:not(.is-admin) .navtoggle:checked~.mainnav>*:nth-child(2){animation-delay:.04s}body:not(.is-admin) .navtoggle:checked~.mainnav>*:nth-child(3){animation-delay:.08s}
  body:not(.is-admin) .navtoggle:checked~.mainnav>*:nth-child(4){animation-delay:.12s}body:not(.is-admin) .navtoggle:checked~.mainnav>*:nth-child(5){animation-delay:.16s}
  body:not(.is-admin) .navtoggle:checked~.mainnav>*:nth-child(n+6){animation-delay:.2s}
}
@keyframes drawerItem{from{opacity:0;transform:translateX(-12px)}}

/* ---- LANDING: VIP hero ---- */
.h-hero{position:relative;isolation:isolate}
.h-hero:before,.h-hero:after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none;animation:blob 14s ease-in-out infinite alternate}
.h-hero:before{width:420px;height:420px;left:-120px;top:-60px;background:radial-gradient(circle,rgba(20,184,166,.32),transparent 70%)}
.h-hero:after{width:480px;height:480px;right:-140px;bottom:-120px;background:radial-gradient(circle,rgba(11,79,138,.28),transparent 70%);animation-delay:-7s}
@keyframes blob{50%{transform:translate(60px,40px) scale(1.12)}100%{transform:translate(-30px,70px) scale(.95)}}
.h-hero h1{animation:heroUp .9s .05s cubic-bezier(.2,.8,.2,1) both}
.h-hero .lead{animation:heroUp .9s .18s cubic-bezier(.2,.8,.2,1) both}
.h-hero .h-cta{animation:heroUp .9s .3s cubic-bezier(.2,.8,.2,1) both}
.h-hero .h-badges{animation:heroUp .9s .42s cubic-bezier(.2,.8,.2,1) both}
.h-hero .trust{animation:heroUp .8s cubic-bezier(.2,.8,.2,1) both;position:relative;overflow:hidden;box-shadow:0 8px 24px -14px rgba(21,94,239,.6)}
.h-hero .trust:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-100%);animation:sweep 4s 1.2s ease-in-out infinite}
@keyframes sweep{30%,100%{transform:translateX(100%)}}
@keyframes heroUp{from{opacity:0;transform:translateY(24px)}}
.grad-text{background-size:200% auto!important;animation:gradFlow 6s linear infinite}
@keyframes gradFlow{to{background-position:200% center}}
.h-art{position:relative;animation:artIn 1.1s .2s cubic-bezier(.2,.8,.2,1) both}
.h-art img{animation:floatY 7s ease-in-out infinite;border-radius:28px}
.h-art:before{content:"";position:absolute;inset:-10px;border-radius:36px;z-index:-1;background:conic-gradient(from var(--dc-a),#388BFD,#12346B,#F0C75E,#539BF5,#388BFD);animation:dcSpin 8s linear infinite;filter:blur(18px);opacity:.55}
.h-art:after{content:"2026 session · Live";position:absolute;left:-18px;bottom:34px;padding:10px 16px;border-radius:16px;font:700 .85rem var(--serif);color:var(--ink);
  background:rgba(255,255,255,.85);backdrop-filter:blur(14px);box-shadow:0 18px 40px -16px rgba(11,44,92,.45);animation:floatY 5s -2s ease-in-out infinite}
html[data-theme=dark] .h-art:after{background:rgba(8,20,40,.85)}
@keyframes artIn{from{opacity:0;transform:translateY(30px) scale(.94) rotate(1.5deg)}}
@keyframes floatY{50%{transform:translateY(-12px)}}
.h-badges span{transition:transform .3s,box-shadow .3s,border-color .3s}.h-badges span:hover{transform:translateY(-3px);border-color:var(--teal)!important;box-shadow:0 10px 22px -12px rgba(21,94,239,.7)}
.btn-lg{padding:15px 28px!important;font-size:1.02rem}
.btn-ghost{backdrop-filter:blur(8px)}.btn-ghost:hover{transform:translateY(-2px)}
.announce{position:relative;overflow:hidden;border-radius:16px!important;animation:heroUp .6s both}
.announce:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-100%);animation:sweep 5s 1s ease-in-out infinite;pointer-events:none}

/* section heads */
.sec-head h2{position:relative}
.sec-head h2:after{content:"";display:block;width:56px;height:4px;margin:12px auto 0;border-radius:4px;background:var(--grad)}
.sec-head .eyebrow{display:flex;align-items:center;justify-content:center;gap:8px}
.sec-head .eyebrow:before,.sec-head .eyebrow:after{content:"";width:22px;height:1.5px;background:currentColor;opacity:.5}

/* feature cards */
.feat{position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s!important}
.feat .ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:1.6rem;background:linear-gradient(140deg,rgba(20,184,166,.2),rgba(11,44,92,.1));box-shadow:inset 0 0 0 1px rgba(20,184,166,.25);transition:transform .5s var(--ease)}
.feat:hover{transform:translateY(-8px)!important}.feat:hover .ic{transform:rotate(-8deg) scale(1.1)}
.feat:after,.step:after,.price-card:after,.stat-c:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(20,184,166,.16),transparent 65%)}
.feat:hover:after,.step:hover:after,.price-card:hover:after,.stat-c:hover:after{opacity:1}

/* steps with numbers + connecting line */
.steps{counter-reset:st;position:relative}
.step{position:relative;overflow:hidden;padding-top:64px!important;transition:transform .4s var(--ease),box-shadow .4s!important}
.step:before{counter-increment:st;content:"0" counter(st);position:absolute;top:18px;left:22px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font:800 .95rem var(--serif);color:#fff;background:var(--grad);box-shadow:0 10px 20px -8px rgba(21,94,239,.8)}
.step:hover{transform:translateY(-6px)!important}

/* pricing: VIP */
.price-card{position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s!important}
.price-card:hover{transform:translateY(-8px)!important}
.price-card .amt{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.price-card.best{background:linear-gradient(160deg,rgba(240,199,94,.16),var(--surface) 45%)!important;box-shadow:0 30px 60px -28px rgba(245,158,11,.55)!important;transform:scale(1.02)}
.price-card.best:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--dc-a),#F0C75E,#388BFD,#F59E0B,#539BF5,#F0C75E);animation:dcSpin 5s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.price-card.best .amt{background:linear-gradient(100deg,#B45309,#F59E0B,#B45309);background-size:200% auto;-webkit-background-clip:text;background-clip:text;animation:gradFlow 4s linear infinite}
.best-tag{background:linear-gradient(135deg,#FBBF24,#F59E0B)!important;color:#1F1300!important;box-shadow:0 8px 18px -6px rgba(245,158,11,.7);animation:floatY 3s ease-in-out infinite}

/* stats */
.stat-c{position:relative;overflow:hidden;transition:transform .4s var(--ease)!important}.stat-c:hover{transform:translateY(-6px)!important}
.stat-c b span{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}

/* switcher */
.sw-tabs button{transition:all .3s var(--ease)}.sw-stage img{transition:opacity .6s,transform .8s var(--ease)}.sw-stage img:not(.on){transform:scale(1.04)}

/* ---- site-wide student motion ---- */
html.fx body:not(.is-admin) .fx-up:not(.in){opacity:0;transform:translateY(22px)}
body:not(.is-admin) .fx-up{transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
body:not(.is-admin) .list-item,body:not(.is-admin) .topic-row,body:not(.is-admin) .uni-card,body:not(.is-admin) .mock-card,body:not(.is-admin) .res-card{transition:transform .35s var(--ease),box-shadow .35s,border-color .35s,opacity .7s,translate .7s!important}
body:not(.is-admin) .topic-row:hover{transform:translateX(4px);box-shadow:var(--shadow-hover)}
.btn .rip{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
.alert{animation:alertIn .5s cubic-bezier(.2,.8,.2,1) both}@keyframes alertIn{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.opt{transition:transform .2s,border-color .2s,background .2s!important}.opt:hover{transform:translateX(3px)}
.site-footer{position:relative;overflow:hidden;border-radius:36px 36px 0 0}
.site-footer:before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,.25),transparent 70%);pointer-events:none}
.foot-list a{transition:color .25s,padding .25s}.foot-list a:hover{padding-left:4px}
@media (prefers-reduced-motion:reduce){.h-hero *,.h-art,.h-art img,.h-art:before,.h-art:after,.mainnav .btn,.best-tag,.grad-text,.price-card.best:before{animation:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}
body:not(.is-admin) main.main{padding-top:22px}.about .eyebrow,.sec-head[style*=left] .eyebrow{justify-content:flex-start}
.announce{margin-top:16px!important}

/* ===================== Exam page v1: hero, unis, subjects, papers sheet ===================== */
.exam-hero{position:relative;overflow:hidden;isolation:isolate;animation:heroUp .8s cubic-bezier(.2,.8,.2,1) both}
.exam-hero:before{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-140px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(56,139,253,.35),transparent 65%);animation:blob 12s ease-in-out infinite alternate}
.exam-hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);transform:translateX(-100%);animation:sweep 7s 1.5s ease-in-out infinite}
.exam-hero-ic{animation:floatY 5s ease-in-out infinite;box-shadow:0 20px 40px -18px rgba(56,139,253,.7),inset 0 0 0 1px rgba(255,255,255,.18)!important}
.exam-hero .chip-stat{background:rgba(255,255,255,.1)!important;color:#fff!important;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);transition:transform .3s,background .3s}
.exam-hero .chip-stat:hover{transform:translateY(-2px);background:rgba(255,255,255,.18)!important}
.exam-hero .chips>*{animation:heroUp .6s both}.exam-hero .chips>*:nth-child(2){animation-delay:.06s}.exam-hero .chips>*:nth-child(3){animation-delay:.12s}.exam-hero .chips>*:nth-child(4){animation-delay:.18s}.exam-hero .chips>*:nth-child(5){animation-delay:.24s}
.crumbs{font-weight:600}.crumbs a{text-decoration:none}
.sec-title{display:flex;align-items:center;gap:10px}
.sec-title small{background:var(--grad)!important;color:#fff!important;border-radius:999px;padding:2px 10px;font-size:.75rem}
.sec-title:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);margin-left:6px}

/* university cards VIP */
.uni-grid{perspective:1100px}
.uni-card{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;position:relative;overflow:hidden;isolation:isolate;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));border-radius:24px!important;transition:transform .25s ease-out,box-shadow .4s,opacity .7s,translate .7s!important}
.uni-card:before{background:linear-gradient(135deg,rgba(20,184,166,.28),rgba(11,44,92,.18))!important;transition:height .5s var(--ease)}
.uni-card:hover:before{height:100%!important}
.uni-card:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--dc-a),transparent 0 60%,#388BFD,#F0C75E,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.3;animation:dcSpin 7s linear infinite}
.uni-card:hover:after{opacity:1;animation-duration:2.5s}
.uni-card .spot{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(200px circle at var(--mx) var(--my),rgba(94,234,212,.28),transparent 65%)}
.uni-card:hover .spot{opacity:1}
.uni-card-logo{position:relative;transform:translateZ(40px);transition:transform .5s var(--ease)}
.uni-card-logo:after{content:"";position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:26px;border:2px dashed rgba(20,184,166,.6);opacity:0;transform:scale(.8);transition:all .6s var(--ease)}
.uni-card:hover .uni-card-logo{transform:translateZ(40px) translateY(-4px) scale(1.06)}
.uni-card:hover .uni-card-logo:after{opacity:1;transform:scale(1) rotate(45deg)}
.uni-card h3{transform:translateZ(26px)}.uni-card-foot span{transition:background .3s}
.uni-card-foot span{background:var(--primary-soft);border-radius:999px;padding:3px 9px}
.uni-go{display:inline-flex;gap:4px;padding:7px 16px;border-radius:999px;background:var(--grad);color:#fff!important;font-weight:700;transform:translateZ(30px);box-shadow:0 10px 20px -10px rgba(21,94,239,.9);transition:transform .3s,box-shadow .3s}
.uni-card:hover .uni-go{transform:translateZ(30px) translateX(3px);box-shadow:0 14px 26px -10px rgba(20,184,166,.9)}
.uni-card:hover{box-shadow:0 30px 56px -26px rgba(21,94,239,.7)!important}

/* subjects + topics */
.subject{position:relative;overflow:hidden;border-left:0!important}
.subject:before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:0 4px 4px 0;background:var(--grad)}
.chap-btn{transition:all .3s var(--ease)!important}.chap-btn:hover{transform:translateY(-2px)}
.chap-panel:not([hidden]){animation:panelIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}}
.topic-row{background:var(--surface-solid)!important;border:1px solid var(--line)!important;transition:all .3s var(--ease)!important}
.topic-row summary{transition:background .3s}
.topic-row:hover{border-color:rgba(20,184,166,.45)!important}
.topic-row[open]{box-shadow:0 18px 36px -22px rgba(21,94,239,.6);border-color:rgba(20,184,166,.5)!important}
.topic-row[open] .topic-items{animation:panelIn .4s cubic-bezier(.2,.8,.2,1)}
.topic-row[open] summary{background:linear-gradient(135deg,rgba(20,184,166,.12),transparent)}
.t-item{transition:transform .25s var(--ease),box-shadow .25s,border-color .25s!important}
.t-item:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(21,94,239,.8);border-color:var(--teal)!important}
.t-item.vip{position:relative;overflow:hidden}
.t-item.vip:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(251,191,36,.35) 50%,transparent 65%);transform:translateX(-100%);animation:sweep 3.5s ease-in-out infinite;pointer-events:none}

/* papers side: sticky on desktop, bottom sheet on small screens */
@media(min-width:961px){.papers-side{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 110px);overflow:auto;border-radius:24px}}
.papers-side .paper-item{flex-shrink:0;transition:transform .25s var(--ease),background .25s!important}
.papers-side .paper-item:hover{transform:translateX(4px)}
.papers-side .paper-item.locked{position:relative;flex-shrink:0;overflow:hidden}
.papers-side .paper-item.locked:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(251,191,36,.18) 50%,transparent 65%);transform:translateX(-100%);animation:sweep 4s ease-in-out infinite;pointer-events:none}
.pp-fab,.pp-sheet-close,.pp-backdrop{display:none}
@media(max-width:960px){
  .pp-fab{display:flex;align-items:center;gap:8px;position:fixed;right:16px;bottom:18px;z-index:55;padding:13px 18px;border:0;border-radius:999px;cursor:pointer;
    background:var(--grad);color:#fff;font:700 .92rem var(--serif);box-shadow:0 16px 34px -12px rgba(21,94,239,.9);animation:fabIn .6s .4s cubic-bezier(.2,.8,.2,1) both}
  .pp-fab b{background:rgba(255,255,255,.22);border-radius:999px;padding:1px 8px;font-size:.78rem}
  .pp-fab:before{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid rgba(20,184,166,.5);animation:fabPing 2.4s ease-out infinite}
  @keyframes fabIn{from{opacity:0;transform:translateY(30px) scale(.8)}}
  @keyframes fabPing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
  .pp-backdrop{display:block;position:fixed;inset:0;z-index:56;background:rgba(4,13,26,.5);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:all .35s}
  .papers-side.pp-ready{position:fixed!important;left:0;right:0;bottom:0;z-index:57;margin:0!important;max-height:78vh;overflow:auto;border-radius:28px 28px 0 0!important;
    background:var(--surface-solid);box-shadow:0 -30px 60px -20px rgba(4,13,26,.6);transform:translateY(105%)!important;opacity:1!important;translate:none!important;animation:none!important;visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s!important}
  .papers-side.pp-ready:before{content:"";display:block;width:44px;height:5px;border-radius:5px;background:var(--line);margin:10px auto 4px}
  .pp-sheet-close{display:grid;place-items:center;position:absolute;right:14px;top:14px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:1rem;cursor:pointer}
  body.pp-open .papers-side.pp-ready{transform:none!important;visibility:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1)!important}
  body.pp-open .pp-backdrop{opacity:1;visibility:visible}
  body.pp-open .pp-fab{opacity:0;pointer-events:none}
  body.pp-open{overflow:hidden}
}

/* ===================== Mock test + result v1 ===================== */
.mock-bar{position:sticky!important;top:84px;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 18px!important;margin-bottom:18px;border-radius:20px!important;
  background:color-mix(in oklab,var(--surface-solid) 82%,transparent)!important;backdrop-filter:blur(14px);border:1px solid var(--line)!important;box-shadow:0 18px 40px -26px rgba(11,44,92,.6);overflow:hidden;animation:heroUp .6s both}
.mock-bar>div:first-child{flex:1 1 220px;min-width:0}
.mock-bar b{font-family:var(--serif);font-size:1.05rem}
.mock-bar:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--mp,0%);background:linear-gradient(90deg,#388BFD,#F0C75E);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.mock-progress{padding:6px 12px;border-radius:999px;background:var(--primary-soft);font-weight:700;font-size:.85rem}
.mock-progress #answered{display:inline-block;color:var(--teal)}
.mock-progress #answered.bump{animation:bump .4s}
@keyframes bump{50%{transform:scale(1.5)}}
.timer{padding:7px 14px!important;border-radius:999px!important;background:var(--grad)!important;color:#fff!important;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 10px 20px -10px rgba(21,94,239,.9)}
.timer.warn{background:linear-gradient(135deg,#ef4444,#b91c1c)!important;animation:tPulse 1s infinite}
@keyframes tPulse{50%{box-shadow:0 0 0 8px rgba(239,68,68,.15);transform:scale(1.04)}}
.q-card{position:relative;border-radius:22px!important;padding:20px 20px 16px!important;transition:border-color .3s,box-shadow .3s}
.q-card legend{float:left;width:100%;margin-bottom:8px}
.q-card .qn{display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 10px;border-radius:10px;background:var(--grad);color:#fff;font-weight:800;font-size:.85rem}
.q-card .q-text{clear:both;font-size:1.02rem;line-height:1.6;font-weight:500}
.q-card:has(input:checked){border-color:rgba(20,184,166,.55)!important;box-shadow:0 16px 34px -24px rgba(21,94,239,.8)}
.q-card:has(input:checked) .qn:after{content:"";display:inline-block;width:14px;height:14px;margin-left:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23029688' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;vertical-align:middle;}
.opts-pick{display:grid;gap:10px}
@media(min-width:700px){.opts-pick{grid-template-columns:1fr 1fr}}
.opt{display:flex!important;align-items:center;gap:12px;padding:12px 14px!important;border-radius:14px!important;border:1.5px solid var(--line)!important;cursor:pointer;transition:all .25s var(--ease)!important;position:relative;overflow:hidden}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt-l{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--primary-soft);color:var(--teal);font-weight:800;transition:all .3s var(--ease)}
.opt:hover{border-color:var(--teal)!important;transform:translateX(3px)}
.opt:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.opt:has(input:checked){border-color:var(--teal)!important;background:linear-gradient(135deg,rgba(20,184,166,.14),rgba(11,44,92,.06))!important}
.opt:has(input:checked) .opt-l{background:var(--grad);color:#fff;transform:scale(1.08) rotate(-6deg);box-shadow:0 8px 16px -8px rgba(21,94,239,.9)}
.mock-form>.btn-lg{position:sticky;bottom:14px;z-index:20;border-radius:18px!important;box-shadow:0 18px 36px -14px rgba(21,94,239,.9)}
@media(max-width:640px){
  .mock-bar{top:74px;padding:10px 12px!important;gap:8px}
  .mock-bar>div:first-child{flex-basis:100%}.mock-bar .meta{display:block;font-size:.78rem}
  .mock-progress,.timer{flex:1;text-align:center}
  .q-card{padding:16px 14px 12px!important}
  .opt{padding:11px 12px!important}
}
/* result */
.result-hero{display:flex;gap:26px;align-items:center;position:relative;overflow:hidden;isolation:isolate;animation:heroUp .7s both}
.result-hero:before{content:"";position:absolute;z-index:-1;width:380px;height:380px;left:-120px;top:-150px;border-radius:50%;background:radial-gradient(circle,rgba(56,139,253,.28),transparent 65%);animation:blob 10s ease-in-out infinite alternate}
@property --pp{syntax:'<number>';inherits:false;initial-value:0}
.result-hero .ring{--pp:var(--p);flex:none;width:140px;height:140px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(closest-side,var(--surface-solid) 78%,transparent 80%),conic-gradient(#388BFD calc(var(--pp)*1%),#F0C75E calc(var(--pp)*1%+.1%) calc(var(--pp)*1%+1%),var(--line) 0)!important;animation:ringFill 1.6s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 20px 40px -22px rgba(21,94,239,.8)}
@keyframes ringFill{from{--pp:0}}
.result-hero .ring span{font:800 2rem var(--serif);background:var(--grad);-webkit-background-clip:text;color:transparent}
.chip-stat.ok{background:rgba(16,185,129,.12)!important;color:#059669!important}
.chip-stat.bad{background:rgba(239,68,68,.12)!important;color:#dc2626!important}
.q-review{border-left:4px solid var(--line)!important;border-radius:18px!important}
.q-review.right{border-left-color:#10b981!important}.q-review.wrong{border-left-color:#ef4444!important}.q-review.skip{border-left-color:#f59e0b!important}
.q-review .opts li{border-radius:10px;transition:transform .25s}
.q-review .opts li.correct{background:rgba(16,185,129,.12);font-weight:600}
.q-review .opts li.picked{background:rgba(239,68,68,.1);text-decoration:line-through;text-decoration-color:rgba(239,68,68,.5)}
.q-review .explain{background:linear-gradient(135deg,rgba(20,184,166,.1),transparent);border-radius:12px;padding:10px 12px}
@media(max-width:640px){.result-hero{flex-direction:column;text-align:center}.result-hero .chips{justify-content:center}}
html.fx body:not(.is-admin) .q-card,html.fx body:not(.is-admin) .q-review{opacity:0;translate:0 18px;transition:opacity .6s,translate .6s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
html.fx body:not(.is-admin) .q-card.in,html.fx body:not(.is-admin) .q-review.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.result-hero .ring,.timer.warn{animation:none}html.fx body:not(.is-admin) .q-card,html.fx body:not(.is-admin) .q-review{opacity:1;translate:none}}

/* ===================== Student dashboard VIP v1 ===================== */
.dash-head{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;padding:28px!important;border-radius:28px!important;border:0!important;
  background:linear-gradient(135deg,#0B1727 0%,#102A45 50%,#153A60 100%)!important;color:#fff;box-shadow:0 30px 60px -30px rgba(11,44,92,.8);animation:heroUp .7s both}
.dash-head:before{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-120px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(56,139,253,.45),transparent 65%);animation:blob 12s ease-in-out infinite alternate}
.dash-head:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);transform:translateX(-100%);animation:sweep 8s 1s ease-in-out infinite}
.dash-head h1{color:#fff!important;margin:2px 0 4px;font-size:clamp(1.5rem,3.2vw,2.1rem)}
.dash-head .eyebrow{color:#539BF5!important}
.dash-head .meta{color:rgba(255,255,255,.72)!important}
.dash-avatar{position:relative;flex:none;border-radius:50%;padding:3px;background:conic-gradient(from var(--dc-a),#388BFD,#F0C75E,#539BF5,#388BFD);animation:dcSpin 6s linear infinite}
.dash-avatar>*{display:block;border-radius:50%;border:3px solid #12346B}
.dash-head .btn-ghost{background:rgba(255,255,255,.1)!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)!important;backdrop-filter:blur(8px)}
.dash-head .btn-ghost:hover{background:rgba(255,255,255,.2)!important}
.access-pill{padding:9px 16px;border-radius:999px;font-weight:700;font-size:.88rem;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2)}
.access-pill.is-off{background:rgba(255,255,255,.1);color:#fff}
.access-pill.is-on{background:rgba(20,184,166,.25);color:#93C5FD;border-color:rgba(94,234,212,.5)}
.access-pill.is-all{background:linear-gradient(135deg,#F0C75E,#D4A017);color:#3b2a00;border:0;box-shadow:0 10px 26px -10px rgba(240,199,94,.9);position:relative;overflow:hidden}
.access-pill.is-all:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-100%);animation:sweep 3s ease-in-out infinite}

.stats4{gap:16px!important;margin-top:18px}
.stats4 .stat{position:relative;overflow:hidden;padding:20px 20px 18px 74px!important;border-radius:22px!important;min-height:96px;display:flex;flex-direction:column;justify-content:center;transition:transform .3s var(--ease),box-shadow .3s;animation:heroUp .6s both}
.stats4 .stat:nth-child(2){animation-delay:.07s}.stats4 .stat:nth-child(3){animation-delay:.14s}.stats4 .stat:nth-child(4){animation-delay:.21s}
.stats4 .stat:before{position:absolute;left:18px;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:1.25rem;background:var(--grad);box-shadow:0 10px 20px -10px rgba(21,94,239,.9)}
.stats4 .stat:nth-child(1):before{content:""}.stats4 .stat:nth-child(2):before{content:""}
.stats4 .stat:nth-child(3):before{content:"";background:linear-gradient(135deg,#0EA5E9,#12346B)}
.stats4 .stat:nth-child(4):before{content:"";background:linear-gradient(135deg,#F0C75E,#EA580C)}
.stats4 .stat strong{font:800 1.8rem/1.1 var(--serif);background:var(--grad);-webkit-background-clip:text;color:transparent;order:2}
.stats4 .stat .meta:first-child{order:1;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.stats4 .stat .meta+strong+.meta,.stats4 .stat strong+.meta{order:3;font-size:.8rem}
.stats4 .stat:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(21,94,239,.8)}
.stats4 .stat:after{content:"";position:absolute;right:-30px;bottom:-30px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,.16),transparent 70%)}

main:has(.dash-head) h2{display:flex;align-items:center;gap:10px;font-size:1.25rem}
main:has(.dash-head) h2:before{content:"";width:6px;height:22px;border-radius:4px;background:var(--grad)}
main:has(.dash-head) .exam-card{position:relative;overflow:hidden;border-radius:22px!important;padding:20px!important;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
main:has(.dash-head) .exam-card:hover{transform:translateY(-4px);box-shadow:0 24px 44px -26px rgba(21,94,239,.8);border-color:rgba(20,184,166,.5)!important}
main:has(.dash-head) .exam-card.is-unlocked{border-color:rgba(20,184,166,.45)!important;background:linear-gradient(160deg,rgba(20,184,166,.08),transparent 60%),var(--surface-solid)!important}
main:has(.dash-head) .exam-card.is-unlocked:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#388BFD,#F0C75E)}
main:has(.dash-head) .exam-card h3{font-size:1.08rem;margin:0}
main:has(.dash-head) .bar{height:10px!important;border-radius:999px!important;background:var(--primary-soft)!important;overflow:hidden;margin:14px 0 8px}
main:has(.dash-head) .bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#388BFD,#155EEF)!important;position:relative;animation:barGrow 1.4s cubic-bezier(.2,.8,.2,1) both}
main:has(.dash-head) .bar span:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:sweep 2.6s ease-in-out infinite}
@keyframes barGrow{from{width:0}}
.allaccess-cta{display:flex!important;align-items:center;gap:16px;margin-top:18px;padding:20px 22px!important;border-radius:24px!important;position:relative;overflow:hidden;isolation:isolate;text-decoration:none;
  background:linear-gradient(135deg,#1a1405,#3b2a00 50%,#12346B)!important;color:#fff!important;border:0!important;box-shadow:0 24px 50px -26px rgba(212,160,23,.8)}
.allaccess-cta>span:first-child{font-size:2rem;animation:floatY 3.5s ease-in-out infinite}
.allaccess-cta .grow,.allaccess-cta>div{flex:1}
.allaccess-cta b{font:800 1.1rem var(--serif);background:linear-gradient(90deg,#F0C75E,#FDE68A,#F0C75E);background-size:200%;-webkit-background-clip:text;color:transparent;animation:gShift 4s linear infinite}
.allaccess-cta .meta{color:rgba(255,255,255,.7)!important;margin:2px 0 0}
.allaccess-cta:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 35%,rgba(240,199,94,.2) 50%,transparent 65%);transform:translateX(-100%);animation:sweep 4s ease-in-out infinite}
@keyframes gShift{to{background-position:200% 0}}
main:has(.dash-head) .list{display:grid;gap:8px}
main:has(.dash-head) .list-item{border-radius:16px!important;padding:12px 14px!important;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
main:has(.dash-head) a.list-item:hover{transform:translateX(4px);border-color:rgba(20,184,166,.5)!important;box-shadow:0 12px 24px -16px rgba(21,94,239,.7)}
main:has(.dash-head) .score{min-width:52px;text-align:center;padding:5px 8px;border-radius:10px;font-weight:800}
main:has(.dash-head) .score.good{background:rgba(16,185,129,.14);color:#059669}
main:has(.dash-head) .score.mid{background:rgba(245,158,11,.15);color:#b45309}
main:has(.dash-head) .score.low{background:rgba(239,68,68,.12);color:#dc2626}
main:has(.dash-head) .news{border-radius:20px!important;border-left:4px solid var(--teal)!important}
main:has(.dash-head) .muted{padding:14px;border:1.5px dashed var(--line);border-radius:16px;text-align:center}
.live-alert{border-radius:18px!important}
@media(max-width:640px){
  .dash-head{padding:22px 18px!important;text-align:center;justify-content:center}
  .dash-head .grow{flex-basis:100%}
  .stats4{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .stats4 .stat{padding:58px 12px 14px!important;align-items:center;text-align:center;min-height:0}
  .stats4 .stat:before{left:50%;top:14px;margin:0 0 0 -20px;width:40px;height:40px}
  .stats4 .stat strong{font-size:1.5rem}
  .allaccess-cta{flex-wrap:wrap;text-align:left}
  .allaccess-cta .btn{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){.dash-avatar,.dash-head:before,.dash-head:after,main:has(.dash-head) .bar span,main:has(.dash-head) .bar span:after,.allaccess-cta *,.allaccess-cta:before,.access-pill.is-all:after{animation:none!important}}

/* no sideways scroll from decorative glows */
html,body{overflow-x:clip!important;max-width:100%}
section,.hero,header.hero{overflow-x:clip}

/* ===== Exam page redesign v2: quick tiles, jump nav, Study hub ===== */
.exam-hero{position:relative;overflow:hidden}
.dx-orb{position:absolute;right:-40px;top:-40px;width:260px;height:260px;pointer-events:none;opacity:.55}
.dx-orb span{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(56,139,253,.45);animation:dcSpin 26s linear infinite}
.dx-orb span:nth-child(2){inset:34px;border-style:solid;border-color:rgba(11,79,138,.35);animation-duration:18s;animation-direction:reverse}
.dx-orb span:nth-child(3){inset:74px;background:radial-gradient(circle,rgba(21,94,239,.35),transparent 70%);border:0}
.dx-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:18px 0 10px}
.dx-q{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:18px;text-decoration:none;color:inherit;background:var(--card,#fff);border:1px solid rgba(21,94,239,.18);box-shadow:0 8px 24px -16px rgba(11,44,92,.35);overflow:hidden;transition:transform .3s var(--ease,ease),box-shadow .3s,border-color .3s}
.dx-q:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad,linear-gradient(90deg,#155EEF,#12346B));transform:scaleX(.25);transform-origin:left;transition:transform .4s}
.dx-q:hover{transform:translateY(-4px);border-color:rgba(21,94,239,.45);box-shadow:0 18px 34px -18px rgba(21,94,239,.55)}
.dx-q:hover:before{transform:scaleX(1)}
.dx-q i{font-style:normal;font-size:1.3rem}
.dx-q b{font-size:1.6rem;line-height:1.1;background:var(--grad,linear-gradient(90deg,#155EEF,#12346B));-webkit-background-clip:text;background-clip:text;color:transparent}
.dx-q span{font-size:.82rem;opacity:.7;font-weight:600}
.dx-jump{position:sticky;top:76px;z-index:20;display:flex;gap:8px;overflow-x:auto;padding:10px 4px;margin:4px 0 14px;scrollbar-width:none;backdrop-filter:blur(10px)}
.dx-jump::-webkit-scrollbar{display:none}
.dx-jump a{flex-shrink:0;padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.86rem;color:inherit;background:var(--card,#fff);border:1px solid rgba(21,94,239,.22);transition:all .25s}
.dx-jump a:hover{background:linear-gradient(135deg,#155EEF,#12346B);color:#fff;border-color:transparent;transform:translateY(-2px)}
.dx-layout{grid-template-columns:minmax(0,1fr) 360px!important;gap:24px!important}
.subject{scroll-margin-top:140px}
/* Study hub */
.dx-side{padding:0!important;background:var(--card,#fff);border:1px solid rgba(21,94,239,.2);box-shadow:0 20px 50px -28px rgba(11,44,92,.5);overflow:hidden auto}
.dx-hub-head{display:flex;align-items:center;gap:12px;padding:18px;background:linear-gradient(135deg,#12346B,#155EEF);color:#fff;position:relative;overflow:hidden}
.dx-hub-head:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-100%);animation:sweep 5s ease-in-out infinite}
.dx-hub-head h3{margin:0;color:#fff;font-size:1.1rem}.dx-hub-head .meta{margin:0;color:rgba(255,255,255,.8)}
.dx-hub-ic{width:44px;height:44px;display:grid;place-items:center;font-size:1.4rem;border-radius:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)}
.dx-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;position:sticky;top:0;z-index:2;background:inherit;border-bottom:1px solid rgba(21,94,239,.15)}
.dx-tab{border:0;cursor:pointer;padding:9px 4px;border-radius:12px;font-weight:700;font-size:.82rem;background:rgba(21,94,239,.07);color:inherit;transition:all .25s}
.dx-tab small{display:inline-block;margin-left:3px;padding:0 6px;border-radius:999px;background:rgba(11,44,92,.1);font-size:.72rem}
.dx-tab:hover{background:rgba(21,94,239,.15)}
.dx-tab.active{background:linear-gradient(135deg,#155EEF,#12346B);color:#fff;box-shadow:0 8px 18px -10px rgba(21,94,239,.8)}
.dx-tab.active small{background:rgba(255,255,255,.25)}
.dx-pane{padding:10px;animation:panelIn .35s ease both}
.dx-pane .papers-card{box-shadow:none!important;border:0!important;background:transparent!important;padding:0!important}
.dx-pane .papers-head{display:none}
.dx-list{display:flex;flex-direction:column;gap:8px}
.dx-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;text-decoration:none;color:inherit;border:1px solid rgba(21,94,239,.14);background:rgba(21,94,239,.03);transition:transform .25s,background .25s,border-color .25s;position:relative;overflow:hidden}
.dx-item:hover{transform:translateX(4px);background:rgba(21,94,239,.09);border-color:rgba(21,94,239,.35)}
.dx-item img{width:42px;height:52px;object-fit:cover;border-radius:8px;flex-shrink:0}
.dx-item .grow{min-width:0;display:flex;flex-direction:column}
.dx-item b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-item small{opacity:.7;font-size:.76rem}
.dx-ic{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,rgba(21,94,239,.18),rgba(11,44,92,.12));font-size:1.15rem}
.dx-item.locked{opacity:.85}
.dx-item.locked:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(251,191,36,.18) 50%,transparent 65%);transform:translateX(-100%);animation:sweep 4s ease-in-out infinite;pointer-events:none}
.dx-empty{padding:22px 10px;text-align:center;opacity:.75}
.dx-live-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:26px 12px}
.dx-pulse{display:inline-block;width:12px;height:12px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:dxPulse 1.6s infinite}
@keyframes dxPulse{70%{box-shadow:0 0 0 12px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
html.dark .dx-q,html.dark .dx-jump a,html.dark .dx-side,[data-theme=dark] .dx-q,[data-theme=dark] .dx-jump a,[data-theme=dark] .dx-side{background:#0d1b33;border-color:rgba(56,139,253,.2)}
@media(max-width:960px){.dx-layout{grid-template-columns:1fr!important}.dx-side.pp-ready .dx-hub-head{border-radius:24px 24px 0 0}.dx-jump{top:64px}}
@media(max-width:560px){.dx-quick{grid-template-columns:repeat(2,1fr)}.dx-quick .dx-q:last-child:nth-child(odd){grid-column:1/-1}.dx-orb{opacity:.3}}
@media(prefers-reduced-motion:reduce){.dx-orb span,.dx-pulse,.dx-hub-head:after,.dx-item.locked:after{animation:none}}
.domain-layout>span:empty{display:none}.dx-layout>.dx-side{grid-column:2;grid-row:1}@media(max-width:960px){.dx-layout>.dx-side{grid-column:auto;grid-row:auto}}

/* ===== Admin menu groups, live classes, notification bell ===== */
.adm-grp{position:relative;display:inline-flex}
.adm-grp-btn{background:none;border:0;font:inherit;font-weight:600;color:inherit;cursor:pointer;padding:8px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;transition:background .2s}
.adm-grp-btn i{font-style:normal;font-size:.7em;opacity:.6;transition:transform .25s}
.adm-grp.on>.adm-grp-btn,.adm-grp-btn:hover{background:rgba(21,94,239,.1);color:#02857A}
.adm-dot{background:#ef4444;color:#fff;border-radius:999px;padding:0 6px;font-size:.7rem}
.adm-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:16px;background:var(--card,#fff);border:1px solid rgba(21,94,239,.2);box-shadow:0 22px 50px -20px rgba(11,44,92,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .22s;z-index:80}
.adm-menu:before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.adm-menu a{padding:9px 12px!important;border-radius:10px;white-space:nowrap;text-decoration:none}
.adm-menu a:hover,.adm-menu a.active{background:rgba(21,94,239,.1)}
@media(hover:hover) and (min-width:1001px){.adm-grp:hover .adm-menu,.adm-grp:focus-within .adm-menu{opacity:1;visibility:visible;transform:none}.adm-grp:hover .adm-grp-btn i{transform:rotate(180deg)}}
.adm-student{opacity:.75}
@media(max-width:1000px){.adm-grp{display:flex;flex-direction:column;width:100%}.adm-grp-btn{pointer-events:none;opacity:.6;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;padding:12px 12px 4px}.adm-grp-btn i{display:none}.adm-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 0 8px;min-width:0}}
html.dark .adm-menu,[data-theme=dark] .adm-menu{background:#0d1b33}
/* live badges */
.live-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;font-style:normal;background:rgba(11,44,92,.08);width:max-content}
.live-badge.is-up{background:rgba(21,94,239,.08);color:#02857A}
.live-badge.is-near{background:rgba(245,158,11,.15);color:#b45309}
.live-badge.is-live{background:#ef4444;color:#fff}
.live-badge.is-live .dx-pulse{width:8px;height:8px;background:#fff}
.live-badge.is-ended{opacity:.6}
.dx-item .live-badge{margin-top:4px}
.dx-date{flex-direction:column;line-height:1}.dx-date b{font-size:1.05rem;color:#12346B}.dx-date small{font-size:.66rem;text-transform:uppercase;opacity:.7}
.dx-item.live-ended{opacity:.6}
.live-hero{text-align:center;padding:36px 22px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:hidden;border-radius:24px}
.live-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(21,94,239,.18),transparent 60%);pointer-events:none}
.live-hero-ic{font-size:2.4rem;animation:floatY 3s ease-in-out infinite}
.live-hero h2{margin:6px 0 0}
.live-count{display:flex;gap:10px;margin:8px 0}
.live-count span{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:10px 6px;border-radius:14px;background:linear-gradient(135deg,#12346B,#155EEF);color:#fff}
.live-count b{font-size:1.6rem;line-height:1}.live-count small{font-size:.7rem;opacity:.8}
.live-join{background:linear-gradient(135deg,#ef4444,#b91c1c)!important;color:#fff!important;animation:fabPing 2.4s infinite}
@keyframes floatY{50%{transform:translateY(-6px)}}
/* bell */
.nav-bell{position:relative;font-size:1.1rem;text-decoration:none;padding:6px 8px!important}
.nav-bell b{position:absolute;top:-2px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font-size:.68rem;display:grid;place-items:center;box-shadow:0 0 0 2px var(--card,#fff)}
.nav-bell.has-new{animation:bellRing 2.6s ease-in-out infinite;transform-origin:50% 0}
@keyframes bellRing{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(14deg)}88%{transform:rotate(-12deg)}92%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
.nf-list{display:flex;flex-direction:column;gap:10px;max-width:760px}
.nf-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;text-decoration:none;color:inherit;background:var(--card,#fff);border:1px solid rgba(21,94,239,.15);transition:transform .25s,box-shadow .25s}
.nf-item:hover{transform:translateX(4px);box-shadow:0 14px 30px -18px rgba(21,94,239,.6)}
.nf-item.is-new{border-color:rgba(21,94,239,.45);background:linear-gradient(90deg,rgba(21,94,239,.08),transparent 60%),var(--card,#fff)}
.nf-ic{width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;font-size:1.3rem;border-radius:14px;background:linear-gradient(135deg,rgba(21,94,239,.18),rgba(11,44,92,.12))}
.nf-book .nf-ic{background:linear-gradient(135deg,rgba(251,191,36,.25),rgba(21,94,239,.08))}
.nf-item .grow{display:flex;flex-direction:column;min-width:0}.nf-item small{opacity:.75}.nf-item em{font-style:normal;font-size:.74rem;opacity:.55;margin-top:2px}
.nf-dot{width:10px;height:10px;border-radius:50%;background:#155EEF;box-shadow:0 0 0 4px rgba(21,94,239,.2)}
html.dark .nf-item,[data-theme=dark] .nf-item{background:#0d1b33}
@media(prefers-reduced-motion:reduce){.nav-bell.has-new,.live-hero-ic,.live-join{animation:none}}

@media(min-width:1001px){.is-admin .navbtn{display:none!important}.is-admin .mainnav{position:static!important;display:flex!important;flex-direction:row!important;align-items:center;gap:2px;transform:none!important;opacity:1!important;visibility:visible!important;background:none!important;box-shadow:none!important;padding:0!important;width:auto!important;height:auto!important;max-height:none!important;overflow:visible!important;border:0!important}
 .is-admin .mainnav>a,.is-admin .adm-grp-btn{font-size:.88rem;padding:8px 11px}}
.is-admin .adm-menu{background:#0d1b33;border-color:rgba(56,139,253,.25)}
.is-admin .adm-grp-btn{color:#e8efe9}.is-admin .adm-grp.on>.adm-grp-btn,.is-admin .adm-grp-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.is-admin .adm-menu a:hover,.is-admin .adm-menu a.active{background:rgba(56,139,253,.15)}
.adm-grp-btn{flex-direction:row!important;opacity:1!important;white-space:nowrap;line-height:1.2}
.mainnav>a{white-space:nowrap}
@media(min-width:1001px) and (max-width:1440px){.is-admin .nav-search{display:none!important}}
.is-admin .adm-grp-btn{color:#12346B}.is-admin .adm-grp.on>.adm-grp-btn,.is-admin .adm-grp-btn:hover{background:rgba(21,94,239,.1);color:#02857A}
html.dark .is-admin .adm-grp-btn,[data-theme=dark] .is-admin .adm-grp-btn{color:#e8efe9}

/* ===== navbar overflow fix: logged-in nav collapse (v b17) ===== */
/* compact spacing so everything fits on laptops */
body:not(.is-admin) .mainnav a,body:not(.is-admin) .mainnav .linkbtn{padding:8px 11px}
@media(max-width:1450px){body:not(.is-admin) .mainnav a,body:not(.is-admin) .mainnav .linkbtn{padding:8px 8px;font-size:.9rem}}
/* More/Menu dropdown reuses admin dropdown styles on the student side */
.nav-grp{position:relative;display:inline-flex}
.nav-grp .adm-menu{min-width:190px}
@media(hover:hover) and (min-width:1001px){.nav-grp:hover .adm-menu,.nav-grp:focus-within .adm-menu{opacity:1;visibility:visible;transform:none}.nav-grp:hover .nav-grp-btn i{transform:rotate(180deg)}}
.nav-grp-btn{background:none;border:0;font:inherit;font-weight:500;font-size:.95rem;color:var(--ink-2);cursor:pointer;padding:8px 11px;border-radius:10px;display:inline-flex;align-items:center;gap:4px;transition:color .25s,background .25s;white-space:nowrap}
.nav-grp-btn i{font-style:normal;font-size:.7em;opacity:.6;transition:transform .25s}
.nav-grp-btn:hover{background:var(--primary-soft);color:var(--primary)}
.nav-grp.on>.nav-grp-btn{background:linear-gradient(135deg,rgba(20,184,166,.14),rgba(11,44,92,.06));color:var(--primary);box-shadow:inset 0 0 0 1px rgba(20,184,166,.25)}
.nav-grp .adm-menu a{padding:9px 12px!important;font-size:.93rem}
/* on phones the drawer lists every link flat */
@media(max-width:900px){
  .nav-grp{display:flex;flex-direction:column;width:100%}
  .nav-grp-btn{pointer-events:none;opacity:.6;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;padding:12px 12px 4px}
  .nav-grp-btn i{display:none}
  .nav-grp .adm-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 0 8px;min-width:0}
  .nav-grp .adm-menu a{padding:12px 14px!important;font-size:1rem}
}


/* ======================================================== */
/* Custom Quiz Builder & Dashboard Footer Gap Normalization */
/* ======================================================== */
.main:has(.dash-wrap) {
  padding-bottom: 0 !important;
}
.dash-wrap {
  margin-bottom: 24px;
}
.dash-wrap .section {
  margin-top: 36px !important;
  margin-bottom: 0 !important;
}
.site-footer {
  margin-top: 24px !important;
}

/* Modal Form Padding & Dropdown Contrast (.modal-field & .qb-field) */
.modal-field select,
.qb-field select {
  height: 44px;
  min-height: 44px;
  padding: 10px 14px;
  padding-right: 42px;
  background-color: #ffffff;
  color: #12346B;
  border: 1.5px solid rgba(11, 44, 92, 0.15);
  border-radius: 9px;
  font-size: 0.86rem;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B2C5C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  line-height: 1.5;
}
.modal-field select:focus,
.qb-field select:focus {
  outline: 2px solid #155EEF;
  border-color: #155EEF;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.15);
}
.modal-field select:disabled,
.qb-field select:disabled {
  background-color: #F8FAFC;
  color: #94A3B8;
  border-color: #E2E8F0;
  cursor: not-allowed;
}
.modal-field select option,
.qb-field select option {
  color: #12346B;
  background-color: #ffffff;
  padding: 8px 12px;
}


/* ======================================================== */
/* Professional Lucide Icon System (PreMed.pk Design Standards) */
/* ======================================================== */
.lucide,
svg.lucide,
i[data-lucide] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  stroke-width: 2px;
}
.lucide-xs { width: 12px; height: 12px; }
.lucide-sm { width: 14px; height: 14px; }
.lucide-md { width: 18px; height: 18px; }
.lucide-lg { width: 22px; height: 22px; }
.lucide-xl { width: 28px; height: 28px; }

/* Palette adherence */
.lucide-slate { color: #64748B; }
.lucide-navy  { color: #12346B; }
.lucide-teal  { color: #155EEF; }
.lucide-amber { color: #D97706; }

.lucide-flame {
  color: #D97706 !important;
}
.lucide-lock {
  color: #64748B;
}
.lucide-shield-check {
  color: #155EEF;
}
.lucide-trophy {
  color: #12346B;
}

/* Ensure button and chip icons align properly */
.btn .lucide,
.chip .lucide,
.chip-stat .lucide {
  margin-right: 5px;
}


/* ======================================================== */
/* Brand Logo Display Normalization (Avoid Duplicate Logos) */
/* ======================================================== */
.brand-logo.dark,
.admin-sidebar-logo.dark {
  display: none !important;
}
html[data-theme="dark"] .brand-logo.dark,
html[data-theme="dark"] .admin-sidebar-logo.dark {
  display: block !important;
}
html[data-theme="dark"] .brand-logo.light,
html[data-theme="dark"] .admin-sidebar-logo.light {
  display: none !important;
}




/* ======================================================== */
/* ======================================================== */
/* CLEAN ACCORDION DROPDOWNS & DRAWER SIDEBAR               */
/* ======================================================== */
body.sidebar-hidden .admin-sidebar,
html.sidebar-hidden .admin-sidebar {
  margin-left: -260px !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  border-right: none !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.sidebar-hidden .admin-main-wrap,
html.sidebar-hidden .admin-main-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

.adm-dropdown {
  margin-bottom: 2px;
}
.adm-dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--ink-2, #475569) !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  box-sizing: border-box !important;
}
.adm-dropdown-toggle:hover {
  background: rgba(21, 94, 239, 0.06) !important;
  color: #155EEF !important;
}
.adm-dropdown.is-open > .adm-dropdown-toggle {
  color: #155EEF !important;
}
.adm-dropdown-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.adm-dropdown-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.adm-dropdown-title {
  font-size: 0.85rem;
  font-weight: 600;
}
.adm-chevron {
  width: 14px;
  height: 14px;
  color: var(--muted, #94A3B8);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0;
}
.adm-dropdown.is-open > .adm-dropdown-toggle .adm-chevron {
  transform: rotate(180deg) !important;
  color: #155EEF !important;
}

/* ======================================================== */
/* ACCORDION SUB-LINKS STYLING (.adm-dropdown-menu)         */
/* ======================================================== */
.adm-dropdown-menu {
  display: none;
  flex-direction: column;
  gap: 6px !important;
  margin: 4px 0 8px 16px !important;
  padding: 6px 0 6px 14px !important;
  border-left: 2px solid #E2E8F0 !important; /* Clean vertical guide line */
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  list-style: none !important;
  box-sizing: border-box !important;
  background: transparent !important;
  box-shadow: none !important;
}

.adm-dropdown.is-open .adm-dropdown-menu,
.adm-dropdown.is-open > .adm-dropdown-menu {
  display: flex !important;
}

/* Sub-link Items */
.adm-dropdown-menu a {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #475569 !important; /* High contrast slate, not washed-out */
  padding: 6px 12px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  line-height: 1.4 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.adm-dropdown-menu a:hover {
  color: #155EEF !important;
  background: rgba(21, 94, 239, 0.08) !important;
  transform: translateX(3px) !important;
}

.adm-dropdown-menu a.active {
  color: #155EEF !important;
  font-weight: 700 !important;
  background: rgba(21, 94, 239, 0.12) !important;
}

html[data-theme="dark"] .adm-dropdown-toggle {
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .adm-dropdown-toggle:hover,
html[data-theme="dark"] .adm-dropdown.is-open > .adm-dropdown-toggle {
  color: #388BFD !important;
  background: rgba(56, 139, 253, 0.08) !important;
}
html[data-theme="dark"] .adm-dropdown-menu {
  border-left-color: rgba(255, 255, 255, 0.15) !important;
}
html[data-theme="dark"] .adm-dropdown-menu a {
  color: #CBD5E1 !important;
}
html[data-theme="dark"] .adm-dropdown-menu a:hover {
  color: #388BFD !important;
  background: rgba(56, 139, 253, 0.1) !important;
}
html[data-theme="dark"] .adm-dropdown-menu a.active {
  color: #388BFD !important;
  font-weight: 700 !important;
  background: rgba(56, 139, 253, 0.15) !important;
}

/* 3-line hamburger toggle button (≡) */
.admin-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line, rgba(15,23,42,.1)) !important;
  background: var(--surface, #ffffff) !important;
  color: var(--ink-2, #475569) !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
.admin-toggle-btn:hover {
  background: rgba(21, 94, 239, 0.08) !important;
  color: #155EEF !important;
  border-color: rgba(21, 94, 239, 0.25) !important;
}
html[data-theme="dark"] .admin-toggle-btn {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
}
html[data-theme="dark"] .admin-toggle-btn:hover {
  color: #388BFD !important;
  background: rgba(56, 139, 253, 0.12) !important;
}


/* Hamburger button in navbar */
.admin-burger-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #475569 !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
.admin-burger-btn:hover {
  background: rgba(21, 94, 239, 0.08) !important;
  color: #155EEF !important;
  border-color: rgba(21, 94, 239, 0.25) !important;
}
html[data-theme="dark"] .admin-burger-btn {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #94A3B8 !important;
}
html[data-theme="dark"] .admin-burger-btn:hover {
  background: rgba(56, 139, 253, 0.12) !important;
  color: #388BFD !important;
}


/* ======================================================== */
/* HIGH-END SAAS HOMEPAGE OVERHAUL (PreMed / Nearpeer Style)  */
/* ======================================================== */

/* 1. Feature Cards Grid ("Everything you need to succeed") */
.home-editorial .feat-grid,
.feat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  border-top: none !important;
  margin-top: 24px !important;
}

.feat-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 18px !important;
  padding: 28px 24px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.feat-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -12px rgba(21, 94, 239, 0.16) !important;
  border-color: rgba(21, 94, 239, 0.3) !important;
}

.feat-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(21, 94, 239, 0.12) 0%, rgba(14, 165, 233, 0.12) 100%) !important;
  color: #155EEF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  transition: transform 0.3s ease !important;
  flex-shrink: 0 !important;
}

.feat-icon i,
.feat-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.2 !important;
}

.feat-card:hover .feat-icon {
  transform: scale(1.08) !important;
}

.feat-card h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}

.feat-card p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* 2. Exam Cards Grid ("Choose your exam") */
.home-editorial .exam-cards,
.exam-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-top: 24px !important;
}

.exam-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 18px !important;
  padding: 26px 24px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  box-sizing: border-box !important;
  position: relative !important;
  clip-path: none !important;
  grid-row: auto !important;
  min-height: 240px !important;
}

.exam-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -12px rgba(21, 94, 239, 0.18) !important;
  border-color: rgba(21, 94, 239, 0.35) !important;
}

.exam-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

.exam-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(21, 94, 239, 0.08) !important;
  color: #155EEF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease !important;
}

.exam-icon i,
.exam-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2 !important;
}

.exam-card:hover .exam-icon {
  transform: scale(1.06) !important;
}

.exam-badge {
  background: rgba(21, 94, 239, 0.1) !important;
  color: #155EEF !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  border: none !important;
}

.exam-card h3 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}

.exam-card p {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #64748b !important;
  margin: 0 0 16px !important;
  flex-grow: 1 !important;
}

.exam-meta-pills {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}

.exam-meta-pill {
  background: #f1f5f9 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}

.exam-card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #155EEF !important;
  margin-top: auto !important;
  padding-top: 4px !important;
}

.arrow-icon {
  display: inline-flex !important;
  align-items: center !important;
  transition: transform 0.25s ease !important;
}

.arrow-icon i,
.arrow-icon svg {
  width: 15px !important;
  height: 15px !important;
}

.exam-card:hover .arrow-icon {
  transform: translateX(4px) !important;
}

/* 3. Stats Metrics Bar (Floating Glass Surface) */
.home-editorial .stats-strip,
.stats-strip,
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  max-width: 1100px !important;
  margin: 40px auto !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
}

.stat-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  text-align: center !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px -8px rgba(21, 94, 239, 0.12) !important;
}

.stat-number {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #155EEF !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-family: inherit !important;
}

.stat-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
  display: block !important;
  line-height: 1.3 !important;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .home-editorial .feat-grid,
  .feat-grid,
  .home-editorial .exam-cards,
  .exam-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .home-editorial .stats-strip,
  .stats-strip,
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 640px) {
  .home-editorial .feat-grid,
  .feat-grid,
  .home-editorial .exam-cards,
  .exam-cards {
    grid-template-columns: 1fr !important;
  }
  .stat-number {
    font-size: 28px !important;
  }
}

/* 4. Dark Mode Support */
html[data-theme="dark"] .feat-card,
html[data-theme="dark"] .exam-card,
html[data-theme="dark"] .stat-card {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .feat-card h3,
html[data-theme="dark"] .exam-card h3 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .feat-card p,
html[data-theme="dark"] .exam-card p {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .exam-meta-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .stat-label {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .exam-card-link {
  color: #388BFD !important;
}

html[data-theme="dark"] .feat-icon,
html[data-theme="dark"] .exam-icon {
  background: rgba(56, 139, 253, 0.12) !important;
  color: #388BFD !important;
}

html[data-theme="dark"] .exam-badge {
  background: rgba(56, 139, 253, 0.12) !important;
  color: #388BFD !important;
}

/* ── Board / Province Badges (MDCAT exam card) ──────────────────────────── */
.domain-boards-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.board-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(21, 94, 239, 0.08);
  color: #155EEF;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
html[data-theme="dark"] .board-badge {
  background: rgba(56, 139, 253, 0.12);
  color: #388BFD;
}


/* ── Student Reviews & Toppers Section ──────────────────────── */
.home-reviews-section {
  margin-top: 56px;
  margin-bottom: 24px;
}
.home-reviews-container {
  width: 100%;
}
.home-reviews-section .section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
}
.home-reviews-section .section-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--primary, #155EEF);
  margin: 0 0 8px;
}
.home-reviews-section h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--ink, #0f172a);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.home-reviews-section .section-head p {
  color: var(--muted, #64748B);
  font-size: 1rem;
  margin: 0;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}
.review-card {
  background: var(--surface-solid, #ffffff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(21, 94, 239, 0.10);
  border-color: rgba(21, 94, 239, 0.25);
}
html[data-theme="dark"] .review-card {
  background: #0f1e33 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .review-card:hover {
  border-color: rgba(56, 139, 253, 0.25) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.review-score {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(21, 94, 239, 0.10);
  color: var(--primary, #155EEF);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
html[data-theme="dark"] .review-score {
  background: rgba(56, 139, 253, 0.14);
  color: #388BFD;
}
.review-quote {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-2, #334155);
  font-style: italic;
  margin: 0 0 20px;
  flex-grow: 1;
}
html[data-theme="dark"] .review-quote {
  color: #CBD5E1;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line, rgba(15, 23, 42, 0.06));
}
html[data-theme="dark"] .review-author {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #155EEF 0%, #12346B 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.25);
}
img.author-avatar,
.author-avatar-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.25);
  border: 2px solid rgba(21, 94, 239, 0.35);
}
.review-card.card-large {
  grid-column: span 2;
}
@media (max-width: 768px) {
  .review-card.card-large {
    grid-column: span 1;
  }
}
.author-info h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
  margin: 0 0 2px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
html[data-theme="dark"] .author-info h4 {
  color: #F1F5F9;
}
.author-info span {
  font-size: 0.76rem;
  color: var(--muted, #64748B);
  font-weight: 500;
  display: block;
}
html[data-theme="dark"] .author-info span {
  color: #94A3B8;
}


/* ── 3D Perspective Stage & Depth Tilt ───────────────────────── */
.perspective-stage {
  perspective: 1200px;
  perspective-origin: center center;
}

.card-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.25s ease;
  will-change: transform;
  overflow: hidden;
}

.card-glow-layer {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 0%, rgba(21, 94, 239, 0.12), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.card-3d:hover .card-glow-layer {
  opacity: 1;
}

/* ── 3D Swipe-In Animations on Scroll ────────────────────────── */
@keyframes swipeIn3DLeft {
  0% {
    opacity: 0;
    transform: perspective(1200px) rotateY(16deg) translateX(-35px) translateZ(-50px);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) rotateY(0deg) translateX(0) translateZ(0);
  }
}

@keyframes swipeIn3DUp {
  0% {
    opacity: 0;
    transform: perspective(1200px) rotateX(16deg) translateY(35px) translateZ(-50px);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) translateY(0) translateZ(0);
  }
}

@keyframes swipeIn3DRight {
  0% {
    opacity: 0;
    transform: perspective(1200px) rotateY(-16deg) translateX(35px) translateZ(-50px);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) rotateY(0deg) translateX(0) translateZ(0);
  }
}

.swipe-in-left {
  opacity: 0;
}
.swipe-in-left.is-visible {
  animation: swipeIn3DLeft 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.swipe-in-up {
  opacity: 0;
}
.swipe-in-up.is-visible {
  animation: swipeIn3DUp 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s forwards;
}

.swipe-in-right {
  opacity: 0;
}
.swipe-in-right.is-visible {
  animation: swipeIn3DRight 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.24s forwards;
}

.reviews-main-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--ink, #0f172a);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.reviews-main-sub {
  color: var(--muted, #64748B);
  font-size: 1rem;
  margin: 0;
}


/* Editorial academic homepage. Scoped presentation only. */
.home-editorial {
 --home-border:color-mix(in srgb,var(--primary-deep) 18%,transparent);
 --home-inverse:var(--primary-ink);
 --home-dark:var(--primary-deep);
 --home-teal:var(--primary);
 --home-shadow:0 16px 28px -24px color-mix(in srgb,var(--primary-deep) 50%,transparent);
 --home-motion:260ms;
 color:var(--ink-2);
}
html[data-theme=dark] .home-editorial{--home-border:var(--line);--home-teal:var(--primary-deep)}
.main:has(.home-editorial){max-width:1280px}
.home-editorial .announce{background:var(--surface-solid);color:var(--ink-2);border:0;border-bottom:1px solid var(--home-border);border-radius:0;margin-bottom:20px;box-shadow:none;padding:12px 40px 12px 16px;font-size:12px}
.home-editorial .announce button{color:var(--ink);background:var(--primary-soft)}
.home-editorial .h-hero{position:relative;display:block;isolation:isolate;min-height:450px;padding:44px 40px;margin-bottom:0;overflow:hidden;border-radius:0;}
.home-editorial .h-hero:before{content:"";position:absolute;inset:0;z-index:-1;width:auto;height:auto;border-radius:0;filter:none;animation:none;background:linear-gradient(90deg,var(--surface-solid) 0%,color-mix(in srgb,var(--surface-solid) 96%,transparent) 33%,color-mix(in srgb,var(--surface-solid) 55%,transparent) 54%,transparent 74%)}
.home-editorial .h-hero:after{display:none}
.home-editorial .h-art{position:absolute;inset:0;z-index:-2;max-width:none;margin:0;}
.home-editorial .h-art:before,.home-editorial .h-art:after{display:none}
.home-editorial .h-art img{width:100%;height:100%;object-fit:cover;object-position:center 46%;border:0;border-radius:0;box-shadow:none;animation:none!important;transform:none!important}
.home-editorial .home-hero-copy{position:relative;max-width:510px}
.home-editorial .trust{background:none;border:0;box-shadow:none;padding:0;color:var(--primary);font-size:11px;animation:none}
.home-editorial .trust:before,.home-editorial .trust:after{display:none}
.home-editorial .h-hero h1{font-size:54px!important;line-height:1.1!important;margin:16px 0 12px;color:var(--ink);animation:none;letter-spacing:0}
.home-editorial .h-hero h2{font-size:28px;line-height:1.3;margin:0 0 18px;font-weight:600;color:var(--ink)}
.home-editorial .h-hero .lead{max-width:430px;font-size:14px;line-height:1.8;animation:none;margin-bottom:24px}
.home-editorial .h-cta{gap:10px;animation:none}
.home-editorial .h-cta .btn{min-height:46px;background:var(--primary)!important;box-shadow:none;transform:none!important;font-size:13px}
.home-editorial .h-cta .btn-ghost{background:var(--surface-solid)!important;color:var(--ink)!important;border-color:var(--home-border)!important}
.home-editorial .h-badges{margin-top:22px;gap:12px;animation:none;opacity:1;font-size:10px;color:var(--ink-2)}
.home-editorial .section{margin:56px 0}
.home-editorial .sec-head{text-align:left;max-width:none;margin-bottom:26px}
.home-editorial .sec-head h2{font-size:30px!important;margin:6px 0 10px}
.home-editorial .sec-head h2:after,.home-editorial .eyebrow:before,.home-editorial .eyebrow:after{display:none}
.home-editorial .sec-head .lead{font-size:14px;max-width:660px;margin:0}
.home-editorial .eyebrow{font-size:11px;color:var(--primary)!important}
.home-editorial .exam-cards{display:grid;grid-template-columns:1fr 1fr 1fr!important;gap:16px!important;perspective:none;align-items:stretch}
.home-editorial .home-exam{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px!important;min-height:244px;border:1px solid var(--home-border)!important;border-radius:8px!important;background:var(--surface-solid)!important;box-shadow:none!important;transform:none!important;transform-style:flat;animation:none!important;transition:background var(--home-motion),box-shadow var(--home-motion)!important;transition-delay:0s!important;color:var(--ink-2);overflow:hidden}
.home-editorial .home-exam:nth-child(1){grid-row:span 2;background:var(--home-dark)!important;color:var(--home-inverse);border:0!important;justify-content:flex-start;border-radius:8px 8px 0 0!important}
.home-editorial .home-exam:nth-child(2){clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.home-editorial .home-exam:nth-child(3){background:var(--primary-soft)!important;border-bottom:4px solid var(--primary)!important}
.home-editorial .home-exam:nth-child(4){border-left:4px solid var(--accent)!important}
.home-editorial .home-exam:nth-child(5){background:var(--home-teal)!important;color:var(--home-inverse);clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
.home-editorial .home-exam:before,.home-editorial .home-exam:after,.home-editorial .home-exam .spot,.home-editorial .home-exam .glare,.home-editorial .home-exam .ic:after{display:none!important}
.home-editorial .home-exam:hover{box-shadow:var(--home-shadow)!important;transform:none!important}
.home-editorial .home-exam:focus-visible{outline:0!important;box-shadow:inset 0 0 0 4px var(--gold)!important}
.home-editorial .home-exam-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-bottom:2px}
.home-editorial .exam-badge{position:static;background:transparent!important;color:inherit!important;border:1px solid currentColor!important;font-size:10px;border-radius:4px;padding:3px 8px;width:fit-content;opacity:.85}
.home-editorial .home-arrow{font-size:22px;line-height:1;transition:transform var(--home-motion)}
.home-editorial .home-exam:hover .home-arrow{transform:translate(3px,-3px)}
.home-editorial .home-exam .ic{display:grid;place-items:center;width:46px;height:46px;font-size:25px;border:0;box-shadow:none;animation:none!important;transform:none!important;background:var(--primary-soft)!important;border-radius:8px!important;margin:0}
.home-editorial .home-exam:nth-child(1) .ic{width:80px;height:80px;font-size:46px;margin:42px 0 20px;background:color-mix(in srgb,var(--home-inverse) 12%,transparent)!important}
.home-editorial .home-exam:nth-child(3) .ic{border-radius:50%!important;background:var(--surface-solid)!important}
.home-editorial .home-exam:nth-child(5) .ic{background:color-mix(in srgb,var(--home-inverse) 18%,transparent)!important}
.home-editorial .home-exam h3{font-size:25px;color:var(--ink)!important;margin:0;transform:none}
.home-editorial .home-exam:nth-child(1) h3{font-size:40px}
.home-editorial .home-exam:nth-child(1) h3,.home-editorial .home-exam:nth-child(5) h3{color:var(--home-inverse)!important}
.home-editorial .home-exam .meta{font-size:12px;line-height:1.65;color:inherit!important;margin:0;transform:none;opacity:.85}
.home-editorial .home-exam>span.meta{font-size:11px}
.home-editorial .home-exam-link{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid currentColor;font-size:12px;font-weight:700;color:inherit;gap:12px}
.home-editorial .home-exam-link span{transition:transform var(--home-motion)}
.home-editorial .home-exam:hover .home-exam-link span{transform:translateX(5px)}
.home-editorial .about{border-top:1px solid var(--home-border);padding-top:44px;gap:48px}
.home-editorial .about .switcher{box-shadow:none;background:none!important;border:0!important;padding:0}
.home-editorial .feat-grid{gap:0;border-top:1px solid var(--home-border)}
.home-editorial .feat{background:transparent!important;border:0!important;border-bottom:1px solid var(--home-border)!important;box-shadow:none!important;border-radius:0!important;padding:28px 24px!important;transform:none!important}
.home-editorial .feat:before,.home-editorial .feat:after{display:none}
.home-editorial .feat .ic{background:var(--primary-soft);border-radius:8px;width:44px;height:44px;display:grid;place-items:center;font-size:22px}
.home-editorial .feat h3{font-size:17px}.home-editorial .feat p{font-size:13px}
.home-editorial .steps{gap:24px}
.home-editorial .step{background:transparent!important;border:0!important;border-top:2px solid var(--primary)!important;border-radius:0!important;box-shadow:none!important;padding:22px 0!important;transform:none!important}
.home-editorial .step:after{display:none}
.home-editorial .step:before{position:static;display:block;background:none;box-shadow:none;color:var(--primary);border-radius:0;margin-bottom:14px;font-size:24px}
.home-editorial .step h3{font-size:16px}.home-editorial .step p{font-size:13px}
.home-editorial .pricing{max-width:none;gap:24px}
.home-editorial .price-card{padding:30px!important;box-shadow:none!important;background:var(--surface-solid)!important;border:1px solid var(--home-border)!important}
.home-editorial .price-card.best{background:var(--primary-soft)!important;border:1px solid var(--primary)!important}
.home-editorial .price-card:before,.home-editorial .price-card:after{display:none!important}
.home-editorial .stats-strip{padding:28px 0;border-top:1px solid var(--home-border);border-bottom:1px solid var(--home-border);gap:0}
.home-editorial .stat-c{background:transparent!important;border:0!important;border-right:1px solid var(--home-border)!important;box-shadow:none!important;border-radius:0!important;padding:12px!important;font-size:12px}
.home-editorial .stat-c:last-child{border-right:0!important}
.home-editorial .stat-c:before,.home-editorial .stat-c:after{display:none}
.home-editorial .stat-c b{font-size:30px;color:var(--primary)!important;background:none;-webkit-text-fill-color:var(--primary)}
.home-editorial .faq .card{background:transparent!important;border:0!important;border-bottom:1px solid var(--home-border)!important;border-radius:0!important;box-shadow:none!important}
.home-editorial .final-cta{border-radius:0;background:var(--home-dark);box-shadow:none;text-align:left;padding:36px;color:var(--home-inverse);}
.home-editorial .final-cta:before,.home-editorial .final-cta:after{display:none}
.home-editorial .final-cta h2,.home-editorial .final-cta p{color:var(--home-inverse)}
@media(max-width:960px){
 .home-editorial .h-hero{min-height:440px;padding:36px 28px}
 .home-editorial .home-hero-copy{max-width:430px}
 .home-editorial .h-hero h1{font-size:46px!important}
 .home-editorial .h-hero:before{background:linear-gradient(90deg,var(--surface-solid) 0%,color-mix(in srgb,var(--surface-solid) 92%,transparent) 42%,color-mix(in srgb,var(--surface-solid) 35%,transparent) 80%)}
 .home-editorial .exam-cards{grid-template-columns:1fr 1fr!important}
 .home-editorial .home-exam:nth-child(1){grid-row:auto;grid-column:1/-1;min-height:230px}
 .home-editorial .home-exam:nth-child(1) .ic{position:absolute;right:28px;top:60px;margin:0}
 .home-editorial .home-exam:nth-child(1) .meta{max-width:65%}
 .home-editorial .home-exam:nth-child(1) h3{font-size:32px}
 .home-editorial .about{gap:28px}
}
@media(max-width:600px){
 .home-editorial .announce{font-size:10px;padding-left:0;margin-bottom:14px}
 .home-editorial .h-hero{padding:26px 20px 32px;min-height:425px}
 .home-editorial .home-hero-copy{max-width:none}
 .home-editorial .h-hero:before{background:color-mix(in srgb,var(--surface-solid) 88%,transparent)}
 .home-editorial .h-art img{object-position:65% center}
 .home-editorial .h-hero h1{font-size:40px!important}.home-editorial .h-hero h2{font-size:24px}
 .home-editorial .h-hero .lead{font-size:13px}.home-editorial .trust{font-size:9px}
 .home-editorial .h-badges{flex-wrap:wrap;font-size:9px;gap:8px}
 .home-editorial .section{margin:40px 0}.home-editorial .sec-head h2{font-size:26px!important}
 .home-editorial .sec-head .lead{font-size:13px}
 .home-editorial .exam-cards{grid-template-columns:1fr!important;gap:14px!important}
 .home-editorial .home-exam,.home-editorial .home-exam:last-child:nth-child(odd){min-height:220px;padding:22px!important;grid-column:auto}
 .home-editorial .home-exam:nth-child(1){min-height:260px}
 .home-editorial .home-exam:nth-child(1) .ic{width:64px;height:64px;font-size:36px;right:22px}
 .home-editorial .home-exam:nth-child(1) .meta{max-width:70%}
 .home-editorial .feat-grid{grid-template-columns:1fr 1fr}.home-editorial .feat{padding:20px 12px!important}
 .home-editorial .feat h3{font-size:15px}.home-editorial .feat p{font-size:12px}
 .home-editorial .steps{grid-template-columns:1fr 1fr;gap:18px}
 .home-editorial .stat-c{border-right:0!important}.home-editorial .stat-c b{font-size:26px}
 .home-editorial .price-card{padding:24px!important}.home-editorial .final-cta{padding:28px 22px}
}
@media(prefers-reduced-motion:reduce){html .home-editorial a.home-exam,.home-editorial .h-cta .btn,.home-editorial *,.home-editorial *:before,.home-editorial *:after{animation:none!important;transition:none!important;transform:none!important;opacity:1!important;translate:none!important;scale:1!important}}

/* Natural study imagery: readable copy, clear subject, stable framing. */
.home-editorial .h-art img{object-position:center 52%}
.home-editorial .h-hero.no-home-image{background:var(--primary-soft)}
.home-editorial .h-hero.no-home-image:before{background:transparent}
.home-editorial .sw-stage{aspect-ratio:3/2;height:auto;min-height:0;overflow:hidden;border-radius:8px;background:var(--primary-soft)}
.home-editorial .sw-stage img{width:100%;height:100%;object-fit:cover;object-position:center;max-height:none}
.home-editorial .sw-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.home-editorial .sw-tabs button{min-width:0;flex:1;font-size:11px;padding:10px 8px;border-radius:6px}
.home-editorial .about:not(:has(.switcher)){display:block}
@media(max-width:600px){.home-editorial .h-art{top:auto;height:230px}.home-editorial .h-art img{object-position:70% 35%}.home-editorial .h-hero{padding-bottom:255px}.home-editorial .h-hero:before{background:linear-gradient(180deg,var(--surface-solid) 0%,var(--surface-solid) calc(100% - 230px),transparent calc(100% - 205px))}.home-editorial .h-hero.no-home-image{padding-bottom:32px}.home-editorial .sw-tabs button{font-size:10px;padding:10px 5px}}


/* ======================================================== */
/* HIGH-END SAAS HOMEPAGE OVERHAUL (PreMed / Nearpeer Style)  */
/* ======================================================== */

/* 1. Feature Cards Grid ("Everything you need to succeed") */
.home-editorial .feat-grid,
.feat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  border-top: none !important;
  margin-top: 24px !important;
}

.feat-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 18px !important;
  padding: 28px 24px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.feat-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -12px rgba(21, 94, 239, 0.16) !important;
  border-color: rgba(21, 94, 239, 0.3) !important;
}

.feat-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(21, 94, 239, 0.12) 0%, rgba(14, 165, 233, 0.12) 100%) !important;
  color: #155EEF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  transition: transform 0.3s ease !important;
  flex-shrink: 0 !important;
}

.feat-icon i,
.feat-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.2 !important;
}

.feat-card:hover .feat-icon {
  transform: scale(1.08) !important;
}

.feat-card h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}

.feat-card p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* 2. Exam Cards Grid ("Choose your exam") */
.home-editorial .exam-cards,
.exam-cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-top: 24px !important;
}

.exam-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 18px !important;
  padding: 26px 24px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  box-sizing: border-box !important;
  position: relative !important;
  clip-path: none !important;
  grid-row: auto !important;
  min-height: 240px !important;
}

.exam-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -12px rgba(21, 94, 239, 0.18) !important;
  border-color: rgba(21, 94, 239, 0.35) !important;
}

.exam-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

.exam-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(21, 94, 239, 0.08) !important;
  color: #155EEF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease !important;
}

.exam-icon i,
.exam-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2 !important;
}

.exam-card:hover .exam-icon {
  transform: scale(1.06) !important;
}

.exam-badge {
  background: rgba(21, 94, 239, 0.1) !important;
  color: #155EEF !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  border: none !important;
}

.exam-card h3 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}

.exam-card p {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #64748b !important;
  margin: 0 0 16px !important;
  flex-grow: 1 !important;
}

.exam-meta-pills {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}

.exam-meta-pill {
  background: #f1f5f9 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}

.exam-card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #155EEF !important;
  margin-top: auto !important;
  padding-top: 4px !important;
}

.arrow-icon {
  display: inline-flex !important;
  align-items: center !important;
  transition: transform 0.25s ease !important;
}

.arrow-icon i,
.arrow-icon svg {
  width: 15px !important;
  height: 15px !important;
}

.exam-card:hover .arrow-icon {
  transform: translateX(4px) !important;
}

/* 3. Stats Metrics Bar (Floating Glass Surface) */
.home-editorial .stats-strip,
.stats-strip,
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  max-width: 1100px !important;
  margin: 40px auto !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
}

.stat-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  text-align: center !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px -8px rgba(21, 94, 239, 0.12) !important;
}

.stat-number {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #155EEF !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-family: inherit !important;
}

.stat-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
  display: block !important;
  line-height: 1.3 !important;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .home-editorial .feat-grid,
  .feat-grid,
  .home-editorial .exam-cards,
  .exam-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .home-editorial .stats-strip,
  .stats-strip,
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 640px) {
  .home-editorial .feat-grid,
  .feat-grid,
  .home-editorial .exam-cards,
  .exam-cards {
    grid-template-columns: 1fr !important;
  }
  .stat-number {
    font-size: 28px !important;
  }
}

/* 4. Dark Mode Support */
html[data-theme="dark"] .feat-card,
html[data-theme="dark"] .exam-card,
html[data-theme="dark"] .stat-card {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .feat-card h3,
html[data-theme="dark"] .exam-card h3 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .feat-card p,
html[data-theme="dark"] .exam-card p {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .exam-meta-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .stat-label {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .exam-card-link {
  color: #388BFD !important;
}

html[data-theme="dark"] .feat-icon,
html[data-theme="dark"] .exam-icon {
  background: rgba(56, 139, 253, 0.12) !important;
  color: #388BFD !important;
}

html[data-theme="dark"] .exam-badge {
  background: rgba(56, 139, 253, 0.12) !important;
  color: #388BFD !important;
}


/* ── Student Reviews & Toppers Section ──────────────────────── */
.home-reviews-section {
  margin-top: 56px;
  margin-bottom: 24px;
}
.home-reviews-container {
  width: 100%;
}
.home-reviews-section .section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
}
.home-reviews-section .section-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--primary, #155EEF);
  margin: 0 0 8px;
}
.home-reviews-section h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--ink, #0f172a);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.home-reviews-section .section-head p {
  color: var(--muted, #64748B);
  font-size: 1rem;
  margin: 0;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}
.review-card {
  background: var(--surface-solid, #ffffff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(21, 94, 239, 0.10);
  border-color: rgba(21, 94, 239, 0.25);
}
html[data-theme="dark"] .review-card {
  background: #0f1e33 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .review-card:hover {
  border-color: rgba(56, 139, 253, 0.25) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.review-score {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(21, 94, 239, 0.10);
  color: var(--primary, #155EEF);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
html[data-theme="dark"] .review-score {
  background: rgba(56, 139, 253, 0.14);
  color: #388BFD;
}
.review-quote {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-2, #334155);
  font-style: italic;
  margin: 0 0 20px;
  flex-grow: 1;
}
html[data-theme="dark"] .review-quote {
  color: #CBD5E1;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line, rgba(15, 23, 42, 0.06));
}
html[data-theme="dark"] .review-author {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #155EEF 0%, #12346B 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.25);
}
img.author-avatar,
.author-avatar-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.25);
  border: 2px solid rgba(21, 94, 239, 0.35);
}
.review-card.card-large {
  grid-column: span 2;
}
@media (max-width: 768px) {
  .review-card.card-large {
    grid-column: span 1;
  }
}
.author-info h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
  margin: 0 0 2px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
html[data-theme="dark"] .author-info h4 {
  color: #F1F5F9;
}
.author-info span {
  font-size: 0.76rem;
  color: var(--muted, #64748B);
  font-weight: 500;
  display: block;
}
html[data-theme="dark"] .author-info span {
  color: #94A3B8;
}


/* ── 3D Perspective Stage & Depth Tilt ───────────────────────── */
.perspective-stage {
  perspective: 1200px;
  perspective-origin: center center;
}

.card-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.25s ease;
  will-change: transform;
  overflow: hidden;
}

.card-glow-layer {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 0%, rgba(21, 94, 239, 0.12), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.card-3d:hover .card-glow-layer {
  opacity: 1;
}

/* ── 3D Swipe-In Animations on Scroll ────────────────────────── */
@keyframes swipeIn3DLeft {
  0% {
    opacity: 0;
    transform: perspective(1200px) rotateY(16deg) translateX(-35px) translateZ(-50px);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) rotateY(0deg) translateX(0) translateZ(0);
  }
}

@keyframes swipeIn3DUp {
  0% {
    opacity: 0;
    transform: perspective(1200px) rotateX(16deg) translateY(35px) translateZ(-50px);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) translateY(0) translateZ(0);
  }
}

@keyframes swipeIn3DRight {
  0% {
    opacity: 0;
    transform: perspective(1200px) rotateY(-16deg) translateX(35px) translateZ(-50px);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) rotateY(0deg) translateX(0) translateZ(0);
  }
}

.swipe-in-left {
  opacity: 0;
}
.swipe-in-left.is-visible {
  animation: swipeIn3DLeft 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.swipe-in-up {
  opacity: 0;
}
.swipe-in-up.is-visible {
  animation: swipeIn3DUp 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s forwards;
}

.swipe-in-right {
  opacity: 0;
}
.swipe-in-right.is-visible {
  animation: swipeIn3DRight 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.24s forwards;
}

.reviews-main-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--ink, #0f172a);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.reviews-main-sub {
  color: var(--muted, #64748B);
  font-size: 1rem;
  margin: 0;
}


/* ── How It Works Section ────────────────────────────────────── */
.how-it-works-section {
  margin-top: 56px;
  margin-bottom: 24px;
}
.hiw-container {
  width: 100%;
}
.hiw-heading {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--ink, #0f172a);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.hiw-subheading {
  color: var(--muted, #64748B);
  font-size: 1rem;
  margin: 0;
}

/* ── Steps Grid ──────────────────────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 36px;
  margin-bottom: 28px;
}

/* ── Staggered Swipe/Wipe-In Entry Transition ───────────────── */
.swipe-wipe {
  opacity: 0;
  transform: translateY(32px) scale(0.96);
  filter: blur(4px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--wipe-delay, 0s),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--wipe-delay, 0s),
              filter 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--wipe-delay, 0s);
  will-change: opacity, transform, filter;
}
.swipe-wipe.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

/* ── Step Card Base & Neon Glow Wrapper ──────────────────────── */
.step-card {
  position: relative;
  background: var(--surface-solid, #ffffff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  border-radius: 20px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.step-card.neon-card {
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 20px;
  padding: 2px !important; /* Exposes the rotating neon gradient */
  overflow: hidden;
  display: flex;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.step-card.neon-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 245, 212, 0.2), 0 4px 18px rgba(14, 165, 233, 0.16);
}

html[data-theme="dark"] .step-card.neon-card {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .step-card.neon-card:hover {
  box-shadow: 0 16px 42px rgba(0, 245, 212, 0.28), 0 4px 20px rgba(14, 165, 233, 0.24);
}

/* Moving Rotating Conic Gradient Neon Border */
.neon-border-glow {
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #00f5d4 45deg,
    #0ea5e9 105deg,
    #10b981 165deg,
    transparent 225deg,
    #00f5d4 285deg,
    #0ea5e9 335deg,
    transparent 360deg
  );
  animation: rotateNeonBorder 5s linear infinite;
  z-index: 1;
  opacity: 0.65;
  transition: opacity 0.3s ease, filter 0.3s ease;
  pointer-events: none;
}

.step-card.neon-card:hover .neon-border-glow {
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(0, 245, 212, 0.65));
  animation-duration: 2.8s;
}

/* Step 03 Primary Highlight (active-neon) */
.step-card.neon-card.active-neon {
  box-shadow: 0 8px 30px rgba(0, 245, 212, 0.22), 0 2px 14px rgba(14, 165, 233, 0.16);
}
.step-card.neon-card.active-neon .neon-border-glow {
  opacity: 1;
  animation-duration: 3.2s;
  filter: drop-shadow(0 0 10px rgba(0, 245, 212, 0.6));
}
.step-card.neon-card.active-neon:hover .neon-border-glow {
  opacity: 1;
  animation-duration: 2s;
  filter: drop-shadow(0 0 16px rgba(0, 245, 212, 0.85));
}

@keyframes rotateNeonBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Inner Card Surface */
.step-card-inner {
  position: relative;
  z-index: 2;
  background: var(--surface-solid, #ffffff);
  border-radius: 18px;
  padding: 26px 22px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: background 0.25s ease;
}

html[data-theme="dark"] .step-card-inner {
  background: #0f1e33 !important;
}

.step-card.neon-card.active-neon .step-card-inner {
  background: linear-gradient(180deg, rgba(0, 245, 212, 0.04) 0%, rgba(14, 165, 233, 0.06) 100%), var(--surface-solid, #ffffff);
}
html[data-theme="dark"] .step-card.neon-card.active-neon .step-card-inner {
  background: linear-gradient(180deg, rgba(0, 245, 212, 0.08) 0%, rgba(14, 165, 233, 0.1) 100%), #0f1e33 !important;
}

/* Number Badge (01, 02, 03, 04) */
.step-badge {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 1.15rem;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.15);
  font-family: var(--sans, 'Plus Jakarta Sans', sans-serif);
  letter-spacing: -0.02em;
}
html[data-theme="dark"] .step-badge {
  color: rgba(255, 255, 255, 0.15);
}
.step-card.active-step .step-badge,
.step-card.neon-card.active-neon .step-badge {
  color: #00f5d4;
  opacity: 0.85;
}
html[data-theme="dark"] .step-card.active-step .step-badge,
html[data-theme="dark"] .step-card.neon-card.active-neon .step-badge {
  color: #00f5d4;
}

/* Step Icon Wrapper */
.step-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(21, 94, 239, 0.10);
  color: #155EEF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.step-icon-wrap svg,
.step-icon-wrap i {
  width: 22px;
  height: 22px;
}
.step-card:hover .step-icon-wrap {
  transform: scale(1.08);
  background: #155EEF;
  color: #ffffff;
}
html[data-theme="dark"] .step-icon-wrap {
  background: rgba(56, 139, 253, 0.14);
  color: #388BFD;
}
html[data-theme="dark"] .step-card:hover .step-icon-wrap {
  background: #388BFD;
  color: #081426;
}

.step-card.neon-card.active-neon .step-icon-wrap {
  background: rgba(0, 245, 212, 0.14);
  color: #155EEF;
}
html[data-theme="dark"] .step-card.neon-card.active-neon .step-icon-wrap {
  background: rgba(0, 245, 212, 0.2);
  color: #00f5d4;
}
.step-card.neon-card.active-neon:hover .step-icon-wrap {
  background: linear-gradient(135deg, #00f5d4, #0ea5e9);
  color: #081426;
}

.step-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
  margin: 0 0 8px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
html[data-theme="dark"] .step-card h3 {
  color: #F1F5F9;
}
.step-card p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted, #64748B);
  margin: 0;
}
html[data-theme="dark"] .step-card p {
  color: #94A3B8;
}

/* ── Integrated Easypaisa Payment Banner ─────────────────────── */
.hiw-payment-banner {
  background: linear-gradient(135deg, rgba(21, 94, 239, 0.08) 0%, rgba(11, 44, 92, 0.06) 100%);
  border: 1.5px solid rgba(21, 94, 239, 0.25);
  border-radius: 18px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(21, 94, 239, 0.06);
}
html[data-theme="dark"] .hiw-payment-banner {
  background: linear-gradient(135deg, rgba(56, 139, 253, 0.10) 0%, rgba(11, 44, 92, 0.3) 100%);
  border-color: rgba(56, 139, 253, 0.25);
}
.ep-badge-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ep-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: #155EEF;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
html[data-theme="dark"] .ep-tag {
  background: #388BFD;
  color: #081426;
}
.ep-details {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ep-num {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink, #0f172a);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .ep-num {
  color: #F1F5F9;
}
.ep-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-solid, #ffffff);
  color: #155EEF;
  border: 1px solid rgba(21, 94, 239, 0.3);
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.ep-copy-btn:hover {
  background: #155EEF;
  color: #ffffff;
  border-color: #155EEF;
  transform: translateY(-1px);
}
html[data-theme="dark"] .ep-copy-btn {
  background: #142236;
  color: #388BFD;
  border-color: rgba(56, 139, 253, 0.3);
}
html[data-theme="dark"] .ep-copy-btn:hover {
  background: #388BFD;
  color: #081426;
  border-color: #388BFD;
}
.ep-copy-btn svg,
.ep-copy-btn i {
  width: 14px;
  height: 14px;
}
.ep-note {
  font-size: 0.85rem;
  color: var(--muted, #64748B);
  margin: 0;
  font-weight: 500;
}
html[data-theme="dark"] .ep-note {
  color: #94A3B8;
}

/* ==========================================================================
   Dashboard Modern Lower Grid & Exam Access (EduXperti)
   ========================================================================== */
.exam-card {
  position: relative;
  background: var(--surface-solid, #ffffff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.exam-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(13, 183, 165, 0.12);
}
.exam-card.is-unlocked {
  border: 1.5px solid #0DB7A5 !important;
  box-shadow: 0 4px 22px rgba(13, 183, 165, 0.16) !important;
}
html[data-theme="dark"] .exam-card.is-unlocked {
  border-color: #388BFD !important;
  box-shadow: 0 4px 26px rgba(56, 139, 253, 0.22) !important;
}
.exam-card.is-locked {
  opacity: 0.92;
  border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="dark"] .exam-card.is-locked {
  border-color: rgba(255, 255, 255, 0.08);
}
.exam-card .row-between h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink, #0f172a);
}
.exam-card .bar {
  background: rgba(13, 183, 165, 0.12) !important;
  height: 8px !important;
  border-radius: 999px !important;
  overflow: hidden;
  margin: 4px 0 2px;
}
.exam-card .bar span {
  display: block;
  height: 100%;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #0DB7A5, #0ea5e9) !important;
  transition: width 0.4s ease;
}
.badge-locked,
.badge-published {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.badge-locked {
  background: rgba(100, 116, 139, 0.12);
  color: #64748B;
}
.badge-locked svg, .badge-locked i { width: 12px; height: 12px; }
.badge-published {
  background: rgba(13, 183, 165, 0.15);
  color: #0DB7A5;
}
.badge-published svg, .badge-published i { width: 12px; height: 12px; }
.btn-unlock-exam {
  background: linear-gradient(135deg, #0DB7A5 0%, #12346B 100%) !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.btn-unlock-exam svg, .btn-unlock-exam i { width: 13px; height: 13px; }

/* -- Compact SaaS Upgrade Strip (Get All Access) ------------- */
.dash-upgrade-strip,
.all-access-banner,
.upgrade-banner {
  background: linear-gradient(135deg, #103866 0%, #0d2b4f 55%, #05463f 100%) !important;
  border: 1px solid rgba(13, 183, 165, 0.35) !important;
  border-radius: 14px !important;
  padding: 14px 22px !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: 20px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px -6px rgba(16, 56, 102, 0.3) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.dash-upgrade-strip:hover,
.all-access-banner:hover,
.upgrade-banner:hover {
  border-color: rgba(56, 139, 253, 0.5) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 28px -4px rgba(13, 183, 165, 0.35) !important;
}

.upgrade-strip-left,
.allaccess-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.upgrade-icon-pill,
.allaccess-star-badge {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: rgba(13, 183, 165, 0.18) !important;
  border: 1px solid rgba(13, 183, 165, 0.35) !important;
  color: #388BFD !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 14px rgba(13, 183, 165, 0.25) !important;
}
.upgrade-icon-pill svg,
.upgrade-icon-pill i,
.allaccess-star-badge svg,
.allaccess-star-badge i {
  width: 20px !important;
  height: 20px !important;
}

.upgrade-text-wrap,
.allaccess-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.upgrade-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.upgrade-title-row h4,
.upgrade-title-row h3,
.allaccess-info h3 {
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.upgrade-price-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(13, 183, 165, 0.22) !important;
  border: 1px solid rgba(56, 139, 253, 0.4) !important;
  color: #388BFD !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

.upgrade-text-wrap p,
.allaccess-info p {
  font-size: 0.82rem !important;
  color: #cbd5e1 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.upgrade-strip-btn,
.allaccess-upgrade-btn {
  background: linear-gradient(135deg, #0DB7A5 0%, #155EEF 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  box-shadow: 0 4px 14px rgba(13, 183, 165, 0.35) !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
.upgrade-strip-btn:hover,
.allaccess-upgrade-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(13, 183, 165, 0.55) !important;
  filter: brightness(1.06) !important;
}
.upgrade-strip-btn svg,
.upgrade-strip-btn i,
.allaccess-upgrade-btn svg,
.allaccess-upgrade-btn i {
  width: 14px !important;
  height: 14px !important;
}

@media (max-width: 768px) {
  .dash-upgrade-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
    gap: 14px !important;
  }
  .upgrade-strip-btn {
    justify-content: center !important;
    width: 100% !important;
  }
}

/* Recent Activity & Payment Widgets */
.quiz-score-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 12px 14px;
  border-radius: 12px;
  transition: background 0.18s ease;
}
.quiz-score-item:hover {
  background: rgba(13, 183, 165, 0.05);
}
.review-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #0DB7A5;
  background: rgba(13, 183, 165, 0.1);
  padding: 4px 9px;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin-left: 6px;
}
.quiz-score-item:hover .review-pill {
  background: #0DB7A5;
  color: #ffffff;
}
.review-pill svg, .review-pill i {
  width: 12px;
  height: 12px;
}

.pay-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.pay-icon-box.is-approved {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
}
.pay-icon-box.is-pending {
  background: rgba(234, 179, 8, 0.14);
  color: #ca8a04;
}
.pay-icon-box.is-rejected {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
}
.pay-icon-box svg, .pay-icon-box i {
  width: 18px;
  height: 18px;
}
.pay-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.94rem;
}
.pay-amount {
  color: #0DB7A5;
  font-weight: 700;
}
.pay-receipt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 6px;
  padding: 3px 8px;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #64748B;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .pay-receipt-badge {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
}
.badge-approved-clean {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}
.badge-approved-clean svg, .badge-approved-clean i { width: 13px; height: 13px; }
.badge-pending-clean {
  background: rgba(234, 179, 8, 0.14);
  color: #ca8a04;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}
.badge-pending-clean svg, .badge-pending-clean i { width: 13px; height: 13px; }
.badge-rejected-clean {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}
.badge-rejected-clean svg, .badge-rejected-clean i { width: 13px; height: 13px; }

/* Announcements Empty Card */
.announcements-empty-card {
  background: var(--surface-solid, #ffffff);
  border: 1px dashed var(--line, rgba(15, 23, 42, 0.12));
  border-radius: 16px;
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
html[data-theme="dark"] .announcements-empty-card {
  background: #0f1e33;
  border-color: rgba(255, 255, 255, 0.1);
}
.annc-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(100, 116, 139, 0.1);
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
html[data-theme="dark"] .annc-empty-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
}
.annc-empty-icon svg, .annc-empty-icon i {
  width: 22px;
  height: 22px;
}
.announcements-empty-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
  margin: 0 0 4px;
}
html[data-theme="dark"] .announcements-empty-card h4 {
  color: #F1F5F9;
}
.announcements-empty-card p {
  font-size: 0.82rem;
  color: var(--muted, #64748B);
  margin: 0;
}
html[data-theme="dark"] .announcements-empty-card p {
  color: #94A3B8;
}

.recent-topic-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(13, 183, 165, 0.1);
  color: #0DB7A5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.recent-topic-icon svg, .recent-topic-icon i {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Clean Minimalist SaaS Metric Cards
   ========================================================================== */
.dash-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 18px 0 24px;
}

.metric-clean-card {
  background: var(--surface-solid, #ffffff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.metric-clean-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
  border-color: rgba(13, 183, 165, 0.35);
}
html[data-theme="dark"] .metric-clean-card {
  background: #0f1e33;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .metric-clean-card:hover {
  border-color: rgba(56, 139, 253, 0.35);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}

.m-icon-square {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.metric-clean-card:hover .m-icon-square {
  transform: scale(1.05);
}
.m-icon-square svg,
.m-icon-square i {
  width: 20px;
  height: 20px;
}

/* Palette styles for icons */
.m-teal {
  background: rgba(13, 183, 165, 0.12);
  color: #0DB7A5;
  border: 1px solid rgba(13, 183, 165, 0.25);
}
.m-cyan {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.25);
}
html[data-theme="dark"] .m-cyan {
  color: #38bdf8;
}
.m-blue {
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.25);
}
html[data-theme="dark"] .m-blue {
  color: #818cf8;
}
.m-amber {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
html[data-theme="dark"] .m-amber {
  color: #fbbf24;
}

.m-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.m-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted, #64748B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="dark"] .m-label {
  color: #94A3B8;
}

.m-num-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.m-num-row h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ink, #0f172a);
  margin: 0;
  line-height: 1.15;
  font-family: var(--serif, inherit);
  letter-spacing: -0.01em;
}
html[data-theme="dark"] .m-num-row h3 {
  color: #F8FAFC;
}
.m-num-row h3 small {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted, #64748B);
  margin-left: 2px;
}

/* Palette tags */
.m-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.m-tag-teal {
  background: rgba(13, 183, 165, 0.12);
  color: #0DB7A5;
}
.m-tag-cyan {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
}
html[data-theme="dark"] .m-tag-cyan {
  color: #38bdf8;
}
.m-tag-blue {
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
}
html[data-theme="dark"] .m-tag-blue {
  color: #818cf8;
}
.m-tag-amber {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}
html[data-theme="dark"] .m-tag-amber {
  color: #fbbf24;
}

@media (max-width: 992px) {
  .dash-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 540px) {
  .dash-metrics-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}


/* -------------------------------------------------------------------------
   BOOK CARDS: DYNAMIC LIGHT/DARK MODE CONTRAST SYNC
   ------------------------------------------------------------------------- */
html,
html[data-theme="light"] {
  --book-card-bg: #ffffff;
  --book-card-border: #e2e8f0;
  --book-title-color: #0f172a;
  --book-subtext-color: #64748b;
  --book-price-color: #155EEF;
  --book-stock-color: #10b981;
  --book-card-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

html[data-theme="dark"] {
  --book-card-bg: #0f172a !important;
  --book-card-border: rgba(255, 255, 255, 0.08) !important;
  --book-title-color: #f8fafc !important;
  --book-subtext-color: #94a3b8 !important;
  --book-price-color: #388BFD !important;
  --book-stock-color: #34d399 !important;
  --book-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* Component Binding */
.book-item-card,
.book-card,
.bk-card,
[class*="book-card"],
[class*="bk-card"] {
  background: var(--book-card-bg) !important;
  border: 1px solid var(--book-card-border) !important;
  box-shadow: var(--book-card-shadow) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.25s ease !important;
}

/* Book Title */
.book-item-card h3,
.book-item-card h4,
.book-card h3,
.book-card h4,
.bk-card h3,
.bk-card h4,
.book-title,
[class*="book-card"] h3,
[class*="book-card"] h4,
[class*="bk-card"] h3,
[class*="bk-card"] h4 {
  color: var(--book-title-color) !important;
  font-weight: 700 !important;
  transition: color 0.3s ease !important;
}

/* Author & Sub-labels */
.book-item-card p,
.book-card p,
.bk-card p,
.book-author,
.by-author,
.bk-card .meta,
[class*="book-card"] .author,
[class*="book-card"] p,
[class*="bk-card"] .meta,
[class*="bk-card"] p {
  color: var(--book-subtext-color) !important;
  transition: color 0.3s ease !important;
}

/* Format Label */
.bk-card .bk-fmt,
.book-card .bk-fmt,
[class*="book-card"] .bk-fmt {
  color: var(--book-price-color) !important;
  font-weight: 700 !important;
}

/* Prices */
.book-item-card .price,
.book-card .price,
.bk-card .bk-price,
.bk-card .bk-price b,
[class*="book-card"] [class*="price"],
[class*="bk-card"] [class*="price"] {
  color: var(--book-price-color) !important;
  font-weight: 800 !important;
}

.bk-card .bk-price s,
.book-card .price s,
[class*="book-card"] [class*="price"] s {
  color: var(--book-subtext-color) !important;
  opacity: 0.75;
}

/* Stock Status */
.book-item-card .stock,
.book-card .stock,
.bk-card .bk-stock,
[class*="book-card"] [class*="stock"],
[class*="bk-card"] [class*="stock"] {
  color: var(--book-stock-color) !important;
}

/* Star Ratings */
.book-item-card .stars,
.book-card .stars,
.bk-card .stars,
[class*="book-card"] .stars,
[class*="bk-card"] .stars {
  color: #f59e0b !important;
}


/* =========================================================================
   EDUEXPERTI - MODERN 3D AUTHENTICATION STYLES (LOGIN & SIGN UP)
   ========================================================================= */
:root,
html,
html[data-theme="light"] {
  --auth-page-bg: #F4FAFF;
  --auth-card-bg: #FFFFFF;
  --auth-card-border: #D9E7F5;
  --auth-card-shadow: 0 10px 30px -5px rgba(16, 59, 103, 0.08);
  --auth-heading: #102A56;
  --auth-body: #647FA2;
  --auth-input-bg: #FFFFFF;
  --auth-input-border: #D9E7F5;
  --auth-input-text: #102A56;
  --auth-input-focus: #0BBBAA;
  --nav-height: 74px;
}

html[data-theme="dark"] {
  --auth-page-bg: #0b1727;
  --auth-card-bg: #0f1f38;
  --auth-card-border: rgba(255, 255, 255, 0.08);
  --auth-card-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  --auth-heading: #F8FAFC;
  --auth-body: #94A3B8;
  --auth-input-bg: #091322;
  --auth-input-border: rgba(255, 255, 255, 0.12);
  --auth-input-text: #F8FAFC;
  --auth-input-focus: #388BFD;
}

.auth-main-wrapper,
.main.auth-main-wrapper {
  padding-top: calc(var(--nav-height, 74px) + 36px) !important;
  padding-bottom: 64px !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
}

.auth-page-wrapper {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  box-sizing: border-box;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.promo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.promo-heading {
  font-size: 42px;
  font-weight: 900;
  color: var(--auth-heading);
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: -0.025em;
  font-family: var(--serif, 'Plus Jakarta Sans', sans-serif);
}

.text-teal-gradient {
  background: linear-gradient(135deg, #0BBBAA 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.promo-desc {
  font-size: 16px;
  color: var(--auth-body);
  max-width: 440px;
  line-height: 1.55;
  margin: 0 0 28px;
}

.promo-stage-3d {
  width: 100%;
  max-width: 460px;
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  user-select: none;
}

.promo-art-container {
  width: 100%;
  max-width: 440px;
  transition: transform 0.25s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

@keyframes floatSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes floatSubtleReverse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.float-elem-left { animation: floatSubtle 4.5s ease-in-out infinite; }
.float-elem-right { animation: floatSubtleReverse 5s ease-in-out infinite; }
.float-particle-1 { animation: floatSubtle 3.8s ease-in-out infinite; }
.float-particle-2 { animation: floatSubtleReverse 4.2s ease-in-out infinite; }

.auth-card-container {
  background: var(--auth-card-bg);
  border: 1px solid var(--auth-card-border);
  box-shadow: var(--auth-card-shadow);
  border-radius: 24px;
  padding: 40px 36px;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.auth-card-container h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--auth-heading);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
  font-family: var(--serif, 'Plus Jakarta Sans', sans-serif);
}

.auth-card-container .auth-subtitle {
  font-size: 14px;
  color: var(--auth-body);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.auth-input-group {
  margin-bottom: 18px;
  position: relative;
}

.auth-input-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--auth-heading);
  margin-bottom: 7px;
}

.auth-input-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-inner .input-icon {
  position: absolute;
  left: 14px;
  color: var(--auth-body);
  width: 18px;
  height: 18px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.auth-input-inner input {
  width: 100%;
  padding: 13px 14px 13px 44px;
  border: 1px solid var(--auth-input-border);
  border-radius: 12px;
  background: var(--auth-input-bg);
  color: var(--auth-input-text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  box-sizing: border-box;
  font-family: inherit;
}

.auth-input-inner input:focus {
  border-color: var(--auth-input-focus);
  box-shadow: 0 0 0 3.5px rgba(11, 187, 170, 0.16);
}

.pwd-toggle-btn {
  position: absolute;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--auth-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
  transition: color 0.2s ease;
  z-index: 2;
}

.pwd-toggle-btn:hover {
  color: var(--auth-input-focus);
}

.pwd-toggle-btn i,
.pwd-toggle-btn svg {
  width: 18px;
  height: 18px;
}

.auth-actions-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -8px;
  margin-bottom: 20px;
}

.auth-forgot-link {
  font-size: 13px;
  font-weight: 600;
  color: #0DB7A5;
  text-decoration: none;
  transition: color 0.2s ease;
}

.auth-forgot-link:hover {
  color: #0ea5e9;
  text-decoration: underline;
}

.auth-helper-note {
  font-size: 12px;
  color: var(--auth-body);
  margin: -10px 0 18px 2px;
  line-height: 1.45;
}

.auth-btn-primary {
  width: 100%;
  background: linear-gradient(135deg, #0BBBAA 0%, #103B67 100%);
  color: #ffffff !important;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px -4px rgba(11, 187, 170, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
}

.auth-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -4px rgba(11, 187, 170, 0.55);
}

.auth-btn-primary:active {
  transform: translateY(0);
}

.auth-btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 22px 0 18px;
  color: var(--auth-body);
  font-size: 12px;
  font-weight: 500;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--auth-card-border);
}

.auth-divider span {
  padding: 0 12px;
  letter-spacing: 0.02em;
}

.auth-divider-simple {
  margin: 24px 0 18px;
  border-bottom: 1px solid var(--auth-card-border);
}

.auth-demo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.auth-demo-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--auth-input-border);
  background: var(--auth-input-bg);
  color: var(--auth-heading);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.auth-demo-btn:hover {
  border-color: var(--auth-input-focus);
  color: var(--auth-input-focus);
  background: rgba(11, 187, 170, 0.06);
}

.auth-footer-text {
  text-align: center;
  font-size: 13.5px;
  color: var(--auth-body);
  margin: 0;
}

.auth-footer-text a {
  color: #0DB7A5;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.auth-footer-text a:hover {
  color: #0ea5e9;
  text-decoration: underline;
}

.auth-alert-err {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 18px;
}

html[data-theme="dark"] .auth-alert-err {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

@media (max-width: 900px) {
  .auth-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .promo-col {
    text-align: center;
    align-items: center;
  }
  .promo-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .promo-stage-3d {
    max-width: 360px;
    margin: 0 auto;
  }
}

@media (max-width: 520px) {
  .auth-main-wrapper,
  .main.auth-main-wrapper {
    padding-top: calc(var(--nav-height, 74px) + 20px) !important;
    padding-inline: 14px !important;
  }
  .auth-card-container {
    padding: 28px 20px;
    border-radius: 18px;
  }
  .promo-heading {
    font-size: 32px;
  }
  .promo-stage-3d {
    max-width: 290px;
  }
}

/* =========================================================================
   EDUEXPERTI - MODERN COSMIC 3D AUTHENTICATION STYLES (LOGIN & SIGN UP)
   MATCHING REFERENCE DESIGN 1-TO-1 (LIGHT & DARK MODES)
   ========================================================================= */

/* Top Floating Pill Navbar */
body:not(.is-admin) header:not(.admin-topbar),
body:not(.is-admin) header.site-header,
body:not(.is-admin) header.topbar {
  position: fixed !important;
  top: 18px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 16px !important;
  box-shadow: none !important;
}

body:not(.is-admin) header:not(.admin-topbar) > div,
body:not(.is-admin) header.topbar > .topbar-inner,
body:not(.is-admin) .site-header > .header-inner,
body:not(.is-admin) .navbar-pill,
body:not(.is-admin) .topbar-inner {
  width: 100% !important;
  max-width: 1160px !important;
  height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

html,
html[data-theme="light"] header:not(.admin-topbar) > div,
html[data-theme="light"] header.topbar > .topbar-inner,
html[data-theme="light"] .topbar-inner,
html[data-theme="light"] .site-header > .header-inner {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 8px 24px -4px rgba(16, 56, 102, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html[data-theme="dark"] header:not(.admin-topbar) > div,
html[data-theme="dark"] header.topbar > .topbar-inner,
html[data-theme="dark"] .topbar-inner,
html[data-theme="dark"] .site-header > .header-inner {
  background: rgba(15, 31, 56, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

header:not(.admin-topbar) a[aria-label="EduXperti home"],
header:not(.admin-topbar) a.brand {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

header:not(.admin-topbar) a[aria-label="EduXperti home"] img,
header:not(.admin-topbar) a.brand img,
header:not(.admin-topbar) img.brand-logo,
.brand-logo {
  height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

header:not(.admin-topbar) img.brand-logo.dark,
.brand-logo.dark,
.admin-sidebar-logo.dark {
  display: none !important;
}

html[data-theme="dark"] header:not(.admin-topbar) img.brand-logo.dark,
html[data-theme="dark"] .brand-logo.dark,
html[data-theme="dark"] .admin-sidebar-logo.dark {
  display: block !important;
}

html[data-theme="dark"] header:not(.admin-topbar) img.brand-logo.light,
html[data-theme="dark"] .brand-logo.light,
html[data-theme="dark"] .admin-sidebar-logo.light {
  display: none !important;
}

@media (min-width: 769px) {
  header:not(.admin-topbar) nav,
  .site-header nav,
  header:not(.admin-topbar) .mainnav {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}

header:not(.admin-topbar) nav a,
.site-header nav a,
header:not(.admin-topbar) .mainnav a {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

html[data-theme="dark"] header:not(.admin-topbar) nav a:not(.btn):not(.btn-primary),
html[data-theme="dark"] .site-header nav a:not(.btn):not(.btn-primary),
html[data-theme="dark"] header:not(.admin-topbar) .mainnav a:not(.btn):not(.btn-primary) {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] header:not(.admin-topbar) nav a:not(.btn):not(.btn-primary):hover,
html[data-theme="dark"] .site-header nav a:not(.btn):not(.btn-primary):hover,
html[data-theme="dark"] header:not(.admin-topbar) .mainnav a:not(.btn):not(.btn-primary):hover {
  color: #388BFD !important;
}

/* Auth Page Body & Hide Standard Footer */
body.page-auth {
  position: relative;
  min-height: 100vh;
  background-color: #030812;
  color: #F8FAFC;
  overflow-x: hidden;
}

html[data-theme="light"] body.page-auth {
  background-color: #F0F8FF;
  color: #0F172A;
}

body.page-auth .site-footer {
  display: none !important;
}

/* Cosmic Background Atmospheric Waves & Celestial Elements */
.auth-cosmic-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

body.page-auth:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: 
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(6, 182, 212, 0.18), transparent 70%),
    radial-gradient(circle 500px at 15% 45%, rgba(13, 148, 136, 0.14), transparent 60%),
    radial-gradient(circle 600px at 85% 65%, rgba(14, 165, 233, 0.12), transparent 60%),
    radial-gradient(circle 400px at 50% 100%, rgba(6, 182, 212, 0.15), transparent 70%);
}

html[data-theme="light"] body.page-auth:before {
  background: 
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(6, 182, 212, 0.12), transparent 70%),
    radial-gradient(circle 500px at 15% 45%, rgba(13, 148, 136, 0.08), transparent 60%),
    radial-gradient(circle 600px at 85% 65%, rgba(14, 165, 233, 0.08), transparent 60%),
    radial-gradient(circle 400px at 50% 100%, rgba(6, 182, 212, 0.1), transparent 70%);
}

/* Saturn Planet in Top Right */
.cosmic-sphere.saturn-sphere {
  position: absolute;
  top: 45px;
  right: 4%;
  width: 90px;
  height: 90px;
}

.sphere-body {
  position: absolute;
  width: 52px;
  height: 52px;
  top: 19px;
  left: 19px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #22D3EE, #0284C7 60%, #031D38 90%);
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.4), inset -6px -6px 14px rgba(0, 0, 0, 0.8);
}

.sphere-ring {
  position: absolute;
  width: 96px;
  height: 24px;
  top: 33px;
  left: -3px;
  border-radius: 50%;
  border: 3.5px solid rgba(34, 211, 238, 0.65);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.4);
  transform: rotate(-25deg);
}

html[data-theme="light"] .sphere-body {
  background: radial-gradient(circle at 35% 35%, #93C5FD, #38BDF8 60%, #BFDBFE 90%);
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.35);
}

html[data-theme="light"] .sphere-ring {
  border-color: rgba(56, 189, 248, 0.5);
}

/* Glowing Orb in Bottom Left */
.cosmic-sphere.orb-sphere {
  position: absolute;
  bottom: 80px;
  left: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(20, 184, 166, 0.35), rgba(6, 182, 212, 0.15) 50%, transparent 80%);
  filter: blur(14px);
}

/* Subtle Particles */
.cosmic-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(56, 139, 253, 0.7);
  box-shadow: 0 0 10px rgba(56, 139, 253, 0.8);
}
.cosmic-particle.p1 { width: 5px; height: 5px; top: 180px; left: 8%; opacity: 0.6; }
.cosmic-particle.p2 { width: 4px; height: 4px; top: 320px; right: 12%; opacity: 0.5; }
.cosmic-particle.p3 { width: 6px; height: 6px; bottom: 160px; right: 35%; opacity: 0.7; }

/* Waves SVG at Bottom */
.cosmic-wave-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 260px;
}

.wave-body {
  fill: #020b18;
  opacity: 0.95;
}

html[data-theme="light"] .wave-body {
  fill: #FFFFFF;
  opacity: 0.95;
}

html[data-theme="light"] .wave-glow {
  stroke: rgba(13, 148, 136, 0.35) !important;
}

/* Main Container Universal Safe Layout */
.auth-page-wrapper,
main.auth-main,
.auth-main-wrapper,
.auth-container {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 110px 24px 40px 24px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.auth-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 48px !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
}

/* Left Column: Promotional Stage */
.auth-promo-col,
.promo-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.auth-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
  background: rgba(15, 31, 56, 0.7);
  border: 1px solid rgba(56, 139, 253, 0.3);
  color: #388BFD;
  box-shadow: 0 4px 16px rgba(56, 139, 253, 0.15);
  backdrop-filter: blur(8px);
}

html[data-theme="light"] .auth-badge-pill {
  background: rgba(240, 253, 250, 0.9);
  border: 1px solid rgba(20, 184, 166, 0.35);
  color: #0D9488;
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.1);
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #388BFD;
  box-shadow: 0 0 8px #388BFD;
}

html[data-theme="light"] .badge-dot {
  background: #0D9488;
  box-shadow: 0 0 8px #0D9488;
}

.auth-promo-heading {
  font-size: clamp(34px, 3.8vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.02em !important;
  color: #F8FAFC !important;
  font-family: var(--serif, 'Plus Jakarta Sans', sans-serif) !important;
}

html[data-theme="light"] .auth-promo-heading {
  color: #0F172A !important;
}

.text-teal-gradient {
  background: linear-gradient(135deg, #00C6B2 0%, #06B6D4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.auth-promo-sub {
  font-size: 15px !important;
  line-height: 1.6 !important;
  max-width: 500px !important;
  margin: 0 0 28px !important;
  color: #94A3B8 !important;
}

html[data-theme="light"] .auth-promo-sub {
  color: #475569 !important;
}

/* 2-Part Visual Section (Pills on Left, 3D Art on Right) */
.auth-visual-showcase {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  position: relative;
  width: 100%;
}

.auth-feature-pills {
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1.1;
  max-width: 320px;
  z-index: 2;
}

.feature-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(11, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

html[data-theme="light"] .feature-pill {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 16px rgba(16, 56, 102, 0.04);
}

.feature-pill:hover {
  transform: translateX(4px);
  border-color: rgba(56, 139, 253, 0.35);
}

.feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: #388BFD;
}

html[data-theme="light"] .feature-icon {
  background: rgba(13, 148, 136, 0.1);
  border: 1px solid rgba(13, 148, 136, 0.25);
  color: #0D9488;
}

.feature-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
  color: #F8FAFC;
}

html[data-theme="light"] .feature-text strong {
  color: #0F172A;
}

.feature-text p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #94A3B8;
}

html[data-theme="light"] .feature-text p {
  color: #64748B;
}

/* Handwritten Accent Note */
.auth-handwritten-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-left: 6px;
}

.handwritten-text {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #94A3B8;
  transform: rotate(-2deg);
}

html[data-theme="light"] .handwritten-text {
  color: #64748B;
}

.handwritten-arrow {
  color: #388BFD;
  flex-shrink: 0;
}

html[data-theme="light"] .handwritten-arrow {
  color: #0D9488;
}

/* 3D Artwork Stage */
.auth-artwork-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.auth-artwork-img {
  width: 100%;
  height: auto;
  max-width: 350px;
  object-fit: contain;
  filter: drop-shadow(0 15px 35px rgba(6, 182, 212, 0.25));
  animation: float3DArt 5s ease-in-out infinite;
  transition: transform 0.25s ease-out;
}

@keyframes float3DArt {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.4deg); }
}

/* Right Column: Glassmorphism Auth Card */
.auth-card-container {
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  border-radius: 24px !important;
  padding: 36px 32px !important;
  position: relative !important;
  z-index: 2 !important;
  background: rgba(11, 23, 42, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html[data-theme="light"] .auth-card-container {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 20px 45px -10px rgba(16, 56, 102, 0.08) !important;
}

.auth-card-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.02em !important;
  color: #F8FAFC !important;
  font-family: var(--serif, 'Plus Jakarta Sans', sans-serif) !important;
}

html[data-theme="light"] .auth-card-title {
  color: #0F172A !important;
}

.wave-emoji {
  display: inline-block;
}

.auth-card-sub {
  font-size: 14px !important;
  margin: 0 0 24px !important;
  color: #94A3B8 !important;
}

html[data-theme="light"] .auth-card-sub {
  color: #64748B !important;
}

/* Error Alerts */
.auth-alert-err {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 18px;
}

html[data-theme="light"] .auth-alert-err {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #ef4444;
}

/* Inputs & Floating Icons */
.auth-input-group {
  margin-bottom: 18px;
  position: relative;
}

.auth-input-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #E2E8F0;
  margin-bottom: 7px;
}

html[data-theme="light"] .auth-input-group label {
  color: #1E293B;
}

.auth-input-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-inner .input-icon {
  position: absolute;
  left: 14px;
  color: #64748B;
  pointer-events: none;
  display: flex;
  align-items: center;
  width: 18px;
  height: 18px;
}

.auth-input-inner input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.2s ease;
  outline: none;
  box-sizing: border-box;
  background: rgba(15, 31, 56, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #F8FAFC;
  font-family: inherit;
}

.auth-input-inner input:focus {
  border-color: #388BFD;
  box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.15);
}

html[data-theme="light"] .auth-input-inner input {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #0F172A;
}

html[data-theme="light"] .auth-input-inner input:focus {
  border-color: #0D9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.pwd-toggle-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #64748B;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.pwd-toggle-btn:hover {
  color: #388BFD;
}

/* 3-Point Password Checklist */
.auth-pwd-checklist {
  margin: 8px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #94A3B8;
}

html[data-theme="light"] .chk-item {
  color: #64748B;
}

.chk-icon {
  color: #10B981;
  font-weight: 800;
  font-size: 13px;
}

.auth-actions-row {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 18px;
}

.auth-forgot-link {
  font-size: 13px;
  color: #388BFD;
  text-decoration: none;
  font-weight: 600;
}

.auth-forgot-link:hover {
  text-decoration: underline;
}

html[data-theme="light"] .auth-forgot-link {
  color: #0D9488;
}

/* Primary Action Button */
.auth-btn-primary {
  width: 100%;
  background: linear-gradient(90deg, #00C6B2 0%, #0077B6 100%);
  color: #ffffff !important;
  padding: 13px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 20px -4px rgba(0, 198, 178, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  font-family: inherit;
}

.auth-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -4px rgba(0, 198, 178, 0.6);
}

.auth-btn-primary:active {
  transform: translateY(0);
}

/* Or Divider */
.auth-or-divider {
  position: relative;
  text-align: center;
  margin: 18px 0 16px;
}

.auth-or-divider:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .auth-or-divider:before {
  background: #E2E8F0;
}

.auth-or-divider span {
  position: relative;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  background: #0b172a;
  color: #64748B;
}

html[data-theme="light"] .auth-or-divider span {
  background: #FFFFFF;
  color: #94A3B8;
}

/* Google Action Button */
.auth-btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  background: rgba(15, 31, 56, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #F8FAFC;
}

.auth-btn-google:hover {
  background: rgba(15, 31, 56, 0.95);
  border-color: rgba(255, 255, 255, 0.22);
}

html[data-theme="light"] .auth-btn-google {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #1E293B;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .auth-btn-google:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
}

/* Footer Link */
.auth-footer-text {
  text-align: center;
  margin: 18px 0 0;
  font-size: 13.5px;
  color: #94A3B8;
}

html[data-theme="light"] .auth-footer-text {
  color: #64748B;
}

.auth-footer-text a {
  color: #388BFD;
  font-weight: 700;
  text-decoration: none;
}

.auth-footer-text a:hover {
  text-decoration: underline;
}

html[data-theme="light"] .auth-footer-text a {
  color: #0D9488;
}

/* Bottom Trust Stats Bar */
.auth-trust-bar {
  margin-top: 56px;
  padding: 24px 0 10px;
  position: relative;
  z-index: 2;
  width: 100%;
}

.trust-bar-header p {
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 18px;
  color: #94A3B8;
}

html[data-theme="light"] .trust-bar-header p {
  color: #64748B;
}

.trust-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}

.trust-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(15, 31, 56, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-theme="light"] .trust-stat-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 4px 14px rgba(16, 56, 102, 0.04);
}

.trust-stat-card .stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.25);
  color: #388BFD;
}

html[data-theme="light"] .trust-stat-card .stat-icon {
  background: rgba(13, 148, 136, 0.08);
  border: 1px solid rgba(13, 148, 136, 0.2);
  color: #0D9488;
}

.stat-num {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  color: #F8FAFC;
}

html[data-theme="light"] .stat-num {
  color: #0F172A;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #94A3B8;
}

html[data-theme="light"] .stat-label {
  color: #64748B;
}

/* Responsive Breakpoints */
@media (max-width: 960px) {
  .auth-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .auth-promo-col {
    align-items: center !important;
    text-align: center !important;
  }
  .auth-promo-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .auth-visual-showcase {
    flex-direction: column-reverse;
    align-items: center;
    gap: 28px;
  }
  .auth-feature-pills {
    max-width: 440px;
    width: 100%;
  }
  .auth-handwritten-note {
    justify-content: center;
  }
  .trust-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 540px) {
  .auth-page-wrapper,
  main.auth-main {
    padding-top: 96px !important;
    padding-inline: 16px !important;
  }
  .auth-card-container {
    padding: 28px 20px !important;
  }
  .trust-stats-grid {
    grid-template-columns: 1fr;
  }
}


/* ======================================================== */
/* EDUXPERTI PREMIUM AUTHENTICATION OVERHAUL                */
/* Visual Depth, Neon-Wave Atmosphere & Glassmorphism       */
/* ======================================================== */

/* 1. Base Body on Auth Pages */
body.page-auth {
  position: relative !important;
  background-color: #030712 !important;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(13, 183, 165, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 10% 40%, rgba(14, 165, 233, 0.16) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(13, 183, 165, 0.18) 0%, transparent 45%),
    linear-gradient(180deg, #040914 0%, #02050b 100%) !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  color: #f8fafc !important;
}

body.page-auth .site-footer {
  display: none !important;
}

/* 2. Universal Fixed Floating Pill Navbar */
body.page-auth header.topbar,
body.page-auth header.site-header {
  position: fixed !important;
  top: 18px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  pointer-events: none !important;
}

body.page-auth header.topbar .topbar-inner,
body.page-auth header.site-header .header-inner {
  width: 100% !important;
  max-width: 1180px !important;
  height: 62px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  background: rgba(6, 18, 36, 0.85) !important;
  border: 1px solid rgba(56, 139, 253, 0.3) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.55), 0 0 25px rgba(56, 139, 253, 0.15) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-auth header.topbar a.brand,
body.page-auth header.site-header a.brand {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

body.page-auth header.topbar img.brand-logo,
body.page-auth header.site-header img.brand-logo {
  height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Theme-aware logo on auth pages */
html:not([data-theme="dark"]) body.page-auth img.brand-logo.dark,
html[data-theme="light"] body.page-auth img.brand-logo.dark {
  display: block !important;
}

html:not([data-theme="dark"]) body.page-auth img.brand-logo.light,
html[data-theme="light"] body.page-auth img.brand-logo.light {
  display: none !important;
}

html[data-theme="dark"] body.page-auth img.brand-logo.light {
  display: block !important;
}

html[data-theme="dark"] body.page-auth img.brand-logo.dark {
  display: none !important;
}

/* In Light Mode Navbar */
html:not([data-theme="dark"]) body.page-auth header.topbar .topbar-inner,
html[data-theme="light"] body.page-auth header.topbar .topbar-inner {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 10px 30px rgba(16, 56, 102, 0.08) !important;
}

html:not([data-theme="dark"]) body.page-auth img.brand-logo.dark,
html[data-theme="light"] body.page-auth img.brand-logo.dark {
  display: block !important;
}

html:not([data-theme="dark"]) body.page-auth img.brand-logo.light,
html[data-theme="light"] body.page-auth img.brand-logo.light {
  display: none !important;
}

/* 3. Authentic Deep Cosmic + Neon Teal Wave Atmosphere */
.auth-page-container {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background-color: #030712 !important;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(13, 183, 165, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 10% 40%, rgba(14, 165, 233, 0.16) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(13, 183, 165, 0.18) 0%, transparent 45%),
    linear-gradient(180deg, #040914 0%, #02050b 100%) !important;
  min-height: 100vh !important;
  padding-top: 130px !important; /* Fully clears the floating navbar across all screens */
  padding-bottom: 50px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Layered Glowing Waves at Bottom (Exact match to reference curves) */
.auth-page-container::before {
  content: '' !important;
  position: absolute !important;
  bottom: -60px !important;
  left: -10% !important;
  width: 120% !important;
  height: 380px !important;
  background: radial-gradient(ellipse at 50% 100%, rgba(13, 183, 165, 0.35) 0%, rgba(6, 78, 119, 0.15) 50%, transparent 80%) !important;
  border-top: 2px solid rgba(56, 139, 253, 0.35) !important;
  border-radius: 50% 50% 0 0 / 60px 60px 0 0 !important;
  box-shadow: 0 -20px 50px rgba(13, 183, 165, 0.25) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Secondary Ambient Neon Horizon Line */
.auth-page-container::after {
  content: '' !important;
  position: absolute !important;
  bottom: 40px !important;
  right: -5% !important;
  width: 70% !important;
  height: 260px !important;
  border-top: 1.5px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 50% 0 0 0 / 50px 0 0 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Light Theme Inversion for Atmosphere */
html:not([data-theme="dark"]) body.page-auth,
html[data-theme="light"] body.page-auth,
html:not([data-theme="dark"]) .auth-page-container,
html[data-theme="light"] .auth-page-container {
  background-color: #f0fdfa !important;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(20, 184, 166, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 10% 40%, rgba(56, 189, 248, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(20, 184, 166, 0.14) 0%, transparent 45%),
    linear-gradient(180deg, #f0fdfa 0%, #e0f2fe 100%) !important;
  color: #0f172a !important;
}

html:not([data-theme="dark"]) .auth-page-container::before,
html[data-theme="light"] .auth-page-container::before {
  background: radial-gradient(ellipse at 50% 100%, rgba(20, 184, 166, 0.22) 0%, rgba(186, 230, 253, 0.15) 50%, transparent 80%) !important;
  border-top: 2px solid rgba(20, 184, 166, 0.45) !important;
  box-shadow: 0 -15px 40px rgba(20, 184, 166, 0.18) !important;
}

html:not([data-theme="dark"]) .auth-page-container::after,
html[data-theme="light"] .auth-page-container::after {
  border-top: 1.5px solid rgba(14, 165, 233, 0.35) !important;
}

/* 4. Inside Centered Content Wrapper */
.auth-page-wrapper,
.register-container-wrap,
.auth-container {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.auth-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 48px !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 5. Celestial Background Elements */
.auth-cosmic-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  overflow: hidden !important;
}

.cosmic-sphere.saturn-sphere {
  position: absolute;
  top: 24px;
  right: 5%;
  width: 110px;
  height: 110px;
  z-index: 2;
  opacity: 0.85;
}

.sphere-body {
  position: absolute;
  width: 58px;
  height: 58px;
  top: 26px;
  left: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #38bdf8 0%, #0284c7 60%, #0369a1 100%);
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.6);
}

.sphere-ring {
  position: absolute;
  top: 45px;
  left: -8px;
  width: 126px;
  height: 22px;
  border-radius: 50%;
  border: 3.5px solid rgba(56, 189, 248, 0.75);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.6);
  transform: rotate(-26deg);
}

.cosmic-sphere.orb-sphere {
  position: absolute;
  bottom: 90px;
  left: 3%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #388BFD 0%, #0f766e 70%, #042f2e 100%);
  box-shadow: 0 0 30px rgba(56, 139, 253, 0.45);
  opacity: 0.65;
}

.cosmic-book.book-left {
  position: absolute;
  bottom: 45px;
  left: 2%;
  opacity: 0.75;
  transform: rotate(-15deg);
  animation: floatBookLeft 8s ease-in-out infinite;
}

.cosmic-book.book-right {
  position: absolute;
  bottom: 30px;
  right: 2%;
  opacity: 0.75;
  transform: rotate(18deg);
  animation: floatBookRight 9s ease-in-out infinite;
}

@keyframes floatBookLeft {
  0%, 100% { transform: translateY(0) rotate(-15deg); }
  50% { transform: translateY(-10px) rotate(-12deg); }
}

@keyframes floatBookRight {
  0%, 100% { transform: translateY(0) rotate(18deg); }
  50% { transform: translateY(-12px) rotate(21deg); }
}

.cosmic-wave-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 280px;
  pointer-events: none;
}

.wave-body {
  fill: rgba(3, 10, 24, 0.75);
}

html:not([data-theme="dark"]) .wave-body,
html[data-theme="light"] .wave-body {
  fill: rgba(235, 248, 255, 0.75);
}

/* 6. Left Promo Column */
.auth-promo-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.auth-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(56, 139, 253, 0.12) !important;
  border: 1px solid rgba(56, 139, 253, 0.3) !important;
  color: #388BFD !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
}

.auth-badge-pill .badge-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #388BFD !important;
  box-shadow: 0 0 10px #388BFD !important;
}

.auth-promo-heading {
  font-size: 44px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  margin: 0 0 14px 0 !important;
}

html:not([data-theme="dark"]) .auth-promo-heading,
html[data-theme="light"] .auth-promo-heading {
  color: #0F172A !important;
}

.text-teal-gradient {
  background: linear-gradient(135deg, #388BFD 0%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.auth-promo-sub {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #94a3b8 !important;
  margin: 0 0 28px 0 !important;
  max-width: 480px !important;
}

html:not([data-theme="dark"]) .auth-promo-sub,
html[data-theme="light"] .auth-promo-sub {
  color: #475569 !important;
}

.auth-visual-showcase {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
}

.auth-feature-pills {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 220px !important;
}

.feature-pill {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  background: rgba(10, 24, 48, 0.65) !important;
  border: 1px solid rgba(56, 139, 253, 0.2) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all 0.25s ease !important;
}

html:not([data-theme="dark"]) .feature-pill,
html[data-theme="light"] .feature-pill {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 16px rgba(16, 56, 102, 0.06) !important;
}

.feature-pill:hover {
  transform: translateX(4px) !important;
  border-color: rgba(56, 139, 253, 0.45) !important;
  box-shadow: 0 6px 20px rgba(56, 139, 253, 0.15) !important;
}

.feature-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(56, 139, 253, 0.15) !important;
  color: #388BFD !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.feature-text strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

html:not([data-theme="dark"]) .feature-text strong,
html[data-theme="light"] .feature-text strong {
  color: #0f172a !important;
}

.feature-text span {
  display: block !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}

html:not([data-theme="dark"]) .feature-text span,
html[data-theme="light"] .feature-text span {
  color: #64748b !important;
}

.auth-artwork-canvas {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  perspective: 1000px !important;
}

.auth-artwork-img {
  max-width: 290px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 15px 35px rgba(13, 183, 165, 0.35)) !important;
  animation: float3DArt 6s ease-in-out infinite !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes float3DArt {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.4deg); }
}

.auth-handwritten-note {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 18px !important;
  color: #539BF5 !important;
  font-family: 'Caveat', cursive, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

html:not([data-theme="dark"]) .auth-handwritten-note,
html[data-theme="light"] .auth-handwritten-note {
  color: #0d9488 !important;
}

.handwritten-arrow {
  color: #388BFD !important;
  filter: drop-shadow(0 0 6px rgba(56, 139, 253, 0.5)) !important;
}

/* 7. Right Form Card (Glassmorphism) */
.auth-card {
  background: rgba(6, 18, 38, 0.75) !important;
  border: 1px solid rgba(56, 139, 253, 0.24) !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.6), 0 0 30px rgba(13, 183, 165, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 36px 32px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html:not([data-theme="dark"]) .auth-card,
html[data-theme="light"] .auth-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 20px 50px -10px rgba(16, 56, 102, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

.auth-card-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html:not([data-theme="dark"]) .auth-card-title,
html[data-theme="light"] .auth-card-title {
  color: #0f172a !important;
}

.auth-card-sub {
  font-size: 14px !important;
  color: #94a3b8 !important;
  margin: 0 0 24px 0 !important;
}

html:not([data-theme="dark"]) .auth-card-sub,
html[data-theme="light"] .auth-card-sub {
  color: #64748b !important;
}

.auth-form-group {
  margin-bottom: 18px !important;
}

.auth-form-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  margin-bottom: 6px !important;
}

html:not([data-theme="dark"]) .auth-form-label,
html[data-theme="light"] .auth-form-label {
  color: #334155 !important;
}

.auth-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.input-icon-lead {
  position: absolute !important;
  left: 14px !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none !important;
}

.auth-input {
  width: 100% !important;
  height: 48px !important;
  background: rgba(10, 24, 48, 0.7) !important;
  border: 1px solid rgba(56, 139, 253, 0.22) !important;
  border-radius: 12px !important;
  padding: 0 14px 0 42px !important;
  font-size: 14px !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

html:not([data-theme="dark"]) .auth-input,
html[data-theme="light"] .auth-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.auth-input:focus {
  outline: none !important;
  border-color: #388BFD !important;
  box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.22), 0 0 15px rgba(56, 139, 253, 0.15) !important;
  background: rgba(10, 24, 48, 0.9) !important;
}

html:not([data-theme="dark"]) .auth-input:focus,
html[data-theme="light"] .auth-input:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2) !important;
  background: #ffffff !important;
}

.auth-input::placeholder {
  color: #64748b !important;
}

html:not([data-theme="dark"]) .auth-input::placeholder,
html[data-theme="light"] .auth-input::placeholder {
  color: #94a3b8 !important;
}

.pwd-toggle-btn {
  position: absolute !important;
  right: 12px !important;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  padding: 4px !important;
}

.pwd-toggle-btn:hover {
  color: #388BFD !important;
}

.auth-form-links {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 8px !important;
}

.auth-forgot-link {
  font-size: 13px !important;
  color: #388BFD !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.auth-forgot-link:hover {
  text-decoration: underline !important;
}

/* Password requirements checklist (Register) */
.chk-list,
.auth-password-requirements {
  margin: 12px 0 18px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.chk-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}

.chk-icon {
  color: #388BFD !important;
  font-weight: 700 !important;
}

.auth-btn-primary {
  width: 100% !important;
  height: 50px !important;
  background: linear-gradient(135deg, #0db7a5 0%, #0088cc 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 25px -5px rgba(13, 183, 165, 0.45) !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.auth-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px -4px rgba(13, 183, 165, 0.65) !important;
}

.auth-divider {
  display: flex !important;
  align-items: center !important;
  margin: 20px 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.auth-divider::before,
.auth-divider::after {
  content: '' !important;
  flex: 1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html:not([data-theme="dark"]) .auth-divider::before,
html[data-theme="light"] .auth-divider::before,
html:not([data-theme="dark"]) .auth-divider::after,
html[data-theme="light"] .auth-divider::after {
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
}

.auth-divider span {
  padding: 0 12px !important;
}

.auth-btn-google {
  width: 100% !important;
  height: 48px !important;
  background: rgba(10, 24, 48, 0.6) !important;
  border: 1px solid rgba(56, 139, 253, 0.22) !important;
  border-radius: 12px !important;
  color: #f1f5f9 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.2s ease !important;
}

html:not([data-theme="dark"]) .auth-btn-google,
html[data-theme="light"] .auth-btn-google {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

.auth-btn-google:hover {
  background: rgba(10, 24, 48, 0.9) !important;
  border-color: rgba(56, 139, 253, 0.45) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

.auth-card-footer {
  text-align: center !important;
  margin-top: 20px !important;
  font-size: 13px !important;
  color: #94a3b8 !important;
}

.auth-card-footer a {
  color: #388BFD !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.auth-card-footer a:hover {
  text-decoration: underline !important;
}

/* 8. Bottom Trust Stats Bar */
.auth-trust-bar {
  margin-top: 60px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.trust-bar-header {
  text-align: center !important;
  color: #94a3b8 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  margin-bottom: 22px !important;
}

html:not([data-theme="dark"]) .trust-bar-header,
html[data-theme="light"] .trust-bar-header {
  color: #64748b !important;
}

.trust-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

.trust-stat-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: rgba(10, 24, 48, 0.55) !important;
  border: 1px solid rgba(56, 139, 253, 0.18) !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

html:not([data-theme="dark"]) .trust-stat-card,
html[data-theme="light"] .trust-stat-card {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
}

.stat-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(56, 139, 253, 0.15) !important;
  color: #388BFD !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 15px rgba(56, 139, 253, 0.2) !important;
}

.stat-num {
  display: block !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

html:not([data-theme="dark"]) .stat-num,
html[data-theme="light"] .stat-num {
  color: #0f172a !important;
}

.stat-label {
  display: block !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}

html:not([data-theme="dark"]) .stat-label,
html[data-theme="light"] .stat-label {
  color: #64748b !important;
}

/* 9. Responsive Adjustments */
@media (max-width: 990px) {
  .auth-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .auth-promo-col {
    align-items: center !important;
    text-align: center !important;
  }
  .auth-promo-sub {
    margin: 0 auto 24px auto !important;
  }
  .auth-visual-showcase {
    flex-direction: column-reverse !important;
    gap: 24px !important;
  }
  .auth-feature-pills {
    width: 100% !important;
    max-width: 420px !important;
  }
  .auth-handwritten-note {
    justify-content: center !important;
  }
  .auth-card {
    max-width: 500px !important;
    margin: 0 auto !important;
  }
  .trust-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .auth-page-container {
    padding-top: 104px !important;
    padding-bottom: 40px !important;
  }
  .auth-promo-heading {
    font-size: 32px !important;
  }
  .auth-card {
    padding: 24px 20px !important;
  }
  .trust-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}



/* ======================================================== */
/* THEME LOGO RULES & ZERO-JITTER 3D FLOATING ANIMATION     */
/* ======================================================== */

/* Light mode: show dark-teal logo ONLY */
html:not([data-theme="dark"]) header img[src*="logo.png"],
html[data-theme="light"] header img[src*="logo.png"] {
  display: none !important;
}
html:not([data-theme="dark"]) header img[src*="logo-dark-teal.png"],
html[data-theme="light"] header img[src*="logo-dark-teal.png"] {
  display: inline-block !important;
  height: 38px !important;
  width: auto !important;
}

/* Dark mode: show light logo ONLY */
html[data-theme="dark"] header img[src*="logo-dark-teal.png"] {
  display: none !important;
}
html[data-theme="dark"] header img[src*="logo.png"] {
  display: inline-block !important;
  height: 38px !important;
  width: auto !important;
}

/* Navbar Cutoff Prevention */
body.page-auth header.topbar,
body.page-auth header.site-header {
  position: fixed !important;
  top: 18px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  pointer-events: none !important;
}

body.page-auth header.topbar .topbar-inner,
body.page-auth header.site-header .header-inner {
  width: 100% !important;
  max-width: 1180px !important;
  height: 62px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

@media (max-width: 900px) {
  body.page-auth header.topbar {
    top: 12px !important;
    padding: 0 12px !important;
  }
  body.page-auth header.topbar .topbar-inner {
    height: 54px !important;
    padding: 0 16px !important;
  }
  body.page-auth .nav-search {
    display: none !important;
  }
  body.page-auth .mainnav {
    display: none !important;
  }
  body.page-auth .navbtn {
    display: flex !important;
  }
  body.page-auth .navtoggle:checked ~ .mainnav {
    display: flex !important;
    position: fixed !important;
    top: 76px !important;
    left: 16px !important;
    right: 16px !important;
    background: rgba(6, 18, 36, 0.96) !important;
    border: 1px solid rgba(56, 139, 253, 0.3) !important;
    border-radius: 20px !important;
    padding: 18px 20px !important;
    flex-direction: column !important;
    gap: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7) !important;
  }
  html:not([data-theme="dark"]) body.page-auth .navtoggle:checked ~ .mainnav,
  html[data-theme="light"] body.page-auth .navtoggle:checked ~ .mainnav {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
  }
}

/* Subtle 3D Floating Animation (Hardware Accelerated, Zero Jitter) */
.auth-artwork-stage,
.auth-artwork-canvas {
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
}

.auth-artwork-img,
.auth-artwork-canvas img {
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 20px 30px rgba(16, 59, 103, 0.22)) !important;
  animation: float3DArt 5s ease-in-out infinite !important;
  will-change: transform !important;
  transform: translate3d(0, 0, 0) !important;
}

@keyframes float3DArt {
  0%, 100% {
    transform: translate3d(0, 0px, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -8px, 0) rotate(0.4deg);
  }
}



/* ======================================================== */
/* STRICT LOGO VISIBILITY & SCROLL CLEARANCE OVERRIDES      */
/* ======================================================== */

/* LIGHT MODE: Force high-contrast dark teal/navy logo, hide white logo */
html:not([data-theme="dark"]) header a[aria-label="EduXperti home"] img[src*="logo.png"],
html:not([data-theme="dark"]) header a.brand img[src*="logo.png"],
html:not([data-theme="dark"]) .brand-logo img:first-child,
html:not([data-theme="dark"]) img.brand-logo.logo-light,
html:not([data-theme="dark"]) img.brand-logo.light {
  display: none !important;
}

html:not([data-theme="dark"]) header a[aria-label="EduXperti home"] img[src*="logo-dark-teal.png"],
html:not([data-theme="dark"]) header a.brand img[src*="logo-dark-teal.png"],
html:not([data-theme="dark"]) .brand-logo img[src*="logo-dark-teal.png"],
html:not([data-theme="dark"]) .brand-logo img.logo-dark,
html:not([data-theme="dark"]) img.brand-logo.logo-dark,
html:not([data-theme="dark"]) img.brand-logo.dark {
  display: block !important;
  height: 38px !important;
  width: auto !important;
  opacity: 1 !important;
  filter: none !important;
}

/* DARK MODE: Force crisp white logo, hide dark logo */
html[data-theme="dark"] header a[aria-label="EduXperti home"] img[src*="logo-dark-teal.png"],
html[data-theme="dark"] header a.brand img[src*="logo-dark-teal.png"],
html[data-theme="dark"] .brand-logo img.logo-dark,
html[data-theme="dark"] img.brand-logo.logo-dark,
html[data-theme="dark"] img.brand-logo.dark {
  display: none !important;
}

html[data-theme="dark"] header a[aria-label="EduXperti home"] img[src*="logo.png"],
html[data-theme="dark"] header a.brand img[src*="logo.png"],
html[data-theme="dark"] .brand-logo img.logo-light,
html[data-theme="dark"] img.brand-logo.logo-light,
html[data-theme="dark"] img.brand-logo.light {
  display: block !important;
  height: 38px !important;
  width: auto !important;
  opacity: 1 !important;
}

/* Scroll Clearance for Navbar */
html {
  scroll-padding-top: 110px !important;
}
body.page-auth {
  scroll-padding-top: 110px !important;
}
.auth-page-container {
  padding-top: 130px !important;
}


/* ======================================================== */
/* DEFINITIVE LOGO VISIBILITY OVERRIDE                      */
/* ======================================================== */
html:not([data-theme="dark"]) header a[aria-label="EduXperti home"] img[src*="logo.png"],
html:not([data-theme="dark"]) header a.brand img[src*="logo.png"],
html:not([data-theme="dark"]) .brand-logo img:first-child,
html:not([data-theme="dark"]) img.brand-logo.logo-light,
html:not([data-theme="dark"]) img.brand-logo.light,
html[data-theme="light"] header a[aria-label="EduXperti home"] img[src*="logo.png"],
html[data-theme="light"] header a.brand img[src*="logo.png"],
html[data-theme="light"] .brand-logo img:first-child,
html[data-theme="light"] img.brand-logo.logo-light,
html[data-theme="light"] img.brand-logo.light {
  display: none !important;
}

html:not([data-theme="dark"]) header a[aria-label="EduXperti home"] img[src*="logo-dark-teal.png"],
html:not([data-theme="dark"]) header a.brand img[src*="logo-dark-teal.png"],
html:not([data-theme="dark"]) .brand-logo img[src*="logo-dark-teal.png"],
html:not([data-theme="dark"]) .brand-logo img.logo-dark,
html:not([data-theme="dark"]) img.brand-logo.logo-dark,
html:not([data-theme="dark"]) img.brand-logo.dark,
html[data-theme="light"] header a[aria-label="EduXperti home"] img[src*="logo-dark-teal.png"],
html[data-theme="light"] header a.brand img[src*="logo-dark-teal.png"],
html[data-theme="light"] .brand-logo img[src*="logo-dark-teal.png"],
html[data-theme="light"] .brand-logo img.logo-dark,
html[data-theme="light"] img.brand-logo.logo-dark,
html[data-theme="light"] img.brand-logo.dark {
  display: block !important;
  height: 38px !important;
  width: auto !important;
  opacity: 1 !important;
  filter: none !important;
}

html[data-theme="dark"] header a[aria-label="EduXperti home"] img[src*="logo-dark-teal.png"],
html[data-theme="dark"] header a.brand img[src*="logo-dark-teal.png"],
html[data-theme="dark"] .brand-logo img.logo-dark,
html[data-theme="dark"] img.brand-logo.logo-dark,
html[data-theme="dark"] img.brand-logo.dark {
  display: none !important;
}

html[data-theme="dark"] header a[aria-label="EduXperti home"] img[src*="logo.png"],
html[data-theme="dark"] header a.brand img[src*="logo.png"],
html[data-theme="dark"] .brand-logo img.logo-light,
html[data-theme="dark"] img.brand-logo.logo-light,
html[data-theme="dark"] img.brand-logo.light {
  display: block !important;
  height: 38px !important;
  width: auto !important;
  opacity: 1 !important;
}



/* Direct Logo Toggle */
html:not([data-theme="dark"]) header img[src*="logo.png"],
html[data-theme="light"] header img[src*="logo.png"],
html:not([data-theme="dark"]) .brand-logo.logo-light,
html[data-theme="light"] .brand-logo.logo-light {
  display: none !important;
}

html:not([data-theme="dark"]) header img[src*="logo-dark-teal.png"],
html[data-theme="light"] header img[src*="logo-dark-teal.png"],
html:not([data-theme="dark"]) .brand-logo.logo-dark,
html[data-theme="light"] .brand-logo.logo-dark {
  display: block !important;
  height: 38px !important;
  width: auto !important;
  opacity: 1 !important;
  filter: none !important;
}

html[data-theme="dark"] header img[src*="logo-dark-teal.png"],
html[data-theme="dark"] .brand-logo.logo-dark {
  display: none !important;
}

html[data-theme="dark"] header img[src*="logo.png"],
html[data-theme="dark"] .brand-logo.logo-light {
  display: block !important;
  height: 38px !important;
  width: auto !important;
  opacity: 1 !important;
  filter: none !important;
}


/* ======================================================== */
/* 1. Stop vertically centering the container & pull to top */
/* ======================================================== */
.auth-page-container,
.auth-main-wrapper,
.register-page,
.register-container,
main.auth-page,
main.auth-main,
.auth-container,
.auth-page-wrapper {
  display: block !important;
  min-height: auto !important;
  height: auto !important;
  padding-top: 75px !important; /* Positions content directly below the navbar */
  padding-bottom: 30px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* 2. Grid/Flex row must align to top, NOT center */
.auth-main-grid,
.auth-content-row,
.auth-wrapper-inner,
.auth-grid,
.auth-page-container > div,
.auth-page-wrapper > div {
  align-items: center !important;
}

/* 3. Normal positioning for columns */
.auth-promo-col,
.promo-col,
.auth-card-container,
.auth-card {
  margin-top: 0;
}

/* 4. Remove excessive spacing on badge and heading */
.badge-pill,
.auth-badge-pill,
[class*="badge"] {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.auth-promo-col h1,
.promo-heading,
.auth-promo-heading,
.register-hero-heading {
  margin-top: 4px !important;
  margin-bottom: 12px !important;
}

/* ======================================================== */
/* 5. FIX DARK MODE & LIGHT MODE LOGO VISIBILITY            */
/* ======================================================== */
/* Light Mode: crisp dark navy/teal logo ONLY */
html:not([data-theme="dark"]) body.page-auth img.brand-logo.dark,
html:not([data-theme="dark"]) body.page-auth img.brand-logo.logo-dark,
html:not([data-theme="dark"]) header a.brand img[src*="logo-dark-teal.png"],
html:not([data-theme="dark"]) header img[src*="logo-dark-teal.png"],
html:not([data-theme="dark"]) .brand-logo.logo-dark,
html:not([data-theme="dark"]) .brand-logo.dark,
html[data-theme="light"] body.page-auth img.brand-logo.dark,
html[data-theme="light"] body.page-auth img.brand-logo.logo-dark,
html[data-theme="light"] header a.brand img[src*="logo-dark-teal.png"],
html[data-theme="light"] header img[src*="logo-dark-teal.png"],
html[data-theme="light"] .brand-logo.logo-dark,
html[data-theme="light"] .brand-logo.dark {
  display: block !important;
  height: 38px !important;
  width: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html:not([data-theme="dark"]) body.page-auth img.brand-logo.light,
html:not([data-theme="dark"]) body.page-auth img.brand-logo.logo-light,
html:not([data-theme="dark"]) header a.brand img[src*="logo.png"],
html:not([data-theme="dark"]) header img[src*="logo.png"],
html:not([data-theme="dark"]) .brand-logo.logo-light,
html:not([data-theme="dark"]) .brand-logo.light,
html[data-theme="light"] body.page-auth img.brand-logo.light,
html[data-theme="light"] body.page-auth img.brand-logo.logo-light,
html[data-theme="light"] header a.brand img[src*="logo.png"],
html[data-theme="light"] header img[src*="logo.png"],
html[data-theme="light"] .brand-logo.logo-light,
html[data-theme="light"] .brand-logo.light {
  display: none !important;
}

/* Dark Mode: crisp white logo ONLY */
html[data-theme="dark"] body.page-auth img.brand-logo.light,
html[data-theme="dark"] body.page-auth img.brand-logo.logo-light,
html[data-theme="dark"] header a.brand img[src*="logo.png"],
html[data-theme="dark"] header img[src*="logo.png"],
html[data-theme="dark"] .brand-logo.logo-light,
html[data-theme="dark"] .brand-logo.light {
  display: block !important;
  height: 38px !important;
  width: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme="dark"] body.page-auth img.brand-logo.dark,
html[data-theme="dark"] body.page-auth img.brand-logo.logo-dark,
html[data-theme="dark"] header a.brand img[src*="logo-dark-teal.png"],
html[data-theme="dark"] header img[src*="logo-dark-teal.png"],
html[data-theme="dark"] .brand-logo.logo-dark,
html[data-theme="dark"] .brand-logo.dark {
  display: none !important;
}


/* Remove Black Border on Register 3D Book Art */
.auth-artwork-canvas img,
.auth-artwork-stage img,
.auth-artwork-img,
.books-img,
.student-img,
img[src*="auth-register-books"],
img[src*="auth-ref-books"],
img[src*="auth-ref-student"],
img[src*="56c011f5"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 15px 30px rgba(11, 187, 170, 0.28)) !important;
}


/* Dynamic Artwork Theme Toggle for Register */
html:not([data-theme="dark"]) .register-art-dark,
html[data-theme="light"] .register-art-dark {
  display: none !important;
}

html:not([data-theme="dark"]) .register-art-light,
html[data-theme="light"] .register-art-light {
  display: block !important;
}

html[data-theme="dark"] .register-art-light {
  display: none !important;
}

html[data-theme="dark"] .register-art-dark {
  display: block !important;
}

.auth-artwork-canvas,
.auth-artwork-stage {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}

.register-art-light,
.register-art-dark,
.auth-artwork-canvas img,
.auth-artwork-stage img,
.auth-artwork-img,
.books-img,
.student-img,
img[src*="register-books"],
img[src*="auth-register-books"],
img[src*="auth-ref-books"],
img[src*="56c011f5"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

html:not([data-theme="dark"]) .register-art-light,
html[data-theme="light"] .register-art-light {
  filter: drop-shadow(0 15px 30px rgba(11, 187, 170, 0.18)) !important;
}

html[data-theme="dark"] .register-art-dark {
  filter: drop-shadow(0 15px 35px rgba(13, 183, 165, 0.32)) !important;
}


/* ======================================================== */
/* REDESIGNED LIBRARY BOOK CARDS (CLEAN & MODERN)           */
/* ======================================================== */
.lib-grid.books {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 24px !important;
  margin-top: 24px !important;
}

.bk-card,
.book-card,
.book-item-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
  box-sizing: border-box !important;
}

.bk-card:hover {
  transform: translateY(-4px) !important;
}

.bk-link {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 16px !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Light Theme Card */
html:not([data-theme="dark"]) .bk-card,
html[data-theme="light"] .bk-card {
  background: #FFFFFF !important;
  border: 1px solid #DFE8F1 !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

html:not([data-theme="dark"]) .bk-card:hover,
html[data-theme="light"] .bk-card:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

/* Dark Theme Card */
html[data-theme="dark"] .bk-card {
  background: #0B1728 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .bk-card:hover {
  border-color: rgba(56, 139, 253, 0.3) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 16px rgba(13, 183, 165, 0.15) !important;
}

/* 3:4 Aspect Ratio Cover Images */
.bk-cover-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="dark"] .bk-cover-wrap {
  background: rgba(255, 255, 255, 0.04) !important;
}

.bk-cover-wrap img,
.bk-cover-wrap .bk-cover,
.bk-card img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bk-card:hover .bk-cover-wrap img {
  transform: scale(1.04) !important;
}

/* Format Micro-Badges */
.bk-badges-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}

.bk-fmt-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  width: fit-content !important;
}

html:not([data-theme="dark"]) .bk-fmt-badge,
html[data-theme="light"] .bk-fmt-badge {
  background: rgba(13, 148, 136, 0.1) !important;
  color: #0d9488 !important;
  border: 1px solid rgba(13, 148, 136, 0.22) !important;
}

html[data-theme="dark"] .bk-fmt-badge {
  background: rgba(56, 139, 253, 0.12) !important;
  color: #388BFD !important;
  border: 1px solid rgba(56, 139, 253, 0.25) !important;
}

.bk-fmt-badge svg,
.bk-fmt-badge i {
  width: 12px !important;
  height: 12px !important;
}

/* Book Title 2-Line Clamp */
.book-title,
.bk-body .book-title,
.bk-card h3 {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  height: 2.7em !important;
  margin: 4px 0 4px 0 !important;
}

html:not([data-theme="dark"]) .book-title {
  color: #0f172a !important;
}

html[data-theme="dark"] .book-title {
  color: #f1f5f9 !important;
}

.book-author {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  margin: 0 0 10px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html:not([data-theme="dark"]) .book-author {
  color: #64748b !important;
}

html[data-theme="dark"] .book-author {
  color: #94a3b8 !important;
}

/* Stars */
.bk-rating-wrap {
  margin-bottom: 12px !important;
}

.bk-body .stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.bk-body .stars i.on svg,
.bk-body .stars i.on polygon {
  fill: #f59e0b !important;
  color: #f59e0b !important;
}

.bk-body .stars i:not(.on) svg,
.bk-body .stars i:not(.on) polygon {
  fill: none !important;
  color: rgba(148, 163, 184, 0.35) !important;
}

.bk-body .stars small {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  margin-left: 4px !important;
}

/* Stock Badges */
.bk-stock-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}

.bk-stock-badge.in {
  color: #10b981 !important;
}

.bk-stock-badge.low {
  color: #f59e0b !important;
}

.bk-stock-badge.out {
  color: #ef4444 !important;
}

.bk-stock-badge svg,
.bk-stock-badge i {
  width: 12px !important;
  height: 12px !important;
}

/* Card Footer: Price & Secondary Action Button */
.bk-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid !important;
  gap: 8px !important;
}

html:not([data-theme="dark"]) .bk-foot {
  border-top-color: #f1f5f9 !important;
}

html[data-theme="dark"] .bk-foot {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

.bk-price-wrap {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.bk-price-val {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

html:not([data-theme="dark"]) .bk-price-val {
  color: #0f172a !important;
}

html[data-theme="dark"] .bk-price-val {
  color: #388BFD !important;
}

.bk-orig-price {
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
}

.bk-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

html:not([data-theme="dark"]) .bk-action-btn {
  background: #f8fafc !important;
  color: #0f766e !important;
  border: 1px solid #e2e8f0 !important;
}

.bk-card:hover .bk-action-btn {
  background: #0d9488 !important;
  color: #ffffff !important;
  border-color: #0d9488 !important;
}

html[data-theme="dark"] .bk-action-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #388BFD !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .bk-card:hover .bk-action-btn {
  background: #14b8a6 !important;
  color: #04101c !important;
  border-color: #14b8a6 !important;
}

.bk-action-btn svg,
.bk-action-btn i {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.2s ease !important;
}

.bk-card:hover .bk-action-btn svg {
  transform: translateX(3px) !important;
}


/* ======================================================== */
/* BOOK DETAIL PAGE: TOP CLEARANCE & POLISHED LAYOUT        */
/* ======================================================== */
.book-detail-container,
.book-page-wrapper,
main.book-detail {
  padding-top: 105px !important; /* Pushes card cleanly below floating navbar */
  min-height: calc(100vh - 105px) !important;
  box-sizing: border-box !important;
}

main.book-detail > .book-detail-container,
main.book-detail > .book-page-wrapper {
  padding-top: 0 !important;
}

/* Breadcrumbs clearance and styling */
.crumbs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
}

.crumbs a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.crumbs a:hover {
  color: #0d9488 !important;
}

.crumbs-current {
  color: #0d9488 !important;
  font-weight: 600 !important;
}

/* Book Detail Header and Card Styles */
.bd {
  display: grid !important;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr) !important;
  gap: 36px !important;
  align-items: start !important;
  margin: 10px 0 28px !important;
}

@media (max-width: 768px) {
  .bd {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

.bd-cover {
  position: relative !important;
  perspective: 1200px !important;
}

.bd-cover-in {
  border-radius: 16px !important;
  overflow: hidden !important;
  aspect-ratio: 3 / 4 !important;
  box-shadow: 0 20px 45px -15px rgba(11, 44, 92, 0.4), 0 0 0 1px rgba(21, 94, 239, 0.15) !important;
}

.bd-cover-in img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Chips & Badges */
.chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 14px 0 20px !important;
}

.chip-stat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

html:not([data-theme="dark"]) .chip-stat,
html[data-theme="light"] .chip-stat {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="dark"] .chip-stat {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.chip-stat svg,
.chip-stat i {
  width: 14px !important;
  height: 14px !important;
}


/* Cart Top Clearance */
.cart-layout-container,
.cart-page-wrapper,
main.cart-page {
  padding-top: 105px !important;
  min-height: calc(100vh - 105px) !important;
  box-sizing: border-box !important;
}

main.cart-page > .cart-layout-container,
main.cart-page > .cart-page-wrapper {
  padding-top: 0 !important;
}


/* Checkout Top Clearance */
.checkout-layout-container,
.checkout-page-wrapper,
main.checkout-page {
  padding-top: 105px !important;
  min-height: calc(100vh - 105px) !important;
  box-sizing: border-box !important;
}

main.checkout-page > .checkout-layout-container,
main.checkout-page > .checkout-page-wrapper {
  padding-top: 0 !important;
}


/* ======================================================== */
/* 3D PERSPECTIVE WRAPPER & STAGGERED SWIPE-IN (Cards)      */
/* ======================================================== */
/* Enable 3D perspective space on the card stack container */
.auth-feature-list,
.auth-features-stack,
.feature-cards-container,
.auth-feature-pills {
  perspective: 1200px !important;
  transform-style: preserve-3d !important;
}

/* Base 3D Card Style & Transition */
.auth-feature-pill,
.auth-feature-card,
.feature-pill,
[class*="feature-card"],
[class*="feature-pill"] {
  will-change: transform, opacity;
  animation: card3DSwipeIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

/* Staggered Delay for Each Card */
.auth-feature-pill:nth-child(1),
.feature-pill:nth-child(1),
[class*="feature-card"]:nth-child(1),
[class*="feature-pill"]:nth-child(1) {
  animation-delay: 0.15s !important;
}

.auth-feature-pill:nth-child(2),
.feature-pill:nth-child(2),
[class*="feature-card"]:nth-child(2),
[class*="feature-pill"]:nth-child(2) {
  animation-delay: 0.3s !important;
}

.auth-feature-pill:nth-child(3),
.feature-pill:nth-child(3),
[class*="feature-card"]:nth-child(3),
[class*="feature-pill"]:nth-child(3) {
  animation-delay: 0.45s !important;
}

/* 3D Swipe-in Keyframe (Slides from left with angled depth) */
@keyframes card3DSwipeIn {
  0% {
    opacity: 0;
    transform: translate3d(-40px, 0, -80px) rotateY(18deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg);
  }
}

/* Interactive 3D Hover Lift */
.auth-feature-pill:hover,
.feature-pill:hover,
[class*="feature-card"]:hover,
[class*="feature-pill"]:hover {
  transform: translate3d(8px, -2px, 20px) rotateY(-4deg) !important;
  box-shadow: 0 14px 28px rgba(13, 183, 165, 0.18) !important;
  border-color: rgba(56, 139, 253, 0.45) !important;
}

.auth-handwritten-note {
  animation: none !important;
  opacity: 1 !important;
}


/* ======================================================== */
/* ADMIN NAVBAR & LAYOUT INTEGRATION (Clean Flex Column)    */
/* ======================================================== */
/* EDUEXPERTI ADMIN CONSOLE LAYOUT & NAVIGATION             */

/* ======================================================== */
/* EDUEXPERTI ADMIN CONSOLE LAYOUT & NAVIGATION             */

/* ======================================================== */
/* EDUEXPERTI ADMIN CONSOLE LAYOUT & NAVIGATION             */

/* ======================================================== */
/* EDUEXPERTI ADMIN CONSOLE LAYOUT & NAVIGATION             */

/* ======================================================== */
/* EDUEXPERTI ADMIN CONSOLE LAYOUT & NAVIGATION             */
/* ======================================================== */

/* Master Admin Shell */
body.admin-body,
body.is-admin,
.admin-shell,
.admin-layout,
.admin-wrapper {
  display: block !important;
  min-height: 100vh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  background-color: #F8FAFC !important;
}

html[data-theme="dark"] body.admin-body,
html[data-theme="dark"] body.is-admin,
html[data-theme="dark"] .admin-shell,
html[data-theme="dark"] .admin-layout,
html[data-theme="dark"] .admin-wrapper {
  background-color: #061224 !important;
}

/* Ensure sidebar is strictly visible and in place */
.admin-sidebar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: 100vh !important;
  z-index: 1000 !important;
  background: #FFFFFF !important;
  border-right: 1px solid #E2E8F0 !important;
  flex-direction: column !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html[data-theme="dark"] .admin-sidebar {
  background: #081426 !important;
  border-right-color: rgba(255, 255, 255, 0.08) !important;
}

/* Stop hiding the sidebar on desktop view */
body.sidebar-collapsed .admin-sidebar,
body.sidebar-hidden .admin-sidebar,
html.sidebar-hidden .admin-sidebar,
html.sidebar-collapsed .admin-sidebar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-left: 0 !important;
  transform: none !important;
  width: 260px !important;
}

/* Sidebar Header */
.admin-sidebar-header,
.admin-sidebar-head {
  flex-shrink: 0 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

html[data-theme="dark"] .admin-sidebar-header,
html[data-theme="dark"] .admin-sidebar-head {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.admin-sidebar-header a,
.admin-sidebar-head a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  min-width: 0 !important;
}

/* Sidebar Header Logo Switching for Light & Dark Mode */
.admin-sidebar-header .admin-sidebar-logo-light,
.admin-sidebar-header a .admin-sidebar-logo-light,
.admin-sidebar-header .admin-sidebar-logo-dark,
.admin-sidebar-header a .admin-sidebar-logo-dark {
  height: 32px !important;
  width: auto !important;
  max-width: 130px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Light mode: show dark teal logo, hide white logo */
html:not([data-theme="dark"]) .admin-sidebar-logo-light,
html[data-theme="light"] .admin-sidebar-logo-light {
  display: block !important;
}
html:not([data-theme="dark"]) .admin-sidebar-logo-dark,
html[data-theme="light"] .admin-sidebar-logo-dark {
  display: none !important;
}

/* Dark mode: show white logo, hide dark teal logo */
html[data-theme="dark"] .admin-sidebar-logo-light {
  display: none !important;
}
html[data-theme="dark"] .admin-sidebar-logo-dark {
  display: block !important;
}

/* Dark mode admin badge */
html[data-theme="dark"] .admin-sidebar-header .admin-badge,
html[data-theme="dark"] .admin-sidebar-header span {
  background: rgba(56, 139, 253, 0.16) !important;
  color: #388BFD !important;
}

/* Nav Spacing & Typography */
.admin-sidebar-nav,
.sidebar-menu,
.admin-sidebar-scroll {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px 14px !important;
  scrollbar-width: thin !important;
}

.admin-nav-group-title {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #64748B !important;
  padding: 14px 10px 6px !important;
}

html[data-theme="dark"] .admin-nav-group-title {
  color: #94A3B8 !important;
}

.admin-nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-decoration: none !important;
  transition: all .2s ease !important;
  margin-bottom: 2px !important;
  box-sizing: border-box !important;
}

.admin-nav-link:hover {
  background: rgba(21, 94, 239, 0.08) !important;
  color: #155EEF !important;
  transform: translateX(3px) !important;
}

.admin-nav-link.active {
  background: linear-gradient(135deg, #155EEF 0%, #12346B 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.35) !important;
}

html[data-theme="dark"] .admin-nav-link {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .admin-nav-link:hover {
  background: rgba(56, 139, 253, 0.1) !important;
  color: #388BFD !important;
}

html[data-theme="dark"] .admin-nav-link.active {
  background: linear-gradient(135deg, #155EEF 0%, #12346B 100%) !important;
  color: #ffffff !important;
}

.admin-nav-link-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.admin-nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.admin-nav-badge {
  background: #E11D48 !important;
  color: #fff !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.4) !important;
}

/* Accordion Dropdowns */
.adm-dropdown {
  margin-bottom: 2px !important;
}

.adm-dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  box-sizing: border-box !important;
}

.adm-dropdown-toggle:hover {
  background: rgba(21, 94, 239, 0.06) !important;
  color: #155EEF !important;
}

.adm-dropdown.is-open > .adm-dropdown-toggle {
  color: #155EEF !important;
}

html[data-theme="dark"] .adm-dropdown-toggle {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .adm-dropdown-toggle:hover,
html[data-theme="dark"] .adm-dropdown.is-open > .adm-dropdown-toggle {
  color: #388BFD !important;
  background: rgba(56, 139, 253, 0.08) !important;
}

.adm-dropdown-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.adm-dropdown-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.adm-dropdown-title {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.adm-chevron {
  width: 14px !important;
  height: 14px !important;
  color: #94A3B8 !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
}

.adm-dropdown.is-open > .adm-dropdown-toggle .adm-chevron {
  transform: rotate(180deg) !important;
  color: #155EEF !important;
}

html[data-theme="dark"] .adm-dropdown.is-open > .adm-dropdown-toggle .adm-chevron {
  color: #388BFD !important;
}

.adm-dropdown-menu {
  display: none;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 4px 0 6px 14px !important;
  padding: 4px 0 4px 12px !important;
  border-left: 2px solid #E2E8F0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
  background: transparent !important;
  box-shadow: none !important;
}

.adm-dropdown.is-open .adm-dropdown-menu,
.adm-dropdown.is-open > .adm-dropdown-menu {
  display: flex !important;
}

html[data-theme="dark"] .adm-dropdown-menu {
  border-left-color: rgba(255, 255, 255, 0.12) !important;
}

.adm-dropdown-menu a {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  line-height: 1.4 !important;
  background: transparent !important;
  border: none !important;
  box-sizing: border-box !important;
}

.adm-dropdown-menu a:hover {
  color: #155EEF !important;
  background: rgba(21, 94, 239, 0.08) !important;
  transform: translateX(3px) !important;
}

.adm-dropdown-menu a.active {
  color: #155EEF !important;
  font-weight: 700 !important;
  background: rgba(21, 94, 239, 0.12) !important;
}

html[data-theme="dark"] .adm-dropdown-menu a {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .adm-dropdown-menu a:hover {
  color: #388BFD !important;
  background: rgba(56, 139, 253, 0.1) !important;
}

html[data-theme="dark"] .adm-dropdown-menu a.active {
  color: #388BFD !important;
  font-weight: 700 !important;
  background: rgba(56, 139, 253, 0.15) !important;
}

/* User footer */
.admin-sidebar-footer,
.sidebar-user-card,
.admin-sidebar-foot {
  flex-shrink: 0 !important;
  padding: 14px 16px !important;
  border-top: 1px solid #F1F5F9 !important;
  background: #FAFAFA !important;
}

html[data-theme="dark"] .admin-sidebar-footer,
html[data-theme="dark"] .sidebar-user-card,
html[data-theme="dark"] .admin-sidebar-foot {
  background: #06101E !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.admin-user-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.admin-user-info {
  line-height: 1.25 !important;
  min-width: 0 !important;
}

.admin-user-name {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-theme="dark"] .admin-user-name {
  color: #F8FAFC !important;
}

.admin-user-role {
  font-size: 0.7rem !important;
  color: #64748B !important;
}

.admin-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.admin-action-btn {
  flex: 1 !important;
  text-align: center !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
  text-decoration: none !important;
  background: #FFFFFF !important;
  transition: all .2s !important;
  cursor: pointer !important;
}

.admin-action-btn:hover {
  background: rgba(21, 94, 239, 0.1) !important;
  color: #155EEF !important;
  border-color: #155EEF !important;
}

html[data-theme="dark"] .admin-action-btn {
  background: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #94A3B8 !important;
}

/* Offset the main content so it starts AFTER the 260px sidebar */
.admin-main,
.admin-content-area,
main.admin-main,
.admin-main-wrap,
.admin-main-content {
  margin-left: 260px !important;
  width: calc(100% - 260px) !important;
  min-width: calc(100% - 260px) !important;
  max-width: calc(100% - 260px) !important;
  padding: 24px 32px !important;
  box-sizing: border-box !important;
  display: block !important;
  background: #F8FAFC !important;
  min-height: 100vh !important;
}

html[data-theme="dark"] .admin-main,
html[data-theme="dark"] .admin-content-area,
html[data-theme="dark"] main.admin-main,
html[data-theme="dark"] .admin-main-wrap,
html[data-theme="dark"] .admin-main-content {
  background: #061224 !important;
}

/* Unified Top Navbar Pill (Clean, Responsive, Fully Contained) */
.admin-top-bar,
.admin-header-pill,
.admin-navbar,
.admin-topbar,
.is-admin header,
.admin-shell header,
.admin-layout header {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 24px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(16, 56, 102, 0.04) !important;
  margin: 0 0 24px 0 !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  height: auto !important;
  min-height: 60px !important;
  box-sizing: border-box !important;
}

html[data-theme="dark"] .admin-top-bar,
html[data-theme="dark"] .admin-header-pill,
html[data-theme="dark"] .admin-navbar,
html[data-theme="dark"] .admin-topbar,
html[data-theme="dark"] .is-admin header,
html[data-theme="dark"] .admin-shell header,
html[data-theme="dark"] .admin-layout header {
  background: #081426 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.admin-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.admin-page-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  display: block !important;
  visibility: visible !important;
}

html[data-theme="dark"] .admin-page-title {
  color: #F8FAFC !important;
}

.admin-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.admin-live-site-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: rgba(13, 183, 165, 0.1) !important;
  color: #0db7a5 !important;
  text-decoration: none !important;
  border: 1px solid rgba(13, 183, 165, 0.25) !important;
  transition: all 0.2s ease !important;
}

.admin-live-site-pill:hover {
  background: #0db7a5 !important;
  color: #FFFFFF !important;
  border-color: #0db7a5 !important;
}

.admin-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* =================================================== */
/* Mobile Navigation Drawer Open State                 */
/* =================================================== */
@media (max-width: 768px) {
  header nav.nav-open,
  .mobile-menu-drawer.is-open,
  header.menu-open nav,
  .navtoggle:checked ~ .mainnav,
  header .navtoggle:checked ~ nav,
  body:not(.is-admin) .navtoggle:checked ~ .mainnav,
  header.topbar .navtoggle:checked ~ .mainnav,
  header.topbar .navtoggle:checked ~ .mobile-menu-drawer {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 16px !important;
    right: 16px !important;
    width: calc(100% - 32px) !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    padding: 16px !important;
    gap: 12px !important;
    box-shadow: 0 16px 36px rgba(16, 56, 102, 0.15) !important;
    z-index: 9999 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Ensure all nav links are visible with proper contrast */
  header nav.nav-open a,
  .mobile-menu-drawer a,
  .navtoggle:checked ~ .mainnav a,
  header .navtoggle:checked ~ nav a,
  body:not(.is-admin) .navtoggle:checked ~ .mainnav a {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
    box-sizing: border-box !important;
  }

  /* Highlight CTA Button (Sign up free) inside drawer */
  header nav.nav-open a[href*="register"],
  .mobile-menu-drawer a[href*="register"],
  .navtoggle:checked ~ .mainnav a[href*="register"],
  body:not(.is-admin) .navtoggle:checked ~ .mainnav a[href*="register"] {
    background: #155EEF !important;
    color: #FFFFFF !important;
    margin-top: 6px !important;
  }

  /* Dark theme drawer support */
  html[data-theme="dark"] header nav.nav-open,
  html[data-theme="dark"] .mobile-menu-drawer.is-open,
  html[data-theme="dark"] .navtoggle:checked ~ .mainnav,
  html[data-theme="dark"] header .navtoggle:checked ~ nav,
  html[data-theme="dark"] body:not(.is-admin) .navtoggle:checked ~ .mainnav {
    background: #0B1728 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  html[data-theme="dark"] header nav.nav-open a,
  html[data-theme="dark"] .mobile-menu-drawer a,
  html[data-theme="dark"] .navtoggle:checked ~ .mainnav a,
  html[data-theme="dark"] body:not(.is-admin) .navtoggle:checked ~ .mainnav a {
    color: #F1F5F9 !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }

  html[data-theme="dark"] header nav.nav-open a[href*="register"],
  html[data-theme="dark"] .mobile-menu-drawer a[href*="register"],
  html[data-theme="dark"] .navtoggle:checked ~ .mainnav a[href*="register"],
  html[data-theme="dark"] body:not(.is-admin) .navtoggle:checked ~ .mainnav a[href*="register"] {
    background: #155EEF !important;
    color: #FFFFFF !important;
  }

  header nav.nav-open form,
  .mobile-menu-drawer form,
  .navtoggle:checked ~ .mainnav form {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
  }

  header nav.nav-open .linkbtn,
  .mobile-menu-drawer .linkbtn,
  .navtoggle:checked ~ .mainnav .linkbtn {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #EF4444 !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    background: #F8FAFC !important;
    border: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  html[data-theme="dark"] header nav.nav-open .linkbtn,
  html[data-theme="dark"] .mobile-menu-drawer .linkbtn,
  html[data-theme="dark"] .navtoggle:checked ~ .mainnav .linkbtn {
    color: #F87171 !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
}

/* Question & Explanation Diagrams */
.quiz-diagram-img,
.explain-diagram-img {
  max-height: 280px !important;
  width: auto !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  margin: 12px auto !important;
  border: 1px solid #E2E8F0 !important;
  object-fit: contain !important;
  background: #FFFFFF !important;
  display: block !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="dark"] .quiz-diagram-img,
html[data-theme="dark"] .explain-diagram-img {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: #0A1A30 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   STUDENT DASHBOARD ANALYTICS & PROGRESS HUB
   ========================================================================== */
.student-analytics-container {
  width: 100%;
  max-width: 1200px;
  margin: 18px auto 28px auto;
  padding: 0;
  box-sizing: border-box;
}

.student-analytics-container .analytics-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.student-analytics-container .analytics-section-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-heading, #0F172A);
  margin: 0;
  letter-spacing: -0.01em;
}
html[data-theme="dark"] .student-analytics-container .analytics-section-title {
  color: #F8FAFC !important;
}

.student-analytics-container .analytics-section-subtitle {
  font-size: 13px;
  color: var(--text-muted, #64748B);
  margin: 4px 0 0 0;
}
html[data-theme="dark"] .student-analytics-container .analytics-section-subtitle {
  color: #94A3B8 !important;
}

.student-analytics-container .analytics-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #155EEF;
  background: rgba(10, 174, 159, 0.1);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(10, 174, 159, 0.2);
}

/* 1. TOP STAT SUMMARY CARDS (4-METRIC GRID) */
.student-analytics-container .analytics-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.student-analytics-container .analytics-stat-card {
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--card-border, #E2E8F0);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(16, 56, 102, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.student-analytics-container .analytics-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(16, 56, 102, 0.08);
  border-color: rgba(10, 174, 159, 0.3);
}

html[data-theme="dark"] .student-analytics-container .analytics-stat-card {
  background: #0B1728 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .student-analytics-container .analytics-stat-card:hover {
  border-color: rgba(56, 139, 253, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

.student-analytics-container .stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.student-analytics-container .stat-card-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
}
html[data-theme="dark"] .student-analytics-container .stat-card-label {
  color: #94A3B8;
}

.student-analytics-container .stat-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.student-analytics-container .stat-icon-wrap i,
.student-analytics-container .stat-icon-wrap svg {
  width: 20px;
  height: 20px;
}

.student-analytics-container .icon-blue {
  background: rgba(59, 130, 246, 0.12);
  color: #3B82F6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.student-analytics-container .icon-teal {
  background: rgba(10, 174, 159, 0.12);
  color: #155EEF;
  border: 1px solid rgba(10, 174, 159, 0.2);
}
.student-analytics-container .icon-purple {
  background: rgba(168, 85, 247, 0.12);
  color: #A855F7;
  border: 1px solid rgba(168, 85, 247, 0.2);
}
.student-analytics-container .icon-orange {
  background: rgba(249, 115, 22, 0.12);
  color: #F97316;
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.student-analytics-container .stat-value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.student-analytics-container .stat-value {
  font-size: 26px;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
html[data-theme="dark"] .student-analytics-container .stat-value {
  color: #FFFFFF;
}

.student-analytics-container .stat-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}
.student-analytics-container .trend-up {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
}

.student-analytics-container .stat-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #64748B;
  flex-wrap: wrap;
}
html[data-theme="dark"] .student-analytics-container .stat-footer {
  color: #94A3B8;
}

.student-analytics-container .stat-footer-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}
.student-analytics-container .tag-blue { background: rgba(59, 130, 246, 0.12); color: #3B82F6; }
.student-analytics-container .tag-teal { background: rgba(10, 174, 159, 0.12); color: #155EEF; }
.student-analytics-container .tag-purple { background: rgba(168, 85, 247, 0.12); color: #A855F7; }
.student-analytics-container .tag-orange { background: rgba(249, 115, 22, 0.12); color: #F97316; }

.student-analytics-container .readiness-mini-bar {
  flex: 1;
  height: 6px;
  background: rgba(168, 85, 247, 0.15);
  border-radius: 999px;
  overflow: hidden;
  min-width: 60px;
}
.student-analytics-container .readiness-mini-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #A855F7, #C084FC);
  border-radius: 999px;
}

/* 2. PERFORMANCE TRENDS & SUBJECT MASTERY (2-COLUMN GRID) */
.student-analytics-container .student-analytics-grid {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr;
  gap: 20px;
  margin-bottom: 24px;
}

.student-analytics-container .analytics-panel-card {
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--card-border, #E2E8F0);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 14px rgba(16, 56, 102, 0.04);
  box-sizing: border-box;
}
html[data-theme="dark"] .student-analytics-container .analytics-panel-card {
  background: #0B1728 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.student-analytics-container .panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}

.student-analytics-container .panel-title {
  font-size: 17px;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}
html[data-theme="dark"] .student-analytics-container .panel-title {
  color: #FFFFFF;
}

.student-analytics-container .panel-subtitle {
  font-size: 13px;
  color: #64748B;
  margin: 3px 0 0 0;
}
html[data-theme="dark"] .student-analytics-container .panel-subtitle {
  color: #94A3B8;
}

.student-analytics-container .panel-badge-teal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #155EEF;
  background: rgba(10, 174, 159, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
}

.student-analytics-container .panel-badge-blue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #3B82F6;
  background: rgba(59, 130, 246, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
}

.student-analytics-container .panel-link {
  font-size: 13px;
  font-weight: 600;
  color: #155EEF;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.student-analytics-container .panel-link:hover {
  text-decoration: underline;
}

/* Subject Mastery list */
.student-analytics-container .subject-mastery-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.student-analytics-container .mastery-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.student-analytics-container .mastery-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.student-analytics-container .mastery-subject-name {
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
}
html[data-theme="dark"] .student-analytics-container .mastery-subject-name {
  color: #F1F5F9;
}

.student-analytics-container .mastery-item-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.student-analytics-container .mastery-pct {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
}
html[data-theme="dark"] .student-analytics-container .mastery-pct {
  color: #FFFFFF;
}

.student-analytics-container .mastery-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
}
.student-analytics-container .pill-mastered {
  background: rgba(10, 174, 159, 0.12);
  color: #155EEF;
  border: 1px solid rgba(10, 174, 159, 0.25);
}
.student-analytics-container .pill-average {
  background: rgba(59, 130, 246, 0.12);
  color: #3B82F6;
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.student-analytics-container .pill-focus {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.student-analytics-container .mastery-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
html[data-theme="dark"] .student-analytics-container .mastery-progress-track {
  background: rgba(255, 255, 255, 0.08);
}

.student-analytics-container .mastery-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. RECENT ACTIVITY & RESUME LEARNING */
.student-analytics-container .analytics-bottom-grid {
  display: grid;
  grid-template-columns: 1.5fr 1.3fr;
  gap: 20px;
}

.student-analytics-container .recent-quizzes-table-wrap {
  overflow-x: auto;
}

.student-analytics-container .recent-quizzes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.student-analytics-container .recent-quizzes-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748B;
  border-bottom: 1px solid #E2E8F0;
  letter-spacing: 0.03em;
}
html[data-theme="dark"] .student-analytics-container .recent-quizzes-table th {
  color: #94A3B8;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.student-analytics-container .recent-quizzes-table td {
  padding: 12px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
}
html[data-theme="dark"] .student-analytics-container .recent-quizzes-table td {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.student-analytics-container .recent-quiz-topic {
  font-weight: 600;
  color: #0F172A;
}
html[data-theme="dark"] .student-analytics-container .recent-quiz-topic {
  color: #F8FAFC;
}

.student-analytics-container .recent-quiz-exam {
  font-size: 11px;
  color: #64748B;
  display: block;
}
html[data-theme="dark"] .student-analytics-container .recent-quiz-exam {
  color: #94A3B8;
}

.student-analytics-container .recent-quiz-date {
  color: #64748B;
  white-space: nowrap;
}
html[data-theme="dark"] .student-analytics-container .recent-quiz-date {
  color: #94A3B8;
}

.student-analytics-container .recent-quiz-score-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #155EEF;
  background: rgba(10, 174, 159, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.student-analytics-container .btn-review-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #155EEF;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.student-analytics-container .btn-review-link:hover {
  text-decoration: underline;
}

/* Recommended Test Card */
.student-analytics-container .recommended-test-card {
  background: linear-gradient(135deg, rgba(10, 174, 159, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%), var(--card-bg, #FFFFFF) !important;
  border: 1.5px solid rgba(10, 174, 159, 0.3) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
html[data-theme="dark"] .student-analytics-container .recommended-test-card {
  background: linear-gradient(135deg, rgba(10, 174, 159, 0.08) 0%, rgba(15, 23, 42, 0.6) 100%), #0B1728 !important;
  border-color: rgba(56, 139, 253, 0.3) !important;
}

.student-analytics-container .rec-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #155EEF;
  background: rgba(10, 174, 159, 0.12);
  padding: 4px 10px;
  border-radius: 6px;
  width: fit-content;
  margin-bottom: 12px;
}

.student-analytics-container .rec-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 8px 0;
}
html[data-theme="dark"] .student-analytics-container .rec-card-title {
  color: #FFFFFF;
}

.student-analytics-container .rec-card-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 16px 0;
}
html[data-theme="dark"] .student-analytics-container .rec-card-desc {
  color: #CBD5E1;
}

.student-analytics-container .rec-card-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.student-analytics-container .rec-feat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
}
html[data-theme="dark"] .student-analytics-container .rec-feat-item {
  color: #94A3B8;
}

.student-analytics-container .btn-start-rec-quiz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 10px;
  background: #155EEF;
  color: #FFFFFF;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  box-shadow: 0 4px 14px rgba(10, 174, 159, 0.25);
}
.student-analytics-container .btn-start-rec-quiz:hover {
  background: #088b7f;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(10, 174, 159, 0.35);
}

/* Responsiveness */
@media (max-width: 1024px) {
  .student-analytics-container .analytics-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .student-analytics-container .student-analytics-grid,
  .student-analytics-container .analytics-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .student-analytics-container .analytics-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   STUDENT DASHBOARD TOP CLEARANCE (FIX NAVBAR OVERLAP)
   ========================================================================== */
.student-dashboard-wrapper,
.dashboard-main-container,
main.dashboard-container,
main.main:has(.dash-wrap) {
  padding-top: 110px !important; /* Clears floating navbar cleanly */
  box-sizing: border-box !important;
}

/* Prevent double padding when nested */
.student-dashboard-wrapper .student-dashboard-wrapper,
.dashboard-main-container .dashboard-main-container,
main.student-dashboard-wrapper .dash-wrap,
main.dashboard-main-container .dash-wrap,
main.dashboard-container .dash-wrap,
main.main:has(.dash-wrap) > .dash-wrap {
  padding-top: 0 !important;
}

/* ==========================================================================
   FLOATING NAVBAR BRAND LOGO CONTRAST (LIGHT & DARK THEMES)
   ========================================================================== */
/* LIGHT MODE: Crisp Dark Teal Logo on Light Floating Navbar */
html:not([data-theme="dark"]) header.topbar a.brand img[src*="logo-dark-teal.png"],
html:not([data-theme="dark"]) header.topbar a.brand img.logo-dark-teal,
html:not([data-theme="dark"]) header.topbar a.brand img.dark-logo-light-bg,
html:not([data-theme="dark"]) header a.brand img[src*="logo-dark-teal.png"],
html:not([data-theme="dark"]) header a.brand img.logo-dark-teal,
html[data-theme="light"] header.topbar a.brand img[src*="logo-dark-teal.png"],
html[data-theme="light"] header.topbar a.brand img.logo-dark-teal,
html[data-theme="light"] header.topbar a.brand img.dark-logo-light-bg,
html[data-theme="light"] header a.brand img[src*="logo-dark-teal.png"],
html[data-theme="light"] header a.brand img.logo-dark-teal {
  display: block !important;
  height: 38px !important;
  width: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html:not([data-theme="dark"]) header.topbar a.brand img[src*="logo.png"]:not([src*="logo-dark-teal.png"]),
html:not([data-theme="dark"]) header.topbar a.brand img.logo-white-light,
html:not([data-theme="dark"]) header.topbar a.brand img.white-logo-dark-bg,
html:not([data-theme="dark"]) header a.brand img[src*="logo.png"]:not([src*="logo-dark-teal.png"]),
html:not([data-theme="dark"]) header a.brand img.logo-white-light,
html[data-theme="light"] header.topbar a.brand img[src*="logo.png"]:not([src*="logo-dark-teal.png"]),
html[data-theme="light"] header.topbar a.brand img.logo-white-light,
html[data-theme="light"] header.topbar a.brand img.white-logo-dark-bg,
html[data-theme="light"] header a.brand img[src*="logo.png"]:not([src*="logo-dark-teal.png"]),
html[data-theme="light"] header a.brand img.logo-white-light {
  display: none !important;
}

/* DARK MODE: Crisp White Logo on Dark Floating Navbar */
html[data-theme="dark"] header.topbar a.brand img[src*="logo.png"]:not([src*="logo-dark-teal.png"]),
html[data-theme="dark"] header.topbar a.brand img.logo-white-light,
html[data-theme="dark"] header.topbar a.brand img.white-logo-dark-bg,
html[data-theme="dark"] header a.brand img[src*="logo.png"]:not([src*="logo-dark-teal.png"]),
html[data-theme="dark"] header a.brand img.logo-white-light {
  display: block !important;
  height: 38px !important;
  width: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme="dark"] header.topbar a.brand img[src*="logo-dark-teal.png"],
html[data-theme="dark"] header.topbar a.brand img.logo-dark-teal,
html[data-theme="dark"] header.topbar a.brand img.dark-logo-light-bg,
html[data-theme="dark"] header a.brand img[src*="logo-dark-teal.png"],
html[data-theme="dark"] header a.brand img.logo-dark-teal {
  display: none !important;
}

/* ==========================================================================
   CUSTOM QUIZ BUILDER MODAL SCROLLBAR & Z-INDEX FIX
   ========================================================================== */
.custom-quiz-modal,
#practiceQuizModal {
  z-index: 10050 !important; /* Above floating navbar */
}

.custom-quiz-modal .modal-card {
  max-height: 85vh !important;
  overflow-y: auto !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   PROMOTIONS SECTION (INVITE & EARN + SPIN & WIN)
   Scoped strictly inside .promotions-section
   ========================================================================== */
.promotions-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 32px auto;
  box-sizing: border-box;
}

.promotions-section .promo-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .promotions-section .promo-grid {
    grid-template-columns: 1fr;
  }
}

/* Card 1: Invite & Earn */
.promotions-section .promo-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.promotions-section .promo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 174, 159, 0.12);
}

html[data-theme="dark"] .promotions-section .promo-card {
  background: #0B1728;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.promotions-section .promo-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.promotions-section .promo-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(10, 174, 159, 0.1);
  color: #155EEF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.promotions-section .promo-title {
  font-size: 17px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 4px 0;
}

html[data-theme="dark"] .promotions-section .promo-title {
  color: #F8FAFC;
}

.promotions-section .promo-subtitle {
  font-size: 13px;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
}

html[data-theme="dark"] .promotions-section .promo-subtitle {
  color: #94A3B8;
}

.promotions-section .promo-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 16px 0;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 4px 6px 4px 12px;
  transition: border-color 0.2s ease;
}

html[data-theme="dark"] .promotions-section .promo-input-group {
  background: #111E33;
  border-color: rgba(255, 255, 255, 0.12);
}

.promotions-section .promo-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 12.5px;
  color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding: 8px 0;
  outline: none;
  cursor: text;
  width: 100%;
}

html[data-theme="dark"] .promotions-section .promo-input {
  color: #CBD5E1;
}

.promotions-section .promo-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.promotions-section .btn-copy-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 9px;
  background: #155EEF;
  color: #FFFFFF;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.promotions-section .btn-copy-link:hover {
  background: #088b7f;
  transform: translateY(-1px);
}

.promotions-section .btn-whatsapp-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 9px;
  background: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.promotions-section .btn-whatsapp-share:hover {
  background: #1ea952;
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Card 2: Spin Wheel Banner */
.promotions-section .spin-banner-card {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F2D37 100%);
  border: 1px solid rgba(10, 174, 159, 0.3);
  border-radius: 16px;
  padding: 24px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
}

.promotions-section .spin-banner-card:hover {
  transform: translateY(-2px);
  border-color: #155EEF;
  box-shadow: 0 10px 28px rgba(10, 174, 159, 0.25);
}

.promotions-section .spin-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(10, 174, 159, 0.2);
  color: #388BFD;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  align-self: flex-start;
  border: 1px solid rgba(56, 139, 253, 0.25);
}

.promotions-section .spin-banner-title {
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.promotions-section .spin-banner-desc {
  font-size: 13px;
  color: #94A3B8;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.promotions-section .btn-trigger-spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9px;
  background: linear-gradient(135deg, #155EEF 0%, #0284c7 100%);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity 0.2s ease, transform 0.1s ease;
  box-shadow: 0 4px 12px rgba(10, 174, 159, 0.3);
}

.promotions-section .btn-trigger-spin:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* Toast feedback alert */
.promotions-section .promo-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0F172A;
  color: #FFFFFF;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index: 10060;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.promotions-section .promo-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Spin Modal */
.promotions-section .promo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 23, 40, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  box-sizing: border-box;
}

.promotions-section .promo-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

.promotions-section .promo-modal-card {
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 26px;
  position: relative;
  text-align: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
}

html[data-theme="dark"] .promotions-section .promo-modal-card {
  background: #0B1728;
  border-color: rgba(255, 255, 255, 0.1);
  color: #F8FAFC;
}

.promotions-section .promo-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #94A3B8;
  cursor: pointer;
  padding: 4px;
}
.promotions-section .promo-modal-close:hover {
  color: #0F172A;
}
html[data-theme="dark"] .promotions-section .promo-modal-close:hover {
  color: #FFFFFF;
}

.promotions-section .wheel-container {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 18px auto 22px auto;
}

.promotions-section .wheel-pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid #E11D48;
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.promotions-section .wheel-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: transform 3.5s cubic-bezier(0.15, 0.95, 0.35, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.promotions-section .wheel-center-cap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #155EEF;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 5;
}

.promotions-section .spin-win-result {
  margin-top: 14px;
  padding: 12px;
  background: rgba(10, 174, 159, 0.1);
  border: 1px dashed #155EEF;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #0F766E;
  display: none;
}
html[data-theme="dark"] .promotions-section .spin-win-result {
  background: rgba(56, 139, 253, 0.1);
  color: #388BFD;
  border-color: #388BFD;
}

/* ==========================================================================
   FLOATING HALF-WHEEL EDGE TAB (TRIGGER)
   Persistent pinned trigger on the right viewport edge
   ========================================================================== */
@keyframes spinTabPulseGlow {
  0%, 100% {
    box-shadow: -4px 4px 18px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(10, 174, 159, 0.45);
  }
  50% {
    box-shadow: -4px 4px 22px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(10, 174, 159, 0);
  }
}

/* Floating Peeking Wheel Tab - Double Sized */
.floating-spin-tab {
  position: fixed !important;
  right: -70px !important; /* Exactly half of 140px hidden off-screen */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  background: conic-gradient(
    #155EEF 0deg 60deg, 
    #3B82F6 60deg 120deg, 
    #F59E0B 120deg 180deg, 
    #EC4899 180deg 240deg, 
    #8B5CF6 240deg 300deg, 
    #10B981 300deg 360deg
  ) !important;
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.35) !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-left: 14px !important;
  border: 4px solid #FFFFFF !important;
  transition: right 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s ease !important;
  box-sizing: border-box !important;
  animation: spinTabPulseGlow 3s infinite ease-in-out !important;
}

/* Subtle hover interaction */
.floating-spin-tab:hover {
  right: -50px !important;
  transform: translateY(-50%) scale(1.04) !important;
  animation: none !important;
}

.floating-spin-tab .tab-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
}

/* Center Gift Icon inside the visible half */
.floating-spin-tab .tab-icon {
  font-size: 28px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)) !important;
}

.floating-spin-tab .tab-text {
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  color: #FFFFFF !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  margin-left: 6px !important;
  font-family: system-ui, -apple-system, sans-serif !important;
}

.floating-spin-tab .tab-tooltip {
  position: absolute;
  right: 150px;
  top: 50%;
  transform: translateY(-50%);
  background: #0F172A;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  font-family: system-ui, -apple-system, sans-serif;
  letter-spacing: 0.2px;
}

.floating-spin-tab .tab-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translateY(-50%);
  border-width: 5px 0 5px 5px;
  border-style: solid;
  border-color: transparent transparent transparent #0F172A;
}

.floating-spin-tab:hover .tab-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(-4px);
}

/* ==========================================================================
   GLOBAL ENLARGED SPIN MODAL & FLOATING WHEEL STYLES
   ========================================================================== */
/* Clean Centered Overlay - Strictly hidden by default */
.spin-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  display: none !important; /* STRICTLY HIDDEN BY DEFAULT */
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow: hidden !important; /* Prevent inner & outer scrollbars */
  box-sizing: border-box !important;
}

.spin-modal-overlay.open {
  display: flex !important; /* ONLY when explicitly opened */
}

.spin-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(11, 23, 40, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  cursor: pointer !important;
}

/* Modal Card Fit */
.spin-modal-card {
  position: relative !important;
  width: 95% !important;
  max-width: 540px !important;
  max-height: 94vh !important;
  overflow: hidden !important; /* No internal scrollbar */
  padding: 24px 28px !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  --card-bg: #0F1A2C;
  background: var(--card-bg, #0F1A2C) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
  animation: spinModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 2 !important;
}

@keyframes spinModalPop {
  0% { opacity: 0; transform: scale(0.92) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.spin-modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  color: #94A3B8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  z-index: 20 !important;
}

.spin-modal-close:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  transform: scale(1.08) !important;
}

.spin-modal-header {
  margin-bottom: 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}

.spin-badge {
  display: inline-block !important;
  background: rgba(10, 174, 159, 0.15) !important;
  color: #388BFD !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.8px !important;
  border: 1px solid rgba(56, 139, 253, 0.3) !important;
  font-family: system-ui, -apple-system, sans-serif !important;
}

.spin-modal-header h3 {
  margin: 0 0 4px 0 !important;
  font-size: 22px !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}

.spin-modal-header p {
  margin: 0 0 8px 0 !important;
  font-size: 13px !important;
  color: #94A3B8 !important;
  line-height: 1.35 !important;
  max-width: 440px !important;
}

/* Compact Wheel Area */
.wheel-canvas-container {
  position: relative !important;
  width: 330px !important;
  height: 330px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 8px auto 14px !important;
  flex-shrink: 0 !important;
}

#spinWheelCanvas, .wheel-canvas-container canvas {
  width: 330px !important;
  height: 330px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  transition: none !important;
  transform: none !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4) !important;
  display: block !important;
}

.wheel-canvas-container .wheel-pointer {
  position: absolute !important;
  top: -15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #F43F5E !important;
  font-size: 28px !important;
  z-index: 10 !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.wheel-canvas-container::after {
  content: none !important;
  display: none !important;
}

.spin-action-area {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 10 !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.btn-spin-action, #spinResultBox .btn-claim {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 340px !important;
  background: linear-gradient(135deg, #155EEF 0%, #0F766E 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 6px 20px rgba(10, 174, 159, 0.4) !important;
  font-family: inherit !important;
  margin-top: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.btn-spin-action:hover:not(:disabled), #spinResultBox .btn-claim:hover {
  background: linear-gradient(135deg, #0BA294 0%, #0D6962 100%) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(10, 174, 159, 0.5) !important;
  color: #FFFFFF !important;
}

.btn-spin-action:disabled {
  opacity: 0.8 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Tighten Results Box so it fits without scrolling */
#spinResultBox, #wheelResultBox {
  margin-top: 10px !important;
  width: 100% !important;
  max-width: 420px !important;
}

#spinResultBox .result-banner, #wheelResultBox .result-banner {
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}

.btn-claim-discount-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 380px !important;
  padding: 14px 22px !important;
  background: linear-gradient(135deg, #155EEF 0%, #0D9488 100%) !important;
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(10, 174, 159, 0.4) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.btn-claim-discount-cta:hover {
  background: linear-gradient(135deg, #0BA294 0%, #0F766E 100%) !important;
  box-shadow: 0 8px 24px rgba(10, 174, 159, 0.5) !important;
  transform: translateY(-2px) scale(1.02) !important;
  color: #FFFFFF !important;
}

/* Dark mode theme support */
html[data-theme="dark"] .spin-modal-card {
  background: #0B1728 !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .floating-spin-tab {
  border-color: #0F172A !important;
}

html[data-theme="dark"] .floating-spin-tab .tab-inner {
  background: transparent !important;
}

@media (max-width: 600px) {
  .spin-modal-card {
    padding: 28px 18px !important;
    border-radius: 20px !important;
  }
  .spin-modal-close {
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 22px !important;
  }
  .spin-modal-header h3 {
    font-size: 22px !important;
  }
  .spin-modal-header p {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }
  .wheel-canvas-container {
    width: 280px !important;
    height: 280px !important;
    margin: 6px auto 16px auto !important;
  }
  .wheel-canvas-container .wheel-pointer {
    font-size: 26px !important;
    top: -14px !important;
  }
  .floating-spin-tab {
    width: 100px !important;
    height: 100px !important;
    right: -50px !important;
    padding-left: 10px !important;
  }
  .floating-spin-tab:hover {
    right: -36px !important;
  }
  .floating-spin-tab .tab-icon {
    font-size: 20px !important;
  }
  .floating-spin-tab .tab-text {
    font-size: 11px !important;
    margin-left: 4px !important;
  }
}







/* ==========================================================================
   COMPREHENSIVE DARK MODE POLISH & ROYAL BLUE HARMONIZATION
   ========================================================================== */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control {
  background-color: #0A1A30 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus {
  border-color: #388BFD !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.25) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .data-table {
  background: #081426 !important;
}

html[data-theme="dark"] table th {
  background-color: #061224 !important;
  color: #F8FAFC !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] table tr:hover td {
  background-color: rgba(56, 139, 253, 0.08) !important;
}

/* Tab & Domain Pill Styling */
.domain-tab, .tabs a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  background: var(--surface-card, #FFFFFF) !important;
  border: 1px solid var(--border-subtle, #DBEAFE) !important;
  color: var(--text-heading, #12346B) !important;
}

.domain-tab:hover, .tabs a:hover {
  background-color: var(--bg-page, #F0F6FF) !important;
  color: var(--color-primary, #155EEF) !important;
  border-color: var(--color-primary, #155EEF) !important;
}

.domain-tab.active, .tabs a.active {
  background: var(--color-primary, #155EEF) !important;
  color: #FFFFFF !important;
  border-color: var(--color-primary, #155EEF) !important;
  box-shadow: 0 2px 10px rgba(21, 94, 239, 0.3) !important;
}

.domain-tab .tab-icon, .tabs a .tab-icon, .domain-tab i, .tabs a i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-style: normal !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.domain-tab .tab-icon svg, .tabs a .tab-icon svg {
  display: inline-block !important;
  vertical-align: middle !important;
  width: 15px !important;
  height: 15px !important;
}

/* Dark Mode Tabs */
html[data-theme="dark"] .domain-tab,
html[data-theme="dark"] .tabs a {
  background: #081426 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .domain-tab:hover,
html[data-theme="dark"] .tabs a:hover {
  background: rgba(56, 139, 253, 0.12) !important;
  color: #388BFD !important;
  border-color: #388BFD !important;
}

html[data-theme="dark"] .domain-tab.active,
html[data-theme="dark"] .tabs a.active {
  background: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
  box-shadow: 0 2px 12px rgba(21, 94, 239, 0.45) !important;
}

/* Dark Mode Buttons */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-submit,
html[data-theme="dark"] .btn-save,
html[data-theme="dark"] .btn-action,
html[data-theme="dark"] .btn:not(.btn-ghost):not(.btn-danger):not(.linkbtn-danger):not(.spin-btn-action) {
  background-color: #155EEF !important;
  border-color: #155EEF !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(21, 94, 239, 0.35) !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-submit:hover,
html[data-theme="dark"] .btn-save:hover,
html[data-theme="dark"] .btn:not(.btn-ghost):not(.btn-danger):not(.linkbtn-danger):not(.spin-btn-action):hover {
  background-color: #388BFD !important;
  border-color: #388BFD !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .btn-ghost {
  color: #388BFD !important;
  border-color: #388BFD !important;
}

html[data-theme="dark"] .btn-ghost:hover {
  background: rgba(56, 139, 253, 0.15) !important;
}


/* ==========================================================================
   STUDENT PORTAL & DASHBOARD DESIGN SYSTEM (ROYAL BLUE LIGHT THEME)
   ========================================================================== */
:root {
  --student-primary: #155EEF;
  --student-primary-hover: #0F4CD9;
  --student-surface: #FFFFFF;
  --student-bg-page: #F0F6FF;
  --student-border: #DBEAFE;
  --student-text-heading: #12346B;
  --student-text-body: #334155;
  --student-text-muted: #4B6382;
}

/* Base Student Page Background */
body.student-portal,
.student-dashboard-wrapper,
.dashboard-main-content,
main.dashboard-container,
.dash-wrap {
  background-color: var(--student-bg-page) !important;
  color: var(--student-text-body) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Headings Across Student Pages */
.student-dashboard-wrapper h1,
.student-dashboard-wrapper h2,
.student-dashboard-wrapper h3,
.student-dashboard-wrapper h4,
.exam-title, .subject-title, .stat-value,
.dash-head h1, .analytics-section-title, .panel-title, .rec-card-title {
  color: var(--student-text-heading) !important;
  font-weight: 700 !important;
}

/* Sidebar Layout & Menu Items */
.student-sidebar {
  background-color: var(--student-surface) !important;
  border-right: 1px solid var(--student-border) !important;
}

.student-sidebar .nav-link,
.student-sidebar .menu-item {
  color: var(--student-text-heading) !important;
  background-color: transparent !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.student-sidebar .nav-link:hover,
.student-sidebar .menu-item:hover {
  background-color: var(--student-bg-page) !important;
  color: var(--student-primary) !important;
}

/* Active Sidebar Item */
.student-sidebar .nav-link.active,
.student-sidebar .menu-item.active {
  background-color: var(--student-bg-page) !important;
  color: var(--student-primary) !important;
  font-weight: 700 !important;
  border-left: 4px solid var(--student-primary) !important;
}

/* Student Cards: Overview, Metrics, Subject Progress & Exam Passes */
.student-card,
.progress-card,
.stat-card,
.subject-card,
.exam-pass-banner,
.module-item,
.dash-head.card,
.analytics-stat-card,
.analytics-panel-card,
.exam-card,
.promo-card,
.recommended-test-card {
  background-color: var(--student-surface) !important;
  border: 1px solid var(--student-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(18, 52, 107, 0.04) !important;
}

/* Progress Bars */
.progress-bar-track,
.mastery-progress-track,
.bar {
  background-color: var(--student-bg-page) !important;
  border: 1px solid var(--student-border) !important;
  border-radius: 100px !important;
}

.progress-bar-fill,
.mastery-progress-fill,
.bar span {
  background: linear-gradient(90deg, #155EEF, #2563EB) !important;
  border-radius: 100px !important;
}

/* Primary Action Buttons */
.btn-primary,
.btn-start-quiz,
.btn-enroll,
.btn-resume,
.btn-start-rec-quiz {
  background-color: var(--student-primary) !important;
  border: 1px solid var(--student-primary) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 8px rgba(21, 94, 239, 0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover,
.btn-start-quiz:hover,
.btn-enroll:hover,
.btn-start-rec-quiz:hover {
  background-color: var(--student-primary-hover) !important;
  border-color: var(--student-primary-hover) !important;
  transform: translateY(-1px) !important;
}

/* Badges & Tags */
.badge-free, .badge-unlocked {
  background-color: #ECFDF5 !important;
  color: #059669 !important;
  border: 1px solid #A7F3D0 !important;
}

.badge-locked {
  background-color: #FEF2F2 !important;
  color: #EF4444 !important;
  border: 1px solid #FECACA !important;
}

.badge-active-exam,
.access-pill {
  background-color: var(--student-bg-page) !important;
  color: var(--student-primary) !important;
  border: 1px solid var(--student-border) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
}

.access-pill.is-all {
  background: linear-gradient(135deg, #155EEF, #0F4CD9) !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Tables on Student Dashboard */
.recent-quizzes-table th {
  background-color: var(--student-bg-page) !important;
  color: var(--student-text-heading) !important;
  border-bottom: 1px solid var(--student-border) !important;
  font-weight: 700 !important;
}

.recent-quizzes-table td {
  border-bottom: 1px solid var(--student-border) !important;
  color: var(--student-text-body) !important;
}

/* Dark Mode Overrides for Student Dashboard */
html[data-theme="dark"] body.student-portal,
html[data-theme="dark"] .student-dashboard-wrapper,
html[data-theme="dark"] .dashboard-main-content,
html[data-theme="dark"] .dash-wrap {
  background-color: #061224 !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .student-dashboard-wrapper h1,
html[data-theme="dark"] .student-dashboard-wrapper h2,
html[data-theme="dark"] .student-dashboard-wrapper h3,
html[data-theme="dark"] .student-dashboard-wrapper h4,
html[data-theme="dark"] .exam-title,
html[data-theme="dark"] .subject-title,
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .dash-head h1,
html[data-theme="dark"] .analytics-section-title,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .rec-card-title {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .student-card,
html[data-theme="dark"] .progress-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .subject-card,
html[data-theme="dark"] .exam-pass-banner,
html[data-theme="dark"] .module-item,
html[data-theme="dark"] .dash-head.card,
html[data-theme="dark"] .analytics-stat-card,
html[data-theme="dark"] .analytics-panel-card,
html[data-theme="dark"] .exam-card,
html[data-theme="dark"] .promo-card,
html[data-theme="dark"] .recommended-test-card {
  background-color: #081426 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .progress-bar-track,
html[data-theme="dark"] .mastery-progress-track,
html[data-theme="dark"] .bar {
  background-color: #0A1A30 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .badge-active-exam,
html[data-theme="dark"] .access-pill {
  background-color: rgba(56, 139, 253, 0.15) !important;
  color: #388BFD !important;
  border-color: rgba(56, 139, 253, 0.3) !important;
}

html[data-theme="dark"] .recent-quizzes-table th {
  background-color: #061224 !important;
  color: #F8FAFC !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .recent-quizzes-table td {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: #CBD5E1 !important;
}


/* ==========================================================================
   REFINED STUDENT DASHBOARD: DEEP NAVY BANNER & POLISHED SAAS METRIC CARDS
   ========================================================================== */

/* Student Navbar & Active Indicators */
.nav-link.active,
.header-nav a.active,
.student-navbar a.active,
.mainnav a.active {
  color: #155EEF !important;
  font-weight: 700 !important;
}

.nav-link.active::after,
.header-nav a.active::after,
.student-navbar a.active::after,
.mainnav a.active::after {
  background-color: #155EEF !important;
}

/* 1. Deep Executive Navy Welcome Banner */
.dashboard-hero-banner,
.profile-welcome-card,
.dash-head {
  background: linear-gradient(135deg, #0B1727 0%, #102A45 50%, #153A60 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: 24px 28px !important;
  box-shadow: 0 10px 25px -5px rgba(11, 23, 39, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  color: #FFFFFF !important;
}

/* Subtle Glow behind the banner */
.dashboard-hero-banner::after,
.profile-welcome-card::after,
.dash-head::after {
  content: '' !important;
  position: absolute !important;
  top: -40% !important;
  right: -10% !important;
  width: 320px !important;
  height: 320px !important;
  background: radial-gradient(circle, rgba(21, 94, 239, 0.25), transparent 70%) !important;
  pointer-events: none !important;
}

.dashboard-hero-banner h1,
.dashboard-hero-banner h2,
.profile-welcome-card h2,
.dash-head h1 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.dashboard-hero-banner p,
.profile-welcome-card p,
.dash-head .meta {
  color: #94A3B8 !important;
}

.dash-head .eyebrow {
  color: #60A5FA !important;
  text-transform: uppercase !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
}

/* Badges inside banner */
.dashboard-hero-banner .badge-plan,
.profile-welcome-card .plan-badge,
.dash-head .access-pill {
  background: rgba(21, 94, 239, 0.25) !important;
  color: #60A5FA !important;
  border: 1px solid rgba(96, 165, 250, 0.4) !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
}

.dashboard-hero-banner .btn-edit-profile,
.profile-welcome-card .btn-edit,
.dash-head .btn-ghost {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.2s ease !important;
}

.dashboard-hero-banner .btn-edit-profile:hover,
.profile-welcome-card .btn-edit:hover,
.dash-head .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Section Title Pill (Left blue bar) */
.section-title-indicator {
  display: inline-block;
  width: 4px;
  height: 28px;
  border-radius: 4px;
  background-color: #155EEF !important;
  flex-shrink: 0;
}

/* 2. Sleek Premium SaaS Stat & Metric Cards (Light Mode) */
.analytics-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  margin-bottom: 26px !important;
}

.metric-card,
.stat-box,
.analytics-stat-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(18, 52, 107, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.metric-card:hover,
.stat-box:hover,
.analytics-stat-card:hover {
  transform: translateY(-3px) !important;
  border-color: #93C5FD !important;
  box-shadow: 0 12px 28px -6px rgba(21, 94, 239, 0.12), 0 4px 10px rgba(0, 0, 0, 0.03) !important;
}

.stat-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

.stat-box .stat-label,
.metric-card .stat-label,
.stat-card-label {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #64748B !important;
  letter-spacing: 0.01em !important;
  text-transform: capitalize !important;
}

.stat-box .stat-number,
.metric-card .stat-number,
.stat-value {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
}

.stat-icon-wrapper,
.stat-icon-wrap {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.icon-blue,
.stat-icon-wrap.icon-blue {
  background: #EFF6FF !important;
  color: #155EEF !important;
  border: 1px solid #BFDBFE !important;
}

.icon-teal,
.stat-icon-wrap.icon-teal {
  background: #F0FDF4 !important;
  color: #16A34A !important;
  border: 1px solid #BBF7D0 !important;
}

.icon-purple,
.stat-icon-wrap.icon-purple {
  background: #FAF5FF !important;
  color: #9333EA !important;
  border: 1px solid #E9D5FF !important;
}

.icon-orange,
.stat-icon-wrap.icon-orange {
  background: #FFF7ED !important;
  color: #EA580C !important;
  border: 1px solid #FED7AA !important;
}

.stat-footer {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.775rem !important;
}

.stat-footer-text {
  color: #64748B !important;
  font-weight: 500 !important;
}

.stat-footer-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  letter-spacing: 0.02em !important;
}

.tag-blue {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #DBEAFE !important;
}

.tag-teal {
  background: #F0FDF4 !important;
  color: #15803D !important;
  border: 1px solid #DCFCE7 !important;
}

.tag-purple {
  background: #FAF5FF !important;
  color: #7E22CE !important;
  border: 1px solid #F3E8FF !important;
}

.tag-orange {
  background: #FFF7ED !important;
  color: #C2410C !important;
  border: 1px solid #FFEDD5 !important;
}

.readiness-mini-bar {
  flex: 1 !important;
  height: 6px !important;
  background: #E2E8F0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.readiness-mini-bar span {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #9333EA, #155EEF) !important;
}

/* 3. Deep Midnight Dark Mode Overrides */
html[data-theme="dark"] body.student-portal,
html[data-theme="dark"] .student-dashboard-wrapper,
html[data-theme="dark"] .dashboard-main-content,
html[data-theme="dark"] .dash-wrap {
  background-color: #0B132B !important;
  color: #E2E8F0 !important;
}

html[data-theme="dark"] .dashboard-hero-banner,
html[data-theme="dark"] .profile-welcome-card,
html[data-theme="dark"] .dash-head {
  background: linear-gradient(135deg, #070F1E 0%, #0D2038 50%, #112F52 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .analytics-stat-card {
  background: #0E182A !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .metric-card:hover,
html[data-theme="dark"] .stat-box:hover,
html[data-theme="dark"] .analytics-stat-card:hover {
  border-color: rgba(96, 165, 250, 0.4) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .stat-box .stat-label,
html[data-theme="dark"] .metric-card .stat-label,
html[data-theme="dark"] .stat-card-label {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .stat-box .stat-number,
html[data-theme="dark"] .metric-card .stat-number,
html[data-theme="dark"] .stat-value {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .stat-footer {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .stat-footer-text {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .icon-blue,
html[data-theme="dark"] .stat-icon-wrap.icon-blue {
  background: rgba(21, 94, 239, 0.15) !important;
  color: #60A5FA !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
}

html[data-theme="dark"] .icon-teal,
html[data-theme="dark"] .stat-icon-wrap.icon-teal {
  background: rgba(22, 163, 74, 0.15) !important;
  color: #4ADE80 !important;
  border-color: rgba(74, 222, 128, 0.25) !important;
}

html[data-theme="dark"] .icon-purple,
html[data-theme="dark"] .stat-icon-wrap.icon-purple {
  background: rgba(147, 51, 234, 0.15) !important;
  color: #C084FC !important;
  border-color: rgba(192, 132, 252, 0.25) !important;
}

html[data-theme="dark"] .icon-orange,
html[data-theme="dark"] .stat-icon-wrap.icon-orange {
  background: rgba(234, 88, 12, 0.15) !important;
  color: #FB923C !important;
  border-color: rgba(251, 146, 60, 0.25) !important;
}

html[data-theme="dark"] .readiness-mini-bar {
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .section-title-indicator {
  background-color: #388BFD !important;
}


/* ==========================================================================
   FULL ROYAL BLUE & SURFACE PALETTE FOR /LIBRARY (HEADER, FILTERS, PILLS & CARDS)
   ========================================================================== */

/* Base Page Background */
body.library-page,
.library-main-container,
main:has(.library-filter-panel),
main:has([role="tablist"]) {
  background-color: #F0F6FF !important;
  color: #12346B !important;
}

/* 1. Header & Tablist Section */
.library-header h1,
.library-header h2,
.lib-hero h1,
.lib-hero h2 {
  color: #12346B !important;
  font-weight: 800 !important;
}

.library-header h1 span,
.lib-hero h1 span,
.lib-hero h1 .grad-text {
  color: #155EEF !important;
  background: none !important;
  -webkit-text-fill-color: #155EEF !important;
}

.library-header p.lead,
.lib-hero p.lead {
  color: #4B6382 !important;
}

.library-header p.eyebrow,
.lib-hero p.eyebrow {
  color: #155EEF !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* Header Tabs ("Past papers 47" / "Books 2") */
[role="tablist"] a[role="tab"],
.lib-tabs a {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  color: #12346B !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  box-shadow: 0 2px 8px rgba(18, 52, 107, 0.04) !important;
  transition: all 0.2s ease !important;
}

[role="tablist"] a[role="tab"]:hover,
.lib-tabs a:hover {
  border-color: #155EEF !important;
  color: #155EEF !important;
}

[role="tablist"] a[role="tab"][aria-selected="true"],
[role="tablist"] a[role="tab"].active,
.lib-tabs a.active {
  background-color: #155EEF !important;
  border-color: #155EEF !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(21, 94, 239, 0.25) !important;
}

[role="tablist"] a[role="tab"] b,
.lib-tabs a b {
  background: #F0F6FF !important;
  color: #155EEF !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-weight: 700 !important;
}

[role="tablist"] a[role="tab"].active b,
.lib-tabs a.active b {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

/* 2. Main Search & Filter Card */
.library-filter-panel,
.papers-filter-wrapper,
.lib-toolbar,
section:has(input[placeholder*="Search"]) > div {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  box-shadow: 0 4px 16px rgba(18, 52, 107, 0.04) !important;
}

/* Inputs & Select Dropdowns */
input[placeholder*="Search"],
.filter-select,
.lib-search-input,
.lib-select,
select {
  background-color: #FFFFFF !important;
  border: 1px solid #DBEAFE !important;
  color: #12346B !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

input[placeholder*="Search"]:focus,
.lib-search-input:focus,
.filter-select:focus,
.lib-select:focus,
select:focus {
  border-color: #155EEF !important;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
  outline: none !important;
}

/* "Apply" Button */
.btn-apply,
.btn-apply-filters,
.lib-apply-btn {
  background-color: #155EEF !important;
  border: 1px solid #155EEF !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 8px rgba(21, 94, 239, 0.25) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.btn-apply:hover,
.btn-apply-filters:hover,
.lib-apply-btn:hover {
  background-color: #0F4CD9 !important;
  border-color: #0F4CD9 !important;
}

/* 3. Filter Pills (EXAMS & ACCESS TYPE) */
.filter-pill,
.lib-pill,
.lib-type-pill {
  background-color: #FFFFFF !important;
  border: 1px solid #DBEAFE !important;
  color: #12346B !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  padding: 7px 16px !important;
  transition: all 0.15s ease !important;
}

.filter-pill:hover,
.lib-pill:hover,
.lib-type-pill:hover {
  background-color: #F0F6FF !important;
  border-color: #155EEF !important;
  color: #155EEF !important;
}

/* Active Filter Pill */
.filter-pill.active,
.lib-pill.active,
.lib-type-pill.active,
.filter-pill[data-active="true"] {
  background-color: #155EEF !important;
  border-color: #155EEF !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.3) !important;
}

/* Filter Results Count */
.filter-results-count,
.lib-result-count {
  color: #4B6382 !important;
  font-weight: 600 !important;
}

/* 4. Past Paper Document Cards */
.lp-card,
.paper-card,
.bk-card,
article.lp-card,
article.paper-card,
article.bk-card {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(18, 52, 107, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.lp-card:hover,
.paper-card:hover,
.bk-card:hover,
article.lp-card:hover,
article.paper-card:hover {
  transform: translateY(-2px) !important;
  border-color: #93C5FD !important;
  box-shadow: 0 8px 20px rgba(21, 94, 239, 0.09) !important;
}

/* Card Typography */
.lp-card h3,
.paper-card h3,
.bk-card h3,
.lp-card-title,
.book-title {
  color: #12346B !important;
  font-weight: 700 !important;
}

.lp-card p,
.paper-card p,
.bk-card p,
.lp-card-sub,
.book-author {
  color: #4B6382 !important;
}

/* Year Badge */
.lp-badge-year,
.paper-card .year-badge,
article .year-badge {
  background-color: #F0F6FF !important;
  color: #155EEF !important;
  border: 1px solid #DBEAFE !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
}

/* Card Action Buttons */
.lp-cta-action.free,
.btn-open-paper {
  background-color: #F0F6FF !important;
  color: #155EEF !important;
  border: 1px solid #DBEAFE !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.lp-card:hover .lp-cta-action.free,
.paper-card:hover .btn-open-paper,
.btn-open-paper:hover {
  background-color: #155EEF !important;
  border-color: #155EEF !important;
  color: #FFFFFF !important;
}

/* VIP / Unlock Button */
.lp-cta-action.vip,
.btn-unlock-paper {
  background-color: #12346B !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Dark Mode Overrides for Full Library */
html[data-theme="dark"] body.library-page,
html[data-theme="dark"] .library-main-container {
  background-color: #0B132B !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .library-header h1,
html[data-theme="dark"] .library-header h2,
html[data-theme="dark"] .lib-hero h1,
html[data-theme="dark"] .lib-hero h2 {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .library-header h1 span,
html[data-theme="dark"] .lib-hero h1 span,
html[data-theme="dark"] .lib-hero h1 .grad-text {
  color: #388BFD !important;
  -webkit-text-fill-color: #388BFD !important;
}

html[data-theme="dark"] .library-header p.lead,
html[data-theme="dark"] .lib-hero p.lead {
  color: #94A3B8 !important;
}

html[data-theme="dark"] [role="tablist"] a[role="tab"],
html[data-theme="dark"] .lib-tabs a {
  background-color: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] [role="tablist"] a[role="tab"].active,
html[data-theme="dark"] .lib-tabs a.active {
  background-color: #155EEF !important;
  border-color: #155EEF !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .library-filter-panel,
html[data-theme="dark"] .papers-filter-wrapper,
html[data-theme="dark"] .lib-toolbar {
  background-color: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}

html[data-theme="dark"] input[placeholder*="Search"],
html[data-theme="dark"] .filter-select,
html[data-theme="dark"] .lib-search-input,
html[data-theme="dark"] .lib-select {
  background-color: #0B132B !important;
  border-color: rgba(219, 234, 254, 0.15) !important;
  color: #F8FAFC !important;
}

html[data-theme="dark"] .filter-pill,
html[data-theme="dark"] .lib-pill,
html[data-theme="dark"] .lib-type-pill {
  background-color: #0B132B !important;
  border-color: rgba(219, 234, 254, 0.15) !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .filter-pill.active,
html[data-theme="dark"] .lib-pill.active,
html[data-theme="dark"] .lib-type-pill.active {
  background-color: #155EEF !important;
  border-color: #155EEF !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .lp-card,
html[data-theme="dark"] .paper-card,
html[data-theme="dark"] .bk-card {
  background-color: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}

html[data-theme="dark"] .lp-card h3,
html[data-theme="dark"] .paper-card h3,
html[data-theme="dark"] .bk-card h3,
html[data-theme="dark"] .lp-card-title,
html[data-theme="dark"] .book-title {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .lp-badge-year,
html[data-theme="dark"] .paper-card .year-badge {
  background-color: #0B132B !important;
  border-color: rgba(219, 234, 254, 0.15) !important;
  color: #60A5FA !important;
}

html[data-theme="dark"] .lp-cta-action.free,
html[data-theme="dark"] .btn-open-paper {
  background-color: rgba(21, 94, 239, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #60A5FA !important;
}


/* ==========================================================================
   LIBRARY HERO BANNER OVERHAUL & CRYSTAL CLEAR TYPOGRAPHY
   ========================================================================== */

/* Library Hero Banner Container */
.library-hero-section,
.lib-hero,
main > section:first-of-type,
section:has([role="tablist"]) {
  background: linear-gradient(135deg, #0B1727 0%, #102A45 55%, #153A60 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  margin: 16px auto 24px auto !important;
  max-width: 1200px !important;
  box-shadow: 0 12px 30px -8px rgba(11, 23, 39, 0.35) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

/* Subtle Ambient Glow */
.library-hero-section::before,
.lib-hero::before,
section:has([role="tablist"])::before {
  content: '' !important;
  position: absolute !important;
  top: -30% !important;
  left: 20% !important;
  width: 280px !important;
  height: 280px !important;
  background: radial-gradient(circle, rgba(21, 94, 239, 0.3), transparent 70%) !important;
  pointer-events: none !important;
}

/* Eyebrow Label ("EduXperti Library") */
.library-hero-section p:first-of-type,
.lib-hero p.eyebrow,
.lib-hero p:first-of-type,
section:has([role="tablist"]) p:first-of-type {
  color: #60A5FA !important; /* Soft Bright Blue */
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  -webkit-text-fill-color: #60A5FA !important;
}

/* Main Heading ("Past papers, year by year") */
.library-hero-section h1,
.lib-hero h1,
section:has([role="tablist"]) h1 {
  color: #FFFFFF !important; /* High-contrast Pure White */
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin: 0 0 10px 0 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.library-hero-section h1 span,
.lib-hero h1 span,
.lib-hero h1 .grad-text,
section:has([role="tablist"]) h1 span {
  color: #93C5FD !important; /* Light Ice Blue Highlight */
  background: none !important;
  -webkit-text-fill-color: #93C5FD !important;
  text-decoration: none !important;
}

/* Subtitle ("Real entrance test papers from every university — free and VIP.") */
.library-hero-section p:last-of-type,
.lib-hero p.lead,
.lib-hero p:last-of-type,
section:has([role="tablist"]) p:last-of-type {
  color: #CBD5E1 !important; /* Soft Slate/White for high legibility */
  font-size: 15px !important;
  max-width: 580px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  -webkit-text-fill-color: #CBD5E1 !important;
}

/* Right Tabs Inside Banner ("Past papers 47" / "Books 2") */
[role="tablist"],
.lib-tabs {
  display: flex !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 6px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
}

[role="tablist"] a[role="tab"],
.lib-tabs a {
  color: #E2E8F0 !important;
  border: none !important;
  background: transparent !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

[role="tablist"] a[role="tab"]:hover,
.lib-tabs a:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

[role="tablist"] a[role="tab"][aria-selected="true"],
[role="tablist"] a[role="tab"].active,
.lib-tabs a.active {
  background: #155EEF !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.4) !important;
}

[role="tablist"] a[role="tab"]:not(.active):not([aria-selected="true"]) {
  background: transparent !important;
  box-shadow: none !important;
}

[role="tablist"] a[role="tab"] b,
.lib-tabs a b {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  margin-left: 6px !important;
}

/* ALL FILTER PILLS & ACTIVE STATES (FIX EXAMS: ALL TO ROYAL BLUE) */
.filter-pill,
.lib-pill,
.lib-type-pill {
  background-color: #FFFFFF !important;
  border: 1px solid #DBEAFE !important;
  color: #12346B !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  padding: 7px 16px !important;
  transition: all 0.15s ease !important;
}

.filter-pill:hover,
.lib-pill:hover,
.lib-type-pill:hover {
  background-color: #F0F6FF !important;
  border-color: #155EEF !important;
  color: #155EEF !important;
}

/* Active State: Force Royal Blue on EXAMS: All and any active pill */
.filter-pill.active,
.lib-pill.active,
.lib-type-pill.active,
.filter-pill[data-active="true"],
a.lib-pill.active,
a.filter-pill.active,
a[data-exam=""].active,
a[data-exam].active,
#libPillsRow a.active {
  background: #155EEF !important;
  background-color: #155EEF !important;
  border-color: #155EEF !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.35) !important;
}


/* ==========================================================================
   POLISHED CARD DEPTH, SWIPE-IN ENTRANCE & FOOTER GAP REMOVAL (/library)
   ========================================================================== */

/* 1. Remove white strip above footer & clean up containers */
main,
.library-main-container,
body.library-page main.main,
section:has(+ footer),
div:has(> nav[aria-label="Library pagination"]) + div,
nav[aria-label="Library pagination"] + div {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ensure pagination container sits cleanly on page background */
nav[aria-label="Library pagination"],
.library-pagination,
.pager {
  background: transparent !important;
  margin-bottom: 40px !important;
  padding: 20px 0 !important;
}

/* Fix any empty white container before footer */
body.dark-mode main + div,
body.dark-mode footer,
body.dark-mode .footer-wrapper,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] main,
html[data-theme="dark"] .library-main-container,
html[data-theme="dark"] body.library-page main.main {
  background-color: #0B132B !important;
  border-top: 1px solid rgba(219, 234, 254, 0.1) !important;
}

/* 2. Disable infinite floating / wobbling - Make badges completely static and stable */
.paper-badge-vip,
.paper-year-badge,
.lp-badge-access.vip,
.lp-badge-year,
[role="tablist"] a[role="tab"].active,
.lib-tabs a.active,
[role="tablist"] a[role="tab"],
.lib-tabs a {
  animation: none !important;
  transform: none !important;
}

/* 3. Clean One-Time Swipe-In Entrance for Cards (Slide Up + Fade In) */
@keyframes cardSwipeIn {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

article,
.paper-card,
.lp-card,
.bk-card {
  animation: cardSwipeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.25s ease, 
              border-color 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(18, 52, 107, 0.05),
              0 1px 3px rgba(0, 0, 0, 0.02) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Stagger entrance for initial cards */
.lib-grid > *:nth-child(1) { animation-delay: 0.03s !important; }
.lib-grid > *:nth-child(2) { animation-delay: 0.06s !important; }
.lib-grid > *:nth-child(3) { animation-delay: 0.09s !important; }
.lib-grid > *:nth-child(4) { animation-delay: 0.12s !important; }
.lib-grid > *:nth-child(5) { animation-delay: 0.15s !important; }
.lib-grid > *:nth-child(6) { animation-delay: 0.18s !important; }
.lib-grid > *:nth-child(n+7) { animation-delay: 0.21s !important; }

/* Stable, Smooth Card Hover Lift (No Wobble) */
article:hover,
.paper-card:hover,
.lp-card:hover,
.bk-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 16px 30px -6px rgba(21, 94, 239, 0.16),
              0 4px 10px rgba(0, 0, 0, 0.03) !important;
  border-color: #93C5FD !important;
}

/* Subtle Glass Light Streak on Hover */
article::before,
.paper-card::before,
.lp-card::before,
.bk-card::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(
    60deg,
    transparent 40%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 60%
  ) !important;
  transform: rotate(25deg) translateY(-100%) !important;
  transition: transform 0.65s ease-in-out !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

article:hover::before,
.paper-card:hover::before,
.lp-card:hover::before,
.bk-card:hover::before {
  transform: rotate(25deg) translateY(100%) !important;
}

/* Interactive Button Press Effect */
.btn-paper-open,
.btn-open-paper,
.lp-cta-action,
.bk-action-btn,
a[href*="/paper?id="] span {
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-paper-open:hover,
.btn-open-paper:hover,
.lp-cta-action:hover,
.bk-action-btn:hover,
a[href*="/paper?id="]:hover span {
  transform: scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.25) !important;
}

.btn-paper-open:active,
.btn-open-paper:active,
.lp-cta-action:active,
.bk-action-btn:active,
a[href*="/paper?id="]:active span {
  transform: scale(0.97) !important;
}

/* Hero Heading: No underline */
.library-hero-section h1 span,
.lib-hero h1 span,
.lib-hero h1 .grad-text,
.library-header h1 span,
.library-header h1 .grad-text {
  text-decoration: none !important;
}

/* Dark Mode Overrides */
html[data-theme="dark"] article,
html[data-theme="dark"] .paper-card,
html[data-theme="dark"] .lp-card,
html[data-theme="dark"] .bk-card {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] article:hover,
html[data-theme="dark"] .paper-card:hover,
html[data-theme="dark"] .lp-card:hover,
html[data-theme="dark"] .bk-card:hover {
  border-color: rgba(96, 165, 250, 0.45) !important;
  box-shadow: 0 16px 30px -6px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] article::before,
html[data-theme="dark"] .paper-card::before,
html[data-theme="dark"] .lp-card::before,
html[data-theme="dark"] .bk-card::before {
  background: linear-gradient(
    60deg,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 60%
  ) !important;
}

/* ==========================================================================
   EXAM DOMAINS & CURRICULUM DESIGN SYSTEM (/domains, /domain?id=*)
   ========================================================================== */

/* Base Background & Body */
body.domains-page,
.domains-wrapper,
.exam-domain-container,
main:has(.domain-card),
main:has([href*="/domain?id="]) {
  background-color: #F0F6FF !important;
  color: #12346B !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Page Header / Hero Section */
.domains-hero,
.exam-header-banner,
body.domains-page .exam-hero,
.main:has(.dx-layout) .exam-hero.exam-header-banner {
  background: linear-gradient(135deg, #0B1727 0%, #102A45 55%, #153A60 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  margin: 16px auto 28px auto !important;
  max-width: 1200px !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 25px -5px rgba(11, 23, 39, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

.domains-hero h1,
.exam-header-banner h1,
body.domains-page .exam-hero h1 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 30px !important;
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.domains-hero p,
.domains-hero .lead,
.exam-header-banner p,
.exam-header-banner .lead,
body.domains-page .exam-hero .lead {
  color: #CBD5E1 !important;
  font-size: 15px !important;
  -webkit-text-fill-color: #CBD5E1 !important;
}

.domains-hero .eyebrow,
.exam-header-banner .eyebrow {
  color: #60A5FA !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* Domain Track Cards (ECAT, MDCAT, NUMS, LAT, Nursing) */
.domain-card,
.exam-track-card,
body.domains-page .domain-row,
body.domains-page-no-match-wrapper {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 4px 14px rgba(18, 52, 107, 0.04) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
}

.domain-card:hover,
.exam-track-card:hover,
body.domains-page .domain-row:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(21, 94, 239, 0.12) !important;
  border-color: #93C5FD !important;
}

/* Card Titles & Subject Count */
.domain-card h2,
.domain-card h3,
.exam-track-card h3,
body.domains-page .domain-row h3 {
  color: #12346B !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  margin-bottom: 8px !important;
}

.domain-card p,
.exam-track-card p,
body.domains-page .domain-row p {
  color: #4B6382 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Stats Badges inside Cards (e.g. "5 Subjects", "24 Tests") */
.exam-stat-pill,
.domain-badge,
body.domains-page .chip-stat {
  background-color: #F0F6FF !important;
  color: #155EEF !important;
  border: 1px solid #DBEAFE !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Action Buttons (e.g. "Explore Curriculum", "Start Prep") */
.btn-explore-domain,
.domain-card .btn-primary,
.exam-track-card a.btn,
body.domains-page .domain-row a.btn {
  background-color: #155EEF !important;
  border: 1px solid #155EEF !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-explore-domain:hover,
.domain-card .btn-primary:hover,
.exam-track-card a.btn:hover,
body.domains-page .domain-row a.btn:hover {
  background-color: #0F4CD9 !important;
  border-color: #0F4CD9 !important;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.35) !important;
}

/* Outline button style for ghost/secondary buttons */
body.domains-page .domain-row a.btn.btn-ghost,
body.domains-page .domain-row .col:has(> a:nth-child(2)) a.btn-ghost {
  background-color: #F0F6FF !important;
  color: #155EEF !important;
  border: 1.5px solid #DBEAFE !important;
  box-shadow: none !important;
}
body.domains-page .domain-row a.btn.btn-ghost:hover,
body.domains-page .domain-row .col:has(> a:nth-child(2)) a.btn-ghost:hover {
  background-color: #E0EDFF !important;
  border-color: #BFDBFE !important;
  color: #0F4CD9 !important;
}

/* Price & Pass Tags (e.g. "Rs 3,000" or "Included in Pass") */
.domain-price-tag,
body.domains-page .meta {
  color: #12346B !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.domain-price-tag {
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* Subject & Chapter Listing Containers inside /domain?id=* */
.subject-accordion,
.topic-accordion-item,
.chapter-row-card {
  background-color: #FFFFFF !important;
  border: 1px solid #DBEAFE !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 6px rgba(18, 52, 107, 0.03) !important;
}

.subject-accordion:hover,
.chapter-row-card:hover {
  border-color: #BFDBFE !important;
}

/* Clean Progress Bars inside Exam Tracks */
.domain-progress-track {
  background-color: #F0F6FF !important;
  border: 1px solid #DBEAFE !important;
  height: 8px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.domain-progress-fill {
  background: #155EEF !important;
  height: 100% !important;
}

/* Dark Mode Overrides for Domains */
html[data-theme="dark"] body.domains-page,
html[data-theme="dark"] .domains-wrapper,
html[data-theme="dark"] .exam-domain-container,
html[data-theme="dark"] main:has(.domain-card),
html[data-theme="dark"] main:has([href*="/domain?id="]) {
  background-color: #0B132B !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .domain-card,
html[data-theme="dark"] .exam-track-card,
html[data-theme="dark"] body.domains-page .domain-row,
html[data-theme="dark"] .subject-accordion,
html[data-theme="dark"] .chapter-row-card,
html[data-theme="dark"] .topic-accordion-item {
  background-color: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .domain-card h2,
html[data-theme="dark"] .domain-card h3,
html[data-theme="dark"] .exam-track-card h3,
html[data-theme="dark"] body.domains-page .domain-row h3 {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .domain-card p,
html[data-theme="dark"] .exam-track-card p,
html[data-theme="dark"] body.domains-page .domain-row p {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .exam-stat-pill,
html[data-theme="dark"] .domain-badge,
html[data-theme="dark"] body.domains-page .chip-stat {
  background-color: rgba(21, 94, 239, 0.15) !important;
  color: #60A5FA !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
}

html[data-theme="dark"] .domain-price-tag,
html[data-theme="dark"] body.domains-page .meta {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .domain-progress-track {
  background-color: #0B132B !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}

/* ==========================================================================
   GLOBAL SCROLL ARCHITECTURE & GPU RENDERING OPTIMIZATION
   ========================================================================== */

/* Fix 1: Clean Root Scroll Container (Prevents Double-Container Lock) */
html {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: clip !important;
  scroll-behavior: auto !important; /* Disables janky native smooth-scroll conflicts */
}

body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: clip !important;
  overflow-y: visible !important; /* Let HTML handle the scrollbar */
  position: relative !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Fix 2: Prevent Jank on Anchors & Hash Links */
section[id], div[id] {
  scroll-margin-top: 80px !important; /* Prevents jumping under fixed navbar */
}

/* Fix 3: Optimize Hover Transitions During Scroll */
/* Disable heavy GPU repaints on all elements while mouse wheels over them */
.study-resource-card,
.paper-item,
.subject-card,
.subject,
.topic-row,
.uni-card,
.domain-card,
.exam-track-card,
.dx-item,
.dx-q,
.chap-btn,
.t-item,
.card,
article,
a {
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  will-change: auto !important; /* Do not force constant GPU layer compositing */
}

/* Fix 4: Remove Empty Overflow Blocks */
main,
main.main,
.main {
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
}

/* ==========================================================================
   EXAMS MARKETPLACE REFINEMENTS (/domains)
   ========================================================================== */

/* Hero Section */
.domains-hero-header {
  text-align: center;
  margin: 30px auto 35px auto;
  max-width: 800px;
}

.domains-hero-header h1 {
  color: #12346B;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.domains-hero-header p {
  color: #4B6382;
  font-size: 16px;
  line-height: 1.6;
}

.domains-track-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F0F6FF;
  border: 1px solid #DBEAFE;
  color: #155EEF;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 13px;
  margin-top: 12px;
}

/* Search Bar Wrapper */
.domains-search-container {
  max-width: 600px;
  margin: 0 auto 30px auto;
  position: relative;
}

.domains-search-container input {
  width: 100%;
  padding: 14px 20px 14px 45px;
  border: 1.5px solid #DBEAFE;
  border-radius: 12px;
  font-size: 15px;
  background: #FFFFFF;
  color: #12346B;
  outline: none;
  box-shadow: 0 4px 12px rgba(18, 52, 107, 0.04);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.domains-search-container input:focus {
  border-color: #155EEF;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12);
}

/* Card Button Hierarchy */
.btn-view-curriculum {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  color: #12346B !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.btn-view-curriculum:hover {
  background: #F0F6FF !important;
  border-color: #155EEF !important;
  color: #155EEF !important;
}

.btn-unlock-exam {
  background: #155EEF !important;
  border: 1px solid #155EEF !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-unlock-exam:hover {
  background: #0F4CD9 !important;
  border-color: #0F4CD9 !important;
  color: #FFFFFF !important;
}

.btn-unlock-exam.btn-start-prep {
  background: #059669 !important;
  border-color: #059669 !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
}

.btn-unlock-exam.btn-start-prep:hover {
  background: #047857 !important;
  border-color: #047857 !important;
}

/* Dark Mode Overrides */
html[data-theme="dark"] .domains-hero-header h1 {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .domains-hero-header p {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .domains-track-badge {
  background: rgba(21, 94, 239, 0.15) !important;
  color: #60A5FA !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
}

html[data-theme="dark"] .domains-search-container input {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.15) !important;
  color: #F8FAFC !important;
}

html[data-theme="dark"] .domains-search-container input:focus {
  border-color: #155EEF !important;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.25) !important;
}

html[data-theme="dark"] .btn-view-curriculum {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.15) !important;
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .btn-view-curriculum:hover {
  background: #111C3A !important;
  border-color: #60A5FA !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .exam-card-checklist {
  border-color: rgba(219, 234, 254, 0.1) !important;
}

html[data-theme="dark"] .exam-card-checklist li {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .empty-search-state {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}

html[data-theme="dark"] .empty-search-state h3 {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .empty-search-state p {
  color: #94A3B8 !important;
}

/* ==========================================================================
   DOMAINS REFINEMENTS: COMPACT BANNER, POLISHED SEARCH & ADAPTIVE BUTTONS
   ========================================================================== */

/* 1. Compact All-Access Banner */
.featured-pass-banner,
main > div > div:has(.btn-unlock-all),
div:has(> [href*="/pay?domain=5"]) {
  max-width: 1100px !important;
  margin: 16px auto 24px auto !important;
  padding: 18px 24px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #0B1727 0%, #102A45 60%, #153A60 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-shadow: 0 6px 18px rgba(11, 23, 39, 0.25) !important;
}

.featured-pass-banner h3 {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.3 !important;
}

.featured-pass-banner p {
  font-size: 13px !important;
  color: #CBD5E1 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.featured-pass-banner a,
.featured-pass-banner .btn-unlock-all {
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  background: #155EEF !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.35) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.featured-pass-banner a:hover,
.featured-pass-banner .btn-unlock-all:hover {
  background: #0F4CD9 !important;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.45) !important;
}

@media (max-width: 640px) {
  .featured-pass-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 16px !important;
  }
  .featured-pass-banner .btn-unlock-all {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* 2. Refined Search Bar */
.domains-search-container {
  max-width: 620px !important;
  margin: 0 auto 28px auto !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.domains-search-container .search-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #64748B !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

.domains-search-container input {
  width: 100% !important;
  height: 48px !important;
  padding: 0 18px 0 46px !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 12px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  background: #FFFFFF !important;
  color: #12346B !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(18, 52, 107, 0.04) !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.domains-search-container input::placeholder {
  color: #94A3B8 !important;
  font-size: 14px !important;
}

.domains-search-container input:focus {
  border-color: #155EEF !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.15), 0 4px 12px rgba(21, 94, 239, 0.08) !important;
}

/* 3. Theme-Adaptive Buttons */
.btn-view-curriculum {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  color: #12346B !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(18, 52, 107, 0.04) !important;
}

.btn-view-curriculum:hover {
  background: #F0F6FF !important;
  border-color: #155EEF !important;
  color: #155EEF !important;
}

.btn-unlock-exam {
  background: #155EEF !important;
  border: 1px solid #155EEF !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-unlock-exam:hover {
  background: #0F4CD9 !important;
  border-color: #0F4CD9 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.35) !important;
}

.btn-unlock-exam.btn-start-prep {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
}

.btn-unlock-exam.btn-start-prep:hover {
  background: #047857 !important;
  border-color: #047857 !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35) !important;
}

/* Dark Mode Theme-Adaptive Overrides */
html[data-theme="dark"] .domains-search-container input {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.16) !important;
  color: #F8FAFC !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .domains-search-container input::placeholder {
  color: #64748B !important;
}

html[data-theme="dark"] .domains-search-container input:focus {
  border-color: #388BFD !important;
  background: #0F1C33 !important;
  box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.25) !important;
}

html[data-theme="dark"] .domains-search-container .search-icon {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .btn-view-curriculum {
  background: #111C3A !important;
  border: 1.5px solid rgba(219, 234, 254, 0.18) !important;
  color: #F8FAFC !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .btn-view-curriculum:hover {
  background: rgba(21, 94, 239, 0.2) !important;
  border-color: #60A5FA !important;
  color: #60A5FA !important;
}

html[data-theme="dark"] .btn-unlock-exam {
  background: #155EEF !important;
  border-color: #3B82F6 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(21, 94, 239, 0.4) !important;
}

html[data-theme="dark"] .btn-unlock-exam:hover {
  background: #1D4ED8 !important;
  border-color: #60A5FA !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .btn-unlock-exam.btn-start-prep {
  background: #10B981 !important;
  border-color: #34D399 !important;
  color: #022C22 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35) !important;
}

html[data-theme="dark"] .btn-unlock-exam.btn-start-prep:hover {
  background: #059669 !important;
  border-color: #10B981 !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   DIRECT SPECIFICITY OVERRIDES: KILL WHITE RECTANGLE BEHIND BUTTONS (/domains)
   ========================================================================== */
.domain-card > div:last-child,
.domain-card-footer,
.card-actions-wrapper,
.domain-card .col,
.domain-row .col,
div:has(> a[href*="/domain?id="]):has(> a[href*="/pay?domain="]),
div:has(> .btn-view-curriculum),
body.dark-mode .domain-card div,
html[data-theme="dark"] .domain-card div,
body.dark-mode div:has(> .btn-view-curriculum),
html[data-theme="dark"] div:has(> .btn-view-curriculum) {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

body.dark-mode .domain-card,
html[data-theme="dark"] .domain-card,
body.dark-mode .exam-track-card,
html[data-theme="dark"] .exam-track-card,
body.dark-mode .domain-row,
html[data-theme="dark"] .domain-row,
body.dark-mode main > div > div:nth-of-type(3) > div,
html[data-theme="dark"] main > div > div:nth-of-type(3) > div {
  background-color: #111C3A !important;
  background: #111C3A !important;
  border: 1.5px solid rgba(219, 234, 254, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .domain-card a[href*="/domain?id="],
html[data-theme="dark"] .domain-card a[href*="/domain?id="],
body.dark-mode .btn-view-curriculum,
html[data-theme="dark"] .btn-view-curriculum {
  background-color: #18264E !important;
  background: #18264E !important;
  color: #93C5FD !important;
  border: 1.5px solid rgba(219, 234, 254, 0.2) !important;
  border-radius: 8px !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
}

body.dark-mode .domain-card a[href*="/domain?id="]:hover,
html[data-theme="dark"] .domain-card a[href*="/domain?id="]:hover,
body.dark-mode .btn-view-curriculum:hover,
html[data-theme="dark"] .btn-view-curriculum:hover {
  background-color: #2563EB !important;
  color: #FFFFFF !important;
}

body.dark-mode .domain-card a[href*="/pay?domain="],
html[data-theme="dark"] .domain-card a[href*="/pay?domain="],
body.dark-mode .btn-unlock-exam,
html[data-theme="dark"] .btn-unlock-exam {
  background-color: #155EEF !important;
  background: #155EEF !important;
  color: #FFFFFF !important;
  border: 1px solid #155EEF !important;
  border-radius: 8px !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
}

body.dark-mode .domain-card a[href*="/pay?domain="]:hover,
html[data-theme="dark"] .domain-card a[href*="/pay?domain="]:hover,
body.dark-mode .btn-unlock-exam:hover,
html[data-theme="dark"] .btn-unlock-exam:hover {
  background-color: #0F4CD9 !important;
}

/* ==========================================================================
   COMPACT HERO SECTION & TYPOGRAPHY REFINEMENTS (/domains)
   ========================================================================== */

/* Container Spacing */
.domains-page-header,
main > div:first-child {
  padding: 20px 24px 10px 24px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Main Heading */
.domains-page-header h1,
main h1 {
  font-size: 34px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
}

/* Subtitle */
.domains-page-header p,
main h1 + p {
  font-size: 15px !important;
  max-width: 650px !important;
  margin: 0 auto 14px auto !important;
  line-height: 1.5 !important;
}

/* Exam Tracks Available Pill */
.exam-count-badge,
div:has(> .fa-graduation-cap),
main span:has-text("Exam Tracks Available") {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Light / Dark Mode Color Adaptations */
html:not([data-theme="dark"]):not(.dark) body:not(.dark-mode) .domains-page-header h1 {
  color: #12346B !important;
}
html:not([data-theme="dark"]):not(.dark) body:not(.dark-mode) .domains-page-header p {
  color: #4B6382 !important;
}
html:not([data-theme="dark"]):not(.dark) body:not(.dark-mode) .exam-count-badge {
  background: #EBF5FF !important;
  border: 1px solid #BFDBFE !important;
  color: #155EEF !important;
}

html[data-theme="dark"] .domains-page-header h1,
body.dark-mode .domains-page-header h1,
html.dark .domains-page-header h1 {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .domains-page-header p,
body.dark-mode .domains-page-header p,
html.dark .domains-page-header p {
  color: #94A3B8 !important;
}
html[data-theme="dark"] .exam-count-badge,
body.dark-mode .exam-count-badge,
html.dark .exam-count-badge {
  background: rgba(21, 94, 239, 0.15) !important;
  border: 1px solid rgba(96, 165, 250, 0.3) !important;
  color: #93C5FD !important;
}

/* ==========================================================================
   EXECUTIVE DEEP NAVY & ROYAL BLUE HERO BANNER (.domains-hero-card)
   ========================================================================== */
.domains-hero-card {
  max-width: 1100px !important;
  margin: 16px auto 24px auto !important;
  padding: 36px 32px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #0B1727 0%, #102A45 55%, #153A60 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 30px -8px rgba(11, 23, 39, 0.35) !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.domains-hero-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -15%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(21, 94, 239, 0.28), transparent 70%);
  pointer-events: none;
}

.domains-hero-card::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -15%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18), transparent 70%);
  pointer-events: none;
}

.domains-hero-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}

.domains-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(21, 94, 239, 0.2) !important;
  border: 1px solid rgba(96, 165, 250, 0.35) !important;
  color: #93C5FD !important;
  padding: 6px 16px !important;
  border-radius: 24px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.domains-hero-card h1 {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.25 !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.domains-hero-card h1 span {
  color: #60A5FA !important;
  background: linear-gradient(135deg, #60A5FA 0%, #93C5FD 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.domains-hero-card p {
  color: #CBD5E1 !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  max-width: 650px !important;
  margin: 0 auto !important;
  -webkit-text-fill-color: #CBD5E1 !important;
}

@media (max-width: 640px) {
  .domains-hero-card {
    padding: 26px 18px !important;
    margin: 12px auto 18px auto !important;
    border-radius: 16px !important;
  }
  .domains-hero-card h1 {
    font-size: 26px !important;
  }
  .domains-hero-card p {
    font-size: 13.5px !important;
  }
}

/* ==========================================================================
   DOMAINS HEADER REORDER & RESTYLE RULES (v76)
   ========================================================================== */
.domains-page-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 16px 40px 16px !important;
  box-sizing: border-box !important;
}

.domains-hero-card {
  max-width: 1100px !important;
  margin: 16px auto 20px auto !important;
  padding: 36px 36px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #0B1727 0%, #102A45 55%, #153A60 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 30px -8px rgba(11, 23, 39, 0.35) !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.domains-hero-text,
.domains-hero-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 760px !important;
  text-align: left !important;
  margin: 0 !important;
}

.domains-hero-text h1,
.domains-hero-card h1 {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.domains-hero-text h1 span,
.domains-hero-card h1 span {
  color: #60A5FA !important;
  background: linear-gradient(135deg, #60A5FA 0%, #93C5FD 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.domains-hero-text p,
.domains-hero-card p {
  color: #CBD5E1 !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  max-width: 650px !important;
  margin: 0 0 18px 0 !important;
  text-align: left !important;
  -webkit-text-fill-color: #CBD5E1 !important;
}

.domains-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(21, 94, 239, 0.22) !important;
  border: 1px solid rgba(96, 165, 250, 0.35) !important;
  color: #93C5FD !important;
  padding: 6px 16px !important;
  border-radius: 24px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.domains-search-section {
  max-width: 1100px !important;
  margin: 0 auto 20px auto !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.domains-search-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(18, 52, 107, 0.05) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.domains-search-wrapper:focus-within {
  border-color: #155EEF !important;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.15), 0 4px 14px rgba(21, 94, 239, 0.08) !important;
}

.domains-search-wrapper .search-icon {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  color: #60A5FA !important;
}

.domains-search-wrapper input {
  width: 100% !important;
  height: 52px !important;
  padding: 0 140px 0 52px !important;
  border: none !important;
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #12346B !important;
  outline: none !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.domains-search-wrapper input::placeholder {
  color: #94A3B8 !important;
  font-size: 14px !important;
}

.search-hint {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #F0F6FF !important;
  border: 1px solid #DBEAFE !important;
  color: #64748B !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  pointer-events: none !important;
  user-select: none !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

html[data-theme="dark"] .domains-search-wrapper,
body.dark-mode .domains-search-wrapper {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.16) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .domains-search-wrapper input,
body.dark-mode .domains-search-wrapper input {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .domains-search-wrapper input::placeholder,
body.dark-mode .domains-search-wrapper input::placeholder {
  color: #64748B !important;
}

html[data-theme="dark"] .search-hint,
body.dark-mode .search-hint {
  background: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.15) !important;
  color: #94A3B8 !important;
}

@media (max-width: 640px) {
  .domains-search-wrapper input {
    height: 48px !important;
    padding: 0 16px 0 46px !important;
    font-size: 14px !important;
  }
  .domains-search-wrapper .search-icon {
    left: 14px !important;
  }
  .search-hint {
    display: none !important;
  }
}

/* ==========================================================================
   CLEAN FOOTER GLOBAL RESET & FIX OVERLAPPING LOGO (v77)
   ========================================================================== */
footer,
.site-footer,
.footer-wrapper {
  background-color: #0B132B !important;
  color: #94A3B8 !important;
  padding: 48px 24px 30px 24px !important;
  border-top: 1px solid rgba(219, 234, 254, 0.1) !important;
}

/* Fix Exam Tracks: Remove all box styling and make them normal list links */
footer ul,
.footer-column ul,
.site-footer ul,
.site-footer .foot-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

footer li,
.site-footer li,
.site-footer .foot-list li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Force links in ALL footer columns (including Exam Tracks) to be clean plain text */
footer a,
.footer-column a,
footer ul li a,
.site-footer a,
.site-footer ul li a,
.foot-list a,
footer div:has(> a[href*="/domain?id="]) a,
footer a[href*="/domain?id="],
.site-footer a[href*="/domain?id="],
body.dark-mode footer a[href*="/domain?id="],
html[data-theme="dark"] footer a[href*="/domain?id="],
body.dark-mode .site-footer a[href*="/domain?id="],
html[data-theme="dark"] .site-footer a[href*="/domain?id="] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #CBD5E1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  width: auto !important;
  text-align: left !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

/* Clean Hover State */
footer a:hover,
.footer-column a:hover,
footer ul li a:hover,
.site-footer a:hover,
.site-footer ul li a:hover,
.foot-list a:hover,
footer a[href*="/domain?id="]:hover,
.site-footer a[href*="/domain?id="]:hover,
body.dark-mode footer a[href*="/domain?id="]:hover,
html[data-theme="dark"] footer a[href*="/domain?id="]:hover,
body.dark-mode .site-footer a[href*="/domain?id="]:hover,
html[data-theme="dark"] .site-footer a[href*="/domain?id="]:hover {
  color: #60A5FA !important;
  transform: translateX(3px) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Preserve Social Media Icon Buttons in Footer */
footer .foot-social,
.site-footer .foot-social {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

footer .foot-social a,
.site-footer .foot-social a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #CBD5E1 !important;
  transform: none !important;
}

footer .foot-social a:hover,
.site-footer .foot-social a:hover {
  background: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
  transform: translateY(-2px) !important;
}

/* Fix Column Headings */
footer h4,
.footer-column h4,
.site-footer h4 {
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  letter-spacing: 0.02em !important;
}

/* Fix Double Overlapping Logo */
footer img:first-of-type ~ img,
.site-footer img:first-of-type ~ img,
footer a[aria-label="EduXperti home"] img:not(:first-child),
.site-footer a[aria-label="EduXperti home"] img:not(:first-child) {
  display: none !important; /* Hide secondary duplicate logo image */
}

footer img,
.site-footer img,
.foot-logo {
  height: 38px !important;
  width: auto !important;
  margin-bottom: 14px !important;
  display: block !important;
}

/* Countdown Timer Fix: Never display ended notice when hidden */
.countdown-ended[hidden],
p.countdown-ended[hidden] {
  display: none !important;
}

/* ==========================================================================
   HIGH CONTRAST & LEGIBILITY DESIGN SYSTEM OVERRIDES (/domain?id=*)
   ========================================================================== */

/* Fix Subject Description Text Contrast (Crisp Slate Navy for 100% legibility) */
.subject-description,
.subject-header-desc,
.subject > p,
.subject p.muted,
section.subject-section p,
section.subject p,
.dx-layout .subject > p,
.dx-layout .subject p.muted {
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
  text-transform: none !important; /* Stop aggressive all-caps */
}

/* Subject Title */
.subject-section h2,
.subject h2,
.subject-title,
.dx-layout .subject h2,
.dx-layout .subject-section h2 {
  color: #12346B !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

/* Remove Distracting Background Blue Blur/Blob */
.subject-section::before,
.subject-section::after,
.subject::before,
.subject::after,
div:has(> .subject-description)::before {
  display: none !important;
}

/* Chapter Pill Buttons (Fix Dark-on-Dark: Make Crisp White Pill with Deep Navy Text) */
.dx-layout .chap-btns,
.chap-btns {
  display: flex !important;
  gap: 10px !important;
  padding: 0 0 16px !important;
  flex-wrap: wrap !important;
}

.dx-layout .chap-btn,
.chap-btn,
button.chap-btn {
  border-radius: 999px !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  min-height: 38px !important;
  padding: 8px 16px !important;
  color: #12346B !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(18, 52, 107, 0.04) !important;
  transition: all 0.2s ease !important;
}

.dx-layout .chap-btn:hover,
.chap-btn:hover,
button.chap-btn:hover {
  background: #F0F6FF !important;
  background-color: #F0F6FF !important;
  border-color: #93C5FD !important;
  color: #155EEF !important;
  transform: translateY(-1px) !important;
}

.dx-layout .chap-btn.active,
.chap-btn.active,
button.chap-btn.active {
  background: #155EEF !important;
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.28) !important;
}

.dx-layout .chap-btn small,
.chap-btn small {
  color: #475569 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  margin-left: 4px !important;
}

.dx-layout .chap-btn.active small,
.chap-btn.active small {
  color: #FFFFFF !important;
  opacity: 0.9 !important;
}

/* Jump Navigation Pills (Quick Exam Track Jump) */
.dx-jump a {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #12346B !important;
  border: 1.5px solid #DBEAFE !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(18, 52, 107, 0.04) !important;
}

.dx-jump a:hover {
  background: #155EEF !important;
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
}

/* Topic Accordion Details & Summaries */
.dx-layout .topic-row summary,
.topic-row summary {
  color: #12346B !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
}

/* Target Universities & Section Headings */
.dx-layout .sec-title,
.sec-title {
  color: #12346B !important;
  font-weight: 800 !important;
}

.dx-layout .uni-card h3,
.uni-card h3 {
  color: #12346B !important;
  font-weight: 800 !important;
}

.dx-layout .uni-city,
.uni-city {
  color: #475569 !important;
  font-weight: 600 !important;
}

.dx-layout .dx-hub-head h3 {
  color: #12346B !important;
  font-weight: 800 !important;
}

.dx-layout .dx-hub-head .meta {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* Dark Mode Preservation */
html[data-theme="dark"] .subject-description,
body.dark-mode .subject-description,
html[data-theme="dark"] .subject-header-desc,
body.dark-mode .subject-header-desc,
html[data-theme="dark"] .subject > p,
body.dark-mode .subject > p,
html[data-theme="dark"] .subject p.muted,
body.dark-mode .subject p.muted,
html[data-theme="dark"] section.subject-section p,
body.dark-mode section.subject-section p {
  color: #CBD5E1 !important;
}

html[data-theme="dark"] .subject-section h2,
body.dark-mode .subject-section h2,
html[data-theme="dark"] .subject h2,
body.dark-mode .subject h2,
html[data-theme="dark"] .subject-title,
body.dark-mode .subject-title,
html[data-theme="dark"] .dx-layout .subject h2,
body.dark-mode .dx-layout .subject h2 {
  color: #F8FAFC !important;
}

html[data-theme="dark"] .dx-layout .chap-btn,
body.dark-mode .dx-layout .chap-btn,
html[data-theme="dark"] .chap-btn,
body.dark-mode .chap-btn {
  background: #111C3A !important;
  background-color: #111C3A !important;
  color: #CBD5E1 !important;
  border-color: rgba(219, 234, 254, 0.16) !important;
}

html[data-theme="dark"] .dx-layout .chap-btn small,
body.dark-mode .dx-layout .chap-btn small,
html[data-theme="dark"] .chap-btn small,
body.dark-mode .chap-btn small {
  color: #94A3B8 !important;
}

html[data-theme="dark"] .dx-layout .chap-btn.active,
body.dark-mode .dx-layout .chap-btn.active,
html[data-theme="dark"] .chap-btn.active,
body.dark-mode .chap-btn.active {
  background: #155EEF !important;
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
}

html[data-theme="dark"] .dx-jump a,
body.dark-mode .dx-jump a {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.15) !important;
  color: #CBD5E1 !important;
}


/* ==========================================================================
   SUBJECT CARD HEADER STACK & HIGH-CONTRAST DYNAMIC TYPOGRAPHY
   ========================================================================== */

/* Subject Card Header Stack */
.subject-section,
div:has(> .subject-description),
section:has(> details),
section:has(details),
.dx-layout .subject {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 14px rgba(18, 52, 107, 0.04) !important;
}

/* Fix Subject Title */
.subject-section h2,
.subject-title,
.dx-layout .subject h2,
.dx-layout .subject-section h2 {
  color: #12346B !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.subject-title-icon,
.subject-section h2 svg,
.subject-title svg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #155EEF !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
}

/* FIX THE WASHED-OUT LINE (Light Mode) */
body:not(.dark-mode) .subject-description,
html:not([data-theme="dark"]) .subject-description,
body:not(.dark-mode) .subject-section p,
html:not([data-theme="dark"]) .subject-section p,
body:not(.dark-mode) div:has(> h2) + p,
html:not([data-theme="dark"]) div:has(> h2) + p,
body:not(.dark-mode) .subject-header-desc,
html:not([data-theme="dark"]) .subject-header-desc,
.subject-description,
.subject-header-desc {
  color: #334155 !important; /* Deep Slate Navy for high contrast & legibility */
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
  max-width: 750px !important;
  margin: 0 0 16px 0 !important;
  text-transform: none !important;
}

/* FIX THE WASHED-OUT LINE (Dark Mode) */
body.dark-mode .subject-section,
body.dark-mode section:has(> details),
body.dark-mode section:has(details),
body.dark-mode .dx-layout .subject,
html[data-theme="dark"] .subject-section,
html[data-theme="dark"] section:has(> details),
html[data-theme="dark"] section:has(details),
html[data-theme="dark"] .dx-layout .subject {
  background-color: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}

body.dark-mode .subject-section h2,
body.dark-mode .subject-title,
body.dark-mode .dx-layout .subject h2,
html[data-theme="dark"] .subject-section h2,
html[data-theme="dark"] .subject-title,
html[data-theme="dark"] .dx-layout .subject h2 {
  color: #FFFFFF !important;
}

body.dark-mode .subject-description,
body.dark-mode .subject-section p,
body.dark-mode div:has(> h2) + p,
body.dark-mode .subject-header-desc,
html[data-theme="dark"] .subject-description,
html[data-theme="dark"] .subject-section p,
html[data-theme="dark"] div:has(> h2) + p,
html[data-theme="dark"] .subject-header-desc {
  color: #94A3B8 !important; /* Clean light slate for dark mode */
}

body.dark-mode .subject-title-icon,
html[data-theme="dark"] .subject-title-icon,
body.dark-mode .subject-section h2 svg,
html[data-theme="dark"] .subject-section h2 svg,
body.dark-mode .subject-title svg,
html[data-theme="dark"] .subject-title svg {
  color: #60A5FA !important;
}



/* ==========================================================================
   DYNAMIC THEME CONTRAST & STUDY HUB SAAS CARDS
   ========================================================================== */

/* LIGHT MODE: High-Contrast Navy & Slate */
body:not(.dark-mode) .subject-section,
html:not([data-theme="dark"]) .subject-section,
body:not(.dark-mode) section:has(details),
html:not([data-theme="dark"]) section:has(details),
body:not(.dark-mode) main > div > section,
html:not([data-theme="dark"]) main > div > section,
body:not(.dark-mode) .dx-layout .subject,
html:not([data-theme="dark"]) .dx-layout .subject {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(18, 52, 107, 0.04) !important;
}

/* Fix the invisible white text bug in Light Mode */
body:not(.dark-mode) .subject-section p,
html:not([data-theme="dark"]) .subject-section p,
body:not(.dark-mode) section p,
html:not([data-theme="dark"]) section p,
body:not(.dark-mode) div:has(> details) p,
html:not([data-theme="dark"]) div:has(> details) p,
body:not(.dark-mode) .subject-description,
html:not([data-theme="dark"]) .subject-description,
body:not(.dark-mode) .subject-header-desc,
html:not([data-theme="dark"]) .subject-header-desc,
.subject-description,
.subject-header-desc {
  color: #334155 !important; /* Deep Slate Navy - 100% visible on white */
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-transform: none !important;
}

body:not(.dark-mode) .subject-section h2,
html:not([data-theme="dark"]) .subject-section h2,
body:not(.dark-mode) section h2,
html:not([data-theme="dark"]) section h2,
body:not(.dark-mode) .subject-title,
html:not([data-theme="dark"]) .subject-title {
  color: #12346B !important;
  font-weight: 800 !important;
}

/* DARK MODE: Polished Slate on Navy */
body.dark-mode .subject-section,
html[data-theme="dark"] .subject-section,
body.dark-mode section:has(details),
html[data-theme="dark"] section:has(details),
body.dark-mode main > div > section,
html[data-theme="dark"] main > div > section,
body.dark-mode .dx-layout .subject,
html[data-theme="dark"] .dx-layout .subject {
  background-color: #111C3A !important;
  border: 1.5px solid rgba(219, 234, 254, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .subject-section p,
html[data-theme="dark"] .subject-section p,
body.dark-mode section p,
html[data-theme="dark"] section p,
body.dark-mode .subject-description,
html[data-theme="dark"] .subject-description,
body.dark-mode .subject-header-desc,
html[data-theme="dark"] .subject-header-desc {
  color: #94A3B8 !important; /* Light Slate for Dark Mode */
  opacity: 1 !important;
}

body.dark-mode .subject-section h2,
html[data-theme="dark"] .subject-section h2,
body.dark-mode section h2,
html[data-theme="dark"] section h2,
body.dark-mode .subject-title,
html[data-theme="dark"] .subject-title {
  color: #FFFFFF !important;
}

/* STUDY HUB SIDEBAR SAAS CARD */
aside.papers-side,
aside.dx-side,
#dx-hub {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(18, 52, 107, 0.04) !important;
  overflow: hidden !important;
}

.dx-hub-head {
  padding: 18px 20px !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #DBEAFE !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.dx-hub-head h3 {
  color: #12346B !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.dx-hub-head .meta {
  color: #475569 !important;
  font-size: 12px !important;
  margin: 2px 0 0 0 !important;
}

.dx-hub-ic {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: #EFF6FF !important;
  border: 1px solid #DBEAFE !important;
  color: #155EEF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.dx-tabs {
  display: flex !important;
  padding: 10px 14px !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #DBEAFE !important;
}

.dx-tab {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #F8FAFC !important;
  border: 1px solid #DBEAFE !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.dx-tab:hover {
  color: #155EEF !important;
  background: #EFF6FF !important;
  border-color: #93C5FD !important;
}

.dx-tab.active {
  background: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
  box-shadow: 0 2px 8px rgba(21, 94, 239, 0.25) !important;
}

.dx-tab.active small {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

.dx-tab small {
  padding: 1px 6px !important;
  border-radius: 999px !important;
  background: rgba(18, 52, 107, 0.08) !important;
  color: #12346B !important;
  font-size: 11px !important;
}

/* STUDY HUB DARK MODE */
body.dark-mode aside.papers-side,
html[data-theme="dark"] aside.papers-side,
body.dark-mode aside.dx-side,
html[data-theme="dark"] aside.dx-side,
body.dark-mode #dx-hub,
html[data-theme="dark"] #dx-hub {
  background-color: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .dx-hub-head,
html[data-theme="dark"] .dx-hub-head {
  background: #0E182A !important;
  border-bottom-color: rgba(219, 234, 254, 0.12) !important;
}

body.dark-mode .dx-hub-head h3,
html[data-theme="dark"] .dx-hub-head h3 {
  color: #FFFFFF !important;
}

body.dark-mode .dx-hub-head .meta,
html[data-theme="dark"] .dx-hub-head .meta {
  color: #94A3B8 !important;
}

body.dark-mode .dx-hub-ic,
html[data-theme="dark"] .dx-hub-ic {
  background: rgba(21, 94, 239, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #60A5FA !important;
}

body.dark-mode .dx-tabs,
html[data-theme="dark"] .dx-tabs {
  background: #111C3A !important;
  border-bottom-color: rgba(219, 234, 254, 0.12) !important;
}

body.dark-mode .dx-tab,
html[data-theme="dark"] .dx-tab {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
  color: #94A3B8 !important;
}

body.dark-mode .dx-tab.active,
html[data-theme="dark"] .dx-tab.active {
  background: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
}

/* TOPIC ACCORDIONS (ROYAL BLUE SAAS CARDS) */
.topic-row,
.topic-accordion-item,
details.topic-row {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(18, 52, 107, 0.02) !important;
}

.topic-row:hover,
details.topic-row:hover {
  border-color: #93C5FD !important;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.06) !important;
}

.topic-row[open],
details.topic-row[open] {
  border-color: #155EEF !important;
  box-shadow: 0 4px 16px rgba(21, 94, 239, 0.08) !important;
}

.topic-row summary,
details.topic-row summary {
  padding: 14px 18px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #12346B !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
  user-select: none !important;
}

.topic-row summary::-webkit-details-marker {
  display: none !important;
}

.topic-row[open] summary,
details.topic-row[open] summary {
  background: #F8FAFC !important;
  border-bottom: 1px solid #DBEAFE !important;
}

.topic-items {
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: #FFFFFF !important;
}

.t-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.t-item:hover {
  background: #EFF6FF !important;
  border-color: #93C5FD !important;
  transform: translateX(3px) !important;
}

/* TOPIC ACCORDIONS DARK MODE */
body.dark-mode .topic-row,
html[data-theme="dark"] .topic-row,
body.dark-mode .topic-accordion-item,
html[data-theme="dark"] .topic-accordion-item,
body.dark-mode details.topic-row,
html[data-theme="dark"] details.topic-row {
  background: #0E182A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
  box-shadow: none !important;
}

body.dark-mode .topic-row[open],
html[data-theme="dark"] .topic-row[open],
body.dark-mode details.topic-row[open],
html[data-theme="dark"] details.topic-row[open] {
  border-color: #155EEF !important;
}

body.dark-mode .topic-row summary,
html[data-theme="dark"] .topic-row summary,
body.dark-mode details.topic-row summary,
html[data-theme="dark"] details.topic-row summary {
  color: #F8FAFC !important;
}

body.dark-mode .topic-row[open] summary,
html[data-theme="dark"] .topic-row[open] summary,
body.dark-mode details.topic-row[open] summary,
html[data-theme="dark"] details.topic-row[open] summary {
  background: #111C3A !important;
  border-bottom-color: rgba(219, 234, 254, 0.12) !important;
}

body.dark-mode .topic-items,
html[data-theme="dark"] .topic-items {
  background: #0E182A !important;
}

body.dark-mode .t-item,
html[data-theme="dark"] .t-item {
  background: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.1) !important;
  color: #F1F5F9 !important;
}

body.dark-mode .t-item:hover,
html[data-theme="dark"] .t-item:hover {
  background: #152244 !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
}

/* CHAPTER PILLS & COUNTS */
.chap-count,
.chap-btn small {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-left: 6px !important;
  background: rgba(18, 52, 107, 0.08) !important;
  color: #12346B !important;
}

.chap-btn.active .chap-count,
.chap-btn.active small {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

body.dark-mode .chap-count,
html[data-theme="dark"] .chap-count,
body.dark-mode .chap-btn small,
html[data-theme="dark"] .chap-btn small {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #94A3B8 !important;
}

body.dark-mode .chap-btn.active .chap-count,
html[data-theme="dark"] .chap-btn.active .chap-count,
body.dark-mode .chap-btn.active small,
html[data-theme="dark"] .chap-btn.active small {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

.subject-title-icon,
.dx-jump-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}



/* ==========================================================================
   SUBJECT DESCRIPTIONS HIGH-CONTRAST & PDF THUMBNAILS
   ========================================================================== */

/* LIGHT MODE: High-Contrast Navy/Slate Text */
body:not(.dark-mode) main section > p,
html:not([data-theme="dark"]) main section > p,
body:not(.dark-mode) .subject-section p,
html:not([data-theme="dark"]) .subject-section p,
body:not(.dark-mode) div:has(> details) ~ p,
html:not([data-theme="dark"]) div:has(> details) ~ p,
body:not(.dark-mode) h2 + p,
html:not([data-theme="dark"]) h2 + p,
body:not(.dark-mode) .subject-description,
html:not([data-theme="dark"]) .subject-description,
body:not(.dark-mode) .subject-header-desc,
html:not([data-theme="dark"]) .subject-header-desc,
.subject-description,
.subject-header-desc {
  color: #334155 !important; /* Deep readable slate */
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-transform: none !important;
}

/* DARK MODE: Light Slate Text */
body.dark-mode main section > p,
html[data-theme="dark"] main section > p,
body.dark-mode .subject-section p,
html[data-theme="dark"] .subject-section p,
body.dark-mode h2 + p,
html[data-theme="dark"] h2 + p,
body.dark-mode .subject-description,
html[data-theme="dark"] .subject-description,
body.dark-mode .subject-header-desc,
html[data-theme="dark"] .subject-header-desc {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

/* PDF Thumbnails & Resource Previews */
.t-item img,
.dx-item img,
.paper-item img {
  width: 42px !important;
  height: 52px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  border: 1px solid #DBEAFE !important;
  box-shadow: 0 2px 6px rgba(18, 52, 107, 0.08) !important;
  background: #FFFFFF !important;
}

body.dark-mode .t-item img,
html[data-theme="dark"] .t-item img,
body.dark-mode .dx-item img,
html[data-theme="dark"] .dx-item img,
body.dark-mode .paper-item img,
html[data-theme="dark"] .paper-item img {
  border-color: rgba(219, 234, 254, 0.15) !important;
  background: #0E182A !important;
}

.t-ic,
.dx-ic {
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
  background: #EFF6FF !important;
  border: 1px solid #DBEAFE !important;
  color: #155EEF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

body.dark-mode .t-ic,
html[data-theme="dark"] .t-ic,
body.dark-mode .dx-ic,
html[data-theme="dark"] .dx-ic {
  background: rgba(21, 94, 239, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
  color: #60A5FA !important;
}



/* =========================================
   UNIVERSITY CARD "OPEN ->" ACTION BUTTON
   ========================================= */
a[href*="/uni?id="] > span:last-child,
.uni-card .open-btn,
.uni-card .uni-go,
.uni-go,
a[href*="/uni?id="] span:last-of-type {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  width: auto !important;
}

/* LIGHT MODE: Clean Royal Blue Solid Button */
body:not(.dark-mode) a[href*="/uni?id="] > span:last-child,
html:not([data-theme="dark"]) a[href*="/uni?id="] > span:last-child,
body:not(.dark-mode) .uni-card .open-btn,
html:not([data-theme="dark"]) .uni-card .open-btn,
body:not(.dark-mode) .uni-card .uni-go,
html:not([data-theme="dark"]) .uni-card .uni-go,
body:not(.dark-mode) .uni-go,
html:not([data-theme="dark"]) .uni-go,
body:not(.dark-mode) a[href*="/uni?id="] span:last-of-type,
html:not([data-theme="dark"]) a[href*="/uni?id="] span:last-of-type {
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  border: 1px solid #155EEF !important;
  box-shadow: 0 2px 6px rgba(21, 94, 239, 0.25) !important;
}

body:not(.dark-mode) a[href*="/uni?id="]:hover > span:last-child,
html:not([data-theme="dark"]) a[href*="/uni?id="]:hover > span:last-child,
body:not(.dark-mode) .uni-card:hover .open-btn,
html:not([data-theme="dark"]) .uni-card:hover .open-btn,
body:not(.dark-mode) .uni-card:hover .uni-go,
html:not([data-theme="dark"]) .uni-card:hover .uni-go,
body:not(.dark-mode) a[href*="/uni?id="] span:last-of-type:hover,
html:not([data-theme="dark"]) a[href*="/uni?id="] span:last-of-type:hover {
  background-color: #0F4CD9 !important;
  border-color: #0F4CD9 !important;
  transform: translateX(2px) !important;
}

/* DARK MODE: Subtle Translucent Pill Button */
body.dark-mode a[href*="/uni?id="] > span:last-child,
html[data-theme="dark"] a[href*="/uni?id="] > span:last-child,
body.dark-mode .uni-card .open-btn,
html[data-theme="dark"] .uni-card .open-btn,
body.dark-mode .uni-card .uni-go,
html[data-theme="dark"] .uni-card .uni-go,
body.dark-mode .uni-go,
html[data-theme="dark"] .uni-go,
body.dark-mode a[href*="/uni?id="] span:last-of-type,
html[data-theme="dark"] a[href*="/uni?id="] span:last-of-type {
  background-color: rgba(21, 94, 239, 0.18) !important;
  color: #93C5FD !important;
  border: 1px solid rgba(147, 197, 253, 0.3) !important;
  box-shadow: none !important;
}

body.dark-mode a[href*="/uni?id="]:hover > span:last-child,
html[data-theme="dark"] a[href*="/uni?id="]:hover > span:last-child,
body.dark-mode .uni-card:hover .open-btn,
html[data-theme="dark"] .uni-card:hover .open-btn,
body.dark-mode .uni-card:hover .uni-go,
html[data-theme="dark"] .uni-card:hover .uni-go,
body.dark-mode a[href*="/uni?id="] span:last-of-type:hover,
html[data-theme="dark"] a[href*="/uni?id="] span:last-of-type:hover {
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  border-color: #155EEF !important;
  transform: translateX(2px) !important;
}


/* ========================================================
   SUBJECT SYLLABUS DESCRIPTION HIGH-CONTRAST DYNAMIC RULES
   ======================================================== */
/* 1. LIGHT MODE: High-Contrast Dark Text on White Cards */
body:not(.dark-mode) main section > p,
html:not([data-theme="dark"]) main section > p,
body:not(.dark-mode) .subject-section p,
html:not([data-theme="dark"]) .subject-section p,
body:not(.dark-mode) section:has(details) > p,
html:not([data-theme="dark"]) section:has(details) > p,
body:not(.dark-mode) div:has(> details) p,
html:not([data-theme="dark"]) div:has(> details) p,
body:not(.dark-mode) div:has(> details) ~ p,
html:not([data-theme="dark"]) div:has(> details) ~ p,
body:not(.dark-mode) h2 + p,
html:not([data-theme="dark"]) h2 + p,
body:not(.dark-mode) .subject-description,
html:not([data-theme="dark"]) .subject-description,
body:not(.dark-mode) .subject-header-desc,
html:not([data-theme="dark"]) .subject-header-desc,
body:not(.dark-mode) .dx-layout .subject p,
html:not([data-theme="dark"]) .dx-layout .subject p,
.subject-description,
.subject-header-desc {
  color: #1E293B !important; /* High-contrast Slate Navy */
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
}

/* Ensure Subject Titles are Deep Navy in Light Mode */
body:not(.dark-mode) .subject-section h2,
html:not([data-theme="dark"]) .subject-section h2,
body:not(.dark-mode) section:has(details) h2,
html:not([data-theme="dark"]) section:has(details) h2,
body:not(.dark-mode) .subject-title,
html:not([data-theme="dark"]) .subject-title,
body:not(.dark-mode) .dx-layout .subject h2,
html:not([data-theme="dark"]) .dx-layout .subject h2 {
  color: #12346B !important;
  font-weight: 800 !important;
}

/* 2. DARK MODE: Bright Crisp White Text on Dark Navy Cards */
body.dark-mode main section > p,
html[data-theme="dark"] main section > p,
body.dark-mode .subject-section p,
html[data-theme="dark"] .subject-section p,
body.dark-mode section:has(details) > p,
html[data-theme="dark"] section:has(details) > p,
body.dark-mode div:has(> details) p,
html[data-theme="dark"] div:has(> details) p,
body.dark-mode div:has(> details) ~ p,
html[data-theme="dark"] div:has(> details) ~ p,
body.dark-mode h2 + p,
html[data-theme="dark"] h2 + p,
body.dark-mode .subject-description,
html[data-theme="dark"] .subject-description,
body.dark-mode .subject-header-desc,
html[data-theme="dark"] .subject-header-desc,
body.dark-mode .dx-layout .subject p,
html[data-theme="dark"] .dx-layout .subject p {
  color: #F8FAFC !important; /* Crisp Clean White */
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* Ensure Subject Titles are Pure White in Dark Mode */
body.dark-mode .subject-section h2,
html[data-theme="dark"] .subject-section h2,
body.dark-mode section:has(details) h2,
html[data-theme="dark"] section:has(details) h2,
body.dark-mode .subject-title,
html[data-theme="dark"] .subject-title,
body.dark-mode .dx-layout .subject h2,
html[data-theme="dark"] .dx-layout .subject h2 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}


/* ========================================================
   SUBJECT LEAD DESC (.subject-lead-desc) EXPLICIT RULES
   ======================================================== */
.subject-lead-desc,
body:not(.dark-mode) .subject-lead-desc,
html:not([data-theme="dark"]) .subject-lead-desc,
body:not(.dark-mode) .subject .subject-lead-desc,
body:not(.dark-mode) .subject-section .subject-lead-desc,
body:not(.dark-mode) p.subject-lead-desc {
  color: #1E293B !important; /* High-contrast Slate Navy */
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
  display: block !important;
  visibility: visible !important;
}

body.dark-mode .subject-lead-desc,
html[data-theme="dark"] .subject-lead-desc,
body.dark-mode .subject .subject-lead-desc,
body.dark-mode .subject-section .subject-lead-desc,
body.dark-mode p.subject-lead-desc {
  color: #F8FAFC !important; /* Crisp Clean White */
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}


/* ========================================================
   UNIVERSITY PAGES (/uni?id=*) HERO BANNER & CLEARANCE
   ======================================================== */
/* Container Spacing for University Page - Reduced Top Space */
main > div:has(> .uni-hero),
.uni-page-container,
body.uni-page main,
main:has(> .uni-hero),
main:has(> .uni-hero-banner) {
  margin-top: 0 !important;
  padding-top: 24px !important;
}

/* University Hero Card - Compact Left-Aligned SaaS Banner */
.uni-hero-banner,
.uni-hero,
.uni-page-container > section:first-of-type,
body.uni-page main > section:first-of-type,
main:has(.uni-hero) > section:first-of-type {
  background: linear-gradient(135deg, #0B1727 0%, #102A45 60%, #153A60 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  padding: 24px 32px !important;
  margin: 0 auto 24px auto !important;
  max-width: 1220px !important;
  width: 100% !important;
  box-shadow: 0 10px 28px rgba(11, 23, 39, 0.35) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 24px !important;
  box-sizing: border-box !important;
}

.uni-hero-banner h1,
.uni-hero h1,
body.uni-page .uni-hero-banner h1,
body.uni-page .uni-hero h1,
body.uni-page main > section:first-of-type h1 {
  color: #FFFFFF !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.uni-hero-banner p,
.uni-hero p,
body.uni-page .uni-hero-banner p,
body.uni-page .uni-hero p,
body.uni-page main > section:first-of-type p {
  color: #CBD5E1 !important;
  font-size: 14.5px !important;
  margin: 0 0 14px 0 !important;
}

.uni-hero .uni-hero-logo,
.uni-hero-banner .uni-hero-logo {
  flex-shrink: 0 !important;
}

.uni-hero .uni-hero-logo .uni-logo,
.uni-hero-banner .uni-hero-logo .uni-logo {
  border-radius: 18px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  padding: 6px !important;
}

.uni-hero .eyebrow,
.uni-hero-banner .eyebrow {
  margin-bottom: 8px !important;
}

.uni-hero .eyebrow-badge,
.uni-hero-banner .eyebrow-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(21, 94, 239, 0.25) !important;
  border: 1px solid rgba(147, 197, 253, 0.35) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  color: #93C5FD !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.uni-hero .uni-city,
.uni-hero-banner .uni-city {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #93C5FD !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 8px 0 !important;
}

.uni-hero .lead,
.uni-hero-banner .lead {
  color: #CBD5E1 !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  max-width: 720px !important;
  margin: 0 0 16px 0 !important;
}

.uni-hero .chips,
.uni-hero-banner .chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.uni-hero .chips .chip-stat,
.uni-hero-banner .chips .chip-stat {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #F8FAFC !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

.uni-hero .chips a.chip-stat:hover,
.uni-hero-banner .chips a.chip-stat:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

body.uni-page .crumbs,
.uni-page-container .crumbs {
  margin-bottom: 16px !important;
  color: #94A3B8 !important;
  font-size: 13.5px !important;
}

body.uni-page .crumbs a,
.uni-page-container .crumbs a {
  color: #155EEF !important;
  text-decoration: none !important;
}

body.uni-page .crumbs a:hover,
.uni-page-container .crumbs a:hover {
  text-decoration: underline !important;
}


/* ========================================================
   UNIVERSITY OVERHAUL: AVATAR BADGE, MOCK CARDS, SIDEBAR
   ======================================================== */

/* 1. UNIVERSITY AVATAR BADGE / CREST */
.uni-avatar-badge,
.uni-hero .uni-hero-logo,
.uni-hero-banner .uni-hero-logo {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #155EEF 0%, #0F4CD9 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.uni-avatar-badge img,
.uni-hero .uni-hero-logo img,
.uni-hero-banner .uni-hero-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #FFFFFF !important;
  padding: 8px !important;
}

.uni-avatar-badge span,
.uni-avatar-badge .uni-avatar-initials,
.uni-hero .uni-hero-logo .uni-logo-ph,
.uni-hero-banner .uni-hero-logo .uni-logo-ph {
  color: #FFFFFF !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, #155EEF 0%, #0F4CD9 100%) !important;
  border: none !important;
  line-height: 1 !important;
}

.uni-logo.uni-logo-ph {
  background: linear-gradient(135deg, #155EEF 0%, #0F4CD9 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* 2. MOCK TEST CARDS (LIGHT MODE) */
body:not(.dark-mode) .mock-card,
html:not([data-theme="dark"]) .mock-card {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 4px 14px rgba(18, 52, 107, 0.04) !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body:not(.dark-mode) .mock-card:hover,
html:not([data-theme="dark"]) .mock-card:hover {
  transform: translateY(-4px) !important;
  border-color: #93C5FD !important;
  box-shadow: 0 12px 28px rgba(21, 94, 239, 0.12) !important;
}

body:not(.dark-mode) .mock-card h3,
html:not([data-theme="dark"]) .mock-card h3 {
  color: #12346B !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

body:not(.dark-mode) .mock-card p.meta,
html:not([data-theme="dark"]) .mock-card p.meta {
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

body:not(.dark-mode) .mock-card .mock-meta,
html:not([data-theme="dark"]) .mock-card .mock-meta {
  display: flex !important;
  gap: 14px !important;
  color: #64748B !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  align-items: center !important;
}

body:not(.dark-mode) .mock-card .mock-meta svg,
html:not([data-theme="dark"]) .mock-card .mock-meta svg {
  color: #155EEF !important;
}

body:not(.dark-mode) .mock-card .mock-ic,
html:not([data-theme="dark"]) .mock-card .mock-ic {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: #EFF6FF !important;
  border: 1px solid #DBEAFE !important;
  color: #155EEF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:not(.dark-mode) .mock-card .free-tag,
html:not([data-theme="dark"]) .mock-card .free-tag {
  background: #ECFDF5 !important;
  color: #059669 !important;
  border: 1px solid #A7F3D0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  letter-spacing: 0.04em !important;
}

body:not(.dark-mode) .mock-card .vip-tag,
html:not([data-theme="dark"]) .mock-card .vip-tag {
  background: #FFFBEB !important;
  color: #B45309 !important;
  border: 1px solid #FDE68A !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: 0.04em !important;
}

body:not(.dark-mode) .mock-card .mock-go,
html:not([data-theme="dark"]) .mock-card .mock-go {
  margin-top: auto !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: #155EEF !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-top: 8px !important;
}

/* 3. VIP MOCK TEST CARDS (FIX WASHED-OUT TEXT IN LIGHT & DARK MODE) */
body:not(.dark-mode) .mock-card.vip,
html:not([data-theme="dark"]) .mock-card.vip {
  background: #FFFFFF !important;
  border: 1.5px solid #FDE68A !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.06) !important;
}

body:not(.dark-mode) .mock-card.vip h3,
html:not([data-theme="dark"]) .mock-card.vip h3 {
  color: #12346B !important;
}

body:not(.dark-mode) .mock-card.vip p.meta,
html:not([data-theme="dark"]) .mock-card.vip p.meta {
  color: #334155 !important;
}

body:not(.dark-mode) .mock-card.locked .mock-go,
html:not([data-theme="dark"]) .mock-card.locked .mock-go {
  color: #D97706 !important;
}

/* 4. MOCK TEST CARDS (DARK MODE) */
body.dark-mode .mock-card,
html[data-theme="dark"] .mock-card {
  background: #0E182A !important;
  border: 1.5px solid rgba(219, 234, 254, 0.12) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body.dark-mode .mock-card:hover,
html[data-theme="dark"] .mock-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode .mock-card h3,
html[data-theme="dark"] .mock-card h3 {
  color: #F8FAFC !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

body.dark-mode .mock-card p.meta,
html[data-theme="dark"] .mock-card p.meta {
  color: #94A3B8 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

body.dark-mode .mock-card .mock-meta,
html[data-theme="dark"] .mock-card .mock-meta {
  display: flex !important;
  gap: 14px !important;
  color: #64748B !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  align-items: center !important;
}

body.dark-mode .mock-card .mock-meta svg,
html[data-theme="dark"] .mock-card .mock-meta svg {
  color: #60A5FA !important;
}

body.dark-mode .mock-card .mock-ic,
html[data-theme="dark"] .mock-card .mock-ic {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(21, 94, 239, 0.15) !important;
  border: 1px solid rgba(96, 165, 250, 0.25) !important;
  color: #60A5FA !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.dark-mode .mock-card .free-tag,
html[data-theme="dark"] .mock-card .free-tag {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34D399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
}

body.dark-mode .mock-card .vip-tag,
html[data-theme="dark"] .mock-card .vip-tag {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

body.dark-mode .mock-card .mock-go,
html[data-theme="dark"] .mock-card .mock-go {
  margin-top: auto !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: #60A5FA !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-top: 8px !important;
}

body.dark-mode .mock-card.vip,
html[data-theme="dark"] .mock-card.vip {
  background: #0E182A !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
}

body.dark-mode .mock-card.vip h3,
html[data-theme="dark"] .mock-card.vip h3 {
  color: #F8FAFC !important;
}

body.dark-mode .mock-card.vip p.meta,
html[data-theme="dark"] .mock-card.vip p.meta {
  color: #94A3B8 !important;
}

body.dark-mode .mock-card.locked .mock-go,
html[data-theme="dark"] .mock-card.locked .mock-go {
  color: #FBBF24 !important;
}

/* 5. PAST PAPERS SIDEBAR CARD (LIGHT & DARK MODE) */
body:not(.dark-mode) .papers-card,
html:not([data-theme="dark"]) .papers-card {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(18, 52, 107, 0.04) !important;
  overflow: hidden !important;
}

body:not(.dark-mode) .papers-head,
html:not([data-theme="dark"]) .papers-head {
  background: #F8FAFC !important;
  border-bottom: 1px solid #DBEAFE !important;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body:not(.dark-mode) .papers-head h3,
html:not([data-theme="dark"]) .papers-head h3 {
  color: #12346B !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

body:not(.dark-mode) .papers-head .meta,
html:not([data-theme="dark"]) .papers-head .meta {
  color: #64748B !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

body:not(.dark-mode) .papers-head > span,
html:not([data-theme="dark"]) .papers-head > span {
  color: #155EEF !important;
  display: inline-flex !important;
}

body:not(.dark-mode) .paper-item,
html:not([data-theme="dark"]) .paper-item {
  background: #FFFFFF !important;
  border-top: 1px solid #F1F5F9 !important;
  padding: 14px 18px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body:not(.dark-mode) .paper-item:hover,
html:not([data-theme="dark"]) .paper-item:hover {
  background: #F8FAFC !important;
  transform: translateX(2px) !important;
}

body:not(.dark-mode) .paper-item b,
html:not([data-theme="dark"]) .paper-item b {
  color: #1E293B !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

body:not(.dark-mode) .paper-item small,
html:not([data-theme="dark"]) .paper-item small {
  color: #64748B !important;
  font-size: 12px !important;
}

body:not(.dark-mode) .paper-year,
html:not([data-theme="dark"]) .paper-year {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: #EFF6FF !important;
  border: 1px solid #DBEAFE !important;
  color: #155EEF !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}

body:not(.dark-mode) .paper-item.locked .paper-year,
html:not([data-theme="dark"]) .paper-item.locked .paper-year {
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
  color: #D97706 !important;
}

body:not(.dark-mode) .paper-act,
html:not([data-theme="dark"]) .paper-act {
  color: #155EEF !important;
}

body:not(.dark-mode) .paper-item.locked .paper-act,
html:not([data-theme="dark"]) .paper-item.locked .paper-act {
  color: #94A3B8 !important;
}

/* DARK MODE PAST PAPERS */
body.dark-mode .papers-card,
html[data-theme="dark"] .papers-card {
  background: #0E182A !important;
  border: 1.5px solid rgba(219, 234, 254, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

body.dark-mode .papers-head,
html[data-theme="dark"] .papers-head {
  background: #111C3A !important;
  border-bottom: 1px solid rgba(219, 234, 254, 0.12) !important;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body.dark-mode .papers-head h3,
html[data-theme="dark"] .papers-head h3 {
  color: #F8FAFC !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

body.dark-mode .papers-head .meta,
html[data-theme="dark"] .papers-head .meta {
  color: #94A3B8 !important;
  font-size: 12.5px !important;
  margin: 0 !important;
}

body.dark-mode .papers-head > span,
html[data-theme="dark"] .papers-head > span {
  color: #60A5FA !important;
  display: inline-flex !important;
}

body.dark-mode .paper-item,
html[data-theme="dark"] .paper-item {
  background: #0E182A !important;
  border-top: 1px solid rgba(219, 234, 254, 0.08) !important;
  padding: 14px 18px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body.dark-mode .paper-item:hover,
html[data-theme="dark"] .paper-item:hover {
  background: rgba(21, 94, 239, 0.1) !important;
  transform: translateX(2px) !important;
}

body.dark-mode .paper-item b,
html[data-theme="dark"] .paper-item b {
  color: #F8FAFC !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

body.dark-mode .paper-item small,
html[data-theme="dark"] .paper-item small {
  color: #94A3B8 !important;
  font-size: 12px !important;
}

body.dark-mode .paper-year,
html[data-theme="dark"] .paper-year {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: rgba(21, 94, 239, 0.15) !important;
  border: 1px solid rgba(96, 165, 250, 0.25) !important;
  color: #60A5FA !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}

body.dark-mode .paper-item.locked .paper-year,
html[data-theme="dark"] .paper-item.locked .paper-year {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #FBBF24 !important;
}

body.dark-mode .paper-act,
html[data-theme="dark"] .paper-act {
  color: #60A5FA !important;
}

body.dark-mode .paper-item.locked .paper-act,
html[data-theme="dark"] .paper-item.locked .paper-act {
  color: #64748B !important;
}

/* ========================================================
   UNIVERSITY DETAIL PAGE EXPANDED LAYOUT (1220px MAX-WIDTH)
   COMPACT SLEEK HERO BANNER & ENLARGED CARDS DESIGN SYSTEM
   ======================================================== */

/* Page Main Container - Reduced top gap, wider 1220px container */
body.uni-page main.wrap,
body.uni-page main,
main.uni-page-container,
.uni-detail-page {
  max-width: 1220px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-top: 24px !important;
  padding-bottom: 60px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* Prevent double padding when .uni-page-wrapper is inside main */
body.uni-page main .uni-page-wrapper,
main.uni-page-container > .uni-page-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 1. Breadcrumbs Compact & Centered */
nav.breadcrumbs,
nav.crumbs,
.uni-page-wrapper nav.crumbs,
body.uni-page nav.crumbs,
.uni-page-container nav.crumbs {
  max-width: 1220px !important;
  width: 100% !important;
  margin: 8px auto 14px auto !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #64748B !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
}

nav.breadcrumbs a,
nav.crumbs a,
.uni-page-wrapper nav.crumbs a,
body.uni-page nav.crumbs a,
.uni-page-container nav.crumbs a {
  color: #155EEF !important;
  text-decoration: none !important;
}

nav.breadcrumbs a:hover,
nav.crumbs a:hover,
.uni-page-wrapper nav.crumbs a:hover,
body.uni-page nav.crumbs a:hover {
  text-decoration: underline !important;
}

/* ========================================================
   2. COMPACT HERO BANNER & LEFT-ALIGNED SAAS STYLING
   ======================================================== */
.uni-hero-banner,
.uni-hero,
.uni-page-wrapper .uni-hero-banner,
.uni-page-container .uni-hero-banner,
body.uni-page .uni-hero-banner,
body.uni-page main > section:first-of-type {
  max-width: 1220px !important;
  width: 100% !important;
  margin: 0 auto 24px auto !important;
  padding: 24px 32px !important; /* Compact vertical height */
  border-radius: 16px !important;
  background: linear-gradient(135deg, #0B1727 0%, #102A45 60%, #153A60 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 28px rgba(11, 23, 39, 0.35) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 24px !important;
  box-sizing: border-box !important;
}

/* Avatar Box - Compact 70px x 70px */
.uni-avatar-badge,
.uni-hero .uni-hero-logo,
.uni-hero-banner .uni-hero-logo,
.uni-hero-banner > div:first-child,
main > section:first-of-type > div:first-child {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  border-radius: 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #155EEF 0%, #0F4CD9 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

.uni-avatar-badge span,
.uni-avatar-badge .uni-avatar-initials,
.uni-hero .uni-hero-logo .uni-logo-ph,
.uni-hero-banner .uni-hero-logo .uni-logo-ph {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
}

/* Hero Content Wrapper - Strict Left Alignment */
.uni-hero-content,
.uni-hero .grow,
.uni-hero-banner .grow {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Category Badge (ECAT · Target University) */
.uni-hero-badge,
.eyebrow-badge,
.uni-hero .eyebrow-badge,
.uni-hero-banner .eyebrow-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(21, 94, 239, 0.22) !important;
  border: 1px solid rgba(96, 165, 250, 0.35) !important;
  color: #93C5FD !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  margin-bottom: 8px !important;
}

/* University Title & City Row */
.uni-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 6px !important;
  text-align: left !important;
  flex-wrap: wrap !important;
}

.uni-hero-banner h1,
.uni-hero h1,
.uni-hero-content h1,
body.uni-page .uni-hero-banner h1,
body.uni-page .uni-hero h1,
main > section:first-of-type h1 {
  font-size: 26px !important; /* Clean executive title size */
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* City Label */
.uni-city-tag,
.uni-city,
.uni-hero .uni-city,
.uni-hero-banner .uni-city {
  color: #94A3B8 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
}

/* Description Text */
.uni-hero-banner p,
.uni-hero p,
.uni-hero-content p,
.uni-hero-banner .lead,
.uni-hero .lead,
body.uni-page .uni-hero-banner .lead,
main > section:first-of-type p {
  color: #CBD5E1 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  max-width: 680px !important;
  margin: 4px 0 12px 0 !important;
  text-align: left !important;
}

/* Stats Pills (3 mock tests · 3 past papers) */
.uni-stats-pills,
.chips,
.uni-hero .chips,
.uni-hero-banner .chips {
  display: flex !important;
  gap: 8px !important;
  margin: 0 !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.uni-stats-pills span,
.uni-stats-pills .chip-stat,
.uni-stats-pills a,
.uni-hero .chips .chip-stat,
.uni-hero-banner .chips .chip-stat {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

/* 3. Main Content Grid - Wide 1220px Alignment (Mocks + Past Papers) */
.uni-content-grid,
.uni-page-wrapper .domain-layout,
.uni-page-container .domain-layout,
body.uni-page .domain-layout {
  max-width: 1220px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 360px !important;
  gap: 28px !important;
  align-items: start !important;
  box-sizing: border-box !important;
}

/* Left Column: Heading & 3 Mock Test Cards */
.uni-mocks-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.uni-mocks-column h2,
.uni-page-wrapper h2.sec-title,
body.uni-page h2.sec-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #12346B !important;
  margin: 0 0 4px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.dark-mode .uni-mocks-column h2,
body.dark-mode .uni-page-wrapper h2.sec-title,
body.dark-mode.uni-page h2.sec-title,
html[data-theme="dark"] .uni-mocks-column h2,
html[data-theme="dark"] .uni-page-wrapper h2.sec-title,
html[data-theme="dark"].uni-page h2.sec-title {
  color: #FFFFFF !important;
}

/* 3 Cards Sub-Grid */
.mock-cards-container,
.uni-page-wrapper .mock-grid,
.uni-page-container .mock-grid,
body.uni-page .mock-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
}

/* 4. Mock Test Cards (Left Column) - Larger & More Substantial */
.mock-card {
  padding: 24px 22px !important;
  border-radius: 18px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.mock-card:hover {
  transform: translateY(-3px) !important;
}

/* Mock Card Heading */
.mock-card h3 {
  font-size: 18.5px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

/* Mock Card Subtitle / Description */
.mock-card p.meta,
.mock-card p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

/* Mock Metadata / Details Chips */
.mock-meta,
.mock-card .meta-item,
.mock-card .mock-meta {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  gap: 8px !important;
}

.mock-card .mock-ic {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
}

.mock-card .mock-ic svg {
  width: 22px !important;
  height: 22px !important;
}

/* Mock Card Action Button (Start Test / Unlock) */
.mock-card .mock-go,
.mock-card a.btn-start,
.mock-card button {
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

/* 5. 4th Card: Past Papers Sidebar Card - Bigger & Better Proportion */
.papers-card,
.uni-sidebar > div,
aside.uni-sidebar,
aside.papers-side {
  border-radius: 18px !important;
}

aside.uni-sidebar,
.uni-page-wrapper aside.papers-side,
.uni-page-container aside.papers-side,
body.uni-page aside.papers-side {
  position: sticky !important;
  top: 90px !important;
  width: 100% !important;
  margin: 0 !important;
}

.papers-head {
  padding: 22px 24px !important;
}

.papers-head h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Paper List Items */
.paper-item {
  padding: 16px 20px !important;
  gap: 16px !important;
}

.paper-item b {
  font-size: 14.5px !important;
  font-weight: 700 !important;
}

.paper-item span.meta,
.paper-item small {
  font-size: 13px !important;
}

.paper-year {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
}

/* Responsive Breakpoints */
@media (max-width: 1080px) {
  .mock-cards-container,
  .uni-page-wrapper .mock-grid,
  body.uni-page .mock-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 980px) {
  .uni-content-grid,
  .uni-page-wrapper .domain-layout,
  body.uni-page .domain-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  aside.uni-sidebar,
  .uni-page-wrapper aside.papers-side,
  body.uni-page aside.papers-side {
    position: static !important;
  }
}

@media (max-width: 680px) {
  .mock-cards-container,
  .uni-page-wrapper .mock-grid,
  body.uni-page .mock-grid {
    grid-template-columns: 1fr !important;
  }
  .uni-hero-banner,
  .uni-hero {
    padding: 20px 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .uni-hero-banner h1 {
    font-size: 22px !important;
  }
  .uni-title-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
}

/* ========================================================
   UNIVERSITY LOGO & CREST STYLING (FRONTEND & ADMIN)
   ======================================================== */
.uni-card .uni-card-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

.uni-card .uni-card-logo img,
.uni-card-logo img.uni-logo,
.uni-card .uni-logo img {
  width: 76px !important;
  height: 76px !important;
  object-fit: contain !important;
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 18px !important;
  padding: 8px !important;
  box-shadow: 0 4px 14px rgba(18, 52, 107, 0.08) !important;
  transition: transform 0.25s ease !important;
}

.uni-card:hover .uni-card-logo img {
  transform: scale(1.05) !important;
}

body.dark-mode .uni-card .uni-card-logo img,
html[data-theme="dark"] .uni-card .uni-card-logo img {
  background: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

.uni-card .uni-card-logo .uni-logo-ph,
.uni-card .uni-card-logo .uni-avatar-initials {
  width: 76px !important;
  height: 76px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #155EEF 0%, #0F4CD9 100%) !important;
  color: #FFFFFF !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(21, 94, 239, 0.25) !important;
}

/* ========================================================
   DASHBOARD STAT CARDS: ENLARGED TYPOGRAPHY & SAAS ARCHITECTURE
   ======================================================== */

/* 4-Column Metric Grid */
.dashboard-stats-grid,
.analytics-stat-grid,
.student-analytics-container .analytics-stat-grid,
div:has(> .stat-card) {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
}

@media (max-width: 1024px) {
  .dashboard-stats-grid,
  .analytics-stat-grid,
  .student-analytics-container .analytics-stat-grid,
  div:has(> .stat-card) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .dashboard-stats-grid,
  .analytics-stat-grid,
  .student-analytics-container .analytics-stat-grid,
  div:has(> .stat-card) {
    grid-template-columns: 1fr !important;
  }
}

/* Base Metric Card */
.stat-card,
.analytics-stat-card,
.student-analytics-container .analytics-stat-card {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  padding: 22px 24px !important;
  box-shadow: 0 4px 16px rgba(18, 52, 107, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 165px !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.stat-card:hover,
.analytics-stat-card:hover,
.student-analytics-container .analytics-stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(21, 94, 239, 0.08) !important;
  border-color: #93C5FD !important;
}

/* TOP ROW: Title (Left) + Icon Badge (Right) */
.stat-card-header,
.stat-card-top,
.student-analytics-container .stat-card-top,
.stat-card > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

/* 1. Card Top Titles (e.g. Total Quizzes Taken, Average Accuracy) */
.stat-card h4,
.stat-card .stat-title,
.stat-card .stat-card-title,
.stat-card-header h4,
.stat-card-header .stat-title,
.stat-card-header .stat-card-title,
.stat-card-top .stat-card-label,
.student-analytics-container .stat-card-label,
div:has(> .stat-icon-badge) h4,
div:has(> .stat-icon-badge) span:first-child {
  font-size: 15px !important; /* Increased from ~12px */
  font-weight: 800 !important;
  color: #1E293B !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  margin: 0 !important;
}

body.dark-mode .stat-card h4,
body.dark-mode .stat-card .stat-title,
body.dark-mode .stat-card .stat-card-title,
body.dark-mode .stat-card-top .stat-card-label,
html[data-theme="dark"] .stat-card h4,
html[data-theme="dark"] .stat-card .stat-title,
html[data-theme="dark"] .stat-card .stat-card-title,
html[data-theme="dark"] .student-analytics-container .stat-card-label {
  color: #F8FAFC !important;
}

/* Clean Icon Container */
.stat-icon-badge,
.stat-icon-wrap,
.stat-icon-wrapper,
.student-analytics-container .stat-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.stat-icon-badge svg,
.stat-icon-badge svg.lucide,
.stat-icon-badge i,
.stat-icon-wrap svg,
.stat-icon-wrap svg.lucide,
.stat-icon-wrap i {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  stroke-width: 2.2px !important;
  display: block !important;
  margin: auto !important;
}

/* 2. Main Metric Numbers (3, 66.7%, 60%, 1) */
.stat-card h2,
.stat-card h3,
.stat-card .stat-value,
.stat-card-value,
.stat-value,
.stat-value-row .stat-value,
.student-analytics-container .stat-value,
div:has(> .stat-icon-badge) + div {
  font-size: 38px !important; /* Bada prominent size */
  font-weight: 900 !important;
  color: #0F172A !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 4px 0 12px 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}

body.dark-mode .stat-card h2,
body.dark-mode .stat-card h3,
body.dark-mode .stat-card .stat-value,
body.dark-mode .stat-card-value,
body.dark-mode .stat-value,
html[data-theme="dark"] .stat-card h2,
html[data-theme="dark"] .stat-card h3,
html[data-theme="dark"] .stat-card .stat-value,
html[data-theme="dark"] .stat-card-value,
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .student-analytics-container .stat-value {
  color: #FFFFFF !important;
}

/* Unit Text next to numbers (Tests, Ready, Days Active) */
.stat-card .stat-unit,
.stat-card-value .stat-unit,
.stat-card h2 span,
.stat-card h3 span,
.stat-card-value small,
.stat-value small,
.stat-unit {
  font-size: 18px !important; /* Increased from 13px */
  font-weight: 700 !important;
  color: #475569 !important;
  margin-left: 6px !important;
}

body.dark-mode .stat-card .stat-unit,
body.dark-mode .stat-card-value .stat-unit,
body.dark-mode .stat-card h2 span,
body.dark-mode .stat-card h3 span,
body.dark-mode .stat-card-value small,
body.dark-mode .stat-value small,
body.dark-mode .stat-unit,
html[data-theme="dark"] .stat-card .stat-unit,
html[data-theme="dark"] .stat-card-value .stat-unit,
html[data-theme="dark"] .stat-card h2 span,
html[data-theme="dark"] .stat-card h3 span,
html[data-theme="dark"] .stat-card-value small,
html[data-theme="dark"] .stat-value small,
html[data-theme="dark"] .stat-unit {
  color: #94A3B8 !important;
}

/* 3. Percentage Trend Badge (+3.2%) */
.trend-pill,
.stat-trend-badge,
.student-analytics-container .stat-trend-badge {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: #ECFDF5 !important;
  color: #059669 !important;
  border: 1px solid #A7F3D0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* 4. Bottom Footer Badges & Subtitles */
.stat-card-footer,
.stat-footer,
.student-analytics-container .stat-footer,
.stat-card > div:last-child {
  font-size: 14px !important; /* Increased size */
  font-weight: 600 !important;
  gap: 10px !important;
  margin-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 10px !important;
  border-top: 1px solid #F1F5F9 !important;
}

body.dark-mode .stat-card-footer,
body.dark-mode .stat-footer,
body.dark-mode .stat-card > div:last-child,
html[data-theme="dark"] .stat-card-footer,
html[data-theme="dark"] .stat-footer,
html[data-theme="dark"] .student-analytics-container .stat-footer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
}

.stat-card-footer .stat-badge-tag,
.stat-card-footer .stat-footer-tag,
.stat-badge-tag,
.stat-footer-tag,
.student-analytics-container .stat-footer-tag {
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

.stat-card-footer .stat-footer-text,
.stat-footer .stat-footer-text,
.stat-footer-text,
.student-analytics-container .stat-footer-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748B !important;
}

body.dark-mode .stat-card-footer .stat-footer-text,
body.dark-mode .stat-footer .stat-footer-text,
body.dark-mode .stat-footer-text,
html[data-theme="dark"] .stat-footer-text,
html[data-theme="dark"] .student-analytics-container .stat-footer-text {
  color: #94A3B8 !important;
}

/* Theme Accents for Badges (Light Mode) */
.badge-blue,
.icon-blue,
.stat-icon-wrap.icon-blue,
.stat-icon-badge.badge-blue {
  background-color: #EFF6FF !important;
  border: 1px solid #DBEAFE !important;
  color: #1D63ED !important;
}

.badge-green,
.icon-teal,
.stat-icon-wrap.icon-teal,
.stat-icon-badge.badge-green {
  background-color: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #059669 !important;
}

.badge-purple,
.icon-purple,
.stat-icon-wrap.icon-purple,
.stat-icon-badge.badge-purple {
  background-color: #FAF5FF !important;
  border: 1px solid #E9D5FF !important;
  color: #7E22CE !important;
}

.badge-orange,
.icon-orange,
.stat-icon-wrap.icon-orange,
.stat-icon-badge.badge-orange {
  background-color: #FFF7ED !important;
  border: 1px solid #FFEDD5 !important;
  color: #EA580C !important;
}

/* Dark Mode Badge Accents */
body.dark-mode .badge-blue,
html[data-theme="dark"] .badge-blue,
html[data-theme="dark"] .stat-icon-wrap.icon-blue,
html[data-theme="dark"] .stat-icon-badge.badge-blue {
  background-color: rgba(29, 99, 237, 0.15) !important;
  border: 1px solid rgba(96, 165, 250, 0.3) !important;
  color: #60A5FA !important;
}

body.dark-mode .badge-green,
html[data-theme="dark"] .badge-green,
html[data-theme="dark"] .stat-icon-wrap.icon-teal,
html[data-theme="dark"] .stat-icon-badge.badge-green {
  background-color: rgba(5, 150, 105, 0.15) !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  color: #34D399 !important;
}

body.dark-mode .badge-purple,
html[data-theme="dark"] .badge-purple,
html[data-theme="dark"] .stat-icon-wrap.icon-purple,
html[data-theme="dark"] .stat-icon-badge.badge-purple {
  background-color: rgba(126, 34, 206, 0.15) !important;
  border: 1px solid rgba(192, 132, 252, 0.3) !important;
  color: #C084FC !important;
}

body.dark-mode .badge-orange,
html[data-theme="dark"] .badge-orange,
html[data-theme="dark"] .stat-icon-wrap.icon-orange,
html[data-theme="dark"] .stat-icon-badge.badge-orange {
  background-color: rgba(234, 88, 12, 0.15) !important;
  border: 1px solid rgba(251, 146, 60, 0.3) !important;
  color: #FB923C !important;
}


/* ========================================================
   PROFILE PAGE COLOR SYSTEM & ROYAL BLUE DESIGN SYSTEM
   ======================================================== */

/* Profile Page Main Container */
.profile-container,
.settings-container,
main:has(.profile-card),
main:has(.settings-card),
main:has(form[action*="profile"]) {
  max-width: 1040px !important;
  margin: 32px auto 60px auto !important;
  padding: 0 24px !important;
}

/* ========================================================
   LIGHT MODE: Profile Cards & Forms
   ======================================================== */
body:not(.dark-mode) .profile-card,
body:not(.dark-mode) .settings-card,
body:not(.dark-mode) div:has(> form[action*="profile"]),
body:not(.dark-mode) .account-settings-card {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 18px !important;
  padding: 32px !important;
  box-shadow: 0 4px 18px rgba(18, 52, 107, 0.04) !important;
}

body:not(.dark-mode) .profile-card h1,
body:not(.dark-mode) .profile-card h2,
body:not(.dark-mode) .profile-card h3,
body:not(.dark-mode) .settings-header-text h1,
body:not(.dark-mode) .settings-sec-info h2,
body:not(.dark-mode) .profile-student-name,
body:not(.dark-mode) .security-subcard-title {
  color: #12346B !important;
  font-weight: 800 !important;
}

body:not(.dark-mode) .profile-card p,
body:not(.dark-mode) .profile-card label,
body:not(.dark-mode) .settings-card p,
body:not(.dark-mode) .settings-label,
body:not(.dark-mode) .settings-header-text p,
body:not(.dark-mode) .settings-sec-info p {
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Input Fields & Textareas */
body:not(.dark-mode) .profile-card input,
body:not(.dark-mode) .profile-card select,
body:not(.dark-mode) .settings-input-control,
body:not(.dark-mode) .settings-card input,
body:not(.dark-mode) .settings-card select,
body:not(.dark-mode) form[action*="profile"] input {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14.5px !important;
  transition: all 0.2s ease !important;
}

body:not(.dark-mode) .profile-card input:focus,
body:not(.dark-mode) .profile-card select:focus,
body:not(.dark-mode) .settings-input-control:focus,
body:not(.dark-mode) .settings-card input:focus,
body:not(.dark-mode) form[action*="profile"] input:focus {
  border-color: #155EEF !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.15) !important;
}

/* Action Buttons (Save Changes / Update Profile) */
body:not(.dark-mode) .profile-card button[type="submit"],
body:not(.dark-mode) .settings-primary-btn,
body:not(.dark-mode) form[action*="profile"] button[type="submit"] {
  background-color: #155EEF !important;
  background: #155EEF !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.25) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

body:not(.dark-mode) .profile-card button[type="submit"]:hover,
body:not(.dark-mode) .settings-primary-btn:hover,
body:not(.dark-mode) form[action*="profile"] button[type="submit"]:hover {
  background-color: #0F4CD9 !important;
  background: #0F4CD9 !important;
  transform: translateY(-1px) !important;
}

/* Secondary Button (Cancel / Back / Edit Profile Pill) */
body:not(.dark-mode) .profile-card .btn-secondary,
body:not(.dark-mode) .profile-card a.btn-cancel,
body:not(.dark-mode) .profile-edit-pill-btn,
body:not(.dark-mode) .security-pill-btn {
  background-color: #F0F6FF !important;
  color: #155EEF !important;
  border: 1px solid #DBEAFE !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
}

body:not(.dark-mode) .profile-edit-pill-btn:hover,
body:not(.dark-mode) .security-pill-btn:hover {
  background-color: #DBEAFE !important;
}

/* Avatar Image & Uploader */
.profile-avatar-wrapper,
.profile-avatar-container,
.profile-avatar-circle {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  border: 3px solid #155EEF !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.profile-avatar-circle img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.profile-avatar-fallback {
  background: linear-gradient(135deg, #155EEF 0%, #0F4CD9 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 32px !important;
}

/* Header & Section Icons */
body:not(.dark-mode) .settings-header-icon,
body:not(.dark-mode) .settings-sec-icon,
body:not(.dark-mode) .security-banner-icon {
  background: #EFF6FF !important;
  color: #155EEF !important;
  border: 1px solid #DBEAFE !important;
}

/* Profile Completion Progress Fill */
.profile-progress-fill {
  background: linear-gradient(90deg, #155EEF 0%, #3B82F6 100%) !important;
}

/* ========================================================
   DARK MODE: Profile Cards & Forms
   ======================================================== */
body.dark-mode .profile-card,
body.dark-mode .settings-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .settings-card,
body.dark-mode div:has(> form[action*="profile"]),
body.dark-mode .account-settings-card {
  background-color: #111C3A !important;
  border: 1.5px solid rgba(219, 234, 254, 0.12) !important;
  border-radius: 18px !important;
  padding: 32px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .profile-card h1,
body.dark-mode .profile-card h2,
body.dark-mode .profile-card h3,
body.dark-mode .settings-header-text h1,
body.dark-mode .settings-sec-info h2,
body.dark-mode .profile-student-name,
body.dark-mode .security-subcard-title,
html[data-theme="dark"] .settings-header-text h1,
html[data-theme="dark"] .settings-sec-info h2,
html[data-theme="dark"] .profile-student-name,
html[data-theme="dark"] .security-subcard-title {
  color: #FFFFFF !important;
}

body.dark-mode .profile-card p,
body.dark-mode .profile-card label,
body.dark-mode .settings-card p,
body.dark-mode .settings-label,
html[data-theme="dark"] .settings-label,
html[data-theme="dark"] .settings-header-text p,
html[data-theme="dark"] .settings-sec-info p {
  color: #CBD5E1 !important;
}

body.dark-mode .profile-card input,
body.dark-mode .profile-card select,
body.dark-mode .settings-input-control,
body.dark-mode .settings-card input,
body.dark-mode .settings-card select,
body.dark-mode form[action*="profile"] input,
html[data-theme="dark"] .settings-input-control {
  background-color: #0B132B !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(219, 234, 254, 0.18) !important;
}

body.dark-mode .profile-card input:focus,
body.dark-mode .profile-card select:focus,
body.dark-mode .settings-input-control:focus,
html[data-theme="dark"] .settings-input-control:focus {
  border-color: #60A5FA !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

body.dark-mode .settings-header-icon,
body.dark-mode .settings-sec-icon,
body.dark-mode .security-banner-icon,
html[data-theme="dark"] .settings-header-icon,
html[data-theme="dark"] .settings-sec-icon,
html[data-theme="dark"] .security-banner-icon {
  background: rgba(21, 94, 239, 0.15) !important;
  color: #60A5FA !important;
  border: 1px solid rgba(96, 165, 250, 0.25) !important;
}

body.dark-mode .profile-edit-pill-btn,
body.dark-mode .security-pill-btn,
html[data-theme="dark"] .profile-edit-pill-btn,
html[data-theme="dark"] .security-pill-btn {
  background-color: rgba(21, 94, 239, 0.12) !important;
  color: #60A5FA !important;
  border: 1px solid rgba(96, 165, 250, 0.25) !important;
}

body.dark-mode .security-subcard,
html[data-theme="dark"] .security-subcard {
  background: #0B132B !important;
  border: 1px solid rgba(219, 234, 254, 0.12) !important;
}


/* ========================================================
   PROFILE UI FIXES: AVATAR, NAVBAR BADGE, INPUTS & BUTTONS
   ======================================================== */

/* 1. Clean Monogram / Avatar Container */
.profile-avatar-container,
.profile-avatar-wrapper,
.profile-avatar-circle,
div:has(> .profile-progress-circle) {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #155EEF 0%, #102A45 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  border: 2px solid #DBEAFE !important;
  box-shadow: 0 4px 14px rgba(21, 94, 239, 0.18) !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Remove broken SVG circle clip path & overlay svg in container */
.profile-avatar-container svg,
.profile-avatar-wrapper svg,
.profile-avatar-circle svg {
  display: none !important;
}

.profile-avatar-fallback {
  width: 100% !important;
  height: 100% !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #FFFFFF !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.profile-avatar-circle img,
.profile-avatar-container img,
.profile-avatar-wrapper img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 18px !important;
  object-fit: cover !important;
  display: block !important;
}

/* 2. Navbar Profile Circle Fix */
header nav a:has-text("Profile") > span,
.nav-profile-circle,
.nav-me .avatar,
.nav-me .avatar-ph,
a.nav-me span.avatar,
a.nav-me span.avatar-ph,
a[href*="/profile"] span:first-child {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
  background: #155EEF !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
  overflow: hidden !important;
}

.nav-me .avatar img,
a.nav-me img.avatar,
.nav-profile-circle img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 3. Fix Input Field Artifacts: Remove internal prefix icons and ensure clean padding */
.settings-input-prefix-icon,
.settings-input-wrapper > span.settings-input-prefix-icon {
  display: none !important;
}

.profile-card input,
.profile-card select,
.settings-input-control,
form[action*="profile"] input,
form[action*="profile"] select {
  padding: 12px 16px !important;
  padding-left: 16px !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.dark-mode .profile-card input,
body.dark-mode .profile-card select,
body.dark-mode .settings-input-control,
html[data-theme="dark"] .settings-input-control {
  border: 1.5px solid rgba(219, 234, 254, 0.18) !important;
}

/* 4. Standardize Cards & "Edit Profile" Button */
.profile-card,
.settings-card,
.account-settings-card {
  background-color: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 18px !important;
  padding: 32px !important;
  box-shadow: 0 4px 18px rgba(18, 52, 107, 0.04) !important;
}

body.dark-mode .profile-card,
body.dark-mode .settings-card,
body.dark-mode .account-settings-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .settings-card {
  background-color: #111C3A !important;
  border: 1.5px solid rgba(219, 234, 254, 0.12) !important;
}

/* Sharp Royal Blue "Edit Profile" Button */
.profile-edit-pill-btn,
.profile-summary-wrap button,
.profile-summary-wrap .profile-edit-pill-btn {
  background: #155EEF !important;
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.profile-edit-pill-btn svg {
  stroke: #FFFFFF !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
}

.profile-edit-pill-btn:hover {
  background: #0F4CD9 !important;
  background-color: #0F4CD9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(21, 94, 239, 0.35) !important;
}


/* ========================================================
   NAVBAR BACKDROP, EXAM STATS & REFERRAL CARD POLISH
   ======================================================== */

/* 1. Floating Navbar Solid Blur Background to Prevent Content Bleed */
header,
header.topbar,
.topbar,
header > div,
header .wrap,
header .topbar-inner,
.navbar-container {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(18, 52, 107, 0.08) !important;
  z-index: 100 !important;
}

body.dark-mode header,
body.dark-mode header.topbar,
body.dark-mode .topbar,
body.dark-mode header > div,
body.dark-mode header .wrap,
body.dark-mode header .topbar-inner,
html[data-theme="dark"] header,
html[data-theme="dark"] header.topbar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] header > div,
html[data-theme="dark"] header .wrap,
html[data-theme="dark"] header .topbar-inner {
  background: rgba(11, 23, 39, 0.95) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Dashboard Page Container Clearance */
.dash-wrap,
.student-dashboard-wrapper,
.dashboard-main-container,
main:has(.dash-wrap) {
  margin-top: 16px !important;
  padding-top: 8px !important;
}

/* 2. My Exams & Access: Topic & Quiz Stats High Contrast */
.exam-card .meta,
.exam-card-stats,
.exam-card p.meta,
div:has(> .progress-bar-track) + p,
.exam-card p:not(.muted) {
  color: #1E293B !important; /* High-contrast Slate Navy */
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
  margin: 10px 0 14px 0 !important;
}

body.dark-mode .exam-card .meta,
body.dark-mode .exam-card-stats,
body.dark-mode .exam-card p.meta,
body.dark-mode .exam-card p:not(.muted),
html[data-theme="dark"] .exam-card .meta,
html[data-theme="dark"] .exam-card-stats,
html[data-theme="dark"] .exam-card p.meta,
html[data-theme="dark"] .exam-card p:not(.muted) {
  color: #CBD5E1 !important; /* Clean bright slate */
  opacity: 1 !important;
}

/* Exam Cards Surfaces */
.exam-card {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  padding: 22px !important;
  box-shadow: 0 4px 16px rgba(18, 52, 107, 0.04) !important;
}

.exam-card h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #12346B !important;
  margin: 0 !important;
}

body.dark-mode .exam-card,
html[data-theme="dark"] .exam-card {
  background: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .exam-card h3,
html[data-theme="dark"] .exam-card h3 {
  color: #FFFFFF !important;
}

/* 3. Referral Card: Invite Friends & Earn Rewards Polish */
.promotions-section .promo-card,
.referral-promo-card {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 18px !important;
  padding: 26px !important;
  box-shadow: 0 4px 18px rgba(18, 52, 107, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.promotions-section .promo-card:hover,
.referral-promo-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(21, 94, 239, 0.12) !important;
  border-color: #93C5FD !important;
}

/* Card Icon */
.promotions-section .promo-icon-wrap {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: #EFF6FF !important;
  color: #155EEF !important;
  border: 1px solid #DBEAFE !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Header Typography */
.promotions-section .promo-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #12346B !important;
  margin: 0 0 6px 0 !important;
}

.promotions-section .promo-subtitle {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Input Box */
.promotions-section .promo-input-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 16px 0 18px 0 !important;
  background: #F8FAFC !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 12px !important;
  padding: 6px 8px 6px 14px !important;
  transition: all 0.2s ease !important;
}

.promotions-section .promo-input-group:focus-within {
  border-color: #155EEF !important;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.15) !important;
  background: #FFFFFF !important;
}

.promotions-section .promo-input {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* Action Buttons */
.promotions-section .promo-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.promotions-section .btn-copy-link {
  background: #155EEF !important;
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(21, 94, 239, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.promotions-section .btn-copy-link:hover {
  background: #0F4CD9 !important;
  background-color: #0F4CD9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(21, 94, 239, 0.35) !important;
}

.promotions-section .btn-whatsapp-share {
  background: #25D366 !important;
  background-color: #25D366 !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.promotions-section .btn-whatsapp-share:hover {
  background: #20BD5A !important;
  background-color: #20BD5A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35) !important;
}

/* Dark Mode Adaptation for Referral Card */
body.dark-mode .promotions-section .promo-card,
body.dark-mode .referral-promo-card,
html[data-theme="dark"] .promotions-section .promo-card,
html[data-theme="dark"] .referral-promo-card {
  background: #111C3A !important;
  border: 1.5px solid rgba(219, 234, 254, 0.12) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .promotions-section .promo-icon-wrap,
html[data-theme="dark"] .promotions-section .promo-icon-wrap {
  background: rgba(21, 94, 239, 0.15) !important;
  color: #60A5FA !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
}

body.dark-mode .promotions-section .promo-title,
html[data-theme="dark"] .promotions-section .promo-title {
  color: #FFFFFF !important;
}

body.dark-mode .promotions-section .promo-subtitle,
html[data-theme="dark"] .promotions-section .promo-subtitle {
  color: #CBD5E1 !important;
}

body.dark-mode .promotions-section .promo-input-group,
html[data-theme="dark"] .promotions-section .promo-input-group {
  background: #0B132B !important;
  border-color: rgba(219, 234, 254, 0.18) !important;
}

body.dark-mode .promotions-section .promo-input,
html[data-theme="dark"] .promotions-section .promo-input {
  color: #FFFFFF !important;
}


/* ========================================================
   DASHBOARD LOWER SECTIONS CENTERING & EDGE OVERFLOW FIX
   ======================================================== */

/* 1. Global Centered Main Wrapper for Dashboard */
body:has(a[href*="/dashboard"]) main,
main.student-dashboard-wrapper,
main.dashboard-container,
.dashboard-page-wrapper,
.dash-wrap,
.student-dashboard-wrapper {
  max-width: 1220px !important;
  margin: 0 auto !important;
  padding: 24px 20px 80px 20px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* 2. My Exams & Access Grid (ECAT, MDCAT, Nursing, NUMS, LAT) */
.exams-access-grid,
div:has(> .exam-access-card),
.dash-wrap > .grid-3,
.dash-wrap > div:has(> .exam-card) {
  max-width: 1220px !important;
  margin: 0 auto 36px auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .exams-access-grid,
  div:has(> .exam-access-card),
  .dash-wrap > .grid-3,
  .dash-wrap > div:has(> .exam-card) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .exams-access-grid,
  div:has(> .exam-access-card),
  .dash-wrap > .grid-3,
  .dash-wrap > div:has(> .exam-card) {
    grid-template-columns: 1fr !important;
  }
}

/* 3. Lower Section: 2-Column Balanced Layout */
/* Left Column: My payments & Recent quiz scores */
/* Right Column: Recently studied & Announcements */
.dashboard-lower-grid,
.dash-wrap > .grid-2.section,
.dash-wrap > div.grid-2 {
  max-width: 1220px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  align-items: start !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  .dashboard-lower-grid,
  .dash-wrap > .grid-2.section,
  .dash-wrap > div.grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* Headings Styling with Consistent Indentation */
.dash-wrap h2,
.dash-wrap .mt,
.dashboard-lower-grid h2 {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #12346B !important;
  margin: 24px 0 14px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.dark-mode .dash-wrap h2,
body.dark-mode .dash-wrap .mt,
body.dark-mode .dashboard-lower-grid h2,
html[data-theme="dark"] .dash-wrap h2,
html[data-theme="dark"] .dash-wrap .mt,
html[data-theme="dark"] .dashboard-lower-grid h2 {
  color: #FFFFFF !important;
}

/* 4. Unified Card Containers */
.dashboard-card-box,
.dash-wrap .list,
.dash-wrap .empty.sm,
.announcements-empty-card,
.dash-wrap article.card.news {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 4px 16px rgba(18, 52, 107, 0.04) !important;
  margin-bottom: 24px !important;
  box-sizing: border-box !important;
}

body.dark-mode .dashboard-card-box,
body.dark-mode .dash-wrap .list,
body.dark-mode .dash-wrap .empty.sm,
body.dark-mode .announcements-empty-card,
body.dark-mode .dash-wrap article.card.news,
html[data-theme="dark"] .dashboard-card-box,
html[data-theme="dark"] .dash-wrap .list,
html[data-theme="dark"] .dash-wrap .empty.sm,
html[data-theme="dark"] .announcements-empty-card,
html[data-theme="dark"] .dash-wrap article.card.news {
  background: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* Clean Empty State Message Centering */
.empty-state-text,
.dash-wrap .empty p,
.dash-wrap p.muted {
  color: #64748B !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  text-align: center !important;
  display: block !important;
  padding: 20px 0 !important;
  margin: 0 !important;
}

body.dark-mode .empty-state-text,
body.dark-mode .dash-wrap .empty p,
body.dark-mode .dash-wrap p.muted,
html[data-theme="dark"] .empty-state-text,
html[data-theme="dark"] .dash-wrap .empty p,
html[data-theme="dark"] .dash-wrap p.muted {
  color: #94A3B8 !important;
}

/* 5. Recent Quiz Scores List Rows */
.quiz-score-row,
.quiz-score-item,
.dash-wrap .list-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  border-radius: 10px !important;
  transition: background 0.15s ease !important;
  text-decoration: none !important;
  color: inherit !important;
}

.quiz-score-row:hover,
.quiz-score-item:hover,
.dash-wrap .list-item:hover {
  background: #F8FAFC !important;
}

body.dark-mode .quiz-score-row,
body.dark-mode .quiz-score-item,
body.dark-mode .dash-wrap .list-item,
html[data-theme="dark"] .quiz-score-row,
html[data-theme="dark"] .quiz-score-item,
html[data-theme="dark"] .dash-wrap .list-item {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .quiz-score-row:hover,
body.dark-mode .quiz-score-item:hover,
body.dark-mode .dash-wrap .list-item:hover,
html[data-theme="dark"] .quiz-score-row:hover,
html[data-theme="dark"] .quiz-score-item:hover,
html[data-theme="dark"] .dash-wrap .list-item:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* "Review →" Link Button */
a.btn-review-quiz,
.review-pill {
  color: #155EEF !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

body.dark-mode a.btn-review-quiz,
body.dark-mode .review-pill,
html[data-theme="dark"] a.btn-review-quiz,
html[data-theme="dark"] .review-pill {
  color: #60A5FA !important;
}


/* ========================================================
   REMOVE INNER BLUE CAPSULE BOX AROUND PROFILE INFO
   ======================================================== */

/* 1. Remove nested blue capsule box styling */
.profile-summary-left,
.profile-summary-details,
.profile-card > div:first-child > div:first-child,
.profile-card .profile-summary-left,
.profile-card .profile-summary-details,
.profile-card > div > div:has(> h2, > h3, > .profile-student-name) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.profile-summary-left {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex: 1 !important;
}

.profile-summary-details {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* 2. Ensure clean flex layout for avatar + text directly on the parent card */
.profile-header-card,
.profile-summary-wrap,
.profile-card:first-of-type {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

.profile-header-card,
.profile-card:first-of-type {
  padding: 28px !important;
}

.profile-summary-wrap {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Profile Info Text (Ensure full contrast in Light & Dark Mode) */
/* Light Mode: */
body:not(.dark-mode) .profile-name,
body:not(.dark-mode) .profile-student-name,
body:not(.dark-mode) .profile-summary-details h2,
body:not(.dark-mode) .profile-summary-details h3,
body:not(.dark-mode) .profile-card h3 {
  color: #12346B !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 0 0 4px 0 !important;
}

body:not(.dark-mode) .profile-role,
body:not(.dark-mode) .profile-role-sub {
  color: #64748B !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 0 6px 0 !important;
}

body:not(.dark-mode) .profile-completion-text,
body:not(.dark-mode) .profile-completion-row span {
  color: #155EEF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Dark Mode: */
body.dark-mode .profile-name,
body.dark-mode .profile-student-name,
body.dark-mode .profile-summary-details h2,
body.dark-mode .profile-summary-details h3,
body.dark-mode .profile-card h3,
html[data-theme="dark"] .profile-name,
html[data-theme="dark"] .profile-student-name,
html[data-theme="dark"] .profile-summary-details h2,
html[data-theme="dark"] .profile-summary-details h3,
html[data-theme="dark"] .profile-card h3 {
  color: #FFFFFF !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 0 0 4px 0 !important;
}

body.dark-mode .profile-role,
body.dark-mode .profile-role-sub,
html[data-theme="dark"] .profile-role,
html[data-theme="dark"] .profile-role-sub {
  color: #94A3B8 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.dark-mode .profile-completion-text,
body.dark-mode .profile-completion-row span,
html[data-theme="dark"] .profile-completion-text,
html[data-theme="dark"] .profile-completion-row span {
  color: #93C5FD !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* ========================================================
   CLEAN AUTH LAYOUT FIX
   ======================================================== */

/* Clear header overlap */
body:has(form[action*="login"]) main,
body:has(form[action*="register"]) main,
body.page-auth main,
main.auth-main-wrapper {
  padding-top: 110px !important;
  padding-bottom: 60px !important;
  min-height: calc(100vh - 110px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #F8FAFC !important;
  box-sizing: border-box !important;
}

/* Auth Main Outer Container: Side-by-side 2 Columns */
body:has(form[action*="login"]) main > div:last-of-type,
body:has(form[action*="login"]) main > div:nth-child(2),
body:has(form[action*="register"]) main > div:last-of-type,
body:has(form[action*="register"]) main > div:nth-child(2),
.auth-split-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* 1. LEFT COLUMN: Blue Showcase Card (50% Width) */
body:has(form[action*="login"]) main > div:last-of-type > div:first-child,
body:has(form[action*="login"]) main > div:nth-child(2) > div:first-child,
body:has(form[action*="register"]) main > div:last-of-type > div:first-child,
body:has(form[action*="register"]) main > div:nth-child(2) > div:first-child,
.auth-hero-banner {
  flex: 1 1 50% !important;
  width: 50% !important;
  min-width: 420px !important;
  background: linear-gradient(145deg, #0B1727 0%, #12346B 55%, #155EEF 100%) !important;
  border-radius: 20px !important;
  padding: 36px !important;
  box-shadow: 0 12px 35px rgba(18, 52, 107, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

/* Badge inside Left Column */
.auth-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 20px !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  width: fit-content !important;
}

.auth-badge-pill .badge-dot {
  width: 6px !important;
  height: 6px !important;
  background-color: #38BDF8 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #38BDF8 !important;
}

/* Left Column Text */
body:has(form[action*="login"]) main h1,
body:has(form[action*="register"]) main h1,
.auth-hero-banner h1 {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
  margin: 12px 0 8px 0 !important;
}

body:has(form[action*="login"]) main h1 span,
body:has(form[action*="register"]) main h1 span,
.auth-hero-banner h1 span {
  color: #60A5FA !important;
}

body:has(form[action*="login"]) main p,
body:has(form[action*="register"]) main p,
.auth-hero-banner p {
  color: #E2E8F0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Left Feature Mini-Cards */
body:has(form[action*="login"]) main div:has(> strong),
body:has(form[action*="register"]) main div:has(> strong),
.feature-card-item {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

body:has(form[action*="login"]) main div:has(> strong) strong,
body:has(form[action*="register"]) main div:has(> strong) strong,
.feature-card-item strong {
  color: #12346B !important;
  font-size: 14px !important;
  display: block !important;
  margin-bottom: 2px !important;
}

body:has(form[action*="login"]) main div:has(> strong) p,
body:has(form[action*="register"]) main div:has(> strong) p,
.feature-card-item p {
  color: #64748B !important;
  font-size: 12.5px !important;
  margin: 0 !important;
}

/* 2. RIGHT COLUMN: Login Form Card (50% Width) */
body:has(form[action*="login"]) main > div:last-of-type > div:last-child,
body:has(form[action*="login"]) main > div:nth-child(2) > div:last-child,
body:has(form[action*="register"]) main > div:last-of-type > div:last-child,
body:has(form[action*="register"]) main > div:nth-child(2) > div:last-child,
.auth-form-card {
  flex: 1 1 50% !important;
  width: 50% !important;
  min-width: 380px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  box-shadow: 0 8px 25px rgba(18, 52, 107, 0.05) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Right Card Heading */
body:has(form[action*="login"]) main h2,
body:has(form[action*="register"]) main h2,
.auth-form-card h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #12346B !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.welcome-icon-wrap {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

.welcome-lucide-icon {
  width: 24px !important;
  height: 24px !important;
  color: #155EEF !important;
  vertical-align: middle !important;
}

.auth-subtext {
  color: #64748B !important;
  font-size: 14px !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

/* Alert Error */
.auth-alert-err {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #FEF2F2 !important;
  border: 1px solid #FCA5A5 !important;
  color: #DC2626 !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  margin-bottom: 18px !important;
}

/* Form Groups & Inputs */
.auth-form .form-group {
  margin-bottom: 16px !important;
  text-align: left !important;
}

.auth-form .form-group label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
}

.auth-form .form-group .label-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

.auth-form .form-group .forgot-link {
  font-size: 12.5px !important;
  color: #155EEF !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.auth-form .form-group .forgot-link:hover {
  text-decoration: underline !important;
}

.auth-form .input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.auth-form .input-wrapper .input-icon {
  position: absolute !important;
  left: 14px !important;
  color: #94A3B8 !important;
  pointer-events: none !important;
}

/* Form Inputs */
body:has(form[action*="login"]) input,
body:has(form[action*="register"]) input,
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="tel"],
.auth-form input[type="password"] {
  height: 46px !important;
  width: 100% !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 10px !important;
  padding: 0 14px 0 42px !important;
  font-size: 14px !important;
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body:has(form[action*="login"]) input:focus,
body:has(form[action*="register"]) input:focus,
.auth-form input:focus {
  border-color: #155EEF !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(21, 94, 239, 0.12) !important;
}

.auth-form .pwd-toggle-btn {
  position: absolute !important;
  right: 12px !important;
  background: transparent !important;
  border: none !important;
  color: #94A3B8 !important;
  cursor: pointer !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.auth-form .pwd-toggle-btn:hover {
  color: #475569 !important;
}

/* Primary Button */
body:has(form[action*="login"]) button[type="submit"],
body:has(form[action*="register"]) button[type="submit"],
.btn-auth-primary {
  height: 46px !important;
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(21, 94, 239, 0.25) !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
}

body:has(form[action*="login"]) button[type="submit"]:hover,
body:has(form[action*="register"]) button[type="submit"]:hover,
.btn-auth-primary:hover {
  background-color: #0F4CD9 !important;
  transform: translateY(-1px) !important;
}

/* Divider "or" */
.auth-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  margin: 18px 0 !important;
  width: 100% !important;
}

.auth-divider::before,
.auth-divider::after {
  content: "" !important;
  flex: 1 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.auth-divider span {
  padding: 0 12px !important;
  color: #94A3B8 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* Google SSO Button */
.btn-google-sso {
  height: 44px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  color: #1E293B !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease !important;
}

.btn-google-sso:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

/* Footer Link */
.auth-card-footer {
  margin-top: 18px !important;
  font-size: 13.5px !important;
  color: #64748B !important;
  text-align: center !important;
}

.auth-card-footer a {
  color: #155EEF !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.auth-card-footer a:hover {
  text-decoration: underline !important;
}

/* Password Checklist for Registration */
.auth-pwd-checklist {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: -6px 0 14px 0 !important;
}

.auth-pwd-checklist .chk-item {
  font-size: 12px !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.auth-pwd-checklist .chk-icon {
  color: #10B981 !important;
  font-weight: bold !important;
}

/* Hide legacy elements & demo buttons */
.auth-demo-grid,
.btn-auth-demo,
.auth-cosmic-bg,
.auth-trust-bar {
  display: none !important;
}

/* Responsive: Clean Mobile Stacking below 960px */
@media (max-width: 960px) {
  body:has(form[action*="login"]) main > div:last-of-type,
  body:has(form[action*="login"]) main > div:nth-child(2),
  body:has(form[action*="register"]) main > div:last-of-type,
  body:has(form[action*="register"]) main > div:nth-child(2),
  .auth-split-wrapper {
    flex-direction: column !important;
    max-width: 500px !important;
    gap: 24px !important;
  }

  body:has(form[action*="login"]) main > div:last-of-type > div:first-child,
  body:has(form[action*="login"]) main > div:nth-child(2) > div:first-child,
  body:has(form[action*="login"]) main > div:last-of-type > div:last-child,
  body:has(form[action*="login"]) main > div:nth-child(2) > div:last-child,
  .auth-hero-banner,
  .auth-form-card {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
}

/* ========================================================
   NAVBAR CLEARANCE FIX (HOMEPAGE & PORTAL PAGES)
   ======================================================== */

/* Ensure the body and main tag have sufficient top clearance on the homepage */
body:not(.auth-page):not(.page-auth):not(:has(form[action*="login"])):not(:has(form[action*="register"])) main,
main:has(.home-editorial),
main:has(.h-hero),
main:has(#announce),
main:has(.announce),
main.wrap.main,
body:not(.auth-page) main {
  padding-top: 88px !important; /* Clears floating navbar height (approx 68-72px) + breathing space */
  box-sizing: border-box !important;
}

/* Ensure the top admissions alert banner sits clearly below the navbar */
#announce,
.announce,
.home-editorial .announce,
.home-admissions-banner,
.announcement-bar,
main > .home-editorial > div:first-child {
  margin-top: 8px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Floating Navbar z-index and solid frosted glass styling */
header,
header.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(18, 52, 107, 0.06) !important;
}

body.dark-mode header,
body.dark-mode header.topbar,
html[data-theme="dark"] header,
html[data-theme="dark"] header.topbar {
  background: rgba(11, 23, 39, 0.95) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* ========================================================
   HOMEPAGE - COMPLETE ROYAL BLUE DESIGN SYSTEM
   ======================================================== */

/* 1. Admission Announcement Top Strip */
#announce,
.announce,
.home-editorial .announce,
.home-admissions-banner,
main > div > div:first-child:has-text("Admissions season"),
main > .home-editorial > div:first-child {
  background: linear-gradient(90deg, #12346B 0%, #155EEF 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  border-radius: 12px !important;
  padding: 10px 20px !important;
  box-shadow: 0 4px 14px rgba(21, 94, 239, 0.2) !important;
  text-align: center !important;
  border: none !important;
}

#announce button,
.announce button,
.home-editorial .announce button {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

/* 2. Hero Section */
/* National Entrance Prep Pill */
.home-editorial .trust,
.hero-pill-badge,
main section:first-of-type span.trust,
main section:first-of-type span:has-text("National Entrance Prep") {
  background: #EFF6FF !important;
  border: 1px solid #DBEAFE !important;
  color: #155EEF !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.home-editorial .trust .ping,
.trust .ping {
  background: #155EEF !important;
  box-shadow: 0 0 8px #155EEF !important;
}

/* Main Titles */
.home-editorial .h-hero h1,
main section:first-of-type h1 {
  color: #155EEF !important;
  font-weight: 900 !important;
}

.home-editorial .h-hero h2,
main section:first-of-type h2 {
  color: #12346B !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

body.dark-mode .home-editorial .h-hero h2,
body.dark-mode main section:first-of-type h2,
html[data-theme="dark"] .home-editorial .h-hero h2 {
  color: #FFFFFF !important;
}

/* Hero CTA Buttons */
.home-editorial .h-cta a[href*="/register"],
.h-cta a.btn:first-child,
main section:first-of-type a[href*="/register"],
a.btn-hero-primary {
  background-color: #155EEF !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 13px 26px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px rgba(21, 94, 239, 0.3) !important;
  transition: all 0.2s ease !important;
}

.home-editorial .h-cta a[href*="/register"]:hover,
.h-cta a.btn:first-child:hover,
main section:first-of-type a[href*="/register"]:hover,
a.btn-hero-primary:hover {
  background-color: #0F4CD9 !important;
  transform: translateY(-2px) !important;
}

.home-editorial .h-cta a[href*="/domains"],
.h-cta a.btn-ghost,
main section:first-of-type a[href*="/domains"],
a.btn-hero-secondary {
  background-color: #F0F6FE !important;
  color: #155EEF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 12px !important;
  padding: 13px 24px !important;
  font-weight: 700 !important;
}

/* Feature tags below CTA */
.home-editorial .h-badges span,
.h-badges span,
main section:first-of-type div:has(> span:has-text("MCQs")) span {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
}

body.dark-mode .home-editorial .h-badges span,
body.dark-mode .h-badges span {
  background: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.15) !important;
  color: #CBD5E1 !important;
}

/* 3. Target Exam Countdown Box */
section[aria-label="Exam countdowns"] article,
.exam-countdowns .exam-countdown,
article.exam-countdown,
.countdown-container {
  background: linear-gradient(135deg, #071B3A 0%, #12346B 60%, #155EEF 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 35px rgba(18, 52, 107, 0.22) !important;
}

section[aria-label="Exam countdowns"] article h3,
.exam-countdowns .exam-countdown h3 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

section[aria-label="Exam countdowns"] span > b,
.exam-countdowns .exam-countdown span > b,
.countdown-digits span > b {
  color: #60A5FA !important; /* Sky Blue glowing numbers */
  font-size: 32px !important;
  font-weight: 900 !important;
}

section[aria-label="Exam countdowns"] span > small,
.exam-countdowns .exam-countdown span > small,
.countdown-digits span > small {
  color: #CBD5E1 !important;
}

.exam-countdown .eyebrow,
section[aria-label="Exam countdowns"] .eyebrow {
  color: #93C5FD !important;
}

.exam-countdown .meta,
section[aria-label="Exam countdowns"] .meta {
  color: #E2E8F0 !important;
}

/* 4. Popular Entrance Exams Track Cards (ECAT, MDCAT, Nursing, NUMS, LAT) */
.exam-cards a.card.exam-card,
a.card.exam-card,
section:has(h2:has-text("Choose your exam")) a[href*="/domain?id="],
section:has(.exam-cards) a.card {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 18px !important;
  padding: 24px !important;
  box-shadow: 0 4px 18px rgba(18, 52, 107, 0.04) !important;
  transition: all 0.2s ease !important;
}

.exam-cards a.card.exam-card:hover,
a.card.exam-card:hover,
section:has(h2:has-text("Choose your exam")) a[href*="/domain?id="]:hover,
section:has(.exam-cards) a.card:hover {
  border-color: #155EEF !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(21, 94, 239, 0.12) !important;
}

body.dark-mode .exam-cards a.card.exam-card,
body.dark-mode a.card.exam-card,
body.dark-mode section:has(h2:has-text("Choose your exam")) a[href*="/domain?id="],
body.dark-mode section:has(.exam-cards) a.card,
html[data-theme="dark"] a.card.exam-card {
  background: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}

/* Exam Track Title & Authority Pill */
.exam-card h3,
section:has(h2:has-text("Choose your exam")) a[href*="/domain?id="] h3 {
  color: #12346B !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

body.dark-mode .exam-card h3,
body.dark-mode section:has(h2:has-text("Choose your exam")) a[href*="/domain?id="] h3,
html[data-theme="dark"] .exam-card h3 {
  color: #FFFFFF !important;
}

.exam-card .exam-icon,
.exam-card .exam-icon i {
  color: #155EEF !important;
}

.exam-card-link span,
section:has(h2:has-text("Choose your exam")) span:has-text("Explore syllabus") {
  color: #155EEF !important;
  font-weight: 700 !important;
}

/* Authority Badges (UET, PMDC, PNC, HEC) */
.exam-card .exam-badge,
.domain-boards-row .board-badge,
.board-badge,
section:has(h2:has-text("Choose your exam")) a span:has-text("PMDC"),
section:has(h2:has-text("Choose your exam")) a span:has-text("UET"),
section:has(h2:has-text("Choose your exam")) a span:has-text("PNC"),
section:has(h2:has-text("Choose your exam")) a span:has-text("HEC") {
  background: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #155EEF !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.exam-meta-pills .exam-meta-pill {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #64748B !important;
  font-size: 12px !important;
}

body.dark-mode .exam-meta-pills .exam-meta-pill {
  background: #0B132B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #94A3B8 !important;
}

/* 5. Features Grid ("Everything you need to succeed") */
.feat-grid > .card,
.feat-grid > .feat-card,
section:has(h2:has-text("Everything you need to succeed")) > div:last-child > div {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 4px 16px rgba(18, 52, 107, 0.04) !important;
}

body.dark-mode .feat-grid > .card,
body.dark-mode .feat-grid > .feat-card,
body.dark-mode section:has(h2:has-text("Everything you need to succeed")) > div:last-child > div,
html[data-theme="dark"] .feat-grid > .feat-card {
  background: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}

.feat-grid h3,
.feat-card h3,
section:has(h2:has-text("Everything you need to succeed")) h3 {
  color: #12346B !important;
  font-weight: 800 !important;
}

body.dark-mode .feat-grid h3,
body.dark-mode .feat-card h3,
body.dark-mode section:has(h2:has-text("Everything you need to succeed")) h3,
html[data-theme="dark"] .feat-card h3 {
  color: #FFFFFF !important;
}

/* Feature Icons */
.feat-grid i,
.feat-grid .feat-icon,
.feat-icon i,
section:has(h2:has-text("Everything you need to succeed")) i {
  color: #155EEF !important;
}

/* 6. "How it Works" Steps (01, 02, 03, 04) */
.how-it-works-section .step-badge,
.steps-grid .step-badge,
section:has(h2:has-text("Start in four simple steps")) div:has(> div:has-text("01")) > div:first-child,
section:has(h2:has-text("Start in four simple steps")) div:has(> div:has-text("02")) > div:first-child,
section:has(h2:has-text("Start in four simple steps")) div:has(> div:has-text("03")) > div:first-child,
section:has(h2:has-text("Start in four simple steps")) div:has(> div:has-text("04")) > div:first-child {
  color: #155EEF !important;
  font-weight: 900 !important;
}

.step-card {
  border: 1.5px solid #DBEAFE !important;
  border-radius: 16px !important;
}

.step-card.active-neon {
  border-color: #155EEF !important;
  box-shadow: 0 8px 24px rgba(21, 94, 239, 0.15) !important;
}

.step-card .step-icon-wrap i {
  color: #155EEF !important;
}

/* Official Easypaisa Box */
.hiw-payment-banner,
.ep-badge-wrap,
div:has(> span:has-text("Official Easypaisa")) {
  background: #F0F6FE !important;
  border: 1.5px solid #BFDBFE !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
}

body.dark-mode .hiw-payment-banner,
body.dark-mode .ep-badge-wrap {
  background: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.2) !important;
}

.hiw-payment-banner .ep-tag,
.ep-tag,
div:has(> span:has-text("Official Easypaisa")) span:first-child {
  color: #12346B !important;
  font-weight: 700 !important;
}

body.dark-mode .hiw-payment-banner .ep-tag,
body.dark-mode .ep-tag {
  color: #93C5FD !important;
}

.hiw-payment-banner .ep-num,
.ep-num,
#epNumber,
div:has(> span:has-text("Official Easypaisa")) span:has-text("0330 8261947") {
  color: #155EEF !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

.ep-copy-btn {
  background: #155EEF !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  border: none !important;
  padding: 6px 14px !important;
  font-weight: 700 !important;
}

.ep-copy-btn:hover {
  background: #0F4CD9 !important;
}

/* 7. Pricing Section ("Simple, one-time pricing") */
/* Standard Single Exam Card */
.pricing > .price-card:not(.best),
section:has(h2:has-text("Simple, one-time pricing")) > div:last-child > div:first-child {
  background: #FFFFFF !important;
  border: 1.5px solid #DBEAFE !important;
  border-radius: 20px !important;
  padding: 32px !important;
}

body.dark-mode .pricing > .price-card:not(.best) {
  background: #111C3A !important;
  border-color: rgba(219, 234, 254, 0.12) !important;
}

.pricing > .price-card:not(.best) h3 {
  color: #12346B !important;
  font-weight: 800 !important;
}

body.dark-mode .pricing > .price-card:not(.best) h3 {
  color: #FFFFFF !important;
}

.pricing > .price-card:not(.best) .amt {
  color: #155EEF !important;
}

/* All Access Pass Card (Highlighted Royal Navy Gradient) */
.pricing > .price-card.best,
section:has(h2:has-text("Simple, one-time pricing")) > div:last-child > div:last-child {
  background: linear-gradient(145deg, #071B3A 0%, #102A45 50%, #155EEF 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 40px rgba(18, 52, 107, 0.25) !important;
}

.pricing > .price-card.best h3,
.pricing > .price-card.best div,
.pricing > .price-card.best .amt,
.pricing > .price-card.best li,
section:has(h2:has-text("Simple, one-time pricing")) > div:last-child > div:last-child h3,
section:has(h2:has-text("Simple, one-time pricing")) > div:last-child > div:last-child div {
  color: #FFFFFF !important;
}

.pricing > .price-card.best .best-tag {
  background: #38BDF8 !important;
  color: #071B3A !important;
  font-weight: 800 !important;
}

.pricing > .price-card.best a.btn,
.pricing > .price-card.best a,
section:has(h2:has-text("Simple, one-time pricing")) > div:last-child > div:last-child a {
  background: #FFFFFF !important;
  color: #155EEF !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  text-decoration: none !important;
  display: inline-block !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

.pricing > .price-card.best a.btn:hover,
section:has(h2:has-text("Simple, one-time pricing")) > div:last-child > div:last-child a:hover {
  background: #F0F6FE !important;
  color: #0F4CD9 !important;
}

/* 8. Stats Counter Section (Students, Practice questions, etc.) */
.stats-strip,
.stats-grid,
section:has(span:has-text("Practice questions")) > div {
  background: #F8FAFC !important;
  border-top: 1.5px solid #E2E8F0 !important;
  border-bottom: 1.5px solid #E2E8F0 !important;
  padding: 36px 20px !important;
}

body.dark-mode .stats-strip,
body.dark-mode .stats-grid {
  background: #0B132B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.stat-card .stat-number,
section:has(span:has-text("Practice questions")) span:first-child {
  color: #155EEF !important; /* Royal Blue Big Numbers */
  font-size: 36px !important;
  font-weight: 900 !important;
}

.stat-card .stat-label,
section:has(span:has-text("Practice questions")) span:last-child {
  color: #475569 !important;
  font-weight: 600 !important;
}

body.dark-mode .stat-card .stat-label {
  color: #94A3B8 !important;
}

/* 9. Bottom CTA Section ("Ready to start preparing?") */
section.final-cta,
.final-cta,
section:has(h2:has-text("Ready to start preparing?")) {
  background: linear-gradient(135deg, #071B3A 0%, #12346B 60%, #155EEF 100%) !important;
  border-radius: 24px !important;
  padding: 60px 30px !important;
  color: #FFFFFF !important;
  text-align: center !important;
  box-shadow: 0 20px 50px rgba(18, 52, 107, 0.25) !important;
  margin: 60px auto 40px auto !important;
  max-width: 1140px !important;
}

section.final-cta h2,
.final-cta h2,
section:has(h2:has-text("Ready to start preparing?")) h2 {
  color: #FFFFFF !important;
  font-size: 34px !important;
  font-weight: 900 !important;
}

section.final-cta p,
.final-cta p,
section:has(h2:has-text("Ready to start preparing?")) p {
  color: #CBD5E1 !important;
  font-size: 16px !important;
  margin: 10px 0 26px 0 !important;
}

section.final-cta a,
.final-cta a,
section:has(h2:has-text("Ready to start preparing?")) a {
  background: #FFFFFF !important;
  color: #155EEF !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 14px 32px !important;
  font-size: 15.5px !important;
  text-decoration: none !important;
  display: inline-block !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

section.final-cta a:hover,
.final-cta a:hover,
section:has(h2:has-text("Ready to start preparing?")) a:hover {
  transform: translateY(-2px) !important;
  background: #F0F6FE !important;
  color: #0F4CD9 !important;
}

/* ========================================================
   ABOUT EDUXPERTI - 3-TRACK INTERACTIVE SHOWCASE
   ======================================================== */

.about-track-showcase {
  max-width: 1220px !important;
  margin: 60px auto !important;
  padding: 48px !important;
  background: linear-gradient(145deg, #071B3A 0%, #0E2A5D 55%, #155EEF 100%) !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 50px rgba(7, 27, 58, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 44px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

@media (max-width: 960px) {
  .about-track-showcase {
    grid-template-columns: 1fr !important;
    padding: 32px 20px !important;
    gap: 32px !important;
  }
  .about-track-showcase img {
    height: 300px !important;
  }
}

/* ========================================================
   ABOUT EDUXPERTI - TIGHTENED VERTICAL SPACING & CRISP WHITE
   ======================================================== */

/* 1. Pull the container up and remove dead outer space */
.home-about-section,
.about-track-showcase,
section.about-track-showcase,
section.home-about-section {
  margin-top: 10px !important;    /* Pulls whole section tightly upward */
  margin-bottom: 30px !important;
  padding-top: 24px !important;   /* Tightened internal top padding */
  padding-bottom: 28px !important;
}

/* 2. Kill extra bottom margin/padding from preceding sections */
.home-exam-section,
section:has(.exam-cards),
.home-editorial .section:has(.exam-cards),
section:has(a[href*="/domain?id="]) {
  margin-bottom: 10px !important;
  padding-bottom: 0px !important;
}

/* 3. Pull internal elements closer to top inside About container */
.about-track-showcase > div:first-child > span:first-of-type,
.home-about-section > div:first-child > span:first-of-type,
section.about-track-showcase > div:first-child > span:first-of-type {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

/* 4. Force 100% Crisp White Typography (Light & Dark Mode) */
.home-about-section h2,
.about-track-showcase h2,
section.about-track-showcase h2,
section.home-about-section h2 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 10px 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.home-about-section > div:first-child > p,
.about-track-showcase > div:first-child > p,
section.about-track-showcase p,
section.home-about-section p {
  color: #E2E8F0 !important;
  -webkit-text-fill-color: #E2E8F0 !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 20px 0 !important;
  opacity: 1 !important;
}

/* Ensure the pill badge stays bright */
.home-about-section > div:first-child > span:first-of-type,
.about-track-showcase > div:first-child > span:first-of-type,
section.about-track-showcase span {
  color: #93C5FD !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}