/* _content/Ayva.EmailTemplates/Components/AssetPickerModal.razor.rz.scp.css */
.email-asset-grid[b-cpbxrmiyhh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-md);
    padding: var(--space-md);
}

.email-asset-card[b-cpbxrmiyhh] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: center;
    color: var(--text-primary);
    font-size: 0.8125rem;
    min-height: 160px;
}

.email-asset-card:hover[b-cpbxrmiyhh] {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.email-asset-card img[b-cpbxrmiyhh] {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.email-asset-fallback[b-cpbxrmiyhh] {
    width: 100%;
    height: 100px;
    display: grid;
    place-items: center;
    background: var(--glass-elevated);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.email-asset-name[b-cpbxrmiyhh] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
/* _content/Ayva.EmailTemplates/Components/Designer/AiRail.razor.rz.scp.css */
.ai-rail[b-36qd8opwag] {
    display: flex;
    flex-direction: column;
    background: var(--glass-elevated);
    border-top: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: max-height var(--transition-medium, 250ms ease);
}

.ai-rail-collapsed[b-36qd8opwag] {
    max-height: 40px;
    overflow: hidden;
}

.ai-rail-open[b-36qd8opwag] {
    max-height: 480px;
}

.ai-rail-toggle[b-36qd8opwag] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.ai-rail-toggle:hover[b-36qd8opwag] {
    background: var(--bg-card);
}

.ai-rail-toggle-spacer[b-36qd8opwag] {
    flex: 1;
}

.ai-rail-body[b-36qd8opwag] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--space-lg) var(--space-md);
    gap: var(--space-sm);
}

.ai-rail-modes[b-36qd8opwag] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.ai-rail-mode[b-36qd8opwag] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-md);
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease),
                color var(--transition-fast, 150ms ease),
                border-color var(--transition-fast, 150ms ease);
}

.ai-rail-mode:hover:not(:disabled)[b-36qd8opwag] {
    background: var(--bg-card);
    color: var(--text-primary);
}

.ai-rail-mode:disabled[b-36qd8opwag] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-rail-mode-active[b-36qd8opwag] {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-on-color, #fff);
}

.ai-rail-mode-active:hover:not(:disabled)[b-36qd8opwag] {
    background: var(--accent-color);
    color: var(--accent-on-color, #fff);
}

.ai-rail-log[b-36qd8opwag] {
    overflow-y: auto;
    padding: var(--space-sm) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 120px;
    max-height: 280px;
}

.ai-rail-msg[b-36qd8opwag] {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}

.ai-rail-msg-role[b-36qd8opwag] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--text-secondary);
    font-size: 0.75rem;
    flex-shrink: 0;
    min-width: 60px;
    padding-top: 0.125rem;
}

.ai-rail-msg-content[b-36qd8opwag] {
    flex: 1;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-primary, system-ui, sans-serif);
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ai-rail-msg-user .ai-rail-msg-content[b-36qd8opwag] {
    background: var(--accent-color);
    color: var(--accent-on-color, #fff);
    border-color: var(--accent-color);
}

.ai-rail-msg-system .ai-rail-msg-content[b-36qd8opwag] {
    font-style: italic;
    color: var(--text-secondary);
    background: transparent;
    border-style: dashed;
}

.ai-rail-tool[b-36qd8opwag] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-md);
    background: var(--bg-base);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin-left: 60px;
    align-self: flex-start;
}

.ai-rail-tool code[b-36qd8opwag] {
    color: var(--accent-color);
    font-family: var(--font-mono, ui-monospace, monospace);
}

.ai-rail-tool-error[b-36qd8opwag] {
    color: var(--color-warning, var(--text-secondary));
    font-size: 0.75rem;
}

.ai-rail-error[b-36qd8opwag] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: color-mix(in srgb, var(--color-error, var(--accent-color)) 15%, var(--bg-card));
    border: 1px solid var(--color-error, var(--accent-color));
    border-radius: var(--radius-sm);
    color: var(--color-error, var(--text-primary));
    font-size: 0.875rem;
}

.ai-rail-input[b-36qd8opwag] {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--border-color);
}

.ai-rail-input[b-36qd8opwag]  .mud-input {
    flex: 1;
}

@media (max-width: 768px) {
    .ai-rail-modes[b-36qd8opwag] {
        gap: var(--space-2xs);
    }
    .ai-rail-mode[b-36qd8opwag] {
        font-size: 0.75rem;
        padding: 0.125rem var(--space-sm);
    }
    .ai-rail-msg-role[b-36qd8opwag] {
        min-width: 40px;
    }
    .ai-rail-tool[b-36qd8opwag] {
        margin-left: 40px;
    }
}
/* _content/Ayva.EmailTemplates/Components/Designer/CanvasBlock.razor.rz.scp.css */
.canvas-block[b-ui8jgadhe3] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease);
}

.canvas-block:hover[b-ui8jgadhe3] {
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.canvas-block-selected[b-ui8jgadhe3] {
    border-color: var(--accent-color);
    background: var(--glass-elevated);
    box-shadow: var(--shadow-md);
}

.canvas-block-icon[b-ui8jgadhe3] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--accent-color);
    background: var(--glass-elevated);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.canvas-block-body[b-ui8jgadhe3] {
    min-width: 0;
}

.canvas-block-meta[b-ui8jgadhe3] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2xs);
}

.canvas-block-summary[b-ui8jgadhe3] {
    color: var(--text-primary);
    font-size: 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canvas-block-actions[b-ui8jgadhe3] {
    display: flex;
    gap: var(--space-2xs);
    flex-shrink: 0;
}
/* _content/Ayva.EmailTemplates/Components/Designer/DesignerSurface.razor.rz.scp.css */
/*
   Tabbed surface that hosts the WYSIWYG / Desktop / Mobile / Tree / Plain
   modes against the same email document. Each panel takes the full surface
   minus the tab header so the embedded iframe / canvas can scroll without
   the page scrolling around it.
*/

.designer-surface[b-l8l9br34ee] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* allows nested overflow:auto to do its thing */
}

