:root {
  --bg: #0c0f1a;
  --panel: #141927;
  --box: #1a2032;
  --border: #283049;
  --text: #d9def0;
  --muted: #7d86a6;
  --accent: #4fd1ff;
  --good: #5be49b;
  --warn: #ffd666;
  --bad: #ff6b6b;
  --a: #4fd1ff;
  --b: #ff8fd1;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
code { font-family: var(--mono); font-size: 0.92em; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.bad, .error-text { color: var(--bad); }

button, select, input, textarea {
  background: var(--box); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font: inherit;
}
button, select { cursor: pointer; }
button:hover:not(:disabled), select:hover { border-color: var(--accent); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: #1d4f6b; border-color: #2c7aa3; }
input[type=number] { width: 70px; font-family: var(--mono); }
input:focus, textarea:focus { outline: none; border-color: var(--accent); }

/* ---------- Top bar ---------- */

.topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--border); background: #10141f;
  position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 700; font-size: 16px; white-space: nowrap; }
.brand small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.logo { color: var(--accent); }
.tabs { display: flex; gap: 4px; }
.tabs button.active { background: #26314f; border-color: var(--accent); }
.links { margin-left: auto; display: flex; gap: 12px; }
.links a { color: var(--accent); text-decoration: none; font-size: 13px; }

/* ---------- Common ---------- */

.tab { display: grid; gap: 10px; padding: 10px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0; }
h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 14px 0 6px; }
.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.controls label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.divider { width: 1px; height: 24px; background: var(--border); }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); }

.player { display: flex; align-items: center; gap: 4px; margin: 10px 0; flex-wrap: wrap; }
.player button { padding: 4px 10px; min-width: 38px; }
.player .play { min-width: 46px; }
.player select { padding: 4px 8px; }
.player .progress { margin-left: 8px; color: var(--muted); font-size: 12px; font-family: var(--mono); }

