/* ============================================================
   大六壬前端样式（从 index.html 抽出）
   保留所有原有色调、字体、响应式（竖屏/横屏/小屏）
============================================================ */

/* 自托管"霞鹜文楷 LXGW WenKai" Web 字体（97 个 woff2 子集 + unicode-range 拆分按需加载）
   解决移动端无系统楷体的问题；与项目同源 CDN 分发，国内国外用户体验一致 */
@import url('../fonts/lxgw-wenkai/lxgwwenkai-regular.css');

:root {
  /* 页面背景：白色（用户偏好）；卡片仍用米色形成层次 */
  --bg: #ffffff;
  --bg-card: #ece2cf;
  --border: #d8ccb8;
  --border-inner: #cfc3af;
  --shadow-main: rgba(80,60,30,0.18);
  --shadow-sub: rgba(80,60,30,0.12);
  --shadow-light: rgba(80,60,30,0.1);
  --text-dark: #2a1a0a;
  --text-mid: #4a3a28;
  --text-muted: #7a6a52;
  /* 五行配色：木绿 / 火红 / 土灰褐 / 金金黄 / 水靛蓝（土↔金已对调） */
  --wx-wood: #0e9b14;
  --wx-fire: #c0392b;
  --wx-earth: #8a7a6a;
  --wx-metal: #b8860b;
  --wx-water: #137ec5;
  /* 12 长生角标专用色：靛紫（"五色之外"独立色，与五行/褐字系全部隔离，
     传统玄学"紫气东来"庄重配色，白底对比度高） */
  --cs-zhangsheng: #5e3a87;
  --font-info: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  /* font-kai: 优先 Web 字体 LXGW WenKai（自托管，所有平台一致）→ 系统楷体兜底 */
  --font-kai: 'LXGW WenKai', 'KaiTi', 'STKaiti', 'Kaiti SC', 'BiauKai', cursive, serif;

  /* ============ 字号体系 — 移动端默认（放大版）============ */
  --fs-tianpan: 30px;          /* 4×4 天盘字 */
  --fs-dipan: 19px;
  --fs-tianjiang: 15px;        /* 4×4 天将 */
  --fs-zhangsheng: 12px;       /* 4×4 长生角标 */
  --fs-shensha: 10px;          /* 4×4 神煞角标 */
  --fs-keti-value: 24px;       /* 课体名 */
  --fs-keti-label: 12px;
  --fs-ke-shang: 22px;         /* 四课上字 */
  --fs-ke-xia: 16px;
  --fs-ke-tianjiang: 14px;
  --fs-ke-label: 11px;
  --fs-chuan-zhi: 24px;        /* 三传地支 */
  --fs-chuan-tianjiang: 15px;
  --fs-chuan-liuqin: 13px;
  --fs-chuan-label: 11px;
  --fs-sz-gan: 20px;           /* 顶部四柱 */
  --fs-sz-zhi: 20px;
  --fs-sz-label: 10px;
  --fs-bottom-bar: 13px;       /* 底部信息栏 */
  --fs-section-title: 13px;
  --fs-nav-item: 11px;         /* 底部 4-tab 文字 */
  --fs-nav-icon: 20px;
  --fs-info-date: 13px;
  --fs-info-extra: 12px;
}

/* ============ PC 端（>=1024px）字号放大版 ============ */
@media (min-width: 1024px) {
  :root {
    --fs-tianpan: 42px;
    --fs-dipan: 26px;
    --fs-tianjiang: 19px;
    --fs-zhangsheng: 14px;
    --fs-shensha: 12px;
    --fs-keti-value: 34px;
    --fs-keti-label: 14px;
    --fs-ke-shang: 28px;
    --fs-ke-xia: 20px;
    --fs-ke-tianjiang: 17px;
    --fs-ke-label: 13px;
    --fs-chuan-zhi: 32px;
    --fs-chuan-tianjiang: 19px;
    --fs-chuan-liuqin: 16px;
    --fs-chuan-label: 13px;
    --fs-sz-gan: 26px;
    --fs-sz-zhi: 26px;
    --fs-sz-label: 12px;
    --fs-bottom-bar: 16px;
    --fs-section-title: 15px;
    --fs-nav-item: 14px;
    --fs-nav-icon: 26px;
    --fs-info-date: 15px;
    --fs-info-extra: 14px;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-info);
  background: var(--bg);
  color: var(--text-dark);
  min-height: 100vh;
  min-height: 100dvh;  /* iOS Safari URL bar 修正：dvh 是真正的可视高度 */
}
.main-container {
  width: 100%; max-width: 500px; margin: 0 auto;
  display: flex; flex-direction: column; min-height: 100vh;
  min-height: 100dvh;
  padding: 0 6px;
}

