/* The finished look, loaded last. School colours stay (navy, turquoise, orange); everything
   else is tightened: one type pairing, one radius scale, one shadow scale, one easing curve,
   and motion that only answers something you did (changing page, opening, pressing, earning). */

:root {
  --page: #f3f6fa;
  --surface: #ffffff;
  --text: #121a3a;
  --text-2: #4a556f;
  --muted: #7b869d;
  --border: #e2e8f1;
  --grid: #e8edf4;
  --axis: #c8d1df;
  --accent-hover: #2b4192;
  --accent-soft: #e8ecf9;
  --wash: rgba(18, 26, 58, 0.045);
  --shadow: 0 1px 2px rgba(18, 26, 58, 0.05), 0 10px 26px -14px rgba(18, 26, 58, 0.16);
  --shadow-lift: 0 2px 4px rgba(18, 26, 58, 0.05), 0 22px 40px -18px rgba(18, 26, 58, 0.28);
  --shadow-pop: 0 30px 70px -24px rgba(10, 16, 40, 0.45);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --font-body: "DM Sans", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Bricolage Grotesque", "Lato", system-ui, sans-serif;
  interpolate-size: allow-keywords;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #090e20;
    --surface: #131a37;
    --text: #eef2fb;
    --text-2: #aab5cf;
    --muted: #8391ad;
    --border: #232e57;
    --grid: #1c2548;
    --axis: #35437a;
    --accent-hover: #7ad4de;
    --accent-soft: rgba(88, 199, 212, 0.14);
    --wash: rgba(236, 240, 250, 0.055);
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 30px -18px rgba(0, 0, 0, 0.7);
    --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 44px -18px rgba(0, 0, 0, 0.8);
    --shadow-pop: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
  }
}

/* ---------- base ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--axis) transparent; }
body { font: 15px/1.6 var(--font-body); font-optical-sizing: auto; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: var(--font-head); letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: 21px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
p, .lead { text-wrap: pretty; }
.lead { font-size: 16.5px; }
a { transition: color 0.15s; }
:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--marker-soft); }

/* ---------- top bar ---------- */
.topbar { height: 68px; gap: 20px; padding: 0 24px; box-shadow: none; border-bottom: 1px solid var(--border); }
.brand-logo { height: 42px; transition: transform 0.3s var(--spring); }
.brand:hover .brand-logo { transform: scale(1.04) rotate(-1.5deg); }
.brand-name { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.brand-name small { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--muted); font-family: var(--font-body); }
.topbar nav a::after, .nav-settings::after { display: none; }
.topbar nav a, .nav-settings {
  position: relative; z-index: 1; padding: 8px 14px; border-radius: 999px; text-transform: none; letter-spacing: -0.005em;
  font: 600 14.5px/1.3 var(--font-body); color: var(--text-2); transition: color 0.2s;
}
.topbar nav a:hover, .nav-settings:hover { color: var(--text); }
.topbar nav a.active { color: var(--accent); }
.nav-ink {
  position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; pointer-events: none; opacity: 0;
  background: var(--surface); box-shadow: 0 1px 2px rgba(18, 26, 58, 0.1), 0 0 0 1px var(--border);
  transition: transform 0.38s var(--ease), width 0.38s var(--ease), height 0.2s, opacity 0.2s;
}
.nav-settings { padding: 8px 10px; }
.nav-settings:hover { background: var(--wash); }
.nav-settings.active { color: var(--accent); background: var(--accent-soft); }
.nav-settings svg { transition: transform 0.5s var(--ease); }
.nav-settings:hover svg { transform: rotate(60deg); }
@media (min-width: 561px) {
  .topbar nav { position: relative; gap: 2px; padding: 4px; border-radius: 999px; background: var(--wash); }
}
@media (max-width: 860px) {
  .topbar nav a { padding: 8px 10px; }
}
@media (max-width: 560px) {
  .topbar nav a { padding: 10px 2px; font-size: 12px; text-align: center; border-radius: 12px; }
  .nav-ink { background: var(--accent-soft); box-shadow: none; border-radius: 12px; }
  .topbar nav { box-shadow: 0 -8px 24px -16px rgba(10, 16, 40, 0.4); }
}
.side-toggle { border-radius: 12px; transition: border-color 0.15s, background 0.15s, transform 0.12s var(--ease); }
.side-toggle:active { transform: scale(0.94); }
.create-btn { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 18px -10px var(--orange); transition: transform 0.12s var(--ease), filter 0.15s, box-shadow 0.15s; }
.create-btn:hover { transform: translateY(-1px); }
.create-btn:active { transform: scale(0.96); }
.create-btn svg { transition: transform 0.3s var(--spring); }
.create-btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.xp-chip { transition: background 0.15s, transform 0.12s var(--ease); }
.xp-chip:active { transform: scale(0.96); }
.xp-chip.bump { animation: chip-bump 0.6s var(--spring); }
@keyframes chip-bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
.xp-float {
  position: fixed; z-index: 90; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  font: 800 15px/1 var(--font-head); color: var(--xp); text-shadow: 0 1px 0 var(--surface);
  animation: xp-float 1.4s var(--ease) forwards;
}
@keyframes xp-float { 0% { opacity: 0; margin-top: 10px; } 20% { opacity: 1; margin-top: 0; } 100% { opacity: 0; margin-top: -34px; } }
.confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; }

