:root{
  color-scheme:dark;
  --bg-top:#0a0a0f; --bg-bottom:#020203;
  --panel:rgba(255,255,255,.05); --panel-2:rgba(255,255,255,.03);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
  --text:#EDEDEF; --muted:#8A8F98; --dim:#6E747D;
  --blue:#0057B8; --blue-lt:#3d8bea; --blue-soft:rgba(0,87,184,.16);
  --gold:#d9be84;
  --sans:'Noto Sans TC',system-ui,-apple-system,sans-serif;
  --serif:'Noto Serif TC',serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);font-weight:300;color:var(--text);line-height:1.8;
  background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));background-attachment:fixed;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:680px;margin:0 auto;padding:0 20px 80px}
.num{font-variant-numeric:tabular-nums}
a{color:var(--blue-lt)}
:focus-visible{outline:2px solid var(--blue-lt);outline-offset:2px;border-radius:8px}


.brandbar{display:flex;align-items:center;gap:11px;padding:14px 20px;border-bottom:1px solid var(--line)}
.brandbar .mk{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.14em}
.brandbar .sep{width:1px;height:14px;background:var(--line-2)}
.brandbar .who{font-size:11.5px;color:var(--muted)}
.brandbar .back{margin-left:auto;font-size:12px;color:var(--muted);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}

header{padding:30px 0 4px}
.ey{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-lt);margin-bottom:12px}
h1{font-family:var(--serif);font-size:clamp(23px,6vw,30px);font-weight:700;line-height:1.4;letter-spacing:-.01em}
h1 em{font-style:normal;color:var(--blue-lt)}

/* 搜尋 */
.searchwrap{margin-top:22px}
.sbox{position:relative}
.sbox input{width:100%;font-family:var(--sans);font-size:16px;font-weight:400;
  padding:15px 15px 15px 44px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--panel);color:var(--text)}
.sbox input::placeholder{color:var(--dim)}
.sbox input:focus{outline:none;border-color:var(--blue-lt);box-shadow:0 0 0 3px var(--blue-soft)}
.sbox svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  stroke:var(--muted);fill:none;stroke-width:2}
.shint{font-size:12.5px;color:var(--muted);padding:9px 2px 0}

.crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px;padding:11px 15px;
  border:1px solid var(--line);border-radius:11px;background:var(--panel-2);font-size:13px;color:var(--muted)}
.crumb b{color:var(--text);font-weight:500}
.crumb .re{margin-left:auto;font-size:12.5px;color:var(--blue-lt);background:none;border:0;cursor:pointer;
  font-family:inherit;display:inline-flex;align-items:center;min-height:44px}

