/* 我们的生活记录 - Flask版本样式 */

/* 字体系统 - 引入趣味可爱字体 */
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');

/* 轮播按钮样式 */
.carousel-btn {
    @apply w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-all duration-200;
}

.carousel-btn:hover {
    @apply bg-white/40 transform scale-110;
}

/* 日历样式 */
.calendar-nav-btn {
    @apply w-8 h-8 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-all duration-200;
}

.calendar-nav-btn:hover {
    @apply bg-white/40 transform scale-110;
}

/* 日历样式 */
.calendar-day {
    @apply rounded-lg transition-all duration-200 relative overflow-hidden;
    min-height: 2.5rem;
    @apply flex items-center justify-center;
}

.calendar-day:hover {
    @apply transform scale-105;
}

.calendar-day.today {
    @apply ring-2 ring-blue-500 ring-opacity-50;
}

.calendar-day.selected {
    @apply ring-2 ring-blue-300 ring-opacity-50;
}

/* 日历网格优化 */
.calendar-section .grid {
    @apply gap-1;
}

/* 星期标题样式 */
.calendar-section .text-xs {
    @apply font-medium;
}

/* 日历容器优化 */
.calendar-section {
    @apply relative;
}

.calendar-header {
    @apply relative z-10;
}

/* 热力图图例优化 */
.calendar-footer .flex {
    @apply items-center justify-center;
}

/* 年月选择器样式 */
.year-month-picker {
    @apply backdrop-blur-sm;
}

.year-month-picker .month-grid {
    @apply grid-cols-3 gap-2;
}

.year-month-picker .month-button {
    @apply py-2 px-3 rounded-lg text-sm font-medium transition-all duration-200;
}

.year-month-picker .month-button:hover {
    @apply transform scale-105;
}

.year-month-picker .month-button.active {
    @apply bg-blue-500 text-white shadow-md;
}

.year-month-picker .month-button:not(.active) {
    @apply bg-gray-100 hover:bg-gray-200 text-gray-700;
}

