/* SIBEX VPN — космический слой.
 *
 * Подключается после style.css и только переопределяет оформление: разметка,
 * идентификаторы и логика не меняются. Откат — убрать <link> из index.html.
 *
 * Дизайн-решение: фон — глубокая космическая сцена (туманность + звёздное поле
 * + слабая координатная сетка), интерфейс — прохладные поверхности с акцентной
 * кромкой. Акцент один — фирменный фиолетовый; второй цвет (индиго) взят только
 * для глубины и всегда слабее основного.
 *
 * Поверхность: Decide/Learn (вход и первый экран), внутри кабинета — Monitor:
 * атмосфера в оболочке, данные остаются на непрозрачных поверхностях.
 */

:root {
  /* Глубина космоса: от почти чёрного к фиолетово-синему */
  --space-0: #07080f;
  --space-1: #0b0d1b;
  --space-2: #111428;
  --space-3: #161a33;

  /* Второй цвет — только для глубины */
  --nebula-cool: #4a5bb8;

  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Cascadia Mono", Menlo, monospace;

  --ring: color-mix(in oklab, var(--accent) 30%, transparent);
  --field: #131829;
  --field-border: #232a3d;
}

/* ── Сцена на заднем плане ────────────────────────────────────────────────── */

body {
  background:
    radial-gradient(1100px 720px at 50% -8%, color-mix(in oklab, var(--accent) 13%, transparent), transparent 62%),
    radial-gradient(900px 900px at 108% 12%, color-mix(in oklab, var(--nebula-cool) 16%, transparent), transparent 60%),
    radial-gradient(800px 800px at -10% 78%, color-mix(in oklab, var(--accent-lo) 14%, transparent), transparent 62%),
    linear-gradient(178deg, var(--space-1) 0%, var(--space-0) 46%, var(--space-1) 100%);
  background-attachment: fixed;
}

/* Старое свечение раскладываем в более глубокую туманность */
.bg-glow {
  background:
    radial-gradient(780px 560px at 84% -16%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 66%),
    radial-gradient(620px 520px at -14% 22%, color-mix(in oklab, var(--accent) 11%, transparent), transparent 70%),
    radial-gradient(1000px 620px at 50% 112%, color-mix(in oklab, var(--nebula-cool) 13%, transparent), transparent 68%),
    linear-gradient(180deg, transparent 52%, var(--space-0));
}

.cosmos {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
}

/* Звёзды: один разреженный слой. Замеры трёх сайтов жанра показывают ровный
 * тёмный фон без шума (σ ≤ 1) — плотное звёздное поле превращает страницу в
 * открытку и мешает читать форму, поэтому звёзд мало и они едва заметны. */
/* Позиции намеренно «рваные», а размеры плиток — простые числа: при равномерной
 * сетке и круглых плитках звёзды выстраивались в различимый повторяющийся узор,
 * который читается как грязь. */
