@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Playfair+Display:wght@700;900&display=swap');

:root{ --bg:#0f1724; --card:#ffffff; --muted:#6b7280; --accent1:#4f46e5; --accent2:#ef4444; --glass: rgba(255,255,255,0.06); }
*{box-sizing:border-box}
body{background:linear-gradient(135deg, rgba(79,70,229,0.06), rgba(239,68,68,0.03)), #f8fafc; color:#0b1220; font-family:Inter,system-ui,Segoe UI,Roboto,Arial; margin:0}
header{background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#fff; padding:40px 20px; border-radius:12px; margin-bottom:20px; box-shadow:0 12px 30px rgba(2,6,23,0.12)}
header .kicker{display:inline-block;background:rgba(255,255,255,0.08);padding:6px 12px;border-radius:999px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
header h1{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,3.5vw,2.4rem);margin:10px 0}
header .subtitle{opacity:0.95;color:rgba(255,255,255,0.9)}
.container{max-width:min(1700px, 96vw);margin:0 auto;padding:28px}
.lead{font-size:1.05rem;color:var(--muted);margin:16px 0}
h2{font-family:'Playfair Display',serif;color:#0b1220;font-size:1.35rem;margin:34px 0 10px}
p{color:#334155;line-height:1.7;margin-bottom:1rem}
.info-box{background:linear-gradient(90deg, rgba(79,70,229,0.06), rgba(239,68,68,0.04));padding:14px;border-radius:10px;color:#0b1220}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:18px 0}
.stat-card{background:var(--card);padding:12px;border-radius:10px;text-align:center;box-shadow:0 8px 22px rgba(2,6,23,0.06)}
.stat-card .number{font-weight:800;color:var(--accent1);font-size:1.4rem}
.stat-card .label{font-size:0.78rem;color:var(--muted)}
blockquote{background:linear-gradient(90deg, rgba(79,70,229,0.06), rgba(239,68,68,0.04));padding:14px;border-left:4px solid var(--accent1);border-radius:8px;font-weight:700;color:#0b1220}
.strategy-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:18px}
.strategy-card{background:#fff;padding:14px;border-radius:10px;box-shadow:0 8px 24px rgba(2,6,23,0.04)}
.strategy-card .icon{font-size:1.6rem}
.conclusion{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;padding:20px;border-radius:10px;margin-top:30px}
.conclusion h2,.conclusion h3,.conclusion p{color:#fff}
.btn-cta{display:inline-block;background:linear-gradient(90deg,var(--accent1),#06b6d4);color:#fff;padding:10px 14px;border-radius:999px;font-weight:700;text-decoration:none}
.tier-table{width:100%;border-collapse:separate;border-spacing:0;margin:18px 0}
.tier-table th,.tier-table td{padding:12px 14px}
.tier-table thead th{background:#0b1220;color:#fff;border-radius:8px}
.rpm-row{display:flex;align-items:center;gap:14px;margin:10px 0;font-size:0.93rem}
.rpm-label{width:140px;flex-shrink:0;font-weight:600;color:#0b1220}
.rpm-bar-wrap{flex:1;background:#e6eefb;border-radius:8px;height:12px;overflow:hidden}
.rpm-bar{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent1),var(--accent2))}
.rpm-value{width:90px;text-align:right;color:var(--muted);font-style:italic}
@media(max-width:720px){.container{padding:18px}header{padding:24px}}

/* Table styles for channel listings */
#table-wrap{ /* kept for backward compatibility if referenced */ }
.table-wrap{overflow:auto;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  background:linear-gradient(180deg, #fff, #fbfdff);
  box-shadow:0 12px 30px rgba(2,6,23,0.06);
  padding:10px;
  max-height:calc(100vh - 180px);
}
/* Keep intro prose at a comfortable reading width */
.article-container > p{max-width:820px}
#tbl{width:100%;border-collapse:collapse;font-size:0.95rem;background:transparent;table-layout:auto}
#tbl thead th{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;padding:12px 12px;position:sticky;top:0;z-index:2;font-weight:700;text-align:left}
#tbl thead th .sortarr{opacity:0.95;margin-left:8px;font-size:0.85rem}
#tbl tbody tr{background:#fff;border-bottom:1px solid #eef2f7}
#tbl tbody tr:hover{background:linear-gradient(90deg, rgba(79,70,229,0.03), rgba(239,68,68,0.02))}
#tbl td,#tbl th{padding:10px 12px;vertical-align:middle}
#tbl td{border-right:1px solid #f1f5f9}
#tbl td:last-child{border-right:none}
#tbl td.num{text-align:right;color:#0b1220;font-weight:600}
#tbl td.chname{font-weight:700}
#tbl td.chname a{color:var(--accent1);font-weight:700;text-decoration:none}
.badge-top3{display:inline-block;padding:6px 8px;border-radius:8px;color:#fff;font-weight:800;font-size:0.9rem}
.pill{display:inline-block;padding:4px 8px;border-radius:999px;font-size:0.78rem;color:#fff;font-weight:700}
.pill.ent{background:#ef4444}
.pill.mus{background:#4f46e5}
.pill.kid{background:#06b6d4}
.pill.spt{background:#10b981}
.pill.edu{background:#f59e0b}
.pill.com{background:#8b5cf6}
.pill.how{background:#ec4899}
.pill.ppl{background:#64748b}
.desc{color:#475569;max-width:500px;overflow-wrap:break-word;line-height:1.4}
.sortarr{opacity:0.6;font-size:0.85rem}

/* Provide sensible min-widths so columns can grow to fit content when possible */
#tbl thead th:nth-child(1){min-width:48px;text-align:center}
#tbl thead th:nth-child(2){min-width:160px}
#tbl thead th:nth-child(3), #tbl thead th:nth-child(4), #tbl thead th:nth-child(5){min-width:100px}
#tbl thead th:nth-child(6){min-width:100px}
#tbl thead th:nth-child(7){min-width:320px}
#tbl thead th:nth-child(8){min-width:72px;text-align:center}
#tbl thead th:nth-child(9){min-width:110px}
#tbl thead th:nth-child(10), #tbl thead th:nth-child(11), #tbl thead th:nth-child(12){min-width:80px}

/* Override small inline font-size set on some cells (use !important to beat inline style) */
#tbl td:nth-child(9), #tbl td:nth-child(11), #tbl td:nth-child(12) {
  font-size:1rem !important;
  white-space:normal !important;
  color:#0b1220;
}

@media (max-width: 900px){
  /* On narrower screens, allow wrapping for description and reduce some columns */
  #tbl thead th:nth-child(2){min-width:140px}
  #tbl thead th:nth-child(7){min-width:220px}
  #tbl td.desc{max-width:280px}
  #tbl td:nth-child(9), #tbl td:nth-child(11), #tbl td:nth-child(12){white-space:normal !important}
}