/* 主题系统 */
:root {
    /* 默认主题 - 温暖米色 */
    --primary-color: #355C7D;
    --secondary-color: #B7AFA3;
    --accent-color: #F6C555;
    --success-color: #6CA36C;
    --danger-color: #D7263D;
    --info-color: #6A8D73;
    --warning-color: #F59E0B;
    
    /* 背景色系 */
    --bg-primary: #F8F6F1;
    --bg-secondary: #EDE6DE;
    --bg-tertiary: #F5F3EF;
    --bg-card: #FFFDF8;
    --bg-overlay: rgba(248, 246, 241, 0.95);
    
    /* 边框和阴影 */
    --border-light: #D6C6B8;
    --border-medium: #B7AFA3;
    --border-dark: #8B8378;
    --shadow-light: rgba(53, 92, 125, 0.08);
    --shadow-medium: rgba(53, 92, 125, 0.15);
    --shadow-dark: rgba(53, 92, 125, 0.25);
    
    /* 字体系统 - 趣味可爱字体配置 */
    /* 主要字体族 */
    --font-primary: 'ZCOOL KuaiLe', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', cursive;
    --font-secondary: 'ZCOOL KuaiLe', 'Source Han Serif SC', '思源宋体', cursive;
    --font-display: 'ZCOOL KuaiLe', cursive;
    --font-handwriting: 'ZCOOL KuaiLe', cursive;
    --font-fun: 'ZCOOL KuaiLe', cursive;
    
    /* 字体大小系统 */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */
    --font-size-6xl: 3.75rem;     /* 60px */
    
    /* 字体粗细 */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* 行高 */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    
    /* 字间距 */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    
    /* 默认字体配置 */
    --font-family: var(--font-primary);
    --font-size: var(--font-size-base);
    --font-weight: var(--font-weight-normal);
    --line-height: var(--line-height-normal);
    --letter-spacing: var(--letter-spacing-normal);
    
    /* 输入控件 */
    --input-bg: #F5F3EF;
    --input-border: #B7AFA3;
    --input-focus: #F6C555;
    --input-placeholder: #8B8378;
    --input-disabled: #E5E0D8;
    
    /* 卡片组件 */
    --card-bg: #FFFDF8;
    --card-border: #EDE6DE;
    --card-shadow: 0 2px 12px var(--shadow-light);
    --card-shadow-hover: 0 4px 24px var(--shadow-medium);
    
    /* 按钮 */
    --btn-primary-bg: linear-gradient(135deg, #355C7D 0%, #B7AFA3 100%);
    --btn-primary-hover: linear-gradient(135deg, #355C7D 0%, #F6C555 100%);
    --btn-secondary-bg: #B7AFA3;
    --btn-secondary-hover: #A89F93;
    --btn-success-bg: #6CA36C;
    --btn-success-hover: #5B8A5B;
    --btn-danger-bg: #D7263D;
    --btn-danger-hover: #B81F32;
    --btn-warning-bg: #F6C555;
    --btn-warning-hover: #E5B44A;
    --btn-info-bg: #6A8D73;
    --btn-info-hover: #5A7D63;
    --btn-radius: 1.5rem;
    
    /* 文字颜色 */
    --text-primary: #2C3E50;
    --text-secondary: #556473;
    --text-muted: #7A8594;
    --text-inverse: #FFFFFF;
    --text-on-primary: #FFFFFF;
    --text-on-secondary: #2C3E50;
    --text-on-success: #FFFFFF;
    --text-on-danger: #FFFFFF;
    --text-on-warning: #2C3E50;
    --text-on-info: #FFFFFF;
    
    /* 链接 */
    --link-color: #355C7D;
    --link-hover-color: #F6C555;
    --link-visited: #6A8D73;
    
    /* 状态颜色 */
    --status-online: #6CA36C;
    --status-offline: #7A8594;
    --status-busy: #D7263D;
    --status-away: #F6C555;
    
    /* 滚动条 */
    --scrollbar-track: #F5F3EF;
    --scrollbar-thumb: #B7AFA3;
    --scrollbar-thumb-hover: #355C7D;
    
    /* 动画 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* 深色主题 */
[data-theme="dark"] {
    --primary-color: #60A5FA;
    --secondary-color: #6B7280;
    --accent-color: #F59E0B;
    --success-color: #10B981;
    --danger-color: #EF4444;
    --info-color: #06B6D4;
    --warning-color: #F59E0B;
    
    /* 深色主题字体 - 趣味可爱风格 */
    --font-family: var(--font-fun);
    
    /* 背景色系 */
    --bg-primary: #111827;
    --bg-secondary: #1F2937;
    --bg-tertiary: #374151;
    --bg-card: #1F2937;
    --bg-overlay: rgba(17, 24, 39, 0.95);
    
    /* 边框和阴影 */
    --border-light: #374151;
    --border-medium: #4B5563;
    --border-dark: #6B7280;
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.5);
    --shadow-dark: rgba(0, 0, 0, 0.7);
    
    /* 输入控件 */
    --input-bg: #374151;
    --input-border: #4B5563;
    --input-focus: #60A5FA;
    --input-placeholder: #9CA3AF;
    --input-disabled: #1F2937;
    
    /* 卡片组件 */
    --card-bg: #1F2937;
    --card-border: #374151;
    --card-shadow: 0 2px 12px var(--shadow-light);
    --card-shadow-hover: 0 4px 24px var(--shadow-medium);
    
    /* 按钮 */
    --btn-primary-bg: linear-gradient(135deg, #60A5FA 0%, #8B5CF6 100%);
    --btn-primary-hover: linear-gradient(135deg, #60A5FA 0%, #F59E0B 100%);
    --btn-secondary-bg: #6B7280;
    --btn-secondary-hover: #4B5563;
    --btn-success-bg: #10B981;
    --btn-success-hover: #059669;
    --btn-danger-bg: #EF4444;
    --btn-danger-hover: #DC2626;
    --btn-warning-bg: #F59E0B;
    --btn-warning-hover: #D97706;
    --btn-info-bg: #06B6D4;
    --btn-info-hover: #0891B2;
    
    /* 文字颜色 */
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;
    --text-inverse: #111827;
    --text-on-primary: #FFFFFF;
    --text-on-secondary: #F9FAFB;
    --text-on-success: #FFFFFF;
    --text-on-danger: #FFFFFF;
    --text-on-warning: #111827;
    --text-on-info: #FFFFFF;
    
    /* 链接 */
    --link-color: #93C5FD;
    --link-hover-color: #F59E0B;
    --link-visited: #06B6D4;
    
    /* 状态颜色 */
    --status-online: #10B981;
    --status-offline: #9CA3AF;
    --status-busy: #EF4444;
    --status-away: #F59E0B;
    
    /* 滚动条 */
    --scrollbar-track: #374151;
    --scrollbar-thumb: #6B7280;
    --scrollbar-thumb-hover: #60A5FA;
}

/* 清新绿色主题 */
[data-theme="nature"] {
    --primary-color: #059669;
    --secondary-color: #6B7280;
    --accent-color: #F59E0B;
    --success-color: #10B981;
    --danger-color: #EF4444;
    --info-color: #06B6D4;
    --warning-color: #F59E0B;
    
    /* 自然主题字体 - 趣味可爱风格 */
    --font-family: var(--font-fun);
    
    /* 背景色系 */
    --bg-primary: #F0FDF4;
    --bg-secondary: #DCFCE7;
    --bg-tertiary: #BBF7D0;
    --bg-card: #FFFFFF;
    --bg-overlay: rgba(240, 253, 244, 0.95);
    
    /* 边框和阴影 */
    --border-light: #BBF7D0;
    --border-medium: #86EFAC;
    --border-dark: #4ADE80;
    --shadow-light: rgba(5, 150, 105, 0.08);
    --shadow-medium: rgba(5, 150, 105, 0.15);
    --shadow-dark: rgba(5, 150, 105, 0.25);
    
    /* 输入控件 */
    --input-bg: #F0FDF4;
    --input-border: #BBF7D0;
    --input-focus: #059669;
    --input-placeholder: #6B7280;
    --input-disabled: #E0F2E9;
    
    /* 卡片组件 */
    --card-bg: #FFFFFF;
    --card-border: #DCFCE7;
    --card-shadow: 0 2px 12px var(--shadow-light);
    --card-shadow-hover: 0 4px 24px var(--shadow-medium);
    
    /* 按钮 */
    --btn-primary-bg: linear-gradient(135deg, #059669 0%, #10B981 100%);
    --btn-primary-hover: linear-gradient(135deg, #059669 0%, #F59E0B 100%);
    --btn-secondary-bg: #6B7280;
    --btn-secondary-hover: #4B5563;
    --btn-success-bg: #10B981;
    --btn-success-hover: #059669;
    --btn-danger-bg: #EF4444;
    --btn-danger-hover: #DC2626;
    --btn-warning-bg: #F59E0B;
    --btn-warning-hover: #D97706;
    --btn-info-bg: #06B6D4;
    --btn-info-hover: #0891B2;
    
    /* 文字颜色 */
    --text-primary: #064E3B;
    --text-secondary: #065F46;
    --text-muted: #4B5563;
    --text-inverse: #FFFFFF;
    --text-on-primary: #FFFFFF;
    --text-on-secondary: #064E3B;
    --text-on-success: #FFFFFF;
    --text-on-danger: #FFFFFF;
    --text-on-warning: #064E3B;
    --text-on-info: #FFFFFF;
    
    /* 链接 */
    --link-color: #059669;
    --link-hover-color: #F59E0B;
    --link-visited: #10B981;
    
    /* 状态颜色 */
    --status-online: #10B981;
    --status-offline: #6B7280;
    --status-busy: #EF4444;
    --status-away: #F59E0B;
    
    /* 滚动条 */
    --scrollbar-track: #F0FDF4;
    --scrollbar-thumb: #BBF7D0;
    --scrollbar-thumb-hover: #059669;
}

/* 浪漫粉色主题 */
[data-theme="romantic"] {
    --primary-color: #EC4899;
    --secondary-color: #F472B6;
    --accent-color: #F59E0B;
    --success-color: #10B981;
    --danger-color: #EF4444;
    --info-color: #06B6D4;
    --warning-color: #F59E0B;
    
    /* 浪漫主题字体 - 趣味可爱风格 */
    --font-family: var(--font-fun);
    
    /* 背景色系 */
    --bg-primary: #FDF2F8;
    --bg-secondary: #FCE7F3;
    --bg-tertiary: #FBCFE8;
    --bg-card: #FFFFFF;
    --bg-overlay: rgba(253, 242, 248, 0.95);
    
    /* 边框和阴影 */
    --border-light: #FBCFE8;
    --border-medium: #F9A8D4;
    --border-dark: #F472B6;
    --shadow-light: rgba(236, 72, 153, 0.08);
    --shadow-medium: rgba(236, 72, 153, 0.15);
    --shadow-dark: rgba(236, 72, 153, 0.25);
    
    /* 输入控件 */
    --input-bg: #FDF2F8;
    --input-border: #FBCFE8;
    --input-focus: #EC4899;
    --input-placeholder: #9CA3AF;
    --input-disabled: #F3E8F2;
    
    /* 卡片组件 */
    --card-bg: #FFFFFF;
    --card-border: #FCE7F3;
    --card-shadow: 0 2px 12px var(--shadow-light);
    --card-shadow-hover: 0 4px 24px var(--shadow-medium);
    
    /* 按钮 */
    --btn-primary-bg: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
    --btn-primary-hover: linear-gradient(135deg, #EC4899 0%, #F59E0B 100%);
    --btn-secondary-bg: #F472B6;
    --btn-secondary-hover: #F9A8D4;
    --btn-success-bg: #10B981;
    --btn-success-hover: #059669;
    --btn-danger-bg: #EF4444;
    --btn-danger-hover: #DC2626;
    --btn-warning-bg: #F59E0B;
    --btn-warning-hover: #D97706;
    --btn-info-bg: #06B6D4;
    --btn-info-hover: #0891B2;
    
    /* 文字颜色 */
    --text-primary: #831843;
    --text-secondary: #BE185D;
    --text-muted: #6B7280;
    --text-inverse: #FFFFFF;
    --text-on-primary: #FFFFFF;
    --text-on-secondary: #831843;
    --text-on-success: #FFFFFF;
    --text-on-danger: #FFFFFF;
    --text-on-warning: #831843;
    --text-on-info: #FFFFFF;
    
    /* 链接 */
    --link-color: #EC4899;
    --link-hover-color: #F59E0B;
    --link-visited: #F472B6;
    
    /* 状态颜色 */
    --status-online: #10B981;
    --status-offline: #6B7280;
    --status-busy: #EF4444;
    --status-away: #F59E0B;
    
    /* 滚动条 */
    --scrollbar-track: #FDF2F8;
    --scrollbar-thumb: #FBCFE8;
    --scrollbar-thumb-hover: #EC4899;
}

[data-theme="aqua-earth"] {
    /* 主色系 - 水蓝色调 */
    --primary-color: #74b9c7;        /* 中等水蓝 */
    --secondary-color: #b7dbe4;      /* 浅水蓝 */
    --accent-color: #685045;         /* 深棕作为点缀色 */
    
    /* 水蓝主题字体 - 趣味可爱风格 */
    --font-family: var(--font-fun);
    
    /* 功能色 - 保持和谐但保持辨识度 */
    --success-color: #5a8f7b;        /* 青绿色 */
    --danger-color: #c77d7d;         /* 柔和的珊瑚红 */
    --info-color: #4a8cae;           /* 深水蓝 */
    --warning-color: #d4a574;        /* 温暖的橙色 */
    
    /* 背景色系 */
    --bg-primary: #f0f7f9;           /* 极浅水色 */
    --bg-secondary: #e0f0f4;         /* 稍深的水色 */
    --bg-tertiary: #d8e9ed;          /* 更深的蓝 */
    --bg-card: #FFFFFF;              
    --bg-overlay: rgba(240, 247, 249, 0.95);
    
    /* 边框和阴影 */
    --border-light: #c2e0e8;         /* 浅水蓝边框 */
    --border-medium: #a8d1dc;        /* 中等水蓝 */
    --border-dark: #8bb8c5;          /* 深水蓝 */
    --shadow-light: rgba(116, 185, 199, 0.1);
    --shadow-medium: rgba(116, 185, 199, 0.15);
    --shadow-dark: rgba(116, 185, 199, 0.25);
    
    /* 输入控件 */
    --input-bg: #f5fbfc;             /* 接近白色的浅蓝 */
    --input-border: #b7dbe4;         
    --input-focus: #74b9c7;          
    --input-placeholder: #7a8e93;    /* 灰蓝色 */
    --input-disabled: #e8f4f7;
    
    /* 卡片组件 */
    --card-bg: #FFFFFF;              
    --card-border: #d8e9ed;         /* 比背景稍深的蓝 */
    --card-shadow: 0 2px 12px var(--shadow-light);
    --card-shadow-hover: 0 4px 24px var(--shadow-medium);
    
    /* 按钮 */
    --btn-primary-bg: linear-gradient(135deg, #74b9c7 0%, #9b7a66 100%);
    --btn-primary-hover: linear-gradient(135deg, #5a8f9f 0%, #685045 100%);
    --btn-secondary-bg: #b7dbe4;
    --btn-secondary-hover: #a8d1dc;
    --btn-success-bg: #5a8f7b;
    --btn-success-hover: #4a7c6a;
    --btn-danger-bg: #c77d7d;
    --btn-danger-hover: #b56a6a;
    --btn-warning-bg: #d4a574;
    --btn-warning-hover: #c49464;
    --btn-info-bg: #4a8cae;
    --btn-info-hover: #3d7a9a;
    
    /* 文字颜色 */
    --text-primary: #174c53;         /* 深青作为主文字 */
    --text-secondary: #3a6d7a;       /* 稍浅的青 */
    --text-muted: #5a7d8a;           /* 灰蓝色 */
    --text-inverse: #FFFFFF;
    --text-on-primary: #FFFFFF;
    --text-on-secondary: #174c53;
    --text-on-success: #FFFFFF;
    --text-on-danger: #FFFFFF;
    --text-on-warning: #174c53;
    --text-on-info: #FFFFFF;
    
    /* 链接 */
    --link-color: #74b9c7;
    --link-hover-color: #685045;
    --link-visited: #4a8cae;
    
    /* 状态颜色 */
    --status-online: #5a8f7b;
    --status-offline: #5a7d8a;
    --status-busy: #c77d7d;
    --status-away: #d4a574;
    
    /* 滚动条 */
    --scrollbar-track: #f0f7f9;
    --scrollbar-thumb: #c2e0e8;
    --scrollbar-thumb-hover: #74b9c7;
}

/* 海洋蓝色主题 */
[data-theme="ocean"] {
    --primary-color: #0EA5E9;
    --secondary-color: #38BDF8;
    --accent-color: #F59E0B;
    --success-color: #10B981;
    --danger-color: #EF4444;
    --info-color: #06B6D4;
    --warning-color: #F59E0B;
    
    /* 海洋主题字体 - 趣味可爱风格 */
    --font-family: var(--font-fun);
    
    /* 背景色系 */
    --bg-primary: #F0F9FF;
    --bg-secondary: #E0F2FE;
    --bg-tertiary: #BAE6FD;
    --bg-card: #FFFFFF;
    --bg-overlay: rgba(240, 249, 255, 0.95);
    
    /* 边框和阴影 */
    --border-light: #BAE6FD;
    --border-medium: #7DD3FC;
    --border-dark: #38BDF8;
    --shadow-light: rgba(14, 165, 233, 0.08);
    --shadow-medium: rgba(14, 165, 233, 0.15);
    --shadow-dark: rgba(14, 165, 233, 0.25);
    
    /* 输入控件 */
    --input-bg: #F0F9FF;
    --input-border: #BAE6FD;
    --input-focus: #0EA5E9;
    --input-placeholder: #6B7280;
    --input-disabled: #E0F2FE;
    
    /* 卡片组件 */
    --card-bg: #FFFFFF;
    --card-border: #E0F2FE;
    --card-shadow: 0 2px 12px var(--shadow-light);
    --card-shadow-hover: 0 4px 24px var(--shadow-medium);
    
    /* 按钮 */
    --btn-primary-bg: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
    --btn-primary-hover: linear-gradient(135deg, #0EA5E9 0%, #F59E0B 100%);
    --btn-secondary-bg: #38BDF8;
    --btn-secondary-hover: #7DD3FC;
    --btn-success-bg: #10B981;
    --btn-success-hover: #059669;
    --btn-danger-bg: #EF4444;
    --btn-danger-hover: #DC2626;
    --btn-warning-bg: #F59E0B;
    --btn-warning-hover: #D97706;
    --btn-info-bg: #06B6D4;
    --btn-info-hover: #0891B2;
    
    /* 文字颜色 */
    --text-primary: #0C4A6E;
    --text-secondary: #0369A1;
    --text-muted: #4B5563;
    --text-inverse: #FFFFFF;
    --text-on-primary: #FFFFFF;
    --text-on-secondary: #0C4A6E;
    --text-on-success: #FFFFFF;
    --text-on-danger: #FFFFFF;
    --text-on-warning: #0C4A6E;
    --text-on-info: #FFFFFF;
    
    /* 链接 */
    --link-color: #0EA5E9;
    --link-hover-color: #F59E0B;
    --link-visited: #38BDF8;
    
    /* 状态颜色 */
    --status-online: #10B981;
    --status-offline: #4B5563;
    --status-busy: #EF4444;
    --status-away: #F59E0B;
    
    /* 滚动条 */
    --scrollbar-track: #F0F9FF;
    --scrollbar-thumb: #BAE6FD;
    --scrollbar-thumb-hover: #0EA5E9;
}



/* 主题切换器样式 */
.theme-switcher {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1000;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 50px;
    padding: 8px;
    box-shadow: var(--card-shadow-hover);
    transition: var(--transition-normal);
    backdrop-filter: blur(10px);
}

.theme-switcher:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: var(--shadow-dark);
    border-color: var(--primary-color);
}

.theme-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    margin: 4px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-option:hover {
    transform: scale(1.1);
    border-color: var(--primary-color);
}

.theme-option.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color);
}

/* 主题颜色预览 */
.theme-default {
    background: linear-gradient(135deg, #355C7D 0%, #B7AFA3 50%, #F6C555 100%);
}

.theme-dark {
    background: linear-gradient(135deg, #111827 0%, #1F2937 50%, #60A5FA 100%);
}

.theme-nature {
    background: linear-gradient(135deg, #059669 0%, #10B981 50%, #F59E0B 100%);
}

.theme-romantic {
    background: linear-gradient(135deg, #EC4899 0%, #F472B6 50%, #F59E0B 100%);
}

.theme-ocean {
    background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 50%, #F59E0B 100%);
}

.theme-aqua-earth {
    background: linear-gradient(135deg, #74b9c7 0%, #4a7c8a 50%, #685045 100%);
}

/* 主题切换动画 */
.theme-transition {
    transition: all 0.3s ease;
}

.theme-transition * {
    transition: all 0.3s ease;
}

/* 主题切换提示 */
.theme-tooltip {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--card-bg);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    margin-right: 10px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(10px);
}

.theme-option:hover .theme-tooltip {
    opacity: 1;
    visibility: visible;
}

/* 响应式字体和主题切换器 */
@media (max-width: 768px) {
    .theme-switcher {
        position: fixed;
        bottom: 20px;
        right: 20px;
        top: auto;
        transform: none;
    }
    
    .theme-switcher:hover {
        transform: scale(1.05);
    }
    
    .theme-option {
        width: 35px;
        height: 35px;
    }
}

/* 默认隐藏悬浮主题切换器，除非显式开启 */
.theme-switcher { display: none !important; }
html[data-show-floating-theme-switcher="true"] .theme-switcher { display: block !important; }

/* 字体工具类系统 */
.font-primary { font-family: var(--font-fun) !important; }
.font-secondary { font-family: var(--font-fun) !important; }
.font-display { font-family: var(--font-fun) !important; }
.font-handwriting { font-family: var(--font-fun) !important; }
.font-fun { font-family: var(--font-fun) !important; }

/* 字体大小工具类 */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }
.text-6xl { font-size: var(--font-size-6xl) !important; }

/* 字体粗细工具类 */
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* 行高工具类 */
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }
.leading-loose { line-height: var(--line-height-loose) !important; }

/* 字间距工具类 */
.tracking-tight { letter-spacing: var(--letter-spacing-tight) !important; }
.tracking-normal { letter-spacing: var(--letter-spacing-normal) !important; }
.tracking-wide { letter-spacing: var(--letter-spacing-wide) !important; }
.tracking-wider { letter-spacing: var(--letter-spacing-wider) !important; }

/* 全局主题化样式 */
body, html {
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition-normal);
}

/* 标题字体系统 */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-family: var(--font-fun);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-wide);
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wider);
}

h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
}

h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
}

h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
}

h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
}

h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

/* 正文字体 */
p, span, div {
    color: var(--text-primary);
    font-family: var(--font-fun);
    line-height: var(--line-height-normal);
}

/* 链接样式 */
a {
    color: var(--link-color);
    transition: var(--transition-fast);
}

a:hover {
    color: var(--link-hover-color);
}

a:visited {
    color: var(--link-visited);
}

/* 表单元素主题化 */
input, textarea, select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px var(--input-focus);
}

