html {
    /* Niente riscalamento automatico del testo su iOS */
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(180deg, #f5f5f7 0%, #eceef1 100%);
    min-height: 100vh;
    color: #1d1d1f;
    padding: 20px;
    -webkit-font-smoothing: antialiased;
    /* Regola generale: niente zoom da doppio tocco, i tap restano tap */
    touch-action: manipulation;
}

.container {
    max-width: 100%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 28px;
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
}

h1 {
    text-align: center;
    color: #1d1d1f;
    font-weight: 700;
    letter-spacing: -0.022em;
}

h2 {
    color: #1d1d1f;
    font-weight: 600;
    letter-spacing: -0.018em;
}

form {
    margin: 20px 0;
}

button {
    background-color: #0071e3;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 980px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

button:hover {
    background-color: #0077ed;
}

button:active {
    transform: scale(0.97);
}

/* ============================================================
   Regola generale per TUTTI i select (presenti e futuri):
   freccia custom con respiro a destra, stile macOS
   ============================================================ */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    /* !important: angoli a pillola e spazio per la freccia garantiti anche su
       select con regole più specifiche, presenti e future */
    border-radius: 980px !important;
    padding: 6px 12px;
    padding-right: 36px !important;
    font-family: inherit;
    font-size: 14px;
    color: #1d1d1f;
    cursor: pointer;
}

/* Bandierine delle lingue (immagini: visibili anche su Windows) */
.flag-icon {
    width: 18px;
    height: auto;
    border-radius: 2.5px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18);
    display: inline-block;
    vertical-align: -2px;
    flex-shrink: 0;
}

/* Wrapper che mostra la bandierina dentro un select */
.select-flag-wrap {
    position: relative;
}

.select-flag-wrap .select-flag {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}

.select-flag-wrap select {
    padding-left: 38px !important;
    width: 100%;
}

/* Pulsante secondario (grigio, stile macOS) */
.btn-secondary {
    background-color: rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
}

.btn-secondary:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Stili per i pulsanti di ordinamento */
.sort-btn {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 9px;
    margin-left: 6px;
    cursor: pointer;
    color: #666;
    border-radius: 980px;
    white-space: nowrap;
    vertical-align: top;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Pulsante di ricontrollo del semaforo (righe rosse): riverifica il redirect */
.recheck-online {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-left: 2px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

.recheck-online:hover {
    background: rgba(255, 59, 48, 0.18);
}

.recheck-online.checking svg {
    animation: recheck-spin 0.8s linear infinite;
}

@keyframes recheck-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sort-btn:hover {
    background-color: rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
}

.sort-btn.active-sort {
    background-color: #0071e3;
    color: white;
}

.sort-btn.active-sort:hover {
    background-color: #0077ed;
}

/* Stili per il pannello URL specifici */
.url-panel {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    transition: border-color 0.3s ease;
}

.url-panel:hover {
    border-color: #007BFF;
    background-color: #f0f8ff;
}

.url-panel label {
    font-weight: bold;
    color: #495057;
    margin-bottom: 8px;
    display: inline-block;
}

.url-panel textarea {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 10px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    background-color: #ffffff;
    margin-top: 8px;
    resize: vertical;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.url-panel textarea:focus {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;
}

.url-panel-help {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #e7f3ff;
    border-left: 4px solid #007BFF;
    border-radius: 4px;
}

.url-panel-help small {
    color: #0056b3;
    font-style: italic;
}

.main-language-panel {
    margin: 15px 0;
}

.main-language-panel > label {
    font-weight: bold;
    color: #495057;
    margin-bottom: 8px;
    display: inline-block;
}

.main-language-panel select {
    display: block;
    width: 100%;
    max-width: 300px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 14px;
    background-color: #ffffff;
    margin-top: 4px;
}

.main-language-panel select:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

.main-language-panel select:focus {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;
}

.main-language-help {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #e7f3ff;
    border-left: 4px solid #007BFF;
    border-radius: 4px;
}

.main-language-help small {
    color: #0056b3;
    font-style: italic;
}

.main-language-help code {
    background-color: #dbeafe;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

/* Ricerca per nome dominio nella lista */
.table-search {
    margin: 15px 0 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-wrap {
    position: relative;
    flex: 1;
    max-width: 360px;
}

/* Lente SVG dentro il campo: resta visibile anche scrivendo */
.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    color: #86868b;
    pointer-events: none; /* il click va sempre al campo */
}

.table-search input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 980px;
    padding: 0 38px 0 40px; /* a sinistra la lente, a destra la × di azzeramento */
    font-size: 14px;
    font-family: inherit;
    background-color: rgba(255, 255, 255, 0.75);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* × per azzerare la ricerca, dentro il campo */
.search-clear {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

.search-clear:hover {
    background-color: rgba(0, 0, 0, 0.35);
}

/* Indicatore delle scansioni in corso (cliccabile: filtra la lista) */
.processing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    background-color: rgba(0, 113, 227, 0.1);
    color: #0071e3;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.processing-indicator:hover {
    background-color: rgba(0, 113, 227, 0.18);
}

.processing-indicator.active {
    background-color: #0071e3;
    color: #fff;
}

.processing-indicator .mini-spinner {
    margin-left: 0;
}

.processing-indicator.active .mini-spinner {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}

/* Variante rossa: sitemap non attive (semaforo rosso) */
.offline-indicator {
    background-color: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
}

.offline-indicator:hover {
    background-color: rgba(255, 59, 48, 0.18);
}

.offline-indicator.active {
    background-color: #ff3b30;
    color: #fff;
}

.offline-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #ff3b30;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.18);
    flex-shrink: 0;
}

.offline-indicator.active .offline-dot {
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Gruppo azioni a destra: indicatore "in corso" + Pulisci, sempre affiancati */
.table-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.table-search .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
    white-space: nowrap;
}

.table-search input:focus {
    border-color: #0071e3;
    box-shadow: 0 0 0 3.5px rgba(0, 113, 227, 0.18);
    background-color: #fff;
    outline: none;
}

/* Contatore risultati dentro il campo, a sinistra della × di azzeramento */
#sitemap-search-count {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: #86868b;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

/* Cella lingue compatta (badge + pulsante modifica) */
.lang-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.lang-badges {
    font-size: 12px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

/* Lingue come pillole, stessa grafica delle chip del form */
.lang-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 980px;
    background-color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    color: #1d1d1f;
    white-space: nowrap;
}

/* Lingua principale: pillola piena blu */
strong.lang-badge {
    background-color: #0071e3;
    border-color: #0071e3;
    color: #fff;
    font-weight: 600;
}

.lang-badges .flag-icon {
    width: 15px;
}

.lang-badges .lang-none {
    color: #adb5bd;
}

/* Cella azioni di riga: matita + elimina affiancate */
.row-actions {
    white-space: nowrap;
}

.row-actions .edit-sitemap-button {
    margin-right: 6px;
}

.edit-sitemap-button,
.edit-languages-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.06);
    color: #6e6e73;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.edit-sitemap-button:hover,
.edit-languages-button:hover {
    background-color: #0071e3;
    color: #fff;
    transform: scale(1.1);
}

/* Modale modifica lingue (stesso stile in vetro del pannello laterale) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 30, 35, 0.28);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Respiro laterale: la modale non tocca mai i bordi dello schermo */
    padding: 20px;
    box-sizing: border-box;
}

.modal-overlay .modal {
    background: rgba(250, 250, 252, 0.88);
    backdrop-filter: blur(50px) saturate(190%);
    -webkit-backdrop-filter: blur(50px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 24px;
    padding: 26px 28px;
    width: 90%;
    max-width: 480px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 24px 70px rgba(0, 0, 0, 0.28);
}

.modal-overlay .modal h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d1d1f;
}

.modal-overlay .modal-domain {
    margin: 0 0 18px;
    color: #86868b;
    font-size: 13px;
    word-break: break-all;
}

.modal-overlay .modal-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 18px 0 7px;
}