/* ---------- controls ---------- */
button, .btn {
  border-radius: 12px; font-weight: 650; letter-spacing: -0.005em;
  transition: transform 0.12s var(--ease), background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s, opacity 0.15s;
}
button:active:not(:disabled), .btn:active { transform: scale(0.97); }
button.primary, .btn.primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 20px -12px var(--accent); }
button.primary:hover, .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 14px 24px -12px var(--accent); }
button.primary:active:not(:disabled), .btn.primary:active { transform: scale(0.97); }
button.big, .btn.big { border-radius: 14px; }
.stat-row:active:not(:disabled), .exam-row:active:not(:disabled), .ev:active:not(:disabled), .add-card:active:not(:disabled) { transform: none; }
.icon-btn { transition: background 0.15s, color 0.15s, transform 0.12s var(--ease); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn.star.on svg { animation: pop 0.35s var(--spring); }
input[type="text"], input[type="search"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], textarea, select {
  font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--axis); background: var(--surface); color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input[type="password"], input[type="date"], input[type="time"] { width: 100%; }
input[type="text"]:hover, input[type="search"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="date"]:hover, input[type="time"]:hover, textarea:hover, select:hover { border-color: var(--muted); }
input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
input[type="checkbox"]:not(.switch), input[type="radio"] { accent-color: var(--accent); width: 17px; height: 17px; }
input.switch { transition: background 0.2s var(--ease); }
input.switch::after { transition: transform 0.28s var(--spring), width 0.15s; }
input.switch:active::after { width: 24px; }
input.switch:checked:active::after { transform: translateX(14px); }
.pills button { transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s var(--ease); }
.pills button.on { box-shadow: 0 6px 14px -8px var(--marker); }
.chip { font-weight: 650; }
.options label { transition: background 0.15s, border-color 0.15s; }
.options label:has(input:checked) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------- surfaces ---------- */
.card, .sheet { border-radius: 18px; }
.notice { border-radius: 14px; }
:is(.subj-tile, .my-subject, .start-tile, .deck-card, .board-card, .mode-tile, .subject-tile, .pick-tile, .mini-subject, .preset, .exam-row, .fact, .board-tab) {
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s, background 0.2s;
}
:is(.subj-tile, .my-subject, .start-tile, .deck-card, .board-card, .mode-tile, .subject-tile):hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
:is(.subj-tile, .my-subject, .start-tile, .deck-card, .board-card, .mode-tile, .pick-tile, .mini-subject, .preset):active { transform: scale(0.98); }
:is(.my-subject, .subj-tile, .pick-tile, .mini-subject) .subj-badge { transition: transform 0.3s var(--spring); }
:is(.my-subject, .subj-tile, .pick-tile, .mini-subject):hover .subj-badge { transform: scale(1.08) rotate(-4deg); }
.pick-check { transition: background 0.2s, border-color 0.2s, transform 0.3s var(--spring); }
.pick-tile.on .pick-check { transform: scale(1.1); }
.result-row, .paper-row, .agenda-row, .today-row, .side-topic, .topic-check { transition: background 0.15s, border-color 0.15s; }

/* Start tiles and flashcard sets: plain, confident cards (no folded corners or ruled lines). */
.start-tile { border-radius: 18px; padding: 22px; }
.start-tile::after { display: none; }
.start-tile .tile-icon { border-radius: 14px; transition: transform 0.3s var(--spring); }
.start-tile:hover .tile-icon { transform: scale(1.08) rotate(-4deg); }
.start-tile strong { font-weight: 700; letter-spacing: -0.02em; }
.deck-card { border-radius: 18px; background: var(--surface); padding: 18px; }
.deck-card:hover { transform: translateY(-3px); border-color: var(--border); }
.deck-card .title { font-size: 17px; }
/* Long titles shorten with an ellipsis instead of stretching the card past its column. */
.deck-grid > * { min-width: 0; }
.deck-card { min-width: 0; overflow: hidden; }
.deck-top { min-width: 0; }
.deck-top .title { flex: 1; min-width: 0; }
.deck-card .row { flex-wrap: wrap; }

/* Home hero: navy, with one slow-drifting ring. */
.home-hero {
  border-radius: 24px; padding: 36px;
  background: radial-gradient(90% 130% at 100% 0%, #3552b8 0%, rgba(53, 82, 184, 0) 60%), linear-gradient(135deg, #18265c 0%, #213372 55%, #263f8e 100%);
  box-shadow: 0 24px 50px -28px rgba(33, 51, 114, 0.7);
}
.home-hero h1 { font-size: 42px; letter-spacing: -0.04em; }
.home-hero::after { border-color: rgba(88, 199, 212, 0.28); animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-26px, 22px) rotate(20deg); } }
.continue { border-left-width: 4px; }

