/*
 * Style Lock - 防止樣式跑掉的保護機制
 * 在進行 CSS 重構時，此檔案應保持最高優先級載入
 */

/* 關鍵布局鎖定 */
.style-lock-container {
  position: relative;
  box-sizing: border-box;
}

/* 防止管理端樣式影響會員端 */
.admin-isolation {
  isolation: isolate;
  contain: layout style;
}

.user-isolation {
  isolation: isolate;
  contain: layout style;
}

/* 防止第三方框架衝突 */
.framework-isolation {
  all: unset;
}

/* Modal 層級鎖定 */
.modal-z-lock {
  z-index: var(--z-modal);
  position: fixed;
}

/* 重要組件布局保護 */
.layout-protection {
  min-height: 100vh;
  overflow-x: hidden;
}

/* 響應式斷點保護 */
@media (max-width: 768px) {
  .mobile-layout-lock {
    width: 100%;
    margin: 0;
    padding: 0 15px;
  }
}

/* 關鍵 UI 元件保護 */
.critical-ui-lock {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
/**
 * ========================================
 * Naily Design System - Consolidated Variables
 * ========================================
 *
 * This file consolidates all CSS custom properties across the Naily e-commerce platform
 * into a unified, conflict-free system. It replaces multiple variable files and
 * provides a consistent foundation for the entire application.
 *
 * Structure:
 * 0. Design Tokens (inlined from tokens.css)
 * 1. Brand & Primary Colors
 * 2. Semantic Color System
 * 3. Neutral/Gray Scale
 * 4. Typography System
 * 5. Spacing & Layout
 * 6. Border & Border Radius
 * 7. Shadow System
 * 8. Z-Index Hierarchy
 * 9. Animation & Transitions
 * 10. Responsive Breakpoints
 * 11. Component-Specific Variables
 * 12. Luxury Design System Variables
 * 13. Accessibility & Theme Support
 * 14. Legacy Variable Mappings
 */

:root {
  /* ========================================
     🎨 DESIGN TOKENS (inlined from tokens.css)
     ======================================== */

  /* Primary Brand Colors - Naily/Prada 深紅色系統 */
  --color-primary-50: #fef2f2;
  --color-primary-100: #fee2e2;
  --color-primary-200: #fecaca;
  --color-primary-300: #fca5a5;
  --color-primary-400: #f87171;
  --color-primary-500: #BE1F48;  /* 主色 - Naily 品牌紅 */
  --color-primary-600: #9A1A3A;  /* 深色變體 */
  --color-primary-700: #8B1538;  /* 更深 */
  --color-primary-800: #6B0D28;  /* 極深 */
  --color-primary-900: #4A091C;  /* 最深 */

  /* Secondary Colors - 配色系統 */
  --color-secondary-50: #fffbeb;
  --color-secondary-100: #fef3c7;
  --color-secondary-200: #fde68a;
  --color-secondary-300: #fcd34d;
  --color-secondary-400: #fbbf24;
  --color-secondary-500: #f59e0b;  /* 次要色 - 金黃 */
  --color-secondary-600: #d97706;
  --color-secondary-700: #b45309;
  --color-secondary-800: #92400e;
  --color-secondary-900: #78350f;

  /* Accent Colors - 相關色系 */
  --color-accent-pink: #f43f5e;
  --color-accent-coral: #D8626E;  /* Naily 次要色 */
  --color-accent-mint: #059669;
  --color-accent-cream: #f7f3f0;

  /* Semantic Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-black: #000000;

  /* Font Families (tokens.css) */
  --font-primary: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;

  /* ========================================
     🎨 BRAND & PRIMARY COLORS
     ======================================== */

  /* Primary Brand Colors - Deep Red System */
  --naily-primary: #BE1F48;
  --naily-primary-50: #fef2f2;
  --naily-primary-100: #fee2e2;
  --naily-primary-200: #fecaca;
  --naily-primary-300: #fca5a5;
  --naily-primary-400: #f87171;
  --naily-primary-500: #BE1F48;  /* Main brand color */
  --naily-primary-600: #9A1A3A;
  --naily-primary-700: #8B1538;
  --naily-primary-800: #6B0D28;
  --naily-primary-900: #4A091C;

  /* Secondary/Accent Colors */
  --naily-accent: #D8626E;  /* Naily 次要色 */
  --naily-accent-light: #FF6B8A;
  --naily-accent-coral: #D8626E;
  --naily-accent-pink: #f43f5e;
  --naily-accent-mint: #059669;
  --naily-accent-cream: #f7f3f0;
  
  /* Complementary Colors */
  --naily-secondary: #667eea;
  --naily-secondary-light: #764ba2;
  --naily-gold: #f59e0b;
  --naily-gold-light: #fbbf24;
  
  /* ========================================
     🎯 SEMANTIC COLOR SYSTEM
     ======================================== */
  
  /* Status Colors */
  --naily-success: #10b981;
  --naily-success-light: #14a085;
  --naily-success-dark: #0d7377;
  
  --naily-warning: #f59e0b;
  --naily-warning-light: #fbbf24;
  --naily-warning-dark: #d97706;
  
  --naily-error: #ef4444;
  --naily-error-light: #f87171;
  --naily-error-dark: #dc2626;
  
  --naily-info: #3b82f6;
  --naily-info-light: #60a5fa;
  --naily-info-dark: #1d4ed8;
  
  /* ========================================
     🔘 NEUTRAL/GRAY SCALE
     ======================================== */
  
  --naily-white: #ffffff;
  --naily-black: #000000;
  
  --naily-gray-50: #f9fafb;
  --naily-gray-100: #f3f4f6;
  --naily-gray-200: #e5e7eb;
  --naily-gray-300: #d1d5db;
  --naily-gray-400: #9ca3af;
  --naily-gray-500: #6b7280;
  --naily-gray-600: #4b5563;
  --naily-gray-700: #374151;
  --naily-gray-800: #1f2937;
  --naily-gray-900: #111827;
  
  /* Text Colors */
  --naily-text-primary: #111827;
  --naily-text-secondary: #4b5563;
  --naily-text-tertiary: #6b7280;
  --naily-text-muted: #9ca3af;
  --naily-text-disabled: #d1d5db;
  --naily-text-inverse: #ffffff;
  
  /* Background Colors */
  --naily-bg-primary: #ffffff;
  --naily-bg-secondary: #f9fafb;
  --naily-bg-tertiary: #f3f4f6;
  --naily-bg-hover: #f3f4f6;
  --naily-bg-active: #e5e7eb;
  --naily-bg-disabled: #f9fafb;
  --naily-bg-overlay: rgba(0, 0, 0, 0.5);
  --naily-bg-glass: rgba(255, 255, 255, 0.9);
  
  /* ========================================
     📝 TYPOGRAPHY SYSTEM
     ======================================== */
  
  /* Font Families */
  --naily-font-primary: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, sans-serif;
  --naily-font-heading: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --naily-font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  
  /* Font Sizes - T-Shirt Sizing + Pixel Values */
  --naily-text-xs: 0.75rem;     /* 12px */
  --naily-text-sm: 0.875rem;    /* 14px */
  --naily-text-base: 1rem;      /* 16px */
  --naily-text-lg: 1.125rem;    /* 18px */
  --naily-text-xl: 1.25rem;     /* 20px */
  --naily-text-2xl: 1.5rem;     /* 24px */
  --naily-text-3xl: 1.875rem;   /* 30px */
  --naily-text-4xl: 2.25rem;    /* 36px */
  --naily-text-5xl: 3rem;       /* 48px */
  --naily-text-6xl: 3.75rem;    /* 60px */
  --naily-text-7xl: 4.5rem;     /* 72px */
  
  /* Font Weights */
  --naily-font-thin: 100;
  --naily-font-light: 300;
  --naily-font-normal: 400;
  --naily-font-medium: 500;
  --naily-font-semibold: 600;
  --naily-font-bold: 700;
  --naily-font-extrabold: 800;
  --naily-font-black: 900;
  
  /* Line Heights */
  --naily-leading-none: 1;
  --naily-leading-tight: 1.25;
  --naily-leading-snug: 1.375;
  --naily-leading-normal: 1.5;
  --naily-leading-relaxed: 1.625;
  --naily-leading-loose: 2;
  
  /* ========================================
     📏 SPACING & LAYOUT SYSTEM
     ======================================== */
  
  /* Spacing Scale - Based on 4px base unit */
  --naily-space-0: 0;
  --naily-space-px: 1px;
  --naily-space-0_5: 0.125rem;  /* 2px */
  --naily-space-1: 0.25rem;     /* 4px */
  --naily-space-1_5: 0.375rem;  /* 6px */
  --naily-space-2: 0.5rem;      /* 8px */
  --naily-space-2_5: 0.625rem;  /* 10px */
  --naily-space-3: 0.75rem;     /* 12px */
  --naily-space-3_5: 0.875rem;  /* 14px */
  --naily-space-4: 1rem;        /* 16px */
  --naily-space-5: 1.25rem;     /* 20px */
  --naily-space-6: 1.5rem;      /* 24px */
  --naily-space-7: 1.75rem;     /* 28px */
  --naily-space-8: 2rem;        /* 32px */
  --naily-space-9: 2.25rem;     /* 36px */
  --naily-space-10: 2.5rem;     /* 40px */
  --naily-space-11: 2.75rem;    /* 44px */
  --naily-space-12: 3rem;       /* 48px */
  --naily-space-14: 3.5rem;     /* 56px */
  --naily-space-16: 4rem;       /* 64px */
  --naily-space-20: 5rem;       /* 80px */
  --naily-space-24: 6rem;       /* 96px */
  --naily-space-28: 7rem;       /* 112px */
  --naily-space-32: 8rem;       /* 128px */
  --naily-space-36: 9rem;       /* 144px */
  --naily-space-40: 10rem;      /* 160px */
  --naily-space-44: 11rem;      /* 176px */
  --naily-space-48: 12rem;      /* 192px */
  --naily-space-52: 13rem;      /* 208px */
  --naily-space-56: 14rem;      /* 224px */
  --naily-space-60: 15rem;      /* 240px */
  --naily-space-64: 16rem;      /* 256px */
  --naily-space-72: 18rem;      /* 288px */
  --naily-space-80: 20rem;      /* 320px */
  --naily-space-96: 24rem;      /* 384px */
  
  /* Container Max Widths */
  --naily-container-xs: 20rem;      /* 320px */
  --naily-container-sm: 36rem;      /* 576px */
  --naily-container-md: 48rem;      /* 768px */
  --naily-container-lg: 64rem;      /* 1024px */
  --naily-container-xl: 80rem;      /* 1280px */
  --naily-container-2xl: 87.5rem;   /* 1400px */
  
  /* ========================================
     🔲 BORDER & BORDER RADIUS SYSTEM
     ======================================== */
  
  /* Border Widths */
  --naily-border-0: 0;
  --naily-border: 1px;
  --naily-border-2: 2px;
  --naily-border-4: 4px;
  --naily-border-8: 8px;
  
  /* Border Radius */
  --naily-radius-none: 0;
  --naily-radius-sm: 0.125rem;   /* 2px */
  --naily-radius: 0.25rem;       /* 4px */
  --naily-radius-md: 0.375rem;   /* 6px */
  --naily-radius-lg: 0.5rem;     /* 8px */
  --naily-radius-xl: 0.75rem;    /* 12px */
  --naily-radius-2xl: 1rem;      /* 16px */
  --naily-radius-3xl: 1.5rem;    /* 24px */
  --naily-radius-full: 9999px;
  
  /* Border Colors */
  --naily-border-primary: var(--naily-gray-200);
  --naily-border-secondary: var(--naily-gray-300);
  --naily-border-accent: var(--naily-primary-300);
  --naily-border-success: var(--naily-success);
  --naily-border-warning: var(--naily-warning);
  --naily-border-error: var(--naily-error);
  
  /* ========================================
     🌫️ SHADOW SYSTEM
     ======================================== */
  
  --naily-shadow-none: none;
  --naily-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --naily-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --naily-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --naily-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --naily-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --naily-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --naily-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --naily-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* Colored Shadows */
  --naily-shadow-primary: 0 4px 12px rgba(190, 31, 72, 0.3);
  --naily-shadow-accent: 0 4px 12px rgba(216, 98, 110, 0.3);
  --naily-shadow-accent-md: 0 4px 15px rgba(255, 107, 138, 0.4);  /* 按鈕正常陰影 */
  --naily-shadow-accent-lg: 0 8px 25px rgba(255, 107, 138, 0.5);  /* 按鈕 hover 陰影 */
  --naily-accent-light-rgb: 255, 107, 138;                         /* 供 rgba() 使用 */
  --naily-shadow-success: 0 4px 12px rgba(16, 185, 129, 0.3);
  --naily-shadow-warning: 0 4px 12px rgba(245, 158, 11, 0.3);
  --naily-shadow-error: 0 4px 12px rgba(239, 68, 68, 0.3);
  
  /* ========================================
     📚 Z-INDEX HIERARCHY
     ======================================== */
  
  --naily-z-auto: auto;
  --naily-z-0: 0;
  --naily-z-10: 10;
  --naily-z-20: 20;
  --naily-z-30: 30;
  --naily-z-40: 40;
  --naily-z-50: 50;
  
  /* Component Z-Index Levels */
  --naily-z-dropdown: 1000;
  --naily-z-sticky: 1020;
  --naily-z-fixed: 1030;
  --naily-z-modal-backdrop: 1040;
  --naily-z-modal: 1050;
  --naily-z-modal-nested: 1060;
  --naily-z-popover: 1070;
  --naily-z-tooltip: 1080;
  --naily-z-toast: 1090;
  --naily-z-overlay: 1100;
  
  /* Maximum Z-Index */
  --naily-z-max: 2147483647;
  
  /* ========================================
     ⚡ ANIMATION & TRANSITIONS
     ======================================== */
  
  /* Duration */
  --naily-duration-75: 75ms;
  --naily-duration-100: 100ms;
  --naily-duration-150: 150ms;
  --naily-duration-200: 200ms;
  --naily-duration-300: 300ms;
  --naily-duration-500: 500ms;
  --naily-duration-700: 700ms;
  --naily-duration-1000: 1000ms;
  
  /* Easing Functions */
  --naily-ease-linear: linear;
  --naily-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --naily-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --naily-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --naily-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --naily-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Common Transitions */
  --naily-transition-none: none;
  --naily-transition-fast: all 150ms var(--naily-ease-out);
  --naily-transition: all 300ms var(--naily-ease-out);
  --naily-transition-slow: all 500ms var(--naily-ease-out);
  --naily-transition-colors: color 150ms var(--naily-ease-out), background-color 150ms var(--naily-ease-out), border-color 150ms var(--naily-ease-out);
  --naily-transition-shadow: box-shadow 150ms var(--naily-ease-out);
  --naily-transition-transform: transform 150ms var(--naily-ease-out);
  
  /* ========================================
     📱 RESPONSIVE BREAKPOINTS
     ======================================== */
  
  --naily-screen-xs: 360px;
  --naily-screen-sm: 640px;
  --naily-screen-md: 768px;
  --naily-screen-lg: 1024px;
  --naily-screen-xl: 1280px;
  --naily-screen-2xl: 1536px;
  
  /* ========================================
     🎛️ COMPONENT-SPECIFIC VARIABLES
     ======================================== */
  
  /* Blog Component Variables */
  --naily-blog-hero-bg: linear-gradient(135deg, var(--naily-primary-500) 0%, var(--naily-primary-700) 100%);
  --naily-blog-card-bg: var(--naily-white);
  --naily-blog-shadow: var(--naily-shadow-md);
  
  /* Button Variables */
  --naily-btn-padding-x: var(--naily-space-4);
  --naily-btn-padding-y: var(--naily-space-2);
  --naily-btn-border-radius: var(--naily-radius-md);
  --naily-btn-font-weight: var(--naily-font-medium);
  
  /* Form Variables */
  --naily-form-border-color: var(--naily-border-primary);
  --naily-form-border-radius: var(--naily-radius);
  --naily-form-padding-x: var(--naily-space-3);
  --naily-form-padding-y: var(--naily-space-2);
  --naily-form-focus-ring: 0 0 0 3px rgba(190, 31, 72, 0.1);
  
  /* Card Variables */
  --naily-card-bg: var(--naily-white);
  --naily-card-border: var(--naily-border) solid var(--naily-border-primary);
  --naily-card-border-radius: var(--naily-radius-lg);
  --naily-card-shadow: var(--naily-shadow);
  --naily-card-padding: var(--naily-space-6);
  
  /* Navigation Variables */
  --naily-nav-height: 4rem; /* 64px */
  --naily-nav-bg: var(--naily-white);
  --naily-nav-border: var(--naily-border) solid var(--naily-border-primary);
  --naily-nav-shadow: var(--naily-shadow-sm);
  
  /* Modal Variables */
  --naily-modal-backdrop: rgba(0, 0, 0, 0.5);
  --naily-modal-border-radius: var(--naily-radius-lg);
  --naily-modal-shadow: var(--naily-shadow-2xl);
  --naily-modal-max-width: 32rem; /* 512px */
  
  /* ========================================
     🎨 GRADIENTS
     ======================================== */
  
  --naily-gradient-primary: linear-gradient(135deg, var(--naily-primary-500) 0%, var(--naily-accent) 100%);
  --naily-gradient-hero: linear-gradient(135deg, var(--naily-primary-500) 0%, var(--naily-accent) 50%, var(--naily-primary-500) 100%);
  --naily-gradient-card: linear-gradient(145deg, var(--naily-white) 0%, var(--naily-gray-50) 100%);
  --naily-gradient-hover: linear-gradient(145deg, var(--naily-gray-50) 0%, var(--naily-white) 100%);
  --naily-gradient-warm: linear-gradient(135deg, var(--naily-accent-coral) 0%, var(--naily-accent-pink) 100%);
  --naily-gradient-cool: linear-gradient(135deg, var(--naily-primary-400) 0%, var(--naily-accent-mint) 100%);
  --naily-gradient-elegant: linear-gradient(135deg, var(--naily-primary-600) 0%, var(--naily-gold) 100%);
  
  /* Tier Gradients */
  --naily-gradient-bronze: linear-gradient(135deg, #cd7f32 0%, #e9967a 100%);
  --naily-gradient-silver: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
  --naily-gradient-gold: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  --naily-gradient-diamond: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --naily-gradient-premium: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);

  /* ========================================
     🪙 ADDITIONAL TEXT COLORS
     ======================================== */

  /* Extended text color tokens (from variables.css) */
  --text-dark: #333333;   /* 深色文字 */
  --text-light: #666666;  /* 淺色文字（但仍可讀） */

  /* ========================================
     ✨ LUXURY MINIMALIST DESIGN SYSTEM
     ======================================== */
  /* 輕奢極簡設計系統 - Chanel/Dior 風格 */

  /* Luxury Background Colors */
  --luxury-bg-primary: #FAFAF8;      /* 象牙白 - 取代 #FFF0F3 */
  --luxury-bg-secondary: #F5F5F3;    /* 溫暖灰白 */
  --luxury-bg-card: #FFFFFF;
  --luxury-bg-accent: #FAF8F6;       /* 微暖調 */

  /* Luxury Neutral Palette */
  --luxury-black: #1A1A1A;
  --luxury-charcoal: #2D2D2D;
  --luxury-graphite: #4A4A4A;
  --luxury-stone: #8B8B8B;
  --luxury-silver: #C4C4C4;
  --luxury-pearl: #E8E8E8;

  /* Luxury Border Colors */
  --luxury-border-light: #E8E8E8;
  --luxury-border-medium: #D4D4D4;
  --luxury-border-dark: #C4C4C4;

  /* Luxury Border Radius (smaller, refined) */
  --luxury-radius-xs: 2px;
  --luxury-radius-sm: 4px;
  --luxury-radius-md: 6px;
  --luxury-radius-lg: 8px;
  --luxury-radius-xl: 12px;

  /* Luxury Shadows (subtle, refined) */
  --luxury-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --luxury-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --luxury-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
  --luxury-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.10);

  /* Luxury Transitions (elegant, not bouncy) */
  --luxury-transition-fast: 200ms ease-out;
  --luxury-transition-base: 300ms ease-out;
  --luxury-transition-slow: 500ms ease-out;
  --luxury-ease-elegant: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Luxury Typography */
  --luxury-letter-spacing-wide: 0.05em;
  --luxury-letter-spacing-wider: 0.1em;
  --luxury-letter-spacing-widest: 0.15em;
}

