/* ============================================================================
   fm-shared.css — 太乙数衍命理站共享结构样式（fatemaster 兼容）
   生成：2026-10-21  用途：13 个命理视图替换 site.css 引用
   内容：Inter + Punctuation SC @font-face（自 style.css 迁移，woff2 位于 /fonts/）
         + body 基础（白底 + Inter 字体栈，对标 fatemaster bazi-calculate）
         + site.css 全量结构样式（侧栏/顶部导航/登录弹窗/历史条/footer/布局联动/理论页样式）
         + @import bootstrap.min.css（bootstrap 组件 CSS 兜底，防 head 引用被外部覆盖）
   注意：页面通用视觉（卡片/按钮/表单等）由各页以 /css/fatemaster.css 的
         Tailwind 工具类直接书写；功能类样式保留在各页内嵌 style 块。
   ============================================================================ */

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-roman-cyrillic-ext.BBPuwvHQ.woff2) format("woff2");
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-roman-cyrillic.C5lxZ8CY.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-roman-greek-ext.CqjqNYQ-.woff2) format("woff2");
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-roman-greek.BBVDIX6e.woff2) format("woff2");
    unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-roman-vietnamese.BjW4sHH5.woff2) format("woff2");
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-roman-latin-ext.4ZJIpNVo.woff2) format("woff2");
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-roman-latin.Di8DUHzh.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-italic-cyrillic-ext.r48I6akx.woff2) format("woff2");
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-italic-cyrillic.By2_1cv3.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-italic-greek-ext.1u6EdAuj.woff2) format("woff2");
    unicode-range: U+1F00-1FFF
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-italic-greek.DJ8dCoTZ.woff2) format("woff2");
    unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-italic-vietnamese.BSbpV94h.woff2) format("woff2");
    unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-italic-latin-ext.CN1xVJS-.woff2) format("woff2");
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/inter-italic-latin.C2AdPX0b.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Punctuation SC;
    font-weight: 400;
    src: local("PingFang SC Regular"),local("Noto Sans CJK SC"),local("Microsoft YaHei");
    unicode-range: U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F
}

@font-face {
    font-family: Punctuation SC;
    font-weight: 500;
    src: local("PingFang SC Medium"),local("Noto Sans CJK SC"),local("Microsoft YaHei");
    unicode-range: U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F
}

@font-face {
    font-family: Punctuation SC;
    font-weight: 600;
    src: local("PingFang SC Semibold"),local("Noto Sans CJK SC Bold"),local("Microsoft YaHei Bold");
    unicode-range: U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F
}