.modal-overlay .modal-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.modal-overlay select#lang-modal-main {
    display: block;
    width: 100%;
    max-width: none;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 15px;
    color: #1d1d1f;
    background-color: rgba(255, 255, 255, 0.75);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.modal-overlay select#lang-modal-main:focus {
    outline: none;
    background-color: #fff;
    border-color: #0071e3;
    box-shadow: 0 0 0 3.5px rgba(0, 113, 227, 0.18);
}

.modal-overlay select#lang-modal-main:disabled {
    background-color: rgba(0, 0, 0, 0.05);
    color: #86868b;
    cursor: not-allowed;
}

.modal-overlay .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.modal-overlay .modal-cancel {
    background-color: rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
}

.modal-overlay .modal-cancel:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.modal-overlay .modal-save {
    background-color: #0071e3;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
}

.modal-overlay .modal-save:hover {
    background-color: #0077ed;
    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.4);
}

/* Badge variazione cliccabile (apre il dettaglio URL entrati/usciti) */
.trend-diff-btn {
    background: transparent;
    border: none;
    padding: 0;
    display: inline;
    cursor: pointer;
    border-radius: 6px;
    font-size: inherit;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: inherit;
    vertical-align: baseline;
}

.trend-diff-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

/* Modale dettaglio variazioni */
.modal-overlay .diff-modal {
    max-width: 560px;
}

.diff-content {
    max-height: 50vh;
    overflow-y: auto;
    margin-top: 6px;
}

.diff-title {
    font-size: 13px;
    font-weight: 700;
    margin: 12px 0 6px;
}

.diff-title-added {
    color: #34c759;
}

.diff-title-removed {
    color: #ff3b30;
}

.diff-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: "SF Mono", ui-monospace, Menlo, Monaco, monospace;
    font-size: 12px;
}

.diff-list li {
    padding: 3px 8px;
    border-radius: 6px;
    word-break: break-all;
}

.diff-added li {
    background-color: rgba(52, 199, 89, 0.1);
    margin-bottom: 2px;
}

.diff-removed li {
    background-color: rgba(255, 59, 48, 0.1);
    margin-bottom: 2px;
}

.diff-empty {
    color: #86868b;
    font-size: 14px;
}

/* Modale di conferma generica */
.modal-overlay .confirm-modal {
    max-width: 400px;
}

.confirm-modal-text {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #494949;
}

.modal-overlay .modal-danger {
    background-color: #ff3b30;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

.modal-overlay .modal-danger:hover {
    background-color: #ff453a;
    box-shadow: 0 6px 16px rgba(255, 59, 48, 0.4);
}

/* ============================================================
   Tabella delle sitemap (stile macOS)
   ============================================================ */
.table-wrap {
    margin-top: 16px;
    background-color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

table th, table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    vertical-align: middle;
}

table th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6e6e73;
    background-color: rgba(0, 0, 0, 0.03);
    white-space: nowrap;
    /* Stessa altezza di riga delle pillole di ordinamento: testo e pillola
       condividono la stessa linea da 20px e risultano centrati tra loro */
    line-height: 20px;
}

table td {
    font-size: 14px;
}

table tbody tr:last-child td {
    border-bottom: none;
}

table tbody tr:hover td {
    background-color: rgba(0, 0, 0, 0.035);
}

table td a {
    color: #0071e3;
    text-decoration: none;
    word-break: break-all;
}

table td a:hover {
    text-decoration: underline;
}

/* Riga in elaborazione: sfondo blu pulsante + skeleton nelle celle.
   L'altezza è fissata via JS sull'altezza delle righe reali; il fallback
   qui sotto copre il caso di tabella vuota. */
.row-processing {
    height: 52px;
}

.row-processing td {
    animation: row-pulse 1.6s ease-in-out infinite;
}

@keyframes row-pulse {
    0%, 100% { background-color: rgba(0, 113, 227, 0.06); }
    50% { background-color: rgba(0, 113, 227, 0.16); }
}

.skeleton {
    display: inline-block;
    width: 70%;
    min-width: 36px;
    max-width: 120px;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.07) 25%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.07) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s linear infinite;
}

@keyframes skeleton-shimmer {
    to { background-position: -200% 0; }
}

.mini-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid rgba(0, 113, 227, 0.25);
    border-top-color: #0071e3;
    border-radius: 50%;
    vertical-align: -2px;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* Contatore di avanzamento del crawl (pagine visitate finora) */