/* ========================================
   🌙 ACCESSIBILITY & THEME SUPPORT
   ======================================== */

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    /* Token overrides */
    --color-primary-500: #990000;
    --color-secondary-500: #cc8800;
    --color-success: #006600;
    --color-warning: #cc6600;
    --color-error: #cc0000;

    /* Naily system overrides */
    --naily-primary: #990000;
    --naily-primary-500: #990000;
    --naily-gold: #cc8800;
    --naily-success: #006600;
    --naily-warning: #cc6600;
    --naily-error: #cc0000;

    /* Enhanced shadows for better visibility */
    --naily-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --naily-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --naily-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --naily-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --naily-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
    --naily-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --naily-transition-fast: none;
    --naily-transition: none;
    --naily-transition-slow: none;
    --naily-transition-colors: none;
    --naily-transition-shadow: none;
    --naily-transition-transform: none;

    --naily-duration-75: 0ms;
    --naily-duration-100: 0ms;
    --naily-duration-150: 0ms;
    --naily-duration-200: 0ms;
    --naily-duration-300: 0ms;
    --naily-duration-500: 0ms;
    --naily-duration-700: 0ms;
    --naily-duration-1000: 0ms;
  }

  * {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* Print Styles */
@media print {
  :root {
    --naily-shadow-xs: none;
    --naily-shadow-sm: none;
    --naily-shadow: none;
    --naily-shadow-md: none;
    --naily-shadow-lg: none;
    --naily-shadow-xl: none;
    --naily-shadow-2xl: none;
    --naily-shadow-inner: none;

    --naily-gradient-primary: none;
    --naily-gradient-hero: none;
    --naily-gradient-card: none;
    --naily-gradient-hover: none;
  }

  * {
    background: transparent;
    color: black;
    box-shadow: none;
    text-shadow: none;
  }

  .no-print {
    display: none;
  }
}

/* ========================================
   🛠️ UTILITY CLASSES (from tokens.css)
   ======================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus-visible {
  outline: 2px solid #BE1F48;
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* ========================================
   🎞️ KEYFRAME ANIMATIONS (from tokens.css)
   ======================================== */

@keyframes naily-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes naily-slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes naily-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes naily-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* ========================================
   🔄 LEGACY VARIABLE MAPPINGS
   ======================================== */

/* Map legacy variables to new unified system for backwards compatibility */
:root {
  /* Legacy primary colors */
  --primary-color: var(--naily-primary-500);
  --primary-light: var(--naily-primary-200);
  --primary-dark: var(--naily-primary-600);
  --accent-color: var(--naily-accent);
  
  /* Legacy neutral colors */
  --neutral-50: var(--naily-gray-50);
  --neutral-100: var(--naily-gray-100);
  --neutral-200: var(--naily-gray-200);
  --neutral-300: var(--naily-gray-300);
  --neutral-400: var(--naily-gray-400);
  --neutral-500: var(--naily-gray-500);
  --neutral-600: var(--naily-gray-600);
  --neutral-700: var(--naily-gray-700);
  --neutral-800: var(--naily-gray-800);
  --neutral-900: var(--naily-gray-900);
  
  /* Legacy semantic colors */
  --success-color: var(--naily-success);
  --success-light: var(--naily-success);
  --error-color: var(--naily-error);
  --info-color: var(--naily-info);
  --white: var(--naily-white);
  --black: var(--naily-black);
  
  /* Legacy spacing */
  --space-1: var(--naily-space-1);
  --space-2: var(--naily-space-2);
  --space-3: var(--naily-space-3);
  --space-4: var(--naily-space-4);
  --space-5: var(--naily-space-5);
  --space-6: var(--naily-space-6);
  --space-8: var(--naily-space-8);
  --space-10: var(--naily-space-10);
  --space-12: var(--naily-space-12);
  --space-16: var(--naily-space-16);
  --space-20: var(--naily-space-20);
  --space-24: var(--naily-space-24);
  --space-32: var(--naily-space-32);
  
  /* Legacy shadows */
  --shadow-xs: var(--naily-shadow-xs);
  --shadow-sm: var(--naily-shadow-sm);
  --shadow-md: var(--naily-shadow-md);
  --shadow-lg: var(--naily-shadow-lg);
  --shadow-xl: var(--naily-shadow-xl);
  --shadow-2xl: var(--naily-shadow-2xl);
  --shadow-inner: var(--naily-shadow-inner);
  
  /* Legacy font sizes */
  --font-size-xs: var(--naily-text-xs);
  --font-size-sm: var(--naily-text-sm);
  --font-size-base: var(--naily-text-base);
  --font-size-lg: var(--naily-text-lg);
  --font-size-xl: var(--naily-text-xl);
  --font-size-2xl: var(--naily-text-2xl);
  --font-size-3xl: var(--naily-text-3xl);
  --font-size-4xl: var(--naily-text-4xl);
  --font-size-5xl: var(--naily-text-5xl);
  --font-size-6xl: var(--naily-text-6xl);
  --font-size-7xl: var(--naily-text-7xl);
  
  /* Legacy border radius */
  --border-radius-xs: var(--naily-radius-sm);
  --border-radius-sm: var(--naily-radius-md);
  --border-radius: var(--naily-radius);
  --border-radius-lg: var(--naily-radius-lg);
  --border-radius-xl: var(--naily-radius-xl);
  --border-radius-2xl: var(--naily-radius-2xl);
  --border-radius-full: var(--naily-radius-full);
  
  /* Legacy z-index */
  --z-0: var(--naily-z-0);
  --z-10: var(--naily-z-10);
  --z-20: var(--naily-z-20);
  --z-30: var(--naily-z-30);
  --z-40: var(--naily-z-40);
  --z-50: var(--naily-z-50);
  --z-dropdown: var(--naily-z-dropdown);
  --z-sticky: var(--naily-z-sticky);
  --z-fixed: var(--naily-z-fixed);
  --z-modal-backdrop: var(--naily-z-modal-backdrop);
  --z-modal: var(--naily-z-modal);
  --z-popover: var(--naily-z-popover);
  --z-tooltip: var(--naily-z-tooltip);
  --z-toast: var(--naily-z-toast);
  
  /* Legacy transitions */
  --transition-fast: var(--naily-transition-fast);
  --transition: var(--naily-transition);
  --transition-slow: var(--naily-transition-slow);
  
  /* Legacy gradients */
  --gradient-primary: var(--naily-gradient-primary);
  --gradient-hero: var(--naily-gradient-hero);
  --gradient-card: var(--naily-gradient-card);
  --gradient-hover: var(--naily-gradient-hover);
  
  /* Blog-specific legacy mappings */
  --blog-primary: var(--naily-primary-500);
  --blog-primary-dark: var(--naily-primary-700);
  --blog-primary-light: var(--naily-accent-light);
  --blog-accent: var(--naily-secondary);
  --blog-accent-light: var(--naily-secondary-light);
  
  /* Bootstrap variable overrides */
  --bs-primary: var(--naily-primary-500);
  --bs-primary-rgb: 190, 31, 72;
  --bs-secondary: var(--naily-gray-600);
  --bs-success: var(--naily-success);
  --bs-warning: var(--naily-warning);
  --bs-danger: var(--naily-error);
  --bs-info: var(--naily-info);
  --bs-light: var(--naily-gray-100);
  --bs-dark: var(--naily-gray-900);
  
  /* Bootstrap button variables */
  --bs-btn-bg: var(--naily-primary-500);
  --bs-btn-border-color: var(--naily-primary-500);
  --bs-btn-hover-bg: var(--naily-primary-600);
  --bs-btn-hover-border-color: var(--naily-primary-600);
  --bs-btn-active-bg: var(--naily-primary-700);
  --bs-btn-active-border-color: var(--naily-primary-700);
}

/* ========================================
   🔚 END OF CONSOLIDATED VARIABLES
   ======================================== */

/**
 * Usage Guidelines:
 * 
 * 1. Always prefer --naily-* variables for new code
 * 2. Legacy variables are provided for backwards compatibility only
 * 3. Use semantic color names (success, warning, error) over specific colors
 * 4. Follow the T-shirt sizing convention (xs, sm, md, lg, xl, 2xl)
 * 5. Use spacing scale consistently across components
 * 6. Respect the z-index hierarchy for layering components
 * 7. Use transition variables for consistent animations
 * 8. Test in high contrast and reduced motion modes
 * 
 * Migration Path:
 * 1. Import this file instead of individual variable files
 * 2. Gradually replace legacy variable usage with --naily-* versions
 * 3. Remove old variable files once migration is complete
 * 4. Update component documentation to reference new variables
 */
/**
 * ========================================
 * 统一骨架动画配置文件
 * Unified Skeleton Animation Configuration
 * ========================================
 *
 * 此文件定义了整个项目的骨架屏（Skeleton）动画的统一配色和样式
 * 所有骨架组件必须使用此文件中定义的 CSS 变量
 *
 * 颜色来源：src/assets/css/consolidated-variables.css
 * - --naily-primary-50: #fef2f2 (淡粉50)
 * - --naily-primary-100: #fee2e2 (淡粉100)
 */

:root {
  /* ========================================
     骨架动画颜色配置
     ======================================== */

  /* 主背景色 - 使用 Naily 淡粉50 */
  --skeleton-bg-primary: var(--naily-primary-50, #fef2f2);

  /* 高亮色 - 使用 Naily 淡粉100 */
  --skeleton-bg-highlight: var(--naily-primary-100, #fee2e2);

  /* 半透明高亮色 - 用于波浪动画（白色，避免看起來像深紅色） */
  --skeleton-shimmer-color: rgba(255, 255, 255, 0.7);

  /* ========================================
     骨架动画参数配置
     ======================================== */

  /* 动画持续时间 */
  --skeleton-animation-duration: 2s;
  --skeleton-animation-duration-fast: 1.5s;
  --skeleton-animation-duration-slow: 2.5s;

  /* 边框圆角 */
  --skeleton-border-radius: 4px;
  --skeleton-border-radius-sm: 2px;
  --skeleton-border-radius-lg: 8px;
  --skeleton-border-radius-xl: 12px;
  --skeleton-border-radius-full: 50%;

  /* ========================================
     骨架渐变配置
     ======================================== */

  /* 线性渐变 - 用于 pulse 动画 */
  --skeleton-gradient-linear: linear-gradient(
    90deg,
    var(--skeleton-bg-primary) 25%,
    var(--skeleton-bg-highlight) 50%,
    var(--skeleton-bg-primary) 75%
  );

  /* 波浪渐变 - 用于 shimmer 动画 */
  /* 注意：使用 rgba(254,242,242,0) 而非 transparent，因 transparent=rgba(0,0,0,0)
     在漸層插值時會產生暗色帶。使用與底色 --skeleton-bg-primary(#fef2f2) 同色相的零透明度。 */
  --skeleton-gradient-shimmer: linear-gradient(
    90deg,
    rgba(254, 242, 242, 0),
    var(--skeleton-shimmer-color),
    rgba(254, 242, 242, 0)
  );
}

/* ========================================
   高对比度模式支持
   ======================================== */

@media (prefers-contrast: high) {
  :root {
    /* 高对比度模式使用黑白渐变 */
    --skeleton-bg-primary: #f0f0f0;
    --skeleton-bg-highlight: #d0d0d0;
    --skeleton-shimmer-color: rgba(0, 0, 0, 0.1);
  }
}

/* ========================================
   减少动画模式支持
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    /* 禁用动画 */
    --skeleton-animation-duration: 0ms;
    --skeleton-animation-duration-fast: 0ms;
    --skeleton-animation-duration-slow: 0ms;
  }
}

/* ========================================
   基础骨架样式类
   ======================================== */

/* 基础骨架容器 */
.skeleton-unified {
  background: #fef2f2;
  background: var(--skeleton-bg-primary);
  background-image: linear-gradient(
    90deg,
    #fef2f2 25%,
    #fee2e2 50%,
    #fef2f2 75%
  );
  background-image: var(--skeleton-gradient-linear);
  background-size: 200% 100%;
  border-radius: 4px;
  border-radius: var(--skeleton-border-radius);
  animation: skeleton-shimmer 2s infinite linear;
  animation: skeleton-shimmer var(--skeleton-animation-duration) infinite linear;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* Shimmer 动画 */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Pulse 动画 */
@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

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

/* 圆形骨架 */
.skeleton-unified-circular {
  border-radius: 50%;
  border-radius: var(--skeleton-border-radius-full);
}

/* 文本骨架 */
.skeleton-unified-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-unified-text:last-child {
  margin-bottom: 0;
}

/* 波浪覆盖层 */
.skeleton-unified-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(254, 242, 242, 0),
    rgba(255, 255, 255, 0.7),
    rgba(254, 242, 242, 0)
  );
  background: var(--skeleton-gradient-shimmer);
  animation: skeleton-wave 1.5s infinite;
  animation: skeleton-wave var(--skeleton-animation-duration-fast) infinite;
  pointer-events: none;
}

