:root {
  color-scheme: dark;
  --o-bg-app: #17171b;
  --o-bg-surface: #1d1d22;
  --o-bg-raised: #2a2a31;
  --o-bg-sunken: #0c0c0e;
  --o-bg-hover: rgba(255, 255, 255, 0.06);
  --o-border-subtle: rgba(255, 255, 255, 0.08);
  --o-border-default: #3a3a42;
  --o-border-focus: #e77634;
  --o-text-primary: #ffffff;
  --o-text-secondary: #b0b0bb;
  --o-text-muted: #8c8c98;
  --o-primary-base: #e77634;
  --o-primary-hover: #ec8445;
  --o-primary-active: #cc6226;
  --o-primary-on: #ffffff;
  --o-success-base: #4caf50;
  --o-success-soft: rgba(76, 175, 80, 0.12);
  --o-warning-base: #f2c037;
  --o-warning-soft: rgba(255, 193, 7, 0.12);
  --o-danger-base: #f44336;
  --o-danger-soft: rgba(255, 90, 90, 0.1);
  --o-space-2: 8px;
  --o-space-3: 12px;
  --o-space-4: 16px;
  --o-space-6: 24px;
  --o-space-8: 32px;
  --o-radius-sm: 6px;
  --o-radius-md: 8px;
  --o-radius-lg: 12px;
  --o-font: "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--o-bg-app);
  color: var(--o-text-primary);
  font-family: var(--o-font);
  font-size: 14px;
  line-height: 1.4;
}

button, input, textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  border-radius: var(--o-radius-md);
  background: var(--o-primary-base);
  color: var(--o-primary-on);
  padding: var(--o-space-2) var(--o-space-4);
  cursor: pointer;
}

button:hover { background: var(--o-primary-hover); }
button:active { background: var(--o-primary-active); }
button.ghost {
  background: transparent;
  color: var(--o-text-secondary);
  border: 1px solid var(--o-border-default);
}
button.danger { background: var(--o-danger-base); }

input, textarea {
  width: 100%;
  background: var(--o-bg-sunken);
  border: 1px solid var(--o-border-default);
  border-radius: var(--o-radius-md);
  padding: var(--o-space-3);
}

input:focus, textarea:focus {
  outline: 2px solid var(--o-border-focus);
  border-color: var(--o-border-focus);
}

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--o-space-6);
}

.card {
  width: min(420px, 100%);
  background: var(--o-bg-surface);
  border: 1px solid var(--o-border-subtle);
  border-radius: var(--o-radius-lg);
  padding: var(--o-space-8);
}

h1, h2 { margin: 0 0 var(--o-space-4); font-weight: 600; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }

.muted { color: var(--o-text-muted); }
.error { color: var(--o-danger-base); margin: var(--o-space-3) 0 0; }
.ok { color: var(--o-success-base); margin: var(--o-space-3) 0 0; }

.stack { display: grid; gap: var(--o-space-3); }

.shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.bar {
  display: flex;
  align-items: center;
  gap: var(--o-space-4);
  padding: var(--o-space-3) var(--o-space-6);
  background: var(--o-bg-raised);
  border-bottom: 1px solid var(--o-border-subtle);
}
.bar nav { display: flex; gap: var(--o-space-2); }
.bar button[aria-current="page"] { background: var(--o-primary-base); color: var(--o-primary-on); }
.bar .spacer { flex: 1; }
.main { padding: var(--o-space-6); display: grid; gap: var(--o-space-4); align-content: start; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--o-space-4);
}

.status {
  background: var(--o-bg-surface);
  border: 1px solid var(--o-border-subtle);
  border-radius: var(--o-radius-lg);
  padding: var(--o-space-4);
  display: grid;
  gap: var(--o-space-2);
}

.pill {
  justify-self: start;
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 12px;
}
.pill.up { background: var(--o-success-soft); color: var(--o-success-base); }
.pill.down { background: var(--o-danger-soft); color: var(--o-danger-base); }
.pill.unknown { background: var(--o-warning-soft); color: var(--o-warning-base); }

.workbench {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--o-space-4);
  min-height: calc(100vh - 140px);
  align-items: stretch;
}
.catalog {
  background: var(--o-bg-surface);
  border: 1px solid var(--o-border-subtle);
  border-radius: var(--o-radius-lg);
  padding: var(--o-space-3);
  overflow: auto;
  display: grid;
  align-content: start;
  gap: var(--o-space-2);
}
.catalog button {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--o-text-secondary);
  border-radius: var(--o-radius-sm);
}
.catalog button:hover { background: var(--o-bg-hover); }
.sql {
  display: grid;
  gap: var(--o-space-3);
  align-content: start;
  min-width: 0;
}
textarea { min-height: 160px; font-family: Consolas, monospace; }
.table-wrap {
  overflow: auto;
  border: 1px solid var(--o-border-subtle);
  border-radius: var(--o-radius-md);
  background: var(--o-bg-surface);
}
table { border-collapse: collapse; width: 100%; }
th, td {
  text-align: left;
  padding: var(--o-space-2) var(--o-space-3);
  border-bottom: 1px solid var(--o-border-subtle);
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}
th { color: var(--o-text-secondary); font-weight: 500; background: var(--o-bg-sunken); }

.hidden { display: none; }
.row { display: flex; gap: var(--o-space-2); align-items: center; }