:root{
   --bg:#0e0b0c;
   --panel:#151013;
   --text:#f6f2f3;
   --muted:#c8b9bb;
   --accent:#88262f;
   --accent2:#d67a82;
   --border:#2e1c20;
   --good:#4ade80; --warn:#ffb86b; --bad:#fb7185;
}
*{box-sizing:border-box} html,body{height:100%;margin:0}
body{
   background: radial-gradient(1200px 800px at 12% -18%, #1b1417 0%, var(--bg) 45%, #120d0f 100%);
   color:var(--text);
   font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Helvetica Neue", Arial;
}
header, footer{padding:12px 16px}
header h1{margin:0 0 6px;font-size:24px}
.muted{color:var(--muted)}
main{
   display:grid;
   grid-template-columns: minmax(380px, 1fr) minmax(360px, 42vw);
   gap: clamp(10px, 2vw, 18px);
   padding: clamp(10px, 2vw, 18px);
}
@media (max-width: 1024px){
   main{ grid-template-columns: 1fr; }   /* 手機／小筆電：上下堆疊 */
}
.panel{
background:linear-gradient(180deg, #1b1417, #120d0f);
border:1px solid var(--border);
border-radius:14px; padding:12px;
box-shadow:0 10px 30px rgba(0,0,0,.35);
}

#scene3d{ height: clamp(360px, calc(100dvh - var(--dock-h, 92px) - 120px), 900px); }
#uvScene{ height: clamp(360px, calc(100dvh - var(--dock-h, 92px) - 120px), 900px); }  

.row{display:flex; align-items:center; gap:10px; margin:8px 0; flex-wrap:wrap; color:var(--muted)}
.lbl{width:110px; color:var(--muted)}
input[type="file"]{flex:1}
button,.select{
   background:linear-gradient(var(--accent), #6e1e26);
   color:#fff; border:1px solid #5e1820;
   padding:8px 12px; border-radius:10px; cursor:pointer; transition:all .2s;
}
.select{appearance:none; background:#140c0e; border-color:#5e1820}
button:hover{filter:brightness(1.08)}
canvas{width:100%; height:auto; display:block; image-rendering: pixelated;}
.stats{font-size:12px; color:var(--muted); margin-top:8px; min-height:1.2em; white-space:pre-line}
.ok{color:var(--good)} .warn{color:var(--warn)} .bad{color:var(--bad)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
.badge{padding:2px 8px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.05); font-size:12px; color:var(--muted)}
	
.badge{ border:1px solid var(--border); background:rgba(21,16,19,.7); color:var(--muted) }
#uvScene{ width:100%; aspect-ratio:1/1; min-height:420px; }

:root { --dock-h: 92px; }
body { padding-bottom: var(--dock-h); }

.dock{
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1b1417, #120d0f);
  border: 1px solid var(--border, #2e1c20);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.dock-group{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dock-group.left{ min-width: 320px; }
.dock-group.mid { justify-content:center; flex:1 1 auto; }
.dock-group.right{ justify-content:flex-end; }

.dock .lbl{ width:110px; color: var(--muted, #c8b9bb); }
.dock .lbl.small{ width:auto; font-size: 12px; opacity:.85; }

@supports (padding: max(0px)){
  .dock{ padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

@media (max-width: 900px){
  .dock{ flex-wrap: wrap; }
  .dock-group.left{ min-width: 0; flex:1 1 100%; }
  .dock-group.mid { flex:1 1 100%; justify-content:flex-start; }
  .dock-group.right{ flex:1 1 100%; justify-content:flex-start; }
}

.dock input[type="file"]{
  max-width: 320px;
}

.dock .stats{
  max-width: 36ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 12px;
  color: var(--muted, #c8b9bb);
  font-size: 12px;
  line-height: 1.4;
  vertical-align: middle;
}