/* ═══════════════════════════════════════════════════════════════
   ZenStock Live — 像素遊戲化主題(8-bit / 暗底＋琥珀金)
   ───────────────────────────────────────────────────────────────
   門控:只在 <body data-px> 生效 —— 2026-08 起**全站統一**,直接寫在 _Layout.cshtml 的
   <body data-px="1">(不再由 app.js 依頁面掛/卸,免得換頁閃一下非像素主題)。
   要暫時關掉整套像素風,把那個屬性拿掉即可(app.css 的暗色終端主題會自己接手)。

   核心手法 = 直接覆寫 --zs-* token(不是另寫一套 class):
     app.js 內大量 inline style 寫 var(--zs-surface-2) 之類,
     token 一換,那些 inline 也自動變像素配色;--zs-radius:0 則一次
     殺掉全站圓角。故既有 .card/.btn/.badge 在像素頁自動換皮,
     只有「新的遊戲化元件」才需要新 class。

   字體(自帶,無 CDN):
     Cubic 11(俐方體11號, OFL, 391KB)  → 繁中+拉丁,11px 點陣設計
     Press Start 2P(latin subset 12KB) → 只給英數標題/標籤點綴
   ⚠點陣字體必須用「設計尺寸的整數倍」才不糊:
     Cubic 11 → 11 / 22 / 33px;Press Start 2P → 8 / 16 / 24px。
     別寫 12px、14px、15px 這種非整數倍。
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Cubic 11';
  src: url('../fonts/Cubic_11.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/PressStart2P-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

body[data-px] {
  /* ── 覆寫品牌 token(8-bit 化:更飽和、更高對比)───────────── */
  --zs-bg: #0b0b14;
  --zs-surface: #191a2e;
  --zs-surface-2: #2a2c4d;
  --zs-line: #545a91;
  --zs-line-soft: #33375e;
  --zs-text: #f4f4ea;
  --zs-text-dim: #b9bcd8;
  --zs-text-faint: #7b80ab;
  --zs-accent: #ffc94a;                 /* 琥珀金(品牌色,8-bit 加亮) */
  --zs-accent-soft: #ffe08a;
  --zs-accent-dim: #a8791f;
  --zs-up: #f0424a;                     /* 台股慣例:漲紅 */
  --zs-down: #3ce07d;                   /* 跌綠 */
  --zs-radius: 0;                       /* ← 一次消滅全站圓角 */
  --zs-shadow: 4px 4px 0 #05050c;
  --zs-glow: 0 0 0 2px #ffc94a;
  --zs-mono: 'Press Start 2P', 'Cubic 11', ui-monospace, monospace;

  /* ── 像素專屬 token ─────────────────────────────────────── */
  --px-ink: #1a1206;                    /* 壓在琥珀金上的深字色 */
  --px-shadow: 4px 4px 0 #05050c;
  --px-shadow-sm: 3px 3px 0 #05050c;
  --px-bevel: inset 2px 2px 0 rgba(255,255,255,.13), inset -2px -2px 0 rgba(0,0,0,.42);
  --px-hp-hi: #3ce07d;
  --px-hp-mid: #ffa23a;
  --px-hp-lo: #ff3b47;
  --px-cyan: #46d9e0;
  --px-violet: #b07cff;
}

/* ── 底層:字體、像素網格底、掃描線 ─────────────────────────── */
body[data-px] {
  font-family: 'Cubic 11', 'Press Start 2P', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  font-size: 11px;
  line-height: 22px;
  letter-spacing: 0;
  -webkit-font-smoothing: none;          /* 點陣字關掉抗鋸齒才銳利 */
  -moz-osx-font-smoothing: unset;
  text-rendering: geometricPrecision;
  background:
    /* 4px 棋盤點陣底(dither),取代原本柔和 radial */
    repeating-linear-gradient(0deg, rgba(84,90,145,.055) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(84,90,145,.055) 0 1px, transparent 1px 4px),
    radial-gradient(900px 460px at 50% -14%, rgba(255,201,74,.07), transparent 60%),
    var(--zs-bg);
}
/* CRT 掃描線 + 邊角壓暗;蓋在最上層但不吃點擊 */
body[data-px]::after {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 66%, rgba(0,0,0,.30) 100%);
  mix-blend-mode: multiply;
}
body[data-px] img, body[data-px] svg { image-rendering: pixelated; }

/* 像素風不該有任何圓角。app.js 有很多 inline style 寫死 border-radius(10px/12px…),
   CSS 一般規則蓋不過 inline,故這裡用 !important 一次掃乾淨——這是刻意的,不是偷懶。 */
body[data-px] .wrap *, body[data-px] header.topbar *,
body[data-px] .overlay *, body[data-px] .wrap, body[data-px] .overlay { border-radius: 0 !important; }

/* 標題/強調字一律不要細字重(點陣字沒有粗細,靠色與框做層級) */
body[data-px] h1, body[data-px] h2, body[data-px] h3,
body[data-px] strong, body[data-px] b { font-weight: 400; }
body[data-px] h2, body[data-px] h3 { font-size: 22px; line-height: 33px; margin: 0 0 11px; }

/* 英數點綴字(Press Start 2P;只用 8/16/24px)*/
body[data-px] .px-en { font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: .06em; }
body[data-px] .px-en.lg { font-size: 16px; }
body[data-px] .px-en.xl { font-size: 24px; }

/* ── 既有元件換皮 ─────────────────────────────────────────── */

/* 卡片/面板:硬邊 + 斜角浮雕 + 硬投影 */
body[data-px] .card,
body[data-px] .chart-card,
body[data-px] .kpi,
body[data-px] .pending-banner,
body[data-px] .modal,
body[data-px] .px-panel {
  border: 2px solid var(--zs-line);
  border-radius: 0;
  background: var(--zs-surface);
  box-shadow: var(--px-shadow), var(--px-bevel);
  padding: 11px;
}
body[data-px] .card.click { transition: none; }
body[data-px] .card.click:hover { transform: none; border-color: var(--zs-accent); box-shadow: var(--px-shadow), var(--px-bevel); }
body[data-px] .card.click:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #000, var(--px-bevel); }

