/* Вход, новый пароль, «студия офлайн» — одна вёрстка: слева глубокий синий, справа карточка формы. */
:root {
  --bg: #EDEFF3; --panel: #fff; --field: #F4F5F8; --line: #DDE1E8; --text: #0B1220; --muted: #6B7385; --muted2: #9AA1B1;
  --accent: #1B3A8C; --err: #B42318; --focus: rgba(27, 58, 140, .16);
  --ink: #0B1220; --onInk: #fff;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #070A12; --panel: #0F1420; --field: #151B29; --line: rgba(255,255,255,.09); --text: #EEF1F7; --muted: #8A93A8; --muted2: #5D6679;
  --accent: #7C97F0; --err: #FF8A80; --focus: rgba(124, 151, 240, .22);
  --ink: #EEF1F7; --onInk: #0B1220;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh;
}

/* ── синяя сторона ── */
.hero {
  position: relative; overflow: hidden; margin: 12px; border-radius: 28px; color: #fff;
  background: radial-gradient(120% 90% at 15% 0%, #2A4DB5 0%, rgba(42,77,181,0) 60%),
              radial-gradient(90% 80% at 100% 100%, #0B1A4A 0%, rgba(11,26,74,0) 70%),
              linear-gradient(160deg, #1A3484 0%, #0C1B4C 55%, #070F2E 100%);
  display: flex; flex-direction: column; justify-content: space-between; padding: 44px 48px;
}
.hero::before {   /* тонкая сетка, как разметка таймлайна */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 70% at 30% 40%, #000 0%, transparent 85%);
}
.hero > * { position: relative; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.logo {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.hero h1 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.035em; font-weight: 700; margin: 0 0 18px; max-width: 12ch; }
.hero p { margin: 0; max-width: 34ch; color: rgba(255,255,255,.72); font-size: 16px; }

/* полоса «таймлайна» внизу: дорожки и бегущая головка воспроизведения */
.track { display: grid; gap: 10px; margin-top: 40px; }
.lane { position: relative; height: 34px; border-radius: 10px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
.lane i { position: absolute; top: 6px; bottom: 6px; border-radius: 6px; background: rgba(255,255,255,.18); }
.lane.a i { background: linear-gradient(90deg, rgba(157,177,232,.55), rgba(157,177,232,.3)); }
.lane.w { display: flex; align-items: center; gap: 3px; padding: 0 10px; }
.lane.w b { flex: 1; border-radius: 2px; background: rgba(255,255,255,.35); }
.head { position: absolute; top: -6px; bottom: -6px; width: 2px; background: #fff; border-radius: 2px; box-shadow: 0 0 12px rgba(255,255,255,.6); animation: run 9s linear infinite; }
.head::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.tracks { position: relative; }
@keyframes run { from { left: 0; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .head { animation: none; left: 38%; } }
.foot { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.5); margin-top: 28px; }

/* ── форма ── */
.side { display: grid; place-items: center; padding: 40px 24px; }
.card { width: 100%; max-width: 380px; }
.card h2 { font-size: 28px; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 8px; font-weight: 700; }
.card .sub { color: var(--muted); margin: 0 0 30px; }
label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 0 8px; }
.f { margin-bottom: 18px; }
.inp { position: relative; }
input {
  width: 100%; height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--field); color: var(--text);
  padding: 0 16px; font: inherit; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); background: var(--panel); }
input::placeholder { color: var(--muted2); }
.eye { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.eye:hover { color: var(--text); background: rgba(127,127,127,.08); }
.inp.pw input { padding-right: 52px; }
.row { display: flex; justify-content: flex-end; margin: -6px 0 22px; }
.link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--accent); cursor: pointer; text-decoration: none; }
.link:hover { text-decoration: underline; }
.btn {
  width: 100%; height: 52px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 600; font-size: 16px;
  color: #fff; background: linear-gradient(160deg, #1F3F99 0%, #10225A 100%);
  box-shadow: 0 1px 2px rgba(11,18,32,.12), 0 10px 24px rgba(16,34,90,.28); transition: transform .12s, box-shadow .12s, opacity .12s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn:hover { box-shadow: 0 1px 2px rgba(11,18,32,.12), 0 14px 30px rgba(16,34,90,.36); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .65; cursor: default; }
.btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: sp .7s linear infinite; display: none; }
.btn.busy .spin { display: block; }
@keyframes sp { to { transform: rotate(360deg); } }
.msg { min-height: 22px; margin: 14px 0 0; font-size: 14px; color: var(--err); }
.msg.ok { color: var(--accent); }
.note { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.hidden { display: none !important; }
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 26px; }
.done { text-align: left; }
.done .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--focus); color: var(--accent); margin-bottom: 22px; }

@media (max-width: 860px) {
  body { grid-template-columns: 1fr; }
  .hero { margin: 10px 10px 0; padding: 26px 24px; min-height: 0; border-radius: 22px; }
  .hero h1 { font-size: 30px; margin-top: 26px; }
  .hero p, .track, .foot { display: none; }
  .side { place-items: start center; padding: 32px 16px 40px; }
}