/* SOLUNA - 样式表 */
/* 配色方案参考 OmniLoom 项目，支持深色/浅色模式切换 */

/* 基础变量（深色模式为默认） */
html {
    --bg: #06131b;
    --panel: #0b1c28;
    --panel-2: #102635;
    --line: rgba(218, 177, 95, .26);
    --muted: #8fa5b4;
    --text: #edf6f7;
    --gold: #e8b55b;
    --gold-2: #ffd28a;
    --red: #ef6249;
    --green: #4fc37a;
    --blue: #4f9de8;
    --shadow: 0 18px 60px rgba(0, 0, 0, .35);

    /* 衍生变量 */
    --card-bg: var(--panel);
    --card-border: var(--line);
    --text-primary: var(--text);
    --text-secondary: var(--muted);
    --text-light: rgba(143, 165, 180, .7);
    --accent-red: var(--red);
    --accent-green: var(--green);
    --accent-yellow: var(--gold);
    --accent-brown: var(--gold-2);
    --accent-gold: var(--gold);
    --tag-good-bg: rgba(79, 195, 122, .14);
    --tag-good-color: var(--green);
    --tag-bad-bg: rgba(239, 98, 73, .14);
    --tag-bad-color: var(--red);
    --tag-info-bg: rgba(79, 157, 232, .14);
    --tag-info-color: var(--blue);
    --tag-lucky-bg: rgba(232, 181, 91, .14);
    --tag-lucky-color: var(--gold);

    /* 九宫飞星卡片变量（深色模式默认） */
    --flystar-cell-bg: #0e2332;
    --flystar-cell-border: rgba(218, 177, 95, .15);
    --flystar-cell-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    --flystar-cell-shadow-hover: 0 6px 16px rgba(0, 0, 0, .35);
    --flystar-palace-bg: rgba(218, 177, 95, .1);
    --flystar-palace-border: rgba(218, 177, 95, .2);
    --flystar-item-bg: rgba(255, 255, 255, .06);

    /* 卡片底色变量（深色模式继承 panel-2，浅色模式覆盖为淡米白） */
    --cell-bg: var(--panel-2);

    --radius: 10px;
    --radius-sm: 6px;
    --font-serif: "Noto Serif SC", "Source Han Serif SC", "SimSun", "STSong", serif;
    --font-sans: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

/* 浅色模式 */
html[data-theme="light"] {
    --bg: #f5f7f9;
    --panel: #ffffff;
    --panel-2: #f0f2f5;
    --line: rgba(180, 140, 80, .35);
    --muted: #6b7b8a;
    --text: #1a1a1a;
    --gold: #b8860b;
    --gold-2: #c9910f;
    --red: #d44a3a;
    --green: #3ba862;
    --blue: #3a85d0;
    --shadow: 0 8px 30px rgba(0, 0, 0, .1);

    --text-light: rgba(107, 123, 138, .8);
    --tag-good-bg: rgba(59, 168, 98, .12);
    --tag-bad-bg: rgba(212, 74, 58, .12);
    --tag-info-bg: rgba(58, 133, 208, .12);
    --tag-lucky-bg: rgba(184, 134, 11, .12);

    /* 浅色模式下的卡片底色（淡米白，与金色主调协调，避免灰色感） */
    --cell-bg: #fdfbf5;

    /* 九宫飞星卡片变量（浅色模式：白底卡片） */
    --flystar-cell-bg: #ffffff;
    --flystar-cell-border: rgba(0, 0, 0, .06);
    --flystar-cell-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    --flystar-cell-shadow-hover: 0 4px 12px rgba(0, 0, 0, .1);
    --flystar-palace-bg: rgba(0, 0, 0, .04);
    --flystar-palace-border: rgba(0, 0, 0, .06);
    --flystar-item-bg: rgba(0, 0, 0, .04);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    color: var(--text);
    background:
        radial-gradient(circle at 14% 6%, rgba(232, 181, 91, .10), transparent 24rem),
        linear-gradient(135deg, #040b11 0%, #092033 48%, #06131b 100%);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
    padding: 18px;
    transition: background .3s ease, color .3s ease;
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 14% 6%, rgba(232, 181, 91, .06), transparent 24rem),
        linear-gradient(135deg, #f5f7f9 0%, #eef1f4 48%, #f5f7f9 100%);
}

/* 页面容器 */
.app-container {
    width: min(1480px, calc(100% - 24px));
    margin: 0 auto;
    padding: 6px 0 12px;
}

/* 顶部工具栏 */
.toolbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: rgba(7, 21, 31, .86);
    box-shadow: var(--shadow);
    margin-bottom: 18px;
    flex-wrap: wrap;
    transition: background .3s ease, border-color .3s ease;
}

html[data-theme="light"] .toolbar {
    background: rgba(255, 255, 255, .92);
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toolbar label {
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

.toolbar input,
.toolbar select {
    padding: 8px 12px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color .2s, background .3s;
}

html[data-theme="light"] .toolbar input,
html[data-theme="light"] .toolbar select {
    background: #f8f9fa;
}

.toolbar input:focus,
.toolbar select:focus {
    border-color: var(--gold);
}

.toolbar input[type="date"] {
    width: 150px;
}

.toolbar select {
    width: 120px;
}

.birth-ganzhi {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--gold-2);
}

.birth-ganzhi span {
    background: var(--tag-lucky-bg);
    color: var(--tag-lucky-color);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
}

.btn {
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: all .2s;
    outline: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--gold);
    color: #1a1208;
    font-weight: 500;
}

.btn-primary:hover {
    background: var(--gold-2);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
}

.btn-outline:hover {
    background: rgba(232, 181, 91, .1);
    border-color: var(--gold);
    color: var(--gold);
}

.theme-switch {
    margin-left: auto;
}

.theme-switch button {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* 主内容区 */
.main-content {
    display: flex;
    gap: 18px;
    margin-bottom: 18px;
    align-items: stretch;
}

/* 左侧日历区 */
.calendar-section {
    flex: 1.0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    min-width: 0;
    transition: background .3s ease, border-color .3s ease;
}

.section-title {
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--gold-2);
    margin-bottom: 4px;
}

.section-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

/* 月历右上角：返回今日按钮 + 节气角标 */
.calendar-header .section-title {
    flex: 1;
    min-width: 0;
}

.today-btn {
    /* 返回今日按钮，与标题同行右对齐；采用亮色（金色）样式，深浅模式下均醒目 */
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 13px;
    background: var(--gold);
    color: #1a1208;
    border: 1px solid var(--gold);
    font-weight: 500;
}

.today-btn:hover {
    background: var(--gold-2);
    border-color: var(--gold-2);
    color: #1a1208;
}

/* 浅色模式下：返回今日按钮改用淡金底 + 金色字，避免亮金背景在浅底上刺眼 */
html[data-theme="light"] .today-btn {
    background: rgba(184, 134, 11, .12);
    color: var(--gold);
    border: 1px solid rgba(184, 134, 11, .45);
    font-weight: 500;
}

html[data-theme="light"] .today-btn:hover {
    background: rgba(184, 134, 11, .2);
    border-color: var(--gold);
    color: var(--gold);
}

/* 节气角标：日期格内右上角（仅节气日显示，区别于右下角节日图标） */
.cell-term-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--tag-info-bg);
    color: var(--tag-info-color);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-family: var(--font-serif);
    border: 1px solid rgba(79, 157, 232, .35);
    line-height: 1.4;
    z-index: 3;
    max-width: calc(100% - 8px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.month-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 年/月独立导航组 */
.nav-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
}

