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

@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;
}

.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 — --color-teal-ink is set only when an operator brand colour is
   configured (near-black on a light brand); otherwise white, as before. */
.mc-btn-primary {
    background: var(--color-teal);
    color: var(--color-teal-ink, var(--color-white));
    border-color: var(--color-teal);
    transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}
.mc-btn-primary:hover {
    background: var(--color-teal-hover);
    border-color: var(--color-teal-hover);
    color: var(--color-teal-ink, var(--color-white));
    box-shadow: 0 2px 8px rgba(0, 124, 137, 0.20);
}

/* 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 */
.mc-btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: transparent;
}
.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); }
.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; }

/* ==========================================================================
   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;
}

/* 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="fb_messenger"] { --chip-tone: var(--msg-ch-fbm); --chip-ink: var(--msg-ch-fbm-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="fb_messenger"] { --chip-tone: var(--msg-ch-fbm); --chip-ink: var(--msg-ch-fbm-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;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}
@media (max-width: 1024px) {
    .mc-channel-status-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@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="fb_messenger"] { --pin-tone: var(--msg-ch-fbm); }
.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;
}
@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;
}

.mc-identity-select-error {
    margin-top: var(--space-2);
    padding: var(--space-2-5) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-warning);
    background: var(--color-warning-bg, rgba(234, 179, 8, 0.08));
    border: var(--space-px) solid var(--color-warning-border, rgba(234, 179, 8, 0.2));
    border-radius: var(--radius-card);
    line-height: 1.5;
}
.mc-identity-select-error a {
    color: var(--color-teal);
    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; }
/* Form row grids inherit no implicit gap — add explicit breathing room when
 * placed right after the section description. */
.mc-settings-section-desc + .mc-form-row-2,
.mc-settings-section-desc + .mc-form-row-3 { margin-top: var(--space-4); }

/* 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; }
}

/* ───────────────────────────────────────────────────────────
   Subscriber profile header — avatar (left, hover-reveal upload/
   remove) + identity/meta/tags (right). Used by the subscriber
   edit page's "Profile" section.
   ─────────────────────────────────────────────────────────── */
.rui-sub-profile {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
}
@media (max-width: 680px) {
    .rui-sub-profile { flex-direction: column; }
}

.rui-sub-profile__avatar { position: relative; flex-shrink: 0; }
.rui-sub-profile__avatar.is-busy { opacity: .6; pointer-events: none; }
.rui-sub-profile__body { flex: 1; min-width: 0; }

/* Squarer profile image (less round than the default circular avatar). */
.rui-sub-profile__avatar .mc-avatar { border-radius: var(--radius-input); }

/* Upload/Delete affordance — hidden until the avatar is hovered. The overlay
   holds two explicit buttons; the Delete button is only present when a real
   image exists (JS toggles its display). */
.rui-sub-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-input);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}
.rui-sub-profile__avatar:hover .rui-sub-avatar-overlay,
.rui-sub-profile__avatar:focus-within .rui-sub-avatar-overlay,
.rui-sub-profile__avatar.is-dragover .rui-sub-avatar-overlay { opacity: 1; }

.rui-sub-avatar-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.rui-sub-avatar-btn:hover { background: #fff; transform: translateY(-1px); }
.rui-sub-avatar-btn.is-danger { color: var(--color-error); }
.rui-sub-avatar-btn .material-symbols-rounded { font-size: 18px; }

.rui-sub-profile__name {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.rui-sub-profile__meta {
    margin-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);   /* row-gap matches the gap above → even lines */
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.rui-sub-profile__meta b {
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

/* Tag chip — soft dark background, light text, compact + slightly rounded. */
.rui-sub-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 24px;
    padding: 0 9px;
    border-radius: var(--radius-input);
    background: #4b5563;
    color: #f3f4f6;
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    line-height: 1;
    white-space: nowrap;
}
.rui-sub-tag .remove-tag-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    opacity: .65;
    transition: opacity var(--transition-fast);
}
.rui-sub-tag .remove-tag-btn:hover { opacity: 1; }

/* 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; }

/* Payment method list (stacked cards inside settings section) */
.mc-payment-method-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mc-payment-method-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-page-bg);
}
.mc-payment-method-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-input);
    border: var(--space-px) solid var(--color-border);
    background: var(--color-surface, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.mc-payment-method-icon .material-symbols-rounded { font-size: 20px; }
.mc-payment-method-body { flex: 1; min-width: 0; }
.mc-payment-method-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}
.mc-payment-method-meta {
    font-size: var(--text-sm);
    color: var(--color-text);
}
.mc-payment-method-meta-muted {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.mc-payment-method-actions { flex-shrink: 0; }

/* 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; }

/* 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);
}

.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);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236E655B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: var(--space-3);
    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; }
.mc-switch-slider {
    width: var(--space-10);
    height: var(--space-5-5, 22px);
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
    position: relative;
    transition: background var(--transition-fast);
}
.mc-switch-slider::after {
    content: '';
    position: absolute;
    top: var(--space-0-5);
    left: var(--space-0-5);
    width: var(--space-4-5, 18px);
    height: var(--space-4-5, 18px);
    background: var(--color-white);
    border-radius: 50%;
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}
.mc-switch-input:checked + .mc-switch-slider { background: var(--color-teal); }
.mc-switch-input:checked + .mc-switch-slider::after { transform: translateX(var(--space-4-5, 18px)); }

.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) */
.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);
    height: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-0-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;
    animation: mc-toast-in var(--transition-base) forwards;
    max-width: 340px;
    min-width: 220px;
}
.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);
}
.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;
    /* Keep the wheel inside the modal. Without this, the moment the body hits
       its top or bottom the browser CHAINS the remaining scroll to the page
       behind — so the modal appears to stick while the background slides, which
       is what reads as a stutter. `contain` also kills the rubber-band. */
    overscroll-behavior: contain;
}

/* ── page scroll lock while an overlay is open (see McScrollLock in app.js) ──
   Locking `body` alone is not enough: at <=767px `layouts.css` sets
   `html, body { overflow-x: hidden }`, and once html's overflow is not
   `visible` the viewport takes ITS value — body's `overflow:hidden` then never
   propagates and the page scrolls behind the modal. Lock both elements.

   The padding replaces exactly the width the vanishing scrollbar freed, so the
   page does not jump sideways as the overlay opens. `--mc-scrollbar-w` is
   measured in JS before the lock is applied, and is 0 wherever the scrollbar is
   an overlay one (macOS default, touch) — there the padding is a no-op. */
html.mc-scroll-locked { overflow: hidden; }
body.mc-scroll-locked {
    /* Pinning the body and offsetting it by the scroll position is what keeps
       the page WHERE IT WAS. `overflow:hidden` on html alone makes the document
       non-scrollable, and the browser then resets scrollTop to 0 — measured:
       the page jumped from y=204 to y=0 the moment a modal opened, which is the
       lurch you feel behind the dialog. The offset holds the same pixels on
       screen; McScrollLock restores the real scroll position on unlock. */
    position: fixed;
    top: calc(-1 * var(--mc-scroll-y, 0px));
    left: 0;
    width: 100%;
    overflow: hidden;
    padding-right: var(--mc-scrollbar-w, 0px);
}

/* No fixed-chrome compensation is needed here: the only `position: fixed`
   elements are the LEFT sidebar and full-bleed scrims, none of which are
   anchored to the right edge. The topbar and content header are in normal flow
   inside the padded body, so they move with it. */
.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;
}

/* "Capture as thumbnail" success effect — camera flash + scanner sweep + badge
   pop, overlaid on the preview content and clipped by the wrap's overflow.
   Injected by PreviewModal._playCaptureEffect() and removed after it plays. */
.mc-preview-modal-capture-fx {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}
.mc-preview-modal-capture-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
}
.mc-preview-modal-capture-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: -45%;
    height: 45%;
    opacity: 0;
    background: linear-gradient(to bottom,
        rgba(99, 102, 241, 0) 0%,
        rgba(99, 102, 241, .14) 62%,
        rgba(99, 102, 241, .5) 90%,
        rgba(255, 255, 255, .95) 100%);
    box-shadow: 0 2px 22px 3px rgba(99, 102, 241, .55);
}
.mc-preview-modal-capture-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(17, 24, 39, .82);
    color: #fff;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}
.mc-preview-modal-capture-badge .material-symbols-rounded { font-size: 32px; }
.mc-preview-modal-capture-fx.is-playing .mc-preview-modal-capture-flash {
    animation: mcPreviewCaptureFlash 460ms ease-out forwards;
}
.mc-preview-modal-capture-fx.is-playing .mc-preview-modal-capture-scan {
    animation: mcPreviewCaptureScan 820ms cubic-bezier(.45, .05, .3, 1) forwards;
}
.mc-preview-modal-capture-fx.is-playing .mc-preview-modal-capture-badge {
    animation: mcPreviewCaptureBadge 900ms cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes mcPreviewCaptureFlash {
    0% { opacity: 0; }
    12% { opacity: .9; }
    100% { opacity: 0; }
}
@keyframes mcPreviewCaptureScan {
    0% { top: -45%; opacity: 0; }
    10% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
@keyframes mcPreviewCaptureBadge {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
    25% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
}
/* Respect reduced-motion: keep a brief flash, drop the sweep + badge travel. */
@media (prefers-reduced-motion: reduce) {
    .mc-preview-modal-capture-fx.is-playing .mc-preview-modal-capture-scan { animation: none; opacity: 0; }
    .mc-preview-modal-capture-fx.is-playing .mc-preview-modal-capture-badge {
        animation: mcPreviewCaptureFlash 460ms ease-out forwards;
    }
}
.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;
    /* Content-fit height (not 100%) so the stage's align-items:center vertically
       centres the popup card and short forms show no blank space below. The
       host PreviewModal sets the iframe height from the popup's frameSize
       message; capped at the stage height (tall forms scroll inside the iframe). */
    height: auto;
    max-height: 100%;
    /* 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);
    /* Follow the iframe height (don't stretch to fill the frame) so the card
       hugs its content. The iframe carries a concrete height (70vh default,
       overridden by PreviewModal from the popup's frameSize). */
    flex: 0 1 auto;
    min-height: 0;
}
.mc-preview-modal-frame[data-chassis="popup"] .mc-preview-modal-iframe {
    height: 70vh;
}

/* Post-submit thank-you / redirect overlay — covers the popup card with a
   centered message, mirroring the real embed's AFormPopup.alert. */
.mc-preview-modal-popup-message {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 48px 40px;
    text-align: center;
    background: #fff;
    border-radius: inherit;
}
.mc-preview-modal-popup-message-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ecfdf3;
    color: #12b76a;
    font-size: 34px;
    line-height: 64px;
    font-weight: 700;
}
.mc-preview-modal-popup-message-text {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    color: #111827;
    max-width: 560px;
    overflow-wrap: anywhere;
}
.mc-preview-modal-popup-message-text.is-url {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted, #6b7280);
    word-break: break-all;
}
[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);
    /* An OPEN dropdown is an interactive layer and must clear the sticky topbar
       (z 300). At the base z-dropdown (100) a content dropdown — e.g. the Plugins
       "Install plugin" menu — opens UNDER the topbar's stacking context, so where
       its items overlap the topbar (the theme / language buttons sit right above
       it) the topbar steals the click and the wrong menu opens. Topbar-internal
       dropdowns are unaffected: they're bounded by the topbar's own 300 context,
       so this raises them only within it, not past it. */
    z-index: calc(var(--z-topbar) + 10);
}

