:root { --bg-color: #090A0F; --panel-bg: rgba(20, 22, 30, 0.6); --panel-border: rgba(255, 255, 255, 0.08); --panel-border-highlight: rgba(255, 255, 255, 0.15); /* Główny akcent kolorystyczny: Czysta Pastelowa Mięta Dropsite */ --accent-mint: #C4E7D4; --accent-mint-light: #E2F5EC; --accent-mint-dark: #A8DABF; --accent-blue: #C4E7D4; --accent-blue-hover: #A8DABF; --accent-glow: rgba(196, 231, 212, 0.35); --success-green: #59A829; --success-green-hover: #6bb033; --success-glow: rgba(89, 168, 41, 0.3); --text-main: #FFFFFF; --text-muted: #8A8F98; --radius-lg: 24px; --radius-md: 14px; --radius-sm: 8px; --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* --- Glassmorphism Design Tokens --- */ --surface-glass-card: rgba(20, 22, 30, 0.72); --surface-glass-card-hover: rgba(24, 27, 38, 0.82); --surface-recessed: rgba(0, 0, 0, 0.25); /* Dynamiczne, żywe cienie szklane */ --shadow-volumetric-card: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 45px rgba(196, 231, 212, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1); --shadow-volumetric-card-hover: 0 30px 75px rgba(0, 0, 0, 0.55), 0 0 60px rgba(196, 231, 212, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15); --shadow-sunken-stage: inset 0 2px 10px rgba(0, 0, 0, 0.4); --shadow-btn-tactile: 0 4px 14px rgba(0, 0, 0, 0.4), 0 10px 28px -4px rgba(196, 231, 212, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.25); --shadow-btn-tactile-hover: 0 6px 20px rgba(0, 0, 0, 0.45), 0 14px 36px -2px rgba(196, 231, 212, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45); } html { scroll-behavior: auto; overflow-x: hidden; width: 100%; max-width: 100vw; -webkit-text-size-adjust: 100%; } @media (min-width: 769px) and (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } *, *::before, *::after { box-sizing: border-box; } /* --- Global Reset for hidden attribute --- */ [hidden] { display: none !important; } /* --- Kursory: łapka dla wszystkich klikalnych elementów i ich dzieci --- */ button, a, label[for], label:has(input), [role="button"], .dropzone, .format-chip, .scope-btn, .btn-select, .mod-close, .bug-report-pin { cursor: pointer; } button *, a *, label[for] *, label:has(input) *, [role="button"] *, .dropzone *, .format-chip *, .scope-btn *, .btn-select *, .mod-close *, .bug-report-pin * { cursor: inherit; } /* --- Baza i Żywe Tło --- */ body { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #0B0F19; /* Bogate, przestrzenne, energetyczne tło pełne życia i pozytywnego blasku */ background-image: radial-gradient(ellipse 90% 55% at 50% -5%, rgba(56, 189, 248, 0.18) 0%, transparent 65%), radial-gradient(circle at 12% 35%, rgba(52, 211, 153, 0.16) 0%, transparent 45%), radial-gradient(circle at 88% 30%, rgba(129, 140, 248, 0.15) 0%, transparent 45%), radial-gradient(circle at 50% 85%, rgba(56, 189, 248, 0.1) 0%, transparent 55%), radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient(rgba(52, 211, 153, 0.08) 2px, transparent 2px); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 30px 30px, 80px 80px; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; background-attachment: fixed; color: var(--text-main); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 0; box-sizing: border-box; position: relative; width: 100%; max-width: 100vw; overflow-x: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } @media (max-width: 1200px), (max-height: 820px) { body { justify-content: flex-start; padding: 0; } } h1, h2, h3, .nav-logo, button, input, select, textarea { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; } /* --- Aurora Background (Czyste, ultra-płynne tło bez obciążenia GPU - 100% GPU VRAM Cache) --- */ body::before, body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; transform: translateZ(0); } body::before { background: radial-gradient(circle at 35% 30%, rgba(52, 211, 153, 0.12), transparent 55%); } body::after { background: radial-gradient(circle at 65% 45%, rgba(56, 189, 248, 0.13), transparent 55%); } /* Przywracamy zaznaczanie tekstu tylko w polach do wpisywania */ input, textarea, [contenteditable="true"], .selectable-text { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } /* --- Globalne Animacje (Powiadomienia) --- */ @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } @keyframes slideOutDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(30px); opacity: 0; } } /* ============================================================ KURSORY NIESTANDARDOWE ============================================================ */ /* 1. Domyślny kursor na poziomie html i body (brak spadków klatek myszy) */ html, body { cursor: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNiIgd2lkdGg9IjEuNjg0MjEiIGhlaWdodD0iMjguNjMxNiIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNy42ODQyIiB5PSIyNi45NDczIiB3aWR0aD0iMS42ODQyMSIgaGVpZ2h0PSIxLjY4NDIxIiBmaWxsPSJibGFjayIvPgo8cmVjdCB4PSI5LjM2ODQxIiB5PSIyNS4yNjMyIiB3aWR0aD0iMS42ODQyMSIgaGVpZ2h0PSIxLjY4NDIxIiBmaWxsPSJibGFjayIvPgo8cmVjdCB4PSIxMS4wNTI2IiB5PSIyMy41Nzg5IiB3aWR0aD0iMS42ODQyMSIgaGVpZ2h0PSIxLjY4NDIxIiBmaWxsPSJibGFjayIvPgo8cmVjdCB4PSIxMi43MzY4IiB5PSIyMS44OTQ4IiB3aWR0aD0iMS42ODQyMSIgaGVpZ2h0PSIxLjY4NDIxIiBmaWxsPSJibGFjayIvPgo8cmVjdCB4PSIxNC40MjEiIHk9IjIzLjU3ODkiIHdpZHRoPSIxLjY4NDIxIiBoZWlnaHQ9IjMuMzY4NDIiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjE2LjEwNTIiIHk9IjI2Ljk0NzMiIHdpZHRoPSIxLjY4NDIxIiBoZWlnaHQ9IjMuMzY4NDIiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjIxLjE1NzgiIHk9IjI2Ljk0NzMiIHdpZHRoPSIxLjY4NDIxIiBoZWlnaHQ9IjMuMzY4NDIiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjE5LjQ3MzYiIHk9IjIzLjU3ODkiIHdpZHRoPSIxLjY4NDIxIiBoZWlnaHQ9IjMuMzY4NDIiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjE3Ljc4OTQiIHk9IjIwLjIxMDQiIHdpZHRoPSIxLjY4NDIxIiBoZWlnaHQ9IjMuMzY4NDIiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjE5LjQ3MzYiIHk9IjIwLjIxMDQiIHdpZHRoPSI2LjczNjg0IiBoZWlnaHQ9IjEuNjg0MjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjI0LjUyNjQiIHk9IjE4LjUyNjQiIHdpZHRoPSIxLjY4NDIxIiBoZWlnaHQ9IjEuNjg0MjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjEyLjczNjgiIHk9IjYuNzM2ODIiIHdpZHRoPSIxLjY4NDIxIiBoZWlnaHQ9IjEuNjg0MjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjExLjA1MjYiIHk9IjUuMDUyNzMiIHdpZHRoPSIxLjY4NDIxIiBoZWlnaHQ9IjEuNjg0MjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjkuMzY4NDEiIHk9IjMuMzY4NDEiIHdpZHRoPSIxLjY4NDIxIiBoZWlnaHQ9IjEuNjg0MjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjcuNjg0MiIgeT0iMS42ODQzMyIgd2lkdGg9IjEuNjg0MjEiIGhlaWdodD0iMS42ODQyMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMTQuNDIxIiB5PSI4LjQyMTE0IiB3aWR0aD0iMS42ODQyMSIgaGVpZ2h0PSIxLjY4NDIxIiBmaWxsPSJibGFjayIvPgo8cmVjdCB4PSIxNi4xMDUyIiB5PSIxMC4xMDUyIiB3aWR0aD0iMS42ODQyMSIgaGVpZ2h0PSIxLjY4NDIxIiBmaWxsPSJibGFjayIvPgo8cmVjdCB4PSIxNy43ODk0IiB5PSIxMS43ODk2IiB3aWR0aD0iMS42ODQyMSIgaGVpZ2h0PSIxLjY4NDIxIiBmaWxsPSJibGFjayIvPgo8cmVjdCB4PSIxOS40NzM2IiB5PSIxMy40NzM2IiB3aWR0aD0iMS42ODQyMSIgaGVpZ2h0PSIxLjY4NDIxIiBmaWxsPSJibGFjayIvPgo8cmVjdCB4PSIyMS4xNTc4IiB5PSIxNS4xNTgiIHdpZHRoPSIxLjY4NDIxIiBoZWlnaHQ9IjEuNjg0MjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjIyLjg0MjIiIHk9IjE2Ljg0MiIgd2lkdGg9IjEuNjg0MjEiIGhlaWdodD0iMS42ODQyMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMTcuNzg5NCIgeT0iMzAuMzE1NyIgd2lkdGg9IjMuMzY4NDIiIGhlaWdodD0iMS42ODQyMSIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTcuNjg0MiAyNi45NDc0VjMuMzY4NDFIOS4zNjg0MVY1LjA1MjYySDExLjA1MjZWNi43MzY4M0gxMi43MzY4VjguNDIxMDRIMTQuNDIxVjEwLjEwNTNIMTYuMTA1M1YxMS43ODk1SDE3Ljc4OTVWMTMuNDczN0gxOS40NzM3VjE1LjE1NzlIMjEuMTU3OVYxNi44NDIxSDIyLjg0MjFWMTguNTI2M0gyNC41MjYzVjIwLjIxMDVIMTcuNzg5NVYyMy41Nzg5SDE5LjQ3MzdWMjYuOTQ3NEgyMS4xNTc5VjMwLjMxNThIMTcuNzg5NVYyNi45NDc0SDE2LjEwNTNWMjMuNTc4OUgxNC40MjFWMjEuODk0N0gxMi43MzY4VjIzLjU3ODlIMTEuMDUyNlYyNS4yNjMxSDkuMzY4NDFWMjYuOTQ3NEg3LjY4NDJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K") 6 0, default !important; } /* 2. Kursor pointer dla elementów klikalnych */ a, button, select, input[type="button"], input[type="submit"], input[type="reset"], .btn-primary, .btn-secondary, .btn-outline-another, .clickable-link, .option-item, .custom-switch, .custom-switch-label, .theme-dot, .nav-button, .btn-option, .btn-glow, .crumb, .restream-name-clickable, .row-icon, .icon-btn, .delete-btn, .modal-close, .mod-close, .btn-attached-preview, .btn-attached-remove, .btn-unboxing-rec, .btn-unboxing-stop, .btn-apply-settings, .unboxing-avatar-card, .unboxing-avatar-bubble, .btn-close-unboxing-player, .unboxing-audio-play-btn, .btn-voice-speed, #loginTrigger, [data-cursor='pointer'] { cursor: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNzU3NjQgMjYuMTgxOVYzMC4wNjA3SDI0LjI3MjhWMjguMTIxM0gyNi4yMTIyVjI2LjE4MTlIMjguMTUxNlYxNS41MTUySDI2LjIxMjJWMTMuNTc1OEgyNC4yNzI4VjExLjYzNjRIMTQuNTc1OFYxLjkzOTQ1SDguNzU3NjRWMTMuNTc1OEgyLjkzOTQ1VjIyLjMwMzFINC44Nzg4NVYyNC4yNDI1SDYuODE4MjRWMjYuMTgxOUg4Ljc1NzY0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTE0LjU3NTggMTEuNTc1OEgxNi41MTUyVjE4LjM2MzZIMTQuNTc1OFYxMS41NzU4WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTIyLjMzMzMgMTEuNTc1OEgyMC4zOTM5VjE4LjM2MzZIMjIuMzMzM1YxMS41NzU4WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC41NzU4IDBIOC43NTc1OFYxLjkzOTM5SDYuODE4MThWMTEuNjM2NEgyLjkzOTM5VjEzLjU3NThIMVYyMi4zMDNIMi45MzkzOVYyNC4yNDI0SDQuODc4NzlWMjYuMTgxOEg2LjgxODE4VjMwLjA2MDZIOC43NTc1OFYzMkgyNC4yNzI3VjMwLjA2MDZIMjYuMjEyMVYyOC4xMjEySDI4LjE1MTVWMjYuMTgxOEgzMC4wOTA5VjE1LjUxNTJIMjguMTUxNVYxMy41NzU4SDI2LjIxMjFWMTEuNjM2NEgyNC4yNzI3VjkuNjk2OTdIMTYuNTE1MlYxLjkzOTM5TDE0LjU3NTggMS45MzkzOVYwWk0xNC41NzU4IDEuOTM5MzlWMTEuNjM2NEgyNC4yNzI3VjEzLjU3NThIMjYuMjEyMVYxNS41MTUySDI4LjE1MTVWMjYuMTgxOEgyNi4yMTIxVjI4LjEyMTJIMjQuMjcyN1YzMC4wNjA2SDguNzU3NThWMjYuMTgxOEg2LjgxODE4VjI0LjI0MjRINC44Nzg3OVYyMi4zMDNIMi45MzkzOVYxMy41NzU4SDYuODE4MThWMTguNDI0Mkg4Ljc1NzU4VjEuOTM5MzlIMTQuNTc1OFoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=") 8 0, pointer !important; } /* Zabezpieczenie przed migotaniem kursora nad ikonami SVG i tekstem wewnątrz przycisków */ button *, .btn-primary *, .btn-secondary *, .btn-outline-another *, .btn-unboxing-trigger *, .btn-attached-preview *, .btn-attached-remove *, .btn-unboxing-rec *, .btn-unboxing-stop *, .btn-apply-settings *, .unboxing-audio-play-btn *, .btn-voice-speed * { pointer-events: none; } /* 3. Kursor tekstowy dla pól input */ input, textarea, [data-cursor='text'] { cursor: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNy41IiB5PSIxLjUiIHdpZHRoPSI3IiBoZWlnaHQ9IjMiIGZpbGw9IndoaXRlIiBzdHJva2U9ImJsYWNrIi8+CjxyZWN0IHg9IjE3LjUiIHk9IjEuNSIgd2lkdGg9IjciIGhlaWdodD0iMyIgZmlsbD0id2hpdGUiIHN0cm9rZT0iYmxhY2siLz4KPHJlY3QgeD0iNy41IiB5PSIyNy41IiB3aWR0aD0iNyIgaGVpZ2h0PSIzIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIvPgo8cmVjdCB4PSIxNy41IiB5PSIyNy41IiB3aWR0aD0iNyIgaGVpZ2h0PSIzIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIvPgo8cmVjdCB4PSIxNC41IiB5PSI0LjUiIHdpZHRoPSIzIiBoZWlnaHQ9IjIzIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIvPgo8L3N2Zz4K") 16 16, text !important; } /* ========================================================================== MOBILE & TOUCH ACCELERATION (0ms Tap Delay, GPU Energy Saving) ========================================================================== */ button, a, input, select, textarea, [role="button"], .role-pill-btn, .piano-key-btn, .nav-btn, .bento-terminal-block, .subtool-card { touch-action: manipulation; } @media (max-width: 768px) { /* Oszczędność baterii i GPU na telefonach */ body::after { animation: none; opacity: 0.6; } .bento-card-glow, .snake-story-panel::before, .dead-drop-glow { filter: blur(28px) !important; opacity: 0.65 !important; } /* Płynne przewijanie dotykowe na iOS i Android */ .dead-drop-body, .mod-container, .dl-unified-container, .toolbox-container, .admin-nav-tabs, .bento-deck-grid { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } }