/* ===========================================================
   法宝库 · 共用外框
   -----------------------------------------------------------
   梅花 / 十二长生 / 奇门手记 三件法宝共用的视觉与交互骨架。
   色板沿用站点（assets/css/custom.css）：紫夜底、月白字、
   紫作强调、金只落在每屏最要紧的那一处结果上。

   目录
     〇 token
     一 基础
     二 顶栏 · 法宝切换（手机端沉到底部）
     三 页首（印 + 标题）
     四 「此刻」面板：时间 + 起法 + 动作
     五 通用构件：按钮、分段、卡片、输入、提示
   =========================================================== */

/* 〇 token ------------------------------------------------- */
:root {
  --bg:     #17131F;   /* 紫夜 */
  --bg-2:   #1E1828;   /* 卡片 */
  --bg-3:   #241D31;   /* 卡片内凹 / 输入框 */
  --rule:   #30283F;   /* 线 */
  --rule-2: #3E3452;
  --fg:     #EDEBF2;   /* 月白 */
  --fg-2:   #CFCAD9;
  --muted:  #A39DB0;   /* 雾 */
  --faint:  #6E6780;
  --zi:     #7A5BC0;   /* 紫府：按钮、印 */
  --zi-2:   #A994E0;   /* 紫，夜底写字 */
  --jin:    #D9AE4E;   /* 金：一屏一处 */
  --zhu:    #E07A62;   /* 朱：凶、错、动 */
  --qing:   #8FB0D8;   /* 青：门、水意 */
  --lv:     #8DBF97;   /* 绿：吉、验中 */

  /* 五行 */
  --wx-mu:   #8DBF97;
  --wx-huo:  #E07A62;
  --wx-tu:   #C9A578;
  --wx-jin:  #DCD8E6;
  --wx-shui: #7FA3D6;

  --font-title: "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;
  --font-body:  "LXGW WenKai TC", "Kaiti SC", "STKaiti", var(--font-title);
  --font-mark:  "Archivo", "Helvetica Neue", Arial, sans-serif;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --top-h: 56px;
  --nav-h: 62px;
  color-scheme: dark;
}

/* 一 基础 -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* 夜空：两团极淡的紫光，不用纸纹 */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60vw 40vh at 85% -10%, rgba(122, 91, 192, .14), transparent 70%),
    radial-gradient(50vw 40vh at -10% 110%, rgba(122, 91, 192, .08), transparent 70%);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--zi-2); }
:focus-visible { outline: 2px solid var(--zi-2); outline-offset: 2px; }
.fb-main {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  padding: 28px 32px 72px;
}
[hidden] { display: none !important; }

/* 二 顶栏 -------------------------------------------------- */
.fb-top {
  position: sticky; top: 0; z-index: 40;
  height: var(--top-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 32px;
  background: rgba(23, 19, 31, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.fb-back {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none; color: var(--fg); white-space: nowrap;
}
.fb-back .mark { font-family: var(--font-mark); font-weight: 800; font-stretch: 125%; font-size: 15px; letter-spacing: .02em; }
.fb-back .ge { font-family: var(--font-title); font-weight: 600; color: var(--zi-2); font-size: 15px; letter-spacing: .1em; }
.fb-back .ku { font-family: var(--font-title); color: var(--muted); font-size: 13px; letter-spacing: .15em; }
.fb-back .ku::before { content: "·"; margin-right: 10px; color: var(--faint); }
.fb-back:hover .ku { color: var(--fg); }

.fb-tabs { margin-left: auto; display: flex; gap: 4px; }
.fb-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  text-decoration: none; color: var(--muted);
  font-family: var(--font-title); font-size: 14px; letter-spacing: .15em;
  transition: color .2s, background .2s;
}
.fb-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.fb-tab:hover { color: var(--fg); background: var(--bg-3); }
.fb-tab.on { color: var(--fg); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--rule-2); }
.fb-tab.on svg { color: var(--zi-2); }

/* 三 页首 -------------------------------------------------- */
.fb-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.fb-seal {
  width: 46px; height: 46px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--zi); color: #fff; border-radius: 6px;
  font-family: var(--font-title); font-weight: 900; font-size: 26px;
  position: relative; transform: rotate(-3deg);
  box-shadow: 0 6px 20px -6px rgba(122, 91, 192, .7);
}
.fb-seal::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.28); border-radius: 3px; }
.fb-title {
  font-family: var(--font-title); font-weight: 600;
  font-size: 30px; letter-spacing: .25em; line-height: 1.2;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.fb-title .en { font-family: var(--font-mark); font-weight: 500; font-stretch: 125%; font-size: 10px; letter-spacing: .3em; color: var(--faint); }
.fb-sub { color: var(--muted); font-size: 14px; letter-spacing: .12em; margin-top: 4px; }

/* 四 「此刻」面板 ------------------------------------------- */
.fb-now {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 28px;
  padding: 20px 24px;
  background: var(--bg-2);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  margin-bottom: 22px;
}
.fb-now::before {
  content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px;
  background: var(--zi); border-radius: 0 3px 3px 0;
}
.fb-now-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fb-now-ctrl { display: flex; flex-direction: column; gap: 10px; align-items: stretch; min-width: 260px; }
.fb-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-row > .grow { flex: 1; min-width: 0; }

.fb-when { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 14px; letter-spacing: .08em; }
.fb-tag {
  display: inline-block; padding: 1px 10px; border-radius: 999px;
  font-family: var(--font-title); font-size: 12px; letter-spacing: .15em;
  background: rgba(122, 91, 192, .22); color: var(--zi-2); white-space: nowrap;
}
/* 每屏唯一的金：此刻最要紧的结论 */
.fb-key { font-family: var(--font-title); font-size: 20px; letter-spacing: .12em; color: var(--fg); line-height: 1.5; }
.fb-key strong, .fb-key .jin { color: var(--jin); font-weight: 600; }
.fb-key .sep { color: var(--faint); margin: 0 .5em; }
.fb-note { font-size: 13px; color: var(--muted); letter-spacing: .05em; }
.fb-fine { font-size: 12px; color: var(--faint); line-height: 1.7; }
.good { color: var(--lv); } .warn { color: var(--jin); } .bad { color: var(--zhu); }

/* 四柱：横排四格 */
.fb-pillars { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-pillar {
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 46px; padding: 4px 8px 5px;
  background: var(--bg-3); border-radius: var(--r-sm);
  line-height: 1.25;
}
.fb-pillar small { font-size: 10px; color: var(--faint); letter-spacing: .2em; }
.fb-pillar b { font-family: var(--font-title); font-weight: 600; font-size: 16px; letter-spacing: .1em; color: var(--fg-2); }

/* 五 通用构件 ---------------------------------------------- */
.fb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--rule-2); background: var(--bg-3); color: var(--fg-2);
  font-family: var(--font-title); font-size: 14px; letter-spacing: .15em; white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s, opacity .2s;
}
.fb-btn:hover { border-color: var(--zi-2); color: var(--fg); }
.fb-btn.primary { background: var(--zi); border-color: var(--zi); color: #fff; }
.fb-btn.primary:hover { opacity: .9; }
.fb-btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.fb-btn.ghost:hover { color: var(--fg); }
.fb-btn.block { width: 100%; padding: 12px; font-size: 15px; letter-spacing: .3em; }

.fb-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-3); border: 1px solid var(--rule); border-radius: 999px; }
.fb-seg button {
  flex: 1; padding: 6px 14px; border-radius: 999px; position: relative;
  color: var(--muted); font-family: var(--font-title); font-size: 13px; letter-spacing: .15em; white-space: nowrap;
}
.fb-seg button.on { background: var(--zi); color: #fff; }
.fb-seg .badge {
  display: inline-block; margin-left: 4px; min-width: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--zhu); color: #fff; font-size: 11px; letter-spacing: 0; line-height: 18px;
}

