/*=========================================================
    PIXEL AI AUTHENTICATION
    Version 2.0
=========================================================*/

/*=========================================================
    VARIABLES
=========================================================*/

:root{
    --bg: var(--bg-0, #0a0a0a);
    --panel: var(--surface-1, #111214);
    --card: var(--surface-2, #17181c);
    --input: var(--surface-2, #22242a);
    --input-hover: var(--surface-active, #2a2d34);
    --gold: var(--gold-primary, #d4af37);
    --gold-light: var(--gold-bright, #f4e3a2);
    --border: var(--border-default, rgba(212, 175, 55, .12));
    --white: var(--text-primary, #fff);
    --secondary: var(--text-secondary, #a3a3a3);
    --shadow: var(--shadow-lg, 0 25px 60px rgba(0, 0, 0, .55));
    --transition: var(--motion-normal, 200ms) ease;
}

/*=========================================================
    RESET
=========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--bg);

    color:var(--white);

    overflow:hidden;

}

/*=========================================================
    GRID
=========================================================*/

.container{

    width:100%;

    height:100vh;

    display:grid;

    grid-template-columns:45% 55%;

}

/*=========================================================
    LEFT PANEL
=========================================================*/

.left-panel{

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(17,18,20,0.98),
            rgba(15,16,18,0.98)
        ),
        url("../assets/texture.png");

    background-repeat: repeat;
    background-size: 250px;
    background-position: center;
}
/*=========================================================
    BACKGROUND GLOW
=========================================================*/

.left-panel::before{

    content:"";

    position:absolute;

    width:750px;

    height:750px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(212,175,55,.08),
    transparent 70%);

    animation:pulse 10s infinite ease;

}

.left-panel::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.03),
    transparent);

    filter:blur(90px);

}

/*=========================================================
    LEFT CONTENT
=========================================================*/

.left-content{

    position:relative;

    z-index:2;

    width:430px;

}

/*=========================================================
    LOGO
=========================================================*/

.logo{
    
    margin-bottom:70px;

}

.logo-circle{           
    display:block;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height:500;

    display:flex;
    justify-content:center;
    align-items:center;
}

.logo-img{
    width:125%;
    height:150%;
    object-fit:contain;
}

.logo h1{

    margin-top:25px;

    font-size:85px;

    font-weight:400;
    text-align: center;
    letter-spacing:2px;

    font-family:"Bitcount Single";
    color:yellow;

}

.logo p{

    margin-top:15px;

    color:var(--secondary);

    line-height:1.8;

    font-size:17px;

}

/*=========================================================
    FEATURE LIST
=========================================================*/

.feature-list{

    display:flex;

    flex-direction:column;

    gap:24px;

    text-align:center;

}

/*=========================================================
    FEATURE CARD
=========================================================*/

.feature{

    display:flex;
    font-family: "Bitcount Single";
  
    margin-top: auto;
    margin-right: auto;
    gap:18px;

    align-items:center;
    justify-content:center;
    text-align:center;

    padding:18px 22px;





    backdrop-filter:blur(8px);

    transition:var(--transition);

}

.feature:hover{

    transform:

    translateX(8px);


}

.feature i{

    width:46px;

    height:46px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--gold);

    background:

    rgba(212,175,55,.08);

    font-size:18px;

}

.feature-text h3{

    font-size:17px;

    font-weight:500;

    margin-bottom:6px;

}

.feature-text p{

    color:var(--secondary);

    font-size:14px;

    line-height:1.6;

}

/*=========================================================
    ANIMATIONS
=========================================================*/

@keyframes pulse{

    0%{

        transform:scale(.9);

        opacity:.8;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

    100%{

        transform:scale(.9);

        opacity:.8;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*=========================================================
    RIGHT PANEL
=========================================================*/

.right-panel{

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(17,18,20,0.95),
            rgba(15,16,18,0.95)
        ),
        url("../assets/texture.png");

    background-repeat: repeat;
    background-size: 250px;
    background-position: center;

}

.right-panel::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(212,175,55,.05),
    transparent 70%);

    filter:blur(40px);

    animation:pulse 12s infinite ease;
}

/*=========================================================
    LOGIN CARD
=========================================================*/

.login-card{

    position:relative;

    z-index:2;

    width:470px;

    padding:48px;

    border-radius:30px;

    background:rgba(23,24,28,.82);

    backdrop-filter:blur(22px);

    border:1px solid rgba(212,175,55,.12);

    box-shadow:
        0 25px 60px rgba(0,0,0,.55),
        inset 0 1px rgba(255,255,255,.03);

    animation:fadeUp .8s ease;

    transition:var(--transition);

}

.login-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 35px 80px rgba(0,0,0,.65),
        0 0 40px rgba(212,175,55,.06);

}

/*=========================================================
    HEADER
=========================================================*/

.heading{

    margin-bottom:34px;

}

.heading h2{
    font-family:"Bitcount Single";
    font-size:40px;

    font-weight:400;
    text-align:center;
    letter-spacing:.5px;
    color:var(--gold)

}

.heading p{
    font-family:"Bitcount Single";
    margin-top:10px;
    font-size:10px; 
    text-align:center;

    color:var(--secondary);

    line-height:1.7;

}

/*=========================================================
    FORM
=========================================================*/

form{

    display:flex;

    flex-direction:column;

}

/* Fixed the missing dot here */
.input-group {
    margin-bottom: 22px;
}

.input-group label {
    display: block;
    margin-bottom: 10px;
    color: #D9D9D9;
    font-size: 14px;
    font-weight: 500;
}

/*=========================================================
    INPUT WRAPPER & ICON FIX
=========================================================*/
.input-wrapper {
    position: relative;
    width: 100%;
}

.input-wrapper i {
    position: absolute;
    left: 20px; /* Positions the icon inside the left edge */
    top: 50%;
    transform: translateY(-50%); /* Perfectly centers it vertically */
    color: #D4AF37;
    font-size: 18px;
    pointer-events: none; /* Prevents the icon from blocking clicks to the input */
}

/*=========================================================
    INPUT
=========================================================*/
.input-group input {
    width: 100%;
    height: 60px;
    /* Adjusted padding: top/bottom 0, right 20px, bottom 0, left 50px */
    /* The 50px left padding prevents text from typing over the icon */
    padding: 0 20px 0 50px; 
    
    background: var(--input);
    color: white;
    border: 1px solid rgba(212,175,55,.10);
    border-radius: 16px;
    outline: none;
    font-size: 15px;
    transition:
        background .25s ease,
        border .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.input-group input::placeholder {
    color: #727272;
}

.input-group input:hover {
    background: var(--input-hover);
}

.input-group input:focus {
    background: var(--input-hover);
    border-color: var(--gold);
    box-shadow:
        0 0 0 4px rgba(212,175,55,.08),
        0 0 24px rgba(212,175,55,.12);
}

/*=========================================================
    PASSWORD
=========================================================*/

.password-box{

    position:relative;

}

.eye-btn{

    position:absolute;

    top:50%;

    right:18px;

    transform:translateY(-50%);

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#9A9A9A;

    cursor:pointer;

    transition:var(--transition);

}

.eye-btn:hover{

    color:var(--gold);

    background:rgba(212,175,55,.08);

}

/*=========================================================
    REMEMBER + FORGOT
=========================================================*/

.row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:8px 0 28px;

}

.remember{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--secondary);

    font-size:14px;

}

.remember input{

    width:16px;

    height:16px;

    accent-color:var(--gold);

    cursor:pointer;

}

.row a{

    text-decoration:none;

    color:var(--gold);

    font-size:14px;

    transition:var(--transition);

}

.row a:hover{

    color:var(--gold-light);

}

/*=========================================================
    LOGIN BUTTON
=========================================================*/

.login-btn{

    position:relative;

    overflow:hidden;

    width:100%;

    height:60px;

    border:none;
    margin-top: 20px;

    border-radius:16px;

    cursor:pointer;

    font-size:20px;

    font-weight:600;

    color:#111;

    background:
    linear-gradient(
    135deg,
    var(--gold-light),
    var(--gold));

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.login-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:80%;

    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent);

    transition:.7s;

}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 35px rgba(212,175,55,.30);

}