.designer-surface-tabs[b-l8l9br34ee] {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.designer-surface-tabs[b-l8l9br34ee]  .mud-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.designer-surface-tabs[b-l8l9br34ee]  .mud-tabs-toolbar {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    padding-right: 64px; /* room for the trailing fullscreen icon */
}

.designer-surface-tabs[b-l8l9br34ee]  .mud-tabs-panels {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.designer-surface-tabs[b-l8l9br34ee]  .designer-surface-panel {
    height: 100%;
    overflow: auto;
    padding: 0;
}

.designer-surface-trailing[b-l8l9br34ee] {
    position: absolute;
    top: 4px;
    right: 8px;
    display: flex;
    align-items: center;
    z-index: 5;
}

.designer-surface-content[b-l8l9br34ee] {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Preview tabs (Desktop / Mobile) ─────────────────────────────────── */

.designer-surface-preview[b-l8l9br34ee] {
    overflow-y: auto;
    overflow-x: auto;
    background: var(--bg-base);
    padding: var(--space-md);
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
}

[b-l8l9br34ee] .designer-surface-frame-wrap {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: width var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    max-width: 100%;
    flex-shrink: 0;
}

[b-l8l9br34ee] .designer-surface-frame {
    width: 100%;
    border: 0;
    background: white;
    min-height: 600px;
    display: block;
    border-radius: var(--radius-sm);
}

.designer-surface-pending[b-l8l9br34ee] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    padding: var(--space-2xl);
}

/* ── Plain text tab ──────────────────────────────────────────────────── */

.designer-surface-plain[b-l8l9br34ee] {
    padding: var(--space-md);
}

.designer-surface-plain-text[b-l8l9br34ee] {
    width: 100%;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    overflow-x: auto;
    white-space: pre-wrap;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: 0;
}

/* ── Tree tab ────────────────────────────────────────────────────────── */

.designer-surface-tree[b-l8l9br34ee] {
    padding: var(--space-md);
    gap: var(--space-md);
}

.designer-surface-tree-list[b-l8l9br34ee] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
    overflow-y: auto;
}

.designer-surface-tree-empty[b-l8l9br34ee] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    padding: var(--space-2xl);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

/* ── Add-block dock (used by WYSIWYG + Tree) ─────────────────────────── */

.designer-surface-add[b-l8l9br34ee] {
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}
/* _content/Ayva.EmailTemplates/Components/Designer/PreviewFullscreenDialog.razor.rz.scp.css */
/* ── dialog chrome ───────────────────────────────────────────────────── */

.preview-fs-dialog[b-pe0le9jph3] {
    background: var(--bg-base);
}

.preview-fs-content[b-pe0le9jph3] {
    padding: 0 !important;
    height: 100%;
    overflow: hidden;
}

.preview-fs-title[b-pe0le9jph3] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
}

.preview-fs-title-text[b-pe0le9jph3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.preview-fs-title-label[b-pe0le9jph3] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.preview-fs-title-subject[b-pe0le9jph3] {
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}

/* ── tabs ─────────────────────────────────────────────────────────────── */

.preview-fs-tabs[b-pe0le9jph3] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.preview-fs-tabs[b-pe0le9jph3]  .mud-tabs-panels {
    flex: 1;
    overflow: hidden;
}

.preview-fs-tabs[b-pe0le9jph3]  .mud-tab-panel {
    height: 100%;
}

.preview-fs-pane[b-pe0le9jph3] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-base);
}

/* ── width / device preset bar ──────────────────────────────────────── */

.preview-fs-presets[b-pe0le9jph3] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.preview-fs-presets-label[b-pe0le9jph3] {
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-right: var(--space-xs);
}

.preview-fs-presets-value[b-pe0le9jph3] {
    margin-left: auto;
    color: var(--text-primary);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
}

/* ── frame host (centers the iframe) ────────────────────────────────── */

.preview-fs-frame-host[b-pe0le9jph3] {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-2xl);
    background: var(--bg-base);
}

.preview-fs-frame-wrap[b-pe0le9jph3] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    flex-shrink: 0;
    transition: width var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

.preview-fs-frame[b-pe0le9jph3] {
    width: 100%;
    height: 80vh;
    min-height: 600px;
    border: 0;
    background: white;
    display: block;
}

/* ── phone-frame chrome for mobile tab ───────────────────────────────── */

.preview-fs-phone[b-pe0le9jph3] {
    background: #1a1a1a;
    padding: var(--space-md) var(--space-md) var(--space-2xl);
    border-radius: 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid #2a2a2a;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.preview-fs-phone-notch[b-pe0le9jph3] {
    width: 6rem;
    height: 0.375rem;
    background: #2a2a2a;
    border-radius: 999px;
}

.preview-fs-phone-screen[b-pe0le9jph3] {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid #2a2a2a;
}

.preview-fs-phone-screen .preview-fs-frame[b-pe0le9jph3] {
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* ── plain text tab ──────────────────────────────────────────────────── */

.preview-fs-plain-pane[b-pe0le9jph3] {
    padding: var(--space-2xl);
    overflow: auto;
}

.preview-fs-plaintext[b-pe0le9jph3] {
    background: var(--bg-card);
    color: var(--text-primary);
    padding: var(--space-2xl);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    white-space: pre-wrap;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.875rem;
    line-height: 1.6;
    max-width: 64rem;
    margin: 0 auto;
}

/* ── empty / error fallback ─────────────────────────────────────────── */

.preview-fs-empty[b-pe0le9jph3] {
    color: var(--text-secondary);
    padding: var(--space-3xl);
    text-align: center;
    font-size: 0.875rem;
}

/* ── tighter layouts on small viewports ─────────────────────────────── */

@media (max-width: 768px) {
    .preview-fs-presets[b-pe0le9jph3] {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.75rem;
    }
    .preview-fs-frame-host[b-pe0le9jph3] {
        padding: var(--space-md);
    }
    .preview-fs-title-subject[b-pe0le9jph3] {
        max-width: 50vw;
    }
}
/* _content/Ayva.EmailTemplates/Components/Designer/PreviewPane.razor.rz.scp.css */
.preview-pane[b-t5pv23pnod] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    height: 100%;
}

