/* ============================================================================ THEME DEFINITIONS — Neptune (default), Mars, Moon, Venus Each theme overrides the --ts-* CSS custom properties defined in styles.css. Applied via data-theme attribute on . ============================================================================ */ /* ── Additional variables needed for theming (extend :root in styles.css) ── */ :root { --ts-bg-header: rgba(6, 6, 18, 0.88); --ts-bg-deep: #060612; --ts-accent-glow: rgba(102, 126, 234, 0.3); --ts-accent-subtle: rgba(102, 126, 234, 0.15); --ts-accent-faint: rgba(102, 126, 234, 0.08); --ts-shadow-color: rgba(0, 0, 0, 0.3); --ts-divider: rgba(255, 255, 255, 0.06); --ts-highlight: rgba(255, 255, 255, 0.1); --ts-scrollbar-thumb: rgba(255, 255, 255, 0.15); --ts-scrollbar-track: transparent; --ts-particle-color: 255, 255, 255; } /* ── NEPTUNE THEME (default — no overrides needed, matches :root) ── */ :root[data-theme="neptune"] { --ts-scrollbar-thumb: rgba(255, 255, 255, 0.1); } /* ── MARS THEME — Dark crimson, warm red-orange accents ── */ :root[data-theme="mars"] { /* Text colors */ --ts-text-primary: #fff0eb; --ts-text-secondary: rgba(255, 240, 235, 0.75); --ts-text-muted: rgba(255, 240, 235, 0.5); --ts-text-faint: rgba(255, 240, 235, 0.35); --ts-text-accent: #ea6646; --ts-text-error: #ff6b6b; --ts-text-success: #51cf66; /* Background colors */ --ts-bg-page: #0a0200; --ts-bg-card: rgba(32, 14, 14, 0.85); --ts-bg-card-hover: rgba(42, 20, 20, 0.90); --ts-bg-elevated: rgba(32, 14, 14, 0.95); --ts-bg-input: rgba(255, 200, 180, 0.05); --ts-bg-input-focus: rgba(234, 102, 70, 0.08); --ts-bg-overlay: rgba(10, 2, 0, 0.6); --ts-bg-subtle: rgba(255, 200, 180, 0.03); --ts-bg-header: rgba(10, 2, 0, 0.88); --ts-bg-deep: #0a0200; /* Border colors */ --ts-border-default: rgba(255, 180, 160, 0.08); --ts-border-hover: rgba(255, 180, 160, 0.15); --ts-border-focus: rgba(234, 102, 70, 0.5); --ts-border-accent: rgba(234, 102, 70, 0.25); /* Accent / brand */ --ts-accent-primary: #ea6646; --ts-accent-secondary: #a24b6b; --ts-gradient-primary: linear-gradient(135deg, #ea6646 0%, #a24b6b 100%); --ts-accent-error: #ff6b6b; --ts-accent-success: #51cf66; /* Extended theme tokens */ --ts-accent-glow: rgba(234, 102, 70, 0.3); --ts-accent-subtle: rgba(234, 102, 70, 0.15); --ts-accent-faint: rgba(234, 102, 70, 0.08); --ts-shadow-color: rgba(10, 2, 0, 0.4); --ts-divider: rgba(255, 180, 160, 0.06); --ts-highlight: rgba(255, 200, 180, 0.1); --ts-scrollbar-track: transparent; --ts-particle-color: 255, 160, 120; /* Mars Star Wishes Overrides */ --ts-accent-star: #ff9d60; --ts-accent-star-glow: rgba(255, 157, 96, 0.4); --ts-accent-star-subtle: rgba(255, 157, 96, 0.15); --ts-accent-star-faint: rgba(255, 157, 96, 0.08); } /* ── MOON THEME — Light backgrounds, dark text ── */ :root[data-theme="moon"] { /* Text colors - Higher contrast for light backgrounds */ --ts-text-primary: #121226; --ts-text-secondary: #2d2d4d; --ts-text-muted: #4a4a6e; --ts-text-faint: #6a6a8e; --ts-text-accent: #3d52ba; --ts-text-error: #b92d2d; --ts-text-success: #1a712a; /* Background colors */ --ts-bg-page: #f4f4fa; --ts-bg-card: rgba(255, 255, 255, 0.85); --ts-bg-card-hover: rgba(255, 255, 255, 0.95); --ts-bg-elevated: #ffffff; --ts-bg-input: rgba(0, 0, 0, 0.05); --ts-bg-input-focus: rgba(61, 82, 186, 0.08); --ts-bg-overlay: rgba(0, 0, 0, 0.35); --ts-bg-subtle: rgba(0, 0, 0, 0.03); --ts-bg-header: rgba(244, 244, 250, 0.92); --ts-bg-deep: #e0e0e8; /* Border colors - More visible borders */ --ts-border-default: rgba(0, 0, 0, 0.08); --ts-border-hover: rgba(0, 0, 0, 0.15); --ts-border-focus: rgba(61, 82, 186, 0.5); --ts-border-accent: rgba(61, 82, 186, 0.25); /* Accent / brand - Slightly darker for better contrast */ --ts-accent-primary: #3d52ba; --ts-accent-secondary: #4d2673; --ts-gradient-primary: linear-gradient(135deg, #3d52ba 0%, #4d2673 100%); --ts-accent-error: #b92d2d; --ts-accent-success: #1a712a; /* Extended theme tokens */ --ts-accent-glow: rgba(61, 82, 186, 0.15); --ts-accent-subtle: rgba(61, 82, 186, 0.08); --ts-accent-faint: rgba(61, 82, 186, 0.04); --ts-shadow-color: rgba(0, 0, 0, 0.08); --ts-divider: rgba(0, 0, 0, 0.08); --ts-highlight: rgba(0, 0, 0, 0.05); --ts-scrollbar-thumb: rgba(0, 0, 0, 0.15); --ts-scrollbar-track: rgba(0, 0, 0, 0.02); --ts-particle-color: 61, 82, 186; /* Semantic overrides for light theme */ --ts-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); --ts-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08); --ts-text-glow: none; --ts-glass-bg: rgba(255, 255, 255, 0.7); --ts-glass-border: rgba(0, 0, 0, 0.08); /* Button shadows for light theme - subtle */ --ts-shadow-primary: 0 4px 12px rgba(61, 82, 186, 0.15); --ts-shadow-danger: 0 4px 12px rgba(185, 45, 45, 0.15); --ts-shadow-danger-hover: 0 6px 16px rgba(185, 45, 45, 0.25); /* Moon Star Wishes Overrides */ --ts-accent-star: #4a5fc6; --ts-accent-star-glow: rgba(74, 95, 200, 0.25); --ts-accent-star-subtle: rgba(74, 95, 200, 0.15); --ts-accent-star-faint: rgba(74, 95, 200, 0.08); } /* SEARCH & DROPDOWN FIXES FOR MOON */ :root[data-theme="moon"] .media-search-results, :root[data-theme="moon"] .search-suggestions, :root[data-theme="moon"] .autocomplete-results { background: var(--ts-bg-elevated) !important; border-color: var(--ts-border-hover) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important; } :root[data-theme="moon"] .media-search-item:hover, :root[data-theme="moon"] .media-result-item:hover { background: var(--ts-bg-input) !important; } :root[data-theme="moon"] .media-search-item-title, :root[data-theme="moon"] .media-result-title { color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .media-search-item-meta, :root[data-theme="moon"] .media-result-meta { color: var(--ts-text-muted) !important; } :root[data-theme="moon"] .no-image-placeholder { background: var(--ts-bg-subtle) !important; color: var(--ts-text-secondary) !important; } /* Moon — Notifications Dropdown Fixes */ :root[data-theme="moon"] .notification-dropdown { background: var(--ts-bg-elevated) !important; border-color: var(--ts-border-hover) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important; } :root[data-theme="moon"] .notification-item:hover { background: var(--ts-bg-input) !important; } :root[data-theme="moon"] .notification-item.unread { background: var(--ts-accent-faint) !important; } :root[data-theme="moon"] .notification-item.unread:hover { background: var(--ts-accent-subtle) !important; } :root[data-theme="moon"] .notification-text { color: var(--ts-text-secondary) !important; } :root[data-theme="moon"] .notification-time { color: var(--ts-text-muted) !important; } /* ── VENUS THEME — Dark rose/pink, warm rose-gold accents ── */ :root[data-theme="venus"] { /* Text colors */ --ts-text-primary: #fff0f5; --ts-text-secondary: rgba(255, 240, 245, 0.75); --ts-text-muted: rgba(255, 240, 245, 0.5); --ts-text-faint: rgba(255, 240, 245, 0.35); --ts-text-accent: #e86b9e; --ts-text-error: #ff6b6b; --ts-text-success: #51cf66; /* Background colors */ --ts-bg-page: #0e0610; --ts-bg-card: rgba(30, 12, 24, 0.85); --ts-bg-card-hover: rgba(40, 18, 32, 0.90); --ts-bg-elevated: rgba(30, 12, 24, 0.95); --ts-bg-input: rgba(255, 180, 210, 0.05); --ts-bg-input-focus: rgba(232, 107, 158, 0.08); --ts-bg-overlay: rgba(14, 6, 16, 0.6); --ts-bg-subtle: rgba(255, 180, 210, 0.03); --ts-bg-header: rgba(14, 6, 16, 0.88); --ts-bg-deep: #0e0610; /* Border colors */ --ts-border-default: rgba(255, 180, 210, 0.08); --ts-border-hover: rgba(255, 180, 210, 0.15); --ts-border-focus: rgba(232, 107, 158, 0.5); --ts-border-accent: rgba(232, 107, 158, 0.25); /* Accent / brand */ --ts-accent-primary: #e86b9e; --ts-accent-secondary: #b44daa; --ts-gradient-primary: linear-gradient(135deg, #e86b9e 0%, #b44daa 100%); --ts-accent-error: #ff6b6b; --ts-accent-success: #51cf66; /* Extended theme tokens */ --ts-accent-glow: rgba(232, 107, 158, 0.3); --ts-accent-subtle: rgba(232, 107, 158, 0.15); --ts-accent-faint: rgba(232, 107, 158, 0.08); --ts-shadow-color: rgba(14, 6, 16, 0.4); --ts-divider: rgba(255, 180, 210, 0.06); --ts-highlight: rgba(255, 180, 210, 0.1); --ts-scrollbar-track: transparent; --ts-particle-color: 255, 140, 180; /* Venus Star Wishes Overrides */ --ts-accent-star: #ffb0d0; --ts-accent-star-glow: rgba(255, 176, 208, 0.4); --ts-accent-star-subtle: rgba(255, 176, 208, 0.15); --ts-accent-star-faint: rgba(255, 176, 208, 0.08); } /* ── Mars theme: dialog overrides ── */ :root[data-theme="mars"] .ts-dialog { background: radial-gradient(1200px 600px at 10% 10%, rgba(234, 102, 70, 0.18), rgba(0, 0, 0, 0) 60%), radial-gradient(900px 500px at 90% 0%, rgba(162, 75, 107, 0.14), rgba(0, 0, 0, 0) 55%), rgba(10, 2, 0, 0.92) !important; } :root[data-theme="mars"] .ts-dialog-btn-primary { box-shadow: 0 10px 24px rgba(234, 102, 70, 0.24) !important; } :root[data-theme="mars"] .ts-dialog-btn-primary:hover { box-shadow: 0 12px 30px rgba(234, 102, 70, 0.34) !important; } /* ── Venus theme: dialog overrides ── */ :root[data-theme="venus"] .ts-dialog { background: radial-gradient(1200px 600px at 10% 10%, rgba(232, 107, 158, 0.18), rgba(0, 0, 0, 0) 60%), radial-gradient(900px 500px at 90% 0%, rgba(180, 77, 170, 0.14), rgba(0, 0, 0, 0) 55%), rgba(14, 6, 16, 0.92) !important; } :root[data-theme="venus"] .ts-dialog-btn-primary { box-shadow: 0 10px 24px rgba(232, 107, 158, 0.24) !important; } :root[data-theme="venus"] .ts-dialog-btn-primary:hover { box-shadow: 0 12px 30px rgba(232, 107, 158, 0.34) !important; } /* ── Moon theme: additional element-level overrides ── */ /* Scrollbars */ :root[data-theme="moon"] ::-webkit-scrollbar-thumb { background: var(--ts-scrollbar-thumb) !important; } :root[data-theme="moon"] ::-webkit-scrollbar-track { background: var(--ts-scrollbar-track) !important; } /* Box shadows — invert dark shadows to subtle light ones */ :root[data-theme="moon"] .settings-card, :root[data-theme="moon"] .notification-item, :root[data-theme="moon"] .message-thread, :root[data-theme="moon"] .stream-card, :root[data-theme="moon"] .thought-card, :root[data-theme="moon"] .circle-card, :root[data-theme="moon"] .past-circle-card, :root[data-theme="moon"] .entry-card { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } /* Toast notifications */ :root[data-theme="moon"] .toast { background: var(--ts-bg-elevated) !important; color: var(--ts-text-primary) !important; border: 1px solid var(--ts-border-default) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } /* Bottom navigation */ :root[data-theme="moon"] .mobile-bottom-nav { background: rgba(240, 240, 248, 0.95) !important; border-top-color: var(--ts-border-default) !important; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06) !important; } :root[data-theme="moon"] .mobile-bottom-nav .nav-item { color: var(--ts-text-muted) !important; } :root[data-theme="moon"] .mobile-bottom-nav .nav-item.active { color: var(--ts-accent-primary) !important; } :root[data-theme="moon"] .mobile-bottom-nav .nav-label { color: inherit !important; } /* Burger drawer */ :root[data-theme="moon"] .burger-drawer { background: var(--ts-bg-elevated) !important; box-shadow: 8px 0 32px rgba(0, 0, 0, 0.08) !important; } :root[data-theme="moon"] .burger-drawer-backdrop { background: rgba(0, 0, 0, 0.2) !important; } /* Desktop top nav */ :root[data-theme="moon"] .desktop-top-nav { background: rgba(240, 240, 248, 0.92) !important; border-bottom-color: var(--ts-border-default) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important; } /* Desktop burger button lines — dark on Moon */ :root[data-theme="moon"] .desktop-burger-line { background: var(--ts-text-muted) !important; } :root[data-theme="moon"] .desktop-burger-btn { border-color: var(--ts-border-default) !important; } :root[data-theme="moon"] .desktop-burger-btn:hover { background: rgba(0, 0, 0, 0.06) !important; border-color: var(--ts-border-hover) !important; } :root[data-theme="moon"] .desktop-burger-btn:hover .desktop-burger-line { background: var(--ts-text-secondary) !important; } /* Page headers */ :root[data-theme="moon"] .page-header, :root[data-theme="moon"] .circle-page-header, :root[data-theme="moon"] .stream-page-header, :root[data-theme="moon"] .messages-header { background: rgba(240, 240, 248, 0.88) !important; } /* Toggle switches */ :root[data-theme="moon"] .toggle-slider { background-color: rgba(0, 0, 0, 0.15) !important; } :root[data-theme="moon"] input:checked+.toggle-slider { background-color: var(--ts-accent-primary) !important; } :root[data-theme="moon"] .toggle-slider::before, :root[data-theme="moon"] .toggle-slider:before { background-color: #ffffff !important; } /* Dropdown menus */ :root[data-theme="moon"] .dropdown-menu, :root[data-theme="moon"] .quick-add-modal { background: var(--ts-bg-elevated); box-shadow: var(--ts-card-shadow-hover); } /* Modals and overlays */ :root[data-theme="moon"] .ts-dialog { background: var(--ts-bg-elevated) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; border-color: var(--ts-border-default) !important; } :root[data-theme="moon"] .ts-dialog-btn-primary { box-shadow: var(--ts-shadow-primary); } :root[data-theme="moon"] .ts-dialog-btn-primary:hover { box-shadow: var(--ts-shadow-primary-hover); } :root[data-theme="moon"] .ts-dialog-backdrop, :root[data-theme="moon"] .filter-modal-backdrop { background: rgba(0, 0, 0, 0.2) !important; } /* Inputs and textareas */ :root[data-theme="moon"] input::placeholder, :root[data-theme="moon"] textarea::placeholder, :root[data-theme="moon"] .search-input::placeholder { color: var(--ts-text-muted) !important; } /* SVG nav icons — make them dark on Moon */ :root[data-theme="moon"] .nav-icon, :root[data-theme="moon"] .nav-item svg { color: var(--ts-text-muted); } :root[data-theme="moon"] .nav-item.active .nav-icon, :root[data-theme="moon"] .nav-item.active svg { color: var(--ts-accent-primary); } /* Filter buttons and tags */ :root[data-theme="moon"] .filter-btn, :root[data-theme="moon"] .filter-option { color: var(--ts-text-secondary); } /* Scrollbars — light theme variant */ :root[data-theme="moon"] * { scrollbar-color: var(--ts-scrollbar-thumb) var(--ts-scrollbar-track); } /* Action sheets / bottom sheets */ :root[data-theme="moon"] .action-sheet { background: var(--ts-bg-elevated) !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important; } /* Text shadows — swap white glow for subtle dark on Moon */ :root[data-theme="moon"] .thought-title, :root[data-theme="moon"] .stream-title, :root[data-theme="moon"] .world-greeting, :root[data-theme="moon"] .page-title { text-shadow: none !important; } /* Glass-morphism buttons — use dark tints on light bg */ :root[data-theme="moon"] .filter-toggle-btn, :root[data-theme="moon"] .public-filter-toggle-btn { background: rgba(0, 0, 0, 0.05) !important; border-color: var(--ts-border-default) !important; } :root[data-theme="moon"] .filter-toggle-btn:hover, :root[data-theme="moon"] .public-filter-toggle-btn:hover { background: rgba(0, 0, 0, 0.08) !important; border-color: var(--ts-border-hover) !important; } :root[data-theme="moon"] .filter-toggle-btn.active, :root[data-theme="moon"] .public-filter-toggle-btn.active { background: rgba(90, 111, 214, 0.12) !important; border-color: var(--ts-accent-primary) !important; } /* Filter options */ :root[data-theme="moon"] .filter-option { background: rgba(0, 0, 0, 0.03) !important; border-color: var(--ts-border-default) !important; } :root[data-theme="moon"] .filter-option:hover { background: rgba(0, 0, 0, 0.06) !important; border-color: var(--ts-border-hover) !important; } :root[data-theme="moon"] .filter-option.active { background: rgba(90, 111, 214, 0.12) !important; border-color: var(--ts-accent-primary) !important; box-shadow: 0 0 12px rgba(90, 111, 214, 0.15) !important; } /* Loading skeleton */ :root[data-theme="moon"] .loading-skeleton, :root[data-theme="moon"] .skeleton { background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 100%) !important; background-size: 200% 100%; } /* Welcome/landing decorative elements — tone down glow effects */ :root[data-theme="moon"] .welcome-particle { background: rgba(90, 111, 214, 0.6) !important; box-shadow: 0 0 10px rgba(90, 111, 214, 0.4), 0 0 20px rgba(90, 111, 214, 0.2) !important; } :root[data-theme="moon"] .welcome-greeting { text-shadow: none !important; } :root[data-theme="moon"] .welcome-subtitle { text-shadow: none !important; } /* Form inputs */ :root[data-theme="moon"] .form-input, :root[data-theme="moon"] .form-textarea, :root[data-theme="moon"] input[type="text"], :root[data-theme="moon"] input[type="email"], :root[data-theme="moon"] input[type="password"], :root[data-theme="moon"] textarea, :root[data-theme="moon"] select { caret-color: var(--ts-text-primary); } /* Quick-add modal subtitle */ :root[data-theme="moon"] .quick-add-subtitle { color: var(--ts-text-secondary) !important; } /* Background canvas */ :root[data-theme="moon"] #backgroundCanvas { opacity: 0.5; } /* Notification badges — keep red accent visible */ :root[data-theme="moon"] .notification-badge, :root[data-theme="moon"] .nav-badge { background: var(--ts-accent-error) !important; color: #ffffff !important; } /* Profile avatar borders */ :root[data-theme="moon"] .notification-avatar, :root[data-theme="moon"] .notification-avatar-page { border-color: var(--ts-border-default) !important; } /* Select dropdown arrow — swap to dark on Moon */ :root[data-theme="moon"] .sync-room-form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(0,0,0,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* ═══════════════════════════════════════════════════════════════ COMPREHENSIVE MOON THEME OVERRIDES FOR INLINE STYLES ═══════════════════════════════════════════════════════════════ */ /* Messages page */ :root[data-theme="moon"] .chat-header { background: rgba(240, 240, 248, 0.96) !important; border-bottom: 1px solid var(--ts-border-default) !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important; } :root[data-theme="moon"] .chat-header-name { color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .chat-header-status { color: var(--ts-text-muted) !important; } :root[data-theme="moon"] .chat-call-btn { color: var(--ts-accent-primary) !important; background: rgba(74, 95, 198, 0.08) !important; } :root[data-theme="moon"] .chat-call-btn:hover { background: rgba(74, 95, 198, 0.15) !important; } :root[data-theme="moon"] .chat-back-btn { background: rgba(0, 0, 0, 0.06) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-secondary) !important; } :root[data-theme="moon"] .chat-back-btn:hover, :root[data-theme="moon"] .group-back-btn:hover { background: rgba(0, 0, 0, 0.10) !important; } :root[data-theme="moon"] .chat-date-separator span { color: var(--ts-text-faint) !important; } :root[data-theme="moon"] .message-group.received .message-bubble { background: rgba(0, 0, 0, 0.04) !important; color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .message-bubble.deleted { color: var(--ts-text-muted) !important; background: rgba(0, 0, 0, 0.02) !important; } /* Messages — New Message overlay */ :root[data-theme="moon"] .new-msg-overlay { background: var(--ts-bg-page) !important; } :root[data-theme="moon"] .new-msg-close { background: rgba(0, 0, 0, 0.06) !important; border-color: var(--ts-border-default) !important; } :root[data-theme="moon"] .new-msg-close:hover { background: rgba(0, 0, 0, 0.10) !important; } :root[data-theme="moon"] .new-msg-search { background: rgba(0, 0, 0, 0.04) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .new-msg-search:focus { border-color: var(--ts-border-focus) !important; } :root[data-theme="moon"] .new-msg-user-item:hover { background: rgba(0, 0, 0, 0.04) !important; } /* Messages — Context menu */ :root[data-theme="moon"] .msg-context-menu { background: var(--ts-bg-elevated) !important; border-color: var(--ts-border-default) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; } /* Messages — DM call overlays */ :root[data-theme="moon"] .dm-call-overlay { background: var(--ts-bg-page) !important; } :root[data-theme="moon"] .dm-call-incoming-inner { background: var(--ts-bg-elevated) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1) !important; } /* Messages — conversation header / input area */ :root[data-theme="moon"] .chat-input-area { background: rgba(240, 240, 248, 0.96) !important; border-top: 1px solid var(--ts-border-default) !important; } :root[data-theme="moon"] .chat-input { background: rgba(0, 0, 0, 0.04) !important; color: var(--ts-text-primary) !important; border-color: var(--ts-border-default) !important; } :root[data-theme="moon"] .chat-input:focus { border-color: var(--ts-border-focus) !important; } /* Stream page - Live Hub groups and cards */ :root[data-theme="moon"] .group-card, :root[data-theme="moon"] .stream-card { background: var(--ts-bg-card) !important; } :root[data-theme="moon"] .group-card-name, :root[data-theme="moon"] .stream-title { color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .group-card-count, :root[data-theme="moon"] .stream-description { color: var(--ts-text-muted) !important; } /* Tabs — active state: solid purple gradient for visibility on Moon */ :root[data-theme="moon"] .sr-tab.active, :root[data-theme="moon"] .stream-tab.active, :root[data-theme="moon"] .sr-vis-btn.active { background: var(--ts-gradient-primary) !important; color: #ffffff !important; box-shadow: 0 2px 10px rgba(74, 95, 198, 0.25) !important; } :root[data-theme="moon"] .sr-tab:not(.active), :root[data-theme="moon"] .stream-tab:not(.active) { color: var(--ts-text-muted) !important; } /* Gradient buttons — keep white text on gradient backgrounds */ :root[data-theme="moon"] .submit-poll-btn, :root[data-theme="moon"] .submit-goal-btn, :root[data-theme="moon"] .submit-wish-btn, :root[data-theme="moon"] .go-live-btn, :root[data-theme="moon"] .stream-filter-btn.active, :root[data-theme="moon"] [style*="background: var(--ts-gradient-primary)"], :root[data-theme="moon"] [style*="background:var(--ts-gradient-primary)"] { color: #ffffff !important; } /* Modal content — ensure proper styling for Moon */ :root[data-theme="moon"] .modal-overlay { background: rgba(0, 0, 0, 0.30) !important; } :root[data-theme="moon"] .modal-content { background: rgba(255, 255, 255, 0.97) !important; border-color: var(--ts-border-default) !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12) !important; } :root[data-theme="moon"] .modal-close { background: rgba(0, 0, 0, 0.06) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-muted) !important; } :root[data-theme="moon"] .modal-close:hover { background: rgba(0, 0, 0, 0.12) !important; color: var(--ts-text-primary) !important; } /* Select dropdown options — proper background for Moon */ :root[data-theme="moon"] .form-select option { background: #ffffff !important; color: var(--ts-text-primary) !important; } /* Mental wellness */ :root[data-theme="moon"] .card-title { color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .gratitude-input::placeholder { color: var(--ts-text-muted) !important; } :root[data-theme="moon"] .privacy-notice { color: var(--ts-text-faint) !important; } /* Mood calendar — fix empty cell visibility on light background */ :root[data-theme="moon"] .mood-cal-cell:not(.empty) { border: 1px solid rgba(0, 0, 0, 0.08); } :root[data-theme="moon"] .mood-cal-cell[style*="background: rgba(255,255,255,0.03)"], :root[data-theme="moon"] .mood-cal-cell[style*="background:rgba(255,255,255,0.03)"] { background: rgba(0, 0, 0, 0.04) !important; } :root[data-theme="moon"] .mood-cal-cell.today { outline-color: rgba(76, 175, 80, 0.8) !important; } :root[data-theme="moon"] .mood-cal-day-label { color: var(--ts-text-muted) !important; } :root[data-theme="moon"] .wellness-card { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } :root[data-theme="moon"] .wellness-tabs { background: rgba(0, 0, 0, 0.06) !important; border-color: var(--ts-border-default) !important; } :root[data-theme="moon"] .wellness-tab-btn.active { background: rgba(76, 175, 80, 0.12) !important; color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .wellness-toast { background: var(--ts-bg-elevated) !important; border-color: rgba(76, 175, 80, 0.2) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; } /* Followers / Following modal */ :root[data-theme="moon"] .follow-modal { background: var(--ts-bg-page) !important; } :root[data-theme="moon"] .action-sheet { background: var(--ts-bg-elevated) !important; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1) !important; } :root[data-theme="moon"] .action-sheet-overlay { background: rgba(0, 0, 0, 0.3) !important; } :root[data-theme="moon"] .follow-toast { background: var(--ts-bg-elevated) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; } /* ─── Star Wishes Moon Mode UI ─── */ :root[data-theme="moon"] .sky-immersive { /* Keep the immersive sky dark even in Moon theme for celestial feel */ background: #060612 !important; } :root[data-theme="moon"] .sky-reveal-card { background: var(--ts-bg-elevated) !important; border-color: var(--ts-border-default) !important; } :root[data-theme="moon"] .sky-reveal-text { color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .sky-reveal-label { color: var(--ts-accent-star) !important; } :root[data-theme="moon"] .sky-reveal-meta { color: var(--ts-text-muted) !important; } :root[data-theme="moon"] .sky-reveal-close { color: var(--ts-text-muted) !important; } :root[data-theme="moon"] .sky-count-num { color: var(--ts-accent-star) !important; } :root[data-theme="moon"] .sky-count-hint { color: rgba(255, 255, 255, 0.5) !important; } :root[data-theme="moon"] .sky-entrance-text { color: var(--ts-accent-star) !important; } :root[data-theme="moon"] .sky-entrance-sub { color: rgba(255, 255, 255, 0.6) !important; } :root[data-theme="moon"] .sky-exit-btn { background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.2) !important; } :root[data-theme="moon"] .stat-card.stat-clickable { background: rgba(74, 95, 198, 0.06) !important; border-color: rgba(74, 95, 198, 0.18) !important; } :root[data-theme="moon"] .stat-card.stat-clickable .stat-label { color: #5a6a9e !important; } :root[data-theme="moon"] .stat-card.stat-clickable .stat-value { background: linear-gradient(135deg, #3a4a9e 0%, #5b3d8e 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } :root[data-theme="moon"] .stat-card.stat-clickable::after { background: linear-gradient(90deg, #4a5a9e, #6b4d9e) !important; } :root[data-theme="moon"] .stat-card.stat-clickable:hover { background: rgba(74, 95, 198, 0.10) !important; border-color: rgba(74, 95, 198, 0.30) !important; } :root[data-theme="moon"] .stats-page-title { background: linear-gradient(135deg, #2a2a4e 0%, #4a4a6e 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } :root[data-theme="moon"] .badge-tier.silver { color: #808080 !important; background: rgba(128, 128, 128, 0.12) !important; } :root[data-theme="moon"] .badge-tier.platinum { color: #6e6e7a !important; background: rgba(110, 110, 122, 0.12) !important; } :root[data-theme="moon"] .badge-tier.gold { color: #b8960c !important; } /* Global toast — light bg for Moon */ :root[data-theme="moon"] .ts-toast { background: rgba(255, 255, 255, 0.96) !important; color: var(--ts-text-primary) !important; border-color: var(--ts-border-default) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } :root[data-theme="moon"] .ts-toast-success { border-color: rgba(76, 175, 80, 0.4) !important; } :root[data-theme="moon"] .ts-toast-info { border-color: rgba(74, 95, 198, 0.35) !important; } :root[data-theme="moon"] .ts-toast-warning { border-color: rgba(255, 152, 0, 0.4) !important; } :root[data-theme="moon"] .ts-toast-error { border-color: rgba(244, 67, 54, 0.4) !important; } /* Push notification banner — light bg for Moon */ :root[data-theme="moon"] .push-notification-banner { background: rgba(255, 255, 255, 0.96) !important; color: var(--ts-text-primary) !important; border-color: var(--ts-border-default) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important; } /* Dashboard */ :root[data-theme="moon"] .btn-secondary:hover { background: rgba(0, 0, 0, 0.08) !important; } :root[data-theme="moon"] .trance-textarea { background: rgba(240, 240, 248, 0.95) !important; color: var(--ts-text-primary) !important; border-color: var(--ts-border-focus) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 30px rgba(74, 95, 198, 0.1) !important; } :root[data-theme="moon"] .trance-textarea::placeholder { color: var(--ts-text-muted) !important; } /* Feed */ :root[data-theme="moon"] .nav-link { color: var(--ts-text-secondary) !important; } :root[data-theme="moon"] .nav-link:hover, :root[data-theme="moon"] .nav-link.active { color: var(--ts-text-primary) !important; background: rgba(0, 0, 0, 0.04) !important; } :root[data-theme="moon"] .feed-item { background: var(--ts-bg-card) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important; } :root[data-theme="moon"] .feed-filter-btn.active { color: #ffffff !important; } :root[data-theme="moon"] .feed-action-btn:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; } :root[data-theme="moon"] .feed-action-btn.liked { background: var(--ts-accent-subtle) !important; border-color: var(--ts-accent-glow) !important; } :root[data-theme="moon"] .comments-modal { background: var(--ts-bg-overlay) !important; } :root[data-theme="moon"] .comments-modal-content { background: var(--ts-bg-elevated) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1) !important; } :root[data-theme="moon"] .follow-btn { color: var(--ts-text-secondary) !important; border-color: var(--ts-border-default) !important; } :root[data-theme="moon"] .follow-btn.following { background: var(--ts-accent-subtle) !important; border-color: var(--ts-accent-glow) !important; color: var(--ts-text-primary) !important; } /* Circle */ :root[data-theme="moon"] .transcript-status-dot { background: var(--ts-text-muted) !important; } /* Settings */ :root[data-theme="moon"] .settings-page-title { color: var(--ts-text-primary) !important; } /* Auth pages - keep Neptune theme always */ :root[data-theme="moon"] .auth-title { color: var(--ts-text-primary); } /* Star wishes, Goals, Polls */ :root[data-theme="moon"] .goal-menu-btn:hover { color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .poll-time-badge.expired { color: var(--ts-text-faint) !important; } /* Sync media */ :root[data-theme="moon"] .sync-media-card .card-title { color: var(--ts-text-primary) !important; } /* Trending */ :root[data-theme="moon"] .category-tab { color: var(--ts-text-secondary) !important; } :root[data-theme="moon"] .category-tab.active { color: var(--ts-text-primary) !important; } /* Profile insights */ :root[data-theme="moon"] .timeframe-btn:hover { border-color: var(--ts-border-hover) !important; } /* Screen time */ :root[data-theme="moon"] .screen-time-text { color: var(--ts-text-primary) !important; } /* ═══════════════════════════════════════════════════════════════ INLINE STYLE ATTRIBUTE SELECTORS — catches both spaced & compact formats ═══════════════════════════════════════════════════════════════ */ /* The [style*="..."] color selectors were removed as elements were refactored to use semantic variables */ /* The dark hardcoded backgrounds block was removed as elements were refactored to use semantic variables */ :root[data-theme="moon"] [style*="background: rgba(6, 6, 18"], :root[data-theme="moon"] [style*="background:rgba(6,6,18"], :root[data-theme="moon"] [style*="background: rgba(6,6,18"] { background: var(--ts-bg-overlay) !important; } :root[data-theme="moon"] [style*="background: rgba(24, 24, 42"], :root[data-theme="moon"] [style*="background:rgba(24,24,42"], :root[data-theme="moon"] [style*="background: rgba(24,24,42"] { background: var(--ts-bg-card-hover) !important; } /* ── AUTH PAGE THEME OVERRIDES ── */ /* Mars auth pages */ :root[data-theme="mars"] .auth-box { background: rgba(32, 14, 14, 0.95) !important; border-color: var(--ts-border-default) !important; box-shadow: 0 8px 32px rgba(10, 2, 0, 0.5) !important; } :root[data-theme="mars"] .auth-title { color: var(--ts-text-primary) !important; } :root[data-theme="mars"] .auth-subtitle { color: var(--ts-text-secondary) !important; } :root[data-theme="mars"] .form-label { color: var(--ts-text-primary) !important; } :root[data-theme="mars"] .form-input { background: rgba(255, 200, 180, 0.05) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-primary) !important; } :root[data-theme="mars"] .form-input:focus { border-color: var(--ts-border-focus) !important; background: rgba(255, 200, 180, 0.08) !important; box-shadow: 0 0 0 3px var(--ts-accent-faint) !important; } :root[data-theme="mars"] .form-input::placeholder { color: var(--ts-text-faint) !important; } :root[data-theme="mars"] .auth-button { background: var(--ts-gradient-primary) !important; } :root[data-theme="mars"] .auth-button:hover { box-shadow: 0 8px 20px var(--ts-accent-glow) !important; } :root[data-theme="mars"] .auth-link { color: var(--ts-text-secondary) !important; } :root[data-theme="mars"] .auth-link a { color: var(--ts-text-primary) !important; } :root[data-theme="mars"] .back-link a { color: var(--ts-text-secondary) !important; } :root[data-theme="mars"] .back-link a:hover { color: var(--ts-text-primary) !important; } :root[data-theme="mars"] .oauth-button { background: rgba(255, 200, 180, 0.05) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-primary) !important; } :root[data-theme="mars"] .oauth-button:hover { background: rgba(255, 200, 180, 0.1) !important; border-color: var(--ts-border-hover) !important; } :root[data-theme="mars"] .divider-text { color: var(--ts-text-faint) !important; } :root[data-theme="mars"] .divider-text::before, :root[data-theme="mars"] .divider-text::after { background: var(--ts-divider) !important; } /* Moon auth pages */ /* Moon auth pages */ :root[data-theme="moon"] .auth-box { background: var(--ts-bg-elevated); border-color: var(--ts-border-default); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); } :root[data-theme="moon"] .auth-title { color: var(--ts-text-primary); } :root[data-theme="moon"] .auth-subtitle { color: var(--ts-text-secondary); } :root[data-theme="moon"] .form-label { color: var(--ts-text-primary); } :root[data-theme="moon"] .form-input { background: var(--ts-bg-input); border-color: var(--ts-border-default); color: var(--ts-text-primary); } :root[data-theme="moon"] .form-input:focus { border-color: var(--ts-border-focus); background: var(--ts-bg-input-focus); box-shadow: 0 0 0 3px var(--ts-accent-faint); } :root[data-theme="moon"] .form-input::placeholder { color: var(--ts-text-faint); } :root[data-theme="moon"] .auth-button { background: linear-gradient(135deg, #4a5fc6 0%, #5a2d84 100%) !important; } :root[data-theme="moon"] .auth-button:hover { box-shadow: 0 8px 20px rgba(74, 95, 198, 0.3) !important; } :root[data-theme="moon"] .auth-link { color: var(--ts-text-secondary) !important; } :root[data-theme="moon"] .auth-link a { color: var(--ts-text-accent) !important; } :root[data-theme="moon"] .back-link a { color: var(--ts-text-secondary) !important; } :root[data-theme="moon"] .back-link a:hover { color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .oauth-button { background: var(--ts-bg-input) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .oauth-button:hover { background: var(--ts-bg-card-hover) !important; border-color: var(--ts-border-hover) !important; } :root[data-theme="moon"] .divider-text { color: var(--ts-text-faint) !important; } :root[data-theme="moon"] .divider-text::before, :root[data-theme="moon"] .divider-text::after { background: var(--ts-divider) !important; } /* Moon — password toggle visibility */ :root[data-theme="moon"] .password-toggle-btn { color: var(--ts-text-muted) !important; } :root[data-theme="moon"] .password-toggle-btn:hover { color: var(--ts-text-primary) !important; } /* Venus auth pages */ :root[data-theme="venus"] .auth-box { background: rgba(30, 12, 24, 0.95) !important; border-color: var(--ts-border-default) !important; box-shadow: 0 8px 32px rgba(14, 6, 16, 0.5) !important; } :root[data-theme="venus"] .auth-title { color: var(--ts-text-primary) !important; } :root[data-theme="venus"] .auth-subtitle { color: var(--ts-text-secondary) !important; } :root[data-theme="venus"] .form-label { color: var(--ts-text-primary) !important; } :root[data-theme="venus"] .form-input { background: rgba(255, 180, 210, 0.05) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-primary) !important; } :root[data-theme="venus"] .form-input:focus { border-color: var(--ts-border-focus) !important; background: rgba(255, 180, 210, 0.08) !important; box-shadow: 0 0 0 3px var(--ts-accent-faint) !important; } :root[data-theme="venus"] .form-input::placeholder { color: var(--ts-text-faint) !important; } :root[data-theme="venus"] .auth-button { background: var(--ts-gradient-primary) !important; } :root[data-theme="venus"] .auth-button:hover { box-shadow: 0 8px 20px var(--ts-accent-glow) !important; } :root[data-theme="venus"] .auth-link { color: var(--ts-text-secondary) !important; } :root[data-theme="venus"] .auth-link a { color: var(--ts-text-primary) !important; } :root[data-theme="venus"] .back-link a { color: var(--ts-text-secondary) !important; } :root[data-theme="venus"] .back-link a:hover { color: var(--ts-text-primary) !important; } :root[data-theme="venus"] .oauth-button { background: rgba(255, 180, 210, 0.05) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-primary) !important; } :root[data-theme="venus"] .oauth-button:hover { background: rgba(255, 180, 210, 0.1) !important; border-color: var(--ts-border-hover) !important; } :root[data-theme="venus"] .divider-text { color: var(--ts-text-faint) !important; } :root[data-theme="venus"] .divider-text::before, :root[data-theme="venus"] .divider-text::after { background: var(--ts-divider) !important; } :root[data-theme="venus"] .password-toggle-btn { color: var(--ts-text-muted) !important; } :root[data-theme="venus"] .password-toggle-btn:hover { color: var(--ts-text-primary) !important; } /* ── LANDING PAGE THEME OVERRIDES ── */ /* Mars — adapt brand gradient & logo effects to warm palette */ :root[data-theme="mars"] .landing-logo { background: var(--ts-gradient-primary); -webkit-background-clip: text; background-clip: text; } :root[data-theme="mars"] .logo-cta-hint { background: var(--ts-gradient-primary); -webkit-background-clip: text; background-clip: text; } :root[data-theme="mars"] .landing-logo-link::after { background: var(--ts-gradient-primary); } @keyframes logoShimmerMars { 0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 20px rgba(234, 102, 70, 0.3)); } 50% { background-position: 100% 50%; filter: drop-shadow(0 0 35px rgba(162, 75, 107, 0.6)); } } :root[data-theme="mars"] .landing-logo { animation-name: logoShimmerMars; } /* Moon — keep brand gradient on light backgrounds, adjust shadows */ :root[data-theme="moon"] .landing-logo { background: linear-gradient(135deg, #4a5fc6 0%, #5a2d84 100%); -webkit-background-clip: text; background-clip: text; } :root[data-theme="moon"] .logo-cta-hint { background: linear-gradient(135deg, #4a5fc6 0%, #5a2d84 100%); -webkit-background-clip: text; background-clip: text; } :root[data-theme="moon"] .landing-logo-link::after { background: linear-gradient(135deg, #4a5fc6 0%, #5a2d84 100%); } @keyframes logoShimmerMoon { 0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 20px rgba(74, 95, 198, 0.25)); } 50% { background-position: 100% 50%; filter: drop-shadow(0 0 30px rgba(90, 45, 132, 0.45)); } } :root[data-theme="moon"] .landing-logo { animation-name: logoShimmerMoon; } /* Venus — adapt brand gradient & logo effects to rose palette */ :root[data-theme="venus"] .landing-logo { background: var(--ts-gradient-primary); -webkit-background-clip: text; background-clip: text; } :root[data-theme="venus"] .logo-cta-hint { background: var(--ts-gradient-primary); -webkit-background-clip: text; background-clip: text; } :root[data-theme="venus"] .landing-logo-link::after { background: var(--ts-gradient-primary); } @keyframes logoShimmerVenus { 0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 20px rgba(232, 107, 158, 0.3)); } 50% { background-position: 100% 50%; filter: drop-shadow(0 0 35px rgba(180, 77, 170, 0.6)); } } :root[data-theme="venus"] .landing-logo { animation-name: logoShimmerVenus; } /* Moon — theme picker card adjustments for light background */ :root[data-theme="moon"] .theme-card { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.08); } :root[data-theme="moon"] .theme-card:hover { border-color: rgba(0, 0, 0, 0.15); } :root[data-theme="moon"] .theme-card.active { border-color: var(--ts-accent-primary); box-shadow: 0 0 16px var(--ts-accent-glow); } /* Moon — CTA button stays white text on gradient */ :root[data-theme="moon"] .cta-button { color: #fff; } /* ─── Public Profile Page — Moon theme overrides ─── */ :root[data-theme="moon"] .profile-back-btn { background: rgba(0, 0, 0, 0.04) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-secondary) !important; } :root[data-theme="moon"] .profile-back-btn:hover { background: rgba(0, 0, 0, 0.08) !important; color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .profile-follow-btn.following { background: rgba(0, 0, 0, 0.04) !important; color: var(--ts-text-muted) !important; border-color: var(--ts-border-default) !important; } :root[data-theme="moon"] .profile-message-btn, :root[data-theme="moon"] .profile-poke-btn { background: rgba(0, 0, 0, 0.04) !important; color: var(--ts-text-secondary) !important; border-color: var(--ts-border-default) !important; } :root[data-theme="moon"] .profile-message-btn:hover, :root[data-theme="moon"] .profile-poke-btn:hover { background: rgba(74, 95, 198, 0.08) !important; border-color: rgba(74, 95, 198, 0.2) !important; } /* ─── Segment cards (world view) — Moon theme overrides ─── */ /* Face-icon category buttons on Moon */ :root[data-theme="moon"] .face-icon { background: rgba(255, 255, 255, 0.75) !important; border-color: var(--ts-border-default) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; } :root[data-theme="moon"] .icon-label { color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .face-icon:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), inset 0 2px 10px rgba(255, 255, 255, 0.3) !important; border-color: var(--ts-border-hover) !important; background: rgba(255, 255, 255, 0.9) !important; } /* VENUS SEARCH & DROPDOWN FIXES */ :root[data-theme="venus"] .media-search-results, :root[data-theme="venus"] .search-suggestions { background: rgba(45, 20, 35, 0.95) !important; border-color: var(--ts-border-default) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important; } :root[data-theme="venus"] .media-search-item:hover, :root[data-theme="venus"] .media-result-item:hover { background: rgba(232, 107, 158, 0.1) !important; } /* Venus — Notifications Dropdown Fixes */ :root[data-theme="venus"] .notification-dropdown { background: rgba(30, 12, 24, 0.95) !important; border-color: var(--ts-border-default) !important; box-shadow: 0 10px 40px rgba(14, 6, 16, 0.5) !important; } :root[data-theme="venus"] .notification-item:hover { background: rgba(232, 107, 158, 0.08) !important; } :root[data-theme="venus"] .notification-item.unread { background: rgba(232, 107, 158, 0.15) !important; } :root[data-theme="moon"] .face-icon::before { background: rgba(0, 0, 0, 0.08) !important; } /* World header (segment title banner) on Moon */ :root[data-theme="moon"] .world-header { background: rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important; border: 1px solid var(--ts-border-default) !important; } :root[data-theme="moon"] .world-header h2 { background: linear-gradient(135deg, var(--ts-text-primary) 0%, #4a5fc6 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; text-shadow: none !important; } :root[data-theme="moon"] .world-subtitle { color: var(--ts-text-secondary) !important; text-shadow: none !important; } /* World close button on Moon */ :root[data-theme="moon"] .world-close-btn { background: rgba(255, 255, 255, 0.8) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-secondary) !important; backdrop-filter: blur(12px) !important; } :root[data-theme="moon"] .world-close-btn:hover { background: rgba(255, 255, 255, 0.95) !important; color: var(--ts-text-primary) !important; } /* World item cards on Moon */ :root[data-theme="moon"] .world-item { background: rgba(255, 255, 255, 0.88) !important; border-color: var(--ts-border-default) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; } :root[data-theme="moon"] .world-item:hover { background: rgba(255, 255, 255, 0.95) !important; border-color: var(--ts-border-hover) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; } :root[data-theme="moon"] .world-item:active { background: rgba(255, 255, 255, 0.92) !important; } :root[data-theme="moon"] .world-item::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent) !important; } :root[data-theme="moon"] .world-item-text-content h3 { text-shadow: none !important; } :root[data-theme="moon"] .world-item-image img, :root[data-theme="moon"] .world-item-image video { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; } /* Like/thoughtful button on Moon */ :root[data-theme="moon"] .world-item .like-btn { border-color: var(--ts-border-default) !important; color: var(--ts-text-secondary) !important; } :root[data-theme="moon"] .world-item .like-btn:hover { background: rgba(74, 95, 198, 0.1) !important; border-color: #4a5fc6 !important; color: #4a5fc6 !important; } :root[data-theme="moon"] .world-item .like-btn.active { background: rgba(74, 95, 198, 0.12) !important; border-color: #4a5fc6 !important; color: #4a5fc6 !important; } /* World background overlays on Moon — slightly more opaque for readability */ :root[data-theme="moon"] .world-background[data-theme="watching"] { background: linear-gradient(135deg, rgba(192, 57, 43, 0.45) 0%, rgba(231, 76, 60, 0.35) 50%, rgba(241, 148, 138, 0.3) 100%) !important; } :root[data-theme="moon"] .world-background[data-theme="listening"] { background: linear-gradient(135deg, rgba(41, 128, 185, 0.4) 0%, rgba(52, 152, 219, 0.3) 50%, rgba(133, 193, 233, 0.25) 100%) !important; } :root[data-theme="moon"] .world-background[data-theme="reading"] { background: linear-gradient(135deg, rgba(142, 36, 170, 0.4) 0%, rgba(165, 105, 189, 0.3) 50%, rgba(195, 155, 211, 0.25) 100%) !important; } :root[data-theme="moon"] .world-background[data-theme="thinking"] { background: linear-gradient(135deg, rgba(95, 39, 205, 0.4) 0%, rgba(108, 92, 231, 0.3) 50%, rgba(155, 135, 243, 0.25) 100%) !important; } :root[data-theme="moon"] .world-close-btn-bottom { background: rgba(255, 255, 255, 0.85) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-secondary) !important; backdrop-filter: blur(12px) !important; } :root[data-theme="moon"] .world-close-btn-bottom:active { background: rgba(255, 255, 255, 0.95) !important; color: var(--ts-text-primary) !important; } :root[data-theme="moon"] .nav-link, :root[data-theme="moon"] #logoutButton { background: rgba(0, 0, 0, 0.04) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-secondary) !important; } :root[data-theme="moon"] .nav-link:hover, :root[data-theme="moon"] #logoutButton:hover { background: rgba(0, 0, 0, 0.08) !important; color: var(--ts-text-primary) !important; } /* Public profile filter button */ :root[data-theme="moon"] .public-filter-toggle-btn { background: rgba(0, 0, 0, 0.04) !important; border-color: var(--ts-border-default) !important; color: var(--ts-text-secondary) !important; } :root[data-theme="moon"] .public-filter-dropdown { background: var(--ts-bg-elevated) !important; border-color: var(--ts-border-default) !important; } /* Verified badge — keep original colors regardless of theme */ .verified-badge { color: #667eea !important; }