/*
 * 命盤的樣式。主題都是 CSS 變數（<html data-theme="e|f|a|b|c|d">，設定裡切換）：
 *   預設「琉璃」跟系統深淺色：淺色 e 晨光琉璃、深色 f 暮紫琉璃（store.js resolveTheme）
 *   另外保留 a 星夜鎏金、b 米紙朱砂、c 簡潔工具、d 柔和粉彩
 * 琉璃：背景是固定的幾團色光（靜態漸層，不用 filter、不動）＋玻璃。真正的 backdrop-filter 只用在固定的少數元素
 *   （頁首、分頁膠囊、子分頁、頭像、彈出面板）；捲動內容裡的卡片用半透明漸層＋高光假裝玻璃，捲動才不會卡。
 * 版面：頁首、分頁列都 position: fixed，只有 #main 會捲（iOS PWA 頁首才不會被系統糊掉、返回才點得到）；
 *   #main 撐滿整個畫面、上下用 padding 讓開，內容可以從玻璃底下滑過。
 * 沒有一直跑的動畫：動畫只在等 AI、洗牌、翻牌時存在，放著不動時不耗電（scripts/perf.mjs 會量）。
 */
:root {
  --hh: calc(54px + env(safe-area-inset-top));
  --r: 16px;
  --sym: 'Noto Sans Symbols 2', 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
  --en: 'Cormorant Garamond', 'Times New Roman', serif;
  /* 琉璃以外的主題：金色就是主色、標題用本文字型 */
  --gold: var(--accent); --gold-ink: var(--accent); --gold-soft: var(--accent-soft); --serif: var(--font);
  --glass: var(--hdr); --bar: var(--hdr); --glass-line: var(--line); --glass-hi: rgba(255, 255, 255, .12); --glass-shadow: 0 8px 26px rgba(0, 0, 0, .16);
  --lens: var(--accent-soft); --lens-rim: inset 0 0 0 1px var(--accent); --tab-on: var(--accent);
  --th: calc(84px + env(safe-area-inset-bottom) * .5);
  /* 星盤：相位線（三分綠、六分青、對分藍、四分紅）和星座符號的元素色 */
  --a-tri: #2f9a5f; --a-sex: #1f9fb0; --a-opp: #3f66d0; --a-sq: #d24a4a;
  --el-fire-ink: #c8505c; --el-earth-ink: #a87b1f; --el-air-ink: #2f8a5e; --el-water-ink: #3d68b8;
}
:is([data-theme="a"], [data-theme="f"]) {
  --el-a: .22;
  --a-tri: #74d6a0; --a-sex: #63d2df; --a-opp: #8aa8ff; --a-sq: #ff8080;
  --el-fire-ink: #ff9ea6; --el-earth-ink: #f0cd78; --el-air-ink: #8fe0b5; --el-water-ink: #9cc0ff;
}
[data-theme="e"] {
  --bg: #fbe6ef; --bg2: #ece4fb; --bg3: #e3eefa;
  --orb1: rgba(247, 168, 200, .7); --orb2: rgba(185, 162, 245, .7); --orb3: rgba(243, 217, 164, .6);
  --card: linear-gradient(160deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .34)); --card-solid: #f8f2fc; --line: rgba(122, 79, 196, .14);
  --glass: rgba(255, 255, 255, .38); --glass-line: rgba(255, 255, 255, .8); --glass-hi: rgba(255, 255, 255, .95); --glass-shadow: 0 10px 30px rgba(122, 79, 196, .14);
  --ink: #3a3150; --muted: #7d7394; --accent: #8a66d8; --accent2: #b597f0; --on-accent: #fff; --accent-soft: rgba(155, 122, 224, .14);
  --gold: #d9b878; --gold-ink: #a8843f; --gold-soft: rgba(217, 184, 120, .18); --back1: #c7b0f5; --back2: #8a66d8;
  --bar: rgba(253, 246, 251, .82); --bar-hdr: rgba(253, 246, 251, .9); /* 頁首、分頁列、子分頁：比玻璃卡更不透明，沒有 blur 也讀得清楚（頁首後面常常是字，再更實一點） */
  --lens: rgba(255, 255, 255, .78); --lens-rim: inset 0 1px 0 #fff, 0 0 0 1px #d9b878, 0 2px 8px rgba(122, 79, 196, .14); --tab-on: #6a48c0;
  --hdr: rgba(255, 255, 255, .38); --input: rgba(255, 255, 255, .55);
  --good: #3f9a77; --bad: #b0607c;
  --wood: #3f9a77; --fire: #d9607a; --earth: #a8843f; --metal: #857a99; --water: #5a7fe0;
  --font: 'Huninn', 'PingFang TC', sans-serif; --serif: 'Noto Serif TC', 'Songti TC', serif;
  color-scheme: light;
}
[data-theme="f"] {
  --bg: #3b2a5e; --bg2: #2a2150; --bg3: #1a1638;
  --orb1: rgba(212, 111, 163, .55); --orb2: rgba(125, 94, 224, .6); --orb3: rgba(201, 163, 95, .35);
  --card: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05)); --card-solid: #2c2354; --line: rgba(255, 255, 255, .13);
  --glass: rgba(255, 255, 255, .1); --glass-line: rgba(255, 255, 255, .22); --glass-hi: rgba(255, 255, 255, .35); --glass-shadow: 0 12px 32px rgba(0, 0, 0, .32);
  --ink: #f3ecff; --muted: #c4b8e0; --accent: #e3c47d; --accent2: #f0d9a0; --on-accent: #2a2150; --accent-soft: rgba(227, 196, 125, .14);
  --gold: #e3c47d; --gold-ink: #f0d9a0; --gold-soft: rgba(227, 196, 125, .16); --back1: #6a4fc0; --back2: #2f2560;
  --bar: rgba(42, 33, 80, .94); --bar-hdr: rgba(42, 33, 80, .94);
  --lens: linear-gradient(135deg, rgba(240, 217, 160, .95), rgba(217, 184, 120, .9)); --lens-rim: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 10px rgba(0, 0, 0, .3); --tab-on: #2a2150;
  --hdr: rgba(42, 33, 80, .45); --input: rgba(0, 0, 0, .2);
  --good: #8fdcb3; --bad: #f4a6c0;
  --wood: #8fdcb3; --fire: #f4a6c0; --earth: #e3c47d; --metal: #e8e1f5; --water: #9cc0ff;
  --font: 'Huninn', 'PingFang TC', sans-serif; --serif: 'Noto Serif TC', 'Songti TC', serif;
  color-scheme: dark;
}
[data-theme="a"] {
  --bg: #12112a; --bg2: #1d1b44; --card: rgba(255, 255, 255, .055); --card-solid: #1e1c40; --line: rgba(227, 196, 125, .22);
  --ink: #ece6d6; --muted: #a39fbb; --accent: #e3c47d; --on-accent: #1a1730; --accent-soft: rgba(227, 196, 125, .14);
  --hdr: rgba(18, 17, 42, .86); --input: rgba(255, 255, 255, .07);
  --good: #7fd1a4; --bad: #f08a7e;
  --wood: #7fd1a4; --fire: #f08a7e; --earth: #d9b37a; --metal: #e8e3d3; --water: #7fb3f0;
  --font: 'Noto Serif TC', 'Songti TC', serif;
  color-scheme: dark;
}
[data-theme="b"] {
  --bg: #f3ead8; --bg2: #efe3cb; --card: #fbf6ea; --card-solid: #fbf6ea; --line: #dccfb4;
  --ink: #2b2420; --muted: #7d7062; --accent: #b83a24; --on-accent: #fff; --accent-soft: rgba(184, 58, 36, .1);
  --hdr: rgba(243, 234, 216, .92); --input: #fffdf7;
  --good: #3f7a4e; --bad: #b83a24;
  --wood: #3f7a4e; --fire: #c2412b; --earth: #8a6328; --metal: #6f6a5d; --water: #2f5d8a;
  --font: 'LXGW WenKai TC', 'Kaiti TC', serif;
  color-scheme: light;
}
[data-theme="c"] {
  --bg: #f6f7f9; --bg2: #f6f7f9; --card: #fff; --card-solid: #fff; --line: #e3e6ec;
  --ink: #1d2330; --muted: #687083; --accent: #2457c5; --on-accent: #fff; --accent-soft: rgba(36, 87, 197, .09);
  --hdr: rgba(246, 247, 249, .92); --input: #fff;
  --good: #1f8a4c; --bad: #d03b2f;
  --wood: #1f8a4c; --fire: #d03b2f; --earth: #a16a1c; --metal: #6b7280; --water: #2457c5;
  --font: 'Noto Sans TC', 'PingFang TC', sans-serif;
  color-scheme: light;
}
[data-theme="d"] {
  --bg: #f6e3f0; --bg2: #e6e0fb; --card: rgba(255, 255, 255, .72); --card-solid: #fbf5fc; --line: #e6d6ef;
  --ink: #3d3550; --muted: #857a99; --accent: #9b7ae0; --on-accent: #fff; --accent-soft: rgba(155, 122, 224, .13);
  --hdr: rgba(248, 236, 246, .9); --input: rgba(255, 255, 255, .85);
  --good: #3f9a77; --bad: #d9607a;
  --wood: #3f9a77; --fire: #e0607a; --earth: #b88445; --metal: #8a83a0; --water: #5a7fe0;
  --font: 'Huninn', 'PingFang TC', sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: linear-gradient(170deg, var(--bg) 0%, var(--bg2) 100%) fixed var(--bg);
  color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-text-size-adjust: 100%; overscroll-behavior: none;
}
/* 星夜：固定的一層星點（畫一次，不動） */
[data-theme="a"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 9%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 42% 33%, #f3e2b3 50%, transparent 51%), radial-gradient(1px 1px at 88% 41%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 62%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 66% 71%, #f3e2b3 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 88%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 52% 93%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 79%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 35% 6%, #fff 50%, transparent 51%);
}
/* 琉璃：三團色光（靜態漸層，畫一次）；暮紫再加零星星點 */
:is([data-theme="e"], [data-theme="f"]) body { background: linear-gradient(170deg, var(--bg) 0%, var(--bg2) 50%, var(--bg3) 100%) fixed var(--bg2); }
:is([data-theme="e"], [data-theme="f"]) body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle 200px at 10% 18%, var(--orb1), transparent 70%),
    radial-gradient(circle 230px at 100% 52%, var(--orb2), transparent 70%),
    radial-gradient(circle 190px at 35% 92%, var(--orb3), transparent 70%);
}
[data-theme="f"] body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .8;
  background-image:
    radial-gradient(1px 1px at 13% 5%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 36% 3%, #f0d9a0 50%, transparent 51%),
    radial-gradient(1px 1px at 77% 8%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 91% 4%, #fff 50%, transparent 51%),
    radial-gradient(.8px .8px at 59% 13%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 23% 18%, #f0d9a0 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 69% 23%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 8% 64%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 88%, #f0d9a0 50%, transparent 51%);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h2, h3, h4 { margin: 0 0 8px; line-height: 1.3; font-family: var(--serif); letter-spacing: .04em; }
.kicker { font-family: var(--en); font-size: 12.5px; font-weight: 600; letter-spacing: .3em; color: var(--gold-ink); text-transform: uppercase; line-height: 1.4; }
.rule { height: 1px; border: 0; margin: 12px 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
h3 { font-size: 17px; }
h4 { font-size: 15px; margin-top: 18px; color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.hint { color: var(--muted); font-size: 12.5px; font-weight: normal; }
.sym { font-family: var(--sym); font-variant-emoji: text; }
.num { font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif; font-variant-numeric: tabular-nums; }

/* 頁首（固定） */
#hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--hh);
  padding: env(safe-area-inset-top) 12px 0 16px; display: flex; align-items: center; gap: 6px;
  background: var(--hdr); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
#hdr .who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
#hdr .who b { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hdr .who small { color: var(--muted); font-size: 12px; }
.icon-btn { border: 0; background: transparent; min-width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; font-size: 22px; line-height: 1; color: var(--ink); padding: 0 6px; }
.icon-btn:active { background: var(--accent-soft); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 17px; display: inline-grid; place-items: center; flex: none; padding: 0; }
.avatar.sm { width: 34px; height: 34px; font-size: 15px; }

/* 只有這裡捲 */
#main {
  position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(var(--hh) + 12px) 12px calc(var(--th) + 24px);
}
#tabs[hidden] { display: none; }
body:has(#tabs[hidden]) #main { padding-bottom: 24px; }
#main > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.loading-page { text-align: center; padding: 60px 0; }

/* 分頁列：浮在內容上的玻璃膠囊（照 vibe）。選中那格有一塊「鏡頭」，換分頁彈簧滑過去；按住往旁邊拖，鏡頭跟著手指，
   放開才切換（src/app/tabbar.js）。永遠完整顯示，不會捲動縮小 */
#tabs { position: fixed; bottom: calc(env(safe-area-inset-bottom) * .5 + 10px); left: 0; right: 0; max-width: 560px; margin: 0 auto; padding: 0 16px; z-index: 20; display: flex; justify-content: center; pointer-events: none; }
/* 膠囊底下到螢幕底那一條：內容捲到這裡淡出成背景色，不會在膠囊下緣露出半行字 */
#tabs::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--th) - 6px); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg3, var(--bg2)) 55%); /* Safari 16.0/16.1 沒有 color-mix：先給不透明的 */
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg3, var(--bg2)) 92%, transparent) 55%); }
#tabs .tb { --spring: cubic-bezier(.34, 1.45, .64, 1); position: relative; display: flex; width: 100%; height: 62px; padding: 4px; border-radius: 31px; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none;
  background: var(--bar); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
@supports (transition-timing-function: linear(0, 1)) { #tabs .tb, .subtabs { --spring: linear(0, .38 4%, .74 8%, .97 13%, 1.07 19%, 1.09 23%, 1.05 29%, 1.01 36%, .995 44%, 1.002 60%, 1); } }
#tabs .lens, .subtabs .lens { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 5)); border-radius: 27px; background: var(--lens);
  box-shadow: var(--lens-rim); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .5s var(--spring), scale .3s var(--spring); pointer-events: none; }
#tabs .tb.press .lens { scale: 1.1 1.08; }
#tabs button { position: relative; flex: 1 1 0; min-width: 0; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--muted); font-size: 11px; line-height: 1.2; overflow: hidden; border-radius: 27px; transition: color .2s; }
#tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#tabs svg .f { fill: currentColor; fill-opacity: 0; transition: fill-opacity .2s; }
#tabs button.on { color: var(--tab-on); font-weight: 700; }
#tabs button.on svg { stroke-width: 1.9; }
#tabs button.on svg .f { fill-opacity: .2; }
#tabs button.prev { color: var(--ink); }
#tabs .lbl { white-space: nowrap; }

/* 卡片、按鈕、輸入 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.row.end { justify-content: flex-end; }
.row.nowrap { flex-wrap: nowrap; }
.row.nowrap .btn { flex: none; }
.row.between { justify-content: space-between; margin-top: 0; flex-wrap: nowrap; }
.btn { border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 700; padding: 10px 16px; min-height: 44px; }
.btn:disabled { opacity: .5; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.wide { width: 100%; }
.btn:active { filter: brightness(.92); }
.link { border: 0; background: none; color: var(--accent); padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.input { width: 100%; border: 1px solid var(--line); background: var(--input); border-radius: 12px; padding: 10px 12px; min-height: 44px; font-size: 16px; }
.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.input.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; margin-top: 8px; word-break: break-all; }
.grow { flex: 1; width: auto; min-width: 90px; }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 16px center, right 11px center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.chip { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 6px 12px; font-size: 14px; min-height: 36px; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: 13px; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.tag.good { color: var(--good); }
.tag.bad { color: var(--bad); }
dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 10px 0 0; font-size: 14.5px; }
dl.kv dt { color: var(--muted); white-space: nowrap; }
dl.kv dd { margin: 0; min-width: 0; }

/* 五行顏色 */
.el-wood { color: var(--wood); } .el-fire { color: var(--fire); } .el-earth { color: var(--earth); } .el-metal { color: var(--metal); } .el-water { color: var(--water); }
.bg.el-wood { background: var(--wood); } .bg.el-fire { background: var(--fire); } .bg.el-earth { background: var(--earth); } .bg.el-metal { background: var(--metal); } .bg.el-water { background: var(--water); }

/* 今日 */
.daynav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.daynav .icon-btn { font-size: 28px; }
.daytitle { font-size: 16px; }
.lunar-big { font-size: 28px; font-weight: 700; color: var(--accent); letter-spacing: .05em; }
.gz-line { font-size: 18px; margin: 2px 0; }
.yiji { display: grid; gap: 10px; margin: 12px 0 4px; }
.yiji > div { display: flex; gap: 10px; align-items: flex-start; }
.yi-mark, .ji-mark { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; color: #fff; }
.yi-mark { background: var(--good); }
.ji-mark { background: var(--bad); }

/* 八字 */
table.pillars { width: 100%; border-collapse: collapse; text-align: center; table-layout: fixed; margin-top: 6px; }
.pillars th { font-weight: normal; color: var(--muted); font-size: 12.5px; padding: 4px 0; }
.pillars tbody th { width: 42px; text-align: left; }
.pillars td { padding: 4px 2px; border-top: 1px solid var(--line); font-size: 13px; }
.pillars tr.big td { font-size: 30px; font-weight: 700; line-height: 1.25; }
.pillars tr.shen td { font-size: 13px; color: var(--accent); }
.pillars tr.hide td div { white-space: nowrap; font-size: 14px; }
.pillars tr.hide small { color: var(--muted); font-size: 11px; margin-left: 2px; }
.wx-bar { display: flex; height: 30px; border-radius: 10px; overflow: hidden; gap: 2px; margin: 6px 0; }
.wx-bar span { display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); min-width: 28px; }
.wx-legend { display: flex; gap: 10px; flex-wrap: wrap; }
.hscroll { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.dy { flex: none; min-width: 64px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.dy b { font-size: 20px; }
.dy small { font-size: 11.5px; }
.dy.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }

/* 紫微 */
.zw-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, minmax(112px, auto)); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.zw-cell { position: relative; border: 0; background: var(--card-solid); text-align: left; padding: 4px 3px 3px; display: flex; flex-direction: column; min-width: 0; font-size: 11px; line-height: 1.25; }
.zw-cell.dec { box-shadow: inset 0 0 0 2px var(--accent); }
.zw-cell.yr { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card-solid); }
.zw-cell.ming .zw-name b { color: var(--accent); }
.zw-stars { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 3px; }
.st { white-space: nowrap; color: var(--muted); font-size: 10.5px; }
.st.major { color: var(--ink); font-weight: 700; font-size: 12.5px; }
.st i { font-style: normal; font-size: 9px; color: var(--muted); font-weight: normal; margin-left: 1px; }
.st em, .zw-legend em { font-style: normal; font-size: 9.5px; color: #fff; border-radius: 3px; padding: 0 2px; margin-left: 1px; font-weight: 700; }
.zw-legend em, .hua-tag { font-size: 11px; padding: 0 3px; margin: 0 4px 0 2px; }
.hua-tag { font-style: normal; color: #fff; border-radius: 3px; font-weight: 700; }
.hua-lu { background: #2f9a5b; } .hua-quan { background: #8a4fd0; } .hua-ke { background: #2f7ad0; } .hua-ji { background: #d0453a; }
.zw-foot { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--muted); }
.bd { display: inline-block; font-size: 9.5px; padding: 0 3px; border-radius: 3px; border: 1px solid var(--muted); color: var(--muted); margin-left: 1px; font-weight: 700; line-height: 1.35; }
.bd.dec { border-color: var(--accent); color: var(--accent); }
.bd.yr { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.zw-name { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line); margin-top: 2px; padding-top: 1px; }
.zw-name b { font-size: 13px; }
.zw-name span { font-size: 10.5px; color: var(--muted); }
.zw-center { grid-area: 2 / 2 / 4 / 4; background: var(--card-solid); padding: 10px 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 12px; gap: 2px; }
.zw-who { font-size: 18px; color: var(--accent); }
.zw-legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 2px 10px; color: var(--muted); }

/* 星盤 */
.wheel-card { padding: 8px; }
.wheel { width: 100%; max-width: 420px; display: block; margin: 0 auto; }
.wheel .sg { stroke: var(--line); stroke-width: 1; fill-opacity: var(--el-a, .16); }
/* 四元素淡色底：火紅、土黃、風綠、水藍（深色主題透明度高一點才看得出來） */
.wheel .sg.fire { fill: #ef7a85; } .wheel .sg.earth { fill: #ddb052; } .wheel .sg.air { fill: #5cbf8e; } .wheel .sg.water { fill: #6a98e4; }
.wheel text { text-anchor: middle; dominant-baseline: central; fill: var(--ink); }
.wheel .sgn { font-size: 14px; }
.wheel .sgn.fire { fill: var(--el-fire-ink); } .wheel .sgn.earth { fill: var(--el-earth-ink); } .wheel .sgn.air { fill: var(--el-air-ink); } .wheel .sgn.water { fill: var(--el-water-ink); }
.wheel .sgname { font-size: 9.5px; fill: var(--ink); opacity: .85; }
.wheel .pl { font-size: 15px; }
.wheel .pl.sun, .wheel .pl.moon { fill: var(--gold-ink); font-size: 17px; }
.wheel .pl.node, .wheel .pl.fortune { font-size: 13px; fill: var(--muted); }
.wheel .rx { font-size: 7.5px; fill: var(--bad); font-family: sans-serif; }
.wheel .hn { font-size: 8.5px; fill: var(--muted); font-family: sans-serif; }
.wheel .axis { font-size: 9.5px; fill: var(--gold-ink); font-weight: 700; font-family: var(--en), serif; letter-spacing: .05em; }
.wheel .ring { fill: none; stroke: var(--line); }
.wheel .cusp { stroke: var(--muted); stroke-width: .6; opacity: .6; }
.wheel .cusp.angle { stroke: var(--gold); stroke-width: 1.5; opacity: 1; }
.wheel .tick { stroke: var(--ink); stroke-width: 1.2; }
.wheel .lead { stroke: var(--muted); stroke-width: .6; }
.wheel .pdot { fill: var(--ink); opacity: .7; }
.wheel .asp { stroke-width: 1.1; opacity: .85; }
.wheel .asp.tri, .asp-legend i.tri { stroke: var(--a-tri); background: var(--a-tri); }
.wheel .asp.sex, .asp-legend i.sex { stroke: var(--a-sex); background: var(--a-sex); }
.wheel .asp.opp, .asp-legend i.opp { stroke: var(--a-opp); background: var(--a-opp); }
.wheel .asp.sq, .asp-legend i.sq { stroke: var(--a-sq); background: var(--a-sq); }
.asp-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 6px; }
.asp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.asp-legend i { display: inline-block; width: 18px; height: 2.5px; border-radius: 2px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: normal; color: var(--muted); font-size: 12.5px; padding: 4px; }
.tbl td { padding: 6px 4px; border-top: 1px solid var(--line); white-space: nowrap; }
.asp-list { display: grid; gap: 2px; }
.asp-row { display: grid; grid-template-columns: 1fr auto 1fr 44px; gap: 8px; align-items: center; padding: 5px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.asp-row span:first-child { text-align: right; }
.asp-row b { font-size: 13px; padding: 0 8px; border-radius: 999px; border: 1px solid currentColor; }
.asp-row b.tri { color: var(--a-tri); } .asp-row b.sex { color: var(--a-sex); } .asp-row b.opp { color: var(--a-opp); } .asp-row b.sq { color: var(--a-sq); } .asp-row b.conj { color: var(--gold-ink); }
.asp-row small { text-align: right; }

/* 合盤 */
.pair { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.pair select { flex: 1; width: auto; }

/* AI 解讀 */
.reading .rd-head { display: flex; align-items: center; justify-content: space-between; }
.reading .tone .chip { font-size: 13px; padding: 5px 10px; }
.md { font-size: 15.5px; line-height: 1.75; }
.md p { margin: 0 0 10px; }
.md h4 { margin: 14px 0 6px; font-size: 16px; }
.md ul { margin: 0 0 10px; padding-left: 20px; }
.md li { margin: 3px 0; }
.md strong { color: var(--accent); }
.caret { display: inline-block; width: 8px; height: 1em; background: var(--accent); vertical-align: text-bottom; margin-left: 2px; opacity: .7; }
.loading::after { content: ' ⋯'; }
.thread .q { margin: 14px 0 6px auto; width: fit-content; max-width: 85%; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 14px 14px 4px 14px; padding: 6px 12px; font-size: 14.5px; }
.ask-row { display: flex; gap: 8px; margin-top: 12px; }
.ask-row .input { flex: 1; }
.ask-row .btn { flex: none; }

/* 第一次、表單 */
.welcome h2 { font-size: 26px; color: var(--accent); }
.pf { display: grid; gap: 12px; margin-top: 12px; }
.pf label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.pf label.check { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); flex-wrap: wrap; }
.pf label.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.pf .lbl { font-size: 14px; color: var(--muted); margin-bottom: -8px; }
.pf .row { margin-top: 0; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg label { flex: 1; display: block; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.seg span { display: block; text-align: center; padding: 9px; color: var(--ink); font-size: 16px; }
.seg input:checked + span { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -3px; }

/* 彈出面板 */
#modal[hidden] { display: none; }
.ov { position: fixed; inset: 0; z-index: 40; background: rgba(8, 8, 20, .5); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 560px; max-height: calc(100% - var(--hh) + 20px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card-solid); color: var(--ink); border-radius: 22px 22px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .3);
}
.sheet.small { max-height: 80%; }
.sheet .ask { font-size: 16px; margin: 4px 0 8px; }
.plist { list-style: none; margin: 0; padding: 0; }
.plist li { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); }
.plist li.on .pick b { color: var(--accent); }
.plist li.on .avatar { background: var(--accent); color: var(--on-accent); }
.pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 10px 2px; text-align: left; }
.pick span:last-child { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pick small { color: var(--muted); font-size: 12.5px; }
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-card { border: 1px solid var(--line); background: transparent; border-radius: 14px; padding: 8px; display: flex; align-items: center; gap: 8px; min-height: 52px; text-align: left; }
.theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; font-weight: 700; }
.theme-card .sw { width: 34px; height: 34px; border-radius: 10px; flex: none; border: 1px solid rgba(0, 0, 0, .1); }
.t-a .sw { background: radial-gradient(circle at 70% 30%, #e3c47d 0 4px, transparent 5px), linear-gradient(160deg, #12112a, #2a2760); }
.t-b .sw { background: radial-gradient(circle at 70% 30%, #b83a24 0 5px, transparent 6px), #f3ead8; }
.t-c .sw { background: linear-gradient(#2457c5 0 30%, #f6f7f9 30%); }
.t-d .sw { background: radial-gradient(circle at 70% 30%, #9b7ae0 0 5px, transparent 6px), linear-gradient(160deg, #fde4ef, #e9e2fb); }
.t-e .sw { background: radial-gradient(circle at 72% 30%, #d9b878 0 4px, transparent 5px), radial-gradient(circle at 20% 80%, #f7a8c8, transparent 60%), linear-gradient(160deg, #fbe6ef, #ece4fb 50%, #e3eefa); }
.t-f .sw { background: radial-gradient(circle at 72% 30%, #e3c47d 0 4px, transparent 5px), radial-gradient(circle at 20% 80%, #d46fa3, transparent 60%), linear-gradient(170deg, #3b2a5e, #1a1638); }
.t-auto .sw { background: linear-gradient(135deg, #fbe6ef 0 49%, #2a2150 51%); box-shadow: inset 0 0 0 1.5px #d9b878; }
.theme-card.t-auto { grid-column: 1 / -1; }
.news ul { margin: 4px 0 10px; padding-left: 18px; }

#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--th) + 14px); z-index: 80; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 14.5px; max-width: calc(100vw - 32px); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
#toast[hidden] { display: none; }

/* 子分頁（命盤、問事）：黏在 #main 頂端 */
.subtabs { --spring: cubic-bezier(.34, 1.45, .64, 1); position: sticky; top: -12px; z-index: 5; display: flex; padding: 4px; margin: -4px auto 12px; border-radius: 24px;
  background: var(--bar); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.subtabs .lens { border-radius: 20px; }
.subtabs button { position: relative; flex: 1 1 0; border: 0; background: transparent; border-radius: 20px; padding: 6px 4px; min-height: 42px; font-size: 15px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 5px; transition: color .2s; }
.subtabs svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.subtabs button.on { color: var(--tab-on); font-weight: 700; }

/* 重點卡、細節收合 */
.gist { background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--card); }
.gist-big { font-size: 24px; font-weight: 700; margin: 4px 0; }
.gist-big b { color: var(--accent); margin-left: 4px; }
.gist-big small { font-size: 15px; color: var(--muted); font-weight: normal; }
.gist p { margin: 4px 0 0; font-size: 14.5px; }
.btn.sm { min-height: 34px; padding: 4px 12px; font-size: 14px; border-radius: 10px; }
.pillars:not(.open) tr.detail, .detail-p:not(.open) { display: none; }
.zw-grid:not(.full) .st:not(.major) { display: none; }
.zw-tools { margin: 0 2px 6px; }
details.card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: '展開'; font-size: 13px; color: var(--accent); flex: none; }
details.card[open] > summary::after { content: '收起'; }
details.card > summary h3 { margin: 0; }
.lbl { margin-top: 10px; }

/* 儀式感：按下去星光聚攏成一顆光球，等 AI 時光球呼吸（只在等待時存在） */
.btn.glow { background: var(--accent); box-shadow: 0 4px 18px var(--accent-soft); } /* Safari 16.0/16.1 沒有 color-mix 的退路 */
.btn.glow { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff)); box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
:is([data-theme="e"], [data-theme="f"]) .btn.glow { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 1px var(--gold), 0 6px 22px var(--gold-soft); }
.ritual { position: relative; width: 120px; height: 120px; margin: 8px auto 0; }
.ritual i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold), 0 0 14px var(--accent);
  animation: gather .9s cubic-bezier(.3, .7, .3, 1) var(--d) both; }
.ritual .orb { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, var(--gold) 35%, var(--accent) 55%, transparent 74%); animation: orb-in .5s .7s both, breathe 1.6s 1.2s ease-in-out infinite; }
@keyframes gather { from { transform: rotate(var(--a)) translateY(-56px) scale(1.4); opacity: 0; } 30% { opacity: 1; } to { transform: rotate(calc(var(--a) + 120deg)) translateY(0) scale(.3); opacity: 0; } }
@keyframes orb-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes breathe { 50% { transform: scale(1.35); opacity: .75; } }

/* 塔羅 */
.tc-svg { display: block; width: 100%; height: auto; color: var(--ink); }
.tc-bg { fill: var(--card-solid); stroke: var(--gold); stroke-width: 2; }
.tc-back { stroke: var(--gold); stroke-width: 2; }
.tc-frame { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .75; }
.tc-num { font-size: 17px; text-anchor: middle; fill: var(--gold-ink); font-family: var(--en); font-weight: 600; letter-spacing: 1px; }
.tc-name { font-size: 14px; text-anchor: middle; fill: var(--ink); font-weight: 700; font-family: var(--serif); }
.tc-svg .b1 { stop-color: var(--back1, var(--accent)); } .tc-svg .b2 { stop-color: var(--back2, var(--accent)); }
.tc-star { fill: none; stroke: var(--gold); stroke-width: 2; }
.tc-svg .ac { fill: var(--gold); }
.deck { position: relative; height: 170px; margin: 16px auto; width: 100px; }
.deck-card { position: absolute; inset: 0; transform: translate(calc(var(--i) * 2px), calc(var(--i) * -2px)); }
.deck.shuffling .deck-card { animation: shuffle .4s ease-in-out calc(var(--i) * 40ms) 3 alternate; }
@keyframes shuffle { 50% { transform: translateX(calc((var(--i) - 2.5) * 22px)) rotate(calc((var(--i) - 2.5) * 6deg)); } }
.spread { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.deal .slot { animation: deal .45s ease-out both; }
.deal .slot:nth-child(2) { animation-delay: .12s; } .deal .slot:nth-child(3) { animation-delay: .24s; }
@keyframes deal { from { transform: translateY(-40px) scale(.8); opacity: 0; } }
.tcard { position: relative; width: 100%; aspect-ratio: 120 / 200; border: 0; padding: 0; background: none; perspective: 800px; }
.tcard .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.4, .2, .2, 1); }
.tcard .front { transform: rotateY(180deg); }
.tcard.flipped .back { transform: rotateY(-180deg); }
.tcard.flipped .front { transform: rotateY(0); }
.tcard.rev.flipped .front { transform: rotateY(0) rotate(180deg); }
.mean { padding: 8px 0; border-bottom: 1px solid var(--line); }
.mean:last-child { border-bottom: 0; }
.mean p { margin: 4px 0 0; font-size: 14.5px; }
.mean .tag { margin-left: 8px; }
.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.mini { text-align: center; font-size: 11.5px; }
.mini .tc-svg { max-width: 72px; margin: 0 auto 2px; }
.mini.rev .tc-svg { transform: rotate(180deg); }

/* 擇日 */
.day-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.day-row:last-child { border-bottom: 0; }
.day-d { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: var(--accent-soft); line-height: 1.25; padding: 4px 0; }
.day-d b { font-size: 16px; color: var(--accent); }
.day-w { min-width: 0; font-size: 14.5px; }
.day-w small { display: block; line-height: 1.45; margin-top: 2px; }

/* 紀錄 */
details.rec > summary { display: block; }
details.rec > summary::after { display: none; }
details.rec .tag { margin-right: 6px; font-size: 12px; }
.rec-q { margin-top: 4px; font-weight: 700; }
.card details.rec { border-top: 1px solid var(--line); padding: 8px 0; }
.card details.rec summary { cursor: pointer; }
.row .grow { flex: 1; }

/* 分享預覽 */
.share-prev img { display: block; width: 62%; height: auto; margin: 0 auto 6px; border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ── 琉璃（e、f）：玻璃、金線、膠囊分頁列 ── */
:is([data-theme="e"], [data-theme="f"]) {
  --r: 24px;
}
:is([data-theme="e"], [data-theme="f"]) :is(#hdr, .subtabs, .avatar, .sheet) {
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}
:is([data-theme="e"], [data-theme="f"]) #hdr { background: var(--bar-hdr); border-bottom: 1px solid var(--glass-line); box-shadow: inset 0 -1px 0 var(--glass-hi); }
:is([data-theme="e"], [data-theme="f"]) .card {
  background: var(--card); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}
:is([data-theme="e"], [data-theme="f"]) .gist { background: linear-gradient(135deg, var(--gold-soft), transparent 60%), var(--card); border-color: var(--gold); }
:is([data-theme="e"], [data-theme="f"]) .avatar {
  background: var(--glass); color: var(--ink); border: 1px solid var(--glass-line); font-family: var(--serif);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 1.5px var(--gold), 0 6px 16px rgba(122, 79, 196, .18);
}
:is([data-theme="e"], [data-theme="f"]) .btn { border-radius: 22px; background: linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 18px rgba(122, 79, 196, .2); }
:is([data-theme="e"], [data-theme="f"]) .btn.ghost { background: var(--glass); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi); color: var(--ink); }
:is([data-theme="e"], [data-theme="f"]) .btn.danger { background: var(--bad); }
:is([data-theme="e"], [data-theme="f"]) .chip { background: var(--glass); border-color: var(--glass-line); }
:is([data-theme="e"], [data-theme="f"]) .chip.on { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-hi); }
:is([data-theme="e"], [data-theme="f"]) .input { border-radius: 22px; border-color: var(--glass-line); padding-left: 16px; }
:is([data-theme="e"], [data-theme="f"]) .sheet { background: var(--card-solid); background: color-mix(in srgb, var(--card-solid) 82%, transparent); border-top: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), 0 -10px 40px rgba(0, 0, 0, .25); }
:is([data-theme="e"], [data-theme="f"]) .lunar-big, :is([data-theme="e"], [data-theme="f"]) .gist-big, :is([data-theme="e"], [data-theme="f"]) .pillars tr.big td, :is([data-theme="e"], [data-theme="f"]) .dy b { font-family: var(--serif); }
:is([data-theme="e"], [data-theme="f"]) .lunar-big { color: var(--ink); }
:is([data-theme="e"], [data-theme="f"]) h4, :is([data-theme="e"], [data-theme="f"]) .md strong, :is([data-theme="e"], [data-theme="f"]) .zw-who { color: var(--gold-ink); }
:is([data-theme="e"], [data-theme="f"]) .dy.on, :is([data-theme="e"], [data-theme="f"]) .zw-cell.dec { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 4px 14px var(--gold-soft); background: var(--gold-soft); }
:is([data-theme="e"], [data-theme="f"]) .yi-mark { background: linear-gradient(135deg, #f0d9a0, #c9a35f); color: #3a2a10; }
/* 日主那一柱：金框 */
.pillars td.dm { background: var(--gold-soft); }
.pillars thead th.dm { color: var(--gold-ink); font-weight: 700; }
:is([data-theme="e"], [data-theme="f"]) .pillars td.dm { box-shadow: inset 1px 0 0 var(--gold), inset -1px 0 0 var(--gold); }

@media (prefers-reduced-motion: reduce) {
  #tabs .tb, #tabs .lens, #tabs button, .subtabs .lens { transition: none !important; }
  .ritual i, .ritual .orb, .deck.shuffling .deck-card, .deal .slot, .tcard .face { animation: none !important; transition: none !important; }
  .ritual .orb { opacity: 1; }
}

@media (min-width: 600px) {
  #main { padding: 16px; }
}

/* 太陽／月亮／上升三格（src/app/big3.js；照 A 稿：金色符號、襯線星座名、小字標籤，細邊圓角） */
.big3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; margin: 4px 0 12px; }
.b3 { border: 1px solid var(--line); border-radius: 14px; padding: 10px 4px; background: var(--card); }
.b3-g { font-size: 20px; line-height: 1.3; color: var(--gold-ink); }
.b3-s { font-family: var(--serif); font-size: 17px; line-height: 1.4; }
.b3-l { font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.card .big3 { margin-bottom: 4px; }
[data-theme="e"] .b3 { background: linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .3)); border-color: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(122, 79, 196, .1); }
[data-theme="f"] .b3 { background: rgba(26, 22, 56, .45); border-color: rgba(255, 255, 255, .12); }
[data-theme="f"] .b3-g { color: #f3dca4; }