/* ============================================================================
   learn-german — application UI
   A small, deliberate design system. No build step, no framework.
   ─ tokens ─ base ─ shell ─ components ─ motion ─ utilities ─ views ─ responsive
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&display=swap");

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* neutral ramp */
  --n0:#ffffff;  --n25:#fbfcfd; --n50:#f5f6f8; --n100:#eceef2; --n150:#e3e5ea;
  --n200:#d3d7de; --n300:#b7bcc6; --n400:#8a91a0; --n500:#666d7b; --n600:#4a505c;
  --n700:#343943; --n800:#1f232b; --n900:#12151b;

  /* accent ramp (indigo) */
  --a50:#eef0fd; --a100:#dfe1fb; --a200:#c3c6f7; --a300:#9ea3f0; --a400:#7a7ee8;
  --a500:#5b5bd6; --a600:#4f46e5; --a700:#4338ca; --a800:#372f9e;

  /* status */
  --ok:#0f7a3d; --ok-bg:#e8f6ec; --warn:#a65a12; --warn-bg:#fcf1e0;
  --bad:#c0362c; --bad-bg:#fdecea;

  /* semantic surfaces / text */
  --bg:var(--n50); --bg-2:var(--n25);
  --panel:var(--n0); --panel-2:var(--n50); --panel-3:var(--n100);
  --fg:var(--n900); --fg-2:var(--n600); --fg-3:var(--n500); --fg-4:var(--n400);
  --line:var(--n150); --line-2:var(--n200); --line-strong:var(--n300);
  --accent:var(--a600); --accent-hi:var(--a500); --accent-bg:var(--a50);
  --on-accent:#ffffff;
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  /* elevation */
  --e1:0 1px 2px rgba(15,18,25,.05), 0 1px 1px rgba(15,18,25,.04);
  --e2:0 4px 12px rgba(15,18,25,.06), 0 2px 4px rgba(15,18,25,.04);
  --e3:0 12px 32px rgba(15,18,25,.10), 0 4px 10px rgba(15,18,25,.05);
  --e4:0 28px 64px rgba(15,18,25,.18), 0 8px 24px rgba(15,18,25,.10);

  /* type — fluid, Inter */
  --font:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --fs-11:.6875rem; --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-15:.9375rem;
  --fs-16:1rem; --fs-18:clamp(1.05rem,.98rem + .35vw,1.2rem);
  --fs-22:clamp(1.3rem,1.15rem + .7vw,1.6rem);
  --fs-28:clamp(1.6rem,1.35rem + 1.2vw,2.1rem);
  --fs-40:clamp(2rem,1.5rem + 2.4vw,3rem);

  /* spacing (4pt) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* radius */
  --r1:8px; --r2:12px; --r3:16px; --r4:22px; --r-pill:999px;

  /* motion */
  --dur-1:.12s; --dur-2:.2s; --dur-3:.32s; --dur-4:.5s;
  --ease:cubic-bezier(.2,.7,.3,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --nav-w:244px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
  :root:not([data-theme="light"]) {
    --bg:#0b0d11; --bg-2:#0e1116;
    --panel:#14171d; --panel-2:#191d24; --panel-3:#20242c;
    --fg:#edeff3; --fg-2:#a9afba; --fg-3:#868d99; --fg-4:#5f6673;
    --line:#242932; --line-2:#2f3540; --line-strong:#3c434f;
    --accent:#7c78f0; --accent-hi:#928ef5; --accent-bg:#1c1b31; --on-accent:#ffffff;
    --ok:#4ade80; --ok-bg:#12271b; --warn:#fbbf24; --warn-bg:#2a2011; --bad:#f87171; --bad-bg:#2b1616;
    --e1:0 1px 2px rgba(0,0,0,.5);
    --e2:0 6px 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
    --e3:0 16px 40px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.4);
    --e4:0 32px 72px rgba(0,0,0,.65), 0 10px 28px rgba(0,0,0,.5);
    --ring:0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0b0d11; --bg-2:#0e1116;
  --panel:#14171d; --panel-2:#191d24; --panel-3:#20242c;
  --fg:#edeff3; --fg-2:#a9afba; --fg-3:#868d99; --fg-4:#5f6673;
  --line:#242932; --line-2:#2f3540; --line-strong:#3c434f;
  --accent:#7c78f0; --accent-hi:#928ef5; --accent-bg:#1c1b31; --on-accent:#ffffff;
  --ok:#4ade80; --ok-bg:#12271b; --warn:#fbbf24; --warn-bg:#2a2011; --bad:#f87171; --bad-bg:#2b1616;
  --e1:0 1px 2px rgba(0,0,0,.5);
  --e2:0 6px 18px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --e3:0 16px 40px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.4);
  --e4:0 32px 72px rgba(0,0,0,.65), 0 10px 28px rgba(0,0,0,.5);
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ── base ────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body {
  font-family:var(--font); font-size:var(--fs-15); line-height:1.55; color:var(--fg);
  background:var(--bg); overflow:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"cv05" 1,"cv08" 1,"ss03" 1; font-optical-sizing:auto;
}
h1,h2,h3,h4 { margin:0; font-weight:640; letter-spacing:-.014em; color:var(--fg); }
h2 { font-size:var(--fs-22); letter-spacing:-.02em; }
p { margin:0; }
a { color:var(--accent); text-decoration:none; transition:color var(--dur-1); }
a:hover { color:var(--accent-hi); }
b,strong { font-weight:620; }
small { font-size:var(--fs-12); }
button { font-family:inherit; }
::selection { background:color-mix(in srgb,var(--accent) 24%,transparent); }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:6px; }

