/* ==========================================================================
   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;
    /* Enumerated rather than `all`: `all` also animates layout-affecting
       properties (width, padding) whenever a neighbouring rule changes them,
       which produced visible jitter on hover. */
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    letter-spacing: var(--tracking-normal);
}

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

/* Pressed state. Buttons previously went straight from hover to release with
   no tactile feedback; a 1px displacement plus a flattened shadow reads as
   physical depression. */
.mc-btn:active:not(:disabled):not(.disabled):not(.is-loading) {
    transform: translateY(1px);
}

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

.mc-btn:disabled, .mc-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: 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.
   The hover shadow was hardcoded to rgba(0,124,137,.20) — the old Mailchimp
   teal — so it stayed teal no matter the brand or colour scheme. It now uses
   --color-teal-ring, which each of the 7 schemes and both themes redefine. */
.mc-btn-primary {
    background: var(--gradient-primary);
    color: var(--color-primary-fg);
    border-color: var(--color-teal);
    box-shadow: var(--shadow-xs);
    /* isolate: creates a stacking context so the ::before overlay below paints
       above this background but still beneath the label. */
    position: relative;
    isolation: isolate;
}

/* Hover/active fill lives on an overlay rather than swapping `background`.
   CSS cannot interpolate between two gradients — a straight swap snaps, where
   the old solid-colour fill used to cross-fade via .mc-btn's background-color
   transition. Fading the overlay's opacity restores that. */
.mc-btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--gradient-primary-hover);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.mc-btn-primary:hover::before {
    opacity: 1;
}
.mc-btn-primary:hover {
    border-color: var(--color-teal-hover);
    color: var(--color-primary-fg);
    box-shadow: 0 var(--space-0-5) var(--space-2) var(--color-teal-ring), var(--shadow-xs);
}
.mc-btn-primary:active:not(:disabled):not(.disabled)::before {
    background: var(--gradient-primary-active);
    opacity: 1;
}
.mc-btn-primary:active:not(:disabled):not(.disabled) {
    border-color: var(--color-teal-active);
    box-shadow: none;
}

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

/* Danger */
.mc-btn-danger {
    background: var(--color-error);
    color: var(--color-white);
    border-color: var(--color-error);
    box-shadow: var(--shadow-xs);
}
.mc-btn-danger:hover {
    background: var(--color-error-dark);
    border-color: var(--color-error-dark);
    color: var(--color-white);
    box-shadow: 0 var(--space-0-5) var(--space-2) var(--color-error-ring), var(--shadow-xs);
}
.mc-btn-danger:active:not(:disabled):not(.disabled) {
    background: var(--color-error-dark);
    box-shadow: none;
}

/* 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-ghost:active:not(:disabled):not(.disabled) {
    background: var(--color-active-bg);
}
.mc-btn-danger-ghost {
    color: var(--color-error);
}
/* Was var(--color-error-light, rgba(231,76,60,.08)) — the token has never
   existed, so this always fell through to a hardcoded pre-mailkoo red. */
.mc-btn-danger-ghost:hover {
    background: var(--color-error-bg);
    color: var(--color-error);
}
.mc-btn-danger-ghost:active:not(:disabled):not(.disabled) {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
}

/* 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);
}
.mc-btn-muted:active:not(:disabled):not(.disabled) {
    background: var(--color-border);
}

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

/* Hover lift. Was --shadow-dropdown, which is tuned for a floating menu and
   read as far too much elevation for a card resting in the page flow.
   --shadow-md is one clear step above the card's resting --shadow-card. */
.mc-card-hover:hover,
a.mc-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}

a.mc-card {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
    transition: box-shadow var(--transition-fast),
                border-color var(--transition-fast),
                transform var(--transition-fast);
}
a.mc-card:active { transform: translateY(1px); }

/* 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);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    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: var(--tracking-wider);
    font-weight: var(--weight-semibold);
}

.mc-stat-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
}

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


/* ==========================================================================
   Loading Skeletons

   Every listing in the app renders a centred spinner while List.js fetches
   its partial, so the page collapses to a blank card and then snaps to full
   content. A skeleton preserves the layout's shape during the fetch, which
   removes the reflow jolt and makes the wait read as shorter.

   Usage:
     <div class="mc-skeleton mc-skeleton-text"></div>
     <div class="mc-skeleton mc-skeleton-circle" style="--sk-size:32px"></div>
     <div class="mc-skeleton" style="--sk-h:120px"></div>

   Composition helper for tables:
     <div class="mc-skeleton-table" data-rows="5"></div>  (rows via markup)
   ========================================================================== */

.mc-skeleton {
    display: block;
    width: var(--sk-w, 100%);
    height: var(--sk-h, var(--space-4));
    border-radius: var(--radius-sm);
    background-color: var(--color-active-bg);
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-hover-bg) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: mc-skeleton-sheen 1.4s ease-in-out infinite;
}

.mc-skeleton-text   { height: var(--space-3); border-radius: var(--radius-xs); }
.mc-skeleton-text-lg{ height: var(--space-4); border-radius: var(--radius-xs); }
.mc-skeleton-title  { height: var(--space-5); width: var(--sk-w, 40%); }
.mc-skeleton-circle {
    width: var(--sk-size, var(--space-8));
    height: var(--sk-size, var(--space-8));
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.mc-skeleton-btn { height: var(--space-9); width: var(--sk-w, 96px); border-radius: var(--radius-input); }

/* Stacked lines with a naturally short last line. */
.mc-skeleton-lines { display: flex; flex-direction: column; gap: var(--space-2); }
.mc-skeleton-lines > .mc-skeleton:last-child { width: 60%; }

/* Row scaffold matching .mc-table cell rhythm. */
.mc-skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-bottom: var(--space-px) solid var(--color-border);
}
.mc-skeleton-row:last-child { border-bottom: none; }
.mc-skeleton-row > .mc-skeleton { flex: 1; }

@keyframes mc-skeleton-sheen {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Respect reduced-motion: hold a static tint rather than pulsing. */
@media (prefers-reduced-motion: reduce) {
    .mc-skeleton {
        animation: none;
        background-image: none;
    }
}

/* ==========================================================================
   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);
    /* Was --weight-normal: a status badge sat at the same weight as body copy,
       so it read as inline text rather than a discrete token. */
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);
    line-height: 1.3;
    white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 3-up grid wrapper */
.mc-channel-status-card-grid {
    display: grid;
    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="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: var(--tracking-wider);
    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; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Code block */
.mc-code-block {
    /* Theme tokens for both: the background follows the theme, so the text must
       too (--color-text-inverse is undefined and fell back to a pale lavender). */
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    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); }
/* Hover feedback: inputs previously had no hover state at all, so a field
   gave no signal that it was interactive until focus. */
.mc-form-input:hover:not(:focus):not([readonly]):not(:disabled) {
    border-color: var(--color-text-disabled);
}
.mc-form-input:focus {
    border-color: var(--color-border-focus);
    box-shadow: var(--focus-ring);
}
.mc-form-input.is-invalid { border-color: var(--color-error); }
.mc-form-input.is-invalid:focus {
    box-shadow: var(--focus-ring-error);
}
.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);
    /* Chevron. The stroke colour is baked into the data-URI because a
       data-URI cannot read a CSS variable. It was previously a single warm
       grey (#6E655B) shared by every theme, which left the arrow as a muddy
       smudge on dark surfaces. Light and dark now each get a stroke tuned to
       their surface — see the [data-theme="dark"] override below. */
    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='%23667085' 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;
}
[data-theme="dark"] .mc-form-select,
[data-theme="dark"] .mc-card select {
    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='%238A94A6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.mc-form-select:hover:not(:focus):not(:disabled),
.mc-card select:hover:not(:focus):not(:disabled) {
    border-color: var(--color-text-disabled);
}
.mc-form-select:focus,
.mc-card select:focus {
    border-color: var(--color-border-focus);
    box-shadow: var(--focus-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);
}

/* Header. Was --weight-normal, which left column headings visually identical
   to cell content — the header row read as just another row. Semibold plus a
   subtle tracking gives the scan-line the table was missing. */
.mc-table thead th {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-wide);
    text-align: left;
    background: var(--color-subtle-bg);
    border-bottom: var(--space-px) solid var(--color-border);
    white-space: nowrap;
}

/* Cell padding.
   Vertical padding drops from 16px to 12px. Most rows in this product carry
   two lines (name plus a meta line), so 16px top and bottom pushed a row past
   70px and a single page of results no longer fit on a laptop screen. 12px
   keeps the row comfortably above the 44px touch target while restoring the
   density a data table is for. Horizontal padding is unchanged. */
.mc-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--space-px) solid var(--color-border);
    vertical-align: middle;
    font-size: var(--text-base);
}

/* Row hover. Data tables are scanned horizontally across many columns; a row
   tint is what keeps the eye on one record. Excluded for tables that opt out
   via .mc-table-static (e.g. read-only summaries inside cards). */
.mc-table:not(.mc-table-static) tbody tr {
    transition: background-color var(--transition-fast);
}
.mc-table:not(.mc-table-static) tbody tr:hover > td {
    background: var(--color-hover-bg);
}

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

/* Sticky header for long listings. Opt-in so short tables are unaffected. */
.mc-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* --- 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);
    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 */
.mc-alert-info {
    background: var(--color-info-bg);
    color: var(--color-info-dark);
}
.mc-alert-success {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
}
.mc-alert-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}
.mc-alert-danger {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
}
.mc-alert-teal {
    background: var(--color-teal-light);
    color: var(--color-teal);
}
.mc-alert-neutral {
    background: var(--color-hover-bg);
    color: var(--color-text-secondary);
}

/* ==========================================================================
   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); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); text-wrap: balance; }
.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(--gradient-primary); 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);
    pointer-events: auto;
    animation: mc-toast-in var(--transition-base) forwards;
    max-width: 340px;
    min-width: 220px;
}
.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
   ========================================================================== */

/* Local tokens — every popup (McPopup, McDialog, inline .mc-modal markup)
   reads these, so the whole family is tuned from one place. */
.mc-modal {
    --mc-modal-pad-x:     var(--space-6);
    --mc-modal-pad-y:     var(--space-6);
    --mc-modal-radius:    var(--radius-lg);
    --mc-modal-ring:      rgba(16, 24, 40, 0.06);
    --mc-modal-footer-bg: var(--color-page-bg);
    --mc-modal-ease:      cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] .mc-modal {
    --mc-modal-ring:      rgba(255, 255, 255, 0.07);
    --mc-modal-footer-bg: var(--color-subtle-bg);
}

.mc-modal-backdrop {
    position: fixed; inset: 0;
    background: var(--color-overlay);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal-backdrop);
    opacity: 0; transition: opacity 200ms ease;
}
.mc-modal-backdrop.active { opacity: 1; }
/* A closed popup is only transparent, not gone. Pages that keep their popup
   markup in the DOM would otherwise have every click land on it. */
.mc-modal-backdrop:not(.active),
.mc-modal:not(.active) { pointer-events: none; }

.mc-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, calc(-50% + 12px)) scale(0.98);
    z-index: var(--z-modal);
    background: var(--color-card-bg);
    border-radius: var(--mc-modal-radius);
    box-shadow: 0 0 0 1px var(--mc-modal-ring),
                0 24px 48px -12px rgba(16, 24, 40, 0.22),
                0 8px 16px -8px rgba(16, 24, 40, 0.10);
    max-width: 560px;
    width: calc(100% - var(--space-8));
    max-height: calc(100vh - var(--space-12));
    max-height: calc(100dvh - 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: opacity 180ms ease, transform 320ms var(--mc-modal-ease);
}
[data-theme="dark"] .mc-modal {
    box-shadow: 0 0 0 1px var(--mc-modal-ring),
                0 32px 64px -16px rgba(0, 0, 0, 0.75);
}
.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; overscroll-behavior: contain; }
.mc-modal.active { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.mc-modal-header {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-5) var(--mc-modal-pad-x);
    border-bottom: var(--space-px) solid var(--color-border);
    transition: box-shadow var(--transition-fast);
}
/* Soft edge under the header once the body is scrolled (set by Popup.js). */
.mc-modal.is-scrolled > .mc-modal-header { box-shadow: 0 1px 0 var(--color-border), 0 6px 12px -8px rgba(16, 24, 40, 0.18); }
.mc-modal-title {
    font-size: 1.0625rem; font-weight: var(--weight-semibold); color: var(--color-text);
    margin: 0; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug);
    min-width: 0; overflow-wrap: anywhere;
}
.mc-modal-close {
    flex-shrink: 0;
    width: 32px; height: 32px; margin: -4px -6px -4px 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--color-text-muted);
    cursor: pointer; padding: 0;
    border-radius: var(--radius-input);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mc-modal-close svg { width: 18px; height: 18px; }
.mc-modal-close:hover { background: var(--color-active-bg); color: var(--color-text); }
.mc-modal-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mc-modal-body {
    padding: var(--mc-modal-pad-y) var(--mc-modal-pad-x);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
.mc-modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
    padding: var(--space-4) var(--mc-modal-pad-x);
    border-top: var(--space-px) solid var(--color-border);
}
/* Footer as a direct child of the modal (static .mc-modal markup). The later
   in-body .mc-modal-footer rule must not reach it, hence the child selector. */
.mc-modal > .mc-modal-footer {
    margin: 0;
    padding: var(--space-4) var(--mc-modal-pad-x);
    background: var(--mc-modal-footer-bg);
}
.mc-modal-sm { max-width: 420px; }
.mc-modal-lg { max-width: 720px; }
.mc-modal-xl { max-width: 960px; }
.mc-modal-xxl { max-width: 1140px; }

/* --------------------------------------------------------------------------
   Popup form rhythm — applies to every form rendered inside a popup body.
   -------------------------------------------------------------------------- */
.mc-modal-body > .mc-alert:first-child,
.mc-modal-body > form > .mc-alert:first-child { margin-bottom: var(--space-5); }
.mc-modal-body .mc-form-group { margin-bottom: var(--space-5); }
.mc-modal-body .mc-form-label { margin-bottom: 6px; font-size: 0.8125rem; }
.mc-modal-body .mc-form-help,
.mc-modal-body .mc-form-hint {
    font-size: var(--text-sm); color: var(--color-text-muted);
    margin-top: 6px; line-height: 1.45;
}
.mc-modal-body .mc-form-error { margin-top: 6px; font-weight: var(--weight-medium); }

/* --------------------------------------------------------------------------
   Docked action bar. Popup views put their Cancel / Save row inside the body
   using one of three classes (.mc-confirm-actions, .mc-popup-footer,
   .mc-modal-footer). Popup.js tags the one that closes the content with
   .mc-modal-actions-docked; it becomes a full-bleed bar that sticks to the
   bottom of the scrolling body, so the primary action is always in reach.
   -------------------------------------------------------------------------- */
.mc-modal-body .mc-modal-actions-docked {
    position: sticky;
    bottom: calc(-1 * var(--mc-modal-pad-y));
    z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: var(--space-3);
    margin: var(--space-6) calc(-1 * var(--mc-modal-pad-x)) calc(-1 * var(--mc-modal-pad-y));
    padding: var(--space-4) var(--mc-modal-pad-x);
    background: var(--mc-modal-footer-bg);
    border-top: var(--space-px) solid var(--color-border);
    transition: box-shadow var(--transition-fast);
}
.mc-modal.is-overflowing .mc-modal-actions-docked {
    box-shadow: 0 -8px 16px -12px rgba(16, 24, 40, 0.22);
}
[data-theme="dark"] .mc-modal.is-overflowing .mc-modal-actions-docked {
    box-shadow: 0 -10px 20px -12px rgba(0, 0, 0, 0.8);
}
/* Keep a lone left-aligned element (e.g. "Back" link) on the left. */
.mc-modal-actions-docked > .mc-mr-auto,
.mc-modal-actions-docked > [data-popup-back] { margin-right: auto; }

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

    /* Phones: popups become a bottom sheet. */
    .mc-modal {
        --mc-modal-pad-x: var(--space-5);
        --mc-modal-pad-y: var(--space-5);
        top: auto; bottom: 0; left: 0;
        width: 100%;
        max-width: none !important;
        max-height: calc(100dvh - var(--space-6));
        border-radius: var(--mc-modal-radius) var(--mc-modal-radius) 0 0;
        transform: translateY(100%);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mc-modal.active { transform: translateY(0); }
    .mc-modal-body .mc-modal-actions-docked > .mc-btn { flex: 1 1 0; justify-content: center; }
}

/* 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;
    gap: 6px;
    /* Auto width since the buttons now carry a label; the old fixed 36px clipped
       it. min-width keeps the icon-only (collapsed) state from going ragged. */
    min-width: 36px;
    padding: 0 var(--space-2-5);
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.mc-preview-modal-device-label { white-space: nowrap; }

@media (max-width: 720px) {
    .mc-preview-modal-device-label { display: none; }
    .mc-preview-modal-device-btn { padding: 0; width: 36px; }
}
.mc-preview-modal-device-btn:hover { color: var(--color-text); }
.mc-preview-modal-device-btn.is-active {
    background: var(--color-card-bg);
    border-color: var(--color-teal);
    color: var(--color-teal);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mc-preview-modal-device-btn:focus-visible {
    outline: 2px solid var(--color-teal-ring);
    outline-offset: 2px;
}
.mc-preview-modal-cta,
.mc-preview-modal-actions {
    grid-column: 3;
    justify-self: end;
}
.mc-preview-modal-actions {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}
.mc-preview-modal-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.mc-preview-modal-action-icon {
    flex-shrink: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --- Topbar Language Button ------------------------------------------------ */
.mc-topbar-lang-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    /* Bordered by default, matching the icon chips in the same cluster. */
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-full);
    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-strong);
}
.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-strong);
}
.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));
    /* `visibility` is transitioned, so on close it stays `visible` for the whole
       150ms fade-out — during which the (invisible) panel still hit-tests and
       swallows clicks aimed at whatever sits under it, e.g. the page-header
       action button directly below the topbar icons. `pointer-events` is NOT
       transitionable, so it flips instantly and closes that window. */
    pointer-events: none;
    /* 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); pointer-events: auto; }

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

.mc-dropdown-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-base); color: var(--color-text);
    cursor: pointer; transition: background var(--transition-fast);
    text-decoration: none; border: none; background: none; width: 100%; text-align: left;
}
.mc-dropdown-item:hover { background: var(--color-hover-bg); color: var(--color-text); text-decoration: none; }
.mc-dropdown-item.danger { color: var(--color-error); }
.mc-dropdown-item.danger:hover { background: var(--color-error-bg); }
.mc-dropdown-divider { height: var(--space-px); background: var(--color-border); margin: var(--space-1) 0; }

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

.mc-theme-menu-header {
    padding: var(--space-2) var(--space-4) var(--space-1);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    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-icon.success { background: var(--color-success-bg); color: var(--color-success); }
.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; }

/* McDialog (confirm / alert) — a haloed icon, a clear title, and an action
   bar docked to the bottom with equal-width buttons. */
.mc-modal > .mc-confirm-body { padding: var(--space-8) var(--space-6) 0; }
.mc-modal > .mc-confirm-body .mc-confirm-icon {
    width: 52px; height: 52px; margin-bottom: var(--space-5);
    box-shadow: 0 0 0 8px color-mix(in srgb, currentColor 7%, transparent);
}
.mc-modal > .mc-confirm-body .mc-confirm-title {
    font-size: 1.0625rem; font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-snug); margin-bottom: var(--space-2);
}
.mc-modal > .mc-confirm-body .mc-confirm-text {
    font-size: 0.8125rem; line-height: 1.55; margin-bottom: 0;
    max-width: 34em; margin-left: auto; margin-right: auto;
}
.mc-modal > .mc-confirm-body .mc-confirm-text.mc-confirm-text-pre {
    white-space: pre-wrap; overflow-wrap: anywhere; text-align: left;
    max-height: 60vh; overflow-y: auto;
}
.mc-modal > .mc-confirm-body .mc-confirm-actions {
    gap: var(--space-3);
    margin: var(--space-6) calc(-1 * var(--space-6)) 0;
    padding: var(--space-4) var(--space-6);
    background: var(--mc-modal-footer-bg);
    border-top: var(--space-px) solid var(--color-border);
}
.mc-modal > .mc-confirm-body .mc-confirm-actions > .mc-btn { flex: 1 1 0; 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); }
/* Input has no outline; tint the search icon so focus stays visible. */
.mc-list-switcher-search:has(input:focus-visible) .material-symbols-rounded { color: var(--color-teal); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mc-banner-title {
    font-size: var(--banner-title-size);
    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(--banner-desc-size);
    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(--banner-meta-size);
    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(--banner-title-size-open);
    font-weight: var(--weight-black);
    margin-bottom: var(--space-2);
}
.mc-banner.mc-banner-open .mc-banner-desc {
    max-width: 540px;
    font-size: var(--banner-desc-size);
    margin-bottom: var(--space-4);
}
.mc-banner.mc-banner-open .mc-banner-illustration {
    width: 200px;
    height: 130px;
    opacity: 1;
}

@media (max-width: 767px) {
    /* Step the hero scale down one notch rather than restating each rule —
       the .mc-banner-* rules already read from these tokens. */
    .mc-banner {
        --banner-title-size:      var(--text-base);
        --banner-title-size-open: var(--text-lg);
        --banner-desc-size:       var(--text-sm);
    }
    .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); }
}

