@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{background:#f0f0f0;font-family:Outfit,sans-serif}#app{flex-direction:row;width:100%;height:100vh;display:flex}#panel{background:#fff;border-right:1px solid #e0e0e0;flex-direction:column;flex-shrink:0;gap:0;width:260px;padding:14px;display:flex;overflow-y:auto}.panel-title{color:#222;letter-spacing:.5px;margin-bottom:10px;font-size:13px;font-weight:700}.section{border-bottom:1px solid #eee;margin-bottom:10px;padding-bottom:10px}.section-title{color:#e06020;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;font-size:11px;font-weight:600}label{color:#555;margin-bottom:3px;font-size:12px;display:block}input[type=number]{color:#222;background:#fafafa;border:1px solid #ddd;border-radius:5px;outline:none;width:100%;padding:4px 6px;font-family:Outfit,sans-serif;font-size:12px}input[type=number]:focus{background:#fff;border-color:#e06020}.row2{grid-template-columns:1fr 1fr;gap:6px;display:grid}#drop-zone{text-align:center;cursor:pointer;border:2px dashed #ddd;border-radius:8px;margin-bottom:8px;padding:16px 10px;transition:border-color .2s,background .2s}#drop-zone:hover{background:#e0602008;border-color:#e06020}.drop-icon{opacity:.35;margin-bottom:4px;font-size:26px;display:block}#drop-zone p{color:#888;font-size:11px;font-weight:600;line-height:1.4}#drop-zone input{display:none}#file-name{color:#e06020;white-space:nowrap;text-overflow:ellipsis;margin-bottom:6px;font-size:11px;font-weight:700;display:none;overflow:hidden}#svg-preview{text-align:center;background:#f9f9f9;border:1px solid #eee;border-radius:6px;padding:6px;display:none}#svg-preview svg{max-width:100%;max-height:140px;margin:0 auto;display:block}#btn-stl{color:#fff;cursor:pointer;letter-spacing:.5px;background:linear-gradient(135deg,#555,#888);border:none;border-radius:7px;width:100%;margin-bottom:6px;padding:9px;font-family:Outfit,sans-serif;font-size:13px;font-weight:600}#btn-stl:hover{background:linear-gradient(135deg,#444,#777)}#msg{color:#aaa;text-align:center;font-family:Outfit,sans-serif;font-size:10px}#viewer{background:#f0f0f0;flex:1;position:relative}#canvas{cursor:grab;width:100%;height:100%;display:block}#canvas:active{cursor:grabbing}#loading{background:#f0f0f0bf;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:none;position:absolute;inset:0}.spinner{border:3px solid #ddd;border-top-color:#e06020;border-radius:50%;width:32px;height:32px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#loading p{color:#888;letter-spacing:1px;font-size:11px}.swatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:5px;width:100%;transition:transform .12s,border-color .12s}.swatch:hover{transform:scale(1.1)}.swatch.active{border-color:#e06020;transform:scale(1.15)}#btn-reset{color:#555;cursor:pointer;letter-spacing:.5px;background:0 0;border:1px solid #ddd;border-radius:7px;width:100%;margin-bottom:6px;padding:9px;font-family:Outfit,sans-serif;font-size:13px;font-weight:600}#btn-reset:hover{color:#e06020;border-color:#e06020}#btn-3d{color:#fff;cursor:pointer;letter-spacing:.5px;background:linear-gradient(135deg,#1a6b2a,#28a745);border:none;border-radius:7px;width:100%;margin-bottom:6px;padding:9px;font-family:Outfit,sans-serif;font-size:13px;font-weight:600}#btn-3d:hover{background:linear-gradient(135deg,#155220,#1e7a35)}#btn-3d:disabled{opacity:.3;cursor:not-allowed}