/* ============================================================
   মগজ ধোলাই — Modernist design system
   Exact tokens per design_handoff README.md (source of truth)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anek+Bangla:wght@400;500;600;800&display=swap');

:root {
  /* base */
  --ground: #f3f2f2;
  --surface: #eae9e9;
  --canvas: #e8e6e5;
  --ink: #201e1d;
  --ink-hover: #2d2b2b;

  /* accent (red) ramp */
  --accent: #ec3013;
  --accent-pressed: #dd2b0f;
  --accent-700: #ae1800;
  --accent-500: #ff563c;
  --accent-400: #ff9783;
  --accent-300: #ffc4b8;
  --accent-200: #ffe0d9;
  --accent-100: #fff2ef;

  /* neutrals */
  --n-100: #f8f4f4;
  --n-200: #eae7e7;
  --n-300: #d7d3d3;
  --n-400: #bab6b6;
  --n-600: #7d7979;
  --n-900: #2d2b2b;

  --muted: rgba(32, 30, 29, .6);
  --div-major: rgba(32, 30, 29, .4);
  --div-minor: rgba(32, 30, 29, .2);
  --on-dark-muted: rgba(243, 242, 242, .65);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  --radius: 0px; /* zero everywhere per design system */
}

* , *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Anek Bangla', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font-family: inherit; }

.mono {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 600;
}

/* ---------- device frame (only relevant when previewing on desktop) ---------- */
.device-shell {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}
.device {
  width: 412px; max-width: 100vw;
  height: 892px; max-height: 100vh;
  background: var(--ground);
  border: 2px solid var(--ink);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.statusbar {
  height: 28px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  font: 600 12px ui-monospace, monospace;
  background: var(--ground);
}
.app-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.gesture-bar {
  height: 14px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--ground);
}
.gesture-bar::after {
  content: ''; width: 100px; height: 4px; background: var(--ink); opacity: .5;
}