.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);
    /* Wrap rather than clip. The bar sits in a narrow grid column on the
       sidebar layouts (sending servers/domains), where the controls plus the
       right-aligned .mc-filter-meta exceed one row and used to overflow the
       card edge. Only engages on overflow, so single-row bars are unchanged. */
    flex-wrap: wrap;
    row-gap: var(--space-3);
}

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

/* Record stats sitting at the right end of a filter bar (campaigns list).
   Same read as .mc-banner-meta, minus that rule's banner-specific block
   spacing and type scale, which are wrong inside a single-row toolbar. */
.mc-filter-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
    /* Pushes the stats to the right end when they are a direct child of
       .mc-filter-bar. Resolves to 0 inside .mc-filter-actions (campaigns),
       which is content-sized and already right-aligned, so it is safe in both. */
    margin-left: auto;
}
.mc-filter-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.mc-filter-meta-item .material-symbols-rounded {
    font-size: var(--text-lg);
}
.mc-filter-meta-value {
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}

/* ==========================================================================
   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) */
/* Row title link.
   Was --color-teal, so every row's primary text rendered in full brand
   colour and a 25-row table became a wall of indigo competing with the
   page's actual call to action. The record name is the content, not an
   accent — it reads as text and reveals its link affordance on hover.
   This is how Linear, Stripe and Vercel treat list rows. */
.mc-list-item-name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.mc-list-item-name:hover { color: var(--color-teal); text-decoration: none; }
.mc-list-item-name:focus-visible {
    outline: var(--space-0-5) solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
.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);
}

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

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

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

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

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

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

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

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

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

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

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

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

/* ----------------------------------------------------------------
   Picker variant — used in template gallery selection (admin
   email-templates / form-templates create flows). Provides
   visual selected-state with check badge in top-right corner.
   ---------------------------------------------------------------- */
.mc-template-card--picker {
    cursor: pointer;
    position: relative;
    user-select: none;
}
.mc-template-card--picker:focus {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
}
.mc-template-card--picker.is-selected {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-ring),
                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);
    border-radius: var(--radius-input);
    text-decoration: none;
    transition: background 0.15s;
}
.mc-template-hover-preview:hover {
    background: var(--color-teal-ring);
    color: var(--color-teal);
    text-decoration: none;
}

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

/* Card hover lift + glow */
.mc-template-card--picker:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px var(--color-teal);
}
.mc-template-card--picker.is-selected:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10),
                0 0 0 3px var(--color-teal-ring),
                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(--gradient-primary);
    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);
    border-radius: var(--radius-input);
}
.mc-tab:hover {
    color: var(--color-text-primary);
}
.mc-tab.active {
    color: var(--color-teal);
    font-weight: var(--weight-medium);
    border-bottom-color: var(--color-teal);
}
.mc-tab .material-symbols-rounded {
    font-size: 16px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ================================================================
   Toggle row — settings toggle with label + description
   ================================================================ */
.mc-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    cursor: pointer;
    user-select: none;
}
.mc-toggle-row:hover {
    background: var(--color-bg-hover);
}
.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);
}
.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(--gradient-primary);
    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);
    /* Become visible immediately on open (still fades out on close) so the
       search box can take focus in the same tick. */
    transition: opacity .15s, transform .15s, visibility 0s;
}

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

/* Options/empty state hidden by the search filter ([hidden] loses to display:flex) */
.mc-rich-select-option[hidden],
.mc-rich-select-empty[hidden] {
    display: none;
}

/* Keyboard highlight */
.mc-rich-select-option.is-active {
    background: var(--color-hover-bg);
}
.mc-rich-select-option.selected.is-active {
    background: var(--color-teal-light);
    box-shadow: inset 2px 0 0 var(--color-teal);
}

/* Search box pinned to the top of a scrolling dropdown */
.mc-rich-select-search {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-card-bg);
    border-bottom: var(--space-px) solid var(--color-border);
}
.mc-rich-select-search .material-symbols-rounded {
    font-size: 18px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.mc-rich-select-search input {
    flex: 1;
    min-width: 0;
    height: var(--space-8);
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--text-sm);
    color: var(--color-text);
    outline: none;
}
.mc-rich-select-search input::placeholder { color: var(--color-text-disabled); }
/* Input has no outline; tint the search icon so focus stays visible. */
.mc-rich-select-search:has(input:focus-visible) .material-symbols-rounded { color: var(--color-teal); }

/* Read-only trigger (e.g. a type that can't change after creation) */
.mc-rich-select-trigger:disabled {
    background: var(--color-hover-bg);
    cursor: not-allowed;
}
.mc-rich-select-trigger:disabled:hover {
    border-color: var(--color-border-strong);
}
.mc-rich-select-trigger:disabled .mc-rich-select-arrow {
    visibility: hidden;
}

/* Brand logo in the option icon box — contain, never crop */
.mc-rich-select-option-icon.has-logo {
    background: #fff;
    border: var(--space-px) solid var(--color-border);
    padding: 3px;
}
.mc-rich-select-option-icon.has-logo img {
    object-fit: contain;
    border-radius: 0;
}

/* Letter badge when there is no logo */
.mc-rich-select-monogram {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-teal-light);
    color: var(--color-teal);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
}

/* Large variant — full input height, selected icon in the trigger, taller panel */
.mc-rich-select-lg .mc-rich-select-trigger {
    height: var(--input-height);
    padding: 0 var(--space-3) 0 var(--space-3-5);
    gap: var(--space-2-5);
}
.mc-rich-select-lg .mc-rich-select-trigger-icon {
    width: 24px;
    height: 24px;
    padding: 2px;
    flex-shrink: 0;
}
.mc-rich-select-lg .mc-rich-select-trigger-icon:empty {
    display: none;
}
.mc-rich-select-lg .mc-rich-select-trigger-icon .mc-rich-select-monogram {
    font-size: var(--text-xs);
}
.mc-rich-select-lg .mc-rich-select-dropdown {
    max-height: min(360px, 50vh);
}
.mc-rich-select-lg .mc-rich-select-option,
.mc-rich-select-lg-panel .mc-rich-select-option {
    padding: var(--space-2-5) var(--space-3-5);
}

/* Floating dropdown — moved to <body> while open (data-rich-select-floating) so a
   modal body's overflow can't clip it. JS sets top/bottom/left/width/max-height. */
.mc-rich-select-dropdown.is-floating {
    position: fixed;
    right: auto;
    z-index: calc(var(--z-modal) + 10);
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .15s, visibility 0s;
}

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

