/* TVGratis.ro – Prototype UI Kit (GPT) */
:root{
  --bg-primary:#0a0a0a;
  --bg-secondary:#111111;
  --bg-card:#1a1a1a;
  --bg-card-hover:#222222;
  --bg-elevated:#252525;

  --text-primary:#ffffff;
  --text-secondary:#b0b0b0;
  --text-muted:#707070;

  --accent:#10B981;
  --accent-hover:#0d9668;
  --accent-blue:#3B82F6;
  --accent-red:#EF4444;
  --accent-yellow:#F59E0B;

  --border:#2a2a2a;
  --border-light:#3a3a3a;

  --radius-sm:.375rem;
  --radius-md:.5rem;
  --radius-lg:.75rem;
  --radius-xl:1rem;
  --radius-2xl:1.5rem;
  --radius-full:9999px;

  --shadow-lg:0 10px 25px rgba(0,0,0,.5);
  --shadow-glow:0 0 20px rgba(16,185,129,.28);
  --shadow-soft:0 8px 22px rgba(0,0,0,.22);

  --t-fast:150ms ease;
  --t-normal:250ms ease;
  --container:1200px;

  --nav-h:60px;
  --bottom-nav-h:64px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
}
.skip-link{
  position:absolute;left:-9999px;top:auto;
  background:var(--bg-card);
  color:var(--text-primary);
  border:1px solid var(--border-light);
  border-radius:var(--radius-md);
  padding:.6rem .85rem;
  z-index:1000;
  font-weight:800;
}
.skip-link:focus{
  left:1rem;
  top:.75rem;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button, input, select{font-family:inherit}
button{cursor:pointer;border:none;background:none}

/* Keyboard accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid rgba(16,185,129,.65);
  outline-offset:3px;
  border-radius:6px;
}

ul{list-style:none}
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}

/* Header */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header .bar{
  height:var(--nav-h);
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:800;letter-spacing:.2px}
.logo .badge{color:var(--accent)}
.logo .icon{
  width:1.35rem;
  height:1.35rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.logo .icon svg{
  width:100%;
  height:100%;
  display:block;
}
.nav-desktop{display:none;gap:.35rem;align-items:center}
@media (min-width:1024px){.nav-desktop{display:flex}}
.nav-link{
  padding:.5rem .9rem;border-radius:var(--radius-md);
  color:var(--text-secondary);font-weight:600;font-size:.95rem;
  transition:background var(--t-fast), color var(--t-fast);
}
.nav-link:hover{background:var(--bg-card);color:var(--text-primary)}
.nav-link.active{color:var(--accent)}
.nav-link-primary{
  border:1px solid rgba(16,185,129,.26);
  background:rgba(16,185,129,.08);
  color:var(--text-primary);
}
.nav-link-primary:hover{
  border-color:rgba(16,185,129,.42);
  background:rgba(16,185,129,.14);
}
.nav-link-primary.active{
  border-color:rgba(16,185,129,.56);
  background:rgba(16,185,129,.18);
}

/* Search (desktop) */
.search{position:relative;flex:1;max-width:480px;display:none}
@media (min-width:768px){.search{display:block}}
.search input{
  width:100%;height:42px;
  padding:0 44px 0 42px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  color:var(--text-primary);
  outline:none;
  transition:border var(--t-fast), box-shadow var(--t-fast);
}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.search .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted)}
.search .icon svg{
  width:1rem;
  height:1rem;
  display:block;
}
.search .clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:var(--radius-sm);
  display:none;align-items:center;justify-content:center;
  color:var(--text-muted);
}
.search .clear:hover{background:var(--bg-elevated);color:var(--text-primary)}
.search .clear.visible{display:flex}
@media (min-width:1280px){
  .search{max-width:540px}
}

/* Search results dropdown */
.search-results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  display:none;
  z-index:200;
  max-height:420px;
}
.search-results.active{display:block}
.search-results .hdr{
  padding:.75rem 1rem;
  font-size:.75rem;font-weight:800;
  color:var(--text-muted);
  background:var(--bg-secondary);
  letter-spacing:.06em;
  text-transform:uppercase;
  border-bottom:1px solid var(--border);
}
.search-item{
  display:flex;align-items:center;gap:.9rem;
  padding:.75rem 1rem;
  cursor:pointer;
  transition:background var(--t-fast);
}
.search-item:hover{background:var(--bg-elevated)}
.search-item .thumb{
  width:48px;height:32px;border-radius:var(--radius-sm);
  background:var(--bg-secondary);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  flex-shrink:0;
}
.search-item .meta{min-width:0;flex:1}
.search-item .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-item .sub{font-size:.82rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-item mark{background:transparent;color:var(--accent);font-weight:900}
.pill-live{
  font-size:.7rem;font-weight:900;
  padding:2px 8px;border-radius:var(--radius-sm);
  background:var(--accent-red);color:#fff;letter-spacing:.06em;text-transform:uppercase;
}

/* Header actions (mobile) */
.actions{display:flex;align-items:center;gap:.25rem}
.icon-btn{
  width:40px;height:40px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);
  transition:background var(--t-fast), color var(--t-fast);
}
.icon-btn .i{
  width:1.1rem;
  height:1.1rem;
  display:block;
}
.icon-btn .i svg{
  width:100%;
  height:100%;
  display:block;
}
.icon-btn:hover{background:var(--bg-card);color:var(--text-primary)}
@media (min-width:768px){.icon-btn.search-toggle{display:none}}

