*,*:before,*:after{box-sizing:border-box}:root{--bg-app: #F5F5F5;--bg-surface: #ffffff;--bg-surface-hover: #F4F4F5;--bg-surface-active: #EEF2FF;--bg-canvas: #F5F5F5;--bg-canvas-dot: #D4D4D4;--border-default: #E4E4E7;--border-light: #F4F4F5;--border-active: #C7D2FE;--text-primary: #1a1a1a;--text-secondary: #71717A;--text-tertiary: #A1A1AA;--text-active: #4338CA;--text-accent: #6366F1;--shadow-dialog: 0 4px 6px rgba(0,0,0,.05), 0 10px 15px rgba(0,0,0,.1), 0 20px 25px rgba(0,0,0,.08);--shadow-ghost: 0 2px 8px rgba(0,0,0,.12);--shadow-context: 0 4px 12px rgba(0, 0, 0, .15);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.4;font-weight:400;color:var(--text-primary);background-color:var(--bg-app);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}[data-theme=dark]{--bg-app: #18181B;--bg-surface: #27272A;--bg-surface-hover: #3F3F46;--bg-surface-active: #312E81;--bg-canvas: #18181B;--bg-canvas-dot: #3F3F46;--border-default: #3F3F46;--border-light: #3F3F46;--border-active: #4338CA;--text-primary: #FAFAFA;--text-secondary: #A1A1AA;--text-tertiary: #71717A;--text-active: #A5B4FC;--text-accent: #818CF8;--shadow-dialog: 0 4px 6px rgba(0,0,0,.2), 0 10px 15px rgba(0,0,0,.3), 0 20px 25px rgba(0,0,0,.25);--shadow-ghost: 0 2px 8px rgba(0,0,0,.3);--shadow-context: 0 4px 12px rgba(0, 0, 0, .4)}[data-theme=ocean]{--bg-app: #EFF6FF;--bg-surface: #ffffff;--bg-surface-hover: #DBEAFE;--bg-surface-active: #BFDBFE;--bg-canvas: #EFF6FF;--bg-canvas-dot: #93C5FD;--border-default: #BFDBFE;--border-light: #DBEAFE;--border-active: #3B82F6;--text-primary: #1E3A5F;--text-secondary: #3B82F6;--text-tertiary: #93C5FD;--text-active: #1D4ED8;--text-accent: #2563EB;--shadow-dialog: 0 4px 6px rgba(30,58,95,.06), 0 10px 15px rgba(30,58,95,.1), 0 20px 25px rgba(30,58,95,.08);--shadow-ghost: 0 2px 8px rgba(30,58,95,.12);--shadow-context: 0 4px 12px rgba(30,58,95,.15)}[data-theme=midnight]{--bg-app: #0F172A;--bg-surface: #1E293B;--bg-surface-hover: #334155;--bg-surface-active: #1E3A5F;--bg-canvas: #0F172A;--bg-canvas-dot: #334155;--border-default: #334155;--border-light: #1E293B;--border-active: #3B82F6;--text-primary: #E2E8F0;--text-secondary: #94A3B8;--text-tertiary: #64748B;--text-active: #60A5FA;--text-accent: #3B82F6;--shadow-dialog: 0 4px 6px rgba(0,0,0,.3), 0 10px 15px rgba(0,0,0,.4), 0 20px 25px rgba(0,0,0,.3);--shadow-ghost: 0 2px 8px rgba(0,0,0,.4);--shadow-context: 0 4px 12px rgba(0,0,0,.5)}[data-theme=sketch]{--bg-app: #FAF8F5;--bg-surface: #FFFDF9;--bg-surface-hover: #F5F0E8;--bg-surface-active: #E8E0D0;--bg-canvas: #FAF8F5;--bg-canvas-dot: #D4C9B8;--border-default: #E0D6C8;--border-light: #F0EAE0;--border-active: #B8956A;--text-primary: #3D3428;--text-secondary: #8C7A62;--text-tertiary: #B8A88E;--text-active: #7C5C30;--text-accent: #A0764A;--shadow-dialog: 0 4px 6px rgba(61,52,40,.06), 0 10px 15px rgba(61,52,40,.08), 0 20px 25px rgba(61,52,40,.06);--shadow-ghost: 0 2px 8px rgba(61,52,40,.1);--shadow-context: 0 4px 12px rgba(61,52,40,.12)}[data-theme=forest]{--bg-app: #F0FDF4;--bg-surface: #FFFFFF;--bg-surface-hover: #DCFCE7;--bg-surface-active: #BBF7D0;--bg-canvas: #ECFDF5;--bg-canvas-dot: #86EFAC;--border-default: #BBF7D0;--border-light: #DCFCE7;--border-active: #16A34A;--text-primary: #14532D;--text-secondary: #15803D;--text-tertiary: #86EFAC;--text-active: #166534;--text-accent: #16A34A;--shadow-dialog: 0 4px 6px rgba(20,83,45,.06), 0 10px 15px rgba(20,83,45,.08), 0 20px 25px rgba(20,83,45,.06);--shadow-ghost: 0 2px 8px rgba(20,83,45,.1);--shadow-context: 0 4px 12px rgba(20,83,45,.12)}[data-theme=sunset]{--bg-app: #1C1412;--bg-surface: #292019;--bg-surface-hover: #3D2E20;--bg-surface-active: #4A3220;--bg-canvas: #1C1412;--bg-canvas-dot: #4A3828;--border-default: #4A3828;--border-light: #3D2E20;--border-active: #F59E0B;--text-primary: #FDE8CD;--text-secondary: #D4A574;--text-tertiary: #8B6E50;--text-active: #FBBF24;--text-accent: #F59E0B;--shadow-dialog: 0 4px 6px rgba(0,0,0,.3), 0 10px 15px rgba(0,0,0,.4), 0 20px 25px rgba(0,0,0,.3);--shadow-ghost: 0 2px 8px rgba(0,0,0,.4);--shadow-context: 0 4px 12px rgba(0,0,0,.5)}body{margin:0;min-width:320px;min-height:100vh}#root{height:100vh}button{border-radius:6px;border:1px solid var(--border-default);padding:4px 10px;font-size:13px;font-family:inherit;background:var(--bg-surface);color:var(--text-primary);cursor:pointer}button:hover{background:var(--bg-surface-hover)}button.active{background:var(--bg-surface-active);color:var(--text-active);border-color:var(--border-active)}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-body{display:flex;flex:1;overflow:hidden}.toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-surface);border-bottom:1px solid var(--border-default);height:44px;flex-shrink:0}.toolbar button{transition:background .15s ease}.toolbar .project-name{font-weight:600;font-size:14px;margin-right:16px;cursor:pointer;padding:2px 6px;border-radius:4px;border:1px solid transparent}.toolbar .project-name:hover{background:var(--bg-surface-hover);border-color:var(--border-default)}.toolbar .project-name-input{font-weight:600;font-size:14px;margin-right:16px;padding:2px 6px;border-radius:4px;border:1px solid var(--text-accent);background:var(--bg-surface);color:var(--text-primary);outline:none;font-family:inherit;width:200px}.toolbar .separator{width:1px;height:20px;background:var(--border-default);margin:0 4px}.toolbar .theme-select{font-size:12px;padding:3px 6px;border-radius:6px;border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-primary);font-family:inherit;cursor:pointer}.toolbar .zoom-display{font-size:12px;color:var(--text-secondary);min-width:48px;text-align:center}.sidebar{width:240px;background:var(--bg-surface);border-right:1px solid var(--border-default);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}.sidebar-section-header{margin:0;padding:10px 12px 6px;font-size:11px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.06em;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:6px}.sidebar-section-header:hover{color:var(--text-primary)}.sidebar-section-arrow{font-size:8px;transition:transform .15s ease;display:inline-block}.sidebar-section-arrow.open{transform:rotate(90deg)}.palette-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:grab;font-size:13px;-webkit-user-select:none;user-select:none;height:32px;border-radius:6px;margin:1px 6px;transition:background .15s ease}.palette-item:hover{background:var(--bg-surface-hover)}.palette-item .color-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.palette-item .module-count{color:var(--text-tertiary);font-size:11px;margin-left:auto}.canvas-container{flex:1;background:var(--bg-canvas);background-image:radial-gradient(circle,var(--bg-canvas-dot) 1px,transparent 1px);background-size:24px 24px;overflow:hidden;position:relative}.panel-bg,.panel-box,.din-rail{cursor:grab}.panel-bg:active,.panel-box:active,.din-rail:active{cursor:grabbing}.dialog-overlay{position:fixed;inset:0;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100}.dialog{background:var(--bg-surface);color:var(--text-primary);border-radius:12px;padding:24px;min-width:300px;box-shadow:var(--shadow-dialog)}.dialog h2{margin:0 0 16px;font-size:16px}.dialog label{display:block;margin-bottom:12px;font-size:13px}.dialog select,.dialog input{display:block;width:100%;margin-top:4px;padding:6px 8px;border:1px solid var(--border-default);border-radius:6px;font-size:13px;background:var(--bg-surface);color:var(--text-primary)}.dialog .dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.device-group.selected rect.device-body{stroke:var(--text-accent);stroke-width:2}.cable-path{cursor:pointer}.cable-path:hover{stroke-opacity:.7}.cable-path.selected{stroke-dasharray:6 3}.context-menu{position:fixed;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;box-shadow:var(--shadow-context);z-index:200;min-width:120px;padding:4px 0}.context-menu-item{display:block;width:calc(100% - 8px);padding:6px 16px;border:none;border-radius:4px;margin:0 4px;background:none;text-align:left;font-size:13px;cursor:pointer;color:var(--text-primary)}.context-menu-item:hover{background:var(--bg-surface-hover)}.drag-ghost{position:fixed;pointer-events:none;z-index:1000;opacity:.7;padding:4px 8px;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-default);border-radius:6px;font-size:12px;white-space:nowrap;box-shadow:var(--shadow-ghost)}.cable-color-picker{padding:6px 12px}.cable-color-hint{font-size:11px;color:var(--text-accent);margin-bottom:6px}.cable-color-swatches{display:flex;flex-wrap:wrap;gap:4px}.cable-color-swatch{width:24px;height:24px;border-radius:4px;border:2px solid transparent;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px #00000026}.cable-color-swatch:hover{border-color:var(--text-tertiary)}.cable-color-swatch.active{border-color:var(--text-primary);box-shadow:inset 0 0 0 1px #00000026,0 0 0 1px var(--text-primary)}.sidebar-btn{display:flex;align-items:center;gap:8px;padding:6px 12px;width:calc(100% - 12px);border:none;background:none;font-size:13px;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-primary);height:32px;border-radius:6px;margin:1px 6px;transition:background .15s ease}.sidebar-btn:hover{background:var(--bg-surface-hover)}.sidebar-btn:disabled{opacity:.4;cursor:default}.sidebar-btn:disabled:hover{background:none}.cable-handle-corner,.cable-handle-mid{pointer-events:all}.cable-handle-corner:hover{fill:var(--bg-surface-active);stroke:#4f46e5}.cable-handle-mid:hover{fill:#4f46e5}.welcome-overlay{position:fixed;inset:0;background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:200}.welcome-card{background:var(--bg-surface);color:var(--text-primary);border-radius:12px;padding:48px 40px;min-width:360px;text-align:center;box-shadow:0 12px 40px #00000040}.login-screen{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg-app)}.login-card{text-align:center;background:var(--bg-surface);color:var(--text-primary);padding:48px 40px;border-radius:12px;box-shadow:0 4px 24px #0000001a}.login-title{font-size:32px;margin:0 0 8px;color:var(--text-primary)}.login-subtitle{color:var(--text-secondary);margin:0 0 32px;font-size:14px}.login-btn{padding:10px 24px;font-size:14px;font-weight:500;border:1px solid var(--border-default);border-radius:6px;background:var(--bg-surface);color:var(--text-primary);cursor:pointer}.login-btn:hover{background:var(--bg-surface-hover)}.login-skip{display:block;margin:16px auto 0;padding:6px 16px;font-size:13px;color:var(--text-secondary);border:none;background:none;cursor:pointer;text-decoration:underline}.login-skip:hover{color:var(--text-primary);background:none}.login-error{color:#e74c3c;font-size:13px;margin-top:16px}.start-dialog{min-width:420px;max-width:500px;padding:40px 36px 32px}.start-section{text-align:left;margin-top:24px}.start-section-title{font-size:13px;font-weight:600;margin:0 0 10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.start-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}.start-preset-btn{padding:10px 12px;font-size:13px;font-weight:500;border:1px solid var(--border-default);border-radius:8px;background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:background .15s ease,border-color .15s ease}.start-preset-btn:hover{background:var(--bg-surface-hover);border-color:var(--text-accent)}.start-preset-btn.active{border-color:var(--text-accent);background:var(--bg-surface-hover)}.start-custom-size{display:flex;align-items:flex-end;gap:10px;margin-top:10px}.start-custom-size label{font-size:12px;color:var(--text-secondary);display:flex;flex-direction:column;gap:4px;flex:1}.start-custom-size input{padding:6px 8px;border:1px solid var(--border-default);border-radius:6px;font-size:13px;background:var(--bg-surface);color:var(--text-primary);width:100%;box-sizing:border-box}.start-custom-create{padding:6px 16px;font-size:13px;font-weight:500;border:1px solid var(--text-accent);border-radius:6px;background:var(--text-accent);color:#fff;cursor:pointer;white-space:nowrap}.start-custom-create:hover{opacity:.9}.start-project-list{max-height:240px;overflow-y:auto;border:1px solid var(--border-default);border-radius:8px}.start-project-list .project-list-item:last-child{border-bottom:none}.sidebar-user{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border-default)}.sidebar-avatar{width:28px;height:28px;border-radius:50%}.sidebar-user-name{font-size:13px;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-signout{font-size:11px;padding:2px 8px;color:var(--text-secondary);border-color:var(--border-default);border-radius:6px}.save-status{font-size:11px;color:var(--text-tertiary)}.toolbar-login-btn{font-size:12px;padding:3px 12px;color:var(--text-accent);border-color:var(--text-accent);background:var(--bg-surface)}.toolbar-login-btn:hover{background:var(--bg-surface-active)}.sidebar-guest .sidebar-user-name{color:var(--text-secondary);font-style:italic}.project-list-dialog{min-width:400px;max-height:80vh;overflow-y:auto}.project-list-loading,.project-list-empty{color:var(--text-secondary);font-size:13px;text-align:center;padding:24px 0}.project-list{list-style:none;margin:0;padding:0}.project-list-item{display:flex;align-items:center;border-bottom:1px solid var(--border-light)}.project-list-open{flex:1;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:none;background:none;cursor:pointer;text-align:left;font-size:13px;border-radius:0;color:var(--text-primary)}.project-list-open:hover{background:var(--bg-surface-hover)}.project-list-name{font-weight:500}.project-list-date{color:var(--text-tertiary);font-size:11px}.project-list-delete{padding:4px 10px;margin-right:8px;border:none;background:none;color:var(--text-tertiary);font-size:18px;cursor:pointer;border-radius:4px}.project-list-delete:hover{color:#e74c3c;background:#fee}