:root{
  --bg:#070b18;
  --txt:#eaf1ff;
  --muted:rgba(234,241,255,.72);
  --line:rgba(255,255,255,.10);
  --accent:#62b3ff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

html, body { height: 100%; }
body{
  margin:0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 700px at 20% 0%, #13235e 0%, var(--bg) 55%),
    var(--bg);
  color:var(--txt);
}

.wrap{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 22px;
  min-height: 100vh;
  box-sizing: border-box;
  display:flex;
  flex-direction: column;
  justify-content: center;
}

.header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom: 14px;
}
.brand{ display:flex; align-items:center; gap:12px; }

.logo{
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
}
.logo img{
  width:100%; height:100%; object-fit:contain;
  padding: 6px;
  box-sizing: border-box;
}

h1{ font-size:18px; margin:0; line-height:1.1; }
.sub{ font-size:12px; color:var(--muted); margin-top:4px; }

/* ===== GRID (opsi 3) ===== */
.grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap:14px;
  align-items: stretch;
}

/* penting biar konten gak maksa melebar */
.card, .now, .meta { min-width: 0; }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  min-height: 0;
}

.now{ display:flex; gap:14px; align-items:center; }
.cover{
  width: 96px; height: 96px; border-radius: 18px;
  background: linear-gradient(135deg, #1e2f77, #0b0f26);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  flex: 0 0 auto;
}
.cover img{ width:100%; height:100%; object-fit:cover; display:none; }
.cover .fallback{
  opacity:.9; font-weight:700; letter-spacing:.4px;
  font-size: 14px; text-align:center; padding: 10px;
  white-space: pre-line;
}

.meta{ min-width: 0; flex:1; }
.station{ font-size: 14px; color: var(--muted); }
.title{
  font-size: 18px; font-weight: 750;
  margin: 4px 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.infoRow{ display:flex; gap:10px; flex-wrap: wrap; }
.pill{
  border: 1px solid var(--line);
  background: rgba(15,23,51,.55);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}
.pill strong{ color: var(--txt); font-weight:700; }
.dot{
  width:8px; height:8px; border-radius: 50%;
  display:inline-block; margin-right:8px; vertical-align: middle;
  background: rgba(255,255,255,.25);
  box-shadow: 0 0 0 4px rgba(255,255,255,.05);
}
.dot.on{ background: #38f28a; box-shadow: 0 0 0 4px rgba(56,242,138,.12); }
.dot.buf{ background: #ffd166; box-shadow: 0 0 0 4px rgba(255,209,102,.12); }
.dot.err{ background: #ff4d6d; box-shadow: 0 0 0 4px rgba(255,77,109,.12); }

.controls{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bigBtn{
  cursor:pointer; user-select:none;
  background: linear-gradient(135deg, rgba(98,179,255,.95), rgba(155,123,255,.95));
  border: none;
  color: #071024;
  font-weight: 800;
  padding: 12px 16px;
  border-radius: 14px;
  min-width: 160px;
  text-align:center;
  box-shadow: 0 14px 35px rgba(98,179,255,.25);
}
.bigBtn:active{ transform: translateY(1px); }
.smallBtn{
  cursor:pointer;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--txt);
  padding: 10px 12px;
  border-radius: 14px;
}
.smallBtn:hover{ filter: brightness(1.08); }

.sliders{ display:flex; gap:12px; align-items:center; flex-wrap: wrap; }
.sliderBox{
  border:1px solid var(--line);
  background: rgba(15,23,51,.55);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
}
input[type="range"]{ width: 190px; }

.list .item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px; border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(15,23,51,.45);
  margin-bottom: 10px;
  cursor:pointer;
}
.list .item:hover{ filter: brightness(1.06); }
.list .item.active{ outline: 2px solid rgba(98,179,255,.65); }
.item .left{ min-width: 0; }
.item .name{ font-weight: 800; }
.item .url{
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
  max-width: 100%; /* ✅ biar gak maksa lebar */
}
.badge{
  font-size: 11px;
  padding: 6px 9px;
  border-radius: 999px;
  border:1px solid var(--line);
  color: var(--muted);
  background: rgba(0,0,0,.2);
  white-space: nowrap;
}

.vizWrap{
  margin-top: 12px;
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(0,0,0,.22);
}
canvas{ width: 100%; height: 70px; display:block; }

.sectionTitle{
  font-weight:800;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.smallMuted{ font-size: 12px; color: var(--muted); }

.table{
  width: 100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(15,23,51,.35);
}
.table th, .table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
}
.table th{
  text-align:left;
  color: rgba(234,241,255,.88);
  font-weight: 800;
  background: rgba(255,255,255,.04);
}
.table tr:last-child td{ border-bottom: 0; }
.right{ text-align:right; font-variant-numeric: tabular-nums; }

.divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0;
}
.channelScroll{
  max-height: 260px;
  overflow:auto;
  padding-right: 4px;
}
.channelScroll::-webkit-scrollbar{ width: 8px; }
.channelScroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}

/* ===========================
   ✅ RESPONSIVE: taruh PALING BAWAH
   biar gak ketimpa style desktop
   =========================== */
@media (max-width: 900px){
  /* jadi 1 kolom untuk grid utama */
  .grid{ grid-template-columns: 1fr; }
  .wrap{ padding: 12px; justify-content: flex-start; }

  .header{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  #clock{ align-self: stretch; text-align: center; }

  /* ✅ NOW: logo kiri, teks kanan (kayak desktop) */
  .now{
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }
  .cover{ width: 84px; height: 84px; border-radius: 16px; }

  /* biar judul boleh turun baris, gak kepotong */
  .title{ white-space: normal; }

  /* controls tetap full */
  .controls{
    flex-direction: column;
    align-items: stretch;
  }
  .bigBtn{ width: 100%; min-width: 0; }

  .sliders{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .sliderBox{ width: 100%; }
  input[type="range"]{ width: 100%; }
  .smallBtn{ width: 100%; }
}
  .controls{
    flex-direction: column;
    align-items: stretch;
  }
  .bigBtn{
    width: 100%;
    min-width: 0;
  }

  .sliders{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .sliderBox{ width: 100%; }
  input[type="range"]{ width: 100%; }

  .smallBtn{ width: 100%; }

  /* biar title gak kepotong aneh di mobile */
  .title{ white-space: normal; }
}

@media (max-width: 420px){
  .wrap{ padding: 10px; }
  h1{ font-size: 16px; }
  .title{ font-size: 16px; }
}

/* ===========================
   DESKTOP RESET (balik kayak awal)
   =========================== */
@media (min-width: 1200px){
  /* grid kanan kembali seperti awal */
  .grid{
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  }

  /* header tetap sejajar */
  .header{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #clock{ text-align: left; width: auto; }

  /* NOW balik flex row */
  .now{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .cover{
    width: 96px !important;
    height: 96px !important;
    border-radius: 18px !important;
  }
  .title{ white-space: nowrap !important; }

  /* CONTROLS balik 1 baris (Play kiri, slider+tombol kanan) */
  .controls{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }
  .bigBtn{
    width: auto !important;
    min-width: 160px !important;
  }

  .sliders{
    width: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .sliderBox{ width: auto !important; }
  input[type="range"]{ width: 190px !important; }
  .smallBtn{ width: auto !important; }
}

/* ===========================
   MOBILE ONLY (HP)
   =========================== */
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
  .wrap{ padding: 12px; justify-content: flex-start; }

  .header{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  #clock{ align-self: stretch; text-align: center; }

  /* HP: cover kiri - teks kanan */
  .now{
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .cover{ width: 84px !important; height: 84px !important; border-radius: 16px !important; }
  .title{ white-space: normal !important; }

  /* HP: controls stack */
  .controls{
    flex-direction: column;
    align-items: stretch;
  }
  .bigBtn{ width: 100%; min-width: 0; }
  .sliders{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .sliderBox{ width: 100%; }
  input[type="range"]{ width: 100%; }
  .smallBtn{ width: 100%; }
}

/* HP super kecil */
@media (max-width: 420px){
  .now{ grid-template-columns: 72px minmax(0, 1fr) !important; gap: 10px !important; }
  .cover{ width: 72px !important; height: 72px !important; }
}