@import url('./brand-ui/fate-ui.css?v=quiet-focus-20260921');

/* 知命 Fate App —— 現有功能 DOM 的 app 專用樣式與 Fate UI 相容層
   從舊的單檔 SPA index.html 原封不動搬出來（2026-08-19 改多頁）。
   改這裡 = 全站一起改；不准在個別頁面寫局部樣式。 */
/* ═══════════ TOKENS ═══════════ */
/* Shared input typography, including fields injected by dialogs and chat history. */
html[data-fate-system="app"] :is(input,textarea,select,[contenteditable="true"]){
  font-family:var(--fate-font-body)!important;
  font-weight:var(--fate-font-body-weight,400)!important;
  font-size:15px!important;
  line-height:1.9!important;
  letter-spacing:normal!important;
  font-style:normal;
  color:var(--text-body)!important;
}
html[data-fate-system="app"] :is(input,textarea)::placeholder{
  font-family:inherit;
  font-weight:inherit;
  font-style:normal;
}
/* --leaf-* 整組已移除:那是兩代前的「深綠植物風」,值早就被改成紫,最後一個用它的
   地方(課程頁的「禮」印)因此印出一枚紫章。留著只會再被誤用。 */
:root{
  --text-strong:var(--fate-ink); --text-body:var(--fate-ink-body); --text-muted:var(--fate-ink-muted); --text-faint:var(--fate-ink-faint);
  --cinnabar:var(--fate-seal); --cinnabar-deep:var(--fate-danger);
  /* ══ 中國礦物顏料墨水 —— 顆色是資料編碼，不是裝飾 ══
     真實礦物顏料名；每一種只以「磨砂玻璃背後的透光墨暈」出現。
     赭石那顆量自 FateTell 的暈染核心（EVIDENCE.md B3）。 */
  --ink-mo:var(--fate-mineral-ink);        /* 松煙墨 · 八字 */
  --ink-zhusha:var(--fate-mineral-cinnabar); /* 硃砂 · 紫微（也是印的顏色） */
  --ink-shiqing:var(--fate-mineral-azurite); /* 石青 · 星座 */
  --ink-shilv:var(--fate-mineral-malachite); /* 石綠 · 生肖 */
  --ink-huaqing:var(--fate-mineral-indigo);  /* 花青 · MBTI */
  --ink-tenghuang:var(--fate-mineral-gamboge); /* 藤黃 · 九型 */
  --ink-zheshi:var(--fate-mineral-ochre);    /* 赭石 · 脈輪 */
  /* 五行各自的墨 */
  --ink-jin:#8E8578; --ink-mu:var(--fate-mineral-malachite); --ink-shui:var(--fate-mineral-indigo);
  --ink-huo:var(--fate-mineral-cinnabar); --ink-tu:var(--fate-mineral-gamboge);

  /* 暖赭暈染 —— 量自 FateTell(色相 12–39°、飽和 17–40%,不是彩虹) */
  --bloom-core:#B89A76; --bloom-warm:#CCB488; --bloom-cool:#CBBEB6; --bloom-edge:#F5F1F0;
  /* 接近黑(L 指定,取龍頭色票 #030001)。2026-08-17 改回:Safari 26 工具列
     深色延伸已由透明 shim 破解,canvas 不再需要遷就圖底色;背景圖以 mask 在
     100lvh 底完全收乾成透明,由圖(底部烘向 #222322)漸變過渡到本色,無硬邊。 */
  --canvas:var(--fate-paper); /* fate.tips canonical 宣紙 */
  --sab:env(safe-area-inset-bottom,0px); --sat:env(safe-area-inset-top,0px);
  --hdr-h:58px; --seg-gap:3px; /* sticky nav 統一規則的兩顆 token(見 chrome 區注釋) */
  /* 外距底線(L 2026-09-26「≥20px，什麼都不貼邊」):內容欄左右留白、頂列、出血橫捲列、貼底 CTA 共用這一顆。
     頁面若自寫 padding-inline 覆蓋它，要改用 var(--app-gutter)，不要寫死數字。 */
  --app-gutter:20px;
  --glass:var(--fate-glass); --glass-soft:rgba(248,246,239,.42); --glass-chrome:rgba(243,240,231,.88);
  --glass-ink:rgba(21,23,19,.88);
  --line:var(--fate-line); --line-soft:var(--fate-line-soft);
  --r-xl:var(--fate-radius-card); --r-lg:var(--fate-radius-lg); --r-md:var(--fate-radius-md); --r-pill:var(--fate-radius-pill);
  --font-display:var(--fate-font-display,'Noto Serif TC',serif);
  --font-body:var(--fate-font-body,'Noto Sans TC',sans-serif);
  --font-latin:var(--fate-font-latin);
  --shadow-1:none;   /* Fate surface:一般卡片零陰影,只靠紙面明度與 hairline */
  --shadow-2:none;
  --shadow-3:var(--fate-shadow-float);
  --ease:var(--fate-ease-ink); --ease-out:var(--fate-ease-resolve);
  --dur-fast:var(--fate-duration-micro); --dur-base:var(--fate-duration-control); --dur-slow:var(--fate-duration-resolve);
  /* 禪意動效（L 2026-09-26）：內容浮現一律 560ms、柔和 ease-out，不彈不衝；與換頁 --fate-page-duration 同拍。 */
  --zen-reveal:560ms; --zen-ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
/* app 內永不出現原生滾動條(v1 家規,重寫時漏掉) */
*::-webkit-scrollbar{width:0;height:0}
*{scrollbar-width:none}
/* v1 原式:html+body 都是實色畫布(body 帶 !important,「地址列伸縮時不會露空」) */
html{background:var(--canvas)}
body{margin:0;padding:0;background:var(--canvas) !important;font-family:var(--font-body);color:var(--text-body);
  -webkit-font-smoothing:antialiased}
html,body{height:auto}
/* ═══ 點不下去的真因（L 2026-08-19 兩次回報「點不了」）═══
   全站沒有任何 user-select:none，磁磚/列/chip 裡的字全都是可選取文字。
   人的手指（或滑鼠）按下去難免飄兩三像素 → 瀏覽器把它判成「選字拖曳」
   （實測抓到 selectstart 事件、文字真的被選起來），超過位移門檻就不發 click。
   自動化點擊（位移 0）永遠成功，所以一直重現不出來——這就是差別。
   App 介面不是文件：全站關掉選取，只在真的要讓人複製的地方開回來。
   touch-action:manipulation 順便拿掉雙擊縮放延遲。 */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  touch-action:manipulation;
  /* 系統預設 rgba(0,0,0,.18) 的點擊高亮——它是一個不吃 border-radius 的矩形，
     所以圓角卡片/膠囊按鈕一按就閃出一塊直角黑影（L 2026-08-19 回報）。
     回饋一律自己做（下面的按壓區塊），系統這層關掉。*/
  -webkit-tap-highlight-color:transparent}
button,a,[onclick]{-webkit-tap-highlight-color:transparent}
input,textarea,[contenteditable],.selectable{-webkit-user-select:text;user-select:text}
/* isolation:讓 .bg 的 z-index:-1 留在 app 內,不沉到 body 底色後面(v1 教訓,重寫時漏掉的一行) */
.app{position:relative;isolation:isolate}
/* 撤回:body 尾巴帶圖(2026-08-17 試,L 回報更糟)——body 背景會隨文件捲動,
   在其他畫面造成重複紋理與錯位。strip 維持純 canvas 色(近黑,像機身邊框)。 */
@media (max-width:767px){body{padding-bottom:calc(150px + var(--sab))}}
input,select,textarea,button{font-size:16px;font-family:var(--font-body)}
/* Prevent small-field focus zoom on touch devices without disabling pinch zoom. */
@media(any-pointer:coarse),(max-width:600px){
  html[data-fate-system="app"] :is(input,textarea,select,[contenteditable="true"]){font-size:16px!important}
}

/* ═══ 背景:v1 架構(單一 sticky 層+遮罩褪透明),2026-08-17 shim 後放寬版 ═══
   工具列深色延伸已由 .safari-toolbar-sampling-shim 破解,因此:
   (1) 高度 100lvh(大視口)——工具列收合時圖仍蓋滿到底,玻璃後面有真像素;
       lvh 的舊硬邊風險不存在:遮罩在 100% 收乾,層底永遠是透明,不可能露切邊。
   (2b) 頂端不漸入（L 2026-08-19：「上面那層黑的怎麼露出來了」）——
       舊遮罩在 0→5% 也有一段漸入，但這層是 sticky 貼視口頂的，
       那 5%（約 40px）永遠落在畫面最上面 → 半透明的 .chrome-top 後面就是
       一條黑帶。頂端本來就沒有硬邊問題（圖就從視口頂開始），漸入是多餘的。
       底部的 90→100 保留（那是為 Safari 工具列做的，有真理由）。
   (2) 遮罩 90→100(L:84 開始褪太早)——圖看得更久,淡出貼著底邊完成。
   (3) html+body 實色畫布 #030001(L 指定近黑);圖底本身烘向 #222322,
       靠 10% 遮罩漸變過渡,無硬邊。
   (4) ::after 淺白磨砂(2026-08-17 L 指定:圖太清晰太搶眼)——backdrop blur
       疊在圖上壓細節,同遮罩跟著圖淡出,不碰圖檔。舊「禁第二層 frost」是
       防縫時代規則,shim 後由 L 解禁。 */
.bg{display:block;position:sticky;top:0;height:0;z-index:-1;pointer-events:none}
.bg::before{content:"";position:absolute;left:0;right:0;top:0;height:100vh;height:100lvh;
  background:url("assets/paper.png") center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 90%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 90%,rgba(0,0,0,0) 100%)}
/* v4：不再在紙上加任何效果。
   v3 這裡有一層白霧 frost（白 8% + blur 8px），那是為了壓住深色紋理的銳利度；
   宣紙本來就柔，再蓋一層只會把纖維抹平，看起來就是一塊空白色塊。
   （L 2026-08-19：「背景圖我看不到宣紙…宣紙版本背景不需要在上面做效果了」）*/

/* ═══ 玻璃材質 ═══ */
/* 玻璃卡立體邊:上緣亮 bevel + 上光暈落入 + 下內緣厚度陰影 + 底外反光線 */
.glass{background:var(--glass);border:1px solid rgba(26,23,20,.055);border-top-color:rgba(26,23,20,.055);border-bottom-color:rgba(26,23,20,.07);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2)}
.glass,.panel,.chrome-top,.sheet{-webkit-backdrop-filter:blur(28px) saturate(1.25);backdrop-filter:blur(28px) saturate(1.25)}
.panel{background:var(--glass);border:1px solid rgba(26,23,20,.055);border-top-color:rgba(26,23,20,.055);border-bottom-color:rgba(26,23,20,.07);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3)}

/* ═══ Chrome:頂列(sticky 收窄留頂)═══ */
.chrome-top{position:sticky;top:0;z-index:30;min-height:58px;padding:var(--sat) var(--app-gutter) 0;
  display:flex;align-items:center;gap:10px;background:var(--glass-chrome);
  box-shadow:inset 0 -1px 0 var(--line-soft);transition:transform .26s var(--ease)}
html.hdr-hidden .chrome-top{transform:translateY(-105%)}
.chrome-title{font-family:var(--font-display);font-size:18px;font-weight:400;letter-spacing:.05em;color:var(--text-strong)}
/* ═══ sticky nav 統一規則(L 2026-08-17:全站 consistent,視覺頂距一律 --seg-gap)═══
   header 可見:seg 停在 header 底下 --seg-gap;header 收合(hdr-hidden):停在安全區頂
   下 --seg-gap。數學:停靠 top = --sat + (header在? --hdr-h : 0) + --seg-gap - 容器自身
   padding-top(--seg-pad,預設 14px;chatView 容器無 padding 設 0)。header 高度恆為
   --sat + --hdr-h(chrome-top 用 padding-top:var(--sat)),所以實機有瀏海時也對齊。
   舊特例已收編勿復活:#mallMain top:44 兩態、chatView translateY(-48)——transform 特例
   會跟通用 top 規則疊加,把聊天室 seg 推到 -38px 只剩白色下緣(L 紅圈那條白 bar)。 */
.seg-sticky{position:sticky;z-index:29;
  top:calc(var(--sat) + var(--hdr-h) + var(--seg-gap) - var(--seg-pad,14px));
  transition:top .26s var(--ease)}
html.hdr-hidden .seg-sticky{top:calc(var(--sat) + var(--seg-gap) - var(--seg-pad,14px))}
#chatView .seg-sticky{--seg-pad:0px}
/* seg 深底改由 liquid-glass tint 供應 */

/* ═══ 底部 5-tab pill(圓潤玻璃;--vv-bottom 避開 iOS 地址列)═══ */
/* Safari 26 會取樣「貼近視口邊緣的 fixed 元素」本體的底色+backdrop 去染它自己的工具列框
   (1ar.io Safari 26 指南)——材質搬到 ::before(absolute 子層,取樣忽略),元素本體保持透明 */
.tabbar.liquid-glass--nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Safari 26 取樣 shim(workaround,非架構):最上層一條透明 fixed 貼 bottom:0,
   讓 Safari 的邊緣取色啟發式採到「透明」而非頁面暗底,工具列才走真 Liquid Glass 合成
   而不是不透明的深色延伸填充(GitHub 社群驗證過的 5px shim 做法)。勿刪;若日後
   Safari 修正此啟發式可移除 */
.safari-toolbar-sampling-shim{position:fixed;left:0;right:0;bottom:0;height:5px;
  z-index:2147483647;background:transparent;pointer-events:none}
/* --lg-nav-blur／--lg-nav-tone（liquid-glass-tokens.css）：同一個 V2 材質，只讓深色大字在 nav 後面
   變成淡霧而不是一條髒灰帶（商城商品字，2026-09-26） */
.tabbar.liquid-glass--nav::before{display:block;background:var(--lg-fill);
  -webkit-backdrop-filter:blur(var(--lg-nav-blur,var(--lg-blur))) saturate(var(--lg-sat)) var(--lg-nav-tone,);
  backdrop-filter:blur(var(--lg-nav-blur,var(--lg-blur))) saturate(var(--lg-sat)) var(--lg-nav-tone,)}
.glass-refract .tabbar.liquid-glass--nav{-webkit-backdrop-filter:none;backdrop-filter:none}
.glass-refract .tabbar.liquid-glass--nav::before{
  -webkit-backdrop-filter:blur(var(--lg-nav-blur,var(--lg-blur))) var(--lg-refract,) saturate(var(--lg-sat)) var(--lg-nav-tone,);
  backdrop-filter:blur(var(--lg-nav-blur,var(--lg-blur))) var(--lg-refract,) saturate(var(--lg-sat)) var(--lg-nav-tone,)}
/* tabbar 材質改由 liquid-glass kit 供應(.liquid-glass--nav)——這裡只留佈局/定位/形狀 */
.tabbar{position:fixed;left:0;right:0;margin:0 auto;z-index:40;width:min(94%,400px);height:62px;
  bottom:calc(14px + var(--vv-bottom,0px) + var(--sab));
  border-radius:var(--r-pill);box-shadow:var(--shadow-3);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:0 6px;
  transition:width .26s var(--ease),height .22s var(--ease),transform .26s var(--ease)}
html.nav-compact .tabbar{width:min(76%,320px);height:46px}
/* 有常駐底列(聊天 composer)時,下滾把整條 nav 藏掉,composer 下沉補位 */
html.nav-hidden .tabbar{transform:translateY(calc(100% + 44px))}
#composerBar{transition:bottom .26s var(--ease)}
html.nav-hidden #composerBar{bottom:calc(15px + var(--vv-bottom,0px) + var(--sab))!important}
.tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;
  color:var(--text-muted);transition:color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease-out);min-height:44px}
.tab-item:active{transform:scale(.93)}
.tab-item.on{color:var(--text-strong)}
.tab-item.on span{font-weight:500}
.tab-item svg{width:22px;height:22px;transition:transform .24s var(--ease),color .2s var(--ease),opacity .2s;opacity:1;color:currentColor}
/* v4:未選 = 墨的淡階,選中 = 松煙墨全黑 + 放大。v3 的五色霓虹光暈已移除
   (顏色在 v4 是「哪個命理系統在說話」的編碼,導覽列不是系統,不該佔用色碼) */