.nav-label {
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--text);
    min-width: 64px;
    text-align: center;
    font-weight: 500;
}

.nav-btn {
    /* 去掉外部圆圈：改为无边框透明背景的简洁箭头 */
    width: auto;
    min-width: 24px;
    height: 28px;
    padding: 0 6px;
    border: none;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: var(--text-secondary);
    transition: color .2s;
}

.nav-btn:hover {
    background: transparent;
    border-color: transparent;
    color: var(--gold);
}

/* 星期表头 */
.week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.week-day {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    padding: 8px 0;
    font-weight: 500;
}

.week-day.weekend {
    color: var(--red);
}

/* 日期网格 - 固定尺寸 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.calendar-cell {
    background: var(--cell-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    min-height: 118px;
    height: 118px;
    padding: 8px;
    cursor: pointer;
    position: relative;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.calendar-cell:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    transform: translateY(-2px);
    border-color: rgba(232, 181, 91, .45);
}

html[data-theme="light"] .calendar-cell:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

/* 其他月份日期（补齐前后空缺）：使用淡色样式以示区分 */
.calendar-cell.other-month {
    background: transparent;
    border: 1px dashed var(--card-border);
    opacity: .45;
}

.calendar-cell.other-month:hover {
    opacity: .75;
    transform: none;
    box-shadow: none;
}

.calendar-cell.other-month .cell-day,
.calendar-cell.other-month .cell-lunar,
.calendar-cell.other-month .cell-ganzhi,
.calendar-cell.other-month .cell-info {
    color: var(--text-light);
}

.calendar-cell.other-month .cell-day {
    color: var(--muted);
}

.calendar-cell.active {
    border: 2px solid var(--blue);
    background: rgba(58, 133, 208, .08);
}

.calendar-cell.today {
    border: 2px solid var(--gold);
    box-shadow: 0 0 0 1px rgba(232, 181, 91, .2);
}

/* 今天同时被手动选中时，优先显示今日金色边框 */
.calendar-cell.today.active {
    border: 2px solid var(--gold);
}

.cell-day {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
    margin-bottom: 4px;
}

.calendar-cell.weekend .cell-day {
    color: var(--red);
}

.cell-lunar {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    min-width: 0;
}

.cell-ganzhi {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 2px;
    font-family: var(--font-serif);
    display: flex;
    gap: 1px;
}

/* 干支五行配色（参考 OmniLoom 五行色） */
/* 木=绿，火=红，土=金(土黄)，金=灰白，水=蓝 */
.wx-木 { color: #6fdc8e; }
.wx-火 { color: #ff8a72; }
.wx-土 { color: var(--gold-2); }
.wx-金 { color: #c8c8d8; }
.wx-水 { color: #6fb5f0; }

html[data-theme="light"] .wx-木 { color: #2e8b57; }
html[data-theme="light"] .wx-火 { color: #d44a3a; }
html[data-theme="light"] .wx-土 { color: #b8860b; }
html[data-theme="light"] .wx-金 { color: #708090; }
html[data-theme="light"] .wx-水 { color: #3a85d0; }

.cell-solar-term {
    font-size: 11px;
    color: var(--green);
    margin-bottom: 2px;
}

.cell-festival-text {
    font-size: 10px;
    color: var(--red);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    min-width: 0;
}

.cell-level {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 3px;
    width: fit-content;
}

.cell-level.daji {
    background: var(--tag-good-bg);
    color: var(--tag-good-color);
}

.cell-level.ji {
    background: var(--tag-info-bg);
    color: var(--tag-info-color);
}

.cell-level.ping {
    background: rgba(143, 165, 180, .14);
    color: var(--text-secondary);
}

html[data-theme="light"] .cell-level.ping {
    background: rgba(107, 123, 138, .12);
}

.cell-level.xiong {
    background: var(--tag-bad-bg);
    color: var(--tag-bad-color);
}

.cell-level.daxiong {
    background: var(--red);
    color: #fff;
}

.cell-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: auto;
}

.cell-tag {
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--tag-lucky-bg);
    color: var(--tag-lucky-color);
    white-space: nowrap;
}

.cell-tag.bad {
    background: var(--tag-bad-bg);
    color: var(--tag-bad-color);
}

/* 节日图标（右下角） */
.cell-festival-icon {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    z-index: 2;
}

.cell-festival-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 26px;
    right: 0;
    background: var(--panel);
    color: var(--text);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    font-size: 12px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
    z-index: 100;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    text-align: left;
    line-height: 1.5;
}

.cell-festival-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

/* 右侧详情面板 */
.detail-panel {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    min-width: 400px;
    max-width: 620px;
    transition: background .3s ease, border-color .3s ease;
    /* 移除 height: fit-content 和 position: sticky，使其随 flex stretch 与左侧日历区等高度 */
}

.detail-header {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--card-border);
    margin-bottom: 16px;
}

.detail-date-meta {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.detail-date-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 8px;
}

.detail-date-nav {
    /* 去掉外部圆圈：改为无边框透明背景的简洁箭头 */
    width: auto;
    min-width: 24px;
    height: 28px;
    padding: 0 8px;
    border: none;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: color .2s;
    font-size: 20px;
    line-height: 1;
}

.detail-date-nav:hover {
    background: transparent;
    border-color: transparent;
    color: var(--gold);
}

.detail-day-number {
    font-family: var(--font-serif);
    font-size: 56px;
    font-weight: 600;
    color: var(--gold-2);
    line-height: 1;
}

.detail-lunar {
    font-size: 15px;
    color: var(--text-secondary);
    font-family: var(--font-serif);
}

/* 农历两行居中显示（含时辰+生肖） */
.detail-lunar-two-lines {
    text-align: center;
    margin-top: 8px;
}

.detail-lunar-line1,
.detail-lunar-line2 {
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--text);
    line-height: 1.8;
    text-align: center;
}

.detail-lunar-line1 {
    color: var(--text-secondary);
}

.detail-lunar-line2 {
    color: var(--gold-2);
    font-size: 15px;
    font-weight: 500;
}

.detail-solar-terms {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 12px;
}

.detail-solar-terms span strong {
    color: var(--green);
}

/* 日课等级 */
.level-section {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--card-border);
}

.level-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-serif);
}

.level-badge.daji {
    background: var(--tag-good-bg);
    color: var(--tag-good-color);
    border: 1px solid rgba(79, 195, 122, .3);
}

.level-badge.ji {
    background: var(--tag-info-bg);
    color: var(--tag-info-color);
    border: 1px solid rgba(79, 157, 232, .3);
}

.level-badge.ping {
    background: rgba(143, 165, 180, .14);
    color: var(--text-secondary);
    border: 1px solid rgba(143, 165, 180, .25);
}

html[data-theme="light"] .level-badge.ping {
    background: rgba(107, 123, 138, .12);
}

.level-badge.xiong {
    background: var(--tag-bad-bg);
    color: var(--tag-bad-color);
    border: 1px solid rgba(239, 98, 73, .3);
}

.level-badge.daxiong {
    background: var(--red);
    color: #fff;
    border: 1px solid var(--red);
}

.detail-tag {
    padding: 5px 10px;
    border-radius: 16px;
    font-size: 12px;
    background: var(--tag-lucky-bg);
    color: var(--tag-lucky-color);
    border: 1px solid var(--card-border);
}

.detail-tag .tag-value {
    color: var(--gold-2);
    font-weight: 500;
    margin-left: 4px;
}

/* 命主日课 */
.user-day-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--card-border);
}