.preview-toolbar[b-t5pv23pnod] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

.preview-toolbar-row[b-t5pv23pnod] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
}

.preview-subject[b-t5pv23pnod] {
    display: flex;
    gap: var(--space-xs);
    font-size: 0.8125rem;
    align-items: baseline;
    overflow: hidden;
}

.preview-subject-label[b-t5pv23pnod] {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.preview-subject-text[b-t5pv23pnod] {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── width slider row ────────────────────────────────────────────────── */

.preview-width-control[b-t5pv23pnod] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: var(--space-xs) 0;
}

.preview-width-label[b-t5pv23pnod] {
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    min-width: 3rem;
}

.preview-width-control[b-t5pv23pnod]  .mud-slider {
    flex: 1;
    min-width: 8rem;
    margin: 0;
}

.preview-width-value[b-t5pv23pnod] {
    color: var(--text-primary);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 4rem;
    text-align: right;
}

/* ── preview viewport ────────────────────────────────────────────────── */

.preview-frame-host[b-t5pv23pnod] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: var(--bg-base);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
}

/*
   Wrap the iframe in a host so the width slider drives the wrap (which
   in turn sizes the iframe via 100% inside). This lets us animate width
   smoothly without flickering the iframe's own re-layout, and gives the
   visual border + shadow a place to live without tying them to the
   iframe element itself.
*/
.preview-frame-wrap[b-t5pv23pnod] {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: width var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    max-width: 100%;
    flex-shrink: 0;
}

.preview-frame[b-t5pv23pnod] {
    width: 100%;
    border: 0;
    background: white;
    min-height: 600px;
    display: block;
    border-radius: var(--radius-sm);
}

.preview-pending[b-t5pv23pnod] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    padding: var(--space-2xl);
}

.preview-error[b-t5pv23pnod] {
    width: 100%;
    margin: var(--space-md) 0;
}

.preview-plaintext[b-t5pv23pnod] {
    width: 100%;
    background: var(--bg-card);
    color: var(--text-primary);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    overflow-x: auto;
    white-space: pre-wrap;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .preview-width-control[b-t5pv23pnod] {
        flex-wrap: wrap;
    }
    .preview-width-value[b-t5pv23pnod] {
        min-width: 3.5rem;
    }
}
/* _content/Ayva.EmailTemplates/Components/Designer/ValidationSummary.razor.rz.scp.css */
.validation-summary[b-etexc73dw4] {
    background: var(--glass-elevated);
    border-top: 1px solid var(--border-color);
}

.validation-summary-header[b-etexc73dw4] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    background: transparent;
    border: 0;
    padding: var(--space-sm) var(--space-lg);
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: background var(--transition-fast, 150ms ease);
}

.validation-summary-header:hover[b-etexc73dw4] {
    background: var(--bg-card);
}

.validation-summary-icon[b-etexc73dw4] {
    display: inline-flex;
    align-items: center;
}

.validation-summary-spacer[b-etexc73dw4] {
    flex: 1;
}

.validation-summary-list[b-etexc73dw4] {
    list-style: none;
    padding: var(--space-sm) var(--space-lg) var(--space-md);
    margin: 0;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    background: var(--bg-card);
}

.validation-summary-list li[b-etexc73dw4] {
    font-size: 0.8125rem;
    line-height: 1.4;
}

