/* =====================================================================
   DARB THEME LAYER (v4)
   Replaces refresh.css + ui-polish.css. Loaded last; reads only tokens.css.
   Flat surfaces, one quiet shadow step, no hover jumps.
   Uses logical properties so RTL and LTR share every rule.
   ===================================================================== */

/* ---------- Base ---------- */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--ink);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  letter-spacing: normal;
  line-height: 1.5;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-block-end: 1px solid var(--line);
  transition: background var(--duration-norm) ease, border-color var(--duration-norm) ease;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  flex-shrink: 0;
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  position: relative;
}
.brand-mark::after { background: var(--accent); }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.main-nav a {
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-s);
  color: var(--ink-secondary);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.main-nav a:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.main-nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* "More" dropdown: secondary destinations stay one click away. */
.nav-more { position: relative; }
.nav-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--ink-secondary);
  font: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
}
.nav-more-btn:hover, .nav-more-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.nav-more-btn.is-active { color: var(--accent); }
.nav-more-btn svg { transition: transform var(--duration-fast) ease; }
.nav-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-more-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  min-width: 200px;
  padding: 6px;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lg);
  z-index: 110;
}
.nav-more-panel.open { display: flex; }
.main-nav .nav-more-panel a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-more-panel .nav-mistakes-badge { display: none; }

[dir="rtl"] svg[data-flip-rtl] { transform: scaleX(-1); }

@media (max-width: 859px) {
  /* No backdrop-filter here: it would trap the fixed "More" sheet inside the header. */
  .site-header { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header .wrap {
    min-height: 56px;
    gap: var(--space-2);
  }
  /* On phones the primary links live in the tab bar; its "More" button opens this sheet. */
  .main-nav {
    display: none;
    position: fixed;
    inset-inline: 12px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    top: auto;
    z-index: 95;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    box-shadow: var(--shadow-lg);
  }
  .main-nav.open { display: flex; }
  .main-nav > a, .nav-more-btn { display: none; }
  .nav-more-panel { display: flex; position: static; border: 0; box-shadow: none; padding: 0; min-width: 0; }
  .main-nav .nav-more-panel a { padding: 0.75rem 0.9rem; font-size: 1rem; }
}

@media (max-width: 650px) {
  .site-header .wrap { padding-inline: 12px; padding-block: 6px; gap: 8px; flex-wrap: wrap; }
  .brand { flex-shrink: 0; font-size: 1.1rem; }
  .header-tools { flex: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .header-tools .hide-sm { display: none !important; }
  .header-tools .icon-btn { width: 32px; height: 32px; flex-shrink: 0; }
  .header-tools .lang-switch { flex-shrink: 0; }
  .header-tools .lang-switch button { font-size: 0.78rem; padding: 0.3rem 0.55rem; min-height: 32px; }
  .account-link { font-size: 0.72rem; padding-inline: 8px; }
  .nav-mistakes-btn { padding: 0.3rem 0.6rem !important; font-size: 0.8rem !important; }
}
@media (max-width: 500px) {
  .nav-track-pill { display: none !important; }
}
@media (max-width: 420px) {
  .site-header .wrap { padding-inline: 8px; gap: 6px; }
  .brand { font-size: 1rem; }
  .header-tools { gap: 3px; }
  .header-tools .lang-switch button { font-size: 0.72rem; padding: 0.25rem 0.4rem; min-height: 28px; }
  .account-link { font-size: 0.68rem; padding-inline: 5px; }
}

/* ---------- Mobile tab bar ---------- */
@media (min-width: 860px) {
  .tabbar { display: none !important; }
}
.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-block-start: 1px solid var(--line);
  display: flex;
  justify-content: space-around;
  padding-block: 6px env(safe-area-inset-bottom, 8px);
}
.tabbar a, .tabbar-more {
  border: 0;
  background: transparent;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-s);
  min-width: 48px;
  transition: color var(--duration-fast) ease;
}
.tabbar a.active, .tabbar a[aria-current="page"], .tabbar-more.is-active, .tabbar-more[aria-expanded="true"] { color: var(--accent); }
.tabbar svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] svg { stroke-width: 2.2; }