/* The base rule drops the outline; keep a visible keyboard focus. */
.mc-color-scheme-card:focus-visible {
    border-color: var(--color-teal);
    box-shadow: var(--focus-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) ---
   These preview the scheme in the picker, so they must track the actual
   --color-teal* values each scheme sets in variables.css. Each row is that
   scheme's 800 / 600 / 400 / 200 / 50 step. */
.mc-color-scheme-card[data-color-scheme="default"] .s1 { background: #3730A3; }
.mc-color-scheme-card[data-color-scheme="default"] .s2 { background: #4F46E5; }
.mc-color-scheme-card[data-color-scheme="default"] .s3 { background: #8286F8; }
.mc-color-scheme-card[data-color-scheme="default"] .s4 { background: #C7CBFE; }
.mc-color-scheme-card[data-color-scheme="default"] .s5 { background: #EEF0FF; }

.mc-color-scheme-card[data-color-scheme="blue"] .s1 { background: #194185; }
.mc-color-scheme-card[data-color-scheme="blue"] .s2 { background: #175CD3; }
.mc-color-scheme-card[data-color-scheme="blue"] .s3 { background: #2E90FA; }
.mc-color-scheme-card[data-color-scheme="blue"] .s4 { background: #84CAFF; }
.mc-color-scheme-card[data-color-scheme="blue"] .s5 { background: #EFF8FF; }

.mc-color-scheme-card[data-color-scheme="green"] .s1 { background: #05603A; }
.mc-color-scheme-card[data-color-scheme="green"] .s2 { background: #079455; }
.mc-color-scheme-card[data-color-scheme="green"] .s3 { background: #17B26A; }
.mc-color-scheme-card[data-color-scheme="green"] .s4 { background: #75E0A7; }
.mc-color-scheme-card[data-color-scheme="green"] .s5 { background: #ECFDF3; }

.mc-color-scheme-card[data-color-scheme="brown"] .s1 { background: #7A2E0E; }
.mc-color-scheme-card[data-color-scheme="brown"] .s2 { background: #B54708; }
.mc-color-scheme-card[data-color-scheme="brown"] .s3 { background: #F79009; }
.mc-color-scheme-card[data-color-scheme="brown"] .s4 { background: #FEC84B; }
.mc-color-scheme-card[data-color-scheme="brown"] .s5 { background: #FFFAEB; }

.mc-color-scheme-card[data-color-scheme="pink"] .s1 { background: #851651; }
.mc-color-scheme-card[data-color-scheme="pink"] .s2 { background: #C11574; }
.mc-color-scheme-card[data-color-scheme="pink"] .s3 { background: #EE46BC; }
.mc-color-scheme-card[data-color-scheme="pink"] .s4 { background: #F670C7; }
.mc-color-scheme-card[data-color-scheme="pink"] .s5 { background: #FDF2FA; }

.mc-color-scheme-card[data-color-scheme="grey"] .s1 { background: #0C111D; }
.mc-color-scheme-card[data-color-scheme="grey"] .s2 { background: #182230; }
.mc-color-scheme-card[data-color-scheme="grey"] .s3 { background: #475467; }
.mc-color-scheme-card[data-color-scheme="grey"] .s4 { background: #98A2B3; }
.mc-color-scheme-card[data-color-scheme="grey"] .s5 { background: #F2F4F7; }

.mc-color-scheme-card[data-color-scheme="white"] .s1 { background: #182230; }
.mc-color-scheme-card[data-color-scheme="white"] .s2 { background: #475467; }
.mc-color-scheme-card[data-color-scheme="white"] .s3 { background: #98A2B3; }
.mc-color-scheme-card[data-color-scheme="white"] .s4 { background: #D0D5DD; }
.mc-color-scheme-card[data-color-scheme="white"] .s5 { background: #F9FAFB; }

/* ═══════════════════════════════════════════════════════════════
   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(--gradient-primary);
    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);
}

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

/* 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;
    align-items: baseline;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.mc-import-progress-stats span:last-child {
    font-weight: var(--weight-semibold);
    color: var(--color-teal);
}

.mc-import-progress-msg {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-top: var(--space-3);
}

.mc-import-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.mc-import-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-subtle-bg);
}

.mc-import-stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.mc-import-stat-label {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.mc-import-stat--success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}
.mc-import-stat--success .mc-import-stat-value { color: var(--color-success); }

.mc-import-stat--warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
}
.mc-import-stat--warning .mc-import-stat-value { color: var(--color-warning); }

.mc-import-stat--danger {
    background: var(--color-error-bg);
    border-color: var(--color-error-border);
}
.mc-import-stat--danger .mc-import-stat-value { color: var(--color-error); }

.mc-import-summary-note {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin: var(--space-3) 0 0;
    line-height: 1.5;
}

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

.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: var(--tracking-wider);
    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: var(--tracking-wider);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

/* Responsive */
@media (max-width: 900px) {
    .api-docs-layout {
        grid-template-columns: 1fr;
    }

    .api-docs-sidebar {
        position: static;
        max-height: none;
    }

    .api-docs-sidebar-inner {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);
        padding: var(--space-2);
    }

    .api-nav-divider,
    .api-nav-group-label {
        display: none;
    }

    .api-nav-item {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-xs);
    }

    .api-endpoint-summary {
        grid-template-columns: auto 1fr auto;
    }

    .api-endpoint-desc {
        display: none;
    }
}

@media (max-width: 600px) {
    .api-endpoint-summary {
        grid-template-columns: auto 1fr auto;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }

    .api-endpoint-uri code {
        font-size: var(--text-xs);
        word-break: break-all;
    }

    .api-base-url code {
        font-size: var(--text-sm);
    }

    .api-endpoint-detail {
        padding: 0 var(--space-3) var(--space-3);
    }

    .mc-code-block {
        font-size: 11px;
    }

    .api-getting-started-block .mc-code-block {
        word-break: break-all;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile UX — Global mobile fixes (≤767px only)
   All rules here ONLY affect mobile. No desktop/tablet changes.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* --- mc-table: Card layout on mobile --- */
    .mc-table-mobile-cards thead { display: none; }
    .mc-table-mobile-cards tbody { display: flex; flex-direction: column; gap: var(--space-2); }
    .mc-table-mobile-cards { width: 100%; max-width: 100%; table-layout: fixed; }
    .mc-table-mobile-cards tr {
        display: flex;
        flex-direction: column;
        background: var(--color-card-bg);
        border: var(--space-px) solid var(--color-border);
        border-radius: var(--radius-card);
        padding: var(--space-3);
        gap: var(--space-1);
        max-width: 100%;
        box-sizing: border-box;
    }
    .mc-table-mobile-cards td {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        padding: var(--space-1) 0;
        border: none;
    }
    .mc-table-mobile-cards td::before {
        content: attr(data-label);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 100px;
        flex-shrink: 0;
    }
    .mc-table-mobile-cards td:empty { display: none; }

    /* Mobile card: first td (usually name/title) gets emphasis */
    .mc-table-mobile-cards td.mc-mobile-title {
        font-size: var(--text-base);
        font-weight: var(--weight-semibold);
        color: var(--color-text);
        padding-bottom: var(--space-1);
        border-bottom: var(--space-px) solid var(--color-border);
        margin-bottom: var(--space-1);
    }
    .mc-table-mobile-cards td.mc-mobile-title::before { display: none; }

    /* Mobile card: action row */
    .mc-table-mobile-cards td.mc-mobile-actions {
        display: flex;
        gap: var(--space-2);
        padding-top: var(--space-2);
        border-top: var(--space-px) solid var(--color-border);
        margin-top: var(--space-1);
        flex-wrap: wrap;
    }
    .mc-table-mobile-cards td.mc-mobile-actions::before { display: none; }

    /* Mobile card: hide checkbox column */
    .mc-table-mobile-cards td.mc-mobile-check { display: none; }

    /* Mobile card: stats row — show delivered/opens/clicks inline */
    .mc-table-mobile-cards td[data-label]::before {
        min-width: 70px;
    }

    /* Mobile card: ring charts smaller */
    .mc-table-mobile-cards .mc-ring { width: 24px; height: 24px; }

    /* Mobile card: button group full-width */
    .mc-table-mobile-cards .mc-btn-group { width: 100%; }
    .mc-table-mobile-cards .mc-btn-group-main { flex: 1; justify-content: center; }

    /* --- mc-card-table: horizontal scroll indicator shadow --- */
    .mc-card-table {
        position: relative;
    }
    .mc-card-table::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--space-6);
        background: linear-gradient(to left, var(--color-card-bg) 0%, transparent 100%);
        pointer-events: none;
        opacity: 0.8;
    }

    /* --- mc-filter-bar: stack search + filters vertically --- */
    .mc-filter-bar,
    .mc-list-header {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .mc-filter-search,
    .mc-list-search {
        width: 100%;
        max-width: none;
    }

    /* --- mc-stat-grid: 2-column on mobile --- */
    .mc-stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
        margin-bottom: var(--space-6);
    }

    /* --- mc-banner: reduce padding on mobile --- */
    .mc-banner-content { padding: var(--space-4); }

    /* --- mc-settings-layout: ensure content padding reduced --- */
    .mc-settings-content { padding: var(--space-4); }

    /* --- Two-column content layouts: single column --- */
    .mc-two-col,
    .mc-grid-2 {
        grid-template-columns: 1fr;
    }

    /* --- Dropdowns in tables: fixed position to escape overflow --- */
    .mc-card-table .mc-dropdown-menu,
    .mc-table .mc-dropdown-menu {
        position: fixed;
        top: auto;
        right: var(--space-3);
        min-width: 200px;
        z-index: var(--z-dropdown);
    }

    /* --- mc-card: reduce padding on mobile --- */
    .mc-card { border-radius: var(--radius-input); }
    .mc-card-body { padding: var(--space-4); }
    .mc-card-header { padding: var(--space-3) var(--space-4); }

    /* --- Modals / Side panels: already full-width via side-panel.css --- */

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

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

.mc-form-list-thumb-placeholder .material-symbols-rounded { font-size: 28px; }

.mc-form-list-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mc-form-list-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-form-list-name {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-form-list-name:hover { color: var(--color-teal); }

.mc-form-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.mc-form-list-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.mc-form-list-meta-item .material-symbols-rounded { font-size: 16px; }

.mc-form-list-meta-connected {
    color: var(--color-teal);
}

.mc-form-list-meta-disconnected {
    color: var(--color-text-disabled);
    font-style: italic;
}

.mc-form-grid-meta-connected {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--color-teal);
    font-size: var(--text-xs);
}

.mc-form-grid-meta-connected .material-symbols-rounded { font-size: 14px; }

.mc-form-grid-meta-disconnected {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--color-text-disabled);
    font-size: var(--text-xs);
    font-style: italic;
}

.mc-form-grid-meta-disconnected .material-symbols-rounded { font-size: 14px; }

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

.mc-form-list-edit-btn {
    white-space: nowrap;
}

/* ----------------------------------------------------------------
   mc-form-grid — Grid/card view for forms (thumbnail gallery)
   ---------------------------------------------------------------- */
.mc-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
}

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

.mc-form-grid-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--color-card-bg);
    display: flex;
    flex-direction: column;
}

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

.mc-form-grid-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 3;
    background: var(--color-hover-bg);
    overflow: hidden;
    display: block;
}

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

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

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

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

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

.mc-form-grid-info {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: relative;
}

.mc-form-grid-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.mc-form-grid-name:hover { color: var(--color-teal); }

.mc-form-grid-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mc-form-grid-meta .material-symbols-rounded { font-size: 14px; }

.mc-form-grid-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

/* ----------------------------------------------------------------
   mc-form-list — Mobile responsive
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
    .mc-form-list-row {
        flex-wrap: wrap;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }

    .mc-form-list-thumb {
        width: 56px;
        height: 42px;
    }

    .mc-form-list-edit-btn { display: none; }

    .mc-form-list-meta {
        gap: var(--space-2);
    }

    .mc-form-list-meta-item { font-size: var(--text-xs); }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile UX — Extra small screens (≤375px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 375px) {
    .mc-stat-grid { grid-template-columns: 1fr; }

    .mc-color-scheme-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Mask Loading — Fullscreen overlay (automation actions)
   ═══════════════════════════════════════════════════════════════ */

.mc-mask-loading {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.mc-mask-loading.active { opacity: 1; }
.mc-mask-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.mc-mask-loading-text {
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 500;
}

[data-theme="dark"] .mc-mask-loading {
    background: rgba(0, 0, 0, 0.55);
}

/* ═══════════════════════════════════════════════════════════════
   Box Skeleton Loading — McBox inline content loader
   ═══════════════════════════════════════════════════════════════ */

.mc-box-loading {
    position: relative;
    min-height: 80px;
}
.mc-box-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
    padding: var(--space-4);
}
.mc-skeleton-line {
    height: 12px;
    border-radius: var(--radius-sm);
    background: var(--color-border);
    animation: mc-skeleton-pulse 1.5s ease-in-out infinite;
}
.mc-skeleton-line-lg { width: 85%; height: 14px; }
.mc-skeleton-line-md { width: 65%; }
.mc-skeleton-line-sm { width: 40%; }

@keyframes mc-skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════
   ADS COMPONENTS — Phase A-M Ads Campaign Module (2026-04-11)
   Docs: docs/ui-refactor/UI.md
   Showcase: /rui/ui section #ads-components
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. mc-wizard-steps ─────────────────────────────────────────
   Generic multi-step wizard indicator. Used in ads campaign wizard
   + any future multi-step flow. Different from mc-sub-wizard-steps
   which is specific to subscription checkout.
   ─────────────────────────────────────────────────────────────── */
.mc-wizard-steps {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3) 0;
}
.mc-wizard-steps .mc-wizard-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-input);
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.mc-wizard-steps .mc-wizard-step.is-active {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: #fff;
    box-shadow: 0 0 0 3px var(--color-teal-ring);
}
.mc-wizard-steps .mc-wizard-step.is-done {
    background: var(--color-success-bg);
    border-color: var(--color-border);
}
/* L108 fix — when a step is BOTH `is-active` AND `is-done` (= current step is
   the final celebration step), the `is-done` rule was clobbering `is-active`'s
   white text on top of a light bg, resulting in white-on-light contrast
   failure. Explicit rule pins this combo to a solid-green active-success state. */
.mc-wizard-steps .mc-wizard-step.is-active.is-done {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 25%, transparent);
}
.mc-wizard-steps .mc-wizard-step.is-active.is-done .mc-wizard-step-number,
.mc-wizard-steps .mc-wizard-step.is-active.is-done .mc-wizard-step__num {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.mc-wizard-step-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    flex-shrink: 0;
}
.mc-wizard-steps .mc-wizard-step.is-active .mc-wizard-step-number {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.mc-wizard-steps .mc-wizard-step.is-done .mc-wizard-step-number {
    background: var(--color-success);
    color: #fff;
}
.mc-wizard-step-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}
.mc-wizard-step-connector {
    flex: 0 0 20px;
    height: 2px;
    background: var(--color-border);
    border-radius: 1px;
}
.mc-wizard-step-connector.is-done {
    background: var(--color-success);
}
/* mobile: wrap wizard steps, hide labels */
@media (max-width: 767px) {
    .mc-wizard-steps { gap: var(--space-1-5); }
    .mc-wizard-steps .mc-wizard-step { padding: var(--space-1-5) var(--space-2); }
    .mc-wizard-step-label { display: none; }
    .mc-wizard-steps .mc-wizard-step.is-active .mc-wizard-step-label { display: inline; font-size: var(--text-xs); }
    .mc-wizard-step-connector { flex-basis: 8px; }
}

/* ── 2. mc-ads-pipeline ─────────────────────────────────────────
   Horizontal status pipeline showing campaign lifecycle:
   draft → review → active → completed. Current stage highlighted.
   ─────────────────────────────────────────────────────────────── */
.mc-ads-pipeline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.mc-ads-pipeline-stage {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s;
}
.mc-ads-pipeline-stage.is-done {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success-dark);
}
.mc-ads-pipeline-stage.is-done::before {
    content: '✓';
    font-weight: var(--weight-bold);
    color: var(--color-success);
}
.mc-ads-pipeline-stage.is-current {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: #fff;
    font-weight: var(--weight-semibold);
    box-shadow: 0 0 0 4px var(--color-teal-ring);
    transform: scale(1.05);
}
.mc-ads-pipeline-arrow {
    color: var(--color-border-strong);
    font-size: var(--text-md);
    flex-shrink: 0;
    user-select: none;
}
.mc-ads-pipeline-arrow.is-done {
    color: var(--color-success);
}
@media (max-width: 767px) {
    .mc-ads-pipeline { padding: var(--space-3) 0; }
    .mc-ads-pipeline-stage { padding: var(--space-1-5) var(--space-3); font-size: var(--text-xs); }
}

/* ── 3. mc-ads-device-mockup ────────────────────────────────────
   Frame showing ad preview inside a phone/desktop mockup.
   Supports `mc-ads-device-mockup--phone` and `--desktop` variants.
   ─────────────────────────────────────────────────────────────── */
.mc-ads-device-mockup {
    display: inline-block;
    padding: var(--space-3);
    background: #222;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    position: relative;
}
.mc-ads-device-mockup--phone {
    width: 280px;
    border-radius: 28px;
    padding: 48px var(--space-2) var(--space-4);
}
.mc-ads-device-mockup--phone::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 18px;
    background: #000;
    border-radius: 10px;
}
.mc-ads-device-mockup--desktop {
    width: 480px;
    border-radius: 12px 12px 6px 6px;
    padding: var(--space-3) var(--space-3) var(--space-6);
}
.mc-ads-device-mockup--desktop::before {
    content: '';
    display: block;
    height: 12px;
    background: #333;
    border-radius: 6px 6px 0 0;
    margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-2);
    background-image: radial-gradient(circle at 10px 6px, #ff5f57 3px, transparent 3.5px),
        radial-gradient(circle at 24px 6px, #febc2e 3px, transparent 3.5px),
        radial-gradient(circle at 38px 6px, #28c840 3px, transparent 3.5px);
}
.mc-ads-device-screen {
    background: var(--color-card-bg);
    border-radius: 14px;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    flex-direction: column;
}
.mc-ads-device-mockup--desktop .mc-ads-device-screen {
    border-radius: 4px;
    min-height: 280px;
}
@media (max-width: 767px) {
    .mc-ads-device-mockup--phone { width: 240px; }
    .mc-ads-device-mockup--desktop { width: 100%; max-width: 400px; }
}

/* ── 4. mc-ads-spend-counter ────────────────────────────────────
   Large animated spend counter with currency + sparkline slot.
   ─────────────────────────────────────────────────────────────── */
.mc-ads-spend-counter {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border-radius: var(--radius-card, 8px);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}
.mc-ads-spend-counter-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
}
.mc-ads-spend-counter-value {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    font-size: var(--text-3xl);
    font-weight: var(--weight-black);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.mc-ads-spend-counter-currency {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}
.mc-ads-spend-counter-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--space-0-5) var(--space-2);
    border-radius: 999px;
    background: var(--color-success-bg);
    color: var(--color-success-dark);
    width: fit-content;
}
.mc-ads-spend-counter-delta.is-negative {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
}
.mc-ads-spend-counter-sparkline {
    margin-top: var(--space-2);
    height: 40px;
    width: 100%;
}
@media (max-width: 767px) {
    .mc-ads-spend-counter { padding: var(--space-4); }
    .mc-ads-spend-counter-value { font-size: var(--text-2xl); }
}

/* ── 5. mc-ads-race-chart ───────────────────────────────────────
   Horizontal race bars for A/B variant comparison.
   Uses --chart-N tokens for variant colors.
   ─────────────────────────────────────────────────────────────── */
.mc-ads-race-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}
.mc-ads-race-row {
    display: grid;
    grid-template-columns: 120px 1fr 80px;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
}
.mc-ads-race-label {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.mc-ads-race-label-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mc-ads-race-track {
    height: 28px;
    background: var(--color-subtle-bg);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.mc-ads-race-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(.2,.8,.2,1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--space-3);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    min-width: 2px;
}
.mc-ads-race-value {
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    text-align: right;
}
.mc-ads-race-row.is-winner .mc-ads-race-label::after {
    content: '★';
    color: var(--chart-4);
    font-size: var(--text-md);
}
@media (max-width: 767px) {
    .mc-ads-race-row { grid-template-columns: 80px 1fr 60px; gap: var(--space-2); font-size: var(--text-xs); }
    .mc-ads-race-track { height: 22px; }
}

/* ── 6. mc-ads-flow-node ────────────────────────────────────────
   Trigger → Condition → Action nodes for automation builder.
   Connects via mc-ads-flow-arrow between nodes.
   ─────────────────────────────────────────────────────────────── */
.mc-ads-flow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-4);
}
.mc-ads-flow-node {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card, 8px);
    background: var(--color-card-bg);
    border: 2px solid var(--color-border);
    min-width: 140px;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s, transform 0.15s;
}
.mc-ads-flow-node:hover {
    transform: translateY(-1px);
}
.mc-ads-flow-node--trigger {
    border-color: var(--chart-1);
    background: color-mix(in srgb, var(--chart-1) 8%, var(--color-card-bg));
}
.mc-ads-flow-node--condition {
    border-color: var(--chart-4);
    background: color-mix(in srgb, var(--chart-4) 8%, var(--color-card-bg));
}
.mc-ads-flow-node--action {
    border-color: var(--chart-2);
    background: color-mix(in srgb, var(--chart-2) 8%, var(--color-card-bg));
}
.mc-ads-flow-node-type {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
}
.mc-ads-flow-node-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}
.mc-ads-flow-node-icon {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-card-bg);
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.mc-ads-flow-node--trigger .mc-ads-flow-node-icon { color: var(--chart-1); }
.mc-ads-flow-node--condition .mc-ads-flow-node-icon { color: var(--chart-4); }
.mc-ads-flow-node--action .mc-ads-flow-node-icon { color: var(--chart-2); }
.mc-ads-flow-arrow {
    flex-shrink: 0;
    color: var(--color-border-strong);
    font-size: var(--text-xl);
    user-select: none;
}
@media (max-width: 767px) {
    .mc-ads-flow { flex-direction: column; align-items: stretch; }
    .mc-ads-flow-node { min-width: 0; }
    .mc-ads-flow-arrow { transform: rotate(90deg); align-self: center; }
}

/* ── 7. mc-ads-field-mapper ─────────────────────────────────────
   Two-column field mapping with visual connectors.
   Used in lead form sync (platform fields ↔ subscriber fields).
   ─────────────────────────────────────────────────────────────── */
.mc-ads-field-mapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
}
.mc-ads-field-mapper-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-ads-field-mapper-header {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
}
.mc-ads-field-mapper-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    transition: border-color 0.15s, background 0.15s;
}
.mc-ads-field-mapper-item.is-mapped {
    background: color-mix(in srgb, var(--color-teal) 6%, var(--color-card-bg));
    border-color: var(--color-teal);
}
.mc-ads-field-mapper-item .mc-ads-field-mapper-icon {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.mc-ads-field-mapper-connectors {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: var(--space-4) 0;
    position: relative;
}
.mc-ads-field-mapper-connector {
    width: 40px;
    height: 2px;
    background: var(--color-border-strong);
    position: relative;
}
.mc-ads-field-mapper-connector.is-mapped {
    background: var(--color-teal);
}
.mc-ads-field-mapper-connector::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border-strong);
    transform: translateY(-50%);
}
.mc-ads-field-mapper-connector.is-mapped::before {
    background: var(--color-teal);
}
.mc-ads-field-mapper-connector::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border-strong);
    transform: translateY(-50%);
}
.mc-ads-field-mapper-connector.is-mapped::after {
    background: var(--color-teal);
}
@media (max-width: 767px) {
    .mc-ads-field-mapper {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    .mc-ads-field-mapper-connectors {
        flex-direction: row;
        padding: var(--space-2) 0;
    }
    .mc-ads-field-mapper-connector {
        width: 2px;
        height: 30px;
    }
}

/* End ads components */

/* ═══════════════════════════════════════════════════════════════
   Common table cell helpers — used widely across listings
   Added: 2026-04-11 to formalize patterns used in 25+ _list views
   ═══════════════════════════════════════════════════════════════ */

/* Table cell main link — primary entity name in a list row */
.mc-table-link {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: color 0.15s;
}
.mc-table-link:hover {
    color: var(--color-teal);
}

/* Badge group — multiple badges in a single cell */
.mc-badge-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════
   Platform connection cards — used by Ads / integrations pages
   ═══════════════════════════════════════════════════════════════ */
.mc-platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}
.mc-platform-card {
    transition: border-color 0.15s, box-shadow 0.15s;
}
.mc-platform-card:hover {
    border-color: var(--color-teal);
}
.mc-platform-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.mc-platform-card-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-platform-card-logo .material-symbols-rounded {
    font-size: 28px;
    color: var(--color-text);
}
.mc-platform-card-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.mc-platform-card-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-platform-card-title .mc-badge {
    align-self: flex-start;
}
.mc-platform-card-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.mc-platform-card-meta > div {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-platform-card-meta .material-symbols-rounded {
    font-size: 16px;
}
.mc-platform-card-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.mc-platform-card-actions .mc-btn {
    flex: 1;
    min-width: 0;
}
.mc-platform-card--connect,
.mc-platform-card--locked {
    text-decoration: none;
    color: inherit;
    border: 1px dashed var(--color-border);
    display: flex;
}
.mc-platform-card--connect:hover {
    border-color: var(--color-teal);
    border-style: solid;
}
.mc-platform-card--locked {
    opacity: 0.65;
    cursor: not-allowed;
}
.mc-platform-card--connect-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-6);
    width: 100%;
}
.mc-platform-card--connect-icon {
    font-size: 40px !important;
    color: var(--color-teal);
}
.mc-platform-card--locked .mc-platform-card--connect-icon {
    color: var(--color-text-muted);
}
.mc-platform-card--connect-label {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-platform-card--connect-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Adoption bar — admin ads dashboard */
.mc-adoption-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.mc-adoption-percent {
    font-size: 31.5px;
    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: var(--tracking-wider);
    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: var(--gradient-primary);
    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 sub-options accordion +
   illustrated learn-more guide popup'. See /rui/ui showcase entries
   #feature-card and #feature-guide for canonical markup.
   ═══════════════════════════════════════════════════════════════ */
/* ── F8.4 Features tab — flag cards + sub-options accordion ───────── */
.mc-features-section-header {
    display: block;
    margin-bottom: var(--space-5);
}

.mc-features-section-header .mc-settings-section-title {
    margin: 0 0 var(--space-2);
    line-height: 1.25;
}

.mc-features-section-header .mc-settings-section-desc {
    margin: 0;
    line-height: 1.55;
    max-width: 720px;
}

.mc-features-master-off-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.mc-features-master-off-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.mc-features-master-off-title {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.mc-features-form.is-globally-off .mc-features-grid {
    opacity: 0.6;
    pointer-events: none;
}

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

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

.mc-feature-card.is-enabled {
    border-color: var(--color-border);
}

.mc-feature-card.is-disabled {
    background: var(--color-bg-subtle);
}

.mc-feature-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

.mc-feature-card-illust {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-1);
    transition: opacity 0.15s ease;
}

.mc-feature-card-illust svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mc-feature-card.is-disabled .mc-feature-card-illust {
    opacity: 0.5;
}

.mc-feature-card-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.mc-feature-card-title {
    font-size: var(--text-md);
    font-weight: 600;
    margin: 0 0 var(--space-1);
    color: var(--color-text);
    line-height: 1.35;
}

.mc-feature-card.is-disabled .mc-feature-card-title {
    color: var(--color-text-muted);
}

.mc-feature-card-desc {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    max-width: 640px;
}

.mc-feature-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.mc-feature-card-default-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

.mc-feature-card-default-badge.is-on {
    color: var(--color-teal);
    border-color: var(--color-teal-light);
    background: var(--color-teal-light);
}

.mc-feature-card-learnmore {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-link);
    text-decoration: none;
    font-weight: 500;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.mc-feature-card-learnmore:hover {
    text-decoration: underline;
}

.mc-feature-card-learnmore:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.mc-feature-card-toggle {
    flex-shrink: 0;
    margin-top: var(--space-1);
}

.mc-feature-card-suboptions {
    border-top: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-5) var(--space-4);
}

.mc-feature-card-suboptions-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 0;
    background: transparent;
    color: var(--color-text-link);
    font-size: var(--text-xs);
    font-weight: 500;
    padding: var(--space-2) 0;
    cursor: pointer;
}

.mc-feature-card-suboptions-icon {
    display: inline-block;
    transition: transform 0.15s ease;
}

.mc-feature-card-suboptions-toggle[aria-expanded="true"] .mc-feature-card-suboptions-icon {
    transform: rotate(90deg);
}

.mc-feature-card-suboptions-toggle[aria-expanded="false"] .mc-feature-card-suboptions-label-hide,
.mc-feature-card-suboptions-toggle[aria-expanded="true"] .mc-feature-card-suboptions-label-show {
    display: none;
}

.mc-feature-card-suboptions-help {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin: 0 0 var(--space-3);
    line-height: 1.5;
}

.mc-feature-card-suboptions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3) var(--space-4);
}

.mc-feature-card-suboption {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mc-feature-card-suboption-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text);
}

.mc-feature-card-suboption-input {
    max-width: 160px;
}

.mc-feature-card-suboption-help {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.mc-features-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
    .mc-feature-card-head {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    .mc-feature-card-illust {
        width: 48px;
        height: 48px;
    }
    .mc-feature-card-toggle {
        margin-left: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-feature-card,
    .mc-feature-card-suboptions-icon {
        transition: none;
    }
}

/* ── F8.4 follow-up: Learn-more guide popup ───────────────────────── */
.mc-feature-guide {
    padding: 0;
    color: var(--color-text);
}

.mc-feature-guide-hero {
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
        var(--color-teal-light) 0%,
        var(--illust-bg) 100%);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    overflow: hidden;
}

.mc-feature-guide-hero svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
}

.mc-feature-guide-title {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}

.mc-feature-guide-tagline {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-5);
    line-height: 1.55;
    max-width: 640px;
}

.mc-feature-guide-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.mc-feature-guide-section h3 {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    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); }
.rui-inv-side-icon-green { color: var(--color-success, #2e9c5d); }

.rui-inv-side-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rui-inv-side-empty {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: var(--space-2) 0;
}

.rui-inv-side-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.rui-inv-side-num {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.1;
}
.rui-inv-side-num-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.rui-inv-side-foot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.rui-inv-side-foot-icon { font-size: 14px !important; }

.rui-inv-side-delta-up   { color: var(--color-success, #2e9c5d); }
.rui-inv-side-delta-down { color: var(--color-error, #d14d4d); }
.rui-inv-side-delta-flat { color: var(--color-text-muted); }

/* Failed payments + general list inside a sidebar card */
.rui-inv-side-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-inv-side-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
}
.rui-inv-side-list-item:first-child { border-top: 0; }
.rui-inv-side-list-main { min-width: 0; flex: 1 1 auto; }
.rui-inv-side-list-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.rui-inv-side-list-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 1px;
}
.rui-inv-side-list-err {
    font-size: var(--text-xs);
    color: var(--color-error, #d14d4d);
    margin-top: 2px;
    line-height: 1.3;
}
.rui-inv-side-list-amount {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
}

/* Top customers ranked list */
.rui-inv-side-rank {
    display: grid;
    grid-template-columns: 18px 32px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
}
.rui-inv-side-rank:first-child { border-top: 0; }
.rui-inv-side-rank-num {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    text-align: center;
}
.rui-inv-side-rank-main { min-width: 0; }
.rui-inv-side-rank-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.rui-inv-side-rank-name:hover { color: var(--color-teal); }
.rui-inv-side-rank-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.rui-inv-side-rank-amount {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
}

/* Activity feed */
.rui-inv-side-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-inv-side-feed-item {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: var(--space-2);
    align-items: flex-start;
    padding: var(--space-1) 0;
}
.rui-inv-side-feed-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    background: var(--color-text-muted);
}
.rui-inv-side-feed-dot-green { background: var(--color-success, #2e9c5d); }
.rui-inv-side-feed-dot-blue  { background: var(--color-info, #4a90e2); }
.rui-inv-side-feed-dot-orange { background: var(--chart-4, #e5a23a); }
.rui-inv-side-feed-dot-red   { background: var(--color-error, #d14d4d); }

.rui-inv-side-feed-text {
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.35;
}
.rui-inv-side-feed-text strong { font-weight: var(--weight-medium); }
.rui-inv-side-feed-actor {
    color: var(--color-text-muted);
    margin-left: 4px;
}
.rui-inv-side-feed-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Stats row — extends current page; supports 5 cards */
.rui-inv-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
@media (max-width: 1279px) { .rui-inv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .rui-inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .rui-inv-stats { grid-template-columns: 1fr; } }

.rui-inv-stat-card {
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
/* Naked-icon stat — no chip, larger glyph carries the colour. Weight inherits
   project default 'wght' 200 — thin strokes for a refined look. */
.rui-inv-stat-icon {
    width: 32px;
    height: 32px;
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rui-inv-stat-icon .material-symbols-rounded {
    font-size: 32px !important;
    line-height: 1;
}
.rui-inv-stat-num {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
}
.rui-inv-stat-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Rich list — type icon chip + customer + amount + breakdown */
.rui-inv-list-type {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
/* List type icon — monochrome, small, refined.
   Earlier iterations used per-type tone colours; the row already has a status badge
   doing colour signalling, so the type glyph is purely a typographic accent. Single
   muted-text colour, 20px, wght 200 inherited from the project base = elegant. */
.rui-inv-list-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}
.rui-inv-list-type-icon .material-symbols-rounded {
    font-size: 20px !important;
    color: var(--color-text-muted);
    line-height: 1;
}

.rui-inv-list-type-body { min-width: 0; }
.rui-inv-list-type-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.rui-inv-list-type-meta {
    font-size: 11px;
    color: var(--color-text-disabled);
    font-family: var(--font-mono, monospace);
    margin-top: 1px;
}

.rui-inv-list-amount {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.rui-inv-list-amount-sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 1px;
}

.rui-inv-list-customer-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-decoration: none;
}
a.rui-inv-list-customer-name:hover { color: var(--color-teal); }
.rui-inv-list-customer-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 1px;
}

/* Revenue sparkline holder — 64px tall, anchored to widget body */
.rui-inv-side-spark {
    width: 100%;
    height: 64px;
    margin: var(--space-1) 0 var(--space-2);
}

/* ── Action column: never push the right rail ──
 * Force the listing card to honour its grid cell width so the action dropdown
 * cannot widen the table beyond the main column. */
.rui-inv-page-grid > div:first-child { min-width: 0; }
.rui-inv-page-grid .mc-card-table { overflow-x: auto; overflow-y: hidden; }  /* explicit Y prevents browser auto-coercion → spurious vertical scrollbar */
.rui-inv-page-grid .mc-table { width: 100%; min-width: 720px; }
.rui-inv-page-grid .mc-table td:last-child,
.rui-inv-page-grid .mc-table th:last-child { width: 56px; padding-right: var(--space-3); }
.rui-inv-page-grid .mc-dropdown-menu-end { right: var(--space-2); }

/* ==================================================================
 * Admin Subscriptions — main + 320px rail archetype, subscription-domain content
 * Namespace: rui-sub-* — page-scoped, never used outside admin/subscriptions
 *
 * Visual personality vs admin/invoices:
 *   - Stat hero is VERTICAL stacked (label-on-top → big number → footer/spark),
 *     vs invoices' horizontal icon|number|label row.
 *   - Each hero card carries a TEAL accent top-bar — subscription = relationship/loyalty cue.
 *   - Rail uses a slimmer chrome (no card-preview header bar) — pulled-in,
 *     less ceremonial than invoices' badge-style rail headers.
 *   - MRR widget gets visual primacy (taller, larger sparkline) since it's the
 *     subscription-domain headline metric — invoices' analogue is Revenue but
 *     it's not the page hero there.
 * ================================================================== */

/* ── KPI hero strip ── 5 vertical stat cards with teal accent and optional inline trend ── */
.rui-sub-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
@media (max-width: 1279px) { .rui-sub-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .rui-sub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .rui-sub-stats { grid-template-columns: 1fr; } }

.rui-sub-stat-card {
    position: relative;
    padding: var(--space-4) var(--space-4) var(--space-3);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-height: 110px;
}
/* Teal accent top-bar — the subscription-product cue. Invoices doesn't have this. */
.rui-sub-stat-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--color-teal);
    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), 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: var(--tracking-wider);
    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); }
.rui-sub-stat-card-attn .rui-sub-stat-icon .material-symbols-rounded { color: var(--chart-4, #e5a23a); }
.rui-sub-stat-card-warn .rui-sub-stat-icon .material-symbols-rounded { color: var(--color-error, #d14d4d); }

.rui-sub-stat-num {
    font-size: 28px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.1;
}
.rui-sub-stat-num-currency {
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
    margin-left: 2px;
}
.rui-sub-stat-foot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    color: var(--color-text-muted);
}
.rui-sub-stat-foot-up    { color: var(--color-success, #2e9c5d); }
.rui-sub-stat-foot-down  { color: var(--color-error, #d14d4d); }
.rui-sub-stat-foot .material-symbols-rounded { font-size: 14px !important; }
.rui-sub-stat-spark {
    width: 100%;
    height: 28px;
    margin-top: var(--space-1);
}

/* ── Page grid: main + 320px rail (clones invoices archetype, content differs) ── */
.rui-sub-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-4);
    align-items: start;
}
@media (max-width: 1023px) {
    .rui-sub-page-grid { grid-template-columns: 1fr; }
}

/* Main column: never let the action dropdown widen the table beyond the cell.
 * Lesson L2 (proper form): overflow-x on inner table container, NOT on the card. */
.rui-sub-page-grid > div:first-child { min-width: 0; }
.rui-sub-list-card .mc-card-table { overflow-x: auto; overflow-y: hidden; }
.rui-sub-list-card .mc-table { width: 100%; min-width: 720px; }
.rui-sub-list-card .mc-table td:last-child,
.rui-sub-list-card .mc-table th:last-child { width: 56px; padding-right: var(--space-3); }
.rui-sub-list-card .mc-dropdown-menu-end { right: var(--space-2); }

/* ── Tabs as card header — merged-segment design.
 *   Container has no side padding and no gap; each tab carries its own generous
 *   horizontal padding so the strip reads as one connected row, not islands.
 *   Active-tab underline naturally spans the active tab's padding range. ── */
.rui-sub-list-card .mc-tabs-card-header {
    padding: 0;
    gap: 0;
    border-bottom: 1px solid var(--color-border-light, var(--color-border));
    margin-bottom: 0;
}
.rui-sub-list-card .mc-tabs-card-header .mc-tab-btn {
    padding: var(--space-3) var(--space-4);              /* 12px × 16px — generous click target, no margin needed */
    margin: 0;
}

/* ── Lifecycle tab count badge ── */
.rui-sub-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    margin-left: var(--space-2);
    border-radius: 9px;                                  /* fully rounded — pills, not chips, to soften the row */
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    line-height: 1;
}
.mc-tab-btn.active .rui-sub-tab-badge {
    background: var(--color-teal-light);
    color: var(--color-teal);
}

/* ── Attention chip strip — appears above the list card when count > 0 ── */
.rui-sub-attn-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.rui-sub-attn-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    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 .rui-sub-attn-chip-icon { color: var(--chart-4, #e5a23a); }
.rui-sub-attn-chip-blue   .rui-sub-attn-chip-icon { color: var(--color-info, #4a90e2); }
.rui-sub-attn-chip-red    .rui-sub-attn-chip-icon { color: var(--color-error, #d14d4d); }

/* ── Right rail container ── */
.rui-sub-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: sticky;
    top: var(--space-4);
}
@media (max-width: 1023px) { .rui-sub-side { position: static; } }

/* Rail card chrome — slimmer than invoices' mc-card-preview chrome. No badge header.
 * Title is small + uppercase; body holds the metric. Clear teal-on-hover for clickable
 * widgets. */
.rui-sub-side-card {
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.rui-sub-side-card-attn { border-color: var(--chart-4, #e5a23a); background: linear-gradient(180deg, rgba(229,162,58,0.05) 0%, rgba(229,162,58,0) 60%); }
.rui-sub-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    gap: var(--space-2);
}
.rui-sub-side-title {
    font-size: 11px;
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.rui-sub-side-title .material-symbols-rounded { font-size: 14px !important; color: var(--color-teal); }
.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);
    text-decoration: none;
    cursor: pointer;
}
.rui-sub-side-action:hover { text-decoration: underline; }
.rui-sub-side-empty {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    padding: var(--space-2) 0;
    text-align: center;
}

/* MRR widget — the rail headline. Bigger number, sparkline below, delta footer. */
.rui-sub-mrr-num {
    font-size: 28px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.1;
}
.rui-sub-mrr-currency {
    font-size: 14px;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
    margin-left: 2px;
}
.rui-sub-mrr-spark {
    width: 100%;
    height: 56px;
    margin: var(--space-2) 0 var(--space-1);
}
.rui-sub-mrr-foot {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    color: var(--color-text-muted);
}
.rui-sub-mrr-foot-up   { color: var(--color-success, #2e9c5d); }
.rui-sub-mrr-foot-down { color: var(--color-error, #d14d4d); }
.rui-sub-mrr-foot .material-symbols-rounded { font-size: 14px !important; }

/* Plan mix — horizontal mini bars per plan. Different shape from invoices'
 * Top Customers (which used avatar+name+amount rows). */
.rui-sub-mix-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-2);
    align-items: center;
    font-size: var(--text-xs);
}
.rui-sub-mix-row + .rui-sub-mix-row { margin-top: var(--space-2); }
.rui-sub-mix-row-name {
    color: var(--color-text);
    font-weight: var(--weight-medium);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rui-sub-mix-row-num {
    color: var(--color-text-muted);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}
.rui-sub-mix-bar {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: var(--color-bg-subtle);
    overflow: hidden;
}
.rui-sub-mix-bar > div {
    height: 100%;
    background: var(--color-teal);
    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); }
.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: var(--tracking-wider);
    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: var(--tracking-wider);
    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: var(--tracking-wider);
    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);
    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: var(--tracking-wider);
    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);
    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); }
.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);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 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);
    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) 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)) 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));
    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);
}
.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);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 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: var(--tracking-wider);
    cursor: help;
}
.mc-segment-counter[data-encoding="ucs-2"] .mc-segment-counter__encoding {
    background: color-mix(in srgb, var(--chart-3) 10%, transparent);
    border-color: color-mix(in srgb, var(--chart-3) 30%, var(--color-border));
    color: var(--chart-3);
}
.mc-segment-counter__sep {
    color: var(--color-text-muted);
    opacity: 0.6;
}
.mc-segment-counter__segments-count {
    font-family: var(--font-mono, monospace);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}
.mc-segment-counter[data-tone="warning"] .mc-segment-counter__segments-count,
.mc-segment-counter[data-tone="danger"]  .mc-segment-counter__segments-count {
    color: var(--chart-5);
}
.mc-segment-counter__cost {
    color: var(--color-text);
    font-family: var(--font-mono, monospace);
    font-weight: var(--weight-medium);
}
.mc-segment-counter__notice {
    color: var(--color-text-muted);
    font-style: italic;
    flex-basis: 100%;
    margin-top: var(--space-1);
    line-height: 1.4;
}
.mc-segment-counter[data-tone="danger"] .mc-segment-counter__notice {
    color: var(--chart-5);
    font-style: normal;
    font-weight: var(--weight-medium);
}
.mc-segment-counter[data-tone="warning"] .mc-segment-counter__notice {
    color: var(--chart-3);
    font-style: normal;
}

/* ── Responsive — narrow viewport ──────────────────────────────── */
@media (max-width: 480px) {
    .mc-segment-counter__chars {
        min-width: 48px;
        font-size: 10px;
    }
    .mc-segment-counter__row--meta {
        gap: var(--space-1);
    }
    .mc-segment-counter__notice {
        font-size: 10px;
    }
}

/* ── Reduce-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mc-segment-counter__bar {
        transition: none;
    }
}

/* ============================================================
 * mc-phone-mockup — C7 W4 (composer right-rail live preview)
 * ============================================================
 * Phone-shaped frame with channel-specific header chrome + bubble.
 * 3 channel variants (data-channel="sms|whatsapp|telegram") drive
 * the header (sender row, online status, action icons) and bubble
 * (color, direction, delivery-tick chrome).
 *
 * Discipline:
 *   - Channel tones route through --msg-ch-* tokens promoted to
 *     core variables.css in W2 (sms = blue, wa = green, tg = teal).
 *   - Bubble tints use rgba composites built from --msg-ch-* so the
 *     same green appears regardless of theme; light/dark only flips
 *     the phone shell + chat-area background.
 *   - Notch + home indicator are abstract — NO Apple/Android brand
 *     marks, NO carrier name, NO battery glyph. Brand-neutral.
 *   - Size variants (sm/default/lg) — `data-size` attr. Default is
 *     280×580 (composer right-rail); sm shrinks to 220×440 for cards;
 *     lg grows to 340×680 for full-page previews.
 *
 * Mounted by PhoneMockup.js (idempotent). Author markup:
 *   <div data-mc-phone-mockup data-channel="sms"
 *        data-bind-to="#composer-textarea"
 *        data-sender-name="Acme Co"></div>
 */
.mc-phone-mockup {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    --mockup-width: 280px;
    --mockup-height: 580px;
    --mockup-radius: 38px;
    --mockup-notch-w: 100px;
    --mockup-notch-h: 22px;
    --mockup-padding: 12px;
    --mockup-screen-bg: var(--color-card-bg);
    --mockup-frame-bg: var(--color-text);
    --mockup-frame-shadow: 0 24px 60px -16px rgba(15, 23, 42, 0.35), 0 8px 24px -8px rgba(15, 23, 42, 0.15);
}
.mc-phone-mockup[data-size="sm"]     { --mockup-width: 220px; --mockup-height: 440px; --mockup-radius: 30px; --mockup-notch-w: 80px; --mockup-notch-h: 18px; --mockup-padding: 8px; }
.mc-phone-mockup[data-size="lg"]     { --mockup-width: 340px; --mockup-height: 680px; --mockup-radius: 46px; --mockup-notch-w: 120px; --mockup-notch-h: 26px; --mockup-padding: 16px; }

/* ── Frame (phone outline) ────────────────────────────────────── */
.mc-phone-mockup__frame {
    position: relative;
    width: var(--mockup-width);
    height: var(--mockup-height);
    background: var(--mockup-frame-bg);
    border-radius: var(--mockup-radius);
    padding: var(--mockup-padding);
    box-shadow: var(--mockup-frame-shadow);
    overflow: hidden;
}
.mc-phone-mockup__notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--mockup-notch-w);
    height: var(--mockup-notch-h);
    background: var(--mockup-frame-bg);
    border-radius: 0 0 14px 14px;
    z-index: 2;
}
.mc-phone-mockup__home-indicator {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 3px;
    background: color-mix(in srgb, var(--color-card-bg) 60%, transparent);
    border-radius: 3px;
    z-index: 2;
}

/* ── Screen (chat surface) ────────────────────────────────────── */
.mc-phone-mockup__screen {
    width: 100%;
    height: 100%;
    background: var(--mockup-screen-bg);
    border-radius: calc(var(--mockup-radius) - 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ── Chat header (channel-specific) ───────────────────────────── */
.mc-phone-mockup__chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 28px 12px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    background: color-mix(in srgb, var(--mockup-screen-bg) 92%, var(--color-text) 8%);
    flex-shrink: 0;
    color: var(--color-text);
    font-size: 11px;
}
.mc-phone-mockup__chat-header-back {
    flex: 0 0 auto;
    color: var(--msg-ch-sms, var(--chart-1));
    display: inline-flex;
}
.mc-phone-mockup[data-channel="whatsapp"] .mc-phone-mockup__chat-header-back  { color: var(--msg-ch-wa, var(--chart-2)); }
.mc-phone-mockup[data-channel="telegram"] .mc-phone-mockup__chat-header-back  { color: var(--msg-ch-tg, var(--chart-1)); }
.mc-phone-mockup__chat-header-avatar {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-card-bg);
}
.mc-phone-mockup__chat-header-avatar--wa { background: var(--msg-ch-wa, var(--chart-2)); }
.mc-phone-mockup__chat-header-avatar--tg { background: var(--msg-ch-tg, var(--chart-1)); }
.mc-phone-mockup__chat-header-id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.mc-phone-mockup__chat-header-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-phone-mockup__chat-header-sub {
    font-size: 9px;
    color: var(--color-text-muted);
}
.mc-phone-mockup__chat-header-icons {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 8px;
    color: var(--msg-ch-wa, var(--chart-2));
}

/* ── Chat area (scrollable bubbles) ───────────────────────────── */
.mc-phone-mockup__chat-area {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 10px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--mockup-screen-bg) 98%, var(--color-text) 2%) 0%, var(--mockup-screen-bg) 100%);
}
.mc-phone-mockup[data-channel="whatsapp"] .mc-phone-mockup__chat-area {
    background-color: color-mix(in srgb, var(--msg-ch-wa, var(--chart-2)) 4%, var(--mockup-screen-bg));
}
.mc-phone-mockup[data-channel="telegram"] .mc-phone-mockup__chat-area {
    background-color: color-mix(in srgb, var(--msg-ch-tg, var(--chart-1)) 4%, var(--mockup-screen-bg));
}

/* ── Bubble ────────────────────────────────────────────────────── */
.mc-phone-mockup__bubble {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 10px;
    border-radius: 14px;
    font-size: 11px;
    line-height: 1.35;
    max-width: 80%;
    word-wrap: break-word;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}
.mc-phone-mockup__bubble--inbound {
    align-self: flex-start;
    background: color-mix(in srgb, var(--color-text) 8%, var(--mockup-screen-bg));
    color: var(--color-text);
    border-bottom-left-radius: 4px;
}
.mc-phone-mockup__bubble--outbound {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.mc-phone-mockup[data-channel="whatsapp"] .mc-phone-mockup__bubble--outbound {
    background: color-mix(in srgb, var(--msg-ch-wa, var(--chart-2)) 22%, var(--mockup-screen-bg));
    color: var(--color-text);
}
.mc-phone-mockup[data-channel="telegram"] .mc-phone-mockup__bubble--outbound {
    background: color-mix(in srgb, var(--msg-ch-tg, var(--chart-1)) 22%, var(--mockup-screen-bg));
    color: var(--color-text);
}
.mc-phone-mockup__bubble--empty {
    opacity: 0.65;
    font-style: italic;
}
.mc-phone-mockup__bubble-body {
    color: var(--color-text);
}
.mc-phone-mockup__bubble--empty .mc-phone-mockup__bubble-body {
    color: var(--color-text-muted);
}
.mc-phone-mockup__bubble-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--color-text-muted);
    align-self: flex-end;
}
.mc-phone-mockup__bubble-time--side {
    align-self: center;
    margin-top: 4px;
}
.mc-phone-mockup__bubble-ticks {
    color: var(--msg-ch-wa, var(--chart-2));
    display: inline-flex;
}
.mc-phone-mockup__bubble-empty-text {
    color: var(--color-text-muted);
}

/* ── Inline keyboard (Telegram only) ──────────────────────────── */
.mc-phone-mockup__keyboard {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.mc-phone-mockup__keyboard-btn {
    background: color-mix(in srgb, var(--msg-ch-tg, var(--chart-1)) 12%, var(--mockup-screen-bg));
    border: 1px solid color-mix(in srgb, var(--msg-ch-tg, var(--chart-1)) 25%, transparent);
    color: var(--msg-ch-tg, var(--chart-1));
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 500;
    text-align: center;
    transition: background 120ms ease-out;
}
.mc-phone-mockup__keyboard-btn:hover {
    background: color-mix(in srgb, var(--msg-ch-tg, var(--chart-1)) 18%, var(--mockup-screen-bg));
}

/* ── Sticky variant (composer right-rail) ─────────────────────── */
.mc-phone-mockup--sticky {
    position: sticky;
    top: var(--space-4);
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mc-phone-mockup__keyboard-btn {
        transition: none;
    }
}

/* ============================================================================
   MC-TEMPLATE-PICKER — C8 / W4 — WhatsApp template picker grid + filter rail
   Used by S4.4 WA composer, S4.7 templates manager, S4.8 template editor.
   Status pills use SEMANTIC colours (state, not chart data) per L13 carve-out.
   Category badges use --chart-N (categorical visual; stable per-category map).
   ============================================================================ */
.mc-template-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

.mc-template-picker__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-subtle, var(--color-card-bg));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}
.mc-template-picker__filter {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mc-template-picker__filter-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.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: var(--tracking-wider);
}

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

.mc-conv-bubble--out[data-channel="sms"]      { border-right: 2px solid var(--bubble-tone-sms); }
.mc-conv-bubble--out[data-channel="whatsapp"] { border-right: 2px solid var(--bubble-tone-whatsapp); }
.mc-conv-bubble--out[data-channel="telegram"] { border-right: 2px solid var(--bubble-tone-telegram); }
.mc-conv-bubble--out[data-channel="email"]    { border-right: 2px solid var(--bubble-tone-email); }

/* Body */
.mc-conv-bubble__body {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    margin: 0;
    white-space: pre-wrap;
    color: var(--color-text);
}

/* Reply quote inset */
.mc-conv-bubble__quote {
    display: grid;
    gap: 2px;
    padding: var(--space-1-5) var(--space-2);
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid var(--bubble-tone-sms);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 120ms ease;
}
[data-theme="dark"] .mc-conv-bubble__quote {
    background: rgba(255, 255, 255, 0.04);
}
.mc-conv-bubble__quote:hover {
    background: rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .mc-conv-bubble__quote:hover {
    background: rgba(255, 255, 255, 0.07);
}
.mc-conv-bubble__quote-author {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}
.mc-conv-bubble__quote-body {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mc-conv-bubble[data-channel="whatsapp"]  .mc-conv-bubble__quote { border-left-color: var(--bubble-tone-whatsapp); }
.mc-conv-bubble[data-channel="telegram"]  .mc-conv-bubble__quote { border-left-color: var(--bubble-tone-telegram); }
.mc-conv-bubble[data-channel="email"]     .mc-conv-bubble__quote { border-left-color: var(--bubble-tone-email); }

/* Media slot — image, audio, video, document */
.mc-conv-bubble__media {
    display: block;
    margin: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-width: 320px;
}
.mc-conv-bubble__media img,
.mc-conv-bubble__media video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 320px;
    max-height: 240px;
    object-fit: cover;
    cursor: zoom-in;
}
.mc-conv-bubble__media audio {
    width: 100%;
    min-width: 220px;
}
.mc-conv-bubble__media--document {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: var(--color-text);
}
[data-theme="dark"] .mc-conv-bubble__media--document {
    background: rgba(255, 255, 255, 0.06);
}
.mc-conv-bubble__media-doc-icon {
    width: 32px;
    height: 32px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.mc-conv-bubble__media-doc-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.mc-conv-bubble__media-doc-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-conv-bubble__media-doc-size {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Meta row — time + status tray */
.mc-conv-bubble__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    justify-self: end;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1;
}
.mc-conv-bubble--in .mc-conv-bubble__meta {
    justify-self: start;
}

.mc-conv-bubble__time {
    font-variant-numeric: tabular-nums;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mc-conv-bubble__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 12px;
    color: var(--color-text-muted);
}

.mc-conv-bubble__status svg {
    width: 16px;
    height: 12px;
}

.mc-conv-bubble__status--read {
    color: var(--bubble-tone-sms);
}
.mc-conv-bubble[data-channel="whatsapp"] .mc-conv-bubble__status--read { color: var(--bubble-tone-whatsapp); }
.mc-conv-bubble[data-channel="telegram"] .mc-conv-bubble__status--read { color: var(--bubble-tone-telegram); }

.mc-conv-bubble__status--failed {
    color: var(--color-error);
}

.mc-conv-bubble__status--bounced {
    color: var(--color-error);
}

.mc-conv-bubble__status--unsubscribed {
    color: var(--color-text-muted);
}

/* Hover-only kebab menu — positioned OUTSIDE the bubble on the center-facing
   side so it never overlays text. Outbound (right-aligned) → kebab on left;
   inbound (left-aligned) → kebab on right. Both point towards conversation
   center, matching WhatsApp / Telegram / Slack pattern. */
.mc-conv-bubble__menu {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mc-conv-bubble--out .mc-conv-bubble__menu {
    /* outbound bubble is right-aligned → kebab on its left (towards center) */
    left: -34px;
    right: auto;
}
.mc-conv-bubble--in .mc-conv-bubble__menu {
    /* inbound bubble is left-aligned → kebab on its right (towards center) */
    right: -34px;
    left: auto;
}

/* L116 — hover-bridge pseudo-element. Without this, the 34px gap between the
   bubble visual box and the kebab kills the bubble:hover state mid-transit,
   making the kebab unreachable. ::before extends the bubble's hover-active
   area into the gap so the pointer can travel from bubble → kebab without
   losing hover. Only present in hover/focus-within state — when bubble isn't
   active, the bridge has pointer-events:none and is invisible. */
.mc-conv-bubble::before {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 38px;
    pointer-events: none;
}
.mc-conv-bubble--out::before { left: -38px; right: auto; }
.mc-conv-bubble--in::before  { right: -38px; left: auto; }
.mc-conv-bubble:hover::before,
.mc-conv-bubble:focus-within::before {
    pointer-events: auto;
}
.mc-conv-bubble:hover .mc-conv-bubble__menu,
.mc-conv-bubble:focus-within .mc-conv-bubble__menu {
    opacity: 1;
    pointer-events: auto;
}
.mc-conv-bubble__menu:hover {
    background: rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .mc-conv-bubble__menu:hover {
    background: rgba(255, 255, 255, 0.10);
}
.mc-conv-bubble__menu svg {
    width: 14px;
    height: 14px;
}

/* Failed retry CTA — clickable status icon when failed */
.mc-conv-bubble__retry {
    background: transparent;
    border: 0;
    color: var(--color-error);
    cursor: pointer;
    font-size: var(--text-xs);
    text-decoration: underline;
    padding: 0;
    margin-left: var(--space-1);
}

/* Emoji-only mode — strip background + scale 2.5× */
.mc-conv-bubble--emoji-only {
    background: transparent;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
    padding: 0;
    margin-bottom: var(--space-2);
}
.mc-conv-bubble--emoji-only .mc-conv-bubble__body {
    font-size: calc(var(--text-base) * 2.5);
    line-height: 1.1;
}
.mc-conv-bubble--emoji-only .mc-conv-bubble__meta {
    margin-top: var(--space-1);
}

/* Failed bubble — subtle red bg tint to surface as alert */
.mc-conv-bubble[data-status="failed"] {
    background: var(--color-error-bg);
}
[data-theme="dark"] .mc-conv-bubble[data-status="failed"] {
    background: rgba(248, 113, 113, 0.10);
}

/* Sr-only utility (announce direction for screen readers) */
.mc-conv-bubble .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile <480 — slightly narrower max width + smaller text */
@media (max-width: 480px) {
    .mc-conv-bubble {
        max-width: 85%;
        font-size: var(--text-sm);
    }
    .mc-conv-bubble__body {
        font-size: var(--text-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-conv-bubble__menu,
    .mc-conv-bubble__quote { transition: none; }
}

/* ============================================================================
 * mc-conv-thread — C11 W6 (center pane of SF6 master-detail unified inbox)
 *
 * Composes C12 mc-conv-bubble into a sticky-header + scrollable-bubble-list +
 * footer-slot grid. Day dividers between bubbles on different calendar days.
 * Infinite-scroll-up via mc-conv-thread:load-older CustomEvent. Read watermark
 * via IntersectionObserver. Mobile single-pane mode with back-arrow.
 *
 * Spec: docs/messenger/COMPONENT-PROPOSALS.md#c11--mc-conv-thread
 * Showcase anchor: /rui/ui#mc-conv-thread
 * ============================================================================ */

.mc-conv-thread {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    min-height: 400px;
    max-height: 100%;
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
    position: relative;
}

/* Header — sticky, contains subscriber name + channel chip + status menu + kebab */
.mc-conv-thread__header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-bg);
    border-bottom: 1px solid var(--color-border);
    min-height: 56px;
}

.mc-conv-thread__back {
    display: none;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    border-radius: var(--radius-full);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.mc-conv-thread__back:hover {
    background: var(--color-hover-bg);
}
.mc-conv-thread__back svg {
    width: 20px;
    height: 20px;
}

.mc-conv-thread__header-name {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.mc-conv-thread__header-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-conv-thread__header-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    /* L117 — header sub now hosts canonical .mc-msg-channel-chip-sm
       + an optional "N unread" counter text inline. Flex layout keeps
       the chip + counter aligned vertically with the title above. */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 20px;
}
.mc-conv-thread__header-unread {
    color: var(--color-text-muted);
}

.mc-conv-thread__header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    /* L113 — push to right edge of header (was sitting in the middle because
       the 1fr column stretched). margin-left: auto reliably right-aligns the
       block regardless of grid template ambiguity. */
    margin-left: auto;
}

.mc-conv-thread__status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background 120ms ease;
}
.mc-conv-thread__status-pill:hover,
.mc-conv-thread__status-pill[aria-expanded="true"] {
    background: var(--color-hover-bg);
}
.mc-conv-thread__status-pill-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-success);
}
.mc-conv-thread__status-pill-dot--snoozed { background: var(--color-warning); }
.mc-conv-thread__status-pill-dot--closed  { background: var(--color-text-muted); }
.mc-conv-thread__status-pill-chevron {
    width: 12px;
    height: 12px;
    opacity: 0.6;
}

/* S6.8 — Thread header actions dropdown menu */
.mc-conv-thread__header-actions {
    position: relative;
}
.mc-conv-thread__actions-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 240px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-popover, 0 8px 24px rgba(0, 0, 0, 0.12));
    padding: var(--space-1) 0;
    display: flex;
    flex-direction: column;
}
.mc-conv-thread__actions-menu[hidden] {
    display: none;
}
.mc-conv-thread__actions-menu-section {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}
.mc-conv-thread__actions-menu-section-label {
    padding: 4px var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: var(--weight-semibold);
}
.mc-conv-thread__actions-menu-item {
    appearance: none;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 8px var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.mc-conv-thread__actions-menu-item:hover,
.mc-conv-thread__actions-menu-item:focus-visible {
    background: var(--color-hover-bg);
    outline: none;
}
.mc-conv-thread__actions-menu-item--danger {
    color: var(--color-danger, #c53030);
}
.mc-conv-thread__actions-menu-divider {
    height: 1px;
    margin: 2px 0;
    background: var(--color-border);
}

/* Variant: info banner (snoozed) — calmer tone than closed warning */
.mc-conv-thread__readonly-banner--info {
    background: var(--color-info-bg, color-mix(in srgb, var(--color-primary) 8%, transparent));
}

/* S6.5 — Bulk-select multi-row toggle */
.mc-conv-thread-list[data-bulk-mode="true"] .mc-conv-thread-list__row {
    position: relative;
}
.mc-conv-thread-list[data-bulk-mode="true"] .mc-conv-thread-list__row::before {
    content: '';
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card-bg);
    z-index: 1;
}
.mc-conv-thread-list[data-bulk-mode="true"] .mc-conv-thread-list__row[data-bulk-selected="true"]::before {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.mc-conv-thread-list[data-bulk-mode="true"] .mc-conv-thread-list__row[data-bulk-selected="true"]::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 50%;
    width: 4px;
    height: 9px;
    border: solid var(--color-card-bg);
    border-width: 0 2px 2px 0;
    transform: translateY(-65%) rotate(45deg);
    z-index: 2;
}
.mc-conv-thread-list[data-bulk-mode="true"] .mc-conv-thread-list__row > * {
    margin-left: 24px;
}
.mc-conv-thread-list[data-bulk-mode="true"] .mc-conv-thread-list__row > .mc-conv-thread-list__avatar {
    margin-left: 24px;
}

/* S6.8 — Toast for status-change confirmations */
.mc-conv-toast {
    position: fixed;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 1000;
    padding: var(--space-2) var(--space-4);
    background: var(--color-text);
    color: var(--color-card-bg);
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    box-shadow: var(--shadow-popover, 0 8px 24px rgba(0, 0, 0, 0.18));
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}
.mc-conv-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.mc-conv-thread__kebab {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mc-conv-thread__kebab:hover {
    background: var(--color-hover-bg);
}

/* Scrollable bubble area */
.mc-conv-thread__list {
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3) var(--space-4);
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-page-bg);
    position: relative;
}

/* Day divider — between bubbles on different calendar days */
.mc-conv-thread__day-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-3) 0;
    list-style: none;
    user-select: none;
}
.mc-conv-thread__day-divider time {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: 4px 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Loading-older spinner row */
.mc-conv-thread__loading-older {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}
.mc-conv-thread__loading-older::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-teal);
    border-radius: var(--radius-full);
    animation: mc-conv-thread-spin 800ms linear infinite;
    margin-right: var(--space-1);
}
@keyframes mc-conv-thread-spin {
    to { transform: rotate(360deg); }
}

/* "N new messages" floater — shows when scrolled up + new inbound arrives */
.mc-conv-thread__new-floater {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-4);
    background: var(--color-teal);
    color: var(--color-white);
    border: 0;
    border-radius: var(--radius-full);
    padding: 6px 14px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    box-shadow: var(--shadow-modal);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}
.mc-conv-thread__new-floater--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.mc-conv-thread__new-floater svg {
    width: 14px;
    height: 14px;
}

/* Compose footer slot — consumer places C13 here */
.mc-conv-thread__footer {
    padding: 0;
    background: var(--color-card-bg);
    border-top: 1px solid var(--color-border);
}

/* Read-only banner (closed / snoozed conversation) */
.mc-conv-thread__readonly-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-warning-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    border-top: 1px solid var(--color-border);
}
.mc-conv-thread__readonly-banner-cta {
    background: transparent;
    border: 1px solid var(--color-text-muted);
    color: var(--color-text);
    padding: 4px 10px;
    border-radius: var(--radius-input);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

/* Highlight ring (used by scrollToMessage(messageUid)) */
.mc-conv-bubble--highlight {
    box-shadow: 0 0 0 3px var(--color-teal-ring), var(--shadow-card);
    transition: box-shadow 600ms ease;
}

/* State: loading — skeleton bubbles */
.mc-conv-thread[data-state="loading"] .mc-conv-thread__list {
    pointer-events: none;
}
.mc-conv-thread__skeleton {
    list-style: none;
    width: 60%;
    max-width: 280px;
    height: 56px;
    margin: 0 0 var(--space-2);
    border-radius: var(--bubble-radius);
    background: linear-gradient(90deg,
        var(--color-hover-bg) 0%,
        var(--color-active-bg) 50%,
        var(--color-hover-bg) 100%);
    background-size: 200% 100%;
    animation: mc-conv-thread-shimmer 1400ms ease-in-out infinite;
}
.mc-conv-thread__skeleton--out {
    align-self: flex-end;
}
@keyframes mc-conv-thread-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* State: empty — bespoke SVG + caption */
.mc-conv-thread[data-state="empty"] .mc-conv-thread__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mc-conv-thread__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
    max-width: 320px;
}
.mc-conv-thread__empty-svg {
    width: 96px;
    height: 96px;
    color: var(--illust-stroke);
}

/* State: error — alert + retry */
.mc-conv-thread[data-state="error"] .mc-conv-thread__list {
    align-items: stretch;
}
.mc-conv-thread__error {
    margin: var(--space-3) auto;
    max-width: 480px;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-card);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-sm);
}
.mc-conv-thread__error-retry {
    background: var(--color-error);
    color: var(--color-white);
    border: 0;
    padding: 6px 12px;
    border-radius: var(--radius-input);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

/* Mobile <768 — single-pane mode (back arrow visible) */
@media (max-width: 767px) {
    .mc-conv-thread__back {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-conv-thread__skeleton,
    .mc-conv-thread__loading-older::before,
    .mc-conv-bubble--highlight,
    .mc-conv-thread__new-floater { animation: none; transition: none; }
}

/* ============================================================================
 * mc-conv-thread-list — C10 W6 (left sidebar of SF6 master-detail unified inbox)
 *
 * Vertical list of conversation rows sorted by last_message_at desc.
 * Each row: avatar + name + last-msg preview + channel chip + unread badge + timestamp.
 * Filter rail at top (status / channel / search). Bulk-select mode.
 *
 * Spec: docs/messenger/COMPONENT-PROPOSALS.md#c10--mc-conv-thread-list
 * Showcase anchor: /rui/ui#mc-conv-thread-list
 * ============================================================================ */

.mc-conv-thread-list {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 400px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* Filter rail — sticky 56px, holds chips + search */
.mc-conv-thread-list__filters {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-card-bg);
}

.mc-conv-thread-list__filter-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.mc-conv-thread-list__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.mc-conv-thread-list__chip:hover {
    background: var(--color-hover-bg);
}
.mc-conv-thread-list__chip[aria-pressed="true"] {
    background: var(--color-teal-light);
    color: var(--color-teal);
    border-color: var(--color-teal);
}

.mc-conv-thread-list__search {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-input);
    background: var(--color-subtle-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-conv-thread-list__search::placeholder {
    color: var(--color-text-muted);
}
.mc-conv-thread-list__search:focus {
    outline: 2px solid var(--color-teal-ring);
    outline-offset: 0;
    border-color: var(--color-border-focus);
}

/* Bulk action bar (replaces filter chips when data-bulk="1" + selection >0) */
.mc-conv-thread-list__bulk-actions {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--color-teal-light);
    border-radius: var(--radius-input);
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-conv-thread-list[data-bulk="1"] .mc-conv-thread-list__bulk-actions {
    display: flex;
}
.mc-conv-thread-list[data-bulk="1"] .mc-conv-thread-list__filter-chips,
.mc-conv-thread-list[data-bulk="1"] .mc-conv-thread-list__search {
    display: none;
}
.mc-conv-thread-list__bulk-count {
    flex: 1;
    color: var(--color-teal);
    font-weight: var(--weight-semibold);
}
.mc-conv-thread-list__bulk-btn {
    background: transparent;
    border: 1px solid var(--color-teal);
    color: var(--color-teal);
    padding: 4px 10px;
    border-radius: var(--radius-input);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
}
.mc-conv-thread-list__bulk-btn:hover {
    background: var(--color-teal);
    color: var(--color-white);
}

/* Row list */
.mc-conv-thread-list__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.mc-conv-thread-list__row {
    display: grid;
    /* L107 fix — 2 columns (avatar | main). Channel chip + unread badge moved
       to a 3rd compact row inside __main so they never collide with timestamp.
       Was: `auto 1fr auto` with right-meta column overlapping the time. */
    grid-template-columns: auto 1fr;
    gap: var(--space-2);
    align-items: start;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    background: transparent;
    border-left: 0 solid transparent;
    border-right: 0;
    border-top: 0;
    width: 100%;
    text-align: left;
    color: var(--color-text);
    font: inherit;
    transition: background-color 120ms ease, border-left-width 120ms ease;
}
.mc-conv-thread-list__row:hover {
    background: var(--color-hover-bg);
}
.mc-conv-thread-list__row[aria-selected="true"] {
    background: var(--color-active-bg);
}

/* Bulk checkbox (only visible in bulk mode) */
.mc-conv-thread-list__row-check {
    display: none;
    width: 16px;
    height: 16px;
    accent-color: var(--color-teal);
}
.mc-conv-thread-list[data-bulk="1"] .mc-conv-thread-list__row-check {
    display: inline-block;
}
/* In bulk mode, grid grows to 3 cols: checkbox | avatar | main */
.mc-conv-thread-list[data-bulk="1"] .mc-conv-thread-list__row {
    grid-template-columns: auto auto 1fr;
}

/* Avatar — 32px circle with channel-tone tint + initial */
/* L112 — avatar uses PASTEL --msg-ch-* tokens (matches /rui/ui design system
   chip palette) NOT the saturated --bubble-tone-* (those are reserved for
   bubble accent stripes per L72 carve-out). Each pastel pairs with a deep
   *-ink color for readable label-on-light-tint. */
.mc-conv-thread-list__avatar {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--msg-ch-sms);
    color: var(--msg-ch-sms-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}
.mc-conv-thread-list__row[data-channel="whatsapp"] .mc-conv-thread-list__avatar { background: var(--msg-ch-wa); color: var(--msg-ch-wa-ink); }
.mc-conv-thread-list__row[data-channel="telegram"] .mc-conv-thread-list__avatar { background: var(--msg-ch-tg); color: var(--msg-ch-tg-ink); }
.mc-conv-thread-list__row[data-channel="email"]    .mc-conv-thread-list__avatar { background: var(--msg-ch-email); color: var(--msg-ch-email-ink); }

/* Status dot at avatar bottom-right (open/snoozed/closed) */
.mc-conv-thread-list__avatar::after {
    content: '';
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-card-bg);
    background: var(--color-success);
    display: none;
}
.mc-conv-thread-list__row[data-status="snoozed"] .mc-conv-thread-list__avatar::after {
    background: var(--color-warning);
    display: block;
}
.mc-conv-thread-list__row[data-status="closed"] .mc-conv-thread-list__avatar::after {
    background: var(--color-text-muted);
    display: block;
}
/* Show dot for open ONLY if unread > 0 — otherwise default-state-no-clutter */
.mc-conv-thread-list__row[data-status="open"][data-unread]:not([data-unread="0"]) .mc-conv-thread-list__avatar::after {
    display: block;
}

/* Main column — 3-row layout: name+time / preview / meta (channel+unread).
   L107 fix — was 2-row with channel/unread in a sibling right column that
   overlapped the time. Compact 3rd row eliminates the collision. */
.mc-conv-thread-list__main {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 2px;
    min-width: 0;
}
.mc-conv-thread-list__row-name {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    min-width: 0;
}
.mc-conv-thread-list__row-name-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mc-conv-thread-list__row-time {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: var(--weight-normal);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.mc-conv-thread-list__row-preview {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
    min-width: 0;
}
.mc-conv-thread-list__row-preview-body {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    cursor: help; /* hover surfaces native title-attr tooltip with full text */
}

/* Compact 3rd row — channel chip + unread badge right-aligned, no overlap.
   L112 — justify to flex-end pushes chip + unread to the row's right edge
   (away from avatar/main column) per /rui/ui design polish guidance. */
.mc-conv-thread-list__row-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    flex-shrink: 0;
    margin-top: 2px;
}

/* L117 — channel chip in the thread-list row now uses the canonical
   .mc-msg-channel-chip + .mc-msg-channel-chip-sm pair (see /rui/ui
   showcase + components.css §"Messenger Channel Chip"). The earlier
   custom .mc-conv-thread-list__row-channel circle was removed because
   it diverged from the rest of the app — same chip, two visual styles
   = user confusion. data-channel="..." drives tone via --msg-ch-*. */

/* L122 — Messenger Inbox 3-pane layout (responsive).
   Desktop ≥1280 → 320 | 1fr | 320 (all three panes visible).
   Tablet 768-1279 → 280 | 1fr (profile rail hidden; can re-open via
     a future slide-panel — out of scope for L122).
   Mobile <768 → single-pane stack governed by `data-active-pane` on
     the layout container ("list" or "thread"). The other pane gets
     `display:none` so we don't try to fit 2 panes inside a phone width. */
.rui-msg-inbox__layout {
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    gap: var(--space-2);
    padding: 0;
    background: var(--color-page-bg);
    min-height: calc(100vh - 180px);
    align-items: stretch;
}
@media (max-width: 1279px) {
    .rui-msg-inbox__layout {
        grid-template-columns: 280px 1fr;
    }
    .rui-msg-inbox__layout > [data-conversation-profile-host] { display: none; }
}
@media (max-width: 767px) {
    .rui-msg-inbox__layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .rui-msg-inbox__layout[data-active-pane="thread"] > [data-conversation-list] { display: none; }
    .rui-msg-inbox__layout[data-active-pane="list"]   > [data-conversation-thread-host] { display: none; }
}

.mc-conv-thread-list__row-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Compact unread badge — matches new pill-style channel chip height (16px) */
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--color-teal);
    color: var(--color-white);
    font-size: 9px;
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}

