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

@import url('variables.css');

/* ==========================================================================
   Buttons
   ========================================================================== */

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

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

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

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

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

/* Primary */
.mc-btn-primary {
    background: var(--color-teal);
    color: var(--color-white);
    border-color: var(--color-teal);
    transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}
.mc-btn-primary:hover {
    background: var(--color-teal-hover);
    border-color: var(--color-teal-hover);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(0, 124, 137, 0.20);
}

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

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

/* Ghost */
.mc-btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: transparent;
}
.mc-btn-ghost:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}
.mc-btn-danger-ghost {
    color: var(--color-error);
}
.mc-btn-danger-ghost:hover {
    background: var(--color-error-light, rgba(231,76,60,0.08));
    color: var(--color-error);
}

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

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

/* Sizes */
.mc-btn-xs { height: var(--space-6); padding: 0 var(--space-2); font-size: var(--text-xs); }
.mc-btn-sm { height: var(--space-7); padding: 0 var(--space-3); font-size: var(--text-sm); }
.mc-btn-lg { height: var(--space-10); padding: 0 var(--space-7); font-size: var(--text-md); }
.mc-btn-xl { height: var(--space-12); padding: 0 var(--space-8); font-size: var(--text-lg); }
.mc-btn-block { display: flex; width: 100%; }
.mc-btn-icon { padding: var(--space-2); min-width: var(--space-9); min-height: var(--space-9); }
.mc-btn-icon svg { width: 20px; height: 20px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mc-badge-default { background: var(--color-hover-bg); color: var(--color-text-secondary); }
.mc-badge-teal    { background: var(--color-teal-light); color: var(--color-teal); }
.mc-badge-green   { background: var(--color-success-bg); color: var(--color-success); }
.mc-badge-red     { background: var(--color-error-bg); color: var(--color-error); }
.mc-badge-orange  { background: var(--color-warning-bg); color: var(--color-warning); }
.mc-badge-blue    { background: var(--color-info-bg); color: var(--color-info); }
.mc-badge-purple  { background: var(--chart-6-bg); color: var(--chart-6); }

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

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

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

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

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

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

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

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

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

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

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

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

.mc-identity-select-error {
    margin-top: var(--space-2);
    padding: var(--space-2-5) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-warning);
    background: var(--color-warning-bg, rgba(234, 179, 8, 0.08));
    border: var(--space-px) solid var(--color-warning-border, rgba(234, 179, 8, 0.2));
    border-radius: var(--radius-card);
    line-height: 1.5;
}
.mc-identity-select-error a {
    color: var(--color-teal);
    text-decoration: underline;
}

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

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

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

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

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

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

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

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

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

/* Settings section — titled block within settings content */
.mc-settings-section { margin-bottom: var(--space-6); }
.mc-settings-section-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}
.mc-settings-section-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mc-form-select,
.mc-card select {
    appearance: none;
    display: block;
    width: 100%;
    height: var(--input-height);
    padding: 0 var(--space-9) 0 var(--space-3-5);
    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-card-bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236E655B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: var(--space-3);
    border: var(--space-px) solid var(--color-border-strong);
    border-radius: var(--radius-input);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
    cursor: pointer;
}
.mc-form-select:focus,
.mc-card select:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 var(--space-0-5) var(--color-teal-ring);
}

/* Switch toggle */
.mc-switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.mc-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.mc-switch-slider {
    width: var(--space-10);
    height: var(--space-5-5, 22px);
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
    position: relative;
    transition: background var(--transition-fast);
}
.mc-switch-slider::after {
    content: '';
    position: absolute;
    top: var(--space-0-5);
    left: var(--space-0-5);
    width: var(--space-4-5, 18px);
    height: var(--space-4-5, 18px);
    background: var(--color-white);
    border-radius: 50%;
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}
.mc-switch-input:checked + .mc-switch-slider { background: var(--color-teal); }
.mc-switch-input:checked + .mc-switch-slider::after { transform: translateX(var(--space-4-5, 18px)); }

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

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

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

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

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

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

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

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

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

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

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

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

.mc-alert-icon {
    flex-shrink: 0;
    width: var(--space-5);
    height: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-0-5);
}

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

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

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

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

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

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

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

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

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

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

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

.mc-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--color-card-bg);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
    border-left: 1.5px solid var(--color-teal);
    pointer-events: auto;
    animation: mc-toast-in var(--transition-base) forwards;
    max-width: 340px;
    min-width: 220px;
}
.mc-toast.success { border-left-color: var(--color-success); }
.mc-toast.error   { border-left-color: var(--color-error); }
.mc-toast.warning { border-left-color: var(--color-warning); }
.mc-toast.info    { border-left-color: var(--color-info); }
.mc-toast.removing { animation: mc-toast-out 200ms ease forwards; }

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

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

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

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

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

.mc-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    z-index: var(--z-modal);
    background: var(--color-card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
    max-width: 560px;
    width: calc(100% - var(--space-8));
    max-height: calc(100vh - var(--space-12));
    overflow-y: auto;
    opacity: 0; transition: all var(--transition-base);
}
.mc-modal.active { opacity: 1; transform: translate(-50%, -50%) scale(1); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Dropdown positioned above trigger (for bottom-of-page menus) */
.mc-dropdown-menu-up {
    bottom: 100%;
    top: auto;
    margin-bottom: var(--space-1);
    transform: translateY(var(--space-2));
}
.mc-dropdown-menu-up.active { transform: translateY(0);
    margin-top: 0;
    left: 0;
    right: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Modern pagination bar — used by shared `_pagination.blade.php` component.
   Layout: summary on left, numbered nav on right, lives inside card footer. */
.mc-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: var(--space-px) solid var(--color-border);
    background: var(--color-bg-subtle);
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
}
.mc-pagination-summary {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mc-pagination-summary strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}
.mc-pagination-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.mc-pagination-page,
.mc-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-8);
    height: var(--space-8);
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    background: var(--color-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}
.mc-pagination-page:hover,
.mc-pagination-btn:hover {
    background: var(--color-hover-bg);
    border-color: var(--color-border-strong);
    text-decoration: none;
    color: var(--color-text);
}
.mc-pagination-page.is-current {
    background: var(--color-teal);
    color: var(--color-white);
    border-color: var(--color-teal);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.mc-pagination-page.is-current:hover {
    background: var(--color-teal);
    color: var(--color-white);
    border-color: var(--color-teal);
}
.mc-pagination-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.mc-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-6);
    height: var(--space-8);
    color: var(--color-text-muted);
    user-select: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Banner meta — info line / mini stats beneath description */
.mc-banner-meta {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mc-banner-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.mc-banner-meta-item .material-symbols-rounded {
    font-size: 16px;
    opacity: 0.7;
}
.mc-banner-meta-value {
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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, rgba(0, 175, 169, 0.18)),
                0 4px 12px rgba(0, 0, 0, 0.08);
}
.mc-template-card-check {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-teal);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.mc-template-card--picker.is-selected .mc-template-card-check {
    opacity: 1;
    transform: scale(1);
}

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

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

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

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

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

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

.mc-template-list-thumb {
    width: 80px;
    aspect-ratio: 9 / 10;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
    background: var(--color-hover-bg);
    flex-shrink: 0;
}
.mc-template-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.mc-template-list-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-disabled);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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(--color-teal);
    border-radius: var(--radius-full);
    transition: width .5s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mc-grow-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    max-width: 560px;
}

.mc-grow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

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

.mc-grow-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base);
    background: var(--color-card-bg);
    text-decoration: none;
    color: inherit;
}

.mc-grow-card:hover {
    border-color: var(--color-teal);
    box-shadow: 0 2px 10px rgba(0, 124, 137, 0.10);
    text-decoration: none;
}

.mc-grow-card.active,
.mc-grow-card:focus-visible {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 1px var(--color-teal);
    background: var(--color-teal-light);
    outline: none;
}

.mc-grow-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

.mc-grow-card-icon .material-symbols-rounded {
    font-size: 32px;
}

.mc-grow-card-icon svg {
    width: 32px;
    height: 32px;
}

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

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

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

/* ==========================================================================
   Email Performance Card (inline stat row with period selector)
   Like Mailchimp's "Email performance · Bot filtering on"
   ========================================================================== */

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

.mc-perf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
    flex-wrap: wrap;
    gap: var(--space-3);
}

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

.mc-perf-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
}

.mc-perf-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-info);
    border-radius: var(--radius-full);
}

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

.mc-perf-period-btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    background: none;
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    cursor: pointer;
    transition: all .15s;
}

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

.mc-perf-period-btn.active {
    background: var(--color-card-bg);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    border-color: var(--color-border-strong);
}

.mc-perf-subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
    margin-bottom: var(--space-5);
}

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

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

.mc-perf-stat-label {
    font-size: var(--text-xs);
    color: var(--color-teal);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-1);
}

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

.mc-perf-stat-change {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
}

/* ==========================================================================
   Integration List — vertical list of integrations/apps with logo + description + CTA.
   Mailchimp "Recommended integrations" pattern.
   ========================================================================== */

.mc-integration-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.mc-integration-item:last-child {
    border-bottom: none;
}

.mc-integration-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-input);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-integration-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mc-integration-logo-text {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
}

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

.mc-integration-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-0-5);
}

.mc-integration-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.mc-integration-item .mc-btn {
    flex-shrink: 0;
}

/* Utility classes for common table cell patterns */
.mc-cell-secondary {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Extra small badge (inline with text) */
.mc-badge-xs {
    font-size: var(--text-xs);
    padding: 1px var(--space-1-5);
    vertical-align: middle;
    margin-left: var(--space-1);
}

/* Modal footer (popup form actions) */
.mc-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-5);
    margin-top: var(--space-5);
    border-top: var(--space-px) solid var(--color-border);
}

/* Form hint text */
.mc-form-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* Filter bar label */
.mc-filter-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Breadcrumb helpers */
.mc-breadcrumb-link {
    color: var(--color-text-muted);
    text-decoration: none;
}

.mc-breadcrumb-link:hover {
    color: var(--color-teal);
}

.mc-breadcrumb-sep {
    margin: 0 var(--space-1);
    color: var(--color-text-muted);
}

/* Column picker divider */
.mc-column-picker-divider {
    border-top: var(--space-px) solid var(--color-border);
    margin: var(--space-1) 0;
}

/* Loading placeholder */
.mc-loading-placeholder {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
}

/* Bulk action badge count */
.mc-btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-teal);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    margin-left: var(--space-1);
}

.mc-btn-badge:empty {
    display: none;
}

/* ==========================================================================
   Radio Card — rich option cards with title + description.
   Use instead of <select> when 2-4 options each need informative descriptions.
   Like subscription settings toggle rows, but for single-choice selection.
   ========================================================================== */

.mc-radio-cards {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-input);
    overflow: hidden;
}

.mc-radio-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    user-select: none;
    border-bottom: var(--space-px) solid var(--color-border);
    transition: background .15s;
    margin: 0;
}

.mc-radio-card:last-child {
    border-bottom: none;
}

.mc-radio-card:hover {
    background: var(--color-hover-bg);
}

.mc-radio-card.active {
    background: var(--color-hover-bg);
}

.mc-radio-card-input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    min-width: 18px;
    height: 18px;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    margin: 0;
    margin-top: 1px;
    cursor: pointer;
    position: relative;
    transition: border-color .15s;
}

.mc-radio-card-input:checked {
    border-color: var(--color-text);
}

.mc-radio-card-input:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background: var(--color-text);
    border-radius: 50%;
}

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

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

.mc-radio-card-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: var(--space-0-5);
}

/* ==========================================================================
   Rich Select — custom dropdown with label + description + optional icon
   per option. Replaces native <select> when options need more context.
   Requires RichSelect.js for interactivity.
   ========================================================================== */

.mc-rich-select {
    position: relative;
    width: 100%;
}

.mc-rich-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--space-10);
    padding: 0 var(--space-3);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border-strong);
    border-radius: var(--radius-input);
    cursor: pointer;
    font-size: var(--text-base);
    color: var(--color-text);
    text-align: left;
    transition: border-color .15s;
}

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

.mc-rich-select-trigger:focus {
    outline: none;
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-ring);
}

.mc-rich-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-rich-select-placeholder {
    color: var(--color-text-disabled);
}

.mc-rich-select-arrow {
    font-size: 20px;
    color: var(--color-text-muted);
    margin-left: var(--space-2);
    transition: transform .2s;
}

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

.mc-rich-select-dropdown {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-dropdown);
    max-height: 280px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}

.mc-rich-select.open .mc-rich-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mc-rich-select-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background .1s;
}

.mc-rich-select-option:hover {
    background: var(--color-hover-bg);
}

