:root{--bg_base:#020412;--bg_dark:#010208;--bg_surface:#061230;--bg_raised:#081438;--bg_hover:#0C1C48;--bg_press:#10245C;--accent:#FF4400;--accent_lit:#FF8844;--accent_dk:#CC2A00;--text:#FFE0D0;--text_dim:#FF9966;--text_on_ac:#020412;--border:#882200;--error:#FF2200;--warn:#FF6600;--info:#FF4400;--mix:#06123080;--color_primary:var(--accent);--color_secondary:var(--error);--color_tertiary:var(--warn);--color_amber:var(--warn);--color_teal:var(--accent);--color_violet:var(--info);--color_danger:var(--error);--color_text_normal:var(--text_dim);--color_text_stressed:var(--text);--color_border:var(--border);--color_border_focus:var(--accent);--color_bg:var(--bg_base);--color_bg_normal:var(--bg_base);--color_bg_hover:var(--bg_dark);--color_bg_dark:var(--bg_dark);--theme-color-bg:var(--bg_base);--theme-color-bg-dark:var(--bg_dark);--theme-color-text-normal:var(--text_dim);--theme-color-text-stressed:var(--text);--theme-color-border:var(--border);--theme-panel-bg:color-mix(in srgb, var(--bg_surface) 68%, var(--mix));--theme-input-bg:var(--bg_base);--theme-panel-shadow:0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent);--theme-glow:0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);--theme-glass-border:1px solid color-mix(in srgb, var(--accent) 45%, var(--mix));--theme-input-active-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 65%, var(--mix));--aurora-a1:color-mix(in srgb, var(--accent) 22%, var(--mix));--aurora-a2:color-mix(in srgb, var(--warn) 16%, var(--mix));--aurora-a3:color-mix(in srgb, var(--info) 14%, var(--mix));--lcars-light:var(--accent_lit);--lcars-amber:var(--warn);}html.day-mode{--bg_base:#FFF4F0;--bg_dark:#FFE0D0;--bg_surface:#FFBBA080;--bg_raised:#FFDCC8;--bg_hover:#FFBA90;--bg_press:#FF9060;--accent:#8C2000;--accent_lit:#C03800;--accent_dk:#601400;--text:#190600;--text_dim:#7A2000;--text_on_ac:#FFFFFF;--border:#B03000;--error:#CC1000;--warn:#AA4400;--info:#882000;--mix:#FFBBA080;}

/* ── Reset ───────────────────────────────────────────────────── */
html, body {
    margin: 0;
    padding: 0;
    background: var(--mix);
    font-family: 'Courier New', Courier, monospace;
    color: var(--color_text_normal);
    min-height: 100vh;
}

/* ── Full-width wrapper (matches the login page layout) ───────── */
.su-wrap {
    display: block;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* ── Flat full-width panel (mirrors the login #login panel) ───── */
.su-panel {
    background: var(--theme-panel-bg);
    border: 1px solid var(--color_border);
    border-top: 1px solid var(--color_border);
    border-left: 3px solid var(--color_primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 28px clamp(24px, 6vw, 80px) 32px;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

/* ── Section heading ─────────────────────────────────────────── */
.su-title {
    font-size: 1rem;
    color: var(--color_text_stressed);
    margin: 0 0 22px 0;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: normal;
    opacity: 0.9;
    border-left: 3px solid var(--color_primary);
    padding-left: 10px;
    padding-bottom: 0;
}

/* ── Individual field wrapper ────────────────────────────────── */
.su-field {
    margin-bottom: 10px;
}

/* ── Field label ─────────────────────────────────────────────── */
.su-field label {
    display: block;
    font-size: 0.66rem;
    color: color-mix(in srgb, var(--color_text_normal) 55%, var(--mix));
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* ── Text / email / password inputs ─────────────────────────── */
.su-in {
    width: 100%;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--theme-input-bg) 62%, var(--mix)) !important;
    border: 1px solid var(--color_border) !important;
    border-radius: 0 !important;
    color: var(--color_text_normal);
    font-family: inherit;
    font-size: 0.82rem;
    padding: 8px 10px;
    outline: none;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.su-in:focus {
    border-color: var(--color_primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color_primary) 25%, var(--mix)) !important;
    background: color-mix(in srgb, var(--theme-input-bg) 70%, var(--mix)) !important;
}

/* ── Avatar file input — theme the native "Choose File" button to match ── */
.su-in[type="file"] {
    padding: 5px 8px;
    cursor: pointer;
    line-height: 1.7;
}
.su-in[type="file"]::file-selector-button,
.su-in[type="file"]::-webkit-file-upload-button {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color_text_stressed);
    background: color-mix(in srgb, var(--color_primary) 16%, var(--theme-input-bg));
    border: 1px solid var(--color_primary);
    border-radius: 99px;
    padding: 5px 14px;
    margin-right: 12px;
    cursor: pointer;
    transition: background 0.18s;
}
.su-in[type="file"]::file-selector-button:hover,
.su-in[type="file"]::-webkit-file-upload-button:hover {
    background: color-mix(in srgb, var(--color_primary) 28%, var(--theme-input-bg));
}

.su-pw-row { display: flex; gap: 6px; align-items: center; }
.su-pw-row .su-in { flex: 1 1 auto; min-width: 0; }
.su-btn-gen {
    width: auto !important;   /* override .su-btn width:100% so the password input keeps its space */
    flex: 0 0 auto;
    margin-top: 0;
    padding: 7px 16px;
    font-size: 0.70rem;
    white-space: nowrap;
}

/* ── Submit button ───────────────────────────────────────────── */
.su-btn {
    display: block;
    width: 100%;
    background: color-mix(in srgb, var(--color_primary) 16%, var(--theme-input-bg)) !important;
    border: 1px solid var(--color_primary) !important;
    border-radius: 99px !important;
    color: var(--color_text_stressed) !important;
    font-family: inherit;
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 24px;
    cursor: pointer;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 20px;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background 0.18s, border-color 0.18s;
}

.su-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color_primary) 28%, var(--theme-input-bg)) !important;
}

.su-btn:active:not(:disabled) { transform: scale(0.98); }

.su-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ── Status / feedback line ──────────────────────────────────── */
.su-status {
    margin-top: 12px;
    font-size: 0.75rem;
    min-height: 1.3em;
    text-align: center;
    letter-spacing: 0.04em;
}

.su-status.ok  { color: var(--color_primary); }
.su-status.err { color: var(--color_secondary); }

/* ── Back-to-login link ──────────────────────────────────────── */
.su-back {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--color_text_normal) 38%, var(--mix));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.18s;
}

.su-back:hover { color: var(--accent_lit); }

/* "(optional)" field hints (migrated from inline style). */
.su-optional { opacity: .45; }

/* ── X-Files redesign: heading uses the case-file typewriter face ── */
.su-title { font-family: 'AmericanTypewriter', monospace !important; }

/* ── Mobile-first ──────────────────────────────────────────────── */
html, body { min-height: 100dvh; }

@media (max-width: 767px) {
    .su-panel {
        margin: max(16px, env(safe-area-inset-top, 16px)) 16px 16px;
        width: calc(100% - 32px);
        padding: 24px 20px 28px;
    }
    .su-in,
    .su-in[type="text"],
    .su-in[type="email"],
    .su-in[type="password"] {
        font-size: 1.23rem !important;
        min-height: 44px;
    }
    .su-btn { min-height: 44px; font-size: 1.15rem !important; }
}

@media (min-width: 768px) {
    .su-panel { max-width: min(560px, 90vw); margin: 0 auto; }
}