/**
 * 智能监测日报系统 - 全局样式表
 * 文件路径: /css/style.css
 * 用途: 集中管理所有页面样式，包括主题变量、布局、组件和动画
 */

/* ==================== CSS 变量定义 (主题配置) ==================== */
:root {
    /* macOS 风格主题色板 */
    --mac-bg: #f5f5f7;
    --mac-card: #ffffff;
    --mac-border: rgba(0, 0, 0, 0.08);
    --mac-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    --mac-text: #1d1d1f;
    --mac-text-muted: #86868b;
    --mac-accent: #0071e3;
    --mac-accent-hover: #0077ed;
    --mac-radius: 16px;
}

/* ==================== 基础重置与全局样式 ==================== */

/**
 * 页面主体样式
 * 作用范围: 整个页面 body 元素
 * 用途: 设置 macOS 风格的背景、字体和布局基础
 */
body {
    background-color: var(--mac-bg);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    margin: 0;
    padding: 0;
    color: var(--mac-text);
}

/**
 * 全局盒模型与过渡效果
 * 作用范围: 所有元素
 * 用途: 统一使用 border-box 盒模型，添加平滑过渡动画
 */
* {
    box-sizing: border-box;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* ==================== 滚动条样式 (精致优化版) ==================== */

/**
 * Webkit 浏览器滚动条
 * 作用范围: 页面所有滚动区域
 * 用途: 隐藏所有滚动条
 */
::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
}

/**
 * Firefox 浏览器滚动条
 * 作用范围: 页面所有滚动区域
 * 用途: 隐藏所有滚动条
 */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* ==================== 工具类 ==================== */

/**
 * 页面隐藏类
 * 作用范围: 需要隐藏的元素
 * 用途: 强制隐藏元素，优先级最高
 */
.hide-page {
    display: none !important;
}

/* ==================== 导航系统 (精致优化版 Segmented Control) ==================== */

/**
 * Tab 容器 - 全新设计
 * 作用范围: 主导航 Tab 栏容器
 * 用途: 现代简约风格的分段控制器
 */
.tab-container {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.6);
    padding: 6px;
    border-radius: 16px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    gap: 4px;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/**
 * Tab 按钮 - 全新设计
 * 作用范围: 导航 Tab 按钮
 * 用途: 现代简约风格的选项卡
 */
.tab-btn {
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 12px;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    position: relative;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Tab 按钮悬停效果 */
.tab-btn:hover:not([class*="active-"]) {
    color: #374151;
    background: rgba(0, 0, 0, 0.03);
}

/* Tab 按钮点击效果 */
.tab-btn:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

/* Tab 按钮图标 */
.tab-btn svg {
    width: 18px;
    height: 18px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.6;
}

.tab-btn:hover:not([class*="active-"]) svg {
    opacity: 0.8;
}

/**
 * 激活状态的 Tab 按钮
 * 作用范围: 当前选中的 Tab 按钮
 * 用途: 突出显示当前活动页面
 */
.tab-btn[class*="active-"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 
        0 2px 8px rgba(59, 130, 246, 0.3),
        0 4px 12px rgba(59, 130, 246, 0.2);
}

/* 激活状态图标 */
.tab-btn[class*="active-"] svg {
    opacity: 1;
    stroke-width: 2px;
    stroke: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* 激活状态悬停 */
.tab-btn[class*="active-"]:hover {
    background: linear-gradient(135deg, #4b8ff7 0%, #3572ec 100%);
    box-shadow: 
        0 3px 10px rgba(59, 130, 246, 0.35),
        0 6px 16px rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
}

/* 激活状态点击 */
.tab-btn[class*="active-"]:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 
        0 1px 4px rgba(59, 130, 246, 0.25);
    transition-duration: 0.1s;
}

/* 焦点状态 */
.tab-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ==================== 解析结构数据按钮 ==================== */

/**
 * 解析结构数据按钮
 * 作用范围: 规则生成页面的解析按钮
 * 用途: 解析监测点数据结构
 */
.btn-logic-unified {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #0071e3 0%, #0051d5 50%, #0044cc 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 14px rgba(0, 113, 227, 0.35),
        0 2px 6px rgba(0, 113, 227, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn-logic-unified::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.05) 100%);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
}

.btn-logic-unified:hover {
    background: linear-gradient(135deg, #0077ed 0%, #0058e6 50%, #0052d4 100%);
    box-shadow:
        0 6px 20px rgba(0, 113, 227, 0.45),
        0 3px 8px rgba(0, 113, 227, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-logic-unified:active {
    background: linear-gradient(135deg, #0066cc 0%, #004ab8 50%, #0040aa 100%);
    box-shadow:
        0 2px 8px rgba(0, 113, 227, 0.25),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(0) scale(0.98);
    transition-duration: 0.15s;
}

.btn-logic-unified .btn-logic-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.95;
    transition: transform 0.3s ease;
}

.btn-logic-unified:hover .btn-logic-icon {
    transform: scale(1.1) rotate(5deg);
}

.btn-logic-unified .btn-logic-text {
    position: relative;
    z-index: 1;
}

.tab-btn[class*="active-"]::before {
    display: none;
}

/**
 * Tab 按钮图标样式
 * 作用范围: Tab 按钮内的 SVG 图标
 * 用途: 统一图标大小和交互效果
 */
.tab-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
    opacity: 0.65;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.tab-btn:hover:not([class*="active-"]) svg {
    opacity: 0.85;
}

.tab-btn[class*="active-"] svg {
    color: var(--mac-accent);
    opacity: 1;
    transform: scale(1.05);
}

/**
 * Tab 按钮文本容器
 * 作用范围: Tab 按钮文本
 * 用途: 文本溢出处理和装饰效果
 */
.tab-btn .tab-text {
    position: relative;
    overflow: hidden;
}

.tab-btn[class*="active-"] .tab-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--mac-accent), transparent);
    opacity: 0.5;
    border-radius: 1px;
}

/* ==================== Tab 栏响应式适配 ==================== */

/**
 * 平板设备适配
 * 作用范围: 屏幕宽度小于等于 768px
 * 用途: 优化 Tab 栏在平板上的显示
 */
@media (max-width: 768px) {
    .tab-container {
        width: 100%;
        max-width: 100%;
        padding: 3px;
        border-radius: 12px;
    }
    
    .tab-btn {
        flex: 1;
        padding: 8px 12px;
        font-size: 0.8rem;
        justify-content: center;
        border-radius: 9px;
    }
    
    .tab-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .tab-btn .tab-text {
        display: none;
    }
}

/**
 * 手机设备适配
 * 作用范围: 屏幕宽度小于等于 480px
 * 用途: 优化 Tab 栏在手机上的显示
 */
@media (max-width: 480px) {
    .tab-btn {
        padding: 8px 8px;
        gap: 0;
    }
    
    .tab-btn svg {
        width: 18px;
        height: 18px;
    }
}

/**
 * 高分辨率屏幕优化
 * 作用范围: Retina 等高 DPI 屏幕
 * 用途: 优化边框显示精度
 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .tab-container {
        border-width: 0.5px;
    }
}

/* ==================== 统一卡片与按钮组件 ==================== */

/**
 * macOS 风格卡片
 * 作用范围: 内容卡片容器
 * 用途: 统一的卡片外观，包含背景、边框和阴影
 */
.mac-card {
    background: var(--mac-card);
    border: 1px solid var(--mac-border);
    border-radius: var(--mac-radius);
    box-shadow: var(--mac-shadow);
    overflow: hidden;
}

/**
 * 卡片头部
 * 作用范围: 卡片标题区域
 * 用途: 卡片头部的统一样式
 */
.mac-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--mac-border);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

