/* 全局主题系统 - 子淳世界 */

/* 启用CSS自定义属性过渡（现代浏览器支持） */
@property --talent-brightness {
    syntax: '<number>';
    inherits: false;
    initial-value: 50;
}

@property --talent-hue {
    syntax: '<number>';
    inherits: false;
    initial-value: 40;
}

@property --talent-saturation {
    syntax: '<number>';
    inherits: false;
    initial-value: 45;
}

@property --talent-temperature {
    syntax: '<number>';
    inherits: false;
    initial-value: 50;
}

@property --talent-contrast {
    syntax: '<number>';
    inherits: false;
    initial-value: 70;
}

@property --talent-tier {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

@property --talent-total-weight {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

/* 三才合一主题CSS变量系统 */
:root {
    /* 主题标识 */
    --theme-type: 'light';
    
    /* 过渡动画参数 */
    --transition-theme-duration: 0.8s;
    --transition-theme-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-colors-duration: 0.6s;
    --transition-colors-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-layout-duration: 0.4s;
    --transition-layout-easing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 渐进式主题过渡参数 */
    --transition-progressive-duration: 1.2s;
    --transition-progressive-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-tier-flash: 0.6s ease-out;
    
    /* 渐进式主题变量 - 默认值 */
    --talent-heaven-available: false;
    --talent-season-available: false;
    --talent-earth-available: false;
    --talent-human-available: false;
    --talent-total-weight: 0;
    --talent-tier: 0;
    --talent-tier-name: "基础";
    
    /* 渐进式主题计算变量 */
    --talent-brightness: 50;
    --talent-hue: 40;
    --talent-saturation: 45;
    --talent-temperature: 50;
    --talent-contrast: 70;
    
    /* 天时变量 - 节气 */
    --season-brightness: 50;
    --season-temperature: 0;
    --season-hue: 220;
    
    /* 天时变量 - 时辰 */
    --hour-brightness: 50;
    --hour-hue: 220;
    --hour-saturation: 8;
    --hour-temperature: 0;
    --hour-energy-intensity: 1;
    --hour-element: 'water';
    
    /* 地利变量 - 地理位置 */
    --geo-light-weight: 0.5;
    --geo-brightness-adjust: 0;
    --geo-hue-adjust: 0;
    --geo-saturation-adjust: 0;
    --geo-temperature-adjust: 0;
    --geo-longitude: 120;
    --geo-latitude: 39.9042;
    
    /* 人才变量 - 用户八字 */
    --personal-hue-adjust: 0;
    --personal-saturation-adjust: 0;
    --personal-brightness-adjust: 0;
    --personal-contrast-adjust: 1;
    --personal-temperature-adjust: 0;
    --personal-usegod-hue-shift: 0;
    --personal-usegod-sat-adjust: 0;
    
    /* 复合计算变量 */
    --composite-brightness: calc(
        var(--hour-brightness) * 0.35 +
        var(--season-brightness) * 0.25 +
        var(--talent-brightness) * 0.15 +
        var(--geo-light-weight) * 25 +
        var(--geo-brightness-adjust) +
        var(--personal-brightness-adjust) * 0.1
    );
    
    --composite-hue: calc(
        var(--hour-hue) * 0.4 +
        var(--season-hue) * 0.25 +
        var(--talent-hue) * 0.15 +
        var(--geo-hue-adjust) +
        var(--personal-hue-adjust) +
        var(--personal-usegod-hue-shift)
    );
    
    --composite-saturation: calc(
        var(--hour-saturation) * 0.4 +
        var(--talent-saturation) * 0.15 +
        var(--geo-light-weight) * 8 +
        var(--geo-saturation-adjust) +
        var(--personal-saturation-adjust) * 0.5 +
        var(--personal-usegod-sat-adjust) * 0.3
    );
    
    --composite-temperature: calc(
        var(--hour-temperature) * 0.4 +
        var(--season-temperature) * 0.25 +
        var(--talent-temperature) * 0.1 +
        var(--geo-temperature-adjust) +
        var(--personal-temperature-adjust)
    );
    
    --composite-energy-intensity: calc(
        var(--hour-energy-intensity) * var(--personal-contrast-adjust)
    );
    
    /* 主色调 - 基于复合变量 */
    --bg-primary: hsl(
        var(--composite-hue),
        clamp(5%, var(--composite-saturation), 20%),
        clamp(10%, var(--composite-brightness), 90%)
    );
    
    /* 辅助色调计算 */
    --bg-secondary: hsl(
        var(--composite-hue),
        clamp(5%, calc(var(--composite-saturation) + 2%), 25%),
        clamp(15%, calc(var(--composite-brightness) + 5%), 95%)
    );
    
    --bg-tertiary: hsl(
        var(--composite-hue),
        clamp(5%, calc(var(--composite-saturation) + 1%), 22%),
        clamp(12%, calc(var(--composite-brightness) + 2%), 92%)
    );
    
    /* 文本色基于背景亮度计算 */
    --text-brightness: clamp(40%, calc(100% - var(--composite-brightness) * 0.8), 95%);
    --text-primary: hsl(0, 0%, var(--text-brightness));
    --text-secondary: hsl(0, 0%, calc(var(--text-brightness) - 15%));
    --text-muted: hsl(0, 0%, calc(var(--text-brightness) - 30%));
    
    /* 边框色基于背景色计算 */
    --border-light: hsla(var(--composite-hue), calc(var(--composite-saturation) * 1.5), calc(var(--text-brightness) * 0.8), 0.1);
    --border-medium: hsla(var(--composite-hue), calc(var(--composite-saturation) * 1.8), calc(var(--text-brightness) * 0.8), 0.15);
    
    /* 阴影效果基于背景亮度计算 */
    --shadow-opacity: clamp(0.05, calc(1 - var(--composite-brightness) * 0.01), 0.5);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, var(--shadow-opacity) * 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, var(--shadow-opacity) * 0.6);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, var(--shadow-opacity) * 0.8);
    
    /* 功能色 - 基于复合变量 */
    --primary-color: hsl(
        calc(var(--composite-hue) + 20),
        clamp(40%, calc(var(--composite-saturation) * 3), 70%),
        clamp(40%, calc(var(--composite-brightness) * 0.7), 70%)
    );
    
    --primary-hover: hsl(
        calc(var(--composite-hue) + 20),
        clamp(45%, calc(var(--composite-saturation) * 3.5), 75%),
        clamp(35%, calc(var(--composite-brightness) * 0.6), 65%)
    );
    
    --secondary-color: var(--bg-secondary);
    --secondary-hover: hsl(
        var(--composite-hue),
        clamp(3%, calc(var(--composite-saturation) - 2%), 18%),
        clamp(12%, calc(var(--composite-brightness) - 3%), 92%)
    );
    
    --accent-color: hsl(
        calc(var(--composite-hue) - 60),
        clamp(50%, calc(var(--composite-saturation) * 4), 80%),
        clamp(50%, calc(var(--composite-brightness) * 0.8), 80%)
    );
    
    --error-color: hsl(0, 70%, 50%);
    --success-color: hsl(140, 70%, 50%);
    --warning-color: hsl(45, 70%, 50%);
    --info-color: hsl(210, 70%, 50%);
    
    /* 便捷别名 - 用于兼容性 */
    --accent: var(--accent-color);
    --accent-hover: var(--primary-hover);
    --border: var(--border-light);
    --success: var(--success-color);
    --warning: var(--warning-color);
    --danger: var(--error-color);
    --info: var(--info-color);
    --success-light: hsla(140, 70%, 50%, 0.15);
    --warning-light: hsla(45, 70%, 50%, 0.15);
    --danger-light: hsla(0, 70%, 50%, 0.15);
    --info-light: hsla(210, 70%, 50%, 0.15);
    --accent-light: hsla(calc(var(--composite-hue) - 60), clamp(50%, calc(var(--composite-saturation) * 4), 80%), clamp(50%, calc(var(--composite-brightness) * 0.8), 80%), 0.15);
    --bg-hover: hsl(
        var(--composite-hue),
        clamp(5%, calc(var(--composite-saturation) + 3%), 25%),
        clamp(15%, calc(var(--composite-brightness) + 8%), 95%)
    );
    
    /* 能量色系 - 基于复合变量 */
    --energy-da-an: hsl(140, 60%, 50%);     /* 大安 - 绿色 */
    --energy-liu-lian: hsl(210, 60%, 50%);  /* 留连 - 蓝色 */
    --energy-su-xi: hsl(45, 60%, 50%);      /* 速喜 - 橙色 */
    --energy-chi-kou: hsl(0, 60%, 50%);     /* 赤口 - 红色 */
    --energy-xiao-ji: hsl(60, 60%, 50%);    /* 小吉 - 黄色 */
    --energy-kong-wang: hsl(0, 0%, 50%);    /* 空亡 - 灰色 */
    
    /* 五行色系 - 基于复合变量 */
    --wuxing-wood: hsl(140, 60%, 50%);      /* 木 - 绿色（生长、春季） */
    --wuxing-fire: hsl(0, 60%, 50%);        /* 火 - 橙红色（炎热、夏季） */
    --wuxing-earth: hsl(45, 60%, 50%);      /* 土 - 咖啡棕色（稳重、长夏） */
    --wuxing-metal: hsl(30, 60%, 50%);      /* 金 - 金黄色（收敛、秋季） */
    --wuxing-water: hsl(210, 60%, 50%);     /* 水 - 蓝色（寒冷、冬季） */
    
    /* 卡片和容器 - 基于复合变量 */
    --card-bg: var(--bg-secondary);
    --card-border: var(--border-light);
    --modal-overlay: rgba(0, 0, 0, 0.6);
    --modal-bg: var(--bg-secondary);
    
    /* 表单元素 - 基于复合变量 */
    --input-bg: var(--bg-secondary);
    --input-border: var(--border-light);
    --input-focus: var(--primary-color);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-muted);
    
    /* 过渡动画 */
    --transition-smooth: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-theme: background-color var(--transition-theme-duration) var(--transition-theme-easing),
                      color var(--transition-colors-duration) var(--transition-colors-easing),
                      border-color var(--transition-colors-duration) var(--transition-colors-easing),
                      box-shadow var(--transition-theme-duration) var(--transition-theme-easing);
}

