/* =================================================================
   STYLE.CSS - JOGJASTREAM
   -----------------------------------------------------------------
   DAFTAR ISI:
   1.  VARIABEL GLOBAL & PENGATURAN DASAR
   2.  STRUKTUR & LAYOUT UTAMA
   3.  KOMPONEN UI
       - Tombol (Buttons)
       - Form & Input
       - Kartu (Cards)
       - Modal
       - Navigasi & Header
       - Tabel
       - Notifikasi (Toast & Progress Bar)
       - Halaman Spesifik (Login, Galeri)
       - Lain-lain (Loader, Tags, etc.)
   4.  ANIMASI & EFEK KHUSUS
   5.  ATURAN RESPONSIVE (MEDIA QUERIES)
================================================================= */

/* =================================================================
   1. VARIABEL GLOBAL & PENGATURAN DASAR
================================================================= */
:root {
  --bg-color: #0d1313;
  --content-bg: #1a2c2a;
  --border-color: #2d4a45;
  --primary-text: #e0e0e0;
  --secondary-text: #7a9c94;
  --accent-color: #6af2c8;
  --accent-hover: #8bffde;
  --danger-color: #f26a8d;
  --danger-hover: #ff8bae;
}

body {
  font-family: "Poppins", sans-serif;
  color: var(--primary-text);
  margin: 0;
  padding: 20px;
  background: transparent !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary-text);
}

h1 {
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 30px;
}

.title,
#formTitle {
  text-align: center;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-hover);
}

/* =================================================================
   2. STRUKTUR & LAYOUT UTAMA
================================================================= */
.container {
  max-width: 900px;
  margin: auto;
}

.main-container {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}

body.is-loading .main-container {
  opacity: 0;
  visibility: hidden;
}

.content-wrapper {
  background-color: var(--content-bg);
  padding: 30px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  max-width: 1100px;
  margin: 2vh auto;
}

.section-header {
  background: linear-gradient(-45deg, #0e1e21, #1f383c, #102a2e, #1a2a2d);
  background-size: 400% 400%;
  animation: gradient-animation 15s ease infinite;
  display: flex;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 10px 20px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  align-items: center;
}

/* Definisikan animasi keyframes-nya */
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.section-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #e0e0e0;
  text-transform: uppercase;
}

/* Container utama untuk toggle dan labelnya */
.toggle-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Menyembunyikan checkbox asli */
.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* ========================================================== */
/* === STYLE TOGGLE ANIMASI MATA) === */
/* ========================================================== */

.status-text {
  display: none;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch {
  position: relative;
  cursor: pointer;
}

.eye-toggle {
  position: relative;
  width: 50px;
  height: 28px;
  border-radius: 28px;
  transition: background-color 0.3s;
  overflow: hidden;
  background-color: #4a5568;
}
.eye-toggle:hover {
  background-color: #5a6578;
}

.eye-handle {
  display: inline-block;
  vertical-align: middle;
  margin-top: 4px;
  margin-left: 4px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
  overflow: hidden;
  background-color: #ccc;
}

/* Pupil */
.pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 8px;
  width: 10px;
  margin-top: -4px;
  margin-left: -5px;
  border-radius: 50%;
  background-color: #000;
  box-shadow: inset -1px -1px 2px 1px rgba(18, 86, 137, 0.5);
  background-image: radial-gradient(
    ellipse at 40% 40%,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0) 100%
  );
}

.eye-lid {
  position: absolute;
  left: 50%;
  width: 200%;
  margin-left: -100%;
  background-color: #2d3748;
  z-index: 1;
}
.eye-lid.top {
  top: 0;
  height: 10px;
  transition: height 0.4s ease-out;
  border-radius: 0 0 50% 50%;
}
.eye-lid.bottom {
  bottom: 0;
  height: 10px;
  transition: height 0.4s ease-out;
  border-radius: 50% 50% 0 0;
}

/* === Logika Animasi Saat Aktif (:checked) === */
.toggle-input:checked + .toggle-switch .eye-toggle {
  background-color: #00a99d;
}
.toggle-input:checked + .toggle-switch .eye-toggle:hover {
  background-color: #00c4b3;
}

/* Gerakkan handle ke kanan */
.toggle-input:checked + .toggle-switch .eye-handle {
  transform: translateX(22px);
  background-color: #ffffff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6);
}

/* Sembunyikan kelopak mata (mata terbuka) */
.toggle-input:checked + .toggle-switch .eye-lid {
  height: 0;
  transition-delay: 0.1s;
}
/* END */

.empty-state {
  font-size: 14px;
  font-style: italic;
}

/* Background Animasi */
.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #001313;
  overflow: hidden;
  z-index: -1;
}

.app-logo {
  height: 60px;
  width: auto;
  vertical-align: middle;
}

/* =================================================================
   3. KOMPONEN UI
================================================================= */

/* --- Tombol (Buttons) --- */
button,
a.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--accent-color);
  color: #0d1313;
  border: 1px solid transparent;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* KELAS MODIFIER UNTUK TOMBOL */

/* Tombol Primer (Aksen/Hijau) */
.btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 20px;
}
.btn--primary:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(106, 242, 200, 0.2);
}

/* Tombol Bahaya (Merah) */
.btn--danger {
  background-color: var(--danger-color);
  color: white;
  border-color: var(--danger-color);
}
.btn--danger:hover {
  background-color: var(--danger-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(242, 106, 141, 0.2);
}

/* Tombol Khusus Ikon */
.btn--icon {
  width: 38px;
  height: 38px;
  padding: 0;
}

button:hover,
a.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(106, 242, 200, 0.2);
  background-color: var(--accent-hover);
  color: #0d1313;
}

/* Memberikan gaya primer pada tombol "Tambah Akun Google Baru" */
#addAccountBtn {
  background-color: var(--accent-color);
  color: var(--bg-color);
  border: 1px solid transparent;
}

#addAccountBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(106, 242, 200, 0.2);
}

button:disabled {
  background-color: #333;
  color: #666;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  border-color: #333;
}

/* Tombol Sekunder (abu-abu) */
.controls button:not(:first-child) .modal-actions button:not([type="submit"]) {
  background-color: var(--accent-color);
  color: #0d1313;
  border: 1px solid var(--border-color);
}

.controls button:not(:first-child):hover,
.modal-actions button:not([type="submit"]):hover {
  background-color: var(--border-color);
  box-shadow: none;
}

/* Tombol Bahaya (Merah) */
.btn-stop,
.delete-btn,
.delete-account-btn,
.delete-video-btn {
  background-color: var(--border-color);
  color: white;
}

.btn-stop:hover,
.delete-btn:hover,
.delete-account-btn:hover,
.delete-video-btn:hover {
  background-color: transparent;
  color: #e74c3c;
  border-color: #e74c3c;
  box-shadow: 0 4px 15px rgba(242, 106, 141, 0.2);
  transform: translateY(-2px);
}

/* Tombol Ikon */
.btn-icon {
  padding: 8px;
  line-height: 1;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

/* Override untuk tombol Tambah Stream agar selalu primer */
#addProfileBtn {
  background-color: var(--accent-color);
  color: #0d1313;
}
#addProfileBtn:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(106, 242, 200, 0.2);
}

/* --- Form & Input --- */
.form-label,
.form-group {
  display: block;
  margin-bottom: 5px;
  margin-top: 10px;
  color: #f1f1f1;
  font-size: 15px;
}

#logoPreview {
  max-height: 60px;
  margin-bottom: 15px;
  background-color: transparent;
  padding: 5px;
  border-radius: 4px;
}

textarea.form-control {
  height: auto;
  resize: vertical;
  font-family: inherit;
}

textarea#youtubeBroadcastDesc {
  width: 100%;
  padding: 10px;
  background-color: var(--bg-color);
  color: #e2e8f0;
  border: 1px solid #4a5568;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="time"],
select {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
  color: #00d1b2;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  transition: border-color 0.2s ease;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--accent-color);
}

.form-hint {
  display: block;
  font-size: 12px;
  color: var(--secondary-text);
  margin-bottom: 15px;
}

.form-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 25px 0;
}

.error-message {
  color: var(--danger-color);
  text-align: center;
  min-height: 20px;
  font-size: 14px;
}

/* Kontrol Form Utama (Dasbor, Galeri) */
.controls {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.gallery-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Styling untuk pemisahan blok media */
.media-section h3 {
  margin-bottom: 1rem;
  font-weight: 500;
  color: var(--secondary-text);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.video-gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

/* Styling untuk tampilan daftar audio */
.audio-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.audio-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  cursor: grab;
}
.audio-list-item:hover {
  border-color: var(--accent-color);
  background-color: rgba(0, 0, 0, 0.4);
}
.audio-info {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}
.audio-icon {
  color: var(--accent-color);
  flex-shrink: 0;
}
.audio-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
}

#createCollectionBtn {
  padding: 10px;
}

/* === STYLING UNTUK KOLEKSI AUDIO === */

.collections-section {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.collections-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.collections-header h3 {
  margin: 0;
  font-weight: 500;
  color: var(--secondary-text);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.collection-list-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.collection-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0.3rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  border: 1px solid transparent;
}

.collection-item .audio-list-item,
.collection-item .video-card {
  display: none !important;
}

.collection-item.sortable-over {
  background-color: rgba(106, 242, 200, 0.2);
  border: 2px dashed var(--accent-color);
  transform: scale(1.03);
}

.collection-item:hover {
  background-color: rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
  border-color: var(--accent-color);
}

.collection-item .collection-icon {
  color: var(--accent-color) !important;
  flex-shrink: 0;
}

.collection-item .collection-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e0e0e0 !important;
}

.section-divider {
  border: none;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 2rem 0;
}

/* === AKHIR STYLING === */

/* Styling untuk grup koleksi di modal profil */
.collection-group {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-bottom: 8px;
  background-color: rgba(0, 0, 0, 0.1);
}

.collection-group summary {
  padding: 10px;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: center;
}

.collection-group summary::before {
  content: "▶";
  margin-right: 8px;
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

.collection-group[open] > summary::before {
  transform: rotate(90deg);
}

.collection-group .collection-content {
  padding: 0 5px 5px 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.collection-item {
  justify-content: space-between;
}
.collection-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
}
.delete-collection-btn {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.collection-item:hover .delete-collection-btn {
  opacity: 1;
  background: transparent;
  color: #e74c3c;
  border-color: #e74c3c;
}
.delete-collection-btn:hover {
  color: var(--danger-color);
}

/* 1. Aturan untuk KONTAINER loading (berlaku untuk teks & spinner) */
.gallery-loading-state,
.loading-spinner-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 150px;
  color: var(--secondary-text);
  font-style: italic;
  padding: 2rem 0;
  grid-column: 1 / -1;
}

/* 2. Aturan KHUSUS untuk animasi spinner-nya saja */
.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top: 4px solid var(--accent-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

/* Pastikan animasi 'spin' ini ada (seharusnya sudah ada) */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Input Pencarian */
#searchInput,
#profileSearchInput {
  flex-grow: 1;
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--content-bg);
  color: var(--primary-text);
  font-size: 15px;
  min-width: 200px;
}

#searchInput:focus,
#profileSearchInput:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* Kontainer Password dengan Ikon */
.password-container {
  position: relative;
  width: 100%;
}
.password-container input {
  padding-right: 40px;
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  margin-top: -7.5px;
  cursor: pointer;
  color: var(--secondary-text);
  transition: color 0.2s ease;
}
.toggle-password:hover {
  color: var(--primary-text);
}