.progress-count {
    color: #0071e3;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Indicatori di variazione tra scansioni (colonna N.) --- */
/* Delta pagine + durata scansione con frecce su/giù e segno = (invariato).
   Tutti gli elementi della cella sono centrati sulla stessa linea. */
.count-cell {
    white-space: nowrap;
}

/* Tutto in linea sulla BASELINE del testo: così numero, delta e durata
   stanno alla stessa altezza di Data e Ora nelle altre celle */
.count-value,
.progress-count {
    display: inline;
}

.scan-meta {
    display: inline;
    margin-left: 7px;
    font-size: 11px;
    color: #86868b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scan-meta-sep {
    color: rgba(0, 0, 0, 0.18);
    margin: 0 3px;
}

.trend {
    display: inline;
    font-weight: 600;
    /* Delta grande come il numero principale della cella */
    font-size: 14px;
    white-space: nowrap;
}

.trend svg {
    /* Icone più grandi (sovrascrive width/height degli attributi SVG),
       sedute sulla linea del testo */
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 1px;
}

.trend-up {
    color: #34c759;
}

.trend-down {
    color: #ff3b30;
}

.trend-flat {
    color: #ff9500;
}

.scan-duration {
    white-space: nowrap;
}

/* Pulsante per fermare una scansione in corso */
.stop-job-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: 6px;
    border-radius: 50%;
    background-color: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
    flex-shrink: 0;
}

.stop-job-button:hover {
    background-color: #ff3b30;
    color: #fff;
}

.stop-job-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Badge di errore del job: tooltip con il messaggio completo */
.job-error-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    border-radius: 50%;
    background-color: #ff3b30;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: help;
    flex-shrink: 0;
}

/* Riga con sitemap online (servita dal nostro server) */
.row-online td {
    background-color: rgba(52, 199, 89, 0.14);
}

.row-online:hover td {
    background-color: rgba(52, 199, 89, 0.22);
}

/* Cella sitemap: solo icona che apre il file XML */
.sitemap-link-cell {
    text-align: center;
    white-space: nowrap;
}

.icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 113, 227, 0.1);
    color: #0071e3;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.icon-link:hover {
    background-color: #0071e3;
    color: #fff;
    text-decoration: none !important;
    transform: scale(1.1);
}

.sitemap-link-cell .icon-link + .icon-link {
    margin-left: 6px;
}

/* Variante grigia per il pulsante di copia */
.icon-link-copy {
    background-color: rgba(0, 0, 0, 0.06);
    color: #6e6e73;
}

.icon-link-copy:hover {
    background-color: #1d1d1f;
    color: #fff;
}

/* Barra di paginazione sotto la lista */
.pagination-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    font-size: 13px;
    color: #6e6e73;
}

.page-size-label {
    white-space: nowrap;
}

#page-size {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px;
}

#page-info {
    font-variant-numeric: tabular-nums;
}

.page-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

#page-num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
}

#page-prev,
#page-next {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

#page-prev:disabled,
#page-next:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

/* Celle data e ora dell'ultimo aggiornamento */
.date-cell {
    white-space: nowrap;
}

.time-cell {
    white-space: nowrap;
    color: #86868b;
    font-variant-numeric: tabular-nums;
}

/* Pulsanti rivelati dallo swipe (Elimina/Aggiorna): esistono solo nel layout mobile */
.swipe-delete,
.swipe-update {
    display: none;
}

/* Cella dominio: nome pulito + icona "apri sito" */
.domain-cell {
    white-space: nowrap;
}

/* Semaforo a sinistra del dominio, su OGNI layout:
   verde = sitemap pubblicata sul nostro server, rosso = no */
.domain-cell::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #ff3b30;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15);
    margin-right: 10px;
    vertical-align: middle;
    flex-shrink: 0;
}

.row-online .domain-cell::before {
    background-color: #34c759;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.2);
}

.domain-name {
    font-weight: 500;
}

.external-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -2px;
    margin-left: 7px;
    color: #86868b;
    transition: color 0.15s ease, transform 0.1s ease;
}

.external-link:hover {
    color: #0071e3;
    text-decoration: none !important;
    transform: scale(1.15);
}

/* Controlli dentro la tabella */
/* Il pulsante Aggiorna appare solo al passaggio sulla riga */
.manual-update-button {
    font-size: 13px;
    padding: 6px 14px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

table tbody tr:hover .manual-update-button,
.manual-update-button:focus-visible {
    opacity: 1;
}

.freq-cell {
    white-space: nowrap;
}

/* Indicatore grafico della frequenza di aggiornamento (barrette a segnale) */
.freq-indicator {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    margin-right: 10px;
    vertical-align: middle;
}

.freq-indicator i {
    width: 4px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.12);
    transition: background-color 0.2s ease;
}

.freq-indicator i:nth-child(1) { height: 5px; }
.freq-indicator i:nth-child(2) { height: 8px; }
.freq-indicator i:nth-child(3) { height: 12px; }
.freq-indicator i:nth-child(4) { height: 16px; }

/* Ogni giorno: 4 barrette verdi */
.freq-level-4 i { background-color: #34c759; }
/* Ogni settimana: 3 barrette blu */
.freq-level-3 i:nth-child(-n+3) { background-color: #0071e3; }
/* Ogni 15gg: 2 barrette arancioni */
.freq-level-2 i:nth-child(-n+2) { background-color: #ff9500; }
/* Una volta al mese: 1 barretta arancione */
.freq-level-1 i:nth-child(1) { background-color: #ff9500; }
/* Mai: tutte spente (grigie) */

.update-frequency-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin: 0;
    vertical-align: middle;
}

.update-frequency-form select {
    font-size: 13px;
    padding: 6px 10px;
    min-width: 150px;
}

.update-frequency-form button {
    font-size: 13px;
    padding: 6px 14px;
    min-width: 68px;
    background-color: rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
    white-space: nowrap;
}

.update-frequency-form button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.update-frequency-form button.is-success {
    background-color: #34c759;
    color: #fff;
}

/* Puntini animati dentro il pulsante durante la richiesta */
.btn-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 1em;
}

.btn-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: currentColor;
    animation: dot-bounce 0.9s infinite ease-in-out;
}

.btn-dots i:nth-child(2) { animation-delay: 0.15s; }
.btn-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes dot-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-4px); opacity: 1; }
}

