@import url('https://fonts-googleapis-com.mirror.zhrhello.top/css2?family=Noto+Sans+SC:wght@400;700&family=ZCOOL+KuaiLe&display=swap');

:root {
--bg-color: #23242a;
--card-bg: #1c1c1c;
--primary: #45f3ff;
--primary-dim: rgba(69, 243, 255, 0.1);
--primary-border: rgba(69, 243, 255, 0.2);
--primary-border-strong: rgba(69, 243, 255, 0.3);
--primary-border-highlight: rgba(69, 243, 255, 0.4);
--primary-glow: rgba(69, 243, 255, 0.1);
--primary-glow-strong: rgba(69, 243, 255, 0.3);
--text-main: #ffffff;
--text-dim: #8f8f8f;
--gold: #ffd700;
--silver: #c0c0c0;
--bronze: #cd7f32;
--scrollbar-bg: rgba(255, 255, 255, 0.05);
--scrollbar-thumb: rgba(69, 243, 255, 0.3);
--scrollbar-thumb-hover: rgba(69, 243, 255, 0.6);
--modal-bg: rgba(0, 0, 0, 0.85);
--highlight: rgba(69, 243, 255, 0.3);
--card-bg-alt: #2a2b33;
--card-border: rgba(69, 243, 255, 0.15);
--card-shadow: rgba(0, 0, 0, 0.2);
--header-bg-start: #151515;
--header-bg-end: var(--bg-color);
--rank-panel-bg: rgba(15, 15, 18, 0.6);
--rank-header-bg: rgba(69, 243, 255, 0.03);
--rank-item-bg: rgba(255, 255, 255, 0.03);
--rank-item-top1-bg: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent);
--rank-item-top2-bg: linear-gradient(90deg, rgba(192, 192, 192, 0.1), transparent);
--rank-item-top3-bg: linear-gradient(90deg, rgba(205, 127, 50, 0.1), transparent);
--vote-card-bg: linear-gradient(135deg, var(--card-bg), #2a2b33);
--vote-card-pressed-bg: linear-gradient(135deg, #2a2b33, #32333d);
--vote-card-pressed-before-shadow: 0 0 8px var(--primary);
--vote-card-highlighted-bg: linear-gradient(135deg, rgba(69, 243, 255, 0.2), rgba(69, 243, 255, 0.1));
--vote-card-top-bar: var(--primary);
--minus-btn-bg: rgba(255, 107, 107, 0.1);
--minus-btn-border: rgba(255, 107, 107, 0.4);
--minus-btn-color: #ff6b6b;
--minus-btn-pressed-bg: rgba(255, 107, 107, 0.4);
--settings-panel-bg: #1c1c1c;
--settings-panel-border: #666;
--toggle-group-bg: #23242a;
--toggle-group-border: rgba(255, 255, 255, 0.1);
--toggle-option-bg: transparent;
--toggle-option-active-bg: rgba(69, 243, 255, 0.2);
--toggle-option-color: #888;
--toggle-option-active-color: var(--primary);
--btn-confirm-bg: rgba(69, 243, 255, 0.2);
--btn-confirm-border: rgba(69, 243, 255, 0.4);
--btn-confirm-color: var(--primary);
--btn-secondary-bg: rgba(255, 255, 255, 0.05);
--btn-secondary-border: rgba(255, 255, 255, 0.1);
--btn-secondary-color: #ccc;
--btn-reset-bg: rgba(255, 107, 107, 0.1);
--btn-reset-border: rgba(255, 107, 107, 0.4);
--btn-reset-color: #ff6b6b;
--input-bg: rgba(0, 0, 0, 0.3);
--input-border: rgba(69, 243, 255, 0.3);
--input-focus-border: var(--primary);
--input-focus-glow: rgba(69, 243, 255, 0.2);
--search-panel-bg: rgba(35, 36, 42, 0.95);
--search-panel-shadow: rgba(0, 0, 0, 0.5);
--letter-btn-bg: transparent;
--letter-btn-hover-bg: rgba(255, 255, 255, 0.1);
--letter-btn-active-bg: rgba(69, 243, 255, 0.3);
--quick-search-btn-bg: rgba(255, 255, 255, 0.03);
--quick-search-btn-border: rgba(255, 255, 255, 0.05);
--quick-search-btn-hover-bg: rgba(255, 255, 255, 0.08);
--quick-search-btn-hover-border: rgba(255, 255, 255, 0.1);
--quick-search-btn-has-names-bg: rgba(69, 243, 255, 0.1);
--quick-search-btn-has-names-border: rgba(69, 243, 255, 0.2);
--action-btn-bg: linear-gradient(135deg, rgba(69, 243, 255, 0.1), rgba(69, 243, 255, 0.05));
--action-btn-border: rgba(69, 243, 255, 0.3);
--action-btn-color: var(--primary);
--action-btn-hover-bg: linear-gradient(135deg, rgba(69, 243, 255, 0.2), rgba(69, 243, 255, 0.1));
--action-btn-hover-border: rgba(69, 243, 255, 0.5);
--settings-btn-bg: rgba(69, 243, 255, 0.1);
--settings-btn-border: rgba(69, 243, 255, 0.3);
--settings-btn-color: var(--primary);
--finish-btn-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
--finish-btn-border: rgba(255, 215, 0, 0.4);
--finish-btn-color: var(--gold);
--touch-ball-bg: linear-gradient(135deg, rgba(69, 243, 255, 0.3), rgba(69, 243, 255, 0.1));
--touch-ball-border: rgba(69, 243, 255, 0.5);
--mouse-ball-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.1));
--mouse-ball-border: rgba(255, 215, 0, 0.5);
--mode-ball-large-bg: linear-gradient(135deg, rgba(69, 243, 255, 0.2), rgba(255, 215, 0, 0.1));
--mode-ball-large-border: rgba(69, 243, 255, 0.4);
--mode-ball-large-color: rgba(69, 243, 255, 0.8);
--mode-ball-large-glow: rgba(69, 243, 255, 0.3);
--mode-ball-large-inner-glow: rgba(69, 243, 255, 0.1);
--mode-ball-large-radial: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
--export-panel-bg: var(--card-bg);
--export-panel-border: rgba(69, 243, 255, 0.3);
--export-panel-shadow: rgba(0, 0, 0, 0.5);
--export-option-bg: rgba(255, 255, 255, 0.03);
--export-option-border: rgba(69, 243, 255, 0.2);
--export-option-hover-bg: rgba(69, 243, 255, 0.1);
--export-option-hover-border: rgba(69, 243, 255, 0.5);
--export-option-hover-shadow: rgba(69, 243, 255, 0.2);
--export-icon-bg: linear-gradient(135deg, rgba(69, 243, 255, 0.2), rgba(69, 243, 255, 0.05));
--export-icon-color: var(--primary);
--poster-box-bg: linear-gradient(135deg, #23242a 0%, #151515 100%);
--poster-box-shadow: rgba(0, 0, 0, 0.5);
--poster-item-bg: rgba(255, 255, 255, 0.05);
--edit-names-panel-bg: #1c1c1c;
--edit-names-panel-border: #666;
--edit-names-panel-shadow: rgba(0, 0, 0, 0.5);
--edit-name-card-bg: linear-gradient(135deg, var(--card-bg), #2a2b33);
--edit-name-card-border: rgba(69, 243, 255, 0.15);
--edit-name-card-shadow: rgba(0, 0, 0, 0.2);
--edit-name-card-input-bg: rgba(0, 0, 0, 0.3);
--edit-name-card-input-border: rgba(69, 243, 255, 0.4);
--edit-name-card-selected-border: #ffd700;
--edit-name-card-selected-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
--edit-name-card-selected-shadow: rgba(255, 215, 0, 0.6);
--name-change-tag-add-bg: rgba(76, 175, 80, 0.2);
--name-change-tag-add-border: rgba(76, 175, 80, 0.5);
--name-change-tag-add-color: #4caf50;
--name-change-tag-remove-bg: rgba(244, 67, 54, 0.2);
--name-change-tag-remove-border: rgba(244, 67, 54, 0.5);
--name-change-tag-remove-color: #f44336;
--name-change-tag-container-bg: rgba(0, 0, 0, 0.2);
--poster-edit-panel-bg: #1c1c1c;
--poster-edit-panel-border: #666;
--poster-edit-panel-shadow: rgba(0, 0, 0, 0.5);
--poster-preview-bg: rgba(0, 0, 0, 0.3);
--poster-preview-shadow: rgba(0, 0, 0, 0.3);
--poster-btn-primary-bg: linear-gradient(135deg, rgba(69, 243, 255, 0.2), rgba(69, 243, 255, 0.1));
--poster-btn-primary-border: rgba(69, 243, 255, 0.4);
--poster-btn-primary-color: var(--primary);
--poster-btn-primary-hover-bg: linear-gradient(135deg, rgba(69, 243, 255, 0.3), rgba(69, 243, 255, 0.2));
--poster-btn-primary-hover-shadow: rgba(69, 243, 255, 0.3);
--poster-btn-secondary-bg: rgba(255, 255, 255, 0.05);
--poster-btn-secondary-color: var(--text-dim);
--poster-btn-secondary-border: rgba(255, 255, 255, 0.1);
--poster-btn-secondary-hover-bg: rgba(255, 255, 255, 0.1);
--poster-btn-secondary-hover-color: var(--text-main);
--poster-input-bg: rgba(0, 0, 0, 0.3);
--poster-input-border: rgba(69, 243, 255, 0.2);
--poster-input-focus-border: var(--primary);
--poster-input-focus-glow: rgba(69, 243, 255, 0.2);
--poster-range-bg: rgba(0, 0, 0, 0.3);
--poster-range-thumb-bg: var(--primary);
--poster-range-thumb-shadow: rgba(69, 243, 255, 0.5);
--poster-close-hover-bg: rgba(69, 243, 255, 0.1);
--export-btn-cancel-bg: rgba(255, 255, 255, 0.05);
--export-btn-cancel-color: var(--text-dim);
--export-btn-cancel-border: rgba(255, 255, 255, 0.1);
--export-btn-cancel-hover-bg: rgba(255, 255, 255, 0.1);
--export-btn-cancel-hover-color: var(--text-main);
--rank-item-highlight-shadow: rgba(69, 243, 255, 0.3);
--rank-item-top1-shadow: rgba(255, 215, 0, 0.05);
--vote-card-highlight-shadow: rgba(69, 243, 255, 0.4);
--vote-card-pressed-glow: rgba(69, 243, 255, 0.2);
--vote-card-highlight-bg: rgba(69, 243, 255, 0.2);
--vote-card-highlight-border: var(--primary);
--minus-btn-pressed-shadow: rgba(255, 107, 107, 0.4);
--letter-btn-has-names-shadow: rgba(69, 243, 255, 0.3);
--quick-search-btn-has-names-shadow: rgba(69, 243, 255, 0.2);
--mode-ball-hover-shadow: rgba(69, 243, 255, 0.4);
--mode-ball-mouse-hover-shadow: rgba(255, 215, 0, 0.4);
--mode-ball-selected-shadow: currentColor;
--mode-ball-large-shadow: rgba(69, 243, 255, 0.3), inset 0 0 30px rgba(69, 243, 255, 0.1);
--mode-ball-large-hover-shadow: rgba(69, 243, 255, 0.5), inset 0 0 40px rgba(69, 243, 255, 0.2);
--mode-ball-large-touch-bg: linear-gradient(135deg, rgba(69, 243, 255, 0.3), rgba(69, 243, 255, 0.15));
--mode-ball-large-touch-border: rgba(69, 243, 255, 0.8);
--mode-ball-large-touch-shadow: rgba(69, 243, 255, 0.6);
--mode-ball-large-mouse-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.15));
--mode-ball-large-mouse-border: rgba(255, 215, 0, 0.8);
--mode-ball-large-mouse-shadow: rgba(255, 215, 0, 0.6);
--finish-btn-shadow: rgba(255, 215, 0, 0.3);
--rank-header-text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
--poster-title-text-shadow: 0 0 10px rgba(69, 243, 255, 0.5);
--settings-panel-shadow: rgba(0,0,0,0.5);
--edit-name-card-hover-shadow: rgba(69, 243, 255, 0.2);
--edit-name-edit-btn-shadow: rgba(255, 215, 0, 0.4);
--edit-name-delete-btn-shadow: rgba(255, 107, 107, 0.4);
--upload-btn-hover-glow: var(--primary-glow-hover);
--input-focus-shadow: var(--primary-border);
--action-btn-hover-shadow: rgba(69, 243, 255, 0.2);
--export-btn-hover-shadow: rgba(69, 243, 255, 0.3);
--poster-btn-hover-shadow: rgba(69, 243, 255, 0.3);
--edit-name-card-selected-shadow-glow: rgba(255, 215, 0, 0.4);
--touch-ball-selected-bg: linear-gradient(135deg, rgba(69, 243, 255, 0.6), rgba(69, 243, 255, 0.3));
--touch-ball-selected-shadow: rgba(69, 243, 255, 0.6);
--mouse-ball-selected-bg: linear-gradient(135deg, rgba(255, 215, 0, 0.6), rgba(255, 215, 0, 0.3));
--mouse-ball-selected-shadow: rgba(255, 215, 0, 0.6);
--primary-glow-hover: rgba(69, 243, 255, 0.3);
--resize-handle-bg: rgba(69, 243, 255, 0.2);
--resize-handle-after-color: rgba(255,255,255,0.2);
--search-panel-border: rgba(69, 243, 255, 0.2);
--letter-btn-active-bg-raw: rgba(69, 243, 255, 0.3);
--quick-search-container-bg: rgba(69, 243, 255, 0.02);
--quick-search-container-border: rgba(69, 243, 255, 0.1);
--quick-search-btn-empty-color: rgba(255, 255, 255, 0.15);
--quick-search-btn-empty-bg: rgba(255, 255, 255, 0.02);
--quick-search-btn-empty-border: rgba(255, 255, 255, 0.03);
--poster-header-border: rgba(69, 243, 255, 0.3);
--poster-edit-header-border: rgba(69, 243, 255, 0.2);
--poster-edit-footer-border: rgba(69, 243, 255, 0.2);
--poster-color-swatch-border: rgba(69, 243, 255, 0.3);
--poster-close-hover-bg-raw: rgba(69, 243, 255, 0.1);
--mode-ball-large-hover-border: rgba(69, 243, 255, 0.5);
}
[data-theme="light"] {
--bg-color: #f5f5f0;
--card-bg: #ffffff;
--primary: #2d5f8a;
--primary-dim: rgba(45, 95, 138, 0.08);
--primary-border: rgba(45, 95, 138, 0.2);
--primary-border-strong: rgba(45, 95, 138, 0.3);
--primary-border-highlight: rgba(45, 95, 138, 0.4);
--primary-glow: transparent;
--primary-glow-strong: transparent;
--text-main: #1a1a1a;
--text-dim: #6b7280;
--gold: #b8860b;
--silver: #708090;
--bronze: #8b4513;
--scrollbar-bg: rgba(0, 0, 0, 0.05);
--scrollbar-thumb: rgba(45, 95, 138, 0.3);
--scrollbar-thumb-hover: rgba(45, 95, 138, 0.5);
--modal-bg: rgba(0, 0, 0, 0.5);
--highlight: rgba(45, 95, 138, 0.15);
--card-bg-alt: #f0f0eb;
--card-border: rgba(45, 95, 138, 0.15);
--card-shadow: rgba(0, 0, 0, 0.08);
--header-bg-start: #e8e8e3;
--header-bg-end: var(--bg-color);
--rank-panel-bg: rgba(255, 255, 255, 0.8);
--rank-header-bg: rgba(45, 95, 138, 0.05);
--rank-item-bg: rgba(0, 0, 0, 0.02);
--rank-item-top1-bg: linear-gradient(90deg, rgba(184, 134, 11, 0.08), transparent);
--rank-item-top2-bg: linear-gradient(90deg, rgba(112, 128, 144, 0.08), transparent);
--rank-item-top3-bg: linear-gradient(90deg, rgba(139, 69, 19, 0.08), transparent);
--vote-card-bg: linear-gradient(135deg, #ffffff, #f8f8f3);
--vote-card-pressed-bg: linear-gradient(135deg, #f0f0eb, #e8e8e3);
--vote-card-pressed-before-shadow: 0 1px 3px var(--card-shadow);
--vote-card-highlighted-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.1), rgba(45, 95, 138, 0.05));
--vote-card-top-bar: var(--primary);
--minus-btn-bg: rgba(220, 53, 69, 0.08);
--minus-btn-border: rgba(220, 53, 69, 0.3);
--minus-btn-color: #dc3545;
--minus-btn-pressed-bg: rgba(220, 53, 69, 0.2);
--settings-panel-bg: #ffffff;
--settings-panel-border: #d1d5db;
--toggle-group-bg: #f3f4f6;
--toggle-group-border: rgba(0, 0, 0, 0.08);
--toggle-option-bg: transparent;
--toggle-option-active-bg: #ffffff;
--toggle-option-color: #6b7280;
--toggle-option-active-color: var(--primary);
--btn-confirm-bg: rgba(45, 95, 138, 0.1);
--btn-confirm-border: rgba(45, 95, 138, 0.3);
--btn-confirm-color: var(--primary);
--btn-secondary-bg: rgba(0, 0, 0, 0.04);
--btn-secondary-border: rgba(0, 0, 0, 0.1);
--btn-secondary-color: #4b5563;
--btn-reset-bg: rgba(220, 53, 69, 0.08);
--btn-reset-border: rgba(220, 53, 69, 0.3);
--btn-reset-color: #dc3545;
--input-bg: rgba(0, 0, 0, 0.03);
--input-border: rgba(45, 95, 138, 0.2);
--input-focus-border: var(--primary);
--input-focus-glow: rgba(45, 95, 138, 0.1);
--search-panel-bg: rgba(255, 255, 255, 0.95);
--search-panel-shadow: rgba(0, 0, 0, 0.15);
--letter-btn-bg: transparent;
--letter-btn-hover-bg: rgba(0, 0, 0, 0.05);
--letter-btn-active-bg: rgba(45, 95, 138, 0.15);
--quick-search-btn-bg: rgba(0, 0, 0, 0.02);
--quick-search-btn-border: rgba(0, 0, 0, 0.06);
--quick-search-btn-hover-bg: rgba(0, 0, 0, 0.05);
--quick-search-btn-hover-border: rgba(0, 0, 0, 0.1);
--quick-search-btn-has-names-bg: rgba(45, 95, 138, 0.08);
--quick-search-btn-has-names-border: rgba(45, 95, 138, 0.2);
--action-btn-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.08), rgba(45, 95, 138, 0.04));
--action-btn-border: rgba(45, 95, 138, 0.2);
--action-btn-color: var(--primary);
--action-btn-hover-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.12), rgba(45, 95, 138, 0.06));
--action-btn-hover-border: rgba(45, 95, 138, 0.3);
--settings-btn-bg: rgba(45, 95, 138, 0.08);
--settings-btn-border: rgba(45, 95, 138, 0.2);
--settings-btn-color: var(--primary);
--finish-btn-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.1), rgba(184, 134, 11, 0.05));
--finish-btn-border: rgba(184, 134, 11, 0.3);
--finish-btn-color: var(--gold);
--touch-ball-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.15), rgba(45, 95, 138, 0.05));
--touch-ball-border: rgba(45, 95, 138, 0.4);
--mouse-ball-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.15), rgba(184, 134, 11, 0.05));
--mouse-ball-border: rgba(184, 134, 11, 0.4);
--mode-ball-large-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.1), rgba(184, 134, 11, 0.05));
--mode-ball-large-border: rgba(45, 95, 138, 0.3);
--mode-ball-large-color: rgba(45, 95, 138, 0.7);
--mode-ball-large-glow: rgba(45, 95, 138, 0.15);
--mode-ball-large-inner-glow: rgba(255, 255, 255, 0.5);
--mode-ball-large-radial: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
--export-panel-bg: var(--card-bg);
--export-panel-border: rgba(45, 95, 138, 0.2);
--export-panel-shadow: rgba(0, 0, 0, 0.15);
--export-option-bg: rgba(0, 0, 0, 0.02);
--export-option-border: rgba(45, 95, 138, 0.15);
--export-option-hover-bg: rgba(45, 95, 138, 0.05);
--export-option-hover-border: rgba(45, 95, 138, 0.3);
--export-option-hover-shadow: rgba(45, 95, 138, 0.1);
--export-icon-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.1), rgba(45, 95, 138, 0.03));
--export-icon-color: var(--primary);
--poster-box-bg: linear-gradient(135deg, #f5f5f0 0%, #e8e8e3 100%);
--poster-box-shadow: rgba(0, 0, 0, 0.15);
--poster-item-bg: rgba(0, 0, 0, 0.03);
--edit-names-panel-bg: #ffffff;
--edit-names-panel-border: #d1d5db;
--edit-names-panel-shadow: rgba(0, 0, 0, 0.15);
--edit-name-card-bg: linear-gradient(135deg, #ffffff, #f8f8f3);
--edit-name-card-border: rgba(45, 95, 138, 0.15);
--edit-name-card-shadow: rgba(0, 0, 0, 0.08);
--edit-name-card-input-bg: rgba(0, 0, 0, 0.03);
--edit-name-card-input-border: rgba(45, 95, 138, 0.3);
--edit-name-card-selected-border: #b8860b;
--edit-name-card-selected-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.1), rgba(184, 134, 11, 0.03));
--edit-name-card-selected-shadow: rgba(184, 134, 11, 0.4);
--name-change-tag-add-bg: rgba(40, 167, 69, 0.1);
--name-change-tag-add-border: rgba(40, 167, 69, 0.4);
--name-change-tag-add-color: #28a745;
--name-change-tag-remove-bg: rgba(220, 53, 69, 0.1);
--name-change-tag-remove-border: rgba(220, 53, 69, 0.4);
--name-change-tag-remove-color: #dc3545;
--name-change-tag-container-bg: rgba(0, 0, 0, 0.04);
--poster-edit-panel-bg: #ffffff;
--poster-edit-panel-border: #d1d5db;
--poster-edit-panel-shadow: rgba(0, 0, 0, 0.15);
--poster-preview-bg: rgba(0, 0, 0, 0.05);
--poster-preview-shadow: rgba(0, 0, 0, 0.1);
--poster-btn-primary-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.1), rgba(45, 95, 138, 0.05));
--poster-btn-primary-border: rgba(45, 95, 138, 0.3);
--poster-btn-primary-color: var(--primary);
--poster-btn-primary-hover-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.15), rgba(45, 95, 138, 0.08));
--poster-btn-primary-hover-shadow: rgba(45, 95, 138, 0.15);
--poster-btn-secondary-bg: rgba(0, 0, 0, 0.04);
--poster-btn-secondary-color: var(--text-dim);
--poster-btn-secondary-border: rgba(0, 0, 0, 0.1);
--poster-btn-secondary-hover-bg: rgba(0, 0, 0, 0.08);
--poster-btn-secondary-hover-color: var(--text-main);
--poster-input-bg: rgba(0, 0, 0, 0.03);
--poster-input-border: rgba(45, 95, 138, 0.15);
--poster-input-focus-border: var(--primary);
--poster-input-focus-glow: rgba(45, 95, 138, 0.1);
--poster-range-bg: rgba(0, 0, 0, 0.08);
--poster-range-thumb-bg: var(--primary);
--poster-range-thumb-shadow: rgba(45, 95, 138, 0.3);
--poster-close-hover-bg: rgba(45, 95, 138, 0.08);
--export-btn-cancel-bg: rgba(0, 0, 0, 0.04);
--export-btn-cancel-color: var(--text-dim);
--export-btn-cancel-border: rgba(0, 0, 0, 0.1);
--export-btn-cancel-hover-bg: rgba(0, 0, 0, 0.08);
--export-btn-cancel-hover-color: var(--text-main);
--rank-item-highlight-shadow: transparent;
--rank-item-top1-shadow: transparent;
--vote-card-highlight-shadow: transparent;
--vote-card-pressed-glow: transparent;
--vote-card-highlight-bg: var(--vote-card-highlighted-bg);
--vote-card-highlight-border: var(--primary);
--minus-btn-pressed-shadow: transparent;
--letter-btn-has-names-shadow: transparent;
--quick-search-btn-has-names-shadow: transparent;
--mode-ball-hover-shadow: 0 2px 8px var(--card-shadow);
--mode-ball-mouse-hover-shadow: 0 2px 8px var(--card-shadow);
--mode-ball-selected-shadow: 0 2px 8px var(--card-shadow);
--mode-ball-large-shadow: 0 4px 15px var(--card-shadow);
--mode-ball-large-hover-shadow: 0 4px 15px var(--card-shadow);
--mode-ball-large-touch-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.15), rgba(45, 95, 138, 0.08));
--mode-ball-large-touch-border: rgba(45, 95, 138, 0.6);
--mode-ball-large-touch-shadow: 0 2px 12px var(--card-shadow);
--mode-ball-large-mouse-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.15), rgba(184, 134, 11, 0.08));
--mode-ball-large-mouse-border: rgba(184, 134, 11, 0.6);
--mode-ball-large-mouse-shadow: 0 2px 12px var(--card-shadow);
--finish-btn-shadow: transparent;
--rank-header-text-shadow: none;
--poster-title-text-shadow: none;
--settings-panel-shadow: 0 4px 20px var(--card-shadow);
--edit-name-card-hover-shadow: 0 2px 8px var(--card-shadow);
--edit-name-edit-btn-shadow: transparent;
--edit-name-delete-btn-shadow: transparent;
--upload-btn-hover-glow: transparent;
--input-focus-shadow: transparent;
--action-btn-hover-shadow: transparent;
--export-btn-hover-shadow: transparent;
--poster-btn-hover-shadow: transparent;
--edit-name-card-selected-shadow-glow: transparent;
--touch-ball-selected-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.3), rgba(45, 95, 138, 0.15));
--touch-ball-selected-shadow: 0 2px 10px var(--card-shadow);
--mouse-ball-selected-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.3), rgba(184, 134, 11, 0.15));
--mouse-ball-selected-shadow: 0 2px 10px var(--card-shadow);
--primary-glow-hover: transparent;
--resize-handle-bg: rgba(45, 95, 138, 0.15);
--resize-handle-after-color: rgba(0,0,0,0.2);
--search-panel-border: rgba(45, 95, 138, 0.15);
--letter-btn-active-bg-raw: rgba(45, 95, 138, 0.15);
--quick-search-container-bg: rgba(45, 95, 138, 0.03);
--quick-search-container-border: rgba(45, 95, 138, 0.08);
--quick-search-btn-empty-color: rgba(0, 0, 0, 0.15);
--quick-search-btn-empty-bg: rgba(0, 0, 0, 0.03);
--quick-search-btn-empty-border: rgba(0, 0, 0, 0.06);
--poster-header-border: rgba(45, 95, 138, 0.15);
--poster-edit-header-border: rgba(45, 95, 138, 0.1);
--poster-edit-footer-border: rgba(45, 95, 138, 0.1);
--poster-color-swatch-border: rgba(45, 95, 138, 0.15);
--poster-close-hover-bg-raw: rgba(45, 95, 138, 0.06);
--mode-ball-large-hover-border: rgba(45, 95, 138, 0.3);
}
/* 已注释：系统主题跟随逻辑已移至 JavaScript ThemeManager 处理，避免媒体查询覆盖手动设置的主题 */
/*
@media (prefers-color-scheme: light) {
:root {
--bg-color: #f5f5f0;
--card-bg: #ffffff;
--primary: #2d5f8a;
--primary-dim: rgba(45, 95, 138, 0.08);
--primary-border: rgba(45, 95, 138, 0.2);
--primary-border-strong: rgba(45, 95, 138, 0.3);
--primary-border-highlight: rgba(45, 95, 138, 0.4);
--primary-glow: transparent;
--primary-glow-strong: transparent;
--text-main: #1a1a1a;
--text-dim: #6b7280;
--gold: #b8860b;
--silver: #708090;
--bronze: #8b4513;
--scrollbar-bg: rgba(0, 0, 0, 0.05);
--scrollbar-thumb: rgba(45, 95, 138, 0.3);
--scrollbar-thumb-hover: rgba(45, 95, 138, 0.5);
--modal-bg: rgba(0, 0, 0, 0.5);
--highlight: rgba(45, 95, 138, 0.15);
--card-bg-alt: #f0f0eb;
--card-border: rgba(45, 95, 138, 0.15);
--card-shadow: rgba(0, 0, 0, 0.08);
--header-bg-start: #e8e8e3;
--header-bg-end: var(--bg-color);
--rank-panel-bg: rgba(255, 255, 255, 0.8);
--rank-header-bg: rgba(45, 95, 138, 0.05);
--rank-item-bg: rgba(0, 0, 0, 0.02);
--rank-item-top1-bg: linear-gradient(90deg, rgba(184, 134, 11, 0.08), transparent);
--rank-item-top2-bg: linear-gradient(90deg, rgba(112, 128, 144, 0.08), transparent);
--rank-item-top3-bg: linear-gradient(90deg, rgba(139, 69, 19, 0.08), transparent);
--vote-card-bg: linear-gradient(135deg, #ffffff, #f8f8f3);
--vote-card-pressed-bg: linear-gradient(135deg, #f0f0eb, #e8e8e3);
--vote-card-pressed-before-shadow: 0 1px 3px var(--card-shadow);
--vote-card-highlighted-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.1), rgba(45, 95, 138, 0.05));
--vote-card-top-bar: var(--primary);
--minus-btn-bg: rgba(220, 53, 69, 0.08);
--minus-btn-border: rgba(220, 53, 69, 0.3);
--minus-btn-color: #dc3545;
--minus-btn-pressed-bg: rgba(220, 53, 69, 0.2);
--settings-panel-bg: #ffffff;
--settings-panel-border: #d1d5db;
--toggle-group-bg: #f3f4f6;
--toggle-group-border: rgba(0, 0, 0, 0.08);
--toggle-option-bg: transparent;
--toggle-option-active-bg: #ffffff;
--toggle-option-color: #6b7280;
--toggle-option-active-color: var(--primary);
--btn-confirm-bg: rgba(45, 95, 138, 0.1);
--btn-confirm-border: rgba(45, 95, 138, 0.3);
--btn-confirm-color: var(--primary);
--btn-secondary-bg: rgba(0, 0, 0, 0.04);
--btn-secondary-border: rgba(0, 0, 0, 0.1);
--btn-secondary-color: #4b5563;
--btn-reset-bg: rgba(220, 53, 69, 0.08);
--btn-reset-border: rgba(220, 53, 69, 0.3);
--btn-reset-color: #dc3545;
--input-bg: rgba(0, 0, 0, 0.03);
--input-border: rgba(45, 95, 138, 0.2);
--input-focus-border: var(--primary);
--input-focus-glow: rgba(45, 95, 138, 0.1);
--search-panel-bg: rgba(255, 255, 255, 0.95);
--search-panel-shadow: rgba(0, 0, 0, 0.15);
--letter-btn-bg: transparent;
--letter-btn-hover-bg: rgba(0, 0, 0, 0.05);
--letter-btn-active-bg: rgba(45, 95, 138, 0.15);
--quick-search-btn-bg: rgba(0, 0, 0, 0.02);
--quick-search-btn-border: rgba(0, 0, 0, 0.06);
--quick-search-btn-hover-bg: rgba(0, 0, 0, 0.05);
--quick-search-btn-hover-border: rgba(0, 0, 0, 0.1);
--quick-search-btn-has-names-bg: rgba(45, 95, 138, 0.08);
--quick-search-btn-has-names-border: rgba(45, 95, 138, 0.2);
--action-btn-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.08), rgba(45, 95, 138, 0.04));
--action-btn-border: rgba(45, 95, 138, 0.2);
--action-btn-color: var(--primary);
--action-btn-hover-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.12), rgba(45, 95, 138, 0.06));
--action-btn-hover-border: rgba(45, 95, 138, 0.3);
--settings-btn-bg: rgba(45, 95, 138, 0.08);
--settings-btn-border: rgba(45, 95, 138, 0.2);
--settings-btn-color: var(--primary);
--finish-btn-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.1), rgba(184, 134, 11, 0.05));
--finish-btn-border: rgba(184, 134, 11, 0.3);
--finish-btn-color: var(--gold);
--touch-ball-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.15), rgba(45, 95, 138, 0.05));
--touch-ball-border: rgba(45, 95, 138, 0.4);
--mouse-ball-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.15), rgba(184, 134, 11, 0.05));
--mouse-ball-border: rgba(184, 134, 11, 0.4);
--mode-ball-large-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.1), rgba(184, 134, 11, 0.05));
--mode-ball-large-border: rgba(45, 95, 138, 0.3);
--mode-ball-large-color: rgba(45, 95, 138, 0.7);
--mode-ball-large-glow: rgba(45, 95, 138, 0.15);
--mode-ball-large-inner-glow: rgba(255, 255, 255, 0.5);
--mode-ball-large-radial: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
--export-panel-bg: var(--card-bg);
--export-panel-border: rgba(45, 95, 138, 0.2);
--export-panel-shadow: rgba(0, 0, 0, 0.15);
--export-option-bg: rgba(0, 0, 0, 0.02);
--export-option-border: rgba(45, 95, 138, 0.15);
--export-option-hover-bg: rgba(45, 95, 138, 0.05);
--export-option-hover-border: rgba(45, 95, 138, 0.3);
--export-option-hover-shadow: rgba(45, 95, 138, 0.1);
--export-icon-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.1), rgba(45, 95, 138, 0.03));
--export-icon-color: var(--primary);
--poster-box-bg: linear-gradient(135deg, #f5f5f0 0%, #e8e8e3 100%);
--poster-box-shadow: rgba(0, 0, 0, 0.15);
--poster-item-bg: rgba(0, 0, 0, 0.03);
--edit-names-panel-bg: #ffffff;
--edit-names-panel-border: #d1d5db;
--edit-names-panel-shadow: rgba(0, 0, 0, 0.15);
--edit-name-card-bg: linear-gradient(135deg, #ffffff, #f8f8f3);
--edit-name-card-border: rgba(45, 95, 138, 0.15);
--edit-name-card-shadow: rgba(0, 0, 0, 0.08);
--edit-name-card-input-bg: rgba(0, 0, 0, 0.03);
--edit-name-card-input-border: rgba(45, 95, 138, 0.3);
--edit-name-card-selected-border: #b8860b;
--edit-name-card-selected-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.1), rgba(184, 134, 11, 0.03));
--edit-name-card-selected-shadow: rgba(184, 134, 11, 0.4);
--name-change-tag-add-bg: rgba(40, 167, 69, 0.1);
--name-change-tag-add-border: rgba(40, 167, 69, 0.4);
--name-change-tag-add-color: #28a745;
--name-change-tag-remove-bg: rgba(220, 53, 69, 0.1);
--name-change-tag-remove-border: rgba(220, 53, 69, 0.4);
--name-change-tag-remove-color: #dc3545;
--name-change-tag-container-bg: rgba(0, 0, 0, 0.04);
--poster-edit-panel-bg: #ffffff;
--poster-edit-panel-border: #d1d5db;
--poster-edit-panel-shadow: rgba(0, 0, 0, 0.15);
--poster-preview-bg: rgba(0, 0, 0, 0.05);
--poster-preview-shadow: rgba(0, 0, 0, 0.1);
--poster-btn-primary-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.1), rgba(45, 95, 138, 0.05));
--poster-btn-primary-border: rgba(45, 95, 138, 0.3);
--poster-btn-primary-color: var(--primary);
--poster-btn-primary-hover-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.15), rgba(45, 95, 138, 0.08));
--poster-btn-primary-hover-shadow: rgba(45, 95, 138, 0.15);
--poster-btn-secondary-bg: rgba(0, 0, 0, 0.04);
--poster-btn-secondary-color: var(--text-dim);
--poster-btn-secondary-border: rgba(0, 0, 0, 0.1);
--poster-btn-secondary-hover-bg: rgba(0, 0, 0, 0.08);
--poster-btn-secondary-hover-color: var(--text-main);
--poster-input-bg: rgba(0, 0, 0, 0.03);
--poster-input-border: rgba(45, 95, 138, 0.15);
--poster-input-focus-border: var(--primary);
--poster-input-focus-glow: rgba(45, 95, 138, 0.1);
--poster-range-bg: rgba(0, 0, 0, 0.08);
--poster-range-thumb-bg: var(--primary);
--poster-range-thumb-shadow: rgba(45, 95, 138, 0.3);
--poster-close-hover-bg: rgba(45, 95, 138, 0.08);
--export-btn-cancel-bg: rgba(0, 0, 0, 0.04);
--export-btn-cancel-color: var(--text-dim);
--export-btn-cancel-border: rgba(0, 0, 0, 0.1);
--export-btn-cancel-hover-bg: rgba(0, 0, 0, 0.08);
--export-btn-cancel-hover-color: var(--text-main);
--rank-item-highlight-shadow: transparent;
--rank-item-top1-shadow: transparent;
--vote-card-highlight-shadow: transparent;
--vote-card-pressed-glow: transparent;
--vote-card-highlight-bg: var(--vote-card-highlighted-bg);
--vote-card-highlight-border: var(--primary);
--minus-btn-pressed-shadow: transparent;
--letter-btn-has-names-shadow: transparent;
--quick-search-btn-has-names-shadow: transparent;
--mode-ball-hover-shadow: 0 2px 8px var(--card-shadow);
--mode-ball-mouse-hover-shadow: 0 2px 8px var(--card-shadow);
--mode-ball-selected-shadow: 0 2px 8px var(--card-shadow);
--mode-ball-large-shadow: 0 4px 15px var(--card-shadow);
--mode-ball-large-hover-shadow: 0 4px 15px var(--card-shadow);
--mode-ball-large-touch-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.15), rgba(45, 95, 138, 0.08));
--mode-ball-large-touch-border: rgba(45, 95, 138, 0.6);
--mode-ball-large-touch-shadow: 0 2px 12px var(--card-shadow);
--mode-ball-large-mouse-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.15), rgba(184, 134, 11, 0.08));
--mode-ball-large-mouse-border: rgba(184, 134, 11, 0.6);
--mode-ball-large-mouse-shadow: 0 2px 12px var(--card-shadow);
--finish-btn-shadow: transparent;
--rank-header-text-shadow: none;
--poster-title-text-shadow: none;
--settings-panel-shadow: 0 4px 20px var(--card-shadow);
--edit-name-card-hover-shadow: 0 2px 8px var(--card-shadow);
--edit-name-edit-btn-shadow: transparent;
--edit-name-delete-btn-shadow: transparent;
--upload-btn-hover-glow: transparent;
--input-focus-shadow: transparent;
--action-btn-hover-shadow: transparent;
--export-btn-hover-shadow: transparent;
--poster-btn-hover-shadow: transparent;
--edit-name-card-selected-shadow-glow: transparent;
--touch-ball-selected-bg: linear-gradient(135deg, rgba(45, 95, 138, 0.3), rgba(45, 95, 138, 0.15));
--touch-ball-selected-shadow: 0 2px 10px var(--card-shadow);
--mouse-ball-selected-bg: linear-gradient(135deg, rgba(184, 134, 11, 0.3), rgba(184, 134, 11, 0.15));
--mouse-ball-selected-shadow: 0 2px 10px var(--card-shadow);
--primary-glow-hover: transparent;
--resize-handle-bg: rgba(45, 95, 138, 0.15);
--resize-handle-after-color: rgba(0,0,0,0.2);
--search-panel-border: rgba(45, 95, 138, 0.15);
--letter-btn-active-bg-raw: rgba(45, 95, 138, 0.15);
--quick-search-container-bg: rgba(45, 95, 138, 0.03);
--quick-search-container-border: rgba(45, 95, 138, 0.08);
--poster-header-border: rgba(45, 95, 138, 0.15);
--poster-edit-header-border: rgba(45, 95, 138, 0.1);
--poster-edit-footer-border: rgba(45, 95, 138, 0.1);
--poster-color-swatch-border: rgba(45, 95, 138, 0.15);
--poster-close-hover-bg-raw: rgba(45, 95, 138, 0.06);
--mode-ball-large-hover-border: rgba(45, 95, 138, 0.3);
}
}
*/