@media (max-width: 859px) {
  main { padding-block-end: calc(var(--space-7) + 54px) !important; }
}

/* ---------- Cards ---------- */
.card, .q-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
  transition: box-shadow var(--duration-fast) ease, border-color var(--duration-fast) ease;
  position: relative;
  overflow: hidden;
}
a.card:hover, .track-card:hover, .library-question-grid .card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.track-card {
  --track: var(--saat-teal);
  border-block-start: 3px solid var(--track);
  padding: clamp(18px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
}
.track-card.exam-gat { --track: var(--gat-purple); }
.track-card.exam-saat { --track: var(--saat-teal); }

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 44px);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-6);
  align-items: center;
  overflow: hidden;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: var(--space-5); }
  .hero .sheet { display: none; }
}

/* ---------- Home: greeting, one next step, exam choice ---------- */
.hero.home-hero {
  display: block;
  padding: var(--space-5) 0 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.home-hero h1 { font-size: var(--step-4); margin-block-start: 2px; }
.home-hero .daily-notice { margin-top: var(--space-3); }

.home-focus {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}
.home-next { padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: var(--space-3); }
.home-next h2 { font-size: var(--step-2); }
.home-next > p.muted { max-width: 52ch; }
.home-next .btn.primary svg { width: 18px; height: 18px; }
.home-quick { display: flex; flex-direction: column; gap: var(--space-2); padding-block-start: var(--space-3); margin-block-start: var(--space-2); border-block-start: 1px solid var(--line); }

.home-today {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(18px, 3vw, 24px);
  background: var(--surface-2);
  border-radius: var(--radius-l);
}
.home-goal, .home-streak { display: flex; align-items: center; gap: var(--space-3); }
.home-goal > div, .home-streak > div { display: flex; flex-direction: column; }
.home-goal .num, .home-streak .num { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.home-streak > svg { width: 28px; height: 28px; margin-inline: 18px; color: var(--muted-soft); }
.home-streak.on > svg { color: var(--gold); }
.home-progress-link { margin-block-start: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; font-weight: 600; }
.home-progress-link svg { width: 16px; height: 16px; }

.home-exams { margin-block-start: var(--space-6); }
.home-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.home-section-head h2 { font-size: var(--step-2); }
.home-exam-grid { display: grid; gap: var(--space-3); }
.home-exam-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.track-card.home-exam {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-block-start-width: 1px;
  border-block-start-color: var(--line);
  color: var(--ink);
}
.home-exam-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--track) 12%, var(--surface));
  color: var(--track);
}
.home-exam-icon svg { width: 24px; height: 24px; }
.home-exam-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.home-exam-text strong { font-family: var(--font-display); font-size: var(--step-1); }
.home-exam > svg:last-child { color: var(--muted); flex-shrink: 0; }
.home-exam:hover > svg:last-child { color: var(--accent); }

.home-upcoming { margin-block: var(--space-6) var(--space-4); }
.home-upcoming > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--step--1);
  padding: 6px 0;
}
.home-upcoming > summary::-webkit-details-marker { display: none; }
.home-upcoming[open] > summary svg { transform: rotate(180deg); }
.home-upcoming[open] > summary { margin-block-end: var(--space-3); }

@media (max-width: 760px) {
  .home-focus { grid-template-columns: 1fr; }
  .home-today { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .home-progress-link { margin-block-start: 0; width: 100%; }
  .home-exam-grid.two { grid-template-columns: 1fr; }
}

/* ---------- Track switcher ---------- */
.track-switcher-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: 4px 6px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  width: fit-content;
  max-width: 100%;
}
.track-switcher-label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  padding-inline-start: 6px;
}
.track-switcher-btn {
  border: 0;
  background: transparent;
  color: var(--ink-secondary);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.track-switcher-btn:hover { color: var(--ink); }
.track-switcher-btn.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}
.track-switcher-bar { flex-wrap: nowrap; gap: 2px; }

