:root[data-theme="dark"]{
--bg:#0a0e1a;--bg2:#0f1526;--surface:#151e35;--surface2:#1c2640;
--border:rgba(255,255,255,0.07);--border-focus:rgba(149,117,205,.55);
--text:#e8e4f0;--muted:#7a7f96;--accent:#9575cd;--accent2:#b39ddb;
--accentbg:rgba(149,117,205,0.1);--input-bg:rgba(255,255,255,.04);
--glow:rgba(149,117,205,.18);--error:#e05c5c;--success:#4caf7a;
}
:root[data-theme="light"]{
--bg:#f7f5ff;--bg2:#eeeaf7;--surface:#ffffff;--surface2:#f0ecfb;
--border:rgba(0,0,0,0.09);--border-focus:rgba(108,63,196,.55);
--text:#1a1528;--muted:#6b6480;--accent:#6c3fc4;--accent2:#8860d0;
--accentbg:rgba(108,63,196,.08);--input-bg:rgba(0,0,0,.025);
--glow:rgba(108,63,196,.14);--error:#c0392b;--success:#2e7d4f;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

body {
font-family:'Outfit',sans-serif;
background:var(--bg);
color:var(--text);
min-height:100vh;
display:grid;
grid-template-columns:1fr 1fr;
transition:background .5s,color .5s;
overflow:hidden;
}

/* ── RIGHT PANEL ── */
.right {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:2.5rem 4rem;
position:relative;
overflow-y:auto;
animation:slideIn .6s ease both;
}

@keyframes slideIn { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }

/* Theme toggle */
.theme-btn-corner {
position:absolute; top:2rem; left:2rem;
width:40px; height:22px;
background:var(--surface2); border:1px solid var(--border);
border-radius:11px; cursor:pointer; transition:background .4s;
}
.theme-btn-corner::after {
content:''; position:absolute; top:2px; left:2px;
width:16px; height:16px; border-radius:50%;
background:var(--accent);
transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
[data-theme="light"] .theme-btn-corner::after { transform:translateX(18px); }

/* Form wrap */
.form-wrap { width:100%; max-width:400px; }

.form-eye {
font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--accent); margin-bottom:.5rem; font-weight:600;
}

.form-h {
font-family:'Playfair Display',serif;
font-size:2.5rem; font-weight:700; line-height:1.1; margin-bottom:.5rem;
}
.form-h em { font-style:italic; color:var(--accent); }

.form-sub { font-size:.85rem; color:var(--muted); margin-bottom:2rem; }
.form-sub a { color:var(--accent); text-decoration:none; font-weight:500; }
.form-sub a:hover { text-decoration:underline; }

/* Step indicator */
.steps-indicator { display:flex; align-items:center; gap:.5rem; margin-bottom:2rem; }
.si-step {
display:flex; align-items:center; gap:.5rem;
font-size:.75rem; color:var(--muted); font-weight:500; transition:color .4s;
}
.si-step.active { color:var(--accent); }
.si-dot {
width:26px; height:26px; border-radius:50%;
border:1.5px solid var(--border);
display:flex; align-items:center; justify-content:center;
font-size:.72rem; font-weight:600; flex-shrink:0;
transition:background .4s,border-color .4s,color .4s;
}
.si-step.active .si-dot { background:var(--accent); border-color:var(--accent); color:#fff; }
.si-line { flex:1; height:1px; background:var(--border); }

/* Fields */
.field { margin-bottom:1.1rem; }
.field label {
display:block; font-size:.72rem; letter-spacing:.1em;
text-transform:uppercase; color:var(--muted);
margin-bottom:.4rem; font-weight:600; transition:color .3s;
}
.field:focus-within label { color:var(--accent); }

.inp-wrap { position:relative; }

input[type=email],
input[type=password],
input[type=text] {
width:100%;
padding:.78rem 1rem .78rem 2.55rem;
background:var(--input-bg);
border:1px solid var(--border);
border-radius:8px;
color:var(--text);
font-family:'Outfit',sans-serif;
font-size:.88rem;
outline:none;
transition:border-color .3s,box-shadow .3s,background .3s;
}
input:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--glow); }
input::placeholder { color:var(--muted); }