/* 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);
    /* Fixed dropdowns escape overflow and, inside a modal, are relocated to <body>
       (see Dropdown._openFixed) — so this variant must also clear the modal (z 500),
       not just the topbar. */
    z-index: calc(var(--z-modal) + 10);
}

.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;
    /* Labels are short commands, never prose — they must read on one line.
       This also sets the menu's width: an absolute menu is shrink-to-fit against
       the tiny inline-flex .mc-dropdown, so without nowrap the browser falls back
       to min-content (longest word) and a label like "Remove from this page"
       wraps to two rows inside the 180px min-width. */
    white-space: nowrap;
}
.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); }
/* Loading state — item fires an AJAX action (enable/disable/refresh/delete);
   dim the leading icon and append a spinner so the row reads as "working". */
.mc-dropdown-item.is-loading {
    pointer-events: none; cursor: progress; position: relative;
}
.mc-dropdown-item.is-loading > svg { opacity: 0; }
.mc-dropdown-item.is-loading::after {
    content: ""; position: absolute; right: var(--space-4); top: 50%;
    width: 14px; height: 14px; margin-top: -7px;
    border: 1.5px solid var(--color-text); border-top-color: transparent;
    border-radius: 50%; animation: mc-spin 600ms linear infinite;
}
.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) */
.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 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    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);
}
.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;
}

/* 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);
}

/* A second `.mc-tabs` definition (further down, for the `.mc-tab` system) wins the
   cascade and shrinks the gap to space-1 — which crams the `.mc-tab-btn` items since
   they have no horizontal padding (they rely on the container gap to separate). Restore
   the intended spacing for any `.mc-tabs` that actually holds `.mc-tab-btn` children.
   Higher specificity (:has) so it wins regardless of source order. */
.mc-tabs:has(> .mc-tab-btn) {
    gap: var(--space-6);
}

.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); }
/* C27 — danger/red tone for destructive or error-severity events
   (released numbers, fatal sends, invalid-signature webhooks). Matches
   the hollow-ring grammar of the sibling tones: tone = border colour,
   never a fill, so all dots stay visually consistent. Token, not hex —
   light/dark safe. Shipped 2026-06-01 (was COMPONENT-PROPOSALS C27). */
.mc-timeline-dot--danger { border-color: var(--color-error); }

.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);
    max-width: 480px;
    line-height: var(--leading-normal);
}

.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 */
.mc-banner-meta {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mc-banner-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.mc-banner-meta-item .material-symbols-rounded {
    font-size: 16px;
    opacity: 0.7;
}
.mc-banner-meta-value {
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}

/* ---------- 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: 540px;
    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; }

/* 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 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.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 (Edit + dropdown arrow, Mailchimp pixel-perfect) */
.mc-btn-group {
    display: inline-flex;
    align-items: stretch;
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    overflow: hidden;
}

.mc-btn-group .mc-btn-group-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    color: var(--color-text);
    background: var(--color-card-bg);
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

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

.mc-btn-group .mc-btn-group-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2-5);
    background: var(--color-card-bg);
    border: none;
    border-left: var(--space-px) solid var(--color-border);
    cursor: pointer;
    color: var(--color-text);
    transition: background var(--transition-fast);
}

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

.mc-btn-group .mc-btn-group-arrow svg { width: 10px; height: 10px; }

/* =========================================================================
   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);
}

/* ── Template thumbnail ─────────────────────────────────────────────────────
   Art direction lives HERE, at display time — the stored PNG stays an honest,
   effect-free screenshot (reusable anywhere, and re-capturing never bakes in a
   look). Three jobs, in priority order:
     1. never cut content  → `contain`, so no aspect ratio loses its edges the
        way `object-fit: cover` used to shave the sides off a landscape capture;
     2. stay scannable     → the preview lies FLAT and fills the card, because a
        gallery is for comparing twenty templates at a glance. A permanent 3D
        tilt was tried and rejected: at 276px it reads as a rendering artifact
        and makes comparison harder;
     3. feel designed      → a calm, light stage carries whatever the image does
        not fill, and the delight is in MOTION on hover, not in a permanent effect
        painted over the content. (An earlier version filled that area with a
        blurred copy of the image itself; blurring also drags in the design's DARK
        regions — a dark footer band bled a grey halo on hover and a dirty band
        under the sheet — so the stage stays neutral.) */
.mc-template-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 10;
    overflow: hidden;
    background: linear-gradient(168deg, #FAFAFB 0%, #F1F2F5 100%);
}

/* Blurred self-backdrop — the trick that makes EVERY thumbnail ratio look
   deliberate. Thumbnails arrive from three sources: the gallery generator
   (496×558 = 0.889), the in-builder "Capture as thumbnail", and legacy files
   captured before that capture was ratio-aware (this install has a 2844×1080
   one). With `object-fit: cover` anything wider than the 9/10 frame lost its
   sides — a landscape shot dropped ~60% of its width, cutting the logo off the
   left and slicing the CTA in half. So the image is now CONTAINed (content can
   never be removed) and the leftover area is filled with a blurred, zoomed copy
   of the same image, which reads as intentional depth instead of dead grey.

   Costs the already-good case nothing: a 0.889 thumb in the 0.9 frame contains
   to 98.6% of the width, so the ~2px seam per side is filled by a blur of the
   image's own edge — indistinguishable from the old edge-to-edge crop, minus the
   4px it used to shave off the bottom.
   The URL reaches CSS via `--mc-thumb`, mirrored from the <img> by app.js
   (one place, so every present + future thumb surface and every AJAX re-render
   is covered). No var → no backdrop → the frame's flat background, i.e. exactly
   the previous look. */
.mc-template-thumb img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* DEFAULT = taller-than-frame (every correctly-sized 0.889 thumbnail, and the
       legacy tall ones): fill the card and let the crop fall on the BOTTOM, i.e.
       the footer / the padded dead space — never on the sides. */
    object-fit: cover;
    object-position: top center;
    transform-origin: 50% 30%;
    transition: transform 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: transform;
}

/* WIDER than the frame (only legacy files — the in-builder capture now always
   lands 0.889). Fill by HEIGHT and crop the sides SYMMETRICALLY: a capture keeps
   the email column centred with page margin either side, so the crop eats margin
   first. On an extreme legacy ratio (2.6+) real content can still be clipped —
   accepted deliberately, because the alternative (contain) leaves grey bands on
   every card and a too-short template cannot fill a portrait frame either way.
   The cure for such a file is one re-capture. `center` matters: the original
   defect was `cover` with a TOP-left bias on landscape art, which clipped from
   one edge only and took the logo with it. */
.mc-template-thumb.is-wide img {
    object-fit: cover;
    object-position: center center;
}

/* The delight, on intent only: the sheet lifts toward the reader and a single
   glass highlight sweeps across it. Nothing is painted over the preview at rest. */
.mc-template-card:hover .mc-template-thumb img,
.mc-template-thumb:hover img {
    transform: scale(1.045);
}
.mc-template-thumb::after {
    content: '';
    position: absolute;
    z-index: 3;
    inset: -40% -120%;
    pointer-events: none;
    background: linear-gradient(104deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, 0.45) 48%,
        rgba(255, 255, 255, 0.12) 54%,
        rgba(255, 255, 255, 0) 62%);
    transform: translateX(-38%);
    opacity: 0;
    transition: transform 780ms cubic-bezier(0.22, 0.68, 0.24, 1), opacity 220ms ease;
}
.mc-template-card:hover .mc-template-thumb::after,
.mc-template-thumb:hover::after {
    transform: translateX(38%);
    opacity: 1;
}

[data-theme="dark"] .mc-template-thumb {
    background: linear-gradient(168deg, #23252B 0%, #1A1C21 100%);
}
[data-theme="dark"] .mc-template-thumb::after {
    background: linear-gradient(104deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, 0.16) 48%,
        rgba(255, 255, 255, 0.05) 54%,
        rgba(255, 255, 255, 0) 62%);
}

@media (prefers-reduced-motion: reduce) {
    .mc-template-thumb img,
    .mc-template-thumb::after { transition: none; }
    .mc-template-card:hover .mc-template-thumb::after,
    .mc-template-thumb:hover::after { opacity: 0; }
}

.mc-template-thumb-placeholder { position: relative; z-index: 1; }

/* A placeholder SVG that reached the <img> path (see app.js): centre it small on
   the clean stage instead of stretching or letterboxing it. */
.mc-template-thumb.is-placeholder-img img {
    object-fit: contain;
    object-position: center;
    width: 42%;
    height: 42%;
    top: 29%;
    left: 29%;
    position: absolute;
    opacity: 0.45;
}


.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;
    /* Layer order inside .mc-template-thumb — keep these explicit, an implicit
       `auto` here is what let the preview image paint over the buttons:
         1 preview image · 3 glass sweep · 4 THIS (the hover quick actions) */
    z-index: 4;
    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;
    /* Fill the sized container (e.g. aspect-ratio thumb). Without this the <a>
       is auto-height, so the inner `img { height:100% }` has no definite parent
       height to resolve against — it collapses to the image's intrinsic height
       and the container background shows through as a gap at the bottom. */
    height: 100%;
    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;
}
.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);
    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,
.mc-rich-tab:has(input:checked) {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
    box-shadow: 0 1px 4px var(--color-teal-ring);
}
.mc-rich-tab.active { cursor: default; }
/* Radio/checkbox-backed picker: a <label class="mc-rich-tab"> wrapping a hidden
   input drives selection via :has() — so the same component works as a form
   control (submits a value) AND as the JS `.active` tab. */
.mc-rich-tab > input[type="radio"],
.mc-rich-tab > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.mc-rich-tab:focus-within {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-ring);
}

/* Scoped under `.mc-rich-tab` (specificity 0,0,2,0) on purpose: the icon is a
   flex item, so its centering depends on staying a flex *container*
   (display: inline-flex → blockified to flex). A bare single-class
   `.material-symbols-rounded { display: inline-block }` base rule — e.g. the
   vendored filebrowser theme.css that loads after components.css on builder
   pages — would otherwise win on source order (equal 0,0,1,0 specificity),
   flip the icon to inline-block (blockified to block), and collapse the glyph
   into the top-left corner. The parent scope keeps the component immune to
   that leak everywhere it's used. `overflow: hidden` clips the pre-font
   ligature text so it can't spill outside the circle during a cold font load. */
.mc-rich-tab .mc-rich-tab-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    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,
.mc-rich-tab:has(input:checked) .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,
.mc-rich-tab:has(input:checked) .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);
}
.mc-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    min-width: 40px;
    height: 22px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    position: relative;
    cursor: pointer;
    transition: background .2s;
    margin-top: 1px;
}
.mc-toggle::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: left .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
/* The bare `.mc-toggle` rule above targets an <input class="mc-toggle"> styled AS
   the toggle. The label-wrapper form — `<label class="mc-toggle"><input>
   <span class="mc-toggle-slider">` — reuses the class but draws its knob via
   `.mc-toggle-slider::after`, so this bare `::after` becomes a STRAY white circle
   that (the label being position:static via `all:unset`) escapes to the nearest
   positioned ancestor — it surfaced on the AI Features section headers. Suppress
   it for the label-wrapper form (the slider keeps its own knob). */
label.mc-toggle::after {
    content: none;
}
.mc-toggle:checked {
    background: var(--color-teal);
}
.mc-toggle:checked::after {
    left: 21px;
}
.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 .mc-toggle-slider {
    position: relative;
    width: 40px;
    min-width: 40px;
    height: 22px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    transition: background .2s;
    flex-shrink: 0;
}
label.mc-toggle .mc-toggle-slider::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: left .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
label.mc-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
label.mc-toggle input[type="checkbox"]:checked + .mc-toggle-slider {
    background: var(--color-teal);
}
label.mc-toggle input[type="checkbox"]:checked + .mc-toggle-slider::after {
    left: 21px;
}
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;
}

.mc-radio-card-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.35;
}

.mc-radio-card-desc {
    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%;
    height: var(--space-10);
    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);
}

.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 */
.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;
    grid-template-columns: 280px 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 (left border accent, icon + title + desc) --- */
.mc-settings-nav {
    border-right: var(--space-px) solid var(--color-border);
    padding: var(--space-3) 0;
    background: var(--color-card-bg);
}

.mc-settings-nav-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-decoration: none;
    color: inherit;
    border-left: 3px solid transparent;
    position: relative;
}

.mc-settings-nav-item:hover {
    background: var(--color-hover-bg);
    text-decoration: none;
    color: inherit;
}

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

.mc-settings-nav-item-icon {
    width: 36px;
    height: 36px;
    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-settings-nav-item-icon .material-symbols-rounded { font-size: 20px; }

.mc-settings-nav-item.active .mc-settings-nav-item-icon {
    background: var(--color-teal);
    color: var(--color-white);
}

.mc-settings-nav-item-body { min-width: 0; flex: 1; }

.mc-settings-nav-item-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.35;
}

.mc-settings-nav-item-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: 2px;
}

.mc-settings-nav-item-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    background: var(--color-teal);
    color: var(--color-white);
    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;
}

.mc-settings-nav-item-badge.mc-badge-warning {
    background: var(--chart-3);
    color: var(--color-text);
}

.mc-settings-nav-item-badge.mc-badge-danger {
    background: var(--color-error);
}

.mc-settings-nav-divider {
    height: var(--space-px);
    background: var(--color-border);
    margin: var(--space-2) 0;
}

.mc-settings-nav-group-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-4) var(--space-5) var(--space-1);
}

/* --- 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 {
    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);
}

.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 {
    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
   ══════════════════════════════════════════════════════════════════ */

/* ── 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);
}
/* Discount code row — sits between the line items and the total, inside the card. */
.mc-order-summary-coupon {
    margin-bottom: var(--space-3);
}
.mc-order-summary-coupon-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1-5);
}
.mc-order-summary-coupon-link {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-teal);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.mc-order-summary-coupon-link:hover {
    color: var(--color-teal-hover);
}
.mc-order-summary-coupon-editor {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.mc-order-summary-coupon-editor[hidden],
.mc-order-summary-coupon-applied[hidden],
.mc-order-summary-coupon-link[hidden] {
    display: none !important;
}
.mc-order-summary-coupon-editor .mc-form-input {
    min-width: 0;
    flex: 1 1 auto;
}
.mc-order-summary-coupon-editor .mc-btn {
    flex: 0 0 auto;
}
.mc-order-summary-discount-line {
    color: var(--color-success);
}
.mc-order-summary-discount-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}
.mc-order-summary-discount-title {
    color: var(--color-text-muted);
    flex: 0 0 auto;
}
.mc-order-summary-discount-code {
    color: var(--color-success);
    font-weight: var(--weight-medium);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-order-summary-discount-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--color-success);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}
.mc-order-summary-discount-remove:hover {
    background: var(--color-success-bg);
}
.mc-order-summary-discount-amount {
    color: var(--color-success);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

/* ── 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);
}

.mc-import-step.is-active .mc-import-step-icon {
    background: var(--color-teal);
    color: var(--color-white);
}

.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;
}

/* ==========================================================================
   Image Uploader — main + gallery preview thumbs (funnel products, etc.)
   ========================================================================== */

.mc-dropzone-compact {
    padding: var(--space-3) var(--space-3);
}

.mc-dropzone-compact .mc-dropzone-icon {
    margin-bottom: var(--space-1);
}

.mc-dropzone-compact .mc-dropzone-text {
    font-size: var(--text-sm);
    margin: 0;
}

.mc-dropzone-compact .mc-dropzone-hint {
    font-size: var(--text-xs);
    margin-top: 2px;
}

/* Tile-style dropzone — square, sits inline inside a preview grid */
.mc-dropzone-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-card);
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    padding: var(--space-2);
    text-align: center;
    margin: 0;
}

.mc-dropzone-tile:hover,
.mc-dropzone-tile.dz-drag-hover {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
    color: var(--color-teal);
}

.mc-dropzone-tile-icon {
    font-size: 18px;
    font-weight: var(--weight-semibold);
    line-height: 1;
    margin-bottom: 2px;
}

.mc-dropzone-tile-text {
    font-size: 10px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.2px;
}

.mc-image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.mc-image-preview-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-hover-bg);
}

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

.mc-image-preview-card.is-primary {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 2px var(--color-teal-light);
}

.mc-image-preview-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 1px 5px;
    background: var(--color-teal);
    color: #fff;
    font-size: 9px;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-input);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.mc-image-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: background 0.15s;
}

.mc-image-preview-remove:hover {
    background: rgba(0, 0, 0, 0.85);
}

.mc-image-preview-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 6px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: #fff;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Funnel Product form — 2-column layout (text left, images right)
   ========================================================================== */

.fp-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-8);
    align-items: start;
}

.fp-form-main,
.fp-form-side {
    min-width: 0;
}

@media (max-width: 900px) {
    .fp-form-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* 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);
}

.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); }

/* 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);
    background: var(--color-teal);
    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(--color-teal);
    color: var(--color-white);
}

.mc-welcome-btn--next:hover {
    background: var(--color-teal-hover);
}

/* 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); }

/* ==========================================================================
   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);
    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); }
    /* Card layout: each <tr> is its own bordered card, so the table's own
       outline (.mc-table border + radius) would double up at the corners. */
    .mc-table-mobile-cards { width: 100%; max-width: 100%; table-layout: fixed; border: none; border-radius: 0; }
    .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 --- */

    /* --- Form layout: ensure submit buttons near form on mobile --- */
    .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: center;
}

.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: center;
}

.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.
   ─────────────────────────────────────────────────────────────── */
/* PREMIUM CENTERED STEPPER (redesigned 2026-06-01). Numbered circles joined by
   a progress line, label beneath each, the whole row centered. Styles BOTH the
   hyphen (`-number`/`-label`) and BEM (`__num`/`__label`) markup variants so
   every consumer (messenger wizard, ads wizard, /rui/ui showcase) renders the
   same top-notch component. Token-only → theme-safe. */
.mc-wizard-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;          /* centered */
    gap: 0;
    flex-wrap: nowrap;
    padding: var(--space-5) 0;
    max-width: 760px;
    margin-inline: auto;
    list-style: none;
}
.mc-wizard-steps .mc-wizard-step {
    position: relative;
    display: flex;
    flex-direction: column;           /* circle on top, label below */
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    text-align: center;
}
/* Progress line: drawn behind each step, from the previous circle to this one. */
.mc-wizard-steps .mc-wizard-step::before {
    content: "";
    position: absolute;
    top: 15px;                        /* vertical centre of the 30px circle */
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}
.mc-wizard-steps .mc-wizard-step:first-child::before { display: none; }
/* Line leading INTO a done/active step is teal (progress filled). */
.mc-wizard-steps .mc-wizard-step.is-done::before,
.mc-wizard-steps .mc-wizard-step.is-active::before {
    background: var(--color-teal);
}
/* The numbered circle (both naming variants). */
.mc-wizard-step-number,
.mc-wizard-step .mc-wizard-step__num {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-card-bg);
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    flex-shrink: 0;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}
/* Active = filled teal + focus ring. */
.mc-wizard-steps .mc-wizard-step.is-active .mc-wizard-step-number,
.mc-wizard-steps .mc-wizard-step.is-active .mc-wizard-step__num {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: #fff;
    box-shadow: 0 0 0 4px var(--color-teal-ring);
}
/* Done = filled teal (the blade renders a check glyph inside). */
.mc-wizard-steps .mc-wizard-step.is-done .mc-wizard-step-number,
.mc-wizard-steps .mc-wizard-step.is-done .mc-wizard-step__num {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: #fff;
}
.mc-wizard-step-number svg,
.mc-wizard-step__num svg,
.mc-wizard-step__num .mc-icon { width: 16px; height: 16px; }
/* Label beneath the circle (both variants). */
.mc-wizard-step-label,
.mc-wizard-step .mc-wizard-step__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    line-height: 1.3;
    max-width: 12ch;
}
.mc-wizard-steps .mc-wizard-step.is-active .mc-wizard-step-label,
.mc-wizard-steps .mc-wizard-step.is-active .mc-wizard-step__label {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}
.mc-wizard-steps .mc-wizard-step.is-done .mc-wizard-step-label,
.mc-wizard-steps .mc-wizard-step.is-done .mc-wizard-step__label {
    color: var(--color-text);
}
/* Legacy explicit connector element (if a consumer renders one) — hidden; the
   ::before line replaces it. */
.mc-wizard-step-connector { display: none; }
/* Mobile: tighter, keep labels (shrunk) — the vertical stack still fits. */
@media (max-width: 767px) {
    .mc-wizard-steps { padding: var(--space-4) 0; }
    .mc-wizard-step-number,
    .mc-wizard-step .mc-wizard-step__num { width: 26px; height: 26px; font-size: var(--text-xs); }
    .mc-wizard-steps .mc-wizard-step::before { top: 13px; }
    .mc-wizard-step-label,
    .mc-wizard-step .mc-wizard-step__label { font-size: var(--text-xs); }
}

/* ── 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);
}

.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 an always-visible sub-options
   footer section + illustrated learn-more guide popup'. See /rui/ui showcase
   entries #feature-card and #feature-guide for canonical markup.
   ═══════════════════════════════════════════════════════════════ */
/* ── F8.4 Features tab — flag cards + footer sub-options ─────────── */
.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);
}

/* ── AI Features — grouped IA (Chat assistant · AI tasks · Admin & safety) ── */
.mc-feature-group {
    margin-bottom: var(--space-7);
}
.mc-feature-group + .mc-feature-group {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}
/* Rich group header — title + desc + informative pills on the left, a line-art
   illustration on the right. The art is decorative (aria-hidden) and drops on
   narrow screens so the text never gets squeezed. */
.mc-feature-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
}
.mc-feature-group-head__main {
    flex: 1 1 auto;
    min-width: 0; /* let the desc wrap instead of overflowing the flex row */
}
.mc-feature-group-title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0 0 var(--space-1);
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.mc-feature-group-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 70ch;
    line-height: 1.5;
}
.mc-feature-group-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
/* pills reuse mc-badge; tighten the icon↔label gap and size the glyph down */
.mc-feature-group-pills .mc-badge {
    gap: var(--space-1-5);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}
.mc-feature-group-pills .mc-badge svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.mc-feature-group-head__art {
    flex: 0 0 auto;
    width: 96px;
    height: 76px;
    margin-top: calc(-1 * var(--space-1)); /* optically center against the title */
}
.mc-feature-group-head__art svg {
    width: 100%;
    height: 100%;
    display: block;
}
@media (max-width: 640px) {
    .mc-feature-group-head__art {
        display: none;
    }
}
.mc-feature-group-master {
    margin-bottom: var(--space-4);
}
/* Everything that lives UNDER the master toggle. The --nested variant (chat
   group) indents the whole subtree one level via padding so the master reads as
   the parent of the lead + capabilities + action tools. Groups without a master
   use the plain class as a neutral, un-indented container. */