input::placeholder, textarea::placeholder {
    color: var(--input-placeholder);
}

/* 禁用状态 */
input:disabled, textarea:disabled, select:disabled {
    background-color: var(--input-disabled);
    color: var(--text-muted);
}

/* 表格主题化 */
table {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

th, td {
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* 代码块主题化 */
code, pre {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

/* 引用块主题化 */
blockquote {
    border-left-color: var(--primary-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* 导航链接样式 */
.nav-link {
    color: var(--link-color);
    font-weight: 500;
    transition: color 0.2s;
    text-decoration: none;
}
.nav-link:hover {
    color: var(--link-hover-color);
}

/* 下拉菜单项样式 */
.dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200;
}

/* 卡通形象样式 */
.cartoon-characters {
    @apply text-center my-8 p-8 rounded-3xl shadow-lg;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    animation: fadeInUp 0.8s ease-out;
}

.character-container {
    @apply flex justify-center items-center gap-12 mb-4;
}

.character {
    @apply text-center transition-transform duration-300;
}

.character:hover {
    @apply transform -translate-y-2;
}

.character-emoji {
    @apply text-6xl mb-2;
    animation: bounce 3s infinite;
}

.character-name {
    @apply text-xl font-semibold tracking-wide;
    color: var(--text-primary);
}

.heart-emoji {
    @apply text-5xl;
    color: var(--danger-color);
    animation: heartbeat 2s infinite;
}

.subtitle {
    @apply text-lg font-medium tracking-wide mt-4;
    color: var(--text-secondary);
}

/* 卡片样式 */
.card {
    background: var(--card-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border);
    transition: var(--transition-normal);
}
.card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

/* 按钮样式 */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--btn-radius);
    background: var(--btn-primary-bg);
    color: var(--text-on-primary);
    font-family: var(--font-fun);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-align: center;
    border: none;
    cursor: pointer;
    transition: var(--transition-normal);
    text-decoration: none;
    box-shadow: var(--card-shadow);
    letter-spacing: var(--letter-spacing-wide);
}
.btn:hover, .btn:focus {
    background: var(--btn-primary-hover);
    outline: none;
    text-decoration: none;
    color: var(--text-on-primary);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-1px);
}
.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--text-on-secondary);
}
.btn-secondary:hover {
    background: var(--btn-secondary-hover);
    color: var(--text-on-secondary);
}
.btn-success {
    background: var(--btn-success-bg);
    color: var(--text-on-success);
}
.btn-success:hover {
    background: var(--btn-success-hover);
    color: var(--text-on-success);
}
.btn-danger {
    background: var(--btn-danger-bg);
    color: var(--text-on-danger);
}
.btn-danger:hover {
    background: var(--btn-danger-hover);
    color: var(--text-on-danger);
}
.btn-warning {
    background: var(--btn-warning-bg);
    color: var(--text-on-warning);
}
.btn-warning:hover {
    background: var(--btn-warning-hover);
    color: var(--text-on-warning);
}
.btn-info {
    background: var(--btn-info-bg);
    color: var(--text-on-info);
}
.btn-info:hover {
    background: var(--btn-info-hover);
    color: var(--text-on-info);
}
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    box-shadow: none;
}

