:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111315;
  color: #f2f4f5;
  letter-spacing: 0;
  --surface: #191c20;
  --surface-raised: #20242a;
  --line: #343a42;
  --muted: #9ca4ad;
  --green: #45b97c;
  --red: #e66a66;
  --amber: #d7a84f;
  --blue: #6da8e6;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #111315; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
[hidden] { display: none !important; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-panel { width: min(100%, 380px); }
.login-panel h1 { margin: 6px 0 32px; font-size: 30px; }
label { display: block; margin: 16px 0 7px; color: var(--muted); font-size: 13px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 5px; background: #14171a; color: #fff; padding: 12px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(109,168,230,.18); }
textarea { resize: vertical; min-height: 132px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

.topbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px max(18px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: #16191d; position: sticky; top: 0; z-index: 5; }
.topbar h1 { margin: 2px 0 0; font-size: 19px; line-height: 1.15; }
.eyebrow { margin: 0; color: var(--muted); font-size: 10px; font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: #e7eaed; font-size: 20px; }
.icon-button svg { width: 18px; height: 18px; }
.icon-button:hover { background: var(--surface-raised); }
.status-pill { min-width: 84px; padding: 7px 10px; border-radius: 4px; font-size: 12px; font-weight: 650; text-align: center; border: 1px solid var(--line); }
.status-pill.ok { color: #8be0ae; border-color: rgba(69,185,124,.45); background: rgba(69,185,124,.1); }
.status-pill.bad { color: #ff9a95; border-color: rgba(230,106,102,.45); background: rgba(230,106,102,.1); }
.status-pill.neutral { color: #bec4ca; }

main { width: min(100%, 980px); margin: 0 auto; padding-bottom: 84px; }
.summary-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.metric { min-width: 0; padding: 18px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.metric strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.tabs { display: flex; gap: 2px; padding: 14px 18px 0; border-bottom: 1px solid var(--line); }
.tab { min-width: 84px; height: 42px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); }
.tab.active { color: #fff; border-bottom-color: var(--green); }
.view { display: none; padding: 24px 18px; }
.view.active { display: block; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 14px; }
.section-heading h2 { margin: 4px 0 0; font-size: 22px; }
.count { color: var(--muted); font-variant-numeric: tabular-nums; }

.item-list { border-top: 1px solid var(--line); }
.item-row { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.item-main { min-width: 0; }
.item-main strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
.item-main span { display: block; color: var(--muted); margin-top: 5px; font-size: 12px; overflow-wrap: anywhere; }
.item-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.primary, .secondary, .danger { min-height: 40px; border-radius: 5px; padding: 0 16px; font-weight: 700; }
.command { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.command svg { width: 15px; height: 15px; flex: 0 0 auto; }
.primary { border: 1px solid var(--green); background: var(--green); color: #07140d; }
.primary:hover { background: #5bc78e; }
.secondary { border: 1px solid var(--line); background: transparent; color: #eef1f3; }
.secondary:hover { background: var(--surface-raised); }
.danger { border: 1px solid rgba(230,106,102,.7); background: transparent; color: #ffaaa6; }
.danger:hover { background: rgba(230,106,102,.12); }
.compact { min-width: 68px; min-height: 36px; padding: 0 13px; flex: 0 0 auto; }
.full { width: 100%; margin-top: 18px; }
.empty { padding: 34px 4px; color: var(--muted); text-align: center; }
.error-text { color: #ff9691; min-height: 20px; }

.query-panel { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.query-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.query-heading h3 { margin: 0; font-size: 16px; }
.query-heading span { color: var(--muted); font-size: 10px; text-align: right; }
.query-panel .primary { margin-top: 14px; }
.result { margin: 18px 0 0; max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 5px; padding: 14px; background: #0d0f11; color: #dce4e8; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline { border-top: 1px solid var(--line); }
.timeline-row { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.timeline-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--blue); }
.timeline-dot.error { background: var(--red); }
.timeline-dot.run { background: var(--green); }
.timeline-dot.stop { background: var(--red); }
.timeline-dot.database, .timeline-dot.query { background: var(--amber); }
.timeline-row strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.timeline-row time { display: block; color: var(--muted); font-size: 11px; margin-top: 5px; }
.toast { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 36px), 540px); padding: 13px 15px; border: 1px solid rgba(69,185,124,.5); border-radius: 5px; background: #183326; color: #c8f3d9; box-shadow: 0 12px 36px rgba(0,0,0,.38); z-index: 10; overflow-wrap: anywhere; }
.toast.error { border-color: rgba(230,106,102,.5); background: #40201f; color: #ffd0cd; }

@media (max-width: 620px) {
  .topbar { align-items: flex-start; }
  .status-pill { display: none; }
  .summary-band { grid-template-columns: 1fr 1fr; }
  .metric { padding: 14px; }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .tabs { position: sticky; top: 72px; z-index: 4; background: #111315; }
  .view { padding-top: 20px; }
  .item-actions { flex-direction: column-reverse; align-items: stretch; }
}