/* Cubic 11(俐方體11號)— 紅白機主題中文像素字。Google Fonts 沒有此字體,自架 woff2。
   授權 SIL OFL 1.1(免費商用),來源 github.com/ACh-K/Cubic-11。只在 arcade 主題用到 → 其他主題零下載。 */
@font-face {
  font-family: "Cubic 11";
  src: url("/fonts/Cubic_11.woff2") format("woff2");
  font-display: swap;
}

/* ============================================================
   台股第四法人 · 號子復古視覺
   概念：80–90 年代台灣號子的 LED 行情看板 + CRT 終端機。
   磷光綠/警示紅、琥珀色終端字、掃描線、紙條面板、硬直角、七段感數字。
   台股慣例：紅漲、綠跌。
   ============================================================ */
:root {
  --crt-bg:   #0a0c08;        /* 暖調近黑 CRT 底 */
  --panel:    #10130c;        /* 面板底 */
  --panel-2:  #161a10;        /* 較亮面板 / hover */
  --slip:     #13160d;        /* 交易紙條 */
  --line:     rgba(255,176,0,.22);   /* 琥珀細線 */
  --line-2:   rgba(255,176,0,.5);
  --amber:    #ffb000;        /* 琥珀終端主色 */
  --amber-2:  #ffd24a;
  --amber-dim:#b07c0a;
  --cream:    #ece4c6;        /* 主文字（暖白） */
  --cream-dim:#8c8666;
  --up:       #ff4133;        /* 漲＝紅 */
  --down:     #1fe07a;        /* 跌＝磷光綠 */
  --flat:     #9a9472;
  --up-glow:   0 0 7px rgba(255,65,51,.65);
  --down-glow: 0 0 7px rgba(31,224,122,.6);
  --amber-glow:0 0 7px rgba(255,176,0,.55);
  --ind1: #ffd24a;            /* 指標線：MA5 / RSI */
  --ind2: #9fd2ff;            /* MA20 / DIF */
  --ind3: #e6a8ff;            /* MA60 / DEA */
  --field: #000;              /* 輸入框/按鈕底（亮色主題覆蓋成紙白） */
  --chart-glow: saturate(1.18) drop-shadow(0 0 3px rgba(255,255,255,.13)); /* K棒誘人光暈(無光主題自行覆蓋) */
  /* VT323 沒有中文字符 → 中文自動掉到 Noto Sans TC，數字/英文才走 VT323 */
  --mono: "VT323", "Noto Sans TC", ui-monospace, "Courier New", monospace;
  --han: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body {
  height: 100dvh;
  background: var(--crt-bg);
  color: var(--cream);
  font-family: var(--han);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* CRT 暈影：四周壓暗 */
  background-image:
    radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
}

/* 背景氛圍光：壓在最底層，絕不擋點擊 */
.bg-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 80% -10%, color-mix(in srgb, var(--amber) 6%, transparent), transparent 55%),
    radial-gradient(800px 600px at 10% 110%, color-mix(in srgb, var(--down) 5%, transparent), transparent 55%);
}
/* 掃描線 + 微閃爍：用 body 偽元素疊在最上層。pointer-events:none 確保不吃點擊。
   （刻意不用 mix-blend-mode：iOS Safari 會對帶 blend 的元素忽略 pointer-events、把點擊吃掉） */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.13) 2px 3px);
  animation: flicker 6s steps(60) infinite;
}
@keyframes flicker { 0%,100% { opacity: .85; } 50% { opacity: 1; } 7% { opacity: .78; } }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--amber-dim); border: 2px solid var(--crt-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }

button { font-family: inherit; }

/* ============ Header：終端機標題列 ============ */
header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 16px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom: 2px solid var(--line-2);
  box-shadow: 0 2px 0 rgba(0,0,0,.6);
  flex-shrink: 0;
}
.logo { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; cursor: pointer; user-select: none; transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.logo:hover { transform: translateY(-1px); }
.logo:active { transform: scale(.97); }
.logo-mark {
  font-family: var(--mono);
  font-size: 22px; color: var(--up); text-shadow: var(--up-glow);
  animation: ledblink 1.4s steps(2) infinite;
}
@keyframes ledblink { 0%,60% { opacity: 1; } 61%,100% { opacity: .35; } }
.logo-text {
  font-size: 22px; font-weight: 900; letter-spacing: 2px;
  color: var(--amber); text-shadow: var(--amber-glow);
}
.logo-sub {
  font-family: var(--mono); font-size: 15px; letter-spacing: 1px;
  color: var(--cream-dim);
}

.room-tabs {
  display: flex; gap: 0; flex: 1;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.room-tabs::-webkit-scrollbar { display: none; }
.room-tab {
  padding: 5px 14px;
  font-size: 14px;
  cursor: pointer;
  background: var(--panel);
  color: var(--cream-dim);
  border: 1px solid var(--line);
  border-bottom: none;
  white-space: nowrap;
  user-select: none;
  transition: all .12s;
}
.room-tab:hover { color: var(--cream); background: var(--panel-2); }
.room-tab.active {
  color: var(--crt-bg); background: var(--amber);
  font-weight: 700; text-shadow: none;
}

.header-right { display: flex; align-items: center; gap: 16px; white-space: nowrap; margin-left: auto; }

/* 彈幕開關：「彈幕」二字即按鈕 — 亮=開、灰並劃掉=關 */
.danmaku-btn {
  font-family: var(--han); font-size: 15px; font-weight: 700; letter-spacing: 1px; line-height: 1;
  padding: 4px 11px; border: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--cream-dim); cursor: pointer; white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s, opacity .15s;
}
.danmaku-btn.on { color: var(--crt-bg); background: var(--amber); border-color: var(--amber); box-shadow: var(--amber-glow); }
.danmaku-btn:not(.on) { opacity: .6; text-decoration: line-through; text-decoration-thickness: 2px; } /* 關閉=劃掉 */
.danmaku-btn:active { transform: scale(.94); }

/* 彈幕開關：終端機撥桿（舊版，已改文字按鈕） */
.switch { display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch-track {
  width: 38px; height: 18px; border-radius: 0;
  background: var(--field); border: 1px solid var(--line-2);
  position: relative; transition: background .15s;
}
.switch-thumb {
  position: absolute; top: 1px; left: 1px;
  width: 16px; height: 14px; border-radius: 0;
  background: var(--cream-dim); transition: transform .12s, background .15s;
}
.switch input:checked + .switch-track { background: color-mix(in srgb, var(--down) 18%, transparent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); background: var(--down); box-shadow: var(--down-glow); }
.switch-label { font-family: var(--mono); font-size: 16px; color: var(--cream-dim); }

.online { font-family: var(--mono); font-size: 17px; color: var(--down); display: flex; align-items: center; gap: 6px; text-shadow: var(--down-glow); }
.pulse-dot {
  width: 8px; height: 8px; border-radius: 0;
  background: var(--down); box-shadow: var(--down-glow);
  animation: ledblink 1.2s steps(2) infinite;
}

/* ============ Layout ============ */
main { display: flex; flex: 1; min-height: 0; gap: 10px; padding: 10px; }
.panel {
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.4);
}
.panel-title {
  font-family: var(--mono); font-size: 17px; letter-spacing: 1px;
  color: var(--amber); text-transform: uppercase;
}

/* ============ 左：行情看板 ============ */
.watchlist {
  width: 238px;
  display: flex; flex-direction: column;
  flex-shrink: 0; overflow: hidden;
}
.watchlist-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px 7px;
  border-bottom: 1px dashed var(--line);
}
.panel-title::before { content: "▌"; color: var(--amber); margin-right: 4px; }
.market-status { font-family: var(--mono); font-size: 15px; color: var(--cream-dim); }
.search-box { padding: 8px 10px; position: relative; }
.search-box input {
  width: 100%; padding: 7px 10px; font-size: 14px;
  font-family: var(--mono);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 0; color: var(--amber-2); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search-box input::placeholder { color: var(--cream-dim); }
.search-box input:focus { border-color: var(--amber); box-shadow: inset 0 0 8px color-mix(in srgb, var(--amber) 18%, transparent); }

/* 打字建議下拉 */
.symbol-suggest {
  display: none; position: absolute; left: 10px; right: 10px; top: calc(100% - 6px);
  z-index: 60; max-height: 270px; overflow-y: auto;
  background: var(--field); border: 1px solid var(--amber-dim);
  box-shadow: 0 8px 18px rgba(0,0,0,.65);
}
.symbol-suggest.open { display: block; }
.sg-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  padding: 8px 10px; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--amber) 10%, transparent);
}
.sg-item:last-child { border-bottom: 0; }
.sg-item:hover, .sg-item.active { background: var(--panel-2); }
.sg-code { font-family: var(--mono); font-size: 14px; color: var(--amber-2); min-width: 48px; }
.sg-name { font-size: 14px; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-tag { color: var(--amber); font-size: 12px; }
.sg-item.faved .sg-name { color: var(--amber-2); }

.hot-rooms { padding: 0 10px 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.hot-rooms:empty { padding: 0; }
.hot-title { width: 100%; font-family: var(--mono); font-size: 14px; color: var(--cream-dim); letter-spacing: 1px; }
.hot-chip {
  padding: 3px 9px; font-size: 13px; font-family: var(--mono);
  background: var(--field); border: 1px solid var(--line);
  border-radius: 0; color: var(--cream); cursor: pointer; transition: all .12s;
}
.hot-chip:hover { border-color: var(--amber); color: var(--amber); }
.hot-chip.active { border-color: var(--amber); color: var(--crt-bg); background: var(--amber); }

#watchlist-rows { flex: 1; overflow-y: auto; padding: 2px 4px; }
.wl-listtitle {
  padding: 7px 9px 4px; font-family: var(--mono); font-size: 13px;
  color: var(--amber); letter-spacing: 1px; text-shadow: var(--amber-glow);
}
.wl-empty {
  padding: 14px 12px; font-family: var(--mono); font-size: 13px;
  color: var(--cream-dim); text-align: center; line-height: 1.5;
}
.wl-row {
  display: grid;
  grid-template-columns: 1fr auto 16px;
  gap: 0 8px;
  padding: 7px 9px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 8%, transparent);
  transition: background .1s;
}
.wl-rm {
  grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end;
  width: 16px; height: 16px; line-height: 13px; text-align: center; padding: 0;
  font-size: 11px; font-family: var(--mono);
  background: transparent; color: var(--cream-dim);
  border: 1px solid var(--line); cursor: pointer;
  opacity: .55; transition: opacity .12s, color .12s, border-color .12s;
}
.wl-rm:hover { opacity: 1; color: var(--down); border-color: var(--down); }
.wl-row:hover { background: var(--panel-2); }
.wl-row.active { background: color-mix(in srgb, var(--amber) 8%, transparent); border-color: var(--line-2); }
.wl-name { font-size: 14px; font-weight: 500; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* 含「漲停/跌停」::after 不可軟換行(像素字較寬時尤其) */
.wl-code { font-family: var(--mono); font-size: 13px; color: var(--cream-dim); grid-row: 2; }
.wl-price {
  font-family: var(--mono); font-size: 19px; text-align: right; line-height: 1;
  font-weight: 400;
}
.wl-pct { font-family: var(--mono); font-size: 14px; text-align: right; grid-row: 2; }
.watchlist-footer {
  padding: 7px 12px; font-family: var(--mono); font-size: 12px;
  color: var(--cream-dim); border-top: 1px dashed var(--line); opacity: .8;
}

.up   { color: var(--up);   text-shadow: var(--up-glow); }
.down { color: var(--down); text-shadow: var(--down-glow); }
.flat { color: var(--flat); }

/* 價格跳動：磷光閃一下 */
@keyframes flashUp   { 0% { background: color-mix(in srgb, var(--up) 28%, transparent); } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: color-mix(in srgb, var(--down) 24%, transparent); } 100% { background: transparent; } }
.wl-row.flash-up   { animation: flashUp 1s ease-out; }
.wl-row.flash-down { animation: flashDown 1s ease-out; }

/* ============ 中：圖表終端 ============ */
.chart-area {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.stock-header {
  display: flex; align-items: baseline; gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 5%, transparent), transparent);
  flex-wrap: nowrap; overflow: hidden; /* 一行；各欄不內部折行，最長的 OHLC 讓位 */
}
/* 股名/價格/漲跌/徽章都不內部折行、不被壓；OHLC 最不重要 → 可截斷吸收溢出 */
.sh-name { font-size: 18px; font-weight: 700; color: var(--cream); letter-spacing: 1px; white-space: nowrap; flex-shrink: 0; }
.sh-price {
  font-family: var(--mono);
  font-size: 36px; font-weight: 400; line-height: .9; white-space: nowrap; flex-shrink: 0;
}
.sh-change { font-family: var(--mono); font-size: 19px; white-space: nowrap; flex-shrink: 0; }
.sh-ohlc { font-family: var(--mono); font-size: 15px; color: var(--cream-dim); white-space: nowrap; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.chart-wrap { flex: 1; position: relative; min-height: 0; }
#chart { position: absolute; inset: 0; filter: var(--chart-glow); overflow: hidden; }
/* K 棒光暈：飽和度提升讓紅綠更豔 + 微白 bloom(磷光感)。靜態、弱、不干擾。 */
/* 十字準心數據讀出：手指掃到哪根 K 就顯示那天 OHLC */
.chart-legend {
  position: absolute; top: 6px; left: 10px; z-index: 11;
  font-family: var(--mono); font-size: 17px; line-height: 1.25;
  color: var(--cream); pointer-events: none; white-space: nowrap;
  background: color-mix(in srgb, var(--crt-bg) 52%, transparent); backdrop-filter: blur(3px); padding: 2px 9px; /* 半透明+輕模糊：壓得住雜訊又不擋圖(背景太深 → 調淡) */
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.chart-legend b { font-weight: 700; color: var(--amber); font-size: 19px; }
.chart-legend b.up { color: var(--up); }
.chart-legend b.down { color: var(--down); }
/* 雙指 delta 雙 cursor 覆蓋層 */
#delta-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 9; display: none; }
#delta-overlay .dl-region { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--amber) 9%, transparent); }
#delta-overlay .dl-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--amber); opacity: .8; }
#delta-overlay .dl-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber); border: 2px solid var(--crt-bg);
  transform: translate(-50%, -50%); box-shadow: 0 0 6px color-mix(in srgb, var(--amber) 60%, transparent);
}
/* 訊息表情反應 */
.msg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; align-items: center; }
.react-chip, .react-pick, .react-add {
  font-size: 12.5px; line-height: 1; padding: 2px 7px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--cream-dim); cursor: pointer;
}
.react-chip.mine { border-color: var(--amber); color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.react-add { opacity: .45; }
.react-add:hover, .react-pick:hover, .react-chip:hover { opacity: 1; border-color: var(--line-2); }
/* 看盤清單：房間有人 → 代號旁標人數(主題色小圓點+數字，不用 emoji)，≥30 人亮燈 */
.wl-online { color: var(--cream-dim); font-size: 11px; font-family: var(--mono); margin-left: 5px; white-space: nowrap; }
.wl-online::before { content: "●"; font-size: 6px; vertical-align: 2px; margin-right: 2px; opacity: .75; }
.wl-online.hot { color: var(--amber); font-weight: 700; }
.wl-online.hot::before { opacity: 1; text-shadow: 0 0 5px currentColor; }
/* 指標開關列（圖表下方，緊接週期列；不再浮動疊在圖上）*/
.ind-bar { display: flex; border-top: 1px solid var(--line); flex-shrink: 0; }
.ind-bar button {
  flex: 1; font-family: var(--mono); font-size: 14px; line-height: 1; padding: 5px 4px;
  background: transparent; border: none; border-right: 1px solid var(--line);
  color: var(--cream-dim); cursor: pointer; transition: background .1s, color .1s;
}
.ind-bar button:last-child { border-right: none; }
.ind-bar button:hover { color: var(--cream); background: var(--panel-2); }
.ind-bar button.active { color: var(--crt-bg); background: var(--amber); }
/* K線範圍切換列 */
.range-bar { display: flex; border-top: 1px solid var(--line); flex-shrink: 0; }
.range-bar button {
  flex: 1; padding: 7px 4px; font-family: var(--mono); font-size: 16px; line-height: 1;
  background: transparent; border: none; border-right: 1px solid var(--line);
  color: var(--cream-dim); cursor: pointer; transition: background .1s, color .1s;
}
.range-bar button:last-child { border-right: none; }
.range-bar button:hover { color: var(--cream); background: var(--panel-2); }
.range-bar button.active { color: var(--crt-bg); background: var(--amber); font-weight: 700; }

.chart-footer {
  padding: 6px 16px; font-family: var(--mono); font-size: 14px; color: var(--cream-dim);
  border-top: 1px solid var(--line); letter-spacing: 1px;
}

/* ============ 彈幕舞台 ============ */
#danmaku-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 10; }
#fw-chart { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 8; } /* 漲停煙火大秀(K線區)，墊在彈幕下 */
/* @股票跳轉連結（聊天訊息內） */
.stock-link {
  display: inline; padding: 0 3px; margin: 0 1px;
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  border: none; border-bottom: 1px solid var(--amber);
  color: var(--amber); font: inherit; cursor: pointer;
}
.stock-link:hover { background: var(--amber); color: var(--crt-bg); }
.danmaku {
  position: absolute; left: 100%; white-space: nowrap;
  font-family: var(--han); font-size: 20px; font-weight: 700;
  color: var(--cream);
  text-shadow: 0 1px 2px rgba(0,0,0,.75); /* 乾淨細影：只做與 K 線的分離，不糊字緣(使用者反映光暈影響閱讀) */
  animation: fly linear forwards; will-change: transform;
}
@keyframes fly { from { transform: translateX(0); } to { transform: translateX(var(--fly-distance)); } }

/* 彈幕隨機色 — 中立、非情緒(取代舊的關鍵字漲跌色與付費特效)。每主題確保對比 ≥4.5:1。 */
.danmaku.c0 { color: var(--dm0); }
.danmaku.c1 { color: var(--dm1); }
.danmaku.c2 { color: var(--dm2); }
.danmaku.c3 { color: var(--dm3); }
.danmaku.c4 { color: var(--dm4); }
.danmaku.c5 { color: var(--dm5); }
/* 預設(深底主題:broker/cyber/vapor/gold/btl/arcade)— 亮色,深底上高對比 */
:root {
  --dm0: #ffd24a; --dm1: #9fd2ff; --dm2: #e6a8ff; --dm3: #8cffc2; --dm4: #ff9a8f; --dm5: #ece4c6;
}
/* paper 晨間財經(淺底 #f5efe0)— 報紙油墨深色,確保亮底可讀 */
html[data-theme="paper"] {
  --dm0: #b3261e; --dm1: #1457a8; --dm2: #0c7a43; --dm3: #7a4ba0; --dm4: #8a5a00; --dm5: #262626;
}
/* matrix 駭客任務 — 純綠世界,保持單色綠系 */
html[data-theme="matrix"] {
  --dm0: #00ff66; --dm1: #39ff14; --dm2: #8cffc2; --dm3: #5fe08a; --dm4: #b6ffcf; --dm5: #00e676;
}
/* nvg 夜視作戰 — 夜視綠系 */
html[data-theme="nvg"] {
  --dm0: #8aff5a; --dm1: #44ff77; --dm2: #b6ff9a; --dm3: #6effa0; --dm4: #c8ffae; --dm5: #9bf08a;
}
/* bberg 法人終端 — 專業沉穩(不上霓虹彩虹) */
html[data-theme="bberg"] {
  --dm0: #ff8c00; --dm1: #cdd6e4; --dm2: #6fa8dc; --dm3: #e0c068; --dm4: #a9b7c6; --dm5: #8fd0c0;
}

/* ============ 右：聊天 / 號子留言板 ============ */
.chat {
  width: 340px;
  display: flex; flex-direction: column;
  flex-shrink: 0; overflow: hidden;
}
.chat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px;
  border-bottom: 2px solid var(--line-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 4%, transparent), transparent); /* 主題色淡漸層，不加黑(紅字才看得清) */
}
.chat-room-info { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
#chat-room-name { font-size: 16px; font-weight: 700; color: var(--amber); letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-online { font-family: var(--mono); font-size: 15px; color: var(--cream-dim); white-space: nowrap; }
.nick-btn {
  background: var(--field); border: 1px solid var(--line); color: var(--cream-dim);
  font-family: var(--mono); font-size: 14px;
  padding: 4px 11px; border-radius: 0; cursor: pointer;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: all .12s;
}
.nick-btn:hover { color: var(--amber); border-color: var(--amber); }
/* Google 登入 / 身分 */
.auth-box { display: flex; align-items: center; gap: 6px; min-width: 0; }
#gsignin { display: flex; }
.user-name { font-family: var(--mono); font-size: 14px; color: var(--amber); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 9px;
}
/* 號子留言板：拿掉頭像，訊息佔滿整欄寬。
   主要資訊（訊息本文）放大，次要資訊（暱稱/時間）縮小。 */
.chat-msg { display: block; animation: msgIn .16s ease-out; }
@keyframes msgIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.avatar { display: none; }
.msg-body { min-width: 0; }
.msg-meta { display: inline; }
.msg-meta .nick { font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--amber); }
.msg-meta .nick::before { content: "> "; color: var(--cream-dim); }
.msg-meta .time { font-family: var(--mono); font-size: 12px; color: var(--cream-dim); opacity: .55; margin-left: 5px; }
.msg-text {
  display: block; font-size: 16px; line-height: 1.55; word-break: break-word;
  margin-top: 2px; color: var(--cream);
}