.btn-outline:hover, .btn-outline:focus {
    background: var(--primary-color);
    color: var(--text-on-primary);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--card-shadow-hover);
}

/* 日期选择器样式 */
.date-picker-grid {
    border: 1px solid var(--input-border);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--card-bg);
}

.date-picker-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--primary-color);
    color: var(--text-on-primary);
    font-weight: 600;
    font-size: 0.85rem;
}

.date-picker-day-header {
    padding: 0.5rem 0.25rem;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.date-picker-day-header:last-child {
    border-right: none;
}

.date-picker-body {
    padding: 0.25rem;
}

.date-picker-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-bottom: 1px;
}

.date-picker-week:last-child {
    margin-bottom: 0;
}

.date-picker-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    color: var(--text-primary);
    background: transparent;
    min-height: 32px;
}

.date-picker-day:hover {
    background: var(--primary-color);
    color: var(--text-on-primary);
    transform: scale(1.05);
}

.date-picker-day.other-month {
    color: var(--text-secondary);
    opacity: 0.5;
}

.date-picker-day.has-diary {
    background: var(--accent-color);
    color: var(--text-on-primary);
    font-weight: 600;
}

.date-picker-day.has-diary::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    background: var(--text-on-primary);
    border-radius: 50%;
}

.date-picker-day.selected {
    background: var(--primary-color);
    color: var(--text-on-primary);
    font-weight: 600;
    box-shadow: 0 0 0 2px var(--accent-color);
}