/* ---------- overlays ---------- */
.modal-back { background: rgba(9, 14, 32, 0.5); backdrop-filter: blur(6px); animation: fade 0.2s ease-out; z-index: 80; }
.modal { border-radius: 22px; padding: 24px; box-shadow: var(--shadow-pop); animation: modal-in 0.32s var(--spring); }
@keyframes fade { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
.menu { border-radius: 14px; box-shadow: var(--shadow-pop); transform-origin: top right; }
.menu:not([hidden]) { animation: menu-in 0.18s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }
.menu-item { border-radius: 10px; transition: background 0.12s, transform 0.12s var(--ease); }
.toast { border-radius: 14px; padding: 12px 20px; box-shadow: var(--shadow-pop); animation: toast-in 0.4s var(--spring); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 18px) scale(0.94); } }
.side-scrim { backdrop-filter: blur(3px); animation: fade 0.2s ease-out; }
.sidebar { animation: side-in 0.3s var(--ease); }
@keyframes side-in { from { transform: translateX(-28px); opacity: 0; } }
.side-tab { transition: padding 0.2s var(--ease), background 0.15s; }
.side-tab:hover { padding-left: 12px; }
.tooltip { border-radius: 12px; box-shadow: var(--shadow-lift); }

/* Dropdown sections open and close smoothly. */
details::details-content { block-size: 0; overflow: clip; transition: block-size 0.32s var(--ease), content-visibility 0.32s allow-discrete; }
details[open]::details-content { block-size: auto; }
summary { transition: background 0.15s; }
.chev { transition: transform 0.3s var(--ease); }

