:root {
    --rbx-bg: #f2f4f5;
    --rbx-nav: #ffffff;
    --rbx-text-main: #191b1d;
    --rbx-text-secondary: #666e75;
    --rbx-blue: #0066ff;
    --rbx-blue-hover: #004ecc;
    --rbx-border: #bdbebe;
    --rbx-green: #00b06f;
    --sidebar-w: 200px;
    --shadow-soft: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-med: 0 10px 30px rgba(0,0,0,0.1);
}

@font-face { font-family: 'Gotham'; src: url('https://images.rbxcdn.com/f0c43666f2a8740f90e96417726715f1.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'Gotham Bold'; src: url('https://images.rbxcdn.com/6c2057d45c5896791223594367ef84f6.woff2') format('woff2'); font-weight: 700; }

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Gotham", sans-serif; -webkit-font-smoothing: antialiased; }
body { background-color: var(--rbx-bg); color: var(--rbx-text-main); overflow-x: hidden; }

/* Premium Header */
.rbx-header {
    background-color: var(--rbx-nav); height: 44px; display: flex; align-items: center; position: fixed; top: 0; width: 100%; z-index: 1001;
    border-bottom: 1px solid var(--rbx-border); box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.header-inner { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; }

.header-l { display: flex; align-items: center; gap: 15px; }
.logo-img { height: 32px; cursor: pointer; transition: 0.2s; }
.logo-img:hover { opacity: 0.8; }
.nav-links { display: flex; gap: 20px; font-size: 15px; font-weight: 500; }
.nav-item { cursor: pointer; text-decoration: none; color: inherit; padding: 10px 0; border-bottom: 3px solid transparent; transition: 0.2s; }
.nav-item:hover { color: var(--rbx-blue); }
.nav-item.active { font-weight: 700; border-bottom-color: var(--rbx-blue); }

.header-c { flex: 1; max-width: 500px; margin: 0 30px; }
.search-bar { background: #fff; border: 1px solid var(--rbx-border); border-radius: 4px; height: 32px; display: flex; align-items: center; padding: 0 12px; gap: 8px; }
.search-bar input { width: 100%; border: none; outline: none; font-size: 14px; }

.header-r { display: flex; align-items: center; gap: 18px; }

/* Official Header Elements */
.robux-header-official {
    display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; cursor: pointer;
    padding: 4px 10px; transition: 0.2s;
}
.robux-header-official:hover { background: rgba(0,0,0,0.05); border-radius: 4px; }
.robux-ico-small { width: 18px; height: 18px; }

.header-icons { display: flex; align-items: center; gap: 4px; color: #393b3d; }
.icon-item { 
    font-size: 19px; cursor: pointer; position: relative; width: 32px; height: 32px; 
    display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.icon-item:hover { background: rgba(0,0,0,0.05); border-radius: 4px; }

.red-dot { 
    background: #f00; color: #fff; font-size: 10px; font-weight: 800; width: 18px; height: 18px; 
    border-radius: 50%; position: absolute; top: -3px; right: -3px; 
    display: flex; align-items: center; justify-content: center; 
    border: 2px solid var(--rbx-nav); flex-shrink: 0;
}

.user-profile-header { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.nav-pfp { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #e3e5e7; }
.header-icons { display: flex; align-items: center; gap: 14px; color: #393b3d; }
.icon-item { font-size: 18px; cursor: pointer; position: relative; }
.red-dot { background: #f00; width: 6px; height: 6px; border-radius: 50%; position: absolute; top: 0; right: 0; }

/* Sidebar Upgrade */
.sidebar {
    width: var(--sidebar-w); height: calc(100vh - 44px); position: fixed; top: 44px; left: 0; background: #fff;
    padding-top: 10px; border-right: 1px solid var(--rbx-border); z-index: 1000;
}
.sidebar-user { display: flex; align-items: center; padding: 12px 20px; gap: 12px; cursor: pointer; border-bottom: 1px solid #f0f1f2; margin-bottom: 5px; }
.sidebar-user span { font-weight: 700; font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.side-item { display: flex; align-items: center; padding: 9px 20px; gap: 14px; font-size: 14px; color: #393b3d; text-decoration: none; cursor: pointer; transition: 0.15s; font-weight: 500; }
.side-item:hover { background: #f2f4f5; }
.side-item.active { background: #eff0f1; border-radius: 0 20px 20px 0; margin-right: 10px; font-weight: 700; }
.side-item i { width: 20px; text-align: center; font-size: 18px; color: #393b3d; }

.side-btn { width: calc(100% - 30px); margin: 15px; font-size: 13px !important; padding: 10px !important; box-shadow: 0 4px 10px rgba(0,102,255,0.1); }

/* Main Content Area */
.main-content { 
    margin-left: var(--sidebar-w); 
    margin-top: 44px; 
    padding: 30px 40px; 
    min-height: calc(100vh - 44px); 
    background: #fff; 
}
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 25px; color: #393b3d; }

/* ULTRA-CONVINCING HERO SECTION */
.hero-banner {
    background: linear-gradient(135deg, #222 0%, #333 100%), 
                url('https://images.rbxcdn.com/f0a587d4b2e3a47ff0a5978a53e6b78e.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.hero-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.65);
    z-index: 1;
}
.hero-content { position: relative; z-index: 2; max-width: 650px; }

.event-badge {
    background: linear-gradient(90deg, #ffaa00, #ff6a00);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    animation: goldPulseLarge 2s infinite alternate;
}
@keyframes goldPulseLarge {
    from { transform: scale(1); box-shadow: 0 0 5px rgba(255, 170, 0, 0.4); }
    to { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 170, 0, 0.6); }
}
.live-status {
    display: flex; align-items: center; gap: 8px; color: #43ff9d; font-weight: 700; font-size: 13px; margin-bottom: 15px; text-transform: uppercase;
}
.status-dot { width: 8px; height: 8px; background: #43ff9d; border-radius: 50%; box-shadow: 0 0 10px #43ff9d; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

.hero-content h2 { font-size: 38px; color: white; margin-bottom: 12px; font-weight: 800; letter-spacing: -1px; }
.hero-content p { color: #dfdfdf; font-size: 17px; line-height: 1.5; margin-bottom: 25px; }

.hero-actions { display: flex; gap: 24px; align-items: center; }
.hero-btn {
    background: var(--rbx-blue); color: white; padding: 16px 36px; border-radius: 8px; font-size: 18px; font-weight: 800; border: none; cursor: pointer;
    box-shadow: 0 8px 25px rgba(0,102,255,0.3); transition: 0.2s; display: flex; align-items: center; gap: 10px;
}
.hero-btn:hover { background: var(--rbx-blue-hover); transform: translateY(-2px); }
.hero-trust { display: flex; flex-direction: column; gap: 4px; color: #aaa; font-size: 11px; }

.section-label { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: #111; }

.package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-bottom: 50px; }
.pack-card { background: #fff; border-radius: 12px; padding: 20px; border: 1px solid #efefef; cursor: pointer; transition: 0.3s; position: relative; box-shadow: var(--shadow-soft); text-align: center; }
.pack-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-med); border-color: var(--rbx-blue); }
.pack-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--rbx-green); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 20px; z-index: 5; }
.pack-img-wrap { width: 100%; height: 120px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; }
.pack-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pack-name { display: block; font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.pack-status { font-size: 11px; color: var(--rbx-green); font-weight: 700; text-transform: uppercase; }

/* Modal Verification */
.v-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 3000; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.v-modal { background: #fff; border-radius: 16px; width: 460px; padding: 45px; text-align: center; box-shadow: var(--shadow-med); position: relative; }

.modal-t { font-size: 24px; font-weight: 700; margin-bottom: 12px; color: #111; letter-spacing: -0.5px; }
.modal-p { font-size: 15px; color: #666; margin-bottom: 30px; line-height: 1.5; }

.premium-input-box { 
    width: 100%; padding: 14px 18px; border: 1.5px solid #bdbebe; border-radius: 8px; 
    font-size: 16px; margin-bottom: 25px; outline: none; transition: 0.2s;
    background: #fdfdfd; font-family: inherit; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.premium-input-box:focus { border-color: var(--rbx-blue); box-shadow: 0 0 0 4px rgba(0,102,255,0.1); background: #fff; }

.modal-btn { 
    width: 100%; padding: 15px; background: var(--rbx-blue); color: #fff; border: none; 
    border-radius: 8px; font-size: 17px; font-weight: 800; cursor: pointer; transition: 0.2s;
    box-shadow: 0 4px 15px rgba(0,102,255,0.2); font-family: inherit;
}
.modal-btn:hover { background: var(--rbx-blue-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,102,255,0.3); }

.premium-spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid var(--rbx-blue); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; }
@keyframes spin { 100% { transform: rotate(360deg); } }

.verification-card { background: #f8f9fa; border: 1px solid #ddd; padding: 20px; border-radius: 12px; display: flex; align-items: center; gap: 15px; font-size: 13px; font-weight: 700; color: #444; }
.verification-card i { font-size: 24px; color: var(--rbx-blue); }

.profile-un { font-weight: 700; font-size: 18px; }

/* Profile Synchronization */
.profile-sync-box { display: none; flex-direction: column; align-items: center; margin-bottom: 25px; }
.profile-circle { width: 110px; height: 110px; border-radius: 50%; border: 4px solid var(--rbx-green); margin-bottom: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,176,111,0.1); }
.profile-circle img { width: 100%; height: 100%; object-fit: cover; }

/* Game Carousel & Discovery */
.game-carousel { 
    display: flex; 
    gap: 20px; 
    overflow-x: auto; 
    padding-bottom: 20px; 
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}
.game-carousel::-webkit-scrollbar { height: 6px; }
.game-carousel::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

.carousel-item { min-width: 320px; cursor: pointer; transition: 0.2s; }
.carousel-item:hover { transform: translateY(-2px); }

.thumb-wrap { 
    width: 100%; 
    aspect-ratio: 16/9; 
    background: #efefef; 
    border-radius: 8px; 
    overflow: hidden; 
    margin-bottom: 12px;
    border: 1px solid rgba(0,0,0,0.05);
}
.thumb-img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.carousel-item:hover .thumb-img { transform: scale(1.05); }

.game-t { display: block; font-weight: 700; font-size: 16px; margin-bottom: 6px; color: #393b3d; }
.game-m { font-size: 13px; color: #666e75; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.game-m i { font-size: 11px; }

@media (max-width: 900px) {
    .sidebar { display: none; }
    .main-content { margin-left: 0; padding: 20px 15px; }
    .header-c { display: none; }
    .nav-links { display: none; }
}

@media (max-width: 600px) {
    .header-r { gap: 8px; }
    #nav-username { display: none; }
    .robux-header-official { padding: 4px 5px; gap: 4px; font-size: 14px; }
    .logo-img { height: 26px; }
    
    .hero-banner { padding: 20px 15px; margin-bottom: 25px; }
    .hero-content h2 { font-size: 26px; line-height: 1.2; margin-bottom: 15px; }
    .hero-content p { font-size: 14px; line-height: 1.4; }
    .hero-btn { width: 100%; justify-content: center; padding: 14px; font-size: 16px; margin-top: 10px; }
    .hero-actions { flex-direction: column; align-items: flex-start; gap: 15px; }

    .package-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .pack-card { padding: 12px 8px; }
    .pack-img-wrap { height: 60px; }
    .pack-name { font-size: 13px; font-weight: 800; }
    .pack-status { font-size: 8px; }
    .pack-tag { font-size: 8px; padding: 2px 6px; top: -6px; }

    .v-modal { width: 95%; padding: 30px 15px; }
    .modal-t { font-size: 19px; }
    .modal-p { font-size: 13px; }
    .modal-btn { font-size: 15px; padding: 14px; }
}