:root {
    /* ── Base ───────────────────────────── */
    --si-bg: #f8fafc;
    --si-card: #ffffff;
    --si-border: #e5e7eb;
    --si-text: #111827;
    --si-muted: #6b7280;
    --si-primary: #2563eb;
    --si-success: #16a34a;
    --si-warning: #f59e0b;
    --si-danger: #dc2626;
    --si-radius: 18px;

    /* ── Text hierarchy (Slate) ─────────── */
    --si-t1: #0f172a;
    --si-t2: #334155;
    --si-t3: #64748b;
    --si-t4: #94a3b8;

    /* ── Surfaces ───────────────────────── */
    --si-surface-alt: #fafaf9;
    --si-border-ui: #e6ebf2;

    /* ── Green (success / done) ─────────── */
    --si-green:        #15803d;
    --si-green-bg:     #f0fdf4;
    --si-green-border: #bbf7d0;

    /* ── Blue (accent / action) ─────────── */
    --si-accent:        #185fa5;
    --si-accent-bg:     #eff6ff;
    --si-accent-border: #bfdbfe;
    --si-accent-light:  #dbeafe;
    --si-accent-dark:   #1d4ed8;

    /* ── Orange (scala verb) ────────────── */
    --si-orange-bg: #ffedd5;
    --si-orange:    #c2410c;

    /* ════════════════════════════════════════════════════════════════
       CANON — set token canonico (UI-1.3 Token Foundation, guidato da /sites)
       Additivo e pixel-identico: i nomi qui sotto sono la sorgente di verità;
       i vecchi (--si-t1..t4, --si-card, --si-accent #185fa5) restano come alias
       deprecati finché la migrazione non li sostituisce. Regola: aggiungere
       token qui, mai hex nei componenti. (→ resources/ui/tokens/ a Platform-0.)
       Decisioni A/B/C: t1..t4→text-1..4 · un token per ruolo · rosso #dc2626
       solido + #ef4444 accent.
       ════════════════════════════════════════════════════════════════ */

    /* Testo — gerarchia canonica (supersede --si-t1..t4, stessi valori) */
    --si-text-1: #0f172a;   /* titoli / testo più scuro */
    --si-text-2: #334155;
    --si-text-3: #64748b;   /* muted (supersede --si-muted) */
    --si-text-4: #94a3b8;   /* faint */

    /* Superfici (--si-surface supersede --si-card) */
    --si-surface:      #ffffff;
    --si-surface-dark: #0a0f1a;   /* Focus layer / Mission Control */

    /* Bordi */
    --si-border-strong: #cbd5e1;

    /* Blu accent canonico = --si-primary (#2563eb). --si-accent (#185fa5) deprecato. */

    /* Distruttivo — famiglia (domanda reale di /sites) */
    --si-danger-accent: #ef4444;   /* hover / icone */
    --si-danger-bg:     #fef2f2;
    --si-danger-border: #fecaca;
    --si-danger-text:   #7f1d1d;

    /* ── Typography scale (DS-FONT, foundation-first) ──────────────────
       px-based (non rem): AdminLTE/Bootstrap non hanno un root font-size
       nostro su cui ancorare in modo affidabile — px evita di ereditare
       una base inattesa. Bump sistematico +1px sui gradini piccoli/medi.
       Le taglie display (hero numbers 18px+) non sono toccate: il problema
       è la leggibilità del testo piccolo, non i numeri grandi.

       Tuning 2 (2026-07-02): audit su verifica utente id 118 — --si-fs-2xs
       (21 consumer: section-label, sidebar-label, timeline-date, projection-
       note...) risultava ancora troppo piccolo. Vincolo: solo 4 interi liberi
       sotto --si-fs-base (non contestato) → impossibile bumpare 2xs/3xs senza
       toccare xs/sm senza collidere. Risolto con un secondo shift UNIFORME di
       +1px sull'intera scala (stesso playbook del bump 1): niente collisioni,
       nessun consumer da toccare — solo questi 8 valori. */
    --si-fs-3xs:  11px;   /* era 10px (bump 1: 9px) — micro label */
    --si-fs-2xs:  12px;   /* era 11px (bump 1: 10px) — badge/meta minimi */
    --si-fs-xs:   13px;   /* era 12px (bump 1: 11px) — label secondarie */
    --si-fs-sm:   14px;   /* era 13px (bump 1: 12px) — testo compatto */
    --si-fs-base: 15px;   /* era 14px (bump 1: 13px) — body text, il gradino più usato */
    --si-fs-md:   16px;   /* era 15px (bump 1: 14px) */
    --si-fs-lg:   17px;   /* era 16px (bump 1: 15px) */
    --si-fs-xl:   18px;   /* era 17px (bump 1: 16px) */
}