.date-picker-day.today {
    background: var(--accent-color);
    color: var(--text-on-primary);
    font-weight: 600;
}

.date-picker-day.today::before {
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    width: 4px;
    height: 4px;
    background: var(--danger-color);
    border-radius: 50%;
}

.date-picker-day.selected.today::before {
    background: var(--text-on-primary);
}

.date-picker-day.empty {
    background: transparent;
    color: transparent;
    cursor: default;
    pointer-events: none;
}

.date-picker-day.empty:hover {
    background: transparent;
    transform: none;
}

/* 日期选择器弹出层样式 */
.date-picker-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    margin-top: 0.5rem;
    min-width: 280px;
    max-width: 320px;
    width: 320px;
}

/* 智能定位：当靠近右边界时，从右侧对齐 */
.date-picker-popup.right-aligned {
    left: auto;
    right: 0;
}

.date-picker-content {
    background: var(--card-bg);
    border: 1px solid var(--input-border);
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 1rem;
    min-width: 280px;
    max-width: 320px;
    width: 100%;
}

/* 旋转动画 */
.rotate-180 {
    transform: rotate(180deg);
}

/* 过渡动画 */
.transition {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-150 {
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

@media (max-width: 768px) {
    .date-picker-day {
        font-size: 0.75rem;
        min-height: 28px;
    }
    
    .date-picker-day-header {
        font-size: 0.75rem;
        padding: 0.375rem 0.125rem;
    }
    
    .date-picker-body {
        padding: 0.125rem;
    }
    
    .date-picker-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: 0;
        width: 90vw;
        max-width: 320px;
        right: auto;
    }
    
    .date-picker-content {
        padding: 0.75rem;
        max-width: none;
    }
}

/* 确保弹出层不会超出视口 */
@media (max-width: 480px) {
    .date-picker-popup {
        width: 95vw;
        max-width: 300px;
    }
    
    .date-picker-content {
        padding: 0.5rem;
    }
}

/* 表单样式 */
.form-group {
    @apply mb-4;
}

.form-label {
    display: block;
    font-size: 0.95rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: 0.75rem 1.2rem;
    border-radius: 1rem;
    border: 1.5px solid var(--input-border);
    background: var(--input-bg);
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 2px var(--input-focus);
    outline: none;
}
.form-input::placeholder, .form-textarea::placeholder {
    color: var(--input-placeholder);
    font-size: 0.98rem;
}

/* 进度条样式 */
.progress-bar {
    width: 100%;
    background: var(--bg-secondary);
    border-radius: 1rem;
    height: 0.75rem;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--btn-primary-bg);
    border-radius: 1rem;
    transition: width 0.5s;
}

/* 标签样式 */
.tag {
    display: inline-block;
    padding: 0.25rem 0.9rem;
    border-radius: 1rem;
    font-family: var(--font-fun);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    background: var(--accent-color);
    color: var(--text-on-warning);
    margin-right: 0.3rem;
    opacity: 0.2;
    transition: var(--transition-fast);
    letter-spacing: var(--letter-spacing-wide);
}
.tag:hover {
    opacity: 1;
    transform: scale(1.05);
}
.tag-high { 
    background: var(--danger-color); 
    color: var(--text-on-danger); 
    opacity: 1; 
}
.tag-medium { 
    background: var(--accent-color); 
    color: var(--text-on-warning); 
    opacity: 1; 
}
.tag-low { 
    background: var(--success-color); 
    color: var(--text-on-success); 
    opacity: 1; 
}
.tag-success { 
    background: var(--success-color); 
    color: var(--text-on-success); 
    opacity: 1; 
}
.tag-secondary { 
    background: var(--secondary-color); 
    color: var(--text-on-secondary); 
    opacity: 1; 
}

