/* Deutsch lernen — shared design system
   Aligns with landing: Schwarz · Rot · Gold, sharp type. */

:root{
  --ink:#0B0B0C;
  --ink-soft:#1A1A1D;
  --paper:#F3F1EC;
  --paper-2:#EDEAE3;
  --card:rgba(255,255,255,.92);
  --card-solid:#FFFFFF;
  --muted:#5C5A55;
  --line:rgba(11,11,12,.10);
  --line-strong:rgba(11,11,12,.16);
  --soft:#E8E5DE;
  --signal:#F5C518;
  --signal-ink:#1A1408;
  --coral:#E30613;
  --coral-deep:#B80510;
  --coral-soft:#FCE8EA;
  --sky:#2563EB;
  --sky-soft:#E8F0FF;
  --teal:#0F7A6A;
  --teal-soft:#D8F0EB;
  --der:#2F6FE0; --die:#DD1E2E; --das:#159B5A;
  --der-bg:#E8F0FF; --die-bg:#FCE8EA; --das-bg:#E4F7EC;
  --ok:#0F7A6A; --bad:#DD1E2E; --focus:#DD1E2E;
  --board:#0B0B0C; --board-line:#2A2A2E; --board-ink:#FFFFFF; --board-muted:#9A9A9E;
  --r-s:6px; --r-m:10px; --r-l:14px; --r-xl:20px;
  --space:8px;
  --f-display:"Archivo","Source Sans 3",system-ui,sans-serif;
  --f-body:"Source Sans 3",system-ui,sans-serif;
  --f-cond:"Barlow Condensed","Archivo",system-ui,sans-serif;
  --shadow:0 4px 18px rgba(11,11,12,.06);
  --shadow-lg:0 20px 50px rgba(11,11,12,.12);
  --shadow-glow:0 10px 28px rgba(221,30,46,.25);
  --bg:var(--paper);
  --surface:var(--card-solid);
  --glass:blur(12px) saturate(1.1);
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E8EEF6; --ink-soft:#C5D0E0; --paper:#070B14; --paper-2:#0C1220;
    --card:rgba(18,26,42,.88); --card-solid:#121A2A; --muted:#93A4BB;
    --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
    --soft:#1A2438; --signal:#F5C518; --coral:#FF7A66; --coral-deep:#FF5C45;
    --coral-soft:#3A1F1C; --sky:#6B9BFF; --sky-soft:#1A2744;
    --teal:#3DDBB8; --teal-soft:#14352E;
    --der:#6FA0F0; --die:#F07A8E; --das:#5CC98A;
    --der-bg:#1B2B45; --die-bg:#3A1D25; --das-bg:#17352A;
    --ok:#3DDBB8; --bad:#F07A8E; --focus:#FF7A66;
    --board:#050A12; --board-line:#1A2E4A; --board-muted:#8FA6C4;
    --bg:var(--paper); --surface:var(--card-solid);
    --shadow:0 8px 28px rgba(0,0,0,.4);
    --shadow-lg:0 24px 64px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#E8EEF6; --ink-soft:#C5D0E0; --paper:#070B14; --paper-2:#0C1220;
  --card:rgba(18,26,42,.88); --card-solid:#121A2A; --muted:#93A4BB;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --soft:#1A2438; --signal:#F5C518; --coral:#FF7A66; --coral-deep:#FF5C45;
  --coral-soft:#3A1F1C; --sky:#6B9BFF; --sky-soft:#1A2744;
  --teal:#3DDBB8; --teal-soft:#14352E;
  --der:#6FA0F0; --die:#F07A8E; --das:#5CC98A;
  --der-bg:#1B2B45; --die-bg:#3A1D25; --das-bg:#17352A;
  --ok:#3DDBB8; --bad:#F07A8E; --focus:#FF7A66;
  --board:#050A12; --board-line:#1A2E4A; --board-muted:#8FA6C4;
  --bg:var(--paper); --surface:var(--card-solid);
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px); scroll-behavior:smooth; }
html,body{ margin:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font:400 16.5px/1.55 var(--f-body);
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--sky); text-underline-offset:3px; }
button,input,textarea,select{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid color-mix(in srgb, var(--coral) 55%, transparent); outline-offset:2px; }
h1,h2,h3,h4{ font-family:var(--f-display); line-height:1.08; margin:0; letter-spacing:-.02em; }
h1{ font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800; }
h2{ font-size:clamp(1.7rem,3.2vw,2.35rem); font-weight:700; }
h3{ font-size:1.28rem; font-weight:700; letter-spacing:-.01em; }
p{ margin:.5em 0; }
.muted{ color:var(--muted); }
.small{ font-size:.88rem; }
.hidden{ display:none!important; }
.container{ width:min(1140px,100% - 36px); margin-inline:auto; }
.container-sm{ width:min(780px,100% - 36px); margin-inline:auto; }