/* scrollbars */
* { scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:var(--r-pill); border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--fg-4); background-clip:content-box; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ── shell ───────────────────────────────────────────────────────────────── */
.app { display:grid; grid-template-columns:var(--nav-w) 1fr; height:100dvh; background:var(--bg); }

.sidebar {
  display:flex; flex-direction:column; gap:var(--s1); padding:var(--s5) var(--s3);
  background:var(--panel); border-right:1px solid var(--line); min-width:0;
}
.brand { display:flex; align-items:center; gap:10px; padding:var(--s2) var(--s2) var(--s4); }
.brand .logo {
  width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center;
  color:#fff; font-weight:750; font-size:13px; letter-spacing:.02em;
  background:linear-gradient(145deg,var(--a500),var(--a700)); box-shadow:var(--e1);
}
.brand b { font-size:var(--fs-15); letter-spacing:-.02em; }
.brand small { display:block; color:var(--fg-4); font-size:var(--fs-11); font-weight:500; letter-spacing:0; margin-top:1px; }

.nav { display:flex; flex-direction:column; gap:2px; }
.nav a {
  position:relative; display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:10px; color:var(--fg-3); font-weight:530;
  transition:background var(--dur-1), color var(--dur-1);
}
.nav a svg { width:18px; height:18px; flex:none; opacity:.9; }
.nav a:hover { background:var(--panel-2); color:var(--fg); }
.nav a.on { background:var(--accent-bg); color:var(--accent); font-weight:600; }
.nav a.on::before {
  content:""; position:absolute; left:-11px; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent);
}
.sidebar .spacer { flex:1; }

.usercard {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px;
  border:1px solid var(--line); background:var(--panel-2); cursor:pointer;
  transition:border-color var(--dur-1), background var(--dur-1);
}
.usercard:hover { border-color:var(--line-strong); background:var(--panel-3); }
.avatar {
  width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--accent),var(--accent-hi)); color:var(--on-accent);
  font-weight:680; font-size:var(--fs-12); text-transform:uppercase;
}
.usercard .who { min-width:0; }
.usercard .who b { display:block; font-size:var(--fs-13); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usercard .who span { font-size:var(--fs-11); color:var(--fg-4); text-transform:capitalize; }

.main { min-width:0; overflow-y:auto; scrollbar-gutter:stable; background:var(--bg); }
.topbar {
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s7); min-height:60px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color var(--dur-2);
}
.main.scrolled .topbar { border-bottom-color:var(--line); }
.topbar h1 { font-size:var(--fs-16); font-weight:620; letter-spacing:-.01em; }
.topbar .sp { flex:1; }

