:root { color-scheme:dark; --bg:#080d12; --panel:#101821; --line:#263645; --line-strong:#365064; --text:#edf4f8; --muted:#9aaaba; --accent:#3dd6a4; --accent2:#58b8ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:linear-gradient(180deg,#071018 0%,var(--bg) 52%,#070b10 100%); color:var(--text); font-family:Inter,"Segoe UI",Arial,sans-serif; }
.card { width:min(420px,calc(100vw - 32px)); background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)),var(--panel); border:1px solid rgba(132,156,174,.24); border-radius:8px; padding:26px; box-shadow:0 22px 58px rgba(0,0,0,.32); animation:panelIn .22s ease; }
h1 { margin:0 0 8px; font-size:24px; font-weight:760; }
p { margin:0 0 20px; color:var(--muted); }
label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
input { width:100%; background:#0a1118; border:1px solid var(--line); border-radius:7px; color:var(--text); padding:11px; font:inherit; outline:none; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }
input:hover { border-color:var(--line-strong); }
input:focus { border-color:var(--accent2); box-shadow:0 0 0 3px rgba(88,184,255,.14); background:#0b141c; }
button.login { width:100%; margin-top:16px; min-height:40px; border:0; border-radius:7px; background:linear-gradient(135deg,var(--accent),#58d3ff); font-weight:760; cursor:pointer; color:#04110f; transition:transform .16s ease,box-shadow .16s ease; }
button.login:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(61,214,164,.18); }
button.login:active { transform:translateY(0); }
.password-wrap { position:relative; }
.password-wrap input { padding-right:48px; }
.eye { position:absolute; right:6px; top:6px; width:34px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; border:1px solid var(--line); background:#162331; color:var(--accent2); cursor:pointer; padding:0; transition:color .16s ease,border-color .16s ease,background .16s ease; }
.eye svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.eye:hover { color:var(--accent); border-color:#3b5365; background:#1a2a39; }
.error { border:1px solid #7d3336; background:#301619; color:#ffd7d7; padding:10px 12px; border-radius:7px; margin-bottom:14px; }
@keyframes panelIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }