*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d1b2a;--surface:#1a2d42;--surface2:#243a52;--border:#2e4a65;--accent:#0070cc;--accent-hover:#08f;--text:#e8f0f8;--text-dim:#8aa8c8;--channel-w:120px;--ruler-h:40px;--row-h:72px;--header-h:56px}html,body{background:var(--bg);height:100%;color:var(--text);font-family:system-ui,-apple-system,sans-serif;overflow:hidden}#header{height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:0 16px;display:flex}#header h1{letter-spacing:.05em;color:var(--text);margin-right:auto;font-size:1.1rem;font-weight:700}#date-label{text-align:center;min-width:140px;font-size:.95rem;font-weight:600}button{background:var(--surface2);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:6px 14px;font-size:.85rem;transition:background .15s}button:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}button:disabled{opacity:.35;cursor:default}#btn-jump{color:var(--text-dim);padding:6px 10px;font-size:.8rem}#app{flex-direction:column;height:100vh;display:flex}#grid-container{flex:1;position:relative;overflow:hidden}.grid-wrapper{flex-direction:row;height:100%;display:flex}#channel-col{width:var(--channel-w);background:var(--surface);border-right:1px solid var(--border);z-index:10;flex-shrink:0;overflow:hidden}.channel-col-spacer{height:var(--ruler-h);border-bottom:1px solid var(--border);flex-shrink:0}.channel-label{height:var(--row-h);color:var(--text-dim);border-bottom:1px solid var(--border);letter-spacing:.03em;white-space:nowrap;text-overflow:ellipsis;align-items:center;padding:0 12px;font-size:.78rem;font-weight:700;display:flex;overflow:hidden}#scroll-area{flex:1;overflow:auto}.ruler-wrapper{z-index:5;background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0}.time-ruler{height:var(--ruler-h);flex-shrink:0;position:relative}.ruler-tick{height:100%;color:var(--text-dim);border-left:1px solid var(--border);white-space:nowrap;align-items:center;padding-left:6px;font-size:.72rem;font-weight:600;display:flex;position:absolute;top:0}.ruler-tick--half{opacity:.6;font-size:.65rem;font-weight:400}.channel-track{height:var(--row-h);border-bottom:1px solid var(--border);flex-shrink:0;position:relative}.programme{height:calc(var(--row-h) - 8px);background:var(--surface2);border:1px solid var(--border);cursor:pointer;border-radius:5px;flex-direction:column;gap:2px;padding:4px 7px;transition:background .12s,border-color .12s;display:flex;position:absolute;top:4px;overflow:hidden}.programme:hover{background:var(--accent);border-color:var(--accent-hover);z-index:2}.programme__time{color:var(--text-dim);white-space:nowrap;flex-shrink:0;font-size:.62rem}.programme:hover .programme__time{color:#ffffffb3}.programme__title{white-space:nowrap;text-overflow:ellipsis;font-size:.76rem;font-weight:600;line-height:1.2;overflow:hidden}.programme__flags{color:var(--text-dim);white-space:nowrap;flex-shrink:0;font-size:.58rem}.programme:hover .programme__flags{color:#fff9}#detail-panel{z-index:100;background:#000000a6;justify-content:center;align-items:flex-end;padding:16px;display:flex;position:fixed;inset:0}#detail-panel.hidden{display:none}#detail-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:100%;max-width:520px;padding:20px 24px;position:relative}#detail-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:1.2rem;position:absolute;top:12px;right:12px}#detail-close:hover{background:var(--surface2);color:var(--text)}#detail-title{margin-bottom:6px;padding-right:32px;font-size:1.1rem;font-weight:700}#detail-time-row{color:var(--text-dim);gap:12px;margin-bottom:10px;font-size:.82rem;display:flex}#detail-meta{color:var(--accent-hover);min-height:1em;margin-bottom:12px;font-size:.75rem}#detail-synopsis{color:var(--text-dim);font-size:.85rem;line-height:1.55}.loading,.error{text-align:center;color:var(--text-dim);padding:40px 24px;font-size:.9rem}.error{color:#e05555}