/* 按鈕:按下去真的下沉(位移 + 收掉投影)*/
body[data-px] .btn {
  border: 2px solid var(--zs-line); border-radius: 0;
  background: var(--zs-surface-2); color: var(--zs-text);
  font-family: inherit; font-size: 11px; font-weight: 400; line-height: 22px;
  padding: 5px 11px; box-shadow: var(--px-shadow-sm), var(--px-bevel);
  transition: none; text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
body[data-px] .btn:hover { background: #34376a; border-color: var(--zs-accent); }
body[data-px] .btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: var(--px-bevel); }
body[data-px] .btn.primary {
  background: var(--zs-accent); border-color: var(--zs-accent-soft); color: var(--px-ink);
  text-shadow: 1px 1px 0 rgba(255,255,255,.35);
}
body[data-px] .btn.primary:hover { background: var(--zs-accent-soft); filter: none; }
body[data-px] .btn.sell { background: var(--zs-down); border-color: #9dffcb; color: #04301c; }
body[data-px] .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--zs-text-dim); }
body[data-px] .btn.ghost:hover { background: var(--zs-surface-2); border-color: var(--zs-line); color: var(--zs-text); }
body[data-px] .btn:disabled { filter: grayscale(.7); }

/* 徽章:方角小標籤 */
body[data-px] .badge {
  border-radius: 0; font-size: 11px; font-weight: 400; line-height: 17px;
  padding: 0 6px; border: 2px solid currentColor; background: transparent;
}
body[data-px] .badge.buy { color: var(--zs-up); }
body[data-px] .badge.sell { color: var(--zs-down); }
body[data-px] .badge.accent { color: var(--zs-accent); }
body[data-px] .badge.st { color: var(--zs-text-faint); }

/* topbar:方框 HUD 條 */
body[data-px] header.topbar {
  background: var(--zs-surface); backdrop-filter: none;
  border: 0; border-bottom: 2px solid var(--zs-line);
  box-shadow: 0 4px 0 #05050c; padding: 8px 11px; margin-bottom: 15px;
}
body[data-px] header.topbar .brand {
  font-family: 'Press Start 2P', monospace; font-size: 16px; font-weight: 400;
  color: var(--zs-accent); text-shadow: 2px 2px 0 #05050c; letter-spacing: 0;
}
body[data-px] header.topbar .brand small { font-family: 'Cubic 11', sans-serif; font-size: 11px; }
body[data-px] .userchip { font-size: 11px; }
/* ⚠手機上 topbar 那排圖示鈕(⚙❔🔊🐕🔔+登出)會撐出**橫向捲動**:
   app.css 的手機版把 .tb-btn 縮到 padding 6px 8px,但 `body[data-px] .btn`(0-2-1)特異度比
   `.userchip .tb-btn`(0-2-0)高 → 縮不下去,6 顆鈕在 375px 寬硬是超出 18px。
   這在像素風全站化之前就存在(首頁本來就是像素頁),只是現在每一頁都看得到 → 一併修掉。
   ⚠改這裡要回頭量 documentElement.scrollWidth == clientWidth,別只看「好像沒超出」。 */
@media (max-width: 560px) {
  body[data-px] .userchip { gap: 1px; }
  body[data-px] .userchip .tb-btn { padding: 5px 6px; font-size: 16px; }
  body[data-px] header.topbar { padding: 8px 8px; }
}

/* 數字/統計:等寬點陣 */
body[data-px] .stat .k, body[data-px] .kpi .k {
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  color: var(--zs-text-faint); letter-spacing: .04em; text-transform: uppercase;
}
body[data-px] .stat .v, body[data-px] .kpi .v, body[data-px] .plan-eq, body[data-px] .plan-ret,
body[data-px] .mono, body[data-px] .px-num {
  font-family: 'Cubic 11', monospace; letter-spacing: 0; text-shadow: 2px 2px 0 #05050c;
}
body[data-px] .stat .v, body[data-px] .kpi .v { font-size: 22px; line-height: 26px; font-weight: 400; }
body[data-px] .kpi .v.sm, body[data-px] .stat .v.sm { font-size: 11px; }
body[data-px] .kpi { padding: 8px 11px; }
body[data-px] .kpi::before { width: 4px; box-shadow: none; opacity: 1; }

/* 區塊標題:▚ 前綴 + 英數副標 */
body[data-px] .section-title {
  font-family: 'Press Start 2P', monospace; font-size: 8px; font-weight: 400;
  color: var(--zs-accent); letter-spacing: .08em; margin: 22px 0 8px;
  border-bottom: 2px solid var(--zs-line-soft); padding-bottom: 5px;
}
body[data-px] .section-title::before { content: "\25AA\25AA "; color: var(--zs-accent-dim); }
body[data-px] .empty, body[data-px] .spinner { color: var(--zs-text-faint); font-size: 11px; }
body[data-px] hr.soft { border-top: 2px dashed var(--zs-line-soft); }
body[data-px] .faint, body[data-px] .muted { font-size: 11px; line-height: 18px; }

/* 表單 */
body[data-px] input.inp, body[data-px] select.sel {
  border: 2px solid var(--zs-line); border-radius: 0; background: #0e0f1c;
  font-family: inherit; font-size: 11px; box-shadow: var(--px-bevel);
}
body[data-px] input.inp:focus, body[data-px] select.sel:focus { outline: 2px solid var(--zs-accent); border-color: var(--zs-accent); }

