:root{--border:#cbd5e1;--ink:#0f172a;--muted:#64748b;--accent:#6366f1;--bg:#f8fafc}*{box-sizing:border-box}body{color:var(--ink);background:var(--bg);margin:0;font:14px/1.45 -apple-system,Segoe UI,Roboto,sans-serif}.app{flex-direction:column;height:100vh;display:flex}header{border-bottom:1px solid var(--border);background:#fff;flex-wrap:wrap;align-items:center;gap:16px;padding:10px 16px;display:flex}h1{margin:0;font-size:16px;font-weight:600}.title-muted{color:var(--muted);font-weight:400}.controls{flex-wrap:wrap;align-items:center;gap:12px;margin-left:auto;display:flex}.controls input[type=search]{border:1px solid var(--border);font:inherit;border-radius:6px;width:200px;padding:5px 9px}.controls input[type=number]{border:1px solid var(--border);width:52px;font:inherit;border-radius:6px;padding:5px 7px}.file-btn{border:1px solid var(--border);cursor:pointer;font:inherit;color:var(--ink);background:#fff;border-radius:6px;align-items:center;padding:5px 11px;display:inline-flex}.file-btn:hover{border-color:var(--accent);background:#eef2ff}button{border:1px solid var(--border);cursor:pointer;font:inherit;background:#fff;border-radius:6px;padding:5px 11px}button:hover{background:#eef2ff}.icon-btn{justify-content:center;align-items:center;padding:6px;line-height:0;display:inline-flex}.icon-btn svg{display:block}.toolbar .icon-btn,.controls .icon-btn,.fsbar .icon-btn,.file-btn.icon-btn{padding:6px}label{color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:5px;display:flex}#stats{color:var(--muted);white-space:nowrap;font-size:12px}#main{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.view-switch{border:1px solid var(--border);background:#f1f5f9;border-radius:8px;display:inline-flex;overflow:hidden}.switch{color:var(--muted);background:0 0;border:none;border-radius:0;padding:5px 16px;font-weight:500}.switch+.switch{border-left:1px solid var(--border)}.switch:hover{color:var(--ink);background:#e2e8f0}.switch.active{color:var(--ink);background:#fff;font-weight:600}.fsbar{border-bottom:1px solid var(--border);background:#fff;align-items:center;gap:10px;padding:8px 12px;display:none}.fs-spacer{flex:1}.tabpane{flex:1;min-height:0;display:none}.tabpane.active{display:flex}#graphTab{flex-direction:column}#graphTab.active{display:flex}.fg-host{width:100%;height:100%}#main:fullscreen{background:#fff}#main:fullscreen .fsbar{display:flex}#main:fullscreen #graphTab aside{display:none}#main:fullscreen .diagram{padding:24px}#graphRow{flex:1;min-height:0;display:flex;overflow:hidden}#graph{background:#fff;flex:1;position:relative;overflow:hidden}.empty-graph{height:100%;color:var(--muted);justify-content:center;align-items:center;display:flex}.empty-graph code{background:#f1f5f9;border-radius:4px;padding:1px 5px}#dropzone{border:3px dashed var(--accent);color:var(--accent);pointer-events:none;z-index:10;background:#6366f114;border-radius:10px;justify-content:center;align-items:center;font-size:18px;display:none;position:absolute;inset:0}aside{border-left:1px solid var(--border);background:#fff;width:340px;padding:14px 16px;overflow:auto}aside h2{margin:0;font-size:15px}aside h2.filterable{cursor:pointer;border:1px solid var(--border);background:#eef2ff;border-radius:6px;padding:5px 12px;font-weight:600;display:inline-block}aside h2.filterable:hover{border-color:var(--accent);background:#e0e7ff}aside h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 6px;font-size:12px}.chip{border:1px solid var(--border);cursor:pointer;background:#f1f5f9;border-radius:999px;margin:2px;padding:3px 9px;font-size:12px;display:inline-block}.chip:not(.empty):hover{border-color:var(--accent);background:#e0e7ff}.chip.empty{cursor:default;color:var(--muted);background:0 0;font-style:italic}.chip.skip{color:#b45309;border-style:dashed}.member-list{max-height:200px;overflow:auto}.hint{color:var(--muted);margin-top:16px;font-size:12px}#mermaidTab{background:#fff;flex-direction:column}.toolbar{border-bottom:1px solid var(--border);background:#fff;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;display:flex}.toolbar select,.toolbar button{border:1px solid var(--border);font:inherit;cursor:pointer;background:#fff;border-radius:6px;padding:5px 9px}.toolbar button:hover{background:#eef2ff}.search-wrap{align-items:center;gap:6px;display:flex}.toolbar input[type=text],.toolbar input[type=number]{border:1px solid var(--border);height:34px;font:inherit;background:#fff;border-radius:8px;padding:6px 10px;font-size:14px;transition:border-color .12s,box-shadow .12s}.toolbar input[type=text]{width:260px}.toolbar input[type=number]{width:62px}.toolbar input[type=text]:focus,.toolbar input[type=number]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #6366f12e}.toolbar .clear-btn{width:30px;height:30px;color:var(--muted);border-radius:8px;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;display:inline-flex}.toolbar .clear-btn:hover{color:var(--ink);background:#fee2e2;border-color:#fca5a5}.toolbar-spacer{flex:1}.depth-label{gap:6px}.zoom-pct{text-align:center;min-width:46px;color:var(--muted);font-size:12px}.mbody{flex:1;min-height:0;display:flex}.diagram-shell{flex:1;min-width:0;display:flex;position:relative}.diagram{cursor:grab;scrollbar-width:none;background:#fff;flex:1;justify-content:center;align-items:flex-start;padding:16px;display:flex;overflow:auto}.zoom-ov{z-index:20;border:1px solid var(--border);background:#fff;border-radius:8px;align-items:center;gap:4px;padding:4px;display:flex;position:absolute;bottom:14px;right:14px;box-shadow:0 6px 18px #00000024}.zoom-ov button{padding:3px 9px;font-size:13px}.diagram::-webkit-scrollbar{display:none}.zoom-wrap{transform-origin:0 0;will-change:transform;display:inline-block}.zoom-wrap svg{display:block}.code{border-left:1px solid var(--border);flex-direction:column;width:38%;min-width:320px;display:flex}.code pre{color:#0f172a;white-space:pre-wrap;word-break:break-word;background:#f1f5f9;flex:1;margin:0;padding:14px;font:12px/1.5 SFMono-Regular,Consolas,monospace;overflow:auto}.md-error{color:#b45309;padding:4px 14px;font-size:12px}.code-hidden .code{display:none}.help-wrap{position:relative}.help-btn{width:26px;height:26px;color:var(--accent);font-weight:700;line-height:1;border-radius:50%!important;padding:0!important}.help-pop{border:1px solid var(--border);z-index:30;background:#fff;border-radius:10px;width:340px;max-width:80vw;padding:10px 14px;display:none;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 12px 30px #0000002e}.help-pop.open{display:block}.help-pop h4{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:10px 0 4px;font-size:11px}.help-pop h4:first-child{margin-top:2px}.help-pop p{color:var(--ink);margin:3px 0;font-size:12px;line-height:1.5}.help-pop b{color:var(--accent)}