/* ---------- changing page ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
.page-enter > * { animation: rise 0.5s var(--ease) both; }
.page-enter > :nth-child(2) { animation-delay: 0.05s; }
.page-enter > :nth-child(3) { animation-delay: 0.1s; }
.page-enter > :nth-child(4) { animation-delay: 0.15s; }
.page-enter > :nth-child(5) { animation-delay: 0.2s; }
.page-enter > :nth-child(n + 6) { animation-delay: 0.25s; }
.page-enter :is(.my-subjects, .subj-grid, .deck-grid, .board-grid, .start-grid, .tiles, .pick-grid, .mini-subjects, .mode-grid, .facts) > * { animation: pop 0.45s var(--ease) both; animation-delay: calc(0.12s + var(--n, 0) * 0.03s); }
.page-enter :is(.my-subjects, .subj-grid, .deck-grid, .board-grid, .start-grid, .tiles, .pick-grid, .mini-subjects, .mode-grid, .facts) > :nth-child(2) { --n: 1; }
.page-enter :is(.my-subjects, .subj-grid, .deck-grid, .board-grid, .start-grid, .tiles, .pick-grid, .mini-subjects, .mode-grid, .facts) > :nth-child(3) { --n: 2; }
.page-enter :is(.my-subjects, .subj-grid, .deck-grid, .board-grid, .start-grid, .tiles, .pick-grid, .mini-subjects, .mode-grid, .facts) > :nth-child(4) { --n: 3; }
.page-enter :is(.my-subjects, .subj-grid, .deck-grid, .board-grid, .start-grid, .tiles, .pick-grid, .mini-subjects, .mode-grid, .facts) > :nth-child(5) { --n: 4; }
.page-enter :is(.my-subjects, .subj-grid, .deck-grid, .board-grid, .start-grid, .tiles, .pick-grid, .mini-subjects, .mode-grid, .facts) > :nth-child(6) { --n: 5; }
.page-enter :is(.my-subjects, .subj-grid, .deck-grid, .board-grid, .start-grid, .tiles, .pick-grid, .mini-subjects, .mode-grid, .facts) > :nth-child(7) { --n: 6; }
.page-enter :is(.my-subjects, .subj-grid, .deck-grid, .board-grid, .start-grid, .tiles, .pick-grid, .mini-subjects, .mode-grid, .facts) > :nth-child(8) { --n: 7; }
.page-enter :is(.my-subjects, .subj-grid, .deck-grid, .board-grid, .start-grid, .tiles, .pick-grid, .mini-subjects, .mode-grid, .facts) > :nth-child(n + 9) { --n: 8; }
.page-enter :is(.points-bar span, .mini-bar span, .mastery-bar span, .tp-bar span, .topic-row .bar, .spread) { transform-origin: left center; animation: grow-x 0.9s var(--ease) 0.25s both; }
.page-enter :is(.hist-bar, .sb-bar) { transform-origin: bottom center; animation: grow-y 0.8s var(--ease) 0.25s both; }
.page-enter :is(.xp-bar, .cc-right, .cc-wrong) { transform-box: fill-box; transform-origin: bottom center; animation: grow-y 0.8s var(--ease) 0.25s both; }
.page-enter .ring-fill { animation: ring 1s var(--ease) 0.2s both; }
@keyframes ring { from { stroke-dasharray: 0 999; } }

/* Things that appear while you work: quick marks, rating panels, calendar chips. */
.qm:not([hidden]), .rate-why, .notice, .ans-part { animation: rise 0.3s var(--ease); }
.ev { transition: transform 0.15s var(--ease), filter 0.15s; }
.ev:hover { transform: translateX(2px); filter: brightness(1.06); }
.cal-day { transition: background 0.15s; }
.thumb { transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.2s var(--spring); }
.thumb.on { transform: scale(1.08); }
.spinner { border-color: var(--grid); border-top-color: var(--marker); }
.points-bar span, .tp-bar span { transition: width 0.6s var(--ease); }

/* ---------- details of individual pages ---------- */
.page-head { margin-bottom: 28px; }
.section-title { margin-top: 36px; }
.group-title { font-weight: 700; letter-spacing: -0.02em; }
.tile .value, .hero .figure, .points-figure .big, .xp-big, .big-count { font-variant-numeric: tabular-nums; font-weight: 800; }
.hero { border-radius: 22px; }
.ladder-step { transition: transform 0.2s var(--ease); }
.ladder-step.on { transform: translateY(-3px); }
.q-group > summary, .fold > summary { transition: background 0.15s, border-color 0.15s; }
.q-group > summary:hover, .fold > summary:hover { border-color: var(--axis); }
.cal { border-radius: 18px; box-shadow: var(--shadow); }
.side-subject { transition: border-color 0.2s; }
.side-act { transition: border-color 0.15s, color 0.15s, transform 0.12s var(--ease); }
.builder-bar { border-radius: 18px; box-shadow: var(--shadow-lift); }
.board-tab.on { box-shadow: 0 10px 20px -12px var(--accent); }
table tbody tr { transition: background 0.12s; }
table tbody tr:hover { background: var(--wash); }

/* ---------- feedback while things happen ---------- */

