:root {
  color-scheme: dark;
  --bg: #07101d;
  --bg-soft: #0a1525;
  --panel: rgba(13, 27, 46, .88);
  --panel-2: #0f2036;
  --line: rgba(148, 163, 184, .14);
  --text: #edf5ff;
  --muted: #8495aa;
  --accent: #53d7b7;
  --accent-2: #2ba88d;
  --danger: #ff6978;
  --warning: #f7bb55;
  --success: #5bdb9a;
  --shadow: 0 18px 55px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 78% -10%, rgba(45, 212, 191, .11), transparent 31rem),
    radial-gradient(circle at -10% 90%, rgba(59, 130, 246, .08), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
code { color: #9fe7d5; }

.shell { display: grid; grid-template-columns: 242px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  padding: 28px 18px;
  border-right: 1px solid var(--line);
  background: rgba(5, 14, 26, .86);
  backdrop-filter: blur(18px);
  display: flex; flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; }
.brand-mark {
  display: grid; place-items: center; width: 39px; height: 39px;
  border-radius: 12px; color: #07131c; font-weight: 900;
  background: linear-gradient(135deg, #72efd1, #3fbca1);
  box-shadow: 0 0 30px rgba(83, 215, 183, .18);
}
.brand strong { display: block; font-size: 15px; letter-spacing: .02em; }
.brand span { color: var(--muted); font-size: 11px; }
.nav { display: grid; gap: 8px; }
.nav-item {
  border: 0; color: var(--muted); background: transparent;
  border-radius: 11px; padding: 11px 13px; text-align: left;
  display: flex; align-items: center; gap: 10px;
}
.nav-item:hover, .nav-item.active { color: var(--text); background: rgba(83, 215, 183, .09); }
.nav-item.active { box-shadow: inset 2px 0 var(--accent); }
.sidebar-foot { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid var(--line); }
.sidebar-foot small { display: block; color: #54657a; margin-top: 8px; }
.health-pill { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.health-pill i { width: 7px; height: 7px; border-radius: 99px; background: var(--warning); box-shadow: 0 0 12px currentColor; }
.health-pill.ok i { background: var(--success); }
.health-pill.bad i { background: var(--danger); }

.main { padding: 0 34px 48px; min-width: 0; }
.topbar {
  min-height: 104px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); margin-bottom: 28px;
}
.topbar h1, .panel h2 { margin: 3px 0 0; }
.topbar h1 { font-size: 25px; }
.eyebrow { margin: 0; color: #5e7188; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.clock { font-variant-numeric: tabular-nums; color: #9fb0c3; font-size: 12px; padding-left: 8px; }

.view { display: none; }
.view.active { display: block; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.stat-card, .panel {
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(15, 32, 54, .88), rgba(10, 23, 40, .9));
  border-radius: 15px; box-shadow: var(--shadow);
}
.stat-card { padding: 17px 18px; position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; inset: auto -22px -32px auto; width: 90px; height: 90px; border-radius: 50%; background: rgba(83,215,183,.055); }
.stat-card span, .stat-card small { display: block; color: var(--muted); font-size: 11px; }
.stat-card strong { display: block; font-size: 28px; margin: 7px 0 3px; }
.stat-card.success strong { color: var(--success); }
.stat-card.danger strong { color: var(--danger); }
.stat-card.warning strong { color: var(--warning); }

.content-grid { display: grid; grid-template-columns: minmax(420px, 1.15fr) minmax(330px, .85fr); gap: 14px; margin-bottom: 14px; }
.panel { padding: 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 12px; }
.panel h2 { font-size: 16px; }
.badge { border: 1px solid rgba(83,215,183,.25); background: rgba(83,215,183,.08); color: #81e5cd; padding: 5px 9px; border-radius: 99px; font-size: 10px; font-weight: 800; }

.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field > span { color: #aab9ca; font-size: 11px; font-weight: 700; }
.field small, .hint { color: var(--muted); font-size: 11px; line-height: 1.55; }
textarea, input, select {
  width: 100%; border: 1px solid rgba(148,163,184,.17); outline: none;
  border-radius: 10px; color: var(--text); background: rgba(4, 12, 23, .52);
  padding: 10px 12px; transition: border .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 150px; line-height: 1.55; }
textarea:focus, input:focus, select:focus { border-color: rgba(83,215,183,.55); box-shadow: 0 0 0 3px rgba(83,215,183,.07); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 12px; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 42px; }
.input-suffix em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #607188; font-size: 10px; font-style: normal; }

.query-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.primary-btn, .ghost-btn, .danger-btn, .icon-btn {
  border-radius: 9px; border: 1px solid transparent; padding: 9px 13px; font-weight: 800; font-size: 11px;
}
.primary-btn { color: #06130f; background: linear-gradient(135deg, #6ce7ca, #42bfa3); }
.primary-btn:hover { filter: brightness(1.06); }
.ghost-btn, .icon-btn { color: #9fb0c3; background: rgba(148,163,184,.06); border-color: var(--line); }
.danger-btn { color: #ffdce0; background: rgba(255,105,120,.14); border-color: rgba(255,105,120,.25); }
.icon-btn { width: 34px; padding-inline: 0; }
.run-note { color: var(--muted); font-size: 11px; margin-left: auto; }
.hidden { display: none !important; }

.progress-track { height: 4px; background: rgba(148,163,184,.08); border-radius: 99px; overflow: hidden; margin-bottom: 15px; }
.progress-track span { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--accent), #69aaff); transition: width .2s ease; }
.activity-log { height: 348px; overflow: auto; display: grid; align-content: start; gap: 9px; padding-right: 4px; }
.log-row { display: grid; grid-template-columns: 62px 1fr; gap: 9px; font-size: 10px; line-height: 1.5; }
.log-row time { color: #516278; font-variant-numeric: tabular-nums; }
.log-row span { color: #aebdcd; word-break: break-word; }
.log-row.error span { color: #ff9aa5; }
.log-row.success span { color: #8be2b3; }
.log-row.warning span { color: #f5c674; }
.log-row.muted span { color: #61738a; }

.results-panel { padding-bottom: 10px; }
.result-table-wrap { overflow-x: auto; }
.result-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.result-table th { color: #63758b; font-size: 9px; letter-spacing: .11em; text-transform: uppercase; text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.result-table td { padding: 13px 12px; border-bottom: 1px solid rgba(148,163,184,.08); color: #aebdcd; font-size: 11px; vertical-align: top; }
.result-table td:first-child { color: var(--text); font-weight: 700; }
.status-chip { display: inline-flex; border-radius: 99px; padding: 4px 8px; font-size: 9px; font-weight: 900; }
.status-chip.clean { color: #85e8b0; background: rgba(91,219,154,.10); }
.status-chip.blocked { color: #ff96a1; background: rgba(255,105,120,.10); }
.status-chip.error { color: #efc171; background: rgba(247,187,85,.10); }
.empty-row td { text-align: center; color: #53657a; padding: 35px; }

.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; max-width: 980px; }
.info-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.info-list div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: 11px; }
.info-list div:last-child { border-bottom: 0; }
.info-list span { color: var(--muted); }
.info-list strong { color: #bfd0e2; font-weight: 700; text-align: right; }

.toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 20; display: grid; gap: 8px; }
.toast { width: min(360px, calc(100vw - 40px)); padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #10233a; box-shadow: var(--shadow); color: #c5d4e4; font-size: 11px; animation: toast-in .2s ease; }
.toast.error { border-color: rgba(255,105,120,.3); }
.toast.success { border-color: rgba(91,219,154,.3); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

@media (max-width: 980px) {
  .shell { grid-template-columns: 72px 1fr; }
  .brand > div:last-child, .nav-item span:last-child, .sidebar-foot small, .health-pill span { display: none; }
  .brand { padding-inline: 0; justify-content: center; }
  .nav-item { justify-content: center; }
  .sidebar-foot { display: flex; justify-content: center; }
  .content-grid, .settings-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px) {
  .shell { display: block; }
  .sidebar { position: static; height: auto; padding: 12px 14px; flex-direction: row; align-items: center; gap: 12px; }
  .brand { padding: 0; }
  .nav { display: flex; margin-left: auto; }
  .sidebar-foot { display: none; }
  .main { padding: 0 14px 30px; }
  .topbar { min-height: 88px; }
  .topbar-actions .ghost-btn, .clock { display: none; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .content-grid { grid-template-columns: 1fr; }
}