/**
 * 统一逻辑按钮
 * 作用范围: 主要操作按钮
 * 用途: 主按钮样式，用于重要操作
 */
.btn-logic-unified {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
    border: none;
    background-color: var(--mac-accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 113, 227, 0.2);
    transition: all 0.2s;
}

.btn-logic-unified:hover {
    background-color: var(--mac-accent-hover);
    box-shadow: 0 4px 10px rgba(0, 113, 227, 0.3);
}

.btn-logic-unified:active {
    transform: scale(0.98);
}

/**
 * 统一操作按钮 - 全新设计
 * 作用范围: 导入/导出等辅助操作按钮
 * 用途: 美观专业的次级操作按钮
 */
.btn-action-unified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    color: #374151;
    cursor: pointer;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.03);
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
    position: relative;
    overflow: hidden;
}

/* 按钮图标样式 */
.btn-action-unified svg {
    width: 18px;
    height: 18px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
}

/* 悬停效果 */
.btn-action-unified:hover {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-color: #d1d5db;
    color: #1f2937;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 2px 4px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.btn-action-unified:hover svg {
    opacity: 1;
    transform: scale(1.1);
}

/* 点击效果 */
.btn-action-unified:active {
    transform: translateY(0) scale(0.97);
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-color: #9ca3af;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05);
    transition-duration: 0.1s;
}

.btn-action-unified:active svg {
    transform: scale(0.95);
}

/* 焦点状态 */
.btn-action-unified:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ==================== 天气组件 (五种天气动画系统 - 边缘优化版) ==================== */

/**
 * 天气容器 - 全新设计
 * 作用范围: 天气显示卡片
 * 用途: 现代玻璃拟态天气卡片
 */
.weather-container {
    position: relative;
    width: 100%;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 50%, rgba(241, 245, 249, 0.8) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    /* 去除白色边框 */
    border: none;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.02),
        0 10px 20px rgba(0, 0, 0, 0.03),
        0 20px 40px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 修复锯齿：启用GPU加速并优化抗锯齿 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/**
 * 天气容器光晕效果
 * 作用范围: 天气容器伪元素
 * 用途: 添加顶部光晕增强视觉层次
 */
.weather-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.6) 0%, 
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 10;
    border-radius: inherit;
    /* 修复锯齿：确保圆角继承 */
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

/**
 * 天气容器边框光效
 * 作用范围: 天气容器伪元素
 * 用途: 添加精致边框
 */
.weather-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* 去除白色边框 */
    border: none;
    pointer-events: none;
    z-index: 11;
    /* 修复锯齿：使用更简单的边框实现替代复杂的mask */
    box-sizing: border-box;
}





.weather-container.weather-transitioning {
    overflow: hidden;
}

/**
 * 天气内容区域
 * 作用范围: 天气内容包装器
 * 用途: 确保内容在动画中正确显示
 */
.weather-content {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}

/**
 * 天气背景层
 * 作用范围: 天气动画背景
 * 用途: 承载天气动画效果的背景层
 */
.weather-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    border-radius: 22px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* 修复锯齿：确保背景层不会溢出 */
    overflow: hidden;
    /* 修复锯齿：添加内边距防止渐变边缘溢出 */
    margin: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
}

/* ==================== 晴天动画样式 ==================== */

/**
 * 晴天天气类型
 * 作用范围: 天气容器晴天状态
 * 用途: 设置晴天的渐变背景
 */
.w-sunny {
    /* 修复锯齿：继承基础背景，使用 weather-bg 显示天气效果 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 50%, rgba(241, 245, 249, 0.8) 100%);
}

.w-sunny .weather-bg {
    background:
        radial-gradient(ellipse 100% 80% at 70% 20%, rgba(251, 191, 36, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 85% 30%, rgba(245, 158, 11, 0.2) 0%, transparent 40%),
        radial-gradient(ellipse 60% 40% at 95% 40%, rgba(217, 119, 6, 0.15) 0%, transparent 35%);
    animation: sunnyBgPulse 4s ease-in-out infinite;
    /* 修复锯齿：确保背景层圆角 */
    border-radius: 22px;
    overflow: hidden;
}