.tab-item.on svg{opacity:1;transform:scale(1.08)}
/* 點擊彈跳 tabPop 已刪（SPA 時代 goTab 專用，B-S5；禪意動效不彈） */
.tab-item span{font-size:11px;font-weight:500;white-space:nowrap;height:15px;overflow:hidden;transition:height .2s var(--ease),opacity .16s}
html.nav-compact .tab-item span{height:0;opacity:0}
html.nav-compact .tab-item svg{transform:scale(.9)}

/* ═══ 佈局原子 ═══ */
/* min-height 強制 +110px 已拿掉(L 2026-08-17:content 不滿一屏就不該能捲)——
   長頁自然捲(body 150px 底 padding 給 tabbar 淨空),短頁(訪客空狀態等)整頁不捲 */
/* 多頁版：一個 document 只有一個畫面，不再需要 display 切換。
   進場動畫保留（真的導覽也會跑一次）。*/
.page{display:block}
.wrap{padding:14px var(--app-gutter) 0}
/* 照片上的裸字坐進小塊玻璃;白字全站帶極薄暗暈保小字 */
body{text-shadow:none}
.btn-primary,.seg button.on,.bubble-out{text-shadow:none}
.sect{display:inline-block;padding:7px 0}
.on-photo{background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:0;border-radius:var(--r-lg)}
/* 區塊標題列:左標題 + 右側訂閱 CTA(L 2026-08-18)*/
.secthead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:26px 0 12px}
.secthead .sect{margin:0}
.sect-cta{flex:0 0 auto;font-size:12px;color:#1A1714;cursor:pointer;white-space:nowrap;padding:11px 2px;min-height:40px;display:inline-flex;align-items:center}
.sect-cta:active{opacity:.6}
.sect{font-family:var(--font-display);font-size:18px;font-weight:400;letter-spacing:.06em;color:var(--text-strong);margin:26px 0 12px}
.rows{overflow:hidden}
.row{display:flex;align-items:center;gap:11px;padding:15px 18px;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease)}
.row:active{transform:scale(.985);background:rgba(26,23,20,.045)}
.row+.row{border-top:1px solid var(--line-soft)}
.row .t{font-size:15px;font-weight:500;color:var(--text-strong);line-height:1.45}
/* 名字+關係 badge 共用一行時,flex 強制像素對齊(vertical-align 對不同字級不可靠)+badge 靠最右 */
.row .t.t-badge{display:flex;align-items:center;justify-content:space-between;gap:8px}
.row .s{font-size:11px;color:var(--text-muted);margin-top:3px;line-height:1.5}
.row .aux{margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--text-faint);white-space:nowrap;text-align:right}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:8px 14px;font-size:11px;min-height:34px;box-sizing:border-box;
  background:rgba(255,255,255,.52);border:1px solid var(--line-soft);color:var(--text-strong);cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast)}
.chip:active{transform:scale(.96);background:rgba(26,23,20,.07)}
.chip.on{background:var(--text-strong);color:#F7F4EF;font-weight:500;border-color:transparent}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:none;cursor:pointer;
  border-radius:var(--r-pill);font-family:var(--font-display);font-size:15px;font-weight:400;letter-spacing:.06em;
  transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast)}
.btn:active{transform:scale(.97)}
/* v4:主鈕 = 硃砂實心。暗底時代的 #FCF6F3 白鈕在宣紙上等於隱形(白壓白、且 --shadow-2 已為 none)。
   硃砂是品牌的吉色與印色,v3 DESIGN.md 本來就把 accent CTA 指派給它。 */
.btn-primary{background:var(--cinnabar);color:#FBF7F2}
.btn-cinnabar{background:var(--cinnabar);color:#FBF7F2}
.btn-ghost{background:rgba(255,255,255,.55);border:1px solid var(--line);color:var(--text-strong)}
.seal{display:inline-grid;place-items:center;background:var(--cinnabar);color:#FBF7F2;border-radius:8px;
  font-family:var(--font-display);font-weight:400}
.latin{font-family:var(--font-latin);letter-spacing:.28em;text-transform:uppercase;font-weight:500}
.badge{display:inline-block;font-size:11px;border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap;vertical-align:middle}
.badge-free{background:rgba(26,23,20,.08);color:var(--text-strong)}
.badge-paid{background:rgba(26,23,20,.06);color:var(--text-strong)}
.badge-line{border:1px solid var(--line);color:var(--text-muted)}
.disclaim{display:table;margin:22px auto 10px;font-size:11px;color:var(--text-muted);text-align:center;line-height:1.6;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--r-pill);padding:7px 16px}

/* ═══ 呼吸圓環(signature)═══ */
.breathe-wrap{display:grid;place-items:center;position:relative}
.breathe{animation:breathe 4.6s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.ring-num{font-family:var(--font-latin);font-size:22.4px;font-weight:500;color:var(--text-strong);line-height:1}
.ring-cap{font-size:11px;color:var(--text-muted);letter-spacing:.14em;margin-top:4px}

/* ═══ 大師服務 app icon(L 2026-08-18)═══
   形狀與材質沿用系統磁磚(.tile 那套 liquid glass + 覆寫 --lg-fill),
   差別只在色系走朱砂/金的「大師」家族,與命理系統的冷色系分開。 */
/* L 2026-08-19:4 顆服務磁磚改橫向長方形——四等分填滿內容欄寬(flex:1),
   高度維持 52 的精簡感;圓角改 px(非正方形用 % 會變成橢圓角) */
.svcgrid{display:flex;align-items:center;gap:9px}
.svcapp{cursor:pointer;flex:1 1 0;min-width:0}
.svcapp .tile{position:relative;width:100%;height:52px;border-radius:17px;display:grid;place-items:center;
  text-align:center;transition:transform var(--dur-fast) var(--ease-out)}
.svcapp:active .tile{transform:scale(.95)}
.svcapp .tile b{font-family:var(--font-display);font-size:12px;font-weight:400;line-height:1.25;letter-spacing:.02em;white-space:nowrap;color:var(--text-strong)}

/* ═══ 命理系統 app icon grid(L 2026-08-18)═══
   磁磚穿 .liquid-glass 模組(材質不自刻);icon 是單色遮罩,顏色由各系統色供應,
   所以一份素材可套 7 色。未做測驗的系統右上角掛印泥紅點提示。 */
.sysgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:4px}
.sysapp{position:relative;cursor:pointer}
.sysapp .tile{position:relative;width:100%;aspect-ratio:1;border-radius:26%;display:grid;place-items:center;
  transition:transform var(--dur-fast) var(--ease-out)}
.sysapp:active .tile{transform:scale(.93)}
.sysapp .tile i{width:54%;height:54%;background:currentColor;display:block;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.sysapp .tile b{font-family:var(--font-display);font-size:21px;font-weight:400}
.sysapp .dot{position:absolute;z-index:2;top:-3px;right:-3px;width:13px;height:13px;border-radius:50%;
  background:var(--fate-seal);box-shadow:0 0 0 2px var(--fate-paper);pointer-events:none}

/* ═══ 全螢幕殼（#sysView / #chartView）的背景：與主畫面 .bg 共用同一份配方 ═══
   L 2026-08-19：「命理系統的內頁全部都不是跟著我們的 design」——真因是這兩個全螢幕殼
   各寫了一套背景：圖 opacity .30 + blur(9px)、只有 120vh、而且跟著內容捲，
   跟主畫面的 .bg（整圖 100lvh + 上下遮罩 + 白霧 frost + 貼視口不動）完全兩套，
   所以內頁看起來發黑、發糊、捲到底還會露出純黑。
   這裡直接拄用 .bg 的參數（圖、遮罩百分比、frost 都一樣），差別只在 position：
   外層是 fixed 容器、內部自己捲，所以圖層用 position:fixed 才能同樣完全靜止（家規 #1）。
   z-index：兩層背景 0、內容 1——::after 在 DOM 順序上晚於子元素，不給 z-index 會蓋住內容。*/
/* 全螢幕殼的背景：**直接用首頁同一個 .bg 元素**，不自己再寫一套。
   2026-08-19 教訓（L：「所有內頁都出現了我們修了 20 多小時才修好的 iOS
   address bar 問題」、「safari liquid glass address bar 那邊沒有渲染」）：
   我原本給殼寫的是 position:fixed 的 ::before/::after，而且 ::after 帶 backdrop-filter。
   貼著視口底邊的 fixed + backdrop-filter 就是 playbook 08 §9ab(9) 講的那個形狀——
   Safari 26 取樣會壞掉，工具列的 liquid glass 退化成不透明色延伸。
   首頁一直是好的，因為它用的是 position:sticky 的 .bg——就照抄它，不要另發明。
   .bg 本身 z-index:-1，在殼裡要提到 0（否則會沉到殼自己的不透明背景後面）。*/
/* ↑ 這條是為了壓過兩層背景（z-index:0），但它連 .chrome-top 自帶的 z-index:30
   一起覆掉了 → header 跟內容同層，內容在 DOM 後面就畫在 header 上面，
   捲動時標題會疊在一起（L 2026-08-19 回報「現在會出現蓋起來的情況」）。把 header 還回去。*/
/* 短頁上拖動會把後面的主畫面帶著捲（實測：在四柱頁往上拖，
   window.scrollY 0 → 516）——這就是 L 2026-08-19 說的「捲起來很怪、最下面
   bleed 出一條不知道哪裡來的內容」。contain = 捲不動就停在這一層。*/

/* ═══ 人脈卡(對標命書簡約檔案卡:無大頭照,姓名+關係+生辰+快捷入口)═══ */
.pf-list{display:flex;flex-direction:column;gap:10px}
.pf-card{padding:16px var(--app-card-pad,20px);cursor:pointer}
.pf-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pf-name{font-size:18px;font-weight:400;color:var(--text-strong);display:flex;align-items:center;gap:8px;min-width:0}
.pf-chev{color:var(--text-faint);font-size:17px;flex:0 0 auto}
.pf-meta{font-size:12.5px;color:var(--text-muted);margin-top:5px;font-family:var(--font-latin)}
.pf-acts{display:flex;gap:8px;margin-top:13px}
.pf-act{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;
  border-radius:var(--r-md);background:rgba(255,255,255,.5);border:1px solid var(--line-soft);
  font-size:12.5px;color:var(--text-body);cursor:pointer}
.pf-act svg{width:14px;height:14px;flex:0 0 auto}

/* ═══ 訊息 messenger ═══ */
.seg{display:inline-flex;padding:4px;gap:4px;border-radius:var(--r-pill)}
.seg button{border:none;cursor:pointer;border-radius:var(--r-pill);padding:9px 22px;font-size:15px;font-weight:500;
  background:transparent;color:var(--text-muted);
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
/* 亮底上白丸壓白軌等於沒有丸——補一圈墨色 hairline 讓選中態有實體邊 */
.seg button.on{background:#FFFDFB;color:var(--text-strong);font-weight:500;box-shadow:inset 0 0 0 1px rgba(26,23,20,.10)}
.avatar{width:46px;height:46px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:19px;font-weight:400;color:var(--text-strong)}
.chat-scroll{display:flex;flex-direction:column;gap:11px;padding:16px 18px 190px}
.bubble-in{align-self:flex-start;max-width:86%;background:var(--glass);border:1px solid var(--line-soft);
  border-radius:20px 20px 20px 8px;padding:13px 16px;font-size:15px;line-height:1.75;color:var(--text-body);
  box-shadow:var(--shadow-1);animation:msgIn var(--dur-base) var(--ease)}
.bubble-out{align-self:flex-end;max-width:82%;background:var(--cinnabar);color:#FBF7F2;
  border-radius:20px 20px 8px 20px;padding:12px 16px;font-size:15px;line-height:1.7;animation:msgIn var(--dur-base) var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-card-top{border-radius:var(--r-xl);overflow:hidden}

/* ═══ Sheet(底部抽屜)═══ */
.sheet-ov{position:fixed;inset:0;z-index:80;background:rgba(26,23,20,.42);display:none;align-items:flex-end;justify-content:center}
.sheet-ov.on{display:flex;animation:fadeIn 320ms var(--zen-ease,cubic-bezier(.22,.61,.36,1))}
.sheet{width:min(100%,402px);max-height:86vh;overflow-y:auto;overscroll-behavior:contain;background:var(--glass);border-radius:26px 26px 0 0;
  border:1px solid var(--line-soft);padding:10px 20px calc(26px + var(--sab));
  animation:sheetUp var(--zen-reveal,560ms) var(--zen-ease,cubic-bezier(.22,.61,.36,1))} /* 禪意動效（L 2026-09-26）：560ms 柔和 ease-out，不彈 */
/* 握把改成可點的實體元素(::before 點不到)+ 右上角 ✕ + 下滑手勢,長面板才關得掉 */
/* The grip is absolutely placed (see initSheets); this in-flow spacer keeps the exact box and
   8px margin it used to occupy, so every sheet's content sits where it always did. */
.sheet-ov>.sheet::before{content:"";display:block;height:22px;margin-bottom:8px}
.sheet-grip{display:block;width:52px;height:22px;position:absolute;top:10px;left:50%;margin-left:-26px;cursor:pointer}
.sheet-grip::before{content:"";position:absolute;left:6px;right:6px;top:8px;height:4.5px;border-radius:99px;background:rgba(26,23,20,.22)}
.sheet-x{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  border:0;background:var(--app-card-sheen),var(--app-card-fill);box-shadow:var(--app-card-shadow);-webkit-backdrop-filter:var(--app-glass-filter);backdrop-filter:var(--app-glass-filter);color:var(--text-strong);font-size:15px;
  padding:0;font-family:inherit;cursor:pointer;z-index:3}
.sheet-x::after{content:"";position:absolute;inset:-6px;border-radius:50%} /* 32px mark, 44px target */
.sheet-x svg{display:block}
.sheet-x:focus-visible{outline:2px solid var(--fate-jade);outline-offset:2px}
.sheet-x:active{transform:scale(.92)}
.sheet{position:relative}
.sheet:focus{outline:none} /* programmatic focus target for the container, not a control */
/* Question packs (shared quota sheet): option tiles with a real selected state. */
.question-bundles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 20px}
.question-bundles .btn{min-height:58px;padding:8px 4px;border-radius:var(--fate-radius-md,18px);white-space:pre-line;line-height:1.4;font-size:13px;font-variant-numeric:tabular-nums}
#questionPacks .question-bundles .btn[aria-pressed=true]{background:var(--fate-ink);border-color:var(--fate-ink);color:var(--fate-paper-bright)}
#questionPacks label{display:block;margin-bottom:8px;font-size:13px;color:var(--text-body)}
#questionPacks :is(#questionTotal,#questionAverage){margin:10px 0 0;font-variant-numeric:tabular-nums}
#questionPackConfirm{width:100%;margin-top:18px}
#questionPacks a{display:inline-flex;align-items:center;min-height:44px}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes screenIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Card entrances are viewport-triggered by scroll-motion.js, never page-wide. */

input.field,select.field{width:100%;min-height:48px;background:rgba(255,255,255,.55);border:1px solid var(--line);
  border-radius:var(--r-md);padding:0 16px;color:var(--text-strong);outline:none;color-scheme:light}
select.field{-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1714' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
input.field[type=date]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
input.field:focus,select.field:focus{background:rgba(255,255,255,.72)}
/* 全站無任何 ::placeholder 規則,吃瀏覽器預設深灰,疊在半透明白底上對比度不足(L 截圖抓到)——
   單一規則修全部 input.field/select.field,不逐一補丁 */
input.field::placeholder,select.field::placeholder{color:var(--text-faint);opacity:1}
.flabel{font-size:11px;font-weight:500;color:var(--text-muted);margin:14px 0 6px}
/* 可點欄位:打開底部滑出的主題化 picker(原生日曆/下拉是白色系統彈窗,跟主題打架——L 抓過,永不再用) */
.field-btn{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--text-strong);
  padding:0 16px;   /* 2026-09-08：欄位本體是 div 不是 input，沒吃到 input.field 的 16px 內距，文字與箭頭都貼邊 */
  transition:background-color var(--dur-fast)}
.field-btn:active{background:rgba(26,23,20,.05)}
.field-btn .ph{color:var(--text-faint)}
.field-btn .fb-aux{margin-left:auto;color:var(--text-faint);font-size:17px;line-height:1;padding-left:8px;display:inline-flex;align-items:center}
.field-btn .fb-aux svg{display:block;color:var(--text-muted)}
/* Apple 式滾輪(scroll-snap 鼓輪) */
.wheelbox{position:relative;display:flex;gap:8px;margin-top:15px;height:220px}
.wheel{flex:1;overflow-y:auto;scroll-snap-type:y mandatory;padding:88px 0;scrollbar-width:none}
.wheel::-webkit-scrollbar{display:none}
.wheel div{height:44px;line-height:44px;text-align:center;font-size:19px;color:var(--text-body);
  scroll-snap-align:center;font-family:var(--font-latin);white-space:nowrap}
.wheel-hl{position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);pointer-events:none;
  background:rgba(26,23,20,.05);border:1px solid var(--line);border-radius:12px}
.wheel-fade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(250,248,245,.92),transparent 32%,transparent 68%,rgba(250,248,245,.92))}
/* 商品內頁底欄（L 2026-09-30 cta-lab 01「淡墨玻璃」）：左邊水墨禮物盒（送給朋友）＋縮短的加入購物車，朱砂圓裡的水墨購物車取代勾勾。
   固定層是透明殼，玻璃材質只在按鈕的 ::before（家規 12 / playbook 08 Section 9ab(9)(a)）。內頁無 bottom nav，tabbar 由 openProd/closeProd 收放。 */
.prod-bar{position:fixed;left:0;right:0;margin-inline:auto;z-index:45;width:calc(100% - 2 * var(--app-gutter,20px));max-width:calc(402px - 2 * var(--app-gutter,20px));
  bottom:calc(14px + var(--vv-bottom,0px) + var(--sab,0px));display:flex;align-items:center;gap:10px;pointer-events:none;color:var(--text-strong)}
.prod-bar>button{pointer-events:auto;position:relative;isolation:isolate;height:56px;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform 160ms cubic-bezier(.2,.8,.2,1)}
.prod-bar>button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--app-card-sheen),var(--app-card-fill);box-shadow:var(--app-card-shadow);
  -webkit-backdrop-filter:blur(var(--app-card-blur,20px)) saturate(135%);backdrop-filter:blur(var(--app-card-blur,20px)) saturate(135%)}
