/* ========================================================================= GLASS THEME — premium glassmorphism + auto prefers-color-scheme Aktywny przy . Auto-przełącza dark/light wg ustawień systemowych przeglądarki. ========================================================================= */ /* ------------------------------------------------------------------------- 1) DEFAULT (DARK) — używane gdy system jest dark albo nie wykrywa ------------------------------------------------------------------------- */ :root[data-theme="glass"] { /* Tło i powierzchnie — szkło na ciemnym tle */ --bg: #0b0d18; --bg-deep: #060710; --surface: rgba(20, 24, 42, 0.55); --surface-2: rgba(28, 33, 56, 0.62); --card: rgba(24, 28, 48, 0.58); --glass-border: rgba(255, 255, 255, 0.10); --glass-border-strong: rgba(255, 255, 255, 0.18); --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16); /* Tekst */ --text: #f3f4ff; --text-soft: #d5d7ee; --muted: #9099b8; --muted-2: #6b7390; /* Akcenty — gradient amber→orange→deep orange (ciepły pomarańczowy) */ --accent: #ff8c42; --accent-hot: #ffa55c; --accent-soft: #ffc998; --accent-blue: #6fb8e8; --accent-gradient: linear-gradient(135deg, #fbbf24 0%, #ff8c42 50%, #ea580c 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(251, 191, 36, 0.85) 0%, rgba(255, 140, 66, 0.85) 50%, rgba(234, 88, 12, 0.85) 100%); --accent-halo: rgba(255, 140, 66, 0.35); --on-accent: #1a0f06; --danger: #f87171; --success: #4ade80; /* Bary i półprzezroczyste blaty */ --topbar-bg: rgba(11, 13, 24, 0.55); --bottom-bg: rgba(11, 13, 24, 0.60); --bubble-recv: rgba(40, 45, 70, 0.58); --dot-color: rgba(255, 255, 255, 0.025); /* Promienie i typografia */ --radius: 18px; --radius-sm: 12px; --radius-pill: 999px; --top-bar-height: 62px; --bottom-nav-height: 72px; --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; /* Cienie glow */ --glow-soft: 0 8px 40px rgba(251, 191, 36, 0.20); --glow-medium: 0 12px 50px rgba(255, 140, 66, 0.28); --glow-strong: 0 0 60px rgba(234, 88, 12, 0.32); } /* ------------------------------------------------------------------------- 2) LIGHT — gdy system preferuje jasny ------------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root[data-theme="glass"] { --bg: #fff8f0; --bg-deep: #fdf1e1; --surface: rgba(255, 255, 255, 0.65); --surface-2: rgba(255, 255, 255, 0.78); --card: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.55); --glass-border-strong: rgba(234, 88, 12, 0.25); --line: rgba(234, 88, 12, 0.10); --line-strong: rgba(234, 88, 12, 0.22); --text: #1f1408; --text-soft: #4a3520; --muted: #8a6f55; --muted-2: #b39a82; --accent: #ea580c; --accent-hot: #f97316; --accent-soft: #fdba74; --accent-blue: #2a7fc4; --accent-gradient: linear-gradient(135deg, #f59e0b 0%, #ea580c 50%, #c2410c 100%); --accent-gradient-soft: linear-gradient(135deg, rgba(245, 158, 11, 0.85) 0%, rgba(234, 88, 12, 0.85) 50%, rgba(194, 65, 12, 0.85) 100%); --accent-halo: rgba(234, 88, 12, 0.22); --on-accent: #ffffff; --danger: #dc2626; --success: #16a34a; --topbar-bg: rgba(255, 255, 255, 0.58); --bottom-bg: rgba(255, 255, 255, 0.68); --bubble-recv: rgba(255, 255, 255, 0.86); --dot-color: rgba(234, 88, 12, 0.05); --glow-soft: 0 8px 40px rgba(245, 158, 11, 0.18); --glow-medium: 0 12px 50px rgba(234, 88, 12, 0.22); --glow-strong: 0 0 60px rgba(194, 65, 12, 0.26); } } /* ------------------------------------------------------------------------- 3) ANIMOWANE TŁO (AURORA) — orbs gradient blobs ------------------------------------------------------------------------- */ :root[data-theme="glass"] body.app-body { background: radial-gradient(900px 600px at 12% 8%, rgba(251, 191, 36, 0.16), transparent 65%), radial-gradient(700px 500px at 95% 95%, rgba(234, 88, 12, 0.14), transparent 70%), radial-gradient(600px 400px at 50% 50%, rgba(255, 140, 66, 0.08), transparent 75%), var(--bg) !important; background-attachment: fixed !important; overflow-x: hidden; } @media (prefers-color-scheme: light) { :root[data-theme="glass"] body.app-body { background: radial-gradient(900px 600px at 10% 10%, rgba(245, 158, 11, 0.22), transparent 65%), radial-gradient(700px 500px at 95% 95%, rgba(234, 88, 12, 0.18), transparent 70%), radial-gradient(600px 400px at 50% 60%, rgba(255, 175, 100, 0.12), transparent 75%), var(--bg) !important; } } /* Pulsujące orby w tle */ :root[data-theme="glass"] body.app-body::after { content: ""; position: fixed; inset: -10%; pointer-events: none; z-index: 0; background: radial-gradient(280px 280px at 22% 30%, rgba(251, 191, 36, 0.22), transparent 70%), radial-gradient(320px 320px at 78% 70%, rgba(234, 88, 12, 0.18), transparent 70%), radial-gradient(220px 220px at 50% 90%, rgba(255, 140, 66, 0.20), transparent 70%); filter: blur(40px); animation: aurora-drift 22s ease-in-out infinite alternate; } @keyframes aurora-drift { 0% { transform: translate(0, 0) scale(1); opacity: 0.85; } 50% { transform: translate(2%, -1.5%) scale(1.06); opacity: 1; } 100% { transform: translate(-1.5%, 2%) scale(1.02); opacity: 0.9; } } /* Wyciszamy stary subtelny pattern z dotami żeby nie konkurował */ :root[data-theme="glass"] body.app-body::before { opacity: 0.18 !important; mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 65%) !important; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 65%) !important; } @media (prefers-reduced-motion: reduce) { :root[data-theme="glass"] body.app-body::after { animation: none; } } /* ------------------------------------------------------------------------- 4) GÓRNY PASEK — glass z blurem ------------------------------------------------------------------------- */ :root[data-theme="glass"] #top-bar { background: var(--topbar-bg) !important; backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; border-bottom: 1px solid var(--glass-border) !important; } :root[data-theme="glass"] #module-title { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 600 !important; letter-spacing: 0.14em; } :root[data-theme="glass"] #settings-button, :root[data-theme="glass"] #theme-toggle, :root[data-theme="glass"] #search-users-button, :root[data-theme="glass"] #online-users-button, :root[data-theme="glass"] #logout-button, :root[data-theme="glass"] #user-id-display { background: var(--surface) !important; backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid var(--glass-border) !important; color: var(--text-soft) !important; } :root[data-theme="glass"] #settings-button:hover, :root[data-theme="glass"] #theme-toggle:hover, :root[data-theme="glass"] #search-users-button:hover, :root[data-theme="glass"] #online-users-button:hover, :root[data-theme="glass"] #logout-button:hover { border-color: var(--accent) !important; color: var(--accent-hot) !important; box-shadow: 0 0 0 4px var(--accent-halo) !important; } :root[data-theme="glass"] #settings-button i, :root[data-theme="glass"] #theme-toggle i, :root[data-theme="glass"] #search-users-button i, :root[data-theme="glass"] #online-users-button i, :root[data-theme="glass"] #logout-button i { color: var(--accent-hot) !important; } /* ------------------------------------------------------------------------- 5) MODUŁY (karty główne) — frosted glass ------------------------------------------------------------------------- */ :root[data-theme="glass"] .module-content { background: var(--card) !important; backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--glass-border) !important; border-radius: 22px !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; } :root[data-theme="glass"] .module-content h2 { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 600 !important; letter-spacing: 0.02em; border-bottom: 1px solid var(--glass-border) !important; } :root[data-theme="glass"] .module-content h2::before { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 500; } /* ------------------------------------------------------------------------- 6) PRZYCISKI AKCJI — gradient z glow ------------------------------------------------------------------------- */ :root[data-theme="glass"] #send-message-button, :root[data-theme="glass"] #send-group-message-button, :root[data-theme="glass"] #send-ai-message-button, :root[data-theme="glass"] #send-selected-group-message-button, :root[data-theme="glass"] #create-group-button, :root[data-theme="glass"] #login-form button[type="submit"], :root[data-theme="glass"] #supabase-register-btn, :root[data-theme="glass"] #ai-setup-form button, :root[data-theme="glass"] #settings-content button, :root[data-theme="glass"] #confirm-create-group { background: var(--accent-gradient) !important; background-image: var(--accent-gradient) !important; color: #ffffff !important; border: 1px solid transparent !important; border-radius: var(--radius-sm) !important; box-shadow: var(--glow-medium) !important; font-weight: 600 !important; letter-spacing: 0.06em; transition: all 220ms cubic-bezier(0.34, 1.56, 0.64, 1) !important; position: relative; overflow: hidden; } :root[data-theme="glass"] #send-message-button::before, :root[data-theme="glass"] #send-group-message-button::before, :root[data-theme="glass"] #login-form button[type="submit"]::before, :root[data-theme="glass"] #supabase-register-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 60%); opacity: 0; transition: opacity 220ms ease; pointer-events: none; } :root[data-theme="glass"] #send-message-button:hover, :root[data-theme="glass"] #send-group-message-button:hover, :root[data-theme="glass"] #send-ai-message-button:hover, :root[data-theme="glass"] #send-selected-group-message-button:hover, :root[data-theme="glass"] #create-group-button:hover, :root[data-theme="glass"] #login-form button[type="submit"]:hover, :root[data-theme="glass"] #ai-setup-form button:hover, :root[data-theme="glass"] #settings-content button:hover, :root[data-theme="glass"] #confirm-create-group:hover { transform: translateY(-2px) !important; box-shadow: var(--glow-strong), var(--glow-medium) !important; filter: brightness(1.05); } :root[data-theme="glass"] #send-message-button:hover::before, :root[data-theme="glass"] #send-group-message-button:hover::before, :root[data-theme="glass"] #login-form button[type="submit"]:hover::before, :root[data-theme="glass"] #supabase-register-btn:hover::before { opacity: 1; } /* Button "Załóż konto" — outline gradient */ :root[data-theme="glass"] #supabase-register-btn { background: var(--surface-2) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--accent-hot) !important; border: 1px solid var(--accent-soft) !important; box-shadow: 0 0 0 1px var(--glass-border), 0 4px 16px var(--accent-halo) !important; } :root[data-theme="glass"] #supabase-register-btn:hover { background: var(--accent-gradient) !important; background-image: var(--accent-gradient) !important; color: #fff !important; } /* Cancel buttons */ :root[data-theme="glass"] #cancel-create-group { background: var(--surface) !important; backdrop-filter: blur(12px); border: 1px solid var(--glass-border) !important; color: var(--text-soft) !important; } /* ------------------------------------------------------------------------- 7) PRZYCISKI Z TOP-BARA i ZAKŁADKI CZATU ------------------------------------------------------------------------- */ :root[data-theme="glass"] #private-chat-tab, :root[data-theme="glass"] #group-chat-tab { background: var(--surface) !important; backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid var(--glass-border) !important; color: var(--muted) !important; border-radius: var(--radius-pill) !important; } :root[data-theme="glass"] #private-chat-tab.active, :root[data-theme="glass"] #group-chat-tab.active, :root[data-theme="glass"] .bg-indigo-600 { background: var(--accent-gradient) !important; background-image: var(--accent-gradient) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--glow-soft) !important; } :root[data-theme="glass"] .bg-gray-200 { background: transparent !important; gap: 0.5rem; } /* ------------------------------------------------------------------------- 8) POLA TEKSTOWE — glass z glow on focus ------------------------------------------------------------------------- */ :root[data-theme="glass"] input[type="text"], :root[data-theme="glass"] input[type="email"], :root[data-theme="glass"] input[type="password"], :root[data-theme="glass"] input[type="number"], :root[data-theme="glass"] #chat-input, :root[data-theme="glass"] #group-chat-input, :root[data-theme="glass"] #ai-chat-input, :root[data-theme="glass"] #username, :root[data-theme="glass"] #user-search-input, :root[data-theme="glass"] #login-email, :root[data-theme="glass"] #login-password, :root[data-theme="glass"] #ai-name, :root[data-theme="glass"] #ai-temperament, :root[data-theme="glass"] #ai-specialization, :root[data-theme="glass"] #ai-hawkins, :root[data-theme="glass"] #group-name-input, :root[data-theme="glass"] #group-member-search-input, :root[data-theme="glass"] textarea, :root[data-theme="glass"] select { background: var(--surface) !important; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--glass-border) !important; border-radius: var(--radius-sm) !important; color: var(--text) !important; padding: 0.85rem 1rem !important; transition: all 200ms ease !important; } :root[data-theme="glass"] input::placeholder, :root[data-theme="glass"] textarea::placeholder { color: var(--muted-2) !important; } :root[data-theme="glass"] input:focus, :root[data-theme="glass"] textarea:focus, :root[data-theme="glass"] select:focus, :root[data-theme="glass"] #login-email:focus, :root[data-theme="glass"] #login-password:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-halo), 0 8px 24px var(--accent-halo) !important; background: var(--surface-2) !important; } :root[data-theme="glass"] label { color: var(--text-soft) !important; font-weight: 500 !important; letter-spacing: 0.02em; } /* ------------------------------------------------------------------------- 9) MODAL LOGOWANIA — flagowy glassowy widok ------------------------------------------------------------------------- */ :root[data-theme="glass"] #login-modal { background: radial-gradient(circle at 50% 30%, rgba(251, 191, 36, 0.20), transparent 50%), radial-gradient(circle at 80% 80%, rgba(234, 88, 12, 0.14), transparent 50%), rgba(6, 7, 16, 0.78) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @media (prefers-color-scheme: light) { :root[data-theme="glass"] #login-modal { background: radial-gradient(circle at 50% 30%, rgba(245, 158, 11, 0.22), transparent 50%), radial-gradient(circle at 80% 80%, rgba(234, 88, 12, 0.16), transparent 50%), rgba(255, 248, 240, 0.85) !important; } } :root[data-theme="glass"] #login-modal > div { background: var(--surface-2) !important; backdrop-filter: blur(36px) saturate(180%) !important; -webkit-backdrop-filter: blur(36px) saturate(180%) !important; border: 1px solid var(--glass-border-strong) !important; border-radius: 26px !important; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.40), 0 0 0 1px var(--glass-border), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; position: relative; overflow: hidden; animation: modal-enter 600ms cubic-bezier(0.16, 1, 0.3, 1); } /* Świetlna obwódka modalu (gradient ring) */ :root[data-theme="glass"] #login-modal > div::before { content: ""; position: absolute; inset: -1px; border-radius: 27px; padding: 1px; background: var(--accent-gradient); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.35; pointer-events: none; } @keyframes modal-enter { from { opacity: 0; transform: translateY(16px) scale(0.96); filter: blur(8px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } :root[data-theme="glass"] #login-modal h2 { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 700 !important; letter-spacing: -0.01em; font-size: 2.4rem !important; } :root[data-theme="glass"] #login-modal p { color: var(--muted) !important; } /* Przycisk Google w glass theme */ :root[data-theme="glass"] #supabase-google-btn { background: var(--surface) !important; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--glass-border-strong) !important; color: var(--text) !important; transition: all 220ms cubic-bezier(0.34, 1.56, 0.64, 1) !important; } :root[data-theme="glass"] #supabase-google-btn:hover { transform: translateY(-1px); border-color: var(--accent-soft) !important; box-shadow: 0 0 0 4px var(--accent-halo), var(--glow-soft) !important; } /* Separator "albo email i hasło" */ :root[data-theme="glass"] #login-modal .border-t { border-color: var(--glass-border) !important; } :root[data-theme="glass"] #login-modal .text-gray-500 { color: var(--muted) !important; } /* Status / message */ :root[data-theme="glass"] #auth-status { color: var(--muted-2) !important; letter-spacing: 0.06em; font-size: 0.72rem !important; text-transform: uppercase; } :root[data-theme="glass"] #auth-message.bg-red-100 { background: rgba(248, 113, 113, 0.12) !important; color: var(--danger) !important; border: 1px solid rgba(248, 113, 113, 0.35); } :root[data-theme="glass"] #auth-message.bg-green-100 { background: rgba(74, 222, 128, 0.12) !important; color: var(--success) !important; border: 1px solid rgba(74, 222, 128, 0.35); } :root[data-theme="glass"] #auth-message.bg-yellow-100 { background: rgba(251, 191, 36, 0.12) !important; color: #fbbf24 !important; border: 1px solid rgba(251, 191, 36, 0.35); } :root[data-theme="glass"] #guest-mode { background: rgba(251, 191, 36, 0.08) !important; backdrop-filter: blur(12px); border: 1px solid rgba(251, 191, 36, 0.30) !important; color: var(--text-soft) !important; border-radius: var(--radius-sm) !important; } /* ------------------------------------------------------------------------- 10) DYMKI WIADOMOŚCI — glass received, gradient sent ------------------------------------------------------------------------- */ :root[data-theme="glass"] .message-bubble.sent { background: var(--accent-gradient) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: var(--glow-soft) !important; } :root[data-theme="glass"] .message-bubble.received { background: var(--bubble-recv) !important; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--glass-border) !important; color: var(--text) !important; } :root[data-theme="glass"] #messages-display, :root[data-theme="glass"] #group-messages-display, :root[data-theme="glass"] #group-messages-container, :root[data-theme="glass"] #ai-messages-display { background: var(--card) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--glass-border) !important; border-radius: 18px !important; } :root[data-theme="glass"] #chat-window, :root[data-theme="glass"] #group-chat-window, :root[data-theme="glass"] #ai-chat-window { background: transparent !important; background-image: none !important; border-top: 1px solid var(--glass-border) !important; } /* ------------------------------------------------------------------------- 11) LISTY (kontakty, grupy, online) ------------------------------------------------------------------------- */ :root[data-theme="glass"] .contact-item, :root[data-theme="glass"] .group-item { background: var(--surface) !important; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--glass-border) !important; border-radius: 14px !important; transition: all 220ms cubic-bezier(0.34, 1.56, 0.64, 1) !important; } :root[data-theme="glass"] .contact-item:hover, :root[data-theme="glass"] .group-item:hover { background: var(--surface-2) !important; border-color: var(--accent-soft) !important; transform: translateY(-1px); box-shadow: 0 8px 24px var(--accent-halo) !important; } :root[data-theme="glass"] .contact-item:hover::before, :root[data-theme="glass"] .group-item:hover::before { background: var(--accent-gradient) !important; } /* ------------------------------------------------------------------------- 12) DOLNY PASEK NAWIGACJI — glass ------------------------------------------------------------------------- */ :root[data-theme="glass"] #bottom-nav { background: var(--bottom-bg) !important; backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; border-top: 1px solid var(--glass-border) !important; } :root[data-theme="glass"] #bottom-nav button { color: var(--muted) !important; transition: all 200ms ease !important; } :root[data-theme="glass"] #bottom-nav button i { color: var(--muted) !important; } :root[data-theme="glass"] #bottom-nav button:hover { background: var(--surface) !important; color: var(--text) !important; } :root[data-theme="glass"] #bottom-nav button:hover i { color: var(--accent-hot) !important; } :root[data-theme="glass"] #bottom-nav button.active { background: var(--accent-gradient-soft) !important; background-image: var(--accent-gradient-soft) !important; color: #ffffff !important; border-color: transparent !important; box-shadow: var(--glow-soft) !important; } :root[data-theme="glass"] #bottom-nav button.active i { color: #ffffff !important; } /* ------------------------------------------------------------------------- 13) BADGE NIEPRZECZYTANYCH + INNE MIKROELEMENTY ------------------------------------------------------------------------- */ :root[data-theme="glass"] .unread-badge { background: var(--accent-gradient) !important; background-image: var(--accent-gradient) !important; box-shadow: 0 0 0 2px var(--bg-deep), var(--glow-soft) !important; } :root[data-theme="glass"] .breath-pattern-badge { box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.28), inset 0 -8px 18px rgba(0, 0, 0, 0.18), 0 8px 20px var(--accent-halo); } /* Panel użytkowników online */ :root[data-theme="glass"] #online-users-panel { background: var(--surface-2) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: 1px solid var(--glass-border-strong) !important; border-radius: 20px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30) !important; } /* Toasty */ :root[data-theme="glass"] .toast-message { background: var(--surface-2) !important; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--glass-border-strong) !important; border-left: 3px solid var(--accent) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.30) !important; } :root[data-theme="glass"] .toast-title { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 700; } /* Modal onboarding */ :root[data-theme="glass"] #onboarding-modal { background: rgba(6, 7, 16, 0.78) !important; backdrop-filter: blur(8px); } @media (prefers-color-scheme: light) { :root[data-theme="glass"] #onboarding-modal { background: rgba(255, 248, 240, 0.85) !important; } } :root[data-theme="glass"] .onboarding-card { background: var(--surface-2) !important; backdrop-filter: blur(36px) saturate(180%) !important; border: 1px solid var(--glass-border-strong) !important; border-radius: 24px !important; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.40) !important; } :root[data-theme="glass"] .onboarding-title { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 700 !important; } :root[data-theme="glass"] .onboarding-cta { background: var(--accent-gradient) !important; background-image: var(--accent-gradient) !important; color: #ffffff !important; border-radius: var(--radius-sm) !important; box-shadow: var(--glow-medium) !important; transition: all 220ms cubic-bezier(0.34, 1.56, 0.64, 1) !important; } :root[data-theme="glass"] .onboarding-cta:hover { transform: translateY(-2px); box-shadow: var(--glow-strong), var(--glow-medium) !important; } /* Low-H modal */ :root[data-theme="glass"] .low-h-modal { background: rgba(6, 7, 16, 0.72) !important; backdrop-filter: blur(8px); } :root[data-theme="glass"] .low-h-modal-card { background: var(--surface-2) !important; backdrop-filter: blur(28px) saturate(170%); border: 1px solid var(--glass-border-strong) !important; border-radius: 20px !important; } :root[data-theme="glass"] #low-h-confirm { background: var(--accent-gradient) !important; background-image: var(--accent-gradient) !important; color: #ffffff !important; } /* Selection */ :root[data-theme="glass"] ::selection { background: var(--accent); color: #ffffff; } /* Scrollbar */ :root[data-theme="glass"] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme="glass"] ::-webkit-scrollbar-track { background: transparent; } :root[data-theme="glass"] ::-webkit-scrollbar-thumb { background: var(--glass-border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } :root[data-theme="glass"] ::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; border: 2px solid transparent; } /* ------------------------------------------------------------------------- 14) ROZWIĄZANIA RESPONSYWNE i drobne dopieszczenia ------------------------------------------------------------------------- */ :root[data-theme="glass"] .chat-load-more { background: var(--surface) !important; backdrop-filter: blur(12px); border: 1px solid var(--glass-border) !important; color: var(--text-soft) !important; } :root[data-theme="glass"] .chat-load-more:hover { border-color: var(--accent-soft) !important; color: var(--accent-hot) !important; } /* Smooth focus rings everywhere */ :root[data-theme="glass"] *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; } /* Ikonki w nagłówku modułu — gradient */ :root[data-theme="glass"] .module-content h2 i { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* Linki */ :root[data-theme="glass"] a { color: var(--accent-hot); transition: color 160ms ease; } :root[data-theme="glass"] a:hover { color: var(--accent-soft); } /* Force light text on Tailwind utility classes that may be inlined */ :root[data-theme="glass"] .text-gray-800, :root[data-theme="glass"] .text-gray-700 { color: var(--text) !important; } :root[data-theme="glass"] .text-gray-600, :root[data-theme="glass"] .text-gray-500, :root[data-theme="glass"] .text-gray-400 { color: var(--muted) !important; }