@keyframes skeleton-wave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ========================================
   打印样式
   ======================================== */

@media print {
  .skeleton-unified,
  .skeleton-unified-wave {
    display: none;
  }
}

/* ========================================
   性能优化
   ======================================== */

.skeleton-unified {
  will-change: background-position;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* ========================================
   使用说明
   ======================================== */

/**
 * CSS 使用方法：
 *
 * 1. 基础使用：
 *    .my-skeleton {
 *      background: var(--skeleton-bg-primary);
 *    }
 *
 * 2. 渐变背景：
 *    .my-skeleton {
 *      background: var(--skeleton-gradient-linear);
 *    }
 *
 * 3. 完整骨架：
 *    <div class="skeleton-unified" style="width: 100px; height: 20px;"></div>
 */

/**
 * JavaScript 使用方法：
 *
 * 1. 在 JS/JSX 中使用 CSS 变量：
 *
 *    const skeletonStyle = {
 *      backgroundColor: 'var(--skeleton-bg-primary)',
 *      borderRadius: 'var(--skeleton-border-radius)'
 *    };
 *
 * 2. 渐变背景：
 *
 *    const skeletonStyle = {
 *      background: 'var(--skeleton-gradient-linear)',
 *      backgroundSize: '200% 100%',
 *      animation: 'skeleton-shimmer var(--skeleton-animation-duration) infinite linear'
 *    };
 */

/* ========================================
   Naily 專案主要樣式入口
   ======================================== */

/* 導入模組化CSS系統 */
/* @import './assets/css/modules/index.css'; */

/* 導入表單工具樣式 */
/* @import './assets/css/utils/FormUtils.css'; */

/* 導入表單響應式模組 */
/* @import './assets/css/modules/form-responsive.css'; */

/* 導入 Modal 動畫修復 - 解決動畫慢一拍問題 */
/* @import './assets/css/modal-animation-fix.css'; - 已刪除管理端相關 CSS */


/* Modal 動畫隔離現已整合至 UnifiedAdminModal 內建系統 */
/* 不再需要額外導入 modal-isolation-base.css */


/* CSS 隔離機制 */
.css-isolation-container {
  isolation: isolate;
}

/* 確保特定頁面的樣式不會影響其他頁面 */
.page-specific-styles {
  contain: style;
}

/* Ant Design - TO BE REMOVED */
/* 修復 Ant Design Tooltip 定位問題 */
/*
.ant-tooltip {
  z-index: var(--z-emergency);
}
*/

/* 向後兼容的舊版樣式類別 */
.cursor-pointer {
  cursor: pointer;
}

/* 僅對需要的元素應用過渡效果，避免全域影響 */
/* Ant Design - TO BE REMOVED */
/* .transition-all:not([class*="ant-"]) {
  transition: all var(--transition-base) var(--transition-ease);
} */


/* 確保卡片懸停效果 - 僅針對特定類別 */
.card.hover-effect:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 自定義間距 */
.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 1rem;
}