/* Checkbox & Toggle Switch */
/* Styling untuk container checkbox */
.checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  cursor: pointer;
}

/* Sembunyikan checkbox asli */
.checkbox-container input[type="checkbox"] {
  display: none;
}

/* Styling untuk label teks */
.checkbox-container label {
  padding-left: 30px;
  position: relative;
  color: #f1f1f1;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
}

/* Membuat lingkaran luar */
.checkbox-container label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 50%;
  transition: all 0.2s;
}

/* Membuat titik di dalam (saat terpilih) */
.checkbox-container input[type="checkbox"]:checked + label::before {
  border-color: #00d1b2;
  background-color: #00d1b2;
  box-shadow: inset 0 0 0 3px var(--content-bg);
}

/* Pilihan Hari (Days Selector) */
.days-selector {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 15px;
}
.days-selector input[type="checkbox"] {
  display: none;
}
.days-selector label {
  flex-grow: 1;
  text-align: center;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}
.days-selector input[type="checkbox"]:checked + label {
  background-color: var(--accent-color);
  color: var(--bg-color);
  border-color: var(--accent-color);
  font-weight: bold;
}

/* Pilihan Zona Waktu */
.timezone-selector {
  display: flex;
  gap: 5px;
}
.timezone-selector input[type="radio"] {
  display: none;
}
.timezone-selector label {
  font-size: 13px;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}
.timezone-selector input[type="radio"]:checked + label {
  background-color: var(--accent-color);
  color: var(--bg-color);
  font-weight: bold;
}

/* Grup Input Waktu */
.time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 15px;
}
.time-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.time-input-group input[type="time"] {
  flex-grow: 1;
  margin-bottom: 0;
}

/* Memberi gaya pada ikon kalender/jam di input waktu untuk browser WebKit */
input[type="time"]::-webkit-calendar-picker-indicator {
  background-color: #4d6863;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Mengubah warna saat kursor diarahkan ke ikon */
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background-color: var(--secondary-text);
}

/* --- Kartu (Cards) --- */
.profile-card {
  background-color: var(--content-bg);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border-color);
  transition: border-color 0.2s ease;
}
.profile-card:hover {
  border-color: var(--accent-color);
}
.profile-info {
  flex-grow: 1;

  .profile-title-container {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .profile-title-container h3 {
    margin: 0;
  }
}
.profile-info h3 {
  font-weight: 500;
  font-size: 1rem;
}
.profile-info p {
  font-size: 13px;
  color: var(--secondary-text);
}
.profile-info p.path {
  font-family: "Roboto Mono", monospace;
  word-break: break-all;
}
.profile-actions {
  display: flex;
  flex-shrink: 0;
  margin-left: 15px;
  gap: 10px;
}

/* Styling untuk tombol Add Stream di header controls */
.controls #addProfileBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 20px;
}

/* Styling untuk tombol ikon di kartu profil */
.profile-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--card-color);
  color: var(--secondary-text);
  transition: all 0.2s ease;
}

.profile-actions button:hover:not(:disabled) {
  background-color: var(--hover-color);
  color: var(--primary-text);
  border-color: var(--accent-color);
}

/* Sedikit penyesuaian untuk tombol Start/Stop */
.profile-actions .start-btn:hover:not(:disabled) {
  background-color: #27ae6020;
  color: #2ecc71;
  border-color: #2ecc71;
  padding: 8px !important;
}
.profile-actions .stop-btn:hover:not(:disabled),
.profile-actions .delete-btn:hover:not(:disabled) {
  background-color: #c0392b20;
  color: #e74c3c;
  border-color: #e74c3c;
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 20px;

  /* Untuk Video */
}
.video-card {
  background-color: var(--content-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  padding: 10px;
}
.video-card-footer {
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.video-title {
  font-size: 13px;
  word-break: break-all;
  text-align: left;
}
.thumbnail-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  background-color: var(--bg-color);
}

/* Styling untuk tombol ikon hapus di kartu video galeri */
.video-card-actions .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-color);
  background-color: var(--card-color);
  color: var(--secondary-text);
  transition: all 0.2s ease;
}

.video-card-actions .btn-icon:hover:not(:disabled) {
  background-color: #c0392b20;
  color: #e74c3c;
  border-color: #e74c3c;
}

/* Kartu Statistik Worker */
.worker-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #1e2a33;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #2a3b47;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}
.stat-card {
  background-color: #2a3b47;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #3a4b57;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.stat-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.stat-value {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.3em;
  font-size: 1.6rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}
.stat-unit {
  font-size: 0.9rem;
  font-weight: 500;
  color: #8a9ba7;
}
.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #8a9ba7;
  margin-top: 5px;
}
.stat-chart {
  width: 100%;
  height: 40px;
  margin-top: 10px;
}

