/* ============================================================
   Страница входа — галактический HUD-терминал.
   Палитра и шрифты общие с лендингом (Orbitron + Inter).
   ============================================================ */

:root {
    --lg-bg: #04070f;
    --lg-bg-deep: #060b1a;
    --lg-surface: rgba(10, 18, 38, 0.78);
    --lg-border: rgba(94, 155, 255, 0.22);
    --lg-text: #dbe6f5;
    --lg-text-muted: #93a5c4;
    --lg-cyan: #4cc9f0;
    --lg-violet: #8b5cf6;
    --lg-red: #ff5470;
    --lg-glow-cyan: rgba(76, 201, 240, 0.55);
    --lg-font-display: 'Orbitron', 'Segoe UI', sans-serif;
    --lg-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background: var(--lg-bg);
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: var(--lg-font-body);
    color: var(--lg-text);
    background:
        radial-gradient(ellipse 90% 60% at 75% -10%, rgba(76, 100, 240, 0.18), transparent 60%),
        radial-gradient(ellipse 70% 50% at 10% 110%, rgba(139, 92, 246, 0.15), transparent 55%),
        linear-gradient(180deg, var(--lg-bg) 0%, var(--lg-bg-deep) 55%, #030510 100%);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Фоновые слои ---------- */

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

/* Галактика: наклонная светящаяся полоса с ядром и цветными туманностями.
   --lg-par-x/--lg-par-y задаёт JS для параллакса от курсора */
.lg-space::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 30%;
    width: 130vmax;
    height: 46vmax;
    transform: translate(calc(-50% + var(--lg-par-x, 0px)), calc(-50% + var(--lg-par-y, 0px))) rotate(-24deg);
    will-change: transform;
    background:
        radial-gradient(ellipse 18% 30% at 50% 50%, rgba(240, 246, 255, 0.28), transparent 70%),
        radial-gradient(ellipse 42% 55% at 50% 50%, rgba(139, 92, 246, 0.2), transparent 70%),
        radial-gradient(ellipse 70% 80% at 50% 50%, rgba(76, 130, 240, 0.14), transparent 75%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(76, 201, 240, 0.07), transparent 80%);
    filter: blur(6px);
}

/* Дополнительные туманности по краям экрана, параллакс вдвое слабее полосы */
.lg-space::after {
    content: '';
    position: absolute;
    inset: -40px;
    transform: translate(calc(var(--lg-par-x, 0px) * 0.5), calc(var(--lg-par-y, 0px) * 0.5));
    will-change: transform;
    background:
        radial-gradient(ellipse 40% 35% at 12% 20%, rgba(139, 92, 246, 0.14), transparent 65%),
        radial-gradient(ellipse 35% 30% at 88% 80%, rgba(76, 201, 240, 0.1), transparent 65%),
        radial-gradient(ellipse 30% 25% at 80% 12%, rgba(255, 120, 170, 0.06), transparent 60%);
}

.lg-space__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Статичные звёзды-фолбэк при выключенном JS */
.lg-space__static-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 52% 12%, rgba(205,228,255,0.75), transparent),
        radial-gradient(1px 1px at 78% 38%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 88% 72%, rgba(190,215,255,0.7), transparent),
        radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 62% 90%, rgba(255,255,255,0.45), transparent),
        radial-gradient(1.5px 1.5px at 40% 42%, rgba(220,235,255,0.6), transparent);
}

.lg-space--js .lg-space__static-stars {
    display: none;
}

/* ---------- Карточка-терминал ---------- */

.lg-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    padding: 2px;
    background: linear-gradient(160deg, rgba(76, 201, 240, 0.5), rgba(139, 92, 246, 0.35) 45%, rgba(76, 201, 240, 0.12));
    border-radius: 20px;
    box-shadow:
        0 0 40px rgba(76, 201, 240, 0.18),
        0 0 120px rgba(139, 92, 246, 0.12),
        0 24px 60px rgba(0, 0, 0, 0.55);
}

.lg-card__inner {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: var(--lg-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 26px 34px 38px;
}

/* Сканлайн, пробегающий по карточке */
.lg-card__scanline {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 72px;
    background: linear-gradient(180deg, transparent, rgba(76, 201, 240, 0.07) 45%, rgba(76, 201, 240, 0.16) 50%, rgba(76, 201, 240, 0.07) 55%, transparent);
    animation: lg-scan 5.5s linear infinite;
    pointer-events: none;
}

@keyframes lg-scan {
    from { transform: translateY(-90px); }
    to   { transform: translateY(640px); }
}

/* Угловые скобки HUD */
.lg-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(76, 201, 240, 0.75);
    pointer-events: none;
}

.lg-corner--tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.lg-corner--tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.lg-corner--bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.lg-corner--br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

/* ---------- Статус-бар терминала ---------- */

.lg-statusbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-family: var(--lg-font-display);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    color: var(--lg-text-muted);
    text-transform: uppercase;
}

.lg-led {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lg-cyan);
    box-shadow: 0 0 8px var(--lg-glow-cyan);
    animation: lg-led-blink 2.2s ease-in-out infinite;
}

.lg-led--violet {
    background: var(--lg-violet);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
    animation-delay: 0.7s;
}