.mc-feature-group-body--nested {
    padding-left: var(--space-4);
    border-left: 1px solid var(--color-border);
}
/* Lead capability (agent_chat = "AI actions") — the action-tool bundles nest
   directly beneath it, so keep the gap tight to read as one unit. */
.mc-feature-group-lead {
    margin-bottom: var(--space-2);
}

/* Sub-section within a group (capabilities / action tools / rewrites / …) */
.mc-feature-section {
    margin-top: var(--space-4);
}
/* Nested section — extra top gap so it reads as belonging to the lead card
   above it (no longer separately indented; the body wrapper carries the indent). */
.mc-feature-section--nested {
    margin-top: var(--space-5);
}
.mc-feature-section-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.mc-feature-section-title {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0;
}
.mc-feature-section-gated {
    font-size: var(--text-xs);
    color: var(--color-text-subtle, var(--color-text-muted));
    font-style: italic;
}

/* Progressive disclosure — any subtree (chat body or a nested section) dims +
   locks when its parent toggle is OFF (JS adds .is-parent-off based on
   data-mc-feature-parent). Nested .is-parent-off opacity compounds, which is the
   intended "deeper + more off" read. */
.is-parent-off {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.4);
}

/* Compact toggle rows — for the many action-tool bundles + per-task toggles. */
.mc-feature-rows {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-card-bg);
}
.mc-feature-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
}
.mc-feature-row + .mc-feature-row {
    border-top: 1px solid var(--color-border);
}
.mc-feature-row.is-disabled {
    background: var(--color-bg-subtle);
}
.mc-feature-row-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.mc-feature-row-titleline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.mc-feature-row-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
.mc-feature-row.is-disabled .mc-feature-row-title {
    color: var(--color-text-muted);
}
.mc-feature-row-default-badge {
    font-size: var(--text-xs);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
}
.mc-feature-row-default-badge.is-on {
    color: var(--color-success-text, var(--color-text));
}
.mc-feature-row-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: 2px 0 0;
    line-height: 1.45;
}
.mc-feature-row-warning {
    font-size: var(--text-xs);
    color: var(--color-warning-text, var(--color-text));
    margin: var(--space-1) 0 0;
}
.mc-feature-row-toggle {
    flex-shrink: 0;
}

.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);
}

/* U1 — per-card warning (e.g. AI actions flag when the default engine has no
   native tool-use). Honest amber notice; the toggle stays enabled. */
.mc-feature-card-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-amber-light, #f5d9a8);
    background: var(--color-amber-bg, #fdf6ec);
    color: var(--color-text, #3b3b3b);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.mc-feature-card-warning-icon {
    flex: 0 0 auto;
    line-height: 1.45;
}

.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);
}

/* Card footer — holds the action-tool bundles + advanced settings INSIDE a
   capability card (AI actions), below its head. Two labeled sections stacked,
   sharing one frame. */
.mc-feature-card-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
/* Hide the WHOLE footer (action tools + advanced settings) whenever AI actions
   is not effectively active — "AI actions disabled → ẩn luôn 2 cái bên trong":
     • agent_chat toggle off  → card gets .is-disabled (server-rendered + painted
       live by ai-settings-features.js on toggle change)
     • master (AI chat assistant) off → the body gets .is-parent-off, which locks
       the whole subtree; the AI-actions card is then inactive too, so its footer
       collapses rather than lingering dimmed. */
.mc-feature-card.is-disabled .mc-feature-card-footer,
.is-parent-off .mc-feature-card-footer {
    display: none;
}
.mc-feature-card-footer-head {
    margin-bottom: var(--space-3);
}
.mc-feature-card-footer-title {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-1);
}
.mc-feature-card-footer-hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-subtle, var(--color-text-muted));
    line-height: 1.5;
    font-style: italic;
}
/* Advanced-settings footer section — was an accordion, now an always-visible
   labeled section styled like Action tools. The .mc-feature-card-suboptions
   class is retained as the JS / `/rui/ui` showcase hook + frame alias. */
.mc-feature-card-suboptions {
    margin: 0;
}

.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-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 {
        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);
}
/* Secondary currency totals when paid revenue spans >1 currency (never summed). */
.rui-inv-side-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--space-2);
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    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;
}
/* Secondary currency totals on the revenue card when revenue spans >1 currency. */
.rui-inv-stat-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--space-2);
    margin-top: 2px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}

/* 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;
}
/* Secondary currency totals when the MRR book spans >1 currency (never summed). */
.rui-sub-stat-mrr-extra {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-1);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}
.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;
}
/* Collapse to a single column at ≤1279px — same breakpoint as the sibling
 * Invoices page (.rui-inv-page-grid) and the KPI strip above. Below 1280 the
 * left column would otherwise be squeezed under the 720px-min table width and
 * the table would spill under the sticky rail. */
@media (max-width: 1279px) {
    .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 the inner LIST container, NOT on the
 * card — so the tabs + filter bar stay full-width while only the table scrolls.
 * NOTE: `.mc-card-table` sits on the SAME element as `.rui-sub-list-card`, so a
 * descendant selector (`.rui-sub-list-card .mc-card-table`) silently matched
 * nothing — the table then spilled out of its column and the sticky right rail
 * covered the actions kebab (Approve menu unreachable). Target `.mc-list-container`,
 * which genuinely IS a descendant. The overflow makes Dropdown.js switch the
 * menu to position:fixed, so it floats above the rail instead of being clipped. */
.rui-sub-page-grid > div:first-child { min-width: 0; }
.rui-sub-list-card .mc-list-container { 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: 1279px) { .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;
}
/* Secondary currency totals when the MRR book spans >1 currency (never summed). */
.rui-sub-mrr-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--space-2);
    margin-top: var(--space-1);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}
.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[data-channel="messenger"] .mc-phone-mockup__chat-header-back { color: var(--msg-ch-fbm, var(--chart-5)); }
.mc-phone-mockup[data-channel="messenger"] .mc-phone-mockup__chat-header-icons { color: var(--msg-ch-fbm, var(--chart-5)); }
.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-avatar--fbm { background: var(--msg-ch-fbm, var(--chart-5)); }
.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));
}
.mc-phone-mockup[data-channel="messenger"] .mc-phone-mockup__chat-area {
    background-color: color-mix(in srgb, var(--msg-ch-fbm, var(--chart-5)) 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[data-channel="messenger"] .mc-phone-mockup__bubble--outbound {
    background: color-mix(in srgb, var(--msg-ch-fbm, var(--chart-5)) 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--in[data-channel="fb_messenger"] { border-left: 2px solid var(--bubble-tone-fb_messenger); }
.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); }
.mc-conv-bubble--out[data-channel="fb_messenger"] { border-right: 2px solid var(--bubble-tone-fb_messenger); }

/* 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[data-channel="fb_messenger"] .mc-conv-bubble__status--read { color: var(--bubble-tone-fb_messenger); }

.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-event — C28 W-E3 (platform event woven into the conversation timeline)
 *
 * A peer of mc-conv-bubble inside the same `.mc-conv-thread__list`. Two variants:
 *   --chip  centered pill (reactions / likes / reads): "👍 John reacted · 14:02"
 *   --card  left-aligned card (comments / mentions / posts): avatar + actor + verb
 *           + optional post thumbnail/title + comment body (clamped) + "View ↗"
 * Channel-accent strip via --event-accent (defaults to the Messenger tone).
 * Cross-platform by construction — a WhatsApp/IG event reuses the same grammar.
 *
 * Spec: docs/messenger/COMPONENT-PROPOSALS.md#c28--mc-conv-event
 * Showcase anchor: /rui/ui#mc-conv-event
 * ============================================================================ */

/* ── chip variant (reactions / likes — centered, reuses the day-divider pill) ── */
.mc-conv-event--chip {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-1) 0;
    list-style: none;
    user-select: none;
}
.mc-conv-event__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: min(80%, 460px);
    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);
    line-height: 1.3;
    padding: 4px 12px;
}
.mc-conv-event__pill-glyph {
    display: inline-flex;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--event-accent, var(--bubble-tone-fb_messenger));
}
.mc-conv-event__pill strong { color: var(--color-text); font-weight: var(--weight-semibold); }

/* ── card variant (comments / mentions / posts — left-aligned, accent strip) ── */
.mc-conv-event--card {
    --event-accent: var(--bubble-tone-fb_messenger);
    align-self: flex-start;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--space-2);
    max-width: var(--bubble-max-width);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--event-accent);
    border-radius: var(--bubble-radius);
    box-shadow: var(--shadow-card);
    list-style: none;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.mc-conv-event__avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-subtle-bg);
    color: var(--event-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    overflow: hidden;
    flex: 0 0 auto;
}
.mc-conv-event__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mc-conv-event__main { min-width: 0; }
.mc-conv-event__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.3;
}
.mc-conv-event__actor { font-weight: var(--weight-semibold); color: var(--color-text); }
.mc-conv-event__verb  { color: var(--color-text-muted); }
.mc-conv-event__time  { margin-left: auto; color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
.mc-conv-event__text {
    margin: var(--space-1) 0 0;
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mc-conv-event__post {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: var(--color-subtle-bg);
    border-radius: var(--radius-input);
}
.mc-conv-event__post-thumb { width: 32px; height: 32px; border-radius: var(--radius-sm); object-fit: cover; flex: 0 0 auto; background: var(--color-border); }
.mc-conv-event__post-title { font-size: var(--text-xs); color: var(--color-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-conv-event__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--event-accent);
}
.mc-conv-event__link svg { width: 12px; height: 12px; }

/* ── W-E4 — comment-card action row + public-reply affordance ───────────── */
.mc-conv-event__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-1);
    flex-wrap: wrap;
}
.mc-conv-event__actions .mc-conv-event__link { margin-top: 0; }
.mc-conv-event__reply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--event-accent);
}
.mc-conv-event__reply svg { width: 12px; height: 12px; }
.mc-conv-event__reply:hover { text-decoration: underline; }
.mc-conv-event__reply:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; border-radius: var(--radius-sm); }

/* W-E4 — composer comment-reply context chip (mirrors the __quote chip).
   Two modes: --mode active ("Reply to comment ✕") + reason (disabled + CTA). */