.gap-4 {
  gap: 1.5rem;
}

/**
 * 统一的 Z-Index 层级管理系统
 * 解决 Modal backdrop 显示问题和全项目 z-index 混乱问题
 * 
 * 设计原则:
 * 1. 使用语义化命名，易于理解和维护
 * 2. 层级间隔合理，便于插入新层级
 * 3. 避免过度使用 !important
 * 4. 提供 CSS 变量支持，便于统一管理
 */

:root {
  /* ================================
     基础层级 (0-99)
     ================================ */
  --z-base: 0;
  --z-behind: -1;
  --z-low: 1;
  --z-normal: 10;
  --z-raised: 20;
  --z-elevated: 30;

  /* ================================
     内容层级 (100-999)
     ================================ */
  --z-content: 100;
  --z-content-overlay: 200;
  --z-content-popup: 300;
  --z-content-dropdown: 400;
  --z-content-tooltip: 500;

  /* ================================
     界面层级 (1000-1999)
     ================================ */
  --z-ui-navbar: 1000;
  --z-ui-sidebar: 1010;
  --z-ui-floating-button: 1020;
  --z-ui-sticky: 1030;
  --z-ui-fixed: 1040;

  /* ================================
     覆盖层级 (2000-2999)
     ================================ */
  --z-overlay: 2000;
  --z-overlay-backdrop: 2010;
  --z-overlay-content: 2020;
  --z-overlay-loading: 2030;

  /* ================================
     Modal 系统层级 (3000-3999)
     ================================ */
  --z-modal-backdrop: 3000;
  --z-modal: 3010;
  --z-modal-dialog: 3020;
  --z-modal-content: 3030;
  --z-modal-header: 3040;
  --z-modal-close-btn: 3050;

  /* 特殊 Modal 层级 - 用于特殊用途的 Modal */
  --z-modal-critical: 3100;      /* 系统级 Modal (如维护通知、紧急公告) */
  --z-modal-fullscreen: 3200;    /* 全屏 Modal (如图片查看器、视频播放器) */
  --z-modal-nested: 3300;        /* 嵌套 Modal (Modal 内部再弹出的 Modal) */

  /* ================================
     弹出层级 (4000-4999)
     ================================ */
  --z-popover: 4000;
  --z-dropdown: 4010;
  --z-select-options: 4020;
  --z-date-picker: 4030;
  --z-autocomplete: 4040;
  --z-tooltip: 4050;

  /* ================================
     通知层级 (5000-5999)
     ================================ */
  --z-notification: 5000;
  --z-toast: 5010;
  --z-alert: 5020;
  --z-banner: 5030;

  /* ================================
     系统层级 (6000-9999)
     ================================ */
  --z-system-loading: 6000;
  --z-system-error: 6010;
  --z-system-maintenance: 6020;
  --z-debug: 9000;
  --z-dev-tools: 9010;

  /* ================================
     最高层级 (10000+) - 谨慎使用
     ================================ */
  --z-emergency: 10000;
  --z-critical: 10010;

  /* ================================
     特殊層級補充 - 用於特定組件
     ================================ */
  --z-image-zoom: 1001;          /* 圖片放大效果 */
  --z-image-zoom-overlay: 1002;  /* 圖片放大遮罩 */
  --z-modal-stacked: 1055;       /* 堆疊 Modal 中間層 */
  --z-modal-stacked-2: 1061;     /* 堆疊 Modal 第二層對話框 */
  --z-modal-stacked-3: 1062;     /* 堆疊 Modal 第三層內容 */
  --z-voting-special: 1070;      /* 投票特殊層級 */
  --z-product-filter: 1080;      /* 產品篩選器 */
  --z-navbar-mega-menu: 1300;    /* Navbar 大型選單 */
  --z-legacy-999: 999;           /* 舊版 999 層級，逐步淘汰 */
  --z-legacy-1031: 1031;         /* 舊版 1031 層級，逐步淘汰 */
  --z-legacy-1051: 1051;         /* 舊版 1051 層級，逐步淘汰 */
  --z-legacy-1052: 1052;         /* 舊版 1052 層級，逐步淘汰 */
  --z-legacy-1059: 1059;         /* 舊版 1059 層級，逐步淘汰 */
  --z-legacy-9998: 9998;         /* 舊版 9998 層級，逐步淘汰 */
  --z-legacy-10001: 10001;       /* 舊版 10001 層級，逐步淘汰 */
  --z-legacy-10002: 10002;       /* 舊版 10002 層級，逐步淘汰 */
}