/* Kartu Pengaturan */
.settings-card {
  background-color: var(--content-bg);
  padding: 20px 25px;
  margin-bottom: 15px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.settings-card h2 {
  margin-top: 0;
  font-size: 1.1em;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.form-textarea {
  width: 100%;
  padding: 10px 15px;
  background-color: var(--bg-color);
  border: 1px solid #3d4f61;
  border-radius: 6px;
  color: #00f988;
  font-family: inherit;
  font-size: 0.8rem;
  resize: vertical;
  min-height: 120px;
  box-sizing: border-box;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(0, 209, 178, 0.2);
}

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(13, 19, 19, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}
.modal-content {
  background-color: var(--content-bg);
  padding: 30px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-content.large {
  max-width: 800px;
}
.modal-content h2 {
  margin-top: 0;
  text-align: center;
}
.modal-actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 20px;
}
#linkedAccountsContainer .modal-actions .button {
  padding: 8px 16px;
  font-size: 14px;
}

/*Playlist Editor di dalam Modal */
.playlist-editor {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.video-list-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.video-list-container strong {
  margin-bottom: 5px;
  text-align: center;
  font-size: 14px;
  color: var(--secondary-text);
}
.video-list {
  height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 5px;
  background-color: var(--bg-color);
}
.video-list-item {
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 5px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-list-item.selected {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  background-color: rgba(106, 242, 200, 0.1) !important;
}

.video-list-item:hover {
  background-color: var(--border-color);
}
.audio-list-item.selected {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  background-color: rgba(106, 242, 200, 0.1);
}

.playlist-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.playlist-controls button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #555;
  border-radius: 10px;
  background-color: transparent;
  color: var(--text-color);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
}

.playlist-controls #addVideoBtn,
.playlist-controls #removeVideoBtn {
  width: 44px;
  padding: 0;
  font-size: 1.5rem;
}

.playlist-controls #browseGoogleDriveBtn {
  padding: 0 16px;
  gap: 8px;
  position: relative;
  top: -5px;
}

.playlist-controls #browseGoogleDriveBtn svg {
  vertical-align: middle;
  flex-shrink: 0;
}

.playlist-controls button:hover {
  background-color: #2a3b3a;
  border-color: var(--accent-color);
  color: var(--accent-color);
}

video#videoPreview {
  width: 100%;
  max-height: 200px;
  border-radius: 8px;
  margin-top: 15px;
  background-color: var(--bg-color);
}

/* Upload ke Drive */
/* Styling untuk Modal Upload ke Drive & Browser Folder */
.folder-browser {
  border: 1px solid #444;
  border-radius: 4px;
  margin-top: 10px;
  background-color: #01232d;
}

.folder-path {
  padding: 8px 12px;
  background-color: #2a2a2a;
  border-bottom: 1px solid #444;
  font-size: 0.9em;
  color: #ccc;
}

.folder-path strong {
  color: #fff;
}

.folder-list {
  max-height: 180px;
  overflow-y: auto;
  padding: 5px;
}

.folder-item {
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

.folder-item:hover {
  background-color: #383838;
}

.back-item {
  font-style: italic;
  color: #999;
}

.folder-list .spinner {
  display: block;
  margin: 20px auto;
  width: 24px;
  height: 24px;
}

/* --- Styling untuk Progress Bar Upload ke Drive --- */
.progress-container {
  width: 100%;
  margin-top: 15px;
}

/* Teks progres (misalnya "Mengirim... 50%") */
.progress-text {
  font-size: 0.9em;
  color: #f0f0f0;
  margin-bottom: 5px;
}

/* Background dari progress bar (track) */
.progress-bar-background {
  width: 100%;
  height: 10px;
  background-color: #333;
  overflow: hidden;
}

/* Foreground dari progress bar (bagian yang mengisi) */
.progress-bar-foreground {
  height: 100%;
  width: 0%;
  background-color: var(--accent-color);
  border-radius: 5px;
  transition: width 0.3s ease-in-out;
}

/* --- Navigasi & Header --- */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 20px 80px;
  margin: -20px -20px 30px -20px;
}
.header-brand a {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-text);
  text-decoration: none;
}
#hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--primary-text);
  padding: 5px;
  cursor: pointer;
  z-index: 1100;
}

body.modal-is-open .main-header #hamburger-btn {
  visibility: hidden;
  opacity: 0;
}

body.modal-is-open {
  overflow: hidden;
}

/* Container untuk link navigasi utama */
.main-nav {
  background-color: rgba(30, 30, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 6px;

  /* Layout untuk link di dalamnya */
  display: flex;
  gap: 6px;
}

/* Styling untuk setiap link di dalam navigasi */
.main-nav a {
  color: #d1d1d1;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 40px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

/* Efek hover */
.main-nav a:hover {
  color: #fff;
}

/* Styling untuk link yang sedang aktif */
.main-nav a.active {
  background: #8bffde;
  background: radial-gradient(
    circle,
    rgba(139, 255, 222, 1) 0%,
    rgba(45, 74, 69, 1) 100%
  );
  color: #1a1a1a;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.fa-brands {
  font-size: 3rem;
  padding: 15px;
}

/* Menu Pengguna */
.user-menu {
  position: relative;
  cursor: pointer;
  margin-left: 15px;
}
.user-menu .user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
.user-menu:hover .user-info,
.user-menu.active .user-info {
  background-color: var(--border-color);
}
.user-icon {
  width: 24px;
  height: 24px;
  color: var(--accent-color);
}
.user-menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: var(--content-bg);
  border: 1px solid var(--border-color);
  text-align: center;
  border-radius: 8px;
  min-width: 180px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  padding: 5px 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.user-menu.active .user-menu-dropdown,
.user-menu:hover .user-menu-dropdown {
  display: block;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.user-menu-dropdown .dropdown-username {
  color: var(--primary-text);
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.2s ease;
}

.user-menu-dropdown .dropdown-username {
  color: var(--secondary-text);
  font-size: 0.9em;
  border-bottom: 1px solid var(--border-color);
  cursor: default;
}

/* Tombol logout */
.logout-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #00d1b2;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  text-align: center;
  color: var(--primary-text);
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.2s ease;
}

.logout-button:hover {
  background-color: var(--border-color);
  width: 100%;
  opacity: 0.8;
}

/* --- Tabel --- */
.settings-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}
.settings-table th,
.settings-table td {
  border-bottom: 1px solid var(--border-color);
  padding: 12px 15px;
  text-align: left;
}
.settings-table th {
  font-weight: 500;
  color: var(--secondary-text);
  font-size: 14px;
}
.settings-table .btn-stop {
  padding: 6px 12px;
  font-size: 13px;
}

/* --- Notifikasi (Toast & Progress Bar) --- */
.toast-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background-color: var(--content-bg);
  color: var(--primary-text);
  padding: 15px 25px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  border-left: 5px solid var(--accent-color);
}
.toast.error {
  border-left-color: var(--danger-color);
}
.toast.show {
  opacity: 1;
  transform: translateX(0);
}

