*{box-sizing:border-box;margin:0;padding:0}
    :root{
      --ink:#06090d;--panel:#0c1218;--panel-alt:#101820;
      --border:rgba(45,212,191,0.10);--border-hover:rgba(45,212,191,0.22);
      --accent:#2dd4bf;--accent-dim:rgba(45,212,191,0.12);
      --gold:#e4b55a;--gold-dim:rgba(228,181,90,0.12);
      --coral:#ff5c4d;--coral-dim:rgba(255,92,77,0.14);
      --txt:#e8eef2;--txt-dim:#7a8f9c;--txt-muted:#4e5e6a;
      --glass:rgba(12,18,24,0.82);--glass-border:rgba(45,212,191,0.12);
      --glass-blur:blur(20px) saturate(1.15);
      --radius:12px;--radius-sm:8px;--radius-xs:6px;
      --sidebar-w:270px;--weather-w:340px;
      --font-display:'Bricolage Grotesque',system-ui,sans-serif;
      --font-ui:'Figtree',system-ui,sans-serif;
      --safe-b:env(safe-area-inset-bottom,0px);
      --safe-t:env(safe-area-inset-top,0px);
      --safe-l:env(safe-area-inset-left,0px);
      --safe-r:env(safe-area-inset-right,0px);
      --m-nav-h:0px;
    }
    html,body{width:100%;height:100%;height:100dvh;background:var(--ink);overflow:hidden;
      font-family:var(--font-ui);color:var(--txt);-webkit-text-size-adjust:100%;
      touch-action:manipulation;overscroll-behavior:none;
      -webkit-tap-highlight-color:transparent;user-select:none}
    button,a,select,input{touch-action:manipulation;font-family:inherit}
    input,textarea,select{user-select:text;-webkit-user-select:text}
    ::-webkit-scrollbar{width:5px;height:5px}
    ::-webkit-scrollbar-track{background:transparent}
    ::-webkit-scrollbar-thumb{background:rgba(45,212,191,0.18);border-radius:9px}

    /* ── Layout ── */
    #app{display:flex;width:100%;height:100%;position:relative}
    #scrim{display:none;position:absolute;inset:0;z-index:12;
      background:rgba(6,9,13,0.65);backdrop-filter:blur(4px);
      -webkit-backdrop-filter:blur(4px);border:0;padding:0;cursor:pointer}
    #scrim.on{display:block}

    /* ── File Warn ── */
    #file-warn{display:none;position:absolute;z-index:30;left:50%;top:max(12px,var(--safe-t));
      transform:translateX(-50%);max-width:min(520px,92vw);
      padding:0.65rem 1rem;border-radius:var(--radius);
      background:rgba(228,181,90,0.12);border:1px solid rgba(228,181,90,0.3);
      color:#f0d9a0;font-size:0.78rem;text-align:center;
      backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
    body.is-file #file-warn{display:block}

    /* ── Sidebar ── */
    #sidebar{flex:0 0 var(--sidebar-w);width:var(--sidebar-w);height:100%;
      background:var(--panel);border-right:1px solid var(--border);
      display:flex;flex-direction:column;overflow:hidden;overflow-x:hidden;z-index:5;
      transition:width .22s ease,flex-basis .22s ease}
    #app.collapsed #sidebar{flex-basis:0;width:0;border:0}
    #side-head{flex:0 0 auto;display:flex;align-items:center;gap:0.5rem;
      padding:0.7rem 0.75rem;border-bottom:1px solid var(--border);
      min-width:var(--sidebar-w)}
    #side-head h1{font-family:var(--font-display);font-size:0.88rem;font-weight:700;
      flex:1;min-width:0;color:var(--txt);letter-spacing:-0.01em;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #side-collapse{appearance:none;border:0;border-radius:var(--radius-xs);
      width:1.7rem;height:1.7rem;display:flex;align-items:center;justify-content:center;
      background:rgba(255,255,255,0.05);color:var(--txt-dim);cursor:pointer;font-size:0.7rem;
      flex:0 0 auto;transition:background .15s,color .15s}
    #side-collapse:hover{background:var(--accent-dim);color:var(--accent)}

    /* ── Search ── */
    #cam-search-wrap{padding:0.5rem 0.65rem 0.35rem;min-width:var(--sidebar-w);position:relative}
    #cam-search{width:100%;appearance:none;border:1px solid var(--border);
      border-radius:var(--radius-sm);background:rgba(255,255,255,0.03);
      color:var(--txt);font:inherit;font-size:0.76rem;padding:0.45rem 2rem 0.45rem 0.6rem;
      outline:none;transition:border-color .15s,background .15s}
    #cam-search::placeholder{color:var(--txt-muted)}
    #cam-search:focus{border-color:var(--accent);background:rgba(45,212,191,0.04)}
    #cam-search-clear{position:absolute;right:0.85rem;top:50%;transform:translateY(-42%);
      appearance:none;border:0;border-radius:var(--radius-xs);width:1.6rem;height:1.6rem;
      display:none;align-items:center;justify-content:center;padding:0;
      background:rgba(255,255,255,0.08);color:var(--txt-dim);cursor:pointer;font-size:0.95rem;
      line-height:1;transition:background .15s,color .15s}
    #cam-search-clear:hover{background:var(--coral-dim);color:#ffb4ae}
    #cam-search-clear.show{display:flex}

    #fav-hint{font-size:0.62rem;color:var(--txt-muted);padding:0.2rem 0.65rem 0.15rem;
      min-width:var(--sidebar-w)}
    #list{flex:1;overflow-y:auto;overflow-x:hidden;padding:0.35rem 0.55rem;min-width:var(--sidebar-w);
      scrollbar-width:thin;scrollbar-color:rgba(45,212,191,0.18) transparent;
      overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
    .group{margin-bottom:0.55rem}
    .group-label{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.07em;
      color:var(--txt-muted);padding:0.4rem 0.35rem;font-weight:600;
      display:flex;align-items:center;justify-content:space-between;gap:0.35rem;
      width:100%;border:0;background:transparent;font-family:inherit;text-align:left;
      line-height:1.25;min-height:1.85rem}
    .group-label > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;
      white-space:nowrap}
    .group-label.fav{color:var(--gold)}
    .group-label.togglable{cursor:pointer;border-radius:var(--radius-xs);
      padding:0.45rem 0.4rem;min-height:2.2rem;transition:background .15s,color .15s;
      -webkit-tap-highlight-color:transparent}
    .group-label.togglable:hover{background:rgba(45,212,191,0.06);color:var(--txt)}
    .group-chev{font-size:0.78rem;opacity:0.7;transition:transform .15s;flex:0 0 auto;
      transform:rotate(0deg);width:1.1rem;text-align:center;line-height:1;
      color:var(--accent)}
    .group:not(.is-collapsed) > .group-label .group-chev,
    .group.search-expanded > .group-label .group-chev,
    .group.active-reveal > .group-label .group-chev{transform:rotate(90deg)}
    .group.is-collapsed:not(.search-expanded):not(.active-reveal) > .group-body{display:none}
    .list-section-heading{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.07em;
      color:var(--txt-muted);font-weight:600;padding:0.65rem 0.35rem 0.3rem;
      opacity:0.78;margin:0.2rem 0 0.05rem;border-top:1px solid rgba(45,212,191,0.08)}
    .fav-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem;margin-bottom:0.2rem}
    .fav-grid .cam{margin-bottom:0;overflow:hidden;position:relative}
    .fav-grid.sortable .cam{touch-action:pan-y}
    .fav-grid.sortable.reordering .cam,
    .fav-grid.sortable .cam.dragging{touch-action:none;cursor:grabbing}
    .fav-grid .cam.drag-ready{outline:1px solid rgba(228,181,90,0.55);
      outline-offset:1px;transform:scale(0.985)}
    .fav-grid .thumb{border-radius:0;overflow:hidden;pointer-events:none}
    .fav-grid .thumb video,.fav-grid .thumb .ph{pointer-events:none}
    .fav-grid .row{padding:0.18rem 0.25rem 0.18rem 0.1rem}
    .fav-grid .cam-name{font-size:0.62rem;padding:0.08rem 0.12rem;flex:1;min-width:0}
    .fav-grid .star{width:1.55rem;height:1.55rem;font-size:0.82rem;flex-shrink:0}

    /* ── Camera Items ── */
    .cam{display:block;width:100%;border:1px solid transparent;border-radius:var(--radius);
      overflow:hidden;background:transparent;color:inherit;font:inherit;
      text-align:left;padding:0;cursor:pointer;margin-bottom:0.3rem;position:relative;
      transition:border-color .18s,background .18s,transform .15s,box-shadow .18s}
    .cam:hover{border-color:var(--border-hover);background:rgba(45,212,191,0.03);
      transform:translateY(-1px)}
    .cam.active{border-color:var(--accent);background:var(--accent-dim);
      box-shadow:0 4px 16px rgba(45,212,191,0.1)}
    .cam.compact{display:flex;align-items:center;gap:0.15rem;
      padding:0.25rem 0.3rem 0.25rem 0.15rem;border-color:transparent;background:transparent;
      min-height:2.35rem;margin-bottom:0.2rem}
    .cam.compact:hover{background:rgba(45,212,191,0.04);border-color:var(--border-hover)}
    .cam.compact.active{background:var(--accent-dim);border-color:var(--accent);
      box-shadow:none}
    .cam.search-hide{display:none!important}

    .thumb{position:relative;width:100%;aspect-ratio:16/9;background:#080c10;
      border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
    .cam.compact .thumb{display:none}
    .thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
    .thumb .ph{position:absolute;inset:0;display:flex;align-items:center;
      justify-content:center;font-size:0.65rem;color:var(--txt-muted);background:#080c10}
    .thumb.live .ph{display:none}

    .row{display:flex;align-items:center;gap:0.15rem;
      background:var(--panel-alt);padding:0.2rem 0.3rem 0.2rem 0.15rem}
    .cam.compact .row{background:transparent;flex:1;min-width:0;padding:0}

    .star{flex:0 0 auto;width:1.7rem;height:1.7rem;border:0;border-radius:var(--radius-xs);
      background:transparent;color:var(--txt-muted);cursor:pointer;font-size:0.95rem;
      line-height:1;display:flex;align-items:center;justify-content:center;
      transition:color .15s,background .15s,transform .12s}
    .star:hover{color:var(--gold);background:var(--gold-dim);transform:scale(1.1)}
    .star:active{transform:scale(0.95)}
    .star.on{color:var(--gold)}
    .cam-name{flex:1;min-width:0;font-size:0.72rem;line-height:1.25;font-weight:500;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0.15rem 0.2rem}

    /* ── Sidebar Toggle ── */
    #toggle{position:absolute;top:50%;left:var(--sidebar-w);transform:translate(-50%,-50%);
      z-index:6;width:28px;height:28px;border:1px solid var(--glass-border);border-radius:50%;
      background:var(--glass);color:var(--txt-dim);cursor:pointer;font-size:0.68rem;
      display:flex;align-items:center;justify-content:center;padding:0;
      backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
      transition:left .22s ease,background .15s,color .15s,box-shadow .15s,width .15s,height .15s}
    #app.collapsed #toggle{left:0;transform:translate(0,-50%);border-radius:0 10px 10px 0;
      width:30px;height:52px;background:rgba(45,212,191,0.16);color:var(--accent);
      border-color:rgba(45,212,191,0.42);box-shadow:2px 0 16px rgba(45,212,191,0.12)}
    #toggle:hover{background:var(--accent-dim);color:var(--accent);
      box-shadow:0 0 12px rgba(45,212,191,0.15)}
    #app.collapsed #toggle:hover{background:rgba(45,212,191,0.28)}

    /* ── Stage ── */
    #stage{position:relative;flex:1;min-width:0;height:100%;
      display:flex;align-items:center;justify-content:center;background:var(--ink)}
    #stage::before{content:"";position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(45,212,191,0.03) 0%,transparent 70%)}
    #main{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
      background:transparent;position:relative;z-index:1;cursor:pointer;
      -webkit-touch-callout:none}

    /* Android/Chrome Vollbild: Chrome-UI weg, Video groß */
    #stage:fullscreen,#stage:-webkit-full-screen,
    #main:fullscreen,#main:-webkit-full-screen{
      width:100%;height:100%;max-width:none;max-height:none;
      background:#000;object-fit:contain}
    :fullscreen #mobile-nav,:-webkit-full-screen #mobile-nav,
    :fullscreen #m-sheet,:-webkit-full-screen #m-sheet,
    :fullscreen #m-sheet-backdrop,:-webkit-full-screen #m-sheet-backdrop,
    :fullscreen #edge-prev,:-webkit-full-screen #edge-prev,
    :fullscreen #edge-next,:-webkit-full-screen #edge-next,
    :fullscreen #hud-chip,:-webkit-full-screen #hud-chip{display:none!important}
    :fullscreen #toggle,:-webkit-full-screen #toggle,
    :fullscreen #weather-toggle,:-webkit-full-screen #weather-toggle,
    :fullscreen #help-btn,:-webkit-full-screen #help-btn{display:none!important}

    /* Vollbild: Leiste = 1 Zeile UNTER dem Video (überdeckt nichts) */
    #stage:fullscreen,#stage:-webkit-full-screen{
      display:flex!important;flex-direction:column;align-items:stretch;
      justify-content:flex-start;padding:0}
    #stage:fullscreen #main,#stage:-webkit-full-screen #main{
      flex:1 1 auto;min-height:0;width:100%;height:auto;max-height:none;
      align-self:center;object-fit:contain}
    #stage:fullscreen.tv-iframe-on #main,#stage:-webkit-full-screen.tv-iframe-on #main{
      display:none}
    #stage:fullscreen #tv-iframe,#stage:-webkit-full-screen #tv-iframe{
      position:relative;inset:auto;flex:1 1 auto;min-height:0;width:100%;height:auto;
      bottom:auto!important}
    #stage:fullscreen #player,#stage:-webkit-full-screen #player{
      position:relative;left:auto;right:auto;bottom:auto;flex:0 0 auto;
      opacity:1!important;transform:none!important;
      /* (Feature 9) Safe-Area rundum: kollidiert nicht mit Android-Gestennav/Notch */
      padding:calc(0.2rem + var(--safe-t)) calc(0.4rem + var(--safe-r))
        max(0.45rem,calc(0.3rem + var(--safe-b))) calc(0.4rem + var(--safe-l));z-index:4}
    #stage:fullscreen #player::before,#stage:-webkit-full-screen #player::before{display:none}
    #stage:fullscreen .player-shell,#stage:-webkit-full-screen .player-shell{
      display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;
      gap:0.3rem;padding:0.25rem 0.4rem;border-radius:12px;overflow-x:auto;
      scrollbar-width:none}
    #stage:fullscreen .player-shell::-webkit-scrollbar{display:none}
    #stage:fullscreen .player-top,#stage:-webkit-full-screen .player-top,
    #stage:fullscreen .player-row,#stage:-webkit-full-screen .player-row{display:contents}
    #stage:fullscreen #player-sub,#stage:-webkit-full-screen #player-sub,
    #stage:fullscreen .live-pill,#stage:-webkit-full-screen .live-pill,
    #stage:fullscreen #source,#stage:-webkit-full-screen #source,
    #stage:fullscreen .radio-tag,#stage:-webkit-full-screen .radio-tag,
    #stage:fullscreen #radio-status,#stage:-webkit-full-screen #radio-status,
    #stage:fullscreen button.ctrl .lbl,#stage:-webkit-full-screen button.ctrl .lbl,
    #stage:fullscreen #wx-btn,#stage:-webkit-full-screen #wx-btn{display:none!important}
    #stage:fullscreen .player-titles,#stage:-webkit-full-screen .player-titles{
      flex:0 1 auto;min-width:0;max-width:18vw}
    #stage:fullscreen #title,#stage:-webkit-full-screen #title{
      font-size:0.78rem;max-width:18vw}
    #stage:fullscreen .player-group,#stage:-webkit-full-screen .player-group{flex-shrink:0}
    #stage:fullscreen .player-radio,#stage:-webkit-full-screen .player-radio{
      flex:1 1 auto;min-width:7rem;max-width:20rem;order:0}
    #stage:fullscreen .player-vol,#stage:-webkit-full-screen .player-vol{flex-shrink:0}
    #stage:fullscreen #master-vol,#stage:-webkit-full-screen #master-vol{width:4.2rem}
    #stage:fullscreen #clock,#stage:-webkit-full-screen #clock{
      top:max(8px,var(--safe-t));right:max(8px,var(--safe-r))}
    #stage:fullscreen #clock .clock-date,#stage:-webkit-full-screen #clock .clock-date{display:none}

    /* ── Status ── */
    #status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
      padding:0.6rem 1.2rem;border-radius:var(--radius);
      background:var(--glass);border:1px solid var(--glass-border);
      backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
      color:var(--txt-dim);font-size:0.82rem;text-align:center;
      transition:opacity .25s;pointer-events:none;max-width:min(90vw,360px)}
    #status.hidden{opacity:0}
    #status.error{color:var(--coral);border-color:rgba(255,92,77,0.25);pointer-events:auto}

    /* ── Clock (oben rechts, klar getrennt vom Player-/Quellen-Bereich) ── */
    #clock{position:absolute;top:max(10px,var(--safe-t));right:max(10px,var(--safe-r));
      z-index:3;pointer-events:none;text-align:right;
      padding:0.4rem 0.65rem;border-radius:var(--radius-sm);
      background:var(--glass);border:1px solid var(--glass-border);
      backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
      box-shadow:0 8px 24px rgba(0,0,0,0.35);max-width:min(46vw,11rem)}
    #clock .clock-time{display:block;font-family:var(--font-display);font-size:1.05rem;
      font-weight:700;letter-spacing:0.02em;line-height:1.1;font-variant-numeric:tabular-nums}
    #clock .clock-date{display:block;margin-top:0.12rem;font-size:0.6rem;
      color:var(--txt-dim);font-weight:500;letter-spacing:0.02em}
    #player .player-top #source{position:relative;z-index:2}

    /* ── Player Dock ── */
    #player{position:absolute;left:0;right:0;bottom:0;z-index:4;
      padding:0 0.85rem calc(0.85rem + var(--safe-b));pointer-events:none;
      opacity:0;transform:translateY(8px);
      transition:opacity .25s ease,transform .25s ease}
    #stage:hover #player,#stage:focus-within #player,#stage.show-ui #player,
    #player.pinned{opacity:1;transform:translateY(0)}
    #player::before{content:"";position:absolute;left:0;right:0;bottom:0;height:10rem;
      background:linear-gradient(180deg,transparent 0%,rgba(6,9,13,0.5) 40%,rgba(6,9,13,0.88) 100%);
      pointer-events:none}
    .player-shell{position:relative;pointer-events:auto;display:grid;gap:0.5rem;
      padding:0.65rem 0.8rem;border-radius:16px;min-width:0;
      background:var(--glass);border:1px solid var(--glass-border);
      box-shadow:0 12px 48px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.04);
      backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}

    .player-top{display:flex;align-items:center;gap:0.6rem;min-width:0}
    .live-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:0.3rem;
      padding:0.22rem 0.55rem;border-radius:999px;
      background:var(--coral-dim);border:1px solid rgba(255,92,77,0.3);
      color:#ffb4ae;font-size:0.58rem;font-weight:700;letter-spacing:0.08em;
      font-family:var(--font-display);transition:opacity .2s,border-color .2s,background .2s}
    .live-pill i{width:0.4rem;height:0.4rem;border-radius:50%;background:var(--coral);
      box-shadow:0 0 0 0 rgba(255,92,77,0.5);animation:livePulse 1.6s ease-out infinite}
    .live-pill.loading{opacity:0.85;border-color:rgba(45,212,191,0.35);
      background:rgba(45,212,191,0.1);color:#9ee8dc}
    .live-pill.loading i{background:var(--accent);animation:loadSpin 0.7s linear infinite;
      box-shadow:none;border-radius:50%;border:1.5px solid transparent;
      border-top-color:var(--accent);background:transparent;width:0.55rem;height:0.55rem}
    @keyframes livePulse{
      0%{box-shadow:0 0 0 0 rgba(255,92,77,0.5)}
      70%{box-shadow:0 0 0 9px rgba(255,92,77,0)}
      100%{box-shadow:0 0 0 0 rgba(255,92,77,0)}}
    @keyframes loadSpin{to{transform:rotate(360deg)}}

    .player-titles{flex:1;min-width:0}
    #title{display:block;font-family:var(--font-display);font-size:0.95rem;
      font-weight:700;letter-spacing:-0.015em;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #player-sub{display:block;margin-top:0.08rem;font-size:0.65rem;color:var(--txt-dim);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #source{flex:0 0 auto;color:var(--accent);font-size:0.7rem;text-decoration:none;
      padding:0.3rem 0.5rem;border-radius:var(--radius-sm);
      border:1px solid rgba(45,212,191,0.2);background:var(--accent-dim);
      transition:background .15s,color .15s}
    #source:hover{background:rgba(45,212,191,0.18);color:#7df0e0}

    .player-row{display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;min-width:0}
    .player-group{display:inline-flex;align-items:center;gap:0.2rem;
      padding:0.15rem;border-radius:var(--radius);
      background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05)}
    button.ctrl{appearance:none;border:0;border-radius:var(--radius-sm);
      padding:0.4rem 0.6rem;background:transparent;color:var(--txt);font:inherit;
      cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
      gap:0.3rem;min-height:2rem;
      transition:background .15s,color .15s,transform .12s}
    button.ctrl:hover{background:rgba(255,255,255,0.08)}
    button.ctrl:active{transform:scale(0.95)}
    button.ctrl svg{width:1rem;height:1rem;fill:none;stroke:currentColor;
      stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    button.ctrl .lbl{font-size:0.68rem;font-weight:600}
    button.ctrl.on{background:var(--accent-dim);color:var(--accent)}
    button.ctrl.danger-on{background:var(--coral-dim);color:#ffb4ae}

    .player-radio{flex:1;min-width:min(100%,260px);display:flex;align-items:center;
      gap:0.35rem;padding:0.18rem 0.3rem 0.18rem 0.18rem;border-radius:var(--radius);
      background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.05);
      transition:border-color .2s,box-shadow .2s}
    .player-radio .radio-tag{display:none;font-size:0.55rem;font-weight:700;
      letter-spacing:0.06em;color:var(--accent);padding:0 0.12rem;
      font-family:var(--font-display)}
    #radio-play{appearance:none;border:0;border-radius:var(--radius-sm);
      width:2.1rem;height:2.1rem;
      background:linear-gradient(160deg,rgba(45,212,191,0.25),rgba(45,212,191,0.1));
      color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
      flex:0 0 auto;box-shadow:0 4px 12px rgba(45,212,191,0.15);
      transition:transform .12s,filter .15s,background .2s}
    #radio-play:hover{filter:brightness(1.15)}
    #radio-play:active{transform:scale(0.95)}
    #radio-play.on{background:linear-gradient(160deg,rgba(45,212,191,0.4),rgba(45,212,191,0.2))}
    #radio-play.loading{background:linear-gradient(160deg,rgba(228,181,90,0.35),rgba(228,181,90,0.12));
      color:var(--gold)}
    #radio-play svg{width:0.9rem;height:0.9rem;fill:currentColor}
    #radio-play.loading svg{animation:radioSpin .75s linear infinite;transform-origin:center}
    @keyframes radioSpin{to{transform:rotate(360deg)}}
    #radio-station{flex:1;min-width:0;appearance:none;border:0;border-radius:var(--radius-xs);
      background:transparent;color:var(--txt);font:inherit;font-size:0.72rem;
      font-weight:500;padding:0.35rem 0.3rem;cursor:pointer}
    #radio-station:focus{outline:none;background:rgba(255,255,255,0.04)}
    #radio-station option,#radio-station optgroup{background:var(--panel);color:var(--txt)}
    .player-vol{display:inline-flex;align-items:center;gap:0.1rem;
      padding:0.05rem 0.1rem;border-radius:var(--radius-sm);
      background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.06)}
    .player-vol .vol-btn{min-width:2rem;padding:0.35rem 0.4rem;font-size:1.05rem;
      font-weight:650;line-height:1;font-family:var(--font-display)}
    #master-vol{width:5.75rem;height:2rem;margin:0;padding:0;cursor:pointer;
      flex:0 0 auto;accent-color:var(--accent);background:transparent;
      -webkit-appearance:none;appearance:none}
    #master-vol::-webkit-slider-runnable-track{height:0.3rem;border-radius:99px;
      background:rgba(255,255,255,0.18)}
    #master-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
      width:1.05rem;height:1.05rem;border-radius:50%;background:var(--accent);
      margin-top:-0.38rem;box-shadow:0 0 0 2px rgba(0,0,0,0.28);
      border:0}
    #master-vol::-moz-range-track{height:0.3rem;border-radius:99px;
      background:rgba(255,255,255,0.18);border:0}
    #master-vol::-moz-range-thumb{width:1.05rem;height:1.05rem;border-radius:50%;
      background:var(--accent);border:0;box-shadow:0 0 0 2px rgba(0,0,0,0.28)}
    .player-vol.is-disabled{opacity:0.45;pointer-events:none}
    .player-vol.is-disabled #master-vol{cursor:not-allowed}
    #radio-status{font-size:0.6rem;color:var(--txt-muted);white-space:nowrap;
      flex:0 0 auto;min-width:2.4rem;text-align:right;padding-right:0.2rem}
    #radio-status.err{color:var(--coral)}
    #player.radio-on .player-radio{border-color:rgba(45,212,191,0.25);
      box-shadow:0 0 0 1px rgba(45,212,191,0.06)}

    /* ── Weather ── */
    #weather{flex:0 0 var(--weather-w);width:var(--weather-w);height:100%;
      background:var(--panel);border-left:1px solid var(--border);
      display:flex;flex-direction:column;overflow:hidden;overflow-x:hidden;z-index:5;
      transition:width .22s ease,flex-basis .22s ease}
    #app.weather-collapsed #weather{flex-basis:0;width:0;border:0}
    #weather-head{flex:0 0 auto;display:flex;align-items:center;gap:0.45rem;
      padding:0.7rem 0.75rem;border-bottom:1px solid var(--border);
      min-width:var(--weather-w)}
    #weather-head h1{font-family:var(--font-display);font-size:0.88rem;font-weight:700;
      flex:1;min-width:0;letter-spacing:-0.01em;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #weather-head .ctrl{flex:0 0 auto;min-width:2rem;min-height:2rem}
    #weather-body{flex:1;overflow-y:auto;overflow-x:hidden;
      padding:0.65rem 0.65rem max(0.65rem,calc(0.4rem + var(--safe-b)));
      min-width:var(--weather-w);
      scrollbar-width:thin;scrollbar-color:rgba(45,212,191,0.18) transparent;
      user-select:text;-webkit-user-select:text;overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch}
    #weather-body.radar-focus{overflow:hidden}
    #weather-body.radar-interact{overflow:hidden;overscroll-behavior:none}
    #wx-tabs{display:flex;gap:0.25rem;padding:0.45rem 0.55rem 0.35rem;
      border-bottom:1px solid var(--border);min-width:var(--weather-w);flex:0 0 auto;
      user-select:none;-webkit-user-select:none;overflow-x:auto;scrollbar-width:none}
    #wx-tabs::-webkit-scrollbar{display:none}
    .wx-tab{flex:1;appearance:none;border:1px solid transparent;border-radius:var(--radius-sm);
      padding:0.4rem 0.25rem;min-height:2.2rem;background:rgba(255,255,255,0.03);
      color:var(--txt-dim);font:inherit;font-size:0.68rem;font-weight:600;cursor:pointer;
      transition:background .15s,color .15s,border-color .15s}
    .wx-tab:hover{background:rgba(45,212,191,0.06);color:var(--txt)}
    .wx-tab.active{background:var(--accent-dim);color:var(--accent);
      border-color:rgba(45,212,191,0.25)}
    .wx-panel{display:none}
    .wx-panel.active{display:block}
    .wx-panel[data-wx-panel="radar"].active{display:flex;flex-direction:column;
      height:100%;min-height:0;gap:0.35rem}
    .wx-panel[data-wx-panel="radar"] .wx-hour-title{flex:0 0 auto;margin-top:0}
    .wx-panel[data-wx-panel="radar"] .wx-radar-hint{flex:0 0 auto;font-size:0.62rem;
      color:var(--txt-muted);line-height:1.35;margin:-0.1rem 0 0.15rem}
    .wx-place{font-size:0.7rem;color:var(--txt-dim);margin-bottom:0.55rem;font-weight:500}
    .wx-now{display:grid;grid-template-columns:1fr auto;gap:0.35rem 0.75rem;
      padding:0.8rem 0.85rem;border-radius:var(--radius);
      background:linear-gradient(135deg,rgba(45,212,191,0.06),rgba(45,212,191,0.02));
      border:1px solid var(--border);margin-bottom:0.65rem}
    .wx-now .temp{font-family:var(--font-display);font-size:2rem;font-weight:700;line-height:1}
    .wx-now .desc{font-size:0.82rem;color:rgba(200,230,240,0.85);align-self:end}
    .wx-now .meta{grid-column:1/-1;font-size:0.68rem;color:var(--txt-dim);
      display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.2rem}

    .wx-days{display:grid;grid-template-columns:1fr 1fr;gap:0.45rem;margin-bottom:0.45rem}
    .wx-day{padding:0.6rem 0.65rem;border-radius:var(--radius);
      background:var(--panel-alt);border:1px solid var(--border);
      transition:border-color .15s,transform .15s}
    .wx-day:hover{border-color:var(--border-hover);transform:translateY(-1px)}
    .wx-day h2{font-family:var(--font-display);font-size:0.72rem;color:var(--gold);
      margin-bottom:0.3rem;font-weight:700}
    .wx-day .wx-tn{display:grid;grid-template-columns:1fr 1fr;gap:0.35rem;margin-bottom:0.3rem}
    .wx-day .wx-tn > div{display:flex;flex-direction:column;gap:0.05rem}
    .wx-day .wx-tn .lbl{font-size:0.58rem;color:var(--txt-muted);text-transform:uppercase;
      letter-spacing:0.04em;font-weight:600}
    .wx-day .wx-tn .v{font-family:var(--font-display);font-size:1.05rem;font-weight:700;line-height:1.1}
    .wx-day .wx-tn .v.night{color:#8eb4d4}
    .wx-day .line{font-size:0.68rem;color:var(--txt-dim);line-height:1.4}
    .wx-day.wx-day-focus{border-color:rgba(45,212,191,0.22);
      background:linear-gradient(135deg,rgba(45,212,191,0.05),rgba(45,212,191,0.01))}
    #wx-days-more-btn{appearance:none;width:100%;border:1px dashed rgba(45,212,191,0.22);
      border-radius:var(--radius-sm);padding:0.45rem 0.55rem;margin:0 0 0.55rem;
      background:rgba(45,212,191,0.04);color:var(--accent);cursor:pointer;
      font:inherit;font-size:0.72rem;font-weight:600;
      transition:background .15s,border-color .15s}
    #wx-days-more-btn:hover{background:var(--accent-dim);border-color:rgba(45,212,191,0.35)}
    #wx-days-more{display:none;grid-template-columns:1fr 1fr;gap:0.4rem;margin-bottom:0.65rem}
    #wx-days-more.open{display:grid}
    #wx-days-more .wx-day h2{color:var(--txt-dim);font-size:0.68rem}
    #wx-days-more .wx-day .wx-tn .v{font-size:0.95rem}

    .wx-hour-title{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.06em;
      color:var(--txt-muted);margin:0.3rem 0 0.35rem;font-weight:600}
    .wx-hours{display:flex;gap:0.3rem;overflow-x:auto;padding-bottom:0.35rem;
      margin-bottom:0.65rem;scrollbar-width:thin;touch-action:pan-x;
      overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
    .wx-h{flex:0 0 auto;width:3rem;padding:0.35rem 0.2rem;border-radius:var(--radius-sm);
      background:var(--panel-alt);border:1px solid var(--border);text-align:center;
      font-size:0.62rem;color:var(--txt-dim);transition:border-color .15s}
    .wx-h .t{color:var(--txt);font-weight:700;font-size:0.76rem;margin:0.12rem 0;
      font-family:var(--font-display)}
    .wx-h.rainy{border-color:rgba(45,130,200,0.35);background:rgba(20,50,90,0.3)}

    /* ── Events (unter Radar) ── */
    #local-feed{margin-bottom:0.35rem}
    .feed-item{display:block;width:100%;text-align:left;appearance:none;cursor:pointer;
      padding:0;margin-bottom:0.35rem;border-radius:var(--radius-sm);
      background:var(--panel-alt);border:1px solid var(--border);color:inherit;font:inherit;
      text-decoration:none;overflow:hidden;
      transition:border-color .15s,transform .15s,background .15s}
    .feed-item:hover{border-color:var(--border-hover);background:rgba(45,212,191,0.04)}
    .feed-item.open{border-color:rgba(45,212,191,0.28);background:rgba(45,212,191,0.05)}
    .event-summary{display:block;width:100%;appearance:none;border:0;background:transparent;
      color:inherit;font:inherit;text-align:left;cursor:pointer;padding:0.55rem 0.6rem;
      min-height:2.75rem}
    .event-summary:hover{background:rgba(45,212,191,0.03)}
    .feed-item .feed-top{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.2rem}
    .feed-item .feed-tag{font-size:0.55rem;font-weight:700;letter-spacing:0.05em;
      text-transform:uppercase;padding:0.15rem 0.35rem;border-radius:999px;
      background:rgba(228,181,90,0.12);color:var(--gold)}
    .feed-item .feed-place{font-size:0.62rem;color:var(--txt-muted);margin-left:auto;
      max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .feed-item .feed-title{font-size:0.78rem;font-weight:600;line-height:1.3;
      font-family:var(--font-display);letter-spacing:-0.01em}
    .feed-item .feed-meta{font-size:0.62rem;color:var(--txt-dim);margin-top:0.18rem;line-height:1.35}
    .feed-item .feed-why{font-size:0.65rem;color:var(--txt-dim);margin-top:0.2rem;line-height:1.35;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .feed-item .feed-chevron{font-size:0.7rem;color:var(--txt-muted);margin-left:0.25rem;
      transition:transform .18s}
    .feed-item.open .feed-chevron{transform:rotate(180deg);color:var(--accent)}
    .event-detail{padding:0 0.65rem 0.7rem;border-top:1px solid var(--border);
      user-select:text;-webkit-user-select:text}
    .event-detail[hidden]{display:none!important}
    .event-detail-row{font-size:0.68rem;color:var(--txt-dim);margin-top:0.45rem;line-height:1.4}
    .event-detail-row strong{color:var(--txt);font-weight:600;display:inline-block;min-width:4.2rem}
    .event-detail-desc{font-size:0.72rem;color:rgba(200,230,240,0.88);margin-top:0.5rem;
      line-height:1.45}
    .event-open{display:inline-flex;align-items:center;justify-content:center;gap:0.3rem;
      margin-top:0.65rem;padding:0.45rem 0.7rem;min-height:2.4rem;border-radius:var(--radius-sm);
      border:1px solid rgba(45,212,191,0.3);background:var(--accent-dim);color:var(--accent);
      text-decoration:none;font-size:0.72rem;font-weight:600;transition:background .15s}
    .event-open:hover{background:rgba(45,212,191,0.2)}
    .feed-links{display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.2rem;margin-bottom:0.35rem}
    .feed-links a{font-size:0.62rem;color:var(--accent);text-decoration:none;
      padding:0.25rem 0.45rem;border-radius:var(--radius-xs);
      border:1px solid rgba(45,212,191,0.2);background:rgba(45,212,191,0.04)}
    .feed-links a:hover{background:var(--accent-dim)}
    .feed-links.prominent{padding:0.45rem;border-radius:var(--radius-sm);
      border:1px dashed rgba(228,181,90,0.35);background:rgba(228,181,90,0.06)}
    .feed-links.prominent a{font-size:0.7rem;padding:0.4rem 0.55rem;min-height:2.2rem;
      display:inline-flex;align-items:center}
    #local-feed-status{font-size:0.62rem;color:var(--txt-muted);margin:0.15rem 0 0.35rem}

    #radar-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
      background:#060a0f;margin-bottom:0.5rem;position:relative;flex:1 1 auto;min-height:0;
      display:flex;flex-direction:column;touch-action:auto;overscroll-behavior:contain;
      isolation:isolate}
    #radar-frame{display:block;width:100%;flex:1 1 auto;
      min-height:clamp(220px,42vh,420px);height:clamp(220px,42vh,420px);
      border:0;background:#060a0f;pointer-events:auto;touch-action:auto;
      -webkit-overflow-scrolling:touch}
    .wx-panel[data-wx-panel="radar"].active #radar-wrap{margin-bottom:0;min-height:min(58vh,520px)}
    .wx-panel[data-wx-panel="radar"].active #radar-frame{height:auto!important;min-height:280px}
    .wx-radar-bar{display:flex;align-items:center;gap:0.3rem;padding:0.35rem 0.45rem;
      background:var(--panel-alt);border-top:1px solid var(--border);font-size:0.65rem;
      color:var(--txt-dim);user-select:none;-webkit-user-select:none;flex:0 0 auto;
      touch-action:manipulation;z-index:2}
    .wx-radar-bar button{appearance:none;border:1px solid transparent;
      border-radius:var(--radius-xs);padding:0.22rem 0.45rem;
      background:rgba(255,255,255,0.06);color:var(--txt-dim);cursor:pointer;
      font:inherit;font-weight:600;transition:background .15s,color .15s,border-color .15s}
    .wx-radar-bar button:hover{background:var(--accent-dim);color:var(--accent)}
    .wx-radar-bar button.active{background:var(--accent-dim);color:var(--accent);
      border-color:rgba(45,212,191,0.25)}
    #radar-expand{margin-left:0.15rem}
    #radar-backdrop{display:none;position:fixed;inset:0;z-index:38;
      background:rgba(6,9,13,0.72);backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);border:0;padding:0;cursor:pointer}
    #radar-backdrop.on{display:block}
    #radar-wrap.expanded{position:fixed;z-index:40;
      left:max(12px,calc(2vw + var(--safe-l)));right:max(12px,calc(2vw + var(--safe-r)));
      top:max(12px,calc(3vh + var(--safe-t)));bottom:max(12px,calc(3vh + var(--safe-b)));
      margin:0;border-radius:16px;
      display:flex;flex-direction:column;touch-action:none;overflow:hidden;
      box-shadow:0 24px 80px rgba(0,0,0,0.65);border-color:rgba(45,212,191,0.22)}
    #radar-wrap.expanded #radar-frame{flex:1;height:auto!important;min-height:0}
    #wx-error{color:var(--coral);font-size:0.76rem;padding:0.5rem 0;display:none}

    /* ── Weather Toggle ── */
    #weather-toggle{position:absolute;top:50%;right:var(--weather-w);
      transform:translate(50%,-50%);z-index:6;width:28px;height:28px;
      border:1px solid var(--glass-border);border-radius:50%;
      background:var(--glass);color:var(--txt-dim);cursor:pointer;font-size:0.68rem;
      display:flex;align-items:center;justify-content:center;padding:0;
      backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
      transition:right .22s ease,background .15s,color .15s,box-shadow .15s,width .15s,height .15s}
    #app.weather-collapsed #weather-toggle{right:0;transform:translate(0,-50%);
      border-radius:10px 0 0 10px;width:30px;height:52px;
      background:rgba(45,212,191,0.16);color:var(--accent);
      border-color:rgba(45,212,191,0.42);box-shadow:-2px 0 16px rgba(45,212,191,0.12)}
    #weather-toggle:hover{background:var(--accent-dim);color:var(--accent);
      box-shadow:0 0 12px rgba(45,212,191,0.15)}
    #app.weather-collapsed #weather-toggle:hover{background:rgba(45,212,191,0.28)}

    /* ── Shortcuts help ── */
    #help-btn{display:none;position:absolute;bottom:max(12px,var(--safe-b));right:max(12px,var(--safe-r));
      z-index:7;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--glass-border);
      background:var(--glass);color:var(--txt-dim);cursor:pointer;font:inherit;font-size:0.85rem;
      font-weight:700;align-items:center;justify-content:center;padding:0;
      backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
      transition:background .15s,color .15s,box-shadow .15s}
    #help-btn:hover{background:var(--accent-dim);color:var(--accent);
      box-shadow:0 0 12px rgba(45,212,191,0.15)}
    #help-overlay{display:none;position:fixed;inset:0;z-index:50;
      background:rgba(6,9,13,0.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
      align-items:center;justify-content:center;padding:1rem;border:0;cursor:pointer}
    #help-overlay.on{display:flex}
    #help-panel{pointer-events:auto;cursor:default;width:min(420px,94vw);max-height:min(80vh,560px);
      overflow:auto;padding:1rem 1.1rem 1.15rem;border-radius:16px;
      background:var(--panel);border:1px solid var(--glass-border);
      box-shadow:0 24px 80px rgba(0,0,0,0.55)}
    #help-panel h2{font-family:var(--font-display);font-size:1rem;margin-bottom:0.65rem}
    #help-panel dl{display:grid;grid-template-columns:auto 1fr;gap:0.35rem 0.85rem;font-size:0.78rem}
    #help-panel dt{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;
      white-space:nowrap}
    #help-panel dd{color:var(--txt-dim)}
    #help-panel .help-close{appearance:none;border:1px solid var(--border);border-radius:var(--radius-sm);
      margin-top:0.85rem;padding:0.4rem 0.7rem;background:rgba(255,255,255,0.04);
      color:var(--txt);font:inherit;font-size:0.75rem;cursor:pointer;width:100%}
    #help-panel .help-close:hover{background:var(--accent-dim);color:var(--accent)}

    /* ── Mobile Nav (Cinema) ── */
    #mobile-nav{display:none}
    #m-sheet,#edge-prev,#edge-next,#hud-chip{display:none}

    /* ── Mobile ── */
    @media(max-width:900px){
      :root{--m-nav-h:4.1rem}
      #app{display:block;overflow:hidden}
      #sidebar,#weather{position:absolute;top:0;bottom:0;z-index:15;
        flex-basis:auto!important;
        transition:transform .24s ease,visibility .24s;
        box-shadow:0 0 60px rgba(0,0,0,0.7)}
      #sidebar{left:0;right:auto;width:min(88vw,340px);border-right:1px solid var(--border);
        transform:translateX(0);visibility:visible}
      #weather{right:0;left:auto;width:min(94vw,380px);border-left:1px solid var(--border);
        transform:translateX(0);visibility:visible}
      #app.collapsed #sidebar{transform:translateX(-105%);visibility:hidden;
        width:min(88vw,340px);border:0}
      #app.weather-collapsed #weather{transform:translateX(105%);visibility:hidden;
        width:min(94vw,380px);border:0}
      #side-head,#fav-hint,#list,#cam-search-wrap{min-width:0}
      #weather-head,#weather-body,#wx-tabs{min-width:0}
      #side-head,#weather-head{padding-top:max(0.65rem,calc(0.4rem + var(--safe-t)))}
      #toggle,#weather-toggle,#help-btn{display:none!important}
      .fav-grid{grid-template-columns:1fr;gap:0.45rem}
      .wx-tab{min-height:2.75rem;font-size:0.72rem;padding:0.45rem 0.2rem}

      #stage{position:absolute;inset:0;padding-bottom:0}
      #main{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}

      /* Desktop-Dock auf Mobile aus — Cinema HUD statt Doppel-Leiste */
      #player{display:none!important}
      #stage:fullscreen #player,#stage:-webkit-full-screen #player{
        display:block!important}

      #edge-prev,#edge-next{display:block;position:absolute;top:16%;bottom:calc(var(--m-nav-h) + var(--safe-b) + 1.2rem);z-index:3;
        width:18%;max-width:5.5rem;border:0;padding:0;margin:0;background:transparent;cursor:pointer;
        -webkit-tap-highlight-color:transparent}
      #edge-prev{left:0}
      #edge-next{right:0}
      #edge-prev::after,#edge-next::after{content:"";position:absolute;top:50%;width:1.6rem;height:1.6rem;
        border-radius:50%;opacity:0;transform:translateY(-50%) scale(0.85);
        background:rgba(8,14,20,0.45);border:1px solid rgba(45,212,191,0.22);
        backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
        transition:opacity .2s,transform .2s}
      #edge-prev::after{left:0.55rem;content:"‹";color:var(--accent);font-size:1.1rem;
        display:flex;align-items:center;justify-content:center;font-family:var(--font-display)}
      #edge-next::after{right:0.55rem;left:auto;content:"›";color:var(--accent);font-size:1.1rem;
        display:flex;align-items:center;justify-content:center;font-family:var(--font-display)}
      #edge-prev.flash::after,#edge-next.flash::after{opacity:1;transform:translateY(-50%) scale(1)}

      #hud-chip{display:block;position:absolute;left:max(10px,var(--safe-l));right:auto;
        bottom:calc(var(--m-nav-h) + var(--safe-b) + 0.55rem);z-index:4;max-width:min(68vw,260px);
        padding:0.38rem 0.7rem;border-radius:999px;pointer-events:none;
        background:rgba(8,12,18,0.78);border:1px solid rgba(45,212,191,0.2);
        backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
        opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .28s ease;
        box-shadow:0 8px 28px rgba(0,0,0,0.35)}
      #stage.show-ui #hud-chip,#hud-chip.on{opacity:1;transform:translateY(0)}
      #hud-chip .hud-kicker{display:block;font-size:0.55rem;letter-spacing:0.08em;text-transform:uppercase;
        color:var(--accent);font-weight:700;font-family:var(--font-display);margin-bottom:0.08rem}
      #hud-chip .hud-name{display:block;font-size:0.78rem;font-weight:650;line-height:1.2;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      /* (Feature 4) Kompakte Lokal-Zeile im HUD-Chip: Temp · Regen, ohne Lokal zu öffnen */
      #hud-chip .hud-wx{display:none;margin-top:0.14rem;font-size:0.58rem;font-weight:600;
        color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        letter-spacing:0.01em}
      #hud-chip .hud-wx.on{display:block}
      #hud-chip .hud-wx b{color:#7fc4ff;font-weight:700}

      /* Floating Cinema Capsule */
      #mobile-nav{display:flex;position:absolute;left:50%;
        bottom:max(8px,calc(6px + var(--safe-b)));
        transform:translateX(-50%);z-index:12;width:min(92vw,360px);
        gap:0.12rem;padding:0.26rem;border-radius:999px;
        background:rgba(8,12,18,0.82);border:1px solid rgba(45,212,191,0.22);
        backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);
        box-shadow:0 12px 40px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.05);
        overflow:hidden}
      #mobile-nav.radio-live{border-color:rgba(45,212,191,0.45);
        box-shadow:0 12px 40px rgba(0,0,0,0.5),0 0 0 1px rgba(45,212,191,0.12),0 0 24px rgba(45,212,191,0.12)}
      .m-tab{flex:1 1 0;min-width:0;appearance:none;border:1px solid transparent;border-radius:999px;
        min-height:2.85rem;padding:0.2rem 0.15rem;background:transparent;color:var(--txt-dim);
        font:inherit;font-size:0.58rem;font-weight:650;cursor:pointer;
        display:flex;flex-direction:column;align-items:center;justify-content:center;
        gap:0.12rem;transition:background .18s,color .18s,border-color .18s,transform .12s;
        overflow:hidden}
      .m-tab span{font-size:0.55rem;letter-spacing:0.02em;opacity:0.9;line-height:1;
        max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .m-tab svg{width:1.15rem;height:1.15rem;flex:0 0 auto;fill:none;stroke:currentColor;
        stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
      .m-tab:active{transform:scale(0.94)}
      .m-tab.on{background:var(--accent-dim);color:var(--accent);
        border-color:rgba(45,212,191,0.22)}
      .m-tab#m-radio.on,.m-tab#m-radio.playing{color:var(--accent)}
      .m-tab#m-radio.playing svg{animation:radioPulse 1.8s ease-in-out infinite}
      @keyframes radioPulse{0%,100%{opacity:1}50%{opacity:0.55}}
      .m-tab#m-sound.on{color:#ffb4ae;background:var(--coral-dim);border-color:rgba(255,92,77,0.25)}

      /* Bottom sheet for audio / extras */
      #m-sheet{display:block;position:absolute;left:0;right:0;bottom:0;z-index:18;
        padding:0 max(0.65rem,var(--safe-r)) calc(0.55rem + var(--safe-b)) max(0.65rem,var(--safe-l));
        transform:translateY(110%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
        pointer-events:none;max-height:min(88dvh,640px)}
      #m-sheet.open{transform:translateY(0);pointer-events:auto}
      #m-sheet-panel{border-radius:18px 18px 16px 16px;padding:0.5rem 0.75rem 0.8rem;
        background:rgba(10,14,20,0.96);border:1px solid rgba(45,212,191,0.2);
        backdrop-filter:blur(24px) saturate(1.15);-webkit-backdrop-filter:blur(24px) saturate(1.15);
        box-shadow:0 -12px 48px rgba(0,0,0,0.55);max-height:min(78dvh,560px);
        overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
        overscroll-behavior:contain}
      #m-sheet .sheet-handle{width:2.4rem;height:0.28rem;border-radius:99px;margin:0.1rem auto 0.5rem;
        background:rgba(255,255,255,0.2);flex-shrink:0}
      #m-sheet h3{font-family:var(--font-display);font-size:0.92rem;margin:0 0 0.5rem;font-weight:700}
      #m-sheet .sheet-row{display:flex;align-items:center;gap:0.4rem;margin-bottom:0.5rem}
      #m-sheet .sheet-row button{appearance:none;border:1px solid var(--border);border-radius:12px;
        min-height:2.75rem;min-width:2.75rem;background:rgba(255,255,255,0.04);color:var(--txt);
        font:inherit;font-size:1rem;cursor:pointer;flex:0 0 auto}
      #m-sheet .sheet-cam{flex:1;min-width:0;font-size:0.78rem;font-weight:650;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
        padding:0 0.2rem}
      #m-sheet label{display:block;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.06em;
        color:var(--txt-muted);margin:0.3rem 0 0.22rem;font-weight:700}
      #m-sheet-station{width:100%;max-width:100%;appearance:none;border:1px solid var(--border);border-radius:12px;
        background:rgba(255,255,255,0.04);color:var(--txt);font:inherit;font-size:0.78rem;
        padding:0.65rem 0.7rem;margin-bottom:0.35rem;box-sizing:border-box}
      #m-sheet-station option,#m-sheet-station optgroup{background:var(--panel);color:var(--txt)}
      #m-sheet-vol{width:100%;height:2.4rem;accent-color:var(--accent);margin:0.1rem 0 0.4rem}
      #m-sheet .sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem;margin-top:0.2rem}
      #m-sheet .sheet-actions button{appearance:none;border:1px solid var(--border);border-radius:12px;
        min-height:2.75rem;background:rgba(255,255,255,0.04);color:var(--txt);
        font:inherit;font-size:0.72rem;font-weight:650;cursor:pointer;padding:0.35rem 0.4rem}
      #m-sheet .sheet-actions button.primary{background:var(--accent-dim);color:var(--accent);
        border-color:rgba(45,212,191,0.28)}
      #m-sheet-backdrop{display:none;position:absolute;inset:0;z-index:17;border:0;padding:0;
        background:rgba(4,8,12,0.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
      #m-sheet-backdrop.on{display:block}

      .star{width:2.75rem;height:2.75rem;font-size:1.2rem}
      .cam.compact{min-height:2.75rem;padding:0.25rem 0.3rem}
      .cam.compact.tv-item{padding-left:0.2rem}
      .cam-name{font-size:0.78rem}
      #side-collapse{width:2.75rem;height:2.75rem;font-size:0.8rem}
      .group-label{min-height:2.2rem;font-size:0.65rem}
      .group-label.togglable{min-height:2.75rem;padding:0.55rem 0.45rem}
      .list-section-heading{font-size:0.65rem;letter-spacing:0.07em;padding:0.7rem 0.4rem 0.35rem}
      #list{padding:0.4rem 0.55rem max(1rem,calc(0.65rem + var(--safe-b)));
        -webkit-overflow-scrolling:touch}
      #weather-body{padding:0.65rem 0.65rem max(1.1rem,calc(0.75rem + var(--safe-b)))}
      .wx-radar-bar button{min-height:2.75rem;min-width:2.75rem;padding:0.35rem 0.55rem;font-size:0.72rem}
      #radar-frame{min-height:min(52vh,440px)!important;height:min(52vh,440px)!important}
      .wx-panel[data-wx-panel="radar"].active #radar-wrap{min-height:min(56vh,480px);flex:1}
      .wx-panel[data-wx-panel="radar"].active #radar-frame{height:min(52vh,440px)!important;min-height:min(52vh,440px)!important}
      #radar-wrap{touch-action:auto;overscroll-behavior:contain}
      #radar-wrap.expanded{left:max(8px,var(--safe-l));right:max(8px,var(--safe-r));
        top:max(8px,var(--safe-t));bottom:max(8px,var(--safe-b))}
      #radar-backdrop{z-index:38}
      #file-warn{top:max(12px,var(--safe-t));font-size:0.75rem;left:max(12px,var(--safe-l));
        right:max(12px,var(--safe-r));transform:none;max-width:none;width:auto}
      #clock{top:max(8px,var(--safe-t));right:max(8px,var(--safe-r));
        padding:0.32rem 0.5rem;z-index:5;max-width:min(42vw,9.5rem)}
      #clock .clock-time{font-size:0.92rem}
      #clock .clock-date{display:none}
      #status{z-index:6;max-width:min(78vw,300px);top:42%}
      .wx-now{padding:0.55rem 0.65rem;margin-bottom:0.45rem}
      .wx-now .temp{font-size:1.7rem}
      .wx-days{gap:0.3rem;margin-bottom:0.3rem}
      .wx-day{padding:0.45rem 0.5rem}
      .wx-hours{gap:0.2rem;margin-bottom:0.45rem}
      .wx-h{width:2.6rem;padding:0.25rem 0.12rem;font-size:0.6rem}
      .feed-tag{font-size:0.69rem}
      .feed-place{font-size:0.68rem}
      #fav-hint{font-size:0.68rem}
      .wx-hour-title{font-size:0.65rem}
      #stage.tv-iframe-on #tv-iframe{bottom:0}
    }
    @media(max-width:900px) and (orientation:landscape){
      :root{--m-nav-h:3.1rem}
      #mobile-nav{width:min(70vw,420px);bottom:max(6px,var(--safe-b));padding:0.2rem}
      .m-tab{min-height:2.35rem}
      .m-tab span{display:none}
      #hud-chip{bottom:calc(var(--m-nav-h) + var(--safe-b) + 0.4rem);padding:0.28rem 0.55rem;
        max-width:min(50vw,240px)}
      #edge-prev,#edge-next{top:10%;bottom:calc(var(--m-nav-h) + var(--safe-b) + 0.8rem);width:16%}
      #m-sheet-panel{max-height:min(70dvh,420px)}
    }
    #fs-hint{position:absolute;left:50%;bottom:28%;transform:translateX(-50%);z-index:5;
      padding:0.5rem 1rem;border-radius:var(--radius);
      background:var(--glass);border:1px solid var(--glass-border);
      backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
      color:var(--txt-dim);font-size:0.78rem;pointer-events:none;
      opacity:0;transition:opacity .4s}
    #fs-hint.show{opacity:1}
    @media(min-width:901px){
      #help-btn{display:flex}
    }

    /* ── TV Iframe Overlay ── */
    #tv-iframe{display:none;position:absolute;inset:0;z-index:2;border:0;
      width:100%;height:100%;background:#000}
    #stage.tv-iframe-on #main{visibility:hidden}
    #stage.tv-iframe-on #tv-iframe{display:block}
    .group-label.tv{color:var(--coral)}
    .cam.compact.tv-item{min-height:2.35rem}
    .cam.compact.tv-item .cam-name{color:var(--txt);padding-left:0.05rem}
    .cam.compact.tv-item.active{border-color:var(--coral);background:var(--coral-dim);
      box-shadow:none}
    .cam.compact.tv-item::before{content:"▸";font-size:0.65rem;color:var(--coral);
      margin:0 0.1rem 0 0.2rem;flex:0 0 auto;opacity:0.85;line-height:1}

    /* ── (Feature 3) Stream-Status Zustände + Retry ── */
    #status{display:flex;flex-direction:column;align-items:center;gap:0.5rem}
    #status.warn{color:var(--gold);border-color:rgba(228,181,90,0.28)}
    #status.hidden{opacity:0}
    #status-retry{display:none;appearance:none;border:1px solid rgba(45,212,191,0.35);
      border-radius:var(--radius-sm);padding:0.4rem 0.85rem;min-height:2.2rem;
      background:var(--accent-dim);color:var(--accent);font:inherit;font-size:0.74rem;
      font-weight:650;cursor:pointer;pointer-events:auto;
      transition:background .15s,transform .12s}
    #status-retry:hover{background:rgba(45,212,191,0.2)}
    #status-retry:active{transform:scale(0.96)}
    #status.show-retry{pointer-events:auto}
    #status.show-retry #status-retry{display:inline-flex;align-items:center;gap:0.35rem}

    /* ── Favoriten Drag & Drop (ganze Karte, Touch: Long-Press) ── */
    .fav-grid.reordering{touch-action:none;user-select:none}
    .fav-grid .cam.dragging{opacity:0.55;transform:scale(0.98);
      box-shadow:0 8px 24px rgba(0,0,0,0.45);z-index:2;position:relative;
      border-color:rgba(228,181,90,0.45)}
    .fav-grid .cam.drag-over{outline:1px dashed rgba(228,181,90,0.55);
      outline-offset:1px}
    .fav-grid .row{align-items:center}

    /* ── (Feature 5) Standard-Kamera Markierung ── */
    .cam.is-default > .row .cam-name::after,
    .cam.is-default > .cam-name::after,
    .cam.compact.is-default .cam-name::after{content:"⌂";margin-left:0.3rem;
      color:var(--accent);font-size:0.72rem;opacity:0.9}
    .cam.tv-item.is-default .cam-name::after{color:var(--coral)}
    button.ctrl.on#default-btn{background:var(--accent-dim);color:var(--accent)}

    /* ── (Feature 8) TV Zeilen: Avatar + LIVE-Pill ── */
    .cam.compact.tv-item::before{content:none}
    .tv-ava{flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:var(--radius-xs);
      display:flex;align-items:center;justify-content:center;margin:0 0.35rem 0 0.15rem;
      font-family:var(--font-display);font-size:0.6rem;font-weight:700;letter-spacing:0.02em;
      color:#06090d;line-height:1}
    .tv-ava.cmc{background:linear-gradient(150deg,#ff8a4d,#ff5c4d)}
    .tv-ava.kit{background:linear-gradient(150deg,#e4b55a,#d19a2e)}
    .tv-ava.ri{background:linear-gradient(150deg,#2dd4bf,#1a9e8f)}
    .tv-sub{display:block;font-size:0.6rem;color:var(--txt-muted);line-height:1.2;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0.05rem}
    .tv-item .cam-name{display:flex;flex-direction:column;gap:0;white-space:normal}
    .tv-item .cam-name .tv-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      display:block;line-height:1.2}
    .tv-live{flex:0 0 auto;display:none;align-items:center;gap:0.25rem;margin-left:auto;
      padding:0.12rem 0.4rem;border-radius:999px;background:var(--coral-dim);
      border:1px solid rgba(255,92,77,0.3);color:#ffb4ae;font-size:0.5rem;font-weight:700;
      letter-spacing:0.08em;font-family:var(--font-display)}
    .tv-live i{width:0.35rem;height:0.35rem;border-radius:50%;background:var(--coral);
      animation:livePulse 1.6s ease-out infinite}
    .cam.tv-item.active .tv-live{display:inline-flex}

    /* ── (Feature 6) Lokal-Kompaktstreifen ── */
    #lokal-strip{display:flex;align-items:stretch;gap:0.4rem;flex:0 0 auto;
      min-width:0;padding:0.4rem 0.6rem;border-bottom:1px solid var(--border);
      background:rgba(45,212,191,0.03)}
    #lokal-strip .ls-cell{flex:1 1 0;min-width:0;appearance:none;border:0;
      background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;
      padding:0.15rem 0.2rem;border-radius:var(--radius-xs);
      display:flex;flex-direction:column;gap:0.1rem;transition:background .15s}
    #lokal-strip .ls-cell:hover{background:rgba(45,212,191,0.07)}
    #lokal-strip .ls-cell.ls-event{flex:1.5 1 0}
    #lokal-strip .ls-lbl{font-size:0.52rem;text-transform:uppercase;letter-spacing:0.06em;
      color:var(--txt-muted);font-weight:700}
    #lokal-strip .ls-val{font-size:0.78rem;font-weight:650;color:var(--txt);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-display)}
    #lokal-strip .ls-val.rain{color:#7fc4ff}
    #lokal-strip .ls-val.ev{font-size:0.72rem}

    /* ── (Feature 7) Regen-Badge auf Lokal-Tab ── */
    #m-wx,#wx-btn{position:relative}
    #m-wx.rain-alert::after,#wx-btn.rain-alert::after{content:"";position:absolute;
      top:0.35rem;right:0.9rem;width:0.5rem;height:0.5rem;border-radius:50%;
      background:#4aa3ff;box-shadow:0 0 0 2px rgba(6,9,13,0.85),0 0 8px rgba(74,163,255,0.8);
      animation:rainDot 1.8s ease-in-out infinite}
    #wx-btn.rain-alert::after{top:0.15rem;right:0.15rem}
    @keyframes rainDot{0%,100%{opacity:1}50%{opacity:0.45}}

    /* ── (Feature 9/10) Wake + Share Buttons (Sheet) ── */
    #m-sheet .sheet-actions button.on{background:var(--accent-dim);color:var(--accent);
      border-color:rgba(45,212,191,0.28)}

    /* ── (Feature 1) Install-Tipp + (Feature 10) Toast ── */
    #install-tip{display:none;position:fixed;left:50%;transform:translateX(-50%);
      bottom:calc(var(--m-nav-h) + var(--safe-b) + 4.5rem);z-index:45;
      width:min(92vw,360px);padding:0.6rem 0.7rem 0.6rem 0.85rem;border-radius:14px;
      align-items:center;gap:0.6rem;
      background:rgba(10,14,20,0.94);border:1px solid rgba(45,212,191,0.3);
      backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15);
      box-shadow:0 16px 48px rgba(0,0,0,0.5)}
    #install-tip.on{display:flex}
    #install-tip .it-txt{flex:1;min-width:0;font-size:0.72rem;line-height:1.3;color:var(--txt)}
    #install-tip .it-txt b{font-family:var(--font-display)}
    #install-tip button{appearance:none;border:0;border-radius:10px;padding:0.4rem 0.6rem;
      min-height:2.3rem;font:inherit;font-size:0.72rem;font-weight:650;cursor:pointer;flex:0 0 auto}
    #install-tip #install-yes{background:var(--accent-dim);color:var(--accent);
      border:1px solid rgba(45,212,191,0.3)}
    #install-tip #install-no{background:rgba(255,255,255,0.05);color:var(--txt-dim);
      width:2.1rem;padding:0.4rem 0}
    @media(min-width:901px){#install-tip{bottom:1.5rem;left:auto;right:1.5rem;transform:none}}

    #wco-toast{position:fixed;left:50%;bottom:calc(var(--m-nav-h) + var(--safe-b) + 5rem);
      transform:translate(-50%,10px);z-index:60;pointer-events:none;
      padding:0.5rem 0.9rem;border-radius:999px;max-width:min(90vw,320px);
      background:rgba(10,14,20,0.94);border:1px solid rgba(45,212,191,0.28);
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      color:var(--txt);font-size:0.74rem;font-weight:600;text-align:center;
      opacity:0;transition:opacity .2s ease,transform .2s ease;
      box-shadow:0 12px 40px rgba(0,0,0,0.5)}
    #wco-toast.on{opacity:1;transform:translate(-50%,0)}
    @media(min-width:901px){#wco-toast{bottom:5.5rem}}

/* ── Feature #2 Still-Overlay ── */
#still-overlay{position:absolute;inset:0;z-index:5;display:none;pointer-events:none}
#still-overlay.on{display:block}
#still-overlay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.45) saturate(0.85)}
#still-overlay .still-dim{position:absolute;inset:0;background:rgba(6,9,13,0.35)}
#still-overlay .still-label{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  text-align:center;z-index:1;display:flex;flex-direction:column;gap:0.25rem}
#still-overlay .still-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:#ffb4ae}
#still-overlay .still-sub{font-size:0.72rem;color:var(--txt-dim)}
#stage.still-on #main{opacity:0}
#status{z-index:7}

/* ── Feature #3 Dead favorite badge ── */
.cam .dead-badge{position:absolute;top:0.28rem;left:0.28rem;z-index:2;
  font-size:0.55rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  padding:0.12rem 0.35rem;border-radius:999px;pointer-events:none;
  background:rgba(255,92,77,0.88);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.35)}
