/* ============================================================
   玄学工具箱 · 站点级增强样式
   - 统一全站卡片、输入、按钮、入口与移动端排版
   - 轻量覆盖各模块内联样式，减少杂乱功能感
   ============================================================ */

:root{
  --xz-radius:18px;
  --xz-radius-sm:12px;
  --xz-line:rgba(212,168,76,.20);
  --xz-line-strong:rgba(212,168,76,.42);
  --xz-card:rgba(255,244,214,.055);
  --xz-card-2:rgba(255,255,255,.018);
  --xz-gold:#d4a84c;
  --xz-gold-soft:#e8cd8a;
  --xz-gold-bright:#f4e3b2;
  --xz-paper:#efe6d2;
  --xz-muted:#9a8f78;
  --xz-shadow:0 18px 46px rgba(0,0,0,.36);
  /* 排盘结果排版增强用 token */
  --xz-serif:"Songti SC","Noto Serif CJK SC","Source Han Serif SC","SimSun","STSong",serif;
  --xz-read:#ece1c9;                  /* 命理读文正文（比 paper 略暖亮，长文更省眼） */
  --xz-label:#8d8268;                 /* 数据条目标签色 */
  --xz-rule:rgba(212,168,76,.20);     /* 发丝分隔线 */
  --xz-rule-soft:rgba(212,168,76,.10);
  --xz-good:#74b982;
  --xz-bad:#d26b5d;
  --xz-blue:#7aa7d9;
}

::selection { background: rgba(212, 168, 76, .30); color: #fff5da; }
::-moz-selection { background: rgba(212, 168, 76, .30); color: #fff5da; }

html{scroll-behavior:smooth}
* { scrollbar-width: thin; scrollbar-color: rgba(212,168,76,.34) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(212,168,76,.42), rgba(212,168,76,.20));
  border-radius: 9px; border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(212,168,76,.6); background-clip: padding-box; }

body{letter-spacing:.01em}
body > #app.app-shell, body > main#app, .shell{
  width:min(100%, 720px) !important;
  max-width:720px !important;
  padding-left:max(16px, env(safe-area-inset-left)) !important;
  padding-right:max(16px, env(safe-area-inset-right)) !important;
}

.card,.today,.ref,.entry,.result-tabs,.primary-gua,.gua-card,.qm-cell,.hf-main,.hf-del,.door-item,.dir-list div,.detail-lines div,.rel-row,.ty-card,.guide-card{
  border-color:var(--xz-line) !important;
  border-radius:var(--xz-radius) !important;
  background:linear-gradient(155deg,var(--xz-card),var(--xz-card-2) 72%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset;
}
.card,.today,.result-card{box-shadow:var(--xz-shadow),0 1px 0 rgba(255,255,255,.04) inset}

.topbar{position:sticky;top:0;z-index:20;margin:0 -6px 4px;padding:10px 6px 8px !important;background:linear-gradient(180deg,rgba(16,13,10,.94),rgba(16,13,10,.72) 72%,transparent);backdrop-filter:blur(12px)}
.back,.ghost,.solid,.cast-btn,.seg-btn,.rt-btn,.tg-chip,.dong-chip,.hm-item,.hf-main,.hf-del,.extra-toggle,.link-btn{touch-action:manipulation}
.fld input,.num-grid input,input[type="text"],input[type="number"],input[type="date"],input[type="datetime-local"],input[type="time"],input[type="search"]{
  min-height:46px !important;border-radius:var(--xz-radius-sm) !important;border-color:var(--xz-line) !important;background:rgba(0,0,0,.24) !important;
}
input[type="date"],input[type="datetime-local"],input[type="time"]{
  color-scheme:dark; position:relative; padding-right:12px !important;
  border:1px solid var(--xz-line) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 20px rgba(0,0,0,.12);
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
input[type="date"]:focus,input[type="datetime-local"]:focus,input[type="time"]:focus{
  border-color:var(--xz-line-strong) !important;
  box-shadow:0 0 0 3px rgba(212,168,76,.12),inset 0 1px 0 rgba(255,255,255,.06);
  outline:none;
}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="datetime-local"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.88; cursor:pointer; filter:sepia(1) saturate(1.8) hue-rotate(350deg) brightness(1.05);
}
.xz-time-tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px;justify-content:flex-end}
.xz-time-tools button{
  min-height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(212,168,76,.26);
  background:rgba(255,244,214,.045);color:var(--xz-gold-soft);font-size:12px;letter-spacing:.04em;
  touch-action:manipulation;
}
.xz-time-tools button:active{transform:scale(.97)}
.xz-time-tools .xz-time-primary{border-color:rgba(212,168,76,.46);background:rgba(212,168,76,.14)}
.xz-time-field{position:relative}
.cast-btn,.solid{border-radius:14px !important;box-shadow:0 10px 28px rgba(212,168,76,.24),inset 0 1px 0 rgba(255,255,255,.36) !important}
.ghost{border-radius:12px !important;background:rgba(255,244,214,.045) !important}