/* Hero */
.hero{
  padding:3.25rem 0 2.25rem;
  background:linear-gradient(180deg, rgba(16,185,129,.12), transparent 65%);
  position:relative;
}
.hero h1{font-size:clamp(2rem, 5vw, 3rem);line-height:1.15;font-weight:900;margin:.6rem 0 1rem}
.hero h1 span{color:var(--accent)}
.hero p{max-width:720px;color:var(--text-secondary);font-size:1.05rem}
.hero .row{display:flex;flex-direction:column;gap:1.25rem}
.hero .badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:var(--radius-full);
  background:rgba(16,185,129,.14);
  border:1px solid rgba(16,185,129,.28);
  color:var(--accent);
  font-weight:800;
  width:max-content;
}
.dot{width:10px;height:10px;border-radius:var(--radius-full);background:var(--accent);box-shadow:var(--shadow-glow)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;max-width:520px;margin-top:1rem}
.stat{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:1rem;
}
.stat .v{font-weight:900;font-size:1.35rem}
.stat .l{color:var(--text-muted);font-size:.85rem;font-weight:700}

/* Sections */
.section{padding:1.5rem 0}
.section.section-compact-top{padding-top:.5rem}
.section .head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.section .head.head-tight{margin-bottom:.5rem}
.section h2{font-size:1.25rem;font-weight:900}
.section .hint{color:var(--text-muted);font-weight:600;font-size:.92rem}
.section .link{
  color:var(--accent);font-weight:800;font-size:.92rem;
}
.section .link:hover{text-decoration:underline}

/* Chips / filters */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .75rem;border-radius:var(--radius-full);
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text-secondary);
  font-weight:800;font-size:.9rem;
  transition:background var(--t-fast), border var(--t-fast), color var(--t-fast);
}
.chip:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.chip.active{border-color:rgba(16,185,129,.6);color:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,.08) inset}

/* Channels page toolbar */
.channels-toolbar{
  display:flex;
  gap:.5rem;
  flex-wrap:nowrap;
  align-items:center;
  margin-bottom:.75rem;
  width:100%;
}
.channels-search-input{
  flex:1 1 auto;
  min-width:0;
  width:auto;
}
.channels-toolbar select.select{
  flex:0 0 190px;
}
@media (max-width:900px){
  .channels-toolbar{
    flex-wrap:wrap;
  }
}
@media (max-width:700px){
  .channels-search-input{
    flex:1 1 100%;
    min-width:0;
  }
  .channels-toolbar select.select{
    flex:1 1 calc(50% - .3rem);
    min-width:0;
  }
}

/* Grid cards */
.grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.9rem;
}
@media (min-width:640px){.grid{grid-template-columns:repeat(3, minmax(0,1fr))}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(4, minmax(0,1fr))}}

.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  transition:transform var(--t-normal), border var(--t-fast), box-shadow var(--t-normal);
}
.card:hover{transform:translateY(-4px);border-color:rgba(16,185,129,.55);box-shadow:var(--shadow-lg), var(--shadow-glow)}
.card .media{
  aspect-ratio:16/9;
  background:linear-gradient(135deg, rgba(59,130,246,.25), rgba(16,185,129,.08));
  border-bottom:1px solid var(--border);
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.card .media img{width:100%;height:100%;object-fit:contain;padding:14px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.badges{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:3}
.badge{
  font-size:.7rem;font-weight:900;
  padding:2px 8px;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.45);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.badge.live{background:rgba(239,68,68,.75)}
.badge.hd{background:rgba(245,158,11,.65)}

/* Quick actions inside cards */
.card .play{
  position:absolute;left:10px;bottom:10px;z-index:4;
  width:44px;height:44px;border-radius:var(--radius-md);
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.92);
  font-weight:950;
  transition:transform var(--t-fast), background var(--t-fast);
}
.card .play:hover{transform:scale(1.06);background:rgba(0,0,0,.72)}

.card .source-pill{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:.45rem;
  padding:.25rem .5rem;
  border-radius:var(--radius-full);
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);
  font-size:.72rem;
  font-weight:900;
  line-height:1;
  white-space:nowrap;overflow:hidden;
}
.card .source-pill .src{
  padding:.15rem .4rem;border-radius:var(--radius-full);
  background:rgba(16,185,129,.18);
  border:1px solid rgba(16,185,129,.22);
  color:var(--accent);
  font-weight:950;
}
.card .source-pill .host{
  opacity:.9;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
}

/* Reduce perceived density on huge grids (Chrome/Edge) */
.channels-grid .card{content-visibility:auto;contain-intrinsic-size: 280px 210px}
.card .body{padding:.9rem .95rem .95rem}
.card .title{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .meta{margin-top:.2rem;color:var(--text-muted);font-size:.85rem;font-weight:700;display:flex;gap:.5rem;align-items:center}
.rating{display:inline-flex;align-items:center;gap:.25rem;color:var(--accent-yellow);font-weight:900}
.progress{
  margin-top:.6rem;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  height:10px;overflow:hidden;
}
.progress > div{height:100%;width:45%;background:linear-gradient(90deg, var(--accent), rgba(16,185,129,.55))}
.nowline{margin-top:.45rem;font-size:.85rem;color:var(--text-secondary);font-weight:700}
.nowline b{color:var(--text-primary)}
.card .fav{
  position:absolute;left:10px;top:10px;
  z-index:4;
  width:44px;height:44px;border-radius:var(--radius-md);
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.65);
  transition:transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.card .fav:hover{transform:scale(1.06);background:rgba(0,0,0,.55)}
.card .fav.active{color:var(--accent-red)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.65rem 1rem;
  border-radius:var(--radius-lg);
  font-weight:900;
  font-size:.95rem;
  transition:transform var(--t-fast), background var(--t-fast), border var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  border:1px solid transparent;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#062415}
.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-glow)}
.btn-secondary{background:var(--bg-card);border-color:var(--border);color:var(--text-primary)}
.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--border-light)}
.btn-ghost{color:var(--text-secondary)}
.btn-ghost:hover{background:var(--bg-card);color:var(--text-primary)}
.btn-danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#ffb4b4}
.btn-danger:hover{background:rgba(239,68,68,.18)}

