/* ============================================================ 樱花・夏日微风 主题（html[data-theme="sakura"] 时生效） ------------------------------------------------------------- 设计意图：夏日清晨的樱花树下 —— 暖云白的天光、粉白色的毛玻璃、 一缕夏空蓝藏在渐变里防止画面发腻；文字统一用「樱枝褐」深色， 保证浅底上的可读性（对比度 ≥ WCAG AA）。 星空主题的所有规则原样保留在 index.html 中，本文件只做覆盖， 切换主题 = 打/删 标记。 ============================================================ */ /* ---- 1. 语义色令牌：一次覆盖，全站 var() 引用处自动换装 ---- */ html[data-theme="sakura"] { color-scheme: light; --semi-color-primary: #d94f7e; --semi-color-primary-hover: #c43e6c; --semi-color-secondary: #4e9cc9; --semi-color-tertiary: #ef8fb4; --semi-color-success: #2e8b61; --semi-color-warning: #b3781f; --semi-color-danger: #cf4a6e; --semi-color-bg-0: #fff6f4; --semi-color-bg-1: rgba(255, 255, 255, 0.86); --semi-color-bg-2: rgba(255, 240, 246, 0.78); --semi-color-text-0: #46262f; --semi-color-text-1: rgba(70, 38, 47, 0.82); --semi-color-text-2: rgba(70, 38, 47, 0.56); --semi-color-border: rgba(217, 79, 126, 0.22); --starlight: #d94f7e; --starlight-bright: #b23a63; --starlight-soft: rgba(217, 79, 126, 0.14); --nebula-pink: #e878a8; --nebula-soft: rgba(244, 168, 193, 0.28); --sky-blue: #4e9cc9; --sky-soft: rgba(151, 205, 235, 0.32); --lavender: #c78ba3; --warm-yellow: #b3781f; --cream: #fffdfc; --mist-green: #ffe9f1; --bg-start: #fff7f5; --bg-mid: #ffedf2; --bg-end: #fbe3ee; --glass: rgba(255, 255, 255, 0.6); --glass-hover: rgba(255, 240, 246, 0.82); --glass-strong: rgba(255, 253, 254, 0.9); --glass-highlight: rgba(255, 255, 255, 0.92); --border: var(--semi-color-border); --border-bright: rgba(217, 79, 126, 0.48); --text: var(--semi-color-text-0); --muted: var(--semi-color-text-1); --green: #2e8b61; --green-active: rgba(217, 79, 126, 0.15); --danger: rgba(207, 74, 110, 0.12); --danger-bright: rgba(207, 74, 110, 0.5); --focus-ring: 0 0 0 3px rgba(217, 79, 126, 0.24), 0 0 18px rgba(151, 205, 235, 0.35); --shadow: 0 18px 44px rgba(199, 120, 152, 0.2), inset 0 1px 0 var(--glass-highlight); --semi-color-fill-0: rgba(255, 255, 255, 0.6); } html[data-theme="sakura"] ::selection { color: #fff; background: rgba(217, 79, 126, 0.65); } /* ---- 2. 天光背景：暖云白 + 晨粉 + 一角夏空蓝 ---- */ html[data-theme="sakura"] { background: var(--bg-start); } html[data-theme="sakura"] body { color: var(--text); background: radial-gradient(ellipse at 8% 0%, rgba(255, 214, 228, 0.85), transparent 42%), radial-gradient(ellipse at 92% 6%, rgba(198, 228, 246, 0.72), transparent 38%), radial-gradient(ellipse at 78% 96%, rgba(255, 202, 221, 0.55), transparent 42%), radial-gradient(ellipse at 30% 62%, rgba(255, 236, 216, 0.5), transparent 40%), linear-gradient(160deg, var(--bg-start) 0%, var(--bg-mid) 48%, var(--bg-end) 100%); } /* 星点换成失焦的「光斑花瓣」，像阳光穿过花枝落下的碎光。 */ html[data-theme="sakura"] body::before { opacity: 0.55; background-image: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0 3px, transparent 9px), radial-gradient(circle at 70% 30%, rgba(255, 189, 211, 0.8) 0 4px, transparent 11px), radial-gradient(circle at 40% 74%, rgba(255, 214, 228, 0.75) 0 3px, transparent 9px); background-size: 240px 240px, 360px 360px, 300px 300px; filter: blur(1px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) 96%); } /* body::after 的微风云雾用的是 --sky-soft/--nebula-soft/--starlight-soft， 令牌覆盖后自动变成粉蓝雾，无需重写。 */ /* ---- 3. 玻璃面板：粉白毛玻璃，白色高光边看得见「玻璃」 ---- */ html[data-theme="sakura"] .glass { border-color: transparent; background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 241, 246, 0.5)) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 168, 193, 0.55) 46%, rgba(151, 205, 235, 0.6)) border-box; backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); box-shadow: 0 24px 60px rgba(199, 120, 152, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.92); } html[data-theme="sakura"] .feature-sidebar, html[data-theme="sakura"] .category-sidebar, html[data-theme="sakura"] .main-panel { border-color: transparent; } html[data-theme="sakura"] .feature-sidebar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 238, 245, 0.55)) padding-box, linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 168, 193, 0.5)) border-box; box-shadow: 0 22px 52px rgba(199, 120, 152, 0.2), inset 1px 0 0 rgba(255, 255, 255, 0.9); } html[data-theme="sakura"] .category-sidebar { background: radial-gradient(circle at 100% 0, rgba(198, 228, 246, 0.35), transparent 32%), linear-gradient(155deg, rgba(255, 255, 255, 0.7), rgba(255, 238, 245, 0.52)) padding-box, linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(244, 168, 193, 0.48), rgba(151, 205, 235, 0.45)) border-box; } html[data-theme="sakura"] .main-panel { background: radial-gradient(circle at 98% 0, rgba(244, 168, 193, 0.2), transparent 30%), radial-gradient(circle at 2% 100%, rgba(198, 228, 246, 0.24), transparent 34%), linear-gradient(150deg, rgba(255, 255, 255, 0.66), rgba(255, 241, 247, 0.46)) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(244, 168, 193, 0.42) 48%, rgba(151, 205, 235, 0.5)) border-box; } /* 顶部霓虹丝带 → 樱粉到夏空蓝的柔光丝带 */ html[data-theme="sakura"] .main-panel::before { background: linear-gradient(90deg, transparent, var(--nebula-pink), #f6c6d8, var(--sky-blue), transparent); box-shadow: 0 0 12px rgba(244, 168, 193, 0.55); opacity: 0.75; } /* ---- 4. 左侧功能导航 ---- */ html[data-theme="sakura"] .feature-button { color: var(--muted); } html[data-theme="sakura"] .feature-button:hover { color: var(--text); border-color: rgba(217, 79, 126, 0.2); background: linear-gradient(135deg, rgba(244, 168, 193, 0.28), rgba(198, 228, 246, 0.24)); box-shadow: 0 10px 22px rgba(199, 120, 152, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.85); } html[data-theme="sakura"] .feature-button.active { color: var(--starlight-bright); border-color: rgba(217, 79, 126, 0.3); background: linear-gradient(135deg, rgba(244, 168, 193, 0.42), rgba(255, 255, 255, 0.5) 56%, rgba(198, 228, 246, 0.35)); box-shadow: 0 0 20px rgba(244, 168, 193, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9); } html[data-theme="sakura"] .feature-button.active::before { background: linear-gradient(180deg, var(--nebula-pink), var(--starlight)); box-shadow: 0 0 10px rgba(232, 120, 168, 0.7); } html[data-theme="sakura"] .feature-button.active .feature-icon, html[data-theme="sakura"] .mobile-tab-button.active .mobile-tab-icon { filter: drop-shadow(0 2px 6px rgba(217, 79, 126, 0.35)); } html[data-theme="sakura"] .feature-button:focus-visible, html[data-theme="sakura"] .game-list-item:focus-visible, html[data-theme="sakura"] .game-pill:focus-visible { color: var(--text); border-color: var(--border-bright); box-shadow: var(--focus-ring); } html[data-theme="sakura"] .feature-button:hover .feature-drag-hint, html[data-theme="sakura"] .feature-button.dragging .feature-drag-hint { color: var(--starlight-bright); } /* ---- 5. 分类侧栏 ---- */ html[data-theme="sakura"] .category-title { color: var(--text); } html[data-theme="sakura"] .category-head { border-bottom-color: rgba(217, 79, 126, 0.16); } html[data-theme="sakura"] .category-item:hover, html[data-theme="sakura"] .game-list-item:hover, html[data-theme="sakura"] .mobile-tab-button:hover { color: var(--text); border-color: rgba(217, 79, 126, 0.16); background: linear-gradient(90deg, rgba(244, 168, 193, 0.24), rgba(198, 228, 246, 0.2)); } html[data-theme="sakura"] .category-item.active, html[data-theme="sakura"] .game-list-item.active, html[data-theme="sakura"] .mobile-tab-button.active, html[data-theme="sakura"] .game-pill.active { color: var(--starlight-bright); border-color: rgba(217, 79, 126, 0.28); background: linear-gradient(90deg, rgba(244, 168, 193, 0.4), rgba(255, 255, 255, 0.55), rgba(198, 228, 246, 0.28)); box-shadow: 0 10px 22px rgba(199, 120, 152, 0.18), inset 3px 0 0 rgba(217, 79, 126, 0.72); } html[data-theme="sakura"] .secondary-sidebar-toggle { color: var(--starlight-bright); border-color: rgba(217, 79, 126, 0.32); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 233, 241, 0.96)); box-shadow: 0 0 18px rgba(244, 168, 193, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.95); } html[data-theme="sakura"] .secondary-sidebar-toggle:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 222, 234, 0.98)); } /* ---- 6. 搜索区与页头 ---- */ html[data-theme="sakura"] .search-shell { border-bottom-color: rgba(217, 79, 126, 0.14); background: rgba(255, 250, 251, 0.82); box-shadow: 0 14px 30px rgba(199, 120, 152, 0.14); } html[data-theme="sakura"] .search-box, html[data-theme="sakura"] .engine-tabs, html[data-theme="sakura"] .stock-search-form, html[data-theme="sakura"] .stock-filter-search { border-color: rgba(217, 79, 126, 0.22); background: rgba(255, 255, 255, 0.66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); } html[data-theme="sakura"] .search-box:focus-within, html[data-theme="sakura"] .stock-search-form:focus-within, html[data-theme="sakura"] .stock-filter-search:focus-within { border-color: var(--starlight); background: rgba(255, 255, 255, 0.85); box-shadow: var(--focus-ring), 0 10px 22px rgba(199, 120, 152, 0.16); } html[data-theme="sakura"] .search-input, html[data-theme="sakura"] .stock-search-input { color: var(--text); } html[data-theme="sakura"] .search-input::placeholder, html[data-theme="sakura"] .stock-search-input::placeholder { color: var(--semi-color-text-2); } html[data-theme="sakura"] .engine-tab { color: var(--muted); } html[data-theme="sakura"] .engine-tab:hover, html[data-theme="sakura"] .engine-tab.active { color: var(--starlight-bright); background: linear-gradient(135deg, rgba(244, 168, 193, 0.4), rgba(255, 255, 255, 0.6)); box-shadow: 0 8px 16px rgba(199, 120, 152, 0.18); } /* ---- 7. 通用按钮 / 徽标 ---- */ html[data-theme="sakura"] .config-btn, html[data-theme="sakura"] .icon-add, html[data-theme="sakura"] .site-action.edit, html[data-theme="sakura"] .stock-icon-button, html[data-theme="sakura"] .stock-action, html[data-theme="sakura"] .stock-table-action, html[data-theme="sakura"] .schulte-btn, html[data-theme="sakura"] .modal-btn, html[data-theme="sakura"] .modal-close, html[data-theme="sakura"] .emoji-auto, html[data-theme="sakura"] .emoji-choice, html[data-theme="sakura"] .stock-daily-filter, html[data-theme="sakura"] .stock-daily-add, html[data-theme="sakura"] .stock-watch-group { color: var(--text); border-color: rgba(217, 79, 126, 0.24); background: rgba(255, 255, 255, 0.62); } html[data-theme="sakura"] .config-btn:hover, html[data-theme="sakura"] .icon-add:hover, html[data-theme="sakura"] .site-action.edit:hover, html[data-theme="sakura"] .stock-icon-button:hover, html[data-theme="sakura"] .stock-action:hover, html[data-theme="sakura"] .stock-table-action:hover, html[data-theme="sakura"] .schulte-btn:hover, html[data-theme="sakura"] .modal-btn:hover, html[data-theme="sakura"] .modal-close:hover, html[data-theme="sakura"] .emoji-auto:hover, html[data-theme="sakura"] .emoji-choice:hover, html[data-theme="sakura"] .stock-daily-filter:hover, html[data-theme="sakura"] .stock-daily-add:hover { color: var(--starlight-bright); border-color: rgba(217, 79, 126, 0.45); background: rgba(255, 236, 243, 0.88); } html[data-theme="sakura"] .primary-btn, html[data-theme="sakura"] .schulte-btn.primary, html[data-theme="sakura"] .modal-btn.primary, html[data-theme="sakura"] .settings-card .primary-btn { color: #fff; background: linear-gradient(135deg, #c4416f, #e0608c); box-shadow: 0 12px 26px rgba(196, 65, 111, 0.32); } html[data-theme="sakura"] .primary-btn:hover, html[data-theme="sakura"] .schulte-btn.primary:hover, html[data-theme="sakura"] .modal-btn.primary:hover { background: linear-gradient(135deg, #b23a63, #d9527f); } html[data-theme="sakura"] .count-badge, html[data-theme="sakura"] .stock-badge { color: var(--muted); border-color: rgba(217, 79, 126, 0.22); background: linear-gradient(135deg, rgba(244, 168, 193, 0.24), rgba(255, 255, 255, 0.5)); } /* ---- 8. 卡片 ---- */ html[data-theme="sakura"] .site-card, html[data-theme="sakura"] .settings-card, html[data-theme="sakura"] .game-card, html[data-theme="sakura"] .stock-card, html[data-theme="sakura"] .stock-strategy-card, html[data-theme="sakura"] .feedback-panel, html[data-theme="sakura"] .feedback-card, html[data-theme="sakura"] .modal-card { border: 1px solid rgba(217, 79, 126, 0.18); background: radial-gradient(circle at 100% 0, rgba(198, 228, 246, 0.28), transparent 28%), linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 242, 247, 0.66)); box-shadow: 0 16px 36px rgba(199, 120, 152, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9); } html[data-theme="sakura"] .site-card:hover, html[data-theme="sakura"] .site-card:focus-visible, html[data-theme="sakura"] .stock-strategy-card:hover { border-color: rgba(217, 79, 126, 0.42); background: radial-gradient(circle at 100% 0, rgba(244, 168, 193, 0.3), transparent 30%), linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 236, 243, 0.8)); box-shadow: 0 18px 40px rgba(199, 120, 152, 0.26), 0 0 20px rgba(244, 168, 193, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.95); } html[data-theme="sakura"] .site-card::before, html[data-theme="sakura"] .site-card::after { background: radial-gradient(circle, rgba(244, 168, 193, 0.35), transparent 68%); } html[data-theme="sakura"] .site-name { color: var(--text); } html[data-theme="sakura"] .site-favicon { background: rgba(255, 255, 255, 0.85); box-shadow: 0 4px 10px rgba(199, 120, 152, 0.2); } html[data-theme="sakura"] .add-site-card { color: var(--muted); border-color: rgba(217, 79, 126, 0.34); background: rgba(255, 255, 255, 0.4); } html[data-theme="sakura"] .add-site-card:hover, html[data-theme="sakura"] .add-site-card:focus-visible { color: var(--starlight-bright); border-color: var(--starlight); background: rgba(255, 236, 243, 0.8); box-shadow: 0 14px 28px rgba(199, 120, 152, 0.2); } html[data-theme="sakura"] .site-action { color: var(--muted); background: rgba(255, 255, 255, 0.8); } html[data-theme="sakura"] .site-action.delete { color: var(--semi-color-danger); } html[data-theme="sakura"] .site-action.delete:hover { color: #fff; background: var(--semi-color-danger); } html[data-theme="sakura"] .content-section, html[data-theme="sakura"] .stock-section, html[data-theme="sakura"] .game-header, html[data-theme="sakura"] .schulte-panel { border-color: rgba(217, 79, 126, 0.16); background: linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 243, 248, 0.5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); } html[data-theme="sakura"] .game-card, html[data-theme="sakura"] .wheel-config, html[data-theme="sakura"] .wheel-stage, html[data-theme="sakura"] .stock-overview-card, html[data-theme="sakura"] .stock-chart-card, html[data-theme="sakura"] .strategy-card, html[data-theme="sakura"] .strategy-summary-card, html[data-theme="sakura"] .strategy-stock-card, html[data-theme="sakura"] .stock-daily-row, html[data-theme="sakura"] .stock-quote-table-wrap, html[data-theme="sakura"] .stock-empty, html[data-theme="sakura"] .strategy-empty, html[data-theme="sakura"] .empty-state { border-color: rgba(217, 79, 126, 0.16); background: rgba(255, 255, 255, 0.62); box-shadow: 0 12px 28px rgba(199, 120, 152, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85); } html[data-theme="sakura"] .wheel-option-item, html[data-theme="sakura"] .wheel-result, html[data-theme="sakura"] .schulte-board-wrap, html[data-theme="sakura"] .schulte-stat, html[data-theme="sakura"] .memory-stat-card, html[data-theme="sakura"] .card-front { border-color: rgba(217, 79, 126, 0.16); background: rgba(255, 252, 253, 0.72); box-shadow: 0 8px 20px rgba(199, 120, 152, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85); } /* ---- 9. 输入控件 ---- */ html[data-theme="sakura"] .input, html[data-theme="sakura"] .textarea, html[data-theme="sakura"] .select, html[data-theme="sakura"] .stock-select, html[data-theme="sakura"] .stock-input, html[data-theme="sakura"] .stock-filter-input, html[data-theme="sakura"] .wheel-option-input, html[data-theme="sakura"] .wheel-options-input, html[data-theme="sakura"] .settings-input { color: var(--text); border-color: rgba(217, 79, 126, 0.24); background: rgba(255, 255, 255, 0.78); } html[data-theme="sakura"] .input:focus, html[data-theme="sakura"] .textarea:focus, html[data-theme="sakura"] .select:focus, html[data-theme="sakura"] .stock-select:focus, html[data-theme="sakura"] .stock-input:focus, html[data-theme="sakura"] .stock-filter-input:focus, html[data-theme="sakura"] .wheel-option-input:focus, html[data-theme="sakura"] .wheel-options-input:focus, html[data-theme="sakura"] .settings-input:focus { border-color: var(--starlight); background: rgba(255, 255, 255, 0.95); } html[data-theme="sakura"] .stock-select option { color: var(--text); background: #fff; } html[data-theme="sakura"] .field label, html[data-theme="sakura"] .emoji-label { color: var(--muted); } /* ---- 10. 弹窗与提示 ---- */ html[data-theme="sakura"] .modal-backdrop, html[data-theme="sakura"] .memory-complete, html[data-theme="sakura"] .schulte-complete { background: rgba(90, 48, 62, 0.32); } html[data-theme="sakura"] .modal, html[data-theme="sakura"] .modal-card, html[data-theme="sakura"] .memory-complete, html[data-theme="sakura"] .schulte-complete { border-color: rgba(217, 79, 126, 0.24); background: radial-gradient(circle at 86% 8%, rgba(244, 168, 193, 0.28), transparent 32%), linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 240, 246, 0.94)); box-shadow: 0 26px 64px rgba(140, 62, 92, 0.28); } html[data-theme="sakura"] .confirm-copy, html[data-theme="sakura"] .schulte-complete p, html[data-theme="sakura"] .memory-complete p { color: var(--muted); } html[data-theme="sakura"] .toast { color: var(--text); border-color: rgba(217, 79, 126, 0.28); background: rgba(255, 251, 252, 0.94); box-shadow: 0 18px 40px rgba(140, 62, 92, 0.24); } html[data-theme="sakura"] .toast.error { color: var(--semi-color-danger); border-color: rgba(207, 74, 110, 0.4); background: rgba(255, 241, 245, 0.96); } /* ---- 11. 设置页 ---- */ html[data-theme="sakura"] .settings-card p, html[data-theme="sakura"] .settings-hint, html[data-theme="sakura"] .settings-action-desc, html[data-theme="sakura"] .settings-action span { color: var(--muted); } html[data-theme="sakura"] .settings-action { color: var(--text); border-color: rgba(217, 79, 126, 0.22); background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 243, 248, 0.62)); } html[data-theme="sakura"] .settings-action:hover, html[data-theme="sakura"] .settings-action:focus-visible { border-color: rgba(217, 79, 126, 0.45); background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 234, 242, 0.82)); box-shadow: 0 12px 28px rgba(199, 120, 152, 0.2), 0 0 16px rgba(244, 168, 193, 0.25); } html[data-theme="sakura"] .settings-action.is-active { border-color: rgba(217, 79, 126, 0.55); background: linear-gradient(135deg, rgba(255, 240, 246, 0.95), rgba(244, 168, 193, 0.4)); box-shadow: 0 12px 28px rgba(199, 120, 152, 0.24), 0 0 18px rgba(244, 168, 193, 0.35); } html[data-theme="sakura"] .settings-status { color: var(--starlight-bright); border-color: rgba(217, 79, 126, 0.28); background: rgba(244, 168, 193, 0.16); } html[data-theme="sakura"] .settings-status.is-success { color: #23744e; border-color: rgba(46, 139, 97, 0.34); background: rgba(46, 139, 97, 0.1); } html[data-theme="sakura"] .settings-status.is-warning { color: #96650f; border-color: rgba(179, 120, 31, 0.32); background: rgba(179, 120, 31, 0.1); } /* ---- 12. 娱乐页外壳（转盘 / 舒尔特 / 记忆） ---- */ html[data-theme="sakura"] .section-title, html[data-theme="sakura"] .stock-section-title, html[data-theme="sakura"] .wheel-config h2, html[data-theme="sakura"] .settings-card h1, html[data-theme="sakura"] .schulte-intro h2 { color: var(--text); text-shadow: none; } html[data-theme="sakura"] .site-desc, html[data-theme="sakura"] .game-list-desc, html[data-theme="sakura"] .coming-card p, html[data-theme="sakura"] .wheel-config > p, html[data-theme="sakura"] .wheel-result-copy, html[data-theme="sakura"] .wheel-option-summary, html[data-theme="sakura"] .schulte-intro p, html[data-theme="sakura"] .schulte-stat span { color: var(--muted); } html[data-theme="sakura"] .wheel-disc { border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 18px 44px rgba(199, 120, 152, 0.28), inset 0 0 0 6px rgba(255, 255, 255, 0.55); } html[data-theme="sakura"] .wheel-center { background: radial-gradient(circle at 35% 28%, #fff, var(--nebula-pink) 58%, #c4416f); box-shadow: 0 10px 26px rgba(199, 120, 152, 0.32); } html[data-theme="sakura"] .wheel-pointer { border-color: transparent transparent var(--starlight); filter: drop-shadow(0 6px 8px rgba(199, 120, 152, 0.4)); } html[data-theme="sakura"] .wheel-result strong { color: #2f7fae; } html[data-theme="sakura"] .schulte-grid { background: rgba(255, 255, 255, 0.5); } html[data-theme="sakura"] .schulte-start-btn, html[data-theme="sakura"] .schulte-start-btn:hover, html[data-theme="sakura"] .schulte-start-btn:focus-visible { color: #fff; background: linear-gradient(135deg, #c4416f, #e0608c); } /* ---- 13. 账号页 ---- */ html[data-theme="sakura"] .account-sync-badge { color: var(--muted); background: rgba(244, 168, 193, 0.18); } html[data-theme="sakura"] .account-sync-badge.is-error { color: var(--semi-color-danger); background: rgba(207, 74, 110, 0.12); } html[data-theme="sakura"] .account-field, html[data-theme="sakura"] .account-subtitle, html[data-theme="sakura"] .account-password-toggle, html[data-theme="sakura"] .account-brand-panel p, html[data-theme="sakura"] .account-register-panel summary { color: var(--muted); } html[data-theme="sakura"] .account-field input { color: var(--text); border-color: rgba(217, 79, 126, 0.24); background: rgba(255, 255, 255, 0.8); } html[data-theme="sakura"] .account-field input:focus { background: rgba(255, 255, 255, 0.96); } html[data-theme="sakura"] .account-field input[readonly] { color: var(--semi-color-text-2); } html[data-theme="sakura"] .account-commerce, html[data-theme="sakura"] .account-auth-panel, html[data-theme="sakura"] .account-profile-card, html[data-theme="sakura"] .account-security-card { border-color: rgba(217, 79, 126, 0.18); background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(255, 242, 247, 0.7)); box-shadow: 0 16px 36px rgba(199, 120, 152, 0.16); } html[data-theme="sakura"] .account-commerce::before { background: rgba(255, 255, 255, 0.4); } html[data-theme="sakura"] .account-error { color: var(--semi-color-danger); } html[data-theme="sakura"] .account-inline-button.danger { color: var(--semi-color-danger); } html[data-theme="sakura"] .account-avatar-picker, html[data-theme="sakura"] .account-avatar-picker small { color: var(--muted); background: transparent; } /* ---- 14. 股票页外壳文字 ---- */ html[data-theme="sakura"] .stock-kicker, html[data-theme="sakura"] .stock-subtitle, html[data-theme="sakura"] .stock-result-meta, html[data-theme="sakura"] .stock-code, html[data-theme="sakura"] .stock-refresh-note, html[data-theme="sakura"] .stock-field label, html[data-theme="sakura"] .stock-filter-group-title, html[data-theme="sakura"] .stock-strategy-desc, html[data-theme="sakura"] .stock-strategy-meta, html[data-theme="sakura"] .stock-daily-code, html[data-theme="sakura"] .stock-daily-index, html[data-theme="sakura"] .stock-daily-ma-legend, html[data-theme="sakura"] .stock-daily-depth-title, html[data-theme="sakura"] .stock-daily-depth-row, html[data-theme="sakura"] .stock-detail-chart-meta, html[data-theme="sakura"] .stock-detail-metrics, html[data-theme="sakura"] .stock-detail-stat span, html[data-theme="sakura"] .stock-drag-handle, html[data-theme="sakura"] .stock-empty, html[data-theme="sakura"] .stock-chip span, html[data-theme="sakura"] .stock-watchlist-table th, html[data-theme="sakura"] .stock-limit-board-stock-code, html[data-theme="sakura"] .stock-limit-board-stock-meta, html[data-theme="sakura"] .stock-limit-board-one-line, html[data-theme="sakura"] .stock-limit-board-chart-placeholder, html[data-theme="sakura"] .stock-daily-quote-code, html[data-theme="sakura"] .stock-daily-stat span { color: var(--muted); } html[data-theme="sakura"] .stock-daily-row { color: var(--text); } /* 报价栏的大数字原本是白字，浅底上要换成深色 */ html[data-theme="sakura"] .stock-daily-quote-name strong, html[data-theme="sakura"] .stock-daily-quote-price strong, html[data-theme="sakura"] .stock-daily-stat strong { color: var(--text); } html[data-theme="sakura"] .stock-daily-stat strong[data-stock-daily-stat="high"] { color: #23985c; } html[data-theme="sakura"] .stock-daily-stat strong[data-stock-daily-stat="low"] { color: #d94848; } /* K线图区域：去掉黑色蒙层，图表画布的颜色由 JS 按主题绘制 */ html[data-theme="sakura"] .stock-daily-canvas-wrap { background: rgba(255, 255, 255, 0.55); } html[data-theme="sakura"] .stock-daily-quote { border-color: rgba(217, 79, 126, 0.18); background: rgba(255, 255, 255, 0.6); } html[data-theme="sakura"] .stock-daily-quote-grid { background: transparent; } html[data-theme="sakura"] .stock-daily-stat { border-right-color: rgba(217, 79, 126, 0.14); border-bottom-color: rgba(217, 79, 126, 0.14); background: rgba(255, 255, 255, 0.5); } html[data-theme="sakura"] .stock-daily-depth-card { background: rgba(255, 255, 255, 0.6); } /* 均线图例的颜色写死在行内样式里，只能用属性选择器压过去 */ html[data-theme="sakura"] .stock-daily-ma-item[style*="#ffd166"] { color: #b3781f !important; } html[data-theme="sakura"] .stock-daily-ma-item[style*="#f78cfa"] { color: #c2547e !important; } html[data-theme="sakura"] .stock-daily-ma-item[style*="#69cbff"] { color: #2f7fae !important; } html[data-theme="sakura"] .stock-daily-ma-item[style*="#a7f070"] { color: #3f8f63 !important; } html[data-theme="sakura"] .stock-daily-ma-item[style*="#ffb86b"] { color: #b3611f !important; } html[data-theme="sakura"] .stock-daily-ma-item[style*="#8f7dff"] { color: #7a5bbf !important; } html[data-theme="sakura"] .stock-search-results { border-color: rgba(217, 79, 126, 0.2); background: rgba(255, 252, 253, 0.97); box-shadow: 0 18px 40px rgba(140, 62, 92, 0.18); } html[data-theme="sakura"] .stock-daily-tooltip { color: var(--text); border-color: rgba(217, 79, 126, 0.24); background: rgba(255, 252, 253, 0.97); box-shadow: 0 12px 28px rgba(140, 62, 92, 0.2); } html[data-theme="sakura"] .stock-quote-table tbody tr:hover, html[data-theme="sakura"] .stock-daily-row:hover { background: rgba(244, 168, 193, 0.14); } /* ---- 15. 反馈 / 审计 ---- */ html[data-theme="sakura"] .audit-record-card { border-color: rgba(217, 79, 126, 0.18); background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 243, 248, 0.62)); } html[data-theme="sakura"] .audit-record-card:hover { border-color: rgba(217, 79, 126, 0.36); background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 236, 243, 0.78)); } html[data-theme="sakura"] .audit-record-card h3 { color: var(--text); } html[data-theme="sakura"] .audit-user { color: var(--muted); } html[data-theme="sakura"] .audit-type-tag { color: var(--sky-blue); border-color: rgba(78, 156, 201, 0.32); background: rgba(151, 205, 235, 0.18); } /* ---- 16. 滚动条与移动端 ---- */ html[data-theme="sakura"] .main-scroll { scrollbar-color: rgba(217, 79, 126, 0.4) transparent; } html[data-theme="sakura"] .category-list::-webkit-scrollbar-thumb, html[data-theme="sakura"] .main-scroll::-webkit-scrollbar-thumb, html[data-theme="sakura"] .stock-daily-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(232, 120, 168, 0.55), rgba(151, 205, 235, 0.45)); } html[data-theme="sakura"] .mobile-tabbar { border-color: rgba(217, 79, 126, 0.2); background: rgba(255, 250, 251, 0.9); box-shadow: 0 -10px 28px rgba(199, 120, 152, 0.18); } @media (max-width: 560px) { html[data-theme="sakura"] .mobile-tab-button.active { color: var(--starlight-bright); background: rgba(244, 168, 193, 0.3); } html[data-theme="sakura"] .mobile-add-category { color: var(--starlight-bright); border-color: rgba(217, 79, 126, 0.32); background: rgba(255, 255, 255, 0.75); } } /* ---- 17. 娱乐模块外壳（fun-games.css 的深色补丁） ---- */ html[data-theme="sakura"] .fun-game-title-icon { background: rgba(255, 255, 255, 0.8); box-shadow: 0 6px 14px rgba(199, 120, 152, 0.2); } html[data-theme="sakura"] .fun-segments { background: rgba(255, 255, 255, 0.55); } html[data-theme="sakura"] .fun-action.secondary, html[data-theme="sakura"] .fun-result button.secondary, html[data-theme="sakura"] .sudoku-tool-grid button { color: var(--text); background: rgba(255, 255, 255, 0.66); border-color: rgba(217, 79, 126, 0.24); } html[data-theme="sakura"] .fun-stat-grid > div { background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 243, 248, 0.6)); border-color: rgba(217, 79, 126, 0.16); } html[data-theme="sakura"] .fun-result { color: var(--text); background: rgba(255, 255, 255, 0.72); border-color: rgba(217, 79, 126, 0.2); } html[data-theme="sakura"] .fun-result.error { color: var(--semi-color-danger); background: rgba(255, 241, 245, 0.9); } html[data-theme="sakura"] .game-category-tab { color: var(--muted); background: rgba(255, 255, 255, 0.6); border-color: rgba(217, 79, 126, 0.2); } html[data-theme="sakura"] .game-category-tab.active { color: var(--starlight-bright); border-color: rgba(217, 79, 126, 0.45); background: linear-gradient(135deg, rgba(244, 168, 193, 0.4), rgba(255, 255, 255, 0.6)); box-shadow: 0 0 14px rgba(244, 168, 193, 0.3); } html[data-theme="sakura"] .game-category-group { border-color: rgba(217, 79, 126, 0.18); background: linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 242, 247, 0.5)); } html[data-theme="sakura"] .game-category-group.is-active { border-color: rgba(217, 79, 126, 0.36); box-shadow: 0 10px 24px rgba(199, 120, 152, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85); } html[data-theme="sakura"] .game-list-record { color: rgba(70, 38, 47, 0.55); } html[data-theme="sakura"] .game-list-icon { background: rgba(217, 79, 126, 0.1); } html[data-theme="sakura"] .game-category-toggle { color: var(--text); background: rgba(255, 255, 255, 0.5); } html[data-theme="sakura"] .game-category-toggle:hover { color: var(--starlight-bright); background: linear-gradient(90deg, rgba(244, 168, 193, 0.3), rgba(198, 228, 246, 0.24)); } html[data-theme="sakura"] .fun-segment:hover, html[data-theme="sakura"] .fun-segment.active, html[data-theme="sakura"] .fun-action:hover, html[data-theme="sakura"] .sudoku-tool-grid button:hover:not(:disabled), html[data-theme="sakura"] .sudoku-tool-grid button.active { color: var(--starlight-bright); border-color: rgba(217, 79, 126, 0.3); background: linear-gradient(135deg, rgba(244, 168, 193, 0.35), rgba(198, 228, 246, 0.2)); } html[data-theme="sakura"] .fun-result button, html[data-theme="sakura"] .memory-sequence-overlay button { color: #fff; background: linear-gradient(135deg, #c4416f, #e0608c); box-shadow: 0 10px 22px rgba(196, 65, 111, 0.3); } /* —— 数独：盘面换成浅色，深色文字才看得清 —— */ html[data-theme="sakura"] .sudoku-board { border-color: rgba(217, 79, 126, 0.4); background: rgba(255, 255, 255, 0.68); } html[data-theme="sakura"] .sudoku-cell { color: var(--text); border-right-color: rgba(217, 79, 126, 0.16); border-bottom-color: rgba(217, 79, 126, 0.16); background: rgba(255, 255, 255, 0.55); } html[data-theme="sakura"] .sudoku-cell:nth-child(9n) { border-right: 0; } html[data-theme="sakura"] .sudoku-cell:nth-child(9n + 3), html[data-theme="sakura"] .sudoku-cell:nth-child(9n + 6) { border-right: 2px solid rgba(217, 79, 126, 0.4); } html[data-theme="sakura"] .sudoku-cell:nth-child(n + 19):nth-child(-n + 27), html[data-theme="sakura"] .sudoku-cell:nth-child(n + 46):nth-child(-n + 54) { border-bottom: 2px solid rgba(217, 79, 126, 0.4); } html[data-theme="sakura"] .sudoku-cell:nth-child(n + 73) { border-bottom: 0; } html[data-theme="sakura"] .sudoku-cell:hover { background: rgba(244, 168, 193, 0.3); } html[data-theme="sakura"] .sudoku-cell.is-given { color: var(--text); background: rgba(255, 228, 238, 0.92); } html[data-theme="sakura"] .sudoku-cell.is-user-entry { color: #2f7fae; background: rgba(151, 205, 235, 0.22); } html[data-theme="sakura"] .sudoku-cell.is-hint { color: #96650f; background: rgba(255, 200, 87, 0.2); } html[data-theme="sakura"] .sudoku-cell.is-related { background: rgba(244, 168, 193, 0.18); } html[data-theme="sakura"] .sudoku-cell.is-same { background: rgba(151, 205, 235, 0.32); } html[data-theme="sakura"] .sudoku-cell.is-selected { background: rgba(232, 120, 168, 0.32); } html[data-theme="sakura"] .sudoku-cell.is-easy-correct { color: #23744e; background: rgba(46, 139, 97, 0.16); box-shadow: inset 0 0 0 1px rgba(46, 139, 97, 0.4); } html[data-theme="sakura"] .sudoku-cell.is-easy-wrong { color: #c23a5c; background: rgba(207, 74, 110, 0.16); box-shadow: inset 0 0 0 1px rgba(207, 74, 110, 0.4); } html[data-theme="sakura"] .sudoku-notes i { color: rgba(70, 38, 47, 0.62); } html[data-theme="sakura"] .sudoku-pause-mask { background: rgba(255, 240, 246, 0.72); } html[data-theme="sakura"] .sudoku-keypad button { color: var(--text); border-color: rgba(217, 79, 126, 0.24); background: rgba(255, 255, 255, 0.72); } html[data-theme="sakura"] .sudoku-keypad button:hover:not(:disabled) { color: var(--starlight-bright); border-color: rgba(217, 79, 126, 0.45); background: rgba(255, 236, 243, 0.9); } html[data-theme="sakura"] .sudoku-legend-swatch.is-given { background: rgba(255, 228, 238, 0.95); } /* —— 扫雷：格子与数字换到浅色系 —— */ html[data-theme="sakura"] .mine-face { border-color: rgba(217, 79, 126, 0.3); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 233, 241, 0.9)); } html[data-theme="sakura"] .mine-board-scroll { background: rgba(255, 255, 255, 0.5); } html[data-theme="sakura"] .mine-cell { color: var(--text); border-color: rgba(217, 79, 126, 0.3); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 236, 243, 0.85)); } html[data-theme="sakura"] .mine-cell:hover:not(:disabled) { border-color: rgba(217, 79, 126, 0.55); } html[data-theme="sakura"] .mine-cell.is-revealed { border-color: rgba(217, 79, 126, 0.14); background: rgba(255, 247, 250, 0.85); } html[data-theme="sakura"] .mine-cell.is-wrong-flag { color: #c23a5c; background: rgba(207, 74, 110, 0.2); } html[data-theme="sakura"] .mine-cell.is-questioned { color: #96650f; background: rgba(255, 200, 87, 0.22); text-shadow: none; } html[data-theme="sakura"] .mine-number-1 { color: #2f7fae; } html[data-theme="sakura"] .mine-number-2 { color: #2e8b61; } html[data-theme="sakura"] .mine-number-3 { color: #c23a5c; } html[data-theme="sakura"] .mine-number-4 { color: #7a5bbf; } html[data-theme="sakura"] .mine-number-5 { color: #b3611f; } html[data-theme="sakura"] .mine-number-6 { color: #1f8a86; } html[data-theme="sakura"] .mine-number-7 { color: #46262f; } html[data-theme="sakura"] .mine-number-8 { color: #6b5560; } /* —— 数字记忆 —— */ html[data-theme="sakura"] .memory-sequence-back { color: var(--text); border-color: rgba(217, 79, 126, 0.3); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 233, 241, 0.88)); } html[data-theme="sakura"] .memory-sequence-duration, html[data-theme="sakura"] .memory-sequence-duration input { color: var(--text); background: rgba(255, 255, 255, 0.72); } html[data-theme="sakura"] .memory-sequence-overlay { background: rgba(255, 240, 246, 0.78); } /* ---- 17.5 塔罗占卜：外壳与文字换浅色，牌面艺术保留神秘深色 ---- */ html[data-theme="sakura"] .tarot-page { --tarot-gold: #a8762a; --tarot-gold-soft: #8a5f1d; --tarot-ink: #fff6f4; --tarot-indigo: #ffe9f1; --tarot-violet: #c77ba3; background: transparent; } html[data-theme="sakura"] .tarot-toolbar { border-color: rgba(217, 79, 126, 0.2); background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 240, 246, 0.66)); } html[data-theme="sakura"] .tarot-spread-tabs button, html[data-theme="sakura"] .tarot-secondary { color: var(--text); border-color: rgba(217, 79, 126, 0.24); background: rgba(255, 255, 255, 0.66); } html[data-theme="sakura"] .tarot-spread-tabs button:hover, html[data-theme="sakura"] .tarot-secondary:hover { color: var(--starlight-bright); border-color: rgba(217, 79, 126, 0.45); background: rgba(255, 236, 243, 0.9); } html[data-theme="sakura"] .tarot-spread-tabs button.active { color: #fff; border-color: rgba(196, 65, 111, 0.6); background: linear-gradient(135deg, #c4416f, #e0608c); } html[data-theme="sakura"] .tarot-table { color: var(--text); border-color: rgba(217, 79, 126, 0.24); background: radial-gradient(circle at 82% 12%, rgba(198, 228, 246, 0.3), transparent 34%), radial-gradient(circle at 14% 86%, rgba(244, 168, 193, 0.28), transparent 36%), linear-gradient(155deg, rgba(255, 255, 255, 0.72), rgba(255, 240, 246, 0.6)); } html[data-theme="sakura"] .tarot-table::before { box-shadow: none; border-color: rgba(217, 79, 126, 0.2); } html[data-theme="sakura"] .tarot-intention h2 { color: var(--text); } html[data-theme="sakura"] .tarot-intention > p { color: var(--muted); } html[data-theme="sakura"] .tarot-intention label { color: var(--text); } html[data-theme="sakura"] .tarot-intention label small { color: var(--semi-color-text-2); } html[data-theme="sakura"] .tarot-intention textarea { color: var(--text); border-color: rgba(217, 79, 126, 0.28); background: rgba(255, 255, 255, 0.8); } html[data-theme="sakura"] .tarot-intention textarea:focus { border-color: var(--starlight); box-shadow: 0 0 0 3px rgba(217, 79, 126, 0.16); } html[data-theme="sakura"] .tarot-primary { color: #fff; background: linear-gradient(135deg, #c4416f, #e0608c); box-shadow: 0 12px 26px rgba(196, 65, 111, 0.32); } html[data-theme="sakura"] .tarot-primary:hover { background: linear-gradient(135deg, #b23a63, #d9527f); } html[data-theme="sakura"] .tarot-quota { color: var(--muted); background: rgba(255, 255, 255, 0.7); border-color: rgba(217, 79, 126, 0.22); } html[data-theme="sakura"] .tarot-reading-head strong, html[data-theme="sakura"] .tarot-reading-stage.is-shuffling > strong, html[data-theme="sakura"] .tarot-reading-status, html[data-theme="sakura"] .tarot-celestial-loader b, html[data-theme="sakura"] .tarot-position-label strong, html[data-theme="sakura"] .tarot-reading-copy h2, html[data-theme="sakura"] .tarot-result-header h2, html[data-theme="sakura"] .tarot-result-position strong, html[data-theme="sakura"] .tarot-card-reading-title h3, html[data-theme="sakura"] .tarot-card-meanings h3, html[data-theme="sakura"] .tarot-synthesis h3, html[data-theme="sakura"] .tarot-suggestions h3, html[data-theme="sakura"] .tarot-history-head strong, html[data-theme="sakura"] .tarot-shuffle-copy > strong { color: var(--text); } html[data-theme="sakura"] .tarot-position-label > span, html[data-theme="sakura"] .tarot-result-position > span, html[data-theme="sakura"] .tarot-result-summary, html[data-theme="sakura"] .tarot-reading-copy blockquote, html[data-theme="sakura"] .tarot-shuffle-status, html[data-theme="sakura"] .tarot-ai-reflection, html[data-theme="sakura"] .tarot-ai-card-reading > div > span { color: var(--muted); } html[data-theme="sakura"] .tarot-progress { color: var(--starlight-bright) !important; border-color: rgba(217, 79, 126, 0.28); background: rgba(255, 255, 255, 0.75); } html[data-theme="sakura"] .tarot-card-slot { border-color: rgba(217, 79, 126, 0.3); background: rgba(255, 255, 255, 0.45); } html[data-theme="sakura"] .tarot-slot-sigil { color: rgba(70, 38, 47, 0.4); } html[data-theme="sakura"] .tarot-card-meanings section, html[data-theme="sakura"] .tarot-synthesis, html[data-theme="sakura"] .tarot-suggestions, html[data-theme="sakura"] .tarot-reading-copy, html[data-theme="sakura"] .tarot-result-card-block, html[data-theme="sakura"] .tarot-card-reading, html[data-theme="sakura"] .tarot-ai-prompt, html[data-theme="sakura"] .tarot-ai-reading, html[data-theme="sakura"] .tarot-ai-question-focus, html[data-theme="sakura"] .tarot-ai-synthesis, html[data-theme="sakura"] .tarot-ai-actions { color: var(--text); border-color: rgba(217, 79, 126, 0.2); background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(255, 242, 247, 0.72)); box-shadow: 0 14px 30px rgba(199, 120, 152, 0.14); } html[data-theme="sakura"] .tarot-ai-prompt h2, html[data-theme="sakura"] .tarot-ai-reading h2, html[data-theme="sakura"] .tarot-ai-reading h3, html[data-theme="sakura"] .tarot-ai-card-reading strong { color: var(--text); } html[data-theme="sakura"] .tarot-ai-warning { color: #96650f; background: rgba(255, 200, 87, 0.16); border-color: rgba(179, 120, 31, 0.35); } html[data-theme="sakura"] .tarot-history { border-color: rgba(217, 79, 126, 0.22); background: rgba(255, 252, 253, 0.94); box-shadow: 0 18px 40px rgba(140, 62, 92, 0.18); } html[data-theme="sakura"] .tarot-history-list > button { color: var(--text); background: rgba(255, 255, 255, 0.7); border-color: rgba(217, 79, 126, 0.2); } html[data-theme="sakura"] .tarot-history-list > button:hover { color: var(--starlight-bright); background: rgba(255, 236, 243, 0.9); } html[data-theme="sakura"] .tarot-history-list > button strong { color: var(--text); } html[data-theme="sakura"] .tarot-modal-layer { background: rgba(90, 48, 62, 0.34); } html[data-theme="sakura"] .tarot-confirm-modal { color: var(--text); border-color: rgba(217, 79, 126, 0.26); background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 240, 246, 0.95)); box-shadow: 0 26px 64px rgba(140, 62, 92, 0.28); } html[data-theme="sakura"] .tarot-modal-header h2, html[data-theme="sakura"] .tarot-modal-emblem b, html[data-theme="sakura"] .tarot-spread-change strong { color: var(--text); } html[data-theme="sakura"] .tarot-modal-close:hover { color: var(--starlight-bright); } html[data-theme="sakura"] .tarot-spread-change, html[data-theme="sakura"] .tarot-modal-footer { background: rgba(255, 240, 246, 0.6); } html[data-theme="sakura"] .tarot-modal-button:hover { color: var(--starlight-bright); } html[data-theme="sakura"] .tarot-modal-button.is-confirm { color: #fff; background: linear-gradient(135deg, #c4416f, #e0608c); } html[data-theme="sakura"] .tarot-orientation { color: var(--muted); background: rgba(255, 255, 255, 0.8); } /* 洗牌仪式：帷幕换成粉纱，深色牌背在浅色帷幕上依然醒目 */ html[data-theme="sakura"] .tarot-shuffle-ritual::before { background: rgba(255, 240, 246, 0.82); } html[data-theme="sakura"] .tarot-shuffle-sigil { color: var(--starlight-bright); } /* ---- 18. 樱花装饰层：飘落画布 + 探入画面的樱花枝 ---- */ .sakura-layer { display: none; } html[data-theme="sakura"] .sakura-layer { display: block; position: fixed; inset: 0; z-index: 55; /* 面板之上、移动端标签栏(80)/弹窗(100)/提示(140)之下 */ pointer-events: none; } html[data-theme="sakura"] .sakura-petal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } html[data-theme="sakura"] .sakura-branch { position: absolute; top: -34px; right: -70px; width: min(24vw, 320px); filter: drop-shadow(0 10px 18px rgba(140, 62, 92, 0.2)); transform-origin: top right; animation: sakuraBranchSway 7s ease-in-out infinite alternate; } @keyframes sakuraBranchSway { from { transform: rotate(0deg); } to { transform: rotate(1.2deg); } } /* 移动端：枝条大部分收进屏幕外，只留几朵花探头，别挡住顶栏按钮 */ @media (max-width: 760px) { html[data-theme="sakura"] .sakura-branch { width: min(48vw, 210px); right: -42px; top: -48px; } } /* 低性能档：停掉枝条摇曳（花瓣数量由 JS 按档位减半） */ html[data-perf="low"] .sakura-branch { animation: none; } /* 减弱动态：枝条静止；花瓣画布由 JS 停用 */ @media (prefers-reduced-motion: reduce) { html[data-theme="sakura"] .sakura-branch { animation: none !important; } }