.content-wrapper {
    background: var(--si-bg);
}

/* Mission Control — dark takeover completo */
body:has(.mc-page),
body:has(.mc-page) .wrapper {
    background: #0A0F1A !important;
}
body:has(.mc-page) .content-wrapper {
    background: #0A0F1A !important;
    padding-top: 0 !important;
    /* margin-left lasciato intatto — AdminLTE lo usa per la sidebar */
}
body:has(.mc-page) .content-header {
    display: none !important;
}
body:has(.mc-page) .content {
    padding: 0 !important;
}
body:has(.mc-page) .container,
body:has(.mc-page) .container-fluid,
body:has(.mc-page) .container-xl,
body:has(.mc-page) .container-lg {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* si-dark-page — dark takeover scoped (mirror del blocco mc-page sopra).
   Sostituisce il vecchio body.si-dark globale (Cluster A follow-up, post 8681ee4):
   senza questo, .content-wrapper mostrava il proprio sfondo chiaro nel padding-top
   20px prima che il wrapper .si-dark-page scuro iniziasse — la "riga bianca". */
body:has(.si-dark-page),
body:has(.si-dark-page) .wrapper {
    background: var(--mc-bg, #0b1017) !important;
}
body:has(.si-dark-page) .content-wrapper {
    background: var(--mc-bg, #0b1017) !important;
    padding-top: 0 !important;
}

.si-hero {
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    color: #fff;
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.si-hero__eyebrow {
    color: var(--mc-t2);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}

.si-hero__title {
    font-size: 30px;
    font-weight: 800;
    margin: 0;
}

.si-hero__subtitle {
    color: var(--mc-t2);
    font-size: 14px;
    margin-top: 6px;
    margin-bottom: 0;
}

/* .si-card inside Focus Layer (dark bg) — invert surface */
.si-dark .si-card {
    background: var(--mc-surface, #111827);
    border-color: var(--mc-border, #1E293B);
    box-shadow: none;
}

/* Bootstrap/AdminLTE primitivi grezzi (alert, table) dentro Focus Layer —
   nessuna pagina .si-dark li usava prima di Recommendations (allineamento
   token 2026-07-04): senza queste regole restano chiari su sfondo scuro. */
.si-dark .alert-success {
    background: var(--c-accent-bg, rgba(74,222,128,.08));
    border-color: var(--c-accent-border, rgba(74,222,128,.2));
    color: var(--c-accent, #4ade80);
}
.si-dark .alert-danger {
    background: rgba(248,113,113,.08);
    border-color: rgba(248,113,113,.2);
    color: var(--c-red, #f87171);
}
.si-dark table { color: var(--c-text2, #CBD5E1); }
.si-dark .table-hover tbody tr:hover {
    background: var(--c-surface2, #1a2332);
}

/* .si-card duplicato — regola definitiva è card.css:1 (caricato sempre dopo
   questo file, stessa specificità: card.css vince sempre su ogni pagina che
   carica entrambi i CSS). Verificato: nessuna pagina usa .si-card caricando
   SOLO seo-intelligence.css senza card.css — dead code, rimosso su richiesta PO. */
.si-card {
}

.si-card__body {
    padding: 24px;
}

.si-metric__label {
    color: var(--si-muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.si-metric__value {
    color: var(--si-text);
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
}

.si-metric__value--danger {
    color: var(--si-danger);
}

.si-metric__value--warning {
    color: var(--si-warning);
}

.si-metric__value--success {
    color: var(--si-success);
}

.si-section{
    margin-top:48px;
}

.si-section:first-child{
    margin-top:0;
}

.si-section-header{

    margin-bottom:32px;

}

.si-section-header h2{

    margin:0;

}

.si-section-header p{

    margin:6px 0 0;

    color:#64748b;

    font-size:14px;

}

.si-section-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0px;
    color:#111827;
}

.si-section-subtitle{

    margin-top:4px;

    font-size:13px;

    color:#6b7280;

}

.si-health{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.si-health__content{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.si-health__score{

    font-size:78px;

    font-weight:900;

    line-height:1;

    letter-spacing:-3px;

    color:var(--si-text);

}

.si-health__label{

    font-size:20px;

    font-weight:600;

    color:var(--si-text);

}

.si-health__description{

    color:var(--si-muted);

    font-size:14px;

}

.si-health__progress{

    margin-top:6px;

}

.si-health__bar{

    height:16px;

    background:#edf2f7;

    border-radius:999px;

    overflow:hidden;

}

.si-health__fill{

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #3b82f6
    );

    transition:width .4s ease;

}

.si-attention-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    background: #fff;
    transition: .18s;
    cursor: pointer;
}

.si-attention-item:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 30px rgba(15, 23, 42, .05);
}

.si-attention-item__label {
    color: var(--si-muted);
    font-size: 13px;
}

.si-attention-item__value {
    font-size: 28px;
    font-weight: 800;
}

.si-table {
    width: 100%;
}

.si-table th {
    color: var(--si-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-top: 0;
    border-bottom: 1px solid var(--si-border);
    padding: 16px;
}

.si-table td {
    vertical-align: middle;
    border-top: 1px solid var(--si-border);
    padding: 18px 16px;
}

.si-table tr:hover {
    background: #f9fafb;
}

.si-health-mini {
    min-width: 130px;
}

.si-health-mini__bar {
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 6px;
}

.si-health-mini__fill {
    height: 100%;
    background: var(--si-primary);
}

.si-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 700;
    margin-right: 4px;
}

.si-badge--danger {
    color: #991b1b;
    background: #fee2e2;
}

.si-badge--warning {
    color: #92400e;
    background: #fef3c7;
}

.si-badge--secondary {
    color: #374151;
    background: #e5e7eb;
}

.si-badge--success {
    color: #166534;
    background: #dcfce7;
}

/* Onboarding — "Passo X di 3", coerente tra MC-senza-workspace,
   MC-senza-siti, popup primo-sync (contesti sia dark che light: tinta
   auto-contenuta, non dipende dallo sfondo del contenitore). */
.si-onboarding-step {
    display: inline-block;
    font-size: var(--si-fs-2xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #3b82f6;
    background: rgba(59,130,246,.14);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 10px;
}

/* Timeline — marker di gravità sulla singola transizione (finding.severity
   / opportunity.impact). "Basso" resta muto di proposito: la Timeline è
   movimento-che-conta, non un tabellone — solo alto/critico deve
   catturare l'occhio. Stessa palette di timeline/index.blade.php
   (tl-dot--*), qui condivisa per riuso su sites/workspace e
   decision-workspace (che non caricano quella pagina). */
.si-tl-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.si-tl-dot--critical { background: #ef4444; }
.si-tl-dot--high     { background: #f59e0b; }
.si-tl-dot--medium   { background: #94a3b8; }
.si-tl-dot--low,
.si-tl-dot--default  { background: #e2e8f0; }

.si-badge--info {
    color: #1e40af;
    background: #dbeafe;
}

.si-system-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--si-border);
}

.si-system-row:last-child {
    border-bottom: 0;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.main-sidebar{
    background:linear-gradient(180deg,#0f172a 0%,#071526 100%)!important;
    border-right:1px solid rgba(148,163,184,.18);
    box-shadow:8px 0 30px rgba(15,23,42,.18);
}

.sidebar{
    padding:20px 14px 0;
}

/* PO 2026-07-07: AI Credits spostati dalla topbar al footer sidebar —
   cambio globale, meno invasivo di un pill acceso nella command bar.
   .main-sidebar qui è position:absolute alto quanto l'intera pagina
   (non 100vh) — un margin-top:auto lo spingerebbe in fondo alla PAGINA,
   non al viewport. position:fixed lo ancora visivamente in basso a
   sinistra indipendentemente dall'altezza reale del contenuto. */
.si-sidebar-footer{
    position:fixed;
    left:0;
    bottom:0;
    width:250px;
    display:block;
    padding:12px 16px 16px;
    background:linear-gradient(180deg,#0f172a 0%,#071526 100%);
    border-top:1px solid rgba(148,163,184,.15);
    z-index:1030;
    text-decoration:none;
    transition:background .15s;
}
.si-sidebar-footer:hover{
    background:linear-gradient(180deg,#152238 0%,#0a1d33 100%);
    text-decoration:none;
}
.si-sidebar-footer__label{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
    margin-bottom:4px;
}
.si-sidebar-footer__label i{ font-size:10px; color:#f59e0b; }
.si-sidebar-footer__value{
    font-size:22px;
    font-weight:700;
    color:#fff;
    line-height:1.1;
}
.si-sidebar-footer--zero .si-sidebar-footer__value{ color:#f87171; }
.si-sidebar-footer--zero .si-sidebar-footer__label i{ color:#f87171; }

.brand-link{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    height:110px;

    padding-left:84px!important;

    border-bottom:1px solid rgba(148,163,184,.15)!important;

}

.brand-link .brand-image{
    display:none!important;
}

.brand-link .brand-text{

    position:relative;

    display:block;

    margin:0!important;

    color:#fff;

    font-size:24px;

    font-weight:700;

    line-height:1.1;

    letter-spacing:-.04em;

}

.brand-link::before{

    content:"";

    position:absolute;

    left:26px;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border-radius:14px;

    background-image:url('/images/mark.svg');

    background-size:cover;

    background-position:center;

    box-shadow:

        0 10px 22px rgba(31,224,165,.25);

}

.nav-header{
    display: none !important;
}

.nav-sidebar>.nav-item{
    margin:2px 0;
}

.nav-sidebar .nav-link{
    position:relative;
    display:flex;
    align-items:center;
    min-height:44px;
    padding:0 18px!important;
    border-radius:16px;
    color:var(--mc-t3, #A8B3C5)!important;
    transition:background .16s ease,color .16s ease,transform .16s ease;
}

.nav-sidebar .nav-link:hover{
    background:rgba(255,255,255,.045);
    color:#fff!important;
}

.nav-sidebar .nav-link.active{
    background:rgba(37,99,235,.12)!important;
    color:#fff!important;
    box-shadow:none!important;
}

.nav-sidebar .nav-link.active::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:3px;
    border-radius:0 999px 999px 0;
    background:#1683ff;
}

.nav-sidebar .nav-link p{
    margin:0!important;
    color:inherit;
    font-size:var(--si-fs-xs, 13px);
    font-weight:600;
    line-height:1;
}

.nav-sidebar .nav-link.active p{
    font-weight:750;
}

.nav-icon{
    width:18px!important;
    min-width:18px;
    margin:0 12px 0 0!important;
    color:#94a3b8;
    font-size:19px;
    text-align:center;
    transition:color .16s ease,transform .16s ease;
}

.nav-sidebar .nav-link:hover .nav-icon{
    color:#e2e8f0;
}

.nav-sidebar .nav-link.active .nav-icon{
    color:#3b82f6;
}

.nav-sidebar .nav-treeview{
    padding-left:38px;
}

.nav-sidebar .nav-treeview .nav-link{
    min-height:38px;
    padding-left:18px!important;
    color:#94a3b8!important;
}

.nav-sidebar .nav-treeview .nav-link p{
    font-size:13px;
    font-weight:600;
}
/* ── Today Action Card ──────────────────────────────────────────── */

.si-section--today {
    margin-bottom: 8px;
}

.si-today-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #1d4ed8 100%);
    border-radius: 20px;
    padding: 28px 32px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.si-today-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,.04);
    border-radius: 50%;
}

.si-today-card__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #93c5fd;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.si-today-card__dot {
    width: 7px;
    height: 7px;
    background: #34d399;
    border-radius: 50%;
    display: inline-block;
    animation: si-today-pulse 2s ease-in-out infinite;
}

@keyframes si-today-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(.8); }
}

.si-today-card__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.si-today-card__content {
    flex: 1;
}

.si-today-card__title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.25;
}

.si-today-card__reason {
    font-size: 14px;
    color: #bfdbfe;
    margin: 0 0 20px;
    line-height: 1.55;
    max-width: 560px;
}

.si-today-card__signals {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.si-today-signal {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.si-today-signal__label {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.si-today-signal__value {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.si-today-signal__value--critical { color: #fca5a5; }
.si-today-signal__value--high     { color: #fcd34d; }
.si-today-signal__value--medium   { color: #6ee7b7; }

.si-today-card__cta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.si-today-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #1e3a8a;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, box-shadow .15s;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.si-today-cta-btn:hover {
    background: #eff6ff;
    color: #1e3a8a;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.si-today-cta-hint {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    margin: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .si-today-card__body { flex-direction: column; }
    .si-today-card__cta  { align-items: flex-start; }
}

/* ── Executive Brief ─────────────────────────────────────────── */

.si-executive-brief {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #6366f1;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.si-executive-brief__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6366f1;
    margin-bottom: 6px;
}

.si-executive-brief__text {
    font-size: 14px;
    line-height: 1.7;
    color: #1e293b;
    margin: 0;
}

/* ── System OK ───────────────────────────────────────────────── */

.si-system-ok {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
}

.si-system-ok__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(22,163,74,.2);
}

.si-system-ok__label {
    font-size: 14px;
    font-weight: 600;
    color: #15803d;
}

/* ── KPI Trend ───────────────────────────────────────────────── */

.si-ps-metric__trend {
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
}

.si-ps-metric__trend--success { color: #16a34a; }
.si-ps-metric__trend--danger  { color: #dc2626; }
.si-ps-metric__trend--muted   { color: #94a3b8; }

/* ════════════════════════════════════════════════════════════════
   SI-DARK — Context token system
   Aggiungere .si-dark a qualsiasi contenitore per attivare il
   dark theme su tutto ciò che contiene.
   I componenti leggono --c-* e sono agnostici rispetto al tema.
════════════════════════════════════════════════════════════════ */

.si-dark {
    /* Surfaces */
    --c-bg:       var(--mc-bg,      #0b1017);
    --c-surface:  var(--mc-surface, #111827);
    --c-surface2: var(--mc-surface2,#1a2332);
    --c-border:   var(--mc-border,  #1E293B);

    /* Text */
    --c-text:     var(--mc-t1, #F8FAFC);
    --c-text2:    var(--mc-t2, #CBD5E1);
    --c-text3:    var(--mc-t3, #A8B3C5);

    /* Accents */
    --c-accent:   var(--mc-green,  #4ade80);
    --c-amber:    var(--mc-amber,  #f59e0b);
    --c-blue:     var(--mc-blue,   #60a5fa);
    --c-red:      #f87171;

    /* Derived */
    --c-accent-bg:     rgba(74,222,128,.08);
    --c-accent-border: rgba(74,222,128,.2);

    /* AdminLTE override — body/wrapper background */
    background: var(--c-bg) !important;
    color: var(--c-text);
}

/* si-dark-page — zero-padding per pagine full-width (mission queue, workspace) */
body:has(.si-dark-page) .content {
    padding: 0 !important;
}

body:has(.si-dark-page) .container,
body:has(.si-dark-page) .container-fluid,
body:has(.si-dark-page) .container-xl,
body:has(.si-dark-page) .container-lg {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Architect audit (2026-07-22) — this !important rule zeroes the
   container so the dark background reaches the edges, exactly like
   Mission Control's own equivalent (mc.css) — but unlike MC, nothing
   re-added lateral padding for the actual content on 3 pages (sites/
   workspace, opportunities/index, opportunities/show): flush against
   the sidebar/viewport edge, confirmed via getBoundingClientRect (a
   first pass here wrongly assumed removing an inline style="padding:0"
   was the fix — it wasn't, this !important rule dominates regardless
   of the inline style). Same reusable child-wrapper pattern as
   .mc-page (mc.css) and the two recommendations/* pages, which already
   had their own inline padding:24px div and were never broken. */
.si-dark-page__body {
    padding: 28px 28px 64px;
}

.si-dark .si-section--mission-queue {
    padding: 28px 32px 20px;
    margin-top: 0;
}

/* Regola DS — spaziatura bottoni-form affiancati (es. Salva/Annulla).
   gap fisso 12px, non uno spacing-scale token (evidence-driven: lo
   introduciamo se ricorre su più superfici). Deciso Architect. */
.si-btn-group {
    display: flex;
    gap: 12px;
}

/* ─── Confirm modal (PO 2026-07-14) — sostituisce gli 8 confirm() nativi.
   Globale: seo-intelligence.css è caricato su ogni pagina (admin incluse),
   dark-mode esplicita per coerenza con le altre superfici .si-dark. */
.si-confirm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.si-confirm-modal {
    background: var(--si-surface, #fff);
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    padding: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
}
.si-confirm-modal__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--si-text-1, #0f172a);
    margin-bottom: 8px;
}
.si-confirm-modal__message {
    font-size: 14px;
    line-height: 1.5;
    color: var(--si-text-3, #64748b);
    margin-bottom: 20px;
    white-space: pre-line;
}
.si-confirm-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.si-confirm-modal__btn {
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.si-confirm-modal__btn--ghost {
    background: var(--si-surface-alt, #fafaf9);
    color: var(--si-text-2, #334155);
    border: 1px solid var(--si-border, #e5e7eb);
}
.si-confirm-modal__btn--danger {
    background: var(--si-danger, #dc2626);
    color: #fff;
}
.si-confirm-modal__btn--primary {
    background: var(--si-primary, #2563eb);
    color: #fff;
}
.si-dark .si-confirm-modal {
    background: var(--mc-surface, #111827);
    box-shadow: 0 25px 50px rgba(0, 0, 0, .5);
}

/* ─── Sidebar plan-capacity widget (subscription-upgrade-experience-scope-v1
   §1.1) — sits in the dark sidebar chrome, above the fixed credits footer.
   Silent by default (--normal is the same muted gray as the label text);
   colour only appears at 80/90/100% (accent-scarcity: colour=state). */
.si-sidebar-plan {
    padding: 12px 16px;
    border-top: 1px solid rgba(148, 163, 184, .15);
    margin-bottom: 64px; /* clears the fixed credits footer below */
}
.si-sidebar-plan__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.si-sidebar-plan__name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.si-sidebar-plan__cta {
    font-size: 11px;
    font-weight: 600;
    color: #818cf8;
    text-decoration: none;
    white-space: nowrap;
}
.si-sidebar-plan__cta:hover { color: #a5b4fc; text-decoration: underline; }
.si-sidebar-plan__bar-wrap {
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
    margin-bottom: 6px;
}
.si-sidebar-plan__bar {
    height: 100%;
    border-radius: 3px;
    background: rgba(255, 255, 255, .35);
    transition: width .4s ease;
}
.si-sidebar-plan__bar--warning  { background: #f59e0b; }
.si-sidebar-plan__bar--critical { background: #f97316; }
.si-sidebar-plan__bar--limit    { background: #ef4444; }
.si-sidebar-plan__meta {
    font-size: 10.5px;
    color: rgba(255, 255, 255, .45);
}
.si-sidebar-plan__suggestion {
    font-size: 10.5px;
    margin-top: 6px;
    color: rgba(255, 255, 255, .55);
}
.si-sidebar-plan__suggestion--critical,
.si-sidebar-plan__suggestion--limit { color: #fca5a5; }
.si-dark .si-confirm-modal__title { color: var(--mc-t1, #f8fafc); }
.si-dark .si-confirm-modal__message { color: var(--mc-t3, #94a3b8); }
.si-dark .si-confirm-modal__btn--ghost {
    background: var(--mc-surface-2, #1a2332);
    color: var(--mc-t2, #cbd5e1);
    border-color: var(--mc-border, #2a3548);
}