.login-btn:hover::before{

    left:130%;

}

.login-btn:active{

    transform:scale(.98);

}

/*==========================================
    CURSOR GLOW
==========================================*/

.cursor-glow{

    position:fixed;

    width:420px;

    height:420px;

    border-radius:50%;

    pointer-events:none;

    z-index:0;

    background:
    radial-gradient(circle,
    rgba(212,175,55,.13),
    rgba(212,175,55,.06),
    transparent 72%);

    filter:blur(55px);

    transform:
    translate(-50%,-50%);

    transition:

        left .08s linear,

        top .08s linear,

        opacity .3s;

    opacity:.65;

}

.login-card{

    transform-style:preserve-3d;

    transition:
        transform .18s ease,
        box-shadow .25s ease;
}

/*=========================================================
    DIVIDER
=========================================================*/

.divider{

    display:flex;

    align-items:center;

    justify-content:center;

    margin:32px 0;

    color:#7F7F7F;

    font-size:13px;

    letter-spacing:1px;

}

.divider::before,
.divider::after{

    content:"";

    flex:1;

    height:1px;

    background:rgba(255,255,255,.08);

}

.divider span{

    margin:0 18px;

}

/*=========================================================
    GOOGLE BUTTON
=========================================================*/

.google-btn{

    width:100%;

    height:58px;
    margin-top: 20px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    background:#202228;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    cursor:pointer;

    font-size:15px;

    transition:.28s ease;

}

