:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef0f4;
  --ink: #181c24;
  --muted: #667085;
  --line: #dde1e8;
  --accent: #2b6af0;
  --accent-ink: #ffffff;
  --ok: #1a8a54;
  --warn: #b7791f;
  --bad: #c43d3d;
  --user: #e6efff;
  --code-bg: #f1f3f7;
  --font: ui-sans-serif, "Noto Sans KR", "Malgun Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "D2Coding", Consolas, "Cascadia Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101319;
    --surface: #171b23;
    --surface-2: #1e232d;
    --ink: #e6e9ef;
    --muted: #98a2b3;
    --line: #2a303c;
    --accent: #6c9bff;
    --accent-ink: #0b1220;
    --ok: #4cc38a;
    --warn: #e0a64a;
    --bad: #ff7b7b;
    --user: #1f2c4a;
    --code-bg: #0e1218;
  }
}
:root[data-theme="dark"] {
  --bg: #101319; --surface: #171b23; --surface-2: #1e232d; --ink: #e6e9ef; --muted: #98a2b3; --line: #2a303c;
  --accent: #6c9bff; --accent-ink: #0b1220; --ok: #4cc38a; --warn: #e0a64a; --bad: #ff7b7b; --user: #1f2c4a; --code-bg: #0e1218;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.err { color: var(--bad); }
.overlay { position: fixed; inset: 0; z-index: 10; background: var(--bg); display: grid; place-items: center; padding: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.login { width: min(420px, 100%); display: flex; flex-direction: column; gap: 8px; }
.login h1 { margin: 0; font-size: 20px; }
a.primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; display: block; text-align: center; padding: 8px 12px; border-radius: 6px; text-decoration: none; }
a.primary:hover { filter: brightness(1.07); }
a.primary.off { opacity: .5; pointer-events: none; }
.hhbar{position:fixed;top:0;left:0;right:0;height:34px;z-index:20;display:flex;gap:4px;align-items:flex-end;padding:0 12px;background:var(--surface,#171b23);border-bottom:1px solid var(--line,#2a303c);font:13px/1 system-ui,sans-serif}
.hhbar b{align-self:center;margin-right:10px;color:var(--ink,#e6e9ef)}
.hhbar a{padding:9px 12px;color:var(--muted,#98a2b3);text-decoration:none;border-bottom:2px solid transparent}
.hhbar a[aria-current=page]{color:var(--ink,#e6e9ef);border-bottom-color:var(--accent,#6c9bff)}
body.hh #app{margin-top:34px;height:calc(100vh - 34px)}
@media (max-width:900px){body.hh #nav,body.hh #panel{top:34px}}