/* ═══════════════════════════════════════════════
   NEXTxMOCK — Main Stylesheet
   © EduStream. All rights reserved.
═══════════════════════════════════════════════ */

/* ── DESIGN TOKENS & RESPONSIVE BREAKPOINTS ── */
:root {
  /* Colors */
  --navy:#07112A; --navy2:#0D1C3A; --navy3:#162845; --navy4:#1E3356;
  --blue:#2563EB; --blue-h:#1D4ED8; --blue-l:#EFF6FF; --blue-m:#BFDBFE;
  --green:#16A34A; --green-h:#15803D; --green-l:#DCFCE7; --green-m:#BBF7D0;
  --orange:#EA580C; --orange-h:#C44A18; --orange-l:#FFF7ED; --orange-m:#FED7AA;
  --red:#DC2626; --red-h:#B91C1C; --red-l:#FEE2E2; --red-m:#FECACA;
  --amber:#D97706; --amber-l:#FFFBEB; --amber-m:#FDE68A;
  --teal:#0D9488; --teal-l:#CCFBF1;
  --g1:#F9FAFB; --g2:#F3F4F6; --g3:#E5E7EB; --g4:#D1D5DB;
  --g5:#9CA3AF; --g6:#6B7280; --g7:#4B5563; --g8:#374151;
  --text:#111827; --text2:#374151; --pal-bg:#EAF1FB;
  
  /* Spacing & Border Radius */
  --r:10px; --rl:16px; --rxl:24px;
  
  /* Shadows */
  --sh:0 1px 3px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.04);
  --sh-md:0 4px 20px rgba(0,0,0,.1);
  --sh-lg:0 16px 48px rgba(0,0,0,.16);
  
  /* Borders */
  --bd:1px solid var(--g3);
  
  /* Animations */
  --ease:cubic-bezier(.4,0,.2,1);
  
  /* Responsive Breakpoints (Mobile-First Approach) */
  --bp-xs: 0px;     /* Mobile phones */
  --bp-sm: 420px;   /* Small phones */
  --bp-md: 640px;   /* Tablets */
  --bp-lg: 900px;   /* Large tablets & small desktops */
  --bp-xl: 1200px;  /* Desktops */
  --bp-2xl: 1536px; /* Large desktops */
  
  /* Adaptive spacing for different devices */
  --spacing-mobile: 16px;
  --spacing-tablet: 20px;
  --spacing-desktop: 24px;
  
  /* Adaptive font sizes for different devices */
  --font-size-mobile: 14px;
  --font-size-tablet: 15px;
  --font-size-desktop: 15px;
  
  /* Touch targets for mobile (min 44x44px) */
  --touch-target: 44px;
  --touch-target-sm: 36px;
}

/* ── BASE ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; scroll-behavior:smooth; }
body {
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--g2); color:var(--text);
  min-height:100%; font-size:15px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
button { font-family:inherit; cursor:pointer; background:none; border:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

/* ── ANIMATIONS ── */
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes slideUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideRight{ from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
@keyframes popIn     { 0%{opacity:0;transform:scale(.9)} 70%{transform:scale(1.02)} 100%{opacity:1;transform:scale(1)} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes dotBounce { 0%,80%,100%{transform:scale(.55);opacity:.3} 40%{transform:scale(1);opacity:1} }
@keyframes progress  { 0%{width:5%;margin-left:0} 50%{width:65%;margin-left:10%} 100%{width:5%;margin-left:92%} }
@keyframes barGrow   { from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes evalPulse { 0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.4)} 70%{box-shadow:0 0 0 8px rgba(37,99,235,0)} }
@keyframes slideInR  { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideOutR { from{transform:translateX(0);opacity:1} to{transform:translateX(110%);opacity:0} }
.anim-fade { animation:fadeIn .22s ease; }
.anim-up   { animation:slideUp .22s var(--ease); }

/* ── HEADER ── */
.hdr {
  background:var(--navy); height:58px;
  display:flex; align-items:center; padding:0 20px; gap:14px;
  position:sticky; top:0; z-index:300;
  border-bottom:2px solid var(--navy3); flex-shrink:0; user-select:none;
}
.hdr-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-logo {
  background:var(--blue); font-family:'Sora',sans-serif;
  font-size:13px; font-weight:800; padding:5px 12px;
  border-radius:30px; color:#fff; letter-spacing:-.2px; line-height:1.3;
}
.brand-logo em { font-style:normal; opacity:.7; }
.brand-sub { font-size:11.5px; color:#64748B; font-weight:500; }
.hdr-mid { flex:1; display:flex; align-items:center; justify-content:center; gap:14px; min-width:0; }
.hdr-test-name { font-size:13px; font-weight:500; color:#CBD5E1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.hdr-pill { background:var(--navy3); border:1px solid rgba(255,255,255,.07); border-radius:30px; padding:4px 12px; font-size:12px; font-weight:500; color:#94A3B8; }
.timer-wrap { display:flex; align-items:center; gap:7px; background:var(--navy3); border:1px solid rgba(255,255,255,.07); border-radius:30px; padding:5px 14px; }
.t-lbl { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#64748B; }
.t-val { font-family:'JetBrains Mono',monospace; font-size:19px; font-weight:700; color:#FCD34D; letter-spacing:1px; }
.t-val.warn { color:#F87171; animation:pulse .9s infinite; }
.hdr-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.hdr-btn { background:var(--navy3); border:1px solid rgba(255,255,255,.07); border-radius:30px; padding:5px 13px; font-size:12px; font-weight:500; color:#CBD5E1; transition:.15s var(--ease); }
.hdr-btn:hover { background:var(--navy4); color:#fff; }
.hdr-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.mob-pal-btn { display:none; align-items:center; gap:5px; background:var(--navy3); border-radius:30px; padding:5px 12px; font-size:12px; color:#CBD5E1; }
.mob-pal-btn .mbdot { width:7px; height:7px; border-radius:50%; background:var(--green); }
.eval-badge { display:inline-flex; align-items:center; gap:6px; background:var(--navy3); border:1px solid rgba(37,99,235,.4); border-radius:30px; padding:5px 12px; font-size:11.5px; color:#93C5FD; animation:evalPulse 2s ease infinite; cursor:pointer; }
.eb-spin { width:10px; height:10px; border:2px solid rgba(147,197,253,.3); border-top-color:#93C5FD; border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }

/* ── GLOBAL BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; border:1.5px solid var(--g3); border-radius:30px; padding:8px 18px; color:var(--text2); background:#fff; transition:.12s var(--ease); white-space:nowrap; font-family:inherit; }
.btn:hover { background:var(--g2); border-color:var(--g4); }
.btn:active { transform:scale(.97); }
.btn-blue { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn-blue:hover { background:var(--blue-h); }
.btn-green { background:var(--green); border-color:var(--green); color:#fff; }
.btn-green:hover { background:var(--green-h); }
.btn-navy { background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600; }
.btn-navy:hover { background:var(--navy2); }
.btn-ghost-red { background:transparent; border-color:transparent; color:var(--red); }
.btn-ghost-red:hover { background:var(--red-l); border-color:var(--red-m); }
.btn-sm { padding:6px 13px; font-size:12.5px; }
.btn-xs { padding:4px 10px; font-size:12px; border-radius:6px; }

/* ── TEST LAYOUT ── */
.test-layout { display:flex; height:calc(100vh - 58px); overflow:hidden; }
.q-side { flex:1; display:flex; flex-direction:column; background:#fff; overflow:hidden; min-width:0; border-right:var(--bd); }
.section-bar { background:var(--g1); border-bottom:var(--bd); padding:9px 24px; display:flex; align-items:center; gap:12px; flex-shrink:0; }
.sec-name { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--g7); }
.sec-divider { flex:1; height:1px; background:var(--g3); }
.sec-progress { font-size:12px; color:var(--g5); font-weight:500; }
.marks-chip { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:6px; }
.mk-pos { background:var(--green-l); color:var(--green); border:1px solid var(--green-m); }
.mk-neg { background:var(--red-l); color:var(--red); border:1px solid var(--red-m); }
.q-scroll { flex:1; overflow-y:auto; padding:22px 26px 12px; -webkit-overflow-scrolling:touch; }
.q-scroll::-webkit-scrollbar { width:4px; }
.q-scroll::-webkit-scrollbar-thumb { background:var(--g3); border-radius:4px; }
.q-block { display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; animation:slideRight .2s var(--ease); }
.q-num-badge { background:var(--orange); color:#fff; font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:4px; box-shadow:0 4px 10px rgba(234,88,12,.3); transition:.2s var(--ease); }
.q-num-badge.ans { background:var(--green); box-shadow:0 4px 10px rgba(22,163,74,.3); }
.q-text { font-size:16px; line-height:1.72; color:var(--text); flex:1; padding-top:4px; }
.q-text table { border-collapse:collapse; font-size:14px; margin:10px 0; }
.q-text td, .q-text th { border:var(--bd); padding:7px 11px; }
.q-text th { background:var(--g1); font-weight:600; }
.opts { margin-left:54px; display:flex; flex-direction:column; gap:8px; animation:slideUp .18s var(--ease); }
.opt { display:flex; align-items:flex-start; gap:12px; padding:12px 15px; border-radius:var(--r); border:1.5px solid var(--g3); background:var(--g1); cursor:pointer; transition:.12s var(--ease); }
.opt:hover { border-color:var(--blue-m); background:var(--blue-l); }
.opt:active { transform:scale(.985); }
.opt.sel { border-color:var(--blue); background:var(--blue-l); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.radio-ring { width:20px; height:20px; border-radius:50%; border:2px solid var(--g4); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:3px; background:#fff; transition:.12s; }
.opt:hover .radio-ring { border-color:var(--blue); }
.opt.sel .radio-ring { border-color:var(--blue); background:var(--blue); }
.radio-dot { width:8px; height:8px; border-radius:50%; background:#fff; opacity:0; transition:opacity .12s; }
.opt.sel .radio-dot { opacity:1; }
.opt-k { font-size:13px; font-weight:700; color:var(--g5); min-width:17px; flex-shrink:0; padding-top:1px; transition:.12s; }
.opt.sel .opt-k { color:var(--blue); }
.opt-t { font-size:14.5px; line-height:1.55; color:var(--text); flex:1; }
.bk-btn { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--g5); border-radius:6px; padding:5px 10px; transition:.12s var(--ease); }
.bk-btn:hover { color:var(--amber); background:var(--amber-l); }
.bk-btn.active { color:var(--amber); }
.q-footer { background:var(--g1); border-top:var(--bd); padding:11px 24px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-shrink:0; flex-wrap:wrap; }
.q-footer-l { display:flex; gap:8px; align-items:center; }
.q-footer-r { display:flex; gap:8px; }
.q-footer-c { display:flex; gap:8px; }

/* ── PALETTE ── */
.pal-col { width:285px; flex-shrink:0; background:var(--pal-bg); border-left:1px solid #C3D4EC; display:flex; flex-direction:column; overflow:hidden; }
.pal-hd { background:var(--navy); padding:13px 16px 11px; border-bottom:2px solid var(--blue); flex-shrink:0; }
.pal-hd-row { display:flex; justify-content:space-between; align-items:center; }
.pal-title { font-size:11.5px; font-weight:700; text-transform:uppercase; color:#fff; letter-spacing:.6px; }
.pal-answered { font-size:11px; color:#64748B; }
.pal-stats { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }
.pstat { border-radius:8px; padding:8px 10px; display:flex; align-items:center; gap:8px; }
.pstat .ps-n { font-size:17px; font-weight:700; line-height:1; }
.pstat .ps-l { font-size:10px; color:var(--g6); margin-top:2px; }
.pstat .psdot { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.ps-g { background:var(--green-l); } .ps-g .psdot { background:var(--green); } .ps-g .ps-n { color:var(--green); }
.ps-r { background:var(--red-l);   } .ps-r .psdot { background:var(--red);   } .ps-r .ps-n { color:var(--red);   }
.ps-a { background:var(--g2);      } .ps-a .psdot { background:var(--g4);    } .ps-a .ps-n { color:var(--g7);   }
.ps-b { background:var(--blue-l);  } .ps-b .psdot { background:var(--blue);  } .ps-b .ps-n { color:var(--blue); }
.pal-body { flex:1; overflow-y:auto; padding:13px 13px 4px; }
.pal-body::-webkit-scrollbar { width:4px; }
.pal-body::-webkit-scrollbar-thumb { background:#B8CCE6; border-radius:4px; }
.pal-sec-lbl { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--g5); margin-bottom:9px; }
.pal-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.qb { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; font-family:'JetBrains Mono',monospace; border-radius:7px; cursor:pointer; background:var(--g8); color:#fff; transition:transform .1s,background .1s; position:relative; user-select:none; }
.qb:hover { transform:scale(1.1); }
.qb:active { transform:scale(.9); }
.qb.qs-ans { background:var(--green); }
.qb.qs-vis { background:var(--orange); }
.qb.qs-bk::after { content:''; position:absolute; top:2px; right:2px; width:5px; height:5px; border-radius:50%; background:var(--amber); }
.qb.qs-cur { background:var(--blue); box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px var(--blue); }
.pal-legend { display:flex; flex-wrap:wrap; gap:7px 12px; padding:10px 13px 12px; border-top:1px solid #C3D4EC; }
.li { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--g7); font-weight:500; }
.ld { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.ld-nv { background:var(--g8); } .ld-vis { background:var(--orange); } .ld-ans { background:var(--green); } .ld-cur { background:var(--blue); } .ld-bk { background:var(--amber); }
.pal-actions { padding:10px 13px 14px; border-top:1px solid #C3D4EC; display:flex; flex-direction:column; gap:8px; }
.pal-action-btn { width:100%; padding:10px; border:none; border-radius:var(--r); font-size:13.5px; font-weight:700; cursor:pointer; transition:.14s var(--ease); }
.pal-pause  { background:var(--orange); color:#fff; box-shadow:0 3px 10px rgba(234,88,12,.25); }
.pal-pause:hover  { background:var(--orange-h); }
.pal-finish { background:var(--green); color:#fff; box-shadow:0 3px 10px rgba(22,163,74,.25); }
.pal-finish:hover { background:var(--green-h); }

/* ── INSTRUCTIONS ── */
.page-wrap { display:flex; flex-direction:column; min-height:100vh; }
.page-body { flex:1; display:flex; align-items:flex-start; justify-content:center; padding:32px 16px 56px; background:var(--g2); }
.inst-card { background:#fff; border:var(--bd); border-radius:var(--rxl); box-shadow:var(--sh-lg); max-width:760px; width:100%; overflow:hidden; animation:slideUp .28s var(--ease); }
.inst-hero { background:var(--navy); padding:28px 32px 24px; border-bottom:3px solid var(--blue); position:relative; overflow:hidden; }
.inst-hero::before { content:''; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%; background:rgba(37,99,235,.08); pointer-events:none; }
.inst-hero h2 { font-family:'Sora',sans-serif; font-size:22px; color:#fff; font-weight:800; margin-bottom:6px; position:relative; }
.inst-hero p { font-size:13px; color:#64748B; position:relative; }
.inst-chips { display:flex; gap:9px; padding:16px 32px; border-bottom:var(--bd); flex-wrap:wrap; }
.ic { display:flex; align-items:center; gap:7px; background:var(--g1); border:var(--bd); border-radius:9px; padding:7px 14px; }
.ic em { font-style:normal; font-size:11.5px; color:var(--g5); }
.ic strong { font-size:13px; font-weight:700; }
.inst-content { padding:24px 32px; }
.inst-content h3 { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--g5); margin-bottom:12px; }
.inst-html { font-size:14px; line-height:1.72; color:var(--text2); padding:15px 18px; background:#FEFCE8; border-left:4px solid #FCD34D; border-radius:0 var(--r) var(--r) 0; max-height:280px; overflow-y:auto; margin-bottom:16px; }
.inst-note { background:var(--blue-l); border:1px solid var(--blue-m); border-radius:var(--r); padding:12px 16px; font-size:13px; color:var(--blue-h); }
.inst-foot { padding:18px 32px 26px; display:flex; align-items:center; justify-content:space-between; border-top:var(--bd); flex-wrap:wrap; gap:12px; }
.inst-foot-note { font-size:12px; color:var(--g5); }
.btn-start { background:var(--green); border:none; border-radius:30px; color:#fff; font-size:15px; font-weight:700; padding:12px 32px; box-shadow:0 4px 14px rgba(22,163,74,.3); transition:.15s var(--ease); font-family:inherit; }
.btn-start:hover { background:var(--green-h); transform:translateY(-1px); }
.btn-start:active { transform:scale(.98); }
.warning-card { background:var(--red-l); border:1px solid var(--red-m); border-radius:var(--rxl); padding:32px 30px; text-align:center; max-width:540px; margin:40px auto; animation:slideUp .28s var(--ease); }
.warning-card h3 { color:var(--red); font-size:20px; font-weight:700; margin-bottom:10px; }
.warning-card p { color:#7F1D1D; margin-bottom:16px; font-size:14px; line-height:1.6; }

/* ── LOADING ── */
.pg-load { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 20px; gap:18px; min-height:55vh; animation:fadeIn .3s ease; }
.spin-ring { width:50px; height:50px; border:3px solid var(--g3); border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; }
.spin-txt { font-size:14px; color:var(--g5); font-weight:500; text-align:center; }
.spin-dots { display:flex; gap:5px; }
.spin-dots span { width:7px; height:7px; border-radius:50%; background:var(--blue); animation:dotBounce .8s ease infinite; }
.spin-dots span:nth-child(2) { animation-delay:.15s; }
.spin-dots span:nth-child(3) { animation-delay:.3s; }
.ovl { position:fixed; inset:0; background:rgba(7,17,42,.82); backdrop-filter:blur(7px); display:flex; align-items:center; justify-content:center; z-index:900; animation:fadeIn .2s ease; }
.ovl-card { background:#fff; border-radius:var(--rl); padding:40px 44px; text-align:center; max-width:400px; width:90%; box-shadow:var(--sh-lg); display:flex; flex-direction:column; align-items:center; gap:16px; animation:popIn .3s var(--ease); }
.ovl-card h4 { font-size:17px; font-weight:700; }
.ovl-card p { font-size:13px; color:var(--g5); line-height:1.55; max-width:300px; }
.prog-bar { width:100%; height:4px; background:var(--g3); border-radius:4px; overflow:hidden; }
.prog-inner { height:100%; background:var(--blue); border-radius:4px; animation:progress 2.2s ease-in-out infinite; }

/* ── TOAST ── */
.toast { position:fixed; bottom:24px; right:24px; z-index:1000; background:#fff; border:var(--bd); border-radius:var(--rl); padding:14px 18px; max-width:340px; box-shadow:var(--sh-lg); display:flex; align-items:flex-start; gap:12px; animation:slideInR .3s var(--ease); cursor:pointer; }
.toast.dismiss { animation:slideOutR .3s var(--ease) forwards; }
.toast-icon { font-size:22px; flex-shrink:0; margin-top:1px; }
.toast-body { flex:1; min-width:0; }
.toast-title { font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:3px; }
.toast-msg { font-size:12.5px; color:var(--g5); line-height:1.4; }
.toast-close { font-size:16px; color:var(--g5); flex-shrink:0; padding:0 2px; }
.toast-close:hover { color:var(--text); }
.toast.t-success { border-left:4px solid var(--green); }
.toast.t-info    { border-left:4px solid var(--blue); }
.toast.t-warn    { border-left:4px solid var(--amber); }
.toast.t-error   { border-left:4px solid var(--red); }

/* ── MODALS ── */
.moverlay { position:fixed; inset:0; background:rgba(7,17,42,.75); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; z-index:800; padding:16px; animation:fadeIn .18s ease; }
.modal { background:#fff; border-radius:var(--rxl); max-width:590px; width:100%; max-height:88vh; overflow-y:auto; border:var(--bd); box-shadow:var(--sh-lg); animation:slideUp .22s var(--ease); }
.modal::-webkit-scrollbar { width:4px; }
.modal::-webkit-scrollbar-thumb { background:var(--g3); }
.modal-hd { padding:22px 26px 16px; border-bottom:var(--bd); }
.modal-hd h3 { font-family:'Sora',sans-serif; font-size:18px; font-weight:800; margin-bottom:3px; }
.modal-hd p { font-size:13px; color:var(--g5); }
.modal-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px 26px; border-bottom:var(--bd); }
.mst { background:var(--g1); border-radius:var(--r); padding:14px; text-align:center; }
.mst .mn { font-size:28px; font-weight:700; font-family:'JetBrains Mono',monospace; line-height:1; }
.mst .ml { font-size:11px; color:var(--g5); margin-top:5px; }
.mn-g{color:var(--green);} .mn-r{color:var(--red);} .mn-b{color:var(--blue);} .mn-y{color:var(--g7);}
.modal-list { padding:12px 26px; max-height:260px; overflow-y:auto; }
.modal-list::-webkit-scrollbar { width:4px; }
.modal-list::-webkit-scrollbar-thumb { background:var(--g3); }
.ml-row { display:flex; gap:10px; padding:8px 0; border-bottom:var(--bd); font-size:13px; }
.ml-row:last-child { border-bottom:none; }
.ml-qn { font-weight:700; color:var(--g5); min-width:28px; flex-shrink:0; }
.ml-qt { flex:1; color:var(--text2); line-height:1.4; }
.ml-a { font-weight:700; min-width:44px; text-align:right; }
.ml-a.y{color:var(--green);} .ml-a.n{color:var(--g4);}
.modal-ft { padding:14px 26px; display:flex; gap:8px; justify-content:flex-end; border-top:var(--bd); flex-wrap:wrap; }

/* ── PAUSE ── */
.pause-ovl { position:fixed; inset:0; background:rgba(7,17,42,.92); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; z-index:700; animation:fadeIn .2s ease; }
.pause-card { background:#fff; border-radius:var(--rxl); padding:52px 56px; text-align:center; max-width:400px; width:90%; box-shadow:var(--sh-lg); animation:popIn .3s var(--ease); }
.pause-card .p-icon { font-size:56px; margin-bottom:18px; }
.pause-card h3 { font-family:'Sora',sans-serif; font-size:24px; font-weight:800; margin-bottom:8px; }
.pause-card p { font-size:14px; color:var(--g5); margin-bottom:28px; line-height:1.5; }

/* ── FULL-SCREEN REVIEW ── */
.review-overlay { position:fixed; inset:0; z-index:900; background:var(--g2); display:flex; flex-direction:column; overflow:hidden; animation:fadeIn .2s ease; }
.rv-hdr { background:var(--navy); height:58px; display:flex; align-items:center; padding:0 24px; gap:14px; border-bottom:2px solid var(--blue); flex-shrink:0; }
.rv-hdr-l { flex:1; min-width:0; }
.rv-hdr-l h2 { font-family:'Sora',sans-serif; font-size:16px; color:#fff; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rv-hdr-l p { font-size:11.5px; color:#64748B; }
.rv-hdr-r { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.rv-summary { background:#fff; border-bottom:var(--bd); padding:12px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.rv-score-wrap { display:flex; align-items:baseline; gap:6px; }
.rv-score-big { font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:700; color:var(--blue); line-height:1; }
.rv-score-sub { font-size:12px; color:var(--g5); }
.rv-sep { width:1px; height:28px; background:var(--g3); flex-shrink:0; }
.rv-stat { display:flex; align-items:center; gap:7px; }
.rv-stat-dot { width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.rv-stat-val { font-size:16px; font-weight:700; font-family:'JetBrains Mono',monospace; }
.rv-stat-lbl { font-size:11.5px; color:var(--g5); }
.rv-charts { background:#fff; border-bottom:var(--bd); padding:18px 24px; display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center; flex-shrink:0; }
.rv-charts.hidden { display:none; }
.rv-body { flex:1; overflow-y:auto; padding:20px 24px; -webkit-overflow-scrolling:touch; }
.rv-body::-webkit-scrollbar { width:6px; }
.rv-body::-webkit-scrollbar-thumb { background:var(--g4); border-radius:4px; }
.rv-q-card { background:#fff; border-radius:var(--rl); border:var(--bd); box-shadow:var(--sh); overflow:hidden; animation:slideUp .2s var(--ease); }
.rv-q-banner { padding:11px 22px; display:flex; align-items:center; gap:12px; font-size:13px; font-weight:600; }
.rv-q-banner.ok   { background:var(--green-l); color:var(--green-h); border-bottom:2px solid var(--green-m); }
.rv-q-banner.bad  { background:var(--red-l);   color:var(--red-h);   border-bottom:2px solid var(--red-m); }
.rv-q-banner.skip { background:var(--g1);       color:var(--g6);     border-bottom:1px solid var(--g3); }
.rv-q-banner .rv-marks-b { margin-left:auto; padding:3px 10px; border-radius:6px; font-size:12px; }
.rv-q-banner.ok   .rv-marks-b { background:var(--green); color:#fff; }
.rv-q-banner.bad  .rv-marks-b { background:var(--red);   color:#fff; }
.rv-q-banner.skip .rv-marks-b { background:var(--g3);   color:var(--g6); }
.rv-q-text-area { padding:20px 24px 14px; border-bottom:var(--bd); }
.rv-q-num { font-size:12px; font-weight:700; color:var(--g5); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.tspent { font-size:11px; color:var(--g5); background:var(--g1); border:var(--bd); border-radius:5px; padding:2px 7px; margin-left:auto; }
.rv-q-text { font-size:15.5px; line-height:1.72; color:var(--text); }
.rv-opts { padding:14px 24px 16px; display:flex; flex-direction:column; gap:8px; border-bottom:var(--bd); }
.rv-opt { display:flex; align-items:flex-start; gap:12px; padding:11px 14px; border-radius:var(--r); border:1.5px solid var(--g3); background:var(--g1); }
.rv-opt.is-correct { border-color:var(--green); background:var(--green-l); }
.rv-opt.is-wrong   { border-color:var(--red);   background:var(--red-l); }
.rv-opt.unchosen   { opacity:.6; }
.rv-opt-indicator { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; background:var(--g3); color:var(--g6); }
.rv-opt.is-correct .rv-opt-indicator { background:var(--green); color:#fff; }
.rv-opt.is-wrong   .rv-opt-indicator { background:var(--red);   color:#fff; }
.rv-opt-key { font-size:13px; font-weight:700; color:var(--g5); min-width:17px; flex-shrink:0; padding-top:2px; }
.rv-opt.is-correct .rv-opt-key { color:var(--green-h); }
.rv-opt.is-wrong   .rv-opt-key { color:var(--red-h); }
.rv-opt-txt { font-size:14.5px; line-height:1.55; color:var(--text); flex:1; }
.rv-ans-row { display:flex; gap:10px; padding:12px 24px 0; flex-wrap:wrap; }
.rv-ans-chip { display:inline-flex; align-items:center; gap:6px; border-radius:7px; padding:6px 13px; font-size:12.5px; font-weight:600; }
.rv-ans-chip.user-ans    { background:var(--blue-l);  color:var(--blue-h);  border:1px solid var(--blue-m); }
.rv-ans-chip.correct-ans { background:var(--green-l); color:var(--green-h); border:1px solid var(--green-m); }
.rv-exp { padding:14px 24px 20px; }
.rv-exp-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--g5); margin-bottom:9px; display:flex; align-items:center; gap:8px; }
.rv-exp-label::after { content:''; flex:1; height:1px; background:var(--g3); }
.rv-exp-txt { font-size:13.5px; line-height:1.68; color:var(--text2); background:var(--g1); border-radius:var(--r); padding:13px 15px; border-left:3px solid var(--blue-m); }
.rv-pagination { background:#fff; border-top:var(--bd); padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; box-shadow:0 -2px 8px rgba(0,0,0,.04); }
.rv-pag-info { font-size:13px; color:var(--g5); font-weight:500; white-space:nowrap; }
.rv-pag-nums { display:flex; gap:5px; flex-wrap:wrap; justify-content:center; flex:1; padding:0 10px; }
.rv-pag-btns { display:flex; gap:7px; flex-shrink:0; }
.pnum { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:12.5px; font-weight:700; border:1.5px solid var(--g3); background:#fff; color:var(--text2); cursor:pointer; transition:.12s var(--ease); font-family:'JetBrains Mono',monospace; flex-shrink:0; }
.pnum:hover { background:var(--blue-l); border-color:var(--blue-m); color:var(--blue); }
.pnum.on  { background:var(--blue); border-color:var(--blue); color:#fff; }
.pnum.ok  { border-color:var(--green-m); color:var(--green); }
.pnum.bad { border-color:var(--red-m);   color:var(--red); }
.pnum.skip { color:var(--g5); }
.pnum.on.ok, .pnum.on.bad, .pnum.on.skip { background:var(--blue); border-color:var(--blue); color:#fff; }

/* ── DASHBOARD ── */
.db-page { overflow-y:auto; height:calc(100vh - 58px); }
.db-page::-webkit-scrollbar { width:6px; }
.db-page::-webkit-scrollbar-thumb { background:var(--g4); border-radius:4px; }
.db-wrap { max-width:1100px; margin:0 auto; padding:28px 24px 64px; }
.db-hero { background:var(--navy); border-radius:var(--rxl); padding:30px 34px; margin-bottom:24px; display:flex; align-items:flex-start; justify-content:space-between; gap:22px; flex-wrap:wrap; position:relative; overflow:hidden; }
.db-hero::before { content:''; position:absolute; right:-70px; top:-70px; width:260px; height:260px; border-radius:50%; background:rgba(37,99,235,.07); pointer-events:none; }
.db-hero-l { position:relative; }
.db-hero-l h2 { font-family:'Sora',sans-serif; font-size:23px; font-weight:800; color:#fff; margin-bottom:5px; }
.db-hero-l p { font-size:13px; color:#64748B; margin-bottom:16px; }
.mini-chart { height:44px; display:flex; align-items:flex-end; gap:3px; }
.mini-bar { flex:1; border-radius:3px 3px 0 0; min-height:4px; transform-origin:bottom; animation:barGrow .5s var(--ease) forwards; }
.db-hero-stats { display:flex; gap:10px; flex-wrap:wrap; position:relative; }
.hstat { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:14px 20px; min-width:90px; }
.hstat .hn { font-family:'JetBrains Mono',monospace; font-size:23px; font-weight:700; color:#fff; line-height:1; }
.hstat .hl { font-size:11px; color:#64748B; margin-top:4px; }
.db-section-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; }
.db-section-row h3 { font-size:15px; font-weight:700; }
.db-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-bottom:24px; }
.db-card { background:#fff; border-radius:var(--rl); border:var(--bd); box-shadow:var(--sh); padding:18px 20px; transition:.15s var(--ease); }
.db-card:hover { box-shadow:var(--sh-md); transform:translateY(-2px); }
.dc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dc-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--g5); }
.dc-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.dc-val { font-size:30px; font-weight:700; font-family:'JetBrains Mono',monospace; line-height:1; }
.dc-sub { font-size:12px; color:var(--g5); margin-top:5px; }
.dc-bar { height:3px; border-radius:3px; background:var(--g3); margin-top:11px; overflow:hidden; }
.dc-fill { height:100%; border-radius:3px; transition:width .8s var(--ease); }
.table-card { background:#fff; border-radius:var(--rl); border:var(--bd); box-shadow:var(--sh); overflow:hidden; margin-bottom:24px; }
.db-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.db-table thead tr { background:var(--g1); }
.db-table th { padding:11px 16px; text-align:left; font-weight:700; color:var(--text2); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; border-bottom:var(--bd); }
.db-table td { padding:12px 16px; border-bottom:var(--bd); color:var(--text2); vertical-align:middle; }
.db-table tbody tr:last-child td { border-bottom:none; }
.db-table tbody tr { transition:background .1s; }
.db-table tbody tr:hover td { background:var(--g1); }
.sp { display:inline-flex; align-items:center; border-radius:30px; padding:4px 11px; font-size:12px; font-weight:700; }
.sp-g { background:var(--green-l); color:var(--green); }
.sp-o { background:var(--orange-l); color:var(--orange); }
.sp-r { background:var(--red-l); color:var(--red); }
.sp-pending { background:var(--blue-l); color:var(--blue); display:inline-flex; align-items:center; gap:5px; }
.db-pag { display:flex; justify-content:center; gap:6px; padding:14px; }
.dpb { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:13px; font-weight:600; border:var(--bd); background:#fff; cursor:pointer; color:var(--text2); transition:.12s; }
.dpb:hover { background:var(--blue-l); border-color:var(--blue-m); }
.dpb.on { background:var(--blue); border-color:var(--blue); color:#fff; }
.eval-row td { background:#F0F4FF !important; }
.empty-state { text-align:center; padding:64px 20px; }
.empty-state .es-icon { font-size:48px; margin-bottom:16px; }
.empty-state h4 { font-size:16px; font-weight:700; margin-bottom:6px; }
.empty-state p { font-size:13px; color:var(--g5); }

/* ── RESPONSIVE UTILITIES ── */
/* Hide/Show utilities for different breakpoints */
.hide-mobile { display:none !important; }
.hide-tablet { display:block !important; }
.hide-desktop { display:block !important; }
.show-mobile { display:block !important; }
.show-tablet { display:none !important; }
.show-desktop { display:none !important; }

/* Flex responsive utilities */
.flex-mobile { display:flex; }
.flex-col-mobile { flex-direction:column; }
.flex-wrap-mobile { flex-wrap:wrap; }

/* Responsive text alignment */
.text-center-mobile { text-align:center; }

/* Touch-friendly targets */
.btn, .opt, .qb, .hdr-btn, .btn-start { min-height:var(--touch-target-sm); }

/* Adaptive spacing */
.adaptive-padding { padding:var(--spacing-mobile); }
.adaptive-gap { gap:var(--spacing-mobile); }

/* Responsive grid utilities */
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:var(--spacing-mobile); }

/* ── RESPONSIVE BREAKPOINTS ── */

/* ┌─ Tablet & Below (max 900px) - Touch-Optimized ─┐ */
@media (max-width:900px) {
  :root {
    --spacing-mobile: 16px;
    --spacing-tablet: 18px;
    --font-size-mobile: 14px;
  }
  
  /* Layout adjustments */
  .test-layout { position:relative; height:auto; }
  .pal-col { position:fixed; top:58px; right:0; bottom:0; width:83%; max-width:315px; transform:translateX(100%); transition:transform .28s var(--ease); z-index:400; border-left:none; box-shadow:-4px 0 24px rgba(0,0,0,.22); }
  .pal-col.open { transform:translateX(0); }
  .mob-pal-btn { display:flex; }
  .q-side { width:100%; overflow:visible; }
  .q-scroll { overflow:visible; height:auto; padding:14px 16px 8px; }
  .opts { margin-left:0; }
  .section-bar { padding:8px 16px; }
  .q-footer { padding:10px 16px; flex-wrap:wrap; }
  .q-footer-c { width:100%; order:-1; }
  .q-footer-c .btn-navy { width:100%; justify-content:center; }
  .rv-charts { grid-template-columns:1fr; }
  .db-wrap { padding:16px 14px 44px; }
  .db-hero { padding:20px 18px; }
  .db-cards { grid-template-columns:1fr 1fr; }
  
  /* Responsive utilities activation */
  .hide-tablet { display:none !important; }
  .show-tablet { display:block !important; }
  
  /* Adaptive text for tablets */
  body { font-size:var(--font-size-mobile); }
}

/* ┌─ Small Devices (max 640px) - Mobile Optimized ─┐ */
@media (max-width:640px) {
  :root {
    --spacing-mobile: 14px;
    --font-size-mobile: 13px;
  }
  
  /* Header adjustments */
  .hdr { padding:0 14px; gap:8px; }
  .brand-sub { display:none; }
  .hdr-pill { display:none; }
  .hdr-test-name { display:none; }
  
  /* Modal responsive */
  .modal { max-width:95vw; max-height:90vh; border-radius:var(--r); }
  .modal-stats { grid-template-columns:1fr 1fr; }
  .modal-hd { padding:16px 18px 12px; }
  
  /* Instructions page */
  .inst-hero { padding:22px 18px; }
  .inst-hero h2 { font-size:18px; }
  .inst-chips { padding:12px 18px; flex-wrap:wrap; }
  .inst-content { padding:18px; }
  .inst-foot { padding:14px 18px 22px; flex-direction:column; }
  
  /* Review mode - Native mobile feel */
  .review-overlay { top:0; bottom:0; left:0; right:0; z-index:999; }
  .rv-hdr { 
    padding:0 12px; 
    gap:6px; 
    height:56px;
    border-bottom:2px solid var(--g3);
  }
  .rv-hdr-l { flex:1; min-width:0; }
  .rv-hdr-l h2 { font-size:14px; line-height:1.3; }
  .rv-hdr-l p { display:none; }
  .rv-hdr-r { gap:6px; }
  .rv-hdr-r .btn { font-size:12px; padding:6px 10px; min-height:36px; }
  .rv-summary { padding:12px; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--g3); }
  .rv-score-big { font-size:24px; }
  .rv-body { padding:12px; }
  .rv-q-block { margin-bottom:16px; border-radius:10px; border:1px solid var(--g3); background:#fff; padding:12px; }
  .rv-q-text-area { padding:0; margin-bottom:8px; }
  .rv-q-text-area p { font-size:13px; line-height:1.5; }
  .rv-opts { padding:0; }
  .rv-ans-row, .rv-exp { padding:0; margin-top:10px; }
  .rv-q-banner { padding:10px 12px; }
  .rv-pagination { 
    padding:12px; 
    flex-direction:column-reverse;
    gap:10px;
  }
  .rv-pag-info { width:100%; text-align:center; font-size:12px; }
  .rv-pag-nav { width:100%; display:flex; gap:8px; }
  .rv-pag-nav .btn { flex:1; min-height:40px; }
  
  /* Questions - Native feel */
  .q-block { margin-bottom:16px; padding:12px; background:#fff; border-radius:10px; border:1px solid var(--g3); }
  .q-num-badge { width:36px; height:36px; font-size:12px; flex-shrink:0; }
  .q-text { font-size:14px; line-height:1.6; }
  
  /* Options - Touch-friendly */
  .opt { 
    padding:12px; 
    font-size:13px; 
    gap:10px;
    border-radius:8px;
    background:#fff;
    border:1.5px solid var(--g3);
    min-height:44px;
  }
  .opt:active { background:var(--g1); }
  .opts { gap:8px; margin-left:0; }
  
  /* Question footer - Mobile optimized */
  .q-footer { 
    padding:12px;
    gap:8px;
    flex-wrap:wrap;
    border-top:2px solid var(--g3);
    background:#fff;
  }
  .q-footer-l { gap:6px; }
  .q-footer-r { gap:6px; width:100%; }
  .q-footer-r .btn { flex:1; min-height:40px; }
  .q-footer-c { width:100%; }
  .q-footer-c .btn { width:100%; min-height:40px; }
  
  /* Toast positioning */
  .toast { bottom:16px; right:12px; left:12px; max-width:none; width:calc(100% - 24px); }
  
  /* Dashboard */
  .db-wrap { padding:14px 12px 40px; }
  .db-hero { padding:18px 14px; flex-direction:column; }
  .db-hero-l h2 { font-size:20px; }
  .db-cards { grid-template-columns:1fr; }
  .db-section-row { flex-wrap:wrap; }
  
  /* Table responsiveness - Convert to card layout */
  .table-card { border-radius:12px; overflow:visible; }
  .db-table { width:100%; border-collapse:separate; border-spacing:0 10px; font-size:12px; }
  .db-table thead { display:none; }
  .db-table tbody tr { 
    display:grid; 
    grid-template-columns:1fr;
    background:#fff; 
    border-radius:12px;
    border:1px solid var(--g3);
    padding:14px;
    margin-bottom:12px;
    gap:12px;
    box-shadow:var(--sh);
  }
  .db-table tbody tr:hover td { background:transparent; }
  .db-table td { 
    display:grid;
    grid-template-columns:80px 1fr;
    gap:8px;
    border:none;
    padding:0;
    text-align:left;
  }
  .db-table td::before {
    content:attr(data-label);
    font-weight:700;
    font-size:11px;
    text-transform:uppercase;
    color:var(--g5);
    letter-spacing:0.5px;
  }
  .db-table td:first-child::before { content:'Date & Time'; }
  .db-table td:nth-child(2)::before { content:'Test Name'; }
  .db-table td:nth-child(3)::before { content:'Score'; }
  .db-table td:nth-child(4)::before { content:'Time'; }
  .db-table td:nth-child(5) { 
    grid-template-columns:1fr;
    padding-top:8px;
    border-top:1px solid var(--g3);
    margin-top:4px;
  }
  .db-table td:nth-child(5)::before { display:none; }
  
  /* Make review button full-width and prominent on mobile */
  .db-table td:nth-child(5) .btn { width:100%; }
  .db-table .btn-xs { padding:8px 12px; font-size:13px; min-height:40px; }
  
  .db-table tbody tr.eval-row { background:#F0F4FF; }
  
  /* Responsive text utilities */
  .text-center-mobile { text-align:center !important; }
  .hide-mobile { display:none !important; }
  .show-mobile { display:block !important; }
  .show-desktop { display:none !important; }
  
  /* Native app feel - improved spacing */
  body { -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
  body > * { -webkit-user-select:text; user-select:text; }
  
  /* Touch target optimization */
  .btn, .opt, .qb, .hdr-btn, .btn-start, .dpb, .pnum { min-height:var(--touch-target-sm); }
  
  /* Improve header for mobile - native app feel */
  .hdr { border-bottom:1px solid var(--g3); box-shadow:0 1px 3px rgba(0,0,0,.05); }
  
  /* Better navigation accessibility */
  .mob-pal-btn { min-height:44px; }
  
  /* Smooth transitions for mobile */
  .pal-col { transition:transform .3s cubic-bezier(0.4,0,0.2,1); }
  
  /* Improve instructions page on mobile */
  .inst-card { margin:0 auto; }
  .inst-foot .btn { min-height:44px; }
  
  /* Safe area padding for notched phones */
  @supports (padding:max(0px)) {
    .hdr { padding-left:max(0 10px,env(safe-area-inset-left)); padding-right:max(10px,env(safe-area-inset-right)); }
    body > * { margin-bottom:max(0,env(safe-area-inset-bottom)); }
  }
}

/* ┌─ Extra Small Devices (max 420px) - Minimal Design ─┐ */
@media (max-width:420px) {
  :root {
    --spacing-mobile: 12px;
    --font-size-mobile: 12px;
  }
  
  /* Compact header */
  .hdr { padding:0 10px; gap:6px; height:54px; }
  .brand-logo { font-size:11px; padding:4px 10px; }
  .t-val { font-size:16px; }
  
  /* Compact layout */
  .pal-grid { grid-template-columns:repeat(5,1fr); gap:4px; }
  .pnum { width:28px; height:28px; font-size:11px; }
  
  /* Minimal spacing */
  .q-block { gap:10px; margin-bottom:16px; }
  .q-num-badge { width:32px; height:32px; font-size:11px; }
  .opt { padding:8px 10px; border-radius:6px; }
  
  /* Compact buttons */
  .btn, .hdr-btn { font-size:11px; padding:6px 12px; }
  .btn-sm { padding:4px 8px; font-size:11px; }
  
  /* Compact modals */
  .ovl-card { padding:24px 20px; }
  .ovl-card h4 { font-size:15px; }
  
  /* Minimal database spacing */
  .db-wrap { padding:12px 10px 36px; }
  .db-hero { padding:16px 12px; }
  .hstat { padding:10px 14px; }
  .hstat .hn { font-size:20px; }
  
  /* Responsive typography */
  .db-hero-l h2 { font-size:18px; }
  .dc-val { font-size:24px; }
  
  /* Compact question display */
  .q-text { font-size:13px; }
  .opt-t { font-size:13px; }
  
  /* Extra-small table card optimization */
  .db-table tbody tr { padding:12px; gap:10px; }
  .db-table td { grid-template-columns:70px 1fr; }
  .db-table .btn-xs { min-height:40px; font-size:12px; padding:8px 10px; }
}

/* ┌─ Large Devices (min 1200px) - Desktop Optimized ─┐ */
@media (min-width:1200px) {
  :root {
    --spacing-desktop: 28px;
    --font-size-desktop: 15px;
  }
  
  /* Enhanced spacing on desktop */
  .db-wrap { padding:40px 32px 80px; }
  .db-cards { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
  .db-hero { padding:36px 40px; }
  
  /* Responsive utilities */
  .show-desktop { display:block !important; }
  .hide-desktop { display:none !important; }
  
  /* Desktop navigation improvements */
  .hdr { padding:0 28px; }
  
  /* Wider modals */
  .modal { max-width:700px; }
  .inst-card { max-width:820px; }
}

/* ┌─ Extra Large Devices (min 1536px) - UltraWide ─┐ */
@media (min-width:1536px) {
  :root {
    --spacing-desktop: 32px;
  }
  
  .db-wrap { max-width:1400px; }
  .db-cards { grid-template-columns:repeat(4, 1fr); }
}

/* ┌─ Print Styles ─┐ */
@media print {
  .hdr, .q-footer, .pal-col, .toast, .moverlay, .pause-ovl {
    display:none !important;
  }
  .test-layout { height:auto; }
  .q-side { overflow:visible; }
  .q-scroll { padding:0; }
  body { background:white; }
}