/* ============================================================ Shell — 全站共用樣式 ------------------------------------------------------------ 整包唯一的設計來源：表面色、墨色階、線、五行配色、圓角、觸控高度、字體與共用元件。各頁的 :root 只做別名對應，不再各自寫死顏色與尺寸。術式專屬的配色（紫微星曜、奇門八門九星）留在各自頁面，那是領域語言，不納入統一。 ============================================================ */ :root{ /* 表面（淺色＝unpuzzlelife.tw 品牌色：米白底、白卡片，2026-09-30 定案） */ --ui-paper:#F1ECE2; --ui-panel:#FFFFFF; --ui-field:#F7F3EC; --ui-line:#D6CEBE; --ui-line-2:#B9AE98; /* 墨色階（小字 4.7:1、次要字 8.1:1，原本小字只有 2.2:1） */ --ui-ink:#1A1A1A; --ui-ink-2:#4A5156; --ui-ink-3:#6E757A; /* 語意色：主色藏青 #284053、點綴金 #C4A35A（網站 Logo 與品牌色） */ --ui-accent:#284053; --ui-on-accent:#FFF2E2; --ui-gold:#C4A35A; --ui-gold-ink:#8A6D2B; --ui-gold-l:#E8D4A8; --ui-warn:#B8791A; --ui-danger:#C2261C; --ui-ok:#2F6B4F; /* 淡底（狀態區塊、大運流年欄）*/ --ui-tint-ok:#EFF5F1; --ui-tint-warn:#FBF4E6; --ui-tint-danger:#FBEAE8; --ui-tint-accent:#F4EEDF; --ui-on-accent-2:#D8D8D8; /* 五行（三個盤共用同一組色相） */ --ui-mu:#12793A; --ui-huo:#CC2A30; --ui-tu:#8a5a12; --ui-jin:#B06A00; --ui-shui:#1450bd; /* 金原本 #d9800c 只有 2.9:1 */ /* 尺寸 */ --ui-r:4px; --ui-r-lg:6px; --ui-r-pill:999px; --ui-h:44px; --ui-h-sm:36px; --ui-gap:10px; --ui-pad:14px; /* 字 */ --ui-serif:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif; --ui-sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif; --ui-fs:.88rem; --ui-fs-sm:.74rem; --ui-fs-xs:.67rem; --ui-track:.06em; /* 底部分頁列沿用 ui token */ --shell-bg:var(--ui-panel); --shell-fg:var(--ui-ink); --shell-dim:var(--ui-ink-3); --shell-line:var(--ui-line); --shell-on:var(--ui-accent); --shell-h:64px; } /* ============================================================ 佈景 ------------------------------------------------------------ 深色覆寫一定要掛在，不能掛。自訂屬性是在「宣告的那個元素」上求值，各頁的 :root 若寫 --cell:var(--ui-field)，而深色值掛在 body，:root 只會拿到淺色值。 ============================================================ */ html.theme-dark { color-scheme:dark; --ui-paper:#1a1a1a; --ui-panel:#202020; --ui-field:#2b2b2b; --ui-line:#3a3a3a; --ui-line-2:#555555; --ui-ink:#ededed; --ui-ink-2:#b0b0b0; --ui-ink-3:#7a7a7a; --ui-accent:#4ec9dd; --ui-on-accent:#14171A; --ui-warn:#d9a441; --ui-danger:#e0625c; --ui-ok:#5fb083; --ui-mu:#4fae6e; --ui-huo:#e0625c; --ui-tu:#c79046; --ui-jin:#e2a02a; --ui-shui:#5a9ae8; --ui-tint-ok:#1E2E26; --ui-tint-warn:#332B1A; --ui-tint-danger:#331F1E; --ui-tint-accent:#2A2724; --ui-on-accent-2:#2D4A50; --shell-bg:var(--ui-panel); --shell-on:var(--ui-accent); } /* ---- 五行文字色（紫微、奇門、八字共用）---- */ .w木{color:var(--ui-mu)} .w火{color:var(--ui-huo)} .w土{color:var(--ui-tu)} .w金{color:var(--ui-jin)} .w水{color:var(--ui-shui)} /* ---- 分段切換：紫微 .seg、奇門 .seg2、羅盤 .tabs 共用 ---- flex-shrink:0 是關鍵：羅盤宅盤浮層是 flex column 且有 max-height，不鎖住的話內容一長整排會被壓扁，字被切掉一半。 */ .seg,.seg2,.tabs{ display:flex;flex-shrink:0;gap:0; border:1px solid var(--ui-line);border-radius:var(--ui-r); background:var(--ui-panel);overflow:hidden; } .seg>button,.seg2>button,.tabs>button{ flex:1 1 0;min-width:0;margin:0;border:0;border-radius:0;background:transparent; color:var(--ui-ink-2);font-family:inherit;font-size:var(--ui-fs); letter-spacing:var(--ui-track);line-height:1.3;min-height:var(--ui-h); padding:8px 6px;cursor:pointer;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;transition:background .15s,color .15s; } .seg>button+button,.seg2>button+button,.tabs>button+button{border-left:1px solid var(--ui-line)} .seg>button:hover,.seg2>button:hover,.tabs>button:hover{color:var(--ui-ink)} .seg>button[aria-pressed="true"],.seg2>button[aria-pressed="true"],.tabs>button[aria-pressed="true"]{ background:var(--ui-accent);color:var(--ui-on-accent);border-color:var(--ui-accent); } /* ---- 共用按鈕與提示條 ---- */ .shell-btn{font-family:inherit;font-size:var(--ui-fs-sm);letter-spacing:var(--ui-track); padding:7px 12px;min-height:var(--ui-h-sm);border-radius:var(--ui-r); border:1px solid var(--ui-line);background:transparent;color:var(--ui-ink);cursor:pointer} .shell-btn:hover{border-color:var(--ui-ink)} .shell-note{font-size:var(--ui-fs-sm);line-height:1.55;padding:8px 11px;border-radius:var(--ui-r); border:1px solid var(--ui-line);color:var(--ui-ink);background:transparent;margin:8px 0} .shell-note.warn{border-color:var(--ui-warn);color:var(--ui-warn)} .shell-note.info{border-color:var(--ui-line);color:var(--ui-ink-3)} /* ---- 分享面板 ---- 首頁命例列與三個排盤頁都用同一份（原本只在 index.html 裡）。 */ .recedit{border:1px solid var(--ui-ink);border-radius:5px;padding:11px;background:var(--ui-panel);display:grid;gap:8px} .recedit .row{display:grid;grid-template-columns:56px 1fr;gap:9px;align-items:center} .recedit label{font-size:.7rem;color:var(--ui-ink-3);letter-spacing:.06em} .recedit input{width:100%;min-width:0;border:1px solid var(--ui-line);border-radius:4px; padding:8px 9px;min-height:38px;font-family:inherit;font-size:.88rem;color:var(--ui-ink); -webkit-appearance:none;appearance:none} .recedit .btns{display:flex;gap:8px} .recedit .btns button{flex:1;min-height:38px;border-radius:4px;font-family:inherit; font-size:.82rem;cursor:pointer;border:1px solid var(--ui-ink);background:var(--ui-ink);color:var(--ui-on-accent)} .recedit .btns button.ghost{background:transparent;color:var(--ui-ink)} /* ---- 橫向捲動容器 ---- */ .scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .scroller::-webkit-scrollbar{display:none} /* ============================================================ 底部分頁列 ============================================================ */ body.has-shell-tabs{padding-bottom:calc(var(--shell-h) + var(--sa-bottom) + 14px)!important} .shell-tabs{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex; background:var(--shell-bg);border-top:1px solid var(--shell-line); padding-bottom:var(--sa-bottom)} .shell-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:5px;height:var(--shell-h);padding:0 2px;text-decoration:none; color:var(--shell-dim);font-family:inherit;transition:color .15s} .shell-tab:hover{color:var(--shell-fg)} .shell-tab.on{color:var(--shell-on)} .shell-tab-i{flex:0 0 auto;font-family:var(--ui-serif);font-size:15px;line-height:28px; text-align:center;width:28px;height:28px;border:1px solid currentColor;border-radius:50%; box-sizing:border-box;overflow:hidden} .shell-tab>span:last-child{display:block;font-size:11px;line-height:1.2;letter-spacing:.08em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .shell-tab.on .shell-tab-i{background:var(--shell-on);color:var(--shell-bg)} /* ---- 「帳號」分頁是 button，不是 a，要把按鈕預設樣式清掉 ---- */ button.shell-tab{border:0;background:transparent;cursor:pointer;margin:0;font-size:inherit; -webkit-appearance:none;appearance:none} /* ============================================================ 帳號與設定面板（底部「帳號」分頁叫出來，每一頁共用） ------------------------------------------------------------ 所有規則都掛在 .shell-sheet 底下：各頁自己也有 .card、.acts、 h2 之類的寫法（紫微頁的 .card 就完全不一樣），不隔開會互相污染。面板停在分頁列上方，分頁列保持可見，再按一次「帳號」就收起來。 ============================================================ */ /* 遮罩停在分頁列上方：面板開著時也能直接點別的分頁換頁、或再點「帳號」收起 */ .shell-backdrop{position:fixed;left:0;right:0;top:0;z-index:940;background:rgba(0,0,0,.32); bottom:calc(var(--shell-h) + var(--sa-bottom))} .shell-sheet{position:fixed;left:0;right:0;z-index:950; bottom:calc(var(--shell-h) + var(--sa-bottom)); margin:0 auto;width:100%;max-width:520px;max-height:calc(100vh - var(--shell-h) - 40px); max-height:calc(100dvh - var(--shell-h) - var(--sa-bottom) - 40px); display:flex;flex-direction:column;box-sizing:border-box; background:var(--ui-paper);color:var(--ui-ink);font-family:var(--ui-sans);line-height:1.6; border:1px solid var(--ui-line);border-bottom:0;border-radius:12px 12px 0 0; box-shadow:0 -8px 28px rgba(0,0,0,.18);animation:shellSheetIn .18s ease-out} .shell-sheet[hidden]{display:none} @keyframes shellSheetIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}} html.shell-sheet-open,html.shell-sheet-open body{overflow:hidden} .shell-sheet *{box-sizing:border-box} .shell-sheet .sheet-hd{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between; padding:12px 14px 10px 16px;border-bottom:1px solid var(--ui-line)} .shell-sheet .sheet-hd b{font-family:var(--ui-serif);font-size:.95rem;letter-spacing:.12em;font-weight:600} .shell-sheet .sheet-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--ui-line); background:var(--ui-panel);color:var(--ui-ink-2);font-size:.8rem;cursor:pointer;padding:0;margin:0; font-family:inherit;display:flex;align-items:center;justify-content:center} /* 奇門頁有全域 button{flex:1;min-height:46px}，不鎖住 ✕ 會被撐成一整條 */ .shell-sheet .sheet-x{flex:0 0 32px;min-height:0;min-width:0;letter-spacing:0} .shell-sheet .sheet-x:hover{border-color:var(--ui-ink);color:var(--ui-ink)} .shell-sheet .sheet-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;padding:12px;display:grid; grid-template-columns:minmax(0,1fr);gap:10px;align-content:start} .shell-sheet .card{background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:6px; padding:14px;margin:0;min-width:0} .shell-sheet .card[hidden]{display:none} .shell-sheet .card h2{font-family:var(--ui-serif);font-size:.88rem;font-weight:600;margin:0 0 11px; letter-spacing:.1em;padding:0 0 8px;border:0;border-bottom:1px solid var(--ui-line);color:var(--ui-ink)} .shell-sheet p{margin:0} .shell-sheet .acts{display:flex;gap:9px;margin-top:12px} .shell-sheet .acts button{flex:1;min-width:0;min-height:42px;border-radius:4px;margin:0;padding:6px 8px; border:1px solid var(--ui-ink);background:var(--ui-ink);color:var(--ui-on-accent); font-family:inherit;font-size:.86rem;font-weight:400;letter-spacing:.08em;cursor:pointer;width:auto} .shell-sheet .acts button.ghost{background:transparent;color:var(--ui-ink)} .shell-sheet .acts button:disabled{opacity:.5;cursor:default} .shell-sheet .seg>button{min-height:40px;font-size:.84rem} .shell-sheet .acct{border:1px solid var(--ui-line);border-radius:5px;padding:11px 12px;background:var(--ui-field)} .shell-sheet .acct-top{display:flex;align-items:center;gap:8px;justify-content:space-between} .shell-sheet .acct-top b{font-family:var(--ui-serif);font-size:.9rem;letter-spacing:.06em;font-weight:600; min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .shell-sheet .plan{flex:0 0 auto;font-size:.64rem;letter-spacing:.08em;padding:2px 9px; border:1px solid var(--ui-line-2);border-radius:999px;color:var(--ui-ink-2)} .shell-sheet .acct-sub{font-size:.68rem;color:var(--ui-ink-3);margin-top:4px;line-height:1.6} .shell-sheet .acct-lead{font-size:.74rem;line-height:1.8;color:var(--ui-ink-2);margin:0 0 11px} .shell-sheet .acct-fields{display:grid;gap:8px;margin-top:11px} .shell-sheet .acct-fields input{width:100%;min-width:0;background:var(--ui-panel);border:1px solid var(--ui-line); border-radius:4px;padding:9px 10px;min-height:42px;margin:0;font-family:inherit;font-size:16px; color:var(--ui-ink);-webkit-appearance:none;appearance:none} .shell-sheet .acct-fields input:focus{outline:none;border-color:var(--ui-ink)} .shell-sheet .inst,.shell-inst .inst{font-size:.76rem;line-height:1.75;color:var(--ui-ink-2)} .shell-sheet .inst .ok,.shell-inst .inst .ok{color:var(--ui-ok)} .shell-sheet .inst .inst-step,.shell-inst .inst .inst-step{display:flex;gap:8px;align-items:flex-start;margin-top:6px} .inst .sub-h{margin-top:12px;font-weight:600;color:var(--ui-ink)} .shell-inst .acct-sub{font-size:.68rem;color:var(--ui-ink-3);margin-top:4px;line-height:1.6} .shell-inst .acts{margin-top:10px} .shell-inst .acts button{min-height:40px;padding:0 16px;border-radius:4px;border:1px solid var(--ui-accent);background:var(--ui-accent); color:var(--ui-on-accent);font-family:inherit;font-size:.86rem;cursor:pointer} .shell-inst .safari{margin-top:10px;padding:9px 11px;border-radius:5px;background:var(--ui-tint-accent);font-size:.74rem;line-height:1.7;color:var(--ui-ink)} .shell-sheet .inst .inst-step i,.shell-inst .inst .inst-step i{flex:0 0 18px;height:18px;border-radius:50%;border:1px solid var(--ui-line); font-style:normal;font-size:.66rem;display:flex;align-items:center;justify-content:center} @media(prefers-reduced-motion:reduce){.shell-sheet{animation:none}} /* ============================================================ 可收合區塊（首頁「新增命例」、三個排盤頁的「出生資料」共用） ------------------------------------------------------------ 標題列整條是一顆按鈕，右側圓形＋，展開變 −。收起時標題旁顯示摘要（例如生辰），不用展開也知道現在看的是誰。標題不用 h2：各頁的 .card h2 寫法都不同，會互相干擾。 ============================================================ */ .shell-fold-hd{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center; gap:10px;cursor:pointer;min-height:28px;color:var(--ui-ink)} .shell-fold-hd:focus-visible{outline:2px solid var(--ui-ink);outline-offset:4px;border-radius:2px} .shell-fold-t{flex:0 0 auto;font-family:var(--ui-serif);font-size:.9rem;font-weight:600;letter-spacing:.1em} .shell-fold-sum{flex:1 1 auto;min-width:0;font-size:.74rem;color:var(--ui-ink-2);letter-spacing:.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .shell-fold.open .shell-fold-sum{visibility:hidden} .shell-fold-i{position:relative;flex:0 0 26px;width:26px;height:26px;margin-left:auto;border-radius:50%; border:1px solid var(--ui-line);transition:border-color .15s} .shell-fold-i::before,.shell-fold-i::after{content:"";position:absolute;left:50%;top:50%; width:11px;height:1.5px;background:var(--ui-ink);transform:translate(-50%,-50%)} .shell-fold-i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s} .shell-fold.open .shell-fold-i::after{transform:translate(-50%,-50%) rotate(0deg)} .shell-fold-hd:hover .shell-fold-i{border-color:var(--ui-ink)} .shell-fold.open .shell-fold-hd{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--ui-line)} .shell-fold-body[hidden]{display:none!important} @media(prefers-reduced-motion:reduce){.shell-fold-i::after{transition:none}} /* ============================================================ 斷事紀錄（core/notes.js，命例詳情與三個排盤頁共用）所有規則掛在 .nt 底下，並把按鈕、輸入框的屬性寫齊：奇門頁有全域 button{flex:1;min-height:46px}、紫微頁有 .f input 等，不寫齊會被各頁的樣式蓋掉。 ============================================================ */ .nt{font-family:var(--ui-sans);color:var(--ui-ink)} .nt *{box-sizing:border-box} .nt .nt-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px; padding-bottom:8px;margin-bottom:12px;border-bottom:1px solid var(--ui-line)} .nt .nt-h b{font-family:var(--ui-serif);font-size:.9rem;font-weight:600;letter-spacing:.1em} .nt .nt-h small{font-size:.68rem;color:var(--ui-ink-3)} .nt .nt-empty{font-size:.76rem;color:var(--ui-ink-3);line-height:1.8} .nt .nt-tl{position:relative;padding-left:17px;display:grid;gap:14px} .nt .nt-tl::before{content:'';position:absolute;left:4px;top:5px;bottom:5px;width:1px;background:var(--ui-line)} .nt .nt-ev{position:relative} .nt .nt-ev::before{content:'';position:absolute;left:-17px;top:5px;width:9px;height:9px;border-radius:50%; background:var(--ui-panel);border:1.5px solid var(--ui-ink-3)} .nt .nt-ev.hit::before{border-color:var(--ui-warn)} .nt .nt-ev-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .nt .nt-date{font-family:var(--ui-serif);font-size:.86rem;letter-spacing:.06em} .nt .nt-tag{font-size:.64rem;letter-spacing:.06em;padding:1px 8px;border-radius:999px; border:1px solid var(--ui-line);color:var(--ui-ink-2)} .nt .nt-meta{font-size:.68rem;color:var(--ui-ink-3);margin-top:2px;line-height:1.6} .nt .nt-body{font-size:.82rem;line-height:1.85;margin-top:6px;white-space:pre-wrap;word-break:break-word} .nt .nt-tools{display:flex;gap:6px;margin-top:6px} .nt .nt-tools button{flex:0 0 auto;border:0;background:transparent;color:var(--ui-ink-3);font-family:inherit; font-size:.72rem;cursor:pointer;padding:3px 6px;min-height:30px;min-width:0;letter-spacing:0;border-radius:3px} .nt .nt-tools button:hover{color:var(--ui-ink)} .nt .nt-tools button.del:hover{color:var(--ui-warn)} .nt .nt-upsell{margin-top:14px;font-size:.74rem;line-height:1.8;color:var(--ui-ink-2); border:1px solid var(--ui-line);border-radius:5px;padding:9px 11px} .nt .nt-upsell b{color:var(--ui-ink);font-weight:600} .nt .nt-go{display:inline-block;margin-left:6px;color:var(--ui-ink);font-weight:600;text-decoration:none;white-space:nowrap} .nt .nt-acts{display:flex;gap:9px;margin-top:13px} .nt .nt-acts[hidden],.nt .nt-formbox[hidden],.nt .nt-f[hidden]{display:none} .nt .nt-btn{flex:1 1 0;min-width:0;min-height:44px;margin:0;padding:6px 10px;border-radius:4px; border:1px solid var(--ui-ink);background:var(--ui-ink);color:var(--ui-on-accent); font-family:inherit;font-size:.84rem;font-weight:400;letter-spacing:.08em;cursor:pointer;transform:none} .nt .nt-btn.ghost{background:transparent;color:var(--ui-ink)} .nt .nt-formbox{margin-top:12px} .nt .nt-form{display:grid;gap:9px;border:1px solid var(--ui-line);border-radius:5px;padding:12px;background:var(--ui-field)} .nt .nt-f{display:grid;gap:4px;min-width:0;margin:0} .nt .nt-f label{display:block;font-size:.68rem;color:var(--ui-ink-3);letter-spacing:.06em;margin:0} .nt .nt-f input,.nt .nt-f select,.nt .nt-f textarea{width:100%;min-width:0;max-width:100%;margin:0; background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:4px;padding:9px 10px;min-height:42px; font-family:inherit;font-size:16px;color:var(--ui-ink);-webkit-appearance:none;appearance:none;text-align:left} .nt .nt-f textarea{min-height:96px;line-height:1.7;resize:vertical} .nt .nt-when{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px} .nt .seg>button{min-height:38px;font-size:.8rem;letter-spacing:.02em} /* ---- 刪除帳號、Apple 登入（帳號卡片在帳號面板與登入頁都會出現）---- */ .acct-dellink{display:block;margin:14px auto 0;border:0;background:transparent;color:var(--ui-ink-3); font-family:inherit;font-size:.72rem;text-decoration:underline;cursor:pointer;padding:4px 8px;min-height:0} .acct-dellink:hover{color:var(--ui-danger)} .acct-del{border:1px solid var(--ui-danger);border-radius:5px;padding:11px 12px;margin-top:10px;display:grid;gap:8px} .acct-del b{color:var(--ui-danger);font-family:var(--ui-serif);letter-spacing:.06em} .acct-del p{margin:0;font-size:.74rem;line-height:1.75;color:var(--ui-ink-2)} .acct-del p b{font-family:inherit;letter-spacing:0} .acct-del input[type=password],.acct-del input[type=text]{width:100%;min-height:42px;border:1px solid var(--ui-line);border-radius:4px; padding:0 10px;font-size:16px;background:var(--ui-panel);color:var(--ui-ink);font-family:inherit} .acct-chk{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--ui-ink-2)} .acct-del .acts{margin-top:2px} button.danger,.shell-sheet .acts button.danger{background:var(--ui-danger)!important;border-color:var(--ui-danger)!important;color:#fff!important} /* Apple 規定的按鈕樣式：黑底白字（深色模式白底黑字）、Apple 標誌 */ button.apple,.shell-sheet .acts button.apple{background:#000!important;border-color:#000!important;color:#fff!important; display:inline-flex;align-items:center;justify-content:center;letter-spacing:.04em} html.theme-dark button.apple,html.theme-dark .shell-sheet .acts button.apple{background:#fff!important;border-color:#fff!important;color:#000!important} /* App 內不顯示的網頁版功能（兌換碼、網頁價差說明等），見 core/gate.js */ html.is-app .web-only{display:none!important} /* 安全區域：iOS 用 env()；Android 舊版 WebView 的 env() 不準，Capacitor 會另外給 --safe-area-inset-* 變數 */ :root{--sa-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--sa-bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px))} /* App 裡網頁畫到狀態列（瀏海）底下，整頁往下讓出那段高度；羅盤頁自己處理（html.own-safe-top） */ html.is-app:not(.own-safe-top){padding-top:var(--sa-top)} html:not(.is-app) .app-only{display:none!important} /* 沒有帳號、從分享連結來看盤的人：頂端提示可以免費註冊 */ .share-view-bar{margin:0 0 12px;padding:10px 14px;border-radius:6px;background:var(--ui-tint-accent);border:1px solid var(--ui-gold-l); font-size:.8rem;line-height:1.7;color:var(--ui-ink);text-align:center} .share-view-bar a{color:var(--ui-accent);font-weight:600;text-underline-offset:3px} /* 前台（排盤網站）：不能左右捲動、不能縮放（使用者要求；後台 pinhe-desk 不鎖，見 html.allow-zoom）。 overflow-x:clip 不會像 hidden 那樣弄壞 position:sticky。輸入框 16px：iPhone 上小於 16px 的輸入框一點就會自動放大整頁。 */ html:not(.allow-zoom),html:not(.allow-zoom) body{max-width:100%;overflow-x:clip} @supports not (overflow-x:clip){html:not(.allow-zoom),html:not(.allow-zoom) body{overflow-x:hidden}} html:not(.allow-zoom){touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%} html:not(.allow-zoom) input:not([type=checkbox]):not([type=radio]):not([type=range]),html:not(.allow-zoom) select,html:not(.allow-zoom) textarea{font-size:max(16px,1em)} .shell-sheet .sheet-links{text-align:center;font-size:.72rem;color:var(--ui-ink-3);padding:4px 0 8px} .shell-sheet .sheet-links a,.acct-sub a{color:var(--ui-ink-2);text-underline-offset:3px} /* ============================================================ 時間軸（紫微運限、八字大運流年、奇門時間流共用，2026-09-30 統一） ------------------------------------------------------------ .tlx > .tlx-top（提示＋今年／今天）＋ .tlx-row × N .tlx-row = .tlx-lb（直寫標題）＋ .tlx-cells（可橫向捲動） .tlx-c 格子：上小字、干支（五行色，可直疊）、下小字選取色：c-d 大限／大運綠、c-n 流年藍、c-m 流月褐、c-r 流日青、c-t 流時桃紅（跟紫微盤面的四化小方塊同色）； c-x 中性（奇門：換時間重新起盤，沒有疊層的意思）目前（今年、今天、這個時辰）：.now 上方小字加粗 ============================================================ */ :root{--tl-d:#2f9e44;--tl-n:#1c7ed6;--tl-m:#9a6f2c;--tl-r:#13867f;--tl-t:#c2477f} .tlx{border:1px solid var(--ui-line);border-radius:4px;background:var(--ui-panel);overflow:hidden;font-family:var(--ui-sans)} .tlx-top{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:6px 8px;border-bottom:1px solid var(--ui-line)} .tlx-hint{margin-right:auto;font-size:11px;color:var(--ui-ink-3);line-height:1.5} .tlx-jump{-webkit-appearance:none;appearance:none;flex:0 0 auto;margin:0;min-height:30px;min-width:0;padding:3px 14px;border-radius:999px; border:1px solid var(--ui-line-2);background:transparent;color:var(--ui-ink);font-family:var(--ui-sans);font-size:12.5px; letter-spacing:.04em;cursor:pointer;transform:none} .tlx-jump:hover{border-color:var(--ui-ink)} .tlx-row{display:grid;grid-template-columns:30px minmax(0,1fr);border-top:1px solid var(--ui-line)} .tlx-top+.tlx-row,.tlx>.tlx-row:first-child{border-top:0} .tlx-lb{display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;letter-spacing:.2em; font-family:var(--ui-serif);font-size:13px;color:var(--ui-ink-2);background:var(--ui-field);border-right:1px solid var(--ui-line)} .tlx-cells{display:flex;overflow-x:auto;scrollbar-width:none} .tlx-cells::-webkit-scrollbar{display:none} .tlx-c{-webkit-appearance:none;appearance:none;flex:1 0 46px;min-width:46px;min-height:0;margin:0;border:0;border-right:1px solid var(--ui-line); border-radius:0;background:transparent;color:var(--ui-ink);padding:5px 2px;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:0;line-height:1.2;font-family:var(--ui-serif);letter-spacing:0;cursor:pointer;transform:none} .tlx-c:last-child{border-right:0} .tlx-c:hover{background:var(--ui-field)} .tlx-c small{font-family:var(--ui-sans);font-size:10px;color:var(--ui-ink-3);white-space:nowrap} .tlx-c b{font-weight:400;font-size:15px;line-height:1.2;display:flex;align-items:baseline;white-space:nowrap} .tlx-c b i{font-style:normal;font-size:9.5px;color:var(--ui-ink-2);margin-left:1px;font-family:var(--ui-sans)} .tlx-c.now small:first-child{color:var(--ui-ink);font-weight:700} .tlx-c.on:not(.c-x){color:#fff} .tlx-c.on:not(.c-x) small,.tlx-c.on:not(.c-x) b,.tlx-c.on:not(.c-x) b span,.tlx-c.on:not(.c-x) b i{color:#fff!important} .tlx-c.on.c-d{background:var(--tl-d)} .tlx-c.on.c-n{background:var(--tl-n)} .tlx-c.on.c-m{background:var(--tl-m)} .tlx-c.on.c-r{background:var(--tl-r)} .tlx-c.on.c-t{background:var(--tl-t)} .tlx-c.on.c-x{background:var(--ui-field);box-shadow:inset 0 -3px 0 var(--ui-ink)} /* 中性：干支保留五行色 */ /* 流日：一個月 29～30 天，分三排、每排十格（上中下旬） */ .tlx-cells.grid10{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));overflow:visible} .tlx-cells.grid10 .tlx-c{min-width:0;border-top:1px solid var(--ui-line)} .tlx-cells.grid10 .tlx-c:nth-child(-n+10){border-top:0} .tlx-cells.grid10 .tlx-c:nth-child(10n){border-right:0} .tlx-cells.grid10 .tlx-c b{font-size:12.5px} @media(max-width:420px){ .tlx-row{grid-template-columns:26px minmax(0,1fr)} .tlx-lb{font-size:11.5px} .tlx-c{flex-basis:42px;min-width:42px} .tlx-c b{font-size:13.5px} .tlx-c small{font-size:8.5px} .tlx-cells.grid10 .tlx-c b{font-size:11.5px} } /* ============================================================ 淺色外觀的細節（品牌配色，2026-09-30 定案）測試者反映舊的淺色「清湯掛麵」：小字對比 2.2:1、主色是黑色、整頁只有黑白灰。色票在上面的 :root；這裡是陰影、金線、按鈕與紫微盤面等細節，只套在淺色。 ============================================================ */ html.theme-light{ /* 紫微盤面：白宮格、暖灰格線、太極宮淡金底（ziwei.html 的 :root 會被這裡蓋過） */ --bg:#FFFFFF; --cell:#FFFFFF; --line:#CFC6B4; --cellTai:#F6ECD2; --cellTri:#F7F3EC; --cellHover:#FAF6EE; --cellTriHover:#F1EADC; --triRing:#DDD3BF; --taiRing:#C4A35A; --triStroke:#9A8E74; } /* 卡片：淡淡的陰影讓卡片從米白底浮起來；標題下緣用淡金線 */ html.theme-light .card, html.theme-light .panel, html.theme-light .sheet, html.theme-light .det, html.theme-light .tlx{box-shadow:0 1px 3px rgba(26,26,26,.06),0 1px 1px rgba(26,26,26,.03)} html.theme-light .card h2, html.theme-light .det h3, html.theme-light .shell-fold.open .shell-fold-hd, html.theme-light .nt .nt-h{border-bottom-color:var(--ui-gold-l)} /* 主要按鈕改藏青（原本是黑色） */ html.theme-light .acts button:not(.ghost):not(.danger):not(.apple), html.theme-light button.go, html.theme-light .go, html.theme-light .btn:not(.ghost), html.theme-light .nt .nt-btn:not(.ghost), html.theme-light #go:not(.ghost), html.theme-light button.primary, html.theme-light .recedit .btns button:not(.ghost){background:var(--ui-accent)!important;border-color:var(--ui-accent)!important;color:var(--ui-on-accent)!important} html.theme-light .acts button.ghost, html.theme-light .btn.ghost{border-color:var(--ui-accent)!important;color:var(--ui-accent)!important} /* 分頁列目前頁：藏青圓底、米字 */ html.theme-light .shell-tab.on .shell-tab-i{color:var(--ui-on-accent)} /* 今年、今天、現在：金色描邊 */ html.theme-light .tlx-jump{border-color:var(--ui-gold);color:var(--ui-gold-ink)} html.theme-light .tlx-top{background:#FBF8F2} html.theme-light .tlx-lb{background:#F4EEDF;color:var(--ui-gold-ink)}