:root { --red:#e21b23; --dark:#111315; --muted:#60656a; --line:#d8dadd; --white:#fff; }
* { box-sizing:border-box; }
body { position:relative; isolation:isolate; margin:0; min-height:100vh; display:grid; place-items:center; overflow-x:hidden; background:#070809 url("auth-flag.png") center/cover fixed no-repeat; color:var(--dark); font-family:"DM Sans",sans-serif; }
body::before { content:""; position:fixed; inset:0; z-index:-2; background:linear-gradient(112deg,rgba(0,0,0,.18),rgba(0,0,0,.72) 56%,rgba(0,0,0,.42)); }
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 82% 88%,rgba(226,27,35,.24),transparent 34%),linear-gradient(90deg,rgba(226,27,35,.10),transparent 30%); }
.auth-shell { position:relative; width:min(1080px,calc(100% - 32px)); min-height:650px; display:grid; grid-template-columns:1fr 0.92fr; overflow:hidden; border:1px solid rgba(255,255,255,.24); border-radius:14px; background:rgba(255,255,255,.96); box-shadow:0 35px 100px rgba(0,0,0,.62); backdrop-filter:blur(4px); }
.auth-shell::after { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(180deg,#ff4a50,var(--red),#8d090e); }
.auth-story { padding:55px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(145deg,rgba(10,11,12,.93),rgba(31,34,36,.90)); color:#fff; }
.auth-story img { width:240px; height:auto; margin-bottom:45px; }
.eyebrow { margin:0 0 12px; color:#ff4a50; font:800 11px Manrope,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.auth-story h1 { max-width:520px; margin:0 0 16px; font:800 clamp(34px,4vw,52px)/1.04 Manrope,sans-serif; letter-spacing:-.045em; }
.auth-story > p { max-width:500px; color:#c9ccce; font-size:16px; line-height:1.7; }
.auth-story ul { margin:22px 0 0; padding:0; display:grid; gap:12px; list-style:none; color:#eef0f1; font-size:13px; }
.auth-story li:before { content:""; width:8px; height:8px; margin-right:10px; display:inline-block; border-radius:50%; background:var(--red); }
.auth-card { padding:52px 48px; align-self:center; background:rgba(255,255,255,.94); }
.auth-tabs { margin-bottom:34px; display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.auth-tabs a { padding:12px; color:var(--muted); text-align:center; text-decoration:none; font-size:13px; font-weight:800; }
.auth-tabs a.active { color:var(--red); border-bottom:3px solid var(--red); }
.auth-card h2 { margin:0 0 24px; font:800 27px/1.2 Manrope,sans-serif; letter-spacing:-.035em; }
.auth-card form { display:grid; gap:16px; }
.auth-card label { display:grid; gap:6px; color:#303438; font-size:11px; font-weight:800; }
.auth-card input { width:100%; padding:12px 13px; border:1px solid #c8cbce; border-radius:6px; background:#fafafa; font:500 14px "DM Sans",sans-serif; }
.auth-card input:focus { outline:3px solid rgba(226,27,35,.13); border-color:var(--red); }
.field-row { display:grid; grid-template-columns:1.35fr .65fr; gap:12px; }
.auth-card button { min-height:50px; margin-top:4px; border:0; border-radius:6px; background:var(--red); color:#fff; font:800 13px Manrope,sans-serif; cursor:pointer; }
.auth-card button:hover { background:#b90f16; }
.auth-card small { color:#777d82; font-size:10px; line-height:1.5; text-align:center; }
.auth-error { margin-bottom:18px; padding:11px 13px; border-left:3px solid var(--red); border-radius:4px; background:#fff0f1; color:#9b1016; font-size:12px; }
@media (max-width:760px) { body{background-position:34% center}.auth-shell{margin:20px 0;display:block}.auth-story{padding:30px 34px}.auth-story img{width:170px;margin-bottom:20px}.auth-story h1{font-size:34px}.auth-story ul{display:none}.auth-card{padding:34px 25px}.field-row{grid-template-columns:1fr} }