/* ========================================
   iOS 26 Liquid Glass Design System
   ======================================== */

/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 移動端全局優化 */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    touch-action: manipulation;
    background-color: var(--bg-primary);
    min-height: calc(100% + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ========================================
   CSS 變數系統 - 亮色模式
   ======================================== */
:root {
    /* 主色調 */
    --primary: #5b21b6;
    --primary-dark: #4c1d95;
    --primary-light: #7c3aed;
    --primary-glow: #8b5cf6;
    --secondary: #e0e7ff;
    --secondary-light: #f1f5f9;
    --accent: #c7d2fe;
    --accent-bright: #ddd6fe;
    
    /* 文字顏色 */
    --text-primary: #2C3E50;
    --text-secondary: #5A6C7D;
    --text-light: #7F8C9A;
    
    /* 背景顏色 */
    --bg-primary: #FAFBFC;
    --bg-secondary: #FFFFFF;
    --border: #E8ECF0;
    
    /* iOS 26 液態玻璃系統 - 亮色模式 */
    --liquid-glass-primary: rgba(255, 255, 255, 0.85);
    --liquid-glass-secondary: rgba(255, 255, 255, 0.65);
    --liquid-glass-tertiary: rgba(255, 255, 255, 0.45);
    --liquid-glass-quaternary: rgba(255, 255, 255, 0.25);
    --liquid-glass-border: rgba(255, 255, 255, 0.4);
    --liquid-glass-border-strong: rgba(255, 255, 255, 0.6);
    --liquid-glass-highlight: rgba(255, 255, 255, 0.9);
    --liquid-glass-shadow: rgba(0, 0, 0, 0.05);
    --liquid-glass-shadow-strong: rgba(0, 0, 0, 0.1);
    
    /* 動態範圍變數 */
    --dynamic-range-standard: 1;
    --dynamic-range-high: 1.2;
    --brightness-boost: 1;
    --contrast-enhance: 1;
    
    /* 環境自適應顏色 */
    --adaptive-tint: rgba(255, 255, 255, 0.1);
    --adaptive-warmth: 0deg;
    --adaptive-coolness: 0deg;
    
    /* 兼容性玻璃變數 */
    --glass-bg: var(--liquid-glass-tertiary);
    --glass-bg-light: var(--liquid-glass-secondary);
    --glass-bg-strong: var(--liquid-glass-primary);
    --glass-border: var(--liquid-glass-border);
    --glass-border-light: rgba(255, 255, 255, 0.2);
    --glass-inner-light: var(--liquid-glass-highlight);
    --glass-inner-shadow: var(--liquid-glass-shadow);
    
    /* 圓角系統 */
    --radius-xs: 6px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-2xl: 40px;
    --radius-3xl: 48px;
    --radius-full: 50%;
    
    /* 陰影系統 */
    --shadow-sm: 0 2px 8px var(--liquid-glass-shadow);
    --shadow-md: 0 4px 16px var(--liquid-glass-shadow);
    --shadow-lg: 0 8px 32px var(--liquid-glass-shadow-strong);
    --shadow-xl: 0 16px 48px var(--liquid-glass-shadow-strong);
    --shadow-glass: 0 8px 32px var(--liquid-glass-shadow), inset 0 4px 20px var(--liquid-glass-highlight);
    --shadow-glass-hover: 0 16px 48px var(--liquid-glass-shadow-strong), inset 0 6px 24px var(--liquid-glass-highlight);
    
    /* 過渡動畫 */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-spring: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-liquid: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    --transition-bounce: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* 背景模糊效果 */
    --backdrop-blur-light: blur(20px) saturate(180%) brightness(110%) contrast(105%);
    --backdrop-blur-medium: blur(40px) saturate(200%) brightness(115%) contrast(110%);
    --backdrop-blur-strong: blur(60px) saturate(220%) brightness(120%) contrast(115%);
    --backdrop-blur-ultra: blur(80px) saturate(250%) brightness(125%) contrast(120%);
}

/* ========================================
   暗色模式變數
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* 暗色模式主色調 */
        --primary: #8b5cf6;
        --primary-dark: #7c3aed;
        --primary-light: #a78bfa;
        --primary-glow: #c4b5fd;
        --secondary: #1e293b;
        --secondary-light: #334155;
        --accent: #475569;
        --accent-bright: #64748b;
        
        /* 暗色模式文字 */
        --text-primary: #f8fafc;
        --text-secondary: #e2e8f0;
        --text-light: #94a3b8;
        
        /* 暗色模式背景 */
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --border: #334155;
        
        /* iOS 26 液態玻璃系統 - 暗色模式 */
        --liquid-glass-primary: rgba(30, 41, 59, 0.95);
        --liquid-glass-secondary: rgba(51, 65, 85, 0.85);
        --liquid-glass-tertiary: rgba(71, 85, 105, 0.75);
        --liquid-glass-quaternary: rgba(100, 116, 139, 0.65);
        --liquid-glass-border: rgba(148, 163, 184, 0.3);
        --liquid-glass-border-strong: rgba(148, 163, 184, 0.5);
        --liquid-glass-highlight: rgba(248, 250, 252, 0.08);
        --liquid-glass-shadow: rgba(0, 0, 0, 0.6);
        --liquid-glass-shadow-strong: rgba(0, 0, 0, 0.8);
        
        /* 暗色模式動態範圍 */
        --dynamic-range-standard: 0.8;
        --dynamic-range-high: 1;
        --brightness-boost: 0.9;
        --contrast-enhance: 1.1;
        
        /* 暗色模式環境自適應 */
        --adaptive-tint: rgba(148, 163, 184, 0.05);
        --adaptive-warmth: 5deg;
        --adaptive-coolness: -5deg;
        
        /* 暗色模式兼容性變數 */
        --glass-bg: var(--liquid-glass-tertiary);
        --glass-bg-light: var(--liquid-glass-secondary);
        --glass-bg-strong: var(--liquid-glass-primary);
        --glass-border: var(--liquid-glass-border);
        --glass-border-light: rgba(100, 116, 139, 0.2);
        --glass-inner-light: var(--liquid-glass-highlight);
        --glass-inner-shadow: var(--liquid-glass-shadow);
        
        /* 暗色模式陰影 */
        --shadow-sm: 0 2px 8px var(--liquid-glass-shadow);
        --shadow-md: 0 4px 16px var(--liquid-glass-shadow);
        --shadow-lg: 0 8px 32px var(--liquid-glass-shadow-strong);
        --shadow-xl: 0 16px 48px var(--liquid-glass-shadow-strong);
        --shadow-glass: 0 8px 32px var(--liquid-glass-shadow), inset 0 4px 20px var(--liquid-glass-highlight);
        --shadow-glass-hover: 0 16px 48px var(--liquid-glass-shadow-strong), inset 0 6px 24px var(--liquid-glass-highlight);
    }
}

