/* ================================================================
   ExamAce v5 — Production CSS
   Supports: Desktop · Tablet · Android · iOS (notch + safe areas)
   Themes: dark · light · blue · green
   ================================================================ */

/* ── Themes ──────────────────────────────────────────────────── */
:root,[data-theme=dark]{
  --pri:#6C63FF;--pri-dk:#4B44C8;--pri-lt:#9D97FF;
  --acc:#FF6B6B;--acc2:#FFD93D;
  --ok:#6BCB77;--err:#FF6B6B;--warn:#FFD93D;--info:#4D96FF;
  --bg:#0D0D1A;--bg2:#13132B;--bg3:#1A1A35;
  --sur:#1E1E40;--sur2:#252550;
  --bdr:rgba(108,99,255,.22);--bdr-lt:rgba(255,255,255,.07);
  --txt:#F0F0FF;--txt2:#A9A9CC;--txt3:#6D6D99;
  --sb-bg:#13132B;--tb-bg:rgba(13,13,26,.95);--nb-bg:rgba(19,19,43,.97);
  --sh:0 4px 24px rgba(0,0,0,.4);--r:16px;--rsm:10px;--rlg:22px;
  --sw:240px;--th:58px;
}
[data-theme=light]{
  --pri:#6C63FF;--pri-dk:#4B44C8;--pri-lt:#4B44C8;
  --acc:#D95252;--acc2:#B88A00;--ok:#2A8C37;--err:#D95252;--warn:#B88A00;--info:#1E63D4;
  --bg:#F4F4FF;--bg2:#EAEAFF;--bg3:#DDDDF5;--sur:#FFF;--sur2:#EFEFFF;
  --bdr:rgba(108,99,255,.18);--bdr-lt:rgba(0,0,0,.07);
  --txt:#1A1A2E;--txt2:#4A4A72;--txt3:#8585B5;
  --sb-bg:#FFF;--tb-bg:rgba(244,244,255,.96);--nb-bg:rgba(255,255,255,.97);
}
[data-theme=blue]{
  --pri:#0EA5E9;--pri-dk:#0284C7;--pri-lt:#38BDF8;
  --acc:#F97316;--acc2:#FBBF24;--ok:#22C55E;--err:#EF4444;--warn:#FBBF24;--info:#60A5FA;
  --bg:#0A1628;--bg2:#0F1E38;--bg3:#162440;--sur:#1A2D4A;--sur2:#1E3454;
  --bdr:rgba(14,165,233,.22);--bdr-lt:rgba(255,255,255,.07);
  --txt:#E0F2FE;--txt2:#93C5FD;--txt3:#4B84B4;
  --sb-bg:#0F1E38;--tb-bg:rgba(10,22,40,.95);--nb-bg:rgba(15,30,56,.97);
}
[data-theme=green]{
  --pri:#10B981;--pri-dk:#059669;--pri-lt:#34D399;
  --acc:#F59E0B;--acc2:#FCD34D;--ok:#22C55E;--err:#EF4444;--warn:#F59E0B;--info:#3B82F6;
  --bg:#071A12;--bg2:#0C2318;--bg3:#112B1E;--sur:#163325;--sur2:#1A3D2C;
  --bdr:rgba(16,185,129,.22);--bdr-lt:rgba(255,255,255,.07);
  --txt:#D1FAE5;--txt2:#6EE7B7;--txt3:#2E7D56;
  --sb-bg:#0C2318;--tb-bg:rgba(7,26,18,.95);--nb-bg:rgba(12,35,24,.97);
}

/* ================================================================
   BACKWARD-COMPAT ALIASES — old var names → new var names
   (keeps all existing views working without changes)
   ================================================================ */
