/* ============================================================
   InGameCast Auth Pages — "Night Lights" design system
   ============================================================ */

:root {
    --navy: #0B1730;
    --navy-2: #132345;
    --lime: #D4FF3D;
    --red: #FF3B30;
    --amber: #FFB020;
    --white: #FFFFFF;
    --slate: #8B96A8;

    --font-display: 'Anton', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-utility: 'Chakra Petch', sans-serif;

    --card-border: rgba(212, 255, 61, 0.15);
}

* { box-sizing: border-box; }

body.auth-body {
    margin: 0;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
}

/* --------------------------------------------------------
   Card
   -------------------------------------------------------- */
.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--navy-2);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 40px 36px;
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.auth-logo img { height: 30px; width: auto; }

.auth-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: 26px;
    text-align: center;
    margin: 0 0 8px;
}

.auth-subtitle {
    color: var(--slate);
    font-size: 14px;
    text-align: center;
    margin: 0 0 28px;
}

.auth-card form { margin-top: 24px; }

/* --------------------------------------------------------
   Form fields
   -------------------------------------------------------- */
.form-field { margin-bottom: 18px; }

.form-input-group {
    display: flex;
    align-items: center;
    background: var(--navy);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 0 14px;
    transition: border-color 0.15s ease;
}

.form-input-group:focus-within { border-color: var(--lime); }

.form-icon {
    color: var(--slate);
    font-size: 14px;
    margin-right: 10px;
    flex-shrink: 0;
}

.form-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 15px;
    padding: 13px 0;
}

.form-input::placeholder { color: var(--slate); }

.password-toggle {
    background: none;
    border: none;
    color: var(--slate);
    cursor: pointer;
    padding: 6px 0 6px 10px;
    font-size: 14px;
    flex-shrink: 0;
}

.password-toggle:hover { color: var(--white); }

.field-error {
    display: block;
    color: var(--amber);
    font-size: 13px;
    margin-top: 6px;
}

.form-note {
    font-size: 13px;
    color: var(--slate);
    margin: 0 0 18px;
}

.form-note span { color: var(--white); font-weight: 600; }

.form-note ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.form-note li { margin-bottom: 2px; }

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--slate);
    margin-bottom: 22px;
}

.checkbox-row input[type="checkbox"] {
    accent-color: var(--lime);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.checkbox-row a { color: var(--lime); }

.auth-link {
    color: var(--lime);
    font-size: 14px;
}

.auth-link:hover { text-decoration: underline; }

.form-field-end {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

/* --------------------------------------------------------
   Buttons
   -------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.btn-primary { background: var(--lime); color: var(--navy); }
.btn-primary:hover { transform: translateY(-1px); background: #c2ec2c; }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; }

.btn-block { width: 100%; }

/* --------------------------------------------------------
   Alerts
   -------------------------------------------------------- */
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    margin-top: 18px;
}

.alert-error {
    background: rgba(255, 176, 32, 0.12);
    border: 1px solid var(--amber);
    color: var(--amber);
}

.alert-success {
    background: rgba(212, 255, 61, 0.1);
    border: 1px solid var(--lime);
    color: var(--lime);
}

/* --------------------------------------------------------
   Status card (confirmation / completed pages)
   -------------------------------------------------------- */
.status-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 22px;
}

.status-icon--success { background: rgba(212, 255, 61, 0.12); color: var(--lime); }
.status-icon--warning,
.status-icon--error { background: rgba(255, 176, 32, 0.12); color: var(--amber); }

.status-message {
    color: var(--slate);
    font-size: 15px;
    text-align: center;
    margin: 0 0 28px;
}

/* --------------------------------------------------------
   Footer link row
   -------------------------------------------------------- */
.auth-footer-link {
    text-align: center;
    font-size: 14px;
    color: var(--slate);
    margin-top: 24px;
}

.auth-footer-link a {
    color: var(--lime);
    font-weight: 600;
}

.auth-footer-link a:hover { text-decoration: underline; }

/* --------------------------------------------------------
   Spinner (submit button loading state)
   -------------------------------------------------------- */
.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rotate 0.75s linear infinite;
}

.spinner-border-sm { width: 0.85rem; height: 0.85rem; border-width: 0.12em; }

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
    .auth-card { padding: 32px 24px; }
}