/* ---------- палитра ----------
   Перенесена из «Подходов» (podhody.ru), чтобы приложения выглядели одной семьёй.

   Акцентом только заливают: кнопки, отметки, полоски нот. Писать им нельзя —
   жёлтый на белом не читается. Поэтому:
     --c-accent      заливает;
     --c-accent-ink  пишет по заливке;
     --c-link        текстовые ссылки.
   Сам акцент подставляет js/accent.js под выбранный цвет и тему.

   Тем три: светлая, тёмная и «ночь» — чистый чёрный, на котором пиксели OLED
   просто гаснут. Пока тему не выбрали, идём за настройкой телефона. */
:root {
  --c-bg: #101319;
  --c-surface: #1f242e;
  --c-surface2: #2a303c;
  --c-surface3: #353c4a;
  --c-line: #333a47;
  --c-ink: #eceef3;
  --c-muted: #98a1b2;
  --c-faint: #6d7688;

  --c-accent: #ffcc00;
  --c-accent-ink: #16181d;
  --c-accent-soft: rgba(255, 204, 0, 0.16);
  --c-link: #7fb0ff;

  --c-danger: #ff6b6b;
  --c-ok: #3ddc97;
  --c-warn: #ffb020;

  --radius-card: 20px;
  --radius-tile: 16px;
  color-scheme: dark;
}

:root[data-theme='black'] {
  --c-bg: #000000;
  --c-surface: #101216;
  --c-surface2: #1a1d24;
  --c-surface3: #252932;
  --c-line: #23272f;
  --c-ink: #e9ebf0;
  --c-muted: #8b93a4;
  --c-faint: #646c7d;
  color-scheme: dark;
}

/* Светлая палитра записана дважды намеренно: для телефона на светлой теме и для
   того, кто выбрал её вопреки телефону — медиазапрос и атрибут не складываются. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']):not([data-theme='black']) {
    --c-bg: #e8ecf2;
    --c-surface: #ffffff;
    --c-surface2: #f2f4f8;
    --c-surface3: #e7ebf1;
    --c-line: #e3e7ee;
    --c-ink: #16181d;
    --c-muted: #5f6676;
    --c-faint: #8b92a1;
    --c-link: #0b63ce;
    --c-accent-soft: rgba(255, 204, 0, 0.22);
    --c-ok: #0f7a4a;
    --c-danger: #c0392b;
    --c-warn: #a76a00;
    color-scheme: light;
  }
}

:root[data-theme='light'] {
  --c-bg: #e8ecf2;
  --c-surface: #ffffff;
  --c-surface2: #f2f4f8;
  --c-surface3: #e7ebf1;
  --c-line: #e3e7ee;
  --c-ink: #16181d;
  --c-muted: #5f6676;
  --c-faint: #8b92a1;
  --c-link: #0b63ce;
  --c-accent-soft: rgba(255, 204, 0, 0.22);
  --c-ok: #0f7a4a;
  --c-danger: #c0392b;
  --c-warn: #a76a00;
  color-scheme: light;
}

/* ---------- основа ---------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font: 15px/1.45 ui-sans-serif, -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  /* Перекраска при смене темы не должна быть рывком. */
  transition: background-color 0.18s ease, color 0.18s ease;
}
/* 16px — чтобы iOS не зумил страницу при фокусе на поле. */
button, input, select { font-family: inherit; font-size: 16px; color: inherit; }
button { cursor: pointer; }
h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }
.muted { color: var(--c-muted); }
.ink { color: var(--c-ink); font-weight: 500; }
.small { font-size: 14px; line-height: 1.5; }
.tnum { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.good { color: var(--c-ok); }
.bad { color: var(--c-danger); }
svg.i { width: 22px; height: 22px; flex: none; }

#app { max-width: 42rem; margin: 0 auto; min-height: 100%; }
.screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
}
.stack { display: flex; flex-direction: column; gap: 10px; }
.push-down { margin-top: auto; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px 6px; }
.page-head.with-back { justify-content: flex-start; }
.page-head p { margin-top: 2px; }
.top { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.section-title { font-size: 15px; font-weight: 500; margin: 8px 4px 0; }

/* ---------- элементы ---------- */

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  padding: 14px;
}
.card-title { font-size: 16px; font-weight: 500; }
.card-title.sub { font-size: 14px; margin-top: 6px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  font-size: 15px; text-decoration: none; user-select: none;
  /* Только filter: плавная смена фона застревала на старом акценте, когда
     его меняли в настройках, — кнопка оставалась прежнего цвета. */
  transition: filter 0.15s;
}
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-block { width: 100%; }
.btn-lg { height: 56px; font-size: 16px; }
.btn-primary { background: var(--c-accent); color: var(--c-accent-ink); font-weight: 600; }
.btn-primary:active { filter: brightness(0.95); }
.btn-secondary { background: var(--c-surface2); color: var(--c-ink); }
.btn-secondary:active { background: var(--c-surface3); }
.btn-ghost { background: transparent; color: var(--c-muted); }
.btn-danger { background: color-mix(in srgb, var(--c-danger) 12%, transparent); color: var(--c-danger); }
.btn-row { display: flex; gap: 8px; }