/* ——— buttons ——— */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line-strong); background:var(--card-solid); color:var(--ink);
  padding:11px 18px; border-radius:6px; cursor:pointer;
  text-decoration:none; font-weight:600; font-size:.95rem; min-height:46px;
  transition:transform .15s var(--ease), box-shadow .15s, background .15s, border-color .15s, filter .15s;
  box-shadow:var(--shadow);
}
.btn:hover{ transform:translateY(-1px); border-color:var(--ink-soft); }
.btn:active{ transform:translateY(0); }
.btn.primary{
  background:var(--coral); color:#fff; border-color:transparent; box-shadow:var(--shadow-glow);
}
.btn.primary:hover{ background:var(--coral-deep); filter:none; }
.btn.ink{
  background:var(--ink); color:#fff; border-color:transparent;
}
.btn.ink:hover{ background:var(--ink-soft); filter:none; }
.btn.ghost{ background:transparent; box-shadow:none; border-color:transparent; }
.btn.ghost:hover{ background:var(--soft); }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.45; cursor:default; transform:none; }
.btn.no{ border-color:var(--bad); color:var(--bad); background:var(--die-bg); box-shadow:none; }
.btn.yes{ border-color:var(--ok); color:var(--ok); background:var(--teal-soft); box-shadow:none; }
.btn.sm{ min-height:36px; padding:6px 14px; font-size:.86rem; }

/* ——— cards ——— */
.card{
  background:var(--card);
  backdrop-filter:var(--glass);
  -webkit-backdrop-filter:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:20px;
  box-shadow:var(--shadow);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.card.flat{ box-shadow:none; background:var(--card-solid); }
.card.lift:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.stack>*+*{ margin-top:16px; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spread{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:640px){
  .grid.g3{ grid-template-columns:repeat(3,1fr); }
  .grid.g4{ grid-template-columns:repeat(4,1fr); }
}
.pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--card-solid); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px; font-weight:600; font-size:.88rem; white-space:nowrap;
}
.pill.signal{ background:var(--signal); color:var(--signal-ink); border-color:transparent; }
.pill.teal{ background:var(--teal-soft); color:var(--teal); border-color:transparent; }
.pill.coral{ background:var(--coral-soft); color:var(--coral-deep); border-color:transparent; }
.bar{ height:7px; background:var(--soft); border-radius:99px; overflow:hidden; margin-top:10px; }
.bar i{
  display:block; height:100%; border-radius:99px; transition:width .45s var(--ease);
  background:linear-gradient(90deg, var(--teal), var(--sky));
}
.badge{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--f-cond); font-weight:600; font-size:.95rem;
  padding:3px 10px; border-radius:999px; background:var(--soft); color:var(--muted);
}
.badge.lock{ background:var(--soft); }
.badge.open{ background:var(--teal-soft); color:var(--teal); }

/* ——— modern form fields ——— */
.field{
  position:relative;
  margin-top:6px;
}
.field + .field{ margin-top:14px; }
.field .inp,
.inp{
  width:100%;
  padding:16px 16px;
  border:1.5px solid var(--line-strong);
  border-radius:14px;
  background:var(--card-solid);
  font-size:1.02rem;
  font-weight:500;
  transition:border-color .2s, box-shadow .2s, background .2s;
  appearance:none;
}
.field.float .inp{ padding-top:22px; padding-bottom:10px; }
.field.float .lbl-float{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-weight:500; font-size:1rem;
  pointer-events:none; transition:all .18s var(--ease);
  background:transparent; padding:0 2px;
}
.field.float .inp:focus ~ .lbl-float,
.field.float .inp:not(:placeholder-shown) ~ .lbl-float,
.field.float .inp.has-value ~ .lbl-float{
  top:11px; transform:none; font-size:.72rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--coral); font-weight:700;
}
.inp:focus, .field .inp:focus{
  border-color:var(--coral);
  outline:none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--coral) 18%, transparent);
}
.inp::placeholder{ color:color-mix(in srgb, var(--muted) 70%, transparent); }
textarea.inp{ min-height:140px; resize:vertical; line-height:1.55; }
.lbl{
  display:block; font-weight:700; font-size:.78rem; margin:14px 0 7px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}