/* Layout helpers */
.split{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:1024px){.split{grid-template-columns:2fr 1fr;gap:1.25rem}}
.panel{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:1rem;
}
.hr{
  height:1px;
  background:var(--border);
  margin:.9rem 0;
}
.panel h3{font-size:1rem;font-weight:900;margin-bottom:.75rem}
.kv{display:flex;justify-content:space-between;gap:1rem;color:var(--text-secondary);font-weight:700;font-size:.9rem;padding:.4rem 0;border-bottom:1px solid var(--border)}
.kv:last-child{border-bottom:none}
.kv b{color:var(--text-primary);font-family:var(--mono);font-weight:900}
.channel-page .panel{padding:1rem}
.channel-hero{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  background:
    radial-gradient(1200px 340px at 0% 0%, rgba(16,185,129,.14), transparent 60%),
    radial-gradient(900px 260px at 100% 0%, rgba(56,189,248,.12), transparent 55%),
    var(--bg-card);
}
.channel-hero-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.channel-brand{
  display:flex;
  gap:.8rem;
  align-items:center;
  min-width:0;
}
.channel-brand-logo{
  width:72px;
  height:50px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.channel-brand-logo img{width:100%;height:100%;object-fit:contain}
.channel-title{margin:0;font-size:1.45rem;line-height:1.2}
.channel-meta-line{display:flex;gap:.45rem;flex-wrap:wrap}
.channel-hero-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.channel-digest{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:.7rem .8rem;
  background:var(--bg-secondary);
}
.channel-digest p{margin:.45rem 0 0}
.channel-source-row{align-items:flex-start}
.channel-source-actions{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.channel-smart-list{display:flex;flex-direction:column;gap:.55rem}
.channel-smart-item{
  display:block;
  padding:.65rem .7rem;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-secondary);
}
.channel-smart-item .title{font-weight:900}
.channel-smart-item .sub{font-size:.84rem;color:var(--text-muted);margin-top:.2rem}
@media (max-width:700px){
  .channel-title{font-size:1.25rem}
  .channel-brand-logo{width:62px;height:44px}
}

/* Fake player */
.player{
  border-radius:var(--radius-xl);
  border:1px solid var(--border);
  overflow:hidden;
  background:linear-gradient(135deg, rgba(30,58,95,.55), rgba(16,185,129,.15));
  aspect-ratio:16/9;
  position:relative;
}
.player .overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,.25);
  transition:background var(--t-normal);
  text-align:center;
  padding:1rem 1rem 3.9rem;
}
.player:hover .overlay{background:rgba(0,0,0,.45)}
.player .logo{
  width:96px;height:96px;border-radius:24px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.player .logo img{width:84%;height:84%;object-fit:contain}
.player .play{
  width:76px;height:76px;border-radius:var(--radius-full);
  margin-top:1.25rem;
  background:var(--accent);
  box-shadow:var(--shadow-glow);
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;color:#062415;
  text-decoration:none;
  transition:transform var(--t-fast), background var(--t-fast);
}
.player:hover .play{transform:scale(1.07);background:var(--accent-hover)}
.player .txt{margin-top:.75rem;color:rgba(255,255,255,.92);font-weight:800}
.player .player-controls{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.player .player-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:.4rem .58rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.45);
  color:#f2f7ff;
  text-decoration:none;
  font-size:.78rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.player .player-btn.is-main{
  background:rgba(16,185,129,.24);
  border-color:rgba(16,185,129,.55);
  color:#d9fff1;
}
.player .player-btn:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.4);
}
.player .src{
  position:absolute;right:12px;top:12px;
  padding:.4rem .6rem;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);
  color:var(--text-secondary);
  font-weight:800;
  font-size:.78rem;
}
@media (max-width:700px){
  .player .overlay{padding-bottom:4.4rem}
  .player .src{display:none}
  .player .player-btn{font-size:.73rem;padding:.35rem .5rem;min-height:32px}
}

/* Schedule list */
.schedule{display:flex;flex-direction:column;gap:.5rem}
.s-item{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:.75rem;border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--bg-secondary);
}
.s-item.now{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.s-item .t{min-width:56px;font-family:var(--mono);font-weight:900;color:var(--accent)}
.s-item.now .t{color:var(--accent-red)}
.s-item .w{flex:1;min-width:0}
.s-item .w .n{font-weight:900}
.s-item .w .d{color:var(--text-muted);font-size:.86rem;margin-top:.1rem}
.s-item .act{display:flex;gap:.5rem}
.s-item .small{
  padding:.45rem .6rem;border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text-secondary);
  font-weight:900;
  font-size:.82rem;
}
.s-item .small:hover{background:var(--bg-card-hover);color:var(--text-primary)}

/* Pagination */
.pagination{
  margin-top:1rem;
}
.pagination-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  flex-wrap:wrap;
  padding:.85rem;
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  background:var(--bg-card);
}
.pagination-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .9rem;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--bg-secondary);
  color:var(--text-primary);
  font-weight:900;
  transition:background var(--t-fast), border var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.pagination-btn:hover{
  background:var(--bg-card-hover);
  border-color:var(--border-light);
}
.pagination-btn:active{
  transform:translateY(1px);
}
.pagination-btn.disabled{
  opacity:.45;
  cursor:not-allowed;
}
.pagination-info{
  color:var(--text-secondary);
  font-weight:800;
}