#globalProgressBarContainer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  background-color: #333;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 2000;
  text-align: center;
  color: white;
  display: none;
}
#globalProgressText {
  margin-bottom: 8px;
  font-size: 0.9em;
}
.progress-bar-container {
  /* Dari file asli */
  width: 100%;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-top: 15px;
  overflow: hidden;
}
.progress-bar {
  /* Dari file asli */
  width: 0%;
  height: 24px;
  background-color: var(--accent-color);
  text-align: center;
  line-height: 24px;
  color: var(--bg-color);
  font-weight: bold;
  font-size: 14px;
  transition: width 0.4s ease;
}
.progress-bar-background {
  background-color: #555;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}
#globalProgressBar {
  /* ID dari JS Anda */
  width: 0%;
  height: 100%;
  background-color: var(--accent-color);
  transition: width 0.3s ease-in-out;
}

/* --- Halaman Spesifik (Login, Galeri) --- */
.login-form {
  background-color: var(--content-bg);
  padding: 40px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  max-width: 400px;
  margin: 10vh auto;
}
.login-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  font-size: 14px;
}
.login-links p {
  margin: 0;
}
.login-links a {
  color: var(--accent-color);
}
.login-links a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

#uploadStatus {
  text-align: center;
  margin-top: 15px;
  min-height: 20px;
}

