/* Новый интерфейс AlphaHit (v2) — экраны входа, регистрации, восстановления и сброса пароля.
   Разметка — templates/v2/auth.html, поведение — static/js/v2/auth.js.
   Два дизайна по атрибуту data-skin на <html> (как витрина главной /hit):
     «Кассета» — кобальтовый вкладыш с кассетой слева, бумажная панель, красная кнопка записи,
                 заголовки Tektur, текст Golos Text, название песни рукописным Shantell Sans;
     «Стриминг» — канон Spotify/Яндекс Музыки: почти чёрный фон, обложки песен, кнопки-пилюли,
                 красный акцент AlphaHit, Onest.
   Каждый — в светлой и тёмной теме (data-theme): мини-приложения Telegram/VK ставят тему сами.
   Шрифты — static/css/fonts.css. */

/* ── Токены ── */
[data-skin="cassette"] {
  --bg: #eef1f8; --panel: #ffffff; --ink: #0f1633; --ink-2: #414b70; --line: #d3d9ea; --line-2: #aab3cf;
  --accent: #d02f1b; --on-accent: #ffffff; --field: #ffffff; --field-line: #c3cbe2; --focus: #2b3d96;
  --art: #2b3d96; --art-ink: #ffffff; --ok: #1e7a4f; --err: #b3261e;
  --f: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-head: 'Tektur', 'Golos Text', system-ui, sans-serif; --head-stretch: 84%;
  --r-field: 10px; --r-panel: 0;
}
[data-skin="cassette"][data-theme="dark"] {
  --bg: #0f1326; --panel: #171c33; --ink: #eef1ff; --ink-2: #a9b2d8; --line: #2e365a; --line-2: #4a5585;
  --accent: #ff6a55; --on-accent: #1b0906; --field: #0f1326; --field-line: #3a4470; --focus: #9fb0ff;
  --art: #28397f; --ok: #6dd58c; --err: #f2b8b5;
}
[data-skin="stream"] {
  --bg: #0b0b0c; --panel: #121214; --ink: #f4f4f5; --ink-2: #a9a9b0; --line: #2c2c31; --line-2: #6b6b73;
  --accent: #ff4d38; --on-accent: #0b0b0c; --field: #121214; --field-line: #6b6b73; --focus: #f4f4f5;
  --art: #1a1a1d; --art-ink: #ffffff; --ok: #1ed7a0; --err: #ff8a7d;
  --f: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-head: 'Onest', system-ui, sans-serif; --head-stretch: 100%;
  --r-field: 6px; --r-panel: 0;
}
[data-skin="stream"][data-theme="light"] {
  --bg: #f2f2f4; --panel: #ffffff; --ink: #121214; --ink-2: #5d5d66; --line: #e2e2e6; --line-2: #8d8d96;
  --accent: #d9321d; --on-accent: #ffffff; --field: #ffffff; --field-line: #8d8d96; --focus: #121214;
  --art: #e5e5ea; --art-ink: #121214; --ok: #0f8a63; --err: #b3261e;
}

/* ── Основа ── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* иначе display у классов перебивает атрибут hidden */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--bg); }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--f); }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ── Раскладка: картинка слева, панель справа ── */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); min-height: 100dvh; }
.auth__art { position: relative; overflow: hidden; background: var(--art); color: var(--art-ink); display: grid; place-items: center; padding: 48px; }
.auth__panel { display: flex; flex-direction: column; min-width: 0; background: var(--panel); padding: 28px clamp(20px, 5vw, 64px) 24px; }
.auth__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth__box { width: 100%; max-width: 400px; margin: auto; padding: 32px 0; }
.auth__foot { margin: 0; text-align: center; font-size: 13px; color: var(--ink-2); }
.auth__foot a { color: var(--ink-2); }