/* EPG (single-scroll sync-safe layout) */
.epg-wrap{border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;background:var(--bg-card);--epg-ch-col:220px}
.epg-top{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border)}
.epg-top .left{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;flex:1 1 760px}
.epg-search{width:220px;min-width:180px}
.epg-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.epg-empty{margin:.85rem 1rem 0;padding:.9rem;border:1px dashed var(--border);border-radius:var(--radius-lg);background:var(--bg-secondary)}
.epg-empty p{margin:.3rem 0 .7rem}
@media (max-width:900px){
  .epg-search{width:100%;max-width:240px}
  .epg-top .left > .select,
  .epg-top .left > .input{flex:1 1 calc(50% - .3rem);min-width:0}
  .epg-actions{width:100%;justify-content:flex-start}
}
@media (max-width:640px){
  .epg-wrap{--epg-ch-col:160px}
  .epg-top{padding:.75rem}
  .epg-top .left{gap:.45rem}
  .epg-top .left > .select,
  .epg-top .left > .input{flex:1 1 100%}
  .epg-actions .btn{padding:.5rem .65rem}
}
.select{
  height:40px;padding:0 .85rem;border-radius:var(--radius-lg);
  background:var(--bg-secondary);border:1px solid var(--border);
  color:var(--text-primary);font-weight:800;
}
.epg-grid{
  min-height:520px;
  height:min(72vh, 760px);
}
.epg-scroll{
  overflow:auto;
  height:100%;
  overscroll-behavior:contain;
}
@media (max-width:900px){.epg-grid{height: calc(100vh - 300px - var(--bottom-nav-h));}}
.epg-content{
  position:relative;
  min-width:max-content;
  min-height:100%;
  isolation:isolate;
}
.epg-head-row{
  display:flex;
  position:sticky;
  top:0;
  z-index:20;
  background:var(--bg-card);
}
.epg-ch-head{
  height:var(--epg-head-h,46px);
  min-width:var(--epg-ch-col);
  width:var(--epg-ch-col);
  flex:0 0 var(--epg-ch-col);
  position:sticky;
  left:0;
  inset-inline-start:0;
  z-index:22;
  background:var(--bg-secondary);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  box-shadow:6px 0 12px rgba(0,0,0,.05);
  display:flex;
  align-items:center;
  padding:0 .75rem;
  font-weight:900;
  transform:translateZ(0);
}
.epg-row-wrap{
  display:flex;
}
.epg-ch-item{
  min-width:var(--epg-ch-col);
  width:var(--epg-ch-col);
  flex:0 0 var(--epg-ch-col);
  box-sizing:border-box;
  display:flex;gap:.6rem;align-items:center;
  padding:.75rem 1rem;
  height:64px;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  background:var(--bg-secondary);
  position:sticky;
  left:0;
  inset-inline-start:0;
  z-index:21;
  box-shadow:6px 0 12px rgba(0,0,0,.05);
  text-decoration:none;
  color:inherit;
  transition:background var(--t-fast);
  transform:translateZ(0);
}
.epg-ch-item:hover{background:var(--bg-elevated)}
.epg-ch-item .c-logo{
  width:42px;height:28px;border-radius:var(--radius-sm);
  background:var(--bg-card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.epg-ch-item .c-logo img{width:100%;height:100%;object-fit:contain}
.epg-ch-item .c-meta{min-width:0}
.epg-ch-item .c-name{font-weight:900;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg-ch-item .c-now{font-size:.78rem;color:var(--text-muted);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg-time{
  flex:0 0 auto;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:var(--epg-hour-col,160px);
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  min-width:max-content;
}
.epg-time div{
  min-height:var(--epg-head-h,46px);
  display:flex;align-items:center;
  padding:.65rem .75rem;
  font-family:var(--mono);
  font-weight:900;
  color:var(--text-secondary);
  border-right:1px solid var(--border);
  white-space:nowrap;
}
.epg-time .now{color:var(--accent-red)}
.epg-row{
  flex:0 0 auto;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:var(--epg-hour-col,160px);
  border-bottom:1px solid var(--border);
  min-width:max-content;
}
.epg-cell{
  padding:.6rem .75rem;
  border-right:1px solid var(--border);
  height:64px;
  display:flex;flex-direction:column;justify-content:center;
  gap:.2rem;
}
.epg-cell-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.epg-cell .tt{font-weight:900;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg-cell .tm{font-family:var(--mono);font-size:.78rem;color:var(--text-muted);font-weight:900}
.epg-cell .gd{font-size:.78rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg-nowline{
  position:absolute;
  top:var(--epg-head-h,46px);
  bottom:0;
  width:2px;background:var(--accent-red);
  left:calc(var(--epg-ch-col) + 0px);
  opacity:.85;
  pointer-events:none;
  z-index:12;
}
@media (max-width:900px){.epg-nowline{display:block;opacity:.7}}

/* Bottom nav (mobile) */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  height:var(--bottom-nav-h);
  background:rgba(17,17,17,.92);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  display:flex;
}
@media (min-width:1024px){.bottom-nav{display:none}}
.bottom-nav a, .bottom-nav button{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;
  color:var(--text-secondary);
  font-weight:900;font-size:.74rem;
}
.bottom-nav .i{
  width:1.2rem;
  height:1.2rem;
  display:block;
}
.bottom-nav .i svg{
  width:100%;
  height:100%;
  display:block;
}
.bottom-nav .active{color:var(--accent)}

/* Mobile nav drawer */
.drawer{position:fixed;inset:0;z-index:300;display:none}
.drawer.active{display:block}
.drawer .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75)}
.drawer .panel{
  position:absolute;top:0;right:0;height:100%;
  width:86%;max-width:330px;
  background:var(--bg-secondary);
  border-left:1px solid var(--border);
  border-radius:0;
  overflow:auto;
  padding:1rem;
  transform:translateX(100%);
  transition:transform var(--t-normal);
}
.drawer.active .panel{transform:translateX(0)}
.drawer .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.drawer .title{font-weight:900}
.drawer .links{display:flex;flex-direction:column;gap:.25rem;padding:.5rem 0}
.drawer .links a{
  padding:.65rem .75rem;border-radius:var(--radius-lg);
  color:var(--text-secondary);font-weight:900;
}
.drawer .links a:hover{background:var(--bg-card);color:var(--text-primary)}
.drawer .links a.active{
  color:var(--accent);
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.26);
}
.drawer .hr{height:1px;background:var(--border);margin:.75rem 0}
.drawer .sub{color:var(--text-muted);font-weight:900;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}

/* Search overlay (mobile) */
.search-overlay{
  position:fixed;inset:0;z-index:320;
  background:var(--bg-primary);
  display:none;flex-direction:column;
  padding:
    calc(env(safe-area-inset-top, 0px) + .85rem)
    calc(env(safe-area-inset-right, 0px) + .8rem)
    calc(env(safe-area-inset-bottom, 0px) + 1rem)
    calc(env(safe-area-inset-left, 0px) + .8rem);
}
.search-overlay.active{display:flex}
.search-overlay.open{display:flex}
.search-overlay .head{
  display:grid;
  gap:.6rem;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:.75rem;
  box-shadow:var(--shadow-lg);
}
.search-overlay .head .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.65rem;
}
.search-overlay .head .title{
  font-weight:900;
  font-size:.95rem;
  color:var(--text-primary);
  letter-spacing:.01em;
}
.search-overlay .head .close{
  min-width:96px;
  height:38px;
  font-size:.88rem;
  padding:.45rem .7rem;
}
.search-overlay .head .field{
  position:relative;
  width:100%;
}
.search-overlay .head input{
  width:100%;
  height:46px;
  padding:0 12px 0 42px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);outline:none;
}
.search-overlay .head input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.search-overlay .head .icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
}
.search-overlay .head .icon svg{
  width:1rem;
  height:1rem;
  display:block;
}
.search-overlay .head .note{
  margin:0;
  padding-top:.1rem;
  font-size:.78rem;
  line-height:1.35;
  color:var(--text-muted);
}
.search-overlay .results{
  display:none;
  margin-top:.7rem;
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--bg-card);
  flex:1;
  overflow:auto;
  min-height:0;
}
.search-overlay .results.active{display:block}
.search-overlay .results .hdr,
.search-overlay .results .title{padding:.75rem 1rem;background:var(--bg-secondary);color:var(--text-muted);font-size:.75rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border)}
@media (max-width:640px){
  .search-overlay{
    padding:
      calc(env(safe-area-inset-top, 0px) + .7rem)
      calc(env(safe-area-inset-right, 0px) + .6rem)
      calc(env(safe-area-inset-bottom, 0px) + .85rem)
      calc(env(safe-area-inset-left, 0px) + .6rem);
  }
  .search-overlay .head{
    border-radius:14px;
    padding:.65rem;
  }
}

