:root{
    --bg:#f5f7fb;
    --surface:#fff;
    --surface-card:rgba(255,255,255,.90);
    --surface-soft:#fafbff;
    --text:#11172a;
    --muted:#697386;
    --border:#e5e7ef;
    --border-strong:#d8dce8;
    --primary:#673ff6;
    --primary-2:#7d4df9;
    --input-bg:#fff;
    --shadow:0 22px 60px rgba(31,38,72,.12);
    --shadow-soft:0 10px 28px rgba(31,38,72,.08);
    --hero-bg:radial-gradient(circle at 54% 52%,rgba(111,69,255,.14),transparent 30%),linear-gradient(180deg,#fff 0%,#fbfbff 100%);
}

html[data-theme="dark"]{
    --bg:#07101f;
    --surface:#0c1627;
    --surface-card:rgba(15,26,45,.88);
    --surface-soft:#111c2e;
    --text:#f7f9ff;
    --muted:#a6b1c5;
    --border:#26344a;
    --border-strong:#33435c;
    --primary:#7447ff;
    --primary-2:#8b5cff;
    --input-bg:#101b2d;
    --shadow:0 22px 60px rgba(0,0,0,.34);
    --shadow-soft:0 12px 32px rgba(0,0,0,.24);
    --hero-bg:radial-gradient(circle at 50% 53%,rgba(114,68,255,.28),transparent 27%),radial-gradient(circle at 20% 15%,rgba(64,119,255,.13),transparent 25%),linear-gradient(180deg,#07101f 0%,#0a1424 100%);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
    margin:0;
    font-family:"Inter",sans-serif;
    color:var(--text);
    background:var(--bg);
}
button,input{font:inherit}
a{text-decoration:none;color:inherit}

.auth-page{
    min-height:100vh;
    padding:18px;
    display:grid;
    place-items:center;
}

.auth-shell{
    width:min(1460px,100%);
    min-height:calc(100vh - 36px);
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(440px,.94fr);
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:22px;
    background:var(--surface);
    box-shadow:var(--shadow);
}

.auth-hero{
    position:relative;
    min-height:820px;
    overflow:hidden;
    padding:34px 46px 40px;
    display:flex;
    flex-direction:column;
    background:var(--hero-bg);
}

.auth-hero::after{
    content:"";
    position:absolute;
    left:-60px;right:-60px;bottom:-80px;
    height:240px;
    background-image:radial-gradient(circle,rgba(107,63,246,.16) 1px,transparent 1px);
    background-size:14px 14px;
    mask-image:linear-gradient(to top,#000,transparent 82%);
}

.brand-row{
    position:relative;
    z-index:4;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:50px;height:50px;color:#7047f5;display:grid;place-items:center}
.brand-mark svg{width:100%;height:100%}
.brand-name{font-size:24px;font-weight:800;letter-spacing:-.8px}
.brand-name b{color:#7c4cff}

.theme-switch{
    border:0;background:transparent;color:var(--text);
    display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;font-weight:600
}
.theme-icon{width:18px;height:18px;display:grid;place-items:center}
.theme-icon svg{width:18px;height:18px}
.moon-svg{display:none}
html[data-theme="dark"] .sun-svg{display:none}
html[data-theme="dark"] .moon-svg{display:block}
.track{
    width:46px;height:25px;padding:3px;border-radius:999px;
    background:linear-gradient(135deg,#6f46f6,#804cff);
    display:flex;justify-content:flex-end
}
.thumb{width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2)}
html[data-theme="dark"] .track{justify-content:flex-start}

.hero-copy{
    position:relative;z-index:3;
    max-width:610px;
    margin-top:84px
}
.hero-copy h1{
    margin:0;
    font-size:clamp(40px,4vw,58px);
    line-height:1.05;
    letter-spacing:-2.7px;
}
.hero-copy h1 span{
    background:linear-gradient(90deg,#4877ff,#7a3ff6);
    -webkit-background-clip:text;color:transparent
}
.hero-copy p{
    max-width:570px;
    margin:24px 0 0;
    color:var(--muted);
    font-size:15px;
    line-height:1.65
}

.mini-network{
    position:relative;
    z-index:3;
    width:470px;height:250px;
    margin-top:32px
}
.orbit{
    position:absolute;
    width:60px;height:60px;
    border-radius:50%;
    display:grid;place-items:center;
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:var(--shadow-soft)
}
.orbit svg{width:36px;height:36px}
.orbit-wa{left:34px;top:42px;color:#25D366}
.orbit-fb{right:28px;top:26px}
.mini-network::before,
.mini-network::after{
    content:"";position:absolute;height:1px;
    background:linear-gradient(90deg,transparent,rgba(113,69,247,.45),transparent);
    width:300px;left:90px;top:126px;transform-origin:left center
}
.mini-network::before{transform:rotate(-19deg)}
.mini-network::after{transform:rotate(19deg)}

.mini-bot{
    position:absolute;
    left:50%;top:52%;
    width:170px;height:170px;
    transform:translate(-50%,-50%);
    display:grid;place-items:center
}
.bot-glow{
    position:absolute;width:140px;height:140px;border-radius:50%;
    background:radial-gradient(circle at 50% 35%,#b9a7ff,#8864ff 46%,#6743dd 80%);
    box-shadow:0 0 0 16px rgba(116,73,245,.06),0 18px 38px rgba(103,63,246,.24)
}
.mini-bot svg{position:relative;z-index:2;width:93px;height:89px}

.hero-security{
    position:relative;z-index:4;
    margin-top:auto;
    display:flex;align-items:center;gap:9px;
    color:var(--muted);font-size:12px
}
.hero-security svg{width:26px;height:26px;color:var(--primary)}

.auth-side{
    position:relative;
    display:flex;flex-direction:column;
    padding:34px 58px;
    background:var(--surface)
}
.side-top{text-align:right;font-size:12.5px}
.side-top a{color:var(--primary);font-weight:700}

.form-wrap{
    width:min(520px,100%);
    margin:auto
}
.auth-card{
    padding:34px;
    border:1px solid var(--border);
    border-radius:20px;
    background:var(--surface-card);
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(14px)
}
.auth-card h2{
    margin:0 0 8px;
    font-size:28px;
    letter-spacing:-1px
}
.subtitle{
    margin:0 0 27px;
    color:var(--muted);
    font-size:13px;
    line-height:1.55
}

.field{margin-bottom:18px}
.field label{
    display:block;margin-bottom:8px;
    font-size:11.5px;font-weight:700
}
.input-wrap{position:relative}
.input-icon{
    position:absolute;left:14px;top:50%;
    width:19px;height:19px;
    transform:translateY(-50%);
    color:#8b95a8;display:grid;place-items:center
}
.input-icon svg{width:19px;height:19px}
.input-wrap input{
    width:100%;height:48px;
    padding:0 46px;
    color:var(--text);
    background:var(--input-bg);
    border:1px solid var(--border-strong);
    border-radius:9px;
    outline:0
}
.input-wrap input:focus{
    border-color:rgba(111,70,246,.7);
    box-shadow:0 0 0 4px rgba(111,70,246,.10)
}
.input-wrap input::placeholder{color:#9ca5b5}

.eye-toggle{
    position:absolute;right:9px;top:50%;
    transform:translateY(-50%);
    border:0;background:transparent;
    color:var(--primary);font-size:11px;font-weight:700;cursor:pointer
}

.primary-btn,
.secondary-btn{
    width:100%;height:48px;
    display:flex;align-items:center;justify-content:center;
    border-radius:8px;
    font-size:13px;font-weight:700;
    cursor:pointer
}
.primary-btn{
    border:0;color:#fff;
    background:linear-gradient(90deg,#603bea,#7d4df8);
    box-shadow:0 9px 18px rgba(103,63,246,.2)
}
.secondary-btn{
    border:1px solid var(--border);
    color:var(--text);
    background:var(--surface);
    margin-bottom:10px
}
.button-link{margin-top:10px}

.helper-line,
.helper-link{
    display:block;
    margin-top:18px;
    text-align:center;
    color:var(--muted);
    font-size:11.5px
}
.helper-line a,
.helper-link{color:var(--primary);font-weight:700}

.notice{
    padding:11px 13px;margin-bottom:17px;
    border-radius:9px;font-size:11.5px;line-height:1.45
}
.notice.error{color:#c63d4c;background:rgba(225,73,90,.08);border:1px solid rgba(225,73,90,.18)}
.notice.success{color:#158a61;background:rgba(24,183,119,.09);border:1px solid rgba(24,183,119,.18)}

.status-icon{
    width:82px;height:82px;
    margin:3px auto 20px;
    display:grid;place-items:center;
    border-radius:22px;
    color:var(--primary);
    background:rgba(113,69,247,.09)
}
.status-icon svg{width:62px;height:62px}
.center-copy{
    margin-bottom:23px;
    text-align:center;
    color:var(--muted);
    font-size:13px;
    line-height:1.65
}
.center-copy strong{color:var(--text)}

.otp-inputs input{
    width:100%;
    height:56px;
    text-align:center;
    letter-spacing:12px;
    font-size:22px;
    font-weight:700;
    color:var(--text);
    background:var(--input-bg);
    border:1px solid var(--border-strong);
    border-radius:9px;
    outline:0
}

@media(max-width:1050px){
    .auth-shell{grid-template-columns:1fr;width:min(760px,100%)}
    .auth-hero{min-height:650px}
    .auth-side{padding:42px 30px 50px}
    .form-wrap{margin:35px auto 0}
}
@media(max-width:640px){
    .auth-page{padding:0}
    .auth-shell{min-height:100vh;border-radius:0;border:0}
    .auth-hero{padding:22px;min-height:auto}
    .brand-name{font-size:20px}
    .brand-mark{width:42px;height:42px}
    .theme-switch #themeText{display:none}
    .hero-copy{margin-top:48px}
    .hero-copy h1{font-size:40px}
    .mini-network{transform:scale(.78);transform-origin:left center;margin-bottom:-35px}
    .hero-security{margin-top:8px}
    .auth-side{padding:28px 16px 42px}
    .side-top{text-align:center}
    .auth-card{padding:25px 18px}
}