.mc-rich-select-option.selected {
    background: var(--color-teal-light);
}

.mc-rich-select-option-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.mc-rich-select-option-icon .material-symbols-rounded {
    font-size: 18px;
}

.mc-rich-select-option-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.mc-rich-select-option-content {
    flex: 1;
    min-width: 0;
}

.mc-rich-select-option-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    line-height: 1.3;
}

.mc-rich-select-option-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty state inside dropdown */
.mc-rich-select-empty {
    padding: var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Inline variant — for use inside filter bars */
.mc-rich-select-inline {
    width: auto;
    min-width: 160px;
}

.mc-rich-select-inline .mc-rich-select-trigger {
    height: var(--space-9);
    font-size: var(--text-sm);
    padding: 0 var(--space-2) 0 var(--space-3);
    gap: var(--space-1);
    border-color: var(--color-border);
}

.mc-rich-select-inline .mc-rich-select-dropdown {
    min-width: 240px;
}

/* Responsive: on small screens, dropdown goes full-width and may need more room */
@media (max-width: 480px) {
    .mc-rich-select-dropdown {
        max-height: 240px;
    }
    .mc-rich-select-option {
        padding: var(--space-3);
    }
    .mc-rich-select-inline {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================================
   Color Scheme Picker
   Reusable component: icon indicator + dropdown panel with palette cards.
   Used in topbar; can be placed anywhere a scheme selector is needed.

   Structure:
     .mc-color-scheme-icon              — 2×2 grid icon (auto-reflects current scheme)
       .mc-color-scheme-icon-block      — individual color block (×4)
     .mc-color-scheme-panel             — dropdown wrapper
       .mc-color-scheme-header          — title bar
       .mc-color-scheme-grid            — 2-column card grid
         .mc-color-scheme-card          — clickable palette card
           .mc-color-scheme-swatches    — 5-block swatch bar
             span.s1–.s5               — individual swatch blocks
           .mc-color-scheme-info        — name + description
           .mc-color-scheme-check       — active checkmark

   JS: ColorScheme.js (window.McColorScheme)
   ========================================================================== */

/* --- Icon: 2×2 color block grid (auto-reflects current scheme) --- */
.mc-color-scheme-icon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    gap: 1px;
    background: var(--color-card-bg);
}

.mc-color-scheme-icon-block {
    display: block;
}

.mc-color-scheme-icon-1 { background: var(--color-teal-active); }
.mc-color-scheme-icon-2 { background: var(--color-teal); }
.mc-color-scheme-icon-3 { background: var(--color-teal-hover); }
.mc-color-scheme-icon-4 { background: var(--color-teal-light); }

/* --- Panel --- */
.mc-color-scheme-panel {
    min-width: 340px;
    padding: 0;
}

@media (max-width: 767px) {
    /* Color scheme panel: full-width fixed on mobile (topbar is relative, not sticky) */
    .mc-dropdown-menu.mc-color-scheme-panel {
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        right: 0;
        width: 100vw;
        min-width: 0;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        box-shadow: var(--shadow-modal);
        z-index: calc(var(--z-topbar) + 10);
        background: var(--color-card-bg);
        margin-top: 0;
        transform: none;
    }

    .mc-dropdown-menu.mc-color-scheme-panel.active {
        transform: none;
    }

    .mc-color-scheme-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .mc-color-scheme-card {
        min-width: 0;
    }

    .mc-color-scheme-info {
        padding: var(--space-1-5) var(--space-2);
    }

    .mc-color-scheme-name {
        font-size: var(--text-xs);
    }

    .mc-color-scheme-desc {
        font-size: 10px;
        line-height: 1.3;
    }
}

.mc-color-scheme-header {
    padding: var(--space-3-5) var(--space-4);
    border-bottom: var(--space-px) solid var(--color-border);
}

.mc-color-scheme-header-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.mc-color-scheme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-3);
}

/* --- Card --- */
.mc-color-scheme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-card-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    padding: 0;
    text-align: left;
    font-family: inherit;
    outline: none;
}

.mc-color-scheme-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.mc-color-scheme-card.active {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 2px var(--color-teal-ring);
}

/* --- Swatch bar: 5 flat color blocks side-by-side --- */
.mc-color-scheme-swatches {
    display: flex;
    height: 32px;
    width: 100%;
    flex-shrink: 0;
}

.mc-color-scheme-swatches span {
    flex: 1;
}

.mc-color-scheme-info {
    padding: var(--space-2) var(--space-2-5);
}

.mc-color-scheme-name {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    line-height: var(--leading-tight);
}

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

