/* Speak HUB — wygląd w duchu Salon HUB / Budżet HUB: Manrope, spokojne tło, karty, jeden wyrazisty akcent.
   Najpierw telefon (obsługa jedną ręką, duże pola dotykowe), na komputerze kolumna do 600 px. */
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f4f4f8; --card: #ffffff; --card2: #f7f7fb; --line: rgba(20, 22, 40, .09); --line2: rgba(20, 22, 40, .16);
  --text: #15161d; --sub: #4a4d5c; --muted: #7b7f90;
  --acc: #5a4ff3; --acc2: #7a71ff; --acc-bg: #ecebff; --on-acc: #fff;
  --ok: #138a4a; --ok-bg: #e5f6ec; --warn: #a45b00; --warn-bg: #fdf1e1; --bad: #c22b3f; --bad-bg: #fdeaec;
  --shadow: 0 1px 2px rgba(20, 22, 40, .05), 0 10px 28px -14px rgba(20, 22, 40, .18);
  --r: 20px; --spring: cubic-bezier(.25, 1, .5, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
html[data-theme=dark] {
  --bg: #0d0e14; --card: #171922; --card2: #1d202b; --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .16);
  --text: #eff0f6; --sub: #b6b9c8; --muted: #858a9c;
  --acc: #8f87ff; --acc2: #a59fff; --acc-bg: #262444; --on-acc: #0d0e14;
  --ok: #4ade80; --ok-bg: #11291b; --warn: #fbbf63; --warn-bg: #2d2010; --bad: #ff7d8d; --bad-bg: #331219;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px -16px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
/* ścieżka „Na co dzień” — własny akcent (turkus), „Praca” zostaje fioletowa */
/* kontrast (12.11.2026): biały tekst na turkusie ≥ 4.5:1 — ciemniejszy turkus w jasnym motywie, ciemny gradient karty w ciemnym */
html[data-path=daily] { --acc: #0a7a6d; --acc2: #13a593; --acc-bg: #dcf4ef; }
html[data-theme=dark][data-path=daily] { --acc: #3fd2bd; --acc2: #6fe0cf; --acc-bg: #10302b; }
html[data-theme=dark][data-path=daily] .hero { background: linear-gradient(150deg, #0e6f63, #0a5048 70%); box-shadow: 0 22px 44px -22px #0a5048; }
html[data-theme=dark][data-path=daily] .hero .btn { color: #0a4f47; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font: 500 16px/1.5 Manrope, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--acc) 60%, transparent); outline-offset: 2px; }

.app { max-width: 600px; margin: 0 auto; min-height: 100dvh; padding: max(16px, env(safe-area-inset-top)) 16px calc(96px + var(--safe-b)); }
.top { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.top .logo { width: 40px; height: 40px; border-radius: 11px; display: block; box-shadow: 0 8px 20px -10px #01aba7; }
.top h1 { flex: 1; margin: 0; font-size: 20px; letter-spacing: -.02em; }
.top h1 small { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ibtn { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; color: var(--sub); }
.ibtn svg { width: 22px; height: 22px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; }
.card + .card, .card + .sec, .sec + .card { margin-top: 14px; }
.sec { margin: 22px 2px 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); } .sub { color: var(--sub); }

/* przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 16px; border: 1px solid var(--line2); background: var(--card); font-weight: 700; font-size: 16px; transition: transform .2s var(--spring), background .2s, box-shadow .2s; }
.btn:active { transform: scale(.97); }
.btn.pri { background: var(--acc); border-color: transparent; color: var(--on-acc); box-shadow: 0 10px 24px -12px var(--acc); }
.btn.ghost { background: none; border-color: transparent; color: var(--sub); }
.btn.wide { width: 100%; }
.btn.big { min-height: 60px; font-size: 18px; border-radius: 18px; }
.btn svg { width: 20px; height: 20px; }
.btn[disabled] { opacity: .5; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > .btn { flex: 1; }

/* start */
.hero { position: relative; overflow: hidden; padding: 22px; border-radius: 26px; background: linear-gradient(150deg, var(--acc2), var(--acc) 60%, color-mix(in srgb, var(--acc) 70%, #1b145e)); color: #fff; box-shadow: 0 22px 44px -22px var(--acc); }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.hero small { position: relative; display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.hero h2 { position: relative; margin: 6px 0 4px; font-size: 26px; line-height: 1.15; letter-spacing: -.03em; }
.hero p { position: relative; margin: 0 0 18px; opacity: .92; font-size: 15px; }
.hero ul { position: relative; list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; font-size: 14.5px; }
.hero li { display: flex; gap: 10px; align-items: center; } .hero li i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-style: normal; font-size: 12px; font-weight: 800; }
.hero .btn { position: relative; background: #fff; color: color-mix(in srgb, var(--acc) 55%, #000); border: 0; }
html[data-theme=dark] .hero .btn { color: color-mix(in srgb, var(--acc) 45%, #000); }
.hero .pathbar { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 700; opacity: .92; }
.hero .pathbar .pb { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; } .hero .pathbar .pb i { display: block; height: 100%; background: #fff; border-radius: 99px; }
/* przełącznik ścieżek */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin: 0 0 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.paths button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 13px; background: none; font-weight: 800; font-size: 15px; color: var(--sub); position: relative; transition: background .25s var(--spring), color .25s; }
.paths button svg { width: 19px; height: 19px; }
.paths button.on[data-path=salon] { background: #5a4ff3; color: #fff; } .paths button.on[data-path=daily] { background: #0a7a6d; color: #fff; }
html[data-theme=dark] .paths button.on[data-path=salon] { background: #8f87ff; color: #0d0e14; } html[data-theme=dark] .paths button.on[data-path=daily] { background: #3fd2bd; color: #0d0e14; }
.paths .dot { position: absolute; top: 8px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.paths button.on .dot { background: #fff; }
.other { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 12px; padding: 14px 16px; text-align: left; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); color: var(--text); }
.other .ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; }
.other .ic.salon { background: #ecebff; color: #5a4ff3; } .other .ic.daily { background: #dcf4ef; color: #0c8f80; }
html[data-theme=dark] .other .ic.salon { background: #262444; color: #8f87ff; } html[data-theme=dark] .other .ic.daily { background: #10302b; color: #3fd2bd; }
.other b { display: block; font-size: 15px; } .other small { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; }
.other .go { margin-left: auto; color: var(--muted); } .other .go svg { width: 18px; height: 18px; }
.ptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ptile { padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ptile .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 10px; }
.ptile.salon .ic { background: #ecebff; color: #5a4ff3; } .ptile.daily .ic { background: #dcf4ef; color: #0c8f80; }
html[data-theme=dark] .ptile.salon .ic { background: #262444; color: #8f87ff; } html[data-theme=dark] .ptile.daily .ic { background: #10302b; color: #3fd2bd; }
.ptile b { display: block; font-size: 22px; letter-spacing: -.02em; } .ptile span { display: block; font-size: 13px; color: var(--muted); font-weight: 700; } .ptile small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--sub); }
/* gramatyka */
.nav .in { gap: 2px; } .nav button { font-size: 11px; line-height: 1.2; padding: 6px 0; } .nav button svg { width: 23px; height: 23px; }
.gram-hd { margin: 6px 4px 0; } .gram-hd h2 { margin: 0; font-size: 26px; letter-spacing: -.03em; } .gram-hd p { margin: 2px 0 0; color: var(--muted); font-weight: 600; }
.gt-w { padding: 4px 6px; overflow-x: auto; }
.gt { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.gt th { text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 8px 6px; }
.gt td { padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.4; }
.gt td:first-child { font-weight: 700; }
.gt td.big { font-size: 17px; font-weight: 800; color: var(--acc); }
.gram-n { margin-top: 12px; font-size: 14.5px; line-height: 1.5; }
.irr { padding: 2px 10px 2px 14px; }
.irr-h { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 52px 8px 0; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.irr-r { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.irr-f { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 6px; font-size: 15.5px; }
.irr-f b { font-weight: 800; } .irr-f span { font-weight: 600; color: var(--sub); }
.irr-f small { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.play.mini { width: 40px; height: 40px; }
/* ---------- kurs, testy, konto (12.11.2026) ---------- */
.hero.hero-sm { padding: 18px 18px 16px; border-radius: 22px; }
.hero.hero-sm h2 { font-size: 23px; margin: 4px 0 2px; } .hero.hero-sm p { margin: 0 0 12px; font-size: 14.5px; } .hero.hero-sm .len { margin-bottom: 12px; }
@media (min-width: 700px) { .hero.hero-sm h2 { font-size: 25px; } }
.other.slim { padding: 11px 14px; } .other.slim .ic, html[data-theme=dark] .other.slim .ic { width: 36px; height: 36px; border-radius: 11px; background: var(--acc-bg); color: var(--acc); } .other.slim .ic svg { width: 18px; height: 18px; }
.sample { display: block; margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 12.5px; font-weight: 700; }
.lm { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--sub); cursor: pointer; }
.lm input { width: 20px; height: 20px; accent-color: var(--acc); flex: none; }
.bub.c.hide .txt { filter: blur(6px); user-select: none; } .bub.c.hide .tr { display: none; }
details.how { margin-top: 14px; } details.how summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--muted); padding: 6px 2px; list-style-position: inside; }
details.how .note { margin: 6px 2px 0; }
.card details.how { margin-top: 10px; }
.stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats.four b { font-size: 20px; } .stats.four span { font-size: 11.5px; }
.kurs-hd { margin: 4px 4px 12px; } .kurs-hd h2 { margin: 0; font-size: 26px; letter-spacing: -.03em; } .kurs-hd p { margin: 2px 0 0; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.kurs-login, .kurs-diag, .kurs-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.kurs-login { border-color: var(--acc); background: var(--acc-bg); margin-bottom: 12px; } .kurs-login small, .kurs-diag small, .kurs-mini small { color: var(--muted); font-size: 13px; }
.kurs-diag { flex-direction: row; align-items: center; gap: 14px; } .kurs-diag .ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--acc-bg); color: var(--acc); }
.kurs-diag b, .kurs-diag small { display: block; }
.stages { display: grid; gap: 10px; }
.stg { display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 14px; text-align: left; font: inherit; color: var(--text); border-radius: var(--r); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); cursor: pointer; transition: transform .15s; }
.stg:active { transform: scale(.99); }
.stg .num { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; background: var(--card2); color: var(--sub); border: 1px solid var(--line); }
.stg .num svg { width: 18px; height: 18px; }
.stg .tx { flex: 1; min-width: 0; } .stg b { display: block; font-size: 16px; } .stg small { display: block; color: var(--sub); font-size: 13.5px; line-height: 1.35; margin-top: 1px; }
.stg em { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.stg.done .num { background: var(--ok-bg); color: var(--ok); border-color: transparent; } .stg.done em { color: var(--ok); }
.stg.open .num, .stg.cur .num { background: var(--acc); color: var(--on-acc); border-color: transparent; } .stg.cur { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc), var(--shadow); } .stg.open em { color: var(--acc); }
.stg.locked { opacity: .62; box-shadow: none; } .stg.soon { opacity: .8; box-shadow: none; border-style: dashed; } .stg.soon em { color: var(--warn); }
ul.can { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; color: var(--sub); }
.tcount { flex: none; font-size: 13px; font-weight: 800; color: var(--muted); min-width: 42px; text-align: right; }
.readtx { padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-size: 16.5px; line-height: 1.55; margin: 4px 0 16px; }
.chs button.sel { border-color: var(--acc); background: var(--acc-bg); color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.bar.thr { position: relative; overflow: visible; } .bar.thr b { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--text); opacity: .45; }
.fixit { margin-top: 10px; } .fixit small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.fixit p { margin: 4px 0; font-size: 14.5px; line-height: 1.45; } .fixit .bad { color: var(--bad); font-weight: 700; }
.done-hero .big.warn { background: var(--warn-bg); color: var(--warn); }
.kurs-details { margin-top: 8px; }
.stage[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
/* ćwiczenia z gramatyki */
.gx-hero { margin-top: 4px; }
.gx-list { padding: 4px 16px; }
.gx-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.gx-row:first-child { border-top: 0; }
.gx-row .tx { flex: 1; min-width: 0; } .gx-row b { display: block; font-size: 16px; } .gx-row small { display: block; color: var(--muted); font-size: 13px; margin: 1px 0 8px; }
.gx-row .bar { height: 6px; } .gx-row .btn { flex: none; min-height: 42px; padding: 0 14px; }
.gx-due { color: var(--acc); font-weight: 800; }
.gx-q { font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; margin: 4px 0 18px; }
.blank { display: inline-block; min-width: 64px; border-bottom: 3px solid var(--acc); color: transparent; line-height: 1.1; }
input.ans.one { width: 100%; min-height: 56px; font-size: 18px; font-weight: 600; }
.ans.good { border-color: var(--ok) !important; background: var(--ok-bg); } .ans.bad { border-color: var(--bad) !important; background: var(--bad-bg); }
.chs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
.chs.long { grid-template-columns: 1fr; }
.chs button { min-height: 58px; padding: 12px; border-radius: 16px; border: 1.5px solid var(--line2); background: var(--card); font-weight: 700; font-size: 17px; color: var(--text); transition: transform .15s, border-color .2s, background .2s; }
.chs.long button { text-align: left; font-size: 16.5px; }
.chs button:active { transform: scale(.98); }
.chs button.good { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.chs button.bad { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.chs button:disabled { cursor: default; } .chs button:disabled:not(.good):not(.bad) { opacity: .55; }
.gx-verb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 16px; margin: 4px 0 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.gx-verb b { font-size: 34px; letter-spacing: -.02em; } .gx-verb span { color: var(--muted); font-weight: 600; }
.gx-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gx-forms label span { display: block; margin: 0 0 6px 2px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.week i.half { background: color-mix(in srgb, var(--acc) 35%, transparent); border-color: var(--acc); color: var(--on-acc); }
.len { position: relative; display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 14px; background: rgba(255, 255, 255, .16); }
.len button { min-width: 64px; min-height: 36px; border: 0; border-radius: 10px; background: none; color: #fff; font-weight: 700; font-size: 14px; }
.len button.on { background: #fff; color: #2a2290; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.qa { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 104px; padding: 16px; text-align: left; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); font-weight: 700; }
.qa .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--acc-bg); color: var(--acc); }
.qa .ic svg { width: 21px; height: 21px; }
.qa small { font-weight: 600; color: var(--muted); font-size: 13px; line-height: 1.35; }
.install-card { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 14px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.install-card .ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--acc); color: var(--on-acc); }
.install-card .ic svg { width: 22px; height: 22px; }
.install-card b { display: block; font-size: 16px; } .install-card small { color: var(--muted); font-size: 13.5px; }
.week { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; }
.week span { flex: 1; display: grid; justify-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.week i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line2); display: grid; place-items: center; font-style: normal; }
.week i.on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.week i.today { border-color: var(--acc); }
.week i svg { width: 15px; height: 15px; }

/* dolna nawigacja */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; padding: 8px 10px calc(8px + var(--safe-b)); background: color-mix(in srgb, var(--bg) 88%, transparent); border-top: 1px solid var(--line); backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px); }
.nav .in { display: flex; width: 100%; max-width: 600px; gap: 4px; }
.nav button { flex: 1; display: grid; justify-items: center; gap: 3px; min-height: 56px; padding: 6px 2px; border: 0; border-radius: 14px; background: none; color: var(--muted); font-size: 12px; font-weight: 700; }
.nav button svg { width: 24px; height: 24px; }
.nav button.on { color: var(--acc); background: var(--acc-bg); }
.nav .badge { position: absolute; transform: translate(14px, -4px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; line-height: 18px; }

/* listy zwrotów */
.search { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--line2); background: var(--card); font-size: 16px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 10px -2px 4px; scrollbar-width: none; }
.chips button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line2); background: var(--card); font-weight: 700; font-size: 14px; color: var(--sub); }
.chips button.on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.ph { display: flex; gap: 12px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line); }
.ph:first-child { border-top: 0; }
.ph .tx { flex: 1; min-width: 0; }
.ph .en { font-size: 17px; font-weight: 700; line-height: 1.35; }
.ph .pl { font-size: 14px; color: var(--muted); margin-top: 2px; }
.ph .meta { font-size: 12px; font-weight: 700; color: var(--acc); margin-top: 4px; }
.play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--acc-bg); color: var(--acc); display: grid; place-items: center; }
.play svg { width: 20px; height: 20px; }
.play.on { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--acc) 18%, transparent); } }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--text); font-size: 17px; margin-bottom: 4px; }

/* postęp */
.sk { display: grid; gap: 8px; }
.sk + .sk { margin-top: 12px; }
.sk h3 { margin: 0; font-size: 16px; } .sk p { margin: 0; font-size: 14px; color: var(--sub); }
.bar { height: 10px; border-radius: 99px; background: var(--card2); border: 1px solid var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--acc2), var(--acc)); transition: width .6s var(--spring); }
.sk .nums { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.can-ok { color: var(--ok) !important; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats div { padding: 14px 10px; border-radius: 16px; background: var(--card2); text-align: center; }
.stats b { display: block; font-size: 24px; letter-spacing: -.02em; } .stats span { font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* sesja — pełny ekran, bez rozpraszaczy */
.ses { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--bg); animation: up .35s var(--spring); }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
.ses-top { display: flex; align-items: center; gap: 12px; max-width: 600px; width: 100%; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 16px 10px; }
.ses-top .prog { flex: 1; height: 8px; border-radius: 99px; background: var(--card2); border: 1px solid var(--line); overflow: hidden; }
.ses-top .prog i { display: block; height: 100%; background: var(--acc); border-radius: 99px; transition: width .45s var(--spring); }
.ses-body { flex: 1; overflow-y: auto; max-width: 600px; width: 100%; margin: 0 auto; padding: 8px 16px 16px; }
.ses-foot { max-width: 600px; width: 100%; margin: 0 auto; padding: 10px 16px calc(14px + var(--safe-b)); display: grid; gap: 10px; }
.stage { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 14px; padding: 6px 12px; border-radius: 99px; background: var(--acc-bg); color: var(--acc); font-size: 13px; font-weight: 800; }
.prompt-pl { font-size: 24px; font-weight: 750; line-height: 1.3; letter-spacing: -.02em; margin: 0 0 6px; }
.ctx { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.ans { width: 100%; min-height: 96px; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--line2); background: var(--card); font-size: 18px; line-height: 1.4; resize: none; }
.ans:focus { border-color: var(--acc); outline: none; }
.mic { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mic .btn { min-height: 46px; padding: 0 16px; font-size: 15px; }
.mic .btn.rec { background: var(--bad); border-color: transparent; color: #fff; }
.mic small { color: var(--muted); font-size: 13px; }
.reveal { margin-top: 16px; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); animation: up .3s var(--spring); }
.reveal .en { font-size: 21px; font-weight: 750; line-height: 1.35; letter-spacing: -.01em; }
.reveal .hd { display: flex; gap: 12px; align-items: flex-start; }
.reveal .hd .tx { flex: 1; }
.fb { margin-top: 12px; padding: 12px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.fb.ok { background: var(--ok-bg); color: var(--ok); } .fb.close { background: var(--warn-bg); color: var(--warn); } .fb.miss { background: var(--bad-bg); color: var(--bad); }
.fb b { font-weight: 800; } .fb .mine { display: block; margin-top: 6px; color: var(--sub); font-size: 14px; }
.miss-w { background: color-mix(in srgb, var(--warn) 22%, transparent); border-radius: 5px; padding: 0 3px; }
.ex { margin-top: 10px; font-size: 14.5px; color: var(--sub); font-style: italic; }
.regs { margin-top: 12px; display: grid; gap: 6px; }
.regs div { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; }
.regs span { flex: none; min-width: 78px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tip { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card2); font-size: 14px; color: var(--sub); }
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grades button { min-height: 60px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card); font-weight: 750; font-size: 14px; display: grid; place-items: center; gap: 0; padding: 6px 2px; }
.grades button small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.grades button.sug { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.learn-card { padding: 22px 18px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); animation: up .3s var(--spring); }
.learn-card .en { font-size: 25px; font-weight: 780; line-height: 1.3; letter-spacing: -.02em; }
.learn-card .pl { margin-top: 8px; font-size: 16px; color: var(--sub); }
.say { margin-top: 16px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--acc-bg); color: var(--acc); font-weight: 700; font-size: 14.5px; }
.say svg, .bub svg:not(.play svg), .fb > svg { width: 20px; height: 20px; flex: none; }
svg { flex: none; }
.flagrow { display: flex; gap: 8px; margin-top: 14px; }
.flagrow button { flex: 1; min-height: 42px; border-radius: 12px; border: 1px dashed var(--line2); background: none; color: var(--muted); font-weight: 700; font-size: 13.5px; }

/* scenka */
.chat { display: grid; gap: 10px; }
.bub { max-width: 86%; padding: 12px 14px; border-radius: 18px; font-size: 16px; line-height: 1.4; animation: up .3s var(--spring); }
.bub.c { justify-self: start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bub.me { justify-self: end; background: var(--acc); color: var(--on-acc); border-bottom-right-radius: 6px; }
.bub.task { justify-self: stretch; max-width: none; background: none; border: 1.5px dashed var(--line2); color: var(--sub); font-size: 15px; }
.bub .who { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.bub .who button { border: 0; background: none; color: var(--acc); padding: 0; font: inherit; text-transform: none; letter-spacing: 0; font-weight: 700; }
.bub .tr { margin-top: 6px; font-size: 14px; color: var(--muted); }
.bub .mini { width: 34px; height: 34px; float: right; margin: -4px -6px 0 8px; }
.setup { margin: 0 0 14px; padding: 14px; border-radius: 16px; background: var(--card2); font-size: 15px; color: var(--sub); }

/* podsumowanie */
.done-hero { text-align: center; padding: 18px 8px 6px; }
.done-hero .big { width: 74px; height: 74px; margin: 0 auto 10px; border-radius: 24px; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); }
.done-hero .big svg { width: 38px; height: 38px; }
.done-hero h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; }
.can-list { display: grid; gap: 8px; margin-top: 10px; }
.can-list div { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-weight: 700; }
.can-list div i { color: var(--ok); font-style: normal; }

/* arkusz (ustawienia, szczegóły, własny zwrot) */
.sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(10, 10, 20, .45); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 600px; max-height: 90dvh; overflow-y: auto; padding: 10px 18px calc(20px + var(--safe-b)); border-radius: 26px 26px 0 0; background: var(--bg); animation: up .3s var(--spring); }
.sheet .grab { width: 44px; height: 5px; border-radius: 99px; background: var(--line2); margin: 4px auto 14px; }
.sheet h2 { margin: 0 0 14px; font-size: 21px; letter-spacing: -.02em; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.field input, .field textarea, .field select { min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card); font-size: 16px; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.seg button { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: none; font-weight: 700; font-size: 14.5px; color: var(--sub); }
.seg button.on { background: var(--acc); color: var(--on-acc); }
.note { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.demo { display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--warn-bg); color: var(--warn); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }

/* onboarding */
.onb { min-height: 100dvh; max-width: 600px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 20px calc(24px + var(--safe-b)); display: flex; flex-direction: column; }
.onb .dots { display: flex; gap: 6px; margin-bottom: 28px; } .onb .dots i { flex: 1; height: 5px; border-radius: 99px; background: var(--line2); } .onb .dots i.on { background: var(--acc); }
.onb h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; letter-spacing: -.03em; }
.onb p.lead { margin: 0 0 24px; font-size: 16.5px; color: var(--sub); }
.opts { display: grid; gap: 10px; }
.opt { display: flex; gap: 14px; align-items: center; min-height: 72px; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--line2); background: var(--card); text-align: left; transition: border-color .2s, transform .2s var(--spring); }
.opt:active { transform: scale(.98); }
.opt.on { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.opt b { display: block; font-size: 16.5px; } .opt small { color: var(--muted); font-size: 14px; }
.opt .ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--acc-bg); color: var(--acc); }
.opt .ic svg { width: 22px; height: 22px; }
.onb .foot { margin-top: auto; padding-top: 22px; display: grid; gap: 10px; }

/* AI: wskaźnik pracy, lista słówek do zaznaczenia */
.spin { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; vertical-align: -3px; }
.spin.big { width: 30px; height: 30px; border-width: 3px; color: var(--acc); }
@keyframes spin { to { transform: rotate(360deg); } }
.ph.wrd { cursor: pointer; align-items: flex-start; }
.ph.wrd input { flex: none; width: 22px; height: 22px; margin-top: 3px; accent-color: var(--acc); }
.ph.wrd .ex { margin-top: 6px; font-size: 14px; }
.chips button { white-space: nowrap; }
.toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); z-index: 80; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 14px; background: #15161d; color: #fff; font-weight: 700; font-size: 14.5px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); animation: up .3s var(--spring); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (min-width: 700px) { .app { padding-top: 28px; } .hero h2 { font-size: 30px; } }

/* ---------- kompaktowa typografia (12.11.2026): mniejsze litery, więcej treści na ekranie ---------- */
body { font-size: 14.5px; }
.top h1 { font-size: 18px; } .btn { font-size: 14.5px; } .btn.big { min-height: 52px; font-size: 16px; border-radius: 16px; }
.hero h2 { font-size: 22px; } .hero p, .hero li { font-size: 13.5px; } .hero.hero-sm h2 { font-size: 20px; } .hero.hero-sm p { font-size: 13.5px; }
.gram-hd h2, .kurs-hd h2 { font-size: 22px; } .kurs-hd p { font-size: 13.5px; }
.gx-q { font-size: 19px; } input.ans.one { min-height: 50px; font-size: 16px; } .chs button { min-height: 50px; font-size: 15.5px; } .chs.long button { font-size: 15px; }
.gx-verb b { font-size: 30px; } .gt { font-size: 13.5px; } .gt td.big { font-size: 15.5px; }
.ph { padding: 11px 4px; } .ph .en { font-size: 15.5px; } .ph .pl { font-size: 13px; } .empty b { font-size: 15.5px; }
.stats b { font-size: 21px; } .stats.four b { font-size: 18px; }
.prompt-pl { font-size: 21px; } .ans { min-height: 84px; font-size: 16px; padding: 12px 14px; } .reveal .en { font-size: 18px; } .learn-card .en { font-size: 22px; }
.done-hero h2 { font-size: 21px; } .sheet h2 { font-size: 19px; } .onb h1 { font-size: 26px; }
.note, .tip, .fb { font-size: 13.5px; } .sec { font-size: 12px; margin: 18px 2px 8px; }
.nav button { font-size: 10.5px; min-height: 52px; } .nav button svg { width: 22px; height: 22px; }
.stg b { font-size: 15px; } .stg small { font-size: 12.5px; } .readtx { font-size: 15px; }
@media (min-width: 700px) { .hero h2 { font-size: 26px; } }

/* ---------- fiszki: talia kart ---------- */
.deck-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 6px; text-align: center; }
.deck-stats > div { padding: 0 6px; border-left: 1px solid var(--line); } .deck-stats > div:first-child { border-left: 0; }
.deck-stats span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.deck-stats b { display: block; font-size: 28px; letter-spacing: -.02em; line-height: 1.2; margin-top: 4px; }
.deck-stats small { display: block; font-size: 11px; color: var(--muted); }
.deck-stats .c1 { color: var(--acc); } .deck-stats .c2 { color: var(--ok); } .deck-stats .c3 { color: var(--warn); }
.deck-go { margin-top: 12px; }
.mylist { display: flex; align-items: center; padding: 0; margin-top: 14px; overflow: hidden; }
.mylist-hd { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 0; background: none; font: inherit; font-weight: 700; font-size: 15px; color: var(--text); text-align: left; }
.mylist-hd small { color: var(--muted); font-weight: 700; } .mylist-hd .chev svg { width: 16px; height: 16px; transition: transform .2s; } .mylist-hd[aria-expanded=true] .chev svg { transform: rotate(90deg); }
.mylist-add { flex: none; width: 56px; min-height: 52px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--text); display: grid; place-items: center; }
.mylist + .search { margin-top: 12px; }
.ph.sm .emo { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-size: 22px; border-radius: 10px; background: var(--card2); }
.deck { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--bg); padding: 10px 16px calc(14px + var(--safe-b)); animation: up .25s var(--spring); }
.deck-top { display: flex; align-items: center; gap: 12px; max-width: 520px; width: 100%; margin: 0 auto; }
.deck-top .prog { flex: 1; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; } .deck-top .prog i { display: block; height: 100%; background: var(--acc); border-radius: 99px; transition: width .4s var(--spring); }
.deck-cnt { font-weight: 800; font-size: 13px; color: var(--ok); min-width: 36px; text-align: right; }
.deck-stage { position: relative; flex: 1; width: 100%; max-width: 440px; margin: 14px auto; min-height: 0; }
.deck-bg { position: absolute; inset: 10px 4px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); }
.deck-bg.b1 { transform: rotate(-2.2deg); } .deck-bg.b2 { transform: rotate(1.8deg); }
.deck-slot { position: absolute; inset: 0; }
.fcard { position: absolute; inset: 0; perspective: 1400px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.fcard:focus-visible .face { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 55%, transparent); }
.fin { position: relative; width: 100%; height: 100%; transition: transform .45s var(--spring); transform-style: preserve-3d; }
.fcard.flipped .fin { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px 20px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 40px -22px rgba(20, 22, 40, .35); backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; overflow: auto; }
.face.back { transform: rotateY(180deg); justify-content: flex-start; padding-top: 18px; }
.face .tag { position: absolute; top: 14px; left: 16px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.face .emo { font-size: 84px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .12)); } .face .emo.sm { font-size: 52px; margin-top: 4px; }
.face .w { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--text); max-width: 100%; overflow-wrap: anywhere; }
.face .w.big { font-size: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.face .ctx { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.face .hint { position: absolute; bottom: 16px; font-size: 12px; color: var(--muted); font-weight: 600; }
.face .sw { display: flex; justify-content: space-between; width: 100%; font-size: 13px; font-weight: 800; }
.face .sw .l { color: var(--bad); display: flex; align-items: center; gap: 4px; } .face .sw .l svg { transform: rotate(180deg); width: 16px; height: 16px; }
.face .sw .r { color: var(--ok); display: flex; align-items: center; gap: 4px; } .face .sw .r svg { width: 16px; height: 16px; }
.face .ex { display: flex; gap: 8px; align-items: flex-start; text-align: left; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; font-size: 15px; line-height: 1.45; color: var(--sub); }
.face .ex b { color: var(--warn); }
.face .tipx { font-size: 12.5px; color: var(--muted); text-align: left; width: 100%; }
.face [data-res] { width: 100%; }
.say-b { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--acc-bg); color: var(--acc); display: grid; place-items: center; } .say-b svg { width: 16px; height: 16px; }
.say-b.sm { width: 30px; height: 30px; } .say-b.sm svg { width: 13px; height: 13px; }
.stamp { position: absolute; top: 26px; padding: 6px 14px; border: 3px solid; border-radius: 12px; font-weight: 900; font-size: 20px; letter-spacing: .06em; opacity: 0; transition: opacity .12s; pointer-events: none; }
.stamp.yes { left: 22px; color: var(--ok); border-color: var(--ok); transform: rotate(-12deg); } .stamp.no { right: 22px; color: var(--bad); border-color: var(--bad); transform: rotate(12deg); }
.fcard.to-yes .stamp.yes, .fcard.to-no .stamp.no { opacity: 1; }
.deck-ans { display: flex; gap: 8px; max-width: 440px; width: 100%; margin: 0 auto 10px; } .deck-ans input { flex: 1; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--card); font-size: 16px; }
.deck-bar { display: flex; align-items: center; justify-content: space-between; max-width: 520px; width: 100%; margin: 0 auto; }
.deck-bar .mid { display: flex; gap: 14px; }
.deck-bar .round { width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); font-size: 24px; display: grid; place-items: center; color: var(--text); }
.deck-bar .round svg { width: 24px; height: 24px; } .deck-bar .round.rec { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .fin { transition: none; } }
.deck-ans[hidden] { display: none; }
.face .ex small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.face .ex.alts em { display: block; font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.face .ex .alt { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
/* przesuwanie na telefonie: karta nie może być przewijanym kontenerem, a gest poziomy obsługuje aplikacja (touch-action: none) */
.fcard, .fcard .fin, .fcard .face { touch-action: none; }
.fcard .face { overflow: hidden; }
.face .sw button { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; font: inherit; font-weight: 800; }
.face .sw .l { color: var(--bad); background: var(--bad-bg); } .face .sw .r { color: var(--ok); background: var(--ok-bg); }
/* obrazki fiszek v2: emoji albo neutralny kafelek z literą */
.emo.letter { display: grid; place-items: center; font-weight: 800; color: hsl(var(--h) 55% 38%); background: hsl(var(--h) 70% 93%); border-radius: 22%; font-style: normal; filter: none; }
html[data-theme=dark] .emo.letter { color: hsl(var(--h) 70% 78%); background: hsl(var(--h) 35% 22%); }
.face .emo.big { font-size: 84px; line-height: 1; } .face .emo.big.letter { width: 112px; height: 112px; font-size: 56px; }
.face .emo.mid, .imgpick .emo.mid { font-size: 52px; line-height: 1; } .face .emo.mid.letter, .imgpick .emo.mid.letter { width: 66px; height: 66px; font-size: 32px; }
.ph.sm .emo.letter { font-size: 16px; }
.imgpick { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 auto 8px; padding: 6px 12px; border: 0; background: none; font: inherit; color: var(--muted); }
.imgpick small { font-size: 11.5px; font-weight: 700; color: var(--acc); } .imgpick.ro { pointer-events: none; }
.imgopts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.imgopt { width: 64px; height: 64px; border-radius: 16px; border: 1.5px solid var(--line2); background: var(--card); font-size: 34px; display: grid; place-items: center; }
.imgopt.on { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); background: var(--acc-bg); }
/* klikalne słowa (raport v2): delikatne kropkowane podkreślenie z odstępem, bez stylu linku */
.tw { cursor: pointer; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: .26em; border-radius: 4px; transition: background .15s; -webkit-touch-callout: none; }
.tw:hover, .tw:focus-visible { background: color-mix(in srgb, var(--acc) 14%, transparent); outline: none; text-decoration-color: var(--acc); }
.twpop { position: fixed; z-index: 90; padding: 14px 16px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line2); box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .45); animation: up .18s var(--spring); max-height: 70vh; overflow: auto; }
.twpop.sheetish { left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); top: auto; border-radius: 22px; }
.twh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-right: 36px; position: relative; }
.twh b { font-size: 19px; } .twh .lem { color: var(--sub); font-weight: 700; font-size: 14px; } .twh .pos { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.twx-close { position: absolute; right: -6px; top: -6px; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; font-size: 24px; color: var(--muted); }
.twseg { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; } .twseg button { min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line2); background: var(--card); font: inherit; font-size: 13px; font-weight: 700; color: var(--sub); } .twseg button.on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.twb p { margin: 8px 0 0; } .twm { font-size: 18px; font-weight: 800; color: var(--text); } .twc { font-size: 13.5px; color: var(--sub); background: var(--card2); padding: 6px 10px; border-radius: 10px; }
.twctx { font-size: 13.5px; color: var(--sub); } .twctx span:first-child { font-weight: 800; color: var(--muted); }
.twex { font-size: 13.5px; color: var(--sub); border-top: 1px solid var(--line); padding-top: 8px; } .twex small { display: block; color: var(--muted); }
.twload { color: var(--muted); display: flex; align-items: center; gap: 8px; } .twerr { color: var(--bad); font-weight: 700; font-size: 14px; }
.twa { display: flex; gap: 8px; margin-top: 12px; } .twa .btn { flex: 1; min-height: 44px; }
.oral { margin: 10px 4px 0; padding: 8px 12px; border-radius: 12px; background: var(--card2); } .oral.written { background: var(--warn-bg); color: var(--warn); }
/* bez przypadkowego zaznaczania tekstu i podpowiedzi „Dotknij, aby wyszukać” (Google) przy stukaniu — tekst da się zaznaczyć tylko w polach do pisania */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, [contenteditable], .selectable { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* cel dnia, wyzwania, 3-minutówka, grupy fiszek */
.goal { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; }
.goal .ring { position: relative; flex: none; width: 48px; height: 48px; } .goal .ring svg { width: 48px; height: 48px; transform: rotate(-90deg); }
.goal .ring circle { fill: none; stroke-width: 5; } .goal .ring .bg { stroke: var(--line); } .goal .ring .fg { stroke: var(--acc); stroke-linecap: round; transition: stroke-dashoffset .6s var(--spring); }
.goal .ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: var(--acc); }
.goal .gtx { flex: 1; min-width: 0; } .goal b { display: block; font-size: 14.5px; } .goal small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.goal .quick3 { flex: none; min-height: 44px; padding: 0 14px; white-space: nowrap; }
details.chal { margin-top: 10px; padding: 10px 14px; } details.chal summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-size: 14.5px; min-height: 32px; } details.chal summary::-webkit-details-marker { display: none; }
details.chal summary span { font-weight: 800; color: var(--acc); }
.chi { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); } .chi .ck { flex: none; width: 24px; text-align: center; font-size: 16px; color: var(--muted); }
.chi > div { flex: 1; } .chi b { display: block; font-size: 13.5px; font-weight: 700; } .chi .bar { height: 6px; margin: 6px 0 2px; } .chi small { font-size: 11.5px; color: var(--muted); } .chi.done b { color: var(--ok); }
.deck-timer { font-weight: 800; font-size: 13px; color: var(--acc); background: var(--acc-bg); padding: 4px 10px; border-radius: 99px; font-variant-numeric: tabular-nums; } .deck-timer.low { color: var(--warn); background: var(--warn-bg); }
.chips.groups { margin: 0 -2px 10px; } .chips.groups .gman { display: inline-flex; align-items: center; gap: 4px; border-style: dashed; } .chips.groups .gman svg { width: 14px; height: 14px; }
.gname { width: 100%; border: 0; background: none; font: inherit; font-weight: 700; font-size: 15px; color: var(--text); padding: 2px 0; border-bottom: 1px dashed var(--line2); }
.field select { width: 100%; min-height: 46px; padding: 0 12px; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--card); font: inherit; color: var(--text); }
.rdays { display: flex; gap: 6px; flex-wrap: wrap; } .rdays button { min-width: 42px; min-height: 40px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card); font: inherit; font-weight: 700; color: var(--sub); } .rdays button.on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.field input[type=time] { width: 100%; min-height: 46px; padding: 0 12px; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--card); font: inherit; color: var(--text); }