.prod-bar>button:active{transform:scale(.96)}
.prod-bar>button:focus-visible{outline:2px solid var(--text-strong);outline-offset:3px}
.prod-gift{flex:none;width:56px;border-radius:50%;display:grid;place-items:center}
.prod-cart{flex:1;min-width:0;border-radius:999px;display:flex;align-items:center;justify-content:space-between;padding:0 6px}
.prod-cart__disc{flex:none;width:44px;height:44px;border-radius:50%;background:var(--cinnabar);color:#F8F6EF;display:grid;place-items:center}
.prod-cart__label{flex:1;min-width:0;text-align:center;font-family:var(--font-display);font-size:15px;font-weight:400;letter-spacing:.06em;white-space:nowrap}
.prod-cart__spacer{flex:none;width:44px}
/* 水墨圖示（tools/ink_cta.py 產生）：跟 .ink-chev 同一套 mask 做法，顏色跟 currentColor 走 */
.ink-ic{display:block;flex:none;background:currentColor}
.ink-ic--gift{width:26px;height:26px;-webkit-mask:url("assets/gift-ink.svg") center/contain no-repeat;mask:url("assets/gift-ink.svg") center/contain no-repeat}
.ink-ic--cart{width:22px;height:22px;-webkit-mask:url("assets/cart-ink.svg") center/contain no-repeat;mask:url("assets/cart-ink.svg") center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.prod-bar>button{transition:none}.prod-bar>button:active{transform:none}}
/* 出生地清單 */
.plabel{font-size:11px;color:var(--text-muted);margin:13px 4px 5px}
.prow{display:flex;align-items:center;justify-content:space-between;padding:13px 8px;font-size:15px;
  color:var(--text-strong);cursor:pointer;border-bottom:1px solid var(--line-soft)}
.prow:active{background:rgba(26,23,20,.045)}
.prow .aux{color:var(--text-faint);font-size:11px}

@media (min-width:768px){
  /* Reserve the 44.8px navigation, its 14px bottom offset and 24px content gap. */
  body{display:flex;align-items:flex-start;justify-content:center;min-height:100dvh;padding:24px 24px calc(44.8px + 14px + 24px + var(--sab))}
  /* overflow:hidden 會把 sticky 廢掉(bg 跟著文件捲走)→ 桌寬改 fixed 欄位鎖 viewport,
     卡片從上面滑過才有立體感;圓角由 .bg 自己收 */
  .app{width:402px;position:relative;border:1px solid var(--line-soft);border-radius:28px;box-shadow:var(--shadow-3)}
  .bg{position:fixed;top:24px;left:50%;transform:translateX(-50%);width:402px;height:calc(100vh - 48px);
    border-radius:28px;overflow:hidden;z-index:-1}
  #composerBar{left:50%!important;right:auto!important;transform:translateX(-50%);width:382px}
  .bg::before{height:100%;-webkit-mask-image:none;mask-image:none}
  .bg::after{height:100%;-webkit-mask-image:none;mask-image:none}
}
/* 橫向捲動列標準版(L 2026-08-17):出血到螢幕緣(不在內距硬切)+ 內縮 18px 使首卡
   與其他元件左緣對齊 + 兩側 18px 漸變消失(半張卡淡出)。對齊態的首卡起點在 18px,
   不落在淡出帶內,所以靜止時無淡化;只有捲動中經過螢幕緣的卡會漸隱。 */
.sys-row{display:flex;gap:8px;overflow-x:auto;margin:0 calc(-1 * var(--app-gutter));padding:15px var(--app-gutter) 4px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--app-gutter),#000 calc(100% - var(--app-gutter)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--app-gutter),#000 calc(100% - var(--app-gutter)),transparent 100%)}
.sys-row::-webkit-scrollbar{display:none}
/* 篩選面板內的 chips 是換行排版,不吃出血/淡出 */
#sysHome{margin:0;-webkit-mask-image:none;mask-image:none}
.syschip{flex:0 0 auto}
/* 七系統 = 七個馬卡龍色(選中時上色,color coding) */
.syschip.on{background:#1A1714;border-color:#1A1714;color:#FAF8F5;font-weight:500}
.syschip.locked{cursor:default}
/* ══ 🔒 LOCK —— 全站唯一的上鎖家族（家規 9：一套 .lk-*，由 ui.js 的 mv/hookHTML/lockFade/lockTeaser/lkMore 產生）。
   B-S5（2026-09-26）：第一代整塊磨砂 .lk-veil/.lk-wrap/.lk-body 與其 JS 全站沒有宿主，已刪除。 */
.lk-btn{margin-top:2px;background:var(--cinnabar);color:#FBF7F2;font-weight:500;font-size:11px;
  padding:9px 18px;border-radius:var(--r-pill);border:none}
.lk-btn--alt{background:rgba(255,255,255,.62);border:1px solid var(--line);color:var(--text-strong)}
.lk-mask::after{content:"";display:block;width:18px;height:18px;background:currentColor;
  -webkit-mask:url("assets/lock-key.svg") center/contain no-repeat;mask:url("assets/lock-key.svg") center/contain no-repeat}
.lk-note{font-size:11px;color:var(--text-muted)}
/* 行內版:一條可點的「還有更多」列(同家族,不是另一套) */
.lk-row{display:flex;align-items:center;gap:8px;margin-top:11px;cursor:pointer;
  background:rgba(255,255,255,.52);border:1px solid var(--line-soft);border-radius:var(--r-pill);padding:9px 14px}
.lk-row .lr-t{font-size:11px;color:var(--text-strong);font-weight:500}
.lk-row .lr-s{font-size:11px;color:var(--text-muted);margin-left:auto}

/* 只露前 3 行,第 3 行後省略號(L 2026-08-18:原本漸層淡出遮罩太醜,改真 line-clamp)*/
.clip3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* OTP 四格 */
.otprow{display:flex;gap:11px;justify-content:center;margin-top:15px}
.otpbox{width:58px;height:66px;text-align:center;font-family:var(--font-latin);font-size:22.4px;font-weight:500;
  background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--text-strong);outline:none;padding:0}
.otpbox:focus{background:rgba(255,255,255,.72)}
/* SSO 按鈕 */
.ssobtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;margin-top:9px;
  border-radius:var(--r-md);font-size:15px;font-weight:400;cursor:pointer;border:1px solid var(--line);
  background:rgba(255,255,255,.55);color:var(--text-strong)}
.ssobtn.apple{background:#1A1714;color:#F7F4EF;border-color:transparent}
.ssobtn.line{background:#06C755;color:#FFF;border-color:transparent}
/* ═══ 二層內頁（四柱 / 五行分佈 / 大運流年），L 2026-08-19 ═══
   跟 #sysView / #chartView 同一種全螢幕殼、同一份背景配方（見上面 selector 清單）。*/

/* 四柱表：4 欄（年/月/日/時）× 十神・天干・地支・藏干 */
.pil{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.pil-col{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px 12px;
  border-radius:var(--r-md);background:rgba(255,255,255,.42);border:1px solid var(--line-soft)}
/* 日柱 = 你本人,頁面文案明說「中間高亮的是日柱」,所以它必須真的比別柱重 */
.pil-col.is-self{background:#FFFDFB;border-color:rgba(183,53,45,.42);box-shadow:inset 0 0 0 1px rgba(183,53,45,.16)}
.pil-k{font-size:11px;color:var(--text-muted);letter-spacing:.1em}
.pil-god{font-size:11px;color:var(--text-muted);min-height:16px}
.pil-gz{font-family:var(--font-display);font-size:22.4px;font-weight:400;line-height:1.15;color:var(--text-strong)}
.pil-gz small{display:block;font-size:11px;font-weight:400;color:var(--text-muted);letter-spacing:.08em}
.pil-hide{display:flex;flex-direction:column;gap:3px;align-items:center;margin-top:2px}
.pil-hide span{font-size:11px;color:var(--text-muted);line-height:1.3;white-space:nowrap}
.pil-life{font-size:11px;color:var(--text-body);text-align:center;line-height:1.4}

/* 五行分佈長條 */
.wxb{display:flex;flex-direction:column;gap:11px}
.wxb-row{display:flex;align-items:center;gap:11px}
.wxb-k{flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:15px;font-weight:400}
.wxb-track{flex:1;height:9px;border-radius:var(--r-pill);background:rgba(26,23,20,.08);overflow:hidden}
.wxb-fill{display:block;height:100%;border-radius:var(--r-pill)}
.wxb-n{flex:0 0 auto;width:46px;text-align:right;font-family:var(--font-latin);font-size:13px;color:var(--text-muted)}
/* dev 切換工具(原型專用,正式版拿掉) */
/* z-index 100：L 2026-08-19「很多內頁都沒有那個 dev tool」——舊值 70 比 #sysView/
   #chartView(72)、sheet(88)、筛選層(99) 都低，一進內頁就被蓋掉。
   它是原型工具，必須永遠在最上層（只低於 Safari 取樣 shim）。*/
#devbar{position:fixed;left:10px;bottom:calc(88px + var(--vv-bottom,0px) + var(--sab));
  z-index:100;display:flex;align-items:center;gap:4px;padding:3px;border-radius:var(--r-pill);background:rgba(250,248,245,.88);
  border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#devbar button{border:none;background:transparent;color:var(--text-muted);font-size:11px;padding:6px 10px;
  border-radius:var(--r-pill);cursor:pointer}
#devbar button.on{background:#1A1714;color:#F7F4EF;font-weight:500}
#devbar .dv-lb{font-size:9px;color:var(--text-faint);letter-spacing:.1em}
/* 收合態只有「DEV ˅」（2026-09-09，L：一直擋住主按鈕）；點開在上方彈出情境面板 */
#devbar .dv-toggle{display:inline-flex;align-items:center;gap:5px;padding:5px 9px 5px 9px;min-height:28px;color:var(--text-muted)}
#devbar .dv-chev{display:block;transition:transform .2s var(--ease)}
#devbar.open .dv-chev{transform:rotate(180deg)}
#devbar .dv-panel{display:none;position:absolute;left:0;bottom:calc(100% + 8px);min-width:236px;padding:12px 12px 12px;
  border-radius:16px;background:rgba(250,248,245,.985);border:1px solid var(--line);box-shadow:var(--shadow-3);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
#devbar.open .dv-panel{display:block;animation:filterDown 180ms var(--ease-out)}
#devbar .dv-sect{font-size:10px;color:var(--text-faint);letter-spacing:.12em;margin:0 0 8px 2px}
#devbar .dv-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#devbar .dv-opts button{padding:9px 6px;font-size:12px;border:1px solid var(--line-soft);background:rgba(255,255,255,.5);border-radius:11px;color:var(--text-body)}
#devbar .dv-opts button.on{background:#1A1714;border-color:#1A1714;color:#F7F4EF;font-weight:500}
/* 家規4:fixed 元素鎖 402px 內容欄。桌寬時 left:10px 會把整條工具列丟到機身外面。
   這條必須排在上面的 #devbar 之後,否則同權重時被後面的 left:10px 蓋回去。 */
@media (min-width:768px){ #devbar{left:50%;margin-left:-191px} }
/* 任何 sheet／對話框開著時 DEV 膠囊讓位（2026-09-26 審查：390／320 寬壓在 sheet 按鈕與欄位上）。
   正式版的移除開關在 ui.js 的 DEV_TOOLS。方案頁的確認面板是頁內 panel 不是 sheet，但同樣是要按的那一刻。 */
html:has(.sheet-ov.on,.sheet-ov.is-open,dialog[open],.filter-ov.on,#subscriptionConfirm:not([hidden])) #devbar{display:none}
/* 篩選:「命理系統 ▾」chip 按鈕 + 數字 badge(L 2026-08-17 定版;之前的純 icon 沒人看得懂) */
#sysFilterBtn.on{background:rgba(26,23,20,.08)}
#sysFilterBtn.on #sysFilterArrow{transform:rotate(180deg)}
.filterBadge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:#1A1714;color:#FFF;font-family:var(--font-latin);font-size:10px;font-weight:500;line-height:16px;
  text-align:center;box-shadow:0 0 0 0.6px var(--canvas)}   /* 外環 2→0.6px:L 2026-08-19 減細 70% */
/* 篩選 overlay:從按鈕下方滑出,浮在內容上不推版面;暗磨砂用既有 --glass-ink token */
.filter-ov{position:fixed;inset:0;z-index:75;display:none}
.filter-ov.on{display:block}
.filter-ov .scrim{position:absolute;inset:0;background:rgba(26,23,20,.32);animation:fadeIn 160ms var(--ease)}
.filter-panel{position:fixed;left:var(--app-gutter);right:var(--app-gutter);background:rgba(250,248,245,.94);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:15px 16px;box-shadow:var(--shadow-3);
  -webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);
  animation:filterDown 220ms var(--ease-out)}
@keyframes filterDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
/* 時間範圍 chips(紅=範圍,紫=系統,視覺分兩軸) */
/* 時間範圍改用 liquid-glass 分段 tab(L 2026-08-18)——選中態由 .seg button.on
   供應,不再自刻朱砂底色;--scope 只收窄尺寸讓四格塞得進 402 內容欄 */
.seg--scope{flex:0 0 auto}
/* 期間 seg 加了第 5 顆(自選日子)後就比保留給「命理系統」鈕的空間寬,捲到最左時
   「下禮拜」會被壓在篩選鈕底下。右緣漸隱讓捲動內容在鈕之前淡出(家規:橫向捲動列三件套) */
#scopeRow{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
/* 內頁返回鈕:觸控目標 31px → 40px */
.chip-back{min-height:40px;padding:0 14px;font-size:12px}
/* 橫向捲動列共用件:滅捲軸 + 兩側漸隱(家規:橫向捲動列標準三件套)。
   捲到頭時該側的遮罩自動失效 —— 用 scroll-driven 做不到就維持兩側都軟,
   硬切邊比多一道柔邊糟糕。 */
.hfade{overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 22px),transparent)}
.hfade::-webkit-scrollbar{display:none}
.seg--scope button{padding:8px 10px;font-size:13px}
/* 橫滑幸運卡(同上:出血+對齊+邊緣漸隱) */
.hrow{display:flex;gap:11px;overflow-x:auto;margin:11px calc(-1 * var(--app-gutter)) 0;padding:4px var(--app-gutter) 8px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--app-gutter),#000 calc(100% - var(--app-gutter)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--app-gutter),#000 calc(100% - var(--app-gutter)),transparent 100%)}
.hcard{flex:0 0 auto;width:158px;padding:15px 16px}
/* ≤4 張幸運卡改 2×2 grid(L:四格不必橫捲);>4 張才用出血橫捲列 */
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:11px}
.lgrid .hcard{width:auto}
/* 合拍分項條 */
.cbar{flex:1;height:8px;border-radius:var(--r-pill);background:rgba(26,23,20,.08);overflow:hidden}
.cbar i{display:block;height:100%;border-radius:inherit;background:#1A1714}
/* 訊號/宜忌 tags(圖表化,不寫長文) */
.tagrow{display:flex;flex-wrap:wrap;gap:7px}
.tag{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);padding:6px 12px;font-size:11px;line-height:1.4}
.tag-good{background:rgba(26,23,20,.05);border:1px solid rgba(26,23,20,.22);color:var(--text-strong)}
.tag-bad{background:transparent;border:1px dashed rgba(26,23,20,.24);color:var(--text-muted)}
.tag-sig{background:rgba(255,255,255,.52);border:1px solid var(--line-soft);color:var(--text-strong)}
.tag-sig b{font-weight:500;color:#CFEFFB}
/* 吉時 12 時辰條 */
.zrow{display:flex;gap:5px;align-items:flex-end;height:66px;margin-top:11px}
.zcell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0;height:100%}
.zbar{width:100%;border-radius:5px 5px 2px 2px}
.zlab{font-size:11px;color:var(--text-muted)}
/* MBTI Likert 圓點(大-小-大) */
.lik{display:flex;align-items:center;gap:6px;justify-content:space-between;padding:9px 0 15px}
.lik button{flex:0 0 auto;border:2px solid rgba(59,74,107,.45);background:transparent;border-radius:999px;cursor:pointer;padding:0;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast)}
.lik button:active{transform:scale(.9)}
.lik button.on{background:var(--ink-huaqing);border-color:var(--ink-huaqing)}
.lik .d1,.lik .d7{width:36px;height:36px}.lik .d2,.lik .d6{width:29px;height:29px}.lik .d3,.lik .d5{width:24px;height:24px}.lik .d4{width:19px;height:19px}
/* ════════ 按壓回饋（emil pass 2026-08-19）── 全站唯一一個區塊 ════════
   規則（新元件加進下面清單就有，不要各寫各的）：
   ① 只動 transform / background-color——不碰 layout、不寫 transition:all。
   ② 尺寸決定縮量：小控件 .96、圖示磁磚 .93、大卡/列 .985——
     同一個縮量套到不同尺寸上，大卡會看起來在跳、小鈕則幾乎沒反應。
   ③ 容器裡面自己還有控件的（.pf-card / .lk-veil）不縮只上色——
     :active 會連祖先一起中，兩層都縮就疊成雙重縮放。
   ④ 巢狀防呆用 :not(:has(真正可點的後代:active))，不是 :has(:active)——
     按一個 .row 時真正的 target 是裡面的 .t/.s 文字 div，它也算 :active，
     :has(:active) 會永遠命中、把整列的回饋吃掉（實測過）。
     也不能用「覆寫成 transparent」防呆：那本身就是一個變化，卡會閃一下。
   ⑤ 140ms + --ease-out（房規）：按下去的那一刃要最快，送開時自己緩回來。*/
