/* 命運閣 Fatism — 墨硃主題（2026-09-16 Tony 選 A 後全站統一）
   用法：每頁在自己的 <style> 之後 <link> 這支，讓這裡的 :root 蓋掉舊的紫金變數。
   舊變數名（--bg-1/--gold/--text…）刻意保留，widget 內部大量沿用，不必逐頁改。 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;500;700&family=Cormorant+Garamond:ital,wght@0,300;0,500;1,300&display=swap');

:root{
  /* 墨硃 */
  --ink:#0d0c0a; --ink-2:#14120f; --ink-3:#1b1814;
  --paper:#e8e2d4; --paper-dim:#9a9484;
  --cinnabar:#b8382c; --cinnabar-soft:rgba(184,56,44,.14);
  --gold:#c9a227; --gold-soft:rgba(201,162,39,.12);
  --rule:rgba(232,226,212,.14); --rule-strong:rgba(232,226,212,.28);

  /* 舊名相容：widget／pricing 的既有 CSS 直接吃這些 */
  --bg-1:var(--ink); --bg-2:var(--ink-2); --bg-3:var(--ink-3);
  --gold-dim:#8c7526; --ivory:#f0ead9;
  --text:var(--paper); --text-dim:var(--paper-dim);
  --shadow:0 10px 34px rgba(0,0,0,.55);
}

html{-webkit-text-size-adjust:100%}
body{
  font-family:"Noto Serif TC","Noto Serif SC",Georgia,serif;font-weight:300;
  background:var(--ink)!important;color:var(--paper);
  line-height:1.85;letter-spacing:.02em;
}
/* 宣紙纖維：取代原本的星點 */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")!important;
}

/* ── 共用元件 ── */
.f-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 0 0;flex-wrap:wrap}
.f-mark{font-family:"Cormorant Garamond",serif;font-size:13px;letter-spacing:.42em;
  color:var(--paper-dim);text-transform:uppercase;text-decoration:none}
.f-mark:hover{color:var(--gold)}

.f-sec{display:flex;align-items:baseline;gap:20px;margin:0 0 6px}
.f-sec h2{font-size:15px;font-weight:500;letter-spacing:.5em;color:var(--paper)}
.f-sec .n{font-family:"Cormorant Garamond",serif;font-size:12px;letter-spacing:.3em;
  color:var(--cinnabar);text-transform:uppercase}
.f-sec .line{flex:1;height:1px;background:var(--rule)}

.f-btn{display:inline-block;white-space:nowrap;text-decoration:none;cursor:pointer;
  padding:13px 30px;border:1px solid var(--gold);background:transparent;color:var(--gold);
  font-family:inherit;font-size:13px;letter-spacing:.24em;transition:background .3s,color .3s}
.f-btn:hover{background:var(--gold);color:var(--ink)}
.f-btn.solid{background:var(--gold);color:var(--ink)}
.f-btn.solid:hover{filter:brightness(1.1)}

.f-crumb{font-size:12.5px;letter-spacing:.12em;color:var(--paper-dim);padding:22px 0 0}
.f-crumb a{color:var(--paper-dim);text-decoration:none;border-bottom:1px solid transparent}
.f-crumb a:hover{color:var(--gold);border-bottom-color:var(--rule)}
.f-crumb span{margin:0 9px;opacity:.5}

.f-foot{margin:70px 0 48px;padding-top:26px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--paper-dim);letter-spacing:.06em;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.f-foot a{color:var(--paper-dim);text-decoration:none;border-bottom:1px solid var(--rule)}
.f-foot a:hover{color:var(--gold)}

/* ── 既有頁面（widget／pricing）的外觀校正 ── */
h1{color:var(--paper)!important;text-shadow:none!important;font-weight:500;letter-spacing:.16em}
h1 .sub{color:var(--gold)!important;font-family:"Cormorant Garamond",serif;letter-spacing:.4em!important}
h2,h3{font-weight:500}
.back{color:var(--paper-dim)!important;letter-spacing:.14em}
.back:hover{color:var(--gold)!important}
.card,.panel,.box,.acct-bar,.account-bar,.pack,.block,.modal,.banner,.result,.upload-zone,.dropzone,input,select,textarea{border-radius:2px!important}
button,.btn,.buy-btn,.unlock-btn,.acct-btn,.featured-tag,.dev-tag,.badge{border-radius:2px!important;font-family:inherit}