.chat-msg.system { color: var(--cream-dim); font-family: var(--mono); font-size: 14px; justify-content: center; }

/* ============ 輸入碼頭 ============ */
.chat-dock {
  border-top: 2px solid var(--line-2);
  padding: 9px 12px 12px;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(0deg, #0c0f09, transparent);
}
.quick-emotes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; cursor: grab; user-select: none; touch-action: pan-x; }
.quick-emotes.dragging { cursor: grabbing; }
.quick-emotes::-webkit-scrollbar { display: none; }
.quick-emotes button {
  padding: 4px 9px; font-size: 12px;
  background: var(--field); border: 1px solid var(--line);
  border-radius: 0; color: var(--cream); cursor: pointer; white-space: nowrap;
  transition: all .12s;
}
.quick-emotes button:hover { border-color: var(--amber); color: var(--amber); }
.quick-emotes button:active { transform: translateY(1px); }

/* 未登入：儲值變灰、加鎖頭，點下去前端會擋並提示登入 */

/* 兩列：上=三個特效(可換行)，下=錢包(餘額靠左、儲值靠右) */
.effect-bar { display: flex; flex-direction: column; gap: 8px; }
.effect-picker { display: flex; gap: 5px; flex-wrap: wrap; }
.effect-chip {
  padding: 4px 9px; font-size: 13px;
  background: var(--field); border: 1px solid var(--line);
  border-radius: 0; color: var(--cream-dim); cursor: pointer; white-space: nowrap;
  transition: all .12s;
}
.effect-chip b { font-family: var(--mono); font-size: 15px; }
.effect-chip:hover { color: var(--cream); border-color: var(--line-2); }
.effect-chip.active { color: var(--cream); background: var(--panel-2); border-color: var(--line-2); }

.wallet { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding-top: 7px; border-top: 1px dashed var(--line); }
.coin-balance { font-family: var(--mono); font-size: 17px; color: var(--amber); text-shadow: var(--amber-glow); }
.topup-btn {
  padding: 3px 9px; font-size: 13px; font-family: var(--mono);
  background: transparent; border: 1px solid var(--amber);
  border-radius: 0; color: var(--amber); cursor: pointer; transition: all .12s;
}
.topup-btn:hover { background: var(--amber); color: var(--crt-bg); }
/* 外觀商店鈕：收進特效列右側空檔的小金鈕(margin-left:auto 靠右收尾) */
#shop-btn {
  margin-left: auto; font-size: 12.5px; padding: 4px 9px;
  background: color-mix(in srgb, var(--amber) 15%, transparent); border-color: var(--amber);
}

.chat-input-row { display: flex; gap: 8px; }
.chat-input-row input {
  flex: 1; min-width: 0; padding: 9px 12px; font-size: 14px;
  background: var(--field); border: 1px solid var(--line-2);
  border-radius: 0; color: var(--amber-2); outline: none; font-family: var(--han);
  transition: border-color .15s, box-shadow .15s;
}
.chat-input-row button { flex-shrink: 0; }
.chat-input-row input::placeholder { color: var(--cream-dim); }
.chat-input-row input:focus { border-color: var(--amber); box-shadow: inset 0 0 8px color-mix(in srgb, var(--amber) 18%, transparent); }
.chat-input-row button {
  padding: 9px 18px; font-size: 15px; font-weight: 700; letter-spacing: 1px;
  background: var(--amber); color: var(--crt-bg);
  border: 1px solid var(--amber-2); border-radius: 0; cursor: pointer;
  transition: all .1s; box-shadow: 0 0 12px color-mix(in srgb, var(--amber) 25%, transparent);
}
.chat-input-row button:hover { background: var(--amber-2); }
.chat-input-row button:active { transform: translateY(1px); }

/* ============ 行情按鈕（桌機隱藏） ============ */
.watchlist-btn {
  display: none;
  padding: 5px 12px; font-size: 15px; font-family: var(--mono);
  background: var(--field); border: 1px solid var(--line-2);
  border-radius: 0; color: var(--amber); cursor: pointer;
}

/* ============ 儲值彈窗 ============ */
.modal-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.78);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-mask.open { display: flex; }
.modal {
  width: 100%; max-width: 380px;
  background: var(--panel);
  border: 2px solid var(--amber);
  border-radius: 0;
  padding: 22px 20px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 0 0 1px #000, 0 0 30px color-mix(in srgb, var(--amber) 18%, transparent);
  animation: modalIn .18s ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.modal-title { font-size: 19px; font-weight: 900; text-align: center; color: var(--amber); letter-spacing: 2px; text-shadow: var(--amber-glow); }
.modal-sub { font-family: var(--mono); font-size: 14px; color: var(--cream-dim); text-align: center; margin: 6px 0 18px; }
.pkg-list { display: flex; flex-direction: column; gap: 9px; }
.pkg {
  position: relative; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px; padding: 13px 14px;
  background: var(--field); border: 1px solid var(--line-2); border-radius: 0;
  color: var(--cream); cursor: pointer; transition: all .12s; text-align: left;
}
.pkg:hover { border-color: var(--amber); background: var(--panel-2); }
.pkg:active { transform: translateY(1px); }
.pkg.hot { border-color: var(--amber); }
.pkg-coins { font-family: var(--mono); font-size: 22px; color: var(--amber); text-shadow: var(--amber-glow); }
.pkg-name { font-size: 14px; }
.pkg-price { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--cream); }
.pkg-badge {
  position: absolute; top: -9px; right: 12px;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  padding: 1px 8px; border-radius: 0;
  background: var(--down); color: #000;
}
.pkg-badge.gold { background: var(--amber); color: var(--crt-bg); }
.modal-cancel {
  width: 100%; margin-top: 14px; padding: 10px; font-size: 14px; font-family: var(--mono);
  background: transparent; border: 1px solid var(--line); border-radius: 0;
  color: var(--cream-dim); cursor: pointer;
}
.modal-cancel:hover { color: var(--cream); border-color: var(--line-2); }

/* ============ 抽屜遮罩 ============ */
.drawer-mask { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); display: none; }
.drawer-mask.open { display: block; }