/* ---------- shared bits ---------- */
.rule { height: 2px; background: var(--div-major); border: 0; margin: 0; flex: none; }
.rule-minor { height: 1px; background: var(--div-minor); border: 0; margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px;
  cursor: pointer; border: 2px solid transparent; background: transparent;
  font-family: 'Anek Bangla', sans-serif; font-weight: 800; font-size: 14px;
  padding: 9px 16px; border-radius: 0; color: var(--ink);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-accent:hover:not(:disabled) { background: var(--accent-pressed); border-color: var(--accent-pressed); }
.btn-ink { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn-ink:hover:not(:disabled) { background: var(--ink-hover); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover:not(:disabled) { background: var(--accent-200); }
.btn-outline-white { border-color: #fff; color: #fff; }
.btn-outline-accent-dark { border-color: var(--accent-700); color: var(--accent-700); }
.btn-block { width: 100%; justify-content: center; padding: 14px; }
.btn-icon {
  width: 34px; height: 34px; padding: 0; justify-content: center;
  border: 2px solid var(--ink); background: transparent;
}
.btn-icon:hover { background: var(--accent-200); }
.btn-icon-white { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-icon-white:hover { background: rgba(255,255,255,.15); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

svg { display: block; flex: none; }

/* ---------- header / topbar ---------- */
.topbar {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 14px var(--sp-5);
}
.topbar.on-ink { background: var(--ink); color: var(--ground); }
.topbar.on-accent { background: var(--accent); color: #fff; }
.topbar-title { font: 800 18px 'Anek Bangla', sans-serif; margin: 0; flex: 1; }
.topbar-step { font: 600 11px ui-monospace, monospace; opacity: .65; letter-spacing: .06em; }

/* ---------- scrollable body padding ---------- */
.screen-body { padding: var(--sp-5); flex: 1; }
.screen-body.flush { padding: 0; }

/* ---------- Home ---------- */
.home-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 2px solid var(--div-major);
  flex: none;
}
.home-avatar {
  width: 46px; height: 46px; flex: none;
  background: var(--accent-200); border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font: 800 20px 'Anek Bangla', sans-serif; color: var(--accent-700);
}
.home-greet-kicker { font: 600 11px ui-monospace, monospace; color: var(--muted); letter-spacing: .08em; margin-bottom: 2px; }
.home-greet-name { font: 800 22px 'Anek Bangla', sans-serif; }
.home-streak {
  margin-left: auto; text-align: right;
  padding-left: 14px; border-left: 2px solid var(--div-major);
}
.home-streak-num { font: 800 26px 'Anek Bangla', sans-serif; color: var(--accent); line-height: 1; }
.home-streak-label { font: 500 11px 'Anek Bangla', sans-serif; color: var(--muted); margin-top: 2px; }

.home-blocks { display: flex; flex-direction: column; }
.home-block {
  width: 100%; text-align: left; cursor: pointer; border: 0;
  min-height: 158px; padding: 22px 20px;
  border-bottom: 2px solid var(--div-major);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  transition: background .15s ease;
}
.home-block-kicker { font: 600 11px ui-monospace, monospace; letter-spacing: .1em; opacity: .8; display: flex; align-items: center; gap: 8px; }
.home-block-title { font: 800 34px 'Anek Bangla', sans-serif; line-height: 1.05; }
.home-block-desc { font: 500 13px 'Anek Bangla', sans-serif; opacity: .85; margin-bottom: 6px; }
.home-block-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid currentColor; padding: 5px 13px; font: 800 13px 'Anek Bangla', sans-serif;
}
.home-block.study { background: var(--accent); color: #fff; }
.home-block.study:hover { background: var(--accent-pressed); }
.home-block.flash { background: var(--ink); color: var(--ground); }
.home-block.flash:hover { background: var(--ink-hover); }
.home-block.flash .home-block-cta { border-color: var(--accent-500); color: var(--accent-400); }
.home-block.mock { background: var(--accent-200); color: var(--ink); }
.home-block.mock:hover { background: var(--accent-300); }
.home-block.mock .home-block-cta { border-color: var(--accent); color: var(--accent-700); }

.home-progress-row {
  padding: 18px 20px; background: var(--ground);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; flex: none;
}
.home-progress-row:hover { background: var(--surface); }
.home-progress-title { font: 800 24px 'Anek Bangla', sans-serif; }
.home-progress-meta { font: 500 12px 'Anek Bangla', sans-serif; color: var(--muted); margin-top: 2px; }
.home-progress-pct { font: 800 34px 'Anek Bangla', sans-serif; color: var(--accent); }

/* ---------- list rows (subject / chapter) ---------- */
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-bottom: 2px solid var(--div-major);
  cursor: pointer;
}
.row:hover { background: var(--accent-200); }
.row-index {
  width: 44px; height: 44px; flex: none;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 800 16px 'Anek Bangla', sans-serif;
}
.row-index.outline { background: transparent; border: 2px solid var(--ink); color: var(--ink); width: 34px; height: 34px; font-size: 14px; }
.row-index.done { background: var(--accent); color: #fff; }
.row-main { flex: 1; min-width: 0; }
.row-title { font: 800 19px 'Anek Bangla', sans-serif; }
.row-meta { font: 500 12px 'Anek Bangla', sans-serif; color: var(--muted); margin-top: 2px; }
.row-track { width: 60px; height: 6px; background: var(--n-300); flex: none; margin: 0 4px; }
.row-track > div { height: 100%; background: var(--accent); }
.row-pct { font: 800 16px 'Anek Bangla', sans-serif; color: var(--accent-700); width: 44px; text-align: right; flex: none; }
.row-state-glyph { font: 800 16px sans-serif; width: 20px; text-align: center; flex: none; }

/* ---------- content type grid ---------- */
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--ink); }
.type-cell {
  min-height: 132px; padding: 16px; cursor: pointer; border: 0; text-align: left;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  filter: brightness(1); transition: filter .12s ease;
}
.type-cell:hover { filter: brightness(1.06); }
.type-cell.span2 { grid-column: span 2; }
.type-cell-kicker { font: 600 10px ui-monospace, monospace; opacity: .7; }
.type-cell-name { font: 800 21px 'Anek Bangla', sans-serif; line-height: 1.1; }
.type-cell-meta { font: 500 12px 'Anek Bangla', sans-serif; opacity: .8; }

/* ---------- content views ---------- */
.content-h1 { font: 800 26px 'Anek Bangla', sans-serif; margin-bottom: 6px; }
.content-underline { width: 64px; height: 2px; background: var(--accent); margin-bottom: 16px; }
.content-body { font: 400 16px/1.7 'Anek Bangla', sans-serif; margin-bottom: 18px; }
.callout {
  border: 2px solid var(--ink); background: var(--surface);
  padding: 18px; display: flex; align-items: center; gap: 18px; margin-bottom: 18px;
}
.callout-frac { display: flex; flex-direction: column; align-items: center; }
.callout-frac .num, .callout-frac .den { font: 800 44px 'Anek Bangla', sans-serif; color: var(--accent); line-height: 1; }
.callout-frac .bar { width: 40px; height: 3px; background: var(--accent); margin: 4px 0; }
.callout-text { font: 400 14px/1.6 'Anek Bangla', sans-serif; flex: 1; }
.remember-title { font: 800 15px 'Anek Bangla', sans-serif; margin-bottom: 8px; }
.remember-list { display: flex; flex-direction: column; background: var(--ink); gap: 2px; margin-bottom: 18px; }
.remember-row { background: var(--ground); display: flex; gap: 12px; padding: 12px 14px; align-items: flex-start; }
.remember-idx { font: 800 14px 'Anek Bangla', sans-serif; color: var(--accent); flex: none; }
.remember-text { font: 400 14px/1.5 'Anek Bangla', sans-serif; }
.figure-placeholder {
  border: 2px solid var(--ink);
  background: repeating-linear-gradient(45deg, var(--n-100) 0 8px, #e6e3e2 8px 16px);
  height: 150px; display: flex; align-items: center; justify-content: center;
  font: 600 11px ui-monospace, monospace; color: var(--muted); text-align: center; padding: 12px;
}

/* QA accordion */
.qa-item { border-bottom: 2px solid var(--div-major); }
.qa-q {
  width: 100%; text-align: left; cursor: pointer; border: 0; background: transparent;
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
}
.qa-q.open { background: var(--accent-200); padding-left: 8px; padding-right: 8px; }
.qa-idx { font: 800 14px 'Anek Bangla', sans-serif; color: var(--accent); flex: none; width: 22px; }
.qa-qtext { flex: 1; font: 600 15px 'Anek Bangla', sans-serif; }
.qa-sign { font: 800 18px sans-serif; flex: none; }
.qa-a {
  font: 400 15px/1.65 'Anek Bangla', sans-serif; padding: 4px 0 16px 54px;
  animation: slideIn .18s ease-out;
}

/* vocab */
.vocab-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--div-minor); }
.vocab-term { width: 96px; flex: none; font: 800 16px 'Anek Bangla', sans-serif; color: var(--accent-700); }
.vocab-def { font: 400 14px/1.5 'Anek Bangla', sans-serif; }

/* MCQ practice / quiz */
.q-kicker { font: 600 11px ui-monospace, monospace; color: var(--accent-700); margin-bottom: 8px; letter-spacing: .06em; }
.q-text { font: 800 26px 'Anek Bangla', sans-serif; min-height: 88px; display: flex; align-items: center; line-height: 1.25; margin-bottom: 18px; }
.opt-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.opt {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 2px solid var(--ink); background: var(--ground); padding: 12px 14px;
  font: 600 15px 'Anek Bangla', sans-serif; text-align: left; width: 100%;
  transition: background .12s, border-color .12s, opacity .12s;
}
.opt-label {
  width: 28px; height: 28px; flex: none; border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center; font: 800 13px 'Anek Bangla', sans-serif;
}
.opt.correct { background: var(--accent-200); border-color: var(--accent); }
.opt.correct .opt-label { border-color: var(--accent); color: var(--accent-700); }
.opt.wrong-chosen { background: var(--surface); border-color: var(--n-600); color: var(--muted); }
.opt.faded { opacity: .45; }
.opt:disabled { cursor: default; }

.exp-panel { border-top: 2px solid var(--div-major); margin-top: 16px; padding-top: 16px; display: flex; gap: 12px; animation: slideIn .18s ease-out; }
.exp-status { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; font: 800 16px sans-serif; border: 2px solid var(--ink); }
.exp-status.ok { background: var(--accent); border-color: var(--accent); color: #fff; }
.exp-status.no { background: var(--ink); color: var(--ground); }
.exp-title { font: 800 15px 'Anek Bangla', sans-serif; margin-bottom: 4px; }
.exp-text { font: 400 15px/1.65 'Anek Bangla', sans-serif; }

/* creative */
.stimulus-box { background: var(--accent-200); border: 2px solid var(--ink); padding: 16px; margin-bottom: 16px; }
.stimulus-kicker { font: 600 10px ui-monospace, monospace; letter-spacing: .1em; margin-bottom: 8px; color: var(--accent-700); }
.stimulus-text { font: 500 14px/1.6 'Anek Bangla', sans-serif; }
.creative-sub { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--div-minor); }
.creative-sub-label { font: 800 15px 'Anek Bangla', sans-serif; flex: none; width: 24px; }
.creative-sub-text { flex: 1; font: 400 15px/1.5 'Anek Bangla', sans-serif; }
.creative-sub-marks { font: 600 11px ui-monospace, monospace; color: var(--muted); flex: none; }

/* flashcard home */
.set-line { padding: 18px 20px; font: 500 14px/1.5 'Anek Bangla', sans-serif; color: var(--muted); flex: none; }
.mode-block {
  width: 100%; text-align: left; cursor: pointer; border: 0; border-bottom: 2px solid var(--div-major);
  padding: 26px 20px; font: 800 30px 'Anek Bangla', sans-serif;
}
.mode-block.mcq { background: var(--accent); color: #fff; }
.mode-block.mcq:hover { background: var(--accent-pressed); }
.mode-block.flip { background: var(--ground); }
.mode-block.flip:hover { background: var(--surface); }
.mode-block-desc { font: 500 13px 'Anek Bangla', sans-serif; font-weight: 500; opacity: .85; margin-top: 4px; }

/* quiz header */
.quiz-header { flex: none; padding: 14px 20px; background: var(--ink); color: var(--ground); }
.quiz-header-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.quiz-header-close { cursor: pointer; }
.quiz-progress-text { font: 600 11px ui-monospace, monospace; flex: 1; text-align: right; opacity: .85; }
.quiz-track { height: 8px; background: rgba(243,242,242,.25); }
.quiz-track > div { height: 100%; background: var(--accent); }

/* card flip */
.flip-card {
  min-height: 300px; border: 2px solid var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; position: relative; margin-bottom: 18px;
  transition: transform .18s ease;
}
.flip-card.front { background: var(--ground); }
.flip-card.back { background: var(--accent); color: #fff; }
.flip-card-q { font: 800 24px/1.3 'Anek Bangla', sans-serif; }
.flip-card-hint { font: 500 12px 'Anek Bangla', sans-serif; color: var(--muted); margin-top: 14px; }
.flip-card-a { font: 700 22px/1.4 'Anek Bangla', sans-serif; }
.flip-nav { display: flex; gap: 2px; margin-bottom: 16px; }
.flip-nav .btn { flex: 1; justify-content: center; }
.flip-dots { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.flip-dot { width: 22px; height: 6px; background: var(--n-300); }
.flip-dot.past { background: var(--ink); }
.flip-dot.current { background: var(--accent); }

/* result / banner */
.result-banner { background: var(--accent); color: #fff; padding: 28px 20px; flex: none; }
.result-kicker { font: 600 11px ui-monospace, monospace; letter-spacing: .08em; opacity: .85; margin-bottom: 8px; }
.result-score { font: 800 52px 'Anek Bangla', sans-serif; }
.result-score-total { font: 800 26px 'Anek Bangla', sans-serif; opacity: .8; }
.result-msg { font: 600 15px 'Anek Bangla', sans-serif; margin-top: 10px; }
.stat-row { display: flex; gap: 2px; background: var(--ink); margin: 0; }
.stat-cell { flex: 1; background: var(--ground); padding: 14px; text-align: center; }
.stat-num { font: 800 24px 'Anek Bangla', sans-serif; }
.stat-label { font: 500 11px 'Anek Bangla', sans-serif; color: var(--muted); margin-top: 4px; }
.badge-row { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 2px solid var(--div-major); }
.badge-sq { width: 48px; height: 48px; flex: none; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 22px sans-serif; }
.section-title { font: 800 16px 'Anek Bangla', sans-serif; padding: 18px 20px 10px; }
.review-item { padding: 14px 20px; border-bottom: 2px solid var(--div-major); }
.review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.review-status { width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; font: 800 13px sans-serif; }
.review-status.ok { background: var(--accent); color: #fff; }
.review-status.partial { background: var(--accent-400); color: var(--ink); }
.review-status.no { background: var(--n-600); color: #fff; }
.review-q { flex: 1; font: 600 14px 'Anek Bangla', sans-serif; }
.review-score { font: 700 13px 'Anek Bangla', sans-serif; color: var(--accent-700); flex: none; }
.review-your { font: 400 13px/1.5 'Anek Bangla', sans-serif; margin: 4px 0; color: var(--muted); }
.review-correct { border-left: 2px solid var(--accent); padding-left: 10px; font: 400 13px/1.5 'Anek Bangla', sans-serif; }

/* mock test setup */
.radio-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 2px solid var(--div-major); cursor: pointer; }
.radio-row.selected { background: var(--accent-200); }
.radio-dot-outer { width: 26px; height: 26px; flex: none; border: 2px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.radio-dot-inner { width: 12px; height: 12px; border-radius: 50%; background: transparent; }
.radio-row.selected .radio-dot-outer { border-color: var(--accent); }
.radio-row.selected .radio-dot-inner { background: var(--accent); }

.check-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 2px solid var(--div-major); cursor: pointer; }
.check-row.checked { background: var(--accent-100); }
.checkbox { width: 26px; height: 26px; flex: none; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font: 800 14px sans-serif; }
.checkbox.checked { background: var(--accent); border-color: var(--accent); color: #fff; }
.instruction-band { background: var(--surface); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; flex: none; }

.marks-toggle { display: flex; border: 2px solid var(--ink); margin-bottom: 20px; }
.marks-cell { flex: 1; text-align: center; padding: 18px; cursor: pointer; }
.marks-cell + .marks-cell { border-left: 2px solid var(--ink); }
.marks-cell.selected { background: var(--accent); color: #fff; }
.marks-num { font: 800 40px 'Anek Bangla', sans-serif; }
.marks-sub { font: 500 12px 'Anek Bangla', sans-serif; margin-top: 4px; }
.scheme-table { width: 100%; border: 2px solid var(--ink); border-collapse: collapse; margin-bottom: 18px; }
.scheme-table td, .scheme-table th { padding: 10px 14px; border-bottom: 1px solid var(--div-minor); font: 500 14px 'Anek Bangla', sans-serif; text-align: left; }
.scheme-table th { font: 700 12px 'Anek Bangla', sans-serif; color: var(--muted); }
.scheme-table tr:last-child td { border-bottom: 0; font: 800 16px 'Anek Bangla', sans-serif; color: var(--accent-700); }
.timer-note { display: flex; align-items: center; gap: 8px; font: 500 13px 'Anek Bangla', sans-serif; color: var(--muted); margin-bottom: 20px; }

/* exam screen */
.exam-header { flex: none; background: var(--ink); color: var(--ground); padding: 12px 20px; position: sticky; top: 0; z-index: 5; }
.exam-header-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.exam-timer { display: flex; align-items: center; gap: 6px; border: 2px solid var(--ground); padding: 4px 10px; font: 800 22px 'Anek Bangla', sans-serif; }
.exam-timer.low { border-color: var(--accent-500); color: var(--accent-500); }
.exam-answered { display: flex; align-items: center; justify-content: space-between; font: 600 12px 'Anek Bangla', sans-serif; margin-bottom: 6px; opacity: .9; }
.exam-track { height: 8px; background: rgba(243,242,242,.25); }
.exam-track > div { height: 100%; background: var(--accent-500); }

.section-band { background: var(--accent-200); padding: 12px 20px; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--ink); }
.section-band-title { font: 800 15px 'Anek Bangla', sans-serif; }
.section-band-marks { font: 600 11px ui-monospace, monospace; }
.exam-q-block { padding: 18px 20px; border-bottom: 2px solid var(--div-major); }
.exam-q-text { font: 600 16px/1.5 'Anek Bangla', sans-serif; margin-bottom: 12px; }
.exam-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-left: 32px; margin-bottom: 4px; }
.exam-opt { border: 2px solid var(--ink); padding: 9px 10px; font: 600 13px 'Anek Bangla', sans-serif; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.exam-opt.selected { background: var(--accent-200); border-color: var(--accent); }
.stimulus-box-exam { background: var(--surface); border: 2px solid var(--ink); padding: 12px; margin-bottom: 12px; font: 500 13px/1.55 'Anek Bangla', sans-serif; }
.stimulus-box-exam .kicker { font: 700 10px ui-monospace, monospace; color: var(--muted); margin-bottom: 6px; }

.input-switch { display: inline-flex; border: 2px solid var(--ink); margin-bottom: 10px; }
.input-tab { padding: 7px 14px; font: 700 12px 'Anek Bangla', sans-serif; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.input-tab + .input-tab { border-left: 2px solid var(--ink); }
.input-tab.active { background: var(--ink); color: var(--ground); }
.exam-textarea {
  width: 100%; border: 2px solid var(--ink); background: var(--n-100); padding: 10px 12px;
  font: 400 15px/1.6 'Anek Bangla', sans-serif; resize: vertical; min-height: 96px;
}
.wordcount { font: 600 11px ui-monospace, monospace; color: var(--muted); margin-top: 4px; }

.photo-drop {
  height: 132px; border: 2px dashed var(--ink);
  background: repeating-linear-gradient(45deg, var(--n-100) 0 8px, #e6e3e2 8px 16px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 12px; margin-bottom: 10px;
}
.photo-drop-text { font: 500 12px 'Anek Bangla', sans-serif; color: var(--muted); max-width: 240px; }
.photo-btn-row { display: flex; gap: 8px; margin-bottom: 10px; }
.photo-filled { display: flex; gap: 12px; align-items: center; border: 2px solid var(--ink); background: var(--surface); padding: 12px; margin-bottom: 10px; }
.photo-thumb { width: 74px; height: 96px; flex: none; background: repeating-linear-gradient(0deg, #fff 0 12px, #ddd 12px 13px); border: 1px solid var(--n-600); }
.photo-status { font: 700 12px 'Anek Bangla', sans-serif; color: var(--accent-700); margin-bottom: 4px; }
.photo-note { font: 400 12px/1.5 'Anek Bangla', sans-serif; color: var(--muted); }
.photo-actions { display: flex; gap: 8px; margin-top: 8px; }

.exam-footer { flex: none; padding: 14px 20px; border-top: 2px solid var(--div-major); background: var(--ground); position: sticky; bottom: 56px; }
.exam-footer-note { font: 500 12px 'Anek Bangla', sans-serif; color: var(--muted); text-align: center; margin-top: 8px; }

/* progress screen */
.week-chart { display: flex; gap: 6px; align-items: flex-end; height: 140px; padding: 16px 20px 8px; }
.week-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.week-bar { width: 100%; border: 2px solid var(--ink); border-bottom: 0; background: var(--accent-300); }
.week-bar.best { background: var(--accent); }
.week-baseline { height: 2px; background: var(--ink); margin: 0 20px; }
.week-label { font: 600 11px ui-monospace, monospace; color: var(--muted); }
.subject-bar-row { padding: 12px 20px; }
.subject-bar-top { display: flex; justify-content: space-between; margin-bottom: 6px; font: 700 13px 'Anek Bangla', sans-serif; }
.subject-track { height: 12px; border: 2px solid var(--ink); background: var(--ground); }
.subject-track > div { height: 100%; background: var(--accent); }
.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--ink); margin: 16px 20px; }
.badge-cell {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--ink); color: var(--ground);
}
.badge-cell.locked { background: var(--surface); color: rgba(32,30,29,.4); }
.badge-glyph { font: 800 20px sans-serif; }
.badge-name { font: 600 9px 'Anek Bangla', sans-serif; text-align: center; padding: 0 4px; }
.weak-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 2px solid var(--div-major); }
.weak-main { flex: 1; }
.weak-name { font: 700 14px 'Anek Bangla', sans-serif; }
.weak-meta { font: 500 11px 'Anek Bangla', sans-serif; color: var(--muted); margin-top: 2px; }

/* mascot strip */
.mascot-strip { background: var(--surface); display: flex; align-items: center; gap: 12px; padding: 14px 20px; flex: none; }
.mascot-ph { width: 56px; height: 56px; flex: none; background: repeating-linear-gradient(45deg, var(--n-100) 0 6px, #ddd 6px 12px); border: 2px solid var(--ink); }

/* bottom nav */
.bottom-nav {
  flex: none; display: flex; gap: 2px; background: var(--ink); padding: 10px 2px 12px;
  position: sticky; bottom: 0; z-index: 10;
}
.nav-cell {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; padding: 4px 2px; background: var(--ink); color: var(--on-dark-muted);
  border: 0;
}
.nav-cell.active { background: var(--accent); color: #fff; }
.nav-cell svg { width: 17px; height: 17px; }
.nav-cell-label { font: 600 10px 'Anek Bangla', sans-serif; text-align: center; }

/* animations */
@keyframes slideIn { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: translateY(0);} }
@keyframes popIn { from { transform: scale(.92);} to { transform: scale(1);} }
.pop { animation: popIn .18s ease-out; }

/* empty/disabled */
.cta-disabled { background: var(--n-300); color: rgba(32,30,29,.55); cursor: not-allowed; }

/* misc */
.hidden { display: none !important; }
.grow { flex: 1; }
.scroll-y { overflow-y: auto; }


/* ============================================================
   ফোনে পুরো পর্দা (২০২৬-০৯-০৩)
   ============================================================
   `.device-shell` / `.device` বানানো হয়েছিল **ডেস্কটপে প্রিভিউ** দেখার
   জন্য — মাঝখানে একটা ফোনের আকারের ফ্রেম, চারপাশে ছায়া, উপরে সাজানো
   "৯:৩০ ●●●●" স্ট্যাটাস বার। আসল ফোনে ওগুলোর কোনো মানে নেই, উল্টো
   ২৪px প্যাডিং + ২px বর্ডার মিলে প্রতি পাশে জায়গা খেয়ে ফেলে। সরু
   পর্দায় ছক আর অনুশীলনীর লাইনে ওই কয়েকটা অক্ষরই পার্থক্য গড়ে।

   ★ ৫৬০px-এর নিচে হলেই ফ্রেম উঠে যায় আর অ্যাপ পুরো পর্দা জুড়ে বসে।
   ৫৬০ বেছেছি যাতে ছোট ট্যাবলেট ও ভাঁজ-খোলা ফোনেও এটাই হয়; ডেস্কটপে
   প্রিভিউ আগের মতোই থাকে।

   ★ 100dvh (100vh নয়): মোবাইল ক্রোমে ঠিকানা-বার লুকোলে 100vh পর্দার
   চেয়ে লম্বা হয়ে যায়, তাই নিচের নেভিগেশন বার কেটে যেত। dvh ওটা
   হিসাবেই ধরে। যে ব্রাউজার dvh চেনে না তার জন্য আগে 100vh রাখা।

   ★ safe-area: iPhone-এর নচ ও নিচের হোম-বারের নিচে যেন লেখা না ঢোকে।
   index.html-এ viewport-fit=cover আগে থেকেই আছে, তাই মানগুলো পাওয়া যায়। */
@media (max-width: 560px) {
  .device-shell { padding: 0; min-height: 100vh; min-height: 100dvh; display: block; }
  .device {
    width: 100%; max-width: none;
    height: 100vh; height: 100dvh; max-height: none;
    border: 0; border-radius: 0; box-shadow: none;
  }
  /* নকল স্ট্যাটাস বার ও নিচের জেসচার-দাগ — ফোনে আসলগুলোই আছে */
  .device .statusbar, .device .gesture-bar { display: none; }

  #appScroll { padding-top: env(safe-area-inset-top); }
  #navSlot { padding-bottom: env(safe-area-inset-bottom); }
}