:root{
    --bg:#f5f7fb;
    --surface:#ffffff;
    --surface-soft:#fafbff;
    --surface-card:rgba(255,255,255,.90);
    --text:#11172a;
    --muted:#697386;
    --border:#e5e7ef;
    --border-strong:#d8dce8;
    --primary:#673ff6;
    --primary-2:#7d4df9;
    --purple-soft:#f2eeff;
    --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%);
    --input-bg:#fff;
    --feature-bg:rgba(255,255,255,.92);
}

html[data-theme="dark"]{
    --bg:#07101f;
    --surface:#0c1627;
    --surface-soft:#111c2e;
    --surface-card:rgba(15,26,45,.88);
    --text:#f7f9ff;
    --muted:#a6b1c5;
    --border:#26344a;
    --border-strong:#33435c;
    --primary:#7447ff;
    --primary-2:#8b5cff;
    --purple-soft:#1e1742;
    --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%);
    --input-bg:#101b2d;
    --feature-bg:rgba(10,20,36,.84);
}

*{box-sizing:border-box}

html,body{min-height:100%}

body{
    margin:0;
    font-family:"Inter",sans-serif;
    background:radial-gradient(circle at 5% 10%,rgba(106,65,246,.08),transparent 22%),var(--bg);
    color:var(--text);
    transition:background .25s ease,color .25s ease;
}

button,input{font:inherit}
a{color:inherit;text-decoration:none}

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

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

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

.hero::after{
    content:"";
    position:absolute;
    inset:auto -90px -145px -90px;
    height:280px;
    background:radial-gradient(circle,rgba(107,63,246,.18) 1px,transparent 1px);
    background-size:14px 14px;
    mask-image:linear-gradient(to top,#000,transparent 85%);
    pointer-events:none;
}

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

.brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
}

.brand-mark{
    width:50px;
    height:50px;
    color:#7047f5;
    display:grid;
    place-items:center;
    filter:drop-shadow(0 7px 13px rgba(107,69,245,.16));
}

.brand-mark svg{width:100%;height:100%}

.brand-name{
    font-size:25px;
    font-weight:800;
    letter-spacing:-.8px;
}