.now { background: var(--box); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14.5px; min-height: 64px; }
.now p { margin: 0; }
.history { list-style: none; margin: 8px 0 0; padding: 0; max-height: 340px; overflow: auto; font-size: 12.5px; color: #aab2cf; }
.history li { padding: 5px 2px; border-bottom: 1px solid #1f2639; }

/* ---------- Tab 1: index ---------- */

#tab-index { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
.tree-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: #0f1320; }
#bt-svg { display: block; width: 100%; height: auto; }
#bt-svg .title { font: 600 11px -apple-system, sans-serif; fill: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
#bt-svg .node rect { fill: #1c2338; stroke: #4a5680; stroke-width: 1.5; }
#bt-svg .node.leaf rect { fill: #1b2a3a; stroke: #3f6d8c; }
#bt-svg .node.visited rect { stroke: var(--accent); fill: #1d3346; }
#bt-svg .node.current rect { stroke: var(--warn); stroke-width: 2.5; fill: #3a3418; }
#bt-svg .node.over rect { stroke: var(--bad); stroke-width: 2.5; fill: #3a1818; }
#bt-svg .node.changed rect { stroke: var(--warn); stroke-dasharray: 5 3; }
#bt-svg .sep { stroke: #33405f; }
#bt-svg .key { font: 600 12px var(--mono); fill: #dfe6ff; text-anchor: middle; }
#bt-svg .key.hit { fill: var(--good); font-size: 13px; }
#bt-svg .edge { stroke: #3a4466; stroke-width: 1.5; fill: none; }
#bt-svg .edge.hot { stroke: var(--warn); stroke-width: 3; }
#bt-svg .leaf-link { stroke: #3f6d8c; stroke-dasharray: 3 3; fill: none; marker-end: none; }
#bt-svg .page rect { fill: #221f2c; stroke: #5a4a6a; stroke-width: 1.5; }
#bt-svg .page.read rect { fill: #2e2440; stroke: #9a7ac0; }
#bt-svg .page.current rect { stroke: var(--warn); stroke-width: 2.5; }
#bt-svg .page-label { font: 10px var(--mono); fill: var(--muted); text-anchor: middle; }
#bt-svg .pointer { stroke: var(--good); stroke-width: 2; fill: none; stroke-dasharray: 5 4; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; border: 2px solid; }
.sw.visited { border-color: var(--accent); background: #1d3346; }
.sw.current { border-color: var(--warn); background: #3a3418; }
.sw.found { border-color: var(--good); background: #183a28; }
.sw.over { border-color: var(--bad); background: #3a1818; }
.side { display: flex; flex-direction: column; gap: 10px; }
.reads { margin-left: auto; font-family: var(--mono); color: var(--warn); }
.scale-label { display: block; color: var(--muted); }
.scale-label input { width: 100%; accent-color: var(--accent); margin-top: 6px; }
.scale-label b { color: var(--text); font-family: var(--mono); }
.sc-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; padding: 6px 8px; border-radius: 6px; margin-top: 6px; background: var(--box); align-items: baseline; }
.sc-row b { font-family: var(--mono); font-size: 15px; }
.sc-row.good b { color: var(--good); }
.sc-row.bad b { color: var(--bad); }

/* ---------- Tab 2: queries ---------- */

#tab-query { grid-template-columns: 380px minmax(0, 1fr) 340px; align-items: start; }
#q-presets { width: 100%; margin-bottom: 8px; }
#q-sql { width: 100%; font: 13.5px/1.5 var(--mono); resize: vertical; }
.row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.indexes { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.indexes label { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 13px; cursor: pointer; }
.indexes input { accent-color: var(--good); width: 15px; height: 15px; padding: 0; }
.indexes .locked { cursor: default; }
.plan { display: flex; flex-direction: column; gap: 4px; }
.pnode {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 5px 8px; border-radius: 6px;
  background: var(--box); border: 1px solid var(--border); font-size: 13px;
}
.pnode.active { border-color: var(--warn); background: #2e2a16; }
.tree-line { color: var(--muted); }
.ptype { font-weight: 700; color: var(--accent); }
.pdetail { font-family: var(--mono); font-size: 12px; }
.pcount { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.why { font-size: 13px; margin: 8px 0 0; }
.tip { color: var(--warn); }
.alts { display: flex; flex-direction: column; gap: 4px; }
.alt { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 4px 8px; border-radius: 6px; color: var(--muted); background: var(--box); }
.alt.chosen { color: var(--good); border: 1px solid #2a6a4a; }
.alt b { font-family: var(--mono); white-space: nowrap; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.stats div { background: var(--box); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; }
.stats b { font: 700 20px var(--mono); color: var(--warn); }
.stats div:last-child b { color: var(--muted); }
.stats span { font-size: 11.5px; color: var(--muted); }
.pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pg { min-width: 0; border: 1px solid #3a3550; border-radius: 6px; background: #19172a; padding: 4px; transition: border-color 0.15s; }
.pg.read { background: #241f38; border-color: #7a64a8; }
.pg.current { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.pg-head { font: 10px var(--mono); color: var(--muted); padding: 0 2px 2px; }
.r {
  display: grid; grid-template-columns: 20px 24px 36px 66px 34px; gap: 3px; font: 10.5px/18px var(--mono);
  padding: 0 3px; border-radius: 3px; color: #8a93b4; white-space: nowrap; overflow: hidden;
}
.r > * { overflow: hidden; text-overflow: ellipsis; }
.r b { color: #c4cbe6; }
.r.seen { color: #b3bad4; }
.r.fetched { background: #3a3418; color: var(--text); }
.r.match { background: #183a28; color: var(--text); }
.r.reject { color: #6a5060; text-decoration: line-through; }
.r.emit { background: #164052; color: #fff; }
.r.focus { outline: 2px solid var(--warn); }
.results { max-height: 300px; overflow: auto; }
.results table, .accounts { border-collapse: collapse; width: 100%; font: 12.5px var(--mono); }
.results th, .results td, .accounts th, .accounts td { padding: 3px 6px; border-bottom: 1px solid #222a40; text-align: left; }
.results th, .accounts th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--panel); }

/* ---------- Tab 3: transactions ---------- */

#tab-tx {
  grid-template-columns: 1fr 1.1fr 1fr;
  grid-template-areas: "top top top" "A db B" "log log log";
  align-items: start;
}
.tx-top { grid-area: top; }
#tx-A { grid-area: A; }
#tx-B { grid-area: B; }
.tx-db { grid-area: db; }
.tx-log { grid-area: log; }
.tx-desc { margin: 10px 0 4px; font-size: 14.5px; }
.who-A { color: var(--a) !important; }
.who-B { color: var(--b) !important; }
.badge.st-active { color: var(--accent); border-color: var(--accent); }
.badge.st-waiting { color: var(--warn); border-color: var(--warn); }
.badge.st-committed { color: var(--good); border-color: var(--good); }
.badge.st-aborted { color: var(--bad); border-color: var(--bad); }
.badge.hint { color: var(--warn); border-style: dashed; }
.stmts { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 4px; }
.stmts li { display: grid; grid-template-columns: 18px 1fr; gap: 2px 6px; padding: 6px 8px; border-radius: 6px; background: var(--box); border: 1px solid transparent; }
.stmts .icon { text-align: center; }
.stmts code { font-size: 12.5px; word-break: break-word; }
.stmts .res { grid-column: 2; font: 12px var(--mono); color: var(--good); }
.stmts .res.dirty { color: var(--bad); }
.stmts li.next { border-color: var(--accent); }
.stmts li.pending { opacity: 0.55; }
.stmts li.waiting { border-color: var(--warn); background: #2e2a16; }
.stmts li.waiting .res { color: var(--warn); }
.stmts li.error { border-color: var(--bad); }
.stmts li.error .res { color: var(--bad); }
.stmts li.skipped { opacity: 0.4; }
.stmts li.skipped .res { color: var(--muted); }
.vars { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.vars code { color: var(--text); background: var(--box); padding: 1px 6px; border-radius: 4px; }
.step-btn { width: 100%; }
.accounts .saldo { font-weight: 700; font-size: 15px; }
.pending { display: inline-block; font-size: 12px; padding: 1px 6px; border: 1px dashed currentColor; border-radius: 4px; margin-right: 4px; }
.lock { font-weight: 700; }
.locks { margin-top: 10px; }
.wait { color: var(--warn); padding: 6px 8px; background: #2e2a16; border-radius: 6px; margin-bottom: 4px; font-size: 13px; }
.verdict { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 14px; border: 1px solid; }
.verdict.ok { border-color: var(--good); background: #12301f; }
.verdict.bad { border-color: var(--bad); background: #331818; }
.verdict.warn { border-color: var(--warn); background: #2e2a16; }
.tx-log .history { max-height: 260px; }
.tag { display: inline-block; font: 700 11px var(--mono); padding: 0 6px; border: 1px solid currentColor; border-radius: 4px; margin-right: 4px; }
.history li.ev-error { color: #ffb3b3; }
.history li.ev-commit { color: #bdf5d4; }

/* ---------- Responsive (kept last so it overrides the rules above) ---------- */

@media (max-width: 1300px) {
  #tab-query { grid-template-columns: 340px minmax(0, 1fr); }
  .q-right { grid-column: 1 / -1; }
  #tab-index { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  #tab-query, #tab-tx { grid-template-columns: 1fr; grid-template-areas: "top" "A" "B" "db" "log"; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .links { display: none; }
}