/* ================================
   通用层级类 - 基于语义化命名
   ================================ */

/* 基础层级 */
.z-base { z-index: 0; z-index: var(--z-base); }
.z-behind { z-index: -1; z-index: var(--z-behind); }
.z-low { z-index: 1; z-index: var(--z-low); }
.z-normal { z-index: 10; z-index: var(--z-normal); }
.z-raised { z-index: 20; z-index: var(--z-raised); }
.z-elevated { z-index: 30; z-index: var(--z-elevated); }

/* 内容层级 */
.z-content { z-index: 100; z-index: var(--z-content); }
.z-content-overlay { z-index: 200; z-index: var(--z-content-overlay); }
.z-content-popup { z-index: 300; z-index: var(--z-content-popup); }
.z-content-dropdown { z-index: 400; z-index: var(--z-content-dropdown); }
.z-content-tooltip { z-index: 500; z-index: var(--z-content-tooltip); }

/* 界面层级 */
.z-ui-navbar { z-index: 1000; z-index: var(--z-ui-navbar); }
.z-ui-sidebar { z-index: 1010; z-index: var(--z-ui-sidebar); }
.z-ui-floating-button { z-index: 1020; z-index: var(--z-ui-floating-button); }
.z-ui-sticky { z-index: 1030; z-index: var(--z-ui-sticky); }
.z-ui-fixed { z-index: 1040; z-index: var(--z-ui-fixed); }

