h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---- Video Downloader ---- */
:root {
    --bg: #f6f7f9; --card: #fff; --text: #1d2330; --muted: #6b7280; --border: #e2e5ea;
    --accent: #2563eb; --danger: #dc2626; --ok: #16a34a;
}
@media (prefers-color-scheme: dark) {
    :root { --bg: #111318; --card: #1a1d24; --text: #e6e8ec; --muted: #9aa1ad; --border: #2b2f38; --accent: #4f8cff; --danger: #f05252; --ok: #34c56a; }
}
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, "Segoe UI", sans-serif; }
main { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
h1 { margin: 0 0 4px; font-size: 1.6rem; }
h2 { margin: 28px 0 10px; font-size: 1.1rem; }
.muted { color: var(--muted); }
code { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
button, input { font: inherit; }

.add { display: flex; gap: 8px; margin-top: 16px; }
.add input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }
.add button { padding: 10px 18px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }
.add button:disabled { opacity: .5; cursor: default; }

.jobs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.job { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.job .row { display: flex; gap: 12px; align-items: center; }
.job .url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-size: .85rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.job.completed .badge { color: var(--ok); }
.job.failed .badge { color: var(--danger); }
.bar { height: 6px; margin-top: 8px; background: var(--border); border-radius: 3px; overflow: hidden; }
.bar > div { height: 100%; background: var(--accent); transition: width .25s; }
.error { margin: 8px 0 0; white-space: pre-wrap; font-size: .8rem; color: var(--danger); }

button.link { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
th, td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
th { font-size: .8rem; color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
td.name { word-break: break-word; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.actions { white-space: nowrap; text-align: right; }
td.actions a { color: var(--accent); text-decoration: none; margin-right: 12px; }
button.danger { background: none; border: 1px solid var(--danger); color: var(--danger); border-radius: 6px; padding: 2px 10px; cursor: pointer; }

@media (max-width: 600px) {
    td.actions a { margin-right: 6px; }
}
.warning { padding: 10px 12px; border: 1px solid var(--danger); border-radius: 8px; color: var(--danger); background: var(--card); }
.notice { padding: 10px 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--card); }

/* Anteprima e miniature */
.preview { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.preview .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.preview .meta strong { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.thumb-box { flex: none; width: 160px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--border); display: inline-block; vertical-align: middle; }
.thumb-box.small { width: 96px; }
.thumb-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview.loading .thumb-box { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.thumb-cell { width: 96px; padding-right: 0; }
.small { font-size: .8rem; display: block; }
@media (max-width: 600px) {
    .thumb-box { width: 112px; }
    .thumb-box.small { width: 72px; }
    .thumb-cell { width: 72px; }
    th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4) { display: none; }
    th, td { padding: 8px; }
    td.actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
    td.actions a { margin-right: 0; }
}

/* Link alla pagina originale (titolo e miniatura) */
a.source { color: inherit; text-decoration: none; }
a.source:hover { color: var(--accent); text-decoration: underline; }
a.thumb-box { cursor: pointer; transition: opacity .15s; }
a.thumb-box:hover { opacity: .85; }