.view { max-width:940px; margin:0 auto; padding:var(--s6) var(--s7) var(--s9); }
.view.narrow { max-width:580px; }
.view > * { animation:rise var(--dur-3) var(--ease-out) both; }
.view > *:nth-child(2) { animation-delay:.03s; }
.view > *:nth-child(3) { animation-delay:.06s; }
.view > *:nth-child(4) { animation-delay:.09s; }
.view > *:nth-child(5) { animation-delay:.12s; }
.view > *:nth-child(n+6) { animation-delay:.15s; }

/* ── components ──────────────────────────────────────────────────────────── */
.btn {
  --b:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size:var(--fs-14); font-weight:580; letter-spacing:-.005em;
  padding:9px 16px; border:1px solid var(--b); border-radius:10px;
  background:var(--b); color:var(--on-accent); cursor:pointer; white-space:nowrap;
  transition:transform var(--dur-1) var(--ease), filter var(--dur-1), box-shadow var(--dur-1), background var(--dur-1), border-color var(--dur-1);
  box-shadow:var(--e1);
}
.btn:hover:not(:disabled) { filter:brightness(1.07); box-shadow:var(--e2); }
.btn:active:not(:disabled) { transform:translateY(1px) scale(.995); box-shadow:var(--e1); }
.btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn.ghost { background:var(--panel); color:var(--fg); border-color:var(--line-2); box-shadow:var(--e1); }
.btn.ghost:hover:not(:disabled) { background:var(--panel-2); filter:none; border-color:var(--line-strong); }
.btn.danger { --b:var(--bad); }
.btn.subtle { background:transparent; color:var(--fg-2); border-color:transparent; box-shadow:none; }
.btn.subtle:hover:not(:disabled) { background:var(--panel-2); color:var(--fg); filter:none; }
.btn.sm { font-size:var(--fs-13); padding:6px 11px; border-radius:8px; }
.btn.lg { font-size:var(--fs-15); padding:12px 20px; border-radius:12px; }
.btn.block { width:100%; }
.btn.is-loading { color:transparent !important; pointer-events:none; position:relative; }
.btn.is-loading::after {
  content:""; position:absolute; width:15px; height:15px; border-radius:50%;
  border:2px solid color-mix(in srgb,var(--on-accent) 40%,transparent); border-top-color:var(--on-accent);
  animation:spin .6s linear infinite;
}
.btn.ghost.is-loading::after { border-color:color-mix(in srgb,var(--fg) 25%,transparent); border-top-color:var(--fg); }

.icon-btn {
  width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:9px;
  border:1px solid var(--line-2); background:var(--panel); color:var(--fg-3); cursor:pointer;
  transition:color var(--dur-1), background var(--dur-1), border-color var(--dur-1);
}
.icon-btn:hover { color:var(--fg); background:var(--panel-2); border-color:var(--line-strong); }
.icon-btn svg { width:17px; height:17px; }

.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r3);
  box-shadow:var(--e1); padding:var(--s5);
}
.card + .card { margin-top:var(--s4); }
.card-h { display:flex; align-items:center; gap:10px; margin-bottom:var(--s4); }
.card-h h3 { font-size:var(--fs-12); font-weight:640; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-3); }
.card-h .sp { flex:1; }
.card-h a { font-size:var(--fs-12); font-weight:560; }