/* 覆盖层级 */
.z-overlay { z-index: 2000; z-index: var(--z-overlay); }
.z-overlay-backdrop { z-index: 2010; z-index: var(--z-overlay-backdrop); }
.z-overlay-content { z-index: 2020; z-index: var(--z-overlay-content); }
.z-overlay-loading { z-index: 2030; z-index: var(--z-overlay-loading); }

/* Modal 系统 */
.z-modal-backdrop { z-index: 3000; z-index: var(--z-modal-backdrop); }
.z-modal { z-index: 3010; z-index: var(--z-modal); }
.z-modal-dialog { z-index: 3020; z-index: var(--z-modal-dialog); }
.z-modal-content { z-index: 3030; z-index: var(--z-modal-content); }
.z-modal-header { z-index: 3040; z-index: var(--z-modal-header); }
.z-modal-close-btn { z-index: 3050; z-index: var(--z-modal-close-btn); }

/* 特殊 Modal 工具类 */
.modal-critical,
.z-modal-critical {
  z-index: 3100;
  z-index: var(--z-modal-critical);
  position: relative;
}

.modal-fullscreen,
.z-modal-fullscreen {
  z-index: 3200;
  z-index: var(--z-modal-fullscreen);
  position: relative;
}

.modal-nested,
.z-modal-nested {
  z-index: 3300;
  z-index: var(--z-modal-nested);
  position: relative;
}

/* 弹出层级 */
.z-popover { z-index: 4000; z-index: var(--z-popover); }
.z-dropdown { z-index: 4010; z-index: var(--z-dropdown); }
.z-select-options { z-index: 4020; z-index: var(--z-select-options); }
.z-date-picker { z-index: 4030; z-index: var(--z-date-picker); }
.z-autocomplete { z-index: 4040; z-index: var(--z-autocomplete); }
.z-tooltip { z-index: 4050; z-index: var(--z-tooltip); }

/* 通知层级 */
.z-notification { z-index: 5000; z-index: var(--z-notification); }
.z-toast { z-index: 5010; z-index: var(--z-toast); }
.z-alert { z-index: 5020; z-index: var(--z-alert); }
.z-banner { z-index: 5030; z-index: var(--z-banner); }

/* 系统层级 */
.z-system-loading { z-index: 6000; z-index: var(--z-system-loading); }
.z-system-error { z-index: 6010; z-index: var(--z-system-error); }
.z-system-maintenance { z-index: 6020; z-index: var(--z-system-maintenance); }
.z-debug { z-index: 9000; z-index: var(--z-debug); }
.z-dev-tools { z-index: 9010; z-index: var(--z-dev-tools); }

/* 紧急层级 */
.z-emergency { z-index: 10000; z-index: var(--z-emergency); }
.z-critical { z-index: 10010; z-index: var(--z-critical); }

/* ================================
   修复当前 Modal 系统的样式
   ================================ */

/* Bootstrap Modal 修復 - 使用統一 z-index 但移除 !important */
/* 讓 Bootstrap 原生樣式優先工作，只在需要時才覆蓋 */

.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
body .modal-backdrop {
  position: fixed;
  z-index: 3000;
  z-index: var(--z-modal-backdrop);
}

.modal,
.modal.fade,
.modal.show,
body .modal {
  z-index: 3010;
  z-index: var(--z-modal);
  position: fixed;
}

/* fade 動畫期間的層級 - 移除 !important */
.modal.fade:not(.show) {
  z-index: 2900;
}

.modal-backdrop.fade:not(.show) {
  z-index: 2800;
}

/* fade 動畫期間確保內容不會被遮擋 - 移除此規則，使用全局 modal z-index 變數 */
/* 問題：z-index 2950 比 backdrop 的 3000 還低，導致 modal 內容被 backdrop 遮擋 */
/* .modal.fade .modal-dialog,
.modal.fade .modal-content {
  z-index: 2950;
  position: relative;
} */

.modal .modal-dialog,
body .modal .modal-dialog {
  z-index: 3020;
  z-index: var(--z-modal-dialog);
  position: relative;
}

.modal .modal-content,
body .modal .modal-content {
  z-index: 3030;
  z-index: var(--z-modal-content);
  position: relative;
}

.modal .modal-header,
body .modal .modal-header {
  z-index: 3040;
  z-index: var(--z-modal-header);
  position: relative;
}

.modal .btn-close,
.modal .close,
body .modal .btn-close,
body .modal .close {
  z-index: 3050;
  z-index: var(--z-modal-close-btn);
  position: relative;
}

/* ================================
   Navbar 系统修复 - 降低过高的 z-index
   ================================ */

/* Navbar 主体使用合理的层级 */
.navbar,
.navbar-nav,
.navbar-brand {
  z-index: 1000;
  z-index: var(--z-ui-navbar);
}

/* Navbar 下拉選單 - 使用弹出层级 */
.navbar .dropdown-menu,
.navbar .nav-item .dropdown-menu,
.naily-navbar-container .dropdown-menu,
.enhanced-dropdown-menu {
  z-index: 4010;
  z-index: var(--z-dropdown);
  position: absolute;
}

/* Enhanced Dropdown 特殊處理 */
.enhanced-dropdown-menu.show,
.dropdown-menu.show {
  z-index: 4010;
  z-index: var(--z-dropdown);
}

/* 強制確保導航下拉選單在所有頁面都能正常顯示 */
.naily-navbar-container .enhanced-dropdown-menu,
.navbar .enhanced-dropdown-menu,
.enhanced-nav-dropdown .position-absolute {
  z-index: 4010;
  z-index: var(--z-dropdown);
  position: absolute;
}

/* 特別處理聯絡我們頁面可能的衝突 */
.contact-main-wrapper .enhanced-dropdown-menu,
.contact-container .enhanced-dropdown-menu,
[class*="contact"] .enhanced-dropdown-menu {
  z-index: 4010;
  z-index: var(--z-dropdown);
  position: absolute;
}

/* 修復聯絡我們頁面的 sticky-top 元素造成的 stacking context 問題 */
/* 降低 sticky-top 的 z-index，確保不會遮擋 navbar 下拉選單 */
.bg-light .sticky-top {
  z-index: 100;
  z-index: var(--z-content); /* 使用內容層級，低於 dropdown (4010) */
}

/* 確保聯絡我們頁面的背景不會造成 stacking context 問題 */
.contact-form-wrapper {
  z-index: 0;
  z-index: var(--z-base); /* 使用基礎 z-index */
  position: relative;
}

/* 確保 navbar dropdown 能夠覆蓋 sticky 元素 */
.navbar .enhanced-dropdown-menu,
.naily-navbar-container .enhanced-dropdown-menu {
  z-index: 4010;
  z-index: var(--z-dropdown);
  position: absolute;
}

/* 在聯絡我們頁面特別強化 dropdown 的優先級 */
.contact-form-wrapper .navbar .enhanced-dropdown-menu,
.bg-light .navbar .enhanced-dropdown-menu,
body .contact-form-wrapper .enhanced-dropdown-menu {
  z-index: 4010;
  z-index: var(--z-dropdown);
  position: absolute;
}

/* ================================
   全域修復：確保所有 Navbar 下拉選單使用統一 z-index
   ================================ */

/* 所有 Navbar 相關下拉選單使用統一的 dropdown 層級 */
.naily-navbar-container .enhanced-dropdown-menu,
.naily-navbar-container .dropdown-menu,
.navbar .enhanced-dropdown-menu,
.navbar .dropdown-menu {
  z-index: 4010;
  z-index: var(--z-dropdown);
  position: absolute;
}

/* 購物車下拉選單使用統一層級 */
.enhanced-cart-dropdown,
.enhanced-cart-dropdown .MuiPaper-root,
.enhanced-cart-dropdown .MuiPopover-paper {
  z-index: 4010;
  z-index: var(--z-dropdown);
}

/* 會員選單(FloatingIslandMenu)使用統一層級 */
.navbar .position-absolute,
.navbar .user-menu-dropdown {
  z-index: 4010;
  z-index: var(--z-dropdown);
  position: absolute;
}