/* 全局平滑过渡效果 */
* {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: var(--transition-colors-duration);
    transition-timing-function: var(--transition-colors-easing);
}

/* 主题过渡类 - 用于主题切换时的平滑过渡 */
.theme-transitioning {
    transition: var(--transition-theme);
}

/* 背景色过渡 */
body,
.bg-primary,
.bg-secondary,
.bg-tertiary,
.card-bg,
.modal-bg,
.input-bg {
    transition: background-color var(--transition-theme-duration) var(--transition-theme-easing);
}

/* 文本色过渡 */
.text-primary,
.text-secondary,
.text-muted,
.input-text,
.input-placeholder {
    transition: color var(--transition-colors-duration) var(--transition-colors-easing);
}

/* 边框色过渡 */
.border-light,
.border-medium,
.input-border,
.card-border {
    transition: border-color var(--transition-colors-duration) var(--transition-colors-easing);
}

/* 阴影过渡 */
.shadow-sm,
.shadow-md,
.shadow-lg {
    transition: box-shadow var(--transition-theme-duration) var(--transition-theme-easing);
}

/* 渐进式主题属性过渡 - 使用@property后支持平滑动画 */
.talent-brightness-transition,
.talent-hue-transition,
.talent-saturation-transition,
.talent-temperature-transition {
    transition: --talent-brightness 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                --talent-hue 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                --talent-saturation 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                --talent-temperature 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                --talent-tier 0.8s ease-in-out;
}

/* 层级变化视觉提示 */
.tier-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: rgba(var(--bg-primary), 0.9);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-secondary);
    z-index: 9999;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.tier-indicator.visible {
    opacity: 1;
    transform: translateY(0);
}

.tier-indicator .tier-name {
    font-weight: 600;
    color: var(--primary-color);
}

.tier-indicator .tier-progress {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.tier-indicator .tier-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-medium);
    transition: background-color 0.3s ease;
}

.tier-indicator .tier-dot.active {
    background: var(--primary-color);
    box-shadow: 0 0 6px var(--primary-color);
}

