/* ── 事项卡 ── */
.form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; font-size: 13px; }
.form-row:last-child { margin-bottom: 0; }
.lbl { color: var(--color-brand); font-weight: 600; white-space: nowrap; min-width: 60px; font-family: "MiSans", sans-serif; }

.seeker-input { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; width: 120px; font-family: "MiSans", sans-serif; font-weight: 400; }

.date-input { padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; text-align: center; width: 40px; font-family: "MiSans", sans-serif; font-weight: 400; }
.date-input.year { width: 55px; }


.cal-group { display: inline-flex; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; }
.cal-group label { display: flex; align-items: center; padding: 4px 10px; font-size: 12px; cursor: pointer; background: #fff; color: var(--color-text-sec); border-right: 1px solid var(--color-border); transition: background .15s, color .15s; font-family: "MiSans", sans-serif; font-weight: 400; }
.cal-group label:last-child { border-right: none; }
.cal-group label.active { background: var(--color-brand); color: #fff; }
.cal-group input[type="radio"] { display: none; }

.btn-gold { background: var(--color-gold); color: #fff; }
.btn-gold:hover { opacity: 0.9; }
.btn-bz-action {
  padding: 3px 12px; border-radius: 4px; font-size: 12px; cursor: pointer;
  border: none; background: linear-gradient(135deg, var(--color-btn-dark), var(--color-vip-gradient));
  color: var(--color-vip-gold); transition: all .2s;
}
.btn-bz-action:hover { background: linear-gradient(135deg, var(--color-vip-gradient), #5a4a30); color: var(--color-vip-gold); }

.leap-label { display: none; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; font-family: "MiSans", sans-serif; font-weight: 400; }
.leap-label.bz-visible { display: inline-flex; }
#ztyCity { display: none; font-size: 12px; padding: 2px 4px; border: 1px solid var(--color-border); border-radius: 4px; max-width: 90px; font-family: 'MiSans', sans-serif; }
#ztyCity.bz-visible { display: inline-block; }


/* 表格内模式 Tab 行 */
.row-mode-tabs td { padding: 8px 16px; text-align: center; font-size: 13px; font-weight: 400; cursor: pointer; box-sizing: border-box; font-family: "MiSans", sans-serif; }
.mode-tab-cell       { color: var(--color-star-sub); }
.mode-tab-cell.active { color: var(--color-gold); }

/* 卡片 */
.card { background: var(--color-pan); border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,.08); padding: 16px; margin-bottom: 16px; border: 1px solid var(--color-brand); }
.card-title { font-size: 13px; font-weight: bold; color: var(--color-brand); border-left: 3px solid var(--color-brand); padding-left: 8px; margin-bottom: 10px; }
#formCard, #mainCard, #gujiCard { width: 100%; }

/* 主布局：左列(问事+排盘+古籍) | 右列(侧边栏) */
.main-row { display: flex; gap: 16px; margin-left: 10px; align-items: flex-start; }
.main-left { width: 680px; max-width: 680px; flex-shrink: 0; }
.content-row { }

/* 能量侧边栏 — 弹性填满右侧 + 顶部粘性对齐 */
.energy-sidebar { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 300px; max-width: 700px; }
.energy-card { background: var(--color-pan); border: 1px solid var(--color-border-warm); border-radius: 8px; padding: 10px 8px; }
.energy-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; font-family: "MiSans", sans-serif; color: var(--color-brand); text-align: left; margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-light); position:relative; white-space:nowrap; overflow:hidden; }
.energy-title .xy-btn:last-child { margin-left: auto; }
.chart-wrap { position: relative; width: 100%; }
#chartPie { height: 150px; }
#chartRadar { height: 170px; }

/* 缩放按钮 */
.zoom-btns { display:inline-flex; gap:1px; margin-right:4px; vertical-align:middle; }
.zoom-btns .xy-btn { padding:1px 5px; font-size:10px; border-radius:8px; border:1px solid var(--color-border); background:var(--color-panel); color: var(--color-text-sec); cursor:pointer; transition:all .15s; line-height:1.4; }
.zoom-btns .xy-btn:hover { background: var(--color-subtle); }
.zoom-btns .xy-btn.active { background:var(--color-brand); color:#fff; border-color:var(--color-brand); }
.kline-disclaimer { font-size:9px; color:var(--color-text-faint); font-weight:300; line-height:1.5; padding:2px 0 6px; }

/* 配色主题切换 */
.theme-dots { position: absolute; right: 0; top: 0; display: inline-flex; gap: 4px; }
.theme-dots.theme-dots-inline { position: static; display: inline-flex; vertical-align: middle; }
.tdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; cursor: pointer; border: 1px solid transparent; transition: all .15s; }
.tdot.active { border-color: #8B4513; box-shadow: 0 0 0 1px #fff, 0 0 0 2px #8B4513; }

/* 五行明细表 */
.wx-detail { margin-top:8px; padding-top:6px; border-top:1px solid var(--color-border-light); display:flex; flex-direction:column; gap:3px; }
.wx-detail-row { display:flex; align-items:center; gap:4px; font-size:10px; font-family:"MiSans",sans-serif; }
.wx-detail-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.wx-detail-label { width:14px; text-align:center; font-weight:700; }
.wx-detail-bar-wrap { flex:1; height:10px; background: var(--color-subtle); border-radius:2px; overflow:hidden; }
.wx-detail-bar { display:block; height:100%; border-radius:2px; transition:width .4s; }
.wx-detail-val { width:32px; text-align:right; color: var(--color-star-sub); }

/* 加载 */
.loading { text-align: center; color: var(--color-star-sub); padding: 40px; font-size: 14px; display: none; }

/* ────────────── 统一大表格 ────────────── */
.main-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.bazi-tbl { border-collapse: collapse; width: 100%; font-size: 13px; table-layout: auto; background: var(--color-panel); }
.bazi-tbl td, .bazi-tbl th { border: 1px solid var(--color-border-warm); vertical-align: middle; font-size: 13px; padding: 4px 6px; }

/* 行标签列 */
.r-lbl { width: auto; min-width: 48px; font-size: 13px; text-align: center; padding: 4px 6px; white-space: nowrap; color: var(--color-gold); }

/* 顶部 banner 行 */
.row-banner td { padding: 8px 12px; font-size: 13px; font-weight: 400; letter-spacing: 1px; text-align: center; color: var(--color-gold); font-family: "MiSans", sans-serif; }

/* 信息行（colspan=4）*/
.row-info td.r-lbl { font-weight: 400; }
.info-wide { padding: 5px 10px; font-size: 13px; text-align: center; font-family: "MiSans", sans-serif; font-weight: 300; }

/* 四柱列头 */
.row-pillar-hd td { padding: 6px 8px; font-size: 13px; font-weight: 700; text-align: center; font-family: "MiSans", sans-serif; font-weight: 400; }

/* 十神行 */
.ss-cell { padding: 5px 6px; font-size: 13px; font-weight: 400; text-align: center; font-family: "MiSans", sans-serif; }
.ss-bi   { color: #5c6bc0; }
.ss-shi  { color: #2d8a2d; }
.ss-cai  { color: #059669; }
.ss-guan { color: var(--color-fire); }
.ss-yin  { color: #b8860b; }

/* 乾/坤造 大字行 */
.row-gz td { text-align: center; padding: 6px 10px; }
.gz-big { font-size: 20px; font-weight: 400; line-height: 1.05; display: block; font-family: "MiSans", sans-serif; }
/* 五行颜色 — 莫兰迪色系 */
.e-mu  { color: #919b87; }
.e-huo { color: #b57c82; }
.e-tu  { color: #a79a89; }
.e-jin { color: var(--color-gold); }
.e-shui{ color: #789798; }

/* 日柱列（占位，颜色后续添加） */
.day-col { }

/* 普通数据格 */
.data-cell { padding: 4px 8px; font-size: 13px; text-align: center; }
.data-cell.hl { font-weight: 300; font-family: "MiSans", sans-serif; }

/* 藏干格 */
.zg-cell { padding: 4px 6px; text-align: center; font-family: "MiSans", sans-serif; font-weight: 300; }
.zg-item { display: inline-block; margin: 0 4px; text-align: center; font-size: 13px; }
.zg-stem { font-weight: 700; font-size: 13px; display: block; }
.zg-ss   { font-size: 13px; display: block; }

/* 旺相休囚死 */
.wx-cell { padding: 4px 6px; font-size: 13px; font-weight: 400; text-align: center; font-family: "MiSans", sans-serif; }

/* 神煞格 */
.shen-cell { padding: 4px 8px; font-size: 13px; color: #795523; text-align: center; }

/* colspan=4 宽格通用 */
.wide-cell { padding: 8px 12px; text-align: center; }

/* 提示行（融入主表格），内容居中 */
.tishi-row-label { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; margin-bottom: 1px; }
.tishi-row-body { font-size: 12px; line-height: 1.6; }
.bz-tishi-row-ana td, .bz-tishi-row-zcb td { text-align: center; vertical-align: middle; }

/* 胎元/命宫/身宫/旺相休囚死 */
.sp-hd    { text-align: center; padding: 6px 8px; font-size: 13px; }
.sp-val   { text-align: center; padding: 8px 6px; vertical-align: middle; font-family: "MiSans", sans-serif; font-weight: 400; }
.sp-gz    { font-size: 13px; line-height: 1.1; }
.sp-nayin { font-size: 13px; }
.sp-wx    { font-size: 13px; letter-spacing: 4px; vertical-align: middle; }

/* 起运 */
.qiyun-text { font-size: 13px; }

/* ── 模式可见性（CSS 控制，JS 只切 class） ── */
#bz-trad, #bz-ana { display: none; }
.bazi-tbl.bz-mode-trad #bz-trad { display: table-row-group; }
.bazi-tbl.bz-mode-ana #bz-ana, .bazi-tbl.bz-mode-zcb #bz-ana { display: table-row-group; }
.bz-tishi-row-ana, .bz-tishi-row-zcb { display: none; }
.bazi-tbl.bz-mode-ana .bz-tishi-row-ana { display: table-row; }
.bazi-tbl.bz-mode-zcb .bz-tishi-row-zcb { display: table-row; }

/* ── 大运（3行：年份 / 干支大字 / 十神） ── */
.dy-label    { font-size: 13px; font-weight: 700; text-align: center; vertical-align: middle; line-height: 1.8; }
.dy-row      { padding: 0; }
.dy-flex     { display: flex; width: 100%; overflow: hidden; }
.dy-col      { flex: 1; min-width: 0; text-align: center; border-right: 1px solid var(--color-border-warm); cursor: pointer; }
.dy-col:last-child { border-right: none; }
.dy-year-num { font-size: 13px; padding: 5px 4px; display: block; color: var(--color-gold); }
.dy-gz-tg    { font-size: 13px; font-weight: 700; line-height: 1.1; font-family: "MiSans", sans-serif; font-weight: 400; }
.dy-gz-dz    { font-size: 13px; font-weight: 700; line-height: 1.1; font-family: "MiSans", sans-serif; font-weight: 400; }
.dy-gz-wrap  { padding: 6px 4px; }
.dy-ss-text  { font-size: 13px; padding: 5px 4px; display: block; }
.cur-dy .dy-gz-tg, .cur-dy .dy-gz-dz { color: var(--color-fire); }

/* ── 流年（3行：年份+岁 / 干支大字 / 十神） ── */
.ly-label    { font-size: 13px; font-weight: 700; text-align: center; vertical-align: middle; line-height: 1.8; }
.ly-year-num { font-size: 13px; display: block; color: var(--color-gold); }
.ly-age-num  { font-size: 13px; display: block; color: var(--color-gold); }
.cur-ly .dy-gz-tg, .cur-ly .dy-gz-dz { color: var(--color-fire); }
/* 选中高亮 — 通过父级选择器提升特异性，避免 !important */
.bazi-tbl .dy-col.bz-sel-dy,
.bazi-tbl .dy-col.bz-sel-ly,
.bazi-tbl .dy-col.bz-sel-ld { background: var(--color-panel); outline: 1px solid var(--color-border); }
.bazi-tbl .bz-lm-item.bz-sel-lm { background: var(--color-panel); outline: 1px solid var(--color-border); }

/* 流月/流日/流时 通用项 */
.bz-lm-item { cursor: pointer; }
.bz-grey-day { cursor: default; }
/* 流年开关 */
.ly-toggle      { display: block; margin-top: 6px; cursor: pointer; }
.ly-toggle input { display: none; }
.ly-toggle-sw   { display: inline-block; width: 30px; height: 17px; background: var(--color-border); border-radius: 9px; position: relative; transition: background .2s; }
.ly-toggle-sw::before { content: ''; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform .2s; }
.ly-toggle input:checked + .ly-toggle-sw { background: var(--color-gold); }
.ly-toggle input:checked + .ly-toggle-sw::before { transform: translateX(13px); }

/* 古籍 */
.guji-ph { text-align: center; padding: 40px; color: var(--color-text-faint); font-size: 13px; }
.guji-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.guji-card-header .card-title { margin-bottom: 0; }
.guji-more-link { font-size: 12px; color: var(--color-brand); text-decoration: none; white-space: nowrap; }
.guji-more-link:hover { text-decoration: underline; }
.guji-mini-list { display: flex; flex-wrap: wrap; gap: 8px; }
.guji-mini-item { flex: 1 1 calc(50% - 4px); min-width: 160px; border: 1px solid var(--color-border); border-radius: 6px; padding: 8px 10px; text-decoration: none; color: inherit; transition: box-shadow .15s; display: block; }
.guji-mini-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.guji-mini-title { font-size: 13px; font-weight: 700; color: var(--color-brand); }
.guji-mini-author { font-size: 12px; color: var(--color-star-sub); margin-top: 3px; }

/* 表单操作按钮行 */
.form-row-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.form-row-btns { display: flex; gap: 6px; }

/* 真太阳时 label */
.zty-label { font-size: 12px; cursor: pointer; user-select: none; font-family: 'MiSans', sans-serif; font-weight: 400; }

/* 图表容器 */
.bazi-chart-row { display: flex; gap: 8px; align-items: flex-start; }
.bazi-chart-col { flex: 1; min-width: 0; text-align: center; }
.bazi-chart-caption { font-size: 9px; color: var(--color-text-faint); padding: 2px 0 4px; }

/* K线容器 */
.kline-canvas-wrap { overflow-x: auto; position: relative; }
#chartKline { height: 430px; }
.kline-tooltip { display: none; position: absolute; background: rgba(0, 0, 0, 0.85); color: #fff; padding: 6px 22px 6px 10px; border-radius: 6px; font-size: 10px; pointer-events: none; z-index: 99; white-space: nowrap; }
.kline-tip-close { position: absolute; top: 2px; right: 6px; cursor: pointer; font-size: 14px; color: var(--color-text-faint); line-height: 1; }
/* K线付费遮罩 */
.kline-mask { position: absolute; inset: 0; background: rgba(255,255,255,.82); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: 4px; }
html[data-theme="dark"] .kline-mask { background: rgba(20,16,12,.82); }
.kline-mask-inner { text-align: center; padding: 16px; }
.kline-mask-title { font-size: 15px; font-weight: 700; color: var(--color-gold); margin-bottom: 8px; }
.kline-mask-desc { font-size: 12px; color: var(--color-text-sec); margin-bottom: 14px; line-height: 1.6; }
.kline-mask-btn { padding: 7px 22px; border-radius: 6px; border: none; background: var(--color-brand); color: #fff; font-size: 13px; cursor: pointer; }
.kline-tip-close:hover { color: #fff; }

/* 解读内容 */
#jieduContent { font-size: 11px; line-height: 1.8; color: var(--color-text-sec); padding: 4px; }

/* 加载我的命盘按钮 */
.btn-me { color: var(--color-danger); border: 1.5px solid var(--color-danger); background: #fff; font-weight: bold; font-size: 11px; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.btn-me:hover { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

/* 登录/用户链接 */
.auth-link { cursor: pointer; }

/* 解读信息 */
.jd-section { margin-bottom:8px; padding-bottom:6px; border-bottom:1px dotted #e8e8e8; }
.jd-section:last-child { border-bottom:none; margin-bottom:0; }
.jd-h { color:var(--color-brand); font-size:12px; }

/* K线缩放复用 */
.xy-btn { padding: 2px 10px; border: 1px solid var(--color-gold); background: #fff; color: #8B4513; border-radius: 12px; font-size: 11px; cursor: pointer; font-family: "MiSans", sans-serif; font-weight: 400; transition: all .15s; }
.xy-btn:hover { background: var(--color-parchment); }
.xy-btn.active { background: #8B4513; color: #fff; border-color: #8B4513; }


@media (max-width: 900px) {
  .content-row { flex-direction: column; margin-left: 0; }
  .bazi-main-card { max-width: 100%; }
  .energy-sidebar { flex-direction: column; width: 100%; }
  .energy-card #chartPie, .energy-card #chartRadar { height: 160px; }

/* VIP 黑金小标已统一到 common.css */
}

/* ═══════════════════════════════════════════════════════════════
   Dark 模式
   ═══════════════════════════════════════════════════════════════ */

/* ── 卡片阴影 ── */
html[data-theme="dark"] .card { box-shadow: 0 1px 6px rgba(0,0,0,.3); }
html[data-theme="dark"] .guji-mini-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.4); }
html[data-theme="dark"] .tdot.active { box-shadow: 0 0 0 1px #181230, 0 0 0 2px #b894d8; }

/* ── 白色底按钮 ── */
html[data-theme="dark"] .cal-group label { background: #181230; }
html[data-theme="dark"] .btn-me { background: #181230; }
html[data-theme="dark"] .xy-btn { background: #181230; color: #b894d8; }
html[data-theme="dark"] .xy-btn:hover { background: #1c1430; }
html[data-theme="dark"] .xy-btn.active { background: #b894d8; color: #fff; border-color: #b894d8; }
html[data-theme="dark"] .ly-toggle-sw::before { background: #201840; }

/* ── 虚线分隔── */
html[data-theme="dark"] .jd-section { border-bottom-color: #4a3a5a; }

/* ── 十神颜色 ── */
html[data-theme="dark"] .ss-bi  { color: #8a9cf0; }
html[data-theme="dark"] .ss-shi { color: #5ab85a; }
html[data-theme="dark"] .ss-cai { color: #5ab88a; }
html[data-theme="dark"] .ss-yin { color: #d4a860; }

/* ── 五行元素色 ── */
html[data-theme="dark"] .e-mu  { color: #a0b090; }
html[data-theme="dark"] .e-huo { color: #d09098; }
html[data-theme="dark"] .e-tu  { color: #b8a898; }
html[data-theme="dark"] .e-shui{ color: #90a8a8; }

/* ── 神煞 ── */
html[data-theme="dark"] .shen-cell { color: #c09060; }

/* ── 边框 ── */
html[data-theme="dark"] .energy-card,
html[data-theme="dark"] .bazi-tbl td,
html[data-theme="dark"] .bazi-tbl th,
html[data-theme="dark"] .dy-col { border-color: #9a8ab8; }
html[data-theme="dark"] .energy-title { border-bottom-color: #9a8ab8; }
html[data-theme="dark"] .wx-detail { border-top-color: #9a8ab8; }

/* ── 选中高亮 ── */
html[data-theme="dark"] .bazi-tbl .dy-col.bz-sel-dy,
html[data-theme="dark"] .bazi-tbl .dy-col.bz-sel-ly,
html[data-theme="dark"] .bazi-tbl .dy-col.bz-sel-ld,
html[data-theme="dark"] .bazi-tbl .bz-lm-item.bz-sel-lm { outline-color: #9a8ab8; }