/* ============================================================
   CMS PYQ — design system
   Refined violet brand · layered depth · light + dark themes
   ============================================================ */

:root{
  /* Advertise support for BOTH schemes at all times. This is what tells Chrome
     for Android the site has its own dark mode, so its "Force Dark" feature
     leaves our colours alone — the data-theme attribute below is the single
     source of truth for which palette is shown. */
  color-scheme:light dark;

  /* brand */
  --accent:#6d5efc;
  --accent-strong:#5a4bf0;
  --accent-2:#8b5cf6;
  --accent-grad:linear-gradient(135deg,#7c6bff 0%,#8b5cf6 100%);
  --accent-soft:#eeecfe;
  --accent-ring:rgba(109,94,252,.30);

  /* surfaces */
  --bg:#f4f5fb;
  --bg-tint:rgba(124,107,255,.06);
  --card:#ffffff;
  --card-2:#fbfbfe;
  --elev:#ffffff;

  /* text */
  --ink:#191c2b;
  --ink-2:#3c4256;
  --muted:#7c8194;
  --faint:#aeb2c2;

  /* lines */
  --line:#ecedf5;
  --line-2:#e3e4ef;

  /* status */
  --green:#159a56;
  --green-bg:#e6f7ee;
  --green-line:#a4e0c0;
  --green-ink:#0e6d3d;
  --red:#e5484d;
  --red-bg:#fdeceb;
  --red-line:#f4b4b2;
  --red-ink:#a52c2c;
  --amber:#e0a012;
  --amber-bg:#fdf3dc;
  --blue:#3d63e0;
  --blue-bg:#eaf0fd;

  /* revision highlighter */
  --hl-bg:rgba(255,201,64,.55);

  /* depth */
  --shadow-sm:0 1px 2px rgba(24,22,55,.05),0 2px 6px rgba(24,22,55,.05);
  --shadow-md:0 2px 6px rgba(24,22,55,.06),0 12px 30px rgba(24,22,55,.08);
  --shadow-lg:0 8px 24px rgba(24,22,55,.10),0 24px 60px rgba(24,22,55,.14);
  --shadow-accent:0 8px 22px rgba(109,94,252,.34);

  --radius:18px;
  --radius-sm:12px;
}

/* dark theme — applied via data-theme (system default on first load, or the user's toggle) */
:root[data-theme="dark"]{
    --accent:#8b7bff;
    --accent-strong:#7c6bff;
    --accent-2:#a78bfa;
    --accent-grad:linear-gradient(135deg,#8b7bff 0%,#a78bfa 100%);
    --accent-soft:#241f47;
    --accent-ring:rgba(139,123,255,.35);

    --bg:#0d0f17;
    --bg-tint:rgba(139,123,255,.08);
    --card:#181b26;
    --card-2:#1d2130;
    --elev:#212536;

    --ink:#eef0f8;
    --ink-2:#c4c8d6;
    --muted:#8a90a4;
    --faint:#5c6178;

    --line:#282c3c;
    --line-2:#313649;

    --green:#3dd68c;
    --green-bg:#123024;
    --green-line:#2f6b4e;
    --green-ink:#7ce8b4;
    --red:#ff6369;
    --red-bg:#331b1c;
    --red-line:#6e3436;
    --red-ink:#ff9ea1;
    --amber:#f5c451;
    --amber-bg:#332a12;
    --blue:#7aa0ff;
    --blue-bg:#1a2340;

    /* softer + more translucent so it glows rather than glares on dark */
    --hl-bg:rgba(250,206,100,.28);

    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 4px 14px rgba(0,0,0,.45);
    --shadow-lg:0 16px 44px rgba(0,0,0,.55);
    --shadow-accent:0 8px 24px rgba(109,94,252,.45);
}

*{box-sizing:border-box}
/* html gets the theme bg too so the overscroll/root canvas can never flash a
   system-dark colour now that color-scheme advertises light+dark. */
html,body{margin:0;padding:0;background:var(--bg)}
body{
  background:var(--bg);color:var(--ink);
  background-image:
    radial-gradient(1200px 520px at 100% -8%, var(--bg-tint), transparent 60%),
    radial-gradient(900px 460px at -10% 0%, var(--bg-tint), transparent 55%);
  background-repeat:no-repeat;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.hidden{display:none !important}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--accent-ring)}

/* ============================================================
   HOME · header
   ============================================================ */
.home-head{
  padding:26px 22px 8px;max-width:1240px;margin:0 auto;
}
.home-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.home-head h1{
  margin:0;font-size:29px;font-weight:800;letter-spacing:-.6px;
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  display:inline-block;
}
.home-head p{margin:5px 0 0;color:var(--muted);font-size:14.5px}
.head-actions{display:flex;align-items:center;gap:9px;margin-top:2px;flex-shrink:0}

/* unified header button system */
.bm-btn,.sync-btn,.logout-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:650;line-height:1;
  height:40px;padding:0 15px;border-radius:12px;cursor:pointer;
  text-decoration:none;border:1px solid transparent;
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.bm-btn .ic,.sync-btn .ic{width:17px;height:17px}

.bm-btn{background:var(--card);color:var(--accent);border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.bm-btn .ic{stroke:var(--accent)}
.bm-btn:hover{border-color:var(--accent-ring);transform:translateY(-1px);box-shadow:var(--shadow-md)}

.sync-btn{background:var(--accent-grad);color:#fff;box-shadow:var(--shadow-accent)}
.sync-btn .ic{stroke:#fff}
.sync-btn:hover{transform:translateY(-1px);filter:saturate(1.08) brightness(1.03)}
.sync-btn:disabled{opacity:.6;cursor:default;transform:none;filter:none}

.logout-btn{background:transparent;color:var(--muted);border-color:transparent}
.logout-btn:hover{background:var(--card);color:var(--ink);border-color:var(--line-2)}

.bm-btn:active,.sync-btn:active,.logout-btn:active{transform:scale(.97)}

/* theme toggle (sun/moon) */
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;cursor:pointer;
  background:var(--card);color:var(--accent);border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.theme-btn .ic{width:18px;height:18px;stroke:var(--accent)}
.theme-btn:hover{border-color:var(--accent-ring);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.theme-btn:active{transform:scale(.94)}
/* show the moon in light mode (tap → dark), the sun in dark mode (tap → light) */
.theme-btn .ic-sun{display:none}
:root[data-theme="dark"] .theme-btn .ic-sun{display:block}
:root[data-theme="dark"] .theme-btn .ic-moon{display:none}

.sync-status{padding:12px 22px 0;max-width:1240px;margin:0 auto;font-size:12.5px;font-weight:600;min-height:16px;color:var(--muted)}
.sync-status.busy{color:var(--accent)}
.sync-status.ok{color:var(--green)}
.sync-status.err{color:var(--red)}

/* ============================================================
   HOME · exam cards
   ============================================================ */
.exam-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:18px;padding:18px 22px 48px;max-width:1240px;margin:0 auto;
}
.exam-card{
  position:relative;background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--line);
  transition:transform .16s ease,border-color .18s ease,box-shadow .22s ease;
}
.exam-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--accent-grad);opacity:0;transition:opacity .2s ease;
}
.exam-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent}
.exam-card:hover::before{opacity:1}
.exam-card:active{transform:translateY(-1px) scale(.995)}