/* Empty state */
.mc-conv-thread-list__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    gap: var(--space-3);
}
.mc-conv-thread-list__empty-svg {
    width: 96px;
    height: 96px;
    color: var(--illust-stroke);
}
.mc-conv-thread-list__empty-cta {
    color: var(--color-teal);
    text-decoration: underline;
    cursor: pointer;
    font-weight: var(--weight-medium);
}

/* Filtered-empty state */
.mc-conv-thread-list__filtered-empty {
    text-align: center;
    padding: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.mc-conv-thread-list__clear-filters {
    color: var(--color-teal);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    padding: 0;
    margin-left: var(--space-1);
}

/* Loading state — 5 skeleton rows */
.mc-conv-thread-list__skeleton {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    list-style: none;
}
.mc-conv-thread-list__skeleton-avatar,
.mc-conv-thread-list__skeleton-line,
.mc-conv-thread-list__skeleton-meta {
    background: linear-gradient(90deg,
        var(--color-hover-bg) 0%,
        var(--color-active-bg) 50%,
        var(--color-hover-bg) 100%);
    background-size: 200% 100%;
    animation: mc-conv-thread-shimmer 1400ms ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.mc-conv-thread-list__skeleton-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); }
.mc-conv-thread-list__skeleton-main { display: grid; gap: 4px; }
.mc-conv-thread-list__skeleton-line { height: 12px; width: 60%; }
.mc-conv-thread-list__skeleton-line--sub { width: 80%; }
.mc-conv-thread-list__skeleton-meta { width: 22px; height: 22px; border-radius: var(--radius-full); }