@keyframes sunnyBgPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/**
 * 太阳容器
 * 作用范围: 太阳动画组件
 * 用途: 包含太阳和光线的容器
 */
.sun-container {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/**
 * 太阳主体
 * 作用范围: 太阳图形
 * 用途: 绘制太阳球体并添加发光效果
 */
.sun-orb {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 30%, #f59e0b 60%, #d97706 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 30px rgba(251, 191, 36, 0.6),
        0 0 60px rgba(251, 191, 36, 0.3),
        0 0 90px rgba(251, 191, 36, 0.15),
        inset 0 -4px 8px rgba(217, 119, 6, 0.4),
        inset 0 4px 8px rgba(255, 255, 255, 0.3);
    animation: sunRotate 20s linear infinite, sunPulse 3s ease-in-out infinite;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.sun-orb::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, rgba(251, 191, 36, 0.1) 50%, transparent 70%);
    animation: sunGlow 2s ease-in-out infinite alternate;
}

.sun-orb::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
}

/**
 * 太阳光线容器
 * 作用范围: 太阳光线
 * 用途: 包含并旋转太阳光线
 */
.sun-rays {
    position: absolute;
    inset: -12px;
    animation: sunRaysRotate 15s linear infinite;
}

/**
 * 单条太阳光线
 * 作用范围: 太阳光线元素
 * 用途: 绘制太阳光线
 */
.sun-ray {
    position: absolute;
    width: 2px;
    height: 8px;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.8) 0%, transparent 100%);
    border-radius: 2px;
    left: 50%;
    top: 0;
    transform-origin: center 28px;
}

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

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

@keyframes sunPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.08); filter: brightness(1.1); }
}

@keyframes sunGlow {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.15); }
}

/* ==================== 阴天动画样式 ==================== */

/**
 * 阴天天气类型
 * 作用范围: 天气容器阴天状态
 * 用途: 设置阴天的渐变背景
 */
.w-overcast {
    /* 修复锯齿：继承基础背景，使用 weather-bg 显示天气效果 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 50%, rgba(241, 245, 249, 0.8) 100%);
}

.w-overcast .weather-bg {
    background:
        radial-gradient(ellipse 120% 80% at 60% 30%, rgba(148, 163, 184, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 100% 60% at 40% 50%, rgba(148, 163, 184, 0.15) 0%, transparent 45%);
    animation: overcastDrift 8s ease-in-out infinite;
    /* 修复锯齿：确保背景层圆角 */
    border-radius: 22px;
    overflow: hidden;
}

@keyframes overcastDrift {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(10px); opacity: 0.9; }
}

/**
 * 云朵组
 * 作用范围: 云朵动画组件
 * 用途: 包含主云和小云的容器
 */
.cloud-group {
    position: relative;
    width: 50px;
    height: 36px;
    margin-top: -13px;
}

/**
 * 主云朵
 * 作用范围: 主要云朵图形
 * 用途: 绘制阴天的主云朵
 */
.cloud-main {
    width: 44px;
    height: 22px;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 40%, #cbd5e1 70%, #94a3b8 100%);
    border-radius: 22px;
    position: absolute;
    bottom: 0;
    left: 3px;
    box-shadow:
        0 6px 16px rgba(71, 85, 105, 0.2),
        inset 0 3px 6px rgba(255, 255, 255, 0.6),
        inset 0 -2px 4px rgba(71, 85, 105, 0.1);
}

.cloud-main::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
    border-radius: 50%;
    top: -10px;
    left: 8px;
    box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.6);
}

.cloud-main::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
    border-radius: 50%;
    top: -6px;
    left: 24px;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6);
}

/**
 * 小云朵
 * 作用范围: 次要云朵图形
 * 用途: 添加云朵层次感
 */
.cloud-small {
    width: 24px;
    height: 12px;
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 50%, #94a3b8 100%);
    border-radius: 12px;
    position: absolute;
    bottom: 2px;
    right: -8px;
    box-shadow: 0 3px 8px rgba(71, 85, 105, 0.15);
}

/* 阴天的单个大云 */
.cloud-single {
    width: 48px;
    height: 24px;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 40%, #cbd5e1 70%, #94a3b8 100%);
    border-radius: 24px;
    position: absolute;
    bottom: 6px;
    left: 3px;
    box-shadow:
        0 6px 16px rgba(71, 85, 105, 0.2),
        inset 0 3px 6px rgba(255, 255, 255, 0.6),
        inset 0 -2px 4px rgba(71, 85, 105, 0.1);
}

/* 阴天气动态效果 - 飘动的云层 */
.w-overcast .cloud-drift-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: 22px;
}

/* 飘动的背景云 - 不规则形状（阴天和多云共用） */
.w-overcast .drift-cloud,
.w-cloudy .drift-cloud {
    position: absolute;
    background: linear-gradient(180deg,
        rgba(203, 213, 225, 0.5) 0%,
        rgba(148, 163, 184, 0.4) 50%,
        rgba(100, 116, 139, 0.3) 100%
    );
    /* 不规则圆角 */
    border-radius: 60% 40% 50% 70% / 50% 60% 40% 50%;
    filter: blur(4px);
    animation: cloudDrift 8s linear infinite;
}

/* 添加多个不规则凸起（阴天和多云共用） */
.w-overcast .drift-cloud::before,
.w-cloudy .drift-cloud::before {
    content: '';
    position: absolute;
    width: 40%;
    height: 60%;
    top: -30%;
    left: 15%;
    background: inherit;
    border-radius: 70% 30% 60% 40% / 60% 40% 70% 30%;
}

