/* «Спектр» — новый вид Spoy, этап 1 (2026-11-07): цвета, шрифты, знак и меню.
   Правило вида: интерфейс без своего цвета, цвет дают только 12 цветов нот (COLORS в notes.js не меняются).
   Всё действует только под html.spectrum: класс ставит spectrum.js по ?skin=spectrum, остальные видят прежний Spoy.
   Файл подключается последним стилем (.claude/patches/spectrum_patch.py), поэтому перекрывает style.css и logo.css. */

@font-face {
  font-family: "Onest";
  src: url("/static/fonts/Onest-Variable.woff") format("woff");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("/static/fonts/Unbounded-Variable.woff") format("woff");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- цвета: ночная сцена ---------- */
html.spectrum {
  --canvas: #08080B;
  --bg: #0F0F13;
  --dock: #141418;
  --surface: #16161B;
  --surface-2: #1E1E25;
  --surface-3: #2A2A33;
  --glass: rgba(255, 255, 255, .06);
  --glass-2: rgba(255, 255, 255, .11);
  --border: rgba(255, 255, 255, .09);
  --border-2: rgba(255, 255, 255, .15);
  --text: #F3F0EA;
  --muted: #A19FAB;
  --faint: #8C8A95;
  --ink: #0A0A0D;
  /* бывший оранжевый акцент: теперь белый, текст на нём тёмный (--ink), как и было задумано в style.css */
  --accent: #F3F0EA;
  --accent-soft: rgba(243, 240, 234, .10);
  --accent-text: #F3F0EA;
  /* бывшая аура: графит, белый текст и значки на ней читаются; цветные места — только ноты */
  --aura: linear-gradient(135deg, #3A3A46 0%, #26262F 100%);
  --line-active: rgba(255, 255, 255, .06);
  --roll-white-row: #16161B;
  --roll-black-row: #111115;
  /* живой акцент: цвет звучащей ноты пишет spectrum.js, без звука — белый */
  --live: #F3F0EA;
  --live-ink: #0A0A0D;
  /* спектр нот: только для знака Spoy и рамки подписки */
  --spectrum: linear-gradient(90deg, #e5484d, #ec6a3c, #f08c2b, #f2ac1f, #e9c400, #46a758, #2f9e8f, #2f8fd8, #4f6bd8, #7d5bd6, #a855c7, #d6409f);
  --display: "Unbounded", "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html.spectrum body {
  font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "ss01" 0;
}
html.spectrum ::selection { background: rgba(243, 240, 234, .26); }

/* ---------- заголовки: Unbounded, он шире Inter — размеры чуть меньше ---------- */
html.spectrum h1 { font-family: var(--display); font-weight: 500; letter-spacing: -.035em; }
html.spectrum .hero h1 { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -.045em; color: var(--text); text-wrap: balance; }
html.spectrum .song-head h1 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.04em; color: var(--text); }

/* ---------- без цветных пятен: аура главной, карточка оплаты, предложения в меню ---------- */
html.spectrum .hero::before, html.spectrum .hero::after, html.spectrum .hero-aura { display: none; }
html.spectrum .hero .sub { color: var(--muted); }
html.spectrum .btn.aura { background: var(--text); color: var(--ink); }
html.spectrum .btn.aura:hover { background: #ffffff; filter: none; }
html.spectrum .progress > div,
html.spectrum .vr-wait i,
html.spectrum .pend-dot,
html.spectrum .pend-steps li.now i,
html.spectrum .pend-steps li.now i::after,
html.spectrum .cn-note-dot,
html.spectrum .cn-rel.cur .cn-meta::before { background: var(--text); }
/* тёплые отсветы ауры у формы загрузки, теста голоса и плашки подписки (alive.css, range.css) */
html.spectrum .hero .prompt::before,
html.spectrum .pitch-glow,
html.spectrum .vr::before { display: none; }
html.spectrum .prompt:has(.drop.has-file) .prompt-go { animation-name: sp-go-call; }
@keyframes sp-go-call { from { box-shadow: 0 0 0 0 rgba(243, 240, 234, .5); } to { box-shadow: 0 0 0 14px rgba(243, 240, 234, 0); } }
html.spectrum .side-offer { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
html.spectrum .gift-side { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-2); }
html.spectrum .pay-aura { background: var(--surface-2); color: var(--text); }
html.spectrum .pay-aura p { color: var(--muted); }
/* подписка — единственная рамка цветом спектра: это знак Spoy, а не украшение */
html.spectrum .plan-pro { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--spectrum) border-box; }
html.spectrum .tr-opt-full,
html.spectrum .tr-year-offer { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--spectrum) border-box; }

/* ---------- живой акцент ---------- */
html.spectrum .play-main {
  background: var(--live); color: var(--live-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 22%, transparent), 0 8px 24px color-mix(in srgb, var(--live) 38%, transparent);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .1s ease;
}
html.spectrum .play-main:hover { background: var(--live); filter: brightness(1.08); }
html.spectrum .line.active {
  background: color-mix(in srgb, var(--live) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 36%, transparent);
}
/* повтор строки: пунктирная рамка вместо цветной полосы слева */
html.spectrum .line.in-loop { box-shadow: none; outline: 1.5px dashed rgba(243, 240, 234, .38); outline-offset: -1.5px; }
html.spectrum .line.active.in-loop { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 36%, transparent); }

