/* UVCanvas styles. Colours are CSS variables so a theme can be changed in one place. */
:root{--bg:#171a20;--panel:#1f232b;--panel2:#262b35;--line:#343a47;--text:#e6e9ef;--muted:#9aa3b5;--accent:#ff6078;--accent2:#4f8cff;--ok:#3ccf8e;--warn:#f5b84b;--err:#ff6b6b;--radius:8px}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;display:flex;flex-direction:column;overflow:hidden}
a{color:var(--accent2)}
h1,h2,h3{margin:0 0 .4em;font-weight:650}
.muted{color:var(--muted);font-weight:400}.hint{color:var(--muted);font-size:12px;margin:.4em 0 0}
.grow{flex:1}
[hidden]{display:none!important}
.noscript{padding:16px;background:#400;color:#fff;margin:0}
.ic{display:inline-block;width:18px;height:18px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;flex:none}
.i-brush{--i:url(../assets/icons/brush.svg)}
.i-chevron{--i:url(../assets/icons/chevron.svg)}
.i-close{--i:url(../assets/icons/close.svg)}
.i-download{--i:url(../assets/icons/download.svg)}
.i-eraser{--i:url(../assets/icons/eraser.svg)}
.i-eye{--i:url(../assets/icons/eye.svg)}
.i-eye-off{--i:url(../assets/icons/eye-off.svg)}
.i-eyedropper{--i:url(../assets/icons/eyedropper.svg)}
.i-fill{--i:url(../assets/icons/fill.svg)}
.i-help{--i:url(../assets/icons/help.svg)}
.i-home{--i:url(../assets/icons/home.svg)}
.i-orbit{--i:url(../assets/icons/orbit.svg)}
.i-pan{--i:url(../assets/icons/pan.svg)}
.i-redo{--i:url(../assets/icons/redo.svg)}
.i-settings{--i:url(../assets/icons/settings.svg)}
.i-trash{--i:url(../assets/icons/trash.svg)}
.i-undo{--i:url(../assets/icons/undo.svg)}
.i-upload{--i:url(../assets/icons/upload.svg)}
.i-play{--i:url(../assets/icons/play.svg)}
.i-pause{--i:url(../assets/icons/pause.svg)}
.i-stop{--i:url(../assets/icons/stop.svg)}
.i-step-back{--i:url(../assets/icons/step-back.svg)}
.i-step-forward{--i:url(../assets/icons/step-forward.svg)}
.i-plus{--i:url(../assets/icons/plus.svg)}
.i-resize{--i:url(../assets/icons/resize.svg)}
.i-flip{--i:url(../assets/icons/flip.svg)}
.i-rotate{--i:url(../assets/icons/rotate.svg)}
.i-reset{--i:url(../assets/icons/reset.svg)}
.i-bleed{--i:url(../assets/icons/bleed.svg)}
.i-layers{--i:url(../assets/icons/layers.svg)}
.i-bone{--i:url(../assets/icons/bone.svg)}
.i-shield{--i:url(../assets/icons/shield.svg)}
.i-info{--i:url(../assets/icons/info.svg)}

.topbar,.editbar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--text);font:inherit;font-weight:700;font-size:17px;cursor:pointer;padding:2px 4px}
.tagline{color:var(--muted);font-size:12px}
.privacy-pill{font-size:12px;color:var(--ok);border:1px solid #2c6e53;border-radius:99px;padding:2px 10px;background:#17281f}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:6px 11px;font:inherit;cursor:pointer;min-height:32px}
.btn:hover{border-color:#566074;background:#2d3340}.btn:focus-visible,.tool:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent2);outline-offset:1px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#210309;font-weight:650}.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{border-color:#7a3340;color:#ffb0b8}.btn.small{padding:2px 8px;min-height:24px;font-size:12px}
.btn.icon{padding:6px 8px}.btn:disabled{opacity:.4;cursor:default}
.view{flex:1;min-height:0;display:flex;flex-direction:column}
#home{overflow:auto;padding:0 clamp(12px,4vw,48px) 24px}
.hero{padding:28px 0 12px;max-width:820px}.hero h1{font-size:clamp(24px,4vw,36px)}.hero p{color:#c4cad8;margin:.3em 0 .8em}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.section-title{margin-top:22px;font-size:18px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card-model{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;text-align:left;color:inherit;font:inherit;padding:0}
.card-model:hover{border-color:var(--accent)}
.card-model img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#2b303b;display:block}
.card-model .meta{padding:10px 12px 12px}.card-model .nm{font-weight:650}.card-model .ds{color:var(--muted);font-size:12px;margin-top:2px}
.card-model .open{margin-top:8px;color:var(--accent);font-size:12px;font-weight:650}
.foot{margin-top:30px;color:var(--muted);font-size:12px}
.model-name{max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.seg button{background:var(--panel2);border:0;color:var(--muted);padding:6px 10px;cursor:pointer;font:inherit}.seg button.on{background:#3a4254;color:#fff}
.menu{position:relative}.menu-pop{position:absolute;right:0;top:110%;z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:4px;display:flex;flex-direction:column;min-width:260px;box-shadow:0 8px 24px #0008}
.menu-pop button{background:none;border:0;color:var(--text);text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;font:inherit}.menu-pop button:hover{background:var(--panel2)}
.banner{display:flex;align-items:center;gap:8px;background:#1b2a3d;color:#bcd4f5;padding:4px 12px;font-size:12px;flex:none}.banner .x{margin-left:auto}
.x{background:none;border:0;color:inherit;cursor:pointer;padding:4px;display:inline-flex}
.workspace{flex:1;min-height:0;display:flex}
.tools{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--panel);border-right:1px solid var(--line);flex:none}
.tool{display:flex;flex-direction:column;align-items:center;gap:2px;width:58px;padding:7px 2px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);font:inherit;font-size:11px;cursor:pointer}
.tool.on{border-color:var(--accent);background:#3a2229;color:#fff}.tool .ic{width:22px;height:22px}
.panes{flex:1;min-width:0;display:flex}
.pane{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.pane-title{display:flex;align-items:center;gap:8px;padding:5px 10px;background:var(--panel);font-size:12px;font-weight:650;flex:none}
.pane-foot{padding:3px 10px;font-size:11px;color:var(--muted);background:var(--panel);flex:none}
.canvas-wrap{position:relative;flex:1;min-height:0;overflow:hidden;background:#262a33}
.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.ring{position:absolute;left:0;top:0;border:1.5px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000a;pointer-events:none}
.overlay{position:absolute;inset:0;background:#171a20cc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:5}
.spinner{width:34px;height:34px;border:4px solid #444b5a;border-top-color:var(--accent);border-radius:50%;animation:sp 0.9s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.panes.only3d #pane2d,.panes.only2d #pane3d{display:none}
.side{width:318px;flex:none;overflow:auto;background:var(--bg);padding:8px;display:flex;flex-direction:column;gap:8px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px}
.card h3{display:flex;align-items:center;gap:6px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.row{display:flex;align-items:center;gap:8px;margin:6px 0}.row>input[type=range]{flex:1;min-width:0}.row output{width:30px;text-align:right;color:var(--muted)}
.row .lbl{width:140px;flex:none}
.row.buttons{flex-wrap:wrap}.row.end{justify-content:flex-end}
.swatches{display:flex;gap:3px;flex-wrap:wrap}.swatches button{width:16px;height:16px;border-radius:4px;border:1px solid #0008;padding:0;cursor:pointer}
input[type=color]{width:38px;height:28px;padding:0;border:1px solid var(--line);background:none;border-radius:6px}
select{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:4px 6px;font:inherit;flex:1;min-width:0}
.chk{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text)}
.target-list{display:flex;flex-direction:column;gap:3px;max-height:150px;overflow:auto}
.target-list button{text-align:left;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:4px 8px;cursor:pointer;font:inherit;display:flex;justify-content:space-between;gap:6px}.target-list button.on{border-color:var(--accent2);background:#233049}
.grow-card{flex:1;min-height:140px}
.tree{margin-top:6px;max-height:360px;overflow:auto;font-size:13px}
.tnode{display:flex;align-items:center;gap:4px;padding:1px 2px;border-radius:5px}.tnode.sel{background:#233049}
.tnode .eye{background:none;border:0;color:var(--text);cursor:pointer;padding:3px;display:inline-flex}.tnode .eye.off{color:#667}
.tnode .nm{flex:1;min-width:0;background:none;border:0;color:inherit;text-align:left;font:inherit;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 0}
.tnode .tg{background:none;border:0;color:var(--muted);cursor:pointer;padding:2px;display:inline-flex;transition:transform .1s}.tnode .tg.open{transform:rotate(90deg)}
.tnode .badge{font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px}.tnode .badge.warn{color:var(--warn);border-color:#6b5420}
.tnode .solo{background:none;border:0;color:var(--muted);cursor:pointer;font-size:11px;padding:0 3px}
.kids{margin-left:14px;border-left:1px dashed var(--line);padding-left:4px}
.statusbar{display:flex;gap:12px;padding:3px 12px;background:var(--panel);border-top:1px solid var(--line);font-size:12px;color:var(--muted);flex:none}
.dirty.unsaved{color:var(--warn);font-weight:650}
.toasts{position:fixed;right:12px;bottom:36px;display:flex;flex-direction:column;gap:6px;z-index:100;max-width:min(420px,92vw)}
.toast{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent2);padding:8px 12px;border-radius:8px;box-shadow:0 6px 18px #0008}.toast.warn{border-left-color:var(--warn)}.toast.error{border-left-color:var(--err)}.toast.ok{border-left-color:var(--ok)}
dialog.dlg{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:0;width:min(560px,94vw);max-height:90vh}.dlg.wide{width:min(820px,96vw)}.dlg.small{width:min(420px,94vw)}
dialog::backdrop{background:#000a}
.dlg-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}.dlg-head h2{margin:0;font-size:17px}
.dlg-body{padding:12px 16px 16px;overflow:auto;max-height:calc(90vh - 52px)}
.doc h3{margin-top:1.2em;color:var(--text);text-transform:none;letter-spacing:0;font-size:15px}.doc p,.doc li{color:#cdd3e0}.doc kbd{background:#2d3340;border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:12px}
.doc code{background:#2d3340;border-radius:4px;padding:0 4px}
.err-box{background:#3a1d22;border:1px solid #7a3340;border-radius:8px;padding:10px 12px;margin:8px 0}
.dropzone{position:fixed;inset:0;background:#171a20e6;display:flex;align-items:center;justify-content:center;font-size:24px;z-index:200;border:3px dashed var(--accent);pointer-events:none}

/* ---- side panel tabs and panels ---- */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:sticky;top:-8px;background:var(--bg);padding:8px 0 4px;margin-top:-8px;z-index:3}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);font:inherit;font-size:11px;cursor:pointer}
.tabs button.on{color:#fff;border-color:var(--accent);background:#3a2229}.tabs button:hover{color:#fff}
.panel{display:flex;flex-direction:column;gap:8px}
.row.chk{margin:6px 0}
.row .lbl{width:118px}
.maptabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:8px 0}
.maptabs button{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:6px 8px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--text);font:inherit;font-size:12px;cursor:pointer;text-align:left}
.maptabs button.on{border-color:var(--accent);background:#3a2229}.maptabs button.missing{color:var(--muted);border-style:dashed}
.maptabs .sz{color:var(--muted);font-size:11px}
.texinfo{background:#171a20;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;color:var(--muted)}
.texinfo .big{display:block;font-size:20px;font-weight:700;color:var(--text);letter-spacing:.01em}
.texinfo b{color:var(--text)}
.danger-zone{border-color:#4a2a31}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#262a33;color:var(--muted);text-align:center;padding:20px;z-index:2}
.empty p{max-width:340px;margin:0}
.i-flip.rot90{transform:rotate(90deg)}.i-rotate.flipx{transform:scaleX(-1)}
.poselist{max-height:180px;overflow:auto;font-size:11px;font-family:ui-monospace,Consolas,monospace;color:var(--muted)}
.poselist div{display:flex;justify-content:space-between;gap:6px;padding:1px 0}
details summary{cursor:pointer;color:var(--muted);font-size:12px;margin:4px 0}
#morphList .row{margin:3px 0}
.pv{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}.pv figure{margin:0;flex:1;min-width:120px;text-align:center;font-size:11px;color:var(--muted)}
.pv canvas{max-width:100%;max-height:200px;border:1px solid var(--line);image-rendering:pixelated;background:repeating-conic-gradient(#d8d8d8 0 25%,#bdbdbd 0 50%) 0 0/16px 16px}
.field{display:flex;gap:8px;align-items:center;margin:6px 0}.field input[type=number]{width:90px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:4px 6px;font:inherit}
.stats{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:12px;color:var(--muted);margin:6px 0}.stats b{color:var(--text);font-weight:600;text-align:right}
.sec{border-top:1px solid var(--line);margin-top:12px;padding-top:8px}.sec h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
@media (max-width:900px){.tabs{position:static}}
@media (max-width:900px){
  .workspace{flex-direction:column;overflow:auto}.tools{flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid var(--line)}.tool{width:54px;flex:none}
  .panes{flex:none;height:62vh;flex-direction:column}.pane{border-right:0;border-bottom:1px solid var(--line)}.side{width:auto;overflow:visible}.tagline,.privacy-pill{display:none}
}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}