.google-btn i{

    color:#D4AF37;

    font-size:18px;

}

.google-btn:hover{

    background:#292C33;

    border-color:rgba(212,175,55,.18);

    transform:translateY(-2px);

}

/*=========================================================
    SIGNUP
=========================================================*/

.signup-text{

    margin-top:30px;

    text-align:center;

    color:#9A9A9A;

    font-size:15px;

}

.signup-text a{

    color:#D4AF37;

    text-decoration:none;

    font-weight:500;

    transition:.3s;

}

.signup-text a:hover{

    color:#F4E3A2;

}

/*=========================================================
    RESPONSIVE
=========================================================*/

@media(max-width:1100px){

    .container{

        grid-template-columns:40% 60%;

    }

    .left-content{

        width:340px;

    }

    .logo h1{

        font-size:46px;

    }

}

@media(max-width:900px){

    .container{

        grid-template-columns:1fr;

    }

    .left-panel{

        display:none;

    }

    .right-panel{

        padding:40px;

    }

    .login-card{

        width:100%;
        max-width:470px;

    }

}

@media(max-width:600px){

    body{

        overflow:auto;

    }

    .right-panel{

        padding:20px;

    }

    .login-card{

        padding:30px 24px;

        border-radius:22px;

    }

    .heading h2{

        font-size:28px;

    }

}

/*==========================================
SHAKE ANIMATION
==========================================*/

@keyframes shake{

0%{

transform:translateX(0);

}

25%{

transform:translateX(-6px);

}

50%{

transform:translateX(6px);

}

75%{

transform:translateX(-6px);

}

100%{

transform:translateX(0);

}

}

.shake{

animation:shake .35s;

}

/*==========================================
SUCCESS BUTTON
==========================================*/

.login-btn{

position:relative;

overflow:hidden;

}

.login-btn:disabled{

cursor:not-allowed;

opacity:.95;

}


.password-strength{

    margin-bottom:25px;

}

.strength-bar{

    width:100%;

    height:7px;

    background:#24262D;

    border-radius:100px;

    overflow:hidden;

    margin-bottom:8px;

}

.strength-fill{

    width:0%;

    height:100%;

    background:#D4AF37;

    transition:.3s;

}

.strength-text{

    color:#9A9A9A;

    font-size:13px;

}



/*=========================================
ERROR MESSAGE
=========================================*/

.error-message{

    display:block;

    margin-top:8px;

    color:#FF5A5A;

    font-size:13px;

    animation:fadeError .25s;

}

@keyframes fadeError{

    from{

        opacity:0;

        transform:translateY(-4px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*=========================================
AUTH ERROR BANNER & GUEST BUTTON
=========================================*/

.auth-error-banner {
    background: rgba(255, 90, 90, 0.1);
    border: 1px solid rgba(255, 90, 90, 0.35);
    color: #FF7070;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    margin-bottom: 20px;
    line-height: 1.45;
    animation: fadeError .25s ease-out;
}

.guest-btn {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #D4AF37;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.guest-btn:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: #D4AF37;
    transform: translateY(-1px);
}

/* Login page refresh. These rules are scoped so the other auth pages keep their layout. */
.auth-login {
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(135deg, #090909 0%, #10100f 52%, #090909 100%);
    color: #f5f5f5;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.auth-login .container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    padding: 44px 24px;
}

.auth-login .right-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 440px);
    padding: 0;
    overflow: visible;
    background: none;
}

.auth-login .right-panel::before {
    content: none;
}

.auth-login .login-card {
    width: 100%;
    padding: 34px 36px 28px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    background: linear-gradient(155deg, rgba(25, 25, 24, .98), rgba(17, 17, 17, .98));
    box-shadow: 0 26px 72px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .035);
    animation: auth-login-enter .4s ease both;
    transform: none;
    transform-style: flat;
    transition: none;
    backdrop-filter: blur(16px);
}

.auth-login .login-card:hover {
    transform: none;
    box-shadow: 0 26px 72px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .035);
}