.mc-color-scheme-check {
    display: none;
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    color: #fff;
    font-size: var(--text-md);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.mc-color-scheme-card.active .mc-color-scheme-check {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-color-scheme-check .material-symbols-rounded {
    font-size: 18px;
    font-variation-settings: 'FILL' 1;
}

/* --- Flat swatch blocks per scheme (5 blocks: darkest → lightest) --- */
.mc-color-scheme-card[data-color-scheme="default"] .s1 { background: #004D54; }
.mc-color-scheme-card[data-color-scheme="default"] .s2 { background: #007C89; }
.mc-color-scheme-card[data-color-scheme="default"] .s3 { background: #34B8C4; }
.mc-color-scheme-card[data-color-scheme="default"] .s4 { background: #8DD8DF; }
.mc-color-scheme-card[data-color-scheme="default"] .s5 { background: #E0F5F5; }

.mc-color-scheme-card[data-color-scheme="blue"] .s1 { background: #00435C; }
.mc-color-scheme-card[data-color-scheme="blue"] .s2 { background: #00698F; }
.mc-color-scheme-card[data-color-scheme="blue"] .s3 { background: #4A9CC5; }
.mc-color-scheme-card[data-color-scheme="blue"] .s4 { background: #8EC4E0; }
.mc-color-scheme-card[data-color-scheme="blue"] .s5 { background: #E0F0F7; }

.mc-color-scheme-card[data-color-scheme="green"] .s1 { background: #055A2D; }
.mc-color-scheme-card[data-color-scheme="green"] .s2 { background: #098547; }
.mc-color-scheme-card[data-color-scheme="green"] .s3 { background: #3EB574; }
.mc-color-scheme-card[data-color-scheme="green"] .s4 { background: #8ED4A8; }
.mc-color-scheme-card[data-color-scheme="green"] .s5 { background: #E0F5E9; }

.mc-color-scheme-card[data-color-scheme="brown"] .s1 { background: #553010; }
.mc-color-scheme-card[data-color-scheme="brown"] .s2 { background: #81430F; }
.mc-color-scheme-card[data-color-scheme="brown"] .s3 { background: #BF6823; }
.mc-color-scheme-card[data-color-scheme="brown"] .s4 { background: #D9A872; }
.mc-color-scheme-card[data-color-scheme="brown"] .s5 { background: #F5EBE0; }

.mc-color-scheme-card[data-color-scheme="pink"] .s1 { background: #8A3162; }
.mc-color-scheme-card[data-color-scheme="pink"] .s2 { background: #BE4C89; }
.mc-color-scheme-card[data-color-scheme="pink"] .s3 { background: #D87AB0; }
.mc-color-scheme-card[data-color-scheme="pink"] .s4 { background: #E8A8CC; }
.mc-color-scheme-card[data-color-scheme="pink"] .s5 { background: #F5E0ED; }

.mc-color-scheme-card[data-color-scheme="grey"] .s1 { background: #110E0B; }
.mc-color-scheme-card[data-color-scheme="grey"] .s2 { background: #221C17; }
.mc-color-scheme-card[data-color-scheme="grey"] .s3 { background: #555555; }
.mc-color-scheme-card[data-color-scheme="grey"] .s4 { background: #AAAAAA; }
.mc-color-scheme-card[data-color-scheme="grey"] .s5 { background: #EBEBEB; }

.mc-color-scheme-card[data-color-scheme="white"] .s1 { background: #222222; }
.mc-color-scheme-card[data-color-scheme="white"] .s2 { background: #4A4A4A; }
.mc-color-scheme-card[data-color-scheme="white"] .s3 { background: #888888; }
.mc-color-scheme-card[data-color-scheme="white"] .s4 { background: #C8C8C8; }
.mc-color-scheme-card[data-color-scheme="white"] .s5 { background: #F5F5F5; }

/* ═══════════════════════════════════════════════════════════════
   mc-settings-nav — Vertical sidebar navigation for settings/account pages
   5 variants: default, compact, card, pill, rich
   ═══════════════════════════════════════════════════════════════ */

/* --- Shared layout: 2-column (sidebar + content) --- */
.mc-settings-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    min-height: 400px;
}
@media (max-width: 900px) {
    .mc-settings-layout { grid-template-columns: 1fr; }
    .mc-settings-layout .mc-settings-nav { border-right: none; border-bottom: var(--space-px) solid var(--color-border); }
}

.mc-settings-content {
    padding: var(--space-6);
    min-width: 0;
}

/* --- Variant 1: DEFAULT (left border accent, icon + title + desc) --- */
.mc-settings-nav {
    border-right: var(--space-px) solid var(--color-border);
    padding: var(--space-3) 0;
    background: var(--color-card-bg);
}

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

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

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

.mc-settings-nav-item-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-input);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}

.mc-settings-nav-item-icon .material-symbols-rounded { font-size: 20px; }

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

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

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

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

.mc-settings-nav-item-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    background: var(--color-teal);
    color: var(--color-white);
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    min-width: 18px;
    text-align: center;
    line-height: 16px;
    flex-shrink: 0;
    align-self: center;
}

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

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

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

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

/* --- Variant 2: COMPACT (no desc, tight spacing, smaller icons) --- */
.mc-settings-nav--compact .mc-settings-nav-item {
    padding: var(--space-2) var(--space-5);
    align-items: center;
}

.mc-settings-nav--compact .mc-settings-nav-item-icon {
    width: 28px;
    height: 28px;
    background: transparent;
}

.mc-settings-nav--compact .mc-settings-nav-item-icon .material-symbols-rounded { font-size: 18px; }

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

.mc-settings-nav--compact .mc-settings-nav-item-desc { display: none; }

/* --- Variant 3: CARD (each item is a rounded card, no left border) --- */
.mc-settings-nav--card {
    padding: var(--space-4);
    border-right: none;
}

.mc-settings-nav--card .mc-settings-nav-item {
    border-left: none;
    border-radius: var(--radius-card);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-1);
}

.mc-settings-nav--card .mc-settings-nav-item:hover {
    background: var(--color-hover-bg);
    box-shadow: none;
}

.mc-settings-nav--card .mc-settings-nav-item.active {
    background: var(--color-card-bg);
    box-shadow: var(--shadow-card);
    border-left: none;
}

.mc-settings-nav--card + .mc-settings-content {
    border-left: var(--space-px) solid var(--color-border);
}

/* --- Variant 4: PILL (horizontal pill shape, no sidebar border) --- */
.mc-settings-nav--pill {
    padding: var(--space-4);
    border-right: none;
}

.mc-settings-nav--pill .mc-settings-nav-item {
    border-left: none;
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-1);
    align-items: center;
}

.mc-settings-nav--pill .mc-settings-nav-item-icon {
    width: 28px;
    height: 28px;
    background: transparent;
    border-radius: var(--radius-full);
}

.mc-settings-nav--pill .mc-settings-nav-item-icon .material-symbols-rounded { font-size: 18px; }

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

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

.mc-settings-nav--pill .mc-settings-nav-item.active .mc-settings-nav-item-title { color: var(--color-white); }
.mc-settings-nav--pill .mc-settings-nav-item.active .mc-settings-nav-item-desc { color: rgba(255,255,255,.7); }

.mc-settings-nav--pill .mc-settings-nav-item-desc { display: none; }

.mc-settings-nav--pill + .mc-settings-content {
    border-left: var(--space-px) solid var(--color-border);
}

/* --- Variant 5: RICH (large icon boxes, status dot, full description) --- */
.mc-settings-nav--rich .mc-settings-nav-item {
    padding: var(--space-4) var(--space-5);
    gap: var(--space-4);
}

.mc-settings-nav--rich .mc-settings-nav-item-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-card);
}

.mc-settings-nav--rich .mc-settings-nav-item-icon .material-symbols-rounded { font-size: 22px; }

.mc-settings-nav--rich .mc-settings-nav-item-title {
    font-size: var(--text-base);
}

.mc-settings-nav--rich .mc-settings-nav-item-desc {
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}

.mc-settings-nav-item-status {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    align-self: center;
}

.mc-settings-nav-item-status.status-ok { background: var(--chart-1); }
.mc-settings-nav-item-status.status-warning { background: var(--chart-3); }
.mc-settings-nav-item-status.status-error { background: var(--color-error); }
.mc-settings-nav-item-status.status-inactive { background: var(--color-border-strong); }

/* --- mc-settings-layout inside mc-card (common pattern) --- */
/* --- mc-settings-layout inside mc-card (common pattern) --- */
.mc-card > .mc-settings-layout {
    margin: calc(var(--space-6) * -1);
}
.mc-card.mc-card-flush > .mc-settings-layout {
    margin: 0;
}

.mc-card > .mc-settings-layout .mc-settings-nav {
    border-radius: var(--radius-card) 0 0 var(--radius-card);
}

/* ═══════════════════════════════════════════════════════════════
   mc-onboarding — Full onboarding checklist (Mailchimp-style)
   Header with progress + 2-column: step nav + content panel + illustration
   ═══════════════════════════════════════════════════════════════ */

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

.mc-onboarding-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: var(--space-px) solid var(--color-border);
}

.mc-onboarding-headline {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-3);
    line-height: 1.3;
}

.mc-onboarding-progress-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

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

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

.mc-onboarding-progress-fill {
    height: 100%;
    background: var(--color-teal);
    border-radius: var(--radius-full);
    transition: width .6s cubic-bezier(.4,0,.2,1);
}

.mc-onboarding-body {
    display: grid;
    grid-template-columns: 300px 1fr;
}

@media (max-width: 800px) {
    .mc-onboarding-body { grid-template-columns: 1fr; }
    .mc-onboarding-steps { border-right: none; border-bottom: var(--space-px) solid var(--color-border); }
}

.mc-onboarding-steps {
    border-right: var(--space-px) solid var(--color-border);
    padding: var(--space-4) 0;
}

.mc-onboarding-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3-5) var(--space-6);
    cursor: pointer;
    transition: background var(--transition-fast);
    user-select: none;
    position: relative;
}

.mc-onboarding-step:hover { background: var(--color-hover-bg); }

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

.mc-onboarding-step-check {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
    font-size: 14px;
    color: transparent;
}

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

.mc-onboarding-step.active .mc-onboarding-step-check {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 2px var(--color-teal-ring);
}

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

.mc-onboarding-step.done .mc-onboarding-step-label {
    color: var(--color-text-muted);
}

.mc-onboarding-step-time {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-hover-bg);
    padding: 2px var(--space-2-5);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* Right panel */
.mc-onboarding-panel {
    padding: var(--space-8);
    display: none;
}

.mc-onboarding-panel.active {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: var(--space-8);
    align-items: center;
}

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

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

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

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

.mc-onboarding-panel-actions .mc-onboarding-video-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-teal);
    text-decoration: none;
    font-weight: var(--weight-medium);
    transition: color var(--transition-fast);
    padding-left: var(--space-3);
    border-left: var(--space-px) solid var(--color-border);
}

.mc-onboarding-panel-actions .mc-onboarding-video-link:hover { color: var(--color-teal-hover); }

.mc-onboarding-panel-actions .mc-onboarding-video-link .material-symbols-rounded { font-size: 20px; }

.mc-onboarding-panel-visual {
    width: 220px;
    height: 180px;
    background: var(--color-hover-bg);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mc-onboarding-panel-visual svg {
    width: 90%;
    height: 90%;
}

/* Skip link styling */
.mc-onboarding-skip {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-weight: var(--weight-medium);
    transition: color var(--transition-fast);
}

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

/* ==========================================================================
   Custom Icon System (mc-icon)
   Hand-drawn SVG icons with brand accent. Usage:
   @include('refactor.components.icons.mc-icon', ['icon' => 'home'])
   ========================================================================== */

.mc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    line-height: 0;
}

.mc-icon svg {
    display: block;
    flex-shrink: 0;
}

/* Size variants */
.mc-icon-xs { width: 14px; height: 14px; }
.mc-icon-xs svg { width: 14px; height: 14px; }

.mc-icon-sm { width: 18px; height: 18px; }
.mc-icon-sm svg { width: 18px; height: 18px; }

.mc-icon-md { width: 24px; height: 24px; }
.mc-icon-md svg { width: 24px; height: 24px; }

.mc-icon-lg { width: 32px; height: 32px; }
.mc-icon-lg svg { width: 32px; height: 32px; }

.mc-icon-xl { width: 48px; height: 48px; }
.mc-icon-xl svg { width: 48px; height: 48px; }

/* Muted variant — lighter weight for secondary contexts */
.mc-icon-muted { color: var(--color-text-muted); }

/* Teal branded variant — icon takes teal color */
.mc-icon-teal { color: var(--color-teal); }

/* Icon in a rounded background box — for stat cards, nav items */
.mc-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-input);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}

.mc-icon-box svg { width: 22px; height: 22px; }

/* Icon box color variants using chart palette */
.mc-icon-box.teal   { background: var(--chart-1-bg); color: var(--chart-1); }
.mc-icon-box.green  { background: var(--chart-2-bg); color: var(--chart-2); }
.mc-icon-box.blue   { background: var(--chart-3-bg); color: var(--chart-3); }
.mc-icon-box.orange { background: var(--chart-4-bg); color: var(--chart-4); }
.mc-icon-box.rose   { background: var(--chart-5-bg); color: var(--chart-5); }
.mc-icon-box.purple { background: var(--chart-6-bg); color: var(--chart-6); }

/* Icon gallery — for showcase page */
.mc-icon-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-3);
}

.mc-icon-gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-2);
    border-radius: var(--radius-input);
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    transition: all var(--transition-fast);
    cursor: default;
}

.mc-icon-gallery-item:hover {
    border-color: var(--color-teal);
    background: var(--color-teal-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mc-icon-gallery-item .mc-icon {
    color: var(--color-text);
}

.mc-icon-gallery-item:hover .mc-icon {
    color: var(--color-teal);
}

.mc-icon-gallery-label {
    font-size: 10px;
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
}

/* ----------------------------------------------------------------
   cr-nav — Icon pill navigation bar (shared across list + campaign pages)
   Moved from campaign-report.css to be available globally.
   ---------------------------------------------------------------- */
.cr-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) 0;
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.cr-nav-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-decoration: none !important;
    transition: all 0.15s ease;
    border: none;
    background: none;
    cursor: pointer;
    white-space: nowrap;
}

.cr-nav-item .material-symbols-rounded { font-size: 18px; }

.cr-nav-item:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
}

.cr-nav-item.active {
    background: var(--color-teal-light);
    color: var(--color-teal);
    font-weight: var(--weight-semibold);
    border: 2px solid var(--color-teal);
}

/* Dropdown */
.cr-nav-dropdown { position: relative; }

.cr-caret {
    font-size: 16px !important;
    margin-left: -2px;
    transition: transform 0.2s;
}

.cr-nav-dropdown.open .cr-caret { transform: rotate(180deg); }

.cr-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    min-width: 220px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(0,0,0,0.12));
    padding: var(--space-2) 0;
    z-index: 100;
    /* Smooth entrance — matches mc-dropdown-menu (no more instant display:block jump) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(var(--space-2) * -1));
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.cr-nav-dropdown.open .cr-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.cr-nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.1s;
}

.cr-nav-dropdown-menu a:hover { background: var(--color-hover-bg); }

.cr-nav-dropdown-menu a .material-symbols-rounded {
    font-size: 18px;
    color: var(--color-text-muted);
}

.cr-nav-dropdown-menu a.active {
    background: var(--color-teal-light);
    color: var(--color-teal);
    font-weight: var(--weight-semibold);
}

.cr-nav-dropdown-head {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-2) var(--space-4);
    font-size: 10px;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    background: var(--color-hover-bg);
    margin: 0 0 var(--space-1);
}

.cr-nav-dropdown-head .material-symbols-rounded { font-size: 14px; }

/* Items following a section head get subtle left indent */
.cr-nav-dropdown-head ~ a:not(.cr-nav-dropdown-head) {
    padding-left: var(--space-5);
}

.cr-nav-dropdown-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-1) 0;
}

.cr-nav-dropdown-menu-wide { min-width: 280px; }

/* ----------------------------------------------------------------
   mc-field-card — Accordion field manager (Mailchimp-style)
   Each field = collapsible card row. Collapsed: summary.
   Expanded: full edit form inside.
   Inspired by mc-preflight but for CRUD field management.
   ---------------------------------------------------------------- */
.mc-field-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-card-bg);
}

/* Individual field card */
.mc-field-card {
    border-bottom: 1px solid var(--color-border);
}
.mc-field-card:last-child { border-bottom: none; }

/* Collapsed summary row */
.mc-field-card-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}
.mc-field-card-summary:hover { background: var(--color-hover-bg); }

/* Chevron toggle */
.mc-field-card-chevron {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}
.mc-field-card.is-open .mc-field-card-chevron .material-symbols-rounded { transform: rotate(90deg); }

/* Icon circle (pastel bg per field type) */
.mc-field-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-field-card-icon .material-symbols-rounded { font-size: 20px; }

/* Summary text */
.mc-field-card-info { flex: 1; min-width: 0; }

.mc-field-card-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}

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

.mc-field-card-meta code {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    background: var(--color-hover-bg);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

/* Right side badges */
.mc-field-card-badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Expanded detail panel */
.mc-field-card-detail {
    display: none;
    padding: var(--space-3) var(--space-5);
    padding-left: calc(var(--space-5) + 20px + var(--space-3) + 40px + var(--space-3));
    background: var(--color-hover-bg);
    border-top: 1px solid var(--color-border);
}
.mc-field-card.is-open .mc-field-card-detail { display: block; }

/* Edit form grid inside detail — compact 3-column layout */
.mc-field-card-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-2) var(--space-3);
}

/* Compact labels + inputs inside field cards */
.mc-field-card-form .mc-form-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
}

.mc-field-card-form .mc-form-input,
.mc-field-card-form textarea.mc-form-input {
    font-size: var(--text-sm);
    padding: var(--space-1-5) var(--space-2-5);
}

.mc-field-card-form textarea.mc-form-input {
    min-height: 60px;
    resize: vertical;
}

.mc-field-card-form .mc-form-help {
    font-size: 10px;
}

/* Span 2 or 3 columns */
.mc-field-card-form-2col { grid-column: span 2; }
.mc-field-card-form-full { grid-column: 1 / -1; }

/* Options sub-section */
.mc-field-card-options {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.mc-field-card-option-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-2);
}

.mc-field-card-option-row .mc-form-input { flex: 1; }

/* Drag handle — always visible as subtle dots, highlights on hover */
.mc-field-card-drag {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--color-text-disabled);
    transition: color 0.15s;
}
.mc-field-card-drag:active { cursor: grabbing; }
.mc-field-card-summary:hover .mc-field-card-drag { color: var(--color-text-muted); }

/* Ghost while dragging */
.mc-field-card--ghost {
    opacity: 0.4;
    background: var(--color-teal-light);
}

/* Locked field (EMAIL) */
.mc-field-card--locked .mc-field-card-summary { cursor: default; }
.mc-field-card--locked .mc-field-card-chevron { visibility: hidden; }

/* Add field section */
.mc-field-add {
    padding: var(--space-4) var(--space-5);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    margin-top: var(--space-4);
}

.mc-field-add-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-field-add-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Responsive: field card form → stacked on tablet/mobile */
@media (max-width: 900px) {
    .mc-field-card-form {
        grid-template-columns: 1fr 1fr;
    }
    .mc-field-card-detail {
        padding-left: var(--space-5);
    }
}
@media (max-width: 599px) {
    .mc-field-card-form {
        grid-template-columns: 1fr;
    }
    .mc-field-card-summary {
        padding: var(--space-2) var(--space-3);
    }
    .mc-field-card-detail {
        padding: var(--space-3);
    }
    .mc-field-card-icon { width: 32px; height: 32px; }
    .mc-field-card-icon .material-symbols-rounded { font-size: 16px; }
}

/* TAG input min-width so it never collapses too small */
.mc-field-card-form input[style*="text-transform:uppercase"] {
    min-width: 60px;
}

/* ==========================================================================
   mc-inline-edit — Click-to-edit inline values
   Shows a static value; clicking it reveals the matching input control.
   Save on Enter / blur, cancel on Escape.
   Supports: text, number, date, select, textarea.
   ========================================================================== */

.mc-inline-edit {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--space-8);
    max-width: 100%;
}

/* ── Static display (value shown when not editing) ── */
.mc-inline-edit-value {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-input);
    border: 1px solid transparent;
    font-size: var(--text-base);
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 40px;
    line-height: 1.4;
    word-break: break-word;
}

.mc-inline-edit-value:hover {
    background: var(--color-hover-bg);
    border-color: var(--color-border);
}

/* Pencil icon — shown on hover */
.mc-inline-edit-value .mc-inline-edit-icon {
    font-size: 14px;
    color: var(--color-text-disabled);
    transition: color var(--transition-fast);
    flex-shrink: 0;
}
.mc-inline-edit-value:hover .mc-inline-edit-icon {
    color: var(--color-teal);
}

/* Placeholder when value is empty */
.mc-inline-edit-value.is-empty {
    color: var(--color-text-disabled);
    font-style: italic;
}

/* ── Edit mode (input revealed) ── */
.mc-inline-edit-control {
    display: none;
    align-items: center;
    gap: var(--space-1-5);
    width: 100%;
}

.mc-inline-edit.is-editing .mc-inline-edit-value { display: none; }
.mc-inline-edit.is-editing .mc-inline-edit-control { display: inline-flex; }

.mc-inline-edit-control .mc-form-input,
.mc-inline-edit-control .mc-form-select,
.mc-inline-edit-control textarea.mc-form-input {
    font-size: var(--text-base);
    padding: var(--space-1) var(--space-2);
    min-width: 120px;
    flex: 1;
}

.mc-inline-edit-control textarea.mc-form-input {
    min-height: 60px;
    resize: vertical;
}

/* Action buttons (save / cancel) */
.mc-inline-edit-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.mc-inline-edit-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    background: transparent;
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}

.mc-inline-edit-actions button:hover {
    background: var(--color-hover-bg);
}

.mc-inline-edit-actions .mc-inline-edit-save {
    color: var(--color-teal);
}
.mc-inline-edit-actions .mc-inline-edit-save:hover {
    background: var(--color-teal-light);
}

.mc-inline-edit-actions .mc-inline-edit-cancel {
    color: var(--color-text-disabled);
}
.mc-inline-edit-actions .mc-inline-edit-cancel:hover {
    color: var(--color-error);
}

/* ── Size variants ── */
.mc-inline-edit-sm .mc-inline-edit-value {
    font-size: var(--text-sm);
    padding: var(--space-0-5) var(--space-1-5);
    min-height: var(--space-6);
}
.mc-inline-edit-sm .mc-inline-edit-control .mc-form-input,
.mc-inline-edit-sm .mc-inline-edit-control .mc-form-select {
    font-size: var(--text-sm);
    padding: var(--space-0-5) var(--space-1-5);
}

.mc-inline-edit-lg .mc-inline-edit-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}
.mc-inline-edit-lg .mc-inline-edit-control .mc-form-input {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

/* ── Saving state ── */
.mc-inline-edit.is-saving .mc-inline-edit-control {
    opacity: 0.6;
    pointer-events: none;
}

/* ── Success flash ── */
.mc-inline-edit-value.is-saved {
    animation: mc-inline-edit-flash 0.6s ease;
}

@keyframes mc-inline-edit-flash {
    0%   { background: var(--color-teal-light); }
    100% { background: transparent; }
}

/* ══════════════════════════════════════════════════════════════════
   SUBSCRIPTION FLOW — Plan cards, checkout wizard, order summary
   ══════════════════════════════════════════════════════════════════ */

/* ── Plan grid ── */
.mc-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

/* ── Credit plan grid + cards (popup) ── */
.mc-credit-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.mc-credit-plan-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    transition: all var(--transition-base);
}
.mc-credit-plan-card:hover {
    border-color: var(--color-teal);
    box-shadow: 0 4px 16px rgba(0,124,137,0.08);
    transform: translateY(-2px);
}
.mc-credit-plan-card--featured {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 1px var(--color-teal), 0 4px 20px rgba(0,124,137,0.12);
}
.mc-credit-plan-badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 12px;
    background: var(--color-teal); color: #fff;
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    border-radius: 20px; white-space: nowrap;
    letter-spacing: 0.02em;
}
.mc-credit-plan-name {
    font-size: var(--text-base); font-weight: var(--weight-semibold);
    color: var(--color-text); margin-bottom: var(--space-1);
}
.mc-credit-plan-credits {
    font-size: var(--text-sm); font-weight: var(--weight-bold);
    color: var(--color-text-muted); margin-bottom: var(--space-3);
}
.mc-credit-plan-credits span {
    font-weight: var(--weight-normal);
    font-size: var(--text-xs);
}
.mc-credit-plan-price {
    font-size: var(--text-2xl); font-weight: var(--weight-bold);
    color: var(--color-teal); margin-bottom: var(--space-1);
    line-height: 1.1;
}
.mc-credit-plan-currency {
    font-size: var(--text-xs); font-weight: var(--weight-normal);
    color: var(--color-text-muted); vertical-align: super;
}
.mc-credit-plan-per {
    font-size: var(--text-xs); color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    padding: 2px 10px;
    background: var(--color-hover-bg);
    border-radius: var(--radius-sm);
}
.mc-credit-plan-desc {
    font-size: var(--text-sm); color: var(--color-text-muted);
    margin-bottom: var(--space-3); min-height: 36px;
}
.mc-credit-plan-features {
    display: flex; flex-direction: column; gap: var(--space-1);
    margin-bottom: var(--space-4); width: 100%;
}
.mc-credit-plan-feature {
    display: flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs); color: var(--color-text-muted);
    justify-content: center;
}
.mc-credit-plan-feature::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-teal);
    flex-shrink: 0;
}
.mc-credit-plan-card form { width: 100%; margin-top: auto; }
@media (max-width: 768px) {
    .mc-credit-plan-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Plan card ── */
.mc-plan-card {
    position: relative;
    background: var(--color-card-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.mc-plan-card:hover {
    box-shadow: var(--shadow-card);
    border-color: var(--color-border-strong);
}
.mc-plan-card--featured {
    border-color: var(--color-teal);
    border-width: 2px;
    box-shadow: 0 0 0 4px var(--color-teal-ring);
}
.mc-plan-card--current {
    background: var(--color-teal-light);
    border-color: var(--color-teal);
}
.mc-plan-card--disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* Badges */
.mc-plan-badge-featured,
.mc-plan-badge-current {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-0-5) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}
.mc-plan-badge-featured {
    background: var(--color-teal);
    color: var(--color-white);
}
.mc-plan-badge-current {
    background: var(--color-teal-light);
    color: var(--color-teal);
    border: 1px solid var(--color-teal);
}

/* Header */
.mc-plan-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-plan-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-1);
}
.mc-plan-color-1 { background: var(--chart-1-bg); color: var(--chart-1); }
.mc-plan-color-2 { background: var(--chart-2-bg); color: var(--chart-2); }
.mc-plan-color-3 { background: var(--chart-3-bg); color: var(--chart-3); }
.mc-plan-color-4 { background: var(--chart-4-bg); color: var(--chart-4); }
.mc-plan-color-5 { background: var(--chart-5-bg); color: var(--chart-5); }
.mc-plan-color-6 { background: var(--chart-6-bg); color: var(--chart-6); }