.w-overcast .drift-cloud::after,
.w-cloudy .drift-cloud::after {
    content: '';
    position: absolute;
    width: 35%;
    height: 50%;
    top: -25%;
    right: 10%;
    background: inherit;
    border-radius: 40% 60% 30% 70% / 50% 70% 40% 60%;
}

@keyframes cloudDrift {
    0% {
        transform: translateX(-25px) translateY(3px) scale(1);
    }
    15% {
        transform: translateX(5px) translateY(-8px) scale(1.02);
    }
    30% {
        transform: translateX(30px) translateY(-3px) scale(0.98);
    }
    45% {
        transform: translateX(15px) translateY(10px) scale(1.01);
    }
    60% {
        transform: translateX(-10px) translateY(5px) scale(0.99);
    }
    75% {
        transform: translateX(-30px) translateY(-5px) scale(1.02);
    }
    90% {
        transform: translateX(-15px) translateY(8px) scale(1);
    }
    100% {
        transform: translateX(-25px) translateY(3px) scale(1);
    }
}

/* ==================== 多云动画样式 ==================== */

/**
 * 多云天气类型
 * 作用范围: 天气容器多云状态
 * 用途: 设置多云的渐变背景
 */
.w-cloudy {
    /* 修复锯齿：继承基础背景，使用 weather-bg 显示天气效果 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 50%, rgba(241, 245, 249, 0.8) 100%);
}

.w-cloudy .weather-bg {
    background:
        radial-gradient(ellipse 100% 70% at 75% 25%, rgba(96, 165, 250, 0.25) 0%, transparent 45%),
        radial-gradient(ellipse 80% 50% at 30% 70%, rgba(251, 191, 36, 0.2) 0%, transparent 40%),
        radial-gradient(ellipse 60% 40% at 90% 40%, rgba(59, 130, 246, 0.15) 0%, transparent 35%);
    animation: cloudyShimmer 6s ease-in-out infinite;
    /* 修复锯齿：确保背景层圆角 */
    border-radius: 22px;
    overflow: hidden;
}

@keyframes cloudyShimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/**
 * 多云组合
 * 作用范围: 多云动画组件
 * 用途: 包含太阳和云朵的组合
 */
.cloudy-combo {
    position: relative;
    width: 56px;
    height: 44px;
    margin-top: -10px;
}

/**
 * 多云时的太阳
 * 作用范围: 多云天气中的太阳
 * 用途: 绘制被云遮挡的太阳
 */
.cloudy-sun {
    position: absolute;
    right: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%);
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(251, 191, 36, 0.5),
        0 0 40px rgba(251, 191, 36, 0.25);
    z-index: 1;
}

/* ==================== 雨天动画样式 ==================== */

/**
 * 雨天天气类型
 * 作用范围: 天气容器雨天状态
 * 用途: 设置雨天的渐变背景
 */
.w-rain {
    /* 修复锯齿：继承基础背景，使用 weather-bg 显示天气效果 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 50%, rgba(241, 245, 249, 0.8) 100%);
}

.w-rain .weather-bg {
    background:
        radial-gradient(ellipse 100% 80% at 50% 20%, rgba(148, 163, 184, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 60% 40%, rgba(96, 165, 250, 0.15) 0%, transparent 45%);
    animation: rainBgPulse 3s ease-in-out infinite;
    /* 修复锯齿：确保背景层圆角 */
    border-radius: 22px;
    overflow: hidden;
}

@keyframes rainBgPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

/**
 * 雨云容器
 * 作用范围: 雨云动画组件
 * 用途: 包含雨云图形
 */
.rain-cloud {
    position: relative;
    width: 48px;
    height: 28px;
}

/**
 * 雨云主体
 * 作用范围: 雨云图形
 * 用途: 绘制雨天的乌云
 */
.rain-cloud-main {
    width: 44px;
    height: 22px;
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 50%, #475569 100%);
    border-radius: 22px;
    position: absolute;
    bottom: 6px;
    left: 2px;
    box-shadow: 
        0 4px 12px rgba(51, 65, 85, 0.3),
        inset 0 2px 4px rgba(148, 163, 184, 0.3);
}

.rain-cloud-main::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 50%, #475569 100%);
    border-radius: 50%;
    top: -9px;
    left: 10px;
    box-shadow: inset 0 2px 4px rgba(148, 163, 184, 0.3);
}

.rain-cloud-main::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 50%, #475569 100%);
    border-radius: 50%;
    top: -5px;
    left: 24px;
    box-shadow: inset 0 2px 4px rgba(148, 163, 184, 0.3);
}

/**
 * 雨滴容器
 * 作用范围: 雨滴动画区域
 * 用途: 包含所有雨滴元素
 */
.rain-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    /* 确保雨滴容器有圆角，与其他天气卡片一致 */
    border-radius: 22px;
}

/**
 * 雨滴元素 - 水滴样式
 * 作用范围: 单个雨滴
 * 用途: 绘制逼真的水滴形状
 */
.rain-drop {
    position: absolute;
    width: 3px;
    height: 12px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(191, 219, 254, 0.95) 30%,
        rgba(147, 197, 253, 0.9) 60%,
        rgba(96, 165, 250, 0.7) 90%,
        rgba(59, 130, 246, 0.4) 100%
    );
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    box-shadow:
        0 0 3px rgba(147, 197, 253, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
    opacity: 0;
    animation: rainFall var(--fall-duration, 0.6s) linear infinite;
    animation-delay: var(--fall-delay, 0s);
    transform-origin: center top;
    transform: rotate(var(--rain-angle, 15deg));
    will-change: transform, opacity;
    -webkit-transform: translateZ(0) rotate(var(--rain-angle, 15deg));
    transform: translateZ(0) rotate(var(--rain-angle, 15deg));
}

/* 雨滴头部高光 */
.rain-drop::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 20%;
    width: 1px;
    height: 3px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    filter: blur(0.5px);
}

