/* ===== 太乙数衍 站点公共样式（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: #111827; color: #fff; font-size: .875rem; font-weight: 500; cursor: pointer; white-space: nowrap; box-sizing: border-box; }
.hist-new:hover { background: #1f2937; }
.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: #111827; color: #fff; font-size: .875rem; font-weight: 500; cursor: pointer; white-space: nowrap; box-sizing: border-box; }
.hist-back:hover { background: #1f2937; }
.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; }