body {
    font-family: 'Inter', sans-serif;
}

/* Sembunyikan scrollbar tapi tetap fungsional */
.custom-scrollbar {
    -ms-overflow-style: none; /* IE dan Edge */
    scrollbar-width: none; /* Firefox */
}
.custom-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, dan Opera */
}

/* Tombol channel kustom */
.channel-btn {
    /* --- PERBAIKAN: Mengecilkan Font 15% --- */
    font-size: 8.5px; /* Asli: 10px (10px * 0.85) */
    
    /* --- PERBAIKAN: Mengecilkan Ukuran Tombol (Padding) 15% --- */
    padding: 0.2125rem 0.425rem; /* Asli: 0.25rem 0.5rem (masing-masing * 0.85) */
    
    font-weight: 700; /* bold */
    background-color: #374151; /* gray-700 */
    border: 1px solid #4b5563; /* gray-600 */
    color: white;
    border-radius: 0.25rem; /* rounded */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-md */
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s;
}
.channel-btn:hover {
    background-color: #4b5563; /* gray-600 */
    border-color: #374151; /* gray-700 */
}
.channel-btn.active {
    background-color: #ef4444; /* red-500 */
    color: white;
    border-color: #ef4444; /* red-500 */
    font-weight: 900; /* black */
}

/* Marquee untuk info bar */
@keyframes marquee {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.marquee-text {
    position: absolute;
    animation: marquee 15s linear infinite;
    will-change: transform;
}

/* Styles untuk Remote Modal */
.modal-btn {
    background-color: #3b82f6; /* blue-500 */
    color: white;
    font-weight: bold;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem; /* rounded-md */
    transition: background-color 0.2s;
    text-align: center;
    cursor: pointer;
}
.modal-btn:hover {
    background-color: #2563eb; /* blue-600 */
}
.res-option-btn {
    background-color: #4b5563; /* gray-600 */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem; /* rounded-md */
    width: 100%;
    cursor: pointer;
}
.res-option-btn:hover {
    background-color: #374151; /* gray-700 */
}

/* Tab Dashboard */
.tab-btn {
    border-bottom: 3px solid transparent;
    color: #9ca3af; /* gray-400 */
}
.tab-btn.active {
    border-bottom-color: #3b82f6; /* blue-500 */
    color: #ffffff; /* white */
}
.tab-content.hidden {
    display: none;
}

/* Dropdown Aksi Pengguna */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #2d3748; /* gray-800 */
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #4a5568; /* gray-600 */
}
.dropdown-content button {
    color: white;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem; /* text-sm */
}
.dropdown-content button:hover {
    background-color: #4a5568; /* gray-700 */
}
.dropdown:hover .dropdown-content {
    display: block;
}