.exam-top{display:flex;align-items:center;gap:15px;padding:18px 18px 16px}
.exam-badge{
  width:54px;height:54px;border-radius:15px;
  background:var(--accent-soft);color:var(--accent);
  font-weight:800;font-size:21px;letter-spacing:-.5px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1px solid var(--accent-ring);
}
.exam-info{flex:1;min-width:0}
.exam-title{font-size:17px;font-weight:750;letter-spacing:-.2px}
.exam-sub{color:var(--muted);font-size:13px;margin-top:3px}
.exam-chev{color:var(--faint);flex-shrink:0;transition:transform .18s ease,color .18s ease}
.exam-card:hover .exam-chev{transform:translateX(3px);color:var(--accent)}
.exam-foot{
  display:flex;align-items:center;gap:8px;
  border-top:1px solid var(--line);padding:12px 16px;font-size:12.5px;font-weight:650;
  background:var(--card-2);
}
.exam-foot .fitem{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:9px;flex:1;justify-content:center;
}
.exam-foot .pos{color:var(--green-ink);background:var(--green-bg)}
.exam-foot .neg{color:var(--red-ink);background:var(--red-bg)}
.exam-foot .dur{color:var(--blue);background:var(--blue-bg)}
.dot{width:15px;height:15px}
.exam-progress{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--accent);font-weight:700;margin-top:6px;
}
.exam-progress::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring);
}