.mc-conv-compose__reply-target {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-subtle-bg);
    border-left: 3px solid var(--bubble-tone-fb_messenger);
    font-size: var(--text-xs);
}
.mc-conv-compose__reply-target[data-mode="reason"] {
    border-left-color: var(--color-warning, var(--color-amber, #c2880b));
    color: var(--color-text-muted);
}
.mc-conv-compose__reply-target-label { flex: 1; min-width: 0; }
.mc-conv-compose__reply-target-cta {
    font-weight: var(--weight-semibold);
    color: var(--bubble-tone-fb_messenger);
    white-space: nowrap;
}
.mc-conv-compose__reply-target-clear {
    border: 0;
    background: transparent;
    padding: 2px;
    cursor: pointer;
    color: var(--color-text-muted);
    display: inline-flex;
    flex-shrink: 0;
}
.mc-conv-compose__reply-target-clear svg { width: 12px; height: 12px; }
.mc-conv-compose__reply-target-clear:hover { color: var(--color-text); }
.mc-conv-compose__reply-target-clear:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }

/* ── W-E3 All/Chat/Events lens — a per-thread segmented filter in the header.
   CSS-only filtering: the toggle sets data-lens on the thread list, these rules
   hide the non-matching rows (no JS re-render, no data loss). --- */
.mc-conv-thread__lens {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
}
.mc-conv-thread__lens-btn {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
}
.mc-conv-thread__lens-btn[aria-pressed="true"] {
    background: var(--color-card-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}
/* Review-fix (W-E3.7) — keyboard focus ring (WCAG 2.4.7); the buttons had only
   an aria-pressed state, no visible focus indicator. */
.mc-conv-thread__lens-btn:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
}
.mc-conv-thread__list[data-lens="chat"]   .mc-conv-event { display: none; }
.mc-conv-thread__list[data-lens="events"] .mc-conv-bubble,
.mc-conv-thread__list[data-lens="events"] .mc-conv-thread__day-divider { display: none; }

/* W-E5 §7B — lens empty states. Always-present placeholders (SSR + JS parity),
   hidden by default; revealed ONLY when the active lens filters out every row.
   :has() lets the list detect "no events"/"no chat" with no JS (matches the
   CSS-only filtering philosophy above). */
.mc-conv-thread__lens-empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    list-style: none;
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-muted);
    text-align: center;
    font-size: var(--text-sm);
}
.mc-conv-thread__lens-empty-icon {
    font-size: 32px;
    opacity: 0.5;
}
.mc-conv-thread__list[data-lens="events"]:not(:has(.mc-conv-event)) .mc-conv-thread__lens-empty--events { display: flex; }
.mc-conv-thread__list[data-lens="chat"]:not(:has(.mc-conv-bubble)) .mc-conv-thread__lens-empty--chat { display: flex; }
/* A truly-empty thread (0 messages) already shows the generic .mc-conv-thread__empty;
   under a chat/events lens the lens-specific placeholder also fires — suppress the
   generic one so the two never stack (the generic stays for the default "all" lens). */
.mc-conv-thread__list[data-lens="chat"]   .mc-conv-thread__empty,
.mc-conv-thread__list[data-lens="events"] .mc-conv-thread__empty { display: 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;
}
/* W-E7 visual-review fix — at narrow pane widths the non-wrapping grid header
   (name+chip · lens filter · status pill) collided: the lens/status overlapped
   the channel chip + unread label (the W-E3.4 lens added the tipping width).
   Below 900px switch to flex-wrap so the actions drop to their own row beneath
   the name+chip instead of overlapping it. */
@media (max-width: 900px) {
    .mc-conv-thread__header {
        display: flex;
        flex-wrap: wrap;
        column-gap: var(--space-2);
        row-gap: var(--space-1);
    }
    .mc-conv-thread__header-name { flex: 1 1 auto; min-width: 0; }
    .mc-conv-thread__header-actions { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; }
}

.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;
}

/* MB1 — the avatar+name wrap is a tappable target (→ lead-info pane on phones).
   On desktop it's a plain unstyled inline block so the header reads identically
   to before (no button chrome, not clickable-looking, no pane switch). */
.mc-conv-thread__header .mc-conv-thread__header-id {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    /* Desktop: NOT a button affordance (the rail already shows contact info);
       the tap-to-open-rail behavior is mobile-only. Higher specificity than a
       global button{cursor:pointer} reset so desktop stays a plain label. */
    cursor: default;
}
/* MB1 — header avatar. Hidden on desktop (the rail already shows the avatar);
   shown only on phones where the thread is full-screen. */
.mc-conv-thread__header-avatar {
    display: none;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--color-teal-light, color-mix(in srgb, var(--color-teal) 16%, transparent));
    color: var(--color-teal);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    overflow: hidden;
}
.mc-conv-thread__header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.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--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);
}

/* S6.5 — Bulk-select multi-row toggle: the canonical contract is
   data-bulk="1" on the list + a real <input class="mc-conv-thread-list__row-check">
   first child per row (see the .mc-conv-thread-list__row-check rules above, which
   reserve a real grid column). The old data-bulk-mode ::before fake-checkbox was
   removed — it clipped/misaligned against the avatar (no reserved column). */

/* 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 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;
    }
    /* MB1 — show the header avatar + make the avatar+name a real tap target
       (opens the lead-info pane). Keep the header on one row, no wrap. */
    .mc-conv-thread__header-avatar { display: inline-flex; }
    .mc-conv-thread__header-id { cursor: pointer; flex: 1 1 auto; }
    .mc-conv-thread__header {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 3;
    }
    .mc-conv-thread__header-id:active { opacity: 0.7; }
}

@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/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="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. */
/* L143 — pin layout to viewport height (NOT min-height) so the list + thread
   columns can't grow past the window. Each column then handles its own
   internal scroll (`__rows` / `__list` already have overflow-y:auto). Use
   `dvh` so a mobile browser collapsing the URL bar doesn't clip the
   compose row at the bottom of the thread.

   The `--mc-app-chrome` token is the offset for everything above this
   layout — topbar (~64px) + page-header (~88px) + outer page padding
   (~24px) ≈ 176px. We default to 180px but the host theme can override
   per breakpoint by re-declaring the token on `:root` or `[data-theme]`.

   `min-height: 0` on the layout AND on its grid children is the CSS Grid
   override needed so the implicit content-minimum doesn't override the
   explicit `height: 100%` — without it, scrollable children silently
   expand the grid track. */
.rui-msg-inbox__layout {
    display: grid;
    grid-template-columns: 104px 320px 1fr 320px;
    gap: var(--space-2);
    padding: 0;
    background: var(--color-page-bg);
    height: calc(100dvh - var(--mc-app-chrome, 180px));
    max-height: calc(100dvh - var(--mc-app-chrome, 180px));
    min-height: 480px;
    align-items: stretch;
    overflow: hidden;
}
.rui-msg-inbox__layout > * {
    min-height: 0;
    min-width: 0;
}
@media (max-width: 1279px) {
    .rui-msg-inbox__layout {
        grid-template-columns: 104px 280px 1fr;
    }
    .rui-msg-inbox__layout > [data-conversation-profile-host] { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   MUST6 — TABLET (768–1279px) lead-info as a RIGHT-SIDE SLIDE-OVER.
   In this range the grid has no 4th column, so the profile rail is hidden
   (rule above). The thread header's [data-open-rail] tap (wired in
   index.blade JS, tablet branch) sets `data-rail-overlay="open"` on the
   layout → the EXISTING rail markup becomes a fixed ~360px panel that slides
   in from the right, with a scrim behind it. A scrim tap, the rail's own
   [data-rail-back], or Escape closes it. Phones (≤767) + desktop (≥1280) are
   untouched — this whole block is gated to 768–1279px.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1279px) {
    /* The scrim — only visible when the overlay is open. Sits above the panes,
       below the rail panel. Covers the whole layout. */
    .rui-msg-inbox__layout > .rui-msg-rail-scrim {
        position: fixed;
        inset: 0;
        background: color-mix(in srgb, var(--color-text) 38%, transparent);
        opacity: 0;
        visibility: hidden;
        transition: opacity 200ms ease, visibility 0s linear 200ms;
        z-index: var(--z-modal-backdrop, 1040);
        border: 0;
        margin: 0;
    }
    .rui-msg-inbox__layout[data-rail-overlay="open"] > .rui-msg-rail-scrim {
        opacity: 1;
        visibility: visible;
        transition: opacity 200ms ease, visibility 0s;
    }

    /* The rail panel — re-shown (the ≤1279 rule hid it) as a fixed right drawer.
       Parked off-screen to the right; slides in when the overlay opens. */
    .rui-msg-inbox__layout[data-rail-overlay="open"] > [data-conversation-profile-host] {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 360px;
        max-width: 92vw;
        background: var(--color-card-bg);
        box-shadow: var(--shadow-modal, -8px 0 24px rgba(0, 0, 0, 0.18));
        z-index: calc(var(--z-modal-backdrop, 1040) + 1);
        overflow-y: auto;
        transform: translateX(0);
        animation: rui-msg-rail-slide-in 220ms cubic-bezier(.4, 0, .2, 1);
    }
    .rui-msg-inbox__layout[data-rail-overlay="open"] > [data-conversation-profile-host] > .mc-conv-profile-rail {
        height: auto;
        min-height: 100%;
    }
    /* The rail's "← Contact info" back row is mobile-only by default; re-show it
       inside the tablet overlay so there's an in-panel close affordance. */
    .rui-msg-inbox__layout[data-rail-overlay="open"] > [data-conversation-profile-host] .mc-conv-profile-rail__back {
        display: flex;
    }
    /* On tablet the thread header avatar+name IS an opener — make it read tappable
       (the base rule sets cursor:default for the desktop "plain label" case). */
    .mc-conv-thread__header .mc-conv-thread__header-id[data-open-rail] {
        cursor: pointer;
    }
}
@keyframes rui-msg-rail-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
/* ════════════════════════════════════════════════════════════════════════
   MB1 — native mobile app-stack (≤767px). The inbox becomes a 3-state stack
   navigated like a real chat app: list ↔ thread ↔ rail. Each pane is an
   absolutely-positioned full-bleed layer inside the layout; `data-active-pane`
   picks which layer is on top, and `data-pane-dir` chooses the slide direction.
   The page-header + content padding collapse (via the <html data-msg-pane>
   mirror, since the header is a sibling of the content) so thread/rail are
   genuinely full-screen. ALL of this is gated to ≤767px — desktop/tablet keep
   the grid layout untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .rui-msg-inbox__layout {
        display: block;            /* drop the grid — panes are layered now */
        position: relative;
        grid-template-columns: none;
        gap: 0;
        /* On phones the URL bar shrinks/grows — use `svh` floor so the
           layout doesn't jump when scrolling, and bump chrome offset
           since the page-header stacks differently on mobile. */
        height: calc(100svh - var(--mc-app-chrome-mobile, 140px));
        max-height: calc(100svh - var(--mc-app-chrome-mobile, 140px));
        overflow: hidden;
    }

    /* The three navigable panes — each fills the layout, layered. The channel
       rail (vertical tabs) + the not-connected welcome overlay are NOT navigable
       panes here; the rail is hidden (replaced by the Platform dropdown) and the
       welcome keeps its own ≥? behavior. */
    .rui-msg-inbox__layout > [data-conversation-list],
    .rui-msg-inbox__layout > [data-conversation-thread-host],
    .rui-msg-inbox__layout > [data-conversation-profile-host] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;             /* let the inner list/thread/rail fill height */
        flex-direction: column;
        background: var(--color-page-bg);
        /* off-screen by default; the active-pane rule slides the right one in */
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 220ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 220ms;
        z-index: 1;
    }
    .rui-msg-inbox__layout > [data-conversation-list]         > .mc-conv-thread-list,
    .rui-msg-inbox__layout > [data-conversation-thread-host]  > .mc-conv-thread,
    .rui-msg-inbox__layout > [data-conversation-profile-host] > .mc-conv-profile-rail {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
    }

    /* The channel-rail vertical tabs are REPLACED by the Platform dropdown on
       phones — hide them entirely (no horizontal scroller). */
    .rui-msg-inbox__layout > .mc-channel-rail { display: none; }

    /* Active pane = visible + on-screen + on top. */
    .rui-msg-inbox__layout[data-active-pane="list"]   > [data-conversation-list],
    .rui-msg-inbox__layout[data-active-pane="thread"] > [data-conversation-thread-host],
    .rui-msg-inbox__layout[data-active-pane="rail"]   > [data-conversation-profile-host] {
        transform: translateX(0);
        visibility: visible;
        transition: transform 220ms cubic-bezier(.4, 0, .2, 1), visibility 0s;
        z-index: 2;
    }

    /* Re-assert the lead-info pane on mobile (≤1279 hides it; we override it
       only when it's the active pane so desktop/tablet stay hidden). */
    .rui-msg-inbox__layout[data-active-pane="rail"] > [data-conversation-profile-host] { display: flex; }

    /* Direction-aware slide: outgoing pane parks to the LEFT on a forward nav
       and to the RIGHT on a back nav, so the active pane always slides in from
       the matching side. Inactive panes start parked on the far side. */
    .rui-msg-inbox__layout[data-pane-dir="fwd"]  > [data-conversation-list],
    .rui-msg-inbox__layout[data-pane-dir="fwd"]  > [data-conversation-thread-host],
    .rui-msg-inbox__layout[data-pane-dir="fwd"]  > [data-conversation-profile-host] { transform: translateX(100%); }
    .rui-msg-inbox__layout[data-pane-dir="back"] > [data-conversation-list],
    .rui-msg-inbox__layout[data-pane-dir="back"] > [data-conversation-thread-host],
    .rui-msg-inbox__layout[data-pane-dir="back"] > [data-conversation-profile-host] { transform: translateX(-100%); }
    /* …but the ACTIVE pane is always centered (wins over the dir rule above). */
    .rui-msg-inbox__layout[data-active-pane="list"]   > [data-conversation-list],
    .rui-msg-inbox__layout[data-active-pane="thread"] > [data-conversation-thread-host],
    .rui-msg-inbox__layout[data-active-pane="rail"]   > [data-conversation-profile-host] { transform: translateX(0); }
}