/* Fase 1 eliminazione: la riga si tinge di rosso e trema (resta leggibile) */
.row-deleting {
    animation: row-shake 0.55s ease-in-out;
}

.row-deleting td {
    background-color: rgba(255, 59, 48, 0.16) !important;
    transition: background-color 0.25s ease;
}

@keyframes row-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

/* Fase 2: braci e fumo che cadono */
.ash-piece {
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 2px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    animation: ash-fall 1.2s ease-in forwards;
}

@keyframes ash-fall {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.3);
        opacity: 0;
    }
}

/* Riga in dissolvenza durante l'eliminazione */
.row-dissolving {
    opacity: 0;
    filter: blur(3px);
    transition: opacity 1.2s ease, filter 1.2s ease;
    pointer-events: none;
}

/* Coriandoli di successo */
.confetti-piece {
    position: fixed;
    width: 7px;
    height: 10px;
    border-radius: 2px;
    z-index: 10000;
    pointer-events: none;
    animation: confetti-pop 0.9s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes confetti-pop {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 45px)) rotate(var(--rot)) scale(0.8);
        opacity: 0;
    }
}

/* Pila dei toast: in basso a destra, sopra al FAB di aggiunta */
#popup-stack {
    position: fixed;
    right: 28px;
    bottom: 104px; /* sopra al FAB (58px + margini) */
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9500;
    max-width: min(420px, calc(100vw - 56px));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    animation: toast-in 0.25s ease;
}

.toast-success {
    background-color: rgba(52, 199, 89, 0.96);
}

.toast-error {
    background-color: rgba(255, 59, 48, 0.96);
}

.toast-text {
    flex: 1;
    word-break: break-word;
    max-height: 40vh;
    overflow-y: auto;
    user-select: text; /* gli errori si possono selezionare e copiare */
}

.toast-close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
}

.toast-close:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

.toast-hide {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delete-sitemap-button {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
    font-size: 17px;
    line-height: 1;
}

.delete-sitemap-button:hover {
    background-color: #ff3b30;
    color: #fff;
}

.checkbox-lingue {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contenitore-lingue {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 600px;
    padding: 20px 0;
}
  
/* Overlay di caricamento a tutto schermo con blur e messaggio */
#spinner {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(30, 30, 35, 0.35);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

#spinner .loading-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    background: rgba(250, 250, 252, 0.9);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 22px;
    padding: 30px 40px;
    max-width: min(85vw, 420px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 24px 70px rgba(0, 0, 0, 0.3);
}

#loading-message {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    text-align: center;
    word-break: break-word;
}

.spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(0, 113, 227, 0.18);
    border-top: 4px solid #0071e3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.legend {
    margin: 20px 0;
    padding: 14px 18px;
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    font-size: 13px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-online {
    background-color: #34c759;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.25);
}

.legend-redirect {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #6e6e73;
}

.legend-redirect code {
    background-color: rgba(0, 0, 0, 0.06);
    padding: 3px 8px;
    border-radius: 6px;
    font-family: "SF Mono", ui-monospace, Menlo, Monaco, monospace;
    font-size: 12px;
    color: #1d1d1f;
    word-break: break-all;
}

/* ============================================================
   FAB: pulsante circolare fisso in basso a destra
   (vetro liquido stile macOS)
   ============================================================ */
.fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 66px;
    height: 66px;
    padding: 0;
    border-radius: 50%;
    background: rgba(0, 113, 227, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 10px 30px rgba(0, 113, 227, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1500;
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.2s ease, box-shadow 0.2s ease;
}

.fab:hover {
    background: rgba(0, 119, 237, 0.95);
    transform: scale(1.07);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 14px 38px rgba(0, 113, 227, 0.45),
        0 3px 10px rgba(0, 0, 0, 0.18);
}

.fab:active {
    transform: scale(0.96);
}

/* Croce SVG: centratura geometrica perfetta, niente compensazioni ottiche */
.fab-icon {
    display: block;
}

/* ============================================================
   Pannello laterale "Aggiungi un nuovo sito"
   (foglio flottante in vetro, stile macOS)
   ============================================================ */
.panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 30, 35, 0.28);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1900;
}

.side-panel {
    position: fixed;
    top: 14px;
    right: 14px;
    bottom: 14px;
    width: 460px;
    max-width: calc(100% - 28px);
    background: rgba(250, 250, 252, 0.82);
    backdrop-filter: blur(50px) saturate(190%);
    -webkit-backdrop-filter: blur(50px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 26px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 24px 70px rgba(0, 0, 0, 0.28);
    transform: translateX(calc(100% + 28px));
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1950;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Apertura per singolo pannello (una pagina può ospitarne più d'uno) */
.panel-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.side-panel.is-open {
    transform: translateX(0);
}

body.panel-open {
    overflow: hidden;
}

.side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
}

.side-panel-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d1d1f;
}

.side-panel-close {
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
    color: #6e6e73;
    font-size: 18px;
    line-height: 1;
    border-radius: 50%;
}

.side-panel-close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #1d1d1f;
}

.side-panel-body {
    padding: 22px 24px 26px;
    overflow-y: auto;
    flex: 1;
}

.side-panel-body form {
    margin: 0;
}

/* Nel pannello i campi occupano tutta la larghezza */
.side-panel form input,
.side-panel form select,
.side-panel form textarea,
.side-panel form button {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.side-panel form input[type="checkbox"] {
    width: auto;
}

/* Etichette: piccole, decise, stile macOS */
.side-panel form > label,
.side-panel .main-language-panel > label,
.side-panel .url-panel label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 18px 0 7px;
}

.side-panel form > label:first-child {
    margin-top: 0;
}