select.inp{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235B6B82' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;
}
.field-ok{ border-color:var(--ok)!important; }
.field-no{ border-color:var(--bad)!important; }
.form-card{
  max-width:440px; margin:0 auto; padding:28px 26px 30px;
  background:var(--card-solid); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
}
.form-card h2{ margin-bottom:6px; }
.form-hint{ color:var(--muted); font-size:.92rem; margin-bottom:18px; }
.form-actions{ margin-top:18px; display:grid; gap:10px; }
.form-error{
  margin-top:12px; padding:10px 12px; border-radius:12px;
  background:var(--die-bg); color:var(--bad); font-size:.92rem; font-weight:600;
}

/* ——— data tables ——— */
.table-wrap{
  overflow:auto; border:1px solid var(--line); border-radius:var(--r-l);
  background:var(--card-solid); box-shadow:var(--shadow);
}
.table, table.table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:.92rem; min-width:640px;
}
.table th, .table td, table.table th, table.table td{
  text-align:left; padding:13px 16px; vertical-align:middle;
  border-bottom:1px solid var(--line);
}
.table th, table.table th{
  position:sticky; top:0; z-index:1;
  font-family:var(--f-body); font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  background:color-mix(in srgb, var(--soft) 85%, var(--card-solid));
  backdrop-filter:blur(8px);
}
.table tbody tr, table.table tbody tr{
  transition:background .15s;
}
.table tbody tr:hover, table.table tbody tr:hover{
  background:color-mix(in srgb, var(--sky-soft) 55%, transparent);
}
.table tbody tr:last-child td, table.table tbody tr:last-child td{ border-bottom:0; }
.table .actions{ display:flex; flex-wrap:wrap; gap:6px; }
.status-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700;
  background:var(--soft); color:var(--muted);
}
.status-chip.ok{ background:var(--teal-soft); color:var(--teal); }
.status-chip.warn{ background:#FFF3D6; color:#9A6B00; }
.status-chip.bad{ background:var(--die-bg); color:var(--bad); }
.status-chip.info{ background:var(--sky-soft); color:var(--sky); }

/* ——— departure board ——— */
.board{
  background:linear-gradient(165deg, #0A1628 0%, #07111F 45%, #12243C 100%);
  color:var(--board-ink); border-radius:var(--r-l); overflow:hidden;
  font-family:var(--f-cond); box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.06);
  position:relative;
}
.board::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 200px at 80% 0%, rgba(242,183,5,.12), transparent 60%);
}
.board-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:16px 18px 12px; border-bottom:2px solid var(--signal); gap:10px; flex-wrap:wrap;
  position:relative;
}
.board-head h2{ font-family:var(--f-cond); font-size:1.75rem; font-weight:700; color:#fff; letter-spacing:.02em; }
.board-head .clock{ font-size:1.55rem; font-weight:600; color:var(--signal); font-variant-numeric:tabular-nums; }
.board-cols,.board-row{ display:grid; grid-template-columns:62px 1fr 92px 96px; gap:8px; align-items:center; padding:10px 18px; position:relative; }
.board-cols{ color:var(--board-muted); font-size:.95rem; font-weight:500; border-bottom:1px solid var(--board-line); padding-top:6px; padding-bottom:6px; }
.board-row{ border-bottom:1px solid var(--board-line); color:#fff; text-decoration:none; font-size:1.18rem; font-weight:500; transition:background .15s; }
.board-row:last-child{ border-bottom:0; }
a.board-row:hover{ background:rgba(255,255,255,.06); }
.board-row .t{ font-variant-numeric:tabular-nums; color:var(--board-muted); }
.board-row .dest{ font-weight:600; line-height:1.2; }
.board-row .dest small{ display:block; font-family:var(--f-body); font-weight:400; font-size:.82rem; color:var(--board-muted); }
.board-row .gl{ font-size:1rem; color:var(--board-muted); }
.board-row .st{ font-size:1rem; font-weight:600; color:var(--signal); }
.board-row.done .dest{ color:var(--board-muted); text-decoration:line-through; text-decoration-thickness:1px; }
.board-row.done .st{ color:#7EE2A8; }
.board-foot{ padding:12px 18px 16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-family:var(--f-body); font-size:.92rem; color:var(--board-muted); }
.board-foot button{ background:transparent; border:1px solid var(--board-line); color:#fff; border-radius:999px; padding:6px 14px; cursor:pointer; }
.board-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px 16px 18px; }
.board-pick button{
  background:rgba(255,255,255,.06); border:1px solid var(--board-line); color:#fff;
  border-radius:var(--r-m); padding:14px 10px; cursor:pointer; text-align:left; font-family:var(--f-cond);
  transition:background .2s, transform .2s var(--ease);
}
.board-pick button:hover{ background:rgba(242,183,5,.12); transform:translateY(-2px); }
.board-pick button b{ display:block; font-size:1.7rem; color:var(--signal); font-weight:700; line-height:1; }
.board-pick button span{ font-size:1rem; }
@media (max-width:520px){
  .board-cols,.board-row{ grid-template-columns:50px 1fr 78px; }
  .board-cols .c-gl,.board-row .gl{ display:none; }
  .board-row{ font-size:1.08rem; }
  .board-pick{ grid-template-columns:1fr; }
}

/* toast */
.toast{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 22px);
  transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:999px; font-weight:600; z-index:50;
  max-width:92vw; text-align:center; box-shadow:var(--shadow-lg);
}

/* ——— landing ——— */
.site-nav{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  border-bottom:1px solid var(--line);
}
.site-nav .inner{
  width:min(1140px,100% - 36px); margin-inline:auto;
  display:flex; align-items:center; gap:16px; padding:12px 0; min-height:68px;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
  font-family:var(--f-display); font-weight:800; font-size:1.28rem; letter-spacing:-.02em;
}
.brand .mark{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg, var(--ink) 0%, #1A3A66 100%);
  color:var(--signal); display:grid; place-items:center; font-weight:800; font-size:1.15rem;
  box-shadow:0 6px 16px rgba(10,22,40,.25);
}
.nav-links{ display:flex; gap:8px; margin-left:auto; align-items:center; }
.nav-links a:not(.btn){
  text-decoration:none; color:var(--muted); font-weight:600; font-size:.92rem;
  padding:8px 12px; border-radius:999px; transition:color .15s, background .15s;
}
.nav-links a:not(.btn):hover{ color:var(--ink); background:var(--soft); }
.nav-toggle{ display:none; margin-left:auto; }
@media (max-width:820px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--card-solid); border-bottom:1px solid var(--line); padding:8px 16px 16px;
    box-shadow:var(--shadow-lg);
  }
  .nav-links.open{ display:flex; }
  .nav-links a:not(.btn){ padding:12px 8px; border-radius:10px; }
  .nav-links .btn{ margin-top:8px; }
}

