/* 以 .mx- 開頭，沿用網站現有的色彩與字體變數（--forest、--gold、--serif…） */
.mx{font-family:var(--body);color:var(--text);box-sizing:border-box}
.mx *,.mx *::before,.mx *::after{box-sizing:border-box}
.mx-card{background:#fff;border:1px solid var(--border);border-radius:16px}
.mx-card.dark{background:var(--panel-dark);border-color:var(--panel-dark-line);color:var(--on-forest)}
.mx-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted)}
.mx-code{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--forest);border:1px solid var(--pine);border-radius:4px;padding:2px 7px;background:#fff;white-space:nowrap}
.mx-code::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.mx-tag{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:500;border:1px solid var(--pine);color:var(--forest);border-radius:4px;padding:1px 6px;white-space:nowrap}
.mx-tag.warn{border-color:#b7892f;color:#8a6420;background:#fbf3df}
.mx-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;border-radius:999px;padding:2px 9px;white-space:nowrap}
.mx-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mx-pill.todo{background:#fbf3df;color:#8a6420}
.mx-pill.sent{background:#e6efe9;color:var(--pine)}
.mx-pill.read{background:#e9eef6;color:#3d5a80}
.mx-pill.done{background:var(--forest);color:#fff}
.mx-pill.done::before{background:var(--gold-bright)}
.mx-num{font-family:var(--mono);font-variant-numeric:tabular-nums}


/* ---------- 2. 報價工作台 ---------- */
.mx-quote{padding:18px}
.mx-quote-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.mx-quote-head strong{font-family:var(--serif);font-size:16px;color:var(--ink)}
.mx-quote-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--divider)}
.mx-quote-car{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.35}
.mx-quote-car small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
.mx-range{position:relative;height:6px;border-radius:3px;background:var(--surface-deep)}
.mx-range i{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--mint)}
.mx-range b{position:absolute;top:-4px;width:2px;height:14px;background:var(--gold);border-radius:1px}
.mx-range-cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:5px}
@media (max-width:520px){.mx-quote-row{grid-template-columns:1fr auto}.mx-quote-row>.mx-quote-mkt{grid-column:1/-1;order:3}}