/* 复合计算变量变化时的平滑过渡效果 */
:root {
    --progressive-transition: 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 功能色过渡 */
.primary-color,
.primary-hover,
.secondary-color,
.secondary-hover,
.accent-color {
    transition: color var(--transition-colors-duration) var(--transition-colors-easing),
                background-color var(--transition-colors-duration) var(--transition-colors-easing);
}

/* 能量色过渡 */
.energy-da-an,
.energy-liu-lian,
.energy-su-xi,
.energy-chi-kou,
.energy-xiao-ji,
.energy-kong-wang {
    transition: color var(--transition-colors-duration) var(--transition-colors-easing),
                background-color var(--transition-colors-duration) var(--transition-colors-easing);
}

/* 五行色过渡 */
.wuxing-wood,
.wuxing-fire,
.wuxing-earth,
.wuxing-metal,
.wuxing-water {
    transition: color var(--transition-colors-duration) var(--transition-colors-easing),
                background-color var(--transition-colors-duration) var(--transition-colors-easing);
}

/* 地理位置特定样式 */
.geo-northern {
    --geo-temperature-adjust: -5;
}

.geo-southern {
    --geo-temperature-adjust: 5;
}

.geo-tropical {
    --geo-saturation-adjust: 3;
}

.geo-polar {
    --geo-saturation-adjust: -2;
    --geo-brightness-adjust: -5;
}

/* 节气主题类 - 为特定节气提供额外调整 */

/* 春季六节气 - 木气渐旺 */
.jieqi-theme-li_chun {
    --season-brightness: 45;
    --season-hue: 140;
    --season-temperature: 20;
    --season-saturation: 25;
    --jieqi-bg-start: hsl(140, 25%, 15%);
    --jieqi-bg-end: hsl(140, 20%, 8%);
    --jieqi-accent: hsl(140, 45%, 55%);
    --jieqi-text-warmth: 15;
    --jieqi-energy-feel: '萌芽';
}

.jieqi-theme-yu_shui {
    --season-brightness: 50;
    --season-hue: 160;
    --season-temperature: 25;
    --season-saturation: 30;
    --jieqi-bg-start: hsl(160, 30%, 18%);
    --jieqi-bg-end: hsl(160, 25%, 10%);
    --jieqi-accent: hsl(160, 50%, 60%);
    --jieqi-text-warmth: 18;
    --jieqi-energy-feel: '润泽';
}

.jieqi-theme-jing_zhe {
    --season-brightness: 55;
    --season-hue: 170;
    --season-temperature: 30;
    --season-saturation: 35;
    --jieqi-bg-start: hsl(170, 35%, 20%);
    --jieqi-bg-end: hsl(170, 28%, 12%);
    --jieqi-accent: hsl(170, 55%, 65%);
    --jieqi-text-warmth: 22;
    --jieqi-energy-feel: '惊醒';
}

.jieqi-theme-chun_fen {
    --season-brightness: 60;
    --season-hue: 180;
    --season-temperature: 35;
    --season-saturation: 40;
    --jieqi-bg-start: hsl(180, 40%, 22%);
    --jieqi-bg-end: hsl(180, 32%, 14%);
    --jieqi-accent: hsl(180, 60%, 70%);
    --jieqi-text-warmth: 25;
    --jieqi-energy-feel: '平衡';
}

.jieqi-theme-qing_ming {
    --season-brightness: 65;
    --season-hue: 190;
    --season-temperature: 40;
    --season-saturation: 45;
    --jieqi-bg-start: hsl(190, 45%, 24%);
    --jieqi-bg-end: hsl(190, 38%, 16%);
    --jieqi-accent: hsl(190, 65%, 75%);
    --jieqi-text-warmth: 28;
    --jieqi-energy-feel: '清新';
}

.jieqi-theme-gu_yu {
    --season-brightness: 70;
    --season-hue: 200;
    --season-temperature: 45;
    --season-saturation: 50;
    --jieqi-bg-start: hsl(200, 50%, 26%);
    --jieqi-bg-end: hsl(200, 42%, 18%);
    --jieqi-accent: hsl(200, 70%, 80%);
    --jieqi-text-warmth: 32;
    --jieqi-energy-feel: '滋养';
}

/* 夏季六节气 - 火气渐旺 */
.jieqi-theme-li_xia {
    --season-brightness: 75;
    --season-hue: 210;
    --season-temperature: 50;
    --season-saturation: 55;
    --jieqi-bg-start: hsl(210, 55%, 28%);
    --jieqi-bg-end: hsl(210, 48%, 20%);
    --jieqi-accent: hsl(210, 75%, 85%);
    --jieqi-text-warmth: 35;
    --jieqi-energy-feel: '繁盛';
}

.jieqi-theme-xiao_man {
    --season-brightness: 80;
    --season-hue: 220;
    --season-temperature: 55;
    --season-saturation: 58;
    --jieqi-bg-start: hsl(220, 58%, 30%);
    --jieqi-bg-end: hsl(220, 52%, 22%);
    --jieqi-accent: hsl(220, 78%, 88%);
    --jieqi-text-warmth: 38;
    --jieqi-energy-feel: '盈满';
}

.jieqi-theme-mang_zhong {
    --season-brightness: 85;
    --season-hue: 230;
    --season-temperature: 60;
    --season-saturation: 60;
    --jieqi-bg-start: hsl(230, 60%, 32%);
    --jieqi-bg-end: hsl(230, 55%, 24%);
    --jieqi-accent: hsl(230, 80%, 90%);
    --jieqi-text-warmth: 42;
    --jieqi-energy-feel: '芒种';
}

.jieqi-theme-xia_zhi {
    --season-brightness: 90;
    --season-hue: 240;
    --season-temperature: 65;
    --season-saturation: 58;
    --jieqi-bg-start: hsl(240, 58%, 34%);
    --jieqi-bg-end: hsl(240, 52%, 26%);
    --jieqi-accent: hsl(240, 78%, 92%);
    --jieqi-text-warmth: 45;
    --jieqi-energy-feel: '极盛';
}

.jieqi-theme-xiao_shu {
    --season-brightness: 88;
    --season-hue: 250;
    --season-temperature: 60;
    --season-saturation: 55;
    --jieqi-bg-start: hsl(250, 55%, 32%);
    --jieqi-bg-end: hsl(250, 48%, 24%);
    --jieqi-accent: hsl(250, 75%, 90%);
    --jieqi-text-warmth: 42;
    --jieqi-energy-feel: '小热';
}

.jieqi-theme-da_shu {
    --season-brightness: 85;
    --season-hue: 260;
    --season-temperature: 55;
    --season-saturation: 52;
    --jieqi-bg-start: hsl(260, 52%, 30%);
    --jieqi-bg-end: hsl(260, 45%, 22%);
    --jieqi-accent: hsl(260, 72%, 88%);
    --jieqi-text-warmth: 38;
    --jieqi-energy-feel: '大热';
}

/* 秋季六节气 - 金气渐旺 */
.jieqi-theme-li_qiu {
    --season-brightness: 80;
    --season-hue: 270;
    --season-temperature: 50;
    --season-saturation: 48;
    --jieqi-bg-start: hsl(270, 48%, 28%);
    --jieqi-bg-end: hsl(270, 42%, 20%);
    --jieqi-accent: hsl(270, 68%, 85%);
    --jieqi-text-warmth: 35;
    --jieqi-energy-feel: '收敛';
}

.jieqi-theme-chu_shu {
    --season-brightness: 75;
    --season-hue: 280;
    --season-temperature: 45;
    --season-saturation: 45;
    --jieqi-bg-start: hsl(280, 45%, 26%);
    --jieqi-bg-end: hsl(280, 38%, 18%);
    --jieqi-accent: hsl(280, 65%, 82%);
    --jieqi-text-warmth: 32;
    --jieqi-energy-feel: '出暑';
}

.jieqi-theme-bai_lu {
    --season-brightness: 70;
    --season-hue: 290;
    --season-temperature: 40;
    --season-saturation: 42;
    --jieqi-bg-start: hsl(290, 42%, 24%);
    --jieqi-bg-end: hsl(290, 35%, 16%);
    --jieqi-accent: hsl(290, 62%, 78%);
    --jieqi-text-warmth: 28;
    --jieqi-energy-feel: '凝露';
}

.jieqi-theme-qiu_fen {
    --season-brightness: 65;
    --season-hue: 300;
    --season-temperature: 35;
    --season-saturation: 40;
    --jieqi-bg-start: hsl(300, 40%, 22%);
    --jieqi-bg-end: hsl(300, 33%, 14%);
    --jieqi-accent: hsl(300, 60%, 75%);
    --jieqi-text-warmth: 25;
    --jieqi-energy-feel: '平分';
}

.jieqi-theme-han_lu {
    --season-brightness: 60;
    --season-hue: 310;
    --season-temperature: 30;
    --season-saturation: 38;
    --jieqi-bg-start: hsl(310, 38%, 20%);
    --jieqi-bg-end: hsl(310, 30%, 12%);
    --jieqi-accent: hsl(310, 58%, 72%);
    --jieqi-text-warmth: 22;
    --jieqi-energy-feel: '寒露';
}

.jieqi-theme-shuang_jiang {
    --season-brightness: 55;
    --season-hue: 320;
    --season-temperature: 25;
    --season-saturation: 35;
    --jieqi-bg-start: hsl(320, 35%, 18%);
    --jieqi-bg-end: hsl(320, 28%, 10%);
    --jieqi-accent: hsl(320, 55%, 68%);
    --jieqi-text-warmth: 18;
    --jieqi-energy-feel: '凝霜';
}

/* 冬季六节气 - 水气渐旺 */
.jieqi-theme-li_dong {
    --season-brightness: 50;
    --season-hue: 330;
    --season-temperature: 20;
    --season-saturation: 32;
    --jieqi-bg-start: hsl(330, 32%, 16%);
    --jieqi-bg-end: hsl(330, 25%, 8%);
    --jieqi-accent: hsl(330, 52%, 65%);
    --jieqi-text-warmth: 15;
    --jieqi-energy-feel: '收藏';
}

.jieqi-theme-xiao_xue {
    --season-brightness: 45;
    --season-hue: 340;
    --season-temperature: 15;
    --season-saturation: 30;
    --jieqi-bg-start: hsl(340, 30%, 14%);
    --jieqi-bg-end: hsl(340, 23%, 6%);
    --jieqi-accent: hsl(340, 50%, 62%);
    --jieqi-text-warmth: 12;
    --jieqi-energy-feel: '初雪';
}

.jieqi-theme-da_xue {
    --season-brightness: 40;
    --season-hue: 350;
    --season-temperature: 10;
    --season-saturation: 28;
    --jieqi-bg-start: hsl(350, 28%, 12%);
    --jieqi-bg-end: hsl(350, 20%, 5%);
    --jieqi-accent: hsl(350, 48%, 58%);
    --jieqi-text-warmth: 8;
    --jieqi-energy-feel: '大雪';
}

.jieqi-theme-dong_zhi {
    --season-brightness: 35;
    --season-hue: 0;
    --season-temperature: 5;
    --season-saturation: 25;
    --jieqi-bg-start: hsl(0, 25%, 10%);
    --jieqi-bg-end: hsl(0, 18%, 4%);
    --jieqi-accent: hsl(0, 45%, 55%);
    --jieqi-text-warmth: 5;
    --jieqi-energy-feel: '至阴';
}

.jieqi-theme-xiao_han {
    --season-brightness: 38;
    --season-hue: 10;
    --season-temperature: 8;
    --season-saturation: 28;
    --jieqi-bg-start: hsl(10, 28%, 11%);
    --jieqi-bg-end: hsl(10, 20%, 5%);
    --jieqi-accent: hsl(10, 48%, 58%);
    --jieqi-text-warmth: 6;
    --jieqi-energy-feel: '小寒';
}

.jieqi-theme-da_han {
    --season-brightness: 42;
    --season-hue: 20;
    --season-temperature: 12;
    --season-saturation: 32;
    --jieqi-bg-start: hsl(20, 32%, 13%);
    --jieqi-bg-end: hsl(20, 25%, 6%);
    --jieqi-accent: hsl(20, 52%, 62%);
    --jieqi-text-warmth: 10;
    --jieqi-energy-feel: '大寒';
}

/* 主题切换过渡效果 */
* {
    transition: var(--transition-theme);
}

/* 时辰主题类 - 基于明暗曲线和五行属性 */
.hour-theme {
    transition: all 0.6s ease-in-out;
}

/* 子时主题 (23:00-01:00) - 水元素 - 最暗 */
.hour-theme-zi {
    /* 主色调 - 深蓝黑，极低饱和度 */
    --bg-primary: #0f1419;
    --bg-secondary: #1a202c;
    --bg-tertiary: #151a23;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e0;
    --text-muted: #a0aec0;
    --border-light: rgba(226, 232, 240, 0.1);
    --border-medium: rgba(226, 232, 240, 0.15);
    
    /* 功能色 - 低调的蓝色 */
    --primary-color: #2b6cb0;
    --primary-hover: #2c5282;
    --accent-color: #2b6cb0;
    
    /* 能量色系 - 适应暗色背景 */
    --energy-da-an: #38a169;
    --energy-liu-lian: #2b6cb0;
    --energy-su-xi: #dd6b20;
    --energy-chi-kou: #e53e3e;
    --energy-xiao-ji: #d69e2e;
    --energy-kong-wang: #718096;
    
    /* 五行色系 - 水元素为主 */
    --wuxing-wood: #38a169;
    --wuxing-fire: #dd6b20;
    --wuxing-earth: #718096;
    --wuxing-metal: #d69e2e;
    --wuxing-water: #2b6cb0;
    
    /* 卡片和容器 */
    --card-bg: rgba(26, 32, 44, 0.1);
    --card-border: rgba(226, 232, 240, 0.1);
    --modal-overlay: rgba(0, 0, 0, 0.8);
    --modal-bg: #1a202c;
    
    /* 表单元素 */
    --input-bg: #1a202c;
    --input-border: rgba(226, 232, 240, 0.1);
    --input-focus: #2b6cb0;
    --input-text: #e2e8f0;
    --input-placeholder: #a0aec0;
    
    /* 阴影效果 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* 丑时主题 (01:00-03:00) - 土元素 - 较暗 */
.hour-theme-chou {
    /* 主色调 - 深灰土，极低饱和度 */
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --bg-tertiary: #242b37;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e0;
    --text-muted: #a0aec0;
    --border-light: rgba(226, 232, 240, 0.12);
    --border-medium: rgba(226, 232, 240, 0.18);
    
    /* 功能色 - 柔和的土色 */
    --primary-color: #718096;
    --primary-hover: #4a5568;
    --accent-color: #718096;
    
    /* 能量色系 - 适应暗色背景 */
    --energy-da-an: #38a169;
    --energy-liu-lian: #2b6cb0;
    --energy-su-xi: #dd6b20;
    --energy-chi-kou: #e53e3e;
    --energy-xiao-ji: #d69e2e;
    --energy-kong-wang: #718096;
    
    /* 五行色系 - 土元素为主 */
    --wuxing-wood: #38a169;
    --wuxing-fire: #dd6b20;
    --wuxing-earth: #718096;
    --wuxing-metal: #d69e2e;
    --wuxing-water: #2b6cb0;
    
    /* 卡片和容器 */
    --card-bg: rgba(45, 55, 72, 0.1);
    --card-border: rgba(226, 232, 240, 0.12);
    --modal-overlay: rgba(0, 0, 0, 0.75);
    --modal-bg: #2d3748;
    
    /* 表单元素 */
    --input-bg: #2d3748;
    --input-border: rgba(226, 232, 240, 0.12);
    --input-focus: #718096;
    --input-text: #e2e8f0;
    --input-placeholder: #a0aec0;
    
    /* 阴影效果 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.45);
}

/* 寅时主题 (03:00-05:00) - 木元素 - 暗向明过渡 */
.hour-theme-yin {
    /* 主色调 - 深灰绿，极低饱和度 */
    --bg-primary: #1e2732;
    --bg-secondary: #2d3748;
    --bg-tertiary: #242b37;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e0;
    --text-muted: #a0aec0;
    --border-light: rgba(226, 232, 240, 0.15);
    --border-medium: rgba(226, 232, 240, 0.2);
    
    /* 功能色 - 柔和的绿色 */
    --primary-color: #48bb78;
    --primary-hover: #38a169;
    --accent-color: #48bb78;
    
    /* 能量色系 - 适应暗色背景 */
    --energy-da-an: #48bb78;
    --energy-liu-lian: #3182ce;
    --energy-su-xi: #f6ad55;
    --energy-chi-kou: #fc8181;
    --energy-xiao-ji: #f6e05e;
    --energy-kong-wang: #a0aec0;
    
    /* 五行色系 - 木元素为主 */
    --wuxing-wood: #48bb78;
    --wuxing-fire: #f6ad55;
    --wuxing-earth: #a0aec0;
    --wuxing-metal: #f6e05e;
    --wuxing-water: #3182ce;
    
    /* 卡片和容器 */
    --card-bg: rgba(45, 55, 72, 0.1);
    --card-border: rgba(226, 232, 240, 0.15);
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-bg: #2d3748;
    
    /* 表单元素 */
    --input-bg: #2d3748;
    --input-border: rgba(226, 232, 240, 0.15);
    --input-focus: #48bb78;
    --input-text: #e2e8f0;
    --input-placeholder: #a0aec0;
    
    /* 阴影效果 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
}

/* 卯时主题 (05:00-07:00) - 木元素 - 黎明 */
.hour-theme-mao {
    /* 主色调 - 深灰绿，较低饱和度 */
    --bg-primary: #2d3748;
    --bg-secondary: #4a5568;
    --bg-tertiary: #3a4556;
    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-muted: #cbd5e0;
    --border-light: rgba(247, 250, 252, 0.15);
    --border-medium: rgba(247, 250, 252, 0.2);
    
    /* 功能色 - 柔和的绿色 */
    --primary-color: #48bb78;
    --primary-hover: #38a169;
    --accent-color: #48bb78;
    
    /* 能量色系 - 适应黎明背景 */
    --energy-da-an: #48bb78;
    --energy-liu-lian: #3182ce;
    --energy-su-xi: #f6ad55;
    --energy-chi-kou: #fc8181;
    --energy-xiao-ji: #f6e05e;
    --energy-kong-wang: #a0aec0;
    
    /* 五行色系 - 木元素为主 */
    --wuxing-wood: #48bb78;
    --wuxing-fire: #f6ad55;
    --wuxing-earth: #a0aec0;
    --wuxing-metal: #f6e05e;
    --wuxing-water: #3182ce;
    
    /* 卡片和容器 */
    --card-bg: rgba(74, 85, 104, 0.1);
    --card-border: rgba(247, 250, 252, 0.15);
    --modal-overlay: rgba(0, 0, 0, 0.65);
    --modal-bg: #4a5568;
    
    /* 表单元素 */
    --input-bg: #4a5568;
    --input-border: rgba(247, 250, 252, 0.15);
    --input-focus: #48bb78;
    --input-text: #f7fafc;
    --input-placeholder: #cbd5e0;
    
    /* 阴影效果 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* 辰时主题 (07:00-09:00) - 土元素 - 早晨 */
.hour-theme-chen {
    /* 主色调 - 浅灰土，低饱和度 */
    --bg-primary: #edf2f7;
    --bg-secondary: #e2e8f0;
    --bg-tertiary: #cbd5e0;
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --border-light: rgba(45, 55, 72, 0.1);
    --border-medium: rgba(45, 55, 72, 0.15);
    
    /* 功能色 - 温暖的土色 */
    --primary-color: #718096;
    --primary-hover: #4a5568;
    --accent-color: #718096;
    
    /* 能量色系 - 适应早晨背景 */
    --energy-da-an: #68d391;
    --energy-liu-lian: #4299e1;
    --energy-su-xi: #ed8936;
    --energy-chi-kou: #f56565;
    --energy-xiao-ji: #ecc94b;
    --energy-kong-wang: #a0aec0;
    
    /* 五行色系 - 土元素为主 */
    --wuxing-wood: #68d391;
    --wuxing-fire: #ed8936;
    --wuxing-earth: #a0aec0;
    --wuxing-metal: #ecc94b;
    --wuxing-water: #4299e1;
    
    /* 卡片和容器 */
    --card-bg: rgba(226, 232, 240, 0.5);
    --card-border: rgba(45, 55, 72, 0.1);
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-bg: #ffffff;
    
    /* 表单元素 */
    --input-bg: #ffffff;
    --input-border: rgba(45, 55, 72, 0.1);
    --input-focus: #718096;
    --input-text: #2d3748;
    --input-placeholder: #718096;
    
    /* 阴影效果 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* 巳时主题 (09:00-11:00) - 火元素 - 上午 */
.hour-theme-si {
    /* 主色调 - 浅暖灰，增强对比 */
    --bg-primary: #f5f0eb;
    --bg-secondary: #ebe3d9;
    --bg-tertiary: #ddd2c3;
    --text-primary: #1a1208;
    --text-secondary: #3d3426;
    --text-muted: #6b5d4d;
    --border-light: rgba(61, 52, 38, 0.12);
    --border-medium: rgba(61, 52, 38, 0.2);
    
    /* 功能色 - 温暖的橙色 */
    --primary-color: #c05621;
    --primary-hover: #9c4221;
    --accent-color: #dd6b20;
    
    /* 能量色系 - 适应上午背景 */
    --energy-da-an: #2f855a;
    --energy-liu-lian: #2b6cb0;
    --energy-su-xi: #c05621;
    --energy-chi-kou: #c53030;
    --energy-xiao-ji: #b7791f;
    --energy-kong-wang: #718096;
    
    /* 五行色系 - 火元素为主 */
    --wuxing-wood: #2f855a;
    --wuxing-fire: #c05621;
    --wuxing-earth: #975a16;
    --wuxing-metal: #d69e2e;
    --wuxing-water: #2b6cb0;
    
    /* 卡片和容器 - 不透明，增强对比 */
    --card-bg: #ffffff;
    --card-border: rgba(61, 52, 38, 0.15);
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-bg: #fffaf0;
    
    /* 表单元素 */
    --input-bg: #fffaf0;
    --input-border: rgba(61, 52, 38, 0.2);
    --input-focus: #dd6b20;
    --input-text: #1a1208;
    --input-placeholder: #6b5d4d;
    
    /* 阴影效果 */
    --shadow-sm: 0 1px 3px rgba(61, 52, 38, 0.08);
    --shadow-md: 0 4px 6px rgba(61, 52, 38, 0.1);
    --shadow-lg: 0 10px 15px rgba(61, 52, 38, 0.12);
}

/* 午时主题 (11:00-13:00) - 火元素 - 最亮 */
.hour-theme-wu {
    /* 主色调 - 暖白色，极低饱和度 */
    --bg-primary: #f7fafc;
    --bg-secondary: #edf2f7;
    --bg-tertiary: #e2e8f0;
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --border-light: rgba(45, 55, 72, 0.05);
    --border-medium: rgba(45, 55, 72, 0.1);
    
    /* 功能色 - 温暖红色 */
    --primary-color: #e53e3e;
    --primary-hover: #c53030;
    --accent-color: #e53e3e;
    
    /* 能量色系 - 适应正午背景 */
    --energy-da-an: #68d391;
    --energy-liu-lian: #4299e1;
    --energy-su-xi: #ed8936;
    --energy-chi-kou: #f56565;
    --energy-xiao-ji: #ecc94b;
    --energy-kong-wang: #a0aec0;
    
    /* 五行色系 - 火元素为主 */
    --wuxing-wood: #68d391;
    --wuxing-fire: #e53e3e;
    --wuxing-earth: #a0aec0;
    --wuxing-metal: #ecc94b;
    --wuxing-water: #4299e1;
    
    /* 卡片和容器 */
    --card-bg: rgba(237, 242, 247, 0.5);
    --card-border: rgba(45, 55, 72, 0.05);
    --modal-overlay: rgba(0, 0, 0, 0.35);
    --modal-bg: #ffffff;
    
    /* 表单元素 */
    --input-bg: #ffffff;
    --input-border: rgba(45, 55, 72, 0.05);
    --input-focus: #e53e3e;
    --input-text: #2d3748;
    --input-placeholder: #718096;
    
    /* 阴影效果 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 未时主题 (13:00-15:00) - 土元素 - 下午 */
.hour-theme-wei {
    /* 主色调 - 浅灰，低饱和度 */
    --bg-primary: #f7fafc;
    --bg-secondary: #edf2f7;
    --bg-tertiary: #e2e8f0;
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --border-light: rgba(45, 55, 72, 0.08);
    --border-medium: rgba(45, 55, 72, 0.12);
    
    /* 功能色 - 温暖的土色 */
    --primary-color: #718096;
    --primary-hover: #4a5568;
    --accent-color: #718096;
    
    /* 能量色系 - 适应下午背景 */
    --energy-da-an: #68d391;
    --energy-liu-lian: #4299e1;
    --energy-su-xi: #ed8936;
    --energy-chi-kou: #f56565;
    --energy-xiao-ji: #ecc94b;
    --energy-kong-wang: #a0aec0;
    
    /* 五行色系 - 土元素为主 */
    --wuxing-wood: #68d391;
    --wuxing-fire: #ed8936;
    --wuxing-earth: #718096;
    --wuxing-metal: #ecc94b;
    --wuxing-water: #4299e1;
    
    /* 卡片和容器 */
    --card-bg: rgba(237, 242, 247, 0.5);
    --card-border: rgba(45, 55, 72, 0.08);
    --modal-overlay: rgba(0, 0, 0, 0.4);
    --modal-bg: #ffffff;
    
    /* 表单元素 */
    --input-bg: #ffffff;
    --input-border: rgba(45, 55, 72, 0.08);
    --input-focus: #718096;
    --input-text: #2d3748;
    --input-placeholder: #718096;
    
    /* 阴影效果 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.12);
}

/* 申时主题 (15:00-17:00) - 金元素 - 傍晚 */
.hour-theme-shen {
    /* 主色调 - 浅灰金，较低饱和度 */
    --bg-primary: #edf2f7;
    --bg-secondary: #e2e8f0;
    --bg-tertiary: #cbd5e0;
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --border-light: rgba(45, 55, 72, 0.1);
    --border-medium: rgba(45, 55, 72, 0.15);
    
    /* 功能色 - 金色 */
    --primary-color: #ecc94b;
    --primary-hover: #d69e2e;
    --accent-color: #ecc94b;
    
    /* 能量色系 - 适应傍晚背景 */
    --energy-da-an: #68d391;
    --energy-liu-lian: #4299e1;
    --energy-su-xi: #ed8936;
    --energy-chi-kou: #f56565;
    --energy-xiao-ji: #ecc94b;
    --energy-kong-wang: #a0aec0;
    
    /* 五行色系 - 金元素为主 */
    --wuxing-wood: #68d391;
    --wuxing-fire: #ed8936;
    --wuxing-earth: #a0aec0;
    --wuxing-metal: #ecc94b;
    --wuxing-water: #4299e1;
    
    /* 卡片和容器 */
    --card-bg: rgba(226, 232, 240, 0.5);
    --card-border: rgba(45, 55, 72, 0.1);
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-bg: #e2e8f0;
    
    /* 表单元素 */
    --input-bg: #ffffff;
    --input-border: rgba(45, 55, 72, 0.1);
    --input-focus: #ecc94b;
    --input-text: #2d3748;
    --input-placeholder: #718096;
    
    /* 阴影效果 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* 酉时主题 (17:00-19:00) - 金元素 - 黄昏 */
.hour-theme-you {
    /* 主色调 - 深灰金，较低饱和度 */
    --bg-primary: #2d3748;
    --bg-secondary: #4a5568;
    --bg-tertiary: #3a4556;
    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-muted: #cbd5e0;
    --border-light: rgba(247, 250, 252, 0.15);
    --border-medium: rgba(247, 250, 252, 0.2);
    
    /* 功能色 - 金色橙 */
    --primary-color: #dd6b20;
    --primary-hover: #c05621;
    --accent-color: #dd6b20;
    
    /* 能量色系 - 适应黄昏背景 */
    --energy-da-an: #48bb78;
    --energy-liu-lian: #3182ce;
    --energy-su-xi: #f6ad55;
    --energy-chi-kou: #fc8181;
    --energy-xiao-ji: #f6e05e;
    --energy-kong-wang: #a0aec0;
    
    /* 五行色系 - 金元素为主 */
    --wuxing-wood: #48bb78;
    --wuxing-fire: #f6ad55;
    --wuxing-earth: #a0aec0;
    --wuxing-metal: #f6e05e;
    --wuxing-water: #3182ce;
    
    /* 卡片和容器 */
    --card-bg: rgba(74, 85, 104, 0.1);
    --card-border: rgba(247, 250, 252, 0.15);
    --modal-overlay: rgba(0, 0, 0, 0.65);
    --modal-bg: #4a5568;
    
    /* 表单元素 */
    --input-bg: #4a5568;
    --input-border: rgba(247, 250, 252, 0.15);
    --input-focus: #dd6b20;
    --input-text: #f7fafc;
    --input-placeholder: #cbd5e0;
    
    /* 阴影效果 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* 戌时主题 (19:00-21:00) - 土元素 - 晚上 */
.hour-theme-xu {
    /* 主色调 - 深灰土，极低饱和度 */
    --bg-primary: #1e2732;
    --bg-secondary: #2d3748;
    --bg-tertiary: #242b37;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e0;
    --text-muted: #a0aec0;
    --border-light: rgba(226, 232, 240, 0.15);
    --border-medium: rgba(226, 232, 240, 0.2);
    
    /* 功能色 - 温暖的土色 */
    --primary-color: #718096;
    --primary-hover: #4a5568;
    --accent-color: #718096;
    
    /* 能量色系 - 适应晚上背景 */
    --energy-da-an: #38a169;
    --energy-liu-lian: #2b6cb0;
    --energy-su-xi: #dd6b20;
    --energy-chi-kou: #e53e3e;
    --energy-xiao-ji: #d69e2e;
    --energy-kong-wang: #718096;
    
    /* 五行色系 - 土元素为主 */
    --wuxing-wood: #38a169;
    --wuxing-fire: #dd6b20;
    --wuxing-earth: #718096;
    --wuxing-metal: #d69e2e;
    --wuxing-water: #2b6cb0;
    
    /* 卡片和容器 */
    --card-bg: rgba(45, 55, 72, 0.1);
    --card-border: rgba(226, 232, 240, 0.15);
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-bg: #2d3748;
    
    /* 表单元素 */
    --input-bg: #2d3748;
    --input-border: rgba(226, 232, 240, 0.15);
    --input-focus: #718096;
    --input-text: #e2e8f0;
    --input-placeholder: #a0aec0;
    
    /* 阴影效果 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
}

/* 亥时主题 (21:00-23:00) - 水元素 - 深夜 */
.hour-theme-hai {
    /* 主色调 - 深蓝黑，极低饱和度 */
    --bg-primary: #151a23;
    --bg-secondary: #1a202c;
    --bg-tertiary: #10151a;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e0;
    --text-muted: #a0aec0;
    --border-light: rgba(226, 232, 240, 0.12);
    --border-medium: rgba(226, 232, 240, 0.18);
    
    /* 功能色 - 低调的蓝色 */
    --primary-color: #2b6cb0;
    --primary-hover: #2c5282;
    --accent-color: #2b6cb0;
    
    /* 能量色系 - 适应深夜背景 */
    --energy-da-an: #38a169;
    --energy-liu-lian: #2b6cb0;
    --energy-su-xi: #dd6b20;
    --energy-chi-kou: #e53e3e;
    --energy-xiao-ji: #d69e2e;
    --energy-kong-wang: #718096;
    
    /* 五行色系 - 水元素为主 */
    --wuxing-wood: #38a169;
    --wuxing-fire: #dd6b20;
    --wuxing-earth: #718096;
    --wuxing-metal: #d69e2e;
    --wuxing-water: #2b6cb0;
    
    /* 卡片和容器 */
    --card-bg: rgba(26, 32, 44, 0.1);
    --card-border: rgba(226, 232, 240, 0.12);
    --modal-overlay: rgba(0, 0, 0, 0.75);
    --modal-bg: #1a202c;
    
    /* 表单元素 */
    --input-bg: #1a202c;
    --input-border: rgba(226, 232, 240, 0.12);
    --input-focus: #2b6cb0;
    --input-text: #e2e8f0;
    --input-placeholder: #a0aec0;
    
    /* 阴影效果 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.45);
}

/* ================================
   三才主题适配系统 - 响应数据可用性
   基于 --talent-heaven-available, --talent-earth-available, --talent-human-available
   ================================ */

/* 天时层可用 - 默认状态 */
:root {
    --talent-heaven-available: true;
    --talent-earth-available: false;
    --talent-human-available: false;
    
    --theme-tier: 1;
    --theme-tier-label: '天时';
    --theme-refinement: 0.33;
}

/* 基础层级 - 仅天时可用 */
:root[data-talent-heaven="true"][data-talent-earth="false"][data-talent-human="false"],
:root[data-talent-heaven-available="true"][data-talent-earth-available="false"][data-talent-human-available="false"] {
    --theme-tier: 1;
    --theme-tier-label: '天时';
    --theme-refinement: 0.33;
    
    --composite-refinement-opacity: 0.6;
    --composite-animation-duration: 1.2s;
    --composite-transition-speed: 0.8s;
}

/* 增强层级 - 天时+地利可用 */
:root[data-talent-earth="true"]:not([data-talent-human="true"]),
:root[data-talent-heaven-available="true"][data-talent-earth-available="true"][data-talent-human-available="false"] {
    --theme-tier: 2;
    --theme-tier-label: '天地';
    --theme-refinement: 0.66;
    
    --composite-refinement-opacity: 0.8;
    --composite-animation-duration: 1s;
    --composite-transition-speed: 0.6s;
}

/* 完整层级 - 三才皆可用 */
:root[data-talent-earth="true"][data-talent-human="true"],
:root[data-talent-heaven-available="true"][data-talent-earth-available="true"][data-talent-human-available="true"] {
    --theme-tier: 3;
    --theme-tier-label: '天地人';
    --theme-refinement: 1;
    
    --composite-refinement-opacity: 1;
    --composite-animation-duration: 0.8s;
    --composite-transition-speed: 0.4s;
}

/* 三才状态指示器样式 */
.talent-indicator {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: 2rem;
    box-shadow: var(--shadow-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
    z-index: 1000;
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.talent-indicator.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.talent-indicator .talent-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-medium);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.talent-indicator .talent-dot.active {
    background: var(--primary-color);
    box-shadow: 0 0 8px var(--primary-color);
}

.talent-indicator .talent-dot.heaven.active {
    background: hsl(45, 80%, 55%);
    box-shadow: 0 0 8px hsl(45, 80%, 55%);
}

.talent-indicator .talent-dot.earth.active {
    background: hsl(140, 60%, 45%);
    box-shadow: 0 0 8px hsl(140, 60%, 45%);
}

.talent-indicator .talent-dot.human.active {
    background: hsl(220, 70%, 55%);
    box-shadow: 0 0 8px hsl(220, 70%, 55%);
}

.talent-indicator .talent-label {
    margin-left: 0.25rem;
    font-weight: 500;
}

/* 层级提示信息 */
.talent-prompt {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1.5rem 2rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    text-align: center;
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.talent-prompt.visible {
    opacity: 1;
    pointer-events: auto;
}

.talent-prompt .prompt-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.talent-prompt .prompt-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.talent-prompt .prompt-action {
    padding: 0.5rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.talent-prompt .prompt-action:hover {
    background: var(--primary-hover);
}

/* 基于层级的动画效果 */
.talent-animation-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: var(--composite-refinement-opacity, 0.6);
    transition: opacity var(--composite-transition-speed, 0.8s) ease;
}

.talent-animation-layer.earth-layer {
    background: radial-gradient(
        ellipse at center,
        hsla(var(--composite-hue), calc(var(--composite-saturation) * 2), calc(var(--composite-brightness) * 0.3), 0.15) 0%,
        transparent 70%
    );
}

.talent-animation-layer.human-layer {
    background: radial-gradient(
        circle at 30% 70%,
        hsla(calc(var(--composite-hue) + 60), calc(var(--composite-saturation) * 1.5), calc(var(--composite-brightness) * 0.4), 0.1) 0%,
        transparent 50%
    );
}

/* 层级过渡动画 */
@keyframes tierUpgrade {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.tier-upgrade-animation {
    animation: tierUpgrade var(--composite-animation-duration, 1s) ease-out;
}

/* 地理位置提示样式 */
.geo-prompt-indicator {
    position: fixed;
    top: 5rem;
    right: 2rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-sm);
    z-index: 999;
    opacity: 0;
    transform: translateX(1rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.geo-prompt-indicator.visible {
    opacity: 1;
    transform: translateX(0);
}

.geo-prompt-indicator .geo-icon {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
}

.geo-prompt-indicator:hover {
    background: var(--bg-tertiary);
}

/* 八字数据提示样式 */
.profile-prompt-indicator {
    position: fixed;
    top: 7rem;
    right: 2rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-sm);
    z-index: 999;
    opacity: 0;
    transform: translateX(1rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.profile-prompt-indicator.visible {
    opacity: 1;
    transform: translateX(0);
}

.profile-prompt-indicator .profile-icon {
    width: 20px;
    height: 20px;
    color: var(--accent-color);
}

.profile-prompt-indicator:hover {
    background: var(--bg-tertiary);
}

/* 基于层级的响应式调整 */
@media (max-width: 768px) {
    .talent-indicator {
        bottom: 1rem;
        right: 1rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .geo-prompt-indicator,
    .profile-prompt-indicator {
        top: auto;
        bottom: 5rem;
        right: 1rem;
    }
}

@media (max-width: 480px) {
    .talent-indicator .talent-label {
        display: none;
    }
    
    .talent-indicator .talent-dot {
        width: 10px;
        height: 10px;
    }
}

/* 层级视觉反馈 - 光晕效果 */
.talent-glow-effect {
    position: fixed;
    pointer-events: none;
    z-index: -2;
}

.talent-glow-effect .glow-heaven {
    position: fixed;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 150vw;
    height: 100vh;
    background: radial-gradient(
        ellipse at center top,
        hsla(var(--season-hue, 220), calc(var(--season-saturation, 30) * 0.3), calc(var(--season-brightness, 60) * 0.4), 0.2) 0%,
        transparent 60%
    );
    opacity: var(--composite-refinement-opacity, 0.6);
    transition: opacity var(--composite-transition-speed, 0.8s) ease;
}

.talent-glow-effect .glow-earth {
    position: fixed;
    bottom: -20%;
    left: -20%;
    width: 140vw;
    height: 80vh;
    background: radial-gradient(
        ellipse at center bottom,
        hsla(calc(var(--composite-hue, 220) + 30), calc(var(--composite-saturation, 10) * 0.5), calc(var(--composite-brightness, 50) * 0.35), 0.15) 0%,
        transparent 50%
    );
    opacity: var(--composite-refinement-opacity, 0.6);
    transition: opacity var(--composite-transition-speed, 0.8s) ease;
}

.talent-glow-effect .glow-human {
    position: fixed;
    top: 20%;
    right: -10%;
    width: 60vw;
    height: 60vh;
    background: radial-gradient(
        circle at center,
        hsla(calc(var(--composite-hue, 220) - 30), calc(var(--composite-saturation, 10) * 0.4), calc(var(--composite-brightness, 50) * 0.3), 0.1) 0%,
        transparent 40%
    );
    opacity: var(--composite-refinement-opacity, 0.6);
    transition: opacity var(--composite-transition-speed, 0.8s) ease;
}

/* 渐进式主题平滑过渡动画 */
.talent-transitioning {
    transition: 
        --talent-brightness var(--transition-progressive-duration) var(--transition-progressive-easing),
        --talent-hue var(--transition-progressive-duration) var(--transition-progressive-easing),
        --talent-saturation var(--transition-progressive-duration) var(--transition-progressive-easing),
        --talent-temperature var(--transition-progressive-duration) var(--transition-progressive-easing),
        --talent-contrast var(--transition-progressive-duration) var(--transition-progressive-easing),
        --composite-brightness var(--transition-progressive-duration) var(--transition-progressive-easing),
        --composite-hue var(--transition-progressive-duration) var(--transition-progressive-easing),
        --composite-saturation var(--transition-progressive-duration) var(--transition-progressive-easing),
        --composite-temperature var(--transition-progressive-duration) var(--transition-progressive-easing),
        --bg-primary var(--transition-progressive-duration) var(--transition-progressive-easing),
        --bg-secondary var(--transition-progressive-duration) var(--transition-progressive-easing),
        --bg-tertiary var(--transition-progressive-duration) var(--transition-progressive-easing),
        --text-primary var(--transition-progressive-duration) var(--transition-progressive-easing),
        --text-secondary var(--transition-progressive-duration) var(--transition-progressive-easing),
        --text-muted var(--transition-progressive-duration) var(--transition-progressive-easing),
        --border-light var(--transition-progressive-duration) var(--transition-progressive-easing),
        --border-medium var(--transition-progressive-duration) var(--transition-progressive-easing),
        --card-bg var(--transition-progressive-duration) var(--transition-progressive-easing),
        --primary-color var(--transition-progressive-duration) var(--transition-progressive-easing),
        --primary-hover var(--transition-progressive-duration) var(--transition-progressive-easing),
        --accent-color var(--transition-progressive-duration) var(--transition-progressive-easing),
        --shadow-opacity var(--transition-progressive-duration) var(--transition-progressive-easing),
        --shadow-sm var(--transition-progressive-duration) var(--transition-progressive-easing),
        --shadow-md var(--transition-progressive-duration) var(--transition-progressive-easing),
        --shadow-lg var(--transition-progressive-duration) var(--transition-progressive-easing);
}

/* 层级提升时的闪烁动画 */
@keyframes tierFlash {
    0% {
        box-shadow: inset 0 0 0 0 transparent;
    }
    50% {
        box-shadow: inset 0 0 50px var(--primary-color);
        background-color: var(--bg-secondary);
    }
    100% {
        box-shadow: inset 0 0 0 0 transparent;
    }
}

.tier-flash-active {
    animation: tierFlash var(--transition-tier-flash) ease-out;
}

@keyframes flashActive {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.4);
        background-color: var(--bg-tertiary);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(var(--primary-color-rgb), 0.2);
        background-color: var(--bg-secondary);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0);
        background-color: var(--bg-tertiary);
    }
}

.flash-active {
    animation: flashActive 0.6s ease-out;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pulse {
    animation: pulse 1s ease-in-out;
}

/* 渐进式主题指示器动画 */
.talent-indicator {
    transition: 
        opacity var(--transition-progressive-duration) var(--transition-progressive-easing),
        transform var(--transition-progressive-duration) var(--transition-progressive-easing),
        background-color var(--transition-progressive-duration) var(--transition-progressive-easing),
        border-color var(--transition-progressive-duration) var(--transition-progressive-easing),
        box-shadow var(--transition-progressive-duration) var(--transition-progressive-easing);
}

.talent-indicator .talent-dot {
    transition: 
        background-color var(--transition-progressive-duration) var(--transition-progressive-easing),
        box-shadow var(--transition-progressive-duration) var(--transition-progressive-easing),
        transform var(--transition-progressive-duration) var(--transition-progressive-easing),
        opacity var(--transition-progressive-duration) var(--transition-progressive-easing);
}

.talent-indicator .talent-dot.active {
    box-shadow: 0 0 10px currentColor;
    transform: scale(1.2);
}

.talent-indicator .talent-label {
    transition: 
        color var(--transition-progressive-duration) var(--transition-progressive-easing),
        opacity var(--transition-progressive-duration) var(--transition-progressive-easing);
}

/* 层级气泡动画 */
@keyframes tierBubble {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.tier-bubble-show {
    animation: tierBubble var(--transition-progressive-duration) var(--transition-progressive-easing);
}

/* 主题层级提升提示 */
.talent-prompt {
    transition: 
        opacity var(--transition-progressive-duration) var(--transition-progressive-easing),
        transform var(--transition-progressive-duration) var(--transition-progressive-easing),
        background-color var(--transition-progressive-duration) var(--transition-progressive-easing),
        border-color var(--transition-progressive-duration) var(--transition-progressive-easing),
        box-shadow var(--transition-progressive-duration) var(--transition-progressive-easing);
}

.talent-prompt .prompt-title {
    transition: color var(--transition-colors-duration) var(--transition-colors-easing);
}

.talent-prompt .prompt-description {
    transition: color var(--transition-colors-duration) var(--transition-colors-easing);
}

.talent-prompt .prompt-action {
    transition: 
        background-color var(--transition-colors-duration) var(--transition-colors-easing),
        color var(--transition-colors-duration) var(--transition-colors-easing),
        border-color var(--transition-colors-duration) var(--transition-colors-easing),
        transform var(--transition-fast);
}

.talent-prompt .prompt-action:hover {
    transform: scale(1.05);
}

/* 光晕层次过渡动画 */
.talent-glow-effect {
    transition: opacity var(--transition-progressive-duration) var(--transition-progressive-easing);
}

.talent-glow-effect .glow-heaven {
    transition: 
        opacity var(--transition-progressive-duration) var(--transition-progressive-easing),
        background var(--transition-progressive-duration) var(--transition-progressive-easing);
}

.talent-glow-effect .glow-earth {
    transition: 
        opacity var(--transition-progressive-duration) var(--transition-progressive-easing),
        background var(--transition-progressive-duration) var(--transition-progressive-easing);
}

.talent-glow-effect .glow-human {
    transition: 
        opacity var(--transition-progressive-duration) var(--transition-progressive-easing),
        background var(--transition-progressive-duration) var(--transition-progressive-easing);
}

/* 动画层过渡 */
.talent-animation-layer {
    transition: 
        opacity var(--transition-progressive-duration) var(--transition-progressive-easing),
        background var(--transition-progressive-duration) var(--transition-progressive-easing);
}

.talent-animation-layer.earth-layer {
    transition: 
        opacity var(--transition-progressive-duration) var(--transition-progressive-easing),
        background var(--transition-progressive-duration) var(--transition-progressive-easing);
}

.talent-animation-layer.human-layer {
    transition: 
        opacity var(--transition-progressive-duration) var(--transition-progressive-easing),
        background var(--transition-progressive-duration) var(--transition-progressive-easing);
}

/* 基于权重的视觉反馈 */
:root {
    --talent-weight-indicator: calc(var(--talent-total-weight, 0) * 100%);
}

.talent-weight-bar {
    width: var(--talent-weight-indicator);
    transition: width var(--transition-progressive-duration) var(--transition-progressive-easing);
}

/* 层级进度条动画 */
@keyframes tierProgress {
    from {
        width: 0;
    }
}

.tier-progress-animate {
    animation: tierProgress var(--transition-progressive-duration) var(--transition-progressive-easing) forwards;
}

/* 主题层级文字渐变动画 */
@keyframes tierNameFade {
    0% {
        opacity: 0.5;
        transform: translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.tier-name-update {
    animation: tierNameFade var(--transition-colors-duration) var(--transition-colors-easing);
}

/* 渐进式主题更新时的背景微光效果 */
@keyframes progressiveGlow {
    0% {
        box-shadow: inset 0 0 0 0 transparent;
    }
    50% {
        box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.05);
    }
    100% {
        box-shadow: inset 0 0 0 0 transparent;
    }
}

.progressive-glow-active {
    animation: progressiveGlow var(--transition-progressive-duration) var(--transition-progressive-easing);
}

/* 数据采集进度指示器 */
.talent-progress-ring {
    transition: stroke-dashoffset var(--transition-progressive-duration) var(--transition-progressive-easing);
}

/* 层级切换时的缩放效果 */
@keyframes tierScale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.tier-scale-active {
    animation: tierScale var(--transition-progressive-duration) var(--transition-progressive-easing);
}

/* 农历指示器样式 - 右下角显示 */
.lunar-indicator {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 0.75rem;
    color: rgba(85, 85, 85, 0.9);
    z-index: 1000;
    transition: 
        opacity var(--transition-progressive-duration) var(--transition-progressive-easing),
        color var(--transition-progressive-duration) var(--transition-progressive-easing);
    pointer-events: none;
}

.lunar-indicator .lunar-content {
    font-weight: 300;
    color: rgba(85, 85, 85, 0.9);
    letter-spacing: 0.03em;
    line-height: 1.4;
}

/* 淡出动画 */
.lunar-indicator.fade-out {
    opacity: 0.5;
}

/* 淡入动画 */
.lunar-indicator.fade-in {
    opacity: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .lunar-indicator {
        bottom: 1rem;
        right: 1rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .lunar-indicator {
        bottom: 0.75rem;
        right: 0.75rem;
        font-size: 0.7rem;
        max-width: calc(100vw - 1.5rem);
    }
}