.brand-name b{color:#7c4cff}

.theme-switch{
    border:0;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:600;
    padding:8px;
}

.theme-icon{
    width:19px;
    height:19px;
    display:grid;
    place-items:center;
}

.theme-icon svg{width:19px;height:19px}
.moon-svg{display:none}
html[data-theme="dark"] .sun-svg{display:none}
html[data-theme="dark"] .moon-svg{display:block}

.theme-switch .track{
    width:47px;
    height:26px;
    border-radius:30px;
    background:linear-gradient(135deg,#6f46f6,#804cff);
    padding:3px;
    display:flex;
    justify-content:flex-end;
    transition:.25s ease;
}

.theme-switch .thumb{
    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 5px rgba(0,0,0,.18);
    transition:.25s ease;
}

html[data-theme="dark"] .theme-switch .track{justify-content:flex-start}

.hero-content{
    position:relative;
    z-index:2;
    max-width:650px;
    margin-top:72px;
}

.hero h1{
    font-size:clamp(38px,4vw,60px);
    line-height:1.05;
    letter-spacing:-2.7px;
    margin:0;
    max-width:630px;
}

.hero h1 .gradient{
    background:linear-gradient(90deg,#4877ff,#7a3ff6);
    -webkit-background-clip:text;
    color:transparent;
}

.hero-copy{
    font-size:16px;
    line-height:1.65;
    color:var(--muted);
    margin:24px 0 20px;
    max-width:570px;
}

.network{
    width:460px;
    height:230px;
    position:relative;
    margin-top:4px;
}

.network-lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.network-lines path{
    fill:none;
    stroke:rgba(115,77,245,.33);
    stroke-width:1.3;
    stroke-dasharray:4 7;
}

.channel-bubble{
    position:absolute;
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:var(--shadow-soft);
    display:grid;
    place-items:center;
    z-index:4;
}

.channel-bubble svg{width:35px;height:35px}
.wa{left:42px;top:20px;color:#25D366}
.fb{right:32px;top:8px}
.ig{left:30px;bottom:10px}
.web{right:20px;bottom:10px;color:#7047f5}

.bot-stage{
    position:absolute;
    left:50%;
    top:52%;
    width:190px;
    height:185px;
    transform:translate(-50%,-50%);
    display:grid;
    place-items:center;
}

.halo{
    position:absolute;
    border-radius:50%;
}

.halo-1{
    width:150px;
    height:150px;
    background:radial-gradient(circle,rgba(139,88,255,.30),rgba(110,65,230,.08) 65%,transparent 72%);
}

.halo-2{
    width:120px;
    height:120px;
    background:radial-gradient(circle at 50% 38%,#bdaeff 0%,#8b68ff 45%,#6845e0 100%);
    box-shadow:0 0 38px rgba(130,86,255,.58);
}

.hero-bot{
    position:relative;
    z-index:4;
    width:96px;
    height:90px;
}

.platform{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    border-radius:50%;
    background:linear-gradient(180deg,#8d6aff,#4d2fc1);
}

.platform-1{
    z-index:2;
    bottom:11px;
    width:154px;
    height:31px;
}

.platform-2{
    z-index:1;
    bottom:2px;
    width:178px;
    height:34px;
    opacity:.58;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    max-width:610px;
    margin-top:6px;
}

.feature-card{
    background:var(--feature-bg);
    border:1px solid var(--border);
    border-radius:15px;
    padding:16px;
    min-height:112px;
    box-shadow:var(--shadow-soft);
    display:grid;
    grid-template-columns:40px 1fr;
    gap:11px;
    backdrop-filter:blur(10px);
}

.feature-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:9px;
}

.feature-icon svg{width:24px;height:24px}
.feature-icon.purple{color:#7550f5;background:rgba(117,80,245,.12)}
.feature-icon.blue{color:#338af3;background:rgba(51,138,243,.12)}
.feature-icon.green{color:#27c679;background:rgba(39,198,121,.12)}
.feature-icon.violet{color:#7b50f8;background:rgba(123,80,248,.12)}

.feature-card strong{
    display:block;
    margin-top:3px;
    font-size:13px;
}

.feature-card p{
    margin:9px 0 0;
    color:var(--muted);
    line-height:1.5;
    font-size:12px;
}

.security{
    margin-top:auto;
    padding-top:26px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-size:12px;
    font-weight:500;
    position:relative;
    z-index:2;
}

.shield{
    width:27px;
    height:27px;
    color:var(--primary);
    display:grid;
    place-items:center;
}

.shield svg{width:25px;height:25px}

.register-side{
    background:radial-gradient(circle at 60% 10%,rgba(115,68,255,.06),transparent 28%),var(--surface);
    padding:34px 58px;
    display:flex;
    flex-direction:column;
    position:relative;
}

.signin-top{
    text-align:right;
    color:var(--muted);
    font-size:13px;
}

.signin-top a{
    color:var(--primary);
    font-weight:700;
    margin-left:4px;
}

.register-wrap{
    width:min(600px,100%);
    margin:auto;
}

.register-card{
    border:1px solid var(--border);
    border-radius:20px;
    padding:30px 34px;
    background:var(--surface-card);
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(14px);
}

.register-card h2{
    font-size:28px;
    letter-spacing:-1px;
    margin:0 0 8px;
}

.subtitle{
    color:var(--muted);
    margin:0 0 23px;
    font-size:14px;
}

.field{margin-bottom:13px}

.field label{
    display:block;
    margin-bottom:7px;
    font-size:11.5px;
    font-weight:700;
}

.input-wrap{position:relative}

.left-icon{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:19px;
    height:19px;
    color:#8b95a8;
    display:grid;
    place-items:center;
    pointer-events:none;
}

.left-icon svg{width:19px;height:19px}

.input-wrap input{
    width:100%;
    height:46px;
    border:1px solid var(--border-strong);
    background:var(--input-bg);
    color:var(--text);
    border-radius:9px;
    padding:0 45px;
    outline:none;
    transition:border .2s ease,box-shadow .2s ease;
}

.input-wrap input::placeholder{color:#9ca5b5}

.input-wrap input:focus{
    border-color:rgba(111,70,246,.7);
    box-shadow:0 0 0 4px rgba(111,70,246,.10);
}

.eye-btn{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    padding:0;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#8b95a8;
    cursor:pointer;
}

.eye-btn svg{width:19px;height:19px}
.eye-off{display:none}
.eye-btn.showing .eye-open{display:none}
.eye-btn.showing .eye-off{display:block}

.terms{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:5px;
    color:var(--muted);
    font-size:11.5px;
    line-height:1.5;
}

.terms input{
    width:15px;
    height:15px;
    margin:1px 0 0;
    accent-color:var(--primary);
}

.terms a{color:var(--primary)}

.action-row{
    display:grid;
    grid-template-columns:1.55fr 1fr 1fr;
    gap:9px;
    margin-top:17px;
}

.create-account-btn,
.social-btn{
    height:47px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.create-account-btn{
    border:0;
    color:#fff;
    background:linear-gradient(90deg,#603bea,#7d4df8);
    box-shadow:0 8px 18px rgba(103,63,246,.22);
}

.social-btn{
    border:1px solid var(--border);
    color:var(--text);
    background:var(--surface);
}

.social-btn:hover{border-color:#7045f5}

.google-svg{width:19px;height:19px}
.fb-svg{width:20px;height:20px}

.trial-card{
    margin-top:20px;
    border:1px solid rgba(115,70,246,.30);
    border-radius:13px;
    padding:16px;
    background:linear-gradient(115deg,rgba(106,65,246,.07),rgba(137,84,255,.02)),var(--surface-soft);
    display:grid;
    grid-template-columns:54px 1fr;
    gap:14px;
    align-items:center;
}

.rocket{
    width:52px;
    height:52px;
    border-radius:15px;
    background:var(--purple-soft);
    display:grid;
    place-items:center;
    color:var(--primary);
}

.rocket svg{width:42px;height:42px}

.trial-card strong{
    display:block;
    font-size:13px;
    margin-bottom:4px;
}

.trial-card p{
    color:var(--muted);
    font-size:11px;
    margin:0;
    line-height:1.5;
}

.notice{
    border-radius:9px;
    padding:11px 13px;
    margin-bottom:16px;
    font-size:12px;
    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);
}

@media(max-width:1100px){
    .auth-shell{
        grid-template-columns:1fr;
        width:min(780px,100%);
    }

    .hero{min-height:auto;padding-bottom:36px}
    .hero-content{margin-top:46px}
    .register-side{padding:32px 38px 46px}
    .register-wrap{margin:42px auto 12px}
}

@media(max-width:640px){
    .page{padding:0}
    .auth-shell{min-height:100vh;border:0;border-radius:0}
    .hero{padding:22px}
    .brand-name{font-size:20px}
    .brand-mark{width:42px;height:42px}
    .hero-content{margin-top:40px}
    .hero h1{font-size:40px;letter-spacing:-1.7px}
    .network{transform:scale(.82);transform-origin:left center;margin-bottom:-18px}
    .feature-grid{grid-template-columns:1fr}
    .register-side{padding:25px 18px 36px}
    .signin-top{text-align:center}
    .register-card{padding:24px 18px}
    .action-row{grid-template-columns:1fr}
}