/* A page is loading: a thin bar across the very top. */
.route-bar {
  position: fixed; left: 0; top: 0; z-index: 99; height: 3px; width: 100%; pointer-events: none; opacity: 0;
  transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, var(--marker), var(--orange));
}
.route-bar.going { opacity: 1; transform: scaleX(0.82); transition: transform 6s cubic-bezier(0.1, 0.7, 0.1, 1); }
.route-bar.done { opacity: 0; transform: scaleX(1); transition: transform 0.2s var(--ease), opacity 0.3s 0.15s; }

/* The top bar lifts off the page once you scroll. */
.topbar { transition: box-shadow 0.25s var(--ease), border-color 0.25s; }
.topbar.scrolled { box-shadow: 0 10px 30px -18px rgba(10, 16, 40, 0.5); }

/* Toasts say what kind of news they carry. */
.toast { display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); }
.toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--marker); }
.toast.good::before { background: #3ecf8e; }
.toast.error::before { background: #ff6e7f; }
.toast.error { animation: toast-in 0.4s var(--spring), nudge 0.4s 0.35s var(--ease); }
@keyframes nudge { 0%, 100% { margin-left: 0; } 25% { margin-left: -6px; } 60% { margin-left: 5px; } 85% { margin-left: -2px; } }

/* A new level. */
.level-up {
  position: fixed; left: 50%; top: 88px; z-index: 96; transform: translateX(-50%); cursor: pointer;
  display: flex; align-items: center; gap: 16px; padding: 14px 24px 14px 14px; border-radius: 999px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-pop);
  animation: level-in 0.6s var(--spring) both; transition: opacity 0.35s, transform 0.35s var(--ease);
}
.level-up.gone { opacity: 0; transform: translate(-50%, -14px); }
.level-up-ring {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--xp) 0turn, #ffd77a 0.5turn, var(--xp) 1turn); color: #3d2700;
  font: 800 24px/1 var(--font-head); box-shadow: 0 0 0 5px rgba(242, 162, 12, 0.18);
  animation: level-ring 0.9s var(--spring) 0.1s both;
}
.level-up strong { display: block; font: 800 19px/1.2 var(--font-head); letter-spacing: -0.02em; }
.level-up span { color: var(--text-2); font-size: 14px; }
.level-up-ring span { color: inherit; font-size: inherit; }
@keyframes level-in { from { opacity: 0; transform: translate(-50%, -30px) scale(0.9); } }
@keyframes level-ring { from { transform: scale(0.3) rotate(-120deg); } }

/* Dialogs: the buttons stay in reach while the form scrolls. */
.modal > .row:last-child, .modal > form > .row:last-child {
  position: sticky; bottom: -24px; z-index: 2; margin: 14px -24px -24px; padding: 14px 24px 24px;
  background: linear-gradient(to bottom, transparent, var(--surface) 14px);
}

/* Sliders. */
input[type="range"] { accent-color: var(--accent); }
input[type="range"].volume { width: min(220px, 40vw); }

/* Answer options on a paper: each one is a row you can press. */
.options label { border-color: var(--border); padding: 10px 12px; }
.options label:hover { border-color: var(--axis); }
.options label:has(input:checked) { animation: settle 0.3s var(--spring); }
@keyframes settle { 40% { transform: scale(0.985); } }

/* The score line draws itself in. */
.page-enter .chart path[fill="none"], .page-enter svg.line-chart path[fill="none"] { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: draw 1.4s var(--ease) 0.3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Learn and Flashcards, in the same look as the rest ---------- */
.study-root {
  --q-bg: var(--page); --q-card: var(--surface); --q-text: var(--text); --q-text-2: var(--text-2); --q-muted: var(--muted);
  --q-line: var(--border); --q-line-2: var(--axis); --q-hover: var(--marker); --q-blue: var(--accent); --q-link: var(--accent);
  --q-good: #13a36b; --q-bad: #e5484d; --q-learning: #f2a20c;
  --q-shadow: var(--shadow);
}
.study-root button.primary, .study-root .btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); border-radius: 12px; font-weight: 650;
}
.study-root button.primary:hover, .study-root .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.study-root .empty-learn .btn:not(.primary) { border-width: 1px; border-color: var(--axis); border-radius: 12px; }
.study-head { height: 68px; padding: 0 24px; }
.study-title { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; font-size: 16px; }
.mode-switch, .ghost-btn, .study-actions .close { border-width: 1px; border-color: var(--border); border-radius: 12px; box-shadow: 0 1px 2px rgba(18, 26, 58, 0.05); }
.mode-switch:hover, .ghost-btn:hover, .study-actions .close:hover { border-color: var(--axis); }
.mode-ico { color: var(--marker); }
.mode-menu { border-radius: 14px; box-shadow: var(--shadow-pop); transform-origin: top left; animation: menu-in 0.18s var(--ease); }
.mode-menu a { border-radius: 10px; transition: background 0.12s; }
.mode-menu a:hover, .mode-menu a.on { background: var(--wash); }

