/* ============================================================
   UI-UX-Pro-Max Design System
   AI Video Generation Platform — Vionow

   Light (User)  ➜  :root  默认亮色主题
   Dark  (Admin) ➜  .admin-theme / body.admin-mode  暗色主题
   ============================================================ */

/* ============================================================
   1. Light Theme (User Pages) — DEFAULT
   ============================================================ */

:root {
  /* --- Background Layers (Light — warm white) --- */
  --bg-root:        #F8F7FF;
  --bg-base:        #F3F1FC;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #FFFFFF;
  --bg-overlay:     #FFFFFF;
  --bg-hover:       rgba(124, 58, 237, 0.04);
  --bg-active:      rgba(124, 58, 237, 0.08);
  --bg-glass:       rgba(255, 255, 255, 0.75);
  --bg-glass-hover: rgba(255, 255, 255, 0.90);

  /* --- Border Colors (Light) --- */
  --border-subtle:   #F0F0F0;
  --border-default:  #E5E7EB;
  --border-strong:   #D1D5DB;
  --border-focus:    rgba(124, 58, 237, 0.45);

  /* --- Primary Color (Vivid Purple) — bold & creative --- */
  --primary-50:   #F5F3FF;
  --primary-100:  #EDE9FE;
  --primary-200:  #DDD6FE;
  --primary-300:  #C4B5FD;
  --primary-400:  #A78BFA;
  --primary-500:  #7C3AED;
  --primary-600:  #6D28D9;
  --primary-700:  #5B21B6;
  --primary-800:  #4C1D95;
  --primary-900:  #3B0764;

  /* --- Primary Glow / Alpha --- */
  --primary-glow-subtle:  rgba(124, 58, 237, 0.05);
  --primary-glow-light:   rgba(124, 58, 237, 0.10);
  --primary-glow-medium:  rgba(124, 58, 237, 0.16);
  --primary-glow-strong:  rgba(124, 58, 237, 0.28);

  /* --- Secondary Color (Hot Pink) --- */
  --secondary-400: #F472B6;
  --secondary-500: #EC4899;
  --secondary-600: #DB2777;
  --secondary-glow: rgba(236, 72, 153, 0.10);

  /* --- Accent Color (Cyan) --- */
  --accent-400:  #22D3EE;
  --accent-500:  #06B6D4;
  --accent-600:  #0891B2;
  --accent-glow: rgba(6, 182, 212, 0.10);

  /* --- Vivid Gradients (大胆撞色) --- */
  --gradient-brand:   linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  --gradient-warm:    linear-gradient(135deg, #F59E0B 0%, #EC4899 100%);
  --gradient-cool:    linear-gradient(135deg, #06B6D4 0%, #7C3AED 100%);
  --gradient-fresh:   linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
  --gradient-sunset:  linear-gradient(135deg, #F97316 0%, #EC4899 50%, #7C3AED 100%);
  --gradient-aurora:  linear-gradient(135deg, #7C3AED 0%, #06B6D4 50%, #10B981 100%);

  /* --- Warning Color (Amber) --- */
  --warning-400: #FBBF24;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-glow: rgba(245, 158, 11, 0.10);

  /* --- Error Color (Red) --- */
  --error-400:   #F87171;
  --error-500:   #EF4444;
  --error-600:   #DC2626;
  --error-glow:  rgba(239, 68, 68, 0.10);

  /* --- Success Color (Green) --- */
  --success-400: #4ADE80;
  --success-500: #22C55E;
  --success-600: #16A34A;
  --success-glow: rgba(34, 197, 94, 0.10);

  /* ==================== Text Colors (Light) ==================== */
  --text-primary:     #0F172A;
  --text-secondary:   #475569;
  --text-tertiary:    #94A3B8;
  --text-disabled:    #CBD5E1;
  --text-inverse:     #FFFFFF;
  --text-link:        var(--primary-500);
  --text-link-hover:  var(--primary-600);

  /* ==================== Typography ==================== */
  --font-sans:     'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:  'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --text-xs:     0.75rem;
  --text-sm:     0.875rem;
  --text-base:   1rem;
  --text-lg:     1.125rem;
  --text-xl:     1.25rem;
  --text-2xl:    1.5rem;
  --text-3xl:    1.875rem;
  --text-4xl:    2.25rem;
  --text-5xl:    3rem;
  --text-6xl:    3.75rem;
  --text-hero:   clamp(3rem, 6vw, 6rem);

  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;

  /* ==================== Spacing ==================== */
  --space-0:    0;
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;

  /* ==================== Border Radius ==================== */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-3xl:   24px;
  --radius-full:  9999px;

  /* ==================== Shadows (Light) ==================== */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);

  /* Glow Shadows (colorful tints) */
  --glow-primary:    0 4px 20px rgba(124, 58, 237, 0.18);
  --glow-primary-lg: 0 8px 40px rgba(124, 58, 237, 0.22);
  --glow-secondary:  0 4px 20px rgba(236, 72, 153, 0.18);
  --glow-accent:     0 4px 20px rgba(6, 182, 212, 0.18);

  /* ==================== Transitions ==================== */
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:     150ms;
  --duration-normal:   250ms;
  --duration-slow:     400ms;

  --transition-colors: color var(--duration-normal) var(--ease-default),
                       background-color var(--duration-normal) var(--ease-default),
                       border-color var(--duration-normal) var(--ease-default);
  --transition-all:    all var(--duration-normal) var(--ease-default);
  --transition-transform: transform var(--duration-normal) var(--ease-default);

  /* ==================== Z-Index Scale ==================== */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
  --z-tooltip:    600;
  --z-max:        9999;

  /* ==================== Layout ==================== */
  --sidebar-width:     280px;
  --sidebar-collapsed:  72px;
  --header-height:      64px;
  --content-max-width: 1400px;
  --navbar-height:      60px;
}


/* ============================================================
   2. Dark Theme (Admin Pages)
   通过 .admin-theme 类或 body.admin-mode 激活
   ============================================================ */

.admin-theme {
  /* --- Background Layers (Dark) --- */
  --bg-root:        #07090F;
  --bg-base:        #0B0D14;
  --bg-surface:     #111318;
  --bg-elevated:    #181B24;
  --bg-overlay:     #1E2130;
  --bg-hover:       rgba(255, 255, 255, 0.04);
  --bg-active:      rgba(255, 255, 255, 0.08);
  --bg-glass:       rgba(255, 255, 255, 0.03);
  --bg-glass-hover: rgba(255, 255, 255, 0.06);

  /* --- Border Colors (Dark) --- */
  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-default:  rgba(255, 255, 255, 0.10);
  --border-strong:   rgba(255, 255, 255, 0.15);
  --border-focus:    rgba(59, 130, 246, 0.45);

  /* --- Primary override for admin: Blue --- */
  --primary-50:   #EFF6FF;
  --primary-100:  #DBEAFE;
  --primary-200:  #BFDBFE;
  --primary-300:  #93C5FD;
  --primary-400:  #60A5FA;
  --primary-500:  #3B82F6;
  --primary-600:  #2563EB;
  --primary-700:  #1D4ED8;
  --primary-800:  #1E40AF;
  --primary-900:  #1E3A8A;

  /* --- Primary Glow (Dark) --- */
  --primary-glow-subtle:  rgba(59, 130, 246, 0.06);
  --primary-glow-light:   rgba(59, 130, 246, 0.12);
  --primary-glow-medium:  rgba(59, 130, 246, 0.20);
  --primary-glow-strong:  rgba(59, 130, 246, 0.35);

  /* --- Secondary: Slate (neutral, no pink) --- */
  --secondary-400: #A78BFA;
  --secondary-500: #8B5CF6;
  --secondary-600: #7C3AED;
  --secondary-glow: rgba(139, 92, 246, 0.12);

  /* --- Accent: Amber (original admin accent) --- */
  --accent-400:  #FBBF24;
  --accent-500:  #F59E0B;
  --accent-600:  #D97706;
  --accent-glow: rgba(245, 158, 11, 0.12);

  /* --- Gradients: Blue-based (no purple-pink) --- */
  --gradient-brand:   linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --gradient-warm:    linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
  --gradient-cool:    linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  --gradient-fresh:   linear-gradient(135deg, #10B981 0%, #3B82F6 100%);
  --gradient-sunset:  linear-gradient(135deg, #F59E0B 0%, #EF4444 50%, #8B5CF6 100%);
  --gradient-aurora:  linear-gradient(135deg, #3B82F6 0%, #06B6D4 50%, #10B981 100%);

  /* --- Text Colors (Dark) --- */
  --text-primary:     #F1F5F9;
  --text-secondary:   #94A3B8;
  --text-tertiary:    #64748B;
  --text-disabled:    #475569;
  --text-inverse:     #0B0D14;

  /* --- Shadows (Dark) --- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.6);

  /* --- Glow (Dark) --- */
  --glow-primary:    0 0 20px rgba(59, 130, 246, 0.15), 0 0 60px rgba(59, 130, 246, 0.05);
  --glow-primary-lg: 0 0 40px rgba(59, 130, 246, 0.20), 0 0 100px rgba(59, 130, 246, 0.08);
  --glow-secondary:  0 0 20px rgba(139, 92, 246, 0.15);
  --glow-accent:     0 0 20px rgba(16, 185, 129, 0.15);

  /* --- Functional Glow (Dark) --- */
  --warning-glow: rgba(245, 158, 11, 0.15);
  --error-glow:   rgba(239, 68, 68, 0.15);
  --success-glow: rgba(34, 197, 94, 0.15);
  --secondary-glow: rgba(139, 92, 246, 0.15);
  --accent-glow:  rgba(16, 185, 129, 0.15);
}

/* Admin 暗色侧边栏 */
.admin-theme .sidebar {
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-subtle);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
}

.admin-theme .sidebar .nav-item {
  color: var(--text-secondary);
}

.admin-theme .sidebar .nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.admin-theme .sidebar .nav-item.active {
  background: rgba(59, 130, 246, 0.12);
  color: #60A5FA;
}

.admin-theme .sidebar-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
}

/* Admin 暗色顶部栏 */
.admin-theme .top-header {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Admin 暗色卡片 */
.admin-theme .stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
}

.admin-theme .stat-card:hover {
  border-color: var(--border-strong);
}

.admin-theme .chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
}

.admin-theme .chart-header {
  border-bottom: 1px solid var(--border-subtle);
}

/* Admin 暗色表格 */
.admin-theme .member-table thead,
.admin-theme .order-table thead,
.admin-theme table thead {
  background: var(--bg-elevated);
}

.admin-theme .member-table th,
.admin-theme .order-table th,
.admin-theme table th {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
}

.admin-theme .member-table td,
.admin-theme .order-table td,
.admin-theme table td {
  border-bottom: 1px solid var(--border-subtle);
}

/* Admin 暗色搜索框 */
.admin-theme .search-input input,
.admin-theme .search-box input {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}

.admin-theme .search-input input:focus,
.admin-theme .search-box input:focus {
  background: var(--bg-elevated);
  border-color: var(--primary-500);
}

/* Admin 暗色内容区域 */
.admin-theme .main-content {
  background: var(--bg-base);
}

.admin-theme .content-area {
  background: var(--bg-base);
}


/* ============================================================
   3. body.admin-mode — Teleported 组件的暗色覆盖
   Modal / Dropdown / Popover 通过 Teleport 渲染到 body 外，
   需要通过 body 级别覆盖 CSS 变量
   ============================================================ */

body.admin-mode {
  --bg-root:        #07090F;
  --bg-base:        #0B0D14;
  --bg-surface:     #111318;
  --bg-elevated:    #181B24;
  --bg-overlay:     #1E2130;
  --bg-hover:       rgba(255, 255, 255, 0.04);
  --bg-active:      rgba(255, 255, 255, 0.08);
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.15);
  --border-focus:   rgba(59, 130, 246, 0.45);
  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-tertiary:  #64748B;
  --text-disabled:  #475569;
  --text-inverse:   #0B0D14;

  /* --- Primary: Blue (same as .admin-theme) --- */
  --primary-50:   #EFF6FF;
  --primary-100:  #DBEAFE;
  --primary-200:  #BFDBFE;
  --primary-300:  #93C5FD;
  --primary-400:  #60A5FA;
  --primary-500:  #3B82F6;
  --primary-600:  #2563EB;
  --primary-700:  #1D4ED8;
  --primary-800:  #1E40AF;
  --primary-900:  #1E3A8A;
  --primary-glow-subtle:  rgba(59, 130, 246, 0.06);
  --primary-glow-light:   rgba(59, 130, 246, 0.12);
  --primary-glow-medium:  rgba(59, 130, 246, 0.20);
  --primary-glow-strong:  rgba(59, 130, 246, 0.35);

  /* --- Secondary / Accent / Gradients: Blue-based --- */
  --secondary-400: #A78BFA;
  --secondary-500: #8B5CF6;
  --secondary-600: #7C3AED;
  --secondary-glow: rgba(139, 92, 246, 0.12);
  --accent-400:  #FBBF24;
  --accent-500:  #F59E0B;
  --accent-600:  #D97706;
  --accent-glow: rgba(245, 158, 11, 0.12);
  --gradient-brand:   linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --gradient-warm:    linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
  --gradient-cool:    linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  --gradient-fresh:   linear-gradient(135deg, #10B981 0%, #3B82F6 100%);
  --gradient-sunset:  linear-gradient(135deg, #F59E0B 0%, #EF4444 50%, #8B5CF6 100%);
  --gradient-aurora:  linear-gradient(135deg, #3B82F6 0%, #06B6D4 50%, #10B981 100%);

  /* --- Glows (Dark) --- */
  --glow-primary:    0 0 20px rgba(59, 130, 246, 0.15), 0 0 60px rgba(59, 130, 246, 0.05);
  --glow-primary-lg: 0 0 40px rgba(59, 130, 246, 0.20), 0 0 100px rgba(59, 130, 246, 0.08);
  --glow-secondary:  0 0 20px rgba(139, 92, 246, 0.15);
  --glow-accent:     0 0 20px rgba(245, 158, 11, 0.15);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.6);
}

/* Modal 弹窗 — 暗色 */
body.admin-mode .ant-modal-content {
  background: #181B24 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

body.admin-mode .ant-modal-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.admin-mode .ant-modal-title {
  color: #F1F5F9 !important;
}

body.admin-mode .ant-modal-body {
  color: #94A3B8 !important;
}

body.admin-mode .ant-modal-close {
  color: #64748B !important;
}

body.admin-mode .ant-modal-close:hover {
  color: #F1F5F9 !important;
}

body.admin-mode .ant-modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Modal.confirm 确认弹窗 — 暗色 */
body.admin-mode .ant-modal-confirm .ant-modal-content {
  background: #181B24 !important;
}

body.admin-mode .ant-modal-confirm-title {
  color: #F1F5F9 !important;
}

body.admin-mode .ant-modal-confirm-content {
  color: #94A3B8 !important;
}

/* Dropdown — 暗色 */
body.admin-mode .ant-dropdown-menu {
  background: #1E2130 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

body.admin-mode .ant-dropdown-menu-item {
  color: #94A3B8 !important;
}

body.admin-mode .ant-dropdown-menu-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #F1F5F9 !important;
}

/* Select — 暗色 */
body.admin-mode .ant-select-dropdown {
  background: #1E2130 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

body.admin-mode .ant-select-item {
  color: #94A3B8 !important;
}

body.admin-mode .ant-select-item-option-active,
body.admin-mode .ant-select-item-option-selected {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #F1F5F9 !important;
}

/* Popover / Tooltip — 暗色 */
body.admin-mode .ant-popover-inner {
  background: #1E2130 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

body.admin-mode .ant-tooltip-inner {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* Message — 暗色 */
body.admin-mode .ant-message-notice-content {
  background: #1E2130 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #F1F5F9 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

/* Notification — 暗色 */
body.admin-mode .ant-notification-notice {
  background: #1E2130 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
}

body.admin-mode .ant-notification-notice-message {
  color: #F1F5F9 !important;
}

body.admin-mode .ant-notification-notice-description {
  color: #94A3B8 !important;
}

/* Popconfirm — 暗色 */
body.admin-mode .ant-popconfirm .ant-popover-inner {
  background: #1E2130 !important;
}

body.admin-mode .ant-popconfirm-message-title {
  color: #F1F5F9 !important;
}


/* ============================================================
   4. Gradient Utilities
   ============================================================ */

.gradient-primary {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, var(--secondary-500) 0%, var(--primary-600) 100%);
}

.gradient-accent {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--accent-500) 100%);
}

.gradient-text {
  background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-surface {
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%);
}


/* ============================================================
   5. Glass Morphism Utility
   ============================================================ */

.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-subtle);
}

.glass-strong {
  background: var(--bg-glass-hover);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid var(--border-default);
}


/* ============================================================
   6. Animations
   ============================================================ */

@keyframes breathe {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px var(--primary-glow-subtle); }
  50%      { box-shadow: 0 0 40px var(--primary-glow-medium); }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes progress-sweep {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(300%); }
  100% { transform: translateX(-100%); }
}

@keyframes gradient-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes grid-move {
  0%   { transform: perspective(500px) rotateX(60deg) translateY(0); }
  100% { transform: perspective(500px) rotateX(60deg) translateY(40px); }
}


/* ============================================================
   7. Scrollbar — 自适应主题
   ============================================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.22);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

/* Admin 暗色滚动条 */
.admin-theme ::-webkit-scrollbar-thumb,
body.admin-mode ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

.admin-theme ::-webkit-scrollbar-thumb:hover,
body.admin-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

.admin-theme *,
body.admin-mode * {
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}


/* ============================================================
   8. Focus & Selection
   ============================================================ */

*:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

::selection {
  background: rgba(8, 145, 178, 0.20);
  color: var(--text-primary);
}

.admin-theme ::selection {
  background: rgba(59, 130, 246, 0.25);
  color: var(--text-primary);
}
