:root { 
    --bg: #050b14; 
    --panel: #0b1624; 
    --panel-2: #102139; 
    --border: rgba(135, 170, 225, 0.18); 
    --text: #f5f7fb; 
    --muted: #8ea1b8; 
    --accent: #ff365d; 
    --green: #43e06f; 
    --blue: #3e9cff; 
    --danger: #ff6b7a; 
    color-scheme: dark; 
} 
* { box-sizing: border-box; } 
html, body { margin: 0; min-height: 100%; } 
body { font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--text); } 
button, input { font: inherit; } 
button, a { -webkit-tap-highlight-color: transparent; } 
.auth-body, .dashboard-body { 
    min-height: 100vh; 
    min-height: 100dvh; 
    overflow-x: hidden; 
    background: 
        radial-gradient(circle at 76% 16%, rgba(62,156,255,.16), transparent 31%), 
        radial-gradient(circle at 20% 84%, rgba(255,54,93,.08), transparent 29%), 
        linear-gradient(145deg, #030812 0%, #07111f 52%, #091a2c 100%); 
} 
.auth-orb { position: fixed; border-radius: 50%; filter: blur(12px); pointer-events: none; opacity: .55; } 
.auth-orb-blue { width: 330px; height: 330px; top: -170px; right: -90px; background: rgba(62,156,255,.14); } 
.auth-orb-red { width: 260px; height: 260px; bottom: -150px; left: -90px; background: rgba(255,54,93,.10); } 
.auth-shell { 
    min-height: 100vh; 
    min-height: 100dvh; 
    display: grid; 
    place-items: center; 
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); 
} 
.auth-layout { 
    width: min(1040px, 100%); 
    display: grid; 
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr); 
    overflow: hidden; 
    border: 1px solid var(--border); 
    border-radius: 32px; 
    background: rgba(7,16,29,.82); 
    box-shadow: 0 40px 110px rgba(0,0,0,.52); 
    backdrop-filter: blur(24px); 
} 
.auth-stage { 
    min-height: 650px; 
    padding: 52px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    background: 
        linear-gradient(135deg, rgba(10,30,52,.94), rgba(8,17,30,.84)), 
        radial-gradient(circle at 76% 30%, rgba(62,156,255,.22), transparent 36%); 
    border-right: 1px solid var(--border); 
} 
.brand-wordmark { font-size: 29px; font-weight: 850; letter-spacing: -.8px; } 
.brand-wordmark span { color: var(--accent); } 
.auth-stage-brand > strong, .auth-card-brand > strong, .dashboard-brand > strong { display: block; margin-top: 4px; letter-spacing: 4px; font-size: 11px; } 
.auth-stage-copy h1 { margin: 8px 0 18px; font-size: clamp(45px, 5vw, 68px); line-height: .98; letter-spacing: -3px; } 
.auth-stage-copy h1 span { color: #79baff; } 
.auth-stage-copy > p:last-child { max-width: 510px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; } 
.auth-kicker { color: var(--blue) !important; font-size: 11px; font-weight: 800; letter-spacing: 2px; } 
.auth-stage-status { display: flex; align-items: center; gap: 13px; color: #d6e4f3; } 
.auth-stage-status div { display: flex; flex-direction: column; gap: 3px; } 
.auth-stage-status small { color: var(--muted); } 
.status-pulse { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(67,224,111,.08), 0 0 22px rgba(67,224,111,.65); } 
.auth-card { padding: 52px 46px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(155deg, rgba(15,31,51,.96), rgba(7,16,29,.98)); } 
.auth-card-brand { display: none; text-align: center; margin-bottom: 34px; } 
.auth-intro h2 { margin: 5px 0 9px; font-size: 34px; letter-spacing: -1.3px; } 
.auth-intro > p:last-child { margin: 0; color: var(--muted); line-height: 1.55; } 
.auth-form { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; } 
.field-group { display: flex; flex-direction: column; gap: 8px; } 
.field-group label { font-size: 13px; font-weight: 750; color: #dbe7f4; } 
.input-shell { position: relative; } 
.input-shell input { 
    width: 100%; min-height: 52px; padding: 0 16px 0 48px; color: white; 
    background: rgba(3,11,21,.62); border: 1px solid rgba(135,170,225,.24); border-radius: 14px; outline: none; 
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; 
} 
.input-shell input:hover { border-color: rgba(135,170,225,.38); } 
.input-shell input:focus { border-color: var(--blue); background: rgba(5,17,31,.88); box-shadow: 0 0 0 4px rgba(62,156,255,.13); } 
.input-icon { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: #7f9ab7; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } 
.password-field input { padding-right: 58px; } 
.password-toggle { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: #9eb3ca; cursor: pointer; } 
.password-toggle:hover, .password-toggle:focus-visible { color: white; background: rgba(62,156,255,.12); outline: none; } 
.eye-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } 
.auth-submit { position: relative; min-height: 52px; margin-top: 4px; border: 0; border-radius: 14px; color: white; font-weight: 800; cursor: pointer; background: linear-gradient(135deg, #ff4668, #db204a); box-shadow: 0 16px 34px rgba(255,54,93,.22); transition: transform .18s ease, filter .18s ease, opacity .18s ease; } 
.auth-submit:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } 
.auth-submit:focus-visible { outline: 3px solid rgba(255,255,255,.86); outline-offset: 3px; } 
.auth-submit:disabled { cursor: wait; opacity: .78; } 
.submit-loading { display: none; align-items: center; justify-content: center; gap: 10px; } 
.auth-submit.is-loading .submit-label { display: none; } 
.auth-submit.is-loading .submit-loading { display: flex; } 
.spinner { width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; } 
.auth-message { margin: 20px 0 -4px; padding: 13px 14px; display: flex; align-items: flex-start; gap: 10px; border-radius: 13px; } 
.auth-message svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } 
.auth-error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.34); color: #ffc0c7; } 
.auth-security-note { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #698199; font-size: 11px; text-align: center; } 
.auth-security-note svg { width: 17px; height: 17px; fill: none; stroke: #4ecb75; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } 
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: white; -webkit-box-shadow: 0 0 0 1000px #081526 inset; caret-color: white; transition: background-color 9999s ease-out; } 
.dashboard-shell { min-height: 100vh; min-height: 100dvh; padding: max(26px, env(safe-area-inset-top)) max(26px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(26px, env(safe-area-inset-left)); } 
.dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; } 
.dashboard-user { display: flex; align-items: center; gap: 11px; padding: 8px; border: 1px solid var(--border); border-radius: 16px; background: rgba(11,22,36,.62); } 
.user-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #ff4668, #c51f46); font-weight: 850; } 
.user-copy { display: flex; flex-direction: column; min-width: 110px; } 
.user-copy strong { font-size: 13px; } 
.user-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: 1.4px; } 
.logout-button { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; color: white; text-decoration: none; border-radius: 11px; background: rgba(255,255,255,.055); } 
.logout-button:hover, .logout-button:focus-visible { background: rgba(255,54,93,.13); outline: none; } 
.logout-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } 
.dashboard-card { width: min(720px, 100%); margin: 12vh auto 0; padding: 52px 30px; text-align: center; background: linear-gradient(145deg, rgba(16,35,58,.97), rgba(8,17,29,.98)); border: 1px solid var(--border); border-radius: 28px; box-shadow: 0 28px 80px rgba(0,0,0,.35); } 
.status-ring { width: 104px; height: 104px; margin: 0 auto 28px; display: grid; place-items: center; border: 4px solid var(--green); border-radius: 50%; box-shadow: 0 0 28px rgba(67,224,111,.35); } 
.status-ring span { width: 24px; height: 24px; background: var(--green); border-radius: 50%; box-shadow: 0 0 20px rgba(67,224,111,.75); } 
.dashboard-card h1 { font-size: 40px; margin: 6px 0 10px; } 
.dashboard-card > p { color: var(--muted); } 
.dashboard-meta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; } 
.dashboard-meta span { padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; color: #b8c9dd; font-size: 12px; } 
@keyframes spin { to { transform: rotate(360deg); } } 
@media (max-width: 820px) { 
    .auth-layout { grid-template-columns: 1fr; width: min(500px, 100%); } 
    .auth-stage { display: none; } 
    .auth-card { min-height: auto; padding: 42px 34px; } 
    .auth-card-brand { display: block; } 
} 
@media (max-width: 620px) { 
    .auth-shell { place-items: start center; padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); } 
    .auth-layout { border-radius: 24px; } 
    .auth-card { padding: 30px 22px 26px; } 
    .auth-card-brand { margin-bottom: 28px; } 
    .auth-intro h2 { font-size: 30px; } 
    .input-shell input, .auth-submit { min-height: 54px; } 
    .dashboard-header { align-items: flex-start; } 
    .dashboard-user { max-width: 62%; flex-wrap: wrap; justify-content: flex-end; } 
    .user-copy { min-width: 0; } 
    .logout-button span { display: none; } 
    .dashboard-card { margin-top: 8vh; } 
    .dashboard-card h1 { font-size: 32px; } 
} 
@media (max-height: 700px) and (min-width: 821px) { 
    .auth-layout { width: min(980px, 100%); } 
    .auth-stage { min-height: 560px; padding: 38px 44px; } 
    .auth-card { padding-top: 36px; padding-bottom: 36px; } 
} 
@media (prefers-reduced-motion: reduce) { 
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } 
}
 
/* ========================================================= 
   Phase 1C Header Fix 
   ========================================================= */ 
.dashboard-actions { 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    gap: 12px; 
    margin-left: auto; 
} 
 
.admin-button { 
    min-height: 42px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0 16px; 
    color: #dcecff; 
    text-decoration: none; 
    white-space: nowrap; 
    border: 1px solid rgba(62, 156, 255, .34); 
    border-radius: 12px; 
    background: linear-gradient( 
        135deg, 
        rgba(62, 156, 255, .18), 
        rgba(62, 156, 255, .08) 
    ); 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); 
    font-size: 13px; 
    font-weight: 750; 
    transition: 
        transform .18s ease, 
        border-color .18s ease, 
        background .18s ease; 
} 
 