.search-empty{
  padding:1rem;
  color:var(--text-secondary);
  font-weight:700;
  border-top:1px solid var(--border);
}

/* Redirect modal */
.redirect{
  position:fixed;inset:0;z-index:400;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.86);
  padding:1rem;
}
.redirect.active{display:flex}
.redirect .box{
  width:min(420px, 100%);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  padding:1.25rem;
  text-align:center;
  box-shadow:var(--shadow-lg);
}
.redirect .img{
  width:120px;height:76px;border-radius:var(--radius-lg);
  background:#fff;margin:0 auto .75rem;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.redirect .img img{width:90%;height:90%;object-fit:contain}
.redirect h3{font-size:1.05rem;font-weight:900}
.redirect p{color:var(--text-secondary);font-weight:700;margin:.4rem 0 .85rem}
.redirect .bar{height:5px;border-radius:var(--radius-full);background:var(--bg-secondary);overflow:hidden;border:1px solid var(--border)}
.redirect .bar > div{height:100%;width:0%;background:var(--accent);transition:width 3s linear}
.redirect .cancel{margin-top:.9rem}

/* Cookie consent */
.cookie{
  position:fixed;left:1rem;right:1rem;bottom:calc(1rem + var(--bottom-nav-h));
  z-index:350;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  padding:1rem;
  box-shadow:var(--shadow-lg);
  display:none;
}
@media (min-width:1024px){.cookie{bottom:1rem;max-width:520px;right:auto}}
.cookie.active{display:block}
.cookie .t{font-weight:900}
.cookie .p{color:var(--text-secondary);font-weight:700;font-size:.92rem;margin:.35rem 0 .85rem}
.cookie .row{display:flex;gap:.5rem;flex-wrap:wrap}
.cookie .row .btn{flex:1}
.cookie .pref{
  width:100%;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:.85rem;
  margin-top:.75rem;
  display:none;
}
.cookie .pref.active{display:block}
.cookie .pref .line{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--border)}
.cookie .pref .line:last-child{border-bottom:none}
.cookie .pref .actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.75rem;
}
.cookie .pref .actions .btn{
  flex:1 1 180px;
}
.toggle{
  width:46px;height:26px;border-radius:var(--radius-full);
  border:1px solid var(--border);
  background:var(--bg-card);
  position:relative;
}
.toggle::after{
  content:"";position:absolute;top:50%;left:3px;transform:translateY(-50%);
  width:20px;height:20px;border-radius:var(--radius-full);
  background:var(--text-muted);
  transition:left var(--t-fast), background var(--t-fast);
}
.toggle.on{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.12)}
.toggle.on::after{left:22px;background:var(--accent)}
.switch{
  position:relative;
  display:inline-flex;
  width:48px;
  height:28px;
}
.switch input{
  opacity:0;
  width:0;
  height:0;
}
.switch span{
  position:absolute;
  inset:0;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-card);
}
.switch span::after{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  left:3px;
  top:3px;
  border-radius:999px;
  background:var(--text-muted);
  transition:left var(--t-fast), background var(--t-fast);
}
.switch input:checked + span{
  background:rgba(16,185,129,.12);
  border-color:rgba(16,185,129,.45);
}
.switch input:checked + span::after{
  left:23px;
  background:var(--accent);
}