/* 通用卡片：背景白色，靠边框+阴影区分层次 */
.float-card {
  background: #ffffff; border: 1px solid var(--border);
  box-shadow: 0 2px 6px var(--shadow-main), 0 1px 2px var(--shadow-sub);
  border-radius: 8px;
}
.cell-style {
  background: #ffffff; border: 1px solid var(--border-inner);
  box-shadow: 0 1px 3px var(--shadow-light); border-radius: 5px;
}

/* 标题栏 */
.title-bar {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px; margin: 6px 0 4px; position: relative;
}
.title-bar .title-left { position: absolute; left: 14px; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.title-bar .app-title { font-size: 17px; font-weight: bold; font-family: var(--font-kai); color: var(--text-dark); letter-spacing: 3px; }
.title-bar .title-right { position: absolute; right: 14px; display: flex; gap: 14px; color: var(--text-muted); font-size: 16px; cursor: pointer; }
/* title-bar 右侧的"保存/编辑"档案按钮 — 与"占卜时间"按钮同款（灰白底，紧凑）
   字号：竖屏 11px、横屏 9px；padding/line-height 配合，确保始终在 title-bar 内不溢出 */
.title-bar .title-save-btn {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  padding: 3px 8px; font-size: 11px; font-family: var(--font-info);
  line-height: 1.2;
  background: var(--bg-card); color: var(--text-dark);
  border: 1px solid var(--border); border-radius: 5px;
  cursor: pointer; transition: all .2s;
  white-space: nowrap;
}
.title-bar .title-save-btn:hover { border-color: var(--wx-fire); color: var(--wx-fire); }
/* 横屏：title-bar 自身被压扁，按钮跟着缩到 9px */
@media (orientation: landscape) and (min-width: 480px) {
  .title-bar .title-save-btn { padding: 2px 6px; font-size: 9px; }
}

/* 五行颜色 */
.wx-wood { color: var(--wx-wood); }
.wx-fire { color: var(--wx-fire); }
.wx-earth { color: var(--wx-earth); }
.wx-metal { color: var(--wx-metal); }
.wx-water { color: var(--wx-water); }

/* ============================================================
   看盘 tab：日期信息 / 天地盘 / 四课三传 / 底部信息
============================================================ */
.info-card { padding: 8px 12px; margin: 0 0 4px; display: flex; gap: 10px; align-items: center; }
.info-left { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.info-date-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--fs-info-date); color: var(--text-muted); }
.info-date-row .date-val { color: var(--text-mid); }
/* 节气行：每组"节气名+时间"是不可拆整体；空间不够时整组一起换行 */
.info-jieqi-row { gap: 2px 8px; flex-wrap: wrap; }
.info-jieqi-row .jq-group { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.info-jieqi-row .jq-name { color: var(--wx-earth); font-weight: bold; font-family: var(--font-kai); letter-spacing: 1px; }
.info-jieqi-row .jq-time { color: var(--text-muted); }
.info-extra-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: var(--fs-info-extra); }
.info-extra-row .ex-label { color: var(--text-muted); }
/* ex-val 默认 #4a3a28 加粗（月将名等普通文字色），子 span 用 wxClass 覆盖（地支单独着色） */
.info-extra-row .ex-val { color: var(--text-mid); font-weight: bold; margin-left: 2px; }
.info-sizhu-row { display: flex; gap: 6px; flex-shrink: 0; border-left: 1px solid var(--border-inner); padding-left: 10px; }
.sizhu-col { display: flex; flex-direction: column; align-items: center; gap: 1px; }
/* 注意：sz-gan/sz-zhi 颜色由 :class="wxClass(p.gan/p.zhi)" 注入（wx-wood/fire/earth/metal/water），此处不写死 color */
.sizhu-col .sz-gan, .sizhu-col .sz-zhi { font-weight: bold; font-family: var(--font-kai); line-height: 1.2; }
.sizhu-col .sz-gan { font-size: var(--fs-sz-gan); }
.sizhu-col .sz-zhi { font-size: var(--fs-sz-zhi); }
.sizhu-col .sz-label { font-size: var(--fs-sz-label); color: var(--text-muted); line-height: 1; }