/* Campi in vetro chiaro con angoli morbidi */
.side-panel form input[type="text"],
.side-panel form input[type="number"],
.side-panel form select,
.side-panel form textarea {
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 15px;
    color: #1d1d1f;
    margin: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.side-panel form input[type="text"]:focus,
.side-panel form input[type="number"]:focus,
.side-panel form select:focus,
.side-panel form textarea:focus {
    outline: none;
    background-color: #fff;
    border-color: #0071e3;
    box-shadow: 0 0 0 3.5px rgba(0, 113, 227, 0.18);
}

.side-panel form input::placeholder,
.side-panel form textarea::placeholder {
    color: #a1a1a6;
}

/* Campo numerico compatto con unità di misura accanto (es. "180 giorni") */
.side-panel form .days-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.side-panel form .days-field input[type="number"] {
    width: 96px;
    flex: 0 0 auto;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border-radius: 980px;
    padding: 9px 12px;
}

.side-panel form .days-suffix {
    font-size: 14px;
    color: #6e6e73;
}

.side-panel .main-language-panel {
    margin: 0;
}

/* Note d'aiuto: da box blu a didascalie discrete */
.side-panel .main-language-help,
.side-panel .url-panel-help {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 7px;
}

.side-panel .main-language-help small,
.side-panel .url-panel-help small {
    color: #86868b;
    font-style: normal;
    font-size: 12px;
    line-height: 1.45;
}

.side-panel .main-language-help code {
    background: rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
    padding: 1px 5px;
    border-radius: 5px;
    font-family: "SF Mono", ui-monospace, Menlo, Monaco, monospace;
    font-size: 11px;
}

/* Wrapper input con messaggio di stato inline (a destra, dentro il campo) */
.input-wrap {
    position: relative;
}

.input-wrap .input-status {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 980px;
    pointer-events: auto;
    display: none;
}

.input-wrap .input-status.is-error {
    display: inline-block;
    color: #fff;
    background-color: #ff3b30;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.35);
}

/* Toggle policy www: due opzioni a pillola */
/* Prefisso www: segmented control a tutta larghezza, con l'indicatore che
   scorre orizzontalmente sull'opzione scelta (nessun JS: basta :has) */
.www-toggle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding: 3px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 980px;
    isolation: isolate;
}

.www-slider {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: #0071e3;
    border-radius: 980px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.www-toggle:has(input[value="nowww"]:checked) .www-slider {
    transform: translateX(100%);
}

.www-option {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 980px;
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
    user-select: none;
    text-align: center;
    transition: color 0.2s ease;
}

.www-option:has(input:checked) {
    color: #fff;
}

.www-option small {
    font-size: 11px;
    color: #86868b;
    transition: color 0.2s ease;
}

.www-option:has(input:checked) small {
    color: rgba(255, 255, 255, 0.78);
}

.www-option:hover {
    border-color: rgba(0, 0, 0, 0.3);
}

.www-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.www-option:has(input:checked) {
    background: #0071e3;
    border-color: #0071e3;
    color: #fff;
}

.www-option:has(input:checked) small {
    color: rgba(255, 255, 255, 0.75);
}

/* Lingue aggiuntive: chip a pillola selezionabili */
.side-panel .contenitore-lingue {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: none;
    padding: 2px 0 0;
}

.side-panel .checkbox-lingue,
.side-panel .checkbox-pill,
.modal-overlay .modal-lang {
    position: relative;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 980px;
    background: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.side-panel .checkbox-lingue:hover,
.side-panel .checkbox-pill:hover,
.modal-overlay .modal-lang:hover {
    border-color: rgba(0, 0, 0, 0.3);
}

.side-panel .checkbox-lingue:active,
.side-panel .checkbox-pill:active,
.modal-overlay .modal-lang:active {
    transform: scale(0.95);
}

.side-panel .checkbox-lingue input,
.side-panel .checkbox-pill input,
.modal-overlay .modal-lang input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.side-panel .checkbox-lingue:has(input:checked),
.side-panel .checkbox-pill:has(input:checked),
.modal-overlay .modal-lang:has(input:checked) {
    background: #0071e3;
    border-color: #0071e3;
    color: #fff;
}

.side-panel .restrict-row {
    margin-top: 16px;
}

/* Opzioni di scansione: riga a tutta larghezza con interruttore a destra,
   più leggibile delle pillole compatte (si capisce cosa è attivo e cosa no) */
.side-panel .checkbox-pill.switch-pill {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px 9px 16px;
    background: rgba(255, 255, 255, 0.7);
}

.side-panel .checkbox-pill.switch-pill:active {
    transform: none; /* una riga larga non deve "rimbalzare" al tocco */
}

.side-panel .checkbox-pill.switch-pill:has(input:checked) {
    background: rgba(0, 113, 227, 0.08);
    border-color: rgba(0, 113, 227, 0.35);
    color: #1d1d1f;
}

.switch-pill-text {
    text-align: left;
    line-height: 1.35;
}

.switch-pill-track {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 25px;
    border-radius: 980px;
    background: rgba(120, 120, 128, 0.3);
    transition: background-color 0.22s ease;
}

.switch-pill-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}

.switch-pill:has(input:checked) .switch-pill-track {
    background: #34c759;
}

.switch-pill:has(input:checked) .switch-pill-track::after {
    transform: translateX(17px);
}

/* Pannello URL specifici: sezione leggera, niente riquadro tratteggiato */
.side-panel .url-panel {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.side-panel .url-panel:hover {
    background: none;
    border-color: transparent;
}

.side-panel .url-panel textarea {
    font-family: "SF Mono", ui-monospace, Menlo, Monaco, monospace;
    font-size: 12.5px;
}

/* CTA principale */
.side-panel .submit-sitemap {
    margin-top: 26px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 980px;
    background: #0071e3;
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.35);
}

.side-panel .submit-sitemap:hover {
    background: #0077ed;
    box-shadow: 0 8px 22px rgba(0, 113, 227, 0.45);
}

/* Salva impostazioni senza scansione: verde, più discreto del CTA blu,
   largo quanto serve al testo e centrato */
.side-panel .save-settings {
    display: block;
    /* fit-content, non auto: un blocco con width:auto riempie comunque la riga */
    width: fit-content;
    margin: 10px auto 0;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 980px;
    background-color: #34c759;
}

.side-panel .save-settings:hover {
    background-color: #2eb350;
}

@media (max-width: 560px) {
    .side-panel {
        top: 8px;
        right: 8px;
        bottom: 8px;
        max-width: calc(100% - 16px);
        border-radius: 22px;
    }

    .fab {
        bottom: 20px;
        right: 20px;
        width: 68px;
        height: 68px;
    }
}

/* ============================================================
   Autenticazione: pagina di login, topbar e gestione utenti
   ============================================================ */
.topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 4px;
}