.user-day-section h3,
.gods-section h3,
.yiji-section h3,
.yiji-level-section h3,
.hour-section h3,
.direction-block-inner h3 {
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--gold-2);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-day-section h3::before,
.gods-section h3::before,
.yiji-section h3::before,
.yiji-level-section h3::before,
.hour-section h3::before,
.direction-block-inner h3::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background: var(--gold);
    border-radius: 2px;
}

.user-day-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
}

.user-day-row .label {
    color: var(--text-secondary);
    min-width: 80px;
}

.user-day-row .value {
    font-family: var(--font-serif);
    color: var(--text);
}

.user-day-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* 吉神凶煞 */
.gods-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--card-border);
}

/* 信息分类组（季节·星座 / 干支生克 / 神煞·胎元） */
.info-group {
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(232, 181, 91, .04);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
}

html[data-theme="light"] .info-group {
    background: rgba(184, 134, 11, .04);
}

.info-group-title {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--card-border);
}

/* 全年24节气表网格 */
.solar-terms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 4px;
}

.solar-term-item {
    position: relative;
    background: var(--cell-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 6px 4px;
    text-align: center;
    transition: all .2s;
}

.solar-term-item.active {
    background: var(--tag-lucky-bg);
    border-color: var(--gold);
}

.solar-term-name {
    font-family: var(--font-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
}

.solar-term-item.active .solar-term-name {
    color: var(--gold-2);
}

.solar-term-date {
    font-size: 11px;
    color: var(--text-light);
}

/* 节气/中气角标（右上角） */
.solar-term-type-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.2;
}

/* 节气角标：蓝色 */
.solar-term-type-badge.type-jie {
    background: rgba(79, 157, 232, .2);
    color: #4f9de8;
}

/* 中气角标：紫色 */
.solar-term-type-badge.type-qi {
    background: rgba(180, 120, 200, .2);
    color: #b478c8;
}

/* 上一年节气：淡色显示 */
.solar-term-item.prev-year {
    opacity: 0.45;
}

/* 跨年节气左上角年份角标（与右上角的节气/中气角标对称，互不重叠） */
.solar-term-year-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.2;
    background: rgba(255, 193, 7, .2);
    color: #ffc107;
    font-family: var(--font-sans, sans-serif);
    z-index: 2;
}

.god-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.god-tag {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.god-tag.good {
    background: var(--tag-good-bg);
    color: var(--tag-good-color);
}

.god-tag.bad {
    background: var(--tag-bad-bg);
    color: var(--tag-bad-color);
}

/* 建除与宜忌 */
.yiji-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    /* 移除底部虚线分隔（用户要求：今日宜忌"忌"下方虚线去掉） */
}

.officer-line {
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--text);
}

.officer-line strong {
    font-family: var(--font-serif);
    color: var(--gold-2);
}

.yiji-row {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

/* 宜/忌 字本身：仅文字颜色，不带色块（宜=绿，忌=红） */
.yiji-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1.8;
}

.yiji-label.yi {
    color: var(--green);
    background: transparent;
}

.yiji-label.ji {
    color: var(--red);
    background: transparent;
}

.yiji-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
    line-height: 1.8;
    flex: 1;
}

/* 宜忌条目按词组色块：宜条目=绿，忌条目=红 */
.yiji-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
}

.yiji-tag.yi-tag {
    background: var(--tag-good-bg);
    color: var(--tag-good-color);
}

.yiji-tag.ji-tag {
    background: var(--tag-bad-bg);
    color: var(--tag-bad-color);
}

/* 宜忌等第前缀色块高亮 */
.level-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 4px;
}

.level-tag.good {
    background: var(--tag-good-bg);
    color: var(--tag-good-color);
}

.level-tag.bad {
    background: var(--tag-bad-bg);
    color: var(--tag-bad-color);
}

.level-tag.ping {
    background: var(--tag-info-bg);
    color: var(--tag-info-color);
}

/* 宜忌等第板块（独立 section，与今日吉神同款容器样式：底部虚线分隔） */
.yiji-level-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--card-border);
}

/* 宜忌等第内容区：等第前缀色块 + 后续文字 */
.yiji-level-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text);
}

/* 命主吉时 */
.hour-section {
    margin-bottom: 16px;
}

.hour-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.hour-cell {
    background: var(--panel-2);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 6px 2px;
    text-align: center;
    font-size: 12px;
}

.hour-cell.lucky {
    background: var(--tag-good-bg);
    border-color: rgba(79, 195, 122, .3);
}

.hour-cell.unlucky {
    background: var(--tag-bad-bg);
    border-color: rgba(239, 98, 73, .3);
}

.hour-cell.user-fav {
    position: relative;
    box-shadow: 0 0 0 2px var(--gold);
}

.hour-name {
    font-family: var(--font-serif);
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text);
}

.hour-ganzhi {
    font-size: 11px;
    color: var(--text-secondary);
}

.hour-time {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 2px;
}