/* 天地盘 4×4 */
.tianpan-section { padding: 0 2px 4px; }
.tianpan-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: 4px; padding: 4px; width: 100%; aspect-ratio: 1 / 1;
}
/* 移动端无 padding（最大化天盘字号空间），PC 端 @media 加回 */
.grid-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; position: relative; min-width: 0; }
@media (min-width: 1024px) { .grid-cell { padding: 4px; } }
/* 长生角标：左上角竖排（如"沐浴"上下排，节省横向空间）— 用靛紫与五行色全部错开 */
.cell-zhangsheng {
  position: absolute; top: 2px; left: 3px;
  font-size: var(--fs-zhangsheng); font-weight: bold;
  font-family: var(--font-kai); line-height: 1; color: var(--cs-zhangsheng);
  writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 1px;
}
/* cell-tianjiang 不写默认 color，由 :class tianjiangWx 注入五行色 */
.cell-tianjiang { font-size: var(--fs-tianjiang); font-weight: bold; font-family: var(--font-kai); }
.cell-tianpan { font-size: var(--fs-tianpan); font-weight: bold; font-family: var(--font-kai); line-height: 1.1; }
.cell-dipan { font-size: var(--fs-dipan); font-family: var(--font-kai); font-weight: bold; }
.cell-jixiong-ji { color: var(--wx-wood); }
.cell-jixiong-xiong { color: var(--wx-fire); }
/* 大字右侧旬遁干（按 tianpan 反查）：贴在 cell-tianpan 大字水平居中右侧
   按天干本身五行色；"空"用黑色（旬空地支的天干位） */
