:root {
  --bg: #0b0d10;
  --panel: #14171c;
  --panel-2: #1c2027;
  --line: #262b33;
  --text: #eef1f5;
  --muted: #8a93a0;
  --accent: #e82127;
  --accent-2: #ff4d52;
  --radius: 14px;
  --nav: 200px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body {
  font: 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; overflow: hidden; user-select: none;
}
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg .fill, svg text { fill: currentColor; stroke: none; }
svg text { font: 700 7px system-ui; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select {
  font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; min-height: 52px; outline: none; width: 100%;
}
input:focus, select:focus { border-color: var(--accent); }
.hidden { display: none !important; }
.muted { color: var(--muted); }

/* nav */
.nav { width: var(--nav); flex: none; background: var(--panel); border-right: 1px solid var(--line); padding: 20px 12px; display: flex; flex-direction: column; gap: 6px; }
.brand { font-size: 20px; padding: 4px 12px 22px; display: flex; align-items: center; gap: 8px; letter-spacing: .2px; }
.brand b { color: var(--accent); }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.tab { display: flex; align-items: center; gap: 14px; padding: 16px 14px; border-radius: 12px; color: var(--muted); font-weight: 600; text-align: left; }
.tab.active { background: var(--panel-2); color: var(--text); }
.tab.active svg { color: var(--accent); }

main { flex: 1; min-width: 0; position: relative; }
.view { position: absolute; inset: 0; overflow-y: auto; padding: 20px 24px 40px; display: none; }
.view.active { display: block; }
.bar { display: flex; gap: 12px; margin-bottom: 14px; position: sticky; top: -20px; padding-top: 0; z-index: 2; }
.bar .grow { flex: 1; }
.bar select { width: auto; max-width: 260px; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 10px 18px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-weight: 600; white-space: nowrap; }
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }

.grid { display: grid; gap: 14px; }
.grid.channels { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.grid.videos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.ch { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; align-items: center; gap: 12px; text-align: left; min-height: 78px; position: relative; }
.ch:active, .vid:active { transform: scale(.98); }
.ch .logo { width: 50px; height: 50px; flex: none; border-radius: 10px; background: var(--panel-2) center/contain no-repeat; display: grid; place-items: center; font-weight: 700; color: var(--muted); overflow: hidden; }
.ch .logo img { width: 100%; height: 100%; object-fit: contain; }
.ch .nm { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ch .star { position: absolute; top: 6px; right: 6px; padding: 6px; color: var(--muted); }
.ch .star.on { color: #ffc940; }
.ch .star svg { width: 18px; height: 18px; }
.ch .star.on svg { fill: currentColor; }

.vid { text-align: left; }
.vid .th { aspect-ratio: 16/9; border-radius: var(--radius); background: var(--panel-2) center/cover; position: relative; }
.vid .th span { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.8); padding: 2px 7px; border-radius: 6px; font-size: 14px; font-weight: 600; }
.vid .th span.live { background: var(--accent); }
.vid .t { font-weight: 600; margin-top: 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vid .c { color: var(--muted); font-size: 15px; }

.empty { text-align: center; padding: 80px 20px; color: var(--muted); }
.empty h2 { color: var(--text); margin: 0 0 8px; }
.more { grid-column: 1 / -1; }

.btn { padding: 14px 22px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-weight: 700; min-height: 52px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* settings */
.settings { max-width: 760px; display: grid; gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card h3 { margin: 0 0 6px; }
.seg { display: flex; background: var(--panel-2); border-radius: 12px; padding: 4px; gap: 4px; margin: 12px 0; }
.seg button { flex: 1; padding: 14px 8px; border-radius: 9px; color: var(--muted); font-weight: 600; }
.seg button.on { background: var(--text); color: var(--bg); }
.seg.small button { padding: 10px 8px; }
.stack { display: grid; gap: 10px; }
.row { display: flex; gap: 10px; }
.src { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.src > div { flex: 1; min-width: 0; }
.src small { color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* player */
.player { position: fixed; inset: 0; background: #000; z-index: 50; display: grid; place-items: center; }
.player canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.radio-art { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 30px; background: radial-gradient(circle at 50% 40%, #2a1214, #000 70%); }
.radio-art img { width: 220px; height: 220px; object-fit: contain; border-radius: 28px; background: var(--panel-2); }
.eq { display: flex; gap: 6px; height: 40px; align-items: flex-end; }
.eq i { width: 8px; background: var(--accent); border-radius: 4px; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s } .eq i:nth-child(3) { animation-delay: -.6s } .eq i:nth-child(4) { animation-delay: -.15s } .eq i:nth-child(5) { animation-delay: -.45s }
@keyframes eq { 0%,100% { height: 8px } 50% { height: 40px } }
.paused .eq i { animation-play-state: paused; }

.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; transition: opacity .25s; background: linear-gradient(rgba(0,0,0,.7), transparent 22%, transparent 70%, rgba(0,0,0,.8)); }
.player.idle .overlay { opacity: 0; pointer-events: none; }
.top, .bottom { padding: 18px 22px; }
.top { display: flex; align-items: center; gap: 14px; }
.title { flex: 1; min-width: 0; }
.title > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#p-title { font-size: 20px; font-weight: 700; }
.icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); flex: none; }
.icon:active { background: rgba(255,255,255,.2); }
.icon svg { width: 28px; height: 28px; }
.icon.big { width: 80px; height: 80px; background: rgba(255,255,255,.15); }
.icon.big svg { width: 36px; height: 36px; fill: currentColor; stroke: none; }
.icon .i-play { display: none; }
.paused .icon .i-play { display: inline; }
.paused .icon .i-pause { display: none; }
.controls { display: flex; align-items: center; justify-content: center; gap: 22px; position: relative; }
.vol { position: absolute; right: 0; display: flex; align-items: center; gap: 10px; width: 220px; }
.vol input { padding: 0; min-height: 0; }
.seek { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.seek input { flex: 1; padding: 0; min-height: 0; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; background: rgba(255,255,255,.25); border: 0; border-radius: 3px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.spinner { position: absolute; width: 64px; height: 64px; border: 5px solid rgba(255,255,255,.15); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.p-error { position: absolute; max-width: 600px; text-align: center; background: var(--panel); border: 1px solid var(--line); padding: 20px 24px; border-radius: var(--radius); }

.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 40px); opacity: 0; background: var(--panel-2); border: 1px solid var(--line); padding: 14px 20px; border-radius: 12px; transition: .25s; z-index: 99; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  body { flex-direction: column-reverse; }
  .nav { width: auto; flex-direction: row; padding: 6px; border-right: 0; border-top: 1px solid var(--line); }
  .brand { display: none; }
  .tab { flex: 1; flex-direction: column; gap: 4px; font-size: 12px; padding: 8px 4px; }
  .view { padding: 16px 16px 30px; }
  .grid.channels { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .vol { display: none; }
  .controls { gap: 10px; }
}