/* Learn */
.lp-track { height: 10px; background: var(--grid); }
.lp-fill { background: linear-gradient(90deg, var(--marker), var(--q-good)); transition: width 0.6s var(--ease); }
.lp-count { transition: left 0.6s var(--ease); box-shadow: 0 0 0 3px var(--q-bg); }
.learn-card { border-radius: 22px; border: 1px solid var(--border); padding: 28px 34px 30px; animation: card-next 0.4s var(--ease); }
@keyframes card-next { from { opacity: 0; transform: translateX(26px) scale(0.985); } }
.lc-prompt { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.015em; }
.lc-option {
  border-width: 1.5px; border-color: var(--border); border-radius: 14px; min-height: 66px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s var(--ease), box-shadow 0.15s;
}
.lc-option:hover:not(:disabled) { border-color: var(--marker); transform: translateY(-2px); box-shadow: var(--shadow); }
.lc-option:active:not(:disabled) { transform: scale(0.985); }
.lc-num { border-radius: 9px; width: 28px; height: 28px; background: var(--wash); transition: background 0.15s, color 0.15s; }
.lc-option:hover:not(:disabled) .lc-num { background: var(--marker-soft); color: var(--text); }
.lc-option.correct { animation: right 0.45s var(--spring); }
.lc-option.wrong { animation: shake 0.4s var(--ease); }
@keyframes right { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } 88% { transform: translateX(2px); } }
.lc-sub.good, .lc-sub.bad { animation: rise 0.25s var(--ease); }
.lc-reveal, .lc-reveal-note, .lc-ans { border-radius: 14px; border-width: 1.5px; }
.lc-reveal { transition: border-color 0.15s, background 0.15s; }
.lc-reveal.shown { animation: reveal 0.4s var(--ease); }
@keyframes reveal { from { opacity: 0.2; transform: rotateX(-50deg); } }
.lc-ans { animation: rise 0.3s var(--ease); }
.lc-ans.wrong { animation: shake 0.4s var(--ease); }
.study-root input.lc-input { border-width: 1.5px; border-color: var(--axis); border-radius: 14px; background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; }
.study-root input.lc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.study-root input.lc-input.ok { border-color: var(--q-good); box-shadow: 0 0 0 4px var(--q-good-bg); }
.learn-footer { box-shadow: 0 -14px 34px -22px rgba(10, 16, 40, 0.45); border-top-color: var(--border); animation: slide-up 0.3s var(--ease); }
.learn-summary h2, .learn-finish h2, .fc-end h2 { font-family: var(--font-head); letter-spacing: -0.03em; }
.ls-card, .ls-term { border-radius: 16px; }
.ls-term { animation: rise 0.35s var(--ease) both; }
.ls-term:nth-child(2) { animation-delay: 0.04s; }
.ls-term:nth-child(3) { animation-delay: 0.08s; }
.ls-term:nth-child(4) { animation-delay: 0.12s; }
.ls-term:nth-child(5) { animation-delay: 0.16s; }
.ls-term:nth-child(n + 6) { animation-delay: 0.2s; }
.status-pill.m { animation: pop 0.4s var(--spring) 0.2s both; }
.trophy { box-shadow: 0 0 0 10px var(--q-good-bg), 0 18px 34px -16px var(--q-good); animation: trophy 0.7s var(--spring); }
.trophy svg { stroke-dasharray: 30; stroke-dashoffset: 30; animation: tick 0.45s var(--ease) 0.35s forwards; }
@keyframes trophy { from { transform: scale(0.3); opacity: 0; } }
@keyframes tick { to { stroke-dashoffset: 0; } }
.learn-finish h2, .learn-finish p, .finish-actions { animation: rise 0.5s var(--ease) both; }
.learn-finish h2 { animation-delay: 0.25s; }
.learn-finish p { animation-delay: 0.32s; }
.finish-actions { animation-delay: 0.4s; }