/* MB1 — full-screen thread/rail: hide the Sales BOX page-header + zero the
   content padding so the chat fills the phone. Driven by the <html> mirror
   (data-msg-pane) since the page-header is a SIBLING of the content, not a
   descendant of the inbox layout. List pane keeps the (compact) header. */
@media (max-width: 767px) {
    html[data-msg-pane="thread"] .mc-content-header,
    html[data-msg-pane="rail"]   .mc-content-header { display: none; }
    html[data-msg-pane="thread"] .mc-content,
    html[data-msg-pane="rail"]   .mc-content { padding: 0; }
    /* When the header is gone the layout can reclaim its height (no chrome). */
    html[data-msg-pane="thread"] .rui-msg-inbox__layout,
    html[data-msg-pane="rail"]   .rui-msg-inbox__layout {
        height: calc(100svh - var(--mc-app-chrome-mobile-thread, 56px));
        max-height: calc(100svh - var(--mc-app-chrome-mobile-thread, 56px));
    }
}

/* MB1 — honor reduced-motion: no slide, just swap. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .rui-msg-inbox__layout > [data-conversation-list],
    .rui-msg-inbox__layout > [data-conversation-thread-host],
    .rui-msg-inbox__layout > [data-conversation-profile-host] {
        transition: none;
    }
}
/* Bulk-bar (~48px) eats extra chrome height when active. Recompute the
   layout height to compensate so the columns don't push the compose row
   past the viewport when the customer clicks "Select". */
.rui-msg-inbox.rui-msg-inbox--bulk-active .rui-msg-inbox__layout,
.rui-msg-inbox:has(.rui-msg-inbox__bulk-bar:not([hidden])) .rui-msg-inbox__layout {
    height: calc(100dvh - var(--mc-app-chrome, 180px) - 48px);
    max-height: calc(100dvh - var(--mc-app-chrome, 180px) - 48px);
}

.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);
}
/* rui/ui canonical empty-state icon (Material Symbols glyph) — replaces the
   bespoke off-balance hand-drawn SVG; centered by the flex column above. */
.mc-conv-thread-list__empty-icon {
    font-size: 56px;
    line-height: 1;
    color: var(--illust-stroke);
}
.mc-conv-thread-list__empty-cta {
    /* Reset native <button> chrome so it renders as a clean text link (the
       markup uses both <button> and <a> for this class). */
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--color-teal);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    cursor: pointer;
}

/* 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);
}

/* G8 — composer "Replying as" line. Hidden on desktop (the right profile
   rail already shows the full sending-identity card); shown ≤1279px where
   the rail is display:none, so sending identity stays reachable on
   tablet/mobile without duplicating the rail on desktop. Compact single
   row: brand glyph · label + sender name + address · Manage link. */
.mc-conv-compose__identity {
    display: none; /* desktop: the right rail card covers this */
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
    min-width: 0;
}
.mc-conv-compose__identity-glyph {
    display: inline-flex;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--rail-accent, var(--color-teal));
}
.mc-conv-compose__identity-glyph--off { color: var(--color-warning); }
.mc-conv-compose__identity-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-conv-compose__identity-text strong {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}
.mc-conv-compose__identity-text--warn { color: var(--color-warning); }
.mc-conv-compose__identity-addr { color: var(--color-text-muted); }
.mc-conv-compose__identity-manage {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--color-teal);
    font-weight: var(--weight-medium);
}
@media (max-width: 1279px) {
    .mc-conv-compose__identity { display: flex; }
}

/* 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__identity,
.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);
    /* L144 — no outer padding. Sub-cards (.mc-conv-profile-rail__card) carry
       their own padding + the rail's `gap` provides vertical separation.
       Original padding:var(--space-3) created a double-gap because the cards
       are visually the borders, not the rail; the rail is a transparent
       container that sits in a 320px column with `--space-2` gap to peer
       columns from the parent grid. */
    padding: 0;
    padding-bottom: var(--space-2);
    background: var(--color-page-bg);
    /* The rail is the 320px grid child's content; the parent
       .rui-msg-inbox__layout track has a DEFINITE height (calc(100dvh - chrome))
       and clips overflow. Bind to that track with height/max-height:100% + a flex
       min-height:0 so the rail scrolls INTERNALLY (overflow-y:auto) instead of
       overflowing the viewport and hiding Quick Actions — mirrors the working
       .mc-conv-thread / .mc-conv-thread-list scroll pattern. (Was min-height:400px
       with no height clamp → grew to content height → bottom card clipped, no scroll.) */
    height: 100%;
    max-height: 100%;
    min-height: 0;
    width: 320px;
    overflow-y: auto;
}

/* MB1 — mobile "← Contact info" back row at the top of the lead-info pane
   (rail → thread). Hidden on desktop where the rail is a permanent column. */
.mc-conv-profile-rail__back {
    display: none;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 3;
}
.mc-conv-profile-rail__back svg { width: 20px; height: 20px; flex: none; }
.mc-conv-profile-rail__back:active { opacity: 0.7; }
@media (max-width: 767px) {
    .mc-conv-profile-rail {
        width: 100%;
        /* On mobile the rail is full-screen; let its own cards carry padding,
           add a little horizontal breathing room since there's no grid gutter. */
        padding: 0 var(--space-3) var(--space-3);
    }
    .mc-conv-profile-rail__back {
        display: flex;
        margin: 0 calc(-1 * var(--space-3));   /* bleed the back bar edge-to-edge */
    }
}

.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);
    flex-shrink: 0;
    overflow: hidden; /* Review-fix (W-E3.7) — clip the avatar <img> to the rounded circle (matches .mc-conv-event__avatar). */
}
.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="fb_messenger"] .mc-conv-profile-rail__avatar { background: var(--bubble-tone-fb_messenger); }
.mc-conv-profile-rail[data-primary-channel="email"]    .mc-conv-profile-rail__avatar { background: var(--bubble-tone-email); }
/* G6 — real avatar image (overrides the channel-tinted initial circle). */
.mc-conv-profile-rail__avatar--img { background: var(--color-subtle-bg); }
.mc-conv-profile-rail__avatar--img img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
}
/* G6 / §7.3 — Recent-events rollup: count + label chips. */
.mc-conv-profile-rail__rollup {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.mc-conv-profile-rail__rollup-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-subtle-bg);
    border-radius: var(--radius-sm);
}
.mc-conv-profile-rail__rollup-count {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.1;
}
.mc-conv-profile-rail__rollup-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.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;
}

/* ============================================================================
   mc-msg-sender — "Replying as <connection>" / "Your senders" panel
   Sits inside an mc-conv-profile-rail__card. The official brand logo carries
   the platform colour via the inline --rail-accent; the rest is neutral text.
   ========================================================================== */
.mc-msg-sender__row {
    --rail-accent: var(--color-teal);
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}
.mc-msg-sender__row + .mc-msg-sender__row {
    border-top: var(--space-px) solid var(--color-border);
}
.mc-msg-sender__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--rail-accent);
}
.mc-msg-sender__id {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.mc-msg-sender__name {
    font-size: var(--text-sm, 13px);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-msg-sender__addr {
    font-size: var(--text-xs, 11px);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-msg-sender__badge { flex: none; }
.mc-msg-sender__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--text-xs, 11px);
    color: var(--color-text-muted);
}
.mc-msg-sender__hint::after {
    content: "·";
    margin-left: var(--space-2);
    color: var(--color-border-strong);
}
/* Multi-Page — "Bound to this lead" locked-sender hint: the reply-as is fixed
   to the Page/bot the lead used (page/bot-scoped recipient id; no picker). */
.mc-msg-sender__hint--locked {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--color-text-muted);
}
.mc-msg-sender__hint--locked .mc-icon { color: var(--color-text-subtle, var(--color-text-muted)); flex: none; }
.mc-msg-sender__hint--locked::after { content: none; } /* no trailing "·" — it's the only hint */
.mc-msg-sender__manage {
    margin-left: auto;
    color: var(--color-teal);
    font-weight: var(--weight-medium);
    text-decoration: none;
}
.mc-msg-sender__manage:hover { text-decoration: underline; }

/* 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-channel="fb_messenger"] { --row-tone: var(--msg-ch-fbm); --row-ink: var(--msg-ch-fbm-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;
    }
}


/* ============================================================================
   mc-channel-rail — vertical platform rail (messenger inbox)
   Borderless tabs that float DIRECTLY on the page bg (no container card). The
   WHOLE tab carries the channel tint (the icon has no separate box) so each
   reads as one cohesive chip. "Borders" are even inset box-shadow rings (no
   1px border → no corner/subpixel unevenness at high zoom). Per-channel accent
   via inline `--rail-accent`. New rui/ui component (W11.5 inbox redesign).
   ========================================================================== */
.mc-channel-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 96px;
    flex: none;
    padding: var(--space-3) var(--space-2-5, 10px);
    background: transparent;
    overflow-y: auto;
}
.mc-channel-rail__title {
    font-size: var(--text-2xs, 10px);
    font-weight: var(--weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0 var(--space-1) var(--space-1);
}
.mc-channel-rail__item {
    --rail-accent: var(--color-teal);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: var(--radius-lg, 14px);
    /* IDLE (not hover, not active) — fully transparent: NO bg, NO border, for
       EVERY tab (connected or not). Only the official logo carries the platform
       colour; the brand tint materialises solely on hover / active. */
    background: transparent;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.mc-channel-rail__item:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--rail-accent) 14%, var(--color-card-bg));
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--rail-accent) 50%, transparent);
}
.mc-channel-rail__item:hover .mc-channel-rail__glyph { transform: scale(1.08); }
.mc-channel-rail__item:focus-visible {
    outline: 2px solid var(--rail-accent);
    outline-offset: 2px;
}
/* ACTIVE (only meaningful for a connected tab — :not(--off) so it never
   overrides the white off-card by mere source order) */
