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

:root{
  /* 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;

  /* 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;

    --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,body{margin:0;padding:0}
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)}

/* ============================================================
   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}
}