:root{--bg-app:#141518;--bg-header:#181a1f;--bg-ribbon:#1c1e24;--bg-tool-rail:#16171b;--bg-panel:#1a1c22;--bg-panel-elevated:#22252e;--bg-panel-hover:#292d37;--bg-canvas-workspace:#121316;--bg-input:#111215;--border-color:#ffffff14;--border-color-hover:#ffffff2e;--border-color-active:#38bdf873;--accent-primary:#38bdf8;--accent-glow:#38bdf84d;--accent-hover:#7dd3fc;--accent-purple:#818cf8;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#8492a6;--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--icon-xs:12px;--icon-sm:14px;--icon-md:16px;--icon-lg:18px;--icon-xl:20px;--font-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}.lucide-icon,.ui-icon{vertical-align:middle;pointer-events:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.icon-xs{width:var(--icon-xs);height:var(--icon-xs)}.icon-sm{width:var(--icon-sm);height:var(--icon-sm)}.icon-md{width:var(--icon-md);height:var(--icon-md)}.icon-lg{width:var(--icon-lg);height:var(--icon-lg)}.icon-xl{width:var(--icon-xl);height:var(--icon-xl)}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body,html{background-color:var(--bg-app);width:100%;height:100%;color:var(--text-primary);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:13.5px;line-height:1.45;overflow:hidden}.canvas-app{background:var(--bg-app);flex-direction:column;width:100vw;height:100vh;display:flex;position:relative}.top-menu-bar{background:var(--bg-header);border-bottom:1px solid var(--border-color);z-index:300;justify-content:space-between;align-items:center;height:42px;padding:0 14px;display:flex}.menu-left{align-items:center;gap:12px;display:flex}.brand-badge{color:#fff;letter-spacing:-.01em;border-right:1px solid var(--border-color);align-items:center;gap:8px;padding-right:12px;font-size:14px;font-weight:700;display:flex}.brand-icon-gem{border-radius:var(--radius-xs);width:24px;height:24px;box-shadow:0 0 10px var(--accent-glow);background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 100%);justify-content:center;align-items:center;display:flex}.brand-subtag{color:var(--accent-primary);border-radius:var(--radius-xs);font-size:10.5px;font-weight:700;font-family:var(--font-mono);background:#38bdf81f;border:1px solid #38bdf840;padding:1px 5px}.menu-dropdowns{align-items:center;gap:2px;display:flex;position:relative}.menu-dropdown-wrapper{position:relative}.menu-item-btn{color:var(--text-secondary);border-radius:var(--radius-xs);cursor:pointer;background:0 0;border:none;align-items:center;padding:5px 10px;font-size:13.5px;font-weight:500;transition:all .12s;display:inline-flex}.menu-item-btn:hover,.menu-item-btn.active{color:#fff;background:#ffffff14}.dropdown-menu{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--radius-sm);z-index:600;background:#1a1c22f5;border:1px solid #ffffff24;flex-direction:column;min-width:230px;padding:4px;display:none;position:absolute;top:calc(100% + 3px);left:0;box-shadow:0 16px 36px #000000b3,0 0 0 1px #ffffff0a}.dropdown-menu.show{display:flex}.dropdown-item{color:var(--text-primary);text-align:left;cursor:pointer;border-radius:var(--radius-xs);background:0 0;border:none;justify-content:space-between;align-items:center;width:100%;padding:6px 10px;font-size:13px;font-weight:400;transition:background .12s;display:flex}.dropdown-item:hover{color:#fff;background:#38bdf829}.dropdown-shortcut{font-family:var(--font-mono);color:var(--text-muted);background:#ffffff0f;border-radius:3px;padding:2px 6px;font-size:11px;font-weight:500}.dropdown-sep{background:#ffffff14;height:1px;margin:4px 0}.menu-right{align-items:center;gap:8px;display:flex}.btn-top-action{border-radius:var(--radius-xs);cursor:pointer;border:1px solid #0000;align-items:center;gap:6px;padding:5px 12px;font-size:13px;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex}.btn-top-primary{color:#fff;background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 100%);font-weight:600;box-shadow:0 2px 8px #0ea5e959}.btn-top-primary:hover{box-shadow:0 0 12px var(--accent-glow);background:linear-gradient(135deg,#38bdf8 0%,#3b82f6 100%)}.btn-top-secondary{color:var(--text-secondary);background:#ffffff0d;border:1px solid #ffffff17}.btn-top-secondary:hover{color:#fff;background:#ffffff1a;border-color:#ffffff2e}.options-ribbon{background:var(--bg-ribbon);border-bottom:1px solid var(--border-color);height:38px;color:var(--text-secondary);justify-content:space-between;align-items:center;padding:0 14px;font-size:13px;display:flex}.ribbon-left{align-items:center;gap:16px;display:flex}.ribbon-label{align-items:center;gap:8px;font-size:13px;display:flex}.ribbon-input{background:var(--bg-input);border:1px solid var(--border-color);color:#fff;border-radius:var(--radius-xs);font-size:13px;font-family:var(--font-mono);outline:none;padding:3px 8px}.ribbon-input:focus{border-color:var(--accent-primary)}.ribbon-select{background:var(--bg-input);border:1px solid var(--border-color);color:#fff;border-radius:var(--radius-xs);cursor:pointer;outline:none;padding:3px 8px;font-size:12.5px}.ribbon-select:focus{border-color:var(--accent-primary)}.ribbon-action-btn,.ribbon-btn{border:1px solid var(--border-color);height:28px;color:var(--text-secondary);border-radius:var(--radius-xs);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;background:#ffffff0d;align-items:center;gap:6px;padding:0 10px;font-size:12px;font-weight:500;transition:all .15s;display:inline-flex}.ribbon-action-btn:hover,.ribbon-btn:hover{color:#fff;background:#ffffff1f;border-color:#ffffff38}.ribbon-action-btn:active,.ribbon-btn:active{background:#ffffff14;transform:translateY(1px)}.ribbon-action-btn svg,.ribbon-action-btn i{flex-shrink:0}.studio-main-body{flex:1;display:flex;position:relative;overflow:hidden}.left-tool-rail{background:var(--bg-tool-rail);border-right:1px solid var(--border-color);z-index:20;flex-direction:column;align-items:center;gap:4px;width:46px;padding:8px 0;display:flex}.tool-btn{border-radius:var(--radius-xs);width:34px;height:34px;color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;transition:all .12s;display:flex;position:relative}.tool-btn:hover{color:#fff;background:#ffffff12}.tool-btn.active{color:var(--accent-primary);background:#38bdf826;border-color:#38bdf873;box-shadow:inset 0 0 6px #38bdf826}.tool-sep{background:var(--border-color);width:24px;height:1px;margin:2px 0}.swatches-cluster{width:36px;height:36px;margin-top:8px;position:relative}.swatch-mini-btn{color:var(--text-muted);cursor:pointer;z-index:5;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;padding:2px;line-height:1;transition:all .15s;display:flex;position:absolute}.swatch-mini-btn:hover{color:#fff;background:#ffffff1f}.swatch-swap-btn{top:-5px;right:-3px}.swatch-reset-btn{bottom:-3px;left:-3px}.color-swatches-box{cursor:pointer;width:30px;height:30px;position:relative}.swatch-primary{z-index:2;background:#38bdf8;border:2px solid #fff;border-radius:3px;width:18px;height:18px;position:absolute;top:0;left:0;box-shadow:0 2px 5px #00000080}.swatch-secondary{z-index:1;background:#fff;border:2px solid #334155;border-radius:3px;width:18px;height:18px;position:absolute;bottom:0;right:0}.center-viewport-container{background:var(--bg-canvas-workspace);flex:1;justify-content:center;align-items:center;height:100%;display:flex;position:relative;overflow:hidden}.viewport-canvas{width:100%;height:100%;display:block;position:absolute;top:0;left:0}.selection-marquee-box{pointer-events:none;z-index:50;background:#38bdf81f;border:1.5px dashed #fff;animation:.8s linear infinite marchingAnts;display:none;position:absolute}@keyframes marchingAnts{0%{stroke-dashoffset:0}to{stroke-dashoffset:16px}}.right-dock-inspector{background:var(--bg-panel);border-left:1px solid var(--border-color);z-index:20;flex-direction:column;width:310px;display:flex}.dock-header-tabs{border-bottom:1px solid var(--border-color);background:#00000026;gap:3px;height:36px;padding:3px;display:flex}.dock-tab{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-xs);white-space:nowrap;flex:1;justify-content:center;align-items:center;gap:5px;padding:0 4px;font-size:12.5px;font-weight:500;transition:all .12s;display:inline-flex}.dock-tab:hover{color:var(--text-primary)}.dock-tab.active{color:#fff;background:var(--bg-panel-elevated)}.dock-body{flex-direction:column;flex:1;gap:10px;padding:10px;display:flex;overflow-y:auto}.layers-header-controls{border-bottom:1px solid var(--border-color);align-items:center;gap:8px;padding-bottom:8px;display:flex}.select-blend-mode{background:var(--bg-input);border:1px solid var(--border-color);color:#fff;border-radius:var(--radius-xs);cursor:pointer;outline:none;flex:1;padding:4px 8px;font-size:12.5px}.opacity-slider-wrap{align-items:center;gap:6px;width:100px;display:flex}.opacity-slider{width:100%;accent-color:var(--accent-primary);cursor:pointer}.layers-list{flex-direction:column;flex:1;gap:4px;display:flex;overflow-y:auto}.layer-item{border-radius:var(--radius-xs);cursor:pointer;background:#ffffff06;border:1px solid #0000;align-items:center;gap:8px;height:40px;padding:5px 8px;transition:all .12s;display:flex}.layer-item:hover{background:#ffffff0f}.layer-item.active{border-color:#38bdf866;border-left:3px solid var(--accent-primary);background:#38bdf81f}.layer-eye{color:var(--text-secondary);cursor:pointer;justify-content:center;align-items:center;padding:2px;display:flex}.layer-thumb-box{background:#0f1013;border:1px solid #ffffff1f;border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:28px;display:flex;overflow:hidden}.layer-thumb-img{object-fit:cover;width:100%;height:100%}.layer-name-text{white-space:nowrap;text-overflow:ellipsis;color:var(--text-primary);flex:1;font-size:13px;font-weight:500;overflow:hidden}.layer-opacity-badge{font-family:var(--font-mono);color:var(--text-muted);font-size:11px}.layers-footer-actions{border-top:1px solid var(--border-color);justify-content:flex-end;align-items:center;gap:6px;padding-top:6px;display:flex}.icon-action-btn{border-radius:var(--radius-xs);border:1px solid var(--border-color);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;background:0 0;justify-content:center;align-items:center;transition:all .12s;display:flex}.icon-action-btn:hover{color:#fff;border-color:var(--border-color-hover);background:#ffffff14}.history-list{flex-direction:column;gap:3px;display:flex}.history-item{border-radius:var(--radius-xs);color:var(--text-secondary);cursor:pointer;align-items:center;gap:8px;padding:6px 10px;font-size:13px;display:flex}.history-item:hover{background:#ffffff0d}.history-item.active{color:#fff;background:#38bdf81f;font-weight:600}.bottom-status-bar{background:var(--bg-header);border-top:1px solid var(--border-color);height:26px;font-family:var(--font-mono);color:var(--text-muted);justify-content:space-between;align-items:center;padding:0 14px;font-size:11.5px;display:flex}.status-left,.status-right{align-items:center;gap:16px;display:flex}.telemetry-indicator{color:#10b981;align-items:center;gap:6px;display:inline-flex}.canvas-modal-overlay{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:1000;background:#000000ad;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.canvas-modal-overlay.show{display:flex}.canvas-modal-card{border-radius:var(--radius-md);background:#1f2128;border:1px solid #ffffff24;flex-direction:column;width:440px;max-width:92vw;display:flex;overflow:hidden;box-shadow:0 24px 60px #000000d9}.modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.modal-header h3{color:#fff;font-size:14.5px;font-weight:600}.modal-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:18px;line-height:1}.modal-close-btn:hover{color:#fff}.modal-body{flex-direction:column;gap:14px;padding:18px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:var(--text-secondary);font-size:12.5px;font-weight:600}.form-input{background:var(--bg-input);border:1px solid var(--border-color);color:#fff;border-radius:var(--radius-xs);outline:none;padding:7px 10px;font-size:13px}.form-input:focus{border-color:var(--accent-primary)}.modal-footer{border-top:1px solid var(--border-color);background:#0000001f;justify-content:flex-end;gap:10px;padding:12px 18px;display:flex}.psd-drop-zone-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;border:3px dashed var(--accent-primary);background:#0c0d0fe0;flex-direction:column;justify-content:center;align-items:center;display:none;position:absolute;inset:0}.psd-drop-zone-overlay.active{display:flex}.drop-card{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--radius-lg);text-align:center;padding:36px 54px;box-shadow:0 20px 50px #000c}.document-tab-bar{border-bottom:1px solid var(--border-color);z-index:100;background:#111215;justify-content:space-between;align-items:center;height:32px;padding:0 8px;display:flex}.tabs-scroll-container{scrollbar-width:none;flex:1;align-items:center;gap:4px;display:flex;overflow-x:auto}.tabs-scroll-container::-webkit-scrollbar{display:none}.doc-tab-item{border-radius:var(--radius-xs);height:25px;color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff08;border:1px solid #ffffff0f;flex-shrink:0;align-items:center;gap:6px;padding:3px 10px;font-size:12px;transition:all .12s;display:inline-flex}.doc-tab-item:hover{color:var(--text-primary);background:#ffffff12}.doc-tab-item.active{background:var(--bg-panel);color:#fff;border-color:#38bdf859;box-shadow:0 2px 8px #00000059}.doc-tab-icon{font-size:11px}.doc-tab-title{white-space:nowrap;text-overflow:ellipsis;max-width:180px;font-weight:500;overflow:hidden}.doc-tab-close{color:var(--text-muted);opacity:.6;border-radius:2px;padding:1px 3px;font-size:13px;line-height:1;transition:opacity .1s,background .1s}.doc-tab-close:hover{opacity:1;color:#ef4444;background:#ef444440}.tab-bar-actions{align-items:center;margin-left:8px;display:flex;position:relative}.btn-add-tab{border:1px solid var(--border-color);border-radius:var(--radius-xs);width:22px;height:22px;color:var(--text-secondary);cursor:pointer;background:#ffffff0d;justify-content:center;align-items:center;transition:all .12s;display:flex}.btn-add-tab:hover{border-color:var(--accent-primary);color:#fff;background:#38bdf826}.tab-presets-dropdown{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--radius-xs);z-index:500;background:#1a1c22fa;border:1px solid #ffffff26;flex-direction:column;min-width:180px;padding:4px;display:none;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 12px 28px #000000b3}.tab-presets-dropdown.show{display:flex}.preset-option{color:var(--text-secondary);text-align:left;border-radius:var(--radius-xs);cursor:pointer;background:0 0;border:none;padding:6px 10px;font-size:12px;transition:background .1s,color .1s}.preset-option:hover{color:#fff;background:#38bdf826}.layer-item.is-group{background:#38bdf80a;border:1px solid #38bdf826;font-weight:600}.layer-item.in-group{border-left:2px solid #ffffff1a;margin-left:18px}.layer-item.parent-hidden{opacity:.45}.layer-item.parent-hidden .layer-name-text{color:var(--text-muted)}.layer-item.is-dragging{opacity:.35;border:1px dashed var(--accent-primary);background:#38bdf81f}.layer-item.drag-over-top{border-top:2px solid var(--accent-primary)!important}.layer-item.drag-over-bottom{border-bottom:2px solid var(--accent-primary)!important}.layer-rename-input{border:1px solid var(--accent-primary);border-radius:var(--radius-xs);color:#fff;box-shadow:0 0 6px var(--accent-glow);background:#0f172a;outline:none;flex:1;padding:2px 6px;font-family:inherit;font-size:12px}.layer-lock,.layer-eye{cursor:pointer;border-radius:var(--radius-xs);flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;transition:background .1s;display:inline-flex}.layer-lock:hover,.layer-eye:hover{background:#ffffff14}.layer-eye.inherited-hidden{opacity:.35;cursor:pointer}.layer-lock.inherited-locked{opacity:.55;cursor:not-allowed}.group-collapse-btn{cursor:pointer;width:14px;height:14px;color:var(--text-muted);flex-shrink:0;justify-content:center;align-items:center;margin-right:4px;transition:color .1s;display:inline-flex}.group-collapse-btn:hover{color:#fff}.group-folder-icon{flex-shrink:0;justify-content:center;align-items:center;margin-right:4px;display:inline-flex}.align-btn{border:1px solid var(--border-color);border-radius:var(--radius-xs);height:30px;color:var(--text-secondary);cursor:pointer;background:#ffffff0a;justify-content:center;align-items:center;padding:0;transition:all .12s;display:inline-flex}.align-btn:hover{color:#fff;background:#ffffff17;border-color:#ffffff38}.align-btn:active{color:var(--accent-primary);border-color:var(--accent-primary);background:#38bdf82e}.flip-btn{border:1px solid var(--border-color);border-radius:var(--radius-xs);height:30px;color:var(--text-secondary);cursor:pointer;background:#ffffff0a;flex:1;justify-content:center;align-items:center;gap:6px;font-size:12px;transition:all .12s;display:inline-flex}.flip-btn:hover{color:#fff;background:#ffffff17;border-color:#ffffff38}