.btn,.lk-btn,.sheet-x,.ssobtn,.pf-act,.seg button,.scopechip,.otpbox,
.row,.prow,.goods,.pf-card,.lk-row,.glass[onclick],.sect-cta,.field-btn{
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease)}
/* 小控件 */
.btn:active,.lk-btn:active,.ssobtn:active,.pf-act:active,
.seg button:active,.scopechip:active{transform:scale(.96)}
.sheet-x:active{transform:scale(.92)}
/* 大卡、列（內部沒有自己的控件） */
.row:active:not(:has(button:active)),.prow:active,.goods:active,
.lk-row:active,.glass[onclick]:active{
  transform:scale(.985);background-color:rgba(26,23,20,.045)}
/* 內部還有控件的容器：只上色、不縮，且按到內層控件時整條規則不套用 */
.pf-card:active:not(:has(.pf-act:active)),

@media (prefers-reduced-motion:reduce){
  .breathe,.screen,.page .wrap>*, .page>.wrap>*,.bubble-in,.bubble-out,.sheet,.tabbar,.chrome-top,.tab-item svg{animation:none!important;transition:none!important}
  /* 通則：位移類全部拿掉，顏色/透明度留著（它們幫助理解，不造成暈眩）。
     寫成通則而不是列清單，以後新增的按壓回饋不用再記得來這裡補一行。*/
  *:active{transform:none!important}
}


/* ═════ 舊單檔版的第二個 <style> 區塊（2026-08-19 補回）═════
   拆多頁時我只抽了第一個 <style>，這 67 行漏掉——命盤頁四個角的
   裝飾（.dy-cnr）沒了尺寸規則，SVG 擐成整張卡那麼大的黑三角（L 抓到）。 */
/* ═══ 命盤詳情 dy-card(1:1 對標命書日元卡;配色=運 Yun)═══ */
/* ══ 全螢幕層的 z-index 梯子（別再給重複值）══
   72 = 第一層內頁 #sysView｜74 = 第二層 #chartView / #detailView｜88 = sheet｜99 = 筛選層
   真事件（L 2026-08-19）：#chartView 舊值也是 72，跟 #sysView 一樣，而 #sysView 在 DOM
   後面 → 同 z-index 比 DOM 順序 → 命盤頁其實有開，只是被盖在八字內頁後面，
   體感就是「日元點不了、其他三列可以」（那三列的 #detailView 是 73，所以蓋得過）。 */
/* 舊 SPA 的 #chartView overlay 規則已刪：多頁版的 chart.html 是一個真頁面，
   不是 display:none 的 fixed 層。拉回第二個 <style> 區塊時差點連它一起帶回來。 */
/* 桌寬:遮罩層本身永遠 inset:0 蓋滿整個 viewport(跟 .sheet-ov 同規則,遮罩不能縮),
   只有內容欄限寬置中——L 2026-08-17 抓到桌寬 bug:之前直接縮 #chartView 本體到
   402px,遮罩跟著變窄,後面的今日頁跟付費 sheet 穿幫疊在一起 */
@media (min-width:768px){#chartView>*{max-width:402px;margin-left:auto;margin-right:auto}}
.dy-card{position:relative;border-radius:var(--r-lg);padding:24px 18px 26px;overflow:hidden}
/* 四角回紋角花(L 2026-08-17:原版雙層方框太隨便,改成統一 SVG 圖騰——雙折角線
   +金點,四角共用同一份定義,鏡射復用不個別手調,不會再走樣)*/
.dy-frame{position:absolute;inset:9px;border:1px solid rgba(26,23,20,.14);border-radius:12px;pointer-events:none}
.dy-cnr{position:absolute;width:26px;height:26px;overflow:visible}
.dy-cnr path{fill:none;stroke-width:1.4;stroke-linecap:round}
.dy-cnr path.o{stroke:rgba(255,217,142,.55)}
.dy-cnr path.i{stroke:rgba(26,23,20,.24)}
.dy-cnr circle{fill:#1A1714;opacity:.8}
.dy-cnr-tl{top:-3px;left:-3px}
.dy-cnr-tr{top:-3px;right:-3px;transform:scaleX(-1)}
.dy-cnr-bl{bottom:-3px;left:-3px;transform:scaleY(-1)}
.dy-cnr-br{bottom:-3px;right:-3px;transform:scale(-1,-1)}
.dy-row1{display:flex;gap:13px;align-items:flex-start;padding:0 4px}
/* 屬性卡(對照參考圖第二張逐項校正,L 2026-08-18 二次指正):
   金色藥丸只是左邊那一小塊色塊(不是整片背景),四行特質在卡內、藥丸外側,
   兩者用 align-items:stretch 綁成同一高度——參考圖的藥丸高度就等於四行字高度 */
.dy-attr{flex:1;display:flex;align-items:stretch;gap:13px}
.dy-attr-id{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(160deg,#F0D28C,#C9A227) center/cover;border-radius:var(--r-md);padding:10px 9px;color:#3A2B08}
/* 藥丸也換油畫金材質(漸層留在上一行當 fallback) */
.dy-attr-id{background-image:url("assets/tex-gold-oil.jpg");background-size:cover;background-position:center}
.dy-attr-id b{font-family:var(--font-display);font-size:17px;font-weight:400;writing-mode:vertical-rl;letter-spacing:3px}
.dy-yy{display:flex;gap:4px}
.dy-yy i{width:9px;height:9px;border-radius:50%;border:1.5px solid #3A2B08}
.dy-yy i.f{background:#3A2B08}
.dy-attr-traits{flex:1;display:flex;flex-direction:column;justify-content:center;
  font-size:15px;line-height:1.85;color:var(--text-strong);font-weight:400;letter-spacing:.12em}
.dy-combo{display:flex;align-items:flex-start;gap:8px}
.dy-combo-v{writing-mode:vertical-rl;font-family:var(--font-display);font-size:14px;font-weight:400;color:#1A1714;letter-spacing:4px;border-left:1px solid var(--line-soft);padding-left:8px}
.dy-combo-c{writing-mode:vertical-rl;font-size:10px;color:var(--text-muted);letter-spacing:2px}
#dyWheel{display:block;width:100%;max-width:330px;margin:6px auto 0}
.dy-foot{display:flex;align-items:center;gap:16px;padding:4px 6px 0}
.dy-seal{font-family:var(--font-display);font-size:58px;font-weight:400;color:var(--text-strong);line-height:1;
  text-shadow:0 2px 10px rgba(255,217,142,.25)}
.dy-seal span{display:block;font-size:11px;font-weight:400;color:var(--text-muted);letter-spacing:.1em;margin-top:6px;font-family:var(--font-latin)}
.dy-table{flex:1;font-size:12px}
.dy-tr{display:grid;grid-template-columns:68px 1fr;gap:0 10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line-soft)}
.dy-tr:first-child{border-top:none}
.dy-tr span{color:var(--text-muted)}
.dy-tr b{color:var(--text-strong);font-weight:500}
/* 商品字卡:frost 大字 tile + 內文 */
.goods{padding:0;overflow:hidden;cursor:pointer}
.goods .gph{aspect-ratio:1;display:grid;place-items:center;font-family:var(--font-display);font-size:55px;font-weight:400;color:var(--text-strong);background:rgba(26,23,20,.05);border-bottom:1px solid rgba(255,255,255,.30)}
.goods .gbody{padding:12px 14px 14px}
.goods .gt{font-size:15px;font-weight:500;color:var(--text-strong);line-height:1.45}
.goods .gs{font-size:11px;color:var(--text-muted);margin-top:3px}
.goods .gp{font-family:var(--font-latin);font-size:15px;font-weight:500;color:var(--text-strong);margin-top:8px}
/* 井字命理格(綠版):域名+分數同行,斷語墊底 */
.dcell{padding:16px 18px 14px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"k v" "n n";align-items:baseline;row-gap:6px}
.dcell:nth-child(odd){border-right:1px solid var(--line-soft)}
.dcell:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
.dk{grid-area:k;font-family:var(--font-display);font-size:15px;font-weight:400;letter-spacing:.1em;color:var(--text-body)}
.dv{grid-area:v;font-family:var(--font-latin);font-size:22.4px;font-weight:500;line-height:1;color:var(--text-strong)}
.dn{grid-area:n;font-size:11px;color:var(--text-muted);letter-spacing:.04em}


/* ══ 暖赭暈染 —— 量自 FateTell（design-system/EVIDENCE.md B3） ══
   量到的事實：直徑 ≈170pt、背景到核心的漸變距離 ≈89pt、兩側都無硬邊。
   色相 12°–39°、飽和 17%–40% —— 單一暖赭色，不是彩虹。 */
.bloom{position:relative;overflow:hidden}
.bloom::before{content:"";position:absolute;right:-8%;top:-14%;
  width:78%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,
    var(--bloom-core) 0%, var(--bloom-warm) 34%,
    var(--bloom-cool) 62%, transparent 100%);
  filter:blur(34px);opacity:.62}
.bloom>*{position:relative;z-index:1}
/* Daily-card ambience only: the page canvas and reading content remain still. */
#fuseCard::before{filter:none;opacity:.48;animation:daily-bloom-drift 18s cubic-bezier(.77,0,.175,1) infinite alternate}
#fuseCard::after{content:"";position:absolute;pointer-events:none;left:-25%;top:22%;width:95%;aspect-ratio:1;
  background:radial-gradient(ellipse,var(--bloom-warm) 0%,var(--bloom-cool) 30%,transparent 70%);
  opacity:.3;animation:daily-bloom-drift 24s cubic-bezier(.77,0,.175,1) -9s infinite alternate-reverse}
@keyframes daily-bloom-drift{
  0%{transform:translate(-12%,5%) scale(.94)}
  50%{transform:translate(-38%,22%) scale(1.12)}
  100%{transform:translate(3%,38%) scale(1.02)}
}
#fuseCard[data-motion-paused="true"]::before,#fuseCard[data-motion-paused="true"]::after{animation-play-state:paused}
.bloom-toggle{display:block;margin:0 0 -12px auto;padding:8px;min-height:44px;background:transparent;border:0;color:var(--text-body);font:inherit;font-size:11px;cursor:pointer}
.bloom-toggle:focus-visible{outline:2px solid var(--fate-jade);outline-offset:2px}
#fuseCard .daily-bird{position:absolute;right:0;top:0;width:66%;height:auto;z-index:0;pointer-events:none;opacity:.32}
[data-bird-scene]{position:relative;overflow:hidden}
[data-bird-scene] .daily-bird{position:absolute;right:-4px;top:0;width:52%;height:auto;pointer-events:none;opacity:.26}
[data-bird-scene]>:not(.daily-bird){position:relative;z-index:1}
#fuseCard.has-daily-bird::before,#fuseCard.has-daily-bird::after{display:none}
@media(prefers-reduced-motion:reduce){
  #fuseCard::before,#fuseCard::after{animation:none}
  .bloom-toggle{display:none}
}


/* ════════ 墨暈 —— 全站唯一的上色機制 ════════
   規則：墨永遠在玻璃背後、永遠是暈的。沒有實心填色、沒有實色邊框。
   用法：在任何玻璃面上加 .inked 並設 --ink；位置用 --ink-x / --ink-y 微調。
   這是「透亮」的來源：顏料在紙上溢開，隔著磨砂玻璃看。 */
.inked{position:relative;overflow:hidden;isolation:isolate}
.inked::before{content:"";position:absolute;z-index:-1;
  left:var(--ink-x,50%);top:var(--ink-y,50%);
  width:var(--ink-size,150%);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    color-mix(in oklab, var(--ink,var(--ink-mo)) 62%, transparent) 0%,
    color-mix(in oklab, var(--ink,var(--ink-mo)) 30%, transparent) 42%,
    transparent 100%);
  filter:blur(var(--ink-blur,22px));
  opacity:var(--ink-a,.55);pointer-events:none}

/* 命理系統磁磚：七個系統 = 七種墨。顏色在這裡是「哪一個通道」。 */
.sysapp .tile{position:relative;overflow:hidden;isolation:isolate}
.sysapp[data-s="bazi"]      .tile{--ink:var(--ink-mo)}
.sysapp[data-s="ziwei"]     .tile{--ink:var(--ink-zhusha)}
.sysapp[data-s="zodiac"]    .tile{--ink:var(--ink-shiqing)}
.sysapp[data-s="shengxiao"] .tile{--ink:var(--ink-shilv)}
.sysapp[data-s="mbti"]      .tile{--ink:var(--ink-huaqing)}
.sysapp[data-s="ennea"]     .tile{--ink:var(--ink-tenghuang)}
.sysapp[data-s="chakra"]    .tile{--ink:var(--ink-zheshi)}
.sysapp .tile::before{content:"";position:absolute;z-index:-1;
  left:64%;top:70%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    color-mix(in oklab, var(--ink) 58%, transparent) 0%,
    color-mix(in oklab, var(--ink) 26%, transparent) 45%, transparent 100%);
  filter:blur(16px);opacity:.5;pointer-events:none}

/* 五行印：墨色跟著五行走（依舊是實心方章，與其他墨不同——印就是要實）*/
.seal[data-wx="金"]{background:var(--ink-jin)}
.seal[data-wx="木"]{background:var(--ink-mu)}
.seal[data-wx="水"]{background:var(--ink-shui)}
.seal[data-wx="火"]{background:var(--ink-huo)}
.seal[data-wx="土"]{background:var(--ink-tu)}

/* ═══════════════════════════════════════════════════════════════════════
   FATE.TIPS APP PROFILE — approved 2026-08-31
   This is an adapter from the existing feature markup to @fate-tips/ui.
   It contains no independent brand tokens: every material, colour, type,
   radius, shadow and motion value comes from brand-ui/fate-ui.css.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-fate-system="app"]{
  --hdr-h:64px;
  background:var(--fate-paper);
  color:var(--fate-ink);
  font-family:var(--fate-font-body)
}
html[data-fate-system="app"] body{
  background:var(--fate-paper)!important;
  color:var(--fate-ink-body);
  font-size:var(--fate-type-body);
  line-height:var(--fate-leading-body)
}
html[data-fate-system="app"] .app{
  width:min(100%,var(--fate-app-width));
  min-height:100%;
  margin-inline:auto;
  background:rgba(248,246,239,.2)
}
html[data-fate-system="app"] .bg::before{opacity:.34}
html[data-fate-system="app"] .wrap{padding-inline:var(--app-gutter)}

/* App bar remains a transparent sticky shell for Safari edge sampling. */
html[data-fate-system="app"] .chrome-top{
  min-height:64px;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  isolation:isolate
}
html[data-fate-system="app"] .chrome-top::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:rgba(243,240,231,.9);
  border-bottom:1px solid var(--fate-line-soft);
  -webkit-backdrop-filter:blur(18px) saturate(118%);
  backdrop-filter:blur(18px) saturate(118%)
}
html[data-fate-system="app"] .chrome-title{
  font-family:var(--fate-font-display);
  font-size:var(--fate-text-lg);
  font-weight:var(--fate-weight-semibold);
  letter-spacing:.04em;
  color:var(--fate-ink)
}

/* Shared card material: translucent white frost, a fine rim and lifted shadow.
   Opacity belongs to the surface colour, never the card's text or children.
   2026-09-26 (L「白霧玻璃要像真的」, theme unchanged): the same V2 white frost, made physical —
   a soft top sheen (light falling on glass), a bright inner top edge + faint inner rim, a hairline
   of thickness at the bottom, and three paper-tinted shadows (contact, lift, ambient) instead of one.
   --app-card-pad is the breathing-room floor for any card's content (≥20px, nothing touches an edge). */
html[data-fate-system="app"]{
  --app-card-fill:rgba(255,253,248,.36);
  --app-card-sheen:linear-gradient(180deg,rgba(255,255,255,.52) 0,rgba(255,255,255,.16) 30%,rgba(255,255,255,0) 58%);
  --app-card-rim:transparent;
  --app-card-blur:20px;
  --app-card-shadow:0 1px 2px rgba(59,52,39,.05),0 8px 18px -8px rgba(59,52,39,.1),0 26px 50px -24px rgba(59,52,39,.18);
  --app-card-pad:20px;
}
html[data-fate-system="app"] :is(.panel,.dy-card){
  background:var(--app-card-sheen),var(--app-card-fill);
  border:1px solid var(--app-card-rim);
  border-radius:var(--fate-radius-card);
  box-shadow:var(--app-card-shadow);
  -webkit-backdrop-filter:blur(var(--app-card-blur)) saturate(135%);
  backdrop-filter:blur(var(--app-card-blur)) saturate(135%)
}
html[data-fate-system="app"] .glass{
  background:var(--app-card-sheen),var(--app-card-fill);
  border:1px solid var(--app-card-rim);
  border-radius:var(--fate-radius-card);
  box-shadow:var(--app-card-shadow);
  -webkit-backdrop-filter:blur(var(--app-card-blur)) saturate(135%);
  backdrop-filter:blur(var(--app-card-blur)) saturate(135%)
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-fate-system="app"]{--app-card-fill:rgba(248,246,239,.94)}
}
@media (prefers-reduced-transparency:reduce){
  html[data-fate-system="app"]{--app-card-fill:var(--fate-paper-bright);--app-card-sheen:linear-gradient(transparent,transparent);--app-card-blur:0px}
}
html[data-fate-system="app"] .rows{overflow:hidden}
html[data-fate-system="app"] .row{
  min-height:64px;
  padding:16px var(--app-card-pad,20px);
  gap:12px
}
html[data-fate-system="app"] .row+.row{border-top-color:var(--fate-line-soft)}
html[data-fate-system="app"] .row .t{
  color:var(--fate-ink);
  font-size:var(--fate-text-md);
  font-weight:var(--fate-weight-medium)
}
html[data-fate-system="app"] .row .s,
html[data-fate-system="app"] .row .aux{color:var(--fate-ink-muted)}

