/* Compact stats theme styles */ [data-theme="light"] #profile-stats-grid { background: rgba(0, 0, 0, 0.03) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] #profile-stats-grid > div { border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light-accent"] #profile-stats-grid { background: rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } [data-theme="light-accent"] #profile-stats-grid > div { border-color: rgba(0, 0, 0, 0.1) !important; } /* Font preset button animations */ .font-preset-btn { transform: scale(1); } .font-preset-btn:active { transform: scale(0.95) !important; } .font-preset-btn.preset-applied { animation: presetPulse 0.6s ease; box-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important; } @keyframes presetPulse { 0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 255, 255, 0); } 50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 255, 255, 0.8); } 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 255, 255, 0); } } @keyframes subtlePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes slideDownFade { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideUpFade { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes cube-fill { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.2); filter: brightness(1.3); } 100% { transform: scale(1); filter: brightness(1); } } /* Notification bell animations */ @keyframes bellPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } .bell-pulse { animation: bellPulse 2s ease-in-out infinite; } #notification-bell:hover { background: rgba(255, 255, 255, 0.1) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } @keyframes slideIn { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideOut { from { opacity: 1; transform: translateX(0); max-height: 100px; } to { opacity: 0; transform: translateX(-100px); max-height: 0; padding: 0; } } .font-preset-btn::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); font-size: 24px; color: white; font-weight: bold; transition: transform 0.3s ease; pointer-events: none; } .font-preset-btn.preset-applied::after { transform: translate(-50%, -50%) scale(1); } /* CSS Variables - Dark Theme (Default) */ [data-theme="dark"] { --secondary-color: #000000; --tertiary-color: #FFD700; --background-color: #000000; --bg-primary: #000000; --bg-secondary: #000000; --panel-bg: #000000; --hover-bg: #000000; --text-color: #ffffff; --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); --card-bg: #000000; --border-color: rgba(255, 255, 255, 0.1); --surface-rgb: 0, 0, 0; --ai-message-color: #000000; --user-message-color: inherit; --success-color: inherit; --danger-color: #ff0040; --modal-bg: #000000; --modal-overlay-bg: #000000; --input-bg: #000000; --input-background-color: #000000; --input-border: rgba(255, 255, 255, 0.3); --surface-color: #000000; --surface-background-color: #000000; } /* Light Theme - inherits athlete colors from :root */ [data-theme="light"] { /* primary-color and accent-color inherit from :root */ --secondary-color: #ffffff; --tertiary-color: #FFD700; --background-color: #f0f0f0; --panel-bg: #f8f8f8; --hover-bg: rgba(var(--primary-rgb), 0.05); --text-color: #1d1d1f; --text-primary: #1d1d1f; --text-secondary: rgba(0, 0, 0, 0.6); --card-bg: #ffffff; --border-color: rgba(0, 0, 0, 0.1); --surface-rgb: 255, 255, 255; --ai-message-color: #f0f0f0; --user-message-color: var(--primary-color); --success-color: var(--primary-color); --danger-color: #ff0040; --modal-bg: rgba(255, 255, 255, 0.25); --input-bg: rgba(0, 0, 0, 0.05); --input-background-color: rgba(255, 255, 255, 0.8); --input-border: rgba(0, 0, 0, 0.15); --bg-primary: #f0f0f0; --bg-secondary: #e8e8e8; } /* Theme-aware text colors */ html { background: var(--bg-primary); overscroll-behavior-y: none; overscroll-behavior-x: none; } body { margin: 0; padding: 0; background: var(--bg-primary); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; position: relative; overscroll-behavior-y: none; overscroll-behavior-x: none; } /* Light Theme - Match desktop background approach */ [data-theme="light"] body { background-color: var(--background-color); } /* Subtle ambient lighting effect - matches desktop */ body::before { content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 30%, rgba(var(--primary-rgb), 0.015) 0%, transparent 40%), radial-gradient(circle at 70% 70%, rgba(var(--accent-rgb), 0.015) 0%, transparent 40%); pointer-events: none; z-index: 0; animation: ambientFloat 20s ease-in-out infinite; } @keyframes ambientFloat { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } } /* Light mode panel backgrounds - matches desktop */ [data-theme="light"] .main-content, [data-theme="light"] .content-area { background: var(--panel-bg) !important; } /* Dark Theme - Solid Background */ [data-theme="dark"] body { background: var(--background-color); } /* Apply theme colors to all elements */ * { color: inherit; } /* Modal backgrounds use theme variables */ /* FIXED: Removed .modal-content from grouped selector to prevent double background layering */ /* The .modal-content has its own specific transparent background rules at lines 5750-5826 */ .modal, [id*="modal"], [id*="Modal"], [class*="modal"] { /* --modal-bg is only declared under an explicit [data-theme]; a session with none left this substituting nothing and the panel came out black, which is what made the create-room labels and the Access dropdown unreadable. Light is the fallback, matching --background-color's own default. */ background: var(--modal-bg, #ffffff); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Map search bar - floating glass effect */ #virtual-map-search { background: rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: none !important; border-radius: 50px !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important; overflow: hidden !important; } /* Placeholder styling for theme-aware map search */ #virtual-map-search::placeholder { color: rgba(255, 255, 255, 0.6); opacity: 1; } #virtual-map-search::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); opacity: 1; } #virtual-map-search::-moz-placeholder { color: rgba(255, 255, 255, 0.6); opacity: 1; } /* CRITICAL: Privacy modal must be completely OPAQUE - override all transparency */ #app-modal { background: #f5f5f5 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 2000002 !important; } #edit-app-modal { z-index: 2000003 !important; } #edit-app-modal #privacy-content > div, #edit-app-modal #privacy-content label, #edit-app-modal #privacy-content [style*="border-top"], #edit-app-modal #privacy-content [style*="border-bottom"], #edit-app-modal #customize-content > div, #edit-app-modal #customize-content [style*="border-top"], #edit-app-modal #customize-content [style*="border-bottom"] { border-top: 0 !important; border-bottom: 0 !important; } /* Ensure blocCardModal is also opaque when used for privacy */ #blocCardModal { background: #f5f5f5 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ULTIMATE FIX FOR DROP BLOC MODAL - COMPLETELY TRANSPARENT INPUTS */ #post-message, #dm-message, #dm-recipient, #create-modal textarea, #create-modal input[type="text"], #create-modal .text-area, #create-modal .text-input, .create-modal textarea, .create-modal input[type="text"], .create-modal .text-area, .create-modal .text-input { background: transparent !important; background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 0 !important; min-height: auto !important; resize: none !important; } /* Light modes - black text */ [data-theme="light"] #post-message, [data-theme="light-accent"] #post-message, [data-theme="light"] #dm-message, [data-theme="light-accent"] #dm-message, [data-theme="light"] #dm-recipient, [data-theme="light-accent"] #dm-recipient, [data-theme="light"] #create-modal textarea, [data-theme="light-accent"] #create-modal textarea, [data-theme="light"] #create-modal input[type="text"], [data-theme="light-accent"] #create-modal input[type="text"] { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Dark mode - white text */ [data-theme="dark"] #post-message, [data-theme="dark"] #dm-message, [data-theme="dark"] #dm-recipient, [data-theme="dark"] #create-modal textarea, [data-theme="dark"] #create-modal input[type="text"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Placeholders */ [data-theme="light"] #post-message::placeholder, [data-theme="light-accent"] #post-message::placeholder, [data-theme="light"] #dm-message::placeholder, [data-theme="light-accent"] #dm-message::placeholder, [data-theme="light"] #dm-recipient::placeholder, [data-theme="light-accent"] #dm-recipient::placeholder { color: rgba(0, 0, 0, 0.5) !important; -webkit-text-fill-color: rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] #post-message::placeholder, [data-theme="dark"] #dm-message::placeholder, [data-theme="dark"] #dm-recipient::placeholder { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } /* AI Command Center - Header + Chat */ .ai-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; border-bottom: 1px solid rgba(var(--border-rgb, 0, 0, 0), 0.08); background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [data-theme="dark"] .ai-header { border-bottom: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(12,14,18,0.92), rgba(12,14,18,0.75)); } .ai-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 16px 10px 16px; min-height: 62px; } .ai-header-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .ai-header-avatar { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.75rem; flex-shrink: 0; overflow: hidden; box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.25); } .ai-header-avatar img { width: 100%; height: 100%; object-fit: cover; display: none; } .ai-header-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .ai-header-title-text { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.2px; } .ai-header-subtitle { font-size: 12px; color: var(--text-secondary); font-weight: 500; display: flex; align-items: center; gap: 6px; } .ai-header-subtitle .ai-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--primary-rgb), 0.6); } .ai-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .ai-header-btn { background: rgba(var(--primary-rgb), 0.1); border: 1px solid rgba(var(--primary-rgb), 0.25); border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 700; color: var(--primary-color); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .ai-header-btn.primary { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border: none; color: white; box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.35); } .ai-header-btn:active { transform: scale(0.97); } /* Dark mode DM search results dropdown */ [data-theme="dark"] #dm-search-results, [data-theme="dark"] #dm-search-results * { background: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Booking Drawer - Fullscreen on Page Background */ /* Light Theme */ [data-theme="light"] #booking-drawer { background: var(--body-bg) !important; border-top: none !important; color: var(--text-color) !important; } /* Light Accent Theme */ [data-theme="light-accent"] #booking-drawer { background: var(--body-bg) !important; border-top: none !important; color: var(--text-color) !important; } /* Dark Theme (default) */ [data-theme="dark"] #booking-drawer, #booking-drawer { background: var(--body-bg) !important; border-top: none !important; color: var(--text-color) !important; } /* No special container backgrounds */ [data-theme="light"] #mobile-booking-owner-panel, [data-theme="light-accent"] #mobile-booking-owner-panel { background: transparent !important; border-radius: 0 !important; padding: 0 !important; } /* Dark theme for booking panels */ [data-theme="dark"] #mobile-booking-owner-panel { background: transparent !important; } /* Global Theme-Aware Scrollbar Styles (matching bloc.html) */ /* Dark theme scrollbars */ html[data-theme="dark"] *::-webkit-scrollbar, body[data-theme="dark"] *::-webkit-scrollbar, [data-theme="dark"] *::-webkit-scrollbar { width: 12px !important; height: 12px !important; } html[data-theme="dark"] *::-webkit-scrollbar-track, body[data-theme="dark"] *::-webkit-scrollbar-track, [data-theme="dark"] *::-webkit-scrollbar-track { background: #000000 !important; background-color: #000000 !important; border-radius: 0px !important; } html[data-theme="dark"] *::-webkit-scrollbar-thumb, body[data-theme="dark"] *::-webkit-scrollbar-thumb, [data-theme="dark"] *::-webkit-scrollbar-thumb { background: var(--nst-primary) !important; background-color: var(--nst-primary) !important; border-radius: 6px !important; border: none !important; } html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover, body[data-theme="dark"] *::-webkit-scrollbar-thumb:hover, [data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: var(--nst-accent) !important; background-color: var(--nst-accent) !important; } /* Light theme scrollbars */ [data-theme="light"] *::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="light"] *::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 0px; } [data-theme="light"] *::-webkit-scrollbar-thumb { background: var(--nst-primary) !important; border-radius: 6px; border: none; } [data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: var(--nst-accent) !important; } /* Light-accent theme scrollbars */ [data-theme="light-accent"] *::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="light-accent"] *::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 0px; backdrop-filter: blur(10px); } [data-theme="light-accent"] *::-webkit-scrollbar-thumb { background: var(--nst-primary) !important; border-radius: 6px; border: none; } [data-theme="light-accent"] *::-webkit-scrollbar-thumb:hover { background: var(--nst-accent) !important; } /* Firefox scrollbar support */ [data-theme="dark"] * { scrollbar-width: thin; scrollbar-color: var(--nst-primary) #000000; } [data-theme="light"] * { scrollbar-width: thin; scrollbar-color: var(--nst-primary) #f5f5f5; } [data-theme="light-accent"] * { scrollbar-width: thin; scrollbar-color: var(--nst-primary) rgba(255, 255, 255, 0.1); } /* Community Drawer Theme Styles */ /* Light Theme */ [data-theme="light"] #community-drawer, [data-theme="light"] #community-drawer .drawer-panel { background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-top: 1px solid rgba(0, 0, 0, 0.1) !important; color: #000000 !important; } /* Light Theme */ [data-theme="light"] #community-drawer { --community-drawer-bg: linear-gradient( to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 245, 0.95) 100% ); background: var(--community-drawer-bg) !important; border-top: 1px solid rgba(0, 0, 0, 0.1) !important; color: #000000 !important; } /* Force Owner Tools buttons text to be black in light mode */ [data-theme="light"] #drawer-owner-options button span { color: #000000 !important; } /* Also for light-accent theme */ [data-theme="light-accent"] #drawer-owner-options button span { color: #000000 !important; } /* Light Accent Theme */ [data-theme="light-accent"] #community-drawer { --community-drawer-bg: linear-gradient( to bottom, rgba(var(--accent-color-rgb), 0.15) 0%, rgba(var(--accent-color-rgb), 0.25) 100% ); --card-bg: transparent; --surface-color: transparent; background: var(--community-drawer-bg) !important; border-top: 1px solid rgba(var(--accent-color-rgb), 0.3) !important; color: #000000 !important; } /* Light Accent - Make ALL sections transparent for full glassmorphism */ [data-theme="light-accent"] #community-profile-section, [data-theme="light-accent"] #community-drawer > div, [data-theme="light-accent"] #profile-stats-grid, [data-theme="light-accent"] #mobile-upload-permissions, [data-theme="light-accent"] #mobile-upload-permissions label, [data-theme="light-accent"] .permission-card { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Dark Theme (default) */ [data-theme="dark"] #community-drawer, #community-drawer { --community-drawer-bg: linear-gradient( to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.98) 100% ); border-top: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } /* NUCLEAR WHITE TEXT FOR DARK MODE COMMUNITY - GOING ABSOLUTELY CRAZY */ [data-theme="dark"] #community-drawer, [data-theme="dark"] #community-drawer *, [data-theme="dark"] #community-drawer * *, [data-theme="dark"] #community-drawer * * *, [data-theme="dark"] #community-drawer * * * *, [data-theme="dark"] #community-drawer * * * * *, [data-theme="dark"] #community-drawer h1, [data-theme="dark"] #community-drawer h2, [data-theme="dark"] #community-drawer h3, [data-theme="dark"] #community-drawer h4, [data-theme="dark"] #community-drawer h5, [data-theme="dark"] #community-drawer h6, [data-theme="dark"] #community-drawer p, [data-theme="dark"] #community-drawer span, [data-theme="dark"] #community-drawer div, [data-theme="dark"] #community-drawer label, [data-theme="dark"] #mobile-community-panel, [data-theme="dark"] #mobile-community-panel *, [data-theme="dark"] #mobile-community-panel * *, [data-theme="dark"] #mobile-community-panel * * *, [data-theme="dark"] #mobile-community-panel h1, [data-theme="dark"] #mobile-community-panel h2, [data-theme="dark"] #mobile-community-panel h3, [data-theme="dark"] #mobile-community-panel h4, [data-theme="dark"] #mobile-community-panel h5, [data-theme="dark"] #mobile-community-panel h6, [data-theme="dark"] #mobile-community-panel p, [data-theme="dark"] #mobile-community-panel span, [data-theme="dark"] #mobile-community-panel div, [data-theme="dark"] #mobile-community-panel label, #community-drawer:not([data-theme]), #community-drawer:not([data-theme]) *, #mobile-community-panel:not([data-theme]), #mobile-community-panel:not([data-theme]) * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* NUCLEAR INPUT FIELDS FOR DARK MODE - MAXIMUM FORCE */ [data-theme="dark"] #community-drawer input, [data-theme="dark"] #community-drawer textarea, [data-theme="dark"] #community-drawer select, [data-theme="dark"] #mobile-community-panel input, [data-theme="dark"] #mobile-community-panel textarea, [data-theme="dark"] #mobile-community-panel select { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* DARK ACCENT COMMUNITY DRAWER - CYBERPUNK STYLE */ [data-theme="dark-accent"] #community-drawer { --community-drawer-bg: linear-gradient( to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.98) 100% ); border-top: 1px solid rgba(var(--primary-rgb), 0.4) !important; color: #ffffff !important; box-shadow: 0 -4px 20px rgba(var(--primary-rgb), 0.2); } /* NUCLEAR WHITE TEXT FOR DARK ACCENT COMMUNITY */ [data-theme="dark-accent"] #community-drawer, [data-theme="dark-accent"] #community-drawer *, [data-theme="dark-accent"] #community-drawer * *, [data-theme="dark-accent"] #community-drawer * * *, [data-theme="dark-accent"] #community-drawer * * * *, [data-theme="dark-accent"] #community-drawer * * * * *, [data-theme="dark-accent"] #community-drawer h1, [data-theme="dark-accent"] #community-drawer h2, [data-theme="dark-accent"] #community-drawer h3, [data-theme="dark-accent"] #community-drawer h4, [data-theme="dark-accent"] #community-drawer h5, [data-theme="dark-accent"] #community-drawer h6, [data-theme="dark-accent"] #community-drawer p, [data-theme="dark-accent"] #community-drawer span, [data-theme="dark-accent"] #community-drawer div, [data-theme="dark-accent"] #community-drawer label, [data-theme="dark-accent"] #mobile-community-panel, [data-theme="dark-accent"] #mobile-community-panel *, [data-theme="dark-accent"] #mobile-community-panel * *, [data-theme="dark-accent"] #mobile-community-panel * * *, [data-theme="dark-accent"] #mobile-community-panel h1, [data-theme="dark-accent"] #mobile-community-panel h2, [data-theme="dark-accent"] #mobile-community-panel h3, [data-theme="dark-accent"] #mobile-community-panel h4, [data-theme="dark-accent"] #mobile-community-panel h5, [data-theme="dark-accent"] #mobile-community-panel h6, [data-theme="dark-accent"] #mobile-community-panel p, [data-theme="dark-accent"] #mobile-community-panel span, [data-theme="dark-accent"] #mobile-community-panel div, [data-theme="dark-accent"] #mobile-community-panel label { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* NEON INPUT FIELDS FOR DARK ACCENT */ [data-theme="dark-accent"] #community-drawer input, [data-theme="dark-accent"] #community-drawer textarea, [data-theme="dark-accent"] #community-drawer select, [data-theme="dark-accent"] #mobile-community-panel input, [data-theme="dark-accent"] #mobile-community-panel textarea, [data-theme="dark-accent"] #mobile-community-panel select { background: linear-gradient(135deg, #0a0a0a, #000000) !important; border: 1px solid rgba(var(--primary-rgb), 0.4) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2); } [data-theme="dark-accent"] #community-drawer input:focus, [data-theme="dark-accent"] #community-drawer textarea:focus, [data-theme="dark-accent"] #community-drawer select:focus, [data-theme="dark-accent"] #mobile-community-panel input:focus, [data-theme="dark-accent"] #mobile-community-panel textarea:focus, [data-theme="dark-accent"] #mobile-community-panel select:focus { border: 1px solid rgba(var(--primary-rgb), 0.6) !important; box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4); } /* Light mode community drawer inputs - FORCE WHITE BACKGROUND */ [data-theme="light"] #community-drawer input, [data-theme="light"] #community-drawer textarea, [data-theme="light"] #community-drawer select, [data-theme="light-accent"] #community-drawer input, [data-theme="light-accent"] #community-drawer textarea, [data-theme="light-accent"] #community-drawer select { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Style the drawer visitor code input properly */ #drawer-visitor-code { flex: 1; padding: 12px; border-radius: 8px; font-size: 14px; outline: none; } [data-theme="light"] #drawer-visitor-code { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid #dddddd !important; color: #000000 !important; } [data-theme="light-accent"] #drawer-visitor-code { background: rgba(255, 255, 255, 0.3) !important; background-color: rgba(255, 255, 255, 0.3) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; color: #000000 !important; } [data-theme="dark"] #drawer-visitor-code { background: transparent !important; background-color: transparent !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } /* Webkit autofill override for drawer-visitor-code in light modes */ [data-theme="light"] #drawer-visitor-code:-webkit-autofill, [data-theme="light"] #drawer-visitor-code:-webkit-autofill:hover, [data-theme="light"] #drawer-visitor-code:-webkit-autofill:focus, [data-theme="light"] #drawer-visitor-code:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; -webkit-text-fill-color: #000000 !important; border: 1px solid #dddddd !important; } [data-theme="light-accent"] #drawer-visitor-code:-webkit-autofill, [data-theme="light-accent"] #drawer-visitor-code:-webkit-autofill:hover, [data-theme="light-accent"] #drawer-visitor-code:-webkit-autofill:focus, [data-theme="light-accent"] #drawer-visitor-code:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.3) inset !important; -webkit-text-fill-color: #000000 !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } [data-theme="dark"] #drawer-visitor-code:-webkit-autofill, [data-theme="dark"] #drawer-visitor-code:-webkit-autofill:hover, [data-theme="dark"] #drawer-visitor-code:-webkit-autofill:focus, [data-theme="dark"] #drawer-visitor-code:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px transparent inset !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } /* NUCLEAR PLACEHOLDER TEXT - UNSTOPPABLE */ [data-theme="dark"] #community-drawer input::placeholder, [data-theme="dark"] #community-drawer textarea::placeholder, [data-theme="dark"] #mobile-community-panel input::placeholder, [data-theme="dark"] #mobile-community-panel textarea::placeholder, #community-drawer input::placeholder, #community-drawer textarea::placeholder, #mobile-community-panel input::placeholder, #mobile-community-panel textarea::placeholder { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } /* NUCLEAR WHITE TEXT FOR ALL DRAWERS IN DARK MODE - ABSOLUTELY INSANE */ [data-theme="dark"] #bytes-drawer, [data-theme="dark"] #bytes-drawer *, [data-theme="dark"] #virtual-drawer, [data-theme="dark"] #virtual-drawer *, [data-theme="dark"] #market-drawer, [data-theme="dark"] #market-drawer *, [data-theme="dark"] #shop-drawer, [data-theme="dark"] #shop-drawer *, [data-theme="dark"] #booking-drawer, [data-theme="dark"] #booking-drawer *, [data-theme="dark"] #stream-drawer, [data-theme="dark"] #stream-drawer *, #bytes-drawer:not([data-theme]), #bytes-drawer:not([data-theme]) *, #virtual-drawer:not([data-theme]), #virtual-drawer:not([data-theme]) *, #market-drawer:not([data-theme]), #market-drawer:not([data-theme]) *, #shop-drawer:not([data-theme]), #shop-drawer:not([data-theme]) *, #booking-drawer:not([data-theme]), #booking-drawer:not([data-theme]) *, #stream-drawer:not([data-theme]), #stream-drawer:not([data-theme]) * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* NUCLEAR INPUT FIELDS FOR ALL DRAWERS IN DARK MODE */ [data-theme="dark"] .drawer-container input, [data-theme="dark"] .drawer-container textarea, [data-theme="dark"] .drawer-container select, .drawer-container input:not([data-theme]), .drawer-container textarea:not([data-theme]), .drawer-container select:not([data-theme]) { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* NUCLEAR BUTTONS AND ICONS IN DARK MODE */ [data-theme="dark"] #community-drawer button, [data-theme="dark"] #community-drawer i, [data-theme="dark"] #mobile-community-panel button, [data-theme="dark"] #mobile-community-panel i, #community-drawer button:not([data-theme]), #community-drawer i:not([data-theme]), #mobile-community-panel button:not([data-theme]), #mobile-community-panel i:not([data-theme]) { color: #ffffff !important; } /* NUCLEAR SPECIFIC ELEMENTS */ [data-theme="dark"] .community-stats, [data-theme="dark"] .community-stats *, [data-theme="dark"] .upload-section, [data-theme="dark"] .upload-section *, [data-theme="dark"] .permission-section, [data-theme="dark"] .permission-section *, #community-drawer .community-stats, #community-drawer .upload-section, #community-drawer .permission-section, #mobile-community-panel .community-stats, #mobile-community-panel .upload-section, #mobile-community-panel .permission-section { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* NUCLEAR VISITOR ELEMENTS IN COMMUNITY - MAXIMUM FORCE */ [data-theme="dark"] #community-visitor-panel, [data-theme="dark"] #community-visitor-panel *, [data-theme="dark"] #community-visitor-code, [data-theme="dark"] #community-code-entry, [data-theme="dark"] #community-code-entry *, [data-theme="dark"] #community-access-badge, [data-theme="dark"] #visitor-access-status, [data-theme="dark"] #visitor-access-status *, [data-theme="dark"] #visitor-bytes-code-entry, [data-theme="dark"] #visitor-bytes-code-entry *, [data-theme="dark"] #visitor-code-input-new, [data-theme="dark"] #visitor-code-feedback, [data-theme="dark"] #bytes-visitor-panel, [data-theme="dark"] #bytes-visitor-panel *, [data-theme="dark"] #bytes-visitor-info, [data-theme="dark"] #bytes-visitor-info *, [data-theme="dark"] #bytes-visitor-code, [data-theme="dark"] #bytes-access-code-section, [data-theme="dark"] #bytes-access-code-section *, [data-theme="dark"] #bytes-access-code-input, [data-theme="dark"] #mobile-community-request-section, [data-theme="dark"] #mobile-community-request-section *, [data-theme="dark"] #mobile-visitor-code-input, [data-theme="dark"] #mobile-bytes-request-section, [data-theme="dark"] #mobile-bytes-request-section *, [data-theme="dark"] #mobile-bytes-pending-requests, [data-theme="dark"] #mobile-bytes-pending-requests *, [data-theme="dark"] #mobile-bytes-access-code, [data-theme="dark"] #mobile-bytes-access-code *, #community-visitor-panel:not([data-theme]), #community-visitor-panel:not([data-theme]) *, #community-visitor-code:not([data-theme]), #visitor-access-status:not([data-theme]), #visitor-access-status:not([data-theme]) *, #bytes-visitor-panel:not([data-theme]), #bytes-visitor-panel:not([data-theme]) *, #bytes-visitor-info:not([data-theme]), #bytes-visitor-info:not([data-theme]) * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* NUCLEAR VISITOR INPUT FIELDS */ [data-theme="dark"] #community-visitor-code, [data-theme="dark"] #visitor-code-input-new, [data-theme="dark"] #bytes-visitor-code, [data-theme="dark"] #bytes-access-code-input, [data-theme="dark"] #mobile-visitor-code-input, #community-visitor-code:not([data-theme]), #visitor-code-input-new:not([data-theme]), #bytes-visitor-code:not([data-theme]), #bytes-access-code-input:not([data-theme]), #mobile-visitor-code-input:not([data-theme]) { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* NUCLEAR VISITOR PLACEHOLDERS */ [data-theme="dark"] #community-visitor-code::placeholder, [data-theme="dark"] #visitor-code-input-new::placeholder, [data-theme="dark"] #bytes-visitor-code::placeholder, [data-theme="dark"] #bytes-access-code-input::placeholder, [data-theme="dark"] #mobile-visitor-code-input::placeholder, #community-visitor-code::placeholder, #visitor-code-input-new::placeholder, #bytes-visitor-code::placeholder, #bytes-access-code-input::placeholder, #mobile-visitor-code-input::placeholder { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } /* ULTRA NUCLEAR - CATCH ANY REMAINING VISITOR ELEMENTS */ [data-theme="dark"] [id*="visitor"], [data-theme="dark"] [id*="visitor"] *, [data-theme="dark"] [id*="request"], [data-theme="dark"] [id*="request"] *, [data-theme="dark"] [id*="access"], [data-theme="dark"] [id*="access"] *, [data-theme="dark"] .visitor-panel, [data-theme="dark"] .visitor-panel *, [data-theme="dark"] .request-panel, [data-theme="dark"] .request-panel *, [id*="visitor"]:not([data-theme]), [id*="visitor"]:not([data-theme]) *, [id*="request"]:not([data-theme]), [id*="request"]:not([data-theme]) *, [id*="access"]:not([data-theme]), [id*="access"]:not([data-theme]) * { color: #ffffff !important; } /* MEGA ULTRA NUCLEAR COMMUNITY SETTINGS BUTTON - UNSTOPPABLE FORCE */ /* ABSOLUTELY EVERYTHING IN COMMUNITY DRAWER MUST BE WHITE */ [data-theme="dark"] #community-drawer, [data-theme="dark"] #community-drawer *, [data-theme="dark"] #community-drawer button, [data-theme="dark"] #community-drawer button *, [data-theme="dark"] #community-drawer button span, [data-theme="dark"] #community-drawer button i, [data-theme="dark"] #community-drawer button[onclick*="Settings"], [data-theme="dark"] #community-drawer button[onclick*="Settings"] *, [data-theme="dark"] #community-drawer button[onclick*="Settings"] span, [data-theme="dark"] #community-drawer button[onclick*="Settings"] i, [data-theme="dark"] #community-drawer button[onclick*="openSettings"], [data-theme="dark"] #community-drawer button[onclick*="openSettings"] *, [data-theme="dark"] #community-drawer button[onclick*="openSettings"] span, [data-theme="dark"] #community-drawer button[onclick*="openSettings"] i, [data-theme="dark"] #community-drawer button[onclick*="Community"], [data-theme="dark"] #community-drawer button[onclick*="Community"] *, [data-theme="dark"] #community-drawer button[onclick*="Community"] span, [data-theme="dark"] #community-drawer button[onclick*="Community"] i, [data-theme="dark"] #community-drawer .fa-cog, [data-theme="dark"] #community-drawer .bytes-drawer-button, [data-theme="dark"] #community-drawer .bytes-drawer-button *, [data-theme="dark"] #mobile-community-panel, [data-theme="dark"] #mobile-community-panel *, [data-theme="dark"] #mobile-community-panel button, [data-theme="dark"] #mobile-community-panel button *, [data-theme="dark"] #mobile-community-panel button span, [data-theme="dark"] #mobile-community-panel button i, #community-drawer:not([data-theme]), #community-drawer:not([data-theme]) *, #community-drawer button:not([data-theme]), #community-drawer button:not([data-theme]) *, #community-drawer button:not([data-theme]) span, #community-drawer button:not([data-theme]) i, #community-drawer button[onclick*="Settings"]:not([data-theme]), #community-drawer button[onclick*="Settings"]:not([data-theme]) *, #community-drawer button[onclick*="openSettings"]:not([data-theme]), #community-drawer button[onclick*="openSettings"]:not([data-theme]) *, #community-drawer button[onclick*="Community"]:not([data-theme]), #community-drawer button[onclick*="Community"]:not([data-theme]) *, #community-drawer .bytes-drawer-button:not([data-theme]), #community-drawer .bytes-drawer-button:not([data-theme]) *, #mobile-community-panel:not([data-theme]), #mobile-community-panel:not([data-theme]) *, #mobile-community-panel button:not([data-theme]), #mobile-community-panel button:not([data-theme]) *, #mobile-community-panel button:not([data-theme]) span, #mobile-community-panel button:not([data-theme]) i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: none !important; filter: none !important; opacity: 1 !important; } /* NUCLEAR SETTINGS BUTTON TEXT - ABSOLUTE FORCE */ [data-theme="dark"] button[onclick*="Settings"], [data-theme="dark"] button[onclick*="Settings"] *, [data-theme="dark"] button[onclick*="Settings"] span, [data-theme="dark"] button[onclick*="openSettings"], [data-theme="dark"] button[onclick*="openSettings"] *, [data-theme="dark"] button[onclick*="openSettings"] span, [data-theme="dark"] .bytes-drawer-button, [data-theme="dark"] .bytes-drawer-button *, [data-theme="dark"] .bytes-drawer-button span, [data-theme="dark"] #bytes-owner-settings, [data-theme="dark"] #bytes-owner-settings *, button[onclick*="Settings"]:not([data-theme]), button[onclick*="Settings"]:not([data-theme]) *, button[onclick*="openSettings"]:not([data-theme]), button[onclick*="openSettings"]:not([data-theme]) *, .bytes-drawer-button:not([data-theme]), .bytes-drawer-button:not([data-theme]) *, #bytes-owner-settings:not([data-theme]), #bytes-owner-settings:not([data-theme]) * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* NUCLEAR BOOKING CALENDAR - MAXIMUM WHITE */ [data-theme="dark"] #calendar-month-year, [data-theme="dark"] #calendar-month-year *, [data-theme="dark"] #calendar-days, [data-theme="dark"] #calendar-days *, [data-theme="dark"] .calendar-day:not(.selected), [data-theme="dark"] .calendar-day:not(.selected) *, [data-theme="dark"] .calendar-day span, [data-theme="dark"] .calendar-day div, [data-theme="dark"] #booking-drawer, [data-theme="dark"] #booking-drawer *, [data-theme="dark"] #mobile-booking-panel, [data-theme="dark"] #mobile-booking-panel *, [data-theme="dark"] #mobile-booking-owner-panel, [data-theme="dark"] #mobile-booking-owner-panel *, [data-theme="dark"] .booking-service, [data-theme="dark"] .booking-service *, [data-theme="dark"] .booking-request, [data-theme="dark"] .booking-request *, [data-theme="dark"] #prev-month, [data-theme="dark"] #prev-month *, [data-theme="dark"] #next-month, [data-theme="dark"] #next-month *, [data-theme="dark"] #prev-month i, [data-theme="dark"] #next-month i, [data-theme="dark"] button[onclick*="changeMonth"], [data-theme="dark"] button[onclick*="changeMonth"] *, [data-theme="dark"] button[onclick*="changeMonth"] i, #calendar-month-year:not([data-theme]), #calendar-month-year:not([data-theme]) *, #calendar-days:not([data-theme]), #calendar-days:not([data-theme]) *, .calendar-day:not([data-theme]):not(.selected), .calendar-day:not([data-theme]):not(.selected) *, #booking-drawer:not([data-theme]), #booking-drawer:not([data-theme]) *, #mobile-booking-panel:not([data-theme]), #mobile-booking-panel:not([data-theme]) *, #prev-month:not([data-theme]), #prev-month:not([data-theme]) *, #next-month:not([data-theme]), #next-month:not([data-theme]) *, button[onclick*="changeMonth"]:not([data-theme]), button[onclick*="changeMonth"]:not([data-theme]) * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Selected calendar day with dynamic gradient background */ [data-theme="dark"] .calendar-day.selected, .calendar-day.selected { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 700 !important; } /* ======================================== ABSOLUTE MAXIMUM NUCLEAR TEXT COLOR ENFORCEMENT BLACK TEXT IN LIGHT MODE, WHITE TEXT IN DARK MODE THIS OVERRIDES ABSOLUTELY EVERYTHING!!! ======================================== */ /* LIGHT MODE - ABSOLUTELY EVERYTHING BLACK */ [data-theme="light"] * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* DARK MODE - ABSOLUTELY EVERYTHING WHITE */ [data-theme="dark"] * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* IF NO THEME SET, ASSUME DARK MODE */ body:not([data-theme="light"]) * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ORIGINAL NUCLEAR RULES AS BACKUP */ /* DARK MODE - EVERYTHING WHITE */ [data-theme="dark"], [data-theme="dark"] *, [data-theme="dark"] body, [data-theme="dark"] div, [data-theme="dark"] span, [data-theme="dark"] p, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] label, [data-theme="dark"] button, [data-theme="dark"] a, [data-theme="dark"] li, [data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .modal, [data-theme="dark"] .modal *, [data-theme="dark"] [id*="modal"], [data-theme="dark"] [id*="modal"] *, [data-theme="dark"] [class*="modal"], [data-theme="dark"] [class*="modal"] *, [data-theme="dark"] [id*="drawer"], [data-theme="dark"] [id*="drawer"] *, [data-theme="dark"] [id*="panel"], [data-theme="dark"] [id*="panel"] *, [data-theme="dark"] [id*="booking"], [data-theme="dark"] [id*="booking"] *, [data-theme="dark"] [id*="calendar"], [data-theme="dark"] [id*="calendar"] *, [data-theme="dark"] [id*="community"], [data-theme="dark"] [id*="community"] *, /* These were written as :not([data-theme="light"]), which is not the same as "dark": a session with no data-theme attribute at all matched too, so every modal, drawer and panel got white text on a white ground. That is what left the create-room labels invisible and the Access dropdown looking empty — with Paid unreachable, the price field could never be opened. Dark themes are named here instead of inferred from the absence of light. */ body[data-theme="dark"], body[data-theme="dark"] *, body[data-theme="dark-accent"], body[data-theme="dark-accent"] *, [data-theme="dark-accent"] .modal, [data-theme="dark-accent"] .modal *, [data-theme="dark-accent"] [id*="modal"], [data-theme="dark-accent"] [id*="modal"] *, [data-theme="dark-accent"] [id*="drawer"], [data-theme="dark-accent"] [id*="drawer"] *, [data-theme="dark-accent"] [id*="panel"], [data-theme="dark-accent"] [id*="panel"] *, [data-theme="dark-accent"] [id*="booking"], [data-theme="dark-accent"] [id*="booking"] *, [data-theme="dark-accent"] [id*="calendar"], [data-theme="dark-accent"] [id*="calendar"] * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* LIGHT MODE - EVERYTHING BLACK */ [data-theme="light"], [data-theme="light"] *, [data-theme="light"] body, [data-theme="light"] div, [data-theme="light"] span, [data-theme="light"] p, [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6, [data-theme="light"] label, [data-theme="light"] button, [data-theme="light"] a, [data-theme="light"] li, [data-theme="light"] td, [data-theme="light"] th, [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select, [data-theme="light"] .modal, [data-theme="light"] .modal *, [data-theme="light"] [id*="modal"], [data-theme="light"] [id*="modal"] *, [data-theme="light"] [class*="modal"], [data-theme="light"] [class*="modal"] *, [data-theme="light"] [id*="drawer"], [data-theme="light"] [id*="drawer"] *, [data-theme="light"] [id*="panel"], [data-theme="light"] [id*="panel"] *, [data-theme="light"] [id*="booking"], [data-theme="light"] [id*="booking"] *, [data-theme="light"] [id*="calendar"], [data-theme="light"] [id*="calendar"] * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* SPECIAL OVERRIDES FOR SELECTED ITEMS */ [data-theme="dark"] .calendar-day.selected, [data-theme="dark"] [class*="selected"], [data-theme="dark"] [style*="background: linear-gradient"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="light"] .calendar-day.selected, [data-theme="light"] [class*="selected"], [data-theme="light"] [style*="background: linear-gradient"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* COMMUNITY SETTINGS AND CLOSE BUTTON SPECIFIC */ [data-theme="dark"] #community-drawer button[onclick*="Settings"], [data-theme="dark"] #community-drawer button[onclick*="Settings"] *, [data-theme="dark"] #community-drawer button[onclick*="openSettings"], [data-theme="dark"] #community-drawer button[onclick*="openSettings"] *, [data-theme="dark"] .close-button, [data-theme="dark"] .close-btn, [data-theme="dark"] button[onclick*="close"], [data-theme="dark"] button[onclick*="Close"], [data-theme="dark"] .fa-times, [data-theme="dark"] .fa-close, [data-theme="dark"] .fa-x { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="light"] #community-drawer button[onclick*="Settings"], [data-theme="light"] #community-drawer button[onclick*="Settings"] *, [data-theme="light"] #community-drawer button[onclick*="openSettings"], [data-theme="light"] #community-drawer button[onclick*="openSettings"] *, [data-theme="light"] .close-button, [data-theme="light"] .close-btn, [data-theme="light"] button[onclick*="close"], [data-theme="light"] button[onclick*="Close"], [data-theme="light"] .fa-times, [data-theme="light"] .fa-close, [data-theme="light"] .fa-x { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* BOOKING CALENDAR AND ALL BOOKING MODALS - BLACK TEXT IN LIGHT MODE */ [data-theme="light"] #booking-main-area, [data-theme="light"] #booking-main-area *, [data-theme="light"] #booking-main-area p, [data-theme="light"] #booking-main-area h1, [data-theme="light"] #booking-main-area h2, [data-theme="light"] #booking-main-area h3, [data-theme="light"] #booking-main-area span, [data-theme="light"] #booking-main-area div, [data-theme="light"] #mobile-booking-calendar, [data-theme="light"] #mobile-booking-calendar *, [data-theme="light"] #mobile-booking-calendar p, [data-theme="light"] #mobile-booking-calendar span, [data-theme="light"] #mobile-booking-calendar div, [data-theme="light"] #calendar-month-year, [data-theme="light"] #calendar-days, [data-theme="light"] .calendar-day:not(.selected), [data-theme="light"] #booking-date-text, [data-theme="light"] #mobileBookingModal, [data-theme="light"] #mobileBookingModal *, [data-theme="light"] #buyItemModal, [data-theme="light"] #buyItemModal *, [data-theme="light"] [id*="bookingModal"], [data-theme="light"] [id*="bookingModal"] *, [data-theme="light"] [id*="booking-modal"], [data-theme="light"] [id*="booking-modal"] *, [data-theme="light"] .booking-modal, [data-theme="light"] .booking-modal *, [data-theme="light"] #mobile-booking-panel, [data-theme="light"] #mobile-booking-panel *, [data-theme="light"] #mobile-booking-owner-panel, [data-theme="light"] #mobile-booking-owner-panel *, [data-theme="light"] #mobile-booking-visitor-panel, [data-theme="light"] #mobile-booking-visitor-panel *, [data-theme="light"] .booking-service, [data-theme="light"] .booking-service *, [data-theme="light"] .booking-request, [data-theme="light"] .booking-request *, [data-theme="light"] [style*="Booking"], [data-theme="light"] [style*="Booking"] * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* BOOKING HEADER - THEME COLORS */ [data-theme="light"] #booking-main-area #booking-main-title, [data-theme="light"] #booking-main-area #booking-main-subtitle, [data-theme="light"] .booking-main-area #booking-main-title, [data-theme="light"] .booking-main-area #booking-main-subtitle, [data-theme="light"] #booking-main-title, [data-theme="light"] #booking-main-subtitle, [data-theme="light"] p#booking-main-subtitle, [data-theme="light"] h2#booking-main-title, [data-theme="light"] #booking-notification-icon, [data-theme="light"] #booking-notification-icon i, [data-theme="light"] #booking-settings-icon, [data-theme="light"] #booking-settings-icon i { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="dark"] #booking-main-area #booking-main-title, [data-theme="dark"] #booking-main-area #booking-main-subtitle, [data-theme="dark"] .booking-main-area #booking-main-title, [data-theme="dark"] .booking-main-area #booking-main-subtitle, [data-theme="dark"] #booking-main-title, [data-theme="dark"] #booking-main-subtitle, [data-theme="dark"] p#booking-main-subtitle, [data-theme="dark"] h2#booking-main-title, [data-theme="dark"] #booking-notification-icon, [data-theme="dark"] #booking-notification-icon i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* BOOKING TIME BUTTONS - THEME COLORS */ [data-theme="light"] .booking-main-area button, [data-theme="light"] #booking-main-area button { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="dark"] .booking-main-area button, [data-theme="dark"] #booking-main-area button { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* BOOKING FEED ICONS - THEME COLORS */ [data-theme="light"] #booking-main-area .fa-dollar-sign, [data-theme="light"] #morning-events .fa-dollar-sign, [data-theme="light"] #afternoon-events .fa-dollar-sign, [data-theme="light"] #evening-events .fa-dollar-sign, [data-theme="light"] #mobile-services-selection-list .fa-dollar-sign { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="light-accent"] #booking-main-area .fa-dollar-sign, [data-theme="light-accent"] #morning-events .fa-dollar-sign, [data-theme="light-accent"] #afternoon-events .fa-dollar-sign, [data-theme="light-accent"] #evening-events .fa-dollar-sign, [data-theme="light-accent"] #mobile-services-selection-list .fa-dollar-sign { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="dark"] #booking-main-area .fa-dollar-sign, [data-theme="dark"] #morning-events .fa-dollar-sign, [data-theme="dark"] #afternoon-events .fa-dollar-sign, [data-theme="dark"] #evening-events .fa-dollar-sign, [data-theme="dark"] #mobile-services-selection-list .fa-dollar-sign { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* OWNER BOOKINGS MODAL - THEME COLORS */ [data-theme="light"] #owner-bookings-modal #owner-bookings-title, [data-theme="light"] #owner-bookings-modal #owner-bookings-date, [data-theme="light"] #owner-bookings-modal #owner-bookings-back-btn, [data-theme="light"] #owner-bookings-modal #owner-bookings-back-icon, [data-theme="light"] #owner-bookings-modal .fa-dollar-sign, [data-theme="light"] #owner-bookings-list .fa-dollar-sign, [data-theme="light"] #owner-bookings-list .fa-ellipsis-v { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="light-accent"] #owner-bookings-modal #owner-bookings-title, [data-theme="light-accent"] #owner-bookings-modal #owner-bookings-date, [data-theme="light-accent"] #owner-bookings-modal #owner-bookings-back-btn, [data-theme="light-accent"] #owner-bookings-modal #owner-bookings-back-icon, [data-theme="light-accent"] #owner-bookings-modal .fa-dollar-sign, [data-theme="light-accent"] #owner-bookings-list .fa-dollar-sign, [data-theme="light-accent"] #owner-bookings-list .fa-ellipsis-v { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="dark"] #owner-bookings-modal #owner-bookings-title, [data-theme="dark"] #owner-bookings-modal #owner-bookings-date, [data-theme="dark"] #owner-bookings-modal #owner-bookings-back-btn, [data-theme="dark"] #owner-bookings-modal #owner-bookings-back-icon, [data-theme="dark"] #owner-bookings-modal .fa-dollar-sign, [data-theme="dark"] #owner-bookings-list .fa-dollar-sign, [data-theme="dark"] #owner-bookings-list .fa-ellipsis-v { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* SHOP ITEMS - BLACK TEXT IN LIGHT MODE */ [data-theme="light"] .shop-item-name, [data-theme="light"] .shop-item-description, [data-theme="light"] .shop-item-price { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* SHOP ITEMS - WHITE TEXT IN DARK MODE */ [data-theme="dark"] .shop-item-name, [data-theme="dark"] .shop-item-description, [data-theme="dark"] .shop-item-price { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ULTIMATE NUCLEAR LIGHT MODES - ABSOLUTELY EVERYTHING BLACK NO EXCEPTIONS */ [data-theme="light"], [data-theme="light"] *, [data-theme="light"] * *, [data-theme="light"] * * *, [data-theme="light"] * * * *, [data-theme="light"] * * * * *, [data-theme="light"] * * * * * *, [data-theme="light-accent"], [data-theme="light-accent"] *, [data-theme="light-accent"] * *, [data-theme="light-accent"] * * *, [data-theme="light-accent"] * * * *, [data-theme="light-accent"] * * * * *, [data-theme="light-accent"] * * * * * *, body[data-theme="light"], body[data-theme="light"] *, body[data-theme="light"] * *, body[data-theme="light"] * * *, body[data-theme="light"] * * * *, body[data-theme="light-accent"], body[data-theme="light-accent"] *, body[data-theme="light-accent"] * *, body[data-theme="light-accent"] * * *, body[data-theme="light-accent"] * * * *, html[data-theme="light"] body, html[data-theme="light"] body *, html[data-theme="light"] body * *, html[data-theme="light"] body * * *, html[data-theme="light-accent"] body, html[data-theme="light-accent"] body *, html[data-theme="light-accent"] body * *, html[data-theme="light-accent"] body * * * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; fill: #000000 !important; stroke: #000000 !important; } /* Season cards are photo tiles: their label sits ON the artwork, so the nuclear light rule above would paint it black on a dark image and make it unreadable. The scrim in mobile-seasons.css guarantees contrast for white, so opt these few elements out. Scoped to the card's own children only — everything else stays under the nuclear rule. */ [data-theme="light"] .mobile-season-card:not(.mobile-season-card--new) .mobile-season-card__title, [data-theme="light"] .mobile-season-card:not(.mobile-season-card--new) .mobile-season-card__meta, [data-theme="light"] .mobile-season-card:not(.mobile-season-card--new) .mobile-season-card__meta span, [data-theme="light"] .mobile-season-card .mobile-season-card__more, [data-theme="light"] .mobile-season-card .mobile-season-card__more i, [data-theme="light-accent"] .mobile-season-card:not(.mobile-season-card--new) .mobile-season-card__title, [data-theme="light-accent"] .mobile-season-card:not(.mobile-season-card--new) .mobile-season-card__meta, [data-theme="light-accent"] .mobile-season-card:not(.mobile-season-card--new) .mobile-season-card__meta span, [data-theme="light-accent"] .mobile-season-card .mobile-season-card__more, [data-theme="light-accent"] .mobile-season-card .mobile-season-card__more i, body[data-theme="light"] .mobile-season-card:not(.mobile-season-card--new) .mobile-season-card__title, body[data-theme="light"] .mobile-season-card:not(.mobile-season-card--new) .mobile-season-card__meta, body[data-theme="light"] .mobile-season-card:not(.mobile-season-card--new) .mobile-season-card__meta span, body[data-theme="light-accent"] .mobile-season-card:not(.mobile-season-card--new) .mobile-season-card__title, body[data-theme="light-accent"] .mobile-season-card:not(.mobile-season-card--new) .mobile-season-card__meta, body[data-theme="light-accent"] .mobile-season-card:not(.mobile-season-card--new) .mobile-season-card__meta span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; fill: #ffffff !important; stroke: none !important; } /* The selected season chip and the save button are dark surfaces with white labels on them. The nuclear light rule above would paint that text black on near-black and hide it, so opt these two out. */ [data-theme="light"] .mobile-import-library__full-stats-chip.is-active, [data-theme="light"] .mobile-import-library__game-sheet-save, [data-theme="light-accent"] .mobile-import-library__full-stats-chip.is-active, [data-theme="light-accent"] .mobile-import-library__game-sheet-save, body[data-theme="light"] .mobile-import-library__full-stats-chip.is-active, body[data-theme="light"] .mobile-import-library__game-sheet-save, body[data-theme="light-accent"] .mobile-import-library__full-stats-chip.is-active, body[data-theme="light-accent"] .mobile-import-library__game-sheet-save, html[data-theme="light"] body .mobile-import-library__full-stats-chip.is-active, html[data-theme="light"] body .mobile-import-library__game-sheet-save { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; fill: #ffffff !important; stroke: none !important; } /* Artless cards draw a large monogram as artwork, not as text. */ [data-theme="light"] .mobile-season-card .mobile-season-card__monogram, [data-theme="light-accent"] .mobile-season-card .mobile-season-card__monogram, body[data-theme="light"] .mobile-season-card .mobile-season-card__monogram, body[data-theme="light-accent"] .mobile-season-card .mobile-season-card__monogram { color: rgba(255, 255, 255, 0.62) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important; } /* The "Current" pill is the inverse: dark text on a light plate. */ [data-theme="light"] .mobile-season-card .mobile-season-card__badge, [data-theme="light-accent"] .mobile-season-card .mobile-season-card__badge, body[data-theme="light"] .mobile-season-card .mobile-season-card__badge, body[data-theme="light-accent"] .mobile-season-card .mobile-season-card__badge { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* NUCLEAR DARK MODE - EVERYTHING WHITE */ [data-theme="dark"], [data-theme="dark"] *, [data-theme="dark"] body, [data-theme="dark"] div, [data-theme="dark"] span, [data-theme="dark"] p, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] label, [data-theme="dark"] button, [data-theme="dark"] a, [data-theme="dark"] li, [data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ULTRA NUCLEAR BOOKING CALENDAR - FORCE WHITE TEXT IN DARK MODE */ [data-theme="dark"] #mobile-booking-calendar, [data-theme="dark"] #mobile-booking-calendar *, [data-theme="dark"] #booking-main-area, [data-theme="dark"] #booking-main-area *, [data-theme="dark"] .booking-main-area, [data-theme="dark"] .booking-main-area *, [data-theme="dark"] #calendar-month-year, [data-theme="dark"] #calendar-days, [data-theme="dark"] #calendar-days div, [data-theme="dark"] .calendar-day, [data-theme="dark"] .calendar-day:not(.selected), [data-theme="dark"] div.calendar-day, [data-theme="dark"] .calendar-header, [data-theme="dark"] .calendar-weekday, [data-theme="dark"] #booking-date-text, [data-theme="dark"] [id*="booking"], [data-theme="dark"] [id*="booking"] *, [data-theme="dark"] [id*="calendar"], [data-theme="dark"] [id*="calendar"] *, [data-theme="dark"] [id*="calendar"] div { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ABSOLUTE FORCE CALENDAR DAY NUMBERS WHITE IN DARK MODE */ [data-theme="dark"] .calendar-day { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="dark"] .calendar-day[style] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* NUCLEAR FORCE COMMUNITY SETTINGS TEXT WHITE IN DARK MODE */ [data-theme="dark"] #community-drawer button, [data-theme="dark"] #community-drawer button *, [data-theme="dark"] #community-drawer button span, [data-theme="dark"] #community-drawer button i, [data-theme="dark"] #community-drawer button[onclick*="Settings"], [data-theme="dark"] #community-drawer button[onclick*="Settings"] *, [data-theme="dark"] #community-drawer button[onclick*="Settings"] span, [data-theme="dark"] #community-drawer button[onclick*="openSettings"], [data-theme="dark"] #community-drawer button[onclick*="openSettings"] *, [data-theme="dark"] #community-drawer button[onclick*="openSettings"] span, [data-theme="dark"] #community-drawer button[onclick="openSettings()"], [data-theme="dark"] #community-drawer button[onclick="openSettings()"] *, [data-theme="dark"] #community-drawer button[onclick="openSettings()"] span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* NUCLEAR FORCE ALL SETTINGS ICONS AND CLOSE BUTTONS WHITE IN DARK MODE */ [data-theme="dark"] .fa-cog, [data-theme="dark"] .fa-gear, [data-theme="dark"] .fa-settings, [data-theme="dark"] .fa-times, [data-theme="dark"] .fa-close, [data-theme="dark"] .fa-x, [data-theme="dark"] .close-button, [data-theme="dark"] .close-btn, [data-theme="dark"] .settings-icon, [data-theme="dark"] .settings-button, [data-theme="dark"] button[onclick*="close"], [data-theme="dark"] button[onclick*="Close"], [data-theme="dark"] button[onclick*="toggle"], [data-theme="dark"] button[onclick*="Toggle"], [data-theme="dark"] i[class*="fa-"], [data-theme="dark"] i[class*="icon"], [data-theme="dark"] span[class*="icon"], [data-theme="dark"] [class*="close"], [data-theme="dark"] [class*="settings"], [data-theme="dark"] button[onclick*="toggleCommunityDrawer"], [data-theme="dark"] button[onclick*="toggleCommunityDrawer"] *, [data-theme="dark"] button[onclick="toggleCommunityDrawer()"], [data-theme="dark"] button[onclick="toggleCommunityDrawer()"] *, [data-theme="dark"] [onclick*="close"] i, [data-theme="dark"] [onclick*="settings"] i, [data-theme="dark"] [onclick*="toggle"] i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ULTRA NUCLEAR BOOKING CALENDAR - FORCE BLACK TEXT IN LIGHT MODE */ [data-theme="light"] #mobile-booking-calendar, [data-theme="light"] #mobile-booking-calendar *, [data-theme="light"] #booking-main-area, [data-theme="light"] #booking-main-area *, [data-theme="light"] .booking-main-area, [data-theme="light"] .booking-main-area *, [data-theme="light"] #calendar-month-year, [data-theme="light"] #calendar-days, [data-theme="light"] .calendar-day:not(.selected), [data-theme="light"] .calendar-header, [data-theme="light"] .calendar-weekday, [data-theme="light"] #booking-date-text, [data-theme="light"] [id*="booking"], [data-theme="light"] [id*="booking"] *, [data-theme="light"] [id*="calendar"], [data-theme="light"] [id*="calendar"] * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* DARK MODE - ALL BOOKING MODALS WHITE TEXT */ [data-theme="dark"] #mobileBookingModal, [data-theme="dark"] #mobileBookingModal *, [data-theme="dark"] #buyItemModal, [data-theme="dark"] #buyItemModal *, [data-theme="dark"] [id*="bookingModal"], [data-theme="dark"] [id*="bookingModal"] *, [data-theme="dark"] [id*="booking-modal"], [data-theme="dark"] [id*="booking-modal"] *, [data-theme="dark"] .booking-modal, [data-theme="dark"] .booking-modal * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ULTIMATE MEGA NUCLEAR - ABSOLUTELY EVERYTHING IN BOOKING MUST BE WHITE */ [data-theme="dark"] #mobile-booking-calendar, [data-theme="dark"] #mobile-booking-calendar *, [data-theme="dark"] #mobile-booking-calendar p, [data-theme="dark"] #mobile-booking-calendar h1, [data-theme="dark"] #mobile-booking-calendar h2, [data-theme="dark"] #mobile-booking-calendar h3, [data-theme="dark"] #mobile-booking-calendar span, [data-theme="dark"] #mobile-booking-calendar div, [data-theme="dark"] .booking-main-area, [data-theme="dark"] .booking-main-area *, [data-theme="dark"] .booking-main-area p, [data-theme="dark"] .booking-main-area h1, [data-theme="dark"] .booking-main-area h2, [data-theme="dark"] .booking-main-area h3, [data-theme="dark"] #booking-main-area, [data-theme="dark"] #booking-main-area *, [data-theme="dark"] #booking-main-area p, [data-theme="dark"] #booking-main-area h1, [data-theme="dark"] #booking-main-area h2, [data-theme="dark"] #booking-main-area h3, [data-theme="dark"] #booking-date-text, #mobile-booking-calendar:not([data-theme]), #mobile-booking-calendar:not([data-theme]) *, #mobile-booking-calendar:not([data-theme]) p, #mobile-booking-calendar:not([data-theme]) h1, #mobile-booking-calendar:not([data-theme]) h2, #mobile-booking-calendar:not([data-theme]) h3, #mobile-booking-calendar:not([data-theme]) span, #mobile-booking-calendar:not([data-theme]) div, .booking-main-area:not([data-theme]), .booking-main-area:not([data-theme]) *, .booking-main-area:not([data-theme]) p, #booking-main-area:not([data-theme]), #booking-main-area:not([data-theme]) *, #booking-main-area:not([data-theme]) p, #booking-date-text:not([data-theme]) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* MEGA NUCLEAR - FORCE ALL BOOKING DATE TEXT TO BE WHITE */ [data-theme="dark"] p[style*="Select your booking date"], [data-theme="dark"] p:contains("Select your booking date"), [data-theme="dark"] #mobile-booking-calendar p, [data-theme="dark"] #mobile-booking-calendar p *, [data-theme="dark"] #booking-date-text, [data-theme="dark"] #booking-date-text *, [data-theme="dark"] p#booking-date-text, [data-theme="dark"] [id*="booking"] p, [data-theme="dark"] [id*="calendar"] p, [data-theme="dark"] div[style*="text-align: center"] p, #mobile-booking-calendar p:not([data-theme]), #mobile-booking-calendar p:not([data-theme]) *, #booking-date-text:not([data-theme]), #booking-date-text:not([data-theme]) *, p#booking-date-text:not([data-theme]), [id*="booking"] p:not([data-theme]), [id*="calendar"] p:not([data-theme]), div[style*="text-align: center"] p:not([data-theme]), /* ULTRA NUCLEAR - TARGET ANY P TAG IN BOOKING/CALENDAR CONTEXT */ [data-theme="dark"] #mobile-booking-owner-panel p, [data-theme="dark"] #mobile-booking-visitor-panel p, #mobile-booking-owner-panel p:not([data-theme]), #mobile-booking-visitor-panel p:not([data-theme]), /* ABSOLUTELY FORCE THE SPECIFIC TEXT */ p:has-text("Select your booking date"), [data-theme="dark"] p:has-text("Select your booking date") { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: none !important; filter: none !important; opacity: 1 !important; } /* NUCLEAR CALENDAR SPECIFIC OVERRIDES */ [data-theme="dark"] .calendar-day[style*="color"], [data-theme="dark"] .calendar-day div[style*="color"], [data-theme="dark"] .calendar-day span[style*="color"], .calendar-day[style*="color"]:not([data-theme]), .calendar-day div[style*="color"]:not([data-theme]), .calendar-day span[style*="color"]:not([data-theme]) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ULTIMATE NUCLEAR - FORCE EVERYTHING IN DRAWERS TO WHITE */ [data-theme="dark"] [id$="-drawer"], [data-theme="dark"] [id$="-drawer"] *, [data-theme="dark"] [id$="-drawer"] * *, [data-theme="dark"] [id$="-drawer"] * * *, [data-theme="dark"] [id$="-panel"], [data-theme="dark"] [id$="-panel"] *, [data-theme="dark"] [id$="-panel"] * *, [data-theme="dark"] [id$="-panel"] * * *, [id$="-drawer"]:not([data-theme]), [id$="-drawer"]:not([data-theme]) *, [id$="-panel"]:not([data-theme]), [id$="-panel"]:not([data-theme]) * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* OVERRIDE ANY INLINE STYLES WITH BLACK TEXT */ [data-theme="dark"] [style*="color: black"], [data-theme="dark"] [style*="color: #000"], [data-theme="dark"] [style*="color: rgb(0"], [data-theme="dark"] [style*="color: rgba(0,0,0"], [style*="color: black"]:not([data-theme]), [style*="color: #000"]:not([data-theme]), [style*="color: rgb(0"]:not([data-theme]), [style*="color: rgba(0,0,0"]:not([data-theme]) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Theme styles for ALL drawer panels */ /* Light Theme for all drawers */ [data-theme="light"] #bytes-drawer, [data-theme="light"] #virtual-drawer, [data-theme="light"] #market-drawer, [data-theme="light"] #shop-drawer, [data-theme="light"] #booking-drawer, [data-theme="light"] #stream-drawer { background: linear-gradient( to bottom, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 100% ) !important; border-top: 1px solid rgba(0, 0, 0, 0.1) !important; color: #000000 !important; } /* Light Accent Theme for all drawers */ [data-theme="light-accent"] #bytes-drawer, [data-theme="light-accent"] #virtual-drawer, [data-theme="light-accent"] #market-drawer, [data-theme="light-accent"] #shop-drawer, [data-theme="light-accent"] #booking-drawer, [data-theme="light-accent"] #stream-drawer { background: linear-gradient( to bottom, rgba(var(--accent-color-rgb), 0.15) 0%, rgba(var(--accent-color-rgb), 0.25) 100% ) !important; border-top: 1px solid rgba(var(--accent-color-rgb), 0.3) !important; color: #000000 !important; } /* Dark Theme for all drawers (default) */ [data-theme="dark"] #bytes-drawer, [data-theme="dark"] #virtual-drawer, [data-theme="dark"] #market-drawer, [data-theme="dark"] #shop-drawer, [data-theme="dark"] #booking-drawer, [data-theme="dark"] #stream-drawer, #bytes-drawer, #virtual-drawer, #market-drawer, #shop-drawer, #booking-drawer, #stream-drawer { background: #000000 !important; border-top: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } /* Text color fixes for drawer content */ [data-theme="light"] .stream-drawer h2, [data-theme="light"] .stream-drawer h3, [data-theme="light"] .stream-drawer h4, [data-theme="light"] .stream-drawer p, [data-theme="light"] .stream-drawer span, [data-theme="light"] .stream-drawer label, [data-theme="light-accent"] .stream-drawer h2, [data-theme="light-accent"] .stream-drawer h3, [data-theme="light-accent"] .stream-drawer h4, [data-theme="light-accent"] .stream-drawer p, [data-theme="light-accent"] .stream-drawer span, [data-theme="light-accent"] .stream-drawer label { color: #000000 !important; } [data-theme="light"] .bytes-drawer-content h2, [data-theme="light"] .bytes-drawer-content h3, [data-theme="light"] .bytes-drawer-content h4, [data-theme="light"] .bytes-drawer-content p, [data-theme="light"] .bytes-drawer-content span, [data-theme="light"] .bytes-drawer-content label, [data-theme="light-accent"] .bytes-drawer-content h2, [data-theme="light-accent"] .bytes-drawer-content h3, [data-theme="light-accent"] .bytes-drawer-content h4, [data-theme="light-accent"] .bytes-drawer-content p, [data-theme="light-accent"] .bytes-drawer-content span, [data-theme="light-accent"] .bytes-drawer-content label { color: #000000 !important; } /* More comprehensive text color fixes for all drawers in light modes */ [data-theme="light"] #virtual-drawer h2, [data-theme="light"] #virtual-drawer h3, [data-theme="light"] #virtual-drawer h4, [data-theme="light"] #virtual-drawer p, [data-theme="light"] #virtual-drawer span, [data-theme="light"] #virtual-drawer label, [data-theme="light"] #market-drawer h2, [data-theme="light"] #market-drawer h3, [data-theme="light"] #market-drawer h4, [data-theme="light"] #market-drawer p, [data-theme="light"] #market-drawer span, [data-theme="light"] #market-drawer label, [data-theme="light"] #shop-drawer h2, [data-theme="light"] #shop-drawer h3, [data-theme="light"] #shop-drawer h4, [data-theme="light"] #shop-drawer p, [data-theme="light"] #shop-drawer span, [data-theme="light"] #shop-drawer label, [data-theme="light"] #booking-drawer h2, [data-theme="light"] #booking-drawer h3, [data-theme="light"] #booking-drawer h4, [data-theme="light"] #booking-drawer p, [data-theme="light"] #booking-drawer span, [data-theme="light"] #booking-drawer label, [data-theme="light-accent"] #virtual-drawer h2, [data-theme="light-accent"] #virtual-drawer h3, [data-theme="light-accent"] #virtual-drawer h4, [data-theme="light-accent"] #virtual-drawer p, [data-theme="light-accent"] #virtual-drawer span, [data-theme="light-accent"] #virtual-drawer label, [data-theme="light-accent"] #market-drawer h2, [data-theme="light-accent"] #market-drawer h3, [data-theme="light-accent"] #market-drawer h4, [data-theme="light-accent"] #market-drawer p, [data-theme="light-accent"] #market-drawer span, [data-theme="light-accent"] #market-drawer label, [data-theme="light-accent"] #shop-drawer h2, [data-theme="light-accent"] #shop-drawer h3, [data-theme="light-accent"] #shop-drawer h4, [data-theme="light-accent"] #shop-drawer p, [data-theme="light-accent"] #shop-drawer span, [data-theme="light-accent"] #shop-drawer label, [data-theme="light-accent"] #booking-drawer h2, [data-theme="light-accent"] #booking-drawer h3, [data-theme="light-accent"] #booking-drawer h4, [data-theme="light-accent"] #booking-drawer p, [data-theme="light-accent"] #booking-drawer span, [data-theme="light-accent"] #booking-drawer label { color: #000000 !important; } /* NUCLEAR OPTION - DARK MODE SHOP DRAWER */ [data-theme="dark"] #shop-drawer, [data-theme="dark"] #shop-drawer *, [data-theme="dark"] #shop-drawer * *, [data-theme="dark"] #shop-drawer * * *, [data-theme="dark"] #shop-drawer * * * *, [data-theme="dark"] #shop-drawer * * * * *, [data-theme="dark"] #shop-drawer h1, [data-theme="dark"] #shop-drawer h2, [data-theme="dark"] #shop-drawer h3, [data-theme="dark"] #shop-drawer h4, [data-theme="dark"] #shop-drawer h5, [data-theme="dark"] #shop-drawer h6, [data-theme="dark"] #shop-drawer p, [data-theme="dark"] #shop-drawer span, [data-theme="dark"] #shop-drawer div, [data-theme="dark"] #shop-drawer label, [data-theme="dark"] #shop-drawer strong, [data-theme="dark"] #shop-drawer em, [data-theme="dark"] #shop-drawer small, [data-theme="dark"] #shop-drawer li, [data-theme="dark"] #shop-drawer td, [data-theme="dark"] #shop-drawer th { color: white !important; -webkit-text-fill-color: white !important; opacity: 1 !important; } /* Only preserve these specific colored elements in dark mode */ [data-theme="dark"] #shop-drawer .fa-star, [data-theme="dark"] #shop-drawer .fa-star-half-alt { color: #ffc107 !important; } [data-theme="dark"] #visitor-cart-total, [data-theme="dark"] #shop-revenue { color: #10ff80 !important; } [data-theme="dark"] #shop-orders-count { color: #FFD700 !important; } /* Status colors */ [data-theme="dark"] #shop-drawer .pending-status { color: #FFC107 !important; } [data-theme="dark"] #shop-drawer .verified-status { color: #4CAF50 !important; } /* NUCLEAR OPTION - DARK MODE BOOKING DRAWER */ [data-theme="dark"] #booking-drawer, [data-theme="dark"] #booking-drawer *, [data-theme="dark"] #booking-drawer * *, [data-theme="dark"] #booking-drawer * * *, [data-theme="dark"] #booking-drawer * * * *, [data-theme="dark"] #booking-drawer * * * * *, [data-theme="dark"] #booking-drawer h1, [data-theme="dark"] #booking-drawer h2, [data-theme="dark"] #booking-drawer h3, [data-theme="dark"] #booking-drawer h4, [data-theme="dark"] #booking-drawer h5, [data-theme="dark"] #booking-drawer h6, [data-theme="dark"] #booking-drawer p, [data-theme="dark"] #booking-drawer span, [data-theme="dark"] #booking-drawer div, [data-theme="dark"] #booking-drawer label, [data-theme="dark"] #booking-drawer strong, [data-theme="dark"] #booking-drawer em, [data-theme="dark"] #booking-drawer small, [data-theme="dark"] #booking-drawer li, [data-theme="dark"] #booking-drawer td, [data-theme="dark"] #booking-drawer th, [data-theme="dark"] .booking-main-area, [data-theme="dark"] .booking-main-area *, [data-theme="dark"] .booking-main-area * *, [data-theme="dark"] .booking-main-area * * *, [data-theme="dark"] .booking-slot, [data-theme="dark"] .booking-slot *, [data-theme="dark"] .month-header, [data-theme="dark"] .month-header *, [data-theme="dark"] #current-month, [data-theme="dark"] #current-year, [data-theme="dark"] .calendar-grid, [data-theme="dark"] .calendar-grid *, [data-theme="dark"] .calendar-day, [data-theme="dark"] .calendar-day * { color: white !important; -webkit-text-fill-color: white !important; opacity: 1 !important; } /* Preserve booking-specific accent colors */ [data-theme="dark"] #booking-drawer .available-slot, [data-theme="dark"] .booking-main-area .available-slot { background: rgba(16, 255, 128, 0.1) !important; border-color: #10ff80 !important; } [data-theme="dark"] #booking-drawer .booked-slot, [data-theme="dark"] .booking-main-area .booked-slot { background: rgba(255, 68, 68, 0.1) !important; border-color: #ff4444 !important; } /* Light-accent theme booking slots with glassmorphism */ [data-theme="light-accent"] #booking-drawer .available-slot, [data-theme="light-accent"] .booking-main-area .available-slot { background: rgba(16, 255, 128, 0.1) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border: 2px solid rgba(16, 255, 128, 0.5) !important; color: #000000 !important; } [data-theme="light-accent"] #booking-drawer .booked-slot, [data-theme="light-accent"] .booking-main-area .booked-slot { background: rgba(255, 68, 68, 0.1) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border: 2px solid rgba(255, 68, 68, 0.5) !important; color: #000000 !important; } /* Light theme booking slots */ [data-theme="light"] #booking-drawer .available-slot, [data-theme="light"] .booking-main-area .available-slot { background: rgba(16, 255, 128, 0.1) !important; border: 2px solid #10ff80 !important; color: #000000 !important; } [data-theme="light"] #booking-drawer .booked-slot, [data-theme="light"] .booking-main-area .booked-slot { background: rgba(255, 68, 68, 0.1) !important; border: 2px solid #ff4444 !important; color: #000000 !important; } [data-theme="dark"] .calendar-day.has-bookings { background: rgba(16, 255, 128, 0.15) !important; } [data-theme="dark"] .calendar-day.selected { background: var(--primary-color) !important; color: white !important; } /* Light-accent theme calendar enhancements with glassmorphism */ [data-theme="light-accent"] .calendar-day.has-bookings { background: rgba(16, 255, 128, 0.15) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border: 1px solid rgba(16, 255, 128, 0.3) !important; } [data-theme="light-accent"] .calendar-day.selected { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important; color: white !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } /* Light theme calendar enhancements */ [data-theme="light"] .calendar-day.has-bookings { background: rgba(16, 255, 128, 0.15) !important; border: 1px solid rgba(16, 255, 128, 0.4) !important; } [data-theme="light"] .calendar-day.selected { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important; color: white !important; } /* NUCLEAR OPTION - DARK MODE MARKET DRAWER */ [data-theme="dark"] #market-drawer, [data-theme="dark"] #market-drawer *, [data-theme="dark"] #market-drawer * *, [data-theme="dark"] #market-drawer * * *, [data-theme="dark"] #market-drawer * * * *, [data-theme="dark"] #market-drawer * * * * *, [data-theme="dark"] #market-drawer h1, [data-theme="dark"] #market-drawer h2, [data-theme="dark"] #market-drawer h3, [data-theme="dark"] #market-drawer h4, [data-theme="dark"] #market-drawer h5, [data-theme="dark"] #market-drawer h6, [data-theme="dark"] #market-drawer p, [data-theme="dark"] #market-drawer span, [data-theme="dark"] #market-drawer div, [data-theme="dark"] #market-drawer label, [data-theme="dark"] #market-drawer strong, [data-theme="dark"] #market-drawer em, [data-theme="dark"] #market-drawer small, [data-theme="dark"] #market-drawer li, [data-theme="dark"] #market-drawer td, [data-theme="dark"] #market-drawer th, [data-theme="dark"] #market-drawer button, [data-theme="dark"] #market-drawer a, [data-theme="dark"] .market-item, [data-theme="dark"] .market-item *, [data-theme="dark"] .market-category, [data-theme="dark"] .market-category *, [data-theme="dark"] .market-price, [data-theme="dark"] .market-description { color: white !important; -webkit-text-fill-color: white !important; opacity: 1 !important; } [data-theme="dark"] #market-drawer .mobile-market-buy-bucks-btn, [data-theme="dark"] #market-drawer .mobile-market-buy-bucks-btn *, [data-theme="dark"] #market-drawer .mobile-market-buy-bucks-btn span, [data-theme="dark"] #market-drawer .mobile-market-buy-bucks-btn i { color: #050505 !important; -webkit-text-fill-color: #050505 !important; } body.market-wallet-open #pwa-install-banner { display: none !important; } body.market-rewards-open #pwa-install-banner { display: none !important; } #market-drawer #mobile-market-actions { display: grid !important; width: 100% !important; align-items: stretch !important; } #market-drawer #mobile-market-actions > button { width: 100% !important; box-sizing: border-box !important; } /* Preserve market-specific accent colors */ [data-theme="dark"] #market-drawer .price-tag, [data-theme="dark"] #market-drawer .market-price { color: #10ff80 !important; -webkit-text-fill-color: #10ff80 !important; } [data-theme="dark"] #market-drawer .sale-badge { color: #ff4444 !important; -webkit-text-fill-color: #ff4444 !important; } [data-theme="dark"] #market-drawer .new-badge { color: #FFD700 !important; -webkit-text-fill-color: #FFD700 !important; } /* NUCLEAR OPTION - DARK MODE VIRTUAL DRAWER */ [data-theme="dark"] #virtual-drawer, [data-theme="dark"] #virtual-drawer *, [data-theme="dark"] #virtual-drawer * *, [data-theme="dark"] #virtual-drawer * * *, [data-theme="dark"] #virtual-drawer * * * *, [data-theme="dark"] #virtual-drawer * * * * *, [data-theme="dark"] #virtual-drawer h1, [data-theme="dark"] #virtual-drawer h2, [data-theme="dark"] #virtual-drawer h3, [data-theme="dark"] #virtual-drawer h4, [data-theme="dark"] #virtual-drawer h5, [data-theme="dark"] #virtual-drawer h6, [data-theme="dark"] #virtual-drawer p, [data-theme="dark"] #virtual-drawer span, [data-theme="dark"] #virtual-drawer div, [data-theme="dark"] #virtual-drawer label, [data-theme="dark"] #virtual-drawer strong, [data-theme="dark"] #virtual-drawer em, [data-theme="dark"] #virtual-drawer small, [data-theme="dark"] #virtual-drawer li, [data-theme="dark"] #virtual-drawer td, [data-theme="dark"] #virtual-drawer th, [data-theme="dark"] #virtual-drawer button, [data-theme="dark"] #virtual-drawer a, [data-theme="dark"] #mobile-virtual-panel, [data-theme="dark"] #mobile-virtual-panel *, [data-theme="dark"] .virtual-panel, [data-theme="dark"] .virtual-panel *, [data-theme="dark"] .virtual-content, [data-theme="dark"] .virtual-content *, [data-theme="dark"] .virtual-item, [data-theme="dark"] .virtual-item * { color: white !important; -webkit-text-fill-color: white !important; opacity: 1 !important; } /* Preserve virtual-specific accent colors */ [data-theme="dark"] #virtual-drawer .online-indicator, [data-theme="dark"] #mobile-virtual-panel .online-indicator { color: #10ff80 !important; -webkit-text-fill-color: #10ff80 !important; } [data-theme="dark"] #virtual-drawer .offline-indicator, [data-theme="dark"] #mobile-virtual-panel .offline-indicator { color: #ff4444 !important; -webkit-text-fill-color: #ff4444 !important; } [data-theme="dark"] #virtual-drawer .virtual-badge, [data-theme="dark"] #mobile-virtual-panel .virtual-badge { color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; } /* NUCLEAR OPTION - DARK MODE BYTES DRAWER */ [data-theme="dark"] #bytes-drawer, [data-theme="dark"] #bytes-drawer *, [data-theme="dark"] #bytes-drawer * *, [data-theme="dark"] #bytes-drawer h1, [data-theme="dark"] #bytes-drawer h2, [data-theme="dark"] #bytes-drawer h3, [data-theme="dark"] #bytes-drawer h4, [data-theme="dark"] #bytes-drawer h5, [data-theme="dark"] #bytes-drawer h6, [data-theme="dark"] #bytes-drawer p, [data-theme="dark"] #bytes-drawer span, [data-theme="dark"] #bytes-drawer div, [data-theme="dark"] #bytes-drawer label, [data-theme="dark"] #bytes-drawer strong, [data-theme="dark"] #bytes-drawer em, [data-theme="dark"] #bytes-drawer small, [data-theme="dark"] #bytes-drawer li, [data-theme="dark"] #bytes-drawer td, [data-theme="dark"] #bytes-drawer th, [data-theme="dark"] #bytes-drawer button, [data-theme="dark"] #bytes-drawer a, [data-theme="dark"] #mobile-bytes-panel, [data-theme="dark"] #mobile-bytes-panel *, [data-theme="dark"] .bytes-panel, [data-theme="dark"] .bytes-panel *, [data-theme="dark"] .bytes-content, [data-theme="dark"] .bytes-content *, [data-theme="dark"] .bytes-item, [data-theme="dark"] .bytes-item *, [data-theme="dark"] #bytes-owner-panel, [data-theme="dark"] #bytes-owner-panel *, [data-theme="dark"] #bytes-visitor-panel, [data-theme="dark"] #bytes-visitor-panel *, [data-theme="dark"] #mobile-bytes-grid, [data-theme="dark"] #mobile-bytes-grid * { color: white !important; -webkit-text-fill-color: white !important; opacity: 1 !important; } /* Preserve bytes-specific accent colors */ [data-theme="dark"] #bytes-drawer .verified-badge, [data-theme="dark"] #mobile-bytes-panel .verified-badge { color: #10ff80 !important; -webkit-text-fill-color: #10ff80 !important; } [data-theme="dark"] #bytes-drawer .pending-badge, [data-theme="dark"] #mobile-bytes-panel .pending-badge { color: #FFC107 !important; -webkit-text-fill-color: #FFC107 !important; } [data-theme="dark"] #bytes-drawer .locked-badge, [data-theme="dark"] #mobile-bytes-panel .locked-badge { color: #ff4444 !important; -webkit-text-fill-color: #ff4444 !important; } /* Dark Accent Bytes Badges with Neon Glow */ [data-theme="dark-accent"] #bytes-drawer .verified-badge, [data-theme="dark-accent"] #mobile-bytes-panel .verified-badge { color: #10ff80 !important; -webkit-text-fill-color: #10ff80 !important; text-shadow: 0 0 10px rgba(16, 255, 128, 0.6); } [data-theme="dark-accent"] #bytes-drawer .pending-badge, [data-theme="dark-accent"] #mobile-bytes-panel .pending-badge { color: #FFC107 !important; -webkit-text-fill-color: #FFC107 !important; text-shadow: 0 0 10px rgba(255, 193, 7, 0.6); } [data-theme="dark-accent"] #bytes-drawer .locked-badge, [data-theme="dark-accent"] #mobile-bytes-panel .locked-badge { color: #ff4444 !important; -webkit-text-fill-color: #ff4444 !important; text-shadow: 0 0 10px rgba(255, 68, 68, 0.6); } [data-theme="dark"] #bytes-drawer .upload-count, [data-theme="dark"] #mobile-bytes-panel .upload-count { color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; } /* =============================================== */ /* NUCLEAR LIGHT MODE - FORCE BLACK TEXT EVERYWHERE */ /* =============================================== */ /* SHOP DRAWER - LIGHT MODE NUCLEAR BLACK */ [data-theme="light"] #shop-drawer, [data-theme="light"] #shop-drawer *, [data-theme="light"] #shop-drawer * *, [data-theme="light"] #shop-drawer * * *, [data-theme="light"] #shop-drawer * * * *, [data-theme="light"] #shop-drawer * * * * *, [data-theme="light-accent"] #shop-drawer, [data-theme="light-accent"] #shop-drawer *, [data-theme="light-accent"] #shop-drawer * *, [data-theme="light-accent"] #shop-drawer * * *, [data-theme="light-accent"] #shop-drawer * * * *, [data-theme="light-accent"] #shop-drawer * * * * * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; opacity: 1 !important; } /* BOOKING DRAWER - LIGHT MODE NUCLEAR BLACK */ [data-theme="light"] #booking-drawer, [data-theme="light"] #booking-drawer *, [data-theme="light"] #booking-drawer * *, [data-theme="light"] #booking-drawer * * *, [data-theme="light"] #booking-drawer * * * *, [data-theme="light"] #booking-drawer * * * * *, [data-theme="light"] .booking-main-area, [data-theme="light"] .booking-main-area *, [data-theme="light-accent"] #booking-drawer, [data-theme="light-accent"] #booking-drawer *, [data-theme="light-accent"] #booking-drawer * *, [data-theme="light-accent"] #booking-drawer * * *, [data-theme="light-accent"] #booking-drawer * * * *, [data-theme="light-accent"] #booking-drawer * * * * *, [data-theme="light-accent"] .booking-main-area, [data-theme="light-accent"] .booking-main-area * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; opacity: 1 !important; } /* Booking Main Area Glassmorphism Backgrounds */ [data-theme="light-accent"] .booking-main-area { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(20px) saturate(120%) !important; -webkit-backdrop-filter: blur(20px) saturate(120%) !important; } [data-theme="light-accent"] .booking-main-area > div:first-child { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; } [data-theme="light"] .booking-main-area { background: #ffffff !important; } [data-theme="dark"] .booking-main-area { background: var(--input-background-color) !important; } /* MARKET DRAWER - LIGHT MODE NUCLEAR BLACK */ [data-theme="light"] #market-drawer, [data-theme="light"] #market-drawer *, [data-theme="light"] #market-drawer * *, [data-theme="light"] #market-drawer * * *, [data-theme="light"] #market-drawer * * * *, [data-theme="light"] #market-drawer * * * * *, [data-theme="light-accent"] #market-drawer, [data-theme="light-accent"] #market-drawer *, [data-theme="light-accent"] #market-drawer * *, [data-theme="light-accent"] #market-drawer * * *, [data-theme="light-accent"] #market-drawer * * * *, [data-theme="light-accent"] #market-drawer * * * * * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; opacity: 1 !important; } /* VIRTUAL DRAWER - LIGHT MODE NUCLEAR BLACK */ [data-theme="light"] #virtual-drawer, [data-theme="light"] #virtual-drawer *, [data-theme="light"] #virtual-drawer * *, [data-theme="light"] #virtual-drawer * * *, [data-theme="light"] #virtual-drawer * * * *, [data-theme="light"] #virtual-drawer * * * * *, [data-theme="light"] #mobile-virtual-panel, [data-theme="light"] #mobile-virtual-panel *, [data-theme="light-accent"] #virtual-drawer, [data-theme="light-accent"] #virtual-drawer *, [data-theme="light-accent"] #virtual-drawer * *, [data-theme="light-accent"] #virtual-drawer * * *, [data-theme="light-accent"] #virtual-drawer * * * *, [data-theme="light-accent"] #virtual-drawer * * * * *, [data-theme="light-accent"] #mobile-virtual-panel, [data-theme="light-accent"] #mobile-virtual-panel * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; opacity: 1 !important; } /* BYTES DRAWER - LIGHT MODE NUCLEAR BLACK */ [data-theme="light"] #bytes-drawer, [data-theme="light"] #bytes-drawer *, [data-theme="light"] #bytes-drawer * *, [data-theme="light"] #mobile-bytes-panel, [data-theme="light"] #mobile-bytes-panel *, [data-theme="light-accent"] #bytes-drawer, [data-theme="light-accent"] #bytes-drawer *, [data-theme="light-accent"] #bytes-drawer * *, [data-theme="light-accent"] #mobile-bytes-panel, [data-theme="light-accent"] #mobile-bytes-panel * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; opacity: 1 !important; } /* COMMUNITY DRAWER - LIGHT MODE NUCLEAR BLACK */ [data-theme="light"] #community-drawer, [data-theme="light"] #community-drawer *, [data-theme="light"] #community-drawer * *, [data-theme="light"] #community-drawer * * *, [data-theme="light"] #community-drawer * * * *, [data-theme="light"] #community-drawer * * * * *, [data-theme="light"] #community-drawer button, [data-theme="light"] #community-drawer button *, [data-theme="light"] #community-drawer button span, [data-theme="light"] #community-drawer input, [data-theme="light"] #community-drawer textarea, [data-theme="light"] #community-drawer label, [data-theme="light"] #community-drawer h1, [data-theme="light"] #community-drawer h2, [data-theme="light"] #community-drawer h3, [data-theme="light"] #community-drawer h4, [data-theme="light"] #mobile-community-panel, [data-theme="light"] #mobile-community-panel *, [data-theme="light-accent"] #community-drawer, [data-theme="light-accent"] #community-drawer *, [data-theme="light-accent"] #community-drawer * *, [data-theme="light-accent"] #community-drawer * * *, [data-theme="light-accent"] #community-drawer * * * *, [data-theme="light-accent"] #community-drawer * * * * *, [data-theme="light-accent"] #community-drawer button, [data-theme="light-accent"] #community-drawer button *, [data-theme="light-accent"] #community-drawer button span, [data-theme="light-accent"] #community-drawer input, [data-theme="light-accent"] #community-drawer textarea, [data-theme="light-accent"] #community-drawer label, [data-theme="light-accent"] #community-drawer h1, [data-theme="light-accent"] #community-drawer h2, [data-theme="light-accent"] #community-drawer h3, [data-theme="light-accent"] #community-drawer h4, [data-theme="light-accent"] #mobile-community-panel, [data-theme="light-accent"] #mobile-community-panel * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; opacity: 1 !important; } /* Light mode input/textarea backgrounds */ [data-theme="light"] #community-drawer input, [data-theme="light"] #community-drawer textarea, [data-theme="light-accent"] #community-drawer input, [data-theme="light-accent"] #community-drawer textarea { background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.15) !important; } /* ULTIMATE NUCLEAR FIX FOR POST/DM/CALL TAB ICONS - ABSOLUTE FORCE */ [data-theme="light"] #community-drawer #drawer-tab-post i.fas.fa-edit, [data-theme="light"] #community-drawer #drawer-tab-dm i.fas.fa-comments, [data-theme="light"] #community-drawer #drawer-tab-call i.fas.fa-phone, [data-theme="light-accent"] #community-drawer #drawer-tab-post i.fas.fa-edit, [data-theme="light-accent"] #community-drawer #drawer-tab-dm i.fas.fa-comments, [data-theme="light-accent"] #community-drawer #drawer-tab-call i.fas.fa-phone, [data-theme="light"] button#drawer-tab-post i, [data-theme="light"] button#drawer-tab-dm i, [data-theme="light"] button#drawer-tab-call i, [data-theme="light-accent"] button#drawer-tab-post i, [data-theme="light-accent"] button#drawer-tab-dm i, [data-theme="light-accent"] button#drawer-tab-call i { color: #000000 !important; -webkit-text-fill-color: #000000 !important; background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important; text-fill-color: #000000 !important; opacity: 1 !important; fill: #000000 !important; stroke: #000000 !important; } /* DARK MODE - WHITE ICONS FOR POST/DM/CALL */ [data-theme="dark"] #community-drawer #drawer-tab-post i.fas.fa-edit, [data-theme="dark"] #community-drawer #drawer-tab-dm i.fas.fa-comments, [data-theme="dark"] #community-drawer #drawer-tab-call i.fas.fa-phone, [data-theme="dark"] button#drawer-tab-post i, [data-theme="dark"] button#drawer-tab-dm i, [data-theme="dark"] button#drawer-tab-call i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important; text-fill-color: #ffffff !important; opacity: 1 !important; fill: #ffffff !important; stroke: #ffffff !important; } /* NUCLEAR FIX FOR OWNER TOOLS - FORCE TEXT AND ICON COLORS */ [data-theme="light"] #community-drawer [onclick*="openHeaderCustomizer"] span, [data-theme="light"] #community-drawer [onclick*="openPWAAnalytics"] span, [data-theme="light"] #community-drawer [onclick*="openTeamManagementModal"] span, [data-theme="light"] #community-drawer [onclick*="openHeaderCustomizer"] i, [data-theme="light"] #community-drawer [onclick*="openPWAAnalytics"] i, [data-theme="light"] #community-drawer [onclick*="openTeamManagementModal"] i, [data-theme="light"] #community-drawer [onclick*="openWalletModal"] span, [data-theme="light"] #community-drawer [onclick*="openWalletModal"] i, [data-theme="light-accent"] #community-drawer [onclick*="openHeaderCustomizer"] span, [data-theme="light-accent"] #community-drawer [onclick*="openPWAAnalytics"] span, [data-theme="light-accent"] #community-drawer [onclick*="openTeamManagementModal"] span, [data-theme="light-accent"] #community-drawer [onclick*="openHeaderCustomizer"] i, [data-theme="light-accent"] #community-drawer [onclick*="openPWAAnalytics"] i, [data-theme="light-accent"] #community-drawer [onclick*="openTeamManagementModal"] i, [data-theme="light-accent"] #community-drawer [onclick*="openWalletModal"] span, [data-theme="light-accent"] #community-drawer [onclick*="openWalletModal"] i { color: #000000 !important; -webkit-text-fill-color: #000000 !important; background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important; text-fill-color: #000000 !important; opacity: 1 !important; } /* DARK MODE - WHITE TEXT AND ICONS FOR OWNER TOOLS */ [data-theme="dark"] #community-drawer [onclick*="openHeaderCustomizer"] span, [data-theme="dark"] #community-drawer [onclick*="openPWAAnalytics"] span, [data-theme="dark"] #community-drawer [onclick*="openTeamManagementModal"] span, [data-theme="dark"] #community-drawer [onclick*="openHeaderCustomizer"] i, [data-theme="dark"] #community-drawer [onclick*="openPWAAnalytics"] i, [data-theme="dark"] #community-drawer [onclick*="openTeamManagementModal"] i, [data-theme="dark"] #community-drawer [onclick*="openWalletModal"] span, [data-theme="dark"] #community-drawer [onclick*="openWalletModal"] i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important; text-fill-color: #ffffff !important; opacity: 1 !important; } /* Light mode input placeholder */ [data-theme="light"] #community-drawer input::placeholder, [data-theme="light"] #community-drawer textarea::placeholder, [data-theme="light-accent"] #community-drawer input::placeholder, [data-theme="light-accent"] #community-drawer textarea::placeholder { color: rgba(0, 0, 0, 0.5) !important; -webkit-text-fill-color: rgba(0, 0, 0, 0.5) !important; } /* STREAM DRAWER - LIGHT MODE NUCLEAR BLACK */ [data-theme="light"] #stream-drawer, [data-theme="light"] #stream-drawer *, [data-theme="light"] #stream-drawer * *, [data-theme="light"] #stream-drawer * * *, [data-theme="light"] #stream-drawer * * * *, [data-theme="light"] #stream-drawer * * * * *, [data-theme="light-accent"] #stream-drawer, [data-theme="light-accent"] #stream-drawer *, [data-theme="light-accent"] #stream-drawer * *, [data-theme="light-accent"] #stream-drawer * * *, [data-theme="light-accent"] #stream-drawer * * * *, [data-theme="light-accent"] #stream-drawer * * * * * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; opacity: 1 !important; } /* Drawer trigger buttons visibility controlled by JavaScript in switchToTab() */ /* Preserve specific accent colors in light mode */ [data-theme="light"] .price-tag, [data-theme="light"] .market-price, [data-theme="light-accent"] .price-tag, [data-theme="light-accent"] .market-price { color: #00a651 !important; -webkit-text-fill-color: #00a651 !important; } [data-theme="light"] .pending-status, [data-theme="light-accent"] .pending-status { color: #f39c12 !important; -webkit-text-fill-color: #f39c12 !important; } [data-theme="light"] .verified-status, [data-theme="light-accent"] .verified-status { color: #27ae60 !important; -webkit-text-fill-color: #27ae60 !important; } /* COMPREHENSIVE SHOP VISITOR PANEL DARK MODE RULES */ /* Force ALL text in visitor panel to be white */ [data-theme="dark"] #shop-visitor-panel, [data-theme="dark"] #shop-visitor-panel *, [data-theme="dark"] #shop-visitor-panel h1, [data-theme="dark"] #shop-visitor-panel h2, [data-theme="dark"] #shop-visitor-panel h3, [data-theme="dark"] #shop-visitor-panel h4, [data-theme="dark"] #shop-visitor-panel h5, [data-theme="dark"] #shop-visitor-panel h6, [data-theme="dark"] #shop-visitor-panel p, [data-theme="dark"] #shop-visitor-panel div, [data-theme="dark"] #shop-visitor-panel span, [data-theme="dark"] #shop-visitor-panel strong, [data-theme="dark"] #shop-visitor-panel em, [data-theme="dark"] #shop-visitor-panel small, [data-theme="dark"] #shop-visitor-panel label, [data-theme="dark"] #shop-visitor-panel li, [data-theme="dark"] #shop-visitor-panel td, [data-theme="dark"] #shop-visitor-panel th { color: white !important; } /* Force white text on specific visitor panel elements */ [data-theme="dark"] #visitor-cart-items, [data-theme="dark"] #visitor-cart-items *, [data-theme="dark"] #visitor-orders, [data-theme="dark"] #visitor-orders *, [data-theme="dark"] #shop-owner-name, [data-theme="dark"] #shop-items-count { color: white !important; } /* Force white text on dynamically generated content */ [data-theme="dark"] #visitor-cart-items > div, [data-theme="dark"] #visitor-cart-items > div *, [data-theme="dark"] #visitor-orders > div, [data-theme="dark"] #visitor-orders > div *, [data-theme="dark"] #visitor-cart-items div[style*="background"], [data-theme="dark"] #visitor-cart-items div[style*="background"] *, [data-theme="dark"] #visitor-orders div[style*="background"], [data-theme="dark"] #visitor-orders div[style*="background"] * { color: white !important; } /* Override any inline styles that might set dark colors */ [data-theme="dark"] #shop-visitor-panel [style*="color: #000"], [data-theme="dark"] #shop-visitor-panel [style*="color: black"], [data-theme="dark"] #shop-visitor-panel [style*="color: rgb(0"], [data-theme="dark"] #shop-visitor-panel [style*="color: rgba(0,0,0"] { color: white !important; } /* Only preserve these specific colored elements */ [data-theme="dark"] #shop-drawer .fa-star, [data-theme="dark"] #shop-drawer .fa-star-half-alt, [data-theme="dark"] #shop-visitor-panel .fa-star, [data-theme="dark"] #shop-visitor-panel .fa-star-half-alt { color: #ffc107 !important; } [data-theme="dark"] #visitor-cart-total, [data-theme="dark"] #shop-revenue { color: #10ff80 !important; } [data-theme="dark"] #shop-orders-count { color: #FFD700 !important; } /* Status colors */ [data-theme="dark"] #shop-drawer .pending-status, [data-theme="dark"] #shop-visitor-panel .pending-status { color: #FFC107 !important; } [data-theme="dark"] #shop-drawer .verified-status, [data-theme="dark"] #shop-visitor-panel .verified-status { color: #4CAF50 !important; } /* Comprehensive rules for shop owner panel text in dark mode */ [data-theme="dark"] #shop-owner-panel, [data-theme="dark"] #shop-owner-panel *, [data-theme="dark"] #shop-owner-panel div, [data-theme="dark"] #shop-owner-panel span, [data-theme="dark"] #shop-owner-panel p, [data-theme="dark"] #mobile-recent-orders, [data-theme="dark"] #mobile-recent-orders *, [data-theme="dark"] #mobile-recent-orders div, [data-theme="dark"] #mobile-recent-orders span { color: white !important; } /* Force white text for all dynamically generated order content in dark mode */ [data-theme="dark"] #mobile-recent-orders > div, [data-theme="dark"] #mobile-recent-orders > div > div, [data-theme="dark"] #mobile-recent-orders > div > div > div, [data-theme="dark"] #mobile-recent-orders > div * { color: white !important; } /* Preserve accent colors for important elements */ [data-theme="dark"] #mobile-recent-orders [style*="#4CAF50"], [data-theme="dark"] #mobile-recent-orders [style*="color: #4CAF50"] { color: #4CAF50 !important; } [data-theme="dark"] #mobile-recent-orders [style*="#FFC107"], [data-theme="dark"] #mobile-recent-orders [style*="color: #FFC107"] { color: #FFC107 !important; } /* Override any inline styles that might set dark text in order content */ [data-theme="dark"] #shop-owner-panel [style*="color: rgba(0,0,0"], [data-theme="dark"] #shop-owner-panel [style*="color: #000"] { color: white !important; } /* Shop prices now use theme-appropriate colors directly */ /* Preserve red color for remove buttons */ [data-theme="dark"] #shop-visitor-panel [style*="color: #ff4444"], [data-theme="dark"] #visitor-cart-items [style*="color: #ff4444"], [data-theme="dark"] #shop-visitor-panel button[onclick*="removeFromCart"], [data-theme="dark"] #visitor-cart-items button[onclick*="removeFromCart"] { color: #ff4444 !important; } /* Preserve specific order price colors */ [data-theme="dark"] #visitor-orders [style*="color: #4CAF50"] { color: #4CAF50 !important; } /* Input and background fixes for ALL drawers in light modes */ [data-theme="light"] input[type="text"], [data-theme="light-accent"] input[type="text"], [data-theme="light"] textarea, [data-theme="light-accent"] textarea { background: transparent !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border-color: rgba(0, 0, 0, 0.2) !important; } /* Force input text color while typing */ [data-theme="light"] input[type="text"]:focus, [data-theme="light-accent"] input[type="text"]:focus { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Dark mode inputs */ [data-theme="dark"] input[type="text"], [data-theme="dark"] textarea { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Specific fixes for access code inputs */ [data-theme="light"] #mobileBytesAccessCode, [data-theme="light"] #mobileUploadAccessCode, [data-theme="light-accent"] #mobileBytesAccessCode, [data-theme="light-accent"] #mobileUploadAccessCode { background: transparent !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; } /* Bytes drawer buttons match drawer theme */ [data-theme="light"] #bytes-drawer .bytes-drawer-button { color: #000000 !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; background: rgba(0, 0, 0, 0.05) !important; } [data-theme="light-accent"] #bytes-drawer .bytes-drawer-button { color: #000000 !important; border: 1px solid rgba(var(--accent-color-rgb), 0.3) !important; background: rgba(var(--accent-color-rgb), 0.1) !important; } [data-theme="dark"] #bytes-drawer .bytes-drawer-button { color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; background: rgba(255, 255, 255, 0.1) !important; } [data-theme="light"] #bytes-drawer .bytes-drawer-button:hover { background: rgba(0, 0, 0, 0.1) !important; } [data-theme="light-accent"] #bytes-drawer .bytes-drawer-button:hover { background: rgba(var(--accent-color-rgb), 0.2) !important; } [data-theme="dark"] #bytes-drawer .bytes-drawer-button:hover { background: rgba(255, 255, 255, 0.2) !important; } [data-theme="light"] #bytes-drawer .bytes-drawer-button span, [data-theme="light"] #bytes-drawer .bytes-drawer-button i, [data-theme="light-accent"] #bytes-drawer .bytes-drawer-button span, [data-theme="light-accent"] #bytes-drawer .bytes-drawer-button i { color: #000000 !important; } [data-theme="dark"] #bytes-drawer .bytes-drawer-button span, [data-theme="dark"] #bytes-drawer .bytes-drawer-button i { color: #ffffff !important; } /* COMPREHENSIVE text color fixes for ALL drawers in light modes */ [data-theme="light"] #community-drawer *:not(button):not(i), [data-theme="light-accent"] #community-drawer *:not(button):not(i), [data-theme="light"] #bytes-drawer *:not(button):not(i), [data-theme="light-accent"] #bytes-drawer *:not(button):not(i), [data-theme="light"] #virtual-drawer *:not(button):not(i), [data-theme="light-accent"] #virtual-drawer *:not(button):not(i), [data-theme="light"] #market-drawer *:not(button):not(i), [data-theme="light-accent"] #market-drawer *:not(button):not(i), [data-theme="light"] #shop-drawer *:not(button):not(i), [data-theme="light-accent"] #shop-drawer *:not(button):not(i), [data-theme="light"] #booking-drawer *:not(button):not(i), [data-theme="light-accent"] #booking-drawer *:not(button):not(i), [data-theme="light"] #stream-drawer *:not(button):not(i), [data-theme="light-accent"] #stream-drawer *:not(button):not(i) { color: #000000 !important; } /* Force black text on all drawer text elements */ [data-theme="light"] [id$="-drawer"] h1, [data-theme="light"] [id$="-drawer"] h2, [data-theme="light"] [id$="-drawer"] h3, [data-theme="light"] [id$="-drawer"] h4, [data-theme="light"] [id$="-drawer"] h5, [data-theme="light"] [id$="-drawer"] p, [data-theme="light"] [id$="-drawer"] span, [data-theme="light"] [id$="-drawer"] label, [data-theme="light"] [id$="-drawer"] div, [data-theme="light-accent"] [id$="-drawer"] h1, [data-theme="light-accent"] [id$="-drawer"] h2, [data-theme="light-accent"] [id$="-drawer"] h3, [data-theme="light-accent"] [id$="-drawer"] h4, [data-theme="light-accent"] [id$="-drawer"] h5, [data-theme="light-accent"] [id$="-drawer"] p, [data-theme="light-accent"] [id$="-drawer"] span, [data-theme="light-accent"] [id$="-drawer"] label, [data-theme="light-accent"] [id$="-drawer"] div { color: #000000 !important; } [data-theme="dark"] #community-drawer *:not(button):not(i), #community-drawer *:not(button):not(i) { color: #ffffff !important; } /* Fix community drawer input fields for light modes */ [data-theme="light"] #communityAccessCode, [data-theme="light"] #community-visitor-code, [data-theme="light"] #mobileUploadAccessCode { background: transparent !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="light-accent"] #communityAccessCode, [data-theme="light-accent"] #community-visitor-code, [data-theme="light-accent"] #mobileUploadAccessCode { background: transparent !important; border: 1px solid rgba(var(--accent-color-rgb), 0.3) !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Fix placeholder text for light modes */ [data-theme="light"] #communityAccessCode::placeholder, [data-theme="light"] #community-visitor-code::placeholder, [data-theme="light"] #mobileUploadAccessCode::placeholder { color: rgba(0, 0, 0, 0.5) !important; } [data-theme="light-accent"] #communityAccessCode::placeholder, [data-theme="light-accent"] #community-visitor-code::placeholder, [data-theme="light-accent"] #mobileUploadAccessCode::placeholder { color: rgba(0, 0, 0, 0.5) !important; } /* Webkit autofill override for community-visitor-code, communityAccessCode, and mobileUploadAccessCode */ [data-theme="light"] #community-visitor-code:-webkit-autofill, [data-theme="light"] #community-visitor-code:-webkit-autofill:hover, [data-theme="light"] #community-visitor-code:-webkit-autofill:focus, [data-theme="light"] #community-visitor-code:-webkit-autofill:active, [data-theme="light"] #communityAccessCode:-webkit-autofill, [data-theme="light"] #communityAccessCode:-webkit-autofill:hover, [data-theme="light"] #communityAccessCode:-webkit-autofill:focus, [data-theme="light"] #communityAccessCode:-webkit-autofill:active, [data-theme="light"] #mobileUploadAccessCode:-webkit-autofill, [data-theme="light"] #mobileUploadAccessCode:-webkit-autofill:hover, [data-theme="light"] #mobileUploadAccessCode:-webkit-autofill:focus, [data-theme="light"] #mobileUploadAccessCode:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px transparent inset !important; -webkit-text-fill-color: #000000 !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; } [data-theme="light-accent"] #community-visitor-code:-webkit-autofill, [data-theme="light-accent"] #community-visitor-code:-webkit-autofill:hover, [data-theme="light-accent"] #community-visitor-code:-webkit-autofill:focus, [data-theme="light-accent"] #community-visitor-code:-webkit-autofill:active, [data-theme="light-accent"] #communityAccessCode:-webkit-autofill, [data-theme="light-accent"] #communityAccessCode:-webkit-autofill:hover, [data-theme="light-accent"] #communityAccessCode:-webkit-autofill:focus, [data-theme="light-accent"] #communityAccessCode:-webkit-autofill:active, [data-theme="light-accent"] #mobileUploadAccessCode:-webkit-autofill, [data-theme="light-accent"] #mobileUploadAccessCode:-webkit-autofill:hover, [data-theme="light-accent"] #mobileUploadAccessCode:-webkit-autofill:focus, [data-theme="light-accent"] #mobileUploadAccessCode:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px transparent inset !important; -webkit-text-fill-color: #000000 !important; border: 1px solid rgba(var(--accent-color-rgb), 0.3) !important; } [data-theme="dark"] #community-visitor-code:-webkit-autofill, [data-theme="dark"] #community-visitor-code:-webkit-autofill:hover, [data-theme="dark"] #community-visitor-code:-webkit-autofill:focus, [data-theme="dark"] #community-visitor-code:-webkit-autofill:active, [data-theme="dark"] #communityAccessCode:-webkit-autofill, [data-theme="dark"] #communityAccessCode:-webkit-autofill:hover, [data-theme="dark"] #communityAccessCode:-webkit-autofill:focus, [data-theme="dark"] #communityAccessCode:-webkit-autofill:active, [data-theme="dark"] #mobileUploadAccessCode:-webkit-autofill, [data-theme="dark"] #mobileUploadAccessCode:-webkit-autofill:hover, [data-theme="dark"] #mobileUploadAccessCode:-webkit-autofill:focus, [data-theme="dark"] #mobileUploadAccessCode:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.1) inset !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; } /* Fix community drawer backgrounds and borders for light modes */ [data-theme="light"] #mobile-upload-permissions, [data-theme="light"] #community-drawer label[style*="background"] { background: transparent !important; border-color: rgba(0, 0, 0, 0.15) !important; } [data-theme="light-accent"] #mobile-upload-permissions, [data-theme="light-accent"] #community-drawer label[style*="background"] { background: transparent !important; border-color: rgba(var(--accent-color-rgb), 0.2) !important; } /* Fix radio labels and options text */ [data-theme="light"] #community-drawer label, [data-theme="light"] #community-drawer h3, [data-theme="light"] #community-drawer h4, [data-theme="light"] #community-drawer h5, [data-theme="light"] #mobileUploadAccessCodeSection label { color: #000000 !important; } [data-theme="light-accent"] #community-drawer label, [data-theme="light-accent"] #community-drawer h3, [data-theme="light-accent"] #community-drawer h4, [data-theme="light-accent"] #community-drawer h5, [data-theme="light-accent"] #mobileUploadAccessCodeSection label { color: #000000 !important; } /* Fix small text and descriptions */ [data-theme="light"] #community-drawer div[style*="color: rgba(255, 255, 255"], [data-theme="light-accent"] #community-drawer div[style*="color: rgba(255, 255, 255"] { color: rgba(0, 0, 0, 0.6) !important; } /* COMPREHENSIVE FIX FOR ALL DRAWER INLINE STYLES IN LIGHT-ACCENT MODE */ /* Fix all inline white text styles across all drawer panels */ [data-theme="light-accent"] [style*="color: var(--text-muted)"], [data-theme="light-accent"] [style*="color: var(--text-secondary)"], [data-theme="light-accent"] [style*="color: var(--text-secondary)"], [data-theme="light-accent"] [style*="color: rgba(255, 255, 255, 0.8)"], [data-theme="light-accent"] [style*="color: rgba(255,255,255,0.5)"], [data-theme="light-accent"] [style*="color: rgba(255,255,255,0.6)"], [data-theme="light-accent"] [style*="color: rgba(255,255,255,0.7)"], [data-theme="light-accent"] [style*="color: rgba(255,255,255,0.8)"], [data-theme="light"] [style*="color: var(--text-muted)"], [data-theme="light"] [style*="color: var(--text-secondary)"], [data-theme="light"] [style*="color: var(--text-secondary)"], [data-theme="light"] [style*="color: rgba(255, 255, 255, 0.8)"], [data-theme="light"] [style*="color: rgba(255,255,255,0.5)"], [data-theme="light"] [style*="color: rgba(255,255,255,0.6)"], [data-theme="light"] [style*="color: rgba(255,255,255,0.7)"], [data-theme="light"] [style*="color: rgba(255,255,255,0.8)"] { color: rgba(0, 0, 0, 0.7) !important; } /* Fix specific drawer inline style elements */ [data-theme="light-accent"] #community-drawer [style*="color: rgba(255"], [data-theme="light-accent"] #mobile-community-panel [style*="color: rgba(255"], [data-theme="light-accent"] #shop-drawer [style*="color: rgba(255"], [data-theme="light-accent"] #booking-drawer [style*="color: rgba(255"], [data-theme="light-accent"] #virtual-drawer [style*="color: rgba(255"], [data-theme="light-accent"] #market-drawer [style*="color: rgba(255"], [data-theme="light-accent"] #stream-drawer [style*="color: rgba(255"], [data-theme="light-accent"] #bytes-drawer [style*="color: rgba(255"], [data-theme="light"] #community-drawer [style*="color: rgba(255"], [data-theme="light"] #mobile-community-panel [style*="color: rgba(255"], [data-theme="light"] #shop-drawer [style*="color: rgba(255"], [data-theme="light"] #booking-drawer [style*="color: rgba(255"], [data-theme="light"] #virtual-drawer [style*="color: rgba(255"], [data-theme="light"] #market-drawer [style*="color: rgba(255"], [data-theme="light"] #stream-drawer [style*="color: rgba(255"], [data-theme="light"] #bytes-drawer [style*="color: rgba(255"] { color: #000000 !important; } /* Fix permission section descriptions and labels */ [data-theme="light-accent"] #communityPermissions [style*="color: rgba(255"], [data-theme="light-accent"] #communityAccessCodeSection [style*="color: rgba(255"], [data-theme="light-accent"] #upload-access-section [style*="color: rgba(255"], [data-theme="light-accent"] #bytes-access-code-section [style*="color: rgba(255"], [data-theme="light-accent"] #mobile-virtual-code-section [style*="color: rgba(255"], [data-theme="light"] #communityPermissions [style*="color: rgba(255"], [data-theme="light"] #communityAccessCodeSection [style*="color: rgba(255"], [data-theme="light"] #upload-access-section [style*="color: rgba(255"], [data-theme="light"] #bytes-access-code-section [style*="color: rgba(255"], [data-theme="light"] #mobile-virtual-code-section [style*="color: rgba(255"] { color: rgba(0, 0, 0, 0.8) !important; } /* Fix status text and indicators in drawers */ [data-theme="light-accent"] .permission-section [style*="color: rgba(255"], [data-theme="light-accent"] .upload-section [style*="color: rgba(255"], [data-theme="light-accent"] .access-status [style*="color: rgba(255"], [data-theme="light"] .permission-section [style*="color: rgba(255"], [data-theme="light"] .upload-section [style*="color: rgba(255"], [data-theme="light"] .access-status [style*="color: rgba(255"] { color: rgba(0, 0, 0, 0.7) !important; } /* Fix specific owner ticker and info elements */ [data-theme="light-accent"] #owner-ticker-mobile, [data-theme="light-accent"] #owner-name-mobile, [data-theme="light"] #owner-ticker-mobile, [data-theme="light"] #owner-name-mobile { color: #000000 !important; } /* Fix bytes count and status indicators */ [data-theme="light-accent"] #bytes-total-count + div, [data-theme="light-accent"] #bytes-recent-count + div, [data-theme="light-accent"] #mobile-offline-text, [data-theme="light-accent"] #mobile-download-percent, [data-theme="light-accent"] #mobile-cache-size, [data-theme="light"] #bytes-total-count + div, [data-theme="light"] #bytes-recent-count + div, [data-theme="light"] #mobile-offline-text, [data-theme="light"] #mobile-download-percent, [data-theme="light"] #mobile-cache-size { color: rgba(0, 0, 0, 0.7) !important; } /* Fix upload access status messages and checking access text */ [data-theme="light-accent"] #visitor-access-status span, [data-theme="light-accent"] #upload-access-status span, [data-theme="light-accent"] .access-status span, [data-theme="light"] #visitor-access-status span, [data-theme="light"] #upload-access-status span, [data-theme="light"] .access-status span { color: rgba(0, 0, 0, 0.8) !important; } /* Fix permission description text in drawers - catch all inline styles */ [data-theme="light-accent"] div[style*="Anyone can share content"], [data-theme="light-accent"] div[style*="Require access code to post"], [data-theme="light-accent"] div[style*="Only you can post content"], [data-theme="light-accent"] div[style*="Anyone can add locations"], [data-theme="light-accent"] div[style*="Requires approval"], [data-theme="light-accent"] div[style*="Only you can post"], [data-theme="light-accent"] div[style*="Checking access"], [data-theme="light-accent"] div[style*="Authentication required"], [data-theme="light-accent"] div[style*="Upload access granted"], [data-theme="light-accent"] div[style*="Access code required"], [data-theme="light-accent"] div[style*="Owner only access"], [data-theme="light"] div[style*="Anyone can share content"], [data-theme="light"] div[style*="Require access code to post"], [data-theme="light"] div[style*="Only you can post content"], [data-theme="light"] div[style*="Anyone can add locations"], [data-theme="light"] div[style*="Requires approval"], [data-theme="light"] div[style*="Only you can post"], [data-theme="light"] div[style*="Checking access"], [data-theme="light"] div[style*="Authentication required"], [data-theme="light"] div[style*="Upload access granted"], [data-theme="light"] div[style*="Access code required"], [data-theme="light"] div[style*="Owner only access"] { color: rgba(0, 0, 0, 0.8) !important; } /* Fix virtual drawer specific elements */ [data-theme="light-accent"] #mobile-virtual-permissions span, [data-theme="light-accent"] #mobile-virtual-code-section h5, [data-theme="light-accent"] #mobile-virtual-code-section div, [data-theme="light"] #mobile-virtual-permissions span, [data-theme="light"] #mobile-virtual-code-section h5, [data-theme="light"] #mobile-virtual-code-section div { color: rgba(0, 0, 0, 0.8) !important; } /* Fix market drawer price and network info */ [data-theme="light-accent"] #mobile-market-price, [data-theme="light-accent"] .market-network-info, [data-theme="light-accent"] .market-price-info div, [data-theme="light"] #mobile-market-price, [data-theme="light"] .market-network-info, [data-theme="light"] .market-price-info div { color: #000000 !important; } /* Fix stream drawer access elements */ [data-theme="light-accent"] #mobile-stream-access-code, [data-theme="light-accent"] #mobileStreamAccessCode, [data-theme="light-accent"] .stream-access-status, [data-theme="light"] #mobile-stream-access-code, [data-theme="light"] #mobileStreamAccessCode, [data-theme="light"] .stream-access-status { color: #000000 !important; } /* Fix bytes stats and count text */ [data-theme="light-accent"] div[style*="Total"], [data-theme="light-accent"] div[style*="Recent"], [data-theme="light-accent"] div[style*="Online"], [data-theme="light-accent"] div[style*="Downloading tiles"], [data-theme="light-accent"] div[style*="Cached Areas"], [data-theme="light-accent"] div[style*="Cache Used"], [data-theme="light"] div[style*="Total"], [data-theme="light"] div[style*="Recent"], [data-theme="light"] div[style*="Online"], [data-theme="light"] div[style*="Downloading tiles"], [data-theme="light"] div[style*="Cached Areas"], [data-theme="light"] div[style*="Cache Used"] { color: rgba(0, 0, 0, 0.7) !important; } /* Catch-all for any remaining white text in span elements */ [data-theme="light-accent"] span[style*="color: rgba(255, 255, 255"], [data-theme="light-accent"] span[style*="color: rgba(255,255,255"], [data-theme="light"] span[style*="color: rgba(255, 255, 255"], [data-theme="light"] span[style*="color: rgba(255,255,255"] { color: rgba(0, 0, 0, 0.8) !important; } /* Fix Settings button and close X button in header */ [data-theme="light"] #community-drawer button[onclick="openSettings()"], [data-theme="light"] #community-drawer button[onclick="toggleCommunityDrawer()"] { color: #000000 !important; background: transparent !important; border-color: rgba(0, 0, 0, 0.2) !important; } /* Fix the icon inside the close button for light mode */ [data-theme="light"] #community-drawer button[onclick="toggleCommunityDrawer()"] i, [data-theme="light"] #community-drawer button[onclick="toggleCommunityDrawer()"] .fa-times { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Force bell icon to be black in light mode */ [data-theme="light"] #community-drawer #notification-bell i, [data-theme="light"] #community-drawer button[onclick="toggleNotifications()"] i, [data-theme="light"] #community-drawer #bell-icon { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="light-accent"] #community-drawer button[onclick="openSettings()"], [data-theme="light-accent"] #community-drawer button[onclick="toggleCommunityDrawer()"] { color: #000000 !important; background: transparent !important; border-color: rgba(var(--accent-color-rgb), 0.3) !important; } /* Fix the icon inside the close button for light-accent mode */ [data-theme="light-accent"] #community-drawer button[onclick="toggleCommunityDrawer()"] i, [data-theme="light-accent"] #community-drawer button[onclick="toggleCommunityDrawer()"] .fa-times { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Fix the icon and text inside the Settings button for light-accent mode */ [data-theme="light-accent"] #community-drawer button[onclick="openSettings()"], [data-theme="light-accent"] #community-drawer button[onclick="openSettings()"] *, [data-theme="light-accent"] #community-drawer button[onclick="openSettings()"] i, [data-theme="light-accent"] #community-drawer button[onclick="openSettings()"] .fa-cog { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Ensure white text for Settings and X button in dark mode */ [data-theme="dark"] #community-drawer button[onclick="openSettings()"], [data-theme="dark"] #community-drawer button[onclick="toggleCommunityDrawer()"], #community-drawer button[onclick="openSettings()"], #community-drawer button[onclick="toggleCommunityDrawer()"] { color: #ffffff !important; } /* Fix the icon inside the close button for dark mode */ [data-theme="dark"] #community-drawer button[onclick="toggleCommunityDrawer()"] i, [data-theme="dark"] #community-drawer button[onclick="toggleCommunityDrawer()"] .fa-times, #community-drawer button[onclick="toggleCommunityDrawer()"] i, #community-drawer button[onclick="toggleCommunityDrawer()"] .fa-times { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Comprehensive fix for ALL white text in ALL drawers for light-accent mode */ [data-theme="light-accent"] #community-drawer, [data-theme="light-accent"] #shop-drawer, [data-theme="light-accent"] #booking-drawer, [data-theme="light-accent"] #virtual-drawer, [data-theme="light-accent"] #market-drawer, [data-theme="light-accent"] #stream-drawer, [data-theme="light-accent"] #bytes-drawer, [data-theme="light-accent"] .drawer-panel { color: #000000 !important; } /* Force ALL text elements in drawers to be black in light-accent */ [data-theme="light-accent"] #community-drawer *, [data-theme="light-accent"] #shop-drawer *, [data-theme="light-accent"] #booking-drawer *, [data-theme="light-accent"] #virtual-drawer *, [data-theme="light-accent"] #market-drawer *, [data-theme="light-accent"] #stream-drawer *, [data-theme="light-accent"] #bytes-drawer *, [data-theme="light-accent"] .drawer-panel * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Override any inline styles with white/rgba(255,255,255) colors */ [data-theme="light-accent"] [style*="color: white"], [data-theme="light-accent"] [style*="color: #fff"], [data-theme="light-accent"] [style*="color: #ffffff"], [data-theme="light-accent"] [style*="color: rgba(255, 255, 255"], [data-theme="light-accent"] [style*="color:white"], [data-theme="light-accent"] [style*="color:#fff"], [data-theme="light-accent"] [style*="color:#ffffff"], [data-theme="light-accent"] [style*="color:rgba(255, 255, 255"] { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Fix header h2 text color */ [data-theme="light"] #community-drawer h2, [data-theme="light-accent"] #community-drawer h2 { color: #000000 !important; } /* Fix specific text elements in dark mode */ [data-theme="dark"] #mobile-booking-owner-panel span:not(#mobile-services-count):not(#mobile-pending-count):not(#mobile-today-count), #mobile-booking-owner-panel span:not(#mobile-services-count):not(#mobile-pending-count):not(#mobile-today-count) { color: #ffffff !important; } [data-theme="dark"] #booking-drawer p, #booking-drawer p:not([style*="color:"]), [data-theme="dark"] #booking-drawer div:not([style*="background: linear-gradient"]), #booking-drawer div:not([style*="background: linear-gradient"]):not([style*="color:"]) { color: #ffffff !important; } /* Keep button text white */ [data-theme="light"] #booking-drawer button, [data-theme="light-accent"] #booking-drawer button, [data-theme="light"] #booking-drawer button *, [data-theme="light-accent"] #booking-drawer button * { color: #ffffff !important; } /* Booking interface buttons and forms with glassmorphism */ [data-theme="light-accent"] .booking-main-area button, [data-theme="light-accent"] #booking-drawer button { background: rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(15px) saturate(120%) !important; -webkit-backdrop-filter: blur(15px) saturate(120%) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; } [data-theme="light-accent"] .booking-main-area input, [data-theme="light-accent"] .booking-main-area select, [data-theme="light-accent"] .booking-main-area textarea, [data-theme="light-accent"] #booking-drawer input, [data-theme="light-accent"] #booking-drawer select, [data-theme="light-accent"] #booking-drawer textarea { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #000000 !important; } [data-theme="light-accent"] .booking-main-area input::placeholder, [data-theme="light-accent"] .booking-main-area textarea::placeholder, [data-theme="light-accent"] #booking-drawer input::placeholder, [data-theme="light-accent"] #booking-drawer textarea::placeholder { color: rgba(0, 0, 0, 0.6) !important; } /* Booking modal glassmorphism */ [data-theme="light-accent"] #mobileBookingModal, [data-theme="light-accent"] #mobileServiceSelectionModal { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(25px) saturate(150%) !important; -webkit-backdrop-filter: blur(25px) saturate(150%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } /* Fix empty state text */ [data-theme="light"] #mobile-services-list > div[style*="text-align: center"] p, [data-theme="light-accent"] #mobile-services-list > div[style*="text-align: center"] p { color: rgba(0, 0, 0, 0.5) !important; } [data-theme="light"] #mobile-pending-list > div[style*="text-align: center"] p, [data-theme="light-accent"] #mobile-pending-list > div[style*="text-align: center"] p { color: rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] #mobile-services-list > div[style*="text-align: center"] p, #mobile-services-list > div[style*="text-align: center"] p, [data-theme="dark"] #mobile-pending-list > div[style*="text-align: center"] p, #mobile-pending-list > div[style*="text-align: center"] p { color: var(--text-muted) !important; } /* Fix badge colors to maintain contrast */ #mobile-pending-count { background: #FFC107 !important; color: #000000 !important; } #mobile-services-count { background: var(--primary-color) !important; color: #ffffff !important; } #mobile-today-count { background: #4CAF50 !important; color: #ffffff !important; } /* Drawer handle theme colors */ [data-theme="light"] #booking-drawer .drawer-handle { background: rgba(0, 0, 0, 0.2) !important; } [data-theme="light-accent"] #booking-drawer .drawer-handle { background: rgba(0, 0, 0, 0.15) !important; } [data-theme="dark"] #booking-drawer .drawer-handle, #booking-drawer .drawer-handle { background: rgba(255, 255, 255, 0.2) !important; } /* Container backgrounds for different themes */ [data-theme="light"] #mobile-booking-owner-panel > div[style*="background"] { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.1) !important; } [data-theme="light-accent"] #mobile-booking-owner-panel > div[style*="background"] { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } /* Mobile booking panels glassmorphism */ [data-theme="light-accent"] #mobile-booking-owner-panel { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(20px) saturate(120%) !important; -webkit-backdrop-filter: blur(20px) saturate(120%) !important; } [data-theme="light-accent"] .booking-service-card { background: rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; } [data-theme="dark"] #mobile-booking-owner-panel > div[style*="background"], #mobile-booking-owner-panel > div[style*="background"] { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* Stream Drawer Theme Styles */ /* Light Theme */ [data-theme="light"] #stream-drawer { background: linear-gradient( to bottom, rgba(255, 255, 255, 0.98) 0%, rgba(245, 245, 245, 0.98) 100% ) !important; border-top: 1px solid rgba(0, 0, 0, 0.1) !important; color: #000000 !important; } /* Light Accent Theme */ [data-theme="light-accent"] #stream-drawer { background: linear-gradient( to bottom, rgba(250, 250, 250, 0.98) 0%, rgba(240, 240, 240, 0.98) 100% ) !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; color: #000000 !important; } /* Dark Theme (default) */ [data-theme="dark"] #stream-drawer, #stream-drawer { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.98) 100% ) !important; border-top: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } /* Stream drawer text colors */ [data-theme="light"] #stream-drawer *:not(button):not(i), [data-theme="light-accent"] #stream-drawer *:not(button):not(i) { color: #000000 !important; } [data-theme="dark"] #stream-drawer *:not(button):not(i), #stream-drawer *:not(button):not(i) { color: #ffffff !important; } /* Stream drawer access code input */ [data-theme="light"] #mobile-stream-access-code { background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #000000 !important; } [data-theme="light-accent"] #mobile-stream-access-code { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #000000 !important; } [data-theme="dark"] #mobile-stream-access-code, #mobile-stream-access-code { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } /* Stream drawer access code input placeholders */ [data-theme="light"] #mobile-stream-access-code::placeholder { color: rgba(0, 0, 0, 0.5) !important; } [data-theme="light-accent"] #mobile-stream-access-code::placeholder { color: rgba(0, 0, 0, 0.45) !important; } [data-theme="dark"] #mobile-stream-access-code::placeholder, #mobile-stream-access-code::placeholder { color: var(--text-muted) !important; } /* Add placeholder styles for mobileStreamAccessCode */ #mobileStreamAccessCode::placeholder { color: var(--text-secondary) !important; opacity: 1 !important; } /* Force background for mobileStreamAccessCode input */ #mobileStreamAccessCode { background: rgba(255, 255, 255, 0.1) !important; color: white !important; } /* Webkit autofill override */ #mobileStreamAccessCode:-webkit-autofill, #mobileStreamAccessCode:-webkit-autofill:hover, #mobileStreamAccessCode:-webkit-autofill:focus, #mobileStreamAccessCode:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.1) inset !important; -webkit-text-fill-color: white !important; } /* Stream drawer container backgrounds */ [data-theme="light"] #mobile-stream-owner-panel > div[style*="background"], [data-theme="light"] #mobile-stream-customer-panel > div[style*="background"] { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.1) !important; } [data-theme="light-accent"] #mobile-stream-owner-panel > div[style*="background"], [data-theme="light-accent"] #mobile-stream-customer-panel > div[style*="background"] { background: rgba(0, 0, 0, 0.02) !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="dark"] #mobile-stream-owner-panel > div[style*="background"], [data-theme="dark"] #mobile-stream-customer-panel > div[style*="background"], #mobile-stream-owner-panel > div[style*="background"], #mobile-stream-customer-panel > div[style*="background"] { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* Stream drawer input styles */ [data-theme="light"] #mobileStreamAccessCode { border-color: rgba(0, 0, 0, 0.2) !important; color: #000000 !important; } [data-theme="light"] #mobileStreamAccessCode::placeholder { color: rgba(0, 0, 0, 0.5) !important; } [data-theme="light-accent"] #mobileStreamAccessCode { border-color: rgba(0, 0, 0, 0.15) !important; color: #000000 !important; } [data-theme="light-accent"] #mobileStreamAccessCode::placeholder { color: rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] #mobileStreamAccessCode, #mobileStreamAccessCode { border-color: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; } [data-theme="dark"] #mobileStreamAccessCode::placeholder, #mobileStreamAccessCode::placeholder { color: var(--text-muted) !important; } :root { /* Default colors - will be overridden by database via loadSavedColors() */ --primary-color: var(--nst-primary-w); --accent-color: var(--nst-accent-w); /* RGB values will be set by JavaScript */ --primary-color-rgb: 100, 116, 139; --primary-rgb: 100, 116, 139; --accent-color-rgb: 255, 255, 255; --accent-rgb: 255, 255, 255; /* Theme colors - Light mode defaults (FIXED to ensure white inputs) */ --background-color: #ffffff; --surface-color: #ffffff; --text-primary: #000000; --text-secondary: #000000; --border-color: #000000; --card-bg: #ffffff; --input-background-color: #ffffff; --surface-background-color: #ffffff; --input-bg: #ffffff; --safe-area-top: 0px; --safe-area-bottom: 0px; } /* SAFE AREA FOR STATUS BAR - Respect device safe areas */ :root { --safe-area-inset-top: env(safe-area-inset-top, 20px) !important; --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px) !important; --safe-area-inset-left: env(safe-area-inset-left, 0px) !important; --safe-area-inset-right: env(safe-area-inset-right, 0px) !important; } /* FORCE REMOVE ALL BODY AND CONTAINER PADDING */ body { padding: 0 !important; margin: 0 !important; } html, body { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* iOS SPECIFIC - Force content behind notch/status bar and REMOVE SAFE AREA BAR */ @supports (-webkit-touch-callout: none) { html, body { padding: 0 !important; margin: 0 !important; margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px)) !important; padding-bottom: 0 !important; height: 100vh !important; min-height: -webkit-fill-available !important; } body { position: relative !important; overflow-x: hidden !important; } } /* NUCLEAR OPTION - Remove safe area completely */ html { height: 100% !important; height: 100vh !important; margin-bottom: calc(-1 * constant(safe-area-inset-bottom)) !important; margin-bottom: calc(-1 * env(safe-area-inset-bottom)) !important; overscroll-behavior-y: none !important; overscroll-behavior-x: none !important; } /* REMOVED - Was covering map icons */ /* Force viewport to extend below safe area */ body { overflow-x: hidden !important; overscroll-behavior-y: none !important; overscroll-behavior-x: none !important; -webkit-overflow-scrolling: touch !important; } /* GLOBAL OVERRIDE - Force all elements to ignore safe area bottom */ *, *::before, *::after { /* Override any env(safe-area-inset-bottom) to 0 */ --safe-area-inset-bottom: 0px !important; } /* Force all containers and sections to have no safe area padding */ body > *, .container, .tab-content, [class*="section"], [class*="area"], [id*="mobile"] { margin-bottom: 0 !important; } /* Light Theme */ [data-theme="light"] { /* Pure white background with black text */ --background-color: #ffffff; --surface-color: #ffffff; --text-color: #000000; --text-primary: #000000; --text-secondary: #000000; --border-color: #000000; --card-bg: #ffffff; --input-background-color: rgba(255, 255, 255, 0.8); --surface-background-color: #ffffff; } /* Dark Theme */ [data-theme="dark"] { --input-background-color: rgba(255, 255, 255, 0.1); --surface-background-color: #000000; --surface-color: #000000; --text-color: #ffffff; --text-primary: #ffffff; --border-color: rgba(255, 255, 255, 0.2); --card-bg: rgba(255, 255, 255, 0.05); } /* Offline mode styles */ body.offline { position: relative; } body.offline::before { content: '📵 Offline Mode'; position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(90deg, #ff5252, #ff6b6b); padding: 4px; text-align: center; font-size: 12px; font-weight: 600; z-index: 9999; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } } @keyframes pulseBtnGlow { 0%, 100% { box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3); transform: scale(1); } 50% { box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5); transform: scale(1.02); } } /* Hide default Leaflet routing control UI */ .leaflet-routing-container { display: none !important; } .leaflet-control-container .leaflet-routing-control { display: none !important; } /* Fix for mobile route rendering - prevent polygon fill */ .leaflet-overlay-pane svg path { stroke-linecap: round !important; stroke-linejoin: round !important; vector-effect: non-scaling-stroke !important; fill: none !important; fill-opacity: 0 !important; } /* Force routing lines to be unfilled */ .leaflet-routing-alt path, .leaflet-routing-alt-line { fill: none !important; fill-opacity: 0 !important; stroke-width: 4px !important; } /* Animated dashed flow overlay on the route polyline */ .mobile-route-flow { stroke: #ffffff !important; stroke-width: 3px !important; stroke-opacity: 1 !important; stroke-dasharray: 2, 14 !important; animation: routeFlow 1.4s linear infinite; filter: drop-shadow(0 0 2px rgba(0,0,0,0.75)); } @keyframes routeFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -32; } } /* Follow-me puck: user position + heading cone */ .nav-puck-wrap { width: 60px; height: 60px; position: relative; transition: transform 0.3s ease-out; transform-origin: center; pointer-events: none; } .nav-puck-heading { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 26px solid rgba(0, 122, 255, 0.55); filter: blur(0.5px); } .nav-puck { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: #007aff; border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.28), 0 2px 10px rgba(0,0,0,0.25); } .mobile-default-location-marker-shell, .mobile-default-location-marker-shell * { color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; } .mobile-default-location-marker-shell .mobile-default-location-pin__badge { background: rgba(255,255,255,0.96) !important; border-color: var(--primary-color) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.38), 0 0 0 3px rgba(var(--primary-rgb),0.28) !important; } .mobile-default-location-marker-shell .mobile-default-location-pin__badge i { color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; } .mobile-default-location-marker-shell .mobile-default-location-pin__point { background: var(--primary-color) !important; border-color: rgba(255,255,255,0.96) !important; } /* Route-view takeover: hide all normal chrome when a route is active */ body.route-view-active #mobile-search-bar-container, body.route-view-active #bottom-nav, body.route-view-active #hamburger-menu-btn, body.route-view-active #map-style-button, body.route-view-active #map-style-toggle, body.route-view-active #virtual-drawer-trigger, body.route-view-active #mobile-tour-button-wrapper, body.route-view-active #placeSheet, body.route-view-active #community-drawer-trigger, body.route-view-active .virtual-drawer-trigger, body.route-view-active .map-floating-button, body.route-view-active .default-location-marker, body.route-view-active .default-location-popup, body.route-view-active .leaflet-popup { display: none !important; } body.route-view-active #virtual-main-area { inset: 0 !important; padding-bottom: 0 !important; } /* Ensure polylines render properly on mobile */ .leaflet-pane svg { will-change: transform; -webkit-transform: translateZ(0); transform: translateZ(0); } /* Additional fix for route rendering */ .leaflet-interactive { fill: none !important; fill-opacity: 0 !important; } /* Ensure mobile route line is visible above tiles */ .mobile-route-line { stroke-opacity: 0.9 !important; stroke-width: 5px !important; } /* Place Bottom Sheet (Apple Maps style) */ :root{ --sheet-radius: 22px; --sheet-bg: rgba(255,255,255,.86); --sheet-border: rgba(0,0,0,.08); --text: rgba(0,0,0,.86); --muted: rgba(0,0,0,.55); --shadow: 0 18px 60px rgba(0,0,0,.25); } /* Dark-mode map place card */ [data-theme="dark"]{ --sheet-bg: rgba(14, 18, 24, 0.94); --sheet-border: rgba(255,255,255,0.12); --text: rgba(255,255,255,0.94); --muted: rgba(255,255,255,0.68); --shadow: 0 18px 60px rgba(0,0,0,0.55); } .placeSheet{ position: fixed; left: 50%; /* Clear the floating bottom nav (min-height 50px, sitting 8px above the safe area) instead of tucking the card's action buttons underneath it. */ --placeSheet-nav-clearance: calc(66px + env(safe-area-inset-bottom, 0px)); bottom: var(--placeSheet-nav-clearance); transform: translateX(-50%); width: min(560px, calc(100vw - 20px)); max-height: calc(88vh - var(--placeSheet-nav-clearance)); background: var(--sheet-bg); border: 1px solid var(--sheet-border); border-radius: 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08); overflow: hidden; backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); user-select: none; z-index: 10060; } .placeSheet__grab{ width: 40px; height: 4px; border-radius: 999px; background: rgba(0,0,0,.18); margin: 10px auto 6px; } .placeSheet__hero{ padding: 0; position: relative; } .placeSheet__img{ width: 100%; height: 180px; object-fit: cover; border-radius: 0; display: block; background: rgba(0,0,0,.06); } .placeSheet__photos{ display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 0; scrollbar-width: none; } .placeSheet__photos::-webkit-scrollbar{ display: none; } .placeSheet__photoThumb{ width: 62px; height: 48px; flex: 0 0 auto; border: 2px solid transparent; border-radius: 12px; padding: 0; overflow: hidden; background: rgba(0,0,0,.06); box-shadow: 0 8px 18px rgba(0,0,0,.08); } .placeSheet__photoThumb img{ width: 100%; height: 100%; object-fit: cover; display: block; } .placeSheet__photoThumb.is-active{ border-color: var(--primary-color); } .placeSheet__body{ padding: 18px 20px 16px; overflow: auto; overscroll-behavior: contain; /* Track the sheet's own height so the hours list and the action row stay scrollable to the end rather than being clipped. */ max-height: calc(88vh - var(--placeSheet-nav-clearance) - 200px); } .placeSheet__titleRow{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; } .placeSheet__title{ margin: 0 0 4px; font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--text); letter-spacing: -0.02em; } .placeSheet__close{ width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; border: none; background: rgba(0,0,0,.06); font-size: 18px; line-height: 1; color: rgba(0,0,0,.55); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .placeSheet__sub{ margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; } .placeSheet__meta{ display:flex; align-items:center; gap: 10px; margin-top: 12px; } .metaPill{ display:inline-flex; align-items:center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 190, 30, 0.14); color: #b8860b; font-size: 13px; font-weight: 700; } .metaStar{ color: #f5a524; } .metaStrong{ font-weight: 800; } .metaDot{ color: rgba(0,0,0,.25); font-size: 10px; } .metaLink{ color: rgba(0,0,0,.55); font-size: 13px; font-weight: 500; } .placeSheet__actions{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.06); } .actionBtn{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; border: none; border-radius: 14px; background: rgba(0,0,0,.04); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .actionBtn:hover{ background: rgba(0,0,0,.07); } .actionBtn:active{ transform: scale(0.97); } .actionBtn:last-child{ border-right: none; } .actionBtn:disabled{ opacity: .5; cursor: not-allowed; } .actionIcon{ display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--primary-color, #007aff); } .placeSheet__hours{ margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.06); } .hoursRow{ display:flex; justify-content:space-between; gap: 14px; padding: 7px 0; font-size: 13.5px; color: rgba(0,0,0,.78); font-weight: 500; } .hoursVal{ color: rgba(0,0,0,.55); font-weight: 500; } [data-theme="dark"] .placeSheet__grab{ background: #000000; } [data-theme="dark"] .placeSheet__img{ background: #000000; } [data-theme="dark"] .placeSheet__photoThumb{ background: rgba(255,255,255,.08); } [data-theme="dark"] .placeSheet__close{ border-color: rgba(255,255,255,.18); background: #000000; color: rgba(255,255,255,.86); } [data-theme="dark"] .metaPill{ background: #000000; color: rgba(255,255,255,.86); } [data-theme="dark"] .metaDot{ color: rgba(255,255,255,.45); } [data-theme="dark"] .metaLink{ color: rgba(255,255,255,.75); } [data-theme="dark"] .placeSheet__hours{ border-top-color: rgba(255,255,255,.12); } [data-theme="dark"] .hoursRow{ color: rgba(255,255,255,.84); } [data-theme="dark"] .hoursVal{ color: rgba(255,255,255,.68); } [data-theme="dark"] .actionBtn{ border-right-color: rgba(255,255,255,.14); color: rgba(255,255,255,.90); } [data-theme="dark"] .placeSheet__actions{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); } /* Routes Sheet (Redesigned v2) */ .routeSheetBackdrop{ position: fixed; inset: 0; background: rgba(8,12,20,.28); z-index: 10070; } .routeSheet{ position: fixed; inset: 0; left: 0; right: 0; top: 0; bottom: 0; transform: none; width: 100%; max-width: 100%; max-height: 100vh; height: 100vh; background: #fff; border: none; border-radius: 0; box-shadow: none; overflow: auto; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 10071; } .routeSheet__grab{ display: none; } .routeSheet__body{ padding: calc(env(safe-area-inset-top, 0px) + 20px) 24px calc(env(safe-area-inset-bottom, 20px) + 24px); max-width: 560px; margin: 0 auto; } .routeSheet__header{ background: transparent; padding: 4px 0 14px; margin-bottom: 4px; border-bottom: 1px solid rgba(15,23,42,.06); } .routeSheet__titleRow{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; margin-bottom: 6px; } .routeSheet__title{ margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: rgba(15,23,42,.95); } .routeSheet__subtitle{ font-size: 13px; color: rgba(15,23,42,.55); font-weight: 500; } .routeSheet__close{ width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; border: none; background: rgba(15,23,42,.06); font-size: 18px; line-height: 1; color: rgba(15,23,42,.55); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .routeFieldLabel{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(15,23,42,.5); margin: 14px 2px 6px; } .routeField{ display:flex; align-items:center; gap: 12px; border: none; border-bottom: 1px solid rgba(15,23,42,.08); border-radius: 0; padding: 10px 2px; background: transparent; margin: 0; position: relative; transition: border-color 0.15s ease; } .routeField:focus-within{ border-bottom-color: rgba(var(--primary-rgb), 0.6); } .routeField input{ border: none; outline: none; background: transparent; width: 100%; font-size: 16px; color: rgba(15,23,42,.95); font-weight: 500; } .routeModes{ display:flex; gap: 8px; margin: 16px 0 4px; } .routeModeBtn{ flex: 1; padding: 12px 8px; border-radius: 14px; border: 1px solid rgba(15,23,42,.08); background: rgba(15,23,42,.04); font-size: 13px; font-weight: 600; cursor: pointer; display:flex; align-items:center; justify-content:center; gap: 7px; color: rgba(15,23,42,.75); transition: all 0.15s ease; } .routeModeBtn:active{ transform: scale(0.97); } .routeModeBtn.active{ background: var(--primary-color, #007aff); border-color: var(--primary-color, #007aff); color: #fff; box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.3); } .routePrimaryBtn{ width: 100%; padding: 15px 14px; border-radius: 14px; border: none; background: var(--primary-color, #007aff); color: #fff; font-size: 15px; font-weight: 700; margin-top: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; } .routePrimaryBtn:active{ transform: scale(0.98); box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.3); } .routeSecondaryBtn{ width: 100%; padding: 13px 14px; border-radius: 14px; border: none; background: transparent; color: rgba(15,23,42,.55); font-size: 14px; font-weight: 600; margin-top: 4px; cursor: pointer; } .routeSecondaryBtn:hover{ color: rgba(15,23,42,.8); } [data-theme="dark"] .routeSheet{ background: rgba(18,20,26,.96); border-color: rgba(255,255,255,.08); } [data-theme="dark"] .routeSheet__title{ color: rgba(248,250,252,.95); } [data-theme="dark"] .routeSheet__subtitle{ color: rgba(248,250,252,.55); } [data-theme="dark"] .routeSheet__header{ border-bottom-color: rgba(255,255,255,.08); } [data-theme="dark"] .routeSheet__close{ background: rgba(255,255,255,.08); color: rgba(248,250,252,.65); } [data-theme="dark"] .routeFieldLabel{ color: rgba(248,250,252,.5); } [data-theme="dark"] .routeField{ background: transparent; border-bottom-color: rgba(255,255,255,.08); } [data-theme="dark"] .routeField:focus-within{ border-bottom-color: rgba(var(--primary-rgb), 0.6); } [data-theme="dark"] .routeField input{ color: rgba(248,250,252,.95); } [data-theme="dark"] .routeModeBtn{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); color: rgba(248,250,252,.7); } [data-theme="dark"] .routeSecondaryBtn{ color: rgba(248,250,252,.55); } @keyframes tabSheetUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes placeSheetRise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Mobile Business Modal - Theme Aware Styles */ [data-theme="dark"] #mobileBusinessModalOverlay input, [data-theme="dark"] #mobileBusinessModalOverlay textarea, [data-theme="dark"] #mobileBusinessModalOverlay select { color: white !important; background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; } [data-theme="dark"] #mobileBusinessModalOverlay input::placeholder, [data-theme="dark"] #mobileBusinessModalOverlay textarea::placeholder { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; opacity: 1 !important; } [data-theme="dark"] #mobileBusinessModalOverlay label { color: var(--primary-color) !important; } [data-theme="dark"] #mobileBusinessModalOverlay option { background: #000000 !important; color: white !important; } /* Light theme styles */ [data-theme="light"] #mobileBusinessModalOverlay input, [data-theme="light"] #mobileBusinessModalOverlay textarea, [data-theme="light"] #mobileBusinessModalOverlay select, [data-theme="light-accent"] #mobileBusinessModalOverlay input, [data-theme="light-accent"] #mobileBusinessModalOverlay textarea, [data-theme="light-accent"] #mobileBusinessModalOverlay select { color: #000000 !important; background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.2) !important; } [data-theme="light"] #mobileBusinessModalOverlay input::placeholder, [data-theme="light"] #mobileBusinessModalOverlay textarea::placeholder, [data-theme="light-accent"] #mobileBusinessModalOverlay input::placeholder, [data-theme="light-accent"] #mobileBusinessModalOverlay textarea::placeholder { color: rgba(0, 0, 0, 0.5) !important; -webkit-text-fill-color: rgba(0, 0, 0, 0.5) !important; opacity: 1 !important; } [data-theme="light"] #mobileBusinessModalOverlay option, [data-theme="light-accent"] #mobileBusinessModalOverlay option { background: white !important; color: black !important; } /* Icon selector theme styles */ [data-theme="dark"] .mobile-icon-option { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.2) !important; } [data-theme="light"] .mobile-icon-option, [data-theme="light-accent"] .mobile-icon-option { background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.2) !important; } /* Modal background for different themes */ [data-theme="dark"] #mobileBusinessModalOverlay > div { background: rgba(20, 20, 20, 0.95) !important; color: white !important; } [data-theme="light"] #mobileBusinessModalOverlay > div, [data-theme="light-accent"] #mobileBusinessModalOverlay > div { background: rgba(255, 255, 255, 0.98) !important; color: black !important; } @keyframes slideDown { from { transform: translateX(-50%) translateY(-100%); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } } @keyframes slideUp { from { transform: translateX(-50%) translateY(0); opacity: 1; } to { transform: translateX(-50%) translateY(-100%); opacity: 0; } } @keyframes slideUpFade { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Theme-coordinated scrollbar styles */ /* Removed duplicate scrollbar styles - using global theme-aware styles from lines 342-428 */ /* Cache status indicator */ .cache-indicator { position: fixed; bottom: 90px; right: 20px; background: var(--input-background-color); padding: 8px 12px; border-radius: 20px; font-size: 11px; display: none; z-index: 1000; } body.offline .cache-indicator { display: block; } /* Light Accent Theme - Stronger borders and accents with glassmorphism */ [data-theme="light-accent"] { --background-color: #fbfbfc; --bg-primary: #fbfbfc; --bg-secondary: color-mix(in srgb, var(--accent-color) 7%, #ffffff 93%); --panel-bg: color-mix(in srgb, var(--accent-color) 5%, #ffffff 95%); --surface-color: rgba(255, 255, 255, 0.86); --surface-background-color: rgba(255, 255, 255, 0.86); --text-primary: #000000; --text-color: #000000; --text-secondary: rgba(0, 0, 0, 0.58); --border-color: rgba(0, 0, 0, 0.10); --card-bg: rgba(255, 255, 255, 0.82); --modal-bg: rgba(255, 255, 255, 0.94); --input-bg: rgba(255, 255, 255, 0.92); --input-background-color: rgba(255, 255, 255, 0.94); --input-border: rgba(0, 0, 0, 0.14); --ai-message-color: rgba(255, 255, 255, 0.82); --user-message-color: color-mix(in srgb, var(--primary-color) 14%, #ffffff 86%); color-scheme: light; } /* Light Accent Glassmorphism Effects - Match bloc.html */ /* FIXED: Removed .modal-content from this grouped selector - it was causing solid white background */ /* The Drop Bloc modal has its own specific styling at lines 5758+ and 5814+ */ /* REMOVED #booking-drawer from glassmorphism - now uses transparent background on page */ [data-theme="light-accent"] .arena-grid, [data-theme="light-accent"] .bloc-card, [data-theme="light-accent"] .drawer-content, [data-theme="light-accent"] #community-drawer, [data-theme="light-accent"] #shop-drawer { background: rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(30px) saturate(150%) !important; -webkit-backdrop-filter: blur(30px) saturate(150%) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; } /* Light mode body background - Using database colors */ [data-theme="light"] body, body[data-theme="light"], html[data-theme="light"] body { background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%) !important; color: #000000 !important; } [data-theme="light-accent"] body, body[data-theme="light-accent"], html[data-theme="light-accent"] body { background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent-color) 16%, transparent) 0%, transparent 34%), radial-gradient(circle at 100% 8%, color-mix(in srgb, var(--primary-color) 10%, transparent) 0%, transparent 30%), linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--accent-color) 5%, #ffffff 95%) 100%) !important; background-attachment: fixed !important; color: #000000 !important; } /* Dark Accent mode - Pure black with subtle neon gradient */ [data-theme="dark-accent"] body, body[data-theme="dark-accent"], html[data-theme="dark-accent"] body { background: radial-gradient(ellipse at top, rgba(var(--primary-rgb), 0.15) 0%, #000000 50%, #000000 100%) !important; background-attachment: fixed !important; color: #ffffff !important; } /* Placeholder text colors */ input::placeholder, textarea::placeholder { color: var(--text-primary) !important; opacity: 0.7 !important; } [data-theme="light"] input::placeholder, [data-theme="light-accent"] input::placeholder, [data-theme="light"] textarea::placeholder, [data-theme="light-accent"] textarea::placeholder { color: #000000 !important; opacity: 0.7 !important; } /* Select dropdown options */ select option { background: var(--surface-color) !important; color: var(--text-primary) !important; } [data-theme="light"] select option, [data-theme="light-accent"] select option { background: #ffffff !important; color: #000000 !important; } /* Input field styling */ input[type="text"] { background: var(--surface-color) !important; color: var(--text-primary) !important; border: none !important; } /* Light mode AI area overrides */ [data-theme="light"] .ai-main-area, [data-theme="light-accent"] .ai-main-area { background: transparent !important; } [data-theme="light"] .ai-main-area select { background: #ffffff !important; color: #000000 !important; border: none !important; } [data-theme="light-accent"] .ai-main-area select { background: transparent !important; color: #000000 !important; border: none !important; } [data-theme="light"] .ai-main-area input[type="text"] { background: #ffffff !important; color: #000000 !important; border: none !important; } [data-theme="light-accent"] .ai-main-area input[type="text"] { background: transparent !important; color: #000000 !important; border: none !important; } /* Dark theme - no borders and white text */ [data-theme="dark"] .ai-main-area select { background: transparent !important; color: #ffffff !important; border: none !important; } [data-theme="dark"] .ai-main-area input[type="text"] { background: transparent !important; color: #ffffff !important; border: none !important; } [data-theme="dark"] .ai-main-area span[style*="color: var(--primary-color)"] { color: #ffffff !important; } /* AI Typing Animation */ [data-theme="dark"] .ai-main-area #ai-header-subtitle { color: var(--text-secondary) !important; } [data-theme="light"] .ai-main-area button { background: #ffffff !important; color: #000000 !important; border: 1px solid #000000 !important; } [data-theme="light-accent"] .ai-main-area button { background: transparent !important; color: #000000 !important; border: none !important; } [data-theme="light"] .ai-main-area div[style*="background: var(--surface-color)"] { background: #ffffff !important; } /* Light mode - Settings button */ [data-theme="light"] #settings-button { color: #ffffff !important; } [data-theme="light-accent"] #settings-button { color: #000000 !important; } [data-theme="light"] #settings-button i { color: #ffffff !important; } [data-theme="light-accent"] #settings-button i { color: #000000 !important; } /* Light mode mobile specific styles - GLASSY HEADER */ /* Placeholder text styling for app modal */ #mobile-app-search::placeholder { color: #000000 !important; opacity: 0.4 !important; } /* Dark mode styles for bytes upload modal inputs */ [data-theme="dark"] #mobileYoutubeUrl, [data-theme="dark"] #mobileTiktokUrl, [data-theme="dark"] #mobileSoundcloudUrl, [data-theme="dark"] #mobileTwitchUrl, [data-theme="dark"] #mobileWaybackUrl { background: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: white !important; -webkit-text-fill-color: white !important; } [data-theme="dark"] #mobileYoutubeUrl::placeholder, [data-theme="dark"] #mobileTiktokUrl::placeholder, [data-theme="dark"] #mobileSoundcloudUrl::placeholder, [data-theme="dark"] #mobileTwitchUrl::placeholder, [data-theme="dark"] #mobileWaybackUrl::placeholder { color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; opacity: 1 !important; } /* Light mode styles for app modal */ [data-theme="light"] #app-modal { background: #ffffff !important; } [data-theme="light"] #app-modal > div { background: #000000 !important; border: 2px solid #ffffff !important; } [data-theme="light"] #app-modal button[onclick="closeAppModal()"] { background: #ffffff !important; border: 1px solid #ffffff !important; color: #000000 !important; } [data-theme="light"] #app-modal-search-title { color: #ffffff !important; } [data-theme="light"] #app-modal h2 { color: #ffffff !important; } [data-theme="light"] #mobile-app-search { background: #ffffff !important; border: 2px solid #000000 !important; color: #000000 !important; } [data-theme="light"] #mobile-app-search::placeholder { color: #000000 !important; opacity: 0.4 !important; } [data-theme="light"] #app-modal button[onclick*="navigateToApp"] { background: #ffffff !important; color: #000000 !important; } [data-theme="light"] #mobile-ticker-image { background: #ffffff !important; } [data-theme="light"] #app-modal > div > div:nth-child(3) > div { background: #ffffff !important; } [data-theme="light"] #app-modal button[onclick="window.location.reload()"] { background: #ffffff !important; color: #000000 !important; } [data-theme="light"] #app-modal button[onclick="addToHomeScreen()"] { background: #ffffff !important; color: #000000 !important; } [data-theme="light"] #app-modal button[onclick="shareApp()"] { background: transparent !important; border: 1px solid transparent !important; color: transparent !important; } /* Light mode map controls */ [data-theme="light"] #mobile-map-style-select { background: #ffffff !important; color: #000000 !important; border: 1px solid #000000 !important; } [data-theme="light"] #map-search-icon { background: #ffffff !important; color: #000000 !important; border: 1px solid #000000 !important; } [data-theme="light"] #map-search-box { background: rgba(255, 255, 255, 0.7) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] #mobile-map-search { background: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; color: #000000 !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] .header, [data-theme="light-accent"] .header { background: rgba(var(--accent-rgb), 0.15) !important; backdrop-filter: blur(30px) saturate(150%) !important; -webkit-backdrop-filter: blur(30px) saturate(150%) !important; border-bottom: none !important; box-shadow: none !important; } [data-theme="light"] .ticker-badge { background: rgba(var(--primary-rgb), 0.8) !important; backdrop-filter: blur(10px) saturate(150%) !important; -webkit-backdrop-filter: blur(10px) saturate(150%) !important; border: 1px solid rgba(var(--primary-rgb), 0.6) !important; color: #ffffff !important; font-weight: 800 !important; box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.2) !important; } [data-theme="light"] .profile-info h3 { color: #000000 !important; } [data-theme="light"] .post-time { color: #000000 !important; opacity: 0.6 !important; } /* NUCLEAR FORCE - LIGHT MODE NAV BLACK TEXT */ [data-theme="light"] .mobile-nav-tab { background: rgba(255, 255, 255, 1) !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; box-shadow: none !important; /* Remove shadow that might cause grey area */ } [data-theme="light"] .mobile-nav-tab, [data-theme="light"] .mobile-nav-tab *, [data-theme="light"] .mobile-nav-tab i, [data-theme="light"] .mobile-nav-tab span { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="light-accent"] .mobile-nav-tab, body[data-theme="light-accent"] .mobile-nav-tab, html[data-theme="light-accent"] .mobile-nav-tab { color: #000000 !important; -webkit-text-fill-color: #000000 !important; background: linear-gradient(135deg, var(--accent-color), var(--primary-color), var(--tertiary-color)) !important; background-attachment: fixed !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; box-shadow: none !important; /* Remove shadow */ } [data-theme="light-accent"] .mobile-nav-tab *, body[data-theme="light-accent"] .mobile-nav-tab *, html[data-theme="light-accent"] .mobile-nav-tab * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="light-accent"] .mobile-nav-tab i { color: #000000 !important; } /* NUCLEAR - LIGHT MODE ACTIVE TAB */ [data-theme="light"] .mobile-nav-tab.active { background: rgba(255, 255, 255, 1) !important; border-color: rgba(var(--primary-rgb), 0.4) !important; box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.2) !important; } [data-theme="light"] .mobile-nav-tab.active, [data-theme="light"] .mobile-nav-tab.active *, [data-theme="light"] .mobile-nav-tab.active i, [data-theme="light"] .mobile-nav-tab.active span { color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; } [data-theme="light-accent"] .mobile-nav-tab.active { color: var(--primary-color) !important; background: linear-gradient(135deg, var(--accent-color), var(--primary-color), var(--tertiary-color)) !important; background-attachment: fixed !important; border-color: rgba(var(--primary-rgb), 0.6) !important; box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.3) !important; } [data-theme="light"] #settings-dropdown { background: #ffffff !important; border: 1px solid #000000 !important; } [data-theme="light"] .settings-menu-item { color: #000000 !important; } [data-theme="light-accent"] .settings-menu-item { color: #000000 !important; } [data-theme="light"] .settings-menu-item:hover { background: #ffffff !important; } /* Removed - see nuclear override section below */ [data-theme="light"] .enter-title { color: #000000 !important; } [data-theme="light-accent"] .enter-title, [data-theme="light-accent"] #enter-modal .enter-title, [data-theme="light-accent"] #enter-modal h3.enter-title { color: #000000 !important; } [data-theme="light-accent"] .enter-close, [data-theme="light-accent"] #enter-modal .enter-close, [data-theme="light-accent"] .enter-close i, [data-theme="light-accent"] #enter-modal .enter-close i { color: #000000 !important; } [data-theme="light"] .enter-body { color: var(--text-primary) !important; } [data-theme="light"] .bloc-card { background: #ffffff !important; border: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; color: var(--text-primary); } [data-theme="light"] .bloc-card:hover, [data-theme="light"] .bloc-card:active { background: #ffffff !important; border: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; } [data-theme="light-accent"] .bloc-card { background: rgba(0, 0, 0, 0.03) !important; backdrop-filter: blur(10px) !important; border: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important; color: #000000 !important; } [data-theme="light-accent"] .bloc-card:hover, [data-theme="light-accent"] .bloc-card:active { background: rgba(0, 0, 0, 0.05) !important; border: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important; } [data-theme="light-accent"] .bloc-card .bloc-message p, [data-theme="light-accent"] .bloc-card .profile-info h3, [data-theme="light-accent"] .bloc-card .post-time, [data-theme="light-accent"] .bloc-card .profile-avatar, [data-theme="light-accent"] .bloc-card .enter-bloc-btn, [data-theme="light-accent"] .bloc-card .enter-bloc-btn span, [data-theme="light-accent"] .enter-bloc-btn, [data-theme="light-accent"] .enter-bloc-btn span { color: #000000 !important; } /* LIGHT-ACCENT SPECIFIC STYLES - Subtle styling */ [data-theme="light-accent"] div[style*="border-radius: 20px"] { border: 1px solid rgba(0, 0, 0, 0.15) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } [data-theme="light-accent"] .stream-card { border: 1px solid rgba(0, 0, 0, 0.15) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } [data-theme="light-accent"] .mobile-nav-tab { border: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; } [data-theme="light-accent"] .mobile-nav-tab.active { border: 1px solid rgba(0, 0, 0, 0.2) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; } [data-theme="light-accent"] .header { border-bottom: none !important; box-shadow: none !important; } [data-theme="light-accent"] .ticker-badge { color: #000000 !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; } /* Removed duplicate - already defined above with proper subtle borders */ /* DARK MODE STYLES */ [data-theme="dark"] body { background: #000000 !important; color: #ffffff !important; } /* Light mode - black text */ [data-theme="light"] #market-main-area, [data-theme="light"] #market-main-area *, [data-theme="light"] #market-main-area h1, [data-theme="light"] #market-main-area h2, [data-theme="light"] #market-main-area h3, [data-theme="light"] #market-main-area p, [data-theme="light"] #market-main-area div, [data-theme="light"] #market-main-area span, [data-theme="light"] #market-main-area button, [data-theme="light"] #mobile-bucks-display, [data-theme="light"] #mobile-app-purchase-amount, [data-theme="light"] .market-main-area, [data-theme="light"] .market-main-area * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Dark mode - all text white */ [data-theme="dark"] #market-main-area, [data-theme="dark"] #market-main-area *, [data-theme="dark"] #market-main-area h1, [data-theme="dark"] #market-main-area h2, [data-theme="dark"] #market-main-area h3, [data-theme="dark"] #market-main-area p, [data-theme="dark"] #market-main-area div, [data-theme="dark"] #market-main-area span, [data-theme="dark"] #market-main-area button, [data-theme="dark"] #mobile-bucks-display, [data-theme="dark"] #mobile-app-purchase-amount, [data-theme="dark"] .market-main-area, [data-theme="dark"] .market-main-area * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Dark mode - Stream empty state text */ [data-theme="dark"] #stream-empty, [data-theme="dark"] #stream-empty p, [data-theme="dark"] #stream-empty i { color: #ffffff !important; } /* Dark mode - Comment input */ [data-theme="dark"] .comment-input-wrapper, [data-theme="dark"] #global-comment-input { background: #000000 !important; backdrop-filter: blur(20px) !important; } [data-theme="dark"] .comment-input, [data-theme="dark"] #comment-input { background: #000000 !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } [data-theme="dark"] .comment-input::placeholder, [data-theme="dark"] #comment-input::placeholder { color: var(--text-muted) !important; } /* DARK ACCENT - Comment input with neon glow */ [data-theme="dark-accent"] .comment-input-wrapper, [data-theme="dark-accent"] #global-comment-input { background: linear-gradient(135deg, #0a0a0a, #000000) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(var(--primary-rgb), 0.3) !important; box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.2); } [data-theme="dark-accent"] .comment-input, [data-theme="dark-accent"] #comment-input { background: linear-gradient(135deg, #0a0a0a, #000000) !important; border: 1px solid rgba(var(--primary-rgb), 0.4) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="dark-accent"] .comment-input::placeholder, [data-theme="dark-accent"] #comment-input::placeholder { color: rgba(255, 255, 255, 0.5) !important; } [data-theme="dark-accent"] .comment-input:focus, [data-theme="dark-accent"] #comment-input:focus { border: 1px solid rgba(var(--primary-rgb), 0.6) !important; box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4); } /* Dark mode - Post info section */ [data-theme="dark"] .post-info { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 85%, transparent) 0%, color-mix(in srgb, var(--surface-color) 65%, transparent) 100%) !important; border: none !important; } [data-theme="dark"] .post-info *, [data-theme="dark"] .post-content, [data-theme="dark"] .post-info h3, [data-theme="dark"] .post-info div { color: #ffffff !important; } /* DARK ACCENT POST INFO - CYBERPUNK NEON */ [data-theme="dark-accent"] .post-info { background: linear-gradient(135deg, #0a0a0a, #000000) !important; border: none !important; box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.2); } [data-theme="dark-accent"] .post-info *, [data-theme="dark-accent"] .post-content, [data-theme="dark-accent"] .post-info h3, [data-theme="dark-accent"] .post-info div, [data-theme="dark-accent"] .post-info * * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="dark-accent"] .enter-body { background: linear-gradient(135deg, #0a0a0a, #000000) !important; } [data-theme="dark-accent"] .enter-body * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="dark-accent"] .comment-item { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.02)) !important; border: 1px solid rgba(var(--primary-rgb), 0.2) !important; } /* Light mode post info */ [data-theme="light"] .post-info *, [data-theme="light"] .post-content, [data-theme="light"] .post-info h3, [data-theme="light"] .post-info div, [data-theme="light-accent"] .post-info *, [data-theme="light-accent"] .post-content, [data-theme="light-accent"] .post-info h3, [data-theme="light-accent"] .post-info div { color: #000000 !important; } /* Dark mode - AI Command Center */ [data-theme="dark"] .ai-main-area > div:first-child { background: rgba(var(--accent-rgb), 0.1) !important; backdrop-filter: blur(10px) !important; } [data-theme="dark"] .ai-main-area div[style*="background: var(--surface-color)"] { background: rgba(var(--accent-rgb), 0.08) !important; backdrop-filter: blur(10px) !important; } [data-theme="dark"] #mobile-ai-quick-actions button { background: rgba(var(--accent-rgb), 0.12) !important; backdrop-filter: blur(10px) !important; } /* Dark mode - All AI area text white */ [data-theme="dark"] .ai-main-area, [data-theme="dark"] .ai-main-area * { color: #ffffff !important; } [data-theme="dark"] .header { background: rgba(var(--accent-rgb), 0.05) !important; backdrop-filter: blur(30px) saturate(150%) !important; -webkit-backdrop-filter: blur(30px) saturate(150%) !important; border-bottom: none !important; box-shadow: none !important; } [data-theme="dark"] .ticker-badge { background: rgba(var(--primary-rgb), 0.9) !important; backdrop-filter: blur(10px) saturate(150%) !important; -webkit-backdrop-filter: blur(10px) saturate(150%) !important; border: 1px solid rgba(var(--primary-rgb), 0.7) !important; color: #ffffff !important; font-weight: 800 !important; box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.3) !important; } [data-theme="dark"] .profile-info h3 { color: #ffffff !important; } [data-theme="dark"] .post-time { color: #ffffff !important; opacity: 0.7 !important; } [data-theme="dark"] .mobile-nav-tab { color: #ffffff; background: rgba(0, 0, 0, 1) !important; border: 1px solid rgba(var(--primary-rgb), 0.4) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important; } [data-theme="dark"] .mobile-nav-tab.active { color: var(--primary-color) !important; background: rgba(0, 0, 0, 1) !important; border-color: rgba(var(--primary-rgb), 0.6) !important; box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3) !important; } [data-theme="dark"] #settings-dropdown { background: #000000 !important; border: 1px solid #ffffff !important; } [data-theme="dark"] .settings-menu-item { color: #ffffff !important; } .settings-menu-item { color: #ffffff !important; } [data-theme="dark"] .settings-menu-item:hover { background: #333333 !important; } [data-theme="dark"] .enter-modal { background: #000000 !important; } [data-theme="dark"] .enter-title, [data-theme="dark"] #enter-modal .enter-title, [data-theme="dark"] #enter-modal h3.enter-title { color: #ffffff !important; } [data-theme="dark"] .enter-close, [data-theme="dark"] #enter-modal .enter-close, [data-theme="dark"] .enter-close i, [data-theme="dark"] #enter-modal .enter-close i { color: #ffffff !important; } [data-theme="dark"] .enter-body { color: #ffffff !important; } [data-theme="dark"] .bloc-card { background: #000000 !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; box-shadow: none !important; } [data-theme="dark"] .bloc-message { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12) 0%, rgba(var(--primary-rgb), 0.03) 100%) !important; border: 1px solid rgba(var(--primary-rgb), 0.2) !important; } [data-theme="dark"] .bloc-card .bloc-message p, [data-theme="dark"] .bloc-card .profile-info h3, [data-theme="dark"] .bloc-card .post-time { color: #ffffff !important; } [data-theme="dark"] .bloc-card:hover, [data-theme="dark"] .bloc-card:active { background: rgba(255, 255, 255, 0.03) !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: none !important; } [data-theme="dark"] .enter-bloc-btn { background: rgba(var(--primary-rgb), 0.8) !important; backdrop-filter: blur(12px) saturate(160%) !important; -webkit-backdrop-filter: blur(12px) saturate(160%) !important; border: 1px solid rgba(var(--primary-rgb), 0.6) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.4) !important; } /* DARK ACCENT BLOC CARDS - CYBERPUNK NEON */ [data-theme="dark-accent"] .bloc-card { background: linear-gradient(135deg, #0a0a0a, #000000) !important; border: none !important; border-bottom: 1px solid rgba(var(--primary-rgb), 0.2) !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.1) !important; } [data-theme="dark-accent"] .bloc-message { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15) 0%, rgba(var(--primary-rgb), 0.05) 100%) !important; border: 1px solid rgba(var(--primary-rgb), 0.4) !important; box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2); } [data-theme="dark-accent"] .bloc-card .bloc-message p, [data-theme="dark-accent"] .bloc-card .profile-info h3, [data-theme="dark-accent"] .bloc-card .post-time, [data-theme="dark-accent"] .bloc-card *, [data-theme="dark-accent"] .bloc-card * * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="dark-accent"] .bloc-card:hover, [data-theme="dark-accent"] .bloc-card:active { background: linear-gradient(135deg, #0f0f0f, #050505) !important; border: none !important; border-bottom: 1px solid rgba(var(--primary-rgb), 0.4) !important; box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.2) !important; } [data-theme="dark-accent"] .enter-bloc-btn { background: rgba(var(--primary-rgb), 0.9) !important; backdrop-filter: blur(12px) saturate(160%) !important; -webkit-backdrop-filter: blur(12px) saturate(160%) !important; border: 1px solid rgba(var(--primary-rgb), 0.6) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.5), 0 0 20px rgba(var(--primary-rgb), 0.3) !important; text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.6); } [data-theme="dark"] #mobile-map-search { background: #000000 !important; color: #ffffff !important; border: 1px solid #ffffff !important; } /* Light mode: Match desktop's neutral gray background */ [data-theme="light"] body { background: var(--background-color) !important; } [data-theme="light"] .main-content { background: transparent !important; } [data-theme="light"] .content-area { background: rgba(var(--primary-rgb), 0.02) !important; } /* Sexy Glassmorphism Effects for All Elements */ .bloc-card:hover, .bloc-card:active { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: rgba(255, 255, 255, 0.2); } /* Glassmorphism for buttons */ button, .btn { backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Settings dropdown glass effect */ #settings-dropdown { background: linear-gradient(135deg, #000000, #000000) !important; backdrop-filter: blur(30px) saturate(180%) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } /* Modal glass effects */ .modal-content, .enter-content { backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Input fields glass effect */ input, textarea, select { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Community panel glass */ #mobile-community-panel, #mobile-bytes-panel { background: linear-gradient(to bottom, #000000, #000000) !important; backdrop-filter: blur(30px) saturate(180%) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) !important; } /* Light mode - AI Command Center */ [data-theme="light"] .ai-main-area { background: transparent !important; } /* Light-accent mode - AI Command Center with theme colors */ [data-theme="light-accent"] .ai-main-area > div:first-child { background: rgba(var(--accent-rgb), 0.2) !important; backdrop-filter: blur(10px) !important; } [data-theme="light-accent"] .ai-main-area div[style*="background: var(--surface-color)"] { background: rgba(var(--accent-rgb), 0.15) !important; backdrop-filter: blur(10px) !important; } [data-theme="light-accent"] #mobile-ai-quick-actions button { background: rgba(var(--accent-rgb), 0.25) !important; backdrop-filter: blur(10px) !important; } /* Light-accent - AI text colors */ [data-theme="light-accent"] .ai-main-area #mobile-ai-output { color: #000000 !important; } [data-theme="light-accent"] .ai-main-area #mobile-ai-output > div { color: #000000 !important; } /* Light-accent - Bytes cards should have white text */ [data-theme="light-accent"] .fullscreen-card { color: #ffffff !important; } [data-theme="light-accent"] .fullscreen-card * { color: #ffffff !important; } /* Force description background in light-accent */ [data-theme="light-accent"] .fullscreen-card > div:last-child { background: #ffffff !important; color: #000000 !important; } [data-theme="light-accent"] .fullscreen-card > div:last-child * { color: #000000 !important; } [data-theme="light-accent"] .ai-main-area #ai-header-subtitle { color: rgba(0, 0, 0, 0.7) !important; } [data-theme="light-accent"] .ai-main-area span[style*="color: var(--primary-color)"] { color: #000000 !important; } /* Light-accent - Comment input with theme colors */ [data-theme="light-accent"] .comment-input-wrapper, [data-theme="light-accent"] #global-comment-input { background: #ffffff !important; backdrop-filter: blur(20px) !important; } [data-theme="light-accent"] .comment-input, [data-theme="light-accent"] #comment-input { background: rgba(255, 182, 193, 0.3) !important; border: 1px solid rgba(var(--primary-rgb), 0.3) !important; color: #000000 !important; } [data-theme="light-accent"] .comment-input::placeholder, [data-theme="light-accent"] #comment-input::placeholder { color: rgba(0, 0, 0, 0.5) !important; } /* Light mode - clean techy post info */ [data-theme="light"] .post-info { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 95%, transparent) 0%, color-mix(in srgb, var(--surface-color) 75%, transparent) 100%) !important; border: none !important; } /* Light-accent - Glassmorphism post info */ [data-theme="light-accent"] .post-info { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 90%, transparent) 0%, color-mix(in srgb, var(--surface-color) 70%, transparent) 100%) !important; border: none !important; } /* Bytes cards - Regular web view (unchanged) */ .fullscreen-card { background: #000 !important; width: 100vw !important; height: calc(100vh - 50px) !important; /* Account for mobile nav */ min-height: calc(100vh - 50px) !important; max-height: calc(100vh - 50px) !important; max-width: 100vw !important; position: relative; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; /* No rounded corners */ flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; /* Center content vertically */ overflow: hidden !important; /* No scrolling within cards */ touch-action: pan-y !important; /* Only allow vertical swipe to next card */ } .fullscreen-card * { overflow: hidden !important; /* Prevent any child from scrolling */ touch-action: pan-y !important; } .fullscreen-card iframe { overflow: hidden !important; pointer-events: auto !important; /* Allow clicks on video embeds */ } /* PWA ONLY - Adjust fullscreen card heights */ @media (display-mode: standalone) { .fullscreen-card { height: calc(100vh - 50px - env(safe-area-inset-top, 20px)) !important; /* Account for nav and status bar */ min-height: calc(100vh - 50px - env(safe-area-inset-top, 20px)) !important; max-height: calc(100vh - 50px - env(safe-area-inset-top, 20px)) !important; } } .fullscreen-card img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; position: absolute !important; top: 0 !important; left: 0 !important; border-radius: 0 !important; /* No rounded corners */ } .fullscreen-card video { width: 100% !important; height: 100% !important; object-fit: cover !important; position: absolute !important; top: 0 !important; left: 0 !important; border-radius: 0 !important; /* No rounded corners */ } /* Ensure all bytes card elements have no rounded corners */ .fullscreen-card * { border-radius: 0 !important; } /* PWA ONLY - Contain iframes properly with safe area */ @media (display-mode: standalone) { .fullscreen-card iframe { position: relative !important; width: 100% !important; /* Full height, no padding */ height: 100% !important; max-height: 100% !important; margin-top: 0 !important; } /* Ensure embed containers don't overlap status bar in PWA */ .fullscreen-card .embed-responsive, .fullscreen-card [class*="embed"] { /* No top padding - start from top */ padding-top: 0 !important; margin: 0 !important; height: 100% !important; } } /* Light mode - Bytes cards */ [data-theme="light"] .fullscreen-card { background: #000 !important; } [data-theme="light"] .fullscreen-card .card-info-overlay { color: white !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6), transparent) !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; } /* Dark mode - Bytes cards */ [data-theme="dark"] .fullscreen-card { background: #000 !important; } [data-theme="dark"] .fullscreen-card .card-info-overlay { color: white !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6), transparent) !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; } /* NUCLEAR OVERRIDE - Maximum specificity for Enter BLOC modal backgrounds */ body[data-theme="light"] .enter-modal, body[data-theme="light"] .enter-content, html[data-theme="light"] body .enter-modal, html[data-theme="light"] body .enter-content, #enter-modal[data-theme="light"], [data-theme="light"] #enter-modal { background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #000000 !important; } [data-theme="light"] .modal-overlay { background: transparent !important; color: #000000 !important; } body[data-theme="light-accent"] .enter-modal, body[data-theme="light-accent"] .enter-content, html[data-theme="light-accent"] body .enter-modal, html[data-theme="light-accent"] body .enter-content, #enter-modal[data-theme="light-accent"], [data-theme="light-accent"] #enter-modal { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; color: #000000 !important; } /* Also force bloc-auth-modal specifically */ body[data-theme="light-accent"] #bloc-auth-modal, [data-theme="light-accent"] #bloc-auth-modal > div { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } [data-theme="light"] .modal-title { color: var(--primary-color) !important; } [data-theme="light"] .enter-title, [data-theme="light"] #enter-modal .enter-title, [data-theme="light"] #enter-modal h3.enter-title { color: #000000 !important; } [data-theme="light"] .enter-close, [data-theme="light"] #enter-modal .enter-close, [data-theme="light"] .enter-close i, [data-theme="light"] #enter-modal .enter-close i { color: #000000 !important; } /* A field is a surface with text on it, so it is painted with the surface colour. This used --text-primary for the background, which in light mode is #000000 -- black text on a black box, the field unreadable and its content invisible. Each input that hit it was exempted one at a time, which is why the :not() chain kept growing; the rule itself was the bug. */ [data-theme="light"] .text-area:not(#post-message):not(#dm-message), [data-theme="light"] input[type="text"]:not(#dm-recipient):not(#byte-upload-ticker):not(#mobile-ai-prompt):not(#mobile-agent-input):not(#modal-route-from-input):not(#modal-route-to-input):not(#community-quick-compose-input):not(#mobile-bloc-name-input), [data-theme="light"] input[type="email"], [data-theme="light"] input[type="number"], [data-theme="light"] textarea:not(#post-message):not(#dm-message), [data-theme="light"] select, [data-theme="light-accent"] .text-area:not(#post-message):not(#dm-message), [data-theme="light-accent"] input[type="text"]:not(#dm-recipient):not(#byte-upload-ticker):not(#mobile-ai-prompt):not(#mobile-agent-input):not(#modal-route-from-input):not(#modal-route-to-input):not(#community-quick-compose-input):not(#mobile-bloc-name-input), [data-theme="light-accent"] input[type="email"], [data-theme="light-accent"] input[type="number"], [data-theme="light-accent"] textarea:not(#post-message):not(#dm-message), [data-theme="light-accent"] select { background: var(--surface-color, #ffffff) !important; border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent) !important; color: #000000 !important; } [data-theme="light"] .btn-primary { background: var(--primary-color) !important; color: #ffffff !important; } [data-theme="light"] .btn-secondary:not(.modal-content .btn-secondary) { background: var(--text-primary) !important; color: var(--primary-color) !important; border: 1px solid var(--text-primary) !important; } /* Light mode - Dynamic inline modal styles */ [data-theme="light"] div[id*="modal"][style*="background: var(--surface-color)"] { background: transparent !important; } [data-theme="light"] div[id*="modal"][style*="background: var(--background-color)"] { background: transparent !important; } /* Light mode - ALL Settings Modals (Privacy, Payment, Customize, Profile, App) */ [data-theme="light"] #permissions-modal, [data-theme="light"] #payment-modal, [data-theme="light"] #customize-modal, [data-theme="light"] #profile-modal, [data-theme="light"] #app-modal { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light"] #permissions-modal > div, [data-theme="light"] #payment-modal > div, [data-theme="light"] #customize-modal > div, [data-theme="light"] #profile-modal > div, [data-theme="light"] #app-modal > div { background: transparent !important; color: #000000 !important; } [data-theme="light"] #permissions-modal h3, [data-theme="light"] #payment-modal h3, [data-theme="light"] #customize-modal h3, [data-theme="light"] #profile-modal h3, [data-theme="light"] #app-modal h3, [data-theme="light"] #permissions-modal h4, [data-theme="light"] #payment-modal h4, [data-theme="light"] #customize-modal h4 { color: var(--primary-color) !important; } [data-theme="light"] #permissions-modal p, [data-theme="light"] #payment-modal p, [data-theme="light"] #customize-modal p, [data-theme="light"] #profile-modal p, [data-theme="light"] #app-modal p, [data-theme="light"] #permissions-modal label, [data-theme="light"] #payment-modal label, [data-theme="light"] #customize-modal label { color: #000000 !important; } [data-theme="light"] #permissions-modal button[onclick*="close"], [data-theme="light"] #payment-modal button[onclick*="close"], [data-theme="light"] #customize-modal button[onclick*="close"], [data-theme="light"] #profile-modal button[onclick*="close"], [data-theme="light"] #app-modal button[onclick*="close"] { color: #000000 !important; } [data-theme="light"] #permissions-modal div[style*="background: #000000"], [data-theme="light"] #payment-modal div[style*="background: #000000"], [data-theme="light"] #customize-modal div[style*="background: #000000"] { background: var(--text-primary) !important; border-color: var(--text-primary) !important; } /* Force ALL text to be black in light mode modals */ [data-theme="light"] #permissions-modal *, [data-theme="light"] #payment-modal *, [data-theme="light"] #customize-modal *, [data-theme="light"] #profile-modal *, [data-theme="light"] #app-modal * { color: #000000 !important; } /* Booking checkout uses a neutral premium action, never the app accent. */ [data-theme="light"] #mobile-pay-button, [data-theme="light"] #mobilePaymentModal #mobile-pay-button { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: #111214 !important; border-color: #111214 !important; } /* Override for Share App button - keep it transparent */ [data-theme="light"] #app-modal button[onclick="shareApp()"], [data-theme="light"] #app-modal button[onclick="shareApp()"] *, [data-theme="light"] #blocCardModal button[onclick="shareBlocCard()"], [data-theme="light"] #blocCardModal button[onclick="shareBlocCard()"] * { background: transparent !important; border-color: transparent !important; color: transparent !important; } /* Keep primary color for headers and icons */ [data-theme="light"] #permissions-modal h3, [data-theme="light"] #payment-modal h3, [data-theme="light"] #customize-modal h3, [data-theme="light"] #profile-modal h3, [data-theme="light"] #app-modal h3, [data-theme="light"] #permissions-modal i.fas, [data-theme="light"] #payment-modal i.fas, [data-theme="light"] #customize-modal i.fas { color: var(--primary-color) !important; } /* Ensure spans, divs, and all nested elements are black */ [data-theme="light"] #permissions-modal span, [data-theme="light"] #payment-modal span, [data-theme="light"] #customize-modal span, [data-theme="light"] #permissions-modal div, [data-theme="light"] #payment-modal div, [data-theme="light"] #customize-modal div { color: #000000 !important; } /* Light mode - Enter Bloc Modal in Community */ [data-theme="light"] #enter-modal *, [data-theme="light"] .enter-content *, [data-theme="light"] .enter-header *, [data-theme="light"] .enter-body * { color: #000000 !important; } [data-theme="light"] .enter-header { background: transparent !important; border-bottom: 1px solid var(--text-primary) !important; } [data-theme="light"] .comment-input-wrapper, [data-theme="light"] #global-comment-input { background: rgba(255, 255, 255, 0.9) !important; border-top: 1px solid var(--text-primary) !important; } /* Removed - handled by more specific rule below */ [data-theme="light"] .comment-input::placeholder, [data-theme="light"] #comment-input::placeholder { color: rgba(0, 0, 0, 0.5) !important; } [data-theme="light"] .enter-bloc-btn { background: rgba(var(--primary-rgb), 0.7) !important; backdrop-filter: blur(12px) saturate(160%) !important; -webkit-backdrop-filter: blur(12px) saturate(160%) !important; border: 1px solid rgba(var(--primary-rgb), 0.5) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.2) !important; } [data-theme="light"] .enter-bloc-btn span { color: #ffffff !important; } [data-theme="light"] .bloc-message { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12) 0%, rgba(var(--primary-rgb), 0.04) 100%) !important; border: 1px solid rgba(var(--primary-rgb), 0.2) !important; } [data-theme="light"] .bloc-message p { color: #000000 !important; } [data-theme="light"] .comment-item { background: transparent !important; color: #000000 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; border-radius: 0 !important; padding: 12px 0 !important; } [data-theme="light"] .comment-author, [data-theme="light"] .comment-text, [data-theme="light"] .comment-time { color: #000000 !important; } [data-theme="light-accent"] .comment-item { background: transparent !important; backdrop-filter: none !important; border: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; border-radius: 0 !important; padding: 12px 0 !important; color: #000000 !important; } [data-theme="light-accent"] .comment-author, [data-theme="light-accent"] .comment-text, [data-theme="light-accent"] .comment-time { color: #000000 !important; } [data-theme="dark"] .comment-item { background: transparent !important; backdrop-filter: none !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0 !important; padding: 12px 20px !important; } [data-theme="dark"] .comment-author, [data-theme="dark"] .comment-text, [data-theme="dark"] .comment-time { color: var(--text-primary) !important; } html { height: 100%; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0; position: relative; width: 100%; -webkit-overflow-scrolling: touch; } body { font-family: 'Inter', sans-serif; background: var(--background-color); color: var(--text-color); height: auto; min-height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0; border: none !important; border-top: none !important; position: relative; touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Remove any top borders from main containers and ensure full height */ .bytes-main-area, .virtual-main-area, .market-main-area, .booking-main-area, .ai-main-area, .shop-main-area, .stream-main-area, .apps-main-area, #bytes-main-area, #virtual-main-area, #market-main-area, #booking-main-area, #ai-main-area, #shop-main-area, #stream-main-area, #apps-main-area { border: none !important; margin: 0 !important; /* Let PWA rules handle padding-top */ height: 100vh !important; min-height: 100vh !important; } /* Override safe area insets specifically for main areas (except bytes-container which needs parent padding) */ [class*="-main-area"] > *:first-child:not(.bytes-container), [id*="-main-area"] > *:first-child:not(.bytes-container) { margin-top: 0 !important; padding-top: 0 !important; } /* REMOVED - These were overriding PWA safe area padding */ /* Force content to top without breaking safe areas */ html, body { padding-top: 0 !important; margin-top: 0 !important; } /* Force all main areas with proper spacing for status bar and nav */ [class*="-main-area"], [id*="-main-area"], .arena-grid { /* Use relative positioning like arena-grid to prevent nav jumping */ position: relative !important; min-height: 100vh !important; width: 100% !important; margin-top: 0 !important; padding-top: calc(env(safe-area-inset-top, 47px) + 80px) !important; /* Add padding at bottom so content doesn't go under nav (56px nav height + 12px bottom + safe area + extra spacing) */ padding-bottom: calc(130px + env(safe-area-inset-bottom, 20px)) !important; overflow-y: auto !important; overscroll-behavior-y: contain !important; overscroll-behavior-x: none !important; -webkit-overflow-scrolling: touch !important; /* Don't force top padding here - let PWA rules handle it */ } /* Browser mode: less top padding since browser chrome already provides spacing */ @media all and (display-mode: browser) { [class*="-main-area"], [id*="-main-area"], .arena-grid { padding-top: 20px !important; } #text-blocs-modal #text-blocs-container #text-blocs-header { top: 0px !important; padding: 10px 16px !important; } #text-blocs-modal #text-blocs-container { padding-top: 56px !important; } #blocspace-header { top: var(--blocspace-shell-top-offset, env(safe-area-inset-top, 0px)) !important; padding: 8px 14px 0 !important; } /* Shop cards: shrink image in browser so Buy button fits on screen */ .moment-card > div:first-of-type { height: 38vh !important; max-height: 340px !important; } /* Stream cards: cap player height in browser so description/footer get room */ .stream-feed-player { flex: 0 0 auto !important; height: clamp(430px, 60dvh, 560px) !important; max-height: 560px !important; } /* AI tab uses flex-column layout (100dvh) — no positional overrides needed. Keep skills menu lifted above browser URL bar + bottom nav. */ #mobile-ai-skill-menu { bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; } #market-main-area > div:nth-child(2) { padding-top: 20px !important; } #market-drawer { padding-top: 0px !important; } #market-drawer > div:first-child { display: flex !important; } #market-drawer #market-drawer-content { padding-top: 0px !important; } #market-drawer #market-drawer-content > div:first-child > div:first-child { padding-top: 0px !important; margin-bottom: 12px !important; } /* Bytes-specific browser-mode rules live in the .browser-bytes-layout block further down — do not add bytes overrides here, it creates competing systems and whack-a-mole regressions between modes. */ } .mobile-blocspace-comms-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; } .mobile-blocspace-dashboard { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 22px; } .mobile-blocspace-hero { display: flex; align-items: center; gap: 13px; min-width: 0; } .mobile-blocspace-hero-avatar { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--surface-color) 86%, var(--primary-color) 14%); border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent); display: grid; place-items: center; color: var(--text-primary); font-size: 20px; font-weight: 950; } .mobile-blocspace-hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .mobile-blocspace-hero-copy { min-width: 0; flex: 1; } .mobile-blocspace-kicker { color: var(--text-secondary); font-size: 11px; font-weight: 800; letter-spacing: 0; } .mobile-blocspace-owner-name { margin-top: 4px; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-primary); font-size: clamp(28px, 9vw, 38px); line-height: 0.92; font-weight: 950; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-blocspace-owner-name i { flex: 0 0 auto; color: var(--primary-color); font-size: 18px; } .mobile-blocspace-hero-subtitle { display: none; margin-top: 7px; color: var(--text-secondary); font-size: 12px; font-weight: 750; } .mobile-blocspace-metrics { display: none; grid-auto-flow: column; grid-auto-columns: minmax(144px, 44%); gap: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mobile-blocspace-brief { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .mobile-blocspace-brief-card { min-height: 62px; appearance: none; -webkit-appearance: none; text-align: left; border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--surface-color) 62%, var(--background-color) 38%); padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; } .mobile-blocspace-brief-card span { color: var(--text-secondary); font-size: 9px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .mobile-blocspace-brief-card strong { color: var(--text-primary); font-size: 23px; line-height: 0.95; font-weight: 950; letter-spacing: 0; } .mobile-blocspace-brief-card em { display: block; min-height: 13px; color: var(--primary-color); font-size: 10px; line-height: 1.25; font-style: normal; font-weight: 850; } .mobile-blocspace-metrics::-webkit-scrollbar { display: none; } .mobile-blocspace-metric { min-height: 112px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent); background: color-mix(in srgb, var(--surface-color) 78%, transparent); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; } .mobile-blocspace-metric i { color: var(--primary-color); font-size: 18px; } .mobile-blocspace-metric span { display: block; color: var(--text-secondary); font-size: 9px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .mobile-blocspace-metric strong { display: block; margin-top: 6px; color: var(--text-primary); font-size: 23px; line-height: 1; font-weight: 950; letter-spacing: 0; } .mobile-blocspace-section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .mobile-blocspace-section-title-row h3 { margin: 0; color: var(--text-primary); font-size: 14px; line-height: 1; font-weight: 950; letter-spacing: 0; } .mobile-blocspace-section-title-row button { border: 0; background: transparent; color: var(--primary-color); font-size: 11px; font-weight: 850; cursor: pointer; padding: 0; } .mobile-blocspace-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mobile-blocspace-quick-actions::-webkit-scrollbar { display: none; } .mobile-blocspace-quick-action { min-height: 58px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--surface-color) 70%, transparent); color: var(--text-primary); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; cursor: pointer; text-align: left; } .mobile-blocspace-quick-action i { color: var(--primary-color); font-size: 15px; } .mobile-blocspace-quick-action span { color: var(--text-primary); font-size: 11px; font-weight: 850; line-height: 1; } .mobile-blocspace-quick-action.is-active { background: color-mix(in srgb, var(--primary-color) 16%, var(--surface-color) 54%); } .mobile-blocspace-home-nav { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .mobile-blocspace-home-nav button { min-height: 64px; border: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent); border-radius: 15px; background: transparent; color: var(--text-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: 10px; font-weight: 850; cursor: pointer; } .mobile-blocspace-home-nav button i { color: var(--primary-color); font-size: 16px; } .mobile-blocspace-inline-stack { display: none; flex-direction: column; gap: 0; border-top: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent); } .mobile-blocspace-inline-card { min-height: 64px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 11%, transparent); background: transparent; color: var(--text-primary); padding: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: left; cursor: pointer; } .mobile-blocspace-inline-card > i { color: var(--primary-color); font-size: 15px; text-align: center; } .mobile-blocspace-inline-card span { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .mobile-blocspace-inline-card strong { color: var(--text-primary); font-size: 14px; font-weight: 900; line-height: 1; } .mobile-blocspace-inline-card em { color: var(--text-secondary); font-size: 10px; font-style: normal; font-weight: 750; line-height: 1.35; } .mobile-blocspace-inline-card b { color: var(--primary-color); font-size: 10px; font-weight: 850; } .mobile-blocspace-main-panel { min-height: 260px; } .mobile-blocspace-main-panel > [data-mobile-blocspace-panel] { display: none; } .mobile-blocspace-main-panel > [data-mobile-blocspace-panel].is-active { display: block; } .mobile-blocspace-panel-placeholder { padding: 22px 0; color: var(--text-secondary); font-size: 12px; font-weight: 750; line-height: 1.45; } .mobile-blocspace-inline-summary { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 20px; border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent); } .mobile-blocspace-inline-summary strong { color: var(--text-primary); font-size: 28px; line-height: 0.96; font-weight: 950; letter-spacing: 0; } .mobile-blocspace-inline-summary span { color: var(--text-secondary); font-size: 12px; font-weight: 750; line-height: 1.4; } .mobile-blocspace-inline-summary button { align-self: flex-start; height: 34px; border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent); border-radius: 999px; background: transparent; color: var(--text-primary); padding: 0 13px; font-size: 11px; font-weight: 850; cursor: pointer; } .mobile-blocspace-home-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; border-top: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mobile-blocspace-home-modules::-webkit-scrollbar { display: none; } .mobile-blocspace-home-module { min-width: 0; min-height: 44px; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--surface-color) 58%, transparent); color: var(--text-primary); padding: 0 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mobile-blocspace-home-module-icon { width: 17px; flex: 0 0 17px; color: var(--primary-color); display: grid; place-items: center; font-size: 14px; line-height: 1; } .mobile-blocspace-home-module-copy { min-width: 0; display: block; } .mobile-blocspace-home-module-copy strong { display: block; min-width: 0; color: var(--text-primary); font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-blocspace-home-module-copy span { display: none; } .mobile-blocspace-home-module button { display: none; } .mobile-blocspace-shell-header { position: fixed !important; top: var(--blocspace-shell-top-offset, env(safe-area-inset-top, 0px)) !important; left: 0 !important; right: 0 !important; z-index: 10007 !important; background: var(--background-color); border-bottom: none; padding: 8px 16px 0 16px !important; margin: 0 !important; transform: none !important; box-shadow: none; } .mobile-blocspace-header-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; min-height: 40px; } .mobile-blocspace-header-button { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 0; box-shadow: none; color: var(--text-primary); padding: 0; margin: 0; cursor: pointer; font-size: 18px; } .mobile-blocspace-title-stack { min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; } .mobile-blocspace-title-avatar { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: color-mix(in srgb, var(--text-primary) 9%, transparent); background-size: cover; background-position: center; color: var(--text-primary); font-size: 11px; font-weight: 950; line-height: 1; } .mobile-blocspace-title-avatar.has-image { border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent); } .mobile-blocspace-title-main { font-size: 14px; line-height: 1; font-weight: 900; letter-spacing: 0.02em; text-transform: none; color: var(--text-primary); max-width: 176px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-blocspace-nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.18); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 10008; } .mobile-blocspace-nav-backdrop.is-open { opacity: 1; pointer-events: auto; } .mobile-blocspace-nav-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 82vw); background: var(--background-color); border-right: 1px solid var(--border-color); transform: translateX(-100%); transition: transform 0.22s ease; z-index: 10009; display: flex; flex-direction: column; padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 18px; } .mobile-blocspace-nav-drawer.is-open { transform: translateX(0); } .mobile-blocspace-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .mobile-blocspace-nav-title { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); } .mobile-blocspace-nav-close { width: 34px; height: 34px; border: 1px solid var(--border-color); border-radius: 999px; background: transparent; color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; } .mobile-blocspace-nav-list { display: flex; flex-direction: column; gap: 8px; } .mobile-blocspace-nav-item { width: 100%; min-height: 44px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; font-size: 14px; font-weight: 800; cursor: pointer; text-align: left; } .mobile-blocspace-nav-item i { width: 16px; text-align: center; color: var(--text-secondary); font-size: 14px; } .mobile-blocspace-nav-item-label { flex: 1; } .mobile-blocspace-nav-item.is-active { background: rgba(255,255,255,0.06); border-color: var(--border-color); } .mobile-blocspace-nav-item.is-active i, .mobile-blocspace-nav-item.is-active .mobile-blocspace-nav-item-label { color: var(--text-primary); } .mobile-blocspace-filter-rail { display: flex; align-items: center; gap: 20px; margin: 0 0 18px; padding: 0 0 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .mobile-blocspace-filter-rail::-webkit-scrollbar { display: none; } .blocspace-notif-filter-pill { appearance: none; -webkit-appearance: none; position: relative; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 0 12px !important; color: var(--text-secondary) !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer; white-space: nowrap; transition: color 0.2s ease; flex: 0 0 auto; box-shadow: none !important; outline: none !important; } .blocspace-notif-filter-pill::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; transition: background 0.2s ease; } .blocspace-notif-filter-pill.is-active { color: var(--text-primary) !important; font-weight: 800 !important; } .blocspace-notif-filter-pill.is-active::after { background: var(--text-primary); } .mobile-blocspace-subsection { display: flex; flex-direction: column; gap: 8px; } .mobile-blocspace-activity-list { display: flex; flex-direction: column; gap: 0; } .mobile-blocspace-activity-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 15px 0; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent); background: transparent; cursor: pointer; transition: opacity 0.18s ease; } .mobile-blocspace-activity-row:active { opacity: 0.72; } .mobile-blocspace-activity-thumb { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; background: transparent; } .mobile-blocspace-activity-thumb img { width: 100%; height: 100%; object-fit: cover; } .mobile-blocspace-activity-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 1px; } .mobile-blocspace-activity-title { color: var(--text-primary); font-size: 15px; line-height: 1.28; font-weight: 850; letter-spacing: -0.01em; overflow-wrap: break-word; } .mobile-blocspace-activity-subtitle { color: var(--text-secondary); font-size: 12px; line-height: 1.45; font-weight: 700; overflow-wrap: break-word; } .mobile-blocspace-activity-meta { min-width: 52px; text-align: right; color: var(--text-secondary); font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: 0.02em; padding-top: 3px; white-space: nowrap; } #activity-filter-pills::-webkit-scrollbar { display: none; } .mobile-blocspace-activity-unread-dot { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 0 2px var(--background-color); } .mobile-blocspace-subsection-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 6px; border-bottom: none; } .mobile-blocspace-subsection-head strong { font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.04em; color: var(--text-primary); } .mobile-blocspace-subsection-head span { font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); } .mobile-blocspace-comms-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; } .mobile-blocspace-comms-title { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .mobile-blocspace-comms-title strong { color: var(--text-primary); font-size: 20px; line-height: 1; font-weight: 950; letter-spacing: 0; } .mobile-blocspace-comms-title span { color: var(--text-secondary); font-size: 11px; line-height: 1; font-weight: 850; } .mobile-blocspace-comms-actions { display: inline-flex; align-items: center; gap: 9px; } .mobile-blocspace-comms-action { min-width: 0; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent); border-radius: 999px; background: transparent; color: var(--text-primary); padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; letter-spacing: 0; cursor: pointer; box-shadow: none; text-transform: uppercase; } .mobile-blocspace-comms-action span { display: none; } .mobile-blocspace-comms-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 16px; padding: 0; border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent); border-radius: 999px; background: transparent; overflow: hidden; } .mobile-blocspace-comms-tab { height: 38px; border: 0; border-radius: 0; background: transparent; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 900; cursor: pointer; } .mobile-blocspace-comms-tab.is-active { background: color-mix(in srgb, var(--text-primary) 9%, transparent); color: var(--text-primary); } .mobile-blocspace-comms-pane { display: none; } .mobile-blocspace-comms-pane.is-active { display: block; } .mobile-blocspace-mail-shell { display: flex; flex-direction: column; gap: 12px; } .mobile-blocspace-mail-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px; gap: 8px; align-items: center; margin-bottom: 2px; } .mobile-blocspace-mail-account { width: 100%; height: 40px; min-width: 0; border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent); border-radius: 999px; background: transparent; color: var(--text-primary); padding: 0 12px; font-size: 12px; font-weight: 850; outline: none; } .mobile-blocspace-mail-icon-btn { width: 40px; height: 40px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent); background: transparent; color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .mobile-blocspace-mail-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent); border-radius: 999px; background: transparent; overflow: hidden; } .mobile-blocspace-mail-filter { height: 34px; border: 0; border-radius: 0; background: transparent; color: var(--text-secondary); font-size: 11px; font-weight: 900; cursor: pointer; } .mobile-blocspace-mail-filter.is-active { background: color-mix(in srgb, var(--text-primary) 9%, transparent); color: var(--text-primary); } .mobile-blocspace-mail-status { min-height: 18px; color: var(--text-secondary); font-size: 11px; font-weight: 800; } .mobile-blocspace-mail-row { width: 100%; min-height: 74px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 13px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent); background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; } .mobile-blocspace-mail-avatar { width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent); color: var(--text-primary); font-size: 12px; font-weight: 950; } .mobile-blocspace-mail-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .mobile-blocspace-mail-from, .mobile-blocspace-mail-subject, .mobile-blocspace-mail-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-blocspace-mail-from { font-size: 13px; font-weight: 900; color: var(--text-primary); } .mobile-blocspace-mail-account-line { font-size: 9px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); } .mobile-blocspace-mail-subject { font-size: 12px; font-weight: 850; color: var(--text-primary); } .mobile-blocspace-mail-preview { font-size: 11px; line-height: 1.3; color: var(--text-secondary); } .mobile-blocspace-mail-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; color: var(--text-secondary); font-size: 10px; font-weight: 850; white-space: nowrap; } .mobile-blocspace-mail-unread { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--text-primary); color: var(--background-color); font-size: 9px; font-weight: 950; } .mobile-blocspace-mail-reader { position: fixed; inset: 0; z-index: 130040; display: none; background: var(--background-color); color: var(--text-primary); overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-blocspace-mail-reader.is-open { display: block; } .mobile-blocspace-mail-reader-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px; background: color-mix(in srgb, var(--background-color) 92%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent); backdrop-filter: blur(18px); } .mobile-blocspace-mail-reader-action { width: 38px; height: 38px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent); background: color-mix(in srgb, var(--surface-color) 30%, transparent); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .mobile-blocspace-mail-reader-body { padding: 18px 16px 120px; } .mobile-blocspace-mail-reader-from { color: var(--text-secondary); font-size: 12px; font-weight: 850; margin-bottom: 8px; } .mobile-blocspace-mail-reader-subject { font-size: 26px; line-height: 1.04; font-weight: 950; letter-spacing: 0; margin-bottom: 8px; } .mobile-blocspace-mail-reader-date { color: var(--text-secondary); font-size: 11px; font-weight: 800; margin-bottom: 18px; } .mobile-blocspace-mail-reader-content { color: var(--text-primary); font-size: 15px; line-height: 1.65; word-break: break-word; } .mobile-blocspace-mail-reader-content * { max-width: 100%; } .mobile-blocspace-mail-reader-content img { max-width: 100%; height: auto; border-radius: 10px; } #mobile-blocspace-comms-pane-calls .mobile-blocspace-list { margin-top: 12px; } .mobile-blocspace-comms-tools { min-height: 48px; display: flex; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--surface-color) 28%, transparent); padding: 0 13px; } .mobile-blocspace-comms-tools input { flex: 1; min-width: 0; height: 46px !important; border: none !important; border-radius: 0 !important; background: transparent !important; color: var(--text-primary) !important; padding: 0 !important; font-size: 14px !important; font-weight: 850 !important; outline: none !important; box-shadow: none !important; -webkit-text-fill-color: var(--text-primary) !important; border-bottom: none !important; -webkit-appearance: none !important; appearance: none !important; } .mobile-blocspace-comms-tools input::placeholder { color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; opacity: 0.82; } .mobile-blocspace-call-tools, .mobile-blocspace-call-tools input, #blocspace-call-search { background: transparent !important; background-color: transparent !important; box-shadow: none !important; -webkit-box-shadow: none !important; filter: none !important; } .mobile-blocspace-call-search { min-height: 52px; display: flex; align-items: center; gap: 12px; border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--surface-color) 24%, transparent); padding: 0 16px; color: var(--text-primary); } .mobile-blocspace-call-search i { color: var(--text-secondary); font-size: 14px; } .mobile-blocspace-call-search-field { flex: 1; min-width: 0; min-height: 24px; color: var(--text-primary); font-size: 15px; font-weight: 850; line-height: 1.25; outline: none; white-space: nowrap; overflow: hidden; } .mobile-blocspace-call-search-field:empty::before { content: attr(data-placeholder); color: var(--text-secondary); opacity: 0.82; pointer-events: none; } .mobile-blocspace-comms-tools button { height: 32px; border: none; border-radius: 0; background: transparent; color: var(--text-primary); padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 900; text-transform: uppercase; cursor: pointer; } .mobile-blocspace-list { display: flex; flex-direction: column; gap: 0; } .mobile-blocspace-comms-row { width: 100%; min-height: 66px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border: 0; border-radius: 0; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent); } .mobile-blocspace-dm-row { min-height: 78px; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 12px 0; } .mobile-blocspace-avatar { width: 46px; height: 46px; border-radius: 14px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--text-primary); font-size: 13px; font-weight: 900; flex-shrink: 0; } .mobile-blocspace-dm-row .mobile-blocspace-avatar { width: 56px; height: 56px; border-radius: 17px; background: transparent; } .mobile-blocspace-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .mobile-blocspace-row-copy { min-width: 0; display: block; } .mobile-blocspace-row-copy strong, .mobile-blocspace-row-copy em { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-blocspace-row-copy strong { color: var(--text-primary); font-size: 14px; font-weight: 900; letter-spacing: -0.02em; } .mobile-blocspace-row-copy em { margin-top: 4px; color: var(--text-secondary); font-size: 11px; font-style: normal; font-weight: 750; } .mobile-blocspace-row-meta { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; justify-self: end; color: var(--text-secondary); font-size: 10px; font-weight: 800; } .mobile-blocspace-row-meta time { color: var(--text-secondary); font-size: 10px; font-weight: 800; white-space: nowrap; } .mobile-blocspace-row-meta b { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--text-primary); color: var(--background-color); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; } .mobile-blocspace-dm-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .mobile-blocspace-dm-topline, .mobile-blocspace-dm-previewline { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .mobile-blocspace-dm-identity { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; } .mobile-blocspace-dm-name, .mobile-blocspace-dm-ticker, .mobile-blocspace-dm-preview, .mobile-blocspace-dm-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-blocspace-dm-name { color: var(--text-primary); font-size: 16px; font-weight: 900; letter-spacing: 0; } .mobile-blocspace-dm-ticker { color: var(--text-secondary); font-size: 11px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; flex: 0 1 auto; } .mobile-blocspace-dm-time { color: var(--text-secondary); font-size: 11px; font-weight: 850; flex-shrink: 0; } .mobile-blocspace-dm-preview { color: var(--text-secondary); font-size: 13px; font-weight: 800; line-height: 1.3; flex: 1 1 auto; } .mobile-blocspace-dm-unread { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--text-primary); color: var(--background-color); font-size: 10px; font-weight: 900; flex-shrink: 0; } .mobile-blocspace-action { width: 34px; height: 34px; border-radius: 0; background: transparent; color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; justify-self: end; font-size: 13px; opacity: 0.76; } .mobile-blocspace-empty { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px 12px; text-align: center; color: var(--text-secondary); } .mobile-blocspace-empty i { width: 52px; height: 52px; border-radius: 0; background: transparent; color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } .mobile-blocspace-empty strong { color: var(--text-primary); font-size: 17px; line-height: 1; font-weight: 900; letter-spacing: -0.03em; } .mobile-blocspace-empty span { color: var(--text-secondary); font-size: 12px; font-weight: 750; } .mobile-blocspace-quick-link-card { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 16px; margin-bottom: 12px; border-bottom: 1px solid var(--border-color); } .mobile-blocspace-quick-link-card span { display: block; color: var(--text-secondary); font-size: 10px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } .mobile-blocspace-quick-link-card strong, .mobile-blocspace-quick-link-card em { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-blocspace-quick-link-card strong { margin-top: 5px; color: var(--text-primary); font-size: 15px; font-weight: 900; } .mobile-blocspace-quick-link-card em { margin-top: 4px; color: var(--text-secondary); font-size: 11px; font-style: normal; font-weight: 750; } .mobile-blocspace-quick-link-card > div:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mobile-blocspace-quick-link-card button { height: 38px; border: 0; border-radius: 0; background: transparent; color: var(--text-primary); font-size: 11px; font-weight: 900; text-transform: uppercase; cursor: pointer; } /* Performance optimizations for smooth scrolling - exclude bytes which has its own scroll system */ [class*="-main-area"]:not(#bytes-main-area), [id*="-main-area"]:not(#bytes-main-area), .arena-grid { contain: layout style paint !important; } /* Remove all padding from embed containers */ .twitter-embed-container, .instagram-embed-container, [class*="embed-container"], [class*="embed-responsive"], .fullscreen-card > div { padding: 0 !important; padding-top: 0 !important; margin: 0 !important; margin-top: 0 !important; } /* Embedded content fits within card */ .fullscreen-card iframe { margin-top: 0 !important; padding-top: 0 !important; width: 100% !important; height: 100% !important; max-height: calc(100vh - 50px) !important; object-fit: contain !important; } .fullscreen-card blockquote { margin: 0 !important; padding: 0 !important; max-height: none !important; overflow: visible !important; } .twitter-tweet, .instagram-media { margin: 0 auto !important; padding: 0 !important; max-height: none !important; overflow: visible !important; display: block !important; } /* Twitter embeds - fullscreen like YouTube */ .bytes-card-container:has(.twitter-tweet) .bytes-header { display: none !important; } /* Twitter wrapper should be fullscreen with safe area */ .bytes-media-wrapper:has(.twitter-tweet) { top: env(safe-area-inset-top, 0px) !important; height: calc(100% - env(safe-area-inset-top, 0px)) !important; } .bytes-media-wrapper iframe[src*="bandlab.com"] { width: 100% !important; max-width: none !important; height: 100% !important; } /* Twitter embeds fit within card */ .twitter-embed-container { width: 100% !important; height: auto !important; max-height: none !important; max-width: 100% !important; overflow: visible !important; padding: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; } /* Ensure all card content fits without scrolling */ .fullscreen-card { width: 100vw !important; max-width: 100vw !important; } /* Hide Twitter blockquote text before it loads - prevent text flash */ .twitter-tweet { opacity: 0; transition: opacity 0.3s ease; } .twitter-tweet.twitter-tweet-rendered, iframe.twitter-tweet-rendered { opacity: 1 !important; } /* Bloc byte fullscreen - make X/Twitter embeds full width */ #bloc-byte-fullscreen .twitter-tweet, #bloc-byte-fullscreen .twitter-tweet-rendered, #bloc-byte-fullscreen iframe.twitter-tweet-rendered, #bytes-fullscreen-overlay .twitter-tweet, #bytes-fullscreen-overlay .twitter-tweet-rendered, #bytes-fullscreen-overlay iframe.twitter-tweet-rendered { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } #bloc-byte-fullscreen [data-card-id], #bytes-fullscreen-overlay [data-card-id] { height: calc(100dvh + env(safe-area-inset-top, 0px)) !important; min-height: calc(100dvh + env(safe-area-inset-top, 0px)) !important; max-height: calc(100dvh + env(safe-area-inset-top, 0px)) !important; } #bloc-byte-fullscreen [data-embed-scope], #bytes-fullscreen-overlay [data-embed-scope] { width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; display: flex !important; align-items: stretch !important; justify-content: stretch !important; overflow: hidden !important; background: #000000 !important; touch-action: pan-y !important; } #bloc-byte-fullscreen .bytes-card-container, #bloc-byte-fullscreen .bytes-card-shell, #bytes-fullscreen-overlay .bytes-card-container, #bytes-fullscreen-overlay .bytes-card-shell { width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; background: #000000 !important; border-radius: 0 !important; } #bloc-byte-fullscreen .bytes-card-shell, #bytes-fullscreen-overlay .bytes-card-shell { display: grid !important; grid-template-rows: 1fr !important; } #bloc-byte-fullscreen .bytes-header, #bloc-byte-fullscreen .bytes-description, #bloc-byte-fullscreen .bytes-engagement-row, #bloc-byte-fullscreen .card-info-overlay, #bytes-fullscreen-overlay .bytes-header, #bytes-fullscreen-overlay .bytes-description, #bytes-fullscreen-overlay .bytes-engagement-row, #bytes-fullscreen-overlay .card-info-overlay { display: none !important; } #bloc-byte-fullscreen .bytes-media-shell, #bloc-byte-fullscreen .bytes-media-wrapper, #bloc-byte-fullscreen .bytes-media-container, #bytes-fullscreen-overlay .bytes-media-shell, #bytes-fullscreen-overlay .bytes-media-wrapper, #bytes-fullscreen-overlay .bytes-media-container { width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #000000 !important; } #bytes-fullscreen-overlay .bytes-media-wrapper, #bytes-fullscreen-overlay .bytes-media-container, #bytes-fullscreen-overlay .bytes-media-shell { pointer-events: none !important; touch-action: pan-y !important; } #bloc-byte-fullscreen .bytes-note-card, #bytes-fullscreen-overlay .bytes-note-card { inset: 0 !important; width: 100% !important; height: 100% !important; padding: 20px !important; background: #000000 !important; } #bloc-byte-fullscreen .bytes-note-card-inner, #bytes-fullscreen-overlay .bytes-note-card-inner { height: 100% !important; border-radius: 0 !important; } #bloc-byte-fullscreen img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; border-radius: 0 !important; pointer-events: none !important; touch-action: pan-y !important; } #bytes-fullscreen-overlay img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; pointer-events: none !important; touch-action: pan-y !important; } #bloc-byte-fullscreen video, #bytes-fullscreen-overlay video { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 0 !important; pointer-events: none !important; touch-action: pan-y !important; background: #000000 !important; } #bloc-byte-fullscreen iframe, #bytes-fullscreen-overlay iframe { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; border: none !important; border-radius: 0 !important; pointer-events: none !important; touch-action: pan-y !important; } /* A website is opened to be used, so it gets the taps back. The rule above makes every embed scenery, which suits a clip you swipe past. A `universal:` byte is a whole page in a frame -- the reason to open it fullscreen is to scroll and click around it, and `pointer-events: none` made it a picture of a website instead. Matched by what the frame is pointed at rather than by a class: the embed markup is built by the shared renderer, which does not mark a universal byte in a way this sheet can see. Anything that is not one of the players we frame ourselves is a page. */ #bloc-byte-fullscreen [data-embed-scope] iframe:not([src*="youtube.com"]):not([src*="youtube-nocookie.com"]):not([src*="w.soundcloud.com"]):not([src*="platform.twitter.com"]):not([src*="tiktok.com"]):not([src*="facebook.com"]) { pointer-events: auto !important; } #bloc-byte-fullscreen [data-embed-scope], #bloc-byte-fullscreen .bytes-media-shell, #bloc-byte-fullscreen .bytes-media-wrapper, #bloc-byte-fullscreen .bytes-media-container { pointer-events: auto !important; } #bloc-byte-fullscreen iframe, #bloc-byte-fullscreen video, #bloc-byte-fullscreen audio { pointer-events: none !important; touch-action: pan-y !important; } #bloc-byte-fullscreen .bloc-byte-video-frame video { pointer-events: auto !important; touch-action: manipulation !important; object-fit: contain !important; } #bloc-byte-fullscreen .bloc-byte-video-frame { border: 0 !important; box-shadow: none !important; } #bloc-byte-fullscreen .bloc-byte-video-frame::after { display: none !important; } .bloc-byte-video-frame { position: relative; width: 100%; height: 100%; background: #000000; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.14); border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(255,255,255,0.06); } .bloc-byte-video-frame video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000000; } .bloc-byte-video-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.04) 46%, rgba(0,0,0,0.34) 100%); z-index: 2; } .bloc-byte-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(54px, 14vw, 78px); height: clamp(54px, 14vw, 78px); border-radius: clamp(16px, 4vw, 23px); border: 1px solid rgba(255,255,255,0.26); background: radial-gradient(circle at 50% 46%, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 58%, rgba(5,7,10,0.34) 100%), linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)); color: rgba(255,255,255,0.98); display: inline-flex; align-items: center; justify-content: center; z-index: 4; pointer-events: auto; overflow: hidden; backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); box-shadow: 0 24px 56px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.16); } .bloc-byte-video-play::before { content: ""; position: absolute; inset: 8%; border-radius: clamp(12px, 3vw, 17px); border: 1.5px solid rgba(255,255,255,0.18); box-shadow: inset 0 0 0 1px rgba(255,102,0,0.18), 0 0 24px rgba(255,102,0,0.16); } .bloc-byte-video-play::after { content: ""; position: absolute; inset: 22%; border-radius: clamp(9px, 2.6vw, 14px); background: linear-gradient(135deg, rgba(255,102,0,0.28), rgba(255,102,0,0.08) 54%, rgba(255,255,255,0.02) 100%); opacity: 0.88; } .bloc-byte-video-play i { position: relative; z-index: 1; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: clamp(20px, 5vw, 27px); transform: translateX(3px); text-shadow: 0 1px 12px rgba(0,0,0,0.35); } .bloc-byte-video-frame.is-playing .bloc-byte-video-play { opacity: 0; } .bloc-byte-video-frame.is-playing .bloc-byte-video-play:active, .bloc-byte-video-frame.is-playing .bloc-byte-video-play:focus-visible { opacity: 1; } .bloc-byte-video-frame.is-video-error video { display: none !important; } .bloc-byte-video-fallback { position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; overflow: hidden; background: #000000; color: #ffffff; text-align: center; } .bloc-byte-video-frame.is-video-error .bloc-byte-video-fallback { display: flex; } .bloc-byte-video-frame.is-video-error .bloc-byte-video-play { display: none; } .bloc-byte-video-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.64; } .bloc-byte-video-fallback-content { position: relative; z-index: 1; display: grid; gap: 7px; max-width: 260px; padding: 16px 18px; border: 1px solid rgba(255,255,255,0.16); border-radius: 18px; background: rgba(0,0,0,0.74); box-shadow: 0 20px 50px rgba(0,0,0,0.34); } .bloc-byte-video-fallback-content strong { font-size: 15px; font-weight: 850; } .bloc-byte-video-fallback-content span { color: rgba(255,255,255,0.72); font-size: 12px; line-height: 1.35; } .bloc-byte-video-source-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(225,48,108,0.18); color: #ffffff; font-size: 12px; font-weight: 850; text-decoration: none; } .bloc-byte-video-source-link i { font-size: 11px; line-height: 1; } .bloc-byte-video-source-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .bloc-byte-video-source-link--corner { position: absolute; right: 12px; bottom: 12px; z-index: 8; min-height: 30px; padding: 0 12px; background: rgba(0,0,0,0.68); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 10px 24px rgba(0,0,0,0.24); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } #bloc-byte-fullscreen iframe[src*="youtube.com"], #bloc-byte-fullscreen iframe[src*="youtube-nocookie.com"], #bloc-byte-fullscreen iframe[src*="youtu.be"], #bloc-byte-fullscreen iframe[src*="w.soundcloud.com"], #bloc-byte-fullscreen iframe[src*="soundcloud.com/player"], #bloc-byte-fullscreen iframe[src*="bandlab.com"], #bloc-byte-fullscreen iframe[src*="player.vimeo.com"], #bloc-byte-fullscreen iframe[data-video-type="youtube"], #bloc-byte-fullscreen iframe[data-video-type="soundcloud"], #bloc-byte-fullscreen iframe[src*="platform.twitter.com"], #bloc-byte-fullscreen iframe[src*="twitter.com"], #bloc-byte-fullscreen iframe[src*="x.com"], #bloc-byte-fullscreen iframe[src*="tiktok.com"], #bloc-byte-fullscreen iframe[src*="facebook.com"], #bloc-byte-fullscreen iframe[src*="fb.watch"], #bytes-fullscreen-overlay iframe[src*="youtube.com"], #bytes-fullscreen-overlay iframe[src*="youtube-nocookie.com"], #bytes-fullscreen-overlay iframe[src*="w.soundcloud.com"], #bytes-fullscreen-overlay iframe[src*="bandlab.com"], #bytes-fullscreen-overlay iframe[src*="player.vimeo.com"], #bytes-fullscreen-overlay iframe[src*="platform.twitter.com"], #bytes-fullscreen-overlay iframe[src*="twitter.com"], #bytes-fullscreen-overlay iframe[src*="x.com"], #bytes-fullscreen-overlay iframe[src*="tiktok.com"], #bytes-fullscreen-overlay iframe[src*="facebook.com"], #bytes-fullscreen-overlay iframe[src*="fb.watch"] { pointer-events: auto !important; touch-action: auto !important; } #bloc-byte-fullscreen [data-embed-scope].bloc-byte-x-embed-scope, #bloc-byte-fullscreen [data-embed-scope]:has(iframe[src*="platform.twitter.com/embed/Tweet"]), #bytes-fullscreen-overlay [data-embed-scope].bloc-byte-x-embed-scope, #bytes-fullscreen-overlay [data-embed-scope]:has(iframe[src*="platform.twitter.com/embed/Tweet"]) { align-items: center !important; justify-content: center !important; padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(134px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box !important; } #bloc-byte-fullscreen .bloc-lazy-iframe--x, #bytes-fullscreen-overlay .bloc-lazy-iframe--x { width: min(550px, calc(100vw - 28px)) !important; max-width: min(550px, calc(100vw - 28px)) !important; height: min(640px, calc(100dvh - 188px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important; max-height: min(640px, calc(100dvh - 188px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important; min-height: 260px !important; margin: auto !important; overflow: hidden !important; border-radius: 18px !important; background: #000000 !important; } #bloc-byte-fullscreen iframe.bloc-twitter-embed-frame, #bloc-byte-fullscreen iframe[src*="platform.twitter.com/embed/Tweet"], #bytes-fullscreen-overlay iframe.bloc-twitter-embed-frame, #bytes-fullscreen-overlay iframe[src*="platform.twitter.com/embed/Tweet"] { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; display: block !important; width: min(550px, calc(100vw - 28px)) !important; max-width: min(550px, calc(100vw - 28px)) !important; height: min(640px, calc(100dvh - 188px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important; max-height: min(640px, calc(100dvh - 188px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important; min-height: 260px !important; margin: auto !important; transform: none !important; zoom: 1 !important; border-radius: 18px !important; background: #000000 !important; } #bloc-byte-engagement-shell { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 130002 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-evenly !important; gap: 8px !important; padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.74) 34%, rgba(0,0,0,0.94)) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; pointer-events: auto !important; } #bloc-byte-engagement-shell button { all: unset !important; flex: 1 1 0 !important; min-width: 0 !important; background: rgba(255,255,255,0.08) !important; background-image: none !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.22) !important; outline: none !important; appearance: none !important; -webkit-appearance: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 11px 8px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 600 !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; text-shadow: none !important; cursor: pointer !important; } #bloc-byte-engagement-shell button:active { transform: scale(0.96) !important; } #bloc-byte-engagement-shell button i, #bloc-byte-engagement-shell button span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #bloc-byte-engagement-shell button i { font-size: 20px !important; } #bloc-byte-engagement-shell button span { color: rgba(255, 255, 255, 0.58) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.58) !important; line-height: 1 !important; font-size: 10px !important; font-weight: 760 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } #bloc-byte-fullscreen .bloc-byte-needs-safe-top { padding-top: env(safe-area-inset-top, 0px) !important; } #bloc-byte-fullscreen .bloc-byte-needs-safe-top > [data-embed-scope] { height: calc(100% - env(safe-area-inset-top, 0px)) !important; min-height: calc(100% - env(safe-area-inset-top, 0px)) !important; max-height: calc(100% - env(safe-area-inset-top, 0px)) !important; } #bloc-byte-topbar { position: fixed; display: none !important; left: 0; right: 0; top: 0; z-index: 130003; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 12px; pointer-events: auto; background: linear-gradient(180deg, rgba(0,0,0,0.86), rgba(0,0,0,0.52) 62%, transparent); color: #ffffff; } .bloc-byte-top-btn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.10); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .bloc-byte-top-btn i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 14px; } .bloc-byte-top-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; } .bloc-byte-top-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; } #bloc-byte-platform-current { width: 22px; height: 22px; border-radius: 8px; display: none !important; align-items: center; justify-content: center; flex: 0 0 22px; color: #ffffff; font-size: 10px; } #bloc-byte-platform-current i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #bloc-byte-title-current { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 900; color: #ffffff; } #bloc-byte-meta-current { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(255,255,255,0.68); font-size: 11px; font-weight: 750; } #bloc-byte-index-current { min-width: 42px; height: 28px; padding: 0 9px; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.84); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 850; flex: 0 0 auto; } #bytes-feed-fullscreen-engagement-shell { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 130002 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-evenly !important; gap: 0 !important; padding: 14px 10px calc(16px + env(safe-area-inset-bottom, 0px)) !important; background: #000000 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: auto !important; } #bytes-feed-fullscreen-engagement-shell button { all: unset !important; flex: 1 1 0 !important; min-width: 0 !important; background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; outline: none !important; appearance: none !important; -webkit-appearance: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 12px 8px !important; border-radius: 0 !important; font-size: 15px !important; font-weight: 600 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; cursor: pointer !important; } #bytes-feed-fullscreen-engagement-shell button i, #bytes-feed-fullscreen-engagement-shell button span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #bytes-feed-fullscreen-engagement-shell button i { font-size: 20px !important; } #bytes-feed-fullscreen-engagement-shell button span { color: rgba(255, 255, 255, 0.58) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.58) !important; line-height: 1 !important; font-size: 10px !important; font-weight: 760 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } body.bloc-byte-fullscreen-open::before { opacity: 0 !important; } body.bytes-feed-fullscreen-open::before { opacity: 0 !important; } html.bloc-byte-fullscreen-open, body.bloc-byte-fullscreen-open, html.bytes-feed-fullscreen-open, body.bytes-feed-fullscreen-open { background: #000000 !important; } /* NUCLEAR OVERRIDE - Force light-accent gradient on nav tabs */ html[data-theme="light-accent"] .mobile-nav-tab, html[data-theme="light-accent"] body .mobile-nav-tab, body[data-theme="light-accent"] .mobile-nav-tab, [data-theme="light-accent"] .mobile-nav-tab { background: linear-gradient(135deg, var(--accent-color), var(--primary-color), var(--tertiary-color)) !important; background-attachment: fixed !important; } html[data-theme="light-accent"] .mobile-nav-tab.active, html[data-theme="light-accent"] body .mobile-nav-tab.active, body[data-theme="light-accent"] .mobile-nav-tab.active, [data-theme="light-accent"] .mobile-nav-tab.active { background: linear-gradient(135deg, var(--accent-color), var(--primary-color), var(--tertiary-color)) !important; background-attachment: fixed !important; } /* Header */ /* Sexy Glassmorphism Header */ .header { background: var(--accent-color); border-bottom: 2px solid var(--primary-color); padding: 16px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .header-title { display: flex; align-items: center; justify-content: space-between; } .ticker-badge { background: var(--primary-color); border: 1px solid var(--primary-color); padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 14px; color: #ffffff; } :root { --mobile-app-header-height: calc(env(safe-area-inset-top, 0px) + 74px); } .mobile-app-header { --mobile-header-bg: var(--background-color); --mobile-header-image: none; --mobile-header-overlay: rgba(0, 0, 0, 0); position: fixed; top: 0; left: 0; right: 0; z-index: 10020; height: var(--mobile-app-header-height); padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 0; box-sizing: border-box; background: var(--mobile-header-bg); border-bottom: 0; color: var(--text-primary); pointer-events: none; overflow: visible; isolation: isolate; } .mobile-app-header::before, .mobile-app-header::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .mobile-app-header::before { z-index: 0; background-image: var(--mobile-header-image); background-size: cover; background-position: center; } .mobile-app-header::after { z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0.42) 100%), var(--mobile-header-overlay); } .mobile-app-header > * { position: relative; z-index: 2; } .mobile-app-header.has-custom-background { border-bottom-color: transparent; box-shadow: none; color: #ffffff; overflow: visible; } .mobile-app-header.has-custom-background::before, .mobile-app-header.has-custom-background::after { bottom: -8px; } .mobile-app-header.has-custom-background .mobile-app-header__name, .mobile-app-header.has-custom-background .mobile-app-header__icon-btn, .mobile-app-header.has-custom-background .mobile-app-header__tab { color: rgba(255, 255, 255, 0.84); -webkit-text-fill-color: currentColor; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.52); } .mobile-app-header.has-custom-background .mobile-app-header__tab.is-active { color: #ffffff; } .mobile-app-header.has-custom-background .mobile-app-header__tab.is-active::after, .mobile-app-header.has-custom-background .mobile-app-header__status-dot { background: var(--primary-color); } .mobile-app-header__brand-row { height: 46px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 8px; pointer-events: auto; position: relative; } .mobile-app-header__brand { min-width: 0; width: min(58vw, 230px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; padding: 0; margin: 0; background: transparent; color: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mobile-app-header__blips-btn, .mobile-app-header__profile-btn { border: 0; padding: 0; margin: 0; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mobile-app-header__blips-btn { position: relative; flex: 0 0 auto; border-radius: 14px; } .mobile-app-header__blips-btn.has-blips::after { content: ""; position: absolute; right: -2px; top: -2px; width: 10px; height: 10px; border-radius: 999px; background: var(--primary-color); box-shadow: 0 0 0 2px var(--background-color); } .mobile-app-header__blips-btn:active { transform: scale(0.96); } .mobile-app-header__profile-btn { min-width: 0; flex: 0 1 auto; max-width: min(38vw, 170px); display: flex; align-items: center; text-align: center; justify-content: center; text-decoration: none; box-shadow: none; outline: none; overflow: hidden; } .mobile-app-header__logo { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; overflow: hidden; display: grid; place-items: center; background: transparent; border: 0; color: var(--text-primary); font-size: 18px; font-weight: 900; line-height: 1; box-shadow: none; text-shadow: none; } .mobile-app-header__logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .mobile-app-header__name-wrap { min-width: 0; width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; overflow: hidden; } .mobile-app-header__name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(11px, 3.15vw, 17px); line-height: 1; font-weight: 850; letter-spacing: 0; text-transform: uppercase; text-shadow: none; text-decoration: none; border: 0; } .mobile-app-header__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; grid-column: 3; justify-self: end; min-width: 0; } .mobile-app-header__icon-btn { width: 32px; height: 32px; border-radius: 999px; border: 0; padding: 0; display: grid; place-items: center; position: relative; background: transparent; color: var(--text-primary); cursor: pointer; -webkit-tap-highlight-color: transparent; text-shadow: none; } .mobile-app-header__icon-btn i { font-size: 18px; line-height: 1; } .mobile-app-header__auth-btn { width: 50px; height: 30px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text-primary) 20%, transparent); background: color-mix(in srgb, var(--background-color) 72%, transparent); color: var(--text-primary); display: none; align-items: center; justify-content: center; padding: 0; font-size: 9px; line-height: 1; font-weight: 950; letter-spacing: 0; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-app-header__add-app-btn { height: 30px; min-width: 88px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text-primary) 16%, transparent); background: color-mix(in srgb, var(--background-color) 78%, transparent); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 9px; line-height: 1; font-weight: 950; letter-spacing: 0; text-transform: uppercase; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .mobile-app-header__add-app-btn.is-added { border-color: color-mix(in srgb, var(--primary-color) 32%, transparent); color: var(--primary-color); } body.mobile-guest-app .mobile-app-header__auth-btn { display: inline-flex; } .mobile-app-header__guest-theme-btn { display: none; } body.mobile-guest-app .mobile-app-header__guest-theme-btn { display: none !important; } body.mobile-guest-app .mobile-app-header__guest-menu-only { display: none !important; } body.mobile-guest-app .mobile-app-header__settings-only { display: none !important; } body.mobile-guest-app .mobile-app-header__owner-only { display: none !important; } body.mobile-guest-app .mobile-app-header__name { font-size: clamp(15px, 4vw, 19px); } @media (max-width: 390px) { .mobile-app-header__brand-row { gap: 10px; } .mobile-app-header__logo { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; background: color-mix(in srgb, var(--text-primary) 9%, transparent); border: 0; box-shadow: none; } .mobile-app-header__actions { gap: 4px; } .mobile-app-header__icon-btn { width: 32px; height: 32px; } .mobile-app-header__icon-btn i { font-size: 18px; } .mobile-app-header__auth-btn { width: 48px; height: 29px; padding: 0; font-size: 8px; } .mobile-app-header__name { max-width: none; font-size: clamp(15px, 4vw, 18px); } body.mobile-guest-app .mobile-app-header__name { font-size: 16px; } } @media (max-width: 360px) { .mobile-app-header { padding-left: 12px; padding-right: 12px; } .mobile-app-header__brand-row { gap: 8px; } .mobile-app-header__brand { gap: 8px; } .mobile-app-header__logo { width: 30px; height: 30px; flex-basis: 30px; border-radius: 999px; background: transparent; border: 0; box-shadow: none; } .mobile-app-header__name-wrap { gap: 5px; } .mobile-app-header__name { font-size: 16px; } .mobile-app-header__icon-btn { width: 28px; height: 28px; } .mobile-app-header__icon-btn i { font-size: 17px; } .mobile-app-header__auth-btn { width: 44px; height: 28px; padding: 0; font-size: 8px; } body.mobile-guest-app .mobile-app-header__auth-btn { font-size: 8px; } body.mobile-guest-app .mobile-app-header__name { font-size: 14px; } } .mobile-app-header__status-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 999px; background: var(--primary-color); box-shadow: 0 0 0 2px var(--background-color); display: none; } .mobile-app-header__status-dot.is-visible, .mobile-app-header__icon-btn.has-news .mobile-app-header__status-dot { display: block; } .mobile-app-header__tabs { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; pointer-events: none; background: transparent; border: 0; mask-image: none; -webkit-mask-image: none; } .mobile-app-header__tabs::-webkit-scrollbar { display: none; } .mobile-app-header__tab { height: 42px; min-width: max-content; border: 0; border-radius: 0; padding: 0 0 5px; margin: 0; background: transparent; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative; font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: 0; text-transform: uppercase; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; text-shadow: none; } .mobile-app-header__tab i { font-size: 16px; line-height: 1; } .mobile-app-header__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 999px; background: transparent; } .mobile-app-header__tab.is-active { color: var(--primary-color); } .mobile-app-header__tab.is-active::after { background: var(--primary-color); } .mobile-app-header__more { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; z-index: 3; grid-column: 1; justify-self: start; margin-right: 0; } .mobile-app-header__more-btn { width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent); border-radius: 13px; background: linear-gradient(180deg, color-mix(in srgb, var(--background-color) 88%, transparent), color-mix(in srgb, var(--text-primary) 5%, transparent)); color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); display: grid; place-items: center; font-size: 17px; line-height: 1; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.09); } .mobile-app-header__more.has-active-tab .mobile-app-header__more-btn, .mobile-app-header__more.is-open .mobile-app-header__more-btn { color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 14%, var(--background-color)), color-mix(in srgb, var(--primary-color) 7%, var(--background-color))); border-color: color-mix(in srgb, var(--primary-color) 18%, transparent); } .mobile-app-header__more-menu { --mobile-more-menu-bg: rgba(255, 255, 255, 0.94); --mobile-more-menu-text: #111111; --mobile-more-menu-muted: rgba(17, 17, 17, 0.52); --mobile-more-menu-icon-bg: rgba(17, 17, 17, 0.06); position: fixed; left: 16px; top: calc(env(safe-area-inset-top, 0px) + 72px); width: 224px; max-width: calc(100vw - 32px); display: none; grid-template-columns: 1fr; gap: 3px; padding: 8px; border-radius: 22px; background: var(--mobile-more-menu-bg) !important; border: 1px solid color-mix(in srgb, var(--mobile-more-menu-text) 8%, transparent); box-shadow: 0 18px 54px rgba(15, 23, 42, 0.18), 0 1px 0 rgba(255, 255, 255, 0.48) inset; backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); z-index: 2147483000; } .mobile-app-header__more.is-open .mobile-app-header__more-menu { display: grid; } .mobile-app-header__more.is-open::before { content: ""; position: fixed; inset: 0; z-index: 2147482999; pointer-events: none; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(3px) saturate(104%); -webkit-backdrop-filter: blur(3px) saturate(104%); } .mobile-app-header__more-item { width: 100%; height: 42px; border: 0; border-radius: 15px; background: transparent; color: var(--mobile-more-menu-text) !important; -webkit-text-fill-color: var(--mobile-more-menu-text) !important; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; padding: 0 10px; font-size: 12px; font-weight: 900; line-height: 1; text-transform: uppercase; white-space: nowrap; text-align: left; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset; } .mobile-app-header__more-title { display: block; padding: 7px 10px 5px; color: var(--mobile-more-menu-muted) !important; -webkit-text-fill-color: var(--mobile-more-menu-muted) !important; font-size: 9px; font-weight: 950; line-height: 1; letter-spacing: 0; text-transform: uppercase; } .mobile-app-header__more-item i { width: 28px; height: 28px; min-width: 28px; border-radius: 11px; background: var(--mobile-more-menu-icon-bg); color: var(--mobile-more-menu-text) !important; -webkit-text-fill-color: var(--mobile-more-menu-text) !important; display: grid; place-items: center; text-align: center; font-size: 13px; } .mobile-app-header__more-item.is-active { height: 42px; flex-direction: row; justify-content: flex-start; padding: 0 10px; text-align: left; font-size: 12px; color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; background: color-mix(in srgb, var(--primary-color) 10%, transparent); } .mobile-app-header__more-item.is-active::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-radius: 999px; background: var(--primary-color); } .mobile-app-header__more-item.is-active i { background: transparent; color: currentColor; -webkit-text-fill-color: currentColor; } .mobile-app-header__more-item span { color: inherit !important; -webkit-text-fill-color: currentColor !important; } html[data-theme="dark"] .mobile-app-header__more-menu, body[data-theme="dark"] .mobile-app-header__more-menu, html[data-theme="dark-accent"] .mobile-app-header__more-menu, body[data-theme="dark-accent"] .mobile-app-header__more-menu { --mobile-more-menu-bg: rgba(12, 12, 12, 0.94); --mobile-more-menu-text: #ffffff; --mobile-more-menu-muted: rgba(255, 255, 255, 0.54); --mobile-more-menu-icon-bg: rgba(255, 255, 255, 0.08); background: var(--mobile-more-menu-bg) !important; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 18px 54px rgba(0, 0, 0, 0.36); } #mobile-bytes-tv-shell { --mobile-bytes-tv-top-gap: var(--mobile-app-header-height) !important; } #arena-grid, #bytes-main-area, #virtual-main-area, #market-main-area, #shop-main-area, #booking-main-area, #stream-main-area, #ai-main-area, #apps-main-area { padding-top: var(--mobile-app-header-height) !important; } #market-main-area, #shop-main-area, #booking-main-area, #stream-main-area, #ai-main-area, #apps-main-area { scroll-padding-top: var(--mobile-app-header-height); } #bytes-main-area { padding-top: 0 !important; } body.bloc-byte-fullscreen-open .mobile-app-header, body.bytes-feed-fullscreen-open .mobile-app-header { display: none; } /* GLOBAL BOTTOM PADDING FOR ALL CONTENT TO CLEAR MOBILE NAV */ /* Ensures content never goes behind the mobile navigation */ /* REMOVED - Content should extend to bottom, nav has higher z-index */ /* .enter-body, #shop-main-area, #stream-main-area, #ai-main-area, #market-main-area, #bytes-main-area, #booking-main-area, .arena-grid, [class*="-main-area"], [id*="-main-area"] { padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 50px + 10px) !important; } */ /* PWA mode - nav is closer to bottom */ /* REMOVED - Content should extend to bottom @media (display-mode: standalone) { .enter-body, #shop-main-area, #stream-main-area, #ai-main-area, #market-main-area, #bytes-main-area, #booking-main-area, .arena-grid, [class*="-main-area"], [id*="-main-area"] { padding-bottom: calc(20px + 50px + 20px + env(safe-area-inset-bottom)) !important; } } */ .mobile-nav-tab { position: relative; z-index: 1001; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 12px; min-width: 25vw; /* Show exactly 4 items */ width: 25vw; height: 100% !important; border: none !important; background: transparent !important; color: #687684; /* Gray for inactive tabs */ font-size: 11px; font-weight: 500; cursor: pointer; box-shadow: none !important; transition: color 0.2s ease; flex: 0 0 25vw; /* Fixed width - no grow or shrink */ border-radius: 0 !important; white-space: nowrap; pointer-events: auto; touch-action: manipulation; /* Prevent double-tap zoom */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .mobile-nav-tab.active { color: #000000 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .mobile-nav-tab i { font-size: 16px; /* Smaller icons */ margin-bottom: 2px; } .mobile-nav-tab span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; } /* PWA Standalone Mode Optimizations */ @media (display-mode: standalone) { /* Prevent swipe gesture interference in PWA mode */ body, html { overscroll-behavior: none !important; touch-action: pan-x pan-y !important; } .mobile-nav-tab { padding: 4px 8px; /* Smaller padding for PWA */ min-width: 25vw; /* Keep 4 items visible in PWA */ width: 25vw; flex: 0 0 25vw; } /* Main areas use full viewport in PWA - no gaps */ /* EXCLUDE virtual-main-area - it has its own positioning rules when active */ #shop-main-area, #stream-main-area, #ai-main-area, #market-main-area, #bytes-main-area, #booking-main-area, .arena-grid { bottom: 0 !important; height: 100vh !important; } /* Adjust floating elements for PWA */ .floating-create { bottom: calc(15px + var(--safe-area-bottom)) !important; } .bytes-upload-btn { bottom: calc(var(--safe-area-bottom) + 80px) !important; } /* Fix fullscreen card height for PWA */ .fullscreen-card { height: 100vh !important; /* Full screen in PWA */ } } /* Install prompt banner for shared bloc links */ #bloc-install-banner { position: fixed; left: 16px; right: 16px; bottom: calc(90px + var(--safe-area-bottom, 16px)); z-index: 9999; background: rgba(20, 20, 20, 0.95); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); } #bloc-install-banner .banner-text { flex: 1; font-size: 13px; color: #f5f5f5; line-height: 1.2; } #bloc-install-banner .banner-actions { display: flex; gap: 8px; } #bloc-install-banner button { border: none; border-radius: 10px; padding: 8px 10px; font-size: 12px; font-weight: 700; cursor: pointer; } #bloc-install-banner .install-btn { background: var(--primary-color); color: #111; } #bloc-install-banner .dismiss-btn { background: rgba(255, 255, 255, 0.12); color: #fff !important; } .bloc-install-pill { display: none; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text-secondary); cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } .bloc-install-pill:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.18); } /* Content areas handle their own bottom padding */ /* Ensure all main areas are properly positioned and scrollable */ #shop-main-area, #stream-main-area, #ai-main-area, #market-main-area, #bytes-main-area, /* Removed fixed positioning - now using natural flow below */ /* Bytes work fine in regular web - no changes needed */ #bytes-main-area { top: 0 !important; height: 100vh !important; padding-top: 0 !important; } html.browser-bytes-layout, body.browser-bytes-layout { --bytes-browser-header-top: calc(env(safe-area-inset-top, 0px) + 8px); /* Title row sits just below the browser URL bar — env(safe-area-inset-top) already covers the notch, the +8px is visual breathing room. */ --bytes-browser-feed-top: calc(env(safe-area-inset-top, 0px) + 8px); /* Card fills the full scroll slot so the next card can't peek through. Floating bottom nav is position:fixed and overlays the card — it does NOT take layout space inside the scroll container. */ --bytes-browser-card-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px); --bytes-browser-media-max-height: min(68dvh, 640px); } html.browser-bytes-layout #bytes-main-area, body.browser-bytes-layout #bytes-main-area { height: 100dvh !important; } html.browser-bytes-layout #bytes-filter-header, body.browser-bytes-layout #bytes-filter-header { top: var(--bytes-browser-header-top) !important; gap: 18px !important; padding: 0 !important; } html.browser-bytes-layout #bytes-main-area .bytes-container, body.browser-bytes-layout #bytes-main-area .bytes-container { height: 100dvh !important; padding-top: var(--bytes-browser-feed-top) !important; } html.browser-bytes-layout #bytes-main-area #mobile-card-feed, body.browser-bytes-layout #bytes-main-area #mobile-card-feed { scroll-padding-top: 0 !important; scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; } html.browser-bytes-layout #bytes-main-area .bytes-card-container, body.browser-bytes-layout #bytes-main-area .bytes-card-container { height: var(--bytes-browser-card-height) !important; min-height: var(--bytes-browser-card-height) !important; max-height: var(--bytes-browser-card-height) !important; /* Zero the inline padding set by the card HTML generator. In browser mode the parent .bytes-container absorbs safe-area-inset-top and the card height already excludes the floating nav + inset-bottom, so any card padding would double-count. */ padding: 0 !important; } html.browser-bytes-layout #bytes-main-area .bytes-card-shell, body.browser-bytes-layout #bytes-main-area .bytes-card-shell { padding: 12px 0 4px !important; gap: 4px !important; } html.browser-bytes-layout #bytes-main-area .bytes-header, body.browser-bytes-layout #bytes-main-area .bytes-header { padding: 0 8px 0 !important; } html.browser-bytes-layout #bytes-main-area .bytes-description, body.browser-bytes-layout #bytes-main-area .bytes-description { margin-top: 6px !important; padding-top: 6px !important; } html.browser-bytes-layout #bytes-main-area .bytes-media-shell, body.browser-bytes-layout #bytes-main-area .bytes-media-shell { flex: 0 0 auto !important; min-height: 0 !important; max-height: var(--bytes-browser-media-max-height) !important; } html.browser-bytes-layout #bytes-main-area .bytes-media-wrapper, body.browser-bytes-layout #bytes-main-area .bytes-media-wrapper { flex: 0 0 auto !important; min-height: 0 !important; max-height: var(--bytes-browser-media-max-height) !important; } html.browser-bytes-layout #bytes-main-area .bytes-media-container, body.browser-bytes-layout #bytes-main-area .bytes-media-container { max-height: var(--bytes-browser-media-max-height) !important; } html.browser-bytes-layout #bytes-main-area .bytes-engagement-row, body.browser-bytes-layout #bytes-main-area .bytes-engagement-row { height: 42px !important; gap: 44px !important; transform: translateY(-120px) !important; } /* Remove body background when bytes tab is active - WORKS IN ALL MODES */ body.bytes-active { background: black !important; background-color: black !important; } /* Light-neo: bytes tab should use neo wash, not black */ [data-theme="light"][data-theme-variant="neo"] body.bytes-active { background: var(--bg-primary) !important; background-color: var(--bg-primary) !important; background-image: none !important; } /* Browser mode: shrink booking header top padding (no notch to clear) */ html.browser-bytes-layout .booking-header-bar, body.browser-bytes-layout .booking-header-bar { padding-top: 6px !important; } /* Browser + light mode: body should be white across all tabs (bytes, booking, etc) */ html.browser-bytes-layout[data-theme="light"], html.browser-bytes-layout[data-theme="light-accent"], [data-theme="light"] body.browser-bytes-layout, [data-theme="light-accent"] body.browser-bytes-layout, html.browser-bytes-layout[data-theme="light"] body, html.browser-bytes-layout[data-theme="light-accent"] body { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } html.browser-bytes-layout body.bytes-active, body.browser-bytes-layout.bytes-active, body.bytes-active.light-theme { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } /* Remove body background when virtual tab is active - WORKS IN ALL MODES */ body.virtual-active { background: black !important; background-color: black !important; background-image: none !important; } /* Kill ALL backgrounds when virtual is active */ body.virtual-active * { background-image: none !important; } /* PWA ONLY - Add safe area padding for all content to avoid status bar */ @media (display-mode: standalone) { /* All main areas need proper padding for status bar in PWA */ #arena-grid, #shop-main-area, #market-main-area, #booking-main-area, #stream-main-area, #ai-main-area, #apps-main-area, #virtual-main-area, #bytes-main-area { padding-top: env(safe-area-inset-top, 20px) !important; padding-bottom: calc(75px + env(safe-area-inset-bottom, 20px)) !important; } /* Hide header and arena-grid when bytes is active to prevent gap */ body.bytes-active .header, body.bytes-active .arena-grid, body.bytes-active #arena-grid, body.virtual-active .header, body.virtual-active .arena-grid, body.virtual-active #arena-grid { display: none !important; } /* Virtual map - Use relative positioning like other areas */ body.virtual-active #virtual-main-area { position: relative !important; min-height: 100vh !important; width: 100% !important; padding-bottom: 0 !important; margin: 0 !important; z-index: 1 !important; /* Lower z-index so nav stays on top */ } /* Map fills entire container */ body.virtual-active #mobile-map { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; } #bytes-main-area { padding: 0 !important; /* FULL IMMERSIVE */ margin: 0 !important; } /* Ensure bytes container fills entire space in PWA */ #bytes-main-area .bytes-container { height: 100%; padding: 0; margin: 0; } /* Cards now use snap scrolling */ #bytes-main-area .bytes-card-container { scroll-snap-align: start; scroll-snap-stop: always; height: calc(100dvh + 20px); min-height: calc(100dvh + 20px); margin: 0; padding: 0; position: relative; } /* REMOVED - These rules were forcing embeds under the status bar */ /* Embeds should respect the safe area padding from their container */ } /* REMOVED - Let all content start from very top /* Add padding-top specifically for areas that need it #booking-main-area, #market-main-area, #shop-main-area { padding-top: calc(env(safe-area-inset-top, 0px) + 40px) !important; } */ /* Arena Grid - Light Accent Theme */ [data-theme="light-accent"] .arena-grid { background: transparent !important; } [data-theme="light"] .arena-grid { background: #ffffff !important; } /* Dark theme arena-grid background */ [data-theme="dark"] .arena-grid, .arena-grid { background: #000000 !important; } /* Virtual Main Area - REMOVED CONFLICTING STYLES */ /* Bytes Main Area - Light Accent */ [data-theme="light-accent"] .bytes-main-area, [data-theme="light-accent"] #bytes-main-area { background: #ffffff !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light-accent"] #bytes-filter-header { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Stream Main Area - Light Accent */ [data-theme="light-accent"] .stream-main-area, [data-theme="light-accent"] #stream-main-area { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--accent-rgb), 0.1)) !important; backdrop-filter: blur(20px) saturate(120%) !important; -webkit-backdrop-filter: blur(20px) saturate(120%) !important; } /* Market Main Area - Light Accent fix */ [data-theme="light-accent"] .market-main-area, [data-theme="light-accent"] #market-main-area { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--accent-rgb), 0.1)) !important; backdrop-filter: blur(20px) saturate(120%) !important; -webkit-backdrop-filter: blur(20px) saturate(120%) !important; } /* Add padding to market, shop, stream and AI content to push it down from top */ #market-main-area, #ai-main-area { padding-top: 0px !important; /* FULL IMMERSIVE */ } #stream-main-area, #shop-main-area { padding-top: calc(60px + env(safe-area-inset-top)) !important; /* Tab bar + safe area for shop and stream */ } /* Add smaller padding to booking area */ #booking-main-area { padding-top: 20px !important; } /* Stream Player Area */ .mobile-stream-player { background: #000000 !important; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #ffffff; } [data-theme="light"] .mobile-stream-player { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #000000 !important; color: #000000 !important; } [data-theme="light"] .mobile-stream-player * { color: #000000 !important; } /* Stream Placeholder */ .mobile-stream-placeholder { color: #ffffff; } [data-theme="light"] .mobile-stream-placeholder { color: #000000 !important; } [data-theme="light"] .mobile-stream-placeholder * { color: #000000 !important; } /* Pulse animation for LIVE badge */ @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } /* Stream card hover effect */ .stream-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .stream-card:active { transform: scale(0.98); } /* Bytes Main Area */ .bytes-main-area { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 50; /* padding-top handled by #bytes-main-area ID selector with safe-area-inset */ padding-bottom: 0; touch-action: pan-y; -webkit-overflow-scrolling: touch; } .bytes-container { width: 100%; height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; padding: 0; margin: 0; touch-action: pan-y; pointer-events: auto; } .card-feed { width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: auto; scroll-snap-type: y mandatory; scroll-padding: 0 0 env(safe-area-inset-bottom) 0; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; padding: 0; margin: 0; position: relative; touch-action: pan-y; pointer-events: auto; transform: translateZ(0); -webkit-transform: translateZ(0); } /* Browser (non-PWA) sizing fix to avoid oversized bytes */ @media (display-mode: standalone) { .bytes-container { height: 100vh; } } /* Ensure bytes feed always scrolls */ #mobile-card-feed .bytes-card-container, #mobile-card-feed .bytes-card-container * { touch-action: pan-y !important; } #mobile-card-feed .bytes-card-container iframe { pointer-events: none !important; } #mobile-card-feed .bytes-card-container.bytes-card-interactive iframe { pointer-events: auto !important; } #mobile-card-feed .bytes-card-container.bytes-card-interactive .bytes-media-wrapper, #mobile-card-feed .bytes-card-container.bytes-card-interactive .bytes-media-wrapper * { pointer-events: auto !important; } #mobile-card-feed .bytes-card-container.bytes-card-facebook, #mobile-card-feed .bytes-card-container.bytes-card-facebook * { touch-action: manipulation !important; } #mobile-card-feed .bytes-card-container.bytes-card-facebook iframe { pointer-events: auto !important; } #mobile-card-feed .google-drive-container iframe { pointer-events: auto !important; } .card-feed::-webkit-scrollbar { display: none; } .bytes-engagement-row { background: transparent; border-top: none; color: white; } html.bytes-feed-stats-hidden .bytes-engagement-row, body.bytes-feed-stats-hidden .bytes-engagement-row { display: none !important; } [data-theme="light"] .bytes-engagement-row, [data-theme="light"][data-theme-variant="neo"] .bytes-engagement-row { background: transparent; border-top: none; color: #111111; } [data-theme="light-accent"] .bytes-engagement-row, [data-theme="light"][data-theme-variant="accent"] .bytes-engagement-row { background: transparent; border-top: 1px solid rgba(var(--primary-rgb), 0.1); color: var(--text-primary); box-shadow: none; } [data-theme="light"][data-theme-variant="neo"] .bytes-engagement-row { background: transparent; border-top: 1px solid rgba(var(--primary-rgb), 0.08); box-shadow: none; color: var(--text-primary); } [data-theme="light"] .bytes-engagement-row i, [data-theme="light"][data-theme-variant="neo"] .bytes-engagement-row i { color: #111111; } [data-theme="light-accent"] .bytes-engagement-row i, [data-theme="light-accent"] .bytes-engagement-row span, [data-theme="light"][data-theme-variant="accent"] .bytes-engagement-row i, [data-theme="light"][data-theme-variant="accent"] .bytes-engagement-row span { color: var(--text-primary) !important; text-shadow: none; } /* Dark-accent engagement row - neon glow style */ [data-theme="dark-accent"] .bytes-engagement-row { background: transparent !important; border-top: 1px solid rgba(var(--primary-rgb), 0.1) !important; box-shadow: none; padding: 0; } [data-theme="dark-accent"] .bytes-engagement-row i, [data-theme="dark-accent"] .bytes-engagement-row span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: none; } [data-theme="dark-accent"] .bytes-engagement-row .engagement-item { color: #ffffff !important; } [data-theme="dark-accent"] .bytes-engagement-row .engagement-item:hover { color: rgba(var(--primary-rgb), 1) !important; text-shadow: none; } [data-theme="light"][data-theme-variant="neo"] .bytes-engagement-row i, [data-theme="light"][data-theme-variant="neo"] .bytes-engagement-row span { color: var(--text-primary) !important; text-shadow: none; } [data-theme="dark"][data-theme-variant="neo"] .bytes-engagement-row i, [data-theme="dark"][data-theme-variant="neo"] .bytes-engagement-row span, [data-theme="dark"][data-theme-variant="neo"] .bytes-engagement-row button { color: var(--primary-color) !important; text-shadow: none; } [data-theme="dark"][data-theme-variant="neo"] .bytes-engagement-row { background: transparent; border-top: 1px solid rgba(var(--primary-rgb), 0.08); box-shadow: none; } /* Force all bytes engagement buttons to have no background/border */ .bytes-engagement-row button { background: none !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; backdrop-filter: none !important; padding: 0 !important; } .bytes-description { color: rgba(255, 255, 255, 0.92); } [data-theme="light"] .bytes-description, [data-theme="light-accent"] .bytes-description, [data-theme="light"][data-theme-variant="neo"] .bytes-description { color: #111111; background: rgba(255, 255, 255, 0.98); border-top: none; } [data-theme="dark"] .media-type-badge { background: #111111 !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.15) !important; } [data-theme="light-accent"] .media-type-badge, [data-theme="light"][data-theme-variant="neo"] .media-type-badge { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border: 1px solid rgba(0,0,0,0.08) !important; } [data-theme="dark-accent"] .media-type-badge { background: linear-gradient(135deg, #0a0a0a, #000000) !important; color: rgba(var(--primary-rgb), 1) !important; border: 1px solid rgba(var(--primary-rgb), 0.4) !important; text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.6); box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3); } /* Removed safe area padding - let cards fill full screen */ #bytes-main-area { padding: 0 !important; } /* Lift the bytes panel toggle button a bit */ #mobile-bytes-upload-btn { bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; } /* Hide buttons on bytes tab */ #mobile-bytes-upload-btn, body.bytes-active #hamburger-menu-btn { display: none !important; } /* Show new FAB only on bytes tab */ body.bytes-active #new-fab-btn { display: none !important; } .bytes-upload-btn:active { transform: scale(0.9); } /* Bytes Empty State */ .bytes-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; color: var(--text-secondary); padding: 40px; } .bytes-empty .empty-icon { width: 80px; height: 60px; border-radius: 50%; background: var(--input-background-color, rgba(0, 0, 0, 0.8)); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .bytes-empty .empty-icon i { font-size: 32px; color: var(--primary-color); } .bytes-empty h3 { margin: 0 0 12px 0; font-size: 20px; color: var(--text-primary); } .bytes-empty p { margin: 0; font-size: 14px; opacity: 0.7; } /* Mobile iframe optimizations */ .fullscreen-card iframe { pointer-events: auto !important; z-index: 10; touch-action: auto !important; -webkit-overflow-scrolling: touch; } /* Ensure overlays don't block iframe interaction */ .card-info-overlay { pointer-events: none !important; } /* Mobile-specific iframe adjustments */ @media (max-width: 768px) { .fullscreen-card iframe { width: 100% !important; height: 100% !important; border: none !important; pointer-events: auto !important; } } /* NUCLEAR SCROLLBAR - ABSOLUTE MAXIMUM FORCE */ html body div#arena-grid::-webkit-scrollbar, html body div.arena-grid::-webkit-scrollbar, body div#arena-grid::-webkit-scrollbar, body div.arena-grid::-webkit-scrollbar, div#arena-grid::-webkit-scrollbar, div.arena-grid::-webkit-scrollbar, #arena-grid::-webkit-scrollbar, .arena-grid::-webkit-scrollbar { width: 14px !important; height: 14px !important; } html body div#arena-grid::-webkit-scrollbar-track, html body div.arena-grid::-webkit-scrollbar-track, body div#arena-grid::-webkit-scrollbar-track, body div.arena-grid::-webkit-scrollbar-track, div#arena-grid::-webkit-scrollbar-track, div.arena-grid::-webkit-scrollbar-track, #arena-grid::-webkit-scrollbar-track, .arena-grid::-webkit-scrollbar-track { background: #000000 !important; background-color: #000000 !important; border: none !important; } html body div#arena-grid::-webkit-scrollbar-thumb, html body div.arena-grid::-webkit-scrollbar-thumb, body div#arena-grid::-webkit-scrollbar-thumb, body div.arena-grid::-webkit-scrollbar-thumb, div#arena-grid::-webkit-scrollbar-thumb, div.arena-grid::-webkit-scrollbar-thumb, #arena-grid::-webkit-scrollbar-thumb, .arena-grid::-webkit-scrollbar-thumb { background: var(--nst-primary) !important; background-color: var(--nst-primary) !important; border-radius: 7px !important; border: none !important; box-shadow: 0 0 8px var(--nst-primary) !important; } html body div#arena-grid::-webkit-scrollbar-thumb:hover, html body div.arena-grid::-webkit-scrollbar-thumb:hover, body div#arena-grid::-webkit-scrollbar-thumb:hover, body div.arena-grid::-webkit-scrollbar-thumb:hover, div#arena-grid::-webkit-scrollbar-thumb:hover, div.arena-grid::-webkit-scrollbar-thumb:hover, #arena-grid::-webkit-scrollbar-thumb:hover, .arena-grid::-webkit-scrollbar-thumb:hover { background: var(--nst-accent) !important; background-color: var(--nst-accent) !important; box-shadow: 0 0 12px var(--nst-accent) !important; } /* Simple Twitter-style feed */ .arena-grid { display: flex; flex-direction: column; gap: 0; /* padding-bottom is set in the main area rule above */ padding-top: 0; padding-left: 0; padding-right: 0; margin: 0; /* width and min-height are set in the main area rule above */ /* overflow is set in the main area rule above */ } /* Twitter-style Post Cards */ .bloc-card { position: relative; background: transparent; border-radius: 0; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; border-left: none !important; border-right: none !important; border-top: none !important; padding: 16px 16px; transition: all 0.2s ease; cursor: pointer; min-height: auto; max-height: none; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; } .bloc-card:active { transform: scale(0.99); } /* First post - push down BELOW wifi/time status bar */ .bloc-card:first-child { padding-top: env(safe-area-inset-top); } /* All other cards - no padding (immersive when scrolling) */ .bloc-card:not(:first-child) { padding-top: 0; } /* Profile Section */ .bloc-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .profile-avatar { width: 42px; height: 42px; background: transparent; border: none; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 16px; font-weight: 700; color: #ffffff; overflow: hidden; position: relative; } .profile-avatar img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; z-index: 1; } /* Light mode profile avatar */ [data-theme="light"] .profile-avatar { background: transparent; color: #ffffff; border: none; } .profile-info { flex: 1; overflow-x: hidden; overflow-y: auto; /* Prevent overflow */ max-width: calc(100% - 52px); /* Account for avatar width + gap */ } .profile-info h3 { margin: 0; font-size: 15px; font-weight: 700; white-space: nowrap; /* Keep on one line */ overflow-x: hidden; overflow-y: auto; /* Hide overflow */ text-overflow: ellipsis; /* Add ... for overflow */ max-width: 100%; /* Ensure doesn't exceed container */ letter-spacing: -0.01em; } /* Light mode profile info text */ [data-theme="light"] .profile-info h3 { color: #000000; } .post-time { font-size: 11px; opacity: 0.5; margin-left: 4px; } .ticker { font-size: 12px; color: var(--primary-color); opacity: 0.8; } /* Message */ .bloc-message { flex: 1; margin-bottom: 18px; overflow: hidden; max-width: 100%; min-height: 80px; position: relative; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(var(--primary-rgb), 0.02) 100%); border: 1px solid rgba(var(--primary-rgb), 0.15); backdrop-filter: blur(10px); } .bloc-message::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--primary-color) 0%, rgba(var(--primary-rgb), 0.3) 100%); border-radius: 16px 0 0 16px; } .bloc-message p { font-size: 16px; line-height: 1.65; color: var(--text-primary); margin: 0; word-wrap: break-word; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-weight: 500; letter-spacing: 0.02em; } /* Actions */ .card-actions { display: flex; justify-content: center; } .enter-bloc-btn { background: var(--primary-color); border: 1px solid var(--primary-color); color: #ffffff; padding: 8px 24px; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease; width: 100%; justify-content: center; } .enter-bloc-btn:active { background: var(--primary-color); opacity: 0.8; transform: scale(0.95); } /* Room cards */ .text-bloc-card { transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } /* Active/tap state for mobile */ .text-bloc-card:active { transform: scale(0.98) !important; box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.15) !important; } /* Hover effects for desktop only */ @media (hover: hover) and (pointer: fine) { .text-bloc-card:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.2) !important; } .text-bloc-card:active { transform: translateY(0) scale(0.98) !important; } } /* Dark-accent text blocs styling - Glassmorphic */ [data-theme="dark-accent"] .text-bloc-card { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--accent-rgb), 0.1)) !important; border: 1px solid rgba(var(--primary-rgb), 0.25) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(var(--primary-rgb), 0.15); } [data-theme="dark-accent"] .text-bloc-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(var(--primary-rgb), 0.3) !important; } [data-theme="dark-accent"] .text-bloc-card:active { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3), 0 0 20px rgba(var(--primary-rgb), 0.25) !important; } /* Dark-accent text bloc modal */ [data-theme="dark-accent"] #text-blocs-modal > div { background: linear-gradient(135deg, #0a0a0a, #000000) !important; } [data-theme="dark-accent"] #text-blocs-modal button, [data-theme="dark-accent"] #text-blocs-modal #text-blocs-title, [data-theme="dark-accent"] #text-blocs-modal .text-bloc-name, [data-theme="dark-accent"] #text-blocs-modal .text-bloc-preview { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Dark-accent text bloc create modal */ [data-theme="dark-accent"] #text-bloc-create-modal { background: rgba(0, 0, 0, 0.95) !important; } [data-theme="dark-accent"] #text-bloc-create-modal > div { background: linear-gradient(135deg, rgba(10, 10, 10, 0.95), rgba(0, 0, 0, 0.95)) !important; border: 1px solid rgba(var(--primary-rgb), 0.4) !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(var(--primary-rgb), 0.2); } [data-theme="dark-accent"] #text-bloc-title-input, [data-theme="dark-accent"] #text-bloc-desc-input, [data-theme="dark-accent"] #text-bloc-visibility { background: linear-gradient(135deg, #0a0a0a, #000000) !important; border: 1px solid rgba(var(--primary-rgb), 0.4) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="dark-accent"] #text-bloc-title-input:focus, [data-theme="dark-accent"] #text-bloc-desc-input:focus, [data-theme="dark-accent"] #text-bloc-visibility:focus { border-color: rgba(var(--primary-rgb), 0.6) !important; box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4); } /* Dark-accent text bloc general thumb */ [data-theme="dark-accent"] #text-bloc-general-thumb { background: linear-gradient(135deg, #0a0a0a, #000000) !important; border: 1px solid rgba(var(--primary-rgb), 0.3) !important; box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.2); } [data-theme="dark-accent"] #text-bloc-general-preview, [data-theme="dark-accent"] #text-bloc-general-count { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.4); } /* Dark-accent text bloc create CTA */ [data-theme="dark-accent"] #text-bloc-create-cta { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.05)) !important; border: 1px solid rgba(var(--primary-rgb), 0.4) !important; box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.2); } [data-theme="dark-accent"] #text-bloc-create-cta:hover { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.25), rgba(var(--primary-rgb), 0.1)) !important; border-color: rgba(var(--primary-rgb), 0.6) !important; box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.3); } /* Restored room create light input readability */ [data-theme="light"] #text-bloc-create-modal, [data-theme="light-accent"] #text-bloc-create-modal, body[data-theme="light"] #text-bloc-create-modal, body[data-theme="light-accent"] #text-bloc-create-modal { color-scheme: light !important; } /* Keyed on "not dark" rather than on an explicit light theme. These fields sit on a white panel, and the dark-theme rules give them white text. A session with no data-theme attribute at all matched neither side: the select kept white text on its white ground and rendered blank, so Access looked empty and Paid could not be chosen — which is what hid the price field. Light is the fallback here, not a special case. */ [data-theme="light"] #text-bloc-create-modal input::placeholder, [data-theme="light-accent"] #text-bloc-create-modal input::placeholder, body[data-theme="light"] #text-bloc-create-modal input::placeholder, body[data-theme="light-accent"] #text-bloc-create-modal input::placeholder { color: rgba(5, 5, 5, 0.46) !important; -webkit-text-fill-color: rgba(5, 5, 5, 0.46) !important; } /* Empty State */ .empty-arena-message { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text-secondary); } .empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.3; } /* Floating Action Button */ .floating-create { position: fixed; bottom: calc(20px + var(--safe-area-bottom)); right: 20px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); box-shadow: 0 4px 12px var(--text-primary); display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; z-index: 50; transition: all 0.3s ease; border: none; } .floating-create:active { transform: scale(0.9); } /* Create Post Modal */ .create-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000000; z-index: 200; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #compose-modal { z-index: 2000001 !important; } #compose-modal.create-modal { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; background: var(--bg-primary, #000000) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; align-items: stretch !important; justify-content: stretch !important; padding: 0 !important; overflow: hidden !important; } #compose-modal.create-modal.active { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } #compose-modal .modal-content { width: 100% !important; max-width: none !important; height: 100vh !important; max-height: none !important; min-height: 100vh !important; margin: 0 !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; background: var(--bg-primary, #000000) !important; padding: calc(18px + env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px)) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; box-sizing: border-box !important; } #compose-modal .modal-header { position: relative; background: transparent; padding-bottom: 18px; } #compose-modal .modal-tabs { border-color: rgba(255, 255, 255, 0.08) !important; background: rgba(255, 255, 255, 0.025) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important; } #compose-modal .input-group { border: 1px solid rgba(255, 255, 255, 0.10) !important; border-radius: 18px !important; background: rgba(255, 255, 255, 0.035) !important; padding: 14px 16px !important; box-shadow: none !important; } #compose-modal .input-label { margin-bottom: 10px !important; color: rgba(255, 255, 255, 0.56) !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: 0.14em !important; } #compose-modal input, #compose-modal textarea, #compose-modal .text-input, #compose-modal .text-area { width: 100% !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; outline: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; padding: 0 !important; margin: 0 !important; appearance: none !important; -webkit-appearance: none !important; font-size: 16px !important; font-weight: 760 !important; } #compose-modal input::placeholder, #compose-modal textarea::placeholder { color: rgba(255, 255, 255, 0.34) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.34) !important; opacity: 1 !important; } #compose-modal .modal-actions { gap: 12px !important; } #compose-modal .btn-secondary, #compose-modal .btn-primary { border-radius: 18px !important; box-shadow: none !important; } #compose-modal .btn-secondary { background: rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.72) !important; } #compose-modal .compose-hero { display: block; margin: 64px 0 22px; } #compose-modal .compose-hero-copy h3 { margin: 0; color: #fff; font-size: 44px; line-height: 1; font-weight: 950; letter-spacing: 0; } #compose-modal .compose-kicker { margin: 0 0 14px; color: var(--primary-color); font-size: 12px; font-weight: 950; letter-spacing: 0.16em; text-transform: uppercase; } #compose-modal .compose-subtitle { margin: 12px 0 0; color: rgba(255, 255, 255, 0.54); font-size: 16px; font-weight: 650; line-height: 1.35; } #compose-modal .compose-hero-art { display: none; } #compose-modal .compose-hero-art i { font-size: 24px; opacity: 0.9; filter: none; } #compose-modal .compose-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 24px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08); } #compose-modal .compose-mode-card { min-height: 44px; border: 0; border-radius: 11px; background: transparent; color: #fff; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; cursor: pointer; } #compose-modal .compose-mode-card.is-active { background: rgba(255,255,255,0.18); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset; } #compose-modal .compose-mode-icon { width: auto; height: auto; border-radius: 0; display: inline-flex; background: transparent; color: currentColor; box-shadow: none; } #compose-modal .compose-mode-card strong, #compose-modal .compose-suggestion-copy strong { display: inline; color: #fff; font-size: 14px; font-weight: 900; line-height: 1.15; } #compose-modal .compose-mode-card span, #compose-modal .compose-suggestion-copy span { display: inline; margin-top: 0; color: rgba(255,255,255,0.54); font-size: 12px; font-weight: 720; line-height: 1.2; } #compose-modal .compose-mode-card > i, #compose-modal .compose-mode-card .compose-mode-icon + span > span { display: none; } #compose-modal .compose-search-shell { min-height: 58px; border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; background: rgba(255,255,255,0.06); display: flex; align-items: center; gap: 13px; padding: 0 16px; margin-bottom: 14px; } #compose-modal .compose-search-shell > i { color: rgba(255,255,255,0.44); font-size: 18px; } #compose-modal .compose-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 10px; } #compose-modal .compose-section-head strong { color: rgba(255,255,255,0.72); font-size: 12px; font-weight: 950; letter-spacing: 0.10em; text-transform: uppercase; } #compose-modal .compose-section-head button { border: 0; background: transparent; color: var(--primary-color); font-size: 12px; font-weight: 850; } #compose-modal .compose-avatar { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; margin-bottom: 10px; background: rgba(255,255,255,0.075); color: var(--primary-color); font-size: 20px; font-weight: 900; position: relative; overflow: hidden; } #compose-modal .compose-avatar img { width: 100%; height: 100%; object-fit: cover; } #compose-modal .compose-avatar::after { content: none; } #compose-modal .compose-results-panel { border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; background: rgba(255,255,255,0.035); overflow: hidden; margin-bottom: 18px; } #compose-modal .compose-result-row { width: 100%; min-height: 78px; border: 0; border-bottom: 1px solid rgba(255,255,255,0.07); background: transparent; color: #fff; padding: 12px 14px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; text-align: left; cursor: pointer; } #compose-modal .compose-result-row:last-child { border-bottom: 0; } #compose-modal .compose-empty-state { min-height: 150px; border: 0; border-radius: 0; background: transparent; display: grid; place-items: center; text-align: center; padding: 24px 0; margin: 8px 0 18px; color: rgba(255,255,255,0.54); font-size: 13px; font-weight: 720; line-height: 1.45; } #compose-modal .compose-send-pill { min-width: 76px; height: 36px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent); color: var(--primary-color); display: grid; place-items: center; font-size: 13px; font-weight: 900; } #compose-modal .compose-bottom-bar { position: static; padding: 10px 0 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; background: transparent; } #compose-modal .compose-bottom-bar button { min-height: 50px; border: 0; border-radius: 14px; color: #fff; font-size: 15px; font-weight: 900; cursor: pointer; } #compose-modal .compose-bottom-bar .compose-cancel { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.76); } #compose-modal .compose-bottom-bar .compose-primary { background: #ffffff; color: #000000; } #compose-modal .compose-field-stack { display: grid; gap: 12px; padding-bottom: 10px; } #compose-modal .close-btn { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 4px; width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08); color: #fff; } [data-theme="light"] .create-modal, [data-theme="light-accent"] .create-modal { background: var(--modal-bg) !important; backdrop-filter: blur(40px) !important; -webkit-backdrop-filter: blur(40px) !important; } [data-theme="dark"] .create-modal { background: var(--modal-bg) !important; backdrop-filter: blur(40px) !important; -webkit-backdrop-filter: blur(40px) !important; } .create-modal.active { display: block; } #create-modal.active { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } .modal-content { padding: 18px 18px 28px; padding-top: calc(40px + env(safe-area-inset-top)); min-height: 100vh; transform: scale(0.9); opacity: 0; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); background: transparent; /* Default to transparent - theme-specific rules will override */ } #create-modal.active .modal-content { width: 100%; height: 100dvh; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: calc(96px + env(safe-area-inset-bottom)); box-sizing: border-box; } #create-modal.create-modal { z-index: 2147483000 !important; background: var(--bg-primary, #000000) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #create-modal.create-modal.active { display: block !important; } #create-modal .modal-content, [data-theme="light"] #create-modal .modal-content, [data-theme="light-accent"] #create-modal .modal-content, [data-theme="dark"] #create-modal .modal-content, [data-theme="dark-accent"] #create-modal .modal-content { width: 100% !important; min-height: 100dvh !important; height: auto !important; margin: 0 !important; padding: calc(26px + env(safe-area-inset-top, 0px)) 18px calc(104px + env(safe-area-inset-bottom, 0px)) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; opacity: 1 !important; box-sizing: border-box !important; } #create-modal .modal-header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 18px !important; } /* Cancel lives here as a quiet dismiss rather than competing with Send for half the action row. */ #create-modal .create-post-close { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; margin-top: -2px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(9, 9, 11, 0.05) !important; color: rgba(9, 9, 11, 0.55) !important; -webkit-text-fill-color: currentColor !important; font-size: 21px !important; line-height: 1 !important; } #create-modal .create-post-close:hover, #create-modal .create-post-close:active { background: rgba(9, 9, 11, 0.09) !important; color: rgba(9, 9, 11, 0.8) !important; transform: none !important; } /* Colours for the disabled state are defined with the other .modal-submit-btn[disabled] rules further down; only the cursor here. */ #create-modal .modal-submit-btn[disabled] { cursor: default !important; } #create-modal .modal-submit-btn:not([disabled]):active { transform: scale(0.985) !important; } #create-modal .modal-title { margin: 0 !important; line-height: 1.05 !important; } #create-modal #mobile-community-post-preview img, #create-modal #mobile-community-post-preview video { max-height: min(32dvh, 220px) !important; } [data-theme="light"] .modal-content { background: transparent !important; backdrop-filter: blur(30px) saturate(180%) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) !important; border: 1px solid var(--border-color) !important; } [data-theme="light-accent"] .modal-content { background: transparent !important; backdrop-filter: blur(30px) saturate(180%) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } /* Dark mode modal */ [data-theme="dark"] .modal-content { background: rgba(20, 20, 20, 0.95) !important; backdrop-filter: blur(30px) saturate(180%) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important; } /* Dark mode modal text - force white text on all elements */ [data-theme="dark"] .create-modal .modal-content *:not(script):not(style) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Nuclear option for ALL create-modal descendants - matching other modal patterns */ [data-theme="dark"] .create-modal, [data-theme="dark"] .create-modal *, [data-theme="dark"] #create-modal, [data-theme="dark"] #create-modal * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Ultra-high specificity for all sections, tabs, and content */ html[data-theme="dark"] body .create-modal *, html[data-theme="dark"] body #create-modal *, html[data-theme="dark"] body [class*="create-modal"] * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: transparent !important; } /* Dark backgrounds for all divs, sections, tabs, and containers */ [data-theme="dark"] .create-modal div, [data-theme="dark"] .create-modal section, [data-theme="dark"] .create-modal [class*="tab"], [data-theme="dark"] .create-modal [class*="content"], [data-theme="dark"] .create-modal [class*="container"], [data-theme="dark"] #create-modal div, [data-theme="dark"] #create-modal section { background: transparent !important; background-color: transparent !important; } /* DARK ACCENT CREATE MODAL - CYBERPUNK NEON */ [data-theme="dark-accent"] .create-modal { background: rgba(0, 0, 0, 0.95) !important; backdrop-filter: blur(40px) !important; -webkit-backdrop-filter: blur(40px) !important; } [data-theme="dark-accent"] .modal-content { background: linear-gradient(135deg, rgba(10, 10, 10, 0.95), rgba(0, 0, 0, 0.95)) !important; backdrop-filter: blur(30px) saturate(180%) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) !important; border: 1px solid rgba(var(--primary-rgb), 0.4) !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(var(--primary-rgb), 0.2), 0 0 0 1px rgba(var(--primary-rgb), 0.3) inset !important; } /* Nuclear white text for all dark-accent modal elements */ [data-theme="dark-accent"] .create-modal .modal-content *:not(script):not(style) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="dark-accent"] .create-modal, [data-theme="dark-accent"] .create-modal *, [data-theme="dark-accent"] #create-modal, [data-theme="dark-accent"] #create-modal * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html[data-theme="dark-accent"] body .create-modal *, html[data-theme="dark-accent"] body #create-modal *, html[data-theme="dark-accent"] body [class*="create-modal"] * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: transparent !important; } [data-theme="dark-accent"] .create-modal div, [data-theme="dark-accent"] .create-modal section, [data-theme="dark-accent"] .create-modal [class*="tab"], [data-theme="dark-accent"] .create-modal [class*="content"], [data-theme="dark-accent"] .create-modal [class*="container"], [data-theme="dark-accent"] #create-modal div, [data-theme="dark-accent"] #create-modal section { background: transparent !important; background-color: transparent !important; } /* Dark accent modal inputs with neon glow */ [data-theme="dark-accent"] .create-modal input, [data-theme="dark-accent"] .create-modal textarea, [data-theme="dark-accent"] .create-modal select, [data-theme="dark-accent"] #create-modal input, [data-theme="dark-accent"] #create-modal textarea, [data-theme="dark-accent"] #create-modal select { background: linear-gradient(135deg, #0a0a0a, #000000) !important; border: 1px solid rgba(var(--primary-rgb), 0.4) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2); } [data-theme="dark-accent"] .create-modal input:focus, [data-theme="dark-accent"] .create-modal textarea:focus, [data-theme="dark-accent"] .create-modal select:focus, [data-theme="dark-accent"] #create-modal input:focus, [data-theme="dark-accent"] #create-modal textarea:focus, [data-theme="dark-accent"] #create-modal select:focus { border: 1px solid rgba(var(--primary-rgb), 0.6) !important; box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4); } /* REDESIGNED MODAL THEMES */ /* Light mode modal - transparent glassmorphism on gradient */ [data-theme="light"] .modal-content { background: transparent !important; backdrop-filter: blur(30px) saturate(180%) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15), 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important; } /* Light accent modal - transparent glassmorphism */ [data-theme="light-accent"] .modal-content { background: transparent !important; backdrop-filter: blur(30px) saturate(180%) !important; -webkit-backdrop-filter: blur(30px) saturate(180%) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15), 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important; } /* Enhanced glassmorphism for Drop Bloc modal specifically */ [data-theme="light-accent"] .create-modal .modal-content { background: transparent !important; backdrop-filter: blur(50px) saturate(200%) !important; -webkit-backdrop-filter: blur(50px) saturate(200%) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12), 0 15px 40px rgba(0, 0, 0, 0.06), inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.15) !important; } /* Force proper text colors */ [data-theme="light"] .modal-content *:not(script):not(style), [data-theme="light-accent"] .modal-content *:not(script):not(style) { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Theme-aware visitor panel in community drawer */ [data-theme="light"] #community-drawer-visitor-panel, [data-theme="light-accent"] #community-drawer-visitor-panel { background: rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; } /* NUCLEAR OPTION: Hide visitor panel when marked as owner-hidden */ #community-drawer-visitor-panel[data-owner-hidden="true"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; left: -9999px !important; } [data-theme="light"] #community-drawer-visitor-panel *, [data-theme="light-accent"] #community-drawer-visitor-panel * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* NUCLEAR FORCE - LIGHT BACKGROUND FOR VISITOR CODE INPUTS IN LIGHT MODES */ [data-theme="light"] #drawer-visitor-code, [data-theme="light-accent"] #drawer-visitor-code, [data-theme="light"] input#drawer-visitor-code, [data-theme="light-accent"] input#drawer-visitor-code { background: #f5f5f5 !important; background-color: #f5f5f5 !important; background-image: none !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; -webkit-box-shadow: none !important; box-shadow: none !important; } /* OVERRIDE ANY INLINE STYLES */ [data-theme="light"] #community-drawer-visitor-panel input[type="text"], [data-theme="light-accent"] #community-drawer-visitor-panel input[type="text"] { background: #f5f5f5 !important; background-color: #f5f5f5 !important; background-image: none !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="light"] #drawer-visitor-code::placeholder, [data-theme="light-accent"] #drawer-visitor-code::placeholder { color: rgba(0, 0, 0, 0.5) !important; -webkit-text-fill-color: rgba(0, 0, 0, 0.5) !important; } [data-theme="light"] #community-drawer-visitor-panel button, [data-theme="light-accent"] #community-drawer-visitor-panel button { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* ABSOLUTE ULTIMATE NUCLEAR FORCE FOR DRAWER INPUT */ [data-theme="light"] #drawer-visitor-code, [data-theme="light-accent"] #drawer-visitor-code, body[data-theme="light"] #drawer-visitor-code, body[data-theme="light-accent"] #drawer-visitor-code, html body[data-theme="light"] #drawer-visitor-code, html body[data-theme="light-accent"] #drawer-visitor-code, #community-drawer[data-theme="light"] #drawer-visitor-code, #community-drawer[data-theme="light-accent"] #drawer-visitor-code, [data-theme="light"] #community-drawer #drawer-visitor-code, [data-theme="light-accent"] #community-drawer #drawer-visitor-code, [data-theme="light"] input#drawer-visitor-code[type="text"], [data-theme="light-accent"] input#drawer-visitor-code[type="text"] { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid #cccccc !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } /* Dark mode styles for drawer visitor code input */ [data-theme="dark"] #drawer-visitor-code { background: rgba(255, 255, 255, 0.1) !important; background-color: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="dark"] #drawer-visitor-code::placeholder { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } /* Make input groups transparent in light modes */ [data-theme="light"] .modal-content .input-group, [data-theme="light-accent"] .modal-content .input-group { background: transparent !important; } /* NUCLEAR BLACK TEXT FOR BYTES UPLOAD IN LIGHT MODES */ [data-theme="light"] #mobile-bytes-panel *:not(script):not(style), [data-theme="light-accent"] #mobile-bytes-panel *:not(script):not(style), [data-theme="light"] #bytes-visitor-panel *:not(script):not(style), [data-theme="light-accent"] #bytes-visitor-panel *:not(script):not(style), [data-theme="light"] #bytes-upload-container *:not(script):not(style), [data-theme="light-accent"] #bytes-upload-container *:not(script):not(style), [data-theme="light"] #bytes-upload-container-panel *:not(script):not(style), [data-theme="light-accent"] #bytes-upload-container-panel *:not(script):not(style), [data-theme="light"] #mobile-bytes-upload-btn *:not(script):not(style), [data-theme="light-accent"] #mobile-bytes-upload-btn *:not(script):not(style), [data-theme="light"] [id*="bytes"] *:not(script):not(style), [data-theme="light-accent"] [id*="bytes"] *:not(script):not(style), [data-theme="light"] [class*="bytes"] *:not(script):not(style), [data-theme="light-accent"] [class*="bytes"] *:not(script):not(style) { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* NUCLEAR BLACK TEXT FOR MAP TOOLS MODAL IN LIGHT MODES */ [data-theme="light"] #modal-styles-section button, [data-theme="light-accent"] #modal-styles-section button, [data-theme="light"] [onclick*="changeMapStyle"], [data-theme="light-accent"] [onclick*="changeMapStyle"] { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* NUCLEAR BLACK TEXT IN LIGHT MODES */ [data-theme="light"] .market-main-area *:not(script):not(style), [data-theme="light-accent"] .market-main-area *:not(script):not(style), [data-theme="light"] #market-main-area *:not(script):not(style), [data-theme="light-accent"] #market-main-area *:not(script):not(style) { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Theme-aware bytes upload modal */ [data-theme="light"] #mobile-bytes-upload-modal, [data-theme="light-accent"] #mobile-bytes-upload-modal, [data-theme="light"] #mobile-bytes-modal, [data-theme="light-accent"] #mobile-bytes-modal { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(40px) !important; -webkit-backdrop-filter: blur(40px) !important; } /* Light neo polish for + modal */ [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-upload-modal { background: var(--bg-primary) !important; border-color: var(--border-color) !important; } [data-theme="light"][data-theme-variant="neo"] #bytes-upload-container, [data-theme="light"][data-theme-variant="neo"] #bytes-upload-container-panel, [data-theme="light"][data-theme-variant="neo"] #bytes-upload-container-panel > div, [data-theme="light"][data-theme-variant="neo"] #bytes-upload-container-panel .panel, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal > div, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-upload-modal > div { background: var(--bg-primary) !important; } [data-theme="light"][data-theme-variant="neo"] #bytes-upload-container-panel .panel-card, [data-theme="light"][data-theme-variant="neo"] #bytes-upload-container-panel .card, [data-theme="light"][data-theme-variant="neo"] #bytes-upload-container-panel .list-card, [data-theme="light"][data-theme-variant="neo"] #bytes-upload-container-panel .input-group { background: var(--card-bg) !important; border-color: var(--border-color) !important; } [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal input, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal textarea, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal select, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-upload-modal input, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-upload-modal textarea, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-upload-modal select { background: var(--input-background-color) !important; border-color: var(--input-border) !important; } /* Light accent polish for + modal */ [data-theme="light-accent"] #mobile-bytes-modal, [data-theme="light-accent"] #mobile-bytes-upload-modal { background: rgba(248, 248, 252, 0.96) !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal > div > div:first-child { border-bottom: 1px solid var(--border-color) !important; background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(var(--accent-rgb), 0.06)) !important; } [data-theme="light-accent"] #mobile-bytes-modal > div > div:first-child { border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--accent-rgb), 0.04)) !important; } [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal button, [data-theme="light-accent"] #mobile-bytes-modal button { color: #0b0f16 !important; -webkit-text-fill-color: #0b0f16 !important; } [data-theme="light"] #mobile-bytes-upload-modal *:not(script):not(style), [data-theme="light-accent"] #mobile-bytes-upload-modal *:not(script):not(style), [data-theme="light"] #mobile-bytes-modal *:not(script):not(style), [data-theme="light-accent"] #mobile-bytes-modal *:not(script):not(style) { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Light-neo: override light text forcing inside + modal */ [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-upload-modal *:not(script):not(style), [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal *:not(script):not(style) { color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; } [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-upload-modal, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal { background: var(--bg-primary) !important; border-color: var(--border-color) !important; } [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-upload-modal > div, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal > div { background: var(--bg-primary) !important; } [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-upload-modal input, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-upload-modal textarea, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-upload-modal select, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal input, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal textarea, [data-theme="light"][data-theme-variant="neo"] #mobile-bytes-modal select { background: var(--input-background-color) !important; color: var(--text-primary) !important; border-color: var(--input-border) !important; } /* NUCLEAR: Remove ALL backgrounds from divs in bytes modal for light modes */ [data-theme="light"] #mobile-bytes-upload-modal div, [data-theme="light-accent"] #mobile-bytes-upload-modal div { background: transparent !important; } /* Create bloc modal theme alignment */ [data-theme="light"][data-theme-variant="neo"] #create-bloc-modal, [data-theme="light-accent"] #create-bloc-modal { background: rgba(252, 252, 255, 0.98) !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16) !important; } [data-theme="light"][data-theme-variant="neo"] #create-bloc-modal input, [data-theme="light"][data-theme-variant="neo"] #create-bloc-modal select, [data-theme="light-accent"] #create-bloc-modal input, [data-theme="light-accent"] #create-bloc-modal select { background: rgba(0, 0, 0, 0.04) !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; color: #0b0f16 !important; -webkit-text-fill-color: #0b0f16 !important; } [data-theme="light"][data-theme-variant="neo"] #create-bloc-modal label, [data-theme="light-accent"] #create-bloc-modal label { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.08) !important; } /* Theme-aware bytes upload modal inputs - FORCE OVERRIDE */ [data-theme="light"] #byte-upload-ticker, [data-theme="light"] #byte-upload-pin, [data-theme="light-accent"] #byte-upload-ticker, [data-theme="light-accent"] #byte-upload-pin { background: rgba(0, 0, 0, 0.05) !important; background-color: rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="light"] #byte-upload-ticker::placeholder, [data-theme="light"] #byte-upload-pin::placeholder, [data-theme="light-accent"] #byte-upload-ticker::placeholder, [data-theme="light-accent"] #byte-upload-pin::placeholder { color: rgba(0, 0, 0, 0.5) !important; -webkit-text-fill-color: rgba(0, 0, 0, 0.5) !important; } /* Redesigned modal inputs - theme aware */ [data-theme="light"] .modal-content textarea, [data-theme="light"] .modal-content input { background: rgba(0, 0, 0, 0.05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 2px solid rgba(0, 0, 0, 0.1) !important; border-radius: 12px !important; padding: 14px 16px !important; transition: all 0.2s ease !important; } [data-theme="light"] .modal-content textarea:focus, [data-theme="light"] .modal-content input:focus { border-color: var(--primary-color) !important; outline: none !important; background: transparent !important; } [data-theme="light-accent"] .modal-content textarea, [data-theme="light-accent"] .modal-content input { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 2px solid rgba(255, 255, 255, 0.2) !important; border-radius: 12px !important; padding: 14px 16px !important; transition: all 0.2s ease !important; } [data-theme="light-accent"] .modal-content textarea:focus, [data-theme="light-accent"] .modal-content input:focus { border-color: var(--primary-color) !important; outline: none !important; background: rgba(255, 255, 255, 0.15) !important; } [data-theme="dark"] .modal-content textarea, [data-theme="dark"] .modal-content input { background: rgba(255, 255, 255, 0.05) !important; border: 2px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; padding: 14px 16px !important; transition: all 0.2s ease !important; } [data-theme="dark"] .modal-content textarea:focus, [data-theme="dark"] .modal-content input:focus { border-color: var(--primary-color) !important; outline: none !important; background: rgba(255, 255, 255, 0.08) !important; } /* Redesigned modal buttons - theme aware */ [data-theme="light"] .modal-cancel-btn { background: #f1f3f5 !important; color: #495057 !important; } [data-theme="light"] .modal-cancel-btn:hover { background: #e9ecef !important; transform: translateY(-1px) !important; } [data-theme="light-accent"] .modal-cancel-btn { background: rgba(0, 0, 0, 0.05) !important; backdrop-filter: blur(10px) !important; color: #212529 !important; } [data-theme="light-accent"] .modal-cancel-btn:hover { background: rgba(0, 0, 0, 0.08) !important; transform: translateY(-1px) !important; } [data-theme="dark"] .modal-cancel-btn { background: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.8) !important; } [data-theme="dark"] .modal-cancel-btn:hover { background: rgba(255, 255, 255, 0.15) !important; transform: translateY(-1px) !important; } /* Submit button animations and theme colors */ .modal-submit-btn { position: relative; overflow-x: hidden; overflow-y: auto; } [data-theme="dark"] .modal-submit-btn { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="dark"] .modal-submit-btn i { color: #ffffff !important; } [data-theme="light"] .modal-submit-btn, [data-theme="light-accent"] .modal-submit-btn { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="light"] .modal-submit-btn i, [data-theme="light-accent"] .modal-submit-btn i { color: #000000 !important; } .modal-submit-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.3) !important; } .modal-submit-btn:active { transform: translateY(0) !important; } .create-modal.active .modal-content { transform: scale(1); opacity: 1; } .modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; position: relative; padding-top: env(safe-area-inset-top, 20px); /* Prevent X button from overlapping status bar */ } .modal-header > div { display: flex; flex-direction: column; gap: 4px; } .modal-title { font-size: 24px; font-weight: 700; margin: 0; } [data-theme="light"] .modal-title, [data-theme="light-accent"] .modal-title { color: black; } [data-theme="dark"] .modal-title { color: white; } /* Modal tab buttons - ensure theme-aware colors */ [data-theme="light"] #modal-tab-public, [data-theme="light"] #modal-tab-dm, [data-theme="light"] #modal-tab-calls, [data-theme="light-accent"] #modal-tab-public, [data-theme="light-accent"] #modal-tab-dm, [data-theme="light-accent"] #modal-tab-calls { color: #000000 !important; } [data-theme="dark"] #modal-tab-public, [data-theme="dark"] #modal-tab-dm, [data-theme="dark"] #modal-tab-calls { color: #ffffff !important; } /* Inactive tabs should use theme colors */ [data-theme="light"] .modal-tabs button:not([style*="linear-gradient"]), [data-theme="light-accent"] .modal-tabs button:not([style*="linear-gradient"]) { color: var(--text-secondary) !important; } [data-theme="dark"] .modal-tabs button:not([style*="linear-gradient"]) { color: var(--text-secondary) !important; } .close-btn { background: rgba(255, 255, 255, 0.1); border: none; width: 40px; height: 40px; border-radius: 50%; color: white; font-size: 20px; cursor: pointer; transition: all 0.2s ease; } [data-theme="light"] .close-btn, [data-theme="light-accent"] .close-btn { background: rgba(0, 0, 0, 0.1); color: black; } .close-btn:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } [data-theme="light"] .close-btn:hover, [data-theme="light-accent"] .close-btn:hover { background: rgba(0, 0, 0, 0.2); } .input-group { margin-bottom: 16px; } .input-label { display: block; margin-bottom: 8px; font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; } .text-input:not(#dm-recipient), .text-area:not(#post-message):not(#dm-message) { width: 100%; background: var(--surface-color); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px; color: var(--text-primary); font-family: 'Oxanium', monospace; font-size: 14px; outline: none; } .text-input:not(#dm-recipient):focus, .text-area:not(#post-message):not(#dm-message):focus { border-color: var(--primary-color); } .text-area:not(#post-message):not(#dm-message) { min-height: 120px; resize: vertical; } .modal-actions { display: flex; gap: 12px; margin-top: 20px; } .btn { flex: 1; padding: 12px; border-radius: 12px; border: none; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s ease; } .btn-primary { background: var(--primary-color); } .btn-secondary:not(.modal-content .btn-secondary) { background: var(--surface-color); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.08); } /* Drop Bloc modal Cancel button - theme aware */ [data-theme="light"] .modal-content .btn-secondary, [data-theme="light-accent"] .modal-content .btn-secondary { background: rgba(220, 220, 220, 0.9) !important; color: #000000 !important; border: none !important; -webkit-text-fill-color: #000000 !important; } [data-theme="dark"] .modal-content .btn-secondary { background: rgba(60, 60, 60, 0.9) !important; color: #ffffff !important; border: none !important; -webkit-text-fill-color: #ffffff !important; } .btn:active { transform: scale(0.95); } /* Enter Bloc Modal */ .enter-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 300; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Dark mode enter modal text */ [data-theme="dark"] #enter-modal, [data-theme="dark"] #enter-modal .enter-body, [data-theme="dark"] #enter-modal .post-info, [data-theme="dark"] #enter-modal .comments-section { background: #000000 !important; } [data-theme="dark"] .enter-modal .post-info *, [data-theme="dark"] .enter-modal .comments-section *, [data-theme="dark"] .enter-modal .comment-item *, [data-theme="dark"] .enter-modal h3, [data-theme="dark"] .enter-modal div, [data-theme="dark"] .enter-modal span, [data-theme="dark"] .enter-modal p, [data-theme="dark"] #enter-modal *, [data-theme="dark"] #enter-modal .enter-body *, [data-theme="dark"] #enter-modal .post-info *, [data-theme="dark"] #enter-modal .comments-section * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* DARK ACCENT ENTER MODAL - CYBERPUNK NEON */ [data-theme="dark-accent"] #enter-modal .comments-section { background: linear-gradient(135deg, #0a0a0a, #000000) !important; } [data-theme="dark-accent"] .enter-modal .post-info *, [data-theme="dark-accent"] .enter-modal .comments-section *, [data-theme="dark-accent"] .enter-modal .comment-item *, [data-theme="dark-accent"] .enter-modal h3, [data-theme="dark-accent"] .enter-modal div, [data-theme="dark-accent"] .enter-modal span, [data-theme="dark-accent"] .enter-modal p, [data-theme="dark-accent"] #enter-modal *, [data-theme="dark-accent"] #enter-modal .enter-body *, [data-theme="dark-accent"] #enter-modal .post-info *, [data-theme="dark-accent"] #enter-modal .comments-section * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="dark-accent"] .enter-modal, [data-theme="dark-accent"] #enter-modal { background: rgba(0, 0, 0, 0.95) !important; } [data-theme="dark-accent"] .enter-content { background: linear-gradient(135deg, #0a0a0a, #000000) !important; border: 1px solid rgba(var(--primary-rgb), 0.3) !important; box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.2); } /* Dark accent enter modal inputs */ [data-theme="dark-accent"] .enter-modal input, [data-theme="dark-accent"] .enter-modal textarea, [data-theme="dark-accent"] #enter-modal input, [data-theme="dark-accent"] #enter-modal textarea { background: linear-gradient(135deg, #0a0a0a, #000000) !important; border: 1px solid rgba(var(--primary-rgb), 0.4) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2); } [data-theme="dark-accent"] .enter-modal input:focus, [data-theme="dark-accent"] .enter-modal textarea:focus, [data-theme="dark-accent"] #enter-modal input:focus, [data-theme="dark-accent"] #enter-modal textarea:focus { border: 1px solid rgba(var(--primary-rgb), 0.6) !important; box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4); } /* Light mode enter modal text - HIGHEST PRIORITY */ [data-theme="light"] #enter-modal *, [data-theme="light"] .enter-modal *, [data-theme="light"] .enter-modal .post-info *, [data-theme="light"] .enter-modal .comments-section *, [data-theme="light"] .enter-modal .comment-item *, [data-theme="light"] .enter-modal h3, [data-theme="light"] .enter-modal div, [data-theme="light"] .enter-modal span, [data-theme="light"] .enter-modal p, [data-theme="light-accent"] #enter-modal *, [data-theme="light-accent"] .enter-modal *, [data-theme="light-accent"] .enter-modal .post-info *, [data-theme="light-accent"] .enter-modal .comments-section *, [data-theme="light-accent"] .enter-modal .comment-item *, [data-theme="light-accent"] .enter-modal h3, [data-theme="light-accent"] .enter-modal div, [data-theme="light-accent"] .enter-modal span, [data-theme="light-accent"] .enter-modal p { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } .enter-modal.active { display: block; } .enter-content { background: var(--surface-color); width: 100%; height: 100vh; overflow-x: hidden; overflow-y: auto; position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; z-index: 300; } /* Fix for drawer panels - ensure proper height constraints */ .enter-modal:not(#enter-modal) .enter-content { height: 100vh; max-height: 100vh; } .enter-modal:not(#enter-modal) .enter-body { flex: 1; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; max-height: calc(100vh - 80px); } .enter-header { padding: 16px; padding-top: calc(48px + var(--safe-area-top, 0px)); border-bottom: none; background: transparent; backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; } /* Bare 20px glyph with no hit area or press state — same treatment as the reply-bar dismiss so both back-to-feed controls match. */ .enter-close { background: color-mix(in srgb, var(--text-primary) 9%, transparent); border: none; color: var(--text-primary); font-size: 17px; cursor: pointer; padding: 0; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1), background 0.16s ease; } .enter-close i { transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1); } .enter-close:active { background: color-mix(in srgb, var(--text-primary) 16%, transparent); transform: scale(0.92); } .enter-close:active i { transform: translateY(2px); } @media (prefers-reduced-motion: reduce) { .enter-close, .enter-close i { transition-duration: 0.01ms; } } .enter-title { font-size: 18px; font-weight: 700; color: var(--text-primary); flex: 1; } .enter-body { padding: 16px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Proper bottom padding to clear mobile nav: nav bottom position + nav height + buffer */ /* REMOVED - Let content extend to bottom */ /* padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 50px + 10px) !important; */ } .enter-modal.active .enter-body { padding-bottom: calc(140px + var(--safe-area-bottom)); /* Extra space for comment input */ } /* Simple Twitter-style feed without containers */ #enter-modal { overflow: hidden; } #enter-modal .enter-body { height: auto; max-height: none; overflow: hidden; display: flex; flex-direction: column; /* Proper bottom padding to clear mobile nav */ /* REMOVED - Let content extend to bottom */ /* padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 50px + 10px) !important; */ } #enter-modal.active .enter-body { padding-bottom: calc(80px + var(--safe-area-bottom)); /* Space for comment input */ } #enter-modal.media-detail-active .enter-body { padding: 0 !important; padding-bottom: calc(82px + var(--safe-area-bottom)) !important; background: var(--background) !important; } #enter-modal.post-detail-page { background: var(--background) !important; background-color: var(--background-color, var(--background, #ffffff)) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } #enter-modal.post-detail-page.post-detail-paging #post-info { opacity: 0.72; transform: translateY(10px); transition: opacity 180ms ease, transform 180ms ease; } #enter-modal.post-detail-page, #enter-modal.post-detail-page .enter-content, #enter-modal.post-detail-page #post-info, #enter-modal.post-detail-page .enter-post-hero, #enter-modal.post-detail-page .enter-post-body, #enter-modal.post-detail-page .comments-section, #enter-modal.post-detail-page #comments-list { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light"] #enter-modal.post-detail-page, [data-theme="light"] #enter-modal.post-detail-page .enter-content, [data-theme="light"] #enter-modal.post-detail-page #post-info, [data-theme="light"] #enter-modal.post-detail-page .enter-post-hero, [data-theme="light"] #enter-modal.post-detail-page .enter-post-body, [data-theme="light"] #enter-modal.post-detail-page .comments-section, [data-theme="light"] #enter-modal.post-detail-page #comments-list, [data-theme="light-accent"] #enter-modal.post-detail-page, [data-theme="light-accent"] #enter-modal.post-detail-page .enter-content, [data-theme="light-accent"] #enter-modal.post-detail-page #post-info, [data-theme="light-accent"] #enter-modal.post-detail-page .enter-post-hero, [data-theme="light-accent"] #enter-modal.post-detail-page .enter-post-body, [data-theme="light-accent"] #enter-modal.post-detail-page .comments-section, [data-theme="light-accent"] #enter-modal.post-detail-page #comments-list { background: #ffffff !important; background-color: #ffffff !important; } [data-theme="dark"] #enter-modal.post-detail-page, [data-theme="dark"] #enter-modal.post-detail-page .enter-content, [data-theme="dark"] #enter-modal.post-detail-page #post-info, [data-theme="dark"] #enter-modal.post-detail-page .enter-post-hero, [data-theme="dark"] #enter-modal.post-detail-page .enter-post-body, [data-theme="dark"] #enter-modal.post-detail-page .comments-section, [data-theme="dark"] #enter-modal.post-detail-page #comments-list, [data-theme="dark-accent"] #enter-modal.post-detail-page, [data-theme="dark-accent"] #enter-modal.post-detail-page .enter-content, [data-theme="dark-accent"] #enter-modal.post-detail-page #post-info, [data-theme="dark-accent"] #enter-modal.post-detail-page .enter-post-hero, [data-theme="dark-accent"] #enter-modal.post-detail-page .enter-post-body, [data-theme="dark-accent"] #enter-modal.post-detail-page .comments-section, [data-theme="dark-accent"] #enter-modal.post-detail-page #comments-list { background: #050506 !important; background-color: #050506 !important; } #enter-modal.post-detail-page #post-info { position: static !important; top: auto !important; left: auto !important; right: auto !important; max-height: none !important; overflow: visible !important; z-index: auto !important; background: var(--background) !important; flex: 0 0 auto !important; } #enter-modal.post-detail-page .enter-content { display: none !important; } #enter-modal.post-detail-page #post-info-spacer { display: none !important; height: 0 !important; } #enter-modal.post-detail-page .comments-section { display: none !important; margin-top: 0 !important; padding: 0 !important; background: var(--background) !important; } #enter-modal.post-detail-page #comments-list { overflow: visible !important; padding: 0 18px 28px !important; } #enter-modal.post-detail-page .comment-item { padding: 15px 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent) !important; } #enter-modal.post-detail-page .comment-text { font-size: 14px !important; line-height: 1.45 !important; } #enter-modal.post-detail-page .post-detail-inline-replies { padding: 0 18px calc(112px + env(safe-area-inset-bottom, 0px)) !important; background: var(--background) !important; min-height: 0 !important; } #enter-modal.post-detail-page .post-detail-inline-reply { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent); } #enter-modal.post-detail-page .post-detail-inline-reply-avatar { width: 34px; height: 34px; border-radius: 11px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--text-primary) 7%, transparent); color: var(--text-primary); font-size: 12px; font-weight: 900; } #enter-modal.post-detail-page .post-detail-inline-reply-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } #enter-modal.post-detail-page .post-detail-inline-reply-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-bottom: 4px; } #enter-modal.post-detail-page .post-detail-inline-reply-author { color: var(--text-primary); font-size: 13px; font-weight: 900; line-height: 1; } #enter-modal.post-detail-page .post-detail-inline-reply-time { color: var(--text-secondary); font-size: 10px; font-weight: 800; line-height: 1; text-transform: uppercase; } #enter-modal.post-detail-page .post-detail-inline-reply-text { color: var(--text-primary); font-size: 14px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; } #enter-modal.post-detail-page .post-detail-inline-replies-empty { display: none !important; } #enter-modal.post-detail-page .post-detail-empty-icon { width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--text-primary) 8%, transparent); color: var(--text-primary); font-size: 15px; } #enter-modal.post-detail-page .post-detail-empty-title { font-size: 14px; font-weight: 900; letter-spacing: 0.02em; } #enter-modal.post-detail-page .post-detail-empty-copy { max-width: 220px; color: var(--text-secondary); font-size: 12px; font-weight: 700; line-height: 1.35; } #enter-modal.post-detail-page:not(.has-post-comments) .post-detail-replies-head { border-bottom: 0 !important; padding-bottom: 8px !important; } body.post-detail-open #global-comment-input { bottom: 0 !important; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important; background: color-mix(in srgb, var(--background, #fff) 94%, transparent) !important; border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important; box-shadow: 0 -12px 34px color-mix(in srgb, var(--text-primary) 8%, transparent) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } body.post-detail-open #global-comment-input > div { gap: 8px !important; } body.post-detail-open #comment-input { min-height: 32px !important; padding: 7px 12px !important; border-radius: 999px !important; font-size: 13px !important; background: color-mix(in srgb, var(--text-primary) 6%, transparent) !important; border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent) !important; } body.post-detail-open #global-comment-input button { width: 34px !important; height: 34px !important; min-width: 34px !important; padding: 0 !important; background: color-mix(in srgb, var(--text-primary) 6%, var(--background)) !important; border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important; box-shadow: 0 8px 24px color-mix(in srgb, var(--text-primary) 10%, transparent) !important; font-size: 14px !important; } [data-theme="dark"] body.post-detail-open #global-comment-input, [data-theme="dark-accent"] body.post-detail-open #global-comment-input, body[data-theme="dark"].post-detail-open #global-comment-input, body[data-theme="dark-accent"].post-detail-open #global-comment-input { background: linear-gradient(180deg, rgba(0,0,0,0.78), #000000 34%) !important; border-top-color: rgba(255,255,255,0.08) !important; box-shadow: 0 -18px 36px rgba(0,0,0,0.46) !important; color: #ffffff !important; } [data-theme="dark"] body.post-detail-open #comment-input, [data-theme="dark-accent"] body.post-detail-open #comment-input, body[data-theme="dark"].post-detail-open #comment-input, body[data-theme="dark-accent"].post-detail-open #comment-input { background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.16) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="dark"] body.post-detail-open #comment-input::placeholder, [data-theme="dark-accent"] body.post-detail-open #comment-input::placeholder, body[data-theme="dark"].post-detail-open #comment-input::placeholder, body[data-theme="dark-accent"].post-detail-open #comment-input::placeholder { color: rgba(255,255,255,0.62) !important; -webkit-text-fill-color: rgba(255,255,255,0.62) !important; } [data-theme="dark"] body.post-detail-open #global-comment-input button, [data-theme="dark-accent"] body.post-detail-open #global-comment-input button, body[data-theme="dark"].post-detail-open #global-comment-input button, body[data-theme="dark-accent"].post-detail-open #global-comment-input button { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.10) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="dark"] body.post-detail-open #global-comment-input button i, [data-theme="dark-accent"] body.post-detail-open #global-comment-input button i, body[data-theme="dark"].post-detail-open #global-comment-input button i, body[data-theme="dark-accent"].post-detail-open #global-comment-input button i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage, #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage [data-embed-scope], #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage .bloc-card-media-preview { min-height: min(36vh, 360px) !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage img, #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage video, #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage iframe { height: min(36vh, 360px) !important; min-height: 220px !important; } #enter-modal.media-detail-active .enter-header { position: fixed; left: 0; right: 0; top: 0; z-index: 30; padding-top: calc(env(safe-area-inset-top, 0px) + 14px); padding-bottom: 10px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0)) !important; backdrop-filter: none; -webkit-backdrop-filter: none; } [data-theme="light"] #enter-modal.media-detail-active .enter-header, [data-theme="light-accent"] #enter-modal.media-detail-active .enter-header { background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0)) !important; } #enter-modal.media-detail-active .post-info { min-height: 100%; } #enter-modal.media-detail-active #post-info { top: calc(env(safe-area-inset-top, 0px) + 12px) !important; max-height: calc(100vh - env(safe-area-inset-top, 0px) - 104px) !important; } .enter-post-hero { background: var(--background); padding: calc(env(safe-area-inset-top, 0px) + 28px) 20px 20px; position: relative; border-bottom: 1px solid var(--border-color); } .enter-post-hero.is-media { padding: calc(env(safe-area-inset-top, 0px) + 130px) 14px 24px; background: var(--background) !important; border-bottom: 0 !important; box-shadow: none !important; } .post-info > .enter-post-hero.is-media:first-child { background: var(--background) !important; border-bottom: 0 !important; } .post-info > .enter-post-hero.is-media:first-child::before { display: none !important; } .enter-post-author { display: flex; align-items: center; gap: 14px; } .enter-post-hero.is-media .enter-post-author { justify-content: center; gap: 10px; opacity: 0.94; min-height: 38px; } .enter-post-hero .enter-post-avatar { width: 58px; height: 58px; border-radius: 18px; background: transparent; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: white; flex-shrink: 0; overflow: hidden; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14); } .enter-post-hero.is-media .enter-post-avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); } .enter-post-author-name { margin: 0; font-size: 21px; font-weight: 900; color: var(--text-primary); line-height: 1.15; } .enter-post-hero.is-media .enter-post-author-name { font-size: 13px; letter-spacing: 0.02em; } .enter-post-time { font-size: 11px; color: var(--text-secondary); margin-top: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .enter-post-hero.is-media .enter-post-time { margin-top: 1px; font-size: 9px; } .enter-post-body { padding: 28px 20px; background: var(--background); } .enter-post-body.is-media { padding: 0 0 18px; } .enter-post-copy { font-size: 18px; line-height: 1.7; color: var(--text-primary); white-space: pre-wrap; max-width: 680px; margin: 0 auto; } .enter-post-copy.is-media-caption { width: min(92vw, 720px); font-size: 16px; line-height: 1.55; text-align: center; font-weight: 750; margin: 0 auto 12px; } .enter-detail-media-stage { width: 100vw; max-width: 100vw; margin: 0 auto; min-height: min(72vh, 720px); display: flex; align-items: center; justify-content: center; background: #070811; overflow: hidden; box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28); } .enter-detail-media-stage img, .enter-detail-media-stage video, .enter-detail-media-stage iframe { width: 100% !important; max-width: 100% !important; height: min(72vh, 720px) !important; max-height: none !important; min-height: 430px; object-fit: contain !important; display: block; background: #070811; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .enter-detail-media-stage [data-embed-scope], .enter-detail-media-stage .bloc-card-media-preview { width: 100%; min-height: min(72vh, 720px); border: 0 !important; border-radius: 0 !important; background: #070811 !important; } @media (max-width: 520px) { .enter-detail-media-stage, .enter-detail-media-stage [data-embed-scope], .enter-detail-media-stage .bloc-card-media-preview { min-height: 50vh; } .enter-detail-media-stage img, .enter-detail-media-stage video, .enter-detail-media-stage iframe { height: 50vh !important; min-height: 310px; } } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media { padding: calc(env(safe-area-inset-top, 0px) + 48px) 14px 16px; } /* Media sits inline at its own proportions, like X's post detail — the fixed 54vh stage forced a letterboxed slab and pushed the replies off screen regardless of the image's real shape. */ #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage, #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage [data-embed-scope], #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage .bloc-card-media-preview { min-height: 0; background: transparent; border-radius: 16px; overflow: hidden; } #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage img, #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage video, #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage iframe { height: auto !important; min-height: 0 !important; max-height: 62vh !important; width: 100% !important; object-fit: contain !important; border-radius: 16px !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-copy.is-media-caption { margin-top: 0 !important; margin-bottom: 12px !important; padding: 0 18px !important; } #enter-modal.post-detail-page.media-detail-active:not(.has-post-comments) .enter-detail-media-stage, #enter-modal.post-detail-page.media-detail-active:not(.has-post-comments) .enter-detail-media-stage [data-embed-scope], #enter-modal.post-detail-page.media-detail-active:not(.has-post-comments) .enter-detail-media-stage .bloc-card-media-preview { min-height: min(58vh, 620px) !important; } #enter-modal.post-detail-page.media-detail-active:not(.has-post-comments) .enter-detail-media-stage img, #enter-modal.post-detail-page.media-detail-active:not(.has-post-comments) .enter-detail-media-stage video, #enter-modal.post-detail-page.media-detail-active:not(.has-post-comments) .enter-detail-media-stage iframe { height: min(58vh, 620px) !important; min-height: 340px !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media { padding: calc(env(safe-area-inset-top, 0px) + 58px) 16px 14px !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media .enter-post-author { justify-content: flex-start !important; gap: 11px !important; min-height: 44px !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media .enter-post-avatar { width: 42px !important; height: 42px !important; border-radius: 13px !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media .enter-post-author-name { font-size: 15px !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media .enter-post-time { font-size: 9px !important; letter-spacing: 0.08em !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage, #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage [data-embed-scope], #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage .bloc-card-media-preview { min-height: 0 !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage img, #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage video, #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-detail-media-stage iframe { height: min(34vh, 350px) !important; min-height: 210px !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-body.is-media { padding-bottom: 8px !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-copy.is-media-caption { margin-top: 0 !important; margin-bottom: 9px !important; font-size: 14px !important; line-height: 1.35 !important; } #enter-modal.post-detail-page.has-post-comments .post-detail-engagement { padding-top: 10px !important; padding-bottom: 10px !important; } #enter-modal.post-detail-page.has-post-comments .post-detail-replies-head { padding-top: 10px !important; padding-bottom: 9px !important; } /* #post-info is already offset by safe-area-inset-top, so adding the inset here counted the notch twice and left a tall dead gap above the author on notched phones. Left-aligned like X's post header — the centred layout read as a title card rather than a post. */ #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media { padding: 16px 18px 12px !important; display: grid !important; align-content: start !important; justify-items: start !important; text-align: left !important; gap: 14px !important; /* The media below already separates the header from the body; a rule between them just cut the post in half. */ border-bottom: 0 !important; background: radial-gradient(circle at 50% 46px, color-mix(in srgb, var(--text-primary) 11%, transparent) 0 34px, transparent 86px), linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 4%, var(--background)) 0%, var(--background) 62%, var(--background) 100%) !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media::before { content: ''; position: absolute; left: 50%; /* Matches the hero's own padding now that the inset is not counted twice here; keyed to the inset it drifted below the content. */ top: 8px; width: 42px; height: 2px; border-radius: 999px; transform: translateX(-50%); background: color-mix(in srgb, var(--text-primary) 28%, transparent); } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-author { width: 100% !important; justify-content: flex-start !important; gap: 11px !important; opacity: 1 !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-avatar { width: 46px !important; height: 46px !important; border-radius: 14px !important; box-shadow: 0 10px 30px color-mix(in srgb, var(--text-primary) 18%, transparent) !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-author-name { font-size: 16px !important; line-height: 1 !important; letter-spacing: 0.01em !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-time { margin-top: 6px !important; font-size: 9px !important; line-height: 1.1 !important; letter-spacing: 0.12em !important; opacity: 0.72 !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-headline { max-width: min(82vw, 440px); color: var(--text-primary); font-size: clamp(20px, 7vw, 34px); line-height: 1.02; font-weight: 950; text-align: center; letter-spacing: 0; overflow-wrap: anywhere; text-wrap: balance; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media { padding: calc(env(safe-area-inset-top, 0px) + 34px) 18px 16px !important; min-height: 146px !important; gap: 12px !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-headline { font-size: clamp(18px, 6vw, 30px) !important; } /* PWA optimization for enter modal */ @media (display-mode: standalone) { .enter-body { padding-bottom: calc(75px + var(--safe-area-bottom, 20px)) !important; /* Reduced for PWA */ } .enter-modal.active .enter-body { padding-bottom: calc(80px + var(--safe-area-bottom)) !important; /* Reduced for PWA */ } } .post-info { background: var(--background); padding: 0; margin: 0; margin-bottom: 0; border: none; box-shadow: none; display: flex; flex-direction: column; } /* Magazine hero header */ .post-info > div:first-child { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(var(--accent-rgb), 0.08)); padding: 32px 24px 24px; border-bottom: 3px solid var(--primary-color); position: relative; } .post-info > div:first-child::before { content: ''; position: absolute; left: 24px; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--primary-color), var(--accent-color)); } /* Remove default color - will be set by theme */ #enter-modal.post-detail-page .post-info > .enter-post-hero:first-child { padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px 18px !important; min-height: 132px !important; display: grid !important; align-content: end !important; justify-items: center !important; gap: 12px !important; overflow: hidden !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 4%, var(--background)) 0%, var(--background) 64%, color-mix(in srgb, var(--text-primary) 3%, var(--background)) 100%) !important; } #enter-modal.post-detail-page .post-info > .enter-post-hero:first-child::before { display: none !important; } #enter-modal.post-detail-page .post-info > .enter-post-hero:first-child::after { content: ''; position: absolute; left: 50%; bottom: 0; width: min(72vw, 280px); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 22%, transparent), transparent); } #enter-modal.post-detail-page .enter-post-hero .enter-post-author { width: fit-content !important; max-width: min(92vw, 380px) !important; min-height: 42px !important; padding: 6px 12px 6px 7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent) !important; border-radius: 999px !important; background: color-mix(in srgb, var(--background) 88%, transparent) !important; box-shadow: 0 12px 34px color-mix(in srgb, var(--text-primary) 7%, transparent) !important; } #enter-modal.post-detail-page .enter-post-hero .enter-post-author > div:last-child { min-width: 0; text-align: left; } #enter-modal.post-detail-page .enter-post-hero .enter-post-avatar { width: 34px !important; height: 34px !important; border-radius: 11px !important; font-size: 14px !important; box-shadow: none !important; } #enter-modal.post-detail-page .enter-post-hero .enter-post-author-name { max-width: 210px; margin: 0 !important; color: var(--text-primary) !important; font-size: 13px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0.02em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #enter-modal.post-detail-page .enter-post-hero .enter-post-time { margin-top: 4px !important; color: var(--text-secondary) !important; font-size: 8px !important; /* Timestamp is metadata — 900 made it compete with the name. */ font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; white-space: nowrap; } #enter-modal.post-detail-page .enter-post-headline { max-width: min(86vw, 430px) !important; margin: 0 auto !important; color: var(--text-primary) !important; font-size: clamp(23px, 8vw, 38px) !important; line-height: 0.96 !important; font-weight: 950 !important; text-align: center !important; letter-spacing: 0 !important; overflow-wrap: anywhere !important; text-wrap: balance !important; } #enter-modal.post-detail-page.media-detail-active .post-info > .enter-post-hero:first-child { padding-bottom: 16px !important; min-height: 144px !important; border-bottom: 0 !important; background: linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 5%, var(--background)) 0%, var(--background) 66%, #070811 100%) !important; } #enter-modal.post-detail-page.media-detail-active .post-info > .enter-post-hero:first-child::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 18%, transparent), transparent); } #enter-modal.post-detail-page .post-info > .enter-post-hero:first-child { padding: calc(env(safe-area-inset-top, 0px) + 20px) 18px 14px !important; min-height: 138px !important; gap: 9px !important; background: var(--background) !important; border-bottom: 0 !important; } #enter-modal.post-detail-page .post-info > .enter-post-hero:first-child::after { display: none !important; } #enter-modal.post-detail-page .enter-post-hero .enter-post-author { width: auto !important; max-width: min(92vw, 360px) !important; min-height: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 7px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #enter-modal.post-detail-page .enter-post-hero .enter-post-author > div:last-child { text-align: center !important; } #enter-modal.post-detail-page .enter-post-hero .enter-post-avatar { width: 44px !important; height: 44px !important; border-radius: 14px !important; box-shadow: 0 10px 28px color-mix(in srgb, var(--text-primary) 13%, transparent) !important; } #enter-modal.post-detail-page .enter-post-hero .enter-post-author-name { max-width: 260px !important; font-size: 14px !important; line-height: 1 !important; text-align: center !important; } #enter-modal.post-detail-page .enter-post-hero .enter-post-time { margin-top: 5px !important; font-size: 8px !important; text-align: center !important; } #enter-modal.post-detail-page .enter-post-headline { margin-top: 2px !important; font-size: clamp(22px, 7.2vw, 34px) !important; line-height: 1 !important; } #enter-modal.post-detail-page.media-detail-active .post-info > .enter-post-hero:first-child { min-height: 150px !important; padding-bottom: 16px !important; background: var(--background) !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-body.is-media { order: 1 !important; padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 0 !important; background: #070811 !important; } #enter-modal.post-detail-page.media-detail-active .post-info > .enter-post-hero.is-media:first-child { order: 2 !important; min-height: 0 !important; padding: 18px 18px 16px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; background: var(--background) !important; border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent) !important; } #enter-modal.post-detail-page.media-detail-active .post-detail-engagement { order: 3 !important; } #enter-modal.post-detail-page.media-detail-active .post-detail-replies-head { order: 4 !important; } #enter-modal.post-detail-page.media-detail-active .post-detail-inline-replies { order: 5 !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-headline { order: 1 !important; margin: 0 auto !important; max-width: min(88vw, 460px) !important; font-size: clamp(21px, 7vw, 34px) !important; line-height: 1 !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-author { order: 2 !important; flex-direction: row !important; width: auto !important; max-width: min(92vw, 420px) !important; gap: 10px !important; opacity: 0.95 !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-author > div:last-child { text-align: left !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-avatar { width: 34px !important; height: 34px !important; border-radius: 11px !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--text-primary) 10%, transparent) !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-author-name, #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-time { text-align: left !important; } #enter-modal.post-detail-page.media-detail-active .post-info > .enter-post-hero.is-media:first-child { align-items: stretch !important; gap: 10px !important; padding: 16px 20px 14px !important; background: linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 4%, var(--background)) 0%, var(--background) 42%, var(--background) 100%) !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-author { order: 1 !important; align-self: center !important; width: min(100%, 360px) !important; justify-content: flex-start !important; flex-direction: row !important; padding: 0 !important; gap: 10px !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-avatar { width: 32px !important; height: 32px !important; border-radius: 10px !important; } /* 950 at 13px rendered as a black slab. Semibold is enough to mark the name as the heading of the post. */ #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-author-name { font-size: 13px !important; font-weight: 600 !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-time { margin-top: 4px !important; font-size: 8px !important; letter-spacing: 0.11em !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-headline { order: 2 !important; align-self: center !important; width: min(100%, 360px) !important; max-width: 360px !important; margin: 0 auto !important; color: var(--text-primary) !important; font-size: 16px !important; line-height: 1.3 !important; /* 800 at 15-16px read as a heavy slab. This is body copy, not a headline — keep it at normal reading weight. */ font-weight: 400 !important; text-align: left !important; letter-spacing: 0 !important; text-wrap: balance !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .post-info > .enter-post-hero.is-media:first-child { align-items: stretch !important; gap: 10px !important; padding: 16px 20px 14px !important; min-height: 0 !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media .enter-post-author { order: 1 !important; align-self: center !important; width: min(100%, 360px) !important; min-height: 0 !important; justify-content: flex-start !important; flex-direction: row !important; padding: 0 !important; gap: 10px !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media .enter-post-author > div:last-child { text-align: left !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media .enter-post-avatar { width: 32px !important; height: 32px !important; border-radius: 10px !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media .enter-post-author-name { font-size: 13px !important; font-weight: 600 !important; text-align: left !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media .enter-post-time { margin-top: 4px !important; font-size: 8px !important; letter-spacing: 0.11em !important; text-align: left !important; } #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media .enter-post-headline { order: 2 !important; align-self: center !important; width: min(100%, 360px) !important; max-width: 360px !important; margin: 0 auto !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 400 !important; text-align: left !important; } #enter-modal.post-detail-page:not(.media-detail-active) .enter-post-body { order: 1 !important; padding: calc(env(safe-area-inset-top, 0px) + 34px) 22px 18px !important; background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--text-primary) 5%, transparent), transparent 46%), var(--background) !important; } #enter-modal.post-detail-page:not(.media-detail-active) .enter-post-copy { width: min(100%, 390px) !important; max-width: 390px !important; min-height: 126px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--text-primary) !important; font-size: clamp(24px, 8.5vw, 42px) !important; line-height: 1.02 !important; font-weight: 950 !important; text-align: center !important; letter-spacing: 0 !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; text-wrap: balance !important; } #enter-modal.post-detail-page:not(.media-detail-active) .post-info > .enter-post-hero:first-child { order: 2 !important; min-height: 0 !important; padding: 2px 20px 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--background) !important; border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent) !important; } #enter-modal.post-detail-page:not(.media-detail-active) .enter-post-hero .enter-post-author { width: min(100%, 360px) !important; max-width: 360px !important; display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 10px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #enter-modal.post-detail-page:not(.media-detail-active) .enter-post-hero .enter-post-author > div:last-child { text-align: left !important; min-width: 0 !important; } #enter-modal.post-detail-page:not(.media-detail-active) .enter-post-hero .enter-post-avatar { width: 34px !important; height: 34px !important; border-radius: 11px !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--text-primary) 10%, transparent) !important; } #enter-modal.post-detail-page:not(.media-detail-active) .enter-post-hero .enter-post-author-name { max-width: 260px !important; font-size: 13px !important; font-weight: 600 !important; text-align: left !important; } #enter-modal.post-detail-page:not(.media-detail-active) .enter-post-hero .enter-post-time { margin-top: 4px !important; font-size: 8px !important; letter-spacing: 0.11em !important; text-align: left !important; } #enter-modal.post-detail-page:not(.media-detail-active) .post-detail-engagement { order: 3 !important; } #enter-modal.post-detail-page:not(.media-detail-active) .post-detail-replies-head { order: 4 !important; } #enter-modal.post-detail-page:not(.media-detail-active) .post-detail-inline-replies { order: 5 !important; } #enter-modal.post-detail-page .post-detail-engagement { padding: 12px 20px !important; border-top: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important; } #enter-modal.post-detail-page .post-detail-replies-head { padding: 11px 20px 10px !important; border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent) !important; } #enter-modal.post-detail-page .post-detail-inline-replies { padding-top: 8px !important; } #enter-modal.post-detail-page.media-detail-active .post-info > .enter-post-hero.is-media:first-child, #enter-modal.post-detail-page.has-post-comments.media-detail-active .post-info > .enter-post-hero.is-media:first-child { padding-top: 14px !important; padding-bottom: 13px !important; gap: 8px !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-author, #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media .enter-post-author, #enter-modal.post-detail-page:not(.media-detail-active) .enter-post-hero .enter-post-author { width: min(100%, 360px) !important; } /* Reading copy: X-style size and leading. 15px at 1.28 was cramped enough that longer posts read as a wall. */ #enter-modal.post-detail-page.media-detail-active .enter-post-hero.is-media .enter-post-headline, #enter-modal.post-detail-page.has-post-comments.media-detail-active .enter-post-hero.is-media .enter-post-headline { margin-top: 8px !important; font-size: 17px !important; line-height: 1.45 !important; text-align: left !important; width: 100% !important; max-width: 100% !important; } #enter-modal.post-detail-page:not(.media-detail-active) .enter-post-body { padding-top: calc(env(safe-area-inset-top, 0px) + 24px) !important; padding-bottom: 12px !important; } #enter-modal.post-detail-page:not(.media-detail-active) .enter-post-copy { min-height: 104px !important; font-size: clamp(22px, 7.8vw, 36px) !important; } #enter-modal.post-detail-page:not(.media-detail-active) .post-info > .enter-post-hero:first-child { padding-top: 0 !important; padding-bottom: 13px !important; } #enter-modal.post-detail-page { overflow: hidden !important; height: 100dvh !important; } #enter-modal.post-detail-page #post-info { height: calc(100dvh - 54px - env(safe-area-inset-bottom, 0px)) !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #enter-modal.post-detail-page .enter-post-body, #enter-modal.post-detail-page .enter-post-hero, #enter-modal.post-detail-page .post-detail-engagement, #enter-modal.post-detail-page .post-detail-replies-head { flex: 0 0 auto !important; } #enter-modal.post-detail-page:not(.has-post-comments) .post-detail-inline-replies { display: none !important; } #enter-modal.post-detail-page.has-post-comments .post-detail-inline-replies { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important; } /* Bloc stage cleanup: regular feed already dropped the extra card chrome. */ #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage, #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage [data-embed-scope], #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage .bloc-card-media-preview { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } #enter-modal.post-detail-page.media-detail-active .enter-post-copy.is-media-caption, #enter-modal.post-detail-page.media-detail-active .enter-post-headline { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Back-to-feed control. A 40px circle with a hairline border read as a disabled input next to the reply field; this gives it a real 44px target, a filled surface so it looks pressable, and a press state that moves the chevron the way it will move the sheet. */ .post-detail-dismiss { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1; color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 9%, transparent); -webkit-tap-highlight-color: transparent; transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1), background 0.16s ease; } .post-detail-dismiss i { transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1); } .post-detail-dismiss:active { background: color-mix(in srgb, var(--text-primary) 16%, transparent); transform: scale(0.92); } /* Nudge the chevron down on press — a small preview of the dismiss. */ .post-detail-dismiss:active i { transform: translateY(2px); } @media (prefers-reduced-motion: reduce) { .post-detail-dismiss, .post-detail-dismiss i { transition-duration: 0.01ms; } } .post-content { font-size: 16px; line-height: 1.6; margin-top: 16px; margin-bottom: 16px; } .comments-section { margin-top: 20px; flex: 1; display: flex; flex-direction: column; min-height: 0; } #comments-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 140px 16px; } /* Scrollbar styling for comments list */ #comments-list::-webkit-scrollbar { width: 6px; } #comments-list::-webkit-scrollbar-track { background: transparent; } #comments-list::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 3px; } #comments-list::-webkit-scrollbar-thumb:hover { background: var(--primary-color); opacity: 0.8; } .comments-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; font-weight: 600; flex-shrink: 0; } /* Dark mode comment styles */ [data-theme="dark"] .comments-header, [data-theme="dark"] .comment-item, [data-theme="dark"] .comment-item *, [data-theme="dark"] .comment-author, [data-theme="dark"] .comment-text, [data-theme="dark"] .comment-time { color: #ffffff !important; } /* Light mode comment styles */ [data-theme="light"] .comments-header, [data-theme="light"] .comment-item, [data-theme="light"] .comment-item *, [data-theme="light"] .comment-author, [data-theme="light"] .comment-text, [data-theme="light"] .comment-time, [data-theme="light-accent"] .comments-header, [data-theme="light-accent"] .comment-item, [data-theme="light-accent"] .comment-item *, [data-theme="light-accent"] .comment-author, [data-theme="light-accent"] .comment-text, [data-theme="light-accent"] .comment-time { color: #000000 !important; } .comment-item { background: transparent; border-radius: 0; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding: 12px 0; margin: 0; position: relative; box-shadow: none; } [data-theme="dark"] .comment-item { border-bottom-color: rgba(255, 255, 255, 0.1); } #comments-list .comment-item + .comment-item { margin-top: 0; } #comments-list .comment-item + .comment-item::before { display: none; } .comment-author { font-weight: 600; color: var(--primary-color); font-size: 12px; margin-bottom: 3px; } .comment-text { font-size: 13px; color: var(--text-primary); line-height: 1.3; } .comment-time { font-size: 10px; color: var(--text-secondary); opacity: 0.6; margin-top: 3px; } .bytes-comments-modal { background: var(--surface-background-color, #ffffff); color: var(--text-primary); } .bytes-comments-header { border-bottom: none; } [data-theme="dark"] .bytes-comments-header { border-bottom: none; } .bytes-comments-close { color: var(--text-primary); } .bytes-comments-list { padding: 0; } .bytes-comment-item { background: transparent; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.06); border-radius: 0; padding: 12px 20px; position: relative; box-shadow: none; } [data-theme="dark"] .bytes-comment-item { border-bottom-color: rgba(255, 255, 255, 0.1); } .bytes-comment-item + .bytes-comment-item { margin-top: 0; } .bytes-comment-item + .bytes-comment-item::before { display: none; } .bytes-comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .bytes-comment-author { color: var(--primary-color); font-weight: 700; font-size: 13px; } .bytes-comment-time { color: var(--text-secondary); font-size: 10px; } .bytes-comment-text { color: var(--text-primary); margin-left: 36px; line-height: 1.3; font-size: 13px; } .bytes-comments-modal input[id^="bytes-comment-input-"], .bytes-comments-modal input[id^="bytes-comment-input-"]:focus, .bytes-comments-modal input[id^="bytes-comment-input-"]:active { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; caret-color: #0f172a !important; border: 1px solid rgba(15, 23, 42, 0.14) !important; box-shadow: none !important; outline: none !important; color-scheme: light !important; appearance: none !important; -webkit-appearance: none !important; } .bytes-comments-modal input[id^="bytes-comment-input-"]::placeholder { color: rgba(15, 23, 42, 0.48) !important; -webkit-text-fill-color: rgba(15, 23, 42, 0.48) !important; } /* Dark, like the room it opens over. This sheet is shared with the light-themed feed, so its default stays light -- but the moments cinema (body.mcin-locked, set by mobile-cinema.js while it's open) is always dark, and the white sheet TV already fixed for its own page showed up here too, unfixed. Mirrors bytes-tv-cinema.css's dark comment sheet rather than copying it, since this one is a reusable modal instead of a page-specific overlay. */ /* The byte's action sheet and its delete confirm sit above the cinema for the same reason the chat sheet does: the cinema's layer is at the top of the stack, and a sheet opened from it must clear it. */ body.mcin-locked #bytes-action-center, body.mcin-locked #bytes-delete-confirm { z-index: 2147483200 !important; } body.mcin-locked .bytes-comments-modal { background: rgba(20, 20, 22, 0.98) !important; color: rgba(255, 255, 255, 0.96) !important; border-top: 1px solid rgba(255, 255, 255, 0.14); } body.mcin-locked .bytes-comments-close { color: rgba(255, 255, 255, 0.7) !important; } body.mcin-locked .bytes-comment-item { border-bottom-color: rgba(255, 255, 255, 0.1); } body.mcin-locked .bytes-comment-text { color: rgba(255, 255, 255, 0.92); } body.mcin-locked .bytes-comment-time { color: rgba(255, 255, 255, 0.5); } body.mcin-locked .bytes-comments-list > div[style*="color: var(--text-secondary)"] { color: rgba(255, 255, 255, 0.5) !important; } body.mcin-locked .bytes-comments-modal input[id^="bytes-comment-input-"], body.mcin-locked .bytes-comments-modal input[id^="bytes-comment-input-"]:focus, body.mcin-locked .bytes-comments-modal input[id^="bytes-comment-input-"]:active { background: rgba(255, 255, 255, 0.08) !important; background-color: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.94) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important; caret-color: rgba(255, 255, 255, 0.94) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color-scheme: dark !important; } body.mcin-locked .bytes-comments-modal input[id^="bytes-comment-input-"]::placeholder { color: rgba(255, 255, 255, 0.4) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.4) !important; } .bytes-comments-composer--gated { display: block !important; } .bytes-comments-join { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px; } .bytes-comments-join span { font-size: 13px; font-weight: 600; color: #63635F; } .bytes-comments-join button { height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: #111214; color: #FBFBF9; -webkit-text-fill-color: #FBFBF9; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; } body.mcin-locked .bytes-comments-join span { color: rgba(244, 244, 242, 0.7) !important; -webkit-text-fill-color: rgba(244, 244, 242, 0.7) !important; } body.mcin-locked .bytes-comments-join button { background: #f4f4f2 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; } body.mcin-locked .bytes-comments-composer { background: rgba(20, 20, 22, 0.98) !important; border-top-color: rgba(255, 255, 255, 0.14) !important; color-scheme: dark !important; } body.mcin-locked .bytes-comments-composer button { color: rgba(255, 255, 255, 0.94) !important; } #global-comment-input.show { display: flex; } .comment-input { flex: 1; border-radius: 20px !important; padding: 10px 16px !important; font-size: 13px !important; outline: none !important; background: #ffffff; color: #000000; } /* Dark mode comment input */ [data-theme="dark"] .comment-input { background: var(--input-background-color) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Light mode comment input - FORCE WHITE BG */ [data-theme="light"] .comment-input, [data-theme="light-accent"] .comment-input, [data-theme="light"] #comment-input, [data-theme="light-accent"] #comment-input, [data-theme="light"] input#comment-input.comment-input, [data-theme="light-accent"] input#comment-input.comment-input { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="dark"] .comment-input::placeholder { color: var(--text-secondary) !important; } [data-theme="light"] .comment-input::placeholder, [data-theme="light-accent"] .comment-input::placeholder { color: rgba(0, 0, 0, 0.6) !important; } /* Removed generic rules - theme-specific rules handle this */ .send-comment-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-color); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* Fire panel buttons styling */ .fire-panel-button { position: fixed; bottom: var(--mobile-bottom-nav-height, calc(58px + env(safe-area-inset-bottom, 0px))); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border: none; padding: 12px 24px; border-radius: 24px; font-weight: 600; font-size: 14px; box-shadow: 0 4px 12px var(--text-primary); cursor: pointer; z-index: 999; transition: all 0.3s ease; } .fire-panel-button:active { transform: translateX(-50%) scale(0.95); box-shadow: 0 2px 8px var(--text-primary); } /* Enhanced Business Markers */ .business-marker { z-index: 1000 !important; } .business-marker div { animation: businessMarkerPulse 2s ease-in-out infinite alternate; } @keyframes businessMarkerPulse { 0% { box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16), 0 0 0 3px rgba(255,255,255,0.88); } 100% { box-shadow: 0 12px 26px rgba(15, 23, 42, 0.2), 0 0 0 4px rgba(255,255,255,0.9); } } .business-marker:hover div { animation: businessMarkerHover 0.3s ease-out forwards; } @keyframes businessMarkerHover { to { transform: scale(1.1); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22), 0 0 0 5px rgba(255,255,255,0.92); } } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } /* Hide Google Maps built-in labels on 3D map that might show through */ gmp-map-3d::part(place-label), gmp-map-3d::part(label), gmp-map-3d::part(text), gmp-map-3d [class*="label"], gmp-map-3d [class*="text"], gmp-map-3d [class*="place"] { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* Hide Google Maps 3D built-in controls */ gmp-map-3d::part(control-container), gmp-map-3d::part(controls), gmp-map-3d::part(zoom-control), gmp-map-3d::part(compass-control), gmp-map-3d::part(pan-control), gmp-map-3d::part(tilt-control), gmp-map-3d [class*="control"], gmp-map-3d [class*="button"], gmp-map-3d button, gmp-map-3d [role="button"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Settings dropdown hover effects */ .settings-menu-item:hover { background: var(--text-primary); transform: translateX(2px); } /* Theme selector options styling - theme aware */ [data-theme="dark"] #mobile-theme-selector option { background: #333333 !important; color: #ffffff !important; } [data-theme="light"] #mobile-theme-selector option, [data-theme="light-accent"] #mobile-theme-selector option { background: #ffffff !important; color: #000000 !important; } [data-theme="dark"] select#mobile-theme-selector { color: #ffffff !important; } [data-theme="light"] select#mobile-theme-selector, [data-theme="light-accent"] select#mobile-theme-selector { color: #000000 !important; } /* Toggle switch styling for tab visibility */ input[type="checkbox"]:checked + span { background-color: var(--primary-color) !important; } input[type="checkbox"]:checked + span + span { transform: translateX(26px); } input[type="checkbox"] + span { background-color: #ccc; } /* Hide interactive elements for view-only mode */ #community-panel-btn, /* #mobile-bytes-upload-btn, -- Commented out, controlled by bytes-active rule */ #mobile-shop-panel-btn, #header-settings-button, #mobile-community-panel, #mobile-bytes-panel, .modal-overlay { display: none !important; } /* Completely hide virtual and stream panels */ #mobile-virtual-panel, #mobile-stream-panel, .mobile-virtual-panel-btn, .mobile-stream-panel-btn { display: none !important; visibility: hidden !important; } /* Font selector styling - force readable light controls on iOS */ #mobile-font-family-selector, #mobile-font-weight-selector { background: #ffffff !important; color: #080808 !important; -webkit-text-fill-color: #080808 !important; caret-color: #080808 !important; color-scheme: light !important; } #mobile-font-family-selector option, #mobile-font-weight-selector option { background: #ffffff !important; color: #080808 !important; -webkit-text-fill-color: #080808 !important; } [data-theme="dark"] #mobile-font-family-selector, [data-theme="dark"] #mobile-font-weight-selector, [data-theme="dark"] #mobile-font-family-selector option, [data-theme="dark"] #mobile-font-weight-selector option { background: #ffffff !important; color: #080808 !important; -webkit-text-fill-color: #080808 !important; caret-color: #080808 !important; color-scheme: light !important; } /* Font preset button hover effects */ .font-preset-btn { transition: all 0.2s ease-in-out !important; transform: scale(1) !important; position: relative !important; border: 2px solid transparent !important; } .font-preset-btn:hover { transform: scale(1.05) !important; border: 3px solid var(--primary-color) !important; box-shadow: 0 0 20px var(--primary-color), 0 4px 12px rgba(var(--primary-rgb), 0.4) !important; } .font-preset-btn:active { transform: scale(0.9) !important; transition: all 0.05s ease-in-out !important; filter: brightness(1.2) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) inset !important; } /* Add click animation class */ .font-preset-clicked { animation: clickPulse 0.3s ease-out !important; } @keyframes clickPulse { 0% { transform: scale(1); } 50% { transform: scale(0.9); filter: brightness(1.3); } 100% { transform: scale(1); } } /* Fallback for FontAwesome icons if they don't load */ .fas:before, .fa:before { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif !important; font-weight: 900 !important; font-style: normal !important; } /* Ensure mobile nav icons are visible */ .mobile-nav-tab i { font-size: 20px !important; /* Larger, clearer icons */ margin-bottom: 3px !important; display: block !important; color: inherit !important; } /* Force icon visibility with fallback unicode */ .fa-users:before { content: "👥"; } .fa-video:before { content: "\f03d"; } .fa-map:before { content: "\f279"; } .fa-coins:before { content: "🪙"; } .fa-shopping-cart:before { content: "🛒"; } .fa-broadcast-tower:before { content: "📡"; } .fa-robot:before { content: "🤖"; } /* Mobile toggle switch styles */ .mobile-toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; } .mobile-toggle-switch input { opacity: 0; width: 0; height: 0; } .mobile-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.2); transition: 0.3s; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.3); } .mobile-toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background- transition: 0.3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .mobile-toggle-switch input:checked + .mobile-toggle-slider { background: linear-gradient(135deg, var(--primary-color), rgba(var(--primary-rgb), 0.8)); border-color: var(--primary-color); } .mobile-toggle-switch input:checked + .mobile-toggle-slider:before { transform: translateX(22px); background- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .mobile-toggle-slider:hover { box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3); } /* ABSOLUTE NUCLEAR OVERRIDE - LAST RULE WINS */ input#drawer-visitor-code { background: var(--input-bg) !important; background-color: var(--input-bg) !important; color: var(--input-text) !important; } [data-theme="light"] { --input-bg: #ffffff !important; --input-text: #000000 !important; --text-primary: #000000 !important; --text-secondary: rgba(0, 0, 0, 0.6) !important; --card-bg: #f5f5f5 !important; --border-color: #e0e0e0 !important; --input-background-color: #ffffff !important; --surface-color: #ffffff !important; } [data-theme="light-accent"] { --input-bg: #ffffff !important; --input-text: #000000 !important; --text-primary: #000000 !important; --text-secondary: rgba(0, 0, 0, 0.6) !important; --card-bg: rgba(255, 255, 255, 0.82) !important; --border-color: rgba(0, 0, 0, 0.10) !important; --input-background-color: rgba(255, 255, 255, 0.94) !important; --surface-color: rgba(255, 255, 255, 0.86) !important; --background-color: #fbfbfc !important; --bg-primary: #fbfbfc !important; --bg-secondary: color-mix(in srgb, var(--accent-color) 7%, #ffffff 93%) !important; color-scheme: light; } [data-theme="dark"] { --input-bg: rgba(255, 255, 255, 0.05) !important; --input-text: #ffffff !important; --text-primary: #ffffff !important; --text-secondary: rgba(255, 255, 255, 0.6) !important; --card-bg: rgba(255, 255, 255, 0.05) !important; --border-color: rgba(255, 255, 255, 0.1) !important; } /* GLOBAL NUCLEAR OVERRIDE FOR ALL MODALS IN LIGHT MODE */ [data-theme="light"] .modal-content, [data-theme="light"] [class*="modal"], [data-theme="light-accent"] .modal-content, [data-theme="light-accent"] [class*="modal"] { color: #000000 !important; } [data-theme="light"] .modal-content *, [data-theme="light"] [class*="modal"] *, [data-theme="light-accent"] .modal-content *, [data-theme="light-accent"] [class*="modal"] * { color: #000000 !important; } [data-theme="light"] input { background: transparent !important; color: black !important; -webkit-text-fill-color: black !important; } [data-theme="light-accent"] input, [data-theme="light-accent"] textarea, [data-theme="light-accent"] select { background: rgba(255, 255, 255, 0.94) !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; caret-color: #000000 !important; color-scheme: light; } [data-theme="dark"] input { background: rgba(255, 255, 255, 0.1) !important; color: white !important; -webkit-text-fill-color: white !important; } /* USE EVERY POSSIBLE SELECTOR TO FORCE WHITE BACKGROUND */ :where([data-theme="light"]) :where(#drawer-visitor-code) { background: #ffffff !important; background-color: #ffffff !important; color: #000000 !important; } :where([data-theme="light-accent"]) :where(#drawer-visitor-code) { background: #ffffff !important; background-color: #ffffff !important; color: #000000 !important; } /* NUCLEAR OVERRIDE for Enter BLOC Modal Header */ #enter-modal .enter-header * { color: var(--text-primary, inherit) !important; } /* ULTRA NUCLEAR - Target exact elements with maximum specificity */ body[data-theme="light"] #enter-modal .enter-header h3.enter-title, html[data-theme="light"] body #enter-modal .enter-header h3.enter-title, [data-theme="light"] .enter-modal#enter-modal .enter-header h3.enter-title { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } body[data-theme="light"] #enter-modal .enter-header button.enter-close, body[data-theme="light"] #enter-modal .enter-header button.enter-close i, html[data-theme="light"] body #enter-modal .enter-header button.enter-close, html[data-theme="light"] body #enter-modal .enter-header button.enter-close i { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } body[data-theme="light-accent"] #enter-modal .enter-header h3.enter-title, html[data-theme="light-accent"] body #enter-modal .enter-header h3.enter-title, [data-theme="light-accent"] .enter-modal#enter-modal .enter-header h3.enter-title { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } body[data-theme="light-accent"] #enter-modal .enter-header button.enter-close, body[data-theme="light-accent"] #enter-modal .enter-header button.enter-close i, html[data-theme="light-accent"] body #enter-modal .enter-header button.enter-close, html[data-theme="light-accent"] body #enter-modal .enter-header button.enter-close i { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } body[data-theme="dark"] #enter-modal .enter-header h3.enter-title, html[data-theme="dark"] body #enter-modal .enter-header h3.enter-title, [data-theme="dark"] .enter-modal#enter-modal .enter-header h3.enter-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body[data-theme="dark"] #enter-modal .enter-header button.enter-close, body[data-theme="dark"] #enter-modal .enter-header button.enter-close i, html[data-theme="dark"] body #enter-modal .enter-header button.enter-close, html[data-theme="dark"] body #enter-modal .enter-header button.enter-close i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Also override when modal is active */ [data-theme="light"] #enter-modal.active .enter-header *, [data-theme="light-accent"] #enter-modal.active .enter-header * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } [data-theme="dark"] #enter-modal.active .enter-header * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Upload Access Section Theme Support */ [data-theme="light"] #bytes-visitor-code, [data-theme="light-accent"] #bytes-visitor-code { background: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 1px solid #e0e0e0 !important; } [data-theme="dark"] #bytes-visitor-code { background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } [data-theme="light"] #bytes-permission-indicator, [data-theme="light-accent"] #bytes-permission-indicator, [data-theme="light"] #bytes-permission-indicator *, [data-theme="light-accent"] #bytes-permission-indicator * { color: #000000 !important; } [data-theme="dark"] #bytes-permission-indicator, [data-theme="dark"] #bytes-permission-indicator * { color: #ffffff !important; } /* Enter header background fixes */ [data-theme="light"] .enter-header, [data-theme="light-accent"] .enter-header { background: transparent !important; } [data-theme="dark"] .enter-header { background: #000000 !important; } /* ABSOLUTE FINAL NUCLEAR OVERRIDE FOR COMMENT INPUT */ html body[data-theme="light"] input#comment-input.comment-input, html body[data-theme="light"] div#global-comment-input input.comment-input, html body[data-theme="light"] input[type="text"]#comment-input, body[data-theme="light"] #global-comment-input input[type="text"], [data-theme="light"] input#comment-input[type="text"], [data-theme="light"] .comment-input-wrapper input[type="text"] { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; } /* Also for light-accent */ html body[data-theme="light-accent"] input#comment-input.comment-input, html body[data-theme="light-accent"] div#global-comment-input input.comment-input, html body[data-theme="light-accent"] input[type="text"]#comment-input, body[data-theme="light-accent"] #global-comment-input input[type="text"], [data-theme="light-accent"] input#comment-input[type="text"], [data-theme="light-accent"] .comment-input-wrapper input[type="text"] { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; } /* ABSOLUTE FINAL NUCLEAR OVERRIDE - LAST RULE WINS */ /* Place this at the very end to ensure maximum priority */ html body[data-theme="light"] div#enter-modal div.enter-header h3.enter-title, html body[data-theme="light-accent"] div#enter-modal div.enter-header h3.enter-title { color: #000000 !important; -webkit-text-fill-color: #000000 !important; text-fill-color: #000000 !important; } html body[data-theme="light"] div#enter-modal div.enter-header button.enter-close, html body[data-theme="light"] div#enter-modal div.enter-header button.enter-close i.fas.fa-arrow-left, html body[data-theme="light-accent"] div#enter-modal div.enter-header button.enter-close, html body[data-theme="light-accent"] div#enter-modal div.enter-header button.enter-close i.fas.fa-arrow-left { color: #000000 !important; -webkit-text-fill-color: #000000 !important; text-fill-color: #000000 !important; } html body[data-theme="dark"] div#enter-modal div.enter-header h3.enter-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-fill-color: #ffffff !important; } html body[data-theme="dark"] div#enter-modal div.enter-header button.enter-close, html body[data-theme="dark"] div#enter-modal div.enter-header button.enter-close i.fas.fa-arrow-left { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-fill-color: #ffffff !important; } /* ULTIMATE FINAL FIX FOR COMMENT INPUT - MUST BE LAST */ [data-theme="light"] #comment-input { background: #ffffff !important; background-color: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* GLASSMORPHISM FOR LIGHT-ACCENT THEME */ [data-theme="light-accent"] #community-drawer, [data-theme="light-accent"] #booking-drawer, [data-theme="light-accent"] #shop-drawer, [data-theme="light-accent"] #bytes-drawer, [data-theme="light-accent"] #virtual-drawer, [data-theme="light-accent"] #stream-drawer, [data-theme="light-accent"] #market-drawer, [data-theme="light-accent"] .drawer-panel, [data-theme="light-accent"] [id*="drawer"] { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } /* BOOKING AREA - SAME AS SHOP GLASS BACKGROUND IN LIGHT-ACCENT */ [data-theme="light-accent"] #booking-main-area { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } [data-theme="light-accent"] #booking-main-area > div { background: transparent !important; } [data-theme="light-accent"] #booking-main-area *, [data-theme="light-accent"] .booking-main-area * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Glass effect for light-accent modals */ [data-theme="light-accent"] [style*="position: fixed"][style*="background"] { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } /* Ensure text is black in light-accent glassmorphism */ [data-theme="light-accent"] #community-drawer *, [data-theme="light-accent"] #booking-drawer *, [data-theme="light-accent"] #shop-drawer *, [data-theme="light-accent"] #bytes-drawer *, [data-theme="light-accent"] #virtual-drawer *, [data-theme="light-accent"] #stream-drawer *, [data-theme="light-accent"] #market-drawer *, [data-theme="light-accent"] .drawer-panel * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Glass inputs for light-accent */ [data-theme="light-accent"] input, [data-theme="light-accent"] textarea, [data-theme="light-accent"] select { background: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } /* NUCLEAR FORCE - ALL MODAL TEXT AND PLACEHOLDERS */ /* Light mode - ALL modal text should be BLACK */ [data-theme="light"] [style*="position: fixed"], [data-theme="light"] [style*="position: fixed"] *, [data-theme="light-accent"] [style*="position: fixed"], [data-theme="light-accent"] [style*="position: fixed"] * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Light mode - Input placeholders should be gray */ [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder, [data-theme="light-accent"] input::placeholder, [data-theme="light-accent"] textarea::placeholder { color: #666666 !important; -webkit-text-fill-color: #666666 !important; opacity: 1 !important; } /* Light mode - Input backgrounds for ALL inputs */ [data-theme="light"] input[type="text"]:not(#mobile-agent-input):not(#modal-route-from-input):not(#modal-route-to-input):not(#community-quick-compose-input):not(#mobile-bloc-name-input), [data-theme="light"] input[type="email"], [data-theme="light"] input[type="tel"], [data-theme="light"] input[type="password"], [data-theme="light"] input[type="number"], [data-theme="light"] textarea, [data-theme="light"] select, [data-theme="light-accent"] input[type="text"]:not(#modal-route-from-input):not(#modal-route-to-input):not(#community-quick-compose-input):not(#mobile-bloc-name-input), [data-theme="light-accent"] input[type="email"], [data-theme="light-accent"] input[type="tel"], [data-theme="light-accent"] input[type="password"], [data-theme="light-accent"] input[type="number"], [data-theme="light-accent"] textarea, [data-theme="light-accent"] select { background: rgba(255, 255, 255, 0.95) !important; background-color: rgba(255, 255, 255, 0.95) !important; border-color: #cccccc !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Exception: Remove border from map search pill */ #virtual-map-search { border: 0 !important; border-color: transparent !important; border-radius: 999px !important; -webkit-border-radius: 999px !important; -moz-border-radius: 999px !important; } /* Dark mode - Input placeholders should be light gray */ [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder, input::placeholder, textarea::placeholder { color: #aaaaaa !important; -webkit-text-fill-color: #aaaaaa !important; opacity: 1 !important; } /* Dark mode - Input backgrounds for ALL inputs */ [data-theme="dark"] input[type="text"]:not(#modal-route-from-input):not(#modal-route-to-input):not(#community-quick-compose-input):not(#mobile-bloc-name-input), [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] textarea, [data-theme="dark"] select, input[type="text"]:not([data-theme]):not(#modal-route-from-input):not(#modal-route-to-input):not(#community-quick-compose-input):not(#mobile-bloc-name-input), input[type="email"]:not([data-theme]), input[type="tel"]:not([data-theme]), input[type="password"]:not([data-theme]), input[type="number"]:not([data-theme]), textarea:not([data-theme]), select:not([data-theme]) { background: rgba(0, 0, 0, 0.5) !important; background-color: rgba(0, 0, 0, 0.5) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Square Payment Modal specific fixes */ [data-theme="light"] #square-email, [data-theme="light"] #square-phone, [data-theme="light"] #square-first-name, [data-theme="light"] #square-last-name, [data-theme="light-accent"] #square-email, [data-theme="light-accent"] #square-phone, [data-theme="light-accent"] #square-first-name, [data-theme="light-accent"] #square-last-name { background: white !important; color: black !important; -webkit-text-fill-color: black !important; } [data-theme="light"] #square-email::placeholder, [data-theme="light"] #square-phone::placeholder, [data-theme="light"] #square-first-name::placeholder, [data-theme="light"] #square-last-name::placeholder, [data-theme="light-accent"] #square-email::placeholder, [data-theme="light-accent"] #square-phone::placeholder, [data-theme="light-accent"] #square-first-name::placeholder, [data-theme="light-accent"] #square-last-name::placeholder { color: #999999 !important; -webkit-text-fill-color: #999999 !important; } /* NUCLEAR CSS FIX: Modal text colors - MAXIMUM SPECIFICITY */ /* Custom Domain Modal - Light Accent Mode */ [data-theme="light-accent"] #custom-domain-modal, [data-theme="light-accent"] #custom-domain-modal *, [data-theme="light-accent"] .light-accent-modal, [data-theme="light-accent"] .light-accent-modal * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* LIGHT MODE: Force ALL text BLACK, ALL backgrounds WHITE */ html[data-theme="light"] body .modal, html[data-theme="light"] body [id*="modal"], html[data-theme="light"] body [class*="modal"], html[data-theme="light"] body [style*="position: fixed"], html[data-theme="light"] body div[style*="position: fixed"], html[data-theme="light-accent"] body .modal, html[data-theme="light-accent"] body [id*="modal"], html[data-theme="light-accent"] body [class*="modal"], html[data-theme="light-accent"] body [style*="position: fixed"], html[data-theme="light-accent"] body div[style*="position: fixed"] { background: #ffffff !important; background-color: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* LIGHT MODE: ALL TEXT ELEMENTS - NUCLEAR OVERRIDE */ html[data-theme="light"] body .modal *, html[data-theme="light"] body [id*="modal"] *, html[data-theme="light"] body [class*="modal"] *, html[data-theme="light"] body [style*="position: fixed"] *, html[data-theme="light"] body div[style*="position: fixed"] *, html[data-theme="light-accent"] body .modal *, html[data-theme="light-accent"] body [id*="modal"] *, html[data-theme="light-accent"] body [class*="modal"] *, html[data-theme="light-accent"] body [style*="position: fixed"] *, html[data-theme="light-accent"] body div[style*="position: fixed"] * { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* LIGHT MODE: SPECIFIC TEXT ELEMENTS - NUCLEAR TARGETING */ html[data-theme="light"] body .modal h1, html[data-theme="light"] body .modal h2, html[data-theme="light"] body .modal h3, html[data-theme="light"] body .modal h4, html[data-theme="light"] body .modal h5, html[data-theme="light"] body .modal h6, html[data-theme="light"] body .modal p, html[data-theme="light"] body .modal span, html[data-theme="light"] body .modal div, html[data-theme="light"] body .modal label, html[data-theme="light"] body .modal input, html[data-theme="light"] body .modal textarea, html[data-theme="light"] body .modal select, html[data-theme="light"] body .modal button, html[data-theme="light"] body .modal a, html[data-theme="light"] body .modal i, html[data-theme="light"] body .modal strong, html[data-theme="light"] body .modal em, html[data-theme="light"] body [id*="modal"] h1, html[data-theme="light"] body [id*="modal"] h2, html[data-theme="light"] body [id*="modal"] h3, html[data-theme="light"] body [id*="modal"] h4, html[data-theme="light"] body [id*="modal"] h5, html[data-theme="light"] body [id*="modal"] h6, html[data-theme="light"] body [id*="modal"] p, html[data-theme="light"] body [id*="modal"] span, html[data-theme="light"] body [id*="modal"] div, html[data-theme="light"] body [id*="modal"] label, html[data-theme="light"] body [id*="modal"] input, html[data-theme="light"] body [id*="modal"] textarea, html[data-theme="light"] body [id*="modal"] select, html[data-theme="light"] body [id*="modal"] button, html[data-theme="light"] body [id*="modal"] a, html[data-theme="light"] body [id*="modal"] i, html[data-theme="light"] body [id*="modal"] strong, html[data-theme="light"] body [id*="modal"] em, html[data-theme="light"] body [class*="modal"] h1, html[data-theme="light"] body [class*="modal"] h2, html[data-theme="light"] body [class*="modal"] h3, html[data-theme="light"] body [class*="modal"] h4, html[data-theme="light"] body [class*="modal"] h5, html[data-theme="light"] body [class*="modal"] h6, html[data-theme="light"] body [class*="modal"] p, html[data-theme="light"] body [class*="modal"] span, html[data-theme="light"] body [class*="modal"] div, html[data-theme="light"] body [class*="modal"] label, html[data-theme="light"] body [class*="modal"] input, html[data-theme="light"] body [class*="modal"] textarea, html[data-theme="light"] body [class*="modal"] select, html[data-theme="light"] body [class*="modal"] button, html[data-theme="light"] body [class*="modal"] a, html[data-theme="light"] body [class*="modal"] i, html[data-theme="light"] body [class*="modal"] strong, html[data-theme="light"] body [class*="modal"] em, html[data-theme="light"] body [style*="position: fixed"] h1, html[data-theme="light"] body [style*="position: fixed"] h2, html[data-theme="light"] body [style*="position: fixed"] h3, html[data-theme="light"] body [style*="position: fixed"] h4, html[data-theme="light"] body [style*="position: fixed"] h5, html[data-theme="light"] body [style*="position: fixed"] h6, html[data-theme="light"] body [style*="position: fixed"] p, html[data-theme="light"] body [style*="position: fixed"] span, html[data-theme="light"] body [style*="position: fixed"] div, html[data-theme="light"] body [style*="position: fixed"] label, html[data-theme="light"] body [style*="position: fixed"] input, html[data-theme="light"] body [style*="position: fixed"] textarea, html[data-theme="light"] body [style*="position: fixed"] select, html[data-theme="light"] body [style*="position: fixed"] button, html[data-theme="light"] body [style*="position: fixed"] a, html[data-theme="light"] body [style*="position: fixed"] i, html[data-theme="light"] body [style*="position: fixed"] strong, html[data-theme="light"] body [style*="position: fixed"] em, html[data-theme="light-accent"] body .modal h1, html[data-theme="light-accent"] body .modal h2, html[data-theme="light-accent"] body .modal h3, html[data-theme="light-accent"] body .modal h4, html[data-theme="light-accent"] body .modal h5, html[data-theme="light-accent"] body .modal h6, html[data-theme="light-accent"] body .modal p, html[data-theme="light-accent"] body .modal span, html[data-theme="light-accent"] body .modal div, html[data-theme="light-accent"] body .modal label, html[data-theme="light-accent"] body .modal input, html[data-theme="light-accent"] body .modal textarea, html[data-theme="light-accent"] body .modal select, html[data-theme="light-accent"] body .modal button, html[data-theme="light-accent"] body .modal a, html[data-theme="light-accent"] body .modal i, html[data-theme="light-accent"] body .modal strong, html[data-theme="light-accent"] body .modal em, html[data-theme="light-accent"] body [id*="modal"] h1, html[data-theme="light-accent"] body [id*="modal"] h2, html[data-theme="light-accent"] body [id*="modal"] h3, html[data-theme="light-accent"] body [id*="modal"] h4, html[data-theme="light-accent"] body [id*="modal"] h5, html[data-theme="light-accent"] body [id*="modal"] h6, html[data-theme="light-accent"] body [id*="modal"] p, html[data-theme="light-accent"] body [id*="modal"] span, html[data-theme="light-accent"] body [id*="modal"] div, html[data-theme="light-accent"] body [id*="modal"] label, html[data-theme="light-accent"] body [id*="modal"] input, html[data-theme="light-accent"] body [id*="modal"] textarea, html[data-theme="light-accent"] body [id*="modal"] select, html[data-theme="light-accent"] body [id*="modal"] button, html[data-theme="light-accent"] body [id*="modal"] a, html[data-theme="light-accent"] body [id*="modal"] i, html[data-theme="light-accent"] body [id*="modal"] strong, html[data-theme="light-accent"] body [id*="modal"] em, html[data-theme="light-accent"] body [class*="modal"] h1, html[data-theme="light-accent"] body [class*="modal"] h2, html[data-theme="light-accent"] body [class*="modal"] h3, html[data-theme="light-accent"] body [class*="modal"] h4, html[data-theme="light-accent"] body [class*="modal"] h5, html[data-theme="light-accent"] body [class*="modal"] h6, html[data-theme="light-accent"] body [class*="modal"] p, html[data-theme="light-accent"] body [class*="modal"] span, html[data-theme="light-accent"] body [class*="modal"] div, html[data-theme="light-accent"] body [class*="modal"] label, html[data-theme="light-accent"] body [class*="modal"] input, html[data-theme="light-accent"] body [class*="modal"] textarea, html[data-theme="light-accent"] body [class*="modal"] select, html[data-theme="light-accent"] body [class*="modal"] button, html[data-theme="light-accent"] body [class*="modal"] a, html[data-theme="light-accent"] body [class*="modal"] i, html[data-theme="light-accent"] body [class*="modal"] strong, html[data-theme="light-accent"] body [class*="modal"] em, html[data-theme="light-accent"] body [style*="position: fixed"] h1, html[data-theme="light-accent"] body [style*="position: fixed"] h2, html[data-theme="light-accent"] body [style*="position: fixed"] h3, html[data-theme="light-accent"] body [style*="position: fixed"] h4, html[data-theme="light-accent"] body [style*="position: fixed"] h5, html[data-theme="light-accent"] body [style*="position: fixed"] h6, html[data-theme="light-accent"] body [style*="position: fixed"] p, html[data-theme="light-accent"] body [style*="position: fixed"] span, html[data-theme="light-accent"] body [style*="position: fixed"] div, html[data-theme="light-accent"] body [style*="position: fixed"] label, html[data-theme="light-accent"] body [style*="position: fixed"] input, html[data-theme="light-accent"] body [style*="position: fixed"] textarea, html[data-theme="light-accent"] body [style*="position: fixed"] select, html[data-theme="light-accent"] body [style*="position: fixed"] button, html[data-theme="light-accent"] body [style*="position: fixed"] a, html[data-theme="light-accent"] body [style*="position: fixed"] i, html[data-theme="light-accent"] body [style*="position: fixed"] strong, html[data-theme="light-accent"] body [style*="position: fixed"] em { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* LIGHT MODE: PLACEHOLDER TEXT - NUCLEAR OVERRIDE */ html[data-theme="light"] body .modal input::placeholder, html[data-theme="light"] body .modal textarea::placeholder, html[data-theme="light"] body [id*="modal"] input::placeholder, html[data-theme="light"] body [id*="modal"] textarea::placeholder, html[data-theme="light"] body [class*="modal"] input::placeholder, html[data-theme="light"] body [class*="modal"] textarea::placeholder, html[data-theme="light"] body [style*="position: fixed"] input::placeholder, html[data-theme="light"] body [style*="position: fixed"] textarea::placeholder, html[data-theme="light-accent"] body .modal input::placeholder, html[data-theme="light-accent"] body .modal textarea::placeholder, html[data-theme="light-accent"] body [id*="modal"] input::placeholder, html[data-theme="light-accent"] body [id*="modal"] textarea::placeholder, html[data-theme="light-accent"] body [class*="modal"] input::placeholder, html[data-theme="light-accent"] body [class*="modal"] textarea::placeholder, html[data-theme="light-accent"] body [style*="position: fixed"] input::placeholder, html[data-theme="light-accent"] body [style*="position: fixed"] textarea::placeholder { color: #666666 !important; -webkit-text-fill-color: #666666 !important; } /* LIGHT MODE: INPUT BACKGROUNDS - NUCLEAR OVERRIDE */ html[data-theme="light"] body .modal input, html[data-theme="light"] body .modal textarea, html[data-theme="light"] body .modal select, html[data-theme="light"] body [id*="modal"] input, html[data-theme="light"] body [id*="modal"] textarea, html[data-theme="light"] body [id*="modal"] select, html[data-theme="light"] body [class*="modal"] input, html[data-theme="light"] body [class*="modal"] textarea, html[data-theme="light"] body [class*="modal"] select, html[data-theme="light"] body [style*="position: fixed"] input, html[data-theme="light"] body [style*="position: fixed"] textarea, html[data-theme="light"] body [style*="position: fixed"] select, html[data-theme="light-accent"] body .modal input, html[data-theme="light-accent"] body .modal textarea, html[data-theme="light-accent"] body .modal select, html[data-theme="light-accent"] body [id*="modal"] input, html[data-theme="light-accent"] body [id*="modal"] textarea, html[data-theme="light-accent"] body [id*="modal"] select, html[data-theme="light-accent"] body [class*="modal"] input, html[data-theme="light-accent"] body [class*="modal"] textarea, html[data-theme="light-accent"] body [class*="modal"] select, html[data-theme="light-accent"] body [style*="position: fixed"] input, html[data-theme="light-accent"] body [style*="position: fixed"] textarea, html[data-theme="light-accent"] body [style*="position: fixed"] select { background: #ffffff !important; background-color: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* DARK MODE: Force ALL text WHITE, ALL backgrounds DARK */ html[data-theme="dark"] body .modal, html[data-theme="dark"] body [id*="modal"], html[data-theme="dark"] body [class*="modal"], html[data-theme="dark"] body [style*="position: fixed"], html[data-theme="dark"] body div[style*="position: fixed"], html:not([data-theme]) body .modal, html:not([data-theme]) body [id*="modal"], html:not([data-theme]) body [class*="modal"], html:not([data-theme]) body [style*="position: fixed"], html:not([data-theme]) body div[style*="position: fixed"], body:not([data-theme]) .modal, body:not([data-theme]) [id*="modal"], body:not([data-theme]) [class*="modal"], body:not([data-theme]) [style*="position: fixed"], body:not([data-theme]) div[style*="position: fixed"] { background: #000000 !important; background-color: #000000 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* DARK MODE: ALL TEXT ELEMENTS - NUCLEAR OVERRIDE */ html[data-theme="dark"] body .modal *, html[data-theme="dark"] body [id*="modal"] *, html[data-theme="dark"] body [class*="modal"] *, html[data-theme="dark"] body [style*="position: fixed"] *, html[data-theme="dark"] body div[style*="position: fixed"] *, html:not([data-theme]) body .modal *, html:not([data-theme]) body [id*="modal"] *, html:not([data-theme]) body [class*="modal"] *, html:not([data-theme]) body [style*="position: fixed"] *, html:not([data-theme]) body div[style*="position: fixed"] *, body:not([data-theme]) .modal *, body:not([data-theme]) [id*="modal"] *, body:not([data-theme]) [class*="modal"] *, body:not([data-theme]) [style*="position: fixed"] *, body:not([data-theme]) div[style*="position: fixed"] * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* DARK MODE: SPECIFIC TEXT ELEMENTS - NUCLEAR TARGETING */ html[data-theme="dark"] body .modal h1, html[data-theme="dark"] body .modal h2, html[data-theme="dark"] body .modal h3, html[data-theme="dark"] body .modal h4, html[data-theme="dark"] body .modal h5, html[data-theme="dark"] body .modal h6, html[data-theme="dark"] body .modal p, html[data-theme="dark"] body .modal span, html[data-theme="dark"] body .modal div, html[data-theme="dark"] body .modal label, html[data-theme="dark"] body .modal input, html[data-theme="dark"] body .modal textarea, html[data-theme="dark"] body .modal select, html[data-theme="dark"] body .modal button, html[data-theme="dark"] body .modal a, html[data-theme="dark"] body .modal i, html[data-theme="dark"] body .modal strong, html[data-theme="dark"] body .modal em, html[data-theme="dark"] body [id*="modal"] h1, html[data-theme="dark"] body [id*="modal"] h2, html[data-theme="dark"] body [id*="modal"] h3, html[data-theme="dark"] body [id*="modal"] h4, html[data-theme="dark"] body [id*="modal"] h5, html[data-theme="dark"] body [id*="modal"] h6, html[data-theme="dark"] body [id*="modal"] p, html[data-theme="dark"] body [id*="modal"] span, html[data-theme="dark"] body [id*="modal"] div, html[data-theme="dark"] body [id*="modal"] label, html[data-theme="dark"] body [id*="modal"] input, html[data-theme="dark"] body [id*="modal"] textarea, html[data-theme="dark"] body [id*="modal"] select, html[data-theme="dark"] body [id*="modal"] button, html[data-theme="dark"] body [id*="modal"] a, html[data-theme="dark"] body [id*="modal"] i, html[data-theme="dark"] body [id*="modal"] strong, html[data-theme="dark"] body [id*="modal"] em, html[data-theme="dark"] body [class*="modal"] h1, html[data-theme="dark"] body [class*="modal"] h2, html[data-theme="dark"] body [class*="modal"] h3, html[data-theme="dark"] body [class*="modal"] h4, html[data-theme="dark"] body [class*="modal"] h5, html[data-theme="dark"] body [class*="modal"] h6, html[data-theme="dark"] body [class*="modal"] p, html[data-theme="dark"] body [class*="modal"] span, html[data-theme="dark"] body [class*="modal"] div, html[data-theme="dark"] body [class*="modal"] label, html[data-theme="dark"] body [class*="modal"] input, html[data-theme="dark"] body [class*="modal"] textarea, html[data-theme="dark"] body [class*="modal"] select, html[data-theme="dark"] body [class*="modal"] button, html[data-theme="dark"] body [class*="modal"] a, html[data-theme="dark"] body [class*="modal"] i, html[data-theme="dark"] body [class*="modal"] strong, html[data-theme="dark"] body [class*="modal"] em, html[data-theme="dark"] body [style*="position: fixed"] h1, html[data-theme="dark"] body [style*="position: fixed"] h2, html[data-theme="dark"] body [style*="position: fixed"] h3, html[data-theme="dark"] body [style*="position: fixed"] h4, html[data-theme="dark"] body [style*="position: fixed"] h5, html[data-theme="dark"] body [style*="position: fixed"] h6, html[data-theme="dark"] body [style*="position: fixed"] p, html[data-theme="dark"] body [style*="position: fixed"] span, html[data-theme="dark"] body [style*="position: fixed"] div, html[data-theme="dark"] body [style*="position: fixed"] label, html[data-theme="dark"] body [style*="position: fixed"] input, html[data-theme="dark"] body [style*="position: fixed"] textarea, html[data-theme="dark"] body [style*="position: fixed"] select, html[data-theme="dark"] body [style*="position: fixed"] button, html[data-theme="dark"] body [style*="position: fixed"] a, html[data-theme="dark"] body [style*="position: fixed"] i, html[data-theme="dark"] body [style*="position: fixed"] strong, html[data-theme="dark"] body [style*="position: fixed"] em, html:not([data-theme]) body .modal h1, html:not([data-theme]) body .modal h2, html:not([data-theme]) body .modal h3, html:not([data-theme]) body .modal h4, html:not([data-theme]) body .modal h5, html:not([data-theme]) body .modal h6, html:not([data-theme]) body .modal p, html:not([data-theme]) body .modal span, html:not([data-theme]) body .modal div, html:not([data-theme]) body .modal label, html:not([data-theme]) body .modal input, html:not([data-theme]) body .modal textarea, html:not([data-theme]) body .modal select, html:not([data-theme]) body .modal button, html:not([data-theme]) body .modal a, html:not([data-theme]) body .modal i, html:not([data-theme]) body .modal strong, html:not([data-theme]) body .modal em, html:not([data-theme]) body [id*="modal"] h1, html:not([data-theme]) body [id*="modal"] h2, html:not([data-theme]) body [id*="modal"] h3, html:not([data-theme]) body [id*="modal"] h4, html:not([data-theme]) body [id*="modal"] h5, html:not([data-theme]) body [id*="modal"] h6, html:not([data-theme]) body [id*="modal"] p, html:not([data-theme]) body [id*="modal"] span, html:not([data-theme]) body [id*="modal"] div, html:not([data-theme]) body [id*="modal"] label, html:not([data-theme]) body [id*="modal"] input, html:not([data-theme]) body [id*="modal"] textarea, html:not([data-theme]) body [id*="modal"] select, html:not([data-theme]) body [id*="modal"] button, html:not([data-theme]) body [id*="modal"] a, html:not([data-theme]) body [id*="modal"] i, html:not([data-theme]) body [id*="modal"] strong, html:not([data-theme]) body [id*="modal"] em, html:not([data-theme]) body [class*="modal"] h1, html:not([data-theme]) body [class*="modal"] h2, html:not([data-theme]) body [class*="modal"] h3, html:not([data-theme]) body [class*="modal"] h4, html:not([data-theme]) body [class*="modal"] h5, html:not([data-theme]) body [class*="modal"] h6, html:not([data-theme]) body [class*="modal"] p, html:not([data-theme]) body [class*="modal"] span, html:not([data-theme]) body [class*="modal"] div, html:not([data-theme]) body [class*="modal"] label, html:not([data-theme]) body [class*="modal"] input, html:not([data-theme]) body [class*="modal"] textarea, html:not([data-theme]) body [class*="modal"] select, html:not([data-theme]) body [class*="modal"] button, html:not([data-theme]) body [class*="modal"] a, html:not([data-theme]) body [class*="modal"] i, html:not([data-theme]) body [class*="modal"] strong, html:not([data-theme]) body [class*="modal"] em, html:not([data-theme]) body [style*="position: fixed"] h1, html:not([data-theme]) body [style*="position: fixed"] h2, html:not([data-theme]) body [style*="position: fixed"] h3, html:not([data-theme]) body [style*="position: fixed"] h4, html:not([data-theme]) body [style*="position: fixed"] h5, html:not([data-theme]) body [style*="position: fixed"] h6, html:not([data-theme]) body [style*="position: fixed"] p, html:not([data-theme]) body [style*="position: fixed"] span, html:not([data-theme]) body [style*="position: fixed"] div, html:not([data-theme]) body [style*="position: fixed"] label, html:not([data-theme]) body [style*="position: fixed"] input, html:not([data-theme]) body [style*="position: fixed"] textarea, html:not([data-theme]) body [style*="position: fixed"] select, html:not([data-theme]) body [style*="position: fixed"] button, html:not([data-theme]) body [style*="position: fixed"] a, html:not([data-theme]) body [style*="position: fixed"] i, html:not([data-theme]) body [style*="position: fixed"] strong, html:not([data-theme]) body [style*="position: fixed"] em, body:not([data-theme]) .modal h1, body:not([data-theme]) .modal h2, body:not([data-theme]) .modal h3, body:not([data-theme]) .modal h4, body:not([data-theme]) .modal h5, body:not([data-theme]) .modal h6, body:not([data-theme]) .modal p, body:not([data-theme]) .modal span, body:not([data-theme]) .modal div, body:not([data-theme]) .modal label, body:not([data-theme]) .modal input, body:not([data-theme]) .modal textarea, body:not([data-theme]) .modal select, body:not([data-theme]) .modal button, body:not([data-theme]) .modal a, body:not([data-theme]) .modal i, body:not([data-theme]) .modal strong, body:not([data-theme]) .modal em, body:not([data-theme]) [id*="modal"] h1, body:not([data-theme]) [id*="modal"] h2, body:not([data-theme]) [id*="modal"] h3, body:not([data-theme]) [id*="modal"] h4, body:not([data-theme]) [id*="modal"] h5, body:not([data-theme]) [id*="modal"] h6, body:not([data-theme]) [id*="modal"] p, body:not([data-theme]) [id*="modal"] span, body:not([data-theme]) [id*="modal"] div, body:not([data-theme]) [id*="modal"] label, body:not([data-theme]) [id*="modal"] input, body:not([data-theme]) [id*="modal"] textarea, body:not([data-theme]) [id*="modal"] select, body:not([data-theme]) [id*="modal"] button, body:not([data-theme]) [id*="modal"] a, body:not([data-theme]) [id*="modal"] i, body:not([data-theme]) [id*="modal"] strong, body:not([data-theme]) [id*="modal"] em, body:not([data-theme]) [class*="modal"] h1, body:not([data-theme]) [class*="modal"] h2, body:not([data-theme]) [class*="modal"] h3, body:not([data-theme]) [class*="modal"] h4, body:not([data-theme]) [class*="modal"] h5, body:not([data-theme]) [class*="modal"] h6, body:not([data-theme]) [class*="modal"] p, body:not([data-theme]) [class*="modal"] span, body:not([data-theme]) [class*="modal"] div, body:not([data-theme]) [class*="modal"] label, body:not([data-theme]) [class*="modal"] input, body:not([data-theme]) [class*="modal"] textarea, body:not([data-theme]) [class*="modal"] select, body:not([data-theme]) [class*="modal"] button, body:not([data-theme]) [class*="modal"] a, body:not([data-theme]) [class*="modal"] i, body:not([data-theme]) [class*="modal"] strong, body:not([data-theme]) [class*="modal"] em, body:not([data-theme]) [style*="position: fixed"] h1, body:not([data-theme]) [style*="position: fixed"] h2, body:not([data-theme]) [style*="position: fixed"] h3, body:not([data-theme]) [style*="position: fixed"] h4, body:not([data-theme]) [style*="position: fixed"] h5, body:not([data-theme]) [style*="position: fixed"] h6, body:not([data-theme]) [style*="position: fixed"] p, body:not([data-theme]) [style*="position: fixed"] span, body:not([data-theme]) [style*="position: fixed"] div, body:not([data-theme]) [style*="position: fixed"] label, body:not([data-theme]) [style*="position: fixed"] input, body:not([data-theme]) [style*="position: fixed"] textarea, body:not([data-theme]) [style*="position: fixed"] select, body:not([data-theme]) [style*="position: fixed"] button, body:not([data-theme]) [style*="position: fixed"] a, body:not([data-theme]) [style*="position: fixed"] i, body:not([data-theme]) [style*="position: fixed"] strong, body:not([data-theme]) [style*="position: fixed"] em { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* DARK MODE: PLACEHOLDER TEXT - NUCLEAR OVERRIDE */ html[data-theme="dark"] body .modal input::placeholder, html[data-theme="dark"] body .modal textarea::placeholder, html[data-theme="dark"] body [id*="modal"] input::placeholder, html[data-theme="dark"] body [id*="modal"] textarea::placeholder, html[data-theme="dark"] body [class*="modal"] input::placeholder, html[data-theme="dark"] body [class*="modal"] textarea::placeholder, html[data-theme="dark"] body [style*="position: fixed"] input::placeholder, html[data-theme="dark"] body [style*="position: fixed"] textarea::placeholder, html:not([data-theme]) body .modal input::placeholder, html:not([data-theme]) body .modal textarea::placeholder, html:not([data-theme]) body [id*="modal"] input::placeholder, html:not([data-theme]) body [id*="modal"] textarea::placeholder, html:not([data-theme]) body [class*="modal"] input::placeholder, html:not([data-theme]) body [class*="modal"] textarea::placeholder, html:not([data-theme]) body [style*="position: fixed"] input::placeholder, html:not([data-theme]) body [style*="position: fixed"] textarea::placeholder, body:not([data-theme]) .modal input::placeholder, body:not([data-theme]) .modal textarea::placeholder, body:not([data-theme]) [id*="modal"] input::placeholder, body:not([data-theme]) [id*="modal"] textarea::placeholder, body:not([data-theme]) [class*="modal"] input::placeholder, body:not([data-theme]) [class*="modal"] textarea::placeholder, body:not([data-theme]) [style*="position: fixed"] input::placeholder, body:not([data-theme]) [style*="position: fixed"] textarea::placeholder { color: #cccccc !important; -webkit-text-fill-color: #cccccc !important; } /* DARK MODE: INPUT BACKGROUNDS - NUCLEAR OVERRIDE */ html[data-theme="dark"] body .modal input, html[data-theme="dark"] body .modal textarea, html[data-theme="dark"] body .modal select, html[data-theme="dark"] body [id*="modal"] input, html[data-theme="dark"] body [id*="modal"] textarea, html[data-theme="dark"] body [id*="modal"] select, html[data-theme="dark"] body [class*="modal"] input, html[data-theme="dark"] body [class*="modal"] textarea, html[data-theme="dark"] body [class*="modal"] select, html[data-theme="dark"] body [style*="position: fixed"] input, html[data-theme="dark"] body [style*="position: fixed"] textarea, html[data-theme="dark"] body [style*="position: fixed"] select, html:not([data-theme]) body .modal input, html:not([data-theme]) body .modal textarea, html:not([data-theme]) body .modal select, html:not([data-theme]) body [id*="modal"] input, html:not([data-theme]) body [id*="modal"] textarea, html:not([data-theme]) body [id*="modal"] select, html:not([data-theme]) body [class*="modal"] input, html:not([data-theme]) body [class*="modal"] textarea, html:not([data-theme]) body [class*="modal"] select, html:not([data-theme]) body [style*="position: fixed"] input, html:not([data-theme]) body [style*="position: fixed"] textarea, html:not([data-theme]) body [style*="position: fixed"] select, body:not([data-theme]) .modal input, body:not([data-theme]) .modal textarea, body:not([data-theme]) .modal select, body:not([data-theme]) [id*="modal"] input, body:not([data-theme]) [id*="modal"] textarea, body:not([data-theme]) [id*="modal"] select, body:not([data-theme]) [class*="modal"] input, body:not([data-theme]) [class*="modal"] textarea, body:not([data-theme]) [class*="modal"] select, body:not([data-theme]) [style*="position: fixed"] input, body:not([data-theme]) [style*="position: fixed"] textarea, body:not([data-theme]) [style*="position: fixed"] select { background: #333333 !important; background-color: #333333 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* NUCLEAR OVERRIDE: iOS WEBKIT TEXT FILL COLOR FIX */ html[data-theme="light"] body .modal *, html[data-theme="light"] body [id*="modal"] *, html[data-theme="light"] body [class*="modal"] *, html[data-theme="light"] body [style*="position: fixed"] *, html[data-theme="light-accent"] body .modal *, html[data-theme="light-accent"] body [id*="modal"] *, html[data-theme="light-accent"] body [class*="modal"] *, html[data-theme="light-accent"] body [style*="position: fixed"] * { -webkit-text-fill-color: #000000 !important; text-fill-color: #000000 !important; } html[data-theme="dark"] body .modal *, html[data-theme="dark"] body [id*="modal"] *, html[data-theme="dark"] body [class*="modal"] *, html[data-theme="dark"] body [style*="position: fixed"] *, html:not([data-theme]) body .modal *, html:not([data-theme]) body [id*="modal"] *, html:not([data-theme]) body [class*="modal"] *, html:not([data-theme]) body [style*="position: fixed"] *, body:not([data-theme]) .modal *, body:not([data-theme]) [id*="modal"] *, body:not([data-theme]) [class*="modal"] *, body:not([data-theme]) [style*="position: fixed"] * { -webkit-text-fill-color: #ffffff !important; text-fill-color: #ffffff !important; } /* ======================================== NUCLEAR CALENDAR NAVIGATION ARROW FIX MAXIMUM SPECIFICITY - BULLETPROOF COVERAGE ======================================== */ /* ULTIMATE NUCLEAR OPTION FOR CALENDAR ARROWS - DARK MODE = WHITE */ html body[data-theme="dark"] #prev-month, html body[data-theme="dark"] #prev-month *, html body[data-theme="dark"] #prev-month i, html body[data-theme="dark"] #prev-month i.fas, html body[data-theme="dark"] #prev-month i.fa-chevron-left, html body[data-theme="dark"] #prev-month i[class*="fa-chevron"], html body[data-theme="dark"] #prev-month i[class*="fa-arrow"], html body[data-theme="dark"] #next-month, html body[data-theme="dark"] #next-month *, html body[data-theme="dark"] #next-month i, html body[data-theme="dark"] #next-month i.fas, html body[data-theme="dark"] #next-month i.fa-chevron-right, html body[data-theme="dark"] #next-month i[class*="fa-chevron"], html body[data-theme="dark"] #next-month i[class*="fa-arrow"], html body[data-theme="dark"] button[onclick*="changeMonth"], html body[data-theme="dark"] button[onclick*="changeMonth"] *, html body[data-theme="dark"] button[onclick*="changeMonth"] i, html body[data-theme="dark"] button[onclick*="changeMonth"] i.fas, html body[data-theme="dark"] button[onclick*="changeMonth"] i[class*="fa-chevron"], html body[data-theme="dark"] button[onclick*="changeMonth"] i[class*="fa-arrow"], html body[data-theme="dark"] button[id*="month"], html body[data-theme="dark"] button[id*="month"] *, html body[data-theme="dark"] button[id*="month"] i, html body[data-theme="dark"] button[id*="month"] i.fas, html body[data-theme="dark"] button[id*="month"] i[class*="fa-chevron"], html body[data-theme="dark"] button[id*="month"] i[class*="fa-arrow"], [data-theme="dark"] #prev-month, [data-theme="dark"] #prev-month *, [data-theme="dark"] #prev-month i, [data-theme="dark"] #prev-month i.fas, [data-theme="dark"] #prev-month i.fa-chevron-left, [data-theme="dark"] #prev-month i[class*="fa-chevron"], [data-theme="dark"] #prev-month i[class*="fa-arrow"], [data-theme="dark"] #next-month, [data-theme="dark"] #next-month *, [data-theme="dark"] #next-month i, [data-theme="dark"] #next-month i.fas, [data-theme="dark"] #next-month i.fa-chevron-right, [data-theme="dark"] #next-month i[class*="fa-chevron"], [data-theme="dark"] #next-month i[class*="fa-arrow"], [data-theme="dark"] button[onclick*="changeMonth"], [data-theme="dark"] button[onclick*="changeMonth"] *, [data-theme="dark"] button[onclick*="changeMonth"] i, [data-theme="dark"] button[onclick*="changeMonth"] i.fas, [data-theme="dark"] button[onclick*="changeMonth"] i[class*="fa-chevron"], [data-theme="dark"] button[onclick*="changeMonth"] i[class*="fa-arrow"], [data-theme="dark"] button[id*="month"], [data-theme="dark"] button[id*="month"] *, [data-theme="dark"] button[id*="month"] i, [data-theme="dark"] button[id*="month"] i.fas, [data-theme="dark"] button[id*="month"] i[class*="fa-chevron"], [data-theme="dark"] button[id*="month"] i[class*="fa-arrow"], body:not([data-theme="light"]):not([data-theme="light-accent"]) #prev-month, body:not([data-theme="light"]):not([data-theme="light-accent"]) #prev-month *, body:not([data-theme="light"]):not([data-theme="light-accent"]) #prev-month i, body:not([data-theme="light"]):not([data-theme="light-accent"]) #prev-month i.fas, body:not([data-theme="light"]):not([data-theme="light-accent"]) #prev-month i.fa-chevron-left, body:not([data-theme="light"]):not([data-theme="light-accent"]) #prev-month i[class*="fa-chevron"], body:not([data-theme="light"]):not([data-theme="light-accent"]) #prev-month i[class*="fa-arrow"], body:not([data-theme="light"]):not([data-theme="light-accent"]) #next-month, body:not([data-theme="light"]):not([data-theme="light-accent"]) #next-month *, body:not([data-theme="light"]):not([data-theme="light-accent"]) #next-month i, body:not([data-theme="light"]):not([data-theme="light-accent"]) #next-month i.fas, body:not([data-theme="light"]):not([data-theme="light-accent"]) #next-month i.fa-chevron-right, body:not([data-theme="light"]):not([data-theme="light-accent"]) #next-month i[class*="fa-chevron"], body:not([data-theme="light"]):not([data-theme="light-accent"]) #next-month i[class*="fa-arrow"], body:not([data-theme="light"]):not([data-theme="light-accent"]) button[onclick*="changeMonth"], body:not([data-theme="light"]):not([data-theme="light-accent"]) button[onclick*="changeMonth"] *, body:not([data-theme="light"]):not([data-theme="light-accent"]) button[onclick*="changeMonth"] i, body:not([data-theme="light"]):not([data-theme="light-accent"]) button[onclick*="changeMonth"] i.fas, body:not([data-theme="light"]):not([data-theme="light-accent"]) button[onclick*="changeMonth"] i[class*="fa-chevron"], body:not([data-theme="light"]):not([data-theme="light-accent"]) button[onclick*="changeMonth"] i[class*="fa-arrow"], body:not([data-theme="light"]):not([data-theme="light-accent"]) button[id*="month"], body:not([data-theme="light"]):not([data-theme="light-accent"]) button[id*="month"] *, body:not([data-theme="light"]):not([data-theme="light-accent"]) button[id*="month"] i, body:not([data-theme="light"]):not([data-theme="light-accent"]) button[id*="month"] i.fas, body:not([data-theme="light"]):not([data-theme="light-accent"]) button[id*="month"] i[class*="fa-chevron"], body:not([data-theme="light"]):not([data-theme="light-accent"]) button[id*="month"] i[class*="fa-arrow"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-fill-color: #ffffff !important; } /* ULTIMATE NUCLEAR OPTION FOR CALENDAR ARROWS - LIGHT MODE = BLACK */ html body[data-theme="light"] #prev-month, html body[data-theme="light"] #prev-month *, html body[data-theme="light"] #prev-month i, html body[data-theme="light"] #prev-month i.fas, html body[data-theme="light"] #prev-month i.fa-chevron-left, html body[data-theme="light"] #prev-month i[class*="fa-chevron"], html body[data-theme="light"] #prev-month i[class*="fa-arrow"], html body[data-theme="light"] #next-month, html body[data-theme="light"] #next-month *, html body[data-theme="light"] #next-month i, html body[data-theme="light"] #next-month i.fas, html body[data-theme="light"] #next-month i.fa-chevron-right, html body[data-theme="light"] #next-month i[class*="fa-chevron"], html body[data-theme="light"] #next-month i[class*="fa-arrow"], html body[data-theme="light"] button[onclick*="changeMonth"], html body[data-theme="light"] button[onclick*="changeMonth"] *, html body[data-theme="light"] button[onclick*="changeMonth"] i, html body[data-theme="light"] button[onclick*="changeMonth"] i.fas, html body[data-theme="light"] button[onclick*="changeMonth"] i[class*="fa-chevron"], html body[data-theme="light"] button[onclick*="changeMonth"] i[class*="fa-arrow"], html body[data-theme="light"] button[id*="month"], html body[data-theme="light"] button[id*="month"] *, html body[data-theme="light"] button[id*="month"] i, html body[data-theme="light"] button[id*="month"] i.fas, html body[data-theme="light"] button[id*="month"] i[class*="fa-chevron"], html body[data-theme="light"] button[id*="month"] i[class*="fa-arrow"], [data-theme="light"] #prev-month, [data-theme="light"] #prev-month *, [data-theme="light"] #prev-month i, [data-theme="light"] #prev-month i.fas, [data-theme="light"] #prev-month i.fa-chevron-left, [data-theme="light"] #prev-month i[class*="fa-chevron"], [data-theme="light"] #prev-month i[class*="fa-arrow"], [data-theme="light"] #next-month, [data-theme="light"] #next-month *, [data-theme="light"] #next-month i, [data-theme="light"] #next-month i.fas, [data-theme="light"] #next-month i.fa-chevron-right, [data-theme="light"] #next-month i[class*="fa-chevron"], [data-theme="light"] #next-month i[class*="fa-arrow"], [data-theme="light"] button[onclick*="changeMonth"], [data-theme="light"] button[onclick*="changeMonth"] *, [data-theme="light"] button[onclick*="changeMonth"] i, [data-theme="light"] button[onclick*="changeMonth"] i.fas, [data-theme="light"] button[onclick*="changeMonth"] i[class*="fa-chevron"], [data-theme="light"] button[onclick*="changeMonth"] i[class*="fa-arrow"], [data-theme="light"] button[id*="month"], [data-theme="light"] button[id*="month"] *, [data-theme="light"] button[id*="month"] i, [data-theme="light"] button[id*="month"] i.fas, [data-theme="light"] button[id*="month"] i[class*="fa-chevron"], [data-theme="light"] button[id*="month"] i[class*="fa-arrow"] { color: #000000 !important; -webkit-text-fill-color: #000000 !important; text-fill-color: #000000 !important; } /* ULTIMATE NUCLEAR OPTION FOR CALENDAR ARROWS - LIGHT-ACCENT MODE = BLACK */ html body[data-theme="light-accent"] #prev-month, html body[data-theme="light-accent"] #prev-month *, html body[data-theme="light-accent"] #prev-month i, html body[data-theme="light-accent"] #prev-month i.fas, html body[data-theme="light-accent"] #prev-month i.fa-chevron-left, html body[data-theme="light-accent"] #prev-month i[class*="fa-chevron"], html body[data-theme="light-accent"] #prev-month i[class*="fa-arrow"], html body[data-theme="light-accent"] #next-month, html body[data-theme="light-accent"] #next-month *, html body[data-theme="light-accent"] #next-month i, html body[data-theme="light-accent"] #next-month i.fas, html body[data-theme="light-accent"] #next-month i.fa-chevron-right, html body[data-theme="light-accent"] #next-month i[class*="fa-chevron"], html body[data-theme="light-accent"] #next-month i[class*="fa-arrow"], html body[data-theme="light-accent"] button[onclick*="changeMonth"], html body[data-theme="light-accent"] button[onclick*="changeMonth"] *, html body[data-theme="light-accent"] button[onclick*="changeMonth"] i, html body[data-theme="light-accent"] button[onclick*="changeMonth"] i.fas, html body[data-theme="light-accent"] button[onclick*="changeMonth"] i[class*="fa-chevron"], html body[data-theme="light-accent"] button[onclick*="changeMonth"] i[class*="fa-arrow"], html body[data-theme="light-accent"] button[id*="month"], html body[data-theme="light-accent"] button[id*="month"] *, html body[data-theme="light-accent"] button[id*="month"] i, html body[data-theme="light-accent"] button[id*="month"] i.fas, html body[data-theme="light-accent"] button[id*="month"] i[class*="fa-chevron"], html body[data-theme="light-accent"] button[id*="month"] i[class*="fa-arrow"], [data-theme="light-accent"] #prev-month, [data-theme="light-accent"] #prev-month *, [data-theme="light-accent"] #prev-month i, [data-theme="light-accent"] #prev-month i.fas, [data-theme="light-accent"] #prev-month i.fa-chevron-left, [data-theme="light-accent"] #prev-month i[class*="fa-chevron"], [data-theme="light-accent"] #prev-month i[class*="fa-arrow"], [data-theme="light-accent"] #next-month, [data-theme="light-accent"] #next-month *, [data-theme="light-accent"] #next-month i, [data-theme="light-accent"] #next-month i.fas, [data-theme="light-accent"] #next-month i.fa-chevron-right, [data-theme="light-accent"] #next-month i[class*="fa-chevron"], [data-theme="light-accent"] #next-month i[class*="fa-arrow"], [data-theme="light-accent"] button[onclick*="changeMonth"], [data-theme="light-accent"] button[onclick*="changeMonth"] *, [data-theme="light-accent"] button[onclick*="changeMonth"] i, [data-theme="light-accent"] button[onclick*="changeMonth"] i.fas, [data-theme="light-accent"] button[onclick*="changeMonth"] i[class*="fa-chevron"], [data-theme="light-accent"] button[onclick*="changeMonth"] i[class*="fa-arrow"], [data-theme="light-accent"] button[id*="month"], [data-theme="light-accent"] button[id*="month"] *, [data-theme="light-accent"] button[id*="month"] i, [data-theme="light-accent"] button[id*="month"] i.fas, [data-theme="light-accent"] button[id*="month"] i[class*="fa-chevron"], [data-theme="light-accent"] button[id*="month"] i[class*="fa-arrow"] { color: #000000 !important; -webkit-text-fill-color: #000000 !important; text-fill-color: #000000 !important; } /* FINAL NUCLEAR BACKUP RULES - ATTRIBUTE-BASED SELECTORS FOR MAXIMUM COVERAGE */ /* TARGET ANY ELEMENT WITH ID CONTAINING "month" OR CLASS CONTAINING "chevron" OR "arrow" */ html body [data-theme="dark"] *[id*="prev-month"], html body [data-theme="dark"] *[id*="next-month"], html body [data-theme="dark"] *[class*="fa-chevron"], html body [data-theme="dark"] *[class*="fa-arrow"], html body [data-theme="dark"] *[onclick*="changeMonth"], [data-theme="dark"] *[id*="prev-month"], [data-theme="dark"] *[id*="next-month"], [data-theme="dark"] *[class*="fa-chevron"], [data-theme="dark"] *[class*="fa-arrow"], [data-theme="dark"] *[onclick*="changeMonth"], body:not([data-theme="light"]):not([data-theme="light-accent"]) *[id*="prev-month"], body:not([data-theme="light"]):not([data-theme="light-accent"]) *[id*="next-month"], body:not([data-theme="light"]):not([data-theme="light-accent"]) *[class*="fa-chevron"], body:not([data-theme="light"]):not([data-theme="light-accent"]) *[class*="fa-arrow"], body:not([data-theme="light"]):not([data-theme="light-accent"]) *[onclick*="changeMonth"] { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-fill-color: #ffffff !important; } html body [data-theme="light"] *[id*="prev-month"], html body [data-theme="light"] *[id*="next-month"], html body [data-theme="light"] *[class*="fa-chevron"], html body [data-theme="light"] *[class*="fa-arrow"], html body [data-theme="light"] *[onclick*="changeMonth"], [data-theme="light"] *[id*="prev-month"], [data-theme="light"] *[id*="next-month"], [data-theme="light"] *[class*="fa-chevron"], [data-theme="light"] *[class*="fa-arrow"], [data-theme="light"] *[onclick*="changeMonth"] { color: #000000 !important; -webkit-text-fill-color: #000000 !important; text-fill-color: #000000 !important; } html body [data-theme="light-accent"] *[id*="prev-month"], html body [data-theme="light-accent"] *[id*="next-month"], html body [data-theme="light-accent"] *[class*="fa-chevron"], html body [data-theme="light-accent"] *[class*="fa-arrow"], html body [data-theme="light-accent"] *[onclick*="changeMonth"], [data-theme="light-accent"] *[id*="prev-month"], [data-theme="light-accent"] *[id*="next-month"], [data-theme="light-accent"] *[class*="fa-chevron"], [data-theme="light-accent"] *[class*="fa-arrow"], [data-theme="light-accent"] *[onclick*="changeMonth"] { color: #000000 !important; -webkit-text-fill-color: #000000 !important; text-fill-color: #000000 !important; } /* ABSOLUTE FINAL BACKSTOP - DIRECT ID AND CLASS TARGETING */ #prev-month, #prev-month *, #prev-month i, #next-month, #next-month *, #next-month i, .fa-chevron-left, .fa-chevron-right, .fa-arrow-left, .fa-arrow-right { color: inherit !important; } /* THEME-BASED FINAL OVERRIDES */ [data-theme="dark"] #prev-month, [data-theme="dark"] #prev-month *, [data-theme="dark"] #prev-month i, [data-theme="dark"] #next-month, [data-theme="dark"] #next-month *, [data-theme="dark"] #next-month i, [data-theme="dark"] .fa-chevron-left, [data-theme="dark"] .fa-chevron-right, [data-theme="dark"] .fa-arrow-left, [data-theme="dark"] .fa-arrow-right { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [data-theme="light"] #prev-month, [data-theme="light"] #prev-month *, [data-theme="light"] #prev-month i, [data-theme="light"] #next-month, [data-theme="light"] #next-month *, [data-theme="light"] #next-month i, [data-theme="light"] .fa-chevron-left, [data-theme="light"] .fa-chevron-right, [data-theme="light"] .fa-arrow-left, [data-theme="light"] .fa-arrow-right, [data-theme="light-accent"] #prev-month, [data-theme="light-accent"] #prev-month *, [data-theme="light-accent"] #prev-month i, [data-theme="light-accent"] #next-month, [data-theme="light-accent"] #next-month *, [data-theme="light-accent"] #next-month i, [data-theme="light-accent"] .fa-chevron-left, [data-theme="light-accent"] .fa-chevron-right, [data-theme="light-accent"] .fa-arrow-left, [data-theme="light-accent"] .fa-arrow-right { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* END NUCLEAR CSS FIX */ /* The nuclear block above forces every [class*="modal"] and every fixed-position div to a white background with black text in light mode. The moments cinema's chat sheet (.bytes-comments-modal--cinema, only added by openBytesComments while body.mcin-locked is set) needs to stay dark regardless -- it opens over a full-bleed video, not the page. html[data-theme="light"] beats a bare class on specificity and is declared earlier, so both have to be matched and re-declared here, after the whole nuclear block, to win. Structure and class names mirror bytes-tv-cinema.css's .bytes-tv-comment-sheet* (TV's own chat sheet) so the two read as one component: header with subtitle, circular close, centered empty state, avatar rows, pill composer. Not loading that file directly -- its own header comment says it counts on being the only comment-sheet CSS on its page, which is not true here. */ html[data-theme="light"] body.mcin-locked .bytes-comments-modal--cinema, html[data-theme="light"] body.mcin-locked [class*="modal"].bytes-comments-modal--cinema, html[data-theme="light-accent"] body.mcin-locked .bytes-comments-modal--cinema, html[data-theme="light-accent"] body.mcin-locked [class*="modal"].bytes-comments-modal--cinema { border: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 0; background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 42%, rgba(255, 255, 255, 0.045)), rgba(0, 0, 0, 0.96) !important; background-color: rgba(0, 0, 0, 0.96) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 -24px 80px rgba(0, 0, 0, 0.56); backdrop-filter: blur(26px) saturate(120%); -webkit-backdrop-filter: blur(26px) saturate(120%); color: rgba(255, 255, 255, 0.96) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important; } html[data-theme="light"] body.mcin-locked .bytes-comments-modal--cinema *, html[data-theme="light-accent"] body.mcin-locked .bytes-comments-modal--cinema * { color: rgba(255, 255, 255, 0.92) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important; } .bytes-comments-header--cinema { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 18px 12px; } .bytes-comments-title-group { min-width: 0; display: grid; gap: 5px; } html[data-theme="light"] body.mcin-locked .bytes-comments-title-group h3, html[data-theme="light-accent"] body.mcin-locked .bytes-comments-title-group h3 { margin: 0; font-size: 16px; font-weight: 950; line-height: 1.12; color: rgba(255, 255, 255, 0.96) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important; } html[data-theme="light"] body.mcin-locked .bytes-comments-sheet-subtitle, html[data-theme="light-accent"] body.mcin-locked .bytes-comments-sheet-subtitle { overflow: hidden; font-size: 12px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, 0.52) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.52) !important; } html[data-theme="light"] body.mcin-locked .bytes-comments-close--cinema, html[data-theme="light-accent"] body.mcin-locked .bytes-comments-close--cinema { flex: 0 0 38px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.92) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important; font-size: 20px; line-height: 1; padding: 0; } .bytes-comments-list--cinema { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 18px 16px; -webkit-overflow-scrolling: touch; } html[data-theme="light"] body.mcin-locked .bytes-comments-status, html[data-theme="light-accent"] body.mcin-locked .bytes-comments-status { display: grid; gap: 7px; padding-top: 34px; font-size: 13px; font-weight: 800; text-align: center; color: rgba(255, 255, 255, 0.58) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.58) !important; } html[data-theme="light"] body.mcin-locked .bytes-comments-composer--cinema, html[data-theme="light-accent"] body.mcin-locked .bytes-comments-composer--cinema { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 9px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.07); background: rgba(0, 0, 0, 0.82) !important; } html[data-theme="light"] body.mcin-locked .bytes-comments-composer--cinema textarea, html[data-theme="light-accent"] body.mcin-locked .bytes-comments-composer--cinema textarea { flex: 1 1 auto; box-sizing: border-box; min-height: 46px; max-height: 96px; resize: none; padding: 13px 18px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 999px; outline: none; font: inherit; font-size: 16px; font-weight: 750; line-height: 1.2; background: rgba(255, 255, 255, 0.08) !important; background-color: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.94) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important; caret-color: rgba(255, 255, 255, 0.94) !important; color-scheme: dark !important; } .bytes-comments-composer--cinema textarea::placeholder { color: rgba(255, 255, 255, 0.42); } html[data-theme="light"] body.mcin-locked .bytes-comments-composer--cinema button, html[data-theme="light-accent"] body.mcin-locked .bytes-comments-composer--cinema button { flex: 0 0 46px; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.94) !important; color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; font-size: 18px; } /* The blanket ".bytes-comments-modal--cinema *" rule above (needed to turn every stray span/div white) also catches this button's own icon and repaints it white-on-white, invisible against its white circle. Declared after that rule, so it wins the tie. */ html[data-theme="light"] body.mcin-locked .bytes-comments-composer--cinema button i, html[data-theme="light-accent"] body.mcin-locked .bytes-comments-composer--cinema button i { color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; } /* Same fight, same fix: #bloc-byte-engagement-shell is position:fixed inline, so the nuclear "body [style*='position: fixed'] *" rule forces its every descendant to black text -- including these SVG icons' `stroke="currentColor"`, which inherits `color`, not the icons' own paint. That turned three white icons on a black bar into three black icons on a black bar, invisible. */ html[data-theme="light"] body #bloc-byte-engagement-shell svg, html[data-theme="light-accent"] body #bloc-byte-engagement-shell svg, html[data-theme="light"] body #bloc-byte-engagement-shell svg path, html[data-theme="light-accent"] body #bloc-byte-engagement-shell svg path { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; stroke: #ffffff !important; } /* The video cinema's own chat sheet (mcin-locked, not the website card's overlay above) has the same problem the website chat sheet had: the nuclear "[class*='modal'] textarea" and "[style*='position: fixed'] textarea" rules elsewhere in this file force it white-on-black-text regardless of the dark styling meant for it, because both match on the sheet's own class name/inline position containing the word "modal" and "fixed". Declared last, with the class name repeated for the same specificity trick used throughout this file, to actually win. */ html[data-theme="light"] body.mcin-locked .bytes-comments-composer--cinema.bytes-comments-composer--cinema textarea, html[data-theme="light-accent"] body.mcin-locked .bytes-comments-composer--cinema.bytes-comments-composer--cinema textarea { background: rgba(255, 255, 255, 0.08) !important; background-color: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.94) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.94) !important; caret-color: rgba(255, 255, 255, 0.94) !important; color-scheme: dark !important; } html[data-theme="light"] body.mcin-locked .bytes-comments-composer--cinema.bytes-comments-composer--cinema textarea::placeholder, html[data-theme="light-accent"] body.mcin-locked .bytes-comments-composer--cinema.bytes-comments-composer--cinema textarea::placeholder { color: rgba(255, 255, 255, 0.42) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.42) !important; } /* ============================================ REWARDS THEME-AWARE STYLING ============================================ */ /* Base Rewards Section Styling */ .rewards-section { background: rgba(var(--primary-color-rgb), 0.08); border: 1px solid rgba(var(--primary-color-rgb), 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .rewards-title { color: var(--text-primary); } /* Light Theme Rewards Section */ [data-theme="light"] .rewards-section, [data-theme="light-accent"] .rewards-section { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } /* Dark Theme Rewards Section */ [data-theme="dark"] .rewards-section { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } /* Market reward/subscription screens should stay solid, not glassy */ #mobile-rewards-create-modal, #available-rewards-modal, #mobile-my-rewards-modal, #mobile-redemptions-modal, #mobile-market-subscriptions-modal { background: var(--background-color) !important; background-color: var(--background-color) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-theme="light"] #mobile-rewards-create-modal, [data-theme="light"] #available-rewards-modal, [data-theme="light"] #mobile-my-rewards-modal, [data-theme="light"] #mobile-redemptions-modal, [data-theme="light"] #mobile-market-subscriptions-modal, [data-theme="light-accent"] #mobile-rewards-create-modal, [data-theme="light-accent"] #available-rewards-modal, [data-theme="light-accent"] #mobile-my-rewards-modal, [data-theme="light-accent"] #mobile-redemptions-modal, [data-theme="light-accent"] #mobile-market-subscriptions-modal { background: #ffffff !important; background-color: #ffffff !important; } [data-theme="dark"] #mobile-rewards-create-modal, [data-theme="dark"] #available-rewards-modal, [data-theme="dark"] #mobile-my-rewards-modal, [data-theme="dark"] #mobile-redemptions-modal, [data-theme="dark"] #mobile-market-subscriptions-modal { background: #000000 !important; background-color: #000000 !important; } /* Base Rewards Button Styling */ .rewards-btn { background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15), rgba(var(--primary-color-rgb), 0.08)); border: 1px solid rgba(var(--primary-color-rgb), 0.2); color: var(--text-primary); position: relative; overflow-x: hidden; overflow-y: auto; transform: translateY(0); box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.1); } .rewards-btn:hover { background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.25), rgba(var(--primary-color-rgb), 0.15)); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.2); } .rewards-btn:active { transform: translateY(0); transition: transform 0.1s ease; } .rewards-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1), transparent); opacity: 0; transition: opacity 0.3s ease; } .rewards-btn:hover::before { opacity: 1; } /* Specific Button Colors */ .rewards-manage-btn { background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.08)); border: 1px solid rgba(76, 175, 80, 0.25); } .rewards-manage-btn:hover { background: linear-gradient(135deg, rgba(76, 175, 80, 0.25), rgba(76, 175, 80, 0.15)); box-shadow: 0 6px 20px rgba(76, 175, 80, 0.2); } .rewards-available-btn { background: linear-gradient(135deg, rgba(0, 200, 83, 0.15), rgba(0, 150, 65, 0.08)); border: 1px solid rgba(0, 200, 83, 0.25); } .rewards-available-btn:hover { background: linear-gradient(135deg, rgba(0, 200, 83, 0.25), rgba(0, 150, 65, 0.15)); box-shadow: 0 6px 20px rgba(0, 200, 83, 0.2); } .rewards-redeemed-btn { background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.08)); border: 1px solid rgba(255, 215, 0, 0.25); } .rewards-redeemed-btn:hover { background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 0, 0.15)); box-shadow: 0 6px 20px rgba(255, 215, 0, 0.2); } .rewards-redemptions-btn { background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(138, 43, 226, 0.08)); border: 1px solid rgba(138, 43, 226, 0.25); } .rewards-redemptions-btn:hover { background: linear-gradient(135deg, rgba(138, 43, 226, 0.25), rgba(138, 43, 226, 0.15)); box-shadow: 0 6px 20px rgba(138, 43, 226, 0.2); } /* Light Theme Button Overrides */ [data-theme="light"] .rewards-btn, [data-theme="light-accent"] .rewards-btn { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.1); color: #000000; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } [data-theme="light"] .rewards-btn:hover, [data-theme="light-accent"] .rewards-btn:hover { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } [data-theme="light"] .rewards-manage-btn, [data-theme="light-accent"] .rewards-manage-btn { background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(255, 255, 255, 0.9)); border: 1px solid rgba(76, 175, 80, 0.2); } [data-theme="light"] .rewards-manage-btn:hover, [data-theme="light-accent"] .rewards-manage-btn:hover { background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(255, 255, 255, 0.95)); } [data-theme="light"] .rewards-available-btn, [data-theme="light-accent"] .rewards-available-btn { background: linear-gradient(135deg, rgba(0, 200, 83, 0.1), rgba(255, 255, 255, 0.9)); border: 1px solid rgba(0, 200, 83, 0.3); } [data-theme="light"] .rewards-available-btn:hover, [data-theme="light-accent"] .rewards-available-btn:hover { background: linear-gradient(135deg, rgba(0, 200, 83, 0.15), rgba(255, 255, 255, 0.95)); } [data-theme="light"] .rewards-redeemed-btn, [data-theme="light-accent"] .rewards-redeemed-btn { background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 255, 255, 0.9)); border: 1px solid rgba(255, 215, 0, 0.3); } [data-theme="light"] .rewards-redeemed-btn:hover, [data-theme="light-accent"] .rewards-redeemed-btn:hover { background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 255, 255, 0.95)); } [data-theme="light"] .rewards-redemptions-btn, [data-theme="light-accent"] .rewards-redemptions-btn { background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(255, 255, 255, 0.9)); border: 1px solid rgba(138, 43, 226, 0.2); } [data-theme="light"] .rewards-redemptions-btn:hover, [data-theme="light-accent"] .rewards-redemptions-btn:hover { background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(255, 255, 255, 0.95)); } /* Button Subtitle Styling */ .rewards-btn-subtitle { opacity: 0.7; color: var(--text-primary); } [data-theme="light"] .rewards-btn-subtitle, [data-theme="light-accent"] .rewards-btn-subtitle { color: rgba(0, 0, 0, 0.6); } [data-theme="dark"] .rewards-btn-subtitle { color: var(--text-secondary); } /* Balance Display Styling */ .rewards-balance { border-top: 1px solid rgba(var(--primary-color-rgb), 0.15); } [data-theme="light"] .rewards-balance, [data-theme="light-accent"] .rewards-balance { border-top: 1px solid rgba(0, 0, 0, 0.1); } [data-theme="dark"] .rewards-balance { border-top: 1px solid rgba(255, 255, 255, 0.1); } .rewards-balance-label { color: var(--text-primary); opacity: 0.7; } [data-theme="light"] .rewards-balance-label, [data-theme="light-accent"] .rewards-balance-label { color: rgba(0, 0, 0, 0.6); } [data-theme="dark"] .rewards-balance-label { color: var(--text-secondary); } /* Responsive Animations */ @media (prefers-reduced-motion: reduce) { .rewards-btn { transition: none; } .rewards-btn:hover { transform: none; } } /* Drop Bloc button fix for light modes - ensure proper text contrast on gradient backgrounds */ [data-theme="light"] button[style*="background: linear-gradient"], [data-theme="light"] button[style*="background: linear-gradient"] *, [data-theme="light"] button[style*="background: linear-gradient"] i, [data-theme="light-accent"] button[style*="background: linear-gradient"], [data-theme="light-accent"] button[style*="background: linear-gradient"] *, [data-theme="light-accent"] button[style*="background: linear-gradient"] i { color: var(--background-color) !important; -webkit-text-fill-color: var(--background-color) !important; } /* Ensure Drop Bloc button specifically has proper contrast in all light modes */ [data-theme="light"] button[onclick*="openBlocModal"], [data-theme="light"] button[onclick*="openBlocModal"] *, [data-theme="light-accent"] button[onclick*="openBlocModal"], [data-theme="light-accent"] button[onclick*="openBlocModal"] * { color: var(--background-color) !important; -webkit-text-fill-color: var(--background-color) !important; } /* ABSOLUTE FINAL OVERRIDE - Force gradient on light-accent nav tabs */ /* This must be the last rule to override everything */ [data-theme="light-accent"] button.mobile-nav-tab { background: linear-gradient(135deg, var(--accent-color), var(--primary-color), var(--tertiary-color)) !important; background-attachment: fixed !important; } html[data-theme="light-accent"] button.mobile-nav-tab, body[data-theme="light-accent"] button.mobile-nav-tab, html[data-theme="light-accent"] body button.mobile-nav-tab { background: linear-gradient(135deg, var(--accent-color), var(--primary-color), var(--tertiary-color)) !important; background-attachment: fixed !important; } /* CRITICAL: Hide all navigation tabs by default to prevent flash on page load */ /* JavaScript will show only the tabs that should be visible based on settings */ #bottom-nav .tab-menu-item, #tab-menu-modal .tab-menu-item { display: none !important; } /* Allow JavaScript to override and show specific tabs */ #bottom-nav .tab-menu-item.tab-visible, #tab-menu-modal .tab-menu-item.tab-visible { display: flex !important; } /* Tab menu tile styling (blend with sheet) */ #tab-menu-modal .tab-menu-item { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; position: relative; } [data-theme="light"] #tab-menu-modal .tab-menu-item { background: rgba(0, 0, 0, 0.03) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; } [data-theme="light-accent"] #tab-menu-modal .tab-menu-item { background: var(--bg-secondary) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; } #tab-menu-modal .tab-badge { position: absolute; top: 8px; right: 10px; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px; background: #ff3b30; color: #fff !important; font-size: 10px; font-weight: 700; display: none; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(255, 59, 48, 0.35); } /* Bytes upload modal (standalone upload mode) */ #bytes-modal-tab-nav { background: transparent !important; border-bottom: 0 !important; backdrop-filter: none; -webkit-backdrop-filter: none; } #bytes-modal-tab-nav > button:not([id^="modal-tab"]) { width: 34px !important; height: 34px !important; border-radius: 999px !important; background: transparent !important; border: 0 !important; color: var(--text-primary, var(--text-color)) !important; box-shadow: none !important; transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } #bytes-modal-tab-nav > button:not([id^="modal-tab"]):hover { background: color-mix(in srgb, var(--primary-color, var(--accent-color)) 10%, transparent) !important; transform: translateY(-1px); } #bytes-modal-tab-nav > button:not([id^="modal-tab"]):active { transform: scale(0.96); } #bytes-modal-tab-nav > button:not([id^="modal-tab"]) i { color: var(--text-primary, var(--text-color)) !important; -webkit-text-fill-color: var(--text-primary, var(--text-color)) !important; font-size: 14px !important; } #bytes-modal-title-text { display: inline-flex; align-items: center; justify-content: center; max-width: min(56vw, 280px); min-height: 28px; padding: 0; border-radius: 0; background: transparent; border: 0; box-shadow: none; color: var(--text-primary, var(--text-color)) !important; -webkit-text-fill-color: var(--text-primary, var(--text-color)) !important; font-size: 11px !important; font-weight: 950 !important; letter-spacing: 0.18em !important; text-transform: uppercase; } html[data-theme="light"] #bytes-modal-tab-nav, html[data-theme="light-accent"] #bytes-modal-tab-nav { background: transparent !important; border-bottom-color: transparent !important; } html[data-theme="dark"] #bytes-modal-tab-nav, html[data-theme="dark-accent"] #bytes-modal-tab-nav { background: transparent !important; border-bottom-color: transparent !important; } #new-custom-modal.upload-only #bytes-modal-tab-nav { display: none !important; } #new-custom-modal.upload-only #modal-content-blocs, #new-custom-modal.upload-only #modal-content-settings { display: none !important; } #new-custom-modal.upload-only #bytes-modal-scroll { padding-top: calc(64px + env(safe-area-inset-top)) !important; } #new-custom-modal { background: var(--bg-primary) !important; color: var(--text-primary, var(--text-color)) !important; z-index: 130000 !important; } html[data-theme="light"] #new-custom-modal, html[data-theme="light-accent"] #new-custom-modal { background: #ffffff !important; } #new-custom-modal #bytes-modal-tab-nav { background: var(--bg-primary) !important; border-bottom: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-theme="light"] #new-custom-modal #bytes-modal-tab-nav, html[data-theme="light-accent"] #new-custom-modal #bytes-modal-tab-nav { background: #ffffff !important; } #new-custom-modal #bytes-modal-title-text, #new-custom-modal h3, #new-custom-modal p, #new-custom-modal label, #new-custom-modal button, #new-custom-modal input, #new-custom-modal textarea, #new-custom-modal select { color: var(--text-primary, var(--text-color)) !important; -webkit-text-fill-color: var(--text-primary, var(--text-color)) !important; } #new-custom-modal p, #new-custom-modal label, #new-custom-modal .bloc-drop-meta, #new-custom-modal .bytes-posting-compact-label, #new-custom-modal .bytes-posting-compact-meta { color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; } #new-custom-modal input, #new-custom-modal textarea, #new-custom-modal select, #new-custom-modal .bytes-bloc-dropdown-search { background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 86%, var(--text-color) 4%) !important; border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent) !important; color: var(--text-primary, var(--text-color)) !important; -webkit-text-fill-color: var(--text-primary, var(--text-color)) !important; box-shadow: none !important; } #new-custom-modal input::placeholder, #new-custom-modal textarea::placeholder { color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; opacity: 0.72; } #new-custom-modal input:focus, #new-custom-modal textarea:focus, #new-custom-modal select:focus, #new-custom-modal .bytes-bloc-dropdown-search:focus { border-color: color-mix(in srgb, var(--text-color) 26%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-color) 7%, transparent) !important; outline: none !important; } #new-custom-modal .bytes-bloc-dropdown-btn { background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 88%, var(--text-color) 5%) !important; border-color: color-mix(in srgb, var(--text-color) 10%, transparent) !important; color: var(--text-primary, var(--text-color)) !important; box-shadow: none !important; } #new-custom-modal .bytes-posting-compact { background: transparent !important; border-color: color-mix(in srgb, var(--text-color) 8%, transparent) !important; box-shadow: none !important; } #new-custom-modal .bytes-bloc-dropdown-panel { background: color-mix(in srgb, var(--bg-primary) 96%, var(--text-color) 2%) !important; border-color: color-mix(in srgb, var(--text-color) 10%, transparent) !important; } #new-custom-modal .bytes-bloc-dropdown-item, #new-custom-modal .bytes-bloc-dropdown-auto { background: transparent !important; border-color: color-mix(in srgb, var(--text-color) 10%, transparent) !important; color: var(--text-primary, var(--text-color)) !important; box-shadow: none !important; } html[data-theme="light"] #new-custom-modal .bytes-bloc-dropdown-panel, html[data-theme="light-accent"] #new-custom-modal .bytes-bloc-dropdown-panel { background: rgba(255,255,255,0.98) !important; border-color: rgba(15,23,42,0.1) !important; box-shadow: 0 24px 60px rgba(15,23,42,0.14) !important; } html[data-theme="light"] #new-custom-modal .bytes-bloc-dropdown-panel::before, html[data-theme="light-accent"] #new-custom-modal .bytes-bloc-dropdown-panel::before { background: rgba(255,255,255,0.98) !important; border-color: rgba(15,23,42,0.1) !important; } html[data-theme="light"] #new-custom-modal .bytes-bloc-dropdown-item, html[data-theme="light"] #new-custom-modal .bytes-bloc-dropdown-auto, html[data-theme="light-accent"] #new-custom-modal .bytes-bloc-dropdown-item, html[data-theme="light-accent"] #new-custom-modal .bytes-bloc-dropdown-auto { background: transparent !important; border-color: rgba(15,23,42,0.08) !important; } html[data-theme="light"] #new-custom-modal .bytes-bloc-dropdown-item:hover, html[data-theme="light"] #new-custom-modal .bytes-bloc-dropdown-auto:hover, html[data-theme="light-accent"] #new-custom-modal .bytes-bloc-dropdown-item:hover, html[data-theme="light-accent"] #new-custom-modal .bytes-bloc-dropdown-auto:hover { background: rgba(15,23,42,0.025) !important; } html[data-theme="light"] #new-custom-modal .bytes-bloc-dropdown-btn, html[data-theme="light-accent"] #new-custom-modal .bytes-bloc-dropdown-btn, html[data-theme="light"] #new-custom-modal input, html[data-theme="light-accent"] #new-custom-modal input, html[data-theme="light"] #new-custom-modal textarea, html[data-theme="light-accent"] #new-custom-modal textarea, html[data-theme="light"] #new-custom-modal select, html[data-theme="light-accent"] #new-custom-modal select { background: #ffffff !important; border-color: rgba(15,23,42,0.14) !important; box-shadow: none !important; } html[data-theme="light"] #new-custom-modal .bytes-media-type-grid button:not(.is-media-selected):not(.is-bloc-preferred), html[data-theme="light-accent"] #new-custom-modal .bytes-media-type-grid button:not(.is-media-selected):not(.is-bloc-preferred), html[data-theme="light"] #new-custom-modal #bytes-sponsored-btn, html[data-theme="light-accent"] #new-custom-modal #bytes-sponsored-btn, html[data-theme="light"] #new-custom-modal #bytes-bucks-gate-btn, html[data-theme="light-accent"] #new-custom-modal #bytes-bucks-gate-btn, html[data-theme="light"] #new-custom-modal #bytes-new-bloc-btn, html[data-theme="light-accent"] #new-custom-modal #bytes-new-bloc-btn { background: #ffffff !important; border-color: rgba(15,23,42,0.12) !important; box-shadow: none !important; } html[data-theme="light"] #new-custom-modal .bytes-media-type-grid button:not(.is-media-selected):not(.is-bloc-preferred):hover, html[data-theme="light-accent"] #new-custom-modal .bytes-media-type-grid button:not(.is-media-selected):not(.is-bloc-preferred):hover { background: rgba(15,23,42,0.025) !important; box-shadow: none !important; } html[data-theme="light"] #new-custom-modal .bytes-posting-compact-icon, html[data-theme="light-accent"] #new-custom-modal .bytes-posting-compact-icon, html[data-theme="light"] #new-custom-modal .bytes-bloc-dropdown-btn::after, html[data-theme="light-accent"] #new-custom-modal .bytes-bloc-dropdown-btn::after { background: #ffffff !important; border: 1px solid rgba(15,23,42,0.10); } html[data-theme="dark"] #new-custom-modal .bytes-bloc-dropdown-panel, html[data-theme="dark-accent"] #new-custom-modal .bytes-bloc-dropdown-panel { background: rgba(18,18,20,0.98) !important; border-color: rgba(255,255,255,0.1) !important; } html[data-theme="dark"] #new-custom-modal .bytes-bloc-dropdown-panel::before, html[data-theme="dark-accent"] #new-custom-modal .bytes-bloc-dropdown-panel::before { background: rgba(18,18,20,0.98) !important; border-color: rgba(255,255,255,0.1) !important; } html[data-theme="dark"] #new-custom-modal .bytes-bloc-dropdown-item, html[data-theme="dark"] #new-custom-modal .bytes-bloc-dropdown-auto, html[data-theme="dark-accent"] #new-custom-modal .bytes-bloc-dropdown-item, html[data-theme="dark-accent"] #new-custom-modal .bytes-bloc-dropdown-auto { background: transparent !important; border-color: rgba(255,255,255,0.09) !important; } #new-custom-modal .bytes-media-type-grid button:not([id="bytes-sponsored-btn"]):not([id="bytes-bucks-gate-btn"]):not(.is-bloc-preferred), #new-custom-modal #bytes-sponsored-btn, #new-custom-modal #bytes-bucks-gate-btn, #new-custom-modal #bytes-new-bloc-btn { background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 86%, var(--text-color) 4%) !important; border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent) !important; color: var(--text-primary, var(--text-color)) !important; -webkit-text-fill-color: var(--text-primary, var(--text-color)) !important; box-shadow: none !important; } #new-custom-modal .bytes-media-type-grid button, #new-custom-modal #bytes-sponsored-btn, #new-custom-modal #bytes-bucks-gate-btn { position: relative; /* not overflow:hidden -- it shears the brand marks off the pills */ overflow: visible; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease !important; -webkit-tap-highlight-color: transparent; } /* Hover warms the edge and nothing else. The lift and drop shadow made a row of pills bounce where the publish tiles simply hold still. */ #new-custom-modal #bytes-sponsored-btn:hover, #new-custom-modal #bytes-bucks-gate-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--text-color) 18%, transparent) !important; background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 78%, var(--text-color) 8%) !important; box-shadow: 0 10px 22px color-mix(in srgb, var(--text-color) 9%, transparent) !important; } #new-custom-modal .bytes-media-type-grid button:hover { border-color: color-mix(in srgb, var(--text-color) 20%, transparent) !important; } #new-custom-modal .bytes-media-type-grid button:active, #new-custom-modal #bytes-sponsored-btn:active, #new-custom-modal #bytes-bucks-gate-btn:active { transform: translateY(0) scale(0.985); opacity: 0.88; } /* The selected pill is drawn in create.css, alongside the rest of Create's styling. The ring and drop shadow that used to sit here made these read louder than the publish tiles above them. */ #new-custom-modal #bytes-sponsored-btn[aria-pressed="true"] { background: rgba(245, 166, 35, 0.16) !important; border-color: #f5a623 !important; color: var(--text-primary, var(--text-color)) !important; -webkit-text-fill-color: var(--text-primary, var(--text-color)) !important; box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.18) !important; font-weight: 800; } #new-custom-modal #bytes-section-youtube input, #new-custom-modal #bytes-section-soundcloud input, #new-custom-modal #bytes-section-twitch input, #new-custom-modal #bytes-section-tiktok input, #new-custom-modal #bytes-section-x input, #new-custom-modal #bytes-section-facebook input, #new-custom-modal #bytes-section-drive input, #new-custom-modal #bytes-section-dropbox input, #new-custom-modal #bytes-section-audio input[type="text"] { min-height: 42px !important; padding: 10px 13px !important; border-radius: 12px !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 520 !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; background: rgba(248,250,252,0.78) !important; border: 1px solid rgba(15,23,42,0.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.70) !important; } #new-custom-modal #bytes-section-instagram > div:first-child { gap: 8px !important; } #new-custom-modal #bytes-section-instagram input { min-height: 42px !important; padding: 10px 13px !important; border-radius: 12px !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 520 !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; background: rgba(248,250,252,0.78) !important; border: 1px solid rgba(15,23,42,0.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.70) !important; } #new-custom-modal #bytes-section-instagram button { min-height: 44px !important; min-width: 86px !important; padding: 0 12px !important; border-radius: 12px !important; font-size: 12px !important; font-weight: 800 !important; box-shadow: none !important; } #new-custom-modal #bytes-section-bandlab textarea, #new-custom-modal #bytes-section-universal textarea, #new-custom-modal #bytes-section-blank input, #new-custom-modal #bytes-section-blank textarea { padding: 12px 13px !important; border-radius: 12px !important; font-size: 13px !important; line-height: 1.35 !important; font-weight: 520 !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; background: rgba(248,250,252,0.78) !important; border: 1px solid rgba(15,23,42,0.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.70) !important; } #new-custom-modal #bytes-section-bandlab textarea, #new-custom-modal #bytes-section-universal textarea { min-height: 82px !important; } #new-custom-modal #bytes-section-blank textarea { min-height: 108px !important; } #new-custom-modal [id^="bytes-section-"] input::placeholder, #new-custom-modal [id^="bytes-section-"] textarea::placeholder { font-weight: 520 !important; color: rgba(100,116,139,0.76) !important; -webkit-text-fill-color: rgba(100,116,139,0.76) !important; } #new-custom-modal [id$="-preview"] { margin-top: 10px !important; } #new-custom-modal .bytes-premium-link-preview { margin-top: 10px; padding: 10px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.82)), color-mix(in srgb, var(--surface-color, var(--bg-primary)) 92%, var(--text-color) 4%); border: 1px solid rgba(15,23,42,0.10); box-shadow: 0 18px 38px rgba(15,23,42,0.10); } #new-custom-modal .bytes-premium-link-preview__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: var(--text-primary, var(--text-color)); -webkit-text-fill-color: var(--text-primary, var(--text-color)); font-size: 11px; font-weight: 850; } #new-custom-modal .bytes-premium-link-preview__brand, #new-custom-modal .bytes-premium-link-preview__status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } #new-custom-modal .bytes-premium-link-preview__brand i { width: 22px; height: 22px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; -webkit-text-fill-color: #ffffff; background: var(--preview-icon-bg, linear-gradient(135deg, #111827, #ff0050 58%, #00f2ea)); font-size: 10px; } #new-custom-modal .bytes-premium-link-preview__status { flex: 0 0 auto; color: rgba(100,116,139,0.92); -webkit-text-fill-color: rgba(100,116,139,0.92); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; } /* Optional slots: author, stats, caption and confirm. Used by any source that resolves richer metadata (Instagram does); omitted otherwise, so a plain iframe embed still renders exactly as before. */ #new-custom-modal .bytes-premium-link-preview__author { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; min-width: 0; } #new-custom-modal .bytes-premium-link-preview__avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--preview-icon-bg, rgba(15,23,42,0.08)); color: #ffffff; -webkit-text-fill-color: #ffffff; font-size: 13px; font-weight: 800; } #new-custom-modal .bytes-premium-link-preview__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } #new-custom-modal .bytes-premium-link-preview__author-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; } #new-custom-modal .bytes-premium-link-preview__author-name { display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary, var(--text-color)); -webkit-text-fill-color: var(--text-primary, var(--text-color)); font-size: 13.5px; font-weight: 800; } #new-custom-modal .bytes-premium-link-preview__author-name i { color: #4ba3ff; -webkit-text-fill-color: #4ba3ff; font-size: 11px; } #new-custom-modal .bytes-premium-link-preview__author-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(100,116,139,0.95); -webkit-text-fill-color: rgba(100,116,139,0.95); font-size: 11.5px; font-weight: 600; } /* Full-width media (a real photo/video rather than an embedded player), sized by the aspect-ratio the caller sets. */ #new-custom-modal .bytes-premium-link-preview__frame--media { width: 100%; max-width: none; height: auto; max-height: 46vh; } #new-custom-modal .bytes-premium-link-preview__frame--media img, #new-custom-modal .bytes-premium-link-preview__frame--media video { width: 100%; height: 100%; object-fit: cover; display: block; } #new-custom-modal .bytes-premium-link-preview__comments { display: grid; gap: 7px; margin-top: 10px; } #new-custom-modal .bytes-premium-link-preview__comments > div { padding: 8px 10px; border: 1px solid rgba(15,23,42,0.08); border-radius: 10px; background: rgba(15,23,42,0.03); color: rgba(100,116,139,0.95); -webkit-text-fill-color: rgba(100,116,139,0.95); font-size: 12px; line-height: 1.35; } #new-custom-modal .bytes-premium-link-preview__comments strong { color: var(--text-primary, var(--text-color)); -webkit-text-fill-color: var(--text-primary, var(--text-color)); } #new-custom-modal .bytes-premium-link-preview__stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; color: rgba(100,116,139,0.95); -webkit-text-fill-color: rgba(100,116,139,0.95); font-size: 11.5px; font-weight: 700; } #new-custom-modal .bytes-premium-link-preview__stats span { display: inline-flex; align-items: center; gap: 5px; } #new-custom-modal .bytes-premium-link-preview__caption { margin-top: 9px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-primary, var(--text-color)); -webkit-text-fill-color: var(--text-primary, var(--text-color)); font-size: 13px; line-height: 1.4; } /* Neutral, matching the app's other primary actions -- the old card used a per-platform gradient, which is what made each source look different. */ #new-custom-modal .bytes-premium-link-preview__action { width: 100%; margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 13px; background: #111111; color: #ffffff; -webkit-text-fill-color: #ffffff; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; cursor: pointer; } #new-custom-modal .bytes-premium-link-preview__action:active { transform: scale(0.985); } /* The light-mode "everything black" rule paints this label black on a black button, so state the white explicitly. */ [data-theme="light"] #new-custom-modal .bytes-premium-link-preview__action, [data-theme="light"] #new-custom-modal .bytes-premium-link-preview__action i, [data-theme="light-accent"] #new-custom-modal .bytes-premium-link-preview__action, [data-theme="light-accent"] #new-custom-modal .bytes-premium-link-preview__action i, body[data-theme="light"] #new-custom-modal .bytes-premium-link-preview__action, body[data-theme="light"] #new-custom-modal .bytes-premium-link-preview__action i, body[data-theme="light-accent"] #new-custom-modal .bytes-premium-link-preview__action, body[data-theme="light-accent"] #new-custom-modal .bytes-premium-link-preview__action i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #new-custom-modal .bytes-premium-link-preview__frame { width: min(100%, 218px); height: min(390px, 46vh); margin: 0 auto; position: relative; overflow: hidden; border-radius: 16px; background: #050505; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 14px 32px rgba(0,0,0,0.18); } #new-custom-modal .bytes-premium-link-preview__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } #new-custom-modal .bytes-premium-link-preview__frame--wide { width: 100%; height: min(218px, 28vh); max-width: none; } #new-custom-modal .bytes-premium-link-preview__frame--audio { width: 100%; height: auto; min-height: 54px; padding: 12px; box-sizing: border-box; background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88)); } #new-custom-modal .bytes-premium-link-preview__frame--audio audio { width: 100%; display: block; } #new-custom-modal .bytes-premium-link-preview__fallback { min-height: 118px; border-radius: 16px; display: grid; place-items: center; text-align: center; padding: 18px; color: #ffffff; -webkit-text-fill-color: #ffffff; background: radial-gradient(circle at 25% 15%, rgba(0,242,234,0.42), transparent 38%), linear-gradient(135deg, #111827, #ff0050); } #new-custom-modal .bytes-premium-link-preview__fallback i { font-size: 30px; margin-bottom: 8px; } #new-custom-modal .bytes-premium-link-preview__fallback strong { display: block; font-size: 14px; font-weight: 900; margin-bottom: 4px; } #new-custom-modal .bytes-premium-link-preview__fallback span { display: block; font-size: 11px; font-weight: 700; opacity: 0.86; } /* A selected pill does not move or brighten on hover; it is already showing its state through its own colour. */ #new-custom-modal #submit-new-byte-btn { background: var(--text-primary, var(--text-color)) !important; color: var(--bg-primary) !important; -webkit-text-fill-color: var(--bg-primary) !important; box-shadow: 0 14px 32px color-mix(in srgb, var(--text-color) 14%, transparent) !important; } #new-custom-modal #submit-new-byte-btn i { color: var(--bg-primary) !important; -webkit-text-fill-color: var(--bg-primary) !important; } #new-custom-modal #submit-new-byte-btn.is-posted-flash { background: var(--primary-color, var(--accent-color)) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; transform: translateY(-1px) scale(1.01); box-shadow: 0 18px 42px color-mix(in srgb, var(--primary-color, var(--accent-color)) 28%, transparent) !important; } #new-custom-modal #submit-new-byte-btn.is-posted-flash i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #new-custom-modal #submit-new-byte-btn + button { background: transparent !important; border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent) !important; color: var(--text-secondary) !important; -webkit-text-fill-color: var(--text-secondary) !important; } html[data-theme="dark"] #new-custom-modal, html[data-theme="dark-accent"] #new-custom-modal { background: var(--bg-primary, #050505) !important; } html[data-theme="dark"] #new-custom-modal #bytes-modal-tab-nav, html[data-theme="dark-accent"] #new-custom-modal #bytes-modal-tab-nav { background: transparent !important; border-bottom-color: transparent !important; } #new-custom-modal.upload-only #modal-content-wrapper, #new-custom-modal.bloc-add-mode #modal-content-wrapper { padding: 14px 16px 22px !important; } #bytes-auth-section { margin-bottom: 14px !important; } #bytes-upload-form-content > div { margin-bottom: 12px !important; } #bytes-upload-form-content > div > p { margin-bottom: 6px !important; } .bytes-posting-compact { display: flex; align-items: center; min-width: 0; gap: 10px; padding: 2px 0 10px; border-radius: 0; background: transparent; border: none; border-bottom: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent); color: var(--text-primary, var(--text-color)); } .bytes-posting-compact-icon { width: 30px; height: 30px; border-radius: 11px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary-color) 18%, transparent); color: var(--primary-color); font-size: 12px; } .bytes-posting-compact-copy { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; } .bytes-posting-compact-label { color: var(--text-secondary); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; flex: 0 0 auto; } .bytes-posting-compact-name { min-width: 0; color: var(--text-primary, var(--text-color)); font-size: 14px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; } .bytes-posting-compact-meta { color: var(--text-secondary); font-size: 11px; font-weight: 700; flex: 0 0 auto; } .bytes-create-preview-action { width: 100%; min-height: 52px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent); background: transparent; color: var(--text-primary, var(--text-color)); -webkit-text-fill-color: var(--text-primary, var(--text-color)); display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; margin: 0 0 12px; box-shadow: none; } .bytes-create-preview-action:hover { background: color-mix(in srgb, var(--text-color) 5%, transparent); border-color: color-mix(in srgb, var(--text-color) 18%, transparent); } #bytes-modal-title-text.is-bloc-browsing { letter-spacing: 0 !important; gap: 7px; text-transform: none; transition: opacity 0.16s ease, transform 0.16s ease; display: inline-flex; align-items: center; max-width: calc(100vw - 96px); } #bytes-modal-title-text.is-bloc-browsing .bytes-title-icon { width: 18px; height: 18px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; color: #ffffff; -webkit-text-fill-color: #ffffff; font-size: 9px; } #bytes-modal-title-text.is-bloc-browsing .bytes-title-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden; } #bytes-modal-title-text.is-bloc-browsing .bytes-title-name { min-width: 0; font-size: 12px; font-weight: 950; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bytes-modal-title-text.is-bloc-browsing .bytes-title-meta { max-width: 150px; color: var(--text-secondary); -webkit-text-fill-color: var(--text-secondary); font-size: 9px; line-height: 1; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.04em; text-transform: uppercase; } .bytes-title-actions { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; pointer-events: auto; } .bytes-title-action { width: 24px; height: 24px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent); background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 82%, transparent); color: var(--text-secondary); -webkit-text-fill-color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; box-shadow: none; cursor: pointer; padding: 0; } .bytes-title-action.is-primary { background: var(--active-bloc-accent, var(--primary-color, var(--accent-color))); border-color: transparent; color: #ffffff; -webkit-text-fill-color: #ffffff; } .bytes-title-action i { color: currentColor !important; -webkit-text-fill-color: currentColor !important; font-size: 9px !important; } .bytes-draft-preview-back { position: fixed; display: none; left: 50%; bottom: var(--mobile-bottom-nav-height, calc(58px + env(safe-area-inset-bottom, 0px))); transform: translateX(-50%); z-index: 12020; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.94); color: #111111; -webkit-text-fill-color: #111111; font-size: 12px; font-weight: 900; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,0.24); } body.bytes-draft-preview-mode .bytes-draft-preview-back { display: inline-flex; } body.bytes-draft-preview-mode #mobile-bytes-tv-frame, body.bytes-draft-preview-mode #mobile-bytes-tv-empty, body.bytes-draft-preview-mode #mobile-bytes-feed-legacy { display: none !important; } body.bytes-tv-search-fullscreen #mobile-app-header, body.bytes-tv-search-fullscreen #bottom-nav, body.bytes-tv-search-fullscreen .bottom-navigation { display: none !important; } body.bytes-tv-search-fullscreen #mobile-bytes-tv-shell { position: fixed !important; inset: 0 !important; z-index: 2147482000 !important; width: 100vw !important; height: 100dvh !important; background: var(--app-bg, #fff) !important; isolation: isolate !important; overflow: hidden !important; } body.bytes-tv-search-fullscreen #mobile-bytes-tv-frame { display: block !important; position: fixed !important; inset: 0 !important; z-index: 2147482001 !important; width: 100vw !important; height: 100dvh !important; background: var(--app-bg, #fff) !important; } /* TV scrolls above the persistent nav, matching the Moments viewport. */ body.bytes-active:not(.bytes-tv-search-fullscreen) #mobile-bytes-tv-shell { --mobile-bytes-tv-bottom-gap: calc(58px + env(safe-area-inset-bottom, 0px)) !important; } .bytes-draft-hero-preview { position: absolute; inset: 0; z-index: 5; overflow: hidden; background: #000; color: #fff; --bytes-tv-mobile-hero-accent-rgb: 255, 109, 71; --bytes-tv-mobile-hero-accent-solid: var(--primary-color, #ff6d47); --bytes-tv-mobile-hero-button-primary-top: var(--primary-color, #ff6d47); --bytes-tv-mobile-hero-button-primary-bottom: var(--accent-color, #f04127); --bytes-tv-mobile-hero-button-secondary-border: color-mix(in srgb, var(--primary-color, #ff6d47) 44%, rgba(255,255,255,0.22)); } .bytes-draft-hero-preview .bytes-tv-hero-stage, .bytes-draft-hero-preview .bytes-tv-hero-surface, .bytes-draft-hero-preview .bytes-tv-hero-media-frame { position: absolute; inset: 0; overflow: hidden; background: #000; } .bytes-draft-hero-preview .bytes-tv-hero-media-frame { filter: saturate(1.03) contrast(1.04); } .bytes-draft-hero-preview .bytes-tv-hero-surface--cover img, .bytes-draft-hero-preview .bytes-tv-hero-surface--cover video, .bytes-draft-hero-preview .bytes-tv-hero-media-frame iframe { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; display: block; border: 0; } .bytes-draft-hero-preview .bytes-tv-hero-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 34px; background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--primary-color, #fff) 20%, transparent), transparent 28%), linear-gradient(145deg, #111218, #020203); } .bytes-draft-hero-preview .bytes-tv-hero-fallback__content { max-width: 18rem; display: grid; gap: 10px; text-align: center; } .bytes-draft-hero-preview .bytes-tv-hero-fallback__kicker { color: var(--primary-color, #fff); font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; } .bytes-draft-hero-preview .bytes-tv-hero-fallback__body, .bytes-draft-hero-preview .bytes-tv-hero-fallback__title { color: rgba(255,255,255,0.92); font-size: 24px; line-height: 1.08; font-weight: 900; } .bytes-draft-hero-preview .bytes-tv-hero-overlay--mobile-embed { position: absolute; inset: 0; z-index: 3; display: flex; justify-content: flex-end; align-items: stretch; padding: 12px 18px 22px; box-sizing: border-box; pointer-events: none; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.12), rgba(255,255,255,0.00) 24%), linear-gradient(180deg, rgba(3,3,5,0.16) 0%, rgba(3,3,5,0.04) 14%, rgba(3,3,5,0.00) 28%, rgba(3,3,5,0.14) 58%, rgba(3,3,5,0.94) 100%); } .bytes-draft-hero-preview .bytes-tv-mobile-hero-center-play { position: absolute; top: 41%; left: 50%; transform: translate(-50%, -50%); width: 98px; height: 98px; border-radius: 28px; border: 1px solid rgba(255,255,255,0.26); background: radial-gradient(circle at 50% 46%, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 58%, rgba(5,7,10,0.34) 100%), linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)); color: rgba(255,255,255,0.98); display: inline-flex; align-items: center; justify-content: center; z-index: 4; box-shadow: 0 24px 56px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); pointer-events: auto; } .bytes-draft-hero-preview .bytes-tv-mobile-hero-center-play__icon { position: relative; z-index: 1; font-size: 31px; line-height: 1; transform: translateX(3px); } .bytes-draft-hero-preview .bytes-tv-mobile-hero-bottom { position: relative; width: 100%; pointer-events: auto; } .bytes-draft-hero-preview .bytes-tv-mobile-hero-copy { display: grid; gap: 12px; width: 100%; } .bytes-draft-hero-preview .bytes-tv-mobile-hero-topbar { display: flex; align-items: center; gap: 9px; min-width: 0; } .bytes-draft-hero-preview .bytes-tv-mobile-hero-avatar { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); color: #fff; font-weight: 950; letter-spacing: 0; flex: 0 0 auto; } .bytes-draft-hero-preview .bytes-tv-mobile-hero-avatar img { width: 100%; height: 100%; object-fit: cover; } .bytes-draft-hero-preview .bytes-tv-mobile-hero-brand { min-width: 0; display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.9); font-size: 12px; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; } .bytes-draft-hero-preview .bytes-tv-mobile-hero-brand__source { color: var(--bytes-tv-mobile-hero-accent-solid); } .bytes-draft-hero-preview .bytes-tv-hero-copy { width: min(100%, 24rem); display: grid; gap: 10px; } .bytes-draft-hero-preview .bytes-tv-hero-copy__title--poster { display: grid; gap: 2px; width: min(100%, 11.2ch); max-width: none; margin: 0; color: #fff; -webkit-text-fill-color: #fff; font-size: clamp(42px, 12.4vw, 70px); font-weight: 930; line-height: 0.86; letter-spacing: -0.062em; text-shadow: 0 2px 10px rgba(0,0,0,0.24), 0 18px 48px rgba(0,0,0,0.34); } .bytes-draft-hero-preview .bytes-tv-hero-copy__line { display: block; white-space: normal; } .bytes-draft-hero-preview .bytes-tv-hero-copy__word { display: inline-block; color: #fff; -webkit-text-fill-color: #fff; } .bytes-draft-hero-preview .bytes-tv-hero-copy__word--accent, .bytes-draft-hero-preview .bytes-tv-hero-copy__tagline { color: var(--bytes-tv-mobile-hero-accent-solid); -webkit-text-fill-color: var(--bytes-tv-mobile-hero-accent-solid); } .bytes-draft-hero-preview .bytes-tv-hero-copy__tagline { display: block; margin-top: 5px; font-size: 0.34em; line-height: 1; letter-spacing: 0; } .bytes-draft-hero-preview .bytes-tv-hero-actions--mobile { display: flex; gap: 12px; margin-top: 14px; } .bytes-draft-hero-preview .bytes-tv-hero-button { flex: 1 1 0; min-height: 52px; padding: 0 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 12px; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; background: linear-gradient(180deg, rgba(15,15,20,0.52), rgba(7,7,10,0.68)); } .bytes-draft-hero-preview .bytes-tv-mobile-hero-button--primary { background: linear-gradient(180deg, var(--bytes-tv-mobile-hero-button-primary-top) 0%, var(--bytes-tv-mobile-hero-button-primary-bottom) 100%); border-color: color-mix(in srgb, var(--bytes-tv-mobile-hero-button-primary-top) 72%, white 8%); color: #fff; } .bytes-draft-hero-preview .bytes-tv-mobile-hero-button--secondary { background: linear-gradient(180deg, rgba(12,12,16,0.42), rgba(5,5,8,0.66)); border-color: var(--bytes-tv-mobile-hero-button-secondary-border); } body.bytes-draft-preview-mode #mobile-card-feed .bytes-engagement-row button { pointer-events: none; } [data-theme="dark"] .bytes-posting-compact, [data-theme="dark-accent"] .bytes-posting-compact { background: transparent; border-color: rgba(255,255,255,0.08); } #new-custom-modal.no-upload #modal-tab-upload, #new-custom-modal.no-upload #modal-content-upload { display: none !important; } /* Blip drop mode — applied to the new bytes modal when opened via the Blips viewer's + button. Hides the auth pill and bloc selector. The header title and submit-button label are swapped in JS (the class is added/removed by openMobileBlipDropForm + the submit handler's finally at mobile.html:~18768). */ #new-custom-modal.story-mode #bytes-auth-section, #new-custom-modal.story-mode #bytes-bloc-selector { display: none !important; } #new-custom-modal.bloc-add-mode #bytes-modal-tab-nav { display: flex !important; } #new-custom-modal.bloc-add-mode #bytes-modal-settings-button { display: none !important; } #new-custom-modal.bloc-add-mode #bytes-modal-scroll { padding-top: calc(72px + env(safe-area-inset-top)) !important; padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important; } #new-custom-modal.bloc-add-mode #bytes-new-bloc-btn { display: none !important; } #new-custom-modal.bloc-add-mode #bytes-bloc-dropdown-btn { cursor: default; } #new-custom-modal.bloc-add-mode .bytes-media-type-grid { grid-template-columns: 1fr !important; } #new-custom-modal.bloc-add-mode .bytes-media-type-grid [data-byte-media-option] { display: none !important; } #new-custom-modal.bloc-add-mode .bytes-media-type-grid [data-byte-media-option].is-bloc-preferred { display: flex !important; align-items: center; justify-content: flex-start; gap: 12px; min-height: 64px; padding: 12px 14px !important; border-radius: 18px !important; text-align: left; } #new-custom-modal.bloc-add-mode .bytes-media-type-label { display: none; } #new-custom-modal.bloc-add-mode .bytes-media-type-section { margin-bottom: 14px !important; } .bytes-media-option-icon { width: 38px; height: 38px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; color: #ffffff; font-size: 15px; } .bytes-media-option-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .bytes-media-option-title { font-size: 14px; font-weight: 950; color: var(--text-primary, var(--text-color)); -webkit-text-fill-color: var(--text-primary, var(--text-color)); } .bytes-media-option-meta { font-size: 11px; font-weight: 750; color: var(--text-secondary); -webkit-text-fill-color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #new-custom-modal.bloc-add-mode #bytes-youtube-import-section, #new-custom-modal.bloc-add-mode #bytes-section-tiktok > div[style*="text-align: center"], #new-custom-modal.bloc-add-mode #bytes-section-tiktok > button { display: none !important; } #new-custom-modal.bloc-add-mode #bytes-section-media, #new-custom-modal.bloc-add-mode #bytes-section-youtube, #new-custom-modal.bloc-add-mode #bytes-section-soundcloud, #new-custom-modal.bloc-add-mode #bytes-section-twitch, #new-custom-modal.bloc-add-mode #bytes-section-tiktok, #new-custom-modal.bloc-add-mode #bytes-section-instagram, #new-custom-modal.bloc-add-mode #bytes-section-audio, #new-custom-modal.bloc-add-mode #bytes-section-bandlab, #new-custom-modal.bloc-add-mode #bytes-section-x, #new-custom-modal.bloc-add-mode #bytes-section-facebook, #new-custom-modal.bloc-add-mode #bytes-section-drive, #new-custom-modal.bloc-add-mode #bytes-section-dropbox, #new-custom-modal.bloc-add-mode #bytes-section-universal, #new-custom-modal.bloc-add-mode #bytes-section-blank { position: relative; } #new-custom-modal.bloc-add-mode #bytes-section-media input, #new-custom-modal.bloc-add-mode #bytes-section-youtube input, #new-custom-modal.bloc-add-mode #bytes-section-soundcloud input, #new-custom-modal.bloc-add-mode #bytes-section-twitch input, #new-custom-modal.bloc-add-mode #bytes-section-tiktok input, #new-custom-modal.bloc-add-mode #bytes-section-instagram input, #new-custom-modal.bloc-add-mode #bytes-section-audio input[type="text"], #new-custom-modal.bloc-add-mode #bytes-section-bandlab textarea, #new-custom-modal.bloc-add-mode #bytes-section-x input, #new-custom-modal.bloc-add-mode #bytes-section-facebook input, #new-custom-modal.bloc-add-mode #bytes-section-drive input, #new-custom-modal.bloc-add-mode #bytes-section-dropbox input, #new-custom-modal.bloc-add-mode #bytes-section-universal textarea, #new-custom-modal.bloc-add-mode #bytes-section-blank input, #new-custom-modal.bloc-add-mode #bytes-section-blank textarea { border-radius: 18px !important; padding: 18px !important; background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 90%, var(--text-color) 4%) !important; border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent) !important; box-shadow: 0 14px 34px color-mix(in srgb, var(--text-color) 7%, transparent) !important; color: var(--text-primary, var(--text-color, #111827)) !important; -webkit-text-fill-color: var(--text-primary, var(--text-color, #111827)) !important; caret-color: var(--accent-color, #14b8a6) !important; font-weight: 650; } #new-custom-modal input, #new-custom-modal textarea { color: var(--text-primary, var(--text-color, #111827)) !important; -webkit-text-fill-color: var(--text-primary, var(--text-color, #111827)) !important; caret-color: var(--accent-color, #14b8a6) !important; } #new-custom-modal input::placeholder, #new-custom-modal textarea::placeholder { color: var(--text-secondary, #6b7280) !important; -webkit-text-fill-color: var(--text-secondary, #6b7280) !important; opacity: 1 !important; } html[data-theme="dark"] #new-custom-modal input, html[data-theme="dark"] #new-custom-modal textarea, html[data-theme="dark-accent"] #new-custom-modal input, html[data-theme="dark-accent"] #new-custom-modal textarea { color: #f8fafc !important; -webkit-text-fill-color: #f8fafc !important; } html[data-theme="dark"] #new-custom-modal input::placeholder, html[data-theme="dark"] #new-custom-modal textarea::placeholder, html[data-theme="dark-accent"] #new-custom-modal input::placeholder, html[data-theme="dark-accent"] #new-custom-modal textarea::placeholder { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } html[data-theme="light"] #new-custom-modal input, html[data-theme="light"] #new-custom-modal textarea, html[data-theme="light-accent"] #new-custom-modal input, html[data-theme="light-accent"] #new-custom-modal textarea { color: #111827 !important; -webkit-text-fill-color: #111827 !important; } html[data-theme="light"] #new-custom-modal input::placeholder, html[data-theme="light"] #new-custom-modal textarea::placeholder, html[data-theme="light-accent"] #new-custom-modal input::placeholder, html[data-theme="light-accent"] #new-custom-modal textarea::placeholder { color: #64748b !important; -webkit-text-fill-color: #64748b !important; } #new-custom-modal input:-webkit-autofill, #new-custom-modal textarea:-webkit-autofill { -webkit-text-fill-color: var(--text-primary, #111827) !important; transition: background-color 9999s ease-in-out 0s; } html[data-theme="light"] #new-custom-modal #bytes-section-youtube input, html[data-theme="light"] #new-custom-modal #bytes-section-soundcloud input, html[data-theme="light"] #new-custom-modal #bytes-section-twitch input, html[data-theme="light"] #new-custom-modal #bytes-section-tiktok input, html[data-theme="light"] #new-custom-modal #bytes-section-instagram input, html[data-theme="light"] #new-custom-modal #bytes-section-audio input[type="text"], html[data-theme="light"] #new-custom-modal #bytes-section-x input, html[data-theme="light"] #new-custom-modal #bytes-section-facebook input, html[data-theme="light"] #new-custom-modal #bytes-section-drive input, html[data-theme="light"] #new-custom-modal #bytes-section-dropbox input, html[data-theme="light-accent"] #new-custom-modal #bytes-section-youtube input, html[data-theme="light-accent"] #new-custom-modal #bytes-section-soundcloud input, html[data-theme="light-accent"] #new-custom-modal #bytes-section-twitch input, html[data-theme="light-accent"] #new-custom-modal #bytes-section-tiktok input, html[data-theme="light-accent"] #new-custom-modal #bytes-section-instagram input, html[data-theme="light-accent"] #new-custom-modal #bytes-section-audio input[type="text"], html[data-theme="light-accent"] #new-custom-modal #bytes-section-x input, html[data-theme="light-accent"] #new-custom-modal #bytes-section-facebook input, html[data-theme="light-accent"] #new-custom-modal #bytes-section-drive input, html[data-theme="light-accent"] #new-custom-modal #bytes-section-dropbox input { color: #111827 !important; -webkit-text-fill-color: #111827 !important; } #new-custom-modal #bytes-section-youtube input, #new-custom-modal #bytes-section-soundcloud input, #new-custom-modal #bytes-section-twitch input, #new-custom-modal #bytes-section-tiktok input, #new-custom-modal #bytes-section-instagram input, #new-custom-modal #bytes-section-audio input[type="text"], #new-custom-modal #bytes-section-x input, #new-custom-modal #bytes-section-facebook input, #new-custom-modal #bytes-section-drive input, #new-custom-modal #bytes-section-dropbox input { color: #111827 !important; -webkit-text-fill-color: #111827 !important; } #new-custom-modal.bloc-add-mode #bytes-section-youtube input, #new-custom-modal.bloc-add-mode #bytes-section-soundcloud input, #new-custom-modal.bloc-add-mode #bytes-section-twitch input, #new-custom-modal.bloc-add-mode #bytes-section-tiktok input, #new-custom-modal.bloc-add-mode #bytes-section-instagram input, #new-custom-modal.bloc-add-mode #bytes-section-x input, #new-custom-modal.bloc-add-mode #bytes-section-facebook input, #new-custom-modal.bloc-add-mode #bytes-section-drive input, #new-custom-modal.bloc-add-mode #bytes-section-dropbox input { min-height: 58px; } #new-custom-modal #bytes-media-input { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } #new-custom-modal.bloc-add-mode #bytes-media-input::file-selector-button, #new-custom-modal.bloc-add-mode #bytes-audio-file::file-selector-button { margin-right: 12px; border: none; border-radius: 999px; padding: 10px 14px; background: var(--text-primary, var(--text-color)); color: var(--bg-primary); font-weight: 850; cursor: pointer; } #new-custom-modal .bytes-file-upload-control { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 16px; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--text-color) 20%, transparent); background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 92%, var(--text-color) 6%); color: var(--text-color); box-sizing: border-box; cursor: pointer; box-shadow: 0 16px 36px color-mix(in srgb, var(--text-color) 8%, transparent); transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; } #new-custom-modal .bytes-file-upload-control:active { transform: scale(0.99); } #new-custom-modal .bytes-file-upload-control:focus-within, #new-custom-modal .bytes-file-upload-control:hover { border-color: color-mix(in srgb, #14b8a6 72%, var(--text-color) 12%); background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 84%, #14b8a6 10%); } #new-custom-modal .bytes-file-upload-icon { width: 46px; height: 46px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: color-mix(in srgb, #14b8a6 86%, var(--surface-color, var(--bg-primary)) 14%); color: var(--bg-primary); font-size: 20px; } #new-custom-modal .bytes-file-upload-copy { display: flex; flex-direction: column; min-width: 0; gap: 4px; } #new-custom-modal .bytes-file-upload-title { color: var(--text-color); font-size: 16px; font-weight: 850; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #new-custom-modal .bytes-file-upload-meta { color: var(--text-secondary); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } #new-custom-modal.bloc-add-mode #bytes-section-blank textarea { min-height: 170px !important; line-height: 1.55; } #new-custom-modal.bloc-add-mode #bytes-section-universal textarea, #new-custom-modal.bloc-add-mode #bytes-section-bandlab textarea { min-height: 116px !important; line-height: 1.45; } #new-custom-modal.bloc-add-mode #bytes-audio-paste-area { border-radius: 20px !important; padding: 24px 18px !important; background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 90%, var(--text-color) 4%) !important; border: 1px dashed color-mix(in srgb, var(--text-color) 16%, transparent) !important; color: var(--text-secondary) !important; box-shadow: 0 14px 34px color-mix(in srgb, var(--text-color) 7%, transparent); } #new-custom-modal.bloc-add-mode #bytes-audio-paste-area p { margin-left: auto !important; margin-right: auto !important; } #new-custom-modal.bloc-add-mode #submit-new-byte-btn { position: fixed !important; left: 16px !important; right: 16px !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; width: auto !important; min-height: 58px !important; border-radius: 999px !important; z-index: 1006 !important; letter-spacing: 0.12em !important; box-shadow: 0 18px 42px color-mix(in srgb, var(--text-color) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--bg-primary) 32%, transparent) inset !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } #new-custom-modal.bloc-add-mode #submit-new-byte-btn:active { transform: translateY(1px) scale(0.992); } #new-custom-modal.bloc-add-mode #submit-new-byte-btn + button { display: none !important; } #new-custom-modal.bloc-add-mode #bytes-universal-preview, #new-custom-modal.bloc-add-mode #bytes-youtube-preview, #new-custom-modal.bloc-add-mode #bytes-soundcloud-preview, #new-custom-modal.bloc-add-mode #bytes-tiktok-preview, #new-custom-modal.bloc-add-mode #bytes-twitch-preview, #new-custom-modal.bloc-add-mode #bytes-x-preview, #new-custom-modal.bloc-add-mode #bytes-facebook-preview, #new-custom-modal.bloc-add-mode #bytes-drive-preview, #new-custom-modal.bloc-add-mode #bytes-dropbox-preview, #new-custom-modal.bloc-add-mode #bytes-media-preview { border-radius: 18px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent); background: color-mix(in srgb, var(--surface-color, var(--bg-primary)) 90%, var(--text-color) 4%); } #bytes-bloc-scoped-note { display: none; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--text-color) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent); color: var(--text-primary, var(--text-color)); font-size: 12px; font-weight: 800; min-width: 0; } #new-custom-modal.bloc-add-mode #bytes-bloc-scoped-note { display: none; } #bytes-bloc-scoped-note i { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; color: #fff; background: var(--primary-color); } #bytes-bloc-scoped-note span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Pull-to-refresh is disabled. Use explicit refresh controls only. */