/* Оформление «Аврора»: тёмное, с цветными размытыми пятнами на фоне, полупрозрачные «стеклянные» карточки,
   «СТОП» — светящийся шар внизу, по бокам от него — «повторить» и «дальше»; панель вкладок плавает над экраном.
   <html data-theme="aurora">; по умолчанию — когда на телефоне тёмная тема (светлая — «Чернила», css/ink.css).
   Текст — Nunito (скруглённые концы букв), заголовки — Unbounded (описан в neon.css); fonts/, SIL OFL 1.1.
   Nunito нужен и «Чернилам» (css/ink.css) — он описан здесь. */

@font-face { font-family: 'Nunito'; font-weight: 200 1000; font-display: swap; src: url(../fonts/nunito-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito'; font-weight: 200 1000; font-display: swap; src: url(../fonts/nunito-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root[data-theme="aurora"] {
  color-scheme: dark;
  --bg: #070818; --surface: rgba(255, 255, 255, .06); --surface2: #141533; --surface3: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .12); --glass-line: rgba(255, 255, 255, .14);
  --text: #eef0ff; --muted: #a2a7cc;
  --accent: #9d8cff; --on-accent: #0b0b22; --accent-soft: rgba(139, 123, 255, .2);
  --grad: linear-gradient(135deg, #7b6bff, #3fd3db);
  --ok: #4fe0b0; --on-ok: #04211a; --warn: #ffc56b; --danger: #ff7a90; --stop: #ff4fa3; --listen: #3fd3db;
  --ripple-ring: #b7abff; --ripple-ring2: #7ef0ee;
  --nav-h: 84px; --stop-h: 124px;
  --aurora:
    radial-gradient(60vmax 50vmax at -10% -5%, rgba(91, 61, 245, .42), transparent 60%),
    radial-gradient(50vmax 45vmax at 115% 45%, rgba(0, 194, 199, .2), transparent 60%),
    radial-gradient(55vmax 45vmax at 20% 115%, rgba(255, 79, 163, .2), transparent 60%),
    #070818;
}

[data-theme="aurora"] body { font-family: 'Nunito', Roboto, system-ui, sans-serif; background: transparent; }
/* фон: цветные пятна, как северное сияние; неподвижны при прокрутке */
[data-theme="aurora"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--aurora);
}

/* ---------- заголовки ---------- */
[data-theme="aurora"] .appbar { background: transparent; transition: background .25s; }
[data-theme="aurora"] body.scrolled .appbar { background: rgba(10, 11, 32, .9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
[data-theme="aurora"] :is(.appbar h1, .topic h2, .plan-sum .big, .ob-step h2, .fx-title b, .stats-row b) {
  font-family: 'Unbounded', 'Nunito', sans-serif; font-weight: 600; letter-spacing: -.01em;
}
[data-theme="aurora"] .appbar h1 { font-size: 22px; }
[data-theme="aurora"] .topic h2 { font-size: 21px; line-height: 1.25; margin: 6px 0 10px; }
[data-theme="aurora"] .plan-sum .big { font-size: 18px; line-height: 1.3; }
[data-theme="aurora"] .ob-step h2 { font-size: 24px; line-height: 1.25; }
[data-theme="aurora"] .stats-row b { font-size: 18px; }
[data-theme="aurora"] .subject-btn { color: var(--muted); }
[data-theme="aurora"] .mic.on { background: rgba(79, 224, 176, .16); }
[data-theme="aurora"] .card-title, [data-theme="aurora"] .sheet-title { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 600; color: var(--muted); }

/* ---------- стекло: карточки, панели, список плана ---------- */
[data-theme="aurora"] :is(.card, .qa, .banner, .install, .plan li, .fx-item, .tickets li) {
  background: var(--surface); border: 1px solid var(--glass-line); box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
}
[data-theme="aurora"] .card { border-radius: 26px; padding: 18px; }
[data-theme="aurora"] .plan li { border-radius: 20px; box-shadow: none; }
[data-theme="aurora"] .answer { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
[data-theme="aurora"] .resume { background: linear-gradient(135deg, rgba(123, 107, 255, .3), rgba(63, 211, 219, .18)); border: 1px solid var(--glass-line); border-radius: 24px; }
[data-theme="aurora"] .resume .ic { color: #b7abff; }

/* ---------- кнопки ---------- */
[data-theme="aurora"] .btn { border-radius: 100px; background: rgba(255, 255, 255, .08); border: 1px solid var(--glass-line); color: var(--text); }
[data-theme="aurora"] .btn.filled { background: var(--grad); color: var(--on-accent); border: 0; box-shadow: 0 6px 16px rgba(123, 107, 255, .18); }
[data-theme="aurora"] .btn.tonal { background: var(--accent-soft); color: #d2caff; border-color: rgba(139, 123, 255, .35); }
[data-theme="aurora"] .btn.ok { background: linear-gradient(135deg, #4fe0b0, #3fd3db); color: var(--on-ok); border: 0; }
[data-theme="aurora"] .btn.text { background: none; border: 0; color: #b7abff; }
[data-theme="aurora"] .btn.outline { background: none; }
[data-theme="aurora"] .btn.danger { color: var(--danger); }
[data-theme="aurora"] .icon-btn { background: rgba(255, 255, 255, .08); border: 1px solid var(--glass-line); color: #dfe3ff; }
[data-theme="aurora"] .icon-btn.small, [data-theme="aurora"] .icon-btn.more { background: none; border: 0; }
[data-theme="aurora"] .icon-btn.filled { background: var(--grad); color: var(--on-accent); border: 0; }
[data-theme="aurora"] .icon-btn.play { border-radius: 50%; width: 68px; height: 68px; background: var(--grad); color: var(--on-accent); border: 0; box-shadow: 0 6px 18px rgba(63, 211, 219, .15); }
[data-theme="aurora"] .icon-btn.play svg { width: 32px; height: 32px; }
[data-theme="aurora"] .chip-btn { border: 1px solid var(--glass-line); border-radius: 18px; background: rgba(255, 255, 255, .05); }
[data-theme="aurora"] .chip-btn svg { color: #7ef0ee; }
[data-theme="aurora"] .fx-btn { border-radius: 100px; background: rgba(255, 255, 255, .08); border: 1px solid var(--glass-line); color: var(--text); }
[data-theme="aurora"] .fx-btn.here { background: var(--grad); color: var(--on-accent); border-color: transparent; }
[data-theme="aurora"] details.mini summary, [data-theme="aurora"] .hint a { color: #b7abff; }

/* ---------- поля, сегменты, переключатели ---------- */
[data-theme="aurora"] :is(input[type=text], input[type=password], input[type=date], textarea, select) {
  background: rgba(255, 255, 255, .06); border: 1px solid var(--glass-line); border-radius: 16px; color: var(--text);
}
[data-theme="aurora"] :is(input, textarea, select):focus { border-color: #9d8cff; box-shadow: 0 0 0 3px rgba(157, 140, 255, .2); }
[data-theme="aurora"] select option { background: #141533; }
[data-theme="aurora"] .ask-row textarea { border-radius: 26px; }
[data-theme="aurora"] .seg { background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-line); border-radius: 18px; padding: 4px; gap: 4px; }
[data-theme="aurora"] .seg span { border-radius: 14px; min-height: 42px; }
[data-theme="aurora"] .seg input:checked + span { background: var(--grad); color: var(--on-accent); }
[data-theme="aurora"] .switch { border-top-color: var(--line); }
[data-theme="aurora"] .switch i { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); }
[data-theme="aurora"] .switch i::after { background: #a2a7cc; }
[data-theme="aurora"] .switch input:checked + i { background: var(--grad); border-color: transparent; }
[data-theme="aurora"] .switch input:checked + i::after { background: #fff; }
[data-theme="aurora"] .progress, [data-theme="aurora"] .bars .bar i.none { background: rgba(255, 255, 255, .1); }
[data-theme="aurora"] .progress > div, [data-theme="aurora"] .bars .bar i { background: var(--grad); }
[data-theme="aurora"] .seek::-webkit-slider-runnable-track { background: linear-gradient(to right, #9d8cff, #3fd3db var(--fill, 0%), rgba(255, 255, 255, .12) var(--fill, 0%)); }
[data-theme="aurora"] .seek::-webkit-slider-thumb { background: #fff; box-shadow: 0 0 0 4px rgba(157, 140, 255, .35); }

/* ---------- план, значки ---------- */
[data-theme="aurora"] .plan .pnum { background: rgba(255, 255, 255, .08); }
[data-theme="aurora"] .plan li.current .pnum { background: var(--grad); color: var(--on-accent); }
[data-theme="aurora"] .plan li.done .pnum, [data-theme="aurora"] .badge.good { background: rgba(79, 224, 176, .16); color: var(--ok); }
[data-theme="aurora"] .badge.weak { background: rgba(255, 197, 107, .16); }
[data-theme="aurora"] .badge.due, [data-theme="aurora"] .badge.fx { background: var(--accent-soft); color: #d2caff; }
[data-theme="aurora"] .dots { color: #ffc56b; }

/* ---------- диктовка ---------- */
[data-theme="aurora"] .chunk {
  background: rgba(255, 255, 255, .07); border: 1px solid var(--glass-line); border-radius: 30px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
[data-theme="aurora"] .chunk p { font-weight: 500; font-size: 23px; }
[data-theme="aurora"] .chunk .kind { color: var(--muted); letter-spacing: .16em; }
[data-theme="aurora"] .chunk .gap div { background: var(--grad); }
[data-theme="aurora"] .chunk p .w.hl { background: rgba(126, 240, 238, .2); color: #fff; box-shadow: 0 0 0 2px rgba(126, 240, 238, .2); }
[data-theme="aurora"] .dot.s-speaking { background: #7ef0ee; box-shadow: 0 0 0 5px rgba(126, 240, 238, .2); }
[data-theme="aurora"] .dot.s-gap { background: var(--ok); }

/* «СТОП» — светящийся шар; пока голос говорит — дышит; слушает вопрос — бирюзовый */
[data-theme="aurora"] .stopbar { background: linear-gradient(to top, rgba(7, 8, 24, .95) 62%, rgba(7, 8, 24, 0)); padding-top: 8px; }
[data-theme="aurora"] .stop {
  width: 104px; height: 104px; border-radius: 50%; padding: 12px;
  font: 600 12px/1.25 'Unbounded', 'Nunito', sans-serif; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
  background: radial-gradient(circle at 35% 30%, #ffd1f0 0, #ff5fae 24%, #7b4dff 60%, #2b1a8a 100%);
  box-shadow: 0 0 0 6px rgba(139, 123, 255, .1), 0 10px 26px rgba(255, 79, 163, .22);
  --ripple-ring: #ff9ad0; --ripple-ring2: #c9bdff;
}
[data-theme="aurora"] .stop:active { transform: scale(.95); filter: brightness(1.1); }
[data-theme="aurora"] .stop.listening {
  background: radial-gradient(circle at 35% 30%, #e0fffd 0, #5ff2ea 24%, #2f9be0 60%, #163a8a 100%);
  box-shadow: 0 0 0 6px rgba(63, 211, 219, .12), 0 10px 26px rgba(63, 211, 219, .22);
  --ripple-ring: #7ef0ee; --ripple-ring2: #c9fffb;
}
[data-theme="aurora"] body[data-dict="speaking"] .stop { animation: orb 2.4s ease-in-out infinite; }
@keyframes orb {
  50% { box-shadow: 0 0 0 9px rgba(139, 123, 255, .14), 0 10px 32px rgba(255, 79, 163, .3); }
}
@media (prefers-reduced-motion: reduce) { [data-theme="aurora"] body[data-dict] .stop { animation: none; } }

/* ---------- плавающая панель вкладок: иконки, у выбранной — подпись ---------- */
@media (max-width: 899px) {
  [data-theme="aurora"] .navbar {
    left: 50%; right: auto; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%);
    display: flex; gap: 4px; height: 60px; padding: 6px; border-radius: 100px;
    background: rgba(20, 20, 48, .7); border: 1px solid var(--glass-line);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
  }
  [data-theme="aurora"] .navbar button {
    flex-direction: row; gap: 6px; padding: 0 14px; min-width: 52px; border-radius: 100px;
    font-size: 0; color: #aab0d8; transition: background .25s, color .25s;
  }
  [data-theme="aurora"] .navbar .pill { width: auto; height: auto; background: none !important; color: inherit !important; }
  [data-theme="aurora"] .navbar button.active { background: var(--grad); color: var(--on-accent); font-size: 13px; font-weight: 600; padding: 0 16px 0 12px; }
}
@media (min-width: 900px) {
  [data-theme="aurora"] .navbar { background: rgba(10, 11, 32, .6); border-right-color: var(--line); }
  [data-theme="aurora"] .navbar button.active .pill { background: var(--grad); color: var(--on-accent); }
}

/* ---------- окна снизу, подсказки, мастер ---------- */
[data-theme="aurora"] .sheet-scrim { background: rgba(3, 3, 12, .6); }
[data-theme="aurora"] .sheet-body { background: rgba(20, 21, 51, .94); border: 1px solid var(--glass-line); border-bottom: 0; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
[data-theme="aurora"] .sheet-handle { background: rgba(255, 255, 255, .25); }
[data-theme="aurora"] .sheet-item:active, [data-theme="aurora"] .sheet-item.active { background: rgba(255, 255, 255, .08); }
[data-theme="aurora"] .toast { background: rgba(238, 240, 255, .95); color: #0b0b22; border-radius: 16px; }
[data-theme="aurora"] .onboard { background: var(--aurora); background-attachment: fixed; }
[data-theme="aurora"] .ob-sub, [data-theme="aurora"] .lecture-text { background: rgba(255, 255, 255, .06); }
[data-theme="aurora"] .keys kbd { background: rgba(255, 255, 255, .1); }