/* Ops console login page — the same graphite palette as the console itself (deployments/ops-console). */
:root {
  color-scheme: dark;
  --chassis: #16171a; --bezel: #1c1e22; --bezel-2: #212328; --key-on: #2c2f35;
  --grid: #26292e; --axis: #3b3f46; --track: #2b2e34; --line: #2a2d32; --line-strong: #3b3f46;
  --ink: #ecebe6; --ink-2: #b4b2ac; --ink-3: #8f8d87; --ink-4: #6a6964;
  --focus: #8cb8ff; --tooltip: #202226;
  --h-dmit: #199ee0; --h-yc1: #d76c14; --h-yc2: #9b61ea; --h-sg: #17a04c; --h-rak: #5d57a4; --h-none: #8d8b85;
  --warn: #fab219; --warn-ink: #f6c453; --critical: #e5484d;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-num: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", system-ui, "PingFang SC", "Microsoft YaHei UI", sans-serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --chassis: #e3e5e8; --bezel: #eceef0; --bezel-2: #f5f6f7; --key-on: #ffffff;
    --grid: #dfe2e6; --axis: #b5bac0; --track: #d9dce0; --line: #cfd3d8; --line-strong: #b5bac0;
    --ink: #16181b; --ink-2: #474b52; --ink-3: #5f646b; --ink-4: #868b92;
    --focus: #2563eb; --tooltip: #ffffff;
    --h-dmit: #1383ba; --h-yc1: #ba5d0f; --h-yc2: #773ac1; --h-sg: #0e7737; --h-rak: #8d80fe; --h-none: #7c8087;
    --warn: #d99a00; --warn-ink: #8a5d00; --critical: #c4282d;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --chassis: #e3e5e8; --bezel: #eceef0; --bezel-2: #f5f6f7; --key-on: #ffffff;
  --grid: #dfe2e6; --axis: #b5bac0; --track: #d9dce0; --line: #cfd3d8; --line-strong: #b5bac0;
  --ink: #16181b; --ink-2: #474b52; --ink-3: #5f646b; --ink-4: #868b92;
  --focus: #2563eb; --tooltip: #ffffff;
  --h-dmit: #1383ba; --h-yc1: #ba5d0f; --h-yc2: #773ac1; --h-sg: #0e7737; --h-rak: #8d80fe; --h-none: #7c8087;
  --warn: #d99a00; --warn-ink: #8a5d00; --critical: #c4282d;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--chassis); color: var(--ink); font: 13px/1.5 var(--font-ui); font-synthesis: none; -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
svg { display: block; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.panel { border: 1px solid var(--line); border-radius: 12px; background: var(--bezel); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { font-size: 15px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.brand-mark { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.brand-mark .inner { stroke: var(--ink-3); }
.brand-mark .core { fill: var(--h-yc2); stroke: none; }

/* ---------- login ---------- */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login { width: min(360px, 100%); padding: 28px 26px 22px; display: grid; gap: 12px; }
.login .brand { margin-bottom: 6px; }
.login label { font-size: 12px; color: var(--ink-3); }
.login input[type="password"] { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--chassis); font-family: var(--font-num); letter-spacing: .04em; }
.login input[type="password"]:focus { border-color: var(--focus); outline: none; }
.login button[type="submit"] { height: 36px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--key-on); font-weight: 600; text-align: center; }
.login button[type="submit"]:hover { border-color: var(--ink-3); }
.login button[disabled] { opacity: .6; cursor: progress; }
.login-message { min-height: 18px; font-size: 12px; color: var(--warn-ink); }