.auth-login .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto 30px;
    color: #f5f5f5;
    font-size: 19px;
    font-weight: 650;
    text-decoration: none;
}

.auth-login .brand img {
    display: block;
    width: 38px;
    height: 38px;
    margin-right: 10px;
    object-fit: contain;
}

.auth-login .brand-ai {
    margin-left: 5px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

.auth-login .heading {
    margin-bottom: 27px;
    text-align: center;
}

.auth-login .heading h1 {
    color: #f5f5f5;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.25;
}

.auth-login .heading p {
    margin-top: 9px;
    color: #a3a3a3;
    font-size: 13.5px;
    line-height: 1.55;
}

.auth-login form {
    display: flex;
    flex-direction: column;
}

.auth-login [hidden] {
    display: none !important;
}

.auth-login .input-group {
    margin-bottom: 17px;
}

.auth-login .input-group label {
    margin-bottom: 8px;
    color: #dedede;
    font-size: 13px;
    font-weight: 500;
}

.auth-login .input-wrapper i {
    left: 15px;
    color: #e4c143;
    font-size: 15px;
}

.auth-login .input-group input {
    height: 50px;
    padding: 0 15px 0 42px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    outline: none;
    background: #101112;
    color: #f5f5f5;
    font: inherit;
    font-size: 14px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-login .input-group input[type="password"] {
    padding-right: 52px;
}

.auth-login .input-group input::placeholder {
    color: #747474;
}

.auth-login .input-group input:hover {
    background: #141515;
}

.auth-login .input-group input:focus {
    border-color: var(--gold);
    background: #121312;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .12);
}

.auth-login .input-group input[aria-invalid="true"] {
    border-color: #d96b6b;
}

.auth-login .eye-btn {
    right: 7px;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
    border-radius: 7px;
    color: #9d9d9d;
}

.auth-login .eye-btn:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--gold-light);
}

.auth-login .eye-btn i {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    color: inherit;
}

.auth-login .field-error {
    margin-top: 7px;
    color: #ff9292;
    font-size: 12px;
    line-height: 1.4;
}

.auth-login .row {
    justify-content: flex-end;
    margin: 1px 0 20px;
}

.auth-login .row a {
    font-size: 12.5px;
    font-weight: 500;
}

.auth-login .row a:hover,
.auth-login .signup-text a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-login .login-btn {
    height: 50px;
    margin-top: 0;
    border-radius: 9px;
    background: linear-gradient(145deg, #e2c45f, #c9a331);
    color: #17140a;
    font-size: 14px;
    font-weight: 650;
    transition: filter .18s ease, box-shadow .18s ease, transform .18s ease;
}

.auth-login .login-btn:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(212, 175, 55, .18);
}

.auth-login .login-btn:active:not(:disabled) {
    transform: translateY(0);
}

.auth-login .login-btn:disabled {
    cursor: wait;
    opacity: .78;
}

.auth-login .login-btn .fa-spinner {
    margin-right: 9px;
}

.auth-login .divider {
    margin: 22px 0 17px;
    font-size: 11px;
    letter-spacing: .08em;
}

.auth-login .divider span {
    margin: 0 14px;
}

.auth-login .google-btn,
.auth-login .guest-btn {
    min-height: 48px;
    margin-top: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .025);
    color: #e9e9e9;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.auth-login .google-btn {
    gap: 10px;
}

.auth-login .google-btn i {
    color: var(--gold);
    font-size: 15px;
}

.auth-login .guest-btn {
    margin-top: 9px;
    padding: 10px 12px;
}

.auth-login .google-btn:hover,
.auth-login .guest-btn:hover {
    transform: none;
    border-color: rgba(212, 175, 55, .38);
    background: rgba(212, 175, 55, .055);
    color: #fff;
}

.auth-login .auth-error-banner {
    margin-bottom: 18px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 12.5px;
}

.auth-login .signup-text {
    margin-top: 23px;
    color: #9f9f9f;
    font-size: 12.5px;
}

.auth-login .signup-text a {
    color: var(--gold-light);
    font-weight: 600;
}

.auth-login :is(a, button, input):focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
}

