/* Английский по сериалам. Палитра и шрифты — из прототипа «Английский по сериалам». */
:root {
  --bg: #EEF1F6; --surface: #FFFFFF; --ink: #16213A; --muted: #5B6782; --line: #D8DEEA;
  --accent: #2F5BEA; --accent-ink: #FFFFFF; --chip: #E3E9F8;
  --sub: #FFD23F; --sub-ink: #2A2200;
  --good: #1E8E5A; --bad: #C2413B;
  --f-display: 'Unbounded', 'Onest', system-ui, sans-serif;
  --f-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --tabs-h: 58px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1524; --surface: #171F33; --ink: #E8ECF6; --muted: #9AA6C2; --line: #27314B;
    --accent: #7C9CFF; --accent-ink: #0F1524; --chip: #222C48;
    --good: #4CC38A; --bad: #F0827B; color-scheme: dark;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 16px/1.5 var(--f-body); -webkit-text-size-adjust: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
[hidden] { display: none !important; }

.app {
  min-height: 100dvh;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           calc(var(--tabs-h) + env(safe-area-inset-bottom) + 16px) max(16px, env(safe-area-inset-left));
  max-width: 640px; margin: 0 auto;
}
.app.no-tabs { padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--f-mono); }
.h1 { font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; line-height: 1.25; }
.h2 { font-family: var(--f-display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }

.back { border: 0; background: none; color: var(--accent); font-weight: 600; padding: 4px 0; text-align: left; align-self: flex-start; }
.btn { border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 600; padding: 12px 18px; border-radius: 12px; font-size: 15px; }
.btn.ghost { background: var(--chip); color: var(--ink); }
.btn.block { width: 100%; }
.btn.big { padding: 15px 18px; font-size: 16px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--chip); color: var(--ink); font-size: 13px; font-weight: 500;
  padding: 5px 11px; border-radius: 999px; border: 0; }
.chip.on { background: var(--accent); color: var(--accent-ink); }
.chip.tag { font-size: 12px; padding: 2px 9px; }
.icon-btn { border: 0; background: var(--chip); color: var(--ink); width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon-btn.on { color: #E5A100; }
.chip svg, .switch svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn svg, .tabs svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.on svg { fill: currentColor; }

.search { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 11px 14px; font-size: 16px; }
.card { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--surface); }
.item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.item .n { font-family: var(--f-mono); font-size: 12px; color: var(--muted); min-width: 52px; }
.item .chev { color: var(--muted); }
.item.off { opacity: .55; }
.seg { display: flex; background: var(--chip); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { flex: 1; border: 0; background: none; padding: 7px 10px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 30, 60, .15); }
.empty { text-align: center; padding: 40px 12px; color: var(--muted); }
.section-title { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 6px; }

/* Сцена */
.line { border-top: 1px solid var(--line); padding: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.line:first-child { border-top: 0; }
.line .en { font-size: 19px; line-height: 1.5; }
.line.minor .en { font-size: 15px; color: var(--muted); }
.line .ru { color: var(--muted); font-size: 15px; }
.line .note { font-size: 13px; color: var(--muted); border-left: 3px solid var(--chip); padding-left: 10px; }
.line .tm { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
button.w { font: inherit; color: inherit; background: none; border: 0; padding: 0 1px; margin: 0; border-radius: 3px;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--accent) 60%, transparent); line-height: inherit; }
button.w.known { background: var(--sub); color: var(--sub-ink); border-bottom-color: transparent; padding: 0 3px; }
.reveal { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; font-size: 14px; text-align: left; }
.pager { display: flex; gap: 8px; margin-top: 8px; }
.pager .btn { flex: 1; }

/* Нижние вкладки */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); z-index: 3; }
.tabs button { flex: 1; border: 0; background: none; height: var(--tabs-h); font-size: 12px; font-weight: 600; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.tabs button[aria-current="page"] { color: var(--accent); }
.badge { font-family: var(--f-mono); font-size: 10px; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 6px; margin-left: 3px; }

/* Нижняя карточка (слово) */
.scrim { position: fixed; inset: 0; background: rgba(10, 15, 30, .45); z-index: 10; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; background: var(--surface); border-radius: 22px 22px 0 0;
  padding: 18px max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); max-width: 640px; margin: 0 auto; }
.sheet .big { font-family: var(--f-display); font-weight: 600; font-size: 26px; letter-spacing: -.02em; }
.sheet .tr { font-size: 20px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: up .18s ease-out; }
  @keyframes up { from { transform: translateY(24px); opacity: .4; } }
}
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 12px); max-width: 600px; margin: 0 auto;
  background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 12px; font-size: 14px; z-index: 20; text-align: center; }
mark { background: var(--sub); color: var(--sub-ink); border-radius: 3px; padding: 0 3px; }

/* Режим «Смотрю серию»: фразы по центру, внизу панель как у плеера */
.watch { display: flex; flex-direction: column; gap: 12px;
  min-height: calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.watch .stage { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 8px 0; }
.watch .near { color: var(--muted); font-size: 16px; line-height: 1.4; padding: 0 4px; }
.watch .near.prev { opacity: .6; }
.watch .near:empty { display: none; }
.watch .current { border: 1px solid var(--line); background: var(--surface); border-radius: 22px; padding: 22px 18px; text-align: left; width: 100%;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 30px rgba(20, 30, 60, .08); }
.watch .current .en { font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.watch .current.key { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.watch .current .ru { font-size: 18px; color: var(--muted); }
.watch .hint { font-size: 13px; color: var(--accent); font-weight: 600; }

.dock { display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 14px 0 calc(6px + env(safe-area-inset-bottom)); }
.dock .status { font-size: 14px; color: var(--muted); text-align: center; min-height: 1.4em; max-width: 30ch; }
.player { display: flex; align-items: center; justify-content: center; gap: 28px; }
.round { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; }
.round:active { transform: scale(.94); }
.round svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.research { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 14px; padding: 2px 8px; }

/* Большая кнопка микрофона: синяя — выключен, жёлтые волны — ищет место, зелёные — идёт за серией */
.mic { --c: var(--accent); position: relative; width: 88px; height: 88px; border-radius: 50%; border: 0;
  background: var(--c); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--c) 45%, transparent); transition: background .2s, transform .1s; }
.mic:active { transform: scale(.95); }
.mic svg { position: relative; width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mic .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); opacity: 0; pointer-events: none; }
.mic[data-state="search"] { --c: #E9A300; }
.mic[data-state="live"] { --c: var(--good); }
.mic[data-state="denied"] { --c: var(--muted); }
.mic[data-state="pause"] { --c: #7F8BA6; }
@media (prefers-reduced-motion: no-preference) {
  .mic[data-state="search"] .ring, .mic[data-state="live"] .ring { animation: ripple 2s ease-out infinite; }
  .mic .ring.r2 { animation-delay: 1s !important; }
  @keyframes ripple { from { transform: scale(1); opacity: .55; } to { transform: scale(1.75); opacity: 0; } }
}