.topbar-user {
    color: #86868b;
    font-size: 13px;
    margin-right: auto;
}

/* Elemento ancorato a sinistra della topbar ("← Sitemap", icona utenti),
   tutto il resto a destra */
.topbar-back,
.topbar-left {
    margin-right: auto;
}

/* Nome utente: in grassetto, a sinistra dell'icona Esci */
.topbar-name {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
}

/* Icone tonde della topbar (account, esci) */
.topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.topbar-icon:hover {
    background-color: #0071e3;
    color: #fff;
    transform: scale(1.08);
}

.topbar-btn {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 980px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: #1d1d1f;
}

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: rgba(250, 250, 252, 0.85);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 26px;
    padding: 34px 32px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 24px 70px rgba(0, 0, 0, 0.18);
}

.auth-title {
    font-size: 22px;
    margin: 0 0 6px;
    text-align: center;
}

.auth-subtitle {
    font-size: 17px;
    margin: 18px 0 10px;
    text-align: center;
}

.auth-card form label,
.user-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 14px 0 6px;
}

.auth-card form input[type="text"],
.auth-card form input[type="email"],
.auth-card form input[type="password"],
.user-form input[type="text"],
.user-form input[type="email"],
.user-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 15px;
    color: #1d1d1f;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-card form input:focus,
.user-form input:focus {
    outline: none;
    border-color: #0071e3;
    box-shadow: 0 0 0 3.5px rgba(0, 113, 227, 0.18);
}

.auth-hint {
    font-size: 12px;
    color: #86868b;
    line-height: 1.45;
    margin: 8px 0 0;
}

/* Nella card di accesso tutti i testi descrittivi sono centrati */
.auth-card .auth-hint {
    text-align: center;
}

.auth-hint code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 5px;
    border-radius: 5px;
    font-family: "SF Mono", ui-monospace, Menlo, Monaco, monospace;
    font-size: 11px;
}

.auth-submit {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 980px;
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.3);
}

.auth-links {
    text-align: center;
    font-size: 13px;
    margin-top: 16px;
}

.auth-links a {
    color: #0071e3;
    text-decoration: none;
}

.auth-msg {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    margin: 12px 0;
    text-align: center;
}

.auth-error {
    background-color: rgba(255, 59, 48, 0.12);
    color: #c22e24;
}

.auth-info {
    background-color: rgba(0, 113, 227, 0.1);
    color: #0057ad;
}

/* Checkbox "browser sicuro per 60 giorni" nel passaggio 2FA */
/* Specificità alta: deve battere ".auth-card form label" (display:block),
   che altrimenti annulla il flex e lascia la spunta a sinistra */
.auth-card form label.trust-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
}

.trust-check input {
    width: 16px !important;
    accent-color: #0071e3;
}

/* "Non hai il telefono?" a capo proprio su mobile */
@media (max-width: 768px) {
    .auth-links-lead {
        display: block;
        margin-bottom: 3px;
    }
}

/* --- Pannello "Il mio account" --- */
.account-section {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 14px;
}

.account-section h2 {
    margin-top: 0;
    font-size: 17px;
}

.account-section h3 {
    font-size: 14px;
    margin: 18px 0 6px;
}

.method-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.method-row:last-of-type {
    border-bottom: none;
}

.method-info {
    flex: 1;
    min-width: 0;
}

.method-info small {
    display: block;
    color: #86868b;
    font-size: 12px;
    margin-top: 2px;
    line-height: 1.4;
}

.state-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 980px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.state-on {
    background: rgba(52, 199, 89, 0.15);
    color: #1d8a41;
}

.state-off {
    background: rgba(0, 0, 0, 0.06);
    color: #6e6e73;
}

.method-btn {
    font-size: 12px;
    padding: 6px 14px;
    white-space: nowrap;
}

.qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 22px;
    margin: 14px 0;
    text-align: center;
}

.qr-box img {
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
}

.qr-divider {
    font-size: 12px;
    color: #a1a1a6;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.totp-secret {
    display: inline-block;
    font-family: "SF Mono", ui-monospace, Menlo, Monaco, monospace;
    font-size: 15px;
    letter-spacing: 2px;
    background: rgba(0, 0, 0, 0.06);
    padding: 8px 14px;
    border-radius: 10px;
    word-break: break-all;
    user-select: all;
}

.totp-confirm input {
    width: 160px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 4px;
}

.account-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.account-actions .auth-submit {
    width: auto;
    margin-top: 0;
    padding: 10px 22px;
}

/* Righe dei browser fidati (dettaglio per dispositivo) */
.device-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.device-row:last-of-type {
    border-bottom: none;
}

.device-info {
    flex: 1;
    min-width: 0;
}

.device-info strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #1d1d1f;
}

.device-info small {
    display: block;
    color: #86868b;
    font-size: 11px;
    margin-top: 3px;
    line-height: 1.45;
}

/* I dati (dopo l'etichetta) in evidenza */
.device-info small b {
    color: #1d1d1f;
    font-weight: 600;
}

.device-info .device-ua {
    margin-top: 7px;
}

.device-ua {
    font-family: "SF Mono", ui-monospace, Menlo, Monaco, monospace;
    font-size: 10px !important;
    color: #a1a1a6 !important;
    word-break: break-all;
}

.device-revoke {
    background-color: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
    flex-shrink: 0;
}

.device-revoke:hover {
    background-color: #ff3b30;
    color: #fff;
}

.panel-logout {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.panel-logout a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border-radius: 980px;
    background-color: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.panel-logout a:hover {
    background-color: #ff3b30;
    color: #fff;
}

.inline-form {
    display: inline;
    margin: 0;
}

/* Codice 2FA: 6 caselle separate */
.otp-inputs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 18px 0 4px;
}

.otp-box {
    width: 46px !important;
    height: 54px;
    text-align: center;
    font-size: 22px !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0 !important;
}

/* Gestione utenti */
.user-form {
    max-width: 480px;
}