.data-source {
    font-size: 12px;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 10px;
}

/* 月建分析 */
.month-analysis-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    transition: background .3s ease, border-color .3s ease;
}

.month-analysis-section .section-title {
    margin-bottom: 16px;
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.month-card {
    background: var(--panel-2);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 14px 10px;
    text-align: center;
    transition: all .2s;
}

.month-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    border-color: rgba(232, 181, 91, .4);
}

html[data-theme="light"] .month-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.month-card.current {
    border: 2px solid var(--gold);
    background: rgba(232, 181, 91, .08);
}

.month-number {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.month-ganzhi {
    font-family: var(--font-serif);
    font-size: 18px;
    color: var(--gold-2);
    margin-bottom: 8px;
}

.month-level {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

.month-level.daji {
    background: var(--tag-good-bg);
    color: var(--tag-good-color);
}

.month-level.ji {
    background: var(--tag-info-bg);
    color: var(--tag-info-color);
}

.month-level.ping {
    background: rgba(143, 165, 180, .14);
    color: var(--text-secondary);
}

html[data-theme="light"] .month-level.ping {
    background: rgba(107, 123, 138, .12);
}

.month-level.xiong {
    background: var(--tag-bad-bg);
    color: var(--tag-bad-color);
}

.month-level.daxiong {
    background: var(--red);
    color: #fff;
}

.month-tags {
    font-size: 11px;
    color: var(--text-secondary);
}

/* 加载状态 */
.loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.error-message {
    background: var(--tag-bad-bg);
    color: var(--tag-bad-color);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    border: 1px solid rgba(239, 98, 73, .3);
}

/* 响应式 */
@media (max-width: 1100px) {
    .main-content {
        flex-direction: column;
    }

    .detail-panel {
        max-width: none;
    }

    .month-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .toolbar {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .calendar-grid {
        gap: 4px;
    }

    .calendar-cell {
        min-height: 80px;
        height: 80px;
        padding: 4px;
    }

    .cell-day {
        font-size: 14px;
    }

    .cell-lunar,
    .cell-ganzhi,
    .cell-festival-text,
    .cell-solar-term {
        font-size: 10px;
    }

    .month-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hour-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== 以下为新增样式（Task #11：今日方位 / 每日时辰 / 时辰详情弹窗 / 右侧信息行 / 日历单元格合并行）===== */

/* 日历单元格：节气 + 建除合并行 */
.cell-info {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cell-info .cell-term {
    color: var(--green);
    font-weight: 500;
}

.cell-info .cell-officer {
    color: var(--text-light);
}

/* 十二建除文字色块样式：仅"X日"两字带色块（不占整行） */
.officer-text {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.officer-text.good {
    background: var(--tag-good-bg);
    color: var(--tag-good-color);
}

.officer-text.bad {
    background: var(--tag-bad-bg);
    color: var(--tag-bad-color);
}

/* 兼容旧版（.cell-info.good/bad，非色块场景） */
.cell-info.good {
    color: var(--green);
}

.cell-info.bad {
    color: var(--red);
}

/* 右侧详情面板：信息行 */
.info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(218, 177, 95, .12);
    font-size: 14px;
    line-height: 1.6;
}

.info-row:last-child {
    border-bottom: none;
}

/* 彭祖百忌所在行：去掉底部虚线，避免分号下方出现虚线 */
.info-row:has(#pengTabooLine) {
    border-bottom: none;
}

/* 彭祖百忌前后两句之间的分号：使用正常字体大小和颜色，仅保留两侧间距作为分隔 */
.peng-sep {
    color: inherit;
    font-weight: normal;
    margin: 0 6px;
    font-size: inherit;
}

.info-row .info-label {
    flex-shrink: 0;
    width: 64px;
    color: var(--gold);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
}

.info-row .info-value {
    flex: 1;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 14px;
    word-break: break-all;
}

/* 今日方位板块 */
.direction-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
    transition: background .3s ease, border-color .3s ease;
}

.direction-section .section-title {
    margin-bottom: 14px;
}

.direction-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.direction-card {
    background: var(--tag-lucky-bg);
    border: 1px solid rgba(232, 181, 91, .35);
    border-radius: var(--radius);
    padding: 16px 8px;
    text-align: center;
    transition: all .2s;
    cursor: default;
}

.direction-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

html[data-theme="light"] .direction-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.direction-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--gold-2);
    margin-bottom: 6px;
    font-family: var(--font-serif);
    letter-spacing: 1px;
}

.direction-value {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}

/* 每日时辰板块 / 今日宜忌与方位板块（共用同一外框样式） */
.hour-section-full,
.today-combined-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
    transition: background .3s ease, border-color .3s ease;
}

/* 今日宜忌与方位板块：与下方内容间隙增大 */
.today-combined-section {
    margin-bottom: 30px;
}

.hour-section-full .section-title,
.today-combined-section .section-title {
    margin-bottom: 4px;
}

/* 每日时辰板块：标题行（标题 + 提示文字同一行） */
.hour-section-title-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.hour-section-title-row .section-title {
    margin-bottom: 0;
}

.section-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

/* 标题行内的提示文字：去除自身下间距，由容器统一控制 */
.hour-section-title-row .section-hint {
    margin-bottom: 0;
}

.hour-grid-full {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}

.hour-card {
    background: var(--cell-bg);
    /* 使用 2px 透明 border 占位，避免 active 时 border 变粗导致页面跳动 */
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: 8px 2px;
    text-align: center;
    cursor: pointer;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}

.hour-card:hover {
    transform: translateY(-2px);
    border-color: rgba(232, 181, 91, .45);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

html[data-theme="light"] .hour-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

/* 黄道时辰 */
.hour-card.yellow {
    background: var(--tag-good-bg);
    border-color: 2px solid rgba(79, 195, 122, .28);
}

/* 黑道时辰 */
.hour-card.black {
    background: var(--tag-bad-bg);
    border-color: 2px solid rgba(239, 98, 73, .28);
}

/* 选中的时辰（用 outline 替代 border，避免布局抖动） */
.hour-card.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(232, 181, 91, .3);
    transform: translateY(-2px);
}

.hour-card-name {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
    /* 让"子时"与"凶"标记垂直居中对齐 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* 时辰名称后的吉凶标记 */
.hour-card-lucky {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 2px;
    vertical-align: middle;
}

.hour-card-lucky.good {
    background: var(--tag-good-bg);
    color: var(--tag-good-color);
}

.hour-card-lucky.bad {
    background: var(--tag-bad-bg);
    color: var(--tag-bad-color);
}

.hour-card-time {
    font-size: 10px;
    color: var(--text-light);
    line-height: 1.2;
}

/* 时辰详情面板（下方区块，非弹窗） */
.hour-detail-panel {
    background: var(--cell-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 18px 22px;
    min-height: 80px;
    animation: hourPanelIn .2s ease;
}

@keyframes hourPanelIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hour-detail-title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--gold-2);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--card-border);
}