.icon-btn {
  width: 44px; height: 44px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink);
}
.icon-btn:active { background: var(--c-surface2); }

.input {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--c-surface2); border: 1px solid var(--c-line); border-radius: var(--radius-tile);
  color: var(--c-ink); outline: none; transition: border-color 0.15s;
}
.input:focus { border-color: color-mix(in srgb, var(--c-accent) 60%, transparent); }
.input::placeholder { color: var(--c-faint); }
.code-input { text-align: center; font-size: 22px; font-weight: 600; letter-spacing: 6px; font-variant-numeric: tabular-nums; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 40px; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ''; position: absolute; right: 17px; top: 50%; width: 8px; height: 8px; pointer-events: none;
  border-right: 1.75px solid var(--c-muted); border-bottom: 1.75px solid var(--c-muted);
  transform: translateY(-70%) rotate(45deg);
}
input[type=range] { accent-color: var(--c-accent); width: 100%; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--c-muted); }
.check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--c-accent); flex: none; }
.row { display: flex; align-items: center; gap: 12px; }
.row b { min-width: 64px; text-align: right; font-weight: 600; }

.bar { height: 8px; border-radius: 999px; background: var(--c-surface2); overflow: hidden; }
.bar > div { height: 100%; width: 0; border-radius: 999px; background: var(--c-accent); transition: width 0.3s; }

.note-danger { color: var(--c-danger); font-size: 14px; line-height: 1.5; }

/* ---------- вход ---------- */

.login { justify-content: center; max-width: 24rem; margin: 0 auto; }
.login-head { text-align: center; margin-bottom: 20px; }
.login-title { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }

/* ---------- песни ---------- */

.nudge {
  border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
  background: var(--c-accent-soft); color: var(--c-ink);
  border-radius: var(--radius-tile); padding: 12px 14px; text-align: left; font-size: 14px;
}
.install { position: relative; padding-right: 44px; }
.install-close {
  position: absolute; top: 6px; right: 6px; background: none; border: 0; color: var(--c-muted);
  padding: 8px; display: inline-flex;
}
.install-close svg.i { width: 18px; height: 18px; }
.empty { text-align: center; padding: 48px 20px; }
.empty-title { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.songs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.song {
  display: flex; align-items: center;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); overflow: hidden;
}
.song-open {
  flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.song-title { font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-sub { color: var(--c-muted); font-size: 13px; }
.song-del { background: none; border: 0; color: var(--c-faint); padding: 14px 16px; display: inline-flex; }
.song-del svg.i { width: 18px; height: 18px; }
.add-btn { margin-top: auto; cursor: pointer; }

.proc-title { margin-top: 32px; overflow-wrap: anywhere; }
.proc-stage { font-size: 16px; }

/* ---------- пение ---------- */

.sing { gap: 8px; }
.sing-head { flex: 1; min-width: 0; text-align: center; }
.sing-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-chip {
  min-width: 56px; height: 32px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-accent-soft); font-weight: 600; font-size: 15px;
}
.score-chip:empty { background: none; }
.readout { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 0 4px; }
.target { display: flex; flex-direction: column; line-height: 1.1; }
#target-note { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
#pitch-hint { font-size: 22px; font-weight: 600; text-align: right; }
#pitch-hint.hint-idle { color: var(--c-muted); font-size: 16px; font-weight: 400; }
#pitch-hint.hint-good { color: var(--c-ok); }
#pitch-hint.hint-bad { color: var(--c-danger); }
.timing { min-height: 22px; text-align: center; font-weight: 500; font-size: 15px; }
.timing.good { color: var(--c-ok); }
.timing.warn { color: var(--c-warn); }

.stage-wrap {
  position: relative; flex: 1; min-height: 280px; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card);
}
#stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; background: color-mix(in srgb, var(--c-surface) 88%, transparent);
}
.warn-overlay { color: var(--c-warn); }

