polycodegraph 0.1.0__py3-none-any.whl

codegraph/web/static/app.css

@@ -0,0 +1,664 @@
+/* ===========================================================
+   codegraph — refined design system
+   - Inter for UI text, JetBrains Mono for code/identifiers
+   - Layered ink palette + indigo brand + cyan/violet accents
+   - Subtle vignette background + soft elevation on cards
+   =========================================================== */
+
+:root {
+  --bg-0: #05070d;
+  --bg-1: #0a0f1c;
+  --bg-2: #0f1626;
+  --bg-3: #161f33;
+  --bg-4: #1d2942;
+  --line: rgba(91, 107, 140, 0.18);
+  --line-strong: rgba(91, 107, 140, 0.32);
+  --txt-0: #e6ecf5;
+  --txt-1: #c4cfe2;
+  --txt-2: #8b9ab8;
+  --txt-3: #5b6b8c;
+  --brand: #818cf8;
+  --brand-strong: #6366f1;
+  --accent-cyan: #22d3ee;
+  --accent-emerald: #34d399;
+  --accent-amber: #fbbf24;
+  --accent-rose: #f87171;
+  --accent-violet: #a78bfa;
+}
+
+/* Background: deep navy with two soft radial highlights for warmth */
+body { background: var(--bg-0); }
+.app-bg {
+  position: fixed; inset: 0; z-index: -1; pointer-events: none;
+  background:
+    radial-gradient(900px 600px at 12% -10%, rgba(99,102,241,0.18), transparent 60%),
+    radial-gradient(800px 540px at 100% 0%,  rgba(34,211,238,0.10), transparent 65%),
+    radial-gradient(700px 500px at 50% 110%, rgba(167,139,250,0.10), transparent 60%),
+    linear-gradient(180deg, #05070d 0%, #07091a 100%);
+}
+
+/* Typography */
+body { font-feature-settings: "cv02","cv03","cv04","cv11"; letter-spacing: -0.005em; }
+h1, h2, h3 { letter-spacing: -0.015em; }
+.tnum, .stat-num, table.data td.num, table.data th.num {
+  font-feature-settings: "tnum", "ss01"; font-variant-numeric: tabular-nums;
+}
+code, .mono, .qn-mono {
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-feature-settings: "calt" 0;
+}
+
+/* Scrollbars */
+* { scrollbar-width: thin; scrollbar-color: var(--bg-4) transparent; }
+*::-webkit-scrollbar { width: 10px; height: 10px; }
+*::-webkit-scrollbar-track { background: transparent; }
+*::-webkit-scrollbar-thumb {
+  background: var(--bg-4); border-radius: 5px; border: 2px solid transparent;
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-thumb:hover { background: #3b4a6a; background-clip: padding-box; }
+
+/* ---------- Sidebar nav ---------- */
+.nav-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px; border-radius: 7px;
+  font-size: 13px; color: var(--txt-2);
+  cursor: pointer; transition: color .15s, background .15s, box-shadow .15s;
+  border: 1px solid transparent;
+}
+.nav-item:hover { color: var(--txt-0); background: rgba(29,41,66,0.55); }
+.nav-item.active {
+  color: var(--txt-0);
+  background: linear-gradient(90deg, rgba(99,102,241,0.18), rgba(99,102,241,0.04));
+  box-shadow: inset 3px 0 0 0 var(--brand);
+}
+.nav-item.active svg { color: var(--brand); }
+.nav-item svg { width: 16px; height: 16px; flex: none; transition: color .15s; }
+.nav-section {
+  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
+  color: var(--txt-3); padding: 16px 10px 6px; font-weight: 600;
+}
+
+/* ---------- Cards / panels ---------- */
+.panel {
+  background: linear-gradient(180deg, rgba(22,31,51,0.85), rgba(15,22,38,0.85));
+  border: 1px solid var(--line); border-radius: 14px;
+  box-shadow: 0 1px 0 0 rgba(255,255,255,0.03) inset,
+              0 12px 32px -16px rgba(0,0,0,0.6);
+  backdrop-filter: blur(2px);
+}
+.stat-card {
+  position: relative; overflow: hidden;
+  background: linear-gradient(135deg, rgba(22,31,51,0.85), rgba(10,15,28,0.85));
+  border: 1px solid var(--line); border-radius: 14px;
+  padding: 18px 20px; transition: border-color .2s, transform .2s;
+}
+.stat-card::before {
+  content: ""; position: absolute; inset: -1px; border-radius: 14px; padding: 1px;
+  background: linear-gradient(135deg, rgba(129,140,248,0.20), transparent 60%);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
+}
+.stat-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
+.stat-num {
+  font-size: 28px; font-weight: 600; letter-spacing: -0.025em;
+  color: var(--txt-0); line-height: 1.1;
+}
+.stat-lbl {
+  font-size: 10px; text-transform: uppercase;
+  letter-spacing: 0.12em; color: var(--txt-2); margin-top: 8px;
+  font-weight: 600;
+}
+
+/* ---------- D3 chart polish ---------- */
+.d3-axis text { fill: var(--txt-2); font-size: 11px; }
+.d3-axis line, .d3-axis path { stroke: var(--line-strong); }
+.d3-label { fill: var(--txt-1); font-size: 11px; font-variant-numeric: tabular-nums; }
+
+/* ---------- Matrix ---------- */
+.matrix-wrap {
+  overflow: auto; max-height: 78vh; border-radius: 12px;
+  border: 1px solid var(--line); background: var(--bg-1);
+}
+table.matrix { border-collapse: separate; border-spacing: 0; font-size: 11px; }
+table.matrix th, table.matrix td { border: none; padding: 0; }
+table.matrix .corner {
+  position: sticky; top: 0; left: 0; z-index: 4;
+  background: var(--bg-2);
+}
+table.matrix thead th {
+  position: sticky; top: 0; z-index: 3; background: var(--bg-2);
+  padding: 6px 4px; min-width: 22px; text-align: center;
+  transform: rotate(-45deg) translateY(8px);
+  transform-origin: bottom left; height: 110px; vertical-align: bottom;
+  font-weight: 500; color: var(--txt-2); white-space: nowrap;
+  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px;
+}
+table.matrix tbody th {
+  position: sticky; left: 0; z-index: 2; background: var(--bg-2);
+  padding: 4px 12px; text-align: right; color: var(--txt-2);
+  white-space: nowrap; font-weight: 500;
+  max-width: 280px; overflow: hidden; text-overflow: ellipsis;
+  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px;
+}
+table.matrix td.cell {
+  width: 22px; height: 22px; text-align: center;
+  color: #fff; cursor: default; transition: outline .1s;
+  font-variant-numeric: tabular-nums;
+}
+table.matrix td.cell:hover { outline: 2px solid var(--brand); outline-offset: -1px; }
+
+/* ---------- Mermaid ---------- */
+.mermaid-host {
+  padding: 28px;
+  background:
+    radial-gradient(800px 400px at 50% -20%, rgba(99,102,241,0.07), transparent 60%),
+    var(--bg-2);
+  border-radius: 12px; border: 1px solid var(--line); overflow: auto;
+}
+.mermaid-host .mermaid { display: flex; justify-content: center; }
+.mermaid-host svg {
+  max-width: 100% !important; height: auto !important;
+  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
+}
+.mermaid-host .cluster rect { rx: 14; ry: 14; }
+
+/* ---------- Flow list ---------- */
+.flow-item {
+  padding: 11px 13px; border-radius: 9px; cursor: pointer;
+  border: 1px solid transparent; transition: background .15s, border-color .15s;
+}
+.flow-item:hover { background: rgba(22,31,51,0.7); }
+.flow-item.active {
+  background: linear-gradient(90deg, rgba(99,102,241,0.18), rgba(99,102,241,0.05));
+  border-color: rgba(129,140,248,0.45);
+  box-shadow: 0 0 0 1px rgba(129,140,248,0.18), 0 6px 16px -8px rgba(99,102,241,0.5);
+}
+.flow-item .qn {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 12.5px; font-weight: 500; color: var(--txt-0);
+  line-height: 1.45; word-break: break-word;
+}
+.flow-item .qn .qn-dim { color: var(--txt-3); }
+.flow-item .qn .qn-key { color: var(--brand); }
+.flow-item .meta {
+  font-size: 11px; color: var(--txt-2); margin-top: 5px;
+  display: flex; align-items: center; gap: 6px;
+}
+.flow-item .meta svg { color: var(--accent-amber); }
+
+/* ---------- Pill ---------- */
+.pill {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2.5px 9px; border-radius: 999px;
+  background: rgba(29,41,66,0.7);
+  border: 1px solid var(--line);
+  font-size: 11px; color: var(--txt-1); font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.pill-warm { color: var(--accent-amber); border-color: rgba(251,191,36,0.35);
+             background: rgba(251,191,36,0.08); }
+.pill-hot  { color: var(--accent-rose);  border-color: rgba(248,113,113,0.35);
+             background: rgba(248,113,113,0.08); }
+.pill-cool { color: var(--accent-cyan);  border-color: rgba(34,211,238,0.35);
+             background: rgba(34,211,238,0.08); }
+.pill-good { color: var(--accent-emerald); border-color: rgba(52,211,153,0.35);
+             background: rgba(52,211,153,0.08); }
+.pill svg { width: 11px; height: 11px; }
+
+/* ---------- Layer swatch ---------- */
+.swatch {
+  width: 12px; height: 12px; border-radius: 3px; flex: none;
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.18);
+}
+
+/* ---------- Link ---------- */
+.link {
+  color: var(--brand); text-decoration: none;
+  text-decoration-color: rgba(129,140,248,0.4);
+  text-underline-offset: 3px;
+}
+.link:hover { color: #c7d2fe; text-decoration: underline; }
+
+/* ---------- Inline code ---------- */
+code {
+  background: rgba(10,15,28,0.7);
+  padding: 1.5px 7px; border-radius: 5px;
+  font-size: 12px; border: 1px solid var(--line);
+  color: var(--txt-1);
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-feature-settings: "calt" 0;
+}
+code .qn-dim { color: var(--txt-3); }
+
+/* ---------- Tables ---------- */
+table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
+table.data th {
+  text-align: left; padding: 10px 12px;
+  border-bottom: 1px solid var(--line);
+  color: var(--txt-2); font-weight: 600; font-size: 10.5px;
+  text-transform: uppercase; letter-spacing: 0.1em;
+}
+table.data td {
+  padding: 10px 12px; border-bottom: 1px solid var(--line);
+  color: var(--txt-1);
+}
+table.data tr:last-child td { border-bottom: none; }
+table.data tr:hover td { background: rgba(29,41,66,0.35); }
+table.data td.num, table.data th.num {
+  text-align: right; font-variant-numeric: tabular-nums;
+}
+
+/* ---------- Toast ---------- */
+.toast {
+  background: linear-gradient(180deg, rgba(22,31,51,0.95), rgba(15,22,38,0.95));
+  border: 1px solid var(--line-strong);
+  border-left: 3px solid var(--brand);
+  padding: 10px 14px; border-radius: 9px;
+  font-size: 13px; color: var(--txt-0);
+  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.6);
+  animation: slide .2s ease;
+  backdrop-filter: blur(6px);
+}
+.toast.error   { border-left-color: var(--accent-rose); }
+.toast.success { border-left-color: var(--accent-emerald); }
+@keyframes slide {
+  from { transform: translateX(20px); opacity: 0; }
+  to   { transform: translateX(0); opacity: 1; }
+}
+
+/* ---------- Loading spinner ---------- */
+.spinner {
+  width: 16px; height: 16px; border-radius: 50%;
+  border: 2px solid var(--line-strong); border-top-color: var(--brand);
+  animation: spin .7s linear infinite;
+  display: inline-block;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ---------- Help banner ---------- */
+.help-card {
+  background:
+    linear-gradient(135deg, rgba(129,140,248,0.10), rgba(34,211,238,0.04) 60%, transparent),
+    rgba(15,22,38,0.5);
+  border: 1px solid rgba(129,140,248,0.28);
+  border-radius: 12px; padding: 14px 18px;
+  display: flex; align-items: flex-start; gap: 12px;
+  font-size: 13px; line-height: 1.6; color: var(--txt-1);
+}
+.help-card .icon { color: var(--brand); flex: none; margin-top: 2px; }
+.help-card b { color: var(--txt-0); font-weight: 600; }
+
+/* ---------- Section heading ---------- */
+.section-h {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 14px; gap: 12px;
+}
+.section-h h2 {
+  font-size: 11px; color: var(--txt-2);
+  text-transform: uppercase; letter-spacing: 0.14em;
+  font-weight: 700; margin: 0;
+}
+
+/* ---------- Search input ---------- */
+input.search {
+  width: 100%; padding: 9px 12px 9px 34px;
+  background: rgba(10,15,28,0.7); color: var(--txt-0);
+  border: 1px solid var(--line); border-radius: 9px;
+  font-size: 13px; transition: border-color .15s, box-shadow .15s;
+}
+input.search::placeholder { color: var(--txt-3); }
+input.search:focus {
+  outline: none; border-color: var(--brand);
+  box-shadow: 0 0 0 3px rgba(129,140,248,0.15);
+}
+.search-wrap { position: relative; }
+.search-wrap > svg {
+  position: absolute; left: 11px; top: 50%;
+  transform: translateY(-50%); color: var(--txt-2);
+  width: 14px; height: 14px;
+}
+
+/* ---------- Qualname helpers (dimmed dotted prefix) ---------- */
+.qn-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
+.qn-mono .qn-dim { color: var(--txt-3); }
+.qn-mono .qn-key { color: var(--txt-0); }
+
+/* ---------- Icon button (header) ---------- */
+.icon-btn {
+  width: 32px; height: 32px; display: inline-flex;
+  align-items: center; justify-content: center;
+  border-radius: 8px; color: var(--txt-2);
+  border: 1px solid var(--line);
+  background: rgba(22,31,51,0.6);
+  cursor: pointer; transition: color .15s, background .15s, border-color .15s;
+}
+.icon-btn:hover {
+  color: var(--txt-0); background: rgba(29,41,66,0.8);
+  border-color: var(--line-strong);
+}
+.icon-btn svg { width: 16px; height: 16px; }
+
+/* Default = dark mode visible icon */
+html.theme-light .theme-dark-only { display: none !important; }
+html:not(.theme-light) .theme-light-only { display: none !important; }
+
+/* ---------- Sidebar collapsed ---------- */
+html.sb-collapsed #sidebar {
+  width: 64px !important;
+}
+html.sb-collapsed #sidebar .sb-label,
+html.sb-collapsed #sidebar .nav-section,
+html.sb-collapsed #sidebar .nav-item span { display: none; }
+html.sb-collapsed #sidebar .nav-item { justify-content: center; padding: 8px; }
+html.sb-collapsed #sidebar #rebuild-btn { padding: 8px 0; }
+
+/* =========================================================
+   Light theme palette
+   ========================================================= */
+html.theme-light {
+  --bg-0: #f4f6fb;
+  --bg-1: #ffffff;
+  --bg-2: #f7f9fd;
+  --bg-3: #eef2f9;
+  --bg-4: #dde4f0;
+  --line: rgba(15, 23, 42, 0.10);
+  --line-strong: rgba(15, 23, 42, 0.18);
+  --txt-0: #0f172a;
+  --txt-1: #1e293b;
+  --txt-2: #475569;
+  --txt-3: #94a3b8;
+  --brand: #4f46e5;
+  --brand-strong: #4338ca;
+  --accent-cyan: #0891b2;
+  --accent-emerald: #059669;
+  --accent-amber: #b45309;
+  --accent-rose: #dc2626;
+  --accent-violet: #7c3aed;
+}
+html.theme-light body { background: var(--bg-0); color: var(--txt-0); }
+html.theme-light .app-bg {
+  background:
+    radial-gradient(900px 600px at 12% -10%, rgba(99,102,241,0.10), transparent 60%),
+    radial-gradient(800px 540px at 100% 0%,  rgba(8,145,178,0.08),  transparent 65%),
+    radial-gradient(700px 500px at 50% 110%, rgba(124,58,237,0.07), transparent 60%),
+    linear-gradient(180deg, #f4f6fb 0%, #eef2f9 100%);
+}
+html.theme-light .panel,
+html.theme-light .stat-card {
+  background: linear-gradient(180deg, #ffffff, #f7f9fd);
+  box-shadow: 0 1px 0 0 rgba(255,255,255,1) inset,
+              0 8px 24px -16px rgba(15,23,42,0.18);
+}
+html.theme-light .stat-card::before {
+  background: linear-gradient(135deg, rgba(99,102,241,0.18), transparent 60%);
+}
+html.theme-light aside,
+html.theme-light header {
+  background: rgba(255,255,255,0.78) !important;
+}
+html.theme-light .nav-item:hover { background: rgba(99,102,241,0.07); }
+html.theme-light .nav-item.active {
+  background: linear-gradient(90deg, rgba(99,102,241,0.16), rgba(99,102,241,0.04));
+}
+html.theme-light .matrix-wrap,
+html.theme-light table.matrix .corner,
+html.theme-light table.matrix thead th,
+html.theme-light table.matrix tbody th { background: #ffffff; }
+html.theme-light .mermaid-host {
+  background:
+    radial-gradient(800px 400px at 50% -20%, rgba(99,102,241,0.06), transparent 60%),
+    #ffffff;
+}
+html.theme-light .pill { background: rgba(99,102,241,0.08); color: var(--txt-1); }
+html.theme-light code {
+  background: rgba(15,23,42,0.04); color: var(--txt-1);
+}
+html.theme-light input.search { background: #ffffff; color: var(--txt-0); }
+html.theme-light .icon-btn { background: rgba(255,255,255,0.7); }
+html.theme-light .icon-btn:hover { background: #ffffff; }
+html.theme-light .help-card {
+  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(8,145,178,0.04) 60%, transparent),
+              #ffffff;
+  border-color: rgba(99,102,241,0.25);
+}
+html.theme-light .toast {
+  background: #ffffff;
+  box-shadow: 0 12px 32px -8px rgba(15,23,42,0.18);
+}
+html.theme-light .flow-item:hover { background: rgba(99,102,241,0.06); }
+html.theme-light .flow-item.active {
+  background: linear-gradient(90deg, rgba(99,102,241,0.14), rgba(99,102,241,0.04));
+  border-color: rgba(99,102,241,0.4);
+}
+html.theme-light .qn-mono .qn-key { color: var(--txt-0); }
+html.theme-light .swatch { box-shadow: 0 0 0 1px rgba(15,23,42,0.15), inset 0 1px 0 rgba(255,255,255,0.6); }
+
+/* ---------- Semantic text helpers (theme-aware) ---------- */
+.text-app   { color: var(--txt-0); }
+.text-app-1 { color: var(--txt-1); }
+.text-app-2 { color: var(--txt-2); }
+.text-app-3 { color: var(--txt-3); }
+
+/* ---------- HLD Navigator ---------- */
+.hld-cols {
+  display: grid; gap: 12px;
+  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);
+  background: rgba(15,22,38,0.4);
+  border: 1px solid var(--line);
+  border-radius: 12px; padding: 10px;
+}
+@media (max-width: 900px) { .hld-cols { grid-template-columns: 1fr; } }
+.hld-col {
+  background: var(--bg-2);
+  border: 1px solid var(--line);
+  border-radius: 10px; padding: 8px;
+  max-height: 460px; overflow-y: auto;
+}
+.hld-col-h {
+  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
+  text-transform: uppercase; color: var(--txt-2);
+  padding: 4px 8px 8px;
+}
+.hld-row {
+  display: flex; align-items: center; gap: 9px;
+  padding: 8px 9px; border-radius: 8px; cursor: pointer;
+  border: 1px solid transparent;
+  transition: background .12s, border-color .12s;
+}
+.hld-row:hover { background: rgba(99,102,241,0.08); }
+.hld-row.active {
+  background: linear-gradient(90deg, rgba(99,102,241,0.18), rgba(99,102,241,0.04));
+  border-color: rgba(129,140,248,0.4);
+}
+.hld-row-t {
+  font-size: 13px; font-weight: 500; color: var(--txt-0);
+  line-height: 1.35; word-break: break-word;
+}
+.hld-row-s {
+  font-size: 11px; color: var(--txt-2);
+  margin-top: 2px; word-break: break-all;
+}
+.hld-ico   { width: 14px; height: 14px; flex: none; color: var(--txt-2); }
+.hld-chev  { width: 14px; height: 14px; flex: none; color: var(--txt-3); }
+.hld-empty { padding: 14px 10px; font-size: 12px; color: var(--txt-3); font-style: italic; }
+
+.hld-crumb {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 12px; color: var(--txt-2); flex-wrap: wrap;
+}
+.crumb-link { color: var(--brand); cursor: pointer; }
+.crumb-link:hover { text-decoration: underline; }
+.crumb-sep { color: var(--txt-3); }
+
+.hld-detail {
+  margin-top: 14px;
+}
+.hld-detail:empty { display: none; }
+.hld-detail-head {
+  background: rgba(99,102,241,0.06);
+  border: 1px solid rgba(129,140,248,0.25);
+  border-radius: 10px; padding: 12px 14px;
+  display: flex; align-items: flex-start; gap: 10px;
+}
+.hld-detail-title {
+  font-size: 14px; font-weight: 600; color: var(--txt-0);
+  word-break: break-word; line-height: 1.35;
+}
+.hld-detail-meta {
+  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
+  margin-top: 6px;
+}
+.call-row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 7px 9px; border-radius: 7px; cursor: pointer;
+  font-size: 12.5px; color: var(--txt-1);
+  border: 1px solid transparent;
+  transition: background .12s, border-color .12s;
+}
+.call-row:hover {
+  background: rgba(99,102,241,0.08);
+  border-color: rgba(129,140,248,0.3);
+}
+.call-row .hld-ico { color: var(--brand); }
+
+/* =========================================================
+   Light theme: override Tailwind ink-* utilities so they
+   read as theme-aware values. Tailwind CDN injects fixed
+   hex; we win with !important + html.theme-light prefix.
+   ========================================================= */
+html.theme-light {
+  /* Body text default */
+  color: var(--txt-0);
+}
+html.theme-light .text-ink-50,
+html.theme-light .text-ink-100  { color: var(--txt-0) !important; }
+html.theme-light .text-ink-200  { color: var(--txt-2) !important; }
+html.theme-light .text-ink-300  { color: var(--txt-3) !important; }
+html.theme-light .text-ink-950  { color: #ffffff !important; }
+html.theme-light .bg-ink-600,
+html.theme-light .bg-ink-700,
+html.theme-light .bg-ink-700\/60,
+html.theme-light .bg-ink-700\/80,
+html.theme-light .bg-ink-700\/95,
+html.theme-light .bg-ink-900,
+html.theme-light .bg-ink-900\/70,
+html.theme-light .bg-ink-900\/80,
+html.theme-light .bg-ink-950 {
+  background-color: rgba(255,255,255,0.78) !important;
+}
+html.theme-light .border-ink-500\/60,
+html.theme-light .border-ink-500\/80,
+html.theme-light .border-ink-600,
+html.theme-light .border-ink-600\/60 {
+  border-color: var(--line-strong) !important;
+}
+html.theme-light input,
+html.theme-light input.search { color: var(--txt-0); }
+html.theme-light .text-accent-amber { color: #b45309 !important; }
+html.theme-light .text-accent-rose  { color: #be123c !important; }
+html.theme-light .hld-col       { background: #ffffff; }
+html.theme-light .hld-cols      { background: rgba(99,102,241,0.04); }
+html.theme-light .hld-detail-head { background: rgba(99,102,241,0.06); }
+html.theme-light .stat-num      { color: var(--txt-0); }
+html.theme-light .stat-lbl      { color: var(--txt-2); }
+html.theme-light .nav-item      { color: var(--txt-2); }
+html.theme-light .nav-item:hover,
+html.theme-light .nav-item.active { color: var(--txt-0); }
+html.theme-light table.data td  { color: var(--txt-1); }
+html.theme-light table.data th  { color: var(--txt-2); }
+html.theme-light .toast         { color: var(--txt-0); }
+html.theme-light .pill          { color: var(--txt-1); }
+
+/* ---------- HLD focus graph (D3 SVG) ---------- */
+.hld-focus {
+  display: block; width: 100%; height: 320px;
+  margin-top: 14px; border-radius: 12px;
+  background:
+    radial-gradient(600px 320px at 50% 50%, rgba(99,102,241,0.06), transparent 70%),
+    var(--bg-2);
+  border: 1px solid var(--line);
+}
+.focus-edge {
+  fill: none; stroke-width: 1.5;
+  stroke-dasharray: 6 6;
+  animation: focus-flow 1.6s linear infinite;
+}
+.focus-in  { stroke: var(--accent-cyan);    stroke-dashoffset: 0; }
+.focus-out { stroke: var(--brand);          animation-direction: reverse; }
+@keyframes focus-flow { to { stroke-dashoffset: -24; } }
+.focus-dot       { stroke: var(--bg-1); stroke-width: 2; }
+.focus-dot-in    { fill: var(--accent-cyan); }
+.focus-dot-out   { fill: var(--brand); }
+.focus-core      { fill: var(--brand-strong); stroke: var(--bg-1); stroke-width: 3; }
+.focus-core-ring {
+  fill: none; stroke: var(--brand); stroke-width: 1.5;
+  stroke-dasharray: 4 4;
+  animation: focus-spin 8s linear infinite;
+  transform-origin: center;
+}
+@keyframes focus-spin { to { stroke-dashoffset: -64; } }
+.focus-core-label {
+  fill: #ffffff; font-size: 11px; font-weight: 600;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  paint-order: stroke; pointer-events: none;
+}
+.focus-label {
+  fill: var(--txt-1); font-size: 11px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  pointer-events: none;
+}
+.focus-caption {
+  fill: var(--txt-2); font-size: 10.5px;
+  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
+}
+.focus-node:hover .focus-dot { stroke: var(--brand); stroke-width: 3; }
+.focus-node:hover .focus-label { fill: var(--txt-0); }
+
+/* ---------- Sidebar collapse: fully icon-only ---------- */
+html.sb-collapsed #sidebar > div:first-child {
+  /* shrink the header so logo centers nicely */
+  padding: 18px 10px;
+}
+html.sb-collapsed #sidebar > div:first-child > div:last-child { display: none; }
+html.sb-collapsed #sidebar > div:last-child {
+  /* footer (rebuild + last-built) */
+  padding: 8px 8px 12px;
+}
+html.sb-collapsed #sidebar #rebuild-btn span { display: none; }
+html.sb-collapsed #sidebar #last-built { display: none; }
+html.sb-collapsed #sidebar .nav-section { display: none; }
+html.sb-collapsed #sidebar .nav-item span { display: none; }
+html.sb-collapsed #sidebar .nav-item { padding: 9px 0; justify-content: center; }
+html.sb-collapsed #sidebar .nav-item.active { box-shadow: inset 3px 0 0 0 var(--brand); }
+
+/* ---------- Light theme: extra Tailwind utility coverage ---------- */
+html.theme-light .hover\:bg-ink-600:hover,
+html.theme-light .hover\:bg-ink-700:hover,
+html.theme-light .hover\:bg-ink-700\/60:hover { background-color: rgba(99,102,241,0.08) !important; }
+html.theme-light .hover\:border-brand-500:hover { border-color: var(--brand) !important; }
+html.theme-light .text-brand-500 { color: var(--brand) !important; }
+html.theme-light .group:hover .group-hover\:bg-brand-600 { background-color: var(--brand) !important; }
+html.theme-light .group:hover .group-hover\:text-white   { color: #ffffff !important; }
+html.theme-light .from-brand-500   { --tw-gradient-from: #6366f1 var(--tw-gradient-from-position) !important; }
+html.theme-light .via-brand-600    { --tw-gradient-via:  #4f46e5 var(--tw-gradient-via-position) !important; }
+html.theme-light .to-accent-cyan   { --tw-gradient-to:   #0891b2 var(--tw-gradient-to-position) !important; }
+
+/* Crumb / page title default text */
+html.theme-light #page-title { color: var(--txt-0); }
+html.theme-light #crumb      { color: var(--txt-2); }
+
+/* Mermaid container in light mode (reduce harsh contrast) */
+html.theme-light .mermaid-host svg {
+  filter: drop-shadow(0 6px 16px rgba(15,23,42,0.10));
+}
+
+/* Pyvis pages render their own dark bg; in light mode show a thin
+   hint banner above the iframe-style links so users know they open
+   externally and inherit dark styling. */
+html.theme-light .pyvis-warn { display: flex !important; }
+.pyvis-warn { display: none; }
+
+.bg-app-1 { background: var(--bg-1); }
+.bg-app-2 { background: var(--bg-2); }
+.bg-app-3 { background: var(--bg-3); }