.mc-plan-name {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}
.mc-plan-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Price */
.mc-plan-price-area {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
}
.mc-plan-price {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.1;
}
.mc-plan-period {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* Features list */
.mc-plan-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.mc-plan-feature-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* CTA */
.mc-plan-cta {
    margin-top: auto;
}
.mc-plan-trial-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-2);
    margin-bottom: 0;
}

/* ── Subscription checkout wizard steps ── */
.mc-sub-wizard-steps {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-6);
    padding: var(--space-4) 0;
}
.mc-sub-wizard-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}
.mc-sub-wizard-step-circle {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    background: var(--color-card-bg);
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.mc-sub-wizard-step.is-active .mc-sub-wizard-step-circle {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-white);
}
.mc-sub-wizard-step.is-done .mc-sub-wizard-step-circle {
    background: var(--color-teal-light);
    border-color: var(--color-teal);
    color: var(--color-teal);
}
.mc-sub-wizard-step-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}
.mc-sub-wizard-step.is-active .mc-sub-wizard-step-title {
    color: var(--color-text);
}
.mc-sub-wizard-step-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-sub-wizard-connector {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    margin: 0 var(--space-3);
    transition: background 0.2s;
}
.mc-sub-wizard-connector.is-done {
    background: var(--color-teal);
}

/* ── Checkout layout (form + sidebar) ── */
.mc-sub-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-6);
    align-items: start;
}
.mc-sub-checkout-sidebar {
    position: sticky;
    top: 80px;
}
@media (max-width: 900px) {
    .mc-sub-checkout-layout {
        grid-template-columns: 1fr;
    }
    .mc-sub-checkout-sidebar {
        position: static;
        order: -1;
    }
}

/* ── Order summary card ── */
.mc-order-summary {
    background: var(--color-card-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.mc-order-summary-inner {
    padding: var(--space-5);
}
.mc-order-summary-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.mc-order-summary-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}
.mc-order-summary-plan {
    background: var(--color-hover-bg);
    border-radius: var(--radius-input);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}
.mc-order-summary-plan-name {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.mc-order-summary-plan-period {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
.mc-order-summary-lines {
    margin-bottom: var(--space-3);
}
.mc-order-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1-5) 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.mc-order-summary-divider {
    height: 1px;
    background: var(--color-border);
    margin-bottom: var(--space-3);
}
.mc-order-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--weight-semibold);
}
.mc-order-summary-total-amount {
    font-size: var(--text-lg);
    color: var(--color-teal);
}

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

.mc-import-wizard {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 420px;
}

.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;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

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

.mc-import-progress-msg {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: var(--space-2);
}

/* 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, rgba(0, 124, 137, 0.08));
    color: var(--color-teal);
    font-weight: 500;
}

.api-nav-count {
    margin-left: auto;
    font-size: 11px;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.api-nav-item.active .api-nav-count {
    background: rgba(0, 124, 137, 0.15);
    color: var(--color-teal);
}

.api-nav-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-2) var(--space-3);
}

.api-nav-group-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    padding: var(--space-2) var(--space-3) var(--space-1);
}

/* Content */
.api-docs-content {
    min-width: 0;
}

.api-section {
    margin-bottom: var(--space-6);
}

.api-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border);
}

.api-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

/* Endpoint Cards */
.api-endpoint-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

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

.api-endpoint-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.api-endpoint-summary {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    user-select: none;
}

.api-endpoint-method {
    flex-shrink: 0;
}

.api-endpoint-uri code {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    background: none;
    padding: 0;
}

.api-endpoint-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.api-endpoint-chevron {
    font-size: 20px;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}

.api-endpoint-card.is-open .api-endpoint-chevron {
    transform: rotate(180deg);
}

/* Endpoint Detail (collapsed by default) */
.api-endpoint-detail {
    display: none;
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
}

.api-endpoint-card.is-open .api-endpoint-detail {
    display: block;
}

.api-detail-section {
    padding-top: var(--space-4);
}

.api-detail-section + .api-detail-section {
    border-top: 1px dashed var(--color-border);
    margin-top: var(--space-4);
}

.api-detail-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}

.api-param-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-hover-bg);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Code wrapper with copy button */
.api-code-wrapper {
    position: relative;
}

.api-copy-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-input);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
    z-index: 1;
}

.api-copy-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Base URL display */
.api-base-url {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-hover-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: var(--space-2) var(--space-3);
}

.api-base-url code {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-teal);
    background: none;
    padding: 0;
}

.api-copy-btn-inline {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
}

.api-copy-btn-inline:hover {
    color: var(--color-text);
    background: var(--color-hover-bg);
}

/* Getting started blocks */
.api-getting-started-block {
    padding: var(--space-4) 0;
}

.api-getting-started-block + .api-getting-started-block {
    border-top: 1px dashed var(--color-border);
}

/* Auth methods */
.api-auth-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.api-auth-method-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 767px) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* --- 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);
}
.mc-wizard-step-number {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    flex-shrink: 0;
}
.mc-wizard-steps .mc-wizard-step.is-active .mc-wizard-step-number {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.mc-wizard-steps .mc-wizard-step.is-done .mc-wizard-step-number {
    background: var(--color-success);
    color: #fff;
}
.mc-wizard-step-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}
.mc-wizard-step-connector {
    flex: 0 0 20px;
    height: 2px;
    background: var(--color-border);
    border-radius: 1px;
}
.mc-wizard-step-connector.is-done {
    background: var(--color-success);
}
/* mobile: wrap wizard steps, hide labels */
@media (max-width: 767px) {
    .mc-wizard-steps { gap: var(--space-1-5); }
    .mc-wizard-steps .mc-wizard-step { padding: var(--space-1-5) var(--space-2); }
    .mc-wizard-step-label { display: none; }
    .mc-wizard-steps .mc-wizard-step.is-active .mc-wizard-step-label { display: inline; font-size: var(--text-xs); }
    .mc-wizard-step-connector { flex-basis: 8px; }
}

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

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

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

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

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

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