/* ========================================
   主題類別控制
   ======================================== */
.theme-dark {
    --primary: #8b5cf6;
    --primary-dark: #7c3aed;
    --primary-light: #a78bfa;
    --primary-glow: #c4b5fd;
    --secondary: #1e293b;
    --secondary-light: #334155;
    --accent: #475569;
    --accent-bright: #64748b;
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-light: #94a3b8;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --border: #334155;
    
    --glass-bg: rgba(15, 23, 42, 0.75);
    --glass-bg-light: rgba(30, 41, 59, 0.8);
    --glass-bg-strong: rgba(51, 65, 85, 0.85);
    --glass-border: rgba(71, 85, 105, 0.4);
    --glass-border-light: rgba(100, 116, 139, 0.3);
    --glass-inner-light: rgba(148, 163, 184, 0.06);
    --glass-inner-shadow: rgba(0, 0, 0, 0.4);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 4px 20px rgba(148, 163, 184, 0.05);
    --shadow-glass-hover: 0 16px 48px rgba(0, 0, 0, 0.6), inset 0 6px 24px rgba(148, 163, 184, 0.08);
}

.theme-light {
    --primary: #5b21b6;
    --primary-dark: #4c1d95;
    --primary-light: #7c3aed;
    --primary-glow: #8b5cf6;
    --secondary: #e0e7ff;
    --secondary-light: #f1f5f9;
    --accent: #c7d2fe;
    --accent-bright: #ddd6fe;
    --text-primary: #2C3E50;
    --text-secondary: #5A6C7D;
    --text-light: #7F8C9A;
    --bg-primary: #FAFBFC;
    --bg-secondary: #FFFFFF;
    --border: #E8ECF0;
    
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-light: rgba(255, 255, 255, 0.12);
    --glass-bg-strong: rgba(255, 255, 255, 0.18);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-border-light: rgba(255, 255, 255, 0.2);
    --glass-inner-light: rgba(255, 255, 255, 0.15);
    --glass-inner-shadow: rgba(31, 38, 135, 0.1);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
    --shadow-glass: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
    --shadow-glass-hover: 0 16px 48px rgba(31, 38, 135, 0.3), inset 0 6px 24px rgba(255, 255, 255, 0.4);
}

