:root{ --topbar-h:56px; --datebar-h:48px; 
    --bg:#0f141a; --panel:#1b2430; --panel-2:#121921; --muted:#9fb0c3;
    --scroll-thumb:#2d3f51; --scroll-thumb-hover:#3b536b; --scroll-thumb-active:#5d7fa1; --scroll-track:transparent;
    --brand:#e7edf5; --brand-dim:#a7b6c7; --accent:#4ade80; --pill:#0d1924; --pill-active:#11324a;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;color:#e7edf5;background:var(--bg);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";}
  .app{display:grid;grid-template-columns:320px 1fr 420px;height:100vh;overflow:hidden;transition:grid-template-columns .2s ease}
  .app.no-right{grid-template-columns:320px 1fr;}
  .app > *,.left,.middle,.right{min-height:0;min-width:0}
  .left{background:var(--panel-2);border-right:1px solid #141d26;display:grid;grid-template-rows:auto auto 1fr}
  .brand{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid #141d26}
  .brand img{width:24px;height:24px;border-radius:6px;display:block}
  .brand .text{font-weight:700;color:var(--brand);font-size:16px;line-height:1.2}
  .brand .sub{display:block;font-size:12px;line-height:1.25;color:var(--brand-dim);margin-top:2px}
  .search{padding:8px 10px;border-bottom:1px solid #141d26}
  .search input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #1a2430;background:#0c1218;color:#e7edf5;outline:none}
  #channelList{overflow-y:auto}
  .channel{display:grid;grid-template-columns:28px 40px 1fr;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid #1a222c;cursor:pointer;transition:background .15s}
  .channel:hover{background:#0e1620}
  .channel.active{background:#102033}
  .channel .idx{width:28px;text-align:right;color:#93a3b5;font-variant-numeric:tabular-nums}
  .channel .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .channel .logo{width:40px;height:28px;border-radius:6px;background:#0c1218;border:1px solid #1a222c;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .channel .logo img{width:100%;height:auto;display:block}
  .channel .logo .placeholder{font-size:10px;color:var(--muted);letter-spacing:.5px;font-weight:700}
  .middle{background:#0d1319;overflow-y:auto;scroll-behavior:smooth}
  .middle.empty{display:flex;align-items:center;justify-content:center;font-size:28px;color:#9fb0c3}
  .datebar{
    position: sticky; top: 0; z-index: 5;
    background: linear-gradient(180deg, #0d1319 90%, rgba(13,19,25,0));
    padding: 8px 12px; border-bottom:1px solid #14202a;
    display: grid; grid-template-columns: 1fr auto; align-items:center; column-gap:10px;
  }
  .datebar .bar-left{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:flex-start; }
  .datebar .bar-left .pills{ display:flex; gap:14px; flex-wrap:wrap; }
  .datebar .bar-right{ justify-self:end; color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums }
  .datebar > *,
  .datebar .bar-left,
  .datebar .pills,
  .datebar .bar-right{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .db-btn{
    border:1px solid #1a2a38; background:var(--pill); color:#cfe3f7;
    padding:8px 14px; border-radius:999px; cursor:pointer; user-select:none;
    font-weight:700; letter-spacing:.2px; transition:all .15s ease;
  }
  .db-btn:hover{background:#0f2232;border-color:#20435f}
  .db-btn.active{background:var(--pill-active); border-color:#2c5d7f; box-shadow:0 0 0 2px rgba(76,141,191,.15) inset}
  .db-btn:focus,.db-btn:focus-visible,.db-nav:focus,.db-nav:focus-visible{outline:none!important;box-shadow:none!important}
  .db-nav{
    width:36px;height:36px;border-radius:999px;cursor:pointer;
    border:1px solid #1a2a38;background:#0d1924;color:#cfe3f7;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;line-height:0;transition:all .15s ease;
  }
  .db-nav:hover{background:#0f2232;border-color:#20435f}
  .db-nav[disabled]{opacity:.4;cursor:default;pointer-events:none}

  .program{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:12px;border-bottom:1px solid #1a222c;cursor:pointer}
  .program .t{color:#93a3b5;font-variant-numeric:tabular-nums}
  .program:hover{background:#17212b}
  .program.active{background:#102033}
  .program.live{background:#0f2a3f}
  .program .n{display:flex;align-items:center;gap:8px}
  .live-dot{width:10px;height:10px;border-radius:999px;display:inline-block;background:#ff4d4d;box-shadow:0 0 0 0 rgba(255,77,77,.6);animation:livepulse 1.6s ease-out infinite}
  @keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(255,77,77,.6)}70%{box-shadow:0 0 0 6px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
  .middle.intro{padding:20px 24px 48px;line-height:1.7}
  .intro-wrap{max-width:980px}
  .intro-h1{font-size:28px;font-weight:800;margin:0 0 6px}
  .intro-h1 .author{color:var(--accent)}
  .intro-h2{font-size:26px;font-weight:800;margin:14px 0 8px}
  .intro-links a{color:#7cf2a1;text-decoration:none;font-weight:800}
  .intro-links a:hover{text-decoration:underline}
  .intro-muted{color:#9fb0c3}
  .intro-strong{font-weight:700}
  .intro-sep{height:1px;background:#1a222c;margin:16px 0}
  .intro-qr-grid{display:grid;grid-template-columns:repeat(2,170px);column-gap:100px;row-gap:16px;margin:10px 0 8px}
  .intro-qr{background:#0c1218;border:1px solid #1a222c;border-radius:12px;padding:10px;text-align:center;text-decoration:none;color:inherit}
  .intro-qr:link,.intro-qr:visited,.intro-qr:hover,.intro-qr:active{text-decoration:none;color:inherit}
  .intro-qr img{width:150px;height:150px;object-fit:contain;display:block;margin:0 auto 10px}
  .intro-qr .cap{color:#9fb0c3}
  .right{background:var(--panel-2);border-left:1px solid #141d26;display:grid;grid-template-rows:auto 1fr}
  .right.hidden{display:none}
  .preview{position:relative;width:100%;aspect-ratio:16/9;background:#0c1218;border-bottom:1px solid #141d26}
  .preview.hidden{display:none}
  .preview img{width:100%;height:100%;object-fit:cover;display:block}
  .info{padding:12px;border-bottom:1px solid #141d26;overflow-y:auto}
  .info .label{color:#93a3b5;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
  .info .value{font-weight:700}
  .meta{margin-top:8px;display:grid;gap:6px}
  .meta .row{display:grid;grid-template-columns:90px 1fr;gap:8px;align-items:start}
  .meta .k{color:#93a3b5;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
  .meta .v{color:#e7edf5;white-space:pre-line}
  #rowDesc{grid-template-columns:1fr!important}
  #rowDesc .k{grid-column:1/-1!important;display:block}
  #rowDesc .v{grid-column:1/-1!important;line-height:1.6;white-space:pre-line}
  #channelList,.middle,.info{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track);scrollbar-gutter:stable both-edges}
  #channelList::-webkit-scrollbar,.middle::-webkit-scrollbar,.info::-webkit-scrollbar{width:6px;height:6px}
  #channelList::-webkit-scrollbar-track,.middle::-webkit-scrollbar-track,.info::-webkit-scrollbar-track{background:var(--scroll-track);margin-block:6px}
  #channelList::-webkit-scrollbar-thumb,.middle::-webkit-scrollbar-thumb,.info::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px;border:2px solid transparent;background-clip:content-box}
  #channelList:hover::-webkit-scrollbar-thumb,.middle:hover::-webkit-scrollbar-thumb,.info:hover::-webkit-scrollbar-thumb{background:var(--scroll-thumb-hover)}
  #channelList::-webkit-scrollbar-thumb:active,.middle::-webkit-scrollbar-thumb:active,.info::-webkit-scrollbar-thumb:active{background:var(--scroll-thumb-active)}
  #channelList::-webkit-scrollbar-corner,.middle::-webkit-scrollbar-corner,.info::-webkit-scrollbar-corner{background:transparent}
  .empty-center{display:flex;align-items:center;justify-content:center;height:calc(100vh - 60px);font-size:28px;color:var(--muted)}
.topbar{ display:none; }
.hamburger{
  width:36px;height:36px;border-radius:10px;border:1px solid #1a2a38;
  background:#0d1924;color:#cfe3f7;display:flex;align-items:center;
  justify-content:center;font-size:18px;line-height:0;
}
.brand-mini{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mini img{ width:24px; height:24px; border-radius:6px; display:block; }
.brand-mini .name{ color: var(--brand); font-weight:700; font-size:16px; line-height:1; }
.modal-close{
  position: fixed; top: 64px; right: 12px; z-index: 65;
  width:36px;height:36px;border-radius:999px;border:1px solid #2a3845;
  background:#0d1924;color:#cfe3f7;display:flex;align-items:center;justify-content:center;font-size:18px;
}
.modal-close[hidden]{ display:none; }
@media (max-width: 768px){
  .topbar{
    display:flex; align-items:center; gap:12px;
    position: fixed; top:0; left:0; right:0; height:56px; z-index:50;
    background: var(--panel-2); border-bottom:1px solid #141d26; padding:8px 12px;
  }
  .app{ grid-template-columns: 1fr !important; }
  .middle{ padding-top: 56px; }
  .left{
    position: fixed; top:56px; left:0; right:0; bottom:0;
    width:auto; max-width:none; transform: translateX(-100%);
    transition: transform .25s ease; z-index: 40;
  }
  .app.menu-open .left{ transform: translateX(0); }
  .app.menu-open::after{ content:""; position: fixed; inset:56px 0 0 0; z-index:35; background: rgba(0,0,0,.45); }
  .left .brand{ display:none; }
  .right{
    position: fixed; inset:56px 0 0 0; z-index:60;
    display:none; padding:12px; background: rgba(0,0,0,.55);
    overflow:auto;
  }
  .app:not(.no-right) .right{ display:block; }
  .right .info{
    width: min(680px, 92vw); margin: 0 auto;
    background: var(--panel); border:1px solid #141d26;
    border-radius: 14px; padding: 16px;
  }
  .right .preview{
    width: min(680px, 92vw); margin: 0 auto 8px;
    background: transparent; border:0; padding:0;
  }

  .datebar{ grid-template-columns: 1fr auto; padding-right: 12px; }
}
.middle.intro .intro-qr-grid{ grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width:420px){
  .middle.intro .intro-h1{ font-size: 20px; }
  .middle.intro .intro-h2{ font-size: 15px; }
  .middle.intro .intro-qr-grid{ grid-template-columns: 1fr; }
}
@media (max-width:768px){
  .right .info{ position: relative; width: min(680px, 92vw); margin: 0 auto; }
  .right .preview{ width: 100%; margin: 0 0 8px 0; padding:0; border:0; background:transparent; }
  .right .preview img{ display:block; width:100%; max-width:100%; height:auto; border-radius: 12px 12px 8px 8px; object-fit: contain; }
  .modal-close{ position: absolute; top: 8px; right: 8px; z-index: 5; }
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text .name{ font-weight:800; font-size:16px; }
.brand-text .tagline{ font-size:12px; color: var(--brand-dim); }
@media (max-width:768px){
  .datebar{
    position: sticky; top:56px; z-index: 45;
    background: var(--panel-2);
    border-bottom: 1px solid #141d26;
    padding: 8px 12px;
    grid-template-columns: 1fr auto;
  }
  .datebar .bar-left{ gap: 8px; }
  .datebar .bar-left .pills{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .datebar .bar-right{ font-weight:600; }
  .db-nav{ width:36px; height:36px; border-radius:10px; }
}

@media (max-width:768px){
  .app.menu-open .datebar{ display:none; }
}

.date-picker{
  position:absolute !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  pointer-events:none !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
}

@media (min-width: 769px){
  .right .info{ position: relative; }
  .right .info{ padding-top: 56px; }
  .modal-close{ position: absolute; top: 8px; right: 8px; z-index: 2; }
}

.date-picker{
  position:fixed !important; left:-9999px !important; top:-9999px !important;
  width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important;
  appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
  border:0 !important; padding:0 !important; margin:0 !important; background:transparent !important;
}
.date-picker::-webkit-calendar-picker-indicator{ display:none !important; opacity:0 !important; }

.right .info{ padding-top: 56px; }
.right .info.no-img{ padding-top: 56px; }

@media (min-width:769px){
  .right .preview img{ border-radius: 12px !important; }
  .intro-qr-grid{
    grid-template-columns: repeat(2, minmax(180px, 220px)) !important;
    column-gap: 72px !important;
    row-gap: 12px !important;
    justify-content: flex-start !important;
  }
  .intro-qr{ width: 220px !important; padding: 8px !important; border-radius: 10px !important; }
  .intro-qr img{ width: 100% !important; height: auto !important; max-width: 196px !important; }
}

@media (max-width:768px){
  :root{ --topbar-h:56px; --datebar-h:48px; }
  .topbar{ height: var(--topbar-h) !important; }
  .middle{ padding-top: calc(var(--topbar-h) + var(--datebar-h)) !important; }

  .datebar{
    position: fixed !important;
    left: 0; right: 0;
    top: var(--topbar-h);
    height: var(--datebar-h);
    z-index: 48;
    display: grid;
    align-items: center;
    background: var(--panel-2);
    border-bottom: 1px solid #141d26;
    padding: 6px 8px;
    margin: 0;
    grid-template-columns: 1fr !important;
  }
  .datebar .bar-left{
    display: grid; grid-template-columns: auto 1fr auto; align-items:center; width:100%;
  }
  .datebar .bar-left .db-nav#prevDay{ justify-self:start; }
  .datebar .bar-left .db-nav#nextDay{ justify-self:end; }
  .datebar .bar-left .pills{ justify-self:center; display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  #barDate{ display:none !important; }
  #pickDay{ display:none !important; }
  .app.menu-open .datebar{ display:none !important; visibility:hidden !important; pointer-events:none !important; }
  .left{ z-index: 60 !important; }
}

.program .name-text{ overflow-wrap:anywhere; word-break:break-word; }
.program.live .n{ display:grid; grid-template-columns: 14px 1fr; column-gap:8px; align-items:center; }
.program.live .live-dot{ margin:0; }

#pickDay{ display:none !important; }

#loading-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(1px);
}
#loading-overlay .spinner{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}