:root{
    --navy:#0a1826;
    --blue:#1a9fd4;
    --line:rgba(255,255,255,.10);
  }
  *{box-sizing:border-box}
  .cbtl-wrap, .cbtl-band, .cbtl-wrap *, .cbtl-band *, .cbtl-wrap *::before, .cbtl-wrap *::after, .cbtl-band *::before, .cbtl-band *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cbtl-wrap, .cbtl-band {
  --cbtl-teal: #05828E; --cbtl-teal-dark: #046570; --cbtl-teal-light: #0aa8b8;
  --cbtl-teal-deep: #0c3b41; --cbtl-teal-tint: #8fd8de; --cbtl-slate: #2c3e50;
  --cbtl-off-white: #f5f3ef; --cbtl-warm-gray: #e8e4de; --cbtl-text: #1a2332;
  --cbtl-text-muted: #6b7a8d; --cbtl-gold: #c9a84c; --cbtl-live: #e0362c;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.55;
}
.cbtl-wrap *, .cbtl-band * { font-family: inherit; text-transform: none; }
.cbtl-inner { max-width: 1060px; margin: 0 auto; }
  .wrap{
    max-width:1460px;margin:0 auto;padding:24px;}
  .top-player{
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  .cbtl-wrap {
    background: var(--cbtl-off-white);
    color: var(--cbtl-text);
    margin-top: 60px;
    padding-bottom: 60px;    
  }
  .top-player .grid{
    display:grid;
    grid-template-columns:1fr 420px;
    background:var(--navy);border-radius:6px;overflow:hidden;
    box-shadow:0 10px 30px rgba(10,24,38,.18);}

  /* ===== Left: YouTube player ===== */
  .player{position:relative;background:#000;aspect-ratio:16/9;}
  .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .now-bar{padding:16px 20px;color:#fff;background:var(--navy);}
  .now-bar h2{font-size:18px;margin:0;}
  .now-bar .date{margin-top:6px;font-size:13px;color:var(--blue);font-weight:600;}
  .now-bar p{margin:8px 0 0;font-size:13px;color:#b8c4cf;line-height:1.5;}

  /* ===== Right: schedule sidebar ===== */
  .side{background:var(--navy);color:#fff;display:flex;flex-direction:column;
    border-left:1px solid var(--line);}
  .tabs{display:flex;gap:26px;padding:20px 22px 0;border-bottom:1px solid var(--line);}
  .tab{padding-bottom:12px;font-size:15px;font-weight:600;color:#8ea3b5;cursor:pointer;
    position:relative;background:none;border:0;font-family:inherit;}
  .tab.active{color:#fff;}
  .tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:var(--blue);}

  .panel{overflow-y:auto;max-height:660px;padding:22px;}
  .panel::-webkit-scrollbar{width:8px;}
  .panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px;}
  .panel-content{display:none;}
  .panel-content.active{display:block;}

  /* Featured "On Now" card */
  .feature{display:flex;gap:14px;cursor:pointer;padding:8px;margin:-8px -8px 12px;
    border-radius:6px;transition:background .15s;background:none;border:0;width:calc(100% + 16px);
    text-align:left;font-family:inherit;color:#fff;}
  .feature:hover{background:rgba(255,255,255,.05);}
  .feature .thumb{position:relative;width:160px;height:88px;border-radius:5px;overflow:hidden;flex-shrink:0;
    background:linear-gradient(135deg,#1c3a5e,#0a1826);}
  .feature .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .feature .mini-live{position:absolute;top:6px;left:6px;display:flex;align-items:center;gap:4px;
    background:#e11d2a;font-size:9px;font-weight:700;padding:2px 6px;border-radius:2px;}
  .feature .mini-live .dot{width:5px;height:5px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite;}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  .feature h3{margin:0 0 3px;font-size:16px;}
  .feature .time{color:var(--blue);font-size:12.5px;font-weight:600;margin-bottom:6px;}
  .feature p{margin:0;font-size:12.5px;line-height:1.5;color:#b8c4cf;}

  .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;
    border:1px solid rgba(255,255,255,.28);border-radius:4px;background:transparent;color:#fff;
    font-weight:600;font-size:14px;cursor:pointer;margin-bottom:22px;transition:background .15s;
    font-family:inherit;}
  .btn:hover{background:rgba(255,255,255,.08);}

  .coming{font-size:12px;letter-spacing:1.5px;font-weight:700;color:#8ea3b5;margin-bottom:6px;}

  /* Episode list items */
  .item{display:flex;gap:13px;padding:12px 0;cursor:pointer;border:0;width:100%;background:none;
    text-align:left;font-family:inherit;color:#fff;transition:opacity .15s;}
  .item + .item{border-top:1px solid rgba(255,255,255,.08);}
  .item:hover h4{color:var(--blue);}
  .item.active{background:rgba(26,159,212,.10);border-radius:6px;padding:12px 10px;margin:0 -10px;
    border-top-color:transparent;}
  .item .thumb{position:relative;width:160px;height:88px;border-radius:4px;overflow:hidden;flex-shrink:0;
    background:linear-gradient(135deg,#1c3a5e,#0a1826);}
  .item .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .item .thumb .play{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
    background:rgba(10,24,38,.4);}
  .item:hover .thumb .play,.item.active .thumb .play{display:flex;}
  .item .thumb .play svg{width:26px;height:26px;fill:#fff;}
  .item .thumb .np{position:absolute;top:4px;left:4px;background:var(--blue);font-size:8.5px;font-weight:700;
    padding:2px 5px;border-radius:2px;display:none;}
  .item.active .thumb .np{display:block;}
  .item h4{margin:0 0 3px;font-size:14px;line-height:1.3;transition:color .15s;}
  .item .sub{font-size:12px;color:#8ea3b5;}
  .item.active h4{color:var(--blue);}

  @media(max-width:960px){
    .top-player .grid{grid-template-columns:1fr;}
    .panel{max-height:none;}
  }

  /* ---------- Section heads ---------- */
.cbtl-sechead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 48px 0 18px; }
.cbtl-sechead h2 { font-size: 32px; font-weight: bold; color: var(--cbtl-slate); }
.cbtl-sechead p { font-size: 14px; color: var(--cbtl-text-muted); }
.cbtl-arrows { margin-left: auto; display: flex; gap: 8px; align-self: center; }
.cbtl-arrow { font-family: inherit; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--cbtl-warm-gray); background: #fff; color: var(--cbtl-slate); cursor: pointer; line-height: 1; transition: background .15s, color .15s, border-color .15s, opacity .15s; }
.cbtl-arrow svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cbtl-arrow:hover:not([disabled]), .cbtl-arrow:focus-visible:not([disabled]) { background: var(--cbtl-teal); border-color: var(--cbtl-teal); color: #fff; }
.cbtl-arrow[disabled] { opacity: .3; cursor: default; }

/* ---------- CTA strip ---------- */
.cbtl-cta { margin: 48px 0 35px; background: var(--cbtl-slate); border-radius: 6px; padding: 26px 30px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cbtl-cta h3 { font-family: 'Bebas Neue', 'DM Sans', sans-serif; font-weight: 400; font-size: 26px; letter-spacing: .03em; color: #fff; }
.cbtl-cta p { font-size: 14px; color: #b9c4cf; margin-top: 3px; }
.cbtl-cta a { margin-left: auto; background: var(--cbtl-gold); color: #241c05; font-weight: 700; font-size: 14px; letter-spacing: .03em; padding: 12px 24px; border-radius: 4px; text-decoration: none; white-space: nowrap; }
.cbtl-cta a:hover { background: #fff; color: #000 }

/* ---------- Carousel rail, one line ---------- */
.cbtl-railwrap { position: relative; }
/* Bleed the rail to the page edge on small screens so a card can sit half
   visible at the fold, which is what tells a thumb there is more to the right. */
.cbtl-rail {
  display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 4px 2px 16px; margin: 0 -2px;
  scrollbar-width: thin; scrollbar-color: var(--cbtl-warm-gray) transparent;
  -webkit-overflow-scrolling: touch;
}
.cbtl-rail::-webkit-scrollbar { height: 7px; }
.cbtl-rail::-webkit-scrollbar-track { background: transparent; }
.cbtl-rail::-webkit-scrollbar-thumb { background: var(--cbtl-warm-gray); border-radius: 99px; }
.cbtl-rail:hover::-webkit-scrollbar-thumb { background: #cfc8bd; }
.cbtl-rail:focus-visible { outline: 2px solid var(--cbtl-teal); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .cbtl-rail { scroll-behavior: auto; } }

.cbtl-card { flex: 0 0 auto; width: clamp(200px, 24vw, 220px); scroll-snap-align: start; display: block; text-align: left; border-radius: 5px; overflow: hidden; cursor: pointer; padding: 0; text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cbtl-card:hover, .cbtl-card:focus-visible { transform: translateY(-3px); }
.cbtl-card[aria-current="true"] { border-color: var(--cbtl-teal); box-shadow: 0 0 0 2px rgba(5,130,142,.22); }
.cbtl-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cbtl-warm-gray); }
/* Absolute so the theme's img{height:auto} cannot stretch the box past 16:9.
   The crop also removes the letterbox bars baked into YouTube's hqdefault. */
.cbtl-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cbtl-play { display: grid; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(5,130,142,.92); place-items: center; }
.cbtl-play::after { content: ""; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.cbtl-cardbody { display: block; padding: 12px 0 15px; }
.cbtl-date { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cbtl-teal); }
.cbtl-cardtitle { display: block; margin-top: 6px; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--cbtl-text); }

.cbtl-eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 25px; }
.cbtl-status { display: inline-flex; align-items: center; gap: 8px; border-radius: 100px; padding: 5px 14px 5px 11px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; background: rgba(255,255,255,.14); 
  border: 1px solid rgb(0 0 0 / 26%);
    color: #000;
 }
.cbtl-status.is-live { background: #e0362c; border-color: #e0362c; color: #fff; }
.cbtl-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .55; }
.cbtl-status.is-live .cbtl-dot { opacity: 1; animation: cbtl-pulse 1.6s ease-in-out infinite; }
@keyframes cbtl-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .cbtl-status.is-live .cbtl-dot { animation: none; } }

.cbtl-nowplaying { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 14px 2px 16px; flex-direction:column; }
.cbtl-nplabel { font-size: 36px; color: #fff; font-family: var(--secondary-font), sans-serif; font-weight: 500; line-height: 0.5;}
.cbtl-nptitle { font-size: 18px; color: #fff; }
.cbtl-switch { display: flex; gap: 12px; }
.cbtl-btn { font-family: inherit; font-size: 18px; padding: 12px 25px; border-radius: 6px; border: 1px solid #fff; background: transparent; color: #fff; cursor: pointer; transition: background .15s, color .15s; position: relative; display: flex; gap: 10px; align-items: center;}
.cbtl-btn:hover, .cbtl-btn:focus-visible { background: var(--cbtl-teal); color: #fff; }
.cbtl-btn[aria-pressed="true"] { background: var(--cbtl-teal); color: #fff; }

.cbtl-schedule {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--cbtl-teal-tint);
}

.cbtb-play{
  width: 16px;
    height: 16px;
    display: grid;
}
.cbtb-play::after {
    content: "";
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
}

#cbtl-golive{background: #03838f}

.spcl{color: #fff}
.cbtl-nowplaying{display: none;}
.footer{margin-top: 0 !important}
/* Make the hidden attribute win over display rules */
.feature[hidden],
.cbtl-btn[hidden],
.mini-live[hidden],
[hidden] { display: none !important; }
@media(max-width: 767px){
  .top-player{
    padding: 25px 25px 0;
  }
  .cbtl-schedule { font-size: 11px; }
  .cbtl-top h1{margin: 0}
  .top-player .side, .now-bar{display: none;}
  .cbtl-top, .cbtl-nowplaying{display: grid;}
    .top-player .grid {
        grid-template-columns: 1fr;
        margin: 0 -25px;
        padding: 30px 20px;
        border-radius: 0;
    }
    .cbtl-logo{max-width: 200px; margin-bottom: 20px}
    .cbtl-nowplaying{padding: 40px 0 0 0}
    .cbtl-wrap{margin: 0}
    .cbtl-sechead{margin: 0 0 20px;}
    .mgt-m{margin-top: 40px}
    .footer {
        margin-top: 0;
    }
    .ticker-wrapper.opshow {
        margin-bottom: 0;
    }

    .cbtl-cta a { margin: auto; }
    .cbtl-wrap{
      padding-bottom: 20px;
    }
}