/* 消息提示样式 */
.alert {
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    border-left: 5px solid var(--primary-color);
    background: var(--card-bg);
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.alert-success { border-left-color: var(--success-color); }
.alert-error { border-left-color: var(--danger-color); }
.alert-warning { border-left-color: var(--accent-color); }
.alert-info { border-left-color: var(--info-color); }

/* 统计卡片样式 */
.stat-card {
    background: var(--card-bg);
    border-radius: 1.5rem;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border);
    transition: var(--transition-normal);
}
.stat-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}
.stat-number {
    font-family: var(--font-fun);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    letter-spacing: var(--letter-spacing-wide);
}
.stat-label {
    color: var(--text-secondary);
    font-family: var(--font-fun);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
}

/* 动画效果 */
@keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .character-container {
        @apply gap-6;
    }
    
    .character-emoji {
        @apply text-4xl;
    }
    
    .heart-emoji {
        @apply text-4xl;
    }
    
    .subtitle {
        @apply text-base;
    }
    
    .card, .stat-card { padding: 1rem; }
    .stat-number { font-size: 1.3rem; }
}

/* 加载动画 */
.loading {
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    border: 2px solid #EDE6DE;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 工具提示 */
.tooltip {
    @apply relative;
}

.tooltip:hover .tooltip-text {
    @apply opacity-100 visible;
}

.tooltip-text {
    @apply absolute z-10 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg opacity-0 invisible transition-all duration-200;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip-text::after {
    content: "";
    @apply absolute top-full left-1/2 transform -translate-x-1/2;
    border: 5px solid transparent;
    border-top-color: #1f2937;
}

/* 滚动条样式 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } 

/* 多媒体日记功能样式 */

/* 文件上传区域 */
.file-upload-area {
    transition: all 0.3s ease;
}

.file-upload-area:hover {
    border-color: var(--primary-color);
    background-color: #f8f9fa;
}

.file-upload-area.dragover {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: white;
}

/* 媒体预览网格 */
.media-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}

.media-preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #f3f4f6;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.media-preview-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.media-preview-item img,
.media-preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-preview-item .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s;
}

.media-preview-item:hover .play-overlay {
    opacity: 1;
}

.media-preview-item .remove-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s;
    cursor: pointer;
}

.media-preview-item:hover .remove-btn {
    opacity: 1;
}

.media-preview-item .remove-btn:hover {
    background: rgba(239, 68, 68, 1);
    transform: scale(1.1);
}

/* 媒体查看器 */
.media-viewer {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-viewer-content {
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
}

.media-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
}

.media-viewer video {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.5rem;
}

.media-viewer-controls {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.media-viewer-btn {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.2s;
    backdrop-filter: blur(10px);
}

.media-viewer-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.media-viewer-close {
    top: 1rem;
    right: 1rem;
}

.media-viewer-prev {
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.media-viewer-next {
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.media-viewer-info {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    text-align: center;
    color: white;
    pointer-events: none;
}

.media-viewer-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.media-viewer-info p {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* 日记列表中的媒体缩略图 */
.diary-media-thumbnails {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.diary-media-thumbnail {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f3f4f6;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s;
}

.diary-media-thumbnail:hover {
    transform: scale(1.1);
}

.diary-media-thumbnail img,
.diary-media-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.diary-media-thumbnail .video-indicator {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}

.diary-media-thumbnail .video-indicator i {
    color: white;
    font-size: 1rem;
}

.media-count-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .media-preview-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 0.5rem;
    }
    
    .media-viewer-content {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .media-viewer-btn {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .diary-media-thumbnail {
        width: 3rem;
        height: 3rem;
    }
} 

/* 目标管理页面样式 */

/* 目标卡片样式 */
.goal-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.goal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.goal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        var(--primary-color) 0%, 
        var(--accent-color) 50%, 
        var(--primary-color) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.goal-card:hover::before {
    opacity: 1;
}

/* 进度滑块样式 */
.goal-progress-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    width: 100%;
}

.goal-progress-slider:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
    border-radius: 4px;
}

.goal-progress-slider::-webkit-slider-track {
    background: #e5e7eb;
    height: 8px;
    border-radius: 4px;
    position: relative;
}

.goal-progress-slider::-webkit-slider-track::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: currentColor;
    border-radius: 4px;
    transition: width 0.2s ease;
}

.goal-progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: 3px solid #3b82f6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.goal-progress-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.goal-progress-slider::-moz-range-track {
    background: #e5e7eb;
    height: 8px;
    border-radius: 4px;
    border: none;
}

.goal-progress-slider::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: 3px solid #3b82f6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* 不同优先级的滑块颜色 */
.slider-red::-webkit-slider-thumb {
    border-color: #ef4444;
}

.slider-yellow::-webkit-slider-thumb {
    border-color: #f59e0b;
}

.slider-blue::-webkit-slider-thumb {
    border-color: #3b82f6;
}

.slider-green::-webkit-slider-thumb {
    border-color: #10b981;
}

.slider-red::-moz-range-thumb {
    border-color: #ef4444;
}

.slider-yellow::-moz-range-thumb {
    border-color: #f59e0b;
}

.slider-blue::-moz-range-thumb {
    border-color: #3b82f6;
}

.slider-green::-moz-range-thumb {
    border-color: #10b981;
}

/* 进度圆环动画 */
.goal-card svg path {
    transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 快速操作按钮 */
.goal-card button {
    transition: all 0.2s ease;
}

.goal-card button:hover {
    transform: translateY(-1px);
}

.goal-card button:active {
    transform: translateY(0);
}

/* 目标类型标签动画 */
.goal-card span[class*="bg-"] {
    transition: all 0.2s ease;
}

.goal-card:hover span[class*="bg-"] {
    transform: scale(1.05);
}

/* 逾期提醒动画 */
@keyframes pulse-warning {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.goal-card .text-red-500 {
    animation: pulse-warning 2s infinite;
}

/* 完成状态特殊样式 */
.goal-card.border-green-500 {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.1) 100%);
}

.goal-card.border-green-500 h3 {
    color: #065f46;
}

/* 悬浮工具提示 */
.goal-card [title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .goal-card {
        margin-bottom: 1rem;
    }
    
    .goal-card .flex-col {
        gap: 1rem;
    }
    
    .goal-card .w-16.h-16 {
        width: 3rem;
        height: 3rem;
    }
    
    .goal-card .w-16.h-16 svg {
        width: 3rem;
        height: 3rem;
    }
}

/* 目标统计卡片 */
.goal-stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.goal-stats-card .stat-item {
    text-align: center;
    padding: 0.5rem;
}

.goal-stats-card .stat-number {
    font-size: 2rem;
    font-weight: bold;
    display: block;
}

.goal-stats-card .stat-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* 加载动画增强 */
.loading-goals {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.loading-goals::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid #f3f4f6;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} 

/* 习惯打卡页面样式 */

/* 习惯卡片样式 */
.habit-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.habit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 打卡成功卡片特殊效果 */
.habit-card.border-green-500 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.1) 100%);
    box-shadow: 0 4px 14px 0 rgba(34, 197, 94, 0.2);
}

