:root{color-scheme:dark;--bg:#090f19;--surface:#101a28;--border:#233044;--text:#e7edf6;--muted:#91a0b6;--subtle:#6e8099;--cyan:#54c9d0;--red:#f27987;font-family:Inter,'Segoe UI',sans-serif;font-size:13px}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--text);line-height:1.5;padding:20px}
.login-shell{width:100%;max-width:380px}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:32px 28px 28px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.brand-mark{display:flex;gap:3px;align-items:center;justify-content:center;background:#122c35;border:1px solid #25505a;border-radius:9px;min-width:35px;height:39px;color:var(--cyan);flex-shrink:0}
.brand-mark i{display:block;background:currentColor;width:3px;height:14px;position:relative}
.brand-mark i:before{content:'';position:absolute;width:1px;height:24px;top:-5px;left:1px;background:currentColor}
.brand-mark i:nth-child(2){height:9px;margin-bottom:12px}
.brand-mark i:nth-child(3){height:12px;margin-top:7px}
.brand-copy strong{display:block;font-size:13px;line-height:1.45;font-weight:600}
.brand-copy small{display:block;font-size:10px;color:var(--subtle);margin-top:4px}
h1{font-size:20px;font-weight:650;letter-spacing:-.3px;margin-bottom:6px}
.login-caption{color:var(--muted);font-size:12px;margin-bottom:20px}
.login-error{background:rgba(242,121,135,.1);border:1px solid rgba(242,121,135,.35);color:var(--red);font-size:12px;border-radius:6px;padding:9px 12px;margin-bottom:16px}
form{display:flex;flex-direction:column;gap:7px}
label{font-size:11px;font-weight:550;color:var(--muted);letter-spacing:.2px}
input{width:100%;background:#0c1420;border:1px solid var(--border);border-radius:6px;color:var(--text);font:inherit;font-size:13px;padding:10px 12px;outline:none;transition:border-color .15s,box-shadow .15s}
input:hover{border-color:#344258}
input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(84,201,208,.15)}
button{margin-top:14px;width:100%;min-height:40px;border:0;border-radius:6px;background:var(--cyan);color:#062228;font:inherit;font-size:13px;font-weight:700;letter-spacing:.2px;cursor:pointer;transition:filter .15s,transform .05s}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-width:420px){.login-card{padding:26px 20px 22px}}