/* 手机独立入口 */

/* 模块说明（人工修改前先读）
 * 模块：public/styles/mobile.css
 * 职责：手机入口 /mobile 的布局覆盖。
 * 修改边界：只改手机壳和手机布局；通用样式在 base.css。
 */
body.is-mobile { background: #fff; }
body.is-mobile .topbar,
body.is-mobile .sidenav,
body.is-mobile .rightside { display: none !important; }
body.is-mobile .mobile-topbar { display: flex !important; }
body.is-mobile .app { display: block; }
body.is-mobile .layout {
  display: block; max-width: none;
  padding: 0 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px);
}
body.is-mobile .view { max-width: none; width: 100%; padding: 0; }
body.is-mobile .tabbar {
  display: grid !important; grid-template-columns: repeat(4, 1fr);
  height: var(--tabbar-h);
}
body.is-mobile .site-footer { display: block; }
body.is-mobile .footer-inner { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); }

/* ============================================================ 手机端八字排盘 v2 */
body.page-bazi-mobile .mobile-topbar { display: none !important; }
body.page-bazi-mobile .view { padding: 0; }
body.page-bazi-mobile .tabbar { z-index: 60; }

.mb-head {
  display: flex; align-items: center; gap: 9px;
  background: #fff; padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  border-bottom: 1px solid #f2f3f5;
}
.mb-logo { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #f2e6e6; }
.mb-logo img { width: 26px; height: 26px; display: block; object-fit: contain; }
.mb-title { flex: 1; min-width: 0; }
.mb-title b { font-size: 18px; font-weight: 600; color: #1f2329; letter-spacing: .01em; }
.mb-more { width: 32px; height: 32px; border: 0; background: transparent; color: #86909c; font-size: 20px; line-height: 1; }

.mb-tabs {
  display: flex; align-items: stretch; gap: 26px;
  background: #fff; border-bottom: 1px solid #f2f3f5; padding: 0 16px;
}
.mb-tabs a {
  position: relative; padding: 10px 1px 9px; font-size: 14px;
  color: #86909c; text-decoration: none;
}
.mb-tabs a.active { color: #1f2329; font-weight: 600; }
.mb-tabs a.active::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 18px; height: 2px;
  border-radius: 2px; background: var(--brand); transform: translateX(-50%);
}

body.page-bazi-mobile .bz-hero {
  margin: 12px; padding: 14px; border: 1px solid #f2f3f5;
  border-radius: 8px; box-shadow: none; background: #fff;
}
body.page-bazi-mobile .bz-hero-title,
body.page-bazi-mobile .bz-hero-sub,
body.page-bazi-mobile .bz-privacy,
body.page-bazi-mobile #bz-empty,
body.page-bazi-mobile #bz-charts { display: none !important; }
body.page-bazi-mobile #bz-form .field { margin-bottom: 12px; }
body.page-bazi-mobile .bz-grid { gap: 10px; }
body.page-bazi-mobile .bz-seg button { min-width: 58px; padding: 6px 12px; font-size: 12px; }
body.page-bazi-mobile .bz-calendar-switch { margin-top: 0; }
body.page-bazi-mobile .bz-date-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 7px; }
body.page-bazi-mobile .bz-check { font-size: 12px; }
body.page-bazi-mobile .bz-solar { padding: 10px 10px 0; }
body.page-bazi-mobile .bz-solar .bz-grid { grid-template-columns: 1fr 1fr; }
body.page-bazi-mobile #bz-submit { height: 44px; border-radius: 6px; margin-top: 4px; }
body.page-bazi-mobile .bz-hint { margin: 0 12px 12px; }
body.page-bazi-mobile #bz-result { padding: 0 12px; }
body.page-bazi-mobile #bz-result > .card,
body.page-bazi-mobile #bz-result > section.card { border-radius: 8px; box-shadow: none; }

/* 手机端记录页 */
.mb-records-page { padding: 16px 16px 28px; background: #f7f8fa; min-height: 70vh; }
.mb-records-loading { color: #86909c; font-size: 12px; padding: 30px 0; text-align: center; }
.mb-record-title-row { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 0 12px; }
.mb-record-title-row h1 { margin: 0; font-size: 18px; font-weight: 600; color: #1f2329; }
.mb-record-title-row span { font-size: 11px; color: #86909c; }
.mb-search { display: flex; align-items: center; gap: 7px; height: 38px; background: #fff;
  border-radius: 7px; padding: 0 11px; color: #86909c; font-size: 12px; }
.mb-search span { font-size: 16px; }
.mb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 12px; color: #1f2329; }
.mb-search input::placeholder { color: #86909c; }
.mb-record-filters { display: flex; align-items: center; gap: 22px; border-bottom: 1px solid #e5e6eb;
  margin: 8px 0 0; padding: 0 2px; }
.mb-record-filters button { border: 0; background: transparent; color: #86909c; font: inherit;
  font-size: 12px; padding: 9px 0 8px; position: relative; }
.mb-record-filters button.active { color: #1f2329; font-weight: 600; }
.mb-record-filters button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--brand); }
.mb-record-list { background: #fff; border-radius: 8px; margin-top: 10px; overflow: hidden; border: 1px solid #f2f3f5; }
.mb-record-row { display: flex; align-items: center; gap: 10px; width: 100%; background: #fff;
  border: 0; border-bottom: 1px solid #f2f3f5; padding: 13px 12px; text-align: left; font: inherit; color: inherit; }
.mb-record-row:last-child { border-bottom: 0; }
.mb-record-row:active { background: #fafafa; }
.mb-rec-main { flex: 1; min-width: 0; }
.mb-rec-name { display: flex; align-items: baseline; gap: 6px; }
.mb-rec-name b { font-size: 14px; font-weight: 500; color: #1f2329; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-rec-name span { font-size: 9.5px; color: #86909c; flex: 0 0 auto; }
.mb-rec-date { font-size: 10.5px; color: #86909c; margin-top: 5px; }
.mb-rec-bazi { display: flex; gap: 7px; flex: 0 0 auto; }
.mb-rec-col { display: flex; flex-direction: column; align-items: center; gap: 1px; font-style: normal; font-size: 13px; line-height: 1.18; }
.mb-rec-col i { font-style: normal; }
.mb-wx-mu { color: #00a870; } .mb-wx-huo { color: #f53f3f; } .mb-wx-tu { color: #d46b08; }
.mb-wx-jin { color: #86909c; } .mb-wx-shui { color: #1664ff; }
.mb-rec-arrow { color: #c9cdd4; font-size: 20px; line-height: 1; flex: 0 0 auto; }
.mb-records-empty { text-align: center; padding: 48px 16px; color: #86909c; }
.mb-empty-icon { font-size: 34px; margin-bottom: 10px; }
.mb-empty-title { font-size: 14px; color: #1f2329; margin-bottom: 6px; }
.mb-empty-desc { font-size: 11px; color: #86909c; line-height: 1.7; }
.mb-login-btn { display: inline-block; margin-top: 16px; background: var(--brand); color: #fff;
  border-radius: 6px; padding: 9px 20px; font-size: 12px; text-decoration: none; }
body.page-bazi-mobile .site-footer { display: none; }

/* 手机端即时四柱 */
.mb-instant { margin-top: 14px; padding-top: 13px; border-top: 1px solid #f2f3f5; }
.mb-instant[hidden] { display: none; }
.mb-instant-head { display: flex; align-items: center; justify-content: space-between; }
.mb-instant-head b { font-size: 13px; font-weight: 600; color: #1f2329; }
.mb-instant-head span { font-size: 10px; color: #86909c; }
.mb-instant-pillars { display: flex; padding: 10px 0 7px; }
.mb-instant-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  border-right: 1px solid #f2f3f5; font-size: 18px; line-height: 1.2; }
.mb-instant-col:last-child { border-right: 0; }
.mb-instant-col i { font-style: normal; }
.mb-instant-meta { font-size: 10px; color: #86909c; line-height: 1.75; }