/* Mobile <768 — full-width single-pane (no border-radius, no edge border) */
@media (max-width: 767px) {
    .mc-conv-thread-list {
        border-radius: 0;
        border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-conv-thread-list__skeleton-avatar,
    .mc-conv-thread-list__skeleton-line,
    .mc-conv-thread-list__skeleton-meta { animation: none; }
}

/* ============================================================================
 * mc-conv-compose — C13 W6 (composer for C11 thread footer slot)
 *
 * Multiline textarea with auto-grow + channel-aware char counter.
 * Channel-switcher chip row (when subscriber has >1 channel).
 * Quote-reply inset (responds to mc-conv-bubble:quote-reply event).
 * Cmd/Ctrl+Enter to send. Drafts persist in localStorage per conversation.
 *
 * Spec: docs/messenger/COMPONENT-PROPOSALS.md#c13--mc-conv-compose
 * Showcase anchor: /rui/ui#mc-conv-compose
 * ============================================================================ */

.mc-conv-compose {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 0;
    padding: var(--space-3) var(--space-3) var(--space-3);
    background: var(--color-card-bg);
    border-top: 1px solid var(--color-border);
}

/* Channel switcher (visible only when data-available-channels has >1 channel) */
.mc-conv-compose__channels {
    display: none;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-conv-compose[data-available-channels*=","] .mc-conv-compose__channels {
    display: inline-flex;
}
.mc-conv-compose__channel-label {
    margin-right: var(--space-1);
}
.mc-conv-compose__channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.mc-conv-compose__channel-chip:hover {
    background: var(--color-hover-bg);
}
.mc-conv-compose__channel-chip[aria-pressed="true"] {
    background: var(--color-teal-light);
    color: var(--color-teal);
    border-color: var(--color-teal);
}

/* Quote-reply inset (hidden until data-quote-message-uid is set) */
.mc-conv-compose__quote {
    display: none;
    grid-template-columns: 3px 1fr auto;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--color-subtle-bg);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--bubble-tone-sms);
}
.mc-conv-compose[data-quote-message-uid]:not([data-quote-message-uid=""]) .mc-conv-compose__quote {
    display: grid;
    grid-template-columns: 1fr auto;
}
.mc-conv-compose[data-active-channel="whatsapp"] .mc-conv-compose__quote { border-left-color: var(--bubble-tone-whatsapp); }
.mc-conv-compose[data-active-channel="telegram"] .mc-conv-compose__quote { border-left-color: var(--bubble-tone-telegram); }
.mc-conv-compose[data-active-channel="email"]    .mc-conv-compose__quote { border-left-color: var(--bubble-tone-email); }
.mc-conv-compose__quote-content {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.mc-conv-compose__quote-author {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}
.mc-conv-compose__quote-body {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-conv-compose__quote-clear {
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mc-conv-compose__quote-clear:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}
.mc-conv-compose__quote-clear svg {
    width: 14px;
    height: 14px;
}

/* Main actions row */
.mc-conv-compose__main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-2);
    align-items: end;
}

