:root{
  --bg0:#070a10; --bg1:#121826; --bg2:#1b2436;
  --ink:#eef2f8; --dim:#93a0b8; --line:rgba(255,255,255,.10);
  --glass:rgba(16,22,34,.72);
  --acc:#ff9d2e; --acc2:#ffd27a;
  --r:16px;
  --pad:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"Noto Sans Thai","Leelawadee UI","Segoe UI",system-ui,sans-serif;
  color:var(--ink); background:var(--bg0); overflow:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; transition:background .6s ease;
  background:
    radial-gradient(120% 80% at 50% 8%, #2a3958 0%, #141b2a 42%, #080b12 78%),
    radial-gradient(60% 40% at 50% 100%, rgba(255,157,46,.14), transparent 70%);
}
body[data-env="showroom"]::before{
  background:radial-gradient(120% 80% at 50% 10%, #2b2f38 0%, #16191f 55%, #0a0c10 85%);
}
/* พื้นหลังสว่าง: เพิ่มความทึบของแผงควบคุมให้อ่านง่าย */
body[data-env="sky"] #panel, body[data-env="studio"] #panel,
body[data-env="showroom"] #panel, body[data-env] .car, body[data-env] #specs{
  background:rgba(10,14,22,.82)
}
body[data-env="sky"]::before{
  background:
    linear-gradient(#8fb6de 0%, #c9dcef 42%, #e7eef5 62%, #b9c3cd 63%, #7f8993 100%);
}
#stage{position:fixed; inset:0; z-index:1}
#view{width:100%; height:100%; display:block}
#hint{
  position:absolute; left:50%; bottom:86px; transform:translateX(-50%);
  font-size:12px; color:var(--dim); letter-spacing:.3px; pointer-events:none;
  opacity:.75; transition:opacity .4s
}
#hint.gone{opacity:0}

/* ---------------------------------------------------------- top bar */
#topbar{
  position:fixed; z-index:5; top:0; left:0; right:0; height:70px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; pointer-events:none;
  background:linear-gradient(#000a 0%, transparent 100%);
}
.brand{display:flex; align-items:center; gap:12px; pointer-events:auto}
.logo{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--acc),#e8620f); color:#1a1205;
  font:700 16px/1 "Barlow Condensed",sans-serif; letter-spacing:1px;
  box-shadow:0 6px 18px rgba(255,120,20,.35)
}
h1{font:700 19px/1.1 "Barlow Condensed",sans-serif; letter-spacing:3px}
h1 span{color:var(--acc)}
#carTitle{font-size:12px;color:var(--dim);margin-top:2px}
.tools{display:flex; gap:6px; pointer-events:auto; flex-wrap:wrap; justify-content:flex-end}
.tool{
  border:1px solid var(--line); background:var(--glass); color:var(--ink);
  backdrop-filter:blur(14px); border-radius:11px; padding:8px 12px;
  font:500 13px/1 "Noto Sans Thai",sans-serif; cursor:pointer; transition:.18s
}
.tool:hover{border-color:var(--acc); color:var(--acc2)}
.tool.on{background:var(--acc); color:#1a1205; border-color:transparent}
.tool.icon{width:38px; font-size:16px; padding:8px 0}
a.tool{text-decoration:none; display:inline-flex; align-items:center}

/* ---------------------------------------------------------- car rail */
#cars{
  position:fixed; z-index:5; left:14px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px; width:196px
}
.car{
  border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(14px);
  border-radius:var(--r); padding:10px 12px; cursor:pointer; text-align:left;
  color:var(--ink); transition:.2s; display:flex; gap:10px; align-items:center
}
.car:hover{transform:translateX(4px); border-color:rgba(255,157,46,.5)}
.car.on{border-color:var(--acc); background:linear-gradient(120deg,rgba(255,157,46,.18),var(--glass))}
.car img{width:58px;height:34px;object-fit:contain;filter:drop-shadow(0 3px 5px #0008)}
.car .no-img{width:58px;height:34px;display:grid;place-items:center;font-size:19px;opacity:.6}
.car b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap}
.car small{display:block;font-size:10.5px;color:var(--dim);margin-top:1px}

/* ---------------------------------------------------------- panel */
#panel{
  position:fixed; z-index:6; right:14px; top:84px; width:322px;
  max-height:calc(100vh - 176px);
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:20px;
  background:var(--glass); backdrop-filter:blur(18px);
  box-shadow:0 24px 60px #000a;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}
.panel-head h2{font-size:15px;font-weight:700;letter-spacing:.3px}
#panelToggle{background:none;border:0;color:var(--dim);font-size:16px;cursor:pointer;padding:4px 6px}
.panel-body{overflow-y:auto; padding:4px 16px 16px; scrollbar-width:thin; scrollbar-color:#33405c transparent}
.panel-body::-webkit-scrollbar{width:7px}
.panel-body::-webkit-scrollbar-thumb{background:#33405c;border-radius:9px}
#panel.min .panel-body{display:none}
#panel.min{max-height:none}

.wheel-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
.wh{
  position:relative; border:1px solid var(--line); background:rgba(255,255,255,.035);
  border-radius:12px; padding:5px; cursor:pointer; transition:.18s; aspect-ratio:1
}
.wh:hover{border-color:rgba(255,157,46,.6); transform:translateY(-2px)}
.wh.on{border-color:var(--acc); background:rgba(255,157,46,.16); box-shadow:0 0 0 1px var(--acc) inset}
.wh img{width:100%;height:100%;object-fit:contain;display:block}
.wh .fallback{width:100%;height:100%;display:grid;place-items:center;font-size:20px;opacity:.55}
.wh em{
  position:absolute; left:0; right:0; bottom:2px; text-align:center; font-style:normal;
  font-size:8.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis
}

.block{margin-top:16px}
.lbl{font-size:12px;color:var(--dim)}
.row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.row b,.lbl b{font-size:12.5px;color:var(--acc2)}

.swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sw{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;
    box-shadow:0 2px 8px #0007, inset 0 -6px 10px rgba(0,0,0,.35), inset 0 6px 10px rgba(255,255,255,.28)}
.sw.on{border-color:var(--acc); transform:scale(1.12)}

.segmented{display:flex;background:rgba(255,255,255,.05);border-radius:11px;padding:3px;margin-top:8px;gap:3px}
.segmented button{
  flex:1;border:0;background:none;color:var(--dim);font:500 12px/1 "Noto Sans Thai",sans-serif;
  padding:8px 4px;border-radius:9px;cursor:pointer;transition:.18s
}
.segmented button.on{background:var(--acc);color:#1a1205;font-weight:700}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  border-radius:9px;padding:6px 9px;font:500 12px/1 "Barlow Condensed",sans-serif;
  letter-spacing:.5px;cursor:pointer;transition:.15s
}
.chip:hover{border-color:var(--acc)}
.chip.on{background:var(--acc);color:#1a1205;border-color:transparent;font-weight:700}

input[type=range]{
  width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--acc) 0%,var(--acc) var(--p,50%),rgba(255,255,255,.14) var(--p,50%));
  outline:none;margin:4px 0
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:#fff;border:3px solid var(--acc);cursor:grab;box-shadow:0 2px 8px #000a
}
.scale{display:flex;justify-content:space-between;font-size:10px;color:#6b7893;margin-top:2px}

.toggles{display:flex;flex-direction:column;gap:11px}
.switch{display:flex;align-items:center;gap:10px;font-size:12.5px;cursor:pointer;user-select:none}
.switch input{display:none}
.switch span{width:38px;height:21px;border-radius:12px;background:rgba(255,255,255,.14);position:relative;transition:.2s;flex:none}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked + span{background:var(--acc)}
.switch input:checked + span::after{transform:translateX(17px)}

.reset{
  width:100%;margin-top:18px;border:1px dashed var(--line);background:none;color:var(--dim);
  padding:10px;border-radius:11px;font:500 12.5px "Noto Sans Thai",sans-serif;cursor:pointer;transition:.18s
}
.reset:hover{color:var(--acc);border-color:var(--acc)}

/* ---------------------------------------------------------- specs */
#specs{
  position:fixed;z-index:5;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:9px 14px;border-radius:14px;border:1px solid var(--line);
  background:var(--glass);backdrop-filter:blur(16px);max-width:min(940px,92vw)
}
.spec{display:flex;flex-direction:column;align-items:center;min-width:74px;padding:0 8px}
.spec + .spec{border-left:1px solid var(--line)}
.spec span{font-size:9.5px;color:var(--dim);letter-spacing:.2px}
.spec b{font-size:12.5px;margin-top:2px;white-space:nowrap}
.spec.warn b{color:#ffb4a0}
.spec.warn:empty{display:none}

/* ---------------------------------------------------------- loader */
#loader{
  position:fixed;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:14px;
  background:rgba(6,9,15,.88);backdrop-filter:blur(6px);transition:opacity .45s
}
#loader.gone{opacity:0;pointer-events:none}
.ring{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.14);border-top-color:var(--acc);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loadText{font-size:13px;color:var(--dim)}
.bar{width:210px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}

#toast{
  position:fixed;z-index:30;left:50%;bottom:92px;transform:translate(-50%,14px);
  background:var(--acc);color:#1a1205;font:600 12.5px "Noto Sans Thai",sans-serif;
  padding:9px 16px;border-radius:11px;opacity:0;pointer-events:none;transition:.28s
}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------------------------------------------------------- responsive */
@media (max-width:1080px){
  #panel{width:288px}
  #cars{width:150px}
  .car img,.car .no-img{width:44px;height:28px}
}
@media (max-width:820px){
  #topbar{height:60px;padding:0 10px}
  h1{font-size:16px}
  #cars{
    left:0;right:0;top:64px;bottom:auto;transform:none;flex-direction:row;width:auto;
    padding:0 10px;overflow-x:auto;gap:8px
  }
  .car{flex:none;width:150px;padding:7px 9px}
  .car:hover{transform:none}
  #panel{
    left:8px;right:8px;width:auto;top:auto;bottom:8px;max-height:56vh;border-radius:18px
  }
  #specs{bottom:calc(56vh + 16px);font-size:11px;padding:6px 10px}
  #panel.min ~ #specs{bottom:80px}
  #hint{display:none}
  .wheel-grid{grid-template-columns:repeat(4,1fr)}
}


