:root{--sidebar-width:280px;--detail-height:280px;--sidebar-bg:#1e2130;--sidebar-text:#e2e8f0;--sidebar-muted:#718096;--sidebar-border:#2d3748;--sidebar-input-bg:#2d3748;--accent:#4299e1;--accent-hover:#63b3ed;--canvas-bg:#f7f8fa;--detail-bg:#fff;--detail-border:#e2e8f0}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:#2d3748;background:var(--canvas-bg);height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;overflow:hidden}.app-layout{grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:1fr;height:100vh;display:grid}.sidebar{background:var(--sidebar-bg);color:var(--sidebar-text);border-right:1px solid var(--sidebar-border);flex-direction:column;display:flex;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--sidebar-border);flex-shrink:0;padding:14px 16px 12px}.sidebar-header h1{letter-spacing:.01em;color:#fff;font-size:14px;font-weight:600}.sidebar-header p{color:var(--sidebar-muted);margin-top:2px;font-size:11px}.meta-panel{color:var(--sidebar-muted);border-bottom:1px solid var(--sidebar-border);flex-shrink:0;padding:10px 16px;font-size:11px;line-height:1.7}.meta-row{gap:6px;display:flex}.meta-key{color:var(--sidebar-muted);min-width:55px}.meta-val{color:var(--sidebar-text);word-break:break-all;font-weight:500}.sidebar-body{flex-direction:column;flex:1;gap:4px;padding:12px 16px;display:flex;overflow-y:auto}.section-label{color:var(--sidebar-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-size:11px;font-weight:600}.storey-list{flex-direction:column;gap:2px;list-style:none;display:flex}.storey-item{cursor:pointer;color:var(--sidebar-text);text-align:left;background:0 0;border:none;border-radius:5px;align-items:center;gap:8px;width:100%;padding:7px 10px;font-size:12px;transition:background .15s;display:flex}.storey-item:hover{background:var(--sidebar-input-bg)}.storey-item.active{background:var(--accent);color:#fff}.storey-dot{background:#2f855a;border-radius:50%;flex-shrink:0;width:8px;height:8px}.storey-item.active .storey-dot{background:#fff}.storey-item.disabled{opacity:.35;cursor:not-allowed}.storey-item.disabled:hover{background:0 0}.storey-item.disabled .storey-dot{background:#4a5568}.storey-count{color:var(--sidebar-muted);margin-left:auto;font-size:10px}.storey-item.active .storey-count{color:#ffffffb3}.btn-all-nodes{cursor:pointer;color:var(--sidebar-text);background:var(--sidebar-input-bg);text-align:left;border:1px solid #4a5568;border-radius:5px;align-items:center;gap:8px;width:100%;margin-bottom:8px;padding:7px 10px;font-size:12px;transition:background .15s;display:flex}.btn-all-nodes:hover{background:#3d4f63}.btn-all-nodes.active{background:var(--accent);color:#fff;border-color:var(--accent)}.legend{flex-wrap:wrap;gap:4px 12px;padding:8px 0;display:flex}.legend-item{color:var(--sidebar-muted);align-items:center;gap:5px;font-size:11px;display:flex}.legend-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.canvas-area{background:var(--canvas-bg);flex-direction:column;display:flex;position:relative;overflow:hidden}.graph-container{flex:1;min-height:0;position:relative;overflow:hidden}.graph-container svg{width:100%;height:100%;display:block}.status-bar{border:1px solid var(--detail-border);color:#4a5568;z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;background:#ffffffeb;border-radius:6px;padding:6px 12px;font-size:11px;position:absolute;top:12px;left:12px}.status-bar.error{color:#e53e3e;background:#feb2b233;border-color:#fed7d7}.status-bar.loading{color:var(--accent)}.detail-panel{height:var(--detail-height);background:var(--detail-bg);border-top:1px solid var(--detail-border);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.detail-panel.hidden{display:none}.detail-header{border-bottom:1px solid var(--detail-border);background:#f7f8fa;flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 14px;display:flex}.detail-title{color:#2d3748;align-items:center;gap:8px;font-size:12px;font-weight:600;display:flex}.detail-title .label-badge{color:#fff;border-radius:3px;padding:1px 6px;font-size:10px;font-weight:500}.detail-header-actions{align-items:center;gap:8px;display:flex}.btn-subgraph{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:4px 10px;font-size:11px;transition:background .15s}.btn-subgraph:hover{background:var(--accent-hover)}.btn-close-detail{color:#718096;cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:16px;line-height:1}.btn-close-detail:hover{color:#2d3748}.detail-body{color:#2d3748;flex:1;grid-template-columns:1fr 1fr;gap:0 20px;padding:10px 14px;font-size:12px;display:grid;overflow-y:auto}.detail-row{align-items:baseline;gap:6px;margin-bottom:4px;display:flex}.detail-key{color:#718096;flex-shrink:0;min-width:75px;font-size:11px}.detail-val{word-break:break-all;font-weight:500}.psets-section{grid-column:1/-1;margin-top:8px}.psets-section>summary{color:#4a5568;cursor:pointer;margin-bottom:4px;font-weight:600}details{margin-bottom:4px}details>summary{cursor:pointer;color:#4a5568;font-size:12px}details>details{margin-left:14px}.pset-value{color:#2d3748;font-family:SF Mono,Fira Code,Consolas,monospace;font-size:11px}.graph-tooltip{color:#e2e8f0;pointer-events:none;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1a202ceb;border-radius:5px;max-width:300px;padding:6px 10px;font-size:11px;line-height:1.5;position:absolute;box-shadow:0 2px 8px #0003}.graph-tooltip.hidden{display:none}.tooltip-name{color:#fff;font-weight:600}.tooltip-class{color:#a0aec0;font-size:10px}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#4a5568;border-radius:3px}.sidebar-body::-webkit-scrollbar-thumb{background:#4a5568}.edge-label{fill:#718096;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:8px}.loading-overlay{z-index:20;background:#f7f8facc;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spinner{border:3px solid #e2e8f0;border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}
