:root {
  --bg: #f4f1ec; --card: #ffffff; --fg: #1d2330; --muted: #6b7280; --line: #e4ded4;
  --acc: #1f5fa8; --acc-soft: #e3edf9; --acc-fg: #ffffff;
  --good: #1e8a4c; --good-soft: #dcf3e5; --mid: #b26b00; --mid-soft: #fdf0d5;
  --bad: #c2362f; --bad-soft: #fbe1df; --shadow: 0 1px 2px #0000000d, 0 4px 16px #0000000a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171f; --card: #1e232e; --fg: #e9edf3; --muted: #9aa3b2; --line: #2d3442;
    --acc: #5b9cf0; --acc-soft: #1c2d47; --acc-fg: #0e1420;
    --good: #5bd08a; --good-soft: #173826; --mid: #f0b54a; --mid-soft: #3a2d12;
    --bad: #f07b72; --bad-soft: #43201e; --shadow: 0 1px 2px #0006;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 8px 16px 48px; }
h1 { font-size: 1.5em; margin: 16px 0 12px; }
h2 { font-size: 1.1em; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }

/* třijazyčné popisky: ukrajinsky velce, česky · anglicky menší */
.l1 { display: block; }
.l2 { display: block; font-size: .78em; opacity: .7; font-weight: 400; }
h1 .l2, h2 .l2 { font-size: .6em; }

/* hlavička */
.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); display: flex; align-items: center;
  justify-content: space-between; padding: 6px 12px; gap: 8px; }
.brand { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--fg);
  font: inherit; font-weight: 700; cursor: pointer; text-align: left; padding: 4px; line-height: 1.2; }
.brand img { width: 32px; height: 32px; }
.brand .l2 { font-size: .65em; }
nav { display: flex; gap: 2px; }
.navbtn { display: flex; flex-direction: column; align-items: center; background: none; border: 0; color: var(--muted);
  cursor: pointer; padding: 4px 8px; border-radius: 10px; font-size: 1.2em; line-height: 1.1; }
.navbtn small { font-size: .5em; text-align: center; }
.navbtn small .l2 { display: none; }
.navbtn.active { background: var(--acc-soft); color: var(--acc); }
@media (min-width: 560px) { .navbtn small .l2 { display: block; } }