.habit-card.border-green-500::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10b981, #34d399, #10b981);
    animation: success-shine 2s ease-in-out infinite;
}

@keyframes success-shine {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* 连击圆环动画 */
.habit-card svg path {
    transition: stroke-dasharray 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 打卡按钮特殊样式 */
.habit-checkin-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    position: relative;
    overflow: hidden;
}

.habit-checkin-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}

.habit-checkin-btn:hover::before {
    left: 100%;
}

.habit-checkin-btn:active {
    transform: scale(0.98);
}

/* 脉冲动画用于待打卡状态 */
.habit-pending {
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(251, 146, 60, 0);
    }
}

/* 习惯分类标签颜色 - 主题化 */
.category-health { 
    background-color: var(--success-color); 
    color: var(--text-on-success); 
    opacity: 0.9;
}
.category-study { 
    background-color: var(--info-color); 
    color: var(--text-on-info); 
    opacity: 0.9;
}
.category-work { 
    background-color: var(--primary-color); 
    color: var(--text-on-primary); 
    opacity: 0.9;
}
.category-life { 
    background-color: var(--accent-color); 
    color: var(--text-on-warning); 
    opacity: 0.9;
}
.category-sport { 
    background-color: var(--danger-color); 
    color: var(--text-on-danger); 
    opacity: 0.9;
}
.category-other { 
    background-color: var(--secondary-color); 
    color: var(--text-on-secondary); 
    opacity: 0.9;
}

/* 状态徽章样式 - 主题化 */
.status-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: var(--transition-fast);
}

.status-completed {
    background-color: var(--success-color);
    color: var(--text-on-success);
}

.status-pending {
    background-color: var(--accent-color);
    color: var(--text-on-warning);
}

.status-paused {
    background-color: var(--secondary-color);
    color: var(--text-on-secondary);
}

/* 习惯连击数字特殊效果 */
.streak-number {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

/* 今日统计卡片 */
.today-stats {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1rem;
    color: white;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.today-stats .stat-item {
    text-align: center;
    padding: 1rem;
}

.today-stats .stat-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.today-stats .stat-label {
    font-size: 0.875rem;
    opacity: 0.9;
    font-weight: 500;
}

/* 按钮悬浮效果 */
.habit-card button {
    transition: all 0.2s ease;
}

.habit-card button:hover {
    transform: translateY(-1px);
}

.habit-card button:active {
    transform: translateY(0);
}

/* 习惯卡片进入动画 */
.habit-card {
    animation: slideInUp 0.6s ease-out forwards;
}

.habit-card:nth-child(2) { animation-delay: 0.1s; }
.habit-card:nth-child(3) { animation-delay: 0.2s; }
.habit-card:nth-child(4) { animation-delay: 0.3s; }

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 打卡成功庆祝效果 */
.checkin-celebration {
    animation: celebration 0.6s ease-out;
}

@keyframes celebration {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .habit-card {
        margin-bottom: 1rem;
    }
    
    .habit-card .w-16.h-16 {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    .habit-card .w-16.h-16 svg {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    .today-stats .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .today-stats .stat-number {
        font-size: 1.5rem;
    }
}

/* 加载状态美化 */
.habit-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.habit-loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid #f3f4f6;
    border-top: 3px solid #10b981;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 空状态优化 */
.habit-empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.habit-empty-state .icon {
    font-size: 4rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.habit-empty-state h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.habit-empty-state p {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* 主页习惯打卡模块样式 */
.home-habit-item {
    transition: all 0.2s ease;
}

.home-habit-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.home-habit-checkin-btn {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.home-habit-checkin-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.4s;
}

.home-habit-checkin-btn:hover::before {
    left: 100%;
}

.home-habit-status-icon {
    transition: all 0.3s ease;
}

.home-habit-status-icon.checked {
    animation: checkPulse 0.6s ease-out;
}

@keyframes checkPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* 主页打卡统计卡片 */
.home-checkin-stats {
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .home-checkin-stats .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .home-checkin-stats .text-2xl {
        font-size: 1.5rem;
    }
    
    .home-checkin-stats .text-xs {
        font-size: 0.625rem;
    }
}

/* 心情趋势图表样式 */
.mood-chart-container {
    position: relative;
    height: 120px;
    padding: 10px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

#moodChart {
    border-radius: 6px;
}

/* 心情统计指标样式 */
.mood-stats-grid {
    background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);
    border-radius: 8px;
    padding: 12px;
}

.mood-stat-item {
    text-align: center;
    transition: transform 0.2s ease;
}

.mood-stat-item:hover {
    transform: translateY(-2px);
}

.mood-stat-number {
    font-weight: 800;
    font-size: 1.125rem;
    line-height: 1.2;
    margin-bottom: 2px;
}

.mood-stat-label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* 心情趋势卡片动画 */
@keyframes moodCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mood-trend-card {
    animation: moodCardFadeIn 0.6s ease-out;
}

/* 心情图表加载动画 */
.mood-chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.mood-chart-loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .mood-chart-container {
        height: 100px;
    }
    
    .mood-stat-number {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .mood-chart-container {
        height: 80px;
        padding: 5px;
    }
    
    .mood-stat-number {
        font-size: 0.875rem;
    }
    
    .mood-stat-label {
        font-size: 0.6875rem;
    }
    
    #moodChart {
        width: 100% !important;
        height: 70px !important;
    }
}

/* 灵感页面容器 */
.ideas-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* 灵感卡片 */
.idea-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.idea-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* 卡片标题 */
.idea-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

/* 卡片内容 */
.idea-content {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* 作者和日期 */
.idea-meta {
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 0.9rem;
}

/* 标签样式 */
.idea-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.tag {
    background: #f0f4ff;
    color: #4a6bff;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

/* 操作按钮 */
.idea-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.idea-actions button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
}

.idea-actions button:hover {
    color: #4a6bff;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .ideas-container {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
} 

/* 云朵动画 - 更自然的浮动 */
@keyframes cloudFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
    }
    16.66% {
        transform: translateY(-12px) translateX(8px) rotate(0.5deg) scale(1.02);
    }
    33.33% {
        transform: translateY(-18px) translateX(-3px) rotate(-0.5deg) scale(1.01);
    }
    50% {
        transform: translateY(-15px) translateX(12px) rotate(1deg) scale(1.03);
    }
    66.66% {
        transform: translateY(-8px) translateX(-8px) rotate(-0.8deg) scale(1.01);
    }
    83.33% {
        transform: translateY(-20px) translateX(5px) rotate(0.3deg) scale(1.02);
    }
}

@keyframes cloudAppear {
    from {
        opacity: 0;
        transform: scale(0.3) rotate(180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes cloudGlow {
    0%, 100% {
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.1),
            0 2px 8px rgba(255, 255, 255, 0.8) inset;
    }
    50% {
        box-shadow: 
            0 12px 40px rgba(0, 0, 0, 0.15),
            0 4px 12px rgba(255, 255, 255, 0.9) inset,
            0 0 20px rgba(255, 255, 255, 0.3);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 云朵浮动效果 - 更自然的浮动 */
.idea-cloud-item.floating {
    animation: cloudFloat 12s ease-in-out infinite;
}

.idea-cloud-item.floating:nth-child(2n) {
    animation-delay: -3s;
    animation-duration: 15s;
}

.idea-cloud-item.floating:nth-child(3n) {
    animation-delay: -6s;
    animation-duration: 18s;
}

.idea-cloud-item.floating:nth-child(4n) {
    animation-delay: -9s;
    animation-duration: 14s;
}

.idea-cloud-item.floating:nth-child(5n) {
    animation-delay: -12s;
    animation-duration: 16s;
}

.idea-cloud-item.floating:nth-child(6n) {
    animation-delay: -15s;
    animation-duration: 13s;
}

/* 装饰元素动画 */
.idea-decoration {
    animation: spin 20s linear infinite;
}

.decoration-dots {
    animation: pulse 3s ease-in-out infinite;
}

.decoration-lines {
    animation: spin 15s linear infinite reverse;
}

.decoration-circles {
    animation: float 4s ease-in-out infinite;
}

.decoration-squares {
    animation: spin 25s linear infinite;
}

.decoration-triangles {
    animation: pulse 2s ease-in-out infinite;
}

.decoration-waves {
    animation: float 5s ease-in-out infinite reverse;
}

/* 云朵颜色变体 - 更柔和的颜色 */
.idea-cloud-card.cloud-blue {
    background: rgba(239, 246, 255, 0.98);
}

.idea-cloud-card.cloud-green {
    background: rgba(236, 253, 245, 0.95);
}

.idea-cloud-card.cloud-purple {
    background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, rgba(255, 255, 255, 0.9) 70%);
}

.idea-cloud-card.cloud-pink {
    background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.15) 0%, rgba(255, 255, 255, 0.9) 70%);
}

.idea-cloud-card.cloud-yellow {
    background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.15) 0%, rgba(255, 255, 255, 0.9) 70%);
}

.idea-cloud-card.cloud-red {
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.15) 0%, rgba(255, 255, 255, 0.9) 70%);
}

