:root{
    color-scheme:dark;
    --auth-bg:#070a0f;
    --auth-panel:rgba(14,19,27,.84);
    --auth-line:rgba(255,255,255,.10);
    --auth-text:#f3f7fb;
    --auth-muted:#8f9baa;
    --auth-green:#7edc97;
    --auth-cyan:#8bd5ff;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body.auth-page{
    margin:0;
    min-height:100dvh;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 18% 18%,rgba(66,159,111,.16),transparent 31%),
        radial-gradient(circle at 82% 22%,rgba(78,159,194,.11),transparent 29%),
        radial-gradient(circle at 52% 86%,rgba(147,86,137,.08),transparent 30%),
        linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
        var(--auth-bg);
    background-size:auto,auto,auto,48px 48px,48px 48px,auto;
    color:var(--auth-text);
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.auth-page::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:linear-gradient(115deg,rgba(6,9,14,.16),rgba(6,9,14,.68));
}
.auth-shell{
    position:relative;
    z-index:1;
    width:min(1120px,calc(100vw - 40px));
    min-height:100dvh;
    margin:auto;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr);
    gap:clamp(46px,8vw,120px);
    align-items:center;
    padding:64px 0 100px;
}
.auth-story{display:grid;gap:34px;max-width:600px}
.auth-brand{display:flex;align-items:center;gap:11px;color:#f7fafc;font-size:13px;font-weight:850;letter-spacing:.08em}
.auth-mark{
    width:40px;
    height:44px;
    display:grid;
    place-items:center;
    clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);
    background:linear-gradient(145deg,rgba(126,220,151,.92),rgba(139,213,255,.76));
    color:#07100d;
    font-size:10px;
    letter-spacing:-.03em;
}
.auth-story-copy{display:grid;gap:18px}
.auth-kicker{color:var(--auth-green);font-size:11px;font-weight:760;letter-spacing:.12em;text-transform:uppercase}
.auth-story h1{
    max-width:12ch;
    margin:0;
    font-size:clamp(48px,6vw,78px);
    line-height:.95;
    letter-spacing:-.055em;
    font-weight:860;
}
.auth-story-copy>p{max-width:48ch;margin:0;color:#9ba7b5;font-size:15px;line-height:1.6}
.auth-principles{display:flex;gap:8px;flex-wrap:wrap}
.auth-principles span{border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.03);color:#aab5c3;padding:7px 10px;font-size:10px}
.auth-card{
    width:100%;
    display:grid;
    gap:24px;
    padding:clamp(26px,4vw,38px);
    border:1px solid var(--auth-line);
    border-radius:22px;
    background:linear-gradient(155deg,rgba(22,29,39,.90),rgba(10,14,21,.90));
    box-shadow:0 34px 100px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(26px) saturate(1.15);
}
.auth-card-head{display:grid;gap:7px}
.auth-card h2{margin:0;font-size:28px;line-height:1.1;letter-spacing:-.025em}
.auth-card-head p{margin:0;color:var(--auth-muted);font-size:12px;line-height:1.5}
.auth-form{display:grid;gap:15px}
.auth-field{display:grid;gap:7px}
.auth-field>span{color:#b8c2cd;font-size:11px;font-weight:680}
.auth-field>span small{margin-left:4px;color:#6f7c8b;font-size:9px;font-weight:500}
.auth-input-wrap{position:relative}
.auth-input{
    width:100%;
    min-height:48px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:11px;
    background:rgba(255,255,255,.045);
    color:#f5f8fb;
    padding:12px 13px;
    outline:0;
    font:inherit;
    font-size:14px;
    transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.auth-input::placeholder{color:#637080}
.auth-input:hover{background:rgba(255,255,255,.058)}
.auth-input:focus{border-color:rgba(126,220,151,.52);box-shadow:0 0 0 4px rgba(126,220,151,.09);background:rgba(255,255,255,.065)}
.auth-input.has-control{padding-right:52px}
.auth-input-control{
    position:absolute;
    top:50%;
    right:7px;
    translate:0 -50%;
    min-width:38px;
    min-height:34px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#8d99a8;
    cursor:pointer;
    font-size:10px;
}
.auth-input-control:hover,.auth-input-control:focus-visible{background:rgba(255,255,255,.07);color:#eaf0f6;outline:0}
.auth-submit{
    min-height:48px;
    margin-top:3px;
    border:1px solid rgba(126,220,151,.34);
    border-radius:11px;
    background:linear-gradient(135deg,rgba(126,220,151,.22),rgba(139,213,255,.12));
    color:#effff3;
    font:inherit;
    font-size:13px;
    font-weight:780;
    cursor:pointer;
    transition:transform .14s ease,background .14s ease,border-color .14s ease;
}
.auth-submit:hover,.auth-submit:focus-visible{transform:translateY(-1px);background:linear-gradient(135deg,rgba(126,220,151,.30),rgba(139,213,255,.17));border-color:rgba(126,220,151,.48);outline:0}
.auth-error{display:flex;gap:9px;align-items:flex-start;border:1px solid rgba(251,113,133,.26);border-radius:10px;background:rgba(127,29,29,.15);color:#fecdd3;padding:10px 11px;font-size:11px;line-height:1.4}
.auth-error::before{content:"!";flex:none;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:rgba(251,113,133,.16);font-weight:800}
.auth-notice{border:1px solid rgba(126,220,151,.24);border-radius:10px;background:rgba(45,113,70,.14);color:#c8f4d3;padding:11px 12px;font-size:11px;line-height:1.5}
.auth-links{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:2px}
.auth-links a,.auth-secondary{color:#a6cdd8;font-size:11px;text-decoration:none}
.auth-links a:hover,.auth-links a:focus-visible,.auth-secondary:hover,.auth-secondary:focus-visible{color:#d8f4fb;text-decoration:underline;outline:0}
.auth-secondary{width:100%;min-height:38px;border:0;background:transparent;cursor:pointer}
.auth-security{display:flex;align-items:center;gap:8px;color:#6f7c8b;font-size:10px}
.auth-security i{width:7px;height:7px;border-radius:50%;background:var(--auth-green);box-shadow:0 0 12px rgba(126,220,151,.55)}
.auth-code{font-size:18px;letter-spacing:.08em;text-align:center;text-transform:uppercase}
@media(max-width:800px){
    .auth-shell{width:min(470px,calc(100vw - 28px));grid-template-columns:1fr;gap:28px;align-content:center;padding:32px 0 110px}
    .auth-story{gap:16px}
    .auth-story-copy{gap:9px}
    .auth-story h1{max-width:15ch;font-size:clamp(34px,10vw,48px)}
    .auth-story-copy>p,.auth-principles{display:none}
    .auth-card{border-radius:17px}
}
@media(max-width:480px){
    .auth-shell{width:calc(100vw - 20px);align-content:start;padding-top:22px}
    .auth-story h1{font-size:32px}
    .auth-card{padding:22px 18px}
    .auth-links{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
    .auth-submit,.auth-input{transition:none}
}