.validation-summary-error[b-etexc73dw4] {
    color: var(--text-primary);
    border-left: 3px solid var(--color-danger, #ef4444);
    padding-left: var(--space-sm);
}

.validation-summary-warning[b-etexc73dw4] {
    color: var(--text-primary);
    border-left: 3px solid var(--color-warning, #f59e0b);
    padding-left: var(--space-sm);
}

.validation-summary-blockref[b-etexc73dw4] {
    color: var(--text-secondary);
    font-family: var(--font-mono, ui-monospace, monospace);
}
/* _content/Ayva.EmailTemplates/Components/Designer/Wysiwyg/WysiwygCanvas.razor.rz.scp.css */
/* Phase 11 — WYSIWYG canvas styles. Centred 600px-wide email approximation
   with insert gaps between every block. Theme palette mirrors
   AyvaDefaultThemeProvider so the canvas looks like the production MJML
   render even though the markup is Blazor-rendered. */

.wysiwyg-canvas-shell[b-ds2nw2m7nt] {
    background: var(--bg-base);
    overflow-y: auto;
    padding: var(--space-xl) 0;
    min-height: 100%;
    display: flex;
    justify-content: center;
}

.wysiwyg-canvas-page[b-ds2nw2m7nt] {
    width: 100%;
    max-width: 600px;
    background: #ffffff;
    color: #1e293b; /* mirrors ayva-default BodyText */
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

.wysiwyg-canvas-empty[b-ds2nw2m7nt] {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--space-2xl) var(--space-lg);
}

.wysiwyg-canvas-empty h3[b-ds2nw2m7nt] {
    margin: var(--space-md) 0 var(--space-2xs);
    color: #1e293b;
}

.wysiwyg-canvas-empty p[b-ds2nw2m7nt] {
    margin: 0 0 var(--space-md);
}

/* ── Insert gap ───────────────────────────────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-insert-gap {
    position: relative;
    height: 8px;
    margin: 2px 0;
    transition: height var(--transition-fast, 150ms ease);
}

[b-ds2nw2m7nt] .wysiwyg-insert-gap:hover,
[b-ds2nw2m7nt] .wysiwyg-insert-gap:focus-within {
    height: 32px;
}

[b-ds2nw2m7nt] .wysiwyg-insert-gap-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0;
    border-top: 2px dashed transparent;
    transition: border-color var(--transition-fast, 150ms ease);
}

[b-ds2nw2m7nt] .wysiwyg-insert-gap:hover .wysiwyg-insert-gap-line,
[b-ds2nw2m7nt] .wysiwyg-insert-gap:focus-within .wysiwyg-insert-gap-line {
    border-top-color: var(--accent-color);
}

[b-ds2nw2m7nt] .wysiwyg-insert-gap-trigger {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity var(--transition-fast, 150ms ease),
                background var(--transition-fast, 150ms ease),
                color var(--transition-fast, 150ms ease);
}

[b-ds2nw2m7nt] .wysiwyg-insert-gap:hover .wysiwyg-insert-gap-trigger,
[b-ds2nw2m7nt] .wysiwyg-insert-gap:focus-within .wysiwyg-insert-gap-trigger {
    opacity: 1;
}

[b-ds2nw2m7nt] .wysiwyg-insert-gap-trigger:hover {
    background: var(--accent-color);
    color: #ffffff;
    border-color: var(--accent-color);
}

[b-ds2nw2m7nt] .wysiwyg-insert-gap-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 24px));
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    z-index: 20;
    min-width: 320px;
    box-shadow: var(--shadow-md);
}

[b-ds2nw2m7nt] .wysiwyg-insert-gap-menu-header {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
    padding: 0 var(--space-xs);
}

[b-ds2nw2m7nt] .wysiwyg-insert-gap-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xs);
}

[b-ds2nw2m7nt] .wysiwyg-insert-gap-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease),
                border-color var(--transition-fast, 150ms ease);
}

[b-ds2nw2m7nt] .wysiwyg-insert-gap-menu-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

/* ── Block selection wrapper ──────────────────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-block {
    position: relative;
    padding: 4px;
    margin: 4px 0;
    border-radius: var(--radius-sm);
    outline: 1px solid transparent;
    outline-offset: 4px;
    transition: outline-color var(--transition-fast, 150ms ease);
    cursor: pointer;
}

[b-ds2nw2m7nt] .wysiwyg-block:hover {
    outline-color: rgba(99, 102, 241, 0.25); /* accent-color @ 25% */
}

[b-ds2nw2m7nt] .wysiwyg-block-selected {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}

[b-ds2nw2m7nt] .wysiwyg-block-actions {
    position: absolute;
    top: -36px;
    right: 0;
    display: flex;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px;
    z-index: 5;
    box-shadow: var(--shadow-sm);
}

/* ── Block kind: heading ──────────────────────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-heading {
    margin: 0;
    color: #1e293b;
    line-height: 1.25;
    font-weight: 600;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    outline: none;
    min-height: 1.5em;
}

[b-ds2nw2m7nt] .wysiwyg-h1 { font-size: 2rem; }
[b-ds2nw2m7nt] .wysiwyg-h2 { font-size: 1.5rem; }
[b-ds2nw2m7nt] .wysiwyg-h3 { font-size: 1.25rem; }

[b-ds2nw2m7nt] .wysiwyg-heading-edit-wrap,
[b-ds2nw2m7nt] .wysiwyg-text-edit-wrap {
    position: relative;
}

/* ── Block kind: text ─────────────────────────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-text {
    margin: 0;
    color: #1e293b;
    line-height: 1.6;
    font-size: 0.9375rem;
    outline: none;
    min-height: 1.5em;
}

/* ── Block kind: image ────────────────────────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-image {
    display: block;
    margin: 0 auto;
    border-radius: var(--radius-xs);
    height: auto;
}

[b-ds2nw2m7nt] .wysiwyg-image-placeholder {
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: var(--radius-md);
    color: #64748b;
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
}

/* ── Block kind: button ───────────────────────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-button-wrap {
    text-align: center;
}

[b-ds2nw2m7nt] .wysiwyg-button {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: default; /* canvas-mode: clicks select, don't navigate */
    border: 1px solid transparent;
}

[b-ds2nw2m7nt] .wysiwyg-button-primary {
    background: #6366f1; /* mirrors AyvaDefaultThemeProvider AccentPrimary */
    color: #ffffff;
    border-color: #6366f1;
}

[b-ds2nw2m7nt] .wysiwyg-button-secondary {
    background: #94a3b8;
    color: #ffffff;
    border-color: #94a3b8;
}

[b-ds2nw2m7nt] .wysiwyg-button-outline {
    background: transparent;
    color: #6366f1;
    border-color: #6366f1;
}

/* ── Block kind: divider ──────────────────────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: var(--space-md) 0;
}

[b-ds2nw2m7nt] .wysiwyg-divider-accent { border-top-color: #6366f1; }
[b-ds2nw2m7nt] .wysiwyg-divider-muted  { border-top-color: #cbd5e1; }
[b-ds2nw2m7nt] .wysiwyg-divider-neutral { border-top-color: #e2e8f0; }

/* ── Block kind: spacer ───────────────────────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-spacer {
    border: 1px dashed transparent;
    border-radius: var(--radius-xs);
}

[b-ds2nw2m7nt] .wysiwyg-block:hover .wysiwyg-spacer,
[b-ds2nw2m7nt] .wysiwyg-block-selected .wysiwyg-spacer {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.05);
}

/* ── Block kind: columns ──────────────────────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-columns {
    display: flex;
    gap: var(--space-md);
}

[b-ds2nw2m7nt] .wysiwyg-columns-col {
    min-width: 0;
    flex-grow: 1;
}

/* ── Block kind: callout ──────────────────────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-callout {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-left: 4px solid #94a3b8;
    background: #f8fafc;
}

[b-ds2nw2m7nt] .wysiwyg-callout-info {
    background: #eff6ff;
    border-left-color: #3b82f6;
}
[b-ds2nw2m7nt] .wysiwyg-callout-success {
    background: #ecfdf5;
    border-left-color: #10b981;
}
[b-ds2nw2m7nt] .wysiwyg-callout-warning {
    background: #fffbeb;
    border-left-color: #f59e0b;
}
[b-ds2nw2m7nt] .wysiwyg-callout-danger {
    background: #fef2f2;
    border-left-color: #ef4444;
}

/* ── Block kind: html ─────────────────────────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-html {
    border: 2px dashed #f59e0b; /* warning amber — escape-hatch flag */
    border-radius: var(--radius-md);
    overflow: hidden;
}