.mc-channel-rail__item.is-active:not(.mc-channel-rail__item--off) {
    transform: none;
    background: color-mix(in srgb, var(--rail-accent) 18%, var(--color-card-bg));
    box-shadow: inset 0 0 0 2px var(--rail-accent);   /* even ring, all sides */
}
.mc-channel-rail__item.is-active:not(.mc-channel-rail__item--off) .mc-channel-rail__label {
    color: var(--color-text);   /* readable on the tint; ring + bold carry "active" */
    font-weight: var(--weight-bold, 700);
}
.mc-channel-rail__item.is-active:not(.mc-channel-rail__item--off):hover {
    transform: none;
    box-shadow: inset 0 0 0 2px var(--rail-accent),
                0 8px 18px -8px color-mix(in srgb, var(--rail-accent) 40%, transparent);
}
.mc-channel-rail__item.is-active:not(.mc-channel-rail__item--off):hover .mc-channel-rail__glyph { transform: none; }
/* a disconnected tab that is the current selection — neutral grey ring (stays a white card) */
.mc-channel-rail__item--off.is-active {
    box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
}
/* icon sits directly in the box — NO inner box/background; ALWAYS brand-hued
   (connected AND disconnected — the "+" badge is the only "not connected" cue) */
.mc-channel-rail__glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rail-accent);
    transition: transform .15s ease;
}
.mc-channel-rail__label {
    font-size: var(--text-2xs, 11px);
    font-weight: var(--weight-semibold);
    line-height: 1.05;
    color: var(--color-text);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* unread rollup pill */
.mc-channel-rail__badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-rose, #e5484d);
    color: #fff;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    line-height: 1;
}
/* DISCONNECTED — same white card as connected; the "+" hint is the only
   difference (the logo stays brand-coloured, per design intent). */
.mc-channel-rail__plus {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-border);
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.mc-channel-rail__item--off:hover .mc-channel-rail__plus { background: var(--rail-accent); color: #fff; }

/* respect reduced-motion — no lifts / scales */
@media (prefers-reduced-motion: reduce) {
    .mc-channel-rail__item,
    .mc-channel-rail__glyph,
    .mc-channel-rail__plus { transition: none; }
    .mc-channel-rail__item:hover { transform: none; }
    .mc-channel-rail__item:hover .mc-channel-rail__glyph { transform: none; }
}

/* dark mode — idle stays a plain dark card (grey border via --color-border-strong);
   only hover / active carry the tint, raised because a 14-18% mix is faint on dark. */
[data-theme="dark"] .mc-channel-rail__item:hover {
    background: color-mix(in srgb, var(--rail-accent) 26%, var(--color-card-bg));
}
[data-theme="dark"] .mc-channel-rail__item.is-active:not(.mc-channel-rail__item--off) {
    background: color-mix(in srgb, var(--rail-accent) 30%, var(--color-card-bg));
}

/* responsive — collapse to a horizontal scroller on narrow viewports */
@media (max-width: 767px) {
    .mc-channel-rail {
        flex-direction: row;
        align-items: center;   /* keep tabs square (don't stretch to row height) */
        width: auto;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        overflow-x: auto;
        overflow-y: visible;
    }
    .mc-channel-rail__title { display: none; }
    .mc-channel-rail__item { width: 76px; aspect-ratio: 1 / 1; flex: none; }
}

/* mc-channel-rail welcome pane — shown when a disconnected platform tab is tapped */
.rui-msg-inbox__welcome {
    display: none;
    grid-column: 2 / -1;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-6);
    background: var(--color-page-bg);
    overflow-y: auto;
}
.rui-msg-inbox__layout[data-welcome] > *:not(.mc-channel-rail):not(.rui-msg-inbox__welcome) { display: none; }
.rui-msg-inbox__layout[data-welcome] .rui-msg-inbox__welcome { display: flex; }
.rui-msg-welcome__card {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
}
.rui-msg-welcome__icon {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-xl, 18px);
    background: color-mix(in srgb, var(--color-teal) 14%, transparent);
    color: var(--color-teal);
    margin-bottom: var(--space-1);
}
.rui-msg-welcome__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text); line-height: 1.2; }
.rui-msg-welcome__subtitle { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 40ch; }
.rui-msg-welcome__steps {
    width: 100%; max-width: 360px;
    list-style: none; margin: var(--space-3) 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--space-2-5, 10px);
    text-align: left;
}
.rui-msg-welcome__steps li { display: flex; align-items: center; gap: var(--space-2-5, 10px); font-size: var(--text-sm); color: var(--color-text); }
.rui-msg-welcome__step-n {
    flex: none; width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--color-teal); color: #fff;
    font-size: var(--text-xs); font-weight: var(--weight-bold);
}
@media (max-width: 767px) {
    .rui-msg-inbox__welcome { grid-column: 1 / -1; padding: var(--space-6) var(--space-4); }
}

/* ════════════════════════════════════════════════════════════════════════
   Subscriber Engagement page (merged activity feed)
   ════════════════════════════════════════════════════════════════════════ */

/* HERO */
.eng-hero {
    display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center;
    background: linear-gradient(135deg, var(--chart-1-bg), var(--color-card-bg) 70%);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-6); margin-bottom: var(--space-5);
}
.eng-id { display: flex; align-items: center; gap: var(--space-4); }
.eng-id__name { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text); line-height: 1.1; }
.eng-id__email { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.eng-id__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.eng-id__facts b { color: var(--color-text); font-weight: var(--weight-semibold); }
.eng-id__tags { display: flex; gap: 6px; margin-top: var(--space-2); flex-wrap: wrap; }
.eng-tag { font-size: var(--text-xs); padding: 2px 9px; border-radius: var(--radius-input); background: #4b5563; color: #f3f4f6; }
.eng-hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.eng-fresh { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }

/* METRIC CARDS */
/* All metrics in ONE continuous block — no per-metric boxes or dividers. */
.eng-metrics { display: flex; flex-wrap: wrap; align-items: flex-start; background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-5) var(--space-4); margin-bottom: var(--space-5); }
.eng-metric { flex: 1 1 130px; min-width: 0; padding: var(--space-1) var(--space-4); }
.eng-metric__val { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text); line-height: 1; }
.eng-metric__label { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px; }
.eng-metric__sub { font-size: var(--text-xs); color: var(--color-text-disabled); margin-top: 2px; }
.eng-metric__arrow { color: var(--color-text-disabled); font-size: 18px; }

/* MAIN GRID */
.eng-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }

/* FILTER BAR */
.eng-filterbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.eng-segment { display: inline-flex; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: 3px; }
.eng-segment button { border: 0; background: transparent; cursor: pointer; font-size: var(--text-sm); color: var(--color-text-muted); padding: 6px 14px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-medium); }
.eng-segment button .material-symbols-rounded { font-size: 16px; }
.eng-segment button.active { background: var(--color-card-bg); color: var(--color-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.eng-select { position: relative; }
.eng-select select { appearance: none; border: 1px solid var(--color-border); background: var(--color-card-bg); color: var(--color-text); border-radius: var(--radius-input); padding: 7px 30px 7px 12px; font-size: var(--text-sm); cursor: pointer; max-width: 220px; }
.eng-select .material-symbols-rounded { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 18px; color: var(--color-text-muted); }
.eng-capnote { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 var(--space-2); }

/* DAY GROUPS + FEED */
.eng-daygroup { margin-bottom: var(--space-2); }
.eng-dayhdr { padding: var(--space-3) 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-2); }
.eng-dayhdr .line { flex: 1; height: 1px; background: var(--color-border); }
.eng-feed { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.eng-item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.eng-item:last-child { border-bottom: 0; }
.eng-item:hover { background: var(--color-bg); }
.eng-item__ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.eng-item__ico .material-symbols-rounded { font-size: 18px; }
.eng-item__msg { font-size: var(--text-sm); color: var(--color-text); }
.eng-item__msg b { font-weight: var(--weight-semibold); }
.eng-entity { color: var(--color-text-muted); text-decoration: none; font-weight: var(--weight-normal); }
.eng-entity:hover { color: var(--color-text); text-decoration: underline; }
.eng-item__sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.eng-linkchip { display: inline-flex; align-items: center; gap: 5px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: 2px 8px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.eng-linkchip .material-symbols-rounded { font-size: 13px; color: var(--color-text-muted); }
.eng-item__meta { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; text-align: right; }
.eng-item__meta .exact { color: var(--color-text-disabled); display: block; margin-top: 2px; }
.eng-device { display: inline-flex; align-items: center; gap: 4px; }
.eng-device .material-symbols-rounded { font-size: 14px; }

/* RIGHT RAIL */
.eng-rail { display: flex; flex-direction: column; gap: var(--space-4); }
.eng-railcard { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-5); }
.eng-railcard h4 { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); display: flex; align-items: center; gap: var(--space-2); }
.eng-railcard h4 .material-symbols-rounded { font-size: 18px; }
.eng-camp { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.eng-camp:last-child { border-bottom: 0; }
.eng-camp__top { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); }
.eng-camp__name { color: var(--color-teal); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.eng-camp__bar { height: 6px; border-radius: var(--radius-full); background: var(--color-border); margin-top: 6px; display: flex; overflow: hidden; }
.eng-camp__bar i { display: block; height: 100%; }
.eng-camp__legend { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 5px; display: flex; gap: var(--space-3); }
.eng-camp__legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.eng-journey { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.eng-journey:last-child { border-bottom: 0; }
.eng-journey__hdr { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.eng-journey__name { font-size: var(--text-sm); color: var(--color-teal); text-decoration: none; font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eng-journey__link { font-size: var(--text-xs); color: var(--color-teal); text-decoration: none; display: inline-block; margin-top: 4px; }

@media (max-width: 980px) {
    .eng-main { grid-template-columns: 1fr; }
    .eng-hero { grid-template-columns: 1fr; }
    .eng-hero__side { align-items: flex-start; }
}

/* ==========================================================================
   Template gallery upgrade (2026-07-24) — create-template page:
   segmented category control + quick search + sticky action bar +
   check-marker selection. See refactor/pages/templates/create.blade.php.
   ========================================================================== */
.mc-gallery-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
}
.mc-gallery-header .mc-card-title { justify-self: start; }
.mc-gallery-segmented { justify-self: center; max-width: 100%; overflow-x: auto; }
.mc-gallery-header .mc-gallery-search { justify-self: end; }
@media (max-width: 1100px) {
    .mc-gallery-header { grid-template-columns: 1fr; }
    .mc-gallery-segmented { justify-self: start; }
    .mc-gallery-header .mc-gallery-search { justify-self: stretch; }
}
.mc-gallery-search { position: relative; }
.mc-gallery-search > .material-symbols-rounded {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--color-text-muted);
    pointer-events: none;
}
.mc-gallery-search .mc-form-input {
    width: 300px;
    max-width: 100%;
    padding-left: 36px;
    padding-right: 34px;
}
.mc-gallery-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}
.mc-gallery-search-clear:hover { background: var(--color-hover-bg); color: var(--color-text); }
.mc-gallery-search-clear .material-symbols-rounded { font-size: 16px; }

/* Selected card — teal ring + top-right check badge (clearer than border-only) */
.mc-template-card { cursor: pointer; position: relative; }
.mc-template-card.is-selected {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 2px var(--color-teal-ring);
}
.mc-template-card.is-selected::after {
    content: 'check';
    font-family: 'Material Symbols Rounded';
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-teal);
    color: var(--color-white);
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

/* Sticky action bar — submit always in view; left zone = live selection info */
.mc-gallery-actionbar {
    position: sticky;
    bottom: var(--space-4);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 28px rgba(16, 24, 40, 0.14);
}
.mc-gallery-actionbar-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-width: 0;
}
.mc-gallery-actionbar-icon { font-size: 28px; flex: 0 0 auto; }
.mc-gallery-actionbar-icon.is-hint { color: var(--color-text-muted); }
.mc-gallery-actionbar-icon.is-selected { color: var(--color-teal); }
.mc-gallery-actionbar-icon.is-error { color: var(--color-danger, #b42318); }
.mc-gallery-actionbar-text { min-width: 0; }
.mc-gallery-actionbar-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-gallery-actionbar-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-teal);
    margin-right: var(--space-2);
}
.mc-gallery-actionbar-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-gallery-actionbar-submit { flex: 0 0 auto; font-size: var(--text-base); padding: var(--space-3) var(--space-6); }

/* Gallery empty state (search-aware) */
.mc-gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8);
    color: var(--color-text-muted);
    text-align: center;
}
.mc-gallery-empty > .material-symbols-rounded { font-size: 42px; opacity: 0.45; }
.mc-gallery-empty-title { font-size: var(--text-sm); }