.cam.is-dead .thumb video{opacity:0.35;filter:grayscale(0.4)}
.cam.is-dead .thumb:not(.live) .ph{color:#ffb4ae}

/* ── Feature #6 Jetzt raus? ── */
#jetzt-raus{flex:0 0 auto;margin:0.35rem 0.65rem 0.15rem;padding:0.55rem 0.7rem;
  border-radius:var(--radius-sm);border:1px solid rgba(45,212,191,0.18);
  background:rgba(45,212,191,0.06);font-size:0.78rem;line-height:1.35;
  display:flex;flex-wrap:wrap;gap:0.25rem 0.4rem;align-items:baseline}
#jetzt-raus .jr-q{font-weight:700;font-family:var(--font-display);color:var(--txt)}
#jetzt-raus .jr-a{font-weight:650;color:var(--accent)}
#jetzt-raus.jr-yes{border-color:rgba(45,212,191,0.35);background:rgba(45,212,191,0.1)}
#jetzt-raus.jr-yes .jr-a{color:var(--accent)}
#jetzt-raus.jr-no{border-color:rgba(255,92,77,0.35);background:rgba(255,92,77,0.1)}
#jetzt-raus.jr-no .jr-a{color:#ffb4ae}
#jetzt-raus.jr-maybe{border-color:rgba(228,181,90,0.35);background:rgba(228,181,90,0.1)}
#jetzt-raus.jr-maybe .jr-a{color:var(--gold)}

