:root{font-family:Inter,Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;font-weight:400;color:#0f172a;background-color:#f5f7fb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background-color:#f5f7fb}a{color:inherit}:root{font-family:Inter,Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;color:#0f172a;background-color:#f5f7fb}.topology-app{min-height:100vh;background:linear-gradient(180deg,#f8fafc,#eef2ff 60%,#fdf4ff);padding:32px 20px 48px;color:#0f172a}@media(min-width:1024px){.topology-app{padding:40px 32px 56px}}.topology-shell{max-width:1680px;margin:0 auto;display:flex;flex-direction:column;gap:24px}.topology-header{background:linear-gradient(135deg,#eef2ff,#e0f2fe);border-radius:24px;padding:24px;box-shadow:0 18px 40px #0f172a1a;display:flex;flex-direction:column;gap:16px}@media(min-width:768px){.topology-header{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}}.title-stack h1{margin:4px 0;font-size:clamp(1.6rem,3vw,2.4rem)}.eyebrow{text-transform:uppercase;letter-spacing:.24em;font-size:.75rem;color:#475569;margin:0}.subtitle{margin:4px 0 10px;color:#475569;max-width:52ch}.dataset-id{margin:0;font-size:.875rem;color:#334155}.dataset-id span{font-weight:600}.header-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.upload-control,.ghost-btn,.primary-btn{border-radius:12px;border:1px solid rgba(15,23,42,.1);background:#ffffffe6;padding:10px 18px;font-size:.95rem;font-weight:600;color:#0f172a;cursor:pointer;transition:box-shadow .2s ease,transform .15s ease}.upload-control:hover,.ghost-btn:hover,.primary-btn:hover{box-shadow:0 8px 20px #0f172a26;transform:translateY(-1px)}.primary-btn{background:#4338ca;color:#fff;border:none}.ghost-select{border-radius:12px;border:1px solid rgba(15,23,42,.15);padding:10px 14px;font-size:.95rem;font-weight:600;background:#ffffffe6;color:#0f172a}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.topology-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}.canvas-backdrop{position:fixed;inset:0;background:#0f172a80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:900}.canvas-card,.details-panel{background:#fff;border-radius:24px;padding:24px;border:1px solid rgba(15,23,42,.08);box-shadow:0 18px 35px #0f172a14}.canvas-card{display:flex;flex-direction:column;flex:1 1 0%;width:auto;max-width:100%}.topology-columns{display:flex;flex-direction:column;gap:24px;align-items:stretch;flex-wrap:nowrap}@media(min-width:1100px){.topology-columns{flex-direction:row;align-items:stretch;gap:28px}}.canvas-card--fullscreen{position:fixed;top:32px;left:50%;transform:translate(-50%);width:min(1200px,calc(100vw - 64px));height:calc(100vh - 96px);z-index:950;display:flex;flex-direction:column}.canvas-card--fullscreen .canvas-frame{flex:1;height:auto;min-height:0}.canvas-card--fullscreen .canvas-header{padding-bottom:8px}.canvas-card--fullscreen .topology-canvas{height:100%}.insight-column{display:flex;flex-direction:column;gap:18px}@media(min-width:1100px){.insight-column{flex:0 0 33%;max-width:33%;height:100%}.canvas-card:not(.canvas-card--fullscreen){flex:0 0 calc(67% - 28px);max-width:calc(67% - 28px)}}.insight-stack{display:flex;flex-direction:column;gap:18px;flex:1;height:100%}.insight-stack .details-panel{flex:1;display:flex;flex-direction:column;gap:18px}.insight-column--hidden{display:none}@media(min-width:1100px){.canvas-card:not(.canvas-card--fullscreen){flex:1}}.canvas-header,.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.canvas-meta{display:flex;gap:12px;font-size:.9rem;color:#475569;align-items:center}.canvas-controls{display:flex;gap:8px;align-items:center}.canvas-controls select{border-radius:12px;border:1px solid rgba(67,56,202,.25);background:#ffffffeb;padding:6px 10px;font-size:.9rem;font-weight:600;color:#1e1b4b;cursor:pointer}.canvas-controls button{border-radius:12px;border:1px solid rgba(15,23,42,.15);padding:6px 12px;background:#ffffffe6;font-size:.9rem;font-weight:600;color:#0f172a;cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}.canvas-controls button:hover{transform:translateY(-1px);box-shadow:0 8px 18px #0f172a1f}.history-select{border-radius:12px;border:1px solid rgba(67,56,202,.25);padding:6px 10px;background:#ffffffe6;font-size:.9rem;font-weight:600;color:#1e1b4b;cursor:pointer}.history-select:focus{outline:2px solid rgba(67,56,202,.35);outline-offset:1px}.canvas-frame{position:relative;border-radius:20px;border:1px dashed rgba(99,102,241,.4);background:radial-gradient(circle at top,#f8fafc,#eef2ff);height:clamp(700px,calc(100vh - 220px),1200px);overflow:hidden}.fullscreen-details{position:absolute;right:24px;bottom:24px;width:min(360px,40%);max-height:55%;display:flex;flex-direction:column;gap:12px;padding:16px;background:#fffffff0;border:1px solid rgba(15,23,42,.15);border-radius:20px;box-shadow:0 20px 45px #0f172a40;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.fullscreen-details-body{overflow-y:auto;max-height:100%;padding-right:4px}.zoom-toolbar{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:10}.zoom-btn{width:44px;height:44px;border:none;border-radius:14px;background:#0f172abf;color:#f8fafc;font-size:1.4rem;line-height:1;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.zoom-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px #0f172a59}.zoom-btn--fit{font-size:.9rem;font-weight:600;letter-spacing:.08em}.zoom-btn--toggle{font-size:.75rem}.topology-canvas{width:100%;height:100%}.canvas-empty{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;color:#475569;padding:0 48px;pointer-events:none}.canvas-empty code{background:#111827;color:#f1f5f9;padding:2px 6px;border-radius:6px;font-size:.85rem}.canvas-empty .hint{font-size:.85rem;color:#94a3b8}.panel-label{text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;color:#94a3b8;margin:0}.panel-heading h2{margin:4px 0 0}.kind-pill{background:#dbeafe;color:#1d4ed8;padding:6px 12px;border-radius:999px;font-size:.85rem;font-weight:600}.detail-empty{padding:18px;border-radius:16px;background:#f8fafc;border:1px solid rgba(15,23,42,.05);color:#475569;font-size:.95rem}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.detail-grid--stacked{grid-template-columns:1fr}.link-detail{display:flex;flex-direction:column;gap:12px}.link-endpoints{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.endpoint-card{border-radius:16px;border:1px solid rgba(67,56,202,.18);padding:12px 14px;background:#f5f3ff}.endpoint-label{margin:0;font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;color:#6366f1}.endpoint-iface{margin:6px 0 0;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:.95rem;color:#0f172a}.detail-row{background:#f8fafc;border-radius:14px;border:1px solid rgba(15,23,42,.08);padding:10px 14px;display:flex;flex-direction:column;gap:4px}.detail-key{text-transform:uppercase;font-size:.65rem;letter-spacing:.2em;color:#94a3b8}.detail-value{font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:.9rem;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta-card,.tips-card,.doc-card{border-radius:18px;border:1px solid rgba(15,23,42,.08);padding:16px;background:#fdfbff}.doc-card{display:flex;flex-direction:column;gap:12px;min-height:400px;flex:2}.doc-card--empty{background:#f8fafc}.meta-heading h3{margin:4px 0 12px}.doc-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.doc-filename{background:#eef2ff;color:#4338ca;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:600}.doc-body{overflow:auto;padding-right:4px;color:#1f2937;font-size:.95rem;line-height:1.6;flex:1;max-height:clamp(640px,calc(100vh - 280px),1100px)}.doc-body h1,.doc-body h2,.doc-body h3{margin-top:16px;margin-bottom:8px}.doc-body pre{background:#0f172a;color:#f8fafc;padding:12px;border-radius:12px;overflow-x:auto}.doc-body code{font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;background:#e2e8f0;padding:2px 4px;border-radius:6px;font-size:.85rem}.doc-placeholder{margin:0;color:#64748b;font-size:.9rem}.tag-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.tag-pill{background:#eef2ff;color:#4338ca;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:600}.tag-empty{margin:12px 0 0;color:#94a3b8;font-size:.85rem}.tips-card ul{margin:8px 0 0 16px;color:#475569;padding-left:8px;line-height:1.5}.topology-footer{text-align:center;font-size:.85rem;color:#475569;padding-top:8px}