@keyframes auth-login-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
    .auth-login .container {
        padding: 20px 16px;
    }

    .auth-login .login-card {
        padding: 29px 23px 24px;
        border-radius: 13px;
    }

    .auth-login .brand {
        margin-bottom: 26px;
    }

    .auth-login .heading h1 {
        font-size: 25px;
    }
}

@media (max-width: 360px) {
    .auth-login .container {
        padding: 14px 11px;
    }

    .auth-login .login-card {
        padding: 25px 18px 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-login *,
    .auth-login *::before,
    .auth-login *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Shared Pixel authentication composition. Auth pages consume the app's
   existing design tokens and Dynamic Living Visual System. */
.auth-page {
    --auth-surface: color-mix(in srgb, var(--surface-1) 92%, var(--bg-0));
    --auth-control: color-mix(in srgb, var(--surface-2) 72%, var(--bg-0));
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg-0);
    color: var(--text-primary);
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.auth-page {
    background: var(--bg-0);
}

.auth-page .container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: safe center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    padding: 36px 24px;
}

.auth-page .left-panel {
    display: none;
}

.auth-page .right-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
}

.auth-page .right-panel::before {
    content: none;
}

.auth-page .login-card {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    padding: 32px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-panel);
    background: var(--auth-surface);
    box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, .025);
    backdrop-filter: none;
    transform: none;
    transform-style: flat;
    animation: auth-surface-enter 300ms cubic-bezier(.2, .7, .2, 1) both;
    transition: none;
}

.auth-page .login-card:hover {
    transform: none;
    box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, .025);
}

.auth-page .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto 26px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -.02em;
    text-decoration: none;
}

.auth-page .brand img {
    display: block;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    object-fit: contain;
}

.auth-page .brand-ai {
    margin-left: 5px;
    color: var(--gold-primary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.auth-page .heading {
    margin-bottom: 24px;
    text-align: center;
}

.auth-page .heading h1,
.auth-page .heading h2 {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: clamp(25px, 4vw, 30px);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.2;
}

.auth-page .heading p {
    max-width: 34ch;
    margin: 9px auto 0;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 13px;
    line-height: 1.55;
}

.auth-page form {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.auth-page [hidden] {
    display: none !important;
}

.auth-page .input-group {
    min-width: 0;
    margin-bottom: 16px;
}

.auth-page .input-group label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 550;
    line-height: 1.35;
}

.auth-page .input-wrapper {
    position: relative;
    width: 100%;
}

.auth-page .input-wrapper > i {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    color: #e4c143;
    font-size: 13px;
    pointer-events: none;
    transform: translateY(-50%);
}

.auth-page .input-group input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-input);
    outline: none;
    background: var(--auth-control);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.auth-page .input-group input[type="password"],
.auth-page .input-group input.password-visible {
    padding-right: 48px;
}

.auth-page .input-group input::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
}

.auth-page .input-group input:hover {
    border-color: var(--border-strong-token);
    background: var(--surface-2);
}

.auth-page .input-group input:focus {
    border-color: color-mix(in srgb, var(--gold-primary) 62%, var(--border-default));
    background: var(--surface-1);
    box-shadow: 0 0 0 3px var(--gold-08);
}

.auth-page .input-group input[aria-invalid="true"] {
    border-color: color-mix(in srgb, var(--danger) 65%, transparent);
    box-shadow: 0 0 0 3px var(--danger-subtle);
}

.auth-page .eye-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color var(--motion-fast) ease, background var(--motion-fast) ease;
}

.auth-page .eye-btn:hover {
    background: rgba(255, 255, 255, .045);
    color: var(--gold-bright);
}

.auth-page .eye-btn i {
    position: static;
    top: auto;
    left: auto;
    color: inherit;
    font-size: 14px;
    pointer-events: none;
    transform: none;
}

.auth-page .field-error,
.auth-page .field-hint {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.45;
}

.auth-page .field-error {
    color: color-mix(in srgb, var(--danger) 82%, white);
}

.auth-page .field-hint {
    color: var(--text-tertiary);
}

.auth-page .row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 18px;
}

.auth-page .row a,
.auth-page .signup-text a {
    color: var(--gold-bright);
    font-size: 12px;
    font-weight: 550;
    text-decoration: none;
    text-underline-offset: 3px;
}

.auth-page .row a:hover,
.auth-page .signup-text a:hover {
    text-decoration: underline;
}

