/* ================= 功能示範動畫（通用元件） =================
   需搭配 mx-visuals.css（色彩變數、.mx-tag、.mx-code、.mx-pill…） */
.mxd{position:relative;width:100%;max-width:340px;margin-inline:auto;aspect-ratio:340/700;font-family:var(--body);color:var(--ink);box-sizing:border-box}
.mxd *,.mxd *::before,.mxd *::after{box-sizing:border-box}
.mxd .mxl-scale{position:absolute;left:0;top:0;width:340px;height:700px;transform-origin:0 0}
.mxd .mxl-phone{position:absolute;inset:0;background:#0f1512;border-radius:40px;padding:12px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.mxd .mxl-screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:var(--cream);font-size:12.5px;line-height:1.45}
.mxd .mxl-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:110px;height:24px;background:#0f1512;border-radius:0 0 14px 14px;z-index:9}
.mxd .mxl-tap{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(199,154,60,.35);border:2px solid var(--gold-bright);transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;z-index:8}
.mxd .mxl-cap{position:absolute;left:0;right:0;top:100%;margin-top:14px;text-align:center;font-family:var(--serif);font-size:15px;color:#fff;opacity:0}
.mxd .mxl-cap small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14px;letter-spacing:.14em;color:var(--gold-bright);margin-bottom:2px}
/* reveal: 有 .r 的元素一開始隱藏，由動畫步驟淡入 */
.mxd .r{opacity:0}
.mxd .v{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;opacity:0}
.mxd .v.dark{background:var(--forest);color:var(--on-forest)}
.mxd .v.line{background:#8aa9d6;grid-template-rows:auto 1fr}
.mxd .top{padding:34px 16px 8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.mxd .top b{font-family:var(--serif);font-size:18px}
.mxd .top span{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.1em;white-space:nowrap}
.mxd .v.dark .top b{color:#fff}.mxd .v.dark .top span{color:var(--on-forest-3)}
.mxd .top .back{font-size:16px;color:var(--muted);margin-right:6px}
.mxd .body{position:relative;padding:4px 16px 12px;overflow:hidden;display:grid;gap:8px;align-content:start}
.mxd .foot{padding:8px 16px 18px}
.mxd .cta{background:var(--gold);color:#fff;text-align:center;border-radius:8px;padding:12px;font-weight:700;font-size:14px}
.mxd .cta.ghost{background:transparent;border:1.5px solid var(--border-strong);color:var(--muted)}
.mxd .cta.dim{position:static;inset:auto;z-index:auto;background:var(--gold);opacity:.35} /* .dim is also the screen scrim below; a dimmed button stays a button */
/* rows */
.mxd .row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:10px;padding:9px 10px}
.mxd .row.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(199,154,60,.18)}
.mxd .row .th{width:56px;height:42px;border-radius:6px;background:#f7f2e8;border:1px solid #e7ddc8;display:grid;place-items:center;overflow:hidden}
.mxd .row .th svg{width:92%;height:auto}
.mxd .row .t b{display:block;font-size:12.5px;color:var(--ink);line-height:1.3}
.mxd .row .t small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.mxd .row .rt{text-align:right;font-family:var(--mono);font-size:12px;color:var(--gold-text);font-weight:500;white-space:nowrap}
.mxd .row .rt small{display:block;font-family:var(--body);font-size:10px;color:var(--muted);font-weight:400}
.mxd .row.no-th{grid-template-columns:1fr auto}
.mxd .v.dark .row{background:var(--panel-dark);border-color:var(--panel-dark-line)}
.mxd .v.dark .row .t b{color:#fff}.mxd .v.dark .row .t small{color:var(--on-forest-3)}.mxd .v.dark .row .rt{color:var(--gold-bright)}
/* chips / segmented */
.mxd .chips{display:flex;gap:6px;flex-wrap:wrap}
.mxd .chip{font-size:11px;border:1px solid var(--border-strong);border-radius:999px;padding:3px 10px;color:var(--muted);background:#fff}
.mxd .chip.on{background:var(--forest);border-color:var(--forest);color:#fff}
.mxd .seg{display:grid;grid-auto-flow:column;background:var(--surface-deep);border-radius:8px;padding:3px;font-size:11.5px}
.mxd .seg span{text-align:center;padding:5px 0;border-radius:6px;color:var(--muted)}
.mxd .seg span.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mxd .v.dark .seg{background:rgba(0,0,0,.25)}.mxd .v.dark .seg span{color:var(--on-forest-3)}.mxd .v.dark .seg span.on{background:var(--cream);color:var(--ink)}
/* search */
.mxd .search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--muted)}
.mxd .search b{font-weight:500;color:var(--ink)}
.mxd .search b::after{content:"";display:inline-block;width:1.5px;height:13px;background:var(--gold);margin-left:2px;vertical-align:-2px}
.mxd .search.done b::after{display:none}
/* fields */
.mxd .fields{display:grid;gap:6px}
.mxd .field{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px}
.mxd .field small{color:var(--muted)}
.mxd .field b{font-weight:500;color:var(--ink);text-align:right}
.mxd .field b:empty::after{content:"—";color:var(--border-strong)}
.mxd .field.big{display:grid;gap:2px;border:1.5px solid var(--gold);border-radius:10px;padding:10px 12px}
.mxd .field.big b{font-family:var(--mono);font-size:24px;text-align:left;min-height:30px}
.mxd .field.big b::after{content:"";display:inline-block;width:2px;height:22px;background:var(--gold);margin-left:3px;vertical-align:-3px}
.mxd .field.big.done b::after{display:none}
.mxd .field.big b:empty::after{content:"";display:inline-block}
.mxd .hint{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--muted)}
.mxd .hint b{color:var(--gold-text);font-weight:500}
/* detail */
.mxd .hero-th{position:relative;height:120px;border-radius:12px;overflow:hidden;background:#f7f2e8;border:1px solid #e7ddc8;display:grid;place-items:center}
.mxd .hero-th svg{width:88%;height:auto}
.mxd .hero-th span{position:absolute;left:8px;bottom:6px;font-size:10px;background:rgba(22,36,29,.72);color:#fff;border-radius:3px;padding:0 5px}
.mxd .hero-th .blur{position:absolute;inset:0;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background:rgba(250,244,232,.15);mask:radial-gradient(ellipse 50% 55% at 50% 60%,transparent 55%,#000 75%);-webkit-mask:radial-gradient(ellipse 50% 55% at 50% 60%,transparent 55%,#000 75%)}
.mxd h4{margin:0;font-family:var(--serif);font-size:16px;color:var(--ink);line-height:1.3}
.mxd .v.dark h4{color:#fff}
.mxd .price{font-family:var(--mono);font-size:18px;color:var(--gold-text);font-weight:500}
.mxd .v.dark .price{color:var(--gold-bright)}
.mxd .tags{display:flex;flex-wrap:wrap;gap:4px}
.mxd .tags .mx-tag{font-size:10px;padding:0 5px}
.mxd .who{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:10.5px;color:var(--muted)}
.mxd .who .mx-code{font-size:10px;padding:0 5px}
.mxd .v.dark .who{color:var(--on-forest-3)}
.mxd .timer{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px}
.mxd .timer::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--error)}
/* sheet */
.mxd .sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;padding:14px 16px 20px;display:grid;gap:10px;box-shadow:0 -10px 30px rgba(0,0,0,.18);z-index:7;transform:translateY(100%)}
.mxd .sheet::before{content:"";width:36px;height:4px;border-radius:2px;background:var(--border-strong);justify-self:center}
.mxd .sheet h5{margin:0;font-family:var(--serif);font-size:15px}
.mxd .dim{position:absolute;inset:0;background:rgba(22,36,29,.35);z-index:6;opacity:0}
/* toast */
.mxd .toast{position:absolute;left:10px;right:10px;top:30px;z-index:8;background:#fff;border-radius:12px;padding:9px 12px;display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:11.5px;color:var(--ink)}
.mxd .toast i{width:28px;height:28px;border-radius:8px;background:var(--forest);display:grid;place-items:center;color:var(--gold-bright);font-family:var(--serif);font-style:normal;font-weight:700}
.mxd .toast b{display:block;font-size:12px}
.mxd .toast small{color:var(--muted)}
.mxd .toast.ok{background:var(--forest);color:#fff}.mxd .toast.ok small{color:var(--on-forest-2)}.mxd .toast.ok i{background:var(--gold);color:#fff}
/* kpi */
.mxd .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mxd .kpis.two{grid-template-columns:1fr 1fr}
.mxd .kpi{background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.mxd .kpi small{display:block;font-size:10px;color:var(--muted)}
.mxd .kpi b{font-family:var(--display,var(--serif));font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.mxd .kpi b em{font-style:normal;font-family:var(--body);font-size:11px;color:var(--muted);margin-left:2px}
.mxd .kpi .d{font-size:10px;color:var(--pine)}.mxd .kpi .d.down{color:var(--gold-text)}
.mxd .v.dark .kpi{background:var(--panel-dark);border-color:var(--panel-dark-line)}.mxd .v.dark .kpi b{color:#fff}.mxd .v.dark .kpi small{color:var(--on-forest-3)}.mxd .v.dark .kpi .d{color:var(--mint)}
/* range bars */
.mxd .rng{display:grid;gap:4px}
.mxd .rng b{font-size:12px;color:var(--ink)}
.mxd .rng .bar{position:relative;height:12px;border-radius:4px;background:var(--surface-deep)}
.mxd .rng .bar i{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--mint)}
.mxd .rng .bar i.deal{background:var(--forest)}
.mxd .rng .bar em{position:absolute;top:-4px;width:2px;height:20px;background:var(--gold);border-radius:1px}
.mxd .rng .cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--muted)}
/* chart */
.mxd .chart{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 10px 6px}
.mxd .chart b{display:block;font-size:11.5px;color:var(--ink);margin-bottom:4px}
.mxd .chart svg{width:100%;height:auto;display:block;overflow:visible}
.mxd .chart .ax{font-family:var(--mono);font-size:8px;fill:var(--muted)}
.mxd .chart .grid{stroke:var(--divider)}
.mxd .chart .band{fill:var(--mint);fill-opacity:.45}
.mxd .chart .line{fill:none;stroke:var(--forest);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mxd .chart .end{fill:var(--gold);stroke:#fff;stroke-width:2}
.mxd .chart .lb{font-family:var(--mono);font-size:9px;fill:var(--ink);font-weight:500}
.mxd .chart .bar{fill:var(--forest)}
.mxd .chart .bar.lo{fill:var(--mint)}
/* progress */
.mxd .prog{display:grid;gap:3px}
.mxd .prog .l{display:flex;justify-content:space-between;font-size:11px}
.mxd .prog .l b{font-family:var(--mono);font-weight:500}
.mxd .prog .b{height:6px;border-radius:3px;background:var(--surface-deep);overflow:hidden}
.mxd .prog .b i{display:block;height:100%;width:0;border-radius:3px;background:var(--pine)}
.mxd .prog .b i.g{background:var(--gold)}
/* decl / checks */
.mxd .decl{display:grid;gap:6px}
.mxd .decl div{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px}
.mxd .decl i{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border-strong);display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff}
.mxd .decl div.yes i{background:var(--pine);border-color:var(--pine)}
.mxd .decl div.warn i{background:#c79a3c;border-color:#c79a3c}
.mxd .decl small{margin-left:auto;font-size:10px;color:var(--muted)}
.mxd .decl div.pick{border-color:var(--gold);background:#fbf3df}
/* level */
.mxd .lvcard{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;background:var(--forest);color:#fff;border-radius:12px;padding:12px 14px}
.mxd .lvcard svg{width:56px;height:56px}
.mxd .lvcard b{font-family:var(--serif);font-size:16px;display:block}
.mxd .lvcard small{font-size:10.5px;color:var(--on-forest-3)}
.mxd .lvcard .badge{font-family:var(--mono);font-size:9px;color:var(--gold-bright);border:1px solid var(--gold);border-radius:3px;padding:0 5px;margin-left:6px}
/* timeline (求車 分發) */
.mxd .tl{display:grid;gap:0}
.mxd .tl div{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;padding:6px 0;font-size:11.5px}
.mxd .tl i{width:10px;height:10px;border-radius:50%;border:2px solid var(--border-strong);background:#fff;justify-self:center}
.mxd .tl div.on i{background:var(--gold);border-color:var(--gold)}
.mxd .tl small{font-family:var(--mono);font-size:10px;color:var(--muted)}
.mxd .tl div.on small{color:var(--gold-text)}
/* done check */
.mxd .check{width:56px;height:56px;border-radius:50%;background:var(--gold);display:grid;place-items:center;margin:10px auto 0}
.mxd .check svg{width:30px;height:30px}
.mxd .center{text-align:center}
.mxd p.note{margin:0;font-size:11px;color:var(--muted)}
.mxd .v.dark p.note{color:var(--on-forest-2)}
.mxd .reveal{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px;border:1px solid var(--panel-dark-line);border-radius:10px}
.mxd .reveal .old{font-family:var(--mono);color:var(--on-forest-3);text-decoration:line-through;text-decoration-color:var(--gold)}
.mxd .reveal .new{font-family:var(--serif);font-size:15px;color:#fff}
.mxd .reveal .new small{display:block;font-family:var(--mono);font-size:10px;color:var(--gold-bright);text-decoration:none}
/* LINE */
.mxd .linebar{height:64px;background:#fff;display:flex;align-items:flex-end;padding:0 16px 10px;gap:10px;font-size:14px;font-weight:700;color:var(--ink)}
.mxd .linebar i{width:26px;height:26px;border-radius:50%;background:var(--forest);display:grid;place-items:center;color:var(--gold-bright);font-family:var(--serif);font-size:13px;font-style:normal}
.mxd .chat{padding:14px;display:grid;gap:10px;align-content:start}
.mxd .bub{max-width:86%;background:#fff;border-radius:4px 14px 14px 14px;overflow:hidden;font-size:12px;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.mxd .bub .hd{background:var(--forest);color:#fff;padding:7px 10px;font-size:11px;display:flex;justify-content:space-between}
.mxd .bub .hd b{color:var(--gold-bright);font-weight:500}
.mxd .bub .bd{padding:9px 10px;display:grid;gap:4px}
.mxd .bub .bd b{font-size:13px}
.mxd .bub .ft{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--divider)}
.mxd .bub .ft span{text-align:center;padding:7px 0;font-size:12px;color:#2e6bd1;font-weight:500}
.mxd .bub .ft span+span{border-left:1px solid var(--divider)}
.mxd .bub.plain{padding:9px 12px}
@media (prefers-reduced-motion:reduce){.mxd .mxl-tap{display:none}}
/* 交車掃碼 (added on the site, 2026-09-28): the sample QR image */
.mxd .qrbox{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;display:grid;place-items:center}
.mxd .qrbox svg{width:168px;height:168px;display:block}
.mxd .qrbox path{fill:#16241d}