/* Логотип и переключатель дизайна */
.logo { display: inline-flex; align-items: center; gap: 10px; font: 800 22px/1 var(--f-head); font-stretch: var(--head-stretch); letter-spacing: -0.01em; text-decoration: none; }
.logo__mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 17px; }
.skin { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.skin button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
[data-skin="cassette"] .skin [data-skin-pick="cassette"], [data-skin="stream"] .skin [data-skin-pick="stream"] { background: var(--ink); color: var(--panel); }

/* Заголовок */
.auth__h { margin: 0 0 8px; font: 800 clamp(30px, 4vw, 40px)/1.05 var(--f-head); font-stretch: var(--head-stretch); letter-spacing: -0.02em; text-wrap: balance; }
[data-skin="stream"] .auth__h { letter-spacing: -0.04em; }
.auth__lead { margin: 0 0 20px; color: var(--ink-2); }

/* Сообщения */
.note { margin: 12px 0; padding: 12px 14px; border-radius: 8px; font-size: 14px; background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ink); }
.note--error { background: color-mix(in srgb, var(--err) 14%, transparent); }
.note--error::before { content: '⚠ '; color: var(--err); }
.note--warn { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.note p { margin: 0 0 10px; }

/* Кнопки быстрого входа */
.social { display: grid; gap: 10px; margin-top: 20px; }
.sbtn { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 52px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; font-weight: 700; font-size: 15px; text-decoration: none; text-align: center;
  transition: border-color 160ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.sbtn:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .sbtn:hover { border-color: var(--ink); } }
.sbtn__ic { position: absolute; left: 16px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; font-size: 11px; font-weight: 800; color: #fff; }
.sbtn__ic--tg { background: #229ed9; border-radius: 50%; }
.sbtn__ic--tg::before { content: ''; width: 12px; height: 10px; background: #fff; clip-path: polygon(0 45%, 100% 0, 78% 100%, 45% 70%); }
.sbtn__ic--max { background: linear-gradient(135deg, #3d6bff, #a54bff); }
.sbtn__ic--ya { background: #fc3f1d; font-size: 14px; }
.sbtn__ic--g { background: #fff; color: #4285f4; box-shadow: inset 0 0 0 1px #dadce0; font-size: 14px; }
.sbtn__ic--vk { background: #0077ff; font-size: 9px; }
.sbtn__ic--ok { background: #ee8208; font-size: 9px; }
.sbtn__ic--qr { background: var(--ink); color: var(--panel); font-size: 9px; }
.social__tg { display: grid; justify-items: center; min-height: 48px; }
.social__tg > .sbtn { width: 100%; }
.social__tg iframe { max-width: 100%; }
.qr { display: grid; justify-items: center; gap: 8px; padding: 16px; border-radius: 12px; background: var(--bg); text-align: center; font-size: 13px; color: var(--ink-2); }
.qr img { width: 200px; height: 200px; padding: 10px; background: #fff; border-radius: 10px; image-rendering: pixelated; }
.qr p { margin: 0; }

/* Разделитель «или» */
.or { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; font-size: 13px; color: var(--ink-2); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Поля */
.form { display: grid; gap: 16px; }
.fld { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.fld i { font-style: normal; font-weight: 400; color: var(--ink-2); }
.fld small { font-weight: 400; font-size: 12px; color: var(--ink-2); }
.fld input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--r-field); border: 1px solid var(--field-line); background: var(--field); color: var(--ink);
  font: 400 16px/1 var(--f); transition: border-color 160ms ease, box-shadow 160ms ease; }
.fld input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.fld input:user-invalid { border-color: var(--err); }
.fld__pw { position: relative; display: block; }
.fld__pw input { padding-right: 96px; }
.fld__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 8px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); }
.trap { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Главная кнопка */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0;
  font-weight: 800; font-size: 16px; text-decoration: none; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), opacity 160ms ease; }
.btn--main { width: 100%; margin-top: 4px; background: var(--accent); color: var(--on-accent); }
.btn--main:active { transform: scale(0.98); }
.btn--main:disabled { opacity: 0.55; cursor: progress; }
@media (hover: hover) and (pointer: fine) { .btn--main:not(:disabled):hover { transform: scale(1.02); } }
.btn--line { min-height: 40px; background: none; border: 1px solid var(--line-2); font-weight: 700; font-size: 14px; }
.btn--sm { padding: 0 16px; }

.links { margin: 16px 0 0; text-align: center; }
.links a { font-weight: 700; }
.swap { margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; color: var(--ink-2); }
.swap a { color: var(--ink); font-weight: 700; }
.fine { margin: 14px 0 0; font-size: 12px; color: var(--ink-2); text-align: center; }

/* ── Картинка «Кассеты»: вкладыш с диагональной полосой и кассета ── */
.art-cassette, .art-stream { display: none; width: min(100%, 620px); }
[data-skin="cassette"] .art-cassette { display: grid; gap: 28px; }
[data-skin="stream"] .art-stream { display: grid; gap: 28px; }
[data-skin="cassette"] .auth__art::before {
  content: ''; position: absolute; left: -20%; right: -20%; top: 56%; height: 26%; transform: rotate(-14deg);
  background: linear-gradient(180deg, #24357f 0 42%, #d02f1b 42% 45.5%, #3446a3 45.5% 58%, #3b50ae 58% 100%); }
.art-cassette > * { position: relative; }
.art-cassette__line { margin: 0; font: 800 clamp(36px, 4.4vw, 60px)/0.98 'Tektur', sans-serif; font-stretch: 82%; }
.art-cassette__stage { display: grid; transform: rotate(-2.4deg); filter: drop-shadow(0 26px 34px rgb(8 16 70 / 0.45)); }
.art-cassette__stage > * { grid-area: 1 / 1; }
.art-cassette__svg { width: 100%; height: auto; }
.art-cassette__hand { align-self: start; margin: 8.2% 11% 0 18%; font: 700 clamp(18px, 2.4vw, 32px)/1.1 'Shantell Sans', sans-serif; color: #1a2fae;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  .art-reel { transform-box: fill-box; transform-origin: center; animation: reel 3.2s linear infinite; }
  @keyframes reel { to { transform: rotate(360deg); } }
}

/* ── Картинка «Стриминга»: обложки настоящих песен ── */
[data-skin="stream"] .auth__art { background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--accent) 35%, var(--art)) 0, var(--art) 60%); }
.art-stream__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; transform: rotate(-6deg); }
.art-stream__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: 0 20px 40px rgb(0 0 0 / 0.45); }
.art-stream__grid img:nth-child(2), .art-stream__grid img:nth-child(4) { transform: translateY(28px); }
.art-stream__line { margin: 24px 0 0; font: 800 clamp(32px, 4vw, 52px)/1 'Onest', sans-serif; letter-spacing: -0.04em; }

/* ── Планшет и телефон: картинка уходит, у «Кассеты» остаётся кобальтовая шапка ── */
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__art { display: none; }
  .auth__panel { padding: 16px 16px 24px; }
  [data-skin="cassette"] .auth__top { margin: -16px -16px 0; padding: 14px 16px; background: #2b3d96; color: #fff; }
  [data-skin="cassette"] .auth__top .skin { background: rgb(255 255 255 / 0.12); box-shadow: none; }
  [data-skin="cassette"] .auth__top .skin button { color: #dfe4fb; }
  [data-skin="cassette"] .auth__top .skin [data-skin-pick="cassette"] { background: #fff; color: #2b3d96; }
  .auth__box { padding: 24px 0; }
}
@media (prefers-reduced-motion: reduce) { .sbtn, .btn { transition: none; } }