/* ================================================================
   bazi-theme.css  —  UI Enhancement Layer  v1.0
   加载在 app-style.css 之后，对5个主页面进行视觉统一增强。
   仅叠加样式，不破坏原有功能与布局。
   ================================================================ */

/* ——— 1. 导航栏增强 ——— */
.top-nav {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
    scrollbar-width: none;
}
.top-nav::-webkit-scrollbar { display: none; }

.nav-item {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-item:hover {
    color: var(--accent-gold);
}
.nav-item.active {
    font-weight: 700;
}

.top-nav .home-tab {
    flex: 0.3333;
    min-width: 42px;
    padding-left: 6px;
    padding-right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-tab-icon {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
}

.home-tab:hover .home-tab-icon {
    stroke: var(--accent-gold);
}

.home-tab.active .home-tab-icon {
    stroke: var(--accent-gold);
}

.top-nav .member-center-tab {
    flex: 0.5;
    min-width: 48px;
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-center-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

.member-center-tab:hover .member-center-icon {
    stroke: var(--accent-gold);
}

.member-center-tab.active .member-center-icon {
    stroke: var(--accent-gold);
}

/* ——— 2. 性别标签增强 ——— */
.gender-tag {
    width: 36px;
    height: 36px;
    font-size: 14px;
}
.gender-tag.male {
    background: linear-gradient(135deg, #5b86e5, #36d1dc);
}
.gender-tag.female {
    background: linear-gradient(135deg, #f857a6, #ff5858);
}

/* ——— 3. 命主信息条增强 ——— */
.basic-info {
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* ——— 4. 四柱英雄展示带（所有页面共用） ——— */
.pillar-hero-band {
    background: linear-gradient(135deg, #2d1b69 0%, #11998e 100%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 16px 12px;
    gap: 4px;
    box-shadow: 0 4px 16px rgba(45, 27, 105, 0.28);
}
.pillar-hero-item {
    text-align: center;
    flex: 1;
    position: relative;
}
.pillar-hero-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
}
.pillar-hero-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}
.pillar-hero-gan {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2px;
}
.pillar-hero-zhi {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 5px;
}
.pillar-hero-nayin {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.3px;
    min-height: 14px;
}
/* 英雄区五行色：深色背景上的亮色版 */
.pillar-hero-band .w-wood  { color: #5edb7e; }
.pillar-hero-band .w-fire  { color: #ff8c7a; }
.pillar-hero-band .w-earth { color: #f0c060; }
.pillar-hero-band .w-metal { color: #ffe066; }
.pillar-hero-band .w-water { color: #7ecdf5; }

/* ——— 5. 统一区块标题样式 ——— */
/* detail.php: .section-title
   dayun.php : .analysis-title / .target-form-title
   paipan.php: .shensha-title
   所有标题统一加 4px 左金条 */
.section-title,
.analysis-title,
.shensha-title,
.target-form-title {
    border-left: 4px solid var(--accent-gold) !important;
    padding-left: 12px !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* info-card-title 改为渐变背景条（替代原先的伪元素金竖线） */
.info-card-title {
    background: linear-gradient(90deg, #e8d5b5 0%, #d4c4a8 100%);
    padding: 11px 15px 11px 15px;
    margin: -15px -15px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    border-radius: 12px 12px 0 0;
    border-left: 4px solid var(--accent-gold);
    border-bottom: 1px solid #d0bc9a;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.info-card-title::before {
    display: none !important;
}

/* ——— 6. info-card 卡片增强 ——— */
.info-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* ——— 7. paipan.php 八字主表标题增强 ——— */
.bazi-main-table th {
    background: linear-gradient(180deg, #e8d5b5 0%, #d4c4a8 100%);
    font-size: 13px;
    padding: 10px 6px;
}
.bazi-main-table .label-col {
    background: #f4efe7;
}

/* ——— 8. dayun.php 分析卡片增强 ——— */
.analysis-card {
    border: 1px solid #ede4d3 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}
.runtime-card {
    background: #fdf9f4;
    border: 1px solid #ede4d3;
}
.pillar-item {
    background: #fdf9f4;
}
.timeline-node {
    background: #fdf9f4;
    border-color: #e4d7c0;
}
.heatmap-cell {
    background: #fdf9f2;
}
.chip {
    background: #fdf9f4;
    border-color: #e4d7c0;
}

/* ——— 9. liunian.php 大运分组标题行 ——— */
.dayun-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #e8d5b5 0%, #d4c4a8 100%);
    border-left: 4px solid var(--accent-gold);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.dayun-group-gz {
    font-size: 18px;
    font-weight: 700;
}
.dayun-group-shishen {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 400;
}
.dayun-group-age {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}
.dayun-group-current {
    background: var(--accent-gold);
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
    font-weight: 600;
}

/* liunian cell 轻微增强 */
.liunian-cell {
    padding: 9px 3px;
}
.cell-ganzhi {
    font-size: 16px;
    letter-spacing: 1px;
}
/* 用 box-shadow 替代 ::before 伪元素边框，更简洁 */
.liunian-cell.current {
    box-shadow: inset 0 0 0 2px var(--accent-gold);
}
.liunian-cell.current::before {
    display: none;
}

/* ——— 10. paipan.php 输入表单页增强（无参数模式） ——— */
.input-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #f5f0e8 0%, #e8ddd0 100%);
    padding: 24px 16px;
}
.input-container .header {
    text-align: center;
    margin-bottom: 24px;
}
.input-container .header h1 {
    font-size: 26px;
    font-weight: 700;
    color: #5a4020;
    letter-spacing: 4px;
}
.input-form {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    max-width: 380px;
    width: 100%;
}
.btn-primary {
    background: linear-gradient(135deg, #d4a574 0%, #b8773a 100%) !important;
    letter-spacing: 2px;
    font-size: 15px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(184, 119, 58, 0.45);
}

/* ——— 11. detail.php section-title 小调整 ——— */
/* 已由统一 .section-title 规则覆盖 */
.section-title small {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 6px;
}
/* 四柱表格行背景区分 */
.sizhu-cell.nayin    { background: rgba(212, 175, 55, 0.04); }
.sizhu-cell.shensha  { background: rgba(155, 89, 182, 0.04); }
.sizhu-cell.changsheng { background: rgba(22, 160, 133, 0.04); }

/* ——— 12. 响应式调整 ——— */
@media (max-width: 768px) {
    /* 横向容器隐藏滚动条 */
    .dayun-scroll::-webkit-scrollbar,
    .flow-container::-webkit-scrollbar,
    .dayun-container::-webkit-scrollbar {
        display: none;
    }
    .dayun-scroll,
    .flow-container,
    .dayun-container {
        scrollbar-width: none;
    }
    /* 英雄带字号缩小 */
    .pillar-hero-gan,
    .pillar-hero-zhi {
        font-size: 26px;
    }
    .pillar-hero-band {
        padding: 12px 8px;
    }
}
@media (max-width: 375px) {
    .pillar-hero-gan,
    .pillar-hero-zhi {
        font-size: 22px;
    }
}