.field { display:block; margin-bottom:var(--s4); }
.field > span { display:block; font-size:var(--fs-12); font-weight:580; color:var(--fg-3); margin-bottom:6px; letter-spacing:-.005em; }
.input, .select {
  width:100%; font:inherit; font-size:var(--fs-14); color:var(--fg);
  padding:10px 12px; border:1px solid var(--line-2); border-radius:10px;
  background:var(--panel-2); transition:border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1);
  appearance:none;
}
.select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;
}
.input:focus, .select:focus { outline:none; border-color:var(--accent); background:var(--panel); box-shadow:var(--ring); }
.input::placeholder { color:var(--fg-4); }

.row { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }

.chips { display:flex; gap:7px; flex-wrap:wrap; }
.chip {
  font:inherit; font-size:var(--fs-13); font-weight:530; padding:5px 12px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--panel); color:var(--fg-3); cursor:pointer;
  transition:color var(--dur-1), background var(--dur-1), border-color var(--dur-1), transform var(--dur-1);
}
.chip:hover { color:var(--fg); border-color:var(--line-strong); }
.chip.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

.badge {
  display:inline-block; font-size:var(--fs-11); font-weight:720; letter-spacing:.04em; line-height:1.5;
  padding:1px 6px; border-radius:6px; background:var(--accent-bg); color:var(--accent); text-transform:uppercase;
}
.badge.topic { background:var(--panel-3); color:var(--fg-3); }

.stat { background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r2); padding:13px 14px; text-align:center; }
.stat b { display:block; font-size:var(--fs-22); font-weight:660; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; }
.stat span { font-size:var(--fs-11); color:var(--fg-4); text-transform:uppercase; letter-spacing:.05em; font-weight:560; }
.stat small { display:block; font-size:var(--fs-12); color:var(--fg-4); margin-top:2px; }

.skeleton {
  border-radius:10px; background:
    linear-gradient(90deg, var(--panel-2) 0%, var(--panel-3) 20%, var(--panel-2) 40%);
  background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite;
}

.empty { text-align:center; color:var(--fg-4); padding:var(--s8) var(--s4); }
.empty svg { width:34px; height:34px; opacity:.45; margin-bottom:var(--s2); }

.seg { display:inline-flex; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; }
.seg button {
  border:0; background:transparent; color:var(--fg-3); font:inherit; font-size:var(--fs-13); font-weight:580;
  padding:6px 14px; border-radius:var(--r-pill); cursor:pointer; transition:color var(--dur-1), background var(--dur-1);
}
.seg button.on { background:var(--accent); color:var(--on-accent); box-shadow:var(--e1); }

.bar { position:relative; height:7px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; }
.bar > i { position:absolute; inset:0 auto 0 0; border-radius:var(--r-pill); transition:width var(--dur-3) var(--ease-out); }
.bar .seen { background:color-mix(in srgb,var(--accent) 32%,transparent); }
.bar .known { background:var(--accent); }

/* progress ring — drive with style="--p:73" (percent) and optionally --rc:var(--ok) */
.ring {
  --rc:var(--accent);
  width:8.5rem; height:8.5rem; border-radius:50%; margin:var(--s1) auto var(--s4);
  display:grid; place-items:center;
  background:conic-gradient(var(--rc) calc(var(--p,0) * 1%), var(--line) 0);
  animation:ring-in var(--dur-4) var(--ease-out) both;
}
.ring > span {
  width:6.7rem; height:6.7rem; border-radius:50%; background:var(--panel);
  display:grid; place-items:center; font-size:var(--fs-22); font-weight:700; font-variant-numeric:tabular-nums;
}

/* toasts */
.toast-wrap { position:fixed; top:16px; right:16px; z-index:100; display:flex; flex-direction:column; gap:8px; }
.toast {
  display:flex; align-items:center; gap:9px; max-width:340px;
  background:var(--panel); border:1px solid var(--line-2); border-left:3px solid var(--accent);
  border-radius:11px; box-shadow:var(--e3); padding:11px 14px; font-size:var(--fs-13);
  animation:toast-in var(--dur-3) var(--ease-spring) both;
}
.toast.out { animation:toast-out var(--dur-2) var(--ease) forwards; }
.toast.ok { border-left-color:var(--ok); }
.toast.bad { border-left-color:var(--bad); }
.toast::before {
  content:""; width:6px; height:6px; border-radius:50%; flex:none; background:var(--accent);
}
.toast.ok::before { background:var(--ok); } .toast.bad::before { background:var(--bad); }

