:root { --bg-base: #1a1a1a; --bg-panel: #252525; --bg-panel-alt: #2d2d2d; --bg-input: #1e1e1e; --bg-hover: rgba(255,255,255,0.05); --bg-active: rgba(74,158,255,0.18); --border: #333333; --border-light: #404040; --text: #d0d0d0; --text-dim: #7a7a7a; --text-bright: #e8e8e8; --accent: #4a9eff; --accent-glow: #6ab4ff; --accent-dim: rgba(74,158,255,0.12); --red: #e0556a; --green: #5fbf78; --orange: #eea840; --yellow: #e6d060; --purple: #a488e0; --cyan: #5ed4c8; --font-mono: 'SF Mono','Cascadia Code','Consolas','Monaco',monospace; --font-sans: 'Segoe UI','Inter',-apple-system,system-ui,sans-serif; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-xl: 10px; --glass-border: #333333; --glass-highlight: rgba(255,255,255,0.02); --glass-shadow: 0 2px 8px rgba(0,0,0,0.3); --glass-inner: inset 0 1px 0 rgba(255,255,255,0.03); --shadow-panel: 0 2px 12px rgba(0,0,0,0.35); --shadow-drop: 0 4px 20px rgba(0,0,0,0.5); --shadow-glow: 0 0 12px rgba(74,158,255,0.1); --shadow-button: 0 1px 2px rgba(0,0,0,0.3); --blur-panel: blur(8px) saturate(1.1); --blur-light: blur(4px) saturate(1.05); --blur-heavy: blur(12px) saturate(1.15); --transition: 0.15s ease; --transition-smooth: 0.25s ease; --transition-spring: 0.3s cubic-bezier(0.2,0.8,0.2,1.2); --transition-bounce: 0.4s cubic-bezier(0.6,-0.2,0.2,1.1); } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-base);font-family:var(--font-sans);color:var(--text);position:fixed;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-overflow-scrolling:touch;font-size:13px;} #app{display:flex;flex-direction:column;width:100vw;height:100vh;height:100dvh;position:relative;overflow:hidden;} /* === 性能优化: GPU加速 & 渲染隔离 === */ #menubar,#left-panel,#right-panel,#bottom-panel,#viewport-toolbar,#statusbar,#sculpt-panel, .panel-tabs,.panel-header,.menu-dropdown,.modal-box,#inspector-content,#scene-tree { will-change: transform; contain: layout style; } #canvas-container canvas { will-change: transform; contain: layout style paint; } /* 高开销动画元素使用独立合成层 */ .menu-dropdown.show,.focus-floating-panel,.joystick,#inspector-context-menu.show,#modal-overlay.show { will-change: transform, opacity; } /* Global input reset - remove browser defaults */ input,textarea,select{-webkit-appearance:none;appearance:none;background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);padding:6px 9px;border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-mono);outline:none;transition:border-color 0.15s ease,box-shadow 0.15s ease;} input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(74,158,255,0.15);} input:hover,textarea:hover,select:hover{border-color:var(--border-light);} input[type="range"]{-webkit-appearance:none;appearance:none;background:transparent;border:none;padding:0;box-shadow:none;} input[type="range"]::-webkit-slider-runnable-track{height:5px;background:rgba(255,255,255,0.08);border-radius:3px;border:1px solid rgba(255,255,255,0.06);} input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--accent);cursor:pointer;margin-top:-5px;} input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--accent);cursor:pointer;} input[type="range"]::-moz-range-track{height:5px;background:rgba(255,255,255,0.08);border-radius:3px;border:1px solid rgba(255,255,255,0.06);} input[type="color"]{width:32px;height:28px;padding:2px;cursor:pointer;flex:0 0 auto;} input[type="checkbox"]{width:auto;height:auto;padding:0;background:transparent;border:none;box-shadow:none;} select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px;} /* Menubar */ #menubar{display:flex;align-items:center;height:32px;background:var(--bg-panel-alt);border-bottom:1px solid var(--border);z-index:100;flex-shrink:0;padding:0 4px;gap:0;transform:translateZ(0);} #menubar .menu-item{position:relative;padding:3px 10px;font-size:11.5px;color:var(--text-dim);cursor:pointer;border-radius:var(--radius-sm);transition:background 0.12s ease,color 0.12s ease;white-space:nowrap;letter-spacing:0.2px;font-weight:400;display:flex;align-items:center;gap:4px;height:24px;line-height:24px;border:1px solid transparent;} #menubar .menu-item:hover{background:var(--bg-hover);color:var(--text-bright);} #menubar .menu-item.open{background:rgba(74,158,255,0.15);color:var(--accent-glow);border-color:rgba(74,158,255,0.2);} #menubar .menu-dropdown{display:flex;visibility:hidden;opacity:0;pointer-events:none;position:absolute;top:100%;left:0;min-width:220px;max-height:70vh;overflow-y:auto;background:var(--bg-panel);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,0.55),0 0 0 1px rgba(0,0,0,0.2);z-index:200;padding:6px;flex-direction:column;} #menubar .menu-dropdown.show{visibility:visible;opacity:1;pointer-events:auto;animation:dropdownIn 0.18s cubic-bezier(0.16,1,0.3,1) both;} @keyframes dropdownIn{from{opacity:0;transform:translateY(-8px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);}} #menubar .menu-dropdown .dd-item{padding:7px 10px;font-size:12px;color:var(--text);cursor:pointer;transition:all 0.12s ease;display:flex;align-items:center;gap:8px;white-space:nowrap;position:relative;border-radius:var(--radius-sm);margin:1px 0;} #menubar .menu-dropdown .dd-item:hover{background:var(--bg-active);color:#fff;} #menubar .menu-dropdown .dd-item i{width:16px;text-align:center;font-size:11px;color:var(--text-dim);transition:color 0.12s ease;} #menubar .menu-dropdown .dd-item:hover i{color:var(--accent-glow);} #menubar .menu-dropdown .dd-sep{height:1px;background:var(--border);margin:5px 6px;} #menubar .menu-dropdown .dd-shortcut{margin-left:auto;font-size:9.5px;color:var(--text-dim);font-family:var(--font-mono);opacity:0.6;} #menubar .logo{font-weight:700;font-size:12.5px;color:var(--accent);margin-right:12px;letter-spacing:0.3px;padding:3px 8px;display:flex;align-items:center;gap:6px;position:relative;opacity:0.9;} #menubar .menu-right{margin-left:auto;display:flex;align-items:center;gap:1px;} #menubar .menu-right .menu-dropdown{left:auto;right:0;} .logo-icon{width:20px;height:20px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAAMzUlEQVR42m1ZW6xkx1Vda1ed06cf99V95z3jSWzPjI0fJCGJiQjEKLbJSFGCIwGKErCQ85MfkBIU4MNCEIhQxAfIiCCICD/kM4qCbGxHSshHEhvHZnDGlm1sM4ln7ozvzH3ffpxzqmrzcZ597VbPne4651Tt2rX32nutJu1ZqIIAQEIVAAAFSFJVQUJBAoBqKO8tvlf/Fw8RxeP1N0AJaut2qLauov5ILf5BLUgNWowHrddi8bAqEYDGUJbGol6gHCag7WWKS6rVPln8BbSwuJlQQSqUhQ9sZXLhkeZGoJiFilBd1sIbWqwOlu6rvgPUcs16gGB5j2rp7vZsqpVJ1Z4FQYtnWvutHQtVJYWc83AzV/23fDcH1nIiK38TgAatPQeAVM4/Z8niRAqTqVpcZuV/rTZUOqAYnDOxXqAcJBQUFi5E24DK/OIAaytZbJwKUNBETGUNBZRqMbY3VA41BhS50L5aBVQRadLy+9wkUKWGekdNkEqdLGQdzgqEwnNoJVHbI83JsrKAc9dVoVAEnQ9+zDlyLhJYZKioon4DoCigJKqQaKersm0RAaknJSt3oY5VzBtR3NsENd72oirt3Na0goXGhQHKYjmtA7htlhbRrNoOYXJ+P+UO6umhqm875+JGWz5Zu7FapQodHsi7yud1apO0EKks9hoc1ANCGkWJqyDKDwCLxNYGtiqIAgBbBeDBE34Hh9ZOCg4S2WggpqMBQT0QAKWSsLTU4IKfhDArToaWgFEfUIFRUxaorblJwrKBEpk3SatawBq7oQFA1FsVxi6f5G5LNW+gOwQAoBGT2GggWMzzXY+Zpg6YwiyQ5h3TowDMAt4MOGpZQRIqwroYgKU9Ihq8RJ14cDT4zKUbwU+EkTF9Y/smGlg7ENMV6RLUMPNuN0jodoZRRp47ceT+T2avXPIhbUK28g2UlLowwEBGrbgnoGwXK5YZpMHZZBANVvPxdT/bMVE/GhwSiYPmAc7nE59uworCC6MoWjCSODfJObF5duaRRz73wOfDk1de3/2xmH6Ni630b9LP0IxIEoISilhFYFWNSAQvnV68MEy31tTn8fIRiXpusuXSHYXXfNpZPXTnB85fe+05sfRu6sPMSNSJVoJ3Wdj1r6yNntEfX/r2vk6aLZJz51J5wbDwENuQWgAdWcCVKo1NRkdmN66qd8nohEKzvXUNnlGMoJJEt3310Yc/+LC8uffqmz+00SBAfZh5dd1oqCrjjTd+eu2ZICELGWsoFtESGkiy7l0MOaqAe748sUIk5zuHj+R7O2G2Hw+Ph+DynesQS2NVvQ3hQ//4tYVbPnL68u59dzywtr5x6crTJupDocG5MO3Fo0AN4pfjVRec07y1+4Bq6xXkw1BG2i4dOg9Vwdt+n1HHba3bwZA2zrffgo0L/0lwD/z13w8+fb//j/GZJZt03AeO/Mb69trPrjxrTK/ACI+8Z5czt5erX7ErY7dDkWrPbaRVKCiQqvKXR1vGT10GFGZh0e3u0ES2v5Bv36CJShBx0w//xd8Mf/djW1fT5R1rIrpFnSL9w0989Z7bH/T5tpGIoHezPMxiWczcnjJ0zEA1kKysaY6Fwqa4NkcmAlOZFSCdBJQwHZv+opvNNLgSntL9ux75q+Of/c2XJO9dx6jDEBv0xQ/UiX7hk397y4nzPt8WGoKp349MB5T9MBnYRWgoixGqhcrirACkjcyqKNslY6hAyKUT+8kMUOkkfrrPOIIVzXZOffFPD/3+Z9a3J2pkdSccPoewImli7FGzl4YLl3Df+x49eexen2/TxBqcwkemN/VjKxFptajfrZVJhUKVhmZU1rKqNsGl8GP2FxjH0eooZJkqbbfvxtukaLo1+vwfHP3jL8Tbk2FsTzncbuTMcZw+RhNJ7HHpBa6tKxCfPnH/2vZPxvtvMEoIWka52++bhUwzr65V9+f6EUMZ1jEEEiE37z6dfO73TGx57Lg9ew4rq/bYaY5OmpVj6AwXfue3V7/8JWazYc8OEpOA7xny/SfNaIlHl5GIssebziHuOTHdo8P737j8w2y2RkaRJJkfJ6bn1TnNqhWVBcpULwOOqoMEjMDtJx+9N/rnv8Te2D/2BJ6/mL3yNC5fw3gre/Pi8i/ecfu/fsXrDH3Ts3ZJeZw82cW5HnvgIBK7zM23vIgcOmGO3ozTd/R/4ab7nv+fx9N8nJiFNIy7pufV5yElhQVkc66HK0pHa8x0/cWX+INnzWcejP/si+ajv6rByMYuN3d9th5ubN+8evddK+86sb63OsUo12OGfaunOxiK7EMnIs7o+CoYyWTT5Rfsc//51HOXvqWqie1nftIzPa+uMAhSNmUtvAZpzrT5FKkqFtkeweiD77cPfdr/+oc70YI+94p/6vv595/yN6792p987c5fvvto1w8ia8nYmUMOt95spS8pNVAvP+le+3fnXh789NqPvot/MOKz/a0wmWxNXh8mp2Y+m/p9UCr2QpRMC6ok5EzFuFodkREASHdjGYRuInedi89/Ss6+Jxmc5P9e7b21d/bcew/Z/Xcf58ll050Yk3NFQueqc1saebzwTZ+uLV7pXfz6lYdSN+11Dw0X3jW0o0m6JhP38u5F1dRIL6irWtOGV5H27ME2nBVvULXLy3De7VyO7apzEzl2qnv2nt6JX1pObj05uLszzo8t6pEVPXycR1IsX9buId54IVz+QednnYuP/vxhl25AenDTJFpRwXJ3+N7BPVPdeXX74tXJ/1H6NaVTZcG7yegsSgLUcM3yFVTiOFpaSa+vRcur8JrvrAM5oKC59UOf/ZXzX9G3xoPc++t5dwfLE1npQa7b5bD4xN43Xtz73jhMtrL1sd/vxIPt6RoYJ+iCk08d+q392cZ3th4XJhU1Kcgh7BzbrOtqMSAS0hkIiTpudytZPuqirppB4b3XfvSNwcLKvR//0i0n8qhj8KqLL+U3/gtux70sj93Zfd/55Y+NbJxE2gmZ4WzsJnFqOmKB7JQ5/r3x09/ZeqytDhRvW5DGt7X/VZNC+vHYDpazjTWXTWxvKd+5jihSUjqjC0/+XceMlj7x8OhE2hswXomu78bf3fmjC3v/Bi7E0lswg1F8+FT3ZOSzQ/GRFS7u5hsTTX+eXf7v8YtkRysCqBVzsvpORLBmTTTWTfc73YEkC/neZmflmO0tuekOojgEz2jxmSf+fLE/PP/Qg9ZMrjzb+9Zrj7wevmlkFXCZ29/wuxOmr05egN+LoxOZ20bYBwzUwCRF68p5XcHQrBbZ3u7wm66eBXqn8eLITcdhNk4GQ9L4bAKAYij29RcfXzp+220rt3/9X7780uyfBCtBc1VvTGe5c8yF1IXZMLkpRpSGWWQGZEKJG/JPSlW4VEHaM4DMBXVLhirh3TvbXzDdhfTGGoju4LAGzdKdEDJQEPLOYOmOmz/y/IVvM040KCAd041tf+b2crc3iEcdJhvpVRFTak6AEMqCxSilFIJUQZhbG+ZXhFNBpA9wNefsYMkk/WzzmoY8SpZsNAgh924W4IPL4CdiFwmxNolsNwQ3yTeh+UJ8OGK0ObtGoYaayJTKglZW1LICYc6glXVa9AJScHnU2kjRPZqkZ7uLfrrv0l0oTdwzNgEMQSn1Ex9C6sJMgzfS6UeLqrqXbZKK0h9zMFyiorLiHkras9pqIlsWaL2bsn0jETyNRJ0l0Pp86vMJ1BXdXsO2VMTEsfQMmflJ7tOWtKBzQtIcQy+b66KWtYxoylwpz7FFASgkNHhHExnbJ2P1PoS8mAmqhJAC+BBS79NKpag9EualD5YHoawZl9WW2FAx7MJRUukyaCbVoEoxkWrw2Q4opCnYSzGFD15Lqs/KbSwbwpbOVkIfqzNhpdYCtvhUEn9tyWyspeCqFy8zU9UrhKQFgqpXDaqOYGhcLG1hqYW7PCgMl6Jxo4tZ1DpMi5pVR4YDVFwrSbmQx2rPA1QIoUqtpeDqUA6QPs6Hc+WM6rqUoq7WgawHhdRKuawkQaIlnTdyKhXSoEal6s2rtYXsytYIGyZUeMGi0Z6Ig4pgrYI1qK2h3WAWu5OGSJVWlDJOQwLLuGyEqRZnr/wABdVy/geBpm9UNjlXtXa1yslaSW70LtG2tNhWKYviWMrOEBEjEjQU4wVvJOF9CEHtPBK8o9gaVMv8PaAZttgcwFAmY4H6rDysLZW4oIIC791g0CMoIi7P4yTe3Nw2xoQA+3YLGuWq2mIb19hCzqb7bNtfCfAsN9FqUVkiiDGiGopbxBjvg4hUGmMtqbUkJJZy+8HGpLn3YFC3tqRvk/rbGKAaFDQyHk9rXQiAkM4HQG0r3yultAzAKgEqUNEQqt9civpc/n7TyMU8+IOU1mJ9C4oU6rw/sJugGsXRysrw/wE2cl8GL3xCtwAAAABJRU5ErkJggg==);background-size:contain;background-repeat:no-repeat;display:inline-block;} /* Main Layout */ #main-layout{display:flex;flex:1;overflow:hidden;position:relative;} /* Left Panel */ #left-panel{width:270px;min-width:210px;background:var(--bg-panel);backdrop-filter:var(--blur-panel);-webkit-backdrop-filter:var(--blur-panel);border-right:1px solid var(--glass-border);display:flex;flex-direction:column;z-index:50;flex-shrink:0;transition:width 0.35s cubic-bezier(0.22,0.61,0.36,1),min-width 0.35s cubic-bezier(0.22,0.61,0.36,1),opacity 0.35s ease;overflow:visible;transform:translateZ(0);box-shadow:var(--glass-inner);} #left-panel.collapsed{width:0;min-width:0;border-right:none;opacity:0;overflow:hidden;} #left-panel.peek-hint{position:relative;} #left-panel.peek-hint::after{content:'';position:absolute;right:-6px;top:0;bottom:0;width:6px;background:transparent;z-index:60;pointer-events:auto;cursor:col-resize;} .panel-divider{width:3px;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.04) 50%,transparent);cursor:col-resize;flex-shrink:0;position:relative;z-index:55;transition:background 0.3s ease,box-shadow 0.3s ease;} .panel-divider::after{content:'';position:absolute;top:0;bottom:0;left:-5px;width:13px;background:transparent;cursor:col-resize;z-index:56;} .panel-divider:hover{background:var(--accent);} .panel-divider.dragging{background:var(--accent);} #left-panel .panel-tabs{display:flex;background:var(--bg-panel-alt);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);border-bottom:1px solid var(--border);flex-shrink:0;height:32px;border-radius:0;padding:0 4px;gap:1px;} #left-panel .panel-tab{flex:1;text-align:center;padding:5px 6px;font-size:10.5px;cursor:pointer;color:var(--text-dim);border-bottom:2px solid transparent;transition:all 0.2s ease;font-weight:500;letter-spacing:0.3px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:0;position:relative;} #left-panel .panel-tab i{font-size:10px;transition:color 0.2s ease;opacity:0.7;} #left-panel .panel-tab.active{color:var(--text-bright);border-bottom-color:var(--accent);background:rgba(74,158,255,0.04);} #left-panel .panel-tab.active i{opacity:1;color:var(--accent);} #left-panel .panel-tab:hover{color:var(--text-bright);background:rgba(255,255,255,0.02);} #left-panel .panel-tab:hover i{opacity:1;} #left-panel .panel-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:3px 0;} #left-panel .panel-section{display:none;flex-direction:column;height:100%;} #left-panel .panel-section.active{display:flex;} #left-panel .panel-section:not(.active){content-visibility:hidden;} /* Scene Tree */ #scene-tree{padding:0;content-visibility:auto;contain-intrinsic-size:auto 200px;} #scene-tree .tree-node{padding:5px 10px 5px 16px;font-size:11.5px;cursor:pointer;color:var(--text);border-left:2px solid transparent;transition:all 0.15s ease;display:flex;align-items:center;gap:6px;white-space:nowrap;user-select:none;position:relative;} #scene-tree .tree-node:hover{background:rgba(255,255,255,0.02);border-left-color:rgba(74,158,255,0.25);} #scene-tree .tree-node.selected{background:var(--bg-active);border-left-color:var(--accent);color:var(--text-bright);} #scene-tree .tree-node .node-icon{width:16px;text-align:center;flex-shrink:0;font-size:13px;display:flex;align-items:center;justify-content:center;} .node-icon-shape{width:12px;height:12px;display:inline-block;flex-shrink:0;} .node-icon-cube{background:#5c8bff;border-radius:2px;box-shadow:inset -2px -2px 0 rgba(0,0,0,0.3);} .node-icon-sphere{background:radial-gradient(circle at 30% 30%,#ffb74d,#c96a1b);border-radius:50%;} .node-icon-cylinder{background:linear-gradient(180deg,#81c784 50%,#4c8c4a 50%);border-radius:4px 4px 12px 12px;width:12px;height:14px;} .node-icon-plane{background:#ce93d8;width:14px;height:2px;border-radius:1px;transform:rotate(45deg);opacity:0.8;} .node-icon-light{background:var(--text-dim);width:10px;height:10px;border-radius:50%;} .node-icon-cone{background:linear-gradient(180deg,#ff8a65 60%,#bf360c 60%);clip-path:polygon(50% 100%,0% 20%,100% 20%);width:12px;height:12px;} .node-icon-torus{background:transparent;border:2px solid #ffb74d;border-radius:50%;width:10px;height:10px;box-shadow:inset 0 0 0 3px #14141e;} .node-icon-camera{background:linear-gradient(135deg,#4488cc,#2a5a8a);width:12px;height:12px;border-radius:2px;position:relative;} .node-icon-camera::after{content:'';position:absolute;top:3px;left:3px;width:4px;height:4px;background:#aaccff;border-radius:50%;} .node-icon-glb{background:linear-gradient(135deg,#a488e0,#6a4cbf);width:12px;height:12px;border-radius:2px;position:relative;} .node-icon-glb::after{content:'GLB';position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:5px;font-weight:700;color:#fff;} .node-icon-spawnPoint{background:var(--green);width:12px;height:12px;border-radius:50%;border:2px solid var(--green);} #scene-tree .tree-node .node-name{flex:1;min-width:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d0d0dc;font-size:12px;font-weight:500;line-height:1.4;} #scene-tree .tree-node .node-actions{display:flex;gap:4px;opacity:0;transition:var(--transition);flex-shrink:0;} #scene-tree .tree-node:hover .node-actions{opacity:1;} #scene-tree .tree-node .node-act-btn{width:18px;height:18px;border-radius:3px;border:none;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--text-dim);transition:var(--transition);padding:0;line-height:1;} #scene-tree .tree-node .node-act-btn:hover{background:rgba(255,255,255,0.1);color:#fff;} #scene-tree .tree-node .node-act-btn.del:hover{background:rgba(224,85,106,0.3);color:var(--red);} #scene-tree .tree-node.tree-node-locked{opacity:0.6;} #scene-tree .tree-node.tree-node-locked .node-name{color:var(--orange);} #scene-tree .tree-node.tree-node-hidden{opacity:0.4;} #scene-tree .tree-node.tree-node-hidden .node-name{font-style:italic;} #scene-tree .tree-empty{padding:20px;text-align:center;color:var(--text-dim);font-size:11px;font-style:italic;} /* Texture Resources Panel */ #texture-resources{padding:4px 6px;} #texture-resources .tex-header{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;margin-bottom:4px;} #texture-resources .tex-header span{font-size:10px;color:var(--text-dim);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;} #texture-resources .tex-import-btn{padding:4px 10px;font-size:10px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;background:var(--bg-input);color:var(--text);transition:all 0.12s ease;font-weight:500;display:flex;align-items:center;gap:4px;white-space:nowrap;} #texture-resources .tex-import-btn:hover{background:var(--bg-hover);color:var(--text-bright);border-color:var(--border-light);} #texture-resources .tex-import-btn i{font-size:9px;} #texture-resources .tex-item{display:flex;align-items:center;padding:5px 8px;gap:8px;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.15s ease;margin-bottom:1px;border:1px solid transparent;animation:texItemIn 0.25s ease-out both;} @keyframes texItemIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}} #texture-resources .tex-item:hover{background:var(--bg-hover);border-color:var(--border);} #texture-resources .tex-item.selected{background:var(--bg-active);border-color:var(--accent);} #texture-resources .tex-thumb{width:32px;height:32px;border-radius:2px;background:var(--bg-input);border:1px solid var(--border);object-fit:cover;flex-shrink:0;} #texture-resources .tex-thumb-placeholder{width:32px;height:32px;border-radius:2px;background:var(--bg-input);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:13px;flex-shrink:0;} #texture-resources .tex-info{flex:1;min-width:0;} #texture-resources .tex-name{font-size:11px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #texture-resources .tex-meta{font-size:9px;color:var(--text-dim);} #texture-resources .tex-quality{display:inline-block;padding:1px 4px;border-radius:3px;font-size:8px;font-weight:700;margin-left:4px;} .tex-quality-high{background:rgba(92,184,120,0.15);color:var(--green);} .tex-quality-mid{background:rgba(232,168,80,0.15);color:var(--orange);} .tex-quality-low{background:rgba(224,85,106,0.15);color:var(--red);} #texture-resources .tex-actions{display:flex;gap:2px;opacity:0;transition:opacity 0.15s ease;} #texture-resources .tex-item:hover .tex-actions{opacity:1;} #texture-resources .tex-act-btn{width:22px;height:22px;border-radius:3px;border:none;cursor:pointer;font-size:9px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--text-dim);transition:all 0.12s ease;} #texture-resources .tex-act-btn:hover{background:rgba(255,255,255,0.08);color:#fff;transform:scale(1.1);} #texture-resources .tex-act-btn.del:hover{background:rgba(224,85,106,0.25);color:var(--red);} #texture-resources .tex-empty{padding:20px;text-align:center;color:var(--text-dim);font-size:11px;} /* File System */ #file-system{padding:4px 8px;} #file-system .fs-item{padding:5px 10px;font-size:11.5px;cursor:pointer;color:var(--text);border-radius:var(--radius-sm);transition:var(--transition);display:flex;align-items:center;gap:7px;} #file-system .fs-item:hover{background:rgba(255,255,255,0.04);} #file-system .fs-arrow{font-size:8px;margin-right:2px;transition:transform 0.25s ease;color:var(--text-dim);} #file-system .fs-arrow.expanded{transform:rotate(90deg);} #file-system .fs-folder-item{font-weight:500;} #file-system .fs-file-item{font-style:italic;} /* Tutorial Panel */ #panel-tutorial h4{font-size:13px;font-weight:600;margin-bottom:8px;} #panel-tutorial b{font-weight:600;} #panel-tutorial .key-hint{display:inline-block;background:var(--bg-active);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-family:var(--font-mono);font-size:10px;color:var(--accent-glow);margin:0 2px;} .fs-icon-folder{width:14px;height:10px;background:var(--orange);border-radius:2px 2px 0 0;position:relative;} .fs-icon-folder::before{content:'';position:absolute;top:-3px;left:0;width:8px;height:4px;background:var(--orange);border-radius:2px 2px 0 0;} .fs-icon-file{width:12px;height:14px;border:2px solid var(--text-dim);border-radius:2px;position:relative;} .fs-icon-file::after{content:'';position:absolute;top:2px;left:2px;width:6px;height:2px;background:var(--text-dim);border-radius:1px;box-shadow:0 4px 0 var(--text-dim);} /* Editor Area */ #editor-area{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--bg-base);} #viewport-toolbar{display:flex;align-items:center;gap:3px;padding:5px 8px;background:var(--bg-panel);backdrop-filter:var(--blur-panel);-webkit-backdrop-filter:var(--blur-panel);border-bottom:1px solid var(--border);flex-shrink:0;height:38px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;-webkit-overflow-scrolling:touch;transform:translateZ(0);box-shadow:0 1px 0 rgba(255,255,255,0.02) inset;scrollbar-width:none;} #viewport-toolbar::-webkit-scrollbar{height:3px;background:transparent;} #viewport-toolbar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;} #viewport-toolbar::-webkit-scrollbar-thumb:hover{background:var(--accent);} #viewport-toolbar{scrollbar-width:thin;scrollbar-color:var(--border) transparent;} #viewport-toolbar .vt-btn{padding:5px 10px;font-size:10.5px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;background:transparent;color:var(--text-dim);transition:all 0.15s ease;font-weight:500;letter-spacing:0.2px;display:flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0;} #viewport-toolbar .vt-btn:hover{background:var(--bg-hover);color:var(--text-bright);border-color:var(--border);} #viewport-toolbar .vt-btn:active{transform:scale(0.95);} #viewport-toolbar .vt-btn.active{background:var(--bg-active);border-color:rgba(74,158,255,0.3);color:var(--accent-glow);} #viewport-toolbar .vt-btn.run-btn{background:var(--accent);color:#fff;border-color:transparent;font-weight:600;} #viewport-toolbar .vt-btn.run-btn:hover{background:var(--accent-glow);} #viewport-toolbar .vt-btn.run-active{background:var(--red);color:#fff;border-color:transparent;font-weight:600;} #viewport-toolbar .vt-btn.export-btn{background:var(--accent);color:#fff;border-color:transparent;font-weight:600;} #viewport-toolbar .vt-btn.export-btn:hover{background:var(--accent-glow);} #viewport-toolbar .vt-btn.sculpt-btn{background:var(--accent);color:#fff;border-color:transparent;font-weight:600;} #viewport-toolbar .vt-btn.sculpt-btn:hover{background:var(--accent-glow);} #viewport-toolbar .vt-btn.sculpt-btn.active{background:var(--accent-glow);} /* Sculpt Brush Settings Panel */ #sculpt-panel{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--bg-panel);backdrop-filter:var(--blur-panel);-webkit-backdrop-filter:var(--blur-panel);border-bottom:1px solid var(--border);flex-shrink:0;height:40px;overflow:hidden;transition:all 0.35s ease;} #sculpt-panel.hidden{height:0;padding-top:0;padding-bottom:0;border-bottom:none;opacity:0;} #sculpt-panel .sculpt-label{font-size:10px;color:var(--text-dim);white-space:nowrap;margin-right:2px;opacity:0.7;} #sculpt-panel .sculpt-mode-btn{padding:3px 8px;font-size:10px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;background:var(--bg-input);color:var(--text);transition:all 0.12s ease;white-space:nowrap;} #sculpt-panel .sculpt-mode-btn:hover{background:var(--bg-hover);color:var(--text-bright);border-color:var(--border-light);} #sculpt-panel .sculpt-mode-btn.active{background:var(--bg-active);border-color:var(--accent);color:var(--accent-glow);} #sculpt-panel .custom-slider{flex:0 0 80px;min-width:60px;} #sculpt-panel .custom-slider .slider-wrap{height:16px;} #sculpt-panel .custom-slider .slider-track-left, #sculpt-panel .custom-slider .slider-track-right{height:2px;} #sculpt-panel .custom-slider .slider-thumb{width:4px;height:12px;border-radius:2px;} #sculpt-panel .custom-slider .slider-val{width:30px;font-size:9px;} #sculpt-brush-cursor{position:absolute;pointer-events:none;z-index:20;border:2px solid var(--accent);border-radius:50%;transform:translate(-50%,-50%);display:none;transition:width 0.1s ease,height 0.1s ease;} #sculpt-brush-cursor.show{display:block;} #viewport-toolbar .vt-sep{width:1px;height:20px;background:var(--border);margin:0 6px;flex-shrink:0;opacity:0.6;} #viewport-toolbar .vt-label{font-size:10px;color:var(--text-dim);margin:0 2px;letter-spacing:0.4px;flex-shrink:0;opacity:0.7;} #viewport-toolbar .vt-btn .vt-label{font-size:9px;color:#fff;opacity:0.35;text-align:center;display:block;margin-top:2px;line-height:1;} #viewport-toolbar .vt-slider-wrap{flex-shrink:0;} #viewport-toolbar .vt-slider{width:50px;height:4px;-webkit-appearance:none;background:rgba(255,255,255,0.1);border-radius:3px;outline:none;cursor:pointer;} #viewport-toolbar .vt-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;} #canvas-container{flex:1;position:relative;cursor:default;overflow:hidden;background-image:radial-gradient(circle,rgba(90,160,240,0.05) 1px,transparent 1px),radial-gradient(circle,rgba(90,160,240,0.03) 1px,transparent 1px);background-size:20px 20px,40px 40px;background-position:0 0,10px 10px;} #canvas-container canvas{display:block;} /* Sky Drop Zone */ .sky-drop-hint{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:15;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity 0.3s ease;} .sky-drop-hint.show{opacity:1;} .sky-drop-hint .hint-text{background:rgba(18,18,30,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:2px dashed rgba(90,160,240,0.4);border-radius:var(--radius-xl);padding:22px 34px;color:var(--accent-glow);font-size:14px;font-weight:600;letter-spacing:0.6px;} /* Joystick */ .joystick{position:absolute;bottom:40px;width:80px;height:80px;border-radius:50%;background:rgba(18,18,30,0.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,0.1);box-shadow:0 6px 20px rgba(0,0,0,0.4);touch-action:none;z-index:20;transition:opacity 0.35s,transform 0.2s var(--transition-spring);} .joystick::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,0.06);pointer-events:none;} .joystick-knob{position:absolute;top:50%;left:50%;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.15);box-shadow:0 2px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.08) inset;transform:translate(-50%,-50%);pointer-events:none;transition:box-shadow 0.2s,background 0.2s;border:1px solid rgba(255,255,255,0.12);} .joystick:active .joystick-knob{background:rgba(255,255,255,0.25);box-shadow:0 0 12px rgba(255,255,255,0.15),0 0 0 2px rgba(255,255,255,0.15) inset;} #joystick-left{left:20px;}#joystick-right{right:20px;} @media(min-width:1025px){.joystick{opacity:0.3;pointer-events:auto;}.joystick:hover{opacity:0.9;transform:scale(1.05);}} /* Right Panel */ #right-panel{width:285px;min-width:220px;background:var(--bg-panel);backdrop-filter:var(--blur-panel);-webkit-backdrop-filter:var(--blur-panel);border-left:1px solid var(--glass-border);display:flex;flex-direction:column;z-index:50;flex-shrink:0;transition:width 0.35s cubic-bezier(0.22,0.61,0.36,1),min-width 0.35s cubic-bezier(0.22,0.61,0.36,1),opacity 0.35s ease;overflow:visible;transform:translateZ(0);box-shadow:var(--glass-inner);} #right-panel.peek-hint{position:relative;} #right-panel .panel-header{padding:8px 12px;font-size:10.5px;font-weight:700;letter-spacing:0.8px;color:var(--text-dim);text-transform:uppercase;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg-panel-alt);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);display:flex;align-items:center;gap:7px;} #right-panel .panel-header i{color:var(--accent);font-size:11px;opacity:0.8;} #inspector-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;} #inspector-content .insp-group{margin-bottom:6px;} #inspector-content .insp-group-title{padding:9px 14px;font-size:10.5px;font-weight:700;letter-spacing:0.8px;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;gap:7px;text-transform:uppercase;transition:all 0.2s ease;user-select:none;border-radius:0;position:relative;} #inspector-content .insp-group-title:hover{background:rgba(255,255,255,0.02);color:var(--text-bright);} #inspector-content .insp-group-title i{font-size:9px;transition:transform 0.3s ease;opacity:0.6;} #inspector-content .insp-group-title:hover i{opacity:1;} #inspector-content .insp-group-title i.collapsed{transform:rotate(-90deg);} #inspector-content .insp-row{display:flex;align-items:center;padding:5px 14px;gap:8px;font-size:11px;transition:background 0.15s ease;position:relative;} #inspector-content .insp-row:hover{background:rgba(255,255,255,0.015);} #inspector-content .insp-row::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:2px;background:var(--accent);opacity:0;border-radius:0 2px 2px 0;transform:scaleY(0);transition:all 0.25s ease;} #inspector-content .insp-row:hover::before{opacity:1;transform:scaleY(1);} #inspector-content .insp-row label{width:50px;flex-shrink:0;color:var(--text-dim);font-size:10px;letter-spacing:0.3px;font-weight:500;} #inspector-content .insp-row input{flex:1;background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);padding:5px 8px;border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-mono);outline:none;transition:all 0.15s ease;min-width:0;} #inspector-content .insp-row input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(74,158,255,0.15);} #inspector-content .insp-row input[type="color"]{width:30px;height:28px;padding:2px;cursor:pointer;border-radius:var(--radius-sm);flex:0 0 auto;} #inspector-content .insp-row .vec3-inputs{display:flex;gap:4px;flex:1;min-width:0;} #inspector-content .insp-row .vec3-inputs input{width:33.33%;text-align:center;padding:6px 2px;font-size:10px;} #inspector-content .insp-row select{flex:1;background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);padding:6px 9px;border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-mono);outline:none;transition:all 0.2s var(--transition);min-width:0;cursor:pointer;} #inspector-content .insp-row select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(90,160,240,0.12);} #inspector-content .insp-row .tex-preview{width:42px;height:42px;border-radius:var(--radius-sm);border:1px solid var(--border);object-fit:cover;flex-shrink:0;background:var(--bg-input);} #inspector-content .insp-row .tex-none{width:42px;height:42px;border-radius:var(--radius-sm);border:1px solid var(--border);flex-shrink:0;background:var(--bg-input);display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:17px;} #inspector-content .insp-empty{padding:32px 20px;text-align:center;color:var(--text-dim);font-size:12px;font-style:italic;line-height:1.7;} #inspector-content .insp-hint{font-size:9px;color:var(--text-dim);padding:3px 14px 8px;font-style:italic;} /* PBR材质预设面板 - 紧凑网格 */ #pbr-preset-panel{max-height:180px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border) transparent;background:var(--bg-panel-alt);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);border-top:1px solid var(--glass-border) !important;} #pbr-preset-panel::-webkit-scrollbar{width:4px;} #pbr-preset-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;} #pbr-preset-grid{display:flex;flex-wrap:wrap;gap:3px;padding:0;} /* Custom Texture Picker */ .tex-picker{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);margin:0 14px 0;overflow:hidden;} .tex-picker-scroll{display:flex;gap:6px;padding:8px;overflow-x:auto;overflow-y:hidden;} .tex-picker-scroll::-webkit-scrollbar{height:4px;background:transparent;} .tex-picker-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;} .tex-picker-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;transition:all 0.2s var(--transition);flex-shrink:0;min-width:56px;} .tex-picker-item:hover{border-color:rgba(255,255,255,0.15);background:rgba(255,255,255,0.04);} .tex-picker-item.active{border-color:var(--accent);background:var(--bg-active);} .tex-picker-thumb{width:40px;height:40px;border-radius:3px;object-fit:cover;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:16px;} .tex-picker-label{font-size:9px;color:var(--text-dim);text-align:center;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tex-picker-item.active .tex-picker-label{color:var(--accent-glow);} .tex-picker-empty{padding:18px;text-align:center;color:var(--text-dim);font-size:11px;display:flex;align-items:center;justify-content:center;gap:6px;} /* Face Texture Selector */ .face-selector{display:flex;flex-wrap:wrap;gap:4px;padding:6px 14px;} .face-selector-label{font-size:10px;color:var(--text-dim);width:100%;margin-bottom:2px;} .face-check{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,0.08);cursor:pointer;font-size:10px;color:var(--text-dim);transition:all 0.2s;user-select:none;} .face-check:hover{border-color:rgba(255,255,255,0.2);} .face-check.active{border-color:var(--accent);background:rgba(90,160,240,0.1);color:var(--accent-glow);} .face-check i{font-size:9px;} /* Bottom Panel */ #bottom-panel{height:115px;background:var(--bg-panel);backdrop-filter:var(--blur-panel);-webkit-backdrop-filter:var(--blur-panel);border-top:1px solid var(--border);display:flex;flex-direction:column;z-index:50;flex-shrink:0;transition:height 0.35s cubic-bezier(0.22,0.61,0.36,1);transform:translateZ(0);} #bottom-panel.collapsed{height:28px;} #bottom-panel .bp-tabs{display:flex;background:var(--bg-panel-alt);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);border-bottom:1px solid var(--border);flex-shrink:0;height:30px;align-items:center;padding:0 4px;gap:1px;} #bottom-panel .bp-tab{padding:4px 14px;font-size:10.5px;cursor:pointer;color:var(--text-dim);border-right:1px solid transparent;transition:background 0.2s ease,color 0.2s ease;letter-spacing:0.4px;font-weight:500;height:100%;display:flex;align-items:center;gap:5px;border-radius:0;position:relative;} #bottom-panel .bp-tab.active{color:var(--text-bright);background:rgba(74,158,255,0.06);border-right-color:var(--border);} #bottom-panel .bp-tab.active i{color:var(--accent);} #bottom-panel .bp-tab i{font-size:10px;opacity:0.7;transition:opacity 0.2s;} #bottom-panel .bp-tab:hover{color:var(--text-bright);} #bottom-panel .bp-tab:hover i{opacity:1;} #bottom-panel .bp-toggle{margin-left:auto;padding:4px 10px;cursor:pointer;color:var(--text-dim);font-size:14px;transition:all 0.2s var(--transition);border:none;background:transparent;border-radius:var(--radius-sm);} #bottom-panel .bp-toggle:hover{color:#fff;background:var(--bg-hover);} #output-log{flex:1;overflow-y:auto;padding:6px 12px;font-family:var(--font-mono);font-size:10.5px;line-height:1.6;color:var(--text-dim);background:var(--bg-base);} #output-log .log-line{padding:1px 0;border-left:2px solid transparent;padding-left:8px;margin:1px 0;} #output-log .log-line:hover{background:rgba(255,255,255,0.015);} #output-log .log-warn{color:var(--orange);} #output-log .log-err{color:var(--red);} #output-log .log-info{color:var(--cyan);} #code-editor-container{flex:1;display:none;flex-direction:column;background:var(--bg-base);overflow:hidden;} #code-editor-container.active{display:flex;} #code-editor-toolbar{display:flex;gap:5px;padding:5px 8px;background:var(--bg-panel);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap;align-items:center;} #code-editor-toolbar .ce-btn{padding:4px 10px;font-size:10.5px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;background:var(--bg-input);color:var(--text);transition:all 0.15s ease;white-space:nowrap;} #code-editor-toolbar .ce-btn:hover{background:var(--bg-hover);color:var(--text-bright);border-color:var(--border-light);} #code-editor-toolbar .ce-btn.run-btn{background:var(--accent);color:#fff;border-color:transparent;font-weight:600;} #code-editor-toolbar .ce-label{font-size:10px;color:var(--text-dim);margin:0 6px;opacity:0.7;} #code-editor-toolbar select{background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);padding:3px 6px;border-radius:var(--radius-sm);font-size:10px;outline:none;cursor:pointer;} #code-textarea{flex:1;width:100%;background:var(--bg-base);border:none;color:#d0d0d8;font-family:var(--font-mono);font-size:11px;padding:8px;resize:none;outline:none;line-height:1.6;tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;} #code-textarea:focus{box-shadow:inset 0 0 0 1px var(--accent);} /* Statusbar */ #statusbar{height:24px;background:var(--bg-panel);backdrop-filter:var(--blur-panel);-webkit-backdrop-filter:var(--blur-panel);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 12px;font-size:10px;color:var(--text-dim);gap:14px;flex-shrink:0;z-index:100;} #statusbar .status-item{display:flex;align-items:center;gap:5px;} #statusbar .status-item b{color:var(--text-bright);font-weight:600;} /* Toast */ #toast{position:fixed;bottom:52px;left:50%;transform:translateX(-50%);background:rgba(30,30,40,0.94);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);color:#fff;padding:9px 20px;border-radius:20px;font-size:12px;z-index:9999;pointer-events:none;opacity:0;transition:all 0.35s cubic-bezier(0.175,0.885,0.32,1.275);border:1px solid rgba(255,255,255,0.08);box-shadow:0 4px 20px rgba(0,0,0,0.5);font-weight:500;letter-spacing:0.2px;white-space:nowrap;display:flex;align-items:center;gap:6px;} #toast::before{content:'';position:absolute;bottom:0;left:12px;right:12px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);border-radius:1px;opacity:0;transition:opacity 0.3s ease;} #toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);border-color:var(--border);} #toast.show::before{opacity:0.5;} /* Modal */ #modal-overlay{display:flex;visibility:hidden;opacity:0;pointer-events:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:9998;align-items:center;justify-content:center;} #modal-overlay.show{visibility:visible;opacity:1;pointer-events:auto;animation:fadeIn 0.2s ease both;} #modal-box{background:var(--bg-panel);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px;max-width:540px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.5);animation:modalIn 0.25s cubic-bezier(0.16,1,0.3,1);} @keyframes modalIn{from{opacity:0;transform:scale(0.94) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}} #modal-box h3{font-size:14px;color:var(--text-bright);margin-bottom:14px;display:flex;align-items:center;gap:7px;font-weight:600;} /* Game Preview Window — 引擎内嵌浮动预览窗口 */ #game-preview-window{position:absolute;top:4%;left:8%;width:64%;height:70%;min-width:300px;min-height:200px;z-index:90;background:var(--bg-panel);backdrop-filter:var(--blur-panel);-webkit-backdrop-filter:var(--blur-panel);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--glass-shadow),0 0 0 1px rgba(255,255,255,0.05) inset;display:flex;flex-direction:column;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;transition:opacity 0.35s var(--transition-smooth),visibility 0.35s,transform 0.35s var(--transition-spring);transform:scale(0.92);} #game-preview-window.show{visibility:visible;opacity:1;pointer-events:auto;transform:scale(1);} #game-preview-window.game-mode{position:fixed!important;top:0!important;left:0!important;width:100vw!important;width:100dvw!important;height:100vh!important;height:100dvh!important;border-radius:0!important;border:none!important;z-index:9999!important;min-width:0!important;min-height:0!important;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);display:flex!important;flex-direction:column!important;background:#0a0a14!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:none!important;} #game-preview-window.game-mode #game-preview-bar{cursor:default!important;} #game-preview-window.game-mode .gp-resize-handle{display:none!important;} #game-preview-window.game-mode #gp-btn-max, #game-preview-window.game-mode #gp-btn-min{display:none!important;} #game-preview-window.maximized{top:0!important;left:0!important;width:100%!important;height:100%!important;border-radius:0;border:none;z-index:95;} #game-preview-window.minimized{height:32px!important;min-height:32px!important;overflow:hidden;top:auto!important;bottom:8px!important;width:240px!important;left:auto!important;right:16px!important;} #game-preview-window.minimized #game-preview-canvas{display:none;} /* Preview Title Bar */ #game-preview-bar{display:flex;align-items:center;height:34px;min-height:34px;background:var(--bg-panel-alt);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);border-bottom:1px solid var(--border);padding:0 6px 0 12px;gap:8px;flex-shrink:0;z-index:1;cursor:grab;user-select:none;-webkit-user-select:none;} #game-preview-bar:active{cursor:grabbing;} #game-preview-bar .gp-title{font-size:11.5px;font-weight:600;color:var(--text-bright);letter-spacing:0.3px;flex:1;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;} #game-preview-bar .gp-size{font-size:9px;color:var(--text-dim);font-family:var(--font-mono);padding:2px 7px;border-radius:4px;background:var(--bg-input);flex-shrink:0;} #game-preview-bar .gp-btn{width:26px;height:26px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all 0.12s ease;flex-shrink:0;} #game-preview-bar .gp-btn:hover{background:var(--bg-hover);color:var(--text-bright);border-color:var(--border-light);} #game-preview-bar .gp-btn.gp-max:hover{background:rgba(120,200,120,0.2);border-color:var(--green);color:var(--green);} #game-preview-bar .gp-btn.gp-min:hover{background:rgba(232,200,80,0.2);border-color:var(--yellow);color:var(--yellow);} #game-preview-bar .gp-btn.gp-close:hover{background:rgba(224,85,106,0.2);border-color:var(--red);color:var(--red);} #game-preview-canvas{flex:1 1 0;width:100%;min-height:0;border:none;background:#1a1a2e;display:block;position:relative;min-width:0;z-index:1;} #game-preview-window.game-mode #game-preview-canvas{flex:1 1 0!important;width:100%!important;height:auto!important;min-height:0!important;min-width:0!important;display:block!important;touch-action:manipulation;background:#0a0a14;z-index:1;} #canvas-container.game-mode-active{background:transparent!important;} #game-preview-window.game-mode ~ #canvas-container, #canvas-container:has(> #game-preview-window.game-mode){background:transparent!important;} /* Resize handles */ #game-preview-window .gp-resize-handle{position:absolute;z-index:5;} .gp-resize-n{top:-3px;left:8px;right:8px;height:8px;cursor:n-resize;} .gp-resize-s{bottom:-3px;left:8px;right:8px;height:8px;cursor:s-resize;} .gp-resize-e{right:-3px;top:8px;bottom:8px;width:8px;cursor:e-resize;} .gp-resize-w{left:-3px;top:8px;bottom:8px;width:8px;cursor:w-resize;} .gp-resize-ne{top:-3px;right:-3px;width:14px;height:14px;cursor:ne-resize;} .gp-resize-nw{top:-3px;left:-3px;width:14px;height:14px;cursor:nw-resize;} .gp-resize-se{bottom:-3px;right:-3px;width:14px;height:14px;cursor:se-resize;} .gp-resize-sw{bottom:-3px;left:-3px;width:14px;height:14px;cursor:sw-resize;} @media(max-width:900px){ #game-preview-window:not(.game-mode){top:2%!important;left:2%!important;width:96%!important;height:80%!important;border-radius:var(--radius);} #game-preview-bar{height:32px;min-height:32px;padding:0 4px 0 8px;gap:4px;} #game-preview-bar .gp-title{font-size:11px;} #game-preview-bar .gp-btn{width:26px;height:26px;font-size:11px;} #game-preview-bar .gp-size{font-size:8px;padding:1px 5px;} } @media(max-width:600px){ #game-preview-window:not(.game-mode){top:0!important;left:0!important;width:100%!important;height:100%!important;border-radius:0;bottom:auto!important;} #game-preview-bar{height:30px;min-height:30px;padding:0 3px 0 6px;gap:3px;} #game-preview-bar .gp-title{font-size:10px;} #game-preview-bar .gp-btn{width:24px;height:24px;font-size:10px;} #canvas-container{flex:1;min-height:50vh;} } @media(max-width:600px){ #game-preview-window.game-mode #game-preview-canvas{flex:1 1 0!important;width:100%!important;height:auto!important;min-height:0!important;min-width:0!important;display:block!important;} #game-preview-window.game-mode #game-preview-bar{height:30px;min-height:30px;padding:0 3px 0 6px;gap:3px;opacity:0.5!important;cursor:default!important;} } /* Buttons */ .btn-primary{background:var(--accent);color:#fff;border:none;padding:7px 18px;border-radius:var(--radius-sm);cursor:pointer;font-size:11.5px;font-weight:600;transition:all 0.15s ease;letter-spacing:0.2px;} .btn-primary:hover{background:var(--accent-glow);} .btn-primary:active{transform:scale(0.97);} .btn-cancel{background:var(--bg-input);color:var(--text);border:1px solid var(--border);padding:7px 18px;border-radius:var(--radius-sm);cursor:pointer;font-size:11.5px;transition:all 0.15s ease;} .btn-cancel:hover{background:var(--bg-hover);color:var(--text-bright);border-color:var(--border-light);} /* Rotate overlay */ #rotate-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#0d0d14;z-index:10000;align-items:center;justify-content:center;flex-direction:column;color:#666;font-size:16px;} #rotate-overlay.show{display:flex;} #rotate-overlay i{font-size:48px;margin-bottom:16px;color:var(--text-dim);animation:rotateHint 2s ease-in-out infinite;} @keyframes rotateHint{0%,100%{transform:rotate(0deg);}50%{transform:rotate(90deg);}} /* Custom Sliders */ .custom-slider{display:flex;align-items:center;gap:8px;flex:1;min-width:0;} .custom-slider .slider-wrap{position:relative;flex:1;height:24px;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none;} .custom-slider .slider-track-left{position:absolute;left:0;height:3px;background:var(--accent);border-radius:1.5px 4px 4px 1.5px;transition:width 0.08s cubic-bezier(0.22,0.61,0.36,1);} .custom-slider .slider-track-right{position:absolute;height:3px;background:rgba(255,255,255,0.15);border-radius:4px 1.5px 1.5px 4px;transition:left 0.08s cubic-bezier(0.22,0.61,0.36,1),width 0.08s cubic-bezier(0.22,0.61,0.36,1);} .custom-slider .slider-thumb{position:absolute;top:50%;width:5px;height:18px;background:var(--accent);border-radius:3px;transform:translate(-50%,-50%);z-index:2;} .custom-slider .slider-val{width:34px;font-size:10px;color:var(--text-dim);font-family:var(--font-mono);text-align:right;flex-shrink:0;} /* Custom Color Picker */ .custom-color{display:flex;align-items:center;gap:6px;} .custom-color .color-swatch{width:32px;height:32px;border-radius:var(--radius-sm);border:2px solid var(--border);cursor:pointer;position:relative;overflow:hidden;transition:border-color 0.2s,box-shadow 0.2s;flex-shrink:0;} .custom-color .color-swatch:hover{border-color:var(--accent);} .custom-color .color-swatch .swatch-fill{position:absolute;inset:0;border-radius:5px;} .custom-color .color-hex{width:68px;background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);padding:6px;border-radius:var(--radius-sm);font-size:10px;font-family:var(--font-mono);outline:none;transition:all 0.2s var(--transition);text-align:center;} .custom-color .color-hex:focus{border-color:var(--accent);} .custom-color .color-presets{display:flex;gap:3px;flex-wrap:wrap;} .custom-color .color-preset{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all 0.2s var(--transition);flex-shrink:0;} .custom-color .color-preset:hover{border-color:var(--text-dim);transform:scale(1.2);} .custom-color .color-preset.active{border-color:var(--accent);} /* Inspector Row Slider */ .insp-row .custom-slider{flex:1;min-width:0;} .insp-row .custom-slider .slider-wrap{height:18px;} .insp-row .custom-slider .slider-track-left,.insp-row .custom-slider .slider-track-right{height:2px;} .insp-row .custom-slider .slider-thumb{width:4px;height:14px;} .insp-row .custom-slider .slider-val{width:28px;font-size:9px;} /* Lighting Modal Sliders */ .lighting-row{display:flex;align-items:center;padding:5px 12px;gap:8px;font-size:11px;} .lighting-row label{width:55px;flex-shrink:0;color:var(--text-dim);font-size:10.5px;letter-spacing:0.3px;} .lighting-row .custom-slider{flex:1;min-width:0;} .lighting-row .custom-slider .slider-val{width:32px;font-size:10px;} .lighting-row .value-display{width:32px;font-size:10px;color:var(--text-dim);font-family:var(--font-mono);text-align:right;flex-shrink:0;} /* Viewport Toolbar Slider Wrapper */ .vt-slider-wrap{display:inline-flex;align-items:center;width:70px;flex-shrink:0;} .vt-slider-wrap .custom-slider .slider-wrap{height:16px;} .vt-slider-wrap .custom-slider .slider-track-left,.vt-slider-wrap .custom-slider .slider-track-right{height:2px;} .vt-slider-wrap .custom-slider .slider-thumb{width:4px;height:12px;} .vt-slider-wrap .custom-slider .slider-val{width:24px;font-size:9px;} /* Hide native range and color inputs */ input[type="range"].native-hidden{display:none;} input[type="color"].native-hidden{display:none;} /* Scrollbar */ ::-webkit-scrollbar{width:5px;height:5px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px;} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.18);} /* Font Awesome icon fixes */ .fa-sidebar::before{content:"\f0c9";} .fa-sidebar-flip::before{content:"\f0c9";display:inline-block;transform:scaleX(-1);} @keyframes fadeInUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}} @keyframes fadeIn{from{opacity:0;}to{opacity:1;}} .tex-item{animation:fadeInUp 0.4s var(--transition-spring) both;} .tex-item:nth-child(1){animation-delay:0.02s;} .tex-item:nth-child(2){animation-delay:0.05s;} .tex-item:nth-child(3){animation-delay:0.08s;} .tex-item:nth-child(4){animation-delay:0.11s;} .tex-item:nth-child(5){animation-delay:0.14s;} .tex-item.selected{} .tree-node{animation:listItemIn 0.3s var(--transition-spring) both;} .tree-node:nth-child(1){animation-delay:0.02s;} .tree-node:nth-child(2){animation-delay:0.04s;} .tree-node:nth-child(3){animation-delay:0.06s;} .tree-node:nth-child(4){animation-delay:0.08s;} .tree-node:nth-child(5){animation-delay:0.10s;} @keyframes listItemIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}} .vt-btn{transition:all 0.2s var(--transition);} .vt-btn:active{transform:scale(0.93);} .vt-btn.export-btn:active,.vt-btn.run-btn:active{transform:scale(0.95);} .insp-group-title i{transition:transform 0.35s var(--transition-spring);} .insp-row input,.insp-row select{transition:all 0.2s var(--transition);} .insp-row input:focus,.insp-row select:focus{transform:translateY(-1px);} .btn-primary{transition:all 0.2s var(--transition);position:relative;overflow:hidden;} .btn-primary::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.2);transform:translate(-50%,-50%);transition:width 0.5s,height 0.5s;} .btn-primary:active::after{width:220px;height:220px;} .btn-primary:active{transform:scale(0.96);} .dd-item{animation:ddItemIn 0.2s var(--transition-spring) both;} .dd-item:nth-child(1){animation-delay:0.01s;} .dd-item:nth-child(2){animation-delay:0.02s;} .dd-item:nth-child(3){animation-delay:0.03s;} .dd-item:nth-child(4){animation-delay:0.04s;} .dd-item:nth-child(5){animation-delay:0.05s;} .dd-item:nth-child(6){animation-delay:0.06s;} .dd-item:nth-child(7){animation-delay:0.07s;} .dd-item:nth-child(8){animation-delay:0.08s;} @keyframes ddItemIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}} .nodrag *,.nodrag{-webkit-user-drag:none;user-drag:none;} canvas{-webkit-user-drag:none;user-drag:none;} .insp-row input[type="range"]{transition:all 0.2s var(--transition);} .insp-row input[type="range"]:hover{filter:brightness(1.4);} .node-icon-light{transition:box-shadow 0.5s ease;} .tree-node.selected .node-icon-light{box-shadow:0 0 0 2px var(--accent);} .tex-import-btn{transition:all 0.3s var(--transition-spring);} .tex-import-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(90,160,240,0.25);} .tex-import-btn:active{transform:scale(0.95);} /* Loading Screen - Three.js Particle Canvas */ #loading-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 0.8s ease;pointer-events:all;} #loading-screen.fade-out{opacity:0;pointer-events:none;} #loading-screen.hidden{display:none;} #loading-screen canvas{display:block;position:fixed;top:0;left:0;width:100%;height:100%;} #loading-screen .load-credits{position:absolute;bottom:60px;color:rgba(255,255,255,0.35);font-size:12px;font-family:var(--font-sans);letter-spacing:0.5px;height:20px;overflow:hidden;z-index:1;} #loading-screen .load-credits .credits-line{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;opacity:0;animation:creditsSwap 2.4s ease-in-out infinite;} #loading-screen .load-credits .credits-line-1{animation-delay:0s;} #loading-screen .load-credits .credits-line-2{animation-delay:1.2s;} @keyframes creditsSwap{0%,18%{opacity:1;transform:translateX(-50%) translateY(0);}33%,100%{opacity:0;transform:translateX(-50%) translateY(8px);}} /* Mobile Layout */ @media (max-width:768px){ #left-panel{position:absolute;left:0;top:0;bottom:0;z-index:60;width:85vw;max-width:320px;transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.25,0.1,0.25,1);} #left-panel.collapsed{width:85vw;max-width:320px;opacity:1;border-right:1px solid var(--border);} #left-panel.mobile-show{transform:translateX(0);} #right-panel{position:absolute;right:0;top:0;bottom:0;z-index:60;width:85vw;max-width:320px;transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.25,0.1,0.25,1);} #right-panel.mobile-show{transform:translateX(0);} .panel-divider{display:none;} #canvas-container{flex:1;min-height:40vh;} #menubar{height:28px;padding:0 3px;gap:1px;} #menubar .menu-item{padding:2px 7px;font-size:10.5px;} #menubar .menu-item span{display:none;} #menubar .logo{font-size:10.5px;margin-right:3px;padding:2px 4px;} #viewport-toolbar{flex-wrap:wrap;height:auto;min-height:32px;padding:3px 4px;gap:2px;} #viewport-toolbar .vt-btn{padding:3px 7px;font-size:10px;} #viewport-toolbar .vt-label{display:none;} #viewport-toolbar .vt-slider{width:36px;} #bottom-panel{height:90px;} #statusbar{font-size:9px;height:20px;padding:0 6px;gap:6px;} #toast{top:10px;bottom:auto;font-size:11px;padding:7px 16px;border-radius:var(--radius-xl);} .joystick{width:120px;height:120px;opacity:0.7;bottom:25px;border-width:1.5px;} .joystick-knob{width:48px;height:48px;} .joystick::after{width:24px;height:24px;} #joystick-left{left:12px;}#joystick-right{right:12px;} } /* GLB Model Icon */ .node-icon-glb{background:linear-gradient(135deg,#4dc9c0,#2a8a82);border-radius:3px;width:12px;height:12px;box-shadow:inset -2px -2px 0 rgba(0,0,0,0.3);} .node-icon-glb::after{content:'GLB';font-size:6px;color:rgba(255,255,255,0.8);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:700;} /* Physics Panel */ /* Quick Action Buttons in Inspector */ .quick-actions-row{display:flex;flex-wrap:wrap;gap:5px;padding:4px 14px 8px;} .quick-act-btn{flex:1;min-width:60px;padding:5px 8px;font-size:10px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;background:var(--bg-input);color:var(--text);transition:all 0.12s ease;font-weight:500;letter-spacing:0.2px;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;} .quick-act-btn:hover{background:var(--bg-hover);color:var(--text-bright);border-color:var(--border-light);} .quick-act-btn:active{transform:scale(0.95);} .quick-act-btn.active{background:var(--bg-active);border-color:var(--accent);color:var(--accent-glow);} .quick-act-btn i{font-size:10px;opacity:0.7;} .quick-act-btn:hover i{opacity:1;} .insp-group .physics-toggle{display:flex;align-items:center;gap:7px;padding:5px 14px;} .insp-group .physics-toggle input[type="checkbox"]{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);} .insp-group .physics-toggle label{color:var(--text);font-size:11px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;user-select:none;position:relative;} .insp-group .physics-toggle label::before{content:'';width:34px;height:20px;border-radius:10px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);transition:all 0.25s ease;flex-shrink:0;} .insp-group .physics-toggle label::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,0.3);left:3px;transition:all 0.25s ease;} .insp-group .physics-toggle input:checked+label::before{background:rgba(90,160,240,0.25);border-color:rgba(90,160,240,0.4);} .insp-group .physics-toggle input:checked+label::after{background:var(--accent);left:23px;} /* Custom Checkbox - inline */ .insp-row input[type="checkbox"]{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);} .insp-row .custom-check{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:10px;color:var(--text-dim);user-select:none;transition:color 0.2s ease;} .insp-row .custom-check::before{content:'';width:16px;height:16px;border-radius:3px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);transition:all 0.2s ease;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Font Awesome 6 Free';font-weight:900;font-size:9px;color:transparent;pointer-events:none;} .insp-row .custom-check.checked{color:var(--text-bright);} .insp-row .custom-check.checked::before{background:rgba(90,160,240,0.2);border-color:rgba(90,160,240,0.4);color:var(--accent-glow);content:'\f00c';} /* Menu Search Bar */ #menu-search-btn{padding:4px 8px;font-size:12px;color:var(--text-dim);cursor:pointer;border-radius:var(--radius-sm);transition:all 0.2s var(--transition);display:flex;align-items:center;gap:5px;height:26px;line-height:26px;background:transparent;border:none;} #menu-search-btn:hover{background:var(--bg-hover);color:var(--text-bright);} #menu-search-overlay{display:flex;visibility:hidden;opacity:0;pointer-events:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);align-items:flex-start;justify-content:center;padding-top:60px;} #menu-search-overlay.show{visibility:visible;opacity:1;pointer-events:auto;} #menu-search-box{width:480px;max-width:90vw;background:var(--bg-panel);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 40px rgba(0,0,0,0.5);overflow:hidden;animation:modalIn 0.2s cubic-bezier(0.16,1,0.3,1);} #menu-search-input-wrap{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);gap:8px;} #menu-search-input-wrap i{color:var(--accent);font-size:14px;opacity:0.7;} #menu-search-input{flex:1;background:transparent;border:none;color:var(--text-bright);font-size:13px;outline:none;font-family:var(--font-sans);} #menu-search-results{max-height:360px;overflow-y:auto;padding:5px;} #menu-search-results .search-result{padding:7px 12px;font-size:12px;cursor:pointer;color:var(--text);transition:all 0.12s ease;display:flex;align-items:center;gap:9px;white-space:nowrap;border-radius:var(--radius-sm);} #menu-search-results .search-result:hover,#menu-search-results .search-result.active{background:var(--bg-active);color:#fff;} #menu-search-results .search-result .sr-menu{font-size:9.5px;color:var(--text-dim);margin-left:auto;background:rgba(255,255,255,0.04);padding:2px 6px;border-radius:3px;} #menu-search-results .search-result.highlight{background:rgba(90,160,240,0.15);color:var(--accent-glow);} #menu-search-results .search-result.highlight .sr-menu{color:var(--accent);} #menu-search-results .search-empty{padding:24px;text-align:center;color:var(--text-dim);font-size:12px;} /* Inspector Search Bar */ #inspector-search-wrap{display:flex;align-items:center;padding:6px 10px;gap:6px;border-bottom:1px solid var(--border);margin-bottom:4px;background:var(--bg-panel-alt);} #inspector-search-wrap i{color:var(--text-dim);font-size:11px;} #inspector-search-input{flex:1;background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);padding:4px 8px;border-radius:var(--radius-sm);font-size:10.5px;outline:none;font-family:var(--font-sans);} #inspector-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(90,160,240,0.12);} .insp-group.filtered{display:none;} .insp-row.filtered{display:none;} /* Favorite Properties */ .insp-fav-btn{width:18px;height:18px;border-radius:3px;border:none;cursor:pointer;font-size:9px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--text-dim);transition:all 0.15s ease;padding:0;flex-shrink:0;margin-left:auto;opacity:0;} .insp-row:hover .insp-fav-btn{opacity:1;} .insp-fav-btn:hover{color:var(--yellow);transform:scale(1.2);} .insp-fav-btn.favorited{color:var(--yellow);opacity:1;} /* Context Menu for Inspector */ #inspector-context-menu{display:flex;visibility:hidden;opacity:0;pointer-events:none;position:fixed;min-width:170px;background:var(--bg-panel);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,0.5);z-index:9999;padding:5px;flex-direction:column;} #inspector-context-menu.show{visibility:visible;opacity:1;pointer-events:auto;animation:dropdownIn 0.15s cubic-bezier(0.16,1,0.3,1) both;} #inspector-context-menu .ctx-item{padding:6px 12px;font-size:11.5px;color:var(--text);cursor:pointer;transition:all 0.12s ease;display:flex;align-items:center;gap:8px;white-space:nowrap;border-radius:var(--radius-sm);} #inspector-context-menu .ctx-item:hover{background:var(--bg-active);color:#fff;} #inspector-context-menu .ctx-sep{height:1px;background:var(--border);margin:4px 6px;} /* Popup Menu Search */ .dd-search-wrap{display:flex;align-items:center;padding:4px 8px;gap:4px;border-bottom:1px solid var(--border);} .dd-search-wrap i{color:var(--text-dim);font-size:10px;} .dd-search-input{flex:1;background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);padding:3px 6px;border-radius:var(--radius-sm);font-size:10px;outline:none;font-family:var(--font-sans);} .dd-search-input:focus{border-color:var(--accent);} .dd-item.menu-search-hidden{display:none;} /* Material Presets - 可折叠预设面板 */ .mat-preset-row{display:flex;flex-wrap:wrap;gap:4px;padding:4px 14px 8px;transform:translateZ(0);} .mat-preset-btn{padding:3px 10px;font-size:10px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;background:var(--bg-input);color:var(--text);transition:all 0.12s ease;white-space:nowrap;} .mat-preset-btn:hover{background:var(--bg-hover);color:var(--text-bright);border-color:var(--border-light);} .mat-preset-btn:active{transform:scale(0.95);} /* Gradient Editor Modal */ .gradient-editor{padding:8px 0;} .gradient-preview{width:100%;height:40px;border-radius:var(--radius-sm);border:1px solid var(--border);margin-bottom:8px;position:relative;overflow:hidden;} .gradient-stops{display:flex;align-items:flex-end;height:30px;padding:0 8px;position:relative;margin-bottom:8px;} .gradient-stop{width:14px;height:14px;border-radius:50%;border:3px solid #fff;cursor:pointer;position:absolute;bottom:0;transform:translateX(-50%);box-shadow:0 0 6px rgba(0,0,0,0.5);transition:transform 0.15s ease;z-index:2;} .gradient-stop:hover{transform:translateX(-50%) scale(1.2);} .gradient-stop.active{border-color:var(--accent);} .gradient-stop-delete{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--red);cursor:pointer;opacity:0;transition:opacity 0.15s;} .gradient-stop:hover .gradient-stop-delete{opacity:1;} /* Export Settings Dialog */ .export-settings-row{display:flex;align-items:center;padding:7px 14px;gap:10px;font-size:11px;} .export-settings-row label{width:80px;flex-shrink:0;color:var(--text-dim);font-size:10.5px;} .export-settings-row select{flex:1;background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);padding:5px 8px;border-radius:var(--radius-sm);font-size:10.5px;outline:none;cursor:pointer;} .export-settings-row select:focus{border-color:var(--accent);} .export-settings-row input[type="checkbox"]{margin:0;} /* Loading Progress Bar */ .loading-progress-bar{width:100%;height:4px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;margin-top:4px;} .loading-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-glow));border-radius:2px;transition:width 0.3s ease;width:0%;} /* Fullscreen Button */ .fullscreen-btn{position:fixed;bottom:10px;right:10px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);background:rgba(0,0,0,0.5);color:#fff;cursor:pointer;z-index:9998;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all 0.2s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);} .fullscreen-btn:hover{background:rgba(90,160,240,0.3);border-color:var(--accent);} /* Focus Mode */ #main-layout.focus-mode #left-panel{width:0!important;min-width:0!important;flex-shrink:1!important;border-right:none!important;opacity:0!important;pointer-events:none!important;transition:none!important;} #main-layout.focus-mode #right-panel{width:0!important;min-width:0!important;flex-shrink:1!important;border-left:none!important;opacity:0!important;pointer-events:none!important;transition:none!important;} #main-layout.focus-mode .panel-divider{display:none!important;} #main-layout.focus-mode #bottom-panel{height:0!important;min-height:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;transition:none!important;} #main-layout.focus-mode #editor-area{flex:1!important;display:flex!important;flex-direction:column!important;} #main-layout.focus-mode #canvas-container{flex:1!important;min-height:0!important;border-radius:0!important;} #main-layout.focus-mode #viewport-toolbar{background:rgba(18,18,26,0.45);height:28px;padding:2px 6px;gap:2px;opacity:0.55;transition:opacity 0.3s;} #main-layout.focus-mode #viewport-toolbar:hover{opacity:1;} #main-layout.focus-mode #sculpt-panel{display:none!important;} #main-layout.focus-mode #code-editor-container{display:none!important;} #main-layout.focus-mode #canvas-container>canvas{width:100%!important;height:100%!important;} #focus-exit-btn{position:absolute;top:12px;right:16px;z-index:60;padding:9px 22px;border-radius:24px;border:1px solid var(--border);background:var(--bg-panel);backdrop-filter:var(--blur-panel);-webkit-backdrop-filter:var(--blur-panel);color:var(--text-bright);font-size:13px;cursor:pointer;transition:all 0.3s var(--transition-spring);display:none;font-weight:600;letter-spacing:0.5px;} #focus-exit-btn:hover{background:var(--bg-hover);border-color:var(--border-light);color:#fff;transform:scale(1.04);} #focus-exit-btn.show{display:flex;align-items:center;gap:8px;animation:fadeInUp 0.3s var(--transition-spring) both;} #focus-exit-btn i{font-size:12px;} /* === 专注模式悬浮窗 === */ .focus-floating-panel{position:fixed;bottom:20px;right:20px;width:240px;min-width:180px;max-width:400px;min-height:120px;max-height:500px;background:rgba(16,16,26,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.12);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.05) inset;z-index:9999;display:none;flex-direction:column;overflow:hidden;transition:opacity 0.25s ease;user-select:none;} .focus-floating-panel.show{display:flex;animation:ffpFadeIn 0.35s cubic-bezier(0.175,0.885,0.32,1.275) both;} @keyframes ffpFadeIn{from{opacity:0;transform:translateY(16px) scale(0.92);}to{opacity:1;transform:translateY(0) scale(1);}} .focus-floating-panel.collapsed .ffp-body{display:none;} .focus-floating-panel.collapsed{min-height:auto;max-height:none;height:auto;} .ffp-drag-handle{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:move;background:rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.06);font-size:11px;color:rgba(255,255,255,0.7);font-weight:600;letter-spacing:0.5px;flex-shrink:0;} .ffp-drag-handle i{font-size:10px;color:rgba(255,255,255,0.35);} .ffp-collapse-btn{width:20px;height:20px;border-radius:4px;border:none;background:transparent;color:rgba(255,255,255,0.4);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;margin-left:auto;transition:all 0.2s;} .ffp-collapse-btn:hover{background:rgba(255,255,255,0.1);color:#fff;} .ffp-body{padding:8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;} .ffp-row{display:flex;align-items:center;gap:6px;} .ffp-transform-row{justify-content:center;gap:4px;} .ffp-speed-row{gap:6px;} .ffp-actions-row{justify-content:center;gap:4px;flex-wrap:wrap;} .ffp-btn{width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.55);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;} .ffp-btn:hover{background:rgba(255,255,255,0.12);color:#fff;border-color:rgba(255,255,255,0.2);} .ffp-btn.active{background:var(--bg-active);border-color:var(--border-light);color:var(--text-bright);} .ffp-mode-btn{width:38px;height:34px;border-radius:10px;font-size:14px;} .ffp-label{font-size:10px;color:rgba(255,255,255,0.45);width:28px;flex-shrink:0;text-align:right;font-weight:500;} .ffp-slider-wrap{flex:1;min-width:60px;} .ffp-slider-wrap .custom-slider{display:flex;align-items:center;gap:6px;width:100%;} .ffp-slider-wrap .custom-slider .slider-wrap{height:16px;} .ffp-slider-wrap .custom-slider .slider-track-left,.ffp-slider-wrap .custom-slider .slider-track-right{height:2px;} .ffp-slider-wrap .custom-slider .slider-thumb{width:4px;height:12px;} .ffp-slider-wrap .custom-slider .slider-val{font-size:10px;color:rgba(255,255,255,0.5);min-width:24px;text-align:right;font-variant-numeric:tabular-nums;} .ffp-resize-handle{width:16px;height:16px;position:absolute;bottom:2px;right:2px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 60%,transparent 60%,transparent 70%,rgba(255,255,255,0.15) 70%,rgba(255,255,255,0.15) 80%,transparent 80%);border-radius:0 0 4px 0;} /* LOD Badge */ .lod-badge{display:inline-block;padding:1px 5px;border-radius:3px;font-size:8px;font-weight:700;margin-left:4px;background:rgba(164,136,224,0.15);color:var(--purple);} /* ========== V4.0 主题切换系统 ========== */ body.theme-light { --bg-base: #f0f0f5; --bg-panel: rgba(255,255,255,0.85); --bg-panel-alt: rgba(250,250,255,0.92); --bg-input: rgba(240,240,248,0.8); --bg-hover: rgba(230,230,240,0.7); --bg-active: rgba(90,160,240,0.15); --border: rgba(0,0,0,0.08); --border-light: rgba(0,0,0,0.12); --text: #555566; --text-dim: #999aaa; --text-bright: #222233; --accent: #4a8cf0; --accent-glow: #5b9cf5; --accent-dim: rgba(74,140,240,0.12); --shadow-panel: 0 1px 3px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.06),0 0 0 1px rgba(0,0,0,0.03) inset; --shadow-drop: 0 4px 16px rgba(0,0,0,0.1),0 12px 32px rgba(0,0,0,0.08); --shadow-glow: 0 0 16px rgba(74,140,240,0.1),0 0 40px rgba(74,140,240,0.04); --shadow-button: 0 1px 2px rgba(0,0,0,0.08),0 2px 6px rgba(0,0,0,0.05); } body.theme-light #canvas-container{background-image:radial-gradient(circle,rgba(0,0,0,0.05) 1px,transparent 1px),radial-gradient(circle,rgba(0,0,0,0.03) 1px,transparent 1px);} body.theme-light #output-log{background:#f5f5f8;} body.theme-light #code-textarea{background:#f5f5f8;color:#333;} body.theme-light #game-preview-window{background:#f0f0f5;} body.theme-light #game-preview-bar{background:linear-gradient(180deg,rgba(240,240,248,0.95),rgba(235,235,245,0.95));} body.theme-light #game-preview-canvas{background:#f0f0f5;} body.theme-light #game-preview-window.game-mode{background:#e8e8f0 !important;} body.theme-light #game-preview-window.game-mode #game-preview-canvas{background:#e8e8f0 !important;} body.theme-light #loading-screen{background:radial-gradient(ellipse at center,#e8e8f0 0%,#e0e0ea 55%,#d8d8e2 100%);} body.theme-light .hex-brick{background:#cccccc;} @keyframes fadeHexLight{0%{background:#cccccc;}50%{background:#e0e0e0;}100%{background:#bbbbbb;}} body.theme-light .r1>.hex-brick{animation-name:fadeHexLight;} body.theme-light .r2>.hex-brick{animation-name:fadeHexLight;} body.theme-light .r3>.hex-brick{animation-name:fadeHexLight;} body.theme-light #modal-overlay{background:rgba(0,0,0,0.35);} body.theme-light #menu-search-overlay{background:rgba(0,0,0,0.3);} body.theme-light #rotate-overlay{background:#e8e8f0;} /* ========== V4.0 微交互增强 ========== */ .vt-btn{position:relative;overflow:hidden;} .vt-btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.15);transform:translate(-50%,-50%);transition:width 0.5s,height 0.5s;pointer-events:none;} .vt-btn:active::after{width:180px;height:180px;} body.theme-light .vt-btn::after{background:rgba(0,0,0,0.08);} .menu-item{position:relative;} .menu-item::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--accent);transform:translateX(-50%);transition:width 0.3s var(--transition-spring);border-radius:1px;pointer-events:none;} .menu-item:hover::after{width:70%;} .panel-tab{position:relative;overflow:hidden;} .panel-tab::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--accent);transform:translateX(-50%);transition:width 0.35s var(--transition-spring);border-radius:1px;} .panel-tab.active::after{width:80%;} .bp-tab{position:relative;overflow:hidden;} .bp-tab::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--accent);transform:translateX(-50%);transition:width 0.35s var(--transition-spring);border-radius:1px;} .bp-tab.active::after{width:70%;} /* Panel collapse/expand smooth transitions */ #left-panel,#right-panel{transition:width 0.4s cubic-bezier(0.25,0.1,0.25,1),min-width 0.4s cubic-bezier(0.25,0.1,0.25,1),opacity 0.3s ease,border-width 0.4s ease;} #bottom-panel{transition:height 0.4s cubic-bezier(0.25,0.1,0.25,1);} #bottom-panel .bp-toggle i{transition:transform 0.4s var(--transition-spring);} #bottom-panel.collapsed .bp-toggle i{transform:rotate(180deg);} /* Tree node hover glow */ #scene-tree .tree-node{transition:all 0.2s ease,transform 0.2s var(--transition-spring);} #scene-tree .tree-node:active{transform:scale(0.98);} /* Inspector row slide-in */ .insp-row{animation:inspRowIn 0.3s var(--transition-spring) both;} @keyframes inspRowIn{from{opacity:0;transform:translateX(6px);}to{opacity:1;transform:translateX(0);}} /* Toast enhanced */ #toast i{margin-right:4px;font-size:13px;} /* Status bar pulse */ /* Focus mode transition - 使用 transition:none 确保即时切换无动画抖动 */ /* 专注模式由上方 #main-layout.focus-mode 规则统一控制 transition:none */ /* 下方规则已移除，避免与上方 transition:none!important 冲突 */ /* Theme toggle button */ #theme-toggle-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--bg-input);color:var(--text-dim);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all 0.3s var(--transition-spring);margin:0 4px;flex-shrink:0;} #theme-toggle-btn:hover{background:var(--bg-hover);color:var(--text-bright);border-color:var(--border-light);} #theme-toggle-btn:active{transform:rotate(30deg) scale(0.9);} /* Sculpt panel enhanced */ #sculpt-panel{transition:all 0.4s cubic-bezier(0.25,0.1,0.25,1);} #sculpt-panel.hidden{height:0;padding-top:0;padding-bottom:0;border-bottom:none;opacity:0;margin:0;} /* Loading screen exit enhanced */ #loading-screen{transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1),visibility 0.6s;} /* Drag ghost */ .drag-ghost{position:fixed;pointer-events:none;z-index:9999;opacity:0.8;transform:translate(-50%,-50%);background:var(--bg-panel);border:1px solid var(--accent);border-radius:var(--radius);padding:4px 10px;font-size:11px;color:var(--accent-glow);box-shadow:0 4px 16px rgba(0,0,0,0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;} /* ========== V4.3.27 性能优化 ========== */ /* prefers-reduced-motion: 尊重用户系统偏好 */ @media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;} #toast{transition:none !important;} #left-panel,#right-panel,#bottom-panel{transition:none !important;} .mat-preset-row{transition:none !important;} .insp-group-title i{transition:none !important;} } /* 减少非视口区域的backdrop-filter开销 */ @media (max-width: 1024px) { #left-panel,#right-panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,18,26,0.95);} } /* ============================================================ V5.0 ENHANCEMENTS — 简约高级 UI 质感提升 ============================================================ */ /* --- Accordion Panel: 同属性合并展开栏 --- */ .insp-group { margin-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color 0.35s ease; } .insp-group:hover { border-bottom-color: var(--border); } .insp-group-title { position: relative; padding: 10px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; gap: 8px; text-transform: uppercase; transition: all 0.3s ease; user-select: none; border-radius: 0; background: transparent; } .insp-group-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 0; background: var(--accent); border-radius: 0 2px 2px 0; transition: height 0.3s cubic-bezier(0.22,0.61,0.36,1); } .insp-group-title:hover { color: var(--text-bright); background: rgba(255,255,255,0.02); } .insp-group-title:hover::before { height: 60%; } .insp-group-title i { font-size: 9px; transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1); color: var(--text-dim); } .insp-group-title i.collapsed { transform: rotate(-90deg); } .insp-group-title .group-badge { margin-left: auto; font-size: 9px; padding: 2px 6px; border-radius: 4px; background: var(--bg-input); color: var(--text-dim); font-weight: 500; letter-spacing: 0.3px; } .insp-group-body { overflow: hidden; transition: max-height 0.4s cubic-bezier(0.25,0.1,0.25,1), opacity 0.3s ease; max-height: 2000px; opacity: 1; } .insp-group-body.collapsed { max-height: 0; opacity: 0; } /* --- Toolbar: 高级功能扩展栏 --- */ #viewport-toolbar { display: flex; align-items: center; gap: 2px; padding: 5px 8px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } #viewport-toolbar::-webkit-scrollbar { display: none; } .toolbar-primary { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .toolbar-advanced { display: flex; align-items: center; gap: 2px; flex-shrink: 0; overflow: hidden; max-width: 0; opacity: 0; transition: max-width 0.45s cubic-bezier(0.25,0.1,0.25,1), opacity 0.35s ease, margin 0.45s ease; margin-left: 0; } .toolbar-advanced.expanded { max-width: 800px; opacity: 1; margin-left: 4px; } .toolbar-more-btn { padding: 5px 10px; font-size: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; background: var(--bg-input); color: var(--text-dim); transition: all 0.15s ease; font-weight: 500; display: flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; letter-spacing: 0.2px; } .toolbar-more-btn:hover { background: var(--bg-hover); color: var(--text-bright); border-color: var(--border-light); } .toolbar-more-btn.expanded { background: var(--bg-active); border-color: var(--border-light); color: var(--text-bright); } .toolbar-more-btn i { font-size: 8px; transition: transform 0.3s ease; } .toolbar-more-btn.expanded i { transform: rotate(180deg); } /* --- Premium UI: 微妙质感提升 --- */ /* 面板内边距优化 */ .panel-content { padding: 4px 0; } /* 按钮悬停微提升 */ .vt-btn, .quick-act-btn, .tex-import-btn { transition: all 0.15s ease; } /* 场景树 hover 指示器 */ .tree-node { position: relative; transition: all 0.2s ease; } .tree-node::after { content: ''; position: absolute; right: 8px; top: 50%; transform: translateY(-50%) scale(0); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); } .tree-node:hover::after { transform: translateY(-50%) scale(1); } .tree-node.selected::after { transform: translateY(-50%) scale(1); background: var(--accent); } /* --- 状态栏精简 --- */ #statusbar { height: 24px; padding: 0 12px; font-size: 10px; gap: 14px; letter-spacing: 0.3px; } /* --- 底部面板增强 --- */ #bottom-panel .bp-tab { padding: 4px 12px; font-size: 10.5px; letter-spacing: 0.4px; transition: all 0.2s ease; } /* --- Toast 消息优化 --- */ #toast { font-size: 12px; padding: 9px 20px; border-radius: 20px; letter-spacing: 0.2px; backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); } /* --- 模态框优化 --- */ #modal-box { padding: 24px; border-radius: 14px; } #modal-box h3 { font-size: 14px; letter-spacing: 0.3px; margin-bottom: 16px; font-weight: 600; } /* --- 右键菜单优化 --- */ .ctx-item { padding: 7px 16px; font-size: 11.5px; transition: all 0.12s ease; border-radius: 0; } /* --- 贴图项优化 --- */ .tex-item { padding: 6px 10px; border-radius: 6px; transition: all 0.2s ease; margin-bottom: 1px; } .tex-item:hover { background: var(--bg-hover); transform: translateX(2px); } /* --- 操作系统级暗色主题变量增强 --- */ @media (prefers-color-scheme: dark) { :root { --bg-base: #0f0f14; } } /* --- 亮色主题增强 --- */ body.theme-light { --bg-base: #f0f0f5; --bg-panel: rgba(255,255,255,0.88); --bg-panel-alt: rgba(250,250,255,0.92); --bg-input: rgba(240,240,248,0.8); --bg-hover: rgba(230,230,240,0.8); --bg-active: rgba(90,160,240,0.12); --text: #555566; --text-dim: #9999aa; --text-bright: #1a1a2e; --border: rgba(0,0,0,0.06); --border-light: rgba(0,0,0,0.10); --shadow-panel: 0 1px 3px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.06); --shadow-drop: 0 4px 12px rgba(0,0,0,0.12),0 12px 36px rgba(0,0,0,0.08); --shadow-glow: 0 0 16px rgba(90,160,240,0.12); } /* --- 专注模式悬浮面板增强 --- */ .focus-floating-panel { position: fixed; bottom: 80px; right: 20px; z-index: 9999; background: var(--bg-panel); backdrop-filter: var(--blur-panel); -webkit-backdrop-filter: var(--blur-panel); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-drop); min-width: 200px; overflow: hidden; transform: translateY(20px); opacity: 0; pointer-events: none; transition: all 0.35s cubic-bezier(0.22,0.61,0.36,1); } .focus-floating-panel.show { transform: translateY(0); opacity: 1; pointer-events: auto; } .ffp-drag-handle { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 10px; color: var(--text-dim); cursor: grab; border-bottom: 1px solid var(--border); user-select: none; } .ffp-drag-handle:active { cursor: grabbing; } .ffp-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; } .ffp-row { display: flex; align-items: center; gap: 4px; } .ffp-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-dim); cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .ffp-btn:hover { background: var(--bg-hover); color: var(--text-bright); border-color: var(--accent-dim); } .ffp-btn.active { background: var(--bg-active); border-color: var(--accent); color: var(--accent-glow); } .ffp-label { font-size: 9px; color: var(--text-dim); width: 28px; flex-shrink: 0; } .ffp-slider-wrap { flex: 1; min-width: 60px; } .ffp-collapse-btn { margin-left: auto; width: 24px; height: 24px; border-radius: 4px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .ffp-collapse-btn:hover { background: var(--bg-hover); color: var(--text-bright); } .ffp-resize-handle { position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--border) 50%, transparent 75%); } /* ============ 运行加载动画 ============ */ #run-loading-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-base); z-index: 99998; display: none; flex-direction: column; align-items: center; justify-content: center; pointer-events: all; transition: opacity 0.5s ease; } #run-loading-screen.show { display: flex; opacity: 1; } #run-loading-screen.fade-out { opacity: 0; pointer-events: none; } #run-loading-screen.hidden { display: none; } #run-loading-screen .run-bg-container { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; } #run-loading-screen .run-bg-inner { width: 100%; height: 100%; background-image: url('IMG_20260727_020313_edit_25414.jpg'); background-size: 100% 100%; background-repeat: no-repeat; background-color: var(--bg-fallback, #0a0f16); opacity: 0; animation: runBgEntrance 1.2s ease-out forwards; will-change: transform, opacity; } @keyframes runBgEntrance { from { transform: rotate(270deg) scale(1.04); opacity: 0; } to { transform: rotate(270deg) scale(1); opacity: 1; } } #run-loading-screen .run-vignette { position: fixed; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0.4) 100%); pointer-events: none; } #run-loading-screen .run-loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } #run-loading-screen .run-loader-icon { position: relative; width: 80px; height: 80px; margin-bottom: 48px; } #run-loading-screen .run-loader-icon canvas { display: block; width: 100%; height: 100%; } #run-loading-screen .run-progress-section { display: flex; flex-direction: column; align-items: center; gap: 14px; } #run-loading-screen .run-progress-track { position: relative; width: min(320px, 58vw); height: 4px; background: var(--progress-track, rgba(255,255,255,0.12)); border-radius: 10px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); } #run-loading-screen .run-progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #6a9ec0 0%, #8ab8d8 15%, #a5cee8 40%, #b8daf2 60%, #a5cee8 85%, #7eb0ce 100%); border-radius: 10px; transition: width 0.08s linear; } #run-loading-screen .run-progress-fill::after { content: ''; position: absolute; top: 0; left: -60%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%); border-radius: 10px; animation: runShimmer 2s ease-in-out infinite; } @keyframes runShimmer { 0% { left: -60%; } 100% { left: 110%; } } #run-loading-screen .run-progress-head { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: #c8e2f8; border-radius: 50%; transition: left 0.08s linear; z-index: 3; } #run-loading-screen .run-percentage { font-size: 0.85rem; letter-spacing: 0.06em; color: #ffffff; font-weight: 500; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'JetBrains Mono', 'Consolas', 'Menlo', 'Courier New', monospace; min-width: 3.2em; text-align: center; } #run-loading-screen .run-label { font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: #ffffff; font-weight: 400; } @media (max-width: 600px) { #run-loading-screen .run-loader-icon { width: 60px; height: 60px; margin-bottom: 36px; } #run-loading-screen .run-progress-track { width: min(240px, 65vw); height: 3.5px; } #run-loading-screen .run-progress-head { width: 6px; height: 6px; } #run-loading-screen .run-label { font-size: 0.7rem; } #run-loading-screen .run-percentage { font-size: 0.75rem; } #run-loading-screen .run-progress-section { gap: 10px; } } @media (max-width: 380px) { #run-loading-screen .run-loader-icon { width: 50px; height: 50px; margin-bottom: 28px; } #run-loading-screen .run-progress-track { width: min(180px, 68vw); height: 3px; } }