@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--brand-teal:#1db5b9;--brand-teal-light:#2dd4d8;--brand-teal-dim:#1db5b91f;--brand-navy:#0c1929;--brand-navy-light:#162337;--bg-canvas:#f0f2f5;--bg-panel:#fafbfc;--bg-panel-alt:#f5f6f8;--bg-elevated:#fff;--bg-dark:var(--brand-navy);--bg-dark-secondary:var(--brand-navy-light);--border-color:#e2e5ea;--border-subtle:#eceef2;--border-focus:var(--brand-teal);--text-primary:#0f1a2a;--text-secondary:#5e6a7a;--text-tertiary:#8e97a6;--text-inverse:#f0f4f8;--accent-color:var(--brand-teal);--accent-hover:var(--brand-teal-light);--accent-dim:var(--brand-teal-dim);--shadow-sm:0 1px 2px #0c19290a, 0 1px 3px #0c192908;--shadow-md:0 4px 12px #0c19290f, 0 1px 4px #0c19290a;--shadow-lg:0 12px 32px #0c19291a, 0 4px 12px #0c19290d;--shadow-xl:0 24px 48px #0c192924, 0 8px 16px #0c19290f;--shadow-glow:0 0 0 3px #1db5b92e;--toolbar-height:54px;--sidebar-width:264px;--properties-width:284px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--transition-speed:.18s;--transition-smooth:var(--ease-out)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-primary);background-color:var(--bg-canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:none;font-feature-settings:"cv02", "cv03", "cv04";letter-spacing:-.01em;font-family:DM Sans,system-ui,-apple-system,sans-serif;overflow:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px;transition:background .2s}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.app-container{background:var(--bg-canvas);flex-direction:column;width:100vw;height:100dvh;display:flex}.top-toolbar{height:var(--toolbar-height);background:var(--bg-elevated);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-shrink:0;align-items:center;gap:4px;padding:0 16px;display:flex}.toolbar-group{align-items:center;gap:3px;display:flex}.toolbar-divider{background:linear-gradient(to bottom, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);flex-shrink:0;width:1px;height:26px;margin:0 8px}.main-content{height:calc(100vh - var(--toolbar-height));height:calc(100dvh - var(--toolbar-height));flex:1;display:flex;position:relative;overflow:hidden}.sidebar-left,.sidebar-right{background:var(--bg-panel);z-index:10;height:100%;transition:transform .3s var(--ease-out), box-shadow .2s;flex-direction:column;flex-shrink:0;display:flex}.sidebar-left{width:var(--sidebar-width);border-right:1px solid var(--border-subtle)}.sidebar-right{width:var(--properties-width);border-left:1px solid var(--border-subtle)}.canvas-container{background-color:var(--bg-canvas);cursor:grab;background-image:radial-gradient(circle,#c8cdd5 .7px,#0000 .7px);background-size:24px 24px;flex:1;min-width:0;position:relative;overflow:hidden}.canvas-container.panning{cursor:grabbing}.canvas-watermark{opacity:.08;pointer-events:none;z-index:999;filter:grayscale(40%);background-image:url(/trivar-logo.png);background-position:50%;background-repeat:no-repeat;background-size:contain;width:140px;height:42px;position:absolute;bottom:20px;right:20px}.icon-btn{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-speed) var(--ease-out);-webkit-tap-highlight-color:transparent;background:0 0;border:none;place-items:center;padding:8px;display:grid;position:relative}.icon-btn:hover{background:var(--bg-panel-alt);color:var(--text-primary)}.icon-btn:active{transform:scale(.92)}.icon-btn.active{background:var(--accent-color);color:#fff;box-shadow:0 2px 8px #1db5b94d}.icon-btn:disabled{opacity:.3;cursor:default}.port{background-color:var(--bg-elevated);border:2px solid var(--accent-color);z-index:10;cursor:crosshair;opacity:0;width:10px;height:10px;transition:all .18s var(--ease-out);border-radius:50%;position:absolute}div:hover>.port,.port.active{opacity:1}.port:hover{background-color:var(--accent-color);box-shadow:var(--shadow-glow);transform:scale(1.5)}.svg-overlay{pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}.connection-path{fill:none;stroke:var(--text-tertiary);stroke-width:2px;transition:stroke .18s var(--ease-out)}@keyframes selectPulse{0%,to{box-shadow:0 0 #1db5b940}50%{box-shadow:0 0 0 5px #1db5b914}}.sidebar-toggle{z-index:25;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-elevated);width:38px;height:38px;box-shadow:var(--shadow-md);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .2s var(--ease-out);place-items:center;display:none;position:fixed}.sidebar-toggle:hover{box-shadow:var(--shadow-lg);border-color:var(--accent-color)}.sidebar-toggle-left{left:10px;top:calc(var(--toolbar-height) + 10px)}.sidebar-toggle-right{right:10px;top:calc(var(--toolbar-height) + 10px)}@media (width<=1024px){:root{--sidebar-width:224px;--properties-width:264px}.toolbar-group.hide-mobile,.toolbar-divider.hide-mobile{display:none}.hide-mobile{display:none!important}}@media (width<=768px){:root{--toolbar-height:48px;--sidebar-width:280px;--properties-width:280px}.sidebar-toggle{display:grid}.sidebar-left,.sidebar-right{top:var(--toolbar-height);z-index:30;height:auto;box-shadow:var(--shadow-xl);position:fixed;bottom:0}.sidebar-left{left:0;transform:translate(-100%)}.sidebar-left.open{transform:translate(0)}.sidebar-right{right:0;transform:translate(100%)}.sidebar-right.open{transform:translate(0)}.sidebar-backdrop{inset:0;top:var(--toolbar-height);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:25;background:#0c192966;display:none;position:fixed}.sidebar-backdrop.visible{display:block}.top-toolbar{gap:2px;padding:0 10px}.toolbar-group.hide-tablet,.toolbar-divider.hide-tablet{display:none}.icon-btn{padding:6px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes pendingPulse{0%,to{box-shadow:0 0 #ef444466}50%{box-shadow:0 0 0 4px #ef44441a}}