.cell-tianpan-gan {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-dipan); font-weight: bold; font-family: var(--font-kai);
  line-height: 1; pointer-events: none;
}
.cell-tianpan-gan.is-kong { color: #000 !important; }

.center-merged {
  grid-column: 2 / 4; grid-row: 2 / 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
/* keti-label "课体"二字 — 与 section-title (四课/三传) 同款样式：金黄、楷体、letter-spacing 4 */
.center-merged .keti-label {
  font-size: var(--fs-section-title);
  color: var(--wx-earth);
  font-weight: bold;
  font-family: var(--font-kai);
  text-align: center;
  letter-spacing: 4px;
  margin-bottom: 4px;
}
.center-merged .keti-value { font-size: var(--fs-keti-value); font-weight: bold; color: var(--wx-fire); font-family: var(--font-kai); text-align: center; }

/* 四课 + 三传 */
.ke-chuan-row { display: flex; gap: 6px; padding: 0 2px 4px; }
.si-ke { padding: 6px; flex: 3; min-width: 0; }
.section-title { font-size: var(--fs-section-title); color: var(--wx-earth); font-weight: bold; font-family: var(--font-kai); margin-bottom: 4px; text-align: center; letter-spacing: 4px; }
.si-ke-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.ke-item { padding: 4px 2px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.ke-item .ke-label { font-size: var(--fs-ke-label); color: var(--text-muted); }
.ke-item .ke-dungan { font-size: var(--fs-ke-tianjiang); font-weight: bold; font-family: var(--font-kai); }
.ke-item .ke-dungan.is-kong { color: #000 !important; }
/* ke-tianjiang 不写默认 color，由 :class tianjiangWx 注入五行色 */
.ke-item .ke-tianjiang { font-size: var(--fs-ke-tianjiang); font-weight: bold; font-family: var(--font-kai); }
.ke-item .ke-shang { font-size: var(--fs-ke-shang); font-weight: bold; font-family: var(--font-kai); }
.ke-item .ke-xia { font-size: var(--fs-ke-xia); font-family: var(--font-kai); font-weight: bold; }

.san-chuan { padding: 6px; flex: 2; min-width: 0; }
.san-chuan-list { display: flex; flex-direction: column; gap: 4px; }
.chuan-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; }
.chuan-item .chuan-label { font-size: var(--fs-chuan-label); color: var(--text-muted); min-width: 28px; }
.chuan-item .chuan-dungan { font-size: var(--fs-chuan-tianjiang); font-weight: bold; font-family: var(--font-kai); }
.chuan-item .chuan-dungan.is-kong { color: #000 !important; }
.chuan-item .chuan-zhi { font-size: var(--fs-chuan-zhi); font-weight: bold; font-family: var(--font-kai); }
/* chuan-tianjiang 不写默认 color，由 :class tianjiangWx 注入五行色 */
.chuan-item .chuan-tianjiang { font-size: var(--fs-chuan-tianjiang); font-weight: bold; font-family: var(--font-kai); }
/* chuan-liuqin 统一深褐 #4a3a28 加粗 */
.chuan-item .chuan-liuqin { font-size: var(--fs-chuan-liuqin); color: var(--text-mid); font-weight: bold; margin-left: auto; }
/* 旬空虚线框：统一标在"被旬空命中的具体地支字"上（与 12 格 cell-dipan 一致）
   - 12 格：cell-dipan
   - 四课：ke-shang（上神字）
   - 三传：chuan-zhi（传支字） */
.cell-dipan.is-xunkong,
.ke-shang.is-xunkong,
.chuan-zhi.is-xunkong {
  border: 1.5px dashed var(--wx-fire);
  padding: 0 3px; border-radius: 3px;
  line-height: 1.1;
}

/* 底部信息栏 — 竖屏一行 4 项 flex 横排（横屏区段会改回 grid 2×2） */
.bottom-bar { padding: 6px 10px; margin: 0 2px 4px; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 4px 8px; overflow-x: auto; }
.bottom-bar .b-item { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-bottom-bar); white-space: nowrap; color: var(--text-mid); }
.bottom-bar .b-label { color: var(--text-muted); font-weight: bold; }
/* b-val 不写默认 color，由 :class wxClass 接管（wx-* 五行色）；wxClass 为空时继承 b-item 的 text-mid */
.bottom-bar .b-val { margin-left: 2px; font-weight: bold; }
/* 贵人 b-val：两 piece 横排紧贴（"子(阳)申(阴)"形式）— 用 inline 而不是 inline-flex，避免空白节点被当 flex item 折行 */
.bottom-bar .b-val-guiren { display: inline; white-space: nowrap; }
.bottom-bar .guiren-piece { display: inline; }
/* 阴/阳标记：比 small (0.7em) 大一档（0.85em），更易读 */
.bottom-bar .guiren-piece .ym-mark { font-size: 0.85em; color: var(--text-muted); font-weight: normal; vertical-align: baseline; }

/* 神煞行：bottom-bar 下方独立一行，列出 16 项神煞 + 对应字（地支或天干）
   原本挂在 12 格里的神煞已撤掉，集中在此处展示 */
.shensha-bar {
  padding: 6px 10px; margin: 0 2px 4px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
}
.shensha-bar .ss-label {
  font-size: var(--fs-bottom-bar); color: var(--wx-earth);
  font-family: var(--font-kai); font-weight: bold; letter-spacing: 1px;
  margin-right: 4px; flex-shrink: 0;
}
.shensha-bar .ss-item {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-size: var(--fs-shensha); padding: 1px 5px;
  border: 1px solid var(--border-inner); border-radius: 3px;
  background: var(--bg); white-space: nowrap;
}
.shensha-bar .ss-name { color: var(--text-mid); font-weight: bold; }
/* 对应字（地支/天干）：比 ss-name 大一档，更易读 */
.shensha-bar .ss-zi { font-family: var(--font-kai); font-weight: bold; font-size: 1.15em; }

/* 底部 4 tab 导航 — 所有屏宽都 fixed 悬浮在屏幕最下方
   理由：PC 端历史记录多时不能让 nav 被挤下去看不到，必须始终可见 */
.bottom-nav {
  display: flex; align-items: center; justify-content: space-around;
  padding: 6px 0 8px; border-top: 1px solid var(--border);
  background: var(--bg);
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -2px 8px rgba(80,60,30,0.12);
}
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-muted); font-size: var(--fs-nav-item); cursor: pointer; user-select: none; }
.nav-item.active { color: var(--wx-fire); }
.nav-item .nav-icon { font-size: var(--fs-nav-icon); line-height: 1; }

/* 主容器永久留 nav 高度的下边距（所有屏宽统一） */
.main-container { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }

/* 横屏 wrapper（竖屏时透明） */
.land-body { display: contents; }
.land-left { display: contents; }
.land-right { display: contents; }

/* 排盘 / 历史 / 我的 tab 长内容滚动（避免 picker 被底部 nav 遮挡） */
@media (max-width: 1023px) {
  .paipan-form, .history-list, .profile-tab-wrap, .history-empty {
    /* 这些 tab 内容本身没固定高度，main-container 已有 padding-bottom 留 nav 空间 */
    /* 自然滚动即可 */
  }
}

/* ============================================================
   排盘 tab：表单
   默认（竖屏）：flex column；wrapper display:contents 透明
   横屏（移动+PC）：grid 两栏 "time right / cast cast"
============================================================ */
.paipan-form { padding: 12px; margin: 4px 2px; display: flex; flex-direction: column; gap: 12px; }
.paipan-time-col, .paipan-right-col { display: contents; }
.paipan-right-col { /* 默认透明，只在横屏 grid 模式生效 */ }
.form-row { display: flex; flex-direction: column; gap: 4px; }
.form-row label { font-size: 12px; color: var(--text-muted); font-weight: bold; }
.form-row .input-with-btn { display: flex; gap: 6px; }
.form-row .input-with-btn input { flex: 1; }
.form-input, .form-row input, .form-row select {
  padding: 8px 10px; font-size: 14px; font-family: var(--font-info);
  background: var(--bg); border: 1px solid var(--border-inner);
  border-radius: 5px; color: var(--text-dark);
  width: 100%; transition: border-color .2s;
}
.form-input:focus { outline: none; border-color: var(--wx-fire); }
.btn {
  padding: 8px 14px; font-size: 14px; font-family: var(--font-info);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text-dark); cursor: pointer;
  transition: all .2s;
}
.btn:hover { border-color: var(--wx-fire); color: var(--wx-fire); }
.btn-primary { background: var(--wx-fire); color: #fff; border-color: var(--wx-fire); font-weight: bold; }
.btn-primary:hover { background: #a02c1f; color: #fff; }
.btn-block { width: 100%; padding: 10px 14px; font-size: 15px; }
.switch-row { display: flex; align-items: center; gap: 8px; }
.switch-row .switch-label { flex: 1; font-size: 13px; color: var(--text-mid); cursor: pointer; }
/* iOS 风格 toggle 开关：原 checkbox 隐藏，label 模拟外观 */
.switch-input { position: absolute; opacity: 0; pointer-events: none; }
.switch-toggle {
  flex-shrink: 0;
  width: 38px; height: 22px;
  background: #d8ccb8; border-radius: 22px;
  position: relative; cursor: pointer;
  transition: background .25s ease;
}
.switch-toggle::after {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  background: #ffffff; border-radius: 50%;
  top: 2px; left: 2px;
  transition: left .25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch-input:checked + .switch-toggle { background: var(--wx-fire); }
.switch-input:checked + .switch-toggle::after { left: 18px; }
.switch-input:focus-visible + .switch-toggle { outline: 2px solid var(--wx-fire); outline-offset: 2px; }

/* 城市选择触发器（点击弹 LocationPicker） */
.loc-trigger {
  padding: 10px 12px; background: var(--bg); border: 1px solid var(--border-inner);
  border-radius: 5px; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  transition: border-color .2s;
}
.loc-trigger:hover { border-color: var(--wx-fire); }
.loc-trigger .loc-meta { font-size: 11px; color: var(--text-muted); margin-left: 6px; }
.loc-trigger .loc-arrow { color: var(--text-muted); font-size: 16px; flex-shrink: 0; }

/* 城市搜索结果列表 */
.city-results { background: var(--bg); border: 1px solid var(--border-inner); border-radius: 5px; max-height: 240px; overflow-y: auto; margin-top: 4px; }
.city-result-item { padding: 8px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--border-inner); }
.city-result-item:last-child { border-bottom: none; }
.city-result-item:hover { background: var(--bg-card); }
.city-result-item .meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   历史 tab
============================================================ */
.history-list { padding: 6px 2px; display: flex; flex-direction: column; gap: 6px; }
.history-item { padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.history-item .h-seq {
  flex-shrink: 0; min-width: 36px; text-align: center;
  font-family: var(--font-kai); font-weight: bold;
  color: var(--wx-fire); font-size: 16px;
  padding: 4px 6px; border-right: 1px solid var(--border-inner);
}
.history-item .h-info { flex: 1; min-width: 0; }
.history-item .h-name { font-size: 14px; color: var(--wx-fire); font-weight: bold; font-family: var(--font-kai); letter-spacing: 1px; margin-bottom: 2px; }
.history-item .h-time { font-size: 13px; color: var(--text-mid); font-weight: bold; }
.history-item .h-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.history-item .h-actions { display: flex; gap: 6px; flex-shrink: 0; }
.history-empty { padding: 40px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ============================================================
   我的 tab
============================================================ */
.profile-section { padding: 12px; margin: 4px 2px; }
.profile-section h3 { font-size: 13px; color: var(--wx-earth); font-family: var(--font-kai); margin-bottom: 8px; letter-spacing: 2px; }
.profile-help { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.lang-switch { display: flex; gap: 8px; }
.lang-switch .lang-btn { flex: 1; padding: 8px; text-align: center; cursor: pointer; }
.lang-switch .lang-btn.active { background: var(--wx-fire); color: #fff; border-color: var(--wx-fire); }

/* 算法引擎切换:与语言切换同形态分段控件 */
.engine-switch { display: flex; gap: 8px; }
.engine-switch .engine-btn { flex: 1; padding: 8px; text-align: center; cursor: pointer; }
.engine-switch .engine-btn.active { background: var(--wx-fire); color: #fff; border-color: var(--wx-fire); }

/* 档案列表的引擎小徽章(在 history-item .h-name 内 inline 显示) */
.engine-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 8px;
  border: 1px solid currentColor;
  vertical-align: middle;
  opacity: 0.85;
  font-weight: normal;
}
.engine-badge.engine-jiuzongmen { color: var(--wx-fire); }
.engine-badge.engine-kinliuren { color: var(--wx-water); }

/* ============================================================
   弹窗 Transition 关闭动画（与已有的 lp-mask-in / lp-modal-in 进入动画对称）
   适用于：LocationPicker / 命主年命 modal / save-modal
============================================================ */
.modal-leave-active { animation: lp-mask-out 0.22s ease forwards; }
.modal-leave-active .loc-picker-modal { animation: lp-modal-out 0.22s cubic-bezier(0.55, 0, 0.55, 0.2) forwards; }
@keyframes lp-mask-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes lp-modal-out { from { transform: translateY(0); } to { transform: translateY(100%); } }
/* PC 横屏（modal 居中弹出）：关闭时缩放淡出而非滑下 */
@media (min-width: 1024px) {
  .modal-leave-active .loc-picker-modal {
    animation: lp-modal-out-center 0.22s ease forwards;
  }
  @keyframes lp-modal-out-center {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.92); opacity: 0; }
  }
}

/* ============================================================
   保存档案弹窗（复用 .loc-picker-mask / .loc-picker-modal 动画）
============================================================ */
.save-modal { max-width: 520px; }
.save-modal .save-modal-body {
  padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px;
  max-height: 70vh; overflow-y: auto;
}
.save-modal textarea.save-detail {
  width: 100%; min-height: 100px; resize: vertical;
  font-family: var(--font-info); line-height: 1.5;
}

/* 通用二次确认弹窗（删除/清空等危险操作） */
.confirm-modal { max-width: 380px; }
.confirm-modal .confirm-header { justify-content: center; padding: 12px 14px 8px; border-bottom: none; }
.confirm-modal .loc-picker-title { color: var(--wx-fire); font-size: 16px; }
.confirm-modal-body {
  padding: 4px 18px 16px; font-size: 14px; color: var(--text-mid);
  line-height: 1.6; white-space: pre-line; text-align: center;
}
.confirm-modal-actions {
  display: flex; gap: 10px; padding: 0 14px 14px;
}
.confirm-modal-actions .btn { flex: 1; padding: 10px 14px; }

/* ============================================================
   Toast
============================================================ */
.toast-container { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast {
  padding: 8px 14px; background: rgba(42,26,10,0.92); color: #fff;
  border-radius: 6px; font-size: 13px; max-width: 280px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  animation: toast-in .25s ease; pointer-events: auto;
}
.toast.error { background: rgba(192,57,43,0.95); }
.toast.success { background: rgba(45,122,79,0.95); }
@keyframes toast-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   响应式
   字号已 CSS 变量化（见顶部 :root + @media min-width:1024px）
   下面只保留布局相关的 @media，字号一律不再这里覆盖
============================================================ */

/* 横屏（PC 或手机）三栏布局 — 任意横屏 + 宽 >= 480px 都用 */
@media (orientation: landscape) and (min-width: 480px) {
  /* 横屏字号缩小一号（让 tianpan 4×4 更紧凑，腾空间给三栏） */
  :root {
    --fs-tianpan: 24px;
    --fs-tianjiang: 13px;
    --fs-dipan: 16px;
  }

  /* 看盘 tab：用 100dvh 修 iOS Safari URL bar 高度问题（避免内容被遮 50px）
     允许自然滚动 — 屏幕够大时三栏依旧不溢出，屏幕小时可上下滑动看到全部 */
  body.tab-kanpan .main-container {
    max-width: 100%; min-height: 100dvh;
    display: flex; flex-direction: column;
  }
  body:not(.tab-kanpan) .main-container { max-width: 100%; padding: 0 6px; min-height: 100dvh; padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }

  .title-bar { padding: 4px 14px; margin: 4px 0 3px; }
  .title-bar .app-title { font-size: 14px; }

  /* 三栏布局仅在 kanpan tab 生效
     core 思路：
     - land-body 高度严格 = viewport - title - nav（min-height:0 让 flex item 不撑高）
     - tianpan-section 居中优先：宽度 = 高度（aspect-ratio 1:1）
     - justify-content:center 让 left+tianpan+right 整体水平居中（屏幕越宽，三栏整体仍居中）
     - land-left/right 弹性宽度，但 max-width 上限内取尽剩余空间向 tianpan 靠拢
     - left/right 内容溢出时各自 overflow 滚动，不撑高 land-body */
  body.tab-kanpan .land-body {
    display: flex; flex-direction: row; gap: 5px;
    flex: 1 1 0; min-height: 0; align-items: stretch;
    justify-content: center;  /* 三栏整体水平居中 */
    overflow: hidden;
  }

  /* land-left 弹性宽度：120-340，max 加大让屏幕大时也能占更多 */
  .land-left {
    display: flex; flex-direction: column;
    flex: 1 1 0; min-width: 120px; max-width: 340px;
    gap: 4px; min-height: 0; overflow: auto;
  }
  .info-card { flex-direction: column; align-items: stretch; padding: 6px 8px; margin: 0; gap: 6px; flex-shrink: 0; }
  .info-sizhu-row { border-left: none; padding-left: 0; border-top: 1px solid var(--border-inner); padding-top: 6px; justify-content: center; }
  /* 横屏：bottom-bar 改回 grid 2×2（覆盖默认 flex 一行） */
  .bottom-bar { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 6px; margin: 0; gap: 2px 4px; flex: 0 0 auto; overflow: visible; }

  /* tianpan-section：宽 = 高（aspect-ratio），高 = land-body 100%
     去掉之前的 max-width: min(60vh, 55vw) 限制 — 改由 land-body 高度直接驱动
     这样 height 在 500-654 区间能平滑自适应，不再被 60vh 上限锁死 */
  .tianpan-section { padding: 0; flex: 0 0 auto; display: flex; align-items: stretch; justify-content: center; min-width: 0; min-height: 0; }
  .tianpan-grid { width: auto; height: 100%; aspect-ratio: 1/1; flex-shrink: 0; padding: 0; gap: 2px; }

  /* land-right 弹性宽度：140-340 */
  .land-right {
    display: flex; flex-direction: column;
    flex: 1 1 0; min-width: 140px; max-width: 340px;
    gap: 0; min-height: 0; overflow: auto;
  }
  .ke-chuan-row { flex-direction: column; flex: 1; padding: 0; gap: 4px; }
  .si-ke { flex: none; padding: 4px; }
  .san-chuan { flex: 1; padding: 4px; }
  .chuan-item { padding: 3px 4px; gap: 4px; }
}

/* 小屏横屏（手机横屏 max-height 420）：仅压缩 padding/margin/title 字号；
   六壬盘字号由 :root 移动端变量已合理控制，不再额外缩小（保证可读） */
@media (orientation: landscape) and (max-height: 420px) {
  .title-bar { padding: 2px 14px; margin: 2px 0; }
  .title-bar .app-title { font-size: 12px; }
  .land-left { min-width: 140px; }
  .info-card { padding: 4px 6px; gap: 4px; }
  .bottom-nav { padding: 2px 0; }
}

/* ================================================================
   横屏小高度 (height < 500px) 一屏自适应：
   - shensha-bar 留在 land-left bottom-bar 下方（不脱离 / 不横滑）
   - 三块（info-card / bottom-bar / shensha-bar）字号 padding 全面收紧
   - 神煞 token 极简化：去边框 / 字号小，让 land-left 一行能放 4-5 个
   - land-right / 课体也跟着压缩，预留更多空间给 4×4 天地盘
   - bottom-nav 横屏改横排压扁，省 ~20px 高度（移动端关键）
================================================================ */
@media (orientation: landscape) and (max-height: 500px) {
  /* bottom-nav 横排压扁：icon 与文字并排，整高从 ~50px 降到 ~30px
     移动端横屏 nav 占太高是内容溢出主因，这里大幅压缩 */
  .bottom-nav {
    padding: 3px 0;
    padding-bottom: calc(3px + env(safe-area-inset-bottom, 0));
  }
  .nav-item { flex-direction: row; gap: 4px; padding: 0 4px; }
  .nav-item .nav-icon { font-size: 16px; }
  .nav-item { font-size: 11px; }
  /* main-container padding-bottom 给压扁后的 nav 真实高度 + safe-area */
  body.tab-kanpan .main-container,
  body:not(.tab-kanpan) .main-container {
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0));
  }

  /* land-left 内容紧凑化 */
  body.tab-kanpan .land-left { min-width: 130px; max-width: 200px; gap: 3px; }
  body.tab-kanpan .info-card { padding: 4px 6px; gap: 3px; }
  body.tab-kanpan .info-date-row { font-size: 11px; gap: 1px 4px; }
  body.tab-kanpan .info-extra-row { font-size: 10px; gap: 1px 4px; }
  body.tab-kanpan .sizhu-col .sz-gan,
  body.tab-kanpan .sizhu-col .sz-zhi { font-size: 14px; }
  body.tab-kanpan .sizhu-col .sz-label { font-size: 9px; }
  body.tab-kanpan .info-sizhu-row { padding-top: 3px; gap: 4px; }

  /* bottom-bar 字号缩小（仍然 2×2 grid） */
  body.tab-kanpan .bottom-bar { padding: 3px 5px; gap: 1px 4px; }
  body.tab-kanpan .bottom-bar .b-item { font-size: 10px; }

  /* shensha-bar 极简：去边框 / 字号 9px / padding 0 / 一行能放 4-5 个 */
  body.tab-kanpan .shensha-bar {
    padding: 3px 5px; margin: 0; gap: 2px 3px;
  }
  body.tab-kanpan .shensha-bar .ss-label {
    font-size: 10px; margin-right: 2px; letter-spacing: 0;
  }
  body.tab-kanpan .shensha-bar .ss-item {
    font-size: 11px; padding: 0 2px; border: none; background: transparent;
    line-height: 1.3;
  }

  /* land-right 收窄 */
  body.tab-kanpan .land-right { min-width: 150px; max-width: 200px; width: 22%; }
  body.tab-kanpan .si-ke { padding: 3px; }
  body.tab-kanpan .san-chuan { padding: 3px; }
  body.tab-kanpan .ke-item { padding: 2px 1px; }
  body.tab-kanpan .chuan-item { padding: 2px 4px; gap: 3px; }

  /* title-bar 横屏小屏进一步压扁 */
  .title-bar { padding: 2px 14px; margin: 2px 0; }
  .title-bar .app-title { font-size: 12px; }

  /* center-merged（课体）字号缩小（节省天地盘空间被中宫挤占） */
  .center-merged .keti-value { font-size: 18px; }
  .center-merged .keti-label { font-size: 10px; }
}

/* ============================================================
   排盘 / 历史 / 我的 tab 的横屏 + PC 适配
============================================================ */

/* PC 桌面 (>=1024px)：表单卡片自身居中限宽；排盘 grid 两栏（左时间右配置） */
@media (min-width: 1024px) {
  .paipan-form {
    max-width: 760px; margin-left: auto; margin-right: auto;
    display: grid;
    grid-template-areas:
      "time right"
      "cast cast";
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
  }
  .paipan-form .paipan-time-col { display: block; grid-area: time; }
  .paipan-form .paipan-right-col { display: flex; flex-direction: column; gap: 10px; grid-area: right; }
  .paipan-form .paipan-cast-btn { grid-area: cast; }
  .profile-section { max-width: 560px; margin-left: auto; margin-right: auto; }
  .history-list { max-width: 880px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .history-list > .btn-block { grid-column: 1 / -1; }
  .history-empty { max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* 移动横屏（手机/平板横屏，宽 480-1023, 高度有限） */
@media (orientation: landscape) and (min-width: 480px) and (max-width: 1023px) {
  /* 排盘表单：grid 两栏布局 — 左时间 picker / 右地区+开关+年命 / 底部排盘按钮占整行 */
  .paipan-form {
    display: grid;
    grid-template-areas:
      "time right"
      "cast cast";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px 14px;
    max-width: 100%;
  }
  .paipan-form .paipan-time-col {
    display: block; grid-area: time;
  }
  .paipan-form .paipan-right-col {
    display: flex; flex-direction: column; gap: 8px;
    grid-area: right;
  }
  .paipan-form .paipan-cast-btn { grid-area: cast; }
  .paipan-form .form-row { gap: 6px; }

  /* 历史 grid 2 列 */
  .history-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .history-list > .btn-block { grid-column: 1 / -1; }

  /* 我的 两 section 横排 */
  .profile-tab-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
}

/* 大屏 PC 横屏：历史 3 列 */
@media (min-width: 1280px) {
  .history-list { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
}