/* 雨滴尾部 */
.rain-drop::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 1.5px solid transparent;
    border-right: 1.5px solid transparent;
    border-top: 3px solid rgba(96, 165, 250, 0.6);
    opacity: 0.8;
}

@keyframes rainFall {
    0% {
        transform: translateY(-25px) rotate(var(--rain-angle, 15deg));
        opacity: 0;
    }
    5% {
        opacity: var(--peak-opacity, 0.9);
    }
    90% {
        opacity: var(--end-opacity, 0.5);
    }
    95% {
        opacity: 0;
    }
    100% {
        transform: translateY(165px) rotate(var(--rain-angle, 15deg));
        opacity: 0;
    }
}

@keyframes rainSplash {
    0%, 90% {
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }
    92% {
        opacity: 0.8;
        transform: translateX(-50%) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.3);
    }
}

/* ==================== 雪天动画样式 ==================== */

/**
 * 雪天天气类型
 * 作用范围: 天气容器雪天状态
 * 用途: 设置雪天的渐变背景
 */
.w-snow {
    /* 修复锯齿：继承基础背景，使用 weather-bg 显示天气效果 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 50%, rgba(241, 245, 249, 0.8) 100%);
}

.w-snow .weather-bg {
    background:
        radial-gradient(ellipse 100% 80% at 60% 20%, rgba(186, 230, 253, 0.3) 0%, transparent 45%),
        radial-gradient(ellipse 80% 60% at 40% 60%, rgba(147, 197, 253, 0.2) 0%, transparent 40%),
        linear-gradient(180deg, transparent 0%, rgba(224, 242, 254, 0.15) 100%);
    animation: snowBgShimmer 5s ease-in-out infinite;
    /* 修复锯齿：确保背景层圆角 */
    border-radius: 22px;
    overflow: hidden;
}

@keyframes snowBgShimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

/**
 * 雪云容器
 * 作用范围: 雪云动画组件
 * 用途: 包含雪云图形
 */
.snow-cloud {
    position: relative;
    width: 48px;
    height: 28px;
}

/**
 * 雪云主体
 * 作用范围: 雪云图形
 * 用途: 绘制雪天的云朵
 */
.snow-cloud-main {
    width: 44px;
    height: 22px;
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 40%, #94a3b8 100%);
    border-radius: 22px;
    position: absolute;
    bottom: 6px;
    left: 2px;
    box-shadow: 
        0 4px 12px rgba(100, 116, 139, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.6);
}

.snow-cloud-main::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 50%, #94a3b8 100%);
    border-radius: 50%;
    top: -9px;
    left: 10px;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6);
}

.snow-cloud-main::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 50%, #94a3b8 100%);
    border-radius: 50%;
    top: -5px;
    left: 24px;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6);
}

/**
 * 雪花图标
 * 作用范围: 雪云下方的雪花图形
 * 用途: 在雪云下方显示六角雪花
 */
.snowflake-icon {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 50%, #3b82f6 100%);
    clip-path: polygon(
        50% 0%, 55% 35%, 65% 25%, 60% 40%, 85% 25%, 65% 45%,
        95% 50%, 65% 55%, 85% 75%, 60% 60%, 65% 75%, 55% 65%,
        50% 100%, 45% 65%, 35% 75%, 40% 60%, 15% 75%, 35% 55%,
        5% 50%, 35% 45%, 15% 25%, 40% 40%, 35% 25%, 45% 35%
    );
    filter: drop-shadow(0 0 3px rgba(147, 197, 253, 0.6));
}

/**
 * 雪花容器
 * 作用范围: 雪花动画区域
 * 用途: 包含所有雪花元素
 */
.snow-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    /* 确保雪花容器有圆角，与其他天气卡片一致 */
    border-radius: 22px;
}

/**
 * 雪花元素
 * 作用范围: 单个雪花
 * 用途: 绘制并动画化雪花
 */
.snow-flake {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle,
        #ffffff 0%,
        rgba(255, 255, 255, 0.95) 30%,
        rgba(241, 245, 249, 0.8) 60%,
        rgba(226, 232, 240, 0.4) 80%,
        transparent 100%
    );
    border-radius: 50%;
    box-shadow:
        0 0 6px rgba(255, 255, 255, 1),
        0 0 12px rgba(186, 230, 253, 0.6),
        0 0 20px rgba(147, 197, 253, 0.3);
    opacity: 0;
    animation: snowFall 2.5s ease-out infinite;
    /* 性能优化：启用GPU加速 */
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* 雪花十字光芒效果 */
.snow-flake::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 30%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.8) 70%,
        transparent 100%
    );
}

.snow-flake::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 200%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.8) 30%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.8) 70%,
        transparent 100%
    );
}

@keyframes snowFall {
    0% {
        transform: translateY(-25px) translateX(0) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.95;
        transform: translateY(-15px) translateX(5px) rotate(45deg) scale(1);
    }
    25% {
        transform: translateY(25px) translateX(-8px) rotate(90deg) scale(1);
    }
    50% {
        transform: translateY(60px) translateX(10px) rotate(180deg) scale(0.95);
    }
    75% {
        transform: translateY(100px) translateX(-5px) rotate(270deg) scale(0.9);
        opacity: 0.85;
    }
    100% {
        transform: translateY(160px) translateX(3px) rotate(360deg) scale(0.8);
        opacity: 0;
    }
}

/* ==================== 天气内容层 ==================== */

/**
 * 天气内容容器
 * 作用范围: 天气显示内容
 * 用途: 包含天气文本和图标
 */
.weather-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    color: var(--mac-text);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/**
 * 天气显示输入框
 * 作用范围: 天气文本输入
 * 用途: 显示和编辑天气信息
 */