html[data-fate-system="app"] .btn{
  min-height:52px;
  padding-inline:var(--fate-space-5);
  border:1px solid transparent;
  border-radius:var(--fate-radius-pill);
  font-family:var(--fate-font-body);
  font-size:var(--fate-text-sm);
  font-weight:var(--fate-weight-semibold);
  letter-spacing:.02em;
  transition:transform var(--fate-duration-instant) var(--fate-ease-ink),
    background-color var(--fate-duration-control) var(--fate-ease-ink),
    color var(--fate-duration-control) var(--fate-ease-ink),
    border-color var(--fate-duration-control) var(--fate-ease-ink),
    opacity var(--fate-duration-control) var(--fate-ease-ink)
}
html[data-fate-system="app"] .btn-primary{
  background:var(--app-solid-sheen),var(--fate-ink);
  color:var(--fate-on-accent);
  box-shadow:var(--app-solid-shadow)
}
html[data-fate-system="app"] .btn-cinnabar{
  background:var(--fate-seal);
  color:var(--fate-on-accent)
}
html[data-fate-system="app"] .btn-ghost{
  border-color:transparent;
  background:var(--app-card-sheen),var(--app-card-fill);
  box-shadow:var(--app-card-shadow);
  -webkit-backdrop-filter:var(--app-glass-filter);
  backdrop-filter:var(--app-glass-filter);
  color:var(--fate-ink)
}
@media (hover:hover){
  html[data-fate-system="app"] .btn-primary:hover{transform:translateY(-2px);background:var(--app-solid-sheen),var(--fate-seal)}
  html[data-fate-system="app"] .btn-ghost:hover{color:var(--fate-seal)}
}
/* 語言切換（2026-09-26）：兩顆並排；選中＝墨底白字＋勾，一眼看得出（不只 aria-pressed）。
   不吃 .btn-ghost 的硃砂 hover：切換後版面換語言會位移，滑鼠下那顆會留一圈硃砂框，像是選錯了。 */
html[data-fate-system="app"] [role=group]:has(>.btn[data-locale]){display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 2px}
html[data-fate-system="app"] .btn[data-locale]{min-height:48px;padding-inline:12px;gap:8px}
html[data-fate-system="app"] .btn[data-locale]:hover{color:var(--fate-ink)}
html[data-fate-system="app"] .btn[data-locale][aria-pressed=true]::before{content:'';flex:none;width:14px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center/contain no-repeat}

html[data-fate-system="app"] .chip{
  min-height:var(--fate-touch);
  padding:0 14px;
  border-color:transparent;
  background:var(--app-card-sheen),var(--app-card-fill);
  box-shadow:var(--app-card-shadow);
  -webkit-backdrop-filter:var(--app-glass-filter);
  backdrop-filter:var(--app-glass-filter);
  color:var(--fate-ink-body);
  font-weight:var(--fate-weight-semibold)
}
html[data-fate-system="app"] .seg{
  gap:4px;
  padding:4px;
  border:1px solid transparent;
  background:var(--app-card-sheen),var(--app-card-fill);
  box-shadow:var(--app-card-shadow);
  -webkit-backdrop-filter:var(--app-glass-filter);
  backdrop-filter:var(--app-glass-filter)
}
/* the seg's V2 liquid-glass layers (inset shine = a rim) give way to the tile material above */
html[data-fate-system="app"] .seg.liquid-glass::before,html[data-fate-system="app"] .seg.liquid-glass::after{content:none}
html[data-fate-system="app"] .seg button{
  min-height:var(--fate-touch);
  color:var(--fate-ink-muted);
  font-size:var(--fate-text-xs);
  font-weight:var(--fate-weight-semibold)
}
html[data-fate-system="app"] .seg button.on{
  color:var(--fate-ink);
  background:rgba(255,255,255,.82);
  box-shadow:0 4px 14px rgba(21,23,19,.08)
}

html[data-fate-system="app"] .sect{
  font-family:var(--fate-font-display);
  font-size:var(--fate-text-lg);
  font-weight:var(--fate-weight-semibold);
  letter-spacing:.04em;
  color:var(--fate-ink)
}
html[data-fate-system="app"] .latin{
  font-family:var(--fate-font-latin);
  letter-spacing:var(--fate-tracking-label);
  font-weight:var(--fate-weight-label)
}
html[data-fate-system="app"] .disclaim{
  color:var(--fate-ink-muted);
  background:transparent;
  border:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none
}
html[data-fate-system="app"] .seal{background:var(--fate-seal);color:var(--fate-on-accent)}
html[data-fate-system="app"] .badge-free{background:rgba(109,155,137,.1);color:var(--fate-jade)}
html[data-fate-system="app"] .badge-paid{background:rgba(182,47,35,.08);color:var(--fate-seal)}
html[data-fate-system="app"] .badge-line{border-color:var(--fate-line);color:var(--fate-ink-muted)}

/* The shared Fate mark replaces hand-drawn text squares in brand positions. */
.fate-brand-hero{
  display:grid;
  justify-items:center;
  gap:12px;
  color:var(--fate-ink)
}
.fate-brand-hero .fate-logo__mark{width:58px;height:58px}
.fate-brand-hero .fate-logo__name{font-size:var(--fate-text-xl);letter-spacing:.12em}
.fate-brand-hero .fate-logo__latin{text-align:center}
.fate-brand-mark{width:30px;height:30px;flex:0 0 auto}

/* Shared bottom chrome adopts Fate's five-destination app pattern while its
   existing transparent-shell refraction implementation remains intact. */
html[data-fate-system="app"] .tabbar{
  width:min(94%,390px);
  height:auto;
  min-height:64px;
  padding:7px;
  gap:2px;
  border:1px solid var(--fate-glass-border);
  border-radius:var(--fate-radius-pill);
  box-shadow:var(--fate-shadow-float)
}
html[data-fate-system="app"] .tab-item{
  min-height:48px;
  gap:2px;
  border-radius:var(--fate-radius-pill);
  color:var(--fate-ink-muted)
}
html[data-fate-system="app"] .tab-item.on{
  color:var(--fate-seal);
  background:rgba(255,255,255,.54)
}
html[data-fate-system="app"] .tab-item span{
  height:auto;
  color:inherit;
  font-size:9px;
  font-weight:var(--fate-weight-semibold)
}
html[data-fate-system="app"] .tab-item svg{width:18px;height:18px}
/* Preserve the v3 scroll morph inside the Fate skin. The general Fate nav
   rules above intentionally own the resting state; this state restores the
   compact pill dimensions and collapses labels once ui.js sets nav-compact. */
html[data-fate-system="app"].nav-compact .tabbar{
  width:min(76%,320px);
  height:46px;
  min-height:46px;
  padding:0 6px;
  gap:0
}
html[data-fate-system="app"].nav-compact .tab-item{
  min-height:44px;
  gap:3px
}
html[data-fate-system="app"].nav-compact .tab-item span{
  height:0;
  opacity:0
}

html[data-fate-system="app"] input.field,
html[data-fate-system="app"] select.field,
html[data-fate-system="app"] textarea.field,
html[data-fate-system="app"] .field-btn{
  min-height:52px;
  border:1px solid var(--fate-line);
  border-radius:var(--fate-radius-md);
  background:rgba(255,255,255,.5);
  color:var(--fate-ink)
}
html[data-fate-system="app"] .flabel{
  color:var(--fate-ink-muted);
  font-size:var(--fate-text-xs);
  font-weight:var(--fate-weight-semibold)
}
html[data-fate-system="app"] .sheet{
  background:rgba(248,246,239,.96);
  border-color:transparent;
  box-shadow:0 -18px 58px rgba(33,36,30,.12)
}
html[data-fate-system="app"] .filter-panel{
  background:rgba(248,246,239,.96);
  border-color:var(--fate-glass-border);
  box-shadow:var(--fate-shadow-float)
}
html[data-fate-system="app"] .avatar{
  background:rgba(109,155,137,.12)!important;
  color:var(--fate-jade)!important;
  border:1px solid rgba(41,76,64,.12)
}
html[data-fate-system="app"] .tag-good{
  background:rgba(109,155,137,.1);
  border-color:rgba(41,76,64,.24);
  color:var(--fate-jade)
}
html[data-fate-system="app"] .tag-bad{
  background:rgba(182,47,35,.06);
  border-color:rgba(182,47,35,.22);
  color:var(--fate-seal)
}
html[data-fate-system="app"] .cbar i{background:var(--fate-jade)}
html[data-fate-system="app"] #fuseRing{stroke:var(--fate-jade)!important}
html[data-fate-system="app"] .ring-num{font-family:var(--fate-font-numeric);color:var(--fate-jade)}
html[data-fate-system="app"] .breathe{animation:none}
html[data-fate-system="app"] .filterBadge{background:var(--fate-seal)}