.idea-cloud-card.cloud-indigo {
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, rgba(255, 255, 255, 0.9) 70%);
}

.idea-cloud-card.cloud-teal {
    background: radial-gradient(ellipse at center, rgba(20, 184, 166, 0.15) 0%, rgba(255, 255, 255, 0.9) 70%);
}

/* 收藏星标动画 */
.favorite-star {
    transition: all 0.3s ease;
}

.favorite-star:hover {
    transform: scale(1.2);
}

/* 标签样式增强 */
.tag {
    transition: all 0.2s ease;
}

.tag:hover {
    transform: scale(1.05);
}

/* 想法统计卡片 */
.idea-stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1rem;
    color: white;
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .ideas-cloud-container {
        min-height: 100vh;
    }
    
    .idea-cloud-card {
        min-width: 220px;
        max-width: 300px;
        padding: 1.5rem;
        font-size: 1rem;
    }
    
    .idea-cloud-card.small {
        min-width: 100px;
        max-width: 160px;
    }
    
    .idea-cloud-card.large {
        min-width: 180px;
        max-width: 240px;
    }
}

@media (max-width: 480px) {
    .ideas-cloud-container {
        min-height: 100vh;
    }
    
    .idea-cloud-card {
        min-width: 100px;
        max-width: 180px;
        padding: 1rem;
    }
    
    .idea-cloud-item.floating {
        animation: none;
    }
} 

/* 导航栏样式 */
nav {
    background: var(--card-bg) !important;
    border-bottom: 1px solid var(--card-border) !important;
}

nav .text-gray-800 {
    color: var(--text-primary) !important;
}

/* 页脚样式 */
footer {
    background: var(--card-bg) !important;
    border-top: 1px solid var(--card-border) !important;
}

footer .text-gray-600 {
    color: var(--text-secondary) !important;
} 

/* 筛选工具栏优化样式 */
.filter-toolbar {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.filter-search {
    flex: 1;
    min-width: 200px;
    max-width: none;
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.filter-select {
    height: 2.5rem;
    min-width: 140px;
    width: auto;
    appearance: none;
    background: var(--card-bg);
    border: 1px solid var(--border-medium);
    border-radius: 0.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(246, 197, 85, 0.1);
}

.filter-select-wrapper {
    position: relative;
}

.filter-select-wrapper::after {
    content: '';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--text-secondary);
    pointer-events: none;
}

.filter-button {
    height: 2.5rem;
    padding: 0 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-medium);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    width: auto;
    justify-content: center;
}

.filter-button:hover {
    background: var(--bg-secondary);
    border-color: var(--border-dark);
}

.filter-button:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(246, 197, 85, 0.1);
}

.filter-clear {
    height: 2.5rem;
    padding: 0 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-clear:hover {
    background: var(--border-medium);
    color: var(--text-primary);
}

/* 响应式优化 */
@media (max-width: 1200px) {
    .filter-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .filter-select,
    .filter-button {
        min-width: 130px;
    }
}

@media (max-width: 1024px) {
    .filter-toolbar {
        padding: 1rem;
    }
    
    .filter-search {
        max-width: 100%;
    }
    
    .filter-controls {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .filter-select,
    .filter-button {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
    }
    
    .filter-select,
    .filter-button,
    .filter-clear {
        width: 100%;
        min-width: auto;
    }
    
    .filter-search {
        width: 100%;
    }
}

/* 弹窗样式 */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

.modal-content {
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 弹窗在不同主题下的适配 */
[data-theme="dark"] .modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="nature"] .modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="romantic"] .modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="ocean"] .modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="aqua-earth"] .modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}