/* Оформление «Android» в духе Material You: мягкие тоновые цвета, крупные скруглённые карточки и кнопки,
   панель вкладок с «таблеткой» под выбранной иконкой, переключатели и снекбар Material 3.
   Светлое или тёмное — как в системе. На Android включается само.
   <html data-theme="android">; на компьютере вкладки остаются в колонке слева. */

:root[data-theme="android"] {
  color-scheme: light dark;
  --bg: #f9f9ff; --surface: #ffffff; --surface2: #ededf4; --surface3: #e2e2e9;
  --container: #f0f0f7; --outline: #74777f; --line: #c4c6d0;
  --text: #191c20; --muted: #44474f;
  --accent: #415f91; --on-accent: #ffffff; --accent-soft: #d6e3ff; --on-accent-soft: #284777;
  --tonal: #dae2f9; --on-tonal: #3e4759;
  --ok: #2e6a44; --on-ok: #ffffff; --ok-soft: #b2f1c0;
  --warn: #8a5100; --warn-soft: #ffdcbd; --danger: #ba1a1a; --stop: #ba1a1a; --listen: #7d4e7d;
  --inverse: #2e3036; --on-inverse: #eff0f7;
  --ripple-ring: #415f91; --ripple-ring2: #aac7ff;
  --nav-h: 80px; --stop-h: 84px;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="android"] {
    --bg: #111318; --surface: #1d2024; --surface2: #282a2f; --surface3: #33353a;
    --container: #191c20; --outline: #8e9099; --line: #44474e;
    --text: #e2e2e9; --muted: #c4c6d0;
    --accent: #aac7ff; --on-accent: #0a305f; --accent-soft: #284777; --on-accent-soft: #d6e3ff;
    --tonal: #3e4759; --on-tonal: #dae2f9;
    --ok: #96d5a6; --on-ok: #00391c; --ok-soft: #12512e;
    --warn: #ffb870; --warn-soft: #693c00; --danger: #ffb4ab; --stop: #e5383b; --listen: #a8649f;
    --inverse: #e2e2e9; --on-inverse: #2e3036;
    --ripple-ring: #aac7ff; --ripple-ring2: #d6e3ff;
  }
}

[data-theme="android"] body { font: 16px/1.5 'Google Sans', 'Google Sans Text', Roboto, system-ui, sans-serif; letter-spacing: .005em; }
[data-theme="android"] .hint { line-height: 1.45; }

/* ---------- верхняя панель: крупный заголовок, при прокрутке — цвет контейнера ---------- */
[data-theme="android"] .appbar {
  height: calc(72px + env(safe-area-inset-top)); padding-left: 20px; padding-right: 16px;
  transition: background .25s;
}
[data-theme="android"] body.scrolled .appbar { background: var(--surface2); }
[data-theme="android"] .appbar h1 { font-size: 28px; font-weight: 400; line-height: 1.2; }
[data-theme="android"] .subject-btn { font-size: 14px; font-weight: 500; margin-top: 2px; }
[data-theme="android"] .mic { width: 40px; height: 40px; }
[data-theme="android"] .mic.on { background: var(--ok-soft); color: var(--ok); }

/* ---------- карточки ---------- */
[data-theme="android"] .card { background: var(--container); border-radius: 28px; padding: 18px 18px 16px; margin-bottom: 14px; }
@media (prefers-color-scheme: dark) { [data-theme="android"] .card { background: var(--surface); } }
[data-theme="android"] .card-title { font-size: 14px; font-weight: 500; color: var(--accent); letter-spacing: .01em; }
[data-theme="android"] :is(.seg, .switch) + .card-title { margin-top: 20px; }
[data-theme="android"] .install, [data-theme="android"] .banner, [data-theme="android"] .qa, [data-theme="android"] .plan li { background: var(--container); }
@media (prefers-color-scheme: dark) {
  [data-theme="android"] :is(.install, .banner, .qa, .plan li) { background: var(--surface); }
}
[data-theme="android"] .install { border-radius: 28px; }
[data-theme="android"] .install img { border-radius: 50%; }
[data-theme="android"] .banner { border-radius: 20px; }
[data-theme="android"] .banner.warn { color: var(--warn); }