/* ============ 平板 ============ */
@media (max-width: 1100px) and (min-width: 769px) {
  .watchlist { width: 204px; }
  .chat { width: 300px; }
  .sh-ohlc { font-size: 12px; }   /* 開高低量張：縮小保住標題列 */
  .sh-price { font-size: 30px; }
  .sh-change { font-size: 16px; }
}

/* ============ 📱 手機（直立） ============ */
@media (max-width: 768px) {
  /* iPhone 圓角與 Home indicator：邊距取 6px 與 safe-area 較大者，面板框不被玻璃圓角切到 */
  main {
    flex-direction: column; gap: 6px;
    padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  header { padding: max(7px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 7px max(10px, env(safe-area-inset-left)); gap: 8px; overflow: hidden; }
  /* 手機 header 精簡：副標、彈幕字、room-tabs、在線人數(聊天室標題已有「· X 人」，去重複兼解溢出) 全拔 */
  .logo-sub, .switch-label, .online, .room-tabs { display: none; }
  .logo-text { font-size: 19px; }
  .header-right { gap: 12px; flex-shrink: 0; }       /* 功能鈕不被壓掉 */
  .logo { flex-shrink: 0; }                            /* logo 全顯示不截斷；右側功能鈕已精簡讓出空間 */
  .logo-text { white-space: nowrap; }

  .chart-area { flex: 0 0 34dvh; min-height: 200px; }
  .stock-header { padding: 7px 12px; gap: 8px; flex-wrap: nowrap; } /* 不換行；數字縮、股名全顯示 */
  .sh-name { font-size: 15px; white-space: nowrap; flex-shrink: 0; } /* 股名優先全顯示，不截斷 */
  .sh-price { font-size: clamp(18px, 6vw, 28px); flex-shrink: 1; min-width: 0; } /* 數字讓位給股名 */
  .sh-change { font-size: 15px; flex-shrink: 0; white-space: nowrap; }
  .sh-ohlc { display: none; }
  .chart-footer { display: none; }
  .limit-badge { font-size: 12px; padding: 1px 6px; margin-left: 6px; flex-shrink: 0; } /* 手機徽章縮小 */

  .chat { width: 100%; flex: 1; min-height: 0; }
  /* 訊息區為王：輸入塢寸土必爭，全部壓到最扁 */
  .chat-messages { padding: 8px 10px; gap: 7px; }
  .chat-dock { padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); gap: 4px; border-top-width: 1px; }
  .chat-input-row { gap: 6px; }
  /* 字級必須 ≥16px 防 iOS 自動放大，只縮 padding */
  .chat-input-row input { font-size: 16px; padding: 7px 11px; }
  .search-box input { font-size: 16px; }
  .chat-input-row button { padding: 7px 13px; font-size: 14px; }
  .quick-emotes { gap: 5px; }
  .quick-emotes button { padding: 3px 9px; font-size: 12px; } /* 模板貼圖：縮到最小 */
  .effect-bar { gap: 4px 6px; }
  .effect-chip { padding: 3px 7px; font-size: 11.5px; }
  .effect-chip b { font-size: 12px; }
  .coin-balance { font-size: 14px; }
  .topup-btn { padding: 2px 7px; font-size: 11px; }
  .msg-text { font-size: 15px; }

  .danmaku { font-size: 17px; }
}

/* 副標：900px 以下版面極限，裝飾性文字讓位 */
@media (max-width: 900px) { .logo-sub { display: none !important; } }

/* ============ 行情抽屜（直立 + 橫放手機共用） ============ */
@media (max-width: 768px), (max-width: 1024px) and (max-height: 520px), (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
  .watchlist-btn { display: block; flex-shrink: 0; }
  /* 準心讀數(開高低收)：手機一長串會蓋半張圖 → 縮到剛好可讀 */
  .chart-legend { font-size: 11px; padding: 1px 5px; top: 4px; left: 6px; }
  /* 週期/指標列：可以用就好 —— 字縮、padding 壓扁，把高度還給圖 */
  .range-bar button { font-size: 13px; padding: 5px 3px; }
  .ind-bar button { font-size: 11px; padding: 3px 3px; }
  .watchlist {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(80vw, 320px); z-index: 100;
    background: var(--crt-bg);
    border-right: 2px solid var(--amber);
    transform: translateX(-105%); transition: transform .2s ease;
    display: flex; padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left); /* 抽屜避開瀏海 */
  }
  .watchlist.open { transform: none; }
  .wl-row { padding: 11px 12px; }
  /* 彈幕「不」做全螢幕固定層：iOS Safari 對 fixed + pointer-events:none 的全螢幕層會
     無視 pointer-events、吃掉下方(圖表 + 週期/指標鈕)的觸控 → 整張圖完全不能操作。
     改讓彈幕維持在圖表區內（base 的 position:absolute），互動才不會被擋。 */
}

/* ============ 📱 手機橫放（寬而矮：左圖右聊，號子留言板高密度） ============ */
@media (max-width: 1024px) and (max-height: 520px) {
  /* 橫放：避開瀏海(左右 safe-area)，保留一條纖細標題列（標題在左）*/
  main {
    flex-direction: row; gap: 6px; padding: 6px;
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  header { padding: 2px max(10px, env(safe-area-inset-right)) 2px max(10px, env(safe-area-inset-left)); gap: 8px; flex-wrap: nowrap; min-height: 0; }
  .logo-sub, .switch-label { display: none; }
  .logo-text { font-size: 15px; }
  .logo-mark { font-size: 14px; }
  .room-tabs { display: none; }
  .header-right { margin-left: auto; gap: 10px; }
  .watchlist-btn { display: block; padding: 3px 9px; font-size: 13px; }

  .chart-area { flex: 0 0 clamp(280px, 38vw, 420px); min-height: 0; }
  .stock-header { padding: 4px 12px; gap: 10px; flex-wrap: nowrap; overflow: hidden; }
  .sh-name { font-size: 13px; white-space: nowrap; }
  .sh-price { font-size: 24px; }
  .sh-change { font-size: 15px; white-space: nowrap; }
  .sh-ohlc, .chart-footer { display: none; }

  .chat { flex: 1; width: auto; min-width: 0; }
  .quick-emotes { display: flex; gap: 5px; }
  .quick-emotes button { padding: 2px 8px; font-size: 12px; }
  .chat-dock { padding: 5px 10px calc(5px + env(safe-area-inset-bottom)); gap: 5px; }
  .chat-input-row input { font-size: 16px; padding: 7px 11px; }
  .chat-input-row button { padding: 7px 13px; }

  .danmaku { font-size: 16px; }

  /* 號子跑馬燈式單行高密度：橫放矮，一行一則才塞得多 */
  .chat-header { padding: 4px 12px; }
  .nick-btn { padding: 2px 9px; }
  .chat-messages { gap: 2px; padding: 6px 10px; }
  .chat-msg { display: block; animation: none; }
  .avatar { display: none; }
  .msg-body { display: inline; }
  .msg-meta { display: inline; }
  .msg-meta .nick { font-size: 14px; }
  .msg-meta .time { display: none; }
  .msg-text { display: inline; font-size: 14px; margin-left: 6px; line-height: 1.35; }
}

/* ============================================================
   主題庫：每套 = 一組變數覆蓋 + 專屬爆點
   預設(:root) = broker 號子復古。html[data-theme=...] 蓋過。
   ============================================================ */

/* —— L7 全域：reduced-motion 時關閉所有常駐動畫（方法論硬門檻 #3） —— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   matrix 駭客任務 — 1999 你是駭進交易所的 Neo
   L3 純黑+數位雨 L5 綠磷光 L6 雨落 L7 bg 綠色雨柱
   ============================================================ */
html[data-theme="matrix"] {
  --crt-bg:#020803; --panel:#04120a; --panel-2:#082015; --slip:#06160d;
  --line:rgba(0,255,102,.2); --line-2:rgba(0,255,102,.5);
  --amber:#00ff66; --amber-2:#7dffa8; --amber-dim:#0a8c3c;
  --cream:#c8ffd4; --cream-dim:#56a873;
  --up:#ff5544; --down:#00e676; --flat:#5c8a6b;
  --up-glow:0 0 7px rgba(255,85,68,.6); --down-glow:0 0 8px rgba(0,230,118,.7);
  --amber-glow:0 0 9px rgba(0,255,102,.8);
  --ind1:#aaff66; --ind2:#33ddff; --ind3:#ffffff;
}
/* L2 整站等寬終端字；logo 帶磷光殘影 */
html[data-theme="matrix"] .logo-text {
  font-family: var(--mono); font-weight: 400; font-size: 26px; letter-spacing: 1px;
  text-shadow: 0 0 6px #00ff66, 0 0 18px rgba(0,255,102,.6), 2px 2px 0 rgba(0,80,30,.8);
}
html[data-theme="matrix"] .logo-sub::before { content: "> "; }
html[data-theme="matrix"] .logo-sub::after { content: "_"; animation: ledblink 1s steps(2) infinite; }
/* L7 數位雨：兩層綠色雨柱在背景直落（transform-only，唯一常駐動畫） */
html[data-theme="matrix"] .bg-glow { background: none; }
html[data-theme="matrix"] .chat { position: relative; overflow: hidden; }
html[data-theme="matrix"] .chat::before {
  content: ""; position: absolute; left: 0; right: 0; top: -100%; height: 200%; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(0,255,102,.07) 22px 24px, transparent 24px 53px, rgba(0,255,102,.04) 53px 55px),
    repeating-linear-gradient(180deg, transparent 0 12px, rgba(0,255,102,.05) 12px 14px);
  animation: mxRain 9s linear infinite;
}
@keyframes mxRain { to { transform: translateY(50%); } }

/* ============================================================
   cyber 賽博龐克 — 2077 夜之城地下交易所
   L4 面板切角 L5 青粉雙霓虹 L6 logo 故障閃 L7 缺角+漸層字
   ============================================================ */
html[data-theme="cyber"] {
  --crt-bg:#060114; --panel:#0c0424; --panel-2:#150b38; --slip:#10062c;
  --line:rgba(0,229,255,.22); --line-2:rgba(0,229,255,.55);
  --amber:#00e5ff; --amber-2:#7df4ff; --amber-dim:#0590a8;
  --cream:#e6f7ff; --cream-dim:#7b90ad;
  --up:#ff2e63; --down:#00ff9f; --flat:#7a7f99;
  --up-glow:0 0 8px rgba(255,46,99,.75); --down-glow:0 0 8px rgba(0,255,159,.7);
  --amber-glow:0 0 9px rgba(0,229,255,.8);
  --ind1:#ffe14a; --ind2:#ff2e63; --ind3:#bd6bff;
  --mono: "Orbitron", "Noto Sans TC", monospace;   /* L2 全站數字 = 科技廣體 */
  --chart-fs: 10;                                   /* Orbitron 寬，座標軸字縮小防爆 */
}
html[data-theme="cyber"] .sh-price { font-size: 27px; }
html[data-theme="cyber"] .sh-change { font-size: 14px; }
html[data-theme="cyber"] .sh-ohlc { font-size: 11px; }
html[data-theme="cyber"] .chart-legend { font-size: 11px; }
html[data-theme="cyber"] .logo-text { font-size: 17px; letter-spacing: 2px; }
/* Orbitron 比 VT323 寬大 → 字級補償 */
html[data-theme="cyber"] .wl-price { font-size: 15px; }
html[data-theme="cyber"] .wl-pct, html[data-theme="cyber"] .wl-code { font-size: 11px; }
html[data-theme="cyber"] .online, html[data-theme="cyber"] .coin-balance { font-size: 13px; }
html[data-theme="cyber"] .switch-label, html[data-theme="cyber"] .market-status, html[data-theme="cyber"] .logo-sub { font-size: 11px; }
html[data-theme="cyber"] .bg-glow { background:
  radial-gradient(900px 500px at 85% -10%, rgba(0,229,255,.1), transparent 55%),
  radial-gradient(800px 600px at 5% 110%, rgba(255,46,99,.09), transparent 55%); }