/* --- Lain-lain (Loader, Tags, etc.) --- */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s ease-in-out, visibility 0.3s;
}
body:not(.is-loading) .loader-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader {
  border: 4px solid var(--border-color);
  border-top: 4px solid var(--accent-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

/* Status & Tags */
.status-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.status-line p {
  margin: 0;
}

.status-offline {
  background-color: var(--border-color);
  color: var(--secondary-text);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.8em;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-offline-icon {
  fill: currentColor;
}

.status-starting {
  background-color: #000000;
  color: rgb(209, 159, 23);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.8em;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-starting-icon {
  margin-right: 8px;
}

.status-streaming {
  background-color: #0f712c;
  color: white;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.8em;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status-streaming-icon {
  margin-right: 8px;
}

.status-online {
  display: inline-flex;
  align-items: center;
  background-color: #cb1814;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  animation: pulsating-red-glow 2s infinite;
}

.live-indicator-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.1414 5.00003C20.9097 6.80378 22 9.27458 22 12C22 14.7578 20.8836 17.2549 19.0782 19.064M5 19.1415C3.14864 17.3265 2 14.7974 2 12C2 9.235 3.12222 6.73208 4.93603 4.92188' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.2849 8.04397C17.3458 9.05877 18 10.4488 18 11.9822C18 13.5338 17.3302 14.9386 16.2469 15.9564M7.8 16C6.68918 14.9789 6 13.556 6 11.9822C6 10.4266 6.67333 9.01843 7.76162 8' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.6563 10.4511C14.5521 11.1088 15 11.4376 15 12C15 12.5624 14.5521 12.8912 13.6563 13.5489C13.4091 13.7304 13.1638 13.9014 12.9384 14.0438C12.7407 14.1688 12.5168 14.298 12.2849 14.4249C11.3913 14.914 10.9444 15.1586 10.5437 14.8878C10.1429 14.617 10.1065 14.0502 10.0337 12.9166C10.0131 12.596 10 12.2817 10 12C10 11.7183 10.0131 11.404 10.0337 11.0834C10.1065 9.94977 10.1429 9.38296 10.5437 9.1122C10.9444 8.84144 11.3913 9.08599 12.2849 9.57509C12.5168 9.70198 12.7407 9.83123 12.9384 9.95619C13.1638 10.0986 13.4091 10.2696 13.6563 10.4511Z' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

svg {
  transform: translateX(1px);
}
.platform-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: 5px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.platform-tag-youtube,
.platform-tag-facebook,
.platform-tag-twitch {
  font-size: 1em;
  width: 1.2em;
  height: 1.2em;
  padding: 1px;
  border-radius: 4px;
}

.platform-tag-youtube {
  background-color: #ff0000;
}
.platform-tag-facebook {
  background-color: #1877f2;
}

.platform-tag-twitch {
  background-color: #9146ff;
}

/* Gaya untuk ikon Generic */
.platform-tag-generic {
  background-color: var(--secondary-text);
}

.worker-tag {
  background-color: var(--border-color);
  color: var(--secondary-text);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7em;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.worker-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  color: #cdd8e0;
  font-size: 0.9rem;
}

.worker-status-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.worker-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pulsing-dot {
  width: 10px;
  height: 10px;
  background-color: #28a745;
  border-radius: 50%;
  animation: pulsing 2s infinite;
}

.stream-duration {
  background-color: #fea405;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  margin: 5px 0;
  gap: 6px;
}

/* Mengubah warna teks durasi saat stream berjalan */
.profile-card .video-count.stream-duration {
  color: #000000;
  font-weight: 500;
  font-size: 11px;
  transition: color 0.3s ease-in-out;
}

/* menata ikon jamnya agar warnanya sama */
.profile-card .stream-duration svg {
  fill: #000000;
  transition: fill 0.3s ease-in-out;
}

/* Aturan default untuk status worker */
.worker-status-wrapper .worker-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* WARNA SAAT CONNECTED */
.worker-status-wrapper .worker-status.status-connected {
  color: #00ff89;
}

/* WARNA SAAT DISCONNECTED */
.worker-status-wrapper .worker-status.status-disconnected {
  color: #ff5252; /* Teks merah */
}

/* Efek hover tag worker di profil */
.profile-card .worker-tag:hover {
  background-color: rgba(139, 148, 172, 0.3);
  color: #ffffff;
}
.profile-card .worker-tag:hover svg {
  fill: #ffffff;
}

/* Menata tag worker saat stream sedang LIVE */
.profile-card .worker-tag.live {
  background-color: rgba(0, 255, 137, 0.1);
  color: #00ff89;
}

/* Mengubah warna ikon di dalam tag saat LIVE */
.profile-card .worker-tag.live svg {
  fill: #00ff89;
}

/* ======================================= */
/* === Tampilan Browser Google Drive === */
/* ======================================= */

/* Gaya dasar untuk setiap item file */
.gdrive-file-item {
  padding: 12px 15px;
  border-bottom: 5px solid #333;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 5px 0;
}

/* Efek HOVER) */
.gdrive-file-item:hover {
  background-color: #2a3b3a;
}
/* Tampilan untuk item yang SUDAH TERPILIH */
.gdrive-file-item.selected {
  background-color: var(--accent-color);
  color: #0c1a1a;
  font-weight: 500;
}

.gdrive-file-item.selected .gdrive-file-size {
  color: #1e2c2c;
}

/* Penataan internal item */
.gdrive-thumbnail {
  width: 60px;
  height: 34px;
  object-fit: cover;
  border-radius: 4px;
  background-color: #333;
}

.gdrive-file-info {
  display: flex;
  flex-direction: column;
}

.gdrive-file-name {
  margin: 0;
}

.gdrive-file-size {
  margin: 2px 0 0 0;
  font-size: 0.6rem;
  color: #aaa;
}

/* =================================================================
   4. ANIMASI & EFEK KHUSUS
================================================================= */

/* Pulse Status Connected */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulsing {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}

/* Pulse Status LIVE */
@keyframes pulsating-red-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(229, 57, 53, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
  }
}

/* Animasi load berputar pada status */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spin-icon {
  animation: spin 1s linear infinite;
}

/* Animasi Background */
@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}
.background span {
  width: 9vmin;
  height: 9vmin;
  border-radius: 9vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.background span:nth-child(0) {
  color: #000000;
  top: 76%;
  left: 86%;
  animation-duration: 30s;
  animation-delay: -18s;
  transform-origin: 3vw -21vh;
  box-shadow: 18vmin 0 2.61vmin currentColor;
}
.background span:nth-child(1) {
  color: #e4312b;
  top: 45%;
  left: 58%;
  animation-duration: 196s;
  animation-delay: -58s;
  transform-origin: -1vw 22vh;
  box-shadow: -18vmin 0 2.66vmin currentColor;
}
.background span:nth-child(2) {
  color: #ffffff;
  top: 63%;
  left: 53%;
  animation-duration: 119s;
  animation-delay: -22s;
  transform-origin: 4vw 2vh;
  box-shadow: 18vmin 0 2.8vmin currentColor;
}
.background span:nth-child(3) {
  color: #ffffff;
  top: 25%;
  left: 70%;
  animation-duration: 41s;
  animation-delay: -187s;
  transform-origin: 15vw -12vh;
  box-shadow: 18vmin 0 2.25vmin currentColor;
}
.background span:nth-child(4) {
  color: #e4312b;
  top: 28%;
  left: 19%;
  animation-duration: 35s;
  animation-delay: -181s;
  transform-origin: 6vw 8vh;
  box-shadow: 18vmin 0 2.78vmin currentColor;
}
.background span:nth-child(5) {
  color: #000000;
  top: 13%;
  left: 38%;
  animation-duration: 106s;
  animation-delay: -87s;
  transform-origin: 25vw 17vh;
  box-shadow: -18vmin 0 3.04vmin currentColor;
}
.background span:nth-child(6) {
  color: #e4312b;
  top: 18%;
  left: 91%;
  animation-duration: 199s;
  animation-delay: -73s;
  transform-origin: -8vw 14vh;
  box-shadow: -18vmin 0 3.01vmin currentColor;
}
.background span:nth-child(7) {
  color: #000000;
  top: 59%;
  left: 76%;
  animation-duration: 68s;
  animation-delay: -225s;
  transform-origin: 4vw 2vh;
  box-shadow: 18vmin 0 3.13vmin currentColor;
}
.background span:nth-child(8) {
  color: #ffffff;
  top: 11%;
  left: 26%;
  animation-duration: 176s;
  animation-delay: -29s;
  transform-origin: -23vw -13vh;
  box-shadow: -18vmin 0 2.98vmin currentColor;
}
.background span:nth-child(9) {
  color: #000000;
  top: 30%;
  left: 34%;
  animation-duration: 27s;
  animation-delay: -59s;
  transform-origin: 1vw 22vh;
  box-shadow: 18vmin 0 3.02vmin currentColor;
}
.background span:nth-child(10) {
  color: #149954;
  top: 82%;
  left: 64%;
  animation-duration: 87s;
  animation-delay: -52s;
  transform-origin: 15vw 17vh;
  box-shadow: -18vmin 0 2.97vmin currentColor;
}
.background span:nth-child(11) {
  color: #000000;
  top: 77%;
  left: 100%;
  animation-duration: 193s;
  animation-delay: -121s;
  transform-origin: 25vw 15vh;
  box-shadow: -18vmin 0 3.05vmin currentColor;
}
.background span:nth-child(12) {
  color: #e4312b;
  top: 80%;
  left: 62%;
  animation-duration: 68s;
  animation-delay: -148s;
  transform-origin: 16vw 5vh;
  box-shadow: 18vmin 0 3.02vmin currentColor;
}
.background span:nth-child(13) {
  color: #149954;
  top: 11%;
  left: 27%;
  animation-duration: 169s;
  animation-delay: -224s;
  transform-origin: -17vw 11vh;
  box-shadow: -18vmin 0 2.75vmin currentColor;
}
.background span:nth-child(14) {
  color: #ffffff;
  top: 17%;
  left: 20%;
  animation-duration: 117s;
  animation-delay: -150s;
  transform-origin: -11vw -22vh;
  box-shadow: -18vmin 0 3.24vmin currentColor;
}
.background span:nth-child(15) {
  color: #e4312b;
  top: 43%;
  left: 64%;
  animation-duration: 73s;
  animation-delay: -51s;
  transform-origin: 22vw -9vh;
  box-shadow: 18vmin 0 2.85vmin currentColor;
}
.background span:nth-child(16) {
  color: #e4312b;
  top: 8%;
  left: 6%;
  animation-duration: 224s;
  animation-delay: -14s;
  transform-origin: -13vw 19vh;
  box-shadow: 18vmin 0 2.67vmin currentColor;
}
.background span:nth-child(17) {
  color: #000000;
  top: 6%;
  left: 62%;
  animation-duration: 87s;
  animation-delay: -154s;
  transform-origin: -24vw -9vh;
  box-shadow: -18vmin 0 2.92vmin currentColor;
}
.background span:nth-child(18) {
  color: #000000;
  top: 88%;
  left: 80%;
  animation-duration: 134s;
  animation-delay: -160s;
  transform-origin: 21vw 0vh;
  box-shadow: -18vmin 0 2.95vmin currentColor;
}
.background span:nth-child(19) {
  color: #000000;
  top: 3%;
  left: 1%;
  animation-duration: 74s;
  animation-delay: -56s;
  transform-origin: -2vw 8vh;
  box-shadow: 18vmin 0 2.62vmin currentColor;
}
.background span:nth-child(20) {
  color: #ffffff;
  top: 11%;
  left: 71%;
  animation-duration: 227s;
  animation-delay: -45s;
  transform-origin: 5vw 23vh;
  box-shadow: 18vmin 0 3.01vmin currentColor;
}
.background span:nth-child(21) {
  color: #e4312b;
  top: 91%;
  left: 64%;
  animation-duration: 87s;
  animation-delay: -137s;
  transform-origin: 1vw 2vh;
  box-shadow: 18vmin 0 3.19vmin currentColor;
}
.background span:nth-child(22) {
  color: #149954;
  top: 93%;
  left: 77%;
  animation-duration: 150s;
  animation-delay: -22s;
  transform-origin: -2vw -3vh;
  box-shadow: -18vmin 0 2.73vmin currentColor;
}
.background span:nth-child(23) {
  color: #000000;
  top: 52%;
  left: 20%;
  animation-duration: 230s;
  animation-delay: -124s;
  transform-origin: -19vw 1vh;
  box-shadow: -18vmin 0 2.98vmin currentColor;
}
.background span:nth-child(24) {
  color: #ffffff;
  top: 54%;
  left: 17%;
  animation-duration: 46s;
  animation-delay: -2s;
  transform-origin: 17vw 10vh;
  box-shadow: -18vmin 0 2.57vmin currentColor;
}
.background span:nth-child(25) {
  color: #149954;
  top: 54%;
  left: 70%;
  animation-duration: 56s;
  animation-delay: -99s;
  transform-origin: 11vw -23vh;
  box-shadow: -18vmin 0 2.25vmin currentColor;
}
.background span:nth-child(26) {
  color: #ffffff;
  top: 95%;
  left: 18%;
  animation-duration: 212s;
  animation-delay: -44s;
  transform-origin: 5vw -12vh;
  box-shadow: -18vmin 0 2.27vmin currentColor;
}

/* =================================================================
   5. ATURAN RESPONSIVE (MEDIA QUERIES)
================================================================= */

/* Tampilan Tablet & Mobile (Lebar maks 992px) */
@media (max-width: 992px) {
  .content-wrapper {
    padding: 5px;
    margin: 5vh auto;
  }
}

@media (max-width: 768px) {
  body {
    padding: 10px;
  }
  .main-header {
    padding: 10px 15px;
    margin: -10px -10px 20px -10px;
  }

  .main-nav {
    border-radius: 0;
  }
  .content-wrapper {
    padding: 15px;
  }
  h1 {
    font-size: 22px;
  }

  .btn--primary {
    width: 30px;
    height: 30px;
  }

  /* --- Navigasi Mobile (Telah Dirapikan) --- */
  #hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1051;
  }
  .header-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Logika baru untuk menu flyout */
  .main-nav {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border-bottom: none;
    max-height: none;
    overflow: visible;
    padding: 80px 0 20px 0;
    background-color: #1e2a2d;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
    z-index: 1050;
  }

  /* Saat menu terbuka (punya class .open), geser ke dalam layar */
  .main-nav.open {
    transform: translateX(0);
  }

  /* Styling untuk setiap link di menu mobile */
  .main-nav a {
    width: 100%;
    padding: 15px 30px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .main-nav a:last-child {
    border-bottom: none;
  }

  /* Styling untuk link yang sedang aktif */
  .main-nav a.active {
    background-color: rgba(0, 209, 178, 0.15);
    color: #00d1b2;
    box-shadow: inset 4px 0 0 #00d1b2;
  }

  .user-menu {
    margin-left: auto;
  }

  .user-menu-dropdown {
    min-width: 200px;
  }
  .user-menu:hover .user-menu-dropdown {
    display: none;
  }
  .user-menu.active .user-menu-dropdown {
    display: block;
  }

  /* Tambah Stream */
  .controls {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .controls #profileSearchInput {
    flex: 1;
    min-width: 0;
  }

  .controls #addProfileBtn {
    flex-shrink: 0;
  }

  /* Tambah Video */
  .gallery-controls {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  /* Biarkan input ini fleksibel dan mengisi sisa ruang */
  .gallery-controls #searchInput {
    flex: 1;
    min-width: 0;
    font-size: 0.7rem;
  }

  /* Biarkan tombol memiliki lebar sesuai kontennya dan jangan menyusut */
  .gallery-controls #showUploadModalBtn {
    flex-shrink: 0;
  }

  /* Wadah utama header */
  .section-header {
    flex-wrap: nowrap;
    gap: 10px;
  }

  /* Judul di mobile */
  .section-header h2 {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
  }

  /* Grup toggle di kanan */
  .toggle-container {
    gap: 6px;
    flex-shrink: 0;
  }

  /* Ukuran handle (lingkaran) */
  .slider::before {
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
  }

  .profile-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .profile-actions {
    width: 100%;
    margin-top: 15px;
    margin-left: 0;
    display: flex;
    gap: 19px;
    justify-content: space-between;
  }

  .modal-overlay {
    align-items: flex-start;
    padding-top: 5vh;
  }
  .login-form,
  .modal-content {
    padding: 20px;
    margin-top: 30px;
  }

  .modal-content.large {
    max-height: 90%;
  }

  .playlist-editor {
    flex-direction: column;
  }
  .playlist-controls {
    flex-direction: row;
    justify-content: center;
  }

  .video-list {
    height: 150px;
  }
  .time-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  #videoGalleryContainer.video-gallery-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .audio-info,
  .collection-info {
    min-width: 0;
    flex: 1;
  }
  .media-section h3 {
    font-size: 0.8rem;
  }

  .collections-header h3 {
    margin: 0;
    font-weight: 500;
    color: var(--secondary-text);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
  }
  /* Tabel di Halaman Pengaturan */
  .settings-table thead {
    display: none;
  }
  .settings-table tr {
    display: block;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
  }
  .settings-table td {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
  }
  .settings-table tr td:last-child {
    border-bottom: none;
    padding-top: 15px;
  }
  .settings-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    color: var(--secondary-text);
    font-size: 0.8em;
    margin-bottom: 4px;
    text-transform: uppercase;
  }
}

/* Styling untuk tombol ikon di halaman settings */
.settings-card .modal-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; /* Lebar minimum */
  height: 40px;
  padding: 0 10px; /* Beri padding jika ada teks */
}