/* ---------------------------------------------------------- render modal */
#btnRender{background:linear-gradient(135deg,var(--acc),#ef6d12);color:#1a1205;border-color:transparent;font-weight:700}
#btnRender:hover{color:#1a1205;filter:brightness(1.08)}
#renderModal{
  position:fixed;inset:0;z-index:25;display:none;place-items:center;
  background:rgba(4,7,12,.72);backdrop-filter:blur(8px);padding:18px
}
#renderModal.on{display:grid}
.rm-box{
  width:min(1120px,96vw);max-height:92vh;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:20px;background:#0d1219;box-shadow:0 30px 80px #000c;overflow:hidden
}
.rm-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.rm-head b{font-size:15px}
#rmClose{background:none;border:0;color:var(--dim);font-size:16px;cursor:pointer}
#rmClose:hover{color:var(--acc)}
.rm-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.rm-opts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rm-opts .segmented{margin-top:0;flex:1;min-width:230px}
.rm-go{
  border:0;border-radius:11px;padding:11px 18px;cursor:pointer;
  background:linear-gradient(135deg,var(--acc),#ef6d12);color:#1a1205;
  font:700 13px "Noto Sans Thai",sans-serif
}
.rm-go:disabled{opacity:.5;cursor:default}
.rm-stage{
  position:relative;border-radius:14px;overflow:hidden;background:#070a10;border:1px solid var(--line);
  min-height:330px;display:grid;place-items:center
}
.rm-stage img{width:100%;display:none}
.rm-stage img.on{display:block}
.rm-idle{color:var(--dim);font-size:13px;text-align:center;line-height:1.9}
.rm-idle small{font-size:11px;opacity:.7}
.rm-busy{display:none;justify-items:center;gap:10px;text-align:center}
.rm-busy.on{display:grid}
.rm-busy p{font-size:13px;color:var(--ink)}
.rm-busy small{font-size:11px;color:var(--dim)}
#rmSave{
  display:none;text-align:center;padding:10px;border-radius:11px;border:1px solid var(--acc);
  color:var(--acc);text-decoration:none;font:600 13px "Noto Sans Thai",sans-serif
}
#rmSave.on{display:block}
#rmSave:hover{background:var(--acc);color:#1a1205}