/* ---------- Stats strip ---------- */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}
.strip > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.strip .val {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.strip .lbl {
  font-size: var(--step--2);
  color: var(--muted);
  font-weight: 600;
}

/* ---------- Today panel ---------- */
.today {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: clamp(20px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}
@media (max-width: 768px) {
  .today { grid-template-columns: 1fr; }
}
.today-stats {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}
.goal {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 16px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.goal .num {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-m);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
  min-height: 44px;
}
.btn:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}
.btn:active { transform: scale(0.98); }
.btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: none;
}
.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

/* ---------- Answer options ---------- */
.opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 18px;
  min-height: 54px;
  border-radius: var(--radius-m);
  border: 1.5px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
  user-select: none;
}
.opt:hover:not([disabled]) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.opt[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.opt .bubble {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.opt[aria-checked="true"] .bubble {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.opt.correct { border-color: var(--good); background: var(--good-soft); }
.opt.correct .bubble { background: var(--good); border-color: var(--good); color: var(--surface); }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt.wrong .bubble { background: var(--bad); border-color: var(--bad); color: var(--surface); }

/* Keep answer diagrams readable inside the choice's flexible content column. */
.opt > span:last-child:has(.question-upload-image) { flex: 1; min-width: 0; }
.opt .question-upload-image { width: auto !important; max-width: min(100%, 24rem) !important; max-height: 12rem !important; margin-inline: 0 !important; }

/* ---------- Practice setup: numbered steps ---------- */
.practice-setup { max-width: 52rem; }
.practice-steps { padding: clamp(18px, 3vw, 28px); display: flex; flex-direction: column; gap: var(--space-5); }
.practice-step { display: flex; flex-direction: column; gap: var(--space-3); }
.practice-step + .practice-step { padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); }
.practice-step-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.practice-step-head h2 { font-size: var(--step-1); }
.step-num {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-self: center;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  border: 1px solid var(--line);
  width: fit-content;
  max-width: 100%;
}
.seg-btn {
  border: 0;
  background: transparent;
  color: var(--ink-secondary);
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  min-height: 40px;
  border-radius: var(--radius-s);
  cursor: pointer;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-xs); }

.chip-count { color: var(--muted); font-size: 0.8em; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip-count { color: inherit; opacity: 0.8; }
.chip-mastery { font-size: 0.75em; font-weight: 700; color: var(--good); }

.practice-more { border-block-start: 1px solid var(--line); padding-block-start: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.practice-more > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-secondary);
  width: fit-content;
}
.practice-more > summary::-webkit-details-marker { display: none; }
.practice-more[open] > summary { margin-block-end: var(--space-4); }
.practice-more[open] > summary svg { transform: rotate(180deg); }
.practice-more .field + .form-grid { margin-block-start: var(--space-4); }

.practice-go { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-block-start: var(--space-2); }
.practice-go .btn.primary { min-width: 12rem; }
.practice-go .btn svg { width: 18px; height: 18px; }

/* ---------- Question screen ---------- */
.q-screen { max-width: 48rem; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.q-count { color: var(--muted); font-size: var(--step--1); }
.q-count strong { color: var(--ink); }
.q-top .timer { margin-inline-start: auto; font-size: 1rem; background: var(--surface-2); color: var(--ink); }
.q-screen .dots span { height: 4px; background: var(--line-strong); }
.q-screen .dots span.cur { background: var(--accent); }

.q-screen .q-card { padding: clamp(18px, 3vw, 28px); box-shadow: var(--shadow); }
.q-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.q-meta .bookmark-btn { margin-inline-start: auto; width: 36px; height: 36px; color: var(--muted); }
.q-meta .bookmark-btn svg { width: 18px; height: 18px; }
.q-meta .bookmark-btn.active { color: var(--gold); border-color: var(--gold); }
.q-meta .bookmark-btn.active svg { fill: currentColor; }
.q-screen .q-text { font-size: var(--step-1); line-height: 1.85; }

.q-hint-btn {
  align-self: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--step--1);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  padding: 6px 10px;
}
.q-hint-btn:hover { color: var(--accent); }

.q-feedback {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-m);
  border-inline-start: 4px solid var(--info);
  background: var(--info-soft);
  line-height: 1.8;
}
.q-feedback.good { border-inline-start-color: var(--good); background: var(--good-soft); }
.q-feedback.bad { border-inline-start-color: var(--bad); background: var(--bad-soft); }
.q-feedback > strong { font-family: var(--font-display); }
.q-feedback.good > strong { color: var(--good); }
.q-feedback.bad > strong { color: var(--bad); }

