/* DKL Football TV – sleek dark UI */
:root{ --bg:#0b1020; --panel:#0f1730; --card:#111a36; --border:#233053; --text:#dfe7ff; --muted:#8ea3d8; --accent:#4da3ff; --shadow:rgba(18,32,74,.5); }
*{ box-sizing:border-box } html,body{ margin:0; padding:0; font-family:'Kanit',system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; color:var(--text); background: radial-gradient(1200px 600px at 20% -10%, #1d2a52 0%, #0b1020 60%), #0b1020; }
a{ color:var(--accent); text-decoration:none } .container{ width:min(1200px, 100%); margin:0 auto; padding:0 16px; }
.site-header{ position:sticky; top:0; z-index:20; backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(5,8,18,.9), rgba(5,8,18,.65)); border-bottom:1px solid var(--border); }
.hdr-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700 } .brand-icon{ width:28px; height:28px; fill:var(--accent) }
.nav{ display:flex; gap:12px } .nav-link{ display:inline-flex; align-items:center; padding:8px 12px; border:1px solid transparent; border-radius:999px; color:#c9d5ff } .nav-link.active{ border-color:var(--border); background:#0f1730; color:#fff }
.hero{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center; padding:28px 0 } .hero-text h1{ font-size:clamp(22px,4vw,40px); margin:0 0 10px } .hero-text p{ color:var(--muted); margin:4px 0 14px }
.quick{ display:flex; gap:8px } .quick input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0c1530; color:#e8f0ff } .btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background: linear-gradient(180deg, #1b2648, #132147); color:#fff; cursor:pointer } .btn:hover{ filter:brightness(1.05) } .btn.outline{ background:transparent } .btn.watch{ background: linear-gradient(180deg, #2b6ef5, #1d46c3); border-color: rgba(255,255,255,.08) }

.panel{ display:none } .panel.visible{ display:block } .panel-title{ margin:8px 2px 12px; font-size:20px; color:#fff }
.grid.cards{ display:grid; grid-template-columns: repeat(12,1fr); gap:16px } .grid.cards.small{ grid-template-columns: repeat(6, 1fr) }
.card{ grid-column: span 12; background: radial-gradient(800px 280px at 0 -20%, rgba(74,125,255,.12), transparent), var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 10px 24px -16px var(--shadow); overflow:hidden }
@media (min-width:520px){ .card{ grid-column: span 6 } } @media (min-width:900px){ .card{ grid-column: span 4 } }
.card-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06) }
.league{ display:flex; align-items:center; gap:8px } .league img{ width:20px; height:20px }
.card-b{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:12px }
.team{ display:flex; align-items:center; gap:8px; font-weight:600 } .team img{ width:30px; height:30px }
.score{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:120px } .score-num{ font-size:22px; font-weight:700 } .time{ color:var(--muted); font-size:12px }
.card-f{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-top:1px solid rgba(255,255,255,.06) }
.channel{ display:flex; align-items:center; gap:8px; color:#cbd7ff } .chlogo{ width:24px; height:24px; border-radius:6px; background:#0e1534; border:1px solid var(--border) }
.badge{ display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; background:#0e1534; border:1px solid var(--border); color:#d8e1ff; font-size:12px }
.card.live .badge.live{ background:#1a3f2a; border-color:#2b8a57; color:#a9ffc7 }

/* --- Channels (improved) --- */
#panel-channels .grid.cards.small{ grid-template-columns: repeat(4, 1fr) }
@media (min-width:640px){ #panel-channels .grid.cards.small{ grid-template-columns: repeat(6, 1fr) } }
@media (min-width:1024px){ #panel-channels .grid.cards.small{ grid-template-columns: repeat(8, 1fr) } }
.card.ch.improved{ display:flex; flex-direction:column; text-align:center; background: radial-gradient(600px 220px at 50% -10%, rgba(77,163,255,.10), transparent), var(--card); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease }
.card.ch.improved:hover{ transform: translateY(-2px); box-shadow: 0 16px 28px -18px var(--shadow); border-color: rgba(255,255,255,.16) }
.ch-thumb{ position:relative; display:flex; align-items:center; justify-content:center; height:120px; padding:12px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); border-bottom:1px solid rgba(255,255,255,.06) }
@media (min-width:1024px){ .ch-thumb{ height:140px } }
.ch-thumb img{ max-width:75%; max-height:100%; object-fit:contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)) }
.no-logo{ width:88px; height:88px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:#0e1534; color:#8ea3d8; border:1px dashed var(--border); font-size:12px; letter-spacing:.4px }
.ch-meta{ padding:10px 12px 0 12px } .ch-name{ margin:6px 0 2px; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .ch-key{ color:var(--muted); font-size:12px; margin-bottom:6px }
.card.ch.improved .card-f{ padding:8px 12px 12px; justify-content:center } .card.ch.improved .btn.watch{ width:100%; justify-content:center }

/* Modal & misc (kept) */
.modal{ position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center } .modal.hidden{ display:none }
.modal-backdrop{ position:absolute; inset:0; background: rgba(3,6,14,.8) } .modal-body{ position:relative; background:var(--panel); border:1px solid var(--border); border-radius:16px; width:min(960px,92vw); max-height:86vh; overflow:auto; box-shadow:0 30px 60px -20px var(--shadow) } .modal-close{ position:absolute; top:8px; right:8px; background:transparent; border:none; color:#fff; font-size:22px; cursor:pointer }
.fx-head{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; padding:16px; border-bottom:1px solid rgba(255,255,255,.08) } .fx-head .side{ display:flex; justify-content:center } .fx-score{ display:flex; align-items:center; gap:22px; font-size:28px; font-weight:700 }
.fx-flex{ display:grid; grid-template-columns:1fr; gap:12px; padding:12px } @media (min-width:860px){ .fx-flex{ grid-template-columns:1fr 1fr } }
.fx-col{ background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px }
.ev{ display:flex; gap:8px; padding:6px 8px; align-items:center } .ev.home{ background: linear-gradient(90deg, rgba(77,163,255,.05), transparent) } .ev.away{ background: linear-gradient(90deg, rgba(163,107,255,.05), transparent) }
.ev .min{ font-variant-numeric: tabular-nums; color:#a6b7e3; width:42px } .ev .type{ font-size:12px; color:#b8c6ee; padding:2px 6px; border:1px solid rgba(255,255,255,.1); border-radius:6px } .ev .detail{ color:#8ea3d8; margin-left:auto }
.h2h{ display:grid; gap:8px } .h2h-row{ display:grid; grid-template-columns:1fr auto auto auto; gap:10px; align-items:center; padding:6px 8px; background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:8px }
.lineup{ padding:12px } .lu{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px; background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:8px; margin-bottom:8px } .lu h4{ margin:4px 0 } .lu ul{ list-style:none; margin:0; padding:0; columns:2; column-gap:18px }

.site-footer{ margin-top:24px; border-top:1px solid var(--border); background:#0c142c } .ft{ padding:20px 0; color:#a6b7e3; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap }


/* Force channel cards to occupy 1 grid column within the channels grid */
#panel-channels .grid.cards.small .card.ch { grid-column: span 1 !important; min-width: 0; }

/* Tighten paddings/height further for desktop to fit more items */
@media (min-width:1024px){
  .ch-thumb{ height:110px; padding:10px; }
  .ch-name{ font-size:14px; }
  .ch-key{ font-size:11px; }
  .card.ch.improved .card-f{ padding:8px 10px 12px; }
}

/* Channel filter chips */
.chipbar{ display:flex; gap:8px; flex-wrap:wrap; margin: 8px 2px 14px; }
.chip{ border:1px solid var(--border); background:#0f1730; color:#c9d5ff; border-radius:999px; padding:6px 10px; cursor:pointer; }
.chip.active{ color:#fff; border-color: rgba(255,255,255,.18); background: linear-gradient(180deg, #1b2648, #132147); }