/* ============================================================
   BOOKMARKS screen
   ============================================================ */
.bm-body{padding:18px 16px;max-width:820px;margin:0 auto;padding-bottom:64px}
.bm-intro{color:var(--muted);font-size:14px;line-height:1.55;margin:4px 4px 18px}
.bm-list{display:flex;flex-direction:column;gap:12px}
.bm-row{
  display:flex;align-items:center;gap:14px;background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:17px 18px;cursor:pointer;border:1px solid var(--line);
  transition:transform .14s ease,box-shadow .2s ease,border-color .18s ease;
}
.bm-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent-ring)}
.bm-row:active{transform:scale(.99)}
.bm-row .exam-chev{color:var(--faint)}
.bm-row:hover .exam-chev{color:var(--accent);transform:translateX(3px)}
.bm-row-info{flex:1;min-width:0}
.bm-row-title{font-size:16px;font-weight:700;letter-spacing:-.2px}
.bm-row-sub{color:var(--muted);font-size:13px;margin-top:3px}
.bm-empty{
  text-align:center;color:var(--muted);font-size:15px;line-height:1.7;
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  border:1px solid var(--line);padding:40px 26px;margin-top:8px;
}

/* ============================================================
   QUIZ · header
   ============================================================ */
.quiz-head{
  position:sticky;top:0;z-index:5;
  background:color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--line);
}
.head-btn{
  display:flex;align-items:center;gap:6px;background:none;border:none;
  color:var(--ink-2);font-size:15px;font-weight:650;cursor:pointer;
  padding:8px 10px;border-radius:11px;transition:background .15s ease,color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.head-btn:hover{background:var(--accent-soft);color:var(--accent)}
.head-btn:active{transform:scale(.95)}
.head-btn.icon-only{padding:8px}
.qcount{flex:1;min-width:0}
.qcount-txt{font-size:15px;font-weight:750;letter-spacing:-.2px}
.progress{height:5px;background:var(--line-2);border-radius:99px;margin-top:7px;overflow:hidden}
.progress-bar{height:100%;background:var(--accent-grad);width:0;border-radius:99px;transition:width .3s cubic-bezier(.4,0,.2,1)}

/* ============================================================
   QUIZ · body
   ============================================================ */
.qbody{padding:18px 16px;max-width:max(820px, 80vw);margin:0 auto;padding-bottom:110px}
.topic-chip{
  display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line-2);border-radius:11px;padding:8px 13px;
  font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:16px;
  box-shadow:var(--shadow-sm);letter-spacing:.1px;
}
.topic-chip::before{content:"";width:15px;height:15px;border-radius:5px;background:var(--accent-grad);flex-shrink:0}
.question-card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-md);
  border:1px solid var(--line);
  padding:22px;font-size:17.5px;line-height:1.55;font-weight:500;
  white-space:pre-wrap;word-break:break-word;
}
.options{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.option{
  display:flex;align-items:center;gap:14px;background:var(--card);
  border:1.5px solid var(--line-2);border-radius:15px;padding:15px 17px;
  cursor:pointer;box-shadow:var(--shadow-sm);
  transition:background .15s ease,border-color .15s ease,transform .1s ease,box-shadow .18s ease;
}
.option:hover{border-color:var(--accent-ring);box-shadow:var(--shadow-md)}
.option:active{transform:scale(.99)}
.option .letter{
  width:32px;height:32px;border-radius:10px;background:var(--card-2);
  border:1px solid var(--line-2);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-weight:750;font-size:14px;flex-shrink:0;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.option:hover .letter{border-color:var(--accent-ring);color:var(--accent)}
.option .otext{flex:1;font-size:16px;line-height:1.45}
.option .markwrap{display:flex;align-items:center}
.option .mark{width:24px;height:24px;flex-shrink:0}
.option.correct{background:var(--green-bg);border-color:var(--green-line)}
.option.correct .letter{background:var(--green);border-color:var(--green);color:#fff}
.option.correct .otext{color:var(--green-ink);font-weight:600}
.option.wrong{background:var(--red-bg);border-color:var(--red-line)}
.option.wrong .letter{background:var(--red);border-color:var(--red);color:#fff}
.option.wrong .otext{color:var(--red-ink);font-weight:600}
.options.locked .option{cursor:default}
.options.locked .option:hover{box-shadow:var(--shadow-sm)}
.options.locked .option:not(.correct):not(.wrong){opacity:.62}
.mark-c{color:var(--green)}
.mark-x{color:var(--red)}

/* ============================================================
   EXPLANATION
   ============================================================ */
.explain{
  margin-top:20px;background:var(--blue-bg);
  border:1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  border-radius:var(--radius);padding:18px 20px;position:relative;overflow:hidden;
}
.explain::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue);
}
.explain-title{display:flex;align-items:center;gap:8px;color:var(--blue);font-weight:800;font-size:15.5px;margin-bottom:10px}
.explain-body{font-size:15px;line-height:1.65;color:var(--ink-2);word-break:break-word}
.explain-body b{color:var(--ink)}
.explain-body i{color:var(--ink-2)}

/* ---- revision highlights ----
   Warm amber reads as a "highlighter" in both themes. It's translucent so the
   underlying text keeps its own colour and stays fully legible on the light
   and dark explanation backgrounds. */
mark.hl{
  background:var(--hl-bg);color:inherit;
  border-radius:4px;padding:.03em .12em;margin:0 -.02em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  cursor:pointer;
}

/* floating selection toolbar */
.hl-bar{
  position:fixed;z-index:40;display:flex;gap:3px;
  background:var(--elev);border:1px solid var(--line-2);
  border-radius:13px;padding:5px;box-shadow:var(--shadow-lg);
  animation:fade .12s ease;-webkit-user-select:none;user-select:none;
}
.hl-act{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:650;line-height:1;color:var(--ink-2);
  background:none;border:none;cursor:pointer;padding:8px 12px;border-radius:9px;
  -webkit-tap-highlight-color:transparent;
  transition:background .14s ease,color .14s ease,transform .1s ease;
}
.hl-act:hover{background:var(--accent-soft);color:var(--accent)}
.hl-act:active{transform:scale(.95)}
.hl-act .ic{width:16px;height:16px}
.hl-swatch{width:14px;height:14px;border-radius:4px;background:var(--hl-bg);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);flex-shrink:0}
.hl-del{color:var(--red)}
.hl-del:hover{background:var(--red-bg);color:var(--red)}

/* ============================================================
   BOTTOM BAR
   ============================================================ */
.bottom-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:5;
  background:color-mix(in srgb, var(--card) 84%, transparent);
  backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
}
.nav-btn{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:48px;background:var(--card-2);border:1px solid var(--line-2);
  color:var(--ink-2);cursor:pointer;border-radius:14px;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;
  -webkit-tap-highlight-color:transparent;
}
.nav-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-ring)}
.nav-btn:active{transform:scale(.93)}
.nav-btn:disabled{opacity:.32;background:var(--card-2);color:var(--faint);border-color:var(--line);cursor:default;transform:none}
.nav-btn.flagged{color:var(--amber);background:var(--amber-bg);border-color:color-mix(in srgb, var(--amber) 40%, transparent)}
/* make the middle flag button visually primary */
#flagBtn{width:60px}

