/* ============================================================
   LinguaForge — arkusz stylów
   SPIS SEKCJI (kolejność ma znaczenie: późniejsze reguły nadpisują wcześniejsze)
   1. Podstawy: zmienne, typografia, układ
   2. Komponenty: przyciski, karty, pola, odznaki
   3. Moduły: fiszki, ścieżka, teoria, gry, podstawy
   4. Tryb skupienia i nawigacja mobilna
   5. Tryb ciemny
   UWAGA: selektory .card, .btn i .hero są celowo rozszerzane w kilku
   miejscach (kolejne wersje dokładały właściwości). Zmieniając je,
   sprawdź wszystkie wystąpienia, bo obowiązuje ostatnie.
   ============================================================ */

/* LinguaForge — „warsztat języka”: chłodna stal + żar kuźni.
   Każdy moduł ma własny kolor akcentu, żeby nauka nie była wizualnie monotonna. */
:root {
  --steel: #eef2f6;
  --steel-deep: #dde5ec;
  --panel: #ffffff;
  --ink: #1e2833;
  --ink-soft: #5b6b7b;
  --line: #ccd6df;
  --ember: #e8590c;      /* fiszki / główny akcent */
  --ember-soft: #ffe8d9;
  --indigo: #4c5fd5;     /* gramatyka */
  --indigo-soft: #e5e9ff;
  --teal: #0ca678;       /* tłumaczenia / sukces */
  --teal-soft: #d3f4ea;
  --violet: #7048e8;     /* słuchanie */
  --violet-soft: #ece4ff;
  --gold: #e8a202;       /* XP / czytanie */
  --gold-soft: #fff1cf;
  --red: #e03131;
  --red-soft: #ffe1e1;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(30, 40, 51, .08);
  --display: "Sora", sans-serif;
  --body: "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: var(--body); color: var(--ink);
  background: var(--steel);
  background-image: radial-gradient(circle at 85% -10%, var(--ember-soft), transparent 45%),
                    radial-gradient(circle at -10% 110%, var(--indigo-soft), transparent 40%);
  background-attachment: fixed;
}
h1, h2, h3, .brand { font-family: var(--display); letter-spacing: -.02em; }
button { font-family: var(--body); cursor: pointer; }
a { color: var(--ember); }

/* ---------- układ ---------- */
#app { display: flex; min-height: 100vh; }
aside {
  width: 220px; padding: 22px 14px; flex-shrink: 0;
  background: var(--ink); color: #dfe7ee;
  display: flex; flex-direction: column; gap: 4px;
}
.brand { font-size: 1.3rem; color: #fff; margin-bottom: 4px; }
.brand span { color: var(--ember); }
.brand-sub { font-size: .7rem; color: #8fa0b0; margin-bottom: 18px; font-family: var(--mono); }
aside nav { flex-direction: column; gap: 3px; }
aside button.nav {
  background: none; border: 0; color: #c4d0db; text-align: left;
  padding: 9px 12px; border-radius: 9px; font-size: .93rem;
  transition: background .15s, color .15s;
}
aside button.nav:hover { background: rgba(255,255,255,.08); color: #fff; }
aside button.nav.active { background: var(--ember); color: #fff; font-weight: 600; }
aside .spacer { flex: 1; }
aside .userbox { font-size: .8rem; color: #9fb0c0; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.12); }
aside .userbox b { color: #fff; }

main { flex: 1; padding: 30px clamp(16px, 4vw, 48px); max-width: 1060px; }

/* ---------- karty / panele ---------- */
.card { background: var(--panel); padding: 22px; margin-bottom: 18px; border-top: 4px solid transparent; animation: rise .3s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.card.ember { border-top-color: var(--ember); }
.card.indigo { border-top-color: var(--indigo); }
.card.teal { border-top-color: var(--teal); }
.card.violet { border-top-color: var(--violet); }
.card.gold { border-top-color: var(--gold); }
.card.red { border-top-color: var(--red); }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid.c2, .grid.c3 { grid-template-columns: 1fr; } aside { width: 64px; } aside .nav { font-size: 0; } aside .nav::first-letter { font-size: 1rem; } .brand, .brand-sub, .userbox { display: none; } }

.eyebrow { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin-bottom: 6px; }
.muted { color: var(--ink-soft); font-size: .9rem; }
.big { font-size: 2rem; font-family: var(--display); }

/* ---------- przyciski ---------- */
.btn { padding: 11px 20px; font-size: .95rem; color: #fff; background: var(--ember); }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn.indigo { background: var(--indigo); }
.btn.teal { background: var(--teal); }
.btn.violet { background: var(--violet); }
.btn.gold { background: var(--gold); }
.btn.ghost { border: 1.5px solid var(--line); }
.btn.sm { padding: 7px 13px; font-size: .85rem; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }

input[type=text], input[type=password], input[type=number], textarea, select {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line);
  border-radius: 10px; font-size: 1rem; font-family: var(--body); background: #fff;
}
textarea { resize: vertical; min-height: 70px; }
label { font-size: .85rem; font-weight: 600; display: block; margin: 12px 0 5px; }

/* ---------- fiszki ---------- */
.flash {
  perspective: 1100px; height: 300px; margin: 8px auto; max-width: 480px; cursor: pointer;
}
.flash-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .5s; transform-style: preserve-3d;
}
.flash.flipped .flash-inner { transform: rotateY(180deg); }
.flash-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  background: var(--panel); border-radius: 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 26px; text-align: center; gap: 10px; border: 2px solid var(--ember-soft);
}
.flash-face.back { transform: rotateY(180deg); border-color: var(--teal-soft); }
.flash .word { font-family: var(--display); font-size: 2.1rem; }
.flash .emoji { font-size: 3rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,.15)); }
.flash .ex { color: var(--ink-soft); font-style: italic; }
.rate-row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.rate { border: 0; border-radius: 10px; padding: 12px 18px; font-weight: 700; color: #fff; min-width: 92px; }
.rate small { display: block; font-weight: 400; font-size: .7rem; opacity: .9; }
.rate.r1 { background: var(--red); } .rate.r2 { background: var(--gold); }
.rate.r3 { background: var(--teal); } .rate.r4 { background: var(--indigo); }
.badge { display: inline-block; font-family: var(--mono); font-size: .7rem; padding: 3px 9px; border-radius: 20px; background: var(--steel-deep); }
.badge.new { background: var(--teal-soft); color: var(--teal); }
.badge.leech { background: var(--red-soft); color: var(--red); }

/* ---------- pasek postępu / skille ---------- */
.bar { height: 10px; background: var(--steel-deep); border-radius: 6px; overflow: hidden; }
.bar > div { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ember), var(--gold)); transition: width .6s ease; }
.skill-row { display: grid; grid-template-columns: 130px 1fr 46px; align-items: center; gap: 12px; margin: 9px 0; font-size: .9rem; }
.skill-row b.lvl { font-family: var(--mono); text-align: right; }

/* pierścień celu dziennego — sygnatura wizualna */
.ringwrap { position: relative; width: 130px; height: 130px; margin: auto; }
.ringwrap svg { transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--steel-deep); stroke-width: 11; }
.ring-fg { fill: none; stroke: var(--ember); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset .8s ease; filter: drop-shadow(0 0 5px rgba(232,89,12,.5)); }
.ringtxt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ringtxt .big { font-size: 1.6rem; }

/* ---------- quizy ---------- */
.opt { display: block; width: 100%; text-align: left; margin: 7px 0; padding: 13px 16px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-size: 1rem;
  transition: border-color .12s, background .12s; }
.opt:hover { border-color: var(--indigo); background: var(--indigo-soft); }
.opt.good { border-color: var(--teal); background: var(--teal-soft); font-weight: 700; }
.opt.bad { border-color: var(--red); background: var(--red-soft); }
.feedback { font-size: .93rem; animation: rise .25s ease; }
.feedback.ok { background: var(--teal-soft); border-left: 4px solid var(--teal); }
.feedback.err { background: var(--red-soft); border-left: 4px solid var(--red); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--line); }
.chip.used { opacity: .3; pointer-events: none; }

/* gra: pary */
.pairs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px){ .pairs-grid { grid-template-columns: repeat(2,1fr); } }
.pair-tile { font-weight: 600; }
.pair-tile.wrong { animation: shake .3s; border-color: var(--red); }
@keyframes shake { 25%{   } 75%{   } }

/* ---------- toasty / xp ---------- */
#toasts { position: fixed; top: 18px; right: 18px; z-index: 50; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px;
  box-shadow: var(--shadow); animation: rise .25s ease; font-size: .9rem; max-width: 320px; }
.toast.err { background: var(--red); }
.xp-pop { position: fixed; font-family: var(--display); font-weight: 700; color: var(--gold);
  font-size: 1.4rem; pointer-events: none; z-index: 60; animation: xpfly 1s ease forwards;
  text-shadow: 0 2px 6px rgba(0,0,0,.2); }
@keyframes xpfly { to { transform: translateY(-70px); opacity: 0; } }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
tr.clickable:hover { background: var(--steel); cursor: pointer; }