@media (min-width:768px){
  html[data-fate-system="app"] body{background:var(--fate-paper-muted)!important}
  html[data-fate-system="app"] .app{
    border-inline:1px solid var(--fate-line-soft);
    background:var(--fate-paper)
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-08 · 付費牆第二代 + fatetell 式層級（L：改善 UI/UX 可大量抄 fatetell；
   解讀只能看一小段、只透露一點重要的）
   ─ 舊的三塊連續全罩磨砂拿掉，改成露頭卡 / 遮值 / 行內更多列，全部不模糊。
   ─ 同一個「印」符號、同一組 --lk-* token，不是另一套。
   ═══════════════════════════════════════════════════════════════════════ */
/* Card material is owned by --app-card-* above; no opaque override here. */
html[data-fate-system="app"] .row+.row{border-top-color:rgba(21,23,19,.06)}

/* 遮值：共用朱紅鎖頭，品牌印章不作付費狀態標記。 */
.lk-mask{display:inline-grid;place-items:center;vertical-align:-4px;min-width:24px;height:22px;padding:0 3px;margin:0 3px;
  color:var(--fate-seal);line-height:1;cursor:pointer}
.lk-mask--sm{min-width:18px;height:18px;font-size:9px;margin:0;vertical-align:-3px}
.lk-val{font-weight:500;color:var(--text-strong)}
/* 露頭卡：第一段完整、後面只露小標 */
.lk-tz{position:relative}
.lk-tz-hook{font-size:15px;line-height:1.85;color:var(--text-body)}
.lk-tz-outline{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.lk-tz-outline li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-muted);line-height:1.5}
.lk-tz-dot{width:6px;height:6px;border-radius:50%;background:var(--fate-jade);flex:0 0 auto;margin:0 6px}
.lk-tz.is-open .lk-tz-outline li{color:var(--text-body)}
.lk-tz-cta{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.lk-tz-cta .lk-btn{margin:0;font-size:12px;padding:10px 18px}
.lk-link{font-size:12px;color:var(--text-strong);text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-left:auto;white-space:nowrap}
.lk-row{margin-top:12px}
.lk-row .lr-t{font-size:12px}
/* 解讀題庫卡（首頁「我的解讀」） */
.rd-card{padding:18px 19px;margin-top:11px}
.rd-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rd-t{font-family:var(--font-display);font-size:18px;font-weight:400;color:var(--text-strong);letter-spacing:.02em}
.rd-p{font-family:var(--font-latin);font-size:12px;color:var(--text-muted);white-space:nowrap}
.rd-s{font-size:12px;color:var(--text-muted);margin-top:3px;line-height:1.5}
.rd-card .lk-tz{margin-top:12px}
/* 解讀清單裡直接連去別頁的列（用神與忌神 → 大運、五行分佈與流通 → 五行；L 2026-09-30）：同 readings.css 的目錄列，毛筆箭頭裸放右緣 */
.rd-rows a.rd-row{text-decoration:none;color:inherit;align-items:center}
.rd-rows a.rd-row .rx-link-main{flex:1;min-width:0}
.rd-rows a.rd-row .rx-chev{flex:0 0 auto;width:14px;height:16px;background:center/contain no-repeat url("assets/ink-chevron.svg");opacity:.9}
.rd-row .hk{font-size:12px;color:var(--text-body);margin-top:5px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rd-row .hk .lk-mask{height:19px;min-width:20px;font-size:10px}
/* 大運/流年列：現在走的那一段要看得出來 */
.row.is-now{background:rgba(109,155,137,.08)}
.row .t .now-tag{display:inline-block;margin-left:6px;font-size:10px;font-weight:400;color:var(--fate-jade);
  border:1px solid rgba(41,76,64,.3);border-radius:999px;padding:1px 7px;vertical-align:2px}
.row .s .lk-mask{height:19px;min-width:20px;font-size:10px;vertical-align:-3px}
/* 吉時條：免費只點亮最旺的一個時辰，其餘是幽靈條（fatetell 的 #D2D2D2 幽靈數字同一招） */
.zbar.ghost{background:rgba(21,23,19,.08)!important}
/* 四維：沒解鎖的分數位置放一枚印，斷語仍可讀 */
.dcell .dv .lk-mask{vertical-align:2px}
/* 找大師四顆入口從首頁最上面移到宜忌後面：首頁第一屏只講「你今天」 */
.svc-sect{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 10px}
.svc-sect .sect{margin:0}
.svc-sect span{font-size:12px;color:var(--text-muted)}

/* ═══ 看一半（2026-09-26 hook 升級，計畫 4.0；取代 2026-09-08 的雙層疊字）═══
   露頭段落完整清楚（關鍵值已由 mv 換成等長模糊佔位），後面只接最多兩行「佔位字」往下淡出。
   佔位字不是付費內容：付費續文在鎖住時根本不進 DOM（B-S7：舊版把整段付費文放進免費 DOM 兩次）。 */
.lk-fade{position:relative;cursor:pointer;--lk-lh:27px}
.lk-fade>div,.lk-fade-open{font-size:15px;line-height:var(--lk-lh,27px);color:var(--text-body);text-wrap:pretty}
.lk-fade>.lk-fade-tail{margin-top:2px;color:transparent;text-shadow:0 0 .5em rgba(21,23,19,.5);
  user-select:none;-webkit-user-select:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.5) 55%,transparent);
  mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.5) 55%,transparent)}
.lk-tz .lk-fade,.lk-tz .lk-fade-open{margin-top:0}
/* 遮值（mv）：句子照常讀，關鍵值換成「等長」模糊佔位 + 一枚小朱紅鎖；點了去解鎖。
   :not(#_) 把特異度抬到 id 級，讓各頁 .row .s .lk-mask / .rd-row .hk .lk-mask 的圖示尺寸規則
   不會把佔位字縮小（佔位字必須跟正文等寬，才叫「等長」）。 */
.lk-mask.lk-mask--text:not(#_){display:inline;white-space:nowrap;min-width:0;height:auto;margin:0 .08em;padding:.05em .24em;
  font-size:inherit;vertical-align:baseline;line-height:inherit;border-radius:.42em;
  background:rgba(21,23,19,.05);color:transparent;text-shadow:0 0 .42em rgba(21,23,19,.62);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;user-select:none;-webkit-user-select:none;
  transition:background-color 320ms var(--fate-ease-ink),text-shadow 320ms var(--fate-ease-ink)}
