/* HellNah Webstore - consolidated stylesheet
   Generated from the original local stylesheets and inline page styles.
   Page-specific rules use @scope to prevent cross-page selector collisions. */

/* ===== Source: admin/style.css ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
body {
    background-color: #f4f7f6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* --- HN SIDEBAR --- */
.hn-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 78px;
    background: #003049;
    padding: 6px 14px;
    transition: all 0.4s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}
.hn-sidebar.active {
    width: 240px;
}

/* Posisi Ikon Hamburger & Logo */
.hn-sidebar .hn-logo_content {
    display: flex;
    align-items: center;
    height: 60px;
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}
.hn-sidebar #hn-btn {
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    height: 50px;
    min-width: 50px;
    line-height: 50px;
    text-align: center;
    display: block;
    z-index: 1100;
}
.hn-sidebar .logo_name {
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    padding-left: 10px;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    white-space: nowrap;
}
.hn-sidebar.active .logo_name {
    opacity: 1;
}

/* List Menu Navigasi */
.hn-sidebar .nav-list {
    margin-top: 10px;
    padding: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    margin-bottom: 60px; /* Jarak untuk footer logout */
    -ms-overflow-style: none;  /* IE dan Edge */
    scrollbar-width: none;  /* Firefox */
}
/* Scrollbar khusus menu sidebar */
/* Sembunyikan scrollbar untuk Chrome, Safari, dan Opera */
.hn-sidebar .nav-list::-webkit-scrollbar {
    display: none;
}
.hn-sidebar .nav-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}

/* Kategori Header Menu */
.hn-sidebar .menu-category {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8da4b4;
    letter-spacing: 0.08rem;
    padding: 12px 0 4px 12px;
    height: auto !important;
    line-height: normal !important;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    white-space: nowrap;
}
.hn-sidebar.active .menu-category {
    opacity: 1;
    pointer-events: auto;
}

/* Item Menu */
.hn-sidebar ul li:not(.menu-category) {
    position: relative;
    height: 46px;
    width: 100%;
    list-style: none;
    margin-bottom: 6px;
}
.hn-sidebar ul li a {
    color: #d1d8e0;
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.25s ease;
    height: 100%;
}
.hn-sidebar ul li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.hn-sidebar ul li.active a {
    background: #3498db !important; 
    color: #ffffff;
}
.hn-sidebar ul li i {
    height: 46px;
    min-width: 50px;
    line-height: 46px;
    text-align: center;
    display: block;
    font-size: 20px;
}

.hn-sidebar .hn-links_name {
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    margin-left: 5px;
    white-space: nowrap;
    font-size: 0.9rem;
}
.hn-sidebar.active .hn-links_name {
    opacity: 1;
    pointer-events: auto;
}

/* --- FOOTER LOGOUT --- */
.hn-profile_content {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    background: #002336;
    padding: 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hn-profile_content a {
    display: flex;
    align-items: center;
    color: #ff6b6b;
    text-decoration: none;
    padding: 6px 0;
    border-radius: 8px;
    transition: 0.3s;
}
.hn-profile_content a:hover {
    background: rgba(235, 77, 75, 0.15);
}

/* --- CONTENT AREA --- */
.home_content {
    margin-left: 240px;
    transition: all 0.4s ease;
    padding: 20px;
    background: #f4f7f6;
    min-height: 100vh;
}

.hn-sidebar:not(.active) ~ .home_content {
    margin-left: 78px;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .hn-sidebar {
        display: none !important;
    }
    .home_content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 15px;
    }
}

/* ===== Source: dist/css/hellnah.css ===== */
/* ==========================================================================
   1. GLOBAL VARIABLES & BASE STYLES
   ========================================================================== */
:root {
    /* Color Palette */
    --bg-dark: #0b0f17;
    --surface-dark: #141a23;
    --surface-card: rgba(20, 26, 35, 0.7);
    --border-color: rgba(255, 255, 255, 0.08);
    
    /* Accent Colors */
    --accent-red: #e63946;
    --accent-gold: #ffb703;
    --accent-purple: #7C3AED;
    --accent-purple-hover: #6D28D9;
    --accent-green: #4ade80;
    
    /* Typography Colors */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-dark: #111827;
}

html {
    scroll-behavior: smooth;
}

body { 
    font-family: 'Plus Jakarta Sans', 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    margin: 0; 
    padding-top: 80px;
    background-color: var(--bg-dark); 
    color: var(--text-main);
    overflow-x: hidden;
}

/* Blur Utility saat Modal Aktif */
.blur-active { 
    filter: blur(8px); 
    pointer-events: none; 
}


/* ==========================================================================
   2. HEADER & NAVIGATION STYLES
   ========================================================================== */
/* Tambahkan style khusus header jika ada dari header.php */
.header-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(11, 15, 23, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}


/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */
.hero {
    width: 100%;
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
    background-image:
        linear-gradient(180deg, rgba(11, 15, 23, 0.6) 0%, rgba(11, 15, 23, 0.95) 100%),
        url('../img/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.hero .text { 
    max-width: 700px; 
    text-align: center; 
}

.hero h1 { 
    font-size: clamp(3rem, 8vw, 5.5rem); 
    margin: 0; 
    font-weight: 800; 
    letter-spacing: 2px; 
    line-height: 1; 
    color: #fff; 
}

.hero h1 span { 
    color: var(--accent-red); 
}

.hero h2 { 
    margin: 0; 
    font-size: 1.5rem; 
    color: var(--text-muted); 
    font-weight: 400; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
}

.hero p { 
    color: var(--text-muted); 
    max-width: 550px; 
    margin: 20px auto 30px; 
    line-height: 1.6; 
    font-size: 1.05rem; 
}

/* Call to Action Buttons */
.cta-group { 
    display: flex; 
    gap: 15px; 
    justify-content: center; 
    flex-wrap: wrap; 
}

.cta-btn { 
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-purple); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    color: white; 
    padding: 12px 28px; 
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none; 
    transition: all 0.3s ease; 
}

.cta-btn:hover { 
    background: var(--accent-purple-hover); 
    transform: translateY(-2px); 
    color: #fff; 
}

.cta-btn.btn-outline { 
    background: rgba(255, 255, 255, 0.05); 
    border-color: var(--border-color); 
}

.cta-btn.btn-outline:hover { 
    background: rgba(255, 255, 255, 0.1); 
}

/* Scroll Indicator Arrow */
.scroll-arrow {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-muted);
    font-size: 1.8rem;
    text-decoration: none;
    transition: color 0.3s ease;
    animation: bounce 2s infinite;
    z-index: 10;
}

.scroll-arrow:hover { 
    color: var(--accent-red); 
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -12px); }
    60% { transform: translate(-50%, -6px); }
}


/* ==========================================================================
   4. SERVER STATS SECTION
   ========================================================================== */
.server-stats {
    padding: 40px 20px;
    background: var(--surface-dark);
    border-bottom: 1px solid var(--border-color);
}

.stats-container {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
}

.stat-box { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
}

.stat-title { 
    color: var(--text-muted); 
    font-size: 13px; 
    font-weight: 700; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
}

.stat-box h2 { 
    color: var(--text-main); 
    font-size: 2.8rem; 
    font-weight: 800; 
    margin: 0; 
}


/* ==========================================================================
   5. PREMIUM SHOP SECTION
   ========================================================================== */
.shop-section { 
    padding: 80px 20px; 
    max-width: 1100px; 
    margin: auto; 
}

.section-title { 
    text-align: center; 
    color: #fff; 
    font-weight: 800; 
    letter-spacing: 2px; 
    margin-bottom: 40px; 
}

.shop-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; 
}

.shop-card { 
    background: var(--surface-card); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 40px 30px; 
    text-align: center; 
    border: 1px solid var(--border-color); 
    border-radius: 12px;
    transition: all 0.3s ease; 
    text-decoration: none; 
    color: var(--text-main); 
    display: block; 
}

.shop-card:hover { 
    transform: translateY(-8px); 
    border-color: var(--accent-red); 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); 
}

.shop-card i { 
    font-size: 3rem; 
    margin-bottom: 20px; 
}

.shop-card h2 { 
    font-size: 1.5rem; 
    font-weight: 700; 
    margin-bottom: 10px; 
}

.shop-card p { 
    color: var(--text-muted); 
    font-size: 0.95rem; 
    margin: 0; 
}

.rank-shop i { color: var(--accent-gold); }
.point-shop i { color: var(--accent-red); }


/* ==========================================================================
   6. DONATUR / TRANSACTION MARQUEE SECTION (donatur.php)
   ========================================================================== */
.top-section { 
    padding: 20px 0; 
    border-top: 1px solid var(--border-color); 
    border-bottom: 1px solid var(--border-color); 
}

.marquee-container {
    position: relative;
    width: 100%;
    background: rgba(20, 26, 35, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 12px 0;
    overflow: hidden;
    white-space: nowrap;
    z-index: 5;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.marquee-content {
    display: inline-block;
    animation: scroll-left 40s linear infinite;
}

.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

.donatur-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 25px;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 16px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.donatur-item .highlight-username { 
    color: #ffffff; 
    font-weight: 600;
}

.donatur-item .highlight-item { 
    color: var(--accent-red); 
    font-weight: 600;
}

.donatur-item .highlight-price { 
    color: var(--accent-green); 
    font-weight: 600;
}

@keyframes scroll-left {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}


/* ==========================================================================
   7. COMMUNITY HUB SECTION (Hub Komunitas)
   ========================================================================== */
.link-section {
    padding: 80px 20px;
    max-width: 100%;
    margin: auto;
    background-image:
        linear-gradient(180deg, rgba(10, 10, 10, 0.75) 0%, rgba(10, 10, 10, 0.95) 100%),
        url('../img/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--border-color);
}

.link-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
    gap: 20px; 
    max-width: 900px; 
    margin: auto; 
}

.link-item { 
    background: var(--accent-purple); 
    padding: 25px; 
    color: #fff; 
    text-decoration: none; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    transition: all 0.3s ease; 
    border-radius: 8px;
}

.link-item:hover { 
    border-color: #fff; 
    background: #ffffff; 
    color: var(--text-dark); 
    transform: translateY(-5px); 
}

.link-item:hover h4,
.link-item:hover p,
.link-item:hover i { 
    color: var(--text-dark) !important; 
}

.link-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #fff;
}

.link-item p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.card-footer-link { 
    margin-top: 20px; 
    font-size: 0.75rem; 
    color: var(--accent-gold); 
    text-transform: uppercase; 
    font-weight: bold; 
    display: flex;
    align-items: center;
    gap: 6px;
}

.link-item:hover .card-footer-link {
    color: var(--accent-red);
}


/* ==========================================================================
   8. MODAL & POPUP STYLES
   ========================================================================== */
.modal-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.8); 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px);
    z-index: 9999; 
    justify-content: center; 
    align-items: center; 
}

.modal-content { 
    background: var(--surface-dark); 
    border: 1px solid var(--border-color); 
    width: 90%; 
    max-width: 480px; 
    padding: 30px; 
    border-radius: 12px; 
    color: #fff; 
    position: relative;
}

.close-modal { 
    position: absolute; 
    top: 15px; 
    right: 20px; 
    cursor: pointer; 
    font-size: 1.5rem; 
    color: var(--text-muted); 
    transition: color 0.2s;
}

.close-modal:hover {
    color: #fff;
}

.step-item { 
    display: flex; 
    align-items: center; 
    margin-bottom: 12px; 
    color: var(--text-main); 
    font-size: 0.95rem; 
}

.step-number { 
    background: rgba(255, 255, 255, 0.1); 
    color: var(--accent-red); 
    width: 26px; 
    height: 26px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-right: 12px; 
    font-weight: 700; 
    font-size: 0.85rem; 
    flex-shrink: 0; 
}

.tab-btn { 
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid var(--border-color); 
    color: #fff; 
    padding: 8px 16px; 
    border-radius: 6px; 
    cursor: pointer; 
    transition: 0.3s; 
}

.tab-btn.active { 
    background: var(--accent-red); 
    border-color: var(--accent-red); 
}

.tab-content { 
    padding: 15px; 
    border: 1px solid var(--border-color); 
    background: rgba(0, 0, 0, 0.2); 
    border-radius: 8px; 
    margin-bottom: 20px; 
}

.modal-footer-custom { 
    border-top: 1px solid var(--border-color); 
    padding-top: 20px; 
    display: flex; 
    gap: 10px; 
    justify-content: space-between; 
    align-items: center; 
}

.ip-box { 
    background: rgba(0, 0, 0, 0.3); 
    padding: 8px 12px; 
    border: 1px solid var(--border-color); 
    border-radius: 6px; 
    font-family: monospace; 
    color: var(--accent-gold); 
}

.btn-copy { 
    background: var(--accent-red); 
    border: none; 
    padding: 9px 15px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: 600; 
    color: white; 
    transition: 0.2s; 
}

.btn-copy:hover { 
    opacity: 0.9; 
}


/* ==========================================================================
   9. FOOTER & BACK-TO-TOP STYLES
   ========================================================================== */
/* Footer styling tambahan jika ada dari footer.php */
footer {
    background: var(--surface-dark);
    border-top: 1px solid var(--border-color);
    padding: 40px 20px;
    color: var(--text-muted);
}

.back-to-top {
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    background: var(--accent-red); 
    color: white; 
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    display: none; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none; 
    z-index: 1000; 
    transition: 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.back-to-top:hover { 
    transform: translateY(-3px); 
    color: white; 
    background: #ff0000;
}


/* ==========================================================================
   10. RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .hero h1 { 
        font-size: 3rem; 
    }

    .stats-container { 
        grid-template-columns: 1fr; 
        gap: 20px; 
    }

    .stat-box h2 { 
        font-size: 2.2rem; 
    }

    .link-grid {
        grid-template-columns: 1fr;
    }

    .modal-footer-custom {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-copy {
        width: 100%;
    }
}

/* ===== Source: dist/css/style.css ===== */
/* ==========================================================================
   THEME VARIABLES (Default: Light Mode)
   ========================================================================== */
:root {
    --bg-main: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: rgba(0, 0, 0, 0.06);
    --input-bg: #ffffff;
    --glow-color: rgba(251, 36, 36, 0.12);
    --card-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
    
    /* Global Brand Color */
    --primary-red: #fb2424;
    --hover-red: #dc2626;
    --title-gradient: linear-gradient(to bottom, #0f172a 60%, #64748b);
}

/* ==========================================================================
   DARK MODE VARIABLES (Second Mode)
   ========================================================================== */
[data-theme="dark"] {
    --bg-main: #0f172a;
    --card-bg: #1e293b;
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.05);
    --input-bg: rgba(15, 23, 42, 0.6);
    --glow-color: rgba(251, 36, 36, 0.22);
    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    --title-gradient: linear-gradient(to bottom, #ffffff 60%, #94a3b8);
}

/* ==========================================================================
   BASE & LAYOUT STYLES
   ========================================================================== */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    position: relative;
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ambient Glow Behind Card */
body::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: var(--glow-color);
    border-radius: 50%;
    filter: blur(90px);
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    transition: background 0.3s ease;
}

/* Floating Theme Toggle Button */
.theme-toggle-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 10;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
    transform: scale(1.08);
    border-color: var(--primary-red);
}

.content-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 480px;
    padding: 20px;
    text-align: center;
}

