html, body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; }
h1, h2, h3, .display { font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif; letter-spacing: -0.02em; }

.card { background: var(--card); border: 1.5px solid var(--line); border-radius: 8px; }
.lift { transition: transform .12s ease, box-shadow .12s ease; }
.lift:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--line); }

.field {
  width: 100%; background: var(--bg); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 6px;
  padding: .55rem .75rem; font-size: .9rem; font-family: inherit;
}
.field:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field::placeholder { color: var(--mute); opacity: .7; }

.btn {
  background: var(--accent); color: var(--accent-ink);
  border: 1.5px solid var(--line); border-radius: 6px;
  padding: .55rem 1rem; font-size: .9rem; font-weight: 700; font-family: inherit; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none; }
.btn-ghost { background: transparent; color: var(--ink); font-weight: 500; }
.btn-ghost:hover { background: var(--bg); filter: none; }
.btn-sm { padding: .3rem .65rem; font-size: .8rem; }
.danger { color: #d6403a; }

.navlink {
  padding: .9rem .1rem; font-weight: 600; font-size: .9rem; color: var(--mute);
  border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; font-family: inherit;
}
.navlink:hover { color: var(--ink); }
.navlink[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.tag { display: inline-block; font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 4px; border: 1.5px solid currentColor; }
.tag-ok { color: #2f9e5b; }
.tag-warn { color: #d98a00; }
.tag-bad { color: #d6403a; }
.tag-idle { color: var(--mute); }

.lbl { display: block; font-size: .75rem; font-weight: 600; color: var(--mute); margin-bottom: .25rem; }
.mute { color: var(--mute); }