:root,[data-theme=dark],[data-theme=light],[data-theme=blue],[data-theme=green]{
  /* Old → new mappings */
  --primary:          var(--pri);
  --primary-dk:       var(--pri-dk);
  --primary-dark:     var(--pri-dk);
  --primary-lt:       var(--pri-lt);
  --primary-light:    var(--pri-lt);
  --accent:           var(--acc);
  --accent2:          var(--acc2);
  --success:          var(--ok);
  --danger:           var(--err);
  --warning:          var(--warn);
  --bg3:              var(--bg3);
  --surface:          var(--sur);
  --surface2:         var(--sur2);
  --border:           var(--bdr);
  --border-light:     var(--bdr-lt);
  --text:             var(--txt);
  --text2:            var(--txt2);
  --text3:            var(--txt3);
  --shadow:           var(--sh);
  --radius:           var(--r);
  --radius-sm:        var(--rsm);
  --radius-lg:        var(--rlg);
  --sidebar-w:        var(--sw);
  --topbar-h:         var(--th);
  --nav-bg:           var(--nb-bg);
  --topbar-bg:        var(--tb-bg);
  --sidebar-bg:       var(--sb-bg);
  /* Additional aliases used in inline styles */
  --info:             #4D96FF;
  --border-lt:        var(--bdr-lt);
}

/* ── iOS/Android safe areas ──────────────────────────────────── */
:root{
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}

/* ── Reset ───────────────────────────────────────────────────── */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;height:100%}
body{
  font-family:'Baloo 2','Noto Sans Devanagari',system-ui,sans-serif;
  background:var(--bg);color:var(--txt);min-height:100%;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
a{color:var(--pri-lt);text-decoration:none}
button{cursor:pointer;font-family:inherit}
img{max-width:100%;height:auto;display:block}

/* Prevent iOS zoom on focus (font-size ≥ 16px) */
input,textarea,select{
  font-family:inherit;font-size:16px;
  background:var(--sur);color:var(--txt);
  border:1.5px solid var(--bdr);border-radius:var(--rsm);
  padding:11px 14px;width:100%;outline:none;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s,box-shadow .2s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--pri);box-shadow:0 0 0 3px rgba(108,99,255,.14);
}
select option{background:var(--sur);color:var(--txt)}
textarea{resize:vertical;min-height:80px}

/* Scrollbars */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:var(--pri);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* ── App Shell ───────────────────────────────────────────────── */
.app-shell{display:flex;min-height:100vh;position:relative}

/* ── Desktop Sidebar ─────────────────────────────────────────── */
.app-sidebar{
  width:var(--sw);flex-shrink:0;
  background:var(--sb-bg);border-right:1px solid var(--bdr-lt);
  position:fixed;top:0;bottom:0;left:0;z-index:80;
  display:flex;flex-direction:column;overflow-y:auto;
  padding-bottom:var(--sab);
}

.app-main{flex:1;margin-left:var(--sw);display:flex;flex-direction:column;min-height:100vh}

/* ── Top Bar ─────────────────────────────────────────────────── */
.app-topbar{
  position:sticky;top:0;z-index:70;
  background:var(--tb-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--bdr-lt);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  /* Safe area: status bar on iOS/notch phones */
  padding-top:var(--sat);
  height:calc(var(--th) + var(--sat));
  padding-left:max(18px,var(--sal));
  padding-right:max(18px,var(--sar));
}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-right{display:flex;align-items:center;gap:7px;flex-shrink:0}

.app-logo-text{
  font-size:18px;font-weight:800;white-space:nowrap;
  background:linear-gradient(135deg,var(--pri-lt),var(--acc));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.topbar-badge{
  display:flex;align-items:center;gap:3px;
  background:var(--sur);border:1px solid var(--bdr);
  border-radius:99px;padding:3px 9px;
  font-size:12px;font-weight:600;white-space:nowrap;
}
.topbar-avatar{
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--pri);object-fit:cover;flex-shrink:0;
}
.hamburger-btn{
  display:none;background:none;border:none;
  color:var(--txt);font-size:22px;padding:4px;line-height:1;
  flex-shrink:0;-webkit-user-select:none;user-select:none;
}