.mc-conv-compose__icon-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 6px;
}

.mc-conv-compose__icon-btn {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.mc-conv-compose__icon-btn:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}
.mc-conv-compose__icon-btn svg {
    width: 18px;
    height: 18px;
}

.mc-conv-compose__textarea {
    width: 100%;
    min-height: 48px;
    max-height: 192px;
    resize: none;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-input);
    background: var(--color-subtle-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    outline: 0;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mc-conv-compose__textarea:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 2px var(--color-teal-ring);
}
.mc-conv-compose__textarea::placeholder {
    color: var(--color-text-muted);
}

.mc-conv-compose__send {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: var(--bubble-tone-sms);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-input);
    cursor: pointer;
    transition: background-color 120ms ease, opacity 120ms ease;
    min-height: 38px;
    margin-bottom: 5px;
}
.mc-conv-compose[data-active-channel="whatsapp"] .mc-conv-compose__send { background: var(--bubble-tone-whatsapp); }
.mc-conv-compose[data-active-channel="telegram"] .mc-conv-compose__send { background: var(--bubble-tone-telegram); }
.mc-conv-compose[data-active-channel="email"]    .mc-conv-compose__send { background: var(--bubble-tone-email); }
.mc-conv-compose__send:hover {
    filter: brightness(1.1);
}
.mc-conv-compose__send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.mc-conv-compose__send svg {
    width: 14px;
    height: 14px;
}

/* Footer — char counter + keyboard hint + cap warning */
.mc-conv-compose__footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}
.mc-conv-compose__hint {
    font-variant-numeric: tabular-nums;
}
.mc-conv-compose__counter {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.mc-conv-compose__counter--over {
    color: var(--color-error);
    font-weight: var(--weight-semibold);
}
.mc-conv-compose__warning {
    color: var(--color-error);
    font-weight: var(--weight-medium);
}

/* Readonly mode — banner replaces actions */
.mc-conv-compose[data-readonly="1"] .mc-conv-compose__main,
.mc-conv-compose[data-readonly="1"] .mc-conv-compose__footer,
.mc-conv-compose[data-readonly="1"] .mc-conv-compose__quote,
.mc-conv-compose[data-readonly="1"] .mc-conv-compose__channels {
    display: none;
}
.mc-conv-compose__readonly {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-warning-bg);
    color: var(--color-text);
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
}
.mc-conv-compose[data-readonly="1"] .mc-conv-compose__readonly {
    display: flex;
}
.mc-conv-compose__readonly svg {
    width: 16px;
    height: 16px;
    color: var(--color-warning);
}

/* Mobile <768 — send button moves to its own row */
@media (max-width: 767px) {
    .mc-conv-compose__main {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    .mc-conv-compose__icon-actions {
        order: 2;
        padding-bottom: 0;
    }
    .mc-conv-compose__textarea {
        order: 1;
    }
    .mc-conv-compose__send {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-bottom: 0;
    }
}

/* ============================================================================
 * mc-conv-profile-rail — C14 W6 (right 320px rail of SF6 master-detail inbox)
 *
 * 4 cards stacked: Identity / Quick actions / Tags / Last 5 sends.
 * Collapses to a 48px icon strip at tablet 768-1023. Hidden on mobile <768
 * (consumer renders it in a slide-up sheet via existing mc-side-panel).
 *
 * Spec: docs/messenger/COMPONENT-PROPOSALS.md#c14--mc-conv-profile-rail
 * Showcase anchor: /rui/ui#mc-conv-profile-rail
 * ============================================================================ */

.mc-conv-profile-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-page-bg);
    min-height: 400px;
    width: 320px;
    overflow-y: auto;
}

.mc-conv-profile-rail__card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-3);
    box-shadow: var(--shadow-card);
}

.mc-conv-profile-rail__card-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--space-2);
}

/* Card 1 — Identity */
.mc-conv-profile-rail__identity {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}
.mc-conv-profile-rail__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--bubble-tone-sms);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}
.mc-conv-profile-rail[data-primary-channel="whatsapp"] .mc-conv-profile-rail__avatar { background: var(--bubble-tone-whatsapp); }
.mc-conv-profile-rail[data-primary-channel="telegram"] .mc-conv-profile-rail__avatar { background: var(--bubble-tone-telegram); }
.mc-conv-profile-rail[data-primary-channel="email"]    .mc-conv-profile-rail__avatar { background: var(--bubble-tone-email); }
.mc-conv-profile-rail__name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-conv-profile-rail__contact {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}
.mc-conv-profile-rail__contact a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.mc-conv-profile-rail__contact a:hover {
    color: var(--color-teal);
    text-decoration: underline;
}

/* Channel verification chips inside identity card */
.mc-conv-profile-rail__channels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border);
}
.mc-conv-profile-rail__channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--weight-medium);
    background: var(--color-subtle-bg);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mc-conv-profile-rail__channel-chip[data-state="verified"] {
    background: var(--color-success-bg);
    color: var(--color-success);
}
.mc-conv-profile-rail__channel-chip[data-state="not-opted-in"] {
    color: var(--color-text-disabled);
    text-decoration: line-through;
}
.mc-conv-profile-rail__channel-chip svg {
    width: 11px;
    height: 11px;
}

/* Card 2 — Quick actions */
.mc-conv-profile-rail__actions {
    display: grid;
    gap: 4px;
}
.mc-conv-profile-rail__action-btn {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    text-decoration: none;
    transition: background-color 120ms ease;
}
.mc-conv-profile-rail__action-btn:hover {
    background: var(--color-hover-bg);
}
.mc-conv-profile-rail__action-btn svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
}
.mc-conv-profile-rail__action-btn:hover svg {
    color: var(--color-text);
}

/* Card 3 — Tags */
.mc-conv-profile-rail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}
.mc-conv-profile-rail__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--color-teal-light);
    color: var(--color-teal);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}
.mc-conv-profile-rail__tag-remove {
    width: 14px;
    height: 14px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.7;
}
.mc-conv-profile-rail__tag-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}
.mc-conv-profile-rail__tag-remove svg {
    width: 10px;
    height: 10px;
}
.mc-conv-profile-rail__tag-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-input);
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-xs);
}
.mc-conv-profile-rail__tag-input:focus {
    outline: 2px solid var(--color-teal-ring);
    border-style: solid;
    border-color: var(--color-border-focus);
}

/* Card 4 — Last sends */
.mc-conv-profile-rail__sends {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 4px;
}
.mc-conv-profile-rail__send {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
    border: 0;
    text-align: left;
    color: var(--color-text);
    width: 100%;
    font: inherit;
    transition: background-color 120ms ease;
}
.mc-conv-profile-rail__send:hover {
    background: var(--color-hover-bg);
}
.mc-conv-profile-rail__send-channel {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--bubble-tone-sms);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
}
.mc-conv-profile-rail__send[data-channel="whatsapp"] .mc-conv-profile-rail__send-channel { background: var(--bubble-tone-whatsapp); }
.mc-conv-profile-rail__send[data-channel="telegram"] .mc-conv-profile-rail__send-channel { background: var(--bubble-tone-telegram); }
.mc-conv-profile-rail__send[data-channel="email"]    .mc-conv-profile-rail__send-channel { background: var(--bubble-tone-email); }
.mc-conv-profile-rail__send-body {
    font-size: var(--text-xs);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mc-conv-profile-rail__send-meta {
    font-size: 10px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.mc-conv-profile-rail__send-status {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    margin-right: 4px;
    vertical-align: middle;
}
.mc-conv-profile-rail__send[data-status="delivered"] .mc-conv-profile-rail__send-status,
.mc-conv-profile-rail__send[data-status="read"]      .mc-conv-profile-rail__send-status {
    background: var(--color-success);
}
.mc-conv-profile-rail__send[data-status="failed"]    .mc-conv-profile-rail__send-status {
    background: var(--color-error);
}

/* Empty state per card */
.mc-conv-profile-rail__empty {
    padding: var(--space-2) 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}
.mc-conv-profile-rail__empty-cta {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-teal);
    text-decoration: underline;
    font-size: var(--text-xs);
    font-style: normal;
}

/* Loading state — 4 skeleton cards */
.mc-conv-profile-rail__skeleton {
    background: linear-gradient(90deg,
        var(--color-hover-bg) 0%,
        var(--color-active-bg) 50%,
        var(--color-hover-bg) 100%);
    background-size: 200% 100%;
    animation: mc-conv-thread-shimmer 1400ms ease-in-out infinite;
    border-radius: var(--radius-card);
    height: 80px;
}

/* Tablet 768-1023 — collapsed strip variant */
.mc-conv-profile-rail--collapsed {
    width: 48px;
    padding: var(--space-2) 0;
    gap: var(--space-2);
    align-items: center;
}
.mc-conv-profile-rail--collapsed .mc-conv-profile-rail__card-title,
.mc-conv-profile-rail--collapsed .mc-conv-profile-rail__card > *:not(.mc-conv-profile-rail__avatar):not(.mc-conv-profile-rail__action-btn) {
    display: none;
}
.mc-conv-profile-rail--collapsed .mc-conv-profile-rail__card {
    padding: var(--space-1);
    border: 0;
    box-shadow: none;
    background: transparent;
    display: flex;
    justify-content: center;
}
.mc-conv-profile-rail--collapsed .mc-conv-profile-rail__action-btn {
    grid-template-columns: 1fr;
    width: 32px;
    height: 32px;
    justify-items: center;
    padding: 0;
}
.mc-conv-profile-rail--collapsed .mc-conv-profile-rail__action-btn span {
    display: none;
}

/* Mobile <768 — hidden (consumer renders in mc-side-panel sheet) */
@media (max-width: 767px) {
    .mc-conv-profile-rail {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-conv-profile-rail__skeleton { animation: none; }
}

/* ===========================================================================
 * mc-channel-priority-ladder — C24 W7 (ordered channel ladder for S7.2 wizard)
 *
 * Used by cross-channel campaign wizard step 1. Renders an ordered, reorderable
 * list of channels with per-row health pill + ↑/↓/× chiclets + Add menu.
 *
 * Keyboard-first reorder (L53) — no drag. Per-row brand-tone accent uses
 * --msg-ch-{channel} via [data-channel] selector. Health pill colours use
 * semantic --color-{success,warning,danger} (state ≠ category — L13 rule).
 *
 * Showcase: /rui/ui#mc-channel-priority-ladder
 * =========================================================================== */
.mc-channel-priority-ladder {
    display: block;
    color: var(--color-text);
}
.mc-channel-priority-ladder__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-channel-priority-ladder__row {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mc-channel-priority-ladder__row[data-channel="email"]    { --row-tone: var(--msg-ch-email); --row-ink: var(--msg-ch-email-ink); }
.mc-channel-priority-ladder__row[data-channel="sms"]      { --row-tone: var(--msg-ch-sms);   --row-ink: var(--msg-ch-sms-ink); }
.mc-channel-priority-ladder__row[data-channel="whatsapp"] { --row-tone: var(--msg-ch-wa);    --row-ink: var(--msg-ch-wa-ink); }
.mc-channel-priority-ladder__row[data-channel="telegram"] { --row-tone: var(--msg-ch-tg);    --row-ink: var(--msg-ch-tg-ink); }

.mc-channel-priority-ladder__row[data-health="warning"] {
    border-color: var(--color-warning);
}
.mc-channel-priority-ladder__row[data-health="error"] {
    border-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 5%, var(--color-card-bg));
}

.mc-channel-priority-ladder__position {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--color-subtle-bg);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.mc-channel-priority-ladder__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--row-tone, var(--color-text-muted)) 18%, var(--color-card-bg));
    color: var(--row-ink, var(--color-text));
    flex: 0 0 auto;
}

.mc-channel-priority-ladder__label {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.4;
}

.mc-channel-priority-ladder__health {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
}
.mc-channel-priority-ladder__health--ok {
    background: color-mix(in srgb, var(--color-success) 14%, var(--color-card-bg));
    color: var(--color-success);
}
.mc-channel-priority-ladder__health--warning {
    background: color-mix(in srgb, var(--color-warning) 14%, var(--color-card-bg));
    color: var(--color-warning);
}
.mc-channel-priority-ladder__health--error {
    background: color-mix(in srgb, var(--color-error) 14%, var(--color-card-bg));
    color: var(--color-error);
}

.mc-channel-priority-ladder__reconnect {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-error);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.mc-channel-priority-ladder__reconnect:hover {
    color: var(--color-error-dark);
}

.mc-channel-priority-ladder__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.mc-channel-priority-ladder__action {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-input);
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.mc-channel-priority-ladder__action:hover:not(:disabled) {
    background: var(--color-hover-bg);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.mc-channel-priority-ladder__action:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
.mc-channel-priority-ladder__action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.mc-channel-priority-ladder__action--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-error) 8%, var(--color-card-bg));
    color: var(--color-error);
    border-color: var(--color-error);
}