/* Modal:像素視窗 + 開窗動畫 */
body[data-px] .overlay { background: rgba(5,5,12,.78); backdrop-filter: none; }
body[data-px].px-anim .modal { animation: px-open .12s steps(3) 1; }
body[data-px] .modal h3 { font-size: 22px; color: var(--zs-accent); text-shadow: 2px 2px 0 #05050c; }
@keyframes px-open { from { transform: scale(.86); opacity: .4; } to { transform: scale(1); opacity: 1; } }

/* 進度/報酬條:切成一格一格(像素段) */
body[data-px] .retbar, body[data-px] .bartrack, body[data-px] .bt-prog {
  border: 2px solid var(--zs-line); border-radius: 0; background: #0e0f1c;
  height: 12px; box-shadow: var(--px-bevel); overflow: hidden;
}
body[data-px] .retbar .f, body[data-px] .barfill, body[data-px] .bt-prog i {
  border-radius: 0; box-shadow: none; position: relative;
  /* 用 4px 透明條紋切出「分段」感 */
  mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
}

/* ══════════════════════════════════════════════════════════════
   新元件:遊戲化 HUD
   ══════════════════════════════════════════════════════════════ */

/* ── 玩家/角色卡 ─────────────────────────────────────────── */
body[data-px] .px-hud {
  display: flex; gap: 11px; align-items: flex-start;
  border: 2px solid var(--zs-accent); background: var(--zs-surface);
  box-shadow: var(--px-shadow), var(--px-bevel); padding: 11px; margin-bottom: 11px;
  position: relative;
}
body[data-px] .px-hud .px-av { flex: none; }
body[data-px] .px-hud-main { flex: 1; min-width: 0; }
body[data-px] .px-lv {
  display: inline-block; font-family: 'Press Start 2P', monospace; font-size: 16px;
  color: var(--px-ink); background: var(--zs-accent); padding: 3px 6px;
  box-shadow: 3px 3px 0 #05050c; margin-right: 6px; vertical-align: 2px;
}
body[data-px] .px-title { font-size: 11px; color: var(--zs-text-dim); }
body[data-px] .px-hud-eq { font-size: 22px; line-height: 28px; text-shadow: 2px 2px 0 #05050c; }

/* 像素頭像外框 */
body[data-px] .px-av {
  width: 48px; height: 48px; border: 2px solid var(--zs-line);
  background: #0e0f1c; box-shadow: var(--px-bevel); display: block;
}
body[data-px] .px-av.sm { width: 33px; height: 33px; }

/* ── EXP / HP 條(共用 .px-bar)────────────────────────────── */
body[data-px] .px-bar {
  height: 12px; border: 2px solid var(--zs-line); background: #0e0f1c;
  box-shadow: var(--px-bevel); overflow: hidden; position: relative;
}
/* ⚠填充動畫用 scaleX 的 CSS animation,**且刻意不加 fill-mode**:
   寬度本身是 inline style(正確值),動畫只是「長出來」的過場。
   動畫沒跑(背景分頁、瀏覽器不合成畫面、使用者關動畫)時,條子自然停在正確寬度——
   不像「先歸零再用 rAF 補回去」那種寫法,rAF 一不觸發就永遠是空條。 */
body[data-px] .px-bar > i {
  display: block; height: 100%;
  background: var(--zs-accent);
  transform-origin: left center;
  mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
}
body[data-px].px-anim .px-bar > i { animation: px-fill .5s steps(12) 1; }
@keyframes px-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
body[data-px] .px-bar.hp > i.hi { background: var(--px-hp-hi); }
body[data-px] .px-bar.hp > i.mid { background: var(--px-hp-mid); }
body[data-px] .px-bar.hp > i.lo { background: var(--px-hp-lo); animation: px-blink .8s steps(2) infinite; }
body[data-px] .px-bar.thin { height: 8px; }
body[data-px] .px-barline { display: flex; align-items: center; gap: 8px; }
body[data-px] .px-barline .px-bar { flex: 1; }
body[data-px] .px-barline .px-blab {
  font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--zs-text-faint);
  flex: none; width: 28px;
}
body[data-px] .px-barline .px-bval { font-size: 11px; flex: none; color: var(--zs-text-dim); }
@keyframes px-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── 狀態小格(GOLD / 隊伍 / 連勝)───────────────────────── */
body[data-px] .px-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 11px; }
body[data-px] .px-chip {
  border: 2px solid var(--zs-line); background: var(--zs-surface); padding: 6px 8px;
  box-shadow: var(--px-shadow-sm), var(--px-bevel); text-align: center;
}
body[data-px] .px-chip .px-ck {
  font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--zs-text-faint);
  display: block; margin-bottom: 3px;
}
body[data-px] .px-chip .px-cv { font-size: 22px; line-height: 24px; text-shadow: 2px 2px 0 #05050c; }
body[data-px] .px-chip .px-cv.sm { font-size: 11px; line-height: 24px; }
body[data-px] .px-chip.hot { border-color: var(--zs-accent); }
body[data-px] .px-chip.hot .px-cv { color: var(--zs-accent); }

/* 大動作鍵(執行回合):脈動邊框吸引點擊。
   ⚠字體用 Cubic 11 22px:標籤含中文,Press Start 2P 沒有中文字符會 fallback 成非整數倍而糊掉。 */
body[data-px] .px-act {
  width: 100%; font-family: inherit; font-size: 22px;
  padding: 8px 11px; line-height: 33px; margin-bottom: 11px;
}
body[data-px] .px-act.live { animation: px-pulse 1.1s steps(2) infinite; }
@keyframes px-pulse { 0%,100% { border-color: var(--zs-accent-soft); } 50% { border-color: #fff6dd; } }

/* 區塊標題裡的中文副標:PS2P 沒有中文字符,得切回 Cubic 11 的整數倍尺寸 */
body[data-px] .section-title .px-zh {
  font-family: 'Cubic 11', sans-serif; font-size: 11px; letter-spacing: 0;
  color: var(--zs-text-dim); text-transform: none;
}

/* 權益分佈:像素堆疊條(取代甜甜圈)*/
body[data-px] .px-stack {
  display: flex; height: 16px; border: 2px solid var(--zs-line);
  background: #0e0f1c; box-shadow: var(--px-bevel); overflow: hidden;
}
body[data-px] .px-stack > span { height: 100%; box-shadow: inset -2px 0 0 #0b0b14; }
body[data-px] .legend .dot { border-radius: 0; box-shadow: none; width: 8px; height: 8px; }
body[data-px] .legend .lg { font-size: 11px; line-height: 18px; }
body[data-px] .legend .lg .pc { font-family: 'Cubic 11', monospace; font-weight: 400; }

/* 小號等級章(角色卡用)*/
body[data-px] .px-lv.sm {
  font-size: 8px; padding: 2px 4px; box-shadow: 2px 2px 0 #05050c;
  margin-right: 2px; vertical-align: 1px;
}

/* ── 成就徽章格 ──────────────────────────────────────────── */
body[data-px] .px-badges { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-px] .px-bg {
  border: 2px solid var(--zs-line-soft); background: #0e0f1c; color: var(--zs-text-faint);
  padding: 2px 7px; font-size: 11px; line-height: 18px; box-shadow: var(--px-bevel);
  cursor: help;
}
body[data-px] .px-bg.on {
  border-color: var(--zs-accent); color: var(--px-ink); background: var(--zs-accent);
  box-shadow: 2px 2px 0 #05050c, var(--px-bevel);
}
body[data-px].px-anim .px-bg.on.fresh { animation: px-pop .4s steps(4) 1; }
@keyframes px-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ── 角色卡(計畫 / 持倉)─────────────────────────────────── */
body[data-px] .px-unit {
  border: 2px solid var(--zs-line); background: var(--zs-surface);
  box-shadow: var(--px-shadow), var(--px-bevel); padding: 9px; margin-bottom: 9px;
  display: flex; gap: 9px; cursor: pointer; position: relative;
}
body[data-px] .px-unit:hover { border-color: var(--zs-accent); }
body[data-px] .px-unit:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #000, var(--px-bevel); }
body[data-px] .px-unit.danger { border-color: var(--px-hp-lo); }
body[data-px] .px-unit-main { flex: 1; min-width: 0; }
body[data-px] .px-unit-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
body[data-px] .px-unit-nm { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-px] .px-unit-nm b { color: var(--zs-text); }
body[data-px] .px-unit-pnl { flex: none; font-size: 22px; line-height: 24px; text-shadow: 2px 2px 0 #05050c; }
body[data-px] .px-unit-meta { font-size: 11px; color: var(--zs-text-faint); line-height: 18px; }
/* 持倉卡明細:標籤/值兩欄對齊(同交易紀錄的 .act-grid)。像素風字級小一階。 */
body[data-px] .hold-lab { font-family: 'Press Start 2P', monospace; font-size: 8px; }
body[data-px] .hold-val { font-family: 'Cubic 11', monospace; font-size: 11px; line-height: 17px; }
body[data-px] .px-unit-alert {
  font-size: 11px; color: var(--px-hp-lo); border: 2px solid var(--px-hp-lo);
  padding: 2px 6px; margin: 4px 0; animation: px-blink 1s steps(2) infinite;
}

/* ── 屬性表(RPG 風,但保留真實欄位名)───────────────────── */
body[data-px] .px-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
body[data-px] .px-st {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 4px 8px; border-bottom: 2px dotted var(--zs-line-soft);
}
body[data-px] .px-st .px-sk { font-size: 11px; color: var(--zs-text-faint); }
body[data-px] .px-st .px-sv { font-size: 11px; color: var(--zs-text); text-shadow: 1px 1px 0 #05050c; }

/* ── 像素階梯淨值圖 ─────────────────────────────────────── */
body[data-px] .px-chart { border: 2px solid var(--zs-line); background: #0e0f1c; box-shadow: var(--px-bevel); padding: 4px; }
body[data-px] .px-chart svg { display: block; width: 100%; }

/* ── 結算 / 升級 / 成就 全屏特效 ─────────────────────────── */
body[data-px] .px-flash {
  position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 11px; text-align: center;
  background: rgba(5,5,12,.86); padding: 22px; cursor: pointer;
}
body[data-px] .px-flash .px-big {
  font-family: 'Press Start 2P', monospace; font-size: 24px; color: var(--zs-accent);
  text-shadow: 4px 4px 0 #05050c;
}
body[data-px].px-anim .px-flash .px-big { animation: px-pop .5s steps(5) 1; }
body[data-px] .px-flash .px-sub { font-size: 11px; color: var(--zs-text-dim); }
body[data-px] .px-toast {
  /* bottom 原本 78px 是要讓開底部導覽列;那一列已移除 → 貼回畫面下緣(留安全區) */
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0)); transform: translateX(-50%); z-index: 9400;
  border: 2px solid var(--zs-accent); background: var(--zs-surface); color: var(--zs-text);
  box-shadow: var(--px-shadow), var(--px-bevel); padding: 8px 11px; font-size: 11px;
  max-width: calc(100vw - 32px);
}
body[data-px].px-anim .px-toast { animation: px-open .15s steps(3) 1; }
body[data-px] .px-toast .px-en { color: var(--zs-accent); display: block; margin-bottom: 2px; }

/* 進場動畫:卡片逐張滑入(⚠預設可見,動畫只是加分——動畫失效也不能整頁空白/半透明)*/
body[data-px].px-anim .px-in { animation: px-slide .18s steps(3) 1; }
@keyframes px-slide { from { transform: translateY(6px); opacity: .2; } to { transform: translateY(0); opacity: 1; } }

/* ══════════════════════════════════════════════════════════════
   電子寵物房間(首頁最上面那格;家具與狗都由 pixel-pet.js 畫進來)
   ══════════════════════════════════════════════════════════════ */
/* 房間背景 = 像素客廳圖(img/pet/room.png)。
   ⚠**圖是刻意做成低解析的**:168×126、32 色,顯示時放大 2~2.6 倍 + image-rendering:pixelated
   → 看得見方塊才有電子寵物機的味道。原始素材是高解析插畫,細節太多反而不像像素。
   ⚠**尺寸用 aspect-ratio 綁住圖的比例**,不可寫死高度——寫死會裁到沙發/螢幕。
   桌機另外用 max-width 收住,不然 4:3 在寬螢幕會變成一整片超高的圖。 */
body[data-px] .px-room {
  position: relative; overflow: hidden; cursor: pointer;
  width: 100%; max-width: 504px; margin: 0 auto 9px;   /* 504 = 貼圖 168 × 整數 3 倍 */
  aspect-ratio: 840 / 630;
  border: 2px solid var(--zs-line);
  background: #d8caab url('../img/pet/room.png') center / cover no-repeat;
  box-shadow: var(--px-shadow), var(--px-bevel);
  image-rendering: pixelated;
}
/* 開機:像 CRT 亮起來。⚠只在 body.px-anim(確認畫面真的在畫)時才跑,
   否則動畫卡在第一格會讓房間被壓成 5% 高——見 pixel.js 的說明。 */
body[data-px].px-anim .px-room { animation: px-poweron .5s steps(4) 1; }
body[data-px] .px-room-scene { position: absolute; inset: 0; }
@keyframes px-poweron {
  0% { filter: brightness(3) contrast(.2); transform: scaleY(.05); }
  40% { filter: brightness(1.8) contrast(.7); transform: scaleY(1); }
  100% { filter: none; transform: scaleY(1); }
}

/* 狀態條:放在房間**下面**的細長一條(LV / 合計權益 / EXP / 報酬率 / 日期)。
   ⚠不要疊在房間裡:背景是一張畫好的客廳,疊上去會遮掉窗戶、掛畫與螢幕。 */
body[data-px] .px-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%; max-width: 504px; margin: 0 auto 11px;   /* 跟房間同寬 */
  border: 2px solid var(--zs-line); background: var(--zs-surface);
  box-shadow: var(--px-shadow), var(--px-bevel); padding: 6px 9px;
}
body[data-px] .px-strip .px-lv { margin-right: 0; box-shadow: 2px 2px 0 #05050c; }
body[data-px] .px-strip .px-bar { flex: 1; min-width: 60px; }
body[data-px] .px-strip .px-seq { font-size: 22px; text-shadow: 2px 2px 0 #05050c; }
body[data-px] .px-strip .px-hval { font-size: 11px; text-shadow: 2px 2px 0 #05050c; }
body[data-px] .px-strip .px-sday {
  font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--zs-text-faint);
}
body[data-px] .px-strip .px-snote { flex-basis: 100%; }
/* ⚠原本手寫的 CSS 牆面/地板已移除,改成整張房間背景圖(見上面 .px-room)。
   房間**必須是中間調、不能暗**:住在裡面的是一隻黑白狗,背景一暗黑毛就整片糊掉。
   日後換背景圖時:① 確認地毯區域夠亮 ② **重量地毯梯形的四個數字**(pixel-pet.js 的
   Y_NEAR/Y_FAR/HW_NEAR/HW_FAR = 可走區,狗會走到沙發裡或飄在牆上就是這裡沒改)
   ③ aspect-ratio 要跟著新圖的比例改。 */
/* 狗與碗:各層分工,才不會互相蓋掉 transform
   .px-pet / .px-prop(位置 translate + 透視 scale,由 JS 算)
     → .px-pet-hop(跳躍 translateY)→ canvas(左右翻面 scaleX) */
/* ⚠**位置與大小全部由 JS 的 place() 用 transform 設**,這裡只給「最前面(離鏡頭最近)
     那條線」的基準寬,不要在這裡寫 bottom/left —— 狗現在是在**整片地板上 2D 走動**,
     深度(前後)決定它的 y 與縮放,寫死 bottom 會被 transform 疊出雙重位移。
   ⚠**寬度用房間的 %,不寫死 px**:房間桌機 504px、手機縮到視窗寬,
     寫死 px 的話同一隻狗在手機會佔掉快一半房間(舊版 112px 就是這樣)。
   ⚠**33.8% 必須等於 pixel-pet.js 的 W_NEAR**(程式讀 offsetWidth 當基準寬再往下縮),
     改這個數字就是改狗的整體大小;最裡面約 25.3%(W_FAR)。
   ⚠transform-origin 要是底邊正中:縮放時腳底那條線才算得回來(place() 依此推位移)。 */
body[data-px] .px-room .px-pet,
body[data-px] .px-room .px-prop {
  position: absolute; left: 0; bottom: 0;
  width: 33.8%; line-height: 0;
  transform-origin: 50% 100%;
}
/* 碗(飯碗/水碗):房間固定擺設,**每個碗兩層**(整個碗 + 只有前緣),把狗夾在中間。
   ⚠**z-index 不寫在這裡**,由 pixel-pet.js 的 placeProps() 依深度給(後層 z、前層 z+1)。
   點碗要能穿透到地板(不然點到碗,狗就不會走過去)。 */
body[data-px] .px-room .px-prop { pointer-events: none; }
body[data-px] .px-room .px-prop img {
  display: block; width: 100%; height: auto; image-rendering: pixelated;
}
/* ⚠**畫布是方形 1:1**(貼圖一格 128×128,全 13 組動作同規格,腳底基準線 y=108),
     不是舊版那張 80×52。改比例會讓狗變形、腳底跑掉。
   ⚠貼圖由 pixel-pet.js 用 canvas drawImage 逐格畫(**不是 CSS background**):
     新素材是 13 個檔,用 background-image 換動作會在解碼那一瞬間閃白;
     canvas 從預載好的 Image 畫,完全不碰解碼。改這裡別把它改回 background。 */
body[data-px] .px-room .px-pet-img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; cursor: pointer;
  image-rendering: pixelated;                          /* 點陣貼圖放大 → 要硬邊方塊 */
  -webkit-user-drag: none; user-select: none;
}
body[data-px] .px-room .px-pet.flip .px-pet-img { transform: scaleX(-1); }
body[data-px] .px-room .px-pet-hop.hop { animation: px-hop .42s steps(3) 1; }
@keyframes px-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

/* 對話泡泡:浮在狗頭上方。左右與高度都由 JS 算(不同姿勢圖高低不同,而且房間
   overflow:hidden 不夾左右會切掉字);這裡的值只是 JS 還沒跑到時的保險。 */
/* ⚠z-index 要壓過狗與碗:那兩者的 z 由 JS 依深度算(約 55~90,越靠鏡頭越大),
   泡泡永遠要在最上面,所以給一個明顯高過那個範圍的值。 */
body[data-px] .px-room-bubble {
  position: absolute; bottom: 40%; left: 4px; z-index: 200;
  max-width: 62%; width: max-content;
  border: 2px solid var(--zs-accent); background: var(--zs-surface); color: var(--zs-text);
  box-shadow: var(--px-shadow-sm), var(--px-bevel);
  padding: 4px 7px; font-size: 11px; line-height: 17px; text-align: center; pointer-events: none;
  /* ⚠台詞的換行是 pixel-pet.js 的 wrapText 斷在標點上塞 \n → 這裡必須認 \n
     (拿掉 pre-line 的話,長名言會全部擠成一長條) */
  white-space: pre-line;
  overflow-wrap: anywhere;   /* 保險:沒有標點的超長句也不會撐爆房間 */
}
/* 長台詞(纏論名言,最長 65 字):放寬到 88% 並改左對齊 —— 多行居中會參差、讀起來跳行 */
body[data-px] .px-room-bubble.long { max-width: 88%; text-align: left; }
body[data-px] .px-room-bubble .px-tail {
  position: absolute; bottom: -8px; width: 6px; height: 6px; background: var(--zs-surface);
  border-right: 2px solid var(--zs-accent); border-bottom: 2px solid var(--zs-accent);
}

/* ── RPG 訊息窗:用句子講今天的狀況,取代一堆數字磚 ───────────── */
body[data-px] .px-msg {
  position: relative;
  border: 2px solid var(--zs-accent); background: #0e0f1c;
  box-shadow: var(--px-shadow), var(--px-bevel);
  padding: 9px 11px 14px; margin-bottom: 11px; min-height: 62px;
}
body[data-px] .px-msg p { margin: 0 0 4px; font-size: 11px; line-height: 19px; }
body[data-px] .px-msg p:last-of-type { margin-bottom: 0; }
body[data-px] .px-msg b { color: var(--zs-accent); }
body[data-px] .px-msg .up { color: var(--zs-up); }
body[data-px] .px-msg .down { color: var(--zs-down); }
/* 右下閃爛的 ▼(遊戲對話框「按鍵繼續」的記號)*/
body[data-px] .px-msg .px-more {
  position: absolute; right: 7px; bottom: 3px; color: var(--zs-accent); font-size: 11px;
  animation: px-blink 1s steps(2) infinite;
}

/* ── TODAY:今天做了什麼(統計磚在外面、明細收在展開裡)─────────
   ⚠字級只能用點陣字的整數倍(11 / 22),別寫 12/13/14 —— 會糊掉。 */
body[data-px] .px-today { padding: 9px 11px 11px; }
body[data-px] .px-today .px-tsum { margin: 0; font-size: 11px; line-height: 19px; }
body[data-px] .px-today .px-tsum b { color: var(--zs-accent); }
body[data-px] .px-today .px-tsum .faint { display: block; color: var(--zs-text-faint); }
/* 統計磚:固定四欄格線(第五格「還沒處理」自然落到第二排,寬度跟前面一致不會拉成長條);
   375px 手機每格約 73px,11px 的四字標籤 + 短金額塞得下,不撐出橫向捲動。 */
body[data-px] .px-tst { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 9px; }
body[data-px] .px-tk {
  min-width: 0; padding: 5px 6px; text-align: center;
  border: 2px solid var(--zs-line-soft); background: #0e0f1c;
}
body[data-px] .px-tk i { display: block; font-style: normal; font-size: 11px; line-height: 15px; color: var(--zs-text-faint); }
body[data-px] .px-tk b { display: block; font-size: 11px; line-height: 17px; white-space: nowrap; }
body[data-px] .px-tk b.faint { color: var(--zs-text-faint); }
body[data-px] .px-tk b.accent { color: var(--zs-accent); }
body[data-px] .px-tk b.up { color: var(--zs-up); }
body[data-px] .px-tk b.down { color: var(--zs-down); }
/* 展開鈕:像素風的「按鍵繼續」,不用膠囊按鈕 */
body[data-px] .px-texp {
  display: block; width: 100%; margin-top: 9px; padding: 6px;
  border: 2px dotted var(--zs-line); background: transparent;
  color: var(--zs-accent); font: inherit; font-size: 11px; cursor: pointer;
}
body[data-px] .px-texp:hover, body[data-px] .px-texp:focus-visible { background: var(--zs-surface-2); outline: none; }
body[data-px] .px-texp .faint { color: var(--zs-text-faint); }
body[data-px] .px-tsub {
  margin: 9px 0 4px; font-size: 11px; color: var(--zs-accent-dim);
  border-bottom: 2px dotted var(--zs-line-soft); padding-bottom: 3px;
}
body[data-px] .px-trow { padding: 6px 0; border-bottom: 2px dotted var(--zs-line-soft); font-size: 11px; }
body[data-px] .px-trow:last-child { border-bottom: 0; }
body[data-px] .px-tmeta { margin-top: 3px; font-size: 11px; line-height: 16px; color: var(--zs-text-faint); }

/* ── 指令選單(遊戲的 COMMAND 視窗;取代原本的按鈕列)─────────── */
body[data-px] .px-menu {
  border: 2px solid var(--zs-line); background: var(--zs-surface);
  box-shadow: var(--px-shadow), var(--px-bevel); margin-bottom: 11px;
}
body[data-px] .px-mi {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 11px; border: 0; border-bottom: 2px dotted var(--zs-line-soft);
  background: transparent; color: var(--zs-text); font: inherit; font-size: 11px;
  text-align: left; cursor: pointer;
}
body[data-px] .px-mi:last-child { border-bottom: 0; }
body[data-px] .px-mi .px-cur { flex: none; width: 11px; color: transparent; }
body[data-px] .px-mi:hover, body[data-px] .px-mi:focus-visible {
  background: var(--zs-surface-2); outline: none;
}
body[data-px] .px-mi:hover .px-cur, body[data-px] .px-mi:focus-visible .px-cur { color: var(--zs-accent); }
body[data-px] .px-mi:active { background: var(--zs-accent); color: var(--px-ink); }
body[data-px] .px-mi .px-mtx { flex: 1; min-width: 0; font-size: 22px; line-height: 26px; }
body[data-px] .px-mi .px-msub { display: block; font-size: 11px; line-height: 16px; color: var(--zs-text-faint); }
body[data-px] .px-mi:active .px-msub { color: rgba(26,18,6,.7); }
body[data-px] .px-mi .px-mn {
  flex: none; font-size: 11px; padding: 1px 6px; border: 2px solid var(--zs-line);
  color: var(--zs-text-dim);
}
body[data-px] .px-mi.hot { background: rgba(255,201,74,.07); }
body[data-px] .px-mi.hot .px-mtx { color: var(--zs-accent); }
body[data-px] .px-mi.hot .px-mn { border-color: var(--zs-accent); color: var(--zs-accent); }
body[data-px] .px-mi.hot .px-cur { color: var(--zs-accent); animation: px-blink .8s steps(2) infinite; }
body[data-px] .px-mi:disabled { cursor: default; }
body[data-px] .px-mi:disabled .px-mtx { color: var(--zs-text-faint); }

/* ══════════════════════════════════════════════════════════════
   其餘頁面的換皮(2026-08:像素風全站統一)
   ──────────────────────────────────────────────────────────────
   首頁/計畫詳情本來就是像素頁(上面那些新元件),但登入、計畫清單、建立計劃、
   設定、說明、交易紀錄、回測實驗室是後來才長出來的,用的是自己的一套 class
   (.pf-card / .fchip / .ptabs / .bt-* …),裡面寫了圓角膠囊、漸層、光暈、
   等寬英文字體 —— 那些在暗色終端主題好看,在像素風裡就是異物。
   這一段把它們一起拉進像素語彙:硬邊 2px 框 + 硬投影 + 點陣字 + 方角標籤。
   ⚠字級只用 8/16/24(Press Start 2P)與 11/22/33(Cubic 11);不要 12/13/14。
   ══════════════════════════════════════════════════════════════ */

/* ── 登入頁 ─────────────────────────────────────────────────── */
body[data-px] h1.hero {
  font-family: 'Press Start 2P', monospace; font-size: 24px; line-height: 33px;
  color: var(--zs-accent); text-shadow: 4px 4px 0 #05050c; letter-spacing: 0;
}
body[data-px] .center-screen { gap: 11px; }
/* Google 鈕保留白底(品牌規範),但去掉圓角、補像素框與投影 */
body[data-px] .btn.google {
  background: #f4f4ea; color: #1a1206; border-color: #b9bcd8;
  box-shadow: var(--px-shadow-sm), var(--px-bevel); text-shadow: none;
}
body[data-px] .btn.google:hover { background: #fff; border-color: var(--zs-accent); }

/* ── 篩選列(建立計劃 / 交易紀錄的來源篩選):膠囊 → 方形按鍵 ── */
body[data-px] .fchip {
  font: inherit; font-size: 11px; line-height: 19px;
  padding: 3px 9px; border: 2px solid var(--zs-line); border-radius: 0;
  background: var(--zs-surface-2); color: var(--zs-text-dim);
  box-shadow: var(--px-shadow-sm), var(--px-bevel);
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
body[data-px] .fchip:hover { background: #34376a; border-color: var(--zs-accent); color: var(--zs-text); }
body[data-px] .fchip:active { transform: translate(3px, 3px); box-shadow: var(--px-bevel); }
body[data-px] .fchip.on {
  background: var(--zs-accent); border-color: var(--zs-accent-soft); color: var(--px-ink);
  font-weight: 400; text-shadow: 1px 1px 0 rgba(255,255,255,.35);
}
body[data-px] .fchip.rec { font-size: 11px; padding: 3px 8px; }
body[data-px] .fsearch input.inp { font-family: 'Cubic 11', monospace; font-size: 11px; padding: 5px 9px; }
body[data-px] .fhint { font-size: 11px; line-height: 18px; color: var(--zs-text-faint); }

/* ── 策略卡(建立計劃的挑選器)──────────────────────────────── */
body[data-px] .pf-card {
  background: var(--zs-surface); border: 2px solid var(--zs-line); border-radius: 0;
  box-shadow: var(--px-shadow), var(--px-bevel); padding: 9px; gap: 5px;
  font: inherit; transition: none; position: relative;
}
body[data-px] .pf-card:hover { border-color: var(--zs-accent); box-shadow: var(--px-shadow), var(--px-bevel); }
body[data-px] .pf-card:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #000, var(--px-bevel); }
body[data-px] .pf-card.sel { border-color: var(--zs-accent); box-shadow: var(--px-shadow), var(--px-bevel); }
/* 選到的那張:左邊插一條琥珀色像素條(取代原本的外光暈) */
body[data-px] .pf-card.sel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--zs-accent);
}
body[data-px] .pf-top { gap: 5px; flex-wrap: wrap; }
/* 策略 id / 級別 / 檔數 / 零股:一律方角描邊小標籤 */
body[data-px] .pf-id, body[data-px] .pf-kind, body[data-px] .pf-star, body[data-px] .pf-rec {
  font-family: 'Cubic 11', monospace; font-size: 11px; font-weight: 400; line-height: 17px;
  border-radius: 0; padding: 0 5px; border: 2px solid currentColor; background: transparent;
}
body[data-px] .pf-id { color: var(--zs-accent); }
body[data-px] .pf-kind { color: var(--zs-text-dim); }
body[data-px] .pf-kind.single, body[data-px] .pf-rec.more { color: var(--zs-text-faint); }
body[data-px] .pf-kind.odd { color: var(--zs-accent); }
body[data-px] .pf-lvl { font-size: 11px; font-weight: 400; }
body[data-px] .pf-lvl i { border-radius: 0; width: 8px; height: 8px; box-shadow: none; }
/* 推薦徽章:主推薦(最划算)實心琥珀,其餘描邊 */
body[data-px] .pf-rec.deal {
  background: var(--zs-accent); border-color: var(--zs-accent-soft); color: var(--px-ink);
}
body[data-px] .pf-rec.calm, body[data-px] .pf-rec.h60 { color: var(--zs-down); }
body[data-px] .pf-row { gap: 11px; }
body[data-px] .pf-cell b {
  font-family: 'Cubic 11', monospace; font-size: 22px; line-height: 24px; font-weight: 400;
  text-shadow: 2px 2px 0 #05050c;
}
body[data-px] .pf-cell.oss b { font-size: 22px; color: var(--zs-accent); }
body[data-px] .pf-cell span {
  font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--zs-text-faint); letter-spacing: .04em;
}
/* 「為什麼推薦」說明卡 */
body[data-px] .rec-why { padding: 9px 11px; }
body[data-px] .rec-why .rw { font-size: 11px; line-height: 19px; }
body[data-px] .rec-why .rw b { color: var(--zs-accent); }
body[data-px] .rec-why.warn { border-color: var(--zs-up); }

/* ── 計畫卡(#plans 清單)───────────────────────────────────── */
body[data-px] .plan-card .plan-head strong { font-size: 11px; }
body[data-px] .plan-eq { font-size: 22px; line-height: 26px; font-weight: 400; }
body[data-px] .plan-ret { font-size: 22px; line-height: 26px; font-weight: 400; }
body[data-px] .plan-metrics .m .k {
  font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--zs-text-faint);
}
body[data-px] .plan-metrics .m .v { font-family: 'Cubic 11', monospace; font-size: 11px; font-weight: 400; }

/* ── 計畫分頁(儀表板/可買進/歷史):segmented → 像素頁籤 ────── */
body[data-px] .ptabs {
  border: 2px solid var(--zs-line); border-radius: 0; background: var(--zs-surface);
  box-shadow: var(--px-shadow-sm), var(--px-bevel);
}
body[data-px] .ptabs .ptab {
  font-size: 11px; font-weight: 400; line-height: 22px; padding: 5px 6px;
  border-right: 2px solid var(--zs-line); color: var(--zs-text-dim);
}
body[data-px] .ptabs .ptab.on { background: var(--zs-accent); color: var(--px-ink); }

/* ── 一鍵執行清單(modal 內)────────────────────────────────── */
body[data-px] .exec-row {
  border: 2px solid var(--zs-line); border-radius: 0; background: var(--zs-surface-2);
  box-shadow: var(--px-bevel); padding: 6px 8px; gap: 8px;
}
/* 「有買點但買不了」的列:虛線邊框 = 這列不會被送出去買(但點下去照樣看 K 線圖)。
   ⚠必須在 body[data-px] 底下再寫一次 —— 上面 `body[data-px] .exec-row` 的權重高於 app.css 的
   `.exec-row.xb`,不重寫的話虛線在像素主題(預設)下根本不會出現,兩種列長得一模一樣。 */
body[data-px] .exec-row.xb { border-style: dashed; }
body[data-px] .exec-in span { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--zs-text-faint); }
body[data-px] .exec-in input.inp { width: 72px; padding: 4px 6px; font-size: 11px; }

/* 執行回合頁的翻頁圓點:像素風改成方塊 */
body[data-px] .xpg-dot { border-radius: 0; width: 9px; height: 9px; border: 2px solid var(--zs-line); background: transparent; }
body[data-px] .xpg-dot.on { background: var(--zs-accent); border-color: var(--zs-accent); transform: none; }
body[data-px] .xr-k { font-family: 'Cubic 11', monospace; font-size: 10px; }

/* ── 逐K回測實驗室 ─────────────────────────────────────────── */
body[data-px] .bt-tablewrap {
  border: 2px solid var(--zs-line); border-radius: 0; box-shadow: var(--px-shadow), var(--px-bevel);
}
body[data-px] .bt-table { font-size: 11px; }
body[data-px] .bt-table thead th {
  font-family: 'Press Start 2P', monospace; font-size: 8px; font-weight: 400; letter-spacing: .04em;
  color: var(--zs-text-faint); background: var(--zs-surface-2); border-bottom: 2px solid var(--zs-line);
  padding: 7px 8px;
}
body[data-px] .bt-table tbody td {
  font-family: 'Cubic 11', monospace; font-size: 11px; padding: 7px 8px;
  border-bottom: 2px dotted var(--zs-line-soft);
}
body[data-px] .bt-table tbody tr.bt-row:hover td { background: var(--zs-surface-2); }
body[data-px] .bt-table .dot { border-radius: 0; box-shadow: none; }
body[data-px] .bt-caphead { border-bottom: 2px solid var(--zs-accent); }
body[data-px] .bt-caphead .cap {
  font-family: 'Press Start 2P', monospace; font-size: 16px; font-weight: 400; color: var(--zs-accent);
  text-shadow: 2px 2px 0 #05050c;
}
body[data-px] .bt-caphead .faint { font-size: 11px; }
body[data-px] .bt-acard {
  border: 2px solid var(--zs-line); border-radius: 0; background: var(--zs-surface);
  box-shadow: var(--px-shadow), var(--px-bevel); padding: 9px 11px; transition: none;
}
body[data-px] .bt-acard:hover { border-color: var(--zs-accent); transform: none; }
body[data-px] .bt-acard:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #000, var(--px-bevel); }
body[data-px] .bt-acard-top .nm { font-size: 11px; line-height: 19px; }
body[data-px] .bt-acard-sub { font-size: 11px; }
body[data-px] .bt-st i { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--zs-text-faint); }
body[data-px] .bt-st b {
  font-family: 'Cubic 11', monospace; font-size: 22px; line-height: 24px; font-weight: 400;
  letter-spacing: 0; text-shadow: 2px 2px 0 #05050c;
}
body[data-px] .bt-trade { padding: 8px 11px; }
body[data-px] .bt-leg { font-family: 'Cubic 11', monospace; font-size: 11px; }
body[data-px] .bt-leg .lg {
  font-size: 11px; font-weight: 400; border-radius: 0; padding: 0 4px;
  border: 2px solid currentColor; background: transparent; color: var(--zs-up);
}
body[data-px] .bt-leg .lg.out { color: var(--zs-down); }
body[data-px] .bt-tmeta { font-size: 11px; line-height: 18px; }
/* 回測人設/選項按鈕與勾選列 */
body[data-px] .persona-pick .pp {
  font: inherit; font-size: 11px; font-weight: 400; line-height: 22px; padding: 5px 6px;
  border: 2px solid var(--zs-line); border-radius: 0; background: var(--zs-surface-2);
  color: var(--zs-text-dim); box-shadow: var(--px-shadow-sm), var(--px-bevel);
}
body[data-px] .persona-pick .pp:active { transform: translate(3px, 3px); box-shadow: var(--px-bevel); }
body[data-px] .persona-pick .pp.on {
  background: var(--zs-accent); border-color: var(--zs-accent-soft); color: var(--px-ink); font-weight: 400;
}
body[data-px] .chkline, body[data-px] .cmp-pk { font-size: 11px; line-height: 22px; }
body[data-px] .cmp-pk:hover { background: var(--zs-surface-2); }
body[data-px] .cmp-pk .dot { border-radius: 0; box-shadow: none; }
/* 核取方塊:像素風沒有圓角勾選框,至少把配色與尺寸統一 */
body[data-px] input[type=checkbox] { accent-color: var(--zs-accent); width: 17px; height: 17px; }

/* ── 表單標籤 / 總覽數字 ─────────────────────────────────────── */
body[data-px] label.fld .lab { font-size: 11px; color: var(--zs-text-dim); }
body[data-px] input.inp, body[data-px] select.sel { padding: 6px 8px; }
body[data-px] .totals { gap: 8px; }

/* 桌機:HUD 兩欄更好看 */
@media (min-width: 720px) {
  body[data-px] .px-chips { grid-template-columns: repeat(4, 1fr); }
}

/* 無障礙:使用者關閉動畫時,全部特效停掉(只留靜態像素風)*/
@media (prefers-reduced-motion: reduce) {
  body[data-px] *, body[data-px] *::before, body[data-px] *::after {
    animation: none !important; transition: none !important;
  }
}

/* 「哪一天的清單」橫幅的像素版。⚠必須在 body[data-px] 底下再寫一次 —— 這個主題把圓角/陰影統一改掉了,
   權重高於 app.css 的 .snap-banner,不重寫會變成半調子(方塊陰影配圓角)。同 .exec-row.xb 那次的教訓。 */
body[data-px] .snap-banner {
  border-radius: 0; border: var(--px-border); border-left: 4px solid var(--zs-accent);
  box-shadow: var(--px-bevel);
}
body[data-px] .snap-banner .sb-day { font-family: var(--px-font, inherit); letter-spacing: .5px; }