:root { --bg-dark: #0a0a0c; --bg-card: #14141c; --bg-tile: #1a1a22; --accent: #e100ff; --text-p: #ffffff; --text-s: #888888; --border: rgba(255,255,255,0.1); --grad: radial-gradient(at 0% 0%, #1c1c24 0%, var(--bg-dark) 60%); }
* { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; font-family: 'Inter', sans-serif; }
html { background: var(--bg-dark); scroll-behavior: smooth; }
body { background: var(--grad); background-attachment: fixed; color: var(--text-p); margin: 0; overflow-x: hidden; min-height: 100vh; line-height: 1.5; -webkit-overflow-scrolling: touch; }
img { -webkit-user-drag: none; user-select: none; -moz-user-select: none; -webkit-touch-callout: none; pointer-events: none; color: transparent; text-indent: -10000px; }
.container { padding: 15px; width: 100%; max-width: 600px; margin: 0 auto; position: relative; z-index: 10; }
#backToTop { position: fixed; bottom: 30px; right: 20px; background: var(--accent); color: #fff; width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; z-index: 9999; box-shadow: 0 0 20px var(--accent), inset 0 0 10px rgba(255,255,255,0.3); opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; backdrop-filter: blur(5px); }
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); animation: pulseBtn 2s infinite; }
#backToTop:hover { transform: scale(1.1); background: #fff; color: var(--accent); }
#backToTop svg { width: 24px; height: 24px; fill: currentColor; }
@keyframes pulseBtn { 0% { box-shadow: 0 0 0 0 rgba(225,0,255,0.7); } 70% { box-shadow: 0 0 0 15px rgba(225,0,255,0); } 100% { box-shadow: 0 0 0 0 rgba(225,0,255,0); } }