/* Next step stays reachable without scrolling past long explanations. */
.pq-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--glass-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
}
.pq-actions .btn.primary { min-width: 9rem; }
.pq-actions .btn svg { width: 18px; height: 18px; }
.q-keys { text-align: center; }
@media (max-width: 859px) {
  .pq-actions { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; padding: var(--space-2); gap: var(--space-2); }
  .pq-actions .btn.ghost { padding-inline: 0.75rem; font-size: 0.85rem; }
  .pq-actions .btn.primary { flex: 1; min-width: 0; }
}

/* ---------- Inputs ---------- */
.input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }
.media-dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.media-dropzone input[type=file] { margin-block: 0.5rem; }

/* ---------- Daily discovery ---------- */
[data-daily-notice]:empty { display: none; }
.daily-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-top: 8px;
  border: 1px solid var(--line);
  background: var(--gold-soft);
  border-radius: var(--radius-m);
  max-width: 60ch;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.65;
}
.daily-notice strong { font-size: 0.75rem; color: var(--gold); }
.daily-notice p { margin: 4px 0 0; color: inherit; font-size: inherit; line-height: 1.65; }
.daily-notice-icon { color: var(--gold); font-size: 1.1rem; flex-shrink: 0; }

.daily-discovery { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.daily-discovery > h2 { margin: 0; }
.daily-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 24px;
  box-shadow: var(--shadow);
  border-block-start: 3px solid var(--gat-purple);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.daily-saat { border-block-start-color: var(--accent); }
.daily-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); }
.daily-meta > span { font-weight: 700; color: var(--accent); }
.daily-card h3 { font-size: 1.25rem; margin: 0; }
.daily-card > p { margin: 0; line-height: 1.85; }
.daily-card .eyebrow { font-size: 0.72rem; color: var(--muted); }
.daily-hint { background: var(--accent-soft); border-radius: var(--radius-m); padding: 16px; line-height: 1.8; margin-top: auto; }
.daily-hint p { margin: 7px 0; }
.daily-hint summary { color: var(--accent); cursor: pointer; font-weight: 600; min-height: 30px; }
.daily-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 0.8rem; padding-top: 6px; }
.daily-links a { color: var(--accent); text-underline-offset: 4px; }
.daily-links a:last-child { color: var(--muted); }
@media (max-width: 650px) { .daily-card { padding: 20px; } }

/* ---------- Pagination ---------- */
.question-pagination { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-block: 24px; }
.question-pagination .row { justify-content: center; gap: 7px; }
.question-pagination .btn { min-width: 40px; }
.question-pagination .btn[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.page-position { color: var(--muted); font-size: 0.9rem; font-weight: 600; }

/* ---------- Accounts ---------- */
.account-page { max-width: 620px; margin-inline: auto; }
.account-page .field { display: flex; flex-direction: column; gap: 8px; }
.account-link { white-space: nowrap; }
.student-card { color: var(--ink); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 10px; text-align: start; }
.student-card:hover { border-color: var(--accent); }
.activity-json { max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; direction: ltr; text-align: left; }

/* ---------- Library ---------- */
.library-tabs { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-l); padding: 6px; }
.library-filters { background: var(--surface); border-radius: var(--radius-l); }
.library-question-grid .card h3 { line-height: 1.8; }