/* Footer */
.footer{
  padding:2.5rem 0 calc(2.5rem + var(--bottom-nav-h));
  border-top:1px solid var(--border);
  color:var(--text-muted);
}
@media (min-width:1024px){.footer{padding-bottom:2.5rem}}
.footer .cols{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:900px){.footer .cols{grid-template-columns:2fr 1fr 1fr}}
.footer .h{color:var(--text-secondary);font-weight:900;margin-bottom:.5rem}
.footer a{color:var(--text-muted);font-weight:800}
.footer a:hover{color:var(--text-primary)}
.smallprint{margin-top:1rem;font-size:.88rem}
.footer-links-col{display:flex;flex-direction:column;gap:.35rem}
.smallprint-top-sm{margin-top:.6rem}

/* A11y / reduce motion */
:focus-visible{outline:3px solid rgba(16,185,129,.45);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;scroll-behavior:auto !important;animation:none !important}
}


/* --- TVGratis integration additions (server-rendered cards) --- */
.media{position:relative}
.media .media-open{position:absolute;inset:0;z-index:1}
.media .fav{position:absolute;top:.6rem;left:.6rem;z-index:3}
.media .badges{position:absolute;top:.6rem;right:.6rem;z-index:3}
.media .play-btn{
  position:absolute;right:.6rem;bottom:.6rem;z-index:3;
  width:44px;height:44px;border-radius:9999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.55);
  color:#fff;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter: blur(8px);
  transition: transform var(--t-fast), background var(--t-fast);
}
.media .play-btn:hover{transform:scale(1.04);background:rgba(0,0,0,.75)}
.logo-fallback{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;
}

.input{height:40px;padding:0 .85rem;border-radius:var(--radius-lg);background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);font-weight:800}
.input:focus{outline:2px solid rgba(16,185,129,.35);outline-offset:2px}
.epg-select{
  height:40px;
  padding:0 .85rem;
  border-radius:var(--radius-lg);
  background:var(--bg-secondary);
  border:1px solid var(--border);
  color:var(--text-primary);
  font-weight:800;
}
.epg-select:focus{
  outline:2px solid rgba(16,185,129,.35);
  outline-offset:2px;
}

.source-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.source-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-card)}
.source-row .left{min-width:0}
.source-row .right{flex:0 0 auto}

/* --- Legacy compatibility (old templates) --- */
.main-content{padding-top:0}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.section-title{display:flex;align-items:center;gap:.5rem;margin:0;font-size:1.6rem}
.section-title-icon{font-size:1.2em}
.section-link{color:var(--text-secondary);font-weight:900;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.section-link:hover{text-decoration:underline}
.program-intro{
  margin-top:.35rem;
  max-width:760px;
  color:var(--text-secondary);
  font-size:.94rem;
  font-weight:700;
}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-soft)}
.card-header{padding:1rem 1rem 0 1rem}
.card-body{padding:1rem}
.helper-text{color:var(--text-muted);font-weight:800}
.tvg-card-gap{margin-bottom:1rem}
.tvg-readable{line-height:1.75}
.tvg-row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.tvg-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.tvg-actions-center{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
}
.tvg-h0{margin:0}
.tvg-stack{display:flex;flex-direction:column;gap:.5rem}
.tvg-note{margin-top:.75rem;opacity:.9}
.tvg-mt-075{margin-top:.75rem}
.tvg-mt-1{margin-top:1rem}
.tvg-mb-1{margin-bottom:1rem}
.tvg-hidden{display:none}
.tvg-h-1{height:1px}
.program-ics{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(245,158,11,.35);
  background:rgba(245,158,11,.12);
  color:#fcd87a;
  font-size:.78rem;
  font-weight:900;
  line-height:1;
}
.program-ics:hover{
  border-color:rgba(245,158,11,.52);
  background:rgba(245,158,11,.2);
  color:#ffe8ad;
}
.program-list{display:flex;flex-direction:column;gap:.6rem}
.program-item{display:flex;gap:.75rem;padding:.75rem;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--bg-secondary)}
.program-time{font-family:var(--mono);font-weight:900;color:var(--text-muted);min-width:62px}
.program-title{font-weight:900}
.program-desc{color:var(--text-secondary);font-weight:800}
.favorites-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}

