:root{--bg-window: #1e1f22;--bg-panel: #2b2d30;--bg-sidebar: #1a1b1e;--bg-hover: #3c3f41;--bg-active: #4c5052;--bg-input: #18191c;--text-primary: #dfe1e5;--text-secondary: #b4b8c0;--text-muted: #7c808f;--accent: #4d8af0;--accent-dim: rgba(77, 138, 240, .18);--accent-text: #7ba7f7;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg-window);color:var(--text-primary);font-family:Inter,Segoe UI,system-ui,sans-serif;font-size:13px;overflow:hidden;-webkit-user-select:none;user-select:none;cursor:default}input,textarea{-webkit-user-select:auto;user-select:auto;cursor:text}input[type=range]{cursor:pointer}.app{display:flex;flex-direction:column;height:100vh;width:100vw}.topbar{min-height:56px;flex-shrink:0;background:var(--bg-panel);display:flex;align-items:center;padding:0 16px;gap:12px}.topbar h2{font-size:18px;font-weight:600;color:var(--text-primary);letter-spacing:.02em;white-space:nowrap;display:flex;align-items:center;gap:12px}.topbar-section-right{margin-left:auto;display:flex;align-items:center;gap:16px}.topbar-group{display:flex;align-items:center;gap:4px}.topbar-divider{width:1px;background:var(--bg-hover);height:24px}.topbar button,.topbar .button-label{padding:8px 10px;background:transparent;border:none;color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;transition:background .12s,color .12s;display:flex;align-items:center}.topbar button:hover,.topbar .button-label:hover{background:var(--bg-hover);color:var(--text-primary)}.topbar button.primary{background:var(--accent-dim);color:var(--accent-text)}.topbar button.primary:hover{background:#4d8af047;color:var(--accent-text)}.app-body{display:flex;flex:1;min-height:0;background:var(--bg-panel);padding:0 6px 0 4px;gap:4px}.leftbar{width:44px;min-width:44px;background:var(--bg-panel);display:flex;flex-direction:column;padding:6px 4px;overflow-y:auto;z-index:10;align-items:center}.leftbar-section{display:flex;flex-direction:column;gap:8px;width:100%}.tool-group{display:flex;flex-direction:column;gap:5px;width:100%;padding:2px 0}.tool-group+.tool-group{border-top:1px solid var(--bg-hover);margin-top:4px;padding-top:6px}.leftbar button{padding:4px 3px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer;transition:background .12s,color .12s;width:100%;display:flex;justify-content:center;align-items:center}.leftbar button:hover{background:var(--bg-hover);color:#fff}.leftbar button.active{background:#1a3967;color:#93c5fd}.bottombar{display:flex;align-items:center;background:var(--bg-panel);padding:4px 12px;gap:2px;min-height:36px;flex-shrink:0;z-index:10}.bottombar-section{display:flex;gap:2px;align-items:center}.bottombar-section.right{margin-left:auto}.bottombar button{padding:5px 6px;background:transparent;border:none;color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;font-size:12px;font-family:inherit;transition:background .12s,color .12s;display:flex;align-items:center;gap:5px}.bottombar button.icon-btn{padding:5px 6px}.bottombar button:hover{background:var(--bg-hover);color:var(--text-primary)}.bottombar button.active{background:var(--accent-dim);color:var(--accent-text)}.bottombar button:disabled{opacity:.35;cursor:not-allowed}.lang-select{background:transparent;border:none;color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;font-size:12px;font-family:inherit;padding:5px 8px;transition:background .12s,color .12s;-moz-appearance:none;appearance:none;-webkit-appearance:none;outline:none}.lang-select:hover{background:var(--bg-hover);color:var(--text-primary)}.bottombar-divider{width:1px;background:var(--bg-hover);height:16px;margin:0 4px}.sidebar{width:260px;min-width:260px;background:var(--bg-sidebar);display:flex;flex-direction:column;overflow-y:hidden;border-radius:var(--radius-lg)}.sidebar-content{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:18px}.sidebar h3{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);padding-bottom:6px;margin-bottom:6px;margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px;border-bottom:1px solid var(--bg-hover)}.tool-desc{font-size:11px;color:var(--text-muted);line-height:1.5;margin-bottom:6px}.sidebar section{display:flex;flex-direction:column;gap:10px}.sidebar label{font-size:12px;color:var(--text-secondary);display:flex;flex-direction:column;gap:5px}.sidebar input[type=range]{width:100%;accent-color:var(--accent)}.tool-buttons{display:grid;grid-template-columns:1fr 1fr;gap:3px}.sidebar button{padding:5px 9px;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);cursor:pointer;font-size:12px;font-family:inherit;transition:background .12s,color .12s,border-color .12s;text-align:center}.sidebar button:hover{background:var(--bg-hover);color:var(--text-primary)}.sidebar button.active{background:var(--bg-panel);border-color:var(--bg-hover);color:var(--text-primary)}.sidebar button.primary{background:var(--bg-hover);color:var(--text-primary);width:100%;padding:7px 10px;font-weight:500}.sidebar button.primary:hover{background:var(--bg-active)}.sidebar button.secondary{background:transparent;color:var(--text-secondary);width:100%;padding:5px 9px}.main-area{flex:1;display:flex;min-width:0;gap:4px}.editor-2d{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:var(--bg-sidebar);overflow:hidden;border-radius:var(--radius-lg)}.editor-2d canvas{max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated}.ramp-overlay{overflow:visible}.preview-3d{flex:1;min-width:0;background:#16171a;border-radius:var(--radius-lg);overflow:hidden}.preview-3d canvas{width:100%!important;height:100%!important}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--bg-active)}input[type=number].no-spinners::-webkit-inner-spin-button,input[type=number].no-spinners::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].no-spinners{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}