/* Khusus untuk tombol yang hanya ikon */
.settings-card .modal-actions button:not(:has(span)) {
  width: 40px;
  padding: 0;
}

/* Tampilan Mobile Sangat Kecil (Lebar maks 600px) */
@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 kolom untuk statistik */
  }
  .stat-card {
    padding: 10px 5px;
  }
  .stat-value {
    font-size: 1.2rem;
  }
  .stat-unit {
    font-size: 0.7rem;
  }
  .stat-label {
    font-size: 0.6rem;
    margin-top: 4px;
    white-space: nowrap;
  }
  .stat-chart {
    height: 25px;
  }
  .worker-header {
    font-size: 0.8rem;
  }
  .profile-card .stream-duration {
    font-size: 12px;
  }

  svg {
    transform: translateX(1px);
  }
}

/* Tampilan Mobile Terkecil (Lebar maks 425px) */
@media (max-width: 425px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 kolom untuk statistik */
  }
  .stat-value {
    font-size: 1rem;
  }
  .stat-unit {
    font-size: 0.6rem;
  }
  .stat-label {
    font-size: 0.5rem;
  }
  .worker-header {
    font-size: 0.7rem;
  }
}

/* === FOOTER === */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-container {
  flex-grow: 1;
}

footer {
  width: 100%;
  text-align: center;
  padding: 5px 0;
  color: var(--secondary-text);
  font-size: 14px;
  flex-shrink: 0;
}

