/* ====================================================================
   玄燈塔羅星夜主題(2026-10-24;同日依老闆回饋改成「水墨夜空」:暗、霧、微光,不要霓虹;
   再依回饋「太暗、接近純黑」往中間調:底色與面板帶靛藍(配老闆選的偏靛藍牌背,紫只當輔助)、墨霧更明顯,古金點綴與細線不變)
   只在 <html class="theme-tarot"> 時生效(App\Support\TarotTheme::cosmic() + 頁面傳 tarotTheme=true)。
   classic(舊金棕)時這支檔根本不載入,舊樣子完全不變。
   範圍:/tarot/start、/tarot/{id}、/tarot-cards、/tarot-cards/{slug}(含 /zh-CN),連同導覽列、公告列、頁尾、
   LINE 側鈕、cookie 橫幅、付費牆、範例說明、下一步推薦。3D 畫布(resources/js/v2/tarot3d)不在這裡,
   但 3D 的配色(theme.js 的 PALETTES.cosmic、cosmic.js 的 COL)跟這裡的色票是同一組數值。
   互動腳本 public/js/tarot-cosmic.js(星空、游標柔光、卡片傾斜、捲動進場、結果頁目錄)。
   作法:先在 html.theme-tarot 重新定義全站色票(Tailwind --color-*、v2 --xd-*、塔羅 --ta-*),
   大部分元件自動變深色;寫死色碼的舊規則再逐一覆寫。

   色票(跟牌面、牌背的水墨同一個世界:墨黑、宣紙灰褐、古金):
     底       #0c0d1c 靛夜 / #12132a 夜 / #191a38 深靛(都帶一點靛紫,不是純黑)
     中間色   #20213f / #292d54 / #3c3f72 石板靛 / #5c5f90 霧靛(只當線與裝飾,不當字)
     字       #e9e6f2 月白(本文)/ #a9a5c4 霧紫灰(次要)
     點綴     #c9a865 古金 / #a18149 暗金 / #e2cf9c 淡金 / #c8cbe0 月光銀
     舊的亮紫 #6b4fd8、#a48bff、亮藍 #4a6cf7、冰藍 #7fb8ff 只剩極低不透明度的霧,不當填色、邊框、按鈕
   ==================================================================== */

html.theme-tarot {
  /* ── 星夜色票(中間版:靛藍的夜 + 古金,紫只當輔助) ── */
  --tc-void: #0c0d1c;
  --tc-night: #12132a;
  --tc-indigo: #191a38;
  --tc-ink-1: #20213f;
  --tc-ink-2: #292d54;
  --tc-ink-3: #3c3f72;
  --tc-slate: #5c5f90;
  --tc-panel: rgba(32, 32, 66, .55);
  --tc-panel-2: rgba(36, 35, 72, .62);
  --tc-line: rgba(150, 156, 212, .16);
  --tc-line-2: rgba(150, 156, 212, .28);
  --tc-gline: rgba(201, 168, 101, .22);
  --tc-gline-2: rgba(201, 168, 101, .42);
  /* 舊名稱保留(下面的規則還在用),值已換成水墨夜空:violet → 石板紫、violet-l → 古金、ice → 月光銀、star → 古金 */
  --tc-violet: #3c3f72;
  --tc-violet-l: #c9a865;
  --tc-violet-xl: #e2cf9c;
  --tc-blue: #292d54;
  --tc-ice: #c8cbe0;
  --tc-lilac: #e9e6f2;
  --tc-mute: #a9a5c4;
  --tc-gold: #c9a865;
  --tc-gold-d: #a18149;
  --tc-gold-l: #e2cf9c;
  --tc-silver: #c8cbe0;
  --tc-star: #c9a865;
  --tc-rose: #d68a80;
  /* 按鈕:深靛底 + 古金細邊 + 淡金字(不是紫藍霓虹漸層) */
  --tc-grad: linear-gradient(180deg, #282c58 0%, #1b1b3c 100%);
  --tc-btn-ink: #ecdcae;
  --tc-btn-bd: rgba(201, 168, 101, .62);
  --tc-btn-hi: inset 0 1px 0 rgba(226, 207, 156, .16);
  --tc-glow: 0 0 0 1px rgba(201, 168, 101, .28), 0 10px 28px -14px rgba(0, 0, 0, .8);
  --tc-blur: blur(14px) saturate(110%);

  /* ── Tailwind 色票(工具類都是 var(--color-*)):紙 → 夜、墨 → 月白、金 → 古金 ── */
  --color-paper-50: #1c1c3c;
  --color-paper-100: #14152e;
  --color-paper-200: #20213f;
  --color-paper-300: #282c58;
  --color-paper-400: #3c3f72;
  --color-paper-500: #5c5f90;
  --color-paper: #14152e;

  --color-ink-50: #1c1c3c;
  --color-ink-100: #282c58;
  --color-ink-200: #3c3f72;
  --color-ink-300: #5c5f90;
  --color-ink-400: #8a87a6;
  --color-ink-500: #a9a5c4;
  --color-ink-600: #bdbad3;
  --color-ink-700: #d0cde0;
  --color-ink-800: #e0dded;
  --color-ink-900: #e9e6f2;
  --color-ink-950: #0c0d1c; /* 深色徽章底(bg-ink-950)維持深色 */

  --color-brand-50: #1f2040;
  --color-brand-100: #272a4a;
  --color-brand-200: #38364e;
  --color-brand-300: #735a35;
  --color-brand-400: #a18149;
  --color-brand-500: #b39257;
  --color-brand-600: #c9a865;
  --color-brand-700: #d6bc80;
  --color-brand-800: #e2cf9c;
  --color-brand-900: #ece0bd;
  --color-brand-950: #f5edd6;

  --color-accent: #c9a865;
  --color-accent-dark: #a18149;

  /* 朱紅 → 舊朱(印泥色,壓低彩度) */
  --color-cinnabar: #d68a80;
  --color-cinnabar-50: #24171c;
  --color-cinnabar-100: #2e1c22;
  --color-cinnabar-200: #e3a79f;
  --color-cinnabar-300: #d68a80;
  --color-cinnabar-400: #c4726a;
  --color-cinnabar-500: #b05f58;
  --color-cinnabar-600: #9a4f49;
  --color-cinnabar-700: #e8b5ae;

  /* 綠色(成功、FREE)一律改月光銀 */
  --color-jade: #c8cbe0;
  --color-jade-50: #151a2c;
  --color-jade-500: #b9c3e0;
  --color-jade-700: #d6dcef;
  --color-emerald-50: #151a2c;
  --color-emerald-100: #1a2036;
  --color-emerald-200: #2f3754;
  --color-emerald-500: #a8b4d8;
  --color-emerald-600: #4a5680;
  --color-emerald-700: #c3cbe6;
  --color-emerald-800: #dde2f2;
  --color-amber-50: #1f1c22;
  --color-amber-100: #29242a;
  --color-amber-200: #4a3f35;
  --color-amber-500: #c9a865;
  --color-amber-600: #c9a865;
  --color-amber-700: #e2cf9c;
  --color-amber-800: #efe3c2;
  --color-red-50: #24171c;
  --color-red-100: #2e1c22;
  --color-red-200: #5a2f33;
  --color-red-600: #e3a39b;
  --color-red-700: #ebb5ae;
  --color-red-800: #f2cbc6;

  /* ── v2 材質色票 ── */
  --xd-paper: #12132a;
  --xd-paper-2: #161731;
  --xd-paper-3: #1c1d3b;
  --xd-paper-4: #282c58;
  --xd-sheet: #191a38;
  --xd-ink: #e9e6f2;
  --xd-ink-2: #d6d3e4;
  --xd-ink-3: #bdbad3;
  --xd-ink-4: #a9a5c4;
  --xd-ink-5: #8a87a6;
  --xd-gold: #c9a865;
  --xd-gold-2: #a18149;
  --xd-gold-ink: #d6bc80;
  --xd-gold-light: #e2cf9c;
  --xd-cinnabar: #b05f58;
  --xd-cinnabar-2: #9a4f49;
  --xd-cinnabar-ink: #e3a79f;
  --xd-rule: rgba(201, 168, 101, .16);
  --xd-rule-2: rgba(201, 168, 101, .3);
  --xd-rule-ink: rgba(233, 230, 242, .08);
  --xd-grain: none;
  --xd-shadow-sheet: 0 22px 50px -30px rgba(0, 0, 0, .85);
  --xd-shadow-lift: 0 26px 60px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(201, 168, 101, .22);
  --xd-frame: inset 0 0 0 1px rgba(201, 168, 101, .16);

  /* ── 舊塔羅色票(public/css/tarot.css) ── */
  --ta-ink: #12132a;
  --ta-ink2: #191a38;
  --ta-gold: #c9a865;
  --ta-gold-d: #a18149;
  --ta-gold-l: #e2cf9c;
  --ta-paper: #e9e6f2;
  --ta-mute: #a9a5c4;
  --ta-cinnabar: #d68a80;

  background: var(--tc-void);
  color-scheme: dark;
}

/* ====================================================================
   1. 頁面底:墨夜 + 緩慢流動的墨雲(像牌背的雲霧;星點由 tarot-cosmic.js 的 canvas 畫在最底層)
   ==================================================================== */
html.theme-tarot body,
html.theme-tarot.ui-v2 body {
  background: transparent;
  background-image: none;
  color: var(--tc-lilac);
}
html.theme-tarot body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(44vmax 30vmax at 16% 20%, rgba(48, 54, 124, .62), transparent 70%),
    radial-gradient(36vmax 26vmax at 84% 34%, rgba(54, 48, 104, .34), transparent 70%),
    radial-gradient(48vmax 32vmax at 58% 90%, rgba(62, 66, 148, .32), transparent 72%),
    radial-gradient(30vmax 22vmax at 40% 52%, rgba(36, 40, 88, .52), transparent 70%),
    linear-gradient(180deg, #11122a 0%, #0c0d1c 55%, #0f1024 100%);
  animation: tcNebula 90s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes tcNebula {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3vmax, 2vmax, 0) scale(1.06); }
  100% { transform: translate3d(2vmax, -2vmax, 0) scale(1.03); }
}
/* 星空 canvas(JS 建立) */
html.theme-tarot .tc-sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}
/* 游標柔光(只桌機,JS 建立) */
html.theme-tarot .tc-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(200, 203, 224, .045) 0%, rgba(201, 168, 101, .02) 38%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .6s ease;
  will-change: transform;
}
html.theme-tarot .tc-glow.is-on { opacity: 1; }

