* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.45 -apple-system, "SF Pro Text", "Segoe UI", sans-serif; background: #101214; color: #e8e6e1; padding: 16px; max-width: 720px; margin: 0 auto; }
header h1 { font-size: 22px; letter-spacing: .04em; }
#aggiornato { color: #8a8f98; font-size: 13px; margin: 4px 0 16px; }
#contatori { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
#contatori[hidden] { display: none; }
.card { background: #1a1d21; border-radius: 10px; padding: 12px 8px; text-align: center; }
.card b { display: block; font-size: 26px; }
.card span { font-size: 11px; color: #8a8f98; text-transform: uppercase; letter-spacing: .06em; }
.card.rosso b { color: #ff5d5d; } .card.verde b { color: #5dd68a; } .card.blu b { color: #6ea8ff; }
.riga { background: #1a1d21; border-left: 4px solid #3a3f45; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; position: relative; }
.riga.scaduto { border-left-color: #ff5d5d; background: #241417; }
.riga.scadenza { border-left-color: #ffb84d; }
.riga.lab { border-left-color: #6ea8ff; }
.riga.rientrato { border-left-color: #5dd68a; opacity: .65; }
.riga.incompleta { border-left-color: #b06eff; }
.riga .top { display: flex; justify-content: space-between; gap: 8px; }
.stato { font-size: 11px; letter-spacing: .06em; color: #8a8f98; }
.riga.scaduto .stato { color: #ff5d5d; font-weight: 700; }
.dett { font-size: 13px; color: #b9bec6; margin-top: 2px; }
.giorni { position: absolute; right: 12px; bottom: 10px; font-size: 20px; font-weight: 700; }
.riga.scaduto .giorni { color: #ff5d5d; }
#messaggio { color: #8a8f98; margin-top: 12px; }
.hint { display: block; background: #1a1d21; border-left: 4px solid #6ea8ff; border-radius: 8px; padding: 14px 16px; line-height: 1.5; color: #b9bec6; }
.hint b { color: #e8e6e1; }
.hint code { background: #101214; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.hint .err { color: #ff5d5d; font-weight: 700; }
.sblocco { display: flex; gap: 8px; margin-top: 12px; }
.sblocco input { flex: 1; min-width: 0; background: #101214; border: 1px solid #3a3f45; border-radius: 8px; padding: 10px 12px; color: #e8e6e1; font-size: 15px; }
.sblocco input:focus { outline: none; border-color: #6ea8ff; }
.sblocco button { background: #6ea8ff; color: #06121f; border: 0; border-radius: 8px; padding: 10px 18px; font-size: 15px; font-weight: 700; cursor: pointer; }
.sblocco button:active { opacity: .85; }
@media (max-width: 480px) { #contatori { grid-template-columns: repeat(2, 1fr); } }