*{margin:0;padding:0;box-sizing:border-box}

/* --- Theme variables --- */
:root{
  --bg:#111;--bg2:#1a1a1a;--bg3:#222;--bg4:#2a2a2a;
  --border:#333;--border2:#222;--border3:#1e1e1e;--border4:#444;
  --text:#e0e0e0;--text2:#aaa;--text3:#888;--text4:#666;--text5:#555;
  --accent:#ff5000;--accent-hover:#e04500;
  --input-bg:#222;--input-border:#444;--input-color:#e0e0e0;--color-scheme:dark;
  --item-highlight:#2a1a00;
  --tl-regia-bg:#3a3a00;--tl-regia-fg:#cccc00;--tl-regia-bd:#555500;
  --tl-podcast-bg:#1a3a2a;--tl-podcast-fg:#44cc88;--tl-podcast-bd:#225533;
  --tl-article-bg:#1a2a3a;--tl-article-fg:#4488ff;--tl-article-bd:#223355;
  --tl-video-bg:#3a1a2a;--tl-video-fg:#ff6688;--tl-video-bd:#552233;
  --tl-youtube-bg:#3a1a1a;--tl-youtube-fg:#ff4444;--tl-youtube-bd:#552222;
  --tl-social-bg:#2a1a3a;--tl-social-fg:#bb66ff;--tl-social-bd:#332255;
  --tip-bg:#1a1a1a;--tip-border:#444;--tip-shadow:rgba(0,0,0,.6);--tip-title:#fff;--tip-text:#ddd;
  --player-bg:#1a1a1a;--overlay-bg:rgba(0,0,0,.85);
  --popup-bg:#111;--popup-title-bg:#1a1a1a;--popup-title-color:#ccc;
  --sec-bg:#333;--sec-color:#ccc;--sec-hover:#444;
}
[data-theme="light"]{
  --bg:#f5f5f5;--bg2:#fff;--bg3:#e8e8e8;--bg4:#f0f0f0;
  --border:#ddd;--border2:#e0e0e0;--border3:#eee;--border4:#ccc;
  --text:#222;--text2:#555;--text3:#666;--text4:#999;--text5:#aaa;
  --accent:#e04500;--accent-hover:#c03800;
  --input-bg:#fff;--input-border:#ccc;--input-color:#222;--color-scheme:light;
  --item-highlight:#fff3e0;
  --tl-regia-bg:#fff9c4;--tl-regia-fg:#827717;--tl-regia-bd:#c0ca33;
  --tl-podcast-bg:#e0f2f1;--tl-podcast-fg:#00695c;--tl-podcast-bd:#80cbc4;
  --tl-article-bg:#e3f2fd;--tl-article-fg:#1565c0;--tl-article-bd:#90caf9;
  --tl-video-bg:#fce4ec;--tl-video-fg:#c62828;--tl-video-bd:#ef9a9a;
  --tl-youtube-bg:#ffebee;--tl-youtube-fg:#b71c1c;--tl-youtube-bd:#ef9a9a;
  --tl-social-bg:#f3e5f5;--tl-social-fg:#6a1b9a;--tl-social-bd:#ce93d8;
  --tip-bg:#fff;--tip-border:#ccc;--tip-shadow:rgba(0,0,0,.15);--tip-title:#111;--tip-text:#333;
  --player-bg:#fff;--overlay-bg:rgba(0,0,0,.6);
  --popup-bg:#fff;--popup-title-bg:#f5f5f5;--popup-title-color:#333;
  --sec-bg:#e0e0e0;--sec-color:#444;--sec-hover:#d0d0d0;
}
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f5f5f5;--bg2:#fff;--bg3:#e8e8e8;--bg4:#f0f0f0;
    --border:#ddd;--border2:#e0e0e0;--border3:#eee;--border4:#ccc;
    --text:#222;--text2:#555;--text3:#666;--text4:#999;--text5:#aaa;
    --accent:#e04500;--accent-hover:#c03800;
    --input-bg:#fff;--input-border:#ccc;--input-color:#222;--color-scheme:light;
    --item-highlight:#fff3e0;
    --tl-regia-bg:#fff9c4;--tl-regia-fg:#827717;--tl-regia-bd:#c0ca33;
    --tl-podcast-bg:#e0f2f1;--tl-podcast-fg:#00695c;--tl-podcast-bd:#80cbc4;
    --tl-article-bg:#e3f2fd;--tl-article-fg:#1565c0;--tl-article-bd:#90caf9;
    --tl-video-bg:#fce4ec;--tl-video-fg:#c62828;--tl-video-bd:#ef9a9a;
    --tl-youtube-bg:#ffebee;--tl-youtube-fg:#b71c1c;--tl-youtube-bd:#ef9a9a;
    --tl-social-bg:#f3e5f5;--tl-social-fg:#6a1b9a;--tl-social-bd:#ce93d8;
    --tip-bg:#fff;--tip-border:#ccc;--tip-shadow:rgba(0,0,0,.15);--tip-title:#111;--tip-text:#333;
    --player-bg:#fff;--overlay-bg:rgba(0,0,0,.6);
    --popup-bg:#fff;--popup-title-bg:#f5f5f5;--popup-title-color:#333;
    --sec-bg:#e0e0e0;--sec-color:#444;--sec-hover:#d0d0d0;
  }
}