/* drawer */
.drawer-bg { position:fixed; inset:0; z-index:60; background:rgba(8,10,14,.5); backdrop-filter:blur(2px); animation:fade var(--dur-2) both; }
.drawer {
  position:fixed; right:0; top:0; bottom:0; z-index:61; width:min(440px,92vw);
  background:var(--panel); border-left:1px solid var(--line-2); box-shadow:var(--e4);
  padding:var(--s6); overflow-y:auto; animation:slide-in var(--dur-3) var(--ease-out) both;
}
.drawer-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s2); }
.drawer .big { font-size:var(--fs-28); font-weight:680; letter-spacing:-.025em; margin:6px 0 2px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:9px 18px; margin-top:var(--s5); font-size:var(--fs-13); }
.kv dt { color:var(--fg-4); }
.kv dd { margin:0; }

/* shortcuts overlay */
.kbd-help { position:fixed; inset:0; z-index:90; display:grid; place-items:center; background:rgba(8,10,14,.55); backdrop-filter:blur(3px); animation:fade var(--dur-2) both; }
.kbd-help .box { width:min(360px,92vw); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r3); box-shadow:var(--e4); padding:var(--s6); animation:rise var(--dur-3) var(--ease-out) both; }
.kbd-help h3 { font-size:var(--fs-14); margin-bottom:var(--s4); }
.kbd-help dl { display:grid; grid-template-columns:1fr auto; gap:10px 16px; margin:0; font-size:var(--fs-13); }
.kbd-help dt { color:var(--fg-2); }
kbd {
  font:inherit; font-size:var(--fs-12); padding:2px 7px; border-radius:6px; border:1px solid var(--line-2);
  border-bottom-width:2px; background:var(--panel-2); color:var(--fg-2); min-width:22px; display:inline-block; text-align:center;
}

/* ── motion ──────────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity:0; transform:translateY(8px); } }
@keyframes fade { from { opacity:0; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes shimmer { to { background-position:-200% 0; } }
@keyframes pop { from { transform:scale(.96); opacity:.4; } }
@keyframes ring-in { from { opacity:0; transform:scale(.92); } }
@keyframes toast-in { from { opacity:0; transform:translateX(16px) scale(.96); } }
@keyframes toast-out { to { opacity:0; transform:translateX(16px); } }
@keyframes slide-in { from { transform:translateX(24px); opacity:.3; } }
@keyframes bar-grow { from { transform:scaleY(.001); } }
@keyframes chip-pop { 40% { transform:scale(1.12); } }

/* ── utilities ───────────────────────────────────────────────────────────── */
.mt-1 { margin-top:var(--s1); } .mt-2 { margin-top:var(--s2); } .mt-3 { margin-top:var(--s3); }
.mt-4 { margin-top:var(--s4); } .mt-5 { margin-top:var(--s5); }
.mb-2 { margin-bottom:var(--s2); } .mb-3 { margin-bottom:var(--s3); }
.muted { color:var(--fg-3); font-size:var(--fs-13); }
.mini { color:var(--fg-4); font-size:var(--fs-12); }
.err-text { color:var(--bad); font-size:var(--fs-13); }
.row-c { display:flex; align-items:center; gap:var(--s2); }
.center { text-align:center; }
.art { color:var(--accent); font-weight:580; }
.seg-full { display:flex; width:100%; }
.seg-full button { flex:1; }
[hidden] { display:none !important; }