footer a {
  color: var(--secondary-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

footer a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.footer-separator {
  margin: 0 10px;
}

/* Styling untuk status Error di kartu profil */
.status-error {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #e74c3c;
  font-weight: bold;
}

/* Styling untuk menampilkan alasan error */
.video-count.error-reason {
  font-size: 0.8rem;
  font-style: italic;
  color: #ff5a5a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
  cursor: help;
  padding: 0;
  margin: 0;
}

/* Container untuk pilihan mode */
.mode-selector {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 10px 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sembunyikan radio button asli */
.mode-selector input[type="radio"] {
  display: none;
}

/* Styling untuk label teks */
.mode-selector label {
  cursor: pointer;
  padding-left: 28px;
  position: relative;
  margin-right: 20px;
  user-select: none;
}

/* Membuat lingkaran luar */
.mode-selector label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 50%;
  transition: border-color 0.2s;
}

/* Membuat titik di dalam (awalnya transparan/tersembunyi) */
.mode-selector label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 10px;
  height: 10px;
  background-color: transparent;
  border-radius: 50%;
  transition: transform 0.2s;
}

/* Saat radio button terpilih (checked)... */
.mode-selector input[type="radio"]:checked + label::before {
  border-color: #28a745;
}

.mode-selector input[type="radio"]:checked + label::after {
  background-color: #00d1b2;
  transform: translateY(-50%) scale(1);
}

/* STYLE KREDENSIAL BELUM TERUNGGAH */

#clientSecretStatus {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 6px;
  font-weight: 500;
  margin-top: 10px;
  transition: all 0.3s ease;
}

#clientSecretStatus.status-error {
  background-color: rgba(255, 71, 87, 0.15);
  border: 1px solid rgba(255, 71, 87, 0.4);
  color: #ff6b81;
}

#clientSecretStatus.status-success {
  background-color: rgba(0, 209, 178, 0.1);
  border: 1px solid rgba(0, 209, 178, 0.3);
  color: #00d1b2;
}