/* ---------- кнопки ---------- */
[data-theme="android"] .btn { min-height: 48px; border-radius: 100px; background: var(--tonal); color: var(--on-tonal); font-size: 15px; letter-spacing: .01em; }
[data-theme="android"] .btn.filled { background: var(--accent); color: var(--on-accent); }
[data-theme="android"] .btn.tonal { background: var(--tonal); color: var(--on-tonal); }
[data-theme="android"] .btn.ok { background: var(--ok); color: var(--on-ok); }
[data-theme="android"] .btn.text { background: none; color: var(--accent); }
[data-theme="android"] .btn.outline { background: none; border: 1px solid var(--outline); color: var(--accent); }
[data-theme="android"] .btn.danger { color: var(--danger); }
[data-theme="android"] .btn.wide { min-height: 56px; }
[data-theme="android"] .btn:active, [data-theme="android"] .icon-btn:active { filter: none; }
[data-theme="android"] .icon-btn { background: var(--tonal); color: var(--on-tonal); }
[data-theme="android"] .icon-btn.small, [data-theme="android"] .icon-btn.more { background: none; color: var(--muted); }
[data-theme="android"] .icon-btn.filled { background: var(--accent); color: var(--on-accent); }
/* главная кнопка — большая «плавающая» кнопка Material: скруглённый квадрат */
[data-theme="android"] .icon-btn.play {
  width: 88px; height: 88px; border-radius: 28px; background: var(--accent-soft); color: var(--on-accent-soft);
  box-shadow: 0 4px 8px 3px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .16); transition: border-radius .25s;
}
[data-theme="android"] .icon-btn.play:active { border-radius: 44px; }
[data-theme="android"] .icon-btn.big { width: 64px; height: 64px; border-radius: 22px; }
[data-theme="android"] .chip-btn {
  flex-direction: column; gap: 4px; min-height: 72px; border: 0; border-radius: 20px;
  background: var(--surface); color: var(--text); font-size: 14px;
}
@media (prefers-color-scheme: dark) { [data-theme="android"] .chip-btn { background: var(--surface2); } }
[data-theme="android"] .chip-btn svg { width: 24px; height: 24px; }
[data-theme="android"] .chip-btn:active { background: var(--surface3); }
[data-theme="android"] .resume { background: var(--accent-soft); color: var(--on-accent-soft); border-radius: 28px; padding: 18px; }
[data-theme="android"] .resume-text span { color: inherit; opacity: .8; }
[data-theme="android"] .resume .ic { color: inherit; }
[data-theme="android"] .fx-btn { border-radius: 100px; background: var(--tonal); color: var(--on-tonal); }
[data-theme="android"] .fx-btn.here { background: var(--accent); color: var(--on-accent); }
[data-theme="android"] details.mini summary { color: var(--accent); }

/* ---------- поля ввода ---------- */
[data-theme="android"] :is(input[type=text], input[type=password], textarea, select) {
  background: transparent; border: 1px solid var(--outline); border-radius: 16px; min-height: 56px; padding: 14px 16px;
}
[data-theme="android"] :is(input, textarea, select):focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
[data-theme="android"] select option { background: var(--surface); color: var(--text); }
[data-theme="android"] .ask-row textarea { border-radius: 28px; min-height: 52px; padding: 14px 20px; background: var(--surface2); border-color: transparent; }
[data-theme="android"] .ask-row .icon-btn { width: 52px; height: 52px; background: var(--accent); color: var(--on-accent); }

/* ---------- сегменты: кнопки-таблетки с выделением тоновым цветом ---------- */
[data-theme="android"] .seg { gap: 6px; background: none; border-radius: 0; overflow: visible; }
[data-theme="android"] .seg span {
  min-height: 44px; border: 1px solid var(--outline); border-radius: 100px; color: var(--text);
  transition: background .2s, border-color .2s, border-radius .2s;
}
[data-theme="android"] .seg input:checked + span { background: var(--tonal); border-color: var(--tonal); color: var(--on-tonal); border-radius: 14px; }
[data-theme="android"] .seg input:checked + span::before { content: "✓"; margin-right: 4px; font-weight: 700; }
[data-theme="android"] .seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- переключатели Material 3 ---------- */
[data-theme="android"] .switch { border-top: 0; min-height: 60px; }
[data-theme="android"] .switch small { color: var(--muted); }
[data-theme="android"] .switch i { background: var(--surface3); border-color: var(--outline); }
[data-theme="android"] .switch i::after { background: var(--outline); transition: .2s cubic-bezier(.2, 0, 0, 1); }
[data-theme="android"] .switch input:checked + i { background: var(--accent); border-color: var(--accent); }
[data-theme="android"] .switch input:checked + i::after { background: var(--on-accent); }
[data-theme="android"] .switch:active i::after { transform: scale(1.15); }

/* ---------- план ---------- */
[data-theme="android"] .plan li { border-radius: 24px; margin-bottom: 10px; }
[data-theme="android"] .plan .pnum { background: var(--surface3); }
@media (prefers-color-scheme: dark) { [data-theme="android"] .plan .pnum { background: var(--surface3); } }
[data-theme="android"] .plan li.current .pnum { background: var(--accent); color: var(--on-accent); }
[data-theme="android"] .plan li.done .pnum { background: var(--ok-soft); color: var(--ok); }
[data-theme="android"] .plan-sum .big { font-size: 26px; font-weight: 400; }
[data-theme="android"] .badge { border-radius: 8px; padding: 2px 8px; font-weight: 500; }
[data-theme="android"] .badge.weak { background: var(--warn-soft); color: var(--warn); }
[data-theme="android"] .badge.good { background: var(--ok-soft); color: var(--ok); }
[data-theme="android"] .badge.due, [data-theme="android"] .badge.fx { background: var(--accent-soft); color: var(--on-accent-soft); }
[data-theme="android"] .progress, [data-theme="android"] .progress.thin { height: 8px; border-radius: 4px; background: var(--accent-soft); }
[data-theme="android"] .progress > div { border-radius: 4px; }
[data-theme="android"] .sources li { border-bottom-color: var(--line); }