.lk-mask.lk-mask--text:not(#_)::after{display:inline-block;width:.7em;height:.7em;margin-left:.22em;vertical-align:-.03em;background:var(--fate-seal)}
.lk-mask.lk-mask--text:not(#_):active{background:rgba(21,23,19,.09)}
.lk-mask--text:focus-visible{outline:2px solid var(--fate-jade);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.lk-mask.lk-mask--text:not(#_):hover{background:rgba(182,47,35,.06);text-shadow:0 0 .34em rgba(21,23,19,.7)}}

/* Fatetell reference: takeaway first, technical detail on demand; Fate tokens stay canonical. */
/* System controls are retired; preserve source labels, not manual selection. */
#sysFilterBtn[hidden],#sysFilterOv[hidden],#sysContact[hidden]{display:none!important}
.reading-fold{margin-top:18px;border-block:1px solid var(--line,rgba(21,23,19,.12));padding:3px 0}
.reading-fold>summary{min-height:48px;padding:12px 4px;cursor:pointer;color:var(--text-strong);font-size:15px;font-weight:500}
.reading-fold>summary span{display:block;margin:5px 0 0 18px;font-size:12px;font-weight:400;color:var(--text-body)}
.reading-fold>p,.reading-intro p{font-size:15px;line-height:1.8;color:var(--text-body)}
.reading-fold--quiet{border-bottom:0;margin-top:12px}
.reading-fold--quiet>summary{font-size:12px;font-weight:400;color:var(--text-body)}
.reading-fold[open]{padding-bottom:16px}
.reading-fold>summary:focus-visible,.reading-link:focus-visible{outline:2px solid var(--text-strong);outline-offset:3px;border-radius:6px}
.reading-link{display:flex;align-items:center;justify-content:space-between;min-height:48px;color:var(--text-strong);font-size:15px;text-decoration:none}
.reading-link:active{opacity:.65}
.reading-intro{padding:20px;margin-bottom:18px}
.reading-intro h2{font-family:var(--font-display);font-size:22.4px;line-height:1.5;margin:6px 0 10px;color:var(--text-strong)}
.reading-intro p{margin:8px 0}
.reading-eyebrow,.score-scale{font-size:11px;color:var(--text-body)}
#fuseCard>div:first-child{flex-direction:column-reverse;align-items:stretch!important;gap:16px!important}
#fuseCard .breathe-wrap{align-self:flex-start;width:auto;height:auto;animation:none}
#fuseCard .breathe-wrap>svg{display:none}
#fuseCard .breathe-wrap>div{position:static!important;display:flex;align-items:baseline;gap:7px}
#fuseCard .ring-num{font-size:22px}
#fuseCard .ring-cap,#fuseCard .score-scale{font-size:11px}
#fuseCard #fuseKey{font-size:22.4px!important;letter-spacing:.06em!important}
/* Card headlines keep clauses intact; balance a clause only when it exceeds the card. */
.fate-card-title{text-wrap:balance;overflow-wrap:anywhere;min-width:0}
.fate-card-title .fate-title-phrase{display:inline-block;max-width:100%;vertical-align:top;text-wrap:balance;overflow-wrap:anywhere}
#fuseCard #fuseSum{font-size:16px!important;line-height:1.85!important}

.scope-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:inherit;min-height:44px;padding:8px 10px;font-size:13px;font-weight:500;border-radius:var(--r-pill)}
.scope-link.on{color:var(--text-strong);font-weight:500}
#todayActions[hidden],#lifeOverview[hidden],#lifeReadings[hidden]{display:none!important}
.horizon-note{font-size:12px;line-height:1.7;color:var(--text-body);margin:12px 0}
.horizon-copy{padding:20px;margin:16px 0}
.horizon-copy h1,.horizon-title{font-weight:400;font-family:var(--font-display);font-size:22.4px;line-height:1.5;margin:12px 0}
.horizon-copy h2{font-size:19px;margin:0 0 12px}
.horizon-copy h3{font-size:17px;margin:8px 0}
.horizon-copy p{font-size:15px;line-height:1.8;color:var(--text-body)}
.horizon-copy small{font-size:12px;color:var(--text-body)}
.life-timeline{margin:0;padding-left:20px;border-left:1px solid var(--fate-jade,#294c40);list-style:none}
.life-timeline li+li{margin-top:28px}.life-timeline time{font-size:13px;color:var(--fate-jade,#294c40)}
.timeline-entry{display:block;color:inherit;text-decoration:none}
.timeline-entry .life-timeline li{margin-top:18px}
.timeline-entry .life-timeline p{margin:4px 0}
.timeline-entry .reading-link{margin-top:18px;border-top:1px solid var(--line-soft);padding-top:16px}
.year-browser{padding-bottom:32px}
/* L-08: years + daily-reading hide the nav; prefixed so it out-ranks html[data-fate-system="app"] #tabbar{display:flex} (V2 showed it). */
html[data-fate-system="app"] .years-page #tabbar{display:none}
.year-range,.year-detail-heading,.year-adjacent{display:flex;align-items:center;justify-content:space-between;gap:12px}
.year-range h2{margin:0;font-size:18px;font-variant-numeric:tabular-nums}
.year-range>a,.year-adjacent>a{display:grid;place-items:center;min-width:44px;min-height:44px;color:var(--text-strong);text-decoration:none}
.years-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}
.years-grid a{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:48px;padding:10px;border:1px solid var(--line-soft);border-radius:12px;color:var(--text-strong);text-decoration:none;font-variant-numeric:tabular-nums}
.years-grid a small{font-size:10px;color:var(--text-body)}
.years-grid a[aria-current]{border-color:var(--fate-jade);background:rgba(41,76,64,.07)}
.year-jump summary{padding:14px 0;cursor:pointer;font-size:13px}
.year-jump .years-grid a{font-size:13px;justify-content:center}
.year-detail-heading h2{font-size:22.4px;font-family:var(--font-display)}
.year-topics article{border-top:1px solid var(--line-soft);padding:18px 0}
.year-topics h3{font-size:16px;margin:0 0 8px}
.year-topics p{font-size:14px;line-height:1.8;color:var(--text-body);margin:0}
.year-browser a:focus-visible,.timeline-entry:focus-visible{outline:2px solid var(--fate-jade);outline-offset:4px}
.calendar-panel{padding:12px 8px;margin:16px 0}.cal-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-heading h2{font-size:19px}.cal-heading button{width:44px;height:44px;border:0;background:transparent;font-size:22.4px;color:var(--text-strong);cursor:pointer}
.cal-grid,.cal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px}
.cal-week{text-align:center;font-size:12px;padding:10px 0;color:var(--text-body)}
.cal-day{min-width:0;min-height:54px;padding:5px 0;background:transparent;border:1px solid transparent;border-radius:9px;cursor:pointer;color:var(--text-body)}
.cal-day b,.cal-day small{display:block}.cal-day b{font-size:15px;font-variant-numeric:tabular-nums}.cal-day small{font-size:9px;margin-top:5px}
.cal-day.good,.cal-advice.good{color:var(--fate-jade,#294c40);background:#e5ece4}
.cal-day.bad,.cal-advice.bad{color:#98271f;background:#fae8e3}
.cal-day.mixed{background:linear-gradient(135deg,#e5ece4 50%,#fae8e3 50%);color:var(--text-strong)}
.cal-day[aria-pressed=true]{border-color:var(--text-strong);box-shadow:inset 0 0 0 1px var(--text-strong)}
.cal-advice{padding:12px;border-radius:13px;margin-top:12px}.cal-advice p{color:inherit;margin:6px 0}
.cal-topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cal-topics button{min-height:44px;padding:6px 2px;border:0;border-radius:18px;background:var(--app-card-sheen),var(--app-card-fill);box-shadow:var(--app-card-shadow);-webkit-backdrop-filter:var(--app-glass-filter);backdrop-filter:var(--app-glass-filter);font-size:12px;color:var(--text-body);cursor:pointer}
.cal-day:focus-visible,.cal-topics button:focus-visible,.cal-heading button:focus-visible,.scope-link:focus-visible{outline:2px solid var(--text-strong);outline-offset:2px}
/* Daily content: complete free advice first; two quiet previews, one shared entitlement. */
#todayActions #luckRow{display:block}
#todayActions #fuseCard .breathe-wrap,#todayActions #fuseLatin{display:none}
#dailyDetails[hidden],#dailyOffer[hidden]{display:none!important}
.daily-color{display:flex;align-items:center;gap:16px;padding:18px}
.daily-swatch{width:42px;height:42px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px var(--line-soft)}
.daily-color strong{display:block;font-family:var(--font-display);font-size:22.4px;color:var(--text-strong);margin-top:4px}
.daily-color p{margin:4px 0 0;font-size:13px;color:var(--text-body)}
.daily-label,.daily-dress small{font-size:12px;font-weight:400;line-height:1.7;color:var(--text-muted)}
.daily-dress{padding:18px;margin-top:16px} /* its own card beside 今日幸運色 (L, 2026-09-25) */
.daily-dress p{margin-bottom:0}
.daily-dress h3,.daily-answer h3{font-size:15px;margin:0;color:var(--text-strong)}
.daily-dress p,.daily-guide p,.daily-conversation p,.daily-offer p{font-size:15px;line-height:1.8;color:var(--text-body);text-wrap:pretty;margin:10px 0}
.daily-guide{padding:20px;margin-top:16px}
.daily-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;justify-content:space-between}
.daily-guide h2{font-size:18px;margin:0;color:var(--text-strong);text-wrap:balance}
.daily-cues{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.daily-cues strong{display:block;font-size:16px;font-weight:400;color:var(--text-strong);margin-top:6px;font-variant-numeric:tabular-nums}
.daily-conversation{padding:26px 2px 18px}
.daily-conversation h2,.daily-offer h2{font-family:var(--font-display);font-size:22.4px;line-height:1.55;color:var(--text-strong);margin:8px 0 14px;text-wrap:balance}
.daily-guide .lk-btn,.daily-conversation .lk-btn{min-height:44px;width:100%;margin-top:12px;font-size:14px}
.daily-preview-tail{width:58%;height:1px;margin-top:16px;background:var(--line-soft)}
.daily-conversation .daily-label,.daily-offer .daily-label{font-size:12px;color:var(--text-muted)}
.daily-outline .lk-mask,#dailyTalk .lk-tz-outline .lk-mask{cursor:default}   /* 只給裝飾性大綱鎖頭；#dailyCues 的遮值是 role=button，要手形（2026-09-26 審閱） */
.daily-answer{padding-top:16px}.daily-answer h3:not(:first-child){margin-top:18px}
.daily-offer{padding:20px;margin:12px 0 20px}
.daily-offer .btn{width:100%;margin-top:12px}
.daily-dismiss{display:block;min-height:44px;width:100%;border:0;background:transparent;color:var(--text-body);font:inherit;cursor:pointer}
#dailyHooks button:focus-visible,#dailyHooks a:focus-visible{outline:2px solid var(--fate-jade);outline-offset:3px}

/* Shared finish pass: preserve Fate materials and the document-scroll shell. */
html[data-fate-system="app"] :is(button,a,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--fate-jade);outline-offset:3px
}
/* Touch/mouse editing: caret, selection and quiet fill; never stacked focus rings. */
html[data-fate-system="app"]:not([data-input-method="keyboard"]) :focus{
  outline:none!important;box-shadow:none!important
}
html[data-fate-system="app"] :is(input,textarea,select,[contenteditable="true"]):focus{
  outline:none!important;box-shadow:none!important;caret-color:var(--fate-seal)
}
html[data-fate-system="app"][data-input-method="keyboard"] :is(input,textarea,select,[contenteditable="true"]):focus{
  box-shadow:inset 0 -2px 0 var(--text-muted)!important
}
html[data-fate-system="app"][data-input-method="keyboard"] :focus-visible{box-shadow:none}
/* The tile shadow is material, not a focus ring: keep it on the just-clicked / focused tile (the two strips above are
   !important, so this must be too). Keyboard focus still shows the outline ring. */
html[data-fate-system="app"] :is(.btn-ghost,.chip,.sheet-x,.ask-round,.pf-add,.account-filters button,.ask-suggestions button,.ask-sort button,.sub-market-options button,.cal-topics button):focus{box-shadow:var(--app-card-shadow)!important}
html[data-fate-system="app"] .btn-primary:focus{box-shadow:var(--app-solid-shadow)!important}
html[data-fate-system="app"] :is(.seg button.on,.chip.on,.syschip.on,.lik button.on,.cal-topics button[aria-pressed=true],#questionPacks .question-bundles .btn[aria-pressed=true],.sub-frequency button[aria-pressed=true],.sub-language button[aria-pressed=true],.sub-market-options button[aria-pressed=true],.ask-sort [aria-pressed="true"],.scope-link.on,.btn[data-locale][aria-pressed=true],.account-filters button[aria-pressed=true]):focus{box-shadow:var(--app-card-shadow-on)!important}
html[data-fate-system="app"] .chip.product-favorite{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;aspect-ratio:1;border-radius:50%;color:var(--fate-ink-body);cursor:pointer}
.product-favorite svg{display:block;width:22px;height:22px;overflow:visible;transform:translateY(.5px)}
.product-favorite .heart-wash{fill:currentColor;opacity:.08;transition:opacity 160ms ease}
html[data-fate-system="app"] .product-favorite[aria-pressed=true]{color:var(--fate-seal)}
.product-favorite[aria-pressed=true] .heart-wash{opacity:.85}
.product-favorite:focus-visible{outline:2px solid var(--fate-jade);outline-offset:3px}
html[data-fate-system="app"] :is(button,.btn):disabled{
  opacity:.48;cursor:not-allowed;box-shadow:none;transform:none
}
html[data-fate-system="app"] :is(p,.row .s,.pf-meta,.gbody){overflow-wrap:break-word}
html[data-fate-system="app"] :is(.row>div,.hcard>div,.pf-name){min-width:0}
html[data-fate-system="app"] :is(.row .aux,.gp,.ring-num,.year-number){font-variant-numeric:tabular-nums}
html[data-fate-system="app"] .sect{padding-block:0;margin-block:28px 14px;line-height:1.5}
html[data-fate-system="app"] .secthead .sect{margin:0}
html[data-fate-system="app"] .reading-fold>summary{line-height:1.65}
html[data-fate-system="app"] .reading-fold>summary::marker{color:var(--fate-jade)}
html[data-fate-system="app"] .pf-act{min-height:44px;cursor:pointer}
html[data-fate-system="app"] [data-keyboard-action]{cursor:pointer}
html[data-fate-system="app"] [data-keyboard-action]:focus-visible{outline-offset:-3px}
/* One compact segmented-navigation recipe, including links and buttons. */
html[data-fate-system="app"] :is(.seg-sticky,.sys-row)>.seg{padding:3px;gap:3px}
html[data-fate-system="app"] :is(.seg-sticky,.sys-row)>.seg>:is(button,a){
  position:relative;min-height:36px;padding:6px 10px;line-height:24px;font-size:13px
}
html[data-fate-system="app"] :is(.seg-sticky,.sys-row)>.seg>:is(button,a)::after{
  content:"";position:absolute;inset:-4px 0
}
#mallMain,#msgList,#todayReal{padding-top:0}
#mallMain>.seg-sticky,#msgList>.seg-sticky,#scopeRow{
  --seg-pad:12px;display:flex;justify-content:flex-start;padding:12px 0
}
#scopeRow{margin:0}
.scopechip[hidden]{display:none!important}   /* L 2026-09-30「吉日先藏起來」 */
/* 整體的三個子分頁（L 2026-09-30）：命盤 · 大運 · 解讀——比範圍列輕一級的文字分頁，選中那格下面一筆墨線 */
.sub-row{display:flex;gap:26px;margin:0 0 4px;padding:0 6px}
.sub-row[hidden]{display:none}
.subtab{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:15px;letter-spacing:.08em;color:var(--text-muted);text-decoration:none;-webkit-tap-highlight-color:transparent}
.subtab.on{color:var(--text-strong)}
.subtab.on::after{content:"";position:absolute;left:-2px;right:-2px;bottom:6px;height:2px;border-radius:2px;background:var(--text-strong)}
.subtab:focus-visible{outline:2px solid var(--text-strong);outline-offset:2px;border-radius:4px}
.overall-top{padding-top:0;padding-bottom:0}   /* 命盤／大運／解讀三頁的範圍列同一高度（不跳 14px） */
.account-wrap a:not(.btn){text-underline-offset:4px}
/* Four destinations share one pill; Ask has its own material at the right. */
html[data-fate-system="app"] #tabbar{display:flex;width:min(94%,390px);height:44.8px;min-height:44.8px;border:0;box-shadow:none;padding:0 0 0 6px;gap:2px}
html[data-fate-system="app"] #tabbar .tab-item:not(.tab-ask){position:relative;flex:1 1 0;min-width:44px;min-height:44px;flex-direction:row;align-items:flex-end;padding:11px 0;gap:6px;background:none}
html[data-fate-system="app"] #tabbar .tab-item:not(.tab-ask).on::before{content:'';position:absolute;inset:4px 0;border-radius:inherit;background:rgba(255,255,255,.54);z-index:-1}
html[data-fate-system="app"] #tabbar .tab-item:not(.tab-ask).on{flex-grow:1.8}
html[data-fate-system="app"] #tabbar .tab-item:not(.tab-ask) span{display:none}
html[data-fate-system="app"] #tabbar .tab-item:not(.tab-ask).on span{display:block;height:auto;opacity:1;font-size:12px;font-weight:400;line-height:1;white-space:nowrap;margin-bottom:1px}
html[data-fate-system="app"] #tabbar .tab-item svg{flex-shrink:0;transform:none}
html[data-fate-system="app"] #tabbar::before{right:60px;border:1px solid var(--fate-glass-border);box-shadow:var(--fate-shadow-float)}
html[data-fate-system="app"] #tabbar .tab-ask{position:relative;flex:0 0 44.8px;height:44.8px;min-height:44.8px;margin-left:21px;background:none}
#tabbar .tab-ask::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--fate-seal);border:1px solid rgba(255,255,255,.2);box-shadow:var(--fate-shadow-float);z-index:-1}
html[data-fate-system="app"] #tabbar .ask-nav-glyph{width:23px;height:25px;opacity:1;color:#fff;fill:currentColor}
.home-welcome{display:flex;justify-content:space-between;align-items:center;padding:30px 20px 8px;gap:18px}
.home-welcome h1{font:500 22.4px/1.5 var(--font-display);margin:0;color:var(--text-strong)}
.home-welcome p{font-size:12px;color:var(--text-muted);margin:10px 0}
.home-profile{width:52px;min-height:56px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:50%;text-decoration:none;color:var(--text-body);background:var(--app-card-fill);box-shadow:var(--app-card-shadow)}
.home-profile svg{width:24px;height:24px}.home-profile span{font-size:10px}
.main-header{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}
/* Compact pill (L 2026-09-25: "everything is too big"): the button stays the 44px touch
   target; ::before draws the visible 32px pill. Plus circle 22px sits concentric, 5px inside. */
.main-header-quota{grid-column:2;grid-row:1;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:3px;min-height:44px;padding:0 5px 0 11px;border:0;border-radius:999px;background:none;font:inherit;font-size:12px;color:var(--text-strong);white-space:nowrap;cursor:pointer}
.main-header-quota::before{content:"";position:absolute;inset:6px 0;z-index:-1;border-radius:999px;background:var(--app-card-sheen),var(--app-card-fill);box-shadow:var(--app-card-shadow);-webkit-backdrop-filter:var(--app-glass-filter);backdrop-filter:var(--app-glass-filter)}
.main-header-quota b{font-variant-numeric:tabular-nums;font-size:14px}
.main-header-quota .quota-add{display:grid;place-items:center;flex:none;width:22px;height:22px;margin-left:4px;border-radius:50%;background:var(--fate-seal);color:#fff}
.main-header-quota .quota-add svg{display:block;width:14px;height:14px}
.main-header-quota:focus-visible{outline:none}
.main-header-quota:focus-visible::before{outline:2px solid var(--fate-seal);outline-offset:2px}
.main-header-profile{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--text-body);text-decoration:none;font-size:13px;background:none;box-shadow:none}
/* 右欄：鈴鐺＋頭像（L 2026-09-30）。鈴鐺是 tools/ink_cta.py 的水墨圖示，未讀時右上一點朱砂 */
.main-header-end{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center}
.main-header-end .main-header-profile{grid-column:auto;width:44px}   /* 34px 頭像圓、44px 觸控；320 寬時鈴鐺不壓到提問膠囊 */
.main-header-bell{position:relative;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--text-strong);cursor:pointer;-webkit-tap-highlight-color:transparent}
.main-header-bell[hidden],.bell-dot[hidden],.shop-dot[hidden],.tool-count[hidden],.mall-tool[hidden]{display:none}
.main-header-bell:focus-visible{outline:2px solid var(--text-strong);outline-offset:2px;border-radius:50%}
.main-header-bell:active{transform:scale(.94)}
.ink-ic--bell{width:22px;height:22px;-webkit-mask:url("assets/bell-ink.svg") center/contain no-repeat;mask:url("assets/bell-ink.svg") center/contain no-repeat}
.bell-dot{position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--fate-seal,#b62f23);box-shadow:0 0 0 2px var(--fate-paper,#f3f0e7)}
/* 商城紅點（有禮物待看或購物車有東西）：一圈朱砂往外暈開；人在商城時不顯示；新手引路的點在時讓位 */
.shop-dot{position:absolute;top:8px;left:calc(50% + 7px);width:8px;height:8px;border-radius:50%;background:var(--fate-seal,#b62f23);pointer-events:none;animation:shopPulse 1.8s cubic-bezier(.2,.7,.3,1) infinite}
.tab-item.on .shop-dot,.tab-item:has(>.ft-rdot:not(.gone)) .shop-dot{display:none}
@keyframes shopPulse{0%{box-shadow:0 0 0 2px var(--fate-paper-bright,#f8f6ef),0 0 0 2px rgba(182,47,35,.55)}70%,100%{box-shadow:0 0 0 2px var(--fate-paper-bright,#f8f6ef),0 0 0 10px rgba(182,47,35,0)}}
/* 通知面板 */
.inbox-title{margin:0 0 6px;font-family:var(--font-display);font-size:22.4px;font-weight:400;color:var(--text-strong)}
.inbox-row{display:flex;gap:12px;align-items:flex-start;padding:14px 2px;border-bottom:1px solid var(--line-soft);color:inherit;text-decoration:none}
.inbox-row .ink-ic{width:22px;height:22px;flex:none;margin-top:2px;color:var(--text-body)}
.inbox-text{flex:1;min-width:0}
.inbox-text b{display:block;font-size:15px;font-weight:500;line-height:1.5;color:var(--text-strong)}
.inbox-text span{display:block;margin-top:2px;font-size:13px;line-height:1.6;color:var(--text-body)}
.inbox-row time{flex:none;font-size:11px;line-height:1.5;color:var(--text-muted);margin-top:3px}
.inbox-row.is-unread b::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--fate-seal,#b62f23);vertical-align:2px}
.inbox-empty{margin:18px 0;font-size:14px;line-height:1.7;color:var(--text-muted)}
.inbox-settings{margin-top:10px}
/* 商城：購物車／收到的禮物（L 2026-09-30「購物車只放商城裏面」） */
.mall-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.mall-tool{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;border:0;cursor:pointer;color:var(--text-strong);text-decoration:none;
  background:var(--app-card-sheen),var(--app-card-fill);box-shadow:var(--app-card-shadow);-webkit-tap-highlight-color:transparent}
.mall-tool .ink-ic{width:22px;height:22px}
.mall-tool:focus-visible{outline:2px solid var(--text-strong);outline-offset:2px}
.tool-count{position:absolute;top:-2px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--fate-seal,#b62f23);color:#F8F6EF;font:500 11px/18px var(--font-body);text-align:center}
.tool-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--fate-seal,#b62f23);animation:shopPulse 1.8s cubic-bezier(.2,.7,.3,1) infinite}
@media (prefers-reduced-motion:reduce){.shop-dot,.tool-dot{animation:none}.main-header-bell:active{transform:none}}
#scr-today #todayChrome{display:none!important}
.account-wrap .account-setting:last-of-type{border-bottom:0}
@media (hover:hover){
  html[data-fate-system="app"] :is(.pf-act,[data-keyboard-action]):hover{background-color:rgba(41,76,64,.045)}
}

/* ═══ Shell polish 2026-09-26（shell owner）· V2 主題不變，只調深度、留白、箭頭、動效 ═══ */
/* 毛筆箭頭：V2 的 assets/ink-chevron.svg，裸放在右緣（無圈、無底）；ui.js inkChevrons() 把行尾「›」換成它。
   用 mask 讓它跟著所在文字的顏色（深底按鈕上也看得見）。返回用「‹」的鏡像。 */
.ink-chev{display:inline-block;flex:none;width:.8em;height:.92em;vertical-align:-.1em;background:currentColor;
  -webkit-mask:url("assets/ink-chevron.svg") center/contain no-repeat;mask:url("assets/ink-chevron.svg") center/contain no-repeat}
.ink-chev--back{transform:scaleX(-1);margin-right:.12em}
/* 返回：字形只佔 viewBox 約一半，.8em 在 12–13px 字上只剩 ~0.9px 細線；返回鈕給足尺寸、貼近文字 */
:is(.chip-back,.account-back) .ink-chev--back{width:12px;height:14px;margin-right:1px}
.ink-chev:not(:first-child):not(.ink-chev--back){margin-left:.32em}
.row .aux .ink-chev,.prow .ink-chev{width:14px;height:16px;vertical-align:-3px;color:var(--fate-ink-muted,#6B645C)}
.field-btn .fb-aux .ink-chev{width:13px;height:15px;color:var(--text-muted)}
/* 按鈕上的箭頭貼右緣；左右內距對稱，文字仍置中。 */
.btn:has(>.ink-chev:last-child){position:relative;padding-inline:46px}
.btn>.ink-chev:last-child{position:absolute;right:20px;top:50%;margin:0;width:14px;height:16px;transform:translateY(-50%)}
/* 共用 sheet 標題與說明（新面板用；V2 舊面板保留行內樣式） */
.sheet-title{font-family:var(--font-display);font-size:18px;font-weight:400;color:var(--text-strong);letter-spacing:.02em}
.sheet-lede{font-size:13px;color:var(--text-body);line-height:1.75;margin:8px 0 0;text-wrap:pretty}
.sheet-lede:empty,.sheet .disclaim:empty{display:none}
.sheet button.field-btn{width:100%;font:inherit;text-align:start;min-height:52px}
.sheet button.field-btn:disabled{opacity:.55;cursor:not-allowed}
.sheet button.prow{width:100%;background:none;border-width:0 0 1px;font:inherit;text-align:start}
/* 頁首頭像：有真實命盤時是名字的第一個字（墨字、白霧玻璃圓） */
.main-header-profile .profile-initial{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  font:400 15px/1 var(--font-display);color:var(--fate-jade,#294C40);
  background:var(--app-card-sheen),var(--app-card-fill);border:1px solid var(--app-card-rim);box-shadow:var(--app-card-shadow)}
/* 找大師情境行：空的時候不佔位（B-S4 每次開啟重設） */
#masterCtx[hidden]{display:none}
/* 行尾不留一兩個字（L 2026-09-27：「we never only have 1 or two words on the next line」；家規 11 的「不留孤字」擴到全站）。
   唯一一組全站基線，特異度為 0：任何元件規則都能覆寫（舊版 (0,3,1) 的 p 規則把 .profile-repair p 的 balance 壓掉了）。
   內文從 body 繼承 pretty（WebKit 的 pretty 會拉起任何過短的末行，Chrome 只處理單字）；標題、標籤、清單項、按鈕、列副標等短字 balance。
   新增的選擇器用 text-wrap-style 長寫，不動 nowrap / pre-line 的換行模式。仍在 Chrome 收兩個字的短說明，在元件層改 balance。 */
:where(html[data-fate-system="app"]) body{text-wrap-style:pretty}
:where(html[data-fate-system="app"]) :where(h1,h2,h3,.sect,.chrome-title,.sheet-title){text-wrap:balance}
:where(html[data-fate-system="app"]) :where(h4,h5,h6,li,dt,dd,th,td,label,legend,figcaption,caption,button,.btn,summary,.row .s,.pf-meta){text-wrap-style:balance}
:where(html[data-fate-system="app"]) p{text-wrap:pretty}
/* ═══ Shell a11y/robustness 2026-09-26（shell owner）═══ */
/* sheet 開著：背後不捲（CSS 鎖，任何關閉路徑都自動解除；needs iPhone check §9ab）。 */
html:has(.sheet-ov.on){overflow:hidden}
/* 鍵盤焦點不落在固定底部導覽／吸頂頁首底下（WCAG 2.4.11）。 */
html{scroll-padding-top:calc(58px + var(--sat));scroll-padding-bottom:calc(100px + var(--sab))}
/* toast 一直留在無障礙樹（role=status）；閒置時是空的，不畫任何東西。 */
#toast:empty{padding:0!important;background:none!important}
/* 上鎖家族的觸控高度：主鈕 44px；「找大師」文字連結用透明 ::after 把可點高度撐到 44px（版面不動）；還有更多列 44px。 */
.lk-tz-cta .lk-btn{min-height:44px}
button.lk-link{padding:0;border:0;background:none;font:inherit;font-size:12px;color:var(--text-strong)}
.lk-link{position:relative}
.lk-link::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
.lk-link:focus-visible,.lk-row:focus-visible{outline:2px solid var(--fate-jade);outline-offset:3px}
.lk-row{min-height:44px;box-sizing:border-box}
/* sheet 裡的選項 chip、完成鈕是真按鈕：字體跟著頁面，不吃瀏覽器按鈕預設。 */
button.chip{font:inherit;font-size:11px;line-height:1.2}
.chip:focus-visible,.sheet .field-btn:focus-visible,.wheel:focus-visible{outline:2px solid var(--fate-jade);outline-offset:2px}
/* 已登入但命盤讀不出來（ui.js profileRepairGate）：看命盤的頁面只留這張卡與共用 chrome。 */
html.profile-broken .app>:not(.bg):not(#profileRepair):not(#tabbar):not(.sheet-ov):not(#devbar):not(#toast):not(.safari-toolbar-sampling-shim):not(style){display:none!important}
html.profile-broken-me :is(#meProfile,#meBirthRow){display:none}
.profile-repair{margin:calc(var(--sat) + 48px) 20px 0;padding:28px 24px;text-align:center}
#meReal>.profile-repair{margin:0 0 16px}
.profile-repair h2{margin:0;font-family:var(--font-display);font-size:19px;color:var(--text-strong)}
.profile-repair p{margin:10px 0 22px;font-size:14px;line-height:1.8;color:var(--text-body);text-wrap:balance}

/* Type ceiling (L-confirmed 2026-09-26 — KEEP):「biggest font of the whole site should be 20% smaller than this including this name field」 — nothing above 22.4px (80% of the 28px name field). Headings without an explicit size would otherwise take the browser default 2em. Emblem artwork (.dy-seal, .gph, 五行圖 centre) is exempt. */
h1{font-size:min(2em,22.4px);font-weight:400}h2{font-size:min(1.5em,22.4px);font-weight:400}h3{font-size:min(1.17em,22.4px);font-weight:400}

/* No rim borders (L-confirmed 2026-09-26 — KEEP):「整個app 我不要這種AI slop 邊框」— no white/gradient edge rims or inset highlight lines on cards, panels, glass, inputs or chips; surfaces keep fill + blur + soft shadow only. The bottom nav keeps V2's liquid glass (L asked for the V2 nav). */
html[data-fate-system="app"] :is(.panel,.dy-card,.glass){border-color:transparent}

/* App typefaces = the onboarding's (L-confirmed 2026-09-26 — KEEP):「app 裏面的字體要用那個新的字體」— Chinese display in LXGW WenKai TC (霞鶩文楷), every Latin character in Satoshi Light, UI Chinese stays Noto Sans TC. Set once at the token level. */
@font-face{font-family:'Satoshi Light';src:url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root:root{--fate-font-display:'Satoshi Light','LXGW WenKai TC','Noto Serif TC',serif;--fate-font-serif:'Satoshi Light','LXGW WenKai TC','Noto Serif TC',serif;--fate-font-body:'Satoshi Light','Noto Sans TC',sans-serif;--fate-font-latin:'Satoshi Light',sans-serif;--font-display:'Satoshi Light','LXGW WenKai TC','Noto Serif TC',serif;--font-body:'Satoshi Light','Noto Sans TC',sans-serif;--font-latin:'Satoshi Light',sans-serif}

/* Elegant weights (L-confirmed 2026-09-26 — KEEP):「這些字體的 font weight 都太高, 我想要優雅的風格…不要hardcode, 要改class」— weight tokens lowered in brand-ui (semibold/medium 400, label 500); headings 400; b/strong no longer fall back to browser bold. */
b,strong{font-weight:500}
.sys-mark{font-family:var(--font-display);font-weight:var(--fate-weight-semibold,400);letter-spacing:.02em;line-height:1}

/* ── Selected buttons, app-wide (L-confirmed 2026-09-26 — KEEP):「apply to the whole site for selected buttons」— same as
   the onboarding tiles: raised light glass, a slow soft white light circling a fine ring (8s/turn), the label in ink with a
   soft light glow, lifted 2px. One selector list; nav, favourite heart, daily orb, calendar days and the DEV bar keep theirs. */
@property --sel-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes sel-spin{to{--sel-a:360deg}}
:is(.seg button.on,.chip.on,.syschip.on,.lik button.on,.cal-topics button[aria-pressed=true],#questionPacks .question-bundles .btn[aria-pressed=true],.sub-frequency button[aria-pressed=true],.sub-language button[aria-pressed=true],.sub-market-options button[aria-pressed=true],.ask-sort [aria-pressed="true"],.scope-link.on,.btn[data-locale][aria-pressed=true],.account-filters button[aria-pressed=true]){
  position:relative;transform:translateY(-2px);color:var(--text-strong,#151713);
  border-color:transparent;
  background:var(--app-card-sheen),var(--app-card-fill);
  -webkit-backdrop-filter:var(--app-glass-filter);backdrop-filter:var(--app-glass-filter);
  box-shadow:var(--app-card-shadow-on);
  text-shadow:0 0 10px rgba(255,255,255,.95),0 0 2px rgba(255,255,255,.9),0 1px 14px rgba(255,251,238,.8);
  transition:transform 560ms var(--ease-out,cubic-bezier(.22,.61,.36,1)),box-shadow 560ms var(--ease-out,cubic-bezier(.22,.61,.36,1))}
:is(.seg button.on,.chip.on,.syschip.on,.lik button.on,.cal-topics button[aria-pressed=true],#questionPacks .question-bundles .btn[aria-pressed=true],.sub-frequency button[aria-pressed=true],.sub-language button[aria-pressed=true],.sub-market-options button[aria-pressed=true],.ask-sort [aria-pressed="true"],.scope-link.on,.btn[data-locale][aria-pressed=true],.account-filters button[aria-pressed=true])::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:conic-gradient(from calc(var(--sel-a) - 80deg),transparent 0,#fff 160deg,transparent 160deg),rgba(21,23,19,.07);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:sel-spin 8s linear infinite}
@media (prefers-reduced-motion:reduce){:is(.seg button.on,.chip.on,.syschip.on,.lik button.on,.cal-topics button[aria-pressed=true],#questionPacks .question-bundles .btn[aria-pressed=true],.sub-frequency button[aria-pressed=true],.sub-language button[aria-pressed=true],.sub-market-options button[aria-pressed=true],.ask-sort [aria-pressed="true"],.scope-link.on,.btn[data-locale][aria-pressed=true],.account-filters button[aria-pressed=true])::after{animation:none}:is(.seg button.on,.chip.on,.syschip.on,.lik button.on,.cal-topics button[aria-pressed=true],#questionPacks .question-bundles .btn[aria-pressed=true],.sub-frequency button[aria-pressed=true],.sub-language button[aria-pressed=true],.sub-market-options button[aria-pressed=true],.ask-sort [aria-pressed="true"],.scope-link.on,.btn[data-locale][aria-pressed=true],.account-filters button[aria-pressed=true]){transition:none}}

/* ── Card material, app-wide (L-confirmed 2026-09-26 — KEEP):「change the card style of the whole app to this instead of the
   solid color before」— the raised E glass: barely-there white frost (blur 9, lifted saturation/brightness), a lit top face,
   a layered soft shadow and a white bloom. Set once on the shared card tokens + filter. */
html[data-fate-system="app"]{
  --app-card-fill:rgba(255,255,255,.12);
  --app-card-sheen:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 55%,rgba(255,255,255,.06) 100%);
  --app-card-blur:9px;
  --app-card-shadow:0 1px 1px rgba(40,44,36,.06),0 4px 8px -3px rgba(40,44,36,.12),0 14px 26px -14px rgba(40,44,36,.30),0 6px 24px rgba(255,255,255,.5);
  /* selected tile: lifted 2px, deeper layered shadow, white bloom + the soft light halo (onboarding .ob-choice[aria-pressed]) */
  --app-card-shadow-on:0 2px 2px rgba(40,44,36,.07),0 8px 14px -6px rgba(40,44,36,.16),0 22px 34px -16px rgba(40,44,36,.34),0 6px 24px rgba(255,255,255,.5),0 0 26px 4px rgba(255,251,238,.8);
  --app-glass-filter:blur(var(--app-card-blur)) saturate(1.6) brightness(1.08);
  /* solid CTAs (ink / seal) keep their fill but share the tile's lit top face and layered raise */
  --app-solid-sheen:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 55%,rgba(255,255,255,0) 100%);
  --app-solid-shadow:0 1px 1px rgba(21,23,19,.10),0 4px 8px -3px rgba(21,23,19,.16),0 14px 26px -14px rgba(21,23,19,.36);
}
html[data-fate-system="app"] :is(.panel,.dy-card,.glass){
  -webkit-backdrop-filter:var(--app-glass-filter);backdrop-filter:var(--app-glass-filter)}
@media (prefers-reduced-transparency:reduce){html[data-fate-system="app"]{--app-glass-filter:none}}

/* L 2026-09-26「這個class 的字 font weight 都輕20%」: daily-card body copy 400 -> 320 */
.fate-card-body{font-weight:320}

/* L 2026-09-26「反正你幫我弄好, 現在還是實心的卡」: large cards were clipping to solid white (brightness 1.08 ×
   saturate 1.6 over light paper). Cards get their own see-through glass: no brightness lift, soft saturation,
   thin sheen, no white bloom. Buttons/tiles keep the onboarding tile material. */
html[data-fate-system="app"]{
  --app-panel-fill:rgba(255,255,255,0);
  --app-panel-sheen:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 22%);
  --app-panel-filter:blur(2px) saturate(1.15);
  --app-panel-shadow:0 1px 1px rgba(40,44,36,.05),0 12px 28px -16px rgba(40,44,36,.24);
}
html[data-fate-system="app"] :is(.panel,.dy-card,.glass){
  background:var(--app-panel-sheen),var(--app-panel-fill);
  box-shadow:var(--app-panel-shadow);
  -webkit-backdrop-filter:var(--app-panel-filter);backdrop-filter:var(--app-panel-filter);
}
@media (prefers-reduced-transparency:reduce){html[data-fate-system="app"]{--app-panel-fill:rgba(248,246,239,.9);--app-panel-filter:none}}

/* L 2026-09-26「這個先隱藏, 不讓他選日子先」: day picker arrows hidden for now; the date label stays. */
.daily-date-nav [data-mock-day]{display:none}

/* L 2026-09-27「你是不是有些class 沒有用上霞鶩文楷細體」: body text uses LXGW WenKai TC Light too, not Noto Sans TC.
   Token-level so every class that reads --font-body / --fate-font-body follows; Latin stays Satoshi Light. */
:root:root{--fate-font-body:'Satoshi Light','LXGW WenKai TC','Noto Sans TC',sans-serif;--font-body:'Satoshi Light','LXGW WenKai TC','Noto Sans TC',sans-serif}
html[data-fate-system="app"] body{font-weight:300}
/* …and the Latin/number token falls back to WenKai for any CJK inside it (people .pf-meta, plan-card small print). */
:root:root{--fate-font-latin:'Satoshi Light','LXGW WenKai TC',sans-serif;--font-latin:'Satoshi Light','LXGW WenKai TC',sans-serif}
/* L 2026-09-27「數字跟英文都用 satoshi 就好」: the numeric token too (.ring-num etc.). */
:root:root{--fate-font-numeric:'Satoshi Light','LXGW WenKai TC',sans-serif}

/* English face (L 2026-09-27, font-lab-en.html panel 02:「Cormorant Garamond · Body Cormorant Garamond — go for this please」):
   every Latin letter and digit in Cormorant Garamond — titles/headers in the Regular cut, body/descriptions in the Light
   cut. Each is one static cut declared for weights 1–1000 (the Satoshi Light trick), so the chosen cut holds whatever
   font-weight a rule asks. CJK stays LXGW WenKai TC; the logo wordmark keeps Satoshi. Google Fonts, OFL 1.1. */
@font-face{font-family:'Fate Cormorant Display';src:url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_v86KnrOiss4.woff2') format('woff2');font-weight:1 1000;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fate Cormorant Display';src:url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_v86KnTOig.woff2') format('woff2');font-weight:1 1000;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fate Cormorant Body';src:url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_qE6KnrOiss4.woff2') format('woff2');font-weight:1 1000;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fate Cormorant Body';src:url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_qE6KnTOig.woff2') format('woff2');font-weight:1 1000;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root:root:root{--fate-font-display:'Fate Cormorant Display','LXGW WenKai TC','Noto Serif TC',serif;--fate-font-serif:'Fate Cormorant Display','LXGW WenKai TC','Noto Serif TC',serif;--font-display:'Fate Cormorant Display','LXGW WenKai TC','Noto Serif TC',serif;--fate-font-body:'Fate Cormorant Body','LXGW WenKai TC','Noto Sans TC',sans-serif;--fate-font-sans:'Fate Cormorant Body','LXGW WenKai TC','Noto Sans TC',sans-serif;--font-body:'Fate Cormorant Body','LXGW WenKai TC','Noto Sans TC',sans-serif;--fate-font-latin:'Fate Cormorant Body','LXGW WenKai TC','Noto Sans TC',sans-serif;--font-latin:'Fate Cormorant Body','LXGW WenKai TC','Noto Sans TC',sans-serif;--fate-font-numeric:'Fate Cormorant Body','LXGW WenKai TC','Noto Sans TC',sans-serif}
.fate-logo__name{font-family:'Satoshi Light','LXGW WenKai TC','Noto Serif TC',serif}
.fate-logo__latin{font-family:'Satoshi Light','LXGW WenKai TC','Noto Sans TC',sans-serif}

/* 我的命書 / Book of Fate (L 2026-09-28): Overall's right slot reopens the onboarding 命書. Same glass capsule as the
   header question pill (32px visible inside a 44px target); the row's right-edge fade is dropped while it shows. */
#scopeRow .book-link{flex:none;margin-left:auto;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 10px 0 14px;border-radius:999px;font-size:13px;color:var(--text-strong);text-decoration:none;white-space:nowrap}
#scopeRow .book-link::before{content:"";position:absolute;inset:6px 0;z-index:-1;border-radius:999px;background:var(--app-card-sheen),var(--app-card-fill);box-shadow:var(--app-card-shadow);-webkit-backdrop-filter:var(--app-glass-filter);backdrop-filter:var(--app-glass-filter)}
#scopeRow .book-link[hidden]{display:none}
#scopeRow .book-link:focus-visible{outline:none}
#scopeRow .book-link:focus-visible::before{outline:2px solid var(--fate-seal);outline-offset:2px}
#scopeRow:has(.book-link:not([hidden])){-webkit-mask-image:none;mask-image:none}
@media (max-width:359px){#scopeRow .book-link{padding:0 8px 0 10px;font-size:12px;gap:2px}#scopeRow .book-link svg{display:none}#scopeRow:has(.book-link:not([hidden])){gap:4px}}