/* ========================================
   基礎 Body 樣式
   ======================================== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background-color: var(--bg-primary);
    background: 
        radial-gradient(circle at 20% 80%, rgba(240, 242, 247, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(248, 250, 252, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, rgba(250, 251, 252, 0.95) 0%, rgba(248, 250, 252, 0.8) 30%, rgba(241, 245, 249, 0.6) 70%, rgba(226, 232, 240, 0.4) 100%);
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    margin: 0;
    padding: 0;
}

/* 暗色模式背景 */
body.theme-dark {
    background-color: #0f172a !important;
    background: 
        radial-gradient(circle at 20% 80%, rgba(30, 41, 59, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(51, 65, 85, 0.9) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(71, 85, 105, 0.7) 0%, transparent 50%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.8) 30%, rgba(51, 65, 85, 0.6) 70%, rgba(71, 85, 105, 0.4) 100%) !important;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #0f172a !important;
        background: 
            radial-gradient(circle at 20% 80%, rgba(30, 41, 59, 0.6) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(51, 65, 85, 0.7) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(71, 85, 105, 0.5) 0%, transparent 50%),
            linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.8) 30%, rgba(51, 65, 85, 0.6) 70%, rgba(71, 85, 105, 0.4) 100%) !important;
        min-height: calc(100% + env(safe-area-inset-top)) !important;
    }
}

/* ========================================
   背景裝飾效果
   ======================================== */
body::before {
    content: '';
    position: fixed;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 30% 70%, rgba(226, 232, 240, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 70% 30%, rgba(241, 245, 249, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(248, 250, 252, 0.15) 0%, transparent 60%);
    animation: float 25s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

body.theme-dark::before {
    background: 
        radial-gradient(circle at 30% 70%, rgba(71, 85, 105, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 70% 30%, rgba(100, 116, 139, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(148, 163, 184, 0.1) 0%, transparent 60%) !important;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-50px, -50px) rotate(120deg); }
    66% { transform: translate(50px, -50px) rotate(240deg); }
}

/* ========================================
   移動端優化
   ======================================== */
.container, .page {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.menu-item, .btn, .card, .navbar {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

img {
    max-width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.btn:focus, .menu-item:focus {
    outline: 3px solid #4f46e5;
    outline-offset: 2px;
}

@media (prefers-contrast: high) {
    .btn, .menu-item {
        border: 2px solid currentColor;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .menu-item:hover {
        transform: translateY(-2px) scale(1.02);
    }
}