/* 確保 navbar 本身的 stacking context 正確 */
.contact-form-wrapper .navbar,
.bg-light .navbar {
  z-index: 1000;
  z-index: var(--z-ui-navbar);
  position: relative;
}

/* Sidebar 按钮修复 - 降低过高的 z-index 确保不覆盖 Modal */
.sidebar-buttons,
.css-isolation-container .sidebar-buttons,
.naily-navbar-container .sidebar-buttons,
[class*="sidebarButtons"] {
  z-index: 1020;
  z-index: var(--z-ui-floating-button); /* 1020 - 低于 Modal backdrop */
  position: fixed;
}

/* 强制覆盖任何可能存在的过高 z-index 值 */
body .sidebar-buttons,
html .sidebar-buttons,
.app-container .sidebar-buttons {
  z-index: 1020;
  z-index: var(--z-ui-floating-button); /* 确保不超过 1020 */
}

.sidebar-buttons button,
.css-isolation-container .sidebar-buttons button,
.naily-navbar-container .sidebar-buttons button,
.sidebar-pink-button,
.sidebar-brand-button,
[class*="sidebar-pink-button"],
[class*="sidebar-brand-button"] {
  z-index: 1020;
  z-index: var(--z-ui-floating-button);
  position: relative;
}

/* 強制覆蓋 SidebarButtons.module.css 中的 99999 值 */
:global(.sidebar-pink-button.sidebar-pink-button.sidebar-pink-button.btn),
:global(.sidebar-brand-button.sidebar-brand-button.sidebar-brand-button.btn) {
  z-index: 1020;
  z-index: var(--z-ui-floating-button);
}

/* ================================
   通知和 Toast 系统
   注意：react-hot-toast 使用 containerStyle inline style 設定 z-index，
   [data-rht-toaster] 僅作備援（inline style 優先級較高）
   ================================ */
.notification-toast,
.toast-container,
[data-rht-toaster] {
  z-index: 5010;
  z-index: var(--z-toast);
}

/* ================================
   加载动画和系统覆盖层
   ================================ */
.loading-spinner,
.loading-overlay {
  z-index: 6000;
  z-index: var(--z-system-loading);
}

.error-boundary,
.error-overlay {
  z-index: 6010;
  z-index: var(--z-system-error);
}

/* ================================
   调试模式 - 可视化层级系统
   ================================ */
.z-index-debug * {
  outline: 2px solid red;
  position: relative;
}

.z-index-debug *:before {
  content: "z:" attr(data-z-index);
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  color: white;
  font-size: 10px;
  padding: 2px;
  z-index: 9000;
  z-index: var(--z-debug);
}

/* ================================
   媒体查询适配
   ================================ */
@media (max-width: 768px) {
  /* 移动设备上可能需要调整某些层级 */
  :root {
    /* 在移动设备上，某些元素可能需要不同的层级 */
    --z-ui-floating-button: 1050; /* 提高移动设备浮动按钮层级 */
  }
}

/* ================================
   实用工具类 - 快速修复问题元素
   ================================ */

/* 强制置于最顶层 - 谨慎使用 */
.z-force-top {
  z-index: 10010;
  z-index: var(--z-critical);
  position: relative;
}

/* 强制置于最底层 */
.z-force-bottom {
  z-index: -1;
  z-index: var(--z-behind);
  position: relative;
}

/* 重置 z-index */
.z-reset {
  z-index: auto;
}

/* 隐藏元素 */
.z-hide {
  z-index: -1;
  z-index: var(--z-behind);
  opacity: 0;
  pointer-events: none;
}

/* ================================
   兼容性支持 - 逐步迁移使用
   ================================ */

/* 支持旧的 z-index 值，逐步迁移 */
.legacy-z-1050 { z-index: 3010; z-index: var(--z-modal); }
.legacy-z-1040 { z-index: 3000; z-index: var(--z-modal-backdrop); }
.legacy-z-9999 { z-index: 1020; z-index: var(--z-ui-floating-button); }
.legacy-z-99999 { z-index: 10000; z-index: var(--z-emergency); }

/* ================================
   性能优化 - contain 属性
   ================================ */

/* 为高层级元素添加 contain 属性，提高性能 */
.z-modal,
.z-overlay,
.z-toast {
  contain: layout style paint;
}

.z-modal-backdrop,
.z-overlay-backdrop {
  contain: layout style;
}
/**
 * SystemMaintenanceOverlay.css
 * Prada 風格系統維護全屏畫面
 *
 * 設計原則：
 * - 極簡主義，不使用 Emoji
 * - Prada 品牌色彩系統
 * - Helvetica Neue 字體
 * - 優雅的動畫過渡
 * - 響應式設計
 */

/* ==================== Prada 色彩變數 ==================== */
:root {
  --prada-black: #000000;
  --prada-white: #FFFFFF;
  --prada-gray-light: #F5F5F5;
  --prada-gray-medium: #E0E0E0;
  --prada-gray-dark: #666666;
  --prada-brand-red: #8B0000;
  --prada-brand-red-dark: #6B0000;
  --prada-shadow-medium: rgba(0, 0, 0, 0.1);
}

/* ==================== 全屏遮罩層 ==================== */
.maintenance-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 6020;
  z-index: var(--z-system-maintenance, 6020);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: naily-fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.maintenance-overlay.closing {
  animation: naily-fadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== 主卡片容器 ==================== */
.maintenance-card {
  background: #FFFFFF;
  background: var(--prada-white);
  max-width: 520px;
  width: 100%;
  padding: 48px 40px;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  text-align: center;
  animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* ==================== 關閉按鈕 ==================== */
.maintenance-close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #666666;
  color: var(--prada-gray-dark);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0;
  z-index: var(--z-normal);
}

.maintenance-close-button:hover {
  background: #F5F5F5;
  background: var(--prada-gray-light);
  color: #000000;
  color: var(--prada-black);
}

.maintenance-close-button:active {
  background: #E0E0E0;
  background: var(--prada-gray-medium);
  transform: scale(0.95);
}

.maintenance-close-button:focus {


  outline: 2px solid currentColor;


  outline-offset: 2px;


}


.maintenance-close-button:focus:not(:focus-visible) {


  outline: none;


}


.maintenance-close-button:focus-visible {
  outline: 2px solid #8B0000;
  outline: 2px solid var(--prada-brand-red);
  outline-offset: 2px;
}

/* ==================== 圖標區域 ==================== */
.maintenance-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.maintenance-icon svg {
  width: 100%;
  height: 100%;
}

/* ==================== 標題區 ==================== */
.maintenance-title {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #000000;
  color: var(--prada-black);
  margin-bottom: 8px;
  line-height: 1.3;
}

.maintenance-subtitle {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #666666;
  color: var(--prada-gray-dark);
  margin-bottom: 32px;
}

/* ==================== 內文區 ==================== */
.maintenance-description {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: #666666;
  color: var(--prada-gray-dark);
  letter-spacing: 0.3px;
  margin: 32px 0;
  text-align: center;
}

.maintenance-description p {
  margin: 0 0 12px 0;
}

.maintenance-description p:last-child {
  margin-bottom: 0;
}

/* ==================== 按鈕區域 ==================== */
.maintenance-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 32px 0 24px;
}

.maintenance-button {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid #8B0000;
  border: 1px solid var(--prada-brand-red);
  background: #8B0000;
  background: var(--prada-brand-red);
  color: #FFFFFF;
  color: var(--prada-white);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
  outline: none;
}

.maintenance-button:hover {
  background: #6B0000;
  background: var(--prada-brand-red-dark);
  border-color: #6B0000;
  border-color: var(--prada-brand-red-dark);
  box-shadow: 0 4px 12px rgba(139, 0, 0, 0.25);
  transform: translateY(-1px);
}

.maintenance-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(139, 0, 0, 0.2);
}

.maintenance-button:focus {


  outline: 2px solid currentColor;


  outline-offset: 2px;


}


.maintenance-button:focus:not(:focus-visible) {


  outline: none;


}


.maintenance-button:focus-visible {
  outline: 2px solid #8B0000;
  outline: 2px solid var(--prada-brand-red);
  outline-offset: 2px;
}

.maintenance-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.maintenance-button-secondary {
  background: transparent;
  color: #8B0000;
  color: var(--prada-brand-red);
  border: 1px solid #8B0000;
  border: 1px solid var(--prada-brand-red);
}