.pw-mode {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pw-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 980px;
    background: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.pw-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pw-pill:has(input:checked) {
    background: #0071e3;
    border-color: #0071e3;
    color: #fff;
}

.user-cancel {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 980px;
    margin-left: 8px;
    font-size: 14px;
    text-decoration: none;
    color: #1d1d1f;
}

.inline-form {
    display: inline;
    margin: 0;
}

.user-actions {
    white-space: nowrap;
}

.user-btn {
    font-size: 12px;
    padding: 5px 12px;
    margin-right: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.user-delete {
    background-color: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
}

.user-delete:hover {
    background-color: #ff3b30;
    color: #fff;
}

.pw-missing {
    color: #ff9500;
    font-weight: 600;
}

/* ============================================================
   Mobile: layout a card, niente scroll laterale
   ============================================================ */
@media (max-width: 768px) {
    body {
        padding: 0;
    }

    /* Regola generale anti-zoom iOS: Safari zooma i campi con font < 16px
       al focus, quindi su mobile TUTTI i campi vanno ad almeno 16px */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .container {
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 14px 12px 90px; /* spazio in fondo per il FAB */
        overflow-x: visible;
    }

    /* Titolo e legenda: superflui su smartphone */
    h1,
    .legend {
        display: none;
    }

    h2 {
        font-size: 18px;
        margin: 4px 0 12px;
    }

    .table-search {
        flex-wrap: wrap;
    }

    /* Ricerca a piena larghezza (bordo destro allineato alle azioni sotto),
       azioni sulla riga successiva allineate a destra */
    .search-wrap {
        flex: 1 1 100%;
        max-width: none;
    }


    /* La tabella diventa una lista di card */
    .table-wrap {
        border: none;
        border-radius: 0;
        background: transparent;
        overflow: visible;
    }

    table thead {
        display: none;
    }

    table, table tbody {
        display: block;
    }

    table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 16px;
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        /* Swipe orizzontale: la card scorre a sinistra (Elimina) o a destra
           (Aggiorna), lo scroll verticale resta al browser */
        position: relative;
        touch-action: pan-y;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); /* richiusura elastica */
    }

    /* Durante il trascinamento la card segue il dito, senza animazioni */
    tr.swiping,
    tr.swiping .swipe-delete,
    tr.swiping .swipe-update {
        transition: none;
    }

    /* Niente icone matita/× su mobile: tocco = modifica, swipe = elimina/aggiorna */
    .row-actions {
        display: none;
    }

    /* Pulsanti rivelati dallo swipe: a riposo hanno larghezza ZERO (quindi
       nessuna striscia colorata sul bordo della card); durante il gesto il
       JS li allarga esattamente quanto lo spazio scoperto dalla card,
       così seguono il dito come su iOS */
    .swipe-delete,
    .swipe-update {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 0;
        padding: 0;
        overflow: hidden;
        white-space: nowrap;
        border-radius: 16px;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.15s ease;
    }

    /* Elimina: rosso, appare oltre il bordo destro della card.
       Il gap di 10px replica lo spazio tra le card */
    .swipe-delete {
        left: calc(100% + 10px);
        background-color: #ff3b30;
    }

    /* Aggiorna: blu, appare oltre il bordo sinistro della card */
    .swipe-update {
        right: calc(100% + 10px);
        background-color: #0071e3;
    }

    /* Oltre metà card: al rilascio l'azione scatta, il colore lo anticipa */
    tr.swipe-commit .swipe-delete {
        background-color: #d70015;
    }

    tr.swipe-commit .swipe-update {
        background-color: #005bb8;
    }

    /* Le card che scorrono non devono creare scroll orizzontale di pagina */
    .container {
        overflow-x: hidden;
    }

    table td {
        display: flex;
        align-items: center;
        border: none;
        padding: 0;
        background-color: transparent;
    }

    /* Le colorazioni di stato passano dalla cella alla card */
    table tbody tr:hover td,
    .row-online td,
    .row-online:hover td {
        background-color: transparent;
    }

    .row-online {
        background: rgba(52, 199, 89, 0.14);
    }

    .row-processing td {
        animation: none;
    }

    .row-processing {
        animation: row-pulse 1.6s ease-in-out infinite;
        height: auto;
    }

    /* ------------------------------------------------------------
       Struttura della card (ordine verticale):
       Riga 1: semaforo + dominio + link esterno | icone sitemap
               (+ spinner/stop o badge errore, se presenti)
       Riga 2: blocco dati statistici (data · ora · N. URL)
       Riga 3: lingue
       Riga 4: frequenza (indicatore + select + Applica)
       ------------------------------------------------------------ */

    /* Riga 1: il dominio cresce e riempie la riga, le icone chiudono a destra */
    .domain-cell {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
        white-space: normal;
    }

    /* Dominio leggermente più grande: è il titolo della card */
    .domain-name {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.01em;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Il gap della cella sostituisce il margine dell'icona */
    .domain-cell .external-link {
        margin-left: 0;
    }

    /* Spinner + stop (o badge errore) spinti in fondo a destra della riga 1 */
    .domain-cell .mini-spinner,
    .domain-cell .job-error-badge {
        margin-left: auto;
    }

    .domain-cell .stop-job-button {
        margin-left: 0;
    }

    /* Icone sitemap (apri/copia) in coda alla riga 1 */
    .sitemap-link-cell {
        order: 2;
        gap: 6px;
        flex-shrink: 0;
    }

    /* Riga 2: blocco dati statistici compatto con separatori verticali */
    .date-cell,
    .time-cell,
    .count-cell {
        font-size: 12.5px;
        color: #6e6e73;
        font-variant-numeric: tabular-nums;
    }

    .date-cell {
        order: 3;
    }

    .time-cell {
        order: 4;
    }

    .count-cell {
        order: 5;
        flex: 1 1 auto; /* riempie la riga: il blocco dati resta da solo */
        flex-wrap: wrap; /* gli indicatori di variazione vanno a capo se serve */
        white-space: normal;
    }

    /* Filetti verticali tra data, ora e conteggio URL */
    .time-cell::before,
    .count-cell::before {
        content: "";
        width: 1px;
        height: 11px;
        background-color: rgba(0, 0, 0, 0.15);
        margin-right: 10px;
        flex-shrink: 0;
    }

    /* Il suffisso "URL" segue solo il numero, non gli indicatori di variazione */
    .count-cell .count-value::after,
    .count-cell .progress-count::after {
        content: "\00a0URL";
    }

    /* Riga 3: lingue a piena larghezza */
    td:has(.lang-cell) {
        order: 6;
        flex-basis: 100%;
    }

    .lang-cell {
        white-space: normal;
        flex-wrap: wrap;
    }

    /* Riga 4: indicatore frequenza + select + Applica */
    .freq-cell {
        order: 7;
        flex: 1 1 100%;
    }

    .update-frequency-form {
        flex: 1;
    }

    .update-frequency-form select {
        min-width: 0;
        flex: 1;
    }

    /* Il pulsante "Aggiorna" testuale è sostituito dallo swipe a destra
       (il pulsante resta nel DOM: lo swipe ne innesca il click) */
    td:has(.manual-update-button) {
        display: none;
    }
}
/* ============================================================
   Liste URL personalizzate (da includere / da escludere)
   ============================================================ */

/* I due pulsanti nel pannello: riga piena, icona, etichetta e contatore */
.side-panel .url-lists {
    display: grid;
    gap: 8px;
    width: 100%;
}

.side-panel form .url-list-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 12px 11px 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 13.5px;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.side-panel form .url-list-btn:hover {
    border-color: rgba(0, 0, 0, 0.3);
    background: #fff;
}

.url-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.url-list-include .url-list-icon {
    background: rgba(52, 199, 89, 0.14);
    color: #248a3d;
}

.url-list-exclude .url-list-icon {
    background: rgba(255, 59, 48, 0.12);
    color: #d70015;
}

.url-list-text {
    flex: 1 1 auto;
    min-width: 0;
}

.url-list-count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 2px 9px;
    border-radius: 980px;
    background: #0071e3;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.url-list-count.is-zero {
    background: rgba(0, 0, 0, 0.08);
    color: #86868b;
}

