/* ==========================================================================
   Acelle Mail — Shared Components
   Buttons, cards, badges, forms, tables, modals, toasts, dropdowns, etc.
   All values from variables.css.
   ========================================================================== */


/* Senza `?v=`: la versione era scritta a mano e non cambiava mai, quindi il
   browser continuava a servire una copia vecchia di questo foglio anche dopo
   che il file cambiava. Senza query il server revalida per data di modifica,
   e chi lo carica ottiene quello che c'e' davvero.
   I layout lo caricano anche come <link> prima di tutto il resto — un @import
   il browser lo scopre solo dopo aver analizzato questo file, e per quei ~50ms
   la pagina resta senza colori. Qui resta perche' ci sono punti d'ingresso
   fuori dai layout 2.0 (installatore, pagine d'errore, builder) che questo
   foglio lo caricano e i token li vogliono comunque. */
@import url('variables.css');
/* ==========================================================================
   Buttons
   ========================================================================== */

.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--space-9);
    padding: 0 var(--space-5);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: 1;
    border: var(--space-px) solid transparent;
    border-radius: var(--radius-input);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

/* `hidden` su un pulsante deve nasconderlo davvero.
   `.mc-btn` dichiara `display: inline-flex`, che BATTE l'attributo
   (CLAUDE.md §4): senza questa riga, un pulsante marcato `hidden` resta a
   schermo, riceve i clic, e chi ha scritto il JavaScript crede di averlo
   tolto. `HiddenAttributeTest` sorveglia esattamente questo, e l'ha colto la
   prima volta che un pulsante e' stato nascosto cosi'. */
.mc-btn[hidden] { display: none; }

.mc-btn:hover {
    text-decoration: none;
}

.mc-btn:focus-visible {
    outline: var(--space-0-5) solid var(--color-teal);
    outline-offset: var(--space-0-5);
}

.mc-btn:disabled, .mc-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading state — hides the button content (text nodes + icons) and renders a
   rotating spinner centred over the button. Triggered by adding `.is-loading`
   (auto-applied by the global `data-mc-spinner` handler in app.js for form
   submits and nav links).
   Technique: `color: transparent` hides text nodes (visibility:hidden on
   children wouldn't — text isn't an element). The ::after spinner uses an
   explicit border-color per variant (white for filled variants, currentColor
   via a saved custom property for text-coloured variants). */
.mc-btn.is-loading {
    pointer-events: none;
    position: relative;
    cursor: progress;
    color: transparent !important;
    text-shadow: none;
}
.mc-btn.is-loading > * { visibility: hidden; }
.mc-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--color-white);
    border-top-color: transparent;
    border-radius: 50%;
    animation: mc-spin 600ms linear infinite;
}
/* Text-coloured variants use the app's text colour for the spinner */
.mc-btn-secondary.is-loading::after,
.mc-btn-ghost.is-loading::after,
.mc-btn-muted.is-loading::after,
.mc-btn-white.is-loading::after {
    border-color: var(--color-text);
    border-top-color: transparent;
}
.mc-btn-link.is-loading::after {
    border-color: var(--color-teal);
    border-top-color: transparent;
}
.mc-btn-danger-ghost.is-loading::after {
    border-color: var(--color-error);
    border-top-color: transparent;
}
/* Size-aware spinner */
.mc-btn-xs.is-loading::after,
.mc-btn-sm.is-loading::after {
    width: 12px; height: 12px; margin: -6px 0 0 -6px; border-width: 1.5px;
}
.mc-btn-lg.is-loading::after,
.mc-btn-xl.is-loading::after {
    width: 18px; height: 18px; margin: -9px 0 0 -9px;
}

/* Primary */
.mc-btn-primary {
    background: var(--cta-bg);
    color: var(--cta-ink);
    border-color: var(--cta-bg);
    font-weight: var(--weight-semibold);
    transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}
.mc-btn-primary:hover,
.mc-btn-primary:focus-visible {
    background: var(--cta-bg-hover);
    border-color: var(--cta-bg-hover);
    color: var(--cta-ink);
    box-shadow: 0 4px 14px var(--cta-ring);
}
/* La rotellina del caricamento e' bianca sui pulsanti pieni: sul verde non
   si vedrebbe, quindi qui prende l'inchiostro. */
.mc-btn-primary.is-loading::after { border-color: var(--cta-ink); border-top-color: transparent; }

/* Secondary */
.mc-btn-secondary {
    background: var(--color-card-bg);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.mc-btn-secondary:hover {
    background: var(--color-hover-bg);
    border-color: var(--color-text-disabled);
    color: var(--color-text);
}

/* Danger */
.mc-btn-danger {
    background: var(--color-error);
    color: var(--color-white);
    border-color: var(--color-error);
}
.mc-btn-danger:hover {
    background: var(--color-error-dark);
    border-color: var(--color-error-dark);
    color: var(--color-white);
}

/* Ghost */
/* Il TERZIARIO. Era trasparente, e su fondo chiaro senza bordo e senza sfondo
   era indistinguibile da un'etichetta: si scopriva che era un comando solo
   passandoci sopra col mouse, cioe' mai, per chi usa un telefono.

   Adesso ha una superficie tenue a riposo. La gerarchia si legge a colpo
   d'occhio e in tre gradini:
     primario   — pieno, tinto:      l'azione della schermata
     secondario — chiaro col bordo:  l'alternativa
     terziario  — tenue, senza bordo: quello che si fa ogni tanto
   Il quarto gradino, il testo nudo, esiste ancora e si chiama `.mc-btn-link`:
   ma quello e' un LINK, e la differenza e' che un link porta altrove mentre
   un comando fa qualcosa qui. */
.mc-btn-ghost {
    background: var(--color-active-bg);
    color: var(--color-text);
    border-color: transparent;
}
.mc-btn-ghost:hover:not(:disabled) {
    background: var(--color-border);
    color: var(--color-text);
}
.mc-btn-ghost:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}
.mc-btn-danger-ghost {
    color: var(--color-error);
}
.mc-btn-danger-ghost:hover {
    background: var(--color-error-light, rgba(231,76,60,0.08));
    color: var(--color-error);
}

/* Link */
.mc-btn-link {
    background: none;
    border: none;
    color: var(--color-teal);
    padding: 0;
    font-weight: var(--weight-medium);
}
.mc-btn-link:hover {
    color: var(--color-teal-hover);
    text-decoration: underline;
}

/* Muted (gray background, no border — like Mailchimp "Create a signup form") */
.mc-btn-muted {
    background: var(--color-hover-bg);
    color: var(--color-text);
    border-color: transparent;
}
.mc-btn-muted:hover {
    background: var(--color-active-bg);
    color: var(--color-text);
}

/* Sizes */
.mc-btn-xs { height: var(--space-6); padding: 0 var(--space-2); font-size: var(--text-xs); }
.mc-btn-sm { height: var(--space-7); padding: 0 var(--space-3); font-size: var(--text-sm); }
.mc-btn-lg { height: var(--space-10); padding: 0 var(--space-7); font-size: var(--text-md); }
.mc-btn-xl { height: var(--space-12); padding: 0 var(--space-8); font-size: var(--text-lg); }
.mc-btn-block { display: flex; width: 100%; }
.mc-btn-icon { padding: var(--space-2); min-width: var(--space-9); min-height: var(--space-9); }
/* Il `min-height` qui sopra vale per l'icona a misura piena e BATTE l'altezza
   che dichiara la misura: senza le tre righe che seguono, `mc-btn-icon
   mc-btn-sm` resta 36px invece di 28 e `mc-btn-xs` resta 36 invece di 24 —
   il pulsante ignora la misura che gli hai dato, in silenzio. Si vedeva sul
   ricarica dei crediti e sui menu delle righe di lista nera e domini. */
.mc-btn-icon.mc-btn-xs { min-width: var(--space-6); min-height: var(--space-6); }
.mc-btn-icon.mc-btn-sm { min-width: var(--space-7); min-height: var(--space-7); }
.mc-btn-icon.mc-btn-lg { min-width: var(--space-10); min-height: var(--space-10); }
.mc-btn-icon svg { width: 20px; height: 20px; }

/* Shape — pill (fully rounded) */
.mc-btn-pill { border-radius: var(--radius-full); }

/* Arrow suffix (link-style navigation, e.g. "All campaigns →") */
.mc-btn-arrow::after {
    content: "\2192";
    margin-left: var(--space-1);
}

/* Badge inside button (count indicator) */
.mc-btn .mc-badge {
    padding: var(--space-0-5) var(--space-1-5);
    font-size: var(--text-xs);
    line-height: 1;
    border-radius: var(--radius-full);
    margin-left: var(--space-0-5);
}

/* Icons inside buttons — proper flex child, no height impact */
.mc-btn .material-symbols-rounded,
.mc-btn .mc-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: var(--text-md);
    line-height: 1;
    vertical-align: baseline;
}
.mc-btn .mc-icon svg { width: 1em; height: 1em; }

/* L'icona segue la taglia del bottone.
   Era fissa a 16px per tutte: su un bottone normale (testo 14) e' un rapporto
   di 1,14 e non si nota, su `mc-btn-sm` (testo 12) diventa 1,33 e l'icona
   prende il sopravvento sulla parola. Sotto il rapporto resta lo stesso a ogni
   taglia, che e' il motivo per cui esiste una scala. */
.mc-btn-sm .material-symbols-rounded,
.mc-btn-sm .mc-icon { font-size: 14px; }

.mc-btn-xs .material-symbols-rounded,
.mc-btn-xs .mc-icon { font-size: 13px; }

/* Accento tenue — un'azione secondaria che deve restare leggibile COME
   AZIONE.

   Perche' non le varianti che c'erano gia': `secondary` ha bordo e fondo
   chiaro, e sotto un titolo di sezione, nella stessa colonna dei campi, si
   legge come un input; `ghost` non ha niente e si legge come un link; una
   tinta piatta presa dalla palette chiara sembrava un elemento disattivato.
   Qui la tinta e' l'accento del cliente al 12%, quindi si accende con il
   marchio invece di essere un grigio qualunque, e al passaggio del mouse
   diventa piena: la conferma che e' un comando arriva prima del clic. */
.mc-btn-accent-soft {
    /* La coppia tinta-chiara + accento e' la stessa di `.mc-badge-teal`, ed e'
       l'unica che il sistema garantisce leggibile in tutti e due i temi:
       `--color-teal-light` e `--color-teal` sono ridefiniti insieme nel blocco
       scuro. Un `color-mix()` dell'accento sembrava piu' elegante e invece in
       tema scuro produceva una pastiglia chiara con il testo scuro dentro
       un'interfaccia scura — visto nel browser, non dedotto. */
    background: var(--color-teal-light);
    color: var(--color-teal);
    border-color: transparent;
    font-weight: var(--weight-semibold, 600);
}

.mc-btn-accent-soft:hover {
    background: var(--color-teal);
    color: var(--color-card-bg);
}

.mc-btn-accent-soft:active {
    background: var(--color-teal-active, var(--color-teal-hover));
    color: var(--color-card-bg);
}

.mc-btn-accent-soft:disabled,
.mc-btn-accent-soft.is-disabled {
    background: var(--color-active-bg);
    color: var(--color-text-disabled);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.mc-card {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.mc-card-hover:hover,
a.mc-card:hover {
    box-shadow: var(--shadow-dropdown);
    border-color: var(--color-border-strong);
}

a.mc-card {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Flush card — no padding on the card itself; children manage their own padding.
   Use for cards where some rows (toggle rows, list items) go edge-to-edge while
   headers/content sections have their own padding. */
.mc-card-flush {
    padding: 0;
}

/* Table inside flush card — remove redundant border/radius so it sits flush
   against the card edges without double borders. */
.mc-card-flush .mc-table {
    border: none;
    border-radius: 0;
}

/* Card-header inside flush card needs its own internal padding (the card itself
   has padding: 0). Margin-bottom is also dropped so the next child sits flush
   against the header's bottom border. */
.mc-card-flush > .mc-card-header {
    padding: var(--space-4) var(--space-5);
    margin-bottom: 0;
}

/* Full-width divider inside a card */
.mc-card-divider {
    height: 1px;
    background: var(--color-border);
}

.mc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: var(--space-px) solid var(--color-border);
}

.mc-card-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.mc-card-title svg { flex-shrink: 0; }
.mc-card-subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
}

/* Inline select in card header */
.mc-card-header .mc-form-select {
    width: auto;
    height: var(--space-8);
    padding: 0 var(--space-8) 0 var(--space-3);
    font-size: var(--text-sm);
}

.mc-card-footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--space-px) solid var(--color-border);
}

/* Card — Table variant (flush, no padding — table fills edge-to-edge) */
.mc-card-table {
    padding: 0;
}

/* L'intestazione dentro una scheda-tabella si prende lo spazio da se'.
   `.mc-card-table` toglie il padding alla scheda, perche' la tabella deve
   arrivare ai bordi. L'intestazione pero' non e' la tabella: titolo e comando
   restavano incollati ai due bordi, allineati con niente — e sotto, le
   intestazioni di colonna della tabella partivano rientrate. Lo stesso passo
   della scheda normale, e nessun margine sotto perche' la riga che separa
   c'e' gia'. */
.mc-card-table > .mc-card-header {
    padding: var(--space-6) var(--space-6) var(--space-4);
    margin-bottom: 0;
}

/* Card — Table variant + FLUSH modifier. Cancels the inner [data-mc-list]
   padding that ads-builder.css:447 adds for grid-style listings (ad
   templates, etc.) so a real <table class="mc-table"> can fill the card
   edge-to-edge — same look as /campaigns. Apply alongside `mc-card-table`
   on table-style listing pages (lists, sending/*, automations, account/*,
   funnels, websites, ads/{campaigns,ab_tests,audiences,activity,…}). Do
   NOT apply to grid/card-style listings (mc-template-grid, mc-form-grid,
   mc-card-grid) — those need the inset padding to keep cards off the
   card border. */
.mc-card-table-flush > [data-mc-list],
.mc-card-table-flush > [data-mc-list][data-mc-list] {
    padding: 0;
}

@media (max-width: 767px) {
    /* mc-card-table must NOT set overflow-x — that would create a second scroll container
       nested inside .mc-table-responsive (which already owns the horizontal scroll).
       Two nested overflow containers = two visible scrollbars at the same time. */
    /* When table uses mobile cards, disable overflow (cards don't need horizontal scroll) */
    .mc-card-table:has(.mc-table-mobile-cards) {
        overflow-x: visible;
        overflow: visible;
    }
}

.mc-card-table .mc-filter-bar {
    padding: var(--space-4) var(--space-5);
    margin-bottom: 0;
    border-bottom: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* All interactive elements inside filter bar share same height */
.mc-filter-bar .mc-form-input,
.mc-filter-bar .mc-form-select,
.mc-filter-bar .mc-select-inline,
.mc-filter-bar .mc-btn-sm,
.mc-filter-bar .mc-column-picker-trigger {
    height: var(--space-9);
}

.mc-card-table .mc-table {
    border: none;
    border-radius: 0;
}

/* First/last cell padding matches card padding so content aligns with card header */
.mc-card-table .mc-table thead th:first-child,
.mc-card-table .mc-table tbody td:first-child,
.mc-card > .mc-table-responsive .mc-table thead th:first-child,
.mc-card > .mc-table-responsive .mc-table tbody td:first-child { padding-left: var(--space-6); }
.mc-card-table .mc-table thead th:last-child,
.mc-card-table .mc-table tbody td:last-child,
.mc-card > .mc-table-responsive .mc-table thead th:last-child,
.mc-card > .mc-table-responsive .mc-table tbody td:last-child { padding-right: var(--space-6); }

.mc-card-table .mc-list-footer {
    padding: var(--space-3) var(--space-5);
}

.mc-card-table .mc-empty-state {
    padding: var(--space-12) var(--space-6);
}

/* Section header inside a flush table card needs its own padding,
   since .mc-card-table strips the card's default padding to let the
   table reach the card edges. */
.mc-card-table > .mc-dash-section-header {
    padding: var(--space-5) var(--space-6) 0;
}

/* ==========================================================================
   Stat Card
   ========================================================================== */

.mc-stat-card {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.mc-stat-icon {
    width: var(--space-12);
    height: var(--space-12);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-stat-icon svg { width: var(--space-6); height: var(--space-6); }
.mc-stat-icon.teal   { background: var(--color-teal-light); color: var(--color-teal); }
.mc-stat-icon.green  { background: var(--color-success-bg); color: var(--color-success); }
.mc-stat-icon.blue   { background: var(--color-info-bg); color: var(--color-info); }
.mc-stat-icon.orange { background: var(--color-warning-bg); color: var(--color-warning); }
.mc-stat-icon.red    { background: var(--color-error-bg); color: var(--color-error); }

.mc-stat-content { flex: 1; min-width: 0; }

.mc-stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--weight-medium);
}

.mc-stat-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
}

.mc-stat-trend { font-size: var(--text-sm); margin-top: var(--space-1); }
.mc-stat-trend.up   { color: var(--color-success); }
.mc-stat-trend.down { color: var(--color-error); }

/* L119 — Messenger Hub KPI cards (decorative sparkline variant).
   Sparkline tucks into the card's bottom-right corner; tinted to
   match the card's accent tone via `data-tone` + `currentColor`.
   L123 — refinements per user audit:
   (a) Icon tile loses its colored bg in light mode — just a plain
       dark-on-transparent icon. Dashboard's `mc-stat-icon.{tone}` bg
       was too "info-graphic-y" for the messenger hub vibe.
   (b) Sparkline tones shift to the chip-pastel palette (`--msg-ch-*`
       sms/wa/tg/email) — softer / more natural than the saturated
       brand colors (--color-teal/--color-success/--color-info).
   (c) Stroke opacity drops 0.85 → 0.6; gradient peak 0.28 → 0.18. */
.rui-msg-hub__kpi-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.rui-msg-hub__kpi-card .mc-stat-icon {
    background: transparent;
    color: var(--color-text);
    /* L123 — without the bg tile, a 24px svg floats and looks under-
       weight next to the value. Bump the wrapper to 56px + svg to
       36px so the icon carries its own visual weight (matches the
       optical mass that the tile previously provided). */
    width: 56px;
    height: 56px;
}
.rui-msg-hub__kpi-card .mc-stat-icon svg {
    width: 36px;
    height: 36px;
}
.rui-msg-hub__kpi-spark {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 38%;
    max-width: 140px;
    height: 28px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.75;
}
.rui-msg-hub__kpi-card > .mc-stat-icon,
.rui-msg-hub__kpi-card > .mc-stat-content { position: relative; z-index: 1; }
.rui-msg-hub__kpi-spark[data-tone="teal"]   { color: var(--msg-ch-sms-ink); }
.rui-msg-hub__kpi-spark[data-tone="green"]  { color: var(--msg-ch-wa-ink); }
.rui-msg-hub__kpi-spark[data-tone="blue"]   { color: var(--msg-ch-tg-ink); }
.rui-msg-hub__kpi-spark[data-tone="orange"] { color: var(--msg-ch-email-ink); }
.rui-msg-hub__kpi-spark[data-tone="red"]    { color: var(--color-error); }


/* ==========================================================================
   Badges
   ========================================================================== */

.mc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2-5);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    border-radius: var(--radius-sm);
    line-height: 1.3;
    white-space: nowrap;
}

.mc-badge-default { background: var(--color-hover-bg); color: var(--color-text-secondary); }
.mc-badge-teal    { background: var(--color-teal-light); color: var(--color-teal); }
.mc-badge-green   { background: var(--color-success-bg); color: var(--color-success); }
.mc-badge-red     { background: var(--color-error-bg); color: var(--color-error); }
.mc-badge-orange  { background: var(--color-warning-bg); color: var(--color-warning); }
.mc-badge-blue    { background: var(--color-info-bg); color: var(--color-info); }
.mc-badge-purple  { background: var(--chart-6-bg); color: var(--chart-6); }
/* L125 — outline variant: page-bg + dark text + 1px border. Use this for
   count badges nested inside colored pills (e.g. unread count inside a
   mc-msg-channel-chip), conversion-rate badges, and other places where the
   surrounding context already carries a tone and we need the badge to
   carry contrast WITHOUT competing for color attention. Dark-mode safe via
   the same surface tokens. */
.mc-badge-outline { background: var(--color-card-bg); color: var(--color-text); border: 1px solid var(--color-border); }

.mc-badge-dot::before {
    content: '';
    width: var(--space-1-5);
    height: var(--space-1-5);
    border-radius: 50%;
    background: currentColor;
}

.mc-badge-clickable { cursor: pointer; }

/* Small badge variant — used for compact badges in dense list rows */
.mc-badge-sm {
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    line-height: 1.4;
}
.mc-badge-icon {
    font-size: 14px !important;
    line-height: 1;
}

/* ==================================================================
 * Messenger channel chip (C20 — W2)
 * Branded per-channel pill — used wherever a channel
 * (sms / whatsapp / telegram / email / multi) appears across customer
 * + admin pages. Driven entirely by --msg-ch-{key} + --msg-ch-{key}-ink
 * tokens declared in variables.css; switching channel = one data-attr.
 *
 * Showcase: /rui/ui#mc-msg-channel-chip
 * Used by: mc-channel-status-card (S2.1 hub), admin credential audit
 * table (S2.10), webhook health card (S2.9), wizard steppers,
 * everywhere a channel is annotated.
 *
 * Variants:
 *   .mc-msg-channel-chip                — default "subtle" (18% tinted bg)
 *   .mc-msg-channel-chip-solid          — solid (chart-N-bg + chart-N text)
 *   .mc-msg-channel-chip-outline        — transparent + 1px channel-tone border
 *   .mc-msg-channel-chip-sm / -lg       — size variants (default = md)
 * Selectors fork on data-channel="email|sms|whatsapp|telegram|multi"
 * to pick the tone via shared --chip-tone / --chip-ink local custom props.
 * ================================================================== */

.mc-msg-channel-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2-5);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-full);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    background: color-mix(in srgb, var(--chip-tone, var(--color-text-muted)) 18%, transparent);
    color: var(--chip-ink, var(--color-text));
    border: 0;
    cursor: default;
    transition: background-color 150ms ease, transform 150ms ease;
}

.mc-msg-channel-chip svg,
.mc-msg-channel-chip .mc-icon,
.mc-msg-channel-chip .material-symbols-rounded {
    width: 14px;
    height: 14px;
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}

/* Per-channel tone wiring — single line per channel sets the locals */
.mc-msg-channel-chip[data-channel="email"]    { --chip-tone: var(--msg-ch-email);  --chip-ink: var(--msg-ch-email-ink); }
.mc-msg-channel-chip[data-channel="sms"]      { --chip-tone: var(--msg-ch-sms);    --chip-ink: var(--msg-ch-sms-ink); }
.mc-msg-channel-chip[data-channel="whatsapp"] { --chip-tone: var(--msg-ch-wa);     --chip-ink: var(--msg-ch-wa-ink); }
.mc-msg-channel-chip[data-channel="telegram"] { --chip-tone: var(--msg-ch-tg);     --chip-ink: var(--msg-ch-tg-ink); }
.mc-msg-channel-chip[data-channel="multi"]    { --chip-tone: var(--msg-ch-multi);  --chip-ink: var(--msg-ch-multi-ink); }

/* Solid variant — flat tinted bg with same-hue text */
.mc-msg-channel-chip-solid {
    background: color-mix(in srgb, var(--chip-tone) 24%, var(--color-card-bg));
    color: var(--chip-tone);
}

/* Outline variant — transparent bg, channel-tone border, ink text */
.mc-msg-channel-chip-outline {
    background: transparent;
    border: 1px solid var(--chip-tone);
    color: var(--chip-ink);
    /* compensate for the 1px border on padding (4-1=3 horiz, 2-1=1 vert) */
    padding: calc(var(--space-1) - 1px) calc(var(--space-2-5) - 1px);
}

/* Size variants */
.mc-msg-channel-chip-sm {
    padding: 2px var(--space-2);
    font-size: 11px;
    gap: var(--space-1);
}
.mc-msg-channel-chip-sm.mc-msg-channel-chip-outline {
    padding: 1px calc(var(--space-2) - 1px);
}
.mc-msg-channel-chip-sm svg,
.mc-msg-channel-chip-sm .mc-icon,
.mc-msg-channel-chip-sm .material-symbols-rounded {
    width: 12px;
    height: 12px;
    font-size: 12px;
}

.mc-msg-channel-chip-lg {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    gap: var(--space-2);
}
.mc-msg-channel-chip-lg.mc-msg-channel-chip-outline {
    padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
}
.mc-msg-channel-chip-lg svg,
.mc-msg-channel-chip-lg .mc-icon,
.mc-msg-channel-chip-lg .material-symbols-rounded {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* Interactive variants (chip wrapped in <a> or <button>) */
a.mc-msg-channel-chip,
button.mc-msg-channel-chip {
    cursor: pointer;
}
a.mc-msg-channel-chip:hover,
button.mc-msg-channel-chip:hover {
    background: color-mix(in srgb, var(--chip-tone) 28%, transparent);
}
a.mc-msg-channel-chip-solid:hover,
button.mc-msg-channel-chip-solid:hover {
    background: color-mix(in srgb, var(--chip-tone) 32%, var(--color-card-bg));
}
a.mc-msg-channel-chip-outline:hover,
button.mc-msg-channel-chip-outline:hover {
    background: color-mix(in srgb, var(--chip-tone) 12%, transparent);
}
a.mc-msg-channel-chip:focus-visible,
button.mc-msg-channel-chip:focus-visible {
    outline: 2px solid var(--chip-tone);
    outline-offset: 2px;
}

/* Disabled */
.mc-msg-channel-chip[aria-disabled="true"],
.mc-msg-channel-chip:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Truncate long labels with ellipsis inside constrained container */
.mc-msg-channel-chip-truncate .mc-msg-channel-chip-label {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-msg-channel-chip-sm.mc-msg-channel-chip-truncate .mc-msg-channel-chip-label {
    max-width: 8ch;
}

/* ==================================================================
 * Explainer (C23 — W2)
 * Collapsible "why are you seeing this?" expander — a tokenised
 * wrapper around <details> with rotating chevron + 3 tone variants
 * (neutral / info / warning). Used whenever a screen has an empty /
 * setup-required / why-this-empty state.
 *
 * Showcase: /rui/ui#mc-explainer
 * Used by: setup-required cards (S2.1 hub), empty admin lists
 * (S2.10 credential audit), wizard step explainers, every empty state
 * that needs a 3-reason "why" callout.
 *
 * Markup:
 *   <details class="mc-explainer mc-explainer-info">
 *     <summary>Why is this not connected yet?</summary>
 *     <div class="mc-explainer-body">
 *       <ul>
 *         <li>...</li>
 *       </ul>
 *     </div>
 *   </details>
 * ================================================================== */

.mc-explainer {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    margin: var(--space-3) 0;
    background: var(--color-card-bg);
    overflow: hidden;
}

.mc-explainer summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    user-select: none;
}
.mc-explainer summary::-webkit-details-marker { display: none; }
.mc-explainer summary::marker { content: ''; }
.mc-explainer summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 150ms ease;
    flex-shrink: 0;
}
.mc-explainer[open] summary::before {
    transform: rotate(90deg);
}
.mc-explainer summary:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}
.mc-explainer summary:hover {
    background: var(--color-hover-bg);
}

.mc-explainer-body {
    padding: 0 var(--space-4) var(--space-4) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}
.mc-explainer-body > *:first-child {
    margin-top: 0;
}
.mc-explainer-body ul,
.mc-explainer-body ol {
    margin: 0;
    padding-left: var(--space-5);
}
.mc-explainer-body li {
    margin: var(--space-2) 0;
}
.mc-explainer-body p {
    margin: var(--space-2) 0;
}
.mc-explainer-body a {
    color: var(--color-teal);
    text-decoration: underline;
}

/* Tone variants */
.mc-explainer-info {
    border-color: color-mix(in srgb, var(--color-info) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-info) 5%, var(--color-card-bg));
}
.mc-explainer-info summary { color: var(--color-info); }

.mc-explainer-warning {
    border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning) 5%, var(--color-card-bg));
}
.mc-explainer-warning summary { color: var(--color-warning); }

.mc-explainer-success {
    border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-success) 5%, var(--color-card-bg));
}
.mc-explainer-success summary { color: var(--color-success); }

/* Compact density variant — for inline use inside cards */
.mc-explainer-sm summary {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
}
.mc-explainer-sm .mc-explainer-body {
    padding: 0 var(--space-3) var(--space-3) var(--space-3);
    font-size: var(--text-xs);
}

/* ==================================================================
 * Channel Status Card (C1 — W2)
 * Large channel card for the customer messenger hub (/rui/messenger).
 * Composes mc-card + mc-msg-channel-chip (C20) + mc-ring (xl variant)
 * + mc-badge + mc-btn + mc-explainer (C23) into a single primitive.
 * 3 cards side-by-side on hub desktop; 1-up on mobile.
 *
 * Showcase: /rui/ui#mc-channel-status-card
 * States (set via data-status attribute): not_started · in_progress ·
 * connected · warning · error. Token-driven via channel data-channel +
 * existing --msg-ch-* tokens; status indicator + top accent flip color
 * per state.
 *
 * Markup outline:
 *   <article class="mc-channel-status-card" data-channel="sms" data-status="not_started">
 *     <span class="mc-channel-status-card__top-accent"></span>
 *     <header class="mc-channel-status-card__header">
 *       <div class="mc-channel-status-card__title-row">
 *         <span class="mc-msg-channel-chip" data-channel="sms">...</span>
 *         <span class="mc-channel-status-card__vendor">via Twilio</span>
 *       </div>
 *       <span class="mc-badge mc-badge-default">Setup required</span>
 *     </header>
 *     <div class="mc-channel-status-card__ring-wrap">
 *       <div class="mc-ring mc-ring-xl" style="--ring-pct:0;--ring-color:var(--msg-ch-sms)"></div>
 *       <div class="mc-channel-status-card__ring-label">
 *         <span class="mc-channel-status-card__ring-pct">0%</span>
 *         <span class="mc-channel-status-card__ring-steps">0 of 5 steps</span>
 *       </div>
 *     </div>
 *     <p class="mc-channel-status-card__description">...</p>
 *     <div class="mc-channel-status-card__cta-wrap">
 *       <a class="mc-btn mc-btn-primary">Connect SMS</a>
 *       <span class="mc-channel-status-card__cta-hint">Pay-as-you-go · ~$0.0075/SMS</span>
 *     </div>
 *     <details class="mc-explainer mc-explainer-sm">...why empty...</details>
 *   </article>
 * ================================================================== */

.mc-channel-status-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: box-shadow 200ms ease, transform 200ms ease;
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

/* Pick channel tone via the same data-channel attribute as mc-msg-channel-chip */
.mc-channel-status-card[data-channel="email"]    { --chip-tone: var(--msg-ch-email);  --chip-ink: var(--msg-ch-email-ink); }
.mc-channel-status-card[data-channel="sms"]      { --chip-tone: var(--msg-ch-sms);    --chip-ink: var(--msg-ch-sms-ink); }
.mc-channel-status-card[data-channel="whatsapp"] { --chip-tone: var(--msg-ch-wa);     --chip-ink: var(--msg-ch-wa-ink); }
.mc-channel-status-card[data-channel="telegram"] { --chip-tone: var(--msg-ch-tg);     --chip-ink: var(--msg-ch-tg-ink); }
.mc-channel-status-card[data-channel="multi"]    { --chip-tone: var(--msg-ch-multi);  --chip-ink: var(--msg-ch-multi-ink); }

.mc-channel-status-card:hover {
    box-shadow: var(--shadow-md);
}

/* Top accent strip — channel tone by default, flips by status */
.mc-channel-status-card__top-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--chip-tone, var(--color-text-muted));
}
.mc-channel-status-card[data-status="connected"] .mc-channel-status-card__top-accent { background: var(--color-success); }
.mc-channel-status-card[data-status="warning"]   .mc-channel-status-card__top-accent { background: var(--color-warning); }
.mc-channel-status-card[data-status="error"]     .mc-channel-status-card__top-accent { background: var(--color-error); }

.mc-channel-status-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.mc-channel-status-card__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.mc-channel-status-card__vendor {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.mc-channel-status-card__ring-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.mc-channel-status-card__ring-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mc-channel-status-card__ring-pct {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: 1;
    color: var(--color-text);
}

.mc-channel-status-card__ring-steps {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* L124 — split "X of Y / steps complete" into 2 lines next to the ring
   (the % moved INSIDE the ring center). Bigger top line "X of Y" + small
   gray "steps complete" label below. */
.mc-channel-status-card__ring-steps-done {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.1;
}
.mc-channel-status-card__ring-steps-label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.2;
}

.mc-channel-status-card__description {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0;
    /* L123 — was `flex:1`, which made the description claim ALL slack
       when the parent card was stretched to equal heights in the grid.
       Result: SMS card (1-CTA) showed a visible empty box between
       description and Connect button vs. WA/TG cards (2-CTA = no slack
       left). Now: description sits naturally below the ring, the
       cta-wrap pins to the card's bottom edge with margin-top:auto,
       and any slack is absorbed silently between description and CTA. */
    min-height: 3em;
}

.mc-channel-status-card__cta-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    /* L123/L124 — was `margin-top: auto` to pin CTA to bottom edge,
       but that re-created the empty-space-above-CTA gap for the SMS
       card (1-CTA, no Manage line) inside the grid-stretched height.
       Without margin-top:auto, the card sizes to content and the SMS
       card is naturally shorter than WA/TG. User-confirmed accepted. */
}

.mc-channel-status-card__cta-wrap .mc-btn {
    width: 100%;
    justify-content: center;
}

.mc-channel-status-card__cta-hint {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-align: center;
}

.mc-channel-status-card__why-empty {
    margin-top: 0;
}

.mc-channel-status-card[aria-disabled="true"] {
    opacity: 0.65;
    pointer-events: none;
}

/* 3-up grid wrapper */
.mc-channel-status-card-grid {
    display: grid;
    /* `auto-fit` e non un numero fisso di colonne.
       Con `repeat(3, …)` due schede occupavano due terzi della riga e il terzo
       restava vuoto: sulla pagina «Canali e consumo», dove i canali a consumo
       sono DUE, le schede finivano larghe la meta' di quella sotto e la riga
       si leggeva come se mancasse qualcosa. `auto-fit` collassa le tracce
       vuote, quindi due schede si dividono la riga intera e tre restano tre.
       `minmax(0, …)` e non `minmax(280px, …)`: la larghezza minima automatica
       di `1fr` e' il contenuto, e un nome di provider lungo allargherebbe la
       colonna spingendo fuori l'altra (CLAUDE.md §4). */
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 640px) {
    .mc-channel-status-card-grid { grid-template-columns: 1fr; }
}

/* ==================================================================
 * mc-credential-input — secret-handling input primitive (W2)
 * Showcase: /rui/ui#mc-credential-input
 *
 * Extends .mc-form-input with a right-side action rail (status glyph,
 * show/hide eye, copy-to-clipboard) plus an optional paste-detect hint
 * line below. Used by every credentials wizard (Twilio Account SID +
 * Auth Token, Meta WABA System User token, Telegram BotFather token).
 *
 * Markup contract:
 *   .mc-credential-input[data-state="empty|filled|validating|valid|invalid"]
 *                       [data-paste="none|match|mismatch"]
 *                       [data-has-prefix]
 *     .mc-credential-input__field
 *       .mc-credential-input__prefix        — optional left-side icon
 *       input.mc-form-input.mc-credential-input__control
 *       .mc-credential-input__rail
 *         .mc-credential-input__status      — validating spinner / valid / invalid glyph
 *         button.mc-credential-input__btn[data-action="toggle-mask"][aria-pressed]
 *         button.mc-credential-input__btn[data-action="copy"]
 *     .mc-form-help                          — help (default) / success / danger toned
 *     .mc-credential-input__paste-hint       — appears on data-paste="match|mismatch"
 *
 * Tokens consumed: --color-text, --color-text-muted, --color-hover-bg,
 *   --color-card-bg, --color-success, --color-error, --color-warning,
 *   --color-success-bg, --color-warning-bg, --color-teal-ring,
 *   --color-error-ring, --input-height, --radius-input, --radius-sm,
 *   --space-* scale, --text-sm, --text-base, --transition-fast.
 * Reuses keyframes @mc-spin (defined later in this file at ~line 3745).
 * ================================================================== */

.mc-credential-input { display: block; }

.mc-credential-input__field {
    position: relative;
}

.mc-credential-input__control.mc-form-input {
    padding-right: calc(var(--space-16) + var(--space-8));
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}
.mc-credential-input[data-has-prefix] .mc-credential-input__control.mc-form-input {
    padding-left: var(--space-9);
}

.mc-credential-input__prefix {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.mc-credential-input__rail {
    position: absolute;
    top: 50%;
    right: var(--space-1-5);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: var(--space-0-5);
    pointer-events: none;
}
.mc-credential-input__rail > * { pointer-events: auto; }

.mc-credential-input__btn {
    width: var(--space-8);
    height: var(--space-8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-input);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    padding: 0;
}
.mc-credential-input__btn:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}
.mc-credential-input__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--space-0-5) var(--color-teal-ring);
    color: var(--color-text);
}
.mc-credential-input__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.mc-credential-input__btn[aria-pressed="true"] {
    color: var(--color-text);
    background: var(--color-hover-bg);
}

/* Status glyph slot — hidden by default; shown per data-state */
.mc-credential-input__status {
    width: var(--space-6);
    height: var(--space-6);
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    line-height: 0;
}
.mc-credential-input[data-state="validating"] .mc-credential-input__status,
.mc-credential-input[data-state="valid"]      .mc-credential-input__status,
.mc-credential-input[data-state="invalid"]    .mc-credential-input__status {
    display: inline-flex;
}
.mc-credential-input[data-state="valid"]   .mc-credential-input__status { color: var(--color-success); }
.mc-credential-input[data-state="invalid"] .mc-credential-input__status { color: var(--color-error); }
.mc-credential-input[data-state="validating"] .mc-credential-input__status > * {
    animation: mc-spin 0.9s linear infinite;
    transform-origin: center;
}

/* Sub-icon visibility (one slot, three glyphs — show the matching one) */
.mc-credential-input__status [data-status-icon] { display: none; }
.mc-credential-input[data-state="valid"]      .mc-credential-input__status [data-status-icon="valid"]      { display: inline-flex; }
.mc-credential-input[data-state="invalid"]    .mc-credential-input__status [data-status-icon="invalid"]    { display: inline-flex; }
.mc-credential-input[data-state="validating"] .mc-credential-input__status [data-status-icon="validating"] { display: inline-flex; }

/* Border state overrides — layered on .mc-form-input baseline */
.mc-credential-input[data-state="valid"]   .mc-credential-input__control.mc-form-input { border-color: var(--color-success); }
.mc-credential-input[data-state="invalid"] .mc-credential-input__control.mc-form-input { border-color: var(--color-error); }
.mc-credential-input[data-state="invalid"] .mc-credential-input__control.mc-form-input:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 var(--space-0-5) var(--color-error-ring);
}

/* Help-text tone — green for valid, red for invalid (otherwise muted) */
.mc-credential-input[data-state="valid"]   ~ .mc-form-help,
.mc-credential-input[data-state="valid"]    .mc-form-help { color: var(--color-success); }
.mc-credential-input[data-state="invalid"] ~ .mc-form-help,
.mc-credential-input[data-state="invalid"]  .mc-form-help { color: var(--color-error); }

/* Paste-detect hint chip — sits below field; toggled via data-paste */
.mc-credential-input__paste-hint {
    display: none;
    margin-top: var(--space-1-5);
    padding: var(--space-1) var(--space-2-5);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    align-items: center;
    gap: var(--space-1-5);
    background: var(--color-warning-bg);
    color: var(--color-warning);
}
.mc-credential-input[data-paste="match"]    .mc-credential-input__paste-hint {
    display: inline-flex;
    background: var(--color-success-bg);
    color: var(--color-success);
}
.mc-credential-input[data-paste="mismatch"] .mc-credential-input__paste-hint {
    display: inline-flex;
}
.mc-credential-input__paste-hint .mc-icon { flex-shrink: 0; }

/* Mobile — ≤480px: drop copy button (eye stays); trim right-padding */
@media (max-width: 480px) {
    .mc-credential-input__btn[data-action="copy"] { display: none; }
    .mc-credential-input__control.mc-form-input { padding-right: var(--space-14); }
    .mc-credential-input__paste-hint { padding: var(--space-1) var(--space-2); }
}

/* ==================================================================
 * mc-credential-helper-screenshot — annotated vendor-console screenshot
 * Showcase: /rui/ui#mc-credential-helper-screenshot
 *
 * Sits beside mc-credential-input in wizard steps. Shows the user exactly
 * where to find a vendor credential in the vendor's own console (Twilio
 * Account Info page, Meta Business Manager, Telegram @BotFather chat).
 * Numbered pins overlay the screenshot at percent positions and reveal a
 * tooltip on hover/focus describing what to click.
 *
 * Markup contract:
 *   figure.mc-credential-helper-screenshot[data-aspect="16:9|4:3|1:1|auto"]
 *                                         [data-state="default|loading|error"]
 *                                         [data-channel="sms|whatsapp|telegram|email|multi"]
 *     header.mc-credential-helper-screenshot__header
 *       h3.mc-credential-helper-screenshot__title
 *       p.mc-credential-helper-screenshot__intro
 *     div.mc-credential-helper-screenshot__frame
 *       img.mc-credential-helper-screenshot__img   (or inline svg mockup)
 *       span.mc-credential-helper-screenshot__pin[style="--pin-x:42%;--pin-y:28%"]
 *                                                 tabindex="0"
 *         span.mc-credential-helper-screenshot__pin-number
 *         span.mc-credential-helper-screenshot__pin-tip[role="tooltip"]
 *       button.mc-credential-helper-screenshot__expand   (optional lightbox trigger)
 *     figcaption.mc-credential-helper-screenshot__caption
 *
 * Pin tint inherits from --chip-tone if [data-channel] is set (matches
 * mc-msg-channel-chip's channel-locals); otherwise defaults to --chart-1.
 * Lightbox wire-up = consumer JS via `data-action="expand"` (showcase
 * demo is static; plugin code triggers the real mc-popup).
 *
 * Tokens consumed: --color-card-bg, --color-bg-subtle, --color-border,
 *   --color-text, --color-text-muted, --color-tooltip-bg,
 *   --color-tooltip-text, --color-tooltip-border, --shadow-sm,
 *   --shadow-md, --radius-card, --radius-input, --radius-sm,
 *   --space-* scale, --text-sm/base/lg, --weight-semibold/bold,
 *   --transition-fast, --chart-1, --msg-ch-* (via [data-channel]).
 * ================================================================== */

.mc-credential-helper-screenshot {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.mc-credential-helper-screenshot__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.mc-credential-helper-screenshot__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}
.mc-credential-helper-screenshot__intro {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Channel-tone alias (mirrors mc-msg-channel-chip pattern from L24) */
.mc-credential-helper-screenshot {
    --pin-tone: var(--chart-1);
    --pin-ink: var(--color-white, #FFFFFF);
}
.mc-credential-helper-screenshot[data-channel="sms"]      { --pin-tone: var(--msg-ch-sms); }
.mc-credential-helper-screenshot[data-channel="whatsapp"] { --pin-tone: var(--msg-ch-wa); }
.mc-credential-helper-screenshot[data-channel="telegram"] { --pin-tone: var(--msg-ch-tg); }
.mc-credential-helper-screenshot[data-channel="email"]    { --pin-tone: var(--msg-ch-email); }
.mc-credential-helper-screenshot[data-channel="multi"]    { --pin-tone: var(--msg-ch-multi); }

.mc-credential-helper-screenshot__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-input);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
}
.mc-credential-helper-screenshot[data-aspect="16:9"] .mc-credential-helper-screenshot__frame { aspect-ratio: 16 / 9; }
.mc-credential-helper-screenshot[data-aspect="4:3"]  .mc-credential-helper-screenshot__frame { aspect-ratio: 4 / 3; }
.mc-credential-helper-screenshot[data-aspect="1:1"]  .mc-credential-helper-screenshot__frame { aspect-ratio: 1 / 1; }
/* data-aspect="auto" → frame inherits content height (img + intrinsic) */

.mc-credential-helper-screenshot__img,
.mc-credential-helper-screenshot__frame > svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Expand button (top-right corner) */
.mc-credential-helper-screenshot__expand {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: var(--space-8);
    height: var(--space-8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: var(--color-white, #FFFFFF);
    border-radius: var(--radius-input);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}
.mc-credential-helper-screenshot:hover .mc-credential-helper-screenshot__expand,
.mc-credential-helper-screenshot:focus-within .mc-credential-helper-screenshot__expand {
    opacity: 1;
}
.mc-credential-helper-screenshot__expand:hover {
    background: rgba(0, 0, 0, 0.75);
}
.mc-credential-helper-screenshot__expand:focus-visible {
    outline: 2px solid var(--color-teal-ring);
    outline-offset: 2px;
    opacity: 1;
}

/* Pin — absolute positioned via inline --pin-x / --pin-y */
.mc-credential-helper-screenshot__pin {
    position: absolute;
    top: var(--pin-y, 50%);
    left: var(--pin-x, 50%);
    transform: translate(-50%, -50%);
    width: var(--space-7, 28px);
    height: var(--space-7, 28px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 999px);
    background: var(--pin-tone);
    color: var(--pin-ink);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0,0,0,0.18)), 0 0 0 2px var(--color-card-bg);
    cursor: pointer;
    transition: transform 180ms cubic-bezier(0.2, 0, 0.1, 1.2), box-shadow var(--transition-fast);
    outline: none;
}
.mc-credential-helper-screenshot__pin:hover,
.mc-credential-helper-screenshot__pin:focus-visible {
    transform: translate(-50%, -50%) scale(1.18);
    box-shadow: var(--shadow-lg, 0 8px 16px rgba(0,0,0,0.22)), 0 0 0 2px var(--color-card-bg);
}
.mc-credential-helper-screenshot__pin-number {
    display: inline-block;
    pointer-events: none;
}

/* Pin tooltip (CSS-only hover/focus reveal) — appears below the pin by default */
.mc-credential-helper-screenshot__pin-tip {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 50%;
    transform: translateX(-50%) scale(0.96);
    transform-origin: top center;
    min-width: 180px;
    max-width: 260px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-tooltip-bg);
    color: var(--color-tooltip-text);
    border: 1px solid var(--color-tooltip-border);
    border-radius: var(--radius-input);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.45;
    text-align: left;
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0,0,0,0.18));
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease-out, transform 140ms cubic-bezier(0.2, 0, 0.1, 1.2);
    z-index: 1;
    white-space: normal;
}
.mc-credential-helper-screenshot__pin:hover .mc-credential-helper-screenshot__pin-tip,
.mc-credential-helper-screenshot__pin:focus-visible .mc-credential-helper-screenshot__pin-tip,
.mc-credential-helper-screenshot__pin:focus .mc-credential-helper-screenshot__pin-tip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
/* Pin near top → flip tooltip below to above the pin (variant via data-tip-above) */
.mc-credential-helper-screenshot__pin[data-tip-above] .mc-credential-helper-screenshot__pin-tip {
    top: auto;
    bottom: calc(100% + var(--space-2));
    transform-origin: bottom center;
}

.mc-credential-helper-screenshot__caption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Loading state — skeleton shimmer */
.mc-credential-helper-screenshot[data-state="loading"] .mc-credential-helper-screenshot__frame {
    background: linear-gradient(90deg,
        var(--color-bg-subtle) 0%,
        var(--color-hover-bg) 50%,
        var(--color-bg-subtle) 100%);
    background-size: 200% 100%;
    animation: mc-credential-helper-shimmer 1.4s ease-in-out infinite;
}
.mc-credential-helper-screenshot[data-state="loading"] .mc-credential-helper-screenshot__img,
.mc-credential-helper-screenshot[data-state="loading"] .mc-credential-helper-screenshot__pin,
.mc-credential-helper-screenshot[data-state="loading"] .mc-credential-helper-screenshot__expand {
    display: none;
}
@keyframes mc-credential-helper-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Error state — placeholder block with icon + text */
.mc-credential-helper-screenshot[data-state="error"] .mc-credential-helper-screenshot__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-6);
    color: var(--color-text-muted);
}
.mc-credential-helper-screenshot[data-state="error"] .mc-credential-helper-screenshot__img,
.mc-credential-helper-screenshot[data-state="error"] .mc-credential-helper-screenshot__pin,
.mc-credential-helper-screenshot[data-state="error"] .mc-credential-helper-screenshot__expand {
    display: none;
}
.mc-credential-helper-screenshot__error-fallback {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
.mc-credential-helper-screenshot[data-state="error"] .mc-credential-helper-screenshot__error-fallback {
    display: inline-flex;
}
.mc-credential-helper-screenshot__error-fallback .mc-icon {
    color: var(--color-border);
}

/* Side-by-side composition with mc-credential-input (Linear-style 50/50)
   When the helper card is inside a parent .mc-credential-helper-row, the
   parent owns the grid; the helper just stretches. Below 768px → stack. */
.mc-credential-helper-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
}
@media (max-width: 768px) {
    .mc-credential-helper-row { grid-template-columns: 1fr; }
}

/* Mobile — ≤480px: pin tooltip wraps below screenshot as a list item
   instead of overlaying (avoids viewport overflow on narrow widths) */
@media (max-width: 480px) {
    .mc-credential-helper-screenshot__pin-tip {
        min-width: 140px;
        max-width: 200px;
    }
}

/* ==================================================================
 * mc-credential-helper-video — embedded video walkthrough card
 * Showcase: /rui/ui#mc-credential-helper-video
 *
 * Companion to mc-credential-helper-screenshot for credentials where a
 * static screenshot is not enough — e.g. Meta Embedded Signup OAuth-like
 * flow, Twilio Verify SCA. Self-hosted MP4 OR Loom/Vimeo/YouTube embed
 * (host detection lives in consumer JS; this primitive owns the chrome).
 * Lazy: poster + duration chip + play overlay until the user clicks.
 * Chapter markers below frame jump playback head.
 *
 * Markup contract:
 *   figure.mc-credential-helper-video[data-aspect="16:9|9:16|4:3"]
 *                                    [data-state="idle|loading|playing|paused|ended|error"]
 *                                    [data-channel="sms|whatsapp|telegram|email|multi"]
 *     header.mc-credential-helper-video__header
 *       h3.mc-credential-helper-video__title
 *       p.mc-credential-helper-video__intro
 *     div.mc-credential-helper-video__frame
 *       div.mc-credential-helper-video__poster   (img OR inline svg)
 *       (consumer JS inserts <video> / <iframe> here on play)
 *       span.mc-credential-helper-video__duration-chip  ("0:42")
 *       button.mc-credential-helper-video__play-overlay
 *         span.mc-credential-helper-video__play-btn (icon: play)
 *       span.mc-credential-helper-video__loading-spinner   (state=loading)
 *       button.mc-credential-helper-video__replay-overlay  (state=ended)
 *       span.mc-credential-helper-video__error-fallback    (state=error)
 *     div.mc-credential-helper-video__chapters
 *       button.mc-credential-helper-video__chapter[aria-current="true|false"]
 *         span.mc-credential-helper-video__chapter-time
 *         span.mc-credential-helper-video__chapter-label
 *     a.mc-credential-helper-video__transcript-link    (optional)
 *     figcaption.mc-credential-helper-video__caption
 *
 * Channel tone via [data-channel] sets --pin-tone (matches C17 pattern).
 * Overlay scrims use --color-overlay / --color-overlay-heavy tokens so
 * dark mode automatically deepens contrast (per L23 + L24).
 *
 * Tokens consumed: --color-card-bg, --color-bg-subtle, --color-border,
 *   --color-text, --color-text-muted, --color-hover-bg, --color-white,
 *   --color-overlay, --color-overlay-heavy, --shadow-md, --shadow-lg,
 *   --radius-card, --radius-input, --radius-sm, --radius-full,
 *   --space-* scale, --text-xs/sm/base/lg, --weight-semibold/bold,
 *   --transition-fast, --chart-1, --msg-ch-* (via [data-channel]),
 *   --color-teal-ring.
 * ================================================================== */

.mc-credential-helper-video {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    --pin-tone: var(--chart-1);
}
.mc-credential-helper-video[data-channel="sms"]      { --pin-tone: var(--msg-ch-sms); }
.mc-credential-helper-video[data-channel="whatsapp"] { --pin-tone: var(--msg-ch-wa); }
.mc-credential-helper-video[data-channel="telegram"] { --pin-tone: var(--msg-ch-tg); }
.mc-credential-helper-video[data-channel="email"]    { --pin-tone: var(--msg-ch-email); }
.mc-credential-helper-video[data-channel="multi"]    { --pin-tone: var(--msg-ch-multi); }

.mc-credential-helper-video__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.mc-credential-helper-video__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}
.mc-credential-helper-video__intro {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.mc-credential-helper-video__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-input);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    aspect-ratio: 16 / 9;
}
.mc-credential-helper-video[data-aspect="9:16"] .mc-credential-helper-video__frame { aspect-ratio: 9 / 16; }
.mc-credential-helper-video[data-aspect="4:3"]  .mc-credential-helper-video__frame { aspect-ratio: 4 / 3; }

.mc-credential-helper-video__poster,
.mc-credential-helper-video__poster > svg,
.mc-credential-helper-video__poster > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Duration chip (always visible while poster is) */
.mc-credential-helper-video__duration-chip {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-overlay-heavy);
    color: var(--color-white, #FFFFFF);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.mc-credential-helper-video__duration-chip .mc-icon { opacity: 0.85; }

/* Play overlay — full-frame click target with centered button */
.mc-credential-helper-video__play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-overlay);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition-fast);
}
.mc-credential-helper-video__play-overlay:hover {
    background: var(--color-overlay-heavy);
}
.mc-credential-helper-video__play-overlay:focus-visible {
    outline: 2px solid var(--color-teal-ring);
    outline-offset: -4px;
}
.mc-credential-helper-video__play-btn {
    width: var(--space-16, 64px);
    height: var(--space-16, 64px);
    border-radius: 50%;
    background: var(--color-white, #FFFFFF);
    /* Always-dark ink on the always-white play circle — overlay sits on top of
       image content and stays theme-neutral in both light + dark modes. */
    color: var(--color-ink-on-image, #1A1A1A);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0,0,0,0.18));
    transition: transform 180ms cubic-bezier(0.2, 0, 0.1, 1.2), box-shadow var(--transition-fast);
    pointer-events: none; /* the overlay button owns the click */
}
.mc-credential-helper-video__play-overlay:hover .mc-credential-helper-video__play-btn {
    transform: scale(1.08);
    box-shadow: var(--shadow-lg, 0 8px 16px rgba(0,0,0,0.22));
}

/* Loading spinner overlay (state=loading) */
.mc-credential-helper-video__loading-spinner {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--color-overlay-heavy);
    color: var(--color-white, #FFFFFF);
}
.mc-credential-helper-video[data-state="loading"] .mc-credential-helper-video__loading-spinner { display: inline-flex; }
.mc-credential-helper-video[data-state="loading"] .mc-credential-helper-video__loading-spinner > * {
    animation: mc-spin 0.9s linear infinite;
}
.mc-credential-helper-video[data-state="loading"] .mc-credential-helper-video__play-overlay { display: none; }

/* Playing / paused — overlay hides; native video controls take over */
.mc-credential-helper-video[data-state="playing"] .mc-credential-helper-video__play-overlay,
.mc-credential-helper-video[data-state="playing"] .mc-credential-helper-video__duration-chip,
.mc-credential-helper-video[data-state="playing"] .mc-credential-helper-video__poster {
    display: none;
}
.mc-credential-helper-video[data-state="paused"] .mc-credential-helper-video__play-overlay {
    background: var(--color-overlay);
}

/* Replay overlay (state=ended) — same shape as play but with a CTA slot */
.mc-credential-helper-video__replay-overlay {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--color-overlay-heavy);
    color: var(--color-white, #FFFFFF);
    border: none;
    padding: var(--space-4);
    cursor: pointer;
    text-align: center;
}
.mc-credential-helper-video[data-state="ended"] .mc-credential-helper-video__replay-overlay { display: inline-flex; }
.mc-credential-helper-video[data-state="ended"] .mc-credential-helper-video__play-overlay,
.mc-credential-helper-video[data-state="ended"] .mc-credential-helper-video__duration-chip {
    display: none;
}
.mc-credential-helper-video__replay-cta {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.4;
}

/* Error state */
.mc-credential-helper-video__error-fallback {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
}
.mc-credential-helper-video[data-state="error"] .mc-credential-helper-video__error-fallback { display: inline-flex; }
.mc-credential-helper-video[data-state="error"] .mc-credential-helper-video__poster,
.mc-credential-helper-video[data-state="error"] .mc-credential-helper-video__play-overlay,
.mc-credential-helper-video[data-state="error"] .mc-credential-helper-video__duration-chip {
    display: none;
}
.mc-credential-helper-video__error-fallback .mc-icon { color: var(--color-border); }

/* Chapter ribbon */
.mc-credential-helper-video__chapters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    margin: 0;
    padding: 0;
}
.mc-credential-helper-video__chapter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.3;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.mc-credential-helper-video__chapter:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}
.mc-credential-helper-video__chapter:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-teal-ring);
}
.mc-credential-helper-video__chapter[aria-current="true"] {
    background: color-mix(in srgb, var(--pin-tone) 14%, transparent);
    color: var(--color-text);
    border-color: var(--pin-tone);
}
.mc-credential-helper-video__chapter-time {
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-credential-helper-video__chapter[aria-current="true"] .mc-credential-helper-video__chapter-time {
    color: var(--pin-tone);
}

/* Transcript link */
.mc-credential-helper-video__transcript-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.mc-credential-helper-video__transcript-link:hover { color: var(--color-text); text-decoration: underline; }

.mc-credential-helper-video__caption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Mobile — ≤480px: stack chapters vertically; smaller play button */
@media (max-width: 480px) {
    .mc-credential-helper-video__chapters {
        flex-direction: column;
        align-items: stretch;
    }
    .mc-credential-helper-video__chapter {
        justify-content: flex-start;
    }
    .mc-credential-helper-video__play-btn {
        width: var(--space-12, 48px);
        height: var(--space-12, 48px);
    }
}

/* ==================================================================
 * mc-webhook-url-helper — vendor webhook configuration card
 * Showcase: /rui/ui#mc-webhook-url-helper
 *
 * Used in wizard step 5 of every messenger channel: surfaces the
 * per-customer per-vendor webhook URL (signed, opaque token) that the
 * customer pastes into the vendor's console (Twilio Messaging Webhook,
 * Meta WABA App Webhook, Telegram setWebhook). Plus signing secret
 * reveal · regenerate / rotate · expand-to-full-URL · vendor-specific
 * paste instructions · state-driven banner (just-rotated / expired /
 * never-tested / recent-failures).
 *
 * Markup contract:
 *   div.mc-webhook-url-helper[data-vendor="twilio|meta|telegram"]
 *                            [data-state="active|rotating|just-rotated|expired|never-tested|recent-failures"]
 *                            [data-channel="sms|whatsapp|telegram|email|multi"]
 *     div.mc-webhook-url-helper__banner.mc-alert.mc-alert-{tone}   (state-gated)
 *     header.mc-webhook-url-helper__header
 *       h3.mc-webhook-url-helper__title
 *       span.mc-webhook-url-helper__last-rotated
 *     div.mc-webhook-url-helper__url-row
 *       div.mc-webhook-url-helper__url-display[aria-expanded]
 *         (mono URL text — truncate one line by default, full on expand)
 *       div.mc-webhook-url-helper__rail
 *         button[data-action="copy"]      (Copy short)
 *         button[data-action="expand"]    (Expand / collapse)
 *         button[data-action="regenerate"] (warning-tinted rotate)
 *     div.mc-webhook-url-helper__secret-row   (optional)
 *       span.mc-webhook-url-helper__secret-label
 *       code.mc-webhook-url-helper__secret-value (masked by default)
 *       button[data-action="toggle-secret"][aria-pressed]
 *       button[data-action="copy-secret"]
 *     div.mc-webhook-url-helper__instructions
 *     div.mc-webhook-url-helper__footer
 *       (last-test chip · "Test ping" CTA)
 *
 * Tokens: --color-card-bg, --color-bg-subtle, --color-border,
 *   --color-text, --color-text-muted, --color-hover-bg, --color-warning,
 *   --color-warning-bg, --color-link, --color-teal-ring,
 *   --color-error/-bg, --radius-card, --radius-input, --radius-sm,
 *   --space-* scale, --transition-fast, --shadow-sm.
 * Composes mc-alert + mc-icon + (reuses mc-credential-input's btn rail look).
 * ================================================================== */

.mc-webhook-url-helper {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

/* State-driven banner — only one variant renders per state */
.mc-webhook-url-helper__banner {
    display: none;
    margin: 0;
}
.mc-webhook-url-helper[data-state="just-rotated"]    .mc-webhook-url-helper__banner[data-banner="just-rotated"],
.mc-webhook-url-helper[data-state="expired"]         .mc-webhook-url-helper__banner[data-banner="expired"],
.mc-webhook-url-helper[data-state="never-tested"]    .mc-webhook-url-helper__banner[data-banner="never-tested"],
.mc-webhook-url-helper[data-state="recent-failures"] .mc-webhook-url-helper__banner[data-banner="recent-failures"] {
    display: flex;
}

.mc-webhook-url-helper__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.mc-webhook-url-helper__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}
.mc-webhook-url-helper__last-rotated {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* URL row — grid: 1fr URL · auto rail */
.mc-webhook-url-helper__url-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: stretch;
}
.mc-webhook-url-helper__url-display {
    background: var(--color-hover-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: var(--space-2-5) var(--space-3);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.55;
    word-break: break-all;
    overflow-wrap: anywhere;
    /* Default: one-line clamp (canonical URL); expand → full URL with query */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    user-select: all;
}
.mc-webhook-url-helper__url-display[aria-expanded="true"] {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}
.mc-webhook-url-helper__url-display:focus {
    outline: 2px solid var(--color-teal-ring);
    outline-offset: 2px;
}

/* Action rail — vertical column of icon-buttons */
.mc-webhook-url-helper__rail {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.mc-webhook-url-helper__btn {
    width: var(--space-9, 36px);
    height: var(--space-9, 36px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    padding: 0;
}
.mc-webhook-url-helper__btn:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.mc-webhook-url-helper__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-teal-ring);
    color: var(--color-text);
}
.mc-webhook-url-helper__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Regenerate button — risk-tinted */
.mc-webhook-url-helper__btn[data-action="regenerate"] {
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}
.mc-webhook-url-helper__btn[data-action="regenerate"]:hover {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

/* Expand button — flips to active when aria-expanded=true */
.mc-webhook-url-helper__btn[aria-expanded="true"] {
    background: var(--color-hover-bg);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

/* Secret reveal row */
.mc-webhook-url-helper__secret-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-3);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-input);
    border: 1px solid var(--color-border);
}
.mc-webhook-url-helper__secret-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.mc-webhook-url-helper__secret-value {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    color: var(--color-text);
    word-break: break-all;
    user-select: all;
}
.mc-webhook-url-helper__secret-row .mc-webhook-url-helper__rail {
    display: inline-flex;
}

/* Vendor instructions block */
.mc-webhook-url-helper__instructions {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-input);
    border: 1px dashed var(--color-border);
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.55;
    display: flex;
    gap: var(--space-2-5);
    align-items: flex-start;
}
.mc-webhook-url-helper__instructions strong { color: var(--color-text); }
.mc-webhook-url-helper__instructions .mc-icon { color: var(--color-text-muted); flex-shrink: 0; margin-top: 2px; }
.mc-webhook-url-helper__instructions a {
    color: var(--color-link);
    text-decoration: none;
}
.mc-webhook-url-helper__instructions a:hover { text-decoration: underline; }

/* Footer — last-test chip + Test ping CTA */
.mc-webhook-url-helper__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-1);
}
.mc-webhook-url-helper__last-test {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mc-webhook-url-helper__last-test--success { color: var(--color-success); }
.mc-webhook-url-helper__last-test--error   { color: var(--color-error); }
.mc-webhook-url-helper__last-test--never   { color: var(--color-text-muted); }

/* Rotating state — disable rail + shimmer URL */
.mc-webhook-url-helper[data-state="rotating"] .mc-webhook-url-helper__url-display {
    color: transparent;
    background: linear-gradient(90deg,
        var(--color-hover-bg) 0%,
        var(--color-bg-subtle) 50%,
        var(--color-hover-bg) 100%);
    background-size: 200% 100%;
    animation: mc-webhook-url-helper-shimmer 1.3s ease-in-out infinite;
    user-select: none;
}
.mc-webhook-url-helper[data-state="rotating"] .mc-webhook-url-helper__btn {
    opacity: 0.4;
    pointer-events: none;
}
@keyframes mc-webhook-url-helper-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Mobile — ≤480px: URL wraps freely; rail stacks below URL as full-width row */
@media (max-width: 640px) {
    .mc-webhook-url-helper__url-row {
        grid-template-columns: 1fr;
    }
    .mc-webhook-url-helper__url-display {
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
    }
    .mc-webhook-url-helper__rail {
        justify-content: flex-end;
    }
    .mc-webhook-url-helper__secret-row {
        grid-template-columns: 1fr;
        gap: var(--space-1-5);
    }
}

/* ==================================================================
 * mc-celebration-svg — wizard-done celebration surface
 * Showcase: /rui/ui#mc-celebration-svg
 *
 * The "you did it!" moment at the end of each setup wizard (S2.6 SMS
 * done · S2.7 step 5 WA done · S2.8 step 5 TG done). Large bespoke
 * inline SVG (per L15 9-step recipe) with channel-tone confetti +
 * sparkle accents around a per-channel mascot (phone with check /
 * chat bubble with check / paper plane with check). Headline +
 * subhead text below; optional next-steps mc-card slot.
 *
 * Markup contract:
 *   div.mc-celebration-svg[data-channel="sms|whatsapp|telegram"]
 *                         [data-size="lg|xl"]
 *                         [data-motion="on|off"]
 *     div.mc-celebration-svg__art          (inline SVG, 280×200 viewBox)
 *     h2.mc-celebration-svg__headline
 *     p.mc-celebration-svg__subhead
 *     (optional) mc-card via slot "next_steps"
 *
 * Per-channel art lives at:
 *   resources/views/refactor/partials/illustrations/messenger/celebration-{channel}.blade.php
 * Plugin author can mirror via `acelle_messenger::partials.celebration_{channel}` if
 * a plugin-namespaced partial is required (L13 mandates inline @include, NOT <img src>).
 *
 * Tokens consumed: --msg-ch-{sms|wa|tg} family · --msg-ch-{...}-ink ·
 *   --chart-1 (sparkle constant — always pastel blue) · --color-text ·
 *   --color-card-bg · --color-text-muted · --illust-stroke ·
 *   --text-2xl/xl/base · --weight-bold · --space-* scale.
 * ================================================================== */

.mc-celebration-svg {
    --celebration-size: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}
.mc-celebration-svg[data-size="xl"] { --celebration-size: 360px; }

.mc-celebration-svg__art {
    width: var(--celebration-size);
    max-width: 100%;
    height: auto;
    display: block;
}
.mc-celebration-svg__art > svg {
    width: 100%;
    height: auto;
    display: block;
}

.mc-celebration-svg__headline {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
    max-width: 540px;
}
.mc-celebration-svg__subhead {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.55;
    max-width: 480px;
}

/* Subtle 600ms pop on first render — opts out via prefers-reduced-motion */
@keyframes mc-celebration-svg-pop {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
.mc-celebration-svg[data-motion="on"] .mc-celebration-svg__art {
    animation: mc-celebration-svg-pop 600ms cubic-bezier(0.2, 0, 0.1, 1.2) both;
}
@media (prefers-reduced-motion: reduce) {
    .mc-celebration-svg__art { animation: none !important; }
}

/* Mobile — shrink the SVG, drop the headline a step */
@media (max-width: 480px) {
    .mc-celebration-svg { --celebration-size: 220px; }
    .mc-celebration-svg__headline { font-size: var(--text-xl); }
}

/* ==================================================================
 * mc-faq-popover — floating help bubble (Wave 3 extend of mc-popup)
 * Showcase: /rui/ui#mc-faq-popover
 *
 * Bottom-right floating ?-icon trigger that opens a popover with the
 * top 3 FAQs for the current page + a "See all docs" footer link. Per
 * onboarding affordance #8 from PLAN.md §B — surfaces on every messenger
 * screen via `<x-mc-faq-popover :page-id="..." :faqs="..." />`. Extends
 * the existing mc-popup lifecycle (consumer JS toggles `data-state`;
 * ESC + outside-click close handled at the page level).
 *
 * Markup contract:
 *   div.mc-faq-popover[data-state="closed|open|pulsing"]
 *                     [data-position="bottom-right|bottom-left|top-right|top-left"]
 *                     [data-context="floating|inline"]
 *     button.mc-faq-popover__trigger    (48px ? icon)
 *     div.mc-faq-popover__panel
 *       header.mc-faq-popover__header
 *         h3.mc-faq-popover__title
 *         button.mc-faq-popover__close
 *       div.mc-faq-popover__list
 *         details.mc-faq-popover__item[open]
 *           summary.mc-faq-popover__item-summary
 *           div.mc-faq-popover__item-body
 *             a.mc-faq-popover__item-link
 *         (repeat 2-3 times)
 *       footer.mc-faq-popover__footer
 *         a (View all docs →)
 *
 * `data-context="inline"` overrides position:fixed → static for showcase
 * / inline embedding. Production sites use the default fixed mode.
 *
 * Tokens: --color-card-bg · --color-border · --color-border-strong ·
 *   --color-text · --color-text-muted · --color-teal (link/active) ·
 *   --color-teal-ring · --color-teal-light (pulse soft tone) ·
 *   --color-hover-bg · --shadow-dropdown (trigger) · --shadow-modal
 *   (panel) · --radius-card · --radius-input · --radius-full ·
 *   --space-* · --text-sm/base · --weight-semibold/medium ·
 *   --transition-fast · --z-modal (panel above all but tooltips).
 * ================================================================== */

.mc-faq-popover {
    position: fixed;
    z-index: var(--z-modal, 500);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: var(--space-2);
    pointer-events: none;
}
.mc-faq-popover > * { pointer-events: auto; }

/* Position variants */
.mc-faq-popover[data-position="bottom-left"] {
    right: auto;
    left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    align-items: flex-start;
}
.mc-faq-popover[data-position="top-right"] {
    top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
    bottom: auto;
    flex-direction: column;
}
.mc-faq-popover[data-position="top-left"] {
    top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
    left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    right: auto;
    bottom: auto;
    flex-direction: column;
    align-items: flex-start;
}

/* Inline / showcase override — strips position:fixed so the demo can
   live in the document flow without obstructing other showcase sections. */
.mc-faq-popover[data-context="inline"] {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 1;
}

/* Trigger button (the always-visible 48px circle) */
.mc-faq-popover__trigger {
    width: var(--space-12, 48px);
    height: var(--space-12, 48px);
    border-radius: var(--radius-full, 999px);
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-dropdown);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), transform var(--transition-fast),
                box-shadow var(--transition-fast);
}
.mc-faq-popover__trigger:hover {
    color: var(--color-text);
    border-color: var(--color-teal);
    box-shadow: var(--shadow-modal);
    transform: translateY(-2px);
}
.mc-faq-popover__trigger:focus-visible {
    outline: none;
    box-shadow: var(--shadow-dropdown), 0 0 0 3px var(--color-teal-ring);
    color: var(--color-text);
}
.mc-faq-popover__trigger:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Open-state trigger — borrow teal accent to signal "you opened me" */
.mc-faq-popover[data-state="open"] .mc-faq-popover__trigger {
    color: var(--color-teal);
    border-color: var(--color-teal);
    background: var(--color-teal-light);
}

/* Pulse animation — fires once on data-state="pulsing".
   Uses --color-teal-ring as the soft outer-glow tone (no hex). */
@keyframes mc-faq-popover-pulse {
    0%   { box-shadow: var(--shadow-dropdown), 0 0 0 0   var(--color-teal-ring); }
    70%  { box-shadow: var(--shadow-dropdown), 0 0 0 18px transparent; }
    100% { box-shadow: var(--shadow-dropdown), 0 0 0 0   transparent; }
}
.mc-faq-popover[data-state="pulsing"] .mc-faq-popover__trigger {
    animation: mc-faq-popover-pulse 1.6s cubic-bezier(0, 0, 0.2, 1) both;
}

/* Popover panel — hidden by default; shown when data-state="open" */
.mc-faq-popover__panel {
    width: 360px;
    max-width: calc(100vw - var(--space-8));
    max-height: min(480px, calc(100vh - var(--space-16)));
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.mc-faq-popover[data-state="open"] .mc-faq-popover__panel {
    display: flex;
    animation: mc-faq-popover-slide-up 200ms cubic-bezier(0.2, 0, 0.1, 1.2) both;
}
@keyframes mc-faq-popover-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Panel header */
.mc-faq-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3-5) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.mc-faq-popover__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}
.mc-faq-popover__close {
    width: var(--space-7, 28px);
    height: var(--space-7, 28px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-input);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mc-faq-popover__close:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}
.mc-faq-popover__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-teal-ring);
}

/* FAQ list (scrollable middle area) */
.mc-faq-popover__list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    margin: 0;
}
.mc-faq-popover__item {
    border-bottom: 1px solid var(--color-border);
}
.mc-faq-popover__item:last-child { border-bottom: none; }

.mc-faq-popover__item-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.mc-faq-popover__item-summary::-webkit-details-marker { display: none; }
.mc-faq-popover__item-summary::marker { content: ''; }
.mc-faq-popover__item-summary:hover { background: var(--color-hover-bg); }
.mc-faq-popover__item-summary:focus-visible {
    outline: none;
    background: var(--color-hover-bg);
    box-shadow: inset 0 0 0 2px var(--color-teal-ring);
}

/* Chevron caret — CSS-only triangle (rotates 90° on open) */
.mc-faq-popover__item-summary::after {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--color-text-muted);
    border-bottom: 1.5px solid var(--color-text-muted);
    transform: rotate(-45deg);
    transition: transform 220ms cubic-bezier(0.2, 0, 0.1, 1.2);
}
.mc-faq-popover__item[open] .mc-faq-popover__item-summary::after {
    transform: rotate(45deg);
}

.mc-faq-popover__item-body {
    padding: 0 var(--space-4) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.55;
}
.mc-faq-popover__item-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-teal);
    text-decoration: none;
}
.mc-faq-popover__item-link:hover { text-decoration: underline; }

/* Footer "See all docs" */
.mc-faq-popover__footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    text-align: center;
    background: var(--color-bg-subtle);
}
.mc-faq-popover__footer a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-teal);
    text-decoration: none;
}
.mc-faq-popover__footer a:hover { text-decoration: underline; }

/* Mobile (≤480px) — popover becomes a bottom-sheet drawer.
   Only applies when data-context is NOT inline (showcase keeps relative). */
@media (max-width: 480px) {
    .mc-faq-popover:not([data-context="inline"])[data-state="open"] .mc-faq-popover__panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        max-height: 80vh;
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        animation: mc-faq-popover-sheet-up 250ms cubic-bezier(0.2, 0, 0.1, 1.2) both;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    @keyframes mc-faq-popover-sheet-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .mc-faq-popover[data-state="pulsing"] .mc-faq-popover__trigger { animation: none !important; }
    .mc-faq-popover[data-state="open"] .mc-faq-popover__panel { animation: none !important; }
}

/* ==================================================================
 * mc-onboarding-tour — multi-step first-visit tour (Wave 3 extend)
 * Showcase: /rui/ui#mc-onboarding-tour
 *
 * Per PLAN.md §B affordance #6. Fires on first viewport-visible per
 * tour_id (consumer JS gates via localStorage). Two step modes:
 *
 *   1. Modal step — centered card with hero illustration + headline +
 *      body + footer (Skip · progress · Prev · Next). Used for "Welcome
 *      to Messenger" intro before any pointer targeting.
 *   2. Inline pointer — highlights a target element on the page with a
 *      ring + pulsing halo + adjacent tooltip carrying the same body
 *      content + footer. Tooltip arrow points at the target.
 *
 * Extends mc-feature-guide-popup's modal mode + adds the inline-pointer
 * mode. Consumer JS calls McOnboardingTour.start(tourId, steps); this
 * primitive owns the visual chrome only.
 *
 * Markup contract:
 *   div.mc-onboarding-tour[data-state="open|closed"]
 *                         [data-context="floating|inline"]
 *     div.mc-onboarding-tour__backdrop
 *     div.mc-onboarding-tour__step[data-mode="modal|pointer"]
 *                                 [data-position="top|right|bottom|left"]
 *                                 [data-progress="dots|bar|none"]
 *       (modal mode):
 *         div.mc-onboarding-tour__illust          (optional hero slot)
 *         div.mc-onboarding-tour__body
 *           h3.mc-onboarding-tour__title
 *           p.mc-onboarding-tour__text
 *         footer.mc-onboarding-tour__footer
 *           button.mc-onboarding-tour__skip       (left)
 *           span.mc-onboarding-tour__progress     (center)
 *             .__dots OR .__bar
 *           div.mc-onboarding-tour__nav           (right)
 *             button[data-action="prev"]
 *             button[data-action="next"]
 *       (pointer mode):
 *         div.mc-onboarding-tour__ring            (sits over target)
 *         (the tooltip body is the same shape as modal body+footer)
 *
 * Tokens: --color-card-bg · --color-border · --color-text · --color-text-muted ·
 *   --color-teal · --color-teal-light · --color-teal-ring · --color-overlay ·
 *   --color-hover-bg · --color-bg-subtle · --shadow-modal · --radius-card ·
 *   --radius-full · --space-* · --text-base/lg/xl · --weight-bold/medium ·
 *   --transition-fast · --z-modal · --z-modal-backdrop.
 * ================================================================== */

/* Container — fixed full-viewport overlay; hidden when closed */
.mc-onboarding-tour {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 500);
    display: none;
    pointer-events: none;
}
.mc-onboarding-tour[data-state="open"] { display: block; }
.mc-onboarding-tour[data-state="open"] > * { pointer-events: auto; }

/* Inline-context override — used by showcase so demos embed in the
   document flow without taking over the viewport */
.mc-onboarding-tour[data-context="inline"] {
    position: relative;
    inset: auto;
    z-index: 1;
    display: block;
}
.mc-onboarding-tour[data-context="inline"] .mc-onboarding-tour__backdrop {
    display: none;
}

/* Backdrop scrim — fades the rest of the page */
.mc-onboarding-tour__backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-overlay);
    animation: mc-onboarding-tour-fade-in 200ms ease-out both;
}
@keyframes mc-onboarding-tour-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Modal step — centered card */
.mc-onboarding-tour__step {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mc-onboarding-tour__step[data-mode="modal"] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    max-width: calc(100vw - var(--space-8));
    max-height: calc(100vh - var(--space-16));
    animation: mc-onboarding-tour-modal-in 240ms cubic-bezier(0.2, 0, 0.1, 1.2) both;
}
@keyframes mc-onboarding-tour-modal-in {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.mc-onboarding-tour[data-context="inline"] .mc-onboarding-tour__step[data-mode="modal"] {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto;
    animation: none;
}

/* Hero illustration band (optional, for modal steps) */
.mc-onboarding-tour__illust {
    aspect-ratio: 16 / 6;
    background: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}
.mc-onboarding-tour__illust > svg,
.mc-onboarding-tour__illust > img,
.mc-onboarding-tour__illust > .mc-celebration-svg__art {
    max-width: 240px;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* Body */
.mc-onboarding-tour__body {
    padding: var(--space-5) var(--space-5) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-onboarding-tour__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}
.mc-onboarding-tour__text {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* Footer — three columns: skip / progress / nav */
.mc-onboarding-tour__footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5) var(--space-5);
}
.mc-onboarding-tour__skip {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-input);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.mc-onboarding-tour__skip:hover {
    color: var(--color-text);
    background: var(--color-hover-bg);
}
.mc-onboarding-tour__skip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-teal-ring);
}

.mc-onboarding-tour__progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

/* Progress · dots */
.mc-onboarding-tour__dots {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
}
.mc-onboarding-tour__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.mc-onboarding-tour__dot[aria-current="true"] {
    background: var(--color-teal);
    transform: scale(1.25);
}
.mc-onboarding-tour__dot[data-state="visited"] {
    background: var(--color-teal-hover, var(--color-teal));
    opacity: 0.55;
}

/* Progress · bar */
.mc-onboarding-tour__bar {
    width: 140px;
    height: 4px;
    background: var(--color-hover-bg);
    border-radius: var(--radius-full, 999px);
    overflow: hidden;
}
.mc-onboarding-tour__bar-fill {
    display: block;
    height: 100%;
    background: var(--color-teal);
    border-radius: inherit;
    transition: width 240ms ease-out;
}

/* Progress · counter (always rendered for screen readers) */
.mc-onboarding-tour__counter {
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

/* Nav buttons (Prev / Next) */
.mc-onboarding-tour__nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Inline pointer mode — wraps target element */
.mc-onboarding-tour__pointer {
    position: relative;
    display: inline-block;
}

/* Ring + pulsing halo around target */
.mc-onboarding-tour__ring {
    position: absolute;
    inset: -10px;
    border-radius: var(--radius-card);
    border: 3px solid var(--color-teal);
    pointer-events: none;
    animation: mc-onboarding-tour-pulse 2.2s ease-in-out infinite;
}
@keyframes mc-onboarding-tour-pulse {
    0%, 100% { box-shadow: 0 0 0 6px var(--color-teal-ring); }
    50%      { box-shadow: 0 0 0 14px var(--color-teal-ring); }
}

/* Tooltip — positioned around the target */
.mc-onboarding-tour__step[data-mode="pointer"] {
    position: absolute;
    width: 320px;
    max-width: calc(100vw - var(--space-8));
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
    animation: mc-onboarding-tour-tip-in 200ms cubic-bezier(0.2, 0, 0.1, 1.2) both;
}
@keyframes mc-onboarding-tour-tip-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mc-onboarding-tour__step[data-mode="pointer"][data-position="bottom"] {
    top: calc(100% + var(--space-3-5));
    left: 50%;
    transform: translateX(-50%);
}
.mc-onboarding-tour__step[data-mode="pointer"][data-position="top"] {
    bottom: calc(100% + var(--space-3-5));
    left: 50%;
    transform: translateX(-50%);
}
.mc-onboarding-tour__step[data-mode="pointer"][data-position="right"] {
    left: calc(100% + var(--space-3-5));
    top: 50%;
    transform: translateY(-50%);
}
.mc-onboarding-tour__step[data-mode="pointer"][data-position="left"] {
    right: calc(100% + var(--space-3-5));
    top: 50%;
    transform: translateY(-50%);
}

/* Tooltip arrow (CSS-only diamond rotated 45°) */
.mc-onboarding-tour__step[data-mode="pointer"]::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    transform: rotate(45deg);
}
.mc-onboarding-tour__step[data-mode="pointer"][data-position="bottom"]::before {
    top: -7px;
    left: 50%;
    margin-left: -6px;
    border-right: none;
    border-bottom: none;
}
.mc-onboarding-tour__step[data-mode="pointer"][data-position="top"]::before {
    bottom: -7px;
    left: 50%;
    margin-left: -6px;
    border-left: none;
    border-top: none;
}
.mc-onboarding-tour__step[data-mode="pointer"][data-position="right"]::before {
    left: -7px;
    top: 50%;
    margin-top: -6px;
    border-right: none;
    border-top: none;
}
.mc-onboarding-tour__step[data-mode="pointer"][data-position="left"]::before {
    right: -7px;
    top: 50%;
    margin-top: -6px;
    border-left: none;
    border-bottom: none;
}

/* Pointer-mode body uses slightly tighter padding than modal mode */
.mc-onboarding-tour__step[data-mode="pointer"] .mc-onboarding-tour__body {
    padding: var(--space-3-5) var(--space-4) var(--space-2);
}
.mc-onboarding-tour__step[data-mode="pointer"] .mc-onboarding-tour__title {
    font-size: var(--text-base);
}
.mc-onboarding-tour__step[data-mode="pointer"] .mc-onboarding-tour__text {
    font-size: var(--text-sm);
}
.mc-onboarding-tour__step[data-mode="pointer"] .mc-onboarding-tour__footer {
    padding: var(--space-2) var(--space-4) var(--space-3);
}

/* Mobile — modal stretches, nav buttons full-width */
@media (max-width: 480px) {
    .mc-onboarding-tour__step[data-mode="modal"] {
        width: calc(100vw - var(--space-6));
    }
    .mc-onboarding-tour__footer {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        text-align: center;
    }
    .mc-onboarding-tour__nav {
        justify-content: stretch;
    }
    .mc-onboarding-tour__nav .mc-btn { flex: 1; }
}

/* Honor reduced-motion across all animations */
@media (prefers-reduced-motion: reduce) {
    .mc-onboarding-tour__backdrop,
    .mc-onboarding-tour__step,
    .mc-onboarding-tour__ring {
        animation: none !important;
    }
}

/* ==================================================================
 * Admin List Page — canonical 5-zone skeleton primitives (F9.1.C)
 * Promoted from `rui-inv-*` per the UI.md "Admin List Page Canonical
 * Structure" section. Used by every admin list page (Invoices,
 * Subscriptions, AI Conversations, AI Feedback, AI Self-Improve, …).
 * `rui-inv-*` aliases are kept for the existing Invoices page only;
 * NEW pages MUST use the `mc-*` names so bots + future devs find
 * one canonical primitive in the showcase.
 * ================================================================== */

/* Zone 2 — colored-icon stats strip */
.mc-stats-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
@media (max-width: 1279px) { .mc-stats-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .mc-stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .mc-stats-strip { grid-template-columns: 1fr; } }

/* Variant: 4-tile strip — used when the page only has 4 KPIs (e.g. AI Conversations) */
.mc-stats-strip-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1279px) { .mc-stats-strip-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .mc-stats-strip-4 { grid-template-columns: 1fr; } }

.mc-stats-tile {
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.mc-stats-tile-icon {
    width: 32px;
    height: 32px;
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-stats-tile-icon .material-symbols-rounded {
    font-size: 32px !important;
    line-height: 1;
}

.mc-stats-tile-num-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.mc-stats-tile-num {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
}

.mc-stats-tile-num-secondary {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: var(--weight-normal);
}

.mc-stats-tile-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Zone 3 — main page grid + right rail */
.mc-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-5);
    align-items: start;
}
@media (max-width: 1279px) {
    .mc-page-grid { grid-template-columns: 1fr; }
}

.mc-page-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: var(--space-5);
    align-self: start;
}

/* ── Il riepilogo in riga sopra, invece che in colonna a destra ────────────
 *
 * `.mc-page-grid` da' 320px fissi alla colonna di destra, e le schermate di
 * invio ci mettevano CINQUE schede. Il risultato: la tabella — che e' il
 * soggetto della pagina — stava stretta in meno di due terzi dello schermo,
 * mentre accanto correva una torre di riquadri alta il doppio del contenuto.
 * Con una riga sola nella tabella, come capita quasi sempre all'inizio, la
 * pagina era fatta per l'ottanta per cento di contorno.
 *
 * Qui il riepilogo diventa una fascia di schede in cima, larga quanto la
 * pagina, e la tabella si prende tutta la larghezza sotto. Nessuna
 * informazione persa: cambia dove sta.
 *
 * `order: -1` e non un rimescolamento del markup: nel documento il contenuto
 * resta prima del suo contorno, che e' l'ordine giusto per chi legge con uno
 * screen reader e per chi naviga da tastiera.
 */
.mc-page-grid-stacked { grid-template-columns: minmax(0, 1fr); }
.mc-page-grid-stacked .mc-page-rail {
    order: -1;
    position: static;
    display: grid;
    /* `min(260px, 100%)`: senza, su uno schermo stretto la colonna resta a 260
       e la fascia sfonda la pagina. */
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    /* `stretch` e non `start`: in COLONNA una scheda alta quanto il suo
       contenuto e' giusta, perche' sotto ce n'e' un'altra e il bordo inferiore
       di una e' il bordo superiore della prossima. In FASCIA no: tre schede
       affiancate che finiscono a tre altezze diverse — il riquadro dei numeri
       corto, quello col grafico alto il doppio — non si leggono come una
       fascia, si leggono come tre riquadri capitati li'. Il bordo inferiore
       comune e' quello che li fa diventare una cosa sola. */
    align-items: stretch;
}
/* La scheda riempie la sua traccia, e il corpo si prende lo spazio che avanza:
   senza, `stretch` allunga il RIQUADRO ma lascia il contenuto appeso in alto
   con un vuoto sotto il bordo, che e' un difetto diverso e non piu' bello. */
.mc-page-grid-stacked .mc-page-rail > .mc-card-preview {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.mc-page-grid-stacked .mc-page-rail > .mc-card-preview > :last-child:not(.mc-card-preview-header) {
    flex: 1 1 auto;
}
/* Un grafico appeso a mezz'aria dentro una scheda piu' alta del suo contenuto
   sembra scivolato. Ancorato in fondo diventa la base della scheda, e le basi
   dei tre grafici della fascia si allineano fra loro. */
.mc-page-grid-stacked .mc-page-rail .rui-domains-activity-spark,
.mc-page-grid-stacked .mc-page-rail .rui-domains-health-donut,
.mc-page-grid-stacked .mc-page-rail .rui-servers-mix-donut,
.mc-page-grid-stacked .mc-page-rail .rui-servers-throughput-bars,
.mc-page-grid-stacked .mc-page-rail .rui-servers-warmup-meter {
    margin-top: auto;
}
@media (max-width: 1279px) {
    .mc-page-rail { position: static; }
}

/* Right-rail card body — compact layout the rail consumers expect */
.mc-page-rail .mc-card-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}
.mc-page-rail .mc-card-preview-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-page-rail-icon {
    font-size: 22px !important;
    color: var(--color-text-muted);
    line-height: 1;
}
.mc-page-rail-icon-red   { color: var(--color-error); }
.mc-page-rail-icon-blue  { color: var(--color-info); }
.mc-page-rail-icon-teal  { color: var(--color-teal); }
.mc-page-rail-icon-green { color: var(--color-success); }
.mc-page-rail-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-page-rail-empty {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: var(--space-2) 0;
}

/* Right-rail "ranked list" — for top-N panels (top tasks, top KB domains).
   Sits inside `.mc-page-rail .mc-page-rail-body`. Each row = monochrome
   icon (or rank chip) + label + count. */
.mc-rail-ranked {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-rail-ranked-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--color-text);
    min-width: 0;
}
.mc-rail-ranked-rank {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mc-rail-ranked-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}
.mc-rail-ranked-count {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ==================================================================
 * mc-pivot-bar — horizontal bar pivot for category-by-count rollups
 * ==================================================================
 * Used on /rui/admin/ai-feedback Sentiment tab + /rui/admin/ai-self-improve.
 * Each row has: icon + label (monochrome per L3 — repeated decoration) +
 * progress-bar fill (tone-coloured = chart-1..5; the bar IS the unique
 * widget identity per L3) + raw count + percentage.
 * Promoted to mc-* generic so any future category-rollup can reuse.
 */
.mc-pivot-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mc-pivot-bar-row {
    display: grid;
    grid-template-columns: 200px 1fr 92px;
    gap: var(--space-3);
    align-items: center;
    min-width: 0;
}
@media (max-width: 768px) {
    .mc-pivot-bar-row { grid-template-columns: 140px 1fr 80px; }
}
.mc-pivot-bar-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--color-text);
    font-weight: var(--weight-medium);
    min-width: 0;
}
.mc-pivot-bar-label .material-symbols-rounded {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    line-height: 1;
    flex-shrink: 0;
}
.mc-pivot-bar-track {
    height: 8px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-width: 0;
}
.mc-pivot-bar-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width var(--transition-base);
}
/* Tone variants — bar fill only (label icon stays monochrome).
   Variants resolve to `--chart-N` so dark-mode + brand-recolour
   inherit automatically. */
.mc-pivot-bar-fill-1 { background: var(--chart-1); }
.mc-pivot-bar-fill-2 { background: var(--chart-2); }
.mc-pivot-bar-fill-3 { background: var(--chart-3); }
.mc-pivot-bar-fill-4 { background: var(--chart-4); }
.mc-pivot-bar-fill-5 { background: var(--chart-5); }
.mc-pivot-bar-fill-6 { background: var(--chart-6); }
.mc-pivot-bar-fill-muted { background: var(--color-border-strong); }
.mc-pivot-bar-meta {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
}
.mc-pivot-bar-count {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-pivot-bar-pct {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
/* Empty zero-bar variant — track shown but fill collapsed to 0,
   message pulled out so the page reads "we'll fill these in once
   the classifier ships" rather than "broken chart". */
.mc-pivot-bar-row.is-empty .mc-pivot-bar-fill { width: 0 !important; }

/* ==================================================================
 * mc-rail-health — 3-state traffic light indicator for rail cards
 * ==================================================================
 * Compact single-line "<dot> Healthy / Degraded / Unhealthy".
 * Tones map to `--color-success / --color-warning / --color-error`.
 */
.mc-rail-health {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}
.mc-rail-health-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}
.mc-rail-health-good   .mc-rail-health-dot { background: var(--color-success); color: var(--color-success); }
.mc-rail-health-warn   .mc-rail-health-dot { background: var(--color-warning); color: var(--color-warning); }
.mc-rail-health-bad    .mc-rail-health-dot { background: var(--color-error);   color: var(--color-error); }
.mc-rail-health-pending .mc-rail-health-dot { background: var(--color-text-muted); color: var(--color-text-muted); }
.mc-rail-health-thresh {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Segment listing — Match rules column
   Renders match-mode badge + per-condition chips inline.
   See `resources/views/refactor/pages/lists/_segment.blade.php`.
   ========================================================================== */

.mc-segment-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    flex-wrap: wrap;
}
.mc-segment-meta-count {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mc-segment-conditions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    align-items: center;
}
.mc-segment-conditions-empty {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Per-condition chip: [Field] [operator] [value] */
.mc-condition-chip {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--radius-input);
    overflow: hidden;
    font-size: 11px;
    line-height: 1;
    border: var(--space-px) solid var(--color-border);
    background: var(--color-card-bg);
    max-width: 100%;
}
.mc-condition-chip-field {
    padding: 4px var(--space-2);
    background: var(--color-bg-subtle);
    color: var(--color-text);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    border-right: var(--space-px) solid var(--color-border);
}
.mc-condition-chip-op {
    padding: 4px var(--space-2);
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    font-style: italic;
    white-space: nowrap;
    border-right: var(--space-px) solid var(--color-border);
}
.mc-condition-chip-value {
    padding: 4px var(--space-2);
    background: var(--color-card-bg);
    color: var(--color-teal);
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-condition-chip-more {
    padding: 4px var(--space-2);
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
    cursor: help;
}
.mc-badge-clickable:hover { opacity: 0.85; }

/* ==========================================================================
   Chips (small interactive tags for filters — like Mailchimp "Email" chip)
   ========================================================================== */

.mc-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border-strong);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
    line-height: 1.4;
}

.mc-chip:hover {
    background: var(--color-hover-bg);
    border-color: var(--color-text-disabled);
    text-decoration: none;
}

.mc-chip.active {
    background: var(--color-teal-light);
    border-color: var(--color-teal);
    color: var(--color-teal);
}

.mc-chip-dismiss {
    display: inline-flex;
    margin-left: var(--space-0-5);
    color: var(--color-text-muted);
    cursor: pointer;
}

.mc-chip-dismiss:hover { color: var(--color-error); }

/* Chip group — horizontal row of chips */
.mc-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* ==========================================================================
   Identity Select (AJAX autocomplete for verified sending identities)
   Usage: <div class="mc-identity-select" data-mc-identity-select data-url="..." data-name="from_email">
            <input type="text" class="mc-form-input mc-identity-select-input" name="from_email">
          </div>
   ========================================================================== */

.mc-identity-select {
    position: relative;
}

/* Right-side decorative caret — signals this input is a verified-sender picker,
   not free text. Pointer-events:none so clicks pass through to the input. */
.mc-identity-select-input {
    padding-right: calc(var(--space-3-5) + 24px);
}
.mc-identity-select-caret {
    position: absolute;
    top: 50%;
    right: var(--space-2-5);
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--color-text-muted);
    pointer-events: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.mc-identity-select--open .mc-identity-select-caret {
    color: var(--color-teal);
    transform: translateY(-50%) rotate(180deg);
}

.mc-identity-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-dropdown, 100);
    margin-top: var(--space-1);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    max-height: 260px;
    overflow: hidden;
}
.mc-identity-select--open .mc-identity-select-dropdown {
    display: block;
}

.mc-identity-select-dropdown-header {
    padding: var(--space-2-5) var(--space-3-5);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: var(--space-px) solid var(--color-border-light);
}
.mc-identity-select-dropdown-header--warning {
    color: var(--color-warning);
}

.mc-identity-select-list {
    list-style: none;
    margin: 0;
    padding: var(--space-1) 0;
    max-height: 220px;
    overflow-y: auto;
}

.mc-identity-select-item {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3-5);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.mc-identity-select-item:hover,
.mc-identity-select-item--active {
    background: var(--color-hover-bg);
}

.mc-identity-select-item-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    min-width: 0;
}

.mc-identity-select-item-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-identity-select-item-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-identity-select-item-desc strong {
    color: var(--color-teal);
    font-weight: var(--weight-semibold);
}

.mc-identity-select-empty {
    padding: var(--space-3) var(--space-3-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.mc-identity-select-warning {
    padding: var(--space-2) var(--space-3-5);
    font-size: var(--text-sm);
    color: var(--color-error);
}

.mc-identity-select-loader {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0;
}

/* Il livello arriva da fuori: lo stesso testo — «questo mittente non e'
   verificato» — impedisce l'invio su un piano e non sull'altro, quindi il
   componente non puo' deciderlo da solo. Ambra di riserva perche' un
   messaggio senza livello dichiarato non deve mai apparire come bloccante
   se non lo e'. */
.mc-identity-select-error {
    margin-top: var(--space-2);
    padding: var(--space-2-5) var(--space-3);
    font-size: var(--text-sm);
    border-radius: var(--radius-card);
    line-height: 1.5;
    background: var(--fb-warning-bg);
    color: var(--fb-warning-ink);
}

.mc-identity-select-error[data-level="blocking"] {
    background: var(--fb-blocking-bg);
    color: var(--fb-blocking-ink);
}
.mc-identity-select-error a {
    color: inherit;
    text-decoration: underline;
}

.mc-identity-select-spinner {
    animation: mc-identity-spin 0.8s linear infinite;
}
@keyframes mc-identity-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Tag Input (rich multi-tag text input with pill chips)
   Usage: <div class="mc-tag-input" data-mc-tag-input>
            <input type="hidden" name="tags" data-mc-tag-value>
            <div class="mc-tag-input-chips" data-mc-tag-chips></div>
            <input type="text" class="mc-tag-input-field" data-mc-tag-field placeholder="Type and press Enter">
          </div>
   ========================================================================== */

.mc-tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1-5);
    min-height: var(--input-height);
    padding: var(--space-1-5) var(--space-3);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border-strong);
    border-radius: var(--radius-input);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: text;
}
.mc-tag-input:focus-within {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 var(--space-0-5) var(--color-teal-ring);
}
.mc-tag-input.is-invalid { border-color: var(--color-error); }
.mc-tag-input.is-invalid:focus-within {
    box-shadow: 0 0 0 var(--space-0-5) var(--color-error-ring);
}

/* Individual tag chip inside input */
.mc-tag-input-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-2);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-teal);
    background: var(--color-teal-light);
    border: var(--space-px) solid var(--color-teal);
    border-radius: var(--radius-full);
    white-space: nowrap;
    user-select: none;
    line-height: 1.4;
    animation: mc-tag-pop 0.15s ease-out;
}
@keyframes mc-tag-pop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.mc-tag-input-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: var(--space-0-5);
    color: var(--color-teal);
    opacity: 0.6;
    cursor: pointer;
    border-radius: 50%;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.mc-tag-input-chip-remove:hover {
    opacity: 1;
    background: rgba(0,0,0,0.08);
    color: var(--color-error);
}

/* Text input inside tag container */
.mc-tag-input-field {
    flex: 1 1 80px;
    min-width: 80px;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--color-text);
    padding: var(--space-0-5) 0;
    line-height: var(--input-height);
    height: auto;
    line-height: 1.6;
}
.mc-tag-input-field::placeholder { color: var(--color-text-disabled); }

/* Chips container (flex inline) */
.mc-tag-input-chips {
    display: contents;
}

/* ==========================================================================
   Forms (authenticated pages)
   ========================================================================== */

.mc-form-group { margin-bottom: var(--space-4); }

/* Form grid rows — replace inline grid styles */
.mc-form-row    { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.mc-form-row-2  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.mc-form-row-3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (max-width: 767px) {
    .mc-form-row-2, .mc-form-row-3 { grid-template-columns: 1fr; }
}

/* Settings section — titled block within settings content.
 * Explicit overrides on font-size + line-height because the global
 * `h3 { font-size: var(--text-lg); }` rule from app.css would otherwise
 * win in some cascade contexts. Tightened rhythm: title → desc has a
 * compact 4-px gap; desc → form-group has a generous 24-px gap so
 * labels never run flush against the description. */
.mc-settings-section { margin-bottom: var(--space-6); }
.mc-settings-section-title.mc-settings-section-title,
h2.mc-settings-section-title,
h3.mc-settings-section-title,
h4.mc-settings-section-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.35;
    margin: 0 0 var(--space-1) 0;
}
.mc-settings-section-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0 0 var(--space-5) 0;
}
/* Form group following a section description — guarantee breathing
 * room even when the description's margin-bottom collapses. */
.mc-settings-section-desc + .mc-form-group { margin-top: 0; }

/* Settings divider — full-bleed within mc-settings-content (direct or inside form) */
.mc-settings-content > .mc-settings-divider,
.mc-settings-content > form > .mc-settings-divider {
    height: var(--space-px);
    background: var(--color-border);
    margin: 0 calc(var(--space-6) * -1);
}

/* Section after a divider needs top padding */
.mc-settings-divider + .mc-settings-section { padding-top: var(--space-6); }

/* Avatar upload — rich card with drag & drop, preview, file info */
.mc-avatar-upload {
    display: flex;
    align-items: stretch;
    gap: var(--space-5);
    padding: var(--space-4);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    transition: all var(--transition-fast);
    position: relative;
}
.mc-avatar-upload:hover,
.mc-avatar-upload.is-dragover {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
}
.mc-avatar-upload.is-dragover::after {
    content: 'Drop image here';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.9);
    border-radius: var(--radius-card);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-teal);
    z-index: 2;
}
.mc-avatar-upload-preview {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-avatar-upload-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }

.mc-avatar-upload-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.mc-avatar-upload-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.mc-avatar-upload-hint .material-symbols-rounded { font-size: 14px; }

.mc-avatar-upload-file-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-hover-bg);
    border-radius: var(--radius-input);
    font-size: var(--text-xs);
}
.mc-avatar-upload-file-info .mc-avatar-upload-file-name {
    font-weight: var(--weight-medium);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.mc-avatar-upload-file-info .mc-avatar-upload-file-size {
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.mc-avatar-upload-file-info .mc-avatar-upload-file-type {
    flex-shrink: 0;
    font-size: 9px;
}

/* Avatar upload action icon sizing */
.mc-avatar-upload-actions .material-symbols-rounded,
.mc-avatar-upload-file-info > .material-symbols-rounded {
    font-size: 16px;
}
.mc-avatar-upload-file-info > .material-symbols-rounded {
    color: var(--chart-1);
}

/* Avatar placeholder initial letter */
.mc-avatar-placeholder-initial {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
}

/* Upload label needs pointer */
label.mc-btn { cursor: pointer; }

.mc-avatar-upload-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 599px) {
    .mc-avatar-upload { flex-direction: column; align-items: center; text-align: center; }
    .mc-avatar-upload-body { align-items: center; }
}

/* Info grid — key-value display (billing address, etc.) */
.mc-info-grid {
    padding: var(--space-4);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-page-bg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.mc-info-grid-item-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: 2px;
}
.mc-info-grid-item-value {
    font-size: var(--text-sm);
    color: var(--color-text);
}
.mc-info-grid-full { grid-column: span 2; }

/* Empty state (inline, smaller than mc-empty) */
.mc-empty-inline {
    text-align: center;
    padding: var(--space-8);
    border: var(--space-px) dashed var(--color-border);
    border-radius: var(--radius-card);
}
.mc-empty-inline-icon {
    font-size: 32px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
    display: block;
}
.mc-empty-inline-text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

/* Quota card */
.mc-quota-card {
    padding: var(--space-4);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
}
.mc-quota-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.mc-quota-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-input);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-quota-card-icon .material-symbols-rounded { font-size: 20px; }
.mc-quota-card-body { flex: 1; min-width: 0; }
.mc-quota-card-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.mc-quota-card-usage {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-quota-card-pct {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

/* Code block */
.mc-code-block {
    background: var(--color-bg-secondary, #1e1e2e);
    color: var(--color-text-inverse, #cdd6f4);
    padding: var(--space-4);
    border-radius: var(--radius-input);
    overflow-x: auto;
    font-size: var(--text-sm);
    font-family: var(--font-mono, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace);
    line-height: 1.6;
    margin: 0;
}

/* Mono input (API token, endpoint) */
.mc-mono-field {
    font-family: var(--font-mono, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace);
    font-size: var(--text-sm);
    background: var(--color-hover-bg);
    letter-spacing: 0.02em;
}

/* Token field row (input + copy button) */
.mc-token-field {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
    margin-bottom: var(--space-4);
}
.mc-token-field .mc-form-input { flex: 1; }

/**
 * Il pulsante accanto al campo è alto quanto il campo.
 *
 * `.mc-btn` dichiara `height: var(--space-9)` — 36px — e un'altezza esplicita
 * batte l'`align-items: stretch` del contenitore: il pulsante restava 36 a
 * fianco di un campo da 44, e la riga sembrava composta da pezzi di due moduli
 * diversi. `height: auto` restituisce la parola allo stretch.
 */
.mc-token-field .mc-btn { height: auto; align-self: stretch; }

/* Endpoint display */
.mc-endpoint-display {
    background: var(--color-hover-bg);
    padding: var(--space-3);
    border-radius: var(--radius-input);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    word-break: break-all;
}

/* API method badges (table) */
.mc-table .mc-mono { font-family: var(--font-mono, monospace); font-size: var(--text-sm); }

/* Settings form footer */
.mc-settings-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-5);
}

/* Settings section header with action */
.mc-settings-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

/* Fila «titolo + azione» in cima al contenuto di una pagina impostazioni.
   Il pulsante principale sta QUI, sotto la riga dell'intestazione, non nella
   fascia bianca in alto: alcune pagine lo mettevano sopra e altre sotto, e
   l'occhio deve reimparare dove guardare a ogni voce di menu. */
.mc-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.mc-settings-head > :first-child { min-width: 0; }
.mc-settings-head > .mc-settings-head-actions { flex: none; display: flex; gap: var(--space-2); }

@media (max-width: 640px) {
    .mc-settings-head { flex-direction: column; }
}

.mc-form-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.mc-form-label.required::after { content: ' *'; color: var(--color-error); }
.mc-form-required { color: var(--color-error); font-weight: var(--weight-medium); }

.mc-form-input {
    display: block;
    width: 100%;
    height: var(--input-height);
    padding: 0 var(--space-3-5);
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border-strong);
    border-radius: var(--radius-input);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}
.mc-form-input::placeholder { color: var(--color-text-disabled); }
.mc-form-input:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 var(--space-0-5) var(--color-teal-ring);
}
.mc-form-input.is-invalid { border-color: var(--color-error); }
.mc-form-input.is-invalid:focus {
    box-shadow: 0 0 0 var(--space-0-5) var(--color-error-ring);
}
.mc-form-input[readonly]:not([type="checkbox"]):not([type="radio"]) {
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
.mc-form-input[readonly]:focus {
    border-color: var(--color-border-strong);
    box-shadow: none;
}

.mc-form-input.mc-input-unlimited {
    color: transparent;
    background: var(--color-hover-bg);
    cursor: default;
    pointer-events: none;
}

textarea.mc-form-input { min-height: 100px; height: auto; padding: var(--space-2-5) var(--space-3-5); resize: vertical; }

.mc-form-select,
.mc-card select {
    appearance: none;
    display: block;
    width: 100%;
    height: var(--input-height);
    padding: 0 var(--space-9) 0 var(--space-3-5);
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-card-bg);
    /* Il cursore sta in variables.css, in due versioni per i due temi: qui
       era scritto a mano con un grigio caldo fisso, che in tema scuro non
       si vedeva. E sedici pixel dal bordo invece di dodici: a dodici,
       dentro un angolo arrotondato, sembrava appoggiata al bordo. */
    background-image: var(--select-caret);
    background-repeat: no-repeat;
    background-position: right var(--select-caret-inset) center;
    background-size: var(--select-caret-size);
    border: var(--space-px) solid var(--color-border-strong);
    border-radius: var(--radius-input);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    cursor: pointer;
}
.mc-form-select:focus,
.mc-card select:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 var(--space-0-5) var(--color-teal-ring);
}

/* Switch toggle */
.mc-switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.mc-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Le visuali del cursore stanno nel componente unico, in fondo al foglio. */

.mc-form-error { font-size: var(--text-sm); color: var(--color-error); margin-top: var(--space-1); }
.mc-form-help  { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* ==========================================================================
   Tables
   ========================================================================== */

/* Responsive wrapper — horizontal scroll on the table only.
   ONE scrollbar: table scrolls left/right, page scrolls up/down.
   Explicit overflow-y:hidden is required: when only overflow-x is set, the CSS
   spec auto-coerces overflow-y from `visible` to `auto`, which then materialises
   a spurious vertical scrollbar whenever any descendant (e.g. an absolute-
   positioned dropdown menu in the last row) extends past the wrapper's box.
   Open dropdowns use position:fixed (mc-dropdown-fixed) so they escape clipping;
   closed dropdowns are visibility:hidden so being clipped is a no-op. */
.mc-table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Mailchimp-style table with border */
.mc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
}

.mc-table thead th {
    padding: var(--space-2-5) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
    text-align: left;
    background: var(--color-hover-bg);
    border-bottom: var(--space-px) solid var(--color-border);
    white-space: nowrap;
}

.mc-table tbody td {
    padding: var(--space-4) var(--space-4);
    border-bottom: var(--space-px) solid var(--color-border);
    vertical-align: middle;
    font-size: var(--text-base);
}

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

/* --- Open table — no box, no header bg, spacious rows (like plan listing) --- */
.mc-table-open {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: none;
    border-radius: 0;
}
.mc-table-open thead { display: none; }
.mc-table-open tbody tr {
    transition: none;
}
.mc-table-open tbody td {
    padding: var(--space-5) var(--space-4);
    border-bottom: var(--space-px) solid var(--color-border);
    vertical-align: middle;
    font-size: var(--text-base);
}
.mc-table-open tbody tr:last-child td {
    border-bottom: none;
}

/* Open table — rich cell patterns */
.mc-table-open .mc-cell-main {
    font-weight: var(--weight-semibold);
    font-size: var(--text-md);
    color: var(--color-text);
    margin-bottom: 2px;
}
.mc-table-open .mc-cell-main a {
    color: var(--color-text);
    text-decoration: none;
}
.mc-table-open .mc-cell-main a:hover {
    color: var(--color-teal);
}
.mc-table-open .mc-cell-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: var(--leading-normal);
}
.mc-table-open .mc-cell-meta {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.mc-table-open .mc-cell-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}
.mc-table-open .mc-cell-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Row actions (visible on hover) */
/* I comandi in fondo a una riga di tabella.
   Erano elementi in linea separati da uno spazio: si allineavano sulla LINEA
   DI BASE del testo, e un bottone con l'etichetta e uno con la sola icona la
   linea di base ce l'hanno a due altezze diverse — quindi il cestino sedeva
   qualche pixel piu' in basso di «Impostazioni». Una riga flex li allinea sul
   centro, che e' quello che l'occhio si aspetta.
   Non `.mc-row-actions`: quella nasce a `opacity: 0` e si scopre passandoci
   sopra, ed e' un'altra cosa. */
.mc-cell-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
tr:hover .mc-row-actions, .mc-row-actions:focus-within { opacity: 1; }

/* ==========================================================================
   Alerts
   ========================================================================== */

/* Pastel alert with left accent border, icon, title + description */
.mc-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3-5) var(--space-4);
    border-radius: var(--radius-input);
    border-left: var(--space-0-5) solid transparent;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-4);
}

.mc-alert-icon {
    flex-shrink: 0;
    width: var(--space-5);
    /* Alta quanto la riga del titolo, non quanto se stessa.
       Con un'altezza fissa piu' un margine a occhio, l'icona cadeva tre pixel
       sotto il centro del titolo: su una segnalazione di una riga sola non si
       notava, su una di due sembrava appesa in mezzo alle due righe.
       `1.5em` e' esattamente l'interlinea del testo qui dentro, quindi il
       centro dell'icona e il centro della prima riga coincidono per
       costruzione — e restano allineati se domani cambia il corpo. */
    /* `1.5em` no: `em` guarda il corpo di QUESTO elemento, e l'icona spesso
       E' il glifo — che nasce a 24px. L'altezza andava a 36 e l'icona
       scendeva in mezzo alle due righe. Il calcolo esplicito la lega al corpo
       della segnalazione, che e' quello del titolo. */
    height: calc(1.5 * var(--text-sm));
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Vale sia quando l'icona e' il glifo, sia quando lo contiene. */
    font-size: var(--space-5);
    line-height: 1;
}
.mc-alert-icon .material-symbols-rounded,
.mc-alert-icon svg {
    font-size: var(--space-5);
    width: var(--space-5);
    height: var(--space-5);
}

.mc-alert-icon svg { width: var(--space-4); height: var(--space-4); }

.mc-alert-content { flex: 1; min-width: 0; }

.mc-alert-title {
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-0-5);
}

.mc-alert-text {
    color: inherit;
    opacity: 0.85;
}

/* Color variants — pastel bg + left border accent */
.mc-alert-info {
    background: var(--color-info-bg);
    color: var(--color-info-dark);
    border-left-color: var(--color-info);
}
.mc-alert-success {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
    border-left-color: var(--color-success);
}
.mc-alert-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
    border-left-color: var(--color-warning);
}
.mc-alert-danger {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
    border-left-color: var(--color-error);
}
.mc-alert-teal {
    background: var(--color-teal-light);
    color: var(--color-teal);
    border-left-color: var(--color-teal);
}
.mc-alert-neutral {
    background: var(--color-hover-bg);
    color: var(--color-text-secondary);
    border-left-color: var(--color-border-strong);
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.mc-empty-state { text-align: center; padding: var(--space-16) var(--space-6); }
.mc-empty-state-icon { width: var(--space-16); height: var(--space-16); margin: 0 auto var(--space-4); color: var(--color-border); }
.mc-empty-state-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); margin-bottom: var(--space-2); }
.mc-empty-state-text {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Progress Bar
   ========================================================================== */

.mc-progress { width: 100%; height: var(--space-2); background: var(--color-hover-bg); border-radius: var(--radius-full); overflow: hidden; }
.mc-progress-bar { height: 100%; border-radius: var(--radius-full); background: var(--color-teal); transition: width var(--transition-base); }
.mc-progress-bar.green  { background: var(--color-success); }
.mc-progress-bar.orange { background: var(--color-warning); }
.mc-progress-bar.red    { background: var(--color-error); }

/* ==========================================================================
   Toast Notifications
   ========================================================================== */

.mc-toast-container {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
    pointer-events: none;
}

.mc-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-card-bg);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
    border-left: 1.5px solid var(--color-teal);
    pointer-events: auto;
    max-width: 340px;
    min-width: 220px;
    /* Visibile di suo, e l'animazione la accompagna: non la fa esistere.
       `mc-toast-in` parte da `opacity: 0`, quindi finche' era la sola a
       decidere la pastiglia era invisibile fino a che l'animazione non
       partiva — e ci sono casi in cui non parte: scheda in secondo piano
       (Chrome le mette in pausa), un renderer che salta le animazioni, un
       browser che non conosce la keyframe. In tutti quei casi la conferma
       semplicemente non compariva, e chi aveva premuto «Invia» non sapeva
       se fosse andata. Con `opacity: 1` scritto qui, il peggio che puo'
       succedere e' che compaia senza entrare in scena. */
    opacity: 1;
    animation: mc-toast-in var(--transition-base) forwards;
}

/* Chi ha chiesto meno movimento la vede comparire e basta: l'animazione non
   e' informazione, il messaggio si'. */
@media (prefers-reduced-motion: reduce) {
    .mc-toast { animation: none; }
    .mc-toast.removing { animation: none; opacity: 0; }
}
.mc-toast.success { border-left-color: var(--color-success); }
.mc-toast.error   { border-left-color: var(--color-error); }
.mc-toast.warning { border-left-color: var(--color-warning); }
.mc-toast.info    { border-left-color: var(--color-info); }
.mc-toast.removing { animation: mc-toast-out 200ms ease forwards; }

.mc-toast-icon { flex-shrink: 0; display: flex; align-items: center; }
.mc-toast-icon--success { color: var(--color-success); }
.mc-toast-icon--error   { color: var(--color-error); }
.mc-toast-icon--warning { color: var(--color-warning); }
.mc-toast-icon--info    { color: var(--color-info); }

.mc-toast-message { flex: 1; font-size: var(--text-sm); color: var(--color-text); line-height: 1.45; }
.mc-toast-close {
    background: none; border: none; color: var(--color-text-muted);
    cursor: pointer; padding: 2px; display: flex; align-items: center; flex-shrink: 0;
    opacity: .55; transition: opacity .15s;
}
.mc-toast-close:hover { opacity: 1; color: var(--color-text); }

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

/* ==========================================================================
   Modal / Popup
   ========================================================================== */

.mc-modal-backdrop {
    position: fixed; inset: 0;
    background: var(--color-overlay-heavy);
    z-index: var(--z-modal-backdrop);
    opacity: 0; transition: opacity var(--transition-base);
}
.mc-modal-backdrop.active { opacity: 1; }

.mc-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    z-index: var(--z-modal);
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
    max-width: 560px;
    width: calc(100% - var(--space-8));
    max-height: calc(100vh - var(--space-12));
    /* Flex-col so .mc-modal-header / .mc-modal-footer stay pinned and only
       .mc-modal-body scrolls. Without this the whole modal was the scroll
       container — long bodies pushed the title bar out of view. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0; transition: all var(--transition-base);
}
/* `display: flex` batte `[hidden]` (CLAUDE.md §4). Il modale ha `opacity: 0`,
   quindi non si VEDE, ma resta nel documento a coprire il centro della pagina:
   intercetta i clic e sta nell'albero di accessibilita'. Un pulsante che non
   risponde e non da' errore e' quasi impossibile da diagnosticare. */
.mc-modal[hidden] { display: none; }

.mc-modal > .mc-modal-header,
.mc-modal > .mc-modal-footer { flex-shrink: 0; }
.mc-modal > .mc-modal-body { flex: 1 1 auto; overflow-y: auto; }
.mc-modal.active { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.mc-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-6);
    border-bottom: var(--space-px) solid var(--color-border);
}
.mc-modal-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); margin: 0; }
.mc-modal-close {
    background: none; border: none; color: var(--color-text-muted);
    cursor: pointer; padding: var(--space-1); display: flex; align-items: center;
    border-radius: var(--radius-sm);
}
.mc-modal-close:hover { background: var(--color-hover-bg); color: var(--color-text); }
.mc-modal-body { padding: var(--space-6); }
.mc-modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: var(--space-px) solid var(--color-border);
}
.mc-modal-sm { max-width: 400px; }
.mc-modal-lg { max-width: 720px; }
.mc-modal-xl { max-width: 960px; }
.mc-modal-xxl { max-width: 1140px; }

/* Popup select grid — responsive 2-col → 1-col on small viewports */
.mc-popup-select-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}
@media (max-width: 600px) {
    .mc-popup-select-grid { grid-template-columns: 1fr; }
    .mc-popup-select-card { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
    .mc-modal-body { padding: var(--space-4); }
}

/* Popup footer — flex row, buttons aligned center */
.mc-popup-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* Popup select card — hover state via CSS (replaces inline onmouseover) */
.mc-popup-select-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-card);
    border: 1.5px solid var(--color-border);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mc-popup-select-card:hover {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 1px var(--color-teal-light);
    background: var(--color-teal-light);
    text-decoration: none;
}
.mc-popup-select-card--alt:hover {
    border-color: var(--chart-6);
    box-shadow: 0 0 0 1px var(--chart-6-bg);
    background: var(--chart-6-bg);
}

/* Popup loading spinner */
.mc-popup-loading {
    display: flex;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
}

.mc-popup-mask {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: rgba(255, 255, 255, 0.8);
    border-radius: inherit;
}
.mc-popup-mask-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}
[data-theme="dark"] .mc-popup-mask {
    background: rgba(30, 30, 30, 0.85);
}

/* ==========================================================================
   mc-preview-modal — Full-chrome template preview with device toggle
   3 device modes: desktop (fluid) / tablet (768px) / mobile (390px).
   Desktop + tablet wrap in a macOS-style browser chrome (3 gray dots).
   Mobile wraps in a phone chassis (speaker bar + home indicator).
   Iframe scrolls internally (native) — stage does NOT scroll.
   See docs/ui-refactor/UI.md → McPreviewModal.
   ========================================================================== */

.mc-preview-modal-backdrop {
    position: fixed; inset: 0;
    background: var(--color-overlay-heavy);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    transition: opacity 220ms cubic-bezier(.4, 0, .2, 1);
}
.mc-preview-modal-backdrop.active { opacity: 1; }

.mc-preview-modal {
    position: fixed;
    top: var(--space-6);
    left: var(--space-6);
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: var(--z-modal);
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(.98) translateY(8px);
    transition: opacity 240ms cubic-bezier(.4, 0, .2, 1),
                transform 240ms cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}
.mc-preview-modal.active { opacity: 1; transform: scale(1) translateY(0); }

/* Header — simple, light border, compact */
.mc-preview-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-card-bg);
    min-height: 56px;
}
.mc-preview-modal-titlebox {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mc-preview-modal-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
    line-height: 1.3;
}
.mc-preview-modal-subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
}
.mc-preview-modal-close {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-teal);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
    flex-shrink: 0;
}
.mc-preview-modal-close:hover {
    background: var(--color-teal-light);
    color: var(--color-teal-hover);
}
.mc-preview-modal-close:focus-visible {
    outline: 2px solid var(--color-teal-ring);
    outline-offset: 2px;
}
.mc-preview-modal-close-label {
    font-weight: var(--weight-medium);
}

/* Toolbar — device toggle (center) + optional actions (right) */
.mc-preview-modal-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    background: var(--color-card-bg);
    gap: var(--space-3);
}
.mc-preview-modal-devices {
    grid-column: 2;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.mc-preview-modal-device-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.mc-preview-modal-device-btn:hover { color: var(--color-text); }
.mc-preview-modal-device-btn.is-active {
    background: var(--color-card-bg);
    border-color: var(--color-teal);
    color: var(--color-teal);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mc-preview-modal-device-btn:focus-visible {
    outline: 2px solid var(--color-teal-ring);
    outline-offset: 2px;
}
.mc-preview-modal-cta,
.mc-preview-modal-actions {
    grid-column: 3;
    justify-self: end;
}
.mc-preview-modal-actions {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}
.mc-preview-modal-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.mc-preview-modal-action-icon {
    flex-shrink: 0;
}

/* Stage — centers the frame on a checkered "design canvas" backdrop, so the
   browser-chrome chassis reads as a real browser window floating on a
   workspace (like Figma / sketch tools). Does NOT scroll — the iframe itself
   scrolls internally. Scrollbar visibility is forced via CSS injected into
   the iframe's own document (see PreviewModal.js → _injectIframeScrollbarStyles). */
.mc-preview-modal-stage {
    flex: 1;
    overflow: hidden;
    /* Figma-style grid canvas — clean white cells + subtle gridlines, same
       language as the BuilderJS editor workspace. The browser-chrome chassis
       reads as a real window floating on a design surface. */
    background-color: var(--preview-canvas-bg);
    background-image:
        linear-gradient(var(--preview-canvas-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--preview-canvas-line) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
    --preview-canvas-bg: #fafafa;
    --preview-canvas-line: rgba(17, 24, 39, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    min-height: 0;
}
[data-theme="dark"] .mc-preview-modal-stage {
    --preview-canvas-bg: #14161a;
    --preview-canvas-line: rgba(255, 255, 255, 0.04);
}

/* Frame — morphs in size + chrome based on data-device. Fills stage vertically
   so the iframe has a defined height to scroll within. */
.mc-preview-modal-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: 100%;
    transition: max-width 320ms cubic-bezier(.4, 0, .2, 1),
                padding 320ms cubic-bezier(.4, 0, .2, 1);
}
.mc-preview-modal-frame[data-device="desktop"] { max-width: 100%; }
.mc-preview-modal-frame[data-device="tablet"]  { max-width: 820px; }
.mc-preview-modal-frame[data-device="mobile"]  {
    max-width: 390px;
    padding: var(--space-2) 0;
}

/* ─── Browser chrome (desktop + tablet) ─── macOS-style toolbar:
   ●●●  [device pill — centered]  [spacer]
   The pill lives INSIDE the chrome (not a separate row) so the chassis
   reads as a real browser frame with toolbar, not two stacked bars. */
.mc-preview-modal-browser-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    height: 38px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--color-border) 40%, transparent) inset;
    transition: opacity 260ms cubic-bezier(.4, 0, .2, 1),
                height 260ms cubic-bezier(.4, 0, .2, 1);
}
.mc-preview-modal-frame[data-device="mobile"] .mc-preview-modal-browser-chrome {
    opacity: 0;
    height: 0;
    padding: 0;
    border: none;
    pointer-events: none;
}
.mc-preview-modal-browser-dots {
    display: flex;
    gap: 7px;
}
.mc-preview-modal-browser-dot {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #d1d5db; /* subtle gray — matches Mailchimp */
}
[data-theme="dark"] .mc-preview-modal-browser-dot {
    background: #4b5563;
}

/* ─── Phone chrome (mobile only) — black chassis, speaker, home indicator ─── */
.mc-preview-modal-phone-speaker,
.mc-preview-modal-phone-home {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
    opacity: 0;
    transition: opacity 260ms cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.mc-preview-modal-phone-speaker {
    top: 14px;
    width: 60px;
    height: 5px;
}
.mc-preview-modal-phone-home {
    bottom: 9px;
    width: 110px;
    height: 4px;
    background: rgba(255, 255, 255, 0.42);
}
.mc-preview-modal-frame[data-device="mobile"] .mc-preview-modal-phone-speaker,
.mc-preview-modal-frame[data-device="mobile"] .mc-preview-modal-phone-home {
    opacity: 1;
}

/* ─── Iframe wrapper — holds iframe + loading overlay.
   Flex-grows to fill frame; iframe inside scrolls its own content, so the
   browser-chrome header + phone chassis stay pinned like a real device. ─── */
.mc-preview-modal-iframe-wrap {
    position: relative;
    flex: 1;
    width: 100%;
    background: #fff;
    overflow: hidden;
    transition: border-radius 320ms cubic-bezier(.4, 0, .2, 1),
                border-color 320ms cubic-bezier(.4, 0, .2, 1);
    border: 1px solid var(--color-border);
    min-height: 0;
}
.mc-preview-modal-frame[data-device="desktop"] .mc-preview-modal-iframe-wrap,
.mc-preview-modal-frame[data-device="tablet"] .mc-preview-modal-iframe-wrap {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.mc-preview-modal-frame[data-device="desktop"],
.mc-preview-modal-frame[data-device="tablet"] {
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.12)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.06));
}
[data-theme="dark"] .mc-preview-modal-frame[data-device="desktop"],
[data-theme="dark"] .mc-preview-modal-frame[data-device="tablet"] {
    filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.5)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}
.mc-preview-modal-frame[data-device="mobile"] .mc-preview-modal-iframe-wrap {
    border-radius: 24px;
    margin: 32px 0 22px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: #111;
    /* Black "phone" chassis by extending padding-ring via border */
    outline: 10px solid #111;
    outline-offset: 0;
}
[data-theme="dark"] .mc-preview-modal-frame[data-device="mobile"] .mc-preview-modal-iframe-wrap {
    outline-color: #000;
    border-color: #000;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(255, 255, 255, 0.04);
}

/* ─── Popup chassis — single-size, floating popup (form preview surface).
   Replaces browser-chrome with a rounded "card" look so form previews read
   as a real in-app popup rather than a browser tab. Sits on the same grid
   canvas so it feels like a design artifact floating on a workspace. ─── */
.mc-preview-modal-frame[data-chassis="popup"] {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    /* Let the iframe-wrap carry all radius + shadow + border */
}
@media (max-width: 1024px) {
    .mc-preview-modal-frame[data-chassis="popup"] { max-width: 720px; }
}
@media (max-width: 768px) {
    .mc-preview-modal-frame[data-chassis="popup"] { max-width: 100%; }
}
.mc-preview-modal-frame[data-chassis="popup"] .mc-preview-modal-browser-chrome,
.mc-preview-modal-frame[data-chassis="popup"] .mc-preview-modal-phone-speaker,
.mc-preview-modal-frame[data-chassis="popup"] .mc-preview-modal-phone-home {
    display: none !important;
}
.mc-preview-modal-frame[data-chassis="popup"] .mc-preview-modal-iframe-wrap {
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow:
        0 32px 64px -12px rgba(17, 24, 39, 0.22),
        0 12px 24px -8px rgba(17, 24, 39, 0.12);
}
[data-theme="dark"] .mc-preview-modal-frame[data-chassis="popup"] .mc-preview-modal-iframe-wrap {
    border-color: color-mix(in srgb, var(--color-border) 60%, transparent);
    box-shadow:
        0 32px 64px -12px rgba(0, 0, 0, 0.6),
        0 12px 24px -8px rgba(0, 0, 0, 0.4);
}

/* Corner close (popup chassis only) — floating round button anchored to
   the popup's top-right, Figma-style. Click closes the whole modal. */
.mc-preview-modal-corner-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-card-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(17, 24, 39, 0.14);
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
    z-index: 3;
}
.mc-preview-modal-frame[data-chassis="popup"] .mc-preview-modal-corner-close {
    display: inline-flex;
}
.mc-preview-modal-corner-close:hover {
    background: var(--color-teal);
    color: #fff;
    transform: scale(1.06);
}
.mc-preview-modal-corner-close:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
}

/* The iframe itself — fills wrapper; scrolls internally. Scrollbar is forced
   visible via CSS injected by PreviewModal.js into the iframe's document. */
.mc-preview-modal-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

/* Loading overlay */
.mc-preview-modal-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-card-bg);
    z-index: 2;
    transition: opacity 220ms ease;
}
.mc-preview-modal-loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Dark theme — iframe bg stays white so email template renders as authored.
   Modal chrome + stage respect theme tokens. */
[data-theme="dark"] .mc-preview-modal-iframe,
[data-theme="dark"] .mc-preview-modal-iframe-wrap { background: #fff; }

/* Phone-mode on mobile viewport speaker/home position needs to align with wrapper's outline */
.mc-preview-modal-frame[data-device="mobile"] .mc-preview-modal-phone-speaker { top: 12px; }
.mc-preview-modal-frame[data-device="mobile"] .mc-preview-modal-phone-home   { bottom: 6px; }

/* ─── Tablet viewport ─── */
@media (max-width: 1024px) {
    .mc-preview-modal {
        top: var(--space-3);
        left: var(--space-3);
        right: var(--space-3);
        bottom: var(--space-3);
    }
    .mc-preview-modal-title { max-width: 45vw; }
    .mc-preview-modal-stage { padding: var(--space-4); }
}

/* ─── Mobile viewport ≤600px ─── */
@media (max-width: 600px) {
    .mc-preview-modal {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
    }
    .mc-preview-modal-header {
        padding: var(--space-3) var(--space-4);
        min-height: 48px;
    }
    .mc-preview-modal-title {
        font-size: var(--text-sm);
        max-width: 50vw;
    }
    .mc-preview-modal-subtitle { font-size: 11px; }
    .mc-preview-modal-close-label { display: none; }
    .mc-preview-modal-close {
        padding: var(--space-2);
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
    .mc-preview-modal-toolbar {
        grid-template-columns: 1fr auto;
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
    }
    .mc-preview-modal-devices {
        grid-column: 1;
        justify-self: start;
    }
    .mc-preview-modal-cta,
    .mc-preview-modal-actions {
        grid-column: 2;
        justify-self: end;
    }
    .mc-preview-modal-actions { gap: 6px; }
    .mc-preview-modal-action { padding-left: 10px; padding-right: 10px; }
    .mc-preview-modal-device-btn {
        width: 44px;
        height: 34px;
    }
    .mc-preview-modal-stage { padding: var(--space-2); }
    .mc-preview-modal-frame[data-device="tablet"],
    .mc-preview-modal-frame[data-device="mobile"] { max-width: 100%; padding: 0; }
    /* Popup chassis on small screens — corner close moves inside to avoid clip */
    .mc-preview-modal-frame[data-chassis="popup"] .mc-preview-modal-corner-close {
        top: 8px;
        right: 8px;
    }
    .mc-preview-modal-frame[data-chassis="popup"] .mc-preview-modal-iframe-wrap {
        border-radius: var(--radius-md);
    }
    .mc-preview-modal-frame[data-device="mobile"] .mc-preview-modal-iframe-wrap {
        border-radius: var(--radius-md);
        margin: 0;
        outline: none;
        box-shadow: none;
    }
    .mc-preview-modal-frame[data-device="mobile"] .mc-preview-modal-phone-speaker,
    .mc-preview-modal-frame[data-device="mobile"] .mc-preview-modal-phone-home {
        display: none;
    }
    .mc-preview-modal-browser-chrome {
        height: 28px;
        padding: 0 10px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
}

/* ==========================================================================
   Language Selector (Mailchimp-style)
   ========================================================================== */

.mc-lang-list {
    display: flex;
    flex-direction: column;
}

.mc-lang-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-text);
    border-bottom: var(--space-px) solid var(--color-border);
    transition: background var(--transition-fast);
}

.mc-lang-item:last-child { border-bottom: none; }
.mc-lang-item:hover { background: var(--color-hover-bg); text-decoration: none; color: var(--color-text); }

.mc-lang-item.active {
    background: var(--color-hover-bg);
}

.mc-lang-code {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    min-width: var(--space-8);
}

.mc-lang-name {
    flex: 1;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.mc-lang-check {
    color: var(--color-teal);
    font-size: var(--text-lg);
}

/* --- Topbar Language Button ------------------------------------------------ */
.mc-topbar-lang-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    background: none;
    border: var(--space-px) solid transparent;
    border-radius: var(--radius-input);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.mc-topbar-lang-btn:hover {
    color: var(--color-text);
    background: var(--color-hover-bg);
    border-color: var(--color-border);
}
.mc-topbar-lang-btn .material-symbols-rounded {
    font-variation-settings: 'wght' 200, 'FILL' 0;
}
.mc-topbar-lang-icon { font-size: 18px; }
.mc-topbar-lang-chevron {
    font-size: 16px;
    transition: transform var(--transition-fast);
}
.mc-dropdown:has(.mc-dropdown-menu.active) .mc-topbar-lang-btn {
    color: var(--color-text);
    background: var(--color-hover-bg);
    border-color: var(--color-border);
}
.mc-dropdown:has(.mc-dropdown-menu.active) .mc-topbar-lang-chevron {
    transform: rotate(180deg);
}
.mc-topbar-lang-dropdown {
    min-width: 200px;
    padding: var(--space-1) 0;
}
.mc-topbar-lang-dropdown .mc-lang-item {
    border-bottom: none;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}
.mc-topbar-lang-dropdown .mc-lang-code {
    font-size: var(--text-xs);
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    background: var(--color-hover-bg);
    border-radius: var(--radius-sm);
    letter-spacing: 0.5px;
}
.mc-topbar-lang-dropdown .mc-lang-item.active .mc-lang-code {
    color: var(--color-teal);
    background: var(--color-teal-light);
}
.mc-topbar-lang-dropdown .mc-lang-name {
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* ==========================================================================
   Dropdown
   ========================================================================== */

.mc-dropdown { position: relative; display: inline-flex; }

.mc-dropdown-menu {
    position: absolute; top: 100%; right: 0;
    margin-top: var(--space-1);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-dropdown);
    min-width: 180px;
    z-index: var(--z-dropdown);
    opacity: 0; visibility: hidden; transform: translateY(calc(var(--space-2) * -1));
    /* Only animate visual props — NOT top/right/position.
       transition:all would animate the JS-set coordinates when _openFixed()
       changes them, causing the menu to fly in from the wrong position. */
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.mc-dropdown-menu.active { opacity: 1; visibility: visible; transform: translateY(0); }

/* Fixed-position dropdown — escapes overflow containers (tables, cards).
   Coordinates are set by JS before .active is added, so the animation starts
   from the correct button position (no jump). Scale from top-right origin. */
.mc-dropdown-menu.mc-dropdown-fixed {
    position: fixed;
    top: auto;
    right: auto;
    margin-top: 0;
    transform: scale(0.97) translateY(-4px);
    transform-origin: top right;
}
.mc-dropdown-menu.mc-dropdown-fixed.active {
    transform: scale(1) translateY(0);
}

.mc-dropdown-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-base); color: var(--color-text);
    cursor: pointer; transition: background var(--transition-fast);
    text-decoration: none; border: none; background: none; width: 100%; text-align: left;
}

/* ==================================================================
 * mc-perso-field — il campo coi campi dinamici dentro
 * Showcase: /rui/ui#mc-perso-field
 *
 * Una casella di testo con il fulmine PICCOLO nell'angolo, dentro il campo, e
 * il menu dei campi dinamici appeso a lui.
 *
 * ── PERCHE' DENTRO E NON SOTTO ────────────────────────────────────────────
 * Un pulsante «Inserisci un campo» sotto la casella e' un comando che si legge
 * come un altro campo del modulo: sta sulla stessa colonna delle etichette, ha
 * la stessa altezza, e chi scorre il modulo lo salta. Il fulmine dentro il
 * campo appartiene al campo — si vede mentre si scrive, che e' il momento in
 * cui serve. E' la stessa forma che ha il pannello delle automazioni
 * (`.fl-perso`), e i due posti in cui si scrive un messaggio devono
 * comportarsi allo stesso modo.
 *
 * ── PERCHE' NON SI RIUSA `.fl-perso` ──────────────────────────────────────
 * Vive in `flow-lib.css`, 148 KB caricati per una tendina. Qui la scocca sono
 * dodici righe e il menu e' `mc-dropdown`, che il kit ha gia'.
 * ================================================================== */
.mc-perso-field { position: relative; }

/* Lo spazio per il fulmine, o il testo ci finisce sotto. Sulla textarea vale
   anche `padding-top`: il pulsante sta in alto, non a meta' altezza. */
.mc-perso-field > .mc-form-input { padding-right: var(--space-9); }

.mc-perso-trigger {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-7);
    height: var(--space-7);
    padding: 0;
    border: var(--space-px) solid transparent;
    border-radius: var(--radius-input);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.mc-perso-trigger:hover {
    background: var(--color-subtle-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}
/* Aperta la tendina, il fulmine resta acceso: senza, il menu sembra appeso a
   niente. `.active` la mette `Dropdown.js` sul menu, non sul grilletto, quindi
   si guarda il fratello. */
.mc-perso-field .mc-dropdown-menu.active ~ .mc-perso-trigger,
.mc-perso-field .mc-dropdown:has(.mc-dropdown-menu.active) .mc-perso-trigger {
    background: var(--color-subtle-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Il menu si ancora al fulmine, che sta in alto a destra: aperto verso il
   basso e allineato a destra copre la casella meno di quanto la coprirebbe
   partendo da sinistra. */
.mc-perso-field .mc-dropdown {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 2;
}

/* `display: flex` qui sopra BATTE la regola `[hidden] { display: none }` del
   browser: una voce marcata `hidden` resta visibile. Serve a chi filtra il
   menu scrivendo — la tendina dei campi dinamici del compositore SMS — e la
   stessa riga esiste gia' per `.mc-rich-select-option`, per la stessa ragione. */
.mc-dropdown-item[hidden] { display: none; }
.mc-dropdown-item:hover { background: var(--color-hover-bg); color: var(--color-text); text-decoration: none; }
.mc-dropdown-item.danger { color: var(--color-error); }
.mc-dropdown-item.danger:hover { background: var(--color-error-bg); }
.mc-dropdown-divider { height: var(--space-px); background: var(--color-border); margin: var(--space-1) 0; }

/* ─── Theme menu (Light · Dark · System) ─────────────────────────────────────
   Lives inside `mc-dropdown-menu`; rendered via `_theme_dropdown.blade.php`.
   Trigger = topbar sun/moon icon (existing). Each item shows: leading icon,
   label, trailing check (visible only when `is-active`). Item active state
   is wired by Theme.js — toggles `is-active` on the matching item.
   ────────────────────────────────────────────────────────────────────────── */
.mc-theme-menu {
    min-width: 200px;
    padding: var(--space-1) 0;
}

.mc-theme-menu-header {
    padding: var(--space-2) var(--space-4) var(--space-1);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
}

.mc-theme-menu-item {
    /* Inherits .mc-dropdown-item base; we add a 3-col grid for icon · label · check */
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-2);
}

.mc-theme-menu-icon {
    font-size: 18px;
    color: var(--color-text-muted);
    line-height: 1;
}

.mc-theme-menu-item.is-active .mc-theme-menu-icon {
    color: var(--color-teal);
}

.mc-theme-menu-item.is-active .mc-theme-menu-label {
    font-weight: 600;
    color: var(--color-text);
}

.mc-theme-menu-check {
    font-size: 18px;
    color: var(--color-teal);
    line-height: 1;
    visibility: hidden;
}

.mc-theme-menu-item.is-active .mc-theme-menu-check {
    visibility: visible;
}

/* --- Mobile bottom sheet dropdown (≤767px) --- */
@media (max-width: 767px) {
    .mc-dropdown-menu.mc-dropdown-mobile {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        min-width: 0;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        box-shadow: var(--shadow-modal);
        z-index: calc(var(--z-dropdown) + 10);
        margin-top: 0;
        transform: translateY(100%);
        opacity: 1;
        visibility: visible;
        transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .mc-dropdown-menu.mc-dropdown-mobile.active {
        transform: translateY(0);
    }

    /* Bottom sheet handle bar */
    .mc-dropdown-menu.mc-dropdown-mobile::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--color-border-strong);
        border-radius: 2px;
        margin: var(--space-2) auto var(--space-1);
    }

    /* Larger touch targets on mobile */
    .mc-dropdown-menu.mc-dropdown-mobile .mc-dropdown-item {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-base);
        min-height: 44px;
    }

    /* Overlay backdrop */
    .mc-dropdown-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: calc(var(--z-dropdown) + 9);
        opacity: 0;
        transition: opacity 0.2s;
        pointer-events: none;
    }
    .mc-dropdown-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Dropdown positioned above trigger (for bottom-of-page menus) */
/* Il menu ancorato a SINISTRA del suo comando.
   `.mc-dropdown-menu` nasce ancorato a destra, perche' quasi sempre pende da
   un comando in fondo a una riga. Quando pende da una scheda che sta a
   sinistra — le tendine «Mappa» e «Registri d'invio» del rapporto campagna —
   ancorato a destra esce dallo schermo. */
.mc-dropdown-menu-start {
    right: auto;
    left: 0;
}

.mc-dropdown-menu-up {
    bottom: 100%;
    top: auto;
    margin-bottom: var(--space-1);
    transform: translateY(var(--space-2));
}
.mc-dropdown-menu-up.active { transform: translateY(0);
    margin-top: 0;
    left: 0;
    right: auto;
}

/* Dropdown label item (non-interactive header) */
.mc-dropdown-label {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    pointer-events: none;
}

/* Dropdown submenu — hover-reveal nested menu */
.mc-dropdown-submenu {
    position: relative;
}
.mc-dropdown-submenu > .mc-dropdown-item {
    justify-content: flex-start;
}
.mc-dropdown-submenu-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 220px;
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-dropdown);
    padding: var(--space-1) 0;
    z-index: 1010;
}
.mc-dropdown-submenu:hover > .mc-dropdown-submenu-menu,
.mc-dropdown-submenu.open > .mc-dropdown-submenu-menu {
    display: block;
}
.mc-dropdown-submenu-menu .mc-dropdown-item {
    white-space: nowrap;
}
/* Right-aligned parent → submenu opens left */
.mc-dropdown-menu-end .mc-dropdown-submenu-menu {
    left: auto;
    right: 100%;
}

/* ==========================================================================
   Avatar
   ========================================================================== */

/* ── Base avatar ── */
.mc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-teal-light);
    color: var(--color-teal);
    font-weight: var(--weight-semibold);
    overflow: hidden;
    flex-shrink: 0;
    line-height: 1;
    text-align: center;
    position: relative;
    user-select: none;
}
.mc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mc-avatar svg { width: 60%; height: 60%; }

/* ── Sizes ── */
.mc-avatar-xs  { width: 24px;  height: 24px;  font-size: 10px; }
.mc-avatar-sm  { width: var(--space-7);  height: var(--space-7);  font-size: var(--text-xs); }
.mc-avatar-md  { width: var(--space-9);  height: var(--space-9);  font-size: var(--text-sm); }
.mc-avatar-lg  { width: var(--space-12); height: var(--space-12); font-size: var(--text-md); }
.mc-avatar-xl  { width: 64px;  height: 64px;  font-size: var(--text-xl); }
.mc-avatar-2xl { width: 96px;  height: 96px;  font-size: var(--text-2xl); }

/* ── Color palette (8 variants matching chart pastel palette) ── */
.mc-avatar-1 { background: var(--chart-1-bg); color: var(--chart-1); }
.mc-avatar-2 { background: var(--chart-2-bg); color: var(--chart-2); }
.mc-avatar-3 { background: var(--chart-3-bg); color: var(--chart-3); }
.mc-avatar-4 { background: var(--chart-4-bg); color: var(--chart-4); }
.mc-avatar-5 { background: var(--chart-5-bg); color: var(--chart-5); }
.mc-avatar-6 { background: var(--chart-6-bg); color: var(--chart-6); }
.mc-avatar-7 { background: var(--chart-7-bg); color: var(--chart-7); }
.mc-avatar-8 { background: var(--chart-8-bg); color: var(--chart-8); }
.mc-avatar-teal { background: var(--color-teal-light); color: var(--color-teal); }

/* Alias: mc-avatar-color-N (used in admin views) */
.mc-avatar-color-1 { background: var(--chart-1-bg); color: var(--chart-1); }
.mc-avatar-color-2 { background: var(--chart-2-bg); color: var(--chart-2); }
.mc-avatar-color-3 { background: var(--chart-3-bg); color: var(--chart-3); }
.mc-avatar-color-4 { background: var(--chart-4-bg); color: var(--chart-4); }
.mc-avatar-color-5 { background: var(--chart-5-bg); color: var(--chart-5); }
.mc-avatar-color-6 { background: var(--chart-6-bg); color: var(--chart-6); }
.mc-avatar-color-7 { background: var(--chart-7-bg); color: var(--chart-7); }
.mc-avatar-color-8 { background: var(--chart-8-bg); color: var(--chart-8); }

/* ── Shape variants ── */
.mc-avatar-rounded { border-radius: var(--radius-lg); }
.mc-avatar-square  { border-radius: var(--radius-input); }

/* ── Status indicator (online/offline/busy/away) ── */
.mc-avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 25%;
    min-width: 8px;
    min-height: 8px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-card-bg);
    background: var(--color-text-disabled);
}
.mc-avatar-status-online  { background: var(--color-success); }
.mc-avatar-status-offline { background: var(--color-text-disabled); }
.mc-avatar-status-busy    { background: var(--color-error); }
.mc-avatar-status-away    { background: var(--color-warning); }

/* ── Ring / border ── */
.mc-avatar-ring {
    box-shadow: 0 0 0 2px var(--color-card-bg), 0 0 0 4px var(--color-teal);
}

/* ── Avatar group (stacked overlapping) ── */
.mc-avatar-group {
    display: inline-flex;
    align-items: center;
}
.mc-avatar-group .mc-avatar {
    border: 2px solid var(--color-card-bg);
    margin-left: -8px;
    transition: transform var(--transition-fast);
}
.mc-avatar-group .mc-avatar:first-child { margin-left: 0; }
.mc-avatar-group .mc-avatar:hover { transform: translateY(-2px); z-index: 1; }
.mc-avatar-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border: 2px solid var(--color-card-bg);
    margin-left: -8px;
}

/* ── Placeholder SVG variants ── */
/* Default: modern abstract person silhouette */
.mc-avatar-placeholder svg { width: 65%; height: 65%; opacity: 0.7; }
/* Company/org icon */
.mc-avatar-company svg { width: 55%; height: 55%; }

/* ── Upload overlay (hover state for editable avatars) ── */
.mc-avatar-editable { cursor: pointer; }
.mc-avatar-editable::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0,0,0,0);
    transition: background var(--transition-fast);
}
.mc-avatar-editable:hover::after {
    background: rgba(0,0,0,0.35);
}
.mc-avatar-editable .mc-avatar-edit-icon {
    position: absolute;
    z-index: 1;
    color: white;
    font-size: 20px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.mc-avatar-editable:hover .mc-avatar-edit-icon { opacity: 1; }

/* ==========================================================================
   Tooltip — JS-driven via McTooltip (public/refactor/js/Tooltip.js)
   Auto-enhances any element with [data-tooltip]. Falls back gracefully to
   native browser `title` behavior if JS hasn't loaded yet.
   ========================================================================== */

/* Tooltip design tokens — inverted surface by default.
   Because --color-text and --color-white themselves invert in dark mode
   ([data-theme="dark"] in variables.css), the default tooltip naturally
   becomes "dark surface in light mode / light surface in dark mode". */
:root {
    --color-tooltip-bg:      var(--color-text);
    --color-tooltip-text:    var(--color-white);
    --color-tooltip-border:  transparent;
    --color-tooltip-shadow:  0 6px 20px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] {
    --color-tooltip-shadow:  0 6px 20px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* The single tooltip element appended to <body>. Hidden by default. */
.mc-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-tooltip);
    max-width: 240px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-tooltip-bg);
    color: var(--color-tooltip-text);
    border: 1px solid var(--color-tooltip-border);
    border-radius: var(--radius-input);
    box-shadow: var(--color-tooltip-shadow);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.45;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.96);
    transform-origin: center;
    transition:
        opacity 120ms ease-out,
        transform 120ms cubic-bezier(0.2, 0, 0.1, 1.2);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Only interactive/link-bearing tooltips need pointer events */
.mc-tooltip--interactive {
    pointer-events: auto;
}
.mc-tooltip--interactive a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mc-tooltip--interactive a:hover { opacity: 0.8; }

/* Measuring phase — invisible but laid out so we can read getBoundingClientRect */
.mc-tooltip.is-measuring {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: none !important;
    transition: none !important;
}

.mc-tooltip.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Content wrapper — allows multi-line with preserved whitespace collapsing */
.mc-tooltip-content {
    display: block;
}
.mc-tooltip-content > :first-child { margin-top: 0; }
.mc-tooltip-content > :last-child { margin-bottom: 0; }
.mc-tooltip-content strong,
.mc-tooltip-content b { font-weight: var(--weight-semibold); }
.mc-tooltip-content kbd {
    display: inline-block;
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.mc-tooltip--light .mc-tooltip-content kbd,
.mc-tooltip--info-reverse .mc-tooltip-content kbd {
    background: var(--color-hover-bg);
    border-color: var(--color-border);
}

/* ---------- Sizes ---------- */
.mc-tooltip--size-sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
}
.mc-tooltip--size-md { /* default already set */ }
.mc-tooltip--size-lg {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.5;
    max-width: 320px;
}

/* ---------- Variants ---------- */
.mc-tooltip--default { /* uses base tokens */ }

.mc-tooltip--light {
    --color-tooltip-bg:     var(--color-card-bg);
    --color-tooltip-text:   var(--color-text);
    --color-tooltip-border: var(--color-border);
}
.mc-tooltip--light .mc-tooltip-content kbd {
    background: var(--color-hover-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

.mc-tooltip--teal {
    --color-tooltip-bg:   var(--color-teal);
    --color-tooltip-text: var(--color-white);
}
[data-theme="dark"] .mc-tooltip--teal { --color-tooltip-text: #0A0A0A; }

.mc-tooltip--success {
    --color-tooltip-bg:   var(--color-success);
    --color-tooltip-text: var(--color-white);
}
[data-theme="dark"] .mc-tooltip--success { --color-tooltip-text: #0A0A0A; }

.mc-tooltip--danger {
    --color-tooltip-bg:   var(--color-error);
    --color-tooltip-text: var(--color-white);
}
[data-theme="dark"] .mc-tooltip--danger { --color-tooltip-text: #0A0A0A; }

.mc-tooltip--warning {
    --color-tooltip-bg:   var(--color-warning);
    --color-tooltip-text: var(--color-white);
}
[data-theme="dark"] .mc-tooltip--warning { --color-tooltip-text: #0A0A0A; }

.mc-tooltip--info {
    --color-tooltip-bg:   var(--color-info);
    --color-tooltip-text: var(--color-white);
}
[data-theme="dark"] .mc-tooltip--info { --color-tooltip-text: #0A0A0A; }

/* ---------- Arrow ---------- */
.mc-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}
.mc-tooltip--no-arrow .mc-tooltip-arrow { display: none; }

/* Top: arrow on bottom edge pointing down */
.mc-tooltip--pos-top .mc-tooltip-arrow,
.mc-tooltip--pos-top-start .mc-tooltip-arrow,
.mc-tooltip--pos-top-end .mc-tooltip-arrow {
    left: 50%;
    bottom: -6px;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: var(--color-tooltip-bg);
    border-bottom: 0;
    filter: drop-shadow(0 1px 0 var(--color-tooltip-border));
}
.mc-tooltip--pos-top-start .mc-tooltip-arrow { left: var(--space-3); margin-left: 0; }
.mc-tooltip--pos-top-end .mc-tooltip-arrow { left: auto; right: var(--space-3); margin-left: 0; }

/* Bottom: arrow on top edge pointing up */
.mc-tooltip--pos-bottom .mc-tooltip-arrow,
.mc-tooltip--pos-bottom-start .mc-tooltip-arrow,
.mc-tooltip--pos-bottom-end .mc-tooltip-arrow {
    left: 50%;
    top: -6px;
    margin-left: -6px;
    border: 6px solid transparent;
    border-bottom-color: var(--color-tooltip-bg);
    border-top: 0;
    filter: drop-shadow(0 -1px 0 var(--color-tooltip-border));
}
.mc-tooltip--pos-bottom-start .mc-tooltip-arrow { left: var(--space-3); margin-left: 0; }
.mc-tooltip--pos-bottom-end .mc-tooltip-arrow { left: auto; right: var(--space-3); margin-left: 0; }

/* Left: arrow on right edge pointing right */
.mc-tooltip--pos-left .mc-tooltip-arrow,
.mc-tooltip--pos-left-start .mc-tooltip-arrow,
.mc-tooltip--pos-left-end .mc-tooltip-arrow {
    top: 50%;
    right: -6px;
    margin-top: -6px;
    border: 6px solid transparent;
    border-left-color: var(--color-tooltip-bg);
    border-right: 0;
}
.mc-tooltip--pos-left-start .mc-tooltip-arrow { top: var(--space-3); margin-top: 0; }
.mc-tooltip--pos-left-end .mc-tooltip-arrow { top: auto; bottom: var(--space-3); margin-top: 0; }

/* Right: arrow on left edge pointing left */
.mc-tooltip--pos-right .mc-tooltip-arrow,
.mc-tooltip--pos-right-start .mc-tooltip-arrow,
.mc-tooltip--pos-right-end .mc-tooltip-arrow {
    top: 50%;
    left: -6px;
    margin-top: -6px;
    border: 6px solid transparent;
    border-right-color: var(--color-tooltip-bg);
    border-left: 0;
}
.mc-tooltip--pos-right-start .mc-tooltip-arrow { top: var(--space-3); margin-top: 0; }
.mc-tooltip--pos-right-end .mc-tooltip-arrow { top: auto; bottom: var(--space-3); margin-top: 0; }

/* ---------- Entrance direction (subtle slide-in toward trigger) ---------- */
.mc-tooltip:not(.is-visible).mc-tooltip--pos-top,
.mc-tooltip:not(.is-visible).mc-tooltip--pos-top-start,
.mc-tooltip:not(.is-visible).mc-tooltip--pos-top-end {
    transform: scale(0.96) translateY(4px);
}
.mc-tooltip:not(.is-visible).mc-tooltip--pos-bottom,
.mc-tooltip:not(.is-visible).mc-tooltip--pos-bottom-start,
.mc-tooltip:not(.is-visible).mc-tooltip--pos-bottom-end {
    transform: scale(0.96) translateY(-4px);
}
.mc-tooltip:not(.is-visible).mc-tooltip--pos-left,
.mc-tooltip:not(.is-visible).mc-tooltip--pos-left-start,
.mc-tooltip:not(.is-visible).mc-tooltip--pos-left-end {
    transform: scale(0.96) translateX(4px);
}
.mc-tooltip:not(.is-visible).mc-tooltip--pos-right,
.mc-tooltip:not(.is-visible).mc-tooltip--pos-right-start,
.mc-tooltip:not(.is-visible).mc-tooltip--pos-right-end {
    transform: scale(0.96) translateX(-4px);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .mc-tooltip {
        transition: opacity 60ms linear;
        transform: none !important;
    }
}

/* ---------- Help cursor for obvious hover targets ---------- */
[data-tooltip]:not(button):not(a):not(input):not(select):not(textarea) {
    cursor: help;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

/* Modern pagination bar — used by shared `_pagination.blade.php` component.
   Layout: summary on left, numbered nav on right, lives inside card footer. */
.mc-pagination {
    /* Three columns, not `space-between`.
       With flex, the numbered nav drifts left or right depending on how long
       "Visualizzazione 1–20 di 1.204" happens to be, so it moves as you page
       through — the one control you aim at repeatedly is the one that will
       not hold still. `1fr auto 1fr` pins it to the centre of the bar
       whatever sits beside it. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: var(--space-px) solid var(--color-border);
    background: var(--color-bg-subtle);
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
}
.mc-pagination-summary {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
/* A fact about the collection, sitting with the count it belongs beside.
   Separated by a divider rather than more whitespace: the two are different
   statements and would otherwise read as one run-on sentence. */
.mc-pagination-note {
    color: var(--color-text-muted);
}
.mc-pagination-note::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin: 0 var(--space-2) -0.1em;
    background: var(--color-border-strong);
}
.mc-pagination-summary strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}
.mc-pagination-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.mc-pagination-page,
.mc-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-8);
    height: var(--space-8);
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    background: var(--color-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}
.mc-pagination-page:hover,
.mc-pagination-btn:hover {
    background: var(--color-hover-bg);
    border-color: var(--color-border-strong);
    text-decoration: none;
    color: var(--color-text);
}
.mc-pagination-page.is-current {
    background: var(--color-teal);
    color: var(--color-white);
    border-color: var(--color-teal);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.mc-pagination-page.is-current:hover {
    background: var(--color-teal);
    color: var(--color-white);
    border-color: var(--color-teal);
}
.mc-pagination-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.mc-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-6);
    height: var(--space-8);
    color: var(--color-text-muted);
    user-select: none;
}

/* ── The reader's own controls ────────────────────────────────────────────
   Jump-to-page and rows-per-page. Both are quiet by design: they sit in the
   furniture at the bottom of a list, and a list's job is to show its rows.
   Same height as the page buttons so the bar reads as one line rather than
   three things that happen to be near each other. */
.mc-pagination-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
}
.mc-pagination-jump,
.mc-pagination-size {
    /* Ancorato al bordo destro, non lasciato galleggiare nella sua colonna.
       La colonna e' `1fr` e il contenuto e' `inline-flex`: senza questo, il
       comando si appoggia dove capita a seconda di quanto e' larga la navetta
       in mezzo, e cambia posto passando da una pagina di sei numeri a una di
       tre. Un comando che si sposta mentre lo usi e' un comando che si manca. */
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    /* The whole thing is a <label>, so the words are the control's hit area
       too — no id to keep unique across sixty views that share this file. */
    cursor: pointer;
    white-space: nowrap;
}
/* Scoped through `.mc-pagination` on purpose.
   `.mc-card select` — a blanket rule that dresses ANY select inside a card as
   a form field — is (0,1,1) and was beating the bare class, so the same
   control stood 44px tall on tables that live in a card and 32px on the ones
   that do not. The reader sees one component changing size from screen to
   screen with nothing to explain it. Two classes outrank a class and a type,
   and the intent reads correctly too: inside this bar, this is furniture, not
   a form field. */
.mc-pagination .mc-pagination-jump-input,
.mc-pagination .mc-pagination-size-select {
    height: var(--space-8);
    padding: 0 var(--space-2);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    cursor: pointer;
}
.mc-pagination .mc-pagination-jump-input {
    width: 4.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    /* The spinners are 20px of chrome on a box that holds two digits, and
       stepping one page at a time is what the arrows beside it already do. */
    -moz-appearance: textfield;
    appearance: textfield;
}
.mc-pagination-jump-input::-webkit-outer-spin-button,
.mc-pagination-jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mc-pagination .mc-pagination-size-select {
    padding-right: var(--space-5);
    /* The caret, drawn in currentColor so it follows the theme rather than
       being a fixed grey that goes invisible in the dark. */
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.mc-pagination .mc-pagination-jump-input:hover,
.mc-pagination .mc-pagination-size-select:hover { border-color: var(--color-border-strong); }
.mc-pagination .mc-pagination-jump-input:focus-visible,
.mc-pagination .mc-pagination-size-select:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 1px;
    border-color: var(--color-teal);
}

@media (max-width: 860px) {
    /* Stacked, the three zones stop being columns and become rows: at this
       width the middle column is narrower than the numbers it holds, and the
       nav starts overflowing its own cell. */
    .mc-pagination {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--space-3);
    }
    .mc-pagination-tools { justify-content: center; flex-wrap: wrap; }
}

/* Mobile: stack summary above nav */
@media (max-width: 640px) {
    .mc-pagination {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        padding: var(--space-3);
    }
    .mc-pagination-summary {
        text-align: center;
    }
    .mc-pagination-nav {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Backward-compatible legacy class (deprecated, kept for any straggler views).
   New code should use _pagination.blade.php component instead. */
.mc-pagination-item {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--space-9); height: var(--space-9);
    padding: 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text);
    border: var(--space-px) solid transparent; border-radius: var(--radius-input);
    cursor: pointer; transition: all var(--transition-fast); text-decoration: none; background: none;
}
.mc-pagination-item:hover { background: var(--color-hover-bg); text-decoration: none; }
.mc-pagination-item.active { background: var(--color-teal); color: var(--color-white); }
.mc-pagination-item.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ==========================================================================
   Loading spinner
   ========================================================================== */

.mc-spinner {
    width: 20px; height: 20px;
    border: var(--space-0-5) solid var(--color-border);
    border-top-color: var(--color-teal);
    border-radius: 50%;
    animation: mc-spin 600ms linear infinite;
}
.mc-spinner-sm { width: var(--space-3-5); height: var(--space-3-5); }
.mc-spinner-lg { width: var(--space-8); height: var(--space-8); border-width: var(--space-0-5); }
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Busy Overlay — full-screen blocking mask with spinner + message
   Use for long-running operations (upgrade, import, export, etc.)
   where the user MUST NOT close the browser or navigate away.
   ========================================================================== */
.mc-busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-surface) 85%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: mc-busy-fade-in 200ms ease-out;
}
.mc-busy-overlay.is-visible { display: flex; }
@keyframes mc-busy-fade-in { from { opacity: 0; } to { opacity: 1; } }

.mc-busy-overlay-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xl, 0 20px 40px -10px rgba(0,0,0,.2));
    padding: var(--space-8);
    max-width: 480px;
    width: calc(100% - var(--space-8));
    text-align: center;
}
.mc-busy-overlay-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-teal);
    border-radius: 50%;
    animation: mc-spin 800ms linear infinite;
    margin: 0 auto var(--space-5);
}
.mc-busy-overlay-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}
.mc-busy-overlay-message {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}
.mc-busy-overlay-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-align: left;
    margin-bottom: var(--space-4);
}
.mc-busy-overlay-warning .material-symbols-rounded {
    font-size: 20px;
    color: var(--color-warning);
    flex-shrink: 0;
}
.mc-busy-overlay-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
    font-size: var(--text-sm);
}
.mc-busy-overlay-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    opacity: 0.5;
    transition: opacity 200ms, color 200ms;
}
.mc-busy-overlay-step.is-active { opacity: 1; color: var(--color-text); font-weight: var(--weight-medium); }
.mc-busy-overlay-step.is-done { opacity: 1; color: var(--color-success); }
.mc-busy-overlay-step-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-busy-overlay-step.is-active .mc-busy-overlay-step-icon {
    border-color: var(--color-teal);
    border-top-color: transparent;
    animation: mc-spin 800ms linear infinite;
}
.mc-busy-overlay-step.is-done .mc-busy-overlay-step-icon {
    background: var(--color-success);
    border-color: var(--color-success);
}
.mc-busy-overlay-step.is-done .mc-busy-overlay-step-icon::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

/* ==========================================================================
   Divider
   ========================================================================== */

.mc-divider {
    display: flex; align-items: center; gap: var(--space-4);
    color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-6) 0;
}
.mc-divider::before, .mc-divider::after { content: ''; flex: 1; height: var(--space-px); background: var(--color-border); }

/* ==========================================================================
   Confirm Dialog
   ========================================================================== */

.mc-confirm-icon {
    width: var(--space-12); height: var(--space-12);
    margin: 0 auto var(--space-4); border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
}
.mc-confirm-icon.warning { background: var(--color-warning-bg); color: var(--color-warning); }
.mc-confirm-icon.danger  { background: var(--color-error-bg); color: var(--color-error); }
.mc-confirm-icon.info    { background: var(--color-info-bg); color: var(--color-info); }
.mc-confirm-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text); text-align: center; margin-bottom: var(--space-1); }
.mc-confirm-text { font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; margin-bottom: var(--space-5); line-height: var(--leading-normal); }
.mc-confirm-body { padding: var(--space-6) var(--space-6) var(--space-5); text-align: center; }
.mc-confirm-actions { display: flex; gap: var(--space-2); justify-content: center; }

/* ==========================================================================
   List Switcher — quick-switch between lists from page header
   Lives inside mc-banner-actions, same height as mc-btn-sm (32px).
   ========================================================================== */

.mc-list-switcher { position: relative; }

.mc-list-switcher-trigger {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 32px;
    padding: 0 var(--space-3);
    background: var(--color-card-bg); border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-input); cursor: pointer;
    font-family: inherit; font-size: var(--text-sm);
    color: var(--color-text); transition: all 0.15s ease;
    white-space: nowrap;
}
.mc-list-switcher-trigger:hover,
.mc-list-switcher.open .mc-list-switcher-trigger {
    border-color: var(--color-teal); background: var(--color-teal-light);
}
.mc-list-switcher-trigger-name {
    font-weight: var(--weight-medium);
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-list-switcher-trigger-caret {
    font-size: 16px; color: var(--color-text-muted); margin-left: calc(-1 * var(--space-1));
}

/* Dropdown — right-aligned to avoid sidebar overlap */
.mc-list-switcher-dropdown {
    display: none; position: absolute; top: calc(100% + var(--space-2));
    right: 0;
    min-width: 280px; max-width: 340px;
    background: var(--color-card-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-dropdown);
    z-index: 100; overflow: hidden;
}
.mc-list-switcher.open .mc-list-switcher-dropdown { display: block; }

.mc-list-switcher-search {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3); border-bottom: 1px solid var(--color-border);
}
.mc-list-switcher-search .material-symbols-rounded {
    font-size: 18px; color: var(--color-text-disabled); flex-shrink: 0;
}
.mc-list-switcher-search input {
    border: none; outline: none; background: transparent;
    font-size: var(--text-sm); color: var(--color-text);
    width: 100%; font-family: inherit;
}
.mc-list-switcher-search input::placeholder { color: var(--color-text-disabled); }

.mc-list-switcher-items {
    max-height: 280px; overflow-y: auto;
    padding: var(--space-1-5);
}

.mc-list-switcher-item {
    display: flex; align-items: center; gap: var(--space-2-5);
    padding: var(--space-2) var(--space-2-5);
    border-radius: var(--radius-input); cursor: pointer;
    text-decoration: none; color: var(--color-text);
    transition: background 0.12s ease;
}
.mc-list-switcher-item:hover { background: var(--color-hover-bg); }
.mc-list-switcher-item.active { background: var(--color-teal-light); }

.mc-list-switcher-item-content { flex: 1; min-width: 0; }
.mc-list-switcher-item-name {
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    color: var(--color-text); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.mc-list-switcher-item-meta {
    font-size: var(--text-xs); color: var(--color-text-muted);
}
.mc-list-switcher-check {
    font-size: 18px; color: var(--color-teal); flex-shrink: 0;
}

.mc-list-switcher-item.mc-list-switcher-hidden { display: none; }

/* Mobile — dropdown fixed to bottom as sheet */
@media (max-width: 767px) {
    .mc-list-switcher-trigger-name { max-width: 100px; }
    .mc-list-switcher-dropdown {
        position: fixed; top: auto; bottom: 0; left: 0; right: 0;
        min-width: 0; max-width: none; width: 100%;
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        max-height: 60vh;
    }
}

/* ==========================================================================
   List (AJAX list container)
   ========================================================================== */

.mc-list-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-4); gap: var(--space-4); flex-wrap: wrap;
}
.mc-list-search { position: relative; max-width: 300px; flex: 1; }
.mc-list-search-icon {
    position: absolute; left: var(--space-3); top: 50%;
    transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none;
}
.mc-list-search .mc-form-input { padding-left: var(--space-9); }
.mc-list-actions { display: flex; align-items: center; gap: var(--space-2); }
.mc-list-content { min-height: 200px; position: relative; }
.mc-list-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.8); z-index: 10;
}
.mc-list-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: var(--space-4); flex-wrap: wrap; gap: var(--space-2);
}
.mc-list-info { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ==========================================================================
   Mobile: show row actions always
   ========================================================================== */

@media (max-width: 767px) {
    .mc-row-actions { opacity: 1; }
}

/* ==========================================================================
   Dashboard utilities
   ========================================================================== */

.mc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}

.mc-stat-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 768px) {
    .mc-stat-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .mc-stat-grid-3 { grid-template-columns: 1fr; }
}

.mc-stat-meta {
    margin-top: var(--space-2);
}

.mc-stat-meta-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-0-5);
}

.mc-welcome-subtitle {
    color: var(--color-text-muted);
    margin: 0;
}

/* Tabs (simple) */
.mc-tabs {
    display: flex;
    gap: var(--space-6);
    border-bottom: var(--space-px) solid var(--color-border);
    margin-bottom: var(--space-4);
}

.mc-tab-btn {
    padding: var(--space-2) 0;
    border: none;
    background: none;
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    border-bottom: var(--space-0-5) solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mc-tab-btn:hover {
    color: var(--color-text);
}

.mc-tab-btn.active {
    color: var(--color-text);
    border-bottom-color: var(--color-teal);
}

.mc-tab-pane {
    display: none;
}

.mc-tab-pane.active {
    display: block;
}

/* Ranked list item (top 5, etc.) */
.mc-ranked-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

.mc-ranked-item + .mc-ranked-item {
    border-top: var(--space-px) solid var(--color-border);
}

.mc-ranked-num {
    width: var(--space-6);
    height: var(--space-6);
    background: var(--color-hover-bg);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.mc-ranked-content {
    flex: 1;
    min-width: 0;
}

.mc-ranked-title {
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.mc-ranked-title a {
    color: var(--color-text);
    text-decoration: none;
}

.mc-ranked-title a:hover {
    color: var(--color-teal);
}

.mc-ranked-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.mc-ranked-stat {
    text-align: right;
    min-width: 80px;
    flex-shrink: 0;
}

.mc-ranked-stat-value {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.mc-ranked-stat-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ==========================================================================
   Activity Timeline (vertical line with dots)
   ========================================================================== */

.mc-timeline {
    position: relative;
    padding-left: var(--space-10);
}

.mc-timeline::before {
    content: '';
    position: absolute;
    left: var(--space-3-5);
    top: var(--space-4);
    bottom: var(--space-4);
    width: var(--space-0-5);
    background: var(--color-border);
    border-radius: var(--radius-full);
}

.mc-timeline-item {
    position: relative;
    padding: var(--space-4) 0;
}

.mc-timeline-item + .mc-timeline-item {
    border-top: none;
}

.mc-timeline-dot {
    position: absolute;
    left: calc(var(--space-10) * -1 + var(--space-1-5));
    top: var(--space-5);
    width: var(--space-4);
    height: var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-card-bg);
    border: var(--space-0-5) solid var(--color-teal);
    z-index: 1;
}

.mc-timeline-dot.green { border-color: var(--color-success); }
.mc-timeline-dot.blue { border-color: var(--color-info); }
.mc-timeline-dot.orange { border-color: var(--color-warning); }

.mc-timeline-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.mc-timeline-avatar {
    flex-shrink: 0;
}

.mc-timeline-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--color-text);
}

.mc-timeline-time {
    font-size: var(--text-sm);
    color: var(--color-text-disabled);
    margin-left: auto;
    white-space: nowrap;
}

.mc-timeline-message {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

.mc-timeline-message a {
    color: var(--color-teal);
    font-weight: var(--weight-medium);
}

/* Legacy activity item (kept for compatibility) */
.mc-activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

.mc-activity-item + .mc-activity-item {
    border-top: var(--space-px) solid var(--color-border);
}

.mc-activity-content { flex: 1; min-width: 0; }
.mc-activity-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-0-5); }
.mc-activity-name { font-weight: var(--weight-medium); color: var(--color-text); }
.mc-activity-time { font-size: var(--text-xs); color: var(--color-text-muted); }
.mc-activity-message { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Info tip (inline help icon with tooltip) */
.mc-info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-4);
    height: var(--space-4);
    border-radius: var(--radius-full);
    color: var(--color-text-disabled);
    cursor: help;
    position: relative;
    vertical-align: middle;
    margin-left: var(--space-1);
}
.mc-info-tip svg { width: var(--space-3-5); height: var(--space-3-5); }
.mc-info-tip:hover { color: var(--color-text-muted); }
/* Tooltip rendering handled by Tooltip.js (McTooltip) — the old ::after
   pseudo-element was removed to avoid double tooltips. `mc-info-tip` triggers
   still use `data-tooltip="..."` and now get the richer JS-driven tooltip. */

/* Section description text */
.mc-section-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: var(--space-0-5) 0 0 0;
    line-height: var(--leading-normal);
}

/* Highlight stat (big number with progress bar) */
.mc-highlight-stat {
    padding: var(--space-4) 0;
}
.mc-highlight-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}
.mc-highlight-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

/* Chart container */
.mc-chart-container {
    width: 100%;
    height: 300px;
}

.mc-chart-container-sm { height: 200px; }
.mc-chart-container-lg { height: 400px; }

/* Stat row (horizontal key-value pairs) */
.mc-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: var(--space-px) solid var(--color-border);
    font-size: var(--text-base);
}
.mc-stat-row:last-child { border-bottom: none; }
.mc-stat-row-label { color: var(--color-text-muted); }
.mc-stat-row-value { font-weight: var(--weight-semibold); color: var(--color-text); }

.mc-country-flag { font-size: var(--text-md); margin-right: var(--space-2); vertical-align: middle; }

/* Two-column grid for stat pairs */
.mc-stat-pair-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}
@media (max-width: 767px) {
    .mc-stat-pair-grid { grid-template-columns: 1fr; }
}

/* Chart legend inline */
.mc-chart-legend {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mc-chart-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
}
.mc-chart-legend-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
}

/* ==========================================================================
   Promo Section (feature promotion with CTA)
   ========================================================================== */

.mc-promo {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-8) var(--space-6);
    text-align: center;
}

.mc-promo-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.mc-promo-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Announcement Banner (Mailchimp-style hero card with illustration)
   ========================================================================== */

.mc-banner {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    background: var(--color-banner-bg, #F0F5F4);
    border-radius: var(--radius-card);
    padding: var(--space-8) var(--space-10);
    margin-bottom: var(--space-3);
}

.mc-banner-content { flex: 1; min-width: 0; }

.mc-banner-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
    line-height: var(--leading-tight);
}

.mc-banner-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
    /* In `ch`, non in pixel: è una misura di RIGHE DI TESTO, e in pixel resta
       giusta solo per il carattere e la dimensione di oggi.

       Il tetto di 65-75ch vale per la prosa lunga, dove il ritorno a capo è
       faticoso perché si ripete cento volte. Qui sono due frasi: strette a
       480px andavano su tre righe corte in un riquadro largo il doppio, e il
       vuoto a destra faceva sembrare il testo schiacciato in un angolo. */
    max-width: 78ch;
    line-height: var(--leading-normal);
    text-wrap: pretty;
}

.mc-banner-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.mc-banner-illustration {
    flex-shrink: 0;
    width: 180px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-banner-illustration svg { width: 100%; height: 100%; }

/* Banner meta — info line / mini stats beneath description */
/* I numeri del banner sono la parte che si guarda, non la didascalia.
   Erano 12px grigi: la stessa misura di un'unita' di misura sotto un campo,
   per due cifre che dicono quanto e' grande il tuo pubblico. Ora sono
   pastiglie: 14px, il numero nell'accento, il fondo della scheda a staccarle
   dallo sfondo del banner. Il colore sta sul NUMERO e non sulla parola,
   perche' e' il numero che si cerca. */
.mc-banner-meta {
    display: flex;
    gap: var(--space-2-5);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}
.mc-banner-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
}
.mc-banner-meta-item .material-symbols-rounded {
    font-size: var(--space-4);
    color: var(--color-teal);
}
.mc-banner-meta-item .material-symbols-rounded {
    font-size: 16px;
    opacity: 0.7;
}
.mc-banner-meta-value {
    font-weight: var(--weight-bold);
    color: var(--color-teal);
    font-variant-numeric: tabular-nums;
}

/* ---------- Open / Breathing variant ----------
   No background, no border-radius. Content breathes on the page.
   Add class: mc-banner-open                                       */
.mc-banner.mc-banner-open {
    background: transparent;
    border-radius: 0;
    padding: var(--space-6) 0 var(--space-8) 0;
    border-bottom: none;
}
.mc-banner.mc-banner-open .mc-banner-title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-black);
    margin-bottom: var(--space-2);
}
.mc-banner.mc-banner-open .mc-banner-desc {
    max-width: 86ch;
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
}
.mc-banner.mc-banner-open .mc-banner-illustration {
    width: 200px;
    height: 130px;
    opacity: 1;
}

@media (max-width: 767px) {
    .mc-banner { flex-direction: column; padding: var(--space-6); text-align: center; }
    .mc-banner.mc-banner-open { padding: var(--space-4) 0 var(--space-6) 0; }
    .mc-banner-illustration { width: 120px; height: 100px; order: -1; }
    .mc-banner.mc-banner-open .mc-banner-illustration { width: 140px; height: 120px; }
    .mc-banner-actions { justify-content: center; }
    .mc-banner-meta { justify-content: center; flex-wrap: wrap; }
}

/* ==========================================================================
   Empty State Illustration (styled SVG area)
   ========================================================================== */

.mc-empty-illustration {
    width: 160px;
    height: 120px;
    margin: 0 auto var(--space-5);
}

/* ==========================================================================
   Card Grid (template gallery, form gallery)
   ========================================================================== */

.mc-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.mc-card-grid-item {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.mc-card-grid-item:hover {
    box-shadow: var(--shadow-dropdown);
    border-color: var(--color-border-strong);
    text-decoration: none;
    color: inherit;
}

.mc-card-grid-image {
    width: 100%;
    aspect-ratio: 16/10;
    background: var(--color-hover-bg);
    overflow: hidden;
}

.mc-card-grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mc-card-grid-body {
    padding: var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mc-card-grid-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-card-grid-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    flex: 1;
}

.mc-card-grid-link {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-teal);
    text-decoration: none;
}

.mc-card-grid-link:hover { text-decoration: underline; }

@media (max-width: 1199px) { .mc-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .mc-card-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Guide Steps (informative workflow — non-clickable, subtle breathing glow)
   Clean inline step numbers, no floating badges, no arrows
   ========================================================================== */

.mc-guide-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.mc-guide-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-card-bg);
    border: var(--space-px) solid transparent;
    border-radius: var(--radius-card);
    cursor: default;
    animation: guideGlow 4s ease-in-out infinite;
}

.mc-guide-step:nth-child(2) { animation-delay: 1.3s; }
.mc-guide-step:nth-child(3) { animation-delay: 2.6s; }

@keyframes guideGlow {
    0%, 100% { border-color: transparent; }
    50% { border-color: var(--color-teal-light, rgba(0, 150, 136, 0.18)); }
}

.mc-guide-step-icon {
    width: var(--space-10);
    height: var(--space-10);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-hover-bg);
    flex-shrink: 0;
}

.mc-guide-step-icon svg { width: var(--space-5); height: var(--space-5); }

.mc-guide-step-body { flex: 1; min-width: 0; }

.mc-guide-step-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-0h);
}

.mc-guide-step-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

@media (max-width: 1199px) { .mc-guide-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .mc-guide-steps { grid-template-columns: 1fr; } }

/* Legacy alias — old mc-guide-card (static, no hover) */
.mc-guide-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.mc-guide-card { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--color-card-bg); border: var(--space-px) solid var(--color-border); border-radius: var(--radius-card); cursor: default; text-decoration: none; color: inherit; transition: border-color 0.15s ease; }
a.mc-guide-card { cursor: pointer; }
a.mc-guide-card:hover { border-color: var(--color-border-strong); }
.mc-guide-card-icon { width: var(--space-10); height: var(--space-10); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-input); background: var(--color-hover-bg); color: var(--color-text-muted); flex-shrink: 0; }
.mc-guide-card-body { flex: 1; min-width: 0; }
.mc-guide-card-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); margin-bottom: var(--space-1); }
.mc-guide-card-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
@media (max-width: 1199px) { .mc-guide-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .mc-guide-cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   Hero Feature Cards (Mailchimp popup-forms style — large illustration + text + CTA)
   3-column grid, each card has a tall SVG hero area at top.
   ========================================================================== */

.mc-hero-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.mc-hero-feature {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-decoration: none;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
}

.mc-hero-feature:hover {
    border-color: var(--color-teal);
    box-shadow: var(--shadow-dropdown);
    text-decoration: none;
    transform: translateY(-2px);
}

.mc-hero-feature-illustration {
    width: 100%;
    overflow: hidden;
    position: relative;
    line-height: 0;
}

.mc-hero-feature-illustration svg {
    width: 100%;
    height: auto;
    display: block;
}

.mc-hero-feature-body {
    padding: var(--space-5) var(--space-5) var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mc-hero-feature-title {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-hero-feature-title .material-symbols-rounded {
    font-size: 20px;
    color: var(--color-teal);
    opacity: 0.8;
}

.mc-hero-feature:hover .mc-hero-feature-title { color: var(--color-teal); }

.mc-hero-feature-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-4);
    flex: 1;
}

.mc-hero-feature-cta {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-teal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: color var(--transition-fast);
}

.mc-hero-feature:hover .mc-hero-feature-cta { color: var(--color-teal-hover); }

.mc-hero-feature-cta .material-symbols-rounded {
    font-size: 16px;
    transition: transform var(--transition-fast);
}

.mc-hero-feature:hover .mc-hero-feature-cta .material-symbols-rounded {
    transform: translateX(3px);
}

@media (max-width: 1199px) { .mc-hero-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .mc-hero-features { grid-template-columns: 1fr; } }

/* ==========================================================================
   Setup Steps (horizontal flow with SVG icons — breathing, no card box)
   ========================================================================== */

.mc-setup-steps {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
    padding: var(--space-6) 0;
}

.mc-setup-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    min-width: 0;
}

.mc-setup-step-icon {
    width: var(--space-12);
    height: var(--space-12);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.mc-setup-step-icon svg {
    width: var(--space-6);
    height: var(--space-6);
}

.mc-setup-step-body { min-width: 0; }

.mc-setup-step-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.mc-setup-step-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    max-width: 220px;
    margin: 0 auto;
}

.mc-setup-step-connector {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-bottom: var(--space-8);
}

.mc-setup-step-arrow {
    width: 40px;
    height: 16px;
}

@media (max-width: 767px) {
    .mc-setup-steps { flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0; }
    .mc-setup-step-connector { transform: rotate(90deg); padding: 0; }
}

/* ==========================================================================
   Feature Banner (CTA with image, horizontal)
   ========================================================================== */

.mc-feature-banner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.mc-feature-banner-image {
    width: 240px;
    flex-shrink: 0;
    background: var(--color-hover-bg);
    align-self: stretch;
    overflow: hidden;
}

.mc-feature-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mc-feature-banner-content {
    padding: var(--space-6);
    flex: 1;
}

.mc-feature-banner-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.mc-feature-banner-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
    line-height: var(--leading-normal);
}

@media (max-width: 767px) {
    .mc-feature-banner { flex-direction: column; }
    .mc-feature-banner-image { width: 100%; height: 160px; }
}

/* ==========================================================================
   Metric Row (inline stat numbers)
   ========================================================================== */

.mc-metric-row {
    display: flex;
    gap: var(--space-8);
    padding: var(--space-5) 0;
}

.mc-metric-item {
    flex: 1;
    min-width: 0;
}

.mc-metric-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.mc-metric-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.mc-metric-change {
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}

.mc-metric-change.up { color: var(--color-success); }
.mc-metric-change.down { color: var(--color-error); }
.mc-metric-change.neutral { color: var(--color-text-disabled); }

@media (max-width: 767px) {
    .mc-metric-row { flex-wrap: wrap; gap: var(--space-4); }
    .mc-metric-item { flex: none; width: calc(50% - var(--space-2)); }
}

/* ==========================================================================
   Filter Bar (search + filters + sort for listing pages)
   ========================================================================== */

.mc-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.mc-filter-search {
    position: relative;
    flex: 0 1 auto;
    width: 240px;
    min-width: 200px;
    max-width: 320px;
}

.mc-filter-search-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-disabled);
    font-size: var(--text-md);
    pointer-events: none;
}

.mc-filter-search .mc-form-input {
    padding-left: var(--space-9);
    height: var(--space-9);
    font-size: var(--text-sm);
}

select.mc-select-inline,
.mc-card select.mc-select-inline {
    width: auto;
    height: var(--space-9);
    padding: 0 var(--space-8) 0 var(--space-3);
    font-size: var(--text-sm);
    min-width: 0;
    flex: 0 0 auto;
}

/* Sort direction toggle — icon text swapped via JS (arrow_downward / arrow_upward) */
.mc-sort-dir-btn .material-symbols-rounded { font-size: var(--text-md); }

.mc-filter-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* ==========================================================================
   Onboarding Checklist
   ========================================================================== */

.mc-onboarding {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    /* padding: var(--space-6); */
}

.mc-onboarding-progress {
    margin-bottom: var(--space-5);
}

.mc-onboarding-progress-text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.mc-onboarding-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-input);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.mc-onboarding-item:hover { background: var(--color-hover-bg); }
.mc-onboarding-item.active { background: var(--color-teal-light); }

.mc-onboarding-check {
    width: var(--space-5);
    height: var(--space-5);
    border-radius: var(--radius-full);
    border: var(--space-0-5) solid var(--color-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-white);
}

.mc-onboarding-check.done {
    background: var(--color-teal);
    border-color: var(--color-teal);
}

.mc-onboarding-check.done svg { display: block; }
.mc-onboarding-check svg { display: none; width: var(--space-3); height: var(--space-3); }

.mc-onboarding-label {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    flex: 1;
}

.mc-onboarding-time {
    font-size: var(--text-sm);
    color: var(--color-text-disabled);
}

/* Hidden utility */
/* ==========================================================================
   Mini stat (compact stat for table cells)
   ========================================================================== */

.mc-mini-stat { min-width: 80px; }
.mc-mini-stat-value { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); }
.mc-mini-stat .mc-progress { margin-top: var(--space-1); height: var(--space-1); }
.mc-mini-stat-label { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-0-5); }
.mc-text-muted { color: var(--color-text-disabled); }

/* List item name with icon (Mailchimp style) */
.mc-list-item-name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-medium);
    color: var(--color-teal);
    text-decoration: none;
}
.mc-list-item-name:hover { color: var(--color-teal-hover); text-decoration: underline; }
.mc-list-item-icon { color: var(--color-text-muted); flex-shrink: 0; }

/* Table meta text (dates, secondary info) */
.mc-table-meta { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }
.mc-table-num { font-size: var(--text-base); color: var(--color-text); white-space: nowrap; }

/* =========================================================================
   Cella di stato — lo stato di una riga e il momento in cui ci è arrivata.

   PERCHÉ NON UNA PASTIGLIA PIENA
   Una tabella di campagne è quasi tutta fatta di campagne già inviate: la
   pastiglia verde su «Inviata» si ripeteva su ogni riga e la colonna
   diventava una barra di colore che non distingueva niente da niente. Il
   verde pieno segnala un evento; «inviata» è lo stato di riposo di una
   campagna, non un evento.

   Qui il colore lo porta un pallino da sei pixel, e l'intensità cresce con
   l'urgenza — è questa la scala:
     · pallino colorato, etichetta neutra  → stati tranquilli (inviata, in
       coda, programmata, bozza): il colore classifica, non chiama.
     · pallino che pulsa                   → invio in corso, l'unica cosa che
       si muove davvero mentre la si guarda.
     · pallino E etichetta colorati        → errore o pausa: qui il colore
       deve chiamare, e chiama da solo perché è l'unico posto della colonna
       dove arriva fino al testo.
   ========================================================================= */
/* ----------------------------------------------------------------
   La cella «Stato» dell'elenco campagne: una pastiglia del kit e, sotto, la
   data.

   Qui c'era una scala a tre gradini fatta apposta — pallino colorato,
   etichetta in nero, e il colore che saliva all'etichetta solo per errore e
   pausa. Diceva bene la sua cosa, ma la diceva con un componente in piu':
   `.mc-badge` esiste, ha gli stessi toni, e vale la pena averne uno solo.
   Quello che resta e' l'impaginazione della cella, che il kit non ha: due
   righe, allineate a sinistra sullo stesso bordo.
   ---------------------------------------------------------------- */
.mc-status-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.mc-status-date {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    /* Cifre a larghezza fissa: incolonnate una sotto l'altra, le date
       ballavano di un paio di pixel per riga secondo quante «1» capitavano. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* List item subtitle (mail list name, subject preview under campaign name) */
.mc-list-item-sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-0-5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

/* Inline ring chart — thin CSS donut for rate % display
   Use --ring-pct (0-100) for fill, --ring-color for color override.
   Default: teal. Add .mc-ring-green/.mc-ring-orange/.mc-ring-red for palette. */
.mc-ring {
    width: var(--space-5);
    height: var(--space-5);
    border-radius: 50%;
    background: conic-gradient(var(--ring-color, var(--color-teal)) calc(var(--ring-pct) * 1%), var(--color-border) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mc-ring::after {
    content: '';
    width: var(--space-3-5);
    height: var(--space-3-5);
    border-radius: 50%;
    background: var(--color-card-bg);
}

/* Size variants */
.mc-ring-lg {
    width: var(--space-8);
    height: var(--space-8);
}

.mc-ring-lg::after {
    width: var(--space-6);
    height: var(--space-6);
}

/* Color palette — semantic colors by engagement level */
.mc-ring-green  { --ring-color: var(--color-success); }
.mc-ring-orange { --ring-color: var(--color-warning); }
.mc-ring-red    { --ring-color: var(--color-error); }
.mc-ring-blue   { --ring-color: var(--color-info); }

/* L124 — labeled ring variant: percent rendered inside the ring's center
   hole. The `::after` pseudo-element already paints the inner card-bg
   circle; we layer `.mc-ring__center-label` on top of it via z-index
   stacking. Card relies on `position:relative` on `.mc-ring` (already
   implied by the conic-gradient bg + flexbox center). */
.mc-ring--labeled { position: relative; }
.mc-ring__center-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    z-index: 1;
}
.mc-ring-xl .mc-ring__center-label { font-size: var(--text-md); }
.mc-ring-lg .mc-ring__center-label { font-size: var(--text-sm); }

/* XL size variant — for hero cards (e.g. mc-channel-status-card C1) */
.mc-ring-xl {
    width: 88px;
    height: 88px;
}
.mc-ring-xl::after {
    width: 70px;
    height: 70px;
}

/* Rate cell — ring chart + percentage side by side */
.mc-rate-cell {
    /* INLINE-flex, not flex.

       As a block it filled the cell and sat at its left edge, while the plain
       "0%" beside it — ordinary text — obeyed the column's `text-align:
       right`. So a column read as right-aligned until one row had a value,
       and that row alone jumped left by the width of its own cell. The single
       campaign with a real open rate was the one that looked broken.

       `inline-flex` makes the pair behave as text, so the COLUMN decides
       where it goes. `justify-content: flex-end` would have fixed this one
       table by hard-coding the answer into the component, and been wrong the
       first time somebody used it in a left-aligned column. */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    /* Baseline, so the ring lines up with the digits of the rows above rather
       than with the bottom of the cell box. */
    vertical-align: middle;
}

.mc-rate-value {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.mc-rate-muted {
    color: var(--color-text-disabled);
    font-weight: var(--weight-normal);
}

/* Stat cell — primary value + secondary sub-text */
.mc-stat-cell {
    white-space: nowrap;
}

.mc-stat-cell-value {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.mc-stat-cell-sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-left: var(--space-1);
}

/* Delivery mini bar (thin progress bar under delivered count) */
.mc-delivery-bar {
    width: var(--space-16);
    height: var(--space-0-5);
    background: var(--color-border);
    border-radius: var(--radius-full);
    margin-top: var(--space-1);
    overflow: hidden;
}

.mc-delivery-bar-fill {
    height: 100%;
    background: var(--color-teal);
    border-radius: var(--radius-full);
    transition: width var(--transition-fast);
}

/* =========================================================================
   Button group — l'azione principale della riga, più il menu delle altre.

   Un controllo solo diviso in due, non due bottoni accostati: è il motivo per
   cui bordo, raggio e stato di focus stanno sul CONTENITORE e le due metà
   dentro sono trasparenti. Disegnarli come due bottoni indipendenti (ognuno
   col suo bordo, ognuno col suo anello di focus) fa comparire una doppia riga
   di un pixel nel mezzo e due spigoli dove il raggio esterno taglia.
   ========================================================================= */
.mc-btn-group {
    display: inline-flex;
    align-items: stretch;
    /* Altezza fissa.

       La riga della tabella cresce con il numero di sotto-righe sotto il nome
       (lista, pastiglia A/B, avviso di cache mancante), e un bottone alto
       quanto il proprio contenuto seguiva quella crescita solo a metà: due
       righe vicine mostravano due bottoni della stessa altezza a quote
       diverse, e la colonna delle azioni smetteva di leggersi come colonna. */
    height: var(--space-8);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Il gruppo reagisce come una cosa sola: si passa sopra una delle due metà e
   si rinforza il bordo di TUTTO il controllo. È così che si vede che la
   freccia appartiene al bottone accanto e non è un secondo bottone. */
.mc-btn-group:hover { border-color: var(--color-border-strong); }

/* Il focus lo disegna il contenitore, mai la metà: un anello da 3px dentro un
   angolo da 6px esce dallo spigolo e si vede il taglio. */
.mc-btn-group:has(:focus-visible) {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.mc-btn-group .mc-btn-group-main,
.mc-btn-group .mc-btn-group-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    /* Secondario a riposo: in una tabella da venticinque righe questo bottone
       compare venticinque volte, e a piena intensità la colonna delle azioni
       pesa più dei nomi delle campagne — che sono la cosa che si legge. */
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.mc-btn-group .mc-btn-group-main:focus-visible,
.mc-btn-group .mc-btn-group-arrow:focus-visible { outline: none; }

.mc-btn-group .mc-btn-group-main {
    /* Mancava: icona e parola si toccavano, ed era la prima cosa che si
       notava del controllo. */
    gap: var(--space-1-5);
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    /* Meno un pixel: il raggio interno va misurato dal bordo del contenitore,
       non dal suo esterno, o lo sfondo dell'hover spunta oltre la curva. */
    border-radius: calc(var(--radius-input) - 1px) 0 0 calc(var(--radius-input) - 1px);
}

.mc-btn-group .mc-btn-group-main:hover,
.mc-btn-group .mc-btn-group-arrow:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}

.mc-btn-group .mc-btn-group-arrow {
    padding-inline: var(--space-1-5);
    border-left: var(--space-px) solid var(--color-border);
    border-radius: 0 calc(var(--radius-input) - 1px) calc(var(--radius-input) - 1px) 0;
}

/* Le icone sono glifi di un font, non SVG: la regola che stava qui prima
   dimensionava `svg` e non ha mai toccato niente, perché nel markup c'è uno
   `<span class="material-symbols-rounded">`. Da lì la freccia che seguiva la
   dimensione del testo del bottone invece della propria. */
.mc-btn-group .material-symbols-rounded {
    flex-shrink: 0;
    font-size: var(--text-md);
    line-height: 1;
}

.mc-btn-group .mc-btn-group-arrow .material-symbols-rounded {
    transition: transform var(--transition-fast);
}

/* Menu aperto.

   Il menu è `position: fixed` — esce dalla tabella per non farsi tagliare — e
   quindi galleggia sopra righe che non sono la sua. Tenere accesa la freccia
   di origine è l'unica cosa che dice da dove è uscito. */
.mc-dropdown:has(> .mc-dropdown-menu.active) .mc-btn-group { border-color: var(--color-border-strong); }
.mc-dropdown:has(> .mc-dropdown-menu.active) .mc-btn-group-arrow {
    background: var(--color-hover-bg);
    color: var(--color-text);
}
.mc-dropdown:has(> .mc-dropdown-menu.active) .mc-btn-group-arrow .material-symbols-rounded {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .mc-btn-group,
    .mc-btn-group .mc-btn-group-main,
    .mc-btn-group .mc-btn-group-arrow,
    .mc-btn-group .mc-btn-group-arrow .material-symbols-rounded { transition: none; }
}

/* =========================================================================
   mc-segmented — pill/segmented-control toggle (2-4 options, single-select)
   Works with data-mc-tabs (McTabs) — children use [data-tab] + .active.
   Example:
     <div class="mc-segmented" data-mc-tabs id="scope">
         <button class="mc-segmented-item active" data-tab="">System</button>
         <button class="mc-segmented-item" data-tab="mine">Mine</button>
     </div>
   ========================================================================= */
.mc-segmented {
    display: inline-flex;
    align-items: stretch;
    padding: var(--space-0-5);
    background: var(--color-hover-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-full);
    gap: var(--space-0-5);
}

.mc-segmented-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-4);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration: none;
}

.mc-segmented-item:hover {
    color: var(--color-text);
}

.mc-segmented-item.active {
    background: var(--color-card-bg);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--color-border);
    cursor: default;
}

.mc-segmented-item .material-symbols-rounded {
    font-size: 16px;
    font-variation-settings: 'wght' 400, 'FILL' 0;
}

.mc-segmented-item.active .material-symbols-rounded {
    color: var(--color-teal);
}

/* Row actions always visible */
.mc-row-actions-visible {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: flex-end;
}

/* Checkboxes for lists */
/* ----------------------------------------------------------------
   mc-checkbox — Custom styled checkbox (teal, rounded, consistent)
   Usage: <input type="checkbox" class="mc-checkbox">
   Also applied to: .mc-check-all, .mc-row-check (backward compat)
   ---------------------------------------------------------------- */
.mc-checkbox,
.mc-check-all,
.mc-row-check {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid var(--color-text-disabled);
    border-radius: 4px;
    background: var(--color-card-bg);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s ease;
    vertical-align: middle;
}

.mc-checkbox:hover,
.mc-check-all:hover,
.mc-row-check:hover {
    border-color: var(--color-teal);
}

.mc-checkbox:checked,
.mc-check-all:checked,
.mc-row-check:checked {
    background: var(--color-teal);
    border-color: var(--color-teal);
}

.mc-checkbox:checked::after,
.mc-check-all:checked::after,
.mc-row-check:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.mc-checkbox:focus-visible,
.mc-check-all:focus-visible,
.mc-row-check:focus-visible {
    outline: 2px solid var(--color-teal-ring);
    outline-offset: 1px;
}

.mc-col-check { width: var(--space-10); }

/* ----------------------------------------------------------------
   mc-multiselect — Styled multi-select dropdown
   ---------------------------------------------------------------- */
.mc-multiselect {
    position: relative;
    display: inline-block;
    min-width: 160px;
}

.mc-multiselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-input);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text);
    min-height: var(--space-9);
    transition: border-color 0.15s;
}

.mc-multiselect-trigger:hover {
    border-color: var(--color-teal);
}

.mc-multiselect.open .mc-multiselect-trigger {
    border-color: var(--color-teal);
}

.mc-multiselect-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-multiselect-arrow {
    font-size: 18px !important;
    color: var(--color-text-muted);
    transition: transform 0.2s;
}

.mc-multiselect.open .mc-multiselect-arrow {
    transform: rotate(180deg);
}

.mc-multiselect-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    min-width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(0,0,0,0.12));
    padding: var(--space-1) 0;
    z-index: 200;
}

.mc-multiselect.open .mc-multiselect-dropdown {
    display: block;
}

.mc-multiselect-empty {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

/* ----------------------------------------------------------------
   mc-checkbox-label — Checkbox + text inline (for dropdowns/forms)
   Usage: <label class="mc-checkbox-label"><input type="checkbox" class="mc-checkbox"> Text</label>
   ---------------------------------------------------------------- */
.mc-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text);
    transition: background 0.1s;
}

.mc-checkbox-label:hover {
    background: var(--color-hover-bg);
}

/* ----------------------------------------------------------------
   mc-column-picker — Dropdown for toggling table columns
   SEPARATE from cr-nav-dropdown. Stays open while selecting.
   Usage:
     <div class="mc-column-picker">
       <button class="mc-column-picker-trigger mc-btn mc-btn-secondary mc-btn-sm">Columns</button>
       <div class="mc-column-picker-menu">
         <label class="mc-checkbox-label"><input type="checkbox" class="mc-checkbox"> Field</label>
         <div class="mc-column-picker-footer"><button class="mc-btn mc-btn-primary mc-btn-sm">Apply</button></div>
       </div>
     </div>
   ---------------------------------------------------------------- */
.mc-column-picker {
    position: relative;
    display: inline-block;
}

.mc-column-picker-menu {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    min-width: 220px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(0,0,0,0.12));
    padding: var(--space-2) 0;
    z-index: 200;
}

.mc-column-picker.open .mc-column-picker-menu {
    display: block;
}

.mc-column-picker-footer {
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}

/* ----------------------------------------------------------------
   mc-template-card — Template thumbnail card for galleries
   ---------------------------------------------------------------- */
.mc-template-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

@media (max-width: 1100px) { .mc-template-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .mc-template-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mc-template-grid { grid-template-columns: 1fr; } }

/* Modifier — denser plugin grid (5 cols default → cards ~80% of the base
 * mc-template-grid's 4-col cards). Keep square aspect via the inline style on
 * .mc-template-thumb in resources/views/refactor/pages/admin/plugins/_grid.blade.php */
.rui-plugin-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1400px) { .rui-plugin-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .rui-plugin-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .rui-plugin-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .rui-plugin-grid { grid-template-columns: 1fr; } }

.mc-template-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--color-card-bg);
}

.mc-template-card:hover {
    border-color: var(--color-teal);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.mc-template-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 10;
    background: var(--color-hover-bg);
    overflow: hidden;
}

.mc-template-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Il documento disegnato al posto della miniatura, per i modelli che una
   miniatura non ce l'hanno (l'HTML scritto a mano non passa da chi le genera).

   Disegnato a larghezza piena e poi RIMPICCIOLITO, non schiacciato: una email
   è costruita per 600px, e stringere la cornice a 250 la manda in versione
   mobile — si vedrebbe un'anteprima di una cosa diversa da quella che si apre
   cliccando. Così invece la cornice resta larga e la si guarda da lontano.

   `pointer-events: none` perché è un'immagine: senza, il documento dentro si
   prenderebbe i clic destinati alla scheda, e i pulsanti «Anteprima» e
   «Modifica» che le passano sopra smetterebbero di rispondere. */
.mc-template-thumb-frame {
    width: 700px;
    height: 900px;
    border: 0;
    transform: scale(0.36);
    transform-origin: top left;
    pointer-events: none;
    background: var(--color-card-bg);
}

.mc-template-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-text-disabled);
}

.mc-template-thumb-placeholder .material-symbols-rounded { font-size: 48px; }

.mc-template-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    opacity: 0;
    transition: opacity 0.2s;
}

.mc-template-card:hover .mc-template-overlay { opacity: 1; }

.mc-template-info {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mc-template-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-template-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-template-actions {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
}

/* Position info as relative for actions absolute */
.mc-template-info { position: relative; }

/* mc-btn-white — White button for use on dark overlays */
.mc-btn-white {
    background: #fff;
    color: var(--color-text-dark, #1a1a2e);
    border: 1px solid rgba(255,255,255,0.3);
    font-weight: var(--weight-medium);
}
.mc-btn-white:hover {
    background: #f0f0f0;
    color: var(--color-text-dark, #1a1a2e);
}
[data-theme="dark"] .mc-btn-white {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
}
[data-theme="dark"] .mc-btn-white:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* ----------------------------------------------------------------
   Picker variant — used in template gallery selection (admin
   email-templates / form-templates create flows). Provides
   visual selected-state with check badge in top-right corner.
   ---------------------------------------------------------------- */
.mc-template-card--picker {
    cursor: pointer;
    position: relative;
    user-select: none;
}
.mc-template-card--picker:focus {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
}
.mc-template-card--picker.is-selected {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-ring, rgba(0, 175, 169, 0.18)),
                0 4px 12px rgba(0, 0, 0, 0.08);
}
.mc-template-card-check {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-teal);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.mc-template-card--picker.is-selected .mc-template-card-check {
    opacity: 1;
    transform: scale(1);
}

/* Container for the gallery fetch target — fills card-flush body */
.mc-gallery-container {
    min-height: 320px;
}

/* Form template variant — landscape thumbnails (5:3) instead of email portrait (9:10).
   Form templates are popup banners that look better wide. Matches customer form picker
   aspect ratio (resources/views/refactor/pages/forms/create.blade.php). */
.mc-template-card--form .mc-template-thumb {
    aspect-ratio: 5 / 3;
}

/* Creative touch — hover info popover for picker cards.
   Floats above the card on hover with full name, category badges,
   and a preview link. Lets admin verify their pick without leaving page. */
.mc-template-hover-info {
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(100% + var(--space-2));
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border-strong);
    border-radius: var(--radius-card);
    padding: var(--space-3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s linear 0.18s;
    pointer-events: none;
    z-index: 10;
}
.mc-template-hover-info::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 24px;
    width: 12px;
    height: 12px;
    background: var(--color-card-bg);
    border-right: var(--space-px) solid var(--color-border-strong);
    border-bottom: var(--space-px) solid var(--color-border-strong);
    transform: translateY(-6px) rotate(45deg);
}
.mc-template-card--picker:hover .mc-template-hover-info,
.mc-template-card--picker:focus-visible .mc-template-hover-info {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0s;
    transition-delay: 0.25s, 0.25s, 0s;
}
.mc-template-hover-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
    word-wrap: break-word;
}
.mc-template-hover-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}
.mc-template-hover-preview {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-teal);
    background: var(--color-teal-light, rgba(0, 175, 169, 0.08));
    border-radius: var(--radius-input);
    text-decoration: none;
    transition: background 0.15s;
}
.mc-template-hover-preview:hover {
    background: var(--color-teal-ring, rgba(0, 175, 169, 0.18));
    color: var(--color-teal);
    text-decoration: none;
}

/* ── mc-thumb-preview ───────────────────────────────────────────────
   Generic wrapper that turns any thumbnail into a clickable preview
   surface with a hover overlay (eye icon + optional label). Drop it
   around any existing .mc-*-thumb class without restructuring CSS.
   Works on squared + rounded thumbs; overlay inherits parent radius.
   Usage:
     <a class="mc-thumb-preview" data-preview="/url" data-preview-title="…">
         <img src="thumb.jpg" alt="">
         <span class="mc-thumb-preview-overlay">
             <span class="mc-thumb-preview-icon">…eye svg…</span>
             <span class="mc-thumb-preview-label">Preview</span>
         </span>
     </a>
   ──────────────────────────────────────────────────────────────────── */
.mc-thumb-preview {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    cursor: pointer;
    isolation: isolate;
}
.mc-thumb-preview > img,
.mc-thumb-preview > svg,
.mc-thumb-preview > picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
}
.mc-thumb-preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.12), rgba(17, 24, 39, 0.55));
    opacity: 0;
    transition: opacity 220ms cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
    z-index: 1;
}
.mc-thumb-preview:hover > img,
.mc-thumb-preview:focus-visible > img { transform: scale(1.04); }
.mc-thumb-preview:hover .mc-thumb-preview-overlay,
.mc-thumb-preview:focus-visible .mc-thumb-preview-overlay { opacity: 1; }
.mc-thumb-preview-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.96);
    color: var(--color-text);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transform: scale(0.9);
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
}
.mc-thumb-preview:hover .mc-thumb-preview-icon,
.mc-thumb-preview:focus-visible .mc-thumb-preview-icon { transform: scale(1); }
.mc-thumb-preview-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transform: translateY(4px);
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
}
.mc-thumb-preview:hover .mc-thumb-preview-label,
.mc-thumb-preview:focus-visible .mc-thumb-preview-label { transform: translateY(0); }
.mc-thumb-preview:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
}

/* Card hover lift + glow */
.mc-template-card--picker:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px var(--color-teal);
}
.mc-template-card--picker.is-selected:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10),
                0 0 0 3px var(--color-teal-ring, rgba(0, 175, 169, 0.18)),
                0 0 0 1px var(--color-teal);
}

/* ----------------------------------------------------------------
   mc-template-list — Enhanced list view for admin template management
   Taller thumbs, more info columns, visible action buttons
   ---------------------------------------------------------------- */
.mc-template-list-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    transition: background 0.12s;
}
.mc-template-list-row:last-child { border-bottom: none; }
.mc-template-list-row:hover { background: var(--color-hover-bg); }

.mc-template-list-thumb {
    width: 80px;
    aspect-ratio: 9 / 10;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
    background: var(--color-hover-bg);
    flex-shrink: 0;
}
.mc-template-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
/* Il documento disegnato dentro gli 80px della riga. Stesso principio della
   griglia: larghezza piena e poi rimpicciolito, perché una email costruita per
   600px dentro una cornice da 80 andrebbe in versione mobile — l'anteprima
   mostrerebbe una cosa diversa da quella che si apre. */
.mc-template-list-thumb-frame {
    width: 700px;
    height: 780px;
    border: 0;
    transform: scale(0.114);
    transform-origin: top left;
    pointer-events: none;
    background: var(--color-card-bg);
}

.mc-template-list-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-disabled);
}

.mc-template-list-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.mc-template-list-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-template-list-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-template-list-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mc-template-list-meta-item .material-symbols-rounded,
.mc-template-list-meta-item svg { font-size: 14px; width: 14px; height: 14px; }

.mc-template-list-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* Visible quick-action icon buttons */
.mc-template-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
}
.mc-template-action-btn:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}
.mc-template-action-btn .material-symbols-rounded,
.mc-template-action-btn svg { font-size: 18px; width: 18px; height: 18px; }

/* Divider between quick actions and dropdown */
.mc-template-action-divider {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 var(--space-1);
}

/* ----------------------------------------------------------------
   mc-view-toggle — Grid / List view switcher
   ---------------------------------------------------------------- */
.mc-view-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.mc-view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background 0.12s, color 0.12s;
}
.mc-view-toggle-btn:not(:last-child) {
    border-right: 1px solid var(--color-border);
}
.mc-view-toggle-btn:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}
.mc-view-toggle-btn.is-active {
    background: var(--color-teal-subtle, rgba(0,128,128,0.08));
    color: var(--color-teal);
}
.mc-view-toggle-btn svg { width: 16px; height: 16px; }

/* ==========================================================================
   File Input (simple form) — mc-file-input
   Styled drop-zone replacement for native <input type="file"> in regular forms.
   Usage: <label class="mc-file-input"><input type="file" ...><span class="mc-file-input-content">...</span></label>
   ========================================================================== */

.mc-file-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-6);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    text-align: center;
}
.mc-file-input:hover,
.mc-file-input.is-dragover {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
}
.mc-file-input input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.mc-file-input-icon {
    font-size: 32px;
    color: var(--color-text-disabled);
    transition: color var(--transition-fast);
}
.mc-file-input:hover .mc-file-input-icon,
.mc-file-input.is-dragover .mc-file-input-icon {
    color: var(--color-teal);
}
.mc-file-input-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    margin: 0;
}
.mc-file-input-title .mc-file-input-browse {
    color: var(--color-teal);
    text-decoration: underline;
    cursor: pointer;
}
.mc-file-input-hint {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
    margin: 0;
}
.mc-file-input-selected {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-hover-bg);
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
    color: var(--color-text);
    margin-top: var(--space-2);
    width: 100%;
    max-width: 320px;
}
.mc-file-input-selected .material-symbols-rounded { font-size: 18px; color: var(--color-teal); flex-shrink: 0; }
.mc-file-input-selected-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mc-file-input-selected-size { font-size: var(--text-xs); color: var(--color-text-muted); flex-shrink: 0; }
.mc-file-input.has-file .mc-file-input-selected { display: flex; }

/* ==========================================================================
   File Upload — mc-file-upload
   Drop zone + file list with thumbnails, progress, remove.
   Usage: <div class="mc-file-upload" data-upload-url="..." data-remove-url="...">
   ========================================================================== */

.mc-file-upload {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* --- Drop zone --- */
.mc-file-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-6) var(--space-4);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    text-align: center;
}
.mc-file-upload-zone:hover,
.mc-file-upload-zone--dragover {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
}
.mc-file-upload-zone-icon {
    font-size: 32px;
    color: var(--color-text-disabled);
    transition: color var(--transition-fast);
}
.mc-file-upload-zone:hover .mc-file-upload-zone-icon,
.mc-file-upload-zone--dragover .mc-file-upload-zone-icon {
    color: var(--color-teal);
}
.mc-file-upload-zone-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    margin: 0;
}
.mc-file-upload-zone-hint {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
    margin: 0;
}

/* --- File list --- */
.mc-file-upload-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-file-upload-list:empty { display: none; }

/* --- File item --- */
.mc-file-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-3);
    background: var(--color-subtle-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    position: relative;
    overflow: hidden;
    transition: opacity 0.2s, border-color var(--transition-fast);
}
.mc-file-item:hover { border-color: var(--color-border-strong); }
.mc-file-item--removing { opacity: 0.5; pointer-events: none; }
.mc-file-item--error { border-color: var(--color-error); background: var(--color-error-bg, #fef2f2); }

/* --- Thumbnail / icon --- */
.mc-file-item-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mc-file-item-thumb .material-symbols-rounded { font-size: 22px; }

/* Type-based coloring (pastel) */
.mc-file-item-thumb--image   { background: var(--chart-2-bg); color: var(--chart-2); }
.mc-file-item-thumb--video   { background: var(--chart-5-bg); color: var(--chart-5); }
.mc-file-item-thumb--audio   { background: var(--chart-6-bg); color: var(--chart-6); }
.mc-file-item-thumb--pdf     { background: var(--chart-1-bg); color: var(--chart-1); }
.mc-file-item-thumb--doc     { background: var(--chart-3-bg); color: var(--chart-3); }
.mc-file-item-thumb--sheet   { background: var(--chart-4-bg); color: var(--chart-4); }
.mc-file-item-thumb--slide   { background: var(--chart-7-bg); color: var(--chart-7); }
.mc-file-item-thumb--archive { background: var(--chart-8-bg); color: var(--chart-8); }
.mc-file-item-thumb--file    { background: var(--color-hover-bg); color: var(--color-text-muted); }

/* Image thumbnail shows actual preview */
.mc-file-item-thumb--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Info --- */
.mc-file-item-info {
    flex: 1;
    min-width: 0;
}
.mc-file-item-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-file-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 2px;
}
.mc-file-item-size {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
}
.mc-file-item-ext {
    font-size: 10px;
    padding: 1px 6px;
    line-height: 1.4;
}
.mc-file-item-error-msg {
    font-size: var(--text-xs);
    color: var(--color-error);
}

/* --- Progress bar --- */
.mc-file-item-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-border);
}
.mc-file-item-progress-bar {
    height: 100%;
    width: 0;
    background: var(--color-teal);
    transition: width 0.15s ease;
    border-radius: 0 2px 2px 0;
}

/* --- Actions group --- */
.mc-file-item-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* --- Download button --- */
.mc-file-item-download {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-text-disabled);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
    text-decoration: none;
}
.mc-file-item-download .material-symbols-rounded { font-size: 16px; }
.mc-file-item-download:hover {
    background: var(--color-teal-light);
    color: var(--color-teal);
}

/* --- Remove button --- */
.mc-file-item-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-text-disabled);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}
.mc-file-item-remove .material-symbols-rounded { font-size: 16px; }
.mc-file-item-remove:hover {
    background: var(--color-error-bg, #fef2f2);
    color: var(--color-error);
}

/* ==========================================================================
   Tabs — mc-tabs
   Clean underline-style tabs for content switching.
   Usage: <div class="mc-tabs" data-mc-tabs>
            <button class="mc-tab active" data-tab="foo">Foo</button>
          </div>
   ========================================================================== */

.mc-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    border-bottom: var(--space-px) solid var(--color-border);
    padding: 0;
}

.mc-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
    line-height: 1;
    outline: none; /* suppress browser default focus rectangle — tab "active" state is the underline */
    text-decoration: none; /* needed when .mc-tab is applied to <a> */
}
.mc-tab[disabled] { cursor: default; }
.mc-tab:focus { outline: none; }
.mc-tab:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-teal-ring, rgba(0, 175, 169, 0.2));
    border-radius: var(--radius-input);
}
.mc-tab:hover {
    color: var(--color-text-primary);
}
.mc-tab.active {
    color: var(--color-teal);
    font-weight: var(--weight-medium);
    border-bottom-color: var(--color-teal);
}
.mc-tab .material-symbols-rounded {
    font-size: 16px;
}

/* Count badge inside tab */
.mc-tab .mc-tab-count {
    font-size: 11px;
    font-weight: var(--weight-medium);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    line-height: 1.4;
}
.mc-tab.active .mc-tab-count {
    background: var(--color-teal-light);
    color: var(--color-teal);
}

/* ==========================================================================
   Rich Tabs — mc-rich-tabs
   --------------------------------------------------------------------------
   Compact pill-card tabs: icon on the left, 2-line label + description on
   the right. A richer cousin of mc-segmented — same single-pick semantics,
   but each segment carries a short helper line so users can choose with
   context, not just a label.

   Use when the choice is meaningful but you don't want a full hero-style
   card grid. For dense filtering use mc-tabs; for plain pills use
   mc-segmented; for huge stakes-driving cards use a tile picker.

   Built on top of data-mc-tabs so it dispatches the same `tab:change`
   event — drop-in compatible with the panel-toggle pattern.

   Usage:
     <div class="mc-rich-tabs" data-mc-tabs>
         <button class="mc-rich-tab active" data-tab="base">
             <span class="mc-rich-tab-icon material-symbols-rounded">backup_table</span>
             <span class="mc-rich-tab-body">
                 <span class="mc-rich-tab-title">Base
                     <span class="mc-rich-tab-count">15</span>
                 </span>
                 <span class="mc-rich-tab-desc">Clean, single-column layouts…</span>
             </span>
         </button>
     </div>
   ========================================================================== */

.mc-rich-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-2-5);
    margin: 0 auto var(--space-5);
    /* Capped + auto-centered so the pills sit neatly in the middle of
       the parent container instead of stretching across the full width.
       Sized to fit comfortably for 2 segments (~520px) and 3 segments
       (~760px). Override with a wrapper or modifier if you need wider. */
    max-width: 760px;
}

.mc-rich-tab {
    display: flex;
    align-items: center;
    text-align: left;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-pill, 999px);
    border: 1.5px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    cursor: pointer;
    font-family: inherit;
    transition: border-color var(--transition-fast),
                background var(--transition-fast),
                box-shadow var(--transition-fast);
    position: relative;
    min-height: 64px;
}

.mc-rich-tab:hover {
    border-color: var(--color-teal);
}

.mc-rich-tab.active {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
    box-shadow: 0 1px 4px var(--color-teal-ring);
    cursor: default;
}

.mc-rich-tab-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    font-size: 22px;
    font-variation-settings: 'wght' 400, 'FILL' 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mc-rich-tab.active .mc-rich-tab-icon {
    background: var(--color-teal);
    color: var(--color-white);
    font-variation-settings: 'wght' 500, 'FILL' 1;
}

.mc-rich-tab-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.mc-rich-tab-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.2;
}

.mc-rich-tab-count {
    font-size: 11px;
    font-weight: var(--weight-medium);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    line-height: 1.4;
}
.mc-rich-tab.active .mc-rich-tab-count {
    background: var(--color-teal);
    color: var(--color-white);
}

.mc-rich-tab-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mc-rich-tab[disabled],
.mc-rich-tab.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 600px) {
    .mc-rich-tabs { grid-template-columns: 1fr; gap: var(--space-2); }
    .mc-rich-tab { padding: var(--space-2-5) var(--space-3); }
}

/* Dark mode tweak — softer active tint. */
[data-theme="dark"] .mc-rich-tab.active {
    background: rgba(52, 211, 153, 0.12);
}

/* Hidden utility */
.mc-hidden { display: none !important; }

/* ================================================================
   Toggle row — settings toggle with label + description
   ================================================================ */
.mc-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    cursor: pointer;
    user-select: none;
}
.mc-toggle-row:hover {
    background: var(--color-bg-hover);
}
/* Le visuali dell'interruttore stanno nel componente unico, in fondo al foglio. */
.mc-toggle-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
}
.mc-toggle-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}
.mc-toggle-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* --- label.mc-toggle wrapper pattern (label > checkbox + slider + label-text) --- */
label.mc-toggle {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2-5);
    cursor: pointer;
    user-select: none;
}
label.mc-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
label.mc-toggle .mc-toggle-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

/* cr-nav count badge */
.cr-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 var(--space-1);
    font-size: 11px;
    font-weight: var(--weight-medium);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    margin-left: var(--space-1);
}
.cr-nav-item.active .cr-nav-count {
    background: var(--color-teal-light);
    border-color: var(--color-teal);
    color: var(--color-teal-dark);
}

/* ==========================================================================
   Setup Checklist (onboarding progress card)
   ========================================================================== */

.mc-setup-checklist {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.mc-setup-checklist-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: var(--space-px) solid var(--color-border);
}

.mc-setup-checklist-headline {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.mc-setup-checklist-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.mc-setup-checklist-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.mc-setup-progress {
    flex: 1;
    height: 6px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.mc-setup-progress-bar {
    height: 100%;
    background: var(--color-teal);
    border-radius: var(--radius-full);
    transition: width .5s ease;
}

.mc-setup-checklist-body {
    display: grid;
    grid-template-columns: 260px 1fr;
}

@media (max-width: 768px) {
    .mc-setup-checklist-body { grid-template-columns: 1fr; }
}

.mc-setup-nav {
    border-right: var(--space-px) solid var(--color-border);
    padding: var(--space-3) 0;
}

.mc-setup-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-radius: 0;
    user-select: none;
}

.mc-setup-nav-item:hover { background: var(--color-hover-bg); }

.mc-setup-nav-item.active {
    background: var(--color-teal-light);
}

.mc-setup-nav-item-check {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
    font-size: 13px;
    color: transparent;
}

.mc-setup-nav-item.done .mc-setup-nav-item-check {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-white);
}

.mc-setup-nav-item.active .mc-setup-nav-item-check {
    border-color: var(--color-teal);
}

.mc-setup-nav-item-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    flex: 1;
}

.mc-setup-nav-item-time {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-hover-bg);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.mc-setup-panel {
    padding: var(--space-8);
    display: none;
}

.mc-setup-panel.active {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    align-items: center;
}

@media (max-width: 640px) {
    .mc-setup-panel.active { grid-template-columns: 1fr; }
    .mc-setup-panel-visual { display: none; }
}

.mc-setup-panel-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.mc-setup-panel-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
    line-height: 1.6;
}

.mc-setup-panel-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.mc-setup-panel-skip {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color var(--transition-fast);
}

.mc-setup-panel-skip:hover { color: var(--color-text); }

.mc-setup-panel-visual {
    width: 180px;
    height: 140px;
    background: var(--color-hover-bg);
    border-radius: var(--radius-card);
    overflow: hidden;
    flex-shrink: 0;
}

.mc-setup-panel-visual svg { width: 100%; height: 100%; }

/* ==========================================================================
   Card Preview — header + flush table inside card.
   Table goes edge-to-edge (no side/bottom border), header matches action-rows style.
   Use for preview/summary tables like "Recent subscribers".
   ========================================================================== */

.mc-card-preview {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.mc-card-preview-header {
    padding: var(--space-4) var(--space-6) var(--space-3);
    border-bottom: var(--space-px) solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mc-card-preview-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.mc-card-preview-action {
    font-size: var(--text-sm);
    color: var(--color-teal);
    text-decoration: none;
}

.mc-card-preview-action:hover {
    color: var(--color-teal-hover);
}

.mc-card-preview .mc-table {
    border: none;
    border-radius: 0;
}

.mc-card-preview .mc-empty-state {
    padding: var(--space-8) var(--space-6);
    text-align: center;
}

/* ==========================================================================
   Action Row (horizontal list of quick actions with thumbnail + CTA)
   ========================================================================== */

.mc-action-rows {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.mc-action-rows-header {
    padding: var(--space-4) var(--space-6) var(--space-3);
    border-bottom: var(--space-px) solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mc-action-rows-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.mc-action-row {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border-bottom: var(--space-px) solid var(--color-border);
}

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

.mc-action-row-thumb {
    width: 64px;
    height: 52px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-action-row-content { flex: 1; min-width: 0; }

.mc-action-row-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.mc-action-row-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

@media (max-width: 600px) {
    .mc-action-row { flex-wrap: wrap; }
    .mc-action-row-thumb { width: 48px; height: 40px; }
}

/* ==========================================================================
   Promo Split (full-width white section: big text left + visual right)
   ========================================================================== */

.mc-promo-split {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: 1fr 420px;
    overflow: hidden;
}

@media (max-width: 900px) {
    .mc-promo-split { grid-template-columns: 1fr; }
    .mc-promo-split-visual { display: none; }
}

.mc-promo-split-text {
    padding: var(--space-12) var(--space-10);
}

.mc-promo-split-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-teal);
    margin-bottom: var(--space-4);
}

.mc-promo-split-title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.2;
    margin-bottom: var(--space-4);
}

.mc-promo-split-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-6);
    max-width: 460px;
}

.mc-promo-split-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mc-promo-split-bullets li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.mc-promo-split-bullets li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-teal);
    border-radius: var(--radius-full);
    margin-top: 6px;
    flex-shrink: 0;
}

.mc-promo-split-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.mc-promo-split-visual {
    background: var(--color-hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    position: relative;
    overflow: hidden;
}

.mc-promo-split-visual-card {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    padding: var(--space-5);
    width: 100%;
    max-width: 320px;
    position: relative;
    z-index: 1;
}

.mc-promo-split-visual-card-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

/* ==========================================================================
   Grow Cards — Mailchimp-style action picker (4-column selectable cards)
   Like "Let's grow your contacts list" with icon + title + desc per option
   ========================================================================== */

.mc-grow-section {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-8) var(--space-8) var(--space-6);
    margin-bottom: var(--space-6);
}

.mc-grow-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.mc-grow-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.mc-grow-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    max-width: 560px;
}

.mc-grow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

@media (max-width: 1199px) { .mc-grow-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .mc-grow-grid { grid-template-columns: 1fr; } }

.mc-grow-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base);
    background: var(--color-card-bg);
    text-decoration: none;
    color: inherit;
}

.mc-grow-card:hover {
    border-color: var(--color-teal);
    box-shadow: 0 2px 10px rgba(0, 124, 137, 0.10);
    text-decoration: none;
}

.mc-grow-card.active,
.mc-grow-card:focus-visible {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 1px var(--color-teal);
    background: var(--color-teal-light);
    outline: none;
}

.mc-grow-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

.mc-grow-card-icon .material-symbols-rounded {
    font-size: 32px;
}

.mc-grow-card-icon svg {
    width: 32px;
    height: 32px;
}

.mc-grow-card-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1-5);
}

.mc-grow-card-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

.mc-grow-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ==========================================================================
   Email Performance Card (inline stat row with period selector)
   Like Mailchimp's "Email performance · Bot filtering on"
   ========================================================================== */

.mc-perf-card {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-6) var(--space-8);
    margin-bottom: var(--space-6);
}

.mc-perf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
    flex-wrap: wrap;
    gap: var(--space-3);
}

.mc-perf-title {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-perf-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
}

.mc-perf-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-info);
    border-radius: var(--radius-full);
}

.mc-perf-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-perf-period-btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    background: none;
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    cursor: pointer;
    transition: all .15s;
}

.mc-perf-period-btn:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}

.mc-perf-period-btn.active {
    background: var(--color-card-bg);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    border-color: var(--color-border-strong);
}

.mc-perf-subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
    margin-bottom: var(--space-5);
}

.mc-perf-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-6);
}

@media (max-width: 767px) { .mc-perf-stats { grid-template-columns: repeat(2, 1fr); } }

.mc-perf-stat-label {
    font-size: var(--text-xs);
    color: var(--color-teal);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-1);
}

.mc-perf-stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
    margin-bottom: var(--space-0-5);
}

.mc-perf-stat-change {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
}

/* ==========================================================================
   Integration List — vertical list of integrations/apps with logo + description + CTA.
   Mailchimp "Recommended integrations" pattern.
   ========================================================================== */

.mc-integration-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mc-integration-item {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border-bottom: var(--space-px) solid var(--color-border);
}

.mc-integration-item:last-child {
    border-bottom: none;
}

.mc-integration-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-input);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-integration-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mc-integration-logo-text {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
}

.mc-integration-content {
    flex: 1;
    min-width: 0;
}

.mc-integration-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-0-5);
}

.mc-integration-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.mc-integration-item .mc-btn {
    flex-shrink: 0;
}

/* Utility classes for common table cell patterns */
.mc-cell-secondary {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Extra small badge (inline with text) */
.mc-badge-xs {
    font-size: var(--text-xs);
    padding: 1px var(--space-1-5);
    vertical-align: middle;
    margin-left: var(--space-1);
}

/* Modal footer (popup form actions) */
.mc-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-5);
    margin-top: var(--space-5);
    border-top: var(--space-px) solid var(--color-border);
}

/* Form hint text */
.mc-form-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* Filter bar label */
.mc-filter-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Breadcrumb helpers */
.mc-breadcrumb-link {
    color: var(--color-text-muted);
    text-decoration: none;
}

.mc-breadcrumb-link:hover {
    color: var(--color-teal);
}

.mc-breadcrumb-sep {
    margin: 0 var(--space-1);
    color: var(--color-text-muted);
}

/* Column picker divider */
.mc-column-picker-divider {
    border-top: var(--space-px) solid var(--color-border);
    margin: var(--space-1) 0;
}

/* Loading placeholder */
.mc-loading-placeholder {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
}

/* Bulk action badge count */
.mc-btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-teal);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    margin-left: var(--space-1);
}

.mc-btn-badge:empty {
    display: none;
}

/* ==========================================================================
   Radio Card — rich option cards with title + description.
   Use instead of <select> when 2-4 options each need informative descriptions.
   Like subscription settings toggle rows, but for single-choice selection.
   ========================================================================== */

.mc-radio-cards {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-input);
    overflow: hidden;
}

.mc-radio-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    user-select: none;
    border-bottom: var(--space-px) solid var(--color-border);
    transition: background .15s;
    margin: 0;
}

.mc-radio-card:last-child {
    border-bottom: none;
}

.mc-radio-card:hover {
    background: var(--color-hover-bg);
}

.mc-radio-card.active {
    background: var(--color-hover-bg);
}

.mc-radio-card-input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    min-width: 18px;
    height: 18px;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    margin: 0;
    margin-top: 1px;
    cursor: pointer;
    position: relative;
    transition: border-color .15s;
}

.mc-radio-card-input:checked {
    border-color: var(--color-text);
}

.mc-radio-card-input:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background: var(--color-text);
    border-radius: 50%;
}

.mc-radio-card-content {
    flex: 1;
    min-width: 0;
}

/* `display: block` non e' pleonastico: il titolo e la descrizione finiscono
   spesso dentro uno <span>, e da inline si mettono sulla stessa riga —
   «Doppio opt-in Chi si iscrive conferma…» tutto di seguito. Dichiararlo qui
   rende il componente indipendente dall'elemento che gli si passa. */
.mc-radio-card-title {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.35;
}

.mc-radio-card-desc {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: var(--space-0-5);
}

/* ==========================================================================
   Rich Select — custom dropdown with label + description + optional icon
   per option. Replaces native <select> when options need more context.
   Requires RichSelect.js for interactivity.
   ========================================================================== */

.mc-rich-select {
    position: relative;
    width: 100%;
}

.mc-rich-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* `--input-height` e non `--space-10`.
     *
     * Un menu e un campo di testo affiancati sono la stessa cosa per chi
     * guarda: due caselle da riempire. Con 40px contro 44px la riga sembra
     * fatta di pezzi di due moduli diversi — e la differenza non si nota
     * guardando il menu da solo, solo accanto a un campo. Si vedeva nella
     * finestra «Crea modulo», dove «Nome modulo» e «Collega a lista» stanno
     * uno di fianco all'altro.
     *
     * La variante compatta `.mc-rich-select-inline` resta a 36px: viene dopo
     * ed e' piu' specifica. */
    height: var(--input-height);
    padding: 0 var(--space-3);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border-strong);
    border-radius: var(--radius-input);
    cursor: pointer;
    font-size: var(--text-base);
    color: var(--color-text);
    text-align: left;
    transition: border-color .15s;
}

.mc-rich-select-trigger:hover {
    border-color: var(--color-teal);
}

.mc-rich-select-trigger:focus {
    outline: none;
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-ring);
}

.mc-rich-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-rich-select-placeholder {
    color: var(--color-text-disabled);
}

.mc-rich-select-arrow {
    font-size: 20px;
    color: var(--color-text-muted);
    margin-left: var(--space-2);
    transition: transform .2s;
}

.mc-rich-select.open .mc-rich-select-arrow {
    transform: rotate(180deg);
}

.mc-rich-select-dropdown {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-dropdown);
    max-height: 280px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}

.mc-rich-select.open .mc-rich-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mc-rich-select-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background .1s;
}

.mc-rich-select-option:hover {
    background: var(--color-hover-bg);
}

.mc-rich-select-option.selected {
    background: var(--color-teal-light);
}

/* La ricerca nasconde le voci che non corrispondono, e `display: flex` batte
   `[hidden]` (CLAUDE.md §4): senza questa riga il filtro non filtra niente. */
.mc-rich-select-option[hidden] { display: none; }

/* ── Select del kit sopra un `<select>` nativo ───────────────────────────
   Il campo nativo resta ed e' lui il valore: si nasconde e basta. `display:
   none` su un select NON gli impedisce di essere spedito col modulo, ed e'
   l'unico modo per toglierlo di mezzo senza lasciargli una seconda casella di
   tabulazione. Il selettore ha due pezzi — l'elemento piu' la classe — per
   battere `.mc-form-select`, che dichiara il proprio `display`. */
select.mc-select-kit-native {
    display: none;
}

/* L'intestazione di un `<optgroup>`: non si preme, dice solo a cosa
   appartengono le voci sotto. */
.mc-rich-select-group {
    padding: var(--space-3) var(--space-4) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.mc-rich-select-group[hidden] { display: none; }

/* La voce che le frecce stanno attraversando. Non e' la voce SCELTA — quella
   ha il suo sfondo — ed e' per questo che serve un segno diverso: senza, con
   la tastiera non si sa dove si e'. */
.mc-rich-select-option.is-marked {
    background: var(--color-hover-bg);
    box-shadow: inset 2px 0 0 var(--color-border-focus);
}

/* Una voce che c'e' ma non si puo' scegliere. Resta VISIBILE — toglierla
   direbbe che non esiste, e non e' quello che si vuole dire: si vuole dire che
   qui non si applica. `pointer-events: none` la sottrae anche al passaggio del
   mouse, che altrimenti prometterebbe un clic che non succede. */
.mc-rich-select-option.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.mc-rich-select-option-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.mc-rich-select-option-icon .material-symbols-rounded {
    font-size: 18px;
}

.mc-rich-select-option-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.mc-rich-select-option-content {
    flex: 1;
    min-width: 0;
}

.mc-rich-select-option-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    line-height: 1.3;
}

.mc-rich-select-option-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty state inside dropdown */
/* ── La ricerca dentro il select ─────────────────────────────────────────
   Serve quando le voci sono tante: l'elenco dei fusi orari ne ha 419, e
   scorrerle e' peggio del campo nativo, che almeno ha la digitazione rapida.
   Appiccicata in cima, perche' scorrendo l'elenco deve restare raggiungibile:
   una ricerca che scompare appena si scorre non e' una ricerca. */
.mc-rich-select-search {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--space-2);
    background: var(--color-card-bg);
    border-bottom: var(--space-px) solid var(--color-border);
}

.mc-rich-select-search-input {
    width: 100%;
    height: var(--space-9);
    padding: 0 var(--space-3);
    border: var(--space-px) solid var(--color-border-strong);
    border-radius: var(--radius-input);
    background: var(--color-card-bg);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
}

.mc-rich-select-search-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.mc-rich-select-empty {
    padding: var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Inline variant — for use inside filter bars */
.mc-rich-select-inline {
    width: auto;
    min-width: 160px;
}

.mc-rich-select-inline .mc-rich-select-trigger {
    height: var(--space-9);
    font-size: var(--text-sm);
    padding: 0 var(--space-2) 0 var(--space-3);
    gap: var(--space-1);
    border-color: var(--color-border);
}

.mc-rich-select-inline .mc-rich-select-dropdown {
    min-width: 240px;
}

/* ==========================================================================
   Vendor Select — dropdown with vendor-icon row layout per option.
   Each row shows a 32px colored circle (mc-vendor-icon-sm) + bold title +
   muted subtitle. Use when each option needs a small piece of brand /
   intent decoration to be scannable at a glance. Mirrors the "list items"
   variant of mc-vendor-icon (see vendor-icons section in showcase).

   Trigger displays the currently-selected option (same row layout); on
   click the panel opens listing all options. A hidden input carries the
   value, so this is a drop-in replacement for native <select> in forms.

   Markup contract:
     <div class="mc-vendor-select" data-mc-vendor-select>
       <input type="hidden" data-field="kind" value="tag">
       <button type="button" data-vendor-select-trigger>
         <div class="mc-vendor-select-row">… selected row …</div>
         <span class="material-symbols-rounded mc-vendor-select-arrow">expand_more</span>
       </button>
       <div class="mc-vendor-select-panel">
         <div class="mc-vendor-select-option is-selected" data-vendor-select-option="tag">
           … row layout …
         </div>
         <div class="mc-vendor-select-option" data-vendor-select-option="copy">…</div>
       </div>
     </div>

   Init: open/close + option selection are typically wired by the host
   (panel-level delegation works well — no global JS required).
   ========================================================================== */

.mc-vendor-select {
    position: relative;
    width: 100%;
}

.mc-vendor-select-trigger {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%;
    padding: var(--space-2-5) var(--space-3);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border-strong);
    border-radius: var(--radius-input);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--color-text);
    transition: border-color .15s;
}

.mc-vendor-select-trigger:hover { border-color: var(--color-text); }
.mc-vendor-select.open .mc-vendor-select-trigger { border-color: var(--color-text); }

.mc-vendor-select-row {
    flex: 1;
    display: flex; align-items: center; gap: var(--space-3);
    min-width: 0;
}

.mc-vendor-select-row-text {
    flex: 1; min-width: 0;
}

.mc-vendor-select-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}

.mc-vendor-select-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.35;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-vendor-select-arrow {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--color-text-muted);
    transition: transform .15s;
}

.mc-vendor-select.open .mc-vendor-select-arrow { transform: rotate(180deg); }

.mc-vendor-select-panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0; right: 0;
    z-index: var(--z-dropdown);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-dropdown);
    overflow: hidden;
    opacity: 0; visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}

.mc-vendor-select.open .mc-vendor-select-panel {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.mc-vendor-select-panel-title {
    display: block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-hover-bg);
    border-bottom: var(--space-px) solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}

.mc-vendor-select-option {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2-5) var(--space-3);
    cursor: pointer;
    border-bottom: var(--space-px) solid var(--color-border);
    transition: background .1s;
}

.mc-vendor-select-option:last-child { border-bottom: none; }
.mc-vendor-select-option:hover { background: var(--color-hover-bg); }
.mc-vendor-select-option.is-selected { background: var(--color-teal-light); }

/* Responsive: on small screens, dropdown goes full-width and may need more room */
@media (max-width: 480px) {
    .mc-rich-select-dropdown {
        max-height: 240px;
    }
    .mc-rich-select-option {
        padding: var(--space-3);
    }
    .mc-rich-select-inline {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================================
   Color Scheme Picker
   Reusable component: icon indicator + dropdown panel with palette cards.
   Used in topbar; can be placed anywhere a scheme selector is needed.

   Structure:
     .mc-color-scheme-icon              — 2×2 grid icon (auto-reflects current scheme)
       .mc-color-scheme-icon-block      — individual color block (×4)
     .mc-color-scheme-panel             — dropdown wrapper
       .mc-color-scheme-header          — title bar
       .mc-color-scheme-grid            — 2-column card grid
         .mc-color-scheme-card          — clickable palette card
           .mc-color-scheme-swatches    — 5-block swatch bar
             span.s1–.s5               — individual swatch blocks
           .mc-color-scheme-info        — name + description
           .mc-color-scheme-check       — active checkmark

   JS: ColorScheme.js (window.McColorScheme)
   ========================================================================== */

/* --- Icon: 2×2 color block grid (auto-reflects current scheme) --- */
.mc-color-scheme-icon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    gap: 1px;
    background: var(--color-card-bg);
}

.mc-color-scheme-icon-block {
    display: block;
}

.mc-color-scheme-icon-1 { background: var(--color-teal-active); }
.mc-color-scheme-icon-2 { background: var(--color-teal); }
.mc-color-scheme-icon-3 { background: var(--color-teal-hover); }
.mc-color-scheme-icon-4 { background: var(--color-teal-light); }

/* --- Panel --- */
.mc-color-scheme-panel {
    min-width: 340px;
    padding: 0;
}

@media (max-width: 767px) {
    /* Color scheme panel: full-width fixed on mobile (topbar is relative, not sticky) */
    .mc-dropdown-menu.mc-color-scheme-panel {
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        right: 0;
        width: 100vw;
        min-width: 0;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        box-shadow: var(--shadow-modal);
        z-index: calc(var(--z-topbar) + 10);
        background: var(--color-card-bg);
        margin-top: 0;
        transform: none;
    }

    .mc-dropdown-menu.mc-color-scheme-panel.active {
        transform: none;
    }

    .mc-color-scheme-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .mc-color-scheme-card {
        min-width: 0;
    }

    .mc-color-scheme-info {
        padding: var(--space-1-5) var(--space-2);
    }

    .mc-color-scheme-name {
        font-size: var(--text-xs);
    }

    .mc-color-scheme-desc {
        font-size: 10px;
        line-height: 1.3;
    }
}

.mc-color-scheme-header {
    padding: var(--space-3-5) var(--space-4);
    border-bottom: var(--space-px) solid var(--color-border);
}

.mc-color-scheme-header-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.mc-color-scheme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-3);
}

/* --- Card --- */
.mc-color-scheme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-card-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    padding: 0;
    text-align: left;
    font-family: inherit;
    outline: none;
}

.mc-color-scheme-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.mc-color-scheme-card.active {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 2px var(--color-teal-ring);
}

/* --- Swatch bar: 5 flat color blocks side-by-side --- */
.mc-color-scheme-swatches {
    display: flex;
    height: 32px;
    width: 100%;
    flex-shrink: 0;
}

.mc-color-scheme-swatches span {
    flex: 1;
}

.mc-color-scheme-info {
    padding: var(--space-2) var(--space-2-5);
}

.mc-color-scheme-name {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    line-height: var(--leading-tight);
}

.mc-color-scheme-desc {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

.mc-color-scheme-check {
    display: none;
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    color: #fff;
    font-size: var(--text-md);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.mc-color-scheme-card.active .mc-color-scheme-check {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-color-scheme-check .material-symbols-rounded {
    font-size: 18px;
    font-variation-settings: 'FILL' 1;
}

/* --- Flat swatch blocks per scheme (5 blocks: darkest → lightest) --- */
.mc-color-scheme-card[data-color-scheme="default"] .s1 { background: #004D54; }
.mc-color-scheme-card[data-color-scheme="default"] .s2 { background: #007C89; }
.mc-color-scheme-card[data-color-scheme="default"] .s3 { background: #34B8C4; }
.mc-color-scheme-card[data-color-scheme="default"] .s4 { background: #8DD8DF; }
.mc-color-scheme-card[data-color-scheme="default"] .s5 { background: #E0F5F5; }

.mc-color-scheme-card[data-color-scheme="blue"] .s1 { background: #00435C; }
.mc-color-scheme-card[data-color-scheme="blue"] .s2 { background: #00698F; }
.mc-color-scheme-card[data-color-scheme="blue"] .s3 { background: #4A9CC5; }
.mc-color-scheme-card[data-color-scheme="blue"] .s4 { background: #8EC4E0; }
.mc-color-scheme-card[data-color-scheme="blue"] .s5 { background: #E0F0F7; }

.mc-color-scheme-card[data-color-scheme="green"] .s1 { background: #055A2D; }
.mc-color-scheme-card[data-color-scheme="green"] .s2 { background: #098547; }
.mc-color-scheme-card[data-color-scheme="green"] .s3 { background: #3EB574; }
.mc-color-scheme-card[data-color-scheme="green"] .s4 { background: #8ED4A8; }
.mc-color-scheme-card[data-color-scheme="green"] .s5 { background: #E0F5E9; }

.mc-color-scheme-card[data-color-scheme="brown"] .s1 { background: #553010; }
.mc-color-scheme-card[data-color-scheme="brown"] .s2 { background: #81430F; }
.mc-color-scheme-card[data-color-scheme="brown"] .s3 { background: #BF6823; }
.mc-color-scheme-card[data-color-scheme="brown"] .s4 { background: #D9A872; }
.mc-color-scheme-card[data-color-scheme="brown"] .s5 { background: #F5EBE0; }

.mc-color-scheme-card[data-color-scheme="pink"] .s1 { background: #8A3162; }
.mc-color-scheme-card[data-color-scheme="pink"] .s2 { background: #BE4C89; }
.mc-color-scheme-card[data-color-scheme="pink"] .s3 { background: #D87AB0; }
.mc-color-scheme-card[data-color-scheme="pink"] .s4 { background: #E8A8CC; }
.mc-color-scheme-card[data-color-scheme="pink"] .s5 { background: #F5E0ED; }

.mc-color-scheme-card[data-color-scheme="grey"] .s1 { background: #110E0B; }
.mc-color-scheme-card[data-color-scheme="grey"] .s2 { background: #221C17; }
.mc-color-scheme-card[data-color-scheme="grey"] .s3 { background: #555555; }
.mc-color-scheme-card[data-color-scheme="grey"] .s4 { background: #AAAAAA; }
.mc-color-scheme-card[data-color-scheme="grey"] .s5 { background: #EBEBEB; }

.mc-color-scheme-card[data-color-scheme="white"] .s1 { background: #222222; }
.mc-color-scheme-card[data-color-scheme="white"] .s2 { background: #4A4A4A; }
.mc-color-scheme-card[data-color-scheme="white"] .s3 { background: #888888; }
.mc-color-scheme-card[data-color-scheme="white"] .s4 { background: #C8C8C8; }
.mc-color-scheme-card[data-color-scheme="white"] .s5 { background: #F5F5F5; }

/* ═══════════════════════════════════════════════════════════════
   mc-settings-nav — Vertical sidebar navigation for settings/account pages
   5 variants: default, compact, card, pill, rich
   ═══════════════════════════════════════════════════════════════ */

/* --- Shared layout: 2-column (sidebar + content) --- */
.mc-settings-layout {
    display: grid;
    /* `minmax(0, 1fr)`, non `1fr`: una traccia `1fr` ha larghezza minima
       AUTOMATICA, cioe' non scende sotto il contenuto. Una tabella larga o
       una stringa senza spazi allarga la griglia oltre la finestra e compare
       una barra di scorrimento orizzontale su tutta la pagina. Si vedeva solo
       da quando questa colonna e' a tutta larghezza, ma c'era gia'. */
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 0;
    min-height: 400px;
}
@media (max-width: 900px) {
    .mc-settings-layout { grid-template-columns: 1fr; }
    .mc-settings-layout .mc-settings-nav { border-right: none; border-bottom: var(--space-px) solid var(--color-border); }
}

.mc-settings-content {
    padding: var(--space-6);
    min-width: 0;
}

/* --- Variant 1: DEFAULT (plain single-line list) ------------------------
   Era icona in un riquadro da 36px + titolo + descrizione: tre righe per
   voce. Con etichette italiane le descrizioni andavano a capo due volte
   («Metodo di pagamento, indirizzo di fatturazione») e una colonna da 280px
   risultava comunque STRETTA — non per larghezza, ma perche' ogni voce era un
   blocco che si accapigliava col successivo.

   Qui una voce e' una riga. Le descrizioni restano nel markup e nei file di
   lingua — le rimette in scena la variante `--rich`, appena sotto — ma la
   navigazione predefinita non le mostra: si legge una volta e si scorre mille.
   ------------------------------------------------------------------------ */
.mc-settings-nav {
    border-right: var(--space-px) solid var(--color-border);
    /* Spazio ai lati perche' le pastiglie non tocchino il bordo della colonna. */
    padding: var(--space-3) var(--space-3) var(--space-5);
    background: var(--color-card-bg);
}

.mc-settings-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px var(--space-3);
    margin-bottom: 1px;
    border-radius: var(--radius-input);
    /* La barra da 3px a sinistra spariva sotto la pastiglia e spostava il
       testo di tre pixel fra stato attivo e non attivo. */
    border-left: none;
    /* Inchiostro pieno, non attenuato: l'etichetta di gruppo e le voci erano
       ENTRAMBE `--color-text-muted`, stesso colore e stesso bordo sinistro, e
       l'etichetta pesava pure di piu' (600 contro 500). Risultato: la
       categoria non si leggeva come categoria, si leggeva come una voce
       enfatizzata. La separazione non poteva venire dallo schiarire
       l'etichetta — `--color-text-disabled` da' 2,87:1 su fondo scheda, sotto
       soglia per 11px — quindi viene dallo scurire cio' che si clicca: le
       voci sono la cosa piu' scura della colonna, l'etichetta resta grigia. */
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    position: relative;
}

.mc-settings-nav-item:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
    text-decoration: none;
}

.mc-settings-nav-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-pulse-ring);
    color: var(--color-text);
}

/* Attivo: pastiglia menta + peso. Il colore del testo resta quello pieno e
   non `--color-pulse-strong`, che su fondo `--color-pulse-light` arriva a
   3,6:1 — sotto la soglia per un testo di 14px, semigrassetto compreso. */
.mc-settings-nav-item.active {
    background: var(--color-pulse-light);
    color: var(--color-text);
}

.mc-settings-nav-item.active .mc-settings-nav-item-title {
    font-weight: var(--weight-semibold);
}

/* Icona e descrizione: fuori dalla variante predefinita, non dal markup. */
.mc-settings-nav-item-icon,
.mc-settings-nav-item-desc { display: none; }

.mc-settings-nav-item-body { min-width: 0; flex: 1; }

.mc-settings-nav-item-title {
    font-size: var(--text-base);
    /* Regolare, non medio: con l'inchiostro pieno il peso in piu' non serve a
       distinguere la voce, e toglierlo lascia il semigrassetto a fare un
       lavoro solo — dire qual e' la voce attiva. */
    font-weight: var(--weight-normal);
    color: inherit;
    line-height: 1.4;
    /* Nessun troncamento: «Autenticazione a due fattori» sta su una riga in
       questa colonna, ma in tedesco o in polacco no, e una voce di menu
       tagliata a meta' e' peggio di una voce su due righe. */
    text-wrap: pretty;
}

/* Il testo del contrappunto e' `--color-card-bg`, non bianco: cosi' si
   ribalta col tema invece di restare bianco su un fondo che in tema scuro
   diventa chiaro.

   Com'era: bianco su `--color-teal`. Quel token cambia tinta su ognuno dei
   sette schemi di colore, e nelle varianti scure diventa un azzurro chiaro
   (#7FA9E8) — bianco su quello e' 2:1, cioe' un numero che non si legge. Il
   contrappunto degli avvisi stava a 2,07:1. Misurato, non stimato. */
.mc-settings-nav-item-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    background: var(--color-text);
    color: var(--color-card-bg);
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    min-width: 18px;
    text-align: center;
    line-height: 16px;
    flex-shrink: 0;
    align-self: center;
    font-variant-numeric: tabular-nums;
}

/* Rosso pieno con sopra il colore della scheda: ~5:1 in chiaro, ~10:1 in
   scuro. Un avviso deve essere visto, e per essere visto va letto. */
.mc-settings-nav-item-badge.mc-badge-warning,
.mc-settings-nav-item-badge.mc-badge-danger {
    background: var(--color-error);
    color: var(--color-card-bg);
}

.mc-settings-nav-divider {
    height: var(--space-px);
    background: var(--color-border);
    margin: var(--space-3) var(--space-3);
}

/* Un filo seguito da un titolo di gruppo separa due volte la stessa cosa. Il
   titolo basta; il filo resta dove un gruppo non ha titolo — fra Fatturazione
   e Notifiche. Nascosto invece che rimosso dal markup perche' quale dei due
   casi si presenti dipende dai permessi dell'utente, e la regola va decisa
   guardando il documento reso, non le condizioni Blade. */
.mc-settings-nav-divider:has(+ .mc-settings-nav-group-label) { display: none; }

.mc-settings-nav-group-label {
    font-size: var(--text-xs);
    /* Il semigrassetto qui non e' enfasi: a 11px in maiuscoletto serve a
       tenere leggibili le aste sottili. L'etichetta non compete con le voci
       perche' e' piu' piccola, grigia e maiuscola — tre dimensioni — non
       perche' pesa meno. */
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Aria sopra, poca sotto: il titolo appartiene a cio' che segue, non a
       cio' che precede. Senza il filo divisorio e'  questa asimmetria a
       raggruppare. */
    padding: var(--space-5) var(--space-3) var(--space-2);
}

/* Il primo gruppo non ha niente sopra di se': lo spazio in cima e' gia' dato
   dal padding della colonna. */
.mc-settings-nav > .mc-settings-nav-group-label:first-child { padding-top: var(--space-1); }

/* La variante `--rich` rimette icone e descrizioni: e' li' che vive la
   versione estesa, per chi la volesse su una schermata specifica. */
.mc-settings-nav--rich .mc-settings-nav-item {
    align-items: flex-start;
    padding: var(--space-3) var(--space-3);
    gap: var(--space-3);
}

.mc-settings-nav--rich .mc-settings-nav-item-icon,
.mc-settings-nav--rich .mc-settings-nav-item-desc { display: block; }

.mc-settings-nav--rich .mc-settings-nav-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-input);
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
}

.mc-settings-nav--rich .mc-settings-nav-item.active .mc-settings-nav-item-icon {
    background: var(--color-pulse);
    color: var(--color-white);
}

/* --- Variant 2: COMPACT (no desc, tight spacing, smaller icons) --- */
.mc-settings-nav--compact .mc-settings-nav-item {
    padding: var(--space-2) var(--space-5);
    align-items: center;
}

.mc-settings-nav--compact .mc-settings-nav-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
}

.mc-settings-nav--compact .mc-settings-nav-item-icon .material-symbols-rounded { font-size: 18px; }

.mc-settings-nav--compact .mc-settings-nav-item.active .mc-settings-nav-item-icon {
    background: transparent;
    color: var(--color-teal);
}

.mc-settings-nav--compact .mc-settings-nav-item-desc { display: none; }

/* --- Variant 3: CARD (each item is a rounded card, no left border) --- */
.mc-settings-nav--card {
    padding: var(--space-4);
    border-right: none;
}

.mc-settings-nav--card .mc-settings-nav-item {
    border-left: none;
    border-radius: var(--radius-card);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-1);
}

/* La vetrina UI e' l'unica a usare questa variante, e senza questa riga
   perderebbe le icone quando la base ha smesso di mostrarle. */
.mc-settings-nav--card .mc-settings-nav-item-icon,
.mc-settings-nav--card .mc-settings-nav-item-desc { display: block; }

.mc-settings-nav--card .mc-settings-nav-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-input);
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
}

.mc-settings-nav--card .mc-settings-nav-item { align-items: flex-start; }

.mc-settings-nav--card .mc-settings-nav-item:hover {
    background: var(--color-hover-bg);
    box-shadow: none;
}

.mc-settings-nav--card .mc-settings-nav-item.active {
    background: var(--color-card-bg);
    box-shadow: var(--shadow-card);
    border-left: none;
}

.mc-settings-nav--card + .mc-settings-content {
    border-left: var(--space-px) solid var(--color-border);
}

/* --- Variant 4: PILL (horizontal pill shape, no sidebar border) --- */
.mc-settings-nav--pill {
    padding: var(--space-4);
    border-right: none;
}

.mc-settings-nav--pill .mc-settings-nav-item {
    border-left: none;
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-1);
    align-items: center;
}

.mc-settings-nav--pill .mc-settings-nav-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border-radius: var(--radius-full);
}

.mc-settings-nav--pill .mc-settings-nav-item-icon .material-symbols-rounded { font-size: 18px; }

.mc-settings-nav--pill .mc-settings-nav-item.active {
    background: var(--color-teal);
    color: var(--color-white);
}

.mc-settings-nav--pill .mc-settings-nav-item.active .mc-settings-nav-item-icon {
    background: transparent;
    color: var(--color-white);
}

.mc-settings-nav--pill .mc-settings-nav-item.active .mc-settings-nav-item-title { color: var(--color-white); }
.mc-settings-nav--pill .mc-settings-nav-item.active .mc-settings-nav-item-desc { color: rgba(255,255,255,.7); }

.mc-settings-nav--pill .mc-settings-nav-item-desc { display: none; }

.mc-settings-nav--pill + .mc-settings-content {
    border-left: var(--space-px) solid var(--color-border);
}

/* --- Variant 5: RICH (large icon boxes, status dot, full description) --- */
.mc-settings-nav--rich .mc-settings-nav-item {
    padding: var(--space-4) var(--space-5);
    gap: var(--space-4);
}

.mc-settings-nav--rich .mc-settings-nav-item-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-card);
}

.mc-settings-nav--rich .mc-settings-nav-item-icon .material-symbols-rounded { font-size: 22px; }

.mc-settings-nav--rich .mc-settings-nav-item-title {
    font-size: var(--text-base);
}

.mc-settings-nav--rich .mc-settings-nav-item-desc {
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}

.mc-settings-nav-item-status {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    align-self: center;
}

.mc-settings-nav-item-status.status-ok { background: var(--chart-1); }
.mc-settings-nav-item-status.status-warning { background: var(--chart-3); }
.mc-settings-nav-item-status.status-error { background: var(--color-error); }
.mc-settings-nav-item-status.status-inactive { background: var(--color-border-strong); }

/* --- mc-settings-layout inside mc-card (common pattern) --- */
/* --- mc-settings-layout inside mc-card (common pattern) --- */
.mc-card > .mc-settings-layout {
    margin: calc(var(--space-6) * -1);
}
.mc-card.mc-card-flush > .mc-settings-layout {
    margin: 0;
}

.mc-card > .mc-settings-layout .mc-settings-nav {
    border-radius: var(--radius-card) 0 0 var(--radius-card);
}

/* ═══════════════════════════════════════════════════════════════
   mc-onboarding — Full onboarding checklist (Mailchimp-style)
   Header with progress + 2-column: step nav + content panel + illustration
   ═══════════════════════════════════════════════════════════════ */

.mc-onboarding {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.mc-onboarding-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: var(--space-px) solid var(--color-border);
}

.mc-onboarding-headline {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-3);
    line-height: 1.3;
}

.mc-onboarding-progress-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.mc-onboarding-progress-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.mc-onboarding-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.mc-onboarding-progress-fill {
    height: 100%;
    background: var(--color-teal);
    border-radius: var(--radius-full);
    transition: width .6s cubic-bezier(.4,0,.2,1);
}

.mc-onboarding-body {
    display: grid;
    grid-template-columns: 300px 1fr;
}

@media (max-width: 800px) {
    .mc-onboarding-body { grid-template-columns: 1fr; }
    .mc-onboarding-steps { border-right: none; border-bottom: var(--space-px) solid var(--color-border); }
}

.mc-onboarding-steps {
    border-right: var(--space-px) solid var(--color-border);
    padding: var(--space-4) 0;
}

.mc-onboarding-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3-5) var(--space-6);
    cursor: pointer;
    transition: background var(--transition-fast);
    user-select: none;
    position: relative;
}

.mc-onboarding-step:hover { background: var(--color-hover-bg); }

.mc-onboarding-step.active {
    background: var(--color-hover-bg);
}

.mc-onboarding-step-check {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
    font-size: 14px;
    color: transparent;
}

.mc-onboarding-step.done .mc-onboarding-step-check {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-white);
}

.mc-onboarding-step.active .mc-onboarding-step-check {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 2px var(--color-teal-ring);
}

.mc-onboarding-step-label {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    flex: 1;
}

.mc-onboarding-step.done .mc-onboarding-step-label {
    color: var(--color-text-muted);
}

.mc-onboarding-step-time {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-hover-bg);
    padding: 2px var(--space-2-5);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* Right panel */
.mc-onboarding-panel {
    padding: var(--space-8);
    display: none;
}

.mc-onboarding-panel.active {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: var(--space-8);
    align-items: center;
}

@media (max-width: 700px) {
    .mc-onboarding-panel.active { grid-template-columns: 1fr; }
    .mc-onboarding-panel-visual { display: none; }
}

.mc-onboarding-panel-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}

.mc-onboarding-panel-desc {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-5);
}

.mc-onboarding-panel-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.mc-onboarding-panel-actions .mc-onboarding-video-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-teal);
    text-decoration: none;
    font-weight: var(--weight-medium);
    transition: color var(--transition-fast);
    padding-left: var(--space-3);
    border-left: var(--space-px) solid var(--color-border);
}

.mc-onboarding-panel-actions .mc-onboarding-video-link:hover { color: var(--color-teal-hover); }

.mc-onboarding-panel-actions .mc-onboarding-video-link .material-symbols-rounded { font-size: 20px; }

.mc-onboarding-panel-visual {
    width: 220px;
    height: 180px;
    background: var(--color-hover-bg);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mc-onboarding-panel-visual svg {
    width: 90%;
    height: 90%;
}

/* Skip link styling */
.mc-onboarding-skip {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-weight: var(--weight-medium);
    transition: color var(--transition-fast);
}

.mc-onboarding-skip:hover { color: var(--color-text); }

/* ==========================================================================
   Custom Icon System (mc-icon)
   Hand-drawn SVG icons with brand accent. Usage:
   @include('refactor.components.icons.mc-icon', ['icon' => 'home'])
   ========================================================================== */

.mc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    line-height: 0;
}

.mc-icon svg {
    display: block;
    flex-shrink: 0;
}

/* Size variants */
.mc-icon-xs { width: 14px; height: 14px; }
.mc-icon-xs svg { width: 14px; height: 14px; }

.mc-icon-sm { width: 18px; height: 18px; }
.mc-icon-sm svg { width: 18px; height: 18px; }

.mc-icon-md { width: 24px; height: 24px; }
.mc-icon-md svg { width: 24px; height: 24px; }

.mc-icon-lg { width: 32px; height: 32px; }
.mc-icon-lg svg { width: 32px; height: 32px; }

.mc-icon-xl { width: 48px; height: 48px; }
.mc-icon-xl svg { width: 48px; height: 48px; }

/* Muted variant — lighter weight for secondary contexts */
.mc-icon-muted { color: var(--color-text-muted); }

/* Teal branded variant — icon takes teal color */
.mc-icon-teal { color: var(--color-teal); }

/* Icon in a rounded background box — for stat cards, nav items */
.mc-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-input);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}

.mc-icon-box svg { width: 22px; height: 22px; }

/* Icon box color variants using chart palette */
.mc-icon-box.teal   { background: var(--chart-1-bg); color: var(--chart-1); }
.mc-icon-box.green  { background: var(--chart-2-bg); color: var(--chart-2); }
.mc-icon-box.blue   { background: var(--chart-3-bg); color: var(--chart-3); }
.mc-icon-box.orange { background: var(--chart-4-bg); color: var(--chart-4); }
.mc-icon-box.rose   { background: var(--chart-5-bg); color: var(--chart-5); }
.mc-icon-box.purple { background: var(--chart-6-bg); color: var(--chart-6); }

/* Icon gallery — for showcase page */
.mc-icon-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-3);
}

.mc-icon-gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-2);
    border-radius: var(--radius-input);
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    transition: all var(--transition-fast);
    cursor: default;
}

.mc-icon-gallery-item:hover {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mc-icon-gallery-item .mc-icon {
    color: var(--color-text);
}

.mc-icon-gallery-item:hover .mc-icon {
    color: var(--color-teal);
}

.mc-icon-gallery-label {
    font-size: 10px;
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
}

/* ----------------------------------------------------------------
   cr-nav — Icon pill navigation bar (shared across list + campaign pages)
   Moved from campaign-report.css to be available globally.
   ---------------------------------------------------------------- */
.cr-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) 0;
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.cr-nav-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-decoration: none !important;
    transition: all 0.15s ease;
    border: none;
    background: none;
    cursor: pointer;
    white-space: nowrap;
}

.cr-nav-item .material-symbols-rounded { font-size: 18px; }

.cr-nav-item:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}

.cr-nav-item.active {
    background: var(--color-teal-light);
    color: var(--color-teal);
    font-weight: var(--weight-semibold);
    border: 2px solid var(--color-teal);
}

/* Dropdown */
.cr-nav-dropdown { position: relative; }

.cr-caret {
    font-size: 16px !important;
    margin-left: -2px;
    transition: transform 0.2s;
}

.cr-nav-dropdown.open .cr-caret { transform: rotate(180deg); }

.cr-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    min-width: 220px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(0,0,0,0.12));
    padding: var(--space-2) 0;
    z-index: 100;
    /* Smooth entrance — matches mc-dropdown-menu (no more instant display:block jump) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(var(--space-2) * -1));
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.cr-nav-dropdown.open .cr-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.cr-nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.1s;
}

.cr-nav-dropdown-menu a:hover { background: var(--color-hover-bg); }

.cr-nav-dropdown-menu a .material-symbols-rounded {
    font-size: 18px;
    color: var(--color-text-muted);
}

.cr-nav-dropdown-menu a.active {
    background: var(--color-teal-light);
    color: var(--color-teal);
    font-weight: var(--weight-semibold);
}

.cr-nav-dropdown-head {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-4);
    font-size: 10px;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    background: var(--color-hover-bg);
    margin: 0 0 var(--space-1);
}

.cr-nav-dropdown-head .material-symbols-rounded { font-size: 14px; }

/* Items following a section head get subtle left indent */
.cr-nav-dropdown-head ~ a:not(.cr-nav-dropdown-head) {
    padding-left: var(--space-5);
}

.cr-nav-dropdown-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-1) 0;
}

.cr-nav-dropdown-menu-wide { min-width: 280px; }

/* ----------------------------------------------------------------
   mc-field-card — Accordion field manager (Mailchimp-style)
   Each field = collapsible card row. Collapsed: summary.
   Expanded: full edit form inside.
   Inspired by mc-preflight but for CRUD field management.
   ---------------------------------------------------------------- */
.mc-field-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-card-bg);
}

/* Individual field card */
.mc-field-card {
    border-bottom: 1px solid var(--color-border);
}
.mc-field-card:last-child { border-bottom: none; }

/* Collapsed summary row */
.mc-field-card-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}
.mc-field-card-summary:hover { background: var(--color-hover-bg); }

/* Chevron toggle */
.mc-field-card-chevron {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}
.mc-field-card.is-open .mc-field-card-chevron .material-symbols-rounded { transform: rotate(90deg); }

/* Icon circle (pastel bg per field type) */
.mc-field-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-field-card-icon .material-symbols-rounded { font-size: 20px; }

/* Summary text */
.mc-field-card-info { flex: 1; min-width: 0; }

.mc-field-card-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}

.mc-field-card-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-field-card-meta code {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    background: var(--color-hover-bg);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

/* Right side badges */
.mc-field-card-badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Expanded detail panel */
.mc-field-card-detail {
    display: none;
    padding: var(--space-3) var(--space-5);
    padding-left: calc(var(--space-5) + 20px + var(--space-3) + 40px + var(--space-3));
    background: var(--color-hover-bg);
    border-top: 1px solid var(--color-border);
}
.mc-field-card.is-open .mc-field-card-detail { display: block; }

/* Edit form grid inside detail — compact 3-column layout */
.mc-field-card-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-2) var(--space-3);
}

/* Compact labels + inputs inside field cards */
.mc-field-card-form .mc-form-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
}

.mc-field-card-form .mc-form-input,
.mc-field-card-form textarea.mc-form-input {
    font-size: var(--text-sm);
    padding: var(--space-1-5) var(--space-2-5);
}

.mc-field-card-form textarea.mc-form-input {
    min-height: 60px;
    resize: vertical;
}

.mc-field-card-form .mc-form-help {
    font-size: 10px;
}

/* Span 2 or 3 columns */
.mc-field-card-form-2col { grid-column: span 2; }
.mc-field-card-form-full { grid-column: 1 / -1; }

/* Options sub-section */
.mc-field-card-options {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.mc-field-card-option-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}

.mc-field-card-option-row .mc-form-input { flex: 1; }

/* Drag handle — always visible as subtle dots, highlights on hover */
.mc-field-card-drag {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--color-text-disabled);
    transition: color 0.15s;
}
.mc-field-card-drag:active { cursor: grabbing; }
.mc-field-card-summary:hover .mc-field-card-drag { color: var(--color-text-muted); }

/* Ghost while dragging */
.mc-field-card--ghost {
    opacity: 0.4;
    background: var(--color-teal-light);
}

/* Locked field (EMAIL) */
.mc-field-card--locked .mc-field-card-summary { cursor: default; }
.mc-field-card--locked .mc-field-card-chevron { visibility: hidden; }

/* Add field section */
.mc-field-add {
    padding: var(--space-4) var(--space-5);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    margin-top: var(--space-4);
}

.mc-field-add-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-field-add-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Responsive: field card form → stacked on tablet/mobile */
@media (max-width: 900px) {
    .mc-field-card-form {
        grid-template-columns: 1fr 1fr;
    }
    .mc-field-card-detail {
        padding-left: var(--space-5);
    }
}
@media (max-width: 599px) {
    .mc-field-card-form {
        grid-template-columns: 1fr;
    }
    .mc-field-card-summary {
        padding: var(--space-2) var(--space-3);
    }
    .mc-field-card-detail {
        padding: var(--space-3);
    }
    .mc-field-card-icon { width: 32px; height: 32px; }
    .mc-field-card-icon .material-symbols-rounded { font-size: 16px; }
}

/* TAG input min-width so it never collapses too small */
.mc-field-card-form input[style*="text-transform:uppercase"] {
    min-width: 60px;
}

/* ==========================================================================
   mc-inline-edit — Click-to-edit inline values
   Shows a static value; clicking it reveals the matching input control.
   Save on Enter / blur, cancel on Escape.
   Supports: text, number, date, select, textarea.
   ========================================================================== */

.mc-inline-edit {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--space-8);
    max-width: 100%;
}

/* ── Static display (value shown when not editing) ── */
.mc-inline-edit-value {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-input);
    border: 1px solid transparent;
    font-size: var(--text-base);
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 40px;
    line-height: 1.4;
    word-break: break-word;
}

.mc-inline-edit-value:hover {
    background: var(--color-hover-bg);
    border-color: var(--color-border);
}

/* Pencil icon — shown on hover */
.mc-inline-edit-value .mc-inline-edit-icon {
    font-size: 14px;
    color: var(--color-text-disabled);
    transition: color var(--transition-fast);
    flex-shrink: 0;
}
.mc-inline-edit-value:hover .mc-inline-edit-icon {
    color: var(--color-teal);
}

/* Placeholder when value is empty */
.mc-inline-edit-value.is-empty {
    color: var(--color-text-disabled);
    font-style: italic;
}

/* ── Edit mode (input revealed) ── */
.mc-inline-edit-control {
    display: none;
    align-items: center;
    gap: var(--space-1-5);
    width: 100%;
}

.mc-inline-edit.is-editing .mc-inline-edit-value { display: none; }
.mc-inline-edit.is-editing .mc-inline-edit-control { display: inline-flex; }

.mc-inline-edit-control .mc-form-input,
.mc-inline-edit-control .mc-form-select,
.mc-inline-edit-control textarea.mc-form-input {
    font-size: var(--text-base);
    padding: var(--space-1) var(--space-2);
    min-width: 120px;
    flex: 1;
}

.mc-inline-edit-control textarea.mc-form-input {
    min-height: 60px;
    resize: vertical;
}

/* Action buttons (save / cancel) */
.mc-inline-edit-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.mc-inline-edit-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    background: transparent;
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}

.mc-inline-edit-actions button:hover {
    background: var(--color-hover-bg);
}

.mc-inline-edit-actions .mc-inline-edit-save {
    color: var(--color-teal);
}
.mc-inline-edit-actions .mc-inline-edit-save:hover {
    background: var(--color-teal-light);
}

.mc-inline-edit-actions .mc-inline-edit-cancel {
    color: var(--color-text-disabled);
}
.mc-inline-edit-actions .mc-inline-edit-cancel:hover {
    color: var(--color-error);
}

/* ── Size variants ── */
.mc-inline-edit-sm .mc-inline-edit-value {
    font-size: var(--text-sm);
    padding: var(--space-0-5) var(--space-1-5);
    min-height: var(--space-6);
}
.mc-inline-edit-sm .mc-inline-edit-control .mc-form-input,
.mc-inline-edit-sm .mc-inline-edit-control .mc-form-select {
    font-size: var(--text-sm);
    padding: var(--space-0-5) var(--space-1-5);
}

.mc-inline-edit-lg .mc-inline-edit-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}
.mc-inline-edit-lg .mc-inline-edit-control .mc-form-input {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

/* ── Saving state ── */
.mc-inline-edit.is-saving .mc-inline-edit-control {
    opacity: 0.6;
    pointer-events: none;
}

/* ── Success flash ── */
.mc-inline-edit-value.is-saved {
    animation: mc-inline-edit-flash 0.6s ease;
}

@keyframes mc-inline-edit-flash {
    0%   { background: var(--color-teal-light); }
    100% { background: transparent; }
}

/* ══════════════════════════════════════════════════════════════════
   SUBSCRIPTION FLOW — Plan cards, checkout wizard, order summary
   ══════════════════════════════════════════════════════════════════ */

/* ── La scelta del piano a scatti ─────────────────────────────────────
   Il cursore delle email e il commutatore del periodo sopra la griglia, e in
   ogni scheda un blocco per scatto e periodo: se ne vede uno. Vedi
   `_plan_picker.blade.php` e `PlanPicker.js`. `display` batte `[hidden]`
   (CLAUDE.md §4), quindi lo si dice. */
.mc-plan-picker-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
}
.mc-plan-picker-volume { flex: 1 1 360px; min-width: 0; max-width: 640px; }
.mc-plan-picker-variant[hidden] { display: none; }
.mc-plan-picker-unit { color: var(--color-text-muted); font-weight: var(--weight-normal); }
.mc-plan-picker-variant { display: flex; flex-direction: column; gap: var(--space-4); }
.mc-plan-picker-cascade {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.mc-plan-picker-cascade-head {
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-plan-picker-icon { font-size: 16px !important; color: var(--color-success); }

/* ── Plan grid ── */
.mc-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

/* ── Credit plan grid + cards (popup) ── */
.mc-credit-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.mc-credit-plan-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    transition: all var(--transition-base);
}
.mc-credit-plan-card:hover {
    border-color: var(--color-teal);
    box-shadow: 0 4px 16px rgba(0,124,137,0.08);
    transform: translateY(-2px);
}
.mc-credit-plan-card--featured {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 1px var(--color-teal), 0 4px 20px rgba(0,124,137,0.12);
}
.mc-credit-plan-badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 12px;
    background: var(--color-teal); color: #fff;
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    border-radius: 20px; white-space: nowrap;
    letter-spacing: 0.02em;
}
.mc-credit-plan-name {
    font-size: var(--text-base); font-weight: var(--weight-semibold);
    color: var(--color-text); margin-bottom: var(--space-1);
}
.mc-credit-plan-credits {
    font-size: var(--text-sm); font-weight: var(--weight-bold);
    color: var(--color-text-muted); margin-bottom: var(--space-3);
}
.mc-credit-plan-credits span {
    font-weight: var(--weight-normal);
    font-size: var(--text-xs);
}
.mc-credit-plan-price {
    font-size: var(--text-2xl); font-weight: var(--weight-bold);
    color: var(--color-teal); margin-bottom: var(--space-1);
    line-height: 1.1;
}
.mc-credit-plan-currency {
    font-size: var(--text-xs); font-weight: var(--weight-normal);
    color: var(--color-text-muted); vertical-align: super;
}
.mc-credit-plan-per {
    font-size: var(--text-xs); color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    padding: 2px 10px;
    background: var(--color-hover-bg);
    border-radius: var(--radius-sm);
}
.mc-credit-plan-desc {
    font-size: var(--text-sm); color: var(--color-text-muted);
    margin-bottom: var(--space-3); min-height: 36px;
}
.mc-credit-plan-features {
    display: flex; flex-direction: column; gap: var(--space-1);
    margin-bottom: var(--space-4); width: 100%;
}
.mc-credit-plan-feature {
    display: flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs); color: var(--color-text-muted);
    justify-content: center;
}
.mc-credit-plan-feature::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-teal);
    flex-shrink: 0;
}
.mc-credit-plan-card form { width: 100%; margin-top: auto; }
@media (max-width: 768px) {
    .mc-credit-plan-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Plan card ── */
.mc-plan-card {
    position: relative;
    background: var(--color-card-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.mc-plan-card:hover {
    box-shadow: var(--shadow-card);
    border-color: var(--color-border-strong);
}
.mc-plan-card--featured {
    border-color: var(--color-teal);
    border-width: 2px;
    box-shadow: 0 0 0 4px var(--color-teal-ring);
}
.mc-plan-card--current {
    background: var(--color-teal-light);
    border-color: var(--color-teal);
}
.mc-plan-card--disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* Badges */
.mc-plan-badge-featured,
.mc-plan-badge-current {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-0-5) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}
.mc-plan-badge-featured {
    background: var(--color-teal);
    color: var(--color-white);
}
.mc-plan-badge-current {
    background: var(--color-teal-light);
    color: var(--color-teal);
    border: 1px solid var(--color-teal);
}

/* Header */
.mc-plan-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-plan-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-1);
}
.mc-plan-color-1 { background: var(--chart-1-bg); color: var(--chart-1); }
.mc-plan-color-2 { background: var(--chart-2-bg); color: var(--chart-2); }
.mc-plan-color-3 { background: var(--chart-3-bg); color: var(--chart-3); }
.mc-plan-color-4 { background: var(--chart-4-bg); color: var(--chart-4); }
.mc-plan-color-5 { background: var(--chart-5-bg); color: var(--chart-5); }
.mc-plan-color-6 { background: var(--chart-6-bg); color: var(--chart-6); }

.mc-plan-name {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}
.mc-plan-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Price */
.mc-plan-price-area {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
}
.mc-plan-price {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.1;
}
.mc-plan-period {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* Features list */
.mc-plan-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.mc-plan-feature-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* CTA */
.mc-plan-cta {
    margin-top: auto;
}
.mc-plan-trial-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-2);
    margin-bottom: 0;
}

/* ── Subscription checkout wizard steps ── */
.mc-sub-wizard-steps {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-6);
    padding: var(--space-4) 0;
}
.mc-sub-wizard-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}
.mc-sub-wizard-step-circle {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    background: var(--color-card-bg);
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.mc-sub-wizard-step.is-active .mc-sub-wizard-step-circle {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-white);
}
.mc-sub-wizard-step.is-done .mc-sub-wizard-step-circle {
    background: var(--color-teal-light);
    border-color: var(--color-teal);
    color: var(--color-teal);
}
.mc-sub-wizard-step-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}
.mc-sub-wizard-step.is-active .mc-sub-wizard-step-title {
    color: var(--color-text);
}
.mc-sub-wizard-step-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-sub-wizard-connector {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    margin: 0 var(--space-3);
    transition: background 0.2s;
}
.mc-sub-wizard-connector.is-done {
    background: var(--color-teal);
}

/* ── Checkout layout (form + sidebar) ── */
.mc-sub-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-6);
    align-items: start;
}
.mc-sub-checkout-sidebar {
    position: sticky;
    top: 80px;
}
@media (max-width: 900px) {
    .mc-sub-checkout-layout {
        grid-template-columns: 1fr;
    }
    .mc-sub-checkout-sidebar {
        position: static;
        order: -1;
    }
}

/* ── Order summary card ── */
.mc-order-summary {
    background: var(--color-card-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.mc-order-summary-inner {
    padding: var(--space-5);
}
.mc-order-summary-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.mc-order-summary-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}
.mc-order-summary-plan {
    background: var(--color-hover-bg);
    border-radius: var(--radius-input);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}
.mc-order-summary-plan-name {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-order-summary-plan-period {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
.mc-order-summary-lines {
    margin-bottom: var(--space-3);
}
.mc-order-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1-5) 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mc-order-summary-divider {
    height: 1px;
    background: var(--color-border);
    margin-bottom: var(--space-3);
}
.mc-order-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--weight-semibold);
}
.mc-order-summary-total-amount {
    font-size: var(--text-lg);
    color: var(--color-teal);
}

/* ── Payment method selection ── */
.mc-payment-method-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mc-payment-method-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}
.mc-payment-method-card:hover {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
}
.mc-payment-method-card.is-selected {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
}
.mc-payment-method-card--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.mc-payment-radio {
    display: none;
}
.mc-payment-method-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-input);
    background: var(--color-hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: background 0.15s, color 0.15s;
}
.mc-payment-method-card.is-selected .mc-payment-method-icon {
    background: var(--color-teal-light);
    color: var(--color-teal);
}
.mc-payment-method-info {
    flex: 1;
}
.mc-payment-method-title {
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.mc-payment-method-sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.mc-payment-method-gateway {
    margin-top: var(--space-1);
}
.mc-payment-method-check {
    color: var(--color-border-strong);
    font-size: 20px;
    flex-shrink: 0;
    transition: color 0.15s;
}
.mc-payment-method-card.is-selected .mc-payment-method-check {
    color: var(--color-teal);
}

/* ==========================================================================
   Timeline
   ========================================================================== */

.mc-timeline-list { display: flex; flex-direction: column; }
.mc-timeline-item { display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); transition: background 0.15s; }
.mc-timeline-item:last-child { border-bottom: none; }
.mc-timeline-item:hover { background: var(--color-hover-bg); }
.mc-timeline-dot { flex-shrink: 0; }
.mc-timeline-icon { width: 32px; height: 32px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; }
.mc-timeline-body { flex: 1; min-width: 0; }
.mc-timeline-message { font-size: var(--text-sm); color: var(--color-text); line-height: 1.5; margin-bottom: var(--space-1); }
.mc-timeline-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.mc-timeline-type { background: var(--color-hover-bg); padding: 1px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); }

/* ==========================================================================
   Import Wizard (popup multi-step)
   ========================================================================== */

/* Widen the modal whenever it contains the import wizard so the 4-step sidebar
   + body have breathing room. Default .mc-modal is 560px — too narrow once
   we added the Settings step. */
.mc-modal:has(.mc-import-wizard) {
    max-width: 960px;
}

.mc-import-wizard {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 480px;
}

.mc-import-sidebar {
    border-right: 1px solid var(--color-border);
    padding: var(--space-6) var(--space-4);
    background: var(--color-hover-bg);
    border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.mc-import-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mc-import-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-input);
    opacity: 0.5;
    transition: opacity 0.2s;
}

.mc-import-step.is-active {
    opacity: 1;
    background: var(--color-card-bg);
    box-shadow: var(--shadow-sm);
}

.mc-import-step.is-done {
    opacity: 0.8;
}

.mc-import-step.is-done .mc-import-step-icon {
    color: var(--color-teal);
}

.mc-import-step-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-teal-light);
    color: var(--color-teal);
}

/*
 * Il pallino del passo attivo, leggibile in ogni schema di colore.
 *
 * Era `background: var(--color-teal); color: var(--color-white)`, e
 * `--color-teal` cambia con lo schema dell'account: su uno chiaro il bianco
 * sopra sparisce, su uno scuro l'icona regge. `--color-text` sul fondo della
 * scheda invece e' la coppia che tiene in tutti e due i temi e in tutti e sette
 * gli schemi (CLAUDE.md §4).
 *
 * E i tondini d'accento dentro le icone sono dichiarati `fill: var(--color-teal)`
 * nell'SVG: su un pallino gia' teal erano teal su teal, cioe' invisibili. Qui
 * prendono il colore del tratto.
 */
.mc-import-step.is-active .mc-import-step-icon {
    background: var(--color-text);
    color: var(--color-card-bg);
}
.mc-import-step.is-active .mc-import-step-icon svg circle[fill],
.mc-import-step.is-active .mc-import-step-icon svg path[fill]:not([fill="none"]) {
    fill: currentColor;
}

.mc-import-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mc-import-step-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}

.mc-import-step-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
}

.mc-import-step-line {
    width: 2px;
    height: 16px;
    background: var(--color-border);
    margin-left: 25px;
    transition: background 0.2s;
}

.mc-import-step-line.is-done {
    background: var(--color-teal);
}

.mc-import-body {
    padding: var(--space-6);
    overflow-y: auto;
    max-height: 70vh;
}

.mc-import-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}

.mc-import-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
    line-height: 1.5;
}

.mc-import-desc a {
    color: var(--color-teal);
    font-weight: var(--weight-medium);
}

.mc-import-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* Dropzone */
.mc-dropzone {
    display: block;
    width: 100%;
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-card);
    padding: var(--space-10) var(--space-6);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: var(--space-4);
    background: var(--color-hover-bg);
}

.mc-dropzone:hover,
.mc-dropzone.dz-drag-hover {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
}

.mc-dropzone-done {
    opacity: 0.5;
    pointer-events: none;
}

.mc-dropzone-icon {
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.mc-dropzone-text {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    margin: 0 0 var(--space-1);
}

.mc-dropzone-hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* File info card */
.mc-import-file-info {
    margin-bottom: var(--space-4);
}

.mc-import-file-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-hover-bg);
    border-radius: var(--radius-input);
    border: 1px solid var(--color-border);
}

.mc-import-file-icon {
    color: var(--color-teal);
}

.mc-import-file-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mapping list */
.mc-import-mapping-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.mc-import-mapping-item {
    border-bottom: 1px solid var(--color-border);
}

.mc-import-mapping-item:last-child {
    border-bottom: none;
}

.mc-import-mapping-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
}

.mc-import-mapping-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.mc-import-mapping-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.mc-import-mapping-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-import-mapping-desc {
    font-size: var(--text-xs);
    color: var(--color-teal);
    font-weight: var(--weight-medium);
    background: var(--color-teal-light);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.mc-import-mapping-edit,
.mc-import-mapping-close {
    color: var(--color-text-muted);
    transition: color 0.15s;
}

.mc-import-mapping-edit:hover { color: var(--color-teal); }
.mc-import-mapping-close:hover { color: var(--color-error); }

.mc-import-mapping-options {
    padding: var(--space-3) var(--space-4) var(--space-4) calc(var(--space-4) + 28px);
    background: var(--color-hover-bg);
    border-top: 1px solid var(--color-border);
}

.mc-import-mapping-option {
    margin-bottom: var(--space-3);
}

.mc-import-mapping-option:last-child {
    margin-bottom: 0;
}

.mc-import-mapping-radio {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    cursor: pointer;
    margin-bottom: var(--space-2);
}

.mc-import-mapping-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
}

.mc-import-mapping-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.mc-import-mapping-controls .mc-form-input {
    max-width: 200px;
    font-size: var(--text-sm);
}

/* Progress area */
.mc-import-progress-area {
    margin-top: var(--space-4);
}

.mc-import-progress-bar-wrap .mc-progress {
    height: var(--space-3);
    margin-top: var(--space-2);
}

.mc-import-done-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.mc-import-progress-stats {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.mc-import-progress-stats span:last-child {
    font-weight: var(--weight-semibold);
    color: var(--color-teal);
}

.mc-import-progress-msg {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: var(--space-2);
}

/* ==========================================================================
   Import Wizard — Settings step (duplicate-handling)
   ========================================================================== */

.mc-import-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* Una riga che si vede ma non si tocca: e' la lista in cui l'importazione
   scrive, e toglierla non avrebbe nessun posto dove mettere i contatti. */
.mc-import-choice.is-locked {
    cursor: default;
    background: var(--color-subtle-bg);
    border-style: dashed;
}
.mc-import-choice-note {
    margin-left: auto;
    flex: 0 1 auto;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ── Passo «revisione» ─────────────────────────────────────────────────────
   Tre schede, una per passo, ognuna col suo modo di tornare indietro. */
.mc-import-review { display: flex; flex-direction: column; gap: var(--space-3); }
.mc-import-review-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}
.mc-import-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.mc-import-review-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-import-review-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.mc-import-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2-5);
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-text);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chiuse per difetto: la scelta sui duplicati ha gia' la risposta giusta per
   quasi tutti, e aprirla a chi non la cerca sposta l'attenzione dal riepilogo. */
.mc-import-advanced {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.mc-import-advanced-head {
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    list-style: none;
}
.mc-import-advanced-head::-webkit-details-marker { display: none; }
.mc-import-advanced-head::before {
    content: '\203A';
    display: inline-block;
    margin-right: var(--space-2);
    transition: transform var(--transition-base);
}
.mc-import-advanced[open] .mc-import-advanced-head::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
    .mc-import-advanced-head::before { transition: none; }
}

/* ── Passo «impostazioni»: liste in piu' ed etichette ──────────────────────
   Due blocchi sotto la scelta sui duplicati. Stessa gerarchia dei riquadri
   della procedura: titolo, una riga che dice a cosa serve, il comando. */
.mc-import-block {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.mc-import-block-title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-import-block-desc {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.mc-import-choices {
    display: grid;
    /* Senza `minmax(0, …)` una colonna si allarga quanto il nome piu' lungo di
       una lista e spinge fuori quella accanto (CLAUDE.md §4). */
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: var(--space-2);
}
.mc-import-choice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base);
}
.mc-import-choice:hover { border-color: var(--color-text-muted); background: var(--color-hover-bg); }
.mc-import-choice span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mc-import-taglist { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mc-import-taglist:not(:empty) { margin-bottom: var(--space-3); }
.mc-import-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2-5);
    /* Il testo sul fondo della scheda, non un colore d'accento: `--color-teal`
       cambia con lo schema dell'account e su «grigio» smette di segnalare. */
    background: var(--color-text);
    color: var(--color-card-bg);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
}
.mc-import-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: inherit;
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}
.mc-import-tag-remove:hover { opacity: 1; background: rgba(255,255,255,0.18); }
/* Un comando accanto a un campo e' alto quanto il campo: `.mc-btn` dichiara
   un'altezza fissa che batte lo `stretch` del contenitore (CLAUDE.md §4). */
.mc-import-tagadd { display: flex; align-items: stretch; gap: var(--space-2); }
.mc-import-tagadd .mc-form-input { flex: 1 1 auto; min-width: 0; }

.mc-import-settings-mode {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.mc-import-settings-mode:hover {
    background: var(--color-hover-bg);
}

.mc-import-settings-mode:has(input[type="radio"]:checked) {
    border-color: var(--color-teal);
    background: var(--color-teal-soft, rgba(0, 153, 153, 0.04));
}

.mc-import-settings-mode > input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.mc-import-settings-mode-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mc-import-settings-mode-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.mc-import-settings-mode-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.mc-import-settings-suboptions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-left: var(--space-8);
    padding: var(--space-2) 0;
}

.mc-import-settings-suboption {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-input);
    cursor: pointer;
}

.mc-import-settings-suboption:hover:not(.is-disabled) {
    background: var(--color-hover-bg);
}

.mc-import-settings-suboption.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mc-import-settings-suboption > input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.mc-import-settings-suboption-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mc-import-settings-suboption-label {
    font-size: var(--text-sm);
    color: var(--color-text);
}

.mc-import-settings-suboption-warn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Responsive: stack sidebar below on narrow viewports */
@media (max-width: 640px) {
    .mc-import-wizard {
        grid-template-columns: 1fr;
    }
    .mc-import-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        padding: var(--space-4);
    }
    .mc-import-steps {
        flex-direction: row;
        overflow-x: auto;
    }
    .mc-import-step-line {
        width: 16px;
        height: 2px;
        margin-left: 0;
        margin-top: 14px;
    }
    .mc-import-step-desc {
        display: none;
    }
}

/* ==========================================================================
   Import Landing Page — How it works, tips, history
   ========================================================================== */

.mc-import-how-it-works {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-4);
}

.mc-import-steps-horizontal {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.mc-import-step-card {
    flex: 1;
    text-align: center;
    padding: var(--space-4) var(--space-3);
    position: relative;
}

.mc-import-step-num {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    background: var(--color-teal);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.mc-import-step-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-teal-light);
    color: var(--color-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
    border: 2px solid var(--color-teal);
}

.mc-import-step-card-icon .material-symbols-rounded { font-size: 26px; }

.mc-import-step-card h4 {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-1);
}

.mc-import-step-card p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.mc-import-step-arrow {
    display: flex;
    align-items: center;
    padding-top: var(--space-6);
    color: var(--color-teal);
    opacity: 0.6;
}

.mc-import-step-arrow .material-symbols-rounded {
    font-size: 28px;
    font-weight: 600;
}

.mc-import-landing-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-4);
    align-items: start;
}

.mc-import-start-card {
    padding: var(--space-5) var(--space-6);
}

.mc-import-start-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.mc-import-start-icon-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-card);
    background: var(--color-teal-light);
    color: var(--color-teal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-import-start-icon-wrap .material-symbols-rounded { font-size: 24px; }

.mc-import-start-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.mc-import-sample-text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
}

.mc-import-sample-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-teal);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.mc-import-sample-inline .material-symbols-rounded {
    font-size: 16px;
}

.mc-import-sample-inline:hover {
    text-decoration: underline;
}

.mc-import-info-card {
    padding: var(--space-5);
}

.mc-import-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mc-import-tips-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.mc-import-tips-list li .material-symbols-rounded {
    font-size: 16px;
    color: var(--color-teal);
    flex-shrink: 0;
    margin-top: 2px;
}

.mc-import-capacity-bar {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.mc-import-capacity-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.mc-import-capacity-label strong {
    color: var(--color-text);
}

/* Import history */
.mc-import-history-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.mc-import-history-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.mc-import-history-item:last-child { border-bottom: none; }

.mc-import-history-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-import-history-icon .material-symbols-rounded { font-size: 18px; }
.mc-import-history-icon.is-done   { background: var(--color-success-light, #e8f5e9); color: var(--color-success); }
.mc-import-history-icon.is-failed { background: var(--color-error-light, #fbe9e7); color: var(--color-error); }
.mc-import-history-icon.is-running { background: var(--color-teal-light); color: var(--color-teal); }

.mc-import-history-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mc-import-history-date {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.mc-import-history-stats {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .mc-import-landing-grid {
        grid-template-columns: 1fr;
    }
    .mc-import-steps-horizontal {
        flex-direction: column;
    }
    .mc-import-step-arrow {
        transform: rotate(90deg);
        padding-top: 0;
        justify-content: center;
    }
}

/* ==========================================================================
   Vendor Icon — circular tinted badge for sending-server / integration cards.
   Per-vendor color is injected via the `--vendor-color` custom property:

       <div class="mc-vendor-icon" style="--vendor-color: var(--chart-2)">
           <span class="material-symbols-rounded">cloud</span>
       </div>

   Used by both the customer-facing /rui/sending/servers/select wizard and the
   admin /rui/admin/sending-servers/select popup so the visual identity stays
   in lock-step across surfaces. See `pages/sending/_type_meta.blade.php` for
   the canonical type→icon/color maps.
   ========================================================================== */

.mc-vendor-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--vendor-color, var(--chart-1)) 12%, transparent);
    color: var(--vendor-color, var(--chart-1));
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.mc-vendor-icon .material-symbols-rounded {
    font-size: 24px;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}

/* Small variant — 32px circle, 18px glyph. Fits table rows / list items
   where the 44px default would overwhelm the line height. */
.mc-vendor-icon-sm {
    width: 32px;
    height: 32px;
}
.mc-vendor-icon-sm .material-symbols-rounded {
    font-size: 18px;
}

/* Hover lift — only when nested inside a card that signals interactivity. */
.mc-popup-select-card:hover .mc-vendor-icon,
.mc-auto-trigger-card:hover .mc-vendor-icon {
    transform: scale(1.06);
}

/* ==========================================================================
   Detail Grid — generic 2-column page layout (form/main left + info rail right)
   Used by: subscriber create/edit, etc. The form column is capped at 640px for
   readability; the right rail stays a fixed 300px. Wrapper is centered in the
   1200px content area so left/right margins stay balanced. Tablet stretches
   the form column; mobile stacks vertically.
   ========================================================================== */

.mc-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 640px) 300px;
    gap: var(--space-5);
    align-items: start;
}

.mc-detail-grid > .mc-detail-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Tablet + mobile collapse to single column. The right rail (info / quota /
   tip cards) drops below the form — keeps the form at a comfortable reading
   width and prevents the 2-col grid from being clipped under the icon-rail
   sidebar nav at <1024 viewports. */
@media (max-width: 1023px) {
    .mc-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Export Landing Page — scope selector, data summary, info sidebar
   ========================================================================== */

.mc-export-landing-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-4);
    align-items: start;
}

.mc-export-main-card {
    padding: var(--space-5) var(--space-6);
}

.mc-export-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.mc-export-card-icon-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-card);
    background: var(--color-teal-light);
    color: var(--color-teal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-export-card-icon-wrap .material-symbols-rounded { font-size: 24px; }

.mc-export-data-summary {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--color-hover-bg);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
}

.mc-export-data-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
}

.mc-export-data-item .material-symbols-rounded {
    font-size: 24px;
    color: var(--color-teal);
}

.mc-export-data-item strong {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.2;
}

.mc-export-data-item span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mc-export-scope {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mc-export-scope-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.mc-export-scope-option:hover {
    border-color: var(--color-teal);
}

.mc-export-scope-option.is-selected {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
}

.mc-export-scope-option .mc-radio { margin: 0; }

.mc-export-scope-icon-light {
    flex-shrink: 0;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
}

.mc-export-scope-option.is-selected .mc-export-scope-icon-light {
    color: var(--color-teal);
}

.mc-export-scope-icon-light .material-symbols-rounded { font-size: 22px; }

.mc-export-scope-option strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.mc-export-scope-option span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Export processing */
.mc-export-processing-header {
    text-align: center;
    margin-bottom: var(--space-5);
}

.mc-export-spinner-wrap {
    margin-bottom: var(--space-3);
}

.mc-export-progress-area {
    padding: var(--space-4);
    background: var(--color-hover-bg);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
}

.mc-export-progress-stats {
    text-align: center;
    margin-bottom: var(--space-2);
}

.mc-export-progress-stats span {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-teal);
}

/* Export finish */
.mc-export-finish-header {
    text-align: center;
    margin-bottom: var(--space-5);
}

.mc-export-finish-icon {
    margin-bottom: var(--space-2);
}

.mc-export-finish-icon .material-symbols-rounded {
    font-size: 48px;
    color: var(--color-success);
}

.mc-export-finish-actions {
    display: flex;
    gap: var(--space-3);
}

/* Export info sidebar */
.mc-export-info-sidebar .mc-card {
    padding: var(--space-4) var(--space-5);
}

.mc-export-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mc-export-info-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.mc-export-info-list li .material-symbols-rounded {
    font-size: 16px;
    color: var(--color-teal);
    flex-shrink: 0;
    margin-top: 2px;
}

.mc-export-tips li .material-symbols-rounded {
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .mc-export-landing-grid {
        grid-template-columns: 1fr;
    }
    .mc-export-data-summary {
        flex-direction: column;
        gap: var(--space-3);
    }
}

/* ==========================================================================
   Welcome Slides — Onboarding tour overlay
   ========================================================================== */

.mc-welcome-slides {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.mc-welcome-slides.active {
    opacity: 1;
    pointer-events: auto;
}

.mc-welcome-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mc-welcome-card {
    position: relative;
    z-index: 1;
    width: calc(100% - var(--space-8));
    max-width: 580px;
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    transform: translateY(24px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mc-welcome-slides.active .mc-welcome-card {
    transform: translateY(0) scale(1);
}

/* Close button */
.mc-welcome-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mc-welcome-close:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

/* Slides track */
.mc-welcome-slides-track {
    position: relative;
    overflow: hidden;
    min-height: 380px;
}

/* Individual slide */
.mc-welcome-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8) var(--space-8) var(--space-4);
    opacity: 0;
    transform: translateX(0);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mc-welcome-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
}

/* Slide transition states */
.mc-welcome-slide.enter-right {
    opacity: 0;
    transform: translateX(60px);
}

.mc-welcome-slide.enter-left {
    opacity: 0;
    transform: translateX(-60px);
}

.mc-welcome-slide.exit-left {
    position: absolute;
    opacity: 0;
    transform: translateX(-60px);
}

.mc-welcome-slide.exit-right {
    position: absolute;
    opacity: 0;
    transform: translateX(60px);
}

/* Illustration area */
.mc-welcome-illustration {
    width: 180px;
    height: 180px;
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.mc-welcome-illustration svg {
    width: 140px;
    height: 140px;
}

.mc-welcome-illustration--teal   { background: var(--color-teal-light); }
.mc-welcome-illustration--blue   { background: var(--color-info-bg); }
.mc-welcome-illustration--green  { background: var(--color-success-bg); }
.mc-welcome-illustration--purple { background: var(--color-hover-bg); }
.mc-welcome-illustration--orange { background: var(--color-warning-bg); }
/* Il fondo del benvenuto di Mailpulse: la famiglia --color-pulse è l'unica
   che nessuno schema colore ridefinisce. */
.mc-welcome-illustration--pulse  { background: var(--color-pulse-light); }

/* Text */
.mc-welcome-text {
    text-align: center;
    max-width: 420px;
}

.mc-welcome-title {
    font-size: 22px;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
    line-height: 1.3;
}

.mc-welcome-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* Footer */
.mc-welcome-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6) var(--space-5);
    border-top: var(--space-px) solid var(--color-border);
}

/* Dots */
.mc-welcome-dots {
    display: flex;
    gap: var(--space-2);
}

.mc-welcome-dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-border-strong);
    cursor: pointer;
    padding: 0;
    transition: all 0.25s ease;
}

.mc-welcome-dot.active {
    width: var(--space-6);
    /* Inchiostro, non teal: su questo schema il teal è grigio, e il pallino
       che dice «sei qui» spariva fra gli altri. */
    background: var(--color-text);
    border-radius: var(--space-1);
}

/* Buttons */
.mc-welcome-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-welcome-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    font-family: var(--font-family);
    border-radius: var(--radius-input);
    cursor: pointer;
    border: var(--space-px) solid transparent;
    transition: all var(--transition-fast);
    line-height: 1;
    height: var(--space-9);
}

.mc-welcome-btn svg {
    width: 14px;
    height: 14px;
}

.mc-welcome-btn--skip {
    background: none;
    color: var(--color-text-muted);
}

.mc-welcome-btn--skip:hover {
    color: var(--color-text);
    background: var(--color-hover-bg);
}

.mc-welcome-btn--back {
    background: var(--color-card-bg);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.mc-welcome-btn--back:hover {
    background: var(--color-hover-bg);
}

.mc-welcome-btn--next {
    background: var(--cta-bg);
    color: var(--cta-ink);
}

.mc-welcome-btn--next:hover {
    background: var(--cta-bg-hover);
    color: var(--cta-ink);
}

/* Tour trigger icon in topbar */
.mc-topbar-tour-btn {
    position: relative;
}

/* ==========================================================================
   Welcome Slides — Dark mode
   ========================================================================== */

[data-theme="dark"] .mc-welcome-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .mc-welcome-card {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .mc-welcome-illustration--teal   { background: rgba(0, 124, 137, 0.15); }
[data-theme="dark"] .mc-welcome-illustration--blue   { background: rgba(21, 101, 192, 0.15); }
[data-theme="dark"] .mc-welcome-illustration--green  { background: rgba(46, 125, 50, 0.15); }
[data-theme="dark"] .mc-welcome-illustration--purple { background: rgba(156, 39, 176, 0.12); }
[data-theme="dark"] .mc-welcome-illustration--orange { background: rgba(230, 81, 0, 0.12); }
[data-theme="dark"] .mc-welcome-illustration--pulse  { background: var(--color-pulse-ring); }

/* ==========================================================================
   Welcome Slides — Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .mc-welcome-card {
        max-width: calc(100% - var(--space-4));
    }

    .mc-welcome-slide {
        padding: var(--space-6) var(--space-5) var(--space-3);
    }

    .mc-welcome-illustration {
        width: 140px;
        height: 140px;
    }

    .mc-welcome-illustration svg {
        width: 110px;
        height: 110px;
    }

    .mc-welcome-slides-track {
        min-height: 340px;
    }

    .mc-welcome-title {
        font-size: 18px;
    }

    .mc-welcome-desc {
        font-size: var(--text-sm);
    }

    .mc-welcome-footer {
        padding: var(--space-3) var(--space-4) var(--space-4);
    }
}

@media (max-width: 480px) {
    .mc-welcome-card {
        max-width: calc(100% - var(--space-3));
        border-radius: var(--radius-md);
    }

    .mc-welcome-slide {
        padding: var(--space-5) var(--space-4) var(--space-2);
    }

    .mc-welcome-illustration {
        width: 120px;
        height: 120px;
    }

    .mc-welcome-illustration svg {
        width: 90px;
        height: 90px;
    }

    .mc-welcome-slides-track {
        min-height: 320px;
    }

    .mc-welcome-title {
        font-size: 16px;
    }

    .mc-welcome-footer {
        flex-wrap: wrap;
        gap: var(--space-3);
        justify-content: center;
    }
}

/* ==========================================================================
   API Documentation
   ========================================================================== */

.api-docs-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-6);
    align-items: start;
}

/* Sidebar */
.api-docs-sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.api-docs-sidebar-inner {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-3);
}

.api-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
}

.api-nav-item:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}

.api-nav-item.active {
    background: var(--color-teal-bg, rgba(0, 124, 137, 0.08));
    color: var(--color-teal);
    font-weight: 500;
}

.api-nav-count {
    margin-left: auto;
    font-size: 11px;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.api-nav-item.active .api-nav-count {
    background: rgba(0, 124, 137, 0.15);
    color: var(--color-teal);
}

.api-nav-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-2) var(--space-3);
}

.api-nav-group-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    padding: var(--space-2) var(--space-3) var(--space-1);
}

/* Content */
.api-docs-content {
    min-width: 0;
}

.api-section {
    margin-bottom: var(--space-6);
}

.api-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border);
}

.api-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

/* Endpoint Cards */
.api-endpoint-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.api-endpoint-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.api-endpoint-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.api-endpoint-summary {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    user-select: none;
}

.api-endpoint-method {
    flex-shrink: 0;
}

.api-endpoint-uri code {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    background: none;
    padding: 0;
}

.api-endpoint-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.api-endpoint-chevron {
    font-size: 20px;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}

.api-endpoint-card.is-open .api-endpoint-chevron {
    transform: rotate(180deg);
}

/* Endpoint Detail (collapsed by default) */
.api-endpoint-detail {
    display: none;
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
}

.api-endpoint-card.is-open .api-endpoint-detail {
    display: block;
}

.api-detail-section {
    padding-top: var(--space-4);
}

.api-detail-section + .api-detail-section {
    border-top: 1px dashed var(--color-border);
    margin-top: var(--space-4);
}

.api-detail-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}

.api-param-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-hover-bg);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Code wrapper with copy button */
.api-code-wrapper {
    position: relative;
}

.api-copy-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-input);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 1;
}

.api-copy-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Base URL display */
.api-base-url {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-hover-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: var(--space-2) var(--space-3);
}

.api-base-url code {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-teal);
    background: none;
    padding: 0;
}

.api-copy-btn-inline {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
}

.api-copy-btn-inline:hover {
    color: var(--color-text);
    background: var(--color-hover-bg);
}

/* Getting started blocks */
.api-getting-started-block {
    padding: var(--space-4) 0;
}

.api-getting-started-block + .api-getting-started-block {
    border-top: 1px dashed var(--color-border);
}

/* Auth methods */
.api-auth-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.api-auth-method-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

/* Responsive */
@media (max-width: 900px) {
    .api-docs-layout {
        grid-template-columns: 1fr;
    }

    .api-docs-sidebar {
        position: static;
        max-height: none;
    }

    .api-docs-sidebar-inner {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);
        padding: var(--space-2);
    }

    .api-nav-divider,
    .api-nav-group-label {
        display: none;
    }

    .api-nav-item {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-xs);
    }

    .api-endpoint-summary {
        grid-template-columns: auto 1fr auto;
    }

    .api-endpoint-desc {
        display: none;
    }
}

@media (max-width: 600px) {
    .api-endpoint-summary {
        grid-template-columns: auto 1fr auto;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }

    .api-endpoint-uri code {
        font-size: var(--text-xs);
        word-break: break-all;
    }

    .api-base-url code {
        font-size: var(--text-sm);
    }

    .api-endpoint-detail {
        padding: 0 var(--space-3) var(--space-3);
    }

    .mc-code-block {
        font-size: 11px;
    }

    .api-getting-started-block .mc-code-block {
        word-break: break-all;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile UX — Global mobile fixes (≤767px only)
   All rules here ONLY affect mobile. No desktop/tablet changes.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* --- mc-table: Card layout on mobile --- */
    .mc-table-mobile-cards thead { display: none; }
    .mc-table-mobile-cards tbody { display: flex; flex-direction: column; gap: var(--space-2); }
    .mc-table-mobile-cards { width: 100%; max-width: 100%; table-layout: fixed; }
    .mc-table-mobile-cards tr {
        display: flex;
        flex-direction: column;
        background: var(--color-card-bg);
        border: var(--space-px) solid var(--color-border);
        border-radius: var(--radius-card);
        padding: var(--space-3);
        gap: var(--space-1);
        max-width: 100%;
        box-sizing: border-box;
    }
    .mc-table-mobile-cards td {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        padding: var(--space-1) 0;
        border: none;
    }
    .mc-table-mobile-cards td::before {
        content: attr(data-label);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 100px;
        flex-shrink: 0;
    }
    .mc-table-mobile-cards td:empty { display: none; }

    /* Mobile card: first td (usually name/title) gets emphasis */
    .mc-table-mobile-cards td.mc-mobile-title {
        font-size: var(--text-base);
        font-weight: var(--weight-semibold);
        color: var(--color-text);
        padding-bottom: var(--space-1);
        border-bottom: var(--space-px) solid var(--color-border);
        margin-bottom: var(--space-1);
    }
    .mc-table-mobile-cards td.mc-mobile-title::before { display: none; }

    /* Mobile card: action row */
    .mc-table-mobile-cards td.mc-mobile-actions {
        display: flex;
        gap: var(--space-2);
        padding-top: var(--space-2);
        border-top: var(--space-px) solid var(--color-border);
        margin-top: var(--space-1);
        flex-wrap: wrap;
    }
    .mc-table-mobile-cards td.mc-mobile-actions::before { display: none; }

    /* Mobile card: hide checkbox column */
    .mc-table-mobile-cards td.mc-mobile-check { display: none; }

    /* Mobile card: stats row — show delivered/opens/clicks inline */
    .mc-table-mobile-cards td[data-label]::before {
        min-width: 70px;
    }

    /* Mobile card: ring charts smaller */
    .mc-table-mobile-cards .mc-ring { width: 24px; height: 24px; }

    /* Mobile card: button group full-width */
    .mc-table-mobile-cards .mc-btn-group { width: 100%; }
    .mc-table-mobile-cards .mc-btn-group-main { flex: 1; justify-content: center; }

    /* --- mc-card-table: horizontal scroll indicator shadow --- */
    .mc-card-table {
        position: relative;
    }
    .mc-card-table::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--space-6);
        background: linear-gradient(to left, var(--color-card-bg) 0%, transparent 100%);
        pointer-events: none;
        opacity: 0.8;
    }

    /* --- mc-filter-bar: stack search + filters vertically --- */
    .mc-filter-bar,
    .mc-list-header {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .mc-filter-search,
    .mc-list-search {
        width: 100%;
        max-width: none;
    }

    /* --- mc-stat-grid: 2-column on mobile --- */
    .mc-stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
        margin-bottom: var(--space-6);
    }

    /* --- mc-banner: reduce padding on mobile --- */
    .mc-banner-content { padding: var(--space-4); }

    /* --- mc-settings-layout: ensure content padding reduced --- */
    .mc-settings-content { padding: var(--space-4); }

    /* --- Two-column content layouts: single column --- */
    .mc-two-col,
    .mc-grid-2 {
        grid-template-columns: 1fr;
    }

    /* --- Dropdowns in tables: fixed position to escape overflow --- */
    .mc-card-table .mc-dropdown-menu,
    .mc-table .mc-dropdown-menu {
        position: fixed;
        top: auto;
        right: var(--space-3);
        min-width: 200px;
        z-index: var(--z-dropdown);
    }

    /* --- mc-card: reduce padding on mobile --- */
    .mc-card { border-radius: var(--radius-input); }
    .mc-card-body { padding: var(--space-4); }
    .mc-card-header { padding: var(--space-3) var(--space-4); }

    /* --- Modals / Side panels: already full-width via side-panel.css --- */

    .mc-form-actions {
        position: sticky;
        bottom: 0;
        background: var(--color-card-bg);
        padding: var(--space-3) var(--space-4);
        margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1);
        border-top: var(--space-px) solid var(--color-border);
        z-index: 5;
    }

    /* --- mc-empty-state: smaller on mobile --- */
    .mc-empty-state .material-symbols-rounded { font-size: 48px; }
    .mc-empty-state h3 { font-size: var(--text-lg); }
}

/* ----------------------------------------------------------------
   mc-form-list — List view for forms (row-based with thumbnails)
   ---------------------------------------------------------------- */
.mc-form-list {
    display: flex;
    flex-direction: column;
}

.mc-form-list-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    transition: background 0.1s;
}

.mc-form-list-row:last-child { border-bottom: none; }
.mc-form-list-row:hover { background: var(--color-hover-bg); }

.mc-form-list-check { flex-shrink: 0; }

.mc-form-list-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 54px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-hover-bg);
    border: 1px solid var(--color-border);
    display: block;
}

.mc-form-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.mc-form-list-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-text-disabled);
}

.mc-form-list-thumb-placeholder .material-symbols-rounded { font-size: 28px; }

.mc-form-list-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mc-form-list-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-form-list-name {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-form-list-name:hover { color: var(--color-teal); }

.mc-form-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.mc-form-list-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.mc-form-list-meta-item .material-symbols-rounded { font-size: 16px; }

.mc-form-list-meta-connected {
    color: var(--color-teal);
}

.mc-form-list-meta-disconnected {
    color: var(--color-text-disabled);
    font-style: italic;
}

.mc-form-grid-meta-connected {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--color-teal);
    font-size: var(--text-xs);
}

.mc-form-grid-meta-connected .material-symbols-rounded { font-size: 14px; }

.mc-form-grid-meta-disconnected {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--color-text-disabled);
    font-size: var(--text-xs);
    font-style: italic;
}

.mc-form-grid-meta-disconnected .material-symbols-rounded { font-size: 14px; }

.mc-form-list-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-form-list-edit-btn {
    white-space: nowrap;
}

/* ----------------------------------------------------------------
   mc-form-grid — Grid/card view for forms (thumbnail gallery)
   ---------------------------------------------------------------- */
.mc-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
}

@media (max-width: 1100px) { .mc-form-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .mc-form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mc-form-grid { grid-template-columns: 1fr; } }

.mc-form-grid-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--color-card-bg);
    display: flex;
    flex-direction: column;
}

.mc-form-grid-card:hover {
    border-color: var(--color-teal);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.mc-form-grid-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 3;
    background: var(--color-hover-bg);
    overflow: hidden;
    display: block;
}

.mc-form-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.mc-form-grid-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-text-disabled);
}

.mc-form-grid-thumb-placeholder .material-symbols-rounded { font-size: 48px; }

.mc-form-grid-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    opacity: 0;
    transition: opacity 0.2s;
}

.mc-form-grid-card:hover .mc-form-grid-overlay { opacity: 1; }

.mc-form-grid-info {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: relative;
}

.mc-form-grid-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.mc-form-grid-name:hover { color: var(--color-teal); }

.mc-form-grid-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mc-form-grid-meta .material-symbols-rounded { font-size: 14px; }

.mc-form-grid-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mc-form-grid-actions {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
}

/* ----------------------------------------------------------------
   mc-form-list — Mobile responsive
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
    .mc-form-list-row {
        flex-wrap: wrap;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }

    .mc-form-list-thumb {
        width: 56px;
        height: 42px;
    }

    .mc-form-list-edit-btn { display: none; }

    .mc-form-list-meta {
        gap: var(--space-2);
    }

    .mc-form-list-meta-item { font-size: var(--text-xs); }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile UX — Extra small screens (≤375px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 375px) {
    .mc-stat-grid { grid-template-columns: 1fr; }

    .mc-color-scheme-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Mask Loading — Fullscreen overlay (automation actions)
   ═══════════════════════════════════════════════════════════════ */

.mc-mask-loading {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.mc-mask-loading.active { opacity: 1; }
.mc-mask-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.mc-mask-loading-text {
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 500;
}

[data-theme="dark"] .mc-mask-loading {
    background: rgba(0, 0, 0, 0.55);
}

/* ═══════════════════════════════════════════════════════════════
   Box Skeleton Loading — McBox inline content loader
   ═══════════════════════════════════════════════════════════════ */

.mc-box-loading {
    position: relative;
    min-height: 80px;
}
.mc-box-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
    padding: var(--space-4);
}
.mc-skeleton-line {
    height: 12px;
    border-radius: var(--radius-sm);
    background: var(--color-border);
    animation: mc-skeleton-pulse 1.5s ease-in-out infinite;
}
.mc-skeleton-line-lg { width: 85%; height: 14px; }
.mc-skeleton-line-md { width: 65%; }
.mc-skeleton-line-sm { width: 40%; }

@keyframes mc-skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════
   ADS COMPONENTS — Phase A-M Ads Campaign Module (2026-04-11)
   Docs: docs/ui-refactor/UI.md
   Showcase: /rui/ui section #ads-components
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. mc-wizard-steps ─────────────────────────────────────────
   Generic multi-step wizard indicator. Used in ads campaign wizard
   + any future multi-step flow. Different from mc-sub-wizard-steps
   which is specific to subscription checkout.
   ─────────────────────────────────────────────────────────────── */
.mc-wizard-steps {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3) 0;
}
.mc-wizard-steps .mc-wizard-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-input);
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.mc-wizard-steps .mc-wizard-step.is-active {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: #fff;
    box-shadow: 0 0 0 3px var(--color-teal-ring);
}
.mc-wizard-steps .mc-wizard-step.is-done {
    background: var(--color-success-bg);
    border-color: var(--color-border);
}
/* L108 fix — when a step is BOTH `is-active` AND `is-done` (= current step is
   the final celebration step), the `is-done` rule was clobbering `is-active`'s
   white text on top of a light bg, resulting in white-on-light contrast
   failure. Explicit rule pins this combo to a solid-green active-success state. */
.mc-wizard-steps .mc-wizard-step.is-active.is-done {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 25%, transparent);
}
.mc-wizard-steps .mc-wizard-step.is-active.is-done .mc-wizard-step-number,
.mc-wizard-steps .mc-wizard-step.is-active.is-done .mc-wizard-step__num {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.mc-wizard-step-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    flex-shrink: 0;
}
.mc-wizard-steps .mc-wizard-step.is-active .mc-wizard-step-number {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.mc-wizard-steps .mc-wizard-step.is-done .mc-wizard-step-number {
    background: var(--color-success);
    color: #fff;
}
.mc-wizard-step-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}
.mc-wizard-step-connector {
    flex: 0 0 20px;
    height: 2px;
    background: var(--color-border);
    border-radius: 1px;
}
.mc-wizard-step-connector.is-done {
    background: var(--color-success);
}
/* mobile: wrap wizard steps, hide labels */
@media (max-width: 767px) {
    .mc-wizard-steps { gap: var(--space-1-5); }
    .mc-wizard-steps .mc-wizard-step { padding: var(--space-1-5) var(--space-2); }
    .mc-wizard-step-label { display: none; }
    .mc-wizard-steps .mc-wizard-step.is-active .mc-wizard-step-label { display: inline; font-size: var(--text-xs); }
    .mc-wizard-step-connector { flex-basis: 8px; }
}

/* ── 2. mc-ads-pipeline ─────────────────────────────────────────
   Horizontal status pipeline showing campaign lifecycle:
   draft → review → active → completed. Current stage highlighted.
   ─────────────────────────────────────────────────────────────── */
.mc-ads-pipeline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.mc-ads-pipeline-stage {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s;
}
.mc-ads-pipeline-stage.is-done {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success-dark);
}
.mc-ads-pipeline-stage.is-done::before {
    content: '✓';
    font-weight: var(--weight-bold);
    color: var(--color-success);
}
.mc-ads-pipeline-stage.is-current {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: #fff;
    font-weight: var(--weight-semibold);
    box-shadow: 0 0 0 4px var(--color-teal-ring);
    transform: scale(1.05);
}
.mc-ads-pipeline-arrow {
    color: var(--color-border-strong);
    font-size: var(--text-md);
    flex-shrink: 0;
    user-select: none;
}
.mc-ads-pipeline-arrow.is-done {
    color: var(--color-success);
}
@media (max-width: 767px) {
    .mc-ads-pipeline { padding: var(--space-3) 0; }
    .mc-ads-pipeline-stage { padding: var(--space-1-5) var(--space-3); font-size: var(--text-xs); }
}

/* ── 3. mc-ads-device-mockup ────────────────────────────────────
   Frame showing ad preview inside a phone/desktop mockup.
   Supports `mc-ads-device-mockup--phone` and `--desktop` variants.
   ─────────────────────────────────────────────────────────────── */
.mc-ads-device-mockup {
    display: inline-block;
    padding: var(--space-3);
    background: #222;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    position: relative;
}
.mc-ads-device-mockup--phone {
    width: 280px;
    border-radius: 28px;
    padding: 48px var(--space-2) var(--space-4);
}
.mc-ads-device-mockup--phone::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 18px;
    background: #000;
    border-radius: 10px;
}
.mc-ads-device-mockup--desktop {
    width: 480px;
    border-radius: 12px 12px 6px 6px;
    padding: var(--space-3) var(--space-3) var(--space-6);
}
.mc-ads-device-mockup--desktop::before {
    content: '';
    display: block;
    height: 12px;
    background: #333;
    border-radius: 6px 6px 0 0;
    margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-2);
    background-image: radial-gradient(circle at 10px 6px, #ff5f57 3px, transparent 3.5px),
        radial-gradient(circle at 24px 6px, #febc2e 3px, transparent 3.5px),
        radial-gradient(circle at 38px 6px, #28c840 3px, transparent 3.5px);
}
.mc-ads-device-screen {
    background: var(--color-card-bg);
    border-radius: 14px;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    flex-direction: column;
}
.mc-ads-device-mockup--desktop .mc-ads-device-screen {
    border-radius: 4px;
    min-height: 280px;
}
@media (max-width: 767px) {
    .mc-ads-device-mockup--phone { width: 240px; }
    .mc-ads-device-mockup--desktop { width: 100%; max-width: 400px; }
}

/* ── 4. mc-ads-spend-counter ────────────────────────────────────
   Large animated spend counter with currency + sparkline slot.
   ─────────────────────────────────────────────────────────────── */
.mc-ads-spend-counter {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border-radius: var(--radius-card, 8px);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}
.mc-ads-spend-counter-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
}
.mc-ads-spend-counter-value {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    font-size: var(--text-3xl);
    font-weight: var(--weight-black);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.mc-ads-spend-counter-currency {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}
.mc-ads-spend-counter-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--space-0-5) var(--space-2);
    border-radius: 999px;
    background: var(--color-success-bg);
    color: var(--color-success-dark);
    width: fit-content;
}
.mc-ads-spend-counter-delta.is-negative {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
}
.mc-ads-spend-counter-sparkline {
    margin-top: var(--space-2);
    height: 40px;
    width: 100%;
}
@media (max-width: 767px) {
    .mc-ads-spend-counter { padding: var(--space-4); }
    .mc-ads-spend-counter-value { font-size: var(--text-2xl); }
}

/* ── 5. mc-ads-race-chart ───────────────────────────────────────
   Horizontal race bars for A/B variant comparison.
   Uses --chart-N tokens for variant colors.
   ─────────────────────────────────────────────────────────────── */
.mc-ads-race-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}
.mc-ads-race-row {
    display: grid;
    grid-template-columns: 120px 1fr 80px;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
}
.mc-ads-race-label {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.mc-ads-race-label-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mc-ads-race-track {
    height: 28px;
    background: var(--color-subtle-bg);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.mc-ads-race-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(.2,.8,.2,1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--space-3);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    min-width: 2px;
}
.mc-ads-race-value {
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    text-align: right;
}
.mc-ads-race-row.is-winner .mc-ads-race-label::after {
    content: '★';
    color: var(--chart-4);
    font-size: var(--text-md);
}
@media (max-width: 767px) {
    .mc-ads-race-row { grid-template-columns: 80px 1fr 60px; gap: var(--space-2); font-size: var(--text-xs); }
    .mc-ads-race-track { height: 22px; }
}

/* ── 6. mc-ads-flow-node ────────────────────────────────────────
   Trigger → Condition → Action nodes for automation builder.
   Connects via mc-ads-flow-arrow between nodes.
   ─────────────────────────────────────────────────────────────── */
.mc-ads-flow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-4);
}
.mc-ads-flow-node {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card, 8px);
    background: var(--color-card-bg);
    border: 2px solid var(--color-border);
    min-width: 140px;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s, transform 0.15s;
}
.mc-ads-flow-node:hover {
    transform: translateY(-1px);
}
.mc-ads-flow-node--trigger {
    border-color: var(--chart-1);
    background: color-mix(in srgb, var(--chart-1) 8%, var(--color-card-bg));
}
.mc-ads-flow-node--condition {
    border-color: var(--chart-4);
    background: color-mix(in srgb, var(--chart-4) 8%, var(--color-card-bg));
}
.mc-ads-flow-node--action {
    border-color: var(--chart-2);
    background: color-mix(in srgb, var(--chart-2) 8%, var(--color-card-bg));
}
.mc-ads-flow-node-type {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
}
.mc-ads-flow-node-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}
.mc-ads-flow-node-icon {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-card-bg);
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.mc-ads-flow-node--trigger .mc-ads-flow-node-icon { color: var(--chart-1); }
.mc-ads-flow-node--condition .mc-ads-flow-node-icon { color: var(--chart-4); }
.mc-ads-flow-node--action .mc-ads-flow-node-icon { color: var(--chart-2); }
.mc-ads-flow-arrow {
    flex-shrink: 0;
    color: var(--color-border-strong);
    font-size: var(--text-xl);
    user-select: none;
}
@media (max-width: 767px) {
    .mc-ads-flow { flex-direction: column; align-items: stretch; }
    .mc-ads-flow-node { min-width: 0; }
    .mc-ads-flow-arrow { transform: rotate(90deg); align-self: center; }
}

/* ── 7. mc-ads-field-mapper ─────────────────────────────────────
   Two-column field mapping with visual connectors.
   Used in lead form sync (platform fields ↔ subscriber fields).
   ─────────────────────────────────────────────────────────────── */
.mc-ads-field-mapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
}
.mc-ads-field-mapper-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-ads-field-mapper-header {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
}
.mc-ads-field-mapper-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    transition: border-color 0.15s, background 0.15s;
}
.mc-ads-field-mapper-item.is-mapped {
    background: color-mix(in srgb, var(--color-teal) 6%, var(--color-card-bg));
    border-color: var(--color-teal);
}
.mc-ads-field-mapper-item .mc-ads-field-mapper-icon {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.mc-ads-field-mapper-connectors {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: var(--space-4) 0;
    position: relative;
}
.mc-ads-field-mapper-connector {
    width: 40px;
    height: 2px;
    background: var(--color-border-strong);
    position: relative;
}
.mc-ads-field-mapper-connector.is-mapped {
    background: var(--color-teal);
}
.mc-ads-field-mapper-connector::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border-strong);
    transform: translateY(-50%);
}
.mc-ads-field-mapper-connector.is-mapped::before {
    background: var(--color-teal);
}
.mc-ads-field-mapper-connector::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border-strong);
    transform: translateY(-50%);
}
.mc-ads-field-mapper-connector.is-mapped::after {
    background: var(--color-teal);
}
@media (max-width: 767px) {
    .mc-ads-field-mapper {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    .mc-ads-field-mapper-connectors {
        flex-direction: row;
        padding: var(--space-2) 0;
    }
    .mc-ads-field-mapper-connector {
        width: 2px;
        height: 30px;
    }
}

/* End ads components */

/* ═══════════════════════════════════════════════════════════════
   Common table cell helpers — used widely across listings
   Added: 2026-04-11 to formalize patterns used in 25+ _list views
   ═══════════════════════════════════════════════════════════════ */

/* Table cell main link — primary entity name in a list row */
.mc-table-link {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: color 0.15s;
}
.mc-table-link:hover {
    color: var(--color-teal);
}

/* Badge group — multiple badges in a single cell */
.mc-badge-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════
   Platform connection cards — used by Ads / integrations pages
   ═══════════════════════════════════════════════════════════════ */
.mc-platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}
.mc-platform-card {
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mc-platform-card:hover {
    border-color: var(--color-teal);
}
.mc-platform-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.mc-platform-card-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-platform-card-logo .material-symbols-rounded {
    font-size: 28px;
    color: var(--color-text);
}
.mc-platform-card-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.mc-platform-card-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-platform-card-title .mc-badge {
    align-self: flex-start;
}
.mc-platform-card-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.mc-platform-card-meta > div {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-platform-card-meta .material-symbols-rounded {
    font-size: 16px;
}
.mc-platform-card-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.mc-platform-card-actions .mc-btn {
    flex: 1;
    min-width: 0;
}
.mc-platform-card--connect,
.mc-platform-card--locked {
    text-decoration: none;
    color: inherit;
    border: 1px dashed var(--color-border);
    display: flex;
}
.mc-platform-card--connect:hover {
    border-color: var(--color-teal);
    border-style: solid;
}
.mc-platform-card--locked {
    opacity: 0.65;
    cursor: not-allowed;
}
.mc-platform-card--connect-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-6);
    width: 100%;
}
.mc-platform-card--connect-icon {
    font-size: 40px !important;
    color: var(--color-teal);
}
.mc-platform-card--locked .mc-platform-card--connect-icon {
    color: var(--color-text-muted);
}
.mc-platform-card--connect-label {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-platform-card--connect-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Adoption bar — admin ads dashboard */
.mc-adoption-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.mc-adoption-percent {
    font-size: 2.25rem;
    font-weight: var(--weight-bold);
    color: var(--color-teal);
    flex-shrink: 0;
}
.mc-adoption-body {
    flex: 1;
    min-width: 0;
}
.mc-adoption-label {
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text);
}
.mc-stat-meta-faint {
    opacity: 0.7;
    font-size: var(--text-xs);
}
.mc-platform-status {
    margin-top: var(--space-2);
    margin-bottom: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════
   Settings Wizard — tabbed multi-step settings wizard
   Distinct from:
     - mc-wizard-*          (compact pill stepper, ads campaign flow, line 9442)
     - mc-setup-steps       (horizontal icon flow for websites, line 2950)
     - mc-setup-checklist   (sidebar onboarding checklist, list overview, line 4505)
   Used by: admin/ads/settings.blade.php
   ═══════════════════════════════════════════════════════════════ */
.mc-settings-wizard-steps {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}
.mc-settings-wizard-step {
    flex: 1;
    min-width: 140px;
    padding: var(--space-3);
    background: var(--color-hover-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    user-select: none;
}
.mc-settings-wizard-step:hover {
    background: var(--color-teal-light);
    border-color: var(--color-teal);
}
.mc-settings-wizard-step.is-active {
    background: var(--color-teal);
    color: var(--color-white);
    border-color: var(--color-teal);
}
.mc-settings-wizard-step.is-active .mc-settings-wizard-step-status {
    color: rgba(255, 255, 255, 0.85);
}
.mc-settings-wizard-step-number {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    opacity: 0.8;
}
.mc-settings-wizard-step-title {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin: var(--space-1) 0;
}
.mc-settings-wizard-step-status {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-settings-wizard-panel {
    display: none;
}
.mc-settings-wizard-panel.is-active {
    display: block;
}
.mc-settings-wizard-docs {
    background: var(--color-hover-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.mc-settings-wizard-docs ol {
    margin: var(--space-2) 0 var(--space-2) var(--space-4);
    padding: 0;
}
.mc-settings-wizard-docs li {
    margin-bottom: var(--space-2);
    line-height: 1.6;
}
.mc-settings-wizard-test {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-hover-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-input);
}
.mc-settings-wizard-test-result {
    flex: 1;
    font-size: var(--text-sm);
}
.mc-settings-wizard-test-result.is-success { color: var(--color-success); }
.mc-settings-wizard-test-result.is-error { color: var(--color-error); }
.mc-settings-wizard-test-result.is-warning { color: var(--color-warning); }
.mc-settings-wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.mc-settings-wizard-nav-actions {
    display: flex;
    gap: var(--space-3);
}
.mc-settings-wizard-review-banner {
    display: none;
    margin-top: var(--space-3);
}
.mc-settings-wizard-review-banner.is-visible {
    display: block;
}
.mc-settings-wizard-intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.mc-settings-wizard-intro-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
}
.mc-settings-wizard-intro-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.mc-settings-wizard-intro-card-source {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Detail table — key/value layout for entity overview pages */
.mc-table--detail td:first-child {
    font-weight: var(--weight-semibold);
    width: 180px;
    color: var(--color-text);
}
.mc-table--detail .mc-detail-muted {
    color: var(--color-text-muted);
}
@media (max-width: 767px) {
    .mc-table--detail td:first-child {
        width: auto;
    }
}

/* Empty state inside card — for logs / timelines */
.mc-card-empty {
    text-align: center;
    padding: var(--space-6);
    color: var(--color-text-muted);
}
.mc-card-empty .material-symbols-rounded {
    font-size: 32px;
    opacity: 0.5;
    display: block;
    margin-bottom: var(--space-2);
}

/* Card header with actions (title + action button in a row) */
.mc-card-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}
.mc-card-header-actions h3 {
    margin: 0;
}

/* Error line under status in list/table row */
.mc-table-error-line {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════
   Choice grid — icon + label radio cards in a grid
   Used for campaign objective picker, template style picker, etc.
   ═══════════════════════════════════════════════════════════════ */
.mc-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-4);
}
@media (max-width: 767px) {
    .mc-choice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.mc-choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.mc-choice-card:hover {
    border-color: var(--color-teal);
    transform: translateY(-1px);
}
.mc-choice-card-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mc-choice-card:has(.mc-choice-card-input:checked) {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-ring);
}
.mc-choice-card-icon {
    font-size: 32px !important;
    color: var(--color-teal);
    display: block;
    margin-bottom: var(--space-2);
}
.mc-choice-card-label {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

/* Two-column form grid used inside wizards */
.mc-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 767px) {
    .mc-form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Onboarding card — welcome / empty state with numbered checklist
   ═══════════════════════════════════════════════════════════════ */
.mc-onboarding-card {
    max-width: 640px;
    margin: var(--space-10) auto;
    text-align: center;
}
.mc-onboarding-card .mc-card-body {
    padding: var(--space-10);
}
.mc-onboarding-illustration {
    margin-bottom: var(--space-6);
}
.mc-onboarding-title {
    margin-bottom: var(--space-2);
    font-size: var(--text-2xl);
    color: var(--color-text);
}
.mc-onboarding-desc {
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    font-size: var(--text-base);
}
.mc-onboarding-steps {
    text-align: left;
    margin-bottom: var(--space-8);
}
.mc-onboarding-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.mc-onboarding-step:last-child {
    margin-bottom: 0;
}
.mc-onboarding-step.is-pending {
    opacity: 0.5;
}
.mc-onboarding-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    flex-shrink: 0;
}
.mc-onboarding-step.is-pending .mc-onboarding-step-number {
    background: var(--color-border);
    color: var(--color-text-muted);
}
.mc-onboarding-step-title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-base);
    color: var(--color-text);
}
.mc-onboarding-step.is-pending .mc-onboarding-step-title {
    color: var(--color-text-muted);
}
.mc-onboarding-step-desc {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.mc-onboarding-step-actions {
    margin-top: var(--space-3);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.mc-onboarding-skip {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: underline;
}

/* Inline monospace code — for IDs, form IDs, pixel IDs in table rows */
.mc-code-inline {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-hover-bg);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* Primary and secondary info lines in a table cell */
.mc-cell-primary {
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.mc-cell-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
.mc-cell-sub-warning {
    color: var(--color-warning);
}

/* Fixed-width table columns — reusable helpers */
.mc-col-w-sm { width: 100px; }
.mc-col-w-status { width: 80px; }
.mc-col-w-time { width: 140px; }

/* ═══════════════════════════════════════════════════════════════
   Dashboard components — mc-dash-*
   Reusable across customer + admin dashboards (Ads + future).
   ═══════════════════════════════════════════════════════════════ */

/* Period tabs in page-actions */
.mc-dash-period-tabs {
    display: inline-flex;
    background: var(--color-hover-bg);
    border-radius: var(--radius-input);
    padding: var(--space-0-5);
    gap: var(--space-0-5);
}
.mc-dash-period-tab {
    padding: var(--space-1-5) var(--space-3);
    border-radius: calc(var(--radius-input) - 2px);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.mc-dash-period-tab:hover {
    color: var(--color-text);
}
.mc-dash-period-tab.is-active {
    background: var(--color-card-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
}

/* 4-column big metric cards with sparkline + delta */
.mc-dash-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 1024px) {
    .mc-dash-metric-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .mc-dash-metric-grid { grid-template-columns: 1fr; }
}
.mc-dash-metric-card {
    position: relative;
    padding: var(--space-5);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow: hidden;
}
.mc-dash-metric-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}
.mc-dash-metric-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-dash-metric-icon .material-symbols-rounded {
    font-size: 22px;
}
.mc-dash-metric-icon-teal {
    background: var(--color-teal-light);
    color: var(--color-teal);
}
.mc-dash-metric-icon-green {
    background: color-mix(in srgb, var(--illust-chart-2, #10b981) 15%, transparent);
    color: var(--illust-chart-2, #10b981);
}
.mc-dash-metric-icon-blue {
    background: color-mix(in srgb, var(--illust-chart-3, #3b82f6) 15%, transparent);
    color: var(--illust-chart-3, #3b82f6);
}
.mc-dash-metric-icon-orange {
    background: color-mix(in srgb, var(--illust-chart-4, #f59e0b) 15%, transparent);
    color: var(--illust-chart-4, #f59e0b);
}
.mc-dash-metric-spark {
    opacity: 0.85;
}
.mc-dash-metric-spark-fill { opacity: 0.18; }
.mc-dash-metric-spark-fill-teal { fill: var(--color-teal); }
.mc-dash-metric-spark-fill-green { fill: var(--illust-chart-2, #10b981); }
.mc-dash-metric-spark-fill-blue { fill: var(--illust-chart-3, #3b82f6); }
.mc-dash-metric-spark-fill-orange { fill: var(--illust-chart-4, #f59e0b); }
.mc-dash-metric-spark-line { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc-dash-metric-spark-line-teal { stroke: var(--color-teal); }
.mc-dash-metric-spark-line-green { stroke: var(--illust-chart-2, #10b981); }
.mc-dash-metric-spark-line-blue { stroke: var(--illust-chart-3, #3b82f6); }
.mc-dash-metric-spark-line-orange { stroke: var(--illust-chart-4, #f59e0b); }

.mc-dash-metric-value {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.mc-dash-metric-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
}
.mc-dash-metric-delta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}
.mc-dash-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.mc-dash-delta .material-symbols-rounded {
    font-size: 14px;
}
.mc-dash-delta-up {
    background: color-mix(in srgb, var(--illust-chart-2, #10b981) 15%, transparent);
    color: var(--illust-chart-2, #10b981);
}
.mc-dash-delta-down {
    background: color-mix(in srgb, var(--illust-chart-5, #ef4444) 15%, transparent);
    color: var(--illust-chart-5, #ef4444);
}
.mc-dash-delta-flat {
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
}
.mc-dash-delta-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Chart card */
.mc-dash-chart-card {
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}
.mc-dash-chart {
    width: 100%;
    height: 320px;
}

/* Section header inside dashboard cards */
.mc-dash-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.mc-dash-section-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-1);
}

/* Stat chips (small status badges in section header) */
.mc-dash-stat-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.mc-dash-stat-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.mc-dash-stat-chip-green {
    background: color-mix(in srgb, var(--illust-chart-2, #10b981) 15%, transparent);
    color: var(--illust-chart-2, #10b981);
}
.mc-dash-stat-chip-orange {
    background: color-mix(in srgb, var(--illust-chart-4, #f59e0b) 15%, transparent);
    color: var(--illust-chart-4, #f59e0b);
}
.mc-dash-stat-chip-red {
    background: color-mix(in srgb, var(--illust-chart-5, #ef4444) 15%, transparent);
    color: var(--illust-chart-5, #ef4444);
}
.mc-dash-stat-chip-blue {
    background: color-mix(in srgb, var(--illust-chart-3, #3b82f6) 15%, transparent);
    color: var(--illust-chart-3, #3b82f6);
}

/* 2-column dashboard grid */
.mc-dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 1024px) {
    .mc-dash-grid-2 { grid-template-columns: 1fr; }
}

/* Panel — card with standard padding for dashboard sub-sections */
.mc-dash-panel {
    padding: var(--space-5) var(--space-6);
}

/* Alerts list */
.mc-dash-alert-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mc-dash-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
}
.mc-dash-alert-error {
    border-color: color-mix(in srgb, var(--illust-chart-5, #ef4444) 40%, var(--color-border));
    background: color-mix(in srgb, var(--illust-chart-5, #ef4444) 6%, var(--color-card-bg));
}
.mc-dash-alert-warning {
    border-color: color-mix(in srgb, var(--illust-chart-4, #f59e0b) 40%, var(--color-border));
    background: color-mix(in srgb, var(--illust-chart-4, #f59e0b) 6%, var(--color-card-bg));
}
.mc-dash-alert-icon {
    flex-shrink: 0;
    font-size: 24px !important;
}
.mc-dash-alert-error .mc-dash-alert-icon { color: var(--illust-chart-5, #ef4444); }
.mc-dash-alert-warning .mc-dash-alert-icon { color: var(--illust-chart-4, #f59e0b); }
.mc-dash-alert-body {
    flex: 1;
    min-width: 0;
}
.mc-dash-alert-title {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-dash-alert-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Empty state inside panels */
.mc-dash-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-muted);
}
.mc-dash-empty-illustration {
    margin-bottom: var(--space-3);
    display: flex;
    justify-content: center;
}
.mc-dash-empty-title {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}
.mc-dash-empty-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 320px;
    margin: 0 auto var(--space-3);
}

/* Platform breakdown list */
.mc-dash-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.mc-dash-breakdown-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.mc-dash-breakdown-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-dash-breakdown-icon .material-symbols-rounded {
    font-size: 20px;
}
.mc-dash-breakdown-body {
    flex: 1;
    min-width: 0;
}
.mc-dash-breakdown-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.mc-dash-breakdown-name {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-dash-breakdown-value {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-dash-breakdown-bar {
    height: 6px;
    background: var(--color-hover-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--space-1);
}
.mc-dash-breakdown-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.mc-dash-breakdown-bar-teal { background: var(--color-teal); }
.mc-dash-breakdown-bar-green { background: var(--illust-chart-2, #10b981); }
.mc-dash-breakdown-bar-blue { background: var(--illust-chart-3, #3b82f6); }
.mc-dash-breakdown-bar-orange { background: var(--illust-chart-4, #f59e0b); }
.mc-dash-breakdown-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Top list (ranked items) */
.mc-dash-top-list {
    display: flex;
    flex-direction: column;
}
.mc-dash-top-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.mc-dash-top-item:first-child { padding-top: 0; }
.mc-dash-top-item:last-child { padding-bottom: 0; border-bottom: none; }
.mc-dash-top-rank {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
}
.mc-dash-top-rank-1 {
    background: color-mix(in srgb, var(--illust-chart-4, #f59e0b) 20%, transparent);
    color: var(--illust-chart-4, #f59e0b);
}
.mc-dash-top-rank-2 {
    background: color-mix(in srgb, var(--color-teal) 20%, transparent);
    color: var(--color-teal);
}
.mc-dash-top-rank-3 {
    background: color-mix(in srgb, var(--illust-chart-3, #3b82f6) 20%, transparent);
    color: var(--illust-chart-3, #3b82f6);
}
.mc-dash-top-body {
    flex: 1;
    min-width: 0;
}
.mc-dash-top-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.mc-dash-top-name {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.mc-dash-top-name:hover {
    color: var(--color-teal);
}
.mc-dash-top-value {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
    flex-shrink: 0;
}
.mc-dash-top-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    flex-wrap: wrap;
    align-items: center;
}

/* Activity feed */
.mc-dash-activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mc-dash-activity-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.mc-dash-activity-item:first-child { padding-top: 0; }
.mc-dash-activity-item:last-child { padding-bottom: 0; border-bottom: none; }
.mc-dash-activity-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-dash-activity-icon .material-symbols-rounded {
    font-size: 18px;
}
.mc-dash-activity-icon-green {
    background: color-mix(in srgb, var(--illust-chart-2, #10b981) 15%, transparent);
    color: var(--illust-chart-2, #10b981);
}
.mc-dash-activity-icon-orange {
    background: color-mix(in srgb, var(--illust-chart-4, #f59e0b) 15%, transparent);
    color: var(--illust-chart-4, #f59e0b);
}
.mc-dash-activity-icon-red {
    background: color-mix(in srgb, var(--illust-chart-5, #ef4444) 15%, transparent);
    color: var(--illust-chart-5, #ef4444);
}
.mc-dash-activity-icon-blue {
    background: color-mix(in srgb, var(--illust-chart-3, #3b82f6) 15%, transparent);
    color: var(--illust-chart-3, #3b82f6);
}
.mc-dash-activity-body {
    flex: 1;
    min-width: 0;
}
.mc-dash-activity-title {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-dash-activity-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.mc-dash-activity-meta {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
    align-items: center;
}

/* Provisioning grid — 4 platform cards with status + health pills */
.mc-dash-provisioning-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
@media (max-width: 1024px) {
    .mc-dash-provisioning-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .mc-dash-provisioning-grid { grid-template-columns: 1fr; }
}
.mc-dash-provisioning-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-dash-provisioning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}
.mc-dash-provisioning-name {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-base);
}
.mc-dash-provisioning-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-dash-provisioning-health {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.mc-dash-provisioning-health-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.mc-dash-provisioning-health-pill .material-symbols-rounded {
    font-size: 14px;
}

/* Adoption bar inside a dashboard card */
.mc-dash-adoption-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-hover-bg);
}

/* ==========================================================================
   Ads Onboarding Checklist — Mailchimp-style progress + steps + detail panel
   ========================================================================== */

.mc-ads-onboarding {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: var(--space-6);
}

/* Header — title + progress bar spanning full width */
.mc-ads-onboarding-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-6) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, var(--color-hover-bg) 0%, var(--color-card-bg) 100%);
}

.mc-ads-onboarding-header-text { flex: 1; min-width: 0; }

.mc-ads-onboarding-title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-1);
    line-height: var(--leading-tight);
}

.mc-ads-onboarding-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.mc-ads-onboarding-progress-wrap {
    flex: 0 0 280px;
    min-width: 0;
}

.mc-ads-onboarding-progress-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
    text-align: right;
}

.mc-ads-onboarding-progress-track {
    height: 8px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.mc-ads-onboarding-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal) 0%, var(--color-teal-hover) 100%);
    border-radius: var(--radius-full);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Body — left rail + right detail panel */
.mc-ads-onboarding-body {
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 360px;
}

/* ---- Left rail: ordered step list ---- */
.mc-ads-onboarding-steps {
    list-style: none;
    margin: 0;
    padding: var(--space-4) 0;
    border-right: 1px solid var(--color-border);
    background: var(--color-bg);
    counter-reset: ads-onb;
}

/* Standalone rail — used when the step list is shown outside the full
   mc-ads-onboarding card (e.g. admin dashboard platform setup). Removes
   the side border + background so it sits cleanly inside an mc-card. */
.mc-ads-onboarding-steps.is-standalone {
    border-right: none;
    background: transparent;
    padding: var(--space-2) 0;
}

.mc-ads-onboarding-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    position: relative;
    counter-increment: ads-onb;
    transition: background var(--transition-fast);
}

.mc-ads-onboarding-step.is-current {
    background: var(--color-card-bg);
    box-shadow: inset 3px 0 0 var(--color-teal);
}
.mc-ads-onboarding-step.is-current .mc-ads-onboarding-step-title { color: var(--color-text); font-weight: var(--weight-semibold); }

.mc-ads-onboarding-step.is-done .mc-ads-onboarding-step-title {
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--color-border-strong);
}

.mc-ads-onboarding-step.is-locked { opacity: 0.55; }

/* Check/number circle */
.mc-ads-onboarding-step-check {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--color-border-strong);
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    transition: all var(--transition-fast);
}
.mc-ads-onboarding-step-check::before {
    content: counter(ads-onb);
}
.mc-ads-onboarding-step.is-done .mc-ads-onboarding-step-check {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-white);
}
.mc-ads-onboarding-step.is-done .mc-ads-onboarding-step-check::before { content: none; }
.mc-ads-onboarding-step.is-current .mc-ads-onboarding-step-check {
    border-color: var(--color-teal);
    color: var(--color-teal);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-teal) 18%, transparent);
}
.mc-ads-onboarding-step.is-locked .mc-ads-onboarding-step-check::before { content: none; }

.mc-ads-onboarding-step-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    gap: var(--space-0-5);
}

.mc-ads-onboarding-step-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Live stat line below the title — NOT affected by .is-done strikethrough
   (that rule targets .mc-ads-onboarding-step-title specifically). */
.mc-ads-onboarding-step-stat {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
}
.mc-ads-onboarding-step.is-current .mc-ads-onboarding-step-stat {
    color: var(--color-text);
}
.mc-ads-onboarding-step.is-locked .mc-ads-onboarding-step-stat {
    font-style: italic;
}

/* Legacy one-line "time" slot — kept for any caller still using it. New
   code should set $step['stat'] and render mc-ads-onboarding-step-stat. */
.mc-ads-onboarding-step-time {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ---- Right panel: current step detail ---- */
.mc-ads-onboarding-detail {
    padding: var(--space-8) var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}

.mc-ads-onboarding-detail-illustration {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: 220px;
    max-width: 40%;
    pointer-events: none;
}
.mc-ads-onboarding-detail-illustration svg { width: 100%; height: auto; display: block; }

.mc-ads-onboarding-detail-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
    max-width: 56%;
    line-height: var(--leading-tight);
}

.mc-ads-onboarding-detail-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
    max-width: 56%;
    line-height: var(--leading-normal);
}

.mc-ads-onboarding-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    max-width: 56%;
    margin-bottom: var(--space-4);
}

.mc-ads-onboarding-platform-btn .material-symbols-rounded {
    font-size: 18px;
    margin-right: var(--space-1);
}

.mc-ads-onboarding-skip {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    margin-top: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.mc-ads-onboarding-skip:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* ---- Tablet (≤1024px): stack detail, shrink illustration ---- */
@media (max-width: 1024px) {
    .mc-ads-onboarding-body {
        grid-template-columns: 260px 1fr;
        min-height: 320px;
    }
    .mc-ads-onboarding-detail-illustration { width: 160px; }
    .mc-ads-onboarding-detail-title,
    .mc-ads-onboarding-detail-desc,
    .mc-ads-onboarding-detail-actions { max-width: 62%; }
    .mc-ads-onboarding-step { padding: var(--space-3) var(--space-4); }
}

/* ---- Mobile (≤767px): stack header + vertical layout, hide illustration ---- */
@media (max-width: 767px) {
    .mc-ads-onboarding-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
        padding: var(--space-4);
    }
    .mc-ads-onboarding-progress-wrap { flex: 1 1 auto; }
    .mc-ads-onboarding-progress-label { text-align: left; }
    .mc-ads-onboarding-title { font-size: var(--text-xl); }

    .mc-ads-onboarding-body {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .mc-ads-onboarding-steps {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-2) 0;
    }
    .mc-ads-onboarding-step { padding: var(--space-3) var(--space-4); }

    .mc-ads-onboarding-detail {
        padding: var(--space-5) var(--space-4) var(--space-4);
    }
    .mc-ads-onboarding-detail-illustration {
        position: static;
        width: 160px;
        max-width: 160px;
        margin: 0 auto var(--space-4);
    }
    .mc-ads-onboarding-detail-title,
    .mc-ads-onboarding-detail-desc,
    .mc-ads-onboarding-detail-actions {
        max-width: 100%;
    }
    .mc-ads-onboarding-detail-title { font-size: var(--text-lg); }
    .mc-ads-onboarding-detail-actions .mc-btn { flex: 1 1 calc(50% - var(--space-1)); justify-content: center; }
}

/* ---- Dark mode tweaks ---- */
[data-theme="dark"] .mc-ads-onboarding-header {
    background: linear-gradient(180deg, var(--color-hover-bg) 0%, var(--color-card-bg) 100%);
}
[data-theme="dark"] .mc-ads-onboarding-steps { background: var(--color-bg); }
[data-theme="dark"] .mc-ads-onboarding-step.is-current { background: var(--color-card-bg); }

/* =========================================================================
   mc-step-bar — rich horizontal step/choice bar (wizard + branching)
   Use cases:
   - Sequential wizard (e.g. install steps)
   - Branching choice (e.g. campaign Template Gallery vs Custom HTML)
   States: .is-active (current), .is-done (completed), .is-enabled (clickable)
   ========================================================================= */
.mc-step-bar {
    background: var(--color-card-bg);
    border-bottom: var(--space-px) solid var(--color-border);
    flex-shrink: 0;
}

.mc-step-bar-inner {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: var(--space-3) var(--space-6);
}

.mc-step-bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    position: relative;
    transition: all var(--transition-fast);
    cursor: default;
    border-radius: var(--radius-input);
}

.mc-step-bar-item.is-enabled {
    cursor: pointer;
}
.mc-step-bar-item.is-enabled:hover {
    background: var(--color-hover-bg);
}

/* Il fuoco da tastiera. Un passo che si puo' premere si raggiunge col
   tabulatore, e senza anello non si sa dove si e' arrivati: il solo sfondo al
   passaggio del mouse non aiuta chi il mouse non lo usa. */
.mc-step-bar-item:focus-visible {
    outline: var(--space-0-5) solid var(--color-border-focus);
    outline-offset: -2px;
}

.mc-step-bar-item.is-active {
    background: var(--color-teal-light);
}

.mc-step-bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-disabled);
    transition: color var(--transition-fast);
}
.mc-step-bar-icon .material-symbols-rounded {
    font-size: 20px;
    font-variation-settings: 'wght' 300, 'FILL' 0;
}

.mc-step-bar-item.is-active .mc-step-bar-icon {
    color: var(--color-teal);
}

.mc-step-bar-item.is-done .mc-step-bar-icon {
    color: var(--color-teal);
}

.mc-step-bar-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mc-step-bar-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    transition: color var(--transition-fast);
}

.mc-step-bar-item.is-active .mc-step-bar-label {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}

.mc-step-bar-item.is-done .mc-step-bar-label,
.mc-step-bar-item.is-enabled .mc-step-bar-label {
    color: var(--color-text);
}

.mc-step-bar-desc {
    font-size: 10px;
    color: var(--color-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin-top: 1px;
}

.mc-step-bar-item.is-active .mc-step-bar-desc {
    color: var(--color-text-muted);
}

.mc-step-bar-item.is-done .mc-step-bar-desc,
.mc-step-bar-item.is-enabled .mc-step-bar-desc {
    color: var(--color-text-muted);
}

.mc-step-bar-connector {
    display: flex;
    align-items: center;
    padding: 0 var(--space-0-5);
    flex-shrink: 0;
    color: var(--color-border-strong);
}
.mc-step-bar-connector .material-symbols-rounded {
    font-size: 14px;
    font-variation-settings: 'wght' 200, 'FILL' 0;
}

@media (max-width: 680px) {
    .mc-step-bar-label {
        display: none;
    }
    .mc-step-bar-connector {
        width: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE FLAG CARDS + GUIDE POPUP (generic primitives, F8.4)
   Hoisted from ai-settings.css 2026-04-25 so any settings page can
   render a 'feature flag toggle list with sub-options accordion +
   illustrated learn-more guide popup'. See /rui/ui showcase entries
   #feature-card and #feature-guide for canonical markup.
   ═══════════════════════════════════════════════════════════════ */
/* ── F8.4 Features tab — flag cards + sub-options accordion ───────── */
.mc-features-section-header {
    display: block;
    margin-bottom: var(--space-5);
}

.mc-features-section-header .mc-settings-section-title {
    margin: 0 0 var(--space-2);
    line-height: 1.25;
}

.mc-features-section-header .mc-settings-section-desc {
    margin: 0;
    line-height: 1.55;
    max-width: 720px;
}

.mc-features-master-off-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.mc-features-master-off-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.mc-features-master-off-title {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.mc-features-form.is-globally-off .mc-features-grid {
    opacity: 0.6;
    pointer-events: none;
}

.mc-features-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mc-feature-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mc-feature-card.is-enabled {
    border-color: var(--color-border);
}

.mc-feature-card.is-disabled {
    background: var(--color-bg-subtle);
}

.mc-feature-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.mc-feature-card-illust {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-1);
    transition: opacity 0.15s ease;
}

.mc-feature-card-illust svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mc-feature-card.is-disabled .mc-feature-card-illust {
    opacity: 0.5;
}

.mc-feature-card-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.mc-feature-card-title {
    font-size: var(--text-md);
    font-weight: 600;
    margin: 0 0 var(--space-1);
    color: var(--color-text);
    line-height: 1.35;
}

.mc-feature-card.is-disabled .mc-feature-card-title {
    color: var(--color-text-muted);
}

.mc-feature-card-desc {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    max-width: 640px;
}

.mc-feature-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.mc-feature-card-default-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

.mc-feature-card-default-badge.is-on {
    color: var(--color-teal);
    border-color: var(--color-teal-light);
    background: var(--color-teal-light);
}

.mc-feature-card-learnmore {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-link);
    text-decoration: none;
    font-weight: 500;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.mc-feature-card-learnmore:hover {
    text-decoration: underline;
}

.mc-feature-card-learnmore:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.mc-feature-card-toggle {
    flex-shrink: 0;
    margin-top: var(--space-1);
}

.mc-feature-card-suboptions {
    border-top: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-5) var(--space-4);
}

.mc-feature-card-suboptions-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 0;
    background: transparent;
    color: var(--color-text-link);
    font-size: var(--text-xs);
    font-weight: 500;
    padding: var(--space-2) 0;
    cursor: pointer;
}

.mc-feature-card-suboptions-icon {
    display: inline-block;
    transition: transform 0.15s ease;
}

.mc-feature-card-suboptions-toggle[aria-expanded="true"] .mc-feature-card-suboptions-icon {
    transform: rotate(90deg);
}

.mc-feature-card-suboptions-toggle[aria-expanded="false"] .mc-feature-card-suboptions-label-hide,
.mc-feature-card-suboptions-toggle[aria-expanded="true"] .mc-feature-card-suboptions-label-show {
    display: none;
}

.mc-feature-card-suboptions-help {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin: 0 0 var(--space-3);
    line-height: 1.5;
}

.mc-feature-card-suboptions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3) var(--space-4);
}

.mc-feature-card-suboption {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mc-feature-card-suboption-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text);
}

.mc-feature-card-suboption-input {
    max-width: 160px;
}

.mc-feature-card-suboption-help {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.mc-features-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
    .mc-feature-card-head {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    .mc-feature-card-illust {
        width: 48px;
        height: 48px;
    }
    .mc-feature-card-toggle {
        margin-left: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-feature-card,
    .mc-feature-card-suboptions-icon {
        transition: none;
    }
}

/* ── F8.4 follow-up: Learn-more guide popup ───────────────────────── */
.mc-feature-guide {
    padding: 0;
    color: var(--color-text);
}

.mc-feature-guide-hero {
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
        var(--color-teal-light) 0%,
        var(--illust-bg) 100%);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    overflow: hidden;
}

.mc-feature-guide-hero svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
}

.mc-feature-guide-title {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}

.mc-feature-guide-tagline {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-5);
    line-height: 1.55;
    max-width: 640px;
}

.mc-feature-guide-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.mc-feature-guide-section h3 {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
}

.mc-feature-guide-section p {
    margin: 0;
    line-height: 1.6;
    color: var(--color-text);
}

.mc-feature-guide-section code {
    background: var(--illust-bg);
    color: var(--color-text);
    padding: 1px var(--space-1);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
}

.mc-feature-guide-section ul {
    margin: 0;
    padding-left: var(--space-4);
    line-height: 1.6;
    color: var(--color-text);
}

.mc-feature-guide-section ul li + li {
    margin-top: var(--space-1);
}

.mc-feature-guide-section ul li strong {
    color: var(--color-teal);
}

.mc-feature-guide-on-off {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.mc-feature-guide-on-off > div {
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-3);
}

.mc-feature-guide-on-off > div:first-child {
    border-left-color: var(--color-teal);
}

.mc-feature-guide-routes li {
    color: var(--color-text);
}

.mc-feature-guide-requires {
    background: color-mix(in srgb, var(--color-teal) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-teal) 25%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.mc-feature-guide-requires h3 {
    color: var(--color-teal);
}

.mc-feature-guide-foot {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
    .mc-feature-guide-on-off {
        grid-template-columns: 1fr;
    }
    .mc-feature-guide-hero svg {
        max-height: 160px;
    }
}

/* ==================================================================
 * Admin Invoices — rich layout + right-rail sidebar
 * Namespace: rui-inv-* — page-scoped, never used outside admin/invoices
 * ================================================================== */

.rui-inv-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-5);
    align-items: start;
}
@media (max-width: 1279px) {
    .rui-inv-page-grid { grid-template-columns: 1fr; }
}

.rui-inv-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: var(--space-5);
    align-self: start;
}
@media (max-width: 1279px) {
    .rui-inv-side { position: static; }
}

.rui-inv-side-card { /* extends mc-card-preview — keep visuals consistent */ }
.rui-inv-side-card-attn .mc-card-preview-header { background: var(--chart-4-bg, #fff4ea); }

.rui-inv-side-card .mc-card-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}
.rui-inv-side-card .mc-card-preview-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.rui-inv-side-icon {
    font-size: 22px !important;
    color: var(--color-text-muted);
    line-height: 1;
}
.rui-inv-side-icon-red   { color: var(--color-error, #d14d4d); }
.rui-inv-side-icon-blue  { color: var(--color-info, #4a90e2); }
.rui-inv-side-icon-teal  { color: var(--color-teal, #2bb7a8); }
.rui-inv-side-icon-green { color: var(--color-success, #2e9c5d); }

.rui-inv-side-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rui-inv-side-empty {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: var(--space-2) 0;
}

.rui-inv-side-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.rui-inv-side-num {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.1;
}
.rui-inv-side-num-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.rui-inv-side-foot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.rui-inv-side-foot-icon { font-size: 14px !important; }

.rui-inv-side-delta-up   { color: var(--color-success, #2e9c5d); }
.rui-inv-side-delta-down { color: var(--color-error, #d14d4d); }
.rui-inv-side-delta-flat { color: var(--color-text-muted); }

/* Failed payments + general list inside a sidebar card */
.rui-inv-side-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-inv-side-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
}
.rui-inv-side-list-item:first-child { border-top: 0; }
.rui-inv-side-list-main { min-width: 0; flex: 1 1 auto; }
.rui-inv-side-list-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.rui-inv-side-list-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 1px;
}
.rui-inv-side-list-err {
    font-size: var(--text-xs);
    color: var(--color-error, #d14d4d);
    margin-top: 2px;
    line-height: 1.3;
}
.rui-inv-side-list-amount {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
}

/* Top customers ranked list */
.rui-inv-side-rank {
    display: grid;
    grid-template-columns: 18px 32px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
}
.rui-inv-side-rank:first-child { border-top: 0; }
.rui-inv-side-rank-num {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    text-align: center;
}
.rui-inv-side-rank-main { min-width: 0; }
.rui-inv-side-rank-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.rui-inv-side-rank-name:hover { color: var(--color-teal); }
.rui-inv-side-rank-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.rui-inv-side-rank-amount {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
}

/* Activity feed */
.rui-inv-side-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-inv-side-feed-item {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: var(--space-2);
    align-items: flex-start;
    padding: var(--space-1) 0;
}
.rui-inv-side-feed-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    background: var(--color-text-muted);
}
.rui-inv-side-feed-dot-green { background: var(--color-success, #2e9c5d); }
.rui-inv-side-feed-dot-blue  { background: var(--color-info, #4a90e2); }
.rui-inv-side-feed-dot-orange { background: var(--chart-4, #e5a23a); }
.rui-inv-side-feed-dot-red   { background: var(--color-error, #d14d4d); }

.rui-inv-side-feed-text {
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.35;
}
.rui-inv-side-feed-text strong { font-weight: var(--weight-medium); }
.rui-inv-side-feed-actor {
    color: var(--color-text-muted);
    margin-left: 4px;
}
.rui-inv-side-feed-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Stats row — extends current page; supports 5 cards */
.rui-inv-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
@media (max-width: 1279px) { .rui-inv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .rui-inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .rui-inv-stats { grid-template-columns: 1fr; } }

.rui-inv-stat-card {
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
/* Naked-icon stat — no chip, larger glyph carries the colour. Weight inherits
   project default 'wght' 200 — thin strokes for a refined look. */
.rui-inv-stat-icon {
    width: 32px;
    height: 32px;
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rui-inv-stat-icon .material-symbols-rounded {
    font-size: 32px !important;
    line-height: 1;
}
.rui-inv-stat-num {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
}
.rui-inv-stat-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Rich list — type icon chip + customer + amount + breakdown */
.rui-inv-list-type {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
/* List type icon — monochrome, small, refined.
   Earlier iterations used per-type tone colours; the row already has a status badge
   doing colour signalling, so the type glyph is purely a typographic accent. Single
   muted-text colour, 20px, wght 200 inherited from the project base = elegant. */
.rui-inv-list-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}
.rui-inv-list-type-icon .material-symbols-rounded {
    font-size: 20px !important;
    color: var(--color-text-muted);
    line-height: 1;
}

.rui-inv-list-type-body { min-width: 0; }
.rui-inv-list-type-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.rui-inv-list-type-meta {
    font-size: 11px;
    color: var(--color-text-disabled);
    font-family: var(--font-mono, monospace);
    margin-top: 1px;
}

.rui-inv-list-amount {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.rui-inv-list-amount-sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 1px;
}

.rui-inv-list-customer-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-decoration: none;
}
a.rui-inv-list-customer-name:hover { color: var(--color-teal); }
.rui-inv-list-customer-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 1px;
}

/* Revenue sparkline holder — 64px tall, anchored to widget body */
.rui-inv-side-spark {
    width: 100%;
    height: 64px;
    margin: var(--space-1) 0 var(--space-2);
}

/* ── Action column: never push the right rail ──
 * Force the listing card to honour its grid cell width so the action dropdown
 * cannot widen the table beyond the main column. */
.rui-inv-page-grid > div:first-child { min-width: 0; }
.rui-inv-page-grid .mc-card-table { overflow-x: auto; overflow-y: hidden; }  /* explicit Y prevents browser auto-coercion → spurious vertical scrollbar */
.rui-inv-page-grid .mc-table { width: 100%; min-width: 720px; }
.rui-inv-page-grid .mc-table td:last-child,
.rui-inv-page-grid .mc-table th:last-child { width: 56px; padding-right: var(--space-3); }
.rui-inv-page-grid .mc-dropdown-menu-end { right: var(--space-2); }

/* ==================================================================
 * Admin Subscriptions — main + 320px rail archetype, subscription-domain content
 * Namespace: rui-sub-* — page-scoped, never used outside admin/subscriptions
 *
 * Visual personality vs admin/invoices:
 *   - Stat hero is VERTICAL stacked (label-on-top → big number → footer/spark),
 *     vs invoices' horizontal icon|number|label row.
 *   - Each hero card carries a TEAL accent top-bar — subscription = relationship/loyalty cue.
 *   - Rail uses a slimmer chrome (no card-preview header bar) — pulled-in,
 *     less ceremonial than invoices' badge-style rail headers.
 *   - MRR widget gets visual primacy (taller, larger sparkline) since it's the
 *     subscription-domain headline metric — invoices' analogue is Revenue but
 *     it's not the page hero there.
 * ================================================================== */

/* ── KPI hero strip ── 5 vertical stat cards with teal accent and optional inline trend ── */
.rui-sub-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
@media (max-width: 1279px) { .rui-sub-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .rui-sub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .rui-sub-stats { grid-template-columns: 1fr; } }

.rui-sub-stat-card {
    position: relative;
    padding: var(--space-4) var(--space-4) var(--space-3);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-height: 110px;
}
/* Teal accent top-bar — the subscription-product cue. Invoices doesn't have this. */
.rui-sub-stat-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--color-teal, #2bb7a8);
    opacity: 0.85;
}
.rui-sub-stat-card-attn::before { background: var(--chart-4, #e5a23a); }
.rui-sub-stat-card-warn::before { background: var(--color-error, #d14d4d); }
.rui-sub-stat-card-mrr::before  { background: linear-gradient(90deg, var(--color-teal, #2bb7a8), var(--chart-2, #6e9be0)); }

.rui-sub-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.rui-sub-stat-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--weight-semibold);
}
.rui-sub-stat-icon .material-symbols-rounded {
    font-size: 20px !important;
    color: var(--color-text-disabled);
    /* wght 200 inherited (lesson L3 — naked monochrome accent). */
}
.rui-sub-stat-card-mrr .rui-sub-stat-icon .material-symbols-rounded { color: var(--color-teal, #2bb7a8); }
.rui-sub-stat-card-attn .rui-sub-stat-icon .material-symbols-rounded { color: var(--chart-4, #e5a23a); }
.rui-sub-stat-card-warn .rui-sub-stat-icon .material-symbols-rounded { color: var(--color-error, #d14d4d); }

.rui-sub-stat-num {
    font-size: 28px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.1;
}
.rui-sub-stat-num-currency {
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
    margin-left: 2px;
}
.rui-sub-stat-foot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    color: var(--color-text-muted);
}
.rui-sub-stat-foot-up    { color: var(--color-success, #2e9c5d); }
.rui-sub-stat-foot-down  { color: var(--color-error, #d14d4d); }
.rui-sub-stat-foot .material-symbols-rounded { font-size: 14px !important; }
.rui-sub-stat-spark {
    width: 100%;
    height: 28px;
    margin-top: var(--space-1);
}

/* ── Page grid: main + 320px rail (clones invoices archetype, content differs) ── */
.rui-sub-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-4);
    align-items: start;
}
@media (max-width: 1023px) {
    .rui-sub-page-grid { grid-template-columns: 1fr; }
}

/* Main column: never let the action dropdown widen the table beyond the cell.
 * Lesson L2 (proper form): overflow-x on inner table container, NOT on the card. */
.rui-sub-page-grid > div:first-child { min-width: 0; }
.rui-sub-list-card .mc-card-table { overflow-x: auto; overflow-y: hidden; }
.rui-sub-list-card .mc-table { width: 100%; min-width: 720px; }
.rui-sub-list-card .mc-table td:last-child,
.rui-sub-list-card .mc-table th:last-child { width: 56px; padding-right: var(--space-3); }
.rui-sub-list-card .mc-dropdown-menu-end { right: var(--space-2); }

/* ── Tabs as card header — merged-segment design.
 *   Container has no side padding and no gap; each tab carries its own generous
 *   horizontal padding so the strip reads as one connected row, not islands.
 *   Active-tab underline naturally spans the active tab's padding range. ── */
.rui-sub-list-card .mc-tabs-card-header {
    padding: 0;
    gap: 0;
    border-bottom: 1px solid var(--color-border-light, var(--color-border));
    margin-bottom: 0;
}
.rui-sub-list-card .mc-tabs-card-header .mc-tab-btn {
    padding: var(--space-3) var(--space-4);              /* 12px × 16px — generous click target, no margin needed */
    margin: 0;
}

/* ── Lifecycle tab count badge ── */
.rui-sub-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    margin-left: var(--space-2);
    border-radius: 9px;                                  /* fully rounded — pills, not chips, to soften the row */
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    line-height: 1;
}
.mc-tab-btn.active .rui-sub-tab-badge {
    background: var(--color-teal-light);
    color: var(--color-teal);
}

/* ── Attention chip strip — appears above the list card when count > 0 ── */
.rui-sub-attn-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.rui-sub-attn-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.rui-sub-attn-chip:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
    transform: translateY(-1px);
}
.rui-sub-attn-chip-num   { font-weight: var(--weight-bold); font-size: var(--text-base); line-height: 1; color: var(--color-text); }
.rui-sub-attn-chip-label { color: var(--color-text-muted); }
.rui-sub-attn-chip-icon  { font-size: 18px !important; }
.rui-sub-attn-chip-arrow {
    margin-left: var(--space-1);
    font-size: 14px !important;
    color: var(--color-text-disabled);
    transition: transform 120ms ease, color 120ms ease;
}
.rui-sub-attn-chip:hover .rui-sub-attn-chip-arrow { transform: translateX(2px); color: var(--color-text); }
.rui-sub-attn-chip-orange { border-left-color: var(--chart-4, #e5a23a); }
.rui-sub-attn-chip-orange .rui-sub-attn-chip-icon { color: var(--chart-4, #e5a23a); }
.rui-sub-attn-chip-blue   { border-left-color: var(--color-info, #4a90e2); }
.rui-sub-attn-chip-blue   .rui-sub-attn-chip-icon { color: var(--color-info, #4a90e2); }
.rui-sub-attn-chip-red    { border-left-color: var(--color-error, #d14d4d); }
.rui-sub-attn-chip-red    .rui-sub-attn-chip-icon { color: var(--color-error, #d14d4d); }

/* ── Right rail container ── */
.rui-sub-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: sticky;
    top: var(--space-4);
}
@media (max-width: 1023px) { .rui-sub-side { position: static; } }

/* Rail card chrome — slimmer than invoices' mc-card-preview chrome. No badge header.
 * Title is small + uppercase; body holds the metric. Clear teal-on-hover for clickable
 * widgets. */
.rui-sub-side-card {
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.rui-sub-side-card-attn { border-color: var(--chart-4, #e5a23a); background: linear-gradient(180deg, rgba(229,162,58,0.05) 0%, rgba(229,162,58,0) 60%); }
.rui-sub-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    gap: var(--space-2);
}
.rui-sub-side-title {
    font-size: 11px;
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.rui-sub-side-title .material-symbols-rounded { font-size: 14px !important; color: var(--color-teal, #2bb7a8); }
.rui-sub-side-card-attn .rui-sub-side-title .material-symbols-rounded { color: var(--chart-4, #e5a23a); }
.rui-sub-side-action {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    color: var(--color-teal, #2bb7a8);
    text-decoration: none;
    cursor: pointer;
}
.rui-sub-side-action:hover { text-decoration: underline; }
.rui-sub-side-empty {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    padding: var(--space-2) 0;
    text-align: center;
}

/* MRR widget — the rail headline. Bigger number, sparkline below, delta footer. */
.rui-sub-mrr-num {
    font-size: 28px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.1;
}
.rui-sub-mrr-currency {
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
    margin-left: 2px;
}
.rui-sub-mrr-spark {
    width: 100%;
    height: 56px;
    margin: var(--space-2) 0 var(--space-1);
}
.rui-sub-mrr-foot {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    color: var(--color-text-muted);
}
.rui-sub-mrr-foot-up   { color: var(--color-success, #2e9c5d); }
.rui-sub-mrr-foot-down { color: var(--color-error, #d14d4d); }
.rui-sub-mrr-foot .material-symbols-rounded { font-size: 14px !important; }

/* Plan mix — horizontal mini bars per plan. Different shape from invoices'
 * Top Customers (which used avatar+name+amount rows). */
.rui-sub-mix-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-2);
    align-items: center;
    font-size: var(--text-xs);
}
.rui-sub-mix-row + .rui-sub-mix-row { margin-top: var(--space-2); }
.rui-sub-mix-row-name {
    color: var(--color-text);
    font-weight: var(--weight-medium);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rui-sub-mix-row-num {
    color: var(--color-text-muted);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}
.rui-sub-mix-bar {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: var(--color-bg-subtle);
    overflow: hidden;
}
.rui-sub-mix-bar > div {
    height: 100%;
    background: var(--color-teal, #2bb7a8);
    opacity: 0.85;
    border-radius: 2px;
}

/* Reconcile health — horizontal % bar */
.rui-sub-recon {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-sub-recon-pct {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.rui-sub-recon-pct-num {
    font-size: 22px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
}
.rui-sub-recon-pct-label {
    font-size: 11px;
    color: var(--color-text-muted);
}
.rui-sub-recon-bar {
    height: 6px;
    background: var(--color-bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
}
.rui-sub-recon-bar-synced { background: var(--color-success, #2e9c5d); }
.rui-sub-recon-bar-issue  { background: var(--color-error, #d14d4d); }
.rui-sub-recon-foot {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Activity feed — colour-dot rows. No dividers between rows; small gap is enough. */
.rui-sub-act {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-sub-act-row {
    display: flex;
    gap: var(--space-2);
}
.rui-sub-act-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.rui-sub-act-dot-green  { background: var(--color-success, #2e9c5d); }
.rui-sub-act-dot-teal   { background: var(--color-teal, #2bb7a8); }
.rui-sub-act-dot-orange { background: var(--chart-4, #e5a23a); }
.rui-sub-act-dot-red    { background: var(--color-error, #d14d4d); }
.rui-sub-act-dot-gray   { background: var(--color-text-disabled); }
.rui-sub-act-body { min-width: 0; flex: 1 1 auto; }
.rui-sub-act-msg {
    font-size: var(--text-xs);
    color: var(--color-text);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.rui-sub-act-when {
    font-size: 10px;
    color: var(--color-text-disabled);
    margin-top: 1px;
}

/* Filter-aware empty state CTA group (lesson L4). */
.rui-sub-empty-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

@media (max-width: 640px) {
    .rui-sub-attn-strip { gap: var(--space-1); }
    .rui-sub-attn-chip { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
    .rui-sub-stat-num { font-size: 22px; }
}

/* ==================================================================
 * RUI — Customer "Sending Domains" page (rich-redesign 2026-04-28)
 * Namespace: rui-domains-* — page-scoped, never used outside the
 * /rui/sending/domains route.
 *
 * Pairs with the canonical Admin List Page primitives
 * (mc-stats-strip, mc-page-grid, mc-page-rail, mc-card-preview).
 * Only the page-specific decorations live here.
 * ================================================================== */

/* Grid clamp — list card stays in its column without spawning a horizontal
   scrollbar. Columns compress naturally; user feedback 2026-04-28 was
   "ko dùng scrollbar check các list khác" — no overflow-x:auto here. */
.rui-domains-page-grid > div:first-child { min-width: 0; }
.rui-domains-page-grid .mc-table { width: 100%; }

/* ─── List rows — richer name cell + sub-line + per-row server identity ─── */
.rui-domains-list-name-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.rui-domains-list-name-icon {
    width: 28px;
    height: 28px;
    background: var(--color-hover-bg);
    border-radius: var(--radius-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Primary name in the row — base size for a "premium" feel; sub-line below
   stays --text-xs. */
.rui-domains-list-name {
    display: inline-block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.3;
}
.rui-domains-list-name:hover { color: var(--color-teal); }

/* Block-level flex so the sub-line stacks BELOW the domain name; inline-flex
   would let it sit beside the name on the same row. */
.rui-domains-list-sub {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.rui-domains-list-sub-mono {
    font-family: var(--font-mono, monospace);
    color: var(--color-text-disabled);
    font-size: 11px;
}
.rui-domains-list-sub-dot {
    color: var(--color-text-disabled);
    margin: 0 2px;
}
.rui-domains-list-sub-ok {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-success);
}
.rui-domains-list-sub-pending {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--chart-4);
}

.rui-domains-list-server {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.rui-domains-list-server-label {
    font-size: var(--text-sm);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.rui-domains-list-server-none {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

/* ─── Right rail — page-scoped flourishes on top of mc-page-rail / mc-card-preview ─── */
.rui-domains-rail-card { /* extends mc-card-preview */ }
.rui-domains-rail-card-attn .mc-card-preview-header {
    background: var(--chart-4-bg, #fff4ea);
}
.rui-domains-rail-card .mc-card-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}
.rui-domains-rail-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-domains-rail-num-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.rui-domains-rail-num {
    font-size: 28px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
}
.rui-domains-rail-num-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.rui-domains-rail-foot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.rui-domains-rail-foot-icon { font-size: 14px !important; }
/* L13 refinement — TEXT inline annotations next to a chart use the SEMANTIC
   palette for readability (chart palette pastels are too dim for text). The
   chart fills above (donut slice, progress bar) keep `--chart-N`; foot copy
   keeps `--color-success/error/warning`. */
.rui-domains-rail-delta-up    { color: var(--color-success); }
.rui-domains-rail-delta-down  { color: var(--color-error); }
.rui-domains-rail-delta-flat  { color: var(--color-text-muted); }

/* ─── Verification donut + legend ─── */
.rui-domains-health-donut {
    width: 100%;
    height: 140px;
    margin: 0 auto;
}
.rui-domains-health-legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.rui-domains-health-legend-item {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
}
.rui-domains-health-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
/* Legend dots mirror the donut slice colours — chart palette, not semantic. */
.rui-domains-health-legend-dot-verified   { background: var(--chart-2); }
.rui-domains-health-legend-dot-unverified { background: var(--chart-4); }
.rui-domains-health-legend-label {
    color: var(--color-text-muted);
}
.rui-domains-health-legend-num {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* ─── Activity sparkline holder ─── */
.rui-domains-activity-spark {
    width: 100%;
    height: 56px;
    margin-top: var(--space-1);
}

/* ─── Quota progress bar ─── */
.rui-domains-quota-bar {
    width: 100%;
    height: 6px;
    background: var(--color-hover-bg);
    border-radius: 999px;
    overflow: hidden;
    margin-top: var(--space-2);
}
.rui-domains-quota-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
/* Progress-bar fills come from the `--chart-*` pastel palette so a 6px tile
   doesn't look harsh next to muted card chrome. Map the semantic-sounding
   variant names onto chart tokens — green=chart-2, orange=chart-4, red=chart-5
   (soft rose), teal=chart-1. See HARD RULE in UI.md "Chart palette discipline". */
.rui-domains-quota-bar-fill-teal   { background: var(--chart-1); }
.rui-domains-quota-bar-fill-green  { background: var(--chart-2); }
.rui-domains-quota-bar-fill-orange { background: var(--chart-4); }
.rui-domains-quota-bar-fill-red    { background: var(--chart-5); }

/* ─── Setup checklist ─── */
.rui-domains-checklist {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.rui-domains-checklist-item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: var(--space-3);
    align-items: flex-start;
}
.rui-domains-checklist-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}
.rui-domains-checklist-body {
    min-width: 0;
}
.rui-domains-checklist-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}
.rui-domains-checklist-icon {
    font-size: 16px !important;
    color: var(--color-text-muted);
}
.rui-domains-checklist-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.5;
}

/* ─── Setup-flow steps for /rui/sending/servers/select ───────────────
 * Horizontal sequence with chevron arrows between nodes. Visually
 * differentiated from the provider grid below (no card chrome, dashed
 * container, circular icon nodes) so it reads as "follow this path",
 * not "pick one of three".
 * ─────────────────────────────────────────────────────────────────── */
.rui-flow-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-6);
    padding: var(--space-5) var(--space-4);
    background: var(--color-card-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
}
.rui-flow-step {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.rui-flow-arrow {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 12px;
    color: var(--color-text-muted);
    font-size: 28px !important;
    opacity: 0.45;
}
.rui-flow-node {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-teal-light);
    color: var(--color-teal);
    margin-bottom: var(--space-2);
}
.rui-flow-node .material-symbols-rounded {
    font-size: 22px;
}
.rui-flow-node-num {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--color-teal);
    color: #fff;
    font-size: 10px;
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-card-bg);
    box-sizing: content-box;
}
.rui-flow-step-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.rui-flow-step-desc {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}
@media (max-width: 768px) {
    .rui-flow-steps { flex-direction: column; align-items: stretch; }
    .rui-flow-step { text-align: left; padding-left: var(--space-3); }
    .rui-flow-arrow { transform: rotate(90deg); align-self: center; margin: 0; }
}

/* ─── Picker section grouping (Built-in vs Plugin) ──────────────────── */
.rui-picker-section { margin-bottom: var(--space-6); }
.rui-picker-section:last-child { margin-bottom: 0; }
.rui-picker-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.rui-picker-section-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.rui-picker-section-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}
.rui-picker-section-count {
    margin-left: var(--space-1);
    padding: 2px 8px;
    border-radius: 9px;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: var(--weight-semibold);
}
.rui-picker-section-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
    padding-left: 18px;     /* align with dot + title */
}
.rui-picker-plugin-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-card);
    background-color: var(--color-hover-bg);
    background-position: center;
    background-size: 28px;
    background-repeat: no-repeat;
    flex: 0 0 auto;
}
.rui-picker-plugin-badge {
    margin-left: var(--space-2);
    font-size: 9px;
    vertical-align: middle;
}

/* ==================================================================
 * RUI — Customer "Email Verification Servers" page (rich-redesign 2026-04-28)
 * Namespace: rui-verifiers-* — page-scoped.
 *
 * Chart-palette discipline (L13): fills come from --chart-N; text and
 * small-icon glyphs stay on semantic / muted tokens for readability.
 * ================================================================== */

.rui-verifiers-page-grid > div:first-child { min-width: 0; }
.rui-verifiers-page-grid .mc-table { width: 100%; }

/* ─── List rows — name cell, vendor pill, quota chip ─── */
.rui-verifiers-list-name-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.rui-verifiers-list-name-icon {
    width: 28px;
    height: 28px;
    background: var(--color-hover-bg);
    border-radius: var(--radius-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.rui-verifiers-list-name-icon .material-symbols-rounded { font-size: 18px; }
.rui-verifiers-list-name {
    display: inline-block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.3;
}
.rui-verifiers-list-name:hover { color: var(--color-teal); }

.rui-verifiers-list-sub {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.rui-verifiers-list-sub-mono {
    font-family: var(--font-mono, monospace);
    color: var(--color-text-disabled);
    font-size: 11px;
}
.rui-verifiers-list-sub-dot { color: var(--color-text-disabled); margin: 0 2px; }
.rui-verifiers-list-sub-tone { color: var(--color-text-muted); }

.rui-verifiers-list-vendor {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.rui-verifiers-vendor-mark {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--chart-1-bg, var(--color-hover-bg));
    color: var(--chart-1);
    flex-shrink: 0;
}
.rui-verifiers-vendor-mark .material-symbols-rounded { font-size: 16px; }
.rui-verifiers-list-vendor-name {
    font-size: var(--text-sm);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.rui-verifiers-quota-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-hover-bg);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}
.rui-verifiers-quota-chip .material-symbols-rounded {
    font-size: 14px;
    color: var(--color-text-muted);
}
.rui-verifiers-quota-none {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

/* ─── Right rail — page-scoped layer over mc-page-rail / mc-card-preview ─── */
.rui-verifiers-rail-card { /* extends mc-card-preview */ }
.rui-verifiers-rail-card .mc-card-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}
.rui-verifiers-rail-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-verifiers-rail-num-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.rui-verifiers-rail-num {
    font-size: 26px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rui-verifiers-rail-num-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.rui-verifiers-rail-foot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.rui-verifiers-rail-foot-icon { font-size: 14px !important; }

/* ─── Why-verify list (3 bullets — small icon + title + desc) ─── */
.rui-verifiers-why-list {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.rui-verifiers-why-item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: var(--space-3);
    align-items: flex-start;
}
.rui-verifiers-why-icon {
    font-size: 20px !important;
    line-height: 1;
}
.rui-verifiers-why-body { min-width: 0; }
.rui-verifiers-why-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}
.rui-verifiers-why-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.5;
}

/* ─── Service catalog rail (connected first, available rest) ─── */
.rui-verifiers-catalog {
    padding: var(--space-2) var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rui-verifiers-catalog-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 0;
    font-size: var(--text-xs);
}
.rui-verifiers-catalog-row-on { /* connected state — emphasised */ }
.rui-verifiers-catalog-icon {
    color: var(--chart-2);
    font-size: 16px !important;
    flex-shrink: 0;
}
.rui-verifiers-catalog-icon-off {
    color: var(--color-text-disabled);
    font-size: 14px !important;
    flex-shrink: 0;
}
.rui-verifiers-catalog-name {
    flex: 1 1 auto;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rui-verifiers-catalog-name-off { color: var(--color-text-muted); }
.rui-verifiers-catalog-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--chart-2);
    font-weight: var(--weight-semibold);
}
.rui-verifiers-catalog-more {
    font-size: 11px;
    color: var(--color-text-muted);
    padding-top: 4px;
}

/* ─── Setup checklist (numbered list, mirrors sending-domains style) ─── */
.rui-verifiers-checklist {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.rui-verifiers-checklist-item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: var(--space-3);
    align-items: flex-start;
}
.rui-verifiers-checklist-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}
.rui-verifiers-checklist-body { min-width: 0; }
.rui-verifiers-checklist-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}
.rui-verifiers-checklist-icon {
    font-size: 16px !important;
    color: var(--color-text-muted);
}
.rui-verifiers-checklist-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.5;
}

/* ==================================================================
 * RUI — Customer "Sending Servers" page (rich-redesign 2026-04-28)
 * Namespace: rui-servers-* — page-scoped.
 *
 * Chart-palette discipline (L13): donut slices + per-vendor bars + warmup
 * meter come from --chart-N. Foot text + warning copy stays semantic.
 * ================================================================== */

.rui-servers-page-grid > div:first-child { min-width: 0; }
.rui-servers-page-grid .mc-table { width: 100%; }

/* ─── List rows ─── */
.rui-servers-list-name-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.rui-servers-list-name {
    display: inline-block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.3;
}
.rui-servers-list-name:hover { color: var(--color-teal); }
.rui-servers-list-sub {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.rui-servers-list-sub-mono {
    font-family: var(--font-mono, monospace);
    color: var(--color-text-disabled);
    font-size: 11px;
}
.rui-servers-list-sub-dot { color: var(--color-text-disabled); margin: 0 2px; }
.rui-servers-list-sub-tone { color: var(--color-text-muted); }

.rui-servers-list-type {
    font-size: var(--text-sm);
    color: var(--color-text);
    white-space: nowrap;
}
.rui-servers-quota-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-hover-bg);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}
.rui-servers-quota-chip .material-symbols-rounded {
    font-size: 14px;
    color: var(--color-text-muted);
}
.rui-servers-quota-none {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}
.rui-servers-warmup-off { color: var(--color-text-disabled); font-size: var(--text-sm); }

/* ─── Right rail (5 cards) ─── */
.rui-servers-rail-card { /* extends mc-card-preview */ }
.rui-servers-rail-card-attn .mc-card-preview-header {
    background: var(--chart-4-bg, #fff4ea);
}
.rui-servers-rail-card .mc-card-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}
.rui-servers-rail-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-servers-rail-num-row { display: flex; align-items: baseline; gap: var(--space-2); }
.rui-servers-rail-num {
    font-size: 26px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rui-servers-rail-num-label { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ─── Vendor mix donut + legend ─── */
.rui-servers-mix-donut {
    width: 100%;
    height: 140px;
    margin: 0 auto;
}
.rui-servers-mix-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--space-2);
}
.rui-servers-mix-legend-item {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
}
.rui-servers-mix-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.rui-servers-mix-legend-name { color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rui-servers-mix-legend-num {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* ─── Throughput per-vendor bars ─── */
.rui-servers-throughput-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    font-weight: var(--weight-semibold);
}
.rui-servers-throughput-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rui-servers-throughput-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rui-servers-throughput-row-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-xs);
}
.rui-servers-throughput-row-name { color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rui-servers-throughput-row-num { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rui-servers-throughput-row-bar {
    width: 100%;
    height: 6px;
    background: var(--color-hover-bg);
    border-radius: 999px;
    overflow: hidden;
}
.rui-servers-throughput-row-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* ─── Warmup status ─── */
.rui-servers-warmup-meter {
    width: 100%;
    height: 6px;
    background: var(--color-hover-bg);
    border-radius: 999px;
    overflow: hidden;
    margin-top: var(--space-2);
}
.rui-servers-warmup-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--chart-4);
    transition: width 0.3s ease;
}
.rui-servers-warmup-foot {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 6px;
}
.rui-servers-warmup-foot-num {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.rui-servers-warmup-help {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-top: 6px;
}

/* ─── Catalog rail ─── */
.rui-servers-catalog {
    padding: var(--space-2) var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rui-servers-catalog-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 0;
    font-size: var(--text-xs);
}
.rui-servers-catalog-row-on { /* connected */ }
.rui-servers-catalog-icon {
    color: var(--chart-2);
    font-size: 16px !important;
    flex-shrink: 0;
}
.rui-servers-catalog-icon-off {
    color: var(--color-text-disabled);
    font-size: 14px !important;
    flex-shrink: 0;
}
.rui-servers-catalog-name {
    flex: 1 1 auto;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rui-servers-catalog-name-off { color: var(--color-text-muted); }
.rui-servers-catalog-count {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--chart-2);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.rui-servers-catalog-more {
    font-size: 11px;
    color: var(--color-text-muted);
    padding-top: 4px;
}

/* ─── Setup checklist ─── */
.rui-servers-checklist {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.rui-servers-checklist-item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: var(--space-3);
    align-items: flex-start;
}
.rui-servers-checklist-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}
.rui-servers-checklist-body { min-width: 0; }
.rui-servers-checklist-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}
.rui-servers-checklist-icon {
    font-size: 16px !important;
    color: var(--color-text-muted);
}
.rui-servers-checklist-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.5;
}

/* ==================================================================
 * RUI — Customer Assets page (boxed layout, mirrors admin/subscriptions)
 * Namespace: rui-asset-* — page-scoped, never used outside /rui/assets.
 *
 * Visual personality vs admin/subscriptions:
 *   - 4-card KPI hero (vs subscriptions' 5) — fewer signals, more breathing room.
 *   - Storage hero card carries an inline thin progress bar instead of trend
 *     arrow because storage is bounded; trend doesn't add value.
 *   - Right rail dedicates its 4th card to TIPS — pure decoration to keep the
 *     column visually balanced for users with sparse libraries (the "trống
 *     trải" complaint that drove this redesign).
 *   - List card has a slim head band (search + DnD hint), no tabs (FileBrowser
 *     API doesn't support type filters yet — out-of-scope per plan).
 * ================================================================== */

/* ── KPI hero strip — 4 vertical stat cards w/ teal accent ── */
.rui-asset-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
@media (max-width: 1023px) { .rui-asset-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .rui-asset-stats { grid-template-columns: 1fr; } }

.rui-asset-stat-card {
    position: relative;
    padding: var(--space-4) var(--space-4) var(--space-3);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-height: 110px;
}
.rui-asset-stat-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--color-teal, #2bb7a8);
    opacity: 0.85;
}
.rui-asset-stat-card-attn::before { background: var(--chart-4, #e5a23a); }
.rui-asset-stat-card-warn::before { background: var(--color-error, #d14d4d); }

.rui-asset-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.rui-asset-stat-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--weight-semibold);
}
.rui-asset-stat-icon .material-symbols-rounded {
    font-size: 20px !important;
    color: var(--color-text-disabled);
}
.rui-asset-stat-card-attn .rui-asset-stat-icon .material-symbols-rounded { color: var(--chart-4, #e5a23a); }
.rui-asset-stat-card-warn .rui-asset-stat-icon .material-symbols-rounded { color: var(--color-error, #d14d4d); }

.rui-asset-stat-num {
    font-size: 28px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.1;
}
.rui-asset-stat-num-sm { font-size: 18px; }
.rui-asset-stat-num-currency {
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
    margin-left: 2px;
}
.rui-asset-stat-foot {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.rui-asset-stat-foot .material-symbols-rounded { font-size: 14px !important; }
.rui-asset-stat-foot-pct { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }

/* Inline thin storage bar inside the Storage KPI card foot. */
.rui-asset-stat-bar {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: var(--color-bg-subtle);
    overflow: hidden;
    min-width: 60px;
}
.rui-asset-stat-bar > div {
    height: 100%;
    background: var(--color-teal, #2bb7a8);
    border-radius: 2px;
}
.rui-asset-stat-card-attn .rui-asset-stat-bar > div { background: var(--chart-4, #e5a23a); }
.rui-asset-stat-card-warn .rui-asset-stat-bar > div { background: var(--color-error, #d14d4d); }

/* ── List card chrome — slim head band, then padded body. Full-width
 *    after sidebar removal: card now occupies the full content row. ── */
.rui-asset-list-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.rui-asset-list-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-light, var(--color-border));
    flex-wrap: wrap;
}
.rui-asset-search { flex: 1 1 240px; min-width: 200px; max-width: 420px; }
.rui-asset-list-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.rui-asset-list-hint .material-symbols-rounded { font-size: 16px !important; color: var(--color-teal, #2bb7a8); }
.rui-asset-list-body { padding: var(--space-3) var(--space-4) var(--space-4); }

@media (max-width: 640px) {
    .rui-asset-stat-num { font-size: 22px; }
}

/* ============================================================
 * mc-phone-input — C3 W3 (messenger opt-in / per-channel SF5)
 *
 * Wraps jackocnr/intl-tel-input v17 (vendored at
 * /core/phoneinput/). The lib provides the country-list + flag
 * sprite + libphonenumber-js parsing; we layer token-themed CSS
 * over its `.iti--*` classes so the widget feels native to the
 * refactor design system in both light + dark themes.
 *
 * State machine (data-state on .mc-phone-input):
 *   idle    — empty or required-empty
 *   valid   — libphonenumber says number is valid for the country
 *   invalid — typed but unparseable (or required + empty)
 *   warning — flagged country / unsupported-channel hint
 *
 * Channel tint (data-channel: sms | whatsapp | telegram):
 *   drives the FOCUSED border + dial-code color via the
 *   --msg-ch-* family promoted to core variables.css in W2.
 * ============================================================ */

.mc-phone-input {
    position: relative;
    display: block;
    width: 100%;
}

/* Reset iti's inline-block to play nice with full-width form layouts. */
.mc-phone-input .iti {
    display: block;
    width: 100%;
}

/* Theme the visible <input> via the existing mc-form-input chain so
 * the wrapper inherits Form Input typography + padding + radius. */
.mc-phone-input .iti input[type="tel"],
.mc-phone-input .iti input[type="text"] {
    width: 100%;
    height: var(--form-input-height, 40px);
    padding: var(--space-2) var(--space-3);
    /* iti adds left-padding dynamically when separateDialCode is true;
     * preserving its inline style is critical — DO NOT override here. */
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-input-bg, var(--color-card-bg));
    border: 1px solid var(--color-input-border, var(--color-border));
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mc-phone-input .iti input:hover {
    border-color: var(--color-input-border-hover, var(--color-border-strong, var(--color-border)));
}

.mc-phone-input .iti input:focus {
    border-color: var(--color-teal, #2bb7a8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal, #2bb7a8) 18%, transparent);
}

.mc-phone-input .iti input:disabled {
    background: color-mix(in srgb, var(--color-card-bg) 60%, var(--color-border));
    color: var(--color-text-disabled, var(--color-text-muted));
    cursor: not-allowed;
}

/* Channel-tinted focus ring — overrides the default teal when
 * data-channel is set on the wrapper. */
.mc-phone-input[data-channel="sms"] .iti input:focus,
.mc-phone-input[data-channel="whatsapp"] .iti input:focus,
.mc-phone-input[data-channel="telegram"] .iti input:focus {
    border-color: var(--mc-phone-input-tint, var(--color-teal));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-phone-input-tint, var(--color-teal)) 18%, transparent);
}
.mc-phone-input[data-channel="sms"]      { --mc-phone-input-tint: var(--msg-ch-sms,      #38b06f); }
.mc-phone-input[data-channel="whatsapp"] { --mc-phone-input-tint: var(--msg-ch-wa,       #d97f1e); }
.mc-phone-input[data-channel="telegram"] { --mc-phone-input-tint: var(--msg-ch-tg,       #7a5af8); }

/* Country selector (left-inset flag + dial code). */
.mc-phone-input .iti__flag-container {
    /* iti positions this absolutely; we just rebrand the surface. */
}
.mc-phone-input .iti__selected-flag {
    padding: 0 var(--space-2) 0 var(--space-3);
    background: transparent;
    border-right: 1px solid var(--color-border);
    transition: background-color 120ms ease;
    cursor: pointer;
}
.mc-phone-input .iti__selected-flag:hover {
    background: var(--color-card-bg-hover, color-mix(in srgb, var(--color-card-bg) 70%, var(--color-border)));
}
.mc-phone-input .iti__selected-flag:focus-visible {
    outline: 2px solid var(--color-teal, #2bb7a8);
    outline-offset: -2px;
}
.mc-phone-input .iti__selected-dial-code {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    padding-left: var(--space-1);
}

/* iti's CSS-triangle arrow — re-color to muted text and add a
 * minor easing on the up/down flip. */
.mc-phone-input .iti__arrow {
    border-top-color: var(--color-text-muted);
}
.mc-phone-input .iti__arrow--up {
    border-top-color: transparent;
    border-bottom-color: var(--color-text-muted);
}

/* Country list dropdown. */
.mc-phone-input .iti__country-list {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown, 0 4px 14px rgba(0, 0, 0, 0.10));
    max-height: 280px;
    margin-top: 4px;
    padding: 4px 0;
    z-index: 50;
}
.mc-phone-input .iti__country {
    padding: 8px 12px;
    color: var(--color-text);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.mc-phone-input .iti__country:hover,
.mc-phone-input .iti__country.iti__highlight {
    background: color-mix(in srgb, var(--color-teal, #2bb7a8) 10%, transparent);
}
.mc-phone-input .iti__country-name {
    color: var(--color-text);
    flex: 1;
    margin-right: var(--space-2);
}
.mc-phone-input .iti__dial-code {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.mc-phone-input .iti__divider {
    border-bottom-color: var(--color-border);
    margin: 4px 0;
}

/* Active (selected) country row — subtle tint on the channel
 * accent when present, fallback to teal. */
.mc-phone-input .iti__country.iti__active {
    background: color-mix(in srgb, var(--mc-phone-input-tint, var(--color-teal, #2bb7a8)) 14%, transparent);
}

/* Trailing slot — validation indicator. */
.mc-phone-input__trailing {
    position: absolute;
    /* iti puts the input flush right inside .iti; we position the
     * trailing slot OUTSIDE iti by inset from the wrapper. The 38px
     * inset preserves the flag-container's right-aligned default. */
    right: var(--space-3);
    top: 0;
    height: var(--form-input-height, 40px);
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    color: var(--color-text-muted);
}
.mc-phone-input__trailing[data-state="valid"]   { color: var(--color-success, #2fb568); }
.mc-phone-input__trailing[data-state="invalid"] { color: var(--color-error, #e0533d); }
.mc-phone-input__trailing[data-state="warning"] { color: var(--color-warning, #d97f1e); }

/* When separateDialCode is OFF, iti's flag container sits flush
 * right inside the input — push the trailing slot 36px further
 * right to avoid overlap. */
.mc-phone-input:not(:has(.iti--separate-dial-code)) .mc-phone-input__trailing {
    right: 44px;
}

/* State-driven border colors on the input (validation feedback). */
.mc-phone-input[data-state="valid"]   .iti input { border-color: var(--color-success, #2fb568); }
.mc-phone-input[data-state="invalid"] .iti input { border-color: var(--color-error,   #e0533d); }
.mc-phone-input[data-state="invalid"] .iti input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error, #e0533d) 18%, transparent);
}
.mc-phone-input[data-state="warning"] .iti input { border-color: var(--color-warning, #d97f1e); }

/* Help line below the input. */
.mc-phone-input__help {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    min-height: 1.25em; /* reserve vertical space to prevent layout jump */
    line-height: 1.4;
}
.mc-phone-input__help[data-tone="success"] { color: var(--color-success, #2fb568); }
.mc-phone-input__help[data-tone="danger"]  { color: var(--color-error,   #e0533d); }
.mc-phone-input__help[data-tone="warning"] { color: var(--color-warning, #d97f1e); }

/* Disabled wrapper — fades the entire stack. */
.mc-phone-input[data-state="disabled"] .iti__selected-flag {
    pointer-events: none;
    opacity: 0.6;
}

/* ------------------------------------------------------------
 * Mobile (≤480px) — fullscreen country dropdown drawer.
 * iti applies `.iti-mobile` to <body> when it detects mobile.
 * We restyle iti's modal drawer to feel native.
 * ------------------------------------------------------------ */

@media (max-width: 480px) {
    .mc-phone-input .iti__country-list {
        max-height: 60vh;
        margin-top: 0;
    }
}

.iti-mobile .iti.iti--container {
    /* iti uses position: fixed; we just retint the surface. */
    background: var(--color-card-bg);
}
.iti-mobile .iti.iti--container .iti__country-list {
    background: var(--color-card-bg);
    border: none;
    border-radius: var(--radius-md);
    max-height: 80vh;
    box-shadow: var(--shadow-modal, 0 10px 30px rgba(0, 0, 0, 0.20));
}

/* ------------------------------------------------------------
 * Reduced motion — disable the dropdown caret rotation easing.
 * ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .mc-phone-input .iti input,
    .mc-phone-input .iti__selected-flag {
        transition: none;
    }
}

/* ------------------------------------------------------------
 * RTL support — flip the trailing slot + flag container.
 * iti supports RTL natively when `dir="rtl"` is on the page or
 * ancestor; we just ensure the trailing slot inset flips too.
 * ------------------------------------------------------------ */

[dir="rtl"] .mc-phone-input__trailing {
    right: auto;
    left: var(--space-3);
}
[dir="rtl"] .mc-phone-input:not(:has(.iti--separate-dial-code)) .mc-phone-input__trailing {
    right: auto;
    left: 44px;
}
[dir="rtl"] .mc-phone-input .iti__selected-flag {
    border-right: none;
    border-left: 1px solid var(--color-border);
}

/* ============================================================
 * mc-deeplink-button — C5 W3 (channel-launch CTA + QR fallback)
 *
 * Drops onto any surface where the subscriber must reach a
 * vendor app via deep-link (tg://, https://t.me/, https://wa.me/).
 * Composes a channel-tinted button + adjacent auto-generated
 * QR PNG (rendered via /rui/qr SVG endpoint, theme-aware).
 *
 * Used by S3.3 SF5 Telegram subscribe field, S3.5 WhatsApp
 * polling waiting page (button-only mode), S3.6 Telegram
 * polling waiting page (button + QR).
 *
 * Layout modes (data-qr-position):
 *   right    — button left, QR right (default, ≥640px)
 *   bottom   — button top, QR below
 *   popover  — button only; QR opens in mc-popup on click
 *
 * Channel tint (data-channel: whatsapp | telegram):
 *   drives button surface + ink via --msg-ch-*. SMS is NOT a
 *   valid channel here (no SMS deep-link UX).
 * ============================================================ */

.mc-deeplink-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-5);
    padding: 0;
    background: transparent;
    border: 0;
}

/* Stacked layout (data-qr-position="bottom"). */
.mc-deeplink-button[data-qr-position="bottom"] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

/* Popover mode — QR is hidden by default; button shows a small
 * "Show QR" affordance below it. */
.mc-deeplink-button[data-qr-position="popover"] .mc-deeplink-button__qr-stack {
    display: none;
}

/* Button block — the channel-launch CTA. */
.mc-deeplink-button__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-5);
    height: 48px;
    min-width: 200px;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1;
    color: var(--mc-deeplink-button-ink, var(--color-text-on-primary, #ffffff));
    background: var(--mc-deeplink-button-tint, var(--color-teal, #2bb7a8));
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
    -webkit-tap-highlight-color: transparent;
}

.mc-deeplink-button__cta:hover {
    background: color-mix(in srgb, var(--mc-deeplink-button-tint, var(--color-teal)) 90%, #000);
    color: var(--mc-deeplink-button-ink, var(--color-text-on-primary, #ffffff));
    text-decoration: none;
    box-shadow: var(--shadow-modal, 0 8px 24px rgba(0, 0, 0, 0.12));
}

.mc-deeplink-button__cta:active {
    transform: translateY(1px);
}

.mc-deeplink-button__cta:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mc-deeplink-button-tint, var(--color-teal)) 50%, transparent);
    outline-offset: 2px;
}

.mc-deeplink-button__cta[aria-disabled="true"],
.mc-deeplink-button__cta:disabled {
    background: var(--color-border);
    color: var(--color-text-disabled, var(--color-text-muted));
    cursor: not-allowed;
    pointer-events: none;
}

.mc-deeplink-button__cta-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.mc-deeplink-button__cta-icon > svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Channel tints — full-saturation accent for the CTA (the
 * subtle-tint pattern from C20 chip is wrong here; a CTA needs
 * strong contrast to drive action). Uses the channel's brand
 * primary color promoted from variables.css. */
.mc-deeplink-button[data-channel="telegram"] {
    /* Telegram brand blue (#0088CC) — NOT --msg-ch-tg (soft purple, chip-tint).
     * The CSS comment above is explicit: CTAs need strong brand contrast,
     * not the subtle-tint pattern chips use. */
    --mc-deeplink-button-tint: #0088cc;
    --mc-deeplink-button-ink: #ffffff;
}
.mc-deeplink-button[data-channel="whatsapp"] {
    /* WhatsApp brand green (#25D366). */
    --mc-deeplink-button-tint: #25d366;
    --mc-deeplink-button-ink: #ffffff;
}
.mc-deeplink-button[data-channel="sms"] {
    /* SMS — Twilio brand red (#F22F46). Not currently used but covers
     * the third deeplink-able channel surface for completeness. */
    --mc-deeplink-button-tint: #f22f46;
    --mc-deeplink-button-ink: #ffffff;
}

/* QR stack — wraps the QR SVG + a small "scan with phone" caption.
 * On mobile (≤640) the QR is hidden by default unless data-qr-position="bottom"
 * is explicit; the popover affordance takes over. */
.mc-deeplink-button__qr-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    /* QR is always rendered as pure black-on-white SVG (controller forces
     * Rgb(0,0,0) on Rgb(255,255,255) — see L81). The stack background must
     * stay white in BOTH light + dark themes so the QR's white frame doesn't
     * sit on a dark surface (would create a hard light rectangle). */
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
}

.mc-deeplink-button__qr {
    display: block;
    width: var(--mc-deeplink-button-qr-size, 160px);
    height: var(--mc-deeplink-button-qr-size, 160px);
}

.mc-deeplink-button__qr-caption {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 2px;
    max-width: var(--mc-deeplink-button-qr-size, 160px);
}

/* QR sizes — data-qr-size variants. */
.mc-deeplink-button[data-qr-size="sm"] { --mc-deeplink-button-qr-size: 120px; }
.mc-deeplink-button[data-qr-size="md"] { --mc-deeplink-button-qr-size: 160px; }
.mc-deeplink-button[data-qr-size="lg"] { --mc-deeplink-button-qr-size: 240px; }

/* Dark theme — swap the QR SVG via two <source> children of a <picture>
 * element. The img src is the light variant; the source media query
 * swaps to dark. Bacon-rendered SVG bg is transparent so the QR composes
 * against the card surface in both themes. */
.mc-deeplink-button__qr-picture {
    display: block;
    line-height: 0; /* prevent inline-image baseline gap */
}

/* "Show QR" link for popover mode — sits below the CTA. */
.mc-deeplink-button__show-qr {
    display: none;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-decoration: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.mc-deeplink-button[data-qr-position="popover"] .mc-deeplink-button__show-qr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mc-deeplink-button__show-qr:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* Popover content — when McPopup opens the QR, we render the same
 * .mc-deeplink-button__qr-stack inside it; no special styling needed. */

/* ------------------------------------------------------------
 * Responsive — auto-popover ≤640px (QR useless on mobile since
 * the user is already holding the device that runs the app).
 * ------------------------------------------------------------ */

@media (max-width: 640px) {
    /* Auto-promote any "right"/"bottom" layout to popover on mobile.
     * Author opt-out: add data-keep-qr="true" to preserve QR display. */
    .mc-deeplink-button:not([data-keep-qr="true"]) .mc-deeplink-button__qr-stack {
        display: none;
    }
    .mc-deeplink-button:not([data-keep-qr="true"]) .mc-deeplink-button__show-qr {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .mc-deeplink-button__cta {
        width: 100%;
        min-width: 0;
    }
}

/* ------------------------------------------------------------
 * Reduced motion — disable transitions.
 * ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .mc-deeplink-button__cta { transition: none; }
}

/* ============================================================
 * mc-otp-input — C4 W3 (6-digit one-time-passcode entry)
 *
 * The only widget on S3.4 public SMS opt-in confirmation page.
 * 6 individual digit boxes with auto-tab forward, auto-tab
 * backward on backspace, full-code paste handling, iOS SMS
 * auto-fill via autocomplete="one-time-code" on the first box,
 * shake-on-error, and lock-after-3-attempts.
 *
 * State machine (data-state on .mc-otp-input):
 *   empty       — all boxes empty (or hasn't been touched)
 *   partial     — at least one digit typed, NOT all filled
 *   complete    — all 6 digits filled (pre-submit success tone)
 *   invalid     — server reported wrong code (shake + danger tone)
 *   locked      — too many wrong attempts; boxes disabled
 * ============================================================ */

.mc-otp-input {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.mc-otp-input__digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 64px;
    margin: 0 6px 0 0;
    padding: 0;
    text-align: center;
    font-size: 28px;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    background: var(--color-input-bg, var(--color-card-bg));
    border: 1.5px solid var(--color-input-border, var(--color-border));
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
    -webkit-tap-highlight-color: transparent;
    caret-color: var(--color-teal, #2bb7a8);
}
.mc-otp-input__digit:last-of-type {
    margin-right: 0;
}

.mc-otp-input__digit::placeholder {
    color: var(--color-text-disabled, var(--color-text-muted));
    font-weight: var(--weight-regular);
}

.mc-otp-input__digit:hover:not(:disabled) {
    border-color: var(--color-input-border-hover, var(--color-border-strong, var(--color-border)));
}

.mc-otp-input__digit:focus {
    border-color: var(--color-teal, #2bb7a8);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal, #2bb7a8) 22%, transparent);
}

.mc-otp-input__digit:disabled {
    background: color-mix(in srgb, var(--color-card-bg) 60%, var(--color-border));
    color: var(--color-text-disabled, var(--color-text-muted));
    cursor: not-allowed;
    border-color: var(--color-border);
}

/* State-driven border tones — composes per the mc-credential-input contract. */
.mc-otp-input[data-state="complete"] .mc-otp-input__digit:not(:focus) {
    border-color: var(--color-success, #2fb568);
    background: color-mix(in srgb, var(--color-success, #2fb568) 6%, var(--color-input-bg, var(--color-card-bg)));
}
.mc-otp-input[data-state="invalid"] .mc-otp-input__digit {
    border-color: var(--color-error, #e0533d);
    color: var(--color-error, #e0533d);
    background: color-mix(in srgb, var(--color-error, #e0533d) 6%, var(--color-input-bg, var(--color-card-bg)));
}
.mc-otp-input[data-state="invalid"] .mc-otp-input__digit:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error, #e0533d) 22%, transparent);
}
.mc-otp-input[data-state="locked"] .mc-otp-input__digit {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Help line below the boxes — error message / lock notice.
 * `flex-basis: 100%` forces it onto its own line below the digit row
 * (wrapper is `flex-direction: row + flex-wrap: wrap`). */
.mc-otp-input__help {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    min-height: 1.25em;
    line-height: 1.4;
}
.mc-otp-input__help[data-tone="success"] { color: var(--color-success, #2fb568); }
.mc-otp-input__help[data-tone="danger"]  { color: var(--color-error,   #e0533d); }
.mc-otp-input__help[data-tone="warning"] { color: var(--color-warning, #d97f1e); }

/* Shake animation — fires on error state via a class added by setError(). */
@keyframes mc-otp-input-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(3px); }
}

.mc-otp-input--shake {
    animation: mc-otp-input-shake 240ms cubic-bezier(.4, 0, .2, 1) 1;
}

/* Reduced motion — replace shake with a simple opacity pulse so the
 * user still gets a visible error cue without translation. */
@media (prefers-reduced-motion: reduce) {
    .mc-otp-input__digit { transition: none; }
    .mc-otp-input--shake {
        animation: none;
    }
    .mc-otp-input[data-state="invalid"] .mc-otp-input__digit {
        outline: 2px solid var(--color-error, #e0533d);
        outline-offset: 2px;
    }
}

/* ------------------------------------------------------------
 * Mobile (≤480px) — shrink boxes to fit a 6-box row inside a
 * mobile viewport with comfortable touch targets (≥44px wide).
 * ------------------------------------------------------------ */

@media (max-width: 480px) {
    .mc-otp-input__digit {
        width: 44px;
        height: 56px;
        font-size: 22px;
        margin: 0 4px 0 0;
    }
}

/* Extra small screens (320-360) — go to 40px boxes with 3px gap. */
@media (max-width: 360px) {
    .mc-otp-input__digit {
        width: 40px;
        height: 52px;
        font-size: 20px;
        margin: 0 3px 0 0;
    }
}

/* ------------------------------------------------------------
 * Size variants — data-size lets the page author override the
 * default box size (e.g., "lg" for fullscreen confirm pages,
 * "sm" for inline modals).
 * ------------------------------------------------------------ */

.mc-otp-input[data-size="sm"] .mc-otp-input__digit { width: 44px; height: 52px; font-size: 22px; margin-right: 4px; }
.mc-otp-input[data-size="lg"] .mc-otp-input__digit { width: 68px; height: 76px; font-size: 32px; margin-right: 8px; }

/* ------------------------------------------------------------
 * RTL support — flip box margins.
 * ------------------------------------------------------------ */

[dir="rtl"] .mc-otp-input__digit {
    margin: 0 0 0 6px;
}
[dir="rtl"] .mc-otp-input__digit:last-of-type {
    margin-left: 0;
}


/* ============================================================
 * mc-segment-counter — C6 W4 (SMS segment / encoding / cost preview)
 * ============================================================
 * Companion node inserted directly after a `<textarea data-mc-segment-counter>`.
 * Shows live char/cap usage as a thin progress bar, the active encoding
 * (GSM-7 / Unicode), segment count, optional cost preview, and a polite
 * notice for multi-segment / Unicode-upgrade / over-cap states.
 *
 * Tone tokens (data-tone) — driven by JS classifier, NEVER set by author:
 *   muted     → default, in safety margin (< 85% of current segment cap)
 *   attention → > 85% of single-segment cap (gentle nudge)
 *   warning   → 2+ segments (multi-segment cost increase)
 *   danger    → ≥ data-max-segments (soft cap exceeded)
 *
 * Discipline:
 *   - Tone colors route through --chart-N variables for the progress bar
 *     fill (this IS a chart of the segment progression — L13). Notice
 *     text + cap text use --color-text + --color-text-muted (semantic
 *     foreground, not chart color). Encoding pill uses semantic
 *     --color-text-secondary background (informational badge, not chart).
 *   - Encoding pill is monochrome — the channel chip carries the
 *     channel-tinted accent for the composer surface, not this counter.
 */
.mc-segment-counter {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5, var(--space-1));
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    user-select: none;
}

/* ── Row 1: progress bar + chars/cap ───────────────────────────── */
.mc-segment-counter__row--primary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.mc-segment-counter__progress {
    flex: 1 1 auto;
    height: 6px;
    background: var(--color-border-muted, var(--color-border));
    border-radius: 999px;
    overflow: hidden;
    min-width: 80px;
}
.mc-segment-counter__bar {
    height: 100%;
    background: var(--chart-1);
    border-radius: inherit;
    transition: width 120ms ease-out, background-color 200ms ease-out;
    will-change: width;
}
.mc-segment-counter[data-tone="muted"] .mc-segment-counter__bar     { background: var(--chart-1); }
.mc-segment-counter[data-tone="attention"] .mc-segment-counter__bar { background: var(--chart-3); }
.mc-segment-counter[data-tone="warning"] .mc-segment-counter__bar   { background: var(--chart-3); }
.mc-segment-counter[data-tone="danger"] .mc-segment-counter__bar    { background: var(--chart-5); }

.mc-segment-counter__chars {
    flex: 0 0 auto;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    color: var(--color-text);
    white-space: nowrap;
    min-width: 56px;
    text-align: right;
}
.mc-segment-counter__chars-now {
    font-weight: var(--weight-semibold);
}
.mc-segment-counter__chars-sep,
.mc-segment-counter__chars-cap {
    color: var(--color-text-muted);
    font-weight: var(--weight-regular);
}
.mc-segment-counter[data-tone="attention"] .mc-segment-counter__chars-now { color: var(--chart-3); }
.mc-segment-counter[data-tone="warning"] .mc-segment-counter__chars-now   { color: var(--chart-3); }
.mc-segment-counter[data-tone="danger"] .mc-segment-counter__chars-now    { color: var(--chart-5); }

/* ── Row 2: encoding pill · segments · cost · notice ───────────── */
.mc-segment-counter__row--meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1-5, var(--space-1));
    line-height: 1.5;
}
.mc-segment-counter__encoding {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
    cursor: help;
}
.mc-segment-counter[data-encoding="ucs-2"] .mc-segment-counter__encoding {
    background: color-mix(in srgb, var(--chart-3) 10%, transparent);
    border-color: color-mix(in srgb, var(--chart-3) 30%, var(--color-border));
    color: var(--chart-3);
}
.mc-segment-counter__sep {
    color: var(--color-text-muted);
    opacity: 0.6;
}
.mc-segment-counter__segments-count {
    font-family: var(--font-mono, monospace);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}
.mc-segment-counter[data-tone="warning"] .mc-segment-counter__segments-count,
.mc-segment-counter[data-tone="danger"]  .mc-segment-counter__segments-count {
    color: var(--chart-5);
}
.mc-segment-counter__cost {
    color: var(--color-text);
    font-family: var(--font-mono, monospace);
    font-weight: var(--weight-medium);
}
.mc-segment-counter__notice {
    color: var(--color-text-muted);
    font-style: italic;
    flex-basis: 100%;
    margin-top: var(--space-1);
    line-height: 1.4;
}
.mc-segment-counter[data-tone="danger"] .mc-segment-counter__notice {
    color: var(--chart-5);
    font-style: normal;
    font-weight: var(--weight-medium);
}
.mc-segment-counter[data-tone="warning"] .mc-segment-counter__notice {
    color: var(--chart-3);
    font-style: normal;
}

/* ── Responsive — narrow viewport ──────────────────────────────── */
@media (max-width: 480px) {
    .mc-segment-counter__chars {
        min-width: 48px;
        font-size: 10px;
    }
    .mc-segment-counter__row--meta {
        gap: var(--space-1);
    }
    .mc-segment-counter__notice {
        font-size: 10px;
    }
}

/* ── Reduce-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mc-segment-counter__bar {
        transition: none;
    }
}

/* ============================================================
 * mc-phone-mockup — C7 W4 (composer right-rail live preview)
 * ============================================================
 * Phone-shaped frame with channel-specific header chrome + bubble.
 * 3 channel variants (data-channel="sms|whatsapp|telegram") drive
 * the header (sender row, online status, action icons) and bubble
 * (color, direction, delivery-tick chrome).
 *
 * Discipline:
 *   - Channel tones route through --msg-ch-* tokens promoted to
 *     core variables.css in W2 (sms = blue, wa = green, tg = teal).
 *   - Bubble tints use rgba composites built from --msg-ch-* so the
 *     same green appears regardless of theme; light/dark only flips
 *     the phone shell + chat-area background.
 *   - Notch + home indicator are abstract — NO Apple/Android brand
 *     marks, NO carrier name, NO battery glyph. Brand-neutral.
 *   - Size variants (sm/default/lg) — `data-size` attr. Default is
 *     280×580 (composer right-rail); sm shrinks to 220×440 for cards;
 *     lg grows to 340×680 for full-page previews.
 *
 * Mounted by PhoneMockup.js (idempotent). Author markup:
 *   <div data-mc-phone-mockup data-channel="sms"
 *        data-bind-to="#composer-textarea"
 *        data-sender-name="Acme Co"></div>
 */
.mc-phone-mockup {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    --mockup-width: 280px;
    --mockup-height: 580px;
    --mockup-radius: 38px;
    --mockup-notch-w: 100px;
    --mockup-notch-h: 22px;
    --mockup-padding: 12px;
    --mockup-screen-bg: var(--color-card-bg);
    --mockup-frame-bg: var(--color-text);
    --mockup-frame-shadow: 0 24px 60px -16px rgba(15, 23, 42, 0.35), 0 8px 24px -8px rgba(15, 23, 42, 0.15);
}
.mc-phone-mockup[data-size="sm"]     { --mockup-width: 220px; --mockup-height: 440px; --mockup-radius: 30px; --mockup-notch-w: 80px; --mockup-notch-h: 18px; --mockup-padding: 8px; }
.mc-phone-mockup[data-size="lg"]     { --mockup-width: 340px; --mockup-height: 680px; --mockup-radius: 46px; --mockup-notch-w: 120px; --mockup-notch-h: 26px; --mockup-padding: 16px; }

/* ── Frame (phone outline) ────────────────────────────────────── */
.mc-phone-mockup__frame {
    position: relative;
    width: var(--mockup-width);
    height: var(--mockup-height);
    background: var(--mockup-frame-bg);
    border-radius: var(--mockup-radius);
    padding: var(--mockup-padding);
    box-shadow: var(--mockup-frame-shadow);
    overflow: hidden;
}
.mc-phone-mockup__notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--mockup-notch-w);
    height: var(--mockup-notch-h);
    background: var(--mockup-frame-bg);
    border-radius: 0 0 14px 14px;
    z-index: 2;
}
.mc-phone-mockup__home-indicator {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 3px;
    background: color-mix(in srgb, var(--color-card-bg) 60%, transparent);
    border-radius: 3px;
    z-index: 2;
}

/* ── Screen (chat surface) ────────────────────────────────────── */
.mc-phone-mockup__screen {
    width: 100%;
    height: 100%;
    background: var(--mockup-screen-bg);
    border-radius: calc(var(--mockup-radius) - 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ── Chat header (channel-specific) ───────────────────────────── */
.mc-phone-mockup__chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 28px 12px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    background: color-mix(in srgb, var(--mockup-screen-bg) 92%, var(--color-text) 8%);
    flex-shrink: 0;
    color: var(--color-text);
    font-size: 11px;
}
.mc-phone-mockup__chat-header-back {
    flex: 0 0 auto;
    color: var(--msg-ch-sms, var(--chart-1));
    display: inline-flex;
}
.mc-phone-mockup[data-channel="whatsapp"] .mc-phone-mockup__chat-header-back  { color: var(--msg-ch-wa, var(--chart-2)); }
.mc-phone-mockup[data-channel="telegram"] .mc-phone-mockup__chat-header-back  { color: var(--msg-ch-tg, var(--chart-1)); }
.mc-phone-mockup__chat-header-avatar {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-card-bg);
}
.mc-phone-mockup__chat-header-avatar--wa { background: var(--msg-ch-wa, var(--chart-2)); }
.mc-phone-mockup__chat-header-avatar--tg { background: var(--msg-ch-tg, var(--chart-1)); }
.mc-phone-mockup__chat-header-id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.mc-phone-mockup__chat-header-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-phone-mockup__chat-header-sub {
    font-size: 9px;
    color: var(--color-text-muted);
}
.mc-phone-mockup__chat-header-icons {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 8px;
    color: var(--msg-ch-wa, var(--chart-2));
}

/* ── Chat area (scrollable bubbles) ───────────────────────────── */
.mc-phone-mockup__chat-area {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 10px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--mockup-screen-bg) 98%, var(--color-text) 2%) 0%, var(--mockup-screen-bg) 100%);
}
.mc-phone-mockup[data-channel="whatsapp"] .mc-phone-mockup__chat-area {
    background-color: color-mix(in srgb, var(--msg-ch-wa, var(--chart-2)) 4%, var(--mockup-screen-bg));
}
.mc-phone-mockup[data-channel="telegram"] .mc-phone-mockup__chat-area {
    background-color: color-mix(in srgb, var(--msg-ch-tg, var(--chart-1)) 4%, var(--mockup-screen-bg));
}

/* ── Bubble ────────────────────────────────────────────────────── */
.mc-phone-mockup__bubble {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 10px;
    border-radius: 14px;
    font-size: 11px;
    line-height: 1.35;
    max-width: 80%;
    word-wrap: break-word;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}
.mc-phone-mockup__bubble--inbound {
    align-self: flex-start;
    background: color-mix(in srgb, var(--color-text) 8%, var(--mockup-screen-bg));
    color: var(--color-text);
    border-bottom-left-radius: 4px;
}
.mc-phone-mockup__bubble--outbound {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.mc-phone-mockup[data-channel="whatsapp"] .mc-phone-mockup__bubble--outbound {
    background: color-mix(in srgb, var(--msg-ch-wa, var(--chart-2)) 22%, var(--mockup-screen-bg));
    color: var(--color-text);
}
.mc-phone-mockup[data-channel="telegram"] .mc-phone-mockup__bubble--outbound {
    background: color-mix(in srgb, var(--msg-ch-tg, var(--chart-1)) 22%, var(--mockup-screen-bg));
    color: var(--color-text);
}
.mc-phone-mockup__bubble--empty {
    opacity: 0.65;
    font-style: italic;
}
.mc-phone-mockup__bubble-body {
    color: var(--color-text);
}
.mc-phone-mockup__bubble--empty .mc-phone-mockup__bubble-body {
    color: var(--color-text-muted);
}
.mc-phone-mockup__bubble-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--color-text-muted);
    align-self: flex-end;
}
.mc-phone-mockup__bubble-time--side {
    align-self: center;
    margin-top: 4px;
}
.mc-phone-mockup__bubble-ticks {
    color: var(--msg-ch-wa, var(--chart-2));
    display: inline-flex;
}
.mc-phone-mockup__bubble-empty-text {
    color: var(--color-text-muted);
}

/* ── Inline keyboard (Telegram only) ──────────────────────────── */
.mc-phone-mockup__keyboard {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.mc-phone-mockup__keyboard-btn {
    background: color-mix(in srgb, var(--msg-ch-tg, var(--chart-1)) 12%, var(--mockup-screen-bg));
    border: 1px solid color-mix(in srgb, var(--msg-ch-tg, var(--chart-1)) 25%, transparent);
    color: var(--msg-ch-tg, var(--chart-1));
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 500;
    text-align: center;
    transition: background 120ms ease-out;
}
.mc-phone-mockup__keyboard-btn:hover {
    background: color-mix(in srgb, var(--msg-ch-tg, var(--chart-1)) 18%, var(--mockup-screen-bg));
}

/* ── Sticky variant (composer right-rail) ─────────────────────── */
.mc-phone-mockup--sticky {
    position: sticky;
    top: var(--space-4);
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mc-phone-mockup__keyboard-btn {
        transition: none;
    }
}

/* ============================================================================
   MC-TEMPLATE-PICKER — C8 / W4 — WhatsApp template picker grid + filter rail
   Used by S4.4 WA composer, S4.7 templates manager, S4.8 template editor.
   Status pills use SEMANTIC colours (state, not chart data) per L13 carve-out.
   Category badges use --chart-N (categorical visual; stable per-category map).
   ============================================================================ */
.mc-template-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

.mc-template-picker__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-subtle, var(--color-card-bg));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}
.mc-template-picker__filter {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mc-template-picker__filter-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mc-template-picker__filter-select,
.mc-template-picker__filter-input {
    width: 100%;
    font-size: var(--text-sm);
}
.mc-template-picker__filter--search {
    grid-column: 1 / -1;
}

.mc-template-picker__disabled-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: color-mix(in srgb, var(--color-warning, #f59e0b) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 30%, transparent);
    border-radius: var(--radius-card);
    color: var(--color-text-base);
    font-size: var(--text-sm);
    line-height: 1.4;
}
.mc-template-picker__disabled-banner svg {
    flex-shrink: 0;
    color: var(--color-warning, #f59e0b);
}

.mc-template-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}

.mc-template-picker__card {
    appearance: none;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-3);
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out, transform 120ms ease-out;
    color: var(--color-text-base);
    font: inherit;
    width: 100%;
    min-width: 0;
}
.mc-template-picker__card:hover {
    border-color: var(--color-text-muted);
    box-shadow: var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.06));
}
.mc-template-picker__card:focus-visible {
    outline: 2px solid var(--color-teal, var(--color-text-base));
    outline-offset: 2px;
}
.mc-template-picker__card.is-selected {
    border-color: var(--color-teal, var(--color-text-base));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal, var(--color-text-base)) 18%, transparent);
}

.mc-template-picker__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.mc-template-picker__card-cat {
    --cat-tone: var(--chart-1);
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--cat-tone) 18%, transparent);
    color: var(--color-text-base);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: capitalize;
    line-height: 1.4;
}
.mc-template-picker__card-status {
    text-transform: capitalize;
}

.mc-template-picker__card-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text-base);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    word-break: break-all;
    line-height: 1.3;
}

.mc-template-picker__card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mc-template-picker__card-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--color-bg-subtle, color-mix(in srgb, var(--color-text-muted) 12%, transparent));
    color: var(--color-text-muted);
    border-radius: 999px;
    font-size: var(--text-xs);
    line-height: 1.4;
}

.mc-template-picker__card-body {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Skeleton cards (loading state) */
.mc-template-picker__card--skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-subtle, color-mix(in srgb, var(--color-text-muted) 10%, transparent)) 0%,
        color-mix(in srgb, var(--color-text-muted) 18%, transparent) 50%,
        var(--color-bg-subtle, color-mix(in srgb, var(--color-text-muted) 10%, transparent)) 100%
    );
    background-size: 200% 100%;
    animation: mc-template-picker-shimmer 1.4s linear infinite;
    min-height: 140px;
    pointer-events: none;
    cursor: default;
}
@keyframes mc-template-picker-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty state */
.mc-template-picker__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6);
    background: var(--color-bg-subtle, var(--color-card-bg));
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-text-muted);
    gap: var(--space-3);
}
.mc-template-picker__empty-icon {
    color: var(--color-text-muted);
}
.mc-template-picker__empty-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text-base);
}
.mc-template-picker__empty-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.mc-template-picker__empty-chip {
    display: inline-flex;
    padding: 2px 8px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .mc-template-picker__card { transition: none; }
    .mc-template-picker__card--skeleton { animation: none; }
}


/* ============================================================================
   MC-RICH-BUTTON-BUILDER — C9 / W4 — repeatable {label + type + value} rows
   Used by S4.5 Telegram inline keyboard + S4.8 WhatsApp template CTAs.
   No drag-and-drop — explicit ↑/↓ buttons keep keyboard/screen-reader/mobile parity.
   ============================================================================ */
.mc-rich-button-builder {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.mc-rich-button-builder__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mc-rich-button-builder__row {
    display: grid;
    grid-template-columns: 1fr 140px 1.5fr auto;
    align-items: end;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    margin: 0;
    position: relative;
}
.mc-rich-button-builder__row.has-error {
    border-color: var(--color-danger, #dc2626);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger, #dc2626) 14%, transparent);
}

.mc-rich-button-builder__row-legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    padding: 0;
    border: 0;
}

.mc-rich-button-builder__row-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.mc-rich-button-builder__row-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mc-rich-button-builder__row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mc-rich-button-builder__row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button, 6px);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.mc-rich-button-builder__row-btn:hover:not(:disabled) {
    background: var(--color-bg-subtle, color-mix(in srgb, var(--color-text-muted) 10%, transparent));
    border-color: var(--color-text-muted);
    color: var(--color-text-base);
}
.mc-rich-button-builder__row-btn:focus-visible {
    outline: 2px solid var(--color-teal, var(--color-text-base));
    outline-offset: 2px;
}
.mc-rich-button-builder__row-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mc-rich-button-builder__row-btn--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-danger, #dc2626) 12%, transparent);
    border-color: var(--color-danger, #dc2626);
    color: var(--color-danger, #dc2626);
}

.mc-rich-button-builder__row-error {
    grid-column: 1 / -1;
    font-size: var(--text-xs);
    color: var(--color-danger, #dc2626);
    line-height: 1.4;
    margin-top: 4px;
}

.mc-rich-button-builder__add {
    align-self: flex-start;
}
.mc-rich-button-builder__add-cap-hint {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-left: 4px;
}

.mc-rich-button-builder__empty {
    padding: var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle, var(--color-card-bg));
}
.mc-rich-button-builder__empty-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-base);
    margin-bottom: 4px;
}
.mc-rich-button-builder__empty-body {
    font-size: var(--text-sm);
}

@media (max-width: 767px) {
    .mc-rich-button-builder__row {
        grid-template-columns: 1fr;
    }
    .mc-rich-button-builder__row-actions {
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-rich-button-builder__row-btn { transition: none; }
}

/* ============================================================================
 * mc-conv-bubble — C12 W6 (chat bubble — atom of the conversation thread)
 *
 * Direction modifier: --in (inbound left-aligned) | --out (outbound right-aligned)
 * Channel tone via data-channel="sms|whatsapp|telegram|email" → --bubble-tone-*
 * Status tray (outbound only): pending/sent/delivered/read/failed/bounced/unsubscribed
 * Optional: reply quote inset, media slot (img/audio/video/document)
 *
 * Spec: docs/messenger/COMPONENT-PROPOSALS.md#c12--mc-conv-bubble
 * Showcase anchor: /rui/ui#mc-conv-bubble
 * ============================================================================ */

.mc-conv-bubble {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3) var(--space-1-5);
    border-radius: var(--bubble-radius);
    max-width: var(--bubble-max-width);
    background: var(--bubble-bg-in);
    color: var(--color-text);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-2);
    list-style: none;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* L114 — parent .mc-conv-thread__list is `flex column`, so `justify-self`
   (grid-only) was silently ignored — outbound bubbles never truly right-aligned,
   leaving a visible gap. Use `align-self` (which controls cross-axis = horizontal
   in column flex) for correct left/right alignment. */
.mc-conv-bubble--in {
    align-self: flex-start;
    justify-self: start;
    border-bottom-left-radius: var(--bubble-radius-tail);
}

.mc-conv-bubble--out {
    align-self: flex-end;
    justify-self: end;
    background: var(--bubble-bg-out);
    border-bottom-right-radius: var(--bubble-radius-tail);
}

/* Channel-tone accent strip — 2px on the bubble's tail side */
.mc-conv-bubble--in[data-channel="sms"]       { border-left: 2px solid var(--bubble-tone-sms); }
.mc-conv-bubble--in[data-channel="whatsapp"]  { border-left: 2px solid var(--bubble-tone-whatsapp); }
.mc-conv-bubble--in[data-channel="telegram"]  { border-left: 2px solid var(--bubble-tone-telegram); }
.mc-conv-bubble--in[data-channel="email"]     { border-left: 2px solid var(--bubble-tone-email); }
.mc-conv-bubble--out[data-channel="sms"]      { border-right: 2px solid var(--bubble-tone-sms); }
.mc-conv-bubble--out[data-channel="whatsapp"] { border-right: 2px solid var(--bubble-tone-whatsapp); }
.mc-conv-bubble--out[data-channel="telegram"] { border-right: 2px solid var(--bubble-tone-telegram); }
.mc-conv-bubble--out[data-channel="email"]    { border-right: 2px solid var(--bubble-tone-email); }

/* Body */
.mc-conv-bubble__body {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    margin: 0;
    white-space: pre-wrap;
    color: var(--color-text);
}

/* Reply quote inset */
.mc-conv-bubble__quote {
    display: grid;
    gap: 2px;
    padding: var(--space-1-5) var(--space-2);
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid var(--bubble-tone-sms);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 120ms ease;
}
[data-theme="dark"] .mc-conv-bubble__quote {
    background: rgba(255, 255, 255, 0.04);
}
.mc-conv-bubble__quote:hover {
    background: rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .mc-conv-bubble__quote:hover {
    background: rgba(255, 255, 255, 0.07);
}
.mc-conv-bubble__quote-author {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}
.mc-conv-bubble__quote-body {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mc-conv-bubble[data-channel="whatsapp"]  .mc-conv-bubble__quote { border-left-color: var(--bubble-tone-whatsapp); }
.mc-conv-bubble[data-channel="telegram"]  .mc-conv-bubble__quote { border-left-color: var(--bubble-tone-telegram); }
.mc-conv-bubble[data-channel="email"]     .mc-conv-bubble__quote { border-left-color: var(--bubble-tone-email); }

/* Media slot — image, audio, video, document */
.mc-conv-bubble__media {
    display: block;
    margin: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-width: 320px;
}
.mc-conv-bubble__media img,
.mc-conv-bubble__media video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 320px;
    max-height: 240px;
    object-fit: cover;
    cursor: zoom-in;
}
.mc-conv-bubble__media audio {
    width: 100%;
    min-width: 220px;
}
.mc-conv-bubble__media--document {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: var(--color-text);
}
[data-theme="dark"] .mc-conv-bubble__media--document {
    background: rgba(255, 255, 255, 0.06);
}
.mc-conv-bubble__media-doc-icon {
    width: 32px;
    height: 32px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.mc-conv-bubble__media-doc-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.mc-conv-bubble__media-doc-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-conv-bubble__media-doc-size {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Meta row — time + status tray */
.mc-conv-bubble__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    justify-self: end;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1;
}
.mc-conv-bubble--in .mc-conv-bubble__meta {
    justify-self: start;
}

.mc-conv-bubble__time {
    font-variant-numeric: tabular-nums;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mc-conv-bubble__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 12px;
    color: var(--color-text-muted);
}

.mc-conv-bubble__status svg {
    width: 16px;
    height: 12px;
}

.mc-conv-bubble__status--read {
    color: var(--bubble-tone-sms);
}
.mc-conv-bubble[data-channel="whatsapp"] .mc-conv-bubble__status--read { color: var(--bubble-tone-whatsapp); }
.mc-conv-bubble[data-channel="telegram"] .mc-conv-bubble__status--read { color: var(--bubble-tone-telegram); }

.mc-conv-bubble__status--failed {
    color: var(--color-error);
}

.mc-conv-bubble__status--bounced {
    color: var(--color-error);
}

.mc-conv-bubble__status--unsubscribed {
    color: var(--color-text-muted);
}

/* Hover-only kebab menu — positioned OUTSIDE the bubble on the center-facing
   side so it never overlays text. Outbound (right-aligned) → kebab on left;
   inbound (left-aligned) → kebab on right. Both point towards conversation
   center, matching WhatsApp / Telegram / Slack pattern. */
.mc-conv-bubble__menu {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mc-conv-bubble--out .mc-conv-bubble__menu {
    /* outbound bubble is right-aligned → kebab on its left (towards center) */
    left: -34px;
    right: auto;
}
.mc-conv-bubble--in .mc-conv-bubble__menu {
    /* inbound bubble is left-aligned → kebab on its right (towards center) */
    right: -34px;
    left: auto;
}

/* L116 — hover-bridge pseudo-element. Without this, the 34px gap between the
   bubble visual box and the kebab kills the bubble:hover state mid-transit,
   making the kebab unreachable. ::before extends the bubble's hover-active
   area into the gap so the pointer can travel from bubble → kebab without
   losing hover. Only present in hover/focus-within state — when bubble isn't
   active, the bridge has pointer-events:none and is invisible. */
.mc-conv-bubble::before {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 38px;
    pointer-events: none;
}
.mc-conv-bubble--out::before { left: -38px; right: auto; }
.mc-conv-bubble--in::before  { right: -38px; left: auto; }
.mc-conv-bubble:hover::before,
.mc-conv-bubble:focus-within::before {
    pointer-events: auto;
}
.mc-conv-bubble:hover .mc-conv-bubble__menu,
.mc-conv-bubble:focus-within .mc-conv-bubble__menu {
    opacity: 1;
    pointer-events: auto;
}
.mc-conv-bubble__menu:hover {
    background: rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .mc-conv-bubble__menu:hover {
    background: rgba(255, 255, 255, 0.10);
}
.mc-conv-bubble__menu svg {
    width: 14px;
    height: 14px;
}

/* Failed retry CTA — clickable status icon when failed */
.mc-conv-bubble__retry {
    background: transparent;
    border: 0;
    color: var(--color-error);
    cursor: pointer;
    font-size: var(--text-xs);
    text-decoration: underline;
    padding: 0;
    margin-left: var(--space-1);
}

/* Emoji-only mode — strip background + scale 2.5× */
.mc-conv-bubble--emoji-only {
    background: transparent;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
    padding: 0;
    margin-bottom: var(--space-2);
}
.mc-conv-bubble--emoji-only .mc-conv-bubble__body {
    font-size: calc(var(--text-base) * 2.5);
    line-height: 1.1;
}
.mc-conv-bubble--emoji-only .mc-conv-bubble__meta {
    margin-top: var(--space-1);
}

/* Failed bubble — subtle red bg tint to surface as alert */
.mc-conv-bubble[data-status="failed"] {
    background: var(--color-error-bg);
}
[data-theme="dark"] .mc-conv-bubble[data-status="failed"] {
    background: rgba(248, 113, 113, 0.10);
}

/* Sr-only utility (announce direction for screen readers) */
.mc-conv-bubble .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile <480 — slightly narrower max width + smaller text */
@media (max-width: 480px) {
    .mc-conv-bubble {
        max-width: 85%;
        font-size: var(--text-sm);
    }
    .mc-conv-bubble__body {
        font-size: var(--text-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-conv-bubble__menu,
    .mc-conv-bubble__quote { transition: none; }
}

/* ============================================================================
 * mc-conv-thread — C11 W6 (center pane of SF6 master-detail unified inbox)
 *
 * Composes C12 mc-conv-bubble into a sticky-header + scrollable-bubble-list +
 * footer-slot grid. Day dividers between bubbles on different calendar days.
 * Infinite-scroll-up via mc-conv-thread:load-older CustomEvent. Read watermark
 * via IntersectionObserver. Mobile single-pane mode with back-arrow.
 *
 * Spec: docs/messenger/COMPONENT-PROPOSALS.md#c11--mc-conv-thread
 * Showcase anchor: /rui/ui#mc-conv-thread
 * ============================================================================ */

.mc-conv-thread {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    min-height: 400px;
    max-height: 100%;
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
    position: relative;
}

/* Header — sticky, contains subscriber name + channel chip + status menu + kebab */
.mc-conv-thread__header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-bg);
    border-bottom: 1px solid var(--color-border);
    min-height: 56px;
}

.mc-conv-thread__back {
    display: none;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    border-radius: var(--radius-full);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.mc-conv-thread__back:hover {
    background: var(--color-hover-bg);
}
.mc-conv-thread__back svg {
    width: 20px;
    height: 20px;
}

.mc-conv-thread__header-name {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.mc-conv-thread__header-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-conv-thread__header-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    /* L117 — header sub now hosts canonical .mc-msg-channel-chip-sm
       + an optional "N unread" counter text inline. Flex layout keeps
       the chip + counter aligned vertically with the title above. */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 20px;
}
.mc-conv-thread__header-unread {
    color: var(--color-text-muted);
}

.mc-conv-thread__header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    /* L113 — push to right edge of header (was sitting in the middle because
       the 1fr column stretched). margin-left: auto reliably right-aligns the
       block regardless of grid template ambiguity. */
    margin-left: auto;
}

.mc-conv-thread__status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background 120ms ease;
}
.mc-conv-thread__status-pill:hover,
.mc-conv-thread__status-pill[aria-expanded="true"] {
    background: var(--color-hover-bg);
}
.mc-conv-thread__status-pill-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-success);
}
.mc-conv-thread__status-pill-dot--snoozed { background: var(--color-warning); }
.mc-conv-thread__status-pill-dot--closed  { background: var(--color-text-muted); }
.mc-conv-thread__status-pill-chevron {
    width: 12px;
    height: 12px;
    opacity: 0.6;
}

/* S6.8 — Thread header actions dropdown menu */
.mc-conv-thread__header-actions {
    position: relative;
}
.mc-conv-thread__actions-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 240px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-popover, 0 8px 24px rgba(0, 0, 0, 0.12));
    padding: var(--space-1) 0;
    display: flex;
    flex-direction: column;
}
.mc-conv-thread__actions-menu[hidden] {
    display: none;
}
.mc-conv-thread__actions-menu-section {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}
.mc-conv-thread__actions-menu-section-label {
    padding: 4px var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--weight-semibold);
}
.mc-conv-thread__actions-menu-item {
    appearance: none;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 8px var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.mc-conv-thread__actions-menu-item:hover,
.mc-conv-thread__actions-menu-item:focus-visible {
    background: var(--color-hover-bg);
    outline: none;
}
.mc-conv-thread__actions-menu-item--danger {
    color: var(--color-danger, #c53030);
}
.mc-conv-thread__actions-menu-divider {
    height: 1px;
    margin: 2px 0;
    background: var(--color-border);
}

/* Variant: info banner (snoozed) — calmer tone than closed warning */
.mc-conv-thread__readonly-banner--info {
    background: var(--color-info-bg, color-mix(in srgb, var(--color-primary) 8%, transparent));
}

/* S6.5 — Bulk-select multi-row toggle */
.mc-conv-thread-list[data-bulk-mode="true"] .mc-conv-thread-list__row {
    position: relative;
}
.mc-conv-thread-list[data-bulk-mode="true"] .mc-conv-thread-list__row::before {
    content: '';
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card-bg);
    z-index: 1;
}
.mc-conv-thread-list[data-bulk-mode="true"] .mc-conv-thread-list__row[data-bulk-selected="true"]::before {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.mc-conv-thread-list[data-bulk-mode="true"] .mc-conv-thread-list__row[data-bulk-selected="true"]::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 50%;
    width: 4px;
    height: 9px;
    border: solid var(--color-card-bg);
    border-width: 0 2px 2px 0;
    transform: translateY(-65%) rotate(45deg);
    z-index: 2;
}
.mc-conv-thread-list[data-bulk-mode="true"] .mc-conv-thread-list__row > * {
    margin-left: 24px;
}
.mc-conv-thread-list[data-bulk-mode="true"] .mc-conv-thread-list__row > .mc-conv-thread-list__avatar {
    margin-left: 24px;
}

/* S6.8 — Toast for status-change confirmations */
.mc-conv-toast {
    position: fixed;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 1000;
    padding: var(--space-2) var(--space-4);
    background: var(--color-text);
    color: var(--color-card-bg);
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    box-shadow: var(--shadow-popover, 0 8px 24px rgba(0, 0, 0, 0.18));
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}
.mc-conv-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.mc-conv-thread__kebab {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mc-conv-thread__kebab:hover {
    background: var(--color-hover-bg);
}

/* Scrollable bubble area */
.mc-conv-thread__list {
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3) var(--space-4);
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-page-bg);
    position: relative;
}

/* Day divider — between bubbles on different calendar days */
.mc-conv-thread__day-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-3) 0;
    list-style: none;
    user-select: none;
}
.mc-conv-thread__day-divider time {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: 4px 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Loading-older spinner row */
.mc-conv-thread__loading-older {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}
.mc-conv-thread__loading-older::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-teal);
    border-radius: var(--radius-full);
    animation: mc-conv-thread-spin 800ms linear infinite;
    margin-right: var(--space-1);
}
@keyframes mc-conv-thread-spin {
    to { transform: rotate(360deg); }
}

/* "N new messages" floater — shows when scrolled up + new inbound arrives */
.mc-conv-thread__new-floater {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-4);
    background: var(--color-teal);
    color: var(--color-white);
    border: 0;
    border-radius: var(--radius-full);
    padding: 6px 14px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    box-shadow: var(--shadow-modal);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}
.mc-conv-thread__new-floater--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.mc-conv-thread__new-floater svg {
    width: 14px;
    height: 14px;
}

/* Compose footer slot — consumer places C13 here */
.mc-conv-thread__footer {
    padding: 0;
    background: var(--color-card-bg);
    border-top: 1px solid var(--color-border);
}

/* Read-only banner (closed / snoozed conversation) */
.mc-conv-thread__readonly-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-warning-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    border-top: 1px solid var(--color-border);
}
.mc-conv-thread__readonly-banner-cta {
    background: transparent;
    border: 1px solid var(--color-text-muted);
    color: var(--color-text);
    padding: 4px 10px;
    border-radius: var(--radius-input);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

/* Highlight ring (used by scrollToMessage(messageUid)) */
.mc-conv-bubble--highlight {
    box-shadow: 0 0 0 3px var(--color-teal-ring), var(--shadow-card);
    transition: box-shadow 600ms ease;
}

/* State: loading — skeleton bubbles */
.mc-conv-thread[data-state="loading"] .mc-conv-thread__list {
    pointer-events: none;
}
.mc-conv-thread__skeleton {
    list-style: none;
    width: 60%;
    max-width: 280px;
    height: 56px;
    margin: 0 0 var(--space-2);
    border-radius: var(--bubble-radius);
    background: linear-gradient(90deg,
        var(--color-hover-bg) 0%,
        var(--color-active-bg) 50%,
        var(--color-hover-bg) 100%);
    background-size: 200% 100%;
    animation: mc-conv-thread-shimmer 1400ms ease-in-out infinite;
}
.mc-conv-thread__skeleton--out {
    align-self: flex-end;
}
@keyframes mc-conv-thread-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* State: empty — bespoke SVG + caption */
.mc-conv-thread[data-state="empty"] .mc-conv-thread__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mc-conv-thread__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
    max-width: 320px;
}
.mc-conv-thread__empty-svg {
    width: 96px;
    height: 96px;
    color: var(--illust-stroke);
}

/* State: error — alert + retry */
.mc-conv-thread[data-state="error"] .mc-conv-thread__list {
    align-items: stretch;
}
.mc-conv-thread__error {
    margin: var(--space-3) auto;
    max-width: 480px;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-card);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-sm);
}
.mc-conv-thread__error-retry {
    background: var(--color-error);
    color: var(--color-white);
    border: 0;
    padding: 6px 12px;
    border-radius: var(--radius-input);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

/* Mobile <768 — single-pane mode (back arrow visible) */
@media (max-width: 767px) {
    .mc-conv-thread__back {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-conv-thread__skeleton,
    .mc-conv-thread__loading-older::before,
    .mc-conv-bubble--highlight,
    .mc-conv-thread__new-floater { animation: none; transition: none; }
}

/* ============================================================================
 * mc-conv-thread-list — C10 W6 (left sidebar of SF6 master-detail unified inbox)
 *
 * Vertical list of conversation rows sorted by last_message_at desc.
 * Each row: avatar + name + last-msg preview + channel chip + unread badge + timestamp.
 * Filter rail at top (status / channel / search). Bulk-select mode.
 *
 * Spec: docs/messenger/COMPONENT-PROPOSALS.md#c10--mc-conv-thread-list
 * Showcase anchor: /rui/ui#mc-conv-thread-list
 * ============================================================================ */

.mc-conv-thread-list {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 400px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* Filter rail — sticky 56px, holds chips + search */
.mc-conv-thread-list__filters {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-card-bg);
}

.mc-conv-thread-list__filter-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.mc-conv-thread-list__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.mc-conv-thread-list__chip:hover {
    background: var(--color-hover-bg);
}
.mc-conv-thread-list__chip[aria-pressed="true"] {
    background: var(--color-teal-light);
    color: var(--color-teal);
    border-color: var(--color-teal);
}

.mc-conv-thread-list__search {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-input);
    background: var(--color-subtle-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-conv-thread-list__search::placeholder {
    color: var(--color-text-muted);
}
.mc-conv-thread-list__search:focus {
    outline: 2px solid var(--color-teal-ring);
    outline-offset: 0;
    border-color: var(--color-border-focus);
}

/* Bulk action bar (replaces filter chips when data-bulk="1" + selection >0) */
.mc-conv-thread-list__bulk-actions {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--color-teal-light);
    border-radius: var(--radius-input);
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-conv-thread-list[data-bulk="1"] .mc-conv-thread-list__bulk-actions {
    display: flex;
}
.mc-conv-thread-list[data-bulk="1"] .mc-conv-thread-list__filter-chips,
.mc-conv-thread-list[data-bulk="1"] .mc-conv-thread-list__search {
    display: none;
}
.mc-conv-thread-list__bulk-count {
    flex: 1;
    color: var(--color-teal);
    font-weight: var(--weight-semibold);
}
.mc-conv-thread-list__bulk-btn {
    background: transparent;
    border: 1px solid var(--color-teal);
    color: var(--color-teal);
    padding: 4px 10px;
    border-radius: var(--radius-input);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
}
.mc-conv-thread-list__bulk-btn:hover {
    background: var(--color-teal);
    color: var(--color-white);
}

/* Row list */
.mc-conv-thread-list__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.mc-conv-thread-list__row {
    display: grid;
    /* L107 fix — 2 columns (avatar | main). Channel chip + unread badge moved
       to a 3rd compact row inside __main so they never collide with timestamp.
       Was: `auto 1fr auto` with right-meta column overlapping the time. */
    grid-template-columns: auto 1fr;
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    background: transparent;
    border-left: 0 solid transparent;
    border-right: 0;
    border-top: 0;
    width: 100%;
    text-align: left;
    color: var(--color-text);
    font: inherit;
    transition: background-color 120ms ease, border-left-width 120ms ease;
}
.mc-conv-thread-list__row:hover {
    background: var(--color-hover-bg);
}
.mc-conv-thread-list__row[aria-selected="true"] {
    background: var(--color-active-bg);
    border-left: 3px solid var(--bubble-tone-sms);
    padding-left: calc(var(--space-3) - 3px);
}
.mc-conv-thread-list__row[aria-selected="true"][data-channel="whatsapp"] { border-left-color: var(--bubble-tone-whatsapp); }
.mc-conv-thread-list__row[aria-selected="true"][data-channel="telegram"] { border-left-color: var(--bubble-tone-telegram); }
.mc-conv-thread-list__row[aria-selected="true"][data-channel="email"]    { border-left-color: var(--bubble-tone-email); }

/* Bulk checkbox (only visible in bulk mode) */
.mc-conv-thread-list__row-check {
    display: none;
    width: 16px;
    height: 16px;
    accent-color: var(--color-teal);
}
.mc-conv-thread-list[data-bulk="1"] .mc-conv-thread-list__row-check {
    display: inline-block;
}
/* In bulk mode, grid grows to 3 cols: checkbox | avatar | main */
.mc-conv-thread-list[data-bulk="1"] .mc-conv-thread-list__row {
    grid-template-columns: auto auto 1fr;
}

/* Avatar — 32px circle with channel-tone tint + initial */
/* L112 — avatar uses PASTEL --msg-ch-* tokens (matches /rui/ui design system
   chip palette) NOT the saturated --bubble-tone-* (those are reserved for
   bubble accent stripes per L72 carve-out). Each pastel pairs with a deep
   *-ink color for readable label-on-light-tint. */
.mc-conv-thread-list__avatar {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--msg-ch-sms);
    color: var(--msg-ch-sms-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}
.mc-conv-thread-list__row[data-channel="whatsapp"] .mc-conv-thread-list__avatar { background: var(--msg-ch-wa); color: var(--msg-ch-wa-ink); }
.mc-conv-thread-list__row[data-channel="telegram"] .mc-conv-thread-list__avatar { background: var(--msg-ch-tg); color: var(--msg-ch-tg-ink); }
.mc-conv-thread-list__row[data-channel="email"]    .mc-conv-thread-list__avatar { background: var(--msg-ch-email); color: var(--msg-ch-email-ink); }

/* Status dot at avatar bottom-right (open/snoozed/closed) */
.mc-conv-thread-list__avatar::after {
    content: '';
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-card-bg);
    background: var(--color-success);
    display: none;
}
.mc-conv-thread-list__row[data-status="snoozed"] .mc-conv-thread-list__avatar::after {
    background: var(--color-warning);
    display: block;
}
.mc-conv-thread-list__row[data-status="closed"] .mc-conv-thread-list__avatar::after {
    background: var(--color-text-muted);
    display: block;
}
/* Show dot for open ONLY if unread > 0 — otherwise default-state-no-clutter */
.mc-conv-thread-list__row[data-status="open"][data-unread]:not([data-unread="0"]) .mc-conv-thread-list__avatar::after {
    display: block;
}

/* Main column — 3-row layout: name+time / preview / meta (channel+unread).
   L107 fix — was 2-row with channel/unread in a sibling right column that
   overlapped the time. Compact 3rd row eliminates the collision. */
.mc-conv-thread-list__main {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 2px;
    min-width: 0;
}
.mc-conv-thread-list__row-name {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    min-width: 0;
}
.mc-conv-thread-list__row-name-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mc-conv-thread-list__row-time {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: var(--weight-normal);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.mc-conv-thread-list__row-preview {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
    min-width: 0;
}
.mc-conv-thread-list__row-preview-body {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    cursor: help; /* hover surfaces native title-attr tooltip with full text */
}

/* Compact 3rd row — channel chip + unread badge right-aligned, no overlap.
   L112 — justify to flex-end pushes chip + unread to the row's right edge
   (away from avatar/main column) per /rui/ui design polish guidance. */
.mc-conv-thread-list__row-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    flex-shrink: 0;
    margin-top: 2px;
}

/* L117 — channel chip in the thread-list row now uses the canonical
   .mc-msg-channel-chip + .mc-msg-channel-chip-sm pair (see /rui/ui
   showcase + components.css §"Messenger Channel Chip"). The earlier
   custom .mc-conv-thread-list__row-channel circle was removed because
   it diverged from the rest of the app — same chip, two visual styles
   = user confusion. data-channel="..." drives tone via --msg-ch-*. */

/* L122 — Messenger Inbox 3-pane layout (responsive).
   Desktop ≥1280 → 320 | 1fr | 320 (all three panes visible).
   Tablet 768-1279 → 280 | 1fr (profile rail hidden; can re-open via
     a future slide-panel — out of scope for L122).
   Mobile <768 → single-pane stack governed by `data-active-pane` on
     the layout container ("list" or "thread"). The other pane gets
     `display:none` so we don't try to fit 2 panes inside a phone width. */
.rui-msg-inbox__layout {
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    gap: var(--space-2);
    padding: 0;
    background: var(--color-page-bg);
    min-height: calc(100vh - 180px);
    align-items: stretch;
}
@media (max-width: 1279px) {
    .rui-msg-inbox__layout {
        grid-template-columns: 280px 1fr;
    }
    .rui-msg-inbox__layout > [data-conversation-profile-host] { display: none; }
}
@media (max-width: 767px) {
    .rui-msg-inbox__layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .rui-msg-inbox__layout[data-active-pane="thread"] > [data-conversation-list] { display: none; }
    .rui-msg-inbox__layout[data-active-pane="list"]   > [data-conversation-thread-host] { display: none; }
}

.mc-conv-thread-list__row-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Compact unread badge — matches new pill-style channel chip height (16px) */
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--color-teal);
    color: var(--color-white);
    font-size: 9px;
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}

/* Empty state */
.mc-conv-thread-list__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    gap: var(--space-3);
}
.mc-conv-thread-list__empty-svg {
    width: 96px;
    height: 96px;
    color: var(--illust-stroke);
}
.mc-conv-thread-list__empty-cta {
    color: var(--color-teal);
    text-decoration: underline;
    cursor: pointer;
    font-weight: var(--weight-medium);
}

/* Filtered-empty state */
.mc-conv-thread-list__filtered-empty {
    text-align: center;
    padding: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.mc-conv-thread-list__clear-filters {
    color: var(--color-teal);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    padding: 0;
    margin-left: var(--space-1);
}

/* Loading state — 5 skeleton rows */
.mc-conv-thread-list__skeleton {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    list-style: none;
}
.mc-conv-thread-list__skeleton-avatar,
.mc-conv-thread-list__skeleton-line,
.mc-conv-thread-list__skeleton-meta {
    background: linear-gradient(90deg,
        var(--color-hover-bg) 0%,
        var(--color-active-bg) 50%,
        var(--color-hover-bg) 100%);
    background-size: 200% 100%;
    animation: mc-conv-thread-shimmer 1400ms ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.mc-conv-thread-list__skeleton-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); }
.mc-conv-thread-list__skeleton-main { display: grid; gap: 4px; }
.mc-conv-thread-list__skeleton-line { height: 12px; width: 60%; }
.mc-conv-thread-list__skeleton-line--sub { width: 80%; }
.mc-conv-thread-list__skeleton-meta { width: 22px; height: 22px; border-radius: var(--radius-full); }

/* Mobile <768 — full-width single-pane (no border-radius, no edge border) */
@media (max-width: 767px) {
    .mc-conv-thread-list {
        border-radius: 0;
        border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-conv-thread-list__skeleton-avatar,
    .mc-conv-thread-list__skeleton-line,
    .mc-conv-thread-list__skeleton-meta { animation: none; }
}

/* ============================================================================
 * mc-conv-compose — C13 W6 (composer for C11 thread footer slot)
 *
 * Multiline textarea with auto-grow + channel-aware char counter.
 * Channel-switcher chip row (when subscriber has >1 channel).
 * Quote-reply inset (responds to mc-conv-bubble:quote-reply event).
 * Cmd/Ctrl+Enter to send. Drafts persist in localStorage per conversation.
 *
 * Spec: docs/messenger/COMPONENT-PROPOSALS.md#c13--mc-conv-compose
 * Showcase anchor: /rui/ui#mc-conv-compose
 * ============================================================================ */

.mc-conv-compose {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 0;
    padding: var(--space-3) var(--space-3) var(--space-3);
    background: var(--color-card-bg);
    border-top: 1px solid var(--color-border);
}

/* Channel switcher (visible only when data-available-channels has >1 channel) */
.mc-conv-compose__channels {
    display: none;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-conv-compose[data-available-channels*=","] .mc-conv-compose__channels {
    display: inline-flex;
}
.mc-conv-compose__channel-label {
    margin-right: var(--space-1);
}
.mc-conv-compose__channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.mc-conv-compose__channel-chip:hover {
    background: var(--color-hover-bg);
}
.mc-conv-compose__channel-chip[aria-pressed="true"] {
    background: var(--color-teal-light);
    color: var(--color-teal);
    border-color: var(--color-teal);
}

/* Quote-reply inset (hidden until data-quote-message-uid is set) */
.mc-conv-compose__quote {
    display: none;
    grid-template-columns: 3px 1fr auto;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--color-subtle-bg);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--bubble-tone-sms);
}
.mc-conv-compose[data-quote-message-uid]:not([data-quote-message-uid=""]) .mc-conv-compose__quote {
    display: grid;
    grid-template-columns: 1fr auto;
}
.mc-conv-compose[data-active-channel="whatsapp"] .mc-conv-compose__quote { border-left-color: var(--bubble-tone-whatsapp); }
.mc-conv-compose[data-active-channel="telegram"] .mc-conv-compose__quote { border-left-color: var(--bubble-tone-telegram); }
.mc-conv-compose[data-active-channel="email"]    .mc-conv-compose__quote { border-left-color: var(--bubble-tone-email); }
.mc-conv-compose__quote-content {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.mc-conv-compose__quote-author {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}
.mc-conv-compose__quote-body {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-conv-compose__quote-clear {
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mc-conv-compose__quote-clear:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}
.mc-conv-compose__quote-clear svg {
    width: 14px;
    height: 14px;
}

/* Main actions row */
.mc-conv-compose__main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-2);
    align-items: end;
}

.mc-conv-compose__icon-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 6px;
}

.mc-conv-compose__icon-btn {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.mc-conv-compose__icon-btn:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}
.mc-conv-compose__icon-btn svg {
    width: 18px;
    height: 18px;
}

.mc-conv-compose__textarea {
    width: 100%;
    min-height: 48px;
    max-height: 192px;
    resize: none;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-input);
    background: var(--color-subtle-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    outline: 0;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mc-conv-compose__textarea:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 2px var(--color-teal-ring);
}
.mc-conv-compose__textarea::placeholder {
    color: var(--color-text-muted);
}

.mc-conv-compose__send {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: var(--bubble-tone-sms);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-input);
    cursor: pointer;
    transition: background-color 120ms ease, opacity 120ms ease;
    min-height: 38px;
    margin-bottom: 5px;
}
.mc-conv-compose[data-active-channel="whatsapp"] .mc-conv-compose__send { background: var(--bubble-tone-whatsapp); }
.mc-conv-compose[data-active-channel="telegram"] .mc-conv-compose__send { background: var(--bubble-tone-telegram); }
.mc-conv-compose[data-active-channel="email"]    .mc-conv-compose__send { background: var(--bubble-tone-email); }
.mc-conv-compose__send:hover {
    filter: brightness(1.1);
}
.mc-conv-compose__send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.mc-conv-compose__send svg {
    width: 14px;
    height: 14px;
}

/* Footer — char counter + keyboard hint + cap warning */
.mc-conv-compose__footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}
.mc-conv-compose__hint {
    font-variant-numeric: tabular-nums;
}
.mc-conv-compose__counter {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.mc-conv-compose__counter--over {
    color: var(--color-error);
    font-weight: var(--weight-semibold);
}
.mc-conv-compose__warning {
    color: var(--color-error);
    font-weight: var(--weight-medium);
}

/* Readonly mode — banner replaces actions */
.mc-conv-compose[data-readonly="1"] .mc-conv-compose__main,
.mc-conv-compose[data-readonly="1"] .mc-conv-compose__footer,
.mc-conv-compose[data-readonly="1"] .mc-conv-compose__quote,
.mc-conv-compose[data-readonly="1"] .mc-conv-compose__channels {
    display: none;
}
.mc-conv-compose__readonly {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-warning-bg);
    color: var(--color-text);
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
}
.mc-conv-compose[data-readonly="1"] .mc-conv-compose__readonly {
    display: flex;
}
.mc-conv-compose__readonly svg {
    width: 16px;
    height: 16px;
    color: var(--color-warning);
}

/* Mobile <768 — send button moves to its own row */
@media (max-width: 767px) {
    .mc-conv-compose__main {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    .mc-conv-compose__icon-actions {
        order: 2;
        padding-bottom: 0;
    }
    .mc-conv-compose__textarea {
        order: 1;
    }
    .mc-conv-compose__send {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-bottom: 0;
    }
}

/* ============================================================================
 * mc-conv-profile-rail — C14 W6 (right 320px rail of SF6 master-detail inbox)
 *
 * 4 cards stacked: Identity / Quick actions / Tags / Last 5 sends.
 * Collapses to a 48px icon strip at tablet 768-1023. Hidden on mobile <768
 * (consumer renders it in a slide-up sheet via existing mc-side-panel).
 *
 * Spec: docs/messenger/COMPONENT-PROPOSALS.md#c14--mc-conv-profile-rail
 * Showcase anchor: /rui/ui#mc-conv-profile-rail
 * ============================================================================ */

.mc-conv-profile-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-page-bg);
    min-height: 400px;
    width: 320px;
    overflow-y: auto;
}

.mc-conv-profile-rail__card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-3);
    box-shadow: var(--shadow-card);
}

.mc-conv-profile-rail__card-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--space-2);
}

/* Card 1 — Identity */
.mc-conv-profile-rail__identity {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}
.mc-conv-profile-rail__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--bubble-tone-sms);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}
.mc-conv-profile-rail[data-primary-channel="whatsapp"] .mc-conv-profile-rail__avatar { background: var(--bubble-tone-whatsapp); }
.mc-conv-profile-rail[data-primary-channel="telegram"] .mc-conv-profile-rail__avatar { background: var(--bubble-tone-telegram); }
.mc-conv-profile-rail[data-primary-channel="email"]    .mc-conv-profile-rail__avatar { background: var(--bubble-tone-email); }
.mc-conv-profile-rail__name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-conv-profile-rail__contact {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}
.mc-conv-profile-rail__contact a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.mc-conv-profile-rail__contact a:hover {
    color: var(--color-teal);
    text-decoration: underline;
}

/* Channel verification chips inside identity card */
.mc-conv-profile-rail__channels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border);
}
.mc-conv-profile-rail__channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--weight-medium);
    background: var(--color-subtle-bg);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mc-conv-profile-rail__channel-chip[data-state="verified"] {
    background: var(--color-success-bg);
    color: var(--color-success);
}
.mc-conv-profile-rail__channel-chip[data-state="not-opted-in"] {
    color: var(--color-text-disabled);
    text-decoration: line-through;
}
.mc-conv-profile-rail__channel-chip svg {
    width: 11px;
    height: 11px;
}

/* Card 2 — Quick actions */
.mc-conv-profile-rail__actions {
    display: grid;
    gap: 4px;
}
.mc-conv-profile-rail__action-btn {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    text-decoration: none;
    transition: background-color 120ms ease;
}
.mc-conv-profile-rail__action-btn:hover {
    background: var(--color-hover-bg);
}
.mc-conv-profile-rail__action-btn svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
}
.mc-conv-profile-rail__action-btn:hover svg {
    color: var(--color-text);
}

/* Card 3 — Tags */
.mc-conv-profile-rail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}
.mc-conv-profile-rail__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--color-teal-light);
    color: var(--color-teal);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}
.mc-conv-profile-rail__tag-remove {
    width: 14px;
    height: 14px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.7;
}
.mc-conv-profile-rail__tag-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}
.mc-conv-profile-rail__tag-remove svg {
    width: 10px;
    height: 10px;
}
.mc-conv-profile-rail__tag-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-input);
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-xs);
}
.mc-conv-profile-rail__tag-input:focus {
    outline: 2px solid var(--color-teal-ring);
    border-style: solid;
    border-color: var(--color-border-focus);
}

/* Card 4 — Last sends */
.mc-conv-profile-rail__sends {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 4px;
}
.mc-conv-profile-rail__send {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
    border: 0;
    text-align: left;
    color: var(--color-text);
    width: 100%;
    font: inherit;
    transition: background-color 120ms ease;
}
.mc-conv-profile-rail__send:hover {
    background: var(--color-hover-bg);
}
.mc-conv-profile-rail__send-channel {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--bubble-tone-sms);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
}
.mc-conv-profile-rail__send[data-channel="whatsapp"] .mc-conv-profile-rail__send-channel { background: var(--bubble-tone-whatsapp); }
.mc-conv-profile-rail__send[data-channel="telegram"] .mc-conv-profile-rail__send-channel { background: var(--bubble-tone-telegram); }
.mc-conv-profile-rail__send[data-channel="email"]    .mc-conv-profile-rail__send-channel { background: var(--bubble-tone-email); }
.mc-conv-profile-rail__send-body {
    font-size: var(--text-xs);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mc-conv-profile-rail__send-meta {
    font-size: 10px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.mc-conv-profile-rail__send-status {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    margin-right: 4px;
    vertical-align: middle;
}
.mc-conv-profile-rail__send[data-status="delivered"] .mc-conv-profile-rail__send-status,
.mc-conv-profile-rail__send[data-status="read"]      .mc-conv-profile-rail__send-status {
    background: var(--color-success);
}
.mc-conv-profile-rail__send[data-status="failed"]    .mc-conv-profile-rail__send-status {
    background: var(--color-error);
}

/* Empty state per card */
.mc-conv-profile-rail__empty {
    padding: var(--space-2) 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}
.mc-conv-profile-rail__empty-cta {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-teal);
    text-decoration: underline;
    font-size: var(--text-xs);
    font-style: normal;
}

/* Loading state — 4 skeleton cards */
.mc-conv-profile-rail__skeleton {
    background: linear-gradient(90deg,
        var(--color-hover-bg) 0%,
        var(--color-active-bg) 50%,
        var(--color-hover-bg) 100%);
    background-size: 200% 100%;
    animation: mc-conv-thread-shimmer 1400ms ease-in-out infinite;
    border-radius: var(--radius-card);
    height: 80px;
}

/* Tablet 768-1023 — collapsed strip variant */
.mc-conv-profile-rail--collapsed {
    width: 48px;
    padding: var(--space-2) 0;
    gap: var(--space-2);
    align-items: center;
}
.mc-conv-profile-rail--collapsed .mc-conv-profile-rail__card-title,
.mc-conv-profile-rail--collapsed .mc-conv-profile-rail__card > *:not(.mc-conv-profile-rail__avatar):not(.mc-conv-profile-rail__action-btn) {
    display: none;
}
.mc-conv-profile-rail--collapsed .mc-conv-profile-rail__card {
    padding: var(--space-1);
    border: 0;
    box-shadow: none;
    background: transparent;
    display: flex;
    justify-content: center;
}
.mc-conv-profile-rail--collapsed .mc-conv-profile-rail__action-btn {
    grid-template-columns: 1fr;
    width: 32px;
    height: 32px;
    justify-items: center;
    padding: 0;
}
.mc-conv-profile-rail--collapsed .mc-conv-profile-rail__action-btn span {
    display: none;
}

/* Mobile <768 — hidden (consumer renders in mc-side-panel sheet) */
@media (max-width: 767px) {
    .mc-conv-profile-rail {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-conv-profile-rail__skeleton { animation: none; }
}

/* ===========================================================================
 * mc-channel-priority-ladder — C24 W7 (ordered channel ladder for S7.2 wizard)
 *
 * Used by cross-channel campaign wizard step 1. Renders an ordered, reorderable
 * list of channels with per-row health pill + ↑/↓/× chiclets + Add menu.
 *
 * Keyboard-first reorder (L53) — no drag. Per-row brand-tone accent uses
 * --msg-ch-{channel} via [data-channel] selector. Health pill colours use
 * semantic --color-{success,warning,danger} (state ≠ category — L13 rule).
 *
 * Showcase: /rui/ui#mc-channel-priority-ladder
 * =========================================================================== */
.mc-channel-priority-ladder {
    display: block;
    color: var(--color-text);
}
.mc-channel-priority-ladder__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-channel-priority-ladder__row {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--row-tone, var(--color-border-strong));
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mc-channel-priority-ladder__row[data-channel="email"]    { --row-tone: var(--msg-ch-email); --row-ink: var(--msg-ch-email-ink); }
.mc-channel-priority-ladder__row[data-channel="sms"]      { --row-tone: var(--msg-ch-sms);   --row-ink: var(--msg-ch-sms-ink); }
.mc-channel-priority-ladder__row[data-channel="whatsapp"] { --row-tone: var(--msg-ch-wa);    --row-ink: var(--msg-ch-wa-ink); }
.mc-channel-priority-ladder__row[data-channel="telegram"] { --row-tone: var(--msg-ch-tg);    --row-ink: var(--msg-ch-tg-ink); }

.mc-channel-priority-ladder__row[data-health="warning"] {
    border-color: var(--color-warning);
}
.mc-channel-priority-ladder__row[data-health="error"] {
    border-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 5%, var(--color-card-bg));
}

.mc-channel-priority-ladder__position {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--color-subtle-bg);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.mc-channel-priority-ladder__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--row-tone, var(--color-text-muted)) 18%, var(--color-card-bg));
    color: var(--row-ink, var(--color-text));
    flex: 0 0 auto;
}

.mc-channel-priority-ladder__label {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.4;
}

.mc-channel-priority-ladder__health {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
}
.mc-channel-priority-ladder__health--ok {
    background: color-mix(in srgb, var(--color-success) 14%, var(--color-card-bg));
    color: var(--color-success);
}
.mc-channel-priority-ladder__health--warning {
    background: color-mix(in srgb, var(--color-warning) 14%, var(--color-card-bg));
    color: var(--color-warning);
}
.mc-channel-priority-ladder__health--error {
    background: color-mix(in srgb, var(--color-error) 14%, var(--color-card-bg));
    color: var(--color-error);
}

.mc-channel-priority-ladder__reconnect {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-error);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.mc-channel-priority-ladder__reconnect:hover {
    color: var(--color-error-dark);
}

.mc-channel-priority-ladder__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.mc-channel-priority-ladder__action {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-input);
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.mc-channel-priority-ladder__action:hover:not(:disabled) {
    background: var(--color-hover-bg);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.mc-channel-priority-ladder__action:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
.mc-channel-priority-ladder__action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.mc-channel-priority-ladder__action--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-error) 8%, var(--color-card-bg));
    color: var(--color-error);
    border-color: var(--color-error);
}

.mc-channel-priority-ladder__add-wrap {
    position: relative;
    display: inline-block;
}
.mc-channel-priority-ladder__add {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-input);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}
.mc-channel-priority-ladder__add:hover:not(:disabled) {
    background: var(--color-hover-bg);
    border-color: var(--color-text-muted);
    border-style: solid;
}
.mc-channel-priority-ladder__add:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
.mc-channel-priority-ladder__add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.mc-channel-priority-ladder__add-chev {
    margin-left: var(--space-1);
}

.mc-channel-priority-ladder__add-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    z-index: 20;
    min-width: 200px;
    padding: var(--space-1);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-dropdown);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mc-channel-priority-ladder__add-menu[hidden] { display: none; }
.mc-channel-priority-ladder__add-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    border-radius: var(--radius-input);
    text-align: left;
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-channel-priority-ladder__add-option:hover,
.mc-channel-priority-ladder__add-option:focus-visible {
    background: var(--color-hover-bg);
    outline: none;
}
.mc-channel-priority-ladder__add-option-icon {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mc-channel-priority-ladder__add-option-icon[data-channel-tone="email"]    { background: color-mix(in srgb, var(--msg-ch-email) 24%, var(--color-card-bg)); color: var(--msg-ch-email-ink); }
.mc-channel-priority-ladder__add-option-icon[data-channel-tone="sms"]      { background: color-mix(in srgb, var(--msg-ch-sms)   24%, var(--color-card-bg)); color: var(--msg-ch-sms-ink); }
.mc-channel-priority-ladder__add-option-icon[data-channel-tone="whatsapp"] { background: color-mix(in srgb, var(--msg-ch-wa)    24%, var(--color-card-bg)); color: var(--msg-ch-wa-ink); }
.mc-channel-priority-ladder__add-option-icon[data-channel-tone="telegram"] { background: color-mix(in srgb, var(--msg-ch-tg)    24%, var(--color-card-bg)); color: var(--msg-ch-tg-ink); }

/* Read-only mode — for S7.6 review */
.mc-channel-priority-ladder--readonly .mc-channel-priority-ladder__actions,
.mc-channel-priority-ladder--readonly .mc-channel-priority-ladder__add-wrap,
.mc-channel-priority-ladder--readonly .mc-channel-priority-ladder__reconnect {
    display: none;
}
.mc-channel-priority-ladder--readonly .mc-channel-priority-ladder__row {
    grid-template-columns: auto auto 1fr auto;
}

/* Mobile — stack rows */
@media (max-width: 480px) {
    .mc-channel-priority-ladder__row {
        grid-template-columns: auto auto 1fr;
        grid-template-areas:
            "pos icon label"
            "pos icon health"
            "actions actions actions";
        row-gap: var(--space-2);
    }
    .mc-channel-priority-ladder__row .mc-channel-priority-ladder__position { grid-area: pos; }
    .mc-channel-priority-ladder__row .mc-channel-priority-ladder__icon { grid-area: icon; align-self: center; }
    .mc-channel-priority-ladder__row .mc-channel-priority-ladder__label { grid-area: label; }
    .mc-channel-priority-ladder__row .mc-channel-priority-ladder__health { grid-area: health; justify-self: start; }
    .mc-channel-priority-ladder__row .mc-channel-priority-ladder__reconnect { grid-area: health; justify-self: end; }
    .mc-channel-priority-ladder__row .mc-channel-priority-ladder__actions { grid-area: actions; justify-self: stretch; gap: var(--space-2); }
    .mc-channel-priority-ladder__action {
        flex: 1 1 auto;
        height: 44px; /* A11 touch target */
    }
    .mc-channel-priority-ladder__add {
        display: flex;
        width: 100%;
        justify-content: center;
        height: 44px;
    }
}

/* ===========================================================================
 * mc-multi-coverage-bar — C25 W7 (stacked per-channel reach % bar)
 *
 * Used by S7.4 wizard audience step + S7.7 funnel chart. Renders a horizontal
 * stacked bar with per-segment label + bottom legend. Brand-tones segments via
 * --msg-ch-{channel}; the "unreachable" tail segment uses neutral gray.
 *
 * Showcase: /rui/ui#mc-multi-coverage-bar
 * =========================================================================== */
.mc-multi-coverage-bar {
    display: block;
    color: var(--color-text);
}
.mc-multi-coverage-bar__caption {
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-subtle-bg);
    border-radius: var(--radius-input);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
}
.mc-multi-coverage-bar__caption[hidden] { display: none; }
.mc-multi-coverage-bar__bar {
    display: flex;
    width: 100%;
    height: 24px;
    border-radius: var(--radius-input);
    overflow: hidden;
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
}
.mc-multi-coverage-bar__segment {
    width: var(--mc-seg-pct, 0%);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 var(--space-2);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    overflow: hidden;
    transition: filter 100ms ease;
}
.mc-multi-coverage-bar__segment:hover,
.mc-multi-coverage-bar__segment:focus-visible {
    filter: brightness(0.94);
    outline: none;
}
.mc-multi-coverage-bar__segment:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-border-focus);
}

/* Channel tones — solid pastel fill (L13 carve-out: brand-tone for category data). */
.mc-multi-coverage-bar__segment[data-channel-tone="email"]    { background: color-mix(in srgb, var(--msg-ch-email) 70%, white); }
.mc-multi-coverage-bar__segment[data-channel-tone="sms"]      { background: color-mix(in srgb, var(--msg-ch-sms)   70%, white); }
.mc-multi-coverage-bar__segment[data-channel-tone="whatsapp"] { background: color-mix(in srgb, var(--msg-ch-wa)    70%, white); }
.mc-multi-coverage-bar__segment[data-channel-tone="telegram"] { background: color-mix(in srgb, var(--msg-ch-tg)    70%, white); }
.mc-multi-coverage-bar__segment[data-channel-tone="multi"]    { background: color-mix(in srgb, var(--msg-ch-multi) 70%, white); }

.mc-multi-coverage-bar__segment--unreachable {
    background: repeating-linear-gradient(
        45deg,
        var(--color-subtle-bg),
        var(--color-subtle-bg) 6px,
        var(--color-hover-bg) 6px,
        var(--color-hover-bg) 12px
    );
    color: var(--color-text-muted);
}

.mc-multi-coverage-bar__segment-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-multi-coverage-bar__segment-label-pct {
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* Legend — 1 line per channel below the bar, dual-purpose for narrow segments */
.mc-multi-coverage-bar__legend {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
}
.mc-multi-coverage-bar__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text);
}
.mc-multi-coverage-bar__legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: 0 0 auto;
}
.mc-multi-coverage-bar__legend-swatch[data-channel-tone="email"]    { background: color-mix(in srgb, var(--msg-ch-email) 70%, white); }
.mc-multi-coverage-bar__legend-swatch[data-channel-tone="sms"]      { background: color-mix(in srgb, var(--msg-ch-sms)   70%, white); }
.mc-multi-coverage-bar__legend-swatch[data-channel-tone="whatsapp"] { background: color-mix(in srgb, var(--msg-ch-wa)    70%, white); }
.mc-multi-coverage-bar__legend-swatch[data-channel-tone="telegram"] { background: color-mix(in srgb, var(--msg-ch-tg)    70%, white); }
.mc-multi-coverage-bar__legend-swatch[data-channel-tone="multi"]    { background: color-mix(in srgb, var(--msg-ch-multi) 70%, white); }
.mc-multi-coverage-bar__legend-swatch--unreachable {
    background: repeating-linear-gradient(
        45deg,
        var(--color-subtle-bg),
        var(--color-subtle-bg) 3px,
        var(--color-hover-bg) 3px,
        var(--color-hover-bg) 6px
    );
    border: 1px solid var(--color-border);
}
.mc-multi-coverage-bar__legend-label {
    font-weight: var(--weight-medium);
}
.mc-multi-coverage-bar__legend-value {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Funnel mode — taller bar, denser stack */
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__bar {
    flex-direction: column;
    height: auto;
    min-height: 32px;
    border-radius: var(--radius-card);
    overflow: visible;
    border: 0;
    background: transparent;
    gap: var(--space-1);
}
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment {
    width: 100%;
    height: 28px;
    border-radius: var(--radius-sm);
    padding: 0 var(--space-3);
    position: relative;
}
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--mc-seg-pct, 0%);
    background: inherit;
    border-radius: var(--radius-sm);
    z-index: 0;
}
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment {
    background: var(--color-subtle-bg);
    color: var(--color-text);
}
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment-label {
    position: relative;
    z-index: 1;
    color: var(--color-text);
}
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment[data-channel-tone="email"]::after    { background: color-mix(in srgb, var(--msg-ch-email) 75%, white); }
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment[data-channel-tone="sms"]::after      { background: color-mix(in srgb, var(--msg-ch-sms)   75%, white); }
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment[data-channel-tone="whatsapp"]::after { background: color-mix(in srgb, var(--msg-ch-wa)    75%, white); }
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment[data-channel-tone="telegram"]::after { background: color-mix(in srgb, var(--msg-ch-tg)    75%, white); }

/* Empty + loading states */
.mc-multi-coverage-bar__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-subtle-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-text-muted);
}
.mc-multi-coverage-bar__empty svg {
    color: var(--color-text-muted);
    opacity: 0.5;
}
.mc-multi-coverage-bar__empty-text {
    font-size: var(--text-sm);
    text-align: center;
}

.mc-multi-coverage-bar__skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mc-multi-coverage-bar__skeleton-bar {
    height: 24px;
    border-radius: var(--radius-input);
    background: linear-gradient(90deg,
        var(--color-hover-bg) 0%,
        var(--color-active-bg, var(--color-subtle-bg)) 50%,
        var(--color-hover-bg) 100%);
    background-size: 200% 100%;
    animation: mc-mcb-shimmer 1400ms ease-in-out infinite;
}
.mc-multi-coverage-bar__skeleton-legend {
    display: flex;
    gap: var(--space-3);
}
.mc-multi-coverage-bar__skeleton-legend span {
    flex: 1 1 0;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        var(--color-hover-bg) 0%,
        var(--color-active-bg, var(--color-subtle-bg)) 50%,
        var(--color-hover-bg) 100%);
    background-size: 200% 100%;
    animation: mc-mcb-shimmer 1400ms ease-in-out infinite;
}
@keyframes mc-mcb-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-multi-coverage-bar__skeleton-bar,
    .mc-multi-coverage-bar__skeleton-legend span { animation: none; }
}

/* Mobile — taller bar so segment labels stay readable */
@media (max-width: 480px) {
    .mc-multi-coverage-bar__bar {
        height: 28px;
    }
    .mc-multi-coverage-bar__segment-label-text {
        display: none;
    }
    .mc-multi-coverage-bar__legend {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* ===========================================================================
 * mc-fallback-strategy-card — C26 W7 (radio cards for send-strategy choice)
 *
 * Used by S7.5 wizard step 4 strategy choice (send_and_stop / send_to_all).
 * Each card is role="radio"; group is role="radiogroup". Arrow keys move
 * selection between cards (per ARIA radio pattern). Read-only mode hides
 * the unselected card entirely.
 *
 * Showcase: /rui/ui#mc-fallback-strategy-card
 * =========================================================================== */
[data-mc-fallback-strategy-card] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    color: var(--color-text);
}
.mc-fallback-strategy-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color 80ms ease, background 80ms ease, box-shadow 80ms ease, transform 80ms ease;
}
.mc-fallback-strategy-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}
.mc-fallback-strategy-card:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
.mc-fallback-strategy-card--selected {
    border-color: var(--color-border-focus);
    background: color-mix(in srgb, var(--color-border-focus) 6%, var(--color-card-bg));
    box-shadow: 0 0 0 1px var(--color-border-focus);
}
.mc-fallback-strategy-card[data-disabled="1"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mc-fallback-strategy-card__illust {
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-subtle-bg);
    border-radius: var(--radius-input);
    color: var(--color-text);
    overflow: hidden;
}
.mc-fallback-strategy-card__illust svg {
    width: 90%;
    max-width: 180px;
    height: auto;
}

.mc-fallback-strategy-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}
.mc-fallback-strategy-card__marker {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.mc-fallback-strategy-card--selected .mc-fallback-strategy-card__marker {
    border-color: var(--color-border-focus);
    background: var(--color-border-focus);
}
.mc-fallback-strategy-card--selected .mc-fallback-strategy-card__marker::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-card-bg);
}

.mc-fallback-strategy-card__blurb {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

[data-mc-fallback-strategy-card][data-readonly="1"] .mc-fallback-strategy-card:not(.mc-fallback-strategy-card--selected) {
    display: none;
}
[data-mc-fallback-strategy-card][data-readonly="1"] {
    grid-template-columns: minmax(0, 1fr);
}
[data-mc-fallback-strategy-card][data-readonly="1"] .mc-fallback-strategy-card {
    cursor: default;
}

/* Hide native radio inputs — semantics come from role+aria on the card */
.mc-fallback-strategy-card__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile — stack vertically */
@media (max-width: 480px) {
    [data-mc-fallback-strategy-card] {
        grid-template-columns: minmax(0, 1fr);
    }
    .mc-fallback-strategy-card__illust {
        height: 64px;
    }
}



/* ==========================================================================
   === MAILPULSE FASE 2 — inizio: tipografia ===============================

   Blocco appeso in coda di proposito: vince per ordine di sorgente sulle
   definizioni piu' sopra senza usare !important, e si annulla cancellandolo.

   Regole del design system applicate qui:
     - Sora (--font-display) SOLO dove la dimensione calcolata e' >= 24px;
     - JetBrains Mono (--font-mono) solo sulle etichette tecniche;
     - tabular-nums su ogni superficie numerica, altrimenti le colonne
       "ballano" da una riga all'altra.

   Verificato prima di scrivere: ognuna delle classi qui sotto ha un solo
   selettore in questo file e nessun override dentro @media, quindi appendere
   non puo' scavalcare una regola responsive.
   ========================================================================== */

/* --- Metriche display (>= 24px) ----------------------------------------- */
.mc-dash-metric-value,          /* KPI dashboard — --text-3xl 34px */
.mc-metric-value {              /* metrica dei report — --text-2xl 24px */
    font-family: var(--font-display);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}

/* --- Superfici numeriche sotto i 24px: cifre tabellari, ma resta Inter ---
   Sora sotto i 24px e' vietato dal design system, e su numeri densi Inter
   si legge meglio. */
.mc-stat-value,
.mc-stats-tile-num,
.mc-stats-tile-num-secondary,
.mc-stat-cell-value,
.mc-stat-row-value,
.mc-quota-card-pct,
.mc-quota-card-usage,
.mc-metric-change,
.mc-dash-delta {
    font-variant-numeric: tabular-nums;
}

/* --- Tabelle: si imposta sulla tabella, l'eredita' fa il resto ------------
   font-variant-numeric e' ereditata, quindi raggiunge ogni th/td senza
   toccare il markup. Non altera le lettere: cambia solo l'avanzamento delle
   cifre, quindi non puo' spostare il layout del testo. */
.mc-table,
.mc-table-open {
    font-variant-numeric: tabular-nums;
}

/* --- Etichette tecniche in mono ------------------------------------------
   Classi nuove: non esistevano ne' nel CSS ne' nel markup. Vengono applicate
   nelle pagine della FASE 4; finche' nessuno le usa sono inerti. */
.mc-eyebrow {
    display: block;
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-teal);
}
.mc-eyebrow-muted { color: var(--color-text-muted); }

.mc-mono-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* .mc-mono esisteva solo come `.mc-table .mc-mono`; questa regola non
   cambia la dimensione (era gia' --text-sm), aggiunge solo le cifre
   tabellari e rende la classe utilizzabile fuori dalle tabelle. */
.mc-mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

/* === MAILPULSE FASE 2 — fine ============================================= */


/* ==========================================================================
   === MAILPULSE FASE 3 — inizio: pattern nuovi ============================

   Solo i pattern che NON esistevano. Quelli gia' presenti sono stati
   allineati sul posto, non duplicati:
     - il "pagehead" e' .mc-content-header in layouts.css (alias .mc-pagehead
       sulla stessa regola);
     - il wizard verticale e' la famiglia .mc-onboarding-step*, gia' completa;
     - .mc-grow-* e .mc-quota-card* esistevano: qui sotto solo le correzioni.
   ========================================================================== */

/* --- Sotto-navigazione a pastiglie --------------------------------------
   Riga di pillole sotto l'header di pagina, per i dettagli (lista, account).
   Scorre in orizzontale quando non ci sta, senza tagliare. */
.mc-pills {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-card-bg);
    border-bottom: var(--space-px) solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.mc-pills::-webkit-scrollbar { display: none; }
.mc-pills-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    width: 100%;
    display: flex;
    gap: var(--space-2);
}

.mc-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    height: var(--space-8);
    padding: 0 var(--space-3);
    border: var(--space-px) solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base);
}
.mc-pill svg,
.mc-pill .material-symbols-rounded { width: 15px; height: 15px; font-size: 15px; }
.mc-pill:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
    text-decoration: none;
}
.mc-pill:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
.mc-pill.active,
.mc-pill.is-active {
    border-color: var(--color-teal);
    color: var(--color-teal);
    background: var(--color-teal-light);
    font-weight: var(--weight-semibold);
}
.mc-pill-count {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

/* --- Stato "vivo": in invio, automazione attiva, warmup in corso ---------
   Il mint significa "sta accadendo adesso". Il punto pulsa: e' l'unica
   animazione ciclica ammessa dal design system, e va usata una volta sola
   per schermata. Lo stato e' sempre accompagnato da un'etichetta testuale,
   mai comunicato dal solo colore. */
.mc-badge-live {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    height: 22px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--color-pulse-light);
    color: var(--color-pulse-strong);
    white-space: nowrap;
}

.mc-dot-pulse {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
    flex: none;
    box-shadow: 0 0 0 0 currentColor;
    animation: mc-pulse 1.8s var(--ease-out) infinite;
}

@keyframes mc-pulse {
    0%   { box-shadow: 0 0 0 0    var(--color-pulse-ring); }
    70%  { box-shadow: 0 0 0 7px  transparent; }
    100% { box-shadow: 0 0 0 0    transparent; }
}

/* Chi ha chiesto meno movimento vede il punto fermo, non lampeggiante. */
@media (prefers-reduced-motion: reduce) {
    .mc-dot-pulse { animation: none; }
}

/* --- Allineamenti su pattern gia' esistenti -----------------------------
   .mc-grow-card:hover usava un rgba() con il vecchio teal cablato a mano e
   aggiungeva un'ombra. Il design system vuole "bordo prima dell'ombra" e
   nessun colore fuori dai token: sull'hover di una card cambia solo il bordo. */
.mc-grow-card:hover {
    border-color: var(--color-teal);
    box-shadow: none;
}

/* L'icona della tessera prende il quadratino tinta teal del riferimento
   invece di restare un glifo nudo. */
.mc-grow-card-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-input);
    background: var(--color-teal-light);
    color: var(--color-teal);
}
.mc-grow-card-icon .material-symbols-rounded { font-size: 19px; }
.mc-grow-card-icon svg { width: 19px; height: 19px; }

/* La tessera quota aveva l'icona senza fondo: le si da' la superficie tenue
   prevista, cosi' non serve piu' uno style inline nel Blade. */
.mc-quota-card-icon {
    background: var(--color-subtle-bg);
    color: var(--color-text-muted);
}

/* --- Barra di proporzione ------------------------------------------------
   Sostituisce i <div> con style inline che oggi disegnano a mano le barrette
   di apertura/clic nelle tabelle. Il riempimento e' teal per default; .mint
   per la crescita e gli stati vivi, .coral per cio' che e' fuori soglia
   (e vale una volta sola per schermata). */
.mc-bar {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-subtle-bg);
    overflow: hidden;
}
.mc-bar > i,
.mc-bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-teal);
    transition: width var(--transition-base);
}
.mc-bar > i.mint,  .mc-bar-fill.mint  { background: var(--color-pulse); }
.mc-bar > i.coral, .mc-bar-fill.coral { background: var(--color-signal); }
.mc-bar-sm { height: 3px; }

/* --- Cella numerica ------------------------------------------------------
   Numeri allineati a destra con cifre a larghezza fissa: senza questo le
   colonne "ballano" da una riga all'altra. */
.mc-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
th.mc-num, td.mc-num { text-align: right; }

/* …and the heading too.

   The rule above was written to right-align both, and for the heading it lost:
   `.mc-table thead th` is more specific than `th.mc-num`, so the label sat on
   the left of a column of right-aligned numbers. Visible on every table with a
   numeric column, and invisible in the stylesheet — the declaration is there,
   it simply never applied. */
.mc-table thead th.mc-num { text-align: right; }

/* --- Dato assente --------------------------------------------------------
   Il design system vuole "—", mai uno 0 finto e mai "N/D". */
.mc-empty-value {
    color: var(--color-text-disabled);
    font-variant-numeric: tabular-nums;
}

/* --- Barra impilata ------------------------------------------------------
   Proporzione fra piu' voci su una riga sola (composizione di un pubblico,
   ripartizione per segmento). Sostituisce i <div> con style inline. */
.mc-bar-stack {
    display: flex;
    height: 8px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-subtle-bg);
}
.mc-bar-stack > span {
    display: block;
    height: 100%;
    min-width: 2px;
}

/* --- Segnaposto di caricamento -------------------------------------------
   Ricorre identico in una decina di view come style inline. Il design system
   vuole una barra sottile in teal, non uno spinner: qui il testo resta ma la
   regola e' una sola. */
.mc-list-loading {
    text-align: center;
    padding: var(--space-8) var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* --- Numeri delle schede di report --------------------------------------
   La famiglia .cr-* (report campagna, panoramica lista, segmenti) non era
   coperta dal blocco tipografico della FASE 2. */
.cr-stat-value,
.cr-stat-pct,
.cr-rate-badge,
.cr-rate-detail,
.cr-mini-ring-text,
.cr-nav-count {
    font-variant-numeric: tabular-nums;
}
.cr-stat-value {
    font-family: var(--font-display);
    letter-spacing: var(--tracking-tight);
}

/* --- Metrica compatta ----------------------------------------------------
   Variante densa della famiglia .mc-dash-metric-* (che e' il KPI grande da
   34px con l'icona in quadrato da 40px). Serve per le file di 4 contatori
   sulle pagine di panoramica: valore a 24px e icona in linea nell'etichetta.
   E' un MODIFICATORE della famiglia esistente, non una seconda famiglia. */
.mc-dash-metric-card--compact {
    padding: var(--space-4);
    gap: var(--space-1);
}
.mc-dash-metric-card--compact .mc-dash-metric-value {
    font-size: var(--text-2xl);
}
.mc-dash-metric-card--compact .mc-dash-metric-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.mc-dash-metric-card--compact .mc-dash-metric-label .material-symbols-rounded,
.mc-dash-metric-card--compact .mc-dash-metric-label svg {
    font-size: var(--text-xl);
    width: 20px;
    height: 20px;
    flex: none;
}
.mc-dash-metric-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-dash-metric-hint-link {
    font-size: var(--text-xs);
    color: var(--color-teal);
    text-decoration: none;
}
.mc-dash-metric-hint-link:hover { text-decoration: underline; }

/* --- Griglie di pagina ---------------------------------------------------
   Sostituiscono i `display:grid;grid-template-columns:repeat(N,1fr)` scritti
   a mano negli style inline. Le griglie da 4 passano a 2 sotto 1080px, come
   prescrive la checklist responsive. */
.mc-grid-4, .mc-grid-3, .mc-grid-2 {
    display: grid;
    gap: var(--space-4);
}
.mc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1080px) {
    .mc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .mc-grid-4, .mc-grid-3, .mc-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Riga "salute del pubblico" ------------------------------------------
   Etichetta a sinistra, conteggio a destra, barra sotto. */
.mc-health-row { display: flex; flex-direction: column; gap: var(--space-1); }
.mc-health-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
}
.mc-health-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.mc-health-value {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.mc-health-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    border-top: var(--space-px) solid var(--color-border);
    padding-top: var(--space-3);
}
.mc-health-total-value {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-teal);
    font-variant-numeric: tabular-nums;
}

/* --- Intestazione di card e segnaposto grafico --------------------------- */
.mc-card-heading {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-1);
}
.mc-card-subheading {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
}
.mc-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* --- Titolo di riga in tabella -------------------------------------------
   Il riferimento vuole il titolo di riga a 14px semibold, con eventuale
   sottotitolo a 12px muted (.mc-table-sub) sotto. */
.mc-table-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-table-sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* --- Tassi sopra soglia --------------------------------------------------
   Il colore evidenzia, ma il numero resta sempre leggibile: il colore non e'
   mai l'unico veicolo di significato. Teal per "buono", mint per "vivo". */
.mc-rate-good { color: var(--color-teal);  font-variant-numeric: tabular-nums; }
.mc-rate-live { color: var(--color-pulse-strong); font-variant-numeric: tabular-nums; }

/* === MAILPULSE FASE 3 — fine ============================================= */


/* ==========================================================================
   === MAILPULSE FASE 3 — famiglia .dash-* condivisa =======================

   Queste regole erano duplicate IDENTICHE negli <style> inline di
   dashboard_v2.blade.php e admin/dashboard.blade.php. Qui stanno una volta
   sola. Le regole che nelle due pagine DIVERGONO davvero (.dash-top-item,
   .dash-top-rank, .dash-top-rank.rank-default, .dash-progress-bar) e quelle
   specifiche di una sola pagina restano nei rispettivi <style>: essendo
   @yield('head') dopo i <link>, continuano a vincere per ordine di sorgente.
   ========================================================================== */

.dash-metric-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
}
.dash-metric-spark {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.5;
}
.dash-metric-value {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
    letter-spacing: -0.02em;
}
.dash-period-tab {
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    cursor: pointer;
    border: none;
    background: none;
    transition: all 0.15s;
}
.dash-period-tab.active {
    background: var(--color-card-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}
.dash-period-tab:hover {
    color: var(--color-text);
}
.dash-period-tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-input);
    padding: var(--space-0-5);
}
.dash-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.dash-progress-fill.blue {
    background: var(--chart-3);
}
.dash-progress-fill.green {
    background: var(--chart-2);
}
.dash-progress-fill.orange {
    background: var(--chart-4);
}
.dash-progress-fill.teal {
    background: var(--chart-1);
}
.dash-section-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: var(--space-0-5) 0 0 0;
}
.dash-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.dash-section-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}
.dash-top-item:last-child {
    border-bottom: none;
}
.dash-top-rank.rank-1 {
    background: var(--chart-1-bg);
    color: var(--chart-1);
}
.dash-top-rank.rank-2 {
    background: var(--chart-3-bg);
    color: var(--chart-3);
}
.dash-top-rank.rank-3 {
    background: var(--chart-2-bg);
    color: var(--chart-2);
}
/* === MAILPULSE FASE 3 — fine famiglia .dash-* ============================ */


/* ==========================================================================
   === MAILPULSE — componenti del brief mailpulse-ui ========================

   Portati da mailpulse-ui/brand/components.css cambiando il prefisso .mp- in
   .mc- e i token --mp-* nei token di produzione.

   NON riportati perche' esistono gia' ed erano gia' coerenti col riferimento:
   .mc-segmented, .mc-tabs/.mc-tab, .mc-pagination, .mc-metric-label,
   .mc-metric-value, .mc-toggle, .mc-quota-card*, .mc-grow-*.
   Il brief chiede di aggiornarle, non di duplicarle.
   ========================================================================== */

/* --- Toolbar di elenco ---------------------------------------------------
   Riga di controlli sopra una tabella: filtri a sinistra, ricerca a destra.
   Sostituisce le .mc-filter-bar scritte con misure diverse pagina per pagina. */
.mc-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--space-px) solid var(--color-border);
    flex-wrap: wrap;
}
.mc-toolbar-spacer { flex: 1 1 auto; }

/* =========================================================================
   Link di ritorno sopra il titolo di una pagina

   Un LINK, non un pulsante: tornare da dove si è arrivati non è un'azione
   che si compie sulla pagina, e disegnarlo come un pulsante lo mette in
   concorrenza con quello che invece lo è. Sta sopra il titolo perché lì è la
   riga che si legge per prima, ed è dove il pollice e il cursore si trovano
   già dopo aver aperto la pagina.
   ========================================================================= */
.mc-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.mc-back-link:hover { color: var(--color-text); }

.mc-back-link:focus-visible {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-focus);
    color: var(--color-text);
}

.mc-back-link .material-symbols-rounded { font-size: var(--text-base); }

@media (prefers-reduced-motion: reduce) {
    .mc-back-link { transition: none; }
}

/* =========================================================================
   Conteggio in barra — «Template 12»

   Che cosa contiene la lista e quante cose sono, detto dove si sta per
   filtrarla. Non è un pulsante e non deve sembrarlo: nessun bordo, nessun
   fondo pieno, il nome in testo secondario e il solo NUMERO in evidenza —
   perché il numero è la parte che cambia, e il nome è la parte che si legge
   una volta sola.

   Il separatore verticale a destra lo stacca dai filtri senza aggiungere una
   riga in più: sta sul margine che c'è già.
   ========================================================================= */
.mc-toolbar-count {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1-5);
    padding-right: var(--space-3);
    border-right: var(--space-px) solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.mc-toolbar-count-value {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    /* Cifre a larghezza fissa: il numero si riscrive a ogni ricerca, e senza
       questo i filtri accanto scivolano di qualche pixel a ogni battuta. */
    font-variant-numeric: tabular-nums;
}

/* Sotto una certa larghezza la barra va a capo e il separatore si troverebbe
   a fine riga a dividere il nulla. */
@media (max-width: 767px) {
    .mc-toolbar-count {
        padding-right: 0;
        border-right: none;
    }
}
/* I controlli in barra sono 38px, non 44px come i campi dei form.
   L'elenco ricalca quello che .mc-filter-bar normalizzava: senza .mc-btn-sm e
   .mc-column-picker-trigger, pulsanti e selettore colonne resterebbero di
   un'altezza diversa dai campi accanto. */
.mc-toolbar .mc-form-input,
.mc-toolbar .mc-form-select,
/* `select.` davanti alle due tendine non e' decorazione: senza, questa regola
   vale 0,2,0 e perde contro `.mc-card select.mc-select-inline` (0,2,1) piu'
   su nel file — e siccome la barra vive dentro una scheda, quella vinceva.
   Il risultato era una barra alta 38px con dentro due tendine da 36: il campo
   e il pulsante allineati, le tendine no, e la riga sembrava fatta di pezzi di
   due moduli diversi. E' la sesta regola del kit, gia' pagata tre volte. */
.mc-toolbar select.mc-select-inline,
.mc-toolbar select.mc-filter-select,
.mc-toolbar .mc-select-inline,
.mc-toolbar .mc-filter-select,
.mc-toolbar .mc-btn-sm,
.mc-toolbar .mc-column-picker-trigger {
    height: var(--control-height);
}
/* Dentro una card-tabella la toolbar e' a filo: raggio in alto, niente
   margine sotto. Sostituisce la variante .mc-card-table .mc-filter-bar. */
.mc-card-table .mc-toolbar {
    padding: var(--space-4) var(--space-5);
    margin-bottom: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.mc-card-table-flush .mc-toolbar { border-radius: 0; }
/* barra di selezione multipla: fondo teal tenue, conteggio a sinistra,
   azioni a destra, la distruttiva per ultima e in corallo */
.mc-toolbar--selection {
    background: var(--color-teal-light);
    border-bottom-color: transparent;
}
.mc-toolbar-count {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-teal);
    font-variant-numeric: tabular-nums;
}

/* --- Metrica -------------------------------------------------------------
   Blocco label + valore + delta. .mc-metric-label e .mc-metric-value
   esistevano gia': qui si aggiungono solo il contenitore e il delta. */
.mc-metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
}
/* ── The figure itself ────────────────────────────────────────────────────
   Scoped INSIDE `.mc-metric` on purpose. `.mc-metric-value` also exists as a
   loose rule from the older dashboard row (`.mc-metric-row` / `-item`), where
   it is 24px and sits among running text. Inside a metric CARD the number is
   the whole reason the card exists and has to carry the tile on its own, so it
   is the display face at the top of the scale. Redefining the loose rule would
   have changed screens that never asked for a bigger number. */
.mc-metric .mc-metric-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.mc-metric .mc-metric-value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    /* Tabular figures: four cards side by side, and proportional digits make
       a 1 narrower than a 3, so the numbers stop lining up down the row and
       the eye reads them as jittering rather than as a series. */
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    margin-bottom: 0;
}
.mc-metric-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.mc-metric-delta-up   { color: var(--color-success); }
.mc-metric-delta-down { color: var(--color-error); }
.mc-metric-delta .material-symbols-rounded,
.mc-metric-delta svg { font-size: var(--text-base); width: 14px; height: 14px; }

/* --- Nota ----------------------------------------------------------------
   Riquadro informativo dentro una card o un pannello. Bordo prima
   dell'ombra: nessuna ombra qui. */
.mc-note {
    padding: var(--space-4);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-subtle-bg);
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}
.mc-note-info {
    background: var(--color-info-bg);
    border-color: transparent;
    color: var(--color-info-dark);
}
.mc-note-warn {
    background: var(--color-warning-bg);
    border-color: transparent;
    color: var(--color-warning-dark);
}
/* L'unico corallo ammesso per schermata: allarme reale. */
.mc-note-alert {
    background: var(--color-signal-light);
    border-color: transparent;
    color: var(--color-signal-strong);
}

/* --- Segnaposto ----------------------------------------------------------
   Dove serve un'immagine e non c'e': tratteggio con etichetta in mono che
   dice cosa andra' li'. Mai un'illustrazione inventata. */
.mc-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--space-px) dashed var(--color-border-strong);
    border-radius: var(--radius-card);
    background: repeating-linear-gradient(
        135deg,
        transparent 0 7px,
        var(--color-subtle-bg) 7px 14px
    );
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-disabled);
    text-align: center;
    padding: var(--space-4);
}

/* === MAILPULSE — fine componenti del brief =============================== */


/* === MAILPULSE — limiti di piano e entitlement (pagina quota) =============
   Questi due blocchi erano scritti a style inline e referenziavano token che
   non esistono (--radius-md, --color-teal-bg, --color-surface-muted): il
   risultato era angoli vivi e sfondo trasparente. Qui usano token reali.
   La chiave tecnica del limite va in mono, come prescrive il design system
   per nomi di variabile e chiavi. */

.mc-limit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}
.mc-limit-card {
    padding: var(--space-4);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
}
.mc-limit-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-top: var(--space-1);
    font-variant-numeric: tabular-nums;
}
.mc-limit-unit {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
}

.mc-ent-group-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: var(--space-4) 0 var(--space-2);
}
.mc-ent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-2);
}
.mc-ent-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-subtle-bg);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mc-ent-item .material-symbols-rounded { font-size: 18px; flex: none; }
.mc-ent-item.is-on {
    background: var(--color-teal-light);
    border-color: transparent;
    color: var(--color-text);
}
.mc-ent-item.is-on .material-symbols-rounded { color: var(--color-teal); }

/* === MAILPULSE — fine limiti e entitlement =============================== */


/* === MAILPULSE — numero del passo nell'onboarding Ads ====================
   Il riferimento numera i passi ancora da fare; done e locked restano
   icona (spunta / lucchetto), come gia' erano. */
.mc-ads-onboarding-step-num {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
/* === mc-copy-field =======================================================
   Un valore che l'utente non modifica ma deve poter copiare altrove: URI di
   redirect OAuth, comandi, chiavi pubbliche. Campo in sola lettura e pulsante
   fusi in un controllo solo.

   Esisteva gia' in tre punti come groviglio di style="" in linea (impostazioni
   cronjob su tutte); questa e' la stessa forma, con i token e senza duplicati. */
.mc-copy-field {
    display: flex;
    align-items: stretch;
}
.mc-copy-field > .mc-form-input {
    flex: 1;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
}
.mc-copy-field > .mc-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
    white-space: nowrap;
    gap: var(--space-1);
}
/* Il pulsante deve stare sopra al campo, altrimenti il bordo del campo copre
   il suo lato sinistro e il controllo sembra spezzato. */
.mc-copy-field > .mc-btn:hover,
.mc-copy-field > .mc-btn:focus-visible {
    position: relative;
    z-index: 1;
}

/* === fine ================================================================ */

/* === Campi del contatto ==================================================
   Schermata a livello di account. Il ritmo e' quello delle altre pagine del
   prodotto: gruppi separati da respiro, righe fitte fra loro. La densita' e'
   la stessa in tutta la tabella — una riga alta e un'intestazione compressa si
   leggono come due tabelle diverse. */

/* Barra strumenti: una riga sola. Filtro a sinistra perche' restringe, ricerca
   a destra perche' e' l'ultima cosa che si usa. Impilarli faceva sembrare la
   pagina piu' complicata di quello che e'. */
.mc-fields-toolbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--space-px) solid var(--color-border);
}
/* Selettori composti: `.mc-form-input` dichiara width:100% piu' avanti nel
   foglio e vincerebbe su una classe sola — e' come il filtro finiva a occupare
   tutta la riga lasciando alla ricerca una fessura. */
.mc-fields-toolbar .mc-fields-filter { width: auto; min-width: var(--space-16); flex: 0 0 auto; }
.mc-fields-toolbar .mc-fields-search { position: relative; margin-left: auto; flex: 0 0 auto; width: 320px; max-width: 100%; }
.mc-fields-search .material-symbols-rounded {
  position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--color-text-muted); pointer-events: none;
}
.mc-fields-search input { padding-left: var(--space-9); width: 100%; }

/* L'intestazione di gruppo era una riga come le altre: stessa superficie,
   stessa altezza, stesso rientro, e cambiava solo il peso del testo. Una sola
   dimensione non basta a dire "questa e' un'altra cosa" — "Dati commerciali"
   finiva a leggersi come un campo fra "Date of Birth" e "Piano".
   Qui ne cambiano tre insieme: la SUPERFICIE (una fascia in tinta), lo SPAZIO
   (molto sopra, poco sotto: e' la separazione a dire dove comincia un gruppo)
   e il RIENTRO (le righe dei campi rientrano, l'intestazione no). */
.mc-field-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-hover-bg);
  border-top: var(--space-px) solid var(--color-border);
  border-bottom: var(--space-px) solid var(--color-border);
}
/* Il primo gruppo tocca gia' il bordo della scheda. */
.mc-field-group:first-of-type .mc-field-group-head { border-top: 0; }
/* Aria fra un gruppo e il precedente, non dentro il gruppo. */
.mc-field-group + .mc-field-group { margin-top: var(--space-6); }
.mc-field-group-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: 0; cursor: pointer; padding: 0;
  /* Piu' piccolo e spaziato dei nomi dei campi, non piu' grande: e'
     un'etichetta di sezione, non il pezzo piu' importante della pagina. */
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.mc-field-group-toggle:hover { color: var(--color-text); }
.mc-field-group-toggle .material-symbols-rounded { color: var(--color-text-muted); font-size: 20px; }
.mc-field-group-count {
  font-size: var(--text-xs); font-weight: var(--weight-normal);
  color: var(--color-text-muted);
  background: var(--color-hover-bg);
  border-radius: var(--radius-pill, 999px);
  padding: 0 var(--space-2);
}
.mc-field-group-actions { display: flex; gap: var(--space-1); }

/* Ogni gruppo e' una tabella a se': con la larghezza automatica ognuna si
   dimensiona sui propri contenuti, e le colonne non si allineano fra un gruppo
   e l'altro — si leggono come tre tabelle diverse invece che come una sola
   spezzata da intestazioni. Larghezze fisse, uguali per tutti. */
.mc-field-table { width: 100%; table-layout: fixed; }
.mc-field-table col.c-name { width: auto; }
.mc-field-table col.c-type { width: 160px; }
.mc-field-table col.c-tag  { width: 280px; }
.mc-field-table col.c-act  { width: 120px; }
/* L'intestazione si scrive una volta. Ripeterla a ogni gruppo e' rumore: le
   colonne sono le stesse e ora sono anche allineate. */
.mc-field-group ~ .mc-field-group .mc-field-table thead { display: none; }
.mc-field-table th, .mc-field-table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}
/* Le righe dei campi rientrano rispetto all'intestazione del gruppo: si vede
   che stanno sotto di essa, non accanto. */
.mc-field-table th:first-child, .mc-field-table td:first-child { padding-left: var(--space-8); }
.mc-field-table th {
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-text-muted); text-align: left;
  border-bottom: var(--space-px) solid var(--color-border);
}
.mc-field-table td { border-bottom: var(--space-px) solid var(--color-border-subtle, var(--color-border)); }
.mc-field-table tr:last-child td { border-bottom: 0; }
.mc-field-table th:last-child, .mc-field-table td:last-child { text-align: right; }
.mc-field-table td { overflow: hidden; text-overflow: ellipsis; }
.mc-field-name { font-weight: var(--weight-medium); color: var(--color-text); }
/* La cella occupa tutte le colonne, quindi e' anche l'ultima e prendeva
   l'allineamento a destra delle azioni. Selettore composto perche' quella
   regola ha specificita' maggiore: qui e' una frase, non un pulsante. */
.mc-field-table .mc-field-empty-row td,
.mc-field-table .mc-field-empty-row td:last-child {
  color: var(--color-text-muted); font-size: var(--text-sm);
  text-align: left;
}
.mc-field-warn {
  display: flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--text-xs); color: var(--color-warning, var(--color-error));
}
.mc-field-warn .material-symbols-rounded { font-size: 14px; }

/* Il tag e' un bottone: si copia, non si legge soltanto. Colore del sistema,
   non il magenta predefinito del browser per <code>. */
.mc-tag-copy {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-hover-bg);
  border: var(--space-px) solid var(--color-border);
  border-radius: var(--radius-input); padding: var(--space-1) var(--space-2);
  cursor: pointer; max-width: 100%;
}
.mc-tag-copy:hover { border-color: var(--color-border-strong); }
.mc-tag-copy code {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs); color: var(--color-text);
  white-space: nowrap; background: none; padding: 0;
}
.mc-tag-copy .material-symbols-rounded { font-size: 15px; color: var(--color-text-muted); flex: 0 0 auto; }

/* ══ Lists table ══════════════════════════════════════════════════════════
   The lists screen went from three columns to seven, so the row has to say
   more in the same height. Tokens only — both themes follow the account's
   scheme. */

/* The sub-line under a list name. `.mc-table-sub` already sets the colour and
   size; this only makes room for an icon beside the text. */
.mc-table-sub-error {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-error);
}
.mc-table-sub-error .material-symbols-rounded { font-size: 14px; }

/* Growth: a bar and the number it stands for, on one line.

   The bar alone cannot be read — a reader has no scale for it — and the number
   alone makes eight rows a column of digits nobody compares. Together the bar
   answers "which of these grew" at a glance and the number answers "by how
   much" when it matters. */
.mc-growth {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.mc-growth-bar {
    flex: 0 0 70px;
    /* The track stays visible at zero, so a list that did not grow reads as
       measured rather than as missing. */
    background: var(--color-subtle-bg);
}
.mc-growth-value {
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

/* A date, or anything else that sets context rather than carrying the point. */
.mc-table-muted {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Numbers line up across rows, which is the only way a column of them can be
   compared without reading each one. */
.mc-table-lists .mc-num { font-variant-numeric: tabular-nums; }

/* Le intestazioni sono parole, come in ogni altra tabella del prodotto.

   Erano maiuscoletto spaziato — l'idea era che sette colonne fanno competere
   la riga di intestazione con i dati, e una legenda pesa meno di un titolo. Ma
   questa e' l'unica tabella che lo faceva, e messa accanto a quella delle
   campagne si leggeva come una schermata di un altro prodotto. La differenza
   fra sette colonne e quattro non vale una seconda grammatica. */

/* One number per cell, all the same size.

   The contacts column used `.mc-stat-value`, which is sized for a dashboard
   card. Beside six other columns it read as the only figure that mattered and
   flattened the rest — the point of the row is that the four counts are
   comparable. */
.mc-table-lists .mc-num .mc-stat-value {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

/* `.mc-table-scroll` resta per lo storico del contatto, che ha davvero piu'
   colonne di quante ne stiano. La tabella delle liste NON lo usa piu': un
   contenitore che scorre dentro la scheda faceva sembrare l'elenco tagliato
   anche a schermo largo, e `overflow` ritagliava i menu «...» delle righe.
   Sotto i 767px le righe diventano schede (`mc-table-mobile-cards`), che e' la
   via di questo prodotto quando le colonne non ci stanno. */
.mc-table-scroll {
    overflow-x: auto;
    /* Momentum scrolling reaches the edge and stops there instead of dragging
       the page behind it. */
    overscroll-behavior-x: contain;
}

/* Le liste stanno nella larghezza della scheda: le colonne dei numeri hanno
   gia' una larghezza fissa, quella del nome prende quel che resta. `min-width:0`
   perche' una cella di tabella non si restringe sotto il proprio contenuto, e
   un nome lungo allargherebbe la tabella oltre la scheda. */
.mc-table-lists { width: 100%; }
.mc-table-lists td, .mc-table-lists th { min-width: 0; }

/* Le due colonne che hanno bisogno di un periodo lo dicono con una «i».

   «Disiscritti» e' un totale da sempre, «Nuovi» sono gli ultimi trenta giorni,
   e un numero senza il suo periodo non dice niente. Il periodo stava su una
   riga sotto l'etichetta: due colonne su sette diventavano alte due righe, e
   l'intestazione intera si alzava con loro lasciando le altre cinque appese in
   mezzo. La «i» e' quella del cruscotto (`.mc-info-tip`, con `data-tooltip`),
   e non cambia l'altezza di niente.

   Il periodo resta comunque nel `data-label` della cella: sotto i 767px la riga
   diventa una scheda, l'intestazione sparisce, e su un telefono non si passa
   sopra niente col mouse. */

/* Le intestazioni vanno a capo solo quando serve, cioe' in finestra stretta.

   `.mc-table thead th` le tiene su una riga sola, e con sette colonne
   «Non confermati» da solo si porta via ottanta pixel di larghezza minima:
   e' la differenza fra una tabella che sta nella finestra e una che spinge la
   PAGINA di lato, portandosi dietro barra laterale e intestazione.

   Solo sotto i 1200px, pero': senza la soglia il browser manda a capo anche
   quando lo spazio c'e', perche' la larghezza la distribuisce fra le colonne
   prima di guardare se una riga bastava. Un'intestazione su due righe con
   mezzo schermo vuoto accanto sembra un errore, non una scelta. */
@media (max-width: 1200px) {
    .mc-table-lists thead th { white-space: normal; }
}

/* The table's footer line: what is being shown on the left, what the plan
   allows on the right. The pagination component owns the left half and is used
   by twenty-odd screens, so the limit is placed BESIDE it rather than inside
   it. */
.mc-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.mc-list-footer > .mc-pagination { flex: 1 1 auto; }
.mc-list-footer-limit {
    flex: 0 0 auto;
    padding-right: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}
@media (max-width: 720px) {
    .mc-list-footer { flex-direction: column; align-items: stretch; }
    .mc-list-footer-limit { padding: 0 var(--space-4) var(--space-3); }
}

/* ══ Contact card ═════════════════════════════════════════════════════════
   The contact screen answers a dozen questions at once, so its job is to keep
   them apart. Tokens only; both themes follow the account's scheme. */

.mc-stack { display: flex; flex-direction: column; gap: var(--space-5); }

.sc-title-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sc-facts {
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    margin-top: var(--space-1);
    font-size: var(--text-sm); color: var(--color-text-secondary);
}
.sc-fact-email { font-weight: var(--weight-semibold); color: var(--color-text); text-decoration: none; }
.sc-fact-email:hover { text-decoration: underline; }

/* ── Engagement ───────────────────────────────────────────────────────── */
.sc-engagement {
    display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
}
.sc-score { display: flex; align-items: center; gap: var(--space-4); }
.sc-ring { position: relative; width: 72px; height: 72px; flex: none; }
.sc-ring svg { width: 72px; height: 72px; }
.sc-ring b {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: var(--text-lg); font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.sc-ring-track { fill: none; stroke: var(--color-subtle-bg); stroke-width: 4; }
.sc-ring-fill  { fill: none; stroke-width: 4; stroke-linecap: round; }
/* The ring's colour is the band, so the shape and the word agree. */
.sc-ring-high   { stroke: var(--color-success); }
.sc-ring-medium { stroke: var(--color-teal); }
.sc-ring-low    { stroke: var(--color-warning); }
.sc-ring-none   { stroke: var(--color-border-strong); }

.sc-metrics {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-5); flex: 1; min-width: 0;
    border-left: 1px solid var(--color-border); padding-left: var(--space-6);
}
@media (max-width: 720px) {
    .sc-metrics { border-left: none; padding-left: 0; }
}
.sc-metric { display: flex; flex-direction: column; gap: 2px; }
.sc-metric-label {
    font-size: var(--text-xs); font-weight: var(--weight-medium);
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted);
}
.sc-metric-value {
    font-size: var(--text-xl); font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.sc-engagement-empty { display: flex; align-items: flex-start; gap: var(--space-3); }
.sc-engagement-empty .material-symbols-rounded { color: var(--color-text-muted); }

/* ── Fields ───────────────────────────────────────────────────────────── */
/* The card is edge-to-edge from here down: a group heading is a BAR across the
   record, not a line of text floating in the card's padding. Negative margins
   pull the section out to the card's edges and the padding puts the text back
   where the rest of the content sits. */
.sc-group { margin: 0 calc(var(--space-6) * -1); }
.sc-group-head {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-6);
    background: var(--color-subtle-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted);
    cursor: pointer; list-style: none; user-select: none;
}
.sc-group-head:hover { background: var(--color-hover-bg); }
.sc-group-head::-webkit-details-marker { display: none; }
.sc-group-caret { font-size: 18px; transition: transform var(--transition-base); }
.sc-group[open] .sc-group-caret { transform: rotate(180deg); }
.sc-group-count { margin-left: auto; letter-spacing: 0; text-transform: none; }
@media (prefers-reduced-motion: reduce) { .sc-group-caret { transition: none; } }

.sc-fields { margin: 0; }
/* One line per fact, separated. Without the rule a long list of values runs
   together and the eye loses which label a value belongs to. */
.sc-field {
    display: grid; grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-4); align-items: center;
    padding: var(--space-1) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.sc-field:last-child { border-bottom: none; }
.sc-field:hover { background: var(--color-subtle-bg); }
/* 14px, not 12.

   A contact card is READ, line after line, forty lines at a time. The 12px
   step is right for a caption under a number; for the record itself it makes
   the reader lean in, and the page is nothing but record. */
/* `min-width: 0` e la rottura di parola: la colonna dell'etichetta e' larga
   200px FISSI, e una griglia non ritaglia quello che non ci sta — lo lascia
   uscire. Un'etichetta lunga e senza spazi (una chiave di traduzione non
   risolta, un termine composto in tedesco) sbordava dentro la colonna del
   valore e le due si stampavano una sopra l'altra. `break-word` e non
   `anywhere`: spezza solo quello che da solo non entrerebbe, invece di
   sillabare ogni parola. */
.sc-field dt {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    min-width: 0;
    overflow-wrap: break-word;
}
.sc-field dd { margin: 0; min-width: 0; }
.sc-required { color: var(--color-error); }

/* An input that reads as a value until it is touched: the border only appears
   on hover and focus, so a column of forty fields reads as a record rather
   than as a form to fill in. */
.sc-input {
    width: 100%; padding: var(--space-1-5) var(--space-2);
    font: inherit; font-size: var(--text-base); font-weight: var(--weight-medium);
    color: var(--color-text);
    background: transparent;
    border: 1px solid transparent; border-radius: var(--radius-input);
    transition: border-color var(--transition-base), background var(--transition-base);
}
.sc-input:hover { border-color: var(--color-border); }
.sc-input:focus {
    outline: none; background: var(--color-card-bg);
    border-color: var(--color-border-strong);
}
.sc-field.is-empty .sc-input::placeholder { color: var(--color-teal); }
.sc-field-readonly dd { font-size: var(--text-base); font-weight: var(--weight-medium); }
@media (prefers-reduced-motion: reduce) { .sc-input { transition: none; } }
@media (max-width: 720px) {
    .sc-field { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ── Rows: lists, automations ─────────────────────────────────────────── */
.sc-rows { display: flex; flex-direction: column; }
.sc-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2-5) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.sc-row:last-child { border-bottom: none; }
.sc-row-name { flex: 1; font-weight: var(--weight-semibold); min-width: 0; }
.sc-row-date { white-space: nowrap; }
/* The row the reader is standing on, marked so the card says which of the
   several list memberships this page is about. */
.sc-row.is-current .sc-row-name { color: var(--color-teal); }
.sc-subhead {
    margin-top: var(--space-4); padding-bottom: var(--space-1);
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted);
}

/* ── Timeline ─────────────────────────────────────────────────────────── */
.sc-timeline { list-style: none; margin: 0; padding: 0 var(--space-6) var(--space-5) calc(var(--space-6) + 30px); position: relative; }
.sc-timeline::before {
    content: ""; position: absolute;
    left: calc(var(--space-6) + 11px); top: 6px; bottom: var(--space-6);
    width: 1px; background: var(--color-border);
}
.sc-event { position: relative; padding-bottom: var(--space-4); }
.sc-event:last-child { padding-bottom: 0; }
.sc-event-dot {
    position: absolute; left: -30px; top: 0;
    width: 23px; height: 23px; border-radius: var(--radius-full);
    display: grid; place-items: center;
    background: var(--color-card-bg); border: 1px solid var(--color-border);
}
.sc-event-dot .material-symbols-rounded { font-size: 13px; }
/* The dot carries the family tint through `.fl-cat-tile`; only the border has
   to follow, or a coloured disc sits inside a grey ring. */
.sc-event-dot { border-color: transparent; }
/* A failed send is a fault, not a family. */
.sc-event-failed { background: var(--color-error-bg); }
.sc-event-failed .material-symbols-rounded { color: var(--color-error); }
.sc-event b { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.sc-event p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.45; }
.sc-event time { display: block; margin-top: 3px; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Fact lists: deliverability, consent ──────────────────────────────── */
.sc-facts-list { padding: 0 var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.sc-facts-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.sc-facts-list span { font-size: var(--text-sm); color: var(--color-text-secondary); }
.sc-facts-list b { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* ── Notes ────────────────────────────────────────────────────────────── */
.sc-note-form { display: flex; gap: var(--space-2); padding: 0 var(--space-6) var(--space-4); }
.sc-note-form .mc-form-input { flex: 1; }
.sc-notes { padding: 0 var(--space-6) var(--space-5); display: flex; flex-direction: column; }
.sc-note { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.sc-note p { margin: 0 0 2px; font-size: var(--text-sm); }
.sc-notes-empty { padding: var(--space-3) 0 0; border-top: 1px solid var(--color-border); }
.sc-count {
    margin-left: var(--space-1); padding: 1px 7px;
    border-radius: var(--radius-full); background: var(--color-subtle-bg);
    font-size: var(--text-xs); color: var(--color-text-secondary);
}

/* ── Contact card: section pills ──────────────────────────────────────────
   They jump to a section rather than switching a view: everything they name is
   already on the page, and a tab would either hide it or open a second screen
   showing the same records. */
.sc-pills {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.sc-pill {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-full);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    color: var(--color-text); text-decoration: none;
    transition: border-color var(--transition-base), background var(--transition-base);
}
.sc-pill:hover { border-color: var(--color-border-strong); background: var(--color-hover-bg); }
/* A section with nothing in it stays listed — a row that changed shape per
   contact would leave the reader wondering what is being withheld — but it
   stops competing for attention. */
.sc-pill.is-empty { color: var(--color-text-muted); }
.sc-pill-count {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}
@media (prefers-reduced-motion: reduce) { .sc-pill { transition: none; } }

/* The anchors sit under a sticky header, so the browser must stop short of it
   or the section title lands behind the bar. */
[id^="sc-"] { scroll-margin-top: var(--space-6); }

/* An arrow with nowhere to go. Kept in place rather than removed: the pair
   moving around as you reach the ends is worse than one of them being idle. */
.mc-btn.is-disabled { opacity: 0.4; pointer-events: none; }

/* ── Contact card: automations ────────────────────────────────────────────
   Chips rather than rows: an automation is something a contact PASSED THROUGH,
   possibly several times, and the count belongs beside the name rather than
   repeated down a column. */
.sc-automations-head {
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    padding: var(--space-5) var(--space-6);
}
.sc-chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* The chips ARE the product's secondary buttons — they carry `.mc-btn` and
   inherit its height, radius, border and hover. What is left here is the one
   thing a button does not have: a count that sits quieter than the name it
   belongs to. */
.sc-chip-count {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* A tag is a value someone typed, not a status the system assigned, so it is
   read rather than glanced at — at the shared badge's 11px/400 it sat quieter
   than the hint text above it and was easy to miss. Sized here rather than on
   `.mc-badge`: that class labels statuses in every table in the product, and
   enlarging it there would push those columns around. */
.sc-tag {
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.35;
}

/* Grows with the label, so the cross stays proportional instead of shrinking
   into a speck beside bigger text. */
.sc-tag .material-symbols-rounded { font-size: 16px; }

/* Field and button as one control: the button stretches to whatever height the
   field has, instead of being a short square floating beside it. */
.sc-tag-add { display: flex; align-items: stretch; gap: var(--space-2); }
.sc-tag-add .mc-form-input { flex: 1; }
/* `.mc-btn` sets a fixed height, so stretching the flex item alone left the
   button its own 36px inside a 44px row. `height: auto` hands the height back
   to the row, which is what makes the two read as one control. */
.sc-tag-add .mc-btn { flex: 0 0 auto; height: auto; }

/* ── The runs dialog ──────────────────────────────────────────────────────
   `hidden` does the hiding, so the dialog is closed for a screen reader and for
   a headless renderer too — not merely painted out of sight. */
.sc-modal {
    position: fixed; inset: 0; z-index: var(--z-modal, 1000);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4);
    background: var(--color-overlay-bg, rgba(15, 30, 46, 0.45));
}
.sc-modal[hidden] { display: none; }
.sc-modal-box {
    width: min(720px, 100%); max-height: 82vh; overflow-y: auto;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.sc-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.sc-modal-body { padding: var(--space-5) var(--space-6) var(--space-6); }
.sc-runs-summary {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
    margin-bottom: var(--space-5);
}
.sc-runs-summary > div > div { display: flex; gap: var(--space-2); font-size: var(--text-sm); padding: 2px 0; }
.sc-runs-summary span { color: var(--color-text-secondary); }

/* ══ Category tint ════════════════════════════════════════════════════════
   The colour families the automation canvas paints its steps with, moved here
   from flow-lib.css so any screen can use them.

   The point of the code is that one family reads the same wherever that kind
   of thing appears: somebody who picked "Add a tag" from the blue must find
   blue again on the canvas and again on a contact's history, or the colour is
   decoration rather than a code. --chart-* rather than the theme accents,
   because the ramp is fixed and stays distinguishable on every colour scheme. */
.fl-cat-tile[data-category="trigger"] {
  background: var(--color-pulse-light);
  color: var(--color-pulse-strong);
}
.fl-cat-tile[data-category="sending"] {
  background: var(--chart-1-bg);
  color: var(--chart-1);
}
.fl-cat-tile[data-category="workflow"] {
  background: var(--color-subtle-bg);
  color: var(--color-text-muted);
}
.fl-cat-tile[data-category="contacts"] {
  background: var(--chart-3-bg);
  color: var(--chart-3);
}
.fl-cat-tile[data-category="format_data"] {
  background: var(--chart-6-bg);
  color: var(--chart-6);
}
/* Le integrazioni con servizi di fuori.

   `--chart-2` perché è l'unico gradino della rampa ancora libero fra le
   famiglie della tela: il codice colore funziona finché due famiglie non si
   somigliano, e riusare una tinta già presa vorrebbe dire due cose diverse
   dello stesso colore.

   La tinta si vede sui passi «app» che NON hanno un logo. Chi ce l'ha — Google
   Sheets — mostra il marchio su fondo neutro (vedi `.fl-cat-tile:has(.fl-app-logo)`
   in flow-lib.css): un fondo colorato dietro un marchio è la cosa che ogni
   linea guida di marchio vieta per prima. */
.fl-cat-tile[data-category="app"] {
  background: var(--chart-2-bg);
  color: var(--chart-2);
}

/* The contact form's own footer: save and cancel at the trailing edge, clear of
   the field rows that now run to the card's edges. */
.sc-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-5);
}
@media (max-width: 720px) {
    .sc-actions { flex-direction: column; }
}

/* ══ Automations index ════════════════════════════════════════════════════
   The list of flows, as cards. What the card carries that a table row cannot:
   the SHAPE of the flow, how many people are inside it, and whether its mail
   is being opened.

   No hex here, and no colour of its own: the step chips borrow the same
   `.fl-cat-tile[data-category]` families the canvas paints its steps with, so
   somebody who picked "Aggiungi un tag" from the blue finds blue again on the
   card. A second palette would make the colour decoration instead of a code. */

.au-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
/* The tile is padded ONCE.
   `.mc-card` carries 24px of its own and `.mc-metric` carries another 20/24
   inside it, so every tile was padded twice and stood 176px tall for three
   short lines of text — half the row was empty. The card here is a frame; the
   metric inside it owns the spacing. Its bottom margin goes too: the grid gap
   already separates the row from what follows, and the two were stacking. */
.au-metrics .mc-card {
    padding: 0;
    margin-bottom: 0;
}

/* One card carries the comparison that the screen exists to make — automated
   mail against hand-sent.

   A 2px rule along the TOP edge, not a coloured ring: a full outline reads as
   a selected or an errored tile — something you did, or something wrong —
   while a rule above it reads as a heading, which is what it is. No fill
   either; a filled tile in a row of four is an alert. */
.au-metric-featured {
    /* `--chart-2`, not `--color-teal`.
       The theme accent is redefined per colour scheme — on Blue/Ocean it is
       #2C5282, a navy — so the "this is the one to look at" rule came out as
       a dark line indistinguishable from a heavy border. The chart ramp is
       fixed across schemes for exactly this reason, and is what the step
       categories already use. */
    border-top: 2px solid var(--chart-2);
}

/* Two different sentences live on this line and should not look alike.
   A plain note ("3 flussi in tutto") is context; a delta ("+26 questa
   settimana") is a reading, and the reference gives it weight so the eye can
   tell in one pass which tiles moved. */
.mc-metric-foot {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mc-metric-up,
.mc-metric-down {
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.mc-metric-up   { color: var(--color-success-dark); }
/* NOT red. The reference paints a negative delta with its danger colour, and
   here that would be wrong: automated mail opening a few points below the
   campaigns is a comparison, not a fault, and this product keeps its one
   alarm colour for actual alarms. Muted ink carries "lower" without the
   claim that something is broken. */
.mc-metric-down { color: var(--color-text-secondary); }

/* A figure that does not exist yet, said in the value's own place so the card
   keeps its shape. Muted and lighter than a number — it is not one. */
.mc-metric .mc-metric-value-empty {
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
    /* One step down from a real figure, and not the display face: it is a
       sentence standing in for a number, and dressing it as one would have
       the row read as though every tile had an answer. */
    font-family: var(--font-family);
    font-size: var(--text-xl);
    letter-spacing: normal;
}

.au-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    margin-bottom: var(--space-4);
}

.au-viewswitch {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    overflow: hidden;
}
.au-view {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px var(--space-3);
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}
.au-view + .au-view { border-left: 1px solid var(--color-border); }
.au-view .material-symbols-rounded { font-size: 18px; }
.au-view:hover { background: var(--color-subtle-bg); color: var(--color-text); }
.au-view.is-active {
    background: var(--color-subtle-bg);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

/* The table view gets the card the grid does not need. */
#automations-listing.au-in-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.au-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: var(--space-4);
}

.au-card {
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    /* Border before shadow, and no lift on hover: the card is a container,
       not a control, and a grid that rises under the pointer turns reading
       into a game of whack-a-mole. */
    transition: border-color 0.15s ease;
}
.au-card:hover { border-color: var(--color-border-strong); }

.au-top {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}
.au-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.au-name {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
}
.au-name:hover { color: var(--color-teal); }

.au-trigger {
    margin: 2px 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    /* Two lines, then stop: trigger sentences vary from four words to a
       clause, and a card that grows with its text breaks the grid's rhythm. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.au-flow {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}
.au-chip {
    font-size: var(--text-xs);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.au-chip-more {
    background: var(--color-subtle-bg);
    color: var(--color-text-muted);
}
/* The joint between two steps. A line, not a chevron: it says "and then"
   without adding a fourth glyph to a row that already has colour doing work. */
.au-link {
    width: 10px;
    height: 1px;
    background: var(--color-border-strong);
    flex: 0 0 auto;
}
.au-branch {
    display: inline-flex;
    color: var(--color-text-muted);
}
.au-branch .material-symbols-rounded { font-size: 16px; }

.au-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--color-border);
    margin-top: auto;   /* the strip sits on the floor whatever the card holds */
}
.au-stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
}
.au-stats > div + div { border-left: 1px solid var(--color-border); }
.au-stat-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.au-stat-value {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}
.au-stat-empty {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

/* The "start a new one" tile. Dashed and unfilled so it reads as a slot rather
   than as another flow that happens to have no numbers. */
.au-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 220px;
    padding: var(--space-5);
    text-align: center;
    text-decoration: none;
    border-style: dashed;
    background: transparent;
}
.au-new-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-subtle-bg);
    color: var(--color-text-secondary);
}
.au-new-title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}
.au-new-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 22ch;
}
.au-new:hover { border-color: var(--color-teal); }
.au-new:hover .au-new-icon { background: var(--color-teal-light); color: var(--color-teal); }

/* ── The count line under the grid ────────────────────────────────────────
   `.mc-pagination` is built as a TABLE FOOTER: a rule on top, a filled
   background and two bottom-rounded corners, so it closes the card a table
   sits in. In grid mode there is no card to close, and the strip came out
   welded to the underside of the tiles — a filled bar with a hard edge
   against a row of cards that already have their own.

   Under a grid it is not chrome, it is a caption about the collection above
   it. So: no fill, no corners, and air. The hairline stays because the line
   still has to belong to the grid rather than float between it and whatever
   comes next; what it needed was distance, not another edge. */
.au-grid + .mc-pagination {
    margin-top: var(--space-5);
    /* Horizontal padding of ZERO, so the count starts on the same vertical as
       the first card's left edge and the page numbers end on the last card's
       right edge. The footer variant carries side padding because it lives
       inside a card and has to clear its corners; here it would push the line
       four pixels out of the column and read as an accident. */
    padding: var(--space-4) 0 0;
    background: transparent;
    border-radius: 0;
}

@media (max-width: 640px) {
    .au-grid { grid-template-columns: 1fr; }
    .au-stats > div { padding: var(--space-3); }
    /* Stacked, the summary and the page numbers need their own lines. */
    .au-grid + .mc-pagination { flex-wrap: wrap; }
}

/* ==========================================================================
   Selettore di campi dinamici (TagPicker)
   --------------------------------------------------------------------------
   L'icona dentro il campo, e il pannello che apre. Il pannello e' `fixed`:
   il modulo del wizard sta dentro contenitori che ritagliano, e un pannello
   assoluto verrebbe tagliato al primo bordo.
   ========================================================================== */

.mc-field-tagged { position: relative; display: block; }

/* Spazio a destra per l'icona, dentro il campo: un pulsante ESTERNO avrebbe
   allontanato il campo dal suo bordo e disallineato questa riga da tutte le
   altre del modulo. */
.mc-field-tagged > .mc-form-input { padding-right: 40px; }

.mc-field-tagged-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 140ms, color 140ms;
}

.mc-field-tagged-btn:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}

.mc-field-tagged-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-pulse-ring);
    color: var(--color-text);
}

.mc-field-tagged-btn[aria-expanded="true"] {
    background: var(--color-pulse-light);
    color: var(--color-pulse-strong);
}

.mc-field-tagged-btn .material-symbols-rounded { font-size: 19px; }

/* ---------- Il pannello ---------- */

.mc-tagpick-pop {
    position: fixed;
    z-index: var(--z-dropdown, 100);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    animation: mc-tagpick-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mc-tagpick-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.mc-tagpick-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
}

.mc-tagpick-search .material-symbols-rounded { font-size: 18px; color: var(--color-text-muted); }

.mc-tagpick-input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font: inherit;
    font-size: var(--text-base);
    color: var(--color-text);
}

/* Il segnaposto ha lo stesso obbligo di contrasto del testo. */
.mc-tagpick-input::placeholder { color: var(--color-text-muted); opacity: 1; }

.mc-tagpick-list { max-height: 320px; overflow-y: auto; padding: 4px; }

.mc-tagpick-group {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: 10px 10px 4px;
}

/* Impilata — nome sopra, frammento sotto — come `.fl-perso-item` nei pannelli
   automazione. Con nome e chiave sulla stessa riga le due schermate si
   leggevano in modo diverso pur facendo la stessa cosa. */
.mc-tagpick-opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.mc-tagpick-opt:hover,
.mc-tagpick-opt:focus-visible {
    background: var(--color-pulse-light);
    outline: none;
}

.mc-tagpick-opt-label { font-size: var(--text-sm); color: var(--color-text); }

.mc-tagpick-opt-key {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mc-tagpick-empty {
    padding: 14px 12px;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .mc-field-tagged-btn { transition: none; }
    .mc-tagpick-pop      { animation: none; }
}

/* ==========================================================================
   Segnalazione a livello di campo — `.mc-feedback`
   --------------------------------------------------------------------------
   La riga che compare sotto un campo per dire qualcosa su quel campo. Non e'
   `.mc-alert`, che e' il banner di sezione: qui si sta stretti, sotto un
   input, e il messaggio riguarda una cosa sola.

   Il livello si sceglie fra i quattro di `variables.css` e si dichiara nella
   classe. Chi legge il markup vede subito se quel messaggio blocca o no, che
   e' l'informazione che si perdeva quando ogni schermata sceglieva un colore
   a sentimento.
   ========================================================================== */

.mc-feedback {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-2-5);
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* `display: flex` batte l'attributo `hidden`: senza questa riga un messaggio
   nascosto resta in pagina. */
.mc-feedback[hidden] { display: none; }

.mc-feedback-icon {
    font-size: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.mc-feedback--blocking { background: var(--fb-blocking-bg); color: var(--fb-blocking-ink); }
.mc-feedback--warning  { background: var(--fb-warning-bg);  color: var(--fb-warning-ink); }
.mc-feedback--info     { background: var(--fb-info-bg);     color: var(--fb-info-ink); }
.mc-feedback--success  { background: var(--fb-success-bg);  color: var(--fb-success-ink); }

.mc-feedback a { color: inherit; text-decoration: underline; }

.mc-feedback:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* L'icona d'aiuto accanto a un'etichetta di campo. Il fumetto porta la
   spiegazione lunga, l'etichetta resta corta: chi ha gia' capito non la
   rilegge, chi non ha capito ha dove guardare. Il `tabindex` sta nel markup,
   perche' una spiegazione raggiungibile solo col mouse non e' raggiungibile. */
.mc-form-label-info {
    font-size: 15px;
    line-height: 1;
    margin-left: var(--space-1);
    color: var(--color-text-muted);
    cursor: help;
    vertical-align: -2px;
}

.mc-form-label-info:hover { color: var(--color-text-secondary); }

.mc-form-label-info:focus-visible {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   Server MCP — la pagina che collega Mailpulse agli strumenti di IA
   ========================================================================== */

/* Il comando sta in fondo alla riga, non dove capita: due righe di
   interruttori con i pulsanti a distanze diverse si leggono come due
   controlli scollegati fra loro. */
.mc-toggle-row > form { margin-left: auto; flex-shrink: 0; align-self: center; }

.mc-numbered-list {
    margin: var(--space-3) 0 0;
    padding-left: var(--space-5);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}
.mc-numbered-list li + li { margin-top: var(--space-2); }

.mc-settings-meta {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mc-settings-meta .material-symbols-rounded { font-size: var(--text-md); }

/* L'elenco degli strumenti.
   Il nome e' la cosa che si cerca — e' in monospazio e in colonna sua, cosi'
   l'occhio scorre i nomi senza leggere le descrizioni. La descrizione e' la
   stessa che legge il modello: mostrarla qui e' il solo modo che ha una
   persona di sapere cosa capira' l'IA. */
.mc-mcp-tools { list-style: none; margin: var(--space-4) 0 0; padding: 0; }

.mc-mcp-tool {
    display: grid;
    grid-template-columns: minmax(0, 16rem) auto;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3) 0;
    border-top: var(--space-px) solid var(--color-border);
}
.mc-mcp-tool:last-child { border-bottom: var(--space-px) solid var(--color-border); }

.mc-mcp-tool-name {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text);
    background: none;
    padding: 0;
}
.mc-mcp-tool-kind {
    justify-self: start;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    border: var(--space-px) solid var(--color-border);
    border-radius: 999px;
    padding: 0 var(--space-2);
    line-height: 1.6;
}
.mc-mcp-tool-desc {
    grid-column: 1 / -1;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    max-width: 70ch;
}

/* Spento vuol dire spento: uno strumento che non risponde non deve avere lo
   stesso peso di uno che risponde. */
.mc-mcp-tool.is-off { opacity: 0.45; }

@media (min-width: 900px) {
    /* Con spazio, nome e descrizione stanno affiancati e l'elenco si legge
       come una tabella: i nomi incolonnati a sinistra. */
    .mc-mcp-tool {
        grid-template-columns: minmax(0, 14rem) 5rem minmax(0, 1fr);
        align-items: baseline;
    }
    .mc-mcp-tool-desc { grid-column: 3; }
}

/* ================================================================
   Interruttore acceso/spento — il componente unico
   ================================================================
   Tre famiglie di marcatura convivono nel prodotto e devono avere lo
   stesso aspetto: `<input class="mc-toggle">` da solo, `<label
   class="mc-toggle">` che avvolge casella e cursore, e la coppia
   `.mc-switch-input + .mc-switch-slider`. Le regole sono raggruppate
   invece che duplicate perche' tre copie dello stesso interruttore
   sono tre modi di farlo divergere.

   ── PERCHE' L'ETICHETTA STA DENTRO ────────────────────────────────
   Una pastiglia senza scritta dice «c'e' un interruttore», non dice
   se e' acceso. Chi la guarda deve dedurre lo stato dalla posizione
   del pomello e dal colore, e il colore da solo non basta a chi non
   lo distingue. ON/OFF scritto dentro dichiara lo stato senza
   bisogno di un'etichetta accanto che ripeta «Attivo».

   ON/OFF non passa dai file di lingua: e' una marcatura, come I/O su
   un interruttore fisico, e diciotto traduzioni che dicono tutte «ON»
   sarebbero diciotto occasioni di scriverlo diverso. Chi ne avesse
   davvero bisogno puo' sovrascrivere con --tg-text-on / --tg-text-off.

   ── PERCHE' VERDE E NON --color-teal ──────────────────────────────
   --color-teal e' l'accento dell'account, e cambia con lo schema
   colore scelto: su uno schema «grigio» diventa #1A2C3F, su «bianco»
   #455667. Un interruttore acceso che si tinge di grigio non dice
   piu' di essere acceso. --color-success invece non dipende dallo
   schema: verde vuol dire acceso in tutti e sette.

   ── LA GEOMETRIA E' IN VARIABILI ──────────────────────────────────
   Chi deve rimpicciolirlo (la barra laterale del costruttore di
   automazioni) cambia --tg-w/--tg-h/--tg-knob e basta: non rifa' le
   regole, e quindi non se ne dimentica una.
   ================================================================ */

/* Il cursore si stila da solo, senza pretendere un antenato .mc-switch:
   la topbar dell'editor automazioni lo usa dentro il proprio involucro, e
   una regola che chiede l'antenato lo lascerebbe invisibile. */
input.mc-toggle,
label.mc-toggle .mc-toggle-slider,
.mc-switch-slider {
    --tg-w:        52px;
    --tg-h:        26px;
    --tg-knob:     20px;
    --tg-pad:      3px;
    --tg-font:     9px;

    /* Il verde e' quello del marchio (--color-pulse, il verde del logo), non
       --color-success: --color-success e' il verde dei messaggi di riuscita,
       e un interruttore acceso non e' un messaggio. --color-pulse ha in piu'
       la proprieta' che serve qui — nessuno dei sette schemi colore lo
       ridefinisce, mentre --color-teal si tinge di grigio su «grigio» e su
       «bianco», e un acceso grigio non dice piu' di essere acceso.

       L'inchiostro e' scuro, non bianco, e non e' una scelta di stile: sul
       verde del marchio il bianco da' 1,9:1, sotto qualunque soglia. Lo
       stesso scuro va bene anche sullo spento, quindi ce n'e' uno solo. */
    --tg-off-bg:   var(--color-text-disabled);
    --tg-off-ink:  #08121A;
    --tg-on-bg:    var(--color-pulse);
    --tg-on-ink:   #08121A;
    --tg-knob-bg:  #FFFFFF;

    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    flex: none;
    width: var(--tg-w);
    min-width: var(--tg-w);
    height: var(--tg-h);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--tg-off-bg);
    cursor: pointer;
    overflow: hidden;
    transition: background-color .22s cubic-bezier(.22, 1, .36, 1);
}

/* L'etichetta occupa la corsia libera accanto al pomello, e trasla
   insieme a lui: cosi' la scritta segue il movimento invece di
   saltare da un lato all'altro a fine transizione. */
input.mc-toggle::before,
label.mc-toggle .mc-toggle-slider::before,
.mc-switch-slider::before {
    content: var(--tg-text-off, 'OFF');
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--tg-knob);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tg-font);
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    color: var(--tg-off-ink);
    pointer-events: none;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}

input.mc-toggle::after,
label.mc-toggle .mc-toggle-slider::after,
.mc-switch-slider::after {
    content: '';
    position: absolute;
    top: var(--tg-pad);
    left: var(--tg-pad);
    width: var(--tg-knob);
    height: var(--tg-knob);
    border-radius: 50%;
    background: var(--tg-knob-bg);
    /* Il bordo del pomello e' disegnato, non lasciato al caso: bianco su
       verde del marchio fa 1,9:1 e bianco sul grigio dello spento 2,9:1,
       tutti e due sotto il minimo perche' si veda dove finisce. L'anello
       da un pixel glielo ridisegna; l'ombra sotto gli da' il rilievo. */
    box-shadow: 0 1px 3px rgba(8, 18, 26, .28), 0 0 0 1px rgba(8, 18, 26, .14);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}

input.mc-toggle:checked,
label.mc-toggle input[type="checkbox"]:checked + .mc-toggle-slider,
.mc-switch-input:checked + .mc-switch-slider {
    background: var(--tg-on-bg);
}

input.mc-toggle:checked::before,
label.mc-toggle input[type="checkbox"]:checked + .mc-toggle-slider::before,
.mc-switch-input:checked + .mc-switch-slider::before {
    content: var(--tg-text-on, 'ON');
    color: var(--tg-on-ink);
    transform: translateX(calc(-1 * var(--tg-knob)));
}

input.mc-toggle:checked::after,
label.mc-toggle input[type="checkbox"]:checked + .mc-toggle-slider::after,
.mc-switch-input:checked + .mc-switch-slider::after {
    transform: translateX(calc(var(--tg-w) - var(--tg-knob) - var(--tg-pad) * 2));
}

/* Spento e disabilitato restano distinguibili: mezza opacita' e il
   cursore che dice di no. Senza, un interruttore bloccato si prova a
   premere finche' non ci si convince che sia rotto. */
input.mc-toggle:disabled,
label.mc-toggle input[type="checkbox"]:disabled + .mc-toggle-slider,
.mc-switch-input:disabled + .mc-switch-slider {
    /* .45 su un grigio gia' chiaro faceva sparire la pastiglia: bloccato
       deve restare leggibile, e' il caso in cui lo stato conta di piu' —
       lo si puo' solo guardare. */
    opacity: .6;
    cursor: not-allowed;
}

input.mc-toggle:focus-visible,
label.mc-toggle input[type="checkbox"]:focus-visible + .mc-toggle-slider,
.mc-switch-input:focus-visible + .mc-switch-slider {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

[data-theme="dark"] input.mc-toggle,
[data-theme="dark"] label.mc-toggle .mc-toggle-slider,
[data-theme="dark"] .mc-switch-slider {
    /* Niente da ridefinire sui colori: --color-pulse e --color-text-disabled
       hanno gia' la loro versione scura, e l'inchiostro resta lo stesso
       perche' tutti e due i fondi restano chiari abbastanza da reggerlo
       (4,6:1 il piu' stretto). Il blocco resta perche' qui ci finisce la
       prima differenza fra i due temi, il giorno che ce ne sara' una. */
    --tg-knob-bg: #FFFFFF;
}

/* Mentre la richiesta e' per aria. Toggle.js disabilita la casella, che da
   sola diventerebbe solo pallida: il cursore d'attesa dice che sta
   succedendo qualcosa invece che «questo non si tocca». */
.is-toggling .mc-switch-slider,
.is-toggling .mc-toggle-slider,
.is-toggling input.mc-toggle {
    cursor: progress;
    opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
    input.mc-toggle,
    input.mc-toggle::before,
    input.mc-toggle::after,
    label.mc-toggle .mc-toggle-slider,
    label.mc-toggle .mc-toggle-slider::before,
    label.mc-toggle .mc-toggle-slider::after,
    .mc-switch-slider,
    .mc-switch-slider::before,
    .mc-switch-slider::after {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PARITÀ HEROUI — i componenti che la libreria ha e questo prodotto no
   ══════════════════════════════════════════════════════════════════════════

   Diciotto famiglie nuove, scritte nel vocabolario di casa (`mc-*`, token di
   `variables.css`) invece di importate. La valutazione che ha portato qui sta
   nella guida, sezione «HeroUI coverage»: il foglio di HeroUI si sarebbe potuto
   caricare com'e', ma avrebbe portato dentro un secondo modo di scrivere un
   bottone e un reset globale sopra cinquantamila righe che non lo aspettano.

   Regole rispettate qui dentro, tutte gia' pagate altrove (CLAUDE.md §4 e §6):
     - l'acceso e' `--color-pulse`, mai `--color-teal`, che cambia con lo schema
       colore e su «grigio» smette di dire acceso;
     - sul verde del marchio l'inchiostro e' scuro: bianco da' 1,9:1;
     - niente `1fr` nudo dove dentro puo' finire testo lungo: `minmax(0, 1fr)`;
     - niente decorazione semitrasparente sopra superfici che si muovono.
   ────────────────────────────────────────────────────────────────────────── */

/* ── «Elimina» dentro un menu ────────────────────────────────────────────
   `.mc-dropdown-item-danger` era usata in 62 punti su 55 viste e non esisteva
   in nessun foglio: l'azione che cancella aveva lo stesso colore di quella che
   modifica. Il rosso non e' l'informazione — quella e' la parola — ma e' cio'
   che fa rallentare la mano un istante prima di premere, che in un menu dove
   le voci stanno a otto pixel l'una dall'altra e' tutto quello che c'e' fra un
   clic giusto e uno sbagliato. */
.mc-dropdown-item-danger { color: var(--color-error); }
.mc-dropdown-item-danger:hover,
.mc-dropdown-item-danger:focus-visible {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
}
/* L'icona segue il testo invece di restare grigia: mezza voce rossa e mezza
   no si legge come un errore di resa, non come un avvertimento. */
.mc-dropdown-item-danger .material-symbols-rounded,
.mc-dropdown-item-danger svg { color: inherit; }

/* ── Campo obbligatorio ──────────────────────────────────────────────────
   L'asterisco sta PRIMA del nome del campo, non dopo. Chi ascolta con un
   lettore di schermo deve sapere che il campo e' obbligatorio prima di
   sentirne il nome, non dopo averlo gia' ascoltato e archiviato.

   Ed e' in posizione assoluta, fuori dal flusso: se occupasse spazio, le
   etichette dei campi obbligatori partirebbero qualche pixel piu' a destra
   delle altre e la colonna si sfilaccerebbe — su un modulo di dieci campi si
   vede, e sembra un difetto di allineamento invece di un'informazione. */
.mc-required { position: relative; }
.mc-required::before {
    content: "*";
    position: absolute;
    left: calc(var(--space-2-5) * -1);
    color: var(--color-error);
    font-weight: var(--weight-bold);
}

/* ── Campo in errore ─────────────────────────────────────────────────────
   Un campo sbagliato si vede ANCHE dal bordo, non solo dal messaggio rosso
   sotto. Su un modulo lungo chi scorre vede il rosso e deve poi cercare a
   quale campo appartiene — e se il messaggio sta sotto la piega, non lo vede
   affatto. `aria-invalid` e' gia' l'attributo che un lettore di schermo
   legge, quindi lo stile si aggancia a quello e non a una classe in piu':
   chi marca il campo per l'accessibilita' ottiene il bordo gratis, e chi
   mette il bordo non puo' dimenticare l'accessibilita'. */
.mc-form-input[aria-invalid="true"],
.mc-form-input[aria-invalid="true"]:hover {
    border-color: var(--color-error);
}
.mc-form-input[aria-invalid="true"]:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px var(--color-error-ring);
}

/* ── Kbd ─────────────────────────────────────────────────────────────────
   Un tasto, non una pastiglia. Il bordo inferiore piu' spesso e' l'unica
   cosa che lo fa leggere come qualcosa che si preme invece che come
   un'etichetta: senza, e' indistinguibile da `.mc-badge`. */
.mc-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-6);
    height: var(--space-6);
    padding: 0 var(--space-1-5);
    border: var(--space-px) solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
}
.mc-kbd-group { display: inline-flex; align-items: center; gap: var(--space-1); }
.mc-kbd-group .mc-kbd-plus { color: var(--color-text-muted); font-size: var(--text-xs); }

/* ── Separator ───────────────────────────────────────────────────────────
   Con l'etichetta dentro sta su una griglia a tre colonne invece che su uno
   pseudo-elemento per lato: cosi' la riga si accorcia da sola quando la
   parola cresce, e non serve sapere quanto e' larga. */
.mc-separator {
    border: 0;
    height: var(--space-px);
    background: var(--color-border);
    margin: var(--space-4) 0;
}
.mc-separator-vertical {
    width: var(--space-px);
    height: auto;
    align-self: stretch;
    margin: 0 var(--space-3);
}
.mc-separator-labelled {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}
.mc-separator-labelled::before,
.mc-separator-labelled::after {
    content: "";
    height: var(--space-px);
    background: var(--color-border);
}

/* ── Surface ─────────────────────────────────────────────────────────────
   Tre livelli, e la differenza fra loro e' l'ombra, non il colore: in tema
   scuro schiarire una superficie per «alzarla» la fa sembrare accesa. */
.mc-surface {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-4);
}
.mc-surface-raised { box-shadow: var(--shadow-card); }
.mc-surface-overlay { box-shadow: var(--shadow-dropdown); }
.mc-surface-sunken {
    background: var(--color-bg-subtle);
    box-shadow: none;
}

/* ── Close button ────────────────────────────────────────────────────────
   Area di tocco 28px su un'icona da 16: il bersaglio e' il quadrato, non
   la croce, altrimenti su un telefono chiudere e' una questione di mira. */
.mc-btn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-7);
    height: var(--space-7);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mc-btn-close .material-symbols-rounded { font-size: 18px; }
.mc-btn-close:hover { background: var(--color-hover-bg); color: var(--color-text); }
.mc-btn-close:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 1px;
}

/* ── Meter ───────────────────────────────────────────────────────────────
   Una barra che misura una QUANTITA' dentro un intervallo noto — quota del
   piano, spazio consumato — non un avanzamento. La differenza conta: un
   avanzamento pieno e' una buona notizia, una quota piena non lo e'. Per
   questo il tono lo decide `data-tone` e non la percentuale: chi la usa sa
   se 90% e' bene o male, il componente no. */
.mc-meter { display: flex; flex-direction: column; gap: var(--space-1-5); }
.mc-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
}
.mc-meter-label { color: var(--color-text-secondary); font-weight: var(--weight-medium); }
.mc-meter-value {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.mc-meter-track {
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    overflow: hidden;
}
.mc-meter-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-teal);
    transition: width var(--transition-base) var(--ease-out);
}
.mc-meter[data-tone="good"]    .mc-meter-fill { background: var(--color-success); }
.mc-meter[data-tone="warning"] .mc-meter-fill { background: var(--color-warning); }
.mc-meter[data-tone="danger"]  .mc-meter-fill { background: var(--color-error); }
.mc-meter-foot { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Progress ring ───────────────────────────────────────────────────────
   Disegnato con un gradiente conico e un buco al centro invece che con un
   SVG: una percentuale sola non vale un nodo per ogni valore, e il numero
   dentro resta testo vero, quindi selezionabile e leggibile da un lettore
   di schermo. La percentuale arriva da `--ring-pct` (0–100). */
.mc-progress-ring {
    --ring-pct: 0;
    --ring-size: var(--space-12);
    --ring-thickness: 4px;
    position: relative;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: var(--radius-full);
    background: conic-gradient(
        var(--color-teal) calc(var(--ring-pct) * 1%),
        var(--color-bg-subtle) 0
    );
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}
.mc-progress-ring::before {
    content: "";
    position: absolute;
    inset: var(--ring-thickness);
    border-radius: var(--radius-full);
    background: var(--color-card-bg);
}
.mc-progress-ring-value {
    position: relative;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.mc-progress-ring-lg { --ring-size: var(--space-16); --ring-thickness: 6px; }
.mc-progress-ring-lg .mc-progress-ring-value { font-size: var(--text-sm); }
.mc-progress-ring-sm { --ring-size: var(--space-8); --ring-thickness: 3px; }
.mc-progress-ring-sm .mc-progress-ring-value { font-size: 10px; }
.mc-progress-ring[data-tone="good"]    { background: conic-gradient(var(--color-success) calc(var(--ring-pct) * 1%), var(--color-bg-subtle) 0); }
.mc-progress-ring[data-tone="warning"] { background: conic-gradient(var(--color-warning) calc(var(--ring-pct) * 1%), var(--color-bg-subtle) 0); }
.mc-progress-ring[data-tone="danger"]  { background: conic-gradient(var(--color-error)   calc(var(--ring-pct) * 1%), var(--color-bg-subtle) 0); }
/* Indeterminato: gira. Un anello fermo a meta' dice «45%», non «sto lavorando». */
.mc-progress-ring-spin {
    background: conic-gradient(var(--color-bg-subtle) 0 65%, var(--color-teal) 0);
    animation: mc-ring-spin 900ms linear infinite;
}
@keyframes mc-ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mc-progress-ring-spin { animation: none; } }

/* ── Slider ──────────────────────────────────────────────────────────────
   Un `input[type=range]` vero sotto: la tastiera, le frecce, il passo e il
   supporto dei lettori di schermo arrivano dal browser e non si riscrivono.
   Qui si veste soltanto. La parte percorsa la disegna un gradiente guidato
   da `--slider-pct`, che aggiorna chi ascolta l'input. */
.mc-slider { display: flex; flex-direction: column; gap: var(--space-2); }
.mc-slider[hidden] { display: none; }
.mc-slider-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
}
.mc-slider-label { color: var(--color-text-secondary); font-weight: var(--weight-medium); }
.mc-slider-output {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.mc-slider-input {
    --slider-pct: 0%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--space-5);
    background: transparent;
    cursor: pointer;
    margin: 0;
}
.mc-slider-input::-webkit-slider-runnable-track {
    height: var(--space-1-5);
    border-radius: var(--radius-full);
    background: linear-gradient(
        to right,
        var(--color-teal) var(--slider-pct),
        var(--color-bg-subtle) var(--slider-pct)
    );
}
.mc-slider-input::-moz-range-track {
    height: var(--space-1-5);
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
}
.mc-slider-input::-moz-range-progress {
    height: var(--space-1-5);
    border-radius: var(--radius-full);
    background: var(--color-teal);
}
/* Il pomello ha un anello, non solo un'ombra: bianco su turchese non si vede
   dove finisce — la stessa ragione dell'interruttore, CLAUDE.md §6. */
.mc-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--space-4);
    height: var(--space-4);
    margin-top: calc((var(--space-1-5) - var(--space-4)) / 2);
    border-radius: var(--radius-full);
    background: var(--color-white);
    box-shadow: 0 0 0 1px var(--color-border-strong), var(--shadow-sm);
    border: 2px solid var(--color-teal);
    transition: transform var(--transition-fast);
}
.mc-slider-input::-moz-range-thumb {
    width: var(--space-4);
    height: var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-white);
    box-shadow: 0 0 0 1px var(--color-border-strong), var(--shadow-sm);
    border: 2px solid var(--color-teal);
}
.mc-slider-input:active::-webkit-slider-thumb { transform: scale(1.12); }
.mc-slider-input:focus-visible { outline: none; }
.mc-slider-input:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-focus); }
.mc-slider-input:focus-visible::-moz-range-thumb { box-shadow: var(--shadow-focus); }
.mc-slider-input:disabled { cursor: not-allowed; opacity: .55; }
.mc-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Number field ────────────────────────────────────────────────────────
   Le frecce native del browser sono minuscole e cambiano da motore a motore.
   Qui sono due bersagli veri, e il campo tiene `inputmode="numeric"` perche'
   su un telefono deve aprire la tastiera dei numeri.
   Il campo dentro perde il bordo suo: il bordo e' del gruppo, altrimenti se
   ne vedono due annidati. */
.mc-number-field {
    display: inline-flex;
    align-items: stretch;
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-card-bg);
    overflow: hidden;
}
.mc-number-field:focus-within {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}
.mc-number-field-input {
    width: var(--space-16);
    padding: var(--space-2) var(--space-2-5);
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
}
.mc-number-field-input::-webkit-outer-spin-button,
.mc-number-field-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mc-number-field-input:focus { outline: none; }
.mc-number-field-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    border: 0;
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mc-number-field-btn .material-symbols-rounded { font-size: 17px; }
.mc-number-field-btn:hover:not(:disabled) { background: var(--color-hover-bg); color: var(--color-text); }
.mc-number-field-btn:disabled { color: var(--color-text-disabled); cursor: not-allowed; }
/* Niente unita' di misura DENTRO il campo.
   C'era `.mc-number-field-suffix`, ed era un errore: «28 ore» dentro il
   riquadro fa sembrare che si stia scrivendo anche la parola, e quando il
   numero cresce a quattro cifre la parola balla. L'unita' va nell'etichetta,
   fra parentesi — «Attesa (ore)» — dove sta ferma e si legge prima di
   toccare il campo. */

/* ── Fieldset ────────────────────────────────────────────────────────────
   Un `<fieldset>` vero, perche' e' quello che lega un gruppo di caselle a una
   domanda sola per chi usa un lettore di schermo. La `<legend>` esce dal
   bordo con un fondo pieno: se resta trasparente, sopra un fondo diverso il
   bordo le passa dietro le lettere. */
.mc-fieldset {
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-4) var(--space-4) var(--space-3);
    margin: 0;
    min-width: 0;
}
.mc-fieldset-legend {
    /* Bootstrap 5 — che questo layout carica ancora da CDN — dichiara
       `legend { width: 100% }`, e una legenda larga tutta la scheda si porta
       dietro il suo fondo bianco fino in fondo alla riga: sembra un campo
       vuoto, non un titolo. Va rimessa a `auto`. */
    width: auto;
    padding: 0 var(--space-2);
    margin-left: calc(var(--space-2) * -1);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
.mc-fieldset-desc {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}
.mc-fieldset-body { display: flex; flex-direction: column; gap: var(--space-2-5); }
.mc-fieldset-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ── Scroll shadow ───────────────────────────────────────────────────────
   Un'ombra ai bordi che dice «c'e' altro sotto», e sparisce quando sei in
   fondo. Fatta con `background-attachment: local` sullo stesso elemento che
   scorre: e' l'unico modo senza JavaScript, perche' i due strati «coprenti»
   restano fermi col contenitore mentre le due sfumature scorrono col
   contenuto e le nascondono agli estremi.
   Il colore delle coperture e' opaco, non trasparente: sopra una superficie
   che si muove una copertura semitrasparente lascia vedere quello che c'e'
   dietro, e non sembra un'ombra ma un'interfaccia rotta (CLAUDE.md §4). */
.mc-scroll-shadow {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background:
        linear-gradient(var(--color-card-bg) 30%, transparent) top    / 100% var(--space-6) no-repeat local,
        linear-gradient(transparent, var(--color-card-bg) 70%) bottom / 100% var(--space-6) no-repeat local,
        radial-gradient(farthest-side at 50% 0,   var(--color-overlay), transparent) top    / 100% var(--space-3) no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, var(--color-overlay), transparent) bottom / 100% var(--space-3) no-repeat scroll;
    background-color: var(--color-card-bg);
}
.mc-scroll-shadow-x {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    background:
        linear-gradient(to right, var(--color-card-bg) 30%, transparent) left  / var(--space-6) 100% no-repeat local,
        linear-gradient(to left,  var(--color-card-bg) 30%, transparent) right / var(--space-6) 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%,   var(--color-overlay), transparent) left  / var(--space-3) 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--color-overlay), transparent) right / var(--space-3) 100% no-repeat scroll;
    background-color: var(--color-card-bg);
}

/* ── Listbox ─────────────────────────────────────────────────────────────
   L'elenco a se stante: quello che sta DENTRO un menu a tendina, ma usabile
   anche da solo — scegliere una lista, un modello, un server. `.mc-rich-select`
   e' il caso con il grilletto; questo e' il caso senza.
   La riga scelta si segna con un fondo tenue PIU' la spunta: il solo fondo
   sparisce per chi non distingue quel contrasto. */
.mc-listbox {
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    padding: var(--space-1);
    overflow: auto;
}
.mc-listbox-section {
    padding: var(--space-2) var(--space-2-5) var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.mc-listbox-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    width: 100%;
    padding: var(--space-2) var(--space-2-5);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.mc-listbox-item:hover { background: var(--color-hover-bg); }
.mc-listbox-item:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}
.mc-listbox-item[aria-selected="true"] { background: var(--color-active-bg); font-weight: var(--weight-medium); }
.mc-listbox-item[aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; }
.mc-listbox-item[aria-disabled="true"]:hover { background: transparent; }
.mc-listbox-item-icon { display: flex; color: var(--color-text-muted); flex-shrink: 0; }
.mc-listbox-item-icon .material-symbols-rounded { font-size: 18px; }
.mc-listbox-item-body { min-width: 0; flex: 1; }
.mc-listbox-item-label { display: block; }
.mc-listbox-item-desc {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}
.mc-listbox-item-check { color: var(--color-teal); flex-shrink: 0; opacity: 0; }
.mc-listbox-item-check .material-symbols-rounded { font-size: 18px; }
.mc-listbox-item[aria-selected="true"] .mc-listbox-item-check { opacity: 1; }
.mc-listbox-empty {
    padding: var(--space-5) var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ── Tag group ───────────────────────────────────────────────────────────
   Pastiglie che si tolgono. La croce e' un `<button>` dentro l'etichetta, non
   la pastiglia intera: la pastiglia spesso e' anche un filtro da premere, e
   un solo bersaglio per due azioni le rende entrambe imprevedibili. */
.mc-tag-group { display: flex; flex-wrap: wrap; gap: var(--space-1-5); align-items: center; }
.mc-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2-5);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    max-width: 100%;
}
.mc-tag-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-5);
    height: var(--space-5);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mc-tag-remove .material-symbols-rounded { font-size: 14px; }
.mc-tag-remove:hover { background: var(--color-error-bg); color: var(--color-error); }
.mc-tag-remove:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.mc-tag-teal   { background: var(--color-active-bg); border-color: transparent; color: var(--color-teal); }
.mc-tag-static { padding-right: var(--space-2-5); }

/* ── Color swatch ────────────────────────────────────────────────────────
   Il fondo a scacchi sotto il colore serve a distinguere «trasparente» da
   «bianco». E' un gradiente OPACO su due grigi, non una trama semitrasparente:
   sopra una scheda scura una trama trasparente diventa invisibile e i due
   casi tornano a somigliarsi. */
.mc-swatch {
    position: relative;
    display: inline-block;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-sm);
    border: var(--space-px) solid var(--color-border);
    overflow: hidden;
    flex-shrink: 0;
    background-image:
        linear-gradient(45deg, var(--color-bg-subtle) 25%, transparent 25%),
        linear-gradient(-45deg, var(--color-bg-subtle) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--color-bg-subtle) 75%),
        linear-gradient(-45deg, transparent 75%, var(--color-bg-subtle) 75%);
    background-size: var(--space-2) var(--space-2);
    background-position: 0 0, 0 var(--space-1), var(--space-1) calc(var(--space-1) * -1), calc(var(--space-1) * -1) 0;
    background-color: var(--color-card-bg);
}
.mc-swatch-fill { position: absolute; inset: 0; background: var(--swatch-color, transparent); }
.mc-swatch-sm { width: var(--space-5); height: var(--space-5); }
.mc-swatch-lg { width: var(--space-11); height: var(--space-11); }
.mc-swatch-round { border-radius: var(--radius-full); }

.mc-swatch-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mc-swatch-option {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    line-height: 0;
}
.mc-swatch-option:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
/* La spunta e' scura, non bianca: su un giallo chiaro il bianco sparisce, e
   una scelta che non si vede e' una scelta che non e' stata fatta. */
.mc-swatch-option[aria-pressed="true"] .mc-swatch { box-shadow: 0 0 0 2px var(--color-card-bg), 0 0 0 4px var(--color-teal); }
.mc-swatch-option-check {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #08121A;
    opacity: 0;
    pointer-events: none;
}
.mc-swatch-option-check .material-symbols-rounded { font-size: 18px; }
.mc-swatch-option[aria-pressed="true"] .mc-swatch-option-check { opacity: 1; }

/* ── Color field ─────────────────────────────────────────────────────────
   Il campo esadecimale accanto al colore che rappresenta. Il pulsante ha
   `height: auto` perche' `.mc-btn` dichiara un'altezza fissa da 36px che
   batterebbe lo `stretch` del contenitore, e accanto a un campo da 44
   sembrerebbero due moduli diversi — errore gia' fatto tre volte,
   CLAUDE.md §4. */
/* Griglia, non flex: al campione serve un'altezza DEFINITA per ricavarne la
   larghezza con `aspect-ratio`, e in un contenitore flex l'altezza da
   `stretch` arriva troppo tardi — il quadrato collassava a un filo di un
   pixel. In griglia la riga si misura prima, `height: 100%` diventa un
   numero vero, e la larghezza scende da quello. */
.mc-color-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: var(--space-2);
}
.mc-color-field .mc-swatch {
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    border-radius: var(--radius-input);
}
.mc-color-field-input {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .02em;
    min-width: 0;
}
.mc-color-field .mc-btn { height: auto; }

/* ── Color area + color slider ───────────────────────────────────────────
   La tavolozza satura/luminosita' e i due cursori accanto. Il gradiente e'
   CSS puro guidato da `--hue`: chi la usa aggiorna quella variabile e non
   ridisegna niente. Il pomello sopra un colore qualunque ha DUE anelli, uno
   scuro e uno chiaro, perche' un anello solo sparisce su meta' dei colori. */
.mc-color-area {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.72;
    border-radius: var(--radius-lg);
    border: var(--space-px) solid var(--color-border);
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, hsl(var(--hue, 186) 100% 50%));
    cursor: crosshair;
    touch-action: none;
}
.mc-color-area-thumb {
    position: absolute;
    width: var(--space-4);
    height: var(--space-4);
    border-radius: var(--radius-full);
    transform: translate(-50%, -50%);
    background: var(--thumb-color, transparent);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, .45);
    pointer-events: none;
}
.mc-color-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--space-5);
    background: transparent;
    cursor: pointer;
    margin: 0;
}
.mc-color-slider::-webkit-slider-runnable-track {
    height: var(--space-3);
    border-radius: var(--radius-full);
    border: var(--space-px) solid var(--color-border);
}
.mc-color-slider::-moz-range-track {
    height: var(--space-3);
    border-radius: var(--radius-full);
    border: var(--space-px) solid var(--color-border);
}
.mc-color-slider-hue::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.mc-color-slider-hue::-moz-range-track {
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.mc-color-slider-alpha::-webkit-slider-runnable-track {
    background: linear-gradient(to right, transparent, hsl(var(--hue, 186) 100% 50%)), var(--color-bg-subtle);
}
.mc-color-slider-alpha::-moz-range-track {
    background: linear-gradient(to right, transparent, hsl(var(--hue, 186) 100% 50%)), var(--color-bg-subtle);
}
.mc-color-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--space-4);
    height: var(--space-4);
    margin-top: calc((var(--space-3) - var(--space-4)) / 2);
    border-radius: var(--radius-full);
    background: transparent;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, .45);
}
.mc-color-slider::-moz-range-thumb {
    width: var(--space-4);
    height: var(--space-4);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, .45);
}
.mc-color-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: var(--space-16);
    min-width: 240px;
    max-width: 280px;
    padding: var(--space-3);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-dropdown);
}

/* ── Calendar ────────────────────────────────────────────────────────────
   La griglia e' una `<table>` vera con `<th scope="col">` sui giorni: e' il
   solo modo perche' un lettore di schermo annunci «martedi' 14» invece di
   «14». La riga delle settimane e' una griglia a sette colonne uguali
   larghe `--space-9`, non `1fr`: con `1fr` la colonna di «31» diventa piu'
   larga di quella di «1» e il mese si storce.
   Estremi di un intervallo: gli angoli tondi stanno solo agli estremi, il
   mezzo e' quadrato — cosi' la selezione si legge come UNA fascia continua
   invece che come nove pastiglie vicine. */
.mc-calendar {
    display: inline-block;
    padding: var(--space-3);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
}
/* `display: inline-block` batte `[hidden]` (CLAUDE.md §4). Vale anche per il
   pannello del selettore di data, che porta questa classe insieme alla sua. */
.mc-calendar[hidden] { display: none; }

.mc-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.mc-calendar-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-7);
    height: var(--space-7);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.mc-calendar-nav .material-symbols-rounded { font-size: 18px; }
.mc-calendar-nav:hover { background: var(--color-hover-bg); }
.mc-calendar-nav:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
.mc-calendar-grid { border-collapse: collapse; }
.mc-calendar-grid th {
    width: var(--space-9);
    padding: var(--space-1) 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-align: center;
}
.mc-calendar-grid td { padding: 0; }
.mc-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-9);
    height: var(--space-9);
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mc-calendar-day:hover:not([disabled]) { background: var(--color-hover-bg); }
.mc-calendar-day:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }
.mc-calendar-day-outside { color: var(--color-text-disabled); }
.mc-calendar-day[disabled] { color: var(--color-text-disabled); cursor: not-allowed; }
/* Oggi si segna con un punto sotto, non con un bordo: il bordo e' quasi
   uguale alla selezione, e due cose diverse che si somigliano sono peggio
   di una sola. */
.mc-calendar-day-today { font-weight: var(--weight-semibold); position: relative; }
.mc-calendar-day-today::after {
    content: "";
    position: absolute;
    bottom: 5px;
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-teal);
}
.mc-calendar-day-selected,
.mc-calendar-day-selected:hover {
    background: var(--color-teal);
    color: var(--color-white);
}
.mc-calendar-day-selected.mc-calendar-day-today::after { background: var(--color-white); }
.mc-calendar-day-in-range {
    background: var(--color-active-bg);
    border-radius: 0;
}
.mc-calendar-day-range-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.mc-calendar-day-range-end   { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.mc-calendar-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: var(--space-px) solid var(--color-border);
}
.mc-calendar-months {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
}

/* ── Date field / time field ─────────────────────────────────────────────
   Il campo a segmenti: giorno, mese, anno separati, ognuno con la sua freccia
   su e giu'. Vale il fastidio rispetto a un `type="date"` per una ragione
   sola: l'ordine dei segmenti e il separatore cambiano da lingua a lingua, e
   qui le lingue sono diciotto.

   Ogni segmento e' un `<input inputmode="numeric">`: si clicca e si digita,
   apre la tastiera numerica sul telefono e non puo' ricevere markup incollato.
   Non un `<span contenteditable>`, che non fa nessuna delle tre. */
.mc-date-field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-0-5);
    padding: var(--space-2) var(--space-2-5);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}
/*
 * Quando il campo del kit sta in un MODULO — cioe' porta anche
 * `mc-form-input`, come nel passo «programma» della procedura campagna — deve
 * somigliare agli altri campi del modulo.
 *
 * `.mc-date-field` sta piu' in basso di `.mc-form-input` in questo foglio, e a
 * parita' di specificita' vince l'ultima scritta: il campo si prendeva il
 * corpo da 12px e il bordo tenue, e accanto a un <select> da 14px col bordo
 * marcato si leggeva come un'etichetta invece che come un campo — la stessa
 * famiglia di difetto di «un comando deve sembrare un comando» (CLAUDE.md §4).
 * Due classi battono una.
 */
.mc-date-field.mc-form-input {
    font-size: var(--text-base);
    border-color: var(--color-border-strong);
}

.mc-date-field:focus-within { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); }
/* Il segmento e' un <input> vero: si clicca e si digita, come nel campo
   nativo. `caret-color: transparent` perche' il cursore lampeggiante non
   serve — il segmento si sostituisce per intero, non si edita in mezzo — e
   perche' su due caratteri sposterebbe le cifre. La larghezza e' fissa sul
   numero di cifre: con le cifre tabulari il campo non si muove mentre lo si
   riempie. */
.mc-date-field-segment {
    width: calc(2ch + var(--space-1));
    padding: 0 var(--space-0-5);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
    border-radius: var(--radius-sm);
    outline: none;
    caret-color: transparent;
}
.mc-date-field-segment[data-tipo="year"] { width: calc(4ch + var(--space-1)); }
.mc-date-field-segment::-webkit-outer-spin-button,
.mc-date-field-segment::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Il segmento col fuoco si inverte: inchiostro della pagina come fondo, fondo
   della scheda come inchiostro.
   NON `--color-teal` con l'inchiostro bianco, che era la regola di prima:
   `--color-teal` e' l'accento dell'ACCOUNT e i sette schemi colore lo
   ridefiniscono. Su «grigio» vale `#B4BFCC`, e il bianco sopra fa 1,25:1 — il
   segmento che si sta scrivendo diventava illeggibile proprio mentre lo si
   scriveva. La coppia qui sotto e' l'unica che regge in tutti e sette gli
   schemi e in tutti e due i temi (CLAUDE.md §4). */
.mc-date-field-segment:focus {
    background: var(--color-text);
    color: var(--color-card-bg);
}
.mc-date-field-segment::placeholder { color: var(--color-text-disabled); opacity: 1; }
.mc-date-field-segment:focus::placeholder { color: var(--color-card-bg); opacity: .7; }
.mc-date-field-segment[data-placeholder="true"] { color: var(--color-text-disabled); }
.mc-date-field-sep { color: var(--color-text-muted); }

/* L'icona apre il pannello, quindi e' un bottone: il cursore lo dice, e si
   raggiunge col tabulatore dopo l'ultimo segmento. */
.mc-date-field-icon {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 0 0 0 var(--space-1);
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}
.mc-date-field-icon:hover { color: var(--color-text); }
.mc-date-field-icon:focus-visible {
    outline: var(--space-0-5) solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.mc-date-field-icon .material-symbols-rounded { font-size: 17px; }

/* ── Date picker ─────────────────────────────────────────────────────────
   Campo piu' calendario in un pannello. Il pannello NON sta dentro un
   contenitore che scorre — lo si monta in fondo al documento, come fa
   `Dropdown.js` — perche' `overflow` lo ritaglierebbe: e' lo stesso motivo
   per cui i menu delle righe di una tabella vivono nel `<body>`. */
.mc-date-picker { position: relative; display: inline-block; }
/* La riga d'aiuto dopo un selettore di data va SOTTO, non accanto.
   `.mc-form-help` e' in linea — glielo si vede solo qui, perche' ovunque
   altrove la precede un campo `display: block`, che manda a capo da se'. Il
   selettore di data invece e' `inline-block`, e la riga gli si appoggia di
   fianco: «Data di nascita [__/__/____] Una data, scritta AAAA-MM-GG.»
   Si corregge qui e non sulla classe base perche' `.mc-form-help` dichiara un
   `margin-top` che, essendo in linea, oggi non fa niente: renderla blocco per
   tutti aprirebbe quattro pixel sotto OGNI aiuto del prodotto — un cambiamento
   di spaziatura ovunque, per un difetto che si vede in un posto solo. */
.mc-date-picker + .mc-form-help { display: block; }
.mc-date-picker-panel {
    position: absolute;
    top: calc(100% + var(--space-1-5));
    left: 0;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-dropdown);
}
/* `display` batte `[hidden]` (CLAUDE.md §4). Questo pannello porta anche la
   classe `.mc-calendar`, che un `display` lo dichiara: senza questa riga
   l'attributo `hidden` non nasconde niente e il calendario, una volta aperto,
   non si chiude piu'. Non da' nessun errore — il JavaScript crede di averlo
   chiuso, `panel.hidden` risponde `true` — e si vede solo guardando la pagina. */
.mc-date-picker-panel[hidden] { display: none; }

.mc-date-picker-range {
    display: flex;
    gap: var(--space-4);
}
@media (max-width: 640px) {
    .mc-date-picker-range { flex-direction: column; }
}


/* ==========================================================================
   Scheda contatto (popover)
   Stava in campaign-report.css, che pero' lo caricano 15 viste su 380. Lo
   script che costruisce il popover — subscriber-card.js — sta invece nel
   layout condiviso, quindi gira su OGNI schermata: fuori da quelle 15 la
   scheda si apriva senza un solo stile addosso. Le regole vivono qui perche'
   components.css lo carica lo stesso layout che carica lo script.
   ========================================================================== */
/* Subscriber business card — lazy-fetched popover on hover over an email
   anchor with [data-subscriber-card]. Positioned fixed by JS so it floats
   above table cells / cards / map. */
.mc-subscriber-card {
    width: 280px;
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-dropdown);
    overflow: hidden;
    font-size: var(--text-sm);
}
.mc-subscriber-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: var(--space-px) solid var(--color-border);
    background: linear-gradient(135deg, var(--chart-1-bg), var(--color-card-bg));
}
.mc-subscriber-card-avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm, 8px);
    background: var(--chart-1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-semibold);
    font-size: 18px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.mc-subscriber-card-id { min-width: 0; flex: 1; }
.mc-subscriber-card-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-subscriber-card-email {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-subscriber-card-body { padding: var(--space-2) var(--space-4); }
.mc-subscriber-card-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-1) 0;
    color: var(--color-text);
}
.mc-subscriber-card-label { color: var(--color-text-muted); font-size: var(--text-xs); }
.mc-subscriber-card-val { font-weight: var(--weight-medium); }
.mc-subscriber-card-cta {
    display: block;
    padding: var(--space-2) var(--space-4);
    border-top: var(--space-px) solid var(--color-border);
    text-align: center;
    color: var(--color-teal);
    text-decoration: none;
    font-weight: var(--weight-medium);
}
.mc-subscriber-card-cta:hover { background: var(--color-hover-bg); }

/* Floating popover wrapper — set by JS, position:fixed to escape table overflow. */
.mc-subscriber-card-popover {
    position: fixed;
    z-index: var(--z-tooltip, 700);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    pointer-events: none;
}
.mc-subscriber-card-popover.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── Time picker ─────────────────────────────────────────────────────────
   Il campo e' `.mc-date-field` con i due punti e l'icona dell'orologio: il kit
   il campo orario ce l'ha gia', e sono le stesse parti. Qui c'e' solo il
   pannello — due contatori, uno per l'ora e uno per i minuti.
   ------------------------------------------------------------------------ */
.mc-time-picker { position: relative; display: inline-block; }

.mc-time-picker-panel {
    position: absolute;
    top: calc(100% + var(--space-1-5));
    left: 0;
    z-index: var(--z-dropdown);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-dropdown);
}

/* Stessa ragione del pannello del calendario: qui il `display: flex` e' qui
   sopra, e senza questa riga `hidden` non nasconde. */
.mc-time-picker-panel[hidden] { display: none; }

.mc-time-picker-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mc-time-picker-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-6);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.mc-time-picker-step:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}

.mc-time-picker-step .material-symbols-rounded { font-size: var(--text-xl); }

/* Il valore prende il fuoco e risponde alle frecce della tastiera: e' un
   contatore, e un contatore che si muove solo col mouse esclude chi il modulo
   lo compila senza staccare le mani. Per questo le due frecce sono fuori
   dall'ordine di tabulazione — sono lo stesso comando, non un secondo. */
.mc-time-picker-value {
    min-width: var(--space-10);
    padding: var(--space-0-5) var(--space-1);
    border-radius: var(--radius-sm);
    font-size: var(--text-2xl);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--color-text);
    text-align: center;
    cursor: default;
}

.mc-time-picker-value:focus-visible {
    outline: var(--space-0-5) solid var(--color-border-focus);
    outline-offset: 0;
}

.mc-time-picker-colon {
    padding: 0 var(--space-0-5);
    font-size: var(--text-2xl);
    line-height: 1.2;
    color: var(--color-text-muted);
}


/* ── Riga di comandi di un modulo ──────────────────────────────────────────
 *
 * `.mc-form-actions` esisteva come NOME e non come regola: l'unica dichiarazione
 * era dentro una media query per il telefono. Su schermo grande la riga non
 * aveva ne' disposizione ne' allineamento, quindi i pulsanti cadevano nel flusso
 * normale — cioe' a SINISTRA, e nell'ordine in cui erano scritti. Su un modulo
 * con «Aggiungi iscritto» prima e «Annulla» dopo si leggeva l'azione che
 * conferma a sinistra di quella che rinuncia: l'opposto della regola di casa
 * («il pulsante che conferma e' l'ultimo a destra, in ogni modulo»).
 *
 * `order` e non un rimescolamento del markup: in un modulo il PRIMO submit e'
 * quello che risponde a Invio, e spostarlo in fondo cambierebbe cosa succede
 * premendo Invio in un campo. Cosi' il documento resta com'e' e a muoversi e'
 * solo il disegno.
 */
.mc-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}
.mc-form-actions .mc-btn-primary,
.mc-form-actions [type="submit"] { order: 1; }
/* Quello che deve restare a sinistra di tutto — un «Elimina», un aiuto — si
   marca cosi' e si prende lo spazio in mezzo. */
.mc-form-actions .mc-form-actions-start { margin-right: auto; order: -1; }

/* La stessa regola vale nel piede di una finestra: `.mc-modal-footer` allineava
   gia' a destra, ma non diceva niente sull'ORDINE — una finestra con il submit
   scritto per primo mostrava «Conferma» a sinistra di «Annulla». */
.mc-modal-footer .mc-btn-primary,
.mc-modal-footer [type="submit"] { order: 1; }
.mc-modal-footer .mc-form-actions-start { margin-right: auto; order: -1; }

/* ── La colonna dei comandi, in fondo alla riga ───────────────────────────
   Allineata a destra, sempre.

   IL DIFETTO PER CUI ESISTE
   La cella non aveva nessun allineamento e prendeva quello della tabella, cioe'
   a sinistra. I comandi pero' non sono tutti larghi uguale — «Modifica» e
   «Apri» differiscono di una parola — e la freccia sta in fondo al gruppo:
   partendo tutti dallo stesso bordo sinistro, le frecce finivano ognuna a una
   quota diversa. Una colonna di frecce a zigzag, in una tabella dove tutto il
   resto e' incolonnato.

   Ancorando il bordo DESTRO, la freccia — che e' l'ultima cosa del gruppo —
   cade sempre allo stesso punto, qualunque sia la parola scritta sul comando.

   `.mc-dropdown` e' `inline-flex`, quindi l'allineamento del testo lo sposta
   davvero; se un giorno diventasse `block` questa riga smetterebbe di fare
   effetto senza dirlo, e servirebbe `margin-left: auto`.

   Sul telefono non si applica: li' la cella diventa una riga `flex` di comandi
   in fondo alla scheda, e in un contenitore flex `text-align` non allinea
   niente. */
/* ── E tutti i comandi larghi uguale ──────────────────────────────────────
   Allineare a destra metteva in colonna le frecce, ma non i BORDI SINISTRI:
   «Apri» e' piu' corto di «Modifica», quindi ogni gruppo cominciava a una
   quota diversa e la colonna restava irregolare — solo dall'altra parte.

   COME SI PAREGGIANO SENZA SCRIVERE UNA LARGHEZZA
   Una larghezza fissa qui sarebbe tarata sull'italiano, e nelle altre
   diciassette lingue sarebbe sbagliata: in tedesco «Bearbeiten» sfonderebbe
   qualunque numero comodo per «Modifica», e il disallineamento tornerebbe
   dove nessuno lo guarda.

   Invece lo decide la TABELLA. `width: 1%` su una cella di una tabella larga
   quanto il contenitore e' il modo di dire «stringiti al tuo contenuto»: la
   colonna prende la larghezza del gruppo piu' largo, e — poiche' le celle di
   una colonna sono tutte larghe uguale — ogni gruppo che la riempie diventa
   largo quanto il maggiore. La parola piu' lunga detta la misura, qualunque
   sia la lingua e senza che nessuno debba tornare qui.

   `nowrap` serve perche' la cella si misuri sulla riga intera invece di
   spezzarla per stare stretta; `flex: 1` sulla meta' col testo fa si' che a
   crescere sia quella, mentre la freccia resta della sua misura. */
td.mc-mobile-actions { text-align: right; width: 1%; white-space: nowrap; }
td.mc-mobile-actions > .mc-dropdown { display: flex; }
td.mc-mobile-actions .mc-btn-group { width: 100%; }
td.mc-mobile-actions .mc-btn-group .mc-btn-group-main { flex: 1; }

/* Sul telefono no: li' la riga di comandi non e' piu' una colonna di tabella
   ma una fascia in fondo alla scheda, e un gruppo al 100% la occuperebbe
   tutta. */
@media (max-width: 767px) {
    .mc-table-mobile-cards td.mc-mobile-actions { width: auto; }
    .mc-table-mobile-cards td.mc-mobile-actions .mc-btn-group { width: auto; }
}

/* ── I GRUPPI DI CAMPI DENTRO UN MODULO ──────────────────────────────────
 *
 * Le classi sono quelle della pagina Campi — `mc-field-group`, `-head`,
 * `-toggle`, `-count` — perche' e' lo stesso oggetto: un gruppo di campi che si
 * apre e si chiude. Qui cambia solo il contorno: li' l'intestazione sta sopra
 * una tabella che occupa tutta la scheda, qui sta dentro un modulo che ha gia'
 * il suo margine, e la fascia in tinta a tutta larghezza taglierebbe il modulo
 * in due.
 *
 * `mc-field-group-form` e' quindi una variante, non una copia: quello che
 * ridichiara sono i bordi e i rientri, mai il carattere ne' i colori — o le due
 * schermate ricomincerebbero a divergere, che e' il motivo per cui si e'
 * smesso di avere due implementazioni.
 *
 * Nota: `[hidden]` sul corpo basta perche' qui nessuna regola gli da' un
 * `display`. Se un giorno gliene si desse uno, servirebbe la sua
 * `.mc-field-group-body[hidden] { display: none }` — `display` batte
 * `[hidden]`, e il gruppo si «chiuderebbe» restando visibile. */
.mc-field-group-form { margin-top: var(--space-5); }

.mc-field-group-form .mc-field-group-head {
    /* Senza fascia e senza rientro laterale: dentro il modulo il gruppo e' una
       riga di separazione, non una barra. */
    padding: 0 0 var(--space-2) 0;
    background: none;
    border-top: 0;
    border-bottom: var(--space-px) solid var(--color-border);
    margin-bottom: var(--space-4);
}

/* Il primo gruppo segue l'email: gli serve piu' aria sopra, non meno. */
.mc-field-group-form:first-of-type { margin-top: var(--space-6); }

.mc-field-group-form + .mc-field-group-form { margin-top: var(--space-6); }

/* La pastiglia col numero va spinta a destra: nella pagina Campi ci pensa
   `justify-content: space-between` della testata, che qui ha un figlio solo. */
.mc-field-group-form .mc-field-group-toggle { width: 100%; }
.mc-field-group-form .mc-field-group-count { margin-left: auto; }

/* L'ultimo campo di un gruppo porta il proprio margine: sommato a quello del
   gruppo dopo, fra due sezioni si aprirebbe un buco doppio. */
.mc-field-group-body > .mc-form-group:last-child { margin-bottom: 0 !important; }