/* ---------- диктовка ---------- */
[data-theme="android"] .topic h2 { font-size: 22px; font-weight: 400; }
[data-theme="android"] .chunk { background: var(--container); border-radius: 32px; }
@media (prefers-color-scheme: dark) { [data-theme="android"] .chunk { background: var(--surface); } }
[data-theme="android"] .chunk .kind { color: var(--accent); font-weight: 500; }
[data-theme="android"] .chunk .gap div { background: var(--accent); }
[data-theme="android"] .dot.s-speaking { box-shadow: 0 0 0 4px var(--accent-soft); }
[data-theme="android"] .answer { background: var(--accent-soft); color: var(--on-accent-soft); border-radius: 24px 24px 24px 8px; }
[data-theme="android"] .answer .q { color: inherit; opacity: .75; }
[data-theme="android"] .seek::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--fill, 0%), var(--accent-soft) var(--fill, 0%)); }
[data-theme="android"] .seek::-webkit-slider-thumb { width: 6px; height: 28px; margin-top: -11px; border-radius: 3px; }
[data-theme="android"] .lecture-text, [data-theme="android"] .ob-sub { background: var(--surface2); }
[data-theme="android"] .keys kbd { background: var(--surface3); }

/* ---------- СТОП ---------- */
[data-theme="android"] .stopbar { background: linear-gradient(to top, var(--bg) 70%, transparent); }
[data-theme="android"] .stop {
  border-radius: 28px; font-size: 22px; font-weight: 500; letter-spacing: .06em; color: #fff;
  box-shadow: 0 6px 16px rgba(186, 26, 26, .3); transition: border-radius .2s, transform .2s;
}
[data-theme="android"] .stop:active { filter: none; border-radius: 40px; transform: scale(.985); }
[data-theme="android"] .stop.listening { box-shadow: 0 6px 16px rgba(125, 78, 125, .3); }
[data-theme="android"] .stop { --ripple-ring: #ffb4ab; --ripple-ring2: #ffdad6; }

/* ---------- панель вкладок Material 3 ---------- */
[data-theme="android"] .navbar { background: var(--surface2); }
[data-theme="android"] .navbar button { gap: 4px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .03em; }
[data-theme="android"] .navbar .pill { width: 64px; height: 32px; border-radius: 16px; transition: background .25s, width .25s; }
[data-theme="android"] .navbar button.active { color: var(--text); font-weight: 700; }
[data-theme="android"] .navbar button.active .pill { background: var(--tonal); color: var(--on-tonal); }
@media (max-width: 899px) {
  [data-theme="android"] .navbar { border-radius: 24px 24px 0 0; box-shadow: 0 -1px 3px rgba(0, 0, 0, .06); }
}
@media (min-width: 900px) {
  [data-theme="android"] .navbar { background: var(--bg); border-right: 0; }
}

/* ---------- нижние меню ---------- */
[data-theme="android"] .sheet-scrim { background: rgba(0, 0, 0, .32); }
[data-theme="android"] .sheet-body { background: var(--container); border-radius: 28px 28px 0 0; animation: md-up .3s cubic-bezier(.05, .7, .1, 1); }
@media (prefers-color-scheme: dark) { [data-theme="android"] .sheet-body { background: var(--surface); } }
@media (min-width: 900px) { [data-theme="android"] .sheet-body { border-radius: 28px; } }
@keyframes md-up { from { transform: translateY(100%); } }
[data-theme="android"] .sheet-handle { width: 32px; height: 4px; background: var(--outline); opacity: .5; margin: 10px auto 14px; }
[data-theme="android"] .sheet-title { color: var(--muted); font-weight: 500; }
[data-theme="android"] .sheet-item { border-radius: 100px; }
[data-theme="android"] .sheet-item:active { background: var(--surface3); }
[data-theme="android"] .sheet-item.active { background: var(--tonal); color: var(--on-tonal); font-weight: 500; }
[data-theme="android"] .sheet-sep { background: var(--line); }
[data-theme="android"] .fx-item { background: var(--surface2); border-radius: 20px; }
[data-theme="android"] .fx-head .icon-btn { background: var(--tonal); }

/* ---------- снекбар ---------- */
[data-theme="android"] .toast {
  background: var(--inverse); color: var(--on-inverse); border-radius: 12px; padding: 14px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2); transform: translate(-50%, 8px); transition: opacity .2s, transform .25s cubic-bezier(.05, .7, .1, 1);
}
[data-theme="android"] .toast.show { transform: translate(-50%, 0); }

/* ---------- мастер первого запуска ---------- */
[data-theme="android"] .ob-step h2 { font-size: 32px; font-weight: 400; line-height: 1.2; }
[data-theme="android"] .ob-logo { border-radius: 50%; }
[data-theme="android"] .ob-num { font-weight: 500; }
[data-theme="android"] .boot-fail { border-radius: 28px; }
[data-theme="android"] .ripple-dot { background: var(--accent); }