*{box-sizing:border-box}
:root{ --bg:#f6f7f9; --text:#0e0f12; --muted:#6b7280; --line:#e7e9ee; --panel:#fff; --shadow:0 6px 16px rgba(15,17,21,.08);
  --font-ui:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-display:'Space Grotesk','Inter',ui-sans-serif,system-ui;
  --track-tight:-0.01em; --track-wide:0.04em;
  --thumb:85px; --tile:51px; --viewW:88px;
  --accent:#0ea5e9; --accent-soft: rgba(14,165,233,.12);
}
html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 var(--font-ui);letter-spacing:.005em}
.brandbar{display:grid;place-items:center;padding:20px;border-bottom:1px solid var(--line);background:#fff}
.logo{height:56px;max-width:92vw;object-fit:contain}
.vehbar{border-bottom:1px solid var(--line);background:#fff}
.vehbar-inner{max-width:1280px;margin:0 auto;padding:12px 18px;display:flex;gap:12px;align-items:center}
.veh-label{color:var(--muted);font-weight:700;font-family:var(--font-display);letter-spacing:var(--track-tight)}
select{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.shell{max-width:1280px;margin:18px auto;display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px}
.stage .stage-inner{position:relative;aspect-ratio:16/9;background:linear-gradient(180deg,#f8fafc,#f1f5f9);border-radius:12px;overflow:hidden}
.stage img{width:100%;height:100%;object-fit:contain;display:block}
.stage img.overlay{position:absolute;inset:0;pointer-events:none}
.stage canvas.overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#frameSlider{width:100%;margin-top:10px}
.right{display:flex;flex-direction:column;gap:18px}
.panel-title{font-weight:700;color:#333;margin-bottom:8px;font-family:var(--font-display);letter-spacing:var(--track-tight)}
.seg{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* View buttons 16:9 transparent, max fit */
.view-btn{display:inline-flex;align-items:center;justify-content:center;gap:0;border:1px solid var(--line);background:#fff;padding:0;border-radius:14px;cursor:pointer;box-shadow:var(--shadow);width:var(--viewW);aspect-ratio:16/9;overflow:hidden}
.view-btn img{width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;object-position:center;background:transparent;padding:0;display:block}
.view-btn.active{outline:2px solid #111;outline-offset:2px}

/* Wheels list */
.wheel-list{display:grid;gap:12px}
.wheel-card{display:grid;grid-template-columns:var(--thumb) 1fr;gap:12px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.wheel-card.selected{ box-shadow:0 0 0 2px var(--accent), var(--shadow); border-color: transparent; }
.wheel-title{grid-column:1/-1;font-size:12px;font-weight:800;letter-spacing:.02em;font-family:var(--font-display);margin-bottom:4px}
.wheel-thumb{width:var(--thumb);height:var(--thumb);border:0;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:transparent;box-shadow:none}
.wheel-thumb img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:transparent}

/* Color grid + tiles (with labels) */
.finish-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--tile), 1fr));gap:8px}
.finish-square{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;cursor:pointer;background:transparent;border:0;padding:0}
.finish-img{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:transparent}
.finish-img img{width:100%;height:100%;object-fit:contain}
.finish-label{font-family:var(--font-ui);font-weight:500;font-size:10px;line-height:1.2;color:var(--muted);letter-spacing:.02em;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finish-square:hover .finish-img{ background:rgba(17,17,17,.035) }
.finish-square.active .finish-img{ box-shadow:0 0 0 3px var(--accent); background:var(--accent-soft) }

@media (max-width:900px){
  :root{ --thumb:70px; --tile:42px; --viewW:76px; }
  .shell{grid-template-columns:1fr;gap:12px}
}
@media (max-width:600px){
  :root{ --thumb:64px; --tile:40px }
  .finish-grid{ grid-template-columns: repeat(auto-fit, minmax(40px, 56px)); justify-content:flex-start; }
}

/* --- Colorizer add-on (keep white UI) --- */
.panel.colorizer .slider-col{display:flex;flex-direction:column;gap:10px}
.panel.colorizer .row{display:grid;grid-template-columns:80px 1fr 60px;gap:10px;align-items:center}
.panel.colorizer label{color:#444;font-weight:600}
.panel.colorizer span{font-variant-numeric:tabular-nums;text-align:right;color:#666}
.finish-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.segbtn{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.segbtn.active{background:#e9f1ff;border-color:#cddafe}
/* white pill sliders */
input[type=range]{-webkit-appearance:none;width:100%;height:22px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:8px;background:#fff;border-radius:999px;border:1px solid var(--line)}
input[type=range]::-moz-range-track{height:8px;background:#fff;border-radius:999px;border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #d0d5dd;margin-top:-8px}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #d0d5dd}


/* === Colorizer UI polish === */
/* Hide numeric readouts on the right, keep DOM for logic */
.panel.colorizer .row span { display:none; }

/* Hue: rainbow track + prominent thumb */
#hue::-webkit-slider-runnable-track {
  background: linear-gradient(90deg,
    hsl(0deg,100%,50%),
    hsl(60deg,100%,50%),
    hsl(120deg,100%,50%),
    hsl(180deg,100%,50%),
    hsl(240deg,100%,50%),
    hsl(300deg,100%,50%),
    hsl(360deg,100%,50%)
  );
  height: 14px;
  border: 0;
  border-radius: 999px;
}
#hue::-moz-range-track {
  background: linear-gradient(90deg,
    hsl(0deg,100%,50%),
    hsl(60deg,100%,50%),
    hsl(120deg,100%,50%),
    hsl(180deg,100%,50%),
    hsl(240deg,100%,50%),
    hsl(300deg,100%,50%),
    hsl(360deg,100%,50%)
  );
  height: 14px;
  border: 0;
  border-radius: 999px;
}
#hue::-webkit-slider-thumb {
  width: 22px; height: 22px; margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(255, 0, 200, 0.9); /* subtle magenta ring */
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85) inset, 0 1px 2px rgba(0,0,0,0.15);
}
#hue::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(255, 0, 200, 0.9);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85) inset, 0 1px 2px rgba(0,0,0,0.15);
}

/* Slightly taller tracks for the other sliders to match hue height */
.panel.colorizer input[type=range]::-webkit-slider-runnable-track { height: 12px; }
.panel.colorizer input[type=range]::-moz-range-track { height: 12px; }


/* Make sliders fill the panel width by spanning the hidden value column */
.panel.colorizer .row input[type=range]{
  grid-column: 2 / 4; /* span columns 2 and (hidden) 3 */
  width: 100%;
}