/* color-scheme su :root evita il lampo bianco durante le navigazioni. */
:root { color-scheme: dark light; --bg:#0f1115; --card:#181b22; --testo:#e8eaf0;
        --tenue:#9aa2b1; --bordo:#272b35; --acc:#4c8dff; --err:#ff6b6b; --ok:#4ade80; }
@media (prefers-color-scheme: light) {
  :root { --bg:#f7f8fa; --card:#fff; --testo:#12141a; --tenue:#5b6270; --bordo:#e2e5ea; }
}
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin:0; padding:16px; background:var(--bg); color:var(--testo);
       font:16px/1.5 system-ui, -apple-system, sans-serif;
       padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
h1 { font-size:20px; margin:0; } h2 { font-size:16px; color:var(--tenue); margin:0 0 8px; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
input, select, button { font:inherit; min-height:44px; border-radius:10px; }
input, select { width:100%; padding:10px 12px; background:var(--card);
                color:var(--testo); border:1px solid var(--bordo); }
button { padding:10px 18px; border:0; background:var(--acc); color:#fff; font-weight:600; }
button.ghost { background:transparent; color:var(--acc); border:1px solid var(--bordo); }
button:disabled { opacity:.5; }
form { display:flex; gap:8px; margin-bottom:8px; } form button { flex:0 0 auto; }
.errore { color:var(--err); min-height:1.4em; margin:4px 0; }
.errore:empty { margin:0; min-height:0; }
.avviso { background:#3a2f14; border:1px solid #6b5620; padding:10px 12px;
          border-radius:10px; margin-bottom:12px; }
#barra-formato { position:sticky; top:0; z-index:5; background:var(--bg);
                 padding:12px 0; border-bottom:1px solid var(--bordo); margin-bottom:12px; }
#barra-formato .scelte { display:flex; gap:12px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
#barra-formato .scelte label { display:flex; gap:6px; align-items:center; white-space:nowrap;
                                min-height:44px; }
#barra-formato select { width:auto; }
#barra-formato .azioni { display:flex; gap:8px; flex-wrap:wrap; }
#barra-formato .azioni button { flex:1 1 auto; }
/* display SOLO quando non è hidden: un #lista-testa{display:flex} valido
   sempre batterebbe in specificità [hidden]{display:none} e la vanificherebbe
   — visto succedere davvero nello screenshot di verifica. */
#lista-testa:not([hidden]) { display:flex; }
#lista-testa { justify-content:space-between; align-items:center;
               padding:8px 0; color:var(--tenue); gap:8px; flex-wrap:wrap; }
#lista-testa label { display:flex; gap:6px; align-items:center; min-height:44px; }
ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
li { background:var(--card); border:1px solid var(--bordo); border-radius:12px; }
/* La riga intera è il bersaglio del tap (>=44px di altezza), non la sola
   checkbox da 24px: su un telefono e' quella la vera area cliccabile. */
li label.riga-video { display:flex; gap:10px; align-items:center; width:100%;
                       padding:10px; cursor:pointer; min-height:44px; }
li img { width:96px; aspect-ratio:16/9; object-fit:cover; border-radius:8px; flex:0 0 auto; }
li .meta { flex:1; min-width:0; }
li .titolo { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
li .sotto { color:var(--tenue); font-size:14px; }
li input[type=checkbox] { width:24px; height:24px; flex:0 0 auto; }
#job li { padding:10px; display:flex; gap:10px; align-items:center; }
#job li button { min-width:44px; }
progress { width:100%; height:8px; }
/* stessa specificità di "li .sotto" (elemento+classe): senza il prefisso "li"
   qui perdevano il confronto di specificità e il colore restava sempre quello
   tenue — visto succedere davvero nello screenshot di verifica. */
li .stato-error { color:var(--err); } li .stato-ready { color:var(--ok); }
dialog { background:var(--card); color:var(--testo); border:1px solid var(--bordo);
         border-radius:14px; max-width:min(520px, 92vw); }
dialog::backdrop { background:rgba(0,0,0,.6); }
.nota { color:var(--tenue); font-size:14px; }
#cookie-stato p { margin:6px 0; }