.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; width: 100%; }
.auth-card { width: min(400px, 92vw); }
.auth-hero { font-size: 2.2rem; margin-bottom: 4px; }
.tabbtns { display: flex; gap: 8px; margin-bottom: 14px; }
.center { text-align: center; }
.mt { margin-top: 14px; } .mb { margin-bottom: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sparkline { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.sparkline div { flex: 1; background: linear-gradient(180deg, var(--gold), var(--ember)); border-radius: 3px 3px 0 0; min-height: 2px; }
details summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ================= v0.2 ================= */
/* --- hero band per moduł: koniec z monotonią --- */
.hero { display:flex; align-items:center; gap:16px; padding:20px 22px; margin-bottom:16px; color:#fff; overflow:hidden; animation:heroIn .45s ease; }
@keyframes heroIn { from { opacity:0; transform:translateY(-8px);} to {opacity:1; transform:none;} }
.hero::after { content:""; position:absolute; right:-30px; top:-30px; width:160px; height:160px;
  border-radius:50%; background:rgba(255,255,255,.12); }
.hero-ember  { background:linear-gradient(120deg,#c2410c,#e8590c 55%,#f59f00); }
.hero-indigo { background:linear-gradient(120deg,#312e81,#4c5fd5 60%,#748ffc); }
.hero-teal   { background:linear-gradient(120deg,#065f46,#0ca678 60%,#38d9a9); }
.hero-violet { background:linear-gradient(120deg,#4a1d96,#7048e8 60%,#b197fc); }
.hero-gold   { background:linear-gradient(120deg,#92400e,#e8a202 60%,#ffd43b); }
.hero-emoji { font-size:44px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.25)); animation:bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.hero h2 { margin:0; font-size:24px; }
.hero-sub { opacity:.92; font-size:14px; margin-top:3px; }
.hero-count { margin-left:auto; background:rgba(255,255,255,.18); padding:8px 14px; border-radius:999px;
  font-family:"IBM Plex Mono",monospace; font-size:13px; white-space:nowrap; }

/* --- animacje wejścia i reakcje --- */
.stagger > * { animation:popIn .35s ease both; }
@keyframes popIn { from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;} }
.pop-in { animation:popIn .4s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
@keyframes pulseGood { 0%{box-shadow:0 0 0 0 rgba(12,166,120,.5)} 100%{box-shadow:0 0 0 16px rgba(12,166,120,0)} }
.fb-good { animation:pulseGood .7s ease; }
.fb-bad  { animation:shake .4s ease; }

/* --- panel feedbacku --- */
.feedback { border-radius:14px; padding:16px 18px; margin-top:10px; }
.fb-good { background:#e6fcf5; border:2px solid #0ca678; }
.fb-bad  { background:#fff0f0; border:2px solid #e03131; }
.fb-head { font-weight:700; font-size:18px; margin-bottom:10px; }
.fb-good .fb-head { color:#087f5b; } .fb-bad .fb-head { color:#c92a2a; }
.fb-combo { color:#e8590c; }
.fb-grid { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:center; }
.fb-label { color:#5c6672; font-size:13px; }
.fb-your { text-decoration:line-through; color:#c92a2a; }
.fb-answer { font-weight:700; color:#087f5b; font-size:17px; }
.fb-bad .fb-answer { color:#1b1f24; }
.fb-pl { color:#3b4754; font-style:italic; }
.fb-explain { margin-top:10px; background:rgba(255,255,255,.7); border-radius:8px; padding:8px 12px; font-size:14px; }
.fb-btns { margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.fb-note { font-size:12px; margin-top:8px; }
.mini-tts { border:none; background:#eef2f6; border-radius:8px; padding:3px 8px; cursor:pointer; font-size:13px; }
.mini-tts:hover { background:#dde5ec; }

/* --- test / pytania --- */
.pl-top { display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.pl-tip { margin-bottom:10px; font-size:13px; }
.progress { flex:1; height:10px; background:#e3e9ef; border-radius:99px; min-width:120px; overflow:hidden; }
.progress-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#4c5fd5,#748ffc); transition:width .4s ease; }
.passage { background:#f4f7fa; border-left:4px solid #4c5fd5; border-radius:10px; padding:12px 16px; margin-bottom:12px; line-height:1.65; }
.errlist { color:#c92a2a; font-size:14px; }
.diffbox { margin-top:8px; }

/* --- czasowniki --- */
.verb-top { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.verb-prompt { font-size:30px; font-weight:700; margin:14px 0 6px; font-family:"Sora",sans-serif; }
.badge.tpast { background:#ffe3e3; color:#c92a2a; }
.badge.tpres { background:#d3f9d8; color:#2b8a3e; }
.badge.tfut  { background:#d0ebff; color:#1971c2; }

/* --- lekcje --- */
.chapter-list { display:flex; flex-direction:column; gap:10px; margin:10px 0; }
.chapter { display:flex; gap:14px; padding:14px; border:1.5px solid #dde5ec; cursor:pointer; transition:transform .15s, box-shadow .15s; background:#fff; }
.chapter:hover { transform:translateX(4px); box-shadow:0 4px 14px rgba(20,40,70,.08); }
.ch-done { border-color:#0ca678; background:#f2fcf8; }
.ch-locked { opacity:.55; cursor:not-allowed; }
.ch-status { font-size:26px; }
.ch-body b { font-size:15px; }
.counters { color:#5c6672; margin-top:4px; }
.exam-row { border-style:dashed; border-color:#e8a202; background:#fffdf5; }
.theory { line-height:1.7; font-size:15.5px; background:#fbfcfe; border-radius:10px; padding:14px 18px; margin:10px 0; }
.theory h4 { margin:4px 0 8px; color:#4c5fd5; }
.wordbank { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.chip { background:#eef2f6; border-radius:999px; padding:5px 12px; font-size:14px; }
.chip-check { cursor:pointer; user-select:none; display:inline-flex; align-items:center; gap:4px; margin:3px; }
.exam-form { display:flex; flex-direction:column; gap:16px; }
.exam-q { border-bottom:1px dashed #dde5ec; padding-bottom:12px; }
.option.selected { border-color:#4c5fd5; background:#eef1ff; font-weight:700; }
.exam-grade { display:flex; gap:16px; align-items:center; padding:18px; border-radius:14px; margin-bottom:14px; background:#f4f7fa; }
.grade-num { font-size:52px; font-weight:800; font-family:"Sora",sans-serif; width:80px; height:80px;
  display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:#868e96; }
.grade-6 .grade-num, .grade-5 .grade-num { background:#0ca678; }
.grade-4 .grade-num { background:#66a80f; }
.grade-3 .grade-num { background:#e8a202; }
.grade-2 .grade-num, .grade-1 .grade-num { background:#e03131; }
.row-ok td { background:#f6fdf9; } .row-bad td { background:#fff5f5; }

/* --- pulpit: etapy + kafelki --- */
.stage-row { display:grid; grid-template-columns:150px auto 1fr; gap:6px 14px; align-items:center;
  padding:10px 0; border-bottom:1px dashed #e3e9ef; }
.stage-row .muted { grid-column:2/4; }
.stage-dom { font-weight:700; }
.stage-steps { display:flex; gap:5px; }
.stage-dot { width:26px; height:26px; border-radius:50%; background:#e3e9ef; color:#8a94a0;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.stage-dot.on { background:linear-gradient(135deg,#e8590c,#f59f00); color:#fff; }
.tile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-top:10px; }
.tile { padding:14px; color:#fff; cursor:pointer; min-height:110px; transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column; gap:3px; }
.tile:hover { box-shadow:0 10px 22px rgba(20,40,70,.18); }
.tile-emoji { font-size:26px; }
.tile-count { margin-top:auto; font-size:11.5px; opacity:.85; font-family:"IBM Plex Mono",monospace; }
.tile-ember  { background:linear-gradient(135deg,#c2410c,#f59f00); }
.tile-indigo { background:linear-gradient(135deg,#3730a3,#748ffc); }
.tile-teal   { background:linear-gradient(135deg,#065f46,#38d9a9); }
.tile-violet { background:linear-gradient(135deg,#4a1d96,#b197fc); }
.tile-gold   { background:linear-gradient(135deg,#92400e,#ffd43b); color:#3b2a00; }
.bars { display:flex; gap:6px; align-items:flex-end; height:90px; margin-top:10px; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
.bar-col .bar { width:100%; background:linear-gradient(180deg,#f59f00,#e8590c); border-radius:4px 4px 0 0; min-height:2px; transition:height .4s; }
.bar-lbl { font-size:10px; color:#8a94a0; }
.wod { font-size:18px; margin:6px 0; }
.lockinfo { background:#fff9db; border:1px solid #ffe066; border-radius:10px; padding:8px 12px; margin-bottom:10px; font-size:13.5px; }
.danger-sum { cursor:pointer; color:#c92a2a; font-weight:600; }
.btn.danger { background:#e03131; color:#fff; }
.btn.danger:hover { background:#c92a2a; }
.set-row { display:flex; gap:10px; align-items:center; margin:8px 0; flex-wrap:wrap; }

/* --- gramatyka --- */
.topic-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-top:10px; }
.topic-card { border:1.5px solid #dde5ec; padding:12px; cursor:pointer; transition:.15s; background:#fff; }
.topic-card:hover { border-color:#4c5fd5; box-shadow:0 6px 16px rgba(20,40,70,.1); }
.topic-lvl { float:right; font-size:11px; background:#eef1ff; color:#4c5fd5; border-radius:6px; padding:2px 7px; font-weight:700; }
.mastery-bar { height:7px; background:#e3e9ef; border-radius:99px; margin:8px 0 4px; overflow:hidden; }
.mastery-fill { height:100%; background:linear-gradient(90deg,#4c5fd5,#748ffc); }
.mix-checks { margin:10px 0; }

/* --- nauczyciel: arkusze + kreator --- */
.table.worksheet td { font-size:13.5px; vertical-align:top; }
.err-row { padding:4px 0; border-bottom:1px dashed #eef2f6; }
.builder { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
@media (max-width: 980px){ .builder { grid-template-columns:1fr; } }
.tabs { display:flex; gap:6px; margin-bottom:12px; }
.tab { border:none; background:#eef2f6; border-radius:10px 10px 0 0; padding:9px 16px; cursor:pointer; font-weight:600; }
.tab.active { background:#4c5fd5; color:#fff; }
.bank-filters { display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.bank-filters .input { flex:1; min-width:140px; }
.bank-list { max-height:520px; overflow:auto; display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.bank-row { display:flex; gap:8px; align-items:center; border:1px solid #e3e9ef; border-radius:9px; padding:6px 10px; }
.bank-row:hover { background:#f8fafc; }
.task-label { flex:1; font-size:13.5px; }
.task-list { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.task-row { display:flex; gap:8px; align-items:center; border:1px solid #e3e9ef; border-radius:9px; padding:6px 10px; background:#fbfcfe; }
.task-btns { display:flex; gap:4px; }
.btn.mini { padding:4px 9px; font-size:12.5px; }
.opt-row { display:flex; gap:8px; align-items:center; margin:4px 0; }
.opt-inp { flex:1; }
.modal-bg { position:fixed; inset:0; background:rgba(15,20,30,.45); display:flex; align-items:center; justify-content:center; z-index:60; }
.modal { max-width:640px; width:92%; max-height:82vh; overflow:auto; }
.cefr-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:10px; margin:14px 0; }
.cefr-cell { background:#f4f7fa; border-radius:12px; padding:12px; text-align:center; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } 
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .grid2,.grid3 { grid-template-columns:1fr; } }
.small { font-size:12.5px; }

/* v0.2.1 */
.card .input { width:100%; max-width:680px; font-size:16px; padding:12px 14px; box-sizing:border-box; }
.input.short { max-width:150px; }
.fb-en { font-weight:600; color:#1971c2; }
.verb-forms { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px; }
.form-chip { border:1.5px solid #dde5ec; background:#fff; border-radius:10px; padding:7px 12px; cursor:pointer; font-family:"IBM Plex Mono",monospace; transition:.15s; }
.form-chip:hover { border-color:#0ca678; background:#f2fcf8; }
.form-desc { font-size:12.5px; color:#5c6672; }
.example-box { background:#f4f7fa; border-radius:10px; padding:12px 14px; margin-top:8px; }
.example-box .en { font-weight:600; }
.example-box .plx { color:#5c6672; font-style:italic; margin-top:2px; }
.pass-pl { background:#fff9db; border-radius:10px; padding:10px 14px; margin-top:8px; line-height:1.6; }

/* v0.2.2 */
.fb-options { margin-top:10px; background:rgba(255,255,255,.75); border-radius:10px; padding:10px 12px; }
.fb-opt { padding:3px 0; font-size:14.5px; }
.fb-opt-good { color:#087f5b; font-weight:600; }
.fb-opt-bad { color:#c92a2a; }
.kb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-top:10px; }
.kb-sec { margin:10px 0; }
.kb-sec h4 { color:#4c5fd5; margin:14px 0 6px; }
.kb-form { background:#f4f7fa; border-radius:10px; padding:10px 14px; font-family:"IBM Plex Mono",monospace; font-size:14px; }
.kb-form div { padding:3px 0; }
.kb-ex { border-left:3px solid #0ca678; padding:6px 12px; margin:6px 0; background:#f8fdfb; border-radius:0 8px 8px 0; }
.kb-mistake { color:#c92a2a; padding:2px 0; font-size:14.5px; }
.kb-sig .chip { background:#eef1ff; color:#4c5fd5; }
textarea.input { min-height:90px; resize:vertical; font-family:"IBM Plex Sans",sans-serif; }

/* ================= v0.3 ================= */
.nr-badge { background:#f1f3f5; color:#868e96; font-family:"IBM Plex Mono",monospace; }
/* ścieżka */
.chain { display:flex; flex-direction:column; gap:0; margin-top:10px; }
.chain-link { display:flex; gap:14px; align-items:center; padding:12px 14px; cursor:pointer; position:relative; transition:.15s; border:1.5px solid transparent; }
.chain-link::before { content:""; position:absolute; left:31px; top:-6px; width:3px; height:12px; background:#dde5ec; }
.chain-link:first-child::before { display:none; }
.chain-link:hover { background:#f8fafc; border-color:#dde5ec; transform:translateX(3px); }
.link-dot { width:38px; height:38px; min-width:38px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:17px; background:#e3e9ef; color:#8a94a0; }
.link-done .link-dot { background:linear-gradient(135deg,#0ca678,#38d9a9); color:#fff; }
.link-open .link-dot { background:linear-gradient(135deg,#e8590c,#f59f00); color:#fff;
  animation:pulseGood 1.8s ease-in-out infinite; }
.link-locked { opacity:.5; cursor:not-allowed; }
.link-big .link-dot { width:46px; height:46px; min-width:46px; font-size:21px; }
.link-big { background:#fffdf5; border-color:#ffe066; }
/* mapa luk */
.gap-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:10px; }
.gap-cell { padding:9px 11px; cursor:pointer; color:#fff; transition:.15s; }
.gap-cell:hover { transform:translateY(-2px); }
.gap-name { font-size:13px; font-weight:600; }
.gap-val { font-size:11.5px; opacity:.9; font-family:"IBM Plex Mono",monospace; }
.gap-none { background:#adb5bd; }
.gap-bad { background:linear-gradient(135deg,#c92a2a,#fa5252); }
.gap-mid { background:linear-gradient(135deg,#e8a202,#ffd43b); color:#3b2a00; }
.gap-ok  { background:linear-gradient(135deg,#0ca678,#38d9a9); }
/* przycisk kontynuuj */
.continue-box { background:linear-gradient(120deg,#c2410c,#e8590c 60%,#f59f00); color:#fff;
  border-radius:16px; padding:18px 22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:16px; }
.continue-box .btn { background:#fff; color:#c2410c; font-weight:700; font-size:16px; padding:12px 22px; }
.continue-txt b { font-size:18px; }
/* rozmowy */
.chat { max-height:340px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.bubble { max-width:80%; padding:9px 13px; border-radius:14px; }
.b-npc { background:#eef2f6; align-self:flex-start; border-bottom-left-radius:4px; }
.b-me { background:#e6fcf5; align-self:flex-end; border-bottom-right-radius:4px; }
.b-me-bad { background:#fff0f0; }
.bubble-who { font-size:11px; color:#8a94a0; margin-bottom:2px; }
.bubble-en { font-weight:600; }
.bubble-pl { font-size:12.5px; color:#5c6672; font-style:italic; }
.opt-dlg { text-align:left; }
/* raport tygodniowy */
.week-row { display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; }
.week-cell { background:#f4f7fa; border-radius:10px; padding:10px 14px; min-width:120px; }
.week-cell .big { font-size:22px; }
.delta-up { color:#0ca678; font-weight:700; }
.delta-down { color:#c92a2a; font-weight:700; }

/* ================= v0.3.1 ================= */
.fb-rule { margin-top:8px; background:#eef1ff; border-left:4px solid #4c5fd5; border-radius:0 8px 8px 0;
  padding:9px 13px; font-size:14px; line-height:1.55; }
/* ścieżka: rozdziały */
.path-sec { border:1px solid #e3e9ef; border-radius:12px; margin:10px 0; padding:6px 10px; background:#fbfcfe; }
.path-sec > summary { cursor:pointer; padding:8px 4px; list-style:none; display:flex; align-items:center; gap:8px; }
.path-sec > summary::-webkit-details-marker { display:none; }
.sec-done { background:#f4fdf9; border-color:#c3f0dd; }
.sec-ico { font-size:18px; }
.link-current { background:#fff7ed; border-color:#f59f00 !important; box-shadow:0 0 0 2px #ffe8cc inset; }
.cur-badge { background:#e8590c; color:#fff; margin-left:auto; }
/* kreator treningu */
.kind-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:9px; margin:10px 0; }
.kind-cell { border:1.5px solid #dde5ec; padding:11px 13px; cursor:pointer; background:#fff; transition:.15s; font-size:14px; }
.kind-cell:hover { border-color:#4c5fd5; transform:translateY(-2px); }
.kind-cell.on { background:linear-gradient(135deg,#eef1ff,#dbe4ff); border-color:#4c5fd5; font-weight:600; }
.kind-cell.on::after { content:" ✔"; color:#4c5fd5; }
.chip-btn { border:none; cursor:pointer; }
.chip-btn:hover { background:#dbe4ff; }
/* FISZKI 2.0 */
.fc-card-wrap { padding:16px 18px 22px; }
.fc-bar { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.fc-progress { flex:1; height:9px; background:#e3e9ef; border-radius:99px; overflow:hidden; }
.fc-progress-fill { height:100%; width:0; border-radius:99px; transition:width .35s ease;
  background:linear-gradient(90deg,#e8590c,#f59f00); }
.fc-stats { font-family:"IBM Plex Mono",monospace; font-size:13px; white-space:nowrap; }
.fc-streak { margin-left:8px; color:#e8590c; font-weight:700; }
.fc-stage { min-height:300px; display:flex; flex-direction:column; align-items:center; }
.fc-card { width:100%; max-width:560px; min-height:210px; border-radius:20px; background:#fff;
  border:2px solid #e3e9ef; box-shadow:0 10px 30px rgba(20,40,70,.10); display:flex;
  align-items:center; justify-content:center; padding:24px; text-align:center;
  animation:cardIn .35s cubic-bezier(.2,.9,.3,1.2); position:relative; }
@keyframes cardIn { from { opacity:0; transform:translateY(14px) scale(.96) rotateX(8deg); } to { opacity:1; transform:none; } }
.fc-flip { animation:cardFlip .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes cardFlip { from { transform:rotateY(-90deg); opacity:0; } to { transform:none; opacity:1; } }
.fc-ok { border-color:#0ca678; background:linear-gradient(180deg,#f4fdf9,#fff); }
.fc-bad { border-color:#e03131; background:linear-gradient(180deg,#fff5f5,#fff); }
.fc-face { width:100%; }
.fc-tags { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.fc-tag { font-size:11px; background:#eef2f6; color:#5c6672; border-radius:999px; padding:3px 10px;
  text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.tag-new { background:#d0ebff; color:#1971c2; }
.tag-leech { background:#ffe3e3; color:#c92a2a; }
.tag-nr { font-family:"IBM Plex Mono",monospace; }
.fc-word { font-family:"Sora",sans-serif; font-size:38px; font-weight:700; line-height:1.2; color:#1b2430; }
@media (max-width:600px){ .fc-word { font-size:28px; } }
.fc-hint { margin-top:10px; color:#5c6672; font-size:14px; }
.fc-side { margin-top:14px; font-size:12px; color:#8a94a0; text-transform:uppercase; letter-spacing:.08em; }
.fc-speak { border:none; background:#eef2f6; border-radius:9px; padding:4px 9px; cursor:pointer; font-size:15px; margin-left:8px; }
.fc-answer-row { width:100%; max-width:560px; margin-top:16px; }
.fc-input { width:100%; font-size:19px !important; padding:14px 16px !important; text-align:center;
  border-radius:12px; border:2px solid #dde5ec; }
.fc-input:focus { border-color:#e8590c; outline:none; box-shadow:0 0 0 4px #ffe8cc; }
.fc-btns { justify-content:center; margin-top:10px; }
.fc-keys { margin-top:6px; }
.fc-verdict { font-size:20px; font-weight:700; margin-bottom:12px; }
.fc-ok .fc-verdict { color:#087f5b; }
.fc-bad .fc-verdict { color:#c92a2a; }
.fc-pair { margin:6px 0 10px; }
.fc-en { font-family:"Sora",sans-serif; font-size:30px; font-weight:700; }
.fc-pl { font-size:19px; color:#3b4754; margin-top:4px; }
.fc-your { color:#c92a2a; text-decoration:line-through; margin:8px 0; }
.fc-example { background:#f4f7fa; border-radius:10px; padding:9px 13px; margin-top:10px; font-style:italic; }
.fc-meta { margin-top:12px; font-size:12.5px; color:#8a94a0; font-family:"IBM Plex Mono",monospace; }
.fc-done { text-align:center; padding:20px 0; }

/* v0.3.2 — ekran startowy i pasek pominięcia */
.start-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:820px){ .start-grid { grid-template-columns:1fr; } }
.start-card { text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.start-card .set-row { justify-content:center; }
.start-emoji { font-size:44px; }
.start-skip { border:2px dashed #dde5ec; background:#fbfcfe; }
.skip-bar { display:flex; align-items:center; gap:10px; justify-content:flex-end;
  flex-wrap:wrap; margin-bottom:10px; }
.mini-skip { padding:6px 12px; font-size:13px; }

/* ================= v0.4 — odpowiedzi i interfejs ================= */
.options { counter-reset: opt; display:grid; gap:10px; margin:14px 0; }
@media (min-width:760px){ .options { grid-template-columns:1fr 1fr; } }
.options .option { counter-increment: opt; position:relative; display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:15px 18px 15px 14px; font-size:16px; line-height:1.4; font-family:inherit; color:#1b2430; background:#fff; border:2px solid #e3e9ef; cursor:pointer; }
.options .option::before {
  content: counter(opt, upper-alpha);
  flex:0 0 34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:#f1f4f8; color:#8a94a0;
  font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:14px;
  transition:background .13s, color .13s, transform .13s;
}
.options .option:hover:not(:disabled) {
  border-color:#e8590c; transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(232,89,12,.14);
}
.options .option:hover:not(:disabled)::before { background:#e8590c; color:#fff; }
.options .option.opt-picked {
  border-color:#e8590c; background:#fff7ed;
  animation:optPick .3s cubic-bezier(.2,.9,.3,1.3);
}
.options .option.opt-picked::before { background:#e8590c; color:#fff; }
@keyframes optPick { 0%{transform:scale(1)} 45%{transform:scale(1.03)} 100%{transform:scale(1)} }
.options .option:disabled { opacity:.55; cursor:default; }
.options .option.opt-picked:disabled { opacity:1; }
/* wariant dla rozmów: dwie linie (EN + PL) */
.opt-dlg { align-items:flex-start; }
.opt-dlg .muted { margin-top:3px; }

/* pytanie */
.qtext { font-family:"Sora",sans-serif; font-size:21px; font-weight:600; line-height:1.45;
  margin:12px 0 4px; color:#1b2430; }
@media (max-width:600px){ .qtext { font-size:18px; } }

/* stan „prawie” w feedbacku */
.fb-part { background:#fff9db; border:2px solid #f0a202; animation:pulsePart .7s ease; }
.fb-part .fb-head { color:#a06400; }
@keyframes pulsePart { 0%{box-shadow:0 0 0 0 rgba(240,162,2,.45)} 100%{box-shadow:0 0 0 16px rgba(240,162,2,0)} }
.fb-score { font-family:"IBM Plex Mono",monospace; font-size:14px; opacity:.75; }
.b-me-part { background:#fff9db; }

/* pola i przyciski — dopieszczenie */
.card .input { border:2px solid #e3e9ef; border-radius:12px; transition:border-color .13s, box-shadow .13s; }
.card .input:focus { border-color:#e8590c; outline:none; box-shadow:0 0 0 4px #ffe8cc; }
.keyhint { font-size:11px; color:#adb5bd; font-family:"IBM Plex Mono",monospace; margin-top:8px; }

/* przejścia widoków */
@keyframes viewIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ================= tryb ciemny ================= */
body.dark { background:#12161c; color:#e6ebf1; }
body.dark .card, body.dark .options .option, body.dark .fc-card, body.dark .chapter,
body.dark .topic-card, body.dark .kind-cell, body.dark .bank-row, body.dark .task-row {
  background:#1a212a; border-color:#2b3542; color:#e6ebf1; }
body.dark aside { background:#141a21; }
body.dark .qtext, body.dark .fc-word, body.dark .fc-en, body.dark h2, body.dark h3, body.dark h4 { color:#f1f5f9; }
body.dark .muted, body.dark .small { color:#9aa6b4; }
body.dark .options .option::before { background:#242e3a; color:#9aa6b4; }
body.dark .theory, body.dark .kb-form, body.dark .passage, body.dark .example-box,
body.dark .week-cell, body.dark .cefr-cell, body.dark .fc-example { background:#20272f; color:#e6ebf1; }
body.dark .path-sec { background:#171d25; border-color:#2b3542; }
body.dark .sec-done { background:#152420; border-color:#245c48; }
body.dark .chain-link:hover { background:#20272f; }
body.dark .fb-good { background:#10241d; border-color:#0ca678; }
body.dark .fb-bad { background:#2a1618; border-color:#e03131; }
body.dark .fb-part { background:#2a2413; border-color:#f0a202; }
body.dark .fb-explain, body.dark .fb-options { background:rgba(255,255,255,.06); }
body.dark .fb-rule { background:#1c2333; }
body.dark .input, body.dark textarea.input, body.dark select {
  background:#20272f; color:#e6ebf1; border-color:#2b3542; }
body.dark .b-npc { background:#242e3a; }
body.dark .b-me { background:#12332a; }
body.dark .b-me-bad { background:#33191c; }
body.dark .b-me-part { background:#33301a; }
body.dark .chip, body.dark .badge, body.dark .fc-tag { background:#242e3a; color:#c3ccd8; }
body.dark table.table td, body.dark table.table th { border-color:#2b3542; }
body.dark .row-ok td { background:#13251f; } body.dark .row-bad td { background:#2a1618; }
body.dark .progress, body.dark .fc-progress, body.dark .mastery-bar { background:#2b3542; }
.theme-toggle { border:none; background:transparent; cursor:pointer; font-size:18px; padding:6px; border-radius:8px; }
.theme-toggle:hover { background:rgba(255,255,255,.12); }

/* ================= mobile ================= */
@media (max-width:720px){
  #app { flex-direction:column; }
  aside { width:100%; flex-wrap:wrap; align-items:center; gap:6px; }
  aside nav { padding-bottom:4px; }
  aside nav .nav { white-space:nowrap; }
  aside .spacer, aside .brand-sub { display:none; }
  .hero { padding:14px 16px; gap:10px; } .hero-emoji {   }
  .hero-count { display:none; }
  .continue-box { padding:14px; }
  .grid2, .grid3, .start-grid { grid-template-columns:1fr; }
}

/* czytanie z klikalnymi słowami */
.read-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.read-text { font-size:17.5px; line-height:1.95; letter-spacing:.005em; }
.read-text p { margin:0 0 14px; }
.rw { cursor:pointer; border-radius:4px; padding:1px 1px; transition:background .12s, box-shadow .12s; }
.rw:hover { background:#fff3bf; box-shadow:0 2px 0 #f59f00; }
.rw-active { background:#ffd43b; box-shadow:0 2px 0 #e8590c; }
.word-pop { position:absolute; z-index:80; width:290px; background:#fff; border:2px solid #e3e9ef;
  border-radius:14px; padding:12px 14px; box-shadow:0 12px 34px rgba(20,40,70,.18);
  animation:popIn .18s ease; }
body.dark .word-pop { background:#1a212a; border-color:#2b3542; }
.wp-head { display:flex; align-items:center; gap:6px; font-size:18px; }
.wp-src { margin-left:auto; font-size:10.5px; color:#8a94a0; text-transform:uppercase; letter-spacing:.05em; }
.wp-pl { font-size:16px; color:#e8590c; font-weight:600; margin:4px 0; }
/* pisanie */
.write-brief { background:#f4f7fa; border-radius:12px; padding:12px 16px; margin-bottom:12px; }
body.dark .write-brief { background:#20272f; }
.check-list { margin:8px 0; }
.check-item { padding:3px 0; font-size:14px; color:#5c6672; }
.check-item.done { color:#087f5b; font-weight:600; }
.check-item.miss { color:#c92a2a; font-weight:600; }
.write-area { width:100%; min-height:220px !important; font-size:16px; line-height:1.6; resize:vertical; }
.wc-counter { margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:13px; color:#8a94a0; }
.wc-counter.wc-mid { color:#e8a202; } .wc-counter.wc-ok { color:#0ca678; font-weight:700; }
.write-your { background:#fbfcfe; border-left:4px solid #dde5ec; border-radius:0 10px 10px 0;
  padding:12px 16px; white-space:pre-wrap; line-height:1.7; margin:6px 0; }
body.dark .write-your { background:#20272f; border-color:#2b3542; }
.axis-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
@media (max-width:700px){ .axis-row { grid-template-columns:1fr; } }
.axis-cell { border-radius:12px; padding:14px; color:#fff; text-align:center; }
.axis-val { font-size:30px; font-weight:800; font-family:"Sora",sans-serif; }
.axis-name { font-weight:600; font-size:14px; }
.axis-sub { font-size:11.5px; opacity:.9; }

/* v0.5 — panel administratora */
.admin-card { border:2px solid #ffe066; background:linear-gradient(180deg,#fffdf5,#fff); }
body.dark .admin-card { background:#211d10; border-color:#6b5a10; }
.import-box { display:flex; align-items:center; gap:14px; padding:14px; margin-top:12px;
  border:2px dashed #dde5ec; border-radius:12px; background:#fbfcfe; }
body.dark .import-box { background:#171d25; border-color:#2b3542; }
.code-area { width:100%; min-height:420px !important; font-family:"IBM Plex Mono",monospace;
  font-size:12.5px; line-height:1.5; white-space:pre; overflow-wrap:normal; overflow-x:auto; }

/* v0.5.1 — wybór liczby zadań */
.size-picker { text-align:center; }
.pool-badge { display:inline-block; background:#eef2f6; border-radius:999px; padding:7px 16px;
  font-family:"IBM Plex Mono",monospace; font-size:13.5px; margin:6px 0 14px; }
body.dark .pool-badge { background:#242e3a; }
.size-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-bottom:14px; }
.size-btn { border:2px solid #e3e9ef; background:#fff; padding:14px 10px; cursor:pointer; font-family:inherit; color:#1b2430; transition:.15s; }
.size-btn b { font-family:"Sora",sans-serif; font-size:24px; display:block; }
.size-btn:hover { border-color:#e8590c; box-shadow:0 8px 20px rgba(232,89,12,.14); }
.size-all { background:linear-gradient(135deg,#fff4e6,#fff9db); border-color:#ffd43b; }
.size-all b { font-size:17px; letter-spacing:.04em; }
body.dark .size-btn { background:#1a212a; border-color:#2b3542; color:#e6ebf1; }
body.dark .size-all { background:#2a2413; border-color:#6b5a10; }

.gap-all { background:linear-gradient(135deg,#c2410c,#f59f00); grid-column:span 2; }
.gap-all .gap-name { font-size:15px; letter-spacing:.03em; }
@media (max-width:600px){ .gap-all { grid-column:span 1; } }

/* v0.6.1 — adres dla telefonu */
.phone-url { font-family:"IBM Plex Mono",monospace; font-size:20px; font-weight:700; color:#e8590c;
  background:#fff4e6; border:2px dashed #ffd8a8; border-radius:12px; padding:12px 16px;
  text-align:center; margin:10px 0; user-select:all; word-break:break-all; }
body.dark .phone-url { background:#2a1c10; border-color:#6b4a10; }
/* bezpieczne marginesy na telefonach z wcięciem ekranu */
@media (max-width:720px){
  aside { padding-top:calc(10px + env(safe-area-inset-top)); }
}

/* ================= v0.8 — tryb telefonu ================= */
.down-bar { position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:#c92a2a; color:#fff; padding:12px 16px; display:flex; gap:12px;
  align-items:center; flex-wrap:wrap; box-shadow:0 -6px 20px rgba(0,0,0,.25);
  padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
.down-bar .btn { background:#fff; color:#c92a2a; font-weight:700; margin-left:auto; }
.down-bar .small { opacity:.9; font-size:12.5px; }

#installbtn { display:none; }

@media (max-width:720px){
  /* menu jako pasek na dole — kciuk zawsze go dosięgnie */
  aside { position:fixed; bottom:0; left:0; right:0; top:auto; z-index:120; padding:0; box-shadow:0 -4px 18px rgba(0,0,0,.28); }
  aside .brand, aside .userbox,   aside nav { display:flex; align-items:stretch; overflow-x:auto; gap:0; width:100%; scrollbar-width:none; }
  aside nav::-webkit-scrollbar { display:none; }
  aside nav .nav { flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
    gap:2px; padding:8px 12px; font-size:10.5px; min-width:62px; border-radius:12px; }
  #app { display:block; }
  main { max-width:100%; }
  /* wygodniejsze dotykanie */
  .btn { min-height:46px; padding:12px 18px; font-size:15px; }
  .btn.mini { min-height:36px; padding:7px 12px; }
  .options .option { padding:16px; font-size:16px; min-height:58px; }
  .options .option::before { flex:0 0 30px; height:30px; }
  .card { padding:14px; border-radius:14px; }
  .card .input { font-size:16px; padding:14px; }   /* 16px = brak przybliżania przez iOS */
  .size-btn { min-height:64px; }
  .tile { min-height:96px; }
  .fc-card { min-height:180px; padding:18px; }
  .fc-word { font-size:27px; }
  .table, .worksheet { font-size:12.5px; }
  .chain-link { padding:14px 10px; }
  .link-dot { width:42px; height:42px; min-width:42px; }
  .hero { border-radius:14px; }
  .modal { width:96%; max-height:88vh; }
  .word-pop { width:min(300px, 92vw); }
  .read-text { font-size:17px; line-height:2.05; }
}
/* tryb pełnoekranowy (po dodaniu do ekranu głównego) */
@media (display-mode: standalone){
  body { overscroll-behavior-y: none; }
}

/* ================= v0.9 — TRYB SKUPIENIA I CZYSTY WIDOK ================= */
/* pasek zadania: jedyny element interfejsu poza samym ćwiczeniem */
.focus-bar { position:fixed; top:0; left:0; right:0; z-index:150;
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top));
  color:#fff; box-shadow:0 4px 18px rgba(20,40,70,.18); }
.focus-ember  { background:linear-gradient(120deg,#c2410c,#e8590c); }
.focus-indigo { background:linear-gradient(120deg,#312e81,#4c5fd5); }
.focus-teal   { background:linear-gradient(120deg,#065f46,#0ca678); }
.focus-violet { background:linear-gradient(120deg,#4a1d96,#7048e8); }
.focus-gold   { background:linear-gradient(120deg,#92400e,#e8a202); }
.focus-back { border:none; background:rgba(255,255,255,.18); color:#fff; width:38px; height:38px;
  min-width:38px; border-radius:12px; font-size:20px; cursor:pointer; line-height:1; }
.focus-back:active { transform:scale(.93); }
.focus-txt { min-width:0; flex:1; }
.focus-title { font-family:"Sora",sans-serif; font-weight:700; font-size:15.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.focus-sub { font-size:11.5px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.focus-count { font-family:"IBM Plex Mono",monospace; font-size:13px;
  background:rgba(255,255,255,.18); border-radius:999px; padding:5px 12px; white-space:nowrap; }
.focus-line { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.25); }
.focus-line-fill { height:100%; width:0; background:#fff; transition:width .35s ease; }

/* w trybie skupienia chowamy wszystko poza zadaniem */
body.focus aside { display:none !important; }
body.focus #app { display:block; }
body.focus main { padding:calc(64px + env(safe-area-inset-top)) 14px 24px; max-width:760px; margin:0 auto; }
body.focus .hero { display:none; }               /* nagłówek modułu zbędny — jest pasek */
body.focus .card { box-shadow:none; border:1px solid var(--line, #e3e9ef); }
body.focus .down-bar { z-index:210; }

/* ================= porządki wizualne ================= */
main { position:relative; }
.card { overflow:hidden; }                        /* koniec wychodzenia treści poza kartę */
.card + .card { margin-top:14px; }
.hero { position:relative; z-index:1; }
.hero::after { pointer-events:none; }             /* ozdobne koło nie łapie kliknięć */
.tile, .gap-cell, .size-btn, .chain-link, .chapter, .option { -webkit-tap-highlight-color:transparent; }
img, svg, .read-text, .qtext, .fc-word, .bubble-en { overflow-wrap:anywhere; }
.table { display:block; overflow-x:auto; }        /* szerokie tabele przewijają się, nie rozpychają */

@media (max-width:720px){
  /* pojedyncza kolumna wszędzie — koniec nachodzenia elementów */
  .grid2, .grid3, .start-grid, .builder, .axis-row { grid-template-columns:1fr !important; }
  .tile-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .gap-grid { grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); }
  .size-grid { grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); }
  .options { grid-template-columns:1fr; }         /* odpowiedzi jedna pod drugą */
  .hero { flex-wrap:wrap; }
  .hero h2 { font-size:18px; line-height:1.25; }
  .hero-sub { font-size:12.5px; }
  .hero-emoji { font-size:28px; }
  .pl-top { gap:8px; }
  .progress { min-width:90px; }
  .set-row { gap:8px; }
  .set-row .input, .set-row select { flex:1; min-width:0; }
  .fb-grid { grid-template-columns:1fr; gap:2px 0; }
  .fb-label { margin-top:6px; font-size:12px; }
  .bars { height:70px; }
  .stage-row { grid-template-columns:1fr; gap:4px; }
  .stage-row .muted { grid-column:1; }
  .bank-row, .task-row { flex-wrap:wrap; }
  .modal { padding:14px; }
  .exam-grade { flex-direction:column; text-align:center; }
  .week-row { gap:10px; }
  .week-cell { flex:1; min-width:98px; }
}

/* subtelniejsza dynamika: mniej ruchu, więcej klarowności */
.tile:hover, .topic-card:hover, .size-btn:hover { transform:translateY(-2px); }
.card { transition:box-shadow .2s ease; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.down-bar { animation:slideUp .25s ease; }
@keyframes slideUp { from { transform:translateY(100%); } to { transform:none; } }
.down-txt { min-width:0; flex:1; }
.down-bar b { display:block; }

/* ================= v1.0 — WYGLĄD I ZACHOWANIE NATYWNEJ APLIKACJI ================= */
:root{
  --lf-shadow: 0 4px 0 rgba(0,0,0,.18);
  --lf-radius: 18px;
}
/* nic nie wygląda jak strona: brak zaznaczania, podświetleń, przeciągania */
html, body { overscroll-behavior:none; -webkit-tap-highlight-color:transparent; }
body { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
input, textarea, .read-text, .write-your, .code-area, .passage, .bubble-en, .qtext, .fc-word {
  user-select:text; -webkit-user-select:text; }
a, button { -webkit-touch-callout:none; }

/* PRZYCISKI w stylu aplikacji do nauki: masywne, z cieniem i wciśnięciem */
.btn {
  border:none; border-radius:14px; font-weight:700; letter-spacing:.01em;
  text-transform:none; box-shadow:var(--lf-shadow);
  transition:transform .06s ease, box-shadow .06s ease, filter .12s ease;
}
.btn:active:not(:disabled) { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.18); }
.btn:hover:not(:disabled) { transform:none; filter:brightness(1.04); }
.btn.primary { background:#e8590c; color:#fff; }
.btn.ok { background:#0ca678; color:#fff; }
.btn.ghost { background:#eef2f6; color:#3b4754; box-shadow:0 3px 0 rgba(0,0,0,.10); }
body.dark .btn.ghost { background:#242e3a; color:#e6ebf1; }
.btn.big { font-size:16px; padding:15px 26px; border-radius:16px; }

/* ODPOWIEDZI: kafle z wciśnięciem, jak w aplikacjach mobilnych */
.options .option { border-radius:16px; box-shadow:0 3px 0 #dbe3ea; border-width:2px;
  transition:transform .06s ease, box-shadow .06s ease, background .12s, border-color .12s; }
body.dark .options .option { box-shadow:0 3px 0 #232c37; }
.options .option:active:not(:disabled) { transform:translateY(3px); box-shadow:none; }
.options .option.opt-picked { box-shadow:0 3px 0 #f08c00; }

/* DOLNE ZAKŁADKI — pasek nawigacji jak w natywnej aplikacji */
aside nav { display:flex; }
.tab-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color:#8a94a0; font-family:inherit; font-size:10.5px;
  padding:8px 4px; cursor:pointer; border-radius:14px; transition:color .15s, transform .1s; }
.tab-btn .tab-ico { font-size:21px; line-height:1; transition:transform .15s; }
.tab-btn.active { color:#fff; }
.tab-btn.active .tab-ico { transform:translateY(-2px) scale(1.12); }
.tab-btn.active::after { content:""; width:22px; height:3px; border-radius:99px;
  background:#e8590c; margin-top:1px; }
.tab-btn:active { transform:scale(.94); }

/* ARKUSZ „WIĘCEJ" wysuwany z dołu */
.sheet-bg { position:fixed; inset:0; background:rgba(12,16,22,0); z-index:180;
  display:flex; align-items:flex-end; transition:background .22s ease; }
.sheet-bg.open { background:rgba(12,16,22,.55); }
.sheet { width:100%; max-height:82vh; overflow:auto; background:#fff;
  border-radius:24px 24px 0 0; padding:10px 16px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .24s cubic-bezier(.2,.9,.3,1.05); }
.sheet-bg.open .sheet { transform:none; }
body.dark .sheet { background:#1a212a; }
.sheet-grip { width:44px; height:5px; border-radius:99px; background:#dde5ec; margin:4px auto 10px; }
.sheet h3 { margin:2px 0 10px; }
.sheet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; }
.sheet-item { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; background:#f6f8fb; border:none; cursor:pointer; font-family:inherit; font-size:12px; color:#1b2430; text-align:center; transition:transform .08s; }
body.dark .sheet-item { background:#242e3a; color:#e6ebf1; }
.sheet-item:active { transform:scale(.95); }
.sheet-ico { font-size:26px; }
.sheet-foot { display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.sheet-close { width:100%; margin-top:12px; }

/* przycisk wyciszenia lektora */
.mute-btn { border:none; background:rgba(255,255,255,.2); color:#fff; width:36px; height:36px;
  border-radius:12px; font-size:17px; cursor:pointer; }
.mute-btn:active { transform:scale(.9); }
.fc-speak + .mute-btn { background:#eef2f6; color:#3b4754; width:32px; height:32px; font-size:15px; }
body.dark .fc-speak + .mute-btn { background:#242e3a; color:#e6ebf1; }

/* PRZEJŚCIA MIĘDZY EKRANAMI — jak w aplikacji, nie jak przeładowanie strony */
main > * { animation:screenIn .28s cubic-bezier(.2,.9,.3,1) both; }
@keyframes screenIn { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }

/* karty: bardziej „aplikacyjne" */
.card { border-radius:var(--lf-radius); border:1px solid #e9eef4; box-shadow:0 2px 10px rgba(20,40,70,.05); }
body.dark .card { border-color:#242e3a; }
.hero { border-radius:20px; }
.tile { border-radius:18px; }
.tile:active { transform:scale(.97); }
.chapter, .chain-link, .topic-card, .gap-cell, .size-btn, .kind-cell, .sheet-item { border-radius:16px; }
.gap-cell:active, .chapter:active, .chain-link:active, .size-btn:active { transform:scale(.97); }

@media (max-width:720px){
  aside { background:#12161c; border-top:1px solid rgba(255,255,255,.08); }
  body.dark aside { background:#0d1116; }
  aside nav { padding:4px 6px calc(4px + env(safe-area-inset-bottom)); }
  main { padding:12px 12px 92px; }
  /* pasek zadania i dolne zakładki nigdy się nie nakładają */
  .fc-card { border-radius:22px; }
  .qtext { font-size:19px; }
  .btn { width:auto; }
  .fb-btns .btn { flex:1; min-width:130px; }
}

/* ================= v1.1 — czytelny ekran wyboru fiszek ================= */
/* jedna wyraźna karta akcji zamiast siatki kolorowych kafli */
.fc-primary {
  display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:20px;
  background:linear-gradient(120deg,#c2410c,#e8590c 55%,#f59f00); color:#fff;
  cursor:pointer; box-shadow:0 8px 24px rgba(232,89,12,.28);
  transition:transform .08s ease, box-shadow .08s ease; margin-bottom:12px;
}
.fc-primary:active { transform:scale(.98); }
.fc-primary-emoji { font-size:38px; line-height:1; }
.fc-primary-txt { flex:1; min-width:0; }
.fc-primary-label { font-size:12px; text-transform:uppercase; letter-spacing:.06em; opacity:.85; }
.fc-primary-txt h2 { margin:2px 0 3px; font-size:21px; }
.fc-primary-sub { font-size:13px; opacity:.9; }
.fc-primary-arrow { font-size:24px; opacity:.85; }

/* drugorzędne luki — małe, spokojne chipy pod główną kartą */
.fc-weak-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.chip-warn { background:#fff4e6; color:#c2410c; border:1px solid #ffd8a8; }
.chip-warn:active { background:#ffe8cc; }

/* zwinięte sekcje: spokojna lista przycisków zamiast kolorowej siatki */
.fc-mode-row { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.fc-mode-btn {
  display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  border:1px solid #e9eef4; background:#fff; border-radius:12px; padding:12px 14px;
  font-family:inherit; font-size:14.5px; color:#1b2430; cursor:pointer;
}
.fc-mode-btn span { font-size:18px; }
.fc-mode-btn:active { background:#f6f8fb; }
body.dark .fc-mode-btn { background:#1a212a; border-color:#242e3a; color:#e6ebf1; }
body.dark .fc-mode-btn:active { background:#20272f; }

/* ================= v1.2 — przepisywanie błędnego słowa na czysto ================= */
.fc-retype-toggle { display:inline-flex; }
.fc-retype-box {
  width:100%; max-width:560px; margin-top:14px; padding:16px; border-radius:16px;
  background:#fff9db; border:2px solid #ffe066; animation:popIn .25s ease;
}
body.dark .fc-retype-box { background:#2a2413; border-color:#6b5a10; }
.fc-retype-label { font-size:13px; font-weight:700; color:#8a6d00; margin-bottom:6px; }
body.dark .fc-retype-label { color:#ffe066; }
.fc-retype-target {
  font-family:"Sora",sans-serif; font-size:22px; font-weight:700; letter-spacing:.02em;
  color:#1b2430; margin-bottom:10px; padding:8px 12px; background:#fff; border-radius:10px;
  display:inline-block;
}
body.dark .fc-retype-target { background:#1a212a; color:#e6ebf1; }
.fc-retype-ok {
  color:#087f5b; font-weight:700; font-size:15px; margin-top:12px; text-align:center;
  animation:popIn .2s ease;
}
.fc-shake { animation:shake .35s ease; border-color:#e03131 !important; }

/* ================= v1.3 — poprawki układu mobilnego ================= */
@media (max-width:720px){
  /* pasek nawigacji ma stałą, niską wysokość — nigdy nie zabiera pół ekranu */
  aside { flex-direction:row !important; height:auto; max-height:88px; }
  aside nav { flex-direction:row !important; }
  aside nav .tab-btn { flex:1 1 0; min-width:0; }
  aside nav .tab-lbl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  /* zapas pod paskiem, żeby treść nigdy nie chowała się pod menu */
  main { padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important; }
  body.focus main { padding-bottom:32px !important; }
}

/* karta wprowadzająca nowe słówko (przed odpytaniem) */
.fc-intro { border-color:#4c5fd5; background:linear-gradient(180deg,#f4f6ff,#fff); }
body.dark .fc-intro { background:#171d2b; border-color:#3b4a8a; }
.fc-intro-label { font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  color:#4c5fd5; font-weight:700; margin-bottom:10px; }
.fc-intro .fc-pl { font-size:22px; color:#1b2430; margin-top:6px; }
body.dark .fc-intro .fc-pl { color:#e6ebf1; }

/* ================= trener trzech form czasownika ================= */
.verb-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }
@media (max-width:600px){ .verb-grid { grid-template-columns:1fr; } }
.verb-cell { border:2px solid #e3e9ef; border-radius:14px; padding:12px 14px; background:#fff; }
body.dark .verb-cell { background:#1a212a; border-color:#2b3542; }
.verb-cell-given { background:linear-gradient(180deg,#e6fcf5,#fff); border-color:#0ca678; }
body.dark .verb-cell-given { background:#12251f; border-color:#0ca678; }
.verb-cell-label { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  color:#8a94a0; font-weight:700; }
.verb-cell-sub { font-size:11px; color:#adb5bd; margin-bottom:8px; }
.verb-cell-value { font-family:"Sora",sans-serif; font-size:22px; font-weight:700; color:#087f5b; }
body.dark .verb-cell-value { color:#38d9a9; }
.verb-input { width:100%; font-size:17px !important; padding:10px 12px !important; }
.verb-input.verb-bad { border-color:#e03131 !important; background:#fff5f5; }
body.dark .verb-input.verb-bad { background:#2a1618; }
.verb-answer { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:"Sora",sans-serif; font-size:20px; font-weight:700; margin:6px 0; }
.verb-arrow { color:#8a94a0; font-weight:400; }
.verb-examples { margin-top:14px; }
.verb-examples h4 { margin:0 0 8px; font-size:14px; color:#4c5fd5; }

/* ================= v1.5 — prędkość lektora, kierunek, dyktando ================= */
.speed-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:8px 0 10px; }
.speed-btn { border:1.5px solid #e3e9ef; background:#fff; border-radius:999px;
  padding:6px 12px; font-size:12.5px; font-family:inherit; color:#5c6672; cursor:pointer; }
.speed-btn.active { background:#e8590c; border-color:#e8590c; color:#fff; font-weight:700; }
body.dark .speed-btn { background:#1a212a; border-color:#2b3542; color:#c3ccd8; }
body.dark .speed-btn.active { background:#e8590c; border-color:#e8590c; color:#fff; }

/* wybór kierunku tłumaczenia */
.opt-row-btns { display:flex; flex-direction:column; gap:6px; }
.mode-btn { text-align:left; border:2px solid #e3e9ef; background:#fff; border-radius:12px;
  padding:10px 14px; font-family:inherit; color:#1b2430; cursor:pointer; }
.mode-btn b { font-size:14.5px; }
.mode-btn .small { color:#8a94a0; }
.mode-btn.active { border-color:#e8590c; background:#fff7ed; }
body.dark .mode-btn { background:#1a212a; border-color:#2b3542; color:#e6ebf1; }
body.dark .mode-btn.active { background:#2a1c10; border-color:#e8590c; }

/* dyktando: wynik i podświetlenie słów */
.dict-score { font-size:14px; margin-bottom:6px; }
.diffbox { font-family:"IBM Plex Mono",monospace; font-size:15px; line-height:2;
  background:#fbfcfe; border:1px solid #dde5ec; border-radius:10px; padding:10px 12px; }
body.dark .diffbox { background:#171d25; border-color:#2b3542; }
.dw-ok { color:#1b2430; }
body.dark .dw-ok { color:#e6ebf1; }
.dw-bad { color:#c92a2a; font-weight:700; text-decoration:underline wavy #e03131; }
.dw-missing { color:#c92a2a; font-weight:700; opacity:.75; }
.dw-missing::before { content:"["; } .dw-missing::after { content:"]"; }
.dw-extra { color:#f08c00; text-decoration:line-through; }
.dict-wrong { margin-top:8px; font-size:13.5px; color:#c92a2a; }

/* ================= GRY ================= */
.game-rank { margin-top:6px; font-size:11.5px; opacity:.85; }
.game-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.streak-badge.hot { background:#ffe066; color:#8a6d00; font-weight:700; }
.game-themes { display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.game-theme-row { display:flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px solid #e9eef4; border-radius:10px; flex-wrap:wrap; }
body.dark .game-theme-row { border-color:#2b3542; }
.gt-name { flex:1; min-width:130px; font-size:14px; display:flex; align-items:center; gap:6px; }
.gt-count { min-width:74px; }
.game-theme-row .short { width:74px; }
.chip-btn.active { background:#e8590c; color:#fff; }
.game-result { text-align:center; margin:14px 0; }
.gr-big { font-family:"Sora",sans-serif; font-size:40px; font-weight:800; color:#e8590c; }

/* gra: pary */
.pairs-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pairs-col { display:flex; flex-direction:column; gap:8px; }
.pair-tile { border:2px solid #e3e9ef; background:#fff; border-radius:12px; padding:14px 10px;
  font-family:inherit; font-size:15px; color:#1b2430; cursor:pointer; min-height:52px;
  transition:transform .08s, background .15s, border-color .15s, opacity .3s; }
body.dark .pair-tile { background:#1a212a; border-color:#2b3542; color:#e6ebf1; }
.pair-en { font-weight:700; }
.pair-tile:active { transform:scale(.96); }
.pair-tile.sel { border-color:#4c5fd5; background:#eef1ff; }
body.dark .pair-tile.sel { background:#1c2333; }
.pair-tile.done { opacity:.35; border-color:#0ca678; background:#e6fcf5; pointer-events:none; }
body.dark .pair-tile.done { background:#12251f; }
.pair-tile.bad { border-color:#e03131; background:#fff5f5; animation:shake .35s ease; }
body.dark .pair-tile.bad { background:#2a1618; }

/* gra: deszcz */
.rain-stage { position:relative; height:210px; border:2px dashed #dde5ec; border-radius:14px;
  overflow:hidden; background:linear-gradient(180deg,#f4f8ff,#fff); margin-bottom:12px; }
body.dark .rain-stage { background:linear-gradient(180deg,#161c26,#1a212a); border-color:#2b3542; }
.rain-drop { position:absolute; left:50%; transform:translateX(-50%); top:0;
  font-family:"Sora",sans-serif; font-size:24px; font-weight:700; color:#1b2430;
  background:#fff; border:2px solid #4c5fd5; border-radius:12px; padding:8px 18px;
  white-space:nowrap; box-shadow:0 4px 12px rgba(76,95,213,.2); }
body.dark .rain-drop { background:#1a212a; color:#e6ebf1; }
.rain-drop.hit { border-color:#0ca678; background:#e6fcf5; }
.rain-drop.miss { border-color:#e03131; background:#fff5f5; animation:shake .35s ease; }
.rain-opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rain-opt { border:2px solid #e3e9ef; background:#fff; border-radius:12px; padding:14px 10px;
  font-family:inherit; font-size:15px; color:#1b2430; cursor:pointer; min-height:54px; }
body.dark .rain-opt { background:#1a212a; border-color:#2b3542; color:#e6ebf1; }
.rain-opt:active { transform:scale(.96); }
.rain-opt.ok { border-color:#0ca678; background:#e6fcf5; }
body.dark .rain-opt.ok { background:#12251f; }
.rain-opt.bad { border-color:#e03131; background:#fff5f5; animation:shake .3s ease; }
.rain-answer { margin-top:10px; text-align:center; font-weight:700; color:#c92a2a; }
@media (max-width:600px){
  .rain-stage { height:180px; }
  .rain-drop { font-size:20px; }
  .pair-tile { font-size:14px; padding:12px 8px; }
}

/* panel administratora: dostęp do działów */
.access-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:8px; margin:10px 0; }
.access-item { display:flex; align-items:center; gap:8px; padding:10px 12px;
  border:1px solid #e9eef4; border-radius:10px; font-size:14px; cursor:pointer; }
body.dark .access-item { border-color:#2b3542; }
.acc-emo { font-size:17px; }
.users-tbl select { padding:5px 8px; border-radius:8px; }

/* gra w pary: karty zakryte, odkrywane kliknięciem */
.pair-card { position:relative; border:2px solid #e3e9ef; background:#fff; border-radius:14px;
  padding:0; min-height:58px; cursor:pointer; overflow:hidden;
  font-family:inherit; transition:transform .1s, border-color .15s, opacity .3s; }
body.dark .pair-card { background:#1a212a; border-color:#2b3542; }
.pair-card .pc-back, .pair-card .pc-face {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:8px; text-align:center; transition:opacity .18s; }
.pair-card .pc-back { font-size:22px; opacity:1;
  background:linear-gradient(135deg,#4c5fd5,#7048e8); color:#fff; }
.pair-card .pc-face { font-size:15px; color:#1b2430; opacity:0; }
body.dark .pair-card .pc-face { color:#e6ebf1; }
.pair-en .pc-face { font-weight:700; }
.pair-card.open .pc-back { opacity:0; }
.pair-card.open .pc-face { opacity:1; }
.pair-card.open { border-color:#4c5fd5; }
.pair-card:active { transform:scale(.96); }
.pair-card.done { opacity:.35; border-color:#0ca678; pointer-events:none; }
.pair-card.done .pc-back { opacity:0; }
.pair-card.done .pc-face { opacity:1; }
.pair-card.bad { border-color:#e03131; animation:shake .35s ease; }
.pair-card.bad .pc-face { color:#c92a2a; }

/* ================= przegląd treści przez administratora ================= */
.rv-title { font-family:"Sora",sans-serif; font-size:17px; font-weight:700; margin:10px 0 12px; }
.rv-block { border-radius:12px; padding:12px 14px; margin-bottom:10px; border-left:4px solid #dde5ec; }
.rv-label { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#8a94a0; margin-bottom:5px; }
.rv-text { font-size:15px; line-height:1.5; white-space:pre-wrap; }
.rv-q { background:#f4f7fa; border-left-color:#4c5fd5; }
.rv-good { background:#e6fcf5; border-left-color:#0ca678; }
.rv-bad { background:#fff5f5; border-left-color:#e03131; }
.rv-extra { background:#fff9db; border-left-color:#f0a202; }
body.dark .rv-q { background:#1c2333; } body.dark .rv-good { background:#12251f; }
body.dark .rv-bad { background:#2a1618; } body.dark .rv-extra { background:#2a2413; }
.rv-flag { margin-top:14px; padding:14px; border:2px dashed #ffd43b; border-radius:14px;
  background:#fffbea; }
body.dark .rv-flag { background:#231e10; border-color:#6b5a10; }
.rv-flag textarea { min-height:70px; margin-top:8px; }
.ch-flagged { border-left:4px solid #f0a202; }
.rv-note { border:1px solid #e9eef4; border-radius:12px; padding:12px; margin-bottom:10px; }
body.dark .rv-note { border-color:#2b3542; }
.rv-note-head { display:flex; justify-content:space-between; gap:8px; align-items:center;
  flex-wrap:wrap; margin-bottom:6px; }
.rv-note-q { font-size:13.5px; color:#5c6672; margin-bottom:6px; }
body.dark .rv-note-q { color:#9aa6b4; }
.rv-note-txt { background:#fff9db; border-radius:8px; padding:8px 10px; font-weight:600; }
body.dark .rv-note-txt { background:#2a2413; }

/* gry: wiersz "wszystkie kategorie" */
.game-all-row { display:flex; align-items:center; gap:8px; padding:10px 12px; flex-wrap:wrap;
  border:2px solid #ffd43b; border-radius:12px; background:#fffbea; margin:10px 0; }
body.dark .game-all-row { background:#231e10; border-color:#6b5a10; }
.game-all-row .short { width:82px; }
.game-themes.dimmed { opacity:.4; pointer-events:none; }

/* fiszka ze słuchu */
.fc-audio { border-color:#7048e8; background:linear-gradient(180deg,#f6f3ff,#fff); }
body.dark .fc-audio { background:#1d1830; border-color:#7048e8; }
.tag-audio { background:#7048e8; color:#fff; }
.big-play { font-size:19px; padding:16px 34px; margin:10px 0; }

/* ================= TEORIA: tabele, sekcje, ćwiczenia ================= */
.kb-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:12px; background:#f4f7fa; border-radius:12px; margin-bottom:14px; }
body.dark .kb-toolbar { background:#1c2333; }
.kb-intro { font-size:16px; line-height:1.6; padding:14px 16px; border-radius:12px;
  background:linear-gradient(135deg,#fff4e6,#fff9db); border-left:4px solid #e8590c;
  margin-bottom:16px; }
body.dark .kb-intro { background:#2a1c10; }

.kb-table-wrap { margin:16px 0; }
.kb-table-wrap h4 { margin:0 0 4px; color:#4c5fd5; }
.kb-table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:8px;
  border:2px solid #dde5ec; border-radius:12px; }
body.dark .kb-table-scroll { border-color:#2b3542; }
.kb-table { border-collapse:collapse; width:100%; min-width:520px; font-size:14px; }
.kb-table th { background:#4c5fd5; color:#fff; padding:10px 8px; text-align:left;
  font-size:11.5px; line-height:1.3; font-weight:700; vertical-align:bottom; }
.kb-table td { padding:9px 8px; border-top:1px solid #e9eef4; }
body.dark .kb-table td { border-color:#242e3a; }
.kb-table tr:nth-child(even) td { background:#fbfcfe; }
body.dark .kb-table tr:nth-child(even) td { background:#171d25; }
.kb-table .kbt-c0 { font-weight:700; background:#eef2f7 !important; white-space:nowrap; }
body.dark .kb-table .kbt-c0 { background:#20272f !important; }
.kb-table .kbt-en { font-family:"IBM Plex Mono",monospace; cursor:pointer; }
.kb-table .kbt-en:hover { background:#fff4e6 !important; }
.kb-table th.kbt-c1 { background:#4c5fd5; } .kb-table th.kbt-c2 { background:#0ca678; }
.kb-table th.kbt-c3 { background:#7048e8; } .kb-table th.kbt-c4 { background:#e8a202; }

.kb-block { border-radius:14px; padding:14px 16px; margin-bottom:12px; border-left:5px solid; }
.kb-block-head { display:flex; align-items:center; gap:8px; font-size:16px; margin-bottom:8px; }
.kb-block-emo { font-size:20px; }
.kb-block-txt { font-size:14.5px; line-height:1.6; margin-bottom:6px; }
.kb-indigo { background:#eef1ff; border-color:#4c5fd5; } body.dark .kb-indigo { background:#1a2033; }
.kb-teal   { background:#e6fcf5; border-color:#0ca678; } body.dark .kb-teal   { background:#12251f; }
.kb-violet { background:#f3f0ff; border-color:#7048e8; } body.dark .kb-violet { background:#1d1830; }
.kb-gold   { background:#fff9db; border-color:#e8a202; } body.dark .kb-gold   { background:#2a2413; }
.kb-ember  { background:#fff4e6; border-color:#e8590c; } body.dark .kb-ember  { background:#2a1c10; }
.kb-tip { margin-top:8px; padding:8px 12px; background:rgba(255,255,255,.7);
  border-radius:8px; font-size:13.5px; font-weight:600; }
body.dark .kb-tip { background:rgba(255,255,255,.07); }
.kb-sec-warn h4 { color:#c92a2a; }
.kb-criteria { margin:10px 0; padding:8px 12px; background:#f4f7fa; border-radius:10px; }
body.dark .kb-criteria { background:#1c2333; }

/* ćwiczenia z luką */
.gap-sentence { font-family:"Sora",sans-serif; font-size:21px; line-height:1.8; margin:12px 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.gap-slot { display:inline-flex; align-items:center; justify-content:center;
  min-width:74px; padding:2px 12px; border-bottom:3px solid #e8590c; color:#e8590c;
  font-weight:700; }
.gap-done { color:#087f5b; }
body.dark .gap-done { color:#38d9a9; }
@media (max-width:600px){ .gap-sentence { font-size:18px; } .kb-table { min-width:460px; } }

/* ================= v2.1 — porządki w ustawieniach sesji ================= */
.size-chosen { text-align:center; font-weight:700; color:#e8590c; margin:10px 0; font-size:15px; }
.start-btn { width:100%; margin-top:12px; font-size:18px; padding:16px; }
.size-picker .set-row { justify-content:center; margin-top:10px; }

/* przełączniki opcji — czytelne karty zamiast luźnych chipów */
.opt-card { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; margin-top:8px;
  border:2px solid #e9eef4; border-radius:12px; background:#fff; cursor:pointer; text-align:left; }
body.dark .opt-card { background:#1a212a; border-color:#2b3542; }
.opt-card input[type=checkbox] { width:20px; height:20px; margin-top:2px; flex:0 0 auto; accent-color:#e8590c; }
.opt-card-txt b { display:block; font-size:14.5px; }
.opt-card-txt .small { color:#8a94a0; margin-top:2px; }
.opt-card.on { border-color:#e8590c; background:#fff7ed; }
body.dark .opt-card.on { background:#2a1c10; }
.opt-group-title { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#8a94a0; margin:14px 0 4px; }

/* runda utrwalenia / poprawka */
.fc-block-intro { text-align:center; padding:26px 18px; }
.fbi-emo { font-size:48px; margin-bottom:8px; }
.fc-block-intro h3 { margin:4px 0 8px; }
.fc-block-intro p { color:#5c6672; max-width:420px; margin:0 auto 16px; }
body.dark .fc-block-intro p { color:#9aa6b4; }
.fc-review { border-color:#4c5fd5; }
.fc-repair { border-color:#f0a202; }
.fc-learn { border-color:#0ca678; }
.fc-word-pl { color:#4c5fd5; }
.tag-review { background:#4c5fd5; color:#fff; }
.tag-repair { background:#f0a202; color:#fff; }
.fb-pair { margin-top:8px; font-size:17px; }

/* sprawdzian z rozbitymi polami */
.quiz-fields { display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.qf-row { display:grid; grid-template-columns:1fr; gap:4px; padding:10px 12px;
  border:1px solid #e9eef4; border-radius:12px; background:#fbfcfe; }
body.dark .qf-row { background:#171d25; border-color:#2b3542; }
.qf-label { font-size:12.5px; font-weight:700; color:#4c5fd5; }
.qf-row .input { font-size:16px; }
.input.qf-ok { border-color:#0ca678 !important; background:#e6fcf5; }
.input.qf-bad { border-color:#e03131 !important; background:#fff5f5; }
body.dark .input.qf-ok { background:#12251f; } body.dark .input.qf-bad { background:#2a1618; }
.qf-answer { font-size:13px; color:#087f5b; font-weight:700; margin-top:4px; }
@media (min-width:620px){ .qf-row { grid-template-columns:210px 1fr; align-items:center; gap:12px; } }

/* diagnostyka lektora */
.tts-diag { margin:12px 0; padding:12px; background:#f4f7fa; border-radius:10px; font-size:13.5px; }
body.dark .tts-diag { background:#1c2333; }
.tts-line { margin:4px 0; font-family:"IBM Plex Mono",monospace; font-size:12.5px; word-break:break-word; }

/* ================= zdanie z lukami do wypełnienia ================= */
.gap-line { font-family:"Sora",sans-serif; font-size:22px; line-height:2.1; margin:14px 0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
.gap-text { white-space:pre-wrap; }
.gap-input { font-family:"Sora",sans-serif; font-size:20px; font-weight:700; color:#e8590c;
  border:none; border-bottom:3px solid #e8590c; background:#fff7ed; border-radius:6px 6px 0 0;
  padding:2px 8px; min-width:74px; text-align:center; outline:none; transition:background .15s; }
.gap-input:focus { background:#ffe8cc; box-shadow:0 3px 0 #f08c00; }
.gap-input::placeholder { color:#ffb066; }
body.dark .gap-input { background:#2a1c10; color:#ffa94d; }
body.dark .gap-input:focus { background:#3a2614; }
@media (max-width:600px){
  .gap-line { font-size:19px; line-height:2.2; }
  .gap-input { font-size:18px; min-width:64px; }
}

/* ================= PODSTAWY (kurs) ================= */
.basics-grid { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.basics-card { display:flex; align-items:flex-start; gap:14px; padding:14px 16px;
  border:2px solid #e9eef4; border-radius:16px; background:#fff; cursor:pointer;
  transition:transform .08s, border-color .15s, box-shadow .15s; }
body.dark .basics-card { background:#1a212a; border-color:#2b3542; }
.basics-card:active { transform:scale(.98); }
.basics-card:hover { border-color:#4c5fd5; box-shadow:0 6px 18px rgba(76,95,213,.14); }
.bc-emoji { font-size:32px; line-height:1; }
.bc-body { flex:1; min-width:0; }
.bc-body b { font-size:16px; display:block; margin-bottom:2px; }
.bc-meta { font-size:12px; color:#8a94a0; margin-top:6px; }
.bc-done { font-size:12.5px; margin-top:6px; color:#087f5b; font-weight:700; }
body.dark .bc-done { color:#38d9a9; }
.bc-level { font-size:11.5px; font-weight:700; color:#4c5fd5; background:#eef1ff;
  border-radius:999px; padding:4px 10px; }
body.dark .bc-level { background:#1c2333; }
.bt-page-title { margin:14px 0 10px; color:#4c5fd5; }

/* ================= v2.6 — uporządkowane kategorie fiszek ================= */
.cat-group-title { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#8a94a0; margin:18px 0 8px; padding-bottom:6px; border-bottom:1px solid #e9eef4; }
body.dark .cat-group-title { border-color:#2b3542; }
.cat-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:8px; }
.cat-btn { position:relative; text-align:left; padding:12px 14px 14px; border:1.5px solid #e9eef4;
  border-radius:14px; background:#fff; cursor:pointer; font-family:inherit; color:#1b2430;
  overflow:hidden; transition:transform .08s, border-color .15s, box-shadow .15s; }
body.dark .cat-btn { background:#1a212a; border-color:#2b3542; color:#e6ebf1; }
.cat-btn b { font-size:14.5px; display:block; }
.cat-sub { font-size:11.5px; color:#8a94a0; margin-top:3px; }
.cat-btn:hover { border-color:#e8590c; box-shadow:0 6px 16px rgba(232,89,12,.13); }
.cat-btn:active { transform:scale(.97); }
.cat-bar { position:absolute; left:0; right:0; bottom:0; height:4px; background:#eef2f6; }
body.dark .cat-bar { background:#242e3a; }
.cat-bar-fill { height:100%; background:linear-gradient(90deg,#e8590c,#f59f00); }
.cat-weak { border-color:#ffd43b; background:#fffbea; }
body.dark .cat-weak { background:#231e10; border-color:#6b5a10; }
.cat-all { background:linear-gradient(135deg,#c2410c,#f59f00); color:#fff; border:none;
  grid-column:1 / -1; padding:16px; }
.cat-all b { font-size:17px; }
.cat-all .cat-sub { color:rgba(255,255,255,.9); }

/* przycisk powtórzenia lektora */
.fc-repeat { border:1.5px solid #e3e9ef; background:#fff; border-radius:999px; padding:5px 12px;
  font-size:12px; font-family:inherit; color:#5c6672; cursor:pointer; margin-left:4px; }
.fc-repeat:active { transform:scale(.94); }
body.dark .fc-repeat { background:#1a212a; border-color:#2b3542; color:#c3ccd8; }

/* numer kroku w kursie Podstawy */
.bc-step { flex:0 0 28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:#eef1ff; color:#4c5fd5; border-radius:9px; font-weight:800; font-size:13px;
  font-family:"IBM Plex Mono",monospace; }
body.dark .bc-step { background:#1c2333; }


/* ===== v2.9: tempo lektora w pasku skupienia ===== */
.focus-tts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
@media (max-width: 560px) { .speed-cycle .sc-lbl { display: none; } .speed-cycle { padding: 4px 9px; font-size: 14px; } }
.speed-cycle {
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: inherit;
  border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap; line-height: 1.2;
}
.speed-cycle:active { transform: scale(.96); }
.focus-bar .mute-btn { margin-left: 0; }
.speed-row { flex-wrap: wrap; }
.speed-btn[data-rate] { min-width: 0; }
.retype-toggle { display: block; margin-top: 10px; }

/* ===== v3.0: PODSTAWY — nowy wygląd (siatka tematów, teoria w dwóch kolumnach, tabele, ściąga) ===== */
.basics-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin-top:12px; }
.basics-card { display:flex; flex-direction:column; gap:6px; padding:16px 16px 14px; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .12s, box-shadow .15s, border-color .15s; }
.basics-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--indigo); }
.basics-card.bc-done::before { background:var(--teal); }
.basics-card.bc-started::before { background:var(--gold); }
.basics-card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(30,40,51,.12); border-color:#b9c3f5; }
.bc-top { display:flex; align-items:center; gap:8px; }
.bc-step { width:26px; height:26px; border-radius:8px; background:var(--indigo-soft); color:var(--indigo);
  font-family:var(--mono); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:0 0 26px; }
.bc-level { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:2px 8px; }
.bc-badge { margin-left:auto; font-size:11.5px; font-weight:700; color:#087f5b; background:var(--teal-soft); border-radius:999px; padding:3px 9px; }
.bc-emoji { font-size:34px; line-height:1; margin:6px 0 2px; }
.bc-name { font-family:var(--display); font-size:15.5px; line-height:1.3; }
.bc-short { font-size:13px; color:var(--ink-soft); line-height:1.45; flex:1; }
.bc-meta { display:flex; gap:12px; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin-top:4px; }
.bc-progress { height:5px; background:var(--steel-deep); border-radius:999px; overflow:hidden; margin-top:6px; }
.bc-progress-fill { height:100%; background:linear-gradient(90deg,var(--indigo),var(--teal)); border-radius:999px; transition:width .4s; }

.bt-topic .bt-intro { font-size:15.5px; line-height:1.65; margin-bottom:14px; }
.bt-cheat { border:1px solid var(--line); border-radius:14px; padding:10px 14px; margin-bottom:16px; background:var(--steel); }
.bt-cheat summary { font-family:var(--display); font-weight:700; cursor:pointer; padding:4px 0; }
.bt-modes { display:grid; gap:10px; }
.bt-mode { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--panel); text-align:left; cursor:pointer; font:inherit; color:inherit; transition:transform .12s, border-color .15s; }
.bt-mode:hover { transform:translateX(3px); }
.bt-mode-indigo:hover { border-color:var(--indigo); } .bt-mode-teal:hover { border-color:var(--teal); } .bt-mode-gold:hover { border-color:var(--gold); }
.bt-mode-emo { font-size:26px; width:40px; text-align:center; }
.bt-mode-txt { display:flex; flex-direction:column; gap:2px; flex:1; }
.bt-mode-txt b { font-family:var(--display); font-size:16px; }
.bt-mode-txt .small { color:var(--ink-soft); }
.bt-mode-arrow { font-size:20px; color:var(--ink-soft); }

/* tabele danych (ściąga, sekcje teorii) */
.tbl-scroll { overflow-x:auto; margin:8px 0; -webkit-overflow-scrolling:touch; }
.data-tbl { border-collapse:separate; border-spacing:0; width:100%; font-size:14px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.data-tbl th { background:var(--indigo-soft); color:var(--indigo); font-family:var(--mono); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em; padding:9px 12px; text-align:left; }
.data-tbl td { padding:9px 12px; border-top:1px solid var(--line); vertical-align:top; line-height:1.45; }
.data-tbl td.tbl-first { font-weight:700; white-space:nowrap; }
.data-tbl tr:nth-child(even) td { background:rgba(238,242,246,.5); }
body.dark .data-tbl { background:#1a212a; border-color:#2b3542; }
body.dark .data-tbl th { background:#26304a; color:#b9c3f5; }
body.dark .data-tbl td { border-color:#2b3542; }
body.dark .data-tbl tr:nth-child(even) td { background:rgba(255,255,255,.03); }

/* teoria: sekcja = lewa kolumna (reguła, tabela, wskazówka) + prawa (przykłady) */
.bt-theory .kb-block { display:grid; grid-template-columns:1fr; gap:14px; border-left-width:5px; padding:16px 18px; }
.bt-theory .kb-left { min-width:0; }
.bt-theory .kb-right { min-width:0; }
.kb-ex-head { font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:6px; }
.bt-theory .kb-block-txt { font-size:15px; line-height:1.65; margin:0 0 8px; }
.bt-theory .kb-ex .en b { font-size:15px; }
@media (min-width: 900px) {
  .bt-theory.bt-twocol .kb-block { grid-template-columns:3fr 2fr; }
  .bt-theory.bt-twocol .kb-right { border-left:1px dashed var(--line); padding-left:16px; }
}
@media (max-width: 899px) { .bt-col-toggle { display:none; } }
.kb-rose { background:#fff0f3; border-color:#e64980; } body.dark .kb-rose { background:#2a1a22; }

/* „dlaczego nie inaczej” */
.fb-whynot { margin-top:10px; background:rgba(255,255,255,.75); border-radius:10px; padding:10px 12px; font-size:14px; }
.fb-whynot-row { margin-top:5px; line-height:1.5; }
.fb-whynot-opt { font-family:var(--mono); font-weight:700; background:var(--red-soft); color:#c92a2a; border-radius:6px; padding:1px 7px; }
body.dark .fb-whynot { background:rgba(0,0,0,.25); }

/* ściąga: przycisk w pasku + wysuwany panel */
.cheat-btn { border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12); color:inherit; border-radius:999px;
  padding:4px 10px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
@media (max-width:560px) { .cheat-btn .sc-lbl { display:none; } .cheat-btn { padding:4px 9px; font-size:14px; } }
.cheat-drawer { position:fixed; top:0; right:0; bottom:0; width:min(560px,94vw); background:var(--panel); z-index:200;
  box-shadow:-8px 0 30px rgba(0,0,0,.25); transform:translateX(100%); transition:transform .22s ease;
  display:flex; flex-direction:column; padding-top:calc(60px + env(safe-area-inset-top)); }
.cheat-drawer.open { transform:translateX(0); }
.cheat-head { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--line); }
.cheat-body { padding:12px 16px 24px; overflow:auto; }
.cheat-body h4 { margin:0 0 8px; font-family:var(--display); }
body.dark .cheat-drawer { background:#141a22; }
.btn.mini { padding:6px 10px; font-size:13px; }

/* pulpit: drugi kafelek „powtórz” */
.continue-box { cursor:pointer; }
.continue-second { background:var(--panel); color:var(--ink); border:1.5px solid var(--line); margin-top:-6px; }
.continue-second .btn { background:var(--steel); color:var(--ink); font-size:14px; padding:9px 16px; }
body.dark .continue-second { background:#1a212a; color:#e6ebf1; border-color:#2b3542; }


/* ===== v3.1: porównanie słowo po słowie, do utrwalenia, mówienie ===== */
.wd-line { line-height: 1.9; }
.wd-w { padding: 1px 4px; border-radius: 6px; }
.wd-ok { color: inherit; }
.wd-bad { background: #ffe3e3; color: #b42323; text-decoration: line-through; font-weight: 600; }
.wd-miss { background: #dff5e3; color: #1c7c3a; font-weight: 600; }
.wd-miss-label { color: var(--ink-soft); font-size: 12px; }
body.dark .wd-bad { background: #4a2020; color: #ff9b9b; }
body.dark .wd-miss { background: #1f4a2a; color: #9be7a8; }
.wchips { margin: 8px 0 2px; line-height: 2.1; }
.wchip { border: 1px dashed var(--line); background: transparent; color: inherit; border-radius: 8px;
  padding: 1px 6px; font: inherit; cursor: pointer; }
.wchip:hover { border-style: solid; border-color: var(--gold); }
.wchip-on { background: #ffe9c2; border-color: #e0a100; border-style: solid; }
body.dark .wchip-on { background: #4a3a10; }
.wchips-hint { margin-left: 6px; }
.say-box { margin-top: 8px; }
.say-out { margin-top: 6px; }
.say-good { color: #1c7c3a; font-weight: 700; margin-top: 4px; }
.say-bad { color: #b42323; font-weight: 700; margin-top: 4px; }
/* tabele: bez ucinania — zawijamy, mniejsza czcionka w wąskiej kolumnie */
.data-tbl td.tbl-first { white-space: normal; }
.data-tbl td, .data-tbl th { padding: 7px 9px; font-size: 13px; word-break: normal; }
.kb-left .data-tbl td, .kb-left .data-tbl th { font-size: 12.5px; padding: 6px 7px; }
.bt-theory.bt-twocol .kb-block:has(.kb-left table) { grid-template-columns: 1fr; }
.bt-theory.bt-twocol .kb-block:has(.kb-left table) .kb-right { border-left: none; padding-left: 0; border-top: 1px dashed var(--line); padding-top: 10px; }
@media (max-width: 560px) { .data-tbl td, .data-tbl th { font-size: 12px; padding: 6px 6px; } .tbl-scroll { margin: 8px -6px; } }
/* nowe typy zadań */
.order-pool, .order-line { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 8px; border-radius: 12px; }
.order-line { border: 2px dashed var(--line); margin-bottom: 10px; }
.order-pool { background: var(--steel); }
.order-w { border: 1.5px solid var(--line); background: var(--panel); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 16px; cursor: pointer; }
.order-w:active { transform: scale(.96); }
.fix-w { border: none; background: transparent; font: inherit; font-size: 18px; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.fix-w:hover { background: var(--steel); }
.cloze-text { font-size: 17px; line-height: 2.2; }
.cloze-sel { font: inherit; font-size: 16px; padding: 4px 8px; border-radius: 8px; border: 1.5px solid var(--indigo); background: var(--panel); color: inherit; margin: 0 3px; }
.cloze-inp { font: inherit; font-size: 16px; padding: 4px 8px; border-radius: 8px; border: 1.5px solid var(--indigo); background: var(--panel); color: inherit; width: 110px; margin: 0 3px; }
.cloze-ok { border-color: #1c7c3a; background: #dff5e3; }
.cloze-bad { border-color: #b42323; background: #ffe3e3; }
.lc-opts .option { text-align: left; }
.dom-toggle { display: inline-flex; gap: 4px; margin: 6px 0 10px; }
.dom-toggle button { border: 1.5px solid var(--line); background: var(--panel); color: inherit; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.dom-toggle button.active { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.cat-btn.cat-checked { outline: 2px solid var(--gold); background: #fff7e0; }
body.dark .cat-btn.cat-checked { background: #3a3010; }
.multi-bar { position: sticky; bottom: 8px; display: flex; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-top: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.chain-skip { margin-left: auto; font-size: 12px; opacity: .7; }
.link-skipped .link-dot { background: #cbd3dc; }

.fc-cloze { font-size: 22px; font-weight: 700; line-height: 1.5; margin-top: 6px; }
.fc-meaning { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--steel); }
.pv-list { display: grid; gap: 8px; }
.pv-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.pv-en { font-weight: 700; font-size: 17px; flex: 1; }
.pv-pl { color: var(--ink-soft); flex: 1; }
.pv-row.pv-hide .pv-pl { visibility: hidden; }

/* ============================================================
   v3.3 — karta czasownika i tabela odmiany
   Spokojny, „papierowy" układ: dużo światła, cienkie linie zamiast ramek,
   jeden akcent (teal) na wyróżnionej formie, treść czytana od lewej do prawej:
   forma → zdanie po angielsku → znaczenie po polsku pod spodem.
   ============================================================ */
.vb-card .fc-face { align-items: flex-start; text-align: left; }
.vb-lemma { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.5px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vb-lemma-pl { font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.vb-question { margin-top: 14px; font-size: 17px; line-height: 1.5; }
.fc-tag.tag-verb { background: var(--teal-soft); color: #07694a; }

.vb-answer { margin-top: 16px; font-size: 15px; }
.vb-table { margin-top: 8px; border-top: 1px solid var(--line); }
.vb-forms { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
.vb-form { flex: 1 1 96px; padding: 8px 10px; border-radius: 10px; background: var(--steel); }
.vb-form-hi { background: var(--teal-soft); box-shadow: inset 0 0 0 1.5px #0ca678; }
.vb-form-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.vb-form-word { font-family: var(--mono); font-size: 16px; font-weight: 600; margin-top: 2px; }
.vb-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--steel-deep); align-items: baseline; }
.vb-row-tense { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.vb-row-en { font-size: 15.5px; font-weight: 600; }
.vb-row-pl { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 560px) {
  .vb-row { grid-template-columns: 1fr; gap: 2px; }
  .vb-row-tense { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
  .vb-lemma { font-size: 26px; }
  .vb-form { flex: 1 1 44%; }
}
body.dark .vb-form { background: #1a212a; }
body.dark .vb-form-hi { background: #10352b; }
body.dark .vb-row { border-color: #263039; }
body.dark .fc-tag.tag-verb { background: #10352b; color: #7ee3c1; }

/* karta ze słowem do utrwalenia — ten sam spokojny styl */
.fc-cloze { font-family: var(--display); letter-spacing: -.3px; }

/* ===== v3.4: zakładka „Czasowniki" (spis) ===== */
.vt-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.vt-tab { border: 1.5px solid var(--line); background: var(--panel); color: inherit;
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; }
.vt-tab.active { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.vt-count { font-size: 11.5px; opacity: .7; font-family: var(--mono); }
.vt-bar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.vt-search { margin: 0; }
.vt-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.vt-filter { border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.vt-filter.active { background: var(--steel); color: var(--ink); border-color: var(--ink-soft); font-weight: 600; }
.vt-info { margin: 6px 0 8px; }
.vt-list { display: flex; flex-direction: column; }
.vt-row { border-top: 1px solid var(--steel-deep); }
.vt-row:last-child { border-bottom: 1px solid var(--steel-deep); }
.vt-head { display: flex; align-items: center; gap: 10px; padding: 10px 2px; cursor: pointer; }
.vt-head:hover { background: var(--steel); }
.vt-main { flex: 1; min-width: 0; }
.vt-en { font-size: 16.5px; font-weight: 600; }
.vt-forms { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--ink-soft); }
.vt-pl { font-size: 13.5px; color: var(--ink-soft); }
.vt-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--steel);
  color: var(--ink-soft); white-space: nowrap; }
.vt-irr { background: var(--gold-soft); color: #8a6100; }
.vt-known { background: var(--teal-soft); color: #07694a; }
.vt-open .vt-head { background: var(--steel); }
.vt-body:empty { display: none; }
.vt-body { padding: 4px 2px 14px; }
.vt-example { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--steel);
  font-size: 14.5px; cursor: pointer; }
body.dark .vt-row, body.dark .vt-row:last-child { border-color: #263039; }
body.dark .vt-head:hover, body.dark .vt-open .vt-head, body.dark .vt-example { background: #1a212a; }
body.dark .vt-irr { background: #453309; color: #f5c761; }
body.dark .vt-known { background: #10352b; color: #7ee3c1; }
@media (max-width: 560px) {
  .vt-forms { display: block; font-size: 12.5px; }
  .vt-tab { padding: 6px 11px; font-size: 13px; }
}

/* ===== v3.5: ścieżki zdaniowe ===== */
.sp-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-mode { flex: 1 1 160px; border: 1.5px solid var(--line); background: var(--panel); color: inherit;
  border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.sp-mode.active { background: var(--violet); border-color: var(--violet); color: #fff; }
.sp-stage { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: none; border-top: 1px solid var(--steel-deep); background: transparent; color: inherit;
  padding: 12px 2px; font: inherit; cursor: pointer; }
.sp-stage:hover { background: var(--steel); }
.sp-done { opacity: .85; }
.sp-emoji { font-size: 22px; }
.sp-body { flex: 1; min-width: 0; }
.sp-pl { font-family: var(--display); font-size: 21px; font-weight: 600; line-height: 1.45;
  margin: 10px 0 14px; }
.sp-retype-diff { margin: 6px 0; }
.fc-tag.tag-fix { background: var(--violet-soft); color: #4a2ea0; }
body.dark .sp-stage:hover { background: #1a212a; }
body.dark .sp-stage { border-color: #263039; }
body.dark .fc-tag.tag-fix { background: #2c2350; color: #cbb8ff; }
@media (max-width: 560px) { .sp-pl { font-size: 19px; } }

/* ============================================================
   WERSJA 2 — paleta i układ wg dokumentu projektowego
   Zasady: ciepłe tło zamiast czystej bieli (mniejszy kontrast = mniej męczy),
   JEDEN kolor akcentu użyty wyłącznie na przycisku głównej akcji (efekt izolacji),
   proporcja 60–30–10, dużo pustej przestrzeni jako narzędzie hierarchii.
   ============================================================ */
body.v2 {
  --bg: #faf8f5;            /* ciepła biel — papier, nie arkusz */
  --panel: #ffffff;
  --ink: #1e2833;
  --ink-soft: #5b6b7b;
  --line: #e3e9ef;
  --accent: #4c3fbf;        /* indygo — TYLKO przycisk „Zacznij" */
  --rust: #e0a100;
  background: var(--bg);
}
body.v2.dark {
  --bg: #141a21;            /* grafit-granat, nie czerń: mniej „halo" przy białym tekście */
  --panel: #1b222b;
  --ink: #e6ebf1;
  --ink-soft: #96a3b2;
  --line: #28323d;
  --accent: #8b7bff;
}

/* pasek stanu — celowo szary i cichy: to informacja, nie nagroda */
.v2-status { display: flex; align-items: center; gap: 10px; padding: 4px 2px 14px; color: var(--ink-soft); font-size: 13px; }
.v2-goalbar { flex: 1; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.v2-goalfill { height: 100%; background: var(--ink-soft); border-radius: 999px; transition: width .4s; }
.v2-goaltext { font-family: var(--mono); font-size: 12px; }

/* karta „Dziś" — dominanta ekranu (~40 % wysokości) */
.v2-today { background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 20px 20px; box-shadow: 0 2px 14px rgba(30,40,51,.05); }
.v2-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.v2-title { font-family: var(--display); font-size: 27px; line-height: 1.25; margin: 6px 0 4px; letter-spacing: -.5px; }
.v2-sub { color: var(--ink-soft); font-size: 14.5px; }
.v2-parts { margin-top: 12px; color: var(--ink-soft); font-size: 13.5px; }
.v2-min { font-weight: 700; color: var(--ink); }
.v2-dot { margin: 0 6px; }
.v2-steps { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.v2-stepbar { flex: 1; height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; }
.v2-stepfill { height: 100%; background: var(--accent); opacity: .55; border-radius: 999px; }
.v2-why { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg);
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
/* jedyny element w kolorze akcentu i jedyna animacja na ekranie */
.v2-start { display: block; width: 100%; margin-top: 18px; border: none; border-radius: 14px;
  background: var(--accent); color: #fff; font: inherit; font-size: 17px; font-weight: 700;
  padding: 15px; cursor: pointer; animation: v2pulse 2.6s ease-in-out infinite; }
.v2-start:active { transform: scale(.98); animation: none; }
@keyframes v2pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(76,63,191,.32); } 55% { box-shadow: 0 0 0 12px rgba(76,63,191,0); } }

/* trzy małe kafelki — neutralne, żeby nie konkurowały z „Zacznij" */
.v2-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.v2-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.v2-tile b { font-size: 13.5px; display: block; margin-top: 4px; line-height: 1.3; }
.v2-tile-ico { font-size: 19px; }
.v2-tile-off { opacity: .6; cursor: default; }
.v2-rust { border-color: var(--rust); background: linear-gradient(0deg, rgba(224,161,0,.09), rgba(224,161,0,.09)), var(--panel); }
.v2-foot { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }

/* plansza między częściami sesji — uczeń widzi, gdzie jest w łuku */
.v2-section { text-align: center; padding: 26px 12px; }
.v2-sec-step { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.v2-section h3 { font-family: var(--display); font-size: 24px; margin: 6px 0 6px; }
.v2-crumb { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); margin-bottom: 8px; }
.v2-timer { height: 5px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.v2-timerfill { height: 100%; width: 100%; background: var(--rust); border-radius: 999px; transition: width .1s linear; }
.v2-learned { margin: 6px 0 12px 18px; }
.v2-tomorrow { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.v2-tip { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: 14px; }
.v2-pairs { display: grid; gap: 8px; margin-top: 12px; }
.v2-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; align-items: center;
  padding: 8px 10px; border-radius: 12px; background: var(--bg); }
.v2-pw { border: 1px solid var(--line); background: var(--panel); color: inherit; border-radius: 10px;
  padding: 7px 10px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.set-version { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.set-version > div { flex: 1 1 220px; }
@media (max-width: 560px) {
  .v2-title { font-size: 23px; }
  .v2-tiles { grid-template-columns: 1fr; }
  .v2-tile { display: flex; align-items: center; gap: 10px; }
  .v2-tile b { margin: 0; }
}

/* ===== v3.7: onboarding wersji 2 ===== */
.onb-top { padding: 8px 2px 14px; }
.onb-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.onb-dot { width: 26px; height: 4px; border-radius: 999px; background: var(--line); }
.onb-dot.on { background: var(--accent, var(--indigo)); }
.onb-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1.5px solid var(--line); background: var(--panel); color: inherit; border-radius: 14px;
  padding: 14px; margin-bottom: 8px; font: inherit; cursor: pointer; }
.onb-opt:hover { border-color: var(--accent, var(--indigo)); }
.onb-rec { box-shadow: inset 0 0 0 1px var(--accent, var(--indigo)); }
.onb-emoji { font-size: 24px; }
.onb-prog { height: 5px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.onb-progfill { height: 100%; background: var(--accent, var(--indigo)); border-radius: 999px; transition: width .3s; }
.onb-block { margin-bottom: 14px; }
.onb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.onb-chip { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--steel); }
.onb-strong .onb-chip { background: var(--teal-soft); color: #07694a; }
.onb-weak .onb-chip { background: var(--gold-soft); color: #8a6100; }
.onb-saved { margin: 14px 0; padding: 12px 14px; border-radius: 12px;
  background: var(--teal-soft); color: #07694a; font-weight: 600; }
body.dark .onb-strong .onb-chip { background: #10352b; color: #7ee3c1; }
body.dark .onb-weak .onb-chip { background: #453309; color: #f5c761; }
body.dark .onb-saved { background: #10352b; color: #7ee3c1; }
.v2-tune { margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--steel);
  color: var(--ink-soft); font-size: 13.5px; }
body.dark .v2-tune { background: #1a212a; }

/* ===== v3.9: panel skuteczności ===== */
.pg-big { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -1px; margin: 6px 0 2px; }
.pg-band { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; }
.pg-band-name { width: 78px; color: var(--ink-soft); font-family: var(--mono); font-size: 12px; }
.pg-band-val { width: 42px; text-align: right; font-family: var(--mono); font-size: 12px; }
.pg-bar { flex: 1; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.pg-fill { height: 100%; background: var(--teal); border-radius: 999px; }
.pg-sparkbox { margin-top: 10px; color: var(--violet); }
.pg-spark { width: 100%; max-width: 280px; height: 54px; display: block; }
.pg-table { margin-top: 10px; }
.pg-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 8px 0;
  border-top: 1px solid var(--line); font-size: 14px; }
.pg-row span:not(:first-child) { text-align: right; font-family: var(--mono); }
.pg-head { border-top: none; color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.pg-head span:not(:first-child) { font-family: inherit; }

/* ===== v3.10: płynność (4/3/2, shadowing) ===== */
.fl-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: none; border-top: 1px solid var(--line); background: transparent; color: inherit;
  padding: 12px 2px; font: inherit; cursor: pointer; }
.fl-item:hover { background: var(--steel); }
.fl-done { opacity: .75; }
.fl-emoji { font-size: 22px; }
.fl-best { margin: 6px 0 4px; font-weight: 700; color: var(--teal); }
.fl-help { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: var(--steel); }
.fl-phrase { margin-top: 6px; font-size: 14.5px; }
.fl-hints { margin: 6px 0 0 18px; }
.fl-clock { font-family: var(--mono); font-size: 46px; font-weight: 700; text-align: center; margin: 14px 0 8px; }
.fl-hurry { color: #c92a2a; }
.fl-timer { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.fl-timerfill { height: 100%; width: 100%; background: var(--violet); border-radius: 999px; transition: width 1s linear; }
.fl-counter { text-align: center; margin-top: 10px; color: var(--ink-soft); font-size: 14px; }
.fl-mini { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.fl-chip { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--steel); color: var(--ink-soft); }
body.dark .fl-item:hover, body.dark .fl-help, body.dark .fl-chip { background: #1a212a; }

/* ===== v3.11: czytanie dobierane do słownika ===== */
.rd-ready { margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--teal-soft); color: #07694a; font-weight: 600; }
.rd-item { display: flex; gap: 12px; width: 100%; text-align: left; align-items: flex-start;
  border: none; border-top: 1px solid var(--line); background: transparent; color: inherit;
  padding: 12px 2px; font: inherit; cursor: pointer; }
.rd-item:hover { background: var(--steel); }
.rd-emoji { font-size: 22px; }
.rd-body { flex: 1; min-width: 0; }
.rd-cov { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.rd-bar { flex: 1; height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; }
.rd-fill { height: 100%; border-radius: 999px; background: var(--ink-soft); }
.rd-pct { font-family: var(--mono); font-size: 12px; width: 40px; text-align: right; }
.rd-easy .rd-fill { background: #0ca678; }
.rd-ok .rd-fill { background: #e0a100; }
.rd-hard .rd-fill { background: #c92a2a; }
.rd-hard { opacity: .72; }
.rd-text { font-size: 18px; line-height: 1.85; }
.rd-line { margin: 0 0 10px; }
.rd-unknown { border: none; background: none; color: inherit; font: inherit; padding: 0;
  border-bottom: 2px dotted #c92a2a; cursor: pointer; }
.rd-added { border-bottom-color: #e0a100; background: var(--gold-soft); border-radius: 4px; }
.rd-gloss { display: block; margin: 6px 0; padding: 8px 10px; border-radius: 10px;
  background: var(--steel); font-size: 14.5px; }
body.dark .rd-item:hover, body.dark .rd-gloss { background: #1a212a; }
body.dark .rd-ready { background: #10352b; color: #7ee3c1; }

/* ===== v3.13: wprowadzenie przed nowym materiałem ===== */
.tc { padding: 4px 0 8px; }
.tc-head { display: flex; align-items: center; gap: 10px; }
.tc-emoji { font-size: 26px; }
.tc-head h3 { margin: 0; font-family: var(--display); font-size: 22px; }
.tc-intro { margin: 10px 0 14px; font-size: 15.5px; line-height: 1.6; }
.tc-label { font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); margin: 14px 0 6px; }
.tc-ex { padding: 9px 11px; border-radius: 10px; background: var(--steel); margin-bottom: 6px;
  font-size: 15.5px; cursor: pointer; }
.tc-rule { padding: 12px 14px; border-radius: 12px; border-left: 3px solid var(--accent, var(--indigo));
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.tc-rule p { margin: 6px 0 0; font-size: 15px; line-height: 1.65; white-space: pre-line; }
.tc-word { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tc-word:last-of-type { border-bottom: none; }
.tc-word-head { font-size: 18px; }
.tc-pl { font-size: 15px; color: var(--ink-soft); font-weight: 400; }
.tc-cheat { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--steel); }
.tc-cheat summary { cursor: pointer; font-weight: 600; }
body.dark .tc-ex, body.dark .tc-cheat { background: #1a212a; }

/* ===== v3.14.0 — „Wybierz alternatywną wersję": pasek na stronie głównej + okno wyboru ===== */
.ver-bar { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  margin:0 0 16px; padding:12px 16px; border-radius:14px; font:inherit; color:var(--ink);
  background:var(--panel); border:1.5px dashed var(--indigo, #4c3fbf); transition:transform .12s, box-shadow .12s; }
.ver-bar:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(40,30,120,.12); }
.ver-bar:active { transform:none; }
.ver-bar-ico { flex:0 0 38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; color:#fff; background:var(--indigo, #4c3fbf); }
.ver-bar-txt { flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ver-bar-txt b { font-size:16px; }
.ver-bar-go { font-size:26px; line-height:1; opacity:.5; }
body.dark .ver-bar { background:#1a212a; color:#e6ebf1; }
body.v2 .ver-bar { border-color:var(--line); }
body.v2 .ver-bar-ico { background:var(--ink); opacity:.75; }   /* w wersji 2 akcent jest zarezerwowany dla „Zacznij" */

.ver-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin:12px 0; }
.ver-card { display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px;
  border:1.5px solid var(--line); background:var(--bg); }
.ver-card .btn { margin-top:auto; }
.ver-card p { margin:0; }
.ver-current { opacity:.8; }
.ver-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ver-emoji { font-size:24px; }
.ver-badge { font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px;
  background:var(--line); color:var(--ink); }
.ver-points { margin:0 0 4px 18px; padding:0; font-size:13.5px; line-height:1.45; }
body.dark .ver-card { background:#141a21; border-color:#2b3542; }
@media (max-width:620px) { .ver-grid { grid-template-columns:1fr; } }
body.v3mode .modal-bg { z-index: 200; } body.v3mode .modal.card { background:#fff; color:#211a52; border-radius:22px; padding:18px; }