/* ── Feature #7 Zeitraffer ── */
#tl-open{appearance:none;border:1px solid rgba(45,212,191,0.22);border-radius:var(--radius-sm);
  margin:0.25rem 0.65rem 0.45rem;padding:0.4rem 0.65rem;width:calc(100% - 1.3rem);
  min-width:0;background:rgba(45,212,191,0.06);color:var(--accent);font:inherit;
  font-size:0.72rem;font-weight:650;cursor:pointer;text-align:center;
  transition:background .15s,border-color .15s}
#tl-open:hover{background:rgba(45,212,191,0.12);border-color:rgba(45,212,191,0.4)}
#tl-overlay{position:fixed;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:center;
  background:rgba(6,9,13,0.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:max(0.75rem,var(--safe-t)) 0.75rem max(0.75rem,calc(var(--safe-b) + 0.5rem))}
#tl-overlay.on{display:flex}
#tl-panel{width:min(640px,100%);max-height:min(92dvh,780px);background:var(--panel);
  border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,0.55)}
.tl-head{display:flex;align-items:center;gap:0.45rem;padding:0.65rem 0.7rem;border-bottom:1px solid var(--border)}
.tl-head h2{font-family:var(--font-display);font-size:0.92rem;flex:1;margin:0}
#tl-cam{flex:1.2;min-width:0;appearance:none;border:1px solid var(--border);border-radius:8px;
  background:rgba(255,255,255,0.04);color:var(--txt);font:inherit;font-size:0.72rem;padding:0.35rem 0.45rem}
