:root { color-scheme: dark; --red:#d52c38; --gold:#eebc4b; }
* { box-sizing: border-box; }
body { min-width:320px; min-height:100vh; margin:0; padding:20px; display:grid; place-items:center; color:#fff; background:radial-gradient(circle at 50% 10%, rgba(213,44,56,.22), transparent 32%), linear-gradient(145deg,#171c24,#090c11); font-family:Inter,"Segoe UI",Arial,sans-serif; }
.login-box { width:100%; max-width:400px; padding:32px; background:rgba(23,28,36,.96); border:1px solid rgba(255,255,255,.09); border-top:3px solid var(--red); border-radius:14px; box-shadow:0 25px 70px rgba(0,0,0,.42); }
.login-box::before { content:"PW"; width:48px; height:48px; margin:0 auto 14px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--red),#8c1620); border-radius:12px; font-weight:900; box-shadow:0 10px 28px rgba(213,44,56,.28); }
.login-box h2 { margin:0 0 25px; color:#fff; text-align:center; font-size:23px; letter-spacing:-.03em; }
.login-box form { display:grid; gap:12px; }
.login-box input { width:100%; min-height:46px; padding:11px 13px; color:#fff; background:#0f1319; border:1px solid #333b48; border-radius:8px; outline:0; }
.login-box input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(213,44,56,.14); }
.login-box button { min-height:46px; margin-top:3px; color:#fff; background:var(--red); border:0; border-radius:8px; font-weight:850; cursor:pointer; }
.login-box button:hover { background:#b51f2b; box-shadow:0 9px 24px rgba(213,44,56,.24); }
.error { margin-bottom:15px; padding:11px 12px; color:#ffd8dc; background:rgba(213,44,56,.13); border:1px solid rgba(213,44,56,.35); border-radius:8px; }
@media (max-width:440px) { body{padding:12px}.login-box{padding:25px 20px} }