/* ── view: login gate ────────────────────────────────────────────────────── */
.gate { min-height:100dvh; display:grid; place-items:center; padding:var(--s5); background:radial-gradient(1200px 600px at 50% -10%, var(--accent-bg), var(--bg) 60%); }
.gate .box { width:100%; max-width:392px; animation:rise var(--dur-4) var(--ease-out) both; }
.gate .brand { justify-content:center; padding-bottom:var(--s6); }
.gate .brand .logo { width:38px; height:38px; font-size:15px; }
.gate .tabs { display:flex; gap:8px; margin-bottom:var(--s4); }
.gate .tabs button {
  flex:1; font:inherit; font-size:var(--fs-13); font-weight:580; padding:9px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--panel-2); color:var(--fg-3); transition:all var(--dur-1);
}
.gate .tabs button.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* ── view: home ──────────────────────────────────────────────────────────── */
.hero {
  position:relative; overflow:hidden; border-radius:var(--r4); padding:var(--s6);
  color:#fff; background:linear-gradient(135deg,var(--a600) 0%,var(--a500) 45%,var(--a400) 100%);
  box-shadow:var(--e2);
}
.hero::after {
  content:""; position:absolute; inset:-40% -10% auto auto; width:60%; aspect-ratio:1;
  background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent);
}
.hero h2 { color:#fff; font-size:var(--fs-22); margin-bottom:4px; }
.hero p { margin:0 0 var(--s5); opacity:.92; font-size:var(--fs-14); max-width:44ch; }
.hero .btn { background:#fff; color:var(--a700); border-color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.hero .btn:hover:not(:disabled) { filter:none; background:#fff; }
.hero .hstats { display:flex; gap:var(--s7); margin-top:var(--s5); position:relative; }
.hero .hstats div b { display:block; font-size:var(--fs-22); font-weight:660; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.hero .hstats div span { font-size:var(--fs-11); opacity:.85; text-transform:uppercase; letter-spacing:.05em; }

/* ── view: study deck ────────────────────────────────────────────────────── */
.deckhead { display:flex; justify-content:space-between; font-size:var(--fs-12); color:var(--fg-3); font-weight:560; margin-bottom:var(--s2); }
.stage { position:relative; height:22rem; margin:var(--s3) 0 var(--s5); touch-action:pan-y; }
.fcard {
  position:absolute; inset:0; border-radius:var(--r3); background:var(--panel);
  border:1px solid var(--line-2); box-shadow:var(--e2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--s6); cursor:pointer; user-select:none;
  transition:transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), box-shadow var(--dur-2);
}
.fcard.peek { transform:scale(.94) translateY(16px); opacity:.5; box-shadow:none; z-index:1; cursor:default; }
.fcard.top { z-index:2; }
.fcard.top:hover { box-shadow:var(--e3); }
.fcard.enter { animation:pop var(--dur-2) var(--ease-out); }
.fcard .side { position:absolute; left:20px; top:16px; font-size:var(--fs-11); letter-spacing:.09em; text-transform:uppercase; color:var(--fg-4); font-weight:720; }
.fcard .tags { position:absolute; right:16px; top:14px; display:flex; gap:5px; }
.fcard .word { font-size:var(--fs-28); font-weight:680; letter-spacing:-.03em; }
.fcard .word .art { color:var(--accent); }
.fcard .gloss { font-size:var(--fs-22); font-weight:600; }
.fcard .sub { margin-top:8px; color:var(--fg-3); font-size:var(--fs-14); }
.fcard .ipa { margin-top:3px; color:var(--fg-4); font-style:italic; font-size:var(--fs-13); }
.fcard .revhint { position:absolute; bottom:16px; left:0; right:0; color:var(--fg-4); font-size:var(--fs-12); }
.stamp { position:absolute; top:22px; padding:3px 12px; border:3px solid; border-radius:10px; font-weight:800; letter-spacing:.08em; opacity:0; transition:opacity .08s; }
.stamp.yes { right:20px; color:var(--ok); border-color:var(--ok); transform:rotate(-12deg); }
.stamp.no { left:20px; color:var(--bad); border-color:var(--bad); transform:rotate(12deg); }
.rate { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rate .flip { grid-column:1/-1; }
.rate .no { --b:var(--bad); background:var(--bad-bg); color:var(--bad); box-shadow:none; }
.rate .yes { --b:var(--ok); background:var(--ok-bg); color:var(--ok); box-shadow:none; }
.rate.locked .no, .rate.locked .yes { opacity:.35; pointer-events:none; }
#d-type .input { font-size:var(--fs-16); padding:12px 14px; }
.fb { margin-top:10px; padding:11px 13px; border-radius:10px; font-size:var(--fs-14); animation:rise var(--dur-2) var(--ease-out) both; }
.fb.ok { background:var(--ok-bg); color:var(--ok); }
.fb.bad { background:var(--bad-bg); color:var(--bad); }
.fbnote { margin-top:5px; font-weight:400; color:var(--fg); font-size:var(--fs-13); }
.echip { display:inline-block; font-size:var(--fs-11); font-weight:720; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:var(--r-pill); margin-left:6px; background:var(--warn-bg); color:var(--warn); }

.sumcol { display:flex; gap:8px; justify-content:center; margin-bottom:var(--s4); }

/* ── view: practice ──────────────────────────────────────────────────────── */
.targets-strip { display:flex; gap:6px; flex-wrap:wrap; }
.targets-strip .chip { cursor:default; }
.targets-strip .chip.done { background:var(--ok-bg); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,transparent); animation:chip-pop var(--dur-3) var(--ease-spring); }
.chat { display:flex; flex-direction:column; gap:8px; height:min(52vh,440px); overflow-y:auto; padding-right:4px; margin-bottom:var(--s3); }
.msg { max-width:82%; padding:9px 13px; border-radius:15px; font-size:var(--fs-14); line-height:1.5; white-space:pre-wrap; word-break:break-word; animation:rise var(--dur-2) var(--ease-out) both; }
.msg.tutor { background:var(--panel-2); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:5px; }
.msg.me { background:var(--accent); color:var(--on-accent); align-self:flex-end; border-bottom-right-radius:5px; }
.msg.typing { color:var(--fg-4); }
.msg.typing::after { content:"···"; letter-spacing:2px; animation:shimmer 1s linear infinite; }
.chat-input { display:flex; gap:8px; }
.chat-input .input { flex:1; }

/* ── view: browse ────────────────────────────────────────────────────────── */
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r2); box-shadow:var(--e1); }
table { width:100%; border-collapse:collapse; background:var(--panel); font-size:var(--fs-13); }
th,td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
td.en { white-space:normal; min-width:15rem; color:var(--fg-3); }
thead th { position:sticky; top:0; background:var(--panel-2); font-size:var(--fs-11); text-transform:uppercase; letter-spacing:.05em; color:var(--fg-4); font-weight:640; z-index:1; }
tbody tr:last-child td { border-bottom:0; }
tr.click { cursor:pointer; transition:background var(--dur-1); }
tr.click:hover td { background:var(--panel-2); }
.rank { color:var(--fg-4); font-variant-numeric:tabular-nums; }
.pager { display:flex; gap:10px; align-items:center; margin-top:var(--s4); color:var(--fg-3); font-size:var(--fs-13); }
.pager span { margin:0 auto; font-variant-numeric:tabular-nums; }