html.theme-tarot ::selection { background: rgba(201, 168, 101, .32); color: #fff; }
html.theme-tarot :focus-visible { outline: 2px solid var(--tc-ice); outline-offset: 3px; }

/* 捲動進度條 */
html.theme-tarot .scroll-progress,
html.theme-tarot.ui-v2 .scroll-progress {
  height: 2px;
  background: linear-gradient(90deg, rgba(201, 168, 101, .5), var(--tc-gold));
  box-shadow: none;
}

/* ====================================================================
   2. 導覽列:墨夜毛玻璃
   ==================================================================== */
html.theme-tarot body > nav,
html.theme-tarot.ui-v2 body > nav {
  background-color: rgba(14, 15, 32, .72) !important;
  background-image: none !important;
  -webkit-backdrop-filter: var(--tc-blur);
  backdrop-filter: var(--tc-blur);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(201, 168, 101, .14), 0 12px 30px -24px rgba(0, 0, 0, .9) !important;
}
/* Logo:導覽列/頁尾在塔羅頁換成 logo-main-nav-light(由官方 logo 只改墨色衍生,紅印保留;見 reading/_tarot-cosmic-assets) */
/* 導覽文字 */
html.theme-tarot body > nav .hidden.md\:flex > div > button,
html.theme-tarot body > nav .hidden.md\:flex > a:not(.rounded-full):not([class*="btn"]) { color: #d6d3e4; }
html.theme-tarot body > nav .hidden.md\:flex > div > button:hover,
html.theme-tarot body > nav .hidden.md\:flex > a:not(.rounded-full):not([class*="btn"]):hover { color: var(--tc-gold-l); text-shadow: none; }
/* AI 問事主打鈕 */
html.theme-tarot body > nav a.rounded-full.bg-ink-950 {
  background: rgba(32, 32, 66, .7);
  color: var(--tc-btn-ink);
  box-shadow: 0 0 0 1px var(--tc-btn-bd);
}
/* 下拉、頭像選單:毛玻璃夜幕 */
html.theme-tarot body > nav [x-show].absolute.rounded-xl,
html.theme-tarot.ui-v2 body > nav [x-show].absolute.rounded-xl {
  background-color: rgba(22, 22, 50, .94);
  background-image: radial-gradient(120% 80% at 0% 0%, rgba(42, 45, 98, .35), transparent 60%);
  -webkit-backdrop-filter: var(--tc-blur);
  backdrop-filter: var(--tc-blur);
  border-color: rgba(150, 156, 212, .217);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(150, 156, 212, .077), 0 30px 60px -24px rgba(0, 0, 0, .9);
}
html.theme-tarot body > nav .bg-gradient-to-r.via-accent { background-image: linear-gradient(90deg, transparent, rgba(201, 168, 101, .5), transparent); }
/* 服務小圖示(bg-ink-950 text-accent)→ 深靛小方塊 + 古金圖示 */
html.theme-tarot body > nav .bg-ink-950 { background-color: #191a38; }
html.theme-tarot body > nav .text-accent { color: #e2cf9c; }
/* 行內寫死的棕金 / 朱紅小字(價格標籤)在深底提亮 */
html.theme-tarot body > nav [style*="color:#8A6D1F"] { color: var(--tc-star) !important; }
html.theme-tarot body > nav [style*="color:#B4242C"] { color: var(--tc-rose) !important; }
/* 「免費註冊 / 送 1 次解鎖」的朱紅小字在深色導覽列上看不清 → 淺色 */
html.theme-tarot body > nav .xd-nav-login .xd-nav-gift { color: #e3a79f; }
html.theme-tarot body > nav [style*="#c9a227"] { box-shadow: 0 0 0 2px var(--tc-violet-l) !important; }
/* 推薦項目(八字命書)的米金底卡、紅色「師父推薦」緞帶、深底淺字說明 */
html.theme-tarot body > nav [style*="#fff8e8"] {
  background: linear-gradient(135deg, rgba(42, 45, 98, .55), rgba(32, 32, 66, .55)) !important;
  box-shadow: 0 0 0 1px rgba(201, 168, 101, .42), 0 8px 20px -12px rgba(0, 0, 0, .7) !important;
}
html.theme-tarot body > nav [style*="#8f1c22"] { background: #7a3f3a !important; box-shadow: none !important; }
html.theme-tarot .text-emerald-600 { color: #c8cbe0; }
html.theme-tarot body > nav .text-paper-100\/75 { color: rgba(233, 230, 242, .78); }
html.theme-tarot body > nav .btn-ink-gold [style*="color:#4a3208"] { color: var(--tc-btn-ink) !important; }
html.theme-tarot body > nav .btn-ink-gold [style*="color:#6b4a10"] { color: rgba(226, 207, 156, .8) !important; }
/* 主 CTA(免費排八字)與手機選單的金色按鈕 */
html.theme-tarot body > nav .btn-ink-cinnabar,
html.theme-tarot body > nav .btn-ink-gold { color: var(--tc-btn-ink); background: var(--tc-grad); border-color: var(--tc-btn-bd); box-shadow: var(--tc-btn-hi), 0 8px 22px -14px rgba(0, 0, 0, .8); }
/* 手機選單 */
html.theme-tarot body > nav > div.md\:hidden,
html.theme-tarot body > nav [x-show].md\:hidden {
  background-color: rgba(15, 16, 34, .97) !important;
  border-color: rgba(150, 156, 212, .136) !important;
}
html.theme-tarot body > nav .ring-1.bg-paper-50\/70 { background-color: rgba(32, 32, 66, .6); }
html.theme-tarot body > nav button.md\:hidden { color: #dcd9e8; }
html.theme-tarot body > nav button.md\:hidden:hover { background-color: rgba(150, 156, 212, .087); }
/* 簡/繁切換小圓鈕 */
html.theme-tarot body > nav [data-zh-toggle],
html.theme-tarot body > nav a[hreflang] { color: #dcd9e8; border-color: rgba(150, 156, 212, .279); background-color: rgba(32, 32, 66, .6); }

/* ====================================================================
   3. 公告列、提示、cookie、LINE 側鈕
   ==================================================================== */
html.theme-tarot [data-free-mode-bar].xd-mix-bar {
  background: linear-gradient(90deg, rgba(20, 21, 44, .96), rgba(25, 25, 52, .96) 50%, rgba(20, 21, 44, .96));
  color: #d6d3e4;
  border-bottom: 1px solid rgba(201, 168, 101, .18);
}
html.theme-tarot .xd-mix-bar .mb-dot { background: var(--tc-star); box-shadow: 0 0 6px rgba(201, 168, 101, .3); }
html.theme-tarot .xd-mix-bar a { color: var(--tc-ice); }
html.theme-tarot .xd-mix-bar .mb-close { color: #b4b1cc; }
html.theme-tarot [data-free-mode-bar]:not(.xd-mix-bar) {
  background: linear-gradient(90deg, #1b1b3c 0%, #22264a 50%, #1b1b3c 100%) !important;
  background-image: linear-gradient(90deg, #1b1b3c 0%, #22264a 50%, #1b1b3c 100%) !important;
  color: #e4e1ee !important;
  box-shadow: inset 0 -1px 0 rgba(201, 168, 101, .3);
}
html.theme-tarot [data-free-mode-bar]:not(.xd-mix-bar) > span > span:first-child { color: #20213f !important; background: #e2cf9c !important; border-color: transparent !important; }

html.theme-tarot [role="status"] > .rounded-xl.shadow-lg {
  background: rgba(25, 25, 54, .96) !important;
  -webkit-backdrop-filter: var(--tc-blur);
  backdrop-filter: var(--tc-blur);
}

html.theme-tarot .card {
  background: rgba(22, 22, 50, .94);
  border: 1px solid rgba(150, 156, 212, .186);
  -webkit-backdrop-filter: var(--tc-blur);
  backdrop-filter: var(--tc-blur);
  color: var(--tc-lilac);
}
html.theme-tarot .btn-ghost { color: #d6d3e4; }
html.theme-tarot .btn-ghost:hover { background: rgba(150, 156, 212, .074); }
html.theme-tarot .btn-ink-gold,
html.theme-tarot.ui-v2 .btn-ink-gold,
html.theme-tarot .btn-ink-cinnabar,
html.theme-tarot.ui-v2 .btn-ink-cinnabar {
  color: var(--tc-btn-ink);
  background: var(--tc-grad);
  border-color: var(--tc-btn-bd);
  box-shadow: var(--tc-btn-hi), 0 8px 24px -14px rgba(0, 0, 0, .85);
}
html.theme-tarot .btn-ink-cinnabar:hover,
html.theme-tarot .btn-ink-gold:hover { color: #f3e6c2; border-color: var(--tc-gold); box-shadow: var(--tc-btn-hi), 0 0 0 1px rgba(201, 168, 101, .2), 0 12px 28px -14px rgba(0, 0, 0, .9); }

/* LINE 側鈕:深靛小標籤 + 古金細邊(保留 LINE 圖示與文字,辨識度不變) */
html.theme-tarot #line-side-tab > a {
  background: linear-gradient(180deg, #282c58 0%, #1b1b3c 100%) !important;
  box-shadow: 0 0 0 1px rgba(201, 168, 101, .45), 0 10px 26px -12px rgba(0, 0, 0, .85) !important;
}
html.theme-tarot #line-side-tab > button {
  background: #191a38 !important;
  color: #d6d3e4 !important;
  border-color: rgba(150, 156, 212, .31) !important;
}

/* ====================================================================
   4. 頁尾:藏起宣紙山水,換墨夜地平線
   ==================================================================== */
html.theme-tarot body > footer {
  position: relative;
  color: var(--tc-mute);
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(42, 45, 98, .4), transparent 60%),
    linear-gradient(180deg, rgba(12, 13, 28, 0) 0%, rgba(13, 14, 30, .82) 30%, #0c0d1c 100%);
  border-top: 1px solid rgba(201, 168, 101, .12);
}
html.theme-tarot body > footer > img,
html.theme-tarot body > footer > .absolute.inset-0 { display: none; }
/* 頂部一條細細的星座連線 */
html.theme-tarot body > footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 70px;
  pointer-events: none;
  opacity: .5;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='70' viewBox='0 0 1200 70'><g fill='none' stroke='%23c9a865' stroke-opacity='.32' stroke-width='.6'><path d='M80 44 L190 22 L260 38 L370 16 L455 30'/><path d='M760 26 L840 44 L930 18 L1010 34 L1120 20'/></g><g fill='%23c8cbe0' fill-opacity='.8'><circle cx='80' cy='44' r='1.6'/><circle cx='190' cy='22' r='2.2'/><circle cx='260' cy='38' r='1.4'/><circle cx='370' cy='16' r='2'/><circle cx='455' cy='30' r='1.5'/><circle cx='760' cy='26' r='1.6'/><circle cx='840' cy='44' r='2.1'/><circle cx='930' cy='18' r='1.5'/><circle cx='1010' cy='34' r='2'/><circle cx='1120' cy='20' r='1.4'/></g><circle cx='600' cy='30' r='2.2' fill='%23c9a865'/></svg>") center top / 1200px 70px no-repeat;
}
html.theme-tarot body > footer h4 { color: #e9e6f2; }
html.theme-tarot body > footer .footer-link,
html.theme-tarot.ui-v2 body > footer .footer-link { color: #b4b1cc; }
html.theme-tarot body > footer .footer-link:hover,
html.theme-tarot.ui-v2 body > footer .footer-link:hover { color: var(--tc-gold-l); text-shadow: none; }
html.theme-tarot body > footer .footer-link::after { background: linear-gradient(90deg, rgba(201, 168, 101, .7), transparent); }
html.theme-tarot body > footer .cloud-divider {
  height: 1px;
  margin: 0 auto;
  max-width: 80rem;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 101, .3), rgba(200, 203, 224, .16), transparent);
}
html.theme-tarot body > footer > .container-wide:first-of-type,
html.theme-tarot.ui-v2 body > footer > .container-wide:first-of-type { border-top: 0; }
html.theme-tarot body > footer .text-ink-500 { color: #a9a5c4; }
html.theme-tarot body > footer img.master-float { filter: none; }

/* ====================================================================
   5. 塔羅舞台(抽牌頁 / 結果頁共用)
   ==================================================================== */
html.theme-tarot .tarot-stage {
  background:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(60, 64, 130, .255) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 30%, rgba(42, 45, 98, .119) 0%, transparent 60%);
  color: var(--tc-lilac);
  /* 舊版是 hidden(3D 舞台 100vw 不會出現橫向捲軸);clip 一樣裁切但不會變成捲動容器,左欄說明的 sticky 才有效 */
  overflow: hidden;
  overflow: clip;
}
html.theme-tarot .tarot-stage::before { display: none; }
html.theme-tarot .ta-title {
  color: #f1eef6;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
html.theme-tarot .tm-title span {
  color: transparent;
  background: linear-gradient(100deg, #e2cf9c 0%, #d8d3c4 55%, #c9a865 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
html.theme-tarot .tm-kicker { color: var(--tc-violet-xl); }
html.theme-tarot .tm-dot { background: var(--tc-star); box-shadow: 0 0 6px rgba(201, 168, 101, .3); animation: tcTwinkle 4.2s ease-in-out infinite; }
@keyframes tcTwinkle { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }
html.theme-tarot .tm-lead { color: #cfcce0; }

/* 分頁列(抽牌占卜 / 牌陣教學 / 牌義 …) */
html.theme-tarot .tm-nav-a {
  border-color: rgba(150, 156, 212, .186);
  background: rgba(32, 32, 66, .45);
  color: #dcd9e8;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html.theme-tarot .tm-nav-a svg { color: var(--tc-violet-l); }
html.theme-tarot .tm-nav-a:hover { border-color: rgba(201, 168, 101, .5); background: rgba(42, 45, 98, .45); color: #fff; }
html.theme-tarot .tm-nav-a.is-on { background: rgba(42, 45, 98, .6); border-color: rgba(201, 168, 101, .6); color: var(--tc-gold-l); box-shadow: none; }

/* ── 流程指示(1 選牌陣 → 2 寫問題 → 3 洗牌抽牌 → 4 看解讀;2026-10-29 起先選牌陣) ── */
html.theme-tarot .tc-flow {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  max-width: 760px;
}
html.theme-tarot .tc-flow li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(150, 156, 212, .112);
  background: rgba(25, 25, 54, .45);
  color: #9a97b5;
  font-size: 14px;
  line-height: 1.3;
  transition: border-color .4s, background .4s, color .4s, box-shadow .4s;
}
html.theme-tarot .tc-flow li b {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(150, 156, 212, .248);
  color: #e2cf9c;
  transition: background .4s, color .4s, border-color .4s;
}
html.theme-tarot .tc-flow li span { min-width: 0; }
html.theme-tarot .tc-flow li.is-done { color: #d6d3e4; border-color: rgba(200, 203, 224, .158); }
html.theme-tarot .tc-flow li.is-done b { background: rgba(200, 203, 224, .08); border-color: rgba(200, 203, 224, .5); color: #e9e6f2; }
html.theme-tarot .tc-flow li.is-now {
  color: #f1eef6;
  border-color: rgba(201, 168, 101, .45);
  background: linear-gradient(120deg, rgba(42, 45, 98, .7), rgba(32, 32, 66, .55));
  box-shadow: none;
}
html.theme-tarot .tc-flow li.is-now b { background: var(--tc-grad); border-color: var(--tc-btn-bd); color: var(--tc-btn-ink); box-shadow: none; }
html.theme-tarot .tc-flow-pick { max-width: 760px; margin: 0 auto 6px; }

/* ── 表單面板:毛玻璃 ── */
html.theme-tarot .tm-form {
  background: linear-gradient(180deg, rgba(32, 32, 66, .62), rgba(22, 22, 48, .58));
  border: 1px solid rgba(150, 156, 212, .161);
  border-radius: 20px;
  -webkit-backdrop-filter: var(--tc-blur);
  backdrop-filter: var(--tc-blur);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .025) inset, 0 40px 80px -40px rgba(0, 0, 0, .9);
}
html.theme-tarot .tm-step { border-bottom-color: rgba(150, 156, 212, .099); }
/* 步驟順序(2026-10-29 起 HTML 本身就是這個順序,兩個主題一樣):① 想問哪一類事 → ② 牌陣 → ③ 類別 → ④ 寫問題;
   「選牌陣」和「寫問題」兩段之間用虛線分開。只改呈現順序,送出資料不變 */
html.theme-tarot .tm-form { display: flex; flex-direction: column; }
html.theme-tarot .tm-form > * { order: 10; }
html.theme-tarot .tm-form > .tm-restored { order: 0; }
html.theme-tarot .tm-form > [data-tc="guide"] { order: 1; }
html.theme-tarot .tm-form > [data-tc="spread"] { order: 2; border-bottom: 1px dashed rgba(150, 156, 212, .099); margin-bottom: 22px; padding-bottom: 22px; }
html.theme-tarot .tm-form > [data-tc="cat"] { order: 3; }
html.theme-tarot .tm-form > [data-tc="q"] { order: 4; border-bottom: 0; margin-bottom: 4px; padding-bottom: 0; }
html.theme-tarot .tm-switch-note { border-color: rgba(201, 168, 101, .42); background: rgba(42, 45, 98, .5); color: #e9e6f2; }
html.theme-tarot .tm-switch-note > svg { color: var(--tc-gold-l); }
html.theme-tarot .tm-paynote { border-color: rgba(201, 168, 101, .3); background: rgba(22, 22, 50, .6); }
html.theme-tarot .tm-paynote-h { color: #e9e6f2; }
html.theme-tarot .tm-paynote-relay { color: #e3a79f; }
html.theme-tarot .tm-paynote-p { color: #a9a5c4; }
html.theme-tarot .tm-paynote-p a { color: #e2cf9c; }
html.theme-tarot .tm-step-h { color: #eeebf5; }
html.theme-tarot .tm-step-h small { color: var(--tc-mute); }
html.theme-tarot .tm-step-n {
  border: 1px solid var(--tc-btn-bd);
  background: var(--tc-grad);
  color: var(--tc-btn-ink);
  box-shadow: 0 0 0 3px rgba(201, 168, 101, .08);
}

/* 輸入框 */
html.theme-tarot .tarot-stage .ta-input,
html.theme-tarot.ui-v2 .tarot-stage .ta-input {
  background: rgba(11, 12, 26, .55);
  color: #f1eef6;
  border: 1px solid rgba(150, 156, 212, .217);
  border-radius: 12px;
}
html.theme-tarot .tarot-stage .ta-input:focus,
html.theme-tarot.ui-v2 .tarot-stage .ta-input:focus {
  border-color: var(--tc-violet-l) !important;
  background: rgba(17, 18, 40, .7);
  box-shadow: 0 0 0 3px rgba(201, 168, 101, .12) !important;
}
html.theme-tarot .tarot-stage .ta-input::placeholder { color: #8a87a6; }
html.theme-tarot .tm-count { color: var(--tc-mute); }
html.theme-tarot .ta-err { color: var(--tc-rose); }

html.theme-tarot .tm-restored { border-color: rgba(200, 203, 224, .203); background: rgba(42, 45, 98, .119); color: #d6d9ea; }
html.theme-tarot .tm-suggest { background: rgba(60, 64, 130, .136); border-color: rgba(150, 156, 212, .248); color: #e4e1ee; }
html.theme-tarot .tm-suggest > svg { color: var(--tc-star); }
html.theme-tarot .tm-suggest-btn { background: var(--tc-grad); border-color: var(--tc-btn-bd); color: var(--tc-btn-ink); }
html.theme-tarot .tm-suggest-x { color: var(--tc-mute); }

html.theme-tarot .tm-tips { border-color: rgba(150, 156, 212, .136); background: rgba(11, 12, 26, .35); }
html.theme-tarot .tm-tips summary { color: #e2cf9c; }
html.theme-tarot .tm-tips summary::after { color: var(--tc-violet-l); }
html.theme-tarot .tm-tips-body { color: #cfcce0; }
html.theme-tarot .tm-tips-h { color: var(--tc-violet-xl); }
html.theme-tarot .tm-rw-from { color: var(--tc-mute); text-decoration-color: rgba(214, 138, 128, .63); }
html.theme-tarot .tm-rw-arrow { color: var(--tc-ice); }
html.theme-tarot .tm-rw-to { background: rgba(60, 64, 130, .119); border-color: rgba(150, 156, 212, .236); color: #eeebf5; }
html.theme-tarot .tm-rw-to:hover { border-color: rgba(201, 168, 101, .5); background: rgba(42, 45, 98, .5); }
html.theme-tarot .tm-rw-to small { color: var(--tc-mute); }

/* 引導 chip、類別 chip */
html.theme-tarot .tm-guide-chip,
html.theme-tarot .ta-chip {
  min-height: 40px;
  background: rgba(32, 32, 66, .5);
  border: 1px solid rgba(150, 156, 212, .186);
  color: #d6d3e4;
  transition: background .25s, border-color .25s, color .25s, box-shadow .25s, transform .25s;
}
html.theme-tarot .tm-guide-chip:hover,
html.theme-tarot .ta-chip:hover { background: rgba(42, 45, 98, .5); border-color: rgba(201, 168, 101, .5); color: #fff; }
html.theme-tarot .tm-guide-chip.on,
html.theme-tarot .ta-chip.on {
  background: var(--tc-grad);
  border-color: var(--tc-btn-bd);
  color: var(--tc-btn-ink);
  font-weight: 700;
  box-shadow: var(--tc-btn-hi), 0 6px 18px -10px rgba(0, 0, 0, .8);
}
html.theme-tarot .tm-guide-done { color: var(--tc-mute); }
html.theme-tarot .tm-guide-done b { color: #fff; }

/* ── 牌陣大卡片 ── */
html.theme-tarot .tm-spreads { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html.theme-tarot .tm-spread {
  overflow: hidden;
  padding: 16px 14px 14px;
  gap: 10px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(36, 35, 72, .55), rgba(20, 21, 44, .55));
  border: 1px solid rgba(150, 156, 212, .149);
  color: #eeebf5;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: border-color .3s, background .3s, box-shadow .35s, transform .35s cubic-bezier(.16, 1, .3, 1);
}
html.theme-tarot .tm-spread.is-tilting { transition: border-color .3s, background .3s, box-shadow .35s; }
/* 滑鼠位置的柔光(--mx/--my 由 JS 設定) */
html.theme-tarot .tm-spread::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), rgba(150, 156, 212, .136), transparent 65%);
  opacity: 0;
  transition: opacity .3s;
}
html.theme-tarot .tm-spread:hover::before { opacity: 1; }
html.theme-tarot .tm-spread:hover { border-color: rgba(201, 168, 101, .34); background: linear-gradient(160deg, rgba(46, 44, 88, .62), rgba(24, 24, 52, .6)); }
html.theme-tarot .tm-spread.on {
  border-color: rgba(201, 168, 101, .62);
  background: linear-gradient(160deg, rgba(42, 45, 98, .72), rgba(32, 32, 66, .6));
  box-shadow: 0 0 0 1px rgba(201, 168, 101, .14) inset, 0 14px 36px -18px rgba(0, 0, 0, .85);
}
/* 選中時一道星光掃過 */
html.theme-tarot .tm-spread::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  width: 40%;
  left: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(226, 207, 156, .1), rgba(201, 168, 101, .08), transparent);
  transform: translateX(-160%) skewX(-18deg);
  opacity: 0;
}
html.theme-tarot .tm-spread.on::after { animation: tcSweep 1.6s cubic-bezier(.3, .6, .2, 1) 1; }
@keyframes tcSweep { 0% { transform: translateX(-160%) skewX(-18deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(340%) skewX(-18deg); opacity: 0; } }

html.theme-tarot .tm-spread .tm-diagram { width: 76px; height: 52px; overflow: visible; }
html.theme-tarot .tm-diagram rect { fill: rgba(150, 156, 212, .074); stroke: rgba(150, 156, 212, .403); stroke-width: 1; transition: fill .35s, stroke .35s; }
html.theme-tarot .tm-spread:hover .tm-diagram rect { fill: rgba(150, 156, 212, .12); stroke: rgba(226, 207, 156, .7); }
html.theme-tarot .tm-spread.on .tm-diagram rect { fill: rgba(201, 168, 101, .16); stroke: #e2cf9c; }
/* 星座連線:牌位中心連起來,滑過/選中時畫出來 */
html.theme-tarot .tc-constel {
  fill: none;
  stroke: var(--tc-star);
  stroke-width: .7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  opacity: .0;
  transition: stroke-dashoffset 1.5s cubic-bezier(.3, .6, .2, 1), opacity .6s;
}
html.theme-tarot .tc-node { fill: #c8cbe0; opacity: .45; transition: opacity .4s, fill .4s; }
html.theme-tarot .tm-spread:hover .tc-constel,
html.theme-tarot .tm-spread:focus-visible .tc-constel,
html.theme-tarot .tm-spread.on .tc-constel { stroke-dashoffset: 0; opacity: .55; }
html.theme-tarot .tm-spread:hover .tc-node,
html.theme-tarot .tm-spread.on .tc-node { opacity: .9; fill: var(--tc-gold-l); }

html.theme-tarot .tm-spread-name { font-size: 16px; color: #fff; }
html.theme-tarot .tm-spread-meta { color: #b0adc8; }
html.theme-tarot .tm-spread.on .tm-spread-meta,
html.theme-tarot .tm-spread.on .tc-spread-sub { color: #d6d3e4; }
html.theme-tarot .tc-spread-sub { display: block; font-size: 12.5px; line-height: 1.45; color: #9e9bb8; letter-spacing: .02em; }
html.theme-tarot .tc-spread-count {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  color: #e2cf9c;
  border: 1px solid rgba(150, 156, 212, .217);
  background: rgba(11, 12, 26, .45);
  font-variant-numeric: lining-nums;
}
html.theme-tarot .tm-spread-cost {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(200, 203, 224, .063);
  border: 1px solid rgba(200, 203, 224, .18);
  font-weight: 700;
}
html.theme-tarot .tm-badge {
  top: auto;
  right: auto;
  position: static;
  display: inline-block;
  background: rgba(201, 168, 101, .128);
  color: var(--tc-star);
  border: 1px solid rgba(201, 168, 101, .4);
  box-shadow: none;
  font-weight: 700;
}
html.theme-tarot .tm-spread--celtic .tm-badge { background: rgba(200, 203, 224, .054); border-color: rgba(200, 203, 224, .225); color: #d0d3e6; }
/* 依問題類別推薦 */
html.theme-tarot .tc-rec {
  display: none;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1.5;
  padding: 1px 8px;
  border-radius: 999px;
  color: #12132a;
  background: linear-gradient(90deg, #c9a865, #e2cf9c);
  font-weight: 700;
  letter-spacing: .02em;
}
html.theme-tarot .tm-spread.is-rec .tc-rec { display: inline-flex; }
html.theme-tarot .tm-spread.is-rec:not(.on) { border-color: rgba(201, 168, 101, .36); }

/* 牌陣說明面板 */
html.theme-tarot .tm-panel {
  background: linear-gradient(180deg, rgba(60, 64, 130, .153), rgba(32, 32, 66, .35));
  border: 1px solid rgba(150, 156, 212, .198);
  border-radius: 16px;
  animation: tcFadeUp .5s cubic-bezier(.16, 1, .3, 1);
}
html.theme-tarot .tm-panel-h { color: #fff; }
html.theme-tarot .tm-panel-h small { color: var(--tc-mute); }
html.theme-tarot .tm-panel-fit { color: #d8d5e6; }
html.theme-tarot .tm-pos li { color: #c4c1d8; }
html.theme-tarot .tm-pos li::before { border-color: rgba(200, 203, 224, .27); color: #d0d3e6; background: rgba(42, 45, 98, .119); }
html.theme-tarot .tm-pos b { color: #fff; }
html.theme-tarot .tm-good { color: #d6d9ea; }
html.theme-tarot .tm-good .tm-qa-mark { color: var(--tc-ice); }
html.theme-tarot .tm-avoid { color: #e6d0cc; }
html.theme-tarot .tm-avoid .tm-qa-mark { color: var(--tc-rose); }
html.theme-tarot .tm-note { color: var(--tc-mute); }
html.theme-tarot .tm-ex-label { color: var(--tc-violet-xl); }
html.theme-tarot .tm-ex { background: rgba(11, 12, 26, .4); border-color: rgba(150, 156, 212, .198); color: #eeebf5; }
html.theme-tarot .tm-ex:hover { border-color: rgba(201, 168, 101, .5); background: rgba(42, 45, 98, .5); }

/* 二選一 A/B */
html.theme-tarot .tm-ab { border: 1px dashed rgba(150, 156, 212, .31); background: rgba(11, 12, 26, .35); border-radius: 14px; }
html.theme-tarot .tm-ab-k { color: #e2cf9c; }
html.theme-tarot .tm-ab-field:nth-of-type(1) .tm-ab-k::before,
html.theme-tarot .tm-ab-field:nth-of-type(2) .tm-ab-k::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--tc-violet-l);
  box-shadow: none;
}
html.theme-tarot .tm-ab-field:nth-of-type(2) .tm-ab-k::before { background: var(--tc-ice); box-shadow: none; }
html.theme-tarot .tm-ab-hint { color: var(--tc-mute); }

/* ── 主按鈕(2026-10-25 老闆:原本深靛底細金邊被說明卡淹沒)→ 實心亮金底、深藍字、外圈柔和金光,整頁唯一的實心金色;
      呼吸微光與光澤掃過只動 opacity / transform(合成層),不每幀重繪 ── */
html.theme-tarot .ta-btn-go {
  position: relative;
  overflow: hidden;
  min-height: 60px;
  border-radius: 14px;
  color: #17173a;
  font-weight: 800;
  background: linear-gradient(135deg, #f6e9c2 0%, #e2cf9c 38%, #c9a865 72%, #a98a4e 100%);
  border: 1px solid #f3e3b4;
  letter-spacing: .24em;
  text-shadow: 0 1px 0 rgba(255, 246, 220, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -8px 14px -10px rgba(90, 66, 24, .55),
    0 0 0 4px rgba(201, 168, 101, .16),
    0 0 34px -4px rgba(226, 207, 156, .55),
    0 16px 30px -14px rgba(0, 0, 0, .9);
  isolation: isolate;
}
html.theme-tarot .ta-btn-go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 140% at 50% 0%, rgba(255, 250, 232, .55), transparent 60%);
  opacity: 0;
  animation: tcBreath 4s ease-in-out infinite;
  pointer-events: none;
}
html.theme-tarot .ta-btn-go::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-150%) skewX(-18deg);
  animation: tcShine 5s ease-in-out infinite;
  pointer-events: none;
}
html.theme-tarot .ta-btn-go:hover {
  transform: translateY(-2px);
  color: #0f0f2c;
  border-color: #fff3cf;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -8px 14px -10px rgba(90, 66, 24, .55),
    0 0 0 5px rgba(226, 207, 156, .24),
    0 0 46px -2px rgba(226, 207, 156, .7),
    0 20px 34px -14px rgba(0, 0, 0, .95);
}
html.theme-tarot .ta-btn-go:focus-visible { outline: 2px solid #f3e3b4; outline-offset: 4px; }
@keyframes tcBreath { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes tcShine { 0%, 60% { transform: translateX(-150%) skewX(-18deg); } 85%, 100% { transform: translateX(450%) skewX(-18deg); } }

html.theme-tarot .tm-cost-now { color: #d6d3e4; }
html.theme-tarot .tm-cost-now b { color: #fff; }
html.theme-tarot .tm-login { color: var(--tc-mute); }

/* ── 右側說明欄 ── */
@media (min-width: 900px) {
  html.theme-tarot .tm-aside { position: sticky; top: 96px; }
}
html.theme-tarot .tm-fan-card { box-shadow: 0 26px 56px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(201, 168, 101, .22); }
html.theme-tarot .tm-box {
  background: rgba(25, 25, 52, .5);
  border: 1px solid rgba(150, 156, 212, .136);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html.theme-tarot .tm-box-h { color: #eeebf5; }
html.theme-tarot .tm-can li { color: #d8d5e6; }
html.theme-tarot .tm-can .tm-qa-mark { color: var(--tc-star); }
html.theme-tarot .tm-cannot { color: var(--tc-mute); }
html.theme-tarot .tm-cannot b { color: var(--tc-rose); }
html.theme-tarot .tm-steps4 li { color: #d8d5e6; }
html.theme-tarot .tm-steps4 span { background: rgba(42, 45, 98, .6); border-color: rgba(201, 168, 101, .4); color: var(--tc-gold-l); }
html.theme-tarot .tm-free-note { color: var(--tc-mute); }

/* 靜音鈕 */
html.theme-tarot .ta-mute { background: rgba(32, 32, 66, .55); border-color: rgba(150, 156, 212, .217); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.theme-tarot .ta-mute:hover { background: rgba(42, 45, 98, .6); border-color: rgba(201, 168, 101, .5); }

/* ── 子功能卡 ── */
html.theme-tarot .tm-more { background: transparent; color: var(--tc-lilac); }
html.theme-tarot .tm-more-h { color: #eeebf5; }
html.theme-tarot .tm-more-h small { color: var(--tc-mute); }
html.theme-tarot .tm-tile {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border-color: rgba(150, 156, 212, .149);
  background: linear-gradient(160deg, rgba(36, 35, 72, .5), rgba(20, 21, 44, .5));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--tc-lilac);
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: border-color .3s, background .3s, box-shadow .35s, transform .35s cubic-bezier(.16, 1, .3, 1);
}
html.theme-tarot .tm-tile.is-tilting { transition: border-color .3s, background .3s, box-shadow .35s; }
html.theme-tarot .tm-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(150, 156, 212, .124), transparent 65%);
  opacity: 0;
  transition: opacity .3s;
}
html.theme-tarot .tm-tile:hover::before { opacity: 1; }
html.theme-tarot .tm-tile:hover { border-color: rgba(201, 168, 101, .34); background: linear-gradient(160deg, rgba(46, 44, 88, .58), rgba(24, 24, 52, .55)); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); }
html.theme-tarot .tm-tile-art img { box-shadow: 0 0 0 1px rgba(201, 168, 101, .22), 0 6px 14px -6px rgba(0, 0, 0, .8); }
html.theme-tarot .tm-tile-k { color: var(--tc-violet-xl); }
html.theme-tarot .tm-tile-t { color: #fff; }
html.theme-tarot .tm-tile-d { color: #c4c1d8; }
html.theme-tarot .tm-tile-go { color: var(--tc-ice); }
html.theme-tarot .tm-more-mine { color: var(--tc-mute); }
html.theme-tarot .tm-more-mine a { color: var(--tc-ice); }

/* ====================================================================
   6. 洗牌 / 抽牌(2D;3D 舞台另由 tarot3d 模組上色)
   ==================================================================== */
html.theme-tarot .ta-pick { animation: tcFadeUp .6s cubic-bezier(.16, 1, .3, 1); }
html.theme-tarot .ta-slot::before { border-color: rgba(150, 156, 212, .279); }
html.theme-tarot .ta-slot-card { box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .8), 0 0 0 1px rgba(201, 168, 101, .35); }
html.theme-tarot .ta-slot-label { color: #e2cf9c; }
html.theme-tarot .ta-pick-hint { color: #e4e1ee; }
html.theme-tarot .ta-pick-hint b { color: var(--tc-star); }
html.theme-tarot .ta-shuffle-card { box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .85), 0 0 0 1px rgba(150, 156, 212, .14); }
html.theme-tarot .ta-fan-card img { box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .8), 0 0 0 1px rgba(150, 156, 212, .108); }
html.theme-tarot .ta-fan-card:hover { filter: drop-shadow(0 0 10px rgba(201, 168, 101, .22)); }
html.theme-tarot .ta-fan-card.picked img { box-shadow: 0 12px 26px -6px rgba(0, 0, 0, .85), 0 0 0 1.5px rgba(226, 207, 156, .8), 0 0 16px rgba(201, 168, 101, .14); }
html.theme-tarot .ta-fan-card.picked::after { background: var(--tc-grad); color: var(--tc-btn-ink); }
html.theme-tarot .ta-btn-reveal { background: rgba(60, 64, 130, .153); color: #8a87a6; border: 1px solid rgba(150, 156, 212, .155); }
html.theme-tarot .ta-btn-reveal.ready {
  color: var(--tc-btn-ink);
  background: var(--tc-grad);
  border-color: var(--tc-btn-bd);
  animation: tcPulse 3s ease-in-out infinite;
}
@keyframes tcPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(201, 168, 101, .12), 0 0 18px -8px rgba(201, 168, 101, .1); }
  50% { box-shadow: 0 0 0 1px rgba(201, 168, 101, .3), 0 0 26px -6px rgba(201, 168, 101, .2); }
}
html.theme-tarot .ta-btn-redo { border-color: rgba(150, 156, 212, .217); color: var(--tc-mute); }
html.theme-tarot .ta-btn-redo:hover { color: #fff; border-color: rgba(201, 168, 101, .5); }

/* ====================================================================
   7. 結果頁
   ==================================================================== */
html.theme-tarot .ta-show > a.ta-card-pos { color: #e2cf9c; }
html.theme-tarot .tc-query {
  position: relative;
  max-width: 640px;
  margin: 0 auto 6px;
  padding: 18px 22px 16px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(160deg, rgba(36, 35, 72, .55), rgba(20, 21, 44, .5));
  border: 1px solid rgba(150, 156, 212, .174);
  -webkit-backdrop-filter: var(--tc-blur);
  backdrop-filter: var(--tc-blur);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .85);
}
html.theme-tarot .ta-show-q { color: var(--tc-mute); font-size: 15px; }
html.theme-tarot .ta-show-q b { color: #fff; font-size: 17px; line-height: 1.6; }
html.theme-tarot .ta-show-spread {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 101, .36);
  background: rgba(42, 45, 98, .45);
  color: #e2cf9c;
  font-size: 13px;
}
html.theme-tarot .ta-show-opts { color: #eeebf5; }
html.theme-tarot .ta-show-opts em { border-color: rgba(200, 203, 224, .225); color: var(--tc-ice); }

/* 2D 翻牌(3D 失敗時) */
html.theme-tarot .ta-face,
html.theme-tarot .ta-back { box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .85), 0 0 0 1px rgba(150, 156, 212, .14); }
html.theme-tarot .ta-card.revealed .ta-face { box-shadow: 0 18px 46px -12px rgba(0, 0, 0, .85), 0 0 22px -6px rgba(201, 168, 101, .14), 0 0 0 1px rgba(201, 168, 101, .3); }
html.theme-tarot .ta-card-pos { color: #e2cf9c; }
html.theme-tarot .ta-card-name { color: #fff; }
html.theme-tarot .ta-card-ori { border-color: rgba(200, 203, 224, .225); color: #d0d3e6; }
html.theme-tarot .ta-card-ori.rev { border-color: rgba(214, 138, 128, .495); color: var(--tc-rose); }
html.theme-tarot .ta-card-mean { color: #b0adc8; }

/* 3D 下方的牌卡清單框、「全部翻開」鈕的配色由 3D 模組負責(resources/css/v2/tarot.css 的 .theme-tarot 段);
   這裡只管清單裡的文字(上面 .ta-card-pos / name / ori 規則) */

html.theme-tarot .ta-analyze { animation: tcFadeUp .7s cubic-bezier(.16, 1, .3, 1); }
html.theme-tarot .ta-analyze-hint { color: #cfcce0; }

/* 解讀長文:深色底上好讀(字級、行距、段寬、標題層次) */
html.theme-tarot .ta-reading {
  position: relative;
  margin-top: 40px;
  padding: 36px 34px 34px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(27, 27, 58, .78), rgba(17, 18, 40, .74));
  border: 1px solid rgba(150, 156, 212, .136);
  -webkit-backdrop-filter: var(--tc-blur);
  backdrop-filter: var(--tc-blur);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 40px 90px -50px rgba(0, 0, 0, .95);
  animation: tcFadeUp .7s cubic-bezier(.16, 1, .3, 1);
}
html.theme-tarot .ta-reading-wait { color: #cfcce0; }
html.theme-tarot .ta-spin { border-color: rgba(150, 156, 212, .186); border-top-color: var(--tc-ice); }
html.theme-tarot .ta-article {
  max-width: 40em;
  margin: 0 auto;
  color: #e4e1ee;
  font-size: 17px;
  line-height: 2;
  letter-spacing: .02em;
}
html.theme-tarot .ta-article p { margin: 0 0 1.1em; }
html.theme-tarot .ta-article h2 {
  position: relative;
  margin: 2.4em 0 .9em;
  padding: 0 0 .55em;
  border-left: 0;
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: .06em;
  color: #fff;
  scroll-margin-top: 96px;
}
html.theme-tarot .ta-article h2:first-child { margin-top: .2em; }
html.theme-tarot .ta-article h2::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 12px 0 2px;
  vertical-align: .15em;
  background: var(--tc-star);
  transform: rotate(45deg);
  box-shadow: none;
}
html.theme-tarot .ta-article h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 101, .4), rgba(201, 168, 101, .1) 40%, transparent);
}
html.theme-tarot .ta-article h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1.9em 0 .7em;
  font-size: 19px;
  line-height: 1.5;
  color: #e2cf9c;
  scroll-margin-top: 96px;
}
html.theme-tarot .ta-article h4 { color: #d0d3e6; font-size: 17px; margin: 1.4em 0 .5em; }
html.theme-tarot .ta-article strong { color: #fff; font-weight: 700; background: linear-gradient(transparent 64%, rgba(201, 168, 101, .16) 64%); }
html.theme-tarot .ta-article em { color: #d0d3e6; font-style: normal; }
html.theme-tarot .ta-article a { color: var(--tc-ice); text-underline-offset: 3px; }
html.theme-tarot .ta-article hr { border-top: 1px solid rgba(150, 156, 212, .136); margin: 2em 0; }
html.theme-tarot .ta-article ul,
html.theme-tarot .ta-article ol { padding-left: 1.4em; margin: 0 0 1.1em; }
html.theme-tarot .ta-article li { margin: .45em 0; }
html.theme-tarot .ta-article li::marker { color: var(--tc-violet-l); }
html.theme-tarot .ta-article blockquote {
  margin: 1.4em 0;
  padding: 16px 20px;
  border-left: 0;
  border-radius: 14px;
  background: rgba(60, 64, 130, .119);
  box-shadow: inset 0 0 0 1px rgba(150, 156, 212, .087);
  color: #e9e6f2;
}
html.theme-tarot .ta-article table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 15px; display: block; overflow-x: auto; }
html.theme-tarot .ta-article th,
html.theme-tarot .ta-article td { border: 1px solid rgba(150, 156, 212, .155); padding: 8px 10px; }
html.theme-tarot .ta-article th { background: rgba(60, 64, 130, .17); color: #fff; }
/* 逐張牌的小縮圖(JS 依 h3 牌名插入) */
html.theme-tarot .tc-h3-card {
  flex: none;
  width: 34px;
  height: 51px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(201, 168, 101, .32), 0 4px 12px -3px rgba(0, 0, 0, .8);
}
html.theme-tarot .tc-h3-card.is-rev { transform: rotate(180deg); }
/* 縮圖可點 → 全螢幕看整張牌(tarot-cosmic.js zoomCard) */
html.theme-tarot .tc-h3-card { cursor: zoom-in; transition: box-shadow .2s, filter .2s; }
html.theme-tarot .tc-h3-card:hover,
html.theme-tarot .tc-h3-card:focus-visible { outline: none; filter: brightness(1.12); box-shadow: 0 0 0 2px rgba(226, 207, 156, .75), 0 6px 16px -3px rgba(0, 0, 0, .85); }
html.tc-zoom-open, html.tc-zoom-open body { overflow: hidden; }
.tc-zoom[hidden] { display: none !important; }
.tc-zoom {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 24px;
  background: rgba(8, 9, 26, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  animation: tc-zoom-in .22s ease-out;
}
.tc-zoom-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 100%; }
.tc-zoom-fig img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 520px);
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(201, 168, 101, .45), 0 30px 70px -20px rgba(0, 0, 0, .95);
}
.tc-zoom-fig img.is-rev { transform: rotate(180deg); }
.tc-zoom-fig figcaption { color: #e2cf9c; font-size: 18px; font-weight: 700; letter-spacing: .06em; text-align: center; }
.tc-zoom-hint { margin: 0; color: #a9a5c4; font-size: 13px; }
.tc-zoom-x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(201, 168, 101, .4);
  border-radius: 999px;
  background: rgba(22, 22, 50, .7);
  color: #e9e6f2;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
@keyframes tc-zoom-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tc-zoom { animation: none; } }
/* 串流中最後一段的游標與光暈改冷色 */
html.theme-tarot .prose-bazi.is-streaming > *:last-child::after { color: var(--tc-ice); }
/* 鎖住預覽不限高(切點由後端決定,2026-10-27) */

/* 章節目錄 + 閱讀進度(JS 建立) */
html.theme-tarot .tc-toc[hidden] { display: none !important; }
html.theme-tarot .tc-toc {
  position: fixed;
  z-index: 41; /* 蓋過 LINE 側鈕(z-40) */
  top: 110px;
  left: max(12px, calc(50% - 460px - 206px));
  width: 190px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  padding: 16px 14px 14px;
  border-radius: 16px;
  background: rgba(17, 18, 40, .78);
  border: 1px solid rgba(150, 156, 212, .155);
  -webkit-backdrop-filter: var(--tc-blur);
  backdrop-filter: var(--tc-blur);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .4s, transform .4s;
  pointer-events: none;
  scrollbar-width: thin;
}
html.theme-tarot .tc-toc.is-show { opacity: 1; transform: none; pointer-events: auto; }
html.theme-tarot .tc-toc-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font-size: 13px; letter-spacing: .2em; color: var(--tc-violet-xl); }
html.theme-tarot .tc-toc-pct { letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--tc-mute); }
html.theme-tarot .tc-toc-bar { height: 3px; border-radius: 3px; background: rgba(150, 156, 212, .112); margin: 0 0 12px; overflow: hidden; }
html.theme-tarot .tc-toc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, rgba(201, 168, 101, .55), var(--tc-gold)); box-shadow: none; transition: width .2s linear; }
html.theme-tarot .tc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
html.theme-tarot .tc-toc a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #c4c1d8;
  font-size: 13.5px;
  line-height: 1.45;
  text-decoration: none;
  transition: background .2s, color .2s;
}
html.theme-tarot .tc-toc a:hover { background: rgba(150, 156, 212, .087); color: #fff; }
html.theme-tarot .tc-toc a.is-on { background: rgba(42, 45, 98, .65); color: var(--tc-gold-l); }
html.theme-tarot .tc-toc a.is-sub { padding-left: 18px; font-size: 13px; color: #a9a5c4; }
html.theme-tarot .tc-toc a img { width: 16px; height: 24px; object-fit: cover; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(226, 207, 156, .135); }
html.theme-tarot .tc-toc a img.is-rev { transform: rotate(180deg); }
/* 窄螢幕:左下角「目錄」小鈕 + 底部抽屜 */
html.theme-tarot .tc-toc-btn[hidden] { display: none !important; }
html.theme-tarot .tc-toc-btn {
  position: fixed;
  z-index: 41;
  left: 14px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(150, 156, 212, .31);
  background: rgba(22, 22, 50, .9);
  -webkit-backdrop-filter: var(--tc-blur);
  backdrop-filter: var(--tc-blur);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .9);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
html.theme-tarot .tc-toc-btn.is-show { opacity: 1; transform: none; pointer-events: auto; }
html.theme-tarot .tc-toc-btn svg { width: 16px; height: 16px; }
html.theme-tarot .tc-toc-ring { width: 22px; height: 22px; transform: rotate(-90deg); }
html.theme-tarot .tc-toc-ring circle { fill: none; stroke-width: 3; }
html.theme-tarot .tc-toc-ring .bg { stroke: rgba(150, 156, 212, .155); }
html.theme-tarot .tc-toc-ring .fg { stroke: var(--tc-gold); stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
@media (max-width: 1339px) {
  html.theme-tarot .tc-toc {
    top: auto;
    left: 10px;
    right: 10px;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: 480px;
    max-height: 60vh;
    transform: translateY(12px);
  }
  html.theme-tarot .tc-toc.is-show { transform: none; }
}

/* 操作列 */
html.theme-tarot .ta-act { border-radius: 12px; min-height: 48px; }
html.theme-tarot .ta-act-gold { color: var(--tc-btn-ink); background: var(--tc-grad); border: 1px solid var(--tc-btn-bd); box-shadow: var(--tc-btn-hi), 0 10px 26px -16px rgba(0, 0, 0, .85); }
html.theme-tarot .ta-act-gold:hover { color: #f3e6c2; border-color: var(--tc-gold); box-shadow: var(--tc-btn-hi), 0 14px 30px -16px rgba(0, 0, 0, .9); }
html.theme-tarot .ta-act-ghost { border: 1px solid rgba(150, 156, 212, .279); color: #eeebf5; background: rgba(32, 32, 66, .4); }
html.theme-tarot .ta-act-ghost:hover { border-color: rgba(201, 168, 101, .5); background: rgba(42, 45, 98, .5); }
html.theme-tarot .ta-share-modal { background: rgba(6, 7, 16, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.theme-tarot .ta-share-img { box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .9), 0 0 0 1px rgba(150, 156, 212, .155); }

/* 付費牆 / 試讀 / 免費提示(多為行內色碼,用屬性選擇器在塔羅結果頁內覆寫) */
html.theme-tarot .ta-reading .card-paper,
html.theme-tarot .ta-reading [style*="#FBF8F1"] {
  background: linear-gradient(180deg, rgba(36, 35, 72, .7), rgba(22, 22, 48, .7)) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 168, 101, .2), 0 30px 60px -36px rgba(0, 0, 0, .9) !important;
}
html.theme-tarot .ta-reading [style*="color:#2E7D4F"] { color: var(--tc-ice) !important; }
html.theme-tarot .ta-reading [style*="#EEF7F0"] { background: rgba(42, 45, 98, .119) !important; border-color: rgba(200, 203, 224, .248) !important; }
html.theme-tarot .ta-reading [style*="#fff8e8"] { background: linear-gradient(135deg, rgba(42, 45, 98, .55), rgba(32, 32, 66, .5)) !important; box-shadow: 0 0 0 1px rgba(201, 168, 101, .42), 0 10px 26px -18px rgba(0, 0, 0, .8) !important; }
html.theme-tarot .ta-reading [style*="#d63840"] { background: var(--tc-grad) !important; color: var(--tc-btn-ink) !important; border: 1px solid var(--tc-btn-bd) !important; box-shadow: var(--tc-btn-hi) !important; }
html.theme-tarot .ta-reading [style*="border:1px solid rgba(180,36,44"] { border-color: rgba(214, 138, 128, .405) !important; background: rgba(214, 138, 128, .072) !important; }
html.theme-tarot .ta-reading [style*="color:#B4242C"] { color: var(--tc-rose) !important; }
html.theme-tarot .ta-reading .bg-white { background-color: rgba(11, 12, 26, .55) !important; }

/* 付費牆(reading/_paywall 與它 include 的 _unlock-preview、billing/_subscribe-form、billing/_skip-reason):
   全是行內寫死的米白底、深棕字、綠框,要 !important 才蓋得過。範圍用 data-* 屬性限定,只有塔羅頁(html.theme-tarot)生效,
   抽籤等其他服務共用同一份元件,畫面不受影響。 */
html.theme-tarot [data-paywall-state] > .card-paper {
  background: linear-gradient(180deg, rgba(30, 30, 62, .96), rgba(18, 19, 40, .96)) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 168, 101, .24), 0 30px 60px -36px rgba(0, 0, 0, .9) !important;
}
html.theme-tarot [data-paywall-state] > .card-paper > img { opacity: .05 !important; filter: grayscale(1) brightness(1.8); }
html.theme-tarot [data-paywall-state] .input { background: rgba(11, 12, 26, .6); color: #e9e6f2; border-color: rgba(150, 156, 212, .3); }
html.theme-tarot [data-paywall-state] .input::placeholder { color: #8a87a6; }
html.theme-tarot [data-paywall-state] .input:focus { border-color: rgba(201, 168, 101, .6); box-shadow: 0 0 0 3px rgba(201, 168, 101, .12); }
html.theme-tarot [data-paywall-state] input[type="checkbox"] { accent-color: #c9a865; }
html.theme-tarot [data-paywall-state] a.underline { color: #e2cf9c; }
/* 綠字(註冊送解鎖、首購折扣、邀請)→ 月光銀 */
html.theme-tarot [data-paywall-state] [style*="color:#2E7D4F"] { color: #c8cbe0 !important; }
/* 免費解鎖額度卡(淺綠底、綠框)→ 深靛底、月光銀細框 */
html.theme-tarot [data-paywall-state] [style*="#EEF7F0"] { background: rgba(36, 35, 72, .85) !important; border: 1px solid rgba(200, 203, 224, .38) !important; }
/* 單次解鎖卡(淡金框)→ 深靛底、古金細框 */
html.theme-tarot [data-paywall-state] [style*="rgb(236 212 128"] { background: rgba(22, 22, 50, .8) !important; border-color: rgba(201, 168, 101, .34) !important; box-shadow: none !important; }
/* 會員卡(米金漸層 + 金框)→ 深靛漸層 + 古金框;「最划算」紅緞帶 → 深靛金字 */
html.theme-tarot [data-paywall-state] [style*="#fff8e8"] {
  background: linear-gradient(150deg, rgba(42, 45, 98, .92), rgba(30, 30, 62, .92)) !important;
  box-shadow: 0 0 0 1px rgba(201, 168, 101, .58), 0 14px 30px -20px rgba(0, 0, 0, .9) !important;
}
html.theme-tarot [data-paywall-state] [style*="#d63840"] { background: #20213f !important; color: #e2cf9c !important; border: 1px solid rgba(201, 168, 101, .6) !important; box-shadow: none !important; }
html.theme-tarot [data-paywall-state] [style*="color:var(--color-cinnabar)"] { color: #e2cf9c !important; }
/* 邀請朋友(綠色虛線框)→ 月光銀虛線;LINE 鈕保留 LINE 綠(品牌辨識) */
html.theme-tarot [data-paywall-state] [style*="dashed rgb(46 125 79"] { background: rgba(22, 22, 50, .75) !important; border-color: rgba(200, 203, 224, .32) !important; }
/* 「我先不付,告訴玄燈原因」問卷(米白面板、深棕字) */
html.theme-tarot [data-pay-skip] > button,
html.theme-tarot [data-pay-skip] > p[style*="#7A6F5C"] { color: #a9a5c4 !important; }
/* 問卷面板有 x-show:Alpine 改過 style 後瀏覽器會把色碼正規化成 rgb(…),只靠色碼對不到,所以用結構(> [x-show])一起抓 */
html.theme-tarot [data-pay-skip] > [x-show]:not(p),
html.theme-tarot [data-pay-skip] [style*="#F7F1E3"],
html.theme-tarot [data-pay-skip] [style*="rgb(247, 241, 227)"] { background: rgba(25, 25, 52, .92) !important; border-color: rgba(201, 168, 101, .3) !important; }
html.theme-tarot [data-pay-skip] [style*="color:#2A241A"] { color: #e9e6f2 !important; }
html.theme-tarot [data-pay-skip] [style*="color:#7A6F5C"] { color: #a9a5c4 !important; }
html.theme-tarot [data-pay-skip] button[style*="#FBF8F1"] { background: rgba(32, 32, 66, .8) !important; color: #dcd9e8 !important; border-color: rgba(150, 156, 212, .3) !important; }
html.theme-tarot [data-pay-skip] textarea { background: rgba(11, 12, 26, .6) !important; color: #e9e6f2 !important; border-color: rgba(150, 156, 212, .3) !important; }
html.theme-tarot [data-pay-skip] [style*="color:#B4242C"] { color: #e3a79f !important; }
/* 一鍵回饋「這次的牌準嗎?」(livewire/reading/_quick-feedback,行內米白卡、深棕字;沒套時是米白底配被改成淺色的字) */
html.theme-tarot [data-line-banner-trigger],
html.theme-tarot [data-line-banner-trigger] [style*="#FFFDF8"],
html.theme-tarot [data-line-banner-trigger] [style*="rgb(255, 253, 248)"] { background: rgba(25, 25, 52, .92) !important; border-color: rgba(201, 168, 101, .3) !important; }
html.theme-tarot [data-line-banner-trigger] [style*="color:#2A241A"],
html.theme-tarot [data-line-banner-trigger] [style*="color:#3A3226"] { color: #e9e6f2 !important; }
html.theme-tarot [data-line-banner-trigger] [style*="color:#7A6F5C"] { color: #a9a5c4 !important; }
html.theme-tarot [data-line-banner-trigger] button[style*="#FBF8F1"] { background: rgba(32, 32, 66, .8) !important; color: #dcd9e8 !important; border-color: rgba(150, 156, 212, .3) !important; }
html.theme-tarot [data-line-banner-trigger] button[style*="#FBF8F1"]:hover { background: rgba(42, 45, 98, .85) !important; }
html.theme-tarot [data-line-banner-trigger] [style*="background:#0F0D08"] { background: #20213f !important; color: #e2cf9c !important; border-color: rgba(201, 168, 101, .6) !important; }
html.theme-tarot [data-line-banner-trigger] textarea { background: rgba(11, 12, 26, .6) !important; color: #e9e6f2 !important; border-color: rgba(150, 156, 212, .3) !important; }
html.theme-tarot [data-line-banner-trigger] [style*="color:#A8322A"],
html.theme-tarot [data-line-banner-trigger] [style*="color:#B4242C"] { color: #e3a79f !important; }
html.theme-tarot [data-line-banner-trigger] [style*="border-top:1px dashed"] { border-top-color: rgba(150, 156, 212, .25) !important; }
/* 「解鎖後你會看到」(reading/_unlock-preview,行內白底;抽籤也用這份,只有塔羅頁會套到) */
html.theme-tarot [data-unlock-preview] {
  background: rgba(22, 22, 50, .78) !important;
  border: 1px solid rgba(201, 168, 101, .36) !important;
}
html.theme-tarot [data-unlock-preview] .text-ink-900 { color: #e9e6f2 !important; }
html.theme-tarot [data-unlock-preview] .text-ink-600 { color: #a9a5c4 !important; }
html.theme-tarot [data-unlock-preview] [aria-hidden="true"] { color: #c9a865 !important; }

/* 範例說明(_demo-notice 已帶星夜配色);下一步推薦與一鍵回饋的行內白卡 */
html.theme-tarot .tc-island [style*="background:#FBF8F1"] {
  background: linear-gradient(180deg, rgba(36, 35, 72, .6), rgba(22, 22, 48, .6)) !important;
  border-color: rgba(201, 168, 101, .22) !important;
  -webkit-backdrop-filter: var(--tc-blur);
  backdrop-filter: var(--tc-blur);
}
html.theme-tarot .tc-island [style*="background:#fff"] { background: rgba(11, 12, 26, .5) !important; border-color: rgba(150, 156, 212, .186) !important; }
html.theme-tarot .tc-island [style*="color:#8A6D1F"] { color: var(--tc-star) !important; border-color: rgba(201, 168, 101, .44) !important; }
html.theme-tarot .tc-island [style*="color:#2A241A"],
html.theme-tarot .tc-island [style*="color:#0F0D08"] { color: #fff !important; }
html.theme-tarot .tc-island [style*="color:#5A5040"],
html.theme-tarot .tc-island [style*="color:#7A6F5C"] { color: #c4c1d8 !important; }
html.theme-tarot .tc-island [style*="color:#B4242C"] { color: var(--tc-ice) !important; }
html.theme-tarot .tc-island [style*="background:#2E7D4F"] { background: #4a5680 !important; }
html.theme-tarot .tc-island [style*="background:#B4242C"] { background: #9a4f49 !important; }
html.theme-tarot .tc-island .card,
html.theme-tarot .tc-island .card-paper { background: rgba(25, 25, 52, .6); }

/* ====================================================================
   8. 塔羅牌義(/tarot-cards、/tarot-cards/{slug})
   ==================================================================== */
html.theme-tarot .tc-lib { position: relative; }
html.theme-tarot .tc-lib h1 {
  color: #f1eef6;
  text-shadow: none;
}
html.theme-tarot .tc-lib .xd-lib-cover { display: none; }
html.theme-tarot .tc-lib .xd-lib-head { display: block; }
html.theme-tarot .tc-lib-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--tc-violet-xl);
}
html.theme-tarot .tc-lib-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc-star); box-shadow: 0 0 6px rgba(201, 168, 101, .3); animation: tcTwinkle 4.2s ease-in-out infinite; }
/* 牌卡格:浮起 + 淡金細邊 */
html.theme-tarot .tc-lib-grid a { position: relative; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
html.theme-tarot .tc-lib-grid a img {
  border-color: rgba(150, 156, 212, .186) !important;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9);
  transition: box-shadow .35s, border-color .35s, transform .35s cubic-bezier(.16, 1, .3, 1);
}
html.theme-tarot .tc-lib-grid a:hover img {
  border-color: rgba(226, 207, 156, .48) !important;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .95), 0 0 18px -6px rgba(201, 168, 101, .14);
  transform: translateY(-6px) rotate(-1deg);
}
html.theme-tarot .tc-lib-grid a span { color: #d6d3e4; }
html.theme-tarot .tc-lib-grid a:hover span { color: #fff; }
html.theme-tarot .tc-lib section h2 { color: #eeebf5; }
html.theme-tarot .tc-lib section h2::after {
  content: "";
  display: block;
  margin-top: 10px;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--tc-violet-l), transparent);
}
/* 單張牌頁 */
html.theme-tarot .tc-lib .badge-accent { background: rgba(42, 45, 98, .55); color: #e2cf9c; box-shadow: 0 0 0 1px rgba(201, 168, 101, .35); }
html.theme-tarot .tc-card-img {
  border-color: rgba(201, 168, 101, .35) !important;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .95);
  animation: tcFloat 9s ease-in-out infinite;
}
@keyframes tcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
html.theme-tarot .tc-lib .bg-paper-50\/70 {
  background: linear-gradient(160deg, rgba(36, 35, 72, .5), rgba(20, 21, 44, .45)) !important;
  border-color: rgba(150, 156, 212, .155) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html.theme-tarot .tc-lib .prose-xuandeng { color: #d8d5e6; }
html.theme-tarot .tc-lib .prose-xuandeng h2 { color: #fff; }
html.theme-tarot .tc-lib .prose-xuandeng h2::before,
html.theme-tarot.ui-v2 .tc-lib .prose-xuandeng h2::before { background: var(--tc-star); box-shadow: none; }
html.theme-tarot .tc-lib .prose-xuandeng strong { color: #fff; }
html.theme-tarot .tc-lib .prose-xuandeng > p:first-of-type { color: #e9e6f2; }
html.theme-tarot .tc-lib details summary { color: #eeebf5; }
html.theme-tarot .tc-lib details[open] { background: linear-gradient(90deg, rgba(42, 45, 98, .35), transparent); }
html.theme-tarot .tc-lib .card-paper,
html.theme-tarot.ui-v2 .tc-lib .card-paper {
  background: linear-gradient(160deg, rgba(46, 44, 88, .55), rgba(24, 24, 52, .5));
  box-shadow: inset 0 0 0 1px rgba(201, 168, 101, .18), 0 30px 60px -36px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html.theme-tarot .tc-lib .bg-cinnabar\/10 { background: rgba(42, 45, 98, .55); }
html.theme-tarot .tc-lib .text-cinnabar { color: var(--tc-star); }

/* 服務正文 + FAQ(reading/_service-content,public/css/service-content.css)與延伸閱讀:色票自動換,寫死的金色再覆寫 */
html.theme-tarot .sc-wrap {
  background: radial-gradient(56rem 24rem at 88% 0%, rgba(42, 45, 98, .35), transparent 70%), radial-gradient(36rem 20rem at 0% 38%, rgba(32, 32, 66, .3), transparent 70%);
  border-top: 1px solid rgba(201, 168, 101, .14);
}
html.theme-tarot .sc-cloud { display: none; }
html.theme-tarot .sc-cover { border-color: rgba(201, 168, 101, .22); background: #191a38; box-shadow: 0 20px 50px -28px rgba(0, 0, 0, .95); }
/* 封面是米色水墨圖:原本的色相旋轉會把宣紙變成怪異的藍紫,改成只降一點彩度、壓暗,讓水墨原色融進夜色(圖檔不動) */
html.theme-tarot .sc-cover img { filter: saturate(.7) brightness(.74); }
html.theme-tarot section[aria-labelledby^="related-heading"] img { filter: saturate(.75) brightness(.8); }
html.theme-tarot section[aria-labelledby^="related-heading"] { background: transparent; }
html.theme-tarot .sc-toc-box { border-color: rgba(150, 156, 212, .217); background: rgba(25, 25, 52, .55); }
html.theme-tarot .sc-lead { border-color: rgba(201, 168, 101, .4); background: linear-gradient(to right, rgba(42, 45, 98, .4), transparent 75%); }
html.theme-tarot .sc-term {
  border-color: rgba(150, 156, 212, .186);
  background: linear-gradient(160deg, rgba(36, 35, 72, .6), rgba(20, 21, 44, .55));
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .9);
}
html.theme-tarot .sc-term:hover { border-color: rgba(201, 168, 101, .4); }
html.theme-tarot .sc-faq-list,
html.theme-tarot .sc-faq-item { border-color: rgba(150, 156, 212, .155); }
html.theme-tarot .sc-q { border-color: var(--tc-violet-l); color: var(--tc-violet-xl); }
html.theme-tarot .sc-faq-item[open] .sc-q { background: var(--tc-grad); border-color: var(--tc-btn-bd); color: var(--tc-btn-ink); }
html.theme-tarot .sc-a-mark { background: rgba(200, 203, 224, .072); color: #d0d3e6; }
html.theme-tarot .sc-cta-icon { background: rgba(42, 45, 98, .6); color: var(--tc-star); }
html.theme-tarot .sc-toc::before { background: linear-gradient(to bottom, rgba(201, 168, 101, .05), rgba(201, 168, 101, .3), rgba(201, 168, 101, .05)); }
html.theme-tarot .sc-toc a.is-active::before { box-shadow: 0 0 0 3px rgba(201, 168, 101, .14); }
html.theme-tarot .sc-lib-icon { background: linear-gradient(145deg, #282c58, #1b1b3c); color: var(--tc-gold-l); box-shadow: inset 0 0 0 1px rgba(201, 168, 101, .35); }
html.theme-tarot .sc-wrap .card-paper,
html.theme-tarot.ui-v2 .sc-wrap .card-paper {
  background: rgba(25, 25, 52, .5);
  box-shadow: inset 0 0 0 1px rgba(150, 156, 212, .068);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html.theme-tarot .sc-wrap .card-paper:hover,
html.theme-tarot.ui-v2 .sc-wrap .card-paper:hover { box-shadow: inset 0 0 0 1px rgba(201, 168, 101, .3), 0 18px 40px -22px rgba(0, 0, 0, .85); }

/* ====================================================================
   9. 共用動態:進場、淡入
   ==================================================================== */
@keyframes tcFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* 只在 JS 標記為「在畫面外」的元素上套隱藏(首屏不藏,不拖 LCP;腳本沒跑內容照常顯示) */
html.theme-tarot .tc-pre { opacity: 0; transform: translateY(22px); }
html.theme-tarot .tc-pre.tc-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--tc-d, 0ms); }

/* ====================================================================
   10. 手機
   ==================================================================== */
@media (max-width: 899px) {
  html.theme-tarot .tm-spreads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.theme-tarot .tm-spread--celtic { grid-column: span 2; }
}
@media (max-width: 639px) {
  html.theme-tarot .tc-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 18px; }
  html.theme-tarot .tc-flow li { flex-direction: column; justify-content: center; gap: 5px; padding: 8px 2px; text-align: center; font-size: 12.5px; }
  html.theme-tarot .tc-flow li b { width: 22px; height: 22px; font-size: 12px; }
  html.theme-tarot .tc-flow-pick { margin-top: 34px; } /* 讓出右上角的音效鈕 */
  html.theme-tarot .tm-spreads { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html.theme-tarot .tm-spread--celtic { grid-column: auto; }
  html.theme-tarot .tm-spread { flex-direction: row; align-items: center; gap: 12px; padding: 12px 12px; transform: none; }
  html.theme-tarot .tm-spread .tm-diagram { width: 58px; height: 40px; }
  html.theme-tarot .tm-spread-text { flex: 1; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 3px; padding-right: 44px; }
  html.theme-tarot .tm-spread-cost { margin-left: 0; }
  html.theme-tarot .tc-spread-sub { display: none; } /* 位置名稱在下方說明面板也有,手機收起讓清單短一點 */
  html.theme-tarot .tc-spread-count { top: 50%; transform: translateY(-50%); right: 10px; }
  html.theme-tarot .tm-guide-chip,
  html.theme-tarot .ta-chip { min-height: 44px; font-size: 15px; }
  html.theme-tarot .ta-btn-go { min-height: 60px; font-size: 18px; }
  html.theme-tarot .ta-reading { padding: 26px var(--xd-gutter, 18px) 26px; margin-left: calc(-1 * var(--xd-gutter, 18px) + 6px); margin-right: calc(-1 * var(--xd-gutter, 18px) + 6px); border-radius: 18px; }
  html.theme-tarot .ta-article { font-size: 16.5px; line-height: 1.95; }
  html.theme-tarot .ta-article h2 { font-size: 20px; }
  html.theme-tarot .ta-article h3 { font-size: 17.5px; }
  html.theme-tarot .tc-query { padding: 16px 16px 14px; }
  html.theme-tarot .ta-actions .ta-act { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 12px 10px; }
}

/* 手機效能:毛玻璃蓋在會動的星空上,每一幀都要重算模糊(實測 CPU 4x 降速時長任務多一倍)
   → 手機上只有導覽列保留毛玻璃,其他面板改用較不透明的實色;星雲改靜態 */
@media (max-width: 767px), (pointer: coarse) {
  html.theme-tarot body::before { animation: none; will-change: auto; }
  html.theme-tarot .tm-form,
  html.theme-tarot .tm-box,
  html.theme-tarot .tm-tile,
  html.theme-tarot .tm-nav-a,
  html.theme-tarot .tc-query,
  html.theme-tarot .ta-reading,
  html.theme-tarot .card,
  html.theme-tarot .tc-island [style*="background:#FBF8F1"],
  html.theme-tarot .tc-lib .bg-paper-50\/70,
  html.theme-tarot .tc-lib .card-paper,
  html.theme-tarot .sc-wrap .card-paper,
  html.theme-tarot .ta-mute { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.theme-tarot .tm-form { background: linear-gradient(180deg, rgba(30, 30, 62, .94), rgba(20, 21, 44, .94)); }
  html.theme-tarot .ta-reading { background: linear-gradient(180deg, rgba(25, 25, 52, .95), rgba(16, 17, 36, .95)); }
  html.theme-tarot .tm-box,
  html.theme-tarot .tm-tile,
  html.theme-tarot .tc-query { background: rgba(27, 27, 58, .9); }
}

/* ====================================================================
   11. 減少動態:全部停下
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.theme-tarot body::before,
  html.theme-tarot .tm-dot,
  html.theme-tarot .tc-lib-kicker::before,
  html.theme-tarot .ta-btn-go::before,
  html.theme-tarot .ta-btn-go::after,
  html.theme-tarot .ta-btn-reveal.ready,
  html.theme-tarot .tm-spread.on::after,
  html.theme-tarot .tc-card-img,
  html.theme-tarot .tm-panel,
  html.theme-tarot .ta-pick,
  html.theme-tarot .ta-analyze,
  html.theme-tarot .ta-reading { animation: none !important; }
  html.theme-tarot .tm-spread,
  html.theme-tarot .tm-tile { transform: none !important; }
  html.theme-tarot .tc-constel { transition: none; }
  html.theme-tarot .tc-pre { opacity: 1; transform: none; }
  html.theme-tarot .tc-lib-grid a:hover img { transform: none; }
}

/* 接力半價限時卡(_next-steps 的 [data-relay-offer],2026-10-27):行內淺粉底不在換色清單,字被換成白/冰藍 → 看不見。改深紫底 + 舊朱框 */
html.theme-tarot .tc-island [data-relay-offer] {
  background: linear-gradient(180deg, rgba(64, 40, 72, .78) 0%, rgba(36, 26, 56, .78) 100%) !important;
  border-color: rgba(227, 167, 159, .55) !important;
}

/* 2026-10-28 配色檢查:導覽列 FREE 角標灰藍底白字 → 古金底深靛字;下拉選單 94% 透明會透出底下的大標題 → 改不透明 */
html.theme-tarot body > nav span.bg-emerald-600 { background: #d9bf82; color: #12132a; box-shadow: 0 0 0 1px #12132a; }
html.theme-tarot body > nav [x-show].absolute.rounded-xl,
html.theme-tarot.ui-v2 body > nav [x-show].absolute.rounded-xl { background-color: #161632; }
/* 2026-10-28 配色檢查:正文小標「塔羅占卜指南」(.badge-accent 古金底)字被換成月光白,對比只有 1.8 → 深靛字(跟星盤/月老主題同做法;牌義頁 .tc-lib 另有自己的樣式不受影響) */
html.theme-tarot .sc-eyebrow .badge-accent,
html.theme-tarot.ui-v2 .sc-eyebrow .badge-accent { color: #12132a; }