/* TV Azi category cards */
.tv-today-sticky-bar{
  position:sticky;
  top:74px;
  z-index:25;
}
.tv-today-jump{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}
.tv-today-jump .chip{
  font-size:.82rem;
  padding:.4rem .65rem;
}
.tv-today-sections{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
@media (min-width:1320px){
  .tv-today-sections{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
.tv-section-card{
  margin-bottom:0;
  scroll-margin-top:160px;
}
.tv-today-grid{
  display:grid;
  grid-template-columns:repeat(1, minmax(0,1fr));
  gap:.7rem;
}
.tv-today-grid--compact{
  grid-template-columns:repeat(1, minmax(0,1fr));
}
.tv-today-header-actions{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}
.tv-today-filter{
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.2rem;
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  background:var(--bg-secondary);
}
.tv-today-filter-btn{
  height:30px;
  padding:0 .75rem;
  border-radius:var(--radius-full);
  border:1px solid transparent;
  color:var(--text-secondary);
  font-weight:900;
  font-size:.82rem;
  background:transparent;
}
.tv-today-filter-btn:hover{
  color:var(--text-primary);
  background:var(--bg-card);
}
.tv-today-filter-btn.active{
  color:#062415;
  background:var(--accent);
}
@media (min-width:900px){
  .tv-today-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (min-width:1024px){
  .tv-today-grid--compact{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
.tv-today-item{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-secondary);
  padding:.75rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  cursor:pointer;
}
.tv-today-item[hidden]{
  display:none !important;
}
.tv-today-item.is-live{
  border-color:rgba(239,68,68,.4);
}
.tv-today-item:hover{
  border-color:var(--border-light);
}
.tv-stat-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.25rem .55rem;
  border-radius:var(--radius-full);
  border:1px solid rgba(16,185,129,.35);
  color:var(--accent);
  background:rgba(16,185,129,.08);
  font-size:.74rem;
  font-weight:900;
}
.tv-today-item-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.6rem;
}
.tv-today-channel{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
  color:inherit;
}
.tv-today-channel-logo{
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg-card);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 44px;
}
.tv-today-channel-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.tv-today-channel-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.tv-today-channel-name{
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tv-today-title{
  font-weight:900;
  line-height:1.3;
}
.tv-live-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  padding:0 .55rem;
  border-radius:var(--radius-sm);
  background:rgba(239,68,68,.85);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.tv-upcoming-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  padding:0 .55rem;
  border-radius:var(--radius-sm);
  background:rgba(59,130,246,.88);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.tv-today-actions{
  margin-top:.1rem;
  display:flex;
  gap:.65rem;
  align-items:center;
  flex-wrap:wrap;
}
.tv-today-progress{
  margin-top:.05rem;
}
.now-playing-item-progress{
  height:10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-secondary);
  overflow:hidden;
}
.now-playing-item-progress-bar{
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--accent), rgba(16,185,129,.4));
}
.tv-more{
  margin-left:auto;
}
.tv-more summary{
  list-style:none;
  cursor:pointer;
  font-size:.84rem;
  font-weight:900;
  color:var(--text-secondary);
}
.tv-more summary::-webkit-details-marker{
  display:none;
}
.tv-more[open] summary{
  color:var(--text-primary);
}
.tv-more-body{
  margin-top:.45rem;
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
}
.now-live-controls{
  display:grid;
  grid-template-columns:minmax(240px, 1.2fr) auto auto;
  align-items:center;
  gap:.75rem;
}
.now-live-search-wrap{
  display:block;
}
.now-live-search{
  width:100%;
}
.now-live-chips{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}
.now-live-sort{
  min-width:230px;
}
.now-live-cta{
  border-radius:var(--radius-full);
  padding:.45rem .85rem;
  box-shadow:0 0 0 1px rgba(16,185,129,.2) inset;
}
@media (max-width:1080px){
  .now-live-controls{
    grid-template-columns:1fr;
  }
  .now-live-sort{
    min-width:0;
    width:100%;
  }
}
@media (max-width:960px){
  .tv-today-sticky-bar{
    top:64px;
  }
  .tv-section-card{
    scroll-margin-top:145px;
  }
}
@media (max-width:700px){
  .tv-today-sticky-bar{
    position:static;
  }
  .tv-section-card{
    scroll-margin-top:78px;
  }
}


/* --- TVGratis: responsive header controls --- */
@media (max-width: 900px){
  .header .search{display:none}
  #searchToggle{display:inline-flex}
}
@media (min-width: 901px){
  #searchToggle{display:none}
}

/* --- TVGratis: smaller channel cards --- */
.card.channel-card .media{aspect-ratio:1/1}
.card.channel-card .media img{padding:10px}
@media (min-width: 1100px){
  .grid{grid-template-columns:repeat(5, minmax(0,1fr))}
}
@media (min-width: 1400px){
  .grid{grid-template-columns:repeat(6, minmax(0,1fr))}
}

@media (max-width:600px){.epg-ch-item .c-now{display:none}.epg-ch-item{padding:.65rem .7rem}.epg-ch-item .c-logo{width:38px;height:26px}}
@media (max-width:600px){.card .source-pill{display:none}}



/* --- Homepage improvements (directory-style + modern spotlight) --- */
.sticky-chips{
  position:sticky;
  top:72px;
  z-index:20;
  padding:.6rem 0;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark){
  .sticky-chips{
    background:linear-gradient(180deg, rgba(11,15,20,.86), rgba(11,15,20,.75));
  }
}
@media (max-width:640px){
  .sticky-chips{top:62px}
}

.channels-grid{
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:640px){.channels-grid{grid-template-columns:repeat(4, minmax(0,1fr))}}
@media (min-width:1024px){.channels-grid{grid-template-columns:repeat(6, minmax(0,1fr))}}
@media (min-width:1280px){.channels-grid{grid-template-columns:repeat(7, minmax(0,1fr))}}

.fav-grid{
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:640px){.fav-grid{grid-template-columns:repeat(4, minmax(0,1fr))}}
@media (min-width:1024px){.fav-grid{grid-template-columns:repeat(6, minmax(0,1fr))}}