.lg-led--green {
    background: #3ddc97;
    box-shadow: 0 0 8px rgba(61, 220, 151, 0.6);
    animation-delay: 1.4s;
}

.lg-statusbar__label {
    margin-left: auto;
}

@keyframes lg-led-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ---------- Робот-страж над формой ---------- */

.lg-robot {
    display: block;
    width: 92px;
    height: 92px;
    margin: 0 auto 6px;
    color: var(--lg-cyan);
    filter: drop-shadow(0 0 14px rgba(76, 201, 240, 0.35));
}

/* Глаза робота моргают */
.lg-robot .lg-robot__eye {
    animation: lg-eye-blink 4.4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes lg-eye-blink {
    0%, 91%, 100% { transform: scaleY(1); }
    94%, 97%      { transform: scaleY(0.08); }
}

/* Огонёк антенны */
.lg-robot .lg-robot__antenna-light {
    animation: lg-led-blink 1.8s ease-in-out infinite;
}

/* Сканирующая полоска в визоре */
.lg-robot .lg-robot__visor-scan {
    animation: lg-visor 3.2s ease-in-out infinite alternate;
}

@keyframes lg-visor {
    from { transform: translateX(-7px); }
    to   { transform: translateX(7px); }
}

/* ---------- Заголовок ---------- */

.lg-title {
    font-family: var(--lg-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    color: #f2f7ff;
    text-shadow: 0 0 18px var(--lg-glow-cyan), 0 0 60px rgba(139, 92, 246, 0.3);
}

.lg-subtitle {
    margin-top: 6px;
    margin-bottom: 26px;
    text-align: center;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lg-text-muted);
}

/* ---------- Ошибка ---------- */

.lg-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    font-size: 0.88rem;
    color: #ffd7de;
    background: rgba(255, 84, 112, 0.12);
    border: 1px solid rgba(255, 84, 112, 0.45);
    border-radius: 10px;
    box-shadow: 0 0 18px rgba(255, 84, 112, 0.15), inset 0 0 12px rgba(255, 84, 112, 0.06);
}

.lg-alert svg {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--lg-red);
}

/* ---------- Поля ---------- */

.lg-field + .lg-field {
    margin-top: 18px;
}

.lg-field label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--lg-font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lg-cyan);
}

.lg-input-wrap {
    position: relative;
}

.lg-input-wrap > svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--lg-text-muted);
    pointer-events: none;
    transition: color 200ms ease-out;
}

.lg-input-wrap:focus-within > svg {
    color: var(--lg-cyan);
}

.lg-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px 12px 44px;
    font-family: var(--lg-font-body);
    font-size: 1rem;
    color: var(--lg-text);
    background: rgba(5, 12, 28, 0.75);
    border: 1px solid var(--lg-border);
    border-radius: 10px;
    outline: none;
    transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.lg-input::placeholder {
    color: rgba(147, 165, 196, 0.45);
}

.lg-input:focus {
    border-color: rgba(76, 201, 240, 0.75);
    box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.35), 0 0 22px rgba(76, 201, 240, 0.18);
}

/* Автозаполнение браузера не должно ломать тёмную тему */
.lg-input:-webkit-autofill {
    -webkit-text-fill-color: var(--lg-text);
    -webkit-box-shadow: 0 0 0 1000px #0a1226 inset;
    transition: background-color 9999s ease-out;
}

/* ---------- Кнопка ---------- */

.lg-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin-top: 28px;
    padding: 14px;
    font-family: var(--lg-font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #06121f;
    background: linear-gradient(135deg, #67d8f7 0%, #4cc9f0 45%, #7aa5f8 100%);
    border: 1px solid rgba(160, 225, 255, 0.7);
    border-radius: 999px;
    cursor: pointer;
    box-shadow:
        0 0 22px var(--lg-glow-cyan),
        0 0 60px rgba(76, 201, 240, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.lg-submit svg {
    width: 18px;
    height: 18px;
}

.lg-submit:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 30px var(--lg-glow-cyan),
        0 0 95px rgba(76, 201, 240, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.lg-submit:active {
    transform: translateY(0) scale(0.98);
}

.lg-submit:focus-visible {
    outline: 3px solid #aef0ff;
    outline-offset: 4px;
}

/* ---------- Нижняя строка терминала ---------- */

.lg-footerline {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--lg-font-display);
    font-size: 0.58rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(147, 165, 196, 0.55);
}

.lg-footerline::before,
.lg-footerline::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(94, 155, 255, 0.3), transparent);
}

/* ---------- Адаптив ---------- */

@media (max-width: 480px) {
    .lg-card__inner {
        padding: 22px 20px 30px;
    }

    .lg-robot {
        width: 72px;
        height: 72px;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .lg-card__scanline,
    .lg-led,
    .lg-robot .lg-robot__eye,
    .lg-robot .lg-robot__antenna-light,
    .lg-robot .lg-robot__visor-scan {
        animation: none;
    }

    .lg-card__scanline {
        display: none;
    }

    .lg-submit,
    .lg-input {
        transition: none;
    }

    .lg-submit:hover {
        transform: none;
    }
}