:root { --bg:#090909; --card:#161616; --line:#262626; --fg:#f2f2f2; --dim:#8a8a8a; --acc:#3b82f6; --rec:#e5484d; --px:4px; --chan:112px; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:15px/1.35 -apple-system, system-ui, sans-serif; -webkit-text-size-adjust:100%; }
[hidden] { display:none !important; }
button, input, select { font:inherit; color:inherit; min-height:44px; border:0; border-radius:10px; background:#232323; padding:0 14px; }
button { cursor:pointer; touch-action:manipulation; }
.access { max-width:420px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 14vh) 20px 20px; display:grid; gap:12px; }
.access div { display:flex; gap:8px; } .access input { flex:1; min-width:0; } .access button, .actions .rec { background:var(--acc); }
.access p { color:var(--dim); margin:0; }
#app { height:100dvh; display:flex; flex-direction:column; padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
.top { display:flex; align-items:center; justify-content:space-between; padding:6px 12px; gap:8px; }
.tabs { display:flex; gap:6px; } .tabs button { background:transparent; color:var(--dim); } .tabs button.on { background:#232323; color:var(--fg); }
#count { color:var(--dim); font-size:12px; }
b { background:var(--rec); border-radius:9px; padding:1px 7px; font-size:12px; }
.tab { flex:1; min-height:0; display:flex; flex-direction:column; padding:0 12px calc(env(safe-area-inset-bottom)*.4 + 8px); gap:8px; }
#tab-rec { overflow:auto; display:block; } #tab-rec[hidden] { display:none; }
.top-row { padding:0 12px 8px; display:grid; gap:8px; grid-template-columns:minmax(0,1fr); }
.video-wrap { position:relative; background:#000; border-radius:12px; overflow:hidden; aspect-ratio:16/9; width:100%; max-height:32dvh; justify-self:center; }
.video-wrap video { width:100%; height:100%; background:#000; }
.video-wrap:fullscreen { max-height:none; border-radius:0; }
.video-placeholder { position:absolute; inset:0; display:grid; place-items:center; align-content:center; color:var(--dim); pointer-events:none; }
.video-wrap.has-channel .video-placeholder { display:none; }
.fs { position:absolute; top:8px; right:8px; min-height:36px; padding:0 10px; background:#000a; }
.error { position:absolute; left:0; right:0; bottom:48px; margin:0; padding:8px; background:#7f1d1dcc; text-align:center; }
.detail { display:none; background:var(--card); border-radius:12px; padding:10px 14px; overflow:auto; max-height:34dvh; }
.detail h2, #tab-rec h2 { margin:0 0 4px; font-size:16px; } .detail p { margin:2px 0; color:var(--dim); }
.toolbar { display:flex; gap:8px; } .toolbar input { flex:1; min-width:0; }
.grid { flex:1; min-height:0; overflow:auto; position:relative; background:var(--card); border-radius:12px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.ruler, .row { display:flex; width:max-content; } .ruler { position:sticky; top:0; z-index:3; background:#0f0f0f; height:28px; }
.ruler .corner, .row .ch { position:sticky; left:0; z-index:2; width:var(--chan); flex:none; background:#111; }
.ruler .corner { z-index:4; }
.ruler span { position:absolute; top:6px; font-size:12px; color:var(--dim); }
.ruler .track { position:relative; width:calc(var(--span) * var(--px)); }
.row { height:52px; border-top:1px solid var(--line); }
.row .ch { display:flex; align-items:center; gap:6px; padding:0 8px; border-radius:0; text-align:left; min-height:52px; overflow:hidden; font-size:13px; }
.row .ch img { width:30px; height:30px; object-fit:contain; flex:none; } .row .ch.sel { color:var(--acc); }
.row .track { position:relative; width:calc(var(--span) * var(--px)); }
.prog { position:absolute; top:3px; bottom:3px; border-radius:8px; background:#232323; padding:2px 8px; overflow:hidden; text-align:left; line-height:1.2; font-size:13px; display:block; min-height:0; border-left:2px solid #0000; }
.toast { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 20px); transform:translateX(-50%); background:#000d; border:1px solid var(--line); padding:10px 16px; border-radius:20px; z-index:9; margin:0; max-width:90vw; }
.prog small { display:block; color:var(--dim); font-size:11px; } .prog.now { background:#1f3556; } .prog.rec { border-left-color:var(--rec); }
.nowline { position:absolute; top:0; bottom:0; width:2px; background:var(--rec); z-index:1; pointer-events:none; }
.list { list-style:none; margin:0 0 16px; padding:0; display:grid; gap:6px; } .list:empty::after { content:'Nessuna'; color:var(--dim); }
.list li { display:flex; align-items:center; gap:10px; background:var(--card); border-radius:10px; padding:8px 12px; } .list li > span { flex:1; min-width:0; } .list li small { display:block; color:var(--dim); }
.list button { flex:none; } .list .live { color:var(--rec); }
dialog { background:var(--card); color:var(--fg); border:0; border-radius:16px; width:min(92vw,440px); padding:16px; } dialog::backdrop { background:#000a; }
dialog h3 { margin:0 0 4px; } dialog p { margin:4px 0; color:var(--dim); } dialog label { display:grid; gap:4px; margin:10px 0; }
.actions { display:flex; gap:8px; flex-wrap:wrap; } .actions button { flex:1 1 45%; } .ghost { background:transparent; border:1px solid var(--line); }
@media (min-width:700px) { :root { --px:5px; --chan:150px; } .top-row { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); } .detail { display:block; } .video-wrap { max-height:34dvh; } }
@media (min-width:1100px) { :root { --px:6px; } .tab { padding-bottom:12px; } }
@media (max-height:480px) and (orientation:landscape) { .video-wrap { max-height:46dvh; } }