/* Belka TV theme — light, orange accent, Nunito / Inter */
:root {
  --orange: #f97316; --orange-dark: #ea6c0a; --orange-50: #fff7ed; --orange-100: #ffedd5; --orange-200: #fed7aa;
  --bg: #ffffff; --bg-soft: #f9fafb; --bg-card: #ffffff;
  --g100: #f3f4f6; --g200: #e5e7eb; --g300: #d1d5db; --g400: #9ca3af; --g500: #6b7280; --g600: #4b5563; --g700: #374151; --g900: #111827;
  --text: #111827; --text2: #4b5563; --muted: #9ca3af; --border: #e5e7eb;
  --radius: 1.25rem; --radius-sm: .75rem; --side: 272px;
  --shadow-card: 0 2px 16px rgba(0,0,0,.06); --shadow-card-hover: 0 8px 32px rgba(0,0,0,.1);
  --shadow-orange: 0 4px 16px rgba(249,115,22,.3);
  --font-display: 'Nunito', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--orange); text-decoration: none; transition: color .2s; } a:hover { color: var(--orange-dark); }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, .brand { font-family: var(--font-display); letter-spacing: -.01em; }
::selection { background: rgba(249,115,22,.2); }
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--g100); }
::-webkit-scrollbar-thumb { background: var(--g300); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--orange); }
.muted { color: var(--muted); font-weight: 400; font-size: .75em; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 24px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--g100); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--g900); font-weight: 800; font-size: 20px; white-space: nowrap; }
.brand:hover { color: var(--g900); }
.brand-icon { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, #fb923c, var(--orange-dark)); color: #fff; display: grid; place-items: center;
  font-size: 14px; box-shadow: var(--shadow-orange); transition: transform .2s; }
.brand:hover .brand-icon { transform: scale(1.05); }
.brand em { font-style: normal; color: var(--orange); }
.burger { display: none; background: none; border: 2px solid var(--g200); color: var(--g700); border-radius: 999px; padding: 4px 11px; font-size: 16px; }
.search { display: flex; flex: 1; max-width: 400px; margin-left: auto; }
.search input { flex: 1; background: var(--bg-soft); border: 2px solid var(--g200); border-right: 0; color: var(--text); padding: 8px 16px; border-radius: 999px 0 0 999px; outline: none; font: inherit; transition: border-color .2s; }
.search input:focus { border-color: var(--orange); }
.search button { background: var(--bg-soft); border: 2px solid var(--g200); border-left: 0; border-radius: 0 999px 999px 0; padding: 0 14px; color: var(--g500); }
.search input:focus + button { border-color: var(--orange); }
.admin-link { color: var(--g500); font-size: 13px; font-weight: 600; }

/* layout */
.layout { display: flex; min-height: calc(100vh - 61px); }
.sidebar { width: var(--side); flex: none; background: var(--bg-soft); border-right: 1px solid var(--g200); position: sticky; top: 61px;
  height: calc(100vh - 61px); overflow-y: auto; display: flex; flex-direction: column; }
