: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;
  --text:#e7edf5;
}
[data-theme="light"]{
  --bg:#f7fafc; --panel:#ffffff; --panel-2:#f3f6fa; --muted:#475569;
  --scroll-thumb:#cbd5e1; --scroll-thumb-hover:#b6c2ce; --scroll-thumb-active:#94a3b8; --scroll-track:transparent;
  --brand:#0f141a; --brand-dim:#334155; --accent:#16a34a; --pill:#eef2f7; --pill-active:#e0e7ef;
  --text:#0f141a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);background:var(--bg);
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  transition: background .2s ease, color .2s ease;
}
.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}
[data-theme="light"] .left{ border-right-color:#e3e8ef; }
.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}
[data-theme="light"] .brand{ border-bottom-color:#e3e8ef; }

.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:var(--text);outline:none}
[data-theme="light"] .search{ border-bottom-color:#e3e8ef; }
[data-theme="light"] .search input{ background:#ffffff; border-color:#64748b; color:#0f141a;  border-width:2px;}
[data-theme="light"] .search input:focus{ border-color:#475569; box-shadow:0 0 0 2px rgba(99,132,177,.15) inset; 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}
[data-theme="light"] .channel{ border-bottom-color:#e6edf5; }
[data-theme="light"] .channel:hover{ background:#f2f6fb; }
[data-theme="light"] .channel.active{ background:#eaf3ff; }
[data-theme="light"] .channel .logo{ background:#ffffff; border-color:#e5e7eb; }

.middle{background:#0d1319;display:grid;grid-template-rows:auto 1fr;overflow:hidden;scroll-behavior:smooth;transition:background .2s ease}
.middle.empty{display:flex;align-items:center;justify-content:center;font-size:28px;color:#9fb0c3}
[data-theme="light"] .middle{ background:#ffffff; }

.datebar{
  position: static;  
  background:#0d1319; 
  padding: 8px 12px; border-bottom:1px solid #14202a;
  display: grid; grid-template-columns: 1fr auto; align-items:center; column-gap:10px;
}
[data-theme="light"] .datebar{
  background:#ffffff;
  border-bottom-color:#e3e8ef;
}
.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}
[data-theme="light"] .db-btn{ color:#0f172a; border-color:#d8e0ea; }
[data-theme="light"] .db-btn:hover{ background:#e9eef6; border-color:#cbd5e1; }
[data-theme="light"] .db-btn.active{ background:#dfe8f3; border-color:#c3d4e6; box-shadow:0 0 0 2px rgba(99,132,177,.15) inset; }

.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}
[data-theme="light"] .db-nav{ background:#f1f5f9; color:#0f172a; border-color:#d8e0ea; }
[data-theme="light"] .db-nav:hover{ background:#e8eef6; border-color:#cbd5e1; }

.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}
.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)}}
[data-theme="light"] .program{ border-bottom-color:#e6edf5; }
[data-theme="light"] .program:hover{ background:#f2f6fb; }
[data-theme="light"] .program.active{ background:#eaf3ff; }
[data-theme="light"] .program.live{ background:#fff7f7; }
.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; }

.middle.intro{padding:20px 24px 48px;line-height:1.7}
.intro-wrap{max-width:none;width:100%}
.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:var(--accent);text-decoration:none;font-weight:800}
.intro-links a:hover{text-decoration:underline}
.intro-muted{color:var(--muted)}
.intro-strong{font-weight:700}
.intro-sep{height:1px;background:#1a222c;margin:16px 0}
[data-theme="light"] .intro-sep{ background:#e6edf5; }

.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:var(--muted)}
[data-theme="light"] .intro-qr{ background:#ffffff; border-color:#e5e7eb; }

.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:var(--text);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}
[data-theme="light"] .right{ border-left-color:#e3e8ef; }
[data-theme="light"] .preview{ background:#ffffff; border-bottom-color:#e3e8ef; }
[data-theme="light"] .info{ border-bottom-color:#e3e8ef; }

#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:#9fb0c3}

.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; }
[data-theme="light"] .hamburger{ background:#f1f5f9; color:#0f172a; border-color:#d8e0ea; }

.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; }
[data-theme="light"] .modal-close{ background:#f1f5f9; color:#0f172a; border-color:#d8e0ea; }

.intro-header{width:100%;flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.theme-toggle{ display:inline-flex; align-items:center; gap:8px; user-select:none; }
.theme-toggle .label{ font-size:13px; color:var(--muted); }
.switch{
  --pad:3px; --knob-size:24px; --knob-size-checked:24px;
  position:relative; width:60px; height:30px; border-radius:999px;
  background:#0d1924; border:1px solid #1a2a38; cursor:pointer; transition:background .15s,border-color .15s;
}
.switch .knob{
  position:absolute; top:50%; left:var(--pad); transform:translateY(-50%);
  width:var(--knob-size); height:var(--knob-size); border-radius:50%;
  background:#ffffff; display:flex; align-items:center; justify-content:center; font-size:14px; transition:left .2s ease, width .2s ease, height .2s ease, background .2s ease;
}
.switch .sun, .switch .moon{
  position:absolute; top:50%; transform:translateY(-50%); font-size:14px; pointer-events:none;
}
.switch .sun{ left:8px; }
.switch .moon{ right:8px; }
.switch input{ position:absolute; inset:0; opacity:0; margin:0; }
.switch input:checked ~ .knob{ left:calc(100% - var(--pad) - var(--knob-size-checked)); width:var(--knob-size-checked); height:var(--knob-size-checked); background:#0b0b0b; }
[data-theme="light"] .switch{ background:#e8eef6; border-color:#cbd5e1; }

#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); } }

.topbar{ 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: 100;
    background: var(--panel-2); border-bottom:1px solid #141d26; padding:8px 12px;
  }
  [data-theme="light"] .topbar{ border-bottom-color:#e3e8ef; }

  .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;
  }
  [data-theme="light"] .right .info{ border-color:#e3e8ef; }
  .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: static; top:56px; 
    background: var(--panel-2);
    border-bottom: 1px solid #141d26;
    padding: 8px 12px;
    grid-template-columns: 1fr auto;
  }
  [data-theme="light"] .datebar{ border-bottom-color:#e3e8ef; background: var(--panel-2); }
  .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; }

.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);
    
    display: grid;
    align-items: center;
    background: var(--panel-2);
    border-bottom: 1px solid #141d26;
    padding: 6px 8px;
    margin: 0;
    grid-template-columns: 1fr !important;
  
  z-index: 60;
}
  .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; width:max-content; max-width:100%; display:flex; gap:6px; white-space:nowrap; 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; }
}
#pickDay{ display:none !important; }

[data-theme="light"] .channel .idx{ color:#0f172a; font-weight:700; }
[data-theme="light"] .program .t{ color:#334155; font-weight:700; }
[data-theme="light"] .info .label{ color:#0f172a; font-weight:800; letter-spacing:.2px; }
[data-theme="light"] .left{ border-right-color:#cbd5e1; }
[data-theme="light"] .right{ border-left-color:#cbd5e1; }
[data-theme="light"] .brand{ border-bottom-color:#cbd5e1; }
[data-theme="light"] .search{ border-bottom-color:#cbd5e1; }
[data-theme="light"] .datebar{ border-bottom-color:#cbd5e1; }
[data-theme="light"] .intro-sep{ background:#cbd5e1; }
[data-theme="light"] .channel{ border-bottom-color:#cbd5e1; }
[data-theme="light"] .channel .logo{ border-color:#cbd5e1; }
[data-theme="light"] .program{ border-bottom-color:#cbd5e1; }
[data-theme="light"] .preview{ border-bottom-color:#cbd5e1; }
[data-theme="light"] .info{ border-bottom-color:#cbd5e1; }
[data-theme="light"] .db-btn{ border-color:#64748b; }
[data-theme="light"] .db-btn:hover{ border-color:#475569; }
[data-theme="light"] .db-btn.active{ border-color:#475569; }
[data-theme="light"] .db-nav{ border-color:#64748b; }
[data-theme="light"] .db-nav:hover{ border-color:#475569; }
[data-theme="light"] .meta .k{ color:#0f172a; font-weight:800; letter-spacing:.2px; }
[data-theme="light"] .info .label{ color:#0f172a; font-weight:800; }

#programTitle, #programTime{ font-weight:500 !important; }

[data-theme="light"] .modal-close{ border:2px solid #475569 !important; }
[data-theme="light"] .db-btn{ border-width:2px !important; }
[data-theme="light"] .db-nav{ border-width:2px !important; }
@media (max-width: 768px){
  [data-theme="light"] .right .info{ border:2px solid #94a3b8 !important; }
}

[data-theme="light"] .channel{ border-bottom-color:#94a3b8 !important; }
[data-theme="light"] .program{ border-bottom-color:#94a3b8 !important; }
[data-theme="light"] .brand{ border-bottom-color:#94a3b8 !important; }
[data-theme="light"] .search{ border-bottom-color:#94a3b8 !important; }
[data-theme="light"] .datebar{ border-bottom-color:#94a3b8 !important; }
[data-theme="light"] .preview{ border-bottom-color:#94a3b8 !important; }

[data-theme="dark"] .info .label{ font-weight:800; }
[data-theme="dark"] .meta .k{ font-weight:800; }
.info .value{ font-weight:500; }

.app{margin-left:auto;}
.switch{margin-left:auto;}
.theme-toggle{margin-left:auto;}

#toast{white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
#toast a{word-break:break-all;}

@media (min-width: 992px){
  #toast{ white-space:nowrap; overflow-wrap:normal; word-break:normal; }
  #toast a{ word-break:normal; }
}

#glassBackdrop{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: blur(28px) saturate(1.6) brightness(.9);
  opacity: 0; transition: opacity .25s ease;
}
.glass-global #glassBackdrop{ opacity: 0.7; }
.app{ position: relative; z-index: 1; }
.glass-global .left{ background: rgba(18,25,33,0.86); }
.glass-global .middle{ background: rgba(13,19,25,0.82); }
.glass-global .right{ background: rgba(18,25,33,0.86); }
.glass-global .program:hover{ background: rgba(23,33,43,0.82); }
.glass-global .program.active{ background: rgba(16,32,51,0.88); }
.glass-global .channel:hover{ background: rgba(14,22,32,0.82); }
.glass-global .channel.active{ background: rgba(16,32,51,0.88); }
.glass-global .info{ background: rgba(13,19,25,.55) !important; border-color: rgba(255,255,255,.14) !important; box-shadow: 0 8px 24px rgba(0,0,0,.28) !important; }
.glass-global #preview{ border: 0 !important; background: transparent !important; }
.glass-global .search input{
  background: rgba(12,18,24,.30) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: var(--text);
}
.glass-global .datebar{
  background: rgba(13,19,25,.30) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}
.glass-global .db-btn{ background: rgba(13,25,37,.34) !important; border-color: rgba(255,255,255,.2) !important; }
.glass-global .db-btn.active{ background: rgba(22,54,80,.42) !important; border-color: rgba(255,255,255,.3) !important; }
.glass-global .db-nav{ background: rgba(13,25,37,.34) !important; border-color: rgba(255,255,255,.2) !important; }

.datebar{ important; background:#0d1319 !important; }
[data-theme="light"] .datebar{ background:#ffffff !important; }
#programList{  }

#programList{  }
.datebar{ border-bottom:1px solid #14202a !important; }
[data-theme="light"] .datebar{ border-bottom-color:#e3e8ef !important; }

#programScroll{min-height:0; overflow-y:auto;}

.middle.intro{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:768px){
  .middle.intro{ padding-top: var(--topbar-h) !important; }
}

[data-theme="light"] .channel.active{
  background:#dbeafe !important;
  border-left:4px solid #3b82f6;
}
[data-theme="light"] .channel.active .idx,
[data-theme="light"] .channel.active .name{
  color:#1e3a8a; font-weight:800;
}
[data-theme="light"] .program.active{
  background:#dbeafe !important;
  border-left:4px solid #3b82f6;
}
[data-theme="light"] .program.active .t,
[data-theme="light"] .program.active .name-text{
  color:#1e3a8a; font-weight:800;
}
[data-theme="light"] .program:hover{ background:#eff6ff; }
[data-theme="light"] .db-btn.active{
  background:#dbeafe !important; 
  border-color:#93c5fd !important; 
  box-shadow:0 0 0 2px rgba(59,130,246,.25) inset !important;
  color:#1d4ed8 !important;
}
[data-theme="light"] .db-btn:hover{ background:#eff6ff; }


@media (min-width: 769px) and (max-width: 1290px){
  .app{ grid-template-columns: 320px 1fr !important; }

  .right{
    position: fixed; inset: 0; z-index: 60;
    display: none; padding: 16px; background: rgba(0,0,0,.55);
    overflow: auto;
  }
  .app:not(.no-right) .right{ display: block; }
  .right .info{
    width: min(680px, 88vw); margin: 0 auto;
    background: var(--panel); border:1px solid #141d26;
    border-radius: 14px; padding: 16px;
  }
  [data-theme="light"] .right .info{ border-color:#e3e8ef; }
  .right .preview{
    width: min(680px, 88vw); margin: 0 auto 8px;
    background: transparent; border:0; padding:0;
  }
  .modal-close{ position: absolute; top: 8px; right: 8px; z-index: 5; }
}


@media (min-width: 769px) and (max-width: 1290px){
  .right .preview{ aspect-ratio: auto !important; overflow: hidden; }
  .right .preview img{
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    }
}

@media (min-width: 769px) and (max-width: 1290px){
  .right{ overflow-x: hidden !important; }
  .right .preview,
  .right .info{
    width: min(720px, calc(100vw - 32px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .right .preview{ padding: 0 !important; }
  .right .preview img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:cover;
    object-position:center center !important;
  }
}

@media (min-width: 769px) and (max-width: 1290px){
  .right{
    padding: 16px !important;
    display: block;
    overflow-x: hidden !important;
    text-align: center;
  }
  .right .preview,
  .right .info{
    box-sizing: border-box !important;
    display: inline-block !important;
    vertical-align: top;
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: none !important;
    margin: 0 auto 8px auto !important;
  }
  .right .info *{
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .right .preview{ padding: 0 !important; overflow: hidden !important; }
  .right .preview img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

@media (min-width: 769px) and (max-width: 1290px){
  .right .info{
    text-align: left !important;
  }
  .right .info .label,
  .right .info .value,
  .right .info .meta,
  .right .info .row,
  .right .info .k,
  .right .info .v,
  .right .info h1,
  .right .info h2,
  .right .info h3,
  .right .info p{
    text-align: left !important;
  }
  .right .info .actions,
  .right .info .share,
  .right .info button{
    margin-left: 0 !important;
    margin-right: auto !important;
    display: inline-flex !important;
  }
}

@media (min-width: 769px) and (max-width: 1290px){
  .datebar .db-nav#prevDay,
  .datebar .db-nav#nextDay{
    display: none !important;
  }
  .datebar .bar-left{
    gap: 10px !important;
  }
  .datebar .pills{
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 1 1 auto !important;
  }
}


@media (max-width: 768px){
  #toast{
    max-width: 96vw !important;
    min-width: 86vw !important;
    white-space: normal !important; 
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: left !important;
  }
  #toast a{
    word-break: break-all !important;
  }
}

@media (max-width: 768px){
  #toast .toast-note{
    display:block;
    text-align:center;
  }
}