.hour-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.6;
    border-bottom: 1px dashed rgba(218, 177, 95, .1);
}

.hour-detail-row:last-child {
    border-bottom: none;
}

.hour-detail-label {
    flex-shrink: 0;
    width: 96px;
    color: var(--gold-2);
    font-size: 13px;
    letter-spacing: 1px;
}

.hour-detail-value {
    flex: 1;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 14px;
}

.hour-detail-value.good {
    color: var(--green);
}

.hour-detail-value.bad {
    color: var(--red);
}

/* 响应式：今日方位与每日时辰在小屏适配 */
@media (max-width: 1100px) {
    .direction-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .hour-grid-full {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 768px) {
    .direction-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hour-grid-full {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== 第五轮新增样式 ===== */

/* 季节·星座横排（顶部工具栏中，紧随年月导航） */
.season-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* 季节·星座标题（纯文本，无色块，与 chip 值配对显示） */
.season-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-right: 2px;
    margin-left: 4px;
    white-space: nowrap;
}

.season-label:first-child {
    margin-left: 0;
}

.season-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--tag-info-bg);
    color: var(--tag-info-color);
    border: 1px solid var(--card-border);
    font-size: 12px;
    font-family: var(--font-serif);
    white-space: nowrap;
}

/* 季节/星次/星座 chip 的 tooltip：去掉虚线下划线，保留 help 指针 */
.season-chip[data-kb] {
    border-bottom: 1px solid var(--card-border);
    cursor: help;
    transition: background .2s, border-color .2s;
}

.season-chip[data-kb]:hover {
    background: var(--tag-info-bg);
    border-color: var(--tag-info-color);
    filter: brightness(1.1);
}

/* ============================================================
   今日方位（独立板块，从月历板块框中分离）
   ============================================================ */

