:root{--primary: #1fb6ff;--secondary: #8b5dff;--accent: #00ff88;--bg-dark: #000000;--bg-panel: #0a0a0a;--bg-editor: #0d0d0d;--border: rgba(31, 182, 255, .1);--border-active: rgba(31, 182, 255, .3);--text-primary: #ffffff;--text-secondary: #1fb6ff;--text-dim: #666666;--success: #00ff88;--error: #ff6b9d;--warning: #ffaa00;--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", monospace;--font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;--sidebar-width: 60px;--sidebar-width-expanded: 200px;--header-height: 40px;--action-bar-height: 50px;--tab-height: 36px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease}html,body{height:100%;overflow:hidden}button{background:none;border:none;color:inherit;font:inherit;cursor:pointer;outline:none}input{background:none;border:none;color:inherit;font:inherit;outline:none}body{font-family:var(--font-mono);font-size:13px;background:var(--bg-dark);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga" 1;letter-spacing:.02em}#root{height:100vh;overflow:hidden}*{margin:0;padding:0;box-sizing:border-box}button,button:hover{cursor:pointer!important}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:3px;transition:background .2s}::-webkit-scrollbar-thumb:hover{background:#ffffff26}::-webkit-scrollbar-corner{background:transparent}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}:root{--primary: #1FB6FF;--secondary: #8B5DFF;--accent: #00ff88;--bg-dark: #000000;--bg-panel: #0d141a;--border: rgba(31, 182, 255, .15);--text-primary: #ffffff;--text-secondary: #1FB6FF;--text-dim: #666666;--success: #00ff88;--error: #FF6B9D;--warning: #ffaa00}body{font-family:JetBrains Mono,Fira Code,SF Mono,monospace;font-weight:300;font-size:12px;letter-spacing:.5px;background:var(--bg-dark);color:var(--text-primary);overflow:hidden;height:100vh;margin:0;padding:0}.container{display:flex;height:100vh;width:100vw;overflow:hidden;position:relative}.sidebar{width:60px;background:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:15px 0;gap:10px}.mode-btn{width:60px;height:50px;background:transparent;border:none;color:var(--text-dim);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:20px;transition:all .3s;position:relative}.mode-btn:hover{color:var(--text-secondary)}.mode-btn.active{color:var(--text-primary)}.mode-btn.active:before{content:"";position:absolute;left:0;top:10%;bottom:10%;width:3px;background:var(--accent);border-radius:0 3px 3px 0}.mode-label{font-size:9px;text-transform:uppercase;letter-spacing:.5px}.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;height:100vh}.header{height:50px;background:var(--bg-panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:30px}.logo{display:flex;align-items:center;gap:10px}.logo img{width:28px;height:28px;object-fit:contain}.title{font-family:JetBrains Mono,monospace;font-size:14px;font-weight:500;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.actions{display:flex;gap:10px;margin-left:auto}.btn{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:6px 14px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s;display:flex;align-items:center;gap:6px}.btn:hover{border-color:var(--text-secondary);color:var(--text-secondary)}.btn.primary{background:var(--accent);border:1px solid var(--accent);color:var(--bg-dark);font-weight:600}.btn.primary:hover{background:var(--success);border-color:var(--success);filter:brightness(1.2)}.tabs{height:35px;background:var(--bg-panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 15px;gap:8px}.tab{padding:5px 12px;background:#1fb6ff0d;border:1px solid transparent;border-radius:6px 6px 0 0;cursor:pointer;color:var(--text-dim);font-size:12px;transition:all .3s;display:flex;align-items:center;gap:6px}.tab:hover{background:#1fb6ff1a;color:var(--text-secondary)}.tab.active{background:var(--bg-dark);border-color:var(--border);border-bottom-color:transparent;color:var(--text-primary)}.tab.drag-over{background:#1fb6ff33;border-color:var(--text-secondary)}.tab-close{margin-left:4px;opacity:.5;font-size:14px;background:none;border:none;color:inherit;cursor:pointer;padding:2px 4px}.tab-close:hover{opacity:1;color:var(--error);cursor:pointer}.tab-add,.tab-paste{width:26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);background:#1fb6ff0d;border:1px solid var(--border);transition:all .3s;font-size:14px}.tab-add:hover{background:#1fb6ff1a;color:var(--text-secondary)}.tab-paste{background:#667eea0d;border-color:#667eea33}.tab-paste:hover{background:#667eea26;color:#667eea;transform:scale(1.1)}.tabs-container{position:relative;display:flex;align-items:center;gap:8px}.content{flex:1;display:flex;background:var(--bg-dark);overflow:hidden;min-height:0;position:relative}.panel{display:flex;flex-direction:column;border-right:1px solid var(--border);position:relative;overflow:hidden;min-height:0}.panel:last-child{border-right:none}#layerMode .panel-input{flex:0 0 400px;width:400px;min-width:300px;max-width:500px}#layerMode .panel-layer{flex:1 1 auto;min-width:500px;overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:0}.panel-header{height:35px;background:var(--bg-panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 15px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);font-family:JetBrains Mono,monospace;gap:10px;flex-shrink:0}.panel-info{margin-left:auto;color:var(--text-dim);font-weight:400}.editor-container{flex:1;position:relative;min-height:0;overflow:hidden}.vscode-breadcrumb{position:absolute;top:0;left:0;right:0;height:28px;background:#0d141af2;border-bottom:1px solid rgba(31,182,255,.1);display:flex;align-items:center;padding:0 12px;font-size:11px;font-family:JetBrains Mono,monospace;overflow-x:auto;overflow-y:hidden;white-space:nowrap;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.vscode-breadcrumb::-webkit-scrollbar{height:0}.breadcrumb-item{color:var(--text-dim);cursor:pointer;padding:3px 8px;border-radius:3px;transition:all .15s;display:inline-flex;align-items:center;font-weight:500;letter-spacing:.3px;position:relative;border:1px solid rgba(31,182,255,.15);background:transparent;text-decoration:none;box-shadow:inset 0 0 0 1px transparent}.breadcrumb-item:hover{background:#1fb6ff14;color:var(--text-secondary);border-color:#1fb6ff40;text-decoration:underline;text-decoration-color:#1fb6ff4d;text-underline-offset:3px}.breadcrumb-item.active{color:var(--accent);background:#00ff880d;border-color:#00ff8840;font-weight:600}.breadcrumb-item.active:after{content:"";position:absolute;bottom:-1px;left:8px;right:8px;height:2px;background:var(--accent);border-radius:1px}.breadcrumb-item.dropdown-open{background:#1fb6ff1a;color:var(--text-secondary);border-color:#1fb6ff4d}.breadcrumb-separator{color:#1fb6ff4d;margin:0 4px;font-size:10px;display:inline-flex;align-items:center;opacity:.6;font-weight:300}.processor-tools{display:flex;gap:8px;padding:10px 15px;background:var(--bg-panel);border-bottom:1px solid var(--border);flex-wrap:wrap}.tool-btn{padding:4px 10px;background:transparent;border:1px solid var(--border);color:var(--text-dim);border-radius:3px;cursor:pointer;font-size:11px;font-family:JetBrains Mono,monospace;transition:all .2s;text-transform:uppercase;letter-spacing:.5px}.tool-btn:hover{border-color:var(--text-secondary);color:var(--text-secondary);background:#1fb6ff0d}.tool-btn.primary{background:var(--accent);border:1px solid var(--accent);color:var(--bg-dark);font-weight:600}.tool-btn.primary:hover{background:var(--success);border-color:var(--success);filter:brightness(1.2)}.layer-tab{padding:3px 8px;background:#1fb6ff0d;border:1px solid var(--border);border-radius:4px;cursor:pointer;color:var(--text-dim);font-size:10px;transition:all .3s;white-space:nowrap;flex-shrink:0}.layer-tab:hover{background:#1fb6ff1a;color:var(--text-secondary)}.layer-tab.active{background:var(--accent);border-color:var(--accent);color:var(--bg-dark);font-weight:500}.layer-action-btn{padding:3px 8px;background:transparent;border:1px solid var(--border);color:var(--text-dim);border-radius:3px;cursor:pointer;font-size:10px;font-family:JetBrains Mono,monospace;transition:all .2s;text-transform:uppercase;letter-spacing:.3px}.layer-action-btn:hover{border-color:var(--text-secondary);color:var(--text-secondary);background:#1fb6ff0d}.status{height:28px;background:var(--bg-panel);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 20px;font-size:11px;color:var(--text-dim);gap:20px;flex-shrink:0}.status-item{display:flex;align-items:center;gap:6px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim)}.status-dot.active{background:var(--accent);animation:pulse 2s infinite}.status-dot.syncing{background:var(--warning);animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.notification{position:fixed;top:15px;right:15px;background:var(--bg-panel);border:1px solid var(--border);border-radius:6px;padding:10px 16px;font-size:12px;display:none;z-index:1000;box-shadow:0 4px 12px #0000004d}.notification.show{display:block;animation:slideIn .3s ease}.notification.success{border-color:var(--accent);color:var(--accent)}.notification.error{border-color:var(--error);color:var(--error)}.notification.warning{border-color:#ff1493;color:#ff1493;background:#ff14931a}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInFromLeft{0%{transform:translate(-10px);opacity:0}to{transform:translate(0);opacity:1}}.breadcrumb-dropdown{background:linear-gradient(to bottom,#0a0a0afa,#050505fa);border:1px solid rgba(31,182,255,.15);border-radius:8px;box-shadow:0 8px 32px #000c,0 0 80px #1fb6ff0d,inset 0 1px #ffffff08;padding:6px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.tree-node{width:100%}.tree-row{display:flex;align-items:center;height:26px;cursor:pointer;color:var(--text-dim);font-size:11px;font-family:JetBrains Mono,monospace;transition:all .15s;border-radius:4px;margin:1px 0}.tree-row:hover{background:#1fb6ff14;color:var(--text-secondary)}.tree-row.active{background:linear-gradient(90deg,#1fb6ff26,#8b5dff26);color:var(--accent);font-weight:500}.tree-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;margin-right:4px;background:transparent;border:none;color:#1fb6ff80;cursor:pointer;font-size:10px;transition:all .2s}.tree-toggle:hover{color:var(--text-secondary);transform:scale(1.1)}.tree-toggle-placeholder{display:inline-block;width:16px;height:16px;margin-right:2px}.tree-label{flex:1;display:flex;align-items:center;padding:0;background:transparent;border:none;color:inherit;cursor:pointer;text-align:left;font-family:inherit;font-size:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tree-children{width:100%}