/* Hero Section */
#hero-section {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.big-title {
    font-size: 4.5rem;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 25px;
    background: var(--title-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Login Card Section */
#login-form-section {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.login-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: var(--card-shadow);
    border-top: 4px solid var(--primary-red);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Custom Tabs Platform */
.nav-tabs {
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 30px;
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    border: none;
    background: transparent;
    font-weight: 600;
    padding: 10px 30px;
    transition: 0.3s;
}

.nav-tabs .nav-link:hover {
    color: var(--text-main);
}

.nav-tabs .nav-link.active {
    color: var(--primary-red) !important;
    background: transparent;
    border-bottom: 3px solid var(--primary-red);
}

/* Form Controls */
.form-control {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 14px 16px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.form-control:focus {
    background-color: var(--card-bg);
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(251, 36, 36, 0.15);
    color: var(--text-main);
}

/* Buttons Styling */
.btn-main {
    background: var(--primary-red);
    color: #ffffff;
    border: none;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 14px 30px;
    border-radius: 10px;
    width: 100%;
    transition: 0.3s ease;
    box-shadow: 0 4px 15px rgba(251, 36, 36, 0.2);
}

.btn-main:hover {
    background: var(--hover-red);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(251, 36, 36, 0.35);
    color: #ffffff;
}

.btn-main:active {
    transform: translateY(0);
}



/* ===== Source: public/css/checkout.css ===== */
@scope (body.hn-page-checkout) {
        body { background-color: #0f0f12; color: #e4e4e4; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
        .checkout-wrapper { display: flex; justify-content: center; gap: 25px; max-width: 1000px; margin: 40px auto; }
        .checkout-box, .qris-box { background: #1a1a1e; border: 1px solid #29292e; padding: 30px; border-radius: 12px; flex: 1; min-width: 350px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); box-sizing: border-box; }
        h2 { color: #fff; margin-bottom: 20px; text-align: center; }
        .order-summary { background: #222227; padding: 15px; border-radius: 8px; border-left: 4px solid #ffb800; margin-bottom: 20px; }
        .qris-box { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .qris-image-large { max-width: 300px; width: 100%; margin: 15px 0; border: 8px solid #fff; border-radius: 12px; box-sizing: border-box; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; color: #ffb800; font-weight: 600; text-align: left; }
        .form-group input { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid #333; background: #0f0f12; color: #fff; box-sizing: border-box; }
        .btn-submit { background: #ffb800; color: #000; border: none; padding: 14px; width: 100%; font-weight: bold; cursor: pointer; border-radius: 6px; text-transform: uppercase; }
        .btn-cancel { display: block; width: 100%; margin-top: 15px; padding: 14px; background: transparent; color: #ff4d4d; border: 1px solid #ff4d4d; border-radius: 6px; text-align: center; text-decoration: none; font-weight: bold; box-sizing: border-box; }

        /* TAMPILAN MOBILE (Lebar Layar di bawah 768px) */
        @media (max-width: 768px) {
            body { padding: 10px; }
            .checkout-wrapper {
                flex-direction: column-reverse; /* Membalik urutan: Box QRIS pindah ke atas */
                margin: 10px auto;
                gap: 15px;
            }
            .checkout-box, .qris-box {
                min-width: 100%;
                width: 100%;
                padding: 20px;
            }
        }
}

/* ===== Source: public/css/checkout_points.css ===== */
@scope (body.hn-page-checkout-point) {
        body { background-color: #0f0f12; color: #e4e4e4; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
        .checkout-wrapper { display: flex; justify-content: center; gap: 25px; max-width: 1000px; margin: 40px auto; flex-wrap: wrap; }
        .checkout-box, .qris-box { background: #1a1a1e; border: 1px solid #29292e; padding: 30px; border-radius: 12px; flex: 1; min-width: 350px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); box-sizing: border-box; }
        h2 { color: #fff; margin-bottom: 20px; text-align: center; }
        .order-summary { background: #222227; padding: 15px; border-radius: 8px; border-left: 4px solid #ffb800; margin-bottom: 20px; }
        .order-summary p { margin: 8px 0; font-size: 0.95rem; }
        .qris-box { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .qris-image-large { max-width: 300px; width: 100%; margin: 15px 0; border: 8px solid #fff; border-radius: 12px; box-sizing: border-box; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; color: #ffb800; font-weight: 600; }
        .form-group input[type="text"], .form-group input[type="file"] { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid #333; background: #0f0f12; color: #fff; box-sizing: border-box; }
        .btn-submit { background: #ffb800; color: #000; border: none; padding: 14px; width: 100%; font-weight: bold; cursor: pointer; border-radius: 6px; text-transform: uppercase; transition: 0.3s; }
        .btn-cancel { display: block; width: 100%; margin-top: 15px; padding: 14px; background: transparent; color: #ff4d4d; border: 1px solid #ff4d4d; border-radius: 6px; text-align: center; text-decoration: none; font-weight: bold; text-transform: uppercase; transition: 0.3s; box-sizing: border-box; }
        .btn-cancel:hover { background: #ff4d4d; color: #fff; }
        .payment-instruction { font-size: 14px; color: #b3b3b3; line-height: 1.6; margin-top: 10px; }
        @media (max-width: 768px) {
            .checkout-wrapper { flex-direction: column-reverse; gap: 15px; margin: 10px auto; }
            .checkout-box, .qris-box { width: 100%; min-width: 100%; padding: 20px; }
        }
}

/* ===== Source: public/css/hn.css ===== */
/* Styling Dasar */
body { background: #111827; color: #fff; font-family: 'Poppins', sans-serif; }

/* Card Styling */
.rank-card {
    background: rgba(25, 25, 35, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    transition: 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.rank-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(251, 36, 36, 0.3); }
.rank-banner img { width: 100%; border-radius: 15px 15px 0 0; }

/* Font & Harga */
.rank-title { font-size: 1.2rem; font-weight: 400; color: #fff; }
.price-main { font-size: 1.3rem; color: #fff; }
.price-old { color: #888; text-decoration: line-through; font-size: 0.9rem; }

/* Tombol */
.btn-danger { background-color: #fb2424 !important; border: none; border-radius: 8px; }
.btn-danger:hover { background: #d61f1f !important; }

/* Helper Class */
.hero-title { font-size: 2.5rem; font-weight: 400; color: #fff; }
@media (min-width: 992px) { .col-lg-2-5 { flex: 0 0 20%; max-width: 20%; } }

/* ===== Source: public/css/id.css ===== */
@scope (body.hn-page-id) {
        :scope {
            --bg: #F8F9FB;
            --surface: #FFFFFF;
            --accent-red: #d90429;
            --accent-gold: #ffb703;
            --text-main: #e0e0e0;
            --text-second: #6B7280;
        }

        body { 
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
            margin: 0; 
            margin-top: 90px;
            background-color: var(--bg); 
            color: var(--text-main);
            overflow-x: hidden;
        }
        /* Hero Section */
        .hero {
            width: 100%;
            min-height: 80vh;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height:calc(100vh - 85px);
            padding:0 40px;
            box-sizing: border-box;
            background-image:
                linear-gradient(
                    180deg,
                    rgba(10, 10, 10, 0.7) 0%,
                    rgba(10, 10, 10, 0.9) 100%
                ),
                url('public/img/bg.png');
    
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            box-shadow: inset 0 -50px 50px -20px #0a0a0a;
            border-bottom: 1px solid #333;
        }

        .server-stats{
            padding:40px 30px;
            border-top:1px solid #222;
            border-bottom:1px solid #222;
        }

        .stats-container{
            max-width:1300px;
            margin:auto;
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:40px;
        }

        .stat-box{
            display:flex;
            flex-direction:column;
        }

        .stat-title{
            color:#8f96a3;
            font-size:14px;
            letter-spacing:3px;
            margin-bottom:10px;
        }

        .stat-box h2{
            color:#6B7280;
            font-size:58px;
            font-weight:800;
            margin:0;
        }

@media(max-width:768px){

    .stats-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:25px;
    }

    .stat-box h2{
        font-size:42px;
    }
    .cta-btn {
        margin-top: 10px;
    }

}

        .scroll-arrow {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            color: var(--text-main);
            font-size: 2rem;
            text-decoration: none;
            transition: color 0.3s ease;
            animation: bounce 2s infinite;
            z-index: 10;
        }
        
        .scroll-arrow:hover { color: var(--accent-red); }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
            40% { transform: translate(-50%, -15px); }
            60% { transform: translate(-50%, -7px); }
        }

        .hero .text { max-width: 700px; text-align: left; }
        .hero h1 { font-size: 5rem; margin: 0; font-weight: 900; letter-spacing: 3px; line-height: 1; color: #fff; }
        .hero h1 span { color: var(--accent-red); }
        .hero h2 { margin: 0; font-size: 1.5rem; color: #e0e0e0; font-weight: 400; }
        .hero p { color: #e0e0e0; max-width: 550px; margin: 20px 0 0; line-height: 1.7; font-size: 1.05rem; }

        /* Shop Section */
        .shop-section { min-height: 80vh; padding: 0 20px; display: grid; justify-content: center; align-items: center; }
        .shop-grid { display: flex; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; width: min(1000px, 100%); }
        .shop-card { background: var(--surface); padding: 40px; text-align: center; border: 1px solid #333; transition: 0.3s; text-decoration: none; color: #111827; display: block; }
        .shop-card:hover { transform: translateY(-10px); border-color: var(--accent-red); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        .shop-card i { font-size: 3rem; margin-bottom: 20px; }
        .rank-shop { border-bottom: 4px solid var(--accent-gold); }
        .rank-shop i { color: var(--accent-gold); }
        .point-shop { border-bottom: 4px solid var(--accent-red); }
        .point-shop i { color: var(--accent-red); }

        /* TOP PLAYER SECTION */
        .top-section { min-height: 20vh; padding: 0 80px; justify-content: center; align-items: center; border-bottom: 1px solid #333; }

        /* Community Section */
        .link-section {
            padding: 100px 20px;
            max-width: 100%;
            margin: auto;
            /* Background ditambahkan di sini */
            background-image: linear-gradient(rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.9)), url('public/img/bg2.png');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            border-bottom: 1px solid #333;
        }
        .link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 800px; margin: auto; }
        .link-grid div h4 {color: #111827;}
        .link-grid div p {color: #6B7280;}
        .link-item { 
            background: #DCDCDC; padding: 25px; color: #fff; text-decoration: none; border: 1px solid #333; 
            display: flex; flex-direction: column; justify-content: space-between; transition: 0.4s ease; border-radius: 0;
        }
        .link-item:hover { border-color: var(--accent-red); background: #1a0505; transform: translateY(-5px); }
        .card-footer { margin-top: 20px; font-size: 0.75rem; color: var(--accent-gold); text-transform: uppercase; font-weight: bold; }
        .cta-btn { display: inline-block; margin-top: 50px; background: transparent; border: 1px solid #7C3AED; color: white; padding: 12px 30px; text-decoration: none; transition: 0.3s; }
        .cta-btn:hover { background: #6D28D9; }

        html { scroll-behavior: smooth; }
        .tab-btn { background: #222; border: 1px solid #444; color: #fff; padding: 10px 20px; cursor: pointer; }
        .tab-btn.active { background: var(--accent-red); border-color: var(--accent-red); }
        .tab-content { padding: 15px; border: 1px solid #333; background: #0a0a0a; }
        
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 9999; justify-content: center; align-items: center; }
        .modal-content { background: var(--surface); border: 1px solid #333; width: 90%; max-width: 500px; padding: 30px; border-radius: 10px; position: relative; color: #fff; }
        .close-modal { position: absolute; top: 15px; right: 20px; cursor: pointer; font-size: 1.5rem; color: #fff; }
        .step-item { display: flex; align-items: center; margin-bottom: 15px; color: #fff; }
        .step-number { background: #222; color: red; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-weight: bold; font-size: 0.8rem; }
        
        .modal-footer { border-top: 1px solid #333; margin-top: 20px; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; }
        .ip-box { background: #0a0a0a; padding: 10px 15px; border: 1px solid #333; font-family: monospace; }
        .btn-copy { background: red; border: none; padding: 10px 15px; cursor: pointer; font-weight: bold; color: white; }
        .btn-copy:hover { background: #222; }
        .blur-active { filter: blur(8px); pointer-events: none; }
        
        /*Back to Top*/
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: var(--accent-red);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 1.2rem;
            transition: 0.3s;
            z-index: 1000;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }
        
        .back-to-top:hover {
            background: #ff0000;
            transform: translateY(-5px);
        }
}

/* ===== Source: public/css/index.css ===== */
@scope (body.hn-page-index) {

}

/* ===== Source: public/css/pending.css ===== */
@scope (body.hn-page-pending) {
body{
    background:#111827;
    color:#fff;
}

.card-status{
    background:#1f2937;
    border:1px solid #374151;
    color:#fff;
}

.alert-info{
    background:#172554;
    border:1px solid #3b82f6;
    color:#fff;
}

.card-status h5,
.card-status p,
.card-status strong{
    color:#fff;
}

.status-pending{
    color:#facc15;
    font-weight:bold;
}

.status-approved{
    color:#22c55e;
    font-weight:bold;
}

.status-rejected{
    color:#ef4444;
    font-weight:bold;
}

.back-btn{
    position: fixed;
    bottom: 20px;
    right: 20px;

    background: #fb2424;
    color: #fff;
    text-decoration: none;

    padding: 12px 18px;
    border-radius: 12px;

    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);

    transition: .3s;
    z-index: 9999;
}

.back-btn:hover{
    background: #d61f1f;
    color: #fff;
    transform: translateY(-2px);
}
}

/* ===== Source: public/css/shop.css ===== */
@scope (body.hn-page-shop) {
        body { background:#F8F9FB; color: #fff; font-family: 'Segoe UI', sans-serif; margin-top:90px; }
        .navbar-hellnah { background:#1f2937; border-bottom:2px solid #fb2424; }
        .rank-card { background: #FFFFFF; border: 1px solid #333; border-radius: 10px; overflow: hidden; transition: 0.4s; position: relative; }
        .rank-card:hover { transform: translateY(-10px); border-color: #fb2424; box-shadow: 0 10px 30px rgba(251, 36, 36, 0.2); }
        .rank-banner { width: 100%; position: relative; }
        .rank-banner img { width: 100%; height: 180px; object-fit: contain; background: #fff; padding: 10px; border-radius: 10px 10px 0 0; }
        .rank-banner::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 80px; background:  pointer-events: none; }
        .lock-icon { position: absolute; top: 15px; right: 15px; z-index: 10; font-size: 1.2rem; color: silver; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
        .unlocked { color: gold !important; }
        .progress { height: 6px; background: #333; border-radius: 10px; margin: 15px 0; overflow: hidden; }
        .progress-bar { background: linear-gradient(90deg, #fb2424, #ff7e5f); }
        .rank-title { font-size: 1rem !important; font-weight: bold; color: #000000; margin-top: -10px; position: relative; z-index: 2; }
        .price-main { font-size: 1.2rem !important; font-weight: 650; color: #7C3AED; display: block; }
        .price-old { color: #888; text-decoration: line-through; font-size: 0.9rem; }
        .btn-danger { background-color: #7C3AED!important; border: none; color: white; border-radius: 10px; transition: 0.3s; padding: 10px !important; font-weight: bold; }
        .btn-danger:hover { background: #6D28D9 !important; transform: scale(1.02); }
        .btn-danger:disabled { background: #333 !important; color: #888; transform: none; }
        .hero-title { font-size: 2.5rem; font-weight: 800; letter-spacing: -1px; background: linear-gradient(to right, #111827, #888); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .modal-content { background: #16161a !important; border: 1px solid #333; border-radius: 15px; overflow: hidden; }
        .modal-header { border-bottom: 2px solid #fb2424 !important; background: linear-gradient(to right, #1f1f23, #16161a); }
        .benefit-item { background: #1c1c21; padding: 12px 15px; margin-bottom: 10px; border-radius: 8px; display: flex; align-items: center; color:white;}
        .accordion-button { background: #F8F9FB !important; color: black !important; border: 1px solid #333 !important; font-weight: bold; text-transform: uppercase; }
        .accordion-button:not(.collapsed) { background: #FFFFFF !important; border-color: #fb2424 !important; }
}

/* ===== Source: public/css/shop_points.css ===== */
@scope (body.hn-page-shop-points) {
        body { background: #FFFFFF; color: #fff; font-family: 'Poppins', sans-serif; margin: 0; margin-top:90px; }
        .store-container { max-width: 1100px; margin: 40px auto; padding: 20px; }
        .grid-packages { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
            gap: 25px; 
            margin-top: 40px; 
        }
        .card-package { 
            background: #fff;
            border: 1px solid #333;
            border-radius: 15px; 
            padding: 30px 20px; 
            text-align: center; 
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        .card-package:hover {
            transform: translateY(-10px);
            border-color: #7C3AED;
            box-shadow: 0 10px 30px rgba(251, 36, 36, 0.2);
        }
        .icon-box { font-size: 3rem; margin-bottom: 15px; color: #A855F7; }
        .card-package h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 5px; color: #111827; }
        .card-package p { font-size: 0.85rem; color: #6B7280; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; }
        .price { font-size: 1.4rem; color: #A855F7; font-weight: 800; margin-bottom: 20px; }
        .btn-buy { 
            background: #7C3AED; color: white; border: none; padding: 12px 20px; border-radius: 8px; 
            font-weight: 600; width: 100%; text-decoration: none; display: block; transition: 0.3s;
        }
        .btn-buy:hover { background: #6D28D9; color: white; transform: scale(1.02); }
        .btn-buy:disabled { background: #333; cursor: not-allowed; }
        .hero-title { font-weight: 800; background: linear-gradient(to right, #9333EA, #6D28D9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
}

/* ===== Source: public/css/staff.css ===== */
@scope (body.hn-page-staff) {
        body { 
            background: #111827; 
            color: white; 
            font-family: 'Segoe UI', sans-serif; 
            margin-top: 90px;
        }
        
        .role-title { 
            color: #fb2424; 
            text-align: center; 
            font-weight: bold; 
            margin: 40px 0 20px 0; 
            text-transform: uppercase; 
            letter-spacing: 2px;
        }

        .rank-card {
            background: rgba(25, 25, 35, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 15px;
            transition: 0.3s;
            text-align: center;
        }

        .rank-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(251, 36, 36, 0.2);
        }

        .rank-card img {
            border-radius: 10px;
            width: 100%;
            height: auto;
            margin-bottom: 10px;
        }

        .role-name { font-weight: bold; color: white; }
}

/* ===== Source: public/css/style.css ===== */
/* Tambahkan ini ke setiap halaman agar seragam */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 16px; /* Ukuran dasar yang konsisten */
}

/* Mengunci ukuran font header agar tidak berubah-ubah */
h1, h2, h3, h4, .card-title {
    font-family: 'Segoe UI', sans-serif !important;
}

/* ===== Inline source: 404.php ===== */
@scope (body.hn-page-404) {
:scope {
            --bg-dark: #0b0e14;
            --surface-card: rgba(20, 26, 35, 0.85);
            --border-color: rgba(255, 255, 255, 0.08);
            --accent-gold: #ffb703;
            --accent-red: #e63946;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: 'Plus Jakarta Sans', sans-serif;
            height: 100vh;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .error-card {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 40px;
            max-width: 480px;
            width: 90%;
            text-align: center;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .error-code {
            font-size: 5.5rem;
            font-weight: 800;
            color: var(--accent-gold);
            line-height: 1;
            margin-bottom: 10px;
        }

        .btn-home {
            background-color: var(--accent-gold);
            color: #000;
            font-weight: 700;
            border: none;
            transition: all 0.2s ease;
        }

        .btn-home:hover {
            background-color: #e0a200;
            color: #000;
            transform: translateY(-2px);
        }
}

/* ===== Inline source: 500.php ===== */
@scope (body.hn-page-500) {
body {
            background-color: #0b0e14;
            color: #f8fafc;
            font-family: 'Plus Jakarta Sans', sans-serif;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .error-card {
            background: rgba(20, 26, 35, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 40px;
            max-width: 500px;
            text-align: center;
        }
        .error-code {
            font-size: 5rem;
            font-weight: 800;
            color: #e63946;
            line-height: 1;
        }
}

/* ===== Inline source: admin/admin_blog.php ===== */
@scope (body.hn-admin-page-admin-blog) {
.blog-manager{--blog-card:#fff;--blog-text:#121826;--blog-muted:#7b8498;--blog-purple:#7c3aed;--blog-red:#e63946;--blog-green:#10b981;--blog-gold:#ffb703;--blog-border:rgba(15,23,42,.08)}
.blog-hero{position:relative;padding:clamp(23px,4vw,34px);margin-bottom:22px;overflow:hidden;color:#fff;background:radial-gradient(circle at 88% 15%,rgba(255,183,3,.22),transparent 13rem),radial-gradient(circle at 5% 120%,rgba(230,57,70,.24),transparent 17rem),linear-gradient(135deg,#151927,#211a45 62%,#351750);border:1px solid rgba(255,255,255,.09);border-radius:23px;box-shadow:0 22px 50px rgba(35,25,75,.16)}
.blog-hero:after{position:absolute;right:-50px;bottom:-90px;width:230px;height:230px;content:'';border:40px solid rgba(255,255,255,.035);border-radius:50%}.blog-kicker{display:inline-flex;gap:7px;align-items:center;padding:7px 11px;margin-bottom:11px;color:#ddd6fe;font-size:.66rem;font-weight:800;letter-spacing:.1em;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.15);border-radius:999px;text-transform:uppercase}.blog-hero h2{font-size:clamp(1.35rem,3vw,1.9rem)}
.blog-manager>.alert{border:0;border-radius:14px;box-shadow:0 10px 25px rgba(15,23,42,.06)!important}.blog-editor-card,.blog-list-card{overflow:hidden;background:#fff;border:1px solid var(--blog-border)!important;border-radius:20px!important;box-shadow:0 15px 36px rgba(20,24,40,.06)!important}.blog-card-header{padding:18px 20px!important;background:#fff!important;border-bottom:1px solid var(--blog-border)!important}.blog-header-icon{display:inline-grid;width:34px;height:34px;place-items:center;margin-right:8px;color:var(--blog-purple);background:#f4f0ff;border-radius:10px}.blog-manager .form-control,.blog-manager .form-select{min-height:44px;border-color:var(--blog-border);border-radius:11px;box-shadow:none}.blog-manager textarea.form-control{min-height:auto}.discord-only-badge{padding:5px 8px;color:#5865f2;background:#eef0ff!important;border-color:#dfe2ff!important;border-radius:999px}.blog-publish-btn{min-height:44px;color:#fff;background:linear-gradient(90deg,var(--blog-red),#f05a67);border:0;border-radius:11px;box-shadow:0 8px 18px rgba(230,57,70,.2)}
.blog-list-card .table thead{color:#697386;font-size:.67rem;letter-spacing:.06em;background:#f8f9fc;text-transform:uppercase}.blog-list-card .table>:not(caption)>*>*{padding-top:14px;padding-bottom:14px;border-color:var(--blog-border)}.blog-list-card tbody tr:hover{background:#fbfaff}.blog-index{display:inline-block;padding:5px 8px;color:var(--blog-purple);font-size:.72rem;background:#f5f3ff;border:1px solid #ede9fe;border-radius:8px}.blog-category{padding:7px 10px;color:#be123c;background:#ffe4e6!important;border-radius:999px}.blog-count{padding:7px 11px;color:#6d28d9;background:#ede9fe;border-radius:999px}.blog-action{display:inline-grid;width:36px;height:36px;place-items:center;padding:0;border-radius:10px}
.blog-manager .modal-content{overflow:hidden;border:0!important;border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.18)!important}.blog-manager .modal-header{padding:18px 20px;color:#fff;background:linear-gradient(135deg,#151927,#211a45)!important}.blog-manager .modal-header .text-dark{color:#fff!important}.blog-manager .modal-header .btn-close{filter:invert(1);opacity:.75}.blog-manager .modal-footer{border:0;background:#fafafe!important}
@media(max-width:767.98px){.blog-hero{border-radius:20px}.blog-editor-card .card-body{padding:18px!important}.blog-publish-btn{width:100%}}
}

/* ===== Inline source: admin/admin_financial.php ===== */
@scope (body.hn-admin-page-admin-financial) {
.financial-page {
        --finance-card:#fff;
        --finance-text:#121826;
        --finance-muted:#7b8498;
        --finance-purple:#7c3aed;
        --finance-red:#e63946;
        --finance-green:#10b981;
        --finance-blue:#3b82f6;
        --finance-gold:#ffb703;
        --finance-border:rgba(15,23,42,.08);
    }

    .financial-hero {
        position:relative;
        padding:clamp(23px,4vw,34px);
        margin-bottom:22px;
        overflow:hidden;
        color:#fff;
        background:
            radial-gradient(circle at 88% 15%,rgba(255,183,3,.22),transparent 13rem),
            radial-gradient(circle at 5% 120%,rgba(230,57,70,.24),transparent 17rem),
            linear-gradient(135deg,#151927,#211a45 62%,#351750);
        border:1px solid rgba(255,255,255,.09);
        border-radius:23px;
        box-shadow:0 22px 50px rgba(35,25,75,.16);
    }

    .financial-hero::after { position:absolute;right:-50px;bottom:-90px;width:230px;height:230px;content:'';border:40px solid rgba(255,255,255,.035);border-radius:50%; }
    .financial-kicker { display:inline-flex;gap:7px;align-items:center;padding:7px 11px;margin-bottom:11px;color:#ddd6fe;font-size:.66rem;font-weight:800;letter-spacing:.1em;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.15);border-radius:999px;text-transform:uppercase; }
    .financial-hero h2 { font-size:clamp(1.35rem,3vw,1.9rem); }

    .financial-page .alert { border:0;border-radius:14px;box-shadow:0 10px 25px rgba(15,23,42,.06)!important; }

    .financial-stat-card {
        position:relative;
        height:100%;
        min-height:148px;
        padding:21px;
        overflow:hidden;
        color:var(--finance-text);
        background:var(--finance-card);
        border:1px solid var(--finance-border);
        border-radius:19px;
        box-shadow:0 12px 30px rgba(20,24,40,.05);
        transition:.25s ease;
    }

    .financial-stat-card:hover { border-color:rgba(124,58,237,.22);box-shadow:0 18px 36px rgba(42,32,84,.09);transform:translateY(-4px); }
    .financial-stat-card::after { position:absolute;right:-32px;top:-42px;width:110px;height:110px;content:'';background:currentColor;border-radius:50%;opacity:.035; }
    .financial-stat-label { color:var(--finance-muted);font-size:.65rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase; }
    .financial-stat-value { margin-top:7px;overflow-wrap:anywhere;font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:800;letter-spacing:-.035em; }
    .financial-stat-icon { display:grid;flex:0 0 44px;width:44px;height:44px;place-items:center;font-size:1.45rem;border-radius:13px; }
    .stat-balance .financial-stat-icon { color:var(--finance-purple);background:#f4f0ff; }
    .stat-income .financial-stat-icon { color:var(--finance-green);background:#ecfdf5; }
    .stat-expense .financial-stat-icon { color:var(--finance-red);background:#fff0f2; }
    .stat-profit .financial-stat-icon { color:var(--finance-blue);background:#eff6ff; }

    .financial-panel,
    .financial-journal {
        overflow:hidden;
        background:#fff;
        border:1px solid var(--finance-border)!important;
        border-radius:20px!important;
        box-shadow:0 15px 36px rgba(20,24,40,.06)!important;
    }

    .financial-panel .card-header,
    .financial-journal .card-header { padding:18px 20px!important;background:#fff!important;border-bottom:1px solid var(--finance-border)!important; }
    .financial-panel .card-body { min-height:285px; }
    .financial-journal .form-control,
    .financial-journal .form-select { min-height:38px;border-color:var(--finance-border);border-radius:10px;box-shadow:none; }
    .financial-journal .table thead { color:#697386;font-size:.67rem;letter-spacing:.06em;background:#f8f9fc;text-transform:uppercase; }
    .financial-journal .table > :not(caption) > * > * { padding-top:14px;padding-bottom:14px;border-color:var(--finance-border); }
    .financial-journal .table tbody tr:hover { background:#fbfaff; }
    .financial-journal .badge { padding:.5em .75em;font-size:.68rem;border-radius:999px!important; }

    .finance-export-btn { color:#047857;border-color:#a7f3d0;border-radius:11px!important; }
    .finance-export-btn:hover { color:#fff;background:var(--finance-green);border-color:var(--finance-green); }
    .finance-add-btn { color:#fff;background:linear-gradient(90deg,var(--finance-purple),#6d28d9);border:0;border-radius:11px!important;box-shadow:0 8px 18px rgba(124,58,237,.20); }

    .financial-action-btn { display:inline-grid;width:35px;height:35px;place-items:center;padding:0;border:1px solid var(--finance-border)!important;border-radius:10px; }
    .financial-page .modal-content { overflow:hidden;border:0!important;border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.18)!important; }
    .financial-page .modal-header { padding:18px 20px;color:#fff;background:linear-gradient(135deg,#151927,#211a45); }
    .financial-page .modal-header .btn-close { filter:invert(1);opacity:.75; }
    .financial-page .modal-body .form-control,
    .financial-page .modal-body .form-select { min-height:45px;border-color:var(--finance-border);border-radius:11px;box-shadow:none; }

    @media(max-width:767.98px){
        .financial-hero{border-radius:20px}
        .financial-stat-card{min-height:136px;padding:17px}
        .financial-panel .card-body{min-height:240px}
    }
}

/* ===== Inline source: admin/admin_maintenance.php ===== */
@scope (body.hn-admin-page-admin-maintenance) {
.maintenance-manager{--maint-card:#fff;--maint-text:#121826;--maint-muted:#7b8498;--maint-purple:#7c3aed;--maint-red:#e63946;--maint-green:#10b981;--maint-gold:#ffb703;--maint-border:rgba(15,23,42,.08)}
.maint-hero{position:relative;padding:clamp(23px,4vw,34px);margin-bottom:22px;overflow:hidden;color:#fff;background:radial-gradient(circle at 88% 15%,rgba(255,183,3,.22),transparent 13rem),radial-gradient(circle at 5% 120%,rgba(230,57,70,.24),transparent 17rem),linear-gradient(135deg,#151927,#211a45 62%,#351750);border:1px solid rgba(255,255,255,.09);border-radius:23px;box-shadow:0 22px 50px rgba(35,25,75,.16)}
.maint-hero:after{position:absolute;right:-50px;bottom:-90px;width:230px;height:230px;content:'';border:40px solid rgba(255,255,255,.035);border-radius:50%}.maint-kicker{display:inline-flex;gap:7px;align-items:center;padding:7px 11px;margin-bottom:11px;color:#ddd6fe;font-size:.66rem;font-weight:800;letter-spacing:.1em;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.15);border-radius:999px;text-transform:uppercase}.maint-hero h2{font-size:clamp(1.35rem,3vw,1.9rem)}
.maintenance-manager>.alert{border:0;border-radius:14px;box-shadow:0 10px 25px rgba(15,23,42,.06)!important}.maint-status-card{padding:20px;margin-bottom:18px;background:<?= $is_enabled ? '#fff7ed' : '#ecfdf5' ?>;border:1px solid <?= $is_enabled ? '#fed7aa' : '#a7f3d0' ?>;border-radius:18px}.maint-status-icon{display:grid;flex:0 0 46px;width:46px;height:46px;place-items:center;color:<?= $is_enabled ? '#d97706' : '#059669' ?>;font-size:1.2rem;background:#fff;border-radius:14px;box-shadow:0 8px 18px rgba(15,23,42,.07)}.maint-form-card{overflow:hidden;background:#fff;border:1px solid var(--maint-border)!important;border-radius:20px!important;box-shadow:0 15px 36px rgba(20,24,40,.06)!important}.maint-card-header{padding:18px 20px!important;background:#fff!important;border-bottom:1px solid var(--maint-border)!important}.maint-header-icon{display:inline-grid;width:34px;height:34px;place-items:center;margin-right:8px;color:var(--maint-purple);background:#f4f0ff;border-radius:10px}.maintenance-manager .form-control{min-height:46px;border-color:var(--maint-border);border-radius:11px;box-shadow:none}.maintenance-manager textarea.form-control{min-height:auto}.maint-switch-panel{padding:17px;background:#fafafe;border:1px solid var(--maint-border);border-radius:14px}.maint-switch{width:3.4em!important;height:1.7em;cursor:pointer}.maint-switch:checked{background-color:var(--maint-red);border-color:var(--maint-red)}.maint-save-btn{min-height:44px;color:#fff;background:linear-gradient(90deg,var(--maint-purple),#6d28d9);border:0;border-radius:11px;box-shadow:0 8px 18px rgba(124,58,237,.2)}.maint-meta{padding:14px 16px;color:var(--maint-muted);font-size:.75rem;background:#fafafe;border:1px solid var(--maint-border);border-radius:13px}
@media(max-width:767.98px){.maint-hero{border-radius:20px}.maint-form-card .card-body{padding:18px!important}.maint-save-btn{width:100%}}
}

/* ===== Inline source: admin/backup/index.php ===== */
@scope (body.hn-admin-page-index) {
:scope {
            --bg-dark: #0b0e14;
            --surface-card: rgba(20, 26, 35, 0.85);
            --border-color: rgba(255, 255, 255, 0.08);
            --accent-gold: #ffb703;
            --accent-red: #e63946;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-main);
            height: 100vh;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-card {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 40px;
            width: 90%;
            max-width: 420px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
        }

        .brand-logo {
            width: 60px;
            height: auto;
            margin-bottom: 12px;
        }

        .login-card h4 {
            color: var(--text-main);
            font-weight: 800;
            letter-spacing: 0.5px;
        }

        .form-label {
            color: var(--text-muted);
            font-size: 0.85rem;
            font-weight: 600;
        }

        .input-group-text {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-right: none;
            color: var(--text-muted);
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        .form-control {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-left: none;
            color: var(--text-main);
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            padding: 12px 14px;
            font-size: 0.95rem;
        }

        .form-control:focus {
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
            border-color: var(--accent-gold);
            box-shadow: none;
        }

        .input-group:focus-within .input-group-text {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }

        .btn-login {
            background: var(--accent-gold);
            color: #000;
            border: none;
            padding: 12px;
            border-radius: 10px;
            font-weight: 700;
            transition: all 0.2s ease;
        }

        .btn-login:hover {
            background: #e0a200;
            color: #000;
            transform: translateY(-2px);
        }

        .link-back {
            color: var(--text-muted);
            font-size: 0.85rem;
            transition: color 0.2s ease;
        }

        .link-back:hover {
            color: var(--accent-gold);
        }
}

/* ===== Inline source: admin/backup_rank_player.php ===== */
@scope (body.hn-admin-page-backup-rank-player) {
.rank-backup-page{--rb-text:#121826;--rb-muted:#7b8498;--rb-purple:#7c3aed;--rb-red:#e63946;--rb-green:#10b981;--rb-border:rgba(15,23,42,.08)}
.rb-hero{position:relative;padding:clamp(24px,4vw,35px);margin-bottom:22px;overflow:hidden;color:#fff;background:radial-gradient(circle at 88% 12%,rgba(255,183,3,.22),transparent 13rem),radial-gradient(circle at 5% 120%,rgba(230,57,70,.25),transparent 17rem),linear-gradient(135deg,#151927,#211a45 62%,#351750);border:1px solid rgba(255,255,255,.09);border-radius:23px;box-shadow:0 22px 50px rgba(35,25,75,.16)}
.rb-kicker{display:inline-flex;gap:7px;align-items:center;padding:7px 11px;margin-bottom:11px;color:#ddd6fe;font-size:.66rem;font-weight:800;letter-spacing:.1em;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.15);border-radius:999px;text-transform:uppercase}
.rb-download{min-height:44px;color:#211a45!important;font-weight:800;background:#fff;border:0;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.14)}
.rb-stat{height:100%;padding:18px;background:#fff;border:1px solid var(--rb-border);border-radius:17px;box-shadow:0 12px 30px rgba(20,24,40,.055)}
.rb-stat-icon{display:grid;width:40px;height:40px;place-items:center;margin-bottom:12px;color:var(--rb-purple);font-size:1.1rem;background:#f2edff;border-radius:12px}.rb-stat-value{font-size:1.65rem;font-weight:800}.rb-stat-label{color:var(--rb-muted);font-size:.72rem;font-weight:700;text-transform:uppercase}
.rb-card{overflow:hidden;background:#fff;border:1px solid var(--rb-border)!important;border-radius:20px!important;box-shadow:0 15px 36px rgba(20,24,40,.06)!important}.rb-card-head{padding:18px 20px;background:#fff;border-bottom:1px solid var(--rb-border)}
.rb-search{position:relative;max-width:380px}.rb-search i{position:absolute;top:50%;left:14px;color:var(--rb-muted);transform:translateY(-50%)}.rb-search input{min-height:43px;padding-left:41px;border-color:var(--rb-border);border-radius:11px;box-shadow:none}
.rb-table thead{color:#697386;font-size:.68rem;letter-spacing:.06em;background:#f8f9fc;text-transform:uppercase}.rb-table>:not(caption)>*>*{padding:14px 18px;border-color:var(--rb-border)}.rb-number{display:grid;width:31px;height:31px;place-items:center;color:#6d28d9;font-size:.72rem;font-weight:800;background:#ede9fe;border-radius:9px}.rb-rank{display:inline-flex;gap:6px;align-items:center;padding:7px 10px;color:#047857;font-size:.72rem;font-weight:700;background:#d1fae5;border-radius:999px}
@media(max-width:767.98px){.rb-hero{border-radius:20px}.rb-download{width:100%;margin-top:8px}.rb-card-head{align-items:stretch!important}.rb-search{max-width:none;width:100%}}
}

/* ===== Inline source: admin/benefits.php ===== */
@scope (body.hn-admin-page-benefits) {
.benefit-manager-wrapper{--benefit-card:#fff;--benefit-text:#121826;--benefit-muted:#7b8498;--benefit-purple:#7c3aed;--benefit-red:#e63946;--benefit-green:#10b981;--benefit-gold:#ffb703;--benefit-border:rgba(15,23,42,.08)}
    .benefit-hero{position:relative;padding:18px 22px;margin-bottom:14px;overflow:hidden;color:#fff;background:radial-gradient(circle at 88% 15%,rgba(255,183,3,.22),transparent 13rem),radial-gradient(circle at 5% 120%,rgba(230,57,70,.24),transparent 17rem),linear-gradient(135deg,#151927,#211a45 62%,#351750);border:1px solid rgba(255,255,255,.09);border-radius:17px;box-shadow:0 14px 34px rgba(35,25,75,.13)}
    .benefit-hero:after{position:absolute;right:-50px;bottom:-90px;width:230px;height:230px;content:'';border:40px solid rgba(255,255,255,.035);border-radius:50%}.benefit-kicker{display:inline-flex;gap:7px;align-items:center;padding:7px 11px;margin-bottom:11px;color:#ddd6fe;font-size:.66rem;font-weight:800;letter-spacing:.1em;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.15);border-radius:999px;text-transform:uppercase}.benefit-hero h2{font-size:clamp(1.35rem,3vw,1.9rem)}
    .benefit-add-main{position:relative;z-index:1;padding:11px 17px;color:#fff!important;font-weight:800;background:linear-gradient(90deg,var(--benefit-red),#f05a67);border:0;border-radius:12px;box-shadow:0 10px 22px rgba(230,57,70,.23)}
    .stat-box{display:grid;grid-template-columns:38px 1fr;align-items:center;column-gap:12px;height:100%;min-height:76px;padding:13px 15px;background:#fff;border:1px solid var(--benefit-border);border-radius:14px;box-shadow:0 8px 22px rgba(20,24,40,.04);transition:.2s ease}.stat-box:hover{border-color:rgba(124,58,237,.22);box-shadow:0 12px 28px rgba(42,32,84,.07);transform:translateY(-2px)}.stat-icon{display:grid;grid-row:1/3;width:38px;height:38px;place-items:center;margin:0;color:var(--benefit-purple);background:#f4f0ff;border-radius:11px}.stat-box:nth-child(2) .stat-icon{color:var(--benefit-gold);background:#fffbeb}.stat-title{align-self:end;color:var(--benefit-muted);font-size:.61rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.stat-value{align-self:start;margin:1px 0 0;color:var(--benefit-text);font-size:1.15rem;font-weight:800;letter-spacing:-.03em}
    .search-container{position:relative;padding:5px;margin-bottom:12px;background:#fff;border:1px solid var(--benefit-border);border-radius:12px;box-shadow:0 8px 20px rgba(20,24,40,.04)}.search-container input{height:39px;padding-left:40px;background:#fafafe;border:0;border-radius:8px;box-shadow:none!important}.search-container>i{position:absolute;top:17px;left:20px;z-index:2;color:var(--benefit-muted)}
    #wrapperDaftarRank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}.rank-card{display:block;padding:0;margin:0;overflow:hidden;background:#fff;border:1px solid var(--benefit-border);border-radius:14px;box-shadow:0 7px 20px rgba(20,24,40,.04);transition:.2s ease}.rank-card:hover{border-color:rgba(124,58,237,.18);box-shadow:0 10px 25px rgba(42,32,84,.065)}.rank-header{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:68px;padding:9px 11px;cursor:pointer;list-style:none}.rank-header::-webkit-details-marker{display:none}.rank-header::marker{display:none;content:''}.rank-header h5{font-size:.9rem}.rank-icon{width:43px;height:43px;padding:2px;object-fit:contain;background:#fafafe;border:1px solid var(--benefit-border);border-radius:10px}.rank-meta-badge{padding:4px 7px;font-size:.59rem;font-weight:800;border-radius:999px}.rank-add-btn{padding:6px 8px!important;border-color:var(--benefit-border);border-radius:8px}.benefit-collapse-body{max-height:260px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.benefit-list-container{padding:9px;background:#fbfbfe;border-top:1px solid var(--benefit-border)}.benefit-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 9px;margin-bottom:6px;background:#fff;border:1px solid var(--benefit-border);border-radius:9px;font-size:.79rem}.benefit-action{display:inline-grid;width:29px;height:29px;place-items:center;padding:0;border-color:var(--benefit-border);border-radius:7px}.chevron-icon{font-size:.75rem;transform:rotate(-90deg);transition:transform .2s ease}.rank-card[open] .chevron-icon{transform:rotate(0)}
    .benefit-manager-modal .modal-content{overflow:hidden;background:#fff;border:0;border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.18)}.benefit-manager-modal .modal-header{padding:18px 20px;color:#fff;background:linear-gradient(135deg,#151927,#211a45)}.benefit-manager-modal .modal-header .btn-close{filter:invert(1);opacity:.75}.benefit-manager-modal .form-control,.benefit-manager-modal .form-select{border-color:var(--benefit-border);border-radius:11px;box-shadow:none}.benefit-submit{color:#fff!important;background:linear-gradient(90deg,var(--benefit-purple),#6d28d9)!important;border:0!important;border-radius:12px!important}
    @media(max-width:991.98px){#wrapperDaftarRank{grid-template-columns:1fr}}
    @media(max-width:767.98px){.benefit-hero{padding:16px;border-radius:15px}.benefit-add-main{width:100%}.stat-box{min-height:70px;padding:11px 13px}.rank-header>.d-flex:last-child{align-items:center!important}.rank-add-btn span{display:none}.benefit-collapse-body{max-height:230px}}
}

/* ===== Inline source: admin/dashboard.php ===== */
@scope (body.hn-admin-page-dashboard) {
:scope {
            --sidebar-width: 278px;
            --topbar-height: 78px;
            --hn-bg: #f5f6fb;
            --hn-ink: #121826;
            --hn-muted: #8991a4;
            --hn-sidebar: #0d1018;
            --hn-sidebar-soft: #171b27;
            --hn-purple: #7c3aed;
            --hn-purple-dark: #5b21b6;
            --hn-red: #e63946;
            --hn-gold: #ffb703;
            --hn-border: rgba(15, 23, 42, .08);
            --hn-shadow: 0 16px 45px rgba(20, 24, 40, .08);
        }

        * { box-sizing: border-box; }

        body {
            min-height: 100vh;
            margin: 0;
            overflow-x: hidden;
            color: var(--hn-ink);
            background:
                radial-gradient(circle at 92% 0%, rgba(124, 58, 237, .10), transparent 27rem),
                radial-gradient(circle at 25% 100%, rgba(230, 57, 70, .06), transparent 25rem),
                var(--hn-bg);
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .hn-sidebar {
            position: fixed;
            inset: 0 auto 0 0;
            z-index: 1040;
            width: var(--sidebar-width);
            height: 100vh;
            overflow: hidden;
            color: #fff;
            background:
                radial-gradient(circle at 10% 4%, rgba(124, 58, 237, .34), transparent 15rem),
                linear-gradient(180deg, #111520 0%, var(--hn-sidebar) 65%);
            border-right: 1px solid rgba(255, 255, 255, .06);
            box-shadow: 18px 0 55px rgba(5, 7, 12, .13);
        }

        .hn-sidebar::after {
            position: absolute;
            right: -95px;
            bottom: -85px;
            width: 220px;
            height: 220px;
            pointer-events: none;
            content: '';
            background: rgba(230, 57, 70, .10);
            border-radius: 50%;
            filter: blur(8px);
        }

        .hn-logo_details {
            position: relative;
            z-index: 1;
            display: flex;
            gap: 12px;
            align-items: center;
            height: 88px;
            padding: 0 24px;
            font-size: .93rem;
            letter-spacing: .055em;
            border-bottom: 1px solid rgba(255, 255, 255, .07);
        }

        .hn-logo_details > i {
            display: grid;
            width: 40px;
            height: 40px;
            place-items: center;
            margin: 0 !important;
            font-size: 1.35rem;
            background: linear-gradient(135deg, var(--hn-purple), var(--hn-red));
            border-radius: 13px;
            box-shadow: 0 9px 24px rgba(124, 58, 237, .30);
        }

        .hn-nav_list {
            position: relative;
            z-index: 1;
            height: calc(100vh - 88px);
            padding: 18px 14px 30px;
            margin: 0;
            overflow-x: hidden;
            overflow-y: auto;
            list-style: none;
            scrollbar-color: rgba(255, 255, 255, .15) transparent;
            scrollbar-width: thin;
        }

        .hn-nav_list li { margin: 4px 0; }

        .hn-nav_list li > a {
            position: relative;
            display: flex;
            align-items: center;
            min-height: 48px;
            padding: 10px 13px;
            overflow: hidden;
            color: #929bad;
            text-decoration: none;
            border: 1px solid transparent;
            border-radius: 13px;
            transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
        }

        .hn-nav_list li > a i {
            display: grid;
            flex: 0 0 34px;
            width: 34px;
            height: 34px;
            place-items: center;
            margin-right: 8px;
            font-size: 1.23rem;
            border-radius: 10px;
            transition: .2s ease;
        }

        .hn-nav_list li:hover > a {
            color: #fff;
            background: rgba(255, 255, 255, .055);
            transform: translateX(2px);
        }

        .hn-nav_list li.active > a {
            color: #fff;
            font-weight: 700;
            background: linear-gradient(90deg, rgba(124, 58, 237, .30), rgba(124, 58, 237, .09));
            border-color: rgba(167, 139, 250, .20);
            box-shadow: inset 3px 0 0 #a78bfa;
        }

        .hn-nav_list li.active > a i {
            color: #fff;
            background: linear-gradient(135deg, var(--hn-purple), #9f67ff);
            box-shadow: 0 7px 18px rgba(124, 58, 237, .28);
        }

        .hn-links_name { min-width: 0; font-size: .82rem; }

        .hn-nav-group { margin: 9px 0 3px !important; }
        .hn-nav-group-toggle {
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 38px;
            padding: 7px 11px;
            color: #697386;
            font-size: .64rem;
            font-weight: 800;
            letter-spacing: .1em;
            background: transparent;
            border: 0;
            border-radius: 10px;
            text-align: left;
            text-transform: uppercase;
            transition: .2s ease;
        }
        .hn-nav-group-toggle:hover { color: #c4b5fd; background: rgba(255,255,255,.04); }
        .hn-nav-group-toggle .group-icon { margin-right: 9px; font-size: 1rem; }
        .hn-nav-group-toggle .group-chevron { margin-left: auto; font-size: 1rem; transition: transform .2s ease; }
        .hn-nav-group-toggle[aria-expanded="true"] .group-chevron { transform: rotate(180deg); }
        .hn-nav-submenu { padding: 2px 0 0; margin: 0; list-style: none; }
        .hn-nav-submenu > li > a { padding-left: 17px; }

        .mobile-group-toggle {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 9px 12px;
            margin: 8px 0 3px;
            color: #aeb6c6;
            font-size: .69rem;
            font-weight: 800;
            letter-spacing: .08em;
            background: rgba(255,255,255,.035);
            border: 0;
            border-radius: 10px;
            text-transform: uppercase;
        }
        .mobile-group-toggle .bx-chevron-down { margin-left: auto; transition: transform .2s ease; }
        .mobile-group-toggle[aria-expanded="true"] .bx-chevron-down { transform: rotate(180deg); }
        .mobile-submenu { padding-left: 8px; list-style: none; }

        .hn-home_section {
            position: relative;
            min-height: 100vh;
            margin-left: var(--sidebar-width);
        }

        .hn-topbar {
            position: sticky;
            top: 0;
            z-index: 1030;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: var(--topbar-height);
            padding: 12px clamp(18px, 3vw, 36px);
            background: rgba(255, 255, 255, .82);
            border-bottom: 1px solid rgba(15, 23, 42, .06);
            box-shadow: 0 8px 30px rgba(15, 23, 42, .045);
            backdrop-filter: blur(18px);
        }

        .hn-topbar h5 { font-size: clamp(1rem, 2vw, 1.22rem); }

        .hn-page-kicker {
            display: block;
            margin-bottom: 2px;
            color: var(--hn-purple);
            font-size: .65rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

        .hn-status-pill {
            display: inline-flex;
            gap: 6px;
            align-items: center;
            padding: 7px 11px;
            margin-right: 14px;
            color: <?= $maintenance_enabled ? '#92400e' : '#047857' ?>;
            font-size: .65rem;
            font-weight: 800;
            background: <?= $maintenance_enabled ? '#fef3c7' : '#d1fae5' ?>;
            border: 1px solid <?= $maintenance_enabled ? '#fde68a' : '#a7f3d0' ?>;
            border-radius: 999px;
        }

        .hn-status-dot {
            width: 7px;
            height: 7px;
            background: currentColor;
            border-radius: 50%;
            box-shadow: 0 0 0 4px currentColor;
            opacity: .8;
        }

        .hn-profile-trigger {
            padding: 5px 8px 5px 5px;
            background: #fff;
            border: 1px solid var(--hn-border);
            border-radius: 999px;
            box-shadow: 0 7px 20px rgba(15, 23, 42, .06);
        }

        .avatar-circle {
            background: linear-gradient(135deg, var(--hn-purple), var(--hn-red)) !important;
            box-shadow: 0 7px 16px rgba(124, 58, 237, .22);
        }

        .dropdown-menu {
            padding: 9px;
            border-radius: 15px;
            box-shadow: var(--hn-shadow) !important;
        }

        .dropdown-item { padding: 9px 11px; border-radius: 9px; }

        .hn-content {
            width: 100%;
            max-width: 1680px;
            padding: clamp(18px, 3vw, 36px);
            margin: 0 auto;
        }

        .hn-content > .card,
        .hn-content > form,
        .hn-content .card {
            border-color: var(--hn-border);
            border-radius: 18px;
            box-shadow: 0 12px 32px rgba(20, 24, 40, .055);
        }

        .offcanvas {
            background:
                radial-gradient(circle at 10% 5%, rgba(124, 58, 237, .35), transparent 16rem),
                #0d1018 !important;
        }

        .offcanvas .nav-link {
            padding: 11px 13px;
            margin-bottom: 5px;
            border-radius: 12px;
        }

        .offcanvas .nav-link.active {
            background: linear-gradient(90deg, var(--hn-purple), var(--hn-purple-dark));
        }

        @media (max-width: 767.98px) {
            :scope { --topbar-height: 68px; }
            .hn-sidebar { display: none !important; }
            .hn-home_section { margin-left: 0; }
            .hn-topbar { padding: 10px 15px; }
            .hn-content { padding: 16px; }
            .hn-status-pill { display: none; }
        }
}

/* ===== Inline source: admin/export_financial.php ===== */
@scope (body.hn-admin-page-export-financial) {
.title {
            font-size: 16pt;
            font-weight: bold;
            text-align: center;
            background-color: #0f172a;
            color: #ffffff;
        }
        .meta-label {
            font-weight: bold;
            background-color: #f8fafc;
            border: 1px solid #cbd5e1;
        }
        .meta-val {
            background-color: #ffffff;
            border: 1px solid #cbd5e1;
        }
        .section-header {
            font-weight: bold;
            background-color: #e2e8f0;
            text-align: center;
            border: 1px solid #000000;
        }
        .table-header {
            font-weight: bold;
            background-color: #0284c7;
            color: #ffffff;
            text-align: center;
            border: 1px solid #000000;
        }
        .border-cell {
            border: 1px solid #000000;
            vertical-align: middle;
        }
        .text-center {
            text-align: center;
        }
        .text-right {
            text-align: right;
        }
        .text-bold {
            font-weight: bold;
        }
        /* Format Accounting Rupiah Excel */
        .currency-format {
            mso-number-format: "\"Rp\"* \#\,\#\#0;\(\"Rp\"* \(\#\,\#\#0\);\"Rp\"* \"-\";@_";
        }
}

/* ===== Inline source: admin/gallery_admin.php ===== */
@scope (body.hn-admin-page-gallery-admin) {
.gallery-manager{--gallery-card:#fff;--gallery-text:#121826;--gallery-muted:#7b8498;--gallery-purple:#7c3aed;--gallery-red:#e63946;--gallery-green:#10b981;--gallery-gold:#ffb703;--gallery-border:rgba(15,23,42,.08)}
    .gallery-hero{position:relative;padding:clamp(23px,4vw,34px);margin-bottom:22px;overflow:hidden;color:#fff;background:radial-gradient(circle at 88% 15%,rgba(255,183,3,.22),transparent 13rem),radial-gradient(circle at 5% 120%,rgba(230,57,70,.24),transparent 17rem),linear-gradient(135deg,#151927,#211a45 62%,#351750);border:1px solid rgba(255,255,255,.09);border-radius:23px;box-shadow:0 22px 50px rgba(35,25,75,.16)}
    .gallery-hero:after{position:absolute;right:-50px;bottom:-90px;width:230px;height:230px;content:'';border:40px solid rgba(255,255,255,.035);border-radius:50%}.gallery-kicker{display:inline-flex;gap:7px;align-items:center;padding:7px 11px;margin-bottom:11px;color:#ddd6fe;font-size:.66rem;font-weight:800;letter-spacing:.1em;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.15);border-radius:999px;text-transform:uppercase}.gallery-hero h2{font-size:clamp(1.35rem,3vw,1.9rem)}
    .gallery-manager>.alert{border:0;border-radius:14px;box-shadow:0 10px 25px rgba(15,23,42,.06)!important}.light-card{height:100%;overflow:hidden;background:#fff;border:1px solid var(--gallery-border)!important;border-radius:20px!important;box-shadow:0 15px 36px rgba(20,24,40,.06)!important}.light-card-header{padding:18px 20px!important;color:var(--gallery-text);background:#fff!important;border-bottom:1px solid var(--gallery-border)!important}.gallery-header-icon{display:inline-grid;width:34px;height:34px;place-items:center;margin-right:8px;color:var(--gallery-purple);background:#f4f0ff;border-radius:10px}.gallery-manager .form-control,.gallery-manager .form-select{min-height:44px;border-color:var(--gallery-border);border-radius:11px;box-shadow:none}.gallery-manager textarea.form-control{min-height:auto}.img-preview-box{padding:13px!important;background:#fafafe;border:2px dashed #d8dbe5;border-radius:14px;transition:.2s ease}.img-preview-box:hover{background:#f8f5ff;border-color:#a78bfa}.gallery-upload-btn{min-height:44px;color:#fff;background:linear-gradient(90deg,var(--gallery-purple),#6d28d9);border:0;border-radius:11px;box-shadow:0 8px 18px rgba(124,58,237,.2)}
    .gallery-table-card .table thead{color:#697386;font-size:.67rem;letter-spacing:.06em;background:#f8f9fc;text-transform:uppercase}.gallery-table-card .table>:not(caption)>*>*{padding-top:14px;padding-bottom:14px;border-color:var(--gallery-border)}.gallery-table-card tbody tr:hover{background:#fbfaff}.gallery-preview{width:72px;height:50px;object-fit:cover;background:#fafafe;border:1px solid var(--gallery-border)!important;border-radius:11px!important}.player-head{width:28px;height:28px;border-radius:9px!important}.category-badge{padding:7px 10px;color:#6d28d9;background:#ede9fe!important;border-radius:999px}.gallery-count{padding:7px 11px;color:#6d28d9;background:#ede9fe;border-radius:999px}.gallery-delete{display:inline-grid;width:36px;height:36px;place-items:center;padding:0;border-color:var(--gallery-border)!important;border-radius:10px}.gallery-delete:hover{color:#fff;background:var(--gallery-red);border-color:var(--gallery-red)!important}
    @media(max-width:991.98px){.light-card{height:auto}}@media(max-width:767.98px){.gallery-hero{border-radius:20px}.light-card .card-body{padding:18px!important}}
}

/* ===== Inline source: admin/home.php ===== */
@scope (body.hn-admin-page-home) {
.hn-home {
        --home-card: #fff;
        --home-text: #121826;
        --home-muted: #7b8498;
        --home-purple: #7c3aed;
        --home-purple-dark: #5b21b6;
        --home-red: #e63946;
        --home-green: #10b981;
        --home-blue: #3b82f6;
        --home-gold: #ffb703;
        --home-border: rgba(15, 23, 42, .08);
    }

    .welcome-card {
        position: relative;
        isolation: isolate;
        padding: clamp(24px, 4vw, 38px);
        margin-bottom: 24px;
        overflow: hidden;
        color: #fff;
        background:
            radial-gradient(circle at 85% 12%, rgba(255, 183, 3, .23), transparent 13rem),
            radial-gradient(circle at 12% 120%, rgba(230, 57, 70, .27), transparent 18rem),
            linear-gradient(135deg, #151927 0%, #211a45 58%, #351750 100%);
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 24px;
        box-shadow: 0 24px 55px rgba(35, 25, 75, .18);
    }

    .welcome-card::after {
        position: absolute;
        right: -40px;
        bottom: -90px;
        z-index: -1;
        width: 260px;
        height: 260px;
        content: '';
        border: 45px solid rgba(255, 255, 255, .035);
        border-radius: 50%;
    }

    .welcome-eyebrow {
        display: inline-flex;
        gap: 7px;
        align-items: center;
        padding: 7px 11px;
        margin-bottom: 12px;
        color: #ddd6fe;
        font-size: .67rem;
        font-weight: 800;
        letter-spacing: .1em;
        background: rgba(124, 58, 237, .22);
        border: 1px solid rgba(196, 181, 253, .16);
        border-radius: 999px;
        text-transform: uppercase;
    }

    .welcome-card h4 { font-size: clamp(1.3rem, 3vw, 2rem); }

    .welcome-action {
        padding: 12px 18px;
        color: #fff !important;
        background: linear-gradient(90deg, var(--home-red), #f05a67);
        border: 0;
        border-radius: 13px;
        box-shadow: 0 12px 25px rgba(230, 57, 70, .25);
    }

    .stat-card {
        position: relative;
        height: 100%;
        min-height: 150px;
        padding: 21px;
        overflow: hidden;
        background: var(--home-card);
        border: 1px solid var(--home-border);
        border-radius: 19px;
        box-shadow: 0 12px 32px rgba(20, 24, 40, .05);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .stat-card::after {
        position: absolute;
        top: -36px;
        right: -36px;
        width: 100px;
        height: 100px;
        content: '';
        background: currentColor;
        border-radius: 50%;
        opacity: .035;
    }

    .stat-card:hover {
        border-color: rgba(124, 58, 237, .25);
        box-shadow: 0 18px 38px rgba(42, 32, 84, .10);
        transform: translateY(-4px);
    }

    .stat-icon {
        display: grid;
        width: 43px;
        height: 43px;
        place-items: center;
        margin-bottom: 16px;
        color: var(--home-red);
        font-size: 1.1rem;
        background: #fff0f2;
        border-radius: 13px;
    }

    .stat-icon.green { color: var(--home-green); background: #ecfdf5; }
    .stat-icon.blue { color: var(--home-blue); background: #eff6ff; }

    .stat-title {
        color: var(--home-muted);
        font-size: .67rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .stat-value {
        margin-top: 5px;
        overflow-wrap: anywhere;
        color: var(--home-text);
        font-size: clamp(1.25rem, 2.3vw, 1.65rem);
        font-weight: 800;
        letter-spacing: -.03em;
    }

    .trend-indicator { padding: 4px 8px; font-size: .66rem; font-weight: 800; border-radius: 999px; }
    .trend-up { color: #047857; background: #d1fae5; }

    .dashboard-card {
        overflow: hidden;
        background: var(--home-card);
        border: 1px solid var(--home-border) !important;
        border-radius: 19px !important;
        box-shadow: 0 12px 32px rgba(20, 24, 40, .05) !important;
    }

    .dashboard-card .card-header {
        padding: 18px 20px;
        color: var(--home-text);
        font-weight: 800;
        background: #fff;
        border-bottom: 1px solid var(--home-border);
    }

    .btn-quick {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 13px 14px;
        color: var(--home-text);
        font-size: .83rem;
        font-weight: 700;
        text-decoration: none;
        background: #fafafe;
        border: 1px solid var(--home-border);
        border-radius: 13px;
        transition: .2s ease;
    }

    .btn-quick i {
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        background: #fff;
        border-radius: 9px;
        box-shadow: 0 5px 15px rgba(15, 23, 42, .05);
    }

    .btn-quick:hover {
        color: var(--home-purple);
        background: #f8f5ff;
        border-color: rgba(124, 58, 237, .20);
        transform: translateX(3px);
    }

    .dashboard-card .table > :not(caption) > * > * { padding-top: 13px; padding-bottom: 13px; }
    .dashboard-card .table tbody tr:last-child td { border-bottom: 0; }

    .visitor-card {
        overflow: hidden;
        color: #fff;
        background:
            radial-gradient(circle at 85% 10%, rgba(124, 58, 237, .30), transparent 17rem),
            linear-gradient(135deg, #101522, #171329 75%);
        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: 22px;
        box-shadow: 0 22px 50px rgba(17, 16, 35, .17);
    }

    .chart-panel {
        height: 100%;
        padding: 17px;
        background: rgba(255, 255, 255, .045);
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: 15px;
    }

    .visitor-detail-btn { border-color: rgba(255,255,255,.24); border-radius: 999px; }

    #modalDetailPengunjung .modal-content { overflow: hidden; border-radius: 20px !important; }
    #modalDetailPengunjung .modal-header { background: linear-gradient(135deg, #121826, #211a45) !important; }

    @media (max-width: 575.98px) {
        .welcome-card { align-items: stretch !important; border-radius: 20px; }
        .welcome-action { width: 100%; }
        .stat-card { min-height: 138px; padding: 17px; }
        .visitor-summary > div { padding-inline: 6px; }
        .visitor-summary .fs-3 { font-size: 1.4rem !important; }
    }
}

/* ===== Inline source: admin/index.php ===== */
@scope (body.hn-admin-page-index) {
:scope {
            --bg-dark: #0b0e14;
            --surface-card: rgba(20, 26, 35, 0.85);
            --border-color: rgba(255, 255, 255, 0.08);
            --accent-gold: #ffb703;
            --accent-red: #e63946;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-main);
            min-height: 100vh;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-card {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 40px;
            width: 90%;
            max-width: 420px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
        }

        .brand-logo {
            width: 60px;
            height: auto;
            margin-bottom: 12px;
        }

        .login-card h4 {
            color: var(--text-main);
            font-weight: 800;
            letter-spacing: 0.5px;
        }

        .form-label {
            color: var(--text-muted);
            font-size: 0.85rem;
            font-weight: 600;
        }

        .input-group-text {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-right: none;
            color: var(--text-muted);
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        .form-control {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-left: none;
            color: var(--text-main);
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            padding: 12px 14px;
            font-size: 0.95rem;
        }

        .form-control:focus {
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
            border-color: var(--accent-gold);
            box-shadow: none;
        }

        .input-group:focus-within .input-group-text {
            border-color: var(--accent-gold);
            color: var(--accent-gold);
        }

        .captcha-box {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 12px;
        }

        .btn-login {
            background: var(--accent-gold);
            color: #000;
            border: none;
            padding: 12px;
            border-radius: 10px;
            font-weight: 700;
            transition: all 0.2s ease;
        }

        .btn-login:hover {
            background: #e0a200;
            color: #000;
            transform: translateY(-2px);
        }

        .link-back {
            color: var(--text-muted);
            font-size: 0.85rem;
            transition: color 0.2s ease;
        }

        .link-back:hover {
            color: var(--accent-gold);
        }
}

/* ===== Inline source: admin/kelola_admin.php ===== */
@scope (body.hn-admin-page-kelola-admin) {
.admin-manager{--admin-card:#fff;--admin-text:#121826;--admin-muted:#7b8498;--admin-purple:#7c3aed;--admin-red:#e63946;--admin-green:#10b981;--admin-gold:#ffb703;--admin-border:rgba(15,23,42,.08)}
.admin-hero{position:relative;padding:clamp(23px,4vw,34px);margin-bottom:22px;overflow:hidden;color:#fff;background:radial-gradient(circle at 88% 15%,rgba(255,183,3,.22),transparent 13rem),radial-gradient(circle at 5% 120%,rgba(230,57,70,.24),transparent 17rem),linear-gradient(135deg,#151927,#211a45 62%,#351750);border:1px solid rgba(255,255,255,.09);border-radius:23px;box-shadow:0 22px 50px rgba(35,25,75,.16)}
.admin-hero:after{position:absolute;right:-50px;bottom:-90px;width:230px;height:230px;content:'';border:40px solid rgba(255,255,255,.035);border-radius:50%}.admin-kicker{display:inline-flex;gap:7px;align-items:center;padding:7px 11px;margin-bottom:11px;color:#ddd6fe;font-size:.66rem;font-weight:800;letter-spacing:.1em;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.15);border-radius:999px;text-transform:uppercase}.admin-hero h2{font-size:clamp(1.35rem,3vw,1.9rem)}
.admin-manager>.alert{border:0;border-radius:14px;box-shadow:0 10px 25px rgba(15,23,42,.06)!important}.admin-form-card,.admin-list-card{overflow:hidden;background:#fff;border:1px solid var(--admin-border)!important;border-radius:20px!important;box-shadow:0 15px 36px rgba(20,24,40,.06)!important}.admin-card-header{padding:18px 20px!important;color:var(--admin-text)!important;background:#fff!important;border-bottom:1px solid var(--admin-border)!important}.admin-card-icon{display:inline-grid;width:34px;height:34px;place-items:center;margin-right:8px;color:var(--admin-purple);background:#f4f0ff;border-radius:10px}.admin-manager .form-control,.admin-manager .form-select{min-height:44px;border-color:var(--admin-border);border-radius:11px;box-shadow:none}.permission-box{max-height:230px;padding:12px!important;overflow-y:auto;background:#fafafe!important;border-color:var(--admin-border)!important;border-radius:13px!important}.permission-box .form-check{padding:8px 9px 8px 2rem;margin:0!important;border-radius:9px}.permission-box .form-check:hover{background:#f4f0ff}.permission-box .form-check-input:checked{background-color:var(--admin-purple);border-color:var(--admin-purple)}.admin-save-btn{min-height:44px;color:#fff;background:linear-gradient(90deg,var(--admin-purple),#6d28d9);border:0;border-radius:11px;box-shadow:0 8px 18px rgba(124,58,237,.2)}
.admin-list-card .table thead{color:#697386;font-size:.67rem;letter-spacing:.06em;background:#f8f9fc;text-transform:uppercase}.admin-list-card .table>:not(caption)>*>*{padding-top:14px;padding-bottom:14px;border-color:var(--admin-border)}.admin-list-card tbody tr:hover{background:#fbfaff}.admin-avatar{display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;color:#fff;font-size:.8rem;font-weight:800;background:linear-gradient(135deg,var(--admin-purple),var(--admin-red));border-radius:12px}.admin-role-badge,.permission-badge{padding:6px 9px!important;font-size:.62rem!important;border-radius:999px!important}.admin-actions{gap:4px}.admin-actions .btn{display:inline-grid;width:35px;height:35px;place-items:center;padding:0;border-radius:10px}.account-count{padding:7px 11px;color:#6d28d9;background:#ede9fe;border-radius:999px}
.admin-manager .modal-content{overflow:hidden;border:0;border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.18)}.admin-manager .modal-header{padding:18px 20px;color:#fff!important;background:linear-gradient(135deg,#151927,#211a45)!important}.admin-manager .modal-header .text-dark{color:#fff!important}.admin-manager .modal-header .btn-close{filter:invert(1);opacity:.75}.admin-manager .modal-footer{border:0}.admin-manager .modal-footer .btn-primary{background:var(--admin-purple);border-color:var(--admin-purple)}
@media(max-width:991.98px){.admin-form-card{margin-bottom:18px}}@media(max-width:767.98px){.admin-hero{border-radius:20px}.admin-form-card .card-body{padding:18px!important}.admin-list-card .card-header{align-items:flex-start!important}}
}

/* ===== Inline source: admin/kelola_staff.php ===== */
@scope (body.hn-admin-page-kelola-staff) {
.staff-page{--staff-card:#fff;--staff-text:#121826;--staff-muted:#7b8498;--staff-purple:#7c3aed;--staff-red:#e63946;--staff-green:#10b981;--staff-blue:#3b82f6;--staff-border:rgba(15,23,42,.08)}
    .staff-hero{position:relative;padding:clamp(23px,4vw,34px);margin-bottom:22px;overflow:hidden;color:#fff;background:radial-gradient(circle at 88% 15%,rgba(255,183,3,.22),transparent 13rem),radial-gradient(circle at 5% 120%,rgba(230,57,70,.24),transparent 17rem),linear-gradient(135deg,#151927,#211a45 62%,#351750);border:1px solid rgba(255,255,255,.09);border-radius:23px;box-shadow:0 22px 50px rgba(35,25,75,.16)}
    .staff-hero:after{position:absolute;right:-50px;bottom:-90px;width:230px;height:230px;content:'';border:40px solid rgba(255,255,255,.035);border-radius:50%}.staff-kicker{display:inline-flex;gap:7px;align-items:center;padding:7px 11px;margin-bottom:11px;color:#ddd6fe;font-size:.66rem;font-weight:800;letter-spacing:.1em;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.15);border-radius:999px;text-transform:uppercase}.staff-hero h2{font-size:clamp(1.35rem,3vw,1.9rem)}
    .staff-page>.alert{border:0;border-radius:14px;box-shadow:0 10px 25px rgba(15,23,42,.06)!important}
    .staff-stat{height:100%;min-height:140px;padding:21px;background:#fff;border:1px solid var(--staff-border);border-radius:19px;box-shadow:0 12px 30px rgba(20,24,40,.05);transition:.25s ease}.staff-stat:hover{border-color:rgba(124,58,237,.22);box-shadow:0 18px 36px rgba(42,32,84,.09);transform:translateY(-4px)}.staff-stat-icon{display:grid;width:43px;height:43px;place-items:center;color:var(--staff-purple);font-size:1.1rem;background:#f4f0ff;border-radius:13px}.staff-stat.active .staff-stat-icon{color:var(--staff-green);background:#ecfdf5}.staff-stat.inactive .staff-stat-icon{color:var(--staff-red);background:#fff0f2}.staff-stat-title{color:var(--staff-muted);font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.staff-stat-value{margin-top:5px;color:var(--staff-text);font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:800}
    .staff-form-card,.staff-list-card{overflow:hidden;background:#fff;border:1px solid var(--staff-border)!important;border-radius:20px!important;box-shadow:0 15px 36px rgba(20,24,40,.06)!important}.staff-form-card .card-header,.staff-list-card .card-header{padding:18px 20px!important;background:#fff!important;border-bottom:1px solid var(--staff-border)!important}.staff-form-card .form-control,.staff-form-card .form-select{min-height:47px;border-color:var(--staff-border)!important;border-radius:11px;box-shadow:none}.staff-preview{width:120px;height:120px;object-fit:cover;border:3px solid #fff!important;border-radius:17px!important;box-shadow:0 10px 25px rgba(15,23,42,.12)!important}.upload-note{background:#fafafe!important;border-color:var(--staff-border)!important;border-radius:14px!important}.staff-save-btn{color:#fff;background:linear-gradient(90deg,var(--staff-purple),#6d28d9);border:0;border-radius:11px;box-shadow:0 8px 18px rgba(124,58,237,.2)}
    .staff-search{padding:7px;background:#fafafe;border:1px solid var(--staff-border);border-radius:13px}.staff-search .form-control{min-height:40px;background:transparent;border:0;box-shadow:none}.staff-search .btn{border-radius:9px}.staff-img{width:52px;height:52px;padding:2px;object-fit:cover;background:#fff;border:1px solid var(--staff-border)!important;border-radius:13px;transition:.2s ease}.staff-img:hover{transform:scale(1.08)}.table-custom{margin:0;border-collapse:collapse;border-spacing:0}.table-custom thead{color:#697386;font-size:.67rem;letter-spacing:.06em;background:#f8f9fc;text-transform:uppercase}.table-custom>:not(caption)>*>*{padding:14px!important;border-color:var(--staff-border)!important}.table-custom tbody tr{background:#fff;box-shadow:none;transition:background .2s ease}.table-custom tbody tr:hover{background:#fbfaff;transform:none;box-shadow:none}.staff-action-group{gap:4px}.staff-action-group .btn{display:inline-grid;width:35px;height:35px;place-items:center;padding:0;border:1px solid var(--staff-border)!important;border-radius:10px!important}.staff-role-badge,.staff-status-badge{padding:7px 10px!important;font-size:.68rem;border-radius:999px!important}
    .staff-page .modal-content{overflow:hidden;border:0!important;border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.18)!important}.staff-page .modal-header{padding:18px 20px;color:#fff;background:linear-gradient(135deg,#151927,#211a45)!important}.staff-page .modal-header .text-dark{color:#fff!important}.staff-page .modal-header .btn-close{filter:invert(1);opacity:.75}.staff-page .modal-body .form-control,.staff-page .modal-body .form-select{min-height:44px;border-color:var(--staff-border)!important;border-radius:11px;box-shadow:none}.staff-page .pagination{gap:5px}.staff-page .pagination .page-link{min-width:38px;margin:0;color:var(--staff-text);text-align:center;border:1px solid var(--staff-border);border-radius:10px!important}.staff-page .pagination .active .page-link{color:#fff;background:var(--staff-purple);border-color:var(--staff-purple)}
    .staff-preview-frame{position:relative;width:120px;height:120px}.staff-preview-frame .staff-preview{position:absolute;inset:0;width:100%;height:100%}.staff-avatar-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#8b94a7;background:linear-gradient(145deg,#f8f9fd,#eef0f7);border:2px dashed rgba(124,58,237,.2)!important}.staff-avatar-placeholder i{font-size:1.9rem;color:#a78bfa}.staff-avatar-placeholder span{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
    .edit-preview-frame{position:relative;width:160px;height:160px;margin:auto}.edit-preview-frame>*{position:absolute;inset:0;width:100%;height:100%;border-radius:18px}.edit-preview-frame img{object-fit:cover;border:3px solid #fff;box-shadow:0 10px 25px rgba(15,23,42,.12)}
    .staff-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px;background:#f8f9fc}.staff-profile-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:18px;overflow:hidden;background:#fff;border:1px solid var(--staff-border);border-radius:18px;box-shadow:0 10px 26px rgba(20,24,40,.045);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.staff-profile-card:before{position:absolute;inset:0 auto 0 0;width:4px;content:'';background:linear-gradient(180deg,var(--staff-purple),#a78bfa)}.staff-profile-card.is-inactive{opacity:.72;background:#fafbfc}.staff-profile-card:hover{z-index:1;border-color:rgba(124,58,237,.22);box-shadow:0 16px 34px rgba(42,32,84,.09);transform:translateY(-3px)}.staff-card-head{display:flex;align-items:center;gap:13px;min-width:0}.staff-card-avatar{position:relative;display:grid;width:62px;height:62px;flex:0 0 62px;place-items:center;overflow:hidden;color:#fff;font-size:1rem;font-weight:800;letter-spacing:.04em;background:linear-gradient(145deg,#6d28d9,#a855f7);border:3px solid #fff;border-radius:17px;box-shadow:0 8px 20px rgba(91,33,182,.2)}.staff-card-avatar img{width:100%;height:100%;object-fit:cover}.staff-presence{position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;background:#10b981;border:3px solid #fff;border-radius:50%}.is-inactive .staff-presence{background:#94a3b8}.staff-card-info{min-width:0;flex:1}.staff-card-name{margin:0 0 4px;overflow:hidden;color:var(--staff-text);font-size:1rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.staff-card-id{color:var(--staff-muted);font-size:.69rem}.staff-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:14px;margin-top:14px;border-top:1px solid var(--staff-border)}.staff-card-actions{display:flex;gap:5px}.staff-card-actions .btn{display:grid;width:34px;height:34px;place-items:center;padding:0;border:1px solid var(--staff-border);border-radius:9px}.staff-empty{grid-column:1/-1;padding:55px 20px;color:var(--staff-muted);text-align:center;background:#fff;border:1px dashed var(--staff-border);border-radius:17px}.staff-empty i{display:block;margin-bottom:10px;font-size:2rem;opacity:.4}
    @media(max-width:767.98px){.staff-hero{border-radius:20px}.staff-stat{min-height:130px;padding:17px}.staff-form-card .card-body{padding:18px!important}.staff-save-btn{width:100%}.staff-grid{grid-template-columns:1fr;padding:12px}.staff-profile-card{padding:15px}}
}

/* ===== Inline source: admin/manage_point_package.php ===== */
@scope (body.hn-admin-page-manage-point-package) {
.point-manager-wrapper{--point-card:#fff;--point-text:#121826;--point-muted:#7b8498;--point-purple:#7c3aed;--point-red:#e63946;--point-green:#10b981;--point-blue:#3b82f6;--point-gold:#ffb703;--point-border:rgba(15,23,42,.08)}
    .point-hero{position:relative;padding:clamp(23px,4vw,34px);margin-bottom:22px;overflow:hidden;color:#fff;background:radial-gradient(circle at 88% 15%,rgba(255,183,3,.22),transparent 13rem),radial-gradient(circle at 5% 120%,rgba(230,57,70,.24),transparent 17rem),linear-gradient(135deg,#151927,#211a45 62%,#351750);border:1px solid rgba(255,255,255,.09);border-radius:23px;box-shadow:0 22px 50px rgba(35,25,75,.16)}
    .point-hero:after{position:absolute;right:-50px;bottom:-90px;width:230px;height:230px;content:'';border:40px solid rgba(255,255,255,.035);border-radius:50%}.point-kicker{display:inline-flex;gap:7px;align-items:center;padding:7px 11px;margin-bottom:11px;color:#ddd6fe;font-size:.66rem;font-weight:800;letter-spacing:.1em;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.15);border-radius:999px;text-transform:uppercase}.point-hero h2{font-size:clamp(1.35rem,3vw,1.9rem)}
    .point-add-main{position:relative;z-index:1;padding:11px 17px;color:#fff!important;font-weight:800;background:linear-gradient(90deg,var(--point-red),#f05a67);border:0;border-radius:12px;box-shadow:0 10px 22px rgba(230,57,70,.23)}
    .stat-box{height:100%;min-height:140px;padding:21px;background:#fff;border:1px solid var(--point-border);border-radius:19px;box-shadow:0 12px 30px rgba(20,24,40,.05);transition:.25s ease}.stat-box:hover{border-color:rgba(124,58,237,.22);box-shadow:0 18px 36px rgba(42,32,84,.09);transform:translateY(-4px)}.stat-icon{display:grid;width:43px;height:43px;place-items:center;margin-bottom:15px;color:var(--point-purple);background:#f4f0ff;border-radius:13px}.stat-icon.coins{color:var(--point-gold);background:#fffbeb}.stat-icon.money{color:var(--point-green);background:#ecfdf5}.stat-icon.highest{color:var(--point-red);background:#fff0f2}.stat-title{color:var(--point-muted);font-size:.65rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.stat-value{margin-top:5px;color:var(--point-text);font-size:clamp(1.15rem,2.2vw,1.55rem);font-weight:800;letter-spacing:-.03em;overflow-wrap:anywhere}
    .search-container{position:relative;padding:8px;margin-bottom:20px;background:#fff;border:1px solid var(--point-border);border-radius:15px;box-shadow:0 10px 26px rgba(20,24,40,.05)}.search-container input{height:44px;padding-left:43px;background:#fafafe;border:0;border-radius:10px;box-shadow:none!important}.search-container>i{position:absolute;top:22px;left:23px;z-index:2;color:var(--point-muted)}
    .main-table-card{overflow:hidden;background:#fff;border:1px solid var(--point-border);border-radius:20px;box-shadow:0 15px 36px rgba(20,24,40,.06)}.point-table-header{padding:18px 20px;border-bottom:1px solid var(--point-border)}.main-table-card .table thead{color:#697386;font-size:.67rem;letter-spacing:.06em;background:#f8f9fc;text-transform:uppercase}.main-table-card .table>:not(caption)>*>{padding-top:14px;padding-bottom:14px;border-color:var(--point-border)}.main-table-card tbody tr:hover{background:#fbfaff}.point-id{display:inline-block;padding:5px 8px;color:var(--point-purple);font-size:.72rem;background:#f5f3ff;border:1px solid #ede9fe;border-radius:8px}.point-badge{display:inline-flex;align-items:center;padding:7px 10px;color:#1d4ed8;font-size:.72rem;font-weight:800;background:#dbeafe;border-radius:999px;white-space:nowrap}.price-badge{display:inline-flex;padding:7px 10px;color:#047857;font-size:.72rem;font-weight:800;background:#d1fae5;border-radius:999px;white-space:nowrap}.discount-badge{padding:4px 7px;font-size:.62rem;border-radius:999px}.action-btn{display:inline-grid;width:36px;height:36px;place-items:center;padding:0;border-color:var(--point-border);border-radius:10px;transition:.2s ease}.action-btn:hover{transform:translateY(-2px);box-shadow:0 7px 15px rgba(15,23,42,.07)}
    .point-manager-modal .modal-dialog{max-height:calc(100vh - 2rem)}.point-manager-modal .modal-content{max-height:calc(100vh - 2rem);overflow:hidden;background:#fff;border:0;border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.18)}.point-manager-modal .modal-header{padding:18px 20px;color:#fff;background:linear-gradient(135deg,#151927,#211a45)}.point-manager-modal .modal-header .btn-close{filter:invert(1);opacity:.75}.point-manager-modal .modal-body{overflow-y:auto}.point-manager-modal .modal-footer{flex-wrap:nowrap;background:#fff}.point-manager-modal .form-control{min-height:44px;border-color:var(--point-border);border-radius:11px;box-shadow:none}.point-submit{color:#fff!important;background:linear-gradient(90deg,var(--point-purple),#6d28d9)!important;border:0!important;border-radius:12px!important}
    @media(max-width:767.98px){.point-hero{border-radius:20px}.point-add-main{width:100%}.stat-box{min-height:130px;padding:17px}}
}

/* ===== Inline source: admin/manage_rank.php ===== */
@scope (body.hn-admin-page-manage-rank) {
.rank-manager{--rank-card:#fff;--rank-text:#121826;--rank-muted:#7b8498;--rank-purple:#7c3aed;--rank-red:#e63946;--rank-green:#10b981;--rank-gold:#ffb703;--rank-border:rgba(15,23,42,.08)}
.rank-hero{position:relative;padding:clamp(23px,4vw,34px);margin-bottom:22px;overflow:hidden;color:#fff;background:radial-gradient(circle at 88% 15%,rgba(255,183,3,.22),transparent 13rem),radial-gradient(circle at 5% 120%,rgba(230,57,70,.24),transparent 17rem),linear-gradient(135deg,#151927,#211a45 62%,#351750);border:1px solid rgba(255,255,255,.09);border-radius:23px;box-shadow:0 22px 50px rgba(35,25,75,.16)}
.rank-hero:after{position:absolute;right:-50px;bottom:-90px;width:230px;height:230px;content:'';border:40px solid rgba(255,255,255,.035);border-radius:50%}.rank-kicker{display:inline-flex;gap:7px;align-items:center;padding:7px 11px;margin-bottom:11px;color:#ddd6fe;font-size:.66rem;font-weight:800;letter-spacing:.1em;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.15);border-radius:999px;text-transform:uppercase}.rank-hero h2{font-size:clamp(1.35rem,3vw,1.9rem)}
.rank-add-btn{position:relative;z-index:1;padding:11px 17px;color:#fff!important;font-weight:800;background:linear-gradient(90deg,var(--rank-red),#f05a67);border:0;border-radius:12px;box-shadow:0 10px 22px rgba(230,57,70,.23)}
.rank-stat{height:100%;min-height:140px;padding:21px;background:#fff;border:1px solid var(--rank-border);border-radius:19px;box-shadow:0 12px 30px rgba(20,24,40,.05);transition:.25s ease}.rank-stat:hover{border-color:rgba(124,58,237,.22);box-shadow:0 18px 36px rgba(42,32,84,.09);transform:translateY(-4px)}.rank-stat-icon{display:grid;width:43px;height:43px;place-items:center;margin-bottom:15px;color:var(--rank-purple);background:#f4f0ff;border-radius:13px}.rank-stat:nth-child(2) .rank-stat-icon{color:var(--rank-green);background:#ecfdf5}.rank-stat-title{color:var(--rank-muted);font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.rank-stat-value{margin-top:5px;color:var(--rank-text);font-size:clamp(1.25rem,2.4vw,1.65rem);font-weight:800;letter-spacing:-.03em;overflow-wrap:anywhere}
.rank-search{position:relative;padding:8px;margin-bottom:20px;background:#fff;border:1px solid var(--rank-border);border-radius:15px;box-shadow:0 10px 26px rgba(20,24,40,.05)}.rank-search i{position:absolute;top:22px;left:23px;color:var(--rank-muted)}.rank-search input{height:44px;padding-left:43px;background:#fafafe;border:0;border-radius:10px;box-shadow:none!important}
.rank-table-card{overflow:hidden;background:#fff;border:1px solid var(--rank-border);border-radius:20px;box-shadow:0 15px 36px rgba(20,24,40,.06)}.rank-table-header{padding:18px 20px;border-bottom:1px solid var(--rank-border)}.rank-table-card .table thead{color:#697386;font-size:.67rem;letter-spacing:.06em;background:#f8f9fc;text-transform:uppercase}.rank-table-card .table>:not(caption)>*>*{padding-top:14px;padding-bottom:14px;border-color:var(--rank-border)}.rank-table-card tbody tr:hover{background:#fbfaff}.rank-preview-img{width:46px;height:46px;padding:3px;object-fit:contain;background:#fafafe;border:1px solid var(--rank-border);border-radius:12px}.rank-badge{display:inline-flex;padding:6px 9px;font-size:.7rem;font-weight:800;border-radius:999px}.tier-badge{color:#6d28d9;background:#ede9fe}.price-badge{color:#047857;background:#d1fae5}.disc-badge{color:#92400e;background:#fef3c7}.rank-action{display:inline-grid;width:36px;height:36px;place-items:center;padding:0;border-radius:10px}
.rank-preview-img.d-grid{place-items:center}.rank-manager .modal-content{overflow:hidden;border:0;border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.18)}.rank-manager .modal-header{padding:18px 20px;color:#fff;background:linear-gradient(135deg,#151927,#211a45)}.rank-manager .modal-header .btn-close{filter:invert(1);opacity:.75}.rank-manager .form-control,.rank-manager .form-select{min-height:44px;border-color:var(--rank-border);border-radius:11px;box-shadow:none}.img-preview-box{display:grid;width:84px;height:84px;place-items:center;overflow:hidden;background:#fafafe;border:2px dashed #d8dbe5;border-radius:14px}.img-preview-box img{width:100%;height:100%;object-fit:contain}.rank-save-btn{color:#fff!important;background:linear-gradient(90deg,var(--rank-purple),#6d28d9);border:0;border-radius:12px}
@media(max-width:767.98px){.rank-hero{border-radius:20px}.rank-add-btn{width:100%}.rank-stat{min-height:130px;padding:17px}}
}

/* ===== Inline source: admin/pesanan_masuk.php ===== */
@scope (body.hn-admin-page-pesanan-masuk) {
.orders-page {
        --order-card: #fff;
        --order-text: #121826;
        --order-muted: #7b8498;
        --order-purple: #7c3aed;
        --order-red: #e63946;
        --order-green: #10b981;
        --order-blue: #3b82f6;
        --order-gold: #ffb703;
        --order-border: rgba(15, 23, 42, .08);
    }

    .orders-hero {
        position: relative;
        padding: clamp(23px, 4vw, 34px);
        margin-bottom: 22px;
        overflow: hidden;
        color: #fff;
        background:
            radial-gradient(circle at 88% 20%, rgba(255, 183, 3, .22), transparent 13rem),
            radial-gradient(circle at 4% 120%, rgba(230, 57, 70, .23), transparent 17rem),
            linear-gradient(135deg, #151927, #211a45 62%, #351750);
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 23px;
        box-shadow: 0 22px 50px rgba(35, 25, 75, .16);
    }

    .orders-hero::after {
        position: absolute;
        right: -52px;
        bottom: -90px;
        width: 230px;
        height: 230px;
        content: '';
        border: 40px solid rgba(255,255,255,.035);
        border-radius: 50%;
    }

    .orders-kicker {
        display: inline-flex;
        gap: 7px;
        align-items: center;
        padding: 7px 11px;
        margin-bottom: 11px;
        color: #ddd6fe;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .1em;
        background: rgba(124,58,237,.22);
        border: 1px solid rgba(196,181,253,.15);
        border-radius: 999px;
        text-transform: uppercase;
    }

    .orders-hero h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }

    .orders-search {
        padding: 8px;
        margin-bottom: 22px;
        background: #fff;
        border: 1px solid var(--order-border);
        border-radius: 16px;
        box-shadow: 0 12px 28px rgba(20,24,40,.05);
    }

    .orders-search .input-group-text,
    .orders-search .form-control {
        min-height: 44px;
        background: transparent !important;
        border: 0;
        box-shadow: none !important;
    }

    .orders-search .btn { border-radius: 11px !important; }
    .orders-search .btn-dark { background: linear-gradient(90deg, var(--order-purple), #6d28d9); border: 0; }

    .order-stat-card {
        position: relative;
        height: 100%;
        min-height: 142px;
        padding: 21px;
        overflow: hidden;
        background: var(--order-card);
        border: 1px solid var(--order-border);
        border-radius: 19px;
        box-shadow: 0 12px 30px rgba(20,24,40,.05);
        transition: .25s ease;
    }

    .order-stat-card:hover { border-color: rgba(124,58,237,.22); box-shadow: 0 18px 36px rgba(42,32,84,.09); transform: translateY(-4px); }
    .order-stat-icon { display:grid; width:43px; height:43px; place-items:center; margin-bottom:15px; color:var(--order-red); background:#fff0f2; border-radius:13px; }
    .order-stat-icon.wallet { color:var(--order-purple); background:#f4f0ff; }
    .stat-title { color:var(--order-muted); font-size:.67rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .stat-value { margin-top:5px; color:var(--order-text); font-size:clamp(1.25rem,2.5vw,1.65rem); font-weight:800; letter-spacing:-.03em; overflow-wrap:anywhere; }

    .orders-table-card {
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--order-border);
        border-radius: 20px;
        box-shadow: 0 15px 36px rgba(20,24,40,.06);
    }

    .orders-table-header { padding: 18px 20px; background:#fff; border-bottom:1px solid var(--order-border); }
    .orders-table-card .table thead { color:#697386; font-size:.67rem; letter-spacing:.06em; background:#f8f9fc; text-transform:uppercase; }
    .orders-table-card .table > :not(caption) > * > * { padding-top:14px; padding-bottom:14px; border-color:var(--order-border); }
    .orders-table-card .table tbody tr:hover { background:#fbfaff; }
    .invoice-code { color:var(--order-purple); font-size:.78rem; background:#f5f3ff; border:1px solid #ede9fe; border-radius:8px; padding:5px 8px; white-space:nowrap; }

    .action-btn { width:37px; height:37px; color:var(--order-muted); background:#fff; border:1px solid var(--order-border); border-radius:10px; transition:.2s ease; }
    .action-btn:hover { transform:translateY(-2px); box-shadow:0 7px 15px rgba(15,23,42,.08); }
    .btn-approve:hover { color:#fff; background:var(--order-green); border-color:var(--order-green); }
    .btn-reject:hover { color:#fff; background:var(--order-red); border-color:var(--order-red); }
    .action-btn:disabled { cursor:not-allowed; opacity:.35; transform:none; box-shadow:none; }

    .product-badge { display:inline-flex; gap:6px; align-items:center; padding:7px 10px; font-size:.72rem; font-weight:800; border-radius:999px; white-space:nowrap; }
    .product-donation { color:#7e22ce; background:#f3e8ff; }
    .product-rank { color:#92400e; background:#fef3c7; }
    .product-point { color:#1d4ed8; background:#dbeafe; }

    .pagination { gap:5px; }
    .pagination .page-link { min-width:38px; color:var(--order-text); text-align:center; border:1px solid var(--order-border); border-radius:10px!important; }
    .pagination .active .page-link { color:#fff; background:var(--order-purple); border-color:var(--order-purple); }

    #universalModal .modal-content { overflow:hidden; background:#fff; border:0; border-radius:20px; box-shadow:0 24px 70px rgba(15,23,42,.18); }
    #universalModal .modal-header { color:#fff; background:linear-gradient(135deg,#151927,#211a45); border:0; }
    #universalModal .btn-close { filter:invert(1); opacity:.75; }
    #universalModal img { max-height:70vh; object-fit:contain; border-radius:14px!important; }

    @media (max-width: 767.98px) {
        .orders-hero { border-radius:20px; }
        .orders-search .input-group { gap:6px; }
        .orders-search .input-group-text { display:none; }
        .orders-search .form-control { flex:1 0 100%; padding-inline:12px; background:#f8f9fc!important; border-radius:10px!important; }
        .orders-search .btn { flex:1; }
        .order-stat-card { min-height:132px; padding:17px; }
    }
}

/* ===== Inline source: admin/riwayat_pesanan.php ===== */
@scope (body.hn-admin-page-riwayat-pesanan) {
.history-page {
        --history-card:#fff;
        --history-text:#121826;
        --history-muted:#7b8498;
        --history-purple:#7c3aed;
        --history-red:#e63946;
        --history-green:#10b981;
        --history-blue:#3b82f6;
        --history-border:rgba(15,23,42,.08);
    }

    .history-hero {
        position:relative;
        padding:clamp(23px,4vw,34px);
        margin-bottom:22px;
        overflow:hidden;
        color:#fff;
        background:
            radial-gradient(circle at 88% 15%,rgba(255,183,3,.21),transparent 13rem),
            radial-gradient(circle at 5% 120%,rgba(230,57,70,.24),transparent 17rem),
            linear-gradient(135deg,#151927,#211a45 62%,#351750);
        border:1px solid rgba(255,255,255,.09);
        border-radius:23px;
        box-shadow:0 22px 50px rgba(35,25,75,.16);
    }

    .history-hero::after { position:absolute;right:-50px;bottom:-90px;width:230px;height:230px;content:'';border:40px solid rgba(255,255,255,.035);border-radius:50%; }
    .history-kicker { display:inline-flex;gap:7px;align-items:center;padding:7px 11px;margin-bottom:11px;color:#ddd6fe;font-size:.66rem;font-weight:800;letter-spacing:.1em;background:rgba(124,58,237,.22);border:1px solid rgba(196,181,253,.15);border-radius:999px;text-transform:uppercase; }
    .history-hero h2 { font-size:clamp(1.35rem,3vw,1.9rem); }

    .history-stat-card {
        position:relative;
        height:100%;
        min-height:142px;
        padding:21px;
        overflow:hidden;
        background:var(--history-card);
        border:1px solid var(--history-border);
        border-radius:19px;
        box-shadow:0 12px 30px rgba(20,24,40,.05);
        transition:.25s ease;
    }

    .history-stat-card:hover { border-color:rgba(124,58,237,.22);box-shadow:0 18px 36px rgba(42,32,84,.09);transform:translateY(-4px); }
    .history-stat-icon { display:grid;flex:0 0 44px;width:44px;height:44px;place-items:center;font-size:1.05rem;border-radius:13px; }
    .history-stat-icon.green { color:var(--history-green);background:#ecfdf5; }
    .history-stat-icon.blue { color:var(--history-blue);background:#eff6ff; }
    .history-stat-icon.red { color:var(--history-red);background:#fff0f2; }
    .history-stat-label { color:var(--history-muted);font-size:.67rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase; }
    .history-stat-value { margin-top:6px;overflow-wrap:anywhere;color:var(--history-text);font-size:clamp(1.18rem,2.3vw,1.55rem);font-weight:800;letter-spacing:-.03em; }

    .card-history { overflow:hidden;background:var(--history-card);border:1px solid var(--history-border)!important;border-radius:20px!important;box-shadow:0 15px 36px rgba(20,24,40,.06)!important; }
    .history-filter { padding:18px 20px!important;background:#fafafe!important;border-color:var(--history-border)!important; }
    .history-input { min-height:43px;padding:.55rem .8rem;font-size:.82rem;border:1px solid var(--history-border);border-radius:11px;box-shadow:none!important; }
    .history-filter-btn { min-height:43px;color:#fff;background:linear-gradient(90deg,var(--history-purple),#6d28d9);border:0;border-radius:11px!important; }

    .table-history thead { color:#697386;font-size:.67rem;letter-spacing:.06em;background:#f8f9fc;text-transform:uppercase; }
    .table-history > :not(caption) > * > * { padding-top:14px;padding-bottom:14px;border-color:var(--history-border); }
    .table-history tbody tr { transition:background .2s ease; }
    .table-history tbody tr:hover { background:#fbfaff!important; }
    .history-invoice { display:inline-block;padding:5px 8px;color:var(--history-purple);font-size:.75rem;background:#f5f3ff;border:1px solid #ede9fe;border-radius:8px;white-space:nowrap; }
    .item-badge { display:inline-flex;align-items:center;padding:6px 9px;font-size:.7rem;font-weight:700;background:#f8f9fc!important;border-color:var(--history-border)!important;border-radius:999px; }
    .badge-history { padding:.48em .78em;font-size:.7rem;font-weight:800;border-radius:999px; }

    .action-btn { display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--history-muted);background:#fff;border:1px solid var(--history-border);border-radius:10px;transition:.2s ease; }
    .action-btn:hover { color:var(--history-purple);background:#f5f3ff;border-color:#ddd6fe;transform:translateY(-2px);box-shadow:0 7px 15px rgba(15,23,42,.07); }
    .action-btn-del:hover { color:#fff;background:var(--history-red);border-color:var(--history-red); }

    .pagination { gap:5px; }
    .pagination .page-link { min-width:38px;margin:0;color:var(--history-text);font-weight:600;text-align:center;border:1px solid var(--history-border);border-radius:10px!important; }
    .pagination .page-item.active .page-link { color:#fff;background:var(--history-purple);border-color:var(--history-purple); }

    #modalDetailTransaction .modal-content { overflow:hidden;border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.18)!important; }
    #modalDetailTransaction .modal-header { padding:18px 20px;color:#fff;background:linear-gradient(135deg,#151927,#211a45); }
    #modalDetailTransaction .modal-header .text-danger { color:#c4b5fd!important; }
    #modalDetailTransaction .modal-header .btn-close { filter:invert(1);opacity:.75; }

    @media(max-width:767.98px){
        .history-hero{border-radius:20px}
        .history-stat-card{min-height:132px;padding:17px}
        .history-filter{padding:15px!important}
    }
}

/* ===== Inline source: aturan_server.php ===== */
@scope (body.hn-page-aturan-server) {
:scope {
            --bg-dark: #0b0e14;
            --surface-hover: #1c2533;
            --accent-red: #e63946;
            --border-color: rgba(255, 255, 255, 0.08);
            --surface-card: rgba(20, 26, 35, 0.7);
            --text-secondary: #94a3b8;
        }

        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: var(--bg-dark); 
            color: #fff;
        }

        .blog-header {
            padding: 100px 20px 40px;
            background: linear-gradient(180deg, rgba(11, 14, 20, 0.6) 0%, rgba(11, 14, 20, 1) 100%),
                        url('public/img/bg.png') center/cover no-repeat;
            text-align: center;
        }

        /* Card Aturan - Height diset auto agar menyesuaikan konten */
        .rules-card {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
            height: auto; 
            display: flex;
            flex-direction: column;
        }

        .rules-card:hover {
            border-color: var(--accent-red);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .rules-card-header {
            padding: 20px 24px;
            background: rgba(255, 255, 255, 0.02);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .rules-card-body {
            padding: 24px;
            flex-grow: 1;
        }

        .rules-badge {
            font-size: 0.75rem;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            background: rgba(230, 57, 70, 0.15);
            color: var(--accent-red);
            width: fit-content;
        }

        .rule-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .rule-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .rule-number {
            background: rgba(230, 57, 70, 0.2);
            color: var(--accent-red);
            font-weight: 800;
            font-size: 0.8rem;
            width: 26px;
            height: 26px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }

        /* Table Rules Dark Custom */
        .table-dark-custom {
            --bs-table-bg: transparent;
            --bs-table-color: #fff;
            color: #fff;
            border-color: var(--border-color);
        }
        .table-dark-custom thead {
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-secondary);
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .punish-badge {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .sidebar-widget {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 24px;
            height: auto;
        }
}

/* ===== Inline source: blog.php ===== */
@scope (body.hn-page-blog) {
.blog-list-page{min-height:100vh;padding:130px 0 90px}.blog-list-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}.blog-list-head h1{font-size:clamp(2.4rem,5vw,3.8rem);letter-spacing:-.055em;margin:10px 0}.blog-list-head h1 span{color:#e63946}.blog-list-head p{max-width:620px;color:#94a3b8;line-height:1.75;margin:0}.post-count{flex:none;padding:8px 13px;border-radius:999px;background:rgba(230,57,70,.12);color:#ff7b85;font-size:.7rem;font-weight:800}.blog-minimal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.blog-minimal-card{overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:#111721;transition:.25s}.blog-minimal-card:hover{transform:translateY(-4px);border-color:rgba(230,57,70,.55)}.blog-minimal-image{display:block;height:165px;overflow:hidden;background:#0b0f16}.blog-minimal-image img{display:block;width:100%;height:100%;object-fit:cover;transition:.4s}.blog-minimal-card:hover img{transform:scale(1.04)}.blog-minimal-body{padding:18px}.blog-minimal-meta{display:flex;justify-content:space-between;gap:10px;color:#738198;font-size:.62rem}.blog-minimal-meta span{color:#ff7882;font-weight:800;text-transform:uppercase}.blog-minimal-card h2{margin:11px 0 8px;font-size:1rem;line-height:1.4}.blog-minimal-card h2 a{color:#fff;text-decoration:none}.blog-minimal-card p{display:-webkit-box;min-height:57px;margin:0;color:#94a3b8;font-size:.73rem;line-height:1.65;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical}.blog-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07)}.blog-author{display:flex;align-items:center;gap:7px;color:#8795aa;font-size:.65rem}.blog-author img{width:20px;height:20px;border-radius:5px}.blog-read{color:#ff6b76;font-size:.67rem;font-weight:800;text-decoration:none}.blog-state{padding:60px 25px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:#111721;color:#94a3b8;text-align:center}@media(max-width:900px){.blog-minimal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.blog-list-page{padding:110px 0 70px}.blog-list-head{align-items:flex-start;flex-direction:column}.blog-minimal-grid{grid-template-columns:1fr}.blog-minimal-image{height:205px}}
}

/* ===== Inline source: blog_detail.php ===== */
@scope (body.hn-page-blog-detail) {
.detail-page{min-height:100vh;padding:120px 0 90px}.detail-wrap{width:min(850px,calc(100% - 40px));margin:auto}.detail-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;color:#ff7882;font-size:.72rem;font-weight:800;text-decoration:none}.detail-card{padding:34px;border:1px solid rgba(255,255,255,.09);border-radius:24px;background:#111721;box-shadow:0 24px 65px rgba(0,0,0,.28)}.detail-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:#7f8da1;font-size:.68rem}.detail-badge{padding:7px 11px;border-radius:999px;background:rgba(230,57,70,.13);color:#ff7882;font-weight:800;text-transform:uppercase}.detail-author{display:inline-flex;align-items:center;gap:6px}.detail-author img{width:18px;height:18px;border-radius:5px}.detail-card>h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.16;letter-spacing:-.05em;margin:18px 0 25px}.detail-cover{display:block;width:100%;max-height:440px;object-fit:cover;border:1px solid rgba(255,255,255,.08);border-radius:17px}.discord-markdown{margin-top:32px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);color:#c8d0dc;font-size:.92rem;line-height:1.85;word-break:break-word}.discord-markdown p{margin:0 0 1rem}.discord-markdown h1,.discord-markdown h2,.discord-markdown h3,.discord-markdown h4{color:#fff;font-weight:800;line-height:1.3;margin:1.65rem 0 .75rem}.discord-markdown h1{font-size:1.75rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.09)}.discord-markdown h2{font-size:1.4rem}.discord-markdown h3{font-size:1.18rem}.discord-markdown strong{color:#fff}.discord-markdown a{color:#ff7882;text-decoration:underline;overflow-wrap:anywhere}.discord-markdown blockquote{margin:14px 0;padding:10px 16px;border-left:4px solid #e63946;border-radius:0 9px 9px 0;background:rgba(230,57,70,.06);color:#aeb8c7}.discord-markdown blockquote p{margin:0}.discord-markdown pre{overflow-x:auto;margin:16px 0;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:#090d13;color:#f1f5f9;font: .82rem/1.65 Consolas,monospace}.discord-markdown code{padding:2px 6px;border-radius:5px;background:#252c37;color:#f2c8cc;font: .87em Consolas,monospace}.discord-markdown pre code{padding:0;background:transparent;color:inherit}.discord-markdown ul,.discord-markdown ol{padding-left:1.5rem}.discord-markdown img{max-width:100%;height:auto;border-radius:12px}@media(max-width:620px){.detail-page{padding:105px 0 65px}.detail-wrap{width:min(100% - 24px,850px)}.detail-card{padding:22px 18px;border-radius:19px}}
}

/* ===== Inline source: checkout.php ===== */
@scope (body.hn-page-checkout) {
:scope{--bg:#0b0f17;--surface:rgba(20,26,35,.82);--border:rgba(255,255,255,.08);--red:#e63946;--gold:#ffb703;--purple:#7c3aed;--purple-light:#a855f7;--muted:#94a3b8}body{background:var(--bg);color:#f8fafc;font-family:'Plus Jakarta Sans',sans-serif;margin-top:90px}.hero-box{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 10%,rgba(255,183,3,.22),transparent 34%),radial-gradient(circle at 10% 90%,rgba(124,58,237,.2),transparent 30%),linear-gradient(135deg,#151b27,#0e121b);border:1px solid var(--border);border-radius:26px;padding:34px}.hero-box:after{content:'\f521';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:5%;top:50%;transform:translateY(-50%) rotate(-10deg);font-size:9rem;color:rgba(255,255,255,.035)}.glass-box{background:var(--surface);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:22px;padding:30px;height:100%}.summary{background:rgba(255,183,3,.08);border:1px solid rgba(255,183,3,.22);border-radius:15px;padding:18px}.rank-name{color:#67e8f9}.qris-image{width:100%;max-width:280px;background:#fff;border:7px solid #fff;border-radius:17px;box-shadow:0 14px 35px rgba(0,0,0,.45)}.form-label{font-weight:700}.form-control{background:rgba(0,0,0,.28);border:1px solid var(--border);color:#fff;padding:12px}.form-control:focus{background:rgba(0,0,0,.34);border-color:var(--purple-light);color:#fff;box-shadow:0 0 0 .2rem rgba(124,58,237,.13)}.form-control::placeholder{color:#64748b}.btn-pay{background:linear-gradient(90deg,#6d28d9,#9333ea);border:0;color:white;padding:13px;font-weight:800;border-radius:12px}.btn-pay:hover{color:white;transform:translateY(-1px);box-shadow:0 10px 28px rgba(124,58,237,.25)}.btn-cancel{border:1px solid rgba(230,57,70,.55);color:#ff7b85;padding:11px;border-radius:12px}.btn-cancel:hover{background:var(--red);color:#fff}.instruction{color:var(--muted);font-size:.9rem;line-height:1.65}@media(max-width:575px){.hero-box,.glass-box{border-radius:18px;padding:22px}}
}

/* ===== Inline source: checkout_point.php ===== */
@scope (body.hn-page-checkout-point) {
:scope{--bg:#0b0f17;--surface:rgba(20,26,35,.82);--border:rgba(255,255,255,.08);--red:#e63946;--gold:#ffb703;--purple:#7c3aed;--muted:#94a3b8}body{background:var(--bg);color:#f8fafc;font-family:'Plus Jakarta Sans',sans-serif;margin-top:90px}.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 10%,rgba(255,183,3,.25),transparent 34%),radial-gradient(circle at 10% 90%,rgba(124,58,237,.2),transparent 30%),linear-gradient(135deg,#151b27,#0e121b);border:1px solid var(--border);border-radius:26px;padding:34px}.hero:after{content:'\f51e';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:5%;top:50%;transform:translateY(-50%) rotate(-10deg);font-size:9rem;color:rgba(255,255,255,.035)}.glass{background:var(--surface);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:22px;padding:30px;height:100%}.summary{background:rgba(255,183,3,.08);border:1px solid rgba(255,183,3,.22);border-radius:15px;padding:18px}.qris{width:100%;max-width:280px;background:#fff;border:7px solid #fff;border-radius:17px;box-shadow:0 14px 35px rgba(0,0,0,.45)}.form-label{font-weight:700}.form-control{background:rgba(0,0,0,.28);border:1px solid var(--border);color:#fff;padding:12px}.form-control:focus{background:rgba(0,0,0,.34);border-color:#a855f7;color:#fff;box-shadow:0 0 0 .2rem rgba(124,58,237,.13)}.form-control::placeholder{color:#64748b}.btn-pay{background:linear-gradient(90deg,#6d28d9,#9333ea);border:0;color:#fff;padding:13px;font-weight:800;border-radius:12px}.btn-pay:hover{color:#fff;box-shadow:0 10px 28px rgba(124,58,237,.25)}.btn-cancel{border:1px solid rgba(230,57,70,.55);color:#ff7b85;padding:11px;border-radius:12px}.btn-cancel:hover{background:var(--red);color:#fff}.muted{color:var(--muted)}@media(max-width:575px){.hero,.glass{border-radius:18px;padding:22px}}
}

/* ===== Inline source: config/index.php ===== */
@scope (body.hn-page-index) {
body {
            font-family: 'Poppins', sans-serif;
            background: url('public/img/staff/team.png');
            background-attachment: fixed;
            background-color: #0a0a0a;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-x: hidden;
            margin: 0;
            padding: 20px;
        }
        
        @media (max-width:768px){
       .hero{
            background-size:contain;
            background-repeat:no-repeat;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        #hero-section { text-align: center; transition: opacity 0.5s ease; z-index: 2; }
        .big-title { 
            font-size: 6rem; font-weight: 800; color: #ff0707; 
            text-shadow: 0 0 30px rgba(255, 7, 7, 0.6);
            letter-spacing: 5px; margin-bottom: 20px;
        }
        
        .button-wrapper {
            position: relative;
            display: inline-block;
        }

        .hero-character {
            position: absolute;
            width: 140px;

            left: 50%;
            transform: translateX(-50%);

            bottom: 5px; /* bikin duduk di atas tombol */

            z-index: 10;
            pointer-events: none;

            filter: drop-shadow(0 10px 15px rgba(0,0,0,.5));
        }

        .btn-main {
    position: relative;
    z-index: 1;
}

        #login-form-section { 
            display: none; width: 100%; max-width: 400px; 
            animation: fadeIn 0.8s ease-out forwards; z-index: 2; 
        }
        .login-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px; padding: 2.5rem;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
        }

        .form-control { 
            background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); 
            color: white; padding: 12px; border-radius: 10px; font-size: 16px; 
        }
        .form-control:focus { background: rgba(255, 255, 255, 0.15); color: white; border-color: #ff0707; box-shadow: none; }
        .btn-main { background: #ff0707; color: white; padding: 15px 40px; border-radius: 50px; font-weight: bold; border: none; transition: 0.3s; }
        .btn-main:hover { background: #b80000; transform: scale(1.05); color: white; }

        @media (max-width: 768px) {
            .big-title { font-size: 3.5rem; letter-spacing: 2px; }
            .login-card { padding: 1.5rem; }
            .parallax-char { width: 120px; }
        }
}

/* ===== Inline source: donasi.php ===== */
@scope (body.hn-page-donasi) {
:scope {
            --bg-dark: #0b0f17;
            --surface: #141a23;
            --card: rgba(20, 26, 35, .78);
            --border: rgba(255, 255, 255, .08);
            --red: #e63946;
            --gold: #ffb703;
            --purple: #7c3aed;
            --purple-light: #a855f7;
            --text: #f8fafc;
            --muted: #94a3b8;
        }
        body { background: var(--bg-dark); color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; margin-top: 90px; }
        .donation-hero { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 28px; padding: 52px 28px; background: radial-gradient(circle at 80% 20%, rgba(124,58,237,.35), transparent 34%), radial-gradient(circle at 10% 90%, rgba(230,57,70,.18), transparent 30%), linear-gradient(135deg, #151b27, #0e121b); }
        .donation-hero::after { content: "\f004"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 7%; top: 50%; transform: translateY(-50%) rotate(-10deg); font-size: clamp(8rem, 20vw, 16rem); color: rgba(255,255,255,.035); }
        .hero-title { font-size: clamp(2.1rem, 5vw, 3.7rem); font-weight: 800; line-height: 1.08; position: relative; z-index: 1; }
        .hero-title span { color: var(--red); }
        .hero-copy { max-width: 690px; color: var(--muted); position: relative; z-index: 1; }
        .panel { background: var(--card); border: 1px solid var(--border); border-radius: 22px; backdrop-filter: blur(10px); }
        .section-title { font-weight: 800; font-size: 1.35rem; }
        .stat-card { background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 18px; padding: 20px; height: 100%; }
        .stat-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: rgba(124,58,237,.16); color: #c4b5fd; }
        .stat-value { font-size: 1.35rem; font-weight: 800; }
        .nominal-option input { position: absolute; opacity: 0; pointer-events: none; }
        .nominal-option label { display: block; padding: 13px 8px; border: 1px solid var(--border); border-radius: 13px; text-align: center; font-weight: 700; cursor: pointer; background: rgba(255,255,255,.025); transition: .2s ease; }
        .nominal-option input:checked + label { border-color: var(--purple-light); color: white; background: rgba(124,58,237,.2); box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
        .form-control, .input-group-text { color: white; background: rgba(0,0,0,.25); border-color: var(--border); }
        .form-control:focus { color: white; background: rgba(0,0,0,.3); border-color: var(--purple-light); box-shadow: 0 0 0 .2rem rgba(124,58,237,.13); }
        .form-control::placeholder { color: #64748b; }
        .btn-donate { border: 0; background: linear-gradient(90deg, #6d28d9, #9333ea); color: white; padding: 13px; font-weight: 800; border-radius: 13px; }
        .btn-donate:hover { color: white; transform: translateY(-1px); box-shadow: 0 10px 28px rgba(124,58,237,.25); }
        .leader-row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--border); }
        .leader-row:last-child { border-bottom: 0; }
        .rank-number { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; font-weight: 800; background: rgba(255,255,255,.05); }
        .leader-row:nth-child(1) .rank-number { color: #1a1200; background: linear-gradient(135deg, #ffe08a, #ffb703); }
        .leader-row:nth-child(2) .rank-number { color: #222; background: linear-gradient(135deg, #f1f5f9, #94a3b8); }
        .leader-row:nth-child(3) .rank-number { color: #2b1505; background: linear-gradient(135deg, #f4a261, #b66a2c); }
        .avatar { width: 42px; height: 42px; border-radius: 10px; image-rendering: pixelated; }
        .donor-amount { color: var(--gold); font-weight: 800; white-space: nowrap; }
        .period-nav { padding: 4px; background: rgba(0,0,0,.25); border-radius: 12px; }
        .period-nav a { color: var(--muted); text-decoration: none; display: inline-block; padding: 7px 11px; border-radius: 9px; font-size: .8rem; font-weight: 700; }
        .period-nav a.active { color: white; background: var(--purple); }
        .recent-item { padding: 15px 0; border-bottom: 1px solid var(--border); }
        .recent-item:last-child { border-bottom: 0; }
        .message { color: var(--muted); font-size: .88rem; font-style: italic; }
        .empty-state { color: var(--muted); text-align: center; padding: 38px 12px; }
        @media (max-width: 575.98px) { .donation-hero { padding: 36px 20px; border-radius: 20px; } .panel { border-radius: 18px; } }
}

/* ===== Inline source: id.php ===== */
@scope (body.hn-page-id) {
:scope {
            --bg-dark: #0b0e14;
            --surface-dark: #141a23;
            --surface-card: rgba(20, 26, 35, 0.75);
            --border-color: rgba(255, 255, 255, 0.08);
            
            --accent-red: #e63946;
            --accent-gold: #ffb703;
            --accent-purple: #7c3aed;
            --accent-green: #2ec4b6;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
        }

        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: var(--bg-dark); 
            color: var(--text-main);
            overflow-x: hidden;
        }

        /* Hero Portal */
        .hero-portal {
            padding: 120px 0 60px;
            background: linear-gradient(180deg, rgba(11, 14, 20, 0.5) 0%, rgba(11, 14, 20, 1) 100%),
                        url('public/img/bg.png') center/cover no-repeat;
            position: relative;
            border-bottom: 1px solid var(--border-color);
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 16px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            border-radius: 30px;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .dot-online {
            width: 8px;
            height: 8px;
            background-color: var(--accent-green);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--accent-green);
        }

        .dot-offline {
            width: 8px;
            height: 8px;
            background-color: var(--accent-red);
            border-radius: 50%;
        }

        .ip-card-box {
            background: var(--surface-card);
            backdrop-filter: blur(12px);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        }

        .ip-display {
            background: rgba(0, 0, 0, 0.4);
            border: 1px dashed var(--border-color);
            border-radius: 12px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* Shop Hub Section */
        .shop-hub-card {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 32px;
            text-decoration: none;
            color: #fff;
            display: block;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .shop-hub-card:hover {
            border-color: var(--accent-gold);
            transform: translateY(-4px);
            color: #fff;
        }

        .shop-hub-card.point-card:hover {
            border-color: var(--accent-red);
        }

        /* Community Links */
        .hub-link-item {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 20px;
            text-decoration: none;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 16px;
            transition: all 0.3s ease;
        }

        .hub-link-item:hover {
            border-color: var(--accent-purple);
            background: var(--surface-dark);
            color: #fff;
            transform: translateX(4px);
        }

        .hub-icon {
            font-size: 1.8rem;
            width: 50px;
            height: 50px;
            border-radius: 10px;
            background: rgba(255,255,255,0.03);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
}

/* ===== Inline source: includes/donatur.php ===== */
/* ================================================================
       RECENT TRANSACTION TICKER
       ================================================================ */

    .transaction-ticker {
        --ticker-background: #101522;
        --ticker-card: rgba(255, 255, 255, 0.055);
        --ticker-border: rgba(255, 255, 255, 0.09);
        --ticker-text: #94a3b8;
        --ticker-white: #f8fafc;
        --ticker-red: #ef4444;
        --ticker-green: #4ade80;
        --ticker-gold: #fbbf24;

        position: relative;
        display: flex;
        width: 100%;
        min-height: 78px;
        margin: 22px 0;
        overflow: hidden;
        color: var(--ticker-text);
        background:
            radial-gradient(
                circle at 10% 50%,
                rgba(239, 68, 68, 0.12),
                transparent 220px
            ),
            linear-gradient(
                135deg,
                rgba(15, 20, 33, 0.98),
                rgba(18, 24, 39, 0.96)
            );
        border-top: 1px solid var(--ticker-border);
        border-bottom: 1px solid var(--ticker-border);
        box-shadow:
            0 14px 35px rgba(0, 0, 0, 0.18),
            inset 0 1px rgba(255, 255, 255, 0.02);
        isolation: isolate;
    }

    /*
    |--------------------------------------------------------------------------
    | Label sebelah kiri
    |--------------------------------------------------------------------------
    */

    .transaction-ticker-label {
        position: relative;
        z-index: 5;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 11px;
        min-width: 205px;
        padding: 0 24px;
        color: var(--ticker-white);
        background:
            linear-gradient(
                135deg,
                rgba(230, 57, 70, 0.98),
                rgba(190, 24, 93, 0.95)
            );
        box-shadow: 12px 0 28px rgba(0, 0, 0, 0.28);
    }

    .transaction-ticker-label::after {
        position: absolute;
        top: 0;
        right: -19px;
        width: 38px;
        height: 100%;
        content: "";
        background: inherit;
        clip-path: polygon(
            0 0,
            50% 0,
            100% 50%,
            50% 100%,
            0 100%
        );
    }

    .transaction-ticker-label-icon {
        display: grid;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.17);
        border-radius: 12px;
        place-items: center;
    }

    .transaction-ticker-label-text {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
    }

    .transaction-ticker-label-text strong {
        color: #ffffff;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .transaction-ticker-label-text small {
        margin-top: 4px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.66rem;
    }

    /*
    |--------------------------------------------------------------------------
    | Area animasi berjalan
    |--------------------------------------------------------------------------
    */

    .transaction-ticker-viewport {
        position: relative;
        display: flex;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        mask-image: linear-gradient(
            90deg,
            transparent,
            #000000 5%,
            #000000 95%,
            transparent
        );
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent,
            #000000 5%,
            #000000 95%,
            transparent
        );
    }

    .transaction-ticker-track {
        display: flex;
        width: max-content;
        animation: transactionTickerScroll 45s linear infinite;
        will-change: transform;
    }

    .transaction-ticker:hover .transaction-ticker-track {
        animation-play-state: paused;
    }

    .transaction-ticker-group {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: 16px;
        padding: 12px 8px;
    }

    /*
    |--------------------------------------------------------------------------
    | Card transaksi
    |--------------------------------------------------------------------------
    */

    .transaction-item {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        gap: 10px;
        min-height: 54px;
        padding: 6px 15px 6px 7px;
        color: var(--ticker-text);
        font-family: "Poppins", sans-serif;
        font-size: 0.78rem;
        background: var(--ticker-card);
        border: 1px solid var(--ticker-border);
        border-radius: 16px;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.11);
        transition:
            background 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease;
    }

    .transaction-item:hover {
        background: rgba(255, 255, 255, 0.085);
        border-color: rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
    }

    /*
    |--------------------------------------------------------------------------
    | Ikon status berhasil
    |--------------------------------------------------------------------------
    */

    .transaction-status {
        position: relative;
        z-index: 3;
        display: grid;
        flex: 0 0 auto;
        width: 19px;
        height: 19px;
        margin-right: -17px;
        margin-left: -3px;
        color: #ffffff;
        font-size: 0.5rem;
        background: #16a34a;
        border: 2px solid var(--ticker-background);
        border-radius: 50%;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
        place-items: center;
    }

    /*
    |--------------------------------------------------------------------------
    | Avatar head Minecraft
    |--------------------------------------------------------------------------
    */

    .transaction-avatar {
        position: relative;
        display: block;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        padding: 3px;
        overflow: hidden;
        background:
            linear-gradient(
                145deg,
                rgba(239, 68, 68, 0.28),
                rgba(124, 58, 237, 0.22)
            );
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 13px;
        box-shadow:
            0 6px 14px rgba(0, 0, 0, 0.22),
            inset 0 1px rgba(255, 255, 255, 0.08);
    }

    .transaction-avatar::after {
        position: absolute;
        inset: 3px;
        content: "";
        pointer-events: none;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 9px;
    }

    .transaction-avatar img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        image-rendering: pixelated;
        border-radius: 9px;
    }

    /*
    |--------------------------------------------------------------------------
    | Informasi transaksi
    |--------------------------------------------------------------------------
    */

    .transaction-information {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }

    .transaction-username {
        color: var(--ticker-white);
        font-weight: 700;
    }

    .transaction-action {
        color: #7f8ba0;
    }

    .transaction-product {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: #fda4af;
        font-weight: 700;
    }

    .transaction-product i {
        color: var(--ticker-gold);
        font-size: 0.7rem;
    }

    .transaction-type {
        padding: 4px 8px;
        color: #c4b5fd;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        background: rgba(124, 58, 237, 0.15);
        border: 1px solid rgba(167, 139, 250, 0.15);
        border-radius: 999px;
        text-transform: uppercase;
    }

    .transaction-price {
        padding-left: 10px;
        color: var(--ticker-green);
        font-weight: 800;
        border-left: 1px solid rgba(255, 255, 255, 0.09);
        white-space: nowrap;
    }

    /*
    |--------------------------------------------------------------------------
    | Kondisi data transaksi kosong
    |--------------------------------------------------------------------------
    */

    .transaction-empty {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 78px;
        padding: 0 32px;
        color: #94a3b8;
        font-size: 0.82rem;
    }

    .transaction-empty i {
        color: #64748b;
    }

    /*
    |--------------------------------------------------------------------------
    | Animasi
    |--------------------------------------------------------------------------
    */

    @keyframes transactionTickerScroll {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }

    /*
    |--------------------------------------------------------------------------
    | Tampilan mobile
    |--------------------------------------------------------------------------
    */

    @media (max-width: 767.98px) {
        .transaction-ticker {
            min-height: 68px;
            margin: 16px 0;
        }

        .transaction-ticker-label {
            min-width: auto;
            padding: 0 15px;
        }

        .transaction-ticker-label-text {
            display: none;
        }

        .transaction-ticker-label-icon {
            width: 36px;
            height: 36px;
        }

        .transaction-ticker-group {
            gap: 10px;
            padding: 9px 6px;
        }

        .transaction-item {
            min-height: 50px;
            padding-right: 11px;
            font-size: 0.72rem;
            border-radius: 14px;
        }

        .transaction-avatar {
            width: 39px;
            height: 39px;
            border-radius: 11px;
        }

        .transaction-avatar img {
            border-radius: 7px;
        }

        .transaction-avatar::after {
            border-radius: 7px;
        }

        .transaction-type {
            display: none;
        }

        .transaction-price {
            padding-left: 8px;
        }
    }

    /*
    |--------------------------------------------------------------------------
    | Kurangi animasi jika dinonaktifkan dari perangkat pengguna
    |--------------------------------------------------------------------------
    */

    @media (prefers-reduced-motion: reduce) {
        .transaction-ticker-track {
            animation: none;
        }

        .transaction-ticker-viewport {
            overflow-x: auto;
        }
    }

/* ===== Inline source: includes/footer.php ===== */
/* Styling Footer Dark Theme */
    .footer-hellnah {
        background: #0b0e14;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        color: #94a3b8;
        position: relative;
    }

    .brand-title-footer {
        color: #ffffff;
        font-weight: 800;
        font-size: 1.2rem;
        letter-spacing: -0.5px;
    }

    .brand-title-footer span {
        color: var(--accent-red, #e63946);
    }

    /* Link Navigasi Footer */
    .footer-links a {
        color: #94a3b8;
        text-decoration: none;
        margin-left: 20px;
        transition: color 0.3s ease;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .footer-links a:hover { 
        color: var(--accent-red, #e63946); 
    }

    @media (max-width: 767.98px) {
        .footer-links a {
            margin: 0 10px;
        }
    }

    /* Social Media Buttons */
    .social-link {
        color: #94a3b8;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        text-decoration: none;
        font-size: 1.1rem;
    }

    .social-link:hover { 
        background: var(--accent-red, #e63946); 
        color: #ffffff;
        border-color: var(--accent-red, #e63946);
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3);
    }

    /* Styling Tombol Back to Top */
    .back-to-top {
        position: fixed;
        bottom: 25px;
        right: 25px;
        background: var(--accent-red, #e63946);
        color: #ffffff;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1000;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    }

    .back-to-top:hover {
        background: #d62828;
        color: #ffffff;
        transform: translateY(-3px);
    }

    .back-to-top.show {
        opacity: 1;
        visibility: visible;
    }

/* ===== Inline source: includes/header.php ===== */
.navbar-hellnah {
        background: rgba(11, 14, 20, 0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        min-height: 80px;
        transition: all 0.3s ease;
    }

    .logo-hellnah { 
        width: 42px;
        height: 42px;
        object-fit: contain;
    }
    
    .brand-title {
        color: #ffffff;
        font-weight: 800;
        font-size: 1.25rem;
        letter-spacing: -0.5px;
    }

    .brand-title span {
        color: var(--accent-red, #e63946);
    }

    .nav-link-minimal {
        color: #94a3b8 !important;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.2s ease;
        font-size: 0.95rem;
        padding: 8px 18px !important;
        border-radius: 8px;
    }
    
    .nav-link-minimal:hover, 
    .nav-link-minimal.active {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.05);
    }

    .online-badge-nav {
        background: rgba(34, 197, 94, 0.1);
        border: 1px solid rgba(34, 197, 94, 0.2);
        padding: 6px 14px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 8px #22c55e;
    }

    .online-count {
        color: #4ade80;
        font-size: 0.85rem;
        font-weight: 700;
    }
    
    .notification-btn {
        position: relative;
        color: #94a3b8;
        font-size: 18px;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: 0.3s;
    }

    .notification-btn:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .notification-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: var(--accent-red, #e63946);
        color: #ffffff;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: bold;
        box-shadow: 0 0 10px rgba(230, 57, 70, 0.5);
    }

    .user-profile-btn {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        padding: 6px 12px;
        border-radius: 12px;
        transition: 0.3s ease;
    }

    .user-profile-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .hn-saldo-profile {
        color: #fbbf24;
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .saldo-dropdown-card {
        margin: 4px 4px 8px;
        padding: 12px;
        border-radius: 10px;
        color: #f8fafc;
        background: linear-gradient(135deg, rgba(245, 158, 11, .16), rgba(234, 179, 8, .05));
        border: 1px solid rgba(251, 191, 36, .22);
    }

    .dropdown-menu-store {
        background: #141a23 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        padding: 8px !important;
    }

    .dropdown-menu-store .dropdown-item {
        color: #94a3b8;
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 0.875rem;
        transition: 0.2s;
    }

    .dropdown-menu-store .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff;
    }

    .site-navbar {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        transition: transform 0.3s ease, background 0.3s ease;
    }
    
    .navbar-hidden {
        transform: translateY(-100%);
    }

    .navbar-scrolled {
        background: rgba(11, 14, 20, 0.95);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    .navbar-hellnah .navbar-toggler {
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 6px 10px;
    }

    @media (max-width: 991.98px) {
        .navbar-collapse {
            background: #141a23;
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 20px;
            margin-top: 15px;
            border-radius: 16px;
        }

        .navbar-nav {
            gap: 6px;
            margin-bottom: 15px;
        }

        .nav-link-minimal {
            display: block;
            padding: 10px 14px !important;
        }
    }

/* ===== Inline source: includes/header1.php ===== */
.navbar-hellnah { background: rgba(15,18,25,.88); backdrop-filter: blur(10px); border-bottom: 2px solid #fb2424 !important; min-height: 85px; }
    .nav-link-minimal { color: #adb5bd !important; text-decoration: none; font-weight: 500; transition: 0.3s; font-size: 1rem; padding: 0 15px; }
    .nav-link-minimal:hover, .nav-link-minimal.active { color: #ffffff !important; }
    .navbar-toggler-icon { filter: invert(1); }
    .status-dot { width:10px; height:10px; border-radius:50%; background:#00ff66; display:inline-block; margin-right:8px; box-shadow:0 0 10px #00ff66; }
    .online-count { color:#fff; font-size:.9rem; font-weight:600; }
    .notification-btn { position:relative; color:white; font-size:20px; margin-right:20px; text-decoration:none; transition:.3s; cursor:pointer; background:none; border:none; }
    .notification-btn:hover { color:#fb2424; }
    .notification-badge { position:absolute; top:-6px; right:-8px; background:#fb2424; color:white; min-width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:bold; }
    .logo-hellnah { width:45px;height:45px;object-fit:contain;}
    
    .site-navbar { position: fixed; top: 0; width: 100%; z-index: 1000; transition: transform 0.3s ease, background 0.3s ease; }
    .navbar-hidden { transform: translateY(-100%); }
    .navbar-scrolled { background: rgba(10,10,10,0.95); border-bottom: 1px solid #333; }

/* ===== Inline source: includes/header2.php ===== */
.navbar-hellnah {
        background: rgba(11, 14, 20, 0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        min-height: 80px;
        transition: all 0.3s ease;
    }

    .logo-hellnah { 
        width: 42px;
        height: 42px;
        object-fit: contain;
    }
    
    .brand-title {
        color: #ffffff;
        font-weight: 800;
        font-size: 1.25rem;
        letter-spacing: -0.5px;
    }

    .brand-title span {
        color: var(--accent-red, #e63946);
    }

    .nav-link-minimal {
        color: #94a3b8 !important;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.2s ease;
        font-size: 0.95rem;
        padding: 8px 18px !important;
        border-radius: 8px;
    }
    
    .nav-link-minimal:hover, 
    .nav-link-minimal.active {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.05);
    }

    .online-badge-nav {
        background: rgba(34, 197, 94, 0.1);
        border: 1px solid rgba(34, 197, 94, 0.2);
        padding: 6px 14px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 8px #22c55e;
    }

    .online-count {
        color: #4ade80;
        font-size: 0.85rem;
        font-weight: 700;
    }
    
    .notification-btn {
        position: relative;
        color: #94a3b8;
        font-size: 18px;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: 0.3s;
    }

    .notification-btn:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .notification-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: var(--accent-red, #e63946);
        color: #ffffff;
        min-width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: bold;
        box-shadow: 0 0 10px rgba(230, 57, 70, 0.5);
    }

    .user-profile-btn {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        padding: 6px 12px;
        border-radius: 12px;
        transition: 0.3s ease;
    }

    .user-profile-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .hn-saldo-profile {
        color: #fbbf24;
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .saldo-dropdown-card {
        margin: 4px 4px 8px;
        padding: 12px;
        border-radius: 10px;
        color: #f8fafc;
        background: linear-gradient(135deg, rgba(245, 158, 11, .16), rgba(234, 179, 8, .05));
        border: 1px solid rgba(251, 191, 36, .22);
    }

    .dropdown-menu-store {
        background: #141a23 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        padding: 8px !important;
    }

    .dropdown-menu-store .dropdown-item {
        color: #94a3b8;
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 0.875rem;
        transition: 0.2s;
    }

    .dropdown-menu-store .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff;
    }

    .site-navbar {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        transition: transform 0.3s ease, background 0.3s ease;
    }
    
    .navbar-hidden {
        transform: translateY(-100%);
    }

    .navbar-scrolled {
        background: rgba(11, 14, 20, 0.95);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    .navbar-hellnah .navbar-toggler {
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 6px 10px;
    }

    @media (max-width: 991.98px) {
        .navbar-collapse {
            background: #141a23;
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 20px;
            margin-top: 15px;
            border-radius: 16px;
        }

        .navbar-nav {
            gap: 6px;
            margin-bottom: 15px;
        }

        .nav-link-minimal {
            display: block;
            padding: 10px 14px !important;
        }
    }

/* ===== Inline source: includes/top_buyer.php ===== */
.hnb-component{--hnb-card:rgba(20,26,35,.92);--hnb-border:rgba(255,255,255,.09);--hnb-muted:#94a3b8;--hnb-gold:#ffb703;position:relative;width:100%;margin:28px 0;color:#f8fafc;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}
    .hnb-separator{height:1px;margin-bottom:28px;background:linear-gradient(90deg,transparent,rgba(255,183,3,.5),transparent)}
    .hnb-kicker{display:inline-flex;gap:8px;align-items:center;margin-bottom:11px;color:#fcd34d;font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
    .hnb-card{position:relative;overflow:hidden;background:radial-gradient(circle at 100% 0,rgba(255,183,3,.13),transparent 23rem),var(--hnb-card);border:1px solid rgba(255,183,3,.22);border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.22)}
    .hnb-card:after{position:absolute;right:-26px;bottom:-45px;content:'\f521';color:rgba(255,183,3,.035);font:900 11rem/1 'Font Awesome 6 Free';transform:rotate(-12deg);pointer-events:none}
    .hnb-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:21px 23px;border-bottom:1px solid var(--hnb-border)}
    .hnb-title{display:flex;gap:10px;align-items:center;margin:0;font-size:1.2rem;font-weight:800}.hnb-title i{color:var(--hnb-gold)}
    .hnb-description{margin-top:4px;color:var(--hnb-muted);font-size:.76rem}
    .hnb-period{display:flex;flex-shrink:0;gap:3px;padding:4px;background:#0c121b;border:1px solid var(--hnb-border);border-radius:12px}
    .hnb-period a{padding:8px 12px;color:var(--hnb-muted);font-size:.72rem;font-weight:800;text-decoration:none;border-radius:8px;transition:.2s}.hnb-period a:hover{color:#fff}.hnb-period a.active{color:#fff;background:linear-gradient(90deg,#6d28d9,#9333ea);box-shadow:0 6px 16px rgba(124,58,237,.2)}
    .hnb-champion{position:relative;z-index:1;display:grid;grid-template-columns:minmax(105px,38%) minmax(0,1fr);gap:12px;align-items:center;min-height:184px;padding:22px 22px 16px;background:radial-gradient(circle at 18% 50%,rgba(255,183,3,.12),transparent 11rem)}.hnb-champion-skin{display:block;width:auto;height:150px;max-width:100%;margin:auto;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 14px 15px rgba(0,0,0,.42))}.hnb-champion-info{min-width:0}.hnb-champion-rank{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;color:#fcd34d;font-size:.7rem;font-weight:800;letter-spacing:.08em}.hnb-champion-name{overflow:hidden;font-size:1.05rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.hnb-champion-value{margin-top:5px;color:#fcd34d;font-size:.83rem;font-weight:800}.hnb-champion-orders{margin-top:4px;color:var(--hnb-muted);font-size:.65rem}
    .hnb-list-label{position:relative;z-index:1;padding:12px 20px 4px;color:var(--hnb-muted);font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-top:1px solid var(--hnb-border)}
    .hnb-list{position:relative;z-index:1;padding:9px}.hnb-row{display:grid;grid-template-columns:40px 42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border-radius:13px}.hnb-row+.hnb-row{border-top:1px solid rgba(255,255,255,.05)}.hnb-row:hover{background:rgba(255,183,3,.035)}
    .hnb-rank{display:grid;width:33px;height:33px;place-items:center;color:var(--hnb-muted);font-size:.72rem;font-weight:800;background:rgba(255,255,255,.05);border-radius:10px}.hnb-row:nth-child(1) .hnb-rank{color:#172033;background:linear-gradient(135deg,#f8fafc,#94a3b8)}.hnb-row:nth-child(2) .hnb-rank{color:#2b1607;background:linear-gradient(135deg,#f1b27a,#b96a36)}
    .hnb-avatar{width:40px;height:40px;object-fit:cover;image-rendering:pixelated;border:1px solid rgba(255,255,255,.13);border-radius:10px}.hnb-player{min-width:0}.hnb-name{overflow:hidden;font-size:.88rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.hnb-orders{margin-top:2px;color:var(--hnb-muted);font-size:.68rem;font-weight:600}.hnb-value{color:#fcd34d;font-size:.86rem;font-weight:800;white-space:nowrap}
    .hnb-empty{position:relative;z-index:1;padding:58px 20px;color:var(--hnb-muted);text-align:center}.hnb-empty i{display:block;margin-bottom:15px;color:var(--hnb-gold);font-size:2rem}.hnb-error{position:relative;z-index:1;margin:15px 20px 20px;padding:12px 14px;color:#fcd34d;font-size:.78rem;background:rgba(255,183,3,.08);border:1px solid rgba(255,183,3,.18);border-radius:12px}
    @media(max-width:575.98px){.hnb-component{margin:22px 0}.hnb-separator{margin-bottom:22px}.hnb-card{border-radius:19px}.hnb-head{align-items:flex-start;flex-direction:column;padding:17px}.hnb-period{width:100%}.hnb-period a{flex:1;text-align:center}.hnb-champion{grid-template-columns:105px minmax(0,1fr);min-height:155px;padding:17px 12px 13px}.hnb-champion-skin{height:125px}.hnb-champion-name{font-size:.92rem}.hnb-list{padding:7px}.hnb-row{grid-template-columns:32px 35px minmax(0,1fr);gap:8px;padding:11px 8px}.hnb-avatar{width:34px;height:34px}.hnb-value{grid-column:3;margin-top:-5px;font-size:.75rem}.hnb-orders{font-size:.63rem}.hnb-rank{width:29px;height:29px;font-size:.65rem}}

/* ===== Inline source: includes/top_donatur.php ===== */
.hnd-component{--hnd-card:rgba(20,26,35,.92);--hnd-border:rgba(255,255,255,.09);--hnd-muted:#94a3b8;--hnd-gold:#ffb703;position:relative;width:100%;margin:28px 0;color:#f8fafc;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}
    .hnd-separator{height:1px;margin-bottom:28px;background:linear-gradient(90deg,transparent,rgba(230,57,70,.48),transparent)}
    .hnd-kicker{display:inline-flex;gap:8px;align-items:center;margin-bottom:11px;color:#ff8b94;font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
    .hnd-card{position:relative;overflow:hidden;height:100%;background:radial-gradient(circle at 100% 0,rgba(230,57,70,.14),transparent 23rem),var(--hnd-card);border:1px solid rgba(230,57,70,.24);border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.22)}
    .hnd-card:after{position:absolute;right:-28px;bottom:-48px;content:'\f004';color:rgba(230,57,70,.04);font:900 11rem/1 'Font Awesome 6 Free';transform:rotate(-12deg);pointer-events:none}
    .hnd-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:21px 23px;border-bottom:1px solid var(--hnd-border)}
    .hnd-title{display:flex;gap:10px;align-items:center;margin:0;font-size:1.2rem;font-weight:800}.hnd-title i{color:#ff6571}.hnd-description{margin-top:4px;color:var(--hnd-muted);font-size:.76rem}
    .hnd-period{display:flex;flex-shrink:0;gap:3px;padding:4px;background:#0c121b;border:1px solid var(--hnd-border);border-radius:12px}.hnd-period a{padding:8px 12px;color:var(--hnd-muted);font-size:.72rem;font-weight:800;text-decoration:none;border-radius:8px;transition:.2s}.hnd-period a:hover{color:#fff}.hnd-period a.active{color:#fff;background:linear-gradient(90deg,#d62839,#e63946);box-shadow:0 6px 16px rgba(230,57,70,.22)}
    .hnd-podium{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;align-items:end;padding:38px 12px 22px}.hnd-podium-item{position:relative;min-width:0;padding:15px 5px 17px;text-align:center;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:17px}.hnd-podium-item.hnd-first{padding-top:20px;background:linear-gradient(180deg,rgba(255,183,3,.11),rgba(255,255,255,.025));border-color:rgba(255,183,3,.34);transform:translateY(-16px)}
    .hnd-podium-rank{position:absolute;top:8px;left:8px;display:grid;width:27px;height:27px;place-items:center;color:var(--hnd-muted);font-size:.63rem;font-weight:800;background:rgba(255,255,255,.07);border-radius:8px}.hnd-first .hnd-podium-rank{color:#251900;background:linear-gradient(135deg,#ffe69b,#ffb703)}.hnd-podium-item:nth-child(1) .hnd-podium-rank{color:#172033;background:linear-gradient(135deg,#f8fafc,#94a3b8)}.hnd-podium-item:nth-child(3) .hnd-podium-rank{color:#2b1607;background:linear-gradient(135deg,#f1b27a,#b96a36)}
    .hnd-podium-skin{display:block;width:auto;height:118px;max-width:100%;margin:0 auto 9px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 13px 14px rgba(0,0,0,.42))}.hnd-first .hnd-podium-skin{height:148px}.hnd-podium-name{overflow:hidden;font-size:.75rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.hnd-podium-value{margin-top:4px;color:var(--hnd-gold);font-size:.67rem;font-weight:800;white-space:nowrap}.hnd-podium-count{margin-top:3px;color:var(--hnd-muted);font-size:.57rem}
    .hnd-champion{position:relative;z-index:1;display:grid;grid-template-columns:minmax(105px,38%) minmax(0,1fr);gap:12px;align-items:center;min-height:184px;padding:22px 22px 16px;background:radial-gradient(circle at 18% 50%,rgba(230,57,70,.13),transparent 11rem)}.hnd-champion-skin{display:block;width:auto;height:150px;max-width:100%;margin:auto;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 14px 15px rgba(0,0,0,.42))}.hnd-champion-info{min-width:0}.hnd-champion-rank{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;color:#ff8b94;font-size:.7rem;font-weight:800;letter-spacing:.08em}.hnd-champion-name{overflow:hidden;font-size:1.05rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.hnd-champion-value{margin-top:5px;color:var(--hnd-gold);font-size:.83rem;font-weight:800}.hnd-champion-count{margin-top:4px;color:var(--hnd-muted);font-size:.65rem}
    .hnd-list-label{position:relative;z-index:1;padding:12px 20px 4px;color:var(--hnd-muted);font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-top:1px solid var(--hnd-border)}
    .hnd-list{position:relative;z-index:1;padding:9px}.hnd-row{display:grid;grid-template-columns:40px 42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border-radius:13px}.hnd-row+.hnd-row{border-top:1px solid rgba(255,255,255,.05)}.hnd-row:hover{background:rgba(230,57,70,.04)}
    .hnd-rank{display:grid;width:33px;height:33px;place-items:center;color:var(--hnd-muted);font-size:.72rem;font-weight:800;background:rgba(255,255,255,.05);border-radius:10px}.hnd-row:nth-child(1) .hnd-rank{color:#172033;background:linear-gradient(135deg,#f8fafc,#94a3b8)}.hnd-row:nth-child(2) .hnd-rank{color:#2b1607;background:linear-gradient(135deg,#f1b27a,#b96a36)}
    .hnd-avatar{width:40px;height:40px;object-fit:cover;image-rendering:pixelated;border:1px solid rgba(255,255,255,.13);border-radius:10px}.hnd-player{min-width:0}.hnd-name{overflow:hidden;font-size:.88rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.hnd-count{margin-top:2px;color:var(--hnd-muted);font-size:.68rem;font-weight:600}.hnd-value{color:#fcd34d;font-size:.86rem;font-weight:800;white-space:nowrap}
    .hnd-empty{position:relative;z-index:1;padding:58px 20px;color:var(--hnd-muted);text-align:center}.hnd-empty i{display:block;margin-bottom:15px;color:#ff6571;font-size:2rem}.hnd-error{position:relative;z-index:1;margin:15px 20px 20px;padding:12px 14px;color:#fca5a5;font-size:.78rem;background:rgba(230,57,70,.08);border:1px solid rgba(230,57,70,.18);border-radius:12px}
    @media(max-width:575.98px){.hnd-component{margin:22px 0}.hnd-separator{margin-bottom:22px}.hnd-card{border-radius:19px}.hnd-head{align-items:flex-start;flex-direction:column;padding:17px}.hnd-period{width:100%}.hnd-period a{flex:1;text-align:center}.hnd-podium{gap:5px;padding:31px 7px 16px}.hnd-podium-item{padding:12px 3px 14px;border-radius:13px}.hnd-podium-item.hnd-first{padding-top:15px;transform:translateY(-9px)}.hnd-podium-skin{height:88px}.hnd-first .hnd-podium-skin{height:112px}.hnd-podium-rank{top:6px;left:6px;width:23px;height:23px;font-size:.56rem}.hnd-podium-name{font-size:.65rem}.hnd-podium-value{font-size:.56rem}.hnd-podium-count{display:none}}

/* ===== Inline source: index.php ===== */
@scope (body.hn-page-index) {
:scope {
            --bg-dark: #0b0e14;
            --surface-hover: #1c2533;
            --accent-red: #e63946;
            --accent-red-hover: #c12733;
            --accent-gold: #ffb703;
            --text-primary: #ffffff;
            --text-secondary: #94a3b8;
            --border-color: rgba(255, 255, 255, 0.08);
            
            --surface-dark: #141a23;
            --surface-card: rgba(20, 26, 35, 0.7);
            --accent-purple: #7C3AED;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
        }

        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            margin: 0; 
            background-color: var(--bg-dark); 
            color: var(--text-primary);
            overflow-x: hidden;
        }

        /* --- HERO SECTION --- */
        .hero {
            width: 100%;
            min-height: 85vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 100px 20px 60px;
            background: linear-gradient(180deg, rgba(11, 14, 20, 0.4) 0%, rgba(11, 14, 20, 1) 100%),
                        url('public/img/bg.png') center/cover no-repeat;
            position: relative;
        }

        .hero-title {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: 800;
            letter-spacing: -1px;
            line-height: 1.1;
        }

        .hero-title span {
            color: var(--accent-red);
            text-shadow: 0 0 20px rgba(230, 57, 70, 0.4);
        }

        .badge-online {
            background: rgba(34, 197, 94, 0.1);
            color: #4ade80;
            border: 1px solid rgba(34, 197, 94, 0.2);
            padding: 6px 16px;
            border-radius: 30px;
            font-size: 0.875rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .pulse-dot {
            width: 8px;
            height: 8px;
            background-color: #22c55e;
            border-radius: 50%;
            box-shadow: 0 0 10px #22c55e;
            animation: pulse 1.8s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
        }

        /* --- BUTTONS --- */
        .btn-store-primary {
            background: var(--accent-red);
            color: #fff;
            font-weight: 700;
            padding: 14px 28px;
            border-radius: 10px;
            border: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(230, 57, 70, 0.3);
        }

        .btn-store-primary:hover {
            background: var(--accent-red-hover);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(230, 57, 70, 0.4);
        }

        .btn-store-outline {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            font-weight: 600;
            padding: 14px 28px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .btn-store-outline:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-color: rgba(255, 255, 255, 0.2);
        }

        /* --- STATS SECTION --- */
        .stats-wrapper {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px;
            margin-top: -50px;
            position: relative;
            z-index: 5;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }

        .stat-card {
            text-align: center;
            padding: 10px;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: 800;
            color: #fff;
        }

        .stat-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }

        /* --- CATEGORIES & STORE SECTION --- */
        .section-title {
            font-size: 1.75rem;
            font-weight: 800;
            margin-bottom: 8px;
            text-align: center;
            color: #fff;
            letter-spacing: 1px;
        }

        .category-card {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 30px 24px;
            text-align: center;
            transition: all 0.3s ease;
            text-decoration: none;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
        }

        .category-card:hover {
            background: var(--surface-hover);
            border-color: var(--accent-red);
            transform: translateY(-5px);
            color: #fff;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .category-icon {
            width: 70px;
            height: 70px;
            border-radius: 14px;
            background: rgba(230, 57, 70, 0.1);
            color: var(--accent-red);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            margin-bottom: 20px;
            transition: 0.3s ease;
        }

        .category-card:hover .category-icon {
            background: var(--accent-red);
            color: #fff;
        }

        /* --- ADVANCED GALLERY STYLES --- */
        .gallery-wrapper {
            background: #0f141d;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
        }

        .gallery-main-display {
            position: relative;
            width: 100%;
            height: 480px;
            border-radius: 8px;
            overflow: hidden;
            background: #000;
            user-select: none;
            -webkit-user-select: none;
        }

        .gallery-main-display img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.3s ease;
        }

        .gallery-overlay-top {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 16px 20px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        .gallery-photo-title {
            color: #fff;
            font-weight: 700;
            font-size: 1.1rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }

        .gallery-fullscreen-btn {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.2s;
        }

        .gallery-fullscreen-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .gallery-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 42px;
            height: 42px;
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.2s ease;
        }

        .gallery-arrow:hover {
            background: var(--accent-red);
            border-color: var(--accent-red);
        }

        .gallery-arrow-prev { left: 16px; }
        .gallery-arrow-next { right: 16px; }

        .gallery-overlay-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px 20px;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            z-index: 10;
        }

        .player-uploader-badge {
            background: rgba(18, 23, 32, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            padding: 6px 14px 6px 8px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .player-uploader-badge img {
            width: 28px;
            height: 28px;
            border-radius: 6px;
        }

        .uploader-info {
            display: flex;
            flex-direction: column;
            line-height: 1.1;
        }

        .uploader-info span {
            font-size: 0.65rem;
            color: var(--text-secondary);
            letter-spacing: 0.5px;
        }

        .uploader-info strong {
            font-size: 0.85rem;
            color: #fff;
        }

        .gallery-dots {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .gallery-thumbs-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #0b0e14;
            padding: 8px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }

        .thumb-nav-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-secondary);
            width: 24px;
            height: 60px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.2s;
        }

        .thumb-nav-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        .gallery-thumbs-scroll {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            scroll-behavior: smooth;
            scrollbar-width: none;
        }

        .gallery-thumbs-scroll::-webkit-scrollbar {
            display: none;
        }

        .gallery-thumb-item {
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .gallery-full-link {
            color: var(--text-secondary);
            font-size: 0.8rem;
            font-weight: 700;
            text-decoration: none;
            letter-spacing: 1px;
            transition: 0.2s;
        }

        .gallery-full-link:hover {
            color: #fff;
        }

        /* --- LIGHTBOX FULLSCREEN KHUSUS MOBILE --- */
        .mobile-lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.95);
            z-index: 99999;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .mobile-lightbox.active {
            display: flex;
        }
        .mobile-lightbox img {
            max-width: 95%;
            max-height: 80vh;
            object-fit: contain;
            border-radius: 8px;
        }
        .mobile-lightbox-close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #fff;
            font-size: 2rem;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 100000;
        }
        .mobile-lightbox-title {
            color: #fff;
            margin-top: 15px;
            font-weight: 600;
            text-align: center;
            padding: 0 20px;
        }

        /* --- MODAL STYLING --- */
        .modal-content-store {
            background: #121720;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            color: #fff;
            overflow: hidden;
        }

        .modal-header-store {
            border-bottom: 1px solid var(--border-color);
            padding: 20px 24px;
        }

        .platform-tab-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            border-radius: 10px;
            padding: 12px;
            font-weight: 600;
            width: 100%;
            transition: 0.3s;
        }

        .platform-tab-btn.active {
            background: var(--accent-red);
            border-color: var(--accent-red);
            color: #fff;
        }

        .form-control-store {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-color);
            color: #fff;
            border-radius: 10px;
            padding: 14px 16px;
        }

        .form-control-store:focus {
            background: rgba(255, 255, 255, 0.07);
            border-color: var(--accent-red);
            color: #fff;
            box-shadow: none;
        }

        /* --- COMMUNITY LINK CARDS --- */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: var(--accent-red);
            color: white;
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: none;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            z-index: 1000;
            box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
            transition: 0.3s;
        }

        .back-to-top:hover { background: var(--accent-red-hover); color: white; transform: translateY(-3px); }
        
        .link-section {
            padding: 80px 20px;
            background-image: linear-gradient(180deg, rgba(11, 15, 23, 0.9) 0%, rgba(11, 15, 23, 0.98) 100%), url('public/img/bg.png');
            background-size: cover;
            border-bottom: 1px solid var(--border-color);
        }
        .link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; max-width: 1000px; margin: auto; }
        .link-item { 
            background: var(--surface-card); 
            backdrop-filter: blur(8px);
            padding: 25px; 
            color: #fff; 
            text-decoration: none; 
            border: 1px solid var(--border-color); 
            border-radius: 10px;
            display: flex; 
            flex-direction: column; 
            justify-content: space-between; 
            transition: all 0.3s ease; 
        }
        .link-item:hover { border-color: var(--accent-purple); transform: translateY(-5px); background: var(--surface-dark); }
        .link-item h4 { color: #fff; margin-top: 10px; font-weight: 700; font-size: 1.1rem; }
        .link-item p { color: var(--text-muted); font-size: 0.88rem; margin: 0; }
        .card-footer-link { margin-top: 20px; font-size: 0.8rem; color: var(--accent-purple); text-transform: uppercase; font-weight: 700; display: flex; align-items: center; gap: 6px; }

        /* --- VISUAL UPGRADE: NEW ERA --- */
        html { scroll-behavior: smooth; }

        body {
            background:
                radial-gradient(circle at 12% 8%, rgba(230, 57, 70, 0.12), transparent 26rem),
                radial-gradient(circle at 88% 35%, rgba(124, 58, 237, 0.1), transparent 28rem),
                var(--bg-dark);
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: -1;
            opacity: 0.24;
            background-image:
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: linear-gradient(to bottom, #000, transparent 75%);
        }

        .hero {
            min-height: 92vh;
            isolation: isolate;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(8, 11, 17, .96) 0%, rgba(8, 11, 17, .72) 48%, rgba(8, 11, 17, .9) 100%),
                linear-gradient(180deg, transparent 55%, var(--bg-dark) 100%),
                url('public/img/bg.png') center/cover no-repeat;
        }

        .hero::before,
        .hero::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            filter: blur(2px);
            pointer-events: none;
            z-index: -1;
        }

        .hero::before {
            width: 34rem;
            height: 34rem;
            top: 8%;
            left: 50%;
            transform: translateX(-50%);
            background: radial-gradient(circle, rgba(230, 57, 70, .2), transparent 65%);
        }

        .hero::after {
            width: 16rem;
            height: 16rem;
            right: 6%;
            bottom: 15%;
            background: radial-gradient(circle, rgba(124, 58, 237, .16), transparent 68%);
        }

        .hero-content { max-width: 900px; }

        .hero-kicker,
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #fca5a5;
            font-size: .76rem;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

        .hero-title {
            font-size: clamp(2.65rem, 7vw, 5.8rem);
            letter-spacing: -.055em;
            text-wrap: balance;
        }

        .hero-title span {
            background: linear-gradient(105deg, #ff4353 5%, #ff875f 48%, #ffcf67 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: none;
        }

        .hero-description {
            max-width: 680px;
            color: #b8c2d4;
            font-size: clamp(.96rem, 2vw, 1.12rem);
            line-height: 1.85;
        }

        .badge-online,
        .badge-offline {
            backdrop-filter: blur(12px);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
        }

        .badge-offline {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 16px;
            border-radius: 999px;
            color: #fca5a5;
            background: rgba(239, 68, 68, .1);
            border: 1px solid rgba(239, 68, 68, .24);
            font-size: .8rem;
            font-weight: 700;
        }

        .badge-offline .pulse-dot {
            background: #ef4444;
            box-shadow: 0 0 12px rgba(239,68,68,.8);
            animation: none;
        }

        .hero-actions .btn {
            min-width: 154px;
            min-height: 52px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .hero-trust {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 18px 28px;
            color: #8090a5;
            font-size: .78rem;
            font-weight: 600;
        }

        .hero-trust i { color: #4ade80; }

        .stats-wrapper {
            margin-top: -58px;
            border-radius: 22px;
            padding: 12px;
            background: rgba(16, 22, 31, .78);
            backdrop-filter: blur(18px);
            box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
        }

        .stat-card {
            min-height: 116px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            border-radius: 15px;
            transition: background .25s ease, transform .25s ease;
        }

        .stat-card:hover { background: rgba(255,255,255,.035); transform: translateY(-2px); }

        .stat-icon {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            border-radius: 14px;
            color: #ff6572;
            background: rgba(230,57,70,.12);
            border: 1px solid rgba(230,57,70,.2);
        }

        .stat-copy { text-align: left; }
        .stat-value { line-height: 1.05; font-size: clamp(1.55rem, 3vw, 2.1rem); }

        .section-heading { max-width: 680px; margin-inline: auto; }
        .section-title { font-size: clamp(1.65rem, 4vw, 2.25rem); letter-spacing: -.035em; }

        .category-card {
            position: relative;
            overflow: hidden;
            border-radius: 22px;
            padding: 34px 30px;
            text-align: left;
            align-items: flex-start;
            background: linear-gradient(145deg, rgba(25,32,44,.86), rgba(14,19,27,.76));
            backdrop-filter: blur(14px);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
        }

        .category-card::after {
            content: '';
            position: absolute;
            width: 180px;
            height: 180px;
            top: -95px;
            right: -70px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(230,57,70,.2), transparent 70%);
            transition: transform .35s ease;
        }

        .category-card.gold-card::after { background: radial-gradient(circle, rgba(255,183,3,.2), transparent 70%); }
        .category-card:hover::after { transform: scale(1.35); }
        .category-icon { border-radius: 18px; }

        .category-link-label {
            margin-top: 22px;
            color: #ff7a84;
            font-size: .76rem;
            font-weight: 800;
            letter-spacing: .09em;
        }

        .gold-card .category-link-label { color: #ffd166; }

        .gallery-wrapper,
        .modal-content-store,
        .link-item {
            border-color: rgba(255,255,255,.1);
            box-shadow: 0 18px 55px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
        }

        .gallery-wrapper { border-radius: 22px; padding: 12px; background: rgba(15,20,29,.82); }
        .gallery-main-display { border-radius: 15px; }
        .supporter-grid { align-items: stretch; }
        .supporter-column { display: flex; }
        .supporter-column .hnd-component,
        .supporter-column .hnb-component { width: 100%; margin: 0; }
        .supporter-column .hnd-separator,
        .supporter-column .hnd-kicker,
        .supporter-column .hnb-separator,
        .supporter-column .hnb-kicker { display: none; }
        .supporter-column .hnd-card,
        .supporter-column .hnb-card { height: 100%; }
        .link-section { border-top: 1px solid var(--border-color); }
        .link-item { border-radius: 18px; }

        .blog-card-image { transition: transform .45s ease; }
        .category-card:hover .blog-card-image { transform: scale(1.045); }

        :focus-visible {
            outline: 3px solid rgba(255, 105, 115, .75);
            outline-offset: 3px;
        }

        @media (max-width: 767.98px) {
            .hero { min-height: auto; padding: 120px 16px 105px; }
            .hero-actions { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px !important; }
            .hero-actions .btn { min-width: 0; padding: 12px 10px; font-size: .78rem; }
            .hero-actions .btn:first-child { grid-column: 1 / -1; }
            .stats-wrapper { margin-inline: 8px; padding: 8px; }
            .stats-wrapper .border-start { border-left: 0 !important; }
            .stats-wrapper .border-end { border-right: 0 !important; }
            .stat-card { min-height: 90px; justify-content: flex-start; padding-inline: 18px; }
            .category-card { padding: 26px 22px; }
            .gallery-main-display, #mainGalleryImage { height: 320px !important; }
            .gallery-overlay-bottom { align-items: center !important; }
            .gallery-dots { max-width: 42%; overflow: hidden; }
            .supporter-column { display: block; }
            .back-to-top { right: 18px; bottom: 18px; width: 44px; height: 44px; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
        }

        /* --- SINGLE-SECTION WEBSTORE LANDING --- */
        .webstore-home {
            min-height: calc(100vh - 80px);
            display: flex;
            align-items: center;
            padding: 120px 20px 80px;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            background:
                linear-gradient(90deg, rgba(8, 11, 17, .96), rgba(8, 11, 17, .76), rgba(8, 11, 17, .94)),
                url('public/img/bg.png') center/cover no-repeat;
        }

        .webstore-home::before {
            content: '';
            position: absolute;
            width: 42rem;
            height: 42rem;
            top: -18rem;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(230, 57, 70, .22), transparent 68%);
            z-index: -1;
            pointer-events: none;
        }

        .store-shell {
            max-width: 1080px;
            margin: 0 auto;
        }

        .store-intro {
            max-width: 760px;
            margin: 0 auto 42px;
            text-align: center;
        }

        .store-status-row {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 22px;
        }

        .store-mini-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 13px;
            border-radius: 999px;
            color: #b8c2d4;
            background: rgba(17, 23, 33, .76);
            border: 1px solid var(--border-color);
            backdrop-filter: blur(12px);
            font-size: .76rem;
            font-weight: 700;
        }

        .store-mini-badge i { color: #ff6673; }

        .store-product-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
        }

        .store-product-card {
            min-height: 260px;
            position: relative;
            overflow: hidden;
            padding: 34px;
            border-radius: 24px;
            color: #fff;
            text-decoration: none;
            background: linear-gradient(145deg, rgba(25, 32, 44, .94), rgba(13, 18, 26, .88));
            border: 1px solid rgba(255, 255, 255, .1);
            box-shadow: 0 20px 55px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
            transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
        }

        .store-product-card:hover {
            color: #fff;
            transform: translateY(-6px);
            border-color: rgba(230, 57, 70, .72);
            box-shadow: 0 28px 70px rgba(0, 0, 0, .48), 0 0 35px rgba(230, 57, 70, .11);
        }

        .store-product-card.gold:hover { border-color: rgba(255, 183, 3, .72); }
        .store-product-card .category-icon { position: relative; z-index: 1; }
        .store-product-card p { max-width: 430px; line-height: 1.7; }

        .store-product-card::after {
            content: '';
            position: absolute;
            width: 230px;
            height: 230px;
            top: -110px;
            right: -90px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(230, 57, 70, .25), transparent 68%);
        }

        .store-product-card.gold::after {
            background: radial-gradient(circle, rgba(255, 183, 3, .24), transparent 68%);
        }

        @media (max-width: 767.98px) {
            .webstore-home { min-height: auto; padding: 110px 16px 60px; }
            .store-product-grid { grid-template-columns: 1fr; }
            .store-product-card { min-height: 230px; padding: 27px 24px; }
        }
}

/* ===== Inline source: leaderboard.php ===== */
@scope (body.hn-page-leaderboard) {
:scope{--lb-bg:#0b0f17;--lb-card:rgba(20,26,35,.8);--lb-border:rgba(255,255,255,.08);--lb-text:#f8fafc;--lb-muted:#94a3b8;--lb-red:#e63946;--lb-purple:#7c3aed;--lb-gold:#ffb703}
        body{min-height:100vh;margin-top:90px;color:var(--lb-text);font-family:'Plus Jakarta Sans',sans-serif;background:radial-gradient(circle at 90% 8%,rgba(124,58,237,.12),transparent 28rem),radial-gradient(circle at 8% 90%,rgba(230,57,70,.08),transparent 28rem),var(--lb-bg)}
        .lb-hero{position:relative;padding:clamp(38px,6vw,68px) clamp(22px,5vw,52px);overflow:hidden;background:radial-gradient(circle at 82% 18%,rgba(255,183,3,.22),transparent 16rem),radial-gradient(circle at 8% 110%,rgba(230,57,70,.22),transparent 19rem),linear-gradient(135deg,#151927,#211a45 60%,#351750);border:1px solid var(--lb-border);border-radius:28px;box-shadow:0 26px 65px rgba(0,0,0,.22)}
        .lb-hero:after{position:absolute;right:6%;top:50%;content:'\f091';color:rgba(255,255,255,.035);font:900 clamp(9rem,20vw,17rem)/1 'Font Awesome 6 Free';transform:translateY(-50%) rotate(-8deg)}
        .lb-eyebrow{display:inline-flex;gap:8px;align-items:center;padding:8px 13px;margin-bottom:14px;color:#ddd6fe;font-size:.69rem;font-weight:800;letter-spacing:.11em;background:rgba(124,58,237,.2);border:1px solid rgba(196,181,253,.16);border-radius:999px;text-transform:uppercase}
        .lb-title{position:relative;z-index:1;font-size:clamp(2.15rem,6vw,4.2rem);font-weight:800;line-height:1.03}.lb-title span{color:var(--lb-gold)}.lb-copy{position:relative;z-index:1;max-width:680px;color:var(--lb-muted)}
        .lb-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:7px;background:rgba(20,26,35,.88);border:1px solid var(--lb-border);border-radius:17px;backdrop-filter:blur(10px)}
        .lb-tab{display:flex;gap:8px;align-items:center;justify-content:center;padding:13px;color:var(--lb-muted);font-size:.82rem;font-weight:800;text-decoration:none;border-radius:12px;transition:.2s}.lb-tab:hover{color:#fff;background:rgba(255,255,255,.05)}.lb-tab.active{color:#fff;background:linear-gradient(90deg,var(--lb-purple),#9333ea);box-shadow:0 9px 24px rgba(124,58,237,.22)}
        .lb-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:28px}.lb-toolbar-label{color:var(--lb-muted);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.lb-view-switch{display:inline-flex;gap:4px;padding:5px;background:#0c121b;border:1px solid var(--lb-border);border-radius:13px}.lb-view-btn{display:flex;gap:7px;align-items:center;padding:9px 13px;color:var(--lb-muted);font-size:.76rem;font-weight:800;text-decoration:none;border-radius:9px;transition:.2s}.lb-view-btn:hover{color:#fff;background:rgba(255,255,255,.05)}.lb-view-btn.active{color:#fff;background:linear-gradient(90deg,var(--lb-purple),#9333ea);box-shadow:0 7px 18px rgba(124,58,237,.22)}
        .lb-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;padding-top:18px}.podium-card{position:relative;padding:22px 12px 24px;text-align:center;background:var(--lb-card);border:1px solid var(--lb-border);border-radius:22px;box-shadow:0 18px 45px rgba(0,0,0,.15)}.podium-card.first{padding-top:26px;border-color:rgba(255,183,3,.35);background:linear-gradient(180deg,rgba(255,183,3,.09),var(--lb-card));transform:translateY(-18px)}
        .podium-position{position:absolute;top:12px;left:12px;display:grid;width:31px;height:31px;place-items:center;font-size:.72rem;font-weight:800;background:rgba(255,255,255,.07);border-radius:10px}.podium-card.first .podium-position{color:#211600;background:linear-gradient(135deg,#ffe08a,#ffb703)}
        .player-head{width:72px;height:72px;margin-bottom:12px;image-rendering:pixelated;border:3px solid rgba(255,255,255,.12);border-radius:17px;box-shadow:0 12px 28px rgba(0,0,0,.22)}.player-skin{display:block;width:auto;height:132px;max-width:100%;margin:0 auto 10px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 14px 15px rgba(0,0,0,.38))}.podium-card.first .player-skin{height:166px}.player-name{overflow:hidden;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.player-score{margin-top:5px;color:var(--lb-gold);font-size:1.05rem;font-weight:800}
        .lb-panel{overflow:hidden;background:var(--lb-card);border:1px solid var(--lb-border);border-radius:22px;backdrop-filter:blur(10px)}.lb-panel-head{padding:20px 22px;border-bottom:1px solid var(--lb-border)}.lb-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:13px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--lb-border)}.lb-row:last-child{border-bottom:0}.lb-rank{display:grid;width:34px;height:34px;place-items:center;font-weight:800;background:rgba(255,255,255,.05);border-radius:10px}.lb-row .player-head{width:44px;height:44px;margin:0;border-width:1px;border-radius:11px}.lb-score{color:var(--lb-gold);font-weight:800;white-space:nowrap}.lb-empty{padding:52px 20px;color:var(--lb-muted);text-align:center}
        .lb-note{padding:14px 17px;color:var(--lb-muted);font-size:.8rem;background:rgba(255,255,255,.025);border:1px solid var(--lb-border);border-radius:14px}
        .lb-compact-card{overflow:hidden;background:rgba(20,26,35,.88);border:1px solid rgba(255,255,255,.1);border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.18)}.lb-compact-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;border-bottom:1px solid var(--lb-border)}.lb-compact-title{display:flex;gap:10px;align-items:center;margin:0;font-size:1.17rem;font-weight:800}.lb-compact-title i{color:var(--lb-gold)}.lb-compact-list{padding:8px}.lb-compact-row{display:grid;grid-template-columns:38px 38px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px 12px;border-radius:12px}.lb-compact-row:hover{background:rgba(255,255,255,.04)}.lb-compact-row+.lb-compact-row{border-top:1px solid rgba(255,255,255,.045)}.lb-compact-position{display:grid;width:31px;height:31px;place-items:center;color:var(--lb-muted);font-size:.7rem;font-weight:800;background:rgba(255,255,255,.05);border-radius:9px}.lb-compact-row:nth-child(1) .lb-compact-position{color:#271b00;background:linear-gradient(135deg,#ffe08a,#ffb703)}.lb-compact-row:nth-child(2) .lb-compact-position{color:#172033;background:linear-gradient(135deg,#f8fafc,#94a3b8)}.lb-compact-row:nth-child(3) .lb-compact-position{color:#2b1607;background:linear-gradient(135deg,#f1b27a,#b96a36)}.lb-compact-avatar{width:36px;height:36px;image-rendering:pixelated;border:1px solid rgba(255,255,255,.12);border-radius:9px}.lb-compact-name{overflow:hidden;font-size:.86rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.lb-compact-score{color:var(--lb-gold);font-size:.82rem;font-weight:800;white-space:nowrap}.lb-compact-empty{padding:54px 20px;color:var(--lb-muted);text-align:center}.lb-compact-empty i{display:block;margin-bottom:15px;font-size:2rem}
        .buyer-wrap{position:relative;margin-top:46px;padding-top:32px}.buyer-wrap:before{position:absolute;top:0;left:0;width:100%;height:1px;content:'';background:linear-gradient(90deg,transparent,rgba(255,183,3,.45),transparent)}.buyer-kicker{display:inline-flex;gap:8px;align-items:center;margin-bottom:11px;color:#fcd34d;font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.buyer-card{position:relative;overflow:hidden;background:radial-gradient(circle at 100% 0,rgba(255,183,3,.12),transparent 22rem),rgba(20,26,35,.9);border:1px solid rgba(255,183,3,.2);border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.22)}.buyer-card:after{position:absolute;right:-25px;bottom:-45px;content:'\f521';color:rgba(255,183,3,.035);font:900 11rem/1 'Font Awesome 6 Free';transform:rotate(-12deg);pointer-events:none}.buyer-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:21px 23px;border-bottom:1px solid var(--lb-border)}.buyer-title{display:flex;gap:10px;align-items:center;margin:0;font-size:1.25rem;font-weight:800}.buyer-title i{color:var(--lb-gold)}.buyer-period{display:flex;gap:3px;padding:4px;background:#0c121b;border:1px solid var(--lb-border);border-radius:12px}.buyer-period a{padding:8px 12px;color:var(--lb-muted);font-size:.72rem;font-weight:800;text-decoration:none;border-radius:8px}.buyer-period a:hover{color:#fff}.buyer-period a.active{color:#fff;background:linear-gradient(90deg,#6d28d9,#9333ea)}.buyer-list{position:relative;z-index:1;padding:9px}.buyer-row{display:grid;grid-template-columns:40px 42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border-radius:13px}.buyer-row+.buyer-row{border-top:1px solid rgba(255,255,255,.05)}.buyer-row:hover{background:rgba(255,183,3,.035)}.buyer-rank{display:grid;width:33px;height:33px;place-items:center;color:var(--lb-muted);font-size:.72rem;font-weight:800;background:rgba(255,255,255,.05);border-radius:10px}.buyer-row:first-child .buyer-rank{color:#241800;background:linear-gradient(135deg,#ffe69b,#ffb703);box-shadow:0 7px 20px rgba(255,183,3,.2)}.buyer-avatar{width:40px;height:40px;image-rendering:pixelated;border:1px solid rgba(255,255,255,.13);border-radius:10px}.buyer-name{overflow:hidden;font-size:.88rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.buyer-orders{margin-top:2px;color:var(--lb-muted);font-size:.68rem;font-weight:600}.buyer-value{color:#fcd34d;font-size:.86rem;font-weight:800;white-space:nowrap}.buyer-empty{position:relative;z-index:1;padding:58px 20px;color:var(--lb-muted);text-align:center}.buyer-empty i{display:block;margin-bottom:15px;color:var(--lb-gold);font-size:2rem}.buyer-error{position:relative;z-index:1;margin:15px 20px 20px;padding:12px 14px;color:#fcd34d;font-size:.78rem;background:rgba(255,183,3,.08);border:1px solid rgba(255,183,3,.18);border-radius:12px}
        @media(max-width:767.98px){.lb-hero{border-radius:21px}.lb-tabs{grid-template-columns:1fr}.lb-toolbar{align-items:flex-start;flex-direction:column}.lb-view-switch{width:100%}.lb-view-btn{flex:1;justify-content:center}.lb-podium{gap:8px;padding-top:12px}.podium-card{padding:18px 5px}.podium-card.first{padding-top:22px;transform:translateY(-10px)}.player-skin{height:96px}.podium-card.first .player-skin{height:122px}.player-head{width:52px;height:52px}.player-name{font-size:.78rem}.player-score{font-size:.72rem}.lb-row{padding:13px 15px}.lb-compact-head{padding:17px}.lb-compact-row{grid-template-columns:34px 34px minmax(0,1fr) auto;gap:8px;padding:10px 8px}.lb-compact-score{font-size:.72rem}}
        @media(max-width:767.98px){.buyer-head{align-items:flex-start;flex-direction:column;padding:18px}.buyer-period{width:100%}.buyer-period a{flex:1;text-align:center}.buyer-row{grid-template-columns:34px 36px minmax(0,1fr) auto;gap:8px;padding:11px 8px}.buyer-avatar{width:34px;height:34px}.buyer-value{font-size:.72rem}}
        .buyer-wrap{margin-bottom:24px}
        .lb-content-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.85fr);gap:24px;align-items:start}
        .lb-main-column,.lb-buyer-column{min-width:0}
        .lb-buyer-column{position:sticky;top:110px}
        .lb-buyer-column .hnb-component{margin:0}
        .lb-buyer-column .hnb-separator{display:none}
        .lb-buyer-column .hnb-kicker{margin-bottom:14px}
        @media(max-width:991.98px){.lb-content-grid{grid-template-columns:1fr}.lb-buyer-column{position:static}.lb-buyer-column .hnb-component{margin-top:4px}.lb-buyer-column .hnb-separator{display:block}}
}

/* ===== Inline source: maintenance.php ===== */
@scope (body.hn-page-maintenance) {
body {
            background-color: #f8f9fa;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .maintenance-card {
            max-width: 550px;
            border-radius: 1rem;
        }
        .icon-box {
            width: 80px;
            height: 80px;
            background: rgba(255, 193, 7, 0.15);
            color: #ffc107;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
}

/* ===== Inline source: map.php ===== */
@scope (body.hn-page-map) {
:scope {
            --bg-dark: #0d131d;
            --card-bg: #111923;
            --card-border: rgba(255, 255, 255, 0.1);
            --text-main: #f8fafc;
            --text-muted: #8b9bb4;
            --accent-cyan: #00f2fe;
            --accent-pink: #ff4b72;
            --accent-yellow: #ffb703;
        }

        body { 
            background: var(--bg-dark); 
            color: var(--text-main); 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            margin-top: 90px; 
        }

        .hero-title { 
            font-size: clamp(2rem, 5vw, 2.8rem); 
            font-weight: 800; 
            letter-spacing: 1px; 
        }
        .hero-title span { color: var(--accent-cyan); }

        /* Card Container Map */
        .map-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .map-card-header {
            padding: 16px 20px;
            background: rgba(255, 255, 255, 0.02);
            border-bottom: 1px solid var(--card-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
        }

        .map-card-body {
            position: relative;
            width: 100%;
            height: 75vh; /* Tinggi frame map */
            background: rgba(0, 0, 0, 0.2);
        }

        iframe.squaremap-frame {
            width: 100%;
            height: 100%;
            border: none;
        }

        .btn-action-map {
            color: var(--accent-cyan);
            border: 1px solid rgba(0, 242, 254, 0.3);
            background: rgba(0, 242, 254, 0.05);
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .btn-action-map:hover {
            background: var(--accent-cyan);
            color: #000;
        }
}

/* ===== Inline source: pembayaran_donasi.php ===== */
@scope (body.hn-page-pembayaran-donasi) {
:scope{--bg:#0b0f17;--surface:rgba(20,26,35,.82);--border:rgba(255,255,255,.08);--red:#e63946;--gold:#ffb703;--purple:#7c3aed;--purple-light:#a855f7;--muted:#94a3b8}body{background:var(--bg);color:#f8fafc;font-family:'Plus Jakarta Sans',sans-serif;margin-top:90px}.hero-box{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 10%,rgba(124,58,237,.34),transparent 35%),linear-gradient(135deg,#151b27,#0e121b);border:1px solid var(--border);border-radius:26px;padding:34px}.hero-box:after{content:'\f004';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:5%;top:50%;transform:translateY(-50%) rotate(-10deg);font-size:9rem;color:rgba(255,255,255,.035)}.glass-box{background:var(--surface);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:22px;padding:30px;height:100%}.summary{background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.28);border-radius:15px;padding:18px}.qris-image{width:100%;max-width:280px;background:#fff;border:7px solid #fff;border-radius:17px;box-shadow:0 14px 35px rgba(0,0,0,.45)}.form-label{font-weight:700}.form-control{background:rgba(0,0,0,.28);border:1px solid var(--border);color:#fff;padding:12px}.form-control:focus{background:rgba(0,0,0,.34);border-color:var(--purple-light);color:#fff;box-shadow:0 0 0 .2rem rgba(124,58,237,.13)}.btn-donate{background:linear-gradient(90deg,#6d28d9,#9333ea);border:0;color:white;padding:13px;font-weight:800;border-radius:12px}.btn-donate:hover{color:white;transform:translateY(-1px);box-shadow:0 10px 28px rgba(124,58,237,.25)}.btn-cancel{border:1px solid rgba(230,57,70,.55);color:#ff7b85;padding:11px;border-radius:12px}.btn-cancel:hover{background:var(--red);color:#fff}.instruction{color:var(--muted);font-size:.9rem;line-height:1.65}@media(max-width:575px){.hero-box,.glass-box{border-radius:18px;padding:22px}}
}

/* ===== Inline source: pending.php ===== */
@scope (body.hn-page-pending) {
:scope {
            --bg-dark: #0b0f17;
            --surface-dark: #141a23;
            --surface-card: rgba(20, 26, 35, 0.7);
            --border-color: rgba(255, 255, 255, 0.08);
            --accent-red: #e63946;
            --accent-purple: #7C3AED;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
        }

        body {
            background: var(--bg-dark);
            color: var(--text-main);
            font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
            margin-top: 90px;
        }

        /* Hero Title */
        .hero-title {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            font-weight: 800;
            color: #fff;
            letter-spacing: 0.5px;
        }

        .hero-title span {
            color: var(--accent-red);
        }

        /* Information Alert Box */
        .info-box {
            background: rgba(124, 58, 237, 0.08);
            border: 1px solid rgba(124, 58, 237, 0.3);
            border-radius: 12px;
            padding: 16px 20px;
            color: #e2e8f0;
        }

        /* Status Cards Glassmorphism */
        .card-status {
            background: var(--surface-card);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            color: #fff;
            transition: all 0.3s ease;
        }

        .card-status:hover {
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
        }

        .invoice-number {
            font-weight: 700;
            color: #fff;
            font-size: 1.1rem;
        }

        /* Status Badges */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .status-pending {
            background: rgba(250, 204, 21, 0.1);
            color: #facc15;
            border: 1px solid rgba(250, 204, 21, 0.3);
        }

        .status-approved {
            background: rgba(34, 197, 94, 0.1);
            color: #22c55e;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        .status-rejected {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .reason-box {
            background: rgba(239, 68, 68, 0.08);
            border: 1px dashed rgba(239, 68, 68, 0.4);
            border-radius: 8px;
            padding: 10px 14px;
            margin-top: 12px;
            color: #fca5a5;
            font-size: 0.88rem;
        }

        /* Floating Back Button */
        .back-btn {
            position: fixed;
            bottom: 25px;
            right: 25px;
            background: var(--accent-red);
            color: #fff;
            text-decoration: none;
            padding: 12px 22px;
            border-radius: 30px;
            font-weight: 700;
            box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4);
            transition: all 0.3s ease;
            z-index: 9999;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .back-btn:hover {
            background: #d62828;
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(230, 57, 70, 0.6);
        }
}

/* ===== Inline source: shop.php ===== */
@scope (body.hn-page-shop) {
:scope {
            --bg-dark: #0b0f17;
            --surface-dark: #141a23;
            --surface-card: rgba(20, 26, 35, 0.7);
            --border-color: rgba(255, 255, 255, 0.08);
            --accent-red: #e63946;
            --accent-gold: #ffb703;
            --accent-purple: #7C3AED;
            --accent-purple-hover: #6D28D9;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
        }

        body { 
            background: var(--bg-dark); 
            color: var(--text-main); 
            font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif; 
            margin-top: 90px; 
        }

        .hero-title { 
            font-size: clamp(2rem, 5vw, 2.8rem); 
            font-weight: 800; 
            letter-spacing: 1px; 
            color: #fff;
        }
        
        .hero-title span {
            color: var(--accent-red);
        }

        .user-profile-badge {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            border-radius: 50px;
            padding: 8px 20px;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            backdrop-filter: blur(8px);
        }

        .user-avatar {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            border: 2px solid var(--accent-red);
        }

        .accordion-item {
            background: transparent !important;
            border: none !important;
        }

        .accordion-button { 
            background: var(--surface-dark) !important; 
            color: var(--text-main) !important; 
            border: 1px solid var(--border-color) !important; 
            border-radius: 10px !important;
            font-weight: 700; 
            letter-spacing: 1px;
            padding: 18px 24px;
            box-shadow: none !important;
        }

        .accordion-button:not(.collapsed) { 
            background: var(--surface-dark) !important; 
            border-color: var(--accent-red) !important; 
            color: var(--accent-red) !important;
        }

        .accordion-button::after {
            filter: invert(1);
        }

        .rank-card { 
            background: var(--surface-card); 
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--border-color); 
            border-radius: 14px; 
            overflow: hidden; 
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease; 
            position: relative; 
        }

        .rank-card:hover { 
            transform: translateY(-8px) scale(1.02); 
            border-color: rgba(230, 57, 70, 0.6); 
            box-shadow: 0 12px 30px rgba(230, 57, 70, 0.25); 
        }

        .rank-card.popular-card {
            border: 2px solid var(--accent-gold) !important;
            box-shadow: 0 0 20px rgba(255, 183, 3, 0.2);
        }

        .badge-popular {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #ffb703, #fb8500);
            color: #000;
            font-weight: 800;
            font-size: 0.7rem;
            padding: 4px 12px;
            border-radius: 20px;
            z-index: 11;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        .badge-discount {
            position: absolute;
            top: 12px;
            left: 12px;
            background: var(--accent-red);
            color: #fff;
            font-weight: 700;
            font-size: 0.75rem;
            padding: 4px 8px;
            border-radius: 6px;
            z-index: 10;
        }

        .rank-banner { 
            width: 100%; 
            position: relative; 
            background: rgba(0, 0, 0, 0.25);
            padding: 20px 10px 10px 10px;
        }

        .rank-banner img { 
            width: 100%; 
            height: 150px; 
            object-fit: contain; 
            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
        }

        .lock-icon { 
            position: absolute; 
            top: 12px; 
            right: 12px; 
            z-index: 10; 
            font-size: 1.1rem; 
            color: var(--text-muted); 
            background: rgba(0, 0, 0, 0.5);
            padding: 6px 10px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
        }

        .unlocked { 
            color: var(--accent-gold) !important; 
            border-color: rgba(255, 183, 3, 0.3);
        }

        .benefit-preview-list {
            list-style: none;
            padding-left: 0;
            margin: 15px 0 10px 0;
            text-align: left;
            font-size: 0.85rem;
        }

        .benefit-preview-list li {
            color: var(--text-muted);
            margin-bottom: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .progress { 
            height: 6px; 
            background: rgba(255, 255, 255, 0.08); 
            border-radius: 10px; 
            margin: 10px 0; 
            overflow: hidden; 
        }

        .progress-bar-custom { 
            height: 100%;
            border-radius: 10px;
            transition: width 0.5s ease;
        }

        .price-main { 
            font-size: 1.3rem !important; 
            font-weight: 800; 
            color: #fff; 
            display: block; 
        }

        .price-old { 
            color: var(--text-muted); 
            text-decoration: line-through; 
            font-size: 0.85rem; 
        }

        .btn-purple { 
            background: linear-gradient(135deg, var(--accent-purple), #9333ea) !important; 
            border: none !important; 
            color: white; 
            border-radius: 8px; 
            transition: all 0.3s ease; 
            padding: 10px !important; 
            font-weight: 700; 
        }

        .btn-purple:hover:not(:disabled) { 
            background: linear-gradient(135deg, #6D28D9, #7e22ce) !important; 
            box-shadow: 0 0 15px rgba(124, 58, 237, 0.6);
            transform: translateY(-2px); 
            color: #fff;
        }

        .btn-purple:disabled { 
            background: rgba(255, 255, 255, 0.05) !important; 
            border: 1px solid var(--border-color) !important;
            color: var(--text-muted) !important; 
            transform: none; 
        }

        .btn-login-req {
            background: linear-gradient(135deg, var(--accent-gold), #e0a200) !important;
            border: none !important;
            color: #000 !important;
            font-weight: 700;
            border-radius: 8px;
            padding: 10px !important;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-login-req:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 15px rgba(255, 183, 3, 0.5);
            color: #000 !important;
        }

        .guest-login-form {
            margin: 0;
            width: 100%;
        }

        .guest-login-form .btn-login-req {
            width: 100%;
        }

        .btn-link-benefit {
            color: var(--text-muted) !important;
            font-size: 0.85rem;
            transition: color 0.2s ease;
        }

        .btn-link-benefit:hover {
            color: #fff !important;
        }

        .modal-content { 
            background: var(--surface-dark) !important; 
            border: 1px solid var(--border-color); 
            border-radius: 16px; 
            overflow: hidden; 
            color: var(--text-main);
        }

        .modal-header { 
            border-bottom: 1px solid var(--border-color) !important; 
            background: rgba(0, 0, 0, 0.2); 
            padding: 20px 25px;
        }

        .benefit-item { 
            background: rgba(255, 255, 255, 0.03); 
            border: 1px solid var(--border-color);
            padding: 12px 16px; 
            margin-bottom: 10px; 
            border-radius: 8px; 
            display: flex; 
            align-items: center; 
            color: var(--text-main);
            font-size: 0.95rem;
        }

        .benefit-item i {
            color: var(--accent-red);
        }

        .table-dark-custom {
            color: var(--text-main);
            border-color: var(--border-color);
        }
        .table-dark-custom th {
            background: rgba(0,0,0,0.4);
            border-bottom: 2px solid var(--border-color);
        }
        .table-dark-custom td {
            background: rgba(255,255,255,0.01);
            vertical-align: middle;
        }

        /* Compact Rank Explorer */
        .category-tabs { display:flex; gap:10px; overflow-x:auto; padding:4px 2px 12px; scrollbar-width:none; }
        .category-tabs::-webkit-scrollbar { display:none; }
        .category-tab { white-space:nowrap; border:1px solid var(--border-color); color:var(--text-muted); background:var(--surface-dark); border-radius:999px; padding:10px 18px; font-weight:700; transition:.2s ease; }
        .category-tab:hover,.category-tab.active { color:#fff; border-color:var(--accent-purple); background:rgba(124,58,237,.2); box-shadow:0 0 0 3px rgba(124,58,237,.08); }
        .rank-explorer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
        .rank-explorer-card { content-visibility:auto; contain-intrinsic-size:190px; position:relative; display:grid; grid-template-columns:112px minmax(0,1fr); gap:16px; min-height:190px; padding:18px; background:var(--surface-card); border:1px solid var(--border-color); border-radius:18px; overflow:hidden; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
        .rank-explorer-card:hover { transform:translateY(-3px); border-color:rgba(124,58,237,.55); box-shadow:0 12px 28px rgba(0,0,0,.22); }
        .rank-explorer-card.popular-card { border-color:rgba(255,183,3,.7); }
        .rank-explorer-card[hidden] { display:none !important; }
        .rank-logo-wrap { position:relative; display:grid; place-items:center; align-self:stretch; min-height:130px; border-radius:14px; background:radial-gradient(circle,rgba(124,58,237,.13),rgba(0,0,0,.2)); overflow:hidden; }
        .rank-logo-thumb { width:96px; height:96px; object-fit:contain; opacity:0; transform:scale(.94); transition:opacity .3s ease,transform .3s ease; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
        .rank-logo-thumb.loaded { opacity:1; transform:scale(1); }
        .logo-skeleton { position:absolute; width:72px; height:72px; border-radius:18px; background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04)); background-size:200% 100%; animation:shimmer 1.3s infinite; }
        .rank-logo-thumb.loaded + .logo-skeleton { display:none; }
        @keyframes shimmer { to { background-position:-200% 0; } }
        .compact-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
        .tier-label { color:var(--text-muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
        .compact-benefits { list-style:none; padding:0; margin:10px 0; font-size:.82rem; color:var(--text-muted); }
        .compact-benefits li { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:5px 0; }
        .compact-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; margin-top:auto; }
        .compact-detail { border:1px solid var(--border-color); color:var(--text-muted); background:transparent; border-radius:9px; padding:9px 12px; }
        .compact-detail:hover { color:#fff; border-color:var(--accent-purple); }
        .compact-status { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; font-size:.68rem; font-weight:800; }
        .status-active { background:rgba(255,183,3,.13); color:var(--accent-gold); }
        .status-locked { background:rgba(148,163,184,.1); color:var(--text-muted); }
        .status-upgrade { background:rgba(124,58,237,.16); color:#c4b5fd; }
        .detail-logo-large { width:160px; height:160px; object-fit:contain; filter:drop-shadow(0 12px 22px rgba(0,0,0,.55)); }
        @media(max-width:991.98px){.rank-explorer-grid{grid-template-columns:1fr}}
        @media(max-width:575.98px){.rank-explorer-card{grid-template-columns:82px minmax(0,1fr);gap:12px;padding:14px;min-height:170px}.rank-logo-thumb{width:72px;height:72px}.rank-logo-wrap{min-height:110px}.compact-actions{grid-template-columns:1fr}.compact-detail{width:100%}}
}

/* ===== Inline source: shop_points.php ===== */
@scope (body.hn-page-shop-points) {
:scope {
            --bg-dark: #0b0f17;
            --surface-dark: #141a23;
            --surface-card: rgba(20, 26, 35, 0.85);
            --border-color: rgba(255, 255, 255, 0.08);
            --accent-red: #e63946;
            --accent-gold: #ffb703;
            --accent-purple: #8b5cf6;
            --accent-purple-hover: #7c3aed;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
        }

        body { 
            background: var(--bg-dark); 
            color: var(--text-main); 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            margin: 0; 
            padding-top: 80px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .store-container { 
            width: 100%;
            max-width: 1200px; 
            margin: 0 auto 40px; 
            padding: 0 16px; 
            flex: 1;
        }

        /* Hero Header Responsif */
        .hero-section {
            text-align: center;
            margin-bottom: 25px;
            padding: 0 10px;
        }

        .hero-title { 
            font-size: clamp(1.5rem, 6vw, 2.75rem);
            font-weight: 800; 
            color: #ffffff;
            letter-spacing: -0.5px;
            margin-bottom: 8px;
        }

        .hero-title i {
            color: var(--accent-purple);
            filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.6));
        }

        .hero-subtitle {
            color: var(--text-muted);
            font-size: clamp(0.85rem, 2.5vw, 1rem);
            max-width: 600px;
            margin: 0 auto;
        }

        /* Grid Layout Responsif */
        .grid-packages { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
            gap: 16px; 
            margin-top: 25px; 
        }

        /* Card Custom Dark Glassmorphism */
        .card-package { 
            background: var(--surface-card); 
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--border-color); 
            border-radius: 18px; 
            padding: 20px 16px; 
            text-align: center; 
            transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; 
            position: relative; 
            overflow: hidden; 
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .card-package:hover { 
            transform: translateY(-4px); 
            border-color: rgba(139, 92, 246, 0.4); 
            box-shadow: 0 12px 25px rgba(139, 92, 246, 0.15); 
        }

        /* Card Custom Points */
        .card-custom-dash {
            border: 2px dashed rgba(139, 92, 246, 0.5) !important;
            background: rgba(139, 92, 246, 0.04);
        }

        /* Badge Promo / Save */
        .badge-discount {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(34, 197, 94, 0.15);
            border: 1px solid rgba(34, 197, 94, 0.3);
            color: #4ade80;
            font-size: 0.68rem;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Icon Container */
        .icon-box { 
            width: 56px;
            height: 56px;
            margin: 0 auto 12px;
            border-radius: 14px;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem; 
            color: var(--accent-purple); 
        }

        .card-package h3 { 
            font-size: 1.2rem; 
            font-weight: 800; 
            margin-bottom: 2px; 
            color: #ffffff; 
        }

        .card-package p { 
            font-size: 0.75rem; 
            color: var(--text-muted); 
            margin-bottom: 14px; 
            font-weight: 600;
            text-transform: uppercase; 
            letter-spacing: 0.5px; 
        }

        /* Input Custom Points */
        .input-group-custom {
            position: relative;
            margin-bottom: 12px;
        }

        .custom-input {
            background: rgba(0, 0, 0, 0.4) !important;
            border: 1px solid var(--border-color) !important;
            color: #ffffff !important;
            text-align: center;
            font-weight: 700;
            font-size: 1rem;
            border-radius: 10px !important;
            padding: 8px 10px;
        }

        .custom-input:focus {
            border-color: var(--accent-purple) !important;
            box-shadow: 0 0 10px rgba(139, 92, 246, 0.3) !important;
        }

        /* Price Formatting */
        .price-wrapper {
            margin-bottom: 14px;
            min-height: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .price { 
            font-size: 1.25rem; 
            color: var(--accent-purple); 
            font-weight: 800; 
            line-height: 1.2;
        }

        .price-old {
            text-decoration: line-through; 
            color: var(--text-muted); 
            font-size: 0.8rem; 
            font-weight: 500;
            margin-bottom: 2px;
        }

        /* Buttons Optimization for Touch */
        .btn-buy { 
            background: var(--accent-purple); 
            color: #ffffff; 
            border: none; 
            padding: 10px 16px; 
            border-radius: 10px; 
            font-weight: 700; 
            font-size: 0.85rem;
            width: 100%; 
            text-decoration: none; 
            display: inline-flex; 
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
            cursor: pointer;
            touch-action: manipulation;
        }

        .btn-buy:active { 
            transform: scale(0.98);
        }

        .btn-login-req {
            background: linear-gradient(135deg, var(--accent-gold), #e0a200) !important;
            color: #000000 !important;
            font-weight: 700;
        }

        .btn-login-req:hover {
            box-shadow: 0 0 15px rgba(255, 183, 3, 0.4);
        }

        /* Penyesuaian Khusus HP / Layar Kecil (<= 576px) */
        @media (max-width: 576px) {
            body {
                padding-top: 80px;
            }

            .store-container {
                padding: 0 12px;
            }

            .grid-packages { 
                grid-template-columns: repeat(2, 1fr); /* Tampilan 2 Kolom di HP */
                gap: 10px; 
            }

            .card-package {
                padding: 16px 10px;
                border-radius: 14px;
            }

            .icon-box {
                width: 44px;
                height: 44px;
                font-size: 1.2rem;
                margin-bottom: 8px;
            }

            .card-package h3 {
                font-size: 1rem;
            }

            .card-package p {
                font-size: 0.68rem;
                margin-bottom: 10px;
            }

            .price {
                font-size: 1.05rem;
            }

            .price-old {
                font-size: 0.72rem;
            }

            .btn-buy {
                padding: 8px 10px;
                font-size: 0.75rem;
                border-radius: 8px;
            }

            .badge-discount {
                font-size: 0.6rem;
                padding: 2px 6px;
                top: 8px;
                right: 8px;
            }
        }

        /* Untuk layar HP sangat kecil (<= 360px) */
        @media (max-width: 360px) {
            .grid-packages { 
                grid-template-columns: 1fr; /* Kembali ke 1 Kolom jika layar sangat sempit */
            }
        }
}

/* ===== Inline source: staff.php ===== */
@scope (body.hn-page-staff) {
:scope{--bg:#0b0f17;--surface:#141a23;--card:rgba(20,26,35,.8);--border:rgba(255,255,255,.08);--red:#e63946;--gold:#ffb703;--purple:#7c3aed;--muted:#94a3b8;--text:#f8fafc}body{background:var(--bg);color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;margin-top:90px;overflow-x:hidden}.staff-hero{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:28px;padding:48px 34px;background:radial-gradient(circle at 84% 20%,rgba(124,58,237,.34),transparent 35%),radial-gradient(circle at 8% 90%,rgba(230,57,70,.18),transparent 30%),linear-gradient(135deg,#151b27,#0e121b)}.staff-hero:after{content:'\f508';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:6%;top:50%;transform:translateY(-50%) rotate(-8deg);font-size:clamp(8rem,19vw,15rem);color:rgba(255,255,255,.035)}.hero-content{position:relative;z-index:1;max-width:700px}.hero-title{font-size:clamp(2.2rem,5vw,3.7rem);line-height:1.05;font-weight:800}.hero-title span{color:var(--red)}.muted{color:var(--muted)}.stat-card{height:100%;padding:18px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:18px}.stat-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:rgba(124,58,237,.16);color:#c4b5fd}.stat-value{font-size:1.35rem;font-weight:800}.control-panel{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:16px}.role-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}.role-tabs::-webkit-scrollbar{display:none}.filter-btn{white-space:nowrap;border:1px solid var(--border);background:rgba(255,255,255,.025);color:var(--muted);border-radius:999px;padding:9px 15px;font-size:.82rem;font-weight:700;transition:.2s}.filter-btn:hover,.filter-btn.active{color:#fff;border-color:var(--purple);background:rgba(124,58,237,.2)}.search-wrap{position:relative}.search-wrap i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted)}.search-box{background:rgba(0,0,0,.26);border:1px solid var(--border);color:#fff;border-radius:13px;padding:11px 15px 11px 43px}.search-box:focus{background:rgba(0,0,0,.3);color:#fff;border-color:#a855f7;box-shadow:0 0 0 .2rem rgba(124,58,237,.12)}.search-box::placeholder{color:#64748b}.role-header{display:flex;align-items:center;gap:13px;margin:34px 0 17px}.role-emblem{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(230,57,70,.13);color:#ff7b85}.role-title{font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}.role-count{color:var(--muted);font-size:.76rem}.role-line{height:1px;flex:1;background:linear-gradient(90deg,rgba(230,57,70,.45),transparent)}.staff-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.staff-card{content-visibility:auto;contain-intrinsic-size:245px;position:relative;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:12px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}.staff-card:hover{transform:translateY(-4px);border-color:rgba(124,58,237,.55);box-shadow:0 14px 30px rgba(0,0,0,.25)}.avatar-wrap{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:radial-gradient(circle,rgba(124,58,237,.15),rgba(0,0,0,.3))}.staff-avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(.97);transition:opacity .3s,transform .3s}.staff-avatar.loaded{opacity:1;transform:scale(1)}.avatar-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.09),rgba(255,255,255,.03));background-size:200% 100%;animation:shimmer 1.3s infinite}.staff-avatar.loaded+.avatar-skeleton{display:none}@keyframes shimmer{to{background-position:-200% 0}}.staff-avatar.inactive{filter:grayscale(1) opacity(.48)}.status-pill{position:absolute;top:9px;right:9px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:.62rem;font-weight:800;backdrop-filter:blur(7px)}.status-active{background:rgba(16,185,129,.16);border:1px solid rgba(16,185,129,.3);color:#6ee7b7}.status-leave{background:rgba(15,23,42,.8);border:1px solid rgba(148,163,184,.25);color:#cbd5e1}.staff-info{text-align:center;padding:12px 4px 4px}.staff-name{font-size:.93rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.staff-role{color:var(--muted);font-size:.72rem;margin-top:3px}.empty-state{text-align:center;color:var(--muted);padding:60px 20px;background:var(--card);border:1px solid var(--border);border-radius:20px}.role-group[hidden],.staff-item[hidden]{display:none!important}@media(max-width:1199px){.staff-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:991px){.staff-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:767px){.staff-grid{grid-template-columns:repeat(2,1fr)}.control-panel{padding:12px}.staff-hero{padding:38px 24px}}@media(max-width:400px){.staff-grid{gap:10px}.staff-card{padding:9px}.staff-name{font-size:.82rem}}
}

/* ===== Inline source: terms.php ===== */
@scope (body.hn-page-terms) {
:scope {
            --bg-dark: #0b0e14;
            --surface-hover: #1c2533;
            --accent-red: #e63946;
            --border-color: rgba(255, 255, 255, 0.08);
            --surface-card: rgba(20, 26, 35, 0.7);
            --text-secondary: #94a3b8;
        }

        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: var(--bg-dark); 
            color: #fff;
        }

        .blog-header {
            padding: 100px 20px 40px;
            background: linear-gradient(180deg, rgba(11, 14, 20, 0.6) 0%, rgba(11, 14, 20, 1) 100%),
                        url('public/img/bg.png') center/cover no-repeat;
            text-align: center;
        }

        .terms-card {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
            height: auto;
            display: flex;
            flex-direction: column;
        }

        .terms-card:hover {
            border-color: var(--accent-red);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .terms-card-header {
            padding: 20px 24px;
            background: rgba(255, 255, 255, 0.02);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .terms-card-body {
            padding: 24px;
            flex-grow: 1;
        }

        .terms-badge {
            font-size: 0.75rem;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            background: rgba(230, 57, 70, 0.15);
            color: var(--accent-red);
            width: fit-content;
        }

        .term-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .term-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .term-icon {
            background: rgba(230, 57, 70, 0.2);
            color: var(--accent-red);
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .sidebar-widget {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 24px;
            height: auto;
        }
}

/* ===== Inline source: top.php ===== */
@scope (body.hn-page-top) {
:scope {
            --bg-dark: #0b0e14;
            --surface-dark: #141a23;
            --surface-card: rgba(20, 26, 35, 0.75);
            --border-color: rgba(255, 255, 255, 0.08);
            --accent-gold: #ffb703;
            --accent-red: #e63946;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
        }

        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: var(--bg-dark); 
            color: var(--text-main); 
            margin-top: 90px;
        }

        .metric-menu {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px;
        }

        .metric-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            color: var(--text-muted);
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.2s ease;
        }

        .metric-item:hover, .metric-item.active {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }

        .metric-item.active {
            border-left: 3px solid var(--accent-gold);
        }

        .lb-card {
            background: var(--surface-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px;
        }

        .podium-container {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 20px;
            padding: 30px 0;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
            min-height: 280px;
        }

        .podium-box { text-align: center; flex: 1; max-width: 180px; }
        .podium-box.rank-1 { order: 2; transform: translateY(-10px); }
        .podium-box.rank-2 { order: 1; }
        .podium-box.rank-3 { order: 3; }

        .podium-rank-num { font-weight: 800; font-size: 1.2rem; color: var(--accent-gold); margin-bottom: 8px; }
        .skin-3d { height: 180px; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)); transition: transform 0.3s ease; }
        .podium-box.rank-1 .skin-3d { height: 210px; }
        .podium-box:hover .skin-3d { transform: scale(1.05); }

        .player-name { font-weight: 700; font-size: 1rem; color: #fff; margin-top: 10px; }
        .player-score { font-size: 0.85rem; color: var(--accent-gold); font-weight: 600; }

        .lb-list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            transition: background 0.2s ease;
        }

        .lb-list-item:hover { background: rgba(255, 255, 255, 0.02); }
        .head-avatar { width: 28px; height: 28px; border-radius: 4px; }
}