/* ---------- знак Spoy: кольцо из 12 цветов нот с буквой S ---------- */
html.spectrum .sidebar .brand::before,
html.spectrum:not([lang="ru"]) .sidebar .brand::before {
  width: 38px; height: 38px; margin: 0; border-radius: 0;
  background: url("/static/spectrum-mark.svg?v=1") center / contain no-repeat;
}

/* надпись рядом со знаком видна только в строке меню телефона: «spoy» строчными, как на макете */
html.spectrum .sidebar .brand { font-family: var(--display); font-weight: 600; text-transform: lowercase; letter-spacing: -.045em; }
html.spectrum .sidebar .brand .ver { font-family: "Onest", sans-serif; text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ---------- меню: узкая колонка, значок и подпись под ним ---------- */
@media (min-width: 1101px) {
  html.spectrum { --side: 88px; }
  html.spectrum .sidebar { padding: 16px 8px; gap: 10px; align-items: center; }
  html.spectrum .sidebar .brand {
    position: static; flex-direction: column; align-items: center; gap: 6px; padding: 2px 0 6px; font-size: 0;
  }
  html.spectrum .sidebar .brand .ver { position: static; margin: 0; padding: 1px 6px; font-size: 10px; line-height: 14px; }
  html.spectrum .sidebar nav { width: 100%; align-items: center; gap: 2px; }
  html.spectrum .sidebar nav a {
    position: relative; width: 72px; height: auto; min-height: 56px; padding: 9px 2px 7px;
    flex-direction: column; justify-content: center; gap: 5px; border-radius: 16px;
    font-size: 10.5px; font-weight: 500; line-height: 1.15; text-align: center;
  }
  html.spectrum .sidebar nav a svg { width: 22px; height: 22px; }
  html.spectrum .sidebar nav a span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.spectrum .sidebar nav a.active { background: var(--surface-2); font-weight: 600; }
  html.spectrum body:not(.pro) .sidebar nav a.pro-only::after { position: absolute; top: 7px; right: 12px; width: 10px; height: 10px; margin: 0; }
  html.spectrum .sidebar .ad-count,
  html.spectrum .sidebar .fb-count { position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }

  /* аккаунт: предложение подписки прячется, «Войти» и аватар — как пункты меню */
  html.spectrum .side-account { width: 100%; justify-items: center; }
  html.spectrum .side-offer { display: none; }
  html.spectrum .side-login {
    width: 72px; height: auto; min-height: 56px; padding: 8px 2px; flex-direction: column; gap: 4px;
    border-radius: 16px; font-size: 10.5px; line-height: 1.15;
  }
  html.spectrum .side-login svg { width: 20px; height: 20px; }
  html.spectrum .side-user { width: 72px; justify-content: center; padding: 6px 0; }
  html.spectrum .side-user-text { display: none; }

  /* «Написать нам», «Установить», язык: тот же вид, что у пунктов меню */
  html.spectrum .sidebar .fb-btn,
  html.spectrum .sidebar .inst-btn {
    width: 72px; height: auto; min-height: 52px; margin: 0; padding: 7px 2px;
    flex-direction: column; justify-content: center; gap: 4px; border-radius: 16px;
    font-size: 10.5px; line-height: 1.15; text-align: center;
  }
  html.spectrum .sidebar .fb-btn svg,
  html.spectrum .sidebar .inst-btn svg { width: 20px; height: 20px; }
  html.spectrum .sidebar .lang-box { width: 72px; margin: 0; }
  html.spectrum .sidebar .lang-btn {
    width: 72px; height: auto; min-height: 52px; padding: 7px 2px;
    flex-direction: column; justify-content: center; gap: 4px; border-radius: 16px; font-size: 10.5px; line-height: 1.15;
  }
  html.spectrum .sidebar .lang-btn svg { width: 20px; height: 20px; }
  html.spectrum .sidebar .lang-menu { left: calc(100% + 10px); bottom: 0; }

  /* подарок и открытая песня: только значок и обложка */
  html.spectrum .sidebar .gift-side { width: 72px; justify-content: center; padding: 8px 0; margin-bottom: 0; }
  html.spectrum .sidebar .gift-side-text { display: none; }
  html.spectrum .sidebar .side-now { width: 72px; padding: 0; }
  html.spectrum .sidebar .sn-label,
  html.spectrum .sidebar .sn-text,
  html.spectrum .sidebar .sn-close { display: none; }
  html.spectrum .sidebar .sn-song { justify-content: center; padding: 4px; background: transparent; }
  html.spectrum .sidebar .sn-cover { width: 44px; }
}

/* невысокий экран: у владельца в меню до 16 пунктов — сначала плотнее, потом только значки */
@media (min-width: 1101px) and (max-height: 960px) {
  html.spectrum .sidebar { gap: 6px; padding-block: 12px; }
  html.spectrum .sidebar nav a,
  html.spectrum .side-login,
  html.spectrum .sidebar .fb-btn,
  html.spectrum .sidebar .inst-btn,
  html.spectrum .sidebar .lang-btn { min-height: 46px; padding-block: 6px 5px; gap: 3px; }
  html.spectrum .sidebar nav a svg { width: 20px; height: 20px; }
}
@media (min-width: 1101px) and (max-height: 800px) {
  html.spectrum .sidebar .brand .ver { display: none; }
  html.spectrum .sidebar nav a span,
  html.spectrum .side-login span,
  html.spectrum .sidebar .fb-btn span,
  html.spectrum .sidebar .inst-btn span,
  html.spectrum .sidebar .lang-name { display: none; }
  html.spectrum .sidebar nav a,
  html.spectrum .side-login,
  html.spectrum .sidebar .fb-btn,
  html.spectrum .sidebar .inst-btn,
  html.spectrum .sidebar .lang-btn { min-height: 40px; padding-block: 0; }
}

/* свёрнутое меню (значки) и строка меню на телефоне: только кольцо */
@media (max-width: 1100px) {
  html.spectrum .sidebar .brand::before,
  html.spectrum:not([lang="ru"]) .sidebar .brand::before { width: 32px; height: 32px; }
}
@media (max-width: 700px) {
  html.spectrum .sidebar { background: rgba(8, 8, 11, .86); }
  html.spectrum .sidebar .brand::before,
  html.spectrum:not([lang="ru"]) .sidebar .brand::before { width: 26px; height: 26px; }
}

/* ---------- этап 2: обложки из мелодии ----------
   spectrum-covers.js добавляет к стилю обложки --cv-img (нотный стан и ноты песни), --cv-glow и --cv-glow-solid
   (цвет самой частой ноты). У песни без контура и у песенника — стан без нот и свет одного из 12 цветов нот. */
html.spectrum .cover {
  background:
    radial-gradient(70% 60% at 50% 58%, var(--cv-glow, rgba(255, 255, 255, .05)), transparent 75%),
    var(--cv-img, none) center / 100% 100% no-repeat,
    #141419;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
html.spectrum .cover::after { display: none; }
html.spectrum .cover.cover-fade { box-shadow: none; }
html.spectrum .song-glow {
  background: radial-gradient(48% 90% at 26% 0%, color-mix(in srgb, var(--cv-glow-solid, #F3F0EA) 24%, transparent), transparent 76%);
}
html.spectrum .song-glow::after { display: none; }
html.spectrum .pend::before {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cv-glow-solid, #F3F0EA) 40%, transparent), transparent);
}
html.spectrum .pend-fill {
  background: linear-gradient(90deg, transparent, rgba(243, 240, 234, .04) 60%, rgba(243, 240, 234, .08));
  box-shadow: inset -1px 0 0 rgba(243, 240, 234, .22);
}

/* ---------- этап 3: главная (spectrum-home.js) ---------- */
html.spectrum .sp-mark {
  display: inline-block; flex: none; width: 16px; height: 16px;
  background: url("/static/spectrum-mark.svg?v=1") center / contain no-repeat;
}
html.spectrum .sp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; margin-bottom: 18px; padding: 0 12px 0 8px;
  border-radius: 999px; background: var(--surface-2); color: #C9C6BF; font-size: 13px; font-weight: 500;
  justify-self: start;
}
/* поле загрузки: полоски цветов нот у нижнего края справа — подсказка «звук станет нотами»; без движения */
html.spectrum .prompt .drop {
  padding-right: 230px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2048%22%20fill-opacity%3D%22.5%22%3E%3Crect%20x%3D%220%22%20y%3D%2226%22%20width%3D%226%22%20height%3D%2222%22%20rx%3D%223%22%20fill%3D%22%23e5484d%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%228%22%20width%3D%226%22%20height%3D%2240%22%20rx%3D%223%22%20fill%3D%22%23ec6a3c%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2218%22%20width%3D%226%22%20height%3D%2230%22%20rx%3D%223%22%20fill%3D%22%23f08c2b%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%222%22%20width%3D%226%22%20height%3D%2246%22%20rx%3D%223%22%20fill%3D%22%23f2ac1f%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2210%22%20width%3D%226%22%20height%3D%2238%22%20rx%3D%223%22%20fill%3D%22%23e9c400%22%2F%3E%3Crect%20x%3D%2250%22%20y%3D%2222%22%20width%3D%226%22%20height%3D%2226%22%20rx%3D%223%22%20fill%3D%22%2346a758%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%220%22%20width%3D%226%22%20height%3D%2248%22%20rx%3D%223%22%20fill%3D%22%232f9e8f%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%2216%22%20width%3D%226%22%20height%3D%2232%22%20rx%3D%223%22%20fill%3D%22%232f8fd8%22%2F%3E%3Crect%20x%3D%2280%22%20y%3D%226%22%20width%3D%226%22%20height%3D%2242%22%20rx%3D%223%22%20fill%3D%22%234f6bd8%22%2F%3E%3Crect%20x%3D%2290%22%20y%3D%2224%22%20width%3D%226%22%20height%3D%2224%22%20rx%3D%223%22%20fill%3D%22%237d5bd6%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%2212%22%20width%3D%226%22%20height%3D%2236%22%20rx%3D%223%22%20fill%3D%22%23a855c7%22%2F%3E%3Crect%20x%3D%22110%22%20y%3D%2220%22%20width%3D%226%22%20height%3D%2228%22%20rx%3D%223%22%20fill%3D%22%23d6409f%22%2F%3E%3Crect%20x%3D%22120%22%20y%3D%2228%22%20width%3D%226%22%20height%3D%2220%22%20rx%3D%223%22%20fill%3D%22%23e5484d%22%2F%3E%3Crect%20x%3D%22130%22%20y%3D%2214%22%20width%3D%226%22%20height%3D%2234%22%20rx%3D%223%22%20fill%3D%22%23ec6a3c%22%2F%3E%3Crect%20x%3D%22140%22%20y%3D%2218%22%20width%3D%226%22%20height%3D%2230%22%20rx%3D%223%22%20fill%3D%22%23f08c2b%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%224%22%20width%3D%226%22%20height%3D%2244%22%20rx%3D%223%22%20fill%3D%22%23f2ac1f%22%2F%3E%3Crect%20x%3D%22160%22%20y%3D%2222%22%20width%3D%226%22%20height%3D%2226%22%20rx%3D%223%22%20fill%3D%22%23e9c400%22%2F%3E%3Crect%20x%3D%22170%22%20y%3D%228%22%20width%3D%226%22%20height%3D%2240%22%20rx%3D%223%22%20fill%3D%22%2346a758%22%2F%3E%3Crect%20x%3D%22180%22%20y%3D%2214%22%20width%3D%226%22%20height%3D%2234%22%20rx%3D%223%22%20fill%3D%22%232f9e8f%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%2230%22%20width%3D%226%22%20height%3D%2218%22%20rx%3D%223%22%20fill%3D%22%232f8fd8%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%226%22%20width%3D%226%22%20height%3D%2242%22%20rx%3D%223%22%20fill%3D%22%234f6bd8%22%2F%3E%3Crect%20x%3D%22210%22%20y%3D%2220%22%20width%3D%226%22%20height%3D%2228%22%20rx%3D%223%22%20fill%3D%22%237d5bd6%22%2F%3E%3Crect%20x%3D%22220%22%20y%3D%2212%22%20width%3D%226%22%20height%3D%2236%22%20rx%3D%223%22%20fill%3D%22%23a855c7%22%2F%3E%3Crect%20x%3D%22230%22%20y%3D%2224%22%20width%3D%226%22%20height%3D%2224%22%20rx%3D%223%22%20fill%3D%22%23d6409f%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-position: right 18px bottom 0; background-size: 200px 40px;
}
html.spectrum .prompt { background: var(--surface); }
@media (max-width: 700px) {
  html.spectrum .prompt .drop { padding-right: 18px; background-size: 150px 30px; background-position: right 12px bottom 0; padding-bottom: 34px; }
}

/* шапка с колонкой «Продолжить / Занятия»: две колонки, текст слева */
html.spectrum .hero:has(> .sp-aside) { text-align: left; }
html.spectrum .hero:has(> .sp-aside) .sub { margin-left: 0; margin-right: 0; }
html.spectrum .hero:has(> .sp-aside) .prompt { margin-left: 0; margin-right: 0; max-width: none; }
@media (min-width: 1101px) {
  html.spectrum .hero:has(> .sp-aside) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); column-gap: 28px; align-items: start;
  }
  html.spectrum .hero:has(> .sp-aside) > * { grid-column: 1; }
  html.spectrum .hero:has(> .sp-aside) > .sp-aside { grid-column: 2; grid-row: 1 / span 8; margin-top: 0; }
}
html.spectrum .sp-aside { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; text-align: left; }
html.spectrum .sp-aside > .sp-card { flex: 1 1 280px; min-width: 0; }
html.spectrum .sp-card {
  box-sizing: border-box; padding: 18px; border-radius: 22px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text); text-decoration: none;
}
html.spectrum .sp-label { font-size: 13px; font-weight: 600; color: var(--muted); }
html.spectrum .sp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html.spectrum .sp-link { font-size: 13px; color: #C9C6BF; }
html.spectrum .sp-link:hover { color: var(--text); }

html.spectrum .sp-continue {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px 14px; align-items: start;
  transition: border-color .15s ease, background-color .15s ease;
}
html.spectrum .sp-continue:hover { border-color: var(--border-2); background: #18181E; }
html.spectrum .sp-cont-cover { width: 76px; border-radius: 14px; }
html.spectrum .sp-cont-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.spectrum .sp-cont-title { font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.2; letter-spacing: -.03em; overflow-wrap: anywhere; }
html.spectrum .sp-cont-artist { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.spectrum .sp-cont-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--faint); }
html.spectrum .sp-cont-bar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
html.spectrum .sp-cont-bar i { display: block; height: 100%; border-radius: 2px; }
html.spectrum .sp-cont-go {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
  border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: 0 8px 24px var(--sp-glow, transparent);
  transition: filter .15s ease, transform .1s ease;
}
html.spectrum .sp-cont-go svg { width: 14px; height: 14px; }
html.spectrum .sp-continue:hover .sp-cont-go { filter: brightness(1.08); }
html.spectrum .sp-continue:active .sp-cont-go { transform: scale(.98); }

html.spectrum .sp-practice { display: flex; flex-direction: column; gap: 12px; }
html.spectrum .sp-streak { font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -.035em; }
html.spectrum .sp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 64px; }
html.spectrum .sp-day { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
html.spectrum .sp-day i { display: block; width: 100%; max-width: 22px; border-radius: 4px; background: var(--surface-3); }
html.spectrum .sp-day.on i { background: rgba(243, 240, 234, .55); }
html.spectrum .sp-day.today i { background: var(--text); }
html.spectrum .sp-day:not(.on).today i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text); height: 10px !important; }
html.spectrum .sp-day small { font-size: 10px; color: var(--faint); line-height: 1; }
html.spectrum .sp-sums { font-size: 13px; color: #C9C6BF; flex-wrap: wrap; }

/* ---------- этап 4: страница песни (spectrum-song.js) ---------- */
/* фиолетовый --note был фирменным цветом подсказок, выбранных строк и меток — теперь нейтральный */
html.spectrum { --note: #D6D3CC; --note-soft: rgba(243, 240, 234, .08); }
html.spectrum .chip.note { color: var(--text); background: var(--surface-2); }
html.spectrum .line.selected .num { background: var(--text); color: var(--ink); }

/* части песни: цвет у частей был только украшением — теперь куплет темнее, припев светлее, оба серые */
html.spectrum .k-verse, html.spectrum .k-intro, html.spectrum .k-outro, html.spectrum .k-part { --kc: #5B5B68; }
html.spectrum .k-prechorus, html.spectrum .k-postchorus, html.spectrum .k-bridge { --kc: #8C8A95; }
html.spectrum .k-chorus, html.spectrum .k-refrain { --kc: #C9C6BF; }
html.spectrum .part, html.spectrum .part.k-chorus { background: var(--surface); border: 1px solid rgba(255, 255, 255, .05); }
html.spectrum .part.looping { outline: 1.5px dashed rgba(243, 240, 234, .45); outline-offset: 3px; }
html.spectrum .part-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 10px;
  background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border-2);
}
html.spectrum .part-tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--kc); }
html.spectrum .part-count.bump, html.spectrum .line-count.bump { --kc: #F3F0EA; }

/* сколько раз строка прозвучала: серая подпись под номером вместо красного кружка на ▶ */
html.spectrum .line-count {
  position: static; z-index: auto; padding: 0; margin-top: 1px; background: none; box-shadow: none;
  font: 500 10px/1.2 var(--mono); color: var(--faint);
}

/* оценка строки: кольцо, закрашенное на --p процентов, цифра внутри (зелёное — попал, жёлтое — рядом, красное — мимо) */
html.spectrum .line-score {
  top: 50%; right: 12px; width: 40px; height: 40px; padding: 0; transform: translateY(-50%);
  display: grid; place-items: center; border-radius: 50%; background: none;
  font: 600 10.5px/1 var(--mono); color: var(--sc, var(--faint)); letter-spacing: -.02em;
}
html.spectrum .line-score::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--sc, var(--faint)) calc(var(--p, 0) * 1%), rgba(255, 255, 255, .1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 76%, #000 78%); mask: radial-gradient(farthest-side, transparent 76%, #000 78%);
}
html.spectrum .line-score.good { --sc: var(--hit); background: none; }
html.spectrum .line-score.mid { --sc: var(--close); background: none; }
html.spectrum .line-score.bad { --sc: var(--miss); background: none; }
html.spectrum .line-score.bump { animation: none; }

/* тюнер: нота в кольце из 12 цветов нот, долька звучащей ноты светится (угол --sp-a ставит spectrum-song.js) */
html.spectrum .ro-note {
  position: relative; display: grid; place-items: center; width: 74px; height: 74px; min-width: 0; padding: 0;
  border-radius: 50%; background: none; color: var(--text); font: 600 20px/1 var(--display); letter-spacing: -.045em;
}
html.spectrum .ro-note::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from -13deg, #e5484d52 0deg 26deg, transparent 26deg 30deg, #ec6a3c52 30deg 56deg, transparent 56deg 60deg, #f08c2b52 60deg 86deg, transparent 86deg 90deg, #f2ac1f52 90deg 116deg, transparent 116deg 120deg, #e9c40052 120deg 146deg, transparent 146deg 150deg, #46a75852 150deg 176deg, transparent 176deg 180deg, #2f9e8f52 180deg 206deg, transparent 206deg 210deg, #2f8fd852 210deg 236deg, transparent 236deg 240deg, #4f6bd852 240deg 266deg, transparent 266deg 270deg, #7d5bd652 270deg 296deg, transparent 296deg 300deg, #a855c752 300deg 326deg, transparent 326deg 330deg, #d6409f52 330deg 356deg, transparent 356deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 80%, #000 82%); mask: radial-gradient(farthest-side, transparent 80%, #000 82%);
}
html.spectrum .ro-note::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  /* сверху — стрелка пения в микрофон (--sp-c от spectrum-song.js), под ней — светящаяся долька нужной ноты */
  background:
    conic-gradient(from calc(var(--sp-a, 0deg) + var(--sp-c, 0deg) - 2deg), var(--sp-needle, transparent) 0 4deg, transparent 4deg),
    conic-gradient(from calc(var(--sp-a, 0deg) - 15deg), var(--nc, transparent) 0 30deg, transparent 30deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 76%, #000 78%); mask: radial-gradient(farthest-side, transparent 76%, #000 78%);
}
html.spectrum .ro-note.empty { color: var(--faint); }
html.spectrum .ro-note.empty::after { display: none; }
html.spectrum .ro-pill { border-radius: 6px; }
@media (max-width: 700px) {
  html.spectrum .ro-note { width: 54px; height: 54px; font-size: 15px; }
}

