:root {
    --tv-dark: #111827;
    --tv-darker: #080d18;
    --tv-primary: #206bc4;
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; margin-right:.5rem; border-radius:.55rem; background:rgba(255,255,255,.12); }
.hero-section { position:relative; overflow:hidden; background:radial-gradient(circle at 80% 30%, rgba(32,107,196,.55), transparent 35%), linear-gradient(135deg,var(--tv-darker),var(--tv-dark)); }
.hero-section:after { content:""; position:absolute; inset:auto -10% -65% auto; width:32rem; height:32rem; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.hero-search .form-control { min-height:3.5rem; border:0; box-shadow:0 1rem 2rem rgba(0,0,0,.22); }
.hero-visual { width:18rem; height:18rem; margin:auto; display:flex; align-items:center; justify-content:center; position:relative; border:1px solid rgba(255,255,255,.12); border-radius:50%; background:rgba(255,255,255,.06); backdrop-filter:blur(12px); }
.hero-visual>i { font-size:7rem; opacity:.92; }
.live-orbit { position:absolute; inset:1rem; border:1px dashed rgba(255,255,255,.25); border-radius:50%; animation:spin 14s linear infinite; }
.live-orbit span { position:absolute; top:-.45rem; left:50%; width:.9rem; height:.9rem; border-radius:50%; background:#ef4444; box-shadow:0 0 1.2rem #ef4444; }
@keyframes spin { to { transform:rotate(360deg); } }
.filter-card { border:0; box-shadow:0 .3rem 1.5rem rgba(17,24,39,.06); }
.channel-card { border:1px solid rgba(98,105,118,.14); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; color:inherit; overflow:hidden; }
.channel-card:hover { transform:translateY(-4px); box-shadow:0 .75rem 2rem rgba(17,24,39,.12); border-color:rgba(32,107,196,.35); }
.channel-logo-wrap { position:relative; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; border-radius:.7rem; overflow:hidden; background:linear-gradient(145deg,#f8fafc,#e9eef5); }
.channel-logo { max-width:72%; max-height:66%; object-fit:contain; position:relative; z-index:2; }
.channel-logo-fallback { position:absolute; color:#98a2b3; font-size:2.4rem; }
.channel-logo-wrap:not(.logo-failed) .channel-logo~.channel-logo-fallback { opacity:.08; }
.live-badge { position:absolute; top:.55rem; right:.55rem; z-index:3; padding:.25rem .45rem; font-size:.65rem; font-weight:700; letter-spacing:.04em; border-radius:.35rem; color:#fff; background:rgba(17,24,39,.82); backdrop-filter:blur(6px); }
.live-dot,.status-dot { display:inline-block; width:.48rem; height:.48rem; margin-right:.25rem; border-radius:50%; background:#ef4444; box-shadow:0 0 0 .2rem rgba(239,68,68,.15); }
.channel-name { font-size:1rem; color:var(--tblr-body-color); }
.skeleton-card { min-height:15rem; border-radius:.75rem; background:linear-gradient(90deg,#eef1f5 25%,#f8fafc 37%,#eef1f5 63%); background-size:400% 100%; animation:skeleton 1.3s ease infinite; }
@keyframes skeleton { 0% { background-position:100% 0 } 100% { background-position:0 0 } }
.player-card { border:0; box-shadow:0 .8rem 2.5rem rgba(17,24,39,.14); }
.tv-player-shell { position:relative; width:100%; aspect-ratio:16/9; min-height:260px; background:#030712; overflow:hidden; }
.tv-video { display:block; width:100%; height:100%; background:#000; object-fit:contain; }
.player-poster,.player-loader,.player-error { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; color:#fff; background:radial-gradient(circle at center,rgba(32,107,196,.18),transparent 45%),#030712; }
.player-poster img { max-width:30%; max-height:30%; object-fit:contain; filter:drop-shadow(0 1rem 2rem rgba(0,0,0,.55)); }
.player-poster>i,.player-error>i { font-size:5rem; opacity:.7; }
.player-loader { background:rgba(3,7,18,.88); z-index:4; }
.player-error { background:rgba(3,7,18,.94); z-index:5; }
.player-status-pill { position:absolute; top:.8rem; left:.8rem; z-index:6; padding:.4rem .65rem; border-radius:999px; color:#fff; background:rgba(3,7,18,.72); backdrop-filter:blur(8px); font-size:.75rem; }
.player-status-pill.is-online .status-dot { background:#22c55e; box-shadow:0 0 0 .2rem rgba(34,197,94,.16); }
.player-status-pill.is-warning .status-dot { background:#f59e0b; box-shadow:0 0 0 .2rem rgba(245,158,11,.16); }
.source-info .badge { white-space:normal; text-align:left; }
@media (max-width:767.98px) {
    .hero-section .display-5 { font-size:2rem; }
    .tv-player-shell { min-height:210px; }
    .player-poster img { max-width:45%; max-height:35%; }
}

/* v1.2 category and event collections */
.category-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:.75rem; }
.category-tile { display:flex; align-items:center; gap:.8rem; min-height:4.75rem; padding:.9rem 1rem; border:1px solid rgba(98,105,118,.14); border-radius:.8rem; background:var(--tblr-card-bg,#fff); color:inherit; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.category-tile:hover { transform:translateY(-2px); border-color:rgba(32,107,196,.38); box-shadow:0 .55rem 1.5rem rgba(17,24,39,.08); color:inherit; }
.category-tile-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 2.75rem; width:2.75rem; height:2.75rem; border-radius:.7rem; color:var(--tv-primary); background:rgba(32,107,196,.1); font-size:1.35rem; }
.category-tile strong,.category-tile small { display:block; }
.category-tile small { margin-top:.1rem; color:var(--tblr-secondary-color); }
.category-tile-sports { color:#fff; border-color:transparent; background:linear-gradient(135deg,#0f766e,#14532d); }
.category-tile-sports:hover { color:#fff; border-color:transparent; box-shadow:0 .7rem 1.6rem rgba(20,83,45,.25); }
.category-tile-sports .category-tile-icon { color:#fff; background:rgba(255,255,255,.14); }
.category-tile-sports small { color:rgba(255,255,255,.68); }
.sports-section { background:radial-gradient(circle at 85% 20%,rgba(34,197,94,.22),transparent 28%),linear-gradient(135deg,#07140f,#102a1d); }
.sports-icon,.event-collection-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 3.4rem; width:3.4rem; height:3.4rem; border-radius:.9rem; font-size:1.65rem; }
.sports-icon { color:#fff; background:rgba(34,197,94,.2); border:1px solid rgba(255,255,255,.12); }
.sports-section .channel-card { background:#fff; }
.sports-empty,.event-empty { display:flex; align-items:center; gap:1rem; min-height:6rem; padding:1.15rem 1.25rem; border-radius:.8rem; }
.sports-empty { color:#fff; border:1px dashed rgba(255,255,255,.2); background:rgba(255,255,255,.06); }
.sports-empty>i,.event-empty>i { font-size:2rem; opacity:.75; }
.sports-empty strong,.sports-empty span,.event-empty strong,.event-empty span { display:block; }
.sports-empty span { color:rgba(255,255,255,.6); }
.event-collection-card { padding:1.4rem; border:1px solid rgba(32,107,196,.15); border-radius:1rem; background:linear-gradient(135deg,rgba(32,107,196,.06),rgba(255,255,255,.98)); box-shadow:0 .4rem 1.6rem rgba(17,24,39,.06); }
.event-collection-header { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; }
.event-collection-icon { color:#d97706; background:rgba(245,158,11,.12); }
.event-empty { color:var(--tblr-body-color); border:1px dashed rgba(98,105,118,.25); background:rgba(248,250,252,.78); }
.event-empty span { color:var(--tblr-secondary-color); }
.active-collection-bar { display:flex; align-items:center; justify-content:space-between; padding:.55rem .75rem; border-radius:.6rem; color:#1d4ed8; background:#eff6ff; }
@media (max-width:767.98px) {
    .category-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .category-tile { min-height:4.25rem; padding:.75rem; }
    .event-collection-header { align-items:flex-start; flex-direction:column; }
    .event-collection-header .btn { width:100%; }
}

/* v1.4 public accounts, favourites, reports and PWA */
.favourite-button { position:absolute; top:.55rem; left:.55rem; z-index:5; border:0; color:#475569; background:rgba(255,255,255,.9); box-shadow:0 .25rem .8rem rgba(15,23,42,.12); backdrop-filter:blur(6px); }
.favourite-button:hover,.favourite-button.is-favourite { color:#dc2626; background:#fff; }
.js-favourite-toggle.is-favourite { border-color:rgba(220,38,38,.35); color:#dc2626; }
.channel-card .card-body>a:focus-visible { outline:3px solid rgba(32,107,196,.35); outline-offset:4px; border-radius:.65rem; }
.account-stat { min-height:7rem; }
.list-group-item .avatar img { width:100%; height:100%; object-fit:contain; }
.navbar .dropdown-menu form { margin:0; }
.navbar .dropdown-menu form .dropdown-item { width:100%; text-align:left; border:0; background:transparent; }
.navbar .dropdown-menu form .dropdown-item.active { color:#fff; background:var(--tblr-primary); }
#pwa-install-button { cursor:pointer; }
@media (display-mode: standalone) { #pwa-install-item { display:none !important; } }

/* v1.5 EPG and programme guide */
.guide-date-strip { display:flex; gap:.65rem; overflow-x:auto; padding-bottom:.25rem; scrollbar-width:thin; }
.guide-date-button { flex:0 0 7rem; line-height:1.15; }
.guide-loading { padding:3rem; text-align:center; color:var(--tblr-secondary-color); }
.guide-programme-card { border-left:4px solid transparent; transition:border-color .18s ease,box-shadow .18s ease; }
.guide-programme-card.is-current { border-left-color:#ef4444; box-shadow:0 .35rem 1.2rem rgba(239,68,68,.08); }
.guide-programme-card.is-fifa { background:linear-gradient(90deg,rgba(245,158,11,.07),var(--tblr-card-bg,#fff) 38%); }
.guide-time { display:flex; flex-direction:column; min-width:4.75rem; }
.guide-time strong { font-size:1.15rem; color:var(--tblr-body-color); }
.guide-time span { color:var(--tblr-secondary-color); }
.guide-channel-link { display:flex; align-items:center; min-width:0; color:inherit; text-decoration:none; font-weight:600; }
.guide-channel-link:hover { color:var(--tblr-primary); }
.text-truncate-2 { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.epg-now-next-card { min-height:7.3rem; padding:1rem; border:1px solid rgba(98,105,118,.15); border-radius:.75rem; background:var(--tblr-card-bg,#fff); }
.epg-now-next-card.is-now { border-color:rgba(239,68,68,.23); background:linear-gradient(135deg,rgba(239,68,68,.07),var(--tblr-card-bg,#fff)); }
.channel-schedule-list { max-height:28rem; overflow-y:auto; }
.current-programme-row { border-left:3px solid #ef4444; padding-left:.75rem !important; background:rgba(239,68,68,.035); }
.programme-time { width:3.25rem; font-weight:700; }
.min-w-0 { min-width:0; }
@media (max-width:767.98px) {
    .guide-date-button { flex-basis:6.25rem; }
    .guide-time { flex-direction:row; gap:.4rem; min-width:0; }
    .guide-time strong:after { content:'–'; margin-left:.4rem; color:var(--tblr-secondary-color); }
}

/* v1.8 lightweight AJAX listing */
#channel-grid[aria-busy="true"], #guide-results[aria-busy="true"] { min-height: 18rem; }
.ajax-pagination-nav .page-link { min-width: 2.25rem; text-align: center; }
.ajax-pagination-nav button.page-link { cursor: pointer; }
.ajax-pagination-nav .page-item.active button.page-link { pointer-events: none; }
#channel-pagination.is-loading { min-height: 2.25rem; }
.channel-card-column { content-visibility: auto; contain-intrinsic-size: 260px; }
.guide-programme-card { content-visibility: auto; contain-intrinsic-size: 150px; }
.channel-logo { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
    .channel-card, .skeleton-card { transition: none !important; animation: none !important; }
}
.ajax-list-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.68); z-index:5; min-height:5rem; }
[data-ajax-list][aria-busy="true"] { pointer-events:none; }