:root{
  --bg:#0d1a20; --ink:#e7eef0; --panel:#080e11; --line:#27383a;
  --accent:#4d5c61; --ok:#05c024; --live:#ff4e4e;
  --soon:rgba(255,255,0,0.65);
  --cellA:#183138; --greenA:#103226; --blueA:#0d2c3b; --goldA:#2d2a10;
  --gutter:200px;
}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:Arial,sans-serif;overflow:hidden;}
.topbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--line);background:#080e11;} 
.brand{font-weight:700;}
.actions{display:flex;gap:8px;}
.btn{background:#0f1b20;color:var(--ink);border:1px solid var(--line);padding:6px 10px;cursor:pointer;}
.btn.active{outline:none;} 
#btnFirst.active{background:#2d2a10;}
#btnSecond.active{background:#103226;}
.app{display:flex;height:calc(100% - 48px);width:100vw;}
.door-right{flex:1;background:var(--panel);display:flex;flex-direction:column;}
.time-strip{position:relative;display:grid;border-bottom:1px solid var(--line);background:var(--panel);} 
.time-cell{padding:6px;text-align:center;border-right:1px solid var(--line);font-size:13px;}
/* === Highlight current hour cell in brighter transparent yellow === */
.time-cell.is-now{background:var(--soon);color:#000;font-weight:700;}

.grid-wrap{display:grid;grid-template-columns:var(--gutter) 1fr;flex:1;}
.channels{border-right:1px solid var(--line);overflow:auto;}
.channel{height:64px;display:flex;align-items:center;padding:0 10px;} 
.grid{position:relative;overflow:auto;}
.grid-inner{display:grid;position:relative;}
.slot{border:1px solid var(--line);padding:6px;color:var(--ink);transition:background 0.2s, outline 0.2s, border-color 0.2s;position:relative;}
.slot[data-color="green"]{background:var(--greenA);} 
.slot[data-color="blue"]{background:var(--blueA);} 
.slot[data-color="gold"]{background:var(--goldA);} 
.slot:not([data-color]){background:var(--cellA);} 
.slot:hover{outline:2px solid var(--accent);} 
.slot .live-badge{position:absolute;top:2px;right:4px;background:var(--live);color:#fff;font-size:10px;font-weight:bold;padding:1px 3px;}
.slot.live-soon{border-color:var(--soon) !important;} 
.now-line,.now-line-grid{position:absolute;top:0;bottom:0;width:2px;background:var(--live);z-index:9999;}