/* Kumpel — яркое оформление: лавандовый фон со свечением, градиенты, «парящее» нижнее меню */
:root {
  --bg: #f6f4ff;
  --card: #ffffff;
  --card-border: rgba(91, 77, 255, .08);
  --line: #ece8fb;
  --soft: #f2effd;
  --text: #17153a;
  --muted: #74708f;
  --label: #8a83b8;
  --blue: #5b4dff;
  --blue-dark: #3f2fd6;
  --orange: #ff6a2f;
  --orange-dark: #e04e17;
  --green: #12b886;
  --green-dark: #0b8f68;
  --red: #f43f5e;
  --pink: #ec4899;
  --yellow: #ffc23d;
  --shadow: 0 1px 2px rgba(23, 21, 58, .04), 0 12px 32px -14px rgba(64, 46, 170, .22);
  --blue-text: #4f3ff0;
  --chip-blue-bg: #eeebff;
  --goal-bg: #fff1ea;
  --ok-bg: #e3f8ef;
  --bad-bg: #ffe9ed;
  --timer: #c9f2df;
  --timer-low: #ffd6cc;
  --locked: #d7d2ee;
  --navy: #26206b;
  --pill-active: #17153a;
  --teal: #0fa3b1;
  --tabbar-bg: rgba(255, 255, 255, .9);
  --seg-bg: rgba(91, 77, 255, .08);
  --tabbar-shadow: 0 16px 36px -14px rgba(40, 30, 120, .35);
  --deco-opacity: .22;
  --grad-primary: linear-gradient(135deg, #7b5cff 0%, #4f6bff 100%);
  --grad-hot: linear-gradient(135deg, #ff8a3d 0%, #ff4f8b 100%);
  --grad-green: linear-gradient(135deg, #2bd4a0 0%, #0fa3b1 100%);
  --glow-primary: 0 12px 26px -12px rgba(91, 77, 255, .75);
  --glow-hot: 0 12px 26px -12px rgba(255, 79, 139, .8);
  --glow-green: 0 12px 26px -12px rgba(18, 184, 134, .75);
  --page-glow: radial-gradient(520px 380px at -10% -5%, rgba(123, 92, 255, .2), transparent 70%),
    radial-gradient(460px 340px at 110% 8%, rgba(255, 79, 139, .14), transparent 70%),
    radial-gradient(560px 420px at 50% 105%, rgba(34, 211, 238, .14), transparent 70%);
  --display: "Unbounded", "Montserrat", "Golos Text", system-ui, sans-serif;
  --word-font: "Montserrat", "Golos Text", system-ui, sans-serif;   /* немецкие слова: шрифт поуже — длинные влезают */
  --tabbar-h: 64px;
}

/* тёмная тема: включается в профиле (или берётся из Телеграма) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0b1d;
  --card: #17162f;
  --card-border: rgba(255, 255, 255, .06);
  --line: #2a2752;
  --soft: #221f42;
  --text: #f1efff;
  --muted: #a6a2c9;
  --label: #8f89c2;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 32px -16px rgba(0, 0, 0, .7);
  --blue-text: #a99cff;
  --chip-blue-bg: #2a2560;
  --goal-bg: #2c1f2f;
  --ok-bg: #123a2f;
  --bad-bg: #3f1a29;
  --timer: #164638;
  --timer-low: #4f2a24;
  --locked: #3a3765;
  --navy: #332c80;
  --pill-active: #6d4dff;
  --teal: #4fd6e8;
  --tabbar-bg: rgba(23, 22, 47, .92);
  --seg-bg: rgba(255, 255, 255, .06);
  --tabbar-shadow: 0 16px 36px -14px rgba(0, 0, 0, .8);
  --deco-opacity: .38;
  --page-glow: radial-gradient(520px 380px at -10% -5%, rgba(123, 92, 255, .3), transparent 70%),
    radial-gradient(460px 340px at 110% 8%, rgba(255, 79, 139, .16), transparent 70%),
    radial-gradient(560px 420px at 50% 105%, rgba(34, 211, 238, .12), transparent 70%);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* скрытое скрыто всегда — даже у кнопок и строк, которым задан свой display */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
}

html { background: var(--page-glow), var(--bg); background-attachment: fixed; }

button { font: inherit; color: inherit; }

.app { max-width: 480px; margin: 0 auto; }
main { padding: 14px 16px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); }
body.playing main { padding-bottom: 28px; }

.tab, .view { display: none; animation: fade .2s ease; }
.tab.active, .view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- текст ---------- */
.title { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.2; margin: 6px 0 6px; letter-spacing: -.4px; }
.subtitle { margin: 0 0 14px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label);
  margin: 18px 0 10px;
}
.label.section { margin: 26px 4px 12px; }
.label-light { color: rgba(255, 255, 255, .7); margin-top: 0; }
.label-orange { color: var(--orange); margin: 0 0 4px; }
.c-green { color: var(--green); }
.c-orange { color: var(--orange); }
.c-blue { color: var(--blue-text); }
.c-pink { color: var(--pink); }

