:root{
    color-scheme:dark;
    --bg:#040509;
    --panel:#090b11;
    --panel-2:#10131b;
    --text:#f7f8fc;
    --muted:rgba(247,248,252,.60);
    --muted-2:rgba(247,248,252,.40);
    --line:rgba(255,255,255,.11);
    --line-soft:rgba(255,255,255,.055);
    --gold:#f6bd45;
    --gold-soft:#ffda78;
    --gold-dark:#a96917;
    --purple:#9254ff;
    --danger:#ff6e86;
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{
    min-height:100%;
    background:var(--bg);
    overscroll-behavior:none;
}

body{
    margin:0;
    min-width:320px;
    min-height:100vh;
    min-height:100dvh;
    overflow-x:hidden;
    color:var(--text);
    background:
        radial-gradient(circle at 2% 1%,rgba(119,49,219,.20),transparent 28%),
        radial-gradient(circle at 98% 54%,rgba(209,135,24,.12),transparent 30%),
        #030408;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font:inherit;
}

button{
    border:0;
    cursor:pointer;
}

input{
    border:0;
    outline:0;
    color:var(--text);
}

.sels-login-app{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    justify-content:center;
}

.login-screen{
    position:relative;
    isolation:isolate;
    width:100%;
    max-width:520px;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:
        calc(14px + env(safe-area-inset-top))
        18px
        calc(16px + env(safe-area-inset-bottom));
    background:
        linear-gradient(180deg,rgba(4,5,9,.84),rgba(3,4,8,.985));
}

.visual-fx{
    position:absolute;
    inset:0;
    z-index:-2;
    overflow:hidden;
    pointer-events:none;
}

.visual-fx::before{
    content:"";
    position:absolute;
    left:-405px;
    top:-350px;
    width:720px;
    height:720px;
    border-radius:50%;
    border:3px solid rgba(137,74,255,.46);
    box-shadow:
        0 0 12px rgba(132,65,255,.90),
        0 0 32px rgba(132,65,255,.42);
    transform:rotate(17deg);
    opacity:.78;
}

.visual-fx::after{
    content:"";
    position:absolute;
    right:-455px;
    top:355px;
    width:760px;
    height:760px;
    border-radius:50%;
    border:3px solid rgba(255,184,53,.50);
    box-shadow:
        0 0 12px rgba(255,174,39,.88),
        0 0 34px rgba(255,174,39,.36);
    transform:rotate(-17deg);
    opacity:.78;
}

.purple-glow,
.gold-glow{
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    filter:blur(75px);
    opacity:.15;
}

.purple-glow{
    left:-150px;
    top:-85px;
    background:#7843ef;
}

.gold-glow{
    right:-180px;
    top:400px;
    background:#d68b1c;
}

.spark{
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:var(--gold-soft);
    box-shadow:0 0 10px rgba(255,205,102,.95);
    opacity:.48;
    animation:sparkle 4.5s ease-in-out infinite;
}

.spark-1{top:19%;left:14%}
.spark-2{top:31%;right:12%;animation-delay:1.1s}
.spark-3{top:48%;left:8%;animation-delay:2.4s}
.spark-4{bottom:19%;right:13%;animation-delay:.6s}

.auth-topbar{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    min-height:46px;
}

.back-pill{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:15px;
    background:rgba(8,10,16,.58);
    backdrop-filter:blur(14px);
    color:rgba(255,255,255,.82);
    font-size:30px;
    line-height:1;
}

.top-brand{
    min-width:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    justify-self:center;
    color:rgba(255,255,255,.82);
    font-size:12px;
    font-weight:950;
    letter-spacing:.15em;
}

.top-brand img{
    width:28px;
    height:28px;
    object-fit:contain;
    border-radius:8px;
    filter:drop-shadow(0 7px 16px rgba(236,174,62,.15));
}

.signup-chip{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    border:1px solid rgba(247,189,69,.18);
    border-radius:14px;
    background:rgba(247,189,69,.07);
    color:var(--gold-soft);
    font-size:11px;
    font-weight:900;
}

.login-hero{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:
        clamp(28px,6.5vh,66px)
        0
        24px;
}

.logo-wrap{
    position:relative;
    width:132px;
    height:132px;
    display:grid;
    place-items:center;
    margin-bottom:14px;
}

.logo-wrap::before{
    content:"";
    position:absolute;
    inset:9%;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(255,201,83,.20),
            rgba(180,107,16,.07) 42%,
            transparent 72%
        );
    filter:blur(8px);
    animation:aura 4.5s ease-in-out infinite;
}

.logo-wrap img{
    position:relative;
    z-index:2;
    width:82%;
    height:82%;
    object-fit:contain;
    filter:
        drop-shadow(0 18px 32px rgba(0,0,0,.56))
        drop-shadow(0 0 22px rgba(241,181,61,.20));
}

.eyebrow{
    margin:0 0 10px;
    color:var(--gold);
    font-size:10px;
    font-weight:950;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.login-hero h1{
    margin:0;
    color:#fff;
    font-size:clamp(30px,8vw,42px);
    line-height:1.06;
    letter-spacing:-.04em;
}

.hero-copy{
    width:min(100%,330px);
    margin:11px auto 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.55;
    font-weight:600;
}

.auth-panel{
    position:relative;
    z-index:4;
    width:100%;
    margin-top:auto;
    padding:15px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:28px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        ),
        rgba(7,9,14,.78);
    box-shadow:
        0 -8px 54px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter:blur(20px);
}

.alert-box{
    margin-bottom:12px;
    padding:12px 13px;
    border:1px solid rgba(255,110,134,.24);
    border-radius:18px;
    background:rgba(255,110,134,.10);
    color:#ffd7df;
    font-size:12px;
    line-height:1.45;
}

