:root{
    --bg:#090d12;
    --surface:#111820;
    --surface-2:#0d131a;
    --line:#27313d;
    --text:#f7f8fa;
    --muted:#8993a1;
    --gold:#ffbe16;
    --gold-2:#f59a0a;
    --danger:#ff7777;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at 50% 0,rgba(42,55,70,.24),transparent 430px),
        var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
a{color:inherit}
.hidden{display:none!important}

.auth-shell{
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:
        calc(24px + env(safe-area-inset-top))
        18px
        calc(24px + env(safe-area-inset-bottom));
}
.auth-card{
    width:min(100%,420px);
}
.auth-brand{
    width:max-content;
    margin:0 auto 34px;
    color:var(--gold);
    font-weight:950;
    font-style:italic;
    font-size:17px;
    line-height:.85;
    letter-spacing:-.06em;
    transform:skew(-7deg);
}
.auth-brand span{
    display:block;
    font-size:23px;
}
.auth-heading{
    text-align:center;
    margin-bottom:26px;
}
.auth-heading h1{
    margin:0 0 8px;
    font-size:34px;
    line-height:1.05;
    letter-spacing:-.035em;
}
.auth-heading p{
    margin:0 auto;
    max-width:340px;
    color:var(--muted);
    font-size:15px;
    line-height:1.5;
}
.auth-form{
    display:grid;
    gap:16px;
}
.auth-form label>span{
    display:block;
    margin:0 0 8px 2px;
    color:#c8ced6;
    font-size:13px;
    font-weight:700;
}
.auth-form input{
    width:100%;
    height:56px;
    border:1px solid var(--line);
    border-radius:16px;
    outline:none;
    padding:0 16px;
    background:var(--surface-2);
    color:var(--text);
    font-size:16px;
    transition:border-color .18s,background .18s,box-shadow .18s;
}
.auth-form input::placeholder{color:#66717f}
.auth-form input:focus{
    border-color:rgba(255,190,22,.75);
    background:#101720;
    box-shadow:0 0 0 3px rgba(255,190,22,.08);
}
.password-field{position:relative}
.password-field input{padding-right:82px}
.password-toggle{
    position:absolute;
    top:0;
    right:8px;
    height:56px;
    border:0;
    background:transparent;
    color:var(--gold);
    padding:0 8px;
    font-size:12px;
    font-weight:800;
}
.auth-row{
    display:flex;
    justify-content:flex-end;
    margin-top:-6px;
}
.auth-row a,.auth-back{
    color:var(--gold);
    font-size:13px;
    font-weight:800;
    text-decoration:none;
}
.auth-primary,.auth-secondary{
    min-height:56px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    font-size:16px;
    font-weight:900;
    text-decoration:none;
}
.auth-primary{
    border:0;
    background:linear-gradient(135deg,#ffd037,var(--gold-2));
    color:#111;
    box-shadow:0 10px 30px rgba(245,154,10,.14);
}
.auth-primary:disabled{opacity:.55}
.auth-secondary{
    border:1px solid var(--line);
    background:var(--surface);
    color:#fff;
}
.auth-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:24px 0;
    color:#65707e;
    font-size:12px;
}
.auth-divider::before,.auth-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:var(--line);
}
.auth-note{
    margin:18px auto 0;
    color:#65707e;
    font-size:12px;
    line-height:1.5;
    text-align:center;
}
.auth-message{
    min-height:22px;
    color:var(--danger);
    font-size:13px;
    line-height:1.45;
    text-align:center;
}
.auth-back{
    display:inline-block;
    margin-bottom:26px;
}
.auth-steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin:0 0 26px;
}
.auth-steps i{
    height:3px;
    border-radius:5px;
    background:#26313c;
}
.auth-steps i.active{
    background:var(--gold);
}
.auth-phone-preview{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#101720;
    color:#dfe4ea;
    font-weight:800;
}
.code-input{
    text-align:center;
    font-size:24px!important;
    font-weight:800;
    letter-spacing:.22em;
}
.auth-link-button{
    min-height:44px;
    border:0;
    background:transparent;
    color:var(--gold);
    font-weight:800;
}

@media(max-width:480px){
    .auth-shell{place-items:start center;padding-top:calc(64px + env(safe-area-inset-top))}
    .auth-heading h1{font-size:31px}
    .auth-brand{margin-bottom:30px}
}