[b-ds2nw2m7nt] .wysiwyg-html-flag {
    background: #fffbeb;
    color: #b45309;
    padding: var(--space-2xs) var(--space-xs);
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

[b-ds2nw2m7nt] .wysiwyg-html-content {
    padding: var(--space-sm);
    background: #ffffff;
}

/* ── Var chip (rendered via SpanRenderer + JS interop) ────────────── */
[b-ds2nw2m7nt] .var-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.15);
    color: #4338ca;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    font-weight: 500;
    margin: 0 2px;
    user-select: all;
    cursor: default;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* ── Floating toolbar ─────────────────────────────────────────────── */
/* Sits as the first child of the edit wrap, in normal block flow, so it
   always renders above the contenteditable regardless of scroll
   position or overflow:hidden ancestors. Sticky-top so it stays visible
   while the user scrolls through a long block. */
[b-ds2nw2m7nt] .wysiwyg-heading-edit-wrap,
[b-ds2nw2m7nt] .wysiwyg-text-edit-wrap {
    position: relative;
}

[b-ds2nw2m7nt] .wysiwyg-toolbar {
    position: sticky;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    background: var(--glass-elevated, var(--bg-card));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: var(--space-xs);
    z-index: 10;
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    background: transparent;
    border: none;
    color: inherit;
    border-radius: var(--radius-xs);
    padding: 4px 6px;
    cursor: pointer;
    font-size: 0.8125rem;
    transition: background var(--transition-fast, 150ms ease);
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-btn:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.1));
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-btn-active {
    background: rgba(99, 102, 241, 0.18);
    color: var(--accent-color);
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-btn-active:hover {
    background: rgba(99, 102, 241, 0.25);
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-btn-label {
    font-size: 0.75rem;
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 2px;
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-select {
    position: relative;
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-2xs);
    min-width: 180px;
    z-index: 20;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-xs);
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-xs);
    text-align: left;
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-menu-item:hover {
    background: var(--bg-hover, rgba(99, 102, 241, 0.1));
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-menu-item-active {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-color);
    font-weight: 500;
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-var-type {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-link-popup {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    display: flex;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-2xs);
    z-index: 20;
    box-shadow: var(--shadow-md);
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-link-input {
    flex: 1;
    min-width: 220px;
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    padding: 4px 8px;
    color: var(--text-primary);
    font-size: 0.8125rem;
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-link-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-link-confirm,
[b-ds2nw2m7nt] .wysiwyg-toolbar-link-cancel {
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 0.8125rem;
}

[b-ds2nw2m7nt] .wysiwyg-toolbar-link-confirm {
    color: var(--accent-color);
    font-weight: 500;
}

/* ── Nested blocks (columns / callout) ────────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-nested {
    min-height: 32px;
}

[b-ds2nw2m7nt] .wysiwyg-nested-empty {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    padding: var(--space-md);
    text-align: center;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

[b-ds2nw2m7nt] .wysiwyg-nested-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    background: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    cursor: pointer;
    font-size: 0.75rem;
}

[b-ds2nw2m7nt] .wysiwyg-nested-empty-btn:hover {
    background: var(--accent-color);
    color: #ffffff;
}

/* ── AI pulse-highlight reaches into BlockView ────────────────────── */
@keyframes wysiwyg-pulse-highlight-b-ds2nw2m7nt {
    0% {
        box-shadow: 0 0 0 2px var(--accent-color);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

[b-ds2nw2m7nt] .wysiwyg-block.pulse-highlight {
    animation: wysiwyg-pulse-highlight-b-ds2nw2m7nt 1.5s ease-out;
}

/* ── Unknown / unsupported block fallback ─────────────────────────── */
[b-ds2nw2m7nt] .wysiwyg-block-unknown {
    color: var(--text-secondary);
    font-style: italic;
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-sm);
}
/* _content/Ayva.EmailTemplates/Components/EmailDashboardPanel.razor.rz.scp.css */
.email-list-shell[b-00r5s3a7oq] {
    padding: var(--space-2xl);
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.email-list-header[b-00r5s3a7oq] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    background: var(--glass-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-2xl);
    box-shadow: var(--shadow-sm);
}

.email-list-icon[b-00r5s3a7oq] {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--accent-color);
    flex-shrink: 0;
}

.email-list-text[b-00r5s3a7oq] {
    flex: 1 1 320px;
    min-width: 0;
}

.email-list-text h1[b-00r5s3a7oq] {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin: 0 0 var(--space-2xs);
    font-family: var(--font-primary);
}

.email-list-text p[b-00r5s3a7oq] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9375rem;
}

.email-list-actions[b-00r5s3a7oq] {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.email-list-filters[b-00r5s3a7oq] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(160px, 240px) auto;
    gap: var(--space-md);
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
}

.email-list-table[b-00r5s3a7oq] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.email-list-slug[b-00r5s3a7oq] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    color: var(--accent-color);
    background: rgba(0, 0, 0, 0.18);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
}

.email-list-muted[b-00r5s3a7oq] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.email-list-loading[b-00r5s3a7oq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-3xl);
    color: var(--text-secondary);
}

.email-list-empty[b-00r5s3a7oq] {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
}

.email-list-empty h2[b-00r5s3a7oq] {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin: var(--space-md) 0 var(--space-xs);
}

.email-list-empty p[b-00r5s3a7oq] {
    margin: 0 0 var(--space-lg);
}

.email-list-alert[b-00r5s3a7oq] {
    margin-bottom: var(--space-md);
}

.text-right[b-00r5s3a7oq] {
    text-align: right;
}

@media (max-width: 768px) {
    .email-list-filters[b-00r5s3a7oq] {
        grid-template-columns: 1fr;
    }

    .email-list-shell[b-00r5s3a7oq] {
        padding: var(--space-md);
    }

    .email-list-header[b-00r5s3a7oq] {
        padding: var(--space-md);
    }
}
/* _content/Ayva.EmailTemplates/Components/Setting.razor.rz.scp.css */
.setting-row[b-w8f2eh4yow] {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(280px, 2fr);
    gap: var(--space-md);
    align-items: start;
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.05));
}