.meta-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
/* 操作按钮：随盘面内容排布的行内按钮（与六爻排盘一致），不再悬浮遮挡结果 */
.result-actions{position:static !important;bottom:auto !important;z-index:auto;margin:16px 0 2px !important;padding:0 !important;background:none !important;backdrop-filter:none !important}
.result-actions .ghost,.result-actions .solid{min-height:46px;display:flex;align-items:center;justify-content:center}
.hint,.note,.foot-note{color:var(--xz-muted) !important}
.sec-h{margin-top:14px !important}
.narrative p{line-height:1.85 !important}
.xz-query-show{
  margin:12px 0 4px;padding:12px 14px;border-radius:16px;border:1px solid rgba(212,168,76,.42);
  background:linear-gradient(135deg,rgba(212,168,76,.18),rgba(255,244,214,.055));
  color:var(--xz-gold-soft);font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:18px;font-weight:800;line-height:1.7;
  letter-spacing:.06em;box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
}
.xz-query-show span{display:inline-block;margin-right:16px;color:#fff2c7;text-shadow:0 0 14px rgba(212,168,76,.22)}
.xz-query-show b{color:var(--xz-gold-soft);font-weight:900}
@media (max-width:520px){.xz-query-show{font-size:17px;padding:11px 12px}.xz-query-show span{display:block;margin-right:0;margin-bottom:2px}}

/* 大胆瘦身：移除低频辅助区，只保留核心录入、排盘、解析、复制 */
.hist-mini,details.ref,.foot-note,.extra-toggle,.gua-pair,[data-act="sample"]{display:none !important}
.card > .hint,.panel > .hint,.random-panel > .hint{display:none !important}
.row-btns:empty{display:none !important}
.row-btns{margin-bottom:4px !important}
.result-tabs{margin-top:2px !important}

@media (min-width:680px){.entries{grid-template-columns:repeat(3,1fr) !important}.entry.feature{grid-column:1 / -1}.qm-grid{min-width:0 !important}}
@media (max-width:520px){
  body > #app.app-shell, body > main#app, .shell{padding-left:14px !important;padding-right:14px !important}
  .entries{grid-template-columns:1fr 1fr !important;gap:10px !important}
  .entry{padding:16px 10px 14px !important;gap:8px !important}
  .entry.feature{min-height:auto !important;padding:18px 14px !important}
  .entry-mark{width:46px !important;height:46px !important;font-size:21px !important}
  .entry-title{font-size:17px !important;letter-spacing:2px !important;text-indent:2px !important}
  .entry-desc{font-size:10.5px !important;line-height:1.55 !important}
  .meta-grid{grid-template-columns:1fr !important}
  .result-actions{grid-template-columns:1fr 1fr !important}
  .gua-trio,.guidance-grid{grid-template-columns:1fr !important}
}
@media (max-width:390px){.entries{grid-template-columns:1fr !important}.result-actions{grid-template-columns:1fr !important}.hero-title{font-size:36px !important}}

/* 轻量提示气泡（复制摘要等） */
.xz-toast{
  position:fixed;left:50%;bottom:max(26px,env(safe-area-inset-bottom));z-index:10000;transform:translate(-50%,12px);
  padding:9px 14px;border-radius:999px;border:1px solid rgba(212,168,76,.34);background:rgba(18,15,11,.88);
  color:var(--xz-gold-soft);box-shadow:0 12px 32px rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
  backdrop-filter:blur(10px);font-size:13px;
}
.xz-toast.show{opacity:1;transform:translate(-50%,0)}
@media print{.xz-fab,.xz-time-tools,.topbar,.xp-top{display:none !important}body{background:#fff !important;color:#111 !important}}

/* 悬浮操作区：固定左下，附加到 <body>，#app 重渲染不受影响 */
.xz-fab {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 9998;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.xz-fab button {
  pointer-events: auto;
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; color: #f1e2bb;
  font-family: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  font-size: 18px; line-height: 1;
  border: 1px solid rgba(212,168,76,.42);
  background:
    radial-gradient(circle at 34% 28%, rgba(212,168,76,.22), rgba(20,16,12,0) 70%),
    rgba(18,15,11,.74);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 10px 26px rgba(0,0,0,.46), inset 0 0 0 1px rgba(212,168,76,.10);
  transition: transform .26s cubic-bezier(.2,.7,.2,1), border-color .26s ease, opacity .3s ease, box-shadow .26s ease;
}
.xz-fab button:hover {
  transform: translateY(-3px); border-color: rgba(212,168,76,.7);
  box-shadow: 0 16px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(212,168,76,.18);
}
.xz-fab button:active { transform: translateY(-1px) scale(.96); }
.xz-fab .xz-home { font-size: 20px; }

/* 返回顶部：默认隐藏，滚动后淡入 */
.xz-fab .xz-top { opacity: 0; transform: translateY(10px) scale(.85); pointer-events: none; }
.xz-fab.show-top .xz-top { opacity: 1; transform: none; pointer-events: auto; }

/* 进入页面时的轻微淡入（仅作用于带 #app 的模块外壳） */
@media (prefers-reduced-motion: no-preference) {
  body > #app.app-shell, body > main#app { animation: xzFade .5s ease both; }
  @keyframes xzFade { from { opacity: .35; } to { opacity: 1; } }
}

@media (max-width: 380px) {
  .xz-fab button { width: 41px; height: 41px; font-size: 17px; }
}

/* ============================================================
   排盘结果排版增强 v2.5（站点级 · 全部工具统一加载，最后生效）
   ------------------------------------------------------------
   目标：在「不改动任何模块盘面几何结构」的前提下，统一提升排盘
   结果的标题层级、数据条目、命理读文与结果头区的排版质感。
   · 仅作用于结果相关类，录入表单不受影响。
   · 沿用全站「金墨古典命理」识别（墨底 / 鎏金 / 宋体 / 暖纸文字）。
   · 同覆盖两套类名体系：System A(.sec-h/.meta-grid/.narrative…) 与
     System B(.xp-section-title/.xp-meta/.zw-…)，并兼顾梅花/塔罗/占星。
   签名元素：账册式「数据条目」——标签 · 一道鎏金发丝线 · 放大数值，
   呼应命理排盘罗列天地之数的本意；其余一律克制。
   ============================================================ */

/* —— 1. 结果区段标题：统一「古籍小标题」体例 —— */
.sec-h,
.xp-section-title,
.eb-title{
  font-family:var(--xz-serif) !important;
  letter-spacing:.16em;
  color:var(--xz-gold-soft) !important;
  display:flex;align-items:center;gap:9px;
  margin:18px 0 11px !important;
  font-weight:700;
}
/* 标题前的鎏金刻度（统一替换/补齐各体系原有标记） */
.sec-h::before,
.xp-section-title::before,
.eb-title::before{
  content:"";flex:0 0 auto;
  width:3px;height:1em;border-radius:2px;
  background:linear-gradient(180deg,var(--xz-gold-bright),var(--xz-gold) 62%,#9a7330);
  box-shadow:0 0 8px rgba(212,168,76,.35);
}
/* 标题后极淡延伸细线，收束横向留白（克制，不喧宾夺主） */
.sec-h::after,
.xp-section-title::after{
  content:"";flex:1 1 auto;height:1px;margin-left:2px;
  background:linear-gradient(90deg,var(--xz-rule),transparent);opacity:.7;
}

/* —— 2. 数据条目「账册行」：标签 → 发丝线 → 数值（签名）—— */
/* 各体系「上标签下数值」统计格（仅施加于已确认 span→b 顺序者） */
.meta-grid>div:not(.pillars),
.xp-meta>div,
.xp-mini,
.jd-yong>div{
  position:relative;
  padding:11px 12px !important;
  border-radius:14px !important;
  transition:border-color .2s ease,background .2s ease;
}
.meta-grid>div:not(.pillars):hover,
.xp-meta>div:hover,
.xp-mini:hover,
.jd-yong>div:hover{ border-color:var(--xz-line-strong) !important; }
/* 标签：小号 · 描边字距 · 下压一道鎏金发丝线 */
.meta-grid>div:not(.pillars)>span,
.xp-meta>div>span,
.xp-mini>span,
.jd-yong>div>span{
  display:block;
  font-size:10.5px !important;
  letter-spacing:.12em;
  color:var(--xz-label) !important;
  padding-bottom:6px;
  margin-bottom:7px !important;
  border-bottom:1px solid var(--xz-rule);
}
/* 数值：放大 · 宋体 · 等宽数字，盘面读数更挺括 */
.meta-grid>div:not(.pillars)>b,
.xp-meta>div>b,
.xp-mini>b,
.jd-yong>div>b{
  display:block;
  font-family:var(--xz-serif);
  font-size:15px !important;
  font-weight:700 !important;
  color:var(--xz-paper) !important;
  line-height:1.4;
  font-variant-numeric:tabular-nums;
}
.jd-yong>div small{ margin-top:5px !important; }
/* 行式数据（占星行星/相位/四化行等）：发丝分隔 + 等宽对齐，不做列分隔 */
.pl-row,.ft-row,.eb-row,.dc-head{ border-color:var(--xz-rule) !important; }
.pl-row b,.ft-row b,.eb-row b{ font-variant-numeric:tabular-nums; }

/* —— 3. 命理读文：命诗/卦辞/提纲（仅 .narrative，避免误伤小字注释）—— */
.narrative{ margin:2px 0 4px; }
.narrative p{
  font-family:var(--xz-serif) !important;
  font-size:14.5px !important;
  line-height:1.98 !important;
  color:var(--xz-read) !important;
  letter-spacing:.015em;
  margin:0 0 11px !important;
  text-align:justify;text-justify:inter-character;
  hanging-punctuation:allow-end;
}
.narrative p:last-child{ margin-bottom:2px !important; }
/* 首段（多为命诗/卦辞主文）：略大 · 暖金 · 起一道引文金线 */
.narrative p:first-child{
  font-size:15.5px !important;
  color:var(--xz-gold-soft) !important;
  padding-left:13px;
  border-left:2px solid var(--xz-line-strong);
  line-height:2.04 !important;
}

/* —— 4. 结果头区：印章 / 大字号 / 分隔（增一分仪式感，仍克制）—— */
.result-hero{ position:relative;overflow:hidden; }
.result-hero::before{                 /* 大字号后极淡鎏金光晕 */
  content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);
  width:210px;height:118px;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 42%,rgba(212,168,76,.16),transparent 70%);
}
.rh-name{ position:relative;text-shadow:0 0 22px rgba(212,168,76,.18); }
.rh-sub{ position:relative; }
/* 圆形印记（紫微/八字等）补一圈外光 */
.xp-seal{ box-shadow:0 0 0 1px rgba(212,168,76,.42),0 0 22px rgba(212,168,76,.20),0 14px 32px rgba(0,0,0,.4) !important; }
.xp-hero h1,.xp-result-head h2{ font-family:var(--xz-serif) !important;letter-spacing:.12em; }
.xp-hero h1{
  background:linear-gradient(176deg,var(--xz-gold-bright),var(--xz-gold) 60%,#9a7330);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-rule{ opacity:.85; }

/* —— 5. 结果 Tabs：分段控件细化（两套体系）—— */
.result-tabs{ padding:5px !important; }
.rt-btn,.xp-tabs button{ transition:color .2s ease,background .2s ease,box-shadow .2s ease; }
.rt-btn:not(.on):active,.xp-tabs button:not(.on):active{ transform:scale(.98); }
.rt-btn.on{ box-shadow:0 5px 14px rgba(212,168,76,.26),inset 0 1px 0 rgba(255,255,255,.3) !important; }
.xp-tabs button.on{ box-shadow:0 4px 12px rgba(212,168,76,.18); }

/* —— 6. 盘面单元：仅排版/留白/分隔微调，绝不改几何结构 —— */
.zw-foot,.stem-row{ border-top-color:var(--xz-rule) !important; }
.zw-foot b,.god,.door{ font-family:var(--xz-serif); }
.zw-cell.ming,.lr-cell.gui,.qm-cell.leader{ box-shadow:inset 0 0 0 1px var(--xz-line-strong); }
.gua-card b,.primary-gua b{ font-family:var(--xz-serif); }
.door-item{ border-left-width:3px !important; }
.door-item b{ font-family:var(--xz-serif); }

/* —— 7. 标签/徽标统一字距（跨工具一致）—— */
.xp-tag,.chip,.el-tag,.daily-tag,.lunar-tag,.badge,.sy,.role{ letter-spacing:.04em; }

/* —— 8. 结果区入场（尊重 reduced-motion；仅头区与结果卡，避免盘面位移）—— */
@media (prefers-reduced-motion: no-preference){
  .result-card,.xp-result-head{ animation:xzResIn .5s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes xzResIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
}

/* —— 9. 响应式：小屏读文与数据条目 —— */
@media (max-width:520px){
  .narrative p{ font-size:14px !important;line-height:1.92 !important; }
  .narrative p:first-child{ font-size:14.8px !important; }
  .meta-grid>div:not(.pillars)>b,.xp-meta>div>b,.xp-mini>b{ font-size:14.5px !important; }
  .sec-h,.xp-section-title{ margin-top:15px !important; }
}

/* —— 10. 打印：结果以浅底深字清晰输出 —— */
@media print{
  .result-card,.xp-card,.card{ box-shadow:none !important;border-color:#bbb !important;background:#fff !important; }
  .narrative p,.meta-grid>div:not(.pillars)>b,.xp-meta>div>b{ color:#1a1a1a !important; }
  .meta-grid>div:not(.pillars)>span,.xp-meta>div>span{ color:#555 !important;border-bottom-color:#ccc !important; }
  .sec-h,.xp-section-title,.rh-name,.xp-hero h1{ color:#7a5a18 !important;-webkit-text-fill-color:#7a5a18 !important; }
}