@media (max-width: 767px) {
    .mc-gallery-search { width: 100%; }
    .mc-gallery-search .mc-form-input { width: 100%; }

    /* position:sticky can't engage under the global mobile overflow-x:hidden
       scrollport (layouts.css) — pin the bar with fixed instead, and pad the
       form bottom so the last cards are never covered. */
    .mc-gallery-actionbar {
        position: fixed;
        left: var(--space-3);
        right: var(--space-3);
        bottom: var(--space-3);
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    #create-template-form { padding-bottom: 132px; }
    .mc-gallery-actionbar-submit { width: 100%; justify-content: center; }

    /* static hint copy must wrap, not ellipsize away */
    .mc-gallery-actionbar-desc {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* touch targets */
    .mc-gallery-segmented .mc-segmented-item { min-height: 40px; }
    .mc-gallery-search-clear { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
    /* drop icons so 4 tabs fit a 390px viewport without clipping */
    .mc-gallery-segmented .mc-segmented-item .material-symbols-rounded { display: none; }
}

/* While a keyword is active, search spans all categories — dim the segmented
   control so the scope override reads visually. */
.mc-segmented.is-search-overridden { opacity: 0.45; pointer-events: none; }

/* Campaign wizard gallery toolbar (2026-07-24) — sub-tabs left, quick search
   CENTER, System/Mine scope right. Mirrors the create-template page controls. */
.cr-gallery-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.cr-gallery-toolbar > .mc-segmented:first-child { justify-self: start; max-width: 100%; overflow-x: auto; }
.cr-gallery-toolbar > .mc-gallery-search { justify-self: center; }
.cr-gallery-toolbar > .mc-segmented:last-child { justify-self: end; }
@media (max-width: 1100px) {
    .cr-gallery-toolbar { grid-template-columns: 1fr; }
    .cr-gallery-toolbar > .mc-segmented:first-child,
    .cr-gallery-toolbar > .mc-segmented:last-child { justify-self: start; }
    .cr-gallery-toolbar > .mc-gallery-search { justify-self: stretch; }
    .cr-gallery-toolbar > .mc-gallery-search .mc-form-input { width: 100%; }
}

/* ==========================================================================
   SYSTEM ALERT BAR — full-width strip under the topbar for conditions the
   user must act on (inactive plan, no sending server, corrupt brand colour).
   Was inline in components/system-alert-bar.blade.php; promoted here so the
   admin layout can raise the same bar without duplicating the rules.
   ========================================================================== */

.mc-system-alert-bar {
    background: var(--color-warning-bg, #fef3cd);
    color: var(--color-warning-text, #856404);
    padding: var(--space-2-5) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    position: relative;
    z-index: 49;
    border-bottom: 1px solid var(--color-warning-border, #ffc107);
}
.mc-system-alert-bar .material-symbols-rounded {
    font-size: 18px;
    flex-shrink: 0;
}
.mc-system-alert-bar--error {
    background: var(--color-error-bg, #f8d7da);
    color: var(--color-error-text, #721c24);
    border-bottom-color: var(--color-error-border, #f5c6cb);
}
.mc-system-alert-bar a {
    color: inherit;
    font-weight: var(--weight-semibold);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPAM SCORE — SpamAssassin spam scoring modal.
   docs/spam-score/SPAM-SCORE-COMPREHENSIVE-DESIGN.md §12
   ═══════════════════════════════════════════════════════════════════════════ */

.mc-spam-score-trigger-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}
.mc-spam-score-trigger-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mc-spam-score-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Verdict header — score vs the ENGINE'S OWN threshold, never an app-side one. */
.mc-spam-score-verdict {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-hover-bg);
}
.mc-spam-score-verdict-icon { font-size: 32px; flex-shrink: 0; }
.mc-spam-score-verdict.is-pass .mc-spam-score-verdict-icon { color: var(--color-teal); }
.mc-spam-score-verdict.is-fail .mc-spam-score-verdict-icon { color: var(--chart-4); }
.mc-spam-score-verdict-main { flex: 1; min-width: 0; }
.mc-spam-score-verdict-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-spam-score-verdict-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mc-spam-score-number { text-align: right; flex-shrink: 0; }
.mc-spam-score-number strong {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    color: var(--color-text);
}
.mc-spam-score-number span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mc-spam-score-meter {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    overflow: hidden;
    margin: var(--space-3) 0 var(--space-4);
}
.mc-spam-score-meter span {
    display: block;
    height: 100%;
    background: var(--color-teal);
    transition: width .3s ease;
}
.mc-spam-score-verdict.is-fail + .mc-spam-score-meter span { background: var(--chart-4); }

.mc-spam-score-note,
.mc-spam-score-subnote {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: var(--space-3) 0;
}

.mc-spam-score-heading {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: var(--space-5) 0 var(--space-2);
}

/* Findings list — wide rule descriptions scroll inside their own box so the
   modal (and the page behind it) never scrolls sideways. */
.mc-spam-score-hits {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-border);
    border-radius: var(--radius-input);
    overflow: hidden;
    max-height: 340px;
    overflow-y: auto;
}
.mc-spam-score-hit {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-card-bg, #fff);
}
.mc-spam-score-hit-points {
    flex-shrink: 0;
    min-width: 44px;
    text-align: right;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.mc-spam-score-hit.is-penalty .mc-spam-score-hit-points { color: var(--chart-4); }
.mc-spam-score-hit.is-credit  .mc-spam-score-hit-points { color: var(--color-teal); }
.mc-spam-score-hit.is-neutral .mc-spam-score-hit-points { color: var(--color-text-muted); }
.mc-spam-score-hit-body { display: flex; flex-direction: column; min-width: 0; }
.mc-spam-score-hit-desc {
    font-size: var(--text-sm);
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.mc-spam-score-hit-symbol {
    font-size: 10.5px;
    font-family: var(--font-mono, monospace);
    color: var(--color-text-muted);
    letter-spacing: .02em;
}

.mc-spam-score-error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-hover-bg);
}
.mc-spam-score-error-icon { color: var(--chart-5); flex-shrink: 0; }
.mc-spam-score-error-text {
    font-size: var(--text-sm);
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.mc-spam-score-admin-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.mc-spam-score-variants {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.mc-spam-score-variant {
    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-input);
    background: var(--color-card-bg, #fff);
    color: var(--color-text);
    font-size: var(--text-sm);
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.mc-spam-score-variant:hover { background: var(--color-hover-bg); }

.mc-spam-score-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-5);
}
.mc-spam-score-engine {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .mc-spam-score-verdict { flex-wrap: wrap; }
    .mc-spam-score-number { text-align: left; }
}

/* Error code block — the customer quotes this to their administrator. */
.mc-spam-score-code {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-input);
    background: var(--color-hover-bg);
}
.mc-spam-score-code-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-spam-score-code-value {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    user-select: all;
}
.mc-spam-score-code-hint {
    flex-basis: 100%;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Compact thumb (< ~80px): no room for the overlay label — it clipped to "PREV".
   The icon carries the affordance and the name lives in a title tooltip. */
.mc-thumb-preview--compact .mc-thumb-preview-icon svg { width: 15px; height: 15px; }
.mc-thumb-preview--compact .mc-thumb-preview-overlay { gap: 0; }

/* Raw engine report — shown verbatim when the rule table cannot be read. */
.mc-spam-score-raw {
    margin: var(--space-2) 0 0;
    padding: var(--space-3);
    max-height: 320px;
    overflow: auto;
    border-radius: var(--radius-input);
    background: var(--color-hover-bg);
    color: var(--color-text);
    font-family: var(--font-mono, monospace);
    font-size: 11.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Collapsible card — mc-collapsible
   An `mc-card` whose body folds behind its header. The header stays readable
   when folded (title + one-line description), so the card says what it holds
   without being opened. State is server-rendered; app.js handles the clicks.
   ========================================================================== */

.mc-collapsible-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.mc-collapsible-header:focus-visible {
    outline: var(--space-0-5) solid var(--color-teal);
    outline-offset: var(--space-2);
    border-radius: var(--radius-input);
}

.mc-collapsible-heading {
    flex: 1;
    min-width: 0;
}

.mc-collapsible-title {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.mc-collapsible-header:hover .mc-collapsible-title {
    color: var(--color-teal);
}

.mc-collapsible-desc {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--color-text-muted);
}

.mc-collapsible-caret {
    flex: none;
    font-size: var(--text-xl);
    line-height: 1;
    color: var(--color-text-muted);
    transition: transform 0.15s ease, color 0.15s ease;
}

.mc-collapsible.is-open .mc-collapsible-caret {
    transform: rotate(180deg);
}

.mc-collapsible-header:hover .mc-collapsible-caret {
    color: var(--color-teal);
}

/* The divider the folded-away section title used to draw. */
.mc-collapsible-body {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--space-px) solid var(--color-border);
}

/* Explicit: a later `display` rule on a body class must not out-specify the
   `hidden` attribute and leave a folded card showing. */
.mc-collapsible-body[hidden] {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Autocomplete dropdown
   ─────────────────────────────────────────────────────────────────────────────
   Search-as-you-type list anchored under a text input. The input must sit in a
   `position: relative` wrapper, and the dropdown carries `display:none` inline
   until the script has results.

   Two item shapes:
     <div class="mc-autocomplete-item">Plain label</div>
     <div class="mc-autocomplete-item">
         <span class="mc-autocomplete-item-name">Primary</span>
         <span class="mc-autocomplete-item-sub">Secondary</span>
     </div>

   Extracted 2026-08-17 from three page-local <style> copies (admin coupons,
   admin subscriptions, and the sending-server Owner column added that day).
   The copies had already drifted — different max-height, different anchoring —
   which is what a third copy would have cemented.
   ────────────────────────────────────────────────────────────────────────── */
.mc-autocomplete-dropdown {
    position: absolute;
    z-index: 100;
    left: 0;
    top: calc(100% + var(--space-1));
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

/* Escape hatch: when the input sits inside an overflow container (a
   .mc-table-responsive wrapper clips with overflow-y:hidden, for one), the
   script switches the list to viewport coordinates and positions it itself. */
.mc-autocomplete-dropdown.is-fixed {
    position: fixed;
}

.mc-autocomplete-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text);
}

.mc-autocomplete-item:hover,
.mc-autocomplete-item.selected {
    background: var(--color-hover-bg);
}

.mc-autocomplete-item.selected {
    font-weight: var(--weight-medium);
}

.mc-autocomplete-item-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.mc-autocomplete-item-sub {
    font-size: var(--text-xs);
    /* Explicit: the .selected rule bolds the whole item, and a secondary line
       that inherits that weight stops reading as secondary. */
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
}

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