@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--ink:#0f172a;--muted:#64748b;--bg:#eef2ff;--surface:#f8fafc;--accent:#0ea5e9;--panel-bg:#f8fafceb;--panel-border:#0f172a1f;--panel-shadow:0 20px 40px -30px #0f172a99;--card-bg:#fffffff5;--card-soft:#f8fafceb;--surface-soft:#0f172a0f;--input-bg:#fffffff2;--button-bg:#fff;--menu-bg:#fff;--modal-bg:#fff;--minimap-viewport:#0f172abf;--canvas-base:linear-gradient(120deg, #f8fafc, #e2e8f0);--canvas-blueprint:linear-gradient(120deg, #e0f2fe, #bae6fd);--isp-bg:linear-gradient(135deg, #e2e8f0b3, #fffffff2);--port-input-bg:#3b82f626;--port-input-text:#1d4ed8;--port-output-bg:#10b9812e;--port-output-text:#047857;--edge-glow:#0f172a00;--edge-outline:#0f172ab3;--mono:"IBM Plex Mono", ui-monospace, monospace;--sans:"Space Grotesk", "Segoe UI", sans-serif;font-family:var(--sans);color:var(--ink);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--ink:#f8fafc;--muted:#94a3b8;--bg:#0f172a;--surface:#111827;--accent:#38bdf8;--panel-bg:#0f172aeb;--panel-border:#94a3b833;--panel-shadow:0 20px 40px -30px #020617cc;--card-bg:#0f172af5;--card-soft:#1e293bf2;--surface-soft:#94a3b829;--input-bg:#1e293be6;--button-bg:#1e293be6;--menu-bg:#0f172afa;--modal-bg:#0f172a;--minimap-viewport:#f8fafcd9;--canvas-base:linear-gradient(120deg, #0f172a, #1e293b);--canvas-blueprint:linear-gradient(120deg, #0b2239, #1e3a8a);--isp-bg:linear-gradient(135deg, #1e293bd9, #0f172afa);--port-input-bg:#3b82f647;--port-input-text:#bfdbfe;--port-output-bg:#10b98147;--port-output-text:#6ee7b7;--edge-glow:#f8fafc59;--edge-outline:#f8fafcf2;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=dracula]{--ink:#f8f8f2;--muted:#b1b1c7;--bg:#282a36;--surface:#1f2029;--accent:#bd93f9;--panel-bg:#282a36eb;--panel-border:#f8f8f224;--panel-shadow:0 20px 40px -30px #000c;--card-bg:#44475aeb;--card-soft:#44475ad9;--surface-soft:#f8f8f214;--input-bg:#44475ad9;--button-bg:#44475ae6;--menu-bg:#282a36fa;--modal-bg:#282a36;--canvas-base:linear-gradient(120deg, #282a36, #1f2029);--canvas-blueprint:linear-gradient(120deg, #20222b, #2b2d3a);--isp-bg:linear-gradient(135deg, #44475ad9, #282a36f2);--port-input-bg:#8be9fd33;--port-input-text:#8be9fd;--port-output-bg:#50fa7b2e;--port-output-text:#50fa7b;--minimap-viewport:#f8f8f2d9;--edge-glow:#f8f8f259;--edge-outline:#f8f8f2f2;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=nord]{--ink:#eceff4;--muted:#9aa4b2;--bg:#2e3440;--surface:#3b4252;--accent:#88c0d0;--panel-bg:#2e3440eb;--panel-border:#eceff429;--panel-shadow:0 20px 40px -30px #0a0c10cc;--card-bg:#3b4252f2;--card-soft:#3b4252e6;--surface-soft:#eceff41a;--input-bg:#3b4252e0;--button-bg:#3b4252eb;--menu-bg:#2e3440fa;--modal-bg:#2e3440;--canvas-base:linear-gradient(120deg, #2e3440, #242933);--canvas-blueprint:linear-gradient(120deg, #2b303b, #1f2530);--isp-bg:linear-gradient(135deg, #3b4252d9, #2e3440fa);--port-input-bg:#81a1c142;--port-input-text:#81a1c1;--port-output-bg:#a3be8c42;--port-output-text:#a3be8c;--minimap-viewport:#eceff4d9;--edge-glow:#eceff459;--edge-outline:#eceff4f2;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=monokai]{--ink:#f8f8f2;--muted:#a6a6a6;--bg:#272822;--surface:#1f201b;--accent:#f92672;--panel-bg:#272822f0;--panel-border:#f8f8f224;--panel-shadow:0 20px 40px -30px #000000d9;--card-bg:#3c3b33eb;--card-soft:#3c3b33d9;--surface-soft:#f8f8f214;--input-bg:#3c3b33e0;--button-bg:#3c3b33e6;--menu-bg:#272822fa;--modal-bg:#272822;--canvas-base:linear-gradient(120deg, #272822, #1f201b);--canvas-blueprint:linear-gradient(120deg, #20211c, #2a2b25);--isp-bg:linear-gradient(135deg, #3c3b33d9, #272822fa);--port-input-bg:#66d9ef38;--port-input-text:#66d9ef;--port-output-bg:#a6e22e38;--port-output-text:#a6e22e;--minimap-viewport:#f8f8f2d9;--edge-glow:#f8f8f259;--edge-outline:#f8f8f2f2;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=solarized-dark]{--ink:#fdf6e3;--muted:#93a1a1;--bg:#002b36;--surface:#073642;--accent:#268bd2;--panel-bg:#002b36f2;--panel-border:#fdf6e329;--panel-shadow:0 20px 40px -30px #000000d9;--card-bg:#073642eb;--card-soft:#073642d9;--surface-soft:#fdf6e314;--input-bg:#073642e0;--button-bg:#073642e6;--menu-bg:#002b36fa;--modal-bg:#002b36;--canvas-base:linear-gradient(120deg, #002b36, #073642);--canvas-blueprint:linear-gradient(120deg, #03303b, #00232c);--isp-bg:linear-gradient(135deg, #073642d9, #002b36fa);--port-input-bg:#268bd240;--port-input-text:#2aa198;--port-output-bg:#85990040;--port-output-text:#b58900;--minimap-viewport:#fdf6e3d9;--edge-glow:#fdf6e359;--edge-outline:#fdf6e3f2;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=solarized-light]{--ink:#073642;--muted:#586e75;--bg:#fdf6e3;--surface:#eee8d5;--accent:#268bd2;--panel-bg:#fdf6e3f0;--panel-border:#0736422e;--panel-shadow:0 20px 40px -30px #0736424d;--card-bg:#eee8d5f2;--card-soft:#eee8d5e6;--surface-soft:#07364214;--input-bg:#eee8d5f2;--button-bg:#fffffff2;--menu-bg:#fdf6e3;--modal-bg:#fdf6e3;--canvas-base:linear-gradient(120deg, #fdf6e3, #eee8d5);--canvas-blueprint:linear-gradient(120deg, #f7f0dc, #e8e1cd);--isp-bg:linear-gradient(135deg, #eee8d5e6, #fdf6e3fa);--port-input-bg:#268bd22e;--port-input-text:#268bd2;--port-output-bg:#8599002e;--port-output-text:#859900;--minimap-viewport:#073642b3;--edge-glow:#0736421f;--edge-outline:#07364280;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=github-dark]{--ink:#c9d1d9;--muted:#8b949e;--bg:#0d1117;--surface:#161b22;--accent:#2f81f7;--panel-bg:#0d1117f2;--panel-border:#c9d1d929;--panel-shadow:0 20px 40px -30px #000000e6;--card-bg:#161b22f5;--card-soft:#161b22e6;--surface-soft:#c9d1d914;--input-bg:#161b22e6;--button-bg:#161b22e6;--menu-bg:#0d1117fa;--modal-bg:#0d1117;--canvas-base:linear-gradient(120deg, #0d1117, #161b22);--canvas-blueprint:linear-gradient(120deg, #10151c, #0b0f14);--isp-bg:linear-gradient(135deg, #161b22e6, #0d1117fa);--port-input-bg:#2f81f740;--port-input-text:#58a6ff;--port-output-bg:#2ea04340;--port-output-text:#3fb950;--minimap-viewport:#f8fafcd9;--edge-glow:#f8fafc59;--edge-outline:#f8fafcf2;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=github-light]{--ink:#24292f;--muted:#57606a;--bg:#f6f8fa;--surface:#fff;--accent:#0969da;--panel-bg:#fffffff2;--panel-border:#24292f1f;--panel-shadow:0 20px 40px -30px #24292f40;--card-bg:#fffffff5;--card-soft:#f6f8faf2;--surface-soft:#24292f0f;--input-bg:#fffffffa;--button-bg:#fff;--menu-bg:#fff;--modal-bg:#fff;--canvas-base:linear-gradient(120deg, #f6f8fa, #fff);--canvas-blueprint:linear-gradient(120deg, #f2f6fb, #e8eef6);--isp-bg:linear-gradient(135deg, #f6f8fad9, #fffffffa);--port-input-bg:#0969da29;--port-input-text:#0969da;--port-output-bg:#2da44e29;--port-output-text:#2da44e;--minimap-viewport:#24292fb3;--edge-glow:#24292f1f;--edge-outline:#24292f99;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=one-dark]{--ink:#abb2bf;--muted:#7f848e;--bg:#282c34;--surface:#21252b;--accent:#61afef;--panel-bg:#282c34f0;--panel-border:#abb2bf29;--panel-shadow:0 20px 40px -30px #000000d9;--card-bg:#21252bf2;--card-soft:#21252be6;--surface-soft:#abb2bf14;--input-bg:#21252be6;--button-bg:#21252be6;--menu-bg:#282c34fa;--modal-bg:#282c34;--canvas-base:linear-gradient(120deg, #282c34, #21252b);--canvas-blueprint:linear-gradient(120deg, #20242b, #1b1f25);--isp-bg:linear-gradient(135deg, #21252be6, #282c34fa);--port-input-bg:#61afef40;--port-input-text:#61afef;--port-output-bg:#98c37940;--port-output-text:#98c379;--minimap-viewport:#f8fafcd9;--edge-glow:#f8fafc59;--edge-outline:#f8fafcf2;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=one-light]{--ink:#383a42;--muted:#6a6f7a;--bg:#fafafa;--surface:#fff;--accent:#4078f2;--panel-bg:#fffffff5;--panel-border:#383a421f;--panel-shadow:0 20px 40px -30px #383a4240;--card-bg:#fffffff5;--card-soft:#f8f8f8f2;--surface-soft:#383a420f;--input-bg:#fffffffa;--button-bg:#fff;--menu-bg:#fff;--modal-bg:#fff;--canvas-base:linear-gradient(120deg, #fafafa, #f5f5f5);--canvas-blueprint:linear-gradient(120deg, #f4f6fb, #e9edf6);--isp-bg:linear-gradient(135deg, #f8f8f8e6, #fffffffa);--port-input-bg:#4078f229;--port-input-text:#4078f2;--port-output-bg:#40a02b29;--port-output-text:#40a02b;--minimap-viewport:#383a4299;--edge-glow:#383a421f;--edge-outline:#383a4299;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=ayu-light]{--ink:#5c6166;--muted:#7c8187;--bg:#fafafa;--surface:#fff;--accent:#ff9940;--panel-bg:#fffffff2;--panel-border:#5c61661f;--panel-shadow:0 20px 40px -30px #5c616640;--card-bg:#fffffff5;--card-soft:#f9f9f9f2;--surface-soft:#5c61660f;--input-bg:#fffffffa;--button-bg:#fff;--menu-bg:#fff;--modal-bg:#fff;--canvas-base:linear-gradient(120deg, #fafafa, #f4f5f6);--canvas-blueprint:linear-gradient(120deg, #f5f7fa, #e9edf2);--isp-bg:linear-gradient(135deg, #f9f9f9e6, #fffffffa);--port-input-bg:#4078f229;--port-input-text:#4078f2;--port-output-bg:#ff99402e;--port-output-text:#f0873d;--minimap-viewport:#5c616699;--edge-glow:#5c61661f;--edge-outline:#5c616699;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=tokyo-night]{--ink:#c0caf5;--muted:#9aa5ce;--bg:#1a1b26;--surface:#24283b;--accent:#7aa2f7;--panel-bg:#1a1b26f0;--panel-border:#c0caf529;--panel-shadow:0 20px 40px -30px #000000d9;--card-bg:#24283bf2;--card-soft:#24283be6;--surface-soft:#c0caf514;--input-bg:#24283be6;--button-bg:#24283be6;--menu-bg:#1a1b26fa;--modal-bg:#1a1b26;--canvas-base:linear-gradient(120deg, #1a1b26, #24283b);--canvas-blueprint:linear-gradient(120deg, #1c2033, #151926);--isp-bg:linear-gradient(135deg, #24283be6, #1a1b26fa);--port-input-bg:#7aa2f742;--port-input-text:#7aa2f7;--port-output-bg:#9ece6a42;--port-output-text:#9ece6a;--minimap-viewport:#f8fafcd9;--edge-glow:#f8fafc59;--edge-outline:#f8fafcf2;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=gruvbox]{--ink:#ebdbb2;--muted:#a89984;--bg:#282828;--surface:#3c3836;--accent:#d79921;--panel-bg:#282828f0;--panel-border:#ebdbb22e;--panel-shadow:0 20px 40px -30px #000000d9;--card-bg:#3c3836f2;--card-soft:#3c3836e6;--surface-soft:#ebdbb214;--input-bg:#3c3836e6;--button-bg:#3c3836e6;--menu-bg:#282828fa;--modal-bg:#282828;--canvas-base:linear-gradient(120deg, #282828, #3c3836);--canvas-blueprint:linear-gradient(120deg, #302d2b, #241f1d);--isp-bg:linear-gradient(135deg, #3c3836e6, #282828fa);--port-input-bg:#83a59842;--port-input-text:#83a598;--port-output-bg:#b8bb2642;--port-output-text:#b8bb26;--minimap-viewport:#ebdbb2d9;--edge-glow:#ebdbb259;--edge-outline:#ebdbb2f2;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=quiet-light]{--ink:#1e1e1e;--muted:#5f6368;--bg:#f3f3f3;--surface:#fff;--accent:#0ea5e9;--panel-bg:#fffffff5;--panel-border:#1e1e1e1f;--panel-shadow:0 20px 40px -30px #1e1e1e40;--card-bg:#fffffff5;--card-soft:#f5f5f5f2;--surface-soft:#1e1e1e0f;--input-bg:#fffffffa;--button-bg:#fff;--menu-bg:#fff;--modal-bg:#fff;--canvas-base:linear-gradient(120deg, #f3f3f3, #fafafa);--canvas-blueprint:linear-gradient(120deg, #f1f5fb, #e9edf5);--isp-bg:linear-gradient(135deg, #f5f5f5e6, #fffffffa);--port-input-bg:#0ea5e929;--port-input-text:#0284c7;--port-output-bg:#10b98129;--port-output-text:#059669;--minimap-viewport:#1e1e1e99;--edge-glow:#1e1e1e1f;--edge-outline:#1e1e1e99;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme]){--ink:#f8fafc;--muted:#94a3b8;--bg:#0f172a;--surface:#111827;--accent:#38bdf8;--panel-bg:#0f172aeb;--panel-border:#94a3b833;--panel-shadow:0 20px 40px -30px #020617cc;--card-bg:#0f172af5;--card-soft:#1e293bf2;--surface-soft:#94a3b829;--input-bg:#1e293be6;--button-bg:#1e293be6;--menu-bg:#0f172afa;--modal-bg:#0f172a;--minimap-viewport:#f8fafcd9;--canvas-base:linear-gradient(120deg, #0f172a, #1e293b);--canvas-blueprint:linear-gradient(120deg, #0b2239, #1e3a8a);--isp-bg:linear-gradient(135deg, #1e293bd9, #0f172afa);--port-input-bg:#3b82f647;--port-input-text:#bfdbfe;--port-output-bg:#10b98147;--port-output-text:#6ee7b7;--edge-glow:#f8fafc59;--edge-outline:#f8fafcf2;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0;overflow:hidden}#root{min-height:100vh}input,button,select{font-family:var(--sans)}button{background:0 0;border:none}.app-shell{width:100vw;height:100vh;position:relative;overflow:hidden}.topbar{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--panel-shadow);border-radius:20px;justify-content:space-between;align-items:flex-start;gap:24px;padding:16px 20px;display:flex;position:absolute;top:16px;left:16px;right:16px}.topbar-compact{justify-content:space-between;align-items:center;gap:12px;width:100%;display:none}.topbar-compact-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.topbar-body{justify-content:space-between;align-items:flex-start;gap:24px;width:100%;display:flex}.topbar-min .topbar-body{display:none}.topbar-min .topbar-compact{display:flex}.compact-title{color:var(--ink);font-weight:600}.eyebrow{text-transform:uppercase;letter-spacing:.32em;color:var(--muted);margin:0 0 10px;font-size:11px}.title-row{gap:6px;max-width:360px;display:grid}.title-row label{text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-size:11px}.title-row input{border:1px solid var(--panel-border);background:var(--input-bg);color:var(--ink);border-radius:12px;padding:8px 12px;font-size:20px;font-weight:600}.diagram-meta{color:var(--muted);flex-wrap:wrap;gap:12px;margin-top:8px;font-size:12px;display:flex}.page-bar{flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;display:flex}.page-bar-actions{flex-flow:row;align-items:center;min-width:160px;margin-top:0}.page-bar-compact{max-width:520px}.page-select{border:1px solid var(--panel-border);background:var(--input-bg);color:var(--ink);border-radius:12px;padding:6px 10px;font-size:12px}.page-edit-input{border:1px solid var(--panel-border);background:var(--input-bg);color:var(--ink);border-radius:12px;min-width:140px;padding:6px 10px;font-size:12px}.page-label{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-size:11px}.page-pill{border:1px solid var(--panel-border);background:var(--button-bg);cursor:pointer;border-radius:999px;padding:6px 12px;font-size:12px}.page-item{align-items:center;gap:6px;display:flex}.page-remove{border:1px solid var(--panel-border);background:var(--button-bg);width:22px;height:22px;color:var(--muted);cursor:pointer;border-radius:999px;font-size:14px;line-height:1}.page-pill-active{color:var(--accent);background:#0ea5e933;border-color:#0ea5e980}.page-add{border:1px dashed var(--panel-border);cursor:pointer;background:0 0;border-radius:999px;padding:6px 12px;font-size:12px}.import-error{color:#b91c1c;margin:8px 0 0;font-size:12px}.topbar-actions{flex-wrap:wrap;align-items:flex-start;gap:10px;display:flex}.topbar-user{color:var(--muted);flex-direction:column;flex-basis:100%;align-items:flex-end;gap:2px;margin-top:6px;font-size:12px;display:flex}.topbar-user span:first-child{color:var(--ink);font-weight:600}.topbar-user-email{color:var(--muted)}.topbar-menu{position:relative}.menu-dropdown{background:var(--menu-bg);border:1px solid var(--panel-border);min-width:220px;box-shadow:var(--panel-shadow);z-index:20;border-radius:14px;gap:6px;padding:8px;display:grid;position:absolute;top:calc(100% + 8px);right:0}.menu-item{text-align:left;color:var(--ink);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;font-size:13px;font-weight:600;display:flex}.menu-shortcut{letter-spacing:.04em;color:var(--muted);white-space:nowrap;font-size:11px;font-weight:600}.menu-item:hover{background:var(--button-bg);border-color:var(--panel-border)}.menu-item:disabled{opacity:.6;cursor:not-allowed}.menu-toggle{justify-content:space-between;align-items:center;gap:12px;display:flex}.menu-toggle-state{text-transform:uppercase;letter-spacing:.16em;background:var(--surface-soft);color:var(--muted);border-radius:999px;padding:2px 6px;font-size:10px}.menu-item[aria-pressed=true] .menu-toggle-state{color:var(--accent);background:#0ea5e92e}.zoom-controls{align-items:center;gap:6px;display:flex}.zoom-label{color:var(--muted);font-size:12px}.button{border:1px solid var(--panel-border);background:var(--button-bg);color:var(--ink);cursor:pointer;border-radius:12px;padding:8px 14px;font-size:13px;font-weight:600}.button-primary{color:#fff;background:#0ea5e9;border-color:#0000}.button-secondary{background:var(--surface-soft)}.minimize-button{border:1px solid var(--panel-border);background:var(--button-bg);cursor:pointer;border-radius:999px;padding:6px 12px;font-size:12px}.canvas{cursor:grab;position:absolute;inset:0;overflow:hidden}.canvas.selection-mode{cursor:crosshair}.canvas:active{cursor:grabbing}.canvas.grid-lines{background:radial-gradient(circle at top right, #0ea5e92e, transparent 45%), radial-gradient(circle at 20% 80%, #0f172a14, transparent 55%), linear-gradient(#94a3b859 1px, transparent 1px), linear-gradient(90deg, #94a3b859 1px, transparent 1px), var(--canvas-base);background-size:auto,auto,32px 32px,32px 32px,auto}.canvas.grid-dots{background:radial-gradient(circle at top right, #0ea5e929, transparent 45%), radial-gradient(circle at 20% 80%, #0f172a14, transparent 55%), radial-gradient(#94a3b880 1px, transparent 1px), var(--canvas-base);background-size:auto,auto,26px 26px,auto}.canvas.grid-blueprint{background:radial-gradient(circle at top right, #7dd3fc33, transparent 45%), linear-gradient(#38bdf826 1px, transparent 1px), linear-gradient(90deg, #38bdf826 1px, transparent 1px), var(--canvas-blueprint);background-size:auto,28px 28px,28px 28px,auto}.canvas.grid-isometric{background:radial-gradient(circle at top right, #0ea5e924, transparent 45%), linear-gradient(30deg, #94a3b84d 1px, transparent 1px), linear-gradient(150deg, #94a3b84d 1px, transparent 1px), linear-gradient(90deg, #94a3b833 1px, transparent 1px), var(--canvas-base);background-size:auto,32px 32px,32px 32px,32px 32px,auto}.edge-layer{pointer-events:auto;shape-rendering:geometricprecision;width:100%;height:100%;position:absolute;inset:0}.edge{fill:none;stroke-width:2.5px;opacity:.9;pointer-events:none;cursor:pointer;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--edge-glow))}.edge-hit{fill:none;stroke:#0000;stroke-width:14px;pointer-events:stroke}.edge-selected{stroke-width:3.5px}.edge-selected-outline{opacity:.55;pointer-events:none}.edge-port-active{opacity:.98;filter:drop-shadow(0 0 6px #0ea5e9a6)}.edge-invalid-overlay{pointer-events:none;opacity:0;animation:1.2s ease-in-out infinite edgeBlink}@keyframes edgeBlink{0%,to{opacity:0}50%{opacity:1}}.edge-label-highlight{fill:var(--accent);font-weight:600}.edge-label{fill:var(--ink);paint-order:stroke;stroke:var(--panel-bg);stroke-width:6px;pointer-events:none;font-size:12px}.edge-preview{opacity:.5}.node-layer{transform-origin:0 0;pointer-events:none;position:absolute;inset:0}.selection-rect{border:1px dashed var(--accent);pointer-events:none;background:#0ea5e91f;border-radius:12px;position:absolute;top:0;left:0}.export-stage{position:absolute;inset:0}.export-stage .node{box-shadow:none}.export-stage .edge{opacity:1;stroke-opacity:1;filter:none!important}.export-clone{font-family:var(--sans);color:var(--ink)}.export-clone button{color:inherit;appearance:none}.export-clone .ports{flex-direction:column;gap:8px;display:flex}.export-clone .port-row{align-items:center;gap:8px;display:flex}.export-clone .port-direction{order:1}.export-clone .port-name{flex:1;order:2}.export-clone .port-dot{order:3}.export-clone .port-row-input .port-dot{order:1}.export-clone .port-row-input .port-name{order:2}.export-clone .port-row-input .port-direction{order:3}.print-frame{pointer-events:none;border:2px dashed #94a3b899;border-radius:16px;position:absolute;top:0;left:0}.print-frame-label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--panel-bg);border-radius:999px;padding:2px 8px;font-size:11px;position:absolute;top:-20px;left:12px}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:20px;padding:16px}.panel-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.panel-body{gap:12px;margin-top:12px;display:grid}.panel-minimized .panel-body{display:none}.panel h2{color:var(--ink);margin:0;font-size:18px}.panel h3{color:var(--ink);margin:0;font-size:15px}.panel-note{color:var(--muted);margin:0;font-size:13px}.floating{position:absolute}.palette{flex-direction:column;width:260px;display:flex;left:16px}.outline{flex-direction:column;width:260px;display:flex;left:16px;overflow:hidden}.outline .panel-body{flex-direction:column;flex:1;gap:12px;min-height:0;padding-right:4px;display:flex;overflow:auto}.palette .panel-body{flex:1;min-height:0;padding-right:4px;overflow:auto}.minimap{background:var(--panel-bg);border:1px solid var(--panel-border);width:220px;box-shadow:var(--panel-shadow);border-radius:18px;padding:12px;bottom:20px;right:16px}.minimap-title{text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin:0 0 8px;font-size:11px}.minimap-canvas{width:100%;height:auto;display:block}.inspector{width:380px;right:16px;overflow:auto}.device-grid{grid-template-columns:repeat(1,1fr);gap:8px;display:grid}.outline-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.outline-section-scroll{flex-direction:column;flex:none;gap:8px;min-height:0;display:flex}.outline-scroll{display:contents}.panel.panel-minimized .panel-body{display:none!important}.outline-item{align-items:center;gap:8px;display:flex}.outline-link{text-align:left;border:1px solid var(--panel-border);background:var(--surface-soft);color:var(--ink);cursor:pointer;border-radius:10px;flex:1;gap:2px;padding:6px 8px;font-size:12px;display:grid}.outline-item-active .outline-link{background:#0ea5e926;border-color:#0ea5e999}.outline-title{font-weight:600}.outline-meta{color:var(--muted);font-size:11px}.device-grid.scrollable{max-height:none;padding-right:0;overflow:visible}.device-button{border:1px solid var(--panel-border);background:var(--button-bg);color:var(--ink);cursor:pointer;border-radius:14px;align-items:center;gap:8px;padding:8px 10px;font-size:12px;font-weight:600;transition:transform .2s,box-shadow .2s;display:flex}.device-button:hover{transform:translateY(-1px);box-shadow:0 12px 20px -12px #0f172a66}.device-badge{letter-spacing:.08em;background:var(--accent);color:#fff;border-radius:10px;justify-content:center;align-items:center;width:28px;height:28px;font-size:11px;font-weight:700;display:inline-flex}.device-name{color:#fff;background:#0f172a;border-radius:8px;padding:4px 8px;font-weight:700}.device-meta{color:var(--muted);margin-left:auto;font-size:11px}.device-icon{background:var(--surface-soft);border:2px solid #0000;border-radius:10px;padding:6px 9px;font-size:11px}.device-meta{color:var(--muted);grid-column:2;font-size:11px;font-weight:500}.connector-picker{flex-direction:column;gap:8px;display:flex}.chip{cursor:pointer;border:1px solid #0000;border-radius:12px;align-items:center;gap:10px;padding:8px 12px;font-weight:600;display:flex}.chip-idle{color:var(--muted);background:#0f172a0f}.chip-active{color:var(--ink);background:#0f172a1a;border-color:#0f172a33}.chip-dot{border-radius:999px;width:10px;height:10px}.hint{color:var(--muted);margin:0;font-size:12px}.status-box{background:var(--surface-soft);border-radius:14px;padding:10px}.mounted-box{gap:8px;display:grid}.mounted-actions{justify-content:flex-end;display:flex}.status-title{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 6px;font-size:11px;font-weight:700}.status-detail{color:var(--ink);margin:0;font-size:13px}.divider{background:var(--panel-border);height:1px;margin:12px 0}.node{background:var(--card-bg);border:1px solid var(--panel-border);cursor:grab;-webkit-user-select:none;user-select:none;pointer-events:auto;border-radius:18px;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 16px 40px -28px #0f172ab3}.node-accent{height:6px;position:absolute;inset:0 0 auto}.node-isp{background:var(--isp-bg);border-style:dashed;border-radius:28px}.node-selected{border-color:#0ea5e999;box-shadow:0 18px 40px -24px #0ea5e999}.node-cyclic{animation:1.1s ease-in-out infinite nodeCycleBlink}@keyframes nodeCycleBlink{0%,to{border-color:#ef444473;box-shadow:0 0 #ef44440d}50%{border-color:#ef4444f2;box-shadow:0 0 18px 4px #ef444459}}.node-mounted{cursor:default}.node-header{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;height:38px;padding:0 12px;display:flex}.node-header-actions{gap:6px;display:flex}.node-type{letter-spacing:.12em;text-transform:uppercase;background:var(--surface-soft);border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700}.node-title{color:var(--ink);padding:12px 16px 4px;font-weight:600}.node-summary{color:var(--muted);gap:12px;padding:6px 16px 10px;font-size:12px;display:flex}.node-attributes{color:var(--muted);gap:4px;padding:4px 16px 0;font-size:12px;display:grid}.node-attributes div{justify-content:space-between;gap:8px;display:flex}.rack-list{color:var(--muted);gap:6px;margin:8px 16px 0;font-size:12px;display:grid}.rack-list div{background:var(--surface-soft);border-radius:10px;justify-content:space-between;gap:8px;padding:6px 8px;display:flex}.rack-empty{background:var(--surface-soft);border-radius:10px;padding:6px 8px}.ports{gap:8px;padding:10px 16px 16px;display:grid}.node-warning{color:#ef4444;background:#ef444429;border-radius:10px;margin:6px 16px 12px;padding:4px 10px;font-size:12px;font-weight:600;line-height:1.1}.port-row{border:1px solid var(--panel-border);background:var(--card-soft);color:var(--ink);cursor:pointer;border-radius:10px;grid-template-columns:auto 1fr auto;grid-template-areas:"dir name dot";align-items:center;gap:8px;padding:6px 10px;font-size:13px;display:grid}.port-row-input{grid-template-areas:"dot name dir"}.port-direction{grid-area:dir}.port-name{text-align:left;grid-area:name}.port-dot{grid-area:dot}.port-row:hover{border-color:#0ea5e966}.port-direction{text-transform:uppercase;letter-spacing:.16em;background:var(--surface-soft);color:var(--muted);border-radius:999px;padding:2px 6px;font-size:10px}.port-direction-input{background:var(--port-input-bg);color:var(--port-input-text)}.port-direction-output{background:var(--port-output-bg);color:var(--port-output-text)}.port-dot{background:var(--muted);border-radius:999px;width:10px;height:10px}.port-active{border-color:#0ea5e9;box-shadow:0 0 0 2px #0ea5e933}.port-active .port-dot{animation:1.6s ease-in-out infinite portPulse}@keyframes portPulse{0%{box-shadow:0 0 #0ea5e999}70%{box-shadow:0 0 0 8px #0ea5e900}to{box-shadow:0 0 #0ea5e900}}@keyframes portPulseInvalid{0%{box-shadow:0 0 #ef444499}70%{box-shadow:0 0 0 8px #ef444400}to{box-shadow:0 0 #ef444400}}.port-active .port-dot{background:#0ea5e9}.port-connected{border-color:#16a34a66}.port-connected .port-dot,.port-active.port-connected .port-dot{background:#16a34a}.port-invalid{border-color:#ef444499}.port-invalid .port-dot{background:#ef4444}.port-active.port-invalid .port-dot{background:#ef4444;animation:1.6s ease-in-out infinite portPulseInvalid,1.2s ease-in-out infinite portBlinkInvalid}@keyframes portBlinkInvalid{0%,to{background:#ef4444}50%{background:#111827}}.ghost{color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:12px}.inspector-body{gap:12px;display:grid}.field{gap:6px;display:grid}.field label{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-size:11px}.field input,.field textarea,.field select,.port-edit-row select,.rack-unit-row select,.config-row select{border:1px solid var(--panel-border);background:var(--input-bg);color:var(--ink);border-radius:12px;padding:8px 10px}.field textarea{resize:vertical;min-height:120px;font-family:inherit}.port-edit-row select,.rack-unit-row select,.config-row select{font-size:12px}.checkbox{color:var(--muted);align-items:center;gap:6px;font-size:11px;display:flex}.toggle{color:var(--muted);cursor:pointer;align-items:center;gap:10px;font-size:12px;display:inline-flex}.toggle input{display:none}.toggle-track{background:var(--surface-soft);border:1px solid var(--panel-border);border-radius:999px;align-items:center;width:42px;height:22px;padding:2px;transition:background .2s,border-color .2s;display:inline-flex}.toggle-thumb{background:var(--button-bg);border-radius:999px;width:18px;height:18px;transition:transform .2s,background .2s;transform:translate(0);box-shadow:0 6px 16px -10px #0f172a99}.toggle input:checked+.toggle-track{background:#0ea5e940;border-color:#0ea5e980}.toggle input:checked+.toggle-track .toggle-thumb{background:#0ea5e9;transform:translate(20px)}.toggle-label{color:var(--ink);font-weight:600}.pill{color:var(--ink);background:#0f172a1a;border-radius:999px;width:fit-content;padding:6px 12px;font-size:13px;font-weight:600}.section-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.section-toggle{text-transform:uppercase;letter-spacing:.1em;font-size:11px}.attribute-list{gap:10px;display:grid}.attr-row{grid-template-columns:1fr 1fr auto auto;align-items:center;gap:8px;display:grid}.port-edit-row{grid-template-columns:1fr 110px auto;align-items:center;gap:8px;display:grid}.rack-unit-row{gap:8px;display:grid}.rack-unit-line{grid-template-columns:1fr 70px auto auto;align-items:center;gap:8px;display:grid}.rack-unit-line-secondary{grid-template-columns:1fr auto}.rack-mounted{color:var(--ink);font-size:12px}.attr-row input,.port-edit-row input,.rack-unit-row input,.config-row input,.config-row-device input{border:1px solid var(--panel-border);background:var(--input-bg);color:var(--ink);border-radius:10px;padding:6px 8px;font-size:13px}.connection-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.connection-list li{background:var(--surface-soft);border-radius:12px;grid-template-columns:12px 1fr auto;align-items:center;gap:10px;padding:8px 10px;display:grid}.connection-dot{background:var(--muted);border-radius:999px;width:8px;height:8px}.connection-dot-valid{background:#16a34a}.connection-dot-invalid{background:#ef4444}.connection-list p{color:var(--ink);margin:0;font-size:14px}.connection-meta{color:var(--muted);font-size:12px}.modal-backdrop{z-index:5000;background:#0f172a73;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--modal-bg);border-radius:20px;width:min(760px,92vw);max-height:90vh;padding:20px;overflow:auto;box-shadow:0 40px 80px -40px #0f172a99}.modal-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.modal-tabs{flex-wrap:wrap;gap:10px;margin-top:12px;display:flex}.tab{border:1px solid var(--panel-border);background:var(--button-bg);cursor:pointer;border-radius:999px;padding:6px 14px;font-size:12px}.tab-active{color:var(--accent);background:#0ea5e933;border-color:#0ea5e980}.modal-body{gap:20px;margin-top:16px;display:grid}.modal-body section{gap:12px;display:grid}.danger-zone{gap:10px;display:grid}.danger-zone .button{width:fit-content}.modal-note{color:var(--muted);margin:0;font-size:12px}.shortcut-table{border-collapse:collapse;width:100%;color:var(--ink);font-size:13px}.shortcut-table th,.shortcut-table td{text-align:left;border-bottom:1px solid var(--panel-border);padding:8px 10px}.shortcut-table th{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:11px}.modal-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.login-grid{gap:12px;margin-top:12px;display:grid}.account-meta{border:1px solid var(--panel-border);background:var(--surface-soft);color:var(--muted);border-radius:14px;justify-content:space-between;align-items:center;gap:12px;margin:12px 0;padding:10px 12px;font-size:12px;display:flex}.login-button{justify-content:center;align-items:center;font-weight:600;display:inline-flex}.login-google{color:#111827;background:#fff;border-color:#11182733}.login-apple{color:#fff;background:#111827;border-color:#0000}.login-github{color:#fff;background:#24292f;border-color:#0000}.login-facebook{color:#fff;background:#1877f2;border-color:#0000}.plan-features{color:var(--ink);gap:6px;padding-left:18px;list-style:outside;display:grid}.plan-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:10px;display:grid}.plan-card{border:1px solid var(--panel-border);background:var(--card-bg);text-align:left;cursor:pointer;border-radius:16px;padding:14px;transition:border-color .2s,box-shadow .2s}.plan-card:hover{border-color:#0ea5e973}.plan-card-active{border-color:#0ea5e9;box-shadow:0 0 0 3px #0ea5e92e}.plan-title{color:var(--ink);font-size:14px;font-weight:700}.plan-price{color:var(--muted);margin-top:4px;font-size:12px}.plan-note{color:var(--muted);margin-top:8px;font-size:12px}.plan-note-highlight{color:#0ea5e9;font-weight:600}.ticket-list{gap:10px;margin-top:16px;display:grid}.ticket-card{border:1px solid var(--panel-border);background:var(--surface-soft);border-radius:14px;padding:10px 12px}.ticket-header{color:var(--ink);justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:600;display:flex}.ticket-meta{color:var(--muted);font-size:11px;font-weight:500}.ticket-details{color:var(--muted);margin-top:6px;font-size:12px;line-height:1.4}.export-preview{border:1px solid var(--panel-border);background:var(--surface-soft);border-radius:14px;place-items:center;min-height:180px;padding:10px;display:grid;overflow:hidden}.export-preview img{border-radius:10px;max-width:100%;max-height:260px;display:block}.scale-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;display:grid}.scale-card{border:1px solid var(--panel-border);background:var(--button-bg);cursor:pointer;text-align:center;color:var(--ink);border-radius:14px;justify-items:center;gap:8px;padding:10px;display:grid}.scale-card-active{border-color:#0ea5e999;box-shadow:0 12px 24px -18px #0ea5e999}.scale-preview{border:1px dashed var(--panel-border);background:var(--surface-soft);border-radius:8px;place-items:center;width:100%;max-width:90px;height:54px;font-size:14px;font-weight:600;display:grid}.scale-label{font-size:12px;font-weight:600}.theme-options{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;display:grid}.theme-option{border:1px solid var(--panel-border);background:var(--button-bg);color:var(--ink);cursor:pointer;text-align:left;border-radius:12px;padding:10px 12px;font-size:13px;font-weight:600}.theme-option-active{color:var(--accent);background:#0ea5e933;border-color:#0ea5e980}.print-format-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;display:grid}.print-format-card{border:1px solid var(--panel-border);background:var(--button-bg);cursor:pointer;text-align:center;color:var(--ink);border-radius:14px;justify-items:center;gap:8px;padding:10px;display:grid}.print-format-card-active{border-color:#0ea5e999;box-shadow:0 12px 24px -18px #0ea5e999}.print-format-preview{border:1px dashed var(--panel-border);background:var(--surface-soft);border-radius:8px;place-items:center;width:100%;max-width:120px;display:grid}.print-format-preview-none{background:0 0;border-style:solid}.print-format-none{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:11px}.print-format-label{font-size:12px;font-weight:600}.config-list{gap:10px;display:grid}.config-row{grid-template-columns:1fr 120px 120px 110px;align-items:center;gap:10px;display:grid}.config-row-device{grid-template-columns:1fr 110px 70px auto auto auto}.config-row input[type=color]{background:0 0;border:none;height:36px}.config-row-add{grid-template-columns:1fr 120px 120px 120px auto}.config-row-add-device{grid-template-columns:1fr 120px 70px auto auto auto}.grid-options{flex-wrap:wrap;gap:8px;display:flex}.grid-option{border:1px solid var(--panel-border);background:var(--button-bg);cursor:pointer;border-radius:999px;padding:6px 12px;font-size:12px}.grid-option-active{color:var(--accent);background:#0ea5e933;border-color:#0ea5e980}.edge-menu{background:var(--menu-bg);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:12px;padding:8px;position:fixed}.edge-menu-item{background:var(--button-bg);color:var(--ink);border:1px solid var(--panel-border);cursor:pointer;border-radius:8px;padding:6px 10px;font-size:12px}.print-surface{width:100%;height:100%}.print-a4-portrait{page:print-a4-portrait}.print-a4-landscape{page:print-a4-landscape}.print-letter-portrait{page:print-letter-portrait}.print-letter-landscape{page:print-letter-landscape}@page print-a4-portrait{size:A4 portrait;margin:12mm}@page print-a4-landscape{size:A4 landscape;margin:12mm}@page print-letter-portrait{size:Letter portrait;margin:12mm}@page print-letter-landscape{size:Letter landscape;margin:12mm}@media print{body{background:#fff}.topbar,.palette,.inspector,.minimap,.edge-menu,.modal-backdrop{display:none!important}.canvas{width:100%;height:100%;position:static;inset:auto}.print-frame{display:none}.node{box-shadow:none}}@media (width<=1000px){.topbar-body{flex-direction:column;align-items:flex-start}.palette{top:180px}.inspector{width:320px}.minimap{display:none}}@media (width<=700px){.topbar{gap:16px;padding:12px 14px;left:10px;right:10px}.topbar-body{gap:16px}.topbar-actions{flex-direction:column;align-items:stretch;width:100%}.page-bar-actions{flex-wrap:wrap;width:100%}.page-select,.page-edit-input{width:100%}.menu-dropdown{min-width:unset;left:0;right:0}.floating{position:fixed}.palette,.outline,.inspector{width:auto;max-width:none;max-height:calc(100vh - 260px);left:10px;right:10px}.panel{border-radius:16px;padding:12px}.panel h2{font-size:16px}.panel h3{font-size:14px}}
