/* File: public/css/shell.css
 * 页面外壳统一样式（八字 / 六爻 / 紫微 排盘页共用）：纸色底、浅色顶栏、宋体标题、卡片与按钮。
 * 在各页面内联样式之后加载，用于覆盖旧的深色顶栏与渐变标题区。
 * 各页面在 <html data-tool="bazi|liuyao|ziwei"> 上声明所属工具，决定主色。
 */
:root {
    --color-bg-light: #F7F3EC;
    --color-border: #E2D9CB;
    --color-input-border: #B9AE9B;
    --radius-lg: 12px;
    --tool: #3E6B53;
    --tool-dark: #2F5440;
    --tool-soft: #EEF4F0;
}
html[data-tool="liuyao"] { --tool: #52435D; --tool-dark: #3F3348; --tool-soft: #F1EDF4; }
html[data-tool="ziwei"] { --tool: #A6536A; --tool-dark: #8A4257; --tool-soft: #FBF0F3; }

body { background-color: #F7F3EC; color: #1F2C38; }
h1, h2, h3 { font-family: 'Noto Serif SC', serif; }

/* 顶栏：浅色，底部细线；当前工具用下划线标出 */
.main-header { background-color: #F7F3EC; color: #1F2C38; box-shadow: none; border-bottom: 1px solid #E2D9CB; padding: 0.5rem 0; }
.logo { color: #1F2C38; }
.logo-icon { background: #2C3E50; color: #fff; }
.logo-text { color: #1F2C38; font-weight: 700; }
.main-nav { margin-left: 2rem; gap: 0.25rem; }
.nav-item { color: #3A4651; border-radius: 0; padding: 0.7rem 1rem; border-bottom: 3px solid transparent; min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
.nav-item:hover { color: #1F2C38; background-color: transparent; border-bottom-color: #C9B99C; }
.nav-item.active { color: var(--tool); background-color: transparent; border-bottom-color: var(--tool); font-weight: 700; }
#currentUser { color: #3A4651; }
#logoutBtn, .gg-login-btn { color: #2C3E50 !important; border: 1px solid #2C3E50; background: transparent; }
#logoutBtn:hover, .gg-login-btn:hover { background-color: #2C3E50; color: #fff !important; }

/* 标题区：纸色底，宋体大标题，去掉深色渐变 */
.page-title-area { background: #F7F3EC; color: #1F2C38; padding: 2.5rem 0 1rem; text-align: left; border-bottom: 0; }
.page-title-bg { display: none; }
.page-title-content { max-width: 1140px; margin: 0 auto; }
.page-title { font-family: 'Noto Serif SC', serif; font-size: 2.1rem; color: #1F2C38; margin-bottom: 0.25rem; letter-spacing: 0.02em; }
.page-title::after { content: ''; display: block; width: 48px; height: 3px; background: var(--tool); margin-top: 10px; border-radius: 2px; }
.page-subtitle { color: #4A5560; opacity: 1; margin: 0; max-width: 640px; }

/* 卡片 */
.card { border-color: #E2D9CB; border-radius: 12px; box-shadow: none; }
.card:hover { box-shadow: none; }
.card-header { background-color: #FBFAF6; border-bottom-color: #E2D9CB; }
.card-icon { background-color: var(--tool-soft); color: var(--tool); }
.card-title { font-family: 'Noto Serif SC', serif; color: #1F2C38; }

/* 主按钮跟随工具主色 */
.btn-primary { background-color: var(--tool); border-color: var(--tool); color: #fff; }
.btn-primary:hover:not(:disabled) { background-color: var(--tool-dark); border-color: var(--tool-dark); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--tool); outline-offset: 1px; }

/* 页脚 */
.main-footer { background-color: #1F2C38; }
.footer-disclaimer { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); margin: 0 auto 0.75rem; }

@media (max-width: 768px) {
    .main-nav { margin-left: 0; }
    .page-title-area { padding: 1.5rem 0 0.5rem; }
    .page-title { font-size: 1.6rem; }
}