.alert-box div + div{
    margin-top:5px;
}

.login-form{
    display:grid;
    gap:11px;
}

.field-card{
    position:relative;
    display:block;
    padding:11px 13px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background:rgba(255,255,255,.038);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.field-card.is-focused{
    border-color:rgba(247,189,69,.34);
    background:rgba(247,189,69,.035);
    box-shadow:
        0 0 0 3px rgba(247,189,69,.045),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.field-card > span{
    display:block;
    margin-bottom:6px;
    color:rgba(255,255,255,.53);
    font-size:10px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.field-card input{
    width:100%;
    height:30px;
    padding:0;
    background:transparent;
    font-size:15px;
    font-weight:750;
}

.field-card input::placeholder{
    color:rgba(255,255,255,.25);
}

.password-field{
    padding-right:78px;
}

.toggle-pass{
    position:absolute;
    right:10px;
    bottom:10px;
    min-width:58px;
    height:31px;
    padding:0 9px;
    border:1px solid rgba(247,189,69,.17);
    border-radius:999px;
    background:rgba(247,189,69,.08);
    color:var(--gold);
    font-size:10px;
    font-weight:950;
}

.primary-action{
    position:relative;
    min-height:66px;
    margin-top:2px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 24px;
    align-items:center;
    gap:12px;
    padding:10px 17px;
    overflow:hidden;
    border:1px solid rgba(255,229,162,.75);
    border-radius:20px;
    color:#171109;
    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(255,255,255,.38),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #c78320 0%,
            #f5c34f 42%,
            #ffd570 58%,
            #b9701b 100%
        );
    box-shadow:
        0 18px 40px rgba(180,109,18,.22),
        inset 0 1px 0 rgba(255,255,255,.48);
}

.primary-action::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            110deg,
            transparent 18%,
            rgba(255,255,255,.20) 48%,
            transparent 74%
        );
    transform:translateX(-145%);
    transition:transform .65s ease;
}

.primary-action:hover::after{
    transform:translateX(145%);
}

.primary-action:active{
    transform:scale(.986);
}

.login-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:rgba(20,14,5,.07);
}

.login-icon svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.primary-action strong{
    position:relative;
    z-index:1;
    text-align:left;
    font-size:17px;
    font-weight:950;
}

.primary-action em{
    position:relative;
    z-index:1;
    font-style:normal;
    font-size:32px;
    font-weight:300;
    line-height:1;
}

.account-links{
    display:grid;
    justify-items:center;
    gap:14px;
    margin-top:17px;
}

.forgot-link{
    color:rgba(255,255,255,.67);
    font-size:11.5px;
    font-weight:800;
}

.new-account{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
    color:var(--muted-2);
    font-size:11px;
    font-weight:700;
}

.new-account a{
    color:var(--gold);
    font-weight:950;
}

.security-note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:18px;
    padding-top:15px;
    border-top:1px solid var(--line-soft);
}

.security-note span{
    width:21px;
    height:21px;
    display:grid;
    place-items:center;
    color:var(--gold);
}

.security-note svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.security-note p{
    margin:0;
    color:var(--muted-2);
    font-size:9.5px;
    font-weight:650;
}

.legal-mini{
    min-height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:13px;
    flex-wrap:wrap;
    color:rgba(255,255,255,.39);
    font-size:9.5px;
    font-weight:700;
}

.legal-mini span{
    color:#b693ff;
    font-weight:950;
}

.legal-mini i{
    width:1px;
    height:12px;
    background:rgba(255,255,255,.10);
}

.legal-mini a:hover,
.forgot-link:hover,
.new-account a:hover{
    color:#fff;
}

@keyframes aura{
    0%,100%{
        transform:scale(.92);
        opacity:.68;
    }

    50%{
        transform:scale(1.08);
        opacity:1;
    }
}

@keyframes sparkle{
    0%,100%{
        transform:scale(.6);
        opacity:.20;
    }

    50%{
        transform:scale(1.35);
        opacity:.88;
    }
}

@media (max-width:390px){
    .login-screen{
        padding-left:15px;
        padding-right:15px;
    }

    .login-hero{
        padding-top:clamp(20px,4.5vh,38px);
    }

    .logo-wrap{
        width:112px;
        height:112px;
    }

    .auth-panel{
        padding:13px;
        border-radius:24px;
    }

    .primary-action{
        min-height:62px;
    }
}

@media (max-height:720px){
    .login-screen{
        padding-top:calc(9px + env(safe-area-inset-top));
    }

    .login-hero{
        padding-top:12px;
        padding-bottom:13px;
    }

    .logo-wrap{
        width:96px;
        height:96px;
        margin-bottom:8px;
    }

    .eyebrow{
        margin-bottom:7px;
    }

    .login-hero h1{
        font-size:28px;
    }

    .hero-copy{
        margin-top:7px;
        font-size:11.5px;
    }

    .auth-panel{
        padding:12px;
        border-radius:24px;
    }

    .field-card{
        padding-top:9px;
        padding-bottom:9px;
    }

    .primary-action{
        min-height:58px;
    }

    .account-links{
        margin-top:12px;
        gap:10px;
    }

    .security-note{
        margin-top:12px;
        padding-top:11px;
    }

    .legal-mini{
        margin-top:9px;
    }
}

@media (min-width:700px){
    body{
        display:grid;
        place-items:center;
        padding:26px;
    }

    .sels-login-app{
        min-height:auto;
    }

    .login-screen{
        min-height:min(860px,calc(100dvh - 52px));
        border:1px solid rgba(255,255,255,.10);
        border-radius:38px;
        box-shadow:
            0 30px 100px rgba(0,0,0,.58),
            inset 0 1px 0 rgba(255,255,255,.025);
    }
}

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