.progress { position: relative; height: 20px; cursor: pointer; }
.progress::before {
  content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 999px; background: var(--c-surface2);
}
#progress-fill { position: absolute; left: 0; top: 8px; height: 4px; width: 0; border-radius: 999px; background: var(--c-accent); }

.controls { display: flex; justify-content: center; align-items: center; gap: 14px; }
.round-btn {
  width: 56px; height: 56px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink);
  font-size: 14px; font-weight: 600;
}
.round-btn:active { background: var(--c-surface2); }
.round-btn.play { width: 72px; height: 72px; border: 0; background: var(--c-accent); color: var(--c-accent-ink); }
.round-btn.play svg.i { width: 28px; height: 28px; }
.slider-row { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--c-muted); padding: 0 4px; }
.slider-row input { flex: 1; }
.legend { text-align: center; }
.lg { display: inline-block; vertical-align: middle; margin: 0 3px 0 8px; }
.lg-bar { width: 16px; height: 8px; border-radius: 3px; background: var(--c-accent); opacity: 0.6; }
.lg-line { width: 16px; height: 2px; background: var(--c-muted); }
.lg-you { width: 16px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--c-ok) 50%, var(--c-danger) 50%); }

/* ---------- итоги ---------- */

.res-total { font-size: 60px; font-weight: 700; text-align: center; letter-spacing: -0.02em; line-height: 1.1; padding: 6px 0; }
.res-row { display: flex; justify-content: space-between; font-size: 15px; }
.problems { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.problems button {
  width: 100%; text-align: left; font-size: 15px; padding: 13px 16px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-tile);
}

/* ---------- оформление ---------- */

.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.theme-tile { background: none; border: 2px solid transparent; border-radius: var(--radius-tile); padding: 4px; }
.theme-tile.active { border-color: var(--c-accent); }
.theme-preview { border-radius: 12px; padding: 10px 10px 12px; }
.theme-card { border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.theme-card i { display: block; height: 6px; border-radius: 999px; }
.theme-card b { display: block; width: 14px; height: 14px; border-radius: 999px; align-self: flex-end; margin-top: 2px; }
.theme-tile span { display: block; font-size: 13px; margin-top: 6px; color: var(--c-muted); }
.theme-tile.active span { color: var(--c-ink); font-weight: 500; }
.accent-row { display: flex; gap: 10px; }
.accent-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0;
  border-radius: var(--radius-tile); border: 1px solid var(--c-line); background: var(--c-surface2);
  font-size: 13px; color: var(--c-muted);
}
.accent-btn.active { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-ink); font-weight: 500; }
.accent-dot { width: 28px; height: 28px; border-radius: 999px; }

/* ---------- калибровка ---------- */

.steps { padding-left: 20px; margin: 0; color: var(--c-muted); font-size: 15px; }
.steps li + li { margin-top: 6px; }
.calib-dot {
  width: 140px; height: 140px; border-radius: 999px; margin: 20px auto;
  background: var(--c-surface); border: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 600; transition: background-color 0.1s, transform 0.1s;
}
.calib-dot.count { background: var(--c-accent-soft); transform: scale(1.06); }
.calib-dot.beat { background: var(--c-accent); color: var(--c-accent-ink); transform: scale(1.1); }
.calib-result { text-align: center; min-height: 48px; }