:root {
    --navy: #0f172a;
    --sidebar: #111c32;
    --navy-2: #1e293b;
    --accent: #2563eb;
    --green: #10b981;
    --green-dark: #059669;
    --warning: #f59e0b;
    --danger: #ef4444;
    --bg: #f5f7fb;
    --card: #ffffff;
    --line: #e2e8f0;
    --text: #1e293b;
    --muted: #64748b;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .05);
    --font: Inter, "Segoe UI", system-ui, sans-serif;
    --fs-2xs: .75rem;
    --fs-xs: .8125rem;
    --fs-sm: .875rem;
    --fs-md: .9375rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.5rem;
    --step-1: .25rem;
    --step-2: .5rem;
    --step-3: .75rem;
    --step-4: 1rem;
    --step-5: 1.5rem;
    --leading: 1.5;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: var(--leading);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--navy-2); }
.app-shell { min-height: 100dvh; display: flex; align-items: stretch; }
.em-sidebar {
    --side-bg: #101b31;
    --side-hover: rgba(255,255,255,.07);
    --side-active: #26354f;
    --side-text: #cbd5e1;
    --side-muted: #94a3b8;
    --side-line: rgba(255,255,255,.08);
    background: var(--side-bg);
    color: var(--side-text);
    width: 248px;
    flex: 0 0 248px;
    height: 100dvh;
    min-height: 100dvh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
    z-index: 1052;
    pointer-events: auto;
    transition: width 200ms ease, flex-basis 200ms ease;
}
.em-side-head, .em-side-foot { flex-shrink: 0; }
.em-side-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 10px 8px;
}
.em-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    color: #f8fafc;
    text-decoration: none;
}
.brand-mark {
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center;
    background: #10b981; color: #052e1c; font-weight: 700; flex: 0 0 auto;
}
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { font-size: 14px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.brand-copy small { color: var(--side-muted); font-size: 10px; line-height: 1.3; white-space: nowrap; }
.em-collapse, .em-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
    border: 1px solid var(--side-line); background: transparent; color: var(--side-muted);
}
.em-menu {
    width: 40px; height: 40px; border-color: var(--line); color: var(--navy);
    background: #fff;
}
.em-collapse svg, .em-menu svg, .nav-chevron, .em-user-chevron {
    width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.em-collapse svg { transition: transform 200ms ease; }
.em-side-nav {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 10px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.3) transparent;
}
.em-side-nav::-webkit-scrollbar { width: 4px; }
.em-side-nav::-webkit-scrollbar-track { background: transparent; }
.em-side-nav::-webkit-scrollbar-thumb { background: rgba(148,163,184,.3); border-radius: 99px; }
.em-side-nav:hover::-webkit-scrollbar-thumb { background: rgba(148,163,184,.55); }
.em-sidebar a.nav-link {
    display: flex; align-items: center; gap: 11px;
    min-height: 36px;
    color: #cbd5e1;
    border-radius: 8px;
    margin: 0;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
}
.nav-group { margin-top: 12px; }
.nav-section {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; min-height: 28px; margin: 0; padding: 4px 8px;
    border: 0; background: transparent; color: #94a3b8;
    font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer;
}
.nav-group.is-current > .nav-section { color: #f8fafc; }
.nav-group.is-current > .nav-section span { display: inline-block; box-shadow: inset 3px 0 0 #10b981; padding-left: 8px; }
.em-tip {
    position: fixed; z-index: 1060; transform: translateY(-50%);
    background: #0f172a; color: #f8fafc; border-radius: 6px; padding: 4px 8px;
    font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap;
    pointer-events: none;
}
.em-tip[hidden] { display: none; }
.nav-group.is-open .nav-chevron { transform: rotate(180deg); }
.nav-chevron { transition: transform 200ms ease; }
.nav-children { display: none; gap: 2px; margin-top: 2px; }
.nav-group.is-open .nav-children { display: grid; }
.em-sidebar svg { pointer-events: none; }
.nav-icon { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; color: #94a3b8; }
.em-sidebar a.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.em-sidebar a.nav-link.active {
    background: #26354f;
    color: #fff;
    box-shadow: inset 3px 0 0 #10b981;
}
.em-sidebar a.nav-link.active .nav-icon { color: #10b981; }
.em-sidebar a:focus-visible, .em-sidebar button:focus-visible, .em-menu:focus-visible {
    outline: 2px solid #10b981; outline-offset: -2px;
}
.brand-copy { overflow: hidden; }
.app-main { min-width: 0; }
.topbar {
    background: white;
    border-bottom: 1px solid var(--line);
    padding: .8rem 1.2rem;
}
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--card);
}
.stat-card h2 { font-size: 1.7rem; margin: 0; }
.stat-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.btn-green { background: var(--green); border-color: var(--green); color: white; }
.btn-green:hover { background: var(--green-dark); color: white; }
.btn-navy { background: var(--navy); border-color: var(--navy); color: white; }
.btn-navy:hover { background: var(--navy-2); color: white; }
.table thead th { color: var(--muted); font-weight: 600; font-size: .82rem; white-space: nowrap; }
.note-smtp { background: #eef6f1; border: 1px solid #cfe5d8; border-radius: .8rem; padding: .8rem 1rem; }
.smtp-result { border-radius: .8rem; border-width: 1px; }
.smtp-result.alert-danger { background: #fdecec; border-color: #e7b4b4; color: #7a1f1f; }
.smtp-result.alert-success { background: #eef6f1; border-color: #b7dcc6; color: #145c32; }
.smtp-result ul { padding-left: 1.1rem; }
.empty-state { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.preview-frame { background: white; border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; }
.preview-frame.mobile { width: 375px; max-width: 100%; }
.preview-frame iframe { width: 100%; height: 460px; border: 0; background: white; }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(160deg, var(--navy), #1d4e38); }
.auth-card { width: min(440px, 100%); }
.editor-toolbar .btn { margin-right: .25rem; margin-bottom: .25rem; }
.form-text { color: var(--muted); }
.em-side-foot { padding: 8px 10px 12px; border-top: 1px solid rgba(255,255,255,.08); }
.em-worker {
    display: flex; align-items: center; gap: 11px;
    min-height: 40px; padding: 6px 8px; border-radius: 8px;
    color: #cbd5e1; text-decoration: none; position: relative;
}
.em-worker:hover { background: rgba(255,255,255,.07); color: #fff; }
.em-worker-copy { min-width: 0; }
.em-worker-copy strong { display: block; color: #f8fafc; font-size: 12px; font-weight: 500; line-height: 1.3; }
.em-worker-copy small { display: block; color: #94a3b8; font-size: 11px; line-height: 1.3; }
.status-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #94a3b8; display: inline-block; flex: 0 0 auto; }
#side-worker[data-worker-key="running"] .status-dot { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
#side-worker[data-worker-key="idle"] .status-dot { background: #2563eb; }
#side-worker[data-worker-key="stopped"] .status-dot { background: #ef4444; }
#side-worker[data-worker-key="warning"] .status-dot { background: #f59e0b; }
#side-worker[data-worker-key="unknown"] .status-dot { background: #94a3b8; }
.em-user { position: relative; margin-top: 4px; }
.em-user-btn {
    display: flex; align-items: center; gap: 11px; width: 100%;
    min-height: 40px; padding: 6px 8px; border: 0; border-radius: 8px;
    background: transparent; color: inherit; text-align: left;
}
.em-user-btn:hover { background: rgba(255,255,255,.07); }
.em-avatar {
    width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
    background: #26354f; color: #f8fafc; font-size: 11px; font-weight: 600; flex: 0 0 auto;
}
.em-user-copy { min-width: 0; flex: 1; }
.em-user-copy strong, .em-user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-user-copy strong { color: #f8fafc; font-size: 13px; font-weight: 500; line-height: 1.3; }
.em-user-copy small { color: #94a3b8; font-size: 11px; line-height: 1.3; }
.em-user-menu {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 40;
    background: #1c2a43; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
    padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.28);
}
.em-user-menu a, .em-user-menu button {
    display: flex; align-items: center; width: 100%; min-height: 36px;
    padding: 0 10px; border: 0; border-radius: 6px; background: transparent;
    color: #cbd5e1; font-size: 13px; font-weight: 500; text-align: left; text-decoration: none;
}
.em-user-menu a:hover, .em-user-menu button:hover { background: rgba(255,255,255,.07); color: #fff; }
.em-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(15,23,42,.48); }
.em-backdrop[hidden] { display: none; }
@media (min-width: 768px) {
    html.em-side-collapsed .em-sidebar { width: 68px; flex-basis: 68px; }
    html.em-side-collapsed .brand-copy,
    html.em-side-collapsed .nav-label,
    html.em-side-collapsed .nav-section,
    html.em-side-collapsed .em-worker-copy,
    html.em-side-collapsed .em-user-copy,
    html.em-side-collapsed .em-user-chevron { display: none; }
    html.em-side-collapsed .em-side-head { flex-direction: column; justify-content: center; padding-left: 0; padding-right: 0; }
    html.em-side-collapsed .em-brand { flex: 0 0 auto; }
    html.em-side-collapsed .em-collapse svg { transform: rotate(180deg); }
    html.em-side-collapsed .nav-group { margin-top: 6px; }
    html.em-side-collapsed .nav-children,
    html.em-side-collapsed .nav-group:not(.is-open) .nav-children { display: grid; }
    html.em-side-collapsed .em-sidebar a.nav-link,
    html.em-side-collapsed .em-worker,
    html.em-side-collapsed .em-user-btn { justify-content: center; padding-left: 0; padding-right: 0; }
    html.em-side-collapsed .em-user-menu { left: calc(100% + 8px); right: auto; width: 200px; bottom: 0; }
    .em-menu { display: none; }
}
@media (max-width: 767.98px) {
    .em-sidebar {
        position: fixed; z-index: 1052; width: min(280px, calc(100vw - 40px));
        max-width: 280px; flex: none; transform: translateX(-105%);
        transition: transform 200ms ease;
    }
    .app-shell.is-drawer .em-sidebar { transform: none; }
    .em-collapse { display: none; }
    .em-sidebar a.nav-link, .em-user-btn, .em-worker { min-height: 40px; }
    body.em-drawer-lock { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .em-sidebar, .em-collapse svg, .nav-chevron { transition: none; }
}
main:has([data-dashboard]) { padding-top: .85rem !important; }
.dash-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .65rem; }
.dash-header h1 { font-size: var(--fs-xl); margin: 0; letter-spacing: -.02em; line-height: 1.25; }
.eyebrow { margin: 0 0 var(--step-1); color: var(--accent); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dash-sub, .card-note { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 0; line-height: 1.5; }
.dash-sub { max-width: 62rem; }
.dash-header-side { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.header-meta { color: var(--muted); font-size: .82rem; display: flex; gap: .8rem; }
.system-pill, .worker-badge { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .28rem .7rem; font-size: .78rem; font-weight: 700; background: #e2e8f0; color: #334155; }
.system-pill[data-system="Operational"] { background: #d1fae5; color: #065f46; }
.system-pill[data-system="Degraded"] { background: #fef3c7; color: #92400e; }
.system-pill[data-system="Offline"] { background: #fee2e2; color: #991b1b; }
.system-pill[data-system="Operational"] .status-dot { background: var(--green); }
.system-pill[data-system="Degraded"] .status-dot { background: var(--warning); }
.system-pill[data-system="Offline"] .status-dot { background: var(--danger); }
.poll-state { font-size: .75rem; color: var(--muted); }
.poll-state.is-down { color: var(--danger); }
.dash-filters { display: flex; flex-wrap: wrap; gap: .45rem; align-items: end; margin-bottom: .65rem; }
.dash-filters label { display: grid; gap: .25rem; font-size: .75rem; color: var(--muted); }
.dash-filters select, .dash-filters input { border: 1px solid var(--line); border-radius: .6rem; padding: .4rem .55rem; background: white; color: var(--text); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
a.kpi-card { color: inherit; text-decoration: none; }
.ctc-kpis a.kpi-card { cursor: pointer; }
.ctc-kpis a.kpi-card:hover { border-color: var(--tone); }
.ctc-kpis a.kpi-card.is-on,
.ctc-kpis a.kpi-card:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.kpi-card {
    --tone: #2563eb;
    --wash: #eff6ff;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .65rem;
    align-items: center;
    min-width: 0;
    background: var(--wash);
    border: 1px solid color-mix(in srgb, var(--tone) 24%, white);
    border-radius: 12px;
    box-shadow: none;
    padding: .8rem .9rem .75rem;
}
.kpi-card p { margin: 0; color: #334155; font-size: .8125rem; font-weight: 600; line-height: 1.2; }
.kpi-card h2 { margin: 0; color: var(--tone); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-card ul {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .05rem .4rem;
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
    color: #475569;
    font-size: .8125rem;
    line-height: 1.4;
}
.kpi-card li + li { margin-top: 0; }
.kpi-card li span { color: #1e293b; font-weight: 700; }
.kpi-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    border-radius: .6rem;
    background: #fff;
    color: var(--tone);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, white);
}
.kpi-icon .nav-icon { width: 1.05rem; height: 1.05rem; }
.kpi-card.tone-sky { --tone: #0284c7; --wash: #e0f2fe; }
.kpi-card.tone-violet { --tone: #7c3aed; --wash: #ede9fe; }
.kpi-card.tone-indigo { --tone: #4f46e5; --wash: #e0e7ff; }
.kpi-card.tone-emerald { --tone: #059669; --wash: #d1fae5; }
.kpi-card.tone-cyan { --tone: #0891b2; --wash: #cffafe; }
.kpi-card.tone-amber { --tone: #d97706; --wash: #fef3c7; }
.kpi-card.tone-teal { --tone: #0f766e; --wash: #ccfbf1; }
.kpi-card.tone-rose { --tone: #e11d48; --wash: #ffe4e6; }
.pulse { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; background: var(--green); box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: pulse 1.6s infinite; }
.pulse.is-off { background: #cbd5e1; animation: none; box-shadow: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.monitor-card { padding: 1rem 1.05rem 1.1rem; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.card-head h2 { font-size: 1rem; margin: 0; }
.monitor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem; margin: .8rem 0 0; }
.monitor-grid dt { color: var(--muted); font-size: .75rem; }
.monitor-grid dd { margin: 0; font-weight: 650; word-break: break-word; }
.monitor-grid dd small { display: block; margin-top: .15rem; color: var(--muted); font-size: .75rem; font-weight: 600; }
.worker-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .85rem; }
.worker-facts div { min-width: 0; padding: .5rem .65rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.worker-facts span { display: block; color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.worker-facts strong { display: block; margin-top: .15rem; color: #0f172a; font-size: 1.05rem; font-weight: 700; }
.worker-focus { display: grid; gap: .12rem; margin: .7rem 0 0; padding: .65rem .75rem; border-radius: 12px; background: #f8fafc; }
.worker-focus > span { color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.worker-focus strong { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: baseline; font-size: .95rem; }
.worker-focus a { font-size: .78rem; font-weight: 700; }
.worker-focus small { color: #475569; }
.worker-session { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.worker-badge.tone-running { background: #d1fae5; color: #065f46; }
.worker-badge.tone-idle { background: #dbeafe; color: #1e40af; }
.worker-badge.tone-error, .worker-badge.tone-stopped { background: #fee2e2; color: #991b1b; }
.worker-badge.tone-unknown { background: #e2e8f0; color: #475569; }
.worker-error { color: var(--muted); font-size: .8rem; margin: .7rem 0 0; }
#worker .worker-error:not(:empty) { padding: .65rem .75rem; border-radius: 12px; background: #fffbeb; color: #92400e; }
.alert-stack { display: grid; gap: .4rem; margin-bottom: .65rem; }
.system-alert { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; border-radius: 12px; padding: .4rem .7rem; border: 1px solid var(--line); background: white; }
.system-alert p { margin: 0; }
.system-alert small { color: var(--muted); }
.severity-critical { border-color: #fecaca; background: #fff5f5; }
.severity-warning { border-color: #fde68a; background: #fffbeb; }
.empty-inline { color: var(--muted); font-size: .86rem; }
.live-card { padding: 1rem; }
.live-item + .live-item { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.live-top { display: flex; justify-content: space-between; gap: .8rem; align-items: center; }
.live-top h3 { margin: 0; font-size: 1.05rem; }
.live-top h3 a { color: inherit; text-decoration: none; }
.live-top h3 a:hover { text-decoration: underline; }
.live-top p, .live-item dl { color: var(--muted); font-size: .82rem; }
.live-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; margin-top: .7rem; }
.live-meter .progress { margin-top: 0; }
.live-meter b { color: #0f172a; font-size: .95rem; font-variant-numeric: tabular-nums; }
.live-item dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem .8rem; margin: .7rem 0 0; }
.command .live-card .live-item dl { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.command .live-card .live-item dl div { min-width: 0; padding: .55rem .7rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.command .live-card .live-item dt { font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.live-item dd { margin: 0; color: var(--text); font-weight: 650; }
.progress { height: .55rem; background: #e8eef6; border-radius: 999px; overflow: hidden; margin-top: .7rem; }
.progress > span, .mini-progress > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.mini-progress { display: inline-block; width: 4.5rem; height: .4rem; background: #e8eef6; border-radius: 999px; vertical-align: middle; overflow: hidden; }
.dash-campaigns th, .dash-campaigns td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-campaigns td:nth-child(1), .dash-campaigns td:nth-child(2) { white-space: normal; min-width: 10rem; }
.dash-campaigns td:nth-child(1) a { font-weight: 700; }
.dash-campaigns .progress-cell small { display: block; margin-top: .15rem; color: var(--muted); font-size: .75rem; font-weight: 600; }
.chart-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin: .75rem 0 .55rem; }
.chart-facts div { min-width: 0; padding: .45rem .6rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.chart-facts span { display: block; color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.chart-facts strong { display: block; margin-top: .12rem; color: #0f172a; font-size: 1rem; }
.bar-chart { display: flex; align-items: end; gap: .55rem; min-height: 180px; overflow-x: auto; padding-top: .4rem; }
.bar-col { flex: 1 1 0; min-width: 2.4rem; text-align: center; }
.bar-col b { display: block; margin-bottom: .2rem; color: #0f172a; font-size: .72rem; font-weight: 700; }
.bar-stack { height: 140px; display: flex; flex-direction: column; justify-content: end; }
.bar-stack i { display: block; width: 100%; min-height: 0; }
.bar-stack .accepted { background: #10b981; }
.bar-stack .failed { background: #ef4444; }
.bar-stack .unknown { background: #f59e0b; }
.bar-col small { color: var(--muted); font-size: .65rem; }
.chart-legend { color: var(--muted); font-size: .78rem; display: flex; gap: .7rem; align-items: center; }
.swatch { width: .65rem; height: .65rem; border-radius: .2rem; display: inline-block; }
.swatch.accepted { background: #10b981; } .swatch.failed { background: #ef4444; } .swatch.unknown { background: #f59e0b; }
.donut-wrap { display: flex; gap: 1rem; align-items: center; }
.donut { width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center; align-content: center; position: relative; flex: 0 0 auto; }
.donut::after { content: ""; position: absolute; width: 92px; height: 92px; border-radius: 50%; background: white; }
.donut strong, .donut span { position: relative; z-index: 1; }
.donut strong { font-size: 1.15rem; } .donut span { display: block; color: var(--muted); font-size: .72rem; text-align: center; }
.donut-wrap ul { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; font-size: .82rem; display: grid; align-content: center; gap: .4rem; }
.donut-wrap li { display: grid; grid-template-columns: .55rem minmax(0, 1fr) auto auto; gap: .15rem .45rem; align-items: center; margin: 0; }
.donut-wrap li.is-zero { color: #94a3b8; }
.donut-wrap i { width: .55rem; height: .55rem; border-radius: 50%; }
.donut-wrap b { font-variant-numeric: tabular-nums; }
.donut-wrap em { min-width: 3.4rem; color: var(--muted); font-style: normal; text-align: right; }
.donut-wrap s { grid-column: 2 / -1; display: block; height: .35rem; overflow: hidden; border-radius: 99px; background: #e8eef6; text-decoration: none; }
.donut-wrap s u { display: block; height: 100%; border-radius: inherit; text-decoration: none; }
.command {
    --fs-title: var(--fs-xl);
    --fs-section: 1rem;
    --fs-kpi: var(--fs-xl);
    --fs-value: var(--fs-md);
    --fs-body: var(--fs-md);
    --fs-meta: var(--fs-xs);
    --fs-warn: var(--fs-sm);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    color: var(--text);
    font-size: var(--fs-body);
    line-height: 1.45;
}
.command > .mt-1, .command > .mt-3 { margin-top: 0 !important; }
.command .dash-header { margin: 0; align-items: flex-start; gap: 1rem; }
.command .dash-header h1 { font-size: var(--fs-title); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.command .eyebrow { margin: 0 0 .2rem; font-size: .75rem; }
.command .dash-sub { font-size: var(--fs-body); line-height: 1.45; }
.command .header-meta, .command .poll-state { font-size: var(--fs-meta); }
.command .dash-header-side { gap: .35rem; }
.command .system-pill, .command .worker-badge { font-size: .8125rem; font-weight: 700; }
.command .dash-filters { margin: 0; gap: .55rem; }
.command .dash-filters label { gap: .2rem; font-size: var(--fs-meta); font-weight: 600; }
.command .dash-filters select, .command .dash-filters input { padding: .4rem .6rem; font-size: var(--fs-body); }
.command .alert-stack { margin: 0; gap: .45rem; }
.command .system-alert { padding: .65rem .85rem; font-size: var(--fs-warn); line-height: 1.45; }
.command .system-alert strong { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.command .system-alert p { font-size: var(--fs-warn); }
.command .system-alert small, .command .empty-inline { font-size: var(--fs-meta); }
.command .severity-critical strong { color: #991b1b; }
.command .severity-warning strong { color: #92400e; }
.command .kpi-grid { gap: .7rem; }
.command .kpi-card { padding: .8rem .9rem .75rem; }
.command .kpi-card:has(.kpi-stretch) { position: relative; }
.command .kpi-card:has(.kpi-stretch):hover { border-color: var(--tone); }
.command .kpi-stretch {
    position: absolute; inset: 0; z-index: 1; border-radius: 12px;
}
.command .kpi-stretch:focus-visible,
.command .kpi-line:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.command .kpi-line {
    position: relative; z-index: 2; color: inherit; text-decoration: none;
}
.command .kpi-line:hover { text-decoration: underline; }
.command .kpi-card p { font-size: var(--fs-meta); font-weight: 600; }
.command .kpi-card h2 { font-size: var(--fs-kpi); font-weight: 700; }
.command .kpi-card ul { margin-top: .4rem; font-size: var(--fs-meta); line-height: 1.4; }
.command .kpi-icon { width: 2rem; height: 2rem; }
.command > .row {
    --bs-gutter-y: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: .9rem;
    margin: 0 !important;
    height: auto;
    overflow: visible;
}
.command > .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    height: auto;
    overflow: visible;
    padding: 0 !important;
}
.command .monitor-card, .command .live-card {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 1rem 1.1rem 1.05rem;
}
.command .card-head h2, .command .live-top h3 { font-size: var(--fs-section); font-weight: 700; }
.command .card-head a { font-size: var(--fs-meta); font-weight: 700; }
.command .card-note { margin: .25rem 0 0; font-size: var(--fs-meta); line-height: 1.45; white-space: normal; }
.command .monitor-grid { gap: .7rem .9rem; margin: .85rem 0 0; }
.command .monitor-grid dt, .command .live-item dt { color: var(--muted); font-size: var(--fs-meta); font-weight: 600; }
.command .monitor-grid dd, .command .live-item dd { margin: .1rem 0 0; font-size: var(--fs-value); font-weight: 700; text-align: left; white-space: normal; }
.command .worker-error { margin: .75rem 0 0; font-size: var(--fs-meta); line-height: 1.45; }
.worker-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.worker-actions form { margin: 0; }
.command .live-top p { margin: .15rem 0 0; font-size: var(--fs-meta); }
.command .live-item dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem .85rem; margin: .8rem 0 0; }
.command .live-top h3 { font-size: 1.05rem; }
.command .progress { height: .5rem; margin-top: .7rem; }
.command .chart-legend { font-size: var(--fs-meta); }
.command .bar-chart { min-height: 168px; }
.command .bar-stack { height: 132px; }
.command .bar-col small { font-size: .75rem; }
.command .donut { width: 148px; height: 148px; }
.command .donut::after { width: 92px; height: 92px; }
.command .donut strong { font-size: 1.2rem; }
.command .donut span, .command .donut-wrap ul { font-size: var(--fs-meta); }
.command .donut-wrap li { margin: .2rem 0; font-size: var(--fs-meta); }
.command .table { margin: .7rem 0 0; }
.command .table th, .command .table td { padding: .55rem .7rem; font-size: .875rem; line-height: 1.4; }
.command .table thead th { font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; }
.command .badge { font-size: .75rem; font-weight: 700; }
@media (max-width: 1199px) {
    .command > .row { grid-template-columns: 1fr; }
    .kpi-grid, .command .kpi-grid { grid-template-columns: 1fr 1fr; }
    .live-item dl, .command .live-item dl, .command .live-card .live-item dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .dash-header, .donut-wrap, .command .dash-header, .command .donut-wrap { flex-direction: column; align-items: stretch; }
    .dash-header-side, .command .dash-header-side { align-items: flex-start; }
    .kpi-grid, .monitor-grid, .command .kpi-grid, .command .monitor-grid, .worker-facts, .worker-session, .chart-facts { grid-template-columns: 1fr 1fr; }
    .command .live-card .live-item dl { grid-template-columns: 1fr 1fr; }
}
.smtp-accounts, #smtp-accounts { display: grid; gap: .65rem; margin-top: .85rem; }
.smtp-capacity { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .75rem; align-items: baseline; }
.smtp-capacity span { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.smtp-capacity b { justify-self: end; font-size: .95rem; }
.smtp-capacity i, .smtp-meter i { display: block; height: .5rem; overflow: hidden; background: #e8eef6; border-radius: 99px; }
.smtp-capacity i { grid-column: 1 / -1; height: .6rem; }
.smtp-capacity i em, .smtp-meter i em { display: block; height: 100%; width: 0; background: #2563eb; border-radius: 99px; }
.smtp-capacity.is-warm i em { background: #d97706; }
.smtp-capacity.is-full i em { background: #dc2626; }
.smtp-account { padding: .7rem .75rem .65rem; border: 1px solid #e6edf5; border-left: 4px solid #10b981; border-radius: 12px; background: #fff; }
.smtp-account.is-minute { border-left-color: #d97706; background: #fffbeb; }
.smtp-account.is-hour, .smtp-account.is-day { border-left-color: #dc2626; background: #fff5f5; }
.smtp-account.is-inactive, .smtp-account.is-incomplete { border-left-color: #94a3b8; background: #f8fafc; }
.smtp-account header { display: flex; align-items: flex-start; gap: .55rem; }
.smtp-account header > div { min-width: 0; flex: 1; }
.smtp-order { display: grid; place-items: center; flex: 0 0 auto; width: 1.45rem; height: 1.45rem; border-radius: 999px; background: #e2e8f0; color: #334155; font-size: .72rem; }
.smtp-account header strong { display: block; font-size: .92rem; line-height: 1.3; }
.smtp-host { display: block; margin-top: .1rem; overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.smtp-state { flex: 0 0 auto; padding: .18rem .5rem; border-radius: 999px; background: #d1fae5; color: #047857; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.smtp-account.is-minute .smtp-state { background: #fde68a; color: #92400e; }
.smtp-account.is-hour .smtp-state, .smtp-account.is-day .smtp-state { background: #fecaca; color: #991b1b; }
.smtp-account.is-inactive .smtp-state, .smtp-account.is-incomplete .smtp-state { background: #e2e8f0; color: #475569; }
.smtp-meters { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: .55rem; margin-top: .65rem; }
.smtp-meter span { display: block; color: #64748b; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.smtp-meter b { display: block; margin-top: .18rem; font-size: .78rem; }
.smtp-meter.is-main i { height: .65rem; }
.smtp-meter.is-hot i em, .smtp-meter.is-warm i em { background: #d97706; }
.smtp-meter.is-full i em { background: #dc2626; }
.smtp-foot { margin: .5rem 0 0; color: #475569; font-size: .75rem; }
.smtp-foot .is-bad { color: #b91c1c; }
.smtp-table td, .smtp-table th { vertical-align: top; }
.smtp-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.smtp-actions form { display: flex; gap: .4rem; align-items: center; margin: 0; }

.cdc { display: grid; gap: 1rem; min-width: 0; }
.cdc-card { min-width: 0; padding: 1rem 1.1rem; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
.cdc-card h2 { margin: 0 0 .75rem; font-size: 1rem; }
.cdc-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; align-items: start; }
.cdc-head-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1rem; align-items: flex-start; }
.cdc-identity { min-width: min(100%, 16rem); flex: 1 1 18rem; }
.cdc-kicker { margin: 0; color: #64748b; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cdc-title { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.cdc-title h1 { margin: .15rem 0 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.cdc-meta, .cdc-progress { display: grid; gap: .75rem 1rem; margin: 0; }
.cdc-meta { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cdc-meta .is-wide { grid-column: span 2; }
.cdc-progress { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: .9rem; }
.cdc-meta div, .cdc-progress div { min-width: 0; }
.cdc-meta dt, .cdc-progress dt { color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.cdc-meta dd, .cdc-progress dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
.cdc-actions { display: flex; flex: 1 1 32rem; flex-wrap: wrap; gap: .45rem; align-items: center; justify-content: flex-end; }
.cdc-actions form { margin: 0; }
.cdc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.cdc-kpi span { color: #64748b; font-size: .75rem; font-weight: 700; }
.cdc-kpi strong { display: block; margin-top: .3rem; color: #0f172a; font-size: 1.45rem; line-height: 1.1; }
.cdc-kpi small { display: block; margin-top: .35rem; color: #64748b; font-size: .75rem; }
.cdc-kpi.is-ok strong { color: #047857; }
.cdc-kpi.is-run strong { color: #1d4ed8; }
.cdc-kpi.is-bad strong { color: #b91c1c; }
.cdc-kpi.is-warn strong { color: #b45309; }
.cdc-section-head { display: flex; gap: .75rem; align-items: center; justify-content: space-between; }
.cdc-section-head h2 { margin: 0; }
.cdc-bar { height: .7rem; overflow: hidden; border-radius: 99px; background: #e8eef6; }
.cdc-bar span { display: block; height: 100%; background: #2563eb; border-radius: 99px; }
.cdc-note, .cdc-warn { margin: .75rem 0 0; color: #475569; font-size: .82rem; }
.cdc-warn { padding: .65rem .75rem; border-radius: 12px; background: #fffbeb; color: #92400e; }
.cdc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cdc-chart { height: 260px; }
.cdc-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.cdc-filter .form-control, .cdc-filter .form-select { width: auto; min-width: 9rem; max-width: 100%; }
.cdc-table-wrap { overflow-x: auto; }
.cdc-table { min-width: 860px; margin: 0; }
.cdc-table td, .cdc-table th { white-space: nowrap; }
.cdc-table tr.is-changed td { background: #ecfdf5; }
.cdc-pager { margin-top: .7rem; }
.cdc-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cdc-timeline li {
    display: grid;
    grid-template-columns: max-content minmax(0, 1.15fr) minmax(14rem, 1fr);
    gap: .35rem 1.5rem;
    align-items: center;
    margin: 0;
    padding: .55rem 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
}
.cdc-timeline time { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdc-timeline strong { min-width: 0; font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdc-timeline span { min-width: 0; justify-self: end; overflow: hidden; color: var(--muted); font-size: var(--fs-xs); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.cdc-upload { display: grid; gap: .6rem; margin-top: .8rem; }
.cdc-check { display: flex; gap: .45rem; align-items: flex-start; font-size: .85rem; }
.cdc-sync { color: #64748b; font-size: .78rem; }
.cdc-sync.is-down { color: #b91c1c; font-weight: 700; }
.cdc-pill { padding: .2rem .55rem; border-radius: 999px; background: #e2e8f0; color: #0f172a; font-size: .72rem; font-weight: 700; }
@media (max-width: 1100px) {
    .cdc-kpis, .cdc-split { grid-template-columns: 1fr 1fr; }
    .cdc-meta, .cdc-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cdc-meta .is-wide { grid-column: span 1; }
    .cdc-actions { justify-content: flex-start; }
}
@media (max-width: 700px) {
    .cdc-kpis, .cdc-split, .cdc-meta, .cdc-progress { grid-template-columns: 1fr; }
    .cdc-meta .is-wide { grid-column: auto; }
    .cdc-filter .form-control, .cdc-filter .form-select, .cdc-upload .form-control { width: 100%; }
    .cdc-timeline li { grid-template-columns: 1fr; gap: var(--step-1); }
    .cdc-timeline time, .cdc-timeline strong, .cdc-timeline span { white-space: normal; justify-self: start; text-align: left; }
}

.live-activity { padding: 1rem 1.1rem 1.1rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
.live-head, .live-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.live-head { justify-content: space-between; }
.live-head h2 { margin: 0; font-size: 1.05rem; }
.live-head p, .live-note { margin: .25rem 0 0; color: #64748b; font-size: .82rem; }
.live-state { display: inline-flex; gap: .4rem; align-items: center; color: #64748b; font-size: .78rem; font-weight: 700; }
.live-state i { width: .55rem; height: .55rem; border-radius: 99px; background: #94a3b8; }
.live-state[data-state="live"] { color: #16a34a; }
.live-state[data-state="live"] i { background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, .7); animation: live-pulse 1.6s infinite; }
.live-state[data-state="down"] { color: #dc2626; }
.live-state[data-state="down"] i { background: #dc2626; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
.live-updated { color: #64748b; font-size: .75rem; font-variant-numeric: tabular-nums; }
.live-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: .9rem; }
.live-kpis article { min-width: 0; padding: .7rem .8rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.live-kpis span, .live-kpis small { display: block; color: #64748b; font-size: .72rem; }
.live-kpis strong { display: block; margin: .2rem 0; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.live-kpis .is-ok strong { color: #16a34a; }
.live-kpis .is-run strong { color: #2563eb; }
.live-kpis .is-bad strong { color: #dc2626; }
.live-kpis .is-navy strong { color: #0f172a; }
.live-filters { margin-top: .8rem; }
.live-filters summary { cursor: pointer; color: #334155; font-size: .8rem; font-weight: 700; }
.live-filters form { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; }
.live-filters .form-control, .live-filters .form-select { width: auto; min-width: 9rem; max-width: 100%; }
.live-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.live-table th { padding: .55rem .6rem; border-bottom: 1px solid #e2e8f0; color: #64748b; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.live-table td { padding: .55rem .6rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.live-table tr:hover td { background: #f8fafc; }
.live-table tr.is-new td { animation: live-new 2s ease; }
@keyframes live-new { from { background: #eff6ff; } to { background: transparent; } }
.live-time b { display: block; font-variant-numeric: tabular-nums; }
.live-time small, .live-smtp { color: #64748b; }
.live-recipient, .live-campaign { display: flex; gap: .35rem; align-items: center; max-width: 16rem; }
.live-recipient a, .live-campaign { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-recipient svg, .live-badge svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.live-badge { display: inline-flex; gap: .3rem; align-items: center; padding: .18rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.live-badge.is-ok, .live-event.is-ok { color: #16a34a; }
.live-event.is-ok { background: #f0fdf4; }
.live-badge.is-ok { background: #dcfce7; }
.live-badge.is-run, .live-event.is-run { color: #2563eb; }
.live-event.is-run { background: #eff6ff; }
.live-badge.is-run { background: #dbeafe; }
.live-badge.is-warn, .live-event.is-warn { color: #b45309; }
.live-event.is-warn { background: #fffbeb; }
.live-badge.is-warn { background: #fef3c7; }
.live-badge.is-bad, .live-event.is-bad { color: #dc2626; }
.live-event.is-bad { background: #fef2f2; }
.live-badge.is-bad { background: #fee2e2; }
.live-badge.is-unknown, .live-event.is-unknown { color: #9333ea; }
.live-event.is-unknown { background: #faf5ff; }
.live-badge.is-unknown { background: #f3e8ff; }
.live-badge.is-mute { background: #f1f5f9; color: #64748b; }
.live-event.is-mute { background: #f8fafc; }
.live-event { border-radius: 8px; }
.code-badge { display: inline-block; min-width: 2.4rem; padding: .12rem .4rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-align: center; }
.code-badge.is-ok { background: #dcfce7; color: #16a34a; }
.code-badge.is-warn { background: #fef3c7; color: #b45309; }
.code-badge.is-bad { background: #fee2e2; color: #dc2626; }
.code-badge.is-muted { background: #f1f5f9; color: #64748b; }
.live-badge.is-run svg { animation: live-spin 1s linear infinite; }
@keyframes live-spin { to { transform: rotate(360deg); } }
.live-pager { margin-top: .7rem; }
.live-cards { display: none; }
.activity-detail-list, #activity-detail-body dl { display: grid; grid-template-columns: 11rem 1fr; gap: .35rem .7rem; margin: 0; }
#activity-detail-body dt { color: #64748b; font-size: .75rem; }
#activity-detail-body dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .live-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
    .live-kpis, .live-filters form { grid-template-columns: 1fr; }
    .live-filters .form-control, .live-filters .form-select, .live-tools, .live-tools .btn { width: 100%; }
    .live-table-wrap { display: none; }
    .live-cards { display: grid; gap: .6rem; }
    .live-cards article { padding: .75rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
    .live-cards header { display: flex; gap: .45rem; align-items: center; margin-bottom: .35rem; }
    .live-cards a, .live-cards p { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .live-cards p { margin: .25rem 0 0; color: #64748b; font-size: .78rem; }
    #activity-detail-body dl { grid-template-columns: 1fr; }
}

.aud { display: grid; gap: 1rem; min-width: 0; }
.aud-head, .aud-actions, .aud-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aud-head { justify-content: space-between; }
.aud-head h1 { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.aud-head p, .aud-note, .aud-meta { margin: .25rem 0 0; color: #64748b; }
.aud-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.aud-kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.aud-kpis article { min-width: 0; padding: .8rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
.aud-kpis span, .aud-kpis small { display: block; color: #64748b; font-size: .72rem; }
.aud-kpis strong { display: block; margin-top: .2rem; color: #0f172a; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.aud-kpis .is-ok strong { color: #047857; }
.aud-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.aud-table th { padding: .6rem; border-bottom: 1px solid #e2e8f0; color: #64748b; font-size: .68rem; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.aud-table td { padding: .65rem .6rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; background: #fff; }
.aud-table tr:hover td { background: #f8fafc; }
.aud-name { display: inline-flex; gap: .4rem; align-items: center; font-weight: 650; }
.aud-name .nav-icon { width: 1rem; height: 1rem; }
.aud-table small, .aud-cards small { display: block; color: #64748b; }
.num, .aud-badge { font-variant-numeric: tabular-nums; }
.aud-badge { display: inline-block; padding: .12rem .45rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.aud-badge.is-ok { background: #d1fae5; color: #047857; }
.aud-badge.is-warn { background: #fef3c7; color: #92400e; }
.aud-empty { padding: 1.5rem; border: 1px dashed #e2e8f0; border-radius: 12px; background: #fff; color: #64748b; }
.aud-cards { display: none; gap: .7rem; }
.aud-cards article { padding: .8rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.aud-panel { display: grid; gap: .75rem; padding: .9rem 1rem 1rem; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.aud-panel h2 { margin: 0; font-size: 1rem; }
.aud-panel header p { margin: .2rem 0 0; color: #64748b; font-size: .82rem; }
.aud-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem .75rem; align-items: end; }
.aud-filter-grid.is-members { grid-template-columns: minmax(14rem, 1.6fr) minmax(0, .8fr) minmax(0, .7fr) auto; }
.aud-filter-grid.is-index { grid-template-columns: minmax(14rem, 1.7fr) minmax(9rem, 1fr) minmax(7rem, .6fr) minmax(8rem, .7fr) auto; }
.aud-filter-grid label { display: grid; gap: .28rem; min-width: 0; margin: 0; color: #64748b; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.aud-filter-grid .form-control, .aud-filter-grid .form-select { width: 100%; min-height: 2.45rem; color: #0f172a; font-size: .86rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.aud-filter-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.aud-filter-actions .btn { min-height: 2.45rem; white-space: nowrap; }
.aud-health { display: flex; flex-wrap: wrap; gap: .5rem; }
.aud-health span { padding: .35rem .6rem; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; font-size: .78rem; }
.aud-results { display: grid; gap: .35rem; margin-top: .7rem; }
.aud-pick { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid #f1f5f9; }
.aud-form { max-width: 40rem; }
.dropdown-item { width: 100%; text-align: left; background: transparent; border: 0; }
@media (max-width: 1100px) {
    .aud-kpis, .aud-kpis-6 { grid-template-columns: 1fr 1fr; }
    .aud-filter-grid, .aud-filter-grid.is-members, .aud-filter-grid.is-index { grid-template-columns: 1fr 1fr; }
    .aud-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .aud-kpis, .aud-kpis-6 { grid-template-columns: 1fr; }
    .aud-filter-grid, .aud-filter-grid.is-members, .aud-filter-grid.is-index { grid-template-columns: 1fr; }
    .aud-toolbar .form-control, .aud-toolbar .form-select, .aud-actions .btn { width: 100%; }
    .aud .table-responsive { display: none; }
    .aud-cards { display: grid; }
}

.cmp { display: grid; gap: 1rem; min-width: 0; }
.cmp-head, .cmp-actions, .cmp-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cmp-head { justify-content: space-between; }
.cmp-head h1 { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.cmp-head p, .cmp-sync { margin: .25rem 0 0; color: #64748b; }
.cmp-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; }
.cmp-kpis article { min-width: 0; padding: .85rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
.cmp-kpis .nav-icon { width: 1.1rem; height: 1.1rem; color: #2563eb; }
.cmp-kpis span { display: block; margin-top: .35rem; color: #64748b; font-size: .72rem; }
.cmp-kpis strong { display: block; margin-top: .15rem; color: #0f172a; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.cmp-kpis .is-ok strong, .cmp-num.is-ok { color: #047857; }
.cmp-kpis .is-bad strong, .cmp-num.is-bad { color: #dc2626; }
.cmp-num { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #64748b; }
.cmp-filter { border: 0; }
.cmp-filter summary { display: none; }
.cmp-toolbar .form-control, .cmp-toolbar .form-select { width: auto; min-width: 9rem; }
.cmp-table { width: 100%; min-width: 68rem; border-collapse: collapse; font-size: 13px; background: #fff; }
.cmp-table th { padding: .7rem; border-bottom: 1px solid #e2e8f0; color: #64748b; font-size: .68rem; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.cmp-table td { padding: .75rem .7rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; background: #fff; }
.cmp-table tr:hover td { background: #f8fafc; }
.cmp-name { display: inline-block; font-weight: 650; }
.cmp-subject { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmp-table small, .cmp-cards small { display: block; color: #64748b; }
.cmp-bar { height: .45rem; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.cmp-bar span { display: block; height: 100%; background: #2563eb; }
.cmp-badge { display: inline-flex; gap: .35rem; align-items: center; padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.cmp-badge.is-draft, .cmp-badge.is-cancelled { background: #e2e8f0; color: #475569; }
.cmp-badge.is-scheduled { background: #ede9fe; color: #6d28d9; }
.cmp-badge.is-queued, .cmp-badge.is-sending { background: #dbeafe; color: #1d4ed8; }
.cmp-badge.is-paused, .cmp-badge.is-completed_with_errors { background: #fef3c7; color: #92400e; }
.cmp-badge.is-completed { background: #d1fae5; color: #047857; }
.cmp-badge.is-live::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: #2563eb; animation: cmp-pulse 1.2s ease-in-out infinite; }
@keyframes cmp-pulse { 50% { opacity: .35; } }
.cmp-alert, .cmp-warn { color: #92400e; }
.cmp-warn { margin: 0; padding: .7rem .9rem; border: 1px solid #fde68a; border-radius: 12px; background: #fffbeb; }
.cmp-empty { padding: 1.5rem; border: 1px dashed #e2e8f0; border-radius: 12px; background: #fff; color: #64748b; }
.cmp-cards { display: none; gap: .7rem; }
.cmp-cards article { padding: .85rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.cmp-preview { display: grid; gap: .45rem; margin: 0 0 1rem; }
.cmp-preview div { display: grid; gap: .1rem; }
.cmp-preview dt { color: #64748b; font-size: .72rem; }
.cmp-preview dd { margin: 0; }
.cmp .dropdown-item { width: 100%; text-align: left; background: transparent; border: 0; }
.cmp > .cmp-board-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1200px) { .cmp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .cmp > .cmp-board-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
    .cmp-kpis { grid-template-columns: 1fr 1fr; }
    .cmp-filter summary { display: block; margin-bottom: .4rem; font-weight: 650; }
    .cmp-toolbar .form-control, .cmp-toolbar .form-select, .cmp-actions .btn { width: 100%; }
    .cmp .table-responsive { display: none; }
    .cmp-cards { display: grid; }
}

h1, .h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
h2, .h2 { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
h3, .h3, h4, .h4 { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.35; }
h5, .h5, h6, .h6 { font-size: var(--fs-sm); font-weight: 650; letter-spacing: 0; line-height: 1.4; }
p { margin-bottom: var(--step-3); }
.app-main main { display: block; }
.btn, .form-control, .form-select, .dropdown-item, .page-link {
    font-family: var(--font);
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.btn { font-weight: 600; padding: .45rem .9rem; }
.btn-sm, .btn-group-sm > .btn { font-size: var(--fs-xs); padding: .3rem .65rem; }
.form-label { margin-bottom: var(--step-1); font-size: var(--fs-xs); font-weight: 600; }
.smtp-form { display: grid; gap: .75rem; max-width: 920px; }
.smtp-form-back { font-size: .82rem; font-weight: 700; }
.smtp-form > p { margin: 0; color: #64748b; font-size: .85rem; }
.smtp-form form { display: grid; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
.smtp-form section { display: grid; gap: .75rem; padding: 1rem 1.15rem 1.1rem; border-bottom: 1px solid #e2e8f0; }
.smtp-form section header h2 { margin: 0; font-size: .95rem; font-weight: 700; }
.smtp-form section header p { margin: .15rem 0 0; color: #64748b; font-size: .8rem; }
.smtp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; }
.smtp-form-grid label { display: grid; gap: .3rem; min-width: 0; margin: 0; color: #334155; font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.smtp-form-grid label.is-wide { grid-column: 1 / -1; }
.smtp-form-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.smtp-form .form-control, .smtp-form .form-select, .smtp-form textarea { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cmp-editor { display: grid; gap: .4rem; }
.cmp-editor > span { color: #334155; font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.cmp-letter { display: grid; gap: .65rem; }
.cmp-letter iframe { width: 100%; height: 34rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #f4f6f8; }
.cmp-letter .editor-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; }
.cmp-letter .editor-toolbar .btn { margin: 0; }
.cmp-form footer { justify-content: flex-end; }
.cmp-form .form-text { margin: 0; color: #64748b; font-size: .8rem; }
.cmp-attachment { display: block; max-width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.cmp-files { display: grid; gap: .65rem; }
.cmp-file-stack { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; counter-reset: cmp-file; }
.cmp-file-stack:empty { display: none; }
.cmp-file { display: grid; grid-template-columns: 1.4rem 2.6rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; margin: 0; padding: .55rem .7rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; animation: cmp-file-in .28s ease both; }
.cmp-file-index::before { counter-increment: cmp-file; content: counter(cmp-file); color: #64748b; font-size: .75rem; font-weight: 700; }
.cmp-file-thumb { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; color: #2563eb; font-size: .62rem; font-weight: 800; letter-spacing: .03em; }
.cmp-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cmp-file-meta { display: grid; gap: .1rem; min-width: 0; }
.cmp-file-meta strong, .cmp-upload-card li strong { overflow: hidden; color: #0f172a; font-size: .86rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.cmp-file-meta small { color: #64748b; font-size: .75rem; }
.cmp-file-remove { border: 0; border-radius: 8px; background: transparent; color: #b91c1c; font-size: .78rem; font-weight: 700; }
.cmp-file-remove:hover { background: #fef2f2; }
.cmp-file.is-leaving { animation: cmp-file-out .2s ease forwards; }
.cmp-file-empty, .cmp-file-note { margin: 0; color: #64748b; font-size: .8rem; }
.cmp-file-note { color: #b45309; }
.cmp-file-add { position: relative; display: flex; gap: .35rem; align-items: baseline; justify-content: space-between; margin: 0; padding: .75rem .85rem; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; cursor: pointer; }
.cmp-file-add.is-over { border-color: #2563eb; background: #eff6ff; }
.cmp-file-add span { color: #0f172a; font-size: .86rem; font-weight: 700; }
.cmp-file-add small { color: #64748b; font-size: .75rem; }
.cmp-file-add input { position: absolute; width: .1px; height: .1px; opacity: 0; overflow: hidden; }
.cmp-upload { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1080; width: min(24rem, calc(100vw - 2rem)); }
.cmp-upload[hidden] { display: none !important; }
.cmp-upload-card { display: grid; gap: .65rem; padding: .9rem 1rem 1rem; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, .16); animation: cmp-upload-in .28s ease; }
.cmp-upload-card header { display: flex; gap: .75rem; align-items: baseline; justify-content: space-between; }
.cmp-upload-card header strong { color: #0f172a; font-size: .92rem; }
.cmp-upload-card header span { color: #2563eb; font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-upload-card p { margin: 0; color: #64748b; font-size: .75rem; }
.cmp-upload.is-error .cmp-upload-card header strong, .cmp-upload.is-error .cmp-upload-card p { color: #b91c1c; }
.cmp-upload-bar, .cmp-upload-track { overflow: hidden; height: .4rem; border-radius: 999px; background: #e2e8f0; }
.cmp-upload-bar > span, .cmp-upload-track > span { position: relative; display: block; width: 0; height: 100%; background: linear-gradient(90deg, #2563eb, #10b981); transition: width .18s linear; }
.cmp-upload-bar > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: cmp-shimmer 1.1s linear infinite; }
.cmp-upload-card ol { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.cmp-upload-card li { display: grid; gap: .28rem; animation: cmp-file-in .28s ease both; }
.cmp-upload-card li:nth-child(2) { animation-delay: .06s; }
.cmp-upload-card li:nth-child(3) { animation-delay: .12s; }
.cmp-upload-card li:nth-child(4) { animation-delay: .18s; }
.cmp-upload-card li.is-done strong { color: #047857; }
@keyframes cmp-file-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes cmp-file-out { to { opacity: 0; transform: translateX(10px); } }
@keyframes cmp-upload-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cmp-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.smtp-form footer { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; padding: .9rem 1.15rem; }
.smtp-form footer .form-check { margin: 0; }
.ctc-form footer { justify-content: flex-end; }
.ctc-lists { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .7rem; }
.ctc-lists .form-check { display: flex; gap: .5rem; align-items: center; margin: 0; padding: .55rem .7rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; color: #0f172a; font-size: .86rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ctc-lists .form-check-input { margin: 0; float: none; }
@media (max-width: 700px) {
    .smtp-form-grid, .smtp-form-grid.is-3, .ctc-lists { grid-template-columns: 1fr; }
    .smtp-form footer { align-items: stretch; }
    .smtp-form footer .btn { width: 100%; }
}
.form-text, .text-secondary, small, .small { font-size: var(--fs-xs); line-height: 1.45; }
.table { font-size: var(--fs-sm); }
.table thead th {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.table td { font-variant-numeric: tabular-nums; }
.badge { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .01em; }
.alert { font-size: var(--fs-sm); }
.card, .cdc-card, .monitor-card { font-size: var(--fs-md); }
.cdc, .aud, .cmp, .command { gap: var(--step-5); }
.cdc-card h2, .card > h2, .live-head h2 { font-size: 1rem; }
.cdc-meta dt, .cdc-progress dt, .cmp-preview dt { font-size: var(--fs-2xs); }
.cdc-meta dd, .cdc-progress dd, .cmp-preview dd { font-size: var(--fs-sm); }
.aud-head p, .cmp-head p, .cdc-kicker { font-size: var(--fs-sm); }
.em-sidebar a.nav-link { font-size: 13px; }
.bnc { display: grid; gap: var(--step-4); min-width: 0; }
.bnc-head, .bnc-actions, .bnc-toolbar, .bnc-tabs { display: flex; flex-wrap: wrap; gap: var(--step-2); align-items: center; }
.bnc-head { justify-content: space-between; align-items: flex-start; }
.bnc h1 { margin: 0; font-size: var(--fs-xl); }
.bnc-kicker, .bnc-head p, .bnc-status, .bnc-range { margin: var(--step-1) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.bnc-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bnc-tabs { gap: var(--step-1); overflow-x: auto; }
.bnc-tab { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); padding: .35rem .7rem; font-size: var(--fs-xs); font-weight: 650; text-decoration: none; white-space: nowrap; }
.bnc-tab.is-on { background: #0f172a; border-color: #0f172a; color: #fff; }
.bnc-tab span { margin-left: .25rem; }
.bnc-toolbar .form-control, .bnc-toolbar .form-select { width: auto; min-width: 8rem; }
.bnc-table { width: 100%; border-collapse: collapse; background: #fff; font-size: var(--fs-sm); }
.bnc-table th, .bnc-table td { padding: .65rem .55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.bnc-table th { color: var(--muted); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; }
.bnc-email { max-width: 16rem; overflow: hidden; border: 0; background: transparent; padding: 0; color: var(--navy); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.bnc-reason, .bnc-table a { display: inline-block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.bnc-badge, .bnc-code { display: inline-block; padding: .12rem .45rem; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700; }
.bnc-badge.is-hard, .bnc-code.is-bad { background: #fee2e2; color: #b91c1c; }
.bnc-badge.is-soft, .bnc-code.is-warn { background: #fef3c7; color: #92400e; }
.bnc-badge.is-blocked { background: #ede9fe; color: #6d28d9; }
.bnc-badge.is-review { background: #dbeafe; color: #1d4ed8; }
.bnc-badge.is-ignored, .bnc-code.is-mute { background: #e2e8f0; color: #475569; }
.bnc-badge.is-applied { background: #d1fae5; color: #047857; }
.bnc-bar { position: sticky; bottom: .75rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.bnc-bar[hidden] { display: none; }
.bnc-analytics { display: grid; grid-template-columns: 1.4fr .6fr; gap: var(--step-3); }
.bnc-analytics article { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.bnc-analytics h2 { margin: 0 0 .35rem; font-size: var(--fs-sm); }
.bnc-analytics p { display: flex; gap: .45rem; margin: .2rem 0; font-size: var(--fs-xs); }
.bnc-detail { display: grid; gap: .55rem; }
.bnc-detail dt { color: var(--muted); font-size: var(--fs-2xs); }
.bnc-detail dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .bnc-kpis, .bnc-analytics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
    .bnc-kpis { grid-template-columns: 1fr 1fr; }
    .bnc-actions .btn, .bnc-toolbar .form-control, .bnc-toolbar .form-select { width: 100%; }
}
.sup { display: grid; gap: var(--step-4); min-width: 0; }
.sup-head, .sup-actions, .sup-toolbar, .sup-tabs { display: flex; flex-wrap: wrap; gap: var(--step-2); align-items: center; }
.sup-head { justify-content: space-between; align-items: flex-start; }
.sup h1 { margin: 0; font-size: var(--fs-xl); }
.sup-head p, .sup-range { margin: var(--step-1) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.sup-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sup-tabs { gap: var(--step-1); overflow-x: auto; }
.sup-tab { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); padding: .35rem .7rem; font-size: var(--fs-xs); font-weight: 650; text-decoration: none; white-space: nowrap; }
.sup-tab.is-on { background: #0f172a; border-color: #0f172a; color: #fff; }
.sup-toolbar .form-control, .sup-toolbar .form-select { width: auto; min-width: 8rem; }
.sup-table { width: 100%; border-collapse: collapse; background: #fff; font-size: var(--fs-sm); }
.sup-table th, .sup-table td { padding: .65rem .55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.sup-table th { color: var(--muted); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; }
.sup-email { display: inline-block; max-width: 18rem; overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.sup-badge { display: inline-block; padding: .12rem .45rem; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700; }
.sup-badge.is-unsubscribe { background: #ede9fe; color: #6d28d9; }
.sup-badge.is-hard_bounce { background: #fee2e2; color: #b91c1c; }
.sup-badge.is-manual { background: #fef3c7; color: #92400e; }
.sup-badge.is-other, .sup-badge.is-active { background: #e2e8f0; color: #334155; }
.sup-cards { display: none; gap: var(--step-2); }
.sup-cards article { display: grid; gap: .2rem; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sup-bar { position: sticky; bottom: .75rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.sup-bar[hidden] { display: none; }
.sup-analytics { display: grid; grid-template-columns: 1.4fr .6fr; gap: var(--step-3); }
.sup-analytics article { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sup-analytics h2 { margin: 0 0 .35rem; font-size: var(--fs-sm); }
.sup-analytics p { display: flex; justify-content: space-between; margin: .2rem 0; font-size: var(--fs-xs); }
.sup-detail { display: grid; gap: .55rem; }
.sup-detail dt { color: var(--muted); font-size: var(--fs-2xs); }
.sup-detail dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .sup-kpis, .sup-analytics { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
    .sup-kpis { grid-template-columns: 1fr 1fr; }
    .sup .table-responsive { display: none; }
    .sup-cards { display: grid; }
    .sup-actions .btn, .sup-toolbar .form-control, .sup-toolbar .form-select { width: 100%; }
}
.ctc { display: grid; gap: var(--step-4); min-width: 0; }
.ctc-head, .ctc-actions, .ctc-toolbar { display: flex; flex-wrap: wrap; gap: var(--step-2); align-items: center; }
.ctc-head { justify-content: space-between; align-items: flex-start; }
.ctc h1 { margin: 0; font-size: var(--fs-xl); }
.ctc-head p, .ctc-range, .ctc-quality { margin: var(--step-1) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.ctc-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ctc-toolbar .form-control, .ctc-toolbar .form-select { width: auto; min-width: 8rem; }
.ctc-more { flex-basis: 100%; }
.ctc-more div { display: flex; flex-wrap: wrap; gap: var(--step-2); margin-top: var(--step-2); }
.ctc-table { width: 100%; border-collapse: collapse; background: #fff; font-size: var(--fs-sm); }
.ctc-table th, .ctc-table td { padding: .65rem .55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ctc-table th { color: var(--muted); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; }
.ctc-person { display: flex; gap: .55rem; align-items: center; border: 0; background: transparent; padding: 0; text-align: left; }
.ctc-person strong, .ctc-clamp { display: block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.ctc-person strong { font-weight: 650; }
.ctc-person small, .ctc-quality { color: var(--muted); }
.ctc-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.ctc-avatar { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 999px; background: #e2e8f0; color: #0f172a; font-size: var(--fs-2xs); font-weight: 700; }
.ctc-plus, .ctc-badge { display: inline-block; margin-left: .25rem; padding: .12rem .4rem; border-radius: 999px; background: #e2e8f0; font-size: var(--fs-2xs); font-weight: 700; }
.ctc-badge.is-active { background: #d1fae5; color: #047857; }
.ctc-badge.is-invalid { background: #fee2e2; color: #b91c1c; }
.ctc-badge.is-suppressed { background: #fef3c7; color: #92400e; }
.ctc-badge.is-unsubscribed { background: #ede9fe; color: #6d28d9; }
.ctc-acts, .row-acts { display: inline-flex; align-items: center; gap: .28rem; flex-wrap: nowrap; }
.ctc-act, .row-act { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #0f172a; }
.ctc-act svg, .row-act svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ctc-act:hover, .row-act:hover { border-color: #94a3b8; background: #f8fafc; color: #0f172a; }
.ctc-act.is-warn, .row-act.is-warn { color: #b45309; }
.ctc-act.is-danger, .row-act.is-danger { color: #b91c1c; }
.row-act:disabled { opacity: .4; }
.row-act-form { display: contents; }
table td:has(.row-acts),
table td:has(.ctc-acts),
table td:has(.row-act),
table td:has(.dropdown) { text-align: right; white-space: nowrap; }
table:has(.row-acts) thead th:last-child,
table:has(.ctc-acts) thead th:last-child,
table:has(td > .row-act) thead th:last-child,
table:has(td > .row-act-form) thead th:last-child,
table:has(td .dropdown) thead th:last-child { text-align: right; }
.ctc-act-list { position: relative; }
.ctc-act-list > summary { list-style: none; cursor: pointer; }
.ctc-act-list > summary::-webkit-details-marker { display: none; }
.ctc-act-list form { position: absolute; right: 0; z-index: 30; display: grid; gap: .45rem; width: 16rem; margin-top: .3rem; padding: .7rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .1); }
.ctc-act-list label { display: grid; gap: .25rem; margin: 0; color: #64748b; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.ctc-act-list form div { display: flex; gap: .35rem; }
.ctc-act-list form p { margin: 0; color: #64748b; font-size: .78rem; }
.ctc-table td:last-child { white-space: nowrap; }
.ctc .table-responsive { overflow: visible; }
.ctc-cards .ctc-acts { margin-top: .35rem; }
.ctc-menu { min-width: 16rem; padding: .4rem; }
.ctc-menu .form-select { margin: .35rem 0; }
.ctc-cards { display: none; gap: var(--step-2); }
.ctc-cards article { display: grid; gap: .25rem; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ctc-cards button { border: 0; background: transparent; padding: 0; text-align: left; }
.ctc-bar { position: sticky; bottom: .75rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.ctc-bar[hidden] { display: none; }
.ctc-page { display: grid; gap: .9rem; }
.ctc-page-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.ctc-page-head > div { display: grid; gap: .2rem; min-width: 0; }
.ctc-page-head h1 { margin: 0; font-size: 1.35rem; }
.ctc-page-head a:not(.btn) { color: #1d4ed8; overflow-wrap: anywhere; }
.ctc-page-head .ctc-badge { justify-self: start; margin: .2rem 0 0; }
.ctc-profile { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--step-3); }
.ctc-profile article, .ctc-history { display: grid; gap: .75rem; align-content: start; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ctc-profile h2, .ctc-history h2 { margin: 0; font-size: 1rem; }
.ctc-history-table td:nth-child(n + 3) { font-variant-numeric: tabular-nums; }
.ctc-profile dl, .ctc-detail { display: grid; gap: .45rem; }
.ctc-profile dt, .ctc-detail dt { color: var(--muted); font-size: var(--fs-2xs); }
.ctc-profile dd, .ctc-detail dd { margin: 0; overflow-wrap: anywhere; }
#ctc-detail.offcanvas { --bs-offcanvas-width: min(28rem, 100vw); }
.ctc-sheet { display: grid; gap: .9rem; }
.ctc-sheet-id { display: grid; gap: .2rem; padding-bottom: .75rem; border-bottom: 1px solid #e2e8f0; }
.ctc-sheet-id strong { color: #0f172a; font-size: 1.05rem; }
.ctc-sheet-id > a { color: #1d4ed8; font-size: .86rem; overflow-wrap: anywhere; }
.ctc-sheet-id .ctc-badge { justify-self: start; margin: .25rem 0 0; }
.ctc-sheet section { display: grid; gap: .45rem; min-width: 0; }
.ctc-sheet h3 { margin: 0; color: #64748b; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ctc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0; }
.ctc-facts div { min-width: 0; padding: .5rem .65rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.ctc-facts .is-wide { grid-column: 1 / -1; }
.ctc-facts dt { margin: 0; color: #64748b; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.ctc-facts dd { margin: .12rem 0 0; color: #0f172a; font-weight: 600; overflow-wrap: anywhere; }
.ctc-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.ctc-tags span { padding: .15rem .55rem; border-radius: 999px; background: #eef2ff; color: #1e3a8a; font-size: .75rem; font-weight: 600; }
.ctc-source { display: block; min-width: 0; overflow: hidden; color: #1d4ed8; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ctc-note { margin: 0; color: #334155; font-size: .86rem; line-height: 1.55; }
.ctc-hint { margin: 0; color: #64748b; font-size: .75rem; }
.ctc-sheet-list { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ctc-sheet-list li { display: grid; gap: .1rem; min-width: 0; padding: .45rem .6rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.ctc-sheet-list a { font-weight: 700; }
.ctc-sheet-list small { color: #64748b; font-size: .75rem; }
.ctc-sheet > .btn { justify-self: start; }
@media (max-width: 1100px) { .ctc-kpis, .ctc-profile { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
    .ctc-kpis, .ctc-profile { grid-template-columns: 1fr 1fr; }
    .ctc .table-responsive { display: none; }
    .ctc-cards { display: grid; }
    .ctc-actions .btn, .ctc-toolbar .form-control, .ctc-toolbar .form-select { width: 100%; }
}
.imp { display: grid; gap: var(--step-4); min-width: 0; }
.imp-head, .imp-actions, .imp-toolbar { display: flex; flex-wrap: wrap; gap: var(--step-2); align-items: center; }
.imp-head { justify-content: space-between; align-items: flex-start; }
.imp h1 { margin: 0; font-size: var(--fs-xl); }
.imp-head p, .imp-range { margin: var(--step-1) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.imp-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.imp-toolbar .form-control, .imp-toolbar .form-select { width: auto; min-width: 8rem; }
.imp-table { width: 100%; border-collapse: collapse; background: #fff; font-size: var(--fs-sm); }
.imp-table th, .imp-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.imp-table th { color: var(--muted); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; }
.imp-file { display: grid; border: 0; background: transparent; padding: 0; text-align: left; }
.imp-file small { color: var(--muted); }
.imp-table .is-new { color: #047857; font-weight: 700; }
.imp-table .is-old { color: #1d4ed8; font-weight: 700; }
.imp-table .is-bad { color: #b91c1c; font-weight: 700; }
.imp-badge { display: inline-block; padding: .12rem .45rem; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700; }
.imp-badge.is-pending { background: #e2e8f0; color: #334155; }
.imp-badge.is-run { background: #dbeafe; color: #1d4ed8; }
.imp-badge.is-done { background: #d1fae5; color: #047857; }
.imp-badge.is-warn { background: #fef3c7; color: #92400e; }
.imp-badge.is-bad { background: #fee2e2; color: #b91c1c; }
.imp-steps { display: flex; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.imp-steps li { padding: .3rem .6rem; border-radius: 999px; background: #e2e8f0; color: #334155; font-size: var(--fs-xs); }
.imp-steps .is-on, .imp-steps .is-done { background: #0f172a; color: #fff; }
.imp-drop { border: 1px dashed #94a3b8; }
.imp-progress { height: .45rem; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.imp-progress span { display: block; height: 100%; background: #2563eb; }
.imp-result { display: grid; gap: 1rem; max-width: 980px; }
.imp-kicker { margin: 0; color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.imp-result h1 { margin: .15rem 0 0; font-size: 1.45rem; }
.imp-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .4rem 0 0; color: #64748b; font-size: .82rem; }
.imp-meta strong { color: #0f172a; font-weight: 650; }
.imp-result .imp-badge { align-self: flex-start; padding: .35rem .7rem; font-size: .75rem; }
.imp-panel { display: grid; gap: .75rem; padding: 1rem 1.1rem 1.05rem; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
.imp-progress-head { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline; justify-content: space-between; }
.imp-progress-head strong { color: #0f172a; font-size: 1.7rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.imp-progress-head span { color: #64748b; font-size: .86rem; }
.imp-progress-head b { color: #0f172a; font-weight: 700; }
.imp-progress.is-lg { height: .7rem; }
.imp-progress.is-lg span { background: linear-gradient(90deg, #2563eb, #10b981); transition: width .25s ease; }
.imp-note { margin: 0; color: #64748b; font-size: .82rem; }
.imp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.imp-fact { display: grid; gap: .15rem; padding: .85rem .95rem; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.imp-fact span { color: #64748b; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.imp-fact strong { color: #0f172a; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.imp-fact small { color: #64748b; font-size: .75rem; }
.imp-result .imp-actions .btn { width: auto; }
@media (max-width: 700px) {
    .imp-facts { grid-template-columns: 1fr 1fr; }
    .imp-result .imp-actions .btn { width: 100%; }
}
#imp-detail.offcanvas, #cmp-preview.offcanvas { --bs-offcanvas-width: min(32rem, 100vw); }
.imp-drawer { display: grid; gap: .9rem; }
.imp-drawer-head { display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between; }
.imp-drawer-head h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.imp-drawer-head p { margin: .15rem 0 0; color: #64748b; font-size: .78rem; }
.imp-drawer-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .85rem; margin: 0; }
.imp-drawer-meta div { display: grid; gap: .1rem; min-width: 0; }
.imp-drawer-meta dt { margin: 0; color: #64748b; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.imp-drawer-meta dd { margin: 0; color: #0f172a; font-size: .86rem; font-weight: 650; overflow-wrap: anywhere; }
.imp-drawer-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.imp-drawer-facts article { display: grid; gap: .1rem; padding: .55rem .6rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.imp-drawer-facts span { color: #64748b; font-size: .64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.imp-drawer-facts strong { color: #0f172a; font-size: 1rem; font-variant-numeric: tabular-nums; }
.imp-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.imp-tabs button { border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #334155; font-size: .75rem; font-weight: 700; padding: .3rem .7rem; }
.imp-tabs button.is-on { border-color: #0f172a; background: #0f172a; color: #fff; }
.imp-log { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.imp-log li { display: grid; gap: .1rem; padding: .55rem .65rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.imp-log strong { color: #0f172a; font-size: .82rem; }
.imp-log small { color: #64748b; font-size: .75rem; }
.imp-log .is-empty { color: #64748b; border-style: dashed; background: #f8fafc; }
@media (max-width: 1100px) { .imp-kpis { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) {
    .imp-kpis { grid-template-columns: 1fr 1fr; }
    .imp-actions .btn, .imp-toolbar .form-control, .imp-toolbar .form-select { width: 100%; }
}
.tpl { display: grid; gap: var(--step-4); min-width: 0; }
.tpl-head, .tpl-actions, .tpl-toolbar, .tpl-card-actions, .tpl-links { display: flex; flex-wrap: wrap; gap: var(--step-2); align-items: center; }
.tpl-head { justify-content: space-between; align-items: flex-start; }
.tpl h1, .tpl-editor h1 { margin: 0; font-size: var(--fs-xl); }
.tpl-head p, .tpl-range { margin: var(--step-1) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.tpl-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tpl-toolbar .form-control, .tpl-toolbar .form-select { width: auto; min-width: 8rem; }
.tpl-table { width: 100%; border-collapse: collapse; background: #fff; font-size: var(--fs-sm); }
.tpl-table th, .tpl-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.tpl-table th { color: var(--muted); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; }
.tpl-name { display: flex; gap: .45rem; align-items: flex-start; }
.tpl-name small, .tpl-subject { color: var(--muted); }
.tpl-name small { display: block; }
.tpl-subject { max-width: 18rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-badge { display: inline-block; padding: .12rem .45rem; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: var(--fs-2xs); font-weight: 700; }
.tpl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--step-3); }
.tpl-mobile-cards { display: none; }
.tpl-card { background: #fff; border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; }
.tpl-card iframe { width: 100%; height: 160px; border: 0; pointer-events: none; background: #fff; }
.tpl-card div { display: grid; gap: .25rem; padding: .7rem; }
.tpl-card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-kicker { margin: 0 0 .15rem; color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tpl-empty-card { padding: 1.35rem 1.25rem; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
.tpl-empty-card h2 { margin: 0; font-size: 1rem; }
.tpl-empty-card p { margin: .35rem 0 0; color: #64748b; font-size: .88rem; }
.tpl-version-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: flex-end; }
.tpl-version-actions form { margin: 0; }
.tpl-editor { min-width: 0; }
.tpl-layout { display: grid; grid-template-columns: 18.5rem minmax(0, 1fr) 22rem; gap: .85rem; align-items: start; }
.tpl-side, .tpl-center { background: #fff; border: 1px solid var(--line); border-radius: 16px; min-width: 0; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
.tpl-side { padding: 0; }
.tpl-center { display: grid; gap: .65rem; align-content: start; padding: .85rem; }
.tpl-side section { display: grid; gap: .55rem; padding: .85rem .95rem 1rem; border-bottom: 1px solid #e2e8f0; }
.tpl-side section:last-child { border-bottom: 0; }
.tpl-side h2, .tpl-side section h2 { margin: 0; color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tpl-side label { display: grid; gap: .28rem; margin: 0; color: #334155; font-size: .75rem; font-weight: 700; }
.tpl-side .form-control, .tpl-side .form-select { font-weight: 500; }
.tpl-side .form-text { margin: 0; }
.tpl-side.is-hidden { display: none; }
.tpl-tokens { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.tpl-tokens li { display: grid; gap: .12rem; padding: .55rem .65rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.tpl-tokens strong { font-family: Consolas, ui-monospace, monospace; font-size: .78rem; }
.tpl-tokens small { color: var(--muted); }
.tpl-tokens .btn { justify-self: start; }
.tpl-blocks, .tpl-tabs, .tpl-toolbar-edit { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tpl-toolbar-edit { padding: .45rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.tpl-toolbar-edit label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; color: #334155; font-size: .75rem; font-weight: 700; }
.tpl-toolbar-edit select { border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; padding: .2rem .45rem; font-size: .75rem; }
.tpl-blocks button, .tpl-tabs button, .tpl-toolbar-edit button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .28rem .65rem; font-size: var(--fs-xs); font-weight: 700; }
.tpl-foot { display: flex; flex-wrap: wrap; gap: .6rem .75rem; align-items: center; justify-content: space-between; margin-top: .85rem; }
.tpl-foot p { margin: 0; color: #64748b; font-size: .8rem; }
.tpl-foot-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.tpl-foot form { margin: 0; }
.tpl-tabs .is-on, .tpl-toolbar-edit .is-on { background: #0f172a; color: #fff; }
.tpl-visual, .tpl-source textarea, .tpl-text { width: 100%; min-height: 22rem; border: 1px solid var(--line); border-radius: .5rem; padding: .6rem; background: #fff; }
.tpl-source { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); }
.tpl-source textarea { border-radius: 0 .5rem .5rem 0; font-family: Consolas, monospace; font-size: var(--fs-xs); white-space: pre; overflow: auto; }
.tpl-source pre { margin: 0; padding: .6rem .2rem; overflow: hidden; color: var(--muted); font-family: Consolas, monospace; font-size: var(--fs-xs); text-align: right; background: #f8fafc; border: 1px solid var(--line); border-right: 0; border-radius: .5rem 0 0 .5rem; }
.tpl-preview-subject { display: grid; gap: .1rem; margin: 0; }
.tpl-preview-subject small { color: #64748b; }
.tpl-frame { background: #f8fafc; border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; }
.tpl-frame iframe { width: 100%; height: 36rem; border: 0; background: #f4f6f8; }
.tpl-frame.is-mobile { max-width: 23rem; margin: 0 auto; }
.tpl-preview-text { white-space: pre-wrap; background: #fff; border: 1px solid var(--line); border-radius: .5rem; padding: .7rem; }
.tpl-warnings, #tpl-warnings { margin: .4rem 0 0; padding-left: 1rem; color: #92400e; font-size: var(--fs-xs); }
.tpl-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--step-3); }
.tpl-editor [hidden] { display: none !important; }
@media (max-width: 1100px) {
    .tpl-kpis, .tpl-cards, .tpl-compare, .tpl-layout { grid-template-columns: 1fr 1fr; }
    .tpl-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .tpl-kpis, .tpl-cards, .tpl-compare { grid-template-columns: 1fr; }
    .tpl .table-responsive { display: none; }
    .tpl-mobile-cards { display: grid; }
    .tpl-actions .btn, .tpl-toolbar .form-control, .tpl-toolbar .form-select { width: 100%; }
}
.em-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin: 1rem 0; padding: .55rem .7rem; background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; }
.em-pager-meta { margin: 0; color: #64748b; font-size: var(--fs-xs); }
.em-pager-meta strong { color: #0f172a; font-weight: 600; }
.em-pager-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.em-pager-btn { min-width: 2rem; height: 2rem; padding: 0 .55rem; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; border: 1px solid #e2e8f0; border-radius: .5rem; background: #fff; color: #0f172a; font-size: var(--fs-xs); font-weight: 600; line-height: 1; text-decoration: none; }
.em-pager-btn svg { width: .85rem; height: .85rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.em-pager-btn:hover { border-color: #2563eb; color: #2563eb; }
.em-pager-btn.is-current { background: #0f172a; border-color: #0f172a; color: #fff; }
.em-pager-btn.is-disabled, .em-pager-btn:disabled { color: #94a3b8; background: #f8fafc; pointer-events: none; }
.em-pager-gap { min-width: 1rem; color: #94a3b8; text-align: center; }
.cdc-pager.em-pager, .live-pager.em-pager, .report-pager.em-pager { margin-top: .75rem; }
@media (max-width: 700px) {
    .em-pager { align-items: stretch; }
    .em-pager-nav { width: 100%; }
    .em-pager-btn span { display: none; }
    .em-pager-btn.is-current { min-width: 2rem; }
}
.dropdown-menu { z-index: 1080; }
.table-responsive:has(.dropdown-menu.show),
.cdc-table-wrap:has(.dropdown-menu.show) { overflow: visible; }