/* karty a tlačítka */
.card { background: var(--card); border-radius: 18px; padding: 18px; margin: 12px 0; box-shadow: var(--shadow); }
.center { text-align: center; }
.big-emoji { font-size: 3em; }
.hint { color: var(--muted); margin: 0 0 12px; }
.hint.small { font-size: .85em; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.btn { font: inherit; font-size: .95em; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); cursor: pointer; text-align: left; line-height: 1.25; }
.btn:hover:not(:disabled) { border-color: var(--acc); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--acc); color: var(--acc-fg); border-color: var(--acc); font-weight: 600; }
.btn.ghost { border-color: transparent; background: none; color: var(--muted); }
.btn.small { font-size: .82em; padding: 6px 12px; }
.btn.wide { width: 100%; margin-top: 12px; text-align: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; }
.btn .tri { display: flex; flex-direction: column; }
.btn.wide { justify-content: center; }
.btn.recording { border-color: var(--bad); color: var(--bad); }
input, select { font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); width: 100%; }
input[type=range] { padding: 0; accent-color: var(--acc); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--acc); }
.field { display: block; margin-top: 14px; border: 0; padding: 0; }
.field > span, .field legend { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92em; }
.field output { min-width: 56px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.check { display: flex; gap: 10px; align-items: center; margin-top: 10px; cursor: pointer; }
.error { color: var(--bad); background: var(--bad-soft); padding: 10px 12px; border-radius: 12px; margin: 12px 0 0; }

/* sady */
.sets { display: grid; gap: 10px; }
.set { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid transparent;
  border-radius: 16px; padding: 14px 16px; font: inherit; color: var(--fg); cursor: pointer; text-align: left;
  box-shadow: var(--shadow); }
.set:hover { border-color: var(--acc); }
.set-ico { font-size: 1.7em; width: 44px; height: 44px; display: grid; place-items: center; background: var(--acc-soft);
  border-radius: 12px; flex: none; }
.set-txt { flex: 1; display: flex; flex-direction: column; }
.set-txt small { color: var(--muted); font-size: .8em; }
.set-meta { color: var(--muted); font-size: .85em; background: var(--bg); border-radius: 99px; padding: 2px 10px; }
.set-meta:empty { display: none; }
.set.weak .set-ico { background: var(--mid-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { font: inherit; font-size: .85em; border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  border-radius: 99px; padding: 5px 12px; cursor: pointer; }
.chip small { color: var(--muted); }
.chip:hover { border-color: var(--acc); }
.gen form input { flex: 1; }
.gen form .btn { flex: none; }

/* nastavení */
.num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--acc);
  color: var(--acc-fg); font-size: .8em; font-weight: 700; flex: none; }
.setup-step.disabled { opacity: .45; pointer-events: none; }
.meter { position: relative; height: 22px; background: var(--bg); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.meter.small { height: 10px; margin: 14px 0; }
.meter .zone { position: absolute; top: 0; bottom: 0; left: 39%; width: 58%; background: var(--good-soft); }
.meter .fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--muted); transition: width 60ms linear; }
.meter .fill[data-state=lvlOk] { background: var(--good); }
.meter .fill[data-state=lvlQuiet] { background: var(--mid); }
.meter .fill[data-state=lvlLoud] { background: var(--bad); }
.meter-label { margin: 6px 0 0; font-size: .9em; min-height: 2.6em; }
.meter-label[data-state=lvlOk] { color: var(--good); }
.meter-label[data-state=lvlQuiet], .meter-label[data-state=lvlLoud] { color: var(--mid); }

/* cvičení */
.practice-head { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.deck-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos { color: var(--muted); font-variant-numeric: tabular-nums; }
.stepper { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0; margin: 12px 0 0; }
.stepper li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: .78em;
  color: var(--muted); cursor: pointer; padding: 6px 2px; border-radius: 12px; position: relative; }
.stepper li .num { background: var(--line); color: var(--muted); }
.stepper li .l2 { font-size: .85em; }
.stepper li.active { color: var(--fg); font-weight: 600; background: var(--card); box-shadow: var(--shadow); }
.stepper li.active .num { background: var(--acc); color: var(--acc-fg); }
.stepper li.done .num { background: var(--good); color: #fff; }
.sentence-card { border-left: 5px solid var(--acc); }
.cs { font-size: 1.65em; font-weight: 650; line-height: 1.3; margin: 0; }
.uk { color: var(--muted); margin: 8px 0 0; font-size: 1.05em; }
.focus { margin: 10px 0 0; font-size: .9em; background: var(--mid-soft); padding: 8px 12px; border-radius: 10px; }
.panel .row { margin-bottom: 4px; }

.hold, .micbtn { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px auto 0; background: none;
  border: 0; cursor: pointer; color: var(--fg); font: inherit; }
.mic-ico { width: 104px; height: 104px; border-radius: 50%; background: var(--acc); display: grid; place-items: center;
  font-size: 2.6em; box-shadow: 0 6px 20px color-mix(in srgb, var(--acc) 40%, transparent); transition: transform .15s; }
.micbtn:hover .mic-ico { transform: scale(1.04); }
.micbtn.on .mic-ico { background: var(--bad); animation: pulse 1.2s infinite; }
.mic-lbl { text-align: center; font-weight: 600; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 55%, transparent); }
  100% { box-shadow: 0 0 0 22px transparent; } }

/* výsledek */
.loading { display: flex; gap: 14px; align-items: center; padding: 24px 0; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--acc); border-radius: 50%;
  animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.verdict { display: flex; gap: 18px; align-items: center; font-size: 1.2em; font-weight: 700; }
