:root { --bg:#ffffff; --fg:#111; --muted:#6c757d; --surface:#f8f9fb; --line:#dee2e6; --shadow:#000; --primary:#0d6efd; --edge:#000; --node:#fff; }
:root[data-theme="dark"], html[data-theme="dark"], html[data-bs-theme="dark"] { --bg:#0b0e14; --fg:#e6e6e6; --muted:#9aa3b2; --surface:#111827; --line:rgba(255,255,255,.18); --primary:#9ec5fe; --edge:#e6e6e6; --node:#0f1320; }

html,body{background:var(--bg);color:var(--fg)}
.bg-body{background:var(--bg)!important;color:var(--fg)!important}
.theme-surface{background:var(--surface)!important}
.card,.table{border-color:var(--line)}
.table th,.table td{border-color:var(--line)!important}
.table-hover tbody tr:hover{background:rgba(13,110,253,.06)}
.code-pre{white-space:pre-wrap;word-break:break-word;background:#0a0d14;color:#e6e6e6;border:1px solid var(--line);border-radius:.5rem;padding:.75rem}
html[data-bs-theme="light"] .code-pre{background:#f3f4f7;color:#111}

/* SVG (same as inline fallback) */
.graphsvg{width:100%;height:520px}
.graph-edge{stroke:var(--edge)!important; fill:var(--edge)!important}
.graph-node{fill:var(--node)!important; stroke:var(--edge)!important; stroke-width:2}
.graph-node.root{stroke:#001e62!important; stroke-width:2.8}
.graph-label{font-size:13px; fill:#001e62!important; font-family:Arial,Helvetica,sans-serif}
html[data-bs-theme="dark"] .graph-label{fill:var(--primary)!important}