/* 今日方位区块：独立板块（从月历板块框中分离），与月历分割 */
.direction-block-up {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-top: 2px solid var(--gold, #d4af37);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
    transition: background .3s ease, border-color .3s ease;
}

.direction-block-up .section-title {
    margin-bottom: 14px;
}

/* 压缩今日方位网格 */
.direction-block-up .direction-grid,
.direction-block-inner .direction-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.direction-block-up .direction-card,
.direction-block-inner .direction-card {
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60px;
}

.direction-block-up .direction-name,
.direction-block-inner .direction-name {
    font-size: 14px;
    margin-bottom: 4px;
    letter-spacing: 0;
}

.direction-block-up .direction-value,
.direction-block-inner .direction-value {
    font-size: 14px;
}

/* 合并板块内各子项：去掉虚线分隔，统一上下间隔为 20px，最后一个子项（今日方位）无下间距 */
.today-combined-section .yiji-level-section,
.today-combined-section .gods-section,
.today-combined-section .yiji-section,
.today-combined-section .direction-block-inner {
    border-bottom: none;
    margin-bottom: 20px;
    padding-bottom: 0;
}

.today-combined-section .direction-block-inner:last-child {
    margin-bottom: 0;
}

/* ============================================================
   四飞星同行：流年 | 流月 | 流日 | 流时（尺寸完全一致）
   ============================================================ */

/* 四飞星同行布局容器 */
.all-flystar-section {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    align-items: stretch;
}

/* 统一飞星区块样式：flex:1 使四个区块平分空间 */
.flystar-block-unified {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 16px 12px;
    box-shadow: var(--shadow);
    min-width: 0;
    transition: background .3s ease, border-color .3s ease;
}

/* 区块标题统一居中 */
.flystar-block-unified .section-title {
    font-size: 18px;
    margin-bottom: 12px;
    text-align: center;
}

/* 四个飞星板块用不同色块区分：在通用样式基础上加左侧色条 + 标题色 */
/* 流年：金色（年家紫白，主一年气运） */
.flystar-block-unified.flystar-year {
    border-top: 3px solid var(--gold);
}
.flystar-block-unified.flystar-year .section-title {
    color: var(--gold);
}

/* 流月：青色（月家紫白，主一月气运） */
.flystar-block-unified.flystar-month {
    border-top: 3px solid var(--blue);
}
.flystar-block-unified.flystar-month .section-title {
    color: var(--blue);
}

/* 流日：红色（日家紫白，主一日气运） */
.flystar-block-unified.flystar-day {
    border-top: 3px solid var(--red);
}
.flystar-block-unified.flystar-day .section-title {
    color: var(--red);
}

/* 流时：绿色（时家紫白，主一个时辰气运） */
.flystar-block-unified.flystar-hour {
    border-top: 3px solid var(--green);
}
.flystar-block-unified.flystar-hour .section-title {
    color: var(--green);
}

/* ============================================================
   九宫飞星（流日 / 流年 / 流月 / 流时）统一卡片式样式
   ============================================================ */

/* 四个九宫飞星 grid 统一尺寸：flex:1 平分宽度 + aspect-ratio:1 保证正方形格子 */
.flystar-grid,
.flystar-grid-unified {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
    aspect-ratio: 1;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* 九宫格卡片：圆角、阴影、白底，与图片一致；overflow 防止内容溢出 */
.flystar-cell {
    position: relative;
    background: var(--flystar-cell-bg, #fff);
    border: 1px solid var(--flystar-cell-border, rgba(0, 0, 0, .06));
    border-radius: 8px;
    padding: 18px 3px 6px;
    box-shadow: var(--flystar-cell-shadow, 0 2px 8px rgba(0, 0, 0, .06));
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    min-width: 0;
    transition: transform .15s ease, box-shadow .2s ease, background .3s ease, border-color .3s ease;
}

.flystar-cell:hover {
    transform: translateY(-2px);
    box-shadow: var(--flystar-cell-shadow-hover, 0 4px 12px rgba(0, 0, 0, .1));
}

/* 方位文字：左上角横排 */
.flystar-direction {
    position: absolute;
    top: 4px;
    left: 5px;
    font-size: 10px;
    color: var(--text-secondary);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

/* 宫位标签：顶部中央圆角 pill */
.flystar-palace {
    display: inline-block;
    font-size: 9px;
    color: var(--text-secondary);
    background: var(--flystar-palace-bg, rgba(0, 0, 0, .04));
    border: 1px solid var(--flystar-palace-border, rgba(0, 0, 0, .06));
    border-radius: 999px;
    padding: 1px 6px;
    margin-bottom: 3px;
    line-height: 1.4;
    white-space: nowrap;
}

/* 星名区域：星名 + 彩色下划线 */
.flystar-name-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2px;
}

.flystar-name {
    font-family: var(--font-serif);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
}

/* 星名下方彩色短横条 */
.flystar-name-bar {
    width: 22px;
    height: 2px;
    border-radius: 2px;
    margin-top: 2px;
}

.star-bar-1 { background: linear-gradient(90deg, #4a90d9, #6ba3e0); }
.star-bar-2 { background: linear-gradient(90deg, #5a5a5a, #777); }
.star-bar-3 { background: linear-gradient(90deg, #4caf50, #66bb6a); }
.star-bar-4 { background: linear-gradient(90deg, #43a047, #66bb6a); }
.star-bar-5 { background: linear-gradient(90deg, #f9a825, #fdd835); }
.star-bar-6 { background: linear-gradient(90deg, #bfa15f, #d4b483); }
.star-bar-7 { background: linear-gradient(90deg, #e53935, #ef5350); }
.star-bar-8 { background: linear-gradient(90deg, #f9a825, #ffca28); }
.star-bar-9 { background: linear-gradient(90deg, #8e24aa, #ab47bc); }

/* 风水位 / 吉凶位 */
.flystar-position {
    font-size: 9px;
    color: var(--text-secondary);
    line-height: 1.2;
    margin-bottom: 3px;
    white-space: nowrap;
}

/* 具体事项标签容器 */
.flystar-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    line-height: 1;
}

.flystar-item-tag {
    font-size: 8px;
    color: var(--text-secondary);
    background: var(--flystar-item-bg, rgba(0, 0, 0, .04));
    border-radius: 4px;
    padding: 2px 4px;
    white-space: nowrap;
}

/* 空状态 */
.flystar-empty {
    text-align: center;
    color: var(--text-light);
    padding: 40px 0;
}

/* 今年节气表独立 section */
.solar-terms-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
    transition: background .3s ease, border-color .3s ease;
}

.solar-terms-section .section-title {
    margin-bottom: 14px;
}

/* 节气表网格：按宽度自适应列数 */
.solar-terms-section .solar-terms-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

/* 响应式：小屏下四飞星改为竖排 */
@media (max-width: 900px) {
    .all-flystar-section {
        flex-direction: column;
    }
    .flystar-block-unified {
        max-width: 320px;
        margin: 0 auto;
        width: 100%;
    }
}

/* 大屏下四飞星横排时，确保每个格子内容不溢出 */
@media (min-width: 901px) {
    .flystar-block-unified {
        min-width: 0;
    }
}

/* ============================================================
   页面底部 - 版本更新说明按钮 + 弹窗（参考 OmniLoom 项目样式）
   ============================================================ */

/* 页面底部容器 */
.page-footer {
    text-align: center;
    padding: 12px 0;
    margin-top: 0;
}

/* AI 辅助分析容器与页脚之间的间距进一步收紧 */
#viewRiKe .ai-panel {
    margin-bottom: 8px;
}

/* 版本更新说明按钮：金色边框 + 半透明背景，鼠标悬浮加深 */
.changelog-btn {
    padding: 6px 16px;
    border: 1px solid rgba(232, 181, 91, .4);
    border-radius: 6px;
    background: rgba(232, 181, 91, .08);
    color: var(--gold-2);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
}

.changelog-btn:hover {
    background: rgba(232, 181, 91, .18);
    border-color: var(--gold);
    transform: translateY(-1px);
}

/* 弹窗遮罩层（覆盖整屏，点击空白处可关闭） */
.changelog-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.changelog-modal.open {
    display: flex;
}

.changelog-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
}

/* 弹窗主体：居中、可滚动、深色背景、金色边框 */
.changelog-modal-content {
    position: relative;
    background: var(--panel);
    border: 1px solid rgba(232, 181, 91, .25);
    border-radius: 12px;
    width: 760px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 22px 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/* 弹窗头部：标题 + 关闭按钮 */
.changelog-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(232, 181, 91, .2);
}

.changelog-modal-header h2 {
    margin: 0;
    color: var(--gold-2);
    font-size: 18px;
    font-weight: 800;
    font-family: var(--font-serif);
}

/* 关闭按钮：圆形、金色渐变 */
.changelog-close-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffd990, #d89b42);
    color: #1a1208;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all .2s;
}

.changelog-close-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 12px rgba(255, 217, 144, .5);
}

/* 弹窗正文：版本日志内容（解析 CHANGELOG.md 后渲染） */
.changelog-body {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
}

/* 版本标题（## 二级标题 → h3）：金色、加粗、底部金色虚线 */
.changelog-body h3 {
    color: var(--gold-2);
    font-size: 15px;
    font-weight: 800;
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(232, 181, 91, .2);
    font-family: var(--font-serif);
}

.changelog-body h3:first-child {
    margin-top: 0;
}

/* 板块标题（### 三级标题 → h4）：金色、加粗 */
.changelog-body h4 {
    color: var(--gold);
    font-size: 14px;
    font-weight: 700;
    margin: 10px 0 4px;
}

/* 列表 */
.changelog-body ul {
    margin: 4px 0 8px 0;
    padding-left: 20px;
}

.changelog-body li {
    margin: 2px 0;
}

/* 引用块、段落、分隔线、粗体、行内代码 */
.changelog-body blockquote {
    margin: 8px 0;
    padding: 6px 12px;
    border-left: 3px solid rgba(232, 181, 91, .4);
    background: rgba(232, 181, 91, .05);
    color: var(--text-secondary);
    font-size: 12px;
    border-radius: 0 4px 4px 0;
}

.changelog-body p {
    margin: 6px 0;
}

.changelog-body hr {
    border: none;
    border-top: 1px solid rgba(232, 181, 91, .15);
    margin: 14px 0;
}

.changelog-body strong {
    color: var(--gold);
    font-weight: 700;
}

.changelog-body code {
    background: rgba(255, 255, 255, .08);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--gold-2);
}

/* 浅色主题适配：弹窗背景与文字颜色 */
html[data-theme="light"] .changelog-modal-content {
    background: #f7f5f0;
}

html[data-theme="light"] .changelog-body {
    color: #4a5568;
}

html[data-theme="light"] .changelog-body h3 {
    border-bottom-color: rgba(202, 138, 4, .25);
}

html[data-theme="light"] .changelog-body blockquote {
    background: rgba(202, 138, 4, .06);
    color: #6b7280;
}

html[data-theme="light"] .changelog-body code {
    background: rgba(0, 0, 0, .06);
}

/* 弹窗打开时的滚动条样式（深色模式下美化） */
.changelog-modal-content::-webkit-scrollbar {
    width: 8px;
}

.changelog-modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.changelog-modal-content::-webkit-scrollbar-thumb {
    background: rgba(232, 181, 91, .3);
    border-radius: 4px;
}

.changelog-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(232, 181, 91, .5);
}

/* ===== 知识库悬浮提示（kb-tooltip） ===== */
/* 由 static/js/knowledge-base.js 动态创建和控制 */
.kb-tooltip {
    position: absolute;
    z-index: 10000;
    max-width: 360px;
    min-width: 200px;
    padding: 10px 14px;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
    word-break: break-word;
    /* 支持 tooltip 内容中的换行符 \n 显示为换行（多行 tooltip 内容如四家飞星标题） */
    white-space: pre-line;
    display: none;
    pointer-events: none;
    animation: kb-tooltip-fade-in .15s ease-out;
}

/* 飞星标题 tooltip 内容较多，增大宽度并缩小字体以完整显示 */
/* 覆盖 .kb-tooltip 默认 max-width 和 font-size */
.kb-tooltip.flystar-title-tip {
    max-width: 520px;
    min-width: 360px;
    font-size: 12px;
    line-height: 1.55;
    padding: 12px 16px;
}

.kb-tooltip-visible {
    display: block;
}

/* 带有 data-kb 属性的元素，鼠标悬浮时显示 help 指针 */
/* 提示用户该元素可悬浮查看解释 */
[data-kb] {
    cursor: help;
    border-bottom: 1px dashed rgba(143, 165, 180, .4);
    transition: background .2s, border-bottom-color .2s;
}

[data-kb]:hover {
    background: rgba(143, 165, 180, .08);
    border-bottom-color: rgba(143, 165, 180, .7);
}

/* 飞星板块标题内的 span[data-kb]：添加底部虚线，提示用户可悬浮查看 tooltip */
.section-title span[data-kb] {
    border-bottom: 1px dashed currentColor;
    cursor: help;
}

.section-title span[data-kb]:hover {
    background: transparent;
    border-bottom-color: var(--gold);
    color: var(--gold);
}

/* 内联标签（吉神凶煞、宜忌条目）已有色块样式，去掉虚线下划线避免视觉干扰 */
.god-tag[data-kb],
.yiji-tag[data-kb] {
    border-bottom: none;
}

.god-tag.good[data-kb]:hover,
.yiji-tag.yi-tag[data-kb]:hover {
    background: var(--tag-good-bg);
}

.god-tag.bad[data-kb]:hover,
.yiji-tag.ji-tag[data-kb]:hover {
    background: var(--tag-bad-bg);
}

/* tooltip 淡入动画 */
@keyframes kb-tooltip-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   手机竖版适配（html.is-mobile 作用域，配合 max-width: 768px）
   仅在 JS 判定为手机设备时生效（app.js 的 applyMobileFlag 在 <html> 加 is-mobile 类）
   叠加在原有 768px 断点之上，不破坏桌面版与现有响应式规则
   ============================================================ */

/* 2.1 整体容器与间距 */
html.is-mobile body {
    padding: 8px;
    font-size: 14px;
}

html.is-mobile .app-container {
    width: 100%;
    padding: 0 0 8px;
}

/* 2.2 顶部工具栏（年月导航 + 季节星座） */
/* 手机版顶部改为两行：
   第一行：年份选择器 + 月份选择器 + 主题按钮（横向均分）
   第二行：季节·星座 chips（横向滚动，避免换行溢出） */
html.is-mobile .toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

/* 年/月导航组：各占一份，按钮居两侧、标签居中 */
html.is-mobile .toolbar-group.nav-group {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: 6px;
}

html.is-mobile .nav-label {
    font-size: 14px;
    min-width: 0;
    text-align: center;
}

html.is-mobile .nav-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 季节·星座：独占一行，横向滚动，避免换行溢出 */
html.is-mobile .season-row {
    width: 100%;
    order: 3;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 4px;
}

html.is-mobile .season-label {
    flex-shrink: 0;
    font-size: 11px;
    margin-left: 2px;
    margin-right: 0;
}

html.is-mobile .season-chip {
    flex-shrink: 0;
    font-size: 11px;
    padding: 2px 6px;
}

/* 主题切换按钮：第一行右对齐 */
html.is-mobile .theme-switch {
    margin-left: auto;
    order: 2;
    align-self: center;
}

html.is-mobile .theme-switch button {
    width: 32px;
    height: 32px;
    font-size: 16px;
}

/* 2.3 主内容区 + 日历格子 */
/* detail-panel 去掉 min-width:400px，避免窄屏溢出 */
html.is-mobile .detail-panel {
    min-width: 0;
    max-width: none;
    padding: 14px;
}

html.is-mobile .calendar-section,
html.is-mobile .detail-panel,
html.is-mobile .today-combined-section,
html.is-mobile .hour-section-full,
html.is-mobile .solar-terms-section {
    padding: 14px;
    margin-bottom: 12px;
}

/* 日历格子：7列保留，高度放宽以容纳公历日/农历/干支/建除四行内容 */
html.is-mobile .calendar-grid {
    gap: 3px;
}

html.is-mobile .calendar-cell {
    min-height: 78px;
    height: 78px;
    padding: 2px 1px;
}

html.is-mobile .cell-day {
    font-size: 14px;
    margin-bottom: 2px;
}

html.is-mobile .cell-lunar,
html.is-mobile .cell-ganzhi,
html.is-mobile .cell-info {
    font-size: 9px;
    line-height: 1.25;
}

html.is-mobile .cell-lunar {
    margin-bottom: 1px;
}

html.is-mobile .cell-ganzhi {
    margin-bottom: 1px;
}

html.is-mobile .cell-info {
    margin-top: 1px;
}

html.is-mobile .cell-level {
    font-size: 9px;
    padding: 0 3px;
}

html.is-mobile .cell-term-badge {
    font-size: 8px;
    padding: 0 2px;
    top: 1px;
    right: 1px;
}

html.is-mobile .cell-festival-icon {
    width: 13px;
    height: 13px;
    font-size: 8px;
    bottom: 1px;
    right: 1px;
}

/* 2.4 右侧详情面板头部 + 信息行 */
html.is-mobile .detail-day-number {
    font-size: 40px;
}

html.is-mobile .detail-date-main {
    gap: 10px;
}

html.is-mobile .detail-lunar-line1,
html.is-mobile .detail-lunar-line2 {
    font-size: 13px;
    line-height: 1.6;
}

/* 信息行：label 缩窄，value 收紧 */
html.is-mobile .info-row {
    padding: 6px 0;
    font-size: 13px;
    gap: 8px;
}

html.is-mobile .info-row .info-label {
    width: 56px;
    font-size: 12px;
    letter-spacing: 0;
}

html.is-mobile .info-row .info-value {
    font-size: 13px;
}

/* 2.5 今日宜忌与方位板块 */
html.is-mobile .today-combined-section {
    margin-bottom: 18px;
}

html.is-mobile .yiji-level-content {
    font-size: 13px;
    line-height: 1.7;
}

html.is-mobile .yiji-tag {
    font-size: 11px;
    padding: 1px 6px;
}

/* 今日方位：5列 → 3列（覆盖 768px 的 3列规则，确保不挤） */
html.is-mobile .direction-block-inner .direction-grid,
html.is-mobile .direction-block-up .direction-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

html.is-mobile .direction-card {
    padding: 8px 2px;
    min-height: 50px;
}

html.is-mobile .direction-name {
    font-size: 13px;
}

html.is-mobile .direction-value {
    font-size: 13px;
}

/* 2.6 每日时辰板块 */
/* 12时辰：4列 × 3行（沿用 768px 规则），卡片收紧 */
html.is-mobile .hour-grid-full {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

html.is-mobile .hour-card {
    padding: 6px 1px;
}

html.is-mobile .hour-card-name {
    font-size: 13px;
}

html.is-mobile .hour-card-lucky {
    font-size: 10px;
}

html.is-mobile .hour-card-time {
    font-size: 9px;
}

/* 时辰详情面板 */
html.is-mobile .hour-detail-panel {
    padding: 12px 14px;
}

html.is-mobile .hour-detail-title {
    font-size: 16px;
}

html.is-mobile .hour-detail-row {
    font-size: 13px;
    gap: 8px;
}

html.is-mobile .hour-detail-label {
    width: 78px;
    font-size: 12px;
}

html.is-mobile .hour-detail-value {
    font-size: 13px;
}

/* 2.7 四飞星板块（流年/流月/流日/流时） */
/* 900px 以下已竖排，手机版限制最大宽度并居中，格子内容简化 */
html.is-mobile .all-flystar-section {
    gap: 10px;
}

html.is-mobile .flystar-block-unified {
    max-width: 100%;
    padding: 12px 10px;
}

html.is-mobile .flystar-block-unified .section-title {
    font-size: 16px;
    margin-bottom: 8px;
}

html.is-mobile .flystar-grid {
    gap: 4px;
}

html.is-mobile .flystar-cell {
    padding: 14px 2px 4px;
    border-radius: 6px;
}

html.is-mobile .flystar-direction {
    font-size: 9px;
    top: 2px;
    left: 3px;
}

html.is-mobile .flystar-palace {
    font-size: 8px;
    padding: 0 4px;
}

html.is-mobile .flystar-name {
    font-size: 10px;
}

html.is-mobile .flystar-name-bar {
    width: 16px;
}

html.is-mobile .flystar-position {
    font-size: 8px;
}

html.is-mobile .flystar-item-tag {
    font-size: 7px;
    padding: 1px 2px;
}

/* 2.8 今年节气表 */
/* 节气表：minmax 收窄，自适应 3 列左右 */
html.is-mobile .solar-terms-section .solar-terms-grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 6px;
}

html.is-mobile .solar-term-name {
    font-size: 12px;
}

html.is-mobile .solar-term-date {
    font-size: 10px;
}

html.is-mobile .solar-term-type-badge,
html.is-mobile .solar-term-year-badge {
    font-size: 8px;
    padding: 0 3px;
}

/* 2.9 AI 辅助分析面板（仅 CSS 覆盖 ai-analysis.js 内联样式，不改 JS） */
/* 类名已对照 ai-analysis.js 第 35-159 行内联样式表核实 */
/* AI 面板容器与内边距收紧（ai-panel 本身 overflow:hidden，padding 在 ai-panel-body 上） */
html.is-mobile #viewRiKe .ai-panel {
    margin: 10px 0 !important;
}

html.is-mobile #viewRiKe .ai-panel-body {
    padding: 10px 12px !important;
}

/* 配置网格：2列 → 1列纵向堆叠 */
html.is-mobile #viewRiKe .ai-config-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

html.is-mobile #viewRiKe .ai-config-item input,
html.is-mobile #viewRiKe .ai-config-item select {
    width: 100% !important;
}

/* 状态行/操作行/动作行/提示词头/追问操作行：flex 行 → 纵向堆叠，按钮铺满 */
html.is-mobile #viewRiKe .ai-config-status,
html.is-mobile #viewRiKe .ai-config-actions,
html.is-mobile #viewRiKe .ai-action-row,
html.is-mobile #viewRiKe .ai-prompt-header,
html.is-mobile #viewRiKe .ai-followup-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
}

html.is-mobile #viewRiKe .ai-config-actions button,
html.is-mobile #viewRiKe .ai-action-row button,
html.is-mobile #viewRiKe .ai-prompt-header button {
    width: 100% !important;
}

/* 所问之事/提示词/追问输入框：字号 ≥13px，宽度铺满 */
html.is-mobile #viewRiKe .ai-question-input,
html.is-mobile #viewRiKe .ai-prompt-textarea,
html.is-mobile #viewRiKe .ai-followup-input {
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 提示词输入框：原 372px 在手机过高，收敛高度 */
html.is-mobile #viewRiKe .ai-prompt-textarea {
    height: 220px !important;
    min-height: 160px !important;
}

/* 模型下拉浮层：fixed 定位，限制最大宽度避免溢出屏幕（挂到 body，需全局选择器） */
html.is-mobile .ai-model-dropdown-popup {
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
}

/* 分析结果区/追答回答：字号收紧、防溢出 */
html.is-mobile #viewRiKe .ai-result-body,
html.is-mobile #viewRiKe .ai-followup-a {
    font-size: 13px !important;
    line-height: 1.6 !important;
    word-break: break-word !important;
}

/* 2.10 版本更新弹窗 + 页脚 */
html.is-mobile .changelog-modal-content {
    width: 100%;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 32px);
    padding: 16px 14px;
}

html.is-mobile .changelog-modal-header h2 {
    font-size: 16px;
}

html.is-mobile .changelog-body {
    font-size: 13px;
}

html.is-mobile .page-footer {
    padding: 8px 0;
}

/* 2.11 tooltip 悬浮提示（手机版仅做尺寸适配，交互仍由 knowledge-base.js 原有逻辑处理） */
html.is-mobile .kb-tooltip {
    max-width: calc(100vw - 24px);
    font-size: 12px;
    padding: 8px 10px;
}

html.is-mobile .kb-tooltip.flystar-title-tip {
    min-width: 0;
    max-width: calc(100vw - 24px);
    font-size: 11px;
}