:root { color-scheme:dark; /* Meridian Blue (dark), 21st.dev */ --bg:#14171c; --panel:#1c2027; --line:#353c48; --line-soft:#2b313c; --input:#0f1216; --text:#e6e9ef; --muted:#9097a6; --faint:#646b7a; --accent:#6b8db8; --accent-h:#7f9fc7; --accent-soft:rgba(107,141,184,.22); --on-accent:#0f1216; --danger:#e36a63;
  --font:Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:20px; background:var(--bg); color:var(--text); font:14px/1.5 var(--font); -webkit-font-smoothing:antialiased; }
.login { width:min(100%, 380px); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px; display:flex; flex-direction:column; gap:16px; box-shadow:0 18px 50px rgba(0,0,0,.55); }
.brand { display:flex; gap:12px; align-items:center; padding-bottom:16px; margin-bottom:4px; border-bottom:1px solid var(--line-soft); }
.brand b { font-size:15px; font-weight:650; letter-spacing:-.01em; }
.brand small { display:block; color:var(--muted); font-size:12px; margin-top:1px; }
.logo { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--accent); color:var(--on-accent); font-weight:750; font-size:17px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 14px rgba(107,141,184,.25); }
label { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:550; color:var(--muted); }
input { background:var(--input); border:1px solid var(--line); color:var(--text); height:38px; padding:0 12px; border-radius:8px; font:14px var(--font); transition:border-color .12s, box-shadow .12s; }
input:hover { border-color:#46505f; }
input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
button { height:38px; margin-top:4px; background:var(--accent); color:var(--on-accent); border:0; border-radius:8px; font:600 14px var(--font); cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,.15) inset; transition:background .12s; }
button:hover { background:var(--accent-h); }
button:focus-visible { outline:2px solid rgba(136,168,201,.6); outline-offset:2px; }
.err { color:var(--danger); min-height:1.2em; margin:0; font-size:13px; }