:root {
    --primary: #00ff88;
    --bg: #050505;
    --card-bg: #111;
    --discord: #5865F2;
    --youtube: #FF0000;
}

body {
    background-color: var(--bg);
    color: white;
    font-family: 'Inter', sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.container { width: 90%; max-width: 420px; padding: 40px 0; text-align: center; }

/* Avatar & Logo */
.avatar-container { position: relative; width: 90px; height: 90px; margin: 0 auto 20px; }
.avatar-img { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--primary); object-fit: cover; }
.avatar-ring { position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 2px solid var(--primary); border-radius: 50%; opacity: 0.3; animation: pulse 2s infinite; }

@keyframes pulse { 0% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.1); opacity: 0.1; } 100% { transform: scale(1); opacity: 0.3; } }

.brand-name { font-family: 'Orbitron'; font-size: 26px; letter-spacing: 4px; margin: 10px 0; }
.brand-name span { color: var(--primary); text-shadow: 0 0 10px var(--primary); }

/* Colored Social Buttons */
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0; }
.social-btn { padding: 14px; background: var(--card-bg); border: 1px solid #222; border-radius: 12px; color: white; text-decoration: none; font-size: 14px; font-weight: 600; transition: 0.3s; }

.discord:hover { background: var(--discord); border-color: white; box-shadow: 0 0 15px var(--discord); }
.youtube:hover { background: var(--youtube); border-color: white; box-shadow: 0 0 15px var(--youtube); }

/* Script & Video Section */
.script-box, .video-section { background: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 15px; padding: 20px; text-align: left; margin-bottom: 20px; }
.box-label { font-size: 11px; color: #555; font-weight: bold; margin-bottom: 12px; }
code { display: block; background: #000; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 13px; color: var(--primary); word-break: break-all; margin-bottom: 10px; }
.copy-button { width: 100%; background: var(--primary); color: black; border: none; padding: 12px; border-radius: 8px; font-family: 'Orbitron'; font-weight: bold; cursor: pointer; }

/* Video Player */
.video-container { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Loader */
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; transition: 0.5s; }
.loader-img { width: 80px; height: 80px; border-radius: 50%; animation: bounce 1.5s infinite; }
@keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.loading-text { font-family: 'Orbitron'; font-size: 10px; color: var(--primary); margin-top: 15px; letter-spacing: 2px; }

.status-online { color: var(--primary); }