/* ==========================================================================
       1. VARIABLES & RESET
       ========================================================================== */
    :root {
        --dota-bg-darkest: #0c1217;
        --dota-bg-dark: #0c0d10;       /* Latar belakang legam khas menu Dota */
        --dota-panel-bg: #1c1e24;      /* Latar belakang panel abu-abu gelap */
        --dota-red: #a32b2b;           /* Merah logo Dota 2 */
        --dota-red-light: #e43e3e;
        --dota-red-hover: #ce3f3f;     /* Merah menyala saat hover */
        --dota-gold: #e2b143;          /* Emas aksen skor/item */
        --dota-text-light: #e4e7eb;    /* Warna teks utama abu terang */
        --dota-text-muted: #858a94;    /* Teks sekunder */
        --dota-border: #2d313a;        /* Border panel */
        --dota-success: #398e3d;       /* Hijau radiant/buyback */
    }

    /* FIX UTAMA: Kunci total pergeseran layar horizontal */
    html, body { 
        background-color: var(--dota-bg-dark); 
        font-family: 'Radiance', 'Segoe UI', Roboto, 'Arial Black', sans-serif;
        color: var(--dota-text-light);
        background-image: radial-gradient(circle at top, #1e1212 0%, var(--dota-bg-dark) 70%);
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    *, *:before, *:after {
        box-sizing: inherit;
    }

    /* ==========================================================================
       2. SCROLLBARS
       ========================================================================== */
    /* Menyembunyikan scrollbar navigasi di HP */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Custom Scrollbar Global */
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        background: var(--dota-bg-darkest);
    }
    ::-webkit-scrollbar-thumb {
        background: #2d3741;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--dota-red);
    }

    /* ==========================================================================
       3. CONTAINERS & PANELS
       ========================================================================== */
    .main-container {
        width: 100%;
        max-width: 650px;
        padding: 12px 12px 30px 12px;
        box-sizing: border-box;
        margin: 0 auto;
    }
    @media (min-width: 640px) {
        .main-container { padding: 20px 20px 40px 20px; }
    }

    /* Gabungan .dota-panel dan .panel */
    .dota-panel, .panel {
        background: var(--dota-panel-bg);
        padding: 15px;
        border-radius: 4px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.6), inset 0 0 15px rgba(0,0,0,0.4);
        border: 1px solid var(--dota-border);
        margin-bottom: 16px;
        position: relative;
    }
    @media (min-width: 640px) {
        .dota-panel, .panel { padding: 20px; margin-bottom: 20px; }
    }

    .panel::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 3px;
        background: linear-gradient(90deg, transparent, var(--dota-red), transparent);
    }

    .panel-title {
        color: var(--dota-text-light);
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-top: 0;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--dota-border);
        padding-bottom: 8px;
    }
    @media (min-width: 640px) {
        .panel-title { font-size: 1.1rem; }
    }

    /* ==========================================================================
       4. FORMS & INPUTS
       ========================================================================== */
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 5px;
    }
    @media (min-width: 500px) {
        .form-group { flex-direction: row; flex-wrap: wrap; }
    }

    .input-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 100%;
    }
    @media (min-width: 500px) {
        .input-field { flex: 1; min-width: 130px; }
    }

    label { 
        font-size: 0.8rem; 
        color: var(--dota-text-muted); 
        font-weight: 600;
        text-transform: uppercase;
    }

    select, input[type="time"], input[type="text"], input[type="number"] {
        padding: 12px 10px;
        border-radius: 4px;
        border: 1px solid var(--dota-border);
        background-color: #111215;
        color: var(--dota-text-light);
        font-size: 0.95rem;
        outline: none;
        box-sizing: border-box;
        transition: all 0.2s;
        width: 100%;
    }

    select:focus, input:focus {
        border-color: var(--dota-gold);
        box-shadow: 0 0 8px rgba(226, 177, 67, 0.3);
    }

    /* ==========================================================================
       5. BUTTONS
       ========================================================================== */
    button {
        background: linear-gradient(180deg, var(--dota-red) 0%, #721c1c 100%);
        color: var(--dota-text-light);
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        border: 1px solid #c93b3b;
        border-radius: 4px;
        padding: 12px 20px;
        font-size: 0.95rem;
        transition: all 0.2s;
        text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 3px 6px rgba(0,0,0,0.4);
        width: 100%;
    }
    @media (min-width: 500px) {
        button { width: auto; margin-top: auto; height: 45px; }
    }
    button:hover { 
        background: linear-gradient(180deg, var(--dota-red-hover) 0%, var(--dota-red) 100%);
        box-shadow: 0 0 10px rgba(206, 63, 63, 0.5);
        border-color: #ff5252;
    }

    /* Aliansi class tombol merah khusus */
    .dota-button-red {
        background: linear-gradient(180deg, var(--dota-red) 0%, #721c1c 100%);
        color: #ffffff;
        border: 1px solid #e43e3e;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8);
        box-shadow: 0 3px 6px rgba(0,0,0,0.4);
    }
    .dota-button-red:hover {
        background: linear-gradient(180deg, var(--dota-red-hover) 0%, var(--dota-red) 100%);
        border-color: #ff5252;
        box-shadow: 0 0 10px rgba(206, 63, 63, 0.5);
    }

    /* Tombol Gold & Variasi Lainnya */
/* Tombol Gold & Variasi Lainnya */
.dota-button-gold {
    background: linear-gradient(to bottom, #c4a154, #856529);
    border: 1px solid #e5c57b;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    
    /* FIX: Memaksa tombol lepas dari aturan global width 100% dan height 45px */
    width: auto !important;
    height: auto !important;
}
.dota-button-gold:hover {
    background: linear-gradient(to bottom, #dbae4f, #9c752d);
    border-color: #ffe094;
}

    button.btn-secondary {
        background: linear-gradient(180deg, #3a3f47 0%, #24272c 100%);
        border-color: #4f555e;
    }
    button.btn-secondary:hover {
        background: linear-gradient(180deg, #4f555e 0%, #3a3f47 100%);
        box-shadow: 0 0 10px rgba(255,255,255,0.1);
    }

    button.btn-warning {
        background: linear-gradient(180deg, #2b2519 0%, #15120c 100%);
        color: var(--dota-gold);
        border: 1px solid var(--dota-gold);
        padding: 6px 12px;
        font-size: 0.8rem;
        height: auto;
        width: auto;
        margin-top: 5px;
        border-radius: 4px;
    }
    button.btn-warning:hover {
        background: linear-gradient(180deg, var(--dota-gold) 0%, #a37c27 100%);
        color: #000;
        box-shadow: 0 0 8px rgba(226, 177, 67, 0.4);
    }

    /* ==========================================================================
       6. CARDS & LOGIC STATES
       ========================================================================== */
    .empty-state {
        text-align: center;
        padding: 20px;
        color: var(--dota-text-muted);
        font-style: italic;
    }
    
    .boss-list { 
        display: flex; 
        flex-direction: column; 
        gap: 12px; 
    }

    .boss-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background: #131418;
        border-radius: 4px;
        border: 1px solid var(--dota-border);
        border-left: 5px solid #4f555e;
        gap: 10px;
    }
    @media (min-width: 640px) { .boss-card { padding: 15px; } }

    .boss-card.active { 
        border-left-color: var(--dota-gold); 
        background: #191b22;
        box-shadow: inset 5px 0 15px rgba(226, 177, 67, 0.05);
    }

    .boss-card.spawned { 
        border-left-color: var(--dota-success); 
        background: #121814;
        box-shadow: inset 5px 0 15px rgba(57, 142, 61, 0.1);
    }
    
    .boss-info { 
        display: flex; 
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    .boss-name { 
        font-size: 0.95rem; 
        font-weight: 700; 
        color: var(--dota-text-light);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    @media (min-width: 640px) { .boss-name { font-size: 1.05rem; } }

    .boss-meta { 
        font-size: 0.8rem; 
        color: var(--dota-text-muted); 
        margin-top: 3px; 
    }
    
    .timer-container { 
        text-align: right; 
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;
    }

    .timer { 
        font-size: 1.15rem; 
        font-family: 'Courier New', Courier, monospace; 
        color: var(--dota-text-muted); 
        font-weight: 700; 
    }
    @media (min-width: 640px) { .timer { font-size: 1.3rem; } }

    .timer.active {
        color: var(--dota-gold);
        text-shadow: 0 0 10px rgba(226, 177, 67, 0.3);
    }

    .timer.spawned { 
        color: #4ef054; 
        text-shadow: 0 0 15px rgba(78, 240, 84, 0.6);
        animation: blink 1s infinite; 
    }
    
    @keyframes blink { 50% { opacity: 0.4; } }

    /* ==========================================================================
       7. RESPONSIVE TABLE (EXCEL SECTION)
       ========================================================================== */
    @media (max-width: 768px) {
        #excel-section table, 
        #excel-section thead, 
        #excel-section tbody, 
        #excel-section th, 
        #excel-section td, 
        #excel-section tr,
        #excel-section tfoot { 
            display: block; 
            width: 100% !important;
            min-width: 0 !important;
        }
        #excel-section thead tr { 
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
        #excel-section tr { 
            border: 1px solid #2d3741; 
            margin-bottom: 10px;
            background: #141b21;
            border-radius: 4px;
            padding: 8px;
        }
        #excel-section td { 
            border: none !important;
            position: relative;
            padding-left: 45% !important; 
            text-align: right !important;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            min-height: 32px;
            border-bottom: 1px solid rgba(45, 55, 65, 0.3) !important;
        }
        #excel-section td:last-child {
            border-bottom: none !important;
        }
        #excel-section td:before { 
            position: absolute;
            left: 12px;
            width: 40%; 
            padding-right: 10px; 
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
            color: var(--dota-text-muted);
            text-transform: uppercase;
            font-size: 10px;
            letter-spacing: 0.5px;
        }
        
        /* Mapping Label Kolom */
        #excel-section td:nth-of-type(1):before { content: "NO"; color: #bd2b2b; }
        #excel-section td:nth-of-type(2):before { content: "TANGGAL"; }
        #excel-section td:nth-of-type(3):before { content: "NAMA ITEM"; }
        #excel-section td:nth-of-type(4):before { content: "PJ / PENULIS"; }
        #excel-section td:nth-of-type(5):before { content: "TOTAL KOTOR"; }
        #excel-section td:nth-of-type(6):before { content: "TAX (6%)"; }
        #excel-section td:nth-of-type(7):before { content: "TOTAL BERSIH"; }
        #excel-section td:nth-of-type(8):before { content: "ANGGOTA"; }
        #excel-section td:nth-of-type(9):before { content: "DAPAT / ORANG"; }
        
        #excel-section tfoot tr {
            padding: 12px;
            background: #0c1217;
        }
        #excel-section tfoot td {
            padding-left: 50% !important;
            border-bottom: 1px dashed rgba(45, 55, 65, 0.5) !important;
        }
        #excel-section tfoot td:nth-of-type(1):before { content: "TOTAL PENCAIRAN"; }
        #excel-section tfoot td:nth-of-type(2):before { content: "TOT. KOTOR"; }
        #excel-section tfoot td:nth-of-type(3):before { content: "TOT. TAX"; }
        #excel-section tfoot td:nth-of-type(4):before { content: "TOT. BERSIH"; }
        #excel-section tfoot td:nth-of-type(6):before { content: "GRAND TOTAL"; }
    }