/* La modale del gestore: quasi a tutto schermo, la lista scorre da sola */
/* Quasi a tutto schermo: con centinaia di URL lo spazio serve tutto */
.urls-overlay {
    padding: 2.5vh 2vw;
}

.urls-overlay .urls-modal {
    width: 100%;
    max-width: 1500px;
    height: 95vh;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    overflow: hidden;
}

.urls-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.urls-head-text {
    flex: 1 1 auto;
    min-width: 0;
}

.urls-overlay .urls-modal h3 {
    margin: 0 0 2px;
    text-align: left;
}

.urls-overlay .urls-modal .modal-domain {
    margin: 0;
    text-align: left;
    font-size: 13px;
    color: #86868b;
    overflow-wrap: anywhere;
}

.urls-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    /* Obbligatorio: la regola globale button{padding:8px 16px} lascerebbe
       zero spazio all'icona dentro un pulsante circolare */
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.urls-close:hover {
    background: rgba(0, 0, 0, 0.12);
}

/* Inserimento in blocco */
.urls-add {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 22px;
}

.urls-add textarea {
    flex: 1 1 auto;
    min-width: 0;
    resize: vertical;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #1d1d1f;
}

.urls-add textarea:focus {
    outline: none;
    background: #fff;
    border-color: #0071e3;
    box-shadow: 0 0 0 3.5px rgba(0, 113, 227, 0.18);
}

.urls-add-btn {
    flex: 0 0 auto;
    padding: 10px 20px;
    border: none;
    border-radius: 980px;
    background: #0071e3;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.urls-add-btn:hover {
    background: #0077ed;
}

/* Filtro e riepilogo */
/* Nota sotto il campo di inserimento: spiega cosa sa fare l'estrattore */
.urls-hint {
    margin: -6px 22px 10px;
    font-size: 12px;
    color: #86868b;
    line-height: 1.45;
}

.urls-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px 12px;
}

.urls-toolbar input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 14px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 980px;
    background: rgba(255, 255, 255, 0.8);
    font-family: inherit;
    font-size: 13.5px;
    color: #1d1d1f;
}

.urls-toolbar input[type="search"]:focus {
    outline: none;
    background: #fff;
    border-color: #0071e3;
    box-shadow: 0 0 0 3.5px rgba(0, 113, 227, 0.18);
}

.urls-summary {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: #86868b;
    font-variant-numeric: tabular-nums;
}

/* Elenco scorrevole */
.urls-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 22px 20px;
}

.urls-empty {
    margin: 22px 0;
    text-align: center;
    color: #86868b;
    font-size: 14px;
}

.url-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.url-row:last-child {
    border-bottom: none;
}

.url-main {
    flex: 1 1 auto;
    min-width: 0;
}

.url-text {
    font-size: 13.5px;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.url-text a {
    color: #1d1d1f;
    text-decoration: none;
    transition: color 0.15s ease;
}

.url-text a:hover {
    color: #0071e3;
    text-decoration: underline;
}

.url-text a:focus-visible {
    outline: 2px solid #0071e3;
    outline-offset: 2px;
    border-radius: 4px;
}

.url-meta {
    font-size: 11.5px;
    color: #86868b;
    margin-top: 2px;
}

.url-row.is-off .url-text a {
    color: #86868b;
    text-decoration: line-through;
}

.url-row.is-off .url-text a:hover {
    color: #0071e3;
}

/* Interruttore della riga (stesso linguaggio delle opzioni del pannello) */
.url-switch {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 25px;
    cursor: pointer;
}

.url-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.url-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 980px;
    background: rgba(120, 120, 128, 0.3);
    transition: background-color 0.22s ease;
}

.url-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}

.url-switch input:checked ~ .url-switch-track {
    background: #34c759;
}

.url-switch input:checked ~ .url-switch-track::after {
    transform: translateX(17px);
}

.url-delete {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0; /* vedi .urls-close: senza questo l'icona sparisce */
    border: none;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.url-delete:hover {
    background: rgba(255, 59, 48, 0.2);
}

.urls-close svg,
.url-delete svg {
    flex: 0 0 auto;
    display: block;
}

@media (max-width: 768px) {
    .urls-overlay .urls-modal {
        height: 90vh;
        width: 100%;
    }

    .urls-add {
        flex-direction: column;
        align-items: stretch;
    }

    .urls-add-btn {
        width: 100%;
    }

    /* Anti-zoom su iOS: i campi devono restare a 16px */
    .urls-add textarea,
    .urls-toolbar input[type="search"] {
        font-size: 16px !important;
    }
}