.mc-channel-priority-ladder__add-wrap {
    position: relative;
    display: inline-block;
}
.mc-channel-priority-ladder__add {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-input);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}
.mc-channel-priority-ladder__add:hover:not(:disabled) {
    background: var(--color-hover-bg);
    border-color: var(--color-text-muted);
    border-style: solid;
}
.mc-channel-priority-ladder__add:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
.mc-channel-priority-ladder__add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.mc-channel-priority-ladder__add-chev {
    margin-left: var(--space-1);
}

.mc-channel-priority-ladder__add-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    z-index: 20;
    min-width: 200px;
    padding: var(--space-1);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-dropdown);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mc-channel-priority-ladder__add-menu[hidden] { display: none; }
.mc-channel-priority-ladder__add-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    border-radius: var(--radius-input);
    text-align: left;
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-channel-priority-ladder__add-option:hover,
.mc-channel-priority-ladder__add-option:focus-visible {
    background: var(--color-hover-bg);
    outline: none;
}
.mc-channel-priority-ladder__add-option-icon {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mc-channel-priority-ladder__add-option-icon[data-channel-tone="email"]    { background: color-mix(in srgb, var(--msg-ch-email) 24%, var(--color-card-bg)); color: var(--msg-ch-email-ink); }
.mc-channel-priority-ladder__add-option-icon[data-channel-tone="sms"]      { background: color-mix(in srgb, var(--msg-ch-sms)   24%, var(--color-card-bg)); color: var(--msg-ch-sms-ink); }
.mc-channel-priority-ladder__add-option-icon[data-channel-tone="whatsapp"] { background: color-mix(in srgb, var(--msg-ch-wa)    24%, var(--color-card-bg)); color: var(--msg-ch-wa-ink); }
.mc-channel-priority-ladder__add-option-icon[data-channel-tone="telegram"] { background: color-mix(in srgb, var(--msg-ch-tg)    24%, var(--color-card-bg)); color: var(--msg-ch-tg-ink); }

/* Read-only mode — for S7.6 review */
.mc-channel-priority-ladder--readonly .mc-channel-priority-ladder__actions,
.mc-channel-priority-ladder--readonly .mc-channel-priority-ladder__add-wrap,
.mc-channel-priority-ladder--readonly .mc-channel-priority-ladder__reconnect {
    display: none;
}
.mc-channel-priority-ladder--readonly .mc-channel-priority-ladder__row {
    grid-template-columns: auto auto 1fr auto;
}

/* Mobile — stack rows */
@media (max-width: 480px) {
    .mc-channel-priority-ladder__row {
        grid-template-columns: auto auto 1fr;
        grid-template-areas:
            "pos icon label"
            "pos icon health"
            "actions actions actions";
        row-gap: var(--space-2);
    }
    .mc-channel-priority-ladder__row .mc-channel-priority-ladder__position { grid-area: pos; }
    .mc-channel-priority-ladder__row .mc-channel-priority-ladder__icon { grid-area: icon; align-self: center; }
    .mc-channel-priority-ladder__row .mc-channel-priority-ladder__label { grid-area: label; }
    .mc-channel-priority-ladder__row .mc-channel-priority-ladder__health { grid-area: health; justify-self: start; }
    .mc-channel-priority-ladder__row .mc-channel-priority-ladder__reconnect { grid-area: health; justify-self: end; }
    .mc-channel-priority-ladder__row .mc-channel-priority-ladder__actions { grid-area: actions; justify-self: stretch; gap: var(--space-2); }
    .mc-channel-priority-ladder__action {
        flex: 1 1 auto;
        height: 44px; /* A11 touch target */
    }
    .mc-channel-priority-ladder__add {
        display: flex;
        width: 100%;
        justify-content: center;
        height: 44px;
    }
}

/* ===========================================================================
 * mc-multi-coverage-bar — C25 W7 (stacked per-channel reach % bar)
 *
 * Used by S7.4 wizard audience step + S7.7 funnel chart. Renders a horizontal
 * stacked bar with per-segment label + bottom legend. Brand-tones segments via
 * --msg-ch-{channel}; the "unreachable" tail segment uses neutral gray.
 *
 * Showcase: /rui/ui#mc-multi-coverage-bar
 * =========================================================================== */
.mc-multi-coverage-bar {
    display: block;
    color: var(--color-text);
}
.mc-multi-coverage-bar__caption {
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-subtle-bg);
    border-radius: var(--radius-input);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
}
.mc-multi-coverage-bar__caption[hidden] { display: none; }
.mc-multi-coverage-bar__bar {
    display: flex;
    width: 100%;
    height: 24px;
    border-radius: var(--radius-input);
    overflow: hidden;
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
}
.mc-multi-coverage-bar__segment {
    width: var(--mc-seg-pct, 0%);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 var(--space-2);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    overflow: hidden;
    transition: filter 100ms ease;
}
.mc-multi-coverage-bar__segment:hover,
.mc-multi-coverage-bar__segment:focus-visible {
    filter: brightness(0.94);
    outline: none;
}
.mc-multi-coverage-bar__segment:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-border-focus);
}

/* Channel tones — solid pastel fill (L13 carve-out: brand-tone for category data). */
.mc-multi-coverage-bar__segment[data-channel-tone="email"]    { background: color-mix(in srgb, var(--msg-ch-email) 70%, white); }
.mc-multi-coverage-bar__segment[data-channel-tone="sms"]      { background: color-mix(in srgb, var(--msg-ch-sms)   70%, white); }
.mc-multi-coverage-bar__segment[data-channel-tone="whatsapp"] { background: color-mix(in srgb, var(--msg-ch-wa)    70%, white); }
.mc-multi-coverage-bar__segment[data-channel-tone="telegram"] { background: color-mix(in srgb, var(--msg-ch-tg)    70%, white); }
.mc-multi-coverage-bar__segment[data-channel-tone="multi"]    { background: color-mix(in srgb, var(--msg-ch-multi) 70%, white); }

.mc-multi-coverage-bar__segment--unreachable {
    background: repeating-linear-gradient(
        45deg,
        var(--color-subtle-bg),
        var(--color-subtle-bg) 6px,
        var(--color-hover-bg) 6px,
        var(--color-hover-bg) 12px
    );
    color: var(--color-text-muted);
}

.mc-multi-coverage-bar__segment-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-multi-coverage-bar__segment-label-pct {
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* Legend — 1 line per channel below the bar, dual-purpose for narrow segments */
.mc-multi-coverage-bar__legend {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
}
.mc-multi-coverage-bar__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text);
}
.mc-multi-coverage-bar__legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: 0 0 auto;
}
.mc-multi-coverage-bar__legend-swatch[data-channel-tone="email"]    { background: color-mix(in srgb, var(--msg-ch-email) 70%, white); }
.mc-multi-coverage-bar__legend-swatch[data-channel-tone="sms"]      { background: color-mix(in srgb, var(--msg-ch-sms)   70%, white); }
.mc-multi-coverage-bar__legend-swatch[data-channel-tone="whatsapp"] { background: color-mix(in srgb, var(--msg-ch-wa)    70%, white); }
.mc-multi-coverage-bar__legend-swatch[data-channel-tone="telegram"] { background: color-mix(in srgb, var(--msg-ch-tg)    70%, white); }
.mc-multi-coverage-bar__legend-swatch[data-channel-tone="multi"]    { background: color-mix(in srgb, var(--msg-ch-multi) 70%, white); }
.mc-multi-coverage-bar__legend-swatch--unreachable {
    background: repeating-linear-gradient(
        45deg,
        var(--color-subtle-bg),
        var(--color-subtle-bg) 3px,
        var(--color-hover-bg) 3px,
        var(--color-hover-bg) 6px
    );
    border: 1px solid var(--color-border);
}
.mc-multi-coverage-bar__legend-label {
    font-weight: var(--weight-medium);
}
.mc-multi-coverage-bar__legend-value {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Funnel mode — taller bar, denser stack */
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__bar {
    flex-direction: column;
    height: auto;
    min-height: 32px;
    border-radius: var(--radius-card);
    overflow: visible;
    border: 0;
    background: transparent;
    gap: var(--space-1);
}
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment {
    width: 100%;
    height: 28px;
    border-radius: var(--radius-sm);
    padding: 0 var(--space-3);
    position: relative;
}
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--mc-seg-pct, 0%);
    background: inherit;
    border-radius: var(--radius-sm);
    z-index: 0;
}
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment {
    background: var(--color-subtle-bg);
    color: var(--color-text);
}
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment-label {
    position: relative;
    z-index: 1;
    color: var(--color-text);
}
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment[data-channel-tone="email"]::after    { background: color-mix(in srgb, var(--msg-ch-email) 75%, white); }
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment[data-channel-tone="sms"]::after      { background: color-mix(in srgb, var(--msg-ch-sms)   75%, white); }
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment[data-channel-tone="whatsapp"]::after { background: color-mix(in srgb, var(--msg-ch-wa)    75%, white); }
.mc-multi-coverage-bar[data-mode="funnel"] .mc-multi-coverage-bar__segment[data-channel-tone="telegram"]::after { background: color-mix(in srgb, var(--msg-ch-tg)    75%, white); }

/* Empty + loading states */
.mc-multi-coverage-bar__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-subtle-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-text-muted);
}
.mc-multi-coverage-bar__empty svg {
    color: var(--color-text-muted);
    opacity: 0.5;
}
.mc-multi-coverage-bar__empty-text {
    font-size: var(--text-sm);
    text-align: center;
}

.mc-multi-coverage-bar__skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mc-multi-coverage-bar__skeleton-bar {
    height: 24px;
    border-radius: var(--radius-input);
    background: linear-gradient(90deg,
        var(--color-hover-bg) 0%,
        var(--color-active-bg, var(--color-subtle-bg)) 50%,
        var(--color-hover-bg) 100%);
    background-size: 200% 100%;
    animation: mc-mcb-shimmer 1400ms ease-in-out infinite;
}
.mc-multi-coverage-bar__skeleton-legend {
    display: flex;
    gap: var(--space-3);
}
.mc-multi-coverage-bar__skeleton-legend span {
    flex: 1 1 0;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        var(--color-hover-bg) 0%,
        var(--color-active-bg, var(--color-subtle-bg)) 50%,
        var(--color-hover-bg) 100%);
    background-size: 200% 100%;
    animation: mc-mcb-shimmer 1400ms ease-in-out infinite;
}
@keyframes mc-mcb-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-multi-coverage-bar__skeleton-bar,
    .mc-multi-coverage-bar__skeleton-legend span { animation: none; }
}

/* Mobile — taller bar so segment labels stay readable */
@media (max-width: 480px) {
    .mc-multi-coverage-bar__bar {
        height: 28px;
    }
    .mc-multi-coverage-bar__segment-label-text {
        display: none;
    }
    .mc-multi-coverage-bar__legend {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* ===========================================================================
 * mc-fallback-strategy-card — C26 W7 (radio cards for send-strategy choice)
 *
 * Used by S7.5 wizard step 4 strategy choice (send_and_stop / send_to_all).
 * Each card is role="radio"; group is role="radiogroup". Arrow keys move
 * selection between cards (per ARIA radio pattern). Read-only mode hides
 * the unselected card entirely.
 *
 * Showcase: /rui/ui#mc-fallback-strategy-card
 * =========================================================================== */
[data-mc-fallback-strategy-card] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    color: var(--color-text);
}
.mc-fallback-strategy-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color 80ms ease, background 80ms ease, box-shadow 80ms ease, transform 80ms ease;
}
.mc-fallback-strategy-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}
.mc-fallback-strategy-card:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}
.mc-fallback-strategy-card--selected {
    border-color: var(--color-border-focus);
    background: color-mix(in srgb, var(--color-border-focus) 6%, var(--color-card-bg));
    box-shadow: 0 0 0 1px var(--color-border-focus);
}
.mc-fallback-strategy-card[data-disabled="1"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mc-fallback-strategy-card__illust {
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-subtle-bg);
    border-radius: var(--radius-input);
    color: var(--color-text);
    overflow: hidden;
}
.mc-fallback-strategy-card__illust svg {
    width: 90%;
    max-width: 180px;
    height: auto;
}

.mc-fallback-strategy-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}
.mc-fallback-strategy-card__marker {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.mc-fallback-strategy-card--selected .mc-fallback-strategy-card__marker {
    border-color: var(--color-border-focus);
    background: var(--color-border-focus);
}
.mc-fallback-strategy-card--selected .mc-fallback-strategy-card__marker::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-card-bg);
}

.mc-fallback-strategy-card__blurb {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

[data-mc-fallback-strategy-card][data-readonly="1"] .mc-fallback-strategy-card:not(.mc-fallback-strategy-card--selected) {
    display: none;
}
[data-mc-fallback-strategy-card][data-readonly="1"] {
    grid-template-columns: minmax(0, 1fr);
}
[data-mc-fallback-strategy-card][data-readonly="1"] .mc-fallback-strategy-card {
    cursor: default;
}

/* Hide native radio inputs — semantics come from role+aria on the card */
.mc-fallback-strategy-card__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile — stack vertically */
@media (max-width: 480px) {
    [data-mc-fallback-strategy-card] {
        grid-template-columns: minmax(0, 1fr);
    }
    .mc-fallback-strategy-card__illust {
        height: 64px;
    }
}


/* ==========================================================================
   bKash checkout panel
   --------------------------------------------------------------------------
   Rendered inline on the subscription payment page when the bKash gateway is
   selected (see resources/views/refactor/pages/cashier/bkash/panel.blade.php).

   bKash pink is hard-coded rather than themed: it is the payment brand's own
   colour and must stay identical in light and dark mode, the same way card
   network marks do. Everything around it uses theme tokens so the panel still
   sits correctly on either background.
   ========================================================================== */

.mc-bkash-panel {
    --bkash-pink: #E2136E;
    --bkash-pink-dark: #C10F5E;

    /* Sits directly below the order-summary total, in the slot the generic
       "Proceed to payment" button would otherwise occupy. */
    margin-top: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    background: var(--color-card-bg);
    /* Faint brand wash so the panel reads as bKash's without tinting text */
    background-image: linear-gradient(180deg, rgba(226, 19, 110, .05), transparent 120px);
}

.mc-bkash-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.mc-bkash-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px 8px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--bkash-pink);
    background: rgba(226, 19, 110, .1);
    white-space: nowrap;
}

.mc-bkash-panel-desc {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.mc-bkash-panel-amount {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card);
    background: var(--color-bg-subtle, rgba(127, 127, 127, .07));
}

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

.mc-bkash-panel-amount-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.mc-bkash-panel-form {
    margin-top: var(--space-4);
}

.mc-bkash-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: 13px var(--space-5);
    border: 0;
    border-radius: 999px;
    background: var(--bkash-pink);
    color: #fff;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background .15s ease, transform .06s ease, box-shadow .15s ease;
}

.mc-bkash-btn:hover {
    background: var(--bkash-pink-dark);
    box-shadow: 0 4px 14px rgba(226, 19, 110, .3);
}

.mc-bkash-btn:active {
    transform: translateY(1px);
}

/* Keyboard focus must stay visible against the pink fill */
.mc-bkash-btn:focus-visible {
    outline: 2px solid var(--bkash-pink);
    outline-offset: 3px;
}

.mc-bkash-panel-note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.5;
}

/* Gateway picker: tint the selected bKash row with the brand colour so the
   inline panel below it reads as belonging to that choice. */
.mc-payment-method-card.is-selected[data-gateway-type="bkash"] {
    border-color: var(--bkash-pink, #E2136E);
    box-shadow: 0 0 0 1px var(--bkash-pink, #E2136E);
}

@media (max-width: 480px) {
    .mc-bkash-panel-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .mc-bkash-panel-amount {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
}

/* --------------------------------------------------------------------------
   bKash official logo lockup
   Artwork is bKash's own and is never recoloured. The "bKash" wordmark ink is
   near-black, so on a dark or coloured surface it is given a white plate
   instead — that keeps the mark exact while staying legible.
   -------------------------------------------------------------------------- */

.mc-bkash-logo {
    display: inline-flex;
    align-items: center;
}

.mc-bkash-logo svg {
    height: var(--bkash-logo-h, 26px);
    width: auto;
    display: block;
}

.mc-bkash-logo--plate,
[data-theme="dark"] .mc-bkash-logo {
    background: #fff;
    border-radius: 6px;
    padding: 4px 7px;
}

/* Brand lockups are wide (bKash is ~2.19:1); the default 36px square icon slot
   would crop them. Opt a row into an auto-width, plateless slot instead. */
.mc-payment-method-icon--brand {
    width: auto;
    min-width: 36px;
    padding: 0 var(--space-2);
    background: transparent;
}

.mc-payment-method-card.is-selected .mc-payment-method-icon--brand {
    background: transparent;
}

/* Pay button: the logo carries the brand, so the label does not repeat it. */
.mc-bkash-btn .mc-bkash-logo {
    flex-shrink: 0;
}


/* ==================================================================
 * RUI — Customer "Email Warmup" section
 * Namespace: rui-warmup-* — section-scoped.
 *
 * Chart-palette discipline (L13): warmup state is encoded with --chart-N,
 * never the semantic success/error tokens — a completed ramp is a category,
 * not a system health signal. Every state chip pairs its colour with an icon
 * and a text label, so colour is never the only cue.
 * ================================================================== */

.rui-warmup-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.rui-warmup-page-grid > div:first-child { min-width: 0; }

/* The server list is a 5-column table (name, progress, today, 14-day trend,
   action) that needs ~810px; beside the 320px rail it only gets ~650px at
   1280px, which clipped the trend column and hid Manage. Drop the rail below
   the list until there is room, and let the list scroll rather than clip. */
@media (max-width: 1599px) {
    .rui-warmup-index-grid { grid-template-columns: minmax(0, 1fr); }
    .rui-warmup-index-grid > .mc-page-rail { position: static; }
}
.rui-warmup-index-grid #warmup-listing { overflow-x: auto; }

/* Rail card bodies sit directly under .mc-card-preview-header, which carries its
   own padding — so each body has to bring its own or the text runs to the card
   edge. Same inset as .rui-servers-checklist, the house rail-body rhythm. */
.rui-warmup-rail-text {
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.55;
}

.rui-warmup-steps {
    margin: 0;
    /* Left inset is the card padding plus room for the "1." markers, which are
       drawn outside the content box. */
    padding: var(--space-3) var(--space-4) var(--space-4) var(--space-8);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.55;
}

.rui-warmup-steps li + li { margin-top: var(--space-2); }

/* ─── Empty state ─── */
.rui-warmup-empty {
    text-align: center;
    padding: var(--space-8) var(--space-5);
}

.rui-warmup-empty-icon {
    font-size: 40px;
    color: var(--color-text-disabled);
}

.rui-warmup-empty-title {
    margin: var(--space-3) 0 var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.rui-warmup-empty-desc {
    margin: 0 auto var(--space-4);
    max-width: 420px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ─── Server list ─── */
.rui-warmup-name-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.rui-warmup-name {
    display: block;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rui-warmup-name:hover { color: var(--color-teal); }

.rui-warmup-subline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 3px;
    font-size: var(--text-xs);
    min-width: 0;
}

/* The strategy name is the first thing to give up room when the cell is tight. */
.rui-warmup-subline .rui-warmup-muted {
    font-size: var(--text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rui-warmup-list td { vertical-align: middle; }

.rui-warmup-dot { color: var(--color-border); }
.rui-warmup-muted { color: var(--color-text-muted); font-size: var(--text-sm); }

/* State chip: colour + icon + label, never colour alone. */
.rui-warmup-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px 1px 6px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--chip-color, var(--color-text-muted));
    background: color-mix(in srgb, var(--chip-color, var(--color-text-muted)) 12%, transparent);
    white-space: nowrap;
}

.rui-warmup-chip .material-symbols-rounded { font-size: 14px; }

/* ─── Meters ─── */
.rui-warmup-progress-cell { min-width: 0; }

.rui-warmup-meter {
    flex: 1;
    height: 6px;
    min-width: 60px;
    border-radius: var(--radius-full);
    background: var(--color-bg-muted);
    overflow: hidden;
}

.rui-warmup-meter-thin { height: 4px; margin-top: 4px; }

.rui-warmup-meter-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width .3s ease;
}

.rui-warmup-meter-label {
    margin-top: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.rui-warmup-today {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--text-sm);
}

.rui-warmup-today-value { font-weight: var(--weight-semibold); color: var(--color-text); }
.rui-warmup-today-sep { color: var(--color-border); }

.rui-warmup-spark { display: block; }

/* ─── Detail hero ─── */
.rui-warmup-hero { margin-bottom: var(--space-4); }

.rui-warmup-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-5);
    padding: var(--space-5);
}

.rui-warmup-hero-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rui-warmup-hero-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

/* The hero number is the headline — everything else on the card supports it. */
.rui-warmup-hero-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.rui-warmup-hero-unit {
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    color: var(--color-text-muted);
}

.rui-warmup-hero-foot {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.rui-warmup-hero-alert { margin: 0 var(--space-5); }

.rui-warmup-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
}

.mc-card-body .rui-warmup-actions { padding: var(--space-4) 0 0; }

/* ─── Chart ─── */
.rui-warmup-chart-card { margin-bottom: var(--space-4); }
.rui-warmup-chart { height: 280px; width: 100%; }

/* ─── Day-by-day table ─── */
.rui-warmup-breakdown td, .rui-warmup-breakdown th { white-space: nowrap; }
.rui-warmup-row-today { background: var(--color-teal-light); }
.rui-warmup-day { font-weight: var(--weight-semibold); }

.rui-warmup-date {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.rui-warmup-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.rui-warmup-bar-pct {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    min-width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ─── Setup form ─── */
.rui-warmup-modes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.rui-warmup-mode {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
}

.rui-warmup-preview {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-muted);
}

/* In the rail the preview already sits in a card — drop the double frame, but
   keep the house rail-body inset (see .rui-warmup-rail-text) so the figures
   don't run into the card edge. */
.mc-card-preview .rui-warmup-preview {
    margin-top: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border: 0;
    background: none;
}

.rui-warmup-preview-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.mc-card-preview .rui-warmup-preview-title { display: none; }

.rui-warmup-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-3);
}

.rui-warmup-preview-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rui-warmup-preview-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.rui-warmup-preview-value {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* ─── Signpost on the server edit page ─── */
.rui-warmup-signpost-body {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.rui-warmup-signpost-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    background: var(--chart-4-bg);
    color: var(--chart-4);
}

@media (max-width: 640px) {
    .rui-warmup-hero-grid { padding: var(--space-4); gap: var(--space-4); }
    .rui-warmup-actions { padding: var(--space-3) var(--space-4); }
    .rui-warmup-list { display: block; overflow-x: auto; }
}

/* ─── Plan library ─── */
.rui-warmup-plan-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-input);
    background: var(--chart-1-bg);
    color: var(--chart-1);
}

