/**
 * DNS propagation checker: verdetto, distribuzione delle risposte, dettaglio.
 *
 * Il risultato è a tre livelli e il CSS li separa visivamente: la card del
 * verdetto occupa spazio e colore, la distribuzione usa barre proporzionali
 * (leggibili a colpo d'occhio), il dettaglio è tabellare e collassato. La scala
 * cromatica è unica e derivata dalla severità: 0 sereno, 3 rotto.
 *
 * Il ritmo verticale NON vive qui: lo scaffold .tools-tool (public.css) impone
 * gap s-5 fra gruppo campi, riga azioni e box risultato (M13/G5). Colori sempre
 * dai token semantici di public.css.
 */

/* ===== Livello 1: la card di risposta ===== */
/*
 * Contiene il dato per cui si apre lo strumento: il valore attuale, grande e
 * leggibile, col nome inverso quando esiste. Il verdetto e la sua icona stanno
 * sulla stessa linea di base; le coordinate della misura (dominio, zona,
 * nameserver, TTL) hanno un'etichetta, invece di essere una riga grigia da
 * decifrare.
 */

.tools-dnsp-answer {
    border: 1px solid var(--c-line, #e2e8f0);
    border-left-width: 4px;
    border-radius: var(--r-lg, 14px);
    padding: var(--s-4, 1rem);
    background: var(--c-bg-card, #fff);
    margin-bottom: var(--s-5, 1.25rem);
}

.tools-dnsp-answer-head {
    display: flex;
    align-items: center;
    gap: var(--s-3, 0.75rem);
    flex-wrap: wrap;
}

.tools-dnsp-answer-icon {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--r-pill, 9999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    background: var(--c-neutral-bg, #f1f5f9);
    color: var(--c-neutral-accent, #64748b);
}

.tools-dnsp-answer-verdict {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    color: var(--c-ink, #0f172a);
    flex: 1 1 auto;
}

.tools-dnsp-answer-eta {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-warning-fg, #854d0e);
    white-space: nowrap;
}

.tools-dnsp-answer-lead {
    font-size: 0.9375rem;
    color: var(--c-ink-soft, #334155);
    margin-top: var(--s-2, 0.5rem);
}

/* Il valore attuale: è la risposta, quindi ha il corpo più grande della card. */
.tools-dnsp-answer-value {
    margin-top: var(--s-4, 1rem);
    padding: var(--s-3, 0.75rem);
    background: var(--c-bg, #f8fafc);
    border-radius: var(--r-md, 10px);
}

.tools-dnsp-answer-value-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-ink-mute, #64748b);
}

.tools-dnsp-answer-list {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tools-dnsp-answer-list li {
    display: flex;
    align-items: baseline;
    gap: var(--s-3, 0.75rem);
    flex-wrap: wrap;
}

.tools-dnsp-answer-ip {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-ink, #0f172a);
    word-break: break-all;
}

.tools-dnsp-answer-ptr {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--c-ink-mute, #64748b);
    word-break: break-all;
}

.tools-dnsp-answer-ptr::before {
    content: "\2192\00a0";
}

/* Coordinate della misura: etichetta a sinistra, valore a destra. */
.tools-dnsp-answer-meta {
    margin-top: var(--s-3, 0.75rem);
}

.tools-dnsp-meta-row {
    display: flex;
    align-items: baseline;
    gap: var(--s-3, 0.75rem);
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--c-line, #e2e8f0);
    flex-wrap: wrap;
}

.tools-dnsp-meta-row:last-child {
    border-bottom: 0;
}

.tools-dnsp-meta-row dt {
    flex: 0 0 8rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-mute, #64748b);
}

.tools-dnsp-meta-row dd {
    flex: 1 1 12rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--c-ink-soft, #334155);
    word-break: break-all;
}

.tools-dnsp-meta-row code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    margin-right: 0.35rem;
}

/* Barra di concordanza. */
.tools-dnsp-meter {
    height: 8px;
    border-radius: var(--r-pill, 9999px);
    background: var(--c-neutral-bg, #f1f5f9);
    overflow: hidden;
    margin-top: var(--s-4, 1rem);
}

.tools-dnsp-meter-fill {
    display: block;
    height: 100%;
    border-radius: var(--r-pill, 9999px);
    background: var(--c-neutral-accent, #64748b);
}

.tools-dnsp-meter-down {
    color: var(--c-warning-fg, #854d0e);
}

.tools-dnsp-meter-label {
    font-size: 0.75rem;
    color: var(--c-ink-mute, #64748b);
    margin-top: 0.35rem;
}

/* Tinta della card per classe di verdetto. */
.tools-dnsp-answer--propagated { border-left-color: var(--c-success-accent, #15803d); }
.tools-dnsp-answer--propagated .tools-dnsp-answer-icon { background: var(--c-success-bg, #f0fdf4); color: var(--c-success-fg, #166534); }
.tools-dnsp-answer--propagated .tools-dnsp-meter-fill { background: var(--c-success-accent, #15803d); }

.tools-dnsp-answer--geodns-variant,
.tools-dnsp-answer--no-record { border-left-color: var(--c-info-accent, #2563eb); }
.tools-dnsp-answer--geodns-variant .tools-dnsp-answer-icon,
.tools-dnsp-answer--no-record .tools-dnsp-answer-icon { background: var(--c-info-bg, #eff6ff); color: var(--c-info-fg, #1e3a8a); }
.tools-dnsp-answer--geodns-variant .tools-dnsp-meter-fill,
.tools-dnsp-answer--no-record .tools-dnsp-meter-fill { background: var(--c-info-accent, #2563eb); }

.tools-dnsp-answer--cache-stale,
.tools-dnsp-answer--no-reference,
.tools-dnsp-answer--resolver-down { border-left-color: var(--c-warning-accent, #ca8a04); }
.tools-dnsp-answer--cache-stale .tools-dnsp-answer-icon,
.tools-dnsp-answer--no-reference .tools-dnsp-answer-icon,
.tools-dnsp-answer--resolver-down .tools-dnsp-answer-icon { background: var(--c-warning-bg, #fefce8); color: var(--c-warning-fg, #854d0e); }
.tools-dnsp-answer--cache-stale .tools-dnsp-meter-fill,
.tools-dnsp-answer--no-reference .tools-dnsp-meter-fill,
.tools-dnsp-answer--resolver-down .tools-dnsp-meter-fill { background: var(--c-warning-accent, #ca8a04); }

.tools-dnsp-answer--nxdomain-split { border-left-color: var(--c-orange, #c25a00); }
.tools-dnsp-answer--nxdomain-split .tools-dnsp-answer-icon { background: var(--c-orange-50, #fff4ea); color: var(--c-orange-600, #a14a00); }
.tools-dnsp-answer--nxdomain-split .tools-dnsp-meter-fill { background: var(--c-orange, #c25a00); }

.tools-dnsp-answer--dnssec-fail,
.tools-dnsp-answer--auth-inconsistent { border-left-color: var(--c-danger-accent, #b91c1c); }
.tools-dnsp-answer--dnssec-fail .tools-dnsp-answer-icon,
.tools-dnsp-answer--auth-inconsistent .tools-dnsp-answer-icon { background: var(--c-danger-bg, #fef2f2); color: var(--c-danger-fg, #7f1d1d); }
.tools-dnsp-answer--dnssec-fail .tools-dnsp-meter-fill,
.tools-dnsp-answer--auth-inconsistent .tools-dnsp-meter-fill { background: var(--c-danger-accent, #b91c1c); }

@media (min-width: 768px) {
    .tools-dnsp-answer-ip { font-size: 1.375rem; }
}

/* ===== Livello 3: dettaglio collassato ===== */

.tools-dnsp-details {
    border-top: 1px solid var(--c-line, #e2e8f0);
    padding-top: var(--s-3, 0.75rem);
}

.tools-dnsp-details > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--c-blue, #0065c0);
    list-style: revert;
}

.tools-dnsp-details-body {
    margin-top: var(--s-4, 1rem);
}

.tools-dnsp-subhead {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-mute, #64748b);
    margin-top: var(--s-4, 1rem);
}

/* ===== Tabelle di dettaglio ===== */

.tools-dnsp-tablewrap {
    overflow-x: auto;
    margin-bottom: var(--s-4, 1rem);
}

.tools-dnsp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.tools-dnsp-table th,
.tools-dnsp-table td {
    text-align: left;
    padding: 0.35rem var(--s-3, 0.75rem);
    border-bottom: 1px solid var(--c-line, #e2e8f0);
    vertical-align: top;
}

.tools-dnsp-table thead th {
    font-weight: 600;
    color: var(--c-ink-mute, #64748b);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.tools-dnsp-table tbody th {
    font-weight: 600;
    color: var(--c-ink, #0f172a);
    white-space: nowrap;
}

.tools-dnsp-table code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    word-break: break-all;
}

.tools-dnsp-ttlcell,
.tools-dnsp-ttl {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tools-dnsp-ident code {
    color: var(--c-ink-mute, #64748b);
}

.tools-dnsp-muted {
    color: var(--c-ink-mute, #64748b);
}

.tools-dnsp-reason {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--c-ink-mute, #64748b);
}

.tools-dnsp-note {
    font-size: 0.8125rem;
    color: var(--c-ink-mute, #64748b);
    margin-bottom: var(--s-3, 0.75rem);
}

.tools-dnsp-row--sev0 th { box-shadow: inset 3px 0 0 var(--c-success-accent, #15803d); }
.tools-dnsp-row--sev1 th { box-shadow: inset 3px 0 0 var(--c-warning-accent, #ca8a04); }
.tools-dnsp-row--sev2 th { box-shadow: inset 3px 0 0 var(--c-orange, #c25a00); }
.tools-dnsp-row--sev3 th { box-shadow: inset 3px 0 0 var(--c-danger-accent, #b91c1c); }

/* ===== Badge di verdetto ===== */

.tools-dnsp-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--r-pill, 9999px);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--c-neutral-bg, #f1f5f9);
    color: var(--c-neutral-accent, #64748b);
}

.tools-dnsp-badge--propagated { background: var(--c-success-bg, #f0fdf4); color: var(--c-success-fg, #166534); }
.tools-dnsp-badge--geodns-variant { background: var(--c-info-bg, #eff6ff); color: var(--c-info-fg, #1e3a8a); }
.tools-dnsp-badge--no-record { background: var(--c-neutral-bg, #f1f5f9); color: var(--c-neutral-accent, #64748b); }
.tools-dnsp-badge--cache-stale,
.tools-dnsp-badge--no-reference,
.tools-dnsp-badge--resolver-down { background: var(--c-warning-bg, #fefce8); color: var(--c-warning-fg, #854d0e); }
.tools-dnsp-badge--nxdomain-split { background: var(--c-orange-50, #fff4ea); color: var(--c-orange-600, #a14a00); }
.tools-dnsp-badge--dnssec-fail,
.tools-dnsp-badge--auth-inconsistent { background: var(--c-danger-bg, #fef2f2); color: var(--c-danger-fg, #7f1d1d); }

/* ===== Attesa e note di rete ===== */

.tools-dnsp-loading {
    display: flex;
    align-items: center;
    gap: var(--s-3, 0.75rem);
    font-size: 0.875rem;
    color: var(--c-ink-mute, #64748b);
    padding: var(--s-4, 1rem);
}

.tools-dnsp-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--c-line-strong, #cbd5e1);
    border-top-color: var(--c-blue, #0065c0);
    border-radius: var(--r-pill, 9999px);
    animation: tools-dnsp-spin 0.8s linear infinite;
}

@keyframes tools-dnsp-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tools-dnsp-spinner { animation: none; }
}

.tools-dnsp-blocked {
    border-top: 1px solid var(--c-line, #e2e8f0);
    padding-top: var(--s-3, 0.75rem);
}

.tools-dnsp-linkbtn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--c-blue, #0065c0);
    text-decoration: underline;
    cursor: pointer;
}


/* ===== Barra di controllo del risultato ===== */
/*
 * Registro di lettura e azioni. Sta SOPRA il verdetto perché è un
 * interruttore, non un contenuto: chi arriva in Semplice non deve cercarlo, e
 * chi arriva in Esperto deve vedere subito dove si spegne.
 */

.tools-dnsp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3, 0.75rem);
    flex-wrap: wrap;
    margin-bottom: var(--s-4, 1rem);
}

.tools-dnsp-register,
.tools-dnsp-filters {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.tools-dnsp-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--s-4, 1rem);
    flex-wrap: wrap;
    font-size: 0.8125rem;
}

.tools-dnsp-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--c-ink-mute, #64748b);
    cursor: pointer;
}

.tools-dnsp-chip {
    border: 1px solid var(--c-line-strong, #cbd5e1);
    background: var(--c-bg-card, #fff);
    color: var(--c-ink-soft, #334155);
    border-radius: var(--r-pill, 9999px);
    padding: 0.2rem 0.75rem;
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.4;
    cursor: pointer;
}

.tools-dnsp-chip.is-active {
    background: var(--c-ink, #0f172a);
    border-color: var(--c-ink, #0f172a);
    color: #fff;
    font-weight: 600;
}

/* ===== Domini di esempio ===== */

.tools-dnsp-samples {
    font-size: 0.8125rem;
    color: var(--c-ink-mute, #64748b);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tools-dnsp-samples-label {
    font-weight: 600;
}

/* ===== I quattro numeri ===== */
/*
 * `Risposte distinte` è la metrica che riassume il problema in un intero: se
 * vale 1 il mondo concorda e non serve leggere altro. Sta alla pari con le
 * altre tre e non più in basso, perché è quella che decide se continuare a
 * leggere.
 */

.tools-dnsp-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2, 0.5rem);
    margin-bottom: var(--s-5, 1.25rem);
}

.tools-dnsp-kpi {
    border: 1px solid var(--c-line, #e2e8f0);
    border-radius: var(--r-md, 10px);
    padding: var(--s-3, 0.75rem);
    background: var(--c-bg-card, #fff);
    text-align: center;
}

.tools-dnsp-kpi-value {
    display: block;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-ink, #0f172a);
}

.tools-dnsp-kpi-label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-mute, #64748b);
    margin-top: 0.2rem;
}

.tools-dnsp-kpi--good .tools-dnsp-kpi-value { color: var(--c-success-fg, #166534); }
.tools-dnsp-kpi--warn .tools-dnsp-kpi-value { color: var(--c-warning-fg, #854d0e); }

/* ===== Il countdown ===== */
/*
 * Nessuno degli strumenti censiti risponde alla domanda vera, che non è
 * "com'è adesso" ma "quando finisce". Quando c'è una cache indietro, questo
 * blocco è l'informazione più richiesta della pagina e ha il corpo più
 * grande dopo il verdetto.
 */

.tools-dnsp-countdown {
    border: 1px solid var(--c-warning-accent, #ca8a04);
    border-left-width: 4px;
    border-radius: var(--r-lg, 14px);
    background: var(--c-warning-bg, #fefce8);
    padding: var(--s-4, 1rem);
    margin-bottom: var(--s-5, 1.25rem);
}

.tools-dnsp-countdown-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-warning-fg, #854d0e);
}

.tools-dnsp-countdown-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-warning-fg, #854d0e);
    margin-top: 0.2rem;
}

.tools-dnsp-countdown-bar {
    height: 8px;
    border-radius: var(--r-pill, 9999px);
    background: var(--c-bg-card, #fff);
    overflow: hidden;
    margin-top: var(--s-3, 0.75rem);
}

.tools-dnsp-countdown-fill {
    display: block;
    height: 100%;
    border-radius: var(--r-pill, 9999px);
    background: var(--c-warning-accent, #ca8a04);
}

.tools-dnsp-countdown-note {
    font-size: 0.8125rem;
    color: var(--c-warning-fg, #854d0e);
    margin-top: 0.4rem;
}

/* ===== I gruppi di risposta ===== */
/*
 * Uno per insieme di prefissi distinto, affiancati. La domanda dell'utente non
 * è "cosa dice il resolver di Singapore" ma "quante risposte diverse esistono
 * e quale sta vincendo": il raggruppamento risponde a quella in un colpo
 * d'occhio, e il verdetto dentro ogni gruppo dice anche PERCHÉ.
 */

.tools-dnsp-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3, 0.75rem);
    margin-bottom: var(--s-5, 1.25rem);
}

.tools-dnsp-group {
    border: 1px solid var(--c-line, #e2e8f0);
    border-top-width: 3px;
    border-radius: var(--r-md, 10px);
    padding: var(--s-3, 0.75rem);
    background: var(--c-bg-card, #fff);
}

.tools-dnsp-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2, 0.5rem);
    flex-wrap: wrap;
}

.tools-dnsp-group-rank {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-mute, #64748b);
}

.tools-dnsp-group-count {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--c-ink-mute, #64748b);
    white-space: nowrap;
}

.tools-dnsp-group-values {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
}

.tools-dnsp-group-values li {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-ink, #0f172a);
    word-break: break-all;
    line-height: 1.5;
}

.tools-dnsp-group-verdict {
    margin-top: 0.5rem;
}

.tools-dnsp-group-why {
    font-size: 0.8125rem;
    color: var(--c-ink-soft, #334155);
    margin-top: 0.35rem;
}

.tools-dnsp-group-bar {
    height: 6px;
    border-radius: var(--r-pill, 9999px);
    background: var(--c-neutral-bg, #f1f5f9);
    overflow: hidden;
    margin-top: var(--s-3, 0.75rem);
}

.tools-dnsp-group-fill {
    display: block;
    height: 100%;
    border-radius: var(--r-pill, 9999px);
    background: var(--c-neutral-accent, #64748b);
}

.tools-dnsp-group-meta {
    font-size: 0.75rem;
    color: var(--c-ink-mute, #64748b);
    margin-top: 0.35rem;
}

.tools-dnsp-group--propagated { border-top-color: var(--c-success-accent, #15803d); }
.tools-dnsp-group--propagated .tools-dnsp-group-fill { background: var(--c-success-accent, #15803d); }
.tools-dnsp-group--geodns-variant,
.tools-dnsp-group--no-record { border-top-color: var(--c-info-accent, #2563eb); }
.tools-dnsp-group--geodns-variant .tools-dnsp-group-fill,
.tools-dnsp-group--no-record .tools-dnsp-group-fill { background: var(--c-info-accent, #2563eb); }
.tools-dnsp-group--cache-stale,
.tools-dnsp-group--no-reference { border-top-color: var(--c-warning-accent, #ca8a04); }
.tools-dnsp-group--cache-stale .tools-dnsp-group-fill,
.tools-dnsp-group--no-reference .tools-dnsp-group-fill { background: var(--c-warning-accent, #ca8a04); }
.tools-dnsp-group--nxdomain-split { border-top-color: var(--c-orange, #c25a00); }
.tools-dnsp-group--nxdomain-split .tools-dnsp-group-fill { background: var(--c-orange, #c25a00); }
.tools-dnsp-group--dnssec-fail,
.tools-dnsp-group--auth-inconsistent { border-top-color: var(--c-danger-accent, #b91c1c); }
.tools-dnsp-group--dnssec-fail .tools-dnsp-group-fill,
.tools-dnsp-group--auth-inconsistent .tools-dnsp-group-fill { background: var(--c-danger-accent, #b91c1c); }

/* ===== Dal tuo browser ===== */
/*
 * Riga a sé: è l'unica misura che riguarda CHI STA GUARDANDO, e mescolarla
 * agli altri punti la renderebbe invisibile proprio a chi serve.
 */

.tools-dnsp-you {
    border: 1px dashed var(--c-line-strong, #cbd5e1);
    border-radius: var(--r-md, 10px);
    padding: var(--s-3, 0.75rem);
    background: var(--c-bg, #f8fafc);
    margin-bottom: var(--s-5, 1.25rem);
}

.tools-dnsp-you-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-3, 0.75rem);
    flex-wrap: wrap;
}

.tools-dnsp-you-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-ink-mute, #64748b);
}

.tools-dnsp-you-who {
    font-size: 0.75rem;
    color: var(--c-ink-mute, #64748b);
}

.tools-dnsp-you-values {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-ink, #0f172a);
    margin-top: 0.35rem;
    word-break: break-all;
}

.tools-dnsp-you-note {
    font-size: 0.75rem;
    color: var(--c-ink-mute, #64748b);
    margin-top: 0.35rem;
}

/* ===== Vista per continente ===== */

.tools-dnsp-continents {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-5, 1.25rem);
}

.tools-dnsp-continent {
    display: flex;
    align-items: baseline;
    gap: var(--s-3, 0.75rem);
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--c-line, #e2e8f0);
    flex-wrap: wrap;
}

.tools-dnsp-continent:last-child {
    border-bottom: 0;
}

.tools-dnsp-continent-name {
    flex: 0 0 8rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-ink, #0f172a);
}

.tools-dnsp-continent-value {
    flex: 1 1 12rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    word-break: break-all;
}

.tools-dnsp-continent-count {
    font-size: 0.75rem;
    color: var(--c-ink-mute, #64748b);
    white-space: nowrap;
}

/* ===== Tabella viva (fase 1 del rendering) ===== */

.tools-dnsp-live-head {
    display: flex;
    align-items: center;
    gap: var(--s-3, 0.75rem);
    font-size: 0.875rem;
    color: var(--c-ink-mute, #64748b);
    padding-bottom: var(--s-2, 0.5rem);
}

.tools-dnsp-badge--pending {
    background: var(--c-neutral-bg, #f1f5f9);
    color: var(--c-ink-mute, #64748b);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ===== Colonne tecniche (solo registro Esperto) ===== */

.tools-dnsp-proto {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-ink-mute, #64748b);
}

.tools-dnsp-point {
    max-width: 16rem;
}

.tools-dnsp-point-label {
    font-size: 0.75rem;
    color: var(--c-ink-soft, #334155);
}

.tools-dnsp-point[title] .tools-dnsp-point-label {
    border-bottom: 1px dotted var(--c-line-strong, #cbd5e1);
    cursor: help;
}

.tools-dnsp-raw {
    max-height: 22rem;
    overflow: auto;
    background: var(--c-bg, #f8fafc);
    border: 1px solid var(--c-line, #e2e8f0);
    border-radius: var(--r-md, 10px);
    padding: var(--s-3, 0.75rem);
}

.tools-dnsp-raw code {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    white-space: pre;
}

.tools-dnsp-transparency > summary {
    color: var(--c-ink-mute, #64748b);
    font-weight: 400;
}

@media (min-width: 768px) {
    .tools-dnsp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tools-dnsp-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tools-dnsp-countdown-num { font-size: 2.25rem; }
    .tools-dnsp-group-values li { font-size: 1.125rem; }
}