/* ---------- 3. 需求自動配對（LINE 通知） ---------- */
.mx-line{background:#8cabd9;background:linear-gradient(180deg,#9db7df,#8aa9d6);border-radius:22px;padding:16px 14px 18px;display:grid;gap:10px;max-width:360px}
.mx-line-time{justify-self:center;font-size:11px;color:#fff;background:rgba(0,0,0,.14);padding:1px 10px;border-radius:999px}
.mx-line-msg{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:start}
.mx-line-av{width:34px;height:34px;border-radius:50%;background:var(--forest);display:grid;place-items:center;color:var(--gold-bright);font-family:var(--display);font-size:15px;font-weight:600}
.mx-line-name{font-size:11px;color:#fff;margin-bottom:3px}
.mx-line-bub{background:#fff;border-radius:4px 16px 16px 16px;overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.mx-line-bub .hd{background:var(--forest);color:#fff;padding:9px 12px;font-size:12px;display:flex;justify-content:space-between;gap:8px}
.mx-line-bub .hd b{color:var(--gold-bright);font-weight:500}
.mx-line-bub .bd{padding:11px 12px;display:grid;gap:6px}
.mx-line-bub .car{font-size:14.5px;font-weight:700;color:var(--ink)}
.mx-line-bub .price{font-family:var(--mono);font-size:15px;color:var(--gold-text);font-weight:500}
.mx-line-bub .why{font-size:11.5px;color:var(--muted);line-height:1.5}
.mx-line-bub .why em{font-style:normal;color:var(--pine);font-weight:500}
.mx-line-bub .ft{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--divider)}
.mx-line-bub .ft span{text-align:center;padding:9px 0;font-size:13px;color:#2e6bd1;font-weight:500}
.mx-line-bub .ft span+span{border-left:1px solid var(--divider)}

/* ---------- 4. 車況卡 ---------- */
.mx-cond{padding:18px;display:grid;gap:14px}
.mx-cond-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mx-cond-top h4{margin:0;font-family:var(--serif);font-size:17px;color:var(--ink);line-height:1.3}
.mx-cond-top .mx-num{font-size:17px;color:var(--gold-text);font-weight:500;white-space:nowrap}
.mx-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mx-ph{position:relative;aspect-ratio:4/3;border-radius:8px;background:var(--surface-deep);overflow:hidden;display:grid;place-items:center}
.mx-ph svg{width:62%;height:auto;color:var(--pine);opacity:.5}
.mx-ph span{position:absolute;left:5px;bottom:5px;font-size:10.5px;color:#fff;background:rgba(22,36,29,.72);border-radius:3px;padding:0 5px}
.mx-ph.extra{background:repeating-linear-gradient(135deg,#f6efdf 0 6px,#efe5cf 6px 12px)}
.mx-cond-rows{display:grid;gap:0;border-top:1px solid var(--divider)}
.mx-cond-rows div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--divider);font-size:12.5px}
.mx-cond-rows dt{color:var(--muted)}
.mx-cond-rows dd{margin:0;color:var(--ink);font-weight:500;text-align:right}
.mx-ok{color:var(--pine)}
.mx-tags{display:flex;flex-wrap:wrap;gap:5px}

/* 插畫版車況照 */
.mx-ph.toon{background:#f7f2e8;border:1px solid #e7ddc8;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center}
.mx-ph.toon img{width:94%;height:94%;min-width:0;min-height:0;object-fit:contain;position:relative;z-index:1}
.mx-ph.toon.cover img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.mx-ph.toon::after{display:none}
.mx-ph.toon span{z-index:3}
.mx-sprite{position:absolute;width:0;height:0;overflow:hidden}
.mx-sim{margin:-6px 0 0;font-size:11px;color:var(--muted);text-align:right}

/* ---------- 5. 購車前查核 ---------- */
.mx-check{padding:18px}
.mx-check-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.mx-check-head strong{font-family:var(--serif);font-size:16px;color:var(--ink)}
.mx-check-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--divider)}
.mx-check-ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700}
.mx-check-ic.gov{background:var(--forest);color:#fff}
.mx-check-ic.self{background:var(--surface-deep);color:var(--gold-text)}
.mx-check-ic.link{background:#e9eef6;color:#3d5a80}
.mx-check-row p{margin:0;font-size:13.5px;color:var(--ink);font-weight:500;line-height:1.35}
.mx-check-row p small{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
.mx-src{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;padding:2px 7px;border-radius:4px;white-space:nowrap}
.mx-src.gov{background:#e6efe9;color:var(--pine)}
.mx-src.self{background:#fbf3df;color:#8a6420}
.mx-src.link{background:#e9eef6;color:#3d5a80}
.mx-check-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:11.5px;color:var(--muted)}

/* ---------- 6. 事實評價 ---------- */
.mx-review{padding:18px;display:grid;gap:14px;max-width:560px}
.mx-review-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mx-meter{display:grid;gap:5px}
.mx-meter-lb{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text)}
.mx-meter-lb b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.mx-meter-bar{height:6px;border-radius:3px;background:var(--surface-deep);overflow:hidden}
.mx-meter-bar i{display:block;height:100%;border-radius:3px;background:var(--pine)}
.mx-review-foot{font-size:11.5px;color:var(--muted);border-top:1px solid var(--divider);padding-top:10px}

/* ---------- 7. 我的車庫 ---------- */
.mx-garage{padding:18px;display:grid;gap:14px}
.mx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mx-kpi{background:var(--cream);border-radius:10px;padding:10px 12px}
.mx-kpi small{display:block;font-size:11px;color:var(--muted)}
.mx-kpi b{font-family:var(--display);font-weight:600;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.mx-kpi b em{font-style:normal;font-size:12px;font-family:var(--body);color:var(--muted);margin-left:2px}
.mx-gtable{width:100%;border-collapse:collapse;font-size:12.5px}
.mx-gtable th{font-weight:500;color:var(--muted);text-align:left;font-size:11px;padding:0 0 6px}
.mx-gtable th:not(:first-child),.mx-gtable td:not(:first-child){text-align:right}
.mx-gtable td{padding:8px 0;border-top:1px solid var(--divider);color:var(--ink);font-variant-numeric:tabular-nums}
.mx-gtable td:first-child{font-weight:500}
.mx-days{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.mx-days i{display:inline-block;height:5px;border-radius:3px;background:var(--mint)}
.mx-days.old i{background:var(--gold)}
.mx-gtable .pos{color:var(--pine);font-weight:500}
.mx-garage-wrap{overflow-x:auto}

/* ---------- 8. 交易憑證（即將推出） ---------- */
.mx-cert{position:relative;max-width:560px;padding:22px 22px 20px;background:#fffdf8;border:1px solid var(--border-strong);border-radius:14px;overflow:hidden}
.mx-cert::before{content:"";position:absolute;inset:8px;border:1px solid var(--border);border-radius:9px;pointer-events:none}
.mx-cert-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:relative}
.mx-cert-hd h4{margin:0;font-family:var(--serif);font-size:17px;color:var(--ink)}
.mx-cert-hd small{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.08em}
.mx-cert-body{position:relative;display:grid;gap:7px;margin-top:14px;margin-bottom:52px}
.mx-cert-body div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;border-bottom:1px dotted var(--border-strong);padding-bottom:6px}
.mx-cert-body dt{color:var(--muted)}
.mx-cert-body dd{margin:0;color:var(--ink);font-weight:500}
.mx-blur{filter:blur(4px);user-select:none}
.mx-stamp{position:absolute;right:18px;bottom:16px;transform:rotate(-8deg);border:2px solid var(--gold);color:var(--gold-text);font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.2em;padding:6px 12px;border-radius:6px;background:rgba(255,253,248,.85)}

/* ---------- 9. 代碼三層 ---------- */
.mx-layers{overflow-x:auto}
.mx-layers table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:13px;color:var(--on-forest)}
.mx-layers th{font-weight:500;text-align:center;padding:0 8px 12px;vertical-align:bottom}
.mx-layers th:first-child{text-align:left}
.mx-layers th b{display:block;font-family:var(--serif);font-weight:600;font-size:15px;color:#fff}
.mx-layers th small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--gold-bright);margin-bottom:4px}
.mx-layers th span{display:block;font-size:11.5px;color:var(--on-forest-3);font-weight:400}
.mx-layers td{padding:12px 8px;border-top:1px solid var(--panel-dark-line);text-align:center}
.mx-layers td:first-child{text-align:left;color:#fff}
.mx-layers td:first-child small{display:block;color:var(--on-forest-3);font-size:11.5px}
.mx-layers col.c1{background:rgba(250,244,232,.03)}
.mx-layers col.c2{background:rgba(250,244,232,.06)}
.mx-layers col.c3{background:rgba(199,154,60,.10)}
.mx-see{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.mx-see::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--mint)}
.mx-see.gold::before{background:var(--gold-bright)}
.mx-lock{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--on-forest-3)}
.mx-lock svg{width:12px;height:12px}
.mx-layers-note{margin-top:12px;font-size:12px;color:var(--on-forest-3)}

/* ---------- 10. 等級徽章 ---------- */
.mx-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.mx-badge{padding:20px;display:grid;gap:12px;justify-items:start}
.mx-badge svg{width:64px;height:64px}
.mx-badge h4{margin:0;font-family:var(--serif);font-size:18px;color:var(--ink)}
.mx-badge p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}
.mx-badge .mx-codeline{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.mx-badge.top{background:var(--forest);border-color:var(--forest)}
.mx-badge.top h4{color:#fff}
.mx-badge.top p{color:var(--on-forest-3)}
.mx-lv{font-size:11px;font-weight:500;border-radius:4px;padding:1px 6px}
.mx-lv.pick{background:#e6efe9;color:var(--pine)}
.mx-lv.flag{background:var(--gold);color:#fff}
.mx-lv.cert{background:var(--surface-deep);color:var(--gold-text)}
.mx-lv.sel{background:var(--divider);color:var(--muted)}
.mx-lv.ally{background:var(--forest);color:var(--gold-bright)}
@media (min-width:900px){.mx-badges.mx-badges-6{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- 11. 市場洞察圖表 ---------- */
.mx-chart{padding:18px;display:grid;gap:10px;align-content:start}
.mx-chart-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.mx-chart-hd strong{font-family:var(--serif);font-size:15.5px;color:var(--ink)}
.mx-chart-hd .mx-label{white-space:nowrap}
.mx-chart svg{width:100%;height:auto;display:block;overflow:visible}
.mx-chart .ax{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.mx-chart .grid{stroke:var(--divider);stroke-width:1}
.mx-chart .band{fill:var(--mint);fill-opacity:.45}
.mx-chart .line{fill:none;stroke:var(--forest);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mx-chart .end{fill:var(--gold);stroke:#fff;stroke-width:2}
.mx-chart .endlb{font-family:var(--mono);font-size:11px;fill:var(--ink);font-weight:500}
.mx-chart .xh{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.mx-chart .hit{fill:transparent;cursor:crosshair}
.mx-chart-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--muted)}
.mx-chart-key span{display:inline-flex;align-items:center;gap:6px}
.mx-chart-key i{display:inline-block;width:14px;height:8px;border-radius:2px;background:var(--mint)}
.mx-chart-key i.ln{height:2px;background:var(--forest)}
.mx-tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:11.5px;line-height:1.45;padding:6px 9px;border-radius:6px;white-space:nowrap;transform:translate(-50%,-110%);opacity:0;transition:opacity .12s}
.mx-tip b{font-family:var(--mono);font-weight:500;color:var(--gold-bright)}
.mx-chart-box{position:relative}

/* ---------- 12. 我的經營週報 ---------- */
.mx-week{padding:18px;display:grid;gap:14px}
.mx-week-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mx-week-hd strong{font-family:var(--serif);font-size:16px;color:#fff}
.mx-week-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.mx-wk{border:1px solid var(--panel-dark-line);border-radius:10px;padding:10px 12px}
.mx-wk small{display:block;font-size:11px;color:var(--on-forest-3)}
.mx-wk b{font-family:var(--display);font-size:22px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.mx-wk b em{font-style:normal;font-family:var(--body);font-size:12px;color:var(--on-forest-3);margin-left:2px}
.mx-wk .delta{font-size:11px;color:var(--mint)}
.mx-wk .delta.down{color:var(--gold-bright)}
.mx-alert{display:flex;gap:10px;align-items:flex-start;background:rgba(199,154,60,.14);border:1px solid rgba(212,171,85,.4);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--on-forest)}
.mx-alert b{color:var(--gold-bright);font-weight:500}