.cosmos-stars {
  position: absolute; inset: -40% -15%;
  background-image:
    radial-gradient(1.3px 1.3px at 17% 23%, #ffffff 99%, transparent 100%),
    radial-gradient(1px 1px at 61% 9%, color-mix(in oklab, var(--accent-hi) 85%, #fff) 99%, transparent 100%),
    radial-gradient(1.6px 1.6px at 87% 61%, #ffffff 99%, transparent 100%),
    radial-gradient(1px 1px at 29% 84%, #ffffff 99%, transparent 100%),
    radial-gradient(1.2px 1.2px at 6% 47%, color-mix(in oklab, var(--accent-hi) 70%, #fff) 99%, transparent 100%),
    radial-gradient(1.5px 1.5px at 43% 39%, #ffffff 99%, transparent 100%),
    radial-gradient(1px 1px at 74% 31%, #ffffff 99%, transparent 100%),
    radial-gradient(1.1px 1.1px at 52% 88%, #ffffff 99%, transparent 100%),
    radial-gradient(1.2px 1.2px at 93% 15%, #ffffff 99%, transparent 100%),
    radial-gradient(1px 1px at 9% 71%, color-mix(in oklab, var(--accent-hi) 60%, #fff) 99%, transparent 100%);
  background-size: 307px 307px, 419px 419px, 547px 547px, 367px 367px, 683px 683px, 419px 419px,
                   547px 547px, 307px 307px, 683px 683px, 367px 367px;
  opacity: .38;
}

/* Дальние звёзды: тот же приём крупнее и тише — даёт глубину */
.cosmos-stars--far {
  background-size: 839px 839px, 733px 733px, 977px 977px, 631px 631px, 887px 887px, 733px 733px,
                   977px 977px, 839px 839px, 887px 887px, 631px 631px;
  opacity: .2;
}

/* Дальний план: один мягкий ореол. Раньше у него было 1px кольцо — на снимке
 * оно читалось видимой дугой с зерном по краю, поэтому кольцо убрано, а сам
 * ореол сильно перекрывает кадр: край затухания остаётся за пределами экрана. */
.cosmos-orbit {
  position: absolute; right: -34vmax; top: -30vmax;
  width: 96vmax; height: 96vmax; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 11%, transparent), transparent 66%);
}

/* Мерцание: медленное и малоконтрастное, чтобы не отвлекать от входа */
@media (prefers-reduced-motion: no-preference) {
  .cosmos-stars--near { animation: cosmos-drift 220s linear infinite; }
  .cosmos-stars--far { animation: cosmos-drift 420s linear infinite reverse; }
  .cosmos-orbit { animation: cosmos-breathe 26s var(--ease) infinite; }
}

@keyframes cosmos-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-260px, 180px, 0); }
}
@keyframes cosmos-breathe {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* ── Поверхности: слоёная кромка вместо размытия ──────────────────────────── */

.hero-card {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--space-3) 92%, transparent), color-mix(in oklab, var(--space-1) 96%, transparent));
  border: 1px solid color-mix(in oklab, var(--accent-hi) 16%, var(--border));
  box-shadow:
    0 1px 0 0 color-mix(in oklab, #ffffff 7%, transparent) inset,
    0 0 0 1px color-mix(in oklab, var(--space-0) 60%, transparent),
    0 34px 70px -34px color-mix(in oklab, var(--space-0) 92%, transparent),
    0 0 90px -40px color-mix(in oklab, var(--accent) 55%, transparent);
}
.hero-card::before { opacity: 1; }
.hero-card::after {
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 26%, transparent), transparent);
}

/* Технические подписи — монопространственный шрифт */
.hero-badge,
.footnote {
  font-family: var(--mono);
  letter-spacing: .08em;
}

/* Копирайт на мелком кегле: было ~4.2:1 (ниже AA), поднимаем до ~7:1 */
.footnote { color: color-mix(in oklab, var(--text-soft) 88%, var(--accent)); }

.hero-badge {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  border-color: var(--ring);
}

/* ── Кнопки и поля: акцент как свет ───────────────────────────────────────── */

.btn {
  box-shadow:
    0 1px 0 0 color-mix(in oklab, #ffffff 18%, transparent) inset,
    0 10px 26px -14px color-mix(in oklab, var(--accent) 80%, transparent);
}
.btn:hover {
  box-shadow:
    0 1px 0 0 color-mix(in oklab, #ffffff 22%, transparent) inset,
    0 14px 30px -12px color-mix(in oklab, var(--accent) 95%, transparent);
}
.btn.outline {
  border-color: color-mix(in oklab, var(--accent-hi) 34%, transparent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}

/* Поле: заливка чуть светлее фона, граница 1px — как в референсе (Warp) */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--field);
  border-color: var(--field-border);
}
input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
}
input#sub-url,
input#ref-url {
  font-family: var(--mono);
  font-size: .86rem;
  letter-spacing: -.01em;
}

/* Вкладки входа — сегменты с подсветкой активного */
.auth-tab {
  background: color-mix(in oklab, var(--space-2) 70%, transparent);
  border-color: color-mix(in oklab, var(--accent-hi) 14%, var(--border));
}
.auth-tab.active {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--accent-text);
  border-color: transparent;
  box-shadow:
    0 1px 0 0 color-mix(in oklab, #ffffff 30%, transparent) inset,
    0 10px 24px -12px color-mix(in oklab, var(--accent) 95%, transparent);
}

/* Карточки кабинета: тот же слоёный край, но сдержаннее */
.card {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--space-3) 90%, transparent), color-mix(in oklab, var(--space-2) 96%, transparent));
  border-color: color-mix(in oklab, var(--accent-hi) 12%, var(--border));
  box-shadow:
    0 1px 0 0 color-mix(in oklab, #ffffff 5%, transparent) inset,
    0 22px 44px -30px color-mix(in oklab, var(--space-0) 90%, transparent);
}

.tab.active {
  box-shadow: 0 10px 26px -18px color-mix(in oklab, var(--accent) 95%, transparent);
}

.logo-mark {
  box-shadow:
    0 1px 0 0 color-mix(in oklab, #ffffff 26%, transparent) inset,
    0 8px 22px -10px color-mix(in oklab, var(--accent) 85%, transparent);
}

/* Фокус виден на космическом фоне */
:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent-hi) 85%, transparent);
  outline-offset: 2px;
}