/* ---------- шапка главной ---------- */
.brand { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 14px; }
.logo { display: flex; align-items: center; font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -.5px; }
.logo-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 5px;
  color: #fff;
  background: var(--grad-hot);
  border-radius: 11px;
  box-shadow: var(--glow-hot);
  transform: rotate(-8deg);
}
.chips { display: flex; gap: 6px; }
.chip {
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 700;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.chip-blue { color: var(--blue-text); }

/* ---------- карточки и строки ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 16px;
  box-shadow: var(--shadow);
  margin-top: 14px;
}
.card > .label:first-child { margin-top: 2px; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.row:last-of-type { border-bottom: 0; }
.row.card { padding: 14px 16px; background: var(--card); border-bottom: 0; cursor: pointer; }
.row.soon { cursor: default; }
.row.soon .row-text b { color: var(--muted); }
.row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-text b { font-size: 16px; font-weight: 700; }
.row-text small { font-size: 13px; color: var(--muted); }
.row-end { color: var(--muted); font-size: 14px; }
.row-end.done { color: var(--green); font-weight: 800; }

.ico {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  font-size: 22px;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .08);
}
.ico-orange { background: linear-gradient(135deg, #ffb35c, #ff6a2f); }
.ico-blue { background: linear-gradient(135deg, #8b7bff, #4f5bff); }
.ico-green { background: linear-gradient(135deg, #3fe0aa, #10a37f); }
.ico-pink { background: linear-gradient(135deg, #ff8fb8, #ec4899); }
.ico-navy { background: linear-gradient(135deg, #5b55d6, #26206b); }
.ico-yellow { background: linear-gradient(135deg, #ffe17a, #ffad1f); }
.ico-soft { background: var(--soft); filter: grayscale(.6); box-shadow: none; }

.badge-soon {
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--label);
  background: var(--soft);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- плитки ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 136px;
  padding: 16px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .12s ease;
}
.tile:active { transform: scale(.97); }
.tile::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--deco, transparent) 0%, transparent 68%);
  opacity: var(--deco-opacity);
}
.tile > * { position: relative; z-index: 1; }
.tile .ico { width: 48px; height: 48px; flex-basis: 48px; font-size: 24px; margin-bottom: 12px; }
.tile b { font-size: 16px; font-weight: 700; line-height: 1.2; }
.tile small { font-size: 13px; color: var(--muted); }
.tile .badge-soon { position: absolute; top: 14px; right: 12px; z-index: 2; }
.tile.soon { cursor: default; }
.tile.soon .ico { filter: grayscale(.35); opacity: .85; }

/* игры — яркие плитки своего цвета */
.tiles-fun .tile {
  color: #fff;
  background: linear-gradient(160deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .18) 100%), var(--deco);
  border: 0;
  box-shadow: 0 16px 30px -16px var(--deco);
}
.tiles-fun .tile::after { background: rgba(255, 255, 255, .16); opacity: 1; }
.tiles-fun .tile small { color: rgba(255, 255, 255, .86); }
.tiles-fun .tile .ico { background: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.tiles-fun .tile.soon { filter: saturate(.3); opacity: .7; }
.tiles-fun .badge-soon { color: #fff; background: rgba(255, 255, 255, .25); }

.goal {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  text-align: left;
  background: linear-gradient(135deg, rgba(255, 138, 61, .16), rgba(255, 79, 139, .12));
  border: 1px solid rgba(255, 106, 47, .2);
  border-radius: 20px;
  cursor: pointer;
}
.goal-show { cursor: default; }
.goal b { display: block; font-size: 15px; overflow-wrap: anywhere; }

/* ---------- кнопки ---------- */
.btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  transition: transform .1s;
}
.btn:active { transform: scale(.98); }
.btn-orange { background: var(--grad-hot); box-shadow: var(--glow-hot), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-green { background: var(--grad-green); box-shadow: var(--glow-green), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-outline { color: var(--text); background: var(--card); border: 1.5px solid var(--line); box-shadow: none; margin-top: 12px; }
.btn[disabled] { opacity: .6; cursor: default; }

.error { color: var(--red); font-size: 14px; min-height: 18px; margin: 10px 0 0; text-align: center; }

/* ---------- синие баннеры ---------- */
.hero-blue {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  padding: 20px;
  color: #fff;
  background:
    radial-gradient(240px 180px at 100% 0%, rgba(255, 255, 255, .22), transparent 70%),
    radial-gradient(260px 200px at 0% 120%, rgba(255, 79, 139, .55), transparent 70%),
    linear-gradient(135deg, #6d4dff 0%, #4f6bff 100%);
  border-radius: 26px;
  box-shadow: var(--glow-primary);
}
.hero-blue::after {
  content: "★";
  position: absolute;
  right: -10px;
  bottom: -38px;
  font-size: 150px;
  color: rgba(255, 255, 255, .08);
}
.hero-big { font-family: var(--display); font-weight: 900; font-size: 34px; margin: 2px 0 6px; }
.hero-sub { color: rgba(255, 255, 255, .8); font-size: 14px; }
.hero-blue .btn { position: relative; z-index: 1; }

.hero-row { display: flex; align-items: center; gap: 12px; }
.hero-emoji { font-size: 30px; }
.hero-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.hero-text b { font-size: 16px; }
.hero-text small, .hero-num small { color: rgba(255, 255, 255, .7); font-size: 12.5px; }
.hero-num { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.hero-num b { font-family: var(--display); font-size: 24px; font-weight: 800; }

/* ---------- путь уровней ---------- */
.path { position: relative; margin-top: 18px; padding-left: 52px; }
.path::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 22px;
  width: 3px;
  background: var(--line);
  border-radius: 3px;
}
.step { position: relative; margin-bottom: 12px; }
.step-node {
  position: absolute;
  left: -52px;
  top: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: var(--grad-hot);
  border-radius: 13px;
  box-shadow: var(--glow-hot);
  transform: rotate(45deg);
}
.step-node span { transform: rotate(-45deg); }
.step.locked .step-node { background: var(--locked); box-shadow: none; }
.step .card { margin-top: 0; }
.step-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.step-head b { font-size: 16px; }
.step-meta { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.step-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.btn-mini {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--grad-primary);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.step.locked .card { opacity: .7; }

/* ---------- уровни в турнире ---------- */
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 800;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
}
.level small { font-size: 10.5px; font-weight: 600; color: var(--label); }
.level.active { color: #fff; background: var(--grad-primary); border-color: transparent; box-shadow: var(--glow-primary); }
.level.active small { color: rgba(255, 255, 255, .8); }
.level { position: relative; }
.level.pro-lock::after { content: "👑"; position: absolute; top: -9px; right: -4px; font-size: 14px; }
.seg button.pro-lock::after { content: " 👑"; }
.level[disabled] { opacity: .55; cursor: default; }
.live-label { display: flex; align-items: center; gap: 8px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: pulse 1.2s ease infinite; }
.live-row .row-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-status { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sizes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 16px; }
.sizes .level { padding: 10px 0; font-size: 15px; }
.sizes .level[disabled] { opacity: .35; }

.input {
  width: 100%;
  padding: 15px 16px;
  font: inherit;
  font-size: 17px;
  color: var(--text);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 16px;
  outline: none;
}
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--chip-blue-bg); }

/* ---------- переключатели (тема, общий / медицина) ---------- */
.seg { display: inline-flex; flex: 0 0 auto; padding: 3px; background: var(--seg-bg); border-radius: 999px; }
.seg button {
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.seg button.active { color: #fff; background: var(--grad-primary); box-shadow: 0 6px 14px -8px rgba(91, 77, 255, .8); }
.seg-wide { display: flex; margin: 4px 0 2px; }
.seg-wide button { flex: 1; padding: 11px 6px; font-size: 14px; }
.row.setting { cursor: default; }

/* ---------- медицинские темы ---------- */
.topics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.topic {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  text-align: left;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
}
.topic .topic-emoji { font-size: 22px; }
.topic b { font-size: 14px; line-height: 1.25; }
.topic small { font-size: 12px; color: var(--muted); }
.topic.active { background: var(--chip-blue-bg); border-color: var(--blue); }

/* ---------- игра ---------- */
.hud { display: flex; justify-content: space-between; padding: 4px 2px 12px; }
.hud-item { display: flex; flex-direction: column; }
.hud-item:last-child { align-items: flex-end; }
.hud-num { font-family: var(--display); font-size: 22px; font-weight: 900; }
.hud-cap { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.hud-quit { align-self: center; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--card); border: 2px solid var(--line); border-radius: 999px; cursor: pointer; }

.progress { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 5%; background: var(--grad-primary); border-radius: 999px; transition: width .25s ease; }

.timer-wrap { position: relative; height: 30px; margin: 12px 0 4px; background: var(--card); border-radius: 999px; overflow: hidden; box-shadow: var(--shadow); }
.timer-fill { position: absolute; inset: 0; width: 100%; background: var(--timer); }
.timer-fill.low { background: var(--timer-low); }
.timer-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 800; }

.word-card { margin: 12px 0 16px; padding: 34px 18px; text-align: center; background: var(--card); border: 1px solid var(--card-border); border-radius: 26px; box-shadow: var(--shadow); }
.word { font-family: var(--word-font); font-size: 30px; font-weight: 900; word-break: break-word; margin-bottom: 6px; }
.word.long { font-size: 21px; line-height: 1.3; }

.options { display: grid; gap: 10px; }
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 18px;
  cursor: pointer;
  transition: transform .08s;
}
.option:active { transform: translateY(2px); }
.option .num {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  background: var(--soft);
  border-radius: 9px;
}
.option.correct { border-color: var(--green); background: var(--ok-bg); box-shadow: var(--glow-green); }
.option.correct .num { color: #fff; background: var(--green); }
.option.wrong { border-color: var(--red); background: var(--bad-bg); }
.option.wrong .num { color: #fff; background: var(--red); }
.option.dim { opacity: .5; }
.option[disabled] { cursor: default; }

/* ---------- итог ---------- */
.result-head { text-align: center; padding: 18px 0 6px; }
.result-emoji { font-size: 52px; }
.result-score {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.15;
  background: var(--grad-hot);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.stats3 > div { display: flex; flex-direction: column; gap: 4px; }
.stats3 b, .stats2 b { font-family: var(--display); font-size: 22px; font-weight: 800; }
.stats3 small, .stats2 small { font-size: 12.5px; color: var(--muted); }
.stats2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stats2 .card { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; }
.note { margin-top: 10px; }

/* ---------- рейтинг ---------- */
.pills { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 12px; scrollbar-width: none; }
.pill {
  flex: 0 0 auto;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.pill.active { color: #fff; background: var(--grad-primary); border-color: transparent; box-shadow: 0 6px 14px -8px rgba(91, 77, 255, .8); }
.pill.off { color: var(--label); }

.callout {
  margin-top: 10px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--muted);
  background: var(--card);
  border-left: 4px solid var(--yellow);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.list .lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.list .lb-row:last-child { border-bottom: 0; }
.lb-row.me .lb-name { color: var(--blue-text); }
.list .lb-row.me { margin: 0 -10px; padding-left: 10px; padding-right: 10px; background: var(--chip-blue-bg); border-bottom-color: transparent; border-radius: 16px; }
.lb-place { width: 32px; flex: 0 0 32px; text-align: center; font-weight: 800; color: var(--muted); }
.lb-place.lb-medal { font-size: 22px; }
.lb-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-level { margin-left: 6px; padding: 2px 7px; font-size: 11px; font-weight: 700; color: var(--blue-text); background: var(--chip-blue-bg); border-radius: 999px; }
.lb-score { font-weight: 800; white-space: nowrap; }
.lb-score small { font-weight: 500; color: var(--muted); }
.lb-empty { padding: 10px 0; color: var(--muted); }

.avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  font-weight: 800;
  color: #fff;
  border-radius: 50%;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- уроки ---------- */
.back-link {
  padding: 4px 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-text);
  background: none;
  border: 0;
  cursor: pointer;
}
.step-progress { height: 7px; margin: 4px 0 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.step-progress > div { height: 100%; width: 0; background: var(--green); border-radius: 999px; transition: width .25s; }
.step .card { cursor: pointer; }
.btn-mini.green { background: var(--grad-green); }
.btn-mini.ghost { color: var(--blue-text); background: var(--chip-blue-bg); }
.lesson-row { cursor: pointer; }
.lesson-row.locked { cursor: default; opacity: .55; }
.ico.ico-done { background: var(--grad-green); color: #fff; font-weight: 800; }
.ico.ico-next { background: var(--grad-hot); color: #fff; }

.flashcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 250px;
  margin: 14px 0 2px;
  padding: 28px 18px;
  text-align: center;
  background: var(--card);
  border: 0;
  border-radius: 24px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.fc-word { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; }
.fc-de { font-family: var(--word-font); font-size: 32px; font-weight: 900; word-break: break-word; }
.speak-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: var(--soft);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.speak-btn:active { transform: scale(.92); }
.fc-de.long { font-size: 22px; line-height: 1.3; }
.fc-ru { font-size: 21px; font-weight: 700; color: var(--green); }
.fc-hint { font-size: 13px; color: var(--muted); }

/* ---------- повторение ---------- */
.review-head { display: flex; flex-direction: column; gap: 3px; padding-bottom: 6px; }
.review-head b { font-size: 16px; }
.review-head small { font-size: 13px; }
.rv-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rv-row:last-child { border-bottom: 0; }
.rv-mark { width: 22px; flex: 0 0 22px; text-align: center; font-weight: 800; }
.rv-mark.ok { color: var(--green); }
.rv-mark.bad { color: var(--red); }
.rv-text { flex: 1; min-width: 0; }
.rv-text b { display: block; font-size: 15px; }
.rv-text small { font-size: 13px; color: var(--muted); }
.rv-wrong { padding: 3px 8px; font-size: 12px; font-weight: 800; color: var(--red); background: var(--bad-bg); border-radius: 999px; white-space: nowrap; }
.rv-dots { font-size: 11px; letter-spacing: 2px; color: var(--green); white-space: nowrap; }
.rv-more { padding-top: 8px; font-size: 13px; color: var(--muted); }
#review-note { margin-top: 14px; }

/* ---------- значки ---------- */
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 6px; }
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  text-align: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.medal {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.medal.pic img { width: 100%; height: 100%; display: block; }
/* монета для значков без картинки — в том же стиле, что и нарисованные медали */
.medal.plain {
  font-size: 28px;
  background: radial-gradient(circle at 35% 30%, #2d3b66 0%, #141b31 75%);
  box-shadow: inset 0 0 0 3px #c9a44c, inset 0 0 0 5px #141b31, inset 0 0 0 6px #8a6d2f;
}
.badge:not(.earned) .medal { filter: grayscale(1); opacity: .42; }
.badge.earned .medal { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .22)); }
.badge b { font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.badge small { font-size: 11.5px; color: var(--muted); }
.badge small .bp-now { font-weight: 800; color: var(--text); }
.badge.earned small, .badge.earned small .bp-now { color: var(--teal); }
.new-badges { border: 2px solid var(--yellow); }
.new-badges .label { margin-top: 2px; }
.new-badges .badges { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }

.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
  z-index: 50;   /* поверх окон и экрана входа */
  max-width: 448px;
  margin: 0 auto;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(27, 35, 64, .95);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: none; }

/* ---------- дуэли ---------- */
.center { text-align: center; }
.code-row { display: flex; gap: 10px; }
.code-row .btn { width: auto; margin: 0; padding: 0 20px; font-size: 16px; }
.code-input {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: .25em;
  text-align: center;
  text-transform: uppercase;
}
.code-input::placeholder { color: var(--locked); letter-spacing: .12em; }
.inv-avatar { display: flex; justify-content: center; margin-bottom: 8px; }
.vs { display: flex; align-items: center; gap: 6px; padding: 12px; }
.vs-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px;
  text-align: center;
  border-radius: 18px;
}
.vs-side.win { background: var(--ok-bg); }
.vs-name { max-width: 100%; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-score { font-family: var(--display); font-size: 28px; font-weight: 900; line-height: 1.1; }
.vs-side small { font-size: 12.5px; color: var(--muted); }
.vs-mid { font-family: var(--display); font-size: 18px; font-weight: 900; color: var(--pink); }
.avatar.vs-wait { color: var(--muted); background: var(--soft); }
.code-card { text-align: center; border: 2px dashed var(--pink); }
.code-card .label { margin-top: 2px; }
.duel-code { margin: 2px 0 6px; font-family: var(--display); font-size: 40px; font-weight: 900; letter-spacing: .2em; color: var(--blue-text); }
.duel-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
.duel-end b { font-weight: 800; }
.duel-tag { padding: 3px 8px; font-size: 11.5px; font-weight: 800; border-radius: 999px; }
.duel-tag.won { color: var(--green); background: var(--ok-bg); }
.duel-tag.lost { color: var(--red); background: var(--bad-bg); }
.duel-tag.draw { color: var(--blue-text); background: var(--chip-blue-bg); }
.duel-tag.waiting { color: var(--orange); background: var(--goal-bg); }

/* ---------- профиль ---------- */
.profile-head { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; }
.prof-name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.3px; }

/* ---------- Pro ---------- */
.pro-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #3a2a00;
  vertical-align: 1px;
  background: linear-gradient(135deg, #ffd76a, #ffb800);
  border-radius: 6px;
}
.pro-card { border: 2px solid var(--line); }
.pro-card.on { border-color: var(--yellow); }
.pro-head { display: flex; align-items: center; gap: 12px; }
.pro-crown { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; font-size: 24px; background: var(--goal-bg); border-radius: 13px; }
.pro-card:not(.on) .pro-crown { filter: grayscale(.7); }
.pro-perks { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; }
.pro-how {
  width: 100%;
  margin-top: 12px;
  padding: 11px 12px;
  font-size: 13.5px;
  color: var(--blue-text);
  text-align: left;
  background: var(--chip-blue-bg);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.pro-card.on .pro-how { display: none; }

/* ---------- админ-панель ---------- */
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-row .pill { padding: 9px 13px; }
.adm-found:empty { display: none; }
.adm-found { margin-top: 8px; }
.adm-found .row { padding: 9px 0; }
.adm-found .row.picked .row-text b { color: var(--blue-text); }
.adm-found .row-end, .admin-row .row-end { white-space: nowrap; }
.admin-row { cursor: default; }
.admin-row .row-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
/* кубок в админке: кнопки — отдельной строкой под названием, чтобы не сжимать его */
.admin-row.wrap { flex-wrap: wrap; row-gap: 8px; }
.admin-row.wrap .row-actions { flex-basis: 100%; padding-left: 56px; }
.row-actions .btn-mini { padding: 8px 11px; font-size: 13px; }
.btn-mini.red { color: var(--red); background: var(--bad-bg); }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.check-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 600; cursor: pointer; }
.check-row input { width: 20px; height: 20px; accent-color: var(--blue); }

/* ---------- грамматика в уроке ---------- */
#gr-label { margin: 6px 0 0; }
.gr-rule { white-space: pre-wrap; line-height: 1.55; font-size: 15.5px; }
.gr-intro { font-size: 15.5px; line-height: 1.6; }
.end { font-weight: 800; color: var(--orange); }
.gr-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.gr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gr-table th { padding: 7px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--label); text-align: left; text-transform: uppercase; border-bottom: 2px solid var(--line); }
.gr-table td { padding: 8px 6px; line-height: 1.35; vertical-align: top; border-bottom: 1px solid var(--line); }
.gr-table tr:last-child td { border-bottom: 0; }
.gr-table td:first-child { font-weight: 700; color: var(--muted); }
.gr-table tbody tr:nth-child(even) td { background: var(--soft); }
.gr-note { margin-top: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; background: var(--goal-bg); border-radius: 12px; }
.gr-steps { margin: 0; padding-left: 22px; display: grid; gap: 9px; font-size: 15px; line-height: 1.5; }
.gr-steps li::marker { font-weight: 800; color: var(--blue-text); }
.gr-mistake { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.gr-mistake:last-child { border-bottom: 0; }
.gr-mistake .bad { display: block; color: var(--red); text-decoration: line-through; }
.gr-mistake .ok { display: block; margin-top: 3px; font-weight: 700; color: var(--green); }
.gr-ex { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.gr-ex:last-child { border-bottom: 0; }
.gr-ex span { flex: 1; font-size: 15px; line-height: 1.4; }
.gr-ex b { font-weight: 700; }

/* ---------- глаголы урока ---------- */
.vb-card { padding: 16px 16px 14px; }
.vb-head { display: flex; align-items: center; gap: 10px; }
.vb-inf { flex: 1; min-width: 0; font-family: var(--word-font); font-size: 22px; font-weight: 900; word-break: break-word; }
.vb-ru { margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--green); }
/* формы строками «подпись — форма»: длинный Perfekt не рвётся посреди слова */
.vb-forms { display: grid; gap: 6px; margin-top: 12px; padding: 10px 12px; background: var(--soft); border-radius: 14px; }
.vb-form { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.vb-form small { flex: 0 0 96px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--label); text-transform: uppercase; }
.vb-form b { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; }
.vb-note { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.vb-card .gr-ex { margin-top: 6px; padding-bottom: 0; border-bottom: 0; }
.vb-ex-ru { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
#vb-next { margin-top: 18px; }
.quiz-next { margin-top: 16px; }
.word .fill { color: var(--green); }
.word .fill.miss { color: var(--orange); }

/* ---------- приём пациента (FSP) ---------- */
.tile-wide { grid-column: 1 / -1; }
.fsp-case { cursor: pointer; }
.fsp-case.locked { opacity: .75; }
.fsp-case .ico { font-size: 24px; }
.fsp-urgent { color: var(--red); font-weight: 700; }
.fsp-top { display: flex; align-items: center; justify-content: space-between; }
.fsp-clock { padding: 6px 12px; font-size: 14px; font-weight: 800; background: var(--card); border-radius: 999px; box-shadow: var(--shadow); }
.fsp-clock.late { color: #fff; background: var(--red); }
.fsp-patient { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.fsp-avatar { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; font-size: 30px; background: var(--card); border-radius: 50%; box-shadow: var(--shadow); }
.fsp-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 14px 0 6px; }
.fsp-step { padding-top: 7px; font-size: 10.5px; font-weight: 700; color: var(--label); text-align: center; border-top: 4px solid var(--line); }
.fsp-step.done { color: var(--green); border-color: var(--green); }
.fsp-step.now { color: var(--blue-text); border-color: var(--blue); }
.fsp-chat { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 14px; }
.msg { max-width: 86%; padding: 10px 12px; font-size: 15px; line-height: 1.45; border-radius: 18px; box-shadow: var(--shadow); }
.msg-patient { align-self: flex-start; background: var(--card); border-bottom-left-radius: 6px; }
.msg-doctor { align-self: flex-end; color: #fff; background: var(--grad-primary); border-bottom-right-radius: 6px; }
.msg-result { align-self: stretch; max-width: none; background: var(--goal-bg); border-radius: 14px; box-shadow: none; }
.msg-info { align-self: center; max-width: 92%; padding: 6px 12px; font-size: 13px; color: var(--muted); text-align: center; background: var(--soft); box-shadow: none; }
.msg-good { color: var(--green); background: var(--ok-bg); font-weight: 700; }
.msg-bad { color: var(--red); background: var(--bad-bg); font-weight: 700; }
.msg-who { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.msg-tools { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.msg-tools .speak-btn { width: 30px; height: 30px; font-size: 14px; }
.msg-doctor .speak-btn { background: rgba(255, 255, 255, .2); }
.msg-tr { padding: 0; font-size: 12.5px; font-weight: 600; color: inherit; text-decoration: underline; opacity: .75; background: none; border: 0; cursor: pointer; }
.msg-ru { margin-top: 4px; font-size: 13.5px; opacity: .8; }
.fsp-panel { position: sticky; bottom: 0; z-index: 5; max-height: 52vh; overflow-y: auto; margin: 0 -16px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -8px 20px rgba(0, 0, 0, .06); }
.fsp-panel .label { margin-top: 0; }
.fsp-opts { display: grid; gap: 8px; }
.fsp-opts.two { grid-template-columns: 1fr 1fr; }
.fsp-opt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font-size: 14.5px; font-weight: 700; color: var(--text); text-align: left; background: var(--card); border: 2px solid var(--line); border-radius: 14px; cursor: pointer; }
.fsp-opt small { font-size: 12px; font-weight: 500; color: var(--muted); }
.fsp-opt.done { opacity: .5; cursor: default; }
.fsp-opt.on { border-color: var(--blue); background: var(--chip-blue-bg); }
.fsp-panel .btn { margin-top: 12px; }
.fsp-stars { font-size: 26px; letter-spacing: 4px; color: var(--yellow); }
.fsp-handover { font-size: 15px; line-height: 1.6; }
.link-btn.fsp-tr, .link-btn.sp-hint-btn { margin: 8px 0 0; padding: 4px 0; font-size: 14px; }
.fr-missed-row { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; }
.fr-missed-row:last-child { border-bottom: 0; }
.fr-missed-row small { display: block; color: var(--muted); }

/* ---------- говорение ---------- */
.sp-group { margin-top: 18px; }
.sp-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sp-check { padding: 5px 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--soft); border-radius: 999px; }
.sp-check.ok { color: var(--green); background: var(--ok-bg); }
.sp-check.miss { color: var(--red); background: var(--bad-bg); }
.sp-input { position: relative; margin-top: 12px; }
.sp-textarea { min-height: 150px; margin-top: 0; padding-right: 64px; }
.sp-mic { position: absolute; right: 10px; bottom: 12px; width: 48px; height: 48px; font-size: 22px; color: #fff; background: var(--green); border: 0; border-radius: 50%; box-shadow: 0 4px 0 var(--green-dark); cursor: pointer; }
.sp-mic.on { background: var(--red); box-shadow: 0 4px 0 #a52a2e; animation: pulse 1.2s ease infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.sp-score-head { margin-top: 18px; }
.sp-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sp-item:last-child { border-bottom: 0; }
.sp-item .row-text b { font-size: 15px; }
.sp-model { border-bottom: 0; padding-bottom: 0; }

/* ---------- вход по почте (только на сайте) ---------- */
.auth-back { position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: var(--bg); animation: fade .2s ease; }
.auth { max-width: 420px; margin: 0 auto; padding: 36px 16px calc(28px + env(safe-area-inset-bottom)); }
.auth-logo { font-size: 34px; text-align: center; }
.auth-tagline { margin: 6px 0 4px; }
.auth-card { padding: 20px 16px; }
.auth-card .title { margin-top: 0; }
.auth-card .pw-reason { margin: 8px 0 12px; text-align: center; }
.auth-card .seg-wide { margin-top: 12px; }
.pass-row { position: relative; }
.pass-row .input { padding-right: 54px; }
.pass-eye { position: absolute; top: 50%; right: 6px; width: 44px; height: 44px; font-size: 18px; background: none; border: 0; transform: translateY(-50%); cursor: pointer; opacity: .65; }
.link-btn { display: block; margin: 18px auto 0; padding: 8px; font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: underline; background: none; border: 0; cursor: pointer; }
.auth-note { margin-top: 14px; line-height: 1.6; }
.auth-note a { font-weight: 700; color: var(--blue-text); text-decoration: none; }
.auth-sent { margin: 4px 0 6px; line-height: 1.5; }
.auth-sent b { word-break: break-all; }
.auth-code { font-family: var(--display); font-size: 28px; font-weight: 900; letter-spacing: 10px; text-align: center; }
.auth-code::placeholder { letter-spacing: 10px; opacity: .35; }
.link-btn[disabled] { text-decoration: none; opacity: .7; cursor: default; }
.auth-back-link { margin-top: 2px; }
.acc-card { padding-top: 4px; padding-bottom: 4px; }
.acc-card .row-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- окно Kumpel Pro ---------- */
.pro-buy { margin-top: 14px; }
.pro-card.on .pro-buy { display: none; }
.btn-navy { background: linear-gradient(135deg, #3a3393, #1c1852); box-shadow: 0 12px 26px -12px rgba(28, 24, 82, .7); }
.sheet-back {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 14, 30, .55);
  animation: fade .2s ease;
}
.sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-radius: 24px 24px 0 0;
}
.sheet-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; font-size: 16px; color: var(--muted); background: var(--soft); border: 0; border-radius: 50%; cursor: pointer; }
.pw-title { margin: 0 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 700; }
.pw-reason { margin-top: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; background: var(--goal-bg); border-radius: 14px; }
.pw-tariff {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
  padding: 14px;
  text-align: left;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
}
.pw-tariff.on { border-color: var(--text); }
.pw-radio { width: 22px; height: 22px; flex: 0 0 22px; border: 2px solid var(--locked); border-radius: 50%; }
.pw-radio.on { border: 7px solid var(--text); }
.pw-tariff .row-text b { font-size: 16px; }
.pw-price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.pw-price b { font-family: var(--display); font-size: 17px; font-weight: 900; white-space: nowrap; }
.pw-price small { font-size: 12px; color: var(--muted); }
.pw-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: var(--muted); vertical-align: 2px; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; }
.pw-pay { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--card); border: 2px solid var(--text); border-radius: 18px; }
.pw-promo-link { margin: 12px 0 0; padding: 0; font-size: 14px; color: var(--muted); text-decoration: underline; background: none; border: 0; cursor: pointer; }
#pw-promo-row { margin-top: 10px; }
.pw-perks { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.pw-perks li::before { content: "✓"; margin-right: 10px; font-weight: 800; color: var(--green); }
#pw-note { margin-top: 10px; }

/* ---------- комплекс пробных экзаменов ---------- */
#mock-levels .pill.active { color: #fff; background: var(--grad-primary); border-color: transparent; }
.mock-set { margin-top: 18px; }
.mock-set .label { margin: 0 4px 10px; }
.mock-hero {
  position: relative;
  overflow: hidden;
  padding: 18px;
  color: #fff;
  background:
    radial-gradient(220px 160px at 100% 0%, rgba(255, 255, 255, .2), transparent 70%),
    linear-gradient(135deg, #6d4dff 0%, #4f6bff 100%);
  border-radius: 22px;
  box-shadow: var(--glow-primary);
}
.mock-hero::after { content: "🎓"; position: absolute; right: 12px; bottom: -8px; font-size: 64px; opacity: .12; }
.mock-hero small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mock-hero b { display: block; margin: 4px 0; font-family: var(--display); font-size: 21px; font-weight: 900; }
.mock-hero span { font-size: 13.5px; color: rgba(255, 255, 255, .85); }
.mock-hero .pro-chip { position: absolute; top: 16px; right: 16px; }
.mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.mock-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  text-align: left;
  background: var(--card);
  border: 0;
  border-radius: 18px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.mock-tile .mt-head { display: flex; align-items: center; gap: 8px; }
.mock-tile .mt-ico { font-size: 20px; }
.mock-tile b { font-size: 15px; }
.mock-tile small { font-size: 12.5px; color: var(--muted); }
.mock-tile .mt-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.mock-tile .mt-bar .step-progress { display: block; flex: 1; margin: 0; }
.mock-tile .step-progress > span { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.mock-tile .mt-bar span { font-size: 12.5px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.mock-set.locked .mock-tile { opacity: .6; }
.mock-set .btn { margin-top: 12px; }
.btn-blue { background: var(--grad-primary); box-shadow: var(--glow-primary), inset 0 1px 0 rgba(255, 255, 255, .25); }

/* модуль идёт */
.mr-part { margin-top: 14px; }
.mr-text { margin: 10px 0 4px; white-space: pre-wrap; line-height: 1.5; font-size: 15px; }
.mr-q { padding: 12px 0; border-top: 1px solid var(--line); }
.mr-q > b { display: block; margin-bottom: 8px; font-size: 15px; }
.mr-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.mr-opt { padding: 9px 13px; font-size: 14px; font-weight: 600; text-align: left; background: var(--soft); border: 2px solid transparent; border-radius: 12px; cursor: pointer; }
.mr-opt.on { color: var(--blue-text); background: var(--chip-blue-bg); border-color: var(--blue); }
.mr-audio { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.mr-audio .btn { width: auto; margin: 0; padding: 12px 18px; font-size: 15px; white-space: nowrap; }
.mr-task { white-space: pre-wrap; line-height: 1.5; }
.mr-textarea { min-height: 220px; margin-top: 12px; font-size: 16px; line-height: 1.5; resize: vertical; }
.mr-count { margin-top: 6px; font-size: 13px; color: var(--muted); text-align: right; }
.mr-count.ok { color: var(--green); }
.mr-check { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 15px; cursor: pointer; }
.mr-check input { width: 20px; height: 20px; accent-color: var(--green); }
#mr-time.low { color: var(--red); }
.promo-uses { flex: 0 0 96px; text-align: center; }
.ms-sample { white-space: pre-wrap; line-height: 1.5; font-size: 14.5px; }
.ms-crit { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ms-crit:last-child { border-bottom: 0; }
.ms-crit b { white-space: nowrap; }

/* ---------- пробный экзамен ---------- */
.exam-part { margin: 0 0 10px; }
.option.picked { border-color: var(--blue); background: var(--chip-blue-bg); }
.option.picked .num { color: #fff; background: var(--blue); }
#exq-time.low { color: var(--red); }
.exam-verdict { display: inline-block; margin: 6px 0 8px; padding: 6px 14px; font-weight: 800; border-radius: 999px; }
.exam-verdict.ok { color: var(--green); background: var(--ok-bg); }
.exam-verdict.bad { color: var(--red); background: var(--bad-bg); }
.part-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.part-row:last-child { border-bottom: 0; }
.part-head { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; }
.part-head small { font-weight: 600; color: var(--muted); }
.part-row .step-progress { margin: 8px 0 0; }
.part-row .step-progress.bad > div { background: var(--orange); }
.ex-try { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ex-try:last-child { border-bottom: 0; }
.ex-try b { font-family: var(--display); font-weight: 900; font-size: 18px; min-width: 52px; }
.ex-try span { flex: 1; color: var(--muted); font-size: 13.5px; }

/* ---------- нижнее меню ---------- */
.tabbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  justify-content: space-around;
  max-width: 456px;
  margin: 0 auto;
  padding: 6px;
  background: var(--tabbar-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  box-shadow: var(--tabbar-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
.tabbar button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tab-ico { font-size: 22px; filter: grayscale(1); opacity: .55; transition: .15s; }
.tabbar button.active { color: var(--blue-text); background: var(--chip-blue-bg); }
.tabbar button.active .tab-ico { filter: none; opacity: 1; transform: translateY(-1px); }
body.playing .tabbar { display: none; }

/* ---------- словарь и грамматика ---------- */
.dict-search { margin: 0 0 12px; padding: 12px 14px; font-size: 16px; -webkit-appearance: none; appearance: none; }
.step-progress.mini { display: block; height: 4px; margin: 6px 0 0; }
.step-progress.mini > span { display: block; height: 100%; width: 0; background: var(--green); border-radius: 999px; }
.dict-word .speak-btn { width: 34px; height: 34px; flex-basis: 34px; font-size: 16px; }
.dict-word.found { cursor: pointer; }
.rv-text small.dict-place { display: block; margin-top: 2px; font-size: 12px; color: var(--label); }
.rv-mark:not(.ok):not(.bad) { color: var(--muted); }
.sizes.four { grid-template-columns: repeat(4, 1fr); }
.ico.gram-n { font-size: 17px; font-weight: 800; color: var(--text); filter: none; }
#gram-final { margin-top: 12px; }

/* ---------- цель в профиле ---------- */
.prof-text { flex: 1; min-width: 0; }
.prof-goal {
  display: block;
  max-width: 100%;
  margin: 3px 0 4px;
  padding: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.prof-goal.empty { color: var(--blue-text); }
.prof-goal::after { content: " ✏️"; font-size: 12px; }
.goal-form .input { margin-bottom: 10px; }
.goal-form .chips-row { margin-bottom: 12px; }
.goal-actions { display: grid; gap: 8px; }
.goal-row { align-items: flex-start; }
.goal-text { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }

/* ---------- гонка слов ---------- */
.race-levels { grid-template-columns: repeat(5, 1fr); }
.race-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 10px; }
.rung { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; background: var(--soft); border-radius: 14px; }
.rung-emoji { font-size: 24px; line-height: 1.1; }
.rung small { font-size: 12px; font-weight: 700; color: var(--muted); }
#race-go { margin-top: 14px; }

.road {
  --road-speed: 2.4s;
  position: relative;
  height: 64px;
  margin: 12px 0 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #34306a, #26224f);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
/* разметка бежит вправо — транспорт (он смотрит влево) едет вперёд */
.road::before {
  content: "";
  position: absolute;
  left: -60px;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 30px, transparent 30px 60px);
  animation: road-run var(--road-speed) linear infinite;
}
@keyframes road-run { to { transform: translateX(60px); } }
.road-vehicle {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 40px;
  line-height: 1;
  --dir: 1;
  transform: translate(-50%, -50%) scaleX(var(--dir));
}
.road-vehicle.flip { --dir: -1; }
.road-vehicle.up { animation: vehicle-up .45s ease-out; }
.road-vehicle.down { animation: vehicle-down .4s ease-in-out; }
@keyframes vehicle-up { 40% { transform: translate(-50%, -50%) scaleX(var(--dir)) scale(1.35); } }
@keyframes vehicle-down {
  25% { transform: translate(-58%, -50%) scaleX(var(--dir)); }
  75% { transform: translate(-42%, -50%) scaleX(var(--dir)); }
}
@media (prefers-reduced-motion: reduce) { .road::before, .road-vehicle.up, .road-vehicle.down { animation: none; } }

.race-gear { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; font-size: 14px; }
.race-dots { display: flex; gap: 5px; font-size: 12px; font-weight: 700; color: var(--orange); }
.race-dot { width: 10px; height: 10px; background: var(--line); border-radius: 50%; }
.race-dot.on { background: var(--orange); }
.race-word { padding: 26px 18px 20px; }
.race-last { min-height: 1.4em; font-weight: 700; }
.race-last.ok { color: var(--green); }
.race-last.bad { color: var(--red); }
#rr-time.low { color: var(--red); }
.race-record {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  font-weight: 800;
  color: var(--orange);
  background: var(--goal-bg);
  border-radius: 999px;
}