* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    background: #03050c;
    color: #d8e4ff;
    font-family: "Segoe UI", system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }

.auth {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    background: rgba(10, 18, 36, .82);
    border: 1px solid rgba(90, 150, 255, .25);
    border-radius: 12px;
    padding: 28px 26px;
    box-shadow: 0 0 60px rgba(40, 110, 255, .15);
    backdrop-filter: blur(4px);
}
.logo {
    margin: 0;
    text-align: center;
    font-size: 34px;
    letter-spacing: 6px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 18px rgba(80, 160, 255, .8);
}
.logo span { color: #3fa9ff; }
.tagline { text-align: center; margin: 4px 0 22px; color: #8497bd; font-size: 13px; }

.tabs { display: flex; margin-bottom: 18px; border-bottom: 1px solid rgba(90, 150, 255, .2); }
.tabs a {
    flex: 1; text-align: center; padding: 10px; color: #8497bd; text-decoration: none; font-weight: 600;
    border-bottom: 2px solid transparent;
}
.tabs a.active { color: #fff; border-color: #3fa9ff; }

.errors {
    background: rgba(255, 70, 70, .12);
    border: 1px solid rgba(255, 70, 70, .4);
    color: #ffb3b3;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
}
.errors div + div { margin-top: 4px; }

form label { display: block; font-size: 13px; color: #9fb2d8; margin-bottom: 12px; }
form input[type=text], form input:not([type]), form input[type=email], form input[type=password] {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 10px 12px;
    background: #0a1326;
    border: 1px solid #22345a;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
}
form input:focus { outline: none; border-color: #3fa9ff; box-shadow: 0 0 0 2px rgba(63, 169, 255, .25); }

.factions { border: 0; padding: 0; margin: 4px 0 16px; display: flex; gap: 8px; }
.factions legend { font-size: 13px; color: #9fb2d8; margin-bottom: 6px; }
.faction { flex: 1; margin: 0; cursor: pointer; }
.faction input { position: absolute; opacity: 0; pointer-events: none; }
.faction span {
    display: block; text-align: center; padding: 12px 4px; border-radius: 8px; font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
    color: var(--c);
    background: color-mix(in srgb, var(--c) 8%, transparent);
    transition: .15s;
}
.faction input:checked + span {
    background: color-mix(in srgb, var(--c) 25%, transparent);
    border-color: var(--c);
    box-shadow: 0 0 16px color-mix(in srgb, var(--c) 45%, transparent);
    color: #fff;
}
.faction input:focus-visible + span { outline: 2px solid #fff; }

button[type=submit] {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(180deg, #3fa9ff, #1f6fd6);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    cursor: pointer;
}
button[type=submit]:hover { filter: brightness(1.1); }