.hero{
  padding:56px 0 40px; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto;
  height:70%; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(61,126,255,.18), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255,92,69,.16), transparent 45%);
  animation:aurora 12s ease-in-out infinite alternate;
}
@keyframes aurora{
  from{ transform:translateY(0) scale(1); opacity:.9; }
  to{ transform:translateY(18px) scale(1.05); opacity:1; }
}
.hero-grid{ display:grid; gap:36px; align-items:center; position:relative; }
@media (min-width:960px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:48px; } }
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-weight:700; color:var(--teal);
  letter-spacing:.08em; text-transform:uppercase; font-size:.78rem;
  background:var(--teal-soft); padding:6px 12px; border-radius:999px; margin-bottom:14px;
}
.hero h1{
  font-family:var(--f-display); max-width:14ch;
  background:linear-gradient(135deg, var(--ink) 30%, #2A4A7A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root[data-theme="dark"] .hero h1,
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero h1{ color:var(--ink); background:none; -webkit-background-clip:unset; }
}
.hero p.lead{ font-size:1.12rem; color:var(--muted); max-width:40ch; line-height:1.65; }
.hero-board-wrap{
  position:relative;
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
.hero-board-wrap::after{
  content:""; position:absolute; inset:auto 8% -18px; height:40px;
  background:radial-gradient(ellipse, rgba(10,22,40,.22), transparent 70%);
  filter:blur(8px); z-index:-1;
}

.proof{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:8px 0 48px; }
@media (min-width:720px){ .proof{ grid-template-columns:repeat(5,1fr); } }
.proof .card{
  text-align:center; padding:18px 12px; border-radius:var(--r-l);
  background:var(--card-solid);
}
.proof b{
  display:block; font-family:var(--f-display); font-size:1.55rem; font-weight:800;
  background:linear-gradient(135deg, var(--coral), var(--sky));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.section{ padding:64px 0; position:relative; }
.section.alt{
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--soft) 70%, transparent), transparent);
}
.section-head{ margin-bottom:32px; max-width:54ch; }
.section-head h2{ margin-bottom:10px; }
.level-card{
  position:relative; padding:22px; transition:transform .25s var(--ease), border-color .2s, box-shadow .25s;
  border-radius:var(--r-l); overflow:hidden;
}
.level-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--coral), var(--signal), var(--teal));
  opacity:0; transition:opacity .2s;
}
.level-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.level-card:hover::before{ opacity:1; }
.level-card .lv{
  font-family:var(--f-display); font-size:2.1rem; font-weight:800;
  background:linear-gradient(135deg, var(--coral), #FF8F3D);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.method-grid{ display:grid; gap:14px; }
@media (min-width:720px){ .method-grid{ grid-template-columns:repeat(3,1fr); } }
.method-card{ padding:22px; }
.method-card .ic{
  width:44px; height:44px; border-radius:14px;
  background:linear-gradient(135deg, var(--ink), #1E3A5F);
  color:var(--signal); display:grid; place-items:center; margin-bottom:14px;
  box-shadow:0 8px 20px rgba(10,22,40,.2);
}
.walk{ display:grid; gap:16px; }
@media (min-width:900px){ .walk{ grid-template-columns:repeat(3,1fr); } }
.price-grid{ display:grid; gap:16px; }
@media (min-width:900px){ .price-grid{ grid-template-columns:repeat(3,1fr); } }
.price-card{ padding:26px; display:flex; flex-direction:column; gap:12px; border-radius:var(--r-xl); }
.price-card.featured{
  border:2px solid transparent;
  background:
    linear-gradient(var(--card-solid), var(--card-solid)) padding-box,
    linear-gradient(135deg, var(--coral), var(--signal), var(--teal)) border-box;
  box-shadow:var(--shadow-lg);
  transform:scale(1.02);
}
.price-card .price{ font-family:var(--f-display); font-size:2.8rem; font-weight:800; letter-spacing:-.03em; }
.price-card ul{ margin:0; padding-left:1.15em; color:var(--muted); flex:1; }
.price-card .btn{ margin-top:8px; }
.faq details{
  background:var(--card-solid); border:1px solid var(--line); border-radius:var(--r-l);
  padding:16px 18px; margin-bottom:10px; transition:box-shadow .2s;
}
.faq details[open]{ box-shadow:var(--shadow); }
.faq summary{
  cursor:pointer; font-weight:700; font-family:var(--f-display); font-size:1.12rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-weight:700; color:var(--coral); font-size:1.3rem; }
.faq details[open] summary::after{ content:"–"; }
.site-footer{
  border-top:1px solid var(--line); padding:40px 0 56px; color:var(--muted); font-size:.95rem;
  background:color-mix(in srgb, var(--ink) 3%, transparent);
}
.site-footer .inner{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }

/* ——— app shell ——— */
.app-shell{ display:grid; min-height:100dvh; }
@media (min-width:900px){ .app-shell{ grid-template-columns:260px 1fr; } }
.side-rail{
  background:linear-gradient(185deg, #0A1628 0%, #0F1F38 55%, #122A48 100%);
  color:#fff; padding:20px 14px; display:flex; flex-direction:column; gap:4px;
  border-right:1px solid rgba(255,255,255,.06);
}
.side-rail .brand{ color:#fff; margin-bottom:16px; padding:6px 10px; }
.side-rail .brand .mark{
  background:linear-gradient(135deg, var(--coral), #FF8F3D); color:#fff;
}
.side-link{
  display:flex; align-items:center; gap:11px; padding:11px 13px;
  border-radius:12px; color:rgba(255,255,255,.72); text-decoration:none; font-weight:600;
  border:0; background:transparent; cursor:pointer; width:100%; text-align:left;
  transition:background .15s, color .15s, transform .15s;
}
.side-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.side-link[aria-current="page"]{
  background:rgba(255,92,69,.18); color:#fff;
  box-shadow:inset 3px 0 0 var(--coral);
}
.side-link svg{ width:20px; height:20px; flex:none; opacity:.9; }
.side-spacer{ flex:1; }
.app-main{ min-width:0; display:flex; flex-direction:column; }
.app-top{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); padding:12px 18px;
  display:flex; align-items:center; gap:10px;
}
.app-top .ttl{
  font-family:var(--f-display); font-weight:700; font-size:1.2rem;
  flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:-.02em;
}
.app-content{ padding:22px 18px 88px; width:min(920px,100%); margin:0 auto; }
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb, var(--card-solid) 92%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -8px 30px rgba(10,22,40,.06);
}
.bottom-nav a,.bottom-nav button{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px; font-size:.68rem; font-weight:700; color:var(--muted);
  text-decoration:none; border:0; background:transparent; cursor:pointer; border-radius:10px;
}
.bottom-nav a[aria-current="page"],.bottom-nav button[aria-current="page"]{
  color:var(--coral); background:var(--coral-soft);
}
.bottom-nav svg{ width:22px; height:22px; }
@media (min-width:900px){ .bottom-nav{ display:none; } }
@media (max-width:899px){
  .side-rail{ display:none; }
  .app-content{ padding-bottom:100px; }
}

/* study tiles & leftovers */
.tile{
  display:block; background:var(--card-solid); border:1px solid var(--line);
  border-radius:var(--r-l); padding:16px; text-decoration:none; color:var(--ink);
  position:relative; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s;
  box-shadow:var(--shadow);
}
.tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:transparent; }
.tile .ic{ font-size:1.5rem; line-height:1; }
.tile .nm{ font-family:var(--f-display); font-size:1.22rem; font-weight:700; margin-top:8px; line-height:1.15; letter-spacing:-.02em; }
.tile .sub{ font-size:.85rem; color:var(--muted); line-height:1.3; margin-top:2px; }
.tile .done-mark{ position:absolute; top:12px; right:14px; color:var(--ok); font-weight:700; }
.list{ display:flex; flex-direction:column; }
.li{
  display:flex; gap:12px; align-items:center; padding:13px 4px;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink);
  transition:background .15s; border-radius:10px; margin:0 -4px; padding-left:8px; padding-right:8px;
}
.li:hover{ background:var(--soft); }
.li:last-child{ border-bottom:0; }
.li .grow{ flex:1; min-width:0; }
.li .nm{ font-weight:700; }
.li .sub{ font-size:.86rem; color:var(--muted); }
.chk{ color:var(--ok); font-weight:700; }
.say{
  border:1px solid var(--line); background:var(--card-solid); border-radius:999px;
  width:38px; height:38px; display:inline-grid; place-items:center; cursor:pointer;
  flex:none; font-size:.95rem; color:var(--ink); padding:0; transition:background .15s, transform .15s;
}
.say:hover{ border-color:var(--muted); transform:scale(1.05); }
.say.slow{ font-size:.8rem; }
.say.playing{ background:var(--signal); border-color:var(--signal); color:var(--signal-ink); }
.rec{ border:1px solid var(--line); background:var(--card-solid); border-radius:999px; height:38px; padding:0 12px; cursor:pointer; font-weight:600; font-size:.88rem; }
.rec.on{ background:var(--bad); color:#fff; border-color:var(--bad); }
.art-m{ color:var(--der); } .art-f{ color:var(--die); } .art-n{ color:var(--das); } .art-p{ color:var(--die); }
.word{ display:flex; gap:10px; align-items:flex-start; padding:11px 0 11px 12px; border-bottom:1px solid var(--line); border-left:4px solid transparent; }
.word.g-m{ border-left-color:var(--der); } .word.g-f,.word.g-p{ border-left-color:var(--die); } .word.g-n{ border-left-color:var(--das); } .word.g--{ border-left-color:var(--line); }
.word .w{ font-weight:600; font-size:1.08rem; }
.word .pl{ color:var(--muted); font-weight:400; font-size:.9rem; }
.word .en{ color:var(--muted); font-size:.92rem; }
.word .ex{ font-size:.9rem; margin-top:3px; }
.word .ex i{ color:var(--muted); }
.word .lv{ margin-left:auto; flex:none; font-size:.75rem; color:var(--muted); padding-top:4px; }
.legend{ display:flex; gap:12px; flex-wrap:wrap; font-size:.9rem; font-weight:600; }
.phrase{ display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }
.phrase:last-child{ border-bottom:0; }
.phrase .de{ font-weight:500; }
.phrase .en{ font-size:.88rem; color:var(--muted); }
.fc{
  background:var(--card-solid); border:1px solid var(--line); border-radius:var(--r-xl);
  min-height:260px; padding:28px 22px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:10px; border-top:6px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.fc.g-m{ border-top-color:var(--der);} .fc.g-f,.fc.g-p{ border-top-color:var(--die);} .fc.g-n{ border-top-color:var(--das);}
.fc .big{ font-family:var(--f-display); font-size:2.4rem; font-weight:800; line-height:1.1; letter-spacing:-.02em; }
.fc .mid{ font-size:1.25rem; }
.fc .ex{ color:var(--muted); font-size:.98rem; max-width:34ch; }
.fc-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.seg button{ border:0; background:var(--card-solid); padding:8px 14px; cursor:pointer; font-size:.88rem; font-weight:600; }
.seg button[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.qhead{ display:flex; align-items:center; gap:12px; font-size:.9rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.qhead .bar{ flex:1; margin:0; }
.qtext{ font-size:1.28rem; font-weight:600; margin:16px 0 12px; line-height:1.35; }
.gap{ display:inline-block; min-width:3.2em; border-bottom:2px solid var(--ink); margin:0 3px; }
.opts{ display:grid; gap:10px; }
.opts button{
  text-align:left; padding:14px 16px; border:1.5px solid var(--line); border-radius:14px;
  background:var(--card-solid); cursor:pointer; font-size:1.05rem; font-weight:500;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.opts button:hover:not(:disabled){ border-color:var(--coral); transform:translateY(-1px); box-shadow:var(--shadow); }
.opts button.right{ border-color:var(--ok); background:var(--das-bg); }
.opts button.wrong{ border-color:var(--bad); background:var(--die-bg); }
.opts.g3{ grid-template-columns:repeat(3,1fr); }
.opts.g3 button{ text-align:center; font-family:var(--f-cond); font-size:1.4rem; font-weight:600; }
.opts.g2{ grid-template-columns:1fr 1fr; }
.opts.g2 button{ text-align:center; }
.fbbox{ margin-top:14px; padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--soft); }
.fbbox.ok{ border-color:var(--ok); background:var(--teal-soft); }
.fbbox.no{ border-color:var(--bad); background:var(--die-bg); }
.fbbox b{ display:block; font-family:var(--f-display); font-size:1.25rem; }
.fbbox.ok b{ color:var(--ok);} .fbbox.no b{ color:var(--bad);}
.fbbox .btn{ margin-top:10px; }
.tokens{ display:flex; flex-wrap:wrap; gap:8px; min-height:52px; padding:10px; border:1.5px dashed var(--line); border-radius:14px; }
.tokens.answer{ border-style:solid; background:var(--soft); }
.tok{ border:1px solid var(--line); background:var(--card-solid); border-radius:999px; padding:8px 12px; cursor:pointer; font-weight:500; font-size:1.02rem; transition:transform .15s; }
.tok:hover{ border-color:var(--ink); transform:translateY(-1px); }
.result{ text-align:center; padding:22px 10px; }
.result .pct{ font-family:var(--f-display); font-size:4.4rem; font-weight:800; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(135deg, var(--coral), var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.diff .hit{ color:var(--ok); font-weight:600; } .diff .miss{ color:var(--bad); font-weight:600; text-decoration:underline; }
.textcard{ background:var(--card-solid); border:1px solid var(--line); border-radius:var(--r-l); padding:16px 18px; white-space:pre-line; font-size:1.02rem; }
.textcard .kind{ display:block; font-family:var(--f-cond); color:var(--muted); font-size:1rem; margin-bottom:6px; white-space:normal; }
.sign{ background:var(--signal); color:var(--signal-ink); border-color:#D8AC0C; font-weight:600; }
.ads{ display:grid; gap:10px; } @media(min-width:600px){ .ads{ grid-template-columns:1fr 1fr; } }
.ad{ background:var(--card-solid); border:1px solid var(--line); border-radius:var(--r-l); padding:14px; }
.ad b{ font-family:var(--f-cond); font-size:1.4rem; }
.gt{ border-collapse:collapse; width:100%; font-size:.98rem; margin:10px 0; }
.gt th,.gt td{ border-bottom:1px solid var(--line); padding:8px 8px; text-align:left; vertical-align:top; }
.gt th{ font-family:var(--f-cond); font-weight:600; font-size:1.02rem; color:var(--muted); }
.tbl-wrap{ overflow-x:auto; }
.tip{ border-left:4px solid var(--signal); background:var(--card-solid); padding:12px 14px; border-radius:0 var(--r-s) var(--r-s) 0; }
.tip b{ font-family:var(--f-display); font-size:1.05rem; }
.script{ font-size:.95rem; background:var(--soft); border-radius:var(--r-m); padding:12px; margin-top:10px; }
.script p{ margin:4px 0; }
.player{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px; background:var(--soft); border-radius:var(--r-m); }
.codeline{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; background:#0F1A26; color:#D7E3F0; padding:14px 16px; border-radius:var(--r-s); overflow-x:auto; font-size:.98rem; white-space:pre; }
.bigemoji{ font-size:4.5rem; line-height:1; }
.cardbox{ background:var(--card-solid); border:2px solid var(--ink); border-radius:var(--r-l); padding:22px; text-align:center; }
.cardbox .theme{ font-size:.9rem; color:var(--muted); }
.cardbox .word2{ font-family:var(--f-display); font-size:2.2rem; font-weight:800; }
.reveal{ margin-top:12px; }
.alpha{ display:grid; grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:8px; }
.alpha button{ border:1px solid var(--line); background:var(--card-solid); border-radius:var(--r-s); padding:10px 0; font-family:var(--f-cond); font-size:1.5rem; font-weight:600; cursor:pointer; }
.alpha button small{ display:block; font-family:var(--f-body); font-size:.7rem; color:var(--muted); font-weight:400; }
.skillbars .sb{ margin:12px 0; }
.skillbars .sb .bar{ height:12px; position:relative; overflow:visible; }
.skillbars .sb .bar i{ background:linear-gradient(90deg, var(--teal), var(--sky)); }
.skillbars .sb .bar .mark{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--bad); }
.rate{ display:flex; gap:8px; flex-wrap:wrap; }
.rate button{ border:1px solid var(--line); background:var(--card-solid); border-radius:999px; padding:8px 14px; cursor:pointer; font-weight:600; }
.rate button[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.claude-out{ margin-top:12px; }
.claude-out .mist{ padding:8px 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.claude-out del{ color:var(--bad); } .claude-out ins{ color:var(--ok); text-decoration:none; font-weight:600; }
.warnbox{ border:1px solid color-mix(in srgb, var(--signal) 50%, var(--line)); background:var(--card-solid); border-radius:var(--r-l); padding:14px 16px; font-size:.95rem; }
.top{ position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:var(--bg); border-bottom:1px solid var(--line); }
.top-in{ max-width:780px; margin:0 auto; display:flex; align-items:center; gap:10px; padding:10px 16px; }
.top .back{ border:1px solid var(--line); background:var(--card-solid); border-radius:12px; width:40px; height:40px; display:grid; place-items:center; cursor:pointer; text-decoration:none; color:var(--ink); font-size:1.2rem; flex:none; }
.top .ttl{ font-family:var(--f-display); font-weight:700; font-size:1.2rem; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wrap{ max-width:780px; margin:0 auto; padding:18px 16px 60px; }
.hero-hi{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.hero-hi h1{ font-size:clamp(2.2rem,4vw,2.8rem); }
.hero-hi .gw{ font-size:.95rem; color:var(--muted); }
.note{ font-size:.9rem; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; }
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:720px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-card{
  padding:18px; border-radius:var(--r-l);
  background:var(--card-solid); border:1px solid var(--line); box-shadow:var(--shadow);
}
.stat-card .n{
  font-family:var(--f-display); font-size:2.1rem; font-weight:800; letter-spacing:-.03em;
  background:linear-gradient(135deg, var(--ink), var(--sky));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.chart-bars{ display:flex; align-items:flex-end; gap:6px; height:120px; padding-top:8px; }
.chart-bars span{
  flex:1; border-radius:8px 8px 4px 4px; min-width:8px;
  background:linear-gradient(180deg, var(--coral), var(--sky));
  transition:height .4s var(--ease);
}
.empty{ text-align:center; padding:48px 20px; color:var(--muted); }
.empty h3{ color:var(--ink); margin-bottom:8px; font-family:var(--f-display); }
.skeleton{
  background:linear-gradient(90deg, var(--soft), var(--line), var(--soft));
  background-size:200% 100%; animation:shimmer 1.2s infinite; border-radius:var(--r-m); min-height:18px;
}
@keyframes shimmer{ 0%{ background-position:200% 0;} 100%{ background-position:-200% 0;} }

/* admin toolbar */
.toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-bottom:4px;
}
.search-field{
  flex:1; min-width:200px; position:relative;
}
.search-field .inp{ padding-left:42px; border-radius:999px; }
.search-field::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:16px; height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235B6B82' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition:none!important; animation:none!important; }
}