/* Студия Песенника (/studio, 17.10.2026). Цвета и шрифты — как у лендинга (index.html, «Ночной плеер»).
   Отдельным файлом, а не <style> в странице: на /studio строгая CSP без 'unsafe-inline' для скриптов,
   и стили держим там же, рядом. */
@font-face { font-family: "Caveat"; src: url("/fonts/caveat-700-cyr.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Caveat"; src: url("/fonts/caveat-700-lat.woff2") format("woff2"); font-weight: 700; font-display: swap; 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; }
@font-face { font-family: "Golos Text"; src: url("/fonts/golos-text-400-cyr.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; src: url("/fonts/golos-text-400-lat.woff2") format("woff2"); font-weight: 400; font-display: swap; 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; }
@font-face { font-family: "Golos Text"; src: url("/fonts/golos-text-600-cyr.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; src: url("/fonts/golos-text-600-lat.woff2") format("woff2"); font-weight: 600; font-display: swap; 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 {
  --bg: #05060C; --bg-2: #0C0F1C; --bg-3: #141A2E;
  --ink: #EEF1F8; --ink-soft: #97A0BC; --ink-faint: #5F688A;
  --line: #1D2440; --neon: #9A8BFF; --neon-deep: #5B3DF5; --violet: #B7ABFF;
  --bad: #FF8A8A;
  color-scheme: dark;   /* родные плеер и поля браузера — в тёмном виде */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 "Golos Text", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 { font-weight: 600; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.04; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.1; }
h3 { font-size: 1.2rem; }
p { margin: 0; }
a { color: inherit; }
.link { color: var(--violet); }
.wrap { width: min(860px, 100% - 2rem); margin-inline: auto; }
main > section { padding-block: clamp(2rem, 6vw, 3.5rem); }
main > section + section { border-top: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; }
.g-s { gap: .6rem } .g-m { gap: 1.1rem } .g-l { gap: 2rem }
.row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.eyebrow { font: 700 1.45rem/1.1 "Caveat", "Golos Text", cursive; color: var(--neon); }
.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; }
.muted { color: var(--ink-soft); }
.note { font-size: .87rem; color: var(--ink-faint); }
.num { font-variant-numeric: tabular-nums; }

header { position: sticky; top: 0; z-index: 20; background: rgba(5,6,12,.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand img { width: 52px; height: 52px; display: block; mix-blend-mode: screen; }
.brand b { font-size: 1.1rem; font-weight: 600; display: block; letter-spacing: -.02em; }
.brand span { display: block; font-size: .76rem; font-weight: 400; color: var(--ink-faint); }
@media (max-width: 560px) { .brand span { display: none } .brand img { width: 44px; height: 44px } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 1.6rem; border-radius: 999px; text-decoration: none; font: 600 .97rem/1.2 "Golos Text", sans-serif; border: 1px solid transparent; cursor: pointer; transition: transform .16s, border-color .16s, opacity .16s; text-align: center; }
.btn-main { background: var(--neon); color: #0C0A24; box-shadow: 0 14px 34px -14px var(--neon-deep); }
.btn-main:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--neon); }
.btn-sm { padding: .6rem 1.1rem; font-size: .9rem; }
.btn[disabled] { opacity: .55; cursor: wait; transform: none; }
.btn:focus-visible, .chip:focus-visible, .pack:focus-within, summary:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important } }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .legend { font-weight: 600; padding: 0; margin-bottom: .2rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-soft); border-radius: 999px; padding: .6rem 1.05rem; font: 400 .95rem/1.2 "Golos Text", sans-serif; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.chip:hover { border-color: var(--neon-deep); }
.chip[aria-pressed="true"] { border-color: var(--neon); color: var(--ink); background: rgba(154,139,255,.14); }
.chips.err .chip { border-color: rgba(255,138,138,.5); }

textarea, input[type=text], input:not([type]) {
  width: 100%; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  padding: .85rem 1rem; font: 400 1rem/1.5 "Golos Text", sans-serif; resize: vertical;
}
textarea:focus, input:focus { outline: none; border-color: var(--neon); }
input.err { border-color: var(--bad); }
textarea::placeholder, input::placeholder { color: var(--ink-faint); }
#link { flex: 1 1 260px; min-width: 0; font: 400 .85rem/1.4 ui-monospace, Menlo, monospace; }
.grid2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 1.3rem; }
.card.hot { border-color: var(--neon); background: linear-gradient(170deg, rgba(154,139,255,.10), var(--bg-2) 60%); }
.lyrics { white-space: pre-wrap; background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 1.3rem 1.4rem; font-size: 1.02rem; line-height: 1.7; color: #D3D9EC; }
details { border-top: 1px solid var(--line); padding-top: 1rem; }
summary { cursor: pointer; font-weight: 600; }
details .lyrics { margin-top: .8rem; }

.notice { margin-top: 1.2rem; padding: .9rem 1.1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); }
.notice.bad { border-color: var(--bad); color: #FFD0D0; }
.notice.ok { border-color: var(--neon); }

.packs { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pack { position: relative; display: flex; flex-direction: column; gap: .15rem; border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; cursor: pointer; background: var(--bg); }
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack b { font-size: 1.15rem; }
.pack span { font-size: .85rem; color: var(--ink-faint); }
.pack:has(input:checked) { border-color: var(--neon); background: rgba(154,139,255,.10); }

/* «студия работает» */
.eq { display: flex; align-items: flex-end; gap: 5px; height: 46px; }
.eq i { width: 8px; border-radius: 3px; background: var(--neon); animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.2s } .eq i:nth-child(3) { animation-delay: -.5s } .eq i:nth-child(4) { animation-delay: -.8s }
.eq i:nth-child(5) { animation-delay: -.35s } .eq i:nth-child(6) { animation-delay: -.65s } .eq i:nth-child(7) { animation-delay: -.95s }
@keyframes eq { 0%,100% { height: 18% } 50% { height: 100% } }

.track { display: flex; flex-direction: column; gap: .6rem; }
.track audio { width: 100%; }

.list { display: flex; flex-direction: column; gap: .6rem; }
.item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.item b { font-weight: 600; }
.item .st { font-size: .85rem; color: var(--ink-faint); }

.tg-alt { padding-bottom: 3rem; }
footer { padding-block: 2.2rem; font-size: .85rem; color: var(--ink-faint); border-top: 1px solid var(--line); }
.cols { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; }

/* «✏️ Исправить строчку» (27.10.2026): строки песни кнопками, выбранная подсвечена как chip */
.fix-lines { display: flex; flex-direction: column; gap: .35rem; max-height: 22rem; overflow-y: auto; padding-right: .2rem; }
.fix-line { text-align: left; border: 1px solid var(--line); background: var(--bg); color: #D3D9EC; border-radius: 12px; padding: .55rem .8rem; font: 400 .98rem/1.45 "Golos Text", sans-serif; cursor: pointer; transition: border-color .15s, background-color .15s; }
.fix-line:hover { border-color: var(--neon-deep); }
.fix-line[aria-pressed="true"] { border-color: var(--neon); color: var(--ink); background: rgba(154,139,255,.14); }
.fix-line:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }