:root {
  --bg: #FFF7EC;
  --card: #FFFFFF;
  --ink: #2B2620;
  --muted: #7A6F63;
  --line: #EADFCF;
  --accent: #F2994A;
  --accent-ink: #FFFFFF;
  --good: #3FA36B;
  --good-bg: #E6F5EC;
  --bad: #D9774A;
  --bad-bg: #FBEBE2;
  --chip: #F6EBDC;
  --face: #FFC94D;
  --face-ink: #4A3B1F;
  --shadow: 0 2px 10px rgba(80, 55, 20, .08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1C1A17;
    --card: #2A2621;
    --ink: #F3ECE2;
    --muted: #A99D8F;
    --line: #3D372F;
    --accent: #F2A25E;
    --accent-ink: #1C1A17;
    --good: #6CCB93;
    --good-bg: #213A2B;
    --bad: #F0A07A;
    --bad-bg: #42291E;
    --chip: #363029;
    --face: #F6C04A;
    --face-ink: #3A2E17;
    --shadow: none;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
}
#app {
  max-width: 520px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 24px);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea { font: inherit; color: var(--ink); }

/* Шапка */
.top { display: flex; align-items: center; gap: 12px; }
.top h1 { font-size: 26px; margin: 0; flex: 1; letter-spacing: -.3px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--chip); display: grid; place-items: center; font-size: 20px;
}

/* Талисман */
.hero { display: flex; align-items: center; gap: 14px; margin: 18px 0 8px; }
.mascot { width: 84px; height: 84px; flex: none; }
.mascot.small { width: 56px; height: 56px; }
.bubble {
  background: var(--card); border-radius: 18px; padding: 12px 14px;
  box-shadow: var(--shadow); position: relative; font-size: 16px;
}
.mascot.bounce { animation: bounce .5s ease; }
@keyframes bounce { 0%,100% { transform: translateY(0) } 40% { transform: translateY(-10px) } }
.mascot.wobble { animation: wobble .5s ease; }
@keyframes wobble { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-8deg) } 75% { transform: rotate(8deg) } }

/* Главная кнопка */
.big {
  width: 100%; padding: 18px; border-radius: 18px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 20px; font-weight: 700; margin: 14px 0 6px;
  box-shadow: var(--shadow);
}
.big:active { transform: scale(.98); }
.ghost {
  width: 100%; padding: 14px; border-radius: 16px;
  background: var(--chip); font-weight: 600; margin-top: 8px;
}
.hint { color: var(--muted); font-size: 14px; text-align: center; margin: 4px 0 0; }

/* Темы */
.section-title { font-size: 15px; color: var(--muted); margin: 22px 0 10px; font-weight: 600; }
.topics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.topic {
  background: var(--card); border-radius: 16px; padding: 12px; text-align: left;
  box-shadow: var(--shadow); border: 2px solid transparent;
}
.topic.on { border-color: var(--accent); }
.topic .t-icon { font-size: 22px; }
.topic .t-name { font-weight: 600; font-size: 15px; margin-top: 4px; line-height: 1.2; }
.bar { height: 6px; background: var(--chip); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--good); border-radius: 3px; }
.topic .t-count { font-size: 12px; color: var(--muted); margin-top: 4px; }

.stats { display: flex; gap: 10px; margin-top: 18px; }
.stat { flex: 1; background: var(--card); border-radius: 16px; padding: 12px; text-align: center; box-shadow: var(--shadow); }
.stat b { display: block; font-size: 24px; }
.stat span { font-size: 13px; color: var(--muted); }

/* Сессия */
.progress { display: flex; align-items: center; gap: 12px; }
.progress .bar { flex: 1; margin: 0; height: 10px; border-radius: 5px; }
.progress .bar i { background: var(--accent); border-radius: 5px; transition: width .3s; }
.card {
  background: var(--card); border-radius: 22px; padding: 22px 20px;
  box-shadow: var(--shadow); margin-top: 18px;
}
.kind { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.phrase { font-size: 28px; font-weight: 700; margin: 8px 0 6px; line-height: 1.2; display: flex; gap: 10px; align-items: flex-start; }
.phrase span { flex: 1; }
.say { font-size: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--chip); flex: none; }
.example { font-size: 19px; margin: 10px 0 4px; }
.example b { color: var(--accent); }
.gap {
  display: inline-block; min-width: 56px; border-bottom: 3px solid var(--accent);
  text-align: center; font-weight: 700; color: var(--accent);
}
.ru { color: var(--muted); font-size: 16px; }
.reveal { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.meaning { font-size: 20px; font-weight: 600; }

.options { display: grid; gap: 10px; margin-top: 18px; }
.opt {
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
  padding: 15px; font-size: 19px; font-weight: 600; box-shadow: var(--shadow);
}
.opt.right { border-color: var(--good); background: var(--good-bg); }
.opt.wrong { border-color: var(--bad); background: var(--bad-bg); }
.opt[disabled] { cursor: default; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.duo button { padding: 16px; border-radius: 16px; font-weight: 700; font-size: 17px; }
.duo .no { background: var(--chip); }
.duo .yes { background: var(--good); color: #fff; }

.feedback {
  display: flex; gap: 12px; align-items: center; margin-top: 16px;
  background: var(--card); border-radius: 18px; padding: 12px; box-shadow: var(--shadow);
}
.feedback .fb-text { flex: 1; font-size: 15px; }
.feedback .fb-title { font-weight: 700; font-size: 17px; }
.feedback .particle { color: var(--muted); margin-top: 4px; }
.next { margin-top: 12px; }

.spacer { flex: 1; }

/* Итог */
.done { text-align: center; margin-top: 30px; }
.done .mascot { width: 130px; height: 130px; }
.done h2 { font-size: 26px; margin: 12px 0 4px; }
.done p { color: var(--muted); margin: 0; }

/* Формы и списки */
.field { display: block; margin-top: 14px; }
.field span { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.field input, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: 14px; border: 2px solid var(--line);
  background: var(--card); outline: none;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.list { margin-top: 16px; display: grid; gap: 8px; }
.row {
  background: var(--card); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow);
  display: flex; gap: 10px; align-items: center;
}
.row .r-main { flex: 1; min-width: 0; }
.row .r-en { font-weight: 600; }
.row .r-ru { color: var(--muted); font-size: 14px; }
.row .del { color: var(--muted); font-size: 18px; padding: 4px 8px; }
.dots { display: flex; gap: 3px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--chip); }
.dots i.on { background: var(--good); }
.note { color: var(--muted); font-size: 14px; margin-top: 10px; }
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 14px; font-size: 15px;
  max-width: calc(100% - 32px);
}

/* Направление перевода */
.seg { display: flex; background: var(--chip); border-radius: 14px; padding: 4px; gap: 4px; margin-top: 14px; }
.seg button { flex: 1; padding: 9px 4px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
button.stat:active { transform: scale(.97); }
.opt.ru-opt { font-size: 17px; font-weight: 500; }