:root {
  --fondo: #10131a;
  --pannello: #181c26;
  --testo: #e6e8ee;
  --attenuato: #8a90a0;
  --accento: #4f8cff;
  --errore: #e2554c;
  --avviso: #d8a339;
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; }

.intestazione {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #262b38;
}

.intestazione h1 { margin: 0; font-size: 1.1rem; }

.link {
  background: none;
  border: none;
  color: var(--attenuato);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
}

main { max-width: 760px; margin: 0 auto; padding: 1.25rem; }

body.accesso { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.scheda {
  background: var(--pannello);
  border-radius: 14px;
  padding: 2rem;
  width: 100%;
  max-width: 320px;
  text-align: center;
}

.scheda h1 { margin: 0 0 0.2rem; }
.sottotitolo { color: var(--attenuato); margin: 0 0 1.5rem; font-size: 0.9rem; }

input, button {
  width: 100%;
  padding: 0.7rem;
  border-radius: 10px;
  border: 1px solid #2d3242;
  background: #0d0f16;
  color: var(--testo);
  font-size: 1rem;
  margin-bottom: 0.6rem;
}

button {
  background: var(--accento);
  border: none;
  font-weight: 600;
  cursor: pointer;
}

button:hover { opacity: 0.9; }

.errore { color: var(--errore); font-size: 0.9rem; }

.modulo-link { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.modulo-link input { margin-bottom: 0; }
.modulo-link button { width: auto; padding: 0.7rem 1.2rem; white-space: nowrap; }

.elenco h2 { font-size: 1rem; color: var(--attenuato); text-transform: uppercase; letter-spacing: 0.05em; }
.vuoto { color: var(--attenuato); }

.riga-lavoro {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: var(--pannello);
  margin-bottom: 0.5rem;
  color: var(--testo);
}

.riga-lavoro .titolo { font-weight: 600; }
.riga-lavoro .meta { color: var(--attenuato); font-size: 0.85rem; }
.riga-lavoro.stato-errore .meta { color: var(--errore); }
.riga-lavoro.stato-fatta .meta { color: #5ec98a; }

.pagina-video h1 { margin-bottom: 0.2rem; }
.canale { color: var(--attenuato); margin-top: 0; }

.lettore { width: 100%; margin: 1rem 0; }

.banner {
  background: var(--pannello);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  color: var(--attenuato);
}

.banner.errore { color: var(--errore); }

/* YouTube a volte non dice quando un video e' uscito (live, metadati ristretti): non e'
   un errore del servizio, ma senza quella data un indice che la usa per giudicare cosa e'
   ancora valido perde il suo punto di riferimento piu' importante per questo video. Qui si
   vede, invece di sparire in silenzio dentro la scheda. */
.avviso { color: var(--avviso); font-size: 0.85rem; }
.banner.avviso { color: var(--avviso); }
.riga-lavoro .meta .avviso { font-size: inherit; }

.scheda, .riassunto, .trascrizione {
  background: var(--pannello);
  border-radius: 10px;
  padding: 1.2rem;
  margin-top: 1.2rem;
}

.trascrizione { max-width: 68ch; }

/* La scheda di catalogo: la stessa cosa che finisce nella memoria del progetto, qui in
   forma leggibile — serve a vedere cosa ha capito il catalogatore senza cercarla nel RAG. */
.scheda .una-riga { margin-top: 0; }
.scheda dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 0.9rem;
  margin: 0.8rem 0 0;
}
.scheda dt { color: var(--attenuato); font-size: 0.85rem; }
.scheda dd { margin: 0; }
.scheda h3 { font-size: 0.95rem; margin: 1.1rem 0 0.4rem; }
.scheda ul { margin: 0; padding-left: 1.1rem; color: var(--attenuato); }

@media (max-width: 480px) {
  .scheda dl { grid-template-columns: 1fr; gap: 0.1rem; }
  .scheda dd { margin-bottom: 0.5rem; }
}

.paragrafo { margin: 0 0 0.9rem; }
.minuto {
  color: var(--attenuato);
  font-size: 0.8rem;
  display: inline-block;
  min-width: 3.2em;
  user-select: none;
}