/* ===== CHANNELS PAGE ===== */
.page-header{padding:32px 0 48px;text-align:center}
.page-header h1{font-size:clamp(28px,4vw,44px);font-weight:900;line-height:1.1;letter-spacing:-1px;margin-bottom:12px}
.page-header h1 .accent{background:linear-gradient(135deg,var(--red),#ff4d5e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-header p{font-size:16px;color:var(--g3);max-width:520px;margin:0 auto}

/* Quick nav */
.quick-nav{padding:0 0 48px;position:sticky;top:64px;z-index:50;background:var(--bg);padding-top:16px;border-bottom:1px solid rgba(255,255,255,.04)}
.quick-nav-inner{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-ms-overflow-style:none;scrollbar-width:none}
.quick-nav-inner::-webkit-scrollbar{display:none}
.qn-btn{padding:8px 18px;border-radius:100px;font-size:12px;font-weight:600;color:var(--g3);background:var(--card);border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .25s;white-space:nowrap;font-family:var(--font)}
.qn-btn:hover,.qn-btn.active{color:var(--wh);background:rgba(229,25,42,.12);border-color:rgba(229,25,42,.25)}
.qn-btn .count{color:var(--g5);font-weight:500;margin-left:4px}
.qn-btn.de-btn{border-color:rgba(255,204,0,.2);background:rgba(255,204,0,.06)}
.qn-btn.de-btn:hover,.qn-btn.de-btn.active{background:rgba(255,204,0,.12);border-color:rgba(255,204,0,.3);color:var(--wh)}

/* Category sections */
.cat-section{padding:32px 0}
.cat-section+.cat-section{border-top:1px solid rgba(255,255,255,.04)}
.cat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;cursor:pointer;user-select:none}
.cat-title{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700}
.cat-title .emoji{font-size:22px}
.cat-count{font-size:13px;color:var(--g5);font-weight:500;background:rgba(255,255,255,.04);padding:4px 10px;border-radius:100px}
.cat-toggle{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border-radius:50%;font-size:14px;color:var(--g5);transition:all .3s}
.cat-section.open .cat-toggle{transform:rotate(180deg);color:var(--wh)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;max-height:0;overflow:hidden;transition:max-height .4s ease}
.cat-section.open .cat-grid{max-height:2000px}

/* Channel cards */
.ch-card{background:var(--card);border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:14px 8px;text-align:center;transition:all .3s;position:relative;display:block}
.ch-card:hover{background:var(--card-h);transform:translateY(-2px);border-color:rgba(229,25,42,.15)}
.ch-card img{height:28px;margin-bottom:6px;opacity:.8;transition:opacity .3s}
.ch-card:hover img{opacity:1}
.ch-card .ch-name{font-size:10px;color:var(--g3);font-weight:500;line-height:1.3;display:block}
.ch-card .free-tag{position:absolute;top:-5px;right:-5px;background:var(--green);color:#000;font-size:7px;font-weight:800;padding:2px 5px;border-radius:3px}

/* German section highlight */
.cat-section.de-section{background:linear-gradient(180deg,rgba(255,204,0,.03) 0%,transparent 100%);border-radius:var(--r);padding:32px 24px;margin:16px 0;border:1px solid rgba(255,204,0,.1)}
.cat-section.de-section .ch-card:hover{border-color:rgba(255,204,0,.25)}

@media(max-width:900px){
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}
@media(max-width:600px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .cat-section.de-section{padding:24px 16px}
}