@font-face {
    font-family: Punctuation SC;
    font-weight: 700;
    src: local("PingFang SC Semibold"),local("Noto Sans CJK SC Bold"),local("Microsoft YaHei Bold");
    unicode-range: U+201C,U+201D,U+2018,U+2019,U+2E3A,U+2014,U+2013,U+2026,U+00B7,U+007E,U+002F
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background-color: #ffffff;
    color: #111827;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ========== site.css 原结构样式（原值迁移） ========== */

/* ===== 太乙数衍 站点公共样式（Razor 样板共享） ===== */
.site-footer { border-top: 1px solid #e5e7eb; margin-top: 4rem; background: #fff; }
.footer-grid { max-width: 80rem; margin: 0 auto; padding: 2rem 1.5rem; display: grid; grid-template-columns: 1fr; gap: 2rem; box-sizing: border-box; }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1fr 2fr; } }
.fb-logo { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; font-weight: 700; color: #111827; margin-bottom: 1rem; }
.footer-brand p { font-size: .875rem; line-height: 1.6; color: #4b5563; margin: 0 0 .75rem; }
.footer-brand a { color: #3b82f6; text-decoration: none; }
.footer-brand a:hover { color: #2563eb; }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
.fsec h3 { font-size: .875rem; font-weight: 600; color: #111827; margin: 1.25rem 0 .75rem; }
.fsec:first-child h3 { margin-top: 0; }
.fsec ul { list-style: none; margin: 0; padding: 0; }
.fsec li { margin-bottom: .5rem; }
.fsec li a { font-size: .875rem; color: #4b5563; text-decoration: none; }
.fsec li a:hover { color: #111827; }
.footer-bottom { border-top: 1px solid #e5e7eb; padding: 1.5rem; text-align: center; }
.footer-bottom p, .footer-bottom { font-size: .75rem; color: #6b7280; margin: 0; }
.footer-bottom a { color: #3b82f6; text-decoration: none; }
.fb-social { display: flex; gap: 1.5rem; margin-top: .5rem; }
.fb-social a { color: #9ca3af; }
.fb-social a:hover { color: #374151; }

/* ===== 理论详情页公共样式 ===== */
.td-wrap { width: 100%; max-width: 896px; margin: 0 auto; padding: 3rem 1.5rem 0; box-sizing: border-box; }
.td-hero { text-align: center; margin-bottom: 3rem; }
.td-hero h1 { font-size: 2.25rem; font-weight: 700; color: #111827; margin: 0 0 1rem; }
.td-hero p { font-size: 1.0625rem; color: #4b5563; max-width: 672px; margin: 0 auto; line-height: 1.75; }
.td-back { display: inline-flex; align-items: center; gap: .375rem; color: #6b7280; font-size: .875rem; margin-bottom: 1.5rem; text-decoration: none; }
.td-back:hover { color: #111827; }
.td-section { text-align: center; margin: 3rem 0 1.25rem; }
.td-section h2 { font-size: 1.5rem; font-weight: 600; color: #111827; margin: 0 0 .5rem; }
.td-section p { color: #6b7280; max-width: 672px; margin: 0 auto; }
.td-card { background: #fff; border: 1px solid #f3f4f6; border-radius: .75rem; padding: 1.25rem; }
.td-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin: 1.25rem 0; }
.td-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin: 1.25rem 0; }
.td-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.td-badge { display: inline-flex; align-items: center; gap: .5rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 9999px; padding: .25rem .75rem; font-size: .8125rem; }
.td-quote { background: #f9fafb; border-radius: 1rem; padding: 3rem 1.5rem; text-align: center; margin: 3rem 0; }
.td-quote blockquote { font-size: 1.25rem; font-style: italic; color: #1f2937; margin: 0 0 .75rem; }
.td-quote cite { color: #6b7280; font-style: normal; }
.td-cta { text-align: center; padding: 3rem 0 4rem; }
.td-cta h2 { font-size: 1.75rem; font-weight: 300; color: #111827; margin: 0 0 .75rem; }
.td-cta p { color: #6b7280; margin: 0 0 1.5rem; }
.td-btn { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; padding: .75rem 2rem; font-size: 1.0625rem; font-weight: 500; text-decoration: none; transition: all .2s; }
.td-btn-dark { background: #111827; color: #fff; }
.td-btn-dark:hover { background: #000; box-shadow: 0 6px 16px rgba(0,0,0,.15); transform: translateY(-1px); }
.td-btn-ghost { background: #fff; color: #374151; border: 2px solid #d1d5db; }
.td-btn-ghost:hover { border-color: #111827; color: #111827; }
.td-check { color: #10b981; margin-right: .5rem; }
.td-cross { color: #ef4444; margin-right: .5rem; }

/* ===== 左侧分组导航（Vue AppSidebar 复刻） ===== */
.app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: 16rem; background: #fcfcfd; border-right: 1px solid #e8e8ea; display: flex; flex-direction: column; transition: transform .25s ease, width .2s ease; }
.sb-header { padding: 1.5rem 1rem 1rem; }
.sb-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: #111827; }
.sb-brand-logo { width: 2rem; height: 2rem; flex: none; }
.sb-brand-name { font-weight: 700; font-size: 1rem; letter-spacing: .01em; white-space: nowrap; }
.sb-content { flex: 1; overflow-y: auto; padding: .25rem .25rem .75rem; }
.sb-group { margin-bottom: .5rem; }
.sb-group-label { height: 2rem; padding: 0 .5rem; font-size: .75rem; font-weight: 500; color: #6b7280; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.sb-item { display: flex; align-items: center; gap: .5rem; height: 2rem; margin: .125rem .25rem; padding: 0 .5rem; border-radius: .375rem; font-size: .875rem; color: #111827; text-decoration: none; white-space: nowrap; }
.sb-item:hover { background: #f5f5f6; }
.sb-item.sb-active { background: #f0f0f1; font-weight: 600; }
.sb-ic { flex: none; width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center; color: #4b5563; }
.sb-ic svg { width: 16px; height: 16px; display: block; }
.sb-tx { overflow: hidden; text-overflow: ellipsis; }
.sb-footer { border-top: 1px solid #e5e7eb; padding: .5rem; }
.sb-login { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 2.25rem; padding: 0 1rem; border: 1px solid #d1d5db; background: #fff; border-radius: .375rem; font-size: .875rem; font-weight: 500; color: #111827; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.05); box-sizing: border-box; transition: background .15s; }
.sb-login:hover { background: #f5f5f6; }
.sb-login-ic { width: 1rem; height: 1rem; flex: none; }
.sb-footer { position: relative; }

/* 已登录用户菜单（Vue NavUser 复刻） */
.sb-user { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem; border: none; background: transparent; border-radius: .375rem; color: #111827; cursor: pointer; font-size: .875rem; box-sizing: border-box; text-align: left; }
.sb-user:hover { background: #f5f5f6; }
.sb-user-avatar { width: 2rem; height: 2rem; border-radius: .375rem; flex: none; }
.sb-user-phone { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-chev { width: 1rem; height: 1rem; flex: none; color: #6b7280; }
.sb-user-menu { display: none; position: absolute; bottom: 3.5rem; left: .5rem; right: .5rem; z-index: 70; background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; box-shadow: 0 4px 12px rgba(0,0,0,.08); padding: .25rem; }
.sb-user-menu.show { display: block; }
.sb-user-mi { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .75rem; border: none; background: transparent; border-radius: .375rem; font-size: .875rem; color: #111827; text-decoration: none; cursor: pointer; text-align: left; box-sizing: border-box; }
.sb-user-mi:hover { background: #f5f5f6; }

/* ===== 登录/注册弹窗（Vue LoginView/RegisterView 复刻） ===== */
.login-dlg { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; }
.login-dlg-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.login-dlg-card { position: relative; z-index: 1; width: 100%; max-width: 425px; background: #fff; border-radius: .5rem; box-shadow: 0 10px 40px rgba(0,0,0,.2); padding: 1.5rem; box-sizing: border-box; max-height: 90vh; overflow-y: auto; }
.login-dlg-title { text-align: center; margin-bottom: 1rem; }
.login-dlg-title h2 { font-size: 1.25rem; font-weight: 600; color: #111827; margin: 0 0 .25rem; }
.login-dlg-title p { font-size: .875rem; color: #6b7280; margin: 0; }
.login-alert { display: flex; flex-direction: column; gap: .25rem; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: .5rem; padding: .75rem 1rem; font-size: .875rem; margin-bottom: 1rem; }
.login-alert b { font-weight: 600; }
.lg-field { margin-bottom: 1rem; }
.lg-field label { display: flex; align-items: center; justify-content: space-between; font-size: .875rem; font-weight: 500; color: #111827; margin-bottom: .375rem; }
.lg-forgot { font-size: .875rem; color: #6b7280; text-decoration: underline; text-underline-offset: 2px; }
.lg-field input { width: 100%; padding: .5rem .75rem; border: 1px solid #e5e7eb; border-radius: .375rem; font-size: .9375rem; color: #111827; background: #fff; outline: none; box-sizing: border-box; }
.lg-field input:focus { border-color: #111827; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.lg-captcha-row { display: flex; gap: .5rem; align-items: stretch; }
.lg-captcha-row input { flex: 1; }
.lg-captcha-img { width: 8.5rem; height: 2.5rem; border: 1px solid #e5e7eb; border-radius: .375rem; cursor: pointer; object-fit: cover; flex: none; background: #f9fafb; }
.lg-submit { width: 100%; padding: .5rem 1rem; border: none; border-radius: .5rem; background: #000; color: #fff; font-size: .875rem; font-weight: 500; line-height: 1.25rem; cursor: pointer; min-width: 200px; max-width: 300px; display: block; margin: 0 auto; transition: opacity .15s; }
.lg-submit:hover { opacity: .9; }
.lg-or { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 .75rem; }
.lg-or::before, .lg-or::after { content: ''; flex: 1; border-top: 1px solid #e5e7eb; }
.lg-or span { font-size: .8125rem; color: #6b7280; white-space: nowrap; }
.lg-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.lg-social-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: .5rem 0; border: 1px solid #e5e7eb; border-radius: .375rem; background: #fff; cursor: pointer; }
.lg-social-btn:hover { background: #f9fafb; }
.lg-social-btn svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.lg-switch { text-align: center; font-size: .875rem; color: #6b7280; }
.lg-switch a { color: #111827; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* 主区顶部白色条（SidebarTrigger 复刻）：桌面流内右移，移动端固定全宽 */
.topbar { position: static; margin-left: 16rem; height: 3.5rem; display: flex; align-items: center; gap: .75rem; padding: 0 1rem; background: #fff; box-sizing: border-box; }
.topbar-trigger { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .375rem; color: #4b5563; background: transparent; border: none; cursor: pointer; padding: 0; }
.topbar-trigger:hover { background: #f5f5f6; }
.topbar-trigger-ic { width: 1.25rem; height: 1.25rem; }
.topbar-logo { font-weight: 700; color: #111827; text-decoration: none; font-size: 1rem; }

/* 侧边栏页面布局：正文右移、折叠联动 */
.sidebar-main { margin-left: 16rem; box-sizing: border-box; }
.sidebar-page .site-footer { margin-left: 16rem; }
body.sb-collapsed .topbar { margin-left: 3rem; }
body.sb-collapsed .sidebar-main { margin-left: 3rem; }
body.sb-collapsed .site-footer { margin-left: 3rem; }
.sidebar-page { background: #fff; }

/* 折叠态（桌面 icon 模式） */
.app-sidebar.collapsed { width: 3rem; }
.app-sidebar.collapsed .sb-brand-name, .app-sidebar.collapsed .sb-tx, .app-sidebar.collapsed .sb-group-label { display: none; }
.app-sidebar.collapsed .sb-header { padding: 1.5rem .5rem 1rem; display: flex; justify-content: center; }
.app-sidebar.collapsed .sb-item { justify-content: center; padding: 0; margin-left: .25rem; margin-right: .25rem; }
.app-sidebar.collapsed .sb-login span { display: none; }
.app-sidebar.collapsed .sb-login { padding: 0; }

/* 桌面端 ≥768px */
@media (min-width: 768px) {
    .topbar-logo { display: none; }
}
/* 移动端 <768px：offcanvas 侧边栏 + 固定全宽顶条 */
@media (max-width: 767.98px) {
    .app-sidebar { width: 18rem; transform: translateX(-100%); }
    .app-sidebar.open { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,.25); }
    .topbar { position: fixed; top: 0; left: 0; right: 0; margin-left: 0; border-bottom: 1px solid #e5e7eb; z-index: 50; }
    .topbar-logo { display: inline; }
    .topbar-mask { display: none; }
    .topbar-mask.show { display: block; position: fixed; inset: 0; z-index: 55; background: transparent; }
    .sidebar-page { padding-top: 3.5rem; }
    .sidebar-main { margin-left: 0; }
    .sidebar-page .site-footer { margin-left: 0; }
    .app-sidebar.collapsed { width: 18rem; }
}

/* ===== Logo 顶部条（Vue Logo.vue 复刻，纯自定义类） ===== */
.lb-nav { width: 100%; box-sizing: border-box; }
.lb-nav-inner { max-width: 80rem; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; }
@media (min-width: 768px) { .lb-nav-inner { padding: 1.5rem 1.5rem; } }
.lb-nav-left { flex: none; }
.lb-brand { display: flex; align-items: center; gap: .375rem; text-decoration: none; color: #111827; }
.lb-brand-ic { width: 1.5rem; height: 1.5rem; display: block; }
@media (min-width: 768px) { .lb-brand-ic { width: 1.75rem; height: 1.75rem; } }
.lb-brand-name { font-weight: 700; font-size: 1.125rem; color: #111827; white-space: nowrap; }
@media (min-width: 768px) { .lb-brand-name { font-size: 1.25rem; } }
.lb-desk-nav { display: none; }
.lb-link { font-size: .875rem; font-weight: 600; line-height: 1.5rem; color: #111827; text-decoration: none; transition: color .15s; white-space: nowrap; }
.lb-link:hover { color: #374151; }
.lb-link-active { padding: .5rem 1rem; background: #000; color: #fff; border-radius: .375rem; }
.lb-link-active:hover { background: #1f2937; color: #fff; }
.lb-nav-right { flex: none; }
.lb-burger { display: inline-flex; align-items: center; justify-content: center; margin-right: -.25rem; border-radius: .375rem; padding: .5rem; color: #374151; background: transparent; border: none; cursor: pointer; }
.lb-burger:hover { background: #f3f4f6; }
.lb-burger-ic { width: 1.25rem; height: 1.25rem; display: block; }
@media (min-width: 1024px) {
    .lb-desk-nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: 2rem; }
    .lb-burger { display: none; }
}
.lb-mask { display: none; }
.lb-mask.show { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.25); }
.lb-drawer { display: none; position: fixed; top: 0; bottom: 0; right: 0; z-index: 100; width: 100%; max-width: 24rem; overflow-y: auto; background: #fff; padding: 1rem; box-sizing: border-box; box-shadow: -1px 0 0 rgba(17,24,39,.1); }
.lb-drawer.show { display: block; }
.lb-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.lb-drawer-brand { font-weight: 700; font-size: 1.125rem; color: #111827; text-decoration: none; }
.lb-close { display: inline-flex; align-items: center; justify-content: center; border-radius: .375rem; padding: .5rem; color: #374151; background: transparent; border: none; cursor: pointer; }
.lb-close:hover { background: #f3f4f6; }
.lb-close-ic { width: 1.25rem; height: 1.25rem; display: block; }
.lb-drawer-links { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(107,114,128,.1); }
.lb-drawer-link { display: block; margin: 0 -.75rem; border-radius: .5rem; padding: .5rem .75rem; font-size: 1rem; font-weight: 600; line-height: 1.75rem; color: #111827; text-decoration: none; }
.lb-drawer-link:hover { background: #f9fafb; }

/* ===== 历史测算记录条（Vue BaziPage 等历史下拉复刻） ===== */
.hist-bar { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 1.25rem 0 1.5rem; flex-wrap: wrap; padding: 0 1rem; box-sizing: border-box; }
.hist-label { font-size: .875rem; font-weight: 500; color: #111827; white-space: nowrap; }
.hist-sel { width: 300px; max-width: 100%; height: 2.5rem; padding: 0 .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: #fff; font-size: .875rem; color: #111827; outline: none; cursor: pointer; box-sizing: border-box; appearance: auto; }
.hist-sel:focus { border-color: #111827; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.hist-new { height: 2.5rem; padding: 0 1.1rem; border: none; border-radius: .5rem; background: #171717; background: hsl(var(--primary)); color: #fff; font-size: .875rem; font-weight: 500; cursor: pointer; white-space: nowrap; box-sizing: border-box; }
.hist-new:hover { background: #1f2937; background: hsl(var(--primary)); filter: brightness(1.12); }
.hist-new:active { transform: translateY(1px); }
.hist-back { display: block; margin: 1.25rem auto 1.5rem; height: 2.5rem; padding: 0 1.1rem; border: none; border-radius: .5rem; background: #171717; background: hsl(var(--primary)); color: #fff; font-size: .875rem; font-weight: 500; cursor: pointer; white-space: nowrap; box-sizing: border-box; }
.hist-back:hover { background: #1f2937; background: hsl(var(--primary)); filter: brightness(1.12); }
.hist-back:active { transform: translateY(1px); }
.hist-del { height: 2.5rem; padding: 0 1rem; border: 1px solid #e5e7eb; border-radius: .5rem; background: #fff; color: #b91c1c; font-size: .875rem; font-weight: 500; cursor: pointer; white-space: nowrap; box-sizing: border-box; }
.hist-del:hover { background: #fef2f2; border-color: #fecaca; }

/* ===== bz-* 布局/表单基础类（fm 改造遗漏的公共定义，供 Bazi/ZiweiPai/TarotPai 等页使用） =====
   视觉类（bg-card/border-border/text-foreground 等）由 fatemaster.css Tailwind 承载，
   此处仅补布局行为：bz-grid 栅格、bz-field 表单控件、bz-hint 提示文字。 */
.bz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.bz-grid > .bz-field.col-span-full, .bz-grid > .col-span-full { grid-column: 1 / -1; }
.bz-field { min-width: 0; }
.bz-field label { display: block; font-size: .8125rem; color: #6b7280; margin-bottom: .375rem; font-weight: 500; }
.bz-field input, .bz-field select, .bz-field textarea { width: 100%; padding: .55rem .75rem; border: 1px solid #e5e7eb; border-radius: .5rem; font-size: .9375rem; color: #111827; background: #fff; outline: none; box-sizing: border-box; }
.bz-field textarea { min-height: 84px; resize: vertical; line-height: 1.7; }
.bz-field input:focus, .bz-field select:focus, .bz-field textarea:focus { border-color: #111827; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.bz-hint { font-size: .75rem; color: #9ca3af; margin-top: .375rem; }
@media (max-width: 720px) { .bz-grid { grid-template-columns: 1fr; } }