.auth-page .login-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    height: auto;
    margin: 3px 0 0;
    padding: 0 16px;
    overflow: hidden;
    border: 1px solid rgba(243, 215, 107, .24);
    border-radius: var(--radius-button);
    background: linear-gradient(135deg, var(--gold-bright), var(--gold-primary));
    color: #151208;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, filter var(--motion-fast) ease;
}

.auth-page .login-btn::before {
    content: none;
}

.auth-page .login-btn:hover:not(:disabled) {
    filter: brightness(1.035);
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(212, 175, 55, .14);
}

.auth-page .login-btn:active:not(:disabled) {
    transform: translateY(0) scale(.99);
}

.auth-page .login-btn:disabled {
    cursor: wait;
    opacity: .78;
    transform: none;
}

.auth-page .login-btn .fa-spinner {
    margin-right: 0;
}

.auth-page .divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 19px 0 15px;
    color: var(--text-tertiary);
    font-size: 10px;
    letter-spacing: .1em;
}

.auth-page .divider::before,
.auth-page .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-default);
}

.auth-page .divider span {
    margin: 0;
}

.auth-page .google-btn,
.auth-page .guest-btn,
.auth-page .resend-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 45px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-button);
    background: rgba(255, 255, 255, .018);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, color var(--motion-fast) ease;
}

.auth-page .google-btn i {
    color: var(--gold-primary);
    font-size: 14px;
}

.auth-page .guest-btn,
.auth-page .resend-btn {
    margin-top: 8px;
}

.auth-page .google-btn:hover,
.auth-page .guest-btn:hover,
.auth-page .resend-btn:hover:not(:disabled) {
    border-color: var(--border-gold);
    background: var(--gold-08);
    color: var(--text-primary);
    transform: none;
}

.auth-page .resend-btn:disabled {
    cursor: default;
    opacity: .65;
}

.auth-page .signup-text {
    margin: 20px 0 0;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.auth-page .auth-error-banner {
    margin: 0 0 17px;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
    border-radius: var(--radius-sm);
    background: var(--danger-subtle);
    color: color-mix(in srgb, var(--danger) 82%, white);
    font-size: 12px;
    line-height: 1.5;
    animation: auth-message-enter 180ms ease both;
}

.auth-page .auth-error-banner[data-tone="success"] {
    border-color: color-mix(in srgb, var(--success) 28%, transparent);
    background: var(--success-subtle);
    color: color-mix(in srgb, var(--success) 82%, white);
}

.auth-page .password-strength {
    margin: -4px 0 14px;
}

.auth-page .strength-bar {
    width: 100%;
    height: 3px;
    margin-bottom: 7px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .075);
}

.auth-page .strength-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--text-tertiary);
    transition: width var(--motion-normal) ease, background var(--motion-normal) ease;
}

.auth-page .strength-fill[data-strength="1"] { background: var(--danger); }
.auth-page .strength-fill[data-strength="2"] { background: var(--gold-deep); }
.auth-page .strength-fill[data-strength="3"] { background: var(--gold-primary); }
.auth-page .strength-fill[data-strength="4"] { background: var(--success); }

.auth-page .strength-text {
    color: var(--text-tertiary);
    font-size: 10px;
    line-height: 1.35;
}

.auth-page .signup-success {
    padding: 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, .018);
}

.auth-page .signup-success > p:not(.resend-status) {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.auth-page .resend-status {
    min-height: 16px;
    margin: 9px 0 0;
    color: var(--text-tertiary);
    font-size: 11px;
    line-height: 1.45;
}

.auth-page :is(a, button, input):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--gold-primary) 76%, white);
    outline-offset: 3px;
}

.auth-page input::selection {
    color: #0a0a0a;
    background: var(--gold-primary);
}

@keyframes auth-surface-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes auth-message-enter {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
    .auth-page .container {
        align-items: safe center;
        padding: 20px 14px;
    }

    .auth-page .login-card {
        padding: 26px 22px 23px;
        border-radius: var(--radius-panel);
    }

    .auth-page .brand {
        margin-bottom: 23px;
    }

    .auth-page .heading {
        margin-bottom: 21px;
    }

    body.auth-page.pixel-atmosphere-active::before {
        opacity: calc(var(--pixel-ambient-opacity, .85) * .62);
    }

    body.auth-page.pixel-atmosphere-active::after {
        opacity: calc(var(--pixel-ambient-opacity, .85) * .42);
    }
}

@media (max-width: 360px) {
    .auth-page .container {
        padding-inline: 10px;
    }

    .auth-page .login-card {
        padding: 24px 17px 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page *,
    .auth-page *::before,
    .auth-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}