.setting-row:last-child[b-w8f2eh4yow] {
    border-bottom: 0;
}

.setting-label strong[b-w8f2eh4yow] {
    color: var(--text-primary);
    font-size: var(--font-size-sm, 0.875rem);
}

.setting-help[b-w8f2eh4yow] {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs, 0.75rem);
}

.setting-value[b-w8f2eh4yow] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.setting-display[b-w8f2eh4yow] {
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size-sm, 0.875rem);
    word-break: break-all;
}

.setting-actions[b-w8f2eh4yow] {
    display: flex;
    gap: var(--space-xs);
}

@media (max-width: 768px) {
    .setting-row[b-w8f2eh4yow] {
        grid-template-columns: 1fr;
    }
}
/* _content/Ayva.EmailTemplates/Pages/AssetLibraryPage.razor.rz.scp.css */
/* Phase 9 — AssetLibraryPage scoped styles. Glassmorphism dark theme,
   no hardcoded colors / fonts / spacing per UI standards (everything
   pulls from ayva-theme.css variables). */

.library-page[b-t0mzwkksl5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
}

.library-header[b-t0mzwkksl5] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.library-back[b-t0mzwkksl5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease);
}

.library-back:hover[b-t0mzwkksl5] {
    background: var(--bg-hover));
}

.library-title[b-t0mzwkksl5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.library-title h1[b-t0mzwkksl5] {
    margin: 0;
    font-family: var(--font-primary, system-ui);
    font-size: var(--font-size-xl, 1.5rem);
    color: var(--text-primary);
}

.library-title p[b-t0mzwkksl5] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm, 0.875rem);
}

.library-actions[b-t0mzwkksl5] {
    display: flex;
    gap: var(--space-sm);
}

.library-filters[b-t0mzwkksl5] {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
}

.library-alert[b-t0mzwkksl5] {
    margin-block: var(--space-sm);
}

.library-loading[b-t0mzwkksl5],
.library-empty[b-t0mzwkksl5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    color: var(--text-muted);
}

.library-empty h2[b-t0mzwkksl5] {
    margin: 0;
    font-family: var(--font-primary, system-ui);
}

.library-grid[b-t0mzwkksl5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
}

.library-card[b-t0mzwkksl5] {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md, 8px);
    background: var(--bg-card));
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    overflow: hidden;
    transition: transform var(--transition-fast, 150ms ease),
                box-shadow var(--transition-fast, 150ms ease);
}

.library-card:hover[b-t0mzwkksl5] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.4));
}

.library-card-thumb[b-t0mzwkksl5] {
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-base));
    overflow: hidden;
}

.library-card-thumb img[b-t0mzwkksl5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.library-card-fallback[b-t0mzwkksl5] {
    color: var(--text-muted);
}

.library-card-body[b-t0mzwkksl5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-sm);
}

.library-card-name[b-t0mzwkksl5] {
    font-weight: 600;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-card-meta[b-t0mzwkksl5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-muted);
}

.library-card-mime[b-t0mzwkksl5] {
    font-family: var(--font-mono, monospace);
}

.library-card-actions[b-t0mzwkksl5] {
    display: flex;
    gap: 2px;
    margin-top: var(--space-xs);
}

.library-loadmore[b-t0mzwkksl5] {
    display: flex;
    justify-content: center;
}

.asset-usages-header[b-t0mzwkksl5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--space-md);
}

.asset-usages-id[b-t0mzwkksl5] {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .library-grid[b-t0mzwkksl5] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (max-width: 640px) {
    .library-page[b-t0mzwkksl5] {
        padding: var(--space-sm);
    }

    .library-header[b-t0mzwkksl5] {
        flex-wrap: wrap;
    }
}
/* _content/Ayva.EmailTemplates/Pages/SendLogPage.razor.rz.scp.css */
/* Phase 9 — SendLogPage scoped styles. */

.sendlog-page[b-1ogpavhomg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
}

.sendlog-header[b-1ogpavhomg] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.sendlog-back[b-1ogpavhomg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease);
}

.sendlog-back:hover[b-1ogpavhomg] {
    background: var(--bg-hover));
}

.sendlog-title[b-1ogpavhomg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sendlog-title h1[b-1ogpavhomg] {
    margin: 0;
    font-family: var(--font-primary, system-ui);
    font-size: var(--font-size-xl, 1.5rem);
    color: var(--text-primary);
}

.sendlog-title p[b-1ogpavhomg] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm, 0.875rem);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.sendlog-filters[b-1ogpavhomg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
    align-items: center;
}

.sendlog-table[b-1ogpavhomg] {
    margin-top: var(--space-sm);
}

.sendlog-redacted[b-1ogpavhomg] {
    font-family: var(--font-mono, monospace);
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

.sendlog-provider-id[b-1ogpavhomg] {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-muted);
}