/* End ads components */

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

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

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

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

/* Adoption bar — admin ads dashboard */
.mc-adoption-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.mc-adoption-percent {
    font-size: 2.25rem;
    font-weight: var(--weight-bold);
    color: var(--color-teal);
    flex-shrink: 0;
}
.mc-adoption-body {
    flex: 1;
    min-width: 0;
}
.mc-adoption-label {
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text);
}
.mc-stat-meta-faint {
    opacity: 0.7;
    font-size: var(--text-xs);
}
.mc-platform-status {
    margin-top: var(--space-2);
    margin-bottom: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════
   Settings Wizard — tabbed multi-step settings wizard
   Distinct from:
     - mc-wizard-*          (compact pill stepper, ads campaign flow, line 9442)
     - mc-setup-steps       (horizontal icon flow for websites, line 2950)
     - mc-setup-checklist   (sidebar onboarding checklist, list overview, line 4505)
   Used by: admin/ads/settings.blade.php
   ═══════════════════════════════════════════════════════════════ */
.mc-settings-wizard-steps {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}
.mc-settings-wizard-step {
    flex: 1;
    min-width: 140px;
    padding: var(--space-3);
    background: var(--color-hover-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    user-select: none;
}
.mc-settings-wizard-step:hover {
    background: var(--color-teal-light);
    border-color: var(--color-teal);
}
.mc-settings-wizard-step.is-active {
    background: var(--color-teal);
    color: var(--color-white);
    border-color: var(--color-teal);
}
.mc-settings-wizard-step.is-active .mc-settings-wizard-step-status {
    color: rgba(255, 255, 255, 0.85);
}
.mc-settings-wizard-step-number {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    opacity: 0.8;
}
.mc-settings-wizard-step-title {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin: var(--space-1) 0;
}
.mc-settings-wizard-step-status {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-settings-wizard-panel {
    display: none;
}
.mc-settings-wizard-panel.is-active {
    display: block;
}
.mc-settings-wizard-docs {
    background: var(--color-hover-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.mc-settings-wizard-docs ol {
    margin: var(--space-2) 0 var(--space-2) var(--space-4);
    padding: 0;
}
.mc-settings-wizard-docs li {
    margin-bottom: var(--space-2);
    line-height: 1.6;
}
.mc-settings-wizard-test {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-hover-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-input);
}
.mc-settings-wizard-test-result {
    flex: 1;
    font-size: var(--text-sm);
}
.mc-settings-wizard-test-result.is-success { color: var(--color-success); }
.mc-settings-wizard-test-result.is-error { color: var(--color-error); }
.mc-settings-wizard-test-result.is-warning { color: var(--color-warning); }
.mc-settings-wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.mc-settings-wizard-nav-actions {
    display: flex;
    gap: var(--space-3);
}
.mc-settings-wizard-review-banner {
    display: none;
    margin-top: var(--space-3);
}
.mc-settings-wizard-review-banner.is-visible {
    display: block;
}
.mc-settings-wizard-intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.mc-settings-wizard-intro-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
}
.mc-settings-wizard-intro-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.mc-settings-wizard-intro-card-source {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Detail table — key/value layout for entity overview pages */
.mc-table--detail td:first-child {
    font-weight: var(--weight-semibold);
    width: 180px;
    color: var(--color-text);
}
.mc-table--detail .mc-detail-muted {
    color: var(--color-text-muted);
}
@media (max-width: 767px) {
    .mc-table--detail td:first-child {
        width: auto;
    }
}

/* Empty state inside card — for logs / timelines */
.mc-card-empty {
    text-align: center;
    padding: var(--space-6);
    color: var(--color-text-muted);
}
.mc-card-empty .material-symbols-rounded {
    font-size: 32px;
    opacity: 0.5;
    display: block;
    margin-bottom: var(--space-2);
}

/* Card header with actions (title + action button in a row) */
.mc-card-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}
.mc-card-header-actions h3 {
    margin: 0;
}

/* Error line under status in list/table row */
.mc-table-error-line {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════
   Choice grid — icon + label radio cards in a grid
   Used for campaign objective picker, template style picker, etc.
   ═══════════════════════════════════════════════════════════════ */
.mc-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-4);
}
@media (max-width: 767px) {
    .mc-choice-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.mc-choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.mc-choice-card:hover {
    border-color: var(--color-teal);
    transform: translateY(-1px);
}
.mc-choice-card-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mc-choice-card:has(.mc-choice-card-input:checked) {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-ring);
}
.mc-choice-card-icon {
    font-size: 32px !important;
    color: var(--color-teal);
    display: block;
    margin-bottom: var(--space-2);
}
.mc-choice-card-label {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

/* Two-column form grid used inside wizards */
.mc-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 767px) {
    .mc-form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Onboarding card — welcome / empty state with numbered checklist
   ═══════════════════════════════════════════════════════════════ */
.mc-onboarding-card {
    max-width: 640px;
    margin: var(--space-10) auto;
    text-align: center;
}
.mc-onboarding-card .mc-card-body {
    padding: var(--space-10);
}
.mc-onboarding-illustration {
    margin-bottom: var(--space-6);
}
.mc-onboarding-title {
    margin-bottom: var(--space-2);
    font-size: var(--text-2xl);
    color: var(--color-text);
}
.mc-onboarding-desc {
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
    font-size: var(--text-base);
}
.mc-onboarding-steps {
    text-align: left;
    margin-bottom: var(--space-8);
}
.mc-onboarding-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.mc-onboarding-step:last-child {
    margin-bottom: 0;
}
.mc-onboarding-step.is-pending {
    opacity: 0.5;
}
.mc-onboarding-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    flex-shrink: 0;
}
.mc-onboarding-step.is-pending .mc-onboarding-step-number {
    background: var(--color-border);
    color: var(--color-text-muted);
}
.mc-onboarding-step-title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-base);
    color: var(--color-text);
}
.mc-onboarding-step.is-pending .mc-onboarding-step-title {
    color: var(--color-text-muted);
}
.mc-onboarding-step-desc {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.mc-onboarding-step-actions {
    margin-top: var(--space-3);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.mc-onboarding-skip {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: underline;
}

/* Inline monospace code — for IDs, form IDs, pixel IDs in table rows */
.mc-code-inline {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-hover-bg);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* Primary and secondary info lines in a table cell */
.mc-cell-primary {
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.mc-cell-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
.mc-cell-sub-warning {
    color: var(--color-warning);
}

/* Fixed-width table columns — reusable helpers */
.mc-col-w-sm { width: 100px; }
.mc-col-w-status { width: 80px; }
.mc-col-w-time { width: 140px; }

/* ═══════════════════════════════════════════════════════════════
   Dashboard components — mc-dash-*
   Reusable across customer + admin dashboards (Ads + future).
   ═══════════════════════════════════════════════════════════════ */

/* Period tabs in page-actions */
.mc-dash-period-tabs {
    display: inline-flex;
    background: var(--color-hover-bg);
    border-radius: var(--radius-input);
    padding: var(--space-0-5);
    gap: var(--space-0-5);
}
.mc-dash-period-tab {
    padding: var(--space-1-5) var(--space-3);
    border-radius: calc(var(--radius-input) - 2px);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.mc-dash-period-tab:hover {
    color: var(--color-text);
}
.mc-dash-period-tab.is-active {
    background: var(--color-card-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
}

/* 4-column big metric cards with sparkline + delta */
.mc-dash-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 1024px) {
    .mc-dash-metric-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .mc-dash-metric-grid { grid-template-columns: 1fr; }
}
.mc-dash-metric-card {
    position: relative;
    padding: var(--space-5);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow: hidden;
}
.mc-dash-metric-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}
.mc-dash-metric-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-dash-metric-icon .material-symbols-rounded {
    font-size: 22px;
}
.mc-dash-metric-icon-teal {
    background: var(--color-teal-light);
    color: var(--color-teal);
}
.mc-dash-metric-icon-green {
    background: color-mix(in srgb, var(--illust-chart-2, #10b981) 15%, transparent);
    color: var(--illust-chart-2, #10b981);
}
.mc-dash-metric-icon-blue {
    background: color-mix(in srgb, var(--illust-chart-3, #3b82f6) 15%, transparent);
    color: var(--illust-chart-3, #3b82f6);
}
.mc-dash-metric-icon-orange {
    background: color-mix(in srgb, var(--illust-chart-4, #f59e0b) 15%, transparent);
    color: var(--illust-chart-4, #f59e0b);
}
.mc-dash-metric-spark {
    opacity: 0.85;
}
.mc-dash-metric-spark-fill { opacity: 0.18; }
.mc-dash-metric-spark-fill-teal { fill: var(--color-teal); }
.mc-dash-metric-spark-fill-green { fill: var(--illust-chart-2, #10b981); }
.mc-dash-metric-spark-fill-blue { fill: var(--illust-chart-3, #3b82f6); }
.mc-dash-metric-spark-fill-orange { fill: var(--illust-chart-4, #f59e0b); }
.mc-dash-metric-spark-line { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc-dash-metric-spark-line-teal { stroke: var(--color-teal); }
.mc-dash-metric-spark-line-green { stroke: var(--illust-chart-2, #10b981); }
.mc-dash-metric-spark-line-blue { stroke: var(--illust-chart-3, #3b82f6); }
.mc-dash-metric-spark-line-orange { stroke: var(--illust-chart-4, #f59e0b); }

.mc-dash-metric-value {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.mc-dash-metric-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
}
.mc-dash-metric-delta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}
.mc-dash-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.mc-dash-delta .material-symbols-rounded {
    font-size: 14px;
}
.mc-dash-delta-up {
    background: color-mix(in srgb, var(--illust-chart-2, #10b981) 15%, transparent);
    color: var(--illust-chart-2, #10b981);
}
.mc-dash-delta-down {
    background: color-mix(in srgb, var(--illust-chart-5, #ef4444) 15%, transparent);
    color: var(--illust-chart-5, #ef4444);
}
.mc-dash-delta-flat {
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
}
.mc-dash-delta-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Chart card */
.mc-dash-chart-card {
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}
.mc-dash-chart {
    width: 100%;
    height: 320px;
}

/* Section header inside dashboard cards */
.mc-dash-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.mc-dash-section-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-1);
}

/* Stat chips (small status badges in section header) */
.mc-dash-stat-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.mc-dash-stat-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.mc-dash-stat-chip-green {
    background: color-mix(in srgb, var(--illust-chart-2, #10b981) 15%, transparent);
    color: var(--illust-chart-2, #10b981);
}
.mc-dash-stat-chip-orange {
    background: color-mix(in srgb, var(--illust-chart-4, #f59e0b) 15%, transparent);
    color: var(--illust-chart-4, #f59e0b);
}
.mc-dash-stat-chip-red {
    background: color-mix(in srgb, var(--illust-chart-5, #ef4444) 15%, transparent);
    color: var(--illust-chart-5, #ef4444);
}
.mc-dash-stat-chip-blue {
    background: color-mix(in srgb, var(--illust-chart-3, #3b82f6) 15%, transparent);
    color: var(--illust-chart-3, #3b82f6);
}

/* 2-column dashboard grid */
.mc-dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 1024px) {
    .mc-dash-grid-2 { grid-template-columns: 1fr; }
}

/* Panel — card with standard padding for dashboard sub-sections */
.mc-dash-panel {
    padding: var(--space-5) var(--space-6);
}

/* Alerts list */
.mc-dash-alert-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mc-dash-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
}
.mc-dash-alert-error {
    border-color: color-mix(in srgb, var(--illust-chart-5, #ef4444) 40%, var(--color-border));
    background: color-mix(in srgb, var(--illust-chart-5, #ef4444) 6%, var(--color-card-bg));
}
.mc-dash-alert-warning {
    border-color: color-mix(in srgb, var(--illust-chart-4, #f59e0b) 40%, var(--color-border));
    background: color-mix(in srgb, var(--illust-chart-4, #f59e0b) 6%, var(--color-card-bg));
}
.mc-dash-alert-icon {
    flex-shrink: 0;
    font-size: 24px !important;
}
.mc-dash-alert-error .mc-dash-alert-icon { color: var(--illust-chart-5, #ef4444); }
.mc-dash-alert-warning .mc-dash-alert-icon { color: var(--illust-chart-4, #f59e0b); }
.mc-dash-alert-body {
    flex: 1;
    min-width: 0;
}
.mc-dash-alert-title {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-dash-alert-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Empty state inside panels */
.mc-dash-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-muted);
}
.mc-dash-empty-illustration {
    margin-bottom: var(--space-3);
    display: flex;
    justify-content: center;
}
.mc-dash-empty-title {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}
.mc-dash-empty-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 320px;
    margin: 0 auto var(--space-3);
}

/* Platform breakdown list */
.mc-dash-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.mc-dash-breakdown-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.mc-dash-breakdown-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-dash-breakdown-icon .material-symbols-rounded {
    font-size: 20px;
}
.mc-dash-breakdown-body {
    flex: 1;
    min-width: 0;
}
.mc-dash-breakdown-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.mc-dash-breakdown-name {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-dash-breakdown-value {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-dash-breakdown-bar {
    height: 6px;
    background: var(--color-hover-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--space-1);
}
.mc-dash-breakdown-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.mc-dash-breakdown-bar-teal { background: var(--color-teal); }
.mc-dash-breakdown-bar-green { background: var(--illust-chart-2, #10b981); }
.mc-dash-breakdown-bar-blue { background: var(--illust-chart-3, #3b82f6); }
.mc-dash-breakdown-bar-orange { background: var(--illust-chart-4, #f59e0b); }
.mc-dash-breakdown-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Top list (ranked items) */
.mc-dash-top-list {
    display: flex;
    flex-direction: column;
}
.mc-dash-top-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.mc-dash-top-item:first-child { padding-top: 0; }
.mc-dash-top-item:last-child { padding-bottom: 0; border-bottom: none; }
.mc-dash-top-rank {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
}
.mc-dash-top-rank-1 {
    background: color-mix(in srgb, var(--illust-chart-4, #f59e0b) 20%, transparent);
    color: var(--illust-chart-4, #f59e0b);
}
.mc-dash-top-rank-2 {
    background: color-mix(in srgb, var(--color-teal) 20%, transparent);
    color: var(--color-teal);
}
.mc-dash-top-rank-3 {
    background: color-mix(in srgb, var(--illust-chart-3, #3b82f6) 20%, transparent);
    color: var(--illust-chart-3, #3b82f6);
}
.mc-dash-top-body {
    flex: 1;
    min-width: 0;
}
.mc-dash-top-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.mc-dash-top-name {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.mc-dash-top-name:hover {
    color: var(--color-teal);
}
.mc-dash-top-value {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
    flex-shrink: 0;
}
.mc-dash-top-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    flex-wrap: wrap;
    align-items: center;
}

/* Activity feed */
.mc-dash-activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mc-dash-activity-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.mc-dash-activity-item:first-child { padding-top: 0; }
.mc-dash-activity-item:last-child { padding-bottom: 0; border-bottom: none; }
.mc-dash-activity-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mc-dash-activity-icon .material-symbols-rounded {
    font-size: 18px;
}
.mc-dash-activity-icon-green {
    background: color-mix(in srgb, var(--illust-chart-2, #10b981) 15%, transparent);
    color: var(--illust-chart-2, #10b981);
}
.mc-dash-activity-icon-orange {
    background: color-mix(in srgb, var(--illust-chart-4, #f59e0b) 15%, transparent);
    color: var(--illust-chart-4, #f59e0b);
}
.mc-dash-activity-icon-red {
    background: color-mix(in srgb, var(--illust-chart-5, #ef4444) 15%, transparent);
    color: var(--illust-chart-5, #ef4444);
}
.mc-dash-activity-icon-blue {
    background: color-mix(in srgb, var(--illust-chart-3, #3b82f6) 15%, transparent);
    color: var(--illust-chart-3, #3b82f6);
}
.mc-dash-activity-body {
    flex: 1;
    min-width: 0;
}
.mc-dash-activity-title {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-sm);
}
.mc-dash-activity-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.mc-dash-activity-meta {
    display: flex;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
    align-items: center;
}

/* Provisioning grid — 4 platform cards with status + health pills */
.mc-dash-provisioning-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
@media (max-width: 1024px) {
    .mc-dash-provisioning-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .mc-dash-provisioning-grid { grid-template-columns: 1fr; }
}
.mc-dash-provisioning-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-dash-provisioning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}
.mc-dash-provisioning-name {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-size: var(--text-base);
}
.mc-dash-provisioning-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mc-dash-provisioning-health {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.mc-dash-provisioning-health-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.mc-dash-provisioning-health-pill .material-symbols-rounded {
    font-size: 14px;
}

/* Adoption bar inside a dashboard card */
.mc-dash-adoption-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-hover-bg);
}

/* ==========================================================================
   Ads Onboarding Checklist — Mailchimp-style progress + steps + detail panel
   ========================================================================== */

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

/* Header — title + progress bar spanning full width */
.mc-ads-onboarding-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-6) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(180deg, var(--color-hover-bg) 0%, var(--color-card-bg) 100%);
}

.mc-ads-onboarding-header-text { flex: 1; min-width: 0; }

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

.mc-ads-onboarding-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.mc-ads-onboarding-progress-wrap {
    flex: 0 0 280px;
    min-width: 0;
}

.mc-ads-onboarding-progress-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
    text-align: right;
}

.mc-ads-onboarding-progress-track {
    height: 8px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.mc-ads-onboarding-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-teal) 0%, var(--color-teal-hover) 100%);
    border-radius: var(--radius-full);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Body — left rail + right detail panel */
.mc-ads-onboarding-body {
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 360px;
}

/* ---- Left rail: ordered step list ---- */
.mc-ads-onboarding-steps {
    list-style: none;
    margin: 0;
    padding: var(--space-4) 0;
    border-right: 1px solid var(--color-border);
    background: var(--color-bg);
    counter-reset: ads-onb;
}

/* Standalone rail — used when the step list is shown outside the full
   mc-ads-onboarding card (e.g. admin dashboard platform setup). Removes
   the side border + background so it sits cleanly inside an mc-card. */
.mc-ads-onboarding-steps.is-standalone {
    border-right: none;
    background: transparent;
    padding: var(--space-2) 0;
}

.mc-ads-onboarding-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    position: relative;
    counter-increment: ads-onb;
    transition: background var(--transition-fast);
}

.mc-ads-onboarding-step.is-current {
    background: var(--color-card-bg);
    box-shadow: inset 3px 0 0 var(--color-teal);
}
.mc-ads-onboarding-step.is-current .mc-ads-onboarding-step-title { color: var(--color-text); font-weight: var(--weight-semibold); }

.mc-ads-onboarding-step.is-done .mc-ads-onboarding-step-title {
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--color-border-strong);
}

.mc-ads-onboarding-step.is-locked { opacity: 0.55; }

/* Check/number circle */
.mc-ads-onboarding-step-check {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--color-border-strong);
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    transition: all var(--transition-fast);
}
.mc-ads-onboarding-step-check::before {
    content: counter(ads-onb);
}
.mc-ads-onboarding-step.is-done .mc-ads-onboarding-step-check {
    background: var(--color-teal);
    border-color: var(--color-teal);
    color: var(--color-white);
}
.mc-ads-onboarding-step.is-done .mc-ads-onboarding-step-check::before { content: none; }
.mc-ads-onboarding-step.is-current .mc-ads-onboarding-step-check {
    border-color: var(--color-teal);
    color: var(--color-teal);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-teal) 18%, transparent);
}
.mc-ads-onboarding-step.is-locked .mc-ads-onboarding-step-check::before { content: none; }

.mc-ads-onboarding-step-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    gap: var(--space-0-5);
}

.mc-ads-onboarding-step-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Live stat line below the title — NOT affected by .is-done strikethrough
   (that rule targets .mc-ads-onboarding-step-title specifically). */
.mc-ads-onboarding-step-stat {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
}
.mc-ads-onboarding-step.is-current .mc-ads-onboarding-step-stat {
    color: var(--color-text);
}
.mc-ads-onboarding-step.is-locked .mc-ads-onboarding-step-stat {
    font-style: italic;
}

/* Legacy one-line "time" slot — kept for any caller still using it. New
   code should set $step['stat'] and render mc-ads-onboarding-step-stat. */
.mc-ads-onboarding-step-time {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ---- Right panel: current step detail ---- */
.mc-ads-onboarding-detail {
    padding: var(--space-8) var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}

.mc-ads-onboarding-detail-illustration {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: 220px;
    max-width: 40%;
    pointer-events: none;
}
.mc-ads-onboarding-detail-illustration svg { width: 100%; height: auto; display: block; }

.mc-ads-onboarding-detail-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
    max-width: 56%;
    line-height: var(--leading-tight);
}

.mc-ads-onboarding-detail-desc {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
    max-width: 56%;
    line-height: var(--leading-normal);
}

.mc-ads-onboarding-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    max-width: 56%;
    margin-bottom: var(--space-4);
}

.mc-ads-onboarding-platform-btn .material-symbols-rounded {
    font-size: 18px;
    margin-right: var(--space-1);
}

.mc-ads-onboarding-skip {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    margin-top: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.mc-ads-onboarding-skip:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* ---- Tablet (≤1024px): stack detail, shrink illustration ---- */
@media (max-width: 1024px) {
    .mc-ads-onboarding-body {
        grid-template-columns: 260px 1fr;
        min-height: 320px;
    }
    .mc-ads-onboarding-detail-illustration { width: 160px; }
    .mc-ads-onboarding-detail-title,
    .mc-ads-onboarding-detail-desc,
    .mc-ads-onboarding-detail-actions { max-width: 62%; }
    .mc-ads-onboarding-step { padding: var(--space-3) var(--space-4); }
}

/* ---- Mobile (≤767px): stack header + vertical layout, hide illustration ---- */
@media (max-width: 767px) {
    .mc-ads-onboarding-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
        padding: var(--space-4);
    }
    .mc-ads-onboarding-progress-wrap { flex: 1 1 auto; }
    .mc-ads-onboarding-progress-label { text-align: left; }
    .mc-ads-onboarding-title { font-size: var(--text-xl); }

    .mc-ads-onboarding-body {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .mc-ads-onboarding-steps {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-2) 0;
    }
    .mc-ads-onboarding-step { padding: var(--space-3) var(--space-4); }

    .mc-ads-onboarding-detail {
        padding: var(--space-5) var(--space-4) var(--space-4);
    }
    .mc-ads-onboarding-detail-illustration {
        position: static;
        width: 160px;
        max-width: 160px;
        margin: 0 auto var(--space-4);
    }
    .mc-ads-onboarding-detail-title,
    .mc-ads-onboarding-detail-desc,
    .mc-ads-onboarding-detail-actions {
        max-width: 100%;
    }
    .mc-ads-onboarding-detail-title { font-size: var(--text-lg); }
    .mc-ads-onboarding-detail-actions .mc-btn { flex: 1 1 calc(50% - var(--space-1)); justify-content: center; }
}

/* ---- Dark mode tweaks ---- */
[data-theme="dark"] .mc-ads-onboarding-header {
    background: linear-gradient(180deg, var(--color-hover-bg) 0%, var(--color-card-bg) 100%);
}
[data-theme="dark"] .mc-ads-onboarding-steps { background: var(--color-bg); }
[data-theme="dark"] .mc-ads-onboarding-step.is-current { background: var(--color-card-bg); }

/* =========================================================================
   mc-step-bar — rich horizontal step/choice bar (wizard + branching)
   Use cases:
   - Sequential wizard (e.g. install steps)
   - Branching choice (e.g. campaign Template Gallery vs Custom HTML)
   States: .is-active (current), .is-done (completed), .is-enabled (clickable)
   ========================================================================= */
.mc-step-bar {
    background: var(--color-card-bg);
    border-bottom: var(--space-px) solid var(--color-border);
    flex-shrink: 0;
}

.mc-step-bar-inner {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: var(--space-3) var(--space-6);
}

.mc-step-bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    position: relative;
    transition: all var(--transition-fast);
    cursor: default;
    border-radius: var(--radius-input);
}

.mc-step-bar-item.is-enabled {
    cursor: pointer;
}
.mc-step-bar-item.is-enabled:hover {
    background: var(--color-hover-bg);
}

.mc-step-bar-item.is-active {
    background: var(--color-teal-light);
}

.mc-step-bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-disabled);
    transition: color var(--transition-fast);
}
.mc-step-bar-icon .material-symbols-rounded {
    font-size: 20px;
    font-variation-settings: 'wght' 300, 'FILL' 0;
}

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

.mc-step-bar-item.is-done .mc-step-bar-icon {
    color: var(--color-teal);
}

.mc-step-bar-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mc-step-bar-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    transition: color var(--transition-fast);
}

.mc-step-bar-item.is-active .mc-step-bar-label {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}

.mc-step-bar-item.is-done .mc-step-bar-label,
.mc-step-bar-item.is-enabled .mc-step-bar-label {
    color: var(--color-text);
}

.mc-step-bar-desc {
    font-size: 10px;
    color: var(--color-text-disabled);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin-top: 1px;
}

.mc-step-bar-item.is-active .mc-step-bar-desc {
    color: var(--color-text-muted);
}

.mc-step-bar-item.is-done .mc-step-bar-desc,
.mc-step-bar-item.is-enabled .mc-step-bar-desc {
    color: var(--color-text-muted);
}

.mc-step-bar-connector {
    display: flex;
    align-items: center;
    padding: 0 var(--space-0-5);
    flex-shrink: 0;
    color: var(--color-border-strong);
}
.mc-step-bar-connector .material-symbols-rounded {
    font-size: 14px;
    font-variation-settings: 'wght' 200, 'FILL' 0;
}

@media (max-width: 680px) {
    .mc-step-bar-label {
        display: none;
    }
    .mc-step-bar-connector {
        width: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE FLAG CARDS + GUIDE POPUP (generic primitives, F8.4)
   Hoisted from ai-settings.css 2026-04-25 so any settings page can
   render a 'feature flag toggle list with sub-options accordion +
   illustrated learn-more guide popup'. See /rui/ui showcase entries
   #feature-card and #feature-guide for canonical markup.
   ═══════════════════════════════════════════════════════════════ */
/* ── F8.4 Features tab — flag cards + sub-options accordion ───────── */
.mc-features-section-header {
    display: block;
    margin-bottom: var(--space-5);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.mc-feature-guide-section h3 {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
}

.mc-feature-guide-section p {
    margin: 0;
    line-height: 1.6;
    color: var(--color-text);
}

.mc-feature-guide-section code {
    background: var(--illust-bg);
    color: var(--color-text);
    padding: 1px var(--space-1);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
}

.mc-feature-guide-section ul {
    margin: 0;
    padding-left: var(--space-4);
    line-height: 1.6;
    color: var(--color-text);
}

.mc-feature-guide-section ul li + li {
    margin-top: var(--space-1);
}

.mc-feature-guide-section ul li strong {
    color: var(--color-teal);
}

.mc-feature-guide-on-off {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.mc-feature-guide-on-off > div {
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-3);
}

.mc-feature-guide-on-off > div:first-child {
    border-left-color: var(--color-teal);
}

.mc-feature-guide-routes li {
    color: var(--color-text);
}

.mc-feature-guide-requires {
    background: color-mix(in srgb, var(--color-teal) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-teal) 25%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.mc-feature-guide-requires h3 {
    color: var(--color-teal);
}

.mc-feature-guide-foot {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
    .mc-feature-guide-on-off {
        grid-template-columns: 1fr;
    }
    .mc-feature-guide-hero svg {
        max-height: 160px;
    }
}

/* ==================================================================
 * Admin Invoices — rich layout + right-rail sidebar
 * Namespace: rui-inv-* — page-scoped, never used outside admin/invoices
 * ================================================================== */

.rui-inv-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-5);
    align-items: start;
}
@media (max-width: 1279px) {
    .rui-inv-page-grid { grid-template-columns: 1fr; }
}

.rui-inv-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: var(--space-5);
    align-self: start;
}
@media (max-width: 1279px) {
    .rui-inv-side { position: static; }
}

.rui-inv-side-card { /* extends mc-card-preview — keep visuals consistent */ }
.rui-inv-side-card-attn .mc-card-preview-header { background: var(--chart-4-bg, #fff4ea); }

.rui-inv-side-card .mc-card-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}
.rui-inv-side-card .mc-card-preview-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.rui-inv-side-icon {
    font-size: 22px !important;
    color: var(--color-text-muted);
    line-height: 1;
}
.rui-inv-side-icon-red   { color: var(--color-error, #d14d4d); }
.rui-inv-side-icon-blue  { color: var(--color-info, #4a90e2); }
.rui-inv-side-icon-teal  { color: var(--color-teal, #2bb7a8); }
.rui-inv-side-icon-green { color: var(--color-success, #2e9c5d); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rui-sub-stat-card {
    position: relative;
    padding: var(--space-4) var(--space-4) var(--space-3);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-height: 110px;
}
/* Teal accent top-bar — the subscription-product cue. Invoices doesn't have this. */
.rui-sub-stat-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--color-teal, #2bb7a8);
    opacity: 0.85;
}
.rui-sub-stat-card-attn::before { background: var(--chart-4, #e5a23a); }
.rui-sub-stat-card-warn::before { background: var(--color-error, #d14d4d); }
.rui-sub-stat-card-mrr::before  { background: linear-gradient(90deg, var(--color-teal, #2bb7a8), var(--chart-2, #6e9be0)); }

.rui-sub-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.rui-sub-stat-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--weight-semibold);
}
.rui-sub-stat-icon .material-symbols-rounded {
    font-size: 20px !important;
    color: var(--color-text-disabled);
    /* wght 200 inherited (lesson L3 — naked monochrome accent). */
}
.rui-sub-stat-card-mrr .rui-sub-stat-icon .material-symbols-rounded { color: var(--color-teal, #2bb7a8); }
.rui-sub-stat-card-attn .rui-sub-stat-icon .material-symbols-rounded { color: var(--chart-4, #e5a23a); }
.rui-sub-stat-card-warn .rui-sub-stat-icon .material-symbols-rounded { color: var(--color-error, #d14d4d); }

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

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

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

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

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

/* ── Attention chip strip — appears above the list card when count > 0 ── */
.rui-sub-attn-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.rui-sub-attn-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.rui-sub-attn-chip:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
    transform: translateY(-1px);
}
.rui-sub-attn-chip-num   { font-weight: var(--weight-bold); font-size: var(--text-base); line-height: 1; color: var(--color-text); }
.rui-sub-attn-chip-label { color: var(--color-text-muted); }
.rui-sub-attn-chip-icon  { font-size: 18px !important; }
.rui-sub-attn-chip-arrow {
    margin-left: var(--space-1);
    font-size: 14px !important;
    color: var(--color-text-disabled);
    transition: transform 120ms ease, color 120ms ease;
}
.rui-sub-attn-chip:hover .rui-sub-attn-chip-arrow { transform: translateX(2px); color: var(--color-text); }
.rui-sub-attn-chip-orange { border-left-color: var(--chart-4, #e5a23a); }
.rui-sub-attn-chip-orange .rui-sub-attn-chip-icon { color: var(--chart-4, #e5a23a); }
.rui-sub-attn-chip-blue   { border-left-color: var(--color-info, #4a90e2); }
.rui-sub-attn-chip-blue   .rui-sub-attn-chip-icon { color: var(--color-info, #4a90e2); }
.rui-sub-attn-chip-red    { border-left-color: var(--color-error, #d14d4d); }
.rui-sub-attn-chip-red    .rui-sub-attn-chip-icon { color: var(--color-error, #d14d4d); }

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

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

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

/* Plan mix — horizontal mini bars per plan. Different shape from invoices'
 * Top Customers (which used avatar+name+amount rows). */
.rui-sub-mix-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-2);
    align-items: center;
    font-size: var(--text-xs);
}
.rui-sub-mix-row + .rui-sub-mix-row { margin-top: var(--space-2); }
.rui-sub-mix-row-name {
    color: var(--color-text);
    font-weight: var(--weight-medium);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.rui-sub-mix-row-num {
    color: var(--color-text-muted);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}
.rui-sub-mix-bar {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: var(--color-bg-subtle);
    overflow: hidden;
}
.rui-sub-mix-bar > div {
    height: 100%;
    background: var(--color-teal, #2bb7a8);
    opacity: 0.85;
    border-radius: 2px;
}

/* Reconcile health — horizontal % bar */
.rui-sub-recon {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-sub-recon-pct {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.rui-sub-recon-pct-num {
    font-size: 22px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
}
.rui-sub-recon-pct-label {
    font-size: 11px;
    color: var(--color-text-muted);
}
.rui-sub-recon-bar {
    height: 6px;
    background: var(--color-bg-subtle);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
}
.rui-sub-recon-bar-synced { background: var(--color-success, #2e9c5d); }
.rui-sub-recon-bar-issue  { background: var(--color-error, #d14d4d); }
.rui-sub-recon-foot {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Activity feed — colour-dot rows. No dividers between rows; small gap is enough. */
.rui-sub-act {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-sub-act-row {
    display: flex;
    gap: var(--space-2);
}
.rui-sub-act-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.rui-sub-act-dot-green  { background: var(--color-success, #2e9c5d); }
.rui-sub-act-dot-teal   { background: var(--color-teal, #2bb7a8); }
.rui-sub-act-dot-orange { background: var(--chart-4, #e5a23a); }
.rui-sub-act-dot-red    { background: var(--color-error, #d14d4d); }
.rui-sub-act-dot-gray   { background: var(--color-text-disabled); }
.rui-sub-act-body { min-width: 0; flex: 1 1 auto; }
.rui-sub-act-msg {
    font-size: var(--text-xs);
    color: var(--color-text);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.rui-sub-act-when {
    font-size: 10px;
    color: var(--color-text-disabled);
    margin-top: 1px;
}

/* Filter-aware empty state CTA group (lesson L4). */
.rui-sub-empty-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

@media (max-width: 640px) {
    .rui-sub-attn-strip { gap: var(--space-1); }
    .rui-sub-attn-chip { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
    .rui-sub-stat-num { font-size: 22px; }
}

/* ==================================================================
 * RUI — Customer "Sending Domains" page (rich-redesign 2026-04-28)
 * Namespace: rui-domains-* — page-scoped, never used outside the
 * /rui/sending/domains route.
 *
 * Pairs with the canonical Admin List Page primitives
 * (mc-stats-strip, mc-page-grid, mc-page-rail, mc-card-preview).
 * Only the page-specific decorations live here.
 * ================================================================== */

/* Grid clamp — list card stays in its column without spawning a horizontal
   scrollbar. Columns compress naturally; user feedback 2026-04-28 was
   "ko dùng scrollbar check các list khác" — no overflow-x:auto here. */
.rui-domains-page-grid > div:first-child { min-width: 0; }
.rui-domains-page-grid .mc-table { width: 100%; }

/* ─── List rows — richer name cell + sub-line + per-row server identity ─── */
.rui-domains-list-name-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.rui-domains-list-name-icon {
    width: 28px;
    height: 28px;
    background: var(--color-hover-bg);
    border-radius: var(--radius-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Primary name in the row — base size for a "premium" feel; sub-line below
   stays --text-xs. */
.rui-domains-list-name {
    display: inline-block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.3;
}
.rui-domains-list-name:hover { color: var(--color-teal); }

/* Block-level flex so the sub-line stacks BELOW the domain name; inline-flex
   would let it sit beside the name on the same row. */
.rui-domains-list-sub {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.rui-domains-list-sub-mono {
    font-family: var(--font-mono, monospace);
    color: var(--color-text-disabled);
    font-size: 11px;
}
.rui-domains-list-sub-dot {
    color: var(--color-text-disabled);
    margin: 0 2px;
}
.rui-domains-list-sub-ok {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-success);
}
.rui-domains-list-sub-pending {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--chart-4);
}

.rui-domains-list-server {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.rui-domains-list-server-label {
    font-size: var(--text-sm);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}
.rui-domains-list-server-none {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

/* ─── Right rail — page-scoped flourishes on top of mc-page-rail / mc-card-preview ─── */
.rui-domains-rail-card { /* extends mc-card-preview */ }
.rui-domains-rail-card-attn .mc-card-preview-header {
    background: var(--chart-4-bg, #fff4ea);
}
.rui-domains-rail-card .mc-card-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}
.rui-domains-rail-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-domains-rail-num-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.rui-domains-rail-num {
    font-size: 28px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
}
.rui-domains-rail-num-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.rui-domains-rail-foot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.rui-domains-rail-foot-icon { font-size: 14px !important; }
/* L13 refinement — TEXT inline annotations next to a chart use the SEMANTIC
   palette for readability (chart palette pastels are too dim for text). The
   chart fills above (donut slice, progress bar) keep `--chart-N`; foot copy
   keeps `--color-success/error/warning`. */
.rui-domains-rail-delta-up    { color: var(--color-success); }
.rui-domains-rail-delta-down  { color: var(--color-error); }
.rui-domains-rail-delta-flat  { color: var(--color-text-muted); }

/* ─── Verification donut + legend ─── */
.rui-domains-health-donut {
    width: 100%;
    height: 140px;
    margin: 0 auto;
}
.rui-domains-health-legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.rui-domains-health-legend-item {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
}
.rui-domains-health-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
/* Legend dots mirror the donut slice colours — chart palette, not semantic. */
.rui-domains-health-legend-dot-verified   { background: var(--chart-2); }
.rui-domains-health-legend-dot-unverified { background: var(--chart-4); }
.rui-domains-health-legend-label {
    color: var(--color-text-muted);
}
.rui-domains-health-legend-num {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* ─── Activity sparkline holder ─── */
.rui-domains-activity-spark {
    width: 100%;
    height: 56px;
    margin-top: var(--space-1);
}

/* ─── Quota progress bar ─── */
.rui-domains-quota-bar {
    width: 100%;
    height: 6px;
    background: var(--color-hover-bg);
    border-radius: 999px;
    overflow: hidden;
    margin-top: var(--space-2);
}
.rui-domains-quota-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
/* Progress-bar fills come from the `--chart-*` pastel palette so a 6px tile
   doesn't look harsh next to muted card chrome. Map the semantic-sounding
   variant names onto chart tokens — green=chart-2, orange=chart-4, red=chart-5
   (soft rose), teal=chart-1. See HARD RULE in UI.md "Chart palette discipline". */
.rui-domains-quota-bar-fill-teal   { background: var(--chart-1); }
.rui-domains-quota-bar-fill-green  { background: var(--chart-2); }
.rui-domains-quota-bar-fill-orange { background: var(--chart-4); }
.rui-domains-quota-bar-fill-red    { background: var(--chart-5); }

/* ─── Setup checklist ─── */
.rui-domains-checklist {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.rui-domains-checklist-item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: var(--space-3);
    align-items: flex-start;
}
.rui-domains-checklist-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}
.rui-domains-checklist-body {
    min-width: 0;
}
.rui-domains-checklist-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}
.rui-domains-checklist-icon {
    font-size: 16px !important;
    color: var(--color-text-muted);
}
.rui-domains-checklist-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.5;
}

/* ─── Setup-flow steps for /rui/sending/servers/select ───────────────
 * Horizontal sequence with chevron arrows between nodes. Visually
 * differentiated from the provider grid below (no card chrome, dashed
 * container, circular icon nodes) so it reads as "follow this path",
 * not "pick one of three".
 * ─────────────────────────────────────────────────────────────────── */
.rui-flow-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-6);
    padding: var(--space-5) var(--space-4);
    background: var(--color-card-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
}
.rui-flow-step {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.rui-flow-arrow {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 12px;
    color: var(--color-text-muted);
    font-size: 28px !important;
    opacity: 0.45;
}
.rui-flow-node {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-teal-light);
    color: var(--color-teal);
    margin-bottom: var(--space-2);
}
.rui-flow-node .material-symbols-rounded {
    font-size: 22px;
}
.rui-flow-node-num {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--color-teal);
    color: #fff;
    font-size: 10px;
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-card-bg);
    box-sizing: content-box;
}
.rui-flow-step-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}
.rui-flow-step-desc {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}
@media (max-width: 768px) {
    .rui-flow-steps { flex-direction: column; align-items: stretch; }
    .rui-flow-step { text-align: left; padding-left: var(--space-3); }
    .rui-flow-arrow { transform: rotate(90deg); align-self: center; margin: 0; }
}

/* ─── Picker section grouping (Built-in vs Plugin) ──────────────────── */
.rui-picker-section { margin-bottom: var(--space-6); }
.rui-picker-section:last-child { margin-bottom: 0; }
.rui-picker-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.rui-picker-section-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.rui-picker-section-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0;
}
.rui-picker-section-count {
    margin-left: var(--space-1);
    padding: 2px 8px;
    border-radius: 9px;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: var(--weight-semibold);
}
.rui-picker-section-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4) 0;
    padding-left: 18px;     /* align with dot + title */
}
.rui-picker-plugin-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-card);
    background-color: var(--color-hover-bg);
    background-position: center;
    background-size: 28px;
    background-repeat: no-repeat;
    flex: 0 0 auto;
}
.rui-picker-plugin-badge {
    margin-left: var(--space-2);
    font-size: 9px;
    vertical-align: middle;
}

/* ==================================================================
 * RUI — Customer "Email Verification Servers" page (rich-redesign 2026-04-28)
 * Namespace: rui-verifiers-* — page-scoped.
 *
 * Chart-palette discipline (L13): fills come from --chart-N; text and
 * small-icon glyphs stay on semantic / muted tokens for readability.
 * ================================================================== */

.rui-verifiers-page-grid > div:first-child { min-width: 0; }
.rui-verifiers-page-grid .mc-table { width: 100%; }

/* ─── List rows — name cell, vendor pill, quota chip ─── */
.rui-verifiers-list-name-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.rui-verifiers-list-name-icon {
    width: 28px;
    height: 28px;
    background: var(--color-hover-bg);
    border-radius: var(--radius-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.rui-verifiers-list-name-icon .material-symbols-rounded { font-size: 18px; }
.rui-verifiers-list-name {
    display: inline-block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.3;
}
.rui-verifiers-list-name:hover { color: var(--color-teal); }

.rui-verifiers-list-sub {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.rui-verifiers-list-sub-mono {
    font-family: var(--font-mono, monospace);
    color: var(--color-text-disabled);
    font-size: 11px;
}
.rui-verifiers-list-sub-dot { color: var(--color-text-disabled); margin: 0 2px; }
.rui-verifiers-list-sub-tone { color: var(--color-text-muted); }

.rui-verifiers-list-vendor {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.rui-verifiers-vendor-mark {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--chart-1-bg, var(--color-hover-bg));
    color: var(--chart-1);
    flex-shrink: 0;
}
.rui-verifiers-vendor-mark .material-symbols-rounded { font-size: 16px; }
.rui-verifiers-list-vendor-name {
    font-size: var(--text-sm);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.rui-verifiers-quota-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-hover-bg);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}
.rui-verifiers-quota-chip .material-symbols-rounded {
    font-size: 14px;
    color: var(--color-text-muted);
}
.rui-verifiers-quota-none {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

/* ─── Right rail — page-scoped layer over mc-page-rail / mc-card-preview ─── */
.rui-verifiers-rail-card { /* extends mc-card-preview */ }
.rui-verifiers-rail-card .mc-card-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}
.rui-verifiers-rail-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-verifiers-rail-num-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.rui-verifiers-rail-num {
    font-size: 26px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rui-verifiers-rail-num-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.rui-verifiers-rail-foot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.rui-verifiers-rail-foot-icon { font-size: 14px !important; }

/* ─── Why-verify list (3 bullets — small icon + title + desc) ─── */
.rui-verifiers-why-list {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.rui-verifiers-why-item {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: var(--space-3);
    align-items: flex-start;
}
.rui-verifiers-why-icon {
    font-size: 20px !important;
    line-height: 1;
}
.rui-verifiers-why-body { min-width: 0; }
.rui-verifiers-why-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}
.rui-verifiers-why-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.5;
}

/* ─── Service catalog rail (connected first, available rest) ─── */
.rui-verifiers-catalog {
    padding: var(--space-2) var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rui-verifiers-catalog-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 0;
    font-size: var(--text-xs);
}
.rui-verifiers-catalog-row-on { /* connected state — emphasised */ }
.rui-verifiers-catalog-icon {
    color: var(--chart-2);
    font-size: 16px !important;
    flex-shrink: 0;
}
.rui-verifiers-catalog-icon-off {
    color: var(--color-text-disabled);
    font-size: 14px !important;
    flex-shrink: 0;
}
.rui-verifiers-catalog-name {
    flex: 1 1 auto;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rui-verifiers-catalog-name-off { color: var(--color-text-muted); }
.rui-verifiers-catalog-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--chart-2);
    font-weight: var(--weight-semibold);
}
.rui-verifiers-catalog-more {
    font-size: 11px;
    color: var(--color-text-muted);
    padding-top: 4px;
}

/* ─── Setup checklist (numbered list, mirrors sending-domains style) ─── */
.rui-verifiers-checklist {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.rui-verifiers-checklist-item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: var(--space-3);
    align-items: flex-start;
}
.rui-verifiers-checklist-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}
.rui-verifiers-checklist-body { min-width: 0; }
.rui-verifiers-checklist-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}
.rui-verifiers-checklist-icon {
    font-size: 16px !important;
    color: var(--color-text-muted);
}
.rui-verifiers-checklist-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.5;
}

/* ==================================================================
 * RUI — Customer "Sending Servers" page (rich-redesign 2026-04-28)
 * Namespace: rui-servers-* — page-scoped.
 *
 * Chart-palette discipline (L13): donut slices + per-vendor bars + warmup
 * meter come from --chart-N. Foot text + warning copy stays semantic.
 * ================================================================== */

.rui-servers-page-grid > div:first-child { min-width: 0; }
.rui-servers-page-grid .mc-table { width: 100%; }

/* ─── List rows ─── */
.rui-servers-list-name-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.rui-servers-list-name {
    display: inline-block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.3;
}
.rui-servers-list-name:hover { color: var(--color-teal); }
.rui-servers-list-sub {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.rui-servers-list-sub-mono {
    font-family: var(--font-mono, monospace);
    color: var(--color-text-disabled);
    font-size: 11px;
}
.rui-servers-list-sub-dot { color: var(--color-text-disabled); margin: 0 2px; }
.rui-servers-list-sub-tone { color: var(--color-text-muted); }

.rui-servers-list-type {
    font-size: var(--text-sm);
    color: var(--color-text);
    white-space: nowrap;
}
.rui-servers-quota-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--color-hover-bg);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}
.rui-servers-quota-chip .material-symbols-rounded {
    font-size: 14px;
    color: var(--color-text-muted);
}
.rui-servers-quota-none {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}
.rui-servers-warmup-off { color: var(--color-text-disabled); font-size: var(--text-sm); }

/* ─── Right rail (5 cards) ─── */
.rui-servers-rail-card { /* extends mc-card-preview */ }
.rui-servers-rail-card-attn .mc-card-preview-header {
    background: var(--chart-4-bg, #fff4ea);
}
.rui-servers-rail-card .mc-card-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}
.rui-servers-rail-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.rui-servers-rail-num-row { display: flex; align-items: baseline; gap: var(--space-2); }
.rui-servers-rail-num {
    font-size: 26px;
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rui-servers-rail-num-label { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ─── Vendor mix donut + legend ─── */
.rui-servers-mix-donut {
    width: 100%;
    height: 140px;
    margin: 0 auto;
}
.rui-servers-mix-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--space-2);
}
.rui-servers-mix-legend-item {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
}
.rui-servers-mix-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.rui-servers-mix-legend-name { color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rui-servers-mix-legend-num {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* ─── Throughput per-vendor bars ─── */
.rui-servers-throughput-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    font-weight: var(--weight-semibold);
}
.rui-servers-throughput-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rui-servers-throughput-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rui-servers-throughput-row-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-xs);
}
.rui-servers-throughput-row-name { color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rui-servers-throughput-row-num { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rui-servers-throughput-row-bar {
    width: 100%;
    height: 6px;
    background: var(--color-hover-bg);
    border-radius: 999px;
    overflow: hidden;
}
.rui-servers-throughput-row-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* ─── Warmup status ─── */
.rui-servers-warmup-meter {
    width: 100%;
    height: 6px;
    background: var(--color-hover-bg);
    border-radius: 999px;
    overflow: hidden;
    margin-top: var(--space-2);
}
.rui-servers-warmup-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--chart-4);
    transition: width 0.3s ease;
}
.rui-servers-warmup-foot {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 6px;
}
.rui-servers-warmup-foot-num {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.rui-servers-warmup-help {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-top: 6px;
}

/* ─── Catalog rail ─── */
.rui-servers-catalog {
    padding: var(--space-2) var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rui-servers-catalog-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 0;
    font-size: var(--text-xs);
}
.rui-servers-catalog-row-on { /* connected */ }
.rui-servers-catalog-icon {
    color: var(--chart-2);
    font-size: 16px !important;
    flex-shrink: 0;
}
.rui-servers-catalog-icon-off {
    color: var(--color-text-disabled);
    font-size: 14px !important;
    flex-shrink: 0;
}
.rui-servers-catalog-name {
    flex: 1 1 auto;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rui-servers-catalog-name-off { color: var(--color-text-muted); }
.rui-servers-catalog-count {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--chart-2);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}
.rui-servers-catalog-more {
    font-size: 11px;
    color: var(--color-text-muted);
    padding-top: 4px;
}

/* ─── Setup checklist ─── */
.rui-servers-checklist {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.rui-servers-checklist-item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: var(--space-3);
    align-items: flex-start;
}
.rui-servers-checklist-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}
.rui-servers-checklist-body { min-width: 0; }
.rui-servers-checklist-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.3;
}
.rui-servers-checklist-icon {
    font-size: 16px !important;
    color: var(--color-text-muted);
}
.rui-servers-checklist-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.5;
}