:root { --yellow:#ffd51f; --text:#fff8d9; --muted:#aaa58f; --line:#353227; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:#080808; font-family:"DM Sans",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.auth-visual { min-height:100vh; padding:38px 6vw; display:flex; flex-direction:column; position:relative; overflow:hidden; background:radial-gradient(circle at 70% 55%,rgba(255,213,31,.13),transparent 28%),linear-gradient(145deg,#121107,#050505 65%); border-right:1px solid #28261e; }
.auth-visual::after { content:""; position:absolute; width:520px; height:520px; right:-160px; bottom:-180px; border:1px solid rgba(255,213,31,.12); border-radius:50%; }
.auth-brand { display:flex; align-items:center; gap:11px; color:white; text-decoration:none; font:700 21px "Space Grotesk"; position:relative; z-index:2; }
.auth-logo { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--yellow); transform:rotate(-5deg); box-shadow:0 7px 22px rgba(255,213,31,.2); }
.auth-logo svg { width:29px; fill:none; stroke:#080808; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.auth-brand > span:last-child { line-height:.85; }
.auth-brand > span > span { color:var(--yellow); }
.auth-brand small { display:block; margin-top:7px; color:#817c6c; font:700 8px "DM Sans"; letter-spacing:3px; }
.auth-promise { width:min(590px,100%); margin:auto 0; position:relative; z-index:2; }
.auth-promise > span,.auth-kicker { color:var(--yellow); font-size:8px; font-weight:900; letter-spacing:2px; }
.auth-promise h1 { margin:13px 0; font:700 clamp(42px,5vw,66px)/1.02 "Space Grotesk"; letter-spacing:-2.5px; }
.auth-promise h1 em { color:var(--yellow); font-style:normal; }
.auth-promise > p { max-width:510px; color:var(--muted); font-size:13px; line-height:1.7; }
.auth-preview { width:min(430px,90%); height:430px; margin-top:32px; border:1px solid #49421e; border-radius:20px; overflow:hidden; position:relative; background:radial-gradient(circle at 50% 58%,rgba(255,213,31,.12),transparent 45%),#111; }
.auth-preview img { width:100%; height:100%; object-fit:cover; object-position:center top; filter:brightness(.78); }
.auth-preview > div { position:absolute; left:16px; right:16px; bottom:14px; padding:11px; display:flex; align-items:center; gap:10px; border:1px solid #4b4526; border-radius:11px; background:rgba(10,10,10,.9); }
.auth-preview i { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:#111; background:var(--yellow); font-style:normal; font-weight:900; }
.auth-preview strong,.auth-preview small { display:block; }
.auth-preview strong { font-size:9px; }
.auth-preview small { margin-top:2px; color:var(--muted); font-size:7px; }
.auth-copyright { color:#555247; font-size:8px; position:relative; z-index:2; }
.auth-panel { min-height:100vh; padding:32px 7vw; display:flex; flex-direction:column; justify-content:center; position:relative; }
.back-home { position:absolute; top:34px; right:42px; color:#8f8a79; text-decoration:none; font-size:9px; }
.auth-card { width:min(470px,100%); margin:auto; }
.auth-tabs { margin-bottom:34px; padding:4px; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:12px; background:#101010; }
.auth-tabs button { border:0; border-radius:9px; padding:10px; color:#858173; background:transparent; font-size:9px; font-weight:800; }
.auth-tabs button.active { color:#111; background:var(--yellow); }
.auth-form { display:none; }
.auth-form.active { display:block; }
.auth-form h2 { margin:7px 0; font:700 30px "Space Grotesk"; letter-spacing:-1px; }
.auth-form > p { margin:0 0 27px; color:var(--muted); font-size:10px; }
.auth-form label { display:block; margin:15px 0 7px; color:#d5cfba; font-size:9px; font-weight:800; }
.auth-form > input,.password-field input,.name-grid input { width:100%; min-width:0; padding:13px; border:1px solid var(--line); border-radius:10px; outline:0; color:var(--text); background:#0c0c0c; font-size:10px; }
.auth-form input:focus { border-color:#d9b718; box-shadow:0 0 0 3px rgba(255,213,31,.09); }
.password-label { display:flex; align-items:end; justify-content:space-between; }
.forgot-trigger,.switch-register,.switch-login,.reset-back { padding:0; border:0; color:var(--yellow); background:transparent; font-size:8px; }
.password-field { position:relative; }
.password-field input { padding-right:44px; }
.toggle-password { position:absolute; right:5px; top:5px; bottom:5px; width:36px; border:0; color:#777265; background:transparent; }
.remember { display:flex!important; align-items:flex-start; gap:8px; color:#8d897a!important; font-weight:500!important; line-height:1.45; }
.remember input { margin:2px 0 0; accent-color:var(--yellow); }
.name-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.auth-submit { width:100%; margin-top:16px; padding:13px 15px; display:flex; justify-content:space-between; border:0; border-radius:11px; color:#111; background:var(--yellow); font-size:10px; font-weight:900; box-shadow:0 12px 30px rgba(255,213,31,.12); }
.auth-form > small { display:block; margin-top:18px; text-align:center; color:#777265; font-size:8px; }
.auth-message { display:none; margin-top:12px; padding:10px; border-radius:9px; font-size:8px; line-height:1.5; }
.auth-message.show { display:block; }
.auth-message.error { border:1px solid #663838; color:#ffb1b1; background:#291010; }
.auth-message.success { border:1px solid #4b4921; color:#e9dd83; background:#201d08; }
.password-strength { margin-top:8px; display:grid; grid-template-columns:repeat(3,1fr) auto; gap:5px; align-items:center; }
.password-strength i { height:3px; border-radius:99px; background:#302e27; }
.password-strength i.on { background:var(--yellow); }
.password-strength span { margin-left:4px; color:#69665b; font-size:7px; }
.reset-back { margin-bottom:23px; }
.auth-security { display:flex; justify-content:center; flex-wrap:wrap; gap:17px; color:#615e54; font-size:7px; }
@media(max-width:900px){.auth-shell{grid-template-columns:1fr}.auth-visual{display:none}.auth-panel{padding:80px 22px 30px}.back-home{top:27px;right:22px}}
@media(max-width:520px){.auth-tabs{margin-bottom:27px}.auth-form h2{font-size:26px}.name-grid{grid-template-columns:1fr}.auth-security{gap:8px}}