#weatherDisplay {
    background: transparent;
    color: var(--mac-text);
    font-size: 38px;
    font-weight: 700;
    width: 100%;
    outline: none !important;
    border: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    letter-spacing: -1px;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
    height: 48px !important;
    line-height: 48px !important;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    box-shadow: 0 2px 0 0 transparent !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
}

#weatherDisplay:not(:read-only) {
    cursor: text;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
}

#weatherDisplay:not(:read-only):focus {
    box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.8) !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
}

/**
 * 天气图标盒子 - 全新设计
 * 作用范围: 天气图标容器
 * 用途: 统一天气图标尺寸，带有动态效果
 */
.weather-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    width: 56px;
    position: relative;
    background: transparent;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}



/* ==================== 天气标签按钮 ==================== */

/**
 * 天气 Tab 容器
 * 作用范围: 天气选择按钮组
 * 用途: 包含天气类型选择按钮
 */
.weather-tabs-container {
    display: flex;
    gap: 2px;
    background: linear-gradient(135deg, rgba(118, 118, 128, 0.06) 0%, rgba(118, 118, 128, 0.1) 100%);
    padding: 3px;
    border-radius: 11px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 0.5px 0.5px rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
}

.weather-tabs-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 11px;
    padding: 1px;
}

/**
 * 天气 Tab 按钮 - 全新设计
 * 作用范围: 单个天气选择按钮
 * 用途: 选择不同的天气类型，带有动态效果
 */
.w-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 10px;
    height: 36px;
    padding: 0 10px;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.w-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 10px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.w-tab:hover::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%);
}

.w-tab:hover {
    color: #374151;
    transform: translateY(-1px);
}

.w-tab:active {
    transform: translateY(0) scale(0.96);
    transition-duration: 0.1s;
}

.w-tab:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/**
 * 激活的天气 Tab
 * 作用范围: 当前选中的天气按钮
 * 用途: 突出显示当前选中的天气，带有动画效果
 */
.w-tab.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 
        0 2px 8px rgba(59, 130, 246, 0.3),
        0 4px 12px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-weight: 600;
    transform: translateY(-1px);
    animation: tabActivate 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tabActivate {
    0% {
        transform: translateY(0) scale(0.98);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-2px) scale(1.02);
    }
    100% {
        transform: translateY(-1px) scale(1);
        opacity: 1;
    }
}

.w-tab.active::before {
    display: none;
}

.w-tab.active:hover {
    background: linear-gradient(135deg, #4b8ff7 0%, #3572ec 100%);
    box-shadow: 
        0 3px 10px rgba(59, 130, 246, 0.35),
        0 6px 16px rgba(59, 130, 246, 0.25);
    transform: translateY(-2px);
}

.w-tab.active:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

.w-tab .cn {
    position: relative;
    z-index: 2;
}

/**
 * 天气 Tab 响应式适配
 * 作用范围: 小屏幕设备
 * 用途: 优化天气按钮在小屏幕上的显示
 */
@media (max-width: 480px) {
    .weather-tabs-container {
        padding: 2px;
        gap: 1px;
    }
    
    .w-tab {
        font-size: 11px;
        padding: 0 4px;
        height: 30px;
    }
}

/* ==================== 浏览器兼容性优化 ==================== */

/**
 * 不支持 backdrop-filter 的浏览器回退
 * 作用范围: 不支持毛玻璃效果的浏览器
 * 用途: 提供替代样式
 */
@supports not (backdrop-filter: blur(20px)) {
    .weather-container {
        background: rgba(255, 255, 255, 0.98);
        /* 去除边框 */
        border: none;
        /* 修复锯齿：确保圆角平滑 */
        border-radius: 24px;
    }

    .weather-container::before {
        display: none;
    }

    .weather-container::after {
        /* 去除边框 */
        border: none;
        border-radius: 24px;
    }
}

/**
 * 高分辨率屏幕优化
 * 作用范围: Retina 屏幕
 * 用途: 优化边框精度
 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .weather-container {
        /* 去除边框 */
        border: none;
    }

    .weather-container::after {
        /* 去除边框 */
        border: none;
    }
}

/**
 * 低分辨率屏幕优化
 * 作用范围: 标准分辨率屏幕
 * 用途: 简化边框样式
 */
@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 96dpi) {
    .weather-container {
        /* 去除边框 */
        border: none;
        border-radius: 24px;
    }

    .weather-container::before {
        opacity: 0.5;
    }

    .weather-container::after {
        /* 去除边框 */
        border: none;
        border-radius: 24px;
    }
}

/**
 * Windows 高对比度模式优化
 * 作用范围: Windows 高对比度模式
 * 用途: 提高可访问性
 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .weather-container {
        border: 1px solid rgba(0, 0, 0, 0.08);
        outline: none;
    }
    
    .weather-container::before,
    .weather-container::after {
        display: none;
    }
}

/**
 * 减少动画偏好
 * 作用范围: 偏好减少动画的用户
 * 用途: 尊重用户的动画偏好设置
 */
@media (prefers-reduced-motion: reduce) {
    .sun-orb,
    .sun-orb::before,
    .cloud-shape,
    .rain-drop,
    .rain-drop.heavy,
    .rain-drop.light,
    .rain-drop::after,
    .snow-flake,
    .snow-flake.large,
    .snow-flake.small,
    .snow-flake.tiny,
    .snow-flake::before {
        animation: none !important;
    }
    
    .weather-container,
    .weather-bg,
    #weatherDisplay,
    .w-tab {
        transition: none !important;
    }
}

/**
 * GPU 加速优化
 * 作用范围: 动画元素
 * 用途: 启用硬件加速提升性能，确保30fps+
 */