.spotlight-card{
  border:1px solid rgba(16,185,129,.25);
  box-shadow:0 16px 40px rgba(0,0,0,.10);
}
.spotlight-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
@media (max-width:900px){
  .spotlight-inner{grid-template-columns:1fr;gap:.55rem}
  .spot-right{display:block;order:1;min-height:170px}
  .spot-left{order:2;padding:.85rem}
  .spot-left .spot-top{margin-bottom:.55rem}
  .spot-left .spot-logo{width:42px;height:42px;border-radius:11px}
  .spot-left .spot-name{font-size:.96rem;max-width:230px}
  .spot-left .spot-meta{font-size:.8rem}
  .spot-left .spot-block{margin:.45rem 0}
  .spot-left .spot-title{font-size:.92rem;line-height:1.25}
  .spot-left .spot-progress{height:7px;margin-top:.35rem}
  .spot-left .spot-actions{margin-top:.6rem;gap:.45rem}
  .spot-left .spot-actions .btn{padding:.45rem .62rem;font-size:.8rem}
}
.spot-left{padding:1.1rem}
.spot-right{
  position:relative;
  overflow:hidden;
  min-height:220px;
}
.spot-right-inner{
  position:relative;
  z-index:1;
  height:100%;
  min-height:220px;
  padding:1rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:.9rem;
}
.spot-hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 320px at 20% 20%, rgba(16,185,129,.25), transparent 60%),
    radial-gradient(900px 320px at 80% 60%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg, rgba(16,185,129,.10), rgba(0,0,0,0));
}
.spot-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.spot-channel{display:flex;align-items:center;gap:.8rem;min-width:0}
.spot-logo{
  width:54px;height:54px;border-radius:14px;
  background:rgba(0,0,0,.06);
  border:1px solid var(--border);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.spot-logo img{width:100%;height:100%;object-fit:contain;padding:8px}
.spot-name{font-weight:1000;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.spot-meta{color:var(--text-muted);font-weight:700;font-size:.9rem}
.spot-badges{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.spot-block{margin:.75rem 0}
.spot-label{color:var(--text-muted);font-weight:800;font-size:.85rem;margin-bottom:.25rem}
.spot-title{font-weight:950;font-size:1.05rem;line-height:1.3}
.spot-title.muted{color:var(--text-secondary);font-weight:800}
.spot-progress{height:10px;border-radius:999px;background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.18);overflow:hidden;margin-top:.55rem}
.spot-progress > div{height:100%;background:linear-gradient(90deg, rgba(16,185,129,.95), rgba(16,185,129,.35))}
.spot-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1rem}
.btn.btn-sm{padding:.55rem .8rem;font-size:.9rem}
.ai-rec{
  border:1px solid rgba(16,185,129,.24);
  background:rgba(6,12,10,.38);
  border-radius:14px;
  padding:.8rem;
  backdrop-filter:blur(3px);
}
.ai-pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border:1px solid rgba(16,185,129,.36);
  background:rgba(16,185,129,.14);
  color:var(--accent);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.2rem .55rem;
  margin-bottom:.55rem;
}
.ai-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.35rem;
  margin-bottom:.55rem;
}
.ai-tab{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.24);
  color:var(--text-secondary);
  border-radius:10px;
  padding:.38rem .42rem;
  font-size:.75rem;
  font-weight:800;
  line-height:1.1;
  transition:all var(--t-fast);
}
.ai-tab:hover{border-color:rgba(16,185,129,.4);color:var(--text-primary)}
.ai-tab.active{
  border-color:rgba(16,185,129,.48);
  background:rgba(16,185,129,.18);
  color:#ddffec;
}
.ai-panel{display:none}
.ai-panel.active{display:block}
.ai-duo{display:flex;flex-direction:column;gap:.5rem}
.ai-item{
  display:block;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.2);
  border-radius:11px;
  padding:.52rem .58rem;
  transition:border var(--t-fast), background var(--t-fast);
}
.ai-item:hover{
  border-color:rgba(16,185,129,.45);
  background:rgba(16,185,129,.12);
  text-decoration:none;
}
.ai-item-title{
  font-weight:900;
  line-height:1.2;
  font-size:.9rem;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ai-item-meta{
  margin-top:.18rem;
  color:var(--text-secondary);
  font-weight:700;
  font-size:.76rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.smart-collections{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}
.smart-chip{
  display:inline-flex;
  align-items:center;
  padding:.42rem .68rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.22);
  color:var(--text-primary);
  font-size:.82rem;
  font-weight:800;
  line-height:1;
  transition:background var(--t-fast), border var(--t-fast), color var(--t-fast);
}
.smart-chip:hover{
  border-color:rgba(16,185,129,.45);
  background:rgba(16,185,129,.14);
  color:#d8ffe9;
  text-decoration:none;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}
@media (max-width:900px){
  .spot-right-inner{min-height:0;padding:.8rem}
  .ai-rec{padding:.72rem}
  .ai-pill{font-size:.68rem}
  .ai-tabs{gap:.28rem}
  .ai-tab{font-size:.7rem;padding:.34rem .32rem}
  .ai-item-title{font-size:.84rem}
  .ai-item-meta{font-size:.72rem}
  .smart-chip{font-size:.76rem;padding:.38rem .54rem}
}

/* Upcoming cards */
.upcoming-grid{grid-template-columns:repeat(1, minmax(0,1fr))}
@media (min-width:640px){.upcoming-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (min-width:1024px){.upcoming-grid{grid-template-columns:repeat(3, minmax(0,1fr))}}

.upcoming-card{display:block; padding:1rem}
.up-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.up-logo{
  width:52px;height:52px;border-radius:16px;
  background:rgba(0,0,0,.06);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.up-logo img{width:100%;height:100%;object-fit:contain;padding:8px}
.up-when{display:flex;align-items:flex-end;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.up-time{font-weight:950}
.pill{
  display:inline-flex;align-items:center;
  padding:.28rem .6rem;
  border-radius:999px;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.22);
  color:var(--accent);
  font-weight:900;
  font-size:.78rem;
}
.up-body{margin-top:.8rem}
.up-title{font-weight:950;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.up-ch{color:var(--text-muted);font-weight:800;font-size:.9rem;margin-top:.25rem}

/* Collections */
.collections-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (min-width:640px){.collections-grid{grid-template-columns:repeat(3, minmax(0,1fr))}}
@media (min-width:1024px){.collections-grid{grid-template-columns:repeat(6, minmax(0,1fr))}}
.collect{padding:1rem;display:block}
.collect:hover{text-decoration:none}
.c-ico{font-size:1.35rem;margin-bottom:.5rem}
.c-title{font-weight:950}
.c-sub{color:var(--text-muted);font-weight:700;font-size:.88rem;margin-top:.25rem}

/* Favorite button states (ensure inactive is not red) */
.card .fav{color:rgba(255,255,255,.75)}
.card .fav.active{color:var(--accent-red)}


/* Favorite mini cards */
.fav-mini{padding:.9rem;display:flex;align-items:center;gap:.75rem}
.fav-mini:hover{text-decoration:none}
.fav-mini-logo{
  width:46px;height:46px;border-radius:14px;
  background:rgba(0,0,0,.06);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
}
.fav-mini-logo img{width:100%;height:100%;object-fit:contain;padding:7px}
.fav-mini-name{font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Channel page: clearer AI recommendation hierarchy */
.channel-ai-recommendation{
  border-color:rgba(16,185,129,.35);
  background:linear-gradient(180deg, rgba(16,185,129,.12), rgba(15,23,42,.02));
}

/* Channels page: filter state text */
#channelsActiveState{
  font-weight:800;
}