:root {
  color-scheme: dark;
  --bg: #070d17;
  --panel: #101d2e;
  --line: rgba(157, 185, 218, .18);
  --text: #e8f0fa;
  --muted: #8192a8;
  --cyan: #51d5d3;
  --red: #ff9aa4;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 50% -12%, rgba(78, 126, 203, .22), transparent 32rem), var(--bg); }
.login-shell { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.login-card { width: min(100%, 420px); padding: 36px; background: linear-gradient(145deg, rgba(17, 32, 51, .98), rgba(10, 20, 34, .98)); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 28px 80px rgba(0, 0, 0, .28); }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 28px; color: #07101c; background: var(--cyan); border-radius: 14px; font-size: 29px; font-weight: 900; transform: rotate(-7deg); }
.eyebrow { margin: 0 0 7px; color: #7f99b9; font-size: .72rem; font-weight: 800; letter-spacing: .15em; }
h1 { margin: 0; font-size: 2rem; letter-spacing: -.05em; }
.intro { margin: 12px 0 28px; color: var(--muted); line-height: 1.5; }
form { display: grid; gap: 9px; }
label { margin-top: 8px; color: #b8c8db; font-size: .85rem; }
input { width: 100%; padding: 13px 14px; color: var(--text); background: rgba(5, 12, 22, .7); border: 1px solid var(--line); border-radius: 10px; outline: none; font-size: 1rem; }
input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(81, 213, 211, .12); }
button { margin-top: 16px; padding: 13px 16px; color: #07101c; background: var(--cyan); border: 0; border-radius: 10px; cursor: pointer; font-weight: 750; }
button:hover:not(:disabled) { filter: brightness(1.08); }
button:disabled { cursor: wait; opacity: .65; }
.login-error { margin: 10px 0 0; padding: 10px 12px; color: var(--red); background: rgba(255, 125, 138, .1); border: 1px solid rgba(255, 125, 138, .25); border-radius: 8px; font-size: .86rem; }
.secure-note { margin: 26px 0 0; color: var(--muted); font-size: .75rem; }
.secure-note span { color: var(--cyan); }