/* L2+L6 Orbitron 漸層霓虹字 + 故障閃（唯一常駐） */
html[data-theme="cyber"] .logo-text {
  font-family: "Orbitron", "Noto Sans TC", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: 3px;
  background: linear-gradient(90deg, #00e5ff, #bd6bff, #ff2e63);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 7px rgba(0,229,255,.55));
  animation: cyGlitch 5s steps(1) infinite;
}
@keyframes cyGlitch {
  0%, 93%, 100% { transform: none; opacity: 1; }
  94% { transform: translateX(2px) skewX(-8deg); opacity: .8; }
  95% { transform: translateX(-2px) skewX(6deg); }
  96% { transform: none; }
}
/* L4 簽名切角：面板與彈窗右上/左下缺一刀 */
html[data-theme="cyber"] .panel, html[data-theme="cyber"] .modal {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
html[data-theme="cyber"] .room-tab.active, html[data-theme="cyber"] .effect-chip.active {
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
/* L6 跑馬光邊框：霓虹沿著邊框流動(類電子花車跑燈)。旋轉 conic 漸層 + mask 只露邊框環。四大欄位全掛。 */
@property --cy-edge { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html[data-theme="cyber"] .chat, html[data-theme="cyber"] .modal,
html[data-theme="cyber"] .watchlist, html[data-theme="cyber"] .chart-area { position: relative; }
html[data-theme="cyber"] .chat::after, html[data-theme="cyber"] .modal::after,
html[data-theme="cyber"] .watchlist::after, html[data-theme="cyber"] .chart-area::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  padding: 1.6px;   /* 邊框環厚度 */
  background: conic-gradient(from var(--cy-edge),
    transparent 0 48%, #00e5ff 64%, #bd6bff 75%, #ff2e63 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;   /* 只留 padding 邊框環，中間挖空 */
  animation: cyEdgeRun 3s linear infinite;
}
/* 切角面板的環跟著切角；K線區(.chart-area)矩形不切角 */
html[data-theme="cyber"] .chat::after, html[data-theme="cyber"] .modal::after, html[data-theme="cyber"] .watchlist::after {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
@keyframes cyEdgeRun { to { --cy-edge: 360deg; } }
/* 手機抽屜：.watchlist 還原 fixed(themed position:relative 會蓋掉抽屜 fixed、擠爆版面) */
@media (max-width: 768px), (max-width: 1024px) and (max-height: 520px), (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
  html[data-theme="cyber"] .watchlist { position: fixed; }
}

/* ============================================================
   vapor 蒸氣波 — 1986 邁阿密日落錄影帶
   L2 Monoton 霓虹管字 L3 VHS 紋 L6 地平線網格捲動 L7 透視網格
   ============================================================ */
html[data-theme="vapor"] {
  --crt-bg:#190b2e; --panel:#221140; --panel-2:#2e1a54; --slip:#261447;
  --line:rgba(255,113,206,.25); --line-2:rgba(255,113,206,.55);
  --amber:#ff71ce; --amber-2:#ffa6e3; --amber-dim:#a8478c;
  --cream:#f3e8ff; --cream-dim:#a692c4;
  --up:#ff3860; --down:#05ffa1; --flat:#8d82a8;
  --up-glow:0 0 8px rgba(255,56,96,.7); --down-glow:0 0 8px rgba(5,255,161,.7);
  --amber-glow:0 0 9px rgba(255,113,206,.75);
  --ind1:#fffb96; --ind2:#01cdfe; --ind3:#b967ff;
  --han: "Noto Serif TC", "PingFang TC", serif;    /* L2 全站明體＝夢核文藝感 */
  --mono: "Noto Serif TC", "Times New Roman", serif; /* 數字也走 serif＝蒸氣波經典 Times 味 */
}
html[data-theme="vapor"] .wl-price { font-size: 16px; }
html[data-theme="vapor"] body { background-image:
  linear-gradient(180deg, rgba(1,205,254,.05), transparent 30%),
  radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(20,5,40,.6) 100%); }
/* L2 霓虹管字：Monoton 只有英數 → 中文掉回粗黑體也成立 */
html[data-theme="vapor"] .logo-text {
  font-family: "Monoton", "Noto Sans TC", cursive; font-weight: 400; font-size: 21px; letter-spacing: 2px;
  color: #ff71ce; text-shadow: 0 0 8px rgba(255,113,206,.9), 0 0 30px rgba(255,113,206,.45);
}
html[data-theme="vapor"] .logo-sub { color: #01cdfe; text-shadow: 0 0 6px rgba(1,205,254,.6); }
/* L7 日落透視網格地平線（唯一常駐：網格向觀者捲動） */
html[data-theme="vapor"] .bg-glow { background:
  radial-gradient(900px 480px at 50% -16%, rgba(255,113,206,.18), transparent 60%); }
html[data-theme="vapor"] .chat { position: relative; overflow: hidden; }
/* 控制區實底：網格不准透進標題列與操作區（透明區域 z 再高也會透出後面） */
html[data-theme="vapor"] .chat-header, html[data-theme="vapor"] .chat-dock { background: var(--panel); }
html[data-theme="vapor"] .chat::after {
  content: ""; position: absolute; left: -25%; right: -25%; bottom: -6%; height: 52%;
  background:
    repeating-linear-gradient(90deg, rgba(1,205,254,.28) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(180deg, rgba(1,205,254,.28) 0 1px, transparent 1px 34px);
  transform: perspective(320px) rotateX(62deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(180deg, transparent, #000 28%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%);
  animation: vpGrid 3.2s linear infinite;
}
@keyframes vpGrid { to { transform: perspective(320px) rotateX(62deg) translateY(34px); } }

/* ============================================================
   bberg 法人終端 — 凌晨 4 點的彭博機
   L3 無質感(資訊即質感) L5 無光 L6 無動畫(穩定=專業) L7 橘雙規則線
   ============================================================ */
html[data-theme="bberg"] {
  --crt-bg:#07090f; --panel:#0d1320; --panel-2:#141d30; --slip:#101828;
  --line:rgba(255,140,0,.25); --line-2:rgba(255,140,0,.55);
  --amber:#ff8c00; --amber-2:#ffb347; --amber-dim:#a85f00;
  --cream:#dce6f5; --cream-dim:#8493ad;
  --up:#ff4848; --down:#2ee06f; --flat:#76839b;
  --up-glow:none; --down-glow:none; --amber-glow:none;
  --chart-glow: saturate(1.06);              /* 法人桌：只微調飽和，不發光 */
  --ind1:#ffb347; --ind2:#4da3ff; --ind3:#c39bff;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", "Noto Sans TC", monospace;
}
html[data-theme="bberg"] body::after { display: none; }       /* 終端機沒有掃描線濾鏡 */
html[data-theme="bberg"] body { background-image: none; }      /* 也沒有暈影 */
html[data-theme="bberg"] .bg-glow { background: none; }
html[data-theme="bberg"] .logo-text { font-weight: 700; letter-spacing: 1px; font-size: 19px; text-shadow: none; }
html[data-theme="bberg"] .logo-mark { animation: none; }       /* 法人桌沒有跑馬燈 */
/* L7 簽名：彭博橘雙規則線 */
html[data-theme="bberg"] header { border-bottom: 3px double var(--amber); }
html[data-theme="bberg"] .panel { box-shadow: none; }

/* ============================================================
   gold 黑金尊爵 — 私人銀行 VIP 室
   L2 明體 L3 黑絲絨+金箔 L5 金色 sheen L6 金光掃過 L7 四角金角框
   ============================================================ */
html[data-theme="gold"] {
  --crt-bg:#060604; --panel:#0f0d07; --panel-2:#181307; --slip:#13100a;
  --line:rgba(212,175,55,.28); --line-2:rgba(212,175,55,.6);
  --amber:#d4af37; --amber-2:#f1d97a; --amber-dim:#8a7223;
  --cream:#f0e6cc; --cream-dim:#9c9275;
  --up:#ff4133; --down:#25d97a; --flat:#948b6e;
  --up-glow:0 0 7px rgba(255,65,51,.6); --down-glow:0 0 7px rgba(37,217,122,.55);
  --amber-glow:0 0 10px rgba(212,175,55,.65);
  --ind1:#f1d97a; --ind2:#9fd2ff; --ind3:#e6a8ff;
  --han: "Noto Serif TC", "PingFang TC", serif;    /* L2 全站明體 */
  --mono: "Noto Serif TC", serif;                  /* 數字也走 serif＝精品價牌 */
}
html[data-theme="gold"] .wl-price { font-size: 16px; }
html[data-theme="gold"] .bg-glow { background:
  radial-gradient(900px 500px at 50% -10%, rgba(212,175,55,.09), transparent 55%),
  radial-gradient(800px 600px at 50% 115%, rgba(212,175,55,.06), transparent 55%); }
/* L2 燙金明體 logo */
html[data-theme="gold"] .logo-text {
  font-family: "Noto Serif TC", serif; font-weight: 900; letter-spacing: 4px; font-size: 21px;
  background: linear-gradient(180deg, #f9e9a8 20%, #d4af37 50%, #9a7b1f 52%, #f1d97a 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 1px 4px rgba(212,175,55,.5));
}
html[data-theme="gold"] .logo-sub, html[data-theme="gold"] .panel-title { font-family: "Noto Serif TC", serif; }
/* L6 金光 sheen 掃過 header（唯一常駐） */
html[data-theme="gold"] header { position: relative; overflow: hidden; }
html[data-theme="gold"] header::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,235,170,.09) 50%, transparent);
  animation: auSheen 5.5s ease-in-out infinite; transform: translateX(-160%);
}
@keyframes auSheen { 55%, 100% { transform: translateX(420%); } }
/* L7 面板對角金角框
   注意：.panel{position:relative} 會蓋掉手機抽屜的 position:fixed（曾把整頁擠出視窗），
   所以手機/橫式抽屜斷點要還原 fixed 並關掉角框 */
html[data-theme="gold"] .panel { position: relative; }
@media (max-width: 768px), (max-width: 1024px) and (max-height: 520px), (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
  html[data-theme="gold"] .watchlist { position: fixed; }
  html[data-theme="gold"] .panel::before, html[data-theme="gold"] .panel::after { display: none; }
}
html[data-theme="gold"] .panel::before {
  content: ""; position: absolute; inset: 3px; pointer-events: none; z-index: 5;
  background:
    linear-gradient(#d4af37,#d4af37) left  top    / 14px 1px no-repeat,
    linear-gradient(#d4af37,#d4af37) left  top    / 1px 14px no-repeat,
    linear-gradient(#d4af37,#d4af37) right top    / 14px 1px no-repeat,
    linear-gradient(#d4af37,#d4af37) right top    / 1px 14px no-repeat,
    linear-gradient(#d4af37,#d4af37) left  bottom / 14px 1px no-repeat,
    linear-gradient(#d4af37,#d4af37) left  bottom / 1px 14px no-repeat,
    linear-gradient(#d4af37,#d4af37) right bottom / 14px 1px no-repeat,
    linear-gradient(#d4af37,#d4af37) right bottom / 1px 14px no-repeat;
}

/* ============================================================
   btl 電子花車 — 廟會夜市，越俗越強
   L5 三色霓虹輪播 L6 燈泡跑馬燈（刻意雙動畫：俗即是美） L7 header 燈鏈
   ============================================================ */
html[data-theme="btl"] {
  --crt-bg:#0d0014; --panel:#190026; --panel-2:#260639; --slip:#1f0430;
  --line:rgba(255,46,196,.3); --line-2:rgba(255,46,196,.6);
  --amber:#ff2ec4; --amber-2:#ff7ae0; --amber-dim:#a8008a;
  --cream:#ffe9fb; --cream-dim:#bb95b6;
  --up:#ff3344; --down:#39ff14; --flat:#a08aa0;
  --up-glow:0 0 9px rgba(255,51,68,.8); --down-glow:0 0 9px rgba(57,255,20,.8);
  --amber-glow:0 0 10px rgba(255,46,196,.85);
  --ind1:#ffee33; --ind2:#33ccff; --ind3:#39ff14;
  --han: "Chocolate Classical Sans", "Noto Sans TC", sans-serif;  /* L2 港式招牌字 */
  --mono: "Chocolate Classical Sans", "Noto Sans TC", sans-serif; /* 數字同款＝整塊招牌 */
}
html[data-theme="btl"] .wl-price { font-size: 16px; }
html[data-theme="btl"] .bg-glow { background:
  radial-gradient(900px 500px at 85% -10%, rgba(255,46,196,.14), transparent 55%),
  radial-gradient(800px 600px at 5% 110%, rgba(57,255,20,.1), transparent 55%); }
@keyframes btlNeon {
  0%, 100% { text-shadow: 0 0 8px #ff2ec4, 0 0 22px rgba(255,46,196,.7); color: #ff7ae0; }
  33%      { text-shadow: 0 0 8px #ffee33, 0 0 22px rgba(255,238,51,.7); color: #fff3a6; }
  66%      { text-shadow: 0 0 8px #39ff14, 0 0 22px rgba(57,255,20,.7);  color: #a6ffa0; }
}
html[data-theme="btl"] .logo-text {
  font-family: "Chocolate Classical Sans", "Noto Sans TC", sans-serif;
  font-weight: 400; font-size: 24px;
  animation: btlNeon 2.4s steps(1) infinite;
}
html[data-theme="btl"] .logo-mark { animation: btlNeon 2.4s steps(1) infinite reverse; }
/* L7 簽名改走「整台外圍大跑馬燈」(.btl-marquee) → header 藍霓虹管移除(功能重複又跟燈框打架) */
html[data-theme="btl"] header {
  position: relative;
  border-bottom: 1px solid rgba(255,46,196,.22);
  box-shadow: none;
}

/* ============================================================
   arcade 紅白機 — 1990 巷口柑仔店機台
   L2 Press Start 2P L4 像素階梯框 L6 瞬間切換(無過場) L7 INSERT COIN
   ============================================================ */
html[data-theme="arcade"] {
  --crt-bg:#101024; --panel:#181838; --panel-2:#222250; --slip:#1c1c42;
  --line:rgba(255,204,0,.35); --line-2:rgba(255,204,0,.7);
  --amber:#ffcc00; --amber-2:#ffe066; --amber-dim:#b8930a;
  --cream:#f4f4ff; --cream-dim:#9a9ac0;
  --up:#ff4554; --down:#30e851; --flat:#8a8ab0;
  --up-glow:none; --down-glow:none; --amber-glow:none;
  --chart-glow: saturate(1.12);              /* 8-bit：色塊更豔但不暈 */
  --ind1:#ffe066; --ind2:#4dd5ff; --ind3:#ff85c2;
  --han: "Cubic 11", "Noto Sans TC", sans-serif;   /* L2 連中文都是像素字 */
  --mono: "Cubic 11", "VT323", monospace;
}
html[data-theme="arcade"] .logo-text {
  font-family: "Press Start 2P", "Cubic 11", monospace;  /* 英數 8-bit、中文像素 */
  font-size: 14px; letter-spacing: 1px; color: #ffcc00;
  text-shadow: 2px 2px 0 #c4302b, 4px 4px 0 #000;
}
/* L7 INSERT COIN 閃爍 */
html[data-theme="arcade"] .logo-sub { font-family: "Press Start 2P", "Cubic 11", monospace; font-size: 8px; letter-spacing: 0; }
html[data-theme="arcade"] .logo-sub::after { content: "  ▶ INSERT COIN"; color: #ffcc00; animation: ledblink 1.1s steps(2) infinite; }
/* L3 粗掃描線（8-bit 電視）+ L4 像素雙層框 */
html[data-theme="arcade"] body::after {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.22) 3px 4px); animation: none;
}
html[data-theme="arcade"] .panel { border: 3px solid #ffcc00; box-shadow: 0 0 0 3px #000, 6px 6px 0 0 rgba(0,0,0,.55); }
/* L6 街機沒有漸變：互動瞬間切換 */
html[data-theme="arcade"] button, html[data-theme="arcade"] .wl-row, html[data-theme="arcade"] .room-tab { transition: none; }

/* ============================================================
   paper 晨間財經 — 清晨 6 點配豆漿的工商時報（亮色）
   L2 明體報頭 L3 米黃紙+油墨雜訊 L5 無光 L6 靜止 L7 報頭雙規則線
   ============================================================ */
html[data-theme="paper"] {
  --crt-bg:#f3ecda; --panel:#faf6ea; --panel-2:#eee5cf; --slip:#f6f0df;
  --line:rgba(70,50,25,.3); --line-2:rgba(70,50,25,.55);
  --amber:#b3261e; --amber-2:#8c1d17; --amber-dim:#c9b489;
  --cream:#2b2218; --cream-dim:#6e6450;
  --up:#c81e1e; --down:#0c7a43; --flat:#7a6f5c;
  --up-glow:none; --down-glow:none; --amber-glow:none;
  --chart-glow: none;                        /* 紙上油墨不發光 */
  --ind1:#b8860b; --ind2:#1d5fa8; --ind3:#7b3fa0;
  --field:#fffdf6;
  --han: "Noto Serif TC", "PingFang TC", serif;    /* L2 報紙內文＝明體 */
  --mono: "Noto Serif TC", serif;                  /* 印刷數字 */
}
html[data-theme="paper"] .wl-price { font-size: 16px; }
html[data-theme="paper"] body::after { display: none; }   /* 紙上沒有掃描線 */
html[data-theme="paper"] .bg-glow { background: none; }
/* L3 油墨雜訊紙紋（內嵌 SVG noise，零請求） */
html[data-theme="paper"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* L2+L7 報頭：明體 + 雙規則線 */
html[data-theme="paper"] header { background: linear-gradient(180deg, #f8f3e4, #efe7d2); border-bottom: 4px double #2b2218; box-shadow: none; }
html[data-theme="paper"] .logo-text { font-family: "Noto Serif TC", serif; font-weight: 900; letter-spacing: 3px; color: #2b2218; text-shadow: none; }
html[data-theme="paper"] .logo-sub { font-family: "Noto Serif TC", serif; color: #6e6450; }
html[data-theme="paper"] .logo-mark { color: #b3261e; text-shadow: none; animation: none; }
html[data-theme="paper"] .panel-title, html[data-theme="paper"] .modal-title { font-family: "Noto Serif TC", serif; }
html[data-theme="paper"] .panel { box-shadow: none; border-color: rgba(70,50,25,.45); }
html[data-theme="paper"] .modal { background: #faf6ea; }
html[data-theme="paper"] .watchlist-footer { border-top: 1px solid rgba(70,50,25,.35); }
html[data-theme="paper"] .chat-dock { border-top: 1px solid rgba(70,50,25,.3); }   /* 原 2px 深褐=印堂發黑 */
html[data-theme="paper"] .chat-header { border-bottom-color: rgba(70,50,25,.3); }
html[data-theme="paper"] .danmaku { text-shadow: none; } /* 報紙：純印刷感，亮底不需要影 */

/* ============================================================
   nvg 夜視作戰 — 凌晨突擊行動的夜視鏡
   L3 筒狀視野 L5 綠磷光 L6 雷達掃描 L7 圖表 HUD 角括弧
   ============================================================ */
html[data-theme="nvg"] {
  --crt-bg:#050a04; --panel:#0a140a; --panel-2:#122112; --slip:#0e1a0d;
  --line:rgba(138,255,90,.22); --line-2:rgba(138,255,90,.5);
  --amber:#8aff5a; --amber-2:#c0ff8a; --amber-dim:#4e8c2e;
  --cream:#d8f5c8; --cream-dim:#7da46c;
  --up:#ff5533; --down:#44ff77; --flat:#739963;
  --up-glow:0 0 8px rgba(255,85,51,.7); --down-glow:0 0 8px rgba(68,255,119,.7);
  --amber-glow:0 0 9px rgba(138,255,90,.75);
  --ind1:#e8ff8a; --ind2:#5ad8ff; --ind3:#ffffff;
  --mono: "Share Tech Mono", "Noto Sans TC", monospace;  /* L2 軍規 HUD 等寬數字 */
}
html[data-theme="nvg"] .wl-price { font-size: 16px; }
html[data-theme="nvg"] .online, html[data-theme="nvg"] .coin-balance { font-size: 14px; }
html[data-theme="nvg"] .switch-label, html[data-theme="nvg"] .market-status, html[data-theme="nvg"] .logo-sub { font-size: 12px; }
/* L3 夜視鏡筒狀視野 */
html[data-theme="nvg"] body { background-image:
  radial-gradient(120% 100% at 50% 50%, transparent 45%, rgba(2,12,2,.85) 100%); }
/* L2 軍規字 */
html[data-theme="nvg"] .logo-text {
  font-family: "Orbitron", "Noto Sans TC", sans-serif; font-weight: 500; font-size: 18px;
  letter-spacing: 5px; text-shadow: 0 0 7px rgba(138,255,90,.9);
}
html[data-theme="nvg"] .logo-sub::before { content: "[ "; } html[data-theme="nvg"] .logo-sub::after { content: " ]"; }
/* L6 雷達掃描（唯一常駐：旋轉光束） */
html[data-theme="nvg"] .bg-glow { background:
  radial-gradient(700px 500px at 50% 50%, rgba(138,255,90,.05), transparent 70%); }
html[data-theme="nvg"] .chat { position: relative; overflow: hidden; }
html[data-theme="nvg"] .chat::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 240%; height: 240%;
  background: conic-gradient(from 0deg, transparent 0 326deg, rgba(138,255,90,.1) 348deg, rgba(138,255,90,.2) 358deg, transparent 360deg);
  animation: nvSweep 6s linear infinite;
}
@keyframes nvSweep { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
/* L7 圖表四角 HUD 括弧 */
html[data-theme="nvg"] .chart-wrap { position: relative; }
html[data-theme="nvg"] .chart-wrap::before, html[data-theme="nvg"] .chart-wrap::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 5;
}
html[data-theme="nvg"] .chart-wrap::before { top: 4px; left: 4px; border-top: 1px solid #8aff5a; border-left: 1px solid #8aff5a; }
html[data-theme="nvg"] .chart-wrap::after { bottom: 4px; right: 4px; border-bottom: 1px solid #8aff5a; border-right: 1px solid #8aff5a; }

/* ============================================================
   主題切換器 UI
   ============================================================ */
/* 主題切換鈕：自帶廣告 —— 彩虹光環緩轉(暗示「這裡有顏色」)+ 週期招手 + hover 轉起來 */
/* 主題鈕：當前主題三色色票即按鈕（窄、精緻、隨主題變色，不擠到 logo） */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 5px;
  padding: 5px 9px; background: transparent; border: 1px solid var(--line); border-radius: 0;
  font-family: var(--han); font-size: 14px; font-weight: 700; letter-spacing: 1px; line-height: 1;
  color: var(--cream-dim); white-space: nowrap;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s, color .15s;
}
.theme-btn:hover { color: var(--cream); }
.theme-btn::before {           /* 當前主題三色斜分色票（換主題會跟著變） */
  content: ""; width: 17px; height: 17px;
  background: linear-gradient(135deg, var(--up) 0 34%, var(--amber) 34% 67%, var(--down) 67% 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.theme-btn:hover { border-color: var(--amber); box-shadow: 0 0 8px color-mix(in srgb, var(--amber) 35%, transparent); }
.theme-btn:active { transform: scale(.92); }
.theme-modal { max-width:520px; width:calc(100vw - 32px); }
.theme-grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;
  max-height:min(56vh, 460px); overflow-y:auto; margin:12px 0 4px; padding-right:2px;
}
.theme-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:10px 12px; text-align:left; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); border-radius:0;
  color:var(--cream); transition:border-color .12s, box-shadow .12s;
}
.theme-card:hover { border-color:var(--amber); }
.theme-card.active { border-color:var(--amber); box-shadow:inset 0 0 10px color-mix(in srgb, var(--amber) 18%, transparent); }
.theme-card.active .tc-name::after { content:" ✓"; color:var(--amber); }
.tc-dots { display:flex; gap:4px; }
.tc-dots i { width:14px; height:14px; border:1px solid rgba(128,128,128,.45); }
.tc-name { font-size:15px; font-weight:700; }
.tc-tag { font-size:12px; color:var(--cream-dim); line-height:1.3; }

/* ============================================================
   多巴胺層 v1 — 全域微互動 + 每主題亮點動效
   規則：只動 transform/opacity；reduced-motion 全關（前面全域規則已涵蓋）
   ============================================================ */

/* —— 聊天室舞台動效永遠墊在內容後面：內容(z:1) > 動效偽元素(z:0) > 面板底色 —— */
.chat > * { position: relative; z-index: 1; }

/* —— 全域微互動（所有主題共享的爽感底盤） —— */
button { transition: transform .08s ease-out; }
button:active { transform: scale(.93); }                /* 按下去要有感 */
.quick-emotes button:hover { transform: translateY(-2px); }
.wl-row { transition: transform .12s ease-out, background .1s; }
.wl-row:hover { transform: translateX(3px); }
.room-tab:hover { transform: translateY(-1px); }
.theme-card { transition: transform .12s ease-out, border-color .12s, box-shadow .12s; }
.theme-card:hover { transform: translateY(-2px); }
/* 新訊息彈入 */
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.chat-msg { animation: msgIn .18s ease-out; }
/* 切主題整頁柔和變色（換膚瞬間本身就是獎勵） */
body, header, .panel, .modal, .chat-dock, .search-box input, .chat-input-row input {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
/* 喊單鈕：呼吸光暈（全主題，色跟主題走） */
@keyframes sendPulse { 50% { box-shadow: 0 0 16px color-mix(in srgb, var(--amber) 45%, transparent); } }
#chat-send { animation: sendPulse 2.6s ease-in-out infinite; }

/* —— broker 號子復古：報價紙帶劃過 header —— */
html:not([data-theme]) header, html[data-theme="broker"] header { position: relative; overflow: hidden; }
html[data-theme="broker"] header::before, html:not([data-theme]) header::before {
  content: ""; position: absolute; left: 0; right: -80px; bottom: 0; height: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--amber) 0 14px, transparent 14px 28px);
  opacity: .5; animation: tickerCrawl 1.6s linear infinite;
}
@keyframes tickerCrawl { to { transform: translateX(-28px); } }

/* —— matrix：第二層快雨（視差深度） —— */
html[data-theme="matrix"] .chat::after {
  content: ""; position: absolute; left: 0; right: 0; top: -100%; height: 200%; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 37px, rgba(0,255,102,.05) 37px 38px);
  animation: mxRain 4.5s linear infinite;
}

/* —— cyber：青色掃描光束每 6 秒掠過全屏 —— */
html[data-theme="cyber"] .chat { position: relative; overflow: hidden; }
/* 特殊主題加碼：聊天室背景 = 持續上捲的霓虹資料網格(雙色格線 + 上方淡出做景深)。transform 驅動零重繪。 */
html[data-theme="cyber"] .chat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -23px; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(0,229,255,.09) 21px 23px),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(189,107,255,.06) 21px 23px);
  -webkit-mask: linear-gradient(0deg, #000 35%, transparent 92%);
          mask: linear-gradient(0deg, #000 35%, transparent 92%);
  animation: cyGrid 5.5s linear infinite;
}
@keyframes cyGrid { to { transform: translateY(-23px); } }
/* 啟用中的元素霓虹脈動 */
@keyframes cyPulse { 50% { box-shadow: 0 0 12px rgba(0,229,255,.55), inset 0 0 8px rgba(0,229,255,.25); } }
html[data-theme="cyber"] .effect-chip.active, html[data-theme="cyber"] .range-bar button.active { animation: cyPulse 2.2s ease-in-out infinite; }

/* —— vapor：日落圓盤緩慢浮沉 —— */
html[data-theme="vapor"] .chat::before {
  content: ""; position: absolute; right: 7%; top: 6%; width: 120px; height: 120px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(180deg, #ffa6e3 0 38%, transparent 38% 42%, #ff71ce 42% 58%, transparent 58% 62%, #b967ff 62% 78%, transparent 78% 82%, #01cdfe 82% 100%);
  opacity: .35; filter: blur(1px);
  animation: vpSun 7s ease-in-out infinite alternate;
}
@keyframes vpSun { to { transform: translateY(14px); } }

/* —— bberg：終端刷新線（極克制的 1px 橘線下掃） —— */
html[data-theme="bberg"] .chat { position: relative; overflow: hidden; }
html[data-theme="bberg"] .chat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,140,0,.45) 0 1px, transparent 1px);
  animation: bbRefresh 9s linear infinite;
}
@keyframes bbRefresh { 0%, 84% { transform: translateY(-101%); opacity: 0; } 86% { opacity: .7; } 100% { transform: translateY(101%); opacity: 0; } }

/* —— gold：金塵緩緩上飄 —— */
html[data-theme="gold"] .chat { overflow: hidden; }   /* .panel 已 position:relative */
html[data-theme="gold"] .chat.panel::after {
  content: ""; position: absolute; inset: -25% 0 0 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(2px 2px at 18% 80%, rgba(241,217,122,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 60%, rgba(212,175,55,.7), transparent 60%),
    radial-gradient(2px 2px at 78% 85%, rgba(241,217,122,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 30%, rgba(212,175,55,.5), transparent 60%),
    radial-gradient(2px 2px at 90% 40%, rgba(241,217,122,.5), transparent 60%);
  animation: auDust 13s linear infinite;
}
@keyframes auDust { to { transform: translateY(-22vh); } }

/* —— btl：喊單鈕三色霓虹輪播（跟 logo 同拍） —— */
@keyframes btlSend {
  0%, 100% { box-shadow: 0 0 14px rgba(255,46,196,.8); }
  33%      { box-shadow: 0 0 14px rgba(255,238,51,.8); }
  66%      { box-shadow: 0 0 14px rgba(57,255,20,.8); }
}
html[data-theme="btl"] #chat-send { animation: btlSend 2.4s steps(1) infinite; }
html[data-theme="btl"] .quick-emotes button:hover { transform: translateY(-2px) rotate(-2deg); }

/* —— arcade：▲ 像素跳跳 + 按鍵反白（街機按鍵手感） —— */
@keyframes pxHop { 0%, 60%, 100% { transform: translateY(0); } 70%, 90% { transform: translateY(-4px); } 80% { transform: translateY(-6px); } }
html[data-theme="arcade"] .logo-mark { animation: pxHop 1.6s steps(2) infinite; }
html[data-theme="arcade"] button:active { transform: none; background: var(--amber); color: #000; }
html[data-theme="arcade"] #chat-send { animation: ledblink 1.1s steps(2) infinite; }
/* ===== arcade 追加：更多 8-bit 機台元素(全通用復古元素，無任何任天堂商標/角色) ===== */
/* 快捷句 + 喊單鈕 → 街機實體按鈕(粗框 + 硬陰影 + 瞬間壓下，符合 L6 瞬切) */
html[data-theme="arcade"] .quick-emotes button, html[data-theme="arcade"] #chat-send {
  border: 2px solid currentColor; border-radius: 0; box-shadow: 3px 3px 0 rgba(0,0,0,.55);
}
html[data-theme="arcade"] .quick-emotes button:active, html[data-theme="arcade"] #chat-send:active {
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0,0,0,.55);
}
/* 在線指示 → 1P 玩家燈 */
html[data-theme="arcade"] .online::before { content: "1P "; color: #ff4554; margin-right: 2px; }
/* 漲停/跌停徽章 → 8-bit 分數牌(硬框硬影、方角) */
html[data-theme="arcade"] .limit-badge { border: 2px solid #fff; border-radius: 0; box-shadow: 3px 3px 0 rgba(0,0,0,.6); }

/* —— paper：紅印章「蓋」上去（載入一次，紙的世界保持安靜） —— */
@keyframes inkStamp { 0% { transform: scale(2.2) rotate(-14deg); opacity: 0; } 55% { transform: scale(.92) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
html[data-theme="paper"] .logo-mark { animation: inkStamp .5s cubic-bezier(.2,1.4,.4,1) 1 both; }
html[data-theme="paper"] #chat-send { animation: none; }   /* 紙上沒有霓虹呼吸 */

/* —— nvg：HUD 角括弧鎖定脈動 + 目標掃描 —— */
/* HUD 括弧維持靜態 —— K 線區不放動畫（使用者要求視線純淨） */
html[data-theme="nvg"] .pulse-dot { box-shadow: 0 0 10px rgba(138,255,90,.9); }

/* ============================================================
   多巴胺層 v2 — 精緻化（手感細節，拉開產品差距）
   哲學：獎勵藏在細節；動得少但動得「對」；彈簧曲線取代線性
   ============================================================ */

/* —— 全站手感底盤升級 —— */
::selection { background: var(--amber); color: var(--crt-bg); }     /* 連選取反白都是主題色 */
input { caret-color: var(--amber); }                                 /* 游標也是 */
/* 彈簧回彈：放開按鈕時微微過衝，手感從「開關」變「實體鍵」 */
button { transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
button:active { transform: scale(.93); transition-duration: .05s; }

/* —— 報價方向性跳動：漲→數字從下方頂上來；跌→從上方落下去 —— */
@keyframes tickUp   { 0% { transform: translateY(6px) scale(1.1);  opacity: .3; } }
@keyframes tickDown { 0% { transform: translateY(-6px) scale(1.1); opacity: .3; } }
.wl-row.flash-up .wl-price   { animation: tickUp .45s cubic-bezier(.2,.9,.3,1); }
.wl-row.flash-down .wl-price { animation: tickDown .45s cubic-bezier(.2,.9,.3,1); }

/* —— 聊天訊息精緻化：頭像彈入比訊息慢半拍（層次感） —— */
@keyframes avatarPop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } }
.chat-msg .avatar { animation: avatarPop .32s cubic-bezier(.34,1.56,.64,1) .06s backwards; }

/* —— 彈窗開場：縮放彈入 + 卡片梯次進場 —— */
@keyframes modalIn { 0% { transform: scale(.94) translateY(10px); opacity: 0; } }
.modal-mask.open .modal { animation: modalIn .28s cubic-bezier(.2,1.25,.4,1); }
@keyframes cardIn { 0% { transform: translateY(10px); opacity: 0; } }
.modal-mask.open .theme-card, .modal-mask.open .pkg { animation: cardIn .34s cubic-bezier(.2,.9,.3,1) backwards; }
.modal-mask.open :is(.theme-card, .pkg):nth-child(1) { animation-delay: .03s; }
.modal-mask.open :is(.theme-card, .pkg):nth-child(2) { animation-delay: .07s; }
.modal-mask.open :is(.theme-card, .pkg):nth-child(3) { animation-delay: .11s; }
.modal-mask.open :is(.theme-card, .pkg):nth-child(4) { animation-delay: .15s; }
.modal-mask.open :is(.theme-card, .pkg):nth-child(5) { animation-delay: .19s; }
.modal-mask.open :is(.theme-card, .pkg):nth-child(6) { animation-delay: .23s; }
.modal-mask.open :is(.theme-card, .pkg):nth-child(7) { animation-delay: .27s; }
.modal-mask.open :is(.theme-card, .pkg):nth-child(8) { animation-delay: .31s; }
.modal-mask.open :is(.theme-card, .pkg):nth-child(9) { animation-delay: .35s; }
.modal-mask.open :is(.theme-card, .pkg):nth-child(10) { animation-delay: .39s; }

/* —— 快捷喊話：每顆 hover 歪的方向不同（活的、不機械） —— */
.quick-emotes button:nth-child(odd):hover  { transform: translateY(-2px) rotate(-1.5deg); }
.quick-emotes button:nth-child(even):hover { transform: translateY(-2px) rotate(1.5deg); }

/* ============================================================
   💰 儲值鈕雕琢 — 盈利重頭戲：要像精品櫥窗，不像橫幅廣告
   ============================================================ */
.topup-btn { position: relative; overflow: hidden; }
/* 1) 流光：每 5 秒一道斜光掃過（精品櫥窗的打光，不是閃爍叫賣） */
.topup-btn::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -30%; width: 36%;
  background: linear-gradient(105deg, transparent, color-mix(in srgb, var(--amber-2) 55%, transparent) 50%, transparent);
  transform: translateX(-120%) skewX(-18deg); pointer-events: none;
  animation: topupGlint 5s ease-in-out infinite;
}
@keyframes topupGlint { 0%, 76% { transform: translateX(-120%) skewX(-18deg); } 92%, 100% { transform: translateX(420%) skewX(-18deg); } }
/* 2) hover：抬升 + 光暈綻放 + 填色 */
.topup-btn:hover {
  background: var(--amber); color: var(--crt-bg);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--amber), 0 0 18px color-mix(in srgb, var(--amber) 55%, transparent), 0 3px 8px rgba(0,0,0,.4);
}
/* 3) 未登入鎖定時：流光休眠（鎖著還閃就是叫賣） */
.is-guest .topup-btn::after { animation: none; }

/* —— 錢包餘額：金額變動時彈跳 + 增亮（花錢/入帳的瞬間回饋） —— */
@keyframes coinBump { 0% { transform: scale(1); } 35% { transform: scale(1.28); filter: brightness(1.6); } 100% { transform: scale(1); } }
.coin-balance { display: inline-block; }
.coin-balance.bump { animation: coinBump .5s cubic-bezier(.34,1.56,.64,1); }

/* —— 儲值彈窗方案卡：精品陳列 —— */
.pkg { position: relative; transition: transform .22s cubic-bezier(.34,1.56,.64,1), border-color .15s, background .15s; }
.pkg:hover { transform: translateY(-3px); border-color: var(--amber); box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 12px color-mix(in srgb, var(--amber) 22%, transparent); }
.pkg:active { transform: translateY(0) scale(.98); }
/* 主推方案：常駐一道緩慢流光 + 徽章心跳
   （流光用 background-position 而非 overflow:hidden 裁切 —— 徽章懸掛在卡片邊緣不能被裁；
     卡片面積小，背景動畫重繪成本可接受） */
.pkg.hot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, color-mix(in srgb, var(--amber-2) 30%, transparent) 50%, transparent 58%);
  background-size: 320% 100%; background-position: 160% 0;
  animation: pkgGlint 4.2s ease-in-out infinite;
}
@keyframes pkgGlint { 0%, 70% { background-position: 160% 0; } 95%, 100% { background-position: -160% 0; } }
@keyframes badgeBeat { 0%, 72%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } 88% { transform: scale(1.05); } }
.pkg-badge { animation: badgeBeat 2.8s ease-in-out infinite; }

/* ============================================================
   聊天室舞台補完 — 十套全員有動效（皆在內容後面 z:0）
   ============================================================ */
/* broker：CRT 刷新亮帶緩慢下掃（老螢幕的呼吸） */
html[data-theme="broker"] .chat, html:not([data-theme]) .chat { position: relative; overflow: hidden; }
html[data-theme="broker"] .chat::before, html:not([data-theme]) .chat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, transparent 0 38%, rgba(255,176,0,.045) 46%, rgba(255,176,0,.08) 50%, rgba(255,176,0,.045) 54%, transparent 62%);
  animation: crtBand 9s linear infinite;
}
@keyframes crtBand { from { transform: translateY(-101%); } to { transform: translateY(101%); } }

/* btl：舞台燈從台底打上來、左右搖 */
html[data-theme="btl"] .chat { position: relative; overflow: hidden; }
html[data-theme="btl"] .chat::before {
  content: ""; position: absolute; inset: -10%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(50% 65% at 28% 108%, rgba(255,46,196,.34), transparent 72%),
    radial-gradient(50% 65% at 72% 108%, rgba(57,255,20,.26), transparent 72%),
    radial-gradient(40% 50% at 50% -6%, rgba(255,238,51,.18), transparent 70%);
  animation: btlStage 2.6s ease-in-out infinite alternate;
}
@keyframes btlStage { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
/* 燈泡鏈跑馬燈框住喊單區（花車的本體就是燈泡框） */
html[data-theme="btl"] .chat-dock {
  position: relative;
  border-top: 2px solid #ff2ec4; /* dock 上緣粉管(取代燈泡鏈) */
  box-shadow: 0 -4px 18px rgba(255,46,196,.3);
}

/* ===== btl 霓虹加強包(L5 光+L6b 多巴胺)：整台花車通電 ===== */
html[data-theme="btl"] { --chart-glow: saturate(1.28) drop-shadow(0 0 4px rgba(255,46,196,.28)); } /* K線通霓虹電(此濾鏡無辜，黑屏真因是 watchlist position 衝突) */
html[data-theme="btl"] .panel { /* 面板=霓虹燈管框 */
  border-color: rgba(255,46,196,.5);
  box-shadow: 0 0 16px rgba(255,46,196,.16), inset 0 0 22px rgba(255,46,196,.05);
}
@keyframes btlFlicker { /* 會接觸不良的霓虹管：偶爾斷電抖兩下(招牌的靈魂) */
  0%, 100% { opacity: 1; text-shadow: 0 0 8px #ff2ec4, 0 0 18px rgba(255,46,196,.8), 0 0 34px rgba(255,46,196,.45); }
  7%  { opacity: .5; text-shadow: none; }
  9%, 13% { opacity: 1; }
  11% { opacity: .4; text-shadow: none; }
  49% { opacity: 1; }
  51% { opacity: .75; }
  53% { opacity: 1; }
}
html[data-theme="btl"] #chat-room-name { animation: btlFlicker 4.6s linear infinite; }
@keyframes btlBreath { /* 喊單鈕霓虹呼吸 */
  0%, 100% { box-shadow: 0 0 8px rgba(255,46,196,.5), 0 0 18px rgba(255,46,196,.25); }
  50% { box-shadow: 0 0 14px rgba(255,46,196,.9), 0 0 32px rgba(255,46,196,.45); }
}
html[data-theme="btl"] #chat-send { animation: btlBreath 1.8s ease-in-out infinite; }
/* 彈幕維持全域乾淨樣式(使用者回饋：彈幕收斂、霓虹留給面板燈管) */
@keyframes btlMsgIn { from { background: rgba(255,46,196,.18); } to { background: transparent; } }
html[data-theme="btl"] .chat-msg { animation: btlMsgIn .6s ease-out; } /* 新訊息粉光一閃 */
/* (面板邊框發光 → 改 C-1 emissive LED 燈珠帶，見下方) */
html[data-theme="btl"] .effect-chip.active { box-shadow: 0 0 10px rgba(255,46,196,.45), inset 0 0 8px rgba(255,46,196,.2); }
html[data-theme="btl"] .sh-price { text-shadow: 0 0 10px currentColor; } /* 價格數字通電 */

/* ===== btl C-1 燈珠帶：真 DOM 燈珠（app.js renderBtlLeds 注入），取代舊的三根單色玻璃霓虹管。
   去塑膠關鍵：白熱核心 → 該色 → transparent（無暗邊、無偏移反光點）＋ 多層同色 box-shadow bloom
   溢出燈體（真光會亮到溢出邊界）。逐顆 staggered opacity = 亮點沿燈帶橫掃，不需要白色 smear。 ===== */
/* 面板邊框退成暗線，發光全交給燈珠帶 */
html[data-theme="btl"] .watchlist.panel,
html[data-theme="btl"] .chart-area,
html[data-theme="btl"] .chat.panel {
  position: relative;
  border: 1px solid rgba(255,46,196,.28);
  box-shadow: inset 0 0 20px rgba(255,46,196,.06);
}
/* ⚠️ 真因修復：上面那條 position:relative 的優先級高過「行情抽屜」斷點的 position:fixed，
   會讓 btl 的看盤欄在斷點變成「in-flow + transform 推出畫面」的破版 → 整頁黑(只有 btl、改燈珠後才出現)。
   這裡在抽屜斷點把它蓋回 fixed(同一組 media query 條件)。 */
@media (max-width: 768px), (max-width: 1024px) and (max-height: 520px), (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
  html[data-theme="btl"] .watchlist.panel { position: fixed; }
}
/* 每個大欄位（看盤／K線／聊天面板）外圍各圍一圈跑馬燈。
   .btl-ring 絕對定位貼著該面板，四邊燈珠順時針繞「該面板」跑一圈。
   z-index 6：壓在面板內容之上；面板本身 position:relative 當定位基準。 */
html[data-theme="btl"] .btl-ring { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; }
html[data-theme="btl"] .btl-ring .mq { position: absolute; display: flex; align-items: center; justify-content: space-between; }
html[data-theme="btl"] .btl-ring .mq-top   { top: 3px;    left: 12px; right: 12px; flex-direction: row; }
html[data-theme="btl"] .btl-ring .mq-bot   { bottom: 3px; left: 12px; right: 12px; flex-direction: row; }
html[data-theme="btl"] .btl-ring .mq-left  { left: 3px;   top: 12px;  bottom: 12px; flex-direction: column; }
html[data-theme="btl"] .btl-ring .mq-right { right: 3px;  top: 12px;  bottom: 12px; flex-direction: column; }
html[data-theme="btl"] .led {
  width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at center, #fff 0 1px, var(--c) 45%, transparent 74%);
  box-shadow: 0 0 3px var(--c), 0 0 7px 1px var(--cg), 0 0 14px 2px var(--cg2);
  animation: btlLed 1.6s ease-in-out infinite; /* 跑馬燈：每顆錯拍(app.js 設順時針 animation-delay)→ 亮點繞圈跑 */
}
@keyframes btlLed { 0%, 100% { opacity: .5; } 30% { opacity: 1; } }
@keyframes btlEdge { /* 七彩邊框輪播 */
  0%, 100% { border-color: #ff2ec4; box-shadow: 0 0 8px rgba(255,46,196,.45); }
  25% { border-color: #ffee33; box-shadow: 0 0 8px rgba(255,238,51,.45); }
  50% { border-color: #39ff14; box-shadow: 0 0 8px rgba(57,255,20,.45); }
  75% { border-color: #33ccff; box-shadow: 0 0 8px rgba(51,204,255,.45); }
}
html[data-theme="btl"] .quick-emotes button { animation: btlEdge 3.2s linear infinite; } /* 快捷喊話跑燈(錯拍) */
html[data-theme="btl"] .quick-emotes button:nth-child(2n) { animation-delay: -.8s; }
html[data-theme="btl"] .quick-emotes button:nth-child(3n) { animation-delay: -1.6s; }
html[data-theme="btl"] .quick-emotes button:nth-child(5n) { animation-delay: -2.4s; }
html[data-theme="btl"] .hot-chip { animation: btlEdge 4s linear infinite; }
html[data-theme="btl"] .hot-chip:nth-child(2n) { animation-delay: -2s; }
@keyframes btlHue { to { filter: hue-rotate(360deg); } }
html[data-theme="btl"] .avatar { animation: btlHue 6s linear infinite; box-shadow: 0 0 8px rgba(255,46,196,.5); } /* 頭像七彩燈 */
html[data-theme="btl"] .nick { text-shadow: 0 0 6px currentColor; }
html[data-theme="btl"] .range-bar button.active { animation: btlEdge 2.6s linear infinite; }
html[data-theme="btl"] #shop-btn { animation: btlBreath 1.4s ease-in-out infinite; } /* 商店鈕同步呼吸 */
html[data-theme="btl"] .chat-dock { box-shadow: 0 -10px 28px rgba(255,46,196,.12); } /* 甲板地燈上洗 */
html[data-theme="btl"] .panel-title, html[data-theme="btl"] .wl-listtitle { text-shadow: 0 0 8px rgba(255,46,196,.7); }
html[data-theme="btl"] .pulse-dot { box-shadow: 0 0 8px currentColor; }
/* 面板半透明(桌機)；行動/平板的看盤抽屜必須實色(透明抽屜會跟底下聊天疊影) */
html[data-theme="btl"] .panel, html[data-theme="btl"] .chart-area { background: rgba(25, 0, 38, .72); }
@media (max-width: 768px), (max-width: 1024px) and (max-height: 520px), (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
  html[data-theme="btl"] .watchlist.panel { background: #190026; }
}

/* arcade：完整 NES 場景 —— 星空閃爍 + 飄雲 + 側捲軸地面 + 飛船定時飛過（全 steps 像素移動） */
html[data-theme="arcade"] .chat { position: relative; overflow: hidden; }
html[data-theme="arcade"] .chat::before, html[data-theme="arcade"] .chat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
/* 星空（黃+青兩組同層，交錯閃） */
html[data-theme="arcade"] .chat::before {
  background:
    linear-gradient(#ffe066,#ffe066) 12% 18% / 3px 3px no-repeat,
    linear-gradient(#ffe066,#ffe066) 78% 30% / 3px 3px no-repeat,
    linear-gradient(#ffe066,#ffe066) 40% 55% / 3px 3px no-repeat,
    linear-gradient(#ffe066,#ffe066) 88% 70% / 2px 2px no-repeat,
    linear-gradient(#4dd5ff,#4dd5ff) 25% 40% / 2px 2px no-repeat,
    linear-gradient(#4dd5ff,#4dd5ff) 60% 12% / 3px 3px no-repeat,
    linear-gradient(#4dd5ff,#4dd5ff) 70% 82% / 2px 2px no-repeat,
    linear-gradient(#4dd5ff,#4dd5ff) 8% 75% / 2px 2px no-repeat;
  animation: pxTwinkle 1.4s steps(2) infinite;
}
@keyframes pxTwinkle { 50% { opacity: .25; } }
/* 飄雲：兩朵像素雲橫向漂過（瑪利歐天空），steps 像素移動 */
html[data-theme="arcade"] .chat::after {
  background:
    /* 雲 1（兩段矩形疊出輪廓） */
    linear-gradient(rgba(244,244,255,.34),rgba(244,244,255,.34)) 0 34px / 30px 7px no-repeat,
    linear-gradient(rgba(244,244,255,.34),rgba(244,244,255,.34)) 7px 27px / 16px 7px no-repeat,
    /* 雲 2 */
    linear-gradient(rgba(244,244,255,.26),rgba(244,244,255,.26)) 150px 88px / 24px 6px no-repeat,
    linear-gradient(rgba(244,244,255,.26),rgba(244,244,255,.26)) 156px 82px / 12px 6px no-repeat;
  animation: pxClouds 26s steps(90) infinite;
}
@keyframes pxClouds { from { transform: translateX(-12%); } to { transform: translateX(108%); } }
/* 側捲軸地面：磚塊帶在喊單區上緣滾動 */
html[data-theme="arcade"] .chat-dock::before {
  content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px; pointer-events: none; z-index: 2;
  background:
    repeating-linear-gradient(90deg, #b8930a 0 6px, #7a6206 6px 7px, #8f7308 7px 12px, #6b5606 12px 13px);
  animation: pxGround .55s steps(6) infinite;
}
@keyframes pxGround { to { transform: translateX(-13px); } }
/* 飛船定時飛過聊天室標題列上緣（紅白機射擊遊戲亂入） */
html[data-theme="arcade"] .chat-header { overflow: hidden; }
html[data-theme="arcade"] .chat-header > * { position: relative; z-index: 1; }
html[data-theme="arcade"] .chat-header::before {
  content: ""; position: absolute; top: 3px; left: -26px; width: 16px; height: 8px; pointer-events: none; z-index: 0;
  background:
    linear-gradient(#4dd5ff,#4dd5ff) 2px 3px / 12px 4px no-repeat,   /* 船身 */
    linear-gradient(#ff4554,#ff4554) 6px 0 / 5px 3px no-repeat,      /* 座艙 */
    linear-gradient(#ffe066,#ffe066) 0 4px / 3px 2px no-repeat,      /* 尾焰 */
    linear-gradient(#4dd5ff,#4dd5ff) 13px 4px / 3px 2px no-repeat;   /* 船頭 */
  animation: pxShip 9s steps(60) infinite;
}
@keyframes pxShip { 0%, 64% { transform: translateX(0); opacity: 0; } 66% { opacity: 1; } 99% { transform: translateX(440px); opacity: 1; } 100% { opacity: 0; } }

/* paper：電報紙帶在 dock 上緣機械爬行（報社的電報機，單色極低調） */
html[data-theme="paper"] .chat-dock::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(43,34,24,.55) 0 6px, transparent 6px 12px);
  animation: tapeCrawl 1.4s linear infinite; opacity: .6;
}
@keyframes tapeCrawl { to { transform: translateX(-12px); } }

/* —— 漲跌箭頭心跳：漲往上跳、跌往下沉（盤中的脈搏） —— */
.arr { display: inline-block; }
@keyframes arrUp   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes arrDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
.arr-up   { animation: arrUp .9s ease-in-out infinite; }
.arr-down { animation: arrDown .9s ease-in-out infinite; }

/* —— 數字的生命 v2：連環翻牌(方向色爆閃) + 電流波 + 呼吸 —— */
.digit { display: inline-block; }
/* 翻牌：行程加大、帶方向色爆閃，多位數由左到右梯次(JS 給 delay) */
@keyframes rollUp {
  0% { transform: translateY(.9em) scale(1.15); opacity: 0; filter: blur(1.5px); color: var(--up); }
  60% { color: var(--up); }
  100% { transform: none; opacity: 1; filter: none; }
}
@keyframes rollDown {
  0% { transform: translateY(-.9em) scale(1.15); opacity: 0; filter: blur(1.5px); color: var(--down); }
  60% { color: var(--down); }
  100% { transform: none; opacity: 1; filter: none; }
}
.digit.roll-up   { animation: rollUp .5s cubic-bezier(.2,.9,.3,1) backwards; }
.digit.roll-down { animation: rollDown .5s cubic-bezier(.2,.9,.3,1) backwards; }
/* 電流波：亮度沿位數流過 —— 沒有更新時數字也「通著電」 */
@keyframes digitWave { 0%, 100% { filter: brightness(1); } 12% { filter: brightness(1.55); } 24% { filter: brightness(1); } }
.digits .digit { animation-name: digitWave; animation-duration: 2.6s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.digits .digit:nth-child(1) { animation-delay: 0s; }
.digits .digit:nth-child(2) { animation-delay: .1s; }
.digits .digit:nth-child(3) { animation-delay: .2s; }
.digits .digit:nth-child(4) { animation-delay: .3s; }
.digits .digit:nth-child(5) { animation-delay: .4s; }
.digits .digit:nth-child(6) { animation-delay: .5s; }
.digits .digit:nth-child(7) { animation-delay: .6s; }
.digits .digit:nth-child(8) { animation-delay: .7s; }
.digits .digit:nth-child(9) { animation-delay: .8s; }
.digits .digit:nth-child(10) { animation-delay: .9s; }
.digits .digit:nth-child(11) { animation-delay: 1s; }
.digits .digit:nth-child(12) { animation-delay: 1.1s; }
/* 翻牌時翻牌優先（animation-name 蓋過電流波，結束後自動回到波） */
.digit.roll-up { animation: rollUp .5s cubic-bezier(.2,.9,.3,1) backwards, digitWave 2.6s ease-in-out .5s infinite; }
.digit.roll-down { animation: rollDown .5s cubic-bezier(.2,.9,.3,1) backwards, digitWave 2.6s ease-in-out .5s infinite; }
/* 大價格呼吸加倍 + 微縮放 */
@keyframes priceBreath { 50% { filter: brightness(1.45); transform: scale(1.012); } }
.sh-price { animation: priceBreath 3s ease-in-out infinite; display: inline-block; }

/* ============================================================
   副標(散戶 · 在一起 · 強大)十款專屬動畫 — 每個世界自己的呼吸
   ============================================================ */
/* broker：LED 燈板掃光（琥珀亮帶滑過字） */
html[data-theme="broker"] .logo-sub, html:not([data-theme]) .logo-sub {
  background: linear-gradient(90deg, var(--cream-dim) 0 38%, var(--amber-2) 50%, var(--cream-dim) 62% 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: subSweep 5s ease-in-out infinite;
}
@keyframes subSweep { 0%, 55% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
/* matrix：終端游標 `> ... _` 閃爍（既有，保留即其專屬款） */
/* cyber：RGB 色版分離故障 */
html[data-theme="cyber"] .logo-sub { animation: subGlitch 4s steps(1) infinite; }
@keyframes subGlitch {
  0%, 91%, 100% { text-shadow: none; transform: none; }
  93% { text-shadow: -2px 0 #ff2e63, 2px 0 #00e5ff; transform: translateX(1px); }
  95% { text-shadow: 2px 0 #ff2e63, -2px 0 #00e5ff; transform: translateX(-1px); }
  97% { text-shadow: none; transform: none; }
}
/* vapor：色相漂移（夢的顏色慢慢變） */
html[data-theme="vapor"] .logo-sub { animation: subHue 12s linear infinite; }
@keyframes subHue { to { filter: hue-rotate(360deg); } }
/* bberg：資料刷新眨眼（每 9 秒快速 dip 一下，像終端更新） */
html[data-theme="bberg"] .logo-sub { animation: subRefresh 9s steps(1) infinite; }
@keyframes subRefresh { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .25; } 98% { opacity: 1; } 99% { opacity: .4; } }
/* gold：燙金反光掃過字 */
html[data-theme="gold"] .logo-sub {
  background: linear-gradient(105deg, var(--cream-dim) 0 40%, #f9e9a8 50%, var(--cream-dim) 60% 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: subSweep 5.5s ease-in-out infinite;
}
/* btl：招牌搖擺（掛在花車上晃） */
html[data-theme="btl"] .logo-sub { display: inline-block; transform-origin: 50% -8px; animation: subSway 1.9s ease-in-out infinite alternate; }
@keyframes subSway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
/* arcade：8-bit idle 抖動（遊戲待機 sprite，INSERT COIN 閃爍照舊） */
html[data-theme="arcade"] .logo-sub { display: inline-block; animation: subHop 1s steps(2) infinite; }
@keyframes subHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
/* paper：油墨暈開（載入一次，之後紙就是靜的） */
html[data-theme="paper"] .logo-sub { animation: subInk .9s ease-out 1 both; }
@keyframes subInk { 0% { opacity: 0; filter: blur(3px); letter-spacing: 3px; } 100% { opacity: 1; filter: blur(0); letter-spacing: 1px; } }
/* nvg：雷達讀出掃描（綠亮帶分段掃過，軍規 stepped） */
html[data-theme="nvg"] .logo-sub {
  background: linear-gradient(90deg, var(--cream-dim) 0 40%, #c0ff8a 50%, var(--cream-dim) 60% 100%);
  background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: subSweep 3.5s steps(14) infinite;
}


/* ============ 📱 小尺寸 iPhone 特調（SE / mini ≤390px：寸土寸金） ============ */
@media (max-width: 390px) {
  header { gap: 6px; }
  .logo { gap: 6px; }
  .logo-text { font-size: 17px; letter-spacing: 1px; }
  .logo-mark { font-size: 16px; }
  .theme-btn { padding: 3px 6px; font-size: 13px; }
  .watchlist-btn { padding: 3px 7px; font-size: 12px; }
  .online { font-size: 13px; }
  .sh-name { font-size: 13px; }
  .sh-price { font-size: 24px; }
  .sh-change { font-size: 13px; }
  .chart-area { flex: 0 0 32dvh; min-height: 185px; }
  .quick-emotes button { padding: 3px 7px; font-size: 11px; }
  .effect-chip { padding: 3px 6px; font-size: 11px; }
  .effect-chip b { font-size: 11px; }
  .chat-input-row button { padding: 7px 10px; font-size: 13px; }
  .wl-row { padding: 9px 10px; }
  /* 寬體字主題在小機再壓一級 */
  html[data-theme="cyber"] .logo-text { font-size: 13px; letter-spacing: 1px; }
  html[data-theme="arcade"] .logo-text { font-size: 11px; }
  html[data-theme="nvg"] .logo-text { font-size: 13px; letter-spacing: 2px; }
}


/* ============ 📱 iPad 直立（4:3 直拿，769–1180px portrait）：上圖下聊 ============ */
@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait) {
  main { flex-direction: column; gap: 8px; padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .chart-area { flex: 0 0 44dvh; min-height: 320px; }
  .chat { width: 100%; flex: 1; min-height: 0; }
  .sh-price { font-size: 32px; }
  .sh-ohlc { font-size: 13px; }
}

/* ============ 🖥 寬螢幕（16:9 大桌機 ≥1600px）：側欄加寬，圖不無限肥 ============ */
@media (min-width: 1600px) {
  .watchlist { width: 290px; }
  .chat { width: 420px; }
  .wl-price { font-size: 21px; }
  .chat-messages { font-size: 15px; }
}

/* ============ 🖥 超寬（21:9 ≥2200px）：版心置中，不讓圖拉成絲帶 ============ */
@media (min-width: 2200px) {
  main { max-width: 2160px; margin: 0 auto; width: 100%; }
}

/* ============================================================
   漲停煙火 🎆 — 當前個股漲停(≥9.9%)放煙火慶祝
   ============================================================ */
/* 煙火放聊天室面板內（不在 K 線區）；.chat 撐定位、飄在訊息上方、不擋點擊 */
.chat { position: relative; }
#firework-layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
/* 火星粒子已改用 canvas 引擎(見 app.js spawnSparks)：彗尾=運動軌跡，方向永遠跟著速度。 */
/* 爆炸瞬間白光閃 */
.fw-flash {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 24px #fff, 0 0 44px currentColor;
  animation: fwFlash .26s ease-out forwards;
}
@keyframes fwFlash { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(7); opacity: 0; } }
/* 上沖火箭：到頂減速（鋪墊停頓） */
.fw-rocket {
  position: absolute; width: 3px; height: 30px; border-radius: 2px;
  background: linear-gradient(rgba(255,255,255,0), #fff 35%, var(--up)); box-shadow: 0 0 9px var(--up);
  animation: fwRocket .36s cubic-bezier(.15,.55,.35,1) forwards;
}
@keyframes fwRocket { 0% { transform: translateY(120px) scaleY(.6); opacity: .95; } 88% { opacity: 1; } 100% { transform: translateY(0) scaleY(1.15); opacity: 0; } }

/* 看盤欄漲停股：🎆 標記 + 紅光脈動 */
.wl-row.limit-up { animation: limitPulse 1.3s ease-in-out infinite; }
.wl-row.limit-up .wl-name::after { content: " 漲停"; color: var(--up); font-size: 11px; font-weight: 700; }
@keyframes limitPulse { 0%, 100% { background: transparent; } 50% { background: color-mix(in srgb, var(--up) 16%, transparent); } }

/* ============================================================
   漲停里程碑：數字區特效 + 數字煙火（裁在標題列內，不溢出 K 線）
   ============================================================ */
.stock-header { position: relative; }
#fw-num { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; } /* 煙火/雨裁在標題列內，不溢出 K 線 */
/* 漲跌停：不換行；數字縮小騰出徽章空間（金光/暗沉改用亮度脈動，不靠尺寸放大避免繃版） */
.stock-header.is-limit-up, .stock-header.is-limit-down { flex-wrap: nowrap; }
/* 漲跌停加徽章後數字再縮一階：股名/徽章優先，數字讓位，保證一行 fit 不換行不截斷 */
.stock-header.is-limit-up .sh-price, .stock-header.is-limit-down .sh-price { font-size: clamp(16px, 4.6vw, 28px); }
.stock-header.is-limit-up {
  background: linear-gradient(180deg, color-mix(in srgb, var(--up) 16%, transparent), transparent);
}
.stock-header.is-limit-up .sh-price {
  color: var(--up) !important;
  animation: lmPrice 1s ease-in-out infinite;
}
@keyframes lmPrice {
  0%, 100% { filter: brightness(1); text-shadow: 0 0 8px var(--up); }
  50% { filter: brightness(1.55); text-shadow: 0 0 16px var(--up), 0 0 30px var(--up); }
}
.limit-badge {
  display: inline-block; margin-left: 10px; padding: 2px 9px; position: relative; z-index: 7;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: #fff; background: var(--up); box-shadow: 0 0 12px var(--up); white-space: nowrap;
  animation: lmBadgeIn .5s cubic-bezier(.34,1.56,.64,1) backwards, lmBadgePulse 1.2s ease-in-out .5s infinite;
}
@keyframes lmBadgeIn { 0% { transform: scale(0) rotate(-12deg); } 70% { transform: scale(1.2); } }
@keyframes lmBadgePulse { 50% { box-shadow: 0 0 24px var(--up); } }

/* ============================================================
   跌停難過動效 💀 — 數字暗沉下墜 + 落雨；對稱漲停
   ============================================================ */
.stock-header.is-limit-down { background: linear-gradient(180deg, color-mix(in srgb, var(--down) 12%, transparent), transparent); }
.stock-header.is-limit-down .sh-price {
  color: var(--down) !important;
  text-shadow: 0 0 8px color-mix(in srgb, var(--down) 45%, transparent);
  animation: lmDown 1.5s ease-in-out infinite; /* 無力下沉 */
}
@keyframes lmDown { 0%, 100% { filter: brightness(.9); opacity: 1; } 50% { filter: brightness(.55); opacity: .8; } } /* 無力暗沉(不位移，避免影響排版) */
.limit-badge.down {
  background: var(--down); box-shadow: 0 0 12px var(--down); color: #04140a;
  animation: lmBadgeIn .5s cubic-bezier(.34,1.56,.64,1) backwards, lmBadgeDownPulse 1.6s ease-in-out .5s infinite;
}
@keyframes lmBadgeDownPulse { 50% { opacity: .55; } }
/* 雨絲（容器內落下，相對容器高自適配；duration 由 JS 設） */
.rain {
  position: absolute; top: -10%; width: 2px; height: 15px; opacity: 0; /* 起點藏在容器外上方 */
  background: linear-gradient(transparent, color-mix(in srgb, var(--down) 65%, #88aacc));
  animation-name: rainFall; animation-timing-function: linear; animation-fill-mode: both; /* both：delay 期間也套起始幀，不露起點 */
}
@keyframes rainFall { 0% { top: -10%; opacity: 0; } 12% { opacity: .55; } 100% { top: 106%; opacity: 0; } }
/* 看盤欄跌停股：💀 + 綠光脈動 */
.wl-row.limit-down { animation: limitDownPulse 1.6s ease-in-out infinite; }
.wl-row.limit-down .wl-name::after { content: " 跌停"; color: var(--down); font-size: 11px; font-weight: 700; }
@keyframes limitDownPulse { 0%, 100% { background: transparent; } 50% { background: color-mix(in srgb, var(--down) 13%, transparent); } }

/* 名稱徽章（固定字串稱號） */
.nick-badge { margin-left: 5px; padding: 0 5px; font-family: var(--mono); font-size: 11px; border: 1px solid var(--amber); border-radius: 6px; color: var(--amber); }

/* 主題卡鎖 */
.theme-card.locked { opacity: .85; }
.theme-card .tc-lock { font-family: var(--mono); font-size: 11px; color: var(--amber); }
.theme-card .tc-lock s { opacity: .5; margin-right: 3px; } /* 會員折扣：劃掉原價 */
.tc-status { font-family: var(--mono); font-size: 11px; color: var(--cream-dim); } /* 免費 / 月費會員可使用 */
.tc-status.bought { color: #8cffc2; } /* 已購買 = 綠 */
.theme-card .tc-buy { color: var(--amber); text-decoration: underline; cursor: pointer; } /* 月費會員的買斷鍵 */
.theme-card .tc-buy:hover { color: var(--amber-2); }

/* 外觀商店 */
.shop-grid { display: flex; flex-direction: column; gap: 7px; max-height: 46vh; overflow: auto; margin: 4px 0 10px; }
.shop-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel-2); }
.shop-item.owned { border-color: color-mix(in srgb, #8cffc2 40%, var(--line-2)); }
.shop-item .si-type { font-family: var(--mono); font-size: 11px; color: var(--cream-dim); min-width: 56px; }
.shop-item .si-name { flex: 1; font-size: 14px; }
.shop-item button { padding: 4px 12px; border-radius: 8px; border: 1px solid var(--amber); background: transparent; color: var(--amber); font-family: var(--mono); cursor: pointer; }
.shop-item button:hover { background: var(--amber); color: var(--crt-bg); }
.shop-item .shop-equip { border-color: #8cffc2; color: #8cffc2; }
.shop-item .shop-equip:hover { background: #8cffc2; color: var(--crt-bg); }
/* 商店分頁(普通 / 尊爵) */
.shop-tabs { display: flex; gap: 6px; margin: 2px 0 8px; }
.shop-tab { flex: 1; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: transparent; color: var(--cream-dim); font-family: var(--mono); font-size: 13px; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.shop-tab:hover { color: var(--cream); }
.shop-tab.active { color: var(--crt-bg); background: var(--amber); border-color: var(--amber); }
.shop-item.premium { border-color: color-mix(in srgb, var(--amber) 55%, var(--line-2)); } /* 尊爵金邊 */
.shop-item.premium .si-type { color: var(--amber); }
.shop-item .shop-buy s { opacity: .5; margin-right: 4px; font-size: 11px; } /* 會員折扣：劃掉原價 */

/* 主題試用倒數條（點未擁有主題 → 試用 30 秒）。用主題變數 → 每主題自動配色、可讀 */
.trial-bar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--amber);
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  font-family: var(--han); font-size: 13px; color: var(--cream);
  z-index: 1000; max-width: calc(100vw - 24px);
  animation: trialIn .25s cubic-bezier(.2,.9,.3,1) backwards;
}
@keyframes trialIn { from { opacity: 0; transform: translate(-50%, 12px); } }
.trial-bar .tb-text { white-space: nowrap; }
.trial-bar .tb-buy {
  position: relative; overflow: hidden;
  padding: 7px 16px; border-radius: 8px; border: 1px solid var(--amber);
  background: linear-gradient(135deg, var(--amber), var(--amber-2));
  color: var(--crt-bg); font-family: var(--mono); font-weight: 700; letter-spacing: .5px;
  cursor: pointer; animation: tbPulse 1.3s ease-in-out infinite;
}
.trial-bar .tb-buy::after {           /* 流光掃過 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.7) 50%, transparent 62%);
  transform: translateX(-130%); animation: tbSheen 2.4s ease-in-out infinite;
}
.trial-bar .tb-buy:hover { filter: brightness(1.12); }
@keyframes tbPulse {                  /* 呼吸光暈 + 微縮放,抓眼球 */
  0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--amber) 55%, transparent); transform: scale(1); }
  50% { box-shadow: 0 0 16px color-mix(in srgb, var(--amber) 90%, transparent), 0 0 30px color-mix(in srgb, var(--amber) 45%, transparent); transform: scale(1.06); }
}
@keyframes tbSheen { 0%, 55% { transform: translateX(-130%); } 82%, 100% { transform: translateX(130%); } }
.trial-bar .tb-x { background: transparent; border: none; color: var(--cream-dim); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.trial-bar .tb-x:hover { color: var(--cream); }

/* 主題彈窗裡的「通行證月票」CTA（主題本身已可在卡片試用/購買，這裡只放月票全解鎖） */
.theme-pass {
  width: 100%; margin: 2px 0 8px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--amber);
  background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 22%, transparent), color-mix(in srgb, var(--amber-2) 12%, transparent));
  color: var(--amber); font-family: var(--mono); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.theme-pass:hover { background: var(--amber); color: var(--crt-bg); }