/* ── Дисциплина первого экрана ─────────────────────────────────────────────
 * Замер: на экране 1280×800 у браузера под интерфейс уходит ~120 px, то есть
 * реальный вьюпорт ~680 px, а карточка входа занимала 675 px — форма уезжала под
 * сгиб, клиенту приходилось прокручивать, чтобы увидеть кнопку и преимущества.
 * Поэтому на широких экранах ужимаю вертикальный ритм примерно на 115 px так,
 * чтобы карточка целиком попадала в первый экран. На телефоне отступы прежние —
 * там высоты хватает, и воздух работает на читаемость. */

@media (min-width: 900px) {
  .topbar { padding: 8px 2px 8px; }
  .hero-card {
    padding-top: 26px;
    padding-bottom: 24px;
  }
  .hero-badge { margin-bottom: 12px; padding-top: 4px; padding-bottom: 4px; }
  .hero-card h1 {
    font-size: clamp(1.7rem, 2.6vw, 2rem);
    margin-bottom: 10px;
  }
  .login-slot { margin: 14px 0 8px; min-height: 44px; }
  .features { margin-top: 16px; gap: 6px; }
  .features li { padding: 11px 14px; }
  .footnote { margin: 14px 0 8px; }
}

/* ── Тема всегда тёмная ────────────────────────────────────────────────────
 * Светлой темы в проекте нет: из style.css удалён блок светлых токенов, а
 * color-scheme выставлен в dark (иначе поля ввода и скроллбар рисуются светлыми).
 *
 * Этот блок — страховка: в репозитории проекта (копия на диске сейчас недоступна)
 * ещё может лежать старая версия style.css со светлыми токенами. Космический слой
 * подключён последним, поэтому возвращает тёмную палитру и приводит тему к одной.
 */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #161826;
    --bg-deep: #101120;
    --card: #1c1f31;
    --card-hover: #22263a;
    --inset: #14162454;
    --text: #e9e9ed;
    --text-soft: #c3c5d4;
    --muted: #8f92a8;
    --border: #2b2f47;
    --border-soft: #23273a;
    --input-bg: #14162a;
  }
}

/* Telegram Mini App: палитра бралась из клиентских переменных Telegram, поэтому
 * в светлом клиенте кабинет тоже становился светлым. Тема одна — тёмная. */
body.tg-theme {
  --bg: #161826;
  --bg-deep: #101120;
  --card: #1c1f31;
  --card-hover: #22263a;
  --inset: #14162454;
  --text: #e9e9ed;
  --text-soft: #c3c5d4;
  --muted: #8f92a8;
  --border: #2b2f47;
  --border-soft: #23273a;
  --input-bg: #14162a;
}