/* ── view: progress / dashboard ──────────────────────────────────────────── */
.kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.spark { display:flex; align-items:flex-end; gap:2px; height:72px; }
.spark > i { flex:1; min-width:0; background:var(--line); border-radius:3px 3px 0 0; display:flex; align-items:flex-end; transition:background var(--dur-1); transform-origin:bottom; animation:bar-grow var(--dur-3) var(--ease-out) both; }
.spark > i:nth-child(2n) { animation-delay:.02s; }
.spark > i.today { outline:1.5px solid var(--accent); outline-offset:1px; }
.spark > i > b { width:100%; background:var(--accent); border-radius:3px 3px 0 0; }
.spark > i:hover { background:var(--line-strong); }
.sparkcap { display:flex; justify-content:space-between; font-size:var(--fs-11); color:var(--fg-4); margin-top:7px; }
.lvlrow { display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto; gap:10px; align-items:center; margin:7px 0; }
.lvlrow.wide { grid-template-columns:6.5rem minmax(0,1fr) auto; }
.lvlrow .nm { font-weight:680; font-size:var(--fs-12); color:var(--fg-3); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lvlrow.wide .nm { text-transform:none; font-size:var(--fs-12); font-weight:560; }
.lvlrow .num { font-size:var(--fs-12); color:var(--fg-4); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lvlrow .num b { color:var(--fg); }
.stack { display:flex; height:16px; border-radius:var(--r-pill); overflow:hidden; background:var(--line); }
.stack > i { transition:width var(--dur-3) var(--ease-out); }
.stack .l { background:color-mix(in srgb,var(--accent) 32%,transparent); }
.stack .y { background:color-mix(in srgb,var(--accent) 66%,transparent); }
.stack .m { background:var(--accent); }
.legend { display:flex; flex-wrap:wrap; gap:5px 16px; font-size:var(--fs-12); color:var(--fg-3); margin-top:10px; }
.legend i { display:inline-block; width:.7rem; height:.7rem; border-radius:3px; margin-right:5px; vertical-align:middle; background:var(--accent); }
.legend i.f { opacity:.32; }
.legend i.y { opacity:.66; }
.fc { display:flex; gap:6px; align-items:flex-end; height:82px; }
.fc > div { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; height:100%; }
.fc .fb2 { width:100%; background:var(--accent); border-radius:3px 3px 0 0; min-height:2px; transform-origin:bottom; animation:bar-grow var(--dur-3) var(--ease-out) both; }
.fc .fb2.over { background:var(--bad); }
.fc b { font-size:var(--fs-13); font-variant-numeric:tabular-nums; }
.fc span { font-size:var(--fs-11); color:var(--fg-4); text-align:center; line-height:1.15; }
.list { list-style:none; margin:0; padding:0; }
.list li { display:flex; gap:10px; align-items:baseline; padding:8px 2px; border-bottom:1px solid var(--line); font-size:var(--fs-13); }
.list li:last-child { border-bottom:0; }
.list .de { font-weight:620; }
.list .en2 { color:var(--fg-3); }
.list .meta { margin-left:auto; color:var(--fg-4); font-size:var(--fs-12); font-variant-numeric:tabular-nums; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .app { grid-template-columns:1fr; }
  .sidebar {
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:40;
    flex-direction:row; gap:2px; padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right:0; border-top:1px solid var(--line); box-shadow:0 -4px 24px rgba(0,0,0,.08);
    background:color-mix(in srgb,var(--panel) 92%,transparent); backdrop-filter:blur(12px);
  }
  .brand, .sidebar .spacer, .usercard .who { display:none; }
  .nav { flex-direction:row; flex:1; justify-content:space-around; }
  .nav a { flex-direction:column; gap:3px; padding:6px 4px; font-size:var(--fs-11); font-weight:560; }
  .nav a.on::before { left:50%; top:auto; bottom:-6px; transform:translateX(-50%); width:20px; height:3px; border-radius:3px; }
  .nav a svg { width:20px; height:20px; }
  .usercard { border:0; background:transparent; padding:6px 8px; }
  .main { padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .topbar { padding:var(--s3) var(--s4); }
  .view { padding:var(--s4) var(--s4) var(--s8); }
  .grid3, .kpis { grid-template-columns:repeat(2,1fr); }
  .hero .hstats { gap:var(--s5); }
}
@media (max-width: 420px) {
  .grid3, .kpis { grid-template-columns:1fr 1fr; }
  .row { grid-template-columns:1fr; }
}