/* ============================================ DARK MODE THEME Toggle with data-theme="dark" on ============================================ */ [data-theme="dark"] { --bg-deep: #0d0a0c; --bg-surface: #1a1218; --bg-card: #221a1f; --text-primary: #f5eaef; --text-secondary: #bfa8b5; --text-muted: #7a6570; --accent-soft: rgba(233, 30, 140, 0.2); --accent-ultra-soft: rgba(233, 30, 140, 0.08); --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3); --shadow-glow: 0 4px 20px rgba(233, 30, 140, 0.15); } [data-theme="dark"] body { background: var(--bg-deep); color: var(--text-primary); } [data-theme="dark"] .profile-banner-premium { border-color: rgba(233, 30, 140, 0.1); } [data-theme="dark"] .post-card-premium { background: var(--bg-card); border-color: rgba(233, 30, 140, 0.08); } [data-theme="dark"] .tabs-premium { background: var(--bg-surface); border-color: rgba(233, 30, 140, 0.08); } [data-theme="dark"] .tab-premium { color: var(--text-muted); } [data-theme="dark"] .tab-premium.active { color: var(--text-primary); } [data-theme="dark"] .modal-content, [data-theme="dark"] .auth-modal-content { background: var(--bg-surface); border-color: rgba(233, 30, 140, 0.1); } [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--bg-deep); color: var(--text-primary); border-color: rgba(233, 30, 140, 0.15); } [data-theme="dark"] .btn-premium.btn-outline { background: var(--bg-card); color: var(--text-primary); border-color: rgba(233, 30, 140, 0.15); } [data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1a1218 25%, #221a1f 50%, #1a1218 75%); background-size: 200% 100%; } /* Dark mode toggle button */ .theme-toggle { position: fixed; bottom: 24px; left: 24px; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(233, 30, 140, 0.15); background: var(--bg-surface, #fff); color: var(--text-primary, #1a0e14); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 16px rgba(0,0,0,0.1); transition: all 0.3s; z-index: 999; } .theme-toggle:hover { transform: scale(1.1); box-shadow: 0 4px 20px rgba(233, 30, 140, 0.2); }