.ico {
position:absolute; left:.8rem; top:50%;
transform:translateY(-50%);
font-size:.85rem; color:var(--muted);
pointer-events:none; transition:color .3s;
}
.inp-wrap:focus-within .ico { color:var(--accent); }

.pw-toggle {
position:absolute; right:.8rem; top:50%;
transform:translateY(-50%);
background:none; border:none; cursor:pointer;
color:var(--muted); font-size:.78rem;
font-family:'Outfit',sans-serif; font-weight:500;
transition:color .3s;
}
.pw-toggle:hover { color:var(--accent); }

/* Submit button */
.btn-submit {
width:100%; padding:.9rem;
background:var(--accent); color:#fff;
font-family:'Outfit',sans-serif;
font-size:.88rem; font-weight:600; letter-spacing:.04em;
border:none; border-radius:8px; cursor:pointer;
transition:background .3s,transform .2s,box-shadow .3s;
box-shadow:0 4px 20px var(--glow);
position:relative; overflow:hidden;
margin-top:.5rem;
}
.btn-submit::before {
content:''; position:absolute;
top:50%; left:50%;
width:0; height:0;
background:rgba(255,255,255,.15); border-radius:50%;
transform:translate(-50%,-50%);
transition:width .5s,height .5s;
}
.btn-submit:hover::before { width:400px; height:400px; }
.btn-submit:hover { background:var(--accent2); transform:translateY(-1px); box-shadow:0 6px 28px var(--glow); }
.btn-submit:active { transform:translateY(0); }

/* Divider */
.divider {
display:flex; align-items:center; gap:.8rem;
margin:1.4rem 0; color:var(--muted);
font-size:.75rem; letter-spacing:.1em;
}
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* Social buttons */
.socials { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.soc-btn {
display:flex; align-items:center; justify-content:center; gap:.55rem;
padding:.7rem; background:var(--input-bg);
border:1px solid var(--border); border-radius:8px;
cursor:pointer; color:var(--text);
font-family:'Outfit',sans-serif; font-size:.81rem; font-weight:500;
transition:border-color .3s,background .3s,transform .2s;
}
.soc-btn:hover { border-color:var(--accent); background:var(--accentbg); transform:translateY(-1px); }
.soc-icon { width:18px; height:18px; }

/* ── LEFT PANEL ── */
.left {
position:relative; overflow:hidden;
display:flex; flex-direction:column; justify-content:center; padding:3rem;
}
.left-bg {
position:absolute; inset:0;
background-image:url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=900&q=80');
background-size:cover; background-position:center;
transition:transform .8s cubic-bezier(.25,.46,.45,.94);
}
.left:hover .left-bg { transform:scale(1.04); }
.left-ov {
position:absolute; inset:0;
background:linear-gradient(135deg,rgba(10,14,26,.96) 0%,rgba(10,14,26,.7) 50%,rgba(10,14,26,.85) 100%);
}
.left-logo {
position:absolute; top:2.5rem; right:2.5rem; z-index:2;
font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700;
color:#e8e4f0; text-decoration:none;
}
.left-logo span { color:var(--accent); font-style:italic; }
.left-content { position:relative; z-index:2; }
.left-headline {
font-family:'Playfair Display',serif;
font-size:2.6rem; font-weight:700; color:#e8e4f0;
line-height:1.2; margin-bottom:1.5rem;
}
.left-headline em { color:var(--accent); font-style:italic; }

.perks { display:flex; flex-direction:column; gap:1rem; }
.perk { display:flex; align-items:flex-start; gap:.85rem; }
.perk-icon {
width:36px; height:36px; border-radius:8px;
background:rgba(149,117,205,.18); border:1px solid rgba(149,117,205,.2);
display:flex; align-items:center; justify-content:center;
font-size:.95rem; flex-shrink:0; margin-top:.05rem;
}
.perk-text { color:rgba(232,228,240,.75); font-size:.88rem; line-height:1.7; }
.perk-title { color:#e8e4f0; font-weight:600; font-size:.9rem; display:block; margin-bottom:.1rem; }

/* Responsive */
@media(max-width:768px){
body { grid-template-columns:1fr; overflow:auto; }
.left { display:none; }
.right { padding:2rem 1.5rem; }
}