.mini{
  border:1px solid var(--line);background:none;color:var(--dim);border-radius:8px;
  padding:3px 9px;font:500 10.5px "Noto Sans Thai",sans-serif;cursor:pointer;transition:.15s
}
.mini:hover{color:var(--acc);border-color:var(--acc)}
.mini.on{background:var(--acc);color:#1a1205;border-color:transparent;font-weight:700}

.hide{display:none}

.swatches.dim{opacity:.35;pointer-events:none}
.swatches.dim::after{content:'รถรุ่นนี้เปลี่ยนสีไม่ได้ (ตัวถังเป็นเท็กซ์เจอร์)';font-size:10.5px;color:var(--dim);display:block;margin-top:4px}


/* ---------------------------------------------------------- ค้นหา + หมวดยี่ห้อ */
#carPane{
  position:fixed; z-index:5; left:14px; top:84px; bottom:96px; width:210px;
  display:flex; flex-direction:column; gap:8px
}
.finder{
  border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(14px);
  border-radius:14px; padding:8px
}
.finder input, .minisearch{
  width:100%; border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--ink);
  border-radius:9px; padding:7px 10px; font:400 12px "Noto Sans Thai",sans-serif; outline:none
}
.finder input:focus, .minisearch:focus{border-color:var(--acc)}
.minisearch{margin-bottom:8px}
.brandbar{display:flex; flex-wrap:wrap; gap:4px; margin-top:7px}
.brandbar button{
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--dim);
  border-radius:20px; padding:3px 9px; font:500 10.5px "Noto Sans Thai",sans-serif; cursor:pointer; transition:.15s
}
.brandbar button:hover{color:var(--acc); border-color:var(--acc)}
.brandbar button.on{background:var(--acc); color:#1a1205; border-color:transparent; font-weight:700}
.brandbar.small button{font-size:10px; padding:2px 8px}
#cars{
  position:static; transform:none; width:auto; overflow-y:auto; overflow-x:hidden;
  padding-right:4px; gap:7px; display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color:#33405c transparent
}
#cars::-webkit-scrollbar{width:6px}
#cars::-webkit-scrollbar-thumb{background:#33405c;border-radius:9px}
.brandhead{
  font:700 10px "Barlow Condensed",sans-serif; letter-spacing:1.5px; color:var(--dim);
  padding:6px 4px 2px; text-transform:uppercase
}
.noresult{font-size:11.5px;color:var(--dim);padding:10px 4px}