.sendlog-muted[b-1ogpavhomg] {
    color: var(--text-muted);
}

.sendlog-loading[b-1ogpavhomg],
.sendlog-empty[b-1ogpavhomg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    color: var(--text-muted);
}

.sendlog-empty h2[b-1ogpavhomg] {
    margin: 0;
    font-family: var(--font-primary, system-ui);
}

.sendlog-loadmore[b-1ogpavhomg] {
    display: flex;
    justify-content: center;
}

.sendlog-drawer-title[b-1ogpavhomg] {
    margin: 0;
    flex: 1;
    font-family: var(--font-primary, system-ui);
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--text-primary);
}

.sendlog-drawer-body[b-1ogpavhomg] {
    padding: var(--space-md);
    overflow-y: auto;
}

.sendlog-drawer-body dl[b-1ogpavhomg] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-xs) var(--space-md);
    margin: 0 0 var(--space-md);
}

.sendlog-drawer-body dt[b-1ogpavhomg] {
    font-weight: 600;
    color: var(--text-muted);
    font-size: var(--font-size-sm, 0.875rem);
}

.sendlog-drawer-body dd[b-1ogpavhomg] {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-sm, 0.875rem);
    word-break: break-word;
}

.sendlog-error[b-1ogpavhomg] {
    color: var(--error-text);
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    white-space: pre-wrap;
}

@media (max-width: 768px) {
    .sendlog-filters[b-1ogpavhomg] {
        grid-template-columns: 1fr;
    }
}
/* _content/Ayva.EmailTemplates/Pages/SettingsPage.razor.rz.scp.css */
/* Phase 9 — SettingsPage scoped styles. */

.settings-page[b-ajsujf24mt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
}

.settings-header[b-ajsujf24mt] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.settings-back[b-ajsujf24mt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease);
}

.settings-back:hover[b-ajsujf24mt] {
    background: var(--bg-hover));
}

.settings-title h1[b-ajsujf24mt] {
    margin: 0;
    font-family: var(--font-primary, system-ui);
    font-size: var(--font-size-xl, 1.5rem);
    color: var(--text-primary);
}

.settings-title p[b-ajsujf24mt] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm, 0.875rem);
}

.settings-section[b-ajsujf24mt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-card));
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.settings-section h2[b-ajsujf24mt] {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-primary, system-ui);
    font-size: var(--font-size-base, 1rem);
    color: var(--text-primary);
}

.settings-loading[b-ajsujf24mt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    color: var(--text-muted);
}
/* _content/Ayva.EmailTemplates/Pages/TemplateDesignerPage.razor.rz.scp.css */
.designer-shell[b-sufgvlc0el] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    background: var(--bg-base);
    color: var(--text-primary);
}

.designer-toolbar[b-sufgvlc0el] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--glass-elevated);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.designer-back[b-sufgvlc0el] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease);
}

.designer-back:hover[b-sufgvlc0el] {
    background: var(--bg-card);
}

.designer-title[b-sufgvlc0el] {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    flex: 1;
    min-width: 0;
}