.maintenance-button-secondary:hover {
  background: #F5F5F5;
  background: var(--prada-gray-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.maintenance-button-secondary:active {
  background: #E0E0E0;
  background: var(--prada-gray-medium);
}

/* ==================== 底部文字 ==================== */
.maintenance-footer-text {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 13px;
  color: #666666;
  color: var(--prada-gray-dark);
  letter-spacing: 0.3px;
  margin-top: 32px;
  opacity: 0.8;
  line-height: 1.6;
}

/* ==================== 載入狀態 ==================== */
.maintenance-button-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.maintenance-button-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid #FFFFFF;
  border: 2px solid var(--prada-white);
  border-radius: 50%;
  border-top-color: transparent;
  animation: naily-spin 0.6s linear infinite;
}

.maintenance-button-secondary.maintenance-button-loading::after {
  border-color: #8B0000;
  border-color: var(--prada-brand-red);
  border-top-color: transparent;
}

/* ==================== 動畫定義 ==================== */
@keyframes naily-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes naily-fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

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

@keyframes naily-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==================== 響應式設計 ==================== */

/* 平板及以下 (≤ 768px) */
@media (max-width: 768px) {
  .maintenance-card {
    max-width: 400px;
    padding: 36px 28px;
  }

  .maintenance-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
  }

  .maintenance-title {
    font-size: 20px;
    letter-spacing: 2px;
  }

  .maintenance-subtitle {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .maintenance-description {
    font-size: 14px;
    margin: 24px 0;
  }

  .maintenance-buttons {
    flex-direction: column;
    gap: 12px;
    margin: 24px 0 20px;
  }

  .maintenance-button {
    width: 100%;
    padding: 16px 24px;
  }

  .maintenance-footer-text {
    font-size: 12px;
    margin-top: 24px;
  }
}

/* 小型手機 (≤ 375px) */
@media (max-width: 375px) {
  .maintenance-card {
    padding: 28px 20px;
  }

  .maintenance-title {
    font-size: 18px;
    letter-spacing: 1.5px;
  }

  .maintenance-subtitle {
    font-size: 15px;
  }

  .maintenance-description {
    font-size: 13px;
  }

  .maintenance-button {
    font-size: 12px;
    padding: 14px 20px;
  }
}

/* 超大螢幕 (≥ 1200px) */
@media (min-width: 1200px) {
  .maintenance-card {
    max-width: 560px;
    padding: 56px 48px;
  }

  .maintenance-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 28px;
  }

  .maintenance-title {
    font-size: 26px;
  }

  .maintenance-subtitle {
    font-size: 19px;
  }

  .maintenance-description {
    font-size: 16px;
  }
}

/* ==================== 可訪問性 ==================== */

/* 減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {
  .maintenance-overlay,
  .maintenance-card,
  .maintenance-button {
    animation: none;
    transition: none;
  }
}

/* 高對比度模式 */
@media (prefers-contrast: high) {
  .maintenance-card {
    border: 2px solid #000000;
    border: 2px solid var(--prada-black);
  }

  .maintenance-button {
    border-width: 2px;
  }
}

/* 深色模式支援 (可選) */
@media (prefers-color-scheme: dark) {
  /* 保持淺色主題，符合 Prada 品牌識別 */
  /* 如需深色模式，可在此添加樣式 */
}

/* ==================== 打印樣式 ==================== */
@media print {
  .maintenance-overlay {
    display: none;
  }
}

/**
 * PreRegBanner 樣式
 * 
 * @description 
 * 預註冊Banner的專用樣式，包含動畫效果和響應式設計
 */

/* ==================== Banner 主體樣式 ==================== */

.prereg-banner {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--z-modal);
  animation: slideDown 0.5s ease-out forwards;
  transform-origin: top center;
}

.prereg-banner--closing {
  animation: slideUp 0.3s ease-in forwards;
}

.prereg-banner__alert {
  transition: all 0.3s ease;
}

/* ==================== 動畫效果 ==================== */

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

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

/* ==================== 圖示動畫 ==================== */

.prereg-banner__icon {
  animation: pulse 2s infinite ease-in-out;
}

.prereg-banner__icon:hover {
  animation-play-state: paused;
  transform: scale(1.2);
  transition: transform 0.2s ease;
}

/* ==================== 按鈕樣式 ==================== */

.prereg-banner__cta-btn {
  transition: all 0.2s ease;
  font-weight: 600;
}

.prereg-banner__cta-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.prereg-banner__cta-btn:active {
  transform: scale(0.98);
}

.prereg-banner__close-btn {
  transition: all 0.2s ease;
  border-radius: 50%;
}

.prereg-banner__close-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

.prereg-banner__close-btn:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* ==================== 響應式設計 ==================== */

/* 大螢幕 */
@media (min-width: 1200px) {
  .prereg-banner .container-fluid {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* 中等螢幕 */
@media (max-width: 991.98px) {
  .prereg-banner__alert {
    font-size: 0.9rem;
  }
  
  .prereg-banner .fw-bold {
    font-size: 0.95rem;
  }
}

/* 小螢幕 */
@media (max-width: 767.98px) {
  .prereg-banner {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
  
  .prereg-banner__alert {
    font-size: 0.85rem;
    padding: 12px 0;
  }
  
  .prereg-banner .fw-bold {
    font-size: 0.9rem;
  }
  
  .prereg-banner .small {
    font-size: 0.8rem;
  }
  
  /* 手機版按鈕調整 */
  .prereg-banner__cta-btn {
    font-size: 0.8rem;
    padding: 6px 14px;
  }
  
  /* 隱藏稍後按鈕在極小螢幕上 */
  @media (max-width: 575.98px) {
    .d-sm-inline-flex {
      display: none;
    }
  }
}

/* 超小螢幕 */
@media (max-width: 575.98px) {
  .prereg-banner__alert {
    font-size: 0.8rem;
    padding: 10px 0;
  }
  
  .prereg-banner .fw-bold {
    font-size: 0.85rem;
  }
  
  .prereg-banner__cta-btn {
    font-size: 0.75rem;
    padding: 5px 12px;
  }
  
  .prereg-banner__icon {
    width: 20px;
    height: 20px;
  }
}

/* 深色模式规则已移除 - 确保所有用户都看到统一的浅色界面 */

/* ==================== 無障礙設計 ==================== */

/* 高對比模式 */
@media (prefers-contrast: high) {
  .prereg-banner__alert {
    border: 2px solid rgba(255, 255, 255, 0.8);
  }
  
  .prereg-banner__cta-btn {
    border: 2px solid var(--naily-accent-light);
  }
  
  .prereg-banner__close-btn:focus {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
  }
}

/* 減少動畫 */
@media (prefers-reduced-motion: reduce) {
  .prereg-banner,
  .prereg-banner--closing,
  .prereg-banner__icon,
  .prereg-banner__cta-btn,
  .prereg-banner__close-btn {
    animation: none;
    transition: none;
  }
  
  .prereg-banner__icon:hover,
  .prereg-banner__cta-btn:hover,
  .prereg-banner__close-btn:hover {
    transform: none;
  }
}

/* ==================== 打印樣式 ==================== */

@media print {
  .prereg-banner {
    display: none;
  }
}

/* ==================== Z-index 管理 ==================== */

.prereg-banner {
  z-index: var(--z-modal); /* 確保在其他內容之上，但低於 Modal (1055) */
}

/* 如果需要在特定情況下提高優先級 */
.prereg-banner--priority {
  z-index: var(--z-modal-fullscreen);
}

/* ==================== 狀態指示器 ==================== */

.prereg-banner--success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.prereg-banner--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.prereg-banner--error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* ==================== 載入狀態 ==================== */

.prereg-banner--loading .prereg-banner__cta-btn {
  opacity: 0.7;
  cursor: not-allowed;
}

.prereg-banner--loading .prereg-banner__cta-btn:hover {
  transform: none;
}

/* ==================== 特殊效果 ==================== */

/* 背景光暈效果（可選） */
.prereg-banner--glow {
  box-shadow: 
    0 2px 20px rgba(233, 102, 135, 0.3),
    0 0 40px rgba(233, 102, 135, 0.1);
}

/* 漸變邊框效果（可選） */
.prereg-banner--gradient-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.5) 20%, 
    rgba(255, 255, 255, 0.8) 50%, 
    rgba(255, 255, 255, 0.5) 80%, 
    transparent 100%);
  animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}