/* ---------- этап 5: капсула (spectrum-capsule.js) ---------- */
/* строка плеера — приподнятая капсула; её кнопка ▶ уже красится живым акцентом */
html.spectrum .dock .transport {
  padding: 7px 8px 7px 7px; border-radius: 28px; background: #1C1C22;
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
html.spectrum .map { background: rgba(255, 255, 255, .05); }
html.spectrum .map-part { color: var(--text); border-right-color: #1C1C22; }
html.spectrum .map-part.k-chorus, html.spectrum .map-part.k-refrain { color: var(--ink); }
/* выбранный повтор на полосе песни — светлая рамка без заливки */
html.spectrum .map-loop { border-width: 1.5px; border-color: rgba(243, 240, 234, .85); background: rgba(243, 240, 234, .06); }

/* три окна всегда «на полке»: ряд окон пропадает, их значков на полке нет — их заменяют чипы в капсуле */
html.spectrum .rail-tab[data-p="loop"], html.spectrum .rail-tab[data-p="sound"], html.spectrum .rail-tab[data-p="learn"] { display: none; }
html.spectrum body.rail-on:not(.sp-rail) main { margin-right: 8px; }
html.spectrum body.rail-on:not(.sp-rail) .rail:not(.qa-in-dock) {
  opacity: 0; transform: translateX(calc(100% + 16px)); visibility: hidden; pointer-events: none;
}
html.spectrum body.rail-on:not(.sp-rail) .rail.qa-in-dock { display: none; }

html.spectrum .sp-chips { display: flex; align-items: center; gap: 6px; flex: none; }
html.spectrum .sp-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px 0 11px; border: 0; border-radius: 999px;
  background: #2A2A33; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
html.spectrum .sp-chip:hover { background: #33333D; }
html.spectrum .sp-chip .gi { display: inline-grid; place-items: center; width: 16px; height: 16px; }
html.spectrum .sp-chip .gi svg { width: 16px; height: 16px; }
html.spectrum .sp-chip b { font-weight: 500; }
html.spectrum .sp-chip small { max-width: 120px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
html.spectrum .sp-chip small { display: none; }
/* подпись «что включено» видна только на очень широком экране, иначе — в подсказке: полосе песни нужно место */
@media (min-width: 1600px) { html.spectrum .sp-chip small:not(:empty) { display: inline; } }
html.spectrum .dock .transport .map { min-width: 160px; }
/* что-то включено — чип белый, как выбранная кнопка; открыта шторка — светлое кольцо */
html.spectrum .sp-chip.on { background: var(--text); color: var(--ink); }
html.spectrum .sp-chip.on small { color: rgba(10, 10, 13, .62); }
html.spectrum .sp-chip[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(243, 240, 234, .7); }
html.spectrum .sp-chip:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* шторка: то же окно, но над своим чипом (место считает spectrum-capsule.js) */
html.spectrum .win.min.open .win-body {
  right: auto; left: var(--sp-left, 8px); bottom: var(--sp-bottom, 100%);
  min-width: 300px; max-width: min(420px, calc(100vw - 32px)); padding: 16px;
  background: #1C1C22; border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6); transform-origin: var(--sp-tip, 50%) bottom; animation: sp-shutter .2s cubic-bezier(.2, .8, .2, 1);
}
html.spectrum .win.min.open .win-body::after {
  content: ""; position: absolute; left: var(--sp-tip, 50%); bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
  transform: rotate(45deg); background: #1C1C22;
  border-right: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
html.spectrum .win.min.open .win-body .seg { background: #121217; }
html.spectrum .win.min.open .win-head .stow { display: none; }
@keyframes sp-shutter { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { html.spectrum .win.min.open .win-body { animation: none; } }

/* узкие окна: чипы без подписей, только значки */
@media (max-width: 1100px) {
  html.spectrum .dock .transport { flex-wrap: wrap; }
  html.spectrum .dock .transport .map { flex-basis: 100%; order: 5; }
  html.spectrum .sp-chip { width: 38px; padding: 0; justify-content: center; }
  html.spectrum .sp-chip b, html.spectrum .sp-chip small { display: none; }
  html.spectrum .sp-chip.on .gi { color: var(--ink); }
}
@media (max-width: 700px) {
  html.spectrum .dock .transport { border-radius: 22px; }
  html.spectrum .sp-chip { width: 36px; height: 36px; }
  html.spectrum .win.min.open .win-body { min-width: 0; width: calc(100vw - 32px); }
}

/* ---------- этап 6: «Сцена» (spectrum-stage.js) ---------- */
html.spectrum body.sp-stage { overflow: hidden; }
html.spectrum body.sp-stage .sidebar,
html.spectrum body.sp-stage main,
html.spectrum body.sp-stage .rail,
html.spectrum body.sp-stage .tuner-float,
html.spectrum body.sp-stage .keepbar { display: none !important; }
html.spectrum body.sp-stage::before, html.spectrum body.sp-stage::after { display: none; }

html.spectrum .sp-stagebar {
  position: fixed; z-index: 32; top: 8px; left: 8px; right: 8px; height: 60px; box-sizing: border-box;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 0 10px;
  border-radius: 22px 22px 0 0; background: #0B0B0F; border: 1px solid var(--border); border-bottom: 0;
}
html.spectrum .sp-sb-back, html.spectrum .sp-sb-close {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px 0 12px; border: 0; border-radius: 999px;
  background: #18181E; color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
html.spectrum .sp-sb-close { width: 42px; padding: 0; justify-content: center; }
html.spectrum .sp-sb-back svg, html.spectrum .sp-sb-close svg { width: 16px; height: 16px; }
html.spectrum .sp-sb-back:hover, html.spectrum .sp-sb-close:hover { background: #24242C; }
html.spectrum .sp-sb-title { display: flex; flex-direction: column; min-width: 0; text-align: center; line-height: 1.2; }
html.spectrum .sp-sb-title b { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.spectrum .sp-sb-title span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.spectrum .sp-steps { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
html.spectrum .sp-steps li {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 7px; border-radius: 999px;
  background: #18181E; color: var(--faint);
}
html.spectrum .sp-steps li i {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: #2A2A33; color: var(--muted); font-style: normal; font-size: 10px; font-weight: 700;
}
html.spectrum .sp-steps li.done { color: #C9C6BF; }
html.spectrum .sp-steps li.done i { background: rgba(74, 222, 128, .18); color: #7FE8A6; }
html.spectrum .sp-steps li.cur { background: var(--text); color: var(--ink); font-weight: 600; }
html.spectrum .sp-steps li.cur i { background: var(--ink); color: var(--text); }
html.spectrum .sp-st-note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
html.spectrum .sp-st-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
html.spectrum .sp-st-note i.ok { background: var(--hit); }
html.spectrum .sp-st-note.rec { color: #FF8A80; }
html.spectrum .sp-st-note.rec i { background: #FF5B4F; box-shadow: 0 0 0 3px rgba(255, 91, 79, .3); }

/* пульт — на весь экран под полосой: ноты растягиваются, справа крупный тюнер и счёт */
html.spectrum body.sp-stage .dock {
  top: 68px; left: 8px; right: 8px; bottom: 8px; height: auto !important; display: flex; flex-direction: column;
  border-radius: 0 0 22px 22px; border-top: 0;
  background: radial-gradient(1000px 520px at 40% 30%, color-mix(in srgb, var(--live) 9%, transparent), transparent 70%), #0B0B0F;
}
html.spectrum body.sp-stage .dock-inner { flex: 1; width: 100%; max-width: 1500px; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
html.spectrum body.sp-stage .stage { --tuner-w: 280px; grid-template-columns: minmax(0, 1fr) var(--tuner-w); align-items: start; gap: 14px; }
html.spectrum body.sp-stage #roll { height: max(220px, calc(100vh - 330px)) !important; }
html.spectrum body.sp-stage .roll-grip, html.spectrum body.sp-stage .roll-edge { display: none; }
html.spectrum body.sp-stage .now-wrap { --tuner-h: auto; height: auto; padding-bottom: 6px; border-radius: 22px; background: #131318; border: 1px solid var(--border); }
html.spectrum body.sp-stage .now-wrap .stow { display: none; }
html.spectrum body.sp-stage .now-wrap > .readout { padding: 6px 14px 10px; gap: 8px; }
html.spectrum body.sp-stage .ro-note { width: 168px; height: 168px; font-size: 46px; }
html.spectrum body.sp-stage .now-wrap .ro-sub, html.spectrum body.sp-stage .now-wrap .tn-you { display: block; font-size: 13px; }
html.spectrum body.sp-stage .ll-now { font-size: clamp(28px, 3.2vw, 42px); }
html.spectrum body.sp-stage .ll-next { font-size: 18px; }
html.spectrum body.sp-stage .line-wrap .stow { display: none; }

/* счёт под тюнером */
html.spectrum .sp-stats { margin: 4px 12px 8px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
html.spectrum .sp-stats-row { display: flex; justify-content: space-between; align-items: flex-end; }
html.spectrum .sp-stats-row > div { display: flex; flex-direction: column; gap: 2px; }
html.spectrum .sp-stats-row > div.r { align-items: flex-end; }
html.spectrum .sp-stats-row b { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -.05em; }
html.spectrum .sp-stats-row b small { font-size: 16px; }
html.spectrum .sp-cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; min-height: 18px; }
html.spectrum .sp-cells i { height: 18px; border-radius: 4px; }
html.spectrum .sp-cells i.hit { background: var(--hit); }
html.spectrum .sp-cells i.close { background: var(--close); }
html.spectrum .sp-cells i.miss { background: var(--miss); }
html.spectrum .sp-cells .sp-label { grid-column: 1 / -1; font-weight: 400; font-size: 12px; }
html.spectrum .sp-stats-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-align: left; }
html.spectrum .sp-stage-btn[aria-pressed="true"] { background: var(--text); color: var(--ink); }

@media (max-width: 900px) {
  html.spectrum .sp-stagebar { grid-template-columns: auto minmax(0, 1fr) auto; }
  html.spectrum .sp-sb-steps { display: none; }
  html.spectrum body.sp-stage .stage { --tuner-w: 150px; }
  html.spectrum body.sp-stage .ro-note { width: 110px; height: 110px; font-size: 30px; }
  html.spectrum body.sp-stage #roll { height: max(200px, calc(100vh - 380px)) !important; }
  html.spectrum .sp-stats-row b { font-size: 22px; }
}
@media (max-width: 700px) {
  html.spectrum .sp-sb-back span { display: none; }
  html.spectrum .sp-sb-back { width: 42px; padding: 0; justify-content: center; }
  html.spectrum body.sp-stage .stage { --tuner-w: 96px; gap: 8px; }
  html.spectrum body.sp-stage .ro-note { width: 76px; height: 76px; font-size: 20px; }
  html.spectrum body.sp-stage .sp-stats { display: none; }
  html.spectrum body.sp-stage .now-wrap .ro-sub, html.spectrum body.sp-stage .now-wrap .tn-you { display: none; }
  html.spectrum body.sp-stage #roll { height: max(200px, calc(100vh - 420px)) !important; }
}

/* ---------- этап 7: телефон и «Как вы спели» ---------- */
/* капсула на телефоне — три ряда: время и полоса песни; ⏮ ▶ ⏭ и чипы; «Пой со мной» и «Записать» с подписями */
@media (max-width: 700px) {
  html.spectrum .dock .transport { flex-wrap: wrap; row-gap: 8px; padding: 8px; }
  html.spectrum .dock .transport .time { order: -2; flex: none; min-width: 0; font-size: 11px; }
  html.spectrum .dock .transport .map { order: -1; flex: 1 1 calc(100% - 96px); min-width: 0; height: 28px; }
  html.spectrum .dock .transport .sp-chips { margin-left: auto; gap: 5px; }
  html.spectrum .dock .transport .sing-actions { order: 6; flex: 1 1 100%; margin-left: 0; gap: 6px; }
  html.spectrum .dock .transport .sing-actions .joined { flex: 1 1 0; display: flex; }
  html.spectrum .dock .transport .sing-actions .joined .toggle.mic { flex: 1; justify-content: center; }
  html.spectrum .dock .transport .sing-actions .toggle.rec { flex: 1 1 0; justify-content: center; }
  html.spectrum .dock .transport .sing-actions .lbl { display: inline; }
  html.spectrum .dock .transport .sing-actions .toggle { height: 42px; }
  html.spectrum .play-main { width: 46px; height: 46px; }
}

/* занятия: столбики дней без ауры — белые, сегодня ярче */
html.spectrum .hc-col i { background: rgba(243, 240, 234, .5); }
html.spectrum .hc-col.today i { background: var(--text); }

/* отчёт «Как вы спели»: процент — кольцо цветов нот, заполненное на этот процент */
html.spectrum .hist-cards:has(.sp-score) { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); }
html.spectrum .hc.sp-score { grid-row: span 2; justify-items: center; align-content: center; text-align: center; gap: 10px; padding: 16px 12px; }
html.spectrum .hc.sp-score b.score {
  position: relative; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%;
  color: var(--text); font: 600 30px/1 var(--display); letter-spacing: -.05em;
}
html.spectrum .hc.sp-score b.score::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#e5484d calc(var(--p, 0) * 0.0000%), #ec6a3c calc(var(--p, 0) * 0.0909%), #f08c2b calc(var(--p, 0) * 0.1818%), #f2ac1f calc(var(--p, 0) * 0.2727%), #e9c400 calc(var(--p, 0) * 0.3636%), #46a758 calc(var(--p, 0) * 0.4545%), #2f9e8f calc(var(--p, 0) * 0.5455%), #2f8fd8 calc(var(--p, 0) * 0.6364%), #4f6bd8 calc(var(--p, 0) * 0.7273%), #7d5bd6 calc(var(--p, 0) * 0.8182%), #a855c7 calc(var(--p, 0) * 0.9091%), #d6409f calc(var(--p, 0) * 1.0000%), rgba(255, 255, 255, .08) calc(var(--p, 0) * 1%) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 80%, #000 82%); mask: radial-gradient(farthest-side, transparent 80%, #000 82%);
}
html.spectrum .sp-counts { display: grid; gap: 4px; justify-items: start; font-size: 12px; color: var(--muted); }
html.spectrum .sp-counts > span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
html.spectrum .sp-counts b { font: 600 12px var(--mono); color: var(--text); }
html.spectrum .sp-counts i { width: 8px; height: 8px; border-radius: 50%; }
html.spectrum .sp-counts i.hit { background: var(--hit); }
html.spectrum .sp-counts i.close { background: var(--close); }
html.spectrum .sp-counts i.miss { background: var(--miss); }
html.spectrum .rep-notes .ro-pill { border-radius: 999px; }

/* карта после круга: тёмная шторка как у капсулы, процент — маленькое кольцо цвета оценки */
html.spectrum .sing-map { background: #1C1C22; border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
html.spectrum .sing-map .sm-head b:first-child { font-family: var(--display); font-weight: 500; letter-spacing: -.03em; }
html.spectrum .sing-map .sm-head .score {
  position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font: 600 11px/1 var(--mono); letter-spacing: -.02em;
}
html.spectrum .sing-map .sm-head .score::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(currentColor calc(var(--p, 0) * 1%), rgba(255, 255, 255, .1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 76%, #000 78%); mask: radial-gradient(farthest-side, transparent 76%, #000 78%);
}
@media (max-width: 700px) {
  html.spectrum .sing-map { width: calc(100% - 16px); padding: 10px 12px; }
  html.spectrum .sing-map .sm-tip { display: none; }
  html.spectrum .sing-map .sm-head b:first-child { font-size: 14px; white-space: nowrap; }
  html.spectrum .hist-cards:has(.sp-score) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html.spectrum .hc.sp-score b.score { width: 96px; height: 96px; font-size: 24px; }
}