.verdict .l2 { font-size: .7em; }
.ring { --c: var(--muted); width: 88px; height: 88px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); }
.ring span { width: 70px; height: 70px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 1.4em; }
.verdict.good .ring { --c: var(--good); } .verdict.good { color: var(--good); }
.verdict.mid .ring { --c: var(--mid); } .verdict.mid { color: var(--mid); }
.verdict.bad .ring { --c: var(--bad); } .verdict.bad { color: var(--bad); }
.dims { display: flex; flex-direction: column; font-size: .6em; font-weight: 400; color: var(--muted); margin-top: 6px; }
.compare { margin: 14px 0 4px; }
.words, .legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.word { font: inherit; font-weight: 600; padding: 6px 12px; border-radius: 10px; border: 0; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.word small { font-size: .65em; font-weight: 400; opacity: .8; }
.word.good { background: var(--good-soft); color: var(--good); }
.word.mid { background: var(--mid-soft); color: var(--mid); }
.word.bad { background: var(--bad-soft); color: var(--bad); }
.word.omit { text-decoration: line-through; }
.legend .word { cursor: default; }
.tutor { background: var(--acc-soft); border-radius: 14px; padding: 12px 14px; margin: 12px 0; }
.tutor p { margin: 0; }
.tips { list-style: none; padding: 0; margin: 8px 0 0; }
.tips li { margin: 8px 0; display: flex; gap: 8px; align-items: baseline; }
.tips .word { flex-direction: row; flex: none; font-size: .9em; padding: 3px 10px; }
.actions { margin-top: 16px; }
.actions .btn.primary { margin-left: auto; }

/* nápověda */
.howto { padding-left: 1.2em; margin: 0; }
.howto li { margin: 10px 0; }
.howto b { display: block; }
.howto b .l2 { display: inline; margin-left: 6px; }
.howto b .l1 { display: inline; }
.howto > li > span .l2 { font-size: .85em; }
.tiplist { padding-left: 1.2em; margin: 0; }
.tiplist li { margin: 8px 0; }

@media (max-width: 420px) {
  .brand { font-size: .9em; }
  .brand .l2 { display: none; }
  .navbtn { padding: 4px 6px; }
  .cs { font-size: 1.4em; }
  .actions .btn.primary { margin-left: 0; width: 100%; }
  .stepper li .l2 { font-size: .75em; }
}

/* přihlášení e-mailem */
.auth .field input, .code-input { font: inherit; width: 100%; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.auth .field input:focus, .code-input:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: var(--acc); }
.auth .field { display: block; margin: 10px 0; }
.auth .field > span { display: block; font-size: .9em; margin-bottom: 4px; }
.auth .check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; font-size: .9em; }
.auth .check input { margin-top: 4px; flex: none; width: 20px; height: 20px; }
.code-input { font-size: 2em; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; margin: 6px 0; }
.notice { background: var(--mid-soft); color: var(--fg); border-radius: 12px; padding: 10px 14px; }
.account { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.account p { margin: 0; }
body.signed-out .top nav { display: none; }
.auth input.invalid { border-color: var(--bad); outline: 2px solid var(--bad); outline-offset: 1px; }
#auth-err .btn { margin-left: 6px; }
.account-wrap .account { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.account-wrap .account p { margin: 0; }
.tg-box { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.tg-state { background: var(--acc-soft); border-radius: 12px; padding: 10px 14px; }
.tg-offer h1 { margin-top: 4px; }
.tg-steps { text-align: left; margin: 12px auto 16px; padding-left: 1.4em; max-width: 440px; }
.tg-steps li { margin: 6px 0; }
.tg-steps .l2 { display: inline; margin-left: 4px; }
.tg-qr { text-align: center; margin: 10px 0; }
.tg-qr .qr { display: inline-block; background: #fff; border-radius: 12px; padding: 6px; line-height: 0; }
.tg-qr .qr svg { width: 220px; height: 220px; }
a.navbtn { text-decoration: none; }