/* ---------------------------------------------------------- ราคา + ตะกร้า */
.pricebox{border-top:1px solid var(--line); padding-top:12px}
.pricebox b{font-size:15px;color:var(--acc2)}
.addcart{
  width:100%; margin-top:10px; border:0; border-radius:11px; padding:11px;
  background:linear-gradient(135deg,var(--acc),#ef6d12); color:#1a1205;
  font:700 13px "Noto Sans Thai",sans-serif; cursor:pointer; transition:.15s
}
.addcart:hover{filter:brightness(1.08)}
.addcart:disabled{opacity:.45;cursor:default;filter:none}
#btnCart b{color:var(--acc2); margin-left:2px}
#btnCart.has b{color:#1a1205}
#btnCart.has{background:var(--acc); color:#1a1205}

#cartModal{
  position:fixed; inset:0; z-index:26; display:none; place-items:center;
  background:rgba(4,7,12,.72); backdrop-filter:blur(8px); padding:18px
}
#cartModal.on{display:grid}
#cartModal .rm-box{width:min(760px,96vw)}
.cart-item{
  display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line)
}
.cart-item img{width:52px;height:52px;object-fit:contain;flex:none}
.cart-item .ci-main{flex:1;min-width:0}
.cart-item b{display:block;font-size:13px}
.cart-item small{display:block;font-size:11px;color:var(--dim);margin-top:2px;line-height:1.7}
.cart-item .ci-price{font:700 13.5px "Noto Sans Thai",sans-serif;color:var(--acc2);white-space:nowrap}
.cart-item .ci-del{background:none;border:0;color:#6b7893;cursor:pointer;font-size:15px;padding:4px}
.cart-item .ci-del:hover{color:#ff8a6a}
.cart-total{
  display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;
  padding-top:12px;border-top:2px solid var(--acc)
}
.cart-total span{font-size:13px;color:var(--dim)}
.cart-total b{font:700 22px "Noto Sans Thai",sans-serif;color:var(--acc)}
.cart-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.cart-actions .rm-go{flex:1;min-width:180px}
.cart-empty{text-align:center;color:var(--dim);font-size:13px;padding:26px 0}
.svc{display:flex;align-items:center;gap:9px;font-size:12px;margin-top:8px;cursor:pointer}
.svc input{accent-color:var(--acc)}
.wh .price{
  position:absolute; left:0; right:0; top:2px; text-align:center;
  font:600 9px "Noto Sans Thai",sans-serif; color:var(--acc2); text-shadow:0 1px 3px #000
}

@media print{
  body > *{display:none !important}
  #cartModal{display:block !important; position:static; background:#fff; padding:0}
  #cartModal .rm-box{width:100%; background:#fff; color:#000; box-shadow:none; border:0}
  #cartModal .rm-head button, .cart-actions, .note{display:none !important}
  .cart-item b, .cart-total b, .rm-head b{color:#000 !important}
  .cart-item small, .cart-total span{color:#444 !important}
  .cart-item .ci-price{color:#000 !important}
}


/* ---------------------------------------------------------- พับแถบสองข้าง */
.paneTab{
  position:fixed; z-index:7; width:34px; height:44px; border-radius:12px;
  border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(14px);
  color:var(--ink); font-size:16px; cursor:pointer; transition:.22s;
  display:grid; place-items:center
}
.paneTab:hover{border-color:var(--acc); color:var(--acc2)}
#carToggle{left:14px; top:50%; transform:translateY(-50%)}
#panelTab{right:14px; top:50%; transform:translateY(-50%)}

#carPane, #panel{transition:transform .28s ease, opacity .22s ease}
body.hideCars #carPane{transform:translateX(calc(-100% - 24px)); opacity:0; pointer-events:none}
body.hidePanel #panel{transform:translateX(calc(100% + 24px)); opacity:0; pointer-events:none}
body:not(.hideCars) #carToggle{left:232px}
body:not(.hidePanel) #panelTab{right:352px}
body.hideCars #carToggle, body.hidePanel #panelTab{opacity:.85}

@media (max-width:1080px){
  body:not(.hidePanel) #panelTab{right:318px}
}
@media (max-width:820px){
  .paneTab{top:auto; bottom:14px; transform:none}
  #carToggle{left:10px}
  #panelTab{right:10px}
  body:not(.hideCars) #carToggle, body:not(.hidePanel) #panelTab{left:10px; right:10px}
  body.hideCars #carPane{transform:translateY(-140%)}
  body.hidePanel #panel{transform:translateY(140%)}
}

.brandhead{display:flex;align-items:center;gap:6px}
.brandhead span{
  font:700 9px "Barlow Condensed",sans-serif;color:#1a1205;background:var(--acc);
  border-radius:8px;padding:0 5px;letter-spacing:0
}
.brandbar button i{font-style:normal;opacity:.55;margin-left:3px;font-size:9.5px}
.brandbar button.on i{opacity:.8}

/* ---------------------------------------------------------- เบรก */
#brakeOpts.off{opacity:.35;pointer-events:none}

/* ตัวกรองรูน็อต: ตรงรุ่นรถนี้ / ทั้งหมด */
.fitbar{margin-top:7px}
.fitbar button{font-size:11px;padding:5px 6px}
.fitbar button i{font-style:normal;opacity:.6;margin-left:4px;font-size:10px}
.wh .oosTag{display:block;font-style:normal;font-size:9.5px;color:#ff8a7a}
.wh.oos{opacity:.55}