 :root {
            --bg: #030304;
            --gold: #E2B05E;
            --border: rgba(226, 176, 94, 0.2);
            --text: #FFFFFF;
            --muted: #71717A;
            --mono: 'JetBrains Mono', monospace;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: var(--text);
            height: 100vh;
            overflow: hidden;
        }

        /* --- BACKGROUND UI --- */
        .cosmos {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #030304 100%);
            z-index: -2;
        }

        .grid-ui {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: 
                linear-gradient(var(--border) 1px, transparent 1px),
                linear-gradient(90deg, var(--border) 1px, transparent 1px);
            background-size: 50px 50px;
            opacity: 0.1;
            z-index: -1;
        }

        /* --- AUTH SPLIT LAYOUT --- */
        .auth-split {
            display: flex;
            height: 100vh;
            width: 100%;
        }

        /* LEFT PANEL */
        .auth-info-panel {
            flex: 1;
            padding: 60px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-right: 1px solid var(--border);
            background: linear-gradient(135deg, rgba(226, 176, 94, 0.03) 0%, transparent 100%);
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 800;
            text-decoration: none;
            color: #fff;
            letter-spacing: -1px;
        }
        .logo span { color: var(--gold); }

        .system-tag {
            font-family: var(--mono);
            font-size: 0.7rem;
            color: var(--gold);
            letter-spacing: 3px;
            margin-bottom: 20px;
            opacity: 0.8;
        }

        .info-content h1 {
            font-size: clamp(2.5rem, 4vw, 4rem);
            font-weight: 800;
            line-height: 0.95;
            letter-spacing: -2px;
            text-transform: uppercase;
            margin-bottom: 25px;
        }

        .info-content p {
            color: var(--muted);
            font-size: 1.1rem;
            line-height: 1.6;
            max-width: 420px;
        }

        .trust-metrics {
            display: flex;
            gap: 40px;
            margin-top: 50px;
        }

        .metric { display: flex; flex-direction: column; }
        .m-label {
            font-family: var(--mono);
            font-size: 0.6rem;
            color: var(--gold);
            opacity: 0.5;
            margin-bottom: 4px;
        }
        .m-val { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; }

        .auth-footer-note {
            font-family: var(--mono);
            font-size: 0.6rem;
            color: var(--muted);
            opacity: 0.4;
        }

        /* RIGHT PANEL */
        .auth-form-panel {
            flex: 1.2;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }

        .terminal-container {
            width: 100%;
            max-width: 460px;
            background: rgba(10, 10, 12, 0.9);
            border: 1px solid var(--border);
            padding: 50px;
            position: relative;
            backdrop-filter: blur(20px);
        }

        /* Brackets */
        .bracket {
            position: absolute;
            width: 15px; height: 15px;
            border: 2px solid var(--gold);
        }
        .tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
        .tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
        .bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
        .br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

        .terminal-header { margin-bottom: 35px; }
        .terminal-header h2 {
            font-family: var(--mono);
            font-size: 0.9rem;
            letter-spacing: 3px;
            margin-bottom: 8px;
        }
        .terminal-header p { color: var(--muted); font-size: 0.85rem; }

        /* Form UI */
        .field-group { margin-bottom: 20px; }
        .field-group label {
            display: block;
            font-family: var(--mono);
            font-size: 0.6rem;
            color: var(--gold);
            margin-bottom: 8px;
            letter-spacing: 1px;
        }
        .field-group input {
            width: 100%;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border);
            padding: 14px;
            color: #fff;
            font-family: inherit;
            transition: 0.3s ease;
        }
        .field-group input:focus {
            outline: none;
            border-color: var(--gold);
            background: rgba(255, 255, 255, 0.06);
        }

        /* Buttons */
        .btn {
            display: block;
            width: 100%;
            padding: 15px;
            text-align: center;
            font-family: var(--mono);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 1px;
            cursor: pointer;
            transition: 0.4s;
            text-decoration: none;
        }

        .btn-gold {
            background: var(--gold);
            color: #000;
            border: none;
        }
        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(226, 176, 94, 0.3);
        }

        .oauth-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; }
        .btn-oauth {
            background: transparent;
            color: #fff;
            border: 1px solid var(--border);
            font-size: 0.7rem;
        }
        .btn-oauth:hover { border-color: var(--gold); background: rgba(255,255,255,0.03); }

        .terminal-divider {
            text-align: center;
            position: relative;
            margin: 25px 0;
        }
        .terminal-divider::before {
            content: ""; position: absolute; top: 50%; left: 0; width: 100%;
            height: 1px; background: var(--border);
        }
        .terminal-divider span {
            position: relative; background: #0a0a0c;
            padding: 0 15px; font-family: var(--mono);
            font-size: 0.55rem; color: var(--muted);
        }

        .terminal-footer {
            margin-top: 25px; text-align: center;
            font-size: 0.8rem; color: var(--muted);
        }
        .terminal-footer a { color: var(--gold); text-decoration: none; }

        .system-error {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #fca5a5;
            padding: 10px;
            font-size: 0.8rem;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        @media (max-width: 900px) {
            .auth-info-panel { display: none; }
            .auth-form-panel { background: var(--bg); }
        }

        /* --- COMPACT & UNIFIED FORM OVERRIDES --- */
.terminal-container.unified-layout {
    padding: 45px 40px; /* Margins narrowed slightly to make the layout feel packed and intentional */
    max-width: 420px;   /* Slightly slimmer width for a sharper corporate look */
}

.terminal-header.compact {
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(226, 176, 94, 0.1);
    padding-bottom: 15px;
}

/* Enhanced Inputs with Premium Prefixes */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

/* Style the terminal indicator inside the wrapper */
.input-prefix {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--gold);
    padding-left: 14px;
    opacity: 0.5;
    user-select: none;
}

/* Adjust the native input to match the wrapper container */
.input-wrapper input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    padding: 14px 14px 14px 8px; /* Extra spacing adjusted around the prefix */
    color: #fff;
    font-family: inherit;
}

/* Apply focus effects smoothly onto the entire wrapper container */
.input-wrapper:focus-within {
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 10px rgba(226, 176, 94, 0.05);
}

.input-wrapper:focus-within .input-prefix {
    opacity: 1;
}

/* Spacing tweak for the button section */
.form-actions {
    margin-top: 30px;
}

/* --- FORGOT PASSWORD STYLING --- */
.field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* Override standard label margin since the parent container now handles spacing */
.field-header label {
    margin-bottom: 0; 
}

.forgot-password-link {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.forgot-password-link:hover {
    color: var(--gold);
    text-shadow: 0 0 8px rgba(226, 176, 94, 0.4);
}


/* --- APP NOTIFICATIONS LAYER --- */
.system-error, .system-success {
    font-family: var(--mono);
    font-size: 0.75rem;
    padding: 12px 14px;
    margin-bottom: 25px;
    border-left: 3px solid;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

/* System Exception State Override */
.system-error {
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-left: 3px solid #EF4444;
    color: #fca5a5;
}
.error-prefix { color: #EF4444; font-weight: 700; margin-right: 4px; }

/* System Execution Success State */
.system-success {
    background: rgba(34, 197, 94, 0.04);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-left: 3px solid #22C55E;
    color: #86efac;
}
.success-prefix { color: #22C55E; font-weight: 700; margin-right: 4px; }