/* 现代化CSS变量系统 */
    :root {
        --primary-color: #0066cc;
        --primary-hover: #0052a3;
        --primary-light: rgba(0, 102, 204, 0.1);
        --accent-color: #ff6b6b;
        --success-color: #4ecdc4;
        --warning-color: #feca57;
        
        --glass-bg: rgba(255, 255, 255, 0.75);
        --glass-hover: rgba(255, 255, 255, 0.85);
        --glass-border: rgba(255, 255, 255, 0.5);
        
        --shadow-color: rgba(0, 0, 0, 0.08);
        --shadow-hover: rgba(0, 0, 0, 0.15);
        --shadow-active: rgba(0, 102, 204, 0.25);
        
        --text-primary: #1d1d1f;
        --text-secondary: #6e6e73;
        --text-tertiary: #8e8e93;
        
        --button-spacing: 24px;
        --button-image-size: 52px;
        --border-radius: 16px;
        --border-radius-large: 24px;
        
        --animation-speed: 0.4s;
        --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 基础重置和现代化字体 */
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: url('static/light.jpg') no-repeat center center fixed;
        background-size: cover;
        color: var(--text-primary);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        position: relative;
        overflow-x: hidden;
    }

    /* 全局背景遮罩优化 */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.08) 100%);
        backdrop-filter: brightness(1.02) contrast(1.05);
        z-index: -1;
    }

    /* 优雅的页面加载动画 */
    @keyframes pageLoad {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.96);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    body {
        animation: pageLoad 0.8s var(--animation-easing);
    }

    /* 现代化头部设计 */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 2rem;
        background: var(--glass-bg);
        backdrop-filter: blur(25px) saturate(180%);
        -webkit-backdrop-filter: blur(25px) saturate(180%);
        border-bottom: 1px solid var(--glass-border);
        box-shadow: 0 8px 32px var(--shadow-color);
        position: relative;
        z-index: 100;
    }

    /* Logo容器和响应式Logo */
    .logo-container {
        position: relative;
        display: inline-block;
    }

    .logo {
        height: 48px;
        filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
        transition: all var(--animation-speed) var(--animation-easing);
        cursor: pointer;
        border-radius: 8px;
    }

    .logo:hover {
        transform: scale(1.05) rotate(1deg);
        filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
    }

    /* 默认显示浅色Logo，隐藏深色Logo */
    .logo-light {
        display: block;
    }

    .logo-dark {
        display: none;
    }

    /* 头部控件容器 */
    .header-controls {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    /* 主题切换按钮 */
    .theme-toggle {
        position: relative;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--animation-speed) var(--animation-easing);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: var(--text-primary);
        overflow: hidden;
    }

    .theme-toggle:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .theme-toggle:active {
        transform: translateY(0) scale(0.95);
    }

    /* 主题图标 */
    .theme-icon {
        width: 20px;
        height: 20px;
        position: absolute;
        transition: all 0.3s var(--animation-easing);
        stroke: currentColor;
    }

    /* 默认显示太阳图标（浅色模式），隐藏月亮图标 */
    .theme-icon-light {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

    .theme-icon-dark {
        opacity: 0;
        transform: rotate(-180deg) scale(0.3);
    }

    /* 按钮光泽效果 */
    .theme-toggle::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transition: left 0.6s ease;
    }

    .theme-toggle:hover::before {
        left: 100%;
    }

    .datetime {
        text-align: right;
        font-size: 0.9rem;
        color: var(--text-secondary);
        font-weight: 500;
        letter-spacing: 0.3px;
        line-height: 1.4;
    }

    #date {
        font-weight: 600;
        color: var(--text-primary);
        display: block;
    }

    #time {
        font-variant-numeric: tabular-nums;
        margin-top: 2px;
        display: block;
    }

    /* 主要内容区域 */
    main {
        flex: 1;
        padding: 40px 20px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 浮动装饰元素 */
    main::before {
        content: '';
        position: absolute;
        top: 20%;
        right: 10%;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
        border-radius: 50%;
        animation: float 6s ease-in-out infinite;
        pointer-events: none;
        opacity: 0.6;
    }

    @keyframes float {
        0%, 100% {
            transform: translate(0, 0) rotate(0deg);
            opacity: 0.6;
        }
        50% {
            transform: translate(-15px, -25px) rotate(180deg);
            opacity: 0.3;
        }
    }

    /* 导航按钮容器 */
    .nav-container {
        background: var(--glass-bg);
        backdrop-filter: blur(25px) saturate(180%);
        -webkit-backdrop-filter: blur(25px) saturate(180%);
        border-radius: var(--border-radius-large);
        padding: 2rem;
        max-width: 1400px;
        width: 100%;
        border: 1px solid var(--glass-border);
        box-shadow: 0 12px 48px var(--shadow-color);
        position: relative;
        overflow: hidden;
    }

    /* 容器装饰光泽 */
    .nav-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    }

    .button-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--button-spacing);
        width: 100%;
    }

    /* 现代化导航按钮 */
    .nav-button {
        display: flex;
        align-items: center;
        padding: 1.2rem 1.5rem;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-radius: var(--border-radius);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 4px 16px var(--shadow-color);
        text-decoration: none;
        color: var(--text-primary);
        font-weight: 600;
        font-size: 15px;
        transition: all var(--animation-speed) var(--animation-easing);
        position: relative;
        overflow: hidden;
        min-height: calc(var(--button-image-size) + 2rem);
        letter-spacing: 0.2px;
        
        /* 触摸优化 */
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* 按钮光泽效果 */
    .nav-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.6s ease;
    }

    .nav-button:hover::before {
        left: 100%;
    }

    /* 底部装饰条 */
    .nav-button::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        transition: width 0.4s var(--animation-easing);
    }

    .nav-button:hover::after {
        width: 100%;
    }

    .nav-button:hover {
        background: var(--glass-hover);
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 12px 32px var(--shadow-hover);
        border-color: rgba(255, 255, 255, 0.6);
    }

    .nav-button:active {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 6px 20px var(--shadow-active);
    }

    .nav-button img {
        margin-right: 1.2rem;
        width: var(--button-image-size);
        height: var(--button-image-size);
        flex-shrink: 0;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        transition: transform 0.3s ease;
    }

    .nav-button:hover img {
        transform: scale(1.1) rotate(2deg);
    }

    /* 图片样式变体 */
    .nav-button.nano img {
        transform: scale(0.8);
        transform-origin: center;
    }

    .nav-button.small img {
        transform: scale(0.85);
        transform-origin: center;
    }

    .nav-button.semi-medium img {
        transform: scale(0.9);
        transform-origin: center;
    }

    .nav-button.medium img {
        transform: scale(0.95);
        transform-origin: center;
    }
    
    .nav-button.round img {
        border-radius: 25%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .nav-button.circle img {
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .nav-button.nano:hover img {
        transform: scale(0.88) rotate(2deg);
    }
    .nav-button.small:hover img {
        transform: scale(0.935) rotate(2deg);
    }
    .nav-button.semi-medium:hover img {
        transform: scale(0.99) rotate(2deg);
    }
    .nav-button.medium:hover img {
        transform: scale(1.045) rotate(2deg);
    }

    .nav-button span {
        font-weight: 600;
        color: var(--text-primary);
        transition: color 0.3s ease;
    }

    .nav-button:hover span {
        color: var(--primary-color);
    }

    /* 可变图标容器 */
    .icon-container {
        position: relative;
        display: inline-block;
        width: var(--button-image-size);
        height: var(--button-image-size);
        margin-right: 1.2rem;
        flex-shrink: 0;
    }

    .variable-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        transition: all 0.3s ease;
    }

    /* 默认显示深色可变图标（适合浅色背景），隐藏白色图标 */
    .variable-icon-light {
        opacity: 1;
        transform: scale(1);
    }

    .variable-icon-dark {
        opacity: 0;
        transform: scale(1);
    }

    /* 悬停效果 */
    .nav-button:hover .variable-icon {
        transform: scale(1.045) rotate(2deg);
    }

    .nav-button:hover .variable-icon-dark {
        transform: scale(1.045) rotate(2deg);
    }

    /* 调整medium类型按钮的图标容器 */
    .nav-button.medium .icon-container {
        transform: scale(0.95);
        transform-origin: center;
    }

    .nav-button.medium:hover .icon-container {
        transform: scale(1.045);
    }

    /* 现代化页脚 */
    footer {
        text-align: center;
        background: var(--glass-bg);
        backdrop-filter: blur(25px) saturate(180%);
        -webkit-backdrop-filter: blur(25px) saturate(180%);
        border-top: 1px solid var(--glass-border);
        color: var(--text-primary);
        font-weight: 500;
        font-size: 0.9rem;
        padding: 25px 20px;
        box-shadow: 0 -8px 32px var(--shadow-color);
        position: relative;
    }

    footer p {
        margin: 8px 0;
        transition: all 0.3s ease;
    }

    footer a {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s var(--animation-easing);
        position: relative;
        padding: 2px 0;
    }

    footer a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        transition: width 0.3s ease;
    }

    footer a:hover::after {
        width: 100%;
    }

    footer a:hover {
        color: var(--primary-hover);
        transform: translateY(-1px);
    }

    /* 响应式设计优化 */
    @media (max-width: 1200px) {
        .button-container {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: calc(var(--button-spacing) * 0.8);
        }
    }

    @media (max-width: 768px) {
        body {
            background-attachment: scroll;
            font-size: 14px;
        }

        header {
            padding: 1rem 1.2rem;
            flex-direction: column;
            gap: 0.6rem;
            text-align: center;
        }

        .logo {
            height: 40px;
            margin-bottom: 0.3rem;
        }

        .header-controls {
            justify-content: center;
            width: 100%;
        }

        /* 移动端隐藏主题切换按钮，简化布局 */
        .theme-toggle {
            position: absolute;
            top: 1.2rem;
            right: 1.2rem;
            z-index: 10;
        }

        .datetime {
            text-align: center;
            font-size: 0.8rem;
        }

        main {
            padding: 20px 10px 30px;
        }

        .nav-container {
            padding: 1.5rem;
            margin: 0 5px;
            border-radius: 20px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }

        .button-container {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .nav-button {
            padding: 1rem 1.2rem;
            font-size: 14px;
            min-height: calc(var(--button-image-size) * 0.9 + 1.8rem);
            border-radius: 14px;
            transition: all 0.2s ease;
        }

        .nav-button:hover {
            transform: translateY(-2px) scale(1.01);
        }

        .nav-button:active {
            transform: scale(0.98);
        }

        .nav-button img {
            width: calc(var(--button-image-size) * 0.9);
            height: calc(var(--button-image-size) * 0.9);
            margin-right: 1rem;
        }
        
        .nav-button.medium .icon-container {
            width: calc(var(--button-image-size) * 0.9);
            height: calc(var(--button-image-size) * 0.9);
            margin-right: 1rem;
            transform: none;
        }

        /* 浮动装饰隐藏 */
        main::before {
            display: none;
        }

        footer {
            padding: 20px 15px;
            font-size: 0.8rem;
        }
    }

    @media (max-width: 480px) {
        .nav-container {
            margin: 0;
            border-radius: 16px;
            padding: 1.2rem;
        }

        .nav-button {
            padding: 0.9rem 1rem;
            font-size: 13px;
        }

        .nav-button img {
            width: calc(var(--button-image-size) * 0.8);
            height: calc(var(--button-image-size) * 0.8);
            margin-right: 0.8rem;
        }

        .nav-button.medium .icon-container {
            width: calc(var(--button-image-size) * 0.8);
            height: calc(var(--button-image-size) * 0.8);
            margin-right: 0.8rem;
            transform: none;
        }
    }

    /* 深色模式样式 */
    body[data-theme="dark"] {
        --glass-bg: rgba(28, 28, 30, 0.8);
        --glass-hover: rgba(28, 28, 30, 0.9);
        --glass-border: rgba(255, 255, 255, 0.1);
        --text-primary: #f2f2f7;
        --text-secondary: #98989d;
        --text-tertiary: #636366;
        --shadow-color: rgba(0, 0, 0, 0.3);
        --shadow-hover: rgba(0, 0, 0, 0.4);
        background-image: url('static/dark.jpg');
    }

    body[data-theme="dark"] .nav-button {
        background: rgba(28, 28, 30, 0.7);
        color: var(--text-primary);
        border-color: rgba(255, 255, 255, 0.1);
    }

    body[data-theme="dark"] .nav-button:hover {
        background: rgba(28, 28, 30, 0.85);
        border-color: rgba(255, 255, 255, 0.2);
    }

    body[data-theme="dark"] .theme-toggle {
        background: rgba(28, 28, 30, 0.6);
        border-color: rgba(255, 255, 255, 0.2);
    }

    body[data-theme="dark"] .theme-toggle:hover {
        background: rgba(28, 28, 30, 0.8);
        border-color: rgba(255, 255, 255, 0.3);
    }

    /* 系统深色模式适配 */
    @media (prefers-color-scheme: dark) {
        body:not([data-theme="light"]) {
            --glass-bg: rgba(28, 28, 30, 0.8);
            --glass-hover: rgba(28, 28, 30, 0.9);
            --glass-border: rgba(255, 255, 255, 0.1);
            --text-primary: #f2f2f7;
            --text-secondary: #98989d;
            --text-tertiary: #636366;
            --shadow-color: rgba(0, 0, 0, 0.3);
            --shadow-hover: rgba(0, 0, 0, 0.4);
        }

        body:not([data-theme="light"]) .nav-button {
            background: rgba(28, 28, 30, 0.7);
            color: var(--text-primary);
            border-color: rgba(255, 255, 255, 0.1);
        }

        body:not([data-theme="light"]) .nav-button:hover {
            background: rgba(28, 28, 30, 0.85);
            border-color: rgba(255, 255, 255, 0.2);
        }

        body:not([data-theme="light"]) .theme-toggle {
            background: rgba(28, 28, 30, 0.6);
            border-color: rgba(255, 255, 255, 0.2);
        }

        body:not([data-theme="light"]) .theme-toggle:hover {
            background: rgba(28, 28, 30, 0.8);
            border-color: rgba(255, 255, 255, 0.3);
        }
    }

    /* 手动深色模式时的Logo切换 */
    body[data-theme="dark"] .logo-light,
    body:not([data-theme="light"]) .logo-light {
        display: none;
    }

    body[data-theme="dark"] .logo-dark,
    body:not([data-theme="light"]) .logo-dark {
        display: block;
    }

    /* 手动深色模式时的图标切换 */
    body[data-theme="dark"] .theme-icon-light,
    body:not([data-theme="light"]) .theme-icon-light {
        opacity: 0;
        transform: rotate(180deg) scale(0.3);
    }

    body[data-theme="dark"] .theme-icon-dark,
    body:not([data-theme="light"]) .theme-icon-dark {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

    /* 深色模式时的variable图标切换 */
    body[data-theme="dark"] .variable-icon-light,
    body:not([data-theme="light"]) .variable-icon-light {
        opacity: 0;
        transform: scale(0.95);
    }

    body[data-theme="dark"] .variable-icon-dark,
    body:not([data-theme="light"]) .variable-icon-dark {
        opacity: 1;
        transform: scale(0.95);
    }

    /* 深色模式悬停效果 */
    body[data-theme="dark"] .nav-button:hover .variable-icon-light,
    body:not([data-theme="light"]) .nav-button:hover .variable-icon-light {
        transform: scale(1.045) rotate(2deg);
    }

    body[data-theme="dark"] .nav-button:hover .variable-icon-dark,
    body:not([data-theme="light"]) .nav-button:hover .variable-icon-dark {
        transform: scale(0.95) rotate(2deg);
    }

    /* 浅色模式强制样式 */
    body[data-theme="light"] .logo-light {
        display: block;
    }

    body[data-theme="light"] .logo-dark {
        display: none;
    }

    body[data-theme="light"] .theme-icon-light {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }

    body[data-theme="light"] .theme-icon-dark {
        opacity: 0;
        transform: rotate(-180deg) scale(0.3);
    }

    body[data-theme="light"] .variable-icon-light {
        opacity: 1;
        transform: scale(0.95);
    }

    body[data-theme="light"] .variable-icon-dark {
        opacity: 0;
        transform: scale(0.95);
    }

    /* 浅色模式悬停效果 */
    body[data-theme="light"] .nav-button:hover .variable-icon-light {
        transform: scale(1.045) rotate(2deg);
    }

    body[data-theme="light"] .nav-button:hover .variable-icon-dark {
        transform: scale(0.95) rotate(2deg);
    }

    /* 性能优化 */
    .nav-button, .logo, .theme-toggle, .variable-icon {
        will-change: transform;
    }

    /* 主题切换过渡动画 */
    body {
        transition: background-color 0.3s var(--animation-easing),
                    color 0.3s var(--animation-easing);
    }

    /* 确保所有元素在主题切换时平滑过渡 */
    *, *::before, *::after {
        transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow;
        transition-duration: 0.3s;
        transition-timing-function: var(--animation-easing);
    }

    /* 避免动画元素被覆盖 */
    .nav-button, .logo, .theme-toggle, .variable-icon,
    .nav-button::before, .nav-button::after,
    .theme-toggle::before {
        transition-property: all;
        transition-duration: var(--animation-speed);
    }

    /* 可访问性增强 */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* 高对比度模式支持 */
    @media (prefers-contrast: high) {
        .nav-button {
            border: 2px solid var(--text-primary);
        }
        
        .nav-button:hover {
            background: var(--primary-color);
            color: white;
        }
    }