:root{--bg-window:#1e1f22;--bg-panel:#2b2d30;--bg-sidebar:#1a1b1e;--bg-hover:#3c3f41;--bg-active:#4c5052;--bg-input:#18191c;--text-primary:#f3f4f6;--text-secondary:#d1d5db;--text-muted:#9ca3af;--accent:#4d8af0;--accent-dim:#4d8af02e;--accent-text:#9ec2ff;--radius-sm:4px;--radius-md:6px;--radius-lg:8px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-window);color:var(--text-primary);-webkit-user-select:none;user-select:none;cursor:default;font-family:Inter,Segoe UI,system-ui,sans-serif;font-size:13px;overflow:hidden}input,textarea{-webkit-user-select:auto;user-select:auto;cursor:text}input[type=range],input[type=checkbox],input[type=radio],label{cursor:pointer}.app{flex-direction:column;width:100vw;height:100vh;display:flex}.topbar{background:var(--bg-panel);flex-shrink:0;align-items:center;gap:12px;min-height:56px;padding:0 16px;display:flex}.topbar h1{color:var(--text-primary);letter-spacing:.02em;white-space:nowrap;align-items:center;gap:12px;font-size:18px;font-weight:600;display:flex}.topbar-section-right{align-items:center;gap:16px;margin-left:auto;display:flex}.topbar-group{align-items:center;gap:4px;display:flex}.topbar-divider{background:var(--bg-hover);width:1px;height:24px}.topbar button,.topbar .button-label{color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;background:0 0;border:none;align-items:center;padding:8px 10px;transition:background .12s,color .12s;display:flex}.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{color:var(--accent-text);background:#4d8af047}.app-body{background:var(--bg-panel);flex:1;gap:4px;min-height:0;padding:0 6px 0 4px;display:flex}.leftbar{background:var(--bg-panel);z-index:10;flex-direction:column;align-items:center;width:44px;min-width:44px;padding:6px 4px;display:flex;overflow-y:auto}.leftbar-section{flex-direction:column;gap:8px;width:100%;display:flex}.tool-group{flex-direction:column;gap:5px;width:100%;padding:2px 0;display:flex}.tool-group+.tool-group{border-top:1px solid var(--bg-hover);margin-top:4px;padding-top:6px}.leftbar button{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:100%;padding:4px 3px;transition:background .12s,color .12s;display:flex}.leftbar button:hover{background:var(--bg-hover);color:#fff}.leftbar button.active{color:#93c5fd;background:#1a3967}.bottombar{background:var(--bg-panel);z-index:10;flex-shrink:0;align-items:center;gap:2px;min-height:36px;padding:4px 12px;display:flex}.bottombar-section{align-items:center;gap:2px;display:flex}.bottombar-section.right{margin-left:auto}.bottombar button{color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;background:0 0;border:none;align-items:center;gap:5px;padding:5px 6px;font-family:inherit;font-size:12px;transition:background .12s,color .12s;display:flex}.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{color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;appearance:none;background:0 0;border:none;outline:none;padding:8px 10px;font-family:inherit;font-size:13px;line-height:1;transition:background .12s,color .12s}.lang-select:hover{background:var(--bg-hover);color:var(--text-primary)}.bottombar-divider{background:var(--bg-hover);width:1px;height:16px;margin:0 4px}.sidebar{background:var(--bg-sidebar);border-radius:var(--radius-lg);flex-direction:column;width:260px;min-width:260px;display:flex;overflow-y:hidden}.sidebar-content{flex-direction:column;flex:1;gap:18px;padding:12px;display:flex;overflow-y:auto}.sidebar h3{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);border-bottom:1px solid var(--bg-hover);margin-bottom:6px;margin-left:-8px;margin-right:-8px;padding-bottom:6px;padding-left:8px;padding-right:8px;font-size:10px;font-weight:700}.tool-desc{color:var(--text-muted);margin-bottom:6px;font-size:11px;line-height:1.5}.sidebar section{flex-direction:column;gap:10px;display:flex}.sidebar label{color:var(--text-secondary);flex-direction:column;gap:5px;font-size:12px;display:flex}.sidebar input[type=range]{width:100%;accent-color:var(--accent)}.tool-buttons{grid-template-columns:1fr 1fr;gap:3px;display:grid}.sidebar button{border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;text-align:center;background:0 0;border:1px solid #0000;padding:5px 9px;font-family:inherit;font-size:12px;transition:background .12s,color .12s,border-color .12s}.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{color:var(--text-secondary);background:0 0;width:100%;padding:5px 9px}.main-area{flex:1;gap:4px;min-width:0;display:flex}.editor-2d{background:var(--bg-sidebar);border-radius:var(--radius-lg);flex:1;justify-content:center;align-items:center;padding:24px;display:flex;position:relative;overflow:hidden}.editor-2d canvas{object-fit:contain;width:100%;max-width:100%;height:100%;max-height:100%;image-rendering:pixelated}.ramp-overlay{overflow:visible}.preview-3d{border-radius:var(--radius-lg);background:#16171a;flex:1;min-width:0;overflow:hidden}.preview-3d canvas{width:100%!important;height:100%!important}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-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{-webkit-appearance:none;margin:0}input[type=number].no-spinners::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].no-spinners{appearance:textfield}@keyframes cotamap-spin{to{transform:rotate(360deg)}}.loading-spinner{border:3px solid var(--bg-hover);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.7s linear infinite cotamap-spin}