:root{
  --brand:#3B4CCA;--brand-light:#5B6BE6;--ink:#1A1F36;--ink-70:#3D4460;--ink-50:#6B7194;--ink-30:#A0A5BD;--ink-15:#D0D3E0;--ink-08:#E9EBF2;--ink-02:#F8F9FC;--white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',sans-serif;background:var(--ink-02);color:var(--ink)}
nav{background:linear-gradient(135deg,#3B4CCA,#5B6BE6);padding:0 40px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.logo{color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;gap:8px;text-decoration:none}
.logo svg{width:28px;height:28px}
.nv{display:flex;gap:28px;align-items:center}
.nv>a{color:rgba(255,255,255,.86);font-size:14px;font-weight:500;text-decoration:none}
.nv>a.active,.nv>a:hover{color:#fff}
.hero{background:linear-gradient(135deg,#3B4CCA 0%,#5B6BE6 42%,#7C8CF0 100%);padding:56px 24px 92px;position:relative;overflow:hidden;text-align:center}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.hero h1{position:relative;font-size:42px;line-height:1.1;font-weight:800;color:#fff;margin-bottom:12px}
.hero p{position:relative;font-size:18px;color:rgba(255,255,255,.86)}
.wrap{max-width:760px;margin:-62px auto 0;padding:0 24px 72px;position:relative;z-index:2}
.card{background:#fff;border:1px solid var(--ink-08);border-radius:16px;box-shadow:0 10px 34px rgba(26,31,54,.08);padding:28px}
.alert{display:none;padding:14px 16px;border-radius:10px;font-size:15px;line-height:1.55;font-weight:700;margin-bottom:14px;border:1px solid transparent}
.alert.error{background:#FEF2F2;color:#991B1B;border-color:rgba(239,68,68,.25)}
.alert.ok{background:#ECFDF5;color:#166534;border-color:rgba(34,197,94,.25)}
.mode-row{display:flex;gap:10px;margin-bottom:14px}
.mode-btn{flex:1;height:42px;border:1px solid var(--ink-15);border-radius:10px;background:#fff;color:var(--ink-70);font-weight:700;cursor:pointer}
.mode-btn.active{border-color:var(--brand);background:rgba(59,76,202,.08);color:var(--brand)}
.socials{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}
.social{height:44px;border:1px solid var(--ink-15);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:13px;color:var(--ink);text-decoration:none}
.social:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.social svg{width:16px;height:16px}
.sep{display:flex;align-items:center;gap:10px;margin:8px 0 10px;color:var(--ink-30);font-size:12px;font-weight:600}
.sep:before,.sep:after{content:'';height:1px;background:var(--ink-08);flex:1}
.field{margin-bottom:12px}
.label{display:block;font-size:12px;font-weight:700;color:var(--ink-70);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.input{width:100%;height:46px;border:1px solid var(--ink-15);border-radius:10px;padding:0 14px;background:#fff;color:var(--ink);font:500 14px 'DM Sans',sans-serif}
.password-wrap{position:relative}
.password-wrap .input{padding-right:84px}
.password-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);border:0;background:none;color:var(--brand);font:800 12px 'DM Sans',sans-serif;cursor:pointer;padding:6px 8px;border-radius:8px}
.password-toggle:hover{background:rgba(59,76,202,.08)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,76,202,.14)}
.auth-row{display:flex;justify-content:flex-end;margin:-2px 0 14px}
.auth-link{border:0;background:none;color:var(--brand);font:700 13px 'DM Sans',sans-serif;cursor:pointer;padding:0}
.auth-link[disabled]{opacity:.55;cursor:wait}
.checkline{display:flex;gap:8px;align-items:flex-start;margin:2px 0 14px;font-size:14px;color:var(--ink-70)}
.checkline a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.submit{width:100%;height:48px;border:none;border-radius:10px;background:linear-gradient(135deg,#3B4CCA,#5B6BE6);color:#fff;font-weight:800;font-size:18px;cursor:pointer;box-shadow:0 4px 16px rgba(59,76,202,.3)}
.submit:hover{filter:brightness(1.04)}
.hint{margin-top:10px;text-align:center;font-size:13px;color:var(--ink-50)}
.cta{margin-top:10px;text-align:center;font-size:14px;color:var(--ink-50)}
.cta button{border:0;background:none;color:var(--brand);font-weight:700;cursor:pointer}
.name-row,.terms-row{display:none}
@media(max-width:860px){.hero h1{font-size:34px}.nv{display:none}.socials{grid-template-columns:1fr}nav{padding:0 16px}}