/* ---------- Question report dialog ---------- */
/* Small flag icon on each question card; opens the report form. */
.question-report-btn { width: 36px; height: 36px; flex-shrink: 0; color: var(--muted); }
.question-report-btn svg { width: 18px; height: 18px; }
.question-report-btn:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.question-report-link {
  align-self: auto;
  width: fit-content;
  margin-inline-end: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
}
.question-report-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.question-report-link:hover { color: var(--bad); border-color: var(--bad); border-style: solid; background: var(--bad-soft); }
.q-head-tools { display: inline-flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.report-kinds { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.report-kinds legend { margin-block-end: 6px; }
.report-kind { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); cursor: pointer; }
.report-kind:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.report-kind input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.question-report-dialog {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 28px;
  width: min(94vw, 540px);
  box-shadow: var(--shadow-lg);
}
.question-report-dialog::backdrop { background: rgba(14, 21, 19, 0.55); }
.question-report-dialog h2 { margin: 0; }
.question-report-dialog .field { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Gamification ---------- */
.gamification-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(18px, 3vw, 24px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}
.gamification-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.level-info { display: flex; align-items: center; gap: var(--space-3); min-width: 220px; }
.level-icon {
  font-size: 1.8rem;
  line-height: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-m);
  background: var(--gold-soft);
}
.level-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.level-rank { font-size: 0.9rem; font-weight: 600; color: var(--gold); }
.xp-bar-wrap { width: 160px; height: 8px; border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; margin-block: 4px; }
.xp-bar-fill { height: 100%; border-radius: inherit; background: var(--gold); transition: width 0.4s var(--ease-smooth); }

.heatmap-container { display: flex; flex-direction: column; align-items: flex-end; }
[dir="rtl"] .heatmap-container { align-items: flex-start; }
.heatmap-week { display: flex; gap: 6px; }
.heatmap-day { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.heat-box { width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.heatmap-day.heat-1 .heat-box { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); border-color: transparent; }
.heatmap-day.heat-2 .heat-box { background: color-mix(in srgb, var(--accent) 65%, var(--surface)); border-color: transparent; }
.heatmap-day.heat-3 .heat-box { background: var(--accent); border-color: transparent; }
.heat-label { font-size: 0.65rem; color: var(--muted); font-weight: 600; }

.badges-row { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); }
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
}
.badge-pill.unlocked { background: var(--gold-soft); border-color: transparent; color: var(--ink); }
.badge-pill.locked { opacity: 0.55; filter: grayscale(1); }

@keyframes darb-confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
}

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  body { background: white; }
  .question-report-btn, .question-report-link, .question-report-dialog { display: none !important; }
}

/* ---------- Mock exam ---------- */
/* .card's position:relative cancelled the navigator's sticky and shifted it 76px down. */
.card.navigator { position: sticky; overflow: visible; }
.nav-cell { min-height: 0; font-family: var(--font-body); }
.q-num { font-family: var(--font-body); font-size: var(--step--1); }
.exam-bar .sec small { opacity: 0.75; }

/* ---------- SAAT overview ---------- */
.saat-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.saat-subjects .track-card h3 { font-size: var(--step-1); }
@media (max-width: 760px) { .saat-overview { grid-template-columns: 1fr; } }

/* ---------- Question bank ---------- */
.library-hero { background: var(--brand-deep); }
.library-hero h1, .library-hero h2 { color: #fff; }
a.subject-tile { text-decoration: none; color: var(--ink); }
a.subject-tile:hover { transform: none; }
.library-tabs a { text-decoration: none; }
@media (max-width: 600px) {
  .exam-bar .wrap { gap: 4px 10px; }
  .exam-bar .sec { flex-basis: 100%; }
  .exam-bar .timer { font-size: 1.1rem; }
  .exam-bar .lang-switch button { min-height: 30px; padding: 0.2rem 0.55rem; font-size: 0.75rem; }
}