.rui-warmup-plan-icon .material-symbols-rounded { font-size: 18px; }

.rui-warmup-milestone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 10px;
    color: var(--color-text-muted);
}

.rui-warmup-milestone-label { width: 38px; text-align: right; flex-shrink: 0; }
.rui-warmup-milestone-value { width: 50px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

.rui-warmup-milestone-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.rui-warmup-used-by {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.rui-warmup-used-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--color-text);
    text-decoration: none;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rui-warmup-used-chip:hover { border-color: var(--color-teal); color: var(--color-teal); }
.rui-warmup-used-chip .material-symbols-rounded { font-size: 13px; color: var(--color-text-muted); }

.rui-warmup-list-note {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ─── Plan builder ─── */
.rui-warmup-builder {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-5);
    align-items: start;
}

.rui-warmup-builder-form { min-width: 0; }

/* The preview is the point of the builder — keep it in view while scrolling. */
.rui-warmup-builder-preview {
    position: sticky;
    top: var(--space-4);
    min-width: 0;
}

@media (max-width: 1199px) {
    .rui-warmup-builder { grid-template-columns: 1fr; }
    .rui-warmup-builder-preview { position: static; }
}

.rui-warmup-section-head { margin-bottom: var(--space-5); }

.rui-warmup-section-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-1);
    color: var(--color-text);
}

.rui-warmup-section-desc {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.rui-warmup-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

/* Fixed column counts, mirroring the admin planner's repeat(N,1fr) rows. auto-fit
   re-flows as fields show/hide (growth + limit fields are conditional), so the
   same row rendered two different widths depending on which limit type was
   picked. Explicit tracks keep the field widths stable across every branch. */
.rui-warmup-field-row-2 { grid-template-columns: repeat(2, 1fr); }
.rui-warmup-field-row-3 { grid-template-columns: repeat(3, 1fr); }
.rui-warmup-field-row-4 { grid-template-columns: repeat(4, 1fr); }

/* The admin planner has no breakpoint here; the customer builder keeps one so
   four number inputs do not shrink below usable width on a laptop or tablet. */
@media (max-width: 1399px) {
    .rui-warmup-field-row-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .rui-warmup-field-row-2,
    .rui-warmup-field-row-3,
    .rui-warmup-field-row-4 { grid-template-columns: 1fr; }
}

.rui-warmup-readout {
    display: flex;
    align-items: center;
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: var(--space-2) var(--space-3);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.rui-warmup-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.rui-warmup-readout-table {
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.rui-warmup-readout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

.rui-warmup-readout-row:last-child { border-bottom: 0; }
.rui-warmup-readout-row span { color: var(--color-text-muted); }
.rui-warmup-readout-row strong { color: var(--color-text); font-variant-numeric: tabular-nums; }

.rui-warmup-preview-block {
    background: var(--color-subtle-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.rui-warmup-preview-block:last-child { margin-bottom: 0; }

.rui-warmup-preview-block-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin: 0 0 var(--space-3);
    color: var(--color-text);
}

.rui-warmup-chart-hints {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    padding: 0 var(--space-1);
}

.rui-warmup-explanations {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.rui-warmup-explanations strong { color: var(--color-text); }
.rui-warmup-explanations span { color: var(--color-text-muted); }

/* ============================================================================
   COUPON (subscription order summary)

   Sits directly above the divider so an applied discount is adjacent to the
   total it changes. Collapsed behind a <details> by default: most customers
   have no code, and a permanently open field on a payment page sends people
   off to hunt for one instead of paying.
   ============================================================================ */

.mc-order-summary-coupon {
    margin-top: var(--space-4);
}

.mc-order-summary-coupon-details > summary {
    cursor: pointer;
    list-style: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-primary);
}

.mc-order-summary-coupon-details > summary::-webkit-details-marker {
    display: none;
}

.mc-order-summary-coupon-details > summary:hover {
    text-decoration: underline;
}

.mc-order-summary-coupon-form {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
    margin-top: var(--space-3);
}

.mc-order-summary-coupon-form .mc-form-input {
    flex: 1;
    min-width: 0;
    letter-spacing: 0.04em;
}

.mc-order-summary-coupon-form .mc-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.mc-order-summary-coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.mc-order-summary-coupon-applied > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-success, #16a34a);
}

.mc-order-summary-coupon-applied form {
    margin: 0;
}

/* ----------------------------------------------------------------
   mc-multiselect — rich variant
   Full-width trigger with a selection counter, plus a dropdown that
   can carry a sticky search box, a select-all row, status badges and
   a footer. Every piece is opt-in markup; the plain multiselect above
   is unaffected.
   ---------------------------------------------------------------- */
.mc-multiselect-block {
    display: block;
    width: 100%;
}

.mc-multiselect-block .mc-multiselect-trigger {
    padding: var(--space-2) var(--space-3);
    min-height: var(--space-10);
}

.mc-multiselect-block.has-selection .mc-multiselect-trigger {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
}

.mc-multiselect-trigger-count {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-teal);
    background: var(--color-card-bg);
    border-radius: var(--radius-full);
    padding: 2px var(--space-2);
}

.mc-multiselect-block:not(.has-selection) .mc-multiselect-trigger-count {
    display: none;
}

/* The dropdown scrolls; the head and foot must not scroll with it. */
.mc-multiselect-dropdown-rich {
    max-height: 340px;
    padding: 0;
    overflow-y: auto;
}

.mc-multiselect-head,
.mc-multiselect-foot {
    position: sticky;
    background: var(--color-card-bg);
    z-index: 1;
}

.mc-multiselect-head {
    top: 0;
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.mc-multiselect-foot {
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mc-multiselect-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.mc-multiselect-search-wrap .material-symbols-rounded {
    position: absolute;
    left: var(--space-2);
    font-size: 18px !important;
    color: var(--color-text-muted);
    pointer-events: none;
}

.mc-multiselect-search {
    width: 100%;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-bg);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.mc-multiselect-search:focus {
    outline: none;
    border-color: var(--color-teal);
}

.mc-multiselect-clear {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-teal);
}

.mc-multiselect-clear:hover { text-decoration: underline; }

.mc-multiselect-all-row {
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
}

.mc-multiselect-group-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.mc-multiselect-group-count {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* The option row: name on the left, price and status pinned right. */
.mc-multiselect-option {
    align-items: flex-start;
    gap: var(--space-3);
}

.mc-multiselect-option .mc-checkbox {
    margin-top: 2px;
    flex: 0 0 auto;
}

.mc-multiselect-option-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.mc-multiselect-option-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-multiselect-option-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mc-multiselect-option.is-inactive .mc-multiselect-option-name {
    color: var(--color-text-secondary);
}

/* Selected rows read as selected without having to hunt for the tick. */
.mc-multiselect-dropdown-rich .mc-checkbox-label:has(.mc-checkbox:checked) {
    background: var(--color-teal-light);
}

/* ----------------------------------------------------------------
   mc-audience — automation list + segment picker
   (pages/automations/_audience_picker, js/AudiencePicker.js)
   ---------------------------------------------------------------- */
.mc-audience {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mc-audience-field {
    min-width: 0;
}

.mc-audience-label {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}

.mc-audience-optional {
    margin-left: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular, 400);
    color: var(--color-text-muted);
}

/* Same height as .mc-form-input so the pickers line up with the name field. */
.mc-audience .mc-multiselect-trigger {
    min-height: var(--input-height, var(--space-10));
    gap: var(--space-2);
}

.mc-audience .mc-multiselect-trigger:focus-visible {
    outline: none;
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 20%, transparent);
}

.mc-audience-trigger-icon {
    flex: 0 0 auto;
    font-size: 18px !important;
    color: var(--color-text-muted);
}

.mc-audience .has-selection .mc-audience-trigger-icon {
    color: var(--color-teal);
}

/* Room for the sticky head/foot, and above sibling dropdowns in the card. */
.mc-audience .mc-multiselect-dropdown-rich {
    max-height: 320px;
    z-index: var(--z-dropdown, 200);
}

.mc-audience .mc-multiselect-option {
    align-items: center;
}

.mc-audience .mc-multiselect-option .mc-checkbox {
    margin-top: 0;
}

.mc-audience-group-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-audience .mc-multiselect.is-disabled .mc-multiselect-trigger {
    cursor: not-allowed;
    opacity: 0.6;
    background: var(--color-bg);
}

.mc-audience .mc-multiselect.has-error .mc-multiselect-trigger {
    border-color: var(--color-error);
}

.mc-audience-help {
    display: block;
    font-size: var(--text-xs);
    line-height: 1.5;
}


/* ============================================================
   Live template thumbnail — see public/refactor/js/LiveThumb.js
   Fills whatever thumb box it sits in (same slot an <img> would take);
   falls back to a 4:5 box when the parent has no height of its own.
   ============================================================ */
.mc-live-thumb {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #fff;
    pointer-events: none;
}
.mc-live-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color-hover-bg) 0%, var(--color-border) 50%, var(--color-hover-bg) 100%);
    background-size: 200% 100%;
    animation: mc-live-thumb-shimmer 1.4s ease-in-out infinite;
    transition: opacity 200ms ease;
}
.mc-live-thumb.is-loaded::before {
    opacity: 0;
    animation: none;
}
.mc-live-thumb-frame {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    background: #fff;
    transform-origin: 0 0;
    pointer-events: none;
}
@keyframes mc-live-thumb-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-live-thumb::before { animation: none; }
}

/* ==========================================================================
   Form layout gallery — create-form popup + builder Layouts modal
   (resources/views/refactor/pages/forms/_layout_gallery.blade.php)
   ========================================================================== */

.fb-create-gallery { margin-top: var(--space-6); }
.fb-create-gallery-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-3); }
.fb-create-gallery-head .mc-form-label { margin-bottom: 0; }
.fb-create-gallery-head .mc-form-help { margin-top: 0; }

.fb-gallery-filters {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.fb-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    font: inherit; font-size: 0.8125rem; font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.fb-chip:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.fb-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fb-chip-count {
    min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.6875rem; font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    background: var(--color-active-bg);
    border-radius: var(--radius-full);
}
.fb-chip.is-active {
    color: #fff; background: var(--color-text); border-color: var(--color-text);
}
.fb-chip.is-active .fb-chip-count { color: var(--color-text); background: rgba(255, 255, 255, 0.9); }
[data-theme="dark"] .fb-chip.is-active { color: var(--color-card-bg); }

.fb-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-4);
}
.fb-gallery-card {
    display: flex; flex-direction: column;
    padding: 0; text-align: left; font: inherit; color: inherit;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
    transition: transform 180ms var(--mc-modal-ease, ease), box-shadow 180ms ease, border-color 150ms ease;
}
.fb-gallery-card[hidden] { display: none; }
.fb-gallery-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    box-shadow: 0 12px 24px -12px rgba(16, 24, 40, 0.25);
}
.fb-gallery-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fb-gallery-card.is-selected {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 2px var(--color-teal), 0 12px 24px -12px rgba(95, 50, 234, 0.35);
}
.fb-gallery-thumb {
    position: relative; display: block;
    aspect-ratio: 5 / 3;
    background: var(--color-bg-muted);
    overflow: hidden;
}
.fb-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.fb-gallery-card:hover .fb-gallery-thumb img { transform: scale(1.03); }
.fb-gallery-thumb .mc-live-thumb { height: 100%; aspect-ratio: auto; }
.fb-gallery-check {
    position: absolute; top: 10px; right: 10px;
    width: 26px; height: 26px; border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: var(--color-teal);
    box-shadow: 0 4px 10px -2px rgba(95, 50, 234, 0.5);
    opacity: 0; transform: scale(0.6);
    transition: opacity 150ms ease, transform 200ms var(--mc-modal-ease, ease);
}
.fb-gallery-check .material-symbols-rounded { font-size: 18px; }
.fb-gallery-card.is-selected .fb-gallery-check { opacity: 1; transform: scale(1); }
.fb-gallery-meta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: 10px 12px;
    border-top: 1px solid var(--color-border);
}
.fb-gallery-name {
    min-width: 0; font-size: 0.8125rem; font-weight: var(--weight-semibold); color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-gallery-tag {
    flex-shrink: 0; font-size: 0.6875rem; font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    padding: 2px 8px; border-radius: var(--radius-full);
    background: var(--color-active-bg);
}
.fb-gallery-empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-muted); font-size: var(--text-base);
    border: 1px dashed var(--color-border-strong); border-radius: var(--radius-card);
}
.fb-gallery-empty[hidden] { display: none; }
.fb-gallery-empty .material-symbols-rounded { font-size: 32px; color: var(--color-text-disabled); }

/* .mc-modal / backdrop set display, which would beat the UA [hidden] rule. */
.mc-modal[hidden],
.mc-modal-backdrop[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Form preview (popup chassis) — shown the way a visitor sees it: a 720px
   card (the live popup's max width) sized to its content, on a dimmed stage.
   PreviewModal.js sets --popup-h from the form's height (_fitPopupToContent).
   -------------------------------------------------------------------------- */
.mc-preview-modal-stage:has(.mc-preview-modal-frame[data-chassis="popup"]) {
    padding: 40px 24px;
    background-color: #2A2F3D;
    background-image:
        radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 100% 100%, 48px 48px, 48px 48px;
}
.mc-preview-modal-frame[data-chassis="popup"],
.mc-preview-modal-frame[data-chassis="popup"][data-device="desktop"] {
    max-width: 720px;
    height: auto;
    max-height: 100%;
    filter: none;
}
.mc-preview-modal-frame[data-chassis="popup"][data-device="mobile"] { max-width: 375px; padding: 0; }
.mc-preview-modal-frame[data-chassis="popup"].is-fitted .mc-preview-modal-iframe-wrap {
    flex: 0 0 auto;
    height: var(--popup-h, 480px);
    max-height: 100%;
}
.mc-preview-modal-frame[data-chassis="popup"] .mc-preview-modal-iframe-wrap,
.mc-preview-modal-frame[data-chassis="popup"][data-device="mobile"] .mc-preview-modal-iframe-wrap {
    margin: 0;
    outline: none;
    border: 0;
    border-radius: 18px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 40px 80px -24px rgba(0, 0, 0, 0.6),
        0 16px 32px -16px rgba(0, 0, 0, 0.45);
}
.mc-preview-modal-frame[data-chassis="popup"] .mc-preview-modal-corner-close {
    top: -14px; right: -14px;
    background: #FFFFFF; color: #344054; border: 0;
    box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.08), 0 6px 14px -4px rgba(0, 0, 0, 0.45);
}
@media (max-width: 768px) {
    .mc-preview-modal-frame[data-chassis="popup"] .mc-preview-modal-corner-close { top: 8px; right: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Email Warmup — per-server builder, schedule, health, bulk
   (rui-warmup-*, see resources/views/refactor/pages/sending/warmup)
   ═══════════════════════════════════════════════════════════════════════ */

/* Builder sits below the page grid, full width — like the admin builder. */
.rui-warmup-setup { margin-top: var(--space-5); }

/* Mode switch: two selectable cards */
.rui-warmup-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.rui-warmup-mode-option {
    position: relative;
    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);
    background: var(--color-card-bg);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rui-warmup-mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.rui-warmup-mode-option > .material-symbols-rounded { color: var(--color-primary); font-size: 22px; }
.rui-warmup-mode-option strong { display: block; font-size: var(--text-sm); color: var(--color-text); }
.rui-warmup-mode-option small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.rui-warmup-mode-option:has(input:checked) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.rui-warmup-mode-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.rui-warmup-mode-option:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Preset cards */
.rui-warmup-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}

.rui-warmup-preset-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.rui-warmup-preset-card input { position: absolute; opacity: 0; pointer-events: none; }
.rui-warmup-preset-card:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.rui-warmup-preset-card.is-selected,
.rui-warmup-preset-card:has(input:checked) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.rui-warmup-preset-card:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.rui-warmup-preset-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.rui-warmup-preset-card-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    min-width: 0;
    overflow-wrap: anywhere;
}

.rui-warmup-preset-card-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

.rui-warmup-preset-card-desc {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.rui-warmup-preset-card-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: auto;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* Hero: next day / finish date / weekends strip */
.rui-warmup-hero-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-4);
}

.rui-warmup-hero-strip .rui-warmup-chip { padding: 3px 10px 3px 8px; }
.rui-warmup-hero-strip .rui-warmup-chip strong { color: var(--color-text); }

/* Health card */
.rui-warmup-health { margin-bottom: var(--space-5); }

.rui-warmup-health-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

/* Schedule */
.rui-warmup-schedule-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.rui-warmup-schedule-mini { font-size: var(--text-xs); margin-bottom: var(--space-2); }
.rui-warmup-schedule-mini td { padding: 6px var(--space-2); }

.rui-warmup-schedule-scroll { max-height: 560px; overflow-y: auto; }
.rui-warmup-schedule-scroll thead th { position: sticky; top: 0; background: var(--color-card-bg); z-index: 1; }

.rui-warmup-row-muted td { color: var(--color-text-muted); }
.rui-warmup-row-skipped td { background: color-mix(in srgb, var(--chart-4) 8%, transparent); }

.rui-warmup-strike {
    text-decoration: line-through;
    color: var(--color-text-muted);
    margin-right: var(--space-1);
}

/* Overview bulk bar */
.rui-warmup-bulkbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-card-bg));
    font-size: var(--text-sm);
}

.rui-warmup-bulkbar[hidden] { display: none; }

/* Apply-to-servers picker */
.rui-warmup-server-picks {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 260px;
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
}

.rui-warmup-server-picks .mc-checkbox-label { gap: var(--space-2); }

@media (max-width: 640px) {
    .rui-warmup-mode-switch,
    .rui-warmup-health-grid { grid-template-columns: 1fr; }
    .rui-warmup-hero-strip { padding: 0 var(--space-4) var(--space-4); }
}