/* 13.11.2026: Słowo dnia, podsumowanie tygodnia, tryb „W drodze” */
.wotd { margin-top: 12px; padding: 14px 16px; }
.wotd .wh { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); margin-bottom: 6px; }
.wotd .wb { display: flex; gap: 12px; align-items: flex-start; }
.wotd .en { font-weight: 800; font-size: 17px; } .wotd .pl { color: var(--sub); font-size: 14px; margin-top: 2px; }
.wotd .ex { color: var(--muted); font-size: 13.5px; margin-top: 6px; font-style: italic; }
.wotd .row { margin-top: 10px; } .wotd .btn { min-height: 42px; padding: 0 16px; font-size: 14.5px; }
.road-card { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 14px 16px; }
.road-card .ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--acc-bg); font-size: 22px; }
.road-card b { display: block; font-size: 15.5px; } .road-card small { color: var(--muted); font-size: 13px; }
.weekly { position: relative; margin-bottom: 12px; padding: 14px 16px; background: linear-gradient(150deg, var(--acc-bg), var(--card) 70%); }
.weekly > b { font-size: 15.5px; }
.weekly .wk-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 11px; font-size: 14px; }
.wk-n { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; text-align: center; }
.wk-n b { display: block; font-size: 20px; font-weight: 800; color: var(--acc); } .wk-n small { font-size: 12px; color: var(--muted); }
.weekly .note { margin: 8px 0 0; }
.road { position: fixed; inset: 0; z-index: 60; background: #0b0c12; color: #eef0f7; display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); }
.road .ibtn { background: #1a1c26; border-color: #2a2d3a; color: #cfd2de; font-weight: 800; }
.road-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; color: #9a9fb2; font-size: 14px; }
.road-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; }
.road-ph { font-size: 24px; font-weight: 800; max-width: 340px; line-height: 1.3; }
.road-bar { width: min(280px, 80%); height: 6px; border-radius: 6px; background: #252836; overflow: hidden; }
.road-bar i { display: block; height: 100%; width: 0; background: var(--acc2); animation: roadbar linear forwards; }
@keyframes roadbar { to { width: 100%; } }
.road-tx { display: flex; flex-direction: column; gap: 8px; font-size: 17px; max-width: 360px; } .road-tx span { color: var(--acc2); font-weight: 700; }
.road .note { color: #8a8fa3; max-width: 300px; }
.road-ctl { display: flex; justify-content: center; align-items: center; gap: 22px; margin-bottom: 18px; }
.road-ctl button { width: 68px; height: 68px; border-radius: 50%; border: 1px solid #2a2d3a; background: #1a1c26; color: #eef0f7; font-size: 24px; }
.road-ctl button.main { width: 96px; height: 96px; background: var(--acc); border-color: transparent; color: #fff; font-size: 30px; }
.road-gap { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: #8a8fa3; }
.road-gap button { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid #2a2d3a; background: #1a1c26; color: #cfd2de; font: inherit; font-weight: 700; }
.road-gap button.on { background: var(--acc); border-color: var(--acc); color: #fff; }

/* 13.11.2026 (raport v3): przyciski pomocnicze lekcji na wąskim ekranie pionowo, brakujące słowa, ćwiczone vs powiedziane, ponów w oknie słowa */
@media (max-width: 480px) { .flagrow { flex-direction: column; } .flagrow button { flex: none; text-align: left; padding: 0 14px; } }
.missw { margin-top: 6px; font-size: 13px; color: var(--muted); } .missw .miss-w { margin-right: 4px; }
.can-list.prac i { color: var(--muted); background: none; }
.twretry { margin-top: 8px; gap: 8px; } .twretry .btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
/* 13.11.2026: słownik offline i formy czasownika w oknie słowa */
.twsrc { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.twsrc .linkb { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--acc); text-decoration: underline; cursor: pointer; }
.twforms { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.twforms summary { font-size: 12.5px; font-weight: 800; color: var(--sub); cursor: pointer; list-style: none; }
.twforms summary::-webkit-details-marker { display: none; }
.twforms .irr { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 8px; background: #fde9e4; color: #b4381c; font-size: 11px; font-weight: 800; }
html[data-theme=dark] .twforms .irr { background: #3a1f19; color: #ff9c86; }
.twf3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; }
.twfb { text-align: left; border: 1px solid var(--line2); background: var(--card2); border-radius: 10px; padding: 6px 9px; font: inherit; color: var(--text); cursor: pointer; }
.twfb b { display: block; font-size: 14.5px; } .twfb small { font-size: 11px; color: var(--muted); }
.twfb.irr b { color: #c2410c; } html[data-theme=dark] .twfb.irr b { color: #ff9c86; }
.twrows { margin-top: 8px; display: grid; gap: 4px; }
.twrows div { display: grid; grid-template-columns: 112px 1fr; gap: 8px; font-size: 12.5px; line-height: 1.35; }
.twrows span:first-child { font-weight: 700; color: var(--sub); }
/* 13.11.2026: pasek trybu offline */
#offbar { position: fixed; left: 50%; transform: translateX(-50%); top: max(8px, env(safe-area-inset-top)); z-index: 70; max-width: calc(100% - 32px); padding: 7px 14px; border-radius: 999px; background: #2b2d3a; color: #f1f2f8; font-size: 12.5px; font-weight: 700; box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); text-align: center; pointer-events: none; }
#offbar[hidden] { display: none; }
/* 13.11.2026: rozmowa z AI */
.talk { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; background: var(--bg); animation: up .35s var(--spring); }
.talk-top { display: flex; align-items: center; gap: 10px; max-width: 640px; width: 100%; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px 8px; }
.talk-top .tt { flex: 1; min-width: 0; } .talk-top .tt b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .talk-top .tt small { font-size: 12.5px; color: var(--acc); font-weight: 700; }
.tgoals { flex: none; min-height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card); font: inherit; font-size: 13px; font-weight: 800; color: var(--sub); }
.talk-goals { max-width: 640px; width: calc(100% - 32px); margin: 0 auto 6px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 5px; font-size: 13.5px; color: var(--sub); }
.talk-goals.inl { width: 100%; margin: 0; }
.talk-goals[hidden] { display: none; }
.talk-goals div { display: flex; gap: 8px; } .talk-goals i { font-style: normal; width: 16px; color: var(--muted); } .talk-goals .on { color: var(--text); } .talk-goals .on i { color: var(--ok, #1a9e5c); font-weight: 800; }
.talk-chat { flex: 1; overflow-y: auto; max-width: 640px; width: 100%; margin: 0 auto; padding: 6px 16px 12px; display: grid; gap: 10px; align-content: start; }
.talk-chat .fb { margin: 0; font-size: 14px; } .talk-fb { justify-self: end; max-width: 92%; } .talk-fb small { display: block; margin-top: 4px; color: var(--muted); }
.bub.typing { color: var(--muted); letter-spacing: 3px; font-weight: 800; }
.talk-foot { max-width: 640px; width: 100%; margin: 0 auto; padding: 8px 16px calc(12px + var(--safe-b, 0px)); display: grid; gap: 8px; }
.talk-foot .ans { min-height: 64px; }
.talk-foot .row { display: flex; gap: 8px; } .talk-foot .row .btn { flex: 1; min-height: 46px; padding: 0 12px; font-size: 14.5px; } .talk-foot .round-mic { flex: 0 0 54px !important; font-size: 20px; } .talk-foot .round-mic.rec { background: var(--bad, #d33); color: #fff; }
.talk-foot .wide { min-height: 40px; font-size: 14px; }
.talk-sum h2 { margin: 6px 0 8px; } .talk-sum ul { margin: 4px 0 0; padding-left: 20px; color: var(--sub); }
.fixc { margin-top: 10px; padding: 14px; } .fixc .said { color: var(--muted); font-size: 14px; } .fixc .better { font-weight: 800; font-size: 16px; margin: 4px 0; } .fixc .prompt-pl { font-size: 17px; margin: 10px 0 8px; } .fixc .ans { min-height: 60px; }
.talk-pick { display: block; width: 100%; text-align: left; font: inherit; color: inherit; margin-bottom: 10px; padding: 14px 16px; cursor: pointer; }
.talk-pick b { display: block; font-size: 15.5px; } .talk-pick small { display: block; color: var(--sub); font-size: 13.5px; margin-top: 4px; } .talk-pick .tp-meta { display: block; margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--acc); }
/* 13.11.2026: ilustracje (jeden styl, własne SVG) — paleta w obu motywach */
:root { --il-bg: #eceaff; --il-ink: #2f3a5f; --il-acc: var(--acc); --il-warm: #f2a65a; --il-skin: #f1c7a3; --il-hair: #4a3426; --il-light: #ffffff; --il-mid: #c9d0e6; --il-green: #3aa676; --il-red: #e0604d; --il-sky: #7fb5e8; }
html[data-path=daily] { --il-bg: #dcf4ef; }
html[data-theme=dark] { --il-bg: #23243a; --il-ink: #c9d1ee; --il-light: #2c3044; --il-mid: #4c5372; --il-skin: #e9b993; --il-hair: #1a1412; --il-sky: #5c93c9; }
html[data-theme=dark][data-path=daily] { --il-bg: #142c28; }
.ill { display: block; flex: none; } .ill.sm { width: 46px; height: 46px; } .ill.md { width: 72px; height: 72px; } .ill.lg { width: 120px; height: 120px; }
.fcard .ill.lg { width: 132px; height: 132px; margin: 0 auto 8px; } .fcard .ill.md { width: 76px; height: 76px; margin: 0 auto 4px; }
.ill-none { display: block; flex: none; width: 10px; } .ill-none.lg { height: 20px; }
/* wskaźnik pamięci */
.memrow { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.mbar { display: inline-flex; gap: 2px; flex: none; } .mbar i { width: 6px; height: 9px; border-radius: 2px; background: var(--line2); }
.mbar.hi i.on { background: var(--il-green); } .mbar.mid i.on { background: var(--acc); } .mbar.lo i.on { background: var(--il-warm); } .mbar.none i { background: var(--line); }
.memrow .ml, .memd .ml { display: flex; flex-direction: column; font-size: 12px; line-height: 1.25; color: var(--muted); } .memrow .ml b, .memd .ml b { color: var(--sub); font-size: 12.5px; }
.listbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.seg.sm button { min-height: 34px; font-size: 12.5px; padding: 0 10px; } .btn.sm { min-height: 36px; padding: 0 12px; font-size: 13.5px; border-radius: 12px; }
.selbar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 8px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line2); box-shadow: var(--shadow); font-size: 13.5px; font-weight: 700; } .selbar span { flex: 1; }
.selck { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--line2); display: grid; place-items: center; font-weight: 800; color: var(--on-acc); } .selck.on { background: var(--acc); border-color: var(--acc); }
.toast.undo { display: flex; align-items: center; gap: 12px; } .toast.undo button { border: 0; background: none; color: var(--acc2, #a59fff); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
/* panel fiszki */
.cs-hd { display: flex; gap: 14px; align-items: center; } .cs-t { flex: 1; min-width: 0; } .cs-t h2 { margin: 0 0 4px; font-size: 19px; } .cs-t .sub { margin: 0 0 8px; }
.cs-src { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--card2); } .cs-src span { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .cs-src p { margin: 4px 0 0; }
.cs-mem { margin-top: 12px; display: grid; gap: 8px; } .memd { display: grid; grid-template-columns: 1fr; gap: 4px; } .memd .mdl { font-size: 12px; font-weight: 800; color: var(--sub); } .memd { padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; } .memd .mbar { margin: 2px 0; } .mexp { margin: 0; font-size: 12.5px; }
.cs-grp { margin-top: 6px; font-size: 14px; } .cs-grp small { color: var(--muted); } .gprop { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .tags span { padding: 3px 9px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); font-size: 12px; color: var(--sub); }
.cs-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .cs-act .btn { flex: 1 1 auto; min-height: 44px; font-size: 14px; padding: 0 12px; }
.cs-edit { margin-top: 10px; } .cs-det { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; } .cs-det summary { font-weight: 800; font-size: 14px; cursor: pointer; color: var(--sub); }
.hrow { display: grid; grid-template-columns: 96px 1fr; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; } .hrow span:first-child { grid-row: span 2; color: var(--muted); } .hrow span:last-child { color: var(--sub); }
.exr { padding: 8px 0; border-bottom: 1px solid var(--line); } .exr p { margin: 0; } .exr small { display: block; color: var(--muted); font-size: 12.5px; } .exr .srcl { font-size: 11px; opacity: .8; }
/* grupy i propozycje */
.glist { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; } .gopt { text-align: left; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card); font: inherit; font-weight: 700; color: var(--text); } .gopt.on { border-color: var(--acc); background: var(--acc-bg); } .gopt small { color: var(--muted); font-weight: 600; } .gopt.new { color: var(--acc); border-style: dashed; }
.propi { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .propi input { margin-top: 3px; width: 18px; height: 18px; flex: none; } .propi small { display: block; color: var(--muted); font-size: 12.5px; }
.illgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; } .illopt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font: inherit; cursor: pointer; } .illopt.on { border-color: var(--acc); background: var(--acc-bg); } .illopt small { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.2; }
/* 13.11.2026: trening wymowy */
.pron { position: fixed; inset: 0; z-index: 58; display: flex; flex-direction: column; background: var(--bg); animation: up .3s var(--spring); }
.pron-top { display: flex; align-items: center; gap: 10px; max-width: 600px; width: 100%; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px 8px; } .pron-top b { flex: 1; font-size: 16px; } .pstep { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.pron-body { flex: 1; overflow-y: auto; max-width: 600px; width: 100%; margin: 0 auto; padding: 4px 16px calc(16px + var(--safe-b, 0px)); display: grid; gap: 12px; align-content: start; }
.pron-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.pron-en { font-size: 20px; font-weight: 800; } .pron-pl { color: var(--sub); }
.pron-row { display: flex; gap: 8px; flex-wrap: wrap; } .pron-row .btn { flex: 1 1 auto; }
.pron-rec { display: grid; gap: 6px; justify-items: center; } .pron-rec .btn { min-width: 220px; } [data-rec].on { background: var(--il-red) !important; color: #fff !important; }
.pst { min-height: 20px; margin: 0; font-size: 13.5px; font-weight: 700; color: var(--sub); text-align: center; } .pst.recording { color: var(--il-red); } .pst.error { color: var(--il-red); font-weight: 600; }
.pron-cmp { display: grid; gap: 8px; } .pron-cmp[hidden] { display: none; }
.wave { width: 100%; height: 76px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); touch-action: none; cursor: crosshair; }
.assess { padding: 10px; border-radius: 12px; background: var(--card2); }.ph.sm .memrow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; } .ph.sm .memrow .ml { display: contents; } .ph.sm .memrow .ml b { white-space: nowrap; } .ph.sm .memrow .ml span { flex-basis: 100%; }
.mhint { font-size: 11.5px; color: var(--muted); }
/* 13.11.2026: pierwsze uruchomienie — pobieranie wszystkiego z paskiem postępu (jak w Twój Nissan, kolory Speak HUB) */
.prel { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; background: var(--bg); transition: opacity .45s ease; }
.prel.out { opacity: 0; pointer-events: none; }
.prel-in { width: min(440px, 100%); text-align: center; animation: up .6s var(--spring) both; }
.prel-in img { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 18px 40px -14px var(--acc); }
.prel-in h2 { margin: 22px 0 8px; font-size: 1.5em; letter-spacing: -.02em; }
.prel-in p { margin: 0; color: var(--sub); line-height: 1.5; }
.prel-bar { position: relative; height: 10px; margin: 28px 0 12px; border-radius: 99px; background: var(--line2); overflow: hidden; }
.prel-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--acc), var(--acc2)); transition: width .3s ease; }
.prel-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: prelShine 1.4s linear infinite; }
@keyframes prelShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.prel-in .prel-st { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.prel-skip { margin-top: 26px; padding: 10px 18px; border: 1px solid var(--line2); border-radius: 12px; background: none; color: var(--sub); font: inherit; font-weight: 600; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .prel-bar i::after { animation: none; } .prel-in { animation: none; } }