/* ── Page content ────────────────────────────────────────────── */
.app-content{flex:1;padding-bottom:calc(60px + var(--sab) + 12px)}
.page{padding:18px;max-width:820px;margin:0 auto;width:100%}
.page-wide{padding:18px;max-width:1100px;margin:0 auto;width:100%}

/* ── Bottom Nav (mobile only) ────────────────────────────────── */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:70;
  background:var(--nb-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--bdr-lt);
  display:flex;align-items:stretch;
  padding-bottom:var(--sab);
  padding-left:var(--sal);
  padding-right:var(--sar);
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:8px 2px 6px;color:var(--txt3);
  font-size:9px;font-weight:600;text-decoration:none;
  -webkit-user-select:none;user-select:none;position:relative;
}
.nav-item.active{color:var(--pri-lt)}
.nav-icon{font-size:20px;line-height:1;display:block}
.nav-item.active .nav-icon{transform:scale(1.1)}
.nav-dot{position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--pri)}

/* ── Sidebar components ──────────────────────────────────────── */
.sidebar-logo{
  padding:16px 18px 10px;font-size:18px;font-weight:800;flex-shrink:0;
  background:linear-gradient(135deg,var(--pri-lt),var(--acc));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sidebar-user{
  display:flex;align-items:center;gap:9px;
  padding:8px 16px 12px;border-bottom:1px solid var(--bdr-lt);flex-shrink:0;
}
.sidebar-avatar{width:34px;height:34px;border-radius:50%;border:2px solid var(--pri);object-fit:cover;flex-shrink:0}
.sidebar-uname{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-plan{font-size:10px;color:var(--txt3)}
.sidebar-section{
  padding:9px 18px 3px;font-size:9.5px;font-weight:700;
  color:var(--txt3);text-transform:uppercase;letter-spacing:.6px;flex-shrink:0;
}
.sidebar-link{
  display:flex;align-items:center;gap:9px;
  padding:8px 18px;font-size:13px;font-weight:600;
  color:var(--txt2);text-decoration:none;
  border-left:3px solid transparent;transition:all .12s;flex-shrink:0;
}
.sidebar-link:hover,.sidebar-link:active{background:rgba(108,99,255,.08);color:var(--pri-lt)}
.sidebar-link.active{background:rgba(108,99,255,.12);color:var(--pri-lt);border-left-color:var(--pri)}
.sidebar-link .si{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.sidebar-divider{height:1px;background:var(--bdr-lt);margin:6px 14px;flex-shrink:0}

/* ── Mobile Drawer ───────────────────────────────────────────── */
.mobile-drawer{position:fixed;inset:0;z-index:200;pointer-events:none}
.mobile-drawer.open{pointer-events:all}
.mobile-drawer-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.6);
  opacity:0;transition:opacity .22s;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.mobile-drawer.open .mobile-drawer-overlay{opacity:1}
.mobile-drawer-panel{
  position:absolute;top:0;left:0;bottom:0;
  width:260px;max-width:82vw;
  background:var(--sb-bg);overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(-102%);transition:transform .22s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  padding-top:var(--sat);padding-bottom:var(--sab);padding-left:var(--sal);
}
.mobile-drawer.open .mobile-drawer-panel{transform:translateX(0)}

/* ── More FAB ────────────────────────────────────────────────── */
.more-fab{
  position:fixed;
  bottom:calc(60px + var(--sab) + 10px);
  right:max(14px,var(--sar));
  z-index:72;width:40px;height:40px;border-radius:50%;
  background:var(--pri);color:#fff;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(108,99,255,.5);
  -webkit-user-select:none;user-select:none;cursor:pointer;
}
.more-fab:active{transform:scale(.9)}
.more-menu{
  position:fixed;
  bottom:calc(60px + var(--sab) + 60px);
  right:max(12px,var(--sar));
  z-index:72;background:var(--sur2);
  border:1px solid var(--bdr);border-radius:14px;
  min-width:190px;max-height:72vh;overflow-y:auto;
  box-shadow:var(--sh);-webkit-overflow-scrolling:touch;
}
.more-menu a{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px;color:var(--txt);font-size:13px;font-weight:500;
  border-bottom:1px solid var(--bdr-lt);
}
.more-menu a:last-child{border-bottom:none}
.more-menu a:active{background:rgba(108,99,255,.08)}
.mm-section{
  padding:6px 14px 2px;font-size:9.5px;font-weight:700;
  color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;
  background:var(--bg3);
}
.hidden{display:none!important}

/* ── Cards ───────────────────────────────────────────────────── */
.card{background:var(--sur);border:1px solid var(--bdr-lt);border-radius:var(--r);padding:16px;margin-bottom:12px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card-title{font-size:15px;font-weight:700}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 20px;border-radius:var(--rsm);font-size:14px;font-weight:700;
  border:none;cursor:pointer;white-space:nowrap;transition:all .15s;
  -webkit-user-select:none;user-select:none;
}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn-primary{background:linear-gradient(135deg,var(--pri),var(--pri-dk));color:#fff;box-shadow:0 3px 12px rgba(108,99,255,.3)}
.btn-primary:hover{filter:brightness(1.07);box-shadow:0 5px 16px rgba(108,99,255,.42)}
.btn-accent{background:linear-gradient(135deg,var(--acc),#C84444);color:#fff}
.btn-success{background:linear-gradient(135deg,var(--ok),#3A8A44);color:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--pri);color:var(--pri-lt)}
.btn-ghost{background:var(--sur2);color:var(--txt)}
.btn-warning{background:var(--warn);color:#000;font-weight:800}
.btn-sm{padding:6px 13px;font-size:12px;border-radius:8px}
.btn-block{width:100%}

/* ── Badges ──────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700}
.badge-success{background:rgba(107,203,119,.14);color:var(--ok);border:1px solid rgba(107,203,119,.28)}
.badge-warning{background:rgba(255,217,61,.14);color:var(--warn);border:1px solid rgba(255,217,61,.28)}
.badge-danger{background:rgba(255,107,107,.14);color:var(--err);border:1px solid rgba(255,107,107,.28)}
.badge-info{background:rgba(77,150,255,.14);color:var(--info);border:1px solid rgba(77,150,255,.28)}
.badge-primary{background:rgba(108,99,255,.14);color:var(--pri-lt);border:1px solid var(--bdr)}

/* ── Forms ───────────────────────────────────────────────────── */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--txt2);margin-bottom:4px}

/* ── Progress ────────────────────────────────────────────────── */
.progress-bar{height:8px;background:var(--bg3);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pri),var(--acc));transition:width .5s ease}

/* ── Stats ───────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:16px}
.stat-card{background:var(--sur);border:1px solid var(--bdr-lt);border-radius:var(--rsm);padding:13px;text-align:center}
.stat-num{font-size:24px;font-weight:800;color:var(--pri-lt);line-height:1.1;margin-bottom:3px}
.stat-label{font-size:11px;color:var(--txt2)}

/* ── Section header ──────────────────────────────────────────── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.section-title{font-size:16px;font-weight:800}
.section-link{font-size:13px;color:var(--pri-lt);font-weight:600}

/* ── Toast ───────────────────────────────────────────────────── */
.toast{
  position:fixed;
  top:calc(var(--th) + var(--sat) + 8px);
  left:max(12px,var(--sal));right:max(12px,var(--sar));
  z-index:9999;padding:11px 14px;border-radius:var(--rsm);
  display:flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;box-shadow:var(--sh);
  animation:toastIn .25s ease, toastOut .3s ease 3.7s forwards;
}
.toast-success{background:rgba(107,203,119,.12);border:1px solid var(--ok);color:var(--ok)}
.toast-error{background:rgba(255,107,107,.12);border:1px solid var(--err);color:var(--err)}
@keyframes toastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1}to{opacity:0;pointer-events:none}}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:500;
  display:flex;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.modal-sheet{
  background:var(--sur);width:100%;max-width:640px;
  border-radius:var(--rlg) var(--rlg) 0 0;
  padding:20px max(20px,var(--sal));
  padding-bottom:max(20px,var(--sab));
  max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}

/* ── Question/option ─────────────────────────────────────────── */
.question-card{background:var(--sur);border:1px solid var(--bdr-lt);border-radius:var(--r);padding:16px;margin-bottom:12px}
.question-num{font-size:11px;color:var(--txt3);font-weight:600;margin-bottom:6px;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.question-text{font-size:15px;font-weight:600;line-height:1.65;margin-bottom:14px}
.options-list{display:flex;flex-direction:column;gap:8px}
.option-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:var(--rsm);
  background:var(--bg3);border:1.5px solid var(--bdr);
  cursor:pointer;transition:all .12s;font-size:14px;font-weight:500;
  -webkit-user-select:none;user-select:none;
}
.option-item:hover{border-color:var(--pri);background:rgba(108,99,255,.08)}
.option-item.selected{border-color:var(--pri);background:rgba(108,99,255,.1)}
.option-item.correct{border-color:var(--ok);background:rgba(107,203,119,.1);color:var(--ok)}
.option-item.wrong{border-color:var(--err);background:rgba(255,107,107,.1);color:var(--err)}
.option-label{width:26px;height:26px;min-width:26px;border-radius:50%;border:1.5px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.option-item.selected .option-label{background:var(--pri);border-color:var(--pri);color:#fff}
.option-item.correct .option-label{background:var(--ok);border-color:var(--ok);color:#fff}
.option-item.wrong .option-label{background:var(--err);border-color:var(--err);color:#fff}
.explanation-box{margin-top:12px;padding:11px 12px;border-radius:var(--rsm);background:rgba(108,99,255,.07);border:1px solid var(--bdr);font-size:13px;color:var(--txt2);line-height:1.6}

/* ── Auth ────────────────────────────────────────────────────── */
.auth-page{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px max(18px,var(--sal));
  background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(108,99,255,.22),transparent),var(--bg);
}
.auth-logo{font-size:30px;font-weight:800;margin-bottom:6px;text-align:center;background:linear-gradient(135deg,var(--pri-lt),var(--acc));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.auth-card{width:100%;max-width:430px;background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rlg);padding:24px;box-shadow:var(--sh)}

/* ── Dashboard ───────────────────────────────────────────────── */
.hero-banner{border-radius:var(--r);background:linear-gradient(135deg,#3d35c8,var(--pri),#8B7FFF);padding:18px;margin-bottom:14px;overflow:hidden;position:relative}
.hero-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.1),transparent 60%)}
.hero-greeting{font-size:18px;font-weight:800;color:#fff;position:relative}
.hero-sub{font-size:12px;color:rgba(255,255,255,.8);margin-top:2px;position:relative}
.hero-stats{display:flex;gap:8px;margin-top:12px;position:relative}
.hero-stat{flex:1;background:rgba(255,255,255,.12);border-radius:9px;padding:8px;text-align:center}
.hero-stat-num{font-size:18px;font-weight:800;color:#fff}
.hero-stat-lbl{font-size:9px;color:rgba(255,255,255,.72)}
.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.subject-item{background:var(--sur);border:1px solid var(--bdr-lt);border-radius:var(--rsm);padding:11px 6px;text-align:center;transition:all .15s;text-decoration:none;color:var(--txt);display:block}
.subject-item:active{transform:scale(.97);border-color:var(--pri)}
.subject-icon{font-size:24px;display:block;margin-bottom:4px}
.subject-name{font-size:11px;font-weight:700}
.qa-card{background:var(--sur);border:1px solid var(--bdr-lt);border-radius:var(--rsm);padding:13px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt);transition:all .15s}
.qa-card:active{transform:scale(.98);border-color:var(--pri)}

/* ── Exam mode (full screen) ─────────────────────────────────── */
.exam-header{
  position:sticky;top:0;z-index:200;
  background:var(--tb-bg);backdrop-filter:blur(12px);
  padding:10px max(16px,var(--sal));
  padding-top:calc(10px + var(--sat));
  border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:space-between;
}
.exam-content{padding:16px max(14px,var(--sal)) 100px;max-width:720px;margin:0 auto;-webkit-overflow-scrolling:touch}
.exam-footer{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:var(--nb-bg);backdrop-filter:blur(12px);
  padding:8px max(14px,var(--sal));
  padding-bottom:max(8px,var(--sab));
  border-top:1px solid var(--bdr);display:flex;gap:8px;
}
.exam-option{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:var(--rsm);
  background:var(--bg3);border:1.5px solid var(--bdr);
  cursor:pointer;font-size:14px;color:var(--txt);margin-bottom:8px;
  -webkit-user-select:none;user-select:none;
}
.exam-option:active,.exam-option:hover{border-color:var(--pri);background:rgba(108,99,255,.09)}
.exam-option.selected{border-color:var(--pri);background:rgba(108,99,255,.14)}
.palette-btn{aspect-ratio:1;border-radius:7px;font-size:11px;font-weight:700;background:var(--sur);border:1.5px solid var(--bdr);color:var(--txt);cursor:pointer;transition:all .12s}
.palette-btn.answered{background:var(--pri);border-color:var(--pri);color:#fff}
.palette-btn.marked{background:var(--warn);border-color:var(--warn);color:#000}
.palette-btn.current{border-color:var(--acc2);color:var(--acc2)}

/* ── AI Chat ─────────────────────────────────────────────────── */
.ai-msg{padding:11px 13px;border-radius:10px;font-size:14px;line-height:1.7;max-width:90%}
.ai-msg-user{background:var(--pri);color:#fff;align-self:flex-end;border-radius:10px 3px 10px 10px}
.ai-msg-bot{background:var(--sur2);color:var(--txt);align-self:flex-start;border-radius:3px 10px 10px 10px}
.ai-msg-bot strong{color:var(--pri-lt)}
@keyframes ai-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ai-dot{width:7px;height:7px;border-radius:50%;background:var(--txt3);display:inline-block;animation:ai-bounce .7s infinite}
.ai-dot:nth-child(2){animation-delay:.15s}.ai-dot:nth-child(3){animation-delay:.3s}

/* ── Notes/Content ───────────────────────────────────────────── */
.note-content{font-size:14px;line-height:1.8;color:var(--txt2)}
.note-content h2{font-size:16px;font-weight:700;color:var(--pri-lt);margin:16px 0 8px}
.note-content h3{font-size:15px;font-weight:700;color:var(--txt);margin:12px 0 6px}
.note-content strong{color:var(--txt)}
.note-content code{background:var(--bg3);border-radius:4px;padding:1px 6px;font-family:monospace;font-size:12px;color:var(--acc)}

/* ── Score circle ────────────────────────────────────────────── */
.score-circle{width:110px;height:110px;border-radius:50%;background:conic-gradient(var(--pri) calc(var(--pct)*1%),var(--bg3) 0);display:flex;align-items:center;justify-content:center;position:relative;margin:0 auto 16px}
.score-circle::before{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--sur)}
.score-circle-val{position:relative;font-size:22px;font-weight:800;color:var(--pri-lt)}

/* ── Pricing ─────────────────────────────────────────────────── */
.pricing-card{background:var(--sur);border:2px solid var(--bdr-lt);border-radius:var(--r);padding:20px;margin-bottom:12px}
.pricing-card.featured{border-color:var(--pri);background:linear-gradient(135deg,var(--sur),rgba(108,99,255,.07))}

/* ── Admin ───────────────────────────────────────────────────── */
.admin-sidebar{width:240px;background:var(--sb-bg);border-right:1px solid var(--bdr);position:fixed;left:0;top:0;bottom:0;overflow-y:auto;z-index:50;transition:transform .25s;padding-bottom:var(--sab)}
.admin-nav-item{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:13px;font-weight:600;color:var(--txt2);text-decoration:none;border-left:3px solid transparent;transition:all .12s}
.admin-nav-item:hover,.admin-nav-item.active{background:rgba(108,99,255,.09);color:var(--pri-lt);border-left-color:var(--pri)}
.admin-main{margin-left:240px;padding:22px;min-width:0;flex:1}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--bdr);flex-wrap:wrap;gap:10px}
.admin-page-title{font-size:20px;font-weight:800}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:18px}
.stat-c{background:var(--sur);border:1px solid var(--bdr-lt);border-radius:var(--r);padding:16px}
.stat-c-num{font-size:28px;font-weight:800;color:var(--pri-lt)}
.stat-c-label{font-size:12px;color:var(--txt2);margin-top:4px}
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table th{text-align:left;padding:9px 13px;font-size:10px;color:var(--txt3);font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--bdr)}
.admin-table td{padding:10px 13px;border-bottom:1px solid var(--bdr-lt);vertical-align:middle}
.admin-table tr:hover td{background:rgba(108,99,255,.03)}
.admin-card{background:var(--sur);border:1px solid var(--bdr-lt);border-radius:var(--r);padding:16px;margin-bottom:16px}
.admin-sidebar-logo{padding:0 18px 14px;font-size:18px;font-weight:800;background:linear-gradient(135deg,var(--pri-lt),var(--acc));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── Flashcard ───────────────────────────────────────────────── */
.fc-card{perspective:1000px;height:220px;cursor:pointer;-webkit-user-select:none;user-select:none}
.fc-inner{position:relative;width:100%;height:100%;transition:transform .55s;transform-style:preserve-3d}
.fc-card.flipped .fc-inner{transform:rotateY(180deg)}
.fc-front,.fc-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px;font-size:16px;font-weight:600;line-height:1.5;text-align:center}
.fc-front{background:linear-gradient(135deg,var(--pri),var(--pri-dk));color:#fff}
.fc-back{background:var(--sur);border:2px solid var(--pri);color:var(--txt);transform:rotateY(180deg)}

/* ── Misc ────────────────────────────────────────────────────── */
.loading-spinner{width:32px;height:32px;border:3px solid var(--bdr);border-top-color:var(--pri);border-radius:50%;animation:spin .7s linear infinite;margin:32px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state{text-align:center;padding:40px 14px;color:var(--txt2)}
.empty-icon{font-size:48px;display:block;margin-bottom:10px}
.timer-display{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--acc2)}
.timer-display.danger{color:var(--err);animation:danger-pulse 1s infinite}
@keyframes danger-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* ── Desktop ≥ 1200px ──────────────────────────────────────── */
@media(min-width:1200px){
  :root{--sw:260px}
  .page{max-width:880px}
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .subject-grid{grid-template-columns:repeat(6,1fr)}
  .admin-main{margin-left:260px}
  .admin-sidebar{width:260px}
}

/* ── Desktop 768–1199px ────────────────────────────────────── */
@media(min-width:768px){
  /* Hide mobile nav */
  .bottom-nav,.more-fab,.more-menu,.hamburger-btn{display:none!important}
  /* Show desktop sidebar */
  .app-sidebar{display:flex!important}
  .app-content{padding-bottom:20px}
  /* Wider grids */
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .subject-grid{grid-template-columns:repeat(4,1fr)}
  .page{padding:20px 24px}
}

/* ── Tablet 768–1024px ─────────────────────────────────────── */
@media(min-width:768px)and(max-width:1024px){
  :root{--sw:200px}
  .admin-main{margin-left:200px}
  .admin-sidebar{width:200px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .subject-grid{grid-template-columns:repeat(4,1fr)}
}

/* ── Mobile < 768px ────────────────────────────────────────── */
@media(max-width:767px){
  /* Hide desktop sidebar */
  .app-sidebar{display:none!important}
  .app-main{margin-left:0!important}
  .hamburger-btn{display:flex!important}

  /* Content padding accounts for sticky header + bottom nav */
  .app-content{padding-bottom:calc(60px + var(--sab) + 10px)}

  /* Topbar: correct height with safe area */
  .app-topbar{
    height:auto;
    padding-top:calc(max(var(--sat),10px));
    padding-bottom:10px;
    min-height:50px;
  }
  .app-logo-text{font-size:16px}
  .topbar-badge{padding:3px 7px;font-size:11px}
  /* Hide streak on very small phones — keep coins */
  .topbar-badge:nth-child(2){display:none}

  /* Pages */
  .page,.page-wide{padding:11px}
  .card{border-radius:12px;padding:13px;margin-bottom:10px}

  /* Hero */
  .hero-banner{border-radius:12px;padding:15px}
  .hero-greeting{font-size:16px}
  .hero-stats{gap:6px}
  .hero-stat-num{font-size:16px}
  .hero-stat{padding:7px 4px}

  /* Grids */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .subject-grid{grid-template-columns:repeat(3,1fr);gap:7px}
  .subject-item{padding:9px 4px}
  .subject-icon{font-size:22px}
  .subject-name{font-size:10px}

  /* Auth */
  .auth-card{padding:18px;border-radius:14px}
  .auth-page{padding:16px max(14px,var(--sal))}

  /* Admin on mobile */
  .admin-sidebar{transform:translateX(-100%);padding-top:var(--sat)}
  .admin-sidebar.mobile-open{transform:translateX(0)}
  .admin-main{margin-left:0;padding:12px}
  .stat-cards{grid-template-columns:repeat(2,1fr)}
  .admin-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Modal bottom sheet */
  .modal-sheet{border-radius:18px 18px 0 0;padding:18px max(16px,var(--sal));padding-bottom:max(18px,var(--sab))}

  /* Exam */
  .exam-content{padding:12px max(12px,var(--sal)) 100px}
  .exam-header{padding:8px max(13px,var(--sal));padding-top:calc(8px + var(--sat))}
  .exam-footer{padding:7px max(12px,var(--sal));padding-bottom:max(7px,var(--sab))}

  /* Buttons */
  .btn{font-size:14px;padding:10px 16px}

  /* Section */
  .section-title{font-size:15px}
}

/* ── Very small phones ≤ 360px ─────────────────────────────── */
@media(max-width:360px){
  .hero-stat-num{font-size:14px}
  .hero-stat-lbl{font-size:8px}
  .page,.page-wide{padding:8px}
  .app-logo-text{font-size:14px}
  .more-fab{width:36px;height:36px;font-size:17px}
}

/* ── iOS standalone PWA mode ───────────────────────────────── */
@media(display-mode:standalone){
  .app-topbar{height:calc(var(--th) + var(--sat));padding-top:var(--sat)}
  .bottom-nav{padding-bottom:var(--sab)}
}

/* ── Landscape mobile ──────────────────────────────────────── */
@media(max-width:767px)and(orientation:landscape){
  .app-topbar{padding-top:max(var(--sat),4px);padding-bottom:4px}
  .hero-banner{padding:11px}
  .app-content{padding-bottom:calc(52px + var(--sab) + 6px)}
  .bottom-nav{min-height:calc(48px + var(--sab))}
  .nav-item{padding:6px 2px 4px}
  .nav-icon{font-size:18px}
}

/* ── Prevent body scroll when drawer open ──────────────────── */
body.drawer-open{overflow:hidden}