/* ==========================================================================
   Orbitotech — Shared Auth Theme
   Used by: login, register, forgot-password, reset-password,
            confirm-password, verify-email
   ========================================================================== */

:root{
    --bg:#080C16;
    --bg-raised:#0B1120;
    --card:#0D1729;
    --cyan:#22B8F0;
    --cyan-deep:#0D8FC4;
    --amber:#FFB648;
    --ink:#F5F3EE;
    --muted:#8CA0BE;
    --line:rgba(234,242,255,0.09);
    --danger:#FF6B6B;
    --success:#22B8F0;
}

*{ box-sizing:border-box; }

body.auth-body{
    margin:0;
    min-height:100vh;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow-x:hidden;
}

.auth-body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
        radial-gradient(circle at 85% 8%, rgba(34,184,240,0.12), transparent 45%),
        radial-gradient(circle at 6% 92%, rgba(255,182,72,0.06), transparent 40%),
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size:auto, auto, 44px 44px, 44px 44px;
    pointer-events:none;
    z-index:0;
}

.mono{ font-family:'JetBrains Mono', monospace; }

/* NAV */
.auth-nav{
    position:relative; z-index:2;
    display:flex; align-items:center;
    padding:26px 6vw;
}
.auth-logo{
    display:flex; align-items:center; gap:10px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700; font-size:1.2rem;
    text-decoration:none; color:var(--ink);
}
.auth-logo-mark{
    width:20px; height:20px; position:relative;
}
.auth-logo-mark span{
    position:absolute; inset:0; border:1.5px solid var(--cyan); border-radius:50%;
}
.auth-logo-mark span:nth-child(2){ transform:scale(0.55); border-color:var(--amber); }

/* MAIN */
.auth-main{
    position:relative; z-index:2;
    flex:1;
    display:flex; align-items:center; justify-content:center;
    padding:4vh 6vw 8vh;
}

/* CARD — entrance animation + shadow */
.auth-card{
    width:100%; max-width:440px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    padding:40px 36px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
    animation:auth-card-in .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes auth-card-in{
    from{ opacity:0; transform:translateY(18px) scale(.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
    .auth-card{ animation:none; }
}

.auth-eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--cyan);
    display:flex; align-items:center; gap:8px;
    margin-bottom:14px;
}
.auth-eyebrow::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:var(--cyan); box-shadow:0 0 8px var(--cyan);
}
.auth-eyebrow.amber{ color:var(--amber); }
.auth-eyebrow.amber::before{ background:var(--amber); box-shadow:0 0 8px var(--amber); }

.auth-card h2{
    font-family:'Space Grotesk', sans-serif;
    font-size:1.6rem; font-weight:700; letter-spacing:-0.01em;
    margin:0 0 6px;
}
.auth-card .sub{ color:var(--muted); font-size:0.92rem; margin:0 0 28px; }

/* BANNERS */
.auth-banner{
    display:none;
    margin-bottom:20px;
    border-radius:10px;
    font-size:0.86rem;
    padding:12px 14px;
    animation:auth-banner-in .3s ease both;
}
.auth-banner.show{ display:block; }
.auth-banner.error{
    background:rgba(255,107,107,0.08);
    border:1px solid rgba(255,107,107,0.3);
    color:var(--danger);
}
.auth-banner.success{
    background:rgba(34,184,240,0.08);
    border:1px solid rgba(34,184,240,0.3);
    color:var(--cyan);
}
@keyframes auth-banner-in{
    from{ opacity:0; transform:translateY(-6px); }
    to{ opacity:1; transform:translateY(0); }
}

/* FORM */
.auth-card form{ display:flex; flex-direction:column; gap:20px; }

.auth-field label{
    display:block; font-size:0.84rem; font-weight:500;
    color:var(--ink); margin-bottom:8px;
}
.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"]{
    width:100%;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 14px;
    font-size:0.94rem;
    color:var(--ink);
    font-family:'Inter', sans-serif;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.auth-field input::placeholder{ color:var(--muted); }
.auth-field input:focus{
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(34,184,240,0.15);
}
.auth-field input.field-invalid{
    border-color:var(--danger);
    box-shadow:0 0 0 3px rgba(255,107,107,0.12);
}
.auth-field-error{
    margin-top:8px; font-size:0.82rem; color:var(--danger);
    display:none;
}
.auth-field-error.show{ display:block; }

/* password field with eye toggle */
.auth-password-wrap{ position:relative; }
.auth-password-wrap input[type="password"],
.auth-password-wrap input[type="text"]{ padding-right:44px; }
.auth-toggle-eye{
    position:absolute; top:50%; right:12px; transform:translateY(-50%);
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; padding:0; cursor:pointer;
    color:var(--muted);
    transition:color .15s ease;
}
.auth-toggle-eye:hover{ color:var(--cyan); }
.auth-toggle-eye svg{ width:19px; height:19px; }
.auth-toggle-eye .eye-off{ display:none; }
.auth-toggle-eye.is-visible .eye-on{ display:none; }
.auth-toggle-eye.is-visible .eye-off{ display:block; }

/* password rules checklist */
.auth-rules{
    list-style:none; margin:12px 0 0; padding:0;
    display:flex; flex-direction:column; gap:6px;
}
.auth-rules li{
    display:flex; align-items:center; gap:8px;
    font-size:0.78rem; color:var(--muted);
    transition:color .15s ease;
}
.auth-rules li.rule-passed{ color:var(--success); }
.auth-rule-dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--muted); opacity:0.5; flex-shrink:0;
    transition:background .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.auth-rules li.rule-passed .auth-rule-dot{
    background:var(--success); opacity:1; box-shadow:0 0 6px var(--success);
}

.auth-row-between{
    display:flex; align-items:center; justify-content:space-between;
    font-size:0.86rem;
}
.auth-remember{ display:flex; align-items:center; gap:8px; color:var(--muted); cursor:pointer; }
.auth-remember input{ width:16px; height:16px; accent-color:var(--cyan); border-radius:4px; }
.auth-link{ color:var(--cyan); text-decoration:none; font-weight:500; }
.auth-link:hover{ text-decoration:underline; }

/* BUTTON — shadow + lift animation */
.auth-btn{
    width:100%;
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--cyan);
    color:#051520;
    font-weight:600; font-size:0.96rem;
    border:none; border-radius:10px;
    padding:14px; cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.auth-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 28px -8px rgba(34,184,240,0.5);
}
.auth-btn:disabled{ opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }
.auth-btn.secondary{
    background:transparent; color:var(--ink); border:1px solid var(--line);
}
.auth-btn.secondary:hover{ border-color:rgba(255,255,255,0.3); box-shadow:none; }

.auth-note{
    text-align:center; font-size:0.88rem; color:var(--muted); padding-top:6px;
}
.auth-note a{ color:var(--cyan); font-weight:600; text-decoration:none; }
.auth-note a:hover{ text-decoration:underline; }

/* Autofill detection hook — used by JS animationstart listener */
@keyframes auth-autofill-detect { from {} to {} }
input:-webkit-autofill{
    animation-name: auth-autofill-detect;
    animation-duration: 0.001s;
}

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