:root {
    --black: #050505;
    --surface: #101010;
    --red: #D60000;
    --orange: #FF7A00;
    --yellow: #FFB000;
    --white: #FFFFFF;
    --muted: #9a9a9a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body.login-body {
    min-height: 100vh; display: grid; place-items: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(214,0,0,.25), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255,122,0,.15), transparent 35%),
        var(--black);
    font-family: 'Segoe UI', system-ui, sans-serif; color: var(--white);
}
.login-wrap { width: min(440px, 92vw); }
.login-card {
    background: linear-gradient(145deg, #121212, #0a0a0a);
    border: 1px solid rgba(255,255,255,.08); border-radius: 20px;
    padding: 2rem; box-shadow: 0 16px 48px rgba(0,0,0,.45);
}
.logo-text { font-size: 2.2rem; font-weight: 800; text-align: center; }
.logo-text span { color: var(--red); }
.login-sub { text-align: center; color: var(--muted); margin: .5rem 0 1.5rem; }
.form-grid { display: grid; gap: 1rem; }
.form-grid label { display: grid; gap: .4rem; font-size: .9rem; color: var(--muted); }
.form-grid input {
    background: var(--surface); border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px; padding: .85rem 1rem; color: var(--white);
}
.btn {
    border: none; border-radius: 12px; padding: .9rem 1.2rem; font-weight: 700;
    cursor: pointer; width: 100%;
    background: linear-gradient(135deg, var(--red), var(--orange)); color: var(--white);
}
.alert-error {
    background: rgba(214,0,0,.18); border: 1px solid var(--red);
    padding: .85rem; border-radius: 12px; margin-bottom: 1rem; font-size: .9rem;
}
.install-steps { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.step {
    padding: .35rem .75rem; border-radius: 999px; font-size: .8rem;
    background: rgba(255,255,255,.06); color: var(--muted);
}
.step.active { background: linear-gradient(135deg, var(--red), var(--orange)); color: var(--white); }