:root{
  --bg:#0f1821;
  --panel:#0b121a;
  --ink:#e6edf3;
  --muted:#9fb0c0;
  --accent:#7dc1ff;
  --badge:#162332;
  --badge-ink:#bcd5eb;
  --link:#9bd4ff;
  --border:#223145;
  --row:#0e1a27;
  --row2:#0d1621;
  --statement-bg:#0b131d;
  --font: 14px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--font)}
.bar{
  position:sticky;top:0;z-index:10;display:flex;gap:12px;align-items:center;
  padding:10px 14px;background:var(--panel);border-bottom:1px solid #1e2a3a
}
.brand{font-size:18px;font-weight:700}
.status,.version{font-size:13px}
.muted{color:var(--muted)}
.spacer{flex:1}
.btn{
  background:#142233;color:var(--ink);border:1px solid #26354a;
  padding:6px 10px;border-radius:10px;cursor:pointer
}
.btn:hover{border-color:#3b5170}
.layout{height:calc(100% - 57px)}
.tree{overflow:auto;padding:12px 16px}
.tree-root,.tree-root ul{list-style:none;margin:0;padding-left:28px}
.tree-root{padding-left:0}

.node{position:relative}
.node > .rail{
  position:absolute;left:8px;top:0;bottom:0;width:1px;border-left:1px dashed #2a3b52;opacity:.7
}
.node-root > .rail{display:none}
.node-row{
  display:flex;align-items:center;gap:8px;min-height:26px;padding:6px 4px;border-radius:8px
}
.node-row:hover{background:var(--row)}
.twisty{
  width:18px;height:18px;border:none;background:none;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;padding:0
}
.twisty.placeholder{visibility:hidden;cursor:default}
.bull{width:6px;height:6px;border-radius:50%;background:#31465e;flex-shrink:0}
.title-link,.stmt-link{color:var(--link);text-decoration:none}
.title-link:hover,.stmt-link:hover{text-decoration:underline}
.plain-title{color:var(--ink)}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;
  background:var(--badge);color:var(--badge-ink);font-size:12px
}
.badge .count{opacity:.95}
.children.hidden{display:none}

.separator .node-row{opacity:.9}
.separator .plain-title{color:var(--muted);letter-spacing:.04em}

.statement-wrap{
  margin:6px 0 8px 0;padding:8px 10px;border:1px solid var(--border);
  background:var(--statement-bg);border-radius:10px
}
.statement-header{
  display:flex;align-items:flex-start;gap:8px
}
.statement-toggle{
  width:18px;height:18px;border:none;background:none;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;padding:0;flex-shrink:0
}
.statement-bullet{width:18px;text-align:center;color:var(--muted);flex-shrink:0}
.statement-text{flex:1;min-width:0}
.statement-text a{word-break:break-word}
.statement-meta{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px
}
.meta-badge{
  display:inline-flex;gap:6px;padding:3px 8px;background:#162332;border:1px solid var(--border);
  border-radius:6px;font-size:11px;white-space:nowrap;color:var(--badge-ink)
}
.meta-label{color:var(--muted)}
.statement-actions{display:flex;gap:6px;margin-left:8px}
.action-link{
  display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;
  background:#162332;border:1px solid var(--border);color:var(--badge-ink);text-decoration:none;font-size:11px
}
.action-link:hover{border-color:#3b5170;color:var(--link)}
.details{
  margin-top:8px;padding:10px 12px;border-top:1px solid var(--border);color:var(--badge-ink);white-space:pre-wrap
}
.loading{color:var(--muted);font-style:italic}
.error{color:#ff9b9b}
@media (max-width: 700px){
  .bar{flex-wrap:wrap}
  .status,.version{width:100%}
}