@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:Inter,Segoe UI,system-ui,sans-serif}:root,:root[data-theme=dark]{color-scheme:dark;--c4-bg: #1e1e2e;--c4-bg-surface: #181825;--c4-bg-overlay: #313244;--c4-bg-subtle: #45475a;--c4-border: #313244;--c4-border-muted: #45475a;--c4-text: #cdd6f4;--c4-text-2: #a6adc8;--c4-text-3: #6c7086;--c4-text-4: #585b70;--c4-accent: #89b4fa;--c4-accent-dim: rgba(137,180,250,.12);--c4-accent-border: rgba(137,180,250,.25);--c4-accent-bg: #1a3a5a;--c4-accent-bg-h: #1f4875;--c4-cyan: #89dceb;--c4-cyan-2: #74c7ec;--c4-yellow: #dcb67a;--c4-purple: #cba6f7;--c4-purple-2: #c3aff0;--c4-ok: #a6e3a1;--c4-ok-dim: rgba(166,227,161,.07);--c4-ok-border: rgba(166,227,161,.25);--c4-warn: #f9e2af;--c4-warn-dim: rgba(249,226,175,.07);--c4-warn-border: rgba(249,226,175,.2);--c4-err: #f38ba8;--c4-err-dim: rgba(243,139,168,.1);--c4-err-border: rgba(243,139,168,.35);--c4-ex-bg: #252526;--c4-ex-text: #cccccc;--c4-ex-text-2: #bbbbbb;--c4-ex-header-bg: #1e1e1e;--c4-ex-header-border: #333333;--c4-ex-header-text: #bbbbbb;--c4-ex-item-hover: #2a2d2e;--c4-ex-item-active: #094771;--c4-ex-item-active-h: #0e5a8a;--c4-ex-rename-bg: #3c3c3c;--c4-ex-rename-border: #007acc;--c4-ex-rename-text: #d4d4d4;--c4-ex-btn-hover: #3c3c3c;--c4-ex-scrollbar: #424242;--c4-ex-ctx-bg: #252526;--c4-ex-ctx-border: #454545;--c4-ex-ctx-hover: #094771;--c4-ex-ctx-danger-h: #6b1a1a;--c4-ex-empty-bg: #2d2d2d;--c4-ex-empty-border: #454545;--c4-proj-bar-bg: #1a1a2e;--c4-proj-bar-border: #2a2a3e;--c4-proj-list-sep: #181825;--c4-proj-list-hover: #2a2a3c;--c4-proj-active-bg: #1a3a5a;--c4-node-ctx-fill: #1e3a5f;--c4-node-ctx-stroke: #89b4fa;--c4-node-ctr-fill: #1a3a5a;--c4-node-ctr-stroke: #89dceb;--c4-node-cmp-fill: #1a3a4a;--c4-node-cmp-stroke: #74c7ec;--c4-node-code-fill: #2d1a4a;--c4-node-code-stroke: #cba6f7;--c4-node-text: #e2e8f0;--c4-node-text-sub: #94a3b8;--c4-node-edge: #89b4fa;--c4-canvas-bg: #11111b;--c4-canvas-grid: rgba(255,255,255,.04);--c4-avatar-bg: #1a3a5a;--c4-scrollbar: #313244;--c4-shadow: rgba(0,0,0,.5);--c4-shadow-lg: rgba(0,0,0,.65);--c4-overlay-bg: rgba(0,0,0,.55);--c4-skel-from: #313244;--c4-skel-to: #3a3a52;--bg: #0D0F18;--surface: #161926;--surface2:#11131E;--border: #252839;--border2: #1E2132;--text1: #ECEEF5;--text2: #B0B8CC;--muted: #545C72;--hover: #1E2132;--canvas: #0B0D16;--dot: #252839;--input: #11131E;--code: #11131E}:root[data-theme=light]{color-scheme:light;--c4-bg: #eff1f5;--c4-bg-surface: #e6e9ef;--c4-bg-overlay: #dce0e8;--c4-bg-subtle: #ccd0da;--c4-border: #ccd0da;--c4-border-muted: #acb0be;--c4-text: #4c4f69;--c4-text-2: #5c5f77;--c4-text-3: #6c6f85;--c4-text-4: #8c8fa1;--c4-accent: #1e66f5;--c4-accent-dim: rgba(30,102,245,.1);--c4-accent-border: rgba(30,102,245,.3);--c4-accent-bg: #dbeafe;--c4-accent-bg-h: #bfdbfe;--c4-cyan: #04a5e5;--c4-cyan-2: #179299;--c4-yellow: #df8e1d;--c4-purple: #8839ef;--c4-purple-2: #7287fd;--c4-ok: #40a02b;--c4-ok-dim: rgba(64,160,43,.1);--c4-ok-border: rgba(64,160,43,.3);--c4-warn: #df8e1d;--c4-warn-dim: rgba(223,142,29,.08);--c4-warn-border: rgba(223,142,29,.25);--c4-err: #d20f39;--c4-err-dim: rgba(210,15,57,.08);--c4-err-border: rgba(210,15,57,.3);--c4-ex-bg: #f3f3f3;--c4-ex-text: #3b3b3b;--c4-ex-text-2: #555555;--c4-ex-header-bg: #e8e8e8;--c4-ex-header-border: #cccccc;--c4-ex-header-text: #444444;--c4-ex-item-hover: #e4e6ea;--c4-ex-item-active: #0060c0;--c4-ex-item-active-h: #0070d8;--c4-ex-rename-bg: #ffffff;--c4-ex-rename-border: #0078d4;--c4-ex-rename-text: #1e1e1e;--c4-ex-btn-hover: #e0e0e0;--c4-ex-scrollbar: #c0c4cc;--c4-ex-ctx-bg: #ffffff;--c4-ex-ctx-border: #cccccc;--c4-ex-ctx-hover: #0060c0;--c4-ex-ctx-danger-h: #b01010;--c4-ex-empty-bg: #e8e8e8;--c4-ex-empty-border: #cccccc;--c4-proj-bar-bg: #e0e4ec;--c4-proj-bar-border: #ccd0da;--c4-proj-list-sep: #e6e9ef;--c4-proj-list-hover: #dce0e8;--c4-proj-active-bg: #dbeafe;--c4-node-ctx-fill: #dbeafe;--c4-node-ctx-stroke: #1e66f5;--c4-node-ctr-fill: #e0f9ff;--c4-node-ctr-stroke: #04a5e5;--c4-node-cmp-fill: #ecfeff;--c4-node-cmp-stroke: #179299;--c4-node-code-fill: #f3e8ff;--c4-node-code-stroke: #8839ef;--c4-node-text: #1e293b;--c4-node-text-sub: #475569;--c4-node-edge: #1e66f5;--c4-canvas-bg: #f8f9fc;--c4-canvas-grid: rgba(0,0,0,.05);--c4-avatar-bg: #dbeafe;--c4-scrollbar: #bcc0cc;--c4-shadow: rgba(0,0,0,.12);--c4-shadow-lg: rgba(0,0,0,.18);--c4-overlay-bg: rgba(0,0,0,.3);--c4-skel-from: #dce0e8;--c4-skel-to: #ccd0da;--bg: #F7F6F4;--surface: #FFFFFF;--surface2:#F7F6F4;--border: #E5E3DF;--border2: #F0EEE9;--text1: #1A1A1A;--text2: #374151;--muted: #94A3B8;--hover: #F0EEE9;--canvas: #EAE8E3;--dot: #C8C2BA;--input: #F7F6F4;--code: #F7F6F4}html,body{background:var(--c4-bg);color:var(--c4-text)}html,body{font-family:DM Sans,Inter,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--dot, #D4D0CA);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--muted, #94A3B8)}input:focus,textarea:focus,button:focus-visible{outline:none}input:focus,textarea:focus{border-color:#2563eb!important}@keyframes drillIn{0%{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes drillOut{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes slideRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes spinIcon{to{transform:rotate(360deg)}}.anim-drill-in{animation:drillIn .32s cubic-bezier(.22,1,.36,1) both}.anim-drill-out{animation:drillOut .28s cubic-bezier(.22,1,.36,1) both}.anim-slide-right{animation:slideRight .22s ease both}.anim-fade-up{animation:fadeUp .2s ease both}.canvas-grid{background-color:var(--canvas, #EAE8E3);background-image:radial-gradient(circle,var(--dot, #C8C2BA) 1px,transparent 1px);background-size:24px 24px}.icon-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:5px;border-radius:5px;color:#64748b;transition:background .1s;font-family:inherit}.icon-btn:hover{background:var(--hover, #F0EEE9)}.icon-btn[disabled],.icon-btn:disabled{opacity:.4;cursor:not-allowed}.level-tab{padding:5px 13px;border-radius:20px;font-size:12.5px;font-weight:500;cursor:pointer;transition:all .15s;border:none;background:transparent;color:var(--muted, #94A3B8);font-family:DM Sans,sans-serif;white-space:nowrap;line-height:1.4}.level-tab:hover:not(.active){background:var(--hover, #F0EEE9);color:var(--text2, #374151)}.level-tab.active{background:var(--text1, #1A1A1A);color:#fff}.level-tab.visited{color:var(--text2, #374151)}.level-tab.locked{opacity:.38;cursor:not-allowed;pointer-events:none}.el-card{position:absolute;border-radius:9px;border:1.5px solid;cursor:pointer;transition:transform .15s,box-shadow .15s;-webkit-user-select:none;user-select:none}.el-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px #00000017}.el-card.selected{box-shadow:0 0 0 2.5px #2563eb,0 8px 24px #2563eb24!important}.el-card.dragging{box-shadow:0 14px 40px #00000026;transform:scale(1.03);z-index:20;transition:box-shadow .1s,transform .1s}.drill-btn{position:absolute;bottom:-11px;right:-11px;width:26px;height:26px;border-radius:50%;border:2px solid white;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;box-shadow:0 2px 10px #0000002e;z-index:10}.el-card:hover .drill-btn{opacity:1;pointer-events:auto}.drill-btn:hover{transform:scale(1.18)!important}.port-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid #2563EB;cursor:crosshair;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:15;box-shadow:0 0 0 2px #2563eb26}.el-card:hover .port-dot{opacity:1;pointer-events:auto}.port-dot:hover{transform:scale(1.35)!important;background:#2563eb}.port-dot.port-top{top:-6px;left:50%;transform:translate(-50%)}.port-dot.port-right{right:-6px;top:50%;transform:translateY(-50%)}.port-dot.port-bottom{bottom:-6px;left:50%;transform:translate(-50%)}.port-dot.port-left{left:-6px;top:50%;transform:translateY(-50%)}.palette-item{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;cursor:grab;transition:background .1s;font-size:12.5px;font-weight:500}.palette-item:hover{background:var(--hover, #F0EEE9)}.palette-item:active{cursor:grabbing}.add-el-popover{position:fixed;background:var(--surface, white);border:1px solid var(--border, #E5E3DF);border-radius:10px;box-shadow:0 8px 32px #00000021;z-index:1000;overflow:hidden;min-width:188px;animation:fadeUp .15s ease both}.add-el-row{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;transition:background .08s;font-size:12.5px;color:var(--text2, #374151)}.add-el-row:hover{background:var(--hover, #F0EEE9)}.conn-label-input{padding:3px 8px;border:1.5px solid #2563EB;border-radius:5px;background:var(--surface, white);color:var(--text2, #374151);font-size:11px;font-family:DM Sans,sans-serif;text-align:center;box-shadow:0 2px 10px #2563eb2e;outline:none}.property-panel{position:absolute;right:16px;top:16px;width:216px;z-index:30;background:var(--surface, white);border:1px solid var(--border, #E5E3DF);border-radius:10px;box-shadow:0 6px 28px #00000017;overflow:hidden;animation:fadeUp .2s ease both}.conn-style-popover{position:fixed;background:var(--surface, white);border:1px solid var(--border, #E5E3DF);border-radius:10px;box-shadow:0 8px 32px #00000021;z-index:1000;padding:10px 12px;animation:fadeUp .15s ease both;min-width:200px}.mono{font-family:DM Mono,Cascadia Code,Fira Code,Consolas,monospace}[data-dark="1"] .add-el-popover{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text1)!important}[data-dark="1"] .add-el-row{color:var(--text2)!important}[data-dark="1"] .add-el-row:hover{background:var(--hover)!important}[data-dark="1"] .palette-item:hover{background:var(--hover)}[data-dark="1"] .level-tab:hover:not(.active){background:var(--hover);color:var(--text1)}[data-dark="1"] .level-tab.visited{color:var(--text2)}[data-dark="1"] .icon-btn:hover{background:var(--hover)}[data-dark="1"] input,[data-dark="1"] textarea{background:var(--input)!important;color:var(--text1)!important;border-color:var(--border)!important}[data-dark="1"] pre{background:var(--code)!important;color:var(--text2)!important}[data-dark="1"] .conn-label-input{background:var(--input)!important;color:var(--text1)!important}