/* 答案 */
.answer{margin-top:20px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel-2)}
.ahead{padding:14px 18px;border-bottom:1px solid var(--line);font-size:12px;
  font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.sz{background:rgba(255,255,255,.02);padding:20px 14px;text-align:center}
.sz .pos{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sz .inch{font-size:clamp(40px,12vw,54px);font-weight:700;line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sz .inch span{font-size:.32em;font-weight:400;color:var(--muted);margin-left:4px;vertical-align:.55em}
.sz .cm{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:7px}
.armrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:15px 18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.armrow b{color:var(--text);font-weight:500}
.armrow .tag{font-family:var(--mono);font-size:12px;color:var(--gold);border:1px solid var(--line-2);
  border-radius:7px;padding:4px 9px}
.armrow .go{margin-left:auto;font-size:13px;color:var(--blue-lt);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}

/* 四款 */
.picks{margin-top:30px}
.pickhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pickhead h2{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:-.01em}
.pickhead .n{font-family:var(--mono);font-size:12px;color:var(--muted)}
.picklead{font-size:13.5px;color:var(--muted);line-height:1.75;margin-bottom:16px}

.card{border:1px solid var(--line);border-radius:15px;background:var(--panel-2);margin-top:12px;overflow:hidden}
.card.best{border-color:rgba(0,87,184,.55);box-shadow:0 0 0 1px rgba(0,87,184,.25)}
.ctop{display:flex;gap:13px;padding:16px 16px 13px}
.ctop img{width:62px;height:62px;flex:0 0 auto;object-fit:contain;border-radius:9px;
  background:rgba(255,255,255,.06);padding:5px}
.cmeta{min-width:0;flex:1}
.cname{font-size:15.5px;font-weight:500;letter-spacing:-.01em;line-height:1.45}
.badge{display:inline-block;font-size:11px;font-weight:500;padding:3px 8px;border-radius:6px;
  margin-left:7px;vertical-align:2px;white-space:nowrap}
.badge.b{background:var(--blue-soft);color:var(--blue-lt)}
.badge.g{background:rgba(217,190,132,.14);color:var(--gold)}
.csku{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:5px}
/* 一句話差異：這是整張卡存在的理由 */
.cwhy{padding:0 16px 14px;font-size:13.5px;line-height:1.78;color:#C9CDD4}
.cwhy b{color:var(--text);font-weight:500}
.cbot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 16px;
  border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.price{font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price span{font-size:11.5px;font-weight:300;color:var(--muted);margin-right:6px;letter-spacing:0}
.acts{margin-left:auto;display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;
  padding:10px 14px;border-radius:10px;font-size:13px;font-weight:400;font-family:inherit;
  border:1px solid var(--line-2);background:transparent;color:var(--text);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--blue-lt)}
.btn.p{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500}
.btn svg{flex:0 0 auto}


.foot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.85}
.note{margin-top:22px;border-left:2px solid var(--blue);padding:2px 0 2px 15px;font-size:13px;color:var(--muted);line-height:1.8}
.note b{color:var(--text);font-weight:500}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 伺服器端先送出來的答案。前端載入後會被完整版取代——
   它的工作是「沒有 JavaScript 也讀得到」，不是好看。 */
.ssrbox{margin-top:20px;border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--panel-2)}
.ssrlead{font-size:13.5px;color:var(--muted);margin-bottom:8px}
.ssrsizes{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin-bottom:14px}
.ssrsizes li{display:flex;align-items:baseline;gap:8px}
.ssrsizes span{font-size:12.5px;color:var(--muted)}
.ssrsizes b{font-size:26px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ssrarm{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.ssrarm b{color:var(--text);font-weight:500}
.ssrlines{list-style:none;display:grid;gap:7px}
.ssrlines li{font-size:13.5px;color:var(--muted)}
.ssrlines b{color:var(--text);font-weight:500}
.ssrsku{font-family:var(--mono);font-size:12px}

/* 搜尋建議 */
.sugg{margin-top:9px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel-2)}
.sugg button{display:block;width:100%;text-align:left;padding:13px 15px;min-height:48px;
  background:none;border:0;border-top:1px solid var(--line);color:var(--text);font-family:inherit;
  font-size:14px;cursor:pointer;line-height:1.5}
.sugg button:first-child{border-top:0}
.sugg button:hover,.sugg button:focus-visible{background:rgba(255,255,255,.05)}
.sugg .b{color:var(--muted);font-size:12.5px;margin-right:7px}
.sugg .y{color:var(--muted);font-size:12px;display:block;font-family:var(--mono)}
.sugg .more{color:var(--muted);font-size:12.5px;padding:11px 15px;border-top:1px solid var(--line)}

footer{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.85}
footer p{margin:0}
.err{margin-top:20px;border:1px solid var(--line);border-left:2px solid #c9635a;border-radius:12px;
  padding:16px 18px;font-size:13.5px;line-height:1.75;color:var(--muted)}
.err b{color:var(--text);font-weight:500;display:block;margin-bottom:5px}

/* ── 分層：預設只給答案，想知道為什麼才點開 ──────────────
   警告（.cwarn）不收，解釋（.why）才收。 */
.cwarn{margin:0 16px 12px;padding:10px 12px;border-radius:9px;font-size:13px;line-height:1.7;
  background:rgba(217,190,132,.10);color:#D8CDB6}
.cwarn b{color:var(--gold);font-weight:500}
details.why,details.note{border-top:1px solid var(--line)}
details.why summary,details.note summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:8px;min-height:44px;padding:0 16px;font-size:13px;color:var(--muted);user-select:none}
details.why summary::-webkit-details-marker,details.note summary::-webkit-details-marker{display:none}
details.why summary::after,details.note summary::after{content:"";margin-left:auto;width:7px;height:7px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s var(--ease)}
details[open].why summary::after,details[open].note summary::after{transform:rotate(225deg) translateY(-2px)}
details.why summary:hover,details.note summary:hover{color:var(--text)}
.whybody{padding:2px 16px 15px;font-size:13.5px;line-height:1.8;color:#C9CDD4}
.whybody b{color:var(--text);font-weight:500}
details.note{margin-top:18px;border:1px solid var(--line);border-radius:13px;background:var(--panel-2)}
details.note summary{min-height:50px;font-size:13.5px;color:var(--text)}
@media(prefers-reduced-motion:reduce){details.why summary::after,details.note summary::after{transition:none}}

/* 車型表備註。「K卡扣需加工」這種是裝不裝得上的等級——不收合、也不做成小字。 */
.cnote{margin-top:16px;border:1px solid rgba(217,190,132,.28);border-radius:13px;
  padding:15px 17px;background:rgba(217,190,132,.07);font-size:13.5px;line-height:1.85;color:#D8CDB6}
.cnote b{display:block;color:var(--gold);font-weight:500;font-size:13px;margin-bottom:6px}
.cnote a{color:var(--blue-lt);word-break:break-all}
.ssrnote{font-size:13px;line-height:1.8;color:#D8CDB6;margin-top:12px}
.ssrnote b{color:var(--gold);font-weight:500}

/* 裝不裝得上、要不要多拿零件。跟卡片上那個行銷標籤是兩回事，所以獨立一列。 */
.cfit{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;
  padding:5px 10px;border-radius:7px;line-height:1.4}
.cfit::before{content:"";width:6px;height:6px;border-radius:99px;flex:0 0 auto;background:currentColor}
.cfit.is-ok{background:rgba(91,156,115,.14);color:#7FC496}
.cfit.is-warn{background:rgba(217,190,132,.13);color:#D9BE84}
.cfit.is-info{background:rgba(255,255,255,.06);color:var(--muted)}

/* ── 挑車廠／車型／年份 ───────────────────────────── */
.lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:22px 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:14px;min-height:44px;padding:11px 14px;border:1px solid var(--line-2);
  border-radius:11px;background:var(--panel-2);color:var(--text);font-family:inherit;
  cursor:pointer;text-align:left;line-height:1.35;transition:border-color .15s}
.chip:hover{border-color:var(--blue-lt)}
.chip.miss{border-style:dashed;color:var(--muted)}
.chip.miss:hover{border-color:var(--gold);color:var(--gold)}

/* ── 車不在表上 ─────────────────────────────────── */
.misshead{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.missname{font-size:18px;font-weight:500;letter-spacing:-.01em}
.misssub{font-size:13px;color:var(--muted);margin-top:3px}
.pending{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:500;padding:5px 11px;
  border-radius:99px;background:rgba(217,190,132,.14);color:var(--gold);white-space:nowrap}
.guess{padding:16px 20px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.85;
  color:#C9CDD4;background:rgba(217,190,132,.05)}
.guess>b:first-child{display:block;color:var(--gold);font-weight:500;margin-bottom:5px}
.guess b{color:var(--text);font-weight:500}

/* ── 回報表單 ───────────────────────────────────── */
.rep{padding:18px 20px}
.rep h4{font-size:15px;font-weight:500;letter-spacing:-.01em;margin-bottom:5px}
.repdesc{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:14px}
.form{display:grid;gap:10px}
.form input{font-size:16px;min-height:48px;padding:13px 14px;border:1px solid var(--line-2);
  border-radius:11px;background:var(--panel);color:var(--text);font-family:inherit}
.form input:focus{outline:none;border-color:var(--blue-lt);box-shadow:0 0 0 3px var(--blue-soft)}
.repfoot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:13px}
.repfoot .mut{font-size:12.5px;color:var(--muted);line-height:1.7;flex:1;min-width:190px}
.done{padding:18px 20px;background:rgba(91,156,115,.08)}
.done h4{font-size:15px;color:#7FC496;font-weight:500;margin-bottom:5px}
.done p{font-size:13.5px;color:#C9CDD4;line-height:1.8}
.done b{color:var(--text);font-weight:500}

/* ── 分享與回報 ─────────────────────────────────── */
.share{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.sh{font-size:13.5px;font-weight:500;margin-bottom:12px}
.sh span{font-weight:300;color:var(--muted)}
.sbtns{display:flex;gap:9px;flex-wrap:wrap}
.sb{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 15px;font-size:13.5px;
  border-radius:11px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);
  cursor:pointer;text-decoration:none;font-family:inherit}
.sb:hover{border-color:var(--blue-lt)}
.sb .dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.sb.line .dot{background:#06c755}.sb.th .dot{background:#fff}
.sb.fb .dot{background:#0866ff}
.sb.sys{background:var(--text);color:var(--bg-top);border-color:var(--text);font-weight:500}
.sb.sys .dot{background:var(--bg-top)}
.repbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.repbar .btn{margin-left:auto}
.foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line)}
.foot .tip{font-size:12.5px;color:var(--muted);margin-left:auto}

/* 後擋尺寸。跟前擋兩個大數字分開放——它是單支、價格算法也不同，
   混在同一排會讓人以為是「第三支前擋」。 */
.rearsize{padding:13px 18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.rearsize b{color:var(--text);font-weight:700;font-size:17px;letter-spacing:-.02em}