/* ── 舊頁面（pricing／auth／widget）的外觀校正：不動它們的 HTML 與邏輯 ── */
.lang-switch{border:none!important;background:none!important;padding:0!important;gap:18px!important}
.lang-switch button{background:none!important;color:var(--paper-dim)!important;
  padding:2px 0!important;font-size:12px!important;letter-spacing:.2em!important;font-weight:300!important;position:relative}
.lang-switch button.active{color:var(--paper)!important}
.lang-switch button.active::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--cinnabar)}
.lang-switch button:hover:not(.active){color:var(--gold)!important}

/* 金色漸層按鈕 → 墨硃的細框按鈕 */
.btn,.buy-btn,.unlock-btn,.acct-btn,.btn-gold,.cta a{
  background:transparent!important;background-image:none!important;
  border:1px solid var(--gold)!important;color:var(--gold)!important;
  font-weight:400!important;letter-spacing:.2em!important;box-shadow:none!important;
  transition:background .3s,color .3s!important}
.btn:hover,.buy-btn:hover,.unlock-btn:hover,.btn-gold:hover,.cta a:hover{
  background:var(--gold)!important;color:var(--ink)!important;transform:none!important}
.acct-btn{border-color:var(--rule-strong)!important;color:var(--paper-dim)!important;letter-spacing:.12em!important}
.acct-btn:hover{color:var(--gold)!important;border-color:var(--gold)!important}
.acct-btn.primary{border-color:var(--gold)!important;color:var(--gold)!important}
.acct-btn.primary:hover{background:var(--gold)!important;color:var(--ink)!important}
.btn.ghost,.btn.btn-ghost{border-color:var(--rule-strong)!important;color:var(--paper-dim)!important}
.btn.ghost:hover,.btn.btn-ghost:hover{background:transparent!important;color:var(--gold)!important;border-color:var(--gold)!important}
.btn:disabled,.buy-btn:disabled,.unlock-btn:disabled{opacity:.45!important;background:transparent!important;color:var(--gold)!important}

/* 面板：細框、去光暈 */
.pack,.panel,.card,.block,.result,.chart,.acct-bar,.account-bar,.upload-zone,.dropzone{
  box-shadow:none!important;border-color:var(--rule)!important}
.pack:hover{transform:none!important;border-color:var(--gold)!important}
.pack.featured{background:var(--gold-soft)!important}
.featured-tag,.dev-tag,.badge{background:var(--cinnabar)!important;color:var(--paper)!important;
  border:none!important;font-weight:400!important;letter-spacing:.14em!important}
/* 帳號列的主要鈕：舊頁用 .acct-bar/.account-bar 後代選擇器，特異性比上面高，這裡補齊 */
.acct-bar .acct-btn.primary,.account-bar .acct-btn.primary,
.head-right .acct-btn.primary,header .acct-btn.primary{
  background:transparent!important;background-image:none!important;
  border:1px solid var(--gold)!important;color:var(--gold)!important;font-weight:400!important}
.acct-bar .acct-btn.primary:hover,.account-bar .acct-btn.primary:hover,
.head-right .acct-btn.primary:hover,header .acct-btn.primary:hover{
  background:var(--gold)!important;color:var(--ink)!important}
/* widget 的帳號列是 .acct-bar button.primary（不是 .acct-btn） */
.acct-bar button.primary,.account-bar button.primary{
  background:transparent!important;background-image:none!important;
  border:1px solid var(--gold)!important;color:var(--gold)!important;font-weight:400!important;
  letter-spacing:.12em!important}
.acct-bar button.primary:hover,.account-bar button.primary:hover{
  background:var(--gold)!important;color:var(--ink)!important;filter:none!important}
/* auth.js 注入的登入視窗按鈕 */
.fa-btn-gold{background:transparent!important;background-image:none!important;
  border:1px solid var(--gold)!important;color:var(--gold)!important;font-weight:400!important}
.fa-btn-gold:hover{background:var(--gold)!important;color:var(--ink)!important}