.weather-container,
.sun-orb,
.sun-rays,
.cloud-shape,
.rain-drop,
.rain-drop.heavy,
.rain-drop.medium,
.rain-drop.light,
.snow-flake,
.snow-flake.large,
.snow-flake.medium,
.snow-flake.small,
.snow-flake.tiny {
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    /* 性能优化：强制GPU渲染 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/**
 * 雨滴和雪花容器优化
 * 作用范围: 动态效果容器
 * 用途: 提升渲染性能
 */
.rain-container,
.snow-container {
    will-change: contents;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/**
 * Firefox 特定优化
 * 作用范围: Firefox 浏览器
 * 用途: 修复 Firefox 中的显示问题
 */
@-moz-document url-prefix() {
    .weather-container {
        background: rgba(255, 255, 255, 0.92);
    }
}

/**
 * Safari 特定优化
 * 作用范围: Safari 浏览器
 * 用途: 修复 Safari 中的显示问题
 */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .weather-container {
            -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
        }
    }
}

/* ==================== 文件装填区 ==================== */

/**
 * 文件卡片
 * 作用范围: 文件上传卡片
 * 用途: 展示文件上传状态
 */
.file-card {
    background: #fbfbfd;
    border: 1px solid #e5e5ea;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 76px;
    box-sizing: border-box;
}

.file-card:hover {
    border-color: var(--mac-accent);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.08);
}

.file-card:active {
    transform: scale(0.98);
}

.file-card.done {
    border-color: #34c759;
    background: #f0fdf4;
}

.file-card.drag-over {
    border-color: #34c759;
    background: #f0fdf4;
}

/* 数据不完整时的红色样式 */
.file-card.incomplete {
    border-color: #ef4444;
    background: #fef2f2;
}

/* Word模板上传区域拖拽样式 */
#wordBox.drag-over {
    border-color: #34c759 !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
}

/**
 * 卡片图标
 * 作用范围: 文件卡片图标
 * 用途: 统一的文件图标样式
 */
.card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(0, 113, 227, 0.1);
    color: var(--mac-accent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}

.file-card.done .card-icon {
    background: rgba(52, 199, 89, 0.1);
    color: #34c759;
}

/**
 * 卡片元信息
 * 作用范围: 文件信息区域
 * 用途: 显示文件名和状态
 */
.card-meta {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.card-meta h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-meta p {
    font-size: 12px;
    font-weight: 400;
    color: var(--mac-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================== 明亮版控制台 ==================== */

/**
 * 控制台容器
 * 作用范围: 日志控制台
 * 用途: 显示系统日志和状态信息
 */
#console {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    display: flex;
    flex-direction: column;
}

/**
 * 日志条目
 * 作用范围: 单条日志
 * 用途: 显示日志信息
 */
.log-entry {
    font-size: 13px;
    font-weight: 400;
    color: #1d1d1f;
    line-height: 1.5;
    padding: 6px 4px;
    border-bottom: 1px solid #f5f5f7;
    display: flex;
    gap: 8px;
    animation: fadeIn 0.3s ease;
    word-break: break-all;
}

.log-entry:last-child {
    border-bottom: none;
}

.log-entry .time {
    color: #86868b;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.log-entry .msg {
    flex-grow: 1;
}

.log-entry.error .msg {
    color: #d93025;
    font-weight: 500;
}

.log-entry.success .msg {
    color: #188038;
}

.log-entry.highlight .msg {
    color: #1a73e8;
    font-weight: 500;
}

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

/* ==================== 下载区与统计战报 ==================== */

/**
 * 下载项
 * 作用范围: 下载列表项
 * 用途: 展示可下载的文件
 */
.dl-item {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    margin-bottom: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.dl-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #0071e3 0%, #64d2ff 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dl-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 113, 227, 0.12), 0 3px 10px rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 113, 227, 0.2);
    background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
}

.dl-item:hover::before {
    opacity: 1;
}

.dl-item:active {
    transform: translateY(0);
}

/**
 * 下载图标包装
 * 作用范围: 下载项图标
 * 用途: 统一的下载图标样式
 */
.dl-icon-wrap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #e8f4fd 0%, #d1e9fc 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.15);
}

.dl-icon-wrap svg {
    color: #0071e3;
}

/**
 * 下载图标徽章
 * 作用范围: 下载完成标记
 * 用途: 指示下载状态
 */
.dl-icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(52, 199, 89, 0.3);
    border: 2px solid #fff;
}

.dl-icon-badge svg {
    width: 10px;
    height: 10px;
    color: #fff;
}

/**
 * 下载信息区
 * 作用范围: 下载项信息
 * 用途: 显示文件名和元信息
 */
.dl-info {
    flex: 1;
    min-width: 0;
    padding: 0 14px;
}

.dl-filename {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}