#tl-close{appearance:none;border:0;width:2rem;height:2rem;border-radius:8px;background:rgba(255,255,255,0.06);
  color:var(--txt-dim);font-size:1.2rem;cursor:pointer}
.tl-stage{background:#080c10;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tl-stage img{width:100%;height:100%;object-fit:cover;display:block}
.tl-strip{display:flex;gap:0.35rem;overflow-x:auto;padding:0.45rem 0.65rem;border-bottom:1px solid var(--border);
  scrollbar-width:thin;background:rgba(0,0,0,0.22)}
.tl-thumb{appearance:none;border:1px solid transparent;padding:0;border-radius:6px;overflow:hidden;
  width:3.4rem;height:1.95rem;flex:0 0 auto;cursor:pointer;background:#0a1016;opacity:0.7}
.tl-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.tl-thumb.on{opacity:1;border-color:var(--accent);box-shadow:0 0 0 1px rgba(45,212,191,0.35)}
.tl-meta{display:flex;justify-content:space-between;padding:0.4rem 0.75rem;font-size:0.68rem;color:var(--txt-dim)}
.tl-controls{display:flex;align-items:center;gap:0.35rem;padding:0.55rem 0.7rem max(0.75rem,calc(0.5rem + var(--safe-b)));flex-wrap:wrap}
.tl-controls button,.tl-controls select{appearance:none;border:1px solid var(--border);border-radius:8px;
  background:rgba(255,255,255,0.05);color:var(--txt);min-width:2.2rem;min-height:2.2rem;
  font:inherit;font-size:0.8rem;cursor:pointer;padding:0.2rem 0.35rem}
#tl-speed{font-size:0.68rem;min-width:3.4rem}
#tl-scrub{flex:1;min-width:6rem;accent-color:var(--accent)}
@media(min-width:901px){
  #tl-overlay{align-items:center}
}
@media(max-width:900px){
  .tl-thumb{width:3rem;height:1.7rem}
}