.fb-input, .fb-main input:not([type=checkbox]):not([type=radio]), .fb-main textarea, .fb-main select {
  background: var(--bg-3); color: var(--fg);
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: 14px; min-width: 0;
}
.fb-main input:focus, .fb-main textarea:focus, .fb-main select:focus { outline: none; border-color: var(--zi-2); }
.fb-main input[type=datetime-local] { font-family: var(--font-title); letter-spacing: .05em; }

.fb-card { background: var(--bg-2); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.fb-empty { text-align: center; color: var(--faint); padding: 40px 10px; font-family: var(--font-title); font-size: 13px; letter-spacing: .25em; line-height: 2.2; }
.fb-label { display: block; font-family: var(--font-title); font-size: 12px; color: var(--muted); letter-spacing: .2em; margin-bottom: 6px; }

.fb-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 8px);
  background: var(--fg); color: var(--bg); padding: 9px 20px; border-radius: 999px;
  font-size: 14px; letter-spacing: .08em; opacity: 0; pointer-events: none; z-index: 90;
  transition: opacity .25s, transform .25s;
}
.fb-toast.show { opacity: 1; transform: translate(-50%, 0); }

.fb-foot { margin-top: 36px; text-align: center; color: var(--faint); font-size: 12px; letter-spacing: .2em; }

@keyframes fbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 手机：法宝切换沉到底部，面板改为上下排 --------------------- */
@media (max-width: 860px) {
  .fb-main { padding: 18px 16px calc(var(--nav-h) + 36px + env(safe-area-inset-bottom)); }
  /* 顶栏不能带 backdrop-filter，否则底栏的 fixed 会被它困住 */
  .fb-top { padding: 0 16px; height: 48px; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .fb-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0; gap: 0;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(30, 24, 40, .96); border-top: 1px solid var(--rule);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .fb-tab { flex: 1; flex-direction: column; justify-content: center; gap: 3px; border-radius: 0; font-size: 12px; letter-spacing: .1em; padding: 6px 0; }
  .fb-tab svg { width: 20px; height: 20px; }
  .fb-tab:hover, .fb-tab.on { background: none; box-shadow: none; }
  .fb-tab.on { color: var(--fg); }
  .fb-tab.on::before { content: ""; position: absolute; top: 0; width: 28px; height: 2px; background: var(--zi-2); border-radius: 0 0 2px 2px; }
  .fb-tab { position: relative; }
  .fb-head { gap: 12px; margin-bottom: 16px; }
  .fb-seal { width: 38px; height: 38px; font-size: 21px; }
  .fb-title { font-size: 22px; gap: 10px; }
  .fb-sub { font-size: 12px; }
  .fb-now { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .fb-now-ctrl { min-width: 0; }
  .fb-key { font-size: 17px; }
  .fb-toast { bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }