/* haso.lol developer dashboard (phase 1). Tokens follow site/app.css (docs/brand/SITE.md): neutral ink, one accent. */
:root {
  --ink: #0f2547; --muted: #5a6a86; --card: #fff; --bg: #eef3fa; --accent: #ff3b5c; --ring: #1f8bff;
  --fill: rgba(15, 37, 71, .06); --hair: rgba(15, 37, 71, .12);
  --ok: #128a5c; --warn: #9a6400; --bad: #d4183d;
  --r1: 8px; --r2: 12px; --s1: 8px; --s2: 16px; --s3: 24px;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e8eefb; --muted: #9aa8c2; --card: #141c2e; --bg: #0b1120; --fill: rgba(232, 238, 251, .07); --hair: rgba(232, 238, 251, .14);
    --ok: #3ccf91; --warn: #e6b450; --bad: #ff6b81; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); }
a { color: inherit; text-decoration-color: var(--hair); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); height: 56px;
  background: var(--card); border-bottom: 1px solid var(--hair); }
.brand { font-weight: 800; text-decoration: none; letter-spacing: -.01em; }
.brand span { color: var(--accent); font-weight: 600; }
#nav { margin-left: auto; display: flex; gap: var(--s2); align-items: center; font-size: 14px; }
main { max-width: 1100px; margin: 0 auto; padding: var(--s3) var(--s2) 64px; }
h1 { font-size: 24px; margin: 0 0 var(--s1); letter-spacing: -.01em; }
h2 { font-size: 17px; margin: var(--s3) 0 var(--s1); }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r2); padding: var(--s2); margin: var(--s2) 0; }
.card > h2:first-child { margin-top: 0; }
.row { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
.scroll { overflow-x: auto; }
pre { margin: 0; padding: var(--s2); background: var(--fill); border-radius: var(--r1); font: 13px/1.5 var(--mono); white-space: pre-wrap;
  word-break: break-word; max-height: 520px; overflow: auto; }
code { font: 13px var(--mono); }
.badge { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--fill); white-space: nowrap; }
.s-live, .s-pass, .s-approved, .s-same { color: var(--ok); }
.s-in_review, .s-checking, .s-warn, .s-changed, .s-added, .s-switching { color: var(--warn); }
.s-checks_failed, .s-rejected, .s-fail, .s-changes_requested, .s-removed, .s-hidden { color: var(--bad); }
button, .btn { font: inherit; font-weight: 600; min-height: 40px; padding: 0 16px; border-radius: var(--r1); border: 1px solid var(--hair);
  background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button:disabled { opacity: .5; cursor: default; }
button.link { border: 0; background: none; padding: 0; min-height: 0; color: var(--muted); font-weight: 500; text-decoration: underline; text-decoration-color: var(--hair); }
input, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--hair); border-radius: var(--r1); padding: 8px 10px; }
textarea { width: 100%; min-height: 140px; font: 14px/1.5 var(--mono); }
label { display: inline-flex; gap: 6px; align-items: center; }
form.login { max-width: 360px; margin: 10vh auto; display: grid; gap: var(--s2); }
form.login input { width: 100%; }
.err { color: var(--bad); white-space: pre-wrap; }
.notice { border-left: 3px solid var(--warn); padding-left: var(--s2); }
.token { font: 14px var(--mono); word-break: break-all; user-select: all; }
.tabs { display: flex; gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s1); }
.tabs button[aria-pressed="true"] { border-color: var(--ink); }
ul.where { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font: 12px var(--mono); }
@media (max-width: 640px) { th, td { padding: 6px; } .hide-sm { display: none; } }