.content { flex: 1; min-width: 0; padding: 24px 28px 48px; }
.cats { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; border-bottom: 1px solid var(--g200); }
.cat { color: var(--g600); padding: 8px 14px; border-radius: 999px; display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; transition: background .15s, color .15s; }
.cat:hover { background: var(--g100); color: var(--orange); }
.cat.active { background: var(--orange); color: #fff; box-shadow: var(--shadow-orange); }
.cnt { color: var(--muted); font-size: 12px; font-weight: 600; } .cat.active .cnt { color: var(--orange-100); }
.side-list { padding: 12px; }
.side-filter { width: 100%; background: #fff; border: 2px solid var(--g200); color: var(--text); padding: 7px 14px; border-radius: 999px; margin-bottom: 8px; font: inherit; outline: none; }
.side-filter:focus { border-color: var(--orange); }
.side-list ul { list-style: none; margin: 0; padding: 0; }
.side-list a { display: flex; align-items: center; gap: 10px; color: var(--g700); padding: 5px 8px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.side-list a:hover { background: #fff; color: var(--orange); box-shadow: var(--shadow-card); }
.side-list a.active { background: var(--orange-50); color: var(--orange-dark); border: 1px solid var(--orange-200); }
.side-list img { width: 38px; height: 26px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; border: 1px solid var(--g200); }
.nologo { width: 38px; height: 26px; display: grid; place-items: center; background: var(--orange-50); border-radius: 6px; font-size: 11px; color: var(--orange); font-weight: 800; font-family: var(--font-display); }
.nologo.big { width: 100%; height: 100%; font-size: 24px; }

/* home */
.page-title { font-size: 28px; font-weight: 800; margin: 0 0 18px; color: var(--g900); }
.featured { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.feat { width: 116px; height: 64px; background: #fff; border: 1px solid var(--g200); border-radius: var(--radius-sm); padding: 8px; display: grid; place-items: center;
  box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s; }
.feat:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--orange-200); }
.feat img { max-height: 48px; object-fit: contain; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 16px; }
.grid.small { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
.card { position: relative; background: var(--bg-card); border: 1px solid var(--g200); border-radius: var(--radius); padding: 12px; color: var(--text);
  box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s, border-color .2s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--orange-200); color: var(--text); }
.card-logo { height: 72px; background: #fff; border-radius: var(--radius-sm); display: grid; place-items: center; padding: 6px; background: var(--bg-soft); }
.card-logo img { max-height: 60px; object-fit: contain; }
.card-name { margin-top: 10px; text-align: center; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-badge { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 700; background: var(--orange); color: #fff; padding: 2px 8px; border-radius: 999px; box-shadow: var(--shadow-orange); }
.empty { color: var(--muted); }
.seo-text { margin-top: 32px; color: var(--text2); max-width: 900px; line-height: 1.7; }
.seo-text h2, .h2 { font-size: 22px; font-weight: 800; color: var(--g900); margin: 28px 0 12px; }
.seo-text ul { padding-left: 20px; }

/* channel */
.channel-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ch-logo { width: 96px; height: 58px; object-fit: contain; background: #fff; border: 1px solid var(--g200); border-radius: var(--radius-sm); padding: 5px; box-shadow: var(--shadow-card); }
.ch-title { font-size: 28px; font-weight: 800; margin: 0; color: var(--g900); }
.live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--orange-dark); background: var(--orange-50); border: 1px solid var(--orange-200); padding: 3px 10px; border-radius: 999px; vertical-align: middle; margin-left: 8px; }
.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(1.25); } }
.ch-meta { color: var(--g500); font-size: 14px; margin-top: 4px; }
.ch-meta a { font-weight: 600; }
.now-title b { color: var(--g900); }
.player-wrap { display: grid; gap: 20px; grid-template-columns: 1fr; }
.player-wrap.with-epg { grid-template-columns: minmax(0, 1fr) 310px; }
.player { position: relative; width: 100%; aspect-ratio: 16/9; background: #111827; border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 40px rgba(17,24,39,.18); }
.player video, .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.player-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: #fff; background: rgba(17,24,39,.75); z-index: 2; font-weight: 500; }
.player-msg a { color: #fdba74; }
.unmute { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--orange); color: #fff; border: 0; padding: 8px 16px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; box-shadow: var(--shadow-orange); }
.unmute:hover { background: var(--orange-dark); }
.sources { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.sources-label { color: var(--g500); font-size: 14px; font-weight: 600; }
.sources-hint { color: var(--muted); font-size: 12px; margin-left: auto; }
.src { background: #fff; color: var(--g700); border: 2px solid var(--g200); padding: 7px 18px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 14px; transition: border-color .2s, color .2s, background .2s; }
.src:hover { border-color: var(--orange); color: var(--orange); }
.src.active { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: var(--shadow-orange); }

/* epg */
.epg { background: var(--bg-card); border: 1px solid var(--g200); border-radius: var(--radius); max-height: 640px; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-card); }
.epg-head { padding: 12px 16px; font-family: var(--font-display); font-weight: 800; font-size: 16px; border-bottom: 1px solid var(--g200); }
.epg-days { display: flex; overflow-x: auto; border-bottom: 1px solid var(--g200); padding: 0 6px; }
.epg-day { flex: none; background: none; border: 0; color: var(--g500); padding: 9px 12px; font-size: 13px; font-weight: 600; border-bottom: 2px solid transparent; text-transform: capitalize; }
.epg-day:hover { color: var(--orange); }
.epg-day.active { color: var(--orange-dark); border-bottom-color: var(--orange); }
.epg-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; }
.epg-list li { display: flex; gap: 10px; padding: 6px 16px; font-size: 13px; color: var(--g700); }
.epg-list li.past { color: var(--muted); }
.epg-list li.live { background: var(--orange-50); color: var(--g900); font-weight: 600; box-shadow: inset 3px 0 0 var(--orange); }
.epg-list .t { color: var(--muted); flex: none; width: 42px; font-variant-numeric: tabular-nums; }
.epg-list li.live .t { color: var(--orange-dark); font-weight: 700; }

.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 20px 28px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--g200); background: var(--bg-soft); }
.footer a { color: var(--g600); font-weight: 500; } .footer a:hover { color: var(--orange); }

@media (max-width: 960px) {
  .player-wrap.with-epg { grid-template-columns: 1fr; }
  .epg { max-height: 420px; }
}
@media (max-width: 760px) {
  .burger { display: block; }
  .topbar { padding: 10px 14px; }
  .sidebar { position: fixed; left: 0; top: 57px; height: calc(100vh - 57px); transform: translateX(-100%); transition: transform .25s; z-index: 15; width: 286px; }
  .sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  .content { padding: 16px; }
  .search { max-width: none; }
  .brand-text { display: none; }
  .ch-title { font-size: 21px; } .page-title { font-size: 22px; }
}

/* ===== additions: tabs, favorites, popular, report, radio ===== */
.kind-tabs { display: flex; gap: 4px; background: var(--g100); padding: 4px; border-radius: 999px; margin-left: 8px; }
.kind-tabs a { padding: 6px 14px; border-radius: 999px; color: var(--g600); font-weight: 700; font-family: var(--font-display); font-size: 14px; white-space: nowrap; }
.kind-tabs a:hover { color: var(--orange); }
.kind-tabs a.active { background: #fff; color: var(--g900); box-shadow: var(--shadow-card); }
.side-user { padding: 10px 12px 0; }
.side-sec-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 6px 8px 4px; }
.side-sec ul { list-style: none; margin: 0 0 6px; padding: 0; }
.side-sec a { display: flex; align-items: center; gap: 10px; color: var(--g700); padding: 5px 8px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.side-sec a:hover { background: #fff; color: var(--orange); box-shadow: var(--shadow-card); }
.side-sec img { width: 38px; height: 26px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; border: 1px solid var(--g200); }
.fav-btn { background: none; border: 2px solid var(--g200); color: var(--g400); width: 36px; height: 36px; border-radius: 999px; font-size: 18px; line-height: 1; vertical-align: middle; margin-left: 6px; transition: all .2s; }
.fav-btn:hover, .fav-btn.on { border-color: var(--orange); color: var(--orange); }
.fav-btn.on { background: var(--orange-50); }
.h2.first { margin-top: 4px; }
.popular { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pop { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--g200); border-radius: 999px; padding: 5px 14px 5px 6px; color: var(--g700); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-card); transition: all .2s; }
.pop:hover { border-color: var(--orange-200); color: var(--orange); transform: translateY(-1px); }
.pop-n { width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; font-family: var(--font-display); }
.pop img { width: 34px; height: 22px; object-fit: contain; border-radius: 4px; }
.quality { background: #fff; border: 2px solid var(--g200); border-radius: 999px; padding: 5px 12px; font: inherit; font-weight: 600; color: var(--g700); }
.report-btn { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 999px; }
.report-btn:hover { color: var(--orange); background: var(--orange-50); }
.report-box { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; }
.report-box input { flex: 1; min-width: 200px; border: 2px solid var(--g200); border-radius: 999px; padding: 7px 14px; font: inherit; outline: none; }
.report-box input:focus { border-color: var(--orange); }
.btn-pill { background: var(--orange); color: #fff; border: 2px solid var(--orange); border-radius: 999px; padding: 7px 18px; font-family: var(--font-display); font-weight: 700; font-size: 14px; box-shadow: var(--shadow-orange); }
.btn-pill:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.btn-pill.ghost { background: #fff; color: var(--g700); border-color: var(--g200); box-shadow: none; } .btn-pill.ghost:hover { border-color: var(--orange); color: var(--orange); }
.sources-hint { display: none; }

/* radio */
.station-hero { display: flex; gap: 18px; align-items: center; background: var(--bg-soft); border: 1px solid var(--g200); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; }
.station-hero .ch-logo { width: 120px; height: 80px; }
.grow { flex: 1; min-width: 0; }
.row-gap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.card-logo { position: relative; }
.card-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 26px; background: rgba(249,115,22,.85); border-radius: var(--radius-sm); opacity: 0; transition: opacity .2s; }
.card.play-station:hover .card-play { opacity: 1; }
.card.playing { border-color: var(--orange); box-shadow: var(--shadow-orange); }
.card.playing .card-play { opacity: 1; background: rgba(249,115,22,.92); }
.card.playing .card-play::after { content: ' ♪'; }
.pop.playing { border-color: var(--orange); color: var(--orange); }
body.has-mini { padding-bottom: 84px; }
.mini-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--g200); box-shadow: 0 -8px 32px rgba(0,0,0,.08); }
.mp-logo { width: 56px; height: 40px; object-fit: contain; background: #fff; border: 1px solid var(--g200); border-radius: 10px; padding: 3px; }
.mp-info { flex: 1; min-width: 0; }
.mp-name { font-family: var(--font-display); font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-status { font-size: 12px; color: var(--g500); } .mp-status.bad { color: #dc2626; }
.mp-sources { display: flex; gap: 6px; }
.mp-src { background: #fff; border: 2px solid var(--g200); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; color: var(--g600); }
.mp-src.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.mp-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--orange); color: #fff; font-size: 18px; box-shadow: var(--shadow-orange); }
.mp-btn:hover { background: var(--orange-dark); }
.mp-btn.ghost { background: none; color: var(--g400); box-shadow: none; width: 36px; height: 36px; } .mp-btn.ghost:hover { color: var(--g700); }
.mp-vol { width: 100px; accent-color: var(--orange); }
@media (max-width: 760px) {
  .kind-tabs { margin-left: 0; } .kind-tabs a { padding: 5px 10px; font-size: 13px; }
  .mp-sources, .mp-vol, .mp-logo { display: none; }
  .station-hero { flex-direction: column; align-items: flex-start; }
}

.player-link { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(160deg, #1f2937, #111827); color: #fff; text-align: center; padding: 20px; z-index: 2; }
.player-link img { max-height: 70px; max-width: 160px; background: #fff; border-radius: 12px; padding: 6px; }
.player-link p { margin: 0; color: #cbd5e1; }
.btn-pill.big { padding: 12px 28px; font-size: 16px; }