/* ============================================================
   GRID MODAL
   ============================================================ */
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,13,35,.5);backdrop-filter:blur(2px);animation:fade .2s ease}
.modal-sheet{
  position:relative;width:100%;max-width:640px;max-height:82vh;background:var(--card);
  border-radius:26px 26px 0 0;padding:14px 22px calc(26px + env(safe-area-inset-bottom));
  overflow-y:auto;box-shadow:var(--shadow-lg);border:1px solid var(--line);border-bottom:none;
  animation:sheet-up .28s cubic-bezier(.32,.72,0,1);
}
.modal-sheet::before{
  content:"";display:block;width:40px;height:5px;border-radius:99px;background:var(--line-2);
  margin:2px auto 14px;
}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-head h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.3px}
.legend{display:flex;justify-content:center;gap:22px;margin-bottom:18px;flex-wrap:wrap}
.lg{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:650}
.sw{width:15px;height:15px;border-radius:5px;display:inline-block}
.sw-un{background:var(--card-2);border:1.5px solid var(--line-2)}
.sw-an{background:var(--accent);border:1.5px solid var(--accent)}
.sw-fl{background:var(--card-2);border:1.5px solid var(--amber)}
.grid-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:10px}
.cell{
  aspect-ratio:1;border-radius:13px;border:1.5px solid var(--line-2);background:var(--card-2);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
  color:var(--ink-2);cursor:pointer;transition:transform .1s ease,box-shadow .16s ease;
}
.cell:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.cell:active{transform:scale(.94)}
.cell.answered{background:var(--accent-grad);border-color:transparent;color:#fff}
.cell.flagged{border-color:var(--amber);border-width:2px}
.cell.current{outline:2px solid var(--accent);outline-offset:2px}
.grid-summary{text-align:center;color:var(--muted);font-size:13px;font-weight:600;margin-top:18px}

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{
  background:var(--card);border-radius:24px;box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
  padding:36px 30px;width:100%;max-width:370px;text-align:center;
}
.login-badge{
  width:66px;height:66px;border-radius:20px;background:var(--accent-grad);color:#fff;
  font-weight:800;font-size:21px;letter-spacing:-.5px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  box-shadow:var(--shadow-accent);
}
.login-card h1{
  margin:0;font-size:25px;font-weight:800;letter-spacing:-.4px;
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  display:inline-block;
}
.login-card p{margin:7px 0 22px;color:var(--muted);font-size:14px}
.login-input{
  width:100%;padding:14px 16px;font-size:16px;background:var(--card-2);
  color:var(--ink);border:1.5px solid var(--line-2);
  border-radius:13px;outline:none;margin-bottom:14px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.login-input::placeholder{color:var(--faint)}
.login-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.login-error{color:var(--red);font-size:13px;font-weight:600;margin-bottom:14px}
.login-btn{
  width:100%;padding:15px;font-size:16px;font-weight:700;color:#fff;background:var(--accent-grad);
  border:none;border-radius:13px;cursor:pointer;box-shadow:var(--shadow-accent);
  transition:transform .12s ease,filter .15s ease;
}
.login-btn:hover{transform:translateY(-1px);filter:saturate(1.08) brightness(1.03)}
.login-btn:active{transform:scale(.98)}

/* ============================================================
   LOADER
   ============================================================ */
.loader{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--bg) 72%, transparent);backdrop-filter:blur(3px)}
.spinner{width:40px;height:40px;border:4px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:520px){
  .home-head{padding:20px 16px 6px}
  .home-head h1{font-size:25px}
  .exam-grid{grid-template-columns:1fr;padding:14px 16px 40px}
  .grid-cells{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
  .sync-status{padding:10px 16px 0}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation-duration:.001ms !important}
}