.dl-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.dl-type {
    font-size: 11px;
    font-weight: 500;
    color: #0071e3;
    background: rgba(0, 113, 227, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

.dl-size {
    font-size: 11px;
    color: #86868b;
}

/**
 * 下载按钮
 * 作用范围: 下载操作按钮
 * 用途: 触发文件下载
 */
.dl-btn {
    text-decoration: none;
    background: linear-gradient(135deg, #0071e3 0%, #0077ed 100%);
    color: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.25s ease;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.25);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.dl-btn:hover {
    background: linear-gradient(135deg, #0077ed 0%, #0080ff 100%);
    box-shadow: 0 4px 16px rgba(0, 113, 227, 0.35);
    transform: translateY(-1px);
}

.dl-btn:active {
    transform: translateY(0);
}

.dl-btn svg {
    width: 14px;
    height: 14px;
}

/**
 * 统计卡片
 * 作用范围: 统计数据卡片
 * 用途: 展示处理统计信息
 */
.stat-card {
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.stat-main-title {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 12px;
    border-bottom: 1px solid #f5f5f7;
    padding-bottom: 8px;
}

/**
 * 统计行
 * 作用范围: 单条统计数据
 * 用途: 显示工作表统计信息
 */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 6px;
    color: #555;
}

.stat-sheet {
    flex: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-id {
    color: var(--mac-accent);
    flex: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.stat-value {
    color: #1d1d1f;
    background: #f5f5f7;
    border-radius: 6px;
    padding: 2px 8px;
    flex: 1;
    text-align: right;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ==================== 执行按钮 ==================== */

/**
 * 执行按钮基础样式
 * 作用范围: 主执行按钮
 * 用途: 数据处理的主要操作按钮
 */
#runBtn {
    width: 100%;
    padding: 14px 10px;
    background: #f5f5f7;
    color: #86868b;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: not-allowed;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-align: center;
}

/**
 * 执行按钮就绪状态
 * 作用范围: 准备执行的按钮
 * 用途: 表示可以执行操作
 */
#runBtn.ready {
    background: var(--mac-accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.25);
}

#runBtn.ready:hover {
    background: var(--mac-accent-hover);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.35);
    transform: translateY(-1px);
}

#runBtn.ready:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.2);
}



/* ==================== 生成文档按钮 (精致版) ==================== */

/**
 * 生成文档按钮
 * 作用范围: Word文档生成按钮
 * 用途: 触发Word文档生成功能，带有精致视觉效果
 */
.btn-generate-doc {
    flex-shrink: 0;
    align-self: stretch;
    min-height: 48px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #0071e3 0%, #0051d5 50%, #0044cc 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 14px rgba(0, 113, 227, 0.35),
        0 2px 6px rgba(0, 113, 227, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn-generate-doc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.05) 100%);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
}

.btn-generate-doc.ready:hover {
    background: linear-gradient(135deg, #0077ed 0%, #0058e6 50%, #0052d4 100%);
    box-shadow:
        0 6px 20px rgba(0, 113, 227, 0.45),
        0 3px 8px rgba(0, 113, 227, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-generate-doc.ready:active {
    background: linear-gradient(135deg, #0066cc 0%, #004ab8 50%, #0040aa 100%);
    box-shadow:
        0 2px 8px rgba(0, 113, 227, 0.25),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(0) scale(0.98);
    transition-duration: 0.15s;
}

/**
 * 按钮图标
 * 作用范围: 按钮内文档图标
 * 用途: 表示文档生成功能
 */
.btn-generate-doc .btn-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.95;
    transition: transform 0.3s ease;
}

.btn-generate-doc:hover .btn-icon {
    transform: scale(1.1) rotate(-5deg);
}

/**
 * 按钮文本
 * 作用范围: 按钮文字
 * 用途: 按钮标签文字
 */
.btn-generate-doc .btn-text {
    position: relative;
    z-index: 1;
}

/**
 * 按钮箭头
 * 作用范围: 按钮右侧箭头
 * 用途: 指示操作方向，增加动感
 */
.btn-generate-doc .btn-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.8;
    margin-left: 4px;
    transition: all 0.3s ease;
}

.btn-generate-doc:hover .btn-arrow {
    transform: translateX(4px);
    opacity: 1;
}

.btn-generate-doc:active .btn-arrow {
    transform: translateX(6px);
}

/* ==================== 执行按钮 (就绪执行按钮) ==================== */

/**
 * 执行按钮
 * 作用范围: 就绪执行按钮
 * 用途: 触发数据处理流程，带有动态状态变化
 */
.btn-run-action {
    width: 100%;
    height: 52px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #c7c7cc 0%, #aeaeb2 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 14px;
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/**
 * 就绪状态
 * 作用范围: 数据源已上传后的按钮
 * 用途: 表示按钮可点击执行（保持蓝色）
 */
.btn-run-action.ready {
    background: linear-gradient(135deg, #0071e3 0%, #0051d5 50%, #0044cc 100%);
    cursor: pointer;
    box-shadow:
        0 4px 14px rgba(0, 113, 227, 0.35),
        0 2px 6px rgba(0, 113, 227, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-run-action.ready:hover {
    background: linear-gradient(135deg, #0077ed 0%, #0058e6 50%, #0052d4 100%);
    box-shadow:
        0 6px 20px rgba(0, 113, 227, 0.45),
        0 3px 8px rgba(0, 113, 227, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-run-action.ready:active {
    background: linear-gradient(135deg, #0066cc 0%, #004ab8 50%, #0040aa 100%);
    box-shadow:
        0 2px 8px rgba(0, 113, 227, 0.25),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(0) scale(0.98);
}

.btn-run-action.ready::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.05) 100%);
    border-radius: 14px 14px 0 0;
    pointer-events: none;
}

/**
 * 按钮图标
 * 作用范围: 按钮内播放图标
 * 用途: 表示执行操作
 */
.btn-run-action .btn-run-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    opacity: 0.95;
    transition: transform 0.3s ease;
}

.btn-run-action:hover .btn-run-icon {
    transform: scale(1.15);
}

.btn-run-action.ready .btn-run-icon {
    transition: transform 0.3s ease;
}

.btn-run-action.ready:hover .btn-run-icon {
    transform: scale(1.15);
}

/**
 * 按钮文本
 * 作用范围: 按钮文字
 * 用途: 按钮标签文字
 */
.btn-run-action .btn-run-text {
    position: relative;
    z-index: 1;
}

/**
 * 错误状态
 * 作用范围: 执行出错的按钮
 * 用途: 表示执行异常，可重试
 */
.btn-run-action.error {
    background: #ff3b30;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255, 59, 48, 0.25);
}

/* 响应式适配 */
@media (max-width: 768px) {
    .btn-generate-doc {
        height: 44px;
        padding: 0 20px;
        font-size: 14px;
    }
    
    .btn-generate-doc .btn-icon {
        width: 18px;
        height: 18px;
    }
    
    .btn-generate-doc .btn-arrow {
        width: 14px;
        height: 14px;
    }
}