/* Flashcards */
.fc-progress { height: 4px; background: var(--grid); }
.fc-progress > div { background: linear-gradient(90deg, var(--marker), var(--accent)); transition: width 0.5s var(--ease); }
.fc-card { animation: card-next 0.35s var(--ease); }
.fc-inner { transition: transform 0.6s cubic-bezier(0.3, 1.25, 0.4, 1); }
.fc-card:active .fc-inner { scale: 0.985; }
.fc-face { border-radius: 24px; border: 1px solid var(--border); box-shadow: var(--shadow-lift); }
.fc-face.back { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--marker) 7%, var(--surface))); }
.fc-card:focus-visible .fc-face { box-shadow: 0 0 0 3px var(--marker); }
.fc-text { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.02em; }
.round-btn { border-width: 1px; border-color: var(--border); box-shadow: var(--shadow); transition: transform 0.15s var(--ease), border-color 0.15s, box-shadow 0.15s, color 0.15s; }
.round-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.round-btn:active:not(:disabled) { transform: scale(0.92); }
.fc-pill b { transition: transform 0.3s var(--spring); }
.fc-end { border-radius: 24px; border: 1px solid var(--border); animation: rise 0.45s var(--ease); }
.fc-ring circle:nth-of-type(2) { animation: ring 1s var(--ease) 0.2s both; }
.fc-tools .toggle.on { color: var(--accent); background: var(--accent-soft); }
@media (max-width: 560px) {
  .learn-card { padding: 20px 18px 22px; border-radius: 18px; }
  .study-head { padding: 0 12px; }
}

/* ---------- small screens ---------- */
/* Medium widths: drop the wordmark and the Settings label before the tabs run into the XP chip. */
@media (max-width: 1260px) {
  .brand .brand-name, .nav-settings span { display: none; }
  .topbar { gap: 14px; }
  .topbar nav a { padding: 8px 11px; }
}
@media (min-width: 561px) {
  .topbar nav { flex-shrink: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .topbar nav a { white-space: nowrap; flex: none; }
}
/* Shorter tab names so all five fit, and no edge tab over the page (the menu button opens the same panel). */
@media (max-width: 1000px) {
  .nav-my { display: none; }
  .topbar nav a { text-transform: capitalize; }
  .side-tab { display: none; }
  .create-btn span { display: none; }
  .create-btn { padding: 9px; }
}
@media (min-width: 561px) and (max-width: 700px) {
  .topbar .xp-chip, .topbar .brand { display: none; }
  .topbar .create-wrap { margin-left: auto; }
}
@media (min-width: 561px) and (max-width: 800px) {
  .topbar nav { padding: 3px; }
  .topbar nav a { padding: 7px 7px; font-size: 13px; letter-spacing: -0.01em; }
  .topbar .xp-chip svg { display: none; }
  .topbar { gap: 8px; }
}
@media (max-width: 860px) {
  .topbar { gap: 12px; padding: 0 12px; height: 64px; }
  /* A paper with no PDF beside it gets the whole height for its questions. */
  .attempt.no-pdf { grid-template-rows: minmax(0, 1fr); }
  .home-hero { padding: 26px 22px; border-radius: 20px; }
  .home-hero h1 { font-size: 32px; }
  h1 { font-size: 30px; }
}
@media (max-width: 560px) {
  .topbar { gap: 10px; justify-content: flex-start; }
  .topbar .xp-chip { margin-left: auto; }
  .topbar nav a { text-transform: capitalize; letter-spacing: 0; }
  .home-hero::after { opacity: 0.45; }
  .level-up { top: 76px; width: max-content; max-width: calc(100vw - 24px); }
  .modal { padding: 20px; border-radius: 20px; }
  .modal > .row:last-child, .modal > form > .row:last-child { bottom: -20px; margin: 14px -20px -20px; padding: 14px 20px 20px; }
}

/* ---------- less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; }
}
/* Loading spinners always spin: they carry information. */
.spinner { animation-duration: 0.8s !important; }
body.no-motion *, body.no-motion *::before, body.no-motion *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; }