.admin-button:hover, 
.admin-button:focus-visible { 
    color: #ffffff; 
    text-decoration: none; 
    border-color: rgba(62, 156, 255, .7); 
    background: rgba(62, 156, 255, .2); 
    transform: translateY(-1px); 
    outline: none; 
} 
 
.dashboard-user { 
    flex-wrap: nowrap; 
    min-height: 58px; 
    padding: 8px 9px 8px 8px; 
} 
 
.logout-button { 
    white-space: nowrap; 
} 
 
@media (max-width: 760px) { 
    .dashboard-header { 
        align-items: flex-start; 
        flex-wrap: wrap; 
    } 
 
    .dashboard-actions { 
        width: 100%; 
        justify-content: space-between; 
        align-items: stretch; 
        gap: 10px; 
        margin-top: 16px; 
    } 
 
    .admin-button { 
        flex: 1 1 auto; 
        min-height: 48px; 
        padding-inline: 14px; 
    } 
 
    .dashboard-user { 
        flex: 0 1 auto; 
        max-width: none; 
        justify-content: flex-end; 
    } 
} 
 
@media (max-width: 520px) { 
    .dashboard-actions { 
        display: grid; 
        grid-template-columns: 1fr; 
    } 
 
    .admin-button { 
        width: 100%; 
    } 
 
    .dashboard-user { 
        width: 100%; 
        display: grid; 
        grid-template-columns: 38px minmax(0, 1fr) auto; 
    } 
 
    .user-copy { 
        min-width: 0; 
    } 
 
    .user-copy strong { 
        overflow: hidden; 
        text-overflow: ellipsis; 
        white-space: nowrap; 
    } 
 
    .logout-button span { 
        display: inline; 
    } 
}