body{font-family:'Be Vietnam Pro',sans-serif;background:var(--bg);color:var(--text)}

.header{background:var(--bg2);border-bottom:1px solid var(--border);padding:8px 24px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.header .logo-link{display:block;line-height:0}
.header .logo{height:32px;width:auto;display:block}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.header-btn{background:none;border:1px solid var(--border4);color:var(--text3);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s;text-decoration:none;font-family:inherit;padding:0;box-sizing:border-box}
.header-btn:hover{border-color:var(--accent);color:var(--accent)}
.header-btn.install-btn{color:var(--accent);border-color:var(--accent);font-size:14px}
.header-btn.install-btn:hover{background:var(--accent);color:#fff}

.toolbar{background:var(--bg2);border-bottom:1px solid var(--border2);padding:12px 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.toolbar input[type="date"]{background:var(--input-bg);border:1px solid var(--input-border);color:var(--input-color);padding:6px 12px;border-radius:6px;font-size:13px;font-family:inherit;color-scheme:var(--color-scheme)}
.toolbar select,.tl-header select{background:var(--input-bg);border:1px solid var(--input-border);color:var(--input-color);padding:6px 12px;border-radius:6px;font-size:13px;font-family:inherit;color-scheme:var(--color-scheme);cursor:pointer}
.toolbar input[type="text"]{background:var(--input-bg);border:1px solid var(--input-border);color:var(--input-color);padding:6px 12px;border-radius:6px;font-size:13px;width:200px}
.toolbar input[type="text"]::placeholder{color:var(--text4)}
.fbtn{background:var(--bg3);color:var(--text2);border:1px solid var(--border4);padding:5px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s}
.fbtn:hover{border-color:var(--accent);color:var(--accent)}
.fbtn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.fbtn-icon{font-size:16px;line-height:1;padding:4px 9px;min-width:34px;text-align:center}
.fbtn-live{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.fbtn-live:hover{background:var(--accent-hover);color:#fff;border-color:var(--accent-hover)}
.fbtn-live::before{content:"\25CF";color:#fff;margin-right:6px;animation:livePulse 1.5s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.4}}
.toolbar-search{padding:4px 24px}
.toolbar-search input[type="text"]{width:190px;box-sizing:border-box}
/* Filtri: distribuiti su tutta la larghezza pagina (come l'header) */
.toolbar-filters{padding:4px 24px;gap:8px;justify-content:space-between}

/* Timeline */
.tl-wrap{padding:4px 24px 8px}
.tl-header{font-size:13px;color:var(--text3);margin-bottom:4px;display:flex;align-items:center;gap:12px;padding:0}
.tl-container{background:var(--bg2);border-radius:8px;border:1px solid var(--border);overflow-x:auto}
.tl-hours{display:flex;height:20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg2);z-index:2}
.tl-hour{flex:0 0 calc(100%/18);text-align:center;font-size:10px;color:var(--text5);line-height:20px;border-right:1px solid var(--border2)}
.tl-hour:last-child{border-right:none}
.tl-rows{position:relative;min-height:18px}
.tl-row{display:flex;align-items:stretch;min-height:18px;border-bottom:1px solid var(--border3)}
.tl-row:hover{background:var(--bg3)}
.tl-label{flex:0 0 100px;font-size:10px;color:var(--text2);padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-right:1px solid var(--border);display:flex;align-items:center}
.tl-track{flex:1;position:relative;height:100%}
.tl-block{position:absolute;height:14px;top:2px;border-radius:3px;font-size:9px;line-height:14px;padding:0 4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;min-width:6px;transition:transform .1s}
.tl-block:hover{transform:scaleY(1.3);z-index:3}
.tl-block.t-regia{background:var(--tl-regia-bg);color:var(--tl-regia-fg);border:1px solid var(--tl-regia-bd)}
.tl-block.t-podcast{background:var(--tl-podcast-bg);color:var(--tl-podcast-fg);border:1px solid var(--tl-podcast-bd)}
.tl-block.t-article{background:var(--tl-article-bg);color:var(--tl-article-fg);border:1px solid var(--tl-article-bd)}
.tl-block.t-video{background:var(--tl-video-bg);color:var(--tl-video-fg);border:1px solid var(--tl-video-bd)}
.tl-block.t-youtube{background:var(--tl-youtube-bg);color:var(--tl-youtube-fg);border:1px solid var(--tl-youtube-bd)}
.tl-block.t-social{background:var(--tl-social-bg);color:var(--tl-social-fg);border:1px solid var(--tl-social-bd)}
.tl-now{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);z-index:5;pointer-events:none}
.tl-tip{position:fixed;z-index:1000;pointer-events:none;opacity:0;transition:opacity .15s;max-width:320px;min-width:180px}
.tl-tip.show{opacity:1}
.tl-tip-inner{background:var(--tip-bg);border:1px solid var(--tip-border);border-radius:8px;padding:10px 12px;box-shadow:0 4px 20px var(--tip-shadow);font-size:12px;color:var(--tip-text);line-height:1.4}
.tl-tip-arrow{position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent}
.tl-tip-arrow.top{bottom:-7px;border-top:7px solid var(--tip-border)}
.tl-tip-arrow.bottom{top:-7px;border-bottom:7px solid var(--tip-border)}
.tl-tip-img{width:100%;height:auto;border-radius:4px;margin-bottom:8px;max-height:140px;object-fit:cover}
.tl-tip-title{font-weight:600;color:var(--tip-title);margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tl-tip-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.tl-tip-badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:9px;font-weight:700;text-transform:uppercase}
.tl-tip-badge.t-regia{background:var(--tl-regia-bg);color:var(--tl-regia-fg)}.tl-tip-badge.t-podcast{background:var(--tl-podcast-bg);color:var(--tl-podcast-fg)}
.tl-tip-badge.t-article{background:var(--tl-article-bg);color:var(--tl-article-fg)}.tl-tip-badge.t-video{background:var(--tl-video-bg);color:var(--tl-video-fg)}
.tl-tip-badge.t-youtube{background:var(--tl-youtube-bg);color:var(--tl-youtube-fg)}.tl-tip-badge.t-social{background:var(--tl-social-bg);color:var(--tl-social-fg)}
.tl-tip-time{color:var(--text2);font-size:11px}
.tl-tip-src{color:var(--text3);font-size:10px}
.tl-legend{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.tl-legend span{font-size:10px;color:var(--text3);display:flex;align-items:center;gap:4px}
.tl-legend i{display:inline-block;width:10px;height:10px;border-radius:2px}

/* Feed list */
.feed-list{max-width:960px;margin:0 auto;padding:8px 24px}
.feed-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border2);transition:background .15s}
.feed-item:hover{background:var(--bg2);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:6px}
.feed-item.highlight{background:var(--item-highlight);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:6px;transition:background 3s}
.item-icon{flex-shrink:0;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}
.item-icon.t-article{background:var(--tl-article-bg)}.item-icon.t-podcast{background:var(--tl-podcast-bg)}.item-icon.t-regia{background:var(--tl-regia-bg)}
.item-icon.t-video{background:var(--tl-video-bg)}.item-icon.t-youtube{background:var(--tl-youtube-bg)}.item-icon.t-social{background:var(--tl-social-bg)}
.item-img{flex-shrink:0;width:60px;height:40px;border-radius:4px;object-fit:cover;background:var(--bg3)}
.item-body{flex:1;min-width:0}
.item-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-title a{color:inherit;text-decoration:none}.item-title a:hover{color:var(--accent)}
.feed-item>a.item-link{flex-shrink:0;display:block;line-height:0;text-decoration:none;color:inherit;cursor:pointer}
.feed-item>a.item-link:hover img,.feed-item>a.item-link:hover .item-icon{filter:brightness(1.1)}
/* Evita che Chrome desktop interpreti il click sull'immagine come drag-start:
   l'immagine non riceve eventi, tutti i click finiscono sul wrapper <a>. */
.feed-item>a.item-link img,.feed-item>a.item-link .item-icon{pointer-events:none;user-select:none;-webkit-user-drag:none}
.item-meta{margin-top:3px;font-size:11px;color:var(--text3);display:flex;gap:10px;flex-wrap:wrap}
.item-source{color:var(--accent)}
.item-actions{margin-top:4px;display:flex;gap:6px}
.pbtn{background:var(--accent);color:#fff;border:none;padding:3px 10px;border-radius:3px;font-size:10px;cursor:pointer;font-weight:600}
.pbtn:hover{background:var(--accent-hover)}
.pbtn.sec{background:var(--sec-bg);color:var(--sec-color)}.pbtn.sec:hover{background:var(--sec-hover)}

/* Pager */
.pager{display:flex;align-items:center;gap:8px;justify-content:center;padding:20px 0}
.pager button{background:var(--bg3);color:var(--text2);border:1px solid var(--border4);padding:6px 14px;border-radius:6px;font-size:12px;cursor:pointer}
.pager button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pager button:disabled{opacity:.3;cursor:default}
.pager span{font-size:13px;color:var(--text2)}

.loading{text-align:center;padding:40px;color:var(--text4);font-size:14px}

/* Video popup — full-screen, contenuto centrato con aspect ratio nativo */
.video-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:200;align-items:center;justify-content:center}
.video-overlay.active{display:flex}
.video-popup{position:relative;width:100%;height:100%;background:#000;display:flex;flex-direction:column}
.video-popup iframe{flex:1;width:100%;height:100%;border:none;display:block;background:#000}
.video-popup .popup-close{position:absolute;top:10px;right:14px;background:rgba(0,0,0,.6);border:none;color:#fff;font-size:28px;cursor:pointer;padding:4px 12px;border-radius:4px;z-index:3;line-height:1}
.video-popup .popup-close:hover{background:var(--accent)}
.video-popup .popup-title{padding:8px 16px;font-size:13px;color:#ddd;background:rgba(0,0,0,.6);position:absolute;bottom:0;left:0;right:0;z-index:2}

.fbtn:disabled{opacity:.3;cursor:default;pointer-events:none}

/* Interactive tooltip */
.tl-tip.interactive{pointer-events:auto}
.tl-tip-actions{margin-top:6px;display:flex;gap:6px}
.tl-tip-actions button{background:var(--accent);color:#fff;border:none;padding:3px 10px;border-radius:3px;font-size:10px;cursor:pointer;font-weight:600}
.tl-tip-actions button:hover{background:var(--accent-hover)}
.tl-tip-dur{color:var(--text3);font-size:10px}

/* Video player in popup — full-screen con object-fit:contain (no cropping) */
.video-popup video{flex:1;width:100%;height:100%;display:block;background:#000;object-fit:contain}

/* Live video container (predisposto, sostituisce il tuner quando attivo). Vuoto per ora. */
.live-video-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:300;align-items:center;justify-content:center}
.live-video-overlay.active{display:flex}
.live-video-overlay iframe,.live-video-overlay video{width:100%;height:100%;border:none}

/* Footer (legal links + help) */
.footer{display:flex;gap:14px;align-items:center;padding:8px 24px;border-top:1px solid var(--border2);background:var(--bg2);font-size:11px;color:var(--text3);flex-wrap:wrap;margin-top:12px}
.footer a{color:var(--text3);text-decoration:none}
.footer a:hover{color:var(--accent);text-decoration:underline}

/* Help page */
.help{max-width:800px;margin:0 auto;padding:24px}
.help h2{font-size:22px;color:var(--accent);margin-bottom:16px;font-weight:700}
.help h3{font-size:14px;color:var(--text);margin-top:20px;margin-bottom:8px;font-weight:600}
.help p,.help ul{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:8px}
.help ul{padding-left:20px}
.help li{margin-bottom:4px}
.help a{color:var(--accent);text-decoration:none}
.help a:hover{text-decoration:underline}
.help strong{color:var(--text)}
.help em{font-style:normal;background:var(--bg3);padding:1px 6px;border-radius:3px;color:var(--text)}

@media(max-width:600px){
  .toolbar input[type="text"]{width:100%}
  .header{padding:12px 16px}
  .tl-wrap{padding:4px 3px 8px}
  .feed-list{padding:8px 12px}
  .tl-label{flex:0 0 60px;font-size:8px}
  .vinyl-player{bottom:10px;right:10px}
}