.designer-title code[b-sufgvlc0el] {
    color: var(--accent-color);
    background: var(--bg-card);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.designer-subject[b-sufgvlc0el] {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.designer-toolbar-status[b-sufgvlc0el] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.designer-toolbar-actions[b-sufgvlc0el] {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.designer-body[b-sufgvlc0el] {
    display: grid;
    grid-template-columns: 320px 1fr;
    overflow: hidden;
    min-height: 0;
}

.designer-inspector[b-sufgvlc0el] {
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: var(--space-lg);
}

.designer-surface-host[b-sufgvlc0el] {
    background: var(--bg-base);
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.designer-validation[b-sufgvlc0el] {
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
    background: var(--glass-elevated);
}

.designer-ai-rail[b-sufgvlc0el] {
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
}

/* Phase 6 — pulse-highlight CSS for AI-changed blocks. The AiRail
   component sets the .pulse-highlight class on a CanvasBlock for 1.5s
   when the agent's BlockChanged event fires, drawing the user's eye to
   what the AI just modified. ::deep so the rule reaches into the
   nested CanvasBlock components. */
@keyframes pulse-highlight-b-sufgvlc0el {
    0% {
        box-shadow: 0 0 0 2px var(--accent-color);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

[b-sufgvlc0el] .pulse-highlight {
    animation: pulse-highlight-b-sufgvlc0el 1.5s ease-out;
}

.designer-loading[b-sufgvlc0el],
.designer-error[b-sufgvlc0el] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: var(--space-md);
    padding: var(--space-2xl);
    color: var(--text-secondary);
}

[b-sufgvlc0el] .designer-inspector-header {
    margin-bottom: var(--space-md);
}

[b-sufgvlc0el] .designer-inspector-header h3 {
    margin: 0 0 var(--space-2xs);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

[b-sufgvlc0el] .designer-inspector-id,
[b-sufgvlc0el] .designer-inspector-hint {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

[b-sufgvlc0el] .designer-inspector-id {
    font-family: var(--font-mono, ui-monospace, monospace);
}

@media (max-width: 1024px) {
    .designer-body[b-sufgvlc0el] {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 768px) {
    .designer-body[b-sufgvlc0el] {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .designer-inspector[b-sufgvlc0el] {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 240px;
    }
}
/* _content/Ayva.EmailTemplates/Pages/TemplateVersionsPage.razor.rz.scp.css */
.versions-page[b-vahgor40x7] {
    padding: var(--space-2xl);
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.versions-header[b-vahgor40x7] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--glass-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
}

.versions-back[b-vahgor40x7] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease);
}

.versions-back:hover[b-vahgor40x7] {
    background: var(--bg-card);
}

.versions-title[b-vahgor40x7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.versions-title h1[b-vahgor40x7] {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.versions-title code[b-vahgor40x7] {
    color: var(--accent-color);
    background: var(--bg-card);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    align-self: flex-start;
}

.versions-loading[b-vahgor40x7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-3xl);
    color: var(--text-secondary);
}

.versions-timeline[b-vahgor40x7] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.versions-row[b-vahgor40x7] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-md);
    align-items: start;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    transition: all var(--transition-fast, 150ms ease);
}

.versions-row:hover[b-vahgor40x7] {
    border-color: var(--accent-color);
}

.versions-row-deprecated[b-vahgor40x7] {
    opacity: 0.65;
}

.versions-row-marker[b-vahgor40x7] {
    flex-shrink: 0;
}

.versions-row-body[b-vahgor40x7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.versions-row-meta[b-vahgor40x7] {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.875rem;
    align-items: center;
}

.versions-row-status[b-vahgor40x7] {
    color: var(--text-primary);
    font-weight: 500;
    text-transform: capitalize;
}

.versions-row-author[b-vahgor40x7] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
}

.versions-row-labels[b-vahgor40x7] {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.versions-row-actions[b-vahgor40x7] {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .versions-row[b-vahgor40x7] {
        grid-template-columns: 1fr;
    }

    .versions-row-actions[b-vahgor40x7] {
        justify-content: flex-start;
    }
}
/* _content/Ayva.EmailTemplates/Pages/ThemesPage.razor.rz.scp.css */
/* Phase 9 — ThemesPage scoped styles. */

.themes-page[b-wsyee18imm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
}

.themes-header[b-wsyee18imm] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.themes-back[b-wsyee18imm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease);
}

.themes-back:hover[b-wsyee18imm] {
    background: var(--bg-hover));
}

.themes-title[b-wsyee18imm] {
    flex: 1;
}

.themes-title h1[b-wsyee18imm] {
    margin: 0;
    font-family: var(--font-primary, system-ui);
    font-size: var(--font-size-xl, 1.5rem);
    color: var(--text-primary);
}

.themes-title p[b-wsyee18imm] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm, 0.875rem);
}

.themes-loading[b-wsyee18imm],
.themes-empty[b-wsyee18imm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    color: var(--text-muted);
}

.themes-empty h2[b-wsyee18imm] {
    margin: 0;
    font-family: var(--font-primary, system-ui);
}

.themes-grid[b-wsyee18imm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-md);
}

.themes-card[b-wsyee18imm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-card));
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.themes-card-header[b-wsyee18imm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.themes-card-header h3[b-wsyee18imm] {
    margin: 0;
    font-family: var(--font-primary, system-ui);
    font-size: var(--font-size-base, 1rem);
    color: var(--text-primary);
}

.themes-card-swatches[b-wsyee18imm] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.themes-swatch[b-wsyee18imm] {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
}

.themes-card-actions[b-wsyee18imm] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
}
/* _content/Ayva.EmailTemplates/Widgets/EmailSendActivityWidget.razor.rz.scp.css */
.email-activity-widget[b-awzbxxtimn] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    height: 100%;
}

/* ── Loading state ─────────────────────────────────────────────── */
.widget-loading[b-awzbxxtimn] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.widget-spinner[b-awzbxxtimn] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--surface-glass);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin-b-awzbxxtimn 0.75s linear infinite;
}

@keyframes spin-b-awzbxxtimn {
    to { transform: rotate(360deg); }
}

.widget-loading-text[b-awzbxxtimn] {
    color: var(--text-secondary);
}

/* ── Error state ───────────────────────────────────────────────── */
.widget-error[b-awzbxxtimn] {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--error-color);
    font-size: 0.875rem;
}

.widget-error-icon[b-awzbxxtimn] {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.widget-error-text[b-awzbxxtimn] {
    color: var(--error-color);
}

/* ── Primary stat ──────────────────────────────────────────────── */
.widget-primary-stat[b-awzbxxtimn] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
}

.stat-value[b-awzbxxtimn] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-label[b-awzbxxtimn] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Sub-stats row ─────────────────────────────────────────────── */
.widget-sub-stats[b-awzbxxtimn] {
    display: flex;
    gap: var(--spacing-sm);
    flex: 1;
}

.sub-stat[b-awzbxxtimn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    background: var(--surface-glass);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    gap: 0.125rem;
    transition: var(--transition-base);
}

.sub-stat-icon[b-awzbxxtimn] {
    font-size: 1.125rem;
}

.sub-stat-value[b-awzbxxtimn] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.sub-stat-label[b-awzbxxtimn] {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

/* Neutral (zero) */
.sub-stat--neutral .sub-stat-icon[b-awzbxxtimn],
.sub-stat--neutral .sub-stat-value[b-awzbxxtimn] {
    color: var(--text-secondary);
}

/* Success */
.sub-stat--success .sub-stat-icon[b-awzbxxtimn],
.sub-stat--success .sub-stat-value[b-awzbxxtimn] {
    color: var(--success-color);
}

/* Warning */
.sub-stat--warning[b-awzbxxtimn] {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning-color) 30%, transparent);
}

.sub-stat--warning .sub-stat-icon[b-awzbxxtimn],
.sub-stat--warning .sub-stat-value[b-awzbxxtimn] {
    color: var(--warning-color);
}

/* Error */
.sub-stat--error[b-awzbxxtimn] {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--error-color) 30%, transparent);
}

.sub-stat--error .sub-stat-icon[b-awzbxxtimn],
.sub-stat--error .sub-stat-value[b-awzbxxtimn] {
    color: var(--error-color);
}

/* ── Footer ────────────────────────────────────────────────────── */
.widget-footer[b-awzbxxtimn] {
    padding-top: var(--spacing-sm);
    border-top: 1px solid color-mix(in srgb, var(--text-secondary) 15%, transparent);
}

.bounce-rate[b-awzbxxtimn] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.bounce-rate--warning[b-awzbxxtimn] {
    color: var(--warning-color);
    font-weight: 600;
}