@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
@import url('./variables.css');
@import url('./components.css');
@import url('./layout.css');

:root {
    /* Light mode colors */
    --bg-primary-light: #ffffff;
    --bg-secondary-light: #f8fafc;
    --bg-tertiary-light: #f1f5f9;
    --text-primary-light: #0f172a;
    --text-secondary-light: #475569;
    --text-muted-light: #94a3b8;
    --border-light: #e2e8f0;
    --border-light-light: #f1f5f9;
    
    /* Dark mode colors */
    --bg-primary-dark: #0f172a;
    --bg-secondary-dark: #1e293b;
    --bg-tertiary-dark: #334155;
    --text-primary-dark: #f8fafc;
    --text-secondary-dark: #cbd5e1;
    --text-muted-dark: #64748b;
    --border-dark: #334155;
    --border-dark-light: #475569;
    
    /* Brand colors - Blue dominant */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    
    /* Action colors */
    --success-50: #f0fdf4;
    --success-100: #dcfce7;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;
    
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    
    /* Semantic colors */
    --accent: var(--primary-600);
    --accent-hover: var(--primary-700);
    --success: var(--success-600);
    --danger: var(--danger-600);
    --warning: var(--warning-600);
    --neutral: var(--neutral-600);
    
    /* Glass effects */
    --glass-light: rgba(255, 255, 255, 0.8);
    --glass-light-border: rgba(255, 255, 255, 0.2);
    --glass-dark: rgba(15, 23, 42, 0.8);
    --glass-dark-border: rgba(255, 255, 255, 0.1);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    --gradient-success: linear-gradient(135deg, var(--success-500), var(--success-600));
    --gradient-danger: linear-gradient(135deg, var(--danger-500), var(--danger-600));
    --gradient-warning: linear-gradient(135deg, var(--warning-500), var(--warning-600));
    --gradient-neutral: linear-gradient(135deg, var(--neutral-500), var(--neutral-600));
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    
    /* Border radius */
    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    
    /* Typography */
    --font-sans: 'Inter', 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

.app-page-transition {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.app-page-transition-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 42%),
        color-mix(in srgb, var(--color-bg) 84%, rgba(7, 12, 24, 0.4));
    backdrop-filter: blur(18px);
}

.app-page-transition-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    min-height: 180px;
}

.app-page-transition-ring {
    position: absolute;
    width: 236px;
    height: 236px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 42%, transparent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 16%, transparent);
    transform: scale(0.92);
}

.app-page-transition-logo-card {
    position: relative;
    z-index: 1;
    min-width: 210px;
    min-height: 88px;
    padding: 18px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 26px;
    background: color-mix(in srgb, var(--color-card) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.22);
    will-change: transform, opacity;
    transform: translateZ(0);
}

.app-page-transition-wordmark {
    position: relative;
    z-index: 1;
    width: 160px;
    max-width: 60vw;
    object-fit: contain;
}

html.dark .app-page-transition-wordmark {
    filter: brightness(0) invert(1);
}

html.page-transition-active .app-page-transition,
html.page-transition-enter .app-page-transition,
body.page-transition-active .app-page-transition {
    opacity: 1;
    visibility: visible;
}

html[data-page-transition-preset="none"] .app-page-transition {
    display: none;
}

html[data-page-transition-preset="fade"] .app-page-transition-ring {
    display: none;
}

html.page-transition-outgoing[data-page-transition-preset="pulse"] .app-page-transition-ring,
html.page-transition-outgoing[data-page-transition-preset="premium"] .app-page-transition-ring,
body.page-transition-outgoing[data-page-transition-preset="pulse"] .app-page-transition-ring,
body.page-transition-outgoing[data-page-transition-preset="premium"] .app-page-transition-ring {
    animation: bluezPageTransitionPulse 1s ease-in-out infinite;
}

html.page-transition-incoming .app-page-transition-ring,
body.page-transition-incoming .app-page-transition-ring {
    animation: none !important;
    transform: scale(1);
    opacity: 0.92;
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

html.page-transition-incoming .app-page-transition-logo-card,
body.page-transition-incoming .app-page-transition-logo-card {
    transform: translateZ(0);
}

html[data-page-transition-preset="premium"] .app-page-transition-backdrop {
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 36%),
        color-mix(in srgb, var(--color-bg) 88%, rgba(7, 12, 24, 0.48));
    backdrop-filter: blur(28px);
}

html[data-page-transition-preset="premium"] .app-page-transition-logo-card {
    box-shadow: 0 24px 60px color-mix(in srgb, var(--color-primary) 18%, rgba(15, 23, 42, 0.16));
}

html.dark .app-page-transition-logo-card {
    background: color-mix(in srgb, var(--color-card) 94%, rgba(8, 15, 28, 0.16));
    border-color: color-mix(in srgb, var(--color-border) 86%, transparent);
}

html.page-transition-reduced .app-page-transition,
html.page-transition-reduced .app-page-transition-ring {
    transition-duration: 0.14s !important;
    animation: none !important;
}

@keyframes bluezPageTransitionPulse {
    0% {
        transform: scale(0.92);
        opacity: 0.65;
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 18%, transparent);
    }
    70% {
        transform: scale(1.06);
        opacity: 1;
        box-shadow: 0 0 0 18px color-mix(in srgb, var(--color-primary) 0%, transparent);
    }
    100% {
        transform: scale(0.94);
        opacity: 0.78;
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent);
    }
}

* { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-secondary-light);
    color: var(--text-primary-light);
    min-height: 100vh;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark {
    background: var(--bg-secondary-dark);
    color: var(--text-primary-dark);
}

body.light {
    background: var(--bg-secondary-light);
    color: var(--text-primary-light);
}

.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: 
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1), transparent 50%),
        radial-gradient(circle at 80% 10%, rgba(34, 197, 94, 0.05), transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(245, 158, 11, 0.05), transparent 50%);
}

body.dark .bg {
    background: 
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.15), transparent 50%),
        radial-gradient(circle at 80% 10%, rgba(34, 197, 94, 0.08), transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(245, 158, 11, 0.08), transparent 50%);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin: var(--space-md) var(--space-lg) 0;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-2xl);
    background: var(--glass-light);
    border: 1px solid var(--glass-light-border);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.3s ease;
}

body.dark .topbar {
    background: var(--glass-dark);
    border-color: var(--glass-dark-border);
    box-shadow: var(--shadow-xl);
}

body.light .topbar.glass {
    background: rgba(255,255,255,0.40);
    border-color: rgba(255,255,255,0.64);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.brand-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.brand-logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.brand-logo:hover {
    transform: scale(1.05);
}

html.dark body.app-modern:not(.auth-login-page) .brand-logo {
    filter: brightness(0) invert(1);
}

html.dark body.app-modern:not(.auth-login-page) .brand-logo-mark {
    filter: none;
}

html.dark body.sidebar-collapsed.app-modern:not(.auth-login-page) .app-sidebar .brand-logo-mark {
    filter: brightness(0) invert(1);
}

.actions {
    margin-left: 0;
    margin-right: 0;
}

.nav a {
    color: var(--text-primary-light);
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    opacity: 0.9;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
}

body.dark .nav a {
    color: var(--text-primary-dark);
}

.nav a:hover { 
    opacity: 1;
    background: var(--bg-tertiary-light);
    transform: translateY(-1px);
}

body.dark .nav a:hover {
    background: var(--bg-tertiary-dark);
}

.app-nav {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding: var(--space-xs) 0;
    margin-left: auto;
    margin-right: var(--space-md);
    justify-content: flex-end;
}

.nav-ico { 
    font-size: 12px; 
    opacity: 0.8; 
}

.topbar .actions .btn {
    padding: var(--space-sm) var(--space-md);
    font-size: 13px;
    border-radius: var(--radius-lg);
    min-height: 32px;
    line-height: 1.15;
}

.container {
    padding: var(--space-xl);
    max-width: 1400px;
    margin: 0 auto;
}

@media (max-width: 720px) {
    .topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        margin: 8px 10px 0;
        padding: 10px 12px;
        gap: 10px;
        border-radius: 16px;
    }
    .topbar.glass { border-radius: 16px; }
    .brand-logo-wrap { margin-left: 6px; }
    .brand-logo { height: 36px; max-width: 146px; }
    .actions { display: none; }

    .container { padding: 10px; padding-bottom: 90px; }
    .card { padding: 12px; margin-bottom: 14px; }

    .app-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 12px;
        gap: 0;
        justify-content: space-between;
        background: rgba(10,10,20,0.9);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255,255,255,0.12);
        z-index: 50;
        margin-left: 0;
        margin-right: 0;
    }
    body.light .app-nav {
        background: rgba(255,255,255,0.92);
        border-top: 1px solid rgba(70,242,255,0.2);
    }
    .nav a {
        flex: 1;
        justify-content: center;
        gap: 6px;
        padding: 8px 6px;
        margin: 0;
        border-radius: 10px;
    }
    .nav a span:last-child { font-size: 12px; }
}

.glass {
    background: var(--glass-light);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.3s ease;
}

body.dark .glass {
    background: var(--glass-dark);
    border-color: var(--border-dark);
    box-shadow: var(--shadow-xl);
}

.card {
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    background: var(--bg-primary-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

body.dark .card {
    background: var(--bg-primary-dark);
    border-color: var(--border-dark);
    box-shadow: var(--shadow-lg);
}

/* Grid System */
.grid { 
    display: grid; 
    gap: var(--space-xl); 
}

.grid.two { 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
}

.grid.three { 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
}

.grid.four { 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
}

.grid.auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Flex Utilities */
.flex-row { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: var(--space-md); 
}

.flex-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-md);
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-md);
}

.hidden { display: none; }

@keyframes appFadeRise {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body.app-ui .btn,
body.app-ui .nav a,
body.app-ui .glass,
body.app-ui .card,
body.app-ui .status-bar {
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.42s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

body.app-ui .btn:hover {
    transform: translateY(-1px);
}

body.app-ui .nav a:hover {
    transform: translateY(-1px);
}

body.app-anim-ready .container > .card {
    animation: appFadeRise 0.56s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.app-anim-ready .container > .card:nth-of-type(2) { animation-delay: 0.06s; }
body.app-anim-ready .container > .card:nth-of-type(3) { animation-delay: 0.12s; }
body.app-anim-ready .container > .card:nth-of-type(4) { animation-delay: 0.18s; }

body.app-ui .app-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

body.app-ui .app-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    body.app-ui .btn,
    body.app-ui .nav a,
    body.app-ui .glass,
    body.app-ui .card,
    body.app-ui .status-bar,
    body.app-ui .app-reveal,
    .app-toast,
    .app-confirm-overlay,
    .app-confirm-card {
        transition: none !important;
        animation: none !important;
    }
}

.sheet-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.sheet-tabs { display: flex; gap: 8px; }
.tab-btn.active {
    background: var(--accent);
    color: #001018;
    border-color: transparent;
}

.sheet-wrap {
    overflow-x: auto;
}

.sheet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sheet-table th, .sheet-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    min-width: 120px;
}

.sheet-table td[contenteditable="true"]:focus {
    outline: none;
    border-radius: 6px;
    box-shadow: 0 0 14px rgba(70,242,255,0.45);
}

.sheet-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table th, table td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

@media (max-width: 720px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    table thead, table tbody {
        display: table;
        width: 100%;
    }
    table th, table td {
        white-space: nowrap;
        padding: 8px 10px;
        font-size: 13px;
    }
}

@keyframes glowStroke {
    0% { background-position: 0% 50%, 0 0; }
    100% { background-position: 300% 50%, 0 0; }
}

/* Modern Form Inputs */
input, select, textarea {
    width: 100%;
    padding: var(--space-md);
    margin: var(--space-xs) 0 var(--space-md);
    background: var(--bg-primary-light);
    color: var(--text-primary-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-family: var(--font-sans);
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

body.dark input,
body.dark select,
body.dark textarea {
    background: var(--bg-primary-dark);
    color: var(--text-primary-dark);
    border-color: var(--border-dark);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--shadow-md);
    transform: translateY(-1px);
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted-light);
}

body.dark input::placeholder,
body.dark textarea::placeholder {
    color: var(--text-muted-dark);
}

select option {
    background: var(--bg-primary-light);
    color: var(--text-primary-light);
}

body.dark select option {
    background: var(--bg-primary-dark);
    color: var(--text-primary-dark);
}

/* Modern Button System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    min-height: 44px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Button Variants */
.btn.primary {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--primary-600);
    box-shadow: var(--shadow);
}

.btn.primary:hover:not(:disabled) {
    background: var(--primary-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn.success {
    background: var(--gradient-success);
    color: white;
    border-color: var(--success-600);
    box-shadow: var(--shadow);
}

.btn.success:hover:not(:disabled) {
    background: var(--success-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn.danger {
    background: var(--gradient-danger);
    color: white;
    border-color: var(--danger-600);
    box-shadow: var(--shadow);
}

.btn.danger:hover:not(:disabled) {
    background: var(--danger-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn.warning {
    background: var(--gradient-warning);
    color: white;
    border-color: var(--warning-600);
    box-shadow: var(--shadow);
}

.btn.warning:hover:not(:disabled) {
    background: var(--warning-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn.neutral {
    background: var(--gradient-neutral);
    color: white;
    border-color: var(--neutral-600);
    box-shadow: var(--shadow);
}

.btn.neutral:hover:not(:disabled) {
    background: var(--neutral-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn.ghost {
    background: transparent;
    color: var(--text-primary-light);
    border-color: var(--border-light);
    box-shadow: none;
}

body.dark .btn.ghost {
    color: var(--text-primary-dark);
    border-color: var(--border-dark);
}

.btn.ghost:hover:not(:disabled) {
    background: var(--bg-tertiary-light);
    transform: translateY(-1px);
}

body.dark .btn.ghost:hover:not(:disabled) {
    background: var(--bg-tertiary-dark);
}

/* Button Sizes */
.btn.small {
    padding: var(--space-sm) var(--space-md);
    font-size: 12px;
    min-height: 32px;
}

.btn.tiny {
    padding: var(--space-xs) var(--space-sm);
    font-size: 11px;
    min-height: 24px;
}

.btn.large {
    padding: var(--space-lg) var(--space-2xl);
    font-size: 16px;
    min-height: 52px;
}

.icon-delete {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.06);
    color: #ff9aa2;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.icon-delete:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 0 12px rgba(255,154,162,0.45);
}

.to-delete {
    opacity: 0.55;
    text-decoration: line-through;
}

[data-stage-row].dragging {
    opacity: 0.6;
}

/* Chip/Badge System */
.chip-list {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin: var(--space-sm) 0 var(--space-md);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.chip.primary {
    background: var(--primary-100);
    color: var(--primary-800);
    border-color: var(--primary-200);
}

.chip.success {
    background: var(--success-100);
    color: var(--success-800);
    border-color: var(--success-200);
}

.chip.danger {
    background: var(--danger-100);
    color: var(--danger-800);
    border-color: var(--danger-200);
}

.chip.warning {
    background: var(--warning-100);
    color: var(--warning-800);
    border-color: var(--warning-200);
}

.chip.neutral {
    background: var(--neutral-100);
    color: var(--neutral-800);
    border-color: var(--neutral-200);
}

body.dark .chip {
    opacity: 0.9;
}

.chip-x {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-weight: 700;
    padding: var(--space-xs);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.chip-x:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Status Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.badge.active {
    background: var(--success-100);
    color: var(--success-800);
    border-color: var(--success-200);
}

.badge.new {
    background: var(--primary-100);
    color: var(--primary-800);
    border-color: var(--primary-200);
}

.badge.lost {
    background: var(--danger-100);
    color: var(--danger-800);
    border-color: var(--danger-200);
}

.badge.negotiation {
    background: var(--warning-100);
    color: var(--warning-800);
    border-color: var(--warning-200);
}

/* Score Badges */
.score-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.score-badge.cold {
    background: var(--primary-100);
    color: var(--primary-800);
    border: 1px solid var(--primary-200);
}

.score-badge.warm {
    background: var(--warning-100);
    color: var(--warning-800);
    border: 1px solid var(--warning-200);
}

.score-badge.hot {
    background: var(--danger-100);
    color: var(--danger-800);
    border: 1px solid var(--danger-200);
}

body.light .btn {
    background: rgba(255,255,255,0.9);
    color: var(--text-light);
    background-image:
        linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
        linear-gradient(120deg, rgba(70,242,255,0.75), rgba(120,255,180,0.75), rgba(255,120,200,0.75), rgba(70,242,255,0.75));
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    backdrop-filter: blur(10px);
}

body.light .btn.primary {
    background: rgba(255,255,255,0.95);
    color: #0b1220;
    border-color: rgba(70,242,255,0.45);
}

.btn.primary {
    background: var(--accent);
    color: #001018;
    border-color: transparent;
}

.btn.ghost { opacity: 0.85; }

/* Alert/Status System */
.alert {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    border: 1px solid;
    font-weight: 500;
}

.alert.success {
    background: var(--success-50);
    color: var(--success-800);
    border-color: var(--success-200);
}

.alert.error {
    background: var(--danger-50);
    color: var(--danger-800);
    border-color: var(--danger-200);
}

.alert.warning {
    background: var(--warning-50);
    color: var(--warning-800);
    border-color: var(--warning-200);
}

.alert.info {
    background: var(--primary-50);
    color: var(--primary-800);
    border-color: var(--primary-200);
}

.status-bar {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid;
}

.status-bar.success { 
    background: var(--success-50); 
    color: var(--success-800); 
    border-color: var(--success-200); 
}

.status-bar.error { 
    background: var(--danger-50); 
    color: var(--danger-800); 
    border-color: var(--danger-200); 
}

.status-bar.warn { 
    background: var(--warning-50); 
    color: var(--warning-800); 
    border-color: var(--warning-200); 
}

.big-number {
    font-size: 48px;
    margin: 0;
}

.insights-hero {
    border: 1px solid rgba(32, 215, 255, 0.35);
    background:
        linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)),
        linear-gradient(120deg, rgba(32,215,255,0.25), rgba(120,255,180,0.2), rgba(255,180,120,0.2));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.insights-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.insight-item {
    border: 1px solid rgba(32, 215, 255, 0.28);
    border-radius: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.75);
}

.insight-label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.insight-value {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.insights-list-wrap h3 {
    margin: 0 0 8px;
}

.dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 30px;
    align-items: start;
}

.lead-score-strip {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.lead-score-number {
    font-size: 52px;
    line-height: 1;
    margin: 8px 0;
}

.lead-score-label {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
}

.lead-score-label.cold { color: #1857e4; }
.lead-score-label.warm { color: #df6b10; }
.lead-score-label.hot { color: #d42525; }

.scoring-settings-wrap {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.scoring-settings-center {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.muted { opacity: 0.75; }

.status-bar {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.06);
}

.status-bar.success { color: #7bffd4; border-color: rgba(123,255,212,0.45); }
.status-bar.error { color: #0b1220; border-color: rgba(255,143,176,0.45); }
.status-bar.warn { color: #0b1220; border-color: rgba(255,214,153,0.45); }

.app-toast-stack {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.app-toast {
    min-width: 220px;
    max-width: min(440px, calc(100vw - 28px));
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid rgba(86, 53, 151, 0.26);
    border-left: 3px solid #5e3f9c;
    background: rgba(255,255,255,0.95);
    color: #341b67;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 16px 36px rgba(40, 22, 77, 0.18);
    opacity: 0;
    transform: translateY(11px);
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.app-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.app-toast.fade {
    opacity: 0;
    transform: translateY(10px);
}

.app-toast.error {
    border-left-color: #7a3fb7;
    color: #2d145e;
}

.app-toast.warn {
    border-left-color: #7f4db5;
    color: #382065;
}

.app-toast.success {
    border-left-color: #5e3f9c;
    color: #30175d;
}

.app-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 14px;
    background: rgba(25, 15, 44, 0.18);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.app-confirm-overlay.show {
    opacity: 1;
}

.app-confirm-overlay.fade {
    opacity: 0;
}

.app-confirm-card {
    width: min(420px, calc(100vw - 28px));
    border-radius: 12px;
    border: 1px solid rgba(93, 63, 157, 0.28);
    border-left: 3px solid #5e3f9c;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 18px 42px rgba(40, 22, 77, 0.22);
    color: #311a63;
    padding: 12px;
    transform: translateY(12px);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.app-confirm-overlay.show .app-confirm-card {
    transform: translateY(0);
}

.app-confirm-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
}

.app-confirm-message {
    font-size: 13px;
    color: #3e296f;
    margin-bottom: 10px;
    white-space: pre-wrap;
}

.app-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.app-confirm-input {
    width: 100%;
    height: 38px;
    border: 1px solid #d0d8ea;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    color: #1f2a44;
    background: #fff;
    margin-bottom: 10px;
}

.app-confirm-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

@media (max-width: 720px) {
    .app-toast-stack {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .app-toast {
        max-width: none;
        width: 100%;
    }

    .app-confirm-overlay {
        padding: 10px;
    }

    .app-confirm-card {
        width: 100%;
    }
}

.settings-feature {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(70, 242, 255, 0.35);
    background:
        linear-gradient(rgba(255,255,255,0.86), rgba(255,255,255,0.86)),
        linear-gradient(120deg, rgba(70,242,255,0.30), rgba(120,255,180,0.26), rgba(255,120,200,0.24));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.settings-feature label {
    font-weight: 700;
}

.settings-copy-status {
    font-size: 13px;
    font-weight: 600;
}

/* Settings page layout (UI only, keep backend form names/logic unchanged) */
.settings-page {
    max-width: 1200px;
    margin: 0 auto;
    --settings-gap: 18px;
}

.settings-page .card {
    margin-bottom: 0; /* grid gap controls spacing */
}

.settings-ui .bg {
    background:
        radial-gradient(circle at 18% 18%, rgba(59, 107, 255, 0.16), transparent 55%),
        radial-gradient(circle at 82% 22%, rgba(14, 165, 233, 0.14), transparent 55%),
        radial-gradient(circle at 50% 85%, rgba(168, 85, 247, 0.1), transparent 55%),
        linear-gradient(#f4f7fb, #f4f7fb);
}

.settings-page .glass {
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(197, 214, 235, 0.82);
    box-shadow: 0 14px 36px rgba(15, 35, 55, 0.09), 0 10px 22px rgba(59, 107, 255, 0.04);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.settings-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.settings-title {
    margin: 0;
    font-size: 26px;
    letter-spacing: -0.02em;
}

.settings-hero {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: var(--settings-gap);
    border-radius: 18px;
    border-color: rgba(59, 107, 255, 0.16);
    background:
        radial-gradient(circle at top right, rgba(59, 107, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(250, 252, 255, 0.96), rgba(240, 246, 255, 0.92));
    box-shadow: 0 18px 38px rgba(15, 35, 55, 0.10), 0 10px 22px rgba(59, 107, 255, 0.05);
}

.settings-hero-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.settings-hero-metric {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(59, 107, 255, 0.1);
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.92), rgba(255, 255, 255, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.settings-hero-metric:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 35, 55, 0.10);
    border-color: rgba(59, 107, 255, 0.16);
}

.settings-hero-metric::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 999px;
    background: #3b6bff;
}

.settings-hero-metric span {
    display: block;
    margin-bottom: 6px;
    color: #66788f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.settings-hero-metric strong {
    display: block;
    color: #132238;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.settings-hero-metric.tone-timezone::before { background: #3b82f6; }
.settings-hero-metric.tone-rate::before { background: #0ea5e9; }
.settings-hero-metric.tone-capi::before { background: #2563eb; }
.settings-hero-metric.tone-alerts::before { background: #8b5cf6; }
.settings-hero-metric.tone-scoring::before { background: #10b981; }

.settings-hero-metric.tone-timezone strong { color: #1d4ed8; }
.settings-hero-metric.tone-rate strong { color: #0369a1; }
.settings-hero-metric.tone-capi strong { color: #1d4ed8; }
.settings-hero-metric.tone-alerts strong { color: #7c3aed; }
.settings-hero-metric.tone-scoring strong { color: #059669; }

.settings-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-section-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(59, 107, 255, 0.12);
    background: rgba(243, 247, 255, 0.94);
    color: #35526f;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.settings-section-link:hover {
    color: #1f4fbf;
    border-color: rgba(59, 107, 255, 0.18);
    background: rgba(231, 239, 255, 0.98);
    transform: translateY(-1px);
}

.settings-section-link.is-active {
    color: #1f4fbf;
    border-color: rgba(59, 107, 255, 0.22);
    background: rgba(231, 239, 255, 0.98);
    box-shadow: 0 8px 18px rgba(59, 107, 255, 0.12);
}

.settings-section-link:nth-child(1) { color: #1d4ed8; }
.settings-section-link:nth-child(2) { color: #c2410c; }
.settings-section-link:nth-child(3) { color: #0f766e; }
.settings-section-link:nth-child(4) { color: #7c3aed; }
.settings-section-link:nth-child(5) { color: #b45309; }

#settingsCore,
#settingsCapi,
#settingsAccess,
#notificationChannelsCard,
#settingsAutomation {
    scroll-margin-top: 96px;
}

.settings-top-grid {
    position: relative;
    z-index: 30; /* keep timezone dropdown above following grids */
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: var(--settings-gap);
    margin-bottom: var(--settings-gap);
}

.settings-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--settings-gap);
    align-items: stretch; /* same height cards per row */
    margin-bottom: var(--settings-gap);
}

.settings-stack {
    display: grid;
    gap: var(--settings-gap);
}

.settings-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.settings-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: rgba(59, 107, 255, 0.18);
}

.settings-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgba(15, 35, 55, 0.11), 0 12px 24px rgba(59, 107, 255, 0.06);
    border-color: rgba(59, 107, 255, 0.18);
}

.settings-tone-core::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.settings-tone-rate::before { background: linear-gradient(90deg, #0891b2, #22d3ee); }
.settings-tone-timezone::before { background: linear-gradient(90deg, #4338ca, #818cf8); }
.settings-tone-window::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.settings-tone-capi::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.settings-tone-access::before { background: linear-gradient(90deg, #0f766e, #2dd4bf); }
.settings-tone-webhook::before { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.settings-tone-scoring::before { background: linear-gradient(90deg, #059669, #34d399); }
.settings-tone-inputs::before { background: linear-gradient(90deg, #3b82f6, #22c55e); }
.settings-tone-alerts::before { background: linear-gradient(90deg, #7c3aed, #a855f7); }
.settings-tone-automation::before { background: linear-gradient(90deg, #d97706, #f59e0b); }
.settings-tone-status::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.settings-tone-email::before { background: linear-gradient(90deg, #ec4899, #fb7185); }
.settings-tone-password::before { background: linear-gradient(90deg, #ef4444, #f97316); }

.settings-tone-core,
.settings-tone-rate,
.settings-tone-timezone,
.settings-tone-window,
.settings-tone-capi,
.settings-tone-access,
.settings-tone-webhook,
.settings-tone-scoring,
.settings-tone-inputs,
.settings-tone-alerts,
.settings-tone-automation,
.settings-tone-status,
.settings-tone-email,
.settings-tone-password {
    background-image:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.72), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,255,0.84));
}

.settings-tone-capi {
    background-image:
        radial-gradient(circle at top right, rgba(219, 234, 254, 0.82), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(239,246,255,0.9));
}

.settings-tone-alerts {
    background-image:
        radial-gradient(circle at top right, rgba(243, 232, 255, 0.8), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(251,245,255,0.88));
}

.settings-tone-automation {
    background-image:
        radial-gradient(circle at top right, rgba(254, 243, 199, 0.84), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,250,235,0.88));
}

.settings-card h3.settings-block-title {
    margin: 2px 0 10px;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: #132238;
}

.settings-card label {
    display: block;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 0.92;
    margin-top: 2px;
}

/* Make settings inputs look like the provided light UI (override global animated inputs) */
.settings-page input,
.settings-page select,
.settings-page textarea {
    animation: none;
    background-image: none !important;
    background: rgba(255,255,255,0.60);
    color: #0b1220;
    border: 1px solid #DDE3EA; /* cool neutral soft border */
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(15, 35, 55, 0.08);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.settings-page input:focus,
.settings-page select:focus,
.settings-page textarea:focus {
    box-shadow: 0 0 0 2px rgba(120, 160, 190, 0.20), 0 10px 24px rgba(15, 35, 55, 0.10);
}

.settings-page select option {
    background: #ffffff;
    color: #0b1220;
}

.settings-page input::placeholder,
.settings-page textarea::placeholder {
    color: rgba(11, 18, 32, 0.55);
}

.settings-page .muted {
    color: rgba(11, 18, 32, 0.62);
    opacity: 1;
}

.settings-page .btn {
    animation: none;
    background-image: none !important;
    background: rgba(255,255,255,0.72);
    border: 1px solid #DDE3EA;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(15, 35, 55, 0.10);
    color: #0b1220;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.settings-page .btn.primary {
    background: linear-gradient(180deg, #3b6bff, #2956d7);
    border-color: rgba(37, 99, 235, 0.55);
    color: #ffffff;
}

.settings-page .btn.primary:hover {
    color: #ffffff;
    background: linear-gradient(180deg, #3261f2, #214cc8);
}

.settings-page .btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 35, 55, 0.12);
}

.settings-mini {
    padding: 16px;
}

.settings-window-card {
    margin-top: 0;
    margin-bottom: var(--settings-gap) !important;
    padding: 8px 14px !important;
}

.settings-window-card .settings-block-title {
    margin: 0 0 2px !important;
    line-height: 1.15;
}

.settings-window-toggle {
    margin: 0;
    font-weight: 600;
    align-self: center;
}

.settings-window-toggle span {
    font-size: 12px;
    line-height: 1.2;
}

.settings-window-row {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: 4px 10px;
    align-items: center;
}

.settings-window-card .settings-toggle-line {
    margin: 0 !important;
}

.settings-window-card .settings-toggle-line input[type="checkbox"] {
    width: 15px;
    height: 15px;
}

.settings-window-field label {
    margin: 0 !important;
    font-size: 11px;
    line-height: 1.1;
}

.settings-window-field select {
    margin: 0 !important;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 13px;
}

.settings-window-note {
    font-size: 10px;
    line-height: 1.2;
    padding-bottom: 0;
    margin: 0;
}

/* Keep section spacing symmetric around Follow-up Trigger block */
.settings-window-card + .settings-two-col {
    margin-top: 0 !important;
}

.settings-inline,
.settings-inline-two,
.settings-inline-save {
    display: grid;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}

.settings-inline {
    grid-template-columns: 1fr auto;
}

.settings-inline-save {
    grid-template-columns: 1fr auto;
    margin-bottom: 14px;
}

.settings-inline-two {
    grid-template-columns: 1fr 1fr;
}

.settings-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 4px 18px;
    margin: 4px 0 12px;
}

.settings-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 26px;
}

.settings-status-item span {
    color: #1f2937;
    font-weight: 600;
    font-size: 14px;
}

.settings-status-item .icon-delete {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    border: none;
    background: transparent;
    box-shadow: none;
    color: #f17d89;
}

.settings-status-item .icon-delete:hover {
    transform: none;
    box-shadow: none;
    color: #dc5f6f;
}

.settings-status-create {
    margin-top: 6px;
}

.settings-status-label {
    display: block;
    margin-bottom: 4px;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 10px;
}

body.settings-ui .settings-inline-save .btn,
body.settings-ui .settings-inline .btn,
body.settings-ui .settings-actions .btn,
body.settings-ui .settings-capi-actions .btn,
body.settings-ui .settings-capi-warning-actions .btn {
    min-height: 40px;
    padding-left: 14px;
    padding-right: 14px;
}

/* Lead inactivity scoring box visuals (no logic) */
.settings-scoring-summary {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 14px;
    align-items: center;
}

.settings-scoring-metric {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(70, 242, 255, 0.25);
    background: rgba(255,255,255,0.70);
}

.settings-metric-value {
    font-size: 44px;
    line-height: 1;
    font-weight: 800;
    margin: 0 0 6px;
}

.settings-toggle-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 8px;
    font-weight: 700;
}

.settings-toggle-line input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Timezone picker should resemble a dropdown select */
.tz-picker {
    position: relative;
    z-index: 80;
}

.tz-picker input#tzDisplay {
    cursor: pointer;
    padding-right: 34px;
    background-image: none;
    background:
      rgba(255,255,255,0.60)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b1220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
      no-repeat right 12px center;
}

.tz-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow: auto;
    border-radius: 14px;
    padding: 6px;
    z-index: 9999; /* stay above lower cards (different stacking contexts) */
}

body.settings-ui .settings-timezone-card,
body.settings-ui .settings-top-grid,
body.settings-ui .settings-timezone-card .tz-picker {
    overflow: visible;
}

body.settings-ui .settings-timezone-card {
    position: relative;
    z-index: 120;
}

.tz-item {
    padding: 10px 10px;
    border-radius: 10px;
}

@media (max-width: 960px) {
    .settings-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-top-grid {
        grid-template-columns: 1fr;
    }
    .settings-two-col {
        grid-template-columns: 1fr;
    }
    .settings-inline-two {
        grid-template-columns: 1fr;
    }
    .settings-scoring-summary {
        grid-template-columns: 1fr;
    }
    .settings-status-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
    .settings-window-row {
        grid-template-columns: 1fr 1fr;
    }
    .settings-window-note {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .settings-hero {
        padding: 14px;
    }

    .settings-hero-metrics {
        grid-template-columns: 1fr;
    }

    .settings-window-row {
        grid-template-columns: 1fr;
    }
    .settings-window-note {
        grid-column: auto;
    }
}

.tz-picker input#tzDisplay {
    cursor: pointer;
}

.tz-menu {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 22px 70px rgba(0,0,0,0.18);
    color: #0b1220;
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.tz-item {
    color: #0b1220;
    user-select: none;
    transition: background-color 0.12s ease, transform 0.12s ease;
}

.tz-item:hover {
    background: rgba(70,242,255,0.14) !important;
    transform: translateY(-1px);
}

.tz-item:active {
    transform: translateY(0);
}

.tz-menu .muted {
    color: rgba(11, 18, 32, 0.72);
}

.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    z-index: 50;
}

/* Ensure utility hidden always wins for modal containers */
.modal.hidden {
    display: none !important;
}

.modal-card {
    width: min(420px, 92vw);
    padding: 18px;
    border-radius: 14px;
    background: var(--glass-dark);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

body.light .modal-card {
    background: var(--glass-light);
}

.lead-modal-card {
    width: min(1080px, 97vw);
    max-height: 92vh;
    overflow: auto;
    padding: 16px;
    background:
        radial-gradient(circle at top right, rgba(59, 107, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.94)) !important;
    border: 1px solid rgba(96, 165, 250, 0.18);
    color: #0b1220;
    box-shadow: 0 28px 60px rgba(15, 35, 55, 0.18), 0 12px 28px rgba(59, 107, 255, 0.10);
}

.lead-modal-card .btn {
    color: #0b1220;
}

.lead-modal-card .btn.primary,
body.conv-settings .lead-modal-card .btn.primary {
    background: linear-gradient(180deg, #3b6bff, #2956d7) !important;
    border: 1px solid rgba(37, 99, 235, 0.55) !important;
    color: #ffffff !important;
    text-shadow: none !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

.lead-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(59, 107, 255, 0.12);
}

.lead-modal-head h3 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -0.03em;
    color: #132238;
}

.lead-modal-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lead-modal-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lead-modal-section-core,
.lead-modal-section-followup,
.lead-modal-section-meta,
.lead-modal-section-conv,
.lead-modal-section-merge {
    grid-column: 1 / -1;
}

.lead-modal-section {
    position: relative;
    border: 1px solid #DDE3EA;
    border-radius: 16px;
    padding: 12px;
    background: rgba(255,255,255,0.82);
    box-shadow: 0 10px 22px rgba(15, 35, 55, 0.08);
}

.lead-modal-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 16px 0 0 16px;
    background: rgba(59, 107, 255, 0.2);
}

.lead-modal-section-core::before { background: linear-gradient(180deg, #3b82f6, #60a5fa); }
.lead-modal-section-followup::before { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
.lead-modal-section-meta::before { background: linear-gradient(180deg, #8b5cf6, #c084fc); }
.lead-modal-section-conv::before { background: linear-gradient(180deg, #14b8a6, #2dd4bf); }
.lead-modal-section-merge::before { background: linear-gradient(180deg, #f43f5e, #fb7185); }

.lead-modal-section-core {
    background:
        radial-gradient(circle at top right, rgba(219, 234, 254, 0.85), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,249,255,0.9));
}

.lead-modal-section-followup {
    background:
        radial-gradient(circle at top right, rgba(254, 243, 199, 0.88), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,250,235,0.9));
}

.lead-modal-section-meta {
    background:
        radial-gradient(circle at top right, rgba(237, 233, 254, 0.9), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,245,255,0.92));
}

.lead-modal-section-conv {
    background:
        radial-gradient(circle at top right, rgba(204, 251, 241, 0.92), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,253,250,0.92));
}

.lead-modal-section-merge {
    margin-top: 2px;
    background:
        radial-gradient(circle at top right, rgba(255, 228, 230, 0.9), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,241,242,0.92));
}

.lead-modal-section-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.lead-modal-section-head h4 {
    margin: 0;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: #132238;
    line-height: 1.1;
}

.lead-modal-section-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lead-modal-section-kicker.tone-blue {
    color: #1d4ed8;
    background: rgba(219, 234, 254, 0.92);
    border-color: rgba(96, 165, 250, 0.28);
}

.lead-modal-section-kicker.tone-amber {
    color: #b45309;
    background: rgba(254, 243, 199, 0.94);
    border-color: rgba(251, 191, 36, 0.32);
}

.lead-modal-section-kicker.tone-violet {
    color: #7c3aed;
    background: rgba(237, 233, 254, 0.94);
    border-color: rgba(167, 139, 250, 0.32);
}

.lead-modal-section-kicker.tone-teal {
    color: #0f766e;
    background: rgba(204, 251, 241, 0.94);
    border-color: rgba(45, 212, 191, 0.3);
}

.lead-modal-section-kicker.tone-rose {
    color: #e11d48;
    background: rgba(255, 228, 230, 0.94);
    border-color: rgba(251, 113, 133, 0.32);
}

.lead-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 8px 12px;
}

.lead-modal-pause-row {
    margin-top: 4px;
    display: grid;
    grid-template-columns: 160px minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 8px 10px;
    align-items: end;
}

.lead-modal-pause-toggle {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
}

.lead-modal-pause-datetime {
    display: grid;
    grid-template-columns: minmax(132px, 1fr) minmax(110px, 1fr);
    gap: 8px;
}

.lead-modal-note-wrap {
    margin-top: 8px;
}

.lead-modal-note-wrap textarea {
    min-height: 74px;
}

.lead-modal-meta {
    margin-top: 0;
    border: 1px solid rgba(167, 139, 250, 0.18);
    border-radius: 14px;
    background: rgba(255,255,255,0.76);
    padding: 8px 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 4px 12px;
}

.lead-modal-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.lead-modal-meta-row:last-child,
.lead-modal-meta-row:nth-last-child(2),
.lead-modal-meta-row:nth-last-child(3) {
    border-bottom: none;
}

.lead-modal-meta-row span {
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lead-modal-meta-row strong {
    color: #0f172a;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.lead-modal-meta-row:nth-child(1) strong,
.lead-modal-meta-row:nth-child(2) strong,
.lead-modal-meta-row:nth-child(3) strong {
    color: #2563eb;
}

.lead-modal-meta-row:nth-child(4) strong,
.lead-modal-meta-row:nth-child(9) strong {
    color: #7c3aed;
}

.lead-modal-meta-row:nth-child(5) strong,
.lead-modal-meta-row:nth-child(6) strong,
.lead-modal-meta-row:nth-child(7) strong {
    color: #0f766e;
}

.lead-modal-meta-row:nth-child(8) strong {
    color: #dc2626;
}

.lead-modal-conv-wrap {
    margin-top: 0;
}

.lead-modal-conv {
    max-height: 228px;
    overflow: auto;
    border: 1px solid rgba(45, 212, 191, 0.18);
    border-radius: 14px;
    background: rgba(255,255,255,0.84);
    padding: 8px;
    font-size: 12px;
}

.lead-modal-conv-item {
    display: grid;
    grid-template-columns: 34px 132px 1fr;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 12px;
    background: rgba(255,255,255,0.84);
    margin-bottom: 6px;
}

.lead-modal-conv-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.lead-modal-conv-dir {
    display: inline-block;
    border-radius: 999px;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
    padding: 3px 6px;
}

.lead-modal-conv-dir.in {
    color: #166534;
    background: rgba(22,101,52,0.12);
}

.lead-modal-conv-dir.out {
    color: #1d4ed8;
    background: rgba(29,78,216,0.12);
}

.lead-modal-conv-time {
    color: #4f46e5;
    font-weight: 700;
}

.lead-modal-conv-msg {
    color: #0f172a;
    line-height: 1.45;
    word-break: break-word;
}

.lead-modal-conv-item:nth-child(odd) {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255,255,255,0.9));
}

.lead-modal-conv-item:nth-child(even) {
    background: linear-gradient(180deg, rgba(245, 243, 255, 0.96), rgba(255,255,255,0.9));
}

.lead-modal-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.lead-modal-merge-form {
    margin-top: 0;
}

.lead-modal-merge-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.lead-modal-section-merge .btn.ghost {
    background: linear-gradient(180deg, #fff1f2, #ffe4e6);
    border-color: rgba(251, 113, 133, 0.32);
    color: #be123c;
}

.conv-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}
.conv-table th, .conv-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.lead-row {
    cursor: pointer;
}
.gradient-stroke {
    background-image:
        linear-gradient(rgba(255,255,255,1), rgba(255,255,255,1)),
        linear-gradient(120deg, rgba(70,242,255,0.35), rgba(120,255,180,0.35), rgba(255,120,200,0.35), rgba(70,242,255,0.35));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
}
.conv-row td { padding: 0; }
.conv-panel {
    margin: 10px 0;
    padding: 12px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
}
.conv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.conv-nested th, .conv-nested td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
.dir-badge {
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid rgba(255,255,255,0.2);
}
.dir-badge.in { color: #38c172; border-color: rgba(56,193,114,0.5); }
.dir-badge.out { color: #6cb2eb; border-color: rgba(108,178,235,0.5); }
.platform-ico {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    margin-right: 6px;
    font-size: 11px;
}
.status-badge {
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    text-transform: capitalize;
}
.status-badge.lost { color: #c82828; border-color: rgba(200,40,40,0.5); }
.status-badge.converted { color: #1f9a4a; border-color: rgba(40,160,80,0.5); }
.status-badge.active { color: #2fb8c8; border-color: rgba(70,242,255,0.5); }
.status-badge.new { color: #c27a00; border-color: rgba(255,214,153,0.5); }
.filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}
.counter-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
}
.lead-cell {
    vertical-align: middle;
}
.lead-cell-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
}
.lead-main { display: flex; flex-direction: column; gap: 2px; }
.lead-sub { font-size: 12px; opacity: 0.7; }
.info-dot {
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 11px;
    flex-shrink: 0;
}
.expand-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
}
.btn.small { padding: 6px 10px; }
.btn.tiny { padding: 4px 8px; font-size: 12px; }
.btn.danger { border-color: rgba(255,120,120,0.5); color: #ff8a8a; }

.score-badge {
    display: inline-block;
    min-width: 44px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.2);
}
.score-badge.cold {
    color: #1e58d6;
    border-color: rgba(30,88,214,0.35);
    background: rgba(30,88,214,0.08);
}
.score-badge.warm {
    color: #d06a12;
    border-color: rgba(208,106,18,0.35);
    background: rgba(208,106,18,0.08);
}
.score-badge.hot {
    color: #c92b2b;
    border-color: rgba(201,43,43,0.35);
    background: rgba(201,43,43,0.08);
}

.ai-followup-pill {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.2);
}
.ai-followup-pill.yes {
    color: #1a7b46;
    border-color: rgba(26,123,70,0.35);
    background: rgba(26,123,70,0.08);
}
.ai-followup-pill.no {
    color: #7b6c1a;
    border-color: rgba(123,108,26,0.35);
    background: rgba(123,108,26,0.08);
}

.followup-cell {
    text-align: center;
}

.followup-cell-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: max-content;
    max-width: 100%;
}

.followup-cell-stack .ai-followup-pill {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

.followup-stage-flow {
    margin-top: 6px;
    display: block;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flow-current {
    color: #1f2937;
    font-weight: 600;
}

.flow-next {
    color: #111827;
    font-weight: 600;
}

.flow-sep {
    color: #334155;
    font-weight: 700;
    padding: 0 6px;
}

.lead-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.leads-ui .leads-page {
    display: grid;
    gap: 14px;
}

body.leads-ui .leads-page > .card {
    margin-bottom: 0;
}

body.leads-ui .leads-overview-card,
body.leads-ui .leads-filters-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(59, 107, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.9));
    border-color: rgba(59, 107, 255, 0.12);
}

body.leads-ui .leads-filters-card {
    background:
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,247,255,0.9));
}

body.leads-ui .leads-section-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

body.leads-ui .leads-section-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

body.leads-ui .leads-section-chip.tone-blue {
    color: #1d4ed8;
    background: rgba(219, 234, 254, 0.9);
    border-color: rgba(96, 165, 250, 0.3);
}

body.leads-ui .leads-section-chip.tone-teal {
    color: #0f766e;
    background: rgba(204, 251, 241, 0.9);
    border-color: rgba(45, 212, 191, 0.3);
}

body.leads-ui .leads-section-chip.tone-amber {
    color: #b45309;
    background: rgba(254, 243, 199, 0.92);
    border-color: rgba(251, 191, 36, 0.32);
}

body.leads-ui .leads-section-chip.tone-violet {
    color: #7c3aed;
    background: rgba(237, 233, 254, 0.92);
    border-color: rgba(167, 139, 250, 0.32);
}

body.leads-ui .leads-overview-row,
body.leads-ui .leads-filter-title-row {
    align-items: flex-end;
}

body.leads-ui .leads-overview-row h2,
body.leads-ui .leads-filter-title-row h2 {
    margin: 0;
    color: #132238;
    font-size: 24px;
    letter-spacing: -0.03em;
}

body.leads-ui .leads-filter-form {
    margin-top: 12px;
    margin-bottom: 0;
    display: grid;
    gap: 12px;
}

body.leads-ui .leads-search-row,
body.leads-ui .leads-search-row .input {
    width: 100%;
}

body.leads-ui .leads-search-row .input {
    min-height: 46px;
    background: rgba(255,255,255,0.88);
    border-color: rgba(96, 165, 250, 0.26);
}

body.leads-ui .leads-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.leads-ui .leads-filter-grid .input {
    margin-bottom: 0;
    background: rgba(255,255,255,0.82);
}

body.leads-ui .leads-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.leads-ui .leads-filter-actions .btn {
    min-width: 108px;
}

body.leads-ui .leads-filters-card .btn {
    background: rgba(255,255,255,0.86);
    border-color: rgba(196, 181, 253, 0.42);
}

body.leads-ui .leads-filters-card .btn:hover {
    background: rgba(255,255,255,0.98);
}

@media (max-width: 960px) {
    body.leads-ui .leads-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.leads-ui .leads-overview-card,
    body.leads-ui .leads-filters-card {
        padding: 14px;
    }

    body.leads-ui .leads-overview-row h2,
    body.leads-ui .leads-filter-title-row h2 {
        font-size: 20px;
    }

    body.leads-ui .leads-filter-grid {
        grid-template-columns: 1fr;
    }

    body.leads-ui .leads-filter-actions .btn {
        flex: 1 1 0;
    }
}

/* Conversations rebuild */
.conv-hero {
    position: relative;
    overflow: hidden;
}
.conv-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(70, 242, 255, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(70, 242, 255, 0.09) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.conv-head {
    position: relative;
    z-index: 1;
}
.conv-shell {
    position: relative;
    overflow: hidden;
}
.conv-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(70,242,255,0.06), rgba(255,120,200,0.04), rgba(120,255,180,0.06));
}
.conv-toolbar {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
}
.conv-table {
    position: relative;
    z-index: 1;
    border-radius: 12px;
    overflow: hidden;
}
.conv-table th {
    background: rgba(255,255,255,0.95);
    font-weight: 700;
}
.conv-row > td {
    background: rgba(247, 253, 255, 0.94);
    transition: all .22s ease;
}
.conv-panel {
    background: rgba(255,255,255,0.92);
    border-left: 3px solid rgba(70,242,255,0.55);
}
.expand-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(70,242,255,0.45);
    color: #0b1220;
    transition: transform .18s ease, box-shadow .18s ease;
}
.expand-btn.open {
    transform: rotate(90deg);
}
.expand-btn:hover {
    box-shadow: 0 0 10px rgba(70,242,255,0.45);
}
.expand-fallback {
    font-size: 11px;
    margin-left: 6px;
    color: #0d8ec6;
    text-decoration: none;
}
html.js .expand-fallback {
    display: none;
}
.actions-cell .btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.actions-cell .btn i {
    width: 14px;
    height: 14px;
}
.btn.danger i,
.msg-delete-selected i,
.conv-nested .btn i {
    width: 14px;
    height: 14px;
}
.btn.danger {
    box-shadow: 0 0 10px rgba(255,120,120,0.28);
}
.view-lead i,
.actions-cell .btn i[data-lucide="eye"] {
    color: #20d7ff;
    filter: drop-shadow(0 0 4px rgba(32, 215, 255, 0.65));
}
.platform-cell {
    white-space: nowrap;
}
.platform-ico {
    background: rgba(70,242,255,0.12);
    border-color: rgba(70,242,255,0.45);
}
.conv-nested {
    background: rgba(255,255,255,0.95);
    border-radius: 10px;
    overflow: hidden;
}
.conv-nested thead th {
    background: rgba(240, 251, 255, 0.96);
}
.dir-badge.incoming {
    color: #178f4e;
    border-color: rgba(23,143,78,0.4);
    background: rgba(23,143,78,0.08);
}
.dir-badge.outgoing {
    color: #1478b6;
    border-color: rgba(20,120,182,0.35);
    background: rgba(20,120,182,0.08);
}
.msg-cell {
    max-width: 640px;
    word-break: break-word;
}
.msg-details summary {
    cursor: pointer;
    list-style: none;
}
.msg-details summary::-webkit-details-marker {
    display: none;
}
.read-more {
    color: #0d8ec6;
    font-size: 12px;
}
.conv-footer {
    margin-top: 10px;
}

@media (max-width: 960px) {
    .insights-metrics {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
    .actions-cell .btn {
        margin-bottom: 6px;
    }
    .msg-cell {
        max-width: 320px;
    }
    .dashboard-summary-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .lead-score-number {
        font-size: 40px;
    }
    .scoring-settings-wrap {
        grid-template-columns: 1fr;
    }
}

/* Conversations page: settings-like neutral theme (UI only) */
body.conv-settings .bg {
    background:
        radial-gradient(circle at 18% 18%, rgba(120, 150, 180, 0.14), transparent 55%),
        radial-gradient(circle at 82% 22%, rgba(170, 190, 210, 0.12), transparent 55%),
        radial-gradient(circle at 50% 85%, rgba(135, 170, 200, 0.10), transparent 55%),
        linear-gradient(#f4f7fb, #f4f7fb);
}

body.conv-settings .glass {
    background: rgba(255,255,255,0.60);
    border: 1px solid #DDE3EA;
    box-shadow: 0 12px 30px rgba(15, 35, 55, 0.10);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

body.conv-settings .conv-hero::before,
body.conv-settings .conv-shell::after {
    content: none;
}

body.conv-settings .conv-head {
    align-items: center;
    margin-bottom: 10px;
}

body.conv-settings .conv-head h2 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: #2d3345;
}

body.conv-settings .counter-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: rgba(45, 51, 69, 0.82);
    font-size: 14px;
    letter-spacing: -0.01em;
}

body.conv-settings .counter-inline strong {
    color: #2d3345;
    font-weight: 700;
}

body.conv-settings #cntTotal {
    color: #1e3a8a;
}

body.conv-settings #cntUnread {
    color: #7f1d1d;
}

body.conv-settings #cntToday {
    color: #14532d;
}

body.conv-settings .counter-inline span + span {
    position: relative;
    padding-left: 18px;
}

body.conv-settings .counter-inline span + span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 22px;
    transform: translateY(-50%);
    background: rgba(45, 51, 69, 0.2);
}

body.conv-settings .conv-filter-form {
    margin-top: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

body.conv-settings .conv-filter-search-row {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
}

body.conv-settings .conv-filter-grid {
    grid-column: 1 / -1;
    justify-self: stretch;
    display: grid;
    grid-template-columns: minmax(120px, 1.15fr) minmax(120px, 1.15fr) minmax(96px, 0.82fr) minmax(96px, 0.82fr) minmax(128px, 1.1fr) minmax(150px, 1.35fr);
    gap: 10px 12px;
    width: 100%;
}

body.conv-settings .conv-filter-item {
    min-width: 0;
}

@media (min-width: 1024px) {
    body.page-leads.app-modern .app-container.with-sidebar {
        margin-left: 240px;
        width: calc(100% - 250px);
        padding-left: 10px;
        padding-right: 10px;
    }
}

body.conv-settings .conv-filter-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body.conv-settings #leadSearch {
    display: block;
    width: 100%;
    margin: 0;
    background: rgba(255,255,255,0.92);
    border-color: rgba(96, 165, 250, 0.28);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
}

body.conv-settings #filterApplyBtn {
    background: linear-gradient(180deg, #3b6bff, #2956d7);
    border-color: rgba(37, 99, 235, 0.55);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

body.conv-settings #filterApplyBtn:hover {
    background: linear-gradient(180deg, #3261f2, #214cc8);
    color: #ffffff;
}

body.conv-settings #filterClearBtn {
    background: linear-gradient(180deg, #f5ebff, #eadcff);
    border-color: rgba(167, 139, 250, 0.4);
    color: #6d28d9;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.12);
}

body.conv-settings #filterClearBtn:hover {
    background: linear-gradient(180deg, #efe1ff, #dfccff);
    color: #5b21b6;
}

body.conv-settings input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.conv-settings select,
body.conv-settings textarea {
    animation: none;
    background-image: none !important;
    background: rgba(255,255,255,0.60);
    color: #0b1220;
    border: 1px solid #DDE3EA;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(15, 35, 55, 0.08);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    margin: 0;
    min-height: 48px;
}

body.conv-settings input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.conv-settings select:focus,
body.conv-settings textarea:focus {
    box-shadow: 0 0 0 2px rgba(120, 160, 190, 0.20), 0 10px 24px rgba(15, 35, 55, 0.10);
}

body.conv-settings input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])::placeholder,
body.conv-settings textarea::placeholder {
    color: rgba(11, 18, 32, 0.55);
}

body.conv-settings select option {
    background: #ffffff;
    color: #0b1220;
}

body.conv-settings .btn {
    animation: none;
    background-image: none !important;
    background: rgba(255,255,255,0.72);
    border: 1px solid #DDE3EA;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(15, 35, 55, 0.10);
    color: #0b1220;
}

body.conv-settings .btn.primary {
    background: linear-gradient(135deg, #9ddcff 0%, #70c5ef 100%);
    border-color: rgba(112, 197, 239, 0.72);
    color: #ffffff;
}

body.conv-settings #filterApplyBtn {
    background: linear-gradient(180deg, #3b6bff, #2956d7) !important;
    border: 1px solid rgba(37, 99, 235, 0.55) !important;
    color: #ffffff !important;
    font-weight: 700;
    text-shadow: none;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

body.conv-settings #filterApplyBtn:hover {
    background: linear-gradient(180deg, #3261f2, #214cc8) !important;
    color: #ffffff !important;
}

body.conv-settings .btn.ghost {
    background: rgba(255,255,255,0.88);
}

body.conv-settings .conv-shell {
    overflow-x: auto;
    overflow-y: visible;
}

body.conv-settings .conv-toolbar {
    margin-bottom: 12px;
}

body.conv-settings .conv-table {
    background: rgba(255,255,255,0.70);
    border: 1px solid #DDE3EA;
    border-radius: 12px;
    table-layout: fixed;
    min-width: 1200px;
}

body.conv-settings .conv-table th,
body.conv-settings .conv-table td {
    border-bottom: 1px solid #E7ECF2;
    color: #2d3345;
}

body.conv-settings .conv-table td {
    vertical-align: middle;
}

body.conv-settings .lead-cell {
    vertical-align: middle;
}

body.conv-settings .lead-cell-inner {
    min-height: 44px;
}

body.conv-settings .intent-cell {
    overflow: hidden;
    font-size: 13px;
    color: #2f3b50;
    text-align: center;
}

.intent-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.conv-settings .followup-cell {
    text-align: center;
}

body.conv-settings .followup-cell-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2px;
}

body.conv-settings .followup-cell-stack .ai-followup-pill {
    margin: 0;
}

body.conv-settings .followup-stage-flow {
    margin-top: 1px;
    line-height: 1.15;
}

.followup-stage-time {
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.15;
    color: #64748b;
    white-space: nowrap;
}

.followup-stage-time.future {
    color: #1e3a8a;
}

.followup-stage-time.past {
    color: #92400e;
}

.followup-stage-time.na {
    color: #94a3b8;
}

body.conv-settings .ai-note-cell {
    max-width: none;
    min-width: 220px;
    overflow: hidden;
    white-space: normal;
    line-height: 1.3;
    font-size: 12px;
    color: #334155;
}

.ai-note-text {
    display: block;
    max-height: 3.9em;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.conv-settings .actions-cell {
    width: 124px;
    white-space: nowrap;
}

body.conv-settings .conv-table th {
    background: rgba(255,255,255,0.85);
    font-weight: 700;
}

body.conv-settings .conv-table th:nth-child(8),
body.conv-settings .conv-table td.followup-cell {
    text-align: center;
}

body.conv-settings .lead-row.gradient-stroke {
    background-image: none;
    border: none;
}

body.conv-settings .lead-row:hover {
    background: rgba(215, 229, 243, 0.32);
}

body.conv-settings .conv-row > td {
    background: rgba(248, 251, 255, 0.85);
}

body.conv-settings .conv-panel {
    background: rgba(255,255,255,0.72);
    border: 1px solid #DDE3EA;
    border-left: 3px solid rgba(120, 160, 190, 0.45);
    box-shadow: 0 8px 18px rgba(15, 35, 55, 0.08);
    padding: 10px;
}

body.conv-settings .conv-nested {
    background: rgba(255,255,255,0.84);
    border: 1px solid #E2E8F0;
}

body.conv-settings .conv-nested thead th {
    background: rgba(245, 249, 255, 0.96);
    padding: 7px 10px;
    line-height: 1.25;
}

body.conv-settings .conv-nested td {
    padding: 6px 10px;
    line-height: 1.35;
}

body.conv-settings .msg-details,
body.conv-settings .msg-details summary {
    margin: 0;
}

body.conv-settings .pill,
body.conv-settings .counter-bar {
    display: none;
}

body.conv-settings .platform-ico {
    background: rgba(122, 162, 194, 0.12);
    border: 1px solid rgba(122, 162, 194, 0.35);
    color: #2d3345;
}

body.conv-settings .expand-btn {
    border-color: rgba(122, 162, 194, 0.45);
    color: #2d3345;
    background: rgba(255,255,255,0.85);
}

body.conv-settings .conv-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    box-shadow: none;
    background: #ffffff;
    border: 1px solid #C9D6E3;
    border-radius: 4px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.conv-settings .btn.danger,
body.conv-settings .msg-delete-selected,
body.conv-settings .conv-nested .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
}

body.conv-settings .btn.danger i,
body.conv-settings .msg-delete-selected i,
body.conv-settings .conv-nested .btn i {
    display: inline-block;
    margin: 0;
    flex-shrink: 0;
}

body.conv-settings .lead-main strong {
    display: block;
    line-height: 1.22;
}

body.conv-settings .lead-sub {
    display: block;
    margin-top: 2px;
    line-height: 1.2;
}

body.conv-settings .actions-cell {
    text-align: center;
}

body.conv-settings .actions-cell .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    margin: 2px auto;
    width: 88px;
    min-height: 22px;
    padding: 2px 4px;
    font-size: 10px;
    line-height: 1.05;
    border-radius: 8px;
    white-space: normal;
}

body.conv-settings .conv-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 8px 4px 2px;
}

body.conv-settings .conv-pagination-meta {
    color: #475569;
    font-size: 13px;
}

body.conv-settings .conv-pagination-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

body.conv-settings .conv-pagination-links .btn.small {
    min-height: 30px;
    min-width: 38px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1;
}

body.conv-settings .conv-pagination-links .btn.current {
    pointer-events: none;
}

body.conv-settings .conv-pagination-links .btn.disabled {
    opacity: 0.45;
    pointer-events: none;
}

body.conv-settings .conv-pagination-dots {
    color: #64748b;
    font-size: 12px;
    padding: 0 2px;
}

@media (max-width: 1280px) {
    body.conv-settings .conv-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    body.conv-settings .conv-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.conv-settings .counter-inline {
        font-size: 13px;
        gap: 12px;
    }

    body.conv-settings .counter-inline span + span {
        padding-left: 12px;
    }

    body.conv-settings .counter-inline span + span::before {
        height: 16px;
    }

    body.conv-settings .conv-pagination {
        flex-direction: column;
        align-items: flex-start;
    }

    body.conv-settings .conv-table {
        min-width: 1020px;
    }

    body.conv-settings .conv-table th:last-child,
    body.conv-settings .actions-cell {
        position: sticky;
        right: 0;
        z-index: 3;
        background: rgba(248, 251, 255, 0.96);
        border-left: 1px solid #E2E8F0;
    }

    body.conv-settings .actions-cell {
        min-width: 124px;
        width: 124px;
        padding-left: 6px;
        padding-right: 6px;
    }

    body.conv-settings .actions-cell .btn {
        width: 102px;
        min-height: 24px;
        font-size: 10px;
        line-height: 1.05;
    }

    .lead-modal-grid {
        grid-template-columns: 1fr;
    }

    .lead-modal-layout {
        grid-template-columns: 1fr;
    }

    .lead-modal-pause-row {
        grid-template-columns: 1fr;
    }

    .lead-modal-pause-toggle {
        margin-top: 0;
    }

    .lead-modal-pause-datetime {
        grid-template-columns: 1fr;
    }

    .lead-modal-meta {
        grid-template-columns: 1fr;
    }

    .lead-modal-conv-item {
        grid-template-columns: 34px 1fr;
    }

    .lead-modal-conv-time {
        grid-column: 2;
        opacity: 0.8;
    }

    .lead-modal-conv-msg {
        grid-column: 1 / -1;
    }

    .lead-modal-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .lead-modal-head-actions {
        width: 100%;
    }

    .lead-modal-head-actions .btn {
        flex: 1 1 calc(33.333% - 6px);
    }

    .lead-modal-merge-controls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    body.conv-settings .conv-filter-grid {
        grid-template-columns: 1fr;
    }
}

/* Conversations layout enhancements: card/list + collapsible filters */
body.conv-settings .conv-hero,
body.conv-settings .conv-filter-shell,
body.conv-settings .conv-shell {
    border-radius: 16px;
}

body.conv-settings .conv-hero {
    padding: 14px 16px;
    background:
        radial-gradient(circle at top right, rgba(59, 107, 255, 0.14), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,0.97), rgba(244,249,255,0.92));
    border-color: rgba(59, 107, 255, 0.12);
    box-shadow: 0 16px 34px rgba(15, 35, 55, 0.08), 0 8px 20px rgba(59, 107, 255, 0.07);
}

body.conv-settings .conv-head {
    margin-bottom: 10px;
}

body.conv-settings .conv-section-pills,
body.conv-settings .conv-filter-pills {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.conv-settings .conv-section-pills {
    margin-bottom: 10px;
}

body.conv-settings .conv-section-pill {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

body.conv-settings .conv-section-pill.tone-blue {
    color: #1d4ed8;
    background: rgba(219, 234, 254, 0.92);
    border-color: rgba(96, 165, 250, 0.28);
}

body.conv-settings .conv-section-pill.tone-teal {
    color: #0f766e;
    background: rgba(204, 251, 241, 0.92);
    border-color: rgba(45, 212, 191, 0.3);
}

body.conv-settings .conv-section-pill.tone-amber {
    color: #b45309;
    background: rgba(254, 243, 199, 0.94);
    border-color: rgba(251, 191, 36, 0.32);
}

body.conv-settings .conv-section-pill.tone-violet {
    color: #7c3aed;
    background: rgba(237, 233, 254, 0.94);
    border-color: rgba(167, 139, 250, 0.32);
}

body.conv-settings .conv-head h2 {
    font-size: 18px;
}

body.conv-settings .conv-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 10px;
}

body.conv-settings .conv-stat-card {
    border: 1px solid #DDE3EA;
    border-radius: 12px;
    background: rgba(255,255,255,0.74);
    box-shadow: 0 6px 14px rgba(15, 35, 55, 0.07);
    padding: 9px 11px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.conv-settings .conv-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 35, 55, 0.10);
}

body.conv-settings .conv-stat-card:nth-child(1) {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.88));
    border-color: rgba(96, 165, 250, 0.26);
}

body.conv-settings .conv-stat-card:nth-child(2) {
    background: linear-gradient(180deg, rgba(240, 253, 250, 0.96), rgba(204, 251, 241, 0.88));
    border-color: rgba(45, 212, 191, 0.24);
}

body.conv-settings .conv-stat-card:nth-child(3) {
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.96), rgba(254, 215, 170, 0.84));
    border-color: rgba(251, 146, 60, 0.24);
}

body.conv-settings .conv-stat-card:nth-child(4) {
    background: linear-gradient(180deg, rgba(245, 243, 255, 0.96), rgba(221, 214, 254, 0.88));
    border-color: rgba(167, 139, 250, 0.24);
}

body.conv-settings .conv-stat-label {
    font-size: 10px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

body.conv-settings .conv-stat-value {
    margin-top: 4px;
    font-size: 16px;
    line-height: 1.1;
    color: #0f172a;
}

body.conv-settings .conv-stat-value strong {
    font-weight: 800;
}

body.conv-settings .conv-filter-shell {
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,0.97), rgba(250,247,255,0.92));
    border-color: rgba(167, 139, 250, 0.18);
    box-shadow: 0 16px 32px rgba(15, 35, 55, 0.07), 0 8px 18px rgba(139, 92, 246, 0.07);
}

body.conv-settings .conv-filter-toggle-row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(221, 227, 234, 0.82);
    margin: 0;
    border-radius: 0;
    background: rgba(255,255,255,0.76);
    color: #24324a;
    min-height: 58px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

body.conv-settings .conv-filter-toggle-row:hover {
    background: rgba(255,255,255,0.94);
}

body.conv-settings .conv-filter-title-wrap {
    display: grid;
    gap: 8px;
    text-align: left;
}

body.conv-settings .conv-filter-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

body.conv-settings .conv-filter-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.15);
    color: #334155;
    transition: transform 0.22s ease;
}

body.conv-settings .conv-filter-content {
    max-height: 900px;
    opacity: 1;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease;
    padding: 12px 14px 14px;
    overflow: hidden;
}

body.conv-settings .conv-filter-shell.is-collapsed .conv-filter-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

body.conv-settings .conv-filter-shell.is-collapsed .conv-filter-toggle-icon {
    transform: rotate(-90deg);
}

body.conv-settings .lead-cross-ref {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
}

body.conv-settings .lead-cross-ref a {
    color: #2563eb;
    text-decoration: none;
}

body.conv-settings .lead-cross-ref a:hover {
    text-decoration: underline;
}

body.conv-settings .conv-filter-form {
    margin-top: 0;
}

body.conv-settings .conv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

body.conv-settings .conv-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(243,247,255,0.84));
    border: 1px solid rgba(203, 213, 225, 0.95);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 18px rgba(15, 35, 55, 0.06);
}

body.conv-settings .conv-view-btn {
    min-height: 30px;
    min-width: 62px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 8px;
    box-shadow: none;
}

body.conv-settings .conv-view-btn.active {
    background: linear-gradient(180deg, #2f66ff, #2453d6);
    border-color: rgba(37, 99, 235, 0.72);
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
}

body.conv-settings #convApp[data-view="list"] .conv-table-view {
    display: block;
}

body.conv-settings #convApp[data-view="list"] .conv-card-view {
    display: none;
}

body.conv-settings #convApp[data-view="card"] .conv-table-view {
    display: none;
}

body.conv-settings #convApp[data-view="card"] .conv-card-view {
    display: grid;
}

body.conv-settings .conv-table {
    border-radius: 14px;
}

body.conv-settings .conv-row > td {
    padding-top: 8px;
    padding-bottom: 8px;
}

body.conv-settings .conv-card-view {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}

body.conv-settings .conv-card-empty {
    grid-column: 1 / -1;
    border: 1px solid #DDE3EA;
    border-radius: 10px;
    background: rgba(255,255,255,0.72);
    padding: 12px;
    text-align: center;
}

body.conv-settings .conv-lead-card {
    border: 1px solid #DDE3EA;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(59, 107, 255, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(247,250,255,0.86));
    box-shadow: 0 10px 22px rgba(15, 35, 55, 0.08);
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

body.conv-settings .conv-lead-card:hover {
    box-shadow: 0 10px 22px rgba(15, 35, 55, 0.12);
    border-color: rgba(87, 140, 188, 0.55);
    transform: translateY(-1px);
}

body.conv-settings .conv-lead-card.expanded {
    grid-column: 1 / -1;
    border-color: rgba(87, 140, 188, 0.72);
}

body.conv-settings .conv-lead-card-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 10px 8px;
    cursor: pointer;
}

body.conv-settings .conv-lead-card-header.open {
    background: rgba(148, 163, 184, 0.06);
}

body.conv-settings .conv-card-expand {
    width: 22px;
    height: 22px;
    min-height: 22px;
    border-radius: 6px;
    border: 1px solid #DDE3EA;
    background: rgba(255,255,255,0.92);
    color: #1e293b;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    margin-top: 1px;
}

body.conv-settings .conv-lead-card-summary {
    min-width: 0;
    flex: 1;
}

body.conv-settings .conv-lead-card-top {
    display: block;
}

body.conv-settings .conv-card-name {
    display: block;
    font-size: 14px;
    line-height: 1.22;
    color: #0f172a;
    font-weight: 700;
}

body.conv-settings .conv-card-id {
    display: inline-block;
    margin-top: 2px;
    margin-right: 6px;
    font-size: 11px;
    color: #94a3b8;
}

body.conv-settings .conv-card-email {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    color: #64748b;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

body.conv-settings .conv-card-badges-row {
    margin-top: 7px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

body.conv-settings .conv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 2px 7px;
    border: 1px solid #DDE3EA;
    background: rgba(255,255,255,0.86);
    color: #1e293b;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
}

body.conv-settings .conv-chip i,
body.conv-settings .conv-chip svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

body.conv-settings .conv-chip-score.warm {
    color: #92400e;
    border-color: rgba(251,191,36,0.55);
    background: rgba(254,243,199,0.72);
}

body.conv-settings .conv-chip-score.hot {
    color: #991b1b;
    border-color: rgba(239,68,68,0.5);
    background: rgba(254,226,226,0.72);
}

body.conv-settings .conv-chip-score.cold {
    color: #164e63;
    border-color: rgba(34,211,238,0.48);
    background: rgba(207,250,254,0.75);
}

body.conv-settings .conv-chip-platform,
body.conv-settings .conv-chip-conv {
    color: #475569;
    background: rgba(241,245,249,0.78);
}

body.conv-settings .conv-chip-intent {
    color: #3730a3;
    border-color: rgba(99,102,241,0.45);
    background: rgba(224,231,255,0.72);
}

body.conv-settings .conv-chip-status {
    border-color: rgba(148,163,184,0.55);
    background: rgba(241,245,249,0.74);
}

body.conv-settings .conv-chip-status.active {
    color: #065f46;
    border-color: rgba(16,185,129,0.55);
    background: rgba(209,250,229,0.72);
}

body.conv-settings .conv-chip-status.new {
    color: #92400e;
    border-color: rgba(245,158,11,0.52);
    background: rgba(254,243,199,0.72);
}

body.conv-settings .conv-chip-status.lost {
    color: #991b1b;
    border-color: rgba(239,68,68,0.5);
    background: rgba(254,226,226,0.72);
}

body.conv-settings .conv-chip-status.negotiation {
    color: #3730a3;
    border-color: rgba(99,102,241,0.5);
    background: rgba(224,231,255,0.72);
}

body.conv-settings .conv-chip-status.converted {
    color: #166534;
    border-color: rgba(22,163,74,0.5);
    background: rgba(220,252,231,0.72);
}

body.conv-settings .conv-chip-status.interested {
    color: #0f766e;
    border-color: rgba(20,184,166,0.48);
    background: rgba(204,251,241,0.72);
}

body.conv-settings .conv-chip-status.pending,
body.conv-settings .conv-chip-status.pending-payment {
    color: #7c2d12;
    border-color: rgba(251,146,60,0.48);
    background: rgba(255,237,213,0.72);
}

body.conv-settings .conv-hero-chart-row {
    margin-top: 12px;
}

body.conv-settings .conv-hero-chart-wrap {
    position: relative;
    min-height: 156px;
    padding: 8px 10px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--conv-border) 86%, transparent);
    background: color-mix(in srgb, var(--color-card) 92%, transparent);
}

body.conv-settings .conv-hero-chart-wrap.hidden {
    display: block;
    visibility: hidden;
}

body.conv-settings .conv-hero-chart-wrap canvas {
    width: 100% !important;
    height: 140px !important;
}

body.conv-settings .conv-hero-chart-fallback {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.conv-settings .conv-hero-score-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #DDE3EA;
    font-size: 11px;
    font-weight: 700;
}

body.conv-settings .conv-hero-score-pill.cold { background: rgba(219,234,254,0.84); color: #1d4ed8; }
body.conv-settings .conv-hero-score-pill.warm { background: rgba(254,243,199,0.84); color: #b45309; }
body.conv-settings .conv-hero-score-pill.hot { background: rgba(254,226,226,0.84); color: #dc2626; }

html.dark body.conv-settings input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.dark body.conv-settings select,
html.dark body.conv-settings textarea {
    background: color-mix(in srgb, var(--color-card) 90%, transparent) !important;
    border-color: color-mix(in srgb, var(--conv-border) 82%, transparent) !important;
    color: var(--conv-text-1) !important;
}

body.conv-settings .conv-lead-card-details {
    border-top: 1px solid #E2E8F0;
    padding: 8px 10px 10px;
}

body.conv-settings .conv-card-followup-badge {
    border: 1px solid rgba(56,189,248,0.48);
    background: rgba(207,250,254,0.32);
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 8px;
}

body.conv-settings .conv-card-followup-badge.no {
    border-color: rgba(239,68,68,0.4);
    background: rgba(254,226,226,0.32);
}

body.conv-settings .conv-card-followup-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
}

body.conv-settings .conv-card-followup-main i,
body.conv-settings .conv-card-followup-main svg {
    width: 14px;
    height: 14px;
}

body.conv-settings .conv-card-followup-details {
    margin-top: 4px;
}

body.conv-settings .conv-card-flow {
    display: block;
    font-size: 10px;
    line-height: 1.3;
    margin-top: 0;
    text-align: left;
    white-space: normal;
}

body.conv-settings .conv-card-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

body.conv-settings .conv-card-actions .btn {
    flex: 1 1 0;
    min-height: 28px;
    font-size: 10px;
    border-radius: 6px;
    padding: 4px 6px;
    margin: 0;
    justify-content: center;
}

body.conv-settings .conv-card-note-preview {
    background: rgba(241,245,249,0.78);
    border: 1px solid rgba(226,232,240,0.92);
    border-left: 3px solid rgba(87,140,188,0.78);
    border-radius: 6px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.38;
    color: #475569;
    margin-bottom: 8px;
    max-height: 3.4em;
    overflow: hidden;
}

body.conv-settings .conv-card-note-preview.empty {
    border-left-color: rgba(203,213,225,0.95);
    color: #94a3b8;
}

body.conv-settings .conv-card-expanded-content {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #E2E8F0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}

body.conv-settings .conv-card-expanded-section {
    background: rgba(241,245,249,0.68);
    border: 1px solid rgba(226,232,240,0.9);
    border-radius: 7px;
    padding: 8px;
}

body.conv-settings .conv-card-expanded-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 800;
    margin-bottom: 6px;
}

body.conv-settings .conv-card-conv-item {
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(226,232,240,0.92);
    border-radius: 6px;
    padding: 6px;
    margin-bottom: 6px;
}

body.conv-settings .conv-card-conv-item:last-child {
    margin-bottom: 0;
}

body.conv-settings .conv-card-conv-time {
    font-size: 10px;
    color: #94a3b8;
    margin-bottom: 3px;
}

body.conv-settings .conv-card-conv-dir {
    display: inline-flex;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 4px;
}

body.conv-settings .conv-card-conv-dir.outgoing {
    color: #1e40af;
    background: rgba(219,234,254,0.86);
}

body.conv-settings .conv-card-conv-dir.incoming {
    color: #166534;
    background: rgba(220,252,231,0.86);
}

body.conv-settings .conv-card-conv-message {
    font-size: 11px;
    line-height: 1.36;
    color: #475569;
}

body.conv-settings .conv-card-note-full {
    font-size: 11px;
    line-height: 1.45;
    color: #475569;
    overflow-wrap: anywhere;
}

body.conv-settings .conv-card-select {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    min-height: 16px;
    border-radius: 4px;
    margin: 0;
}

@media (max-width: 1200px) {
    body.conv-settings .conv-stats-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}

@media (max-width: 1023px) {
    body.conv-settings .conv-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    body.conv-settings .conv-view-toggle {
        width: 100%;
        justify-content: stretch;
    }

    body.conv-settings .conv-view-btn {
        flex: 1 1 0;
    }

    body.conv-settings .conv-card-view {
        grid-template-columns: 1fr;
    }

    body.conv-settings .conv-card-actions {
        flex-wrap: wrap;
    }

    body.conv-settings .conv-card-actions .btn {
        flex: 1 1 calc(50% - 3px);
    }
}

@media (max-width: 768px) {
    body.conv-settings .conv-lead-card.expanded {
        grid-column: 1;
    }

    body.conv-settings .conv-card-expanded-content {
        grid-template-columns: 1fr;
    }
}

/* Global responsive hardening */
img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

.container {
    width: min(100%, 1400px);
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .container {
        padding: 18px;
    }

    .insights-metrics {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 1024px) {
    .topbar {
        flex-wrap: nowrap;
        gap: 10px;
        padding: 12px 14px;
    }

    .app-nav {
        width: auto;
        order: 2;
        padding-top: 0;
        gap: 6px;
        margin-left: auto;
        margin-right: 8px;
        justify-content: flex-end;
    }

    .app-nav a {
        padding: 6px 7px;
        font-size: 13px;
    }

    .actions {
        margin-left: 0;
    }

    .container {
        padding: 14px;
    }

    .card {
        padding: 16px;
    }

    .filter-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }

    .filter-bar input,
    .filter-bar select,
    .filter-bar .btn,
    .filter-bar a.btn {
        width: 100%;
        margin: 0;
    }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    .actions-cell .btn,
    .lead-quick-actions .btn {
        margin-bottom: 6px;
    }

    .scoring-settings-wrap,
    .dashboard-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .grid.two {
        grid-template-columns: 1fr;
    }

    .flex-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .sheet-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .sheet-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .filter-bar {
        grid-template-columns: 1fr;
    }

    .lead-quick-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .followup-cell-stack {
        width: 100%;
    }

    .followup-stage-flow {
        white-space: normal;
    }
}

/* AI Composer page */
body.ai-composer-ui .bg {
    background:
        radial-gradient(circle at 18% 18%, rgba(120, 150, 180, 0.14), transparent 55%),
        radial-gradient(circle at 82% 22%, rgba(170, 190, 210, 0.12), transparent 55%),
        radial-gradient(circle at 50% 85%, rgba(135, 170, 200, 0.10), transparent 55%),
        linear-gradient(#f4f7fb, #f4f7fb);
}

body.ai-composer-ui .glass {
    background: rgba(255,255,255,0.60);
    border: 1px solid #DDE3EA;
    box-shadow: 0 12px 30px rgba(15, 35, 55, 0.10);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

body.ai-composer-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.ai-composer-ui select,
body.ai-composer-ui textarea {
    animation: none;
    background-image: none !important;
    background: rgba(255,255,255,0.60);
    color: #0b1220;
    border: 1px solid #DDE3EA;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(15, 35, 55, 0.08);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
}

body.ai-composer-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.ai-composer-ui select:focus,
body.ai-composer-ui textarea:focus {
    box-shadow: 0 0 0 2px rgba(120, 160, 190, 0.20), 0 10px 24px rgba(15, 35, 55, 0.10);
}

body.ai-composer-ui .btn {
    animation: none;
    background-image: none !important;
    background: rgba(255,255,255,0.72);
    border: 1px solid #DDE3EA;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(15, 35, 55, 0.10);
    color: #0b1220;
}

body.ai-composer-ui .btn.primary {
    background: rgba(235, 246, 255, 0.88);
    border-color: rgba(160, 195, 220, 0.55);
    color: #0b1220;
}

.ai-composer-page {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.ai-composer-hero {
    padding: 12px 16px;
    border-radius: 18px;
    border-color: rgba(59, 107, 255, 0.16);
    background:
        radial-gradient(circle at top right, rgba(59, 107, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(250, 252, 255, 0.96), rgba(240, 246, 255, 0.92));
    box-shadow: 0 18px 38px rgba(15, 35, 55, 0.10), 0 10px 22px rgba(59, 107, 255, 0.05);
}

.ai-composer-hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ai-composer-hero-head {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ai-composer-hero-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-composer-kicker {
    margin: 0;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(59, 107, 255, 0.14);
    background: rgba(243, 247, 255, 0.96);
    color: #4e6990;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ai-composer-hero h2 {
    margin: 0;
    color: #132238;
    font-size: 24px;
    letter-spacing: -0.04em;
    line-height: 1;
}

.ai-composer-hero-copy {
    margin: 0;
    color: #697d97;
    font-size: 12px;
    line-height: 1.45;
    max-width: 520px;
}

.ai-composer-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: min(100%, 460px);
}

.ai-composer-hero-stat {
    padding: 9px 11px;
    border-radius: 12px;
    border: 1px solid rgba(59, 107, 255, 0.12);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ai-composer-hero-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(15, 35, 55, 0.10);
    border-color: rgba(59, 107, 255, 0.18);
}

.ai-composer-hero-stat span {
    display: block;
    margin-bottom: 4px;
    color: #73849a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ai-composer-hero-stat strong {
    display: block;
    color: #1d4ed8;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.ai-composer-topbar {
    margin-bottom: 16px;
    box-shadow: 0 16px 34px rgba(15, 35, 55, 0.09), 0 10px 22px rgba(59, 107, 255, 0.05);
}

.ai-composer-toprow h2 {
    margin: 0;
    font-size: 26px;
    letter-spacing: -0.02em;
}

.ai-composer-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.ai-composer-left {
    position: sticky;
    top: 84px;
    box-shadow: 0 18px 36px rgba(15, 35, 55, 0.09), 0 10px 22px rgba(59, 107, 255, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ai-composer-left-note {
    font-size: 13px;
}

.ai-composer-main {
    min-height: 520px;
    box-shadow: 0 18px 36px rgba(15, 35, 55, 0.09), 0 10px 22px rgba(59, 107, 255, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ai-composer-left:hover,
.ai-composer-main:hover,
.ai-composer-topbar:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgba(15, 35, 55, 0.11), 0 12px 24px rgba(59, 107, 255, 0.06);
}

.ai-composer-section-title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
}

.ai-composer-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ai-composer-features {
    min-height: 180px;
    resize: vertical;
}

.ai-full-btn {
    width: 100%;
    margin-top: 4px;
}

body.ai-composer-ui .ai-composer-page .btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

body.ai-composer-ui .ai-composer-page .btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 35, 55, 0.12);
}

body.ai-composer-ui .ai-composer-page .btn.primary {
    background: linear-gradient(180deg, #3b6bff, #2956d7);
    border-color: rgba(37, 99, 235, 0.55);
    color: #ffffff;
}

body.ai-composer-ui .ai-composer-page .btn.primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #3261f2, #214cc8);
    color: #ffffff;
}

.ai-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(11,18,32,0.22);
    border-top-color: #0b1220;
    border-radius: 999px;
    margin-left: 6px;
    animation: aiComposerSpin .9s linear infinite;
}

@keyframes aiComposerSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ai-composer-preview {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #E4EAF1;
}

.ai-composer-structured-wrap,
.ai-composer-raw-wrap {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,250,255,0.84));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

.ai-composer-preview-text {
    min-height: 130px;
    resize: vertical;
}

.ai-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ai-counter {
    margin: -6px 0 10px;
    text-align: right;
    font-size: 12px;
    color: #475569;
}

.ai-counter.over {
    color: #b91c1c;
    font-weight: 700;
}

.ai-composer-preview-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ai-composer-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, 0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 59;
}

.ai-composer-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.ai-composer-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    max-width: 100vw;
    height: 100vh;
    background: rgba(255,255,255,0.95);
    border-left: 1px solid #DDE3EA;
    box-shadow: -12px 0 28px rgba(15, 35, 55, 0.14);
    transform: translateX(105%);
    transition: transform 0.24s ease;
    z-index: 60;
    display: flex;
    flex-direction: column;
}

.ai-composer-drawer.open {
    transform: translateX(0);
}

.ai-composer-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #E3E8EF;
}

.ai-composer-drawer-head h3 {
    margin: 0;
    font-size: 18px;
}

.ai-composer-drawer-body {
    padding: 14px 16px;
    overflow: auto;
    flex: 1;
}

.ai-composer-drawer-foot {
    padding: 12px 16px 16px;
    border-top: 1px solid #E3E8EF;
}

.ai-composer-model-hint {
    margin: -6px 0 10px;
    font-size: 12px;
}

.ai-api-key-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.ai-prompt-preview-wrap {
    margin-top: 6px;
}

.ai-prompt-preview {
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #DDE3EA;
    background: rgba(255,255,255,0.72);
    color: #334155;
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

.ai-composer-prompt-modal-card {
    width: min(900px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid #DDE3EA;
    color: #0b1220;
    box-shadow: 0 26px 54px rgba(15, 35, 55, 0.20);
}

.ai-composer-prompt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.ai-composer-prompt-head h3 {
    margin: 0;
}

.ai-composer-prompt-editor {
    min-height: 66vh;
    resize: vertical;
}

.ai-composer-prompt-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

body.ai-composer-ui #aiComposerPromptModal.modal {
    z-index: 96;
}

body.ai-composer-ui #aiComposerPromptModal .modal-card {
    position: relative;
    z-index: 97;
}

/* Broadcast AI Config prompt editor must stay above drawer/backdrop */
#bcsAiPromptModal.modal {
    z-index: 110;
}

#bcsAiPromptModal .modal-card {
    position: relative;
    z-index: 111;
}

.ai-composer-toast-wrap {
    position: fixed;
    top: 86px;
    right: 14px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-toast {
    min-width: 220px;
    max-width: 360px;
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid;
    box-shadow: 0 14px 24px rgba(15, 35, 55, 0.16);
    background: rgba(255,255,255,0.96);
    color: #0b1220;
    transition: opacity 0.22s ease;
}

.ai-toast.success {
    border-color: rgba(16, 185, 129, 0.44);
}

.ai-toast.error {
    border-color: rgba(239, 68, 68, 0.44);
}

.ai-toast.fade {
    opacity: 0;
}

.ai-composer-page > .card,
.ai-composer-grid > .card,
.ai-composer-hero-stat {
    animation: aiComposerSurfaceRise 0.34s ease both;
}

.ai-composer-page > .card:nth-child(1) { animation-delay: 0.02s; }
.ai-composer-page > .card:nth-child(2) { animation-delay: 0.05s; }
.ai-composer-grid > .card:nth-child(1) { animation-delay: 0.08s; }
.ai-composer-grid > .card:nth-child(2) { animation-delay: 0.11s; }

@keyframes aiComposerSurfaceRise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-composer-page > .card,
    .ai-composer-grid > .card,
    .ai-composer-hero-stat,
    .ai-composer-left,
    .ai-composer-main,
    .ai-composer-topbar,
    body.ai-composer-ui .ai-composer-page .btn {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 1024px) {
    .ai-composer-hero-main {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-composer-hero-stats {
        min-width: 0;
        width: 100%;
    }

    .ai-composer-grid {
        grid-template-columns: 1fr;
    }

    .ai-composer-left {
        position: static;
    }
}

@media (max-width: 720px) {
    .ai-composer-hero {
        padding: 12px;
    }

    .ai-composer-hero h2 {
        font-size: 20px;
    }

    .ai-composer-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-composer-hero-title {
        gap: 8px;
    }

    .ai-composer-form-grid {
        grid-template-columns: 1fr;
    }

    .ai-composer-drawer {
        width: 100vw;
        border-left: none;
    }

    .ai-composer-preview-actions .btn {
        width: 100%;
    }

    .ai-composer-toast-wrap {
        left: 10px;
        right: 10px;
        top: 72px;
    }

    .ai-toast {
        max-width: none;
        width: 100%;
    }
}

/* Modern base skin (reusable for future pages) */
body.modern-ui .bg,
body.sheet-ui .bg {
    background:
        radial-gradient(circle at 18% 18%, rgba(120, 150, 180, 0.14), transparent 55%),
        radial-gradient(circle at 82% 22%, rgba(170, 190, 210, 0.12), transparent 55%),
        radial-gradient(circle at 50% 85%, rgba(135, 170, 200, 0.10), transparent 55%),
        linear-gradient(#f4f7fb, #f4f7fb);
}

body.modern-ui .glass,
body.sheet-ui .glass {
    background: rgba(255,255,255,0.60);
    border: 1px solid #DDE3EA;
    box-shadow: 0 12px 30px rgba(15, 35, 55, 0.10);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

body.modern-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.modern-ui select,
body.modern-ui textarea,
body.sheet-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.sheet-ui select,
body.sheet-ui textarea {
    animation: none;
    background-image: none !important;
    background: rgba(255,255,255,0.60);
    color: #0b1220;
    border: 1px solid #DDE3EA;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(15, 35, 55, 0.08);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
}

body.modern-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.modern-ui select:focus,
body.modern-ui textarea:focus,
body.sheet-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.sheet-ui select:focus,
body.sheet-ui textarea:focus {
    box-shadow: 0 0 0 2px rgba(120, 160, 190, 0.20), 0 10px 24px rgba(15, 35, 55, 0.10);
}

body.modern-ui .btn,
body.sheet-ui .btn {
    animation: none;
    background-image: none !important;
    background: rgba(255,255,255,0.72);
    border: 1px solid #DDE3EA;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(15, 35, 55, 0.10);
    color: #0b1220;
}

body.modern-ui .btn.primary,
body.sheet-ui .btn.primary {
    background: rgba(235, 246, 255, 0.88);
    border-color: rgba(160, 195, 220, 0.55);
    color: #0b1220;
}

/* Sheet workspace */
.sheet-page {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.sheet-hero {
    padding: 18px 20px;
    border-radius: 20px;
    border-color: rgba(59, 107, 255, 0.16);
    background:
        radial-gradient(circle at top right, rgba(59, 107, 255, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(250, 252, 255, 0.96), rgba(240, 246, 255, 0.92));
    box-shadow: 0 20px 40px rgba(15, 35, 55, 0.10), 0 12px 24px rgba(59, 107, 255, 0.05);
}

.sheet-hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.sheet-kicker {
    margin: 0 0 6px;
    color: #5b6f8a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sheet-hero h2 {
    margin: 0;
    color: #11233d;
    font-size: 30px;
    letter-spacing: -0.04em;
}

.sheet-hero-copy {
    margin: 8px 0 0;
    color: #687b94;
    font-size: 14px;
    line-height: 1.5;
    max-width: 640px;
}

.sheet-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    min-width: min(100%, 460px);
}

.sheet-hero-stat {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(59, 107, 255, 0.12);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.sheet-hero-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(15, 35, 55, 0.10);
    border-color: rgba(59, 107, 255, 0.18);
}

.sheet-hero-stat span {
    display: block;
    margin-bottom: 6px;
    color: #71839a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sheet-hero-stat strong {
    display: block;
    color: #1d4ed8;
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.sheet-hero-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.sheet-hero-tips span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(59, 107, 255, 0.12);
    background: rgba(243, 247, 255, 0.94);
    color: #45627f;
    font-size: 11px;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.sheet-hero-tips span:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 107, 255, 0.18);
    background: rgba(231, 239, 255, 0.98);
}

.sheet-id-select-wrap,
.sheet-row-id-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sheet-row-id-wrap {
    cursor: pointer;
    user-select: none;
}

.sheet-row-id-wrap input[type="checkbox"] {
    margin: 0;
}

tr.sheet-row-selected td.sheet-data-cell,
tr.sheet-row-selected td.sheet-id-col {
    background: rgba(49, 107, 255, 0.12);
}

th.sheet-col-head {
    cursor: pointer;
    user-select: none;
}

th.sheet-col-head.sheet-col-selected {
    background: rgba(49, 107, 255, 0.14);
}

th.sheet-col-head .sheet-col-label {
    display: block;
    min-height: 1.1em;
}

th.sheet-col-head.sheet-col-editing .sheet-col-label {
    outline: 2px solid rgba(49, 107, 255, 0.6);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 4px;
}

html.dark .sheet-col-head.sheet-col-editing .sheet-col-label {
    background: color-mix(in srgb, var(--color-card) 90%, transparent);
    color: var(--color-text);
}

body.settings-ui .settings-card.settings-timezone-card {
    overflow: visible;
    position: relative;
    z-index: 220;
}

body.settings-ui .settings-top-grid {
    overflow: visible;
}

body.settings-ui .settings-card.settings-timezone-card .tz-picker,
.tz-picker {
    position: relative;
    overflow: visible;
}

body.settings-ui .settings-card.settings-timezone-card .tz-picker {
    z-index: 221;
}

.tz-picker #tzDisplay {
    width: 100%;
}

body.settings-ui .settings-card.settings-timezone-card .tz-menu {
    position: fixed;
    max-height: min(320px, 55vh);
    overflow: auto;
    border-radius: 14px;
    padding: 6px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 22px 70px rgba(0,0,0,0.18);
    color: #0b1220;
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    z-index: 10020;
}

body.settings-ui .settings-card.settings-timezone-card .tz-menu .tz-item {
    padding: 10px 10px;
    border-radius: 10px;
    color: #0b1220;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.12s ease;
}

body.settings-ui .settings-card.settings-timezone-card .tz-menu .tz-item:hover {
    background: rgba(70,242,255,0.14) !important;
    transform: translateY(-1px);
}

body.settings-ui .settings-card.settings-timezone-card .tz-menu .tz-item:active {
    transform: translateY(0);
}

html.dark body.settings-ui .settings-card.settings-timezone-card .tz-menu {
    background: color-mix(in srgb, var(--color-card) 94%, transparent);
    border-color: color-mix(in srgb, var(--color-border) 80%, transparent);
    color: var(--color-text);
}

html.dark body.settings-ui .settings-card.settings-timezone-card .tz-menu .tz-item {
    color: var(--color-text);
}

.settings-generate-modal {
    position: fixed;
    inset: 0;
    z-index: 14000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 32, 52, 0.24);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
}

.settings-generate-modal.hidden {
    display: none !important;
}

.settings-generate-card {
    background: rgba(255, 255, 255, 0.48);
    border-radius: 16px;
    padding: 20px;
    width: min(480px, 90vw);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: 0 18px 44px rgba(24, 36, 64, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    max-height: 90vh;
    overflow-y: auto;
}

.settings-generate-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 700;
}

.settings-generate-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    color: inherit;
    padding: 2px 6px;
}

.settings-generate-close:hover {
    opacity: 1;
}

.settings-generate-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.settings-generate-card label {
    display: block;
}

.settings-generate-card input,
.settings-generate-card select,
.settings-generate-card textarea {
    width: 100%;
    padding: 10px;
    margin: 6px 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-dark);
    background: rgba(8, 12, 24, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-image:
        linear-gradient(rgba(8,12,24,0.65), rgba(8,12,24,0.65)),
        linear-gradient(120deg, rgba(70,242,255,0.8), rgba(120,255,180,0.8), rgba(255,120,200,0.8), rgba(70,242,255,0.8));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 280% 280%;
    animation: glowStroke 6s linear infinite;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

body.light .settings-generate-card input,
body.light .settings-generate-card select,
body.light .settings-generate-card textarea {
    color: var(--text-light);
    background-image:
        linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
        linear-gradient(120deg, rgba(70,242,255,0.75), rgba(120,255,180,0.75), rgba(255,120,200,0.75), rgba(70,242,255,0.75));
}

.settings-generate-card input:focus,
.settings-generate-card select:focus,
.settings-generate-card textarea:focus {
    outline: none;
    box-shadow: 0 0 0 1px rgba(70,242,255,0.45), 0 0 18px rgba(70,242,255,0.35);
}

.settings-generate-card .btn {
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(8,12,24,0.55);
    color: inherit;
    background-image:
        linear-gradient(rgba(8,12,24,0.65), rgba(8,12,24,0.65)),
        linear-gradient(120deg, rgba(70,242,255,0.8), rgba(120,255,180,0.8), rgba(255,120,200,0.8), rgba(70,242,255,0.8));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 280% 280%;
    animation: glowStroke 6s linear infinite;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

body.light .settings-generate-card .btn {
    background: rgba(255,255,255,0.9);
    color: var(--text-light);
    background-image:
        linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
        linear-gradient(120deg, rgba(70,242,255,0.75), rgba(120,255,180,0.75), rgba(255,120,200,0.75), rgba(70,242,255,0.75));
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    backdrop-filter: blur(10px);
}

body.light .settings-generate-card .btn.primary {
    background: rgba(255,255,255,0.95);
    color: #0b1220;
    border-color: rgba(70,242,255,0.45);
}

.settings-generate-help {
    margin: 0 0 10px;
    font-size: 12px;
    opacity: 0.78;
}

.settings-generate-error {
    min-height: 18px;
    color: #d45454;
    font-size: 12px;
    margin-top: 8px;
}

.settings-generate-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.settings-generated-hint {
    min-height: 14px;
    margin: 4px 0 2px;
    font-size: 11px;
    line-height: 1.2;
    color: #22c55e;
    opacity: 0;
    transition: opacity 0.2s ease;
    user-select: none;
    pointer-events: none;
}

.settings-generated-hint.show {
    opacity: 0.9;
}

.settings-capi-storage-warning {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.16);
    color: #7c2d12;
}

.settings-capi-warning-actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-capi-card {
    margin-top: 16px;
}

.settings-capi-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.settings-capi-head-row .settings-block-title {
    margin: 0;
}

.settings-capi-pys-inline-title {
    margin: 0;
    white-space: nowrap;
}

.settings-capi-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.settings-capi-pane {
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.08);
}

.settings-capi-enable-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
    margin-bottom: 14px;
}

.settings-capi-enable-line .settings-capi-toggle {
    align-self: center;
}

.settings-capi-enable-text {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    text-align: right;
}

.settings-transition-card {
    margin-top: 16px;
}

.settings-transition-layout {
    display: grid;
    gap: 20px;
}

.settings-transition-head {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.35fr);
    gap: 28px;
    align-items: start;
}

.settings-transition-intro {
    display: grid;
    gap: 8px;
    align-content: start;
}

.settings-transition-intro .settings-card-desc {
    margin: 0;
}

.settings-transition-controls-row {
    display: grid;
    grid-template-columns: minmax(280px, 1.35fr) minmax(180px, 0.95fr) auto;
    gap: 18px;
    align-items: start;
}

body.settings-ui .settings-transition-toggle {
    display: flex !important;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    margin-bottom: 0;
    align-items: center;
}

body.settings-ui .settings-transition-enable-text {
    flex: 1 1 auto;
    display: block;
    margin-left: 0;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    max-width: calc(100% - 72px);
}

body.settings-ui .settings-transition-toggle .settings-capi-toggle {
    margin-left: auto;
    flex: 0 0 auto;
    align-self: center;
}

.settings-transition-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 12px;
}

.settings-transition-field {
    display: flex;
    flex-direction: column;
}

.settings-transition-field label {
    display: block;
    margin-bottom: 8px;
}

.settings-transition-actions {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: end;
    margin: 0;
}

.settings-transition-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    margin-left: auto;
    padding-inline: 14px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: rgba(37, 99, 235, 0.48);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.2);
}

body.settings-ui .settings-inline-save .settings-transition-save-btn {
    width: auto;
    justify-self: end;
}

.settings-transition-save-btn:hover,
.settings-transition-save-btn:focus-visible {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    border-color: rgba(29, 78, 216, 0.62);
}

@media (max-width: 720px) {
    .settings-transition-head,
    .settings-transition-controls-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .settings-transition-toggle {
        align-items: flex-start;
    }
}

.settings-capi-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.settings-capi-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-capi-toggle-ui {
    display: inline-block;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid #b8c2cf;
    background: #cbd5e1;
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.settings-capi-toggle-ui::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
    transition: transform 0.2s ease;
}

.settings-capi-toggle-input:checked + .settings-capi-toggle-ui {
    background: #2563eb;
    border-color: #2563eb;
}

.settings-capi-toggle-input:checked + .settings-capi-toggle-ui::after {
    transform: translateX(18px);
}

.settings-capi-toggle-large .settings-capi-toggle-ui {
    width: 54px;
    height: 30px;
}

.settings-capi-toggle-large .settings-capi-toggle-ui::after {
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
}

.settings-capi-toggle-large .settings-capi-toggle-input:checked + .settings-capi-toggle-ui::after {
    transform: translateX(24px);
}

.settings-capi-input-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.settings-capi-rule-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.settings-capi-rule-label {
    line-height: 1.35;
    display: block;
    text-align: left;
}

.settings-capi-rule-row .settings-capi-toggle {
    justify-self: end;
    align-self: center;
}

.settings-capi-threshold-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    gap: 10px;
}

.settings-capi-threshold-grid > div {
    display: flex;
    flex-direction: column;
}

.settings-capi-threshold-grid > div > label {
    min-height: 36px;
    display: flex;
    align-items: flex-start;
}

.settings-capi-threshold-section {
    margin-top: 10px;
}

.settings-capi-hint-box {
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 0;
    padding: 7px 9px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.35);
    line-height: 1.35;
    min-height: 56px;
    display: flex;
    align-items: center;
}

.settings-capi-purchase-logic {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.settings-capi-purchase-label {
    color: #111827;
    font-weight: 600;
    font-size: 12px;
}

.settings-capi-purchase-state {
    font-weight: 700;
    font-size: 12px;
}

.settings-capi-purchase-state.is-on {
    color: #2f98ff;
}

.settings-capi-purchase-state.is-off {
    color: #111827;
}

.settings-capi-purchase-text {
    color: #111827;
    font-size: 12px;
}

.settings-capi-actions .btn {
    white-space: nowrap;
}

.settings-capi-save-btn {
    margin-left: auto;
}

.settings-capi-hint {
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 0;
}

.settings-capi-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

.settings-capi-test-row {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.settings-capi-test-label {
    font-weight: 600;
}

.settings-capi-result {
    min-height: 18px;
    margin-top: 8px;
    font-size: 12px;
}

.settings-capi-after-gap {
    margin-top: 16px;
}

.settings-bottom {
    margin-top: 30px;
}

.settings-capi-pys-config {
    margin-top: 4px;
}

.settings-capi-pys-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.settings-capi-pys-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-capi-pys-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-capi-pys-value {
    position: relative;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-capi-pys-value:hover {
    border-color: rgba(47, 152, 255, 0.45);
    box-shadow: 0 0 0 2px rgba(47, 152, 255, 0.08);
}

.settings-capi-pys-value:focus-visible {
    outline: none;
    border-color: rgba(47, 152, 255, 0.55);
    box-shadow: 0 0 0 2px rgba(47, 152, 255, 0.16);
}

.settings-capi-pys-value.is-copied {
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.35);
}

.settings-capi-pys-value-text {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    padding-right: 58px;
}

.settings-capi-pys-value.is-empty .settings-capi-pys-value-text {
    color: #6b7280;
}

.settings-capi-pys-value.is-copied .settings-capi-pys-value-text {
    font-weight: 700;
}

.settings-capi-pys-copied {
    position: absolute;
    top: 7px;
    right: 9px;
    font-size: 11px;
    color: #15803d;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.settings-capi-pys-value.is-copied .settings-capi-pys-copied {
    opacity: 1;
}

.settings-capi-pys-note {
    margin-top: 6px;
    font-size: 12px;
}

.settings-capi-save-row {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.settings-capi-advanced {
    margin-top: 10px;
}

.settings-capi-advanced summary {
    cursor: pointer;
    font-weight: 700;
    margin-bottom: 10px;
    list-style: none;
}

.settings-capi-advanced summary::-webkit-details-marker {
    display: none;
}

.settings-capi-advanced-body {
    border-top: 1px dashed rgba(255, 255, 255, 0.25);
    padding-top: 10px;
}

.settings-capi-advanced-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 10px;
}

.settings-capi-advanced-toggle {
    margin-top: 10px;
}

.settings-capi-warning {
    font-size: 12px;
    margin-bottom: 8px;
}

.settings-capi-replay-section {
    margin-top: 10px;
}

.settings-capi-replay-types {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0;
}

.settings-capi-replay-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.settings-hidden-input {
    display: none;
}

.settings-capi-modal {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 10, 18, 0.55);
}

.settings-capi-modal.hidden {
    display: none !important;
}

.settings-capi-modal-panel {
    width: min(1140px, 95vw);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    color: #0b1220;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.settings-capi-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.settings-capi-modal-head h3 {
    margin: 0;
}

.settings-capi-close {
    border: 1px solid #d5dbe6;
    background: #fff;
    color: #0b1220;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
}

.settings-capi-filter-bar {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
    gap: 8px;
    margin-bottom: 10px;
}

.settings-capi-filter-bar select,
.settings-capi-filter-bar input[type="date"],
.settings-capi-filter-bar input[type="text"] {
    background: #e6ebf1 !important;
    background-image: none !important;
    border: 1px solid rgba(148, 163, 184, 0.55);
    color: #0f172a;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.settings-capi-filter-bar select:focus,
.settings-capi-filter-bar input[type="date"]:focus,
.settings-capi-filter-bar input[type="text"]:focus {
    border-color: #7aa9da;
    box-shadow: 0 0 0 2px rgba(122, 169, 218, 0.18);
}

.settings-capi-filter-bar select option {
    background: #e8edf3;
    color: #0f172a;
}

.settings-capi-filter-bar #capiApplyFiltersBtn {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(148, 163, 184, 0.55);
    background: #e6ebf1;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.settings-capi-filter-bar #capiApplyFiltersBtn:hover {
    background: #dbe3ec;
}

.settings-capi-table-wrap {
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.settings-capi-table {
    width: 100%;
    border-collapse: collapse;
}

.settings-capi-table th,
.settings-capi-table td {
    border-bottom: 1px solid #eef2f7;
    padding: 8px;
    text-align: left;
    font-size: 13px;
}

.settings-capi-status-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.settings-capi-status-badge.sent {
    background: #dcfce7;
    color: #166534;
}

.settings-capi-status-badge.failed {
    background: #fee2e2;
    color: #991b1b;
}

.settings-capi-status-badge.failed_transient,
.settings-capi-status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.settings-capi-status-badge.failed_permanent {
    background: #fee2e2;
    color: #991b1b;
}

.settings-capi-status-badge.ready {
    background: #dbeafe;
    color: #1d4ed8;
}

.settings-capi-status-badge.replayed,
.settings-capi-status-badge.skipped {
    background: #e5e7eb;
    color: #374151;
}

.settings-capi-health {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #f8fafc;
}

.settings-capi-health-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.settings-capi-health-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.settings-capi-health-badge.ok {
    background: #dcfce7;
    color: #166534;
}

.settings-capi-health-badge.warning {
    background: #fef3c7;
    color: #92400e;
}

.settings-capi-health-badge.paused {
    background: #fee2e2;
    color: #991b1b;
}

.settings-capi-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 6px 10px;
    font-size: 12px;
}

.settings-capi-paused-banner {
    margin-top: 8px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #7f1d1d;
    border-radius: 8px;
    padding: 8px 10px;
    display: none;
}

.settings-capi-paused-banner a {
    color: #991b1b;
    font-weight: 700;
    text-decoration: underline;
}

.settings-capi-row-permanent {
    background: #fff1f2;
}

.settings-capi-row-transient {
    background: #fffbeb;
}

.settings-capi-status-meta {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.3;
    color: #6b7280;
}

.settings-capi-modal-footer {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .settings-capi-head-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .settings-capi-main-grid,
    .settings-capi-input-row,
    .settings-capi-threshold-grid,
    .settings-capi-pys-grid,
    .settings-capi-advanced-grid,
    .settings-capi-replay-row {
        grid-template-columns: 1fr;
    }

    .settings-capi-filter-bar {
        grid-template-columns: 1fr;
    }

    .settings-capi-actions {
        flex-wrap: wrap;
    }

    .settings-capi-save-btn {
        margin-left: 0;
    }

    .settings-capi-purchase-logic {
        white-space: normal;
        flex-wrap: wrap;
    }
}

.sheet-create-card,
.sheet-panel {
    box-shadow: 0 18px 36px rgba(15, 35, 55, 0.09), 0 10px 22px rgba(59, 107, 255, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.sheet-create-card:hover,
.sheet-panel:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgba(15, 35, 55, 0.11), 0 12px 24px rgba(59, 107, 255, 0.06);
}

.sheet-create-card {
    border-color: rgba(59, 107, 255, 0.14);
}

.sheet-panel {
    border-color: rgba(59, 107, 255, 0.14);
}

.sheet-panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.sheet-panel-head h3 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.sheet-panel-meta {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(59, 107, 255, 0.12);
    background: rgba(243, 247, 255, 0.9);
    color: #35526f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.sheet-create-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 10px;
    align-items: center;
}

body.sheet-ui .sheet-actions {
    gap: 10px;
    margin-bottom: 14px;
}

.sheet-actions-compact {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.sheet-inline-actions {
    display: inline-flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

body.sheet-ui .sheet-inline-actions .btn,
body.sheet-ui .sheet-create-grid .btn {
    min-height: 40px;
    padding-left: 14px;
    padding-right: 14px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body.sheet-ui .sheet-inline-actions .btn:hover:not(:disabled),
body.sheet-ui .sheet-create-grid .btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 35, 55, 0.12);
}

.sheet-inline-actions .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

body.sheet-ui .sheet-wrap {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: rgba(255,255,255,0.74);
    overflow: auto;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

body.sheet-ui .sheet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 720px;
}

body.sheet-ui .sheet-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243,247,255,0.96));
    font-weight: 700;
}

body.sheet-ui .sheet-table th,
body.sheet-ui .sheet-table td {
    border-bottom: 1px solid #E7ECF2;
    color: #2d3345;
    padding: 9px 10px;
    vertical-align: top;
}

.sheet-id-col {
    width: 64px;
    min-width: 64px;
    text-align: center;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}

.sheet-data-cell {
    min-width: 160px;
    white-space: pre-wrap;
    word-break: break-word;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.sheet-data-cell[contenteditable="true"] {
    cursor: cell;
}

body.sheet-ui td.sheet-data-cell:hover {
    background: rgba(201, 220, 241, 0.30);
}

body.sheet-ui td.sheet-data-cell[data-editing="1"] {
    cursor: text;
}

body.sheet-ui td.sheet-data-cell.sheet-cell-selected {
    background: rgba(166, 200, 230, 0.46);
}

body.sheet-ui td.sheet-data-cell.sheet-cell-active {
    box-shadow: inset 0 0 0 2px rgba(88, 126, 160, 0.72);
}

.sheet-page > .card,
.sheet-hero-stat {
    animation: sheetSurfaceRise 0.34s ease both;
}

.sheet-page > .card:nth-child(1) { animation-delay: 0.02s; }
.sheet-page > .card:nth-child(2) { animation-delay: 0.06s; }
.sheet-page > .card:nth-child(3) { animation-delay: 0.10s; }

@keyframes sheetSurfaceRise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sheet-page > .card,
    .sheet-hero-stat,
    .sheet-hero-tips span,
    .sheet-create-card,
    .sheet-panel,
    body.sheet-ui .sheet-inline-actions .btn,
    body.sheet-ui .sheet-create-grid .btn {
        animation: none !important;
        transition: none !important;
    }
}

body.sheet-ui td.sheet-data-cell.sheet-fill-preview {
    background: rgba(150, 194, 226, 0.25);
}

body.sheet-ui td.sheet-data-cell.sheet-fill-handle-cell {
    position: relative;
}

body.sheet-ui td.sheet-data-cell.sheet-fill-handle-cell::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    right: 2px;
    bottom: 2px;
    border-radius: 2px;
    background: #5a89b2;
}

body.sheet-ui .sheet-data-cell[contenteditable="true"]:focus,
body.sheet-ui #sheetNewColumnDraft[contenteditable="true"]:focus {
    outline: none;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 0 0 2px rgba(120, 160, 190, 0.24), inset 0 0 0 1px #D5DFEA;
}

.sheet-new-col-head {
    min-width: 170px;
}

#sheetNewColumnDraft {
    display: block;
    min-height: 20px;
    border-radius: 8px;
    padding: 4px 8px;
    white-space: nowrap;
}

#sheetNewColumnDraft[contenteditable="true"]:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
}

.sheet-draft-row td {
    background: rgba(236, 245, 255, 0.65);
}

.sheet-draft-cell[contenteditable="true"]:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
}

.sheet-draft-edge,
.sheet-draft-corner {
    text-align: center;
    color: #94a3b8;
    min-width: 86px;
    font-size: 12px;
}

@media (max-width: 980px) {
    .sheet-hero-main {
        flex-direction: column;
    }

    .sheet-hero-stats {
        min-width: 0;
        width: 100%;
    }

    .sheet-panel-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .sheet-create-grid {
        grid-template-columns: 1fr;
    }

    .sheet-actions-compact {
        grid-template-columns: 1fr;
    }

    .sheet-inline-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .sheet-hero {
        padding: 16px;
    }

    .sheet-hero h2 {
        font-size: 26px;
    }

    .sheet-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sheet-inline-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .sheet-inline-actions .btn {
        width: 100%;
    }
}

/* Global app-modern structure */
body.app-modern {
    background: #f6f8fc;
}

body.app-modern .bg {
    background:
        radial-gradient(circle at 12% 18%, rgba(89, 160, 244, 0.16), transparent 52%),
        radial-gradient(circle at 88% 12%, rgba(61, 106, 255, 0.1), transparent 48%),
        radial-gradient(circle at 52% 88%, rgba(117, 183, 255, 0.1), transparent 50%),
        linear-gradient(#f4f7fb, #f4f7fb);
}

body.app-modern .app-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 14px;
    padding-bottom: 86px;
}

body.app-modern .app-page-head {
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: 18px;
    border-color: rgba(59, 107, 255, 0.12);
    box-shadow: 0 18px 38px rgba(15, 35, 55, 0.06), 0 10px 20px rgba(59, 107, 255, 0.05);
}

body.app-modern .app-page-head-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

body.app-modern .app-page-title-wrap {
    min-width: 0;
}

body.app-modern .app-page-kicker {
    margin-bottom: 6px;
    color: #5c6f8a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.app-modern .app-page-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body.app-modern .app-page-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

body.app-modern .app-page-subtitle {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.45;
    max-width: 760px;
}

body.app-modern .app-page-head-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

body.app-modern .app-shell-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(59, 107, 255, 0.12);
    background: rgba(243, 247, 255, 0.94);
    color: #46607d;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.app-modern .app-shell-pill.is-blue {
    border-color: rgba(59, 107, 255, 0.18);
    background: linear-gradient(180deg, rgba(231, 239, 255, 0.96), rgba(219, 232, 255, 0.92));
    color: #2250c4;
}

body.app-modern .app-shell-pill.is-muted {
    border-color: rgba(100, 116, 139, 0.12);
    background: rgba(244, 247, 251, 0.96);
    color: #62748a;
}

body.dashboard-ui .dashboard-shell {
    display: grid;
    gap: 16px;
}

body.dashboard-ui .dashboard-notice {
    margin-top: 0;
}

body.dashboard-ui .dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(43, 100, 180, 0.12);
    background:
        radial-gradient(circle at top left, rgba(43, 100, 180, 0.11), transparent 34%),
        radial-gradient(circle at bottom right, rgba(19, 172, 132, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
}

body.dashboard-ui .dashboard-eyebrow,
body.dashboard-ui .dashboard-panel-kicker {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4f6b95;
}

body.dashboard-ui .dashboard-hero h2 {
    margin: 0;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #142033;
}

body.dashboard-ui .dashboard-hero-text {
    margin: 14px 0 0;
    max-width: 72ch;
    color: #4b5a73;
    font-size: 14px;
    line-height: 1.7;
}

body.dashboard-ui .dashboard-hero-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.dashboard-ui .dashboard-status-pill,
body.dashboard-ui .dashboard-status-meta {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

body.dashboard-ui .dashboard-status-pill.is-on {
    background: rgba(16, 185, 129, 0.12);
    color: #0f8f67;
}

body.dashboard-ui .dashboard-status-pill.is-off {
    background: rgba(239, 68, 68, 0.12);
    color: #b42318;
}

body.dashboard-ui .dashboard-status-meta {
    background: rgba(28, 40, 60, 0.05);
    color: #475467;
}

body.dashboard-ui .dashboard-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
}

body.dashboard-ui .dashboard-hero-actions .btn {
    justify-content: center;
}

body.dashboard-ui .dashboard-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

body.dashboard-ui .dashboard-primary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.dashboard-ui .dashboard-secondary-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 16px;
    align-items: start;
}

body.dashboard-ui .dashboard-score-strip {
    padding: 18px;
    border: 1px solid rgba(31, 47, 78, 0.08);
}

body.dashboard-ui .dashboard-metric-card {
    position: relative;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(31, 47, 78, 0.08);
}

body.dashboard-ui .dashboard-metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
    background: #2d6cdf;
}

body.dashboard-ui .dashboard-metric-card.tone-success::before { background: #12b981; }
body.dashboard-ui .dashboard-metric-card.tone-warning::before { background: #f59e0b; }
body.dashboard-ui .dashboard-metric-card.tone-danger::before { background: #ef4444; }

body.dashboard-ui .dashboard-metric-label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #506178;
}

body.dashboard-ui .dashboard-metric-value {
    margin: 10px 0 6px;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: #142033;
}

body.dashboard-ui .dashboard-metric-meta {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

body.dashboard-ui .dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 16px;
}

body.dashboard-ui .dashboard-feature-card,
body.dashboard-ui .dashboard-compact-card {
    border: 1px solid rgba(31, 47, 78, 0.08);
}

body.dashboard-ui .dashboard-feature-card {
    padding: 20px;
}

body.dashboard-ui .dashboard-feature-head,
body.dashboard-ui .dashboard-compact-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body.dashboard-ui .dashboard-feature-head h3,
body.dashboard-ui .dashboard-compact-head h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #182435;
}

body.dashboard-ui .dashboard-feature-desc {
    margin: 12px 0 0;
    color: #526177;
    font-size: 14px;
    line-height: 1.65;
}

body.dashboard-ui .dashboard-feature-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

body.dashboard-ui .dashboard-feature-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

body.dashboard-ui .dashboard-secondary-modules {
    display: grid;
    gap: 16px;
}

body.dashboard-ui .dashboard-feature-card.status-active,
body.dashboard-ui .dashboard-compact-card.status-active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.98));
}

body.dashboard-ui .dashboard-feature-card.status-warning,
body.dashboard-ui .dashboard-feature-card.status-paused,
body.dashboard-ui .dashboard-compact-card.status-warning,
body.dashboard-ui .dashboard-compact-card.status-paused {
    background:
        linear-gradient(180deg, rgba(255, 251, 235, 0.92), rgba(255, 255, 255, 0.98));
}

body.dashboard-ui .dashboard-feature-card.status-off,
body.dashboard-ui .dashboard-compact-card.status-off {
    background:
        linear-gradient(180deg, rgba(249, 250, 251, 0.96), rgba(255, 255, 255, 0.98));
}

body.dashboard-ui .dashboard-feature-card.status-quiet,
body.dashboard-ui .dashboard-compact-card.status-quiet {
    background:
        linear-gradient(180deg, rgba(245, 247, 250, 0.98), rgba(255, 255, 255, 0.98));
}

body.dashboard-ui .dashboard-compact-card {
    padding: 18px;
}

body.dashboard-ui .dashboard-compact-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

body.dashboard-ui .dashboard-compact-metric {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(249, 250, 251, 0.95);
    border: 1px solid rgba(31, 47, 78, 0.08);
}

body.dashboard-ui .dashboard-compact-metric span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #667085;
}

body.dashboard-ui .dashboard-compact-metric strong {
    font-size: 24px;
    line-height: 1;
    color: #101828;
}

body.dashboard-ui .dashboard-compact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

body.dashboard-ui .dashboard-module-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

body.dashboard-ui .dashboard-module-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    color: #475467;
    background: rgba(30, 41, 59, 0.05);
}

body.dashboard-ui .dashboard-module-status {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

body.dashboard-ui .dashboard-module-status.status-active {
    background: rgba(16, 185, 129, 0.12);
    color: #0f8f67;
}

body.dashboard-ui .dashboard-module-status.status-warning,
body.dashboard-ui .dashboard-module-status.status-paused {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

body.dashboard-ui .dashboard-module-status.status-off {
    background: rgba(148, 163, 184, 0.18);
    color: #475467;
}

body.dashboard-ui .dashboard-module-status.status-quiet {
    background: rgba(59, 130, 246, 0.12);
    color: #285fc4;
}

body.dashboard-ops-ui .dashboard-ops-shell {
    display: grid;
    gap: 12px;
}

body.dashboard-ops-ui .dashboard-topbar-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px;
    border: 1px solid rgba(59, 107, 255, 0.14);
    background:
        radial-gradient(circle at top right, rgba(59, 107, 255, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(243, 247, 255, 0.98));
    box-shadow: 0 16px 34px rgba(20, 33, 58, 0.07), 0 10px 24px rgba(59, 107, 255, 0.06);
}

body.dashboard-ops-ui .dashboard-topbar-left,
body.dashboard-ops-ui .dashboard-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.dashboard-ops-ui .dashboard-topbar-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #172233;
}

body.dashboard-ops-ui .dashboard-topbar-sub {
    font-size: 11px;
    color: #7a8698;
}

body.dashboard-ops-ui .dashboard-health-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

body.dashboard-ops-ui .dashboard-health-dot.ok { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14); }
body.dashboard-ops-ui .dashboard-health-dot.warn { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14); }
body.dashboard-ops-ui .dashboard-health-dot.err { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14); }

body.dashboard-ops-ui .dashboard-topbar-pill,
body.dashboard-ops-ui .dashboard-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

body.dashboard-ops-ui .dashboard-topbar-pill.ok,
body.dashboard-ops-ui .dashboard-chip.ok { background: rgba(16, 185, 129, 0.12); color: #0f8f67; }
body.dashboard-ops-ui .dashboard-topbar-pill.warn,
body.dashboard-ops-ui .dashboard-chip.warn { background: rgba(245, 158, 11, 0.14); color: #9a6708; }
body.dashboard-ops-ui .dashboard-topbar-pill.err,
body.dashboard-ops-ui .dashboard-chip.err { background: rgba(239, 68, 68, 0.12); color: #c33232; }
body.dashboard-ops-ui .dashboard-chip.neutral { background: rgba(30, 41, 59, 0.06); color: #526177; gap: 6px; }
body.dashboard-ops-ui .dashboard-chip.mode-live { background: rgba(16, 185, 129, 0.12); color: #0f8f67; }
body.dashboard-ops-ui .dashboard-chip.mode-test { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
body.dashboard-ops-ui .dashboard-chip.mode-paused { background: rgba(245, 158, 11, 0.14); color: #9a6708; }

body.dashboard-ops-ui .dashboard-refresh-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #42526a;
    padding: 0 2px;
}

body.dashboard-ops-ui .dashboard-refresh-svg {
    width: 28px;
    height: 28px;
    transform: rotate(-90deg);
}

body.dashboard-ops-ui .dashboard-refresh-track,
body.dashboard-ops-ui .dashboard-refresh-progress {
    fill: none;
    stroke-width: 3;
}

body.dashboard-ops-ui .dashboard-refresh-track { stroke: #e6ebf3; }
body.dashboard-ops-ui .dashboard-refresh-progress {
    stroke: #3b6bff;
    stroke-linecap: round;
}

body.dashboard-ops-ui .dashboard-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff;
    border: 1px solid rgba(59, 107, 255, 0.14);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(20, 33, 58, 0.07), 0 12px 28px rgba(59, 107, 255, 0.06);
}

body.dashboard-ops-ui .dashboard-section-stack {
    display: grid;
    gap: 12px;
}

body.dashboard-ops-ui .dashboard-module-section {
    display: grid;
    gap: 10px;
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

body.dashboard-ops-ui .dashboard-module-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
}

body.dashboard-ops-ui .dashboard-module-band-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body.dashboard-ops-ui .dashboard-module-band h2 {
    margin: 0;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #14213a;
    font-weight: 900;
    text-transform: uppercase;
    position: relative;
    padding-left: 12px;
}

body.dashboard-ops-ui .dashboard-module-band h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 14px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: #3b6bff;
}

body.dashboard-ops-ui .dashboard-drag-handle {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(59, 107, 255, 0.16);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(243, 247, 255, 0.98), rgba(230, 238, 255, 0.94));
    box-shadow: 0 4px 12px rgba(59, 107, 255, 0.1);
    color: #3357b5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    cursor: grab;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body.dashboard-ops-ui .dashboard-drag-handle:active {
    cursor: grabbing;
}

body.dashboard-ops-ui .dashboard-drag-handle:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(59, 107, 255, 0.14);
    border-color: rgba(59, 107, 255, 0.26);
}

body.dashboard-ops-ui .dashboard-module-band-meta {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(59, 107, 255, 0.14);
    background: rgba(243, 247, 255, 0.94);
    color: #4f6077;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.dashboard-ops-ui .dashboard-module-section.is-dragging {
    opacity: 0.82;
    transform: scale(0.995);
}

body.dashboard-ops-ui .dashboard-module-section.is-drop-target {
    border-radius: 18px;
}

body.dashboard-ops-ui .dashboard-module-section.is-drop-target.drop-before {
    box-shadow: inset 0 3px 0 #3b6bff;
}

body.dashboard-ops-ui .dashboard-module-section.is-drop-target.drop-after {
    box-shadow: inset 0 -3px 0 #3b6bff;
}

body.dashboard-ops-ui .section-broadcast .dashboard-module-band h2::before {
    background: #4338ca;
}

body.dashboard-ops-ui .section-broadcast .dashboard-module-band-meta {
    border-color: rgba(67, 56, 202, 0.16);
    background: rgba(233, 232, 255, 0.9);
    color: #4434b8;
}

body.dashboard-ops-ui .section-leads .dashboard-module-band h2::before {
    background: #2563eb;
}

body.dashboard-ops-ui .section-leads .dashboard-module-band-meta {
    border-color: rgba(37, 99, 235, 0.16);
    background: rgba(225, 238, 255, 0.92);
    color: #1f5ace;
}

body.dashboard-ops-ui .section-capi .dashboard-module-band h2::before {
    background: #dc2626;
}

body.dashboard-ops-ui .section-capi .dashboard-module-band-meta {
    border-color: rgba(220, 38, 38, 0.16);
    background: rgba(255, 237, 237, 0.92);
    color: #c12424;
}

body.dashboard-ops-ui .section-system .dashboard-module-band h2::before {
    background: #64748b;
}

body.dashboard-ops-ui .section-system .dashboard-module-band-meta {
    border-color: rgba(100, 116, 139, 0.15);
    background: rgba(242, 245, 249, 0.94);
    color: #58687f;
}

body.dashboard-ops-ui .dashboard-kpi-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-right: 1px solid rgba(59, 107, 255, 0.1);
    transition: background 0.18s ease, transform 0.18s ease;
}

body.dashboard-ops-ui .dashboard-kpi-cell:last-child { border-right: none; }

body.dashboard-ops-ui .dashboard-kpi-cell:hover {
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(239, 246, 255, 0.96));
    transform: translateY(-1px);
}

body.dashboard-ops-ui .dashboard-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
}

body.dashboard-ops-ui .dashboard-kpi-cell.tone-leads .dashboard-kpi-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; }
body.dashboard-ops-ui .dashboard-kpi-cell.tone-broadcast .dashboard-kpi-icon { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #4338ca; }
body.dashboard-ops-ui .dashboard-kpi-cell.tone-capi .dashboard-kpi-icon { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626; }
body.dashboard-ops-ui .dashboard-kpi-cell.tone-ai .dashboard-kpi-icon { background: linear-gradient(135deg, #dbeafe, #c7d2fe); color: #3730a3; }

body.dashboard-ops-ui .dashboard-kpi-value {
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

body.dashboard-ops-ui .dashboard-kpi-label {
    margin-top: 4px;
    font-size: 10px;
    color: #7a8698;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.dashboard-ops-ui .dashboard-kpi-value.tone-leads { color: #2563eb; }
body.dashboard-ops-ui .dashboard-kpi-value.tone-broadcast { color: #4338ca; }
body.dashboard-ops-ui .dashboard-kpi-value.tone-capi { color: #dc2626; }
body.dashboard-ops-ui .dashboard-kpi-value.tone-ai { color: #1d4ed8; }

body.dashboard-ops-ui .dashboard-widget-grid,
body.dashboard-ops-ui .dashboard-bottom-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
}

body.dashboard-ops-ui .dashboard-widget {
    grid-column: span 12;
    background: #fff;
    border: 1px solid rgba(59, 107, 255, 0.12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(20, 33, 58, 0.06), 0 10px 22px rgba(59, 107, 255, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body.dashboard-ops-ui .dashboard-widget:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(20, 33, 58, 0.08), 0 20px 36px rgba(59, 107, 255, 0.08);
}

body.dashboard-ops-ui .dashboard-widget.span-3 { grid-column: span 3; }
body.dashboard-ops-ui .dashboard-widget.span-4 { grid-column: span 4; }
body.dashboard-ops-ui .dashboard-widget.span-5 { grid-column: span 5; }
body.dashboard-ops-ui .dashboard-widget.span-6 { grid-column: span 6; }
body.dashboard-ops-ui .dashboard-widget.span-12 { grid-column: span 12; }

body.dashboard-ops-ui .dashboard-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(59, 107, 255, 0.1);
    background: linear-gradient(180deg, rgba(243, 247, 255, 0.98), rgba(255, 255, 255, 0.98));
}

body.dashboard-ops-ui .section-broadcast .dashboard-widget {
    border-top: 2px solid rgba(67, 56, 202, 0.22);
}

body.dashboard-ops-ui .section-leads .dashboard-widget {
    border-top: 2px solid rgba(37, 99, 235, 0.2);
}

body.dashboard-ops-ui .section-capi .dashboard-widget {
    border-top: 2px solid rgba(239, 68, 68, 0.16);
}

body.dashboard-ops-ui .section-system .dashboard-widget {
    border-top: 2px solid rgba(71, 85, 105, 0.14);
}

body.dashboard-ops-ui .dashboard-widget-kicker {
    margin: 0 0 4px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a96a8;
}

body.dashboard-ops-ui .dashboard-widget-head h3 {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #2b4b86;
}

body.dashboard-ops-ui .dashboard-widget-body {
    padding: 10px 12px;
}

body.dashboard-ops-ui .dashboard-widget-body.no-pad { padding: 0; }

body.dashboard-ops-ui .dashboard-topbar-right .btn.ghost {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239,246,255,0.95));
    border-color: rgba(59, 107, 255, 0.18);
    color: #2453d6;
}

body.dashboard-ops-ui .dashboard-topbar-right .btn.ghost:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(243,247,255,1), rgba(226,236,255,0.98));
    border-color: rgba(59, 107, 255, 0.28);
    color: #1f4fc9;
}

body.dashboard-ops-ui .dashboard-funnel-list,
body.dashboard-ops-ui .dashboard-stat-list,
body.dashboard-ops-ui .dashboard-campaign-list,
body.dashboard-ops-ui .dashboard-overdue-list,
body.dashboard-ops-ui .dashboard-affinity-list,
body.dashboard-ops-ui .dashboard-event-list,
body.dashboard-ops-ui .dashboard-config-list,
body.dashboard-ops-ui .dashboard-mini-table {
    display: grid;
    gap: 8px;
}

body.dashboard-ops-ui .dashboard-funnel-row,
body.dashboard-ops-ui .dashboard-stat-line,
body.dashboard-ops-ui .dashboard-campaign-row,
body.dashboard-ops-ui .dashboard-overdue-row,
body.dashboard-ops-ui .dashboard-affinity-row,
body.dashboard-ops-ui .dashboard-mini-row,
body.dashboard-ops-ui .dashboard-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.dashboard-ops-ui .dashboard-funnel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

body.dashboard-ops-ui .dashboard-funnel-dot.sent,
body.dashboard-ops-ui .dashboard-funnel-bar > span.sent { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
body.dashboard-ops-ui .dashboard-funnel-dot.delivered,
body.dashboard-ops-ui .dashboard-funnel-bar > span.delivered { background: linear-gradient(90deg, #3b6bff, #7c96ff); }
body.dashboard-ops-ui .dashboard-funnel-dot.read,
body.dashboard-ops-ui .dashboard-funnel-bar > span.read { background: linear-gradient(90deg, #10b981, #34d399); }
body.dashboard-ops-ui .dashboard-funnel-dot.clicked,
body.dashboard-ops-ui .dashboard-funnel-bar > span.clicked { background: linear-gradient(90deg, #f59e0b, #fb923c); }
body.dashboard-ops-ui .dashboard-funnel-dot.blocked,
body.dashboard-ops-ui .dashboard-funnel-bar > span.blocked { background: linear-gradient(90deg, #ef4444, #f87171); }

body.dashboard-ops-ui .dashboard-funnel-label {
    width: 62px;
    flex-shrink: 0;
    font-size: 10px;
    color: #5b6677;
}

body.dashboard-ops-ui .dashboard-funnel-bar,
body.dashboard-ops-ui .dashboard-score-bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: #edf1f7;
    overflow: hidden;
}

body.dashboard-ops-ui .dashboard-funnel-bar > span,
body.dashboard-ops-ui .dashboard-score-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

body.dashboard-ops-ui .dashboard-funnel-value,
body.dashboard-ops-ui .dashboard-funnel-pct {
    width: 40px;
    flex-shrink: 0;
    text-align: right;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

body.dashboard-ops-ui .dashboard-funnel-value { font-weight: 800; color: #111827; }
body.dashboard-ops-ui .dashboard-funnel-value.sent { color: #64748b; }
body.dashboard-ops-ui .dashboard-funnel-value.delivered { color: #2563eb; }
body.dashboard-ops-ui .dashboard-funnel-value.read { color: #10b981; }
body.dashboard-ops-ui .dashboard-funnel-value.clicked { color: #f59e0b; }
body.dashboard-ops-ui .dashboard-funnel-value.blocked { color: #ef4444; }
body.dashboard-ops-ui .dashboard-funnel-pct { color: #7a8698; }

body.dashboard-ops-ui .dashboard-trend-chart {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    min-height: 148px;
}

body.dashboard-ops-ui .dashboard-trend-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

body.dashboard-ops-ui .dashboard-trend-stack {
    height: 108px;
    width: 24px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 2px;
}

body.dashboard-ops-ui .dashboard-trend-stack span {
    display: block;
    width: 100%;
    border-radius: 8px 8px 0 0;
}

body.dashboard-ops-ui .dashboard-trend-stack .wa { background: linear-gradient(180deg, #f59e0b, #fb923c); }
body.dashboard-ops-ui .dashboard-trend-stack .email { background: linear-gradient(180deg, #3b6bff, #7c96ff); }

body.dashboard-ops-ui .dashboard-trend-total { font-size: 11px; font-weight: 800; color: #111827; }
body.dashboard-ops-ui .dashboard-trend-label,
body.dashboard-ops-ui .dashboard-row-sub {
    font-size: 9px;
    color: #8a96a8;
}

body.dashboard-ops-ui .dashboard-trend-legend {
    display: flex;
    gap: 14px;
    margin-top: 12px;
    font-size: 11px;
    color: #5b6677;
}

body.dashboard-ops-ui .dashboard-trend-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 5px;
}

body.dashboard-ops-ui .dashboard-trend-legend .wa { background: #f59e0b; }
body.dashboard-ops-ui .dashboard-trend-legend .email { background: #3b6bff; }

body.dashboard-ops-ui .dashboard-stat-line {
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid rgba(31, 47, 78, 0.06);
}

body.dashboard-ops-ui .dashboard-stat-line span { color: #5b6677; font-size: 10px; }
body.dashboard-ops-ui .dashboard-stat-line strong { color: #111827; font-size: 13px; font-variant-numeric: tabular-nums; }

body.dashboard-ops-ui .dashboard-score-row { display: grid; gap: 7px; }
body.dashboard-ops-ui .dashboard-score-list { display: grid; gap: 10px; }
body.dashboard-ops-ui .dashboard-score-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.dashboard-ops-ui .dashboard-score-label.cold { color: #2563eb; font-weight: 800; }
body.dashboard-ops-ui .dashboard-score-label.warm { color: #d97706; font-weight: 800; }
body.dashboard-ops-ui .dashboard-score-label.hot { color: #dc2626; font-weight: 800; }
body.dashboard-ops-ui .dashboard-score-bar > span.cold { background: linear-gradient(90deg, #2563eb, #60a5fa); }
body.dashboard-ops-ui .dashboard-score-bar > span.warm { background: linear-gradient(90deg, #f59e0b, #fb923c); }
body.dashboard-ops-ui .dashboard-score-bar > span.hot { background: linear-gradient(90deg, #ef4444, #f97316); }

body.dashboard-ops-ui .dashboard-platform-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.dashboard-ops-ui .dashboard-platform-chart-wrap {
    position: relative;
    min-height: 162px;
    margin-bottom: 10px;
    padding: 8px 10px 4px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
    background: color-mix(in srgb, var(--color-card) 92%, transparent);
}

body.dashboard-ops-ui .dashboard-platform-chart-wrap.hidden {
    display: block;
    visibility: hidden;
}

body.dashboard-ops-ui .dashboard-platform-chart-wrap canvas {
    width: 100% !important;
    height: 150px !important;
}

body.dashboard-ops-ui .dashboard-platform-card {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(31, 47, 78, 0.08);
    background: #f8fafc;
}

body.dashboard-ops-ui .dashboard-platform-card strong {
    display: block;
    font-size: 20px;
    line-height: 1;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

body.dashboard-ops-ui .dashboard-platform-card span {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    color: #5b6677;
}

body.dashboard-ops-ui .dashboard-platform-card strong.wa { color: #2563eb; }
body.dashboard-ops-ui .dashboard-platform-card strong.messenger { color: #1d4ed8; }
body.dashboard-ops-ui .dashboard-platform-card strong.instagram { color: #7c3aed; }
body.dashboard-ops-ui .dashboard-platform-card strong.facebook { color: #1e40af; }

body.dashboard-ops-ui .dashboard-platform-card.wa { background: #eff6ff; }
body.dashboard-ops-ui .dashboard-platform-card.messenger { background: #eef2ff; }
body.dashboard-ops-ui .dashboard-platform-card.instagram { background: #f5f3ff; }
body.dashboard-ops-ui .dashboard-platform-card.facebook { background: #dbeafe; }

body.dashboard-ops-ui .dashboard-chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.dashboard-ops-ui .dashboard-chip-value {
    color: #2563eb;
    font-variant-numeric: tabular-nums;
}

body.dashboard-ops-ui .dashboard-campaign-row,
body.dashboard-ops-ui .dashboard-overdue-row,
body.dashboard-ops-ui .dashboard-affinity-row,
body.dashboard-ops-ui .dashboard-config-row,
body.dashboard-ops-ui .dashboard-mini-row {
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid rgba(31, 47, 78, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body.dashboard-ops-ui .dashboard-campaign-row:hover,
body.dashboard-ops-ui .dashboard-overdue-row:hover,
body.dashboard-ops-ui .dashboard-affinity-row:hover,
body.dashboard-ops-ui .dashboard-config-row:hover,
body.dashboard-ops-ui .dashboard-mini-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(20, 33, 58, 0.07);
    border-color: rgba(59, 107, 255, 0.18);
}

body.dashboard-ops-ui .dashboard-campaign-row strong,
body.dashboard-ops-ui .dashboard-overdue-row strong,
body.dashboard-ops-ui .dashboard-affinity-row strong,
body.dashboard-ops-ui .dashboard-config-row strong,
body.dashboard-ops-ui .dashboard-mini-row strong {
    font-size: 11px;
    color: #172233;
    font-variant-numeric: tabular-nums;
}

body.dashboard-ops-ui .dashboard-campaign-badges,
body.dashboard-ops-ui .dashboard-compact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

body.dashboard-ops-ui .dashboard-capi-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

body.dashboard-ops-ui .dashboard-emq-ring {
    --p: 0;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: conic-gradient(#3b6bff calc(var(--p) * 1%), #dbe7ff 0);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.dashboard-ops-ui .dashboard-emq-ring > div {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.dashboard-ops-ui .dashboard-emq-ring strong {
    font-size: 15px;
    line-height: 1;
    color: #172233;
    font-variant-numeric: tabular-nums;
}

body.dashboard-ops-ui .dashboard-topbar-card,
body.dashboard-ops-ui .dashboard-kpi-strip,
body.dashboard-ops-ui .dashboard-module-section,
body.dashboard-ops-ui .dashboard-widget {
    animation: dashboardSurfaceRise 0.34s ease both;
}

body.dashboard-ops-ui .dashboard-topbar-card { animation-delay: 0.02s; }
body.dashboard-ops-ui .dashboard-kpi-strip { animation-delay: 0.05s; }
body.dashboard-ops-ui .dashboard-module-section:nth-child(1) { animation-delay: 0.08s; }
body.dashboard-ops-ui .dashboard-module-section:nth-child(2) { animation-delay: 0.11s; }
body.dashboard-ops-ui .dashboard-module-section:nth-child(3) { animation-delay: 0.14s; }
body.dashboard-ops-ui .dashboard-module-section:nth-child(4) { animation-delay: 0.17s; }

@keyframes dashboardSurfaceRise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.dashboard-ops-ui .dashboard-topbar-card,
    body.dashboard-ops-ui .dashboard-kpi-strip,
    body.dashboard-ops-ui .dashboard-module-section,
    body.dashboard-ops-ui .dashboard-widget,
    body.dashboard-ops-ui .dashboard-kpi-cell,
    body.dashboard-ops-ui .dashboard-drag-handle,
    body.dashboard-ops-ui .dashboard-campaign-row,
    body.dashboard-ops-ui .dashboard-overdue-row,
    body.dashboard-ops-ui .dashboard-affinity-row,
    body.dashboard-ops-ui .dashboard-config-row,
    body.dashboard-ops-ui .dashboard-mini-row {
        animation: none !important;
        transition: none !important;
    }
}

body.dashboard-ops-ui .dashboard-emq-ring span {
    margin-top: 4px;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a96a8;
}

body.dashboard-ops-ui .dashboard-capi-stats {
    display: grid;
    gap: 6px;
    flex: 1;
}

body.dashboard-ops-ui .dashboard-capi-stats div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 9px;
    border-radius: 9px;
    background: #f8fafc;
}

body.dashboard-ops-ui .dashboard-capi-stats span { color: #5b6677; font-size: 10px; }
body.dashboard-ops-ui .dashboard-capi-stats strong { color: #111827; font-size: 12px; font-variant-numeric: tabular-nums; }
body.dashboard-ops-ui .dashboard-capi-stats strong.tone-ok { color: #10b981; }
body.dashboard-ops-ui .dashboard-capi-stats strong.tone-bad { color: #ef4444; }
body.dashboard-ops-ui .dashboard-capi-stats strong.tone-warn { color: #f59e0b; }

body.dashboard-ops-ui .dashboard-check-list {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
}

body.dashboard-ops-ui .dashboard-check-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: 10px;
}

body.dashboard-ops-ui .dashboard-check-item.ok { background: rgba(16, 185, 129, 0.12); color: #0f8f67; }
body.dashboard-ops-ui .dashboard-check-item.bad { background: rgba(239, 68, 68, 0.12); color: #c33232; }

body.dashboard-ops-ui .dashboard-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid rgba(31, 47, 78, 0.06);
}

body.dashboard-ops-ui .dashboard-event-count {
    min-width: 30px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    background: rgba(30, 41, 59, 0.08);
    color: #172233;
}

body.dashboard-ops-ui .dashboard-event-row.broadcast_reply .dashboard-event-count { background: rgba(16, 185, 129, 0.14); color: #0f8f67; }
body.dashboard-ops-ui .dashboard-event-row.hot_click .dashboard-event-count { background: rgba(245, 158, 11, 0.14); color: #9a6708; }
body.dashboard-ops-ui .dashboard-event-row.unsubscribe .dashboard-event-count { background: rgba(236, 72, 153, 0.14); color: #be185d; }
body.dashboard-ops-ui .dashboard-event-row.delivery_error .dashboard-event-count { background: rgba(239, 68, 68, 0.14); color: #c33232; }
body.dashboard-ops-ui .dashboard-event-row.campaign_completed .dashboard-event-count { background: rgba(139, 92, 246, 0.14); color: #7c3aed; }

body.dashboard-ops-ui .dashboard-empty {
    padding: 10px;
    border-radius: 10px;
    background: #f8fafc;
    color: #8a96a8;
    font-size: 11px;
    text-align: center;
}

body.dashboard-ops-ui .dashboard-campaign-list,
body.dashboard-ops-ui .dashboard-overdue-list,
body.dashboard-ops-ui .dashboard-affinity-list,
body.dashboard-ops-ui .dashboard-event-list,
body.dashboard-ops-ui .dashboard-config-list,
body.dashboard-ops-ui .dashboard-mini-table {
    max-height: 228px;
    overflow: auto;
    padding-right: 2px;
}

body.dashboard-ops-ui .dashboard-campaign-list.wide {
    max-height: 180px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.dashboard-ui,
body.dashboard-ops-ui {
    --dash-surface: var(--color-card);
    --dash-surface-soft: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
    --dash-surface-strong: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    --dash-border: color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
    --dash-text: var(--color-text);
    --dash-muted: var(--color-text-muted);
    --dash-blue: var(--color-primary);
    --dash-blue-strong: var(--color-primary-strong);
    --dash-green: #10b981;
    --dash-orange: #f59e0b;
    --dash-red: #ef4444;
    --dash-purple: #8b5cf6;
    --dash-slate: #64748b;
}

body.dashboard-ui .dashboard-hero,
body.dashboard-ui .dashboard-feature-card,
body.dashboard-ui .dashboard-compact-card,
body.dashboard-ops-ui .dashboard-topbar-card,
body.dashboard-ops-ui .dashboard-kpi-strip,
body.dashboard-ops-ui .dashboard-widget {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--dash-blue) 10%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--dash-surface) 96%, white 4%), var(--dash-surface));
    border-color: var(--dash-border);
}

body.dashboard-ui .dashboard-score-strip,
body.dashboard-ui .dashboard-metric-card,
body.dashboard-ui .dashboard-compact-metric,
body.dashboard-ops-ui .dashboard-stat-line,
body.dashboard-ops-ui .dashboard-platform-card,
body.dashboard-ops-ui .dashboard-campaign-row,
body.dashboard-ops-ui .dashboard-overdue-row,
body.dashboard-ops-ui .dashboard-affinity-row,
body.dashboard-ops-ui .dashboard-config-row,
body.dashboard-ops-ui .dashboard-mini-row,
body.dashboard-ops-ui .dashboard-capi-stats div,
body.dashboard-ops-ui .dashboard-event-row,
body.dashboard-ops-ui .dashboard-empty {
    background: var(--dash-surface-soft);
    border-color: color-mix(in srgb, var(--dash-border) 78%, transparent);
}

body.dashboard-ui .dashboard-eyebrow,
body.dashboard-ui .dashboard-panel-kicker,
body.dashboard-ui .dashboard-feature-desc,
body.dashboard-ui .dashboard-metric-meta,
body.dashboard-ui .dashboard-compact-metric span,
body.dashboard-ui .dashboard-module-meta span,
body.dashboard-ops-ui .dashboard-topbar-sub,
body.dashboard-ops-ui .dashboard-kpi-label,
body.dashboard-ops-ui .dashboard-widget-kicker,
body.dashboard-ops-ui .dashboard-row-sub,
body.dashboard-ops-ui .dashboard-trend-label,
body.dashboard-ops-ui .dashboard-funnel-label,
body.dashboard-ops-ui .dashboard-funnel-pct,
body.dashboard-ops-ui .dashboard-trend-legend,
body.dashboard-ops-ui .dashboard-stat-line span,
body.dashboard-ops-ui .dashboard-platform-card span,
body.dashboard-ops-ui .dashboard-capi-stats span,
body.dashboard-ops-ui .dashboard-empty,
body.dashboard-ops-ui .dashboard-event-row,
body.dashboard-ops-ui .dashboard-module-band-meta,
body.dashboard-ops-ui .dashboard-chip.neutral,
body.dashboard-ops-ui .dashboard-refresh-wrap,
body.dashboard-ops-ui .dashboard-emq-ring span {
    color: var(--dash-muted);
}

body.dashboard-ui .dashboard-hero h2,
body.dashboard-ui .dashboard-metric-value,
body.dashboard-ui .dashboard-feature-head h3,
body.dashboard-ui .dashboard-compact-head h3,
body.dashboard-ui .dashboard-compact-metric strong,
body.dashboard-ops-ui .dashboard-topbar-title,
body.dashboard-ops-ui .dashboard-module-band h2,
body.dashboard-ops-ui .dashboard-widget-head h3,
body.dashboard-ops-ui .dashboard-kpi-value,
body.dashboard-ops-ui .dashboard-funnel-value,
body.dashboard-ops-ui .dashboard-trend-total,
body.dashboard-ops-ui .dashboard-stat-line strong,
body.dashboard-ops-ui .dashboard-platform-card strong,
body.dashboard-ops-ui .dashboard-campaign-row strong,
body.dashboard-ops-ui .dashboard-overdue-row strong,
body.dashboard-ops-ui .dashboard-affinity-row strong,
body.dashboard-ops-ui .dashboard-config-row strong,
body.dashboard-ops-ui .dashboard-mini-row strong,
body.dashboard-ops-ui .dashboard-emq-ring strong,
body.dashboard-ops-ui .dashboard-capi-stats strong,
body.dashboard-ops-ui .dashboard-event-count {
    color: var(--dash-text);
}

body.dashboard-ops-ui .dashboard-widget-head {
    border-bottom-color: color-mix(in srgb, var(--dash-blue) 14%, var(--color-border));
    background: linear-gradient(180deg, var(--dash-surface-strong), var(--dash-surface));
}

body.dashboard-ops-ui .dashboard-topbar-card {
    box-shadow: 0 16px 34px color-mix(in srgb, var(--dash-blue) 10%, transparent), 0 10px 24px color-mix(in srgb, var(--color-text) 8%, transparent);
}

body.dashboard-ops-ui .dashboard-kpi-strip,
body.dashboard-ops-ui .dashboard-widget {
    box-shadow: 0 14px 28px color-mix(in srgb, var(--color-text) 7%, transparent), 0 10px 22px color-mix(in srgb, var(--dash-blue) 8%, transparent);
}

body.dashboard-ops-ui .dashboard-kpi-cell {
    border-right-color: color-mix(in srgb, var(--dash-blue) 10%, var(--color-border));
}

body.dashboard-ops-ui .dashboard-kpi-cell:hover {
    background: linear-gradient(180deg, var(--dash-surface-strong), var(--dash-surface-soft));
}

body.dashboard-ops-ui .dashboard-kpi-cell.tone-leads .dashboard-kpi-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--dash-blue) 18%, white), color-mix(in srgb, var(--dash-blue) 30%, white));
    color: var(--dash-blue-strong);
}

body.dashboard-ops-ui .dashboard-kpi-cell.tone-broadcast .dashboard-kpi-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--dash-purple) 18%, white), color-mix(in srgb, var(--dash-purple) 32%, white));
    color: #4c1d95;
}

body.dashboard-ops-ui .dashboard-kpi-cell.tone-capi .dashboard-kpi-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--dash-red) 18%, white), color-mix(in srgb, var(--dash-red) 30%, white));
    color: #b91c1c;
}

body.dashboard-ops-ui .dashboard-kpi-cell.tone-ai .dashboard-kpi-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--dash-blue) 16%, white), color-mix(in srgb, var(--dash-purple) 26%, white));
    color: #4338ca;
}

html.dark body.dashboard-ops-ui .dashboard-kpi-cell.tone-leads .dashboard-kpi-icon,
html.dark body.dashboard-ops-ui .dashboard-kpi-cell.tone-broadcast .dashboard-kpi-icon,
html.dark body.dashboard-ops-ui .dashboard-kpi-cell.tone-capi .dashboard-kpi-icon,
html.dark body.dashboard-ops-ui .dashboard-kpi-cell.tone-ai .dashboard-kpi-icon {
    color: #eaf1ff;
}

body.dashboard-ops-ui .dashboard-kpi-value.tone-leads,
body.dashboard-ops-ui .dashboard-chip-value,
body.dashboard-ui .dashboard-score-label.cold,
body.dashboard-ui .dashboard-platform-card strong.wa,
body.dashboard-ui .dashboard-platform-card strong.messenger,
body.dashboard-ui .dashboard-platform-card strong.facebook {
    color: var(--dash-blue);
}

body.dashboard-ops-ui .dashboard-kpi-value.tone-broadcast,
body.dashboard-ui .dashboard-platform-card strong.instagram,
body.dashboard-ops-ui .dashboard-event-row.campaign_completed .dashboard-event-count {
    color: var(--dash-purple);
}

body.dashboard-ops-ui .dashboard-kpi-value.tone-capi,
body.dashboard-ui .dashboard-score-label.hot,
body.dashboard-ops-ui .dashboard-capi-stats strong.tone-bad {
    color: var(--dash-red);
}

body.dashboard-ui .dashboard-score-label.warm,
body.dashboard-ops-ui .dashboard-capi-stats strong.tone-warn {
    color: var(--dash-orange);
}

body.dashboard-ops-ui .dashboard-capi-stats strong.tone-ok,
body.dashboard-ops-ui .dashboard-event-row.broadcast_reply .dashboard-event-count {
    color: var(--dash-green);
}

body.dashboard-ops-ui .dashboard-module-band h2,
body.dashboard-ui .dashboard-feature-head h3,
body.dashboard-ui .dashboard-compact-head h3 {
    color: var(--dash-text);
}

body.dashboard-ops-ui .dashboard-module-band h2::before,
body.dashboard-ops-ui .dashboard-refresh-progress,
body.dashboard-ops-ui .dashboard-refresh-track,
body.dashboard-ops-ui .dashboard-drag-handle,
body.dashboard-ops-ui .dashboard-chip.mode-live,
body.dashboard-ops-ui .dashboard-chip.mode-test,
body.dashboard-ops-ui .dashboard-chip.mode-paused {
    color: inherit;
}

body.dashboard-ops-ui .dashboard-refresh-track {
    stroke: color-mix(in srgb, var(--dash-blue) 12%, var(--color-border));
}

body.dashboard-ops-ui .dashboard-refresh-progress {
    stroke: var(--dash-blue);
}

body.dashboard-ops-ui .dashboard-drag-handle,
body.dashboard-ops-ui .dashboard-module-band-meta {
    border-color: color-mix(in srgb, var(--dash-blue) 16%, var(--color-border));
    background: linear-gradient(180deg, var(--dash-surface-strong), var(--dash-surface));
    color: color-mix(in srgb, var(--dash-blue) 76%, var(--dash-text));
}

body.dashboard-ops-ui .dashboard-drag-handle:hover,
body.dashboard-ops-ui .dashboard-campaign-row:hover,
body.dashboard-ops-ui .dashboard-overdue-row:hover,
body.dashboard-ops-ui .dashboard-affinity-row:hover,
body.dashboard-ops-ui .dashboard-config-row:hover,
body.dashboard-ops-ui .dashboard-mini-row:hover {
    border-color: color-mix(in srgb, var(--dash-blue) 24%, var(--color-border));
    box-shadow: 0 12px 22px color-mix(in srgb, var(--dash-blue) 10%, transparent);
}

body.dashboard-ops-ui .dashboard-module-section.is-drop-target.drop-before {
    box-shadow: inset 0 3px 0 var(--dash-blue);
}

body.dashboard-ops-ui .dashboard-module-section.is-drop-target.drop-after {
    box-shadow: inset 0 -3px 0 var(--dash-blue);
}

body.dashboard-ops-ui .section-broadcast .dashboard-module-band h2::before { background: #4338ca; }
body.dashboard-ops-ui .section-leads .dashboard-module-band h2::before { background: var(--dash-blue); }
body.dashboard-ops-ui .section-capi .dashboard-module-band h2::before { background: var(--dash-red); }
body.dashboard-ops-ui .section-system .dashboard-module-band h2::before { background: var(--dash-slate); }

body.dashboard-ops-ui .section-broadcast .dashboard-module-band-meta {
    border-color: color-mix(in srgb, #4338ca 22%, var(--color-border));
    background: color-mix(in srgb, #4338ca 10%, var(--dash-surface));
    color: #4338ca;
}

body.dashboard-ops-ui .section-leads .dashboard-module-band-meta {
    border-color: color-mix(in srgb, var(--dash-blue) 22%, var(--color-border));
    background: color-mix(in srgb, var(--dash-blue) 10%, var(--dash-surface));
    color: var(--dash-blue);
}

body.dashboard-ops-ui .section-capi .dashboard-module-band-meta {
    border-color: color-mix(in srgb, var(--dash-red) 18%, var(--color-border));
    background: color-mix(in srgb, var(--dash-red) 8%, var(--dash-surface));
    color: var(--dash-red);
}

body.dashboard-ops-ui .section-system .dashboard-module-band-meta {
    border-color: color-mix(in srgb, var(--dash-slate) 18%, var(--color-border));
    background: color-mix(in srgb, var(--dash-slate) 8%, var(--dash-surface));
    color: var(--dash-slate);
}

body.dashboard-ops-ui .dashboard-funnel-bar,
body.dashboard-ops-ui .dashboard-score-bar,
body.dashboard-ops-ui .dashboard-emq-ring > div,
body.dashboard-ops-ui .dashboard-topbar-right .btn.ghost,
body.dashboard-ui .dashboard-platform-card.wa,
body.dashboard-ui .dashboard-platform-card.messenger,
body.dashboard-ui .dashboard-platform-card.instagram,
body.dashboard-ui .dashboard-platform-card.facebook {
    background: var(--dash-surface-strong);
}

body.dashboard-ops-ui .dashboard-topbar-right .btn.ghost {
    border-color: color-mix(in srgb, var(--dash-blue) 18%, var(--color-border));
    color: var(--dash-blue);
}

body.dashboard-ops-ui .dashboard-topbar-right .btn.ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--dash-blue) 8%, var(--dash-surface));
    border-color: color-mix(in srgb, var(--dash-blue) 24%, var(--color-border));
    color: var(--dash-blue-strong);
}

body.dashboard-ops-ui .dashboard-table-wrap {
    background: var(--dash-surface);
}

body.dashboard-ops-ui .dashboard-table-wrap th,
body.dashboard-ops-ui .dashboard-table-wrap td,
body.dashboard-ui .dashboard-table-wrap th,
body.dashboard-ui .dashboard-table-wrap td {
    border-bottom-color: color-mix(in srgb, var(--dash-border) 78%, transparent);
}

body.dashboard-ops-ui .dashboard-table-wrap th,
body.dashboard-ui .dashboard-table-wrap th {
    color: var(--dash-muted);
    background: var(--dash-surface-strong);
}

body.dashboard-ops-ui .dashboard-table-wrap td,
body.dashboard-ui .dashboard-table-wrap td,
body.dashboard-ui .dashboard-table-subtle {
    color: var(--dash-text);
}

body.dashboard-ops-ui .dashboard-table-wrap tbody tr,
body.dashboard-ui .dashboard-table-wrap tbody tr {
    background: var(--dash-surface);
}

body.dashboard-ops-ui .dashboard-table-wrap tbody tr:hover,
body.dashboard-ui .dashboard-table-wrap tbody tr:hover {
    background: var(--dash-surface-soft);
}

body.dashboard-ops-ui .dashboard-table-wrap .muted,
body.dashboard-ui .dashboard-table-wrap .muted {
    color: var(--dash-muted);
}

body.dashboard-ops-ui .dashboard-emq-ring {
    background: conic-gradient(var(--dash-blue) calc(var(--p) * 1%), color-mix(in srgb, var(--dash-blue) 14%, var(--color-border)) 0);
}

body.dashboard-ops-ui .dashboard-check-item.ok,
body.dashboard-ui .dashboard-status-pill.is-on,
body.dashboard-ui .dashboard-module-status.status-active,
body.dashboard-ops-ui .dashboard-topbar-pill.ok,
body.dashboard-ops-ui .dashboard-chip.ok {
    background: color-mix(in srgb, var(--dash-green) 14%, var(--dash-surface));
    color: var(--dash-green);
}

body.dashboard-ops-ui .dashboard-check-item.bad,
body.dashboard-ui .dashboard-status-pill.is-off,
body.dashboard-ops-ui .dashboard-topbar-pill.err,
body.dashboard-ops-ui .dashboard-chip.err {
    background: color-mix(in srgb, var(--dash-red) 12%, var(--dash-surface));
    color: var(--dash-red);
}

body.dashboard-ui .dashboard-module-status.status-warning,
body.dashboard-ui .dashboard-module-status.status-paused,
body.dashboard-ops-ui .dashboard-topbar-pill.warn,
body.dashboard-ops-ui .dashboard-chip.warn,
body.dashboard-ops-ui .dashboard-event-row.hot_click .dashboard-event-count {
    background: color-mix(in srgb, var(--dash-orange) 14%, var(--dash-surface));
    color: color-mix(in srgb, var(--dash-orange) 86%, #7c2d12);
}

body.dashboard-ui .dashboard-module-status.status-off,
body.dashboard-ui .dashboard-status-meta,
body.dashboard-ui .dashboard-module-status.status-quiet {
    background: color-mix(in srgb, var(--dash-slate) 12%, var(--dash-surface));
    color: color-mix(in srgb, var(--dash-slate) 80%, var(--dash-text));
}

html.dark body.dashboard-ui,
html.dark body.dashboard-ops-ui {
    --dash-green: #34d399;
    --dash-orange: #fbbf24;
    --dash-red: #f87171;
    --dash-purple: #a78bfa;
    --dash-slate: #94a3b8;
}

body.dashboard-ops-ui .dashboard-campaign-list::-webkit-scrollbar,
body.dashboard-ops-ui .dashboard-overdue-list::-webkit-scrollbar,
body.dashboard-ops-ui .dashboard-affinity-list::-webkit-scrollbar,
body.dashboard-ops-ui .dashboard-event-list::-webkit-scrollbar,
body.dashboard-ops-ui .dashboard-config-list::-webkit-scrollbar,
body.dashboard-ops-ui .dashboard-mini-table::-webkit-scrollbar {
    width: 6px;
}

body.dashboard-ops-ui .dashboard-campaign-list::-webkit-scrollbar-thumb,
body.dashboard-ops-ui .dashboard-overdue-list::-webkit-scrollbar-thumb,
body.dashboard-ops-ui .dashboard-affinity-list::-webkit-scrollbar-thumb,
body.dashboard-ops-ui .dashboard-event-list::-webkit-scrollbar-thumb,
body.dashboard-ops-ui .dashboard-config-list::-webkit-scrollbar-thumb,
body.dashboard-ops-ui .dashboard-mini-table::-webkit-scrollbar-thumb {
    background: rgba(59, 107, 255, 0.18);
    border-radius: 999px;
}

body.dashboard-ops-ui .dashboard-table-wrap {
    overflow-x: auto;
    max-height: 250px;
}

body.dashboard-ops-ui .dashboard-table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

body.dashboard-ops-ui .dashboard-table-wrap th,
body.dashboard-ops-ui .dashboard-table-wrap td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(31, 47, 78, 0.08);
    text-align: left;
}

body.dashboard-ops-ui .dashboard-table-wrap th {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5f76a3;
    background: rgba(243, 247, 255, 0.95);
}

body.dashboard-ops-ui .dashboard-table-wrap td {
    font-size: 11px;
    color: #172233;
}

@media (max-width: 1280px) {
    body.dashboard-ops-ui .dashboard-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.dashboard-ops-ui .dashboard-widget.span-3,
    body.dashboard-ops-ui .dashboard-widget.span-4,
    body.dashboard-ops-ui .dashboard-widget.span-5 {
        grid-column: span 6;
    }

    body.dashboard-ops-ui .dashboard-module-band {
        align-items: flex-start;
        flex-direction: column;
    }

    body.dashboard-ops-ui .dashboard-module-band-main {
        width: 100%;
    }

    body.dashboard-ops-ui .dashboard-campaign-list.wide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 920px) {
    body.dashboard-ops-ui .dashboard-topbar-card,
    body.dashboard-ops-ui .dashboard-topbar-right {
        flex-direction: column;
        align-items: flex-start;
    }

    body.dashboard-ops-ui .dashboard-kpi-strip,
    body.dashboard-ops-ui .dashboard-widget-grid,
    body.dashboard-ops-ui .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }

    body.dashboard-ops-ui .dashboard-widget.span-3,
    body.dashboard-ops-ui .dashboard-widget.span-4,
    body.dashboard-ops-ui .dashboard-widget.span-5,
    body.dashboard-ops-ui .dashboard-widget.span-6 {
        grid-column: span 1;
    }

    body.dashboard-ops-ui .dashboard-platform-grid {
        grid-template-columns: 1fr;
    }
}

body.dashboard-ui .dashboard-module-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.dashboard-ui .dashboard-module-metric {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(31, 47, 78, 0.08);
    background: rgba(255, 255, 255, 0.92);
}

body.dashboard-ui .dashboard-module-metric.tone-success {
    background: rgba(236, 253, 245, 0.9);
}

body.dashboard-ui .dashboard-module-metric.tone-warning {
    background: rgba(255, 247, 237, 0.92);
}

body.dashboard-ui .dashboard-module-metric.tone-danger {
    background: rgba(254, 242, 242, 0.92);
}

body.dashboard-ui .dashboard-module-metric.tone-info {
    background: rgba(239, 246, 255, 0.92);
}

body.dashboard-ui .dashboard-module-metric-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #667085;
}

body.dashboard-ui .dashboard-module-metric-value {
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #101828;
}

body.dashboard-ui .dashboard-module-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

body.dashboard-ui .dashboard-module-actions .btn {
    justify-content: center;
}

body.dashboard-ui .dashboard-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.dashboard-ui .dashboard-panel {
    padding: 18px;
    border: 1px solid rgba(31, 47, 78, 0.08);
}

body.dashboard-ui .dashboard-panel-insights,
body.dashboard-ui .dashboard-panel-table {
    grid-column: 1 / -1;
}

body.dashboard-ui .dashboard-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

body.dashboard-ui .dashboard-panel-head h3 {
    margin: 0;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: #182435;
}

body.dashboard-ui .dashboard-panel-meta {
    margin: 2px 0 0;
    color: #667085;
    font-size: 12px;
    text-align: right;
}

body.dashboard-ui .dashboard-insights-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

body.dashboard-ui .dashboard-insight-card {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(31, 47, 78, 0.08);
    background: rgba(250, 252, 255, 0.92);
}

body.dashboard-ui .dashboard-insight-card.danger {
    background: rgba(254, 242, 242, 0.9);
    border-color: rgba(239, 68, 68, 0.12);
}

body.dashboard-ui .dashboard-insight-label {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #667085;
}

body.dashboard-ui .dashboard-insight-value {
    margin: 0;
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #101828;
}

body.dashboard-ui .dashboard-score-list {
    display: grid;
    gap: 16px;
}

body.dashboard-ui .dashboard-score-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

body.dashboard-ui .dashboard-score-label {
    font-weight: 800;
    font-size: 14px;
}

body.dashboard-ui .dashboard-score-label.cold { color: #2d6cdf; }
body.dashboard-ui .dashboard-score-label.warm { color: #d97706; }
body.dashboard-ui .dashboard-score-label.hot { color: #dc2626; }

body.dashboard-ui .dashboard-score-count {
    font-size: 13px;
    color: #344054;
}

body.dashboard-ui .dashboard-score-bar {
    height: 12px;
    border-radius: 999px;
    background: #edf2f7;
    overflow: hidden;
}

body.dashboard-ui .dashboard-score-bar > span {
    display: block;
    height: 100%;
    min-width: 10px;
    border-radius: inherit;
}

body.dashboard-ui .dashboard-score-bar > span.cold { background: linear-gradient(90deg, #2d6cdf, #5c8ff1); }
body.dashboard-ui .dashboard-score-bar > span.warm { background: linear-gradient(90deg, #d97706, #f59e0b); }
body.dashboard-ui .dashboard-score-bar > span.hot { background: linear-gradient(90deg, #dc2626, #f97316); }

body.dashboard-ui .dashboard-health-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.dashboard-ui .dashboard-health-item {
    padding: 16px;
    border-radius: 14px;
    background: rgba(249, 250, 251, 0.95);
    border: 1px solid rgba(31, 47, 78, 0.08);
}

body.dashboard-ui .dashboard-health-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #667085;
}

body.dashboard-ui .dashboard-health-item strong {
    font-size: 24px;
    color: #101828;
}

body.dashboard-ui .dashboard-table-wrap {
    overflow-x: auto;
}

body.dashboard-ui .dashboard-table-wrap table {
    width: 100%;
}

body.dashboard-ui .dashboard-table-wrap th {
    white-space: nowrap;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #667085;
}

body.dashboard-ui .dashboard-table-subtle {
    display: inline-block;
    margin-left: 6px;
    color: #98a2b3;
    font-size: 12px;
}

@media (max-width: 1180px) {
    body.dashboard-ui .dashboard-overview-grid,
    body.dashboard-ui .dashboard-insights-grid,
    body.dashboard-ui .dashboard-module-metrics,
    body.dashboard-ui .dashboard-feature-metrics,
    body.dashboard-ui .dashboard-compact-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.dashboard-ui .dashboard-primary-grid,
    body.dashboard-ui .dashboard-secondary-grid,
    body.dashboard-ui .dashboard-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    body.dashboard-ui .dashboard-hero {
        grid-template-columns: 1fr;
    }

    body.dashboard-ui .dashboard-hero-actions {
        align-items: stretch;
    }

    body.dashboard-ui .dashboard-health-grid,
    body.dashboard-ui .dashboard-overview-grid,
    body.dashboard-ui .dashboard-insights-grid,
    body.dashboard-ui .dashboard-module-metrics,
    body.dashboard-ui .dashboard-feature-metrics,
    body.dashboard-ui .dashboard-compact-metrics,
    body.dashboard-ui .dashboard-bottom-grid {
        grid-template-columns: 1fr;
    }

    body.dashboard-ui .dashboard-panel,
    body.dashboard-ui .dashboard-hero,
    body.dashboard-ui .dashboard-feature-card,
    body.dashboard-ui .dashboard-compact-card,
    body.dashboard-ui .dashboard-score-strip {
        padding: 16px;
    }

    body.dashboard-ui .dashboard-panel-head {
        flex-direction: column;
    }

    body.dashboard-ui .dashboard-panel-meta {
        text-align: left;
    }

    body.dashboard-ui .dashboard-feature-head,
    body.dashboard-ui .dashboard-compact-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

body.app-modern .mobile-header {
    position: sticky;
    top: 8px;
    z-index: 90;
    margin: 8px 10px 0;
    padding: 9px 11px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.app-modern .auth-header {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

body.app-modern .mobile-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body.app-modern .mobile-header-copy {
    min-width: 0;
}

body.app-modern .mobile-header-kicker {
    margin-bottom: 2px;
    color: #5f7390;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.app-modern .mobile-header-title {
    font-size: 13px;
    font-weight: 700;
    color: #1f2b3d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.app-modern .mobile-header .brand-logo-wrap {
    margin: 0;
}

body.app-modern .mobile-header .brand-logo {
    height: 30px;
    max-width: 126px;
}

body.app-modern .mobile-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

body.app-modern .app-sidebar {
    display: none;
}

body.app-modern .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 8px;
    z-index: 95;
    padding: 6px;
    border-radius: 16px;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

body.app-modern .mobile-bottom-nav::-webkit-scrollbar {
    display: none;
}

body.app-modern .mobile-bottom-link {
    min-width: 64px;
    flex: 1 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: #64748b;
    padding: 6px 5px;
    border-radius: 12px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

body.app-modern .mobile-bottom-link:hover {
    color: #334155;
    background: rgba(148, 163, 184, 0.14);
}

body.app-modern .mobile-bottom-link.active {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.12);
}

body.app-modern .mobile-bottom-ico {
    font-size: 16px;
    line-height: 1;
}

body.app-modern .mobile-bottom-label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

body.app-modern .card {
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 14px;
}

body.app-modern .grid {
    gap: 12px;
}

body.app-modern .flex-row {
    gap: 10px;
}

body.app-modern input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.app-modern select,
body.app-modern textarea {
    min-height: 40px;
    padding: 8px 10px;
    margin: 4px 0 8px;
    border-radius: 10px;
    font-size: 13px;
}

body.app-modern .btn {
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.1;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

body.app-modern .btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 35, 55, 0.12);
}

body.app-modern .btn.ghost {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243,247,255,0.94));
    border-color: rgba(203, 213, 225, 0.95);
    color: #1d3557;
}

body.app-modern .btn.ghost:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(235,241,252,0.98));
    border-color: rgba(59, 107, 255, 0.18);
    color: #214cc8;
}

body.app-modern table th,
body.app-modern table td {
    padding: 8px 9px;
    font-size: 13px;
}

body.app-modern .status-bar {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 12px;
    border: 1px solid rgba(203, 213, 225, 0.82);
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.92));
    box-shadow: 0 10px 20px rgba(15, 35, 55, 0.08);
}

body.app-modern .modal-card {
    border-color: rgba(203, 213, 225, 0.88);
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.94));
    color: #0b1220;
    box-shadow: 0 26px 54px rgba(15, 35, 55, 0.18);
}

@media (min-width: 1024px) {
    body.app-modern .mobile-header {
        display: none;
    }

    body.app-modern .auth-header {
        display: flex;
        position: relative;
        top: 0;
        margin: 12px auto 0;
    }

    body.app-modern .mobile-bottom-nav {
        display: none;
    }

    body.app-modern .app-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 10px;
        left: 10px;
        bottom: 10px;
        width: 228px;
        padding: 10px;
        border-radius: 18px;
        z-index: 90;
        overflow: hidden;
    }

    body.app-modern .app-sidebar-header {
        padding: 8px 8px 14px;
        border-bottom: 1px solid rgba(15, 35, 55, 0.09);
        margin-bottom: 8px;
        display: grid;
        gap: 12px;
    }

    body.app-modern .app-sidebar-brand {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    body.app-modern .app-sidebar-brand-copy {
        min-width: 0;
    }

    body.app-modern .app-sidebar-kicker {
        color: #5d718d;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 4px;
    }

    body.app-modern .app-sidebar-title {
        color: #132238;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    body.app-modern .app-sidebar-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    body.app-modern .app-sidebar .brand-logo-wrap {
        margin: 0;
    }

    body.app-modern .app-sidebar .brand-logo {
        height: 36px;
        max-width: 162px;
    }

    body.app-modern .app-sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 6px 2px;
        overflow-y: auto;
        flex: 1;
    }

    body.app-modern .sidebar-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
        padding: 10px 11px;
        border-radius: 12px;
        border: 1px solid transparent;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    body.app-modern .sidebar-link:hover {
        color: #24364d;
        background: rgba(231, 238, 251, 0.72);
        border-color: rgba(59, 107, 255, 0.12);
        transform: translateX(1px);
    }

    body.app-modern .sidebar-link.active {
        color: #1d4ed8;
        background: linear-gradient(180deg, rgba(231, 239, 255, 0.98), rgba(220, 232, 255, 0.92));
        border-color: rgba(59, 107, 255, 0.18);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    }

    body.app-modern .sidebar-link-ico {
        font-size: 15px;
        width: 18px;
        text-align: center;
        flex-shrink: 0;
    }

    body.app-modern .app-sidebar-footer {
        margin-top: 8px;
        border-top: 1px solid rgba(15, 35, 55, 0.09);
        padding: 12px 8px 4px;
    }

    body.app-modern .app-sidebar-footer .btn {
        width: 100%;
    }

body.app-modern .app-container.with-sidebar {
    margin-left: 248px;
    max-width: none;
    width: calc(100% - 258px);
    padding: 12px 14px 14px;
}

}

@media (max-width: 1023px) {
    body.app-modern .app-page-head {
        display: none;
    }

    body.app-modern .app-shell-pill {
        min-height: 24px;
        padding: 0 8px;
        font-size: 9px;
    }

    body.app-modern .app-container {
        padding-top: 10px;
    }

    body.app-modern .container.app-container.with-sidebar {
        width: 100%;
        margin-left: 0;
    }
}

/* List view exact-style overrides from lead-list-view.html */
body.conv-settings #convApp[data-view="list"] .conv-table-view.list-container {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.96));
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 34px rgba(15, 35, 55, 0.08), 0 8px 20px rgba(59, 107, 255, 0.05);
}

body.conv-settings #convApp[data-view="list"] .conv-table.list-table {
    width: 100%;
    min-width: 1320px;
    border-collapse: collapse;
    table-layout: fixed;
    background: #ffffff;
    border: 0;
    border-radius: 0;
}

body.conv-settings #convApp[data-view="list"] .conv-table.list-table thead {
    background: linear-gradient(180deg, #f8fbff, #eff4fb);
    border-bottom: 1px solid #dbe4f0;
}

body.conv-settings #convApp[data-view="list"] .conv-table.list-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
    background: transparent;
    white-space: nowrap;
}

body.conv-settings #convApp[data-view="list"] .conv-table.list-table th:first-child {
    padding-left: 14px;
}

body.conv-settings #convApp[data-view="list"] .conv-table.list-table td {
    padding: 11px 12px;
    font-size: 12px;
    line-height: 1.35;
    color: #0f172a;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    vertical-align: middle;
}

body.conv-settings #convApp[data-view="list"] .conv-table.list-table td:first-child {
    padding-left: 14px;
}

body.conv-settings #convApp[data-view="list"] .lead-row {
    cursor: pointer;
    border: 0;
    background: transparent;
}

body.conv-settings #convApp[data-view="list"] .lead-row.gradient-stroke {
    background-image: none;
}

body.conv-settings #convApp[data-view="list"] .lead-row:hover {
    background: linear-gradient(90deg, rgba(239, 246, 255, 0.92), rgba(248, 250, 252, 0.94));
}

body.conv-settings #convApp[data-view="list"] .conv-table input[type="checkbox"],
body.conv-settings #convApp[data-view="list"] .checkbox {
    width: 8px;
    height: 8px;
    min-height: 8px;
    border: 2px solid #d5dee8;
    border-radius: 3px;
    appearance: none;
    cursor: pointer;
    background: #ffffff;
    box-shadow: none;
}

body.conv-settings #convApp[data-view="list"] .conv-table input[type="checkbox"]:checked,
body.conv-settings #convApp[data-view="list"] .checkbox:checked {
    background: #2563eb;
    border-color: #2563eb;
}

body.conv-settings #convApp[data-view="list"] .expander {
    text-align: center;
}

body.conv-settings #convApp[data-view="list"] .expand-btn.expand-icon {
    width: 20px;
    height: 20px;
    min-height: 20px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #f5f5f5;
    color: #475569;
    font-size: 11px;
    line-height: 1;
    padding: 0;
}

body.conv-settings #convApp[data-view="list"] .expand-btn.expand-icon:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

body.conv-settings #convApp[data-view="list"] .expand-fallback {
    display: none;
}

body.conv-settings #convApp[data-view="list"] .lead-cell-inner.lead-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
}

body.conv-settings #convApp[data-view="list"] .lead-main {
    min-width: 0;
}

body.conv-settings #convApp[data-view="list"] .lead-main strong {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    color: #0f172a;
}

body.conv-settings #convApp[data-view="list"] .lead-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body.conv-settings #convApp[data-view="list"] .lead-email {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: #64748b;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.conv-settings #convApp[data-view="list"] .info-dot {
    width: 16px;
    height: 16px;
    min-height: 16px;
    font-size: 10px;
    border-radius: 999px;
    opacity: 0.75;
}

body.conv-settings #convApp[data-view="list"] .platform-cell {
    text-align: left;
}

body.conv-settings #convApp[data-view="list"] .platform-pill.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: linear-gradient(180deg, #f8fbff, #eef5ff);
    border: 1px solid #d8e4fb;
    color: #35507a;
}

body.conv-settings #convApp[data-view="list"] .platform-pill .platform-ico {
    width: auto;
    height: auto;
    min-height: 0;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    line-height: 1;
    font-size: 12px;
}

body.conv-settings #convApp[data-view="list"] .status-badge.badge-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid;
    min-height: 20px;
}

body.conv-settings #convApp[data-view="list"] .status-badge.badge-active {
    background: #d1fae5;
    color: #065f46;
    border-color: #10b981;
}

body.conv-settings #convApp[data-view="list"] .status-badge.badge-new {
    background: #fef3c7;
    color: #92400e;
    border-color: #f59e0b;
}

body.conv-settings #convApp[data-view="list"] .status-badge.badge-lost {
    background: #fee2e2;
    color: #991b1b;
    border-color: #ef4444;
}

body.conv-settings #convApp[data-view="list"] .status-badge.badge-negotiation {
    background: #e0e7ff;
    color: #3730a3;
    border-color: #6366f1;
}

body.conv-settings #convApp[data-view="list"] .score-badge.badge-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    border: 1px solid #fbbf24;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

body.conv-settings #convApp[data-view="list"] .score-badge.badge-score.hot {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
}

body.conv-settings #convApp[data-view="list"] .score-badge.badge-score.cold {
    border-color: #06b6d4;
    background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
    color: #164e63;
}

body.conv-settings #convApp[data-view="list"] .intent-cell {
    text-align: left;
}

body.conv-settings #convApp[data-view="list"] .intent-cell .badge-intent {
    display: inline-block;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

body.conv-settings #convApp[data-view="list"] .followup-cell {
    text-align: left;
    min-width: 180px;
}

body.conv-settings #convApp[data-view="list"] .followup-cell-stack {
    align-items: flex-start;
    gap: 3px;
}

body.conv-settings #convApp[data-view="list"] .followup-cell-stack .ai-followup-pill.followup-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    border: 1.5px solid;
    margin-bottom: 1px;
}

body.conv-settings #convApp[data-view="list"] .followup-cell-stack .followup-badge.followup-recommended {
    background: rgba(207, 250, 254, 0.30);
    color: #0f172a;
    border-color: #06b6d4;
}

body.conv-settings #convApp[data-view="list"] .followup-cell-stack .followup-badge.followup-not-recommended {
    background: rgba(254, 226, 226, 0.30);
    color: #0f172a;
    border-color: #ef4444;
}

body.conv-settings #convApp[data-view="list"] .followup-stage-flow,
body.conv-settings #convApp[data-view="list"] .followup-stage-time {
    font-size: 10px;
    line-height: 1.3;
    color: #94a3b8;
}

body.conv-settings #convApp[data-view="list"] .followup-stage-time.future {
    color: #1e3a8a;
}

body.conv-settings #convApp[data-view="list"] .followup-stage-time.past {
    color: #92400e;
}

body.conv-settings #convApp[data-view="list"] .ai-note-cell {
    max-width: 250px;
}

body.conv-settings #convApp[data-view="list"] .ai-note-cell .ai-note-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
}

body.conv-settings #convApp[data-view="list"] .conv-count {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 600;
    color: #0f172a;
    font-size: 12px;
}

body.conv-settings #convApp[data-view="list"] .actions-cell {
    white-space: nowrap;
    text-align: left;
}

body.conv-settings #convApp[data-view="list"] .actions-cell .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    min-height: 28px;
    margin: 0 4px 0 0;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #dbe4f0;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,248,255,0.96));
    color: #15304d;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(15, 35, 55, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

body.conv-settings #convApp[data-view="list"] .actions-cell .action-btn:hover {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(239,246,255,0.98));
    border-color: #2563eb;
    color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.10);
}

body.conv-settings #convApp[data-view="list"] .actions-cell .action-btn:last-child {
    margin-right: 0;
}

body.conv-settings #convApp[data-view="list"] .actions-cell .action-btn.action-btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: none;
}

body.conv-settings #convApp[data-view="list"] .actions-cell .action-btn.action-btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

body.conv-settings #convApp[data-view="list"] .conv-row > td {
    background: #f5f5f5;
    border-bottom: 1px solid #e2e8f0;
    padding: 0;
}

body.conv-settings #convApp[data-view="list"] .conv-panel {
    background: linear-gradient(180deg, rgba(245,248,255,0.96), rgba(248,250,252,0.98));
    border: 0;
    box-shadow: none;
    border-left: 0;
    padding: 12px;
}

body.conv-settings #convApp[data-view="list"] .conv-header {
    margin-bottom: 8px;
}

body.conv-settings #convApp[data-view="list"] .conv-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}

body.conv-settings #convApp[data-view="list"] .conv-nested {
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

body.conv-settings #convApp[data-view="list"] .conv-nested thead th {
    background: #f8fafc;
    font-size: 11px;
    padding: 8px 10px;
}

body.conv-settings #convApp[data-view="list"] .conv-nested td {
    padding: 8px 10px;
    font-size: 12px;
}

/* Card view exact-style overrides from lead-card-view.html */
body.conv-settings #convApp[data-view="card"] .conv-card-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.75rem;
}

body.conv-settings #convApp[data-view="card"] .lead-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.75rem;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.2s;
}

body.conv-settings #convApp[data-view="card"] .lead-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    border-color: #2563eb;
}

body.conv-settings #convApp[data-view="card"] .lead-card.expanded {
    grid-column: 1 / -1;
    border-color: #2563eb;
}

body.conv-settings #convApp[data-view="card"] .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    padding: 0;
}

body.conv-settings #convApp[data-view="card"] .card-left {
    flex: 1;
    min-width: 0;
}

body.conv-settings #convApp[data-view="card"] .card-checkbox {
    position: absolute;
    top: 0.68rem;
    right: 0.68rem;
    width: 8px;
    height: 8px;
    border: 1.5px solid #d6dee8;
    border-radius: 3px;
    appearance: none;
    cursor: pointer;
    background: #ffffff;
}

body.conv-settings #convApp[data-view="card"] .card-checkbox:checked {
    background: #2563eb;
    border-color: #2563eb;
}

body.conv-settings #convApp[data-view="card"] .conv-card-expand {
    display: none;
}

body.conv-settings #convApp[data-view="card"] .lead-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.125rem;
}

body.conv-settings #convApp[data-view="card"] .lead-id {
    display: inline-block;
    font-size: 0.7rem;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body.conv-settings #convApp[data-view="card"] .lead-email {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.75rem;
    color: #64748b;
    max-width: calc(100% - 3.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

body.conv-settings #convApp[data-view="card"] .badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.52rem;
    margin-bottom: 0.62rem;
}

body.conv-settings #convApp[data-view="card"] .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid #e2e8f0;
}

body.conv-settings #convApp[data-view="card"] .badge i,
body.conv-settings #convApp[data-view="card"] .badge svg,
body.conv-settings #convApp[data-view="card"] .badge .conv-card-emoji {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.72rem;
}

body.conv-settings #convApp[data-view="card"] .badge-score {
    background: linear-gradient(135deg, #fff8df 0%, #fff1c7 100%);
    color: #92400e;
    border-color: #f7cb67;
}

body.conv-settings #convApp[data-view="card"] .badge-score.hot {
    background: linear-gradient(135deg, #ffefef 0%, #ffe2e2 100%);
    color: #991b1b;
    border-color: #f09393;
}

body.conv-settings #convApp[data-view="card"] .badge-score.cold {
    background: linear-gradient(135deg, #ecfdff 0%, #d9f9ff 100%);
    color: #164e63;
    border-color: #76d7e6;
}

body.conv-settings #convApp[data-view="card"] .badge-platform {
    background: #f8fafc;
    color: #64748b;
    border-color: #dde6f0;
}

body.conv-settings #convApp[data-view="card"] .badge-status {
    border: 1px solid;
}

body.conv-settings #convApp[data-view="card"] .badge-active {
    background: #e8faf1;
    color: #065f46;
    border-color: #8bd7b5;
}

body.conv-settings #convApp[data-view="card"] .badge-new {
    background: #fff8dd;
    color: #92400e;
    border-color: #f5cb82;
}

body.conv-settings #convApp[data-view="card"] .badge-lost {
    background: #ffefef;
    color: #991b1b;
    border-color: #f2a1a1;
}

body.conv-settings #convApp[data-view="card"] .badge-negotiation {
    background: #edf1ff;
    color: #3730a3;
    border-color: #aab0ff;
}

body.conv-settings #convApp[data-view="card"] .badge-intent {
    background: linear-gradient(135deg, #eff2ff 0%, #dde5ff 100%);
    color: #3730a3;
    border-color: #aeb9ff;
    font-weight: 700;
}

body.conv-settings #convApp[data-view="card"] .badge-conv {
    background: #f8fafc;
    color: #0f172a;
    border-color: #dde6f0;
}

body.conv-settings #convApp[data-view="card"] .followup-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.375rem 0.625rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1.5px solid;
    margin-bottom: 0.5rem;
}

body.conv-settings #convApp[data-view="card"] .conv-card-followup-main {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

body.conv-settings #convApp[data-view="card"] .followup-badge i,
body.conv-settings #convApp[data-view="card"] .followup-badge svg,
body.conv-settings #convApp[data-view="card"] .followup-badge .conv-card-followup-icon {
    width: 13px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.76rem;
}

body.conv-settings #convApp[data-view="card"] .followup-recommended {
    background: rgba(207, 250, 254, 0.22);
    color: #0f172a;
    border-color: #7bd6e4;
}

body.conv-settings #convApp[data-view="card"] .followup-not-recommended {
    background: rgba(254, 226, 226, 0.22);
    color: #0f172a;
    border-color: #ef9a9a;
}

body.conv-settings #convApp[data-view="card"] .followup-details {
    font-size: 0.6rem;
    color: #94a3b8;
    line-height: 1.3;
}

body.conv-settings #convApp[data-view="card"] .ai-note-preview {
    background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.94));
    padding: 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    border-left: 3px solid #2563eb;
    border: 1px solid rgba(219, 228, 240, 0.92);
    max-height: 3.6em;
    overflow: hidden;
}

body.conv-settings #convApp[data-view="card"] .ai-note-preview.empty {
    border-left-color: #cbd5e1;
    color: #94a3b8;
    font-style: italic;
}

body.conv-settings #convApp[data-view="card"] .quick-actions {
    display: flex;
    gap: 0.375rem;
    margin-top: 0;
}

body.conv-settings #convApp[data-view="card"] .action-btn {
    flex: 1;
    min-height: 34px;
    padding: 0.625rem;
    border: 1px solid #dbe4f0;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,248,255,0.96));
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(15, 35, 55, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

body.conv-settings #convApp[data-view="card"] .action-btn:hover {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(239,246,255,0.98));
    border-color: #2563eb;
    color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.10);
}

body.conv-settings #convApp[data-view="card"] .action-btn-primary {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: none;
}

body.conv-settings #convApp[data-view="card"] .action-btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

body.conv-settings .view-lead,
body.conv-settings .view-lead:visited,
body.conv-settings .view-lead:hover,
body.conv-settings .view-lead:focus-visible {
    color: #ffffff !important;
}

body.conv-settings #leadTable .view-lead,
body.conv-settings #leadTable .view-lead:visited,
body.conv-settings #leadTable .view-lead:hover,
body.conv-settings #leadTable .view-lead:focus-visible {
    color: #ffffff !important;
}

body.conv-settings #convApp[data-view="card"] .expanded-content {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

body.conv-settings #convApp[data-view="card"] .expanded-section {
    background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(241,245,249,0.94));
    padding: 0.875rem;
    border-radius: 10px;
    border: 1px solid #dbe4f0;
}

body.conv-settings #convApp[data-view="card"] .expanded-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

body.conv-settings #convApp[data-view="card"] .conversation-item {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
    border: 1px solid #dbe4f0;
    padding: 0.625rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

body.conv-settings .conv-lead-card,
body.conv-settings #convApp[data-view="list"] .conv-table-view.list-container,
body.conv-settings .lead-modal-section {
    animation: convSurfaceRise 0.34s ease both;
}

@keyframes convSurfaceRise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.conv-settings .conv-lead-card,
    body.conv-settings #convApp[data-view="list"] .conv-table-view.list-container,
    body.conv-settings .lead-modal-section,
    body.conv-settings .conv-stat-card,
    body.conv-settings .actions-cell .action-btn,
    body.conv-settings #convApp[data-view="card"] .action-btn {
        animation: none !important;
        transition: none !important;
    }
}

body.conv-settings #convApp[data-view="card"] .conversation-item:last-child {
    margin-bottom: 0;
}

body.conv-settings #convApp[data-view="card"] .conversation-time {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

body.conv-settings #convApp[data-view="card"] .conversation-direction {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-right: 0.375rem;
    margin-bottom: 0.25rem;
}

body.conv-settings #convApp[data-view="card"] .direction-outgoing {
    background: #dbeafe;
    color: #1e40af;
}

body.conv-settings #convApp[data-view="card"] .direction-incoming {
    background: #dcfce7;
    color: #166534;
}

body.conv-settings #convApp[data-view="card"] .conversation-message {
    color: #64748b;
    line-height: 1.4;
    font-size: 0.75rem;
}

body.conv-settings #convApp[data-view="card"] .conv-card-note-full {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

body.conv-settings {
    --conv-surface: var(--color-surface);
    --conv-surface-2: color-mix(in srgb, var(--color-card) 88%, var(--color-primary-soft));
    --conv-border: var(--color-border);
    --conv-border-strong: color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
    --conv-text-1: var(--color-text);
    --conv-text-2: var(--color-text-muted);
    --conv-blue-bg: color-mix(in srgb, var(--color-primary) 14%, var(--color-card));
    --conv-blue-border: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
    --conv-blue-text: color-mix(in srgb, var(--color-primary) 76%, var(--color-text));
    --conv-teal-bg: color-mix(in srgb, #14b8a6 16%, var(--color-card));
    --conv-teal-border: color-mix(in srgb, #14b8a6 32%, var(--color-border));
    --conv-teal-text: color-mix(in srgb, #14b8a6 72%, var(--color-text));
    --conv-amber-bg: color-mix(in srgb, #f59e0b 16%, var(--color-card));
    --conv-amber-border: color-mix(in srgb, #f59e0b 32%, var(--color-border));
    --conv-amber-text: color-mix(in srgb, #f59e0b 70%, var(--color-text));
    --conv-violet-bg: color-mix(in srgb, #8b5cf6 16%, var(--color-card));
    --conv-violet-border: color-mix(in srgb, #8b5cf6 34%, var(--color-border));
    --conv-violet-text: color-mix(in srgb, #8b5cf6 72%, var(--color-text));
    --conv-rose-bg: color-mix(in srgb, #f43f5e 14%, var(--color-card));
    --conv-rose-border: color-mix(in srgb, #f43f5e 34%, var(--color-border));
    --conv-rose-text: color-mix(in srgb, #f43f5e 74%, var(--color-text));
}

body.conv-settings .conv-hero,
body.conv-settings .conv-filter-shell,
body.conv-settings .conv-shell,
body.conv-settings .conv-card-empty,
body.conv-settings .conv-lead-card,
body.conv-settings #convApp[data-view="list"] .conv-table-view.list-container,
body.conv-settings #convApp[data-view="list"] .conv-panel,
body.conv-settings .lead-modal-card,
body.conv-settings .lead-modal-section,
body.conv-settings .lead-modal-meta {
    color: var(--conv-text-1);
}

body.conv-settings .conv-stat-card:nth-child(1) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--conv-blue-bg) 82%, var(--color-card)), var(--conv-blue-bg));
    border-color: var(--conv-blue-border);
}

body.conv-settings .conv-stat-card:nth-child(2) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--conv-teal-bg) 82%, var(--color-card)), var(--conv-teal-bg));
    border-color: var(--conv-teal-border);
}

body.conv-settings .conv-stat-card:nth-child(3) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--conv-amber-bg) 82%, var(--color-card)), var(--conv-amber-bg));
    border-color: var(--conv-amber-border);
}

body.conv-settings .conv-stat-card:nth-child(4) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--conv-violet-bg) 82%, var(--color-card)), var(--conv-violet-bg));
    border-color: var(--conv-violet-border);
}

body.conv-settings .conv-stat-label,
body.conv-settings .lead-cross-ref,
body.conv-settings .lead-modal-meta-row span,
body.conv-settings .lead-modal-conv,
body.conv-settings #convApp[data-view="list"] .lead-sub,
body.conv-settings #convApp[data-view="list"] .lead-email,
body.conv-settings #convApp[data-view="card"] .lead-id,
body.conv-settings #convApp[data-view="card"] .lead-email,
body.conv-settings .conv-card-conv-time,
body.conv-settings #convApp[data-view="card"] .conversation-time,
body.conv-settings #convApp[data-view="card"] .conversation-message,
body.conv-settings #convApp[data-view="card"] .conv-card-note-full,
body.conv-settings .conv-pagination-meta,
body.conv-settings .conv-pagination-dots {
    color: var(--conv-text-2);
}

body.conv-settings .conv-stat-value,
body.conv-settings .conv-stat-value strong,
body.conv-settings .conv-filter-toggle-row,
body.conv-settings .conv-filter-title,
body.conv-settings .conv-card-name,
body.conv-settings .conv-title,
body.conv-settings .lead-modal-head h3,
body.conv-settings .lead-modal-section-head h4,
body.conv-settings .lead-modal-meta-row strong,
body.conv-settings #convApp[data-view="list"] .lead-main strong,
body.conv-settings #convApp[data-view="card"] .lead-name {
    color: var(--conv-text-1);
}

body.conv-settings .conv-filter-shell {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, #8b5cf6 16%, transparent), transparent 36%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-card) 96%, transparent), color-mix(in srgb, var(--conv-violet-bg) 40%, var(--color-card)));
    border-color: var(--conv-violet-border);
}

body.conv-settings .conv-filter-toggle-row {
    border-bottom-color: var(--conv-border);
    background: color-mix(in srgb, var(--color-card) 88%, transparent);
}

body.conv-settings .conv-filter-toggle-row:hover {
    background: color-mix(in srgb, var(--color-card) 96%, var(--color-primary-soft));
}

body.conv-settings .conv-filter-toggle-icon {
    background: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
    color: var(--conv-text-2);
}

body.conv-settings .lead-cross-ref a {
    color: var(--color-primary);
}

body.conv-settings .conv-view-toggle {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 94%, transparent), color-mix(in srgb, var(--conv-surface) 82%, var(--color-primary-soft)));
    border-color: var(--conv-border);
}

body.conv-settings .conv-table,
body.conv-settings #convApp[data-view="list"] .conv-table-view.list-container,
body.conv-settings #convApp[data-view="list"] .conv-panel,
body.conv-settings .conv-card-empty,
body.conv-settings .conv-lead-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 96%, transparent), color-mix(in srgb, var(--conv-surface-2) 74%, var(--color-card)));
    border-color: var(--conv-border);
}

body.conv-settings .conv-lead-card:hover,
body.conv-settings .conv-lead-card.expanded {
    border-color: var(--conv-border-strong);
}

html.dark body.conv-settings .conv-lead-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 94%, transparent), color-mix(in srgb, var(--conv-surface-2) 68%, var(--color-card))) !important;
    border-color: color-mix(in srgb, var(--conv-border) 88%, transparent) !important;
}

body.conv-settings .conv-lead-card-header.open {
    background: color-mix(in srgb, var(--color-primary-soft) 60%, transparent);
}

body.conv-settings .conv-card-expand,
body.conv-settings .conv-chip,
body.conv-settings .conv-card-note-preview,
body.conv-settings .conv-card-expanded-section,
body.conv-settings .lead-modal-meta,
body.conv-settings .lead-modal-conv,
body.conv-settings .conv-card-note-full {
    border-color: var(--conv-border);
    background: color-mix(in srgb, var(--color-card) 92%, transparent);
    color: var(--conv-text-1);
}

body.conv-settings .conv-chip-platform,
body.conv-settings .conv-chip-conv {
    color: var(--conv-text-2);
    background: color-mix(in srgb, var(--color-text-muted) 10%, var(--color-card));
}

body.conv-settings .conv-chip-intent {
    color: var(--conv-violet-text);
    border-color: var(--conv-violet-border);
    background: var(--conv-violet-bg);
}

body.conv-settings .conv-chip-status {
    border-color: color-mix(in srgb, var(--color-text-muted) 26%, var(--conv-border));
    background: color-mix(in srgb, var(--color-text-muted) 10%, var(--color-card));
}

html.dark body.conv-settings .conv-chip,
html.dark body.conv-settings .conv-chip-text {
    color: var(--conv-text-1);
}

html.dark body.conv-settings .conv-chip-score.cold {
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.34);
    background: rgba(8, 47, 73, 0.88);
}

html.dark body.conv-settings .conv-chip-score.warm {
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.34);
    background: rgba(69, 26, 3, 0.88);
}

html.dark body.conv-settings .conv-chip-score.hot {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.34);
    background: rgba(69, 10, 10, 0.88);
}

html.dark body.conv-settings .conv-chip-platform,
html.dark body.conv-settings .conv-chip-conv {
    color: #cbd5e1;
    background: rgba(30, 41, 59, 0.9);
}

html.dark body.conv-settings .conv-chip-intent {
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(46, 16, 101, 0.9);
}

html.dark body.conv-settings .conv-chip-status {
    color: #cbd5e1;
    border-color: rgba(100, 116, 139, 0.34);
    background: rgba(30, 41, 59, 0.9);
}

html.dark body.conv-settings .conv-chip-status.active {
    color: #86efac;
    border-color: rgba(16, 185, 129, 0.34);
    background: rgba(6, 78, 59, 0.88);
}

html.dark body.conv-settings .conv-chip-status.new {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.34);
    background: rgba(69, 26, 3, 0.88);
}

html.dark body.conv-settings .conv-chip-status.lost {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.34);
    background: rgba(69, 10, 10, 0.88);
}

html.dark body.conv-settings .conv-chip-status.negotiation {
    color: #c4b5fd;
    border-color: rgba(99, 102, 241, 0.34);
    background: rgba(49, 46, 129, 0.88);
}

html.dark body.conv-settings .conv-chip-status.converted {
    color: #86efac;
    border-color: rgba(22, 163, 74, 0.34);
    background: rgba(20, 83, 45, 0.88);
}

html.dark body.conv-settings .conv-chip-status.interested {
    color: #99f6e4;
    border-color: rgba(20, 184, 166, 0.34);
    background: rgba(19, 78, 74, 0.88);
}

html.dark body.conv-settings .conv-chip-status.pending,
html.dark body.conv-settings .conv-chip-status.pending-payment {
    color: #fdba74;
    border-color: rgba(251, 146, 60, 0.34);
    background: rgba(67, 20, 7, 0.88);
}

html.dark body.conv-settings #convApp[data-view="card"] .badge-score {
    background: linear-gradient(135deg, rgba(69, 26, 3, 0.9) 0%, rgba(120, 53, 15, 0.88) 100%);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.34);
}

html.dark body.conv-settings #convApp[data-view="card"] .badge-score.hot {
    background: linear-gradient(135deg, rgba(69, 10, 10, 0.9) 0%, rgba(127, 29, 29, 0.88) 100%);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.34);
}

html.dark body.conv-settings #convApp[data-view="card"] .badge-score.cold {
    background: linear-gradient(135deg, rgba(8, 47, 73, 0.9) 0%, rgba(12, 74, 110, 0.88) 100%);
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.34);
}

html.dark body.conv-settings #convApp[data-view="card"] .badge-platform {
    background: rgba(30, 41, 59, 0.9);
    color: #cbd5e1;
    border-color: rgba(100, 116, 139, 0.34);
}

html.dark body.conv-settings #convApp[data-view="card"] .badge-active {
    background: rgba(6, 78, 59, 0.88);
    color: #86efac;
    border-color: rgba(16, 185, 129, 0.34);
}

html.dark body.conv-settings #convApp[data-view="card"] .badge-new {
    background: rgba(69, 26, 3, 0.88);
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.34);
}

html.dark body.conv-settings #convApp[data-view="card"] .badge-lost {
    background: rgba(69, 10, 10, 0.88);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.34);
}

html.dark body.conv-settings #convApp[data-view="card"] .badge-negotiation {
    background: rgba(49, 46, 129, 0.88);
    color: #c4b5fd;
    border-color: rgba(99, 102, 241, 0.34);
}

html.dark body.conv-settings #convApp[data-view="card"] .badge-intent {
    background: linear-gradient(135deg, rgba(46, 16, 101, 0.9) 0%, rgba(76, 29, 149, 0.88) 100%);
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.34);
}

html.dark body.conv-settings #convApp[data-view="card"] .badge-conv {
    background: rgba(30, 41, 59, 0.9);
    color: #cbd5e1;
    border-color: rgba(100, 116, 139, 0.34);
}

html.dark body.conv-settings .conv-hero-chart-wrap {
    border-color: color-mix(in srgb, var(--conv-border) 82%, transparent);
    background: color-mix(in srgb, var(--color-card) 88%, transparent);
}

html.dark body.conv-settings .conv-hero-score-pill.cold { background: rgba(8, 47, 73, 0.88); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.34); }
html.dark body.conv-settings .conv-hero-score-pill.warm { background: rgba(69, 26, 3, 0.88); color: #fbbf24; border-color: rgba(245, 158, 11, 0.34); }
html.dark body.conv-settings .conv-hero-score-pill.hot { background: rgba(69, 10, 10, 0.88); color: #fca5a5; border-color: rgba(239, 68, 68, 0.34); }

body.conv-settings .conv-lead-card-details,
body.conv-settings .lead-modal-head,
body.conv-settings .conv-card-conv-item,
body.conv-settings #convApp[data-view="card"] .conversation-item {
    border-color: var(--conv-border);
}

body.conv-settings .lead-modal-card {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-card) 98%, transparent), color-mix(in srgb, var(--color-modal) 90%, var(--color-card))) !important;
    border-color: var(--conv-border-strong);
    color: var(--conv-text-1);
}

body.conv-settings .lead-modal-card .btn {
    color: var(--conv-text-1);
}

body.conv-settings .lead-modal-section {
    border-color: var(--conv-border);
    background: color-mix(in srgb, var(--color-card) 88%, transparent);
}

body.conv-settings .lead-modal-section-core {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, #3b82f6 16%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-card) 96%, transparent), color-mix(in srgb, var(--conv-blue-bg) 48%, var(--color-card)));
}

body.conv-settings .lead-modal-section-followup {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, #f59e0b 16%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-card) 96%, transparent), color-mix(in srgb, var(--conv-amber-bg) 48%, var(--color-card)));
}

body.conv-settings .lead-modal-section-meta {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, #8b5cf6 16%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-card) 96%, transparent), color-mix(in srgb, var(--conv-violet-bg) 48%, var(--color-card)));
}

body.conv-settings .lead-modal-section-conv {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, #14b8a6 16%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-card) 96%, transparent), color-mix(in srgb, var(--conv-teal-bg) 48%, var(--color-card)));
}

body.conv-settings .lead-modal-section-merge {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, #f43f5e 16%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-card) 96%, transparent), color-mix(in srgb, var(--conv-rose-bg) 48%, var(--color-card)));
}

body.conv-settings .lead-modal-section-kicker.tone-blue {
    color: var(--conv-blue-text);
    background: var(--conv-blue-bg);
    border-color: var(--conv-blue-border);
}

body.conv-settings .lead-modal-section-kicker.tone-amber {
    color: var(--conv-amber-text);
    background: var(--conv-amber-bg);
    border-color: var(--conv-amber-border);
}

body.conv-settings .lead-modal-section-kicker.tone-violet {
    color: var(--conv-violet-text);
    background: var(--conv-violet-bg);
    border-color: var(--conv-violet-border);
}

body.conv-settings .lead-modal-section-kicker.tone-teal {
    color: var(--conv-teal-text);
    background: var(--conv-teal-bg);
    border-color: var(--conv-teal-border);
}

body.conv-settings .lead-modal-section-kicker.tone-rose {
    color: var(--conv-rose-text);
    background: var(--conv-rose-bg);
    border-color: var(--conv-rose-border);
}

html.dark body.conv-settings #convApp[data-view="list"] .conv-table.list-table thead,
html.dark body.conv-settings #convApp[data-view="list"] .conv-nested thead {
    background: color-mix(in srgb, var(--color-primary) 9%, var(--color-card));
}

body.conv-settings #convApp[data-view="list"] .conv-table.list-table {
    background: var(--color-card);
}

body.conv-settings #convApp[data-view="list"] .conv-table.list-table th {
    color: var(--conv-text-2) !important;
}

body.conv-settings #convApp[data-view="list"] .conv-table.list-table td {
    color: var(--conv-text-1) !important;
    border-bottom-color: color-mix(in srgb, var(--conv-border) 90%, transparent) !important;
}

body.conv-settings #convApp[data-view="list"] .lead-row:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-card)), color-mix(in srgb, var(--color-surface) 86%, var(--color-card)));
}

body.conv-settings #convApp[data-view="list"] .conv-table input[type="checkbox"],
body.conv-settings #convApp[data-view="list"] .checkbox {
    border-color: var(--conv-border);
    background: color-mix(in srgb, var(--color-card) 92%, transparent);
}

body.conv-settings #convApp[data-view="list"] .expand-btn.expand-icon {
    border-color: var(--conv-border);
    background: color-mix(in srgb, var(--color-card) 86%, var(--color-surface));
    color: var(--conv-text-2);
}

body.conv-settings #convApp[data-view="list"] .expand-btn.expand-icon:hover {
    background: color-mix(in srgb, var(--color-primary-soft) 56%, var(--color-card));
    border-color: var(--conv-border-strong);
    color: var(--conv-text-1);
}

body.conv-settings #convApp[data-view="list"] .platform-pill.badge,
body.conv-settings #convApp[data-view="list"] .status-badge.badge-status,
body.conv-settings #convApp[data-view="list"] .score-badge.badge-score,
body.conv-settings #convApp[data-view="list"] .intent-cell .badge-intent,
body.conv-settings #convApp[data-view="list"] .followup-cell-stack .ai-followup-pill.followup-badge,
body.conv-settings #convApp[data-view="list"] .actions-cell .action-btn {
    color: inherit;
}

body.conv-settings #leadTable th,
body.conv-settings #leadTable td,
body.conv-settings #leadTable .lead-main strong,
body.conv-settings #leadTable .lead-sub,
body.conv-settings #leadTable .lead-email,
body.conv-settings #leadTable .conv-count,
body.conv-settings #leadTable .ai-note-text,
body.conv-settings #leadTable .followup-stage-flow,
body.conv-settings #leadTable .followup-stage-time,
body.conv-settings #leadTable .action-btn,
body.conv-settings #leadTable .conv-title,
body.conv-settings #leadTable .conv-nested td {
    color: var(--conv-text-1) !important;
}

body.conv-settings #leadTable .action-btn.view-lead,
body.conv-settings #leadTable .action-btn.view-lead:visited,
body.conv-settings #leadTable .action-btn.view-lead:hover,
body.conv-settings #leadTable .action-btn.view-lead:focus-visible {
    color: #ffffff !important;
}

body.conv-settings #leadTable th,
body.conv-settings #leadTable .lead-sub,
body.conv-settings #leadTable .lead-email,
body.conv-settings #leadTable .followup-stage-time,
body.conv-settings #leadTable .conv-nested thead th {
    color: var(--conv-text-2) !important;
}

@media (max-width: 768px) {
    body.conv-settings #convApp[data-view="card"] .conv-card-view {
        grid-template-columns: 1fr;
    }

    body.conv-settings #convApp[data-view="card"] .lead-card.expanded {
        grid-column: 1;
    }

    body.conv-settings #convApp[data-view="card"] .expanded-content {
        grid-template-columns: 1fr;
    }
}

/* Broadcast Engine */
body.broadcast-ui .chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    gap: 6px;
}

body.broadcast-ui .chip-sm {
    padding: 1px 8px;
    font-size: 11px;
}

.chip-blue   { background: #DBEAFE; color: #1E40AF; }
.chip-green  { background: #D1FAE5; color: #065F46; }
.chip-orange { background: #FEF3C7; color: #92400E; }
.chip-purple { background: #EDE9FE; color: #5B21B6; }
.chip-red    { background: #FEE2E2; color: #991B1B; }
.chip-amber  { background: #FEF3C7; color: #92400E; }
.chip-gray   { background: #F3F4F6; color: #374151; }
.chip-teal   { background: #CCFBF1; color: #0F766E; }
.chip-pink   { background: #FCE7F3; color: #9D174D; }
.badge-yellow {
    background: #FEF08A;
    color: #713F12;
    border-radius: 6px;
    padding: 3px 10px;
}

body.broadcast-ui .broadcast-page {
    display: grid;
    gap: 12px;
}

body.broadcast-ui .broadcast-shell-card {
    padding: 14px 16px;
    background:
        radial-gradient(circle at top right, rgba(59, 107, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.97), rgba(244,249,255,0.92));
    border-color: rgba(59, 107, 255, 0.14);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

body.broadcast-ui .broadcast-shell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

body.broadcast-ui .broadcast-shell-head h1 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.03em;
    color: #132238;
}

body.broadcast-ui .broadcast-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-tab {
    background: rgba(255,255,255,0.84);
    border-color: rgba(203, 213, 225, 0.9);
    box-shadow: 0 10px 22px rgba(15, 35, 55, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

body.broadcast-ui .broadcast-tab:hover {
    transform: translateY(-1px);
}

body.broadcast-ui .broadcast-tab[data-tab="analytics"] { color: #2563eb; }
body.broadcast-ui .broadcast-tab[data-tab="campaigns"] { color: #7c3aed; }
body.broadcast-ui .broadcast-tab[data-tab="contacts"] { color: #0f766e; }
body.broadcast-ui .broadcast-tab[data-tab="products"] { color: #b45309; }
body.broadcast-ui .broadcast-tab[data-tab="templates"] { color: #db2777; }
body.broadcast-ui .broadcast-tab[data-tab="settings"] { color: #475569; }

body.broadcast-ui .broadcast-tab.active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

body.broadcast-ui .broadcast-panel.hidden {
    display: none;
}

body.broadcast-ui .broadcast-placeholder {
    border: 1px dashed rgba(15, 23, 42, 0.2);
    border-radius: 12px;
    padding: 22px;
    text-align: center;
}

body.broadcast-ui .broadcast-section {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

body.broadcast-ui .broadcast-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-section-head h3 {
    margin: 0;
}

body.broadcast-ui .broadcast-dropzone {
    border: 1px dashed rgba(37, 99, 235, 0.4);
    border-radius: 12px;
    padding: 16px;
    background: rgba(37, 99, 235, 0.06);
}

body.broadcast-ui .broadcast-dropzone.drag-over {
    background: rgba(37, 99, 235, 0.13);
}

body.broadcast-ui .link-btn {
    border: none;
    background: transparent;
    color: #2563eb;
    padding: 0;
    cursor: pointer;
    font-weight: 700;
}

body.broadcast-ui .broadcast-mapping-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 10px;
}

body.broadcast-ui .broadcast-mapping-item {
    display: grid;
    gap: 6px;
}

body.broadcast-ui .broadcast-warning-row {
    background: #fff1f2;
}

body.broadcast-ui .broadcast-row-warn-icon {
    color: #b91c1c;
    font-size: 12px;
    margin-right: 4px;
}

body.broadcast-ui .table-wrap {
    overflow: auto;
    max-width: 100%;
}

body.broadcast-ui .broadcast-filters {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
}

body.broadcast-ui .broadcast-filter-action {
    display: flex;
    align-items: flex-end;
}

body.broadcast-ui .broadcast-inline-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.broadcast-ui .broadcast-inline-actions .danger {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

body.broadcast-ui .broadcast-inline-actions .btn.danger {
    background: #d41515 !important;
    border-color: #d41515 !important;
    color: #ffffff !important;
}

body.broadcast-ui .broadcast-inline-actions .btn.danger:hover:not(:disabled) {
    background: #b31212 !important;
    border-color: #b31212 !important;
    color: #ffffff !important;
}

body.broadcast-ui .broadcast-checklist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

body.broadcast-ui .broadcast-check-item {
    border: 1px solid #dde3ea;
    border-radius: 10px;
    background: #fff;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.broadcast-ui .broadcast-check-item.pass {
    border-color: #86efac;
    background: #f0fdf4;
}

body.broadcast-ui .broadcast-check-item.fail {
    border-color: #fecaca;
    background: #fef2f2;
}

body.broadcast-ui .broadcast-analytics-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 8px;
}

body.broadcast-ui .broadcast-analytics-card {
    border-radius: 12px;
    border: 1px solid #dde3ea;
    padding: 10px;
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

body.broadcast-ui .broadcast-analytics-card p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

body.broadcast-ui .broadcast-analytics-card strong {
    display: block;
    margin-top: 4px;
    font-size: 24px;
    line-height: 1.1;
}

body.broadcast-ui .gradient-sent { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
body.broadcast-ui .gradient-pending { background: linear-gradient(135deg, #fff7ed, #ffedd5); }
body.broadcast-ui .gradient-failed { background: linear-gradient(135deg, #fef2f2, #fee2e2); }
body.broadcast-ui .gradient-clicked { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
body.broadcast-ui .gradient-replied { background: linear-gradient(135deg, #f5f3ff, #ede9fe); }
body.broadcast-ui .gradient-unsub { background: linear-gradient(135deg, #fdf2f8, #fce7f3); }

body.broadcast-ui .broadcast-analytics-chart {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    min-height: 220px;
    display: grid;
    align-items: end;
}

body.broadcast-ui .broadcast-ops-chart-wrap {
    position: relative;
    min-height: 166px;
    margin: 4px 0 10px;
    padding: 8px 10px 2px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
    background: color-mix(in srgb, var(--color-card) 92%, transparent);
}

body.broadcast-ui .broadcast-ops-chart-wrap.hidden {
    display: block;
    visibility: hidden;
}

body.broadcast-ui .broadcast-ops-chart-wrap canvas {
    width: 100% !important;
    height: 146px !important;
}

body.broadcast-ui .broadcast-campaign-perf-chart-wrap {
    position: relative;
    min-height: 176px;
    margin: 4px 0 14px;
    padding: 12px 14px 10px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
    background: color-mix(in srgb, var(--color-card) 92%, transparent);
}

body.broadcast-ui .broadcast-campaign-perf-chart-wrap canvas {
    width: 100% !important;
    height: 148px !important;
}

body.broadcast-ui .broadcast-queue-chart-wrap {
    position: relative;
    min-height: 156px;
    margin: 6px 0 12px;
    padding: 8px 12px 2px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
    background: color-mix(in srgb, var(--color-card) 92%, transparent);
}

body.broadcast-ui .broadcast-queue-chart-wrap canvas {
    width: 100% !important;
    height: 140px !important;
}

body.broadcast-ui .broadcast-delivery-funnel {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 8px;
    align-items: stretch;
}

body.broadcast-ui .broadcast-delivery-funnel .funnel-step {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    display: grid;
    gap: 4px;
}

body.broadcast-ui .broadcast-delivery-funnel .funnel-label {
    font-size: 12px;
    color: #475569;
    font-weight: 600;
}

body.broadcast-ui .broadcast-delivery-funnel strong {
    font-size: 20px;
    line-height: 1.1;
    color: #0f172a;
}

body.broadcast-ui .broadcast-delivery-funnel .funnel-blocked {
    background: #fff5f5;
    border-color: #fecaca;
}

body.broadcast-ui .broadcast-chart-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(60px, 1fr));
    gap: 10px;
    align-items: end;
    min-height: 180px;
}

body.broadcast-ui .broadcast-chart-day {
    display: grid;
    gap: 6px;
    justify-items: center;
}

body.broadcast-ui .broadcast-chart-bars {
    height: 130px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
}

body.broadcast-ui .broadcast-bar {
    width: 14px;
    border-radius: 8px 8px 2px 2px;
    min-height: 2px;
}

body.broadcast-ui .broadcast-bar-wa { background: #2563eb; }
body.broadcast-ui .broadcast-bar-email { background: #16a34a; }

body.broadcast-ui .broadcast-chart-label {
    font-size: 11px;
    color: #64748b;
}

body.broadcast-ui .broadcast-campaign-main-row {
    cursor: pointer;
}

body.broadcast-ui .broadcast-step-breakdown {
    padding: 8px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #dde3ea;
}

body.broadcast-ui .broadcast-step-breakdown ul {
    margin: 0;
    padding-left: 16px;
    display: grid;
    gap: 4px;
}

body.broadcast-ui .broadcast-contact-timeline {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
}

body.broadcast-ui .broadcast-timeline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

body.broadcast-ui .broadcast-timeline-item {
    border-left: 3px solid #cbd5e1;
    padding: 6px 8px;
    background: #f8fafc;
    border-radius: 8px;
}

body.broadcast-ui .broadcast-timeline-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

body.broadcast-ui .broadcast-timeline-type {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    text-transform: capitalize;
}

body.broadcast-ui .broadcast-timeline-time {
    font-size: 11px;
    color: #64748b;
}

body.broadcast-ui .broadcast-test-panel {
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 12px;
    padding: 8px;
}

body.broadcast-ui .broadcast-test-panel summary {
    cursor: pointer;
    font-weight: 700;
    color: #92400e;
}

body.broadcast-ui .broadcast-test-summary {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    flex-wrap: wrap;
}

body.broadcast-ui .ba-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
}

body.broadcast-ui .ba-stat-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e3e7ef;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

body.broadcast-ui .ba-stat-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
}

body.broadcast-ui .ba-stat-card.accent-green::before { background: #10b981; }
body.broadcast-ui .ba-stat-card.accent-orange::before { background: #f59e0b; }
body.broadcast-ui .ba-stat-card.accent-red::before { background: #ef4444; }
body.broadcast-ui .ba-stat-card.accent-blue::before { background: #2563eb; }
body.broadcast-ui .ba-stat-card.accent-purple::before { background: #8b5cf6; }
body.broadcast-ui .ba-stat-card.accent-pink::before { background: #ec4899; }

body.broadcast-ui .ba-stat-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

body.broadcast-ui .ba-stat-value {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 26px;
    line-height: 1;
    color: #0f172a;
}

body.broadcast-ui .ba-card {
    background: #ffffff;
    border: 1px solid #e3e7ef;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.broadcast-ui .ba-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), 0 10px 22px rgba(37, 99, 235, 0.05);
}

body.broadcast-ui .ba-card-head {
    padding: 12px 16px;
    border-bottom: 1px solid #e3e7ef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    background: #f7f8fb;
}

body.broadcast-ui .ba-card-head h4 {
    margin: 0;
    font-size: 12px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
}

body.broadcast-ui .ba-card-body {
    padding: 14px;
    display: grid;
    gap: 12px;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

body.broadcast-ui .ba-card-body.hidden {
    display: none;
}

body.broadcast-ui .ba-card-body.compact {
    padding: 0;
}

body.broadcast-ui .ba-card-chains .ba-card-body.compact {
    padding: 16px;
    gap: 14px;
}

body.broadcast-ui .ba-card-contact .ba-card-body.compact {
    padding: 16px;
    gap: 14px;
}

body.broadcast-ui .ba-queue-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 14px 0;
}

body.broadcast-ui .ba-queue-action-row {
    padding: 0 14px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

body.broadcast-ui .ba-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 12px;
}

body.broadcast-ui .ba-queue-action-buttons,
body.broadcast-ui .ba-queue-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

body.broadcast-ui .ba-queue-table td {
    vertical-align: top;
    padding-top: 7px;
    padding-bottom: 7px;
}

body.broadcast-ui .ba-queue-id {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-weight: 700;
    color: #0f172a;
}

body.broadcast-ui .ba-queue-meta {
    display: grid;
    gap: 2px;
    min-width: 150px;
    color: #475569;
    font-size: 12px;
}

body.broadcast-ui .ba-queue-pagination {
    padding: 0 14px 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

body.broadcast-ui .ba-chain-map {
    display: grid;
    gap: 14px;
}

body.broadcast-ui .ba-chain-group {
    display: flex;
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 6px;
}

body.broadcast-ui .ba-chain-slot {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.broadcast-ui .ba-chain-arrow {
    font-size: 22px;
    color: #94a3b8;
    font-weight: 700;
}

body.broadcast-ui .ba-chain-node {
    min-width: 260px;
    max-width: 300px;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 12px;
    display: grid;
    gap: 10px;
}

body.broadcast-ui .ba-chain-node-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body.broadcast-ui .ba-chain-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.broadcast-ui .ba-chain-links {
    display: grid;
    gap: 6px;
    font-size: 12px;
}

body.broadcast-ui .ba-ops-metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px;
}

body.broadcast-ui .ba-ops-metric-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    background: #ffffff;
    display: grid;
    gap: 6px;
}

body.broadcast-ui .ba-ops-metric-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.4px;
}

body.broadcast-ui .ba-ops-metric-value {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 22px;
    line-height: 1.1;
    color: #0f172a;
}

body.broadcast-ui .ba-two-col-tight {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

body.broadcast-ui .broadcast-contact-journey,
body.broadcast-ui .broadcast-contact-timeline {
    display: grid;
    gap: 10px;
}

body.broadcast-ui .broadcast-contact-journey {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    background: #fff;
    padding: 14px;
}

body.broadcast-ui .broadcast-contact-journey > p,
body.broadcast-ui .broadcast-contact-timeline > p {
    margin: 0;
}

body.broadcast-ui .ba-journey-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

body.broadcast-ui .ba-journey-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fbfdff;
    display: grid;
    gap: 6px;
}

body.broadcast-ui .ba-journey-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.broadcast-ui .ba-journey-name {
    font-weight: 700;
    color: #0f172a;
}

body.broadcast-ui .ba-funnel-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 10px;
}

body.broadcast-ui .ba-funnel-card {
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 12px;
    background: #ffffff;
    display: grid;
    gap: 8px;
}

body.broadcast-ui .ba-funnel-card.blocked {
    background: #fff5f5;
    border-color: #fecaca;
}

body.broadcast-ui .ba-funnel-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.4px;
}

body.broadcast-ui .ba-funnel-value {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 20px;
    line-height: 1.2;
    color: #0f172a;
}

body.broadcast-ui .ba-funnel-value.good { color: #10b981; }
body.broadcast-ui .ba-funnel-value.warn { color: #f59e0b; }
body.broadcast-ui .ba-funnel-value.danger { color: #ef4444; }
body.broadcast-ui .ba-funnel-value.neutral { color: #0f172a; }

body.broadcast-ui .ba-funnel-bar {
    height: 4px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

body.broadcast-ui .ba-funnel-bar > span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width 0.45s ease;
}

body.broadcast-ui .ba-funnel-bar > .fill-blue { background: #2563eb; }
body.broadcast-ui .ba-funnel-bar > .fill-green { background: #10b981; }
body.broadcast-ui .ba-funnel-bar > .fill-orange { background: #f59e0b; }
body.broadcast-ui .ba-funnel-bar > .fill-red { background: #ef4444; }

body.broadcast-ui .ba-blocked-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.broadcast-ui .ba-blocked-badge {
    min-width: 28px;
    height: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: #fee2e2;
    color: #dc2626;
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-weight: 700;
}

body.broadcast-ui .ba-legend {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 11.5px;
    color: #475569;
}

body.broadcast-ui .ba-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body.broadcast-ui .ba-legend .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

body.broadcast-ui .ba-legend .dot.sent { background: #2563eb; }
body.broadcast-ui .ba-legend .dot.read { background: #16a34a; }

body.broadcast-ui .ba-camp-table .center {
    text-align: center;
}

body.broadcast-ui .ba-campaign-name {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 11px;
    color: #0f172a;
    font-weight: 500;
}

body.broadcast-ui .ba-sent-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 20px;
    border-radius: 5px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 700;
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    background: #dbeafe;
    color: #1d4ed8;
}

body.broadcast-ui .ba-sent-badge.zero {
    background: #f1f5f9;
    color: #64748b;
}

body.broadcast-ui .ba-pct-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.broadcast-ui .ba-pct-value {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 11px;
    min-width: 54px;
}

body.broadcast-ui .ba-pct-value.good { color: #059669; }
body.broadcast-ui .ba-pct-value.warn { color: #d97706; }
body.broadcast-ui .ba-pct-value.danger { color: #dc2626; }
body.broadcast-ui .ba-pct-value.neutral { color: #64748b; }

body.broadcast-ui .ba-mini-bar {
    flex: 1;
    max-width: 72px;
    height: 4px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

body.broadcast-ui .ba-mini-bar > span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
}

body.broadcast-ui .ba-mini-bar > .good { background: #10b981; }
body.broadcast-ui .ba-mini-bar > .warn { background: #f59e0b; }
body.broadcast-ui .ba-mini-bar > .danger { background: #ef4444; }
body.broadcast-ui .ba-mini-bar > .neutral { background: #94a3b8; }

body.broadcast-ui .broadcast-campaign-main-row.is-active td {
    background: #eef2ff !important;
}

body.broadcast-ui .ba-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

body.broadcast-ui .ba-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.broadcast-ui .ba-search-row input {
    flex: 1;
}

body.broadcast-ui .ba-product-table .rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 700;
    margin-right: 6px;
}

body.broadcast-ui .ba-product-name {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 11px;
    font-weight: 500;
}

body.broadcast-ui .ba-score-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.broadcast-ui .ba-bundle-panel {
    border-top: 1px solid #e2e8f0;
    padding: 10px 12px 12px;
}

body.broadcast-ui .ba-bundle-panel > summary {
    cursor: pointer;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    font-weight: 700;
}

body.broadcast-ui .ba-test-panel {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    overflow: hidden;
}

body.broadcast-ui .ba-test-head {
    border: 0;
    width: 100%;
    text-align: left;
    background: transparent;
    color: #92400e;
    font-weight: 700;
    font-size: 12.5px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

body.broadcast-ui .ba-test-arrow {
    transition: transform 0.2s ease;
}

body.broadcast-ui .ba-test-head[aria-expanded="true"] .ba-test-arrow {
    transform: rotate(90deg);
}

body.broadcast-ui .ba-test-body {
    border-top: 1px solid #fde68a;
    padding: 10px 12px 12px;
}

body.broadcast-ui .status-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 999px;
    margin-right: 4px;
}

body.broadcast-ui .status-dot.active { background: #16a34a; }
body.broadcast-ui .status-dot.bounced { background: #f59e0b; }
body.broadcast-ui .status-dot.blocked { background: #dc2626; }

body.broadcast-ui .broadcast-name-with-presence {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-presence {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.broadcast-ui .presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

body.broadcast-ui .presence-dot.online {
    background: #16a34a;
}

body.broadcast-ui .presence-dot.today {
    background: #94a3b8;
}

body.broadcast-ui .presence-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

body.broadcast-ui .broadcast-contacts-list {
    display: grid;
    gap: 6px;
}

body.broadcast-ui .broadcast-contact-row-empty {
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    padding: 12px;
    text-align: center;
    font-size: 12px;
}

body.broadcast-ui .broadcast-contact-row {
    min-height: 46px;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.broadcast-ui .broadcast-contact-row:hover {
    border-color: #bfd4ff;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);
    background: #fdfefe;
}

body.broadcast-ui .broadcast-contact-row-stripe {
    width: 3px;
    align-self: stretch;
    flex: 0 0 3px;
}

body.broadcast-ui .broadcast-contact-row-stripe.is-full { background: #10b981; }
body.broadcast-ui .broadcast-contact-row-stripe.is-partial { background: #2563eb; }
body.broadcast-ui .broadcast-contact-row-stripe.is-contact { background: #94a3b8; }

body.broadcast-ui .broadcast-contact-avatar {
    width: 24px;
    height: 24px;
    margin: 0 10px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.broadcast-ui .broadcast-contact-name-col {
    width: 170px;
    min-width: 120px;
    display: grid;
    gap: 1px;
    line-height: 1.2;
}

body.broadcast-ui .broadcast-contact-name {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.broadcast-ui .broadcast-contact-presence {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.broadcast-ui .broadcast-contact-presence.online {
    color: #15803d;
}

body.broadcast-ui .broadcast-contact-presence.today {
    color: #475569;
}

body.broadcast-ui .broadcast-contact-pipe {
    width: 1px;
    height: 22px;
    background: #e2e8f0;
    margin: 0 8px;
    flex-shrink: 0;
}

body.broadcast-ui .broadcast-contact-identity-col {
    width: 185px;
    min-width: 130px;
    display: grid;
    gap: 1px;
}

body.broadcast-ui .broadcast-contact-phone {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 10.5px;
    color: #334155;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.broadcast-ui .broadcast-contact-email {
    font-size: 10px;
    color: #2563eb;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.broadcast-ui .broadcast-contact-chip-lane {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
}

body.broadcast-ui .broadcast-contact-chip-col {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

body.broadcast-ui .broadcast-contact-chip-col-status { width: 94px; }
body.broadcast-ui .broadcast-contact-chip-col-tier { width: 110px; }
body.broadcast-ui .broadcast-contact-chip-col-source { width: 76px; }
body.broadcast-ui .broadcast-contact-chip-col-camp { width: 80px; }
body.broadcast-ui .broadcast-contact-chip-col-fatigue { width: 80px; }

body.broadcast-ui .broadcast-contact-status-pill,
body.broadcast-ui .broadcast-contact-chip {
    height: 22px;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.broadcast-ui .broadcast-contact-status-pill .status-dot {
    margin-right: 0;
    width: 6px;
    height: 6px;
}

body.broadcast-ui .broadcast-contact-status-pill.active {
    color: #166534;
    background: #dcfce7;
}

body.broadcast-ui .broadcast-contact-status-pill.bounced {
    color: #92400e;
    background: #fef3c7;
}

body.broadcast-ui .broadcast-contact-status-pill.blocked {
    color: #991b1b;
    background: #fee2e2;
}

body.broadcast-ui .broadcast-contact-chip.is-full {
    color: #065f46;
    background: #d1fae5;
}

body.broadcast-ui .broadcast-contact-chip.is-partial {
    color: #1e40af;
    background: #dbeafe;
}

body.broadcast-ui .broadcast-contact-chip.is-contact {
    color: #475569;
    background: #f1f5f9;
}

body.broadcast-ui .broadcast-contact-chip.source {
    color: #5b21b6;
    background: #ede9fe;
}

body.broadcast-ui .broadcast-contact-chip.campaign {
    color: #92400e;
    background: #fef3c7;
}

body.broadcast-ui .broadcast-contact-chip.fatigue.ok {
    color: #0369a1;
    background: #e0f2fe;
}

body.broadcast-ui .broadcast-contact-chip.fatigue.warn {
    color: #991b1b;
    background: #fee2e2;
}

body.broadcast-ui .broadcast-contact-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px 0 0;
    flex-shrink: 0;
}

body.broadcast-ui .broadcast-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

body.broadcast-ui .broadcast-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 10px;
}

body.broadcast-ui .broadcast-product-card {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    display: grid;
    gap: 8px;
}

body.broadcast-ui .broadcast-product-card h4 {
    margin: 0;
    font-size: 14px;
}

body.broadcast-ui .broadcast-product-price {
    color: #0f172a;
}

body.broadcast-ui .broadcast-product-meta {
    font-size: 11px;
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    word-break: break-all;
}

body.broadcast-ui .old-price {
    text-decoration: line-through;
    color: #64748b;
    margin-left: 6px;
    font-weight: 500;
}

body.broadcast-ui .broadcast-product-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(15, 23, 42, 0.42);
    display: grid;
    place-items: center;
    padding: 14px;
}

body.broadcast-ui .broadcast-modal.hidden {
    display: none;
}

/* Always keep template preview above template picker/editor modals */
body.broadcast-ui #btTemplatePreviewModal.broadcast-modal {
    z-index: 140;
}

body.broadcast-ui #btTemplatePreviewModal .broadcast-modal-card {
    position: relative;
    z-index: 141;
}

body.broadcast-ui #bcmTemplatePickerModal.broadcast-modal {
    z-index: 130;
}

body.broadcast-ui #bcmStepModal.broadcast-modal {
    z-index: 120;
}

/* Prompt Studio must sit above Step Editor */
body.broadcast-ui #bcmPromptStudioModal.broadcast-modal {
    z-index: 135;
}

body.broadcast-ui #bcmPromptStudioModal .broadcast-modal-card {
    position: relative;
    z-index: 136;
}

body.broadcast-ui #bcmPromptStudioModal .broadcast-modal-card.bcm-studio-modal-card {
    width: min(95vw, 1400px);
    max-width: 95vw;
    max-height: min(95vh, 900px);
}

body.broadcast-ui #bcmEmailHtmlEditModal.broadcast-modal {
    z-index: 150;
}

body.broadcast-ui #bcmEmailHtmlEditModal .broadcast-modal-card {
    position: relative;
    z-index: 151;
}

body.broadcast-ui .broadcast-modal-card {
    width: min(520px, 96vw);
    max-height: min(95vh, 900px);
    border-radius: 14px;
    background: #fff;
    padding: 16px;
    border: 1px solid #dde3ea;
    overflow-y: auto;
}

body.broadcast-ui .broadcast-template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.broadcast-ui .broadcast-template-card {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    background: #ffffff;
    padding: 10px;
    display: grid;
    gap: 8px;
}

body.broadcast-ui .broadcast-template-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.broadcast-ui .broadcast-template-card-head strong {
    color: #0f172a;
    font-size: 13px;
}

body.broadcast-ui .broadcast-template-card-desc {
    color: #64748b;
    font-size: 12px;
    min-height: 34px;
}

body.broadcast-ui .broadcast-template-card-meta {
    font-size: 11px;
}

body.broadcast-ui .broadcast-template-card-actions {
    justify-content: flex-end;
    width: 100%;
}

body.broadcast-ui .broadcast-template-preview-modal {
    width: min(99vw, 1720px);
    height: 98vh;
    max-height: 98vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    overflow: hidden;
    padding: 10px;
}

body.broadcast-ui .broadcast-template-preview-modal .broadcast-modal-actions {
    display: none;
}

body.broadcast-ui .broadcast-template-editor-modal {
    width: min(95vw, 1180px);
    max-height: min(95vh, 900px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    overflow-y: auto;
}

body.broadcast-ui .broadcast-template-picker-modal {
    width: min(95vw, 920px);
    max-height: min(95vh, 900px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

body.broadcast-ui .broadcast-template-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 55%) minmax(0, 45%);
    gap: 10px;
    min-height: 0;
}

body.broadcast-ui .broadcast-template-editor-left {
    display: grid;
    gap: 8px;
    min-height: 0;
}

body.broadcast-ui .broadcast-template-editor-left textarea {
    min-height: 420px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body.broadcast-ui .broadcast-template-editor-right {
    border: 1px solid #dde3ea;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    height: 100%;
}

body.broadcast-ui .broadcast-template-editor-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

body.broadcast-ui .broadcast-template-preview-frame {
    width: 100%;
    min-height: 0;
    height: 100%;
    display: block;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    background: #fff;
}

body.broadcast-ui .broadcast-template-preview-modal .broadcast-template-preview-frame {
    min-height: 0;
    height: 100%;
}

body.broadcast-ui .bcs-picker-shell #bcmTemplatePickerGrid {
    overflow: auto;
    padding: 12px 14px;
    align-content: start;
}

body.broadcast-ui .bcs-picker-shell .broadcast-modal-actions {
    border-top: 1px solid #e3e7ef;
    background: #f7f8fb;
    padding: 10px 16px;
}

body.broadcast-ui .bcs-single-stepper {
    border-bottom: 1px solid #e3e7ef;
    padding: 0 14px;
    min-height: 42px;
    display: flex;
    align-items: center;
    background: #fff;
}

body.broadcast-ui .broadcast-variant-preview-frame {
    min-height: 220px;
    height: 220px;
}

body.broadcast-ui .broadcast-add-contacts-card {
    width: min(1400px, 80vw);
    max-height: 92vh;
    overflow: auto;
}

body.broadcast-ui .broadcast-add-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-add-rows {
    display: grid;
    gap: 8px;
}

body.broadcast-ui .broadcast-add-row {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    background: #f8fafc;
    padding: 8px;
    display: grid;
    gap: 8px;
}

body.broadcast-ui .broadcast-add-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.broadcast-ui .broadcast-add-row-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
}

body.broadcast-ui .broadcast-add-cell {
    display: grid;
    gap: 4px;
    min-width: 0;
}

body.broadcast-ui .broadcast-add-cell label {
    font-size: 12px;
    color: #475569;
    font-weight: 600;
}

body.broadcast-ui .broadcast-add-cell input,
body.broadcast-ui .broadcast-add-cell select {
    width: 100%;
    min-height: 30px;
    padding: 6px 8px;
    font-size: 12px;
}

body.broadcast-ui .broadcast-contact-modal-card {
    width: min(920px, 97vw);
    max-height: 92vh;
    overflow: auto;
}

body.broadcast-ui .broadcast-contact-edit-card {
    width: min(920px, 97vw);
    max-height: 92vh;
    overflow: auto;
}

body.broadcast-ui .broadcast-contact-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.broadcast-ui .broadcast-contact-edit-grid .full-width {
    grid-column: 1 / -1;
}

body.broadcast-ui .broadcast-contact-edit-grid label {
    display: block;
    font-size: 12px;
    color: #475569;
    font-weight: 600;
    margin-bottom: 4px;
}

body.broadcast-ui .broadcast-contact-edit-grid input,
body.broadcast-ui .broadcast-contact-edit-grid select {
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    font-size: 12px;
}

body.broadcast-ui .broadcast-product-modal-card {
    width: min(980px, 95vw);
    max-height: 92vh;
    overflow: auto;
}

body.broadcast-ui .broadcast-woo-api-modal-card {
    width: min(1120px, 96vw);
    max-height: 92vh;
    overflow: auto;
}

body.broadcast-ui .broadcast-woo-api-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.broadcast-ui .broadcast-woo-api-grid .full-width {
    grid-column: 1 / -1;
}

body.broadcast-ui .broadcast-woo-api-grid label {
    display: block;
    font-size: 12px;
    color: #475569;
    font-weight: 600;
    margin-bottom: 4px;
}

body.broadcast-ui .broadcast-woo-api-grid input,
body.broadcast-ui .broadcast-woo-api-grid select {
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    font-size: 12px;
}

body.broadcast-ui .broadcast-woo-summary {
    margin-top: 8px;
    font-size: 12px;
}

body.broadcast-ui .broadcast-product-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.broadcast-ui .broadcast-product-form-grid .full-width {
    grid-column: 1 / -1;
}

body.broadcast-ui .broadcast-product-form-grid label {
    display: block;
    font-size: 12px;
    color: #475569;
    font-weight: 600;
    margin-bottom: 4px;
}

body.broadcast-ui .broadcast-product-form-grid input,
body.broadcast-ui .broadcast-product-form-grid select,
body.broadcast-ui .broadcast-product-form-grid textarea {
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    font-size: 12px;
}

body.broadcast-ui .broadcast-contact-modal-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.broadcast-ui .broadcast-contact-modal-panel {
    border: 1px solid #dde3ea;
    border-radius: 12px;
    background: #f8fafc;
    padding: 12px;
}

body.broadcast-ui .broadcast-contact-panel-title {
    margin: 0 0 10px;
    font-size: 13px;
    color: #1e293b;
}

body.broadcast-ui .broadcast-contact-info {
    display: grid;
    gap: 10px;
}

body.broadcast-ui .broadcast-contact-modal-headline {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.broadcast-ui .broadcast-contact-modal-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.broadcast-ui .broadcast-contact-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

body.broadcast-ui .broadcast-contact-chips,
body.broadcast-ui .broadcast-contact-modal-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-contact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.broadcast-ui .broadcast-contact-fields label {
    display: block;
    font-size: 11px;
    color: #64748b;
    margin-bottom: 3px;
}

body.broadcast-ui .broadcast-contact-fields p {
    margin: 0;
    font-size: 13px;
    color: #0f172a;
}

body.broadcast-ui .broadcast-affinity-bars {
    display: grid;
    gap: 10px;
}

body.broadcast-ui .broadcast-contact-inbound-list {
    display: grid;
    gap: 8px;
}

body.broadcast-ui .broadcast-inbound-item {
    border: 1px solid #dde3ea;
    border-radius: 10px;
    background: #ffffff;
    padding: 8px 10px;
    display: grid;
    gap: 6px;
}

body.broadcast-ui .broadcast-inbound-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-inbound-item-body {
    font-size: 12px;
    color: #0f172a;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

body.broadcast-ui .broadcast-affinity-item {
    display: grid;
    gap: 4px;
}

body.broadcast-ui .broadcast-affinity-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: #0f172a;
}

body.broadcast-ui .broadcast-affinity-track {
    height: 10px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

body.broadcast-ui .broadcast-affinity-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #0f766e);
    border-radius: 999px;
}

body.broadcast-ui .broadcast-modal-card h3 {
    margin: 0 0 10px;
}

body.broadcast-ui .bcs-brevo-account-modal-card {
    width: min(860px, 94vw);
    max-height: 92vh;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--ba-border) 92%, transparent);
    background: linear-gradient(180deg, var(--ba-surface) 0%, var(--ba-surface-2) 100%);
    box-shadow: 0 28px 70px color-mix(in srgb, var(--ba-accent) 12%, transparent);
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-modal-head {
    margin: 0;
    padding: 16px 18px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--ba-border) 92%, transparent);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ba-surface-3) 82%, transparent) 0%, color-mix(in srgb, var(--ba-surface-2) 96%, transparent) 100%);
    align-items: flex-start;
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-modal-head h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.15;
    color: var(--ba-text-1);
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-modal-head #bcsBrevoAccountCloseBtn {
    min-width: 30px;
    min-height: 30px;
    border-radius: 999px;
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-settings-card-body {
    padding: 18px;
    display: grid;
    gap: 14px;
    overflow-y: auto;
    max-height: calc(92vh - 126px);
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-settings-grid-2,
body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-settings-grid-4 {
    gap: 12px;
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-settings-field {
    gap: 6px;
    align-content: start;
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-settings-field > label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ba-text-2);
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-settings-field .muted {
    font-size: 11px;
    line-height: 1.45;
    color: var(--ba-text-2);
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-settings-card-body input,
body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-settings-card-body select,
body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-settings-card-body textarea {
    min-height: 40px;
    border-radius: 10px;
    padding: 9px 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ba-surface) 94%, #fff) 0%, color-mix(in srgb, var(--ba-surface-2) 98%, #fff) 100%);
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-brevo-toggle-field {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    align-self: end;
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-brevo-toggle-field > label {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-brevo-toggle-field .broadcast-toggle-row {
    border: 0;
    background: transparent;
    padding: 0;
    flex-shrink: 0;
    min-height: 40px;
    align-items: center;
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-modal-actions {
    margin: 0;
    padding: 14px 18px 18px;
    border-top: 1px solid color-mix(in srgb, var(--ba-border) 92%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ba-surface-2) 96%, transparent) 0%, color-mix(in srgb, var(--ba-surface) 98%, transparent) 100%);
    justify-content: flex-end;
    gap: 8px;
}

body.broadcast-ui .bcs-brevo-account-modal-card .broadcast-modal-actions .btn {
    min-width: 120px;
    min-height: 36px;
    justify-content: center;
}

body.broadcast-ui .broadcast-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 8px;
}

body.broadcast-ui .summary-box {
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #dde3ea;
    display: grid;
    gap: 4px;
}

body.broadcast-ui .summary-box span {
    font-size: 12px;
    color: #475569;
}

body.broadcast-ui .summary-box strong {
    font-size: 22px;
}

body.broadcast-ui .summary-box.total { background: #f8fafc; }
body.broadcast-ui .summary-box.imported { background: #ecfdf5; color: #166534; }
body.broadcast-ui .summary-box.skipped { background: #fff7ed; color: #9a3412; }
body.broadcast-ui .summary-box.warned { background: #fef2f2; color: #991b1b; }

body.broadcast-ui .broadcast-modal-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

body.broadcast-ui .broadcast-send-modal-actions {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    gap: 10px;
}

@media (max-width: 1180px) {
    body.broadcast-ui .broadcast-contact-name-col { width: 150px; }
    body.broadcast-ui .broadcast-contact-identity-col { width: 160px; }
    body.broadcast-ui .broadcast-contact-chip-col-status { width: 88px; }
}

@media (max-width: 980px) {
    body.broadcast-ui .broadcast-contact-row {
        min-height: 52px;
        height: auto;
        padding: 5px 0;
    }

    body.broadcast-ui .broadcast-contact-chip-lane {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    body.broadcast-ui .broadcast-contact-chip-col-status,
    body.broadcast-ui .broadcast-contact-chip-col-tier,
    body.broadcast-ui .broadcast-contact-chip-col-source,
    body.broadcast-ui .broadcast-contact-chip-col-camp,
    body.broadcast-ui .broadcast-contact-chip-col-fatigue {
        width: auto;
    }

    body.broadcast-ui .broadcast-contact-modal-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body.broadcast-ui .broadcast-contact-row {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 6px;
        padding: 8px;
    }

    body.broadcast-ui .broadcast-contact-row-stripe {
        display: none;
    }

    body.broadcast-ui .broadcast-contact-pipe {
        display: none;
    }

    body.broadcast-ui .broadcast-contact-name-col,
    body.broadcast-ui .broadcast-contact-identity-col {
        width: calc(50% - 24px);
    }

    body.broadcast-ui .broadcast-contact-chip-lane {
        width: 100%;
        padding: 0;
    }

    body.broadcast-ui .broadcast-contact-actions {
        width: 100%;
        justify-content: flex-end;
        padding: 0;
    }

    body.broadcast-ui .broadcast-woo-api-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.broadcast-ui .broadcast-woo-api-grid {
        grid-template-columns: 1fr;
    }
}

body.broadcast-ui .broadcast-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

body.broadcast-ui .broadcast-settings-grid > label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #dbe5f3;
    border-radius: 10px;
    background: #f8fbff;
}

body.broadcast-ui .broadcast-settings-grid > div > label,
body.broadcast-ui .broadcast-settings-inline-grid > div > label,
body.broadcast-ui .broadcast-settings-advanced-grid > div > label {
    font-size: 12px;
    color: #1e293b;
    margin-bottom: 6px;
    display: block;
}

body.broadcast-ui .broadcast-settings-grid input,
body.broadcast-ui .broadcast-settings-grid select,
body.broadcast-ui .broadcast-settings-inline-grid input,
body.broadcast-ui .broadcast-settings-inline-grid select,
body.broadcast-ui .broadcast-settings-inline-grid textarea,
body.broadcast-ui .broadcast-settings-advanced-grid textarea {
    width: 100%;
}

body.broadcast-ui .broadcast-secret-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

body.broadcast-ui .broadcast-secret-wrap .btn {
    min-height: 34px;
}

body.broadcast-ui .broadcast-evo-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #dbe5f3;
    border-radius: 10px;
    background: #f8fbff;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}

body.broadcast-ui .broadcast-evo-status .evo-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #94a3b8;
}

body.broadcast-ui .broadcast-evo-status .evo-dot.connected {
    background: #16a34a;
}

body.broadcast-ui .broadcast-evo-status .evo-dot.disconnected {
    background: #dc2626;
}

body.broadcast-ui .broadcast-evo-status .evo-dot.unknown {
    background: #94a3b8;
}

body.broadcast-ui .broadcast-settings-inline-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 10px;
    align-items: end;
}

body.broadcast-ui .broadcast-settings-inline-grid > label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

body.broadcast-ui .broadcast-settings-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

body.broadcast-ui .broadcast-settings-card {
    position: relative;
    border: 1px solid #dde3ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.05);
    margin-top: 14px;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body.broadcast-ui .broadcast-settings-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #3b6bff, #60a5fa);
}

body.broadcast-ui .broadcast-settings-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

body.broadcast-ui .broadcast-settings-card.tone-core::before { background: linear-gradient(90deg, #3b6bff, #60a5fa); }
body.broadcast-ui .broadcast-settings-card.tone-wa::before { background: linear-gradient(90deg, #0f766e, #14b8a6); }
body.broadcast-ui .broadcast-settings-card.tone-email::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
body.broadcast-ui .broadcast-settings-card.tone-webhooks::before { background: linear-gradient(90deg, #f59e0b, #fb923c); }
body.broadcast-ui .broadcast-settings-card.tone-survey::before { background: linear-gradient(90deg, #db2777, #f472b6); }
body.broadcast-ui .broadcast-settings-card.tone-rules::before { background: linear-gradient(90deg, #475569, #94a3b8); }

body.broadcast-ui .broadcast-settings-card.tone-core .broadcast-settings-card-header { background: linear-gradient(135deg, rgba(59,107,255,0.09), rgba(96,165,250,0.05)); }
body.broadcast-ui .broadcast-settings-card.tone-wa .broadcast-settings-card-header { background: linear-gradient(135deg, rgba(15,118,110,0.10), rgba(20,184,166,0.05)); }
body.broadcast-ui .broadcast-settings-card.tone-email .broadcast-settings-card-header { background: linear-gradient(135deg, rgba(139,92,246,0.10), rgba(167,139,250,0.05)); }
body.broadcast-ui .broadcast-settings-card.tone-webhooks .broadcast-settings-card-header { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(251,146,60,0.05)); }
body.broadcast-ui .broadcast-settings-card.tone-survey .broadcast-settings-card-header { background: linear-gradient(135deg, rgba(219,39,119,0.10), rgba(244,114,182,0.05)); }
body.broadcast-ui .broadcast-settings-card.tone-rules .broadcast-settings-card-header { background: linear-gradient(135deg, rgba(71,85,105,0.12), rgba(148,163,184,0.06)); }

body.broadcast-ui .broadcast-settings-card.tone-core .broadcast-settings-card-title { color: #2563eb; }
body.broadcast-ui .broadcast-settings-card.tone-wa .broadcast-settings-card-title { color: #0f766e; }
body.broadcast-ui .broadcast-settings-card.tone-email .broadcast-settings-card-title { color: #7c3aed; }
body.broadcast-ui .broadcast-settings-card.tone-webhooks .broadcast-settings-card-title { color: #b45309; }
body.broadcast-ui .broadcast-settings-card.tone-survey .broadcast-settings-card-title { color: #be185d; }
body.broadcast-ui .broadcast-settings-card.tone-rules .broadcast-settings-card-title { color: #475569; }

body.broadcast-ui .broadcast-panel[data-panel="settings"] {
    display: grid;
    gap: 10px;
}

body.broadcast-ui .broadcast-panel[data-panel="settings"].hidden {
    display: none;
}

body.broadcast-ui .broadcast-settings-card-header {
    padding: 12px 14px;
    border-bottom: 1px solid #e3e7ef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    background: #f7f8fb;
}

body.broadcast-ui .broadcast-settings-card-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #475569;
}

body.broadcast-ui .broadcast-settings-card-body {
    padding: 14px;
    display: grid;
    gap: 12px;
}

body.broadcast-ui .broadcast-settings-grid-2,
body.broadcast-ui .broadcast-settings-grid-3,
body.broadcast-ui .broadcast-settings-grid-4,
body.broadcast-ui .broadcast-settings-grid-5,
body.broadcast-ui .broadcast-settings-grid-6,
body.broadcast-ui .broadcast-settings-grid-7 {
    display: grid;
    gap: 10px;
}

body.broadcast-ui .broadcast-settings-grid-2 {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
}

body.broadcast-ui .broadcast-settings-grid-3 {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

body.broadcast-ui .broadcast-settings-grid-4 {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
}

body.broadcast-ui .broadcast-settings-grid-5 {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    align-items: start;
}

body.broadcast-ui .broadcast-settings-grid-6 {
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    align-items: start;
}

body.broadcast-ui .broadcast-settings-grid-7 {
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    align-items: start;
}

body.broadcast-ui .bcs-evo-direct-grid {
    align-items: start;
}

body.broadcast-ui .bcs-evo-direct-grid .broadcast-settings-field {
    align-content: start;
}

body.broadcast-ui .broadcast-settings-field {
    display: grid;
    gap: 4px;
}

body.broadcast-ui .broadcast-settings-micro-hint {
    font-size: 11px !important;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

body.broadcast-ui .broadcast-settings-micro-hint code,
body.broadcast-ui .broadcast-settings-micro-hint strong {
    font-size: inherit;
}

body.broadcast-ui .broadcast-settings-field > label {
    margin: 0;
    font-size: 12px;
    color: #475569;
    font-weight: 600;
}

body.broadcast-ui .broadcast-settings-card-body input,
body.broadcast-ui .broadcast-settings-card-body select,
body.broadcast-ui .broadcast-settings-card-body textarea {
    width: 100%;
    min-height: 34px;
    border: 1px solid #d7dde8;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6f9ff 100%);
    font-size: 12px;
    color: #0f172a;
    padding: 7px 10px;
}

body.broadcast-ui .broadcast-settings-card-body input:focus,
body.broadcast-ui .broadcast-settings-card-body select:focus,
body.broadcast-ui .broadcast-settings-card-body textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
    background: #ffffff;
    outline: none;
}

body.broadcast-ui .broadcast-input-mono {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 11.5px;
}

body.broadcast-ui .broadcast-settings-status-line {
    font-size: 12px;
    min-height: 18px;
    color: #64748b;
}

body.broadcast-ui .broadcast-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #d7dde8;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(59,107,255,0.06), rgba(255,255,255,0.96));
    cursor: pointer;
}

body.broadcast-ui .broadcast-toggle-row.compact {
    max-width: 100%;
}

body.broadcast-ui .broadcast-toggle-info {
    display: grid;
    gap: 2px;
}

body.broadcast-ui .broadcast-toggle-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
}

body.broadcast-ui .broadcast-toggle-desc {
    font-size: 11px;
    color: #64748b;
}

body.broadcast-ui .broadcast-toggle-control {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

body.broadcast-ui .broadcast-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

body.broadcast-ui .broadcast-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cbd5e1;
    transition: all 0.2s ease;
}

body.broadcast-ui .broadcast-toggle-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #ffffff;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
}

body.broadcast-ui .broadcast-toggle-input:checked + .broadcast-toggle-track {
    background: #2563eb;
}

body.broadcast-ui .broadcast-toggle-input:checked + .broadcast-toggle-track::after {
    transform: translateX(16px);
}

body.broadcast-ui .broadcast-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

body.broadcast-ui .broadcast-status-badge .evo-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
}

body.broadcast-ui .broadcast-status-badge .evo-dot.connected {
    background: #16a34a;
}

body.broadcast-ui .broadcast-status-badge .evo-dot.disconnected {
    background: #dc2626;
}

body.broadcast-ui .broadcast-status-badge .evo-dot.unknown {
    background: #64748b;
}

body.broadcast-ui .broadcast-status-badge.connected {
    border-color: #86efac;
    background: #ecfdf5;
    color: #15803d;
}

body.broadcast-ui .broadcast-status-badge.disconnected {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

body.broadcast-ui .broadcast-status-badge.unknown {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #64748b;
}

body.broadcast-ui .broadcast-status-hint {
    min-height: 34px;
    display: flex;
    align-items: center;
    font-size: 11.5px;
    color: #64748b;
}

body.broadcast-ui .brand-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

body.broadcast-ui .brand-badge.not-configured {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

body.broadcast-ui .bcs-brand-wizard-card {
    width: min(680px, calc(100vw - 28px));
}

body.broadcast-ui .bcs-brand-stepper-tabs {
    margin-bottom: 0;
}

body.broadcast-ui .bcs-brand-wizard-body {
    min-height: 360px;
}

body.broadcast-ui .bcs-brand-promo-rows {
    display: grid;
    gap: 8px;
}

body.broadcast-ui .bcs-brand-promo-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

body.broadcast-ui .broadcast-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #334155;
    font-weight: 600;
    padding-top: 20px;
}

body.broadcast-ui .broadcast-inline-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #2563eb;
}

body.broadcast-ui .broadcast-survey-add-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 160px 100px 90px auto;
    gap: 8px;
    align-items: end;
    padding: 10px;
    border: 1px dashed #93c5fd;
    border-radius: 8px;
    background: #eef4ff;
}

body.broadcast-ui .broadcast-chip-group {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-chip {
    border: 1px solid #dbe5f3;
    background: #ffffff;
    color: #334155;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

body.broadcast-ui .broadcast-chip:hover {
    border-color: #2563eb;
    color: #1d4ed8;
}

body.broadcast-ui .broadcast-chip.selected {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

body.broadcast-ui .broadcast-chip-hidden-select {
    display: none !important;
}

body.broadcast-ui .broadcast-rule-head-grid {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) auto auto;
    gap: 10px;
    align-items: end;
}

body.broadcast-ui .broadcast-brevo-toggle-field {
    align-content: start;
}

body.broadcast-ui .broadcast-brevo-toggle-field .broadcast-toggle-row {
    min-height: 34px;
    padding: 7px 10px;
    align-self: start;
}

body.broadcast-ui .broadcast-brevo-toggle-field .broadcast-toggle-label {
    font-size: 12px;
}

body.broadcast-ui .broadcast-brevo-toggle-field .broadcast-toggle-desc {
    font-size: 10.5px;
}

body.broadcast-ui #bcsBrevoAccountsTable .bcs-brevo-col-label {
    width: 120px;
}

body.broadcast-ui #bcsBrevoAccountsTable .bcs-brevo-col-sender {
    width: 220px;
}

body.broadcast-ui #bcsBrevoAccountsTable .bcs-brevo-col-actions {
    width: 200px;
}

body.broadcast-ui #bcsBrevoAccountsTable td.bcs-brevo-label-cell {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.broadcast-ui #bcsBrevoAccountsTable td.bcs-brevo-sender-cell {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.broadcast-ui #bcsBrevoAccountsTable td.bcs-brevo-actions-cell {
    white-space: nowrap;
}

body.broadcast-ui #bcsBrevoAccountsTable .bcs-brevo-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

body.broadcast-ui #bcsBrevoAccountsTable .bcs-brevo-actions .btn {
    min-height: 26px;
    padding: 0 9px;
}

body.broadcast-ui #bcsBrevoAccountsTable .bcs-brevo-actions .btn[data-tone="test"],
body.broadcast-ui #bcsBrevoAccountsTable .bcs-brevo-actions .btn[data-tone="edit"] {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

body.broadcast-ui #bcsBrevoAccountsTable .bcs-brevo-actions .btn[data-tone="test-ok"] {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

body.broadcast-ui #bcsBrevoAccountsTable .bcs-brevo-actions .btn[data-tone="test-fail"] {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

body.broadcast-ui #bcsBrevoAccountsTable .bcs-brevo-actions .btn[data-tone="enable"] {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

body.broadcast-ui #bcsBrevoAccountsTable .bcs-brevo-actions .btn[data-tone="disable"] {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}

body.broadcast-ui #bcsBrevoAccountsTable .bcs-brevo-actions .btn[data-tone="archive"] {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

body.broadcast-ui .broadcast-rules-card .broadcast-rule-builder-wrap {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

body.broadcast-ui .broadcast-rules-card .broadcast-rule-condition-box,
body.broadcast-ui .broadcast-rules-card .broadcast-rule-actions-box {
    border: 1px solid #dde3ef;
    border-radius: 10px;
    padding: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

body.broadcast-ui .broadcast-rules-card .broadcast-rule-condition-box > label,
body.broadcast-ui .broadcast-rules-card .broadcast-rule-actions-box > label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

body.broadcast-ui .broadcast-rules-card .broadcast-rule-condition-grid {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 90px 100px auto;
    gap: 6px;
}

body.broadcast-ui .broadcast-rules-card .broadcast-rule-actions-list {
    display: grid;
    gap: 8px;
}

body.broadcast-ui .broadcast-rules-card .broadcast-action-item {
    border: 1px dashed #c7d2e1;
    border-radius: 10px;
    padding: 8px;
    display: grid;
    gap: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

body.broadcast-ui .broadcast-rules-card .broadcast-action-item-head {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-rules-card .broadcast-action-inline {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
}

body.broadcast-ui .broadcast-rules-card .broadcast-rule-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.35;
    background: #eef2ff;
    color: #1e3a8a;
    border: 1px solid #c7d2fe;
}

body.broadcast-ui .broadcast-rules-card .broadcast-rule-advanced {
    margin-top: 8px;
}

body.broadcast-ui .broadcast-rules-card .broadcast-rule-advanced summary {
    cursor: pointer;
    color: #64748b;
    font-size: 12px;
}

body.broadcast-ui .broadcast-rules-card .broadcast-rule-advanced textarea {
    min-height: 62px;
}

body.broadcast-ui .broadcast-rules-card .broadcast-rule-sentence {
    line-height: 1.5;
    color: #0f172a;
}

body.broadcast-ui .broadcast-rules-card .broadcast-rule-sentence .arrow {
    color: #2563eb;
    font-weight: 600;
    margin-right: 4px;
}

body.broadcast-ui .broadcast-rules-card .broadcast-rule-row-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 960px) {
    body.broadcast-ui .broadcast-filters {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    body.broadcast-ui .broadcast-analytics-cards {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }

    body.broadcast-ui .broadcast-delivery-funnel {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }

    body.broadcast-ui .ba-stat-grid {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    body.broadcast-ui .ba-funnel-grid {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    body.broadcast-ui .ba-two-col {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .ba-queue-filter-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .ba-queue-action-row {
        align-items: stretch;
    }

    body.broadcast-ui .ba-queue-pagination {
        justify-content: flex-start;
    }

    body.broadcast-ui .ba-chain-group,
    body.broadcast-ui .ba-chain-slot {
        flex-direction: column;
        align-items: stretch;
    }

    body.broadcast-ui .ba-ops-metric-grid,
    body.broadcast-ui .ba-two-col-tight {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .ba-chain-arrow {
        align-self: center;
        transform: rotate(90deg);
    }

    body.broadcast-ui .broadcast-product-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    body.broadcast-ui .broadcast-mapping-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-campaign-list {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

@media (max-width: 720px) {
    body.broadcast-ui .broadcast-hero {
        flex-direction: column;
    }

    body.broadcast-ui .broadcast-analytics-cards {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    body.broadcast-ui .broadcast-delivery-funnel {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    body.broadcast-ui .ba-stat-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    body.broadcast-ui .ba-funnel-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    body.broadcast-ui .broadcast-chart-grid {
        grid-template-columns: repeat(4, minmax(56px, 1fr));
    }

    body.broadcast-ui .broadcast-product-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-summary-grid {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
    }

    body.broadcast-ui .broadcast-product-form-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-contact-edit-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-campaign-list {
        grid-template-columns: 1fr;
    }
}

body.broadcast-ui .broadcast-campaign-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 14px;
}

body.broadcast-ui .broadcast-campaign-card {
    border: 1px solid #e3e7ef;
    border-left-width: 3px;
    border-radius: 10px;
    background: #fff;
    padding: 0;
    display: grid;
    gap: 0;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.broadcast-ui .broadcast-campaign-card:hover {
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.1);
    border-color: #c8d0e0;
}

body.broadcast-ui .broadcast-campaign-card.is-active {
    border-left-color: #2563eb;
}

body.broadcast-ui .broadcast-campaign-card.is-test {
    border-left-color: #f59e0b;
}

body.broadcast-ui .broadcast-campaign-card.is-inactive {
    border-left-color: #94a3b8;
}

body.broadcast-ui .campaign-type-awareness { border-left-color: #2563eb; }
body.broadcast-ui .campaign-type-soft_offer { border-left-color: #16a34a; }
body.broadcast-ui .campaign-type-direct_offer { border-left-color: #ea580c; }
body.broadcast-ui .campaign-type-re_engagement { border-left-color: #7c3aed; }
body.broadcast-ui .campaign-type-winback { border-left-color: #db2777; }
body.broadcast-ui .campaign-type-upsell { border-left-color: #0f766e; }

body.broadcast-ui .broadcast-campaign-card-head {
    padding: 12px 14px 8px;
    border-bottom: 1px solid #e3e7ef;
}

body.broadcast-ui .bcc-head-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

body.broadcast-ui .broadcast-campaign-card h4 {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    color: #1a1f2e;
}

body.broadcast-ui .bcc-id-badge {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 10px;
    color: #8b94a8;
    background: #f7f8fb;
    border: 1px solid #e3e7ef;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

body.broadcast-ui .broadcast-campaign-meta {
    padding: 8px 14px 10px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}

body.broadcast-ui .bcc-mini-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #f7f8fb;
    border-top: 1px solid #e3e7ef;
    border-bottom: 1px solid #e3e7ef;
}

body.broadcast-ui .bcc-mini-cell {
    padding: 9px 12px;
    display: grid;
    gap: 3px;
}

body.broadcast-ui .bcc-mini-cell + .bcc-mini-cell {
    border-left: 1px solid #e3e7ef;
}

body.broadcast-ui .bcc-mini-label {
    font-size: 11px;
    color: #8b94a8;
    font-weight: 500;
}

body.broadcast-ui .bcc-mini-val {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 17px;
    line-height: 1;
    color: #1a1f2e;
}

body.broadcast-ui .bcc-mini-val.zero {
    color: #64748b;
}

body.broadcast-ui .bcc-mini-val.has-pending {
    color: #d97706;
}

body.broadcast-ui .bcc-mini-val.has-dispatched {
    color: #059669;
}

body.broadcast-ui .bcc-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
}

body.broadcast-ui .broadcast-queue-widget {
    margin-bottom: 10px;
    width: min(360px, 100%);
    border: 1px solid #dde3ea;
    border-radius: 10px;
    background: #f8fafc;
    padding: 8px 10px;
}

body.broadcast-ui .broadcast-queue-widget table {
    width: 100%;
    border-collapse: collapse;
}

body.broadcast-ui .broadcast-queue-widget td {
    padding: 4px 0;
    font-size: 12px;
}

body.broadcast-ui .broadcast-maintenance-widget {
    margin-bottom: 12px;
    width: min(460px, 100%);
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

body.broadcast-ui .broadcast-maintenance-empty {
    font-size: 12px;
}

body.broadcast-ui .broadcast-maintenance-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

body.broadcast-ui .broadcast-maintenance-head strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
    margin-bottom: 2px;
}

body.broadcast-ui .broadcast-maintenance-grid {
    display: grid;
    gap: 7px;
}

body.broadcast-ui .broadcast-maintenance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}

body.broadcast-ui .broadcast-maintenance-row .label {
    color: #475569;
}

body.broadcast-ui .broadcast-maintenance-row .value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    text-align: right;
}

body.broadcast-ui .broadcast-maintenance-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    border: 1px solid transparent;
}

body.broadcast-ui .broadcast-maintenance-pill.is-healthy {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

body.broadcast-ui .broadcast-maintenance-pill.is-warn {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fdba74;
}

body.broadcast-ui .broadcast-maintenance-pill.is-critical {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fca5a5;
}

body.broadcast-ui .broadcast-maintenance-pill.is-muted {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

body.broadcast-ui .broadcast-maintenance-pill.is-recovered {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #93c5fd;
}

body.broadcast-ui .broadcast-maintenance-note {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #dbe4ee;
    color: #475569;
    font-size: 12px;
}

body.broadcast-ui .broadcast-surface-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid #e3e7ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

body.broadcast-ui .broadcast-surface-head h3,
body.broadcast-ui .broadcast-surface-minihead h4 {
    margin: 0;
    color: #182234;
}

body.broadcast-ui .broadcast-surface-head p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #64748b;
}

body.broadcast-ui .broadcast-campaigns-layout,
body.broadcast-ui .broadcast-analytics-layout {
    gap: 14px;
}

body.broadcast-ui .broadcast-campaign-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

body.broadcast-ui .broadcast-campaign-kpi {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid #e3e7ef;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

body.broadcast-ui .broadcast-campaign-kpi::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
}

body.broadcast-ui .broadcast-campaign-kpi-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
}

body.broadcast-ui .broadcast-campaign-kpi-value {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 28px;
    line-height: 1;
}

body.broadcast-ui .broadcast-campaign-kpi-note {
    font-size: 11px;
    color: #94a3b8;
}

body.broadcast-ui .broadcast-campaign-kpi.tone-pending::before { background: linear-gradient(90deg, #f59e0b, #fb923c); }
body.broadcast-ui .broadcast-campaign-kpi.tone-dispatched::before { background: linear-gradient(90deg, #10b981, #34d399); }
body.broadcast-ui .broadcast-campaign-kpi.tone-primary::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
body.broadcast-ui .broadcast-campaign-kpi.tone-live::before { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
body.broadcast-ui .broadcast-campaign-kpi.tone-test::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
body.broadcast-ui .broadcast-campaign-kpi.tone-pending .broadcast-campaign-kpi-value { color: #d97706; }
body.broadcast-ui .broadcast-campaign-kpi.tone-dispatched .broadcast-campaign-kpi-value { color: #059669; }
body.broadcast-ui .broadcast-campaign-kpi.tone-primary .broadcast-campaign-kpi-value { color: #1d4ed8; }
body.broadcast-ui .broadcast-campaign-kpi.tone-live .broadcast-campaign-kpi-value { color: #0369a1; }
body.broadcast-ui .broadcast-campaign-kpi.tone-test .broadcast-campaign-kpi-value { color: #7c3aed; }

body.broadcast-ui .broadcast-campaign-ops-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(0, 2.08fr);
    gap: 14px;
    align-items: start;
}

body.broadcast-ui .broadcast-campaign-surface {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e3e7ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

body.broadcast-ui .broadcast-surface-minihead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-surface-minihead span {
    font-size: 11px;
    color: #64748b;
}

body.broadcast-ui .broadcast-queue-widget,
body.broadcast-ui .broadcast-maintenance-widget {
    width: 100%;
    margin: 0;
    box-shadow: none;
}

body.broadcast-ui .broadcast-maintenance-widget {
    min-height: 100%;
}

body.broadcast-ui .broadcast-campaign-list {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 12px;
}

body.broadcast-ui .broadcast-campaign-card {
    position: relative;
    overflow: hidden;
    border-width: 1px;
    border-left-width: 1px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

body.broadcast-ui .broadcast-campaign-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #94a3b8, #cbd5e1);
}

body.broadcast-ui .broadcast-campaign-card.is-active::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
body.broadcast-ui .broadcast-campaign-card.is-test::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
body.broadcast-ui .broadcast-campaign-card.is-inactive::before { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
body.broadcast-ui .campaign-type-awareness::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
body.broadcast-ui .campaign-type-soft_offer::before { background: linear-gradient(90deg, #10b981, #34d399); }
body.broadcast-ui .campaign-type-direct_offer::before { background: linear-gradient(90deg, #f97316, #fb923c); }
body.broadcast-ui .campaign-type-re_engagement::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
body.broadcast-ui .campaign-type-winback::before { background: linear-gradient(90deg, #db2777, #f472b6); }
body.broadcast-ui .campaign-type-upsell::before { background: linear-gradient(90deg, #0f766e, #14b8a6); }

body.broadcast-ui .broadcast-campaign-card-head {
    padding-top: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

body.broadcast-ui .broadcast-campaign-meta {
    gap: 6px;
    padding-top: 6px;
}

body.broadcast-ui .bcc-mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #f8fafc;
}

body.broadcast-ui .bcc-mini-cell {
    gap: 4px;
}

body.broadcast-ui .bcc-mini-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

body.broadcast-ui .bcc-mini-val {
    font-size: 20px;
}

body.broadcast-ui .bcc-toggle-row {
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid #e3e7ef;
    background: #ffffff;
}

body.broadcast-ui .bcc-actions {
    padding: 10px 14px 14px;
    justify-content: space-between;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-campaign-builder-strip {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid #dde3ef;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.05);
}

body.broadcast-ui .broadcast-campaign-builder-kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 16px;
    border-right: 1px solid #e3e7ef;
}

body.broadcast-ui .broadcast-campaign-builder-kpi:last-of-type {
    border-right: none;
}

body.broadcast-ui .broadcast-campaign-builder-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

body.broadcast-ui .broadcast-campaign-builder-kpi.tone-pending .broadcast-campaign-builder-icon { background: #fef3c7; color: #b45309; }
body.broadcast-ui .broadcast-campaign-builder-kpi.tone-dispatched .broadcast-campaign-builder-icon { background: #d1fae5; color: #059669; }
body.broadcast-ui .broadcast-campaign-builder-kpi.tone-live .broadcast-campaign-builder-icon { background: #eef1ff; color: #2563eb; }
body.broadcast-ui .broadcast-campaign-builder-copy {
    display: grid;
    gap: 2px;
}

body.broadcast-ui .broadcast-campaign-builder-value {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.5px;
}

body.broadcast-ui .broadcast-campaign-builder-kpi.tone-pending .broadcast-campaign-builder-value { color: #d97706; }
body.broadcast-ui .broadcast-campaign-builder-kpi.tone-dispatched .broadcast-campaign-builder-value { color: #059669; }
body.broadcast-ui .broadcast-campaign-builder-kpi.tone-live .broadcast-campaign-builder-value { color: #2563eb; }
body.broadcast-ui .broadcast-campaign-builder-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
}

body.broadcast-ui .broadcast-campaign-builder-actions {
    margin-left: auto;
    align-items: center;
}

body.broadcast-ui .broadcast-campaign-worker-card,
body.broadcast-ui .broadcast-campaign-grid-shell {
    border: 1px solid #dde3ef;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

body.broadcast-ui .broadcast-campaign-worker-shell {
    display: grid;
}

body.broadcast-ui .broadcast-campaign-worker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #dde3ef;
}

body.broadcast-ui .broadcast-campaign-worker-head-copy {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.broadcast-ui .broadcast-campaign-worker-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    color: #b45309;
    flex-shrink: 0;
}

body.broadcast-ui .broadcast-campaign-worker-head h4 {
    margin: 0;
    font-size: 12px;
    color: #1a1f2e;
}

body.broadcast-ui .broadcast-campaign-worker-head p {
    margin: 2px 0 0;
    font-size: 10px;
    color: #8593a8;
}

body.broadcast-ui .broadcast-campaign-worker-badge,
body.broadcast-ui .broadcast-campaign-worker-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

body.broadcast-ui .broadcast-campaign-worker-badge.tone-healthy,
body.broadcast-ui .broadcast-campaign-worker-status.tone-healthy { background: #d1fae5; border-color: #a7f3d0; color: #059669; }
body.broadcast-ui .broadcast-campaign-worker-badge.tone-warn,
body.broadcast-ui .broadcast-campaign-worker-status.tone-warn { background: #fef3c7; border-color: #fde68a; color: #92400e; }
body.broadcast-ui .broadcast-campaign-worker-badge.tone-critical,
body.broadcast-ui .broadcast-campaign-worker-status.tone-critical { background: #fee2e2; border-color: #fecaca; color: #dc2626; }
body.broadcast-ui .broadcast-campaign-worker-badge.tone-muted,
body.broadcast-ui .broadcast-campaign-worker-status.tone-muted { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; }
body.broadcast-ui .broadcast-campaign-worker-badge.tone-recovered,
body.broadcast-ui .broadcast-campaign-worker-status.tone-recovered { background: #ede9fe; border-color: #ddd6fe; color: #7c3aed; }

body.broadcast-ui .broadcast-campaign-worker-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.broadcast-ui .broadcast-campaign-worker-stat {
    display: grid;
    gap: 4px;
    padding: 10px 14px;
    border-right: 1px solid #dde3ef;
}

body.broadcast-ui .broadcast-campaign-worker-stat:last-child {
    border-right: none;
}

body.broadcast-ui .broadcast-campaign-worker-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8b94a8;
}

body.broadcast-ui .broadcast-campaign-worker-meta {
    font-size: 9.5px;
    color: #b2bccb;
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
}

body.broadcast-ui .broadcast-campaign-worker-number {
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
}

body.broadcast-ui .broadcast-campaign-worker-alert {
    padding: 8px 16px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), transparent);
    border-top: 1px solid #fde68a;
    font-size: 10.5px;
    color: #92400e;
}

body.broadcast-ui .broadcast-campaign-grid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #dde3ef;
    row-gap: 8px;
}

body.broadcast-ui .broadcast-campaign-grid-head-left,
body.broadcast-ui .broadcast-campaign-grid-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.broadcast-ui .broadcast-campaign-grid-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #8593a8;
}

body.broadcast-ui .broadcast-campaign-grid-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid #c5d5ff;
    font-size: 9.5px;
    font-weight: 700;
    background: #eef1ff;
    color: #3b6bff;
}

body.broadcast-ui .broadcast-campaign-grid-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
    animation: pulse 2s infinite;
}

body.broadcast-ui .broadcast-campaign-filter {
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #dde3ef;
    background: #ffffff;
    color: #475569;
    font-size: 11.5px;
    font-family: "DM Sans", sans-serif;
    cursor: pointer;
    outline: none;
}

body.broadcast-ui .broadcast-campaign-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 14px;
}

body.broadcast-ui .broadcast-campaign-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #dde3ef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05), 0 10px 20px rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

body.broadcast-ui .broadcast-campaign-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
}

body.broadcast-ui .broadcast-campaign-card::before {
    display: none;
}

body.broadcast-ui .broadcast-campaign-card.cc-live { border-color: rgba(59, 107, 255, 0.28); }
body.broadcast-ui .broadcast-campaign-card.cc-test { border-color: rgba(139, 92, 246, 0.24); }
body.broadcast-ui .broadcast-campaign-card.cc-paused { border-color: #dde3ef; }

body.broadcast-ui .broadcast-campaign-card-stripe {
    padding: 4px 12px;
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 1px solid #dde3ef;
}

body.broadcast-ui .broadcast-campaign-card-stripe.tone-live { background: linear-gradient(90deg, rgba(59, 107, 255, 0.10), transparent); color: #2563eb; }
body.broadcast-ui .broadcast-campaign-card-stripe.tone-test { background: linear-gradient(90deg, rgba(139, 92, 246, 0.10), transparent); color: #7c3aed; }
body.broadcast-ui .broadcast-campaign-card-stripe.tone-paused { background: linear-gradient(90deg, rgba(148, 163, 184, 0.12), transparent); color: #64748b; }

body.broadcast-ui .broadcast-campaign-card-head {
    padding: 11px 13px 9px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-bottom: 1px solid #dde3ef;
}

body.broadcast-ui .broadcast-campaign-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

body.broadcast-ui .broadcast-campaign-card-top h4 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: #1a1f2e;
    overflow-wrap: anywhere;
}

body.broadcast-ui .broadcast-campaign-card-id {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 9px;
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
}

body.broadcast-ui .broadcast-campaign-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

body.broadcast-ui .broadcast-campaign-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

body.broadcast-ui .broadcast-campaign-tag.tone-wa { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
body.broadcast-ui .broadcast-campaign-tag.tone-email { background: #eef1ff; border-color: #c5d5ff; color: #2563eb; }
body.broadcast-ui .broadcast-campaign-tag.tone-both { background: #ede9fe; border-color: #ddd6fe; color: #7c3aed; }
body.broadcast-ui .broadcast-campaign-tag.tone-steps { background: #f1f5f9; border-color: #d7dde8; color: #475569; }
body.broadcast-ui .broadcast-campaign-tag.tone-live { background: #d1fae5; border-color: #a7f3d0; color: #059669; }
body.broadcast-ui .broadcast-campaign-tag.tone-test { background: #fef3c7; border-color: #fde68a; color: #92400e; }
body.broadcast-ui .broadcast-campaign-tag.tone-paused { background: #f1f5f9; border-color: #d7dde8; color: #64748b; }

body.broadcast-ui .broadcast-campaign-card-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid #dde3ef;
    gap: 0;
}

body.broadcast-ui .broadcast-campaign-stat {
    display: grid;
    gap: 2px;
    padding: 8px 7px;
    text-align: center;
    border-right: 1px solid #dde3ef;
}

body.broadcast-ui .broadcast-campaign-stat:last-child {
    border-right: none;
}

body.broadcast-ui .broadcast-campaign-stat-value {
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.5px;
    font-weight: 800;
}

body.broadcast-ui .broadcast-campaign-stat-value.tone-pending { color: #f59e0b; }
body.broadcast-ui .broadcast-campaign-stat-value.tone-dispatched { color: #10b981; }
body.broadcast-ui .broadcast-campaign-stat-value.tone-failed { color: #ef4444; }
body.broadcast-ui .broadcast-campaign-stat-value.tone-sent { color: #2563eb; }
body.broadcast-ui .broadcast-campaign-stat-value.tone-muted { color: #cbd5e1; }
body.broadcast-ui .broadcast-campaign-stat-label {
    font-size: 8.5px;
    color: #8593a8;
}

body.broadcast-ui .broadcast-campaign-card-funnel {
    display: grid;
    gap: 3px;
    padding: 7px 11px;
    border-bottom: 1px solid #dde3ef;
}

body.broadcast-ui .broadcast-campaign-card-scope {
    font-size: 9px;
    line-height: 1.2;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

body.broadcast-ui .broadcast-campaign-funnel-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.broadcast-ui .broadcast-campaign-funnel-label {
    width: 52px;
    flex-shrink: 0;
    font-size: 9px;
    color: #8593a8;
}

body.broadcast-ui .broadcast-campaign-funnel-bar {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: #edf1f8;
    overflow: hidden;
}

body.broadcast-ui .broadcast-campaign-funnel-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

body.broadcast-ui .broadcast-campaign-funnel-fill.tone-sent { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
body.broadcast-ui .broadcast-campaign-funnel-fill.tone-delivered { background: linear-gradient(90deg, #3b6bff, #818cf8); }
body.broadcast-ui .broadcast-campaign-funnel-fill.tone-read { background: linear-gradient(90deg, #10b981, #34d399); }
body.broadcast-ui .broadcast-campaign-funnel-fill.tone-clicked { background: linear-gradient(90deg, #f59e0b, #fb923c); }
body.broadcast-ui .broadcast-campaign-funnel-value,
body.broadcast-ui .broadcast-campaign-funnel-pct {
    flex-shrink: 0;
    font-size: 9px;
    color: #475569;
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
}

body.broadcast-ui .broadcast-campaign-funnel-value {
    width: 26px;
    text-align: right;
}

body.broadcast-ui .broadcast-campaign-funnel-pct {
    width: 34px;
    text-align: right;
    color: #94a3b8;
}

body.broadcast-ui .broadcast-campaign-card-empty {
    padding: 10px 12px;
    border-bottom: 1px solid #dde3ef;
    background: #f8fafc;
    text-align: center;
    font-size: 10px;
    color: #94a3b8;
}

body.broadcast-ui .broadcast-campaign-card-toggle-row {
    display: none;
}

body.broadcast-ui .broadcast-campaign-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 9px 11px;
    min-height: 42px;
}

body.broadcast-ui .broadcast-campaign-toggle-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: nowrap;
}

body.broadcast-ui .broadcast-campaign-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: #475569;
}

body.broadcast-ui .broadcast-campaign-toggle input {
    accent-color: #2563eb;
}

body.broadcast-ui .broadcast-campaign-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: nowrap;
    margin-left: auto;
}

body.broadcast-ui .broadcast-campaign-action {
    height: 25px;
    padding: 0 9px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 10.5px;
    font-weight: 700;
    font-family: "DM Sans", sans-serif;
    cursor: pointer;
}

body.broadcast-ui .broadcast-campaign-action.action-edit { background: #2563eb; border-color: #2563eb; color: #ffffff; }
body.broadcast-ui .broadcast-campaign-action.action-build { background: #ffffff; border-color: #cbd5e1; color: #475569; }
body.broadcast-ui .broadcast-campaign-action.action-live { background: linear-gradient(135deg, #10b981, #059669); border-color: #059669; color: #ffffff; }
body.broadcast-ui .broadcast-campaign-action.action-delete { background: #ef4444; border-color: #ef4444; color: #ffffff; }

body.broadcast-ui .broadcast-campaign-action:hover {
    filter: brightness(1.03);
}

body.broadcast-ui .broadcast-campaign-empty {
    grid-column: 1 / -1;
    display: grid;
    gap: 4px;
    justify-items: center;
    padding: 36px 20px;
    border: 2px dashed #dde3ef;
    border-radius: 12px;
    background: #ffffff;
    text-align: center;
}

body.broadcast-ui .broadcast-campaign-empty-icon {
    font-size: 28px;
}

body.broadcast-ui .broadcast-campaign-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: #475569;
}

body.broadcast-ui .broadcast-campaign-empty-copy {
    font-size: 11px;
    color: #94a3b8;
}

body.broadcast-ui .broadcast-contacts-import-card,
body.broadcast-ui .broadcast-contacts-shell {
    display: grid;
    gap: 14px;
}

body.broadcast-ui .broadcast-contacts-subcard {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dde3ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

body.broadcast-ui .broadcast-contacts-subcard.hidden {
    display: none;
}

body.broadcast-ui .broadcast-contacts-subhead,
body.broadcast-ui .broadcast-contacts-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-contacts-subhead h4 {
    margin: 0;
    color: #182234;
}

body.broadcast-ui .broadcast-contacts-subchip,
body.broadcast-ui .broadcast-contacts-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 10px;
    font-weight: 700;
}

body.broadcast-ui .broadcast-contacts-subchip {
    background: #f1f5f9;
    border-color: #d7dde8;
    color: #64748b;
}

body.broadcast-ui .broadcast-contacts-subchip.tone-green {
    background: #d1fae5;
    border-color: #a7f3d0;
    color: #059669;
}

body.broadcast-ui .broadcast-contacts-list-head-left,
body.broadcast-ui .broadcast-contacts-list-head-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-contacts-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #8593a8;
}

body.broadcast-ui .broadcast-contacts-pill.tone-blue {
    background: #eef1ff;
    border-color: #c5d5ff;
    color: #3b6bff;
}

body.broadcast-ui .broadcast-contacts-pill.tone-purple {
    background: #ede9fe;
    border-color: #ddd6fe;
    color: #7c3aed;
}

body.broadcast-ui .broadcast-contacts-filters-card {
    padding: 14px;
    border: 1px solid #dde3ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.04);
}

body.broadcast-ui .broadcast-contacts-filters-card label {
    color: #334155;
    font-weight: 700;
}

body.broadcast-ui .broadcast-contacts-filters-card select,
body.broadcast-ui .broadcast-contacts-filters-card input {
    background: #ffffff;
    border-color: #d7dde8;
}

body.broadcast-ui .broadcast-contacts-filter-field,
body.broadcast-ui .broadcast-contacts-filter-action {
    min-width: 0;
}

body.broadcast-ui .broadcast-contacts-filter-field .tz-compact-select,
body.broadcast-ui .broadcast-contacts-filter-field .tz-compact-input {
    width: 100%;
}

body.broadcast-ui .broadcast-contacts-filter-action::before {
    content: "";
    display: block;
    height: 7px;
}

body.broadcast-ui .broadcast-contacts-filter-action .btn {
    width: 100%;
    min-height: 32px;
    justify-content: center;
}

@media (min-width: 1180px) {
    body.broadcast-ui .broadcast-contacts-filters-card.broadcast-filters {
        grid-template-columns:
            0.62fr
            0.78fr
            0.78fr
            0.95fr
            1.08fr
            0.86fr
            0.84fr
            0.92fr
            0.72fr;
        align-items: end;
        column-gap: 8px;
    }

    body.broadcast-ui .broadcast-contacts-filter-action {
        justify-content: stretch;
        white-space: nowrap;
        transform: translateY(-12px);
    }
}

body.broadcast-ui .broadcast-contacts-list-shell {
    padding: 8px;
    border: 1px solid #dde3ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.04);
}

body.broadcast-ui .broadcast-pagination {
    padding: 10px 0 0;
}

body.broadcast-ui .broadcast-products-shell,
body.broadcast-ui .broadcast-products-bundle-shell {
    display: grid;
    gap: 14px;
}

body.broadcast-ui .broadcast-products-import-status {
    padding: 10px 12px;
    border: 1px solid #dbe5f3;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(59, 107, 255, 0.08), rgba(34, 211, 238, 0.06));
    color: #35507b;
    font-size: 12px;
    font-weight: 600;
}

body.broadcast-ui .broadcast-products-subcard {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dde3ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.04);
}

body.broadcast-ui .broadcast-products-subcard.hidden {
    display: none;
}

body.broadcast-ui .broadcast-products-subcard h4 {
    margin: 0;
    color: #182234;
}

body.broadcast-ui .broadcast-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 12px;
}

body.broadcast-ui .broadcast-product-card {
    position: relative;
    border: 1px solid #dde3ea;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 12px;
    display: grid;
    gap: 9px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
}

body.broadcast-ui .broadcast-product-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #3b6bff, #22d3ee);
}

body.broadcast-ui .broadcast-product-card:hover {
    transform: translateY(-1px);
    border-color: #c5d5ff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}

body.broadcast-ui .broadcast-product-card h4 {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    color: #182234;
}

body.broadcast-ui .broadcast-product-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    color: #0f172a;
}

body.broadcast-ui .broadcast-product-price strong {
    font-size: 22px;
    line-height: 1;
    color: #2563eb;
    letter-spacing: -0.4px;
}

body.broadcast-ui .broadcast-product-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-product-card .broadcast-inline-actions {
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 2px;
}

body.broadcast-ui .broadcast-product-card-actions .btn.primary {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

body.broadcast-ui .broadcast-product-card-actions .btn.primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

body.broadcast-ui .broadcast-products-bundle-shell .table-wrap {
    padding: 6px;
    border: 1px solid #dde3ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.04);
}

body.broadcast-ui .broadcast-templates-shell {
    display: grid;
    gap: 14px;
}

body.broadcast-ui .broadcast-template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 12px;
}

body.broadcast-ui .broadcast-template-card {
    position: relative;
    border: 1px solid #dde3ea;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 12px;
    display: grid;
    gap: 10px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
}

body.broadcast-ui .broadcast-template-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #3b6bff, #8b5cf6);
}

body.broadcast-ui .broadcast-template-card:hover {
    transform: translateY(-1px);
    border-color: #c5d5ff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}

body.broadcast-ui .broadcast-template-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-top: 2px;
}

body.broadcast-ui .broadcast-template-card-head strong {
    color: #182234;
    line-height: 1.35;
}

body.broadcast-ui .broadcast-template-card-desc {
    color: #475569;
    line-height: 1.55;
}

body.broadcast-ui .broadcast-template-card-meta {
    padding: 8px 10px;
    border: 1px dashed #d7dde8;
    border-radius: 10px;
    background: rgba(241, 245, 249, 0.85);
    color: #64748b;
}

body.broadcast-ui .broadcast-template-card .broadcast-inline-actions {
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    body.broadcast-ui .broadcast-product-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    body.broadcast-ui .broadcast-template-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 900px) {
    body.broadcast-ui .broadcast-product-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-template-grid {
        grid-template-columns: 1fr;
    }
}

body.broadcast-ui .ba-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: -2px;
}

body.broadcast-ui .ba-toolbar-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #8b94a8;
}

body.broadcast-ui .ba-refresh-btn {
    background: #ffffff;
    border-color: #d7ddea;
    color: #475569;
}

body.broadcast-ui .ba-kpi-hero {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: #ffffff;
    border: 1px solid #e3e7ef;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
}

body.broadcast-ui .ba-kpi-cell {
    position: relative;
    padding: 14px 18px;
    border-right: 1px solid #e3e7ef;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body.broadcast-ui .ba-kpi-cell:hover {
    transform: translateY(-1px);
}

body.broadcast-ui .ba-kpi-cell:last-child {
    border-right: none;
}

body.broadcast-ui .ba-kpi-cell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
}

body.broadcast-ui .ba-kpi-cell.accent-blue::before { background: linear-gradient(90deg, #3b6bff, #818cf8); }
body.broadcast-ui .ba-kpi-cell.accent-orange::before { background: linear-gradient(90deg, #f59e0b, #fb923c); }
body.broadcast-ui .ba-kpi-cell.accent-red::before { background: linear-gradient(90deg, #ef4444, #f87171); }
body.broadcast-ui .ba-kpi-cell.accent-teal::before { background: linear-gradient(90deg, #0e8a9e, #22d3ee); }
body.broadcast-ui .ba-kpi-cell.accent-purple::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
body.broadcast-ui .ba-kpi-cell.accent-green::before { background: linear-gradient(90deg, #10b981, #34d399); }

body.broadcast-ui .ba-kpi-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #8b94a8;
    margin-bottom: 6px;
}

body.broadcast-ui .ba-kpi-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
}

body.broadcast-ui .ba-kpi-cell.accent-blue .ba-kpi-value { color: #3b6bff; }
body.broadcast-ui .ba-kpi-cell.accent-orange .ba-kpi-value { color: #f59e0b; }
body.broadcast-ui .ba-kpi-cell.accent-red .ba-kpi-value { color: #ef4444; }
body.broadcast-ui .ba-kpi-cell.accent-teal .ba-kpi-value { color: #0e8a9e; }
body.broadcast-ui .ba-kpi-cell.accent-purple .ba-kpi-value { color: #8b5cf6; }
body.broadcast-ui .ba-kpi-cell.accent-green .ba-kpi-value { color: #10b981; }

body.broadcast-ui .ba-kpi-hint {
    margin-top: 4px;
    font-size: 9.5px;
    color: #b8bfcc;
}

body.broadcast-ui .ba-head-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 700;
    border: 1px solid;
}

body.broadcast-ui .ba-head-chip.primary { background: #eef1ff; border-color: #c7d7ff; color: #3b6bff; }
body.broadcast-ui .ba-head-chip.purple { background: #ede9fe; border-color: #ddd6fe; color: #8b5cf6; }
body.broadcast-ui .ba-head-chip.orange { background: #fef3c7; border-color: #fde68a; color: #92400e; }
body.broadcast-ui .ba-head-chip.green { background: #d1fae5; border-color: #6ee7b7; color: #10b981; }
body.broadcast-ui .ba-head-chip.neutral { background: #f0f3fa; border-color: #c8d0e0; color: #5a6478; }
body.broadcast-ui .ba-head-chip.wa { background: #eef1ff; border-color: #c7d7ff; color: #3b6bff; }
body.broadcast-ui .ba-head-chip.email { background: #e0f5f8; border-color: #a5e0ea; color: #0e8a9e; }
body.broadcast-ui .ba-head-chip .mini-bar {
    width: 8px;
    height: 4px;
    border-radius: 2px;
    display: inline-block;
}
body.broadcast-ui .ba-head-chip.wa .mini-bar { background: #3b6bff; }
body.broadcast-ui .ba-head-chip.email .mini-bar { background: #0e8a9e; }

body.broadcast-ui .ba-card-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.broadcast-ui .ba-collapse-btn {
    height: 28px;
    padding: 0 12px;
    border-radius: 7px;
    border: 1px solid #3b6bff;
    background: linear-gradient(135deg, #3b6bff, #2563eb);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    font-family: "DM Sans", sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, filter 0.18s ease;
}

body.broadcast-ui .ba-collapse-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

body.broadcast-ui .ba-funnel-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.broadcast-ui .ba-funnel-col {
    padding: 16px 18px;
    border-right: 1px solid #e3e7ef;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

body.broadcast-ui .ba-funnel-col:last-child { border-right: none; }
body.broadcast-ui .ba-funnel-col.blocked { background: linear-gradient(135deg, rgba(239,68,68,.06), rgba(239,68,68,.02)); }
body.broadcast-ui .ba-funnel-col.blocked .ba-funnel-label { color: #ef4444; }
body.broadcast-ui .ba-funnel-sub {
    font-size: 10px;
    color: #8b94a8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
body.broadcast-ui .ba-funnel-sub-left {
    min-width: 0;
}
body.broadcast-ui .ba-funnel-sub-right {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

body.broadcast-ui .ba-head-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.broadcast-ui .ba-trend-legend-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

body.broadcast-ui .ba-trend-total {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: #5a6478;
}

body.broadcast-ui .ba-trend-total strong { color: #1a1f2e; }
body.broadcast-ui .ba-trend-total .swatch {
    width: 10px;
    height: 5px;
    border-radius: 2px;
    display: inline-block;
}
body.broadcast-ui .ba-trend-total .swatch.wa { background: linear-gradient(90deg, #818cf8, #3b6bff); }
body.broadcast-ui .ba-trend-total .swatch.email { background: linear-gradient(90deg, #22d3ee, #0e8a9e); }

body.broadcast-ui .ba-ops-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    min-height: 96px;
    border-bottom: 1px solid #e3e7ef;
}

body.broadcast-ui .ba-ops-kpi {
    padding: 14px 16px;
    border-right: 1px solid #e3e7ef;
}

body.broadcast-ui .ba-ops-kpi:last-child { border-right: none; }
body.broadcast-ui .ba-ops-kpi.tone-blue .ba-ops-metric-value { color: #3b6bff; }
body.broadcast-ui .ba-ops-kpi.tone-orange .ba-ops-metric-value { color: #f59e0b; }
body.broadcast-ui .ba-ops-kpi.tone-red .ba-ops-metric-value { color: #ef4444; }
body.broadcast-ui .ba-ops-kpi.tone-purple .ba-ops-metric-value { color: #8b5cf6; }
body.broadcast-ui .ba-ops-kpi-note {
    font-size: 9.5px;
    color: #b8bfcc;
    margin-top: 2px;
}

body.broadcast-ui .ba-channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
}
body.broadcast-ui .ba-channel-badge.wa { background: linear-gradient(135deg,#dcfce7,#bbf7d0); color: #166534; }
body.broadcast-ui .ba-channel-badge.email { background: #eef1ff; color: #3b6bff; }
body.broadcast-ui .ba-ok-text { color: #10b981; font-weight: 600; }
body.broadcast-ui .ba-error-text { color: #ef4444; font-weight: 600; }
body.broadcast-ui .ba-throughput-bar {
    display: block;
    width: 100%;
    max-width: 120px;
    height: 6px;
    background: #e8ecf5;
    border-radius: 3px;
    overflow: hidden;
}
body.broadcast-ui .ba-throughput-bar > span {
    display: block;
    height: 100%;
    border-radius: 3px;
}
body.broadcast-ui .ba-throughput-bar > span.wa { background: linear-gradient(90deg,#25d366,#128c7e); }
body.broadcast-ui .ba-throughput-bar > span.email { background: linear-gradient(90deg,#3b6bff,#8b5cf6); }

body.broadcast-ui .ba-queue-test-strip {
    padding: 8px 16px;
    background: linear-gradient(90deg, rgba(139,92,246,.08), rgba(59,107,255,.05));
    border-bottom: 1px solid #ddd6fe;
    font-size: 10.5px;
    color: #8b5cf6;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

body.broadcast-ui .ba-queue-test-totals {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
}

body.broadcast-ui .ba-queue-filter-row {
    padding: 10px 14px;
    border-bottom: 1px solid #e3e7ef;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 8px;
}

body.broadcast-ui .ba-queue-filter-row input[type="text"] {
    flex: 1;
    min-width: 160px;
}

body.broadcast-ui .ba-queue-filter-row .btn {
    min-height: 34px;
    padding-inline: 10px;
}

body.broadcast-ui .ba-card-queue .table-wrap {
    margin-top: -2px;
}

body.broadcast-ui .ba-queue-table th,
body.broadcast-ui .ba-queue-table td {
    vertical-align: middle;
}

body.broadcast-ui .ba-queue-table th {
    padding-top: 8px;
    padding-bottom: 8px;
}

body.broadcast-ui .ba-queue-table td {
    padding-top: 7px;
    padding-bottom: 7px;
}

body.broadcast-ui .ba-queue-pagination {
    justify-content: space-between;
}

body.broadcast-ui .ba-page-buttons {
    display: flex;
    gap: 6px;
}

body.broadcast-ui .ba-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    order: 1;
}

body.broadcast-ui .broadcast-analytics-row-secondary {
    order: 2;
}

body.broadcast-ui .ba-card-queue {
    order: 3;
}

body.broadcast-ui .ba-test-panel {
    order: 4;
}

body.broadcast-ui .ba-timeline-search {
    padding: 10px 14px;
    border-bottom: 1px solid #e3e7ef;
    display: flex;
    gap: 6px;
}

body.broadcast-ui .ba-timeline-search input { flex: 1; }

body.broadcast-ui .ba-card-contact .ba-timeline-search {
    padding: 0;
    border-bottom: 0;
}

body.broadcast-ui .ba-affinity-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px 100px;
    border-bottom: 1px solid #e3e7ef;
    background: #f7f8fb;
}

body.broadcast-ui .ba-affinity-head > div {
    padding: 7px 16px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8b94a8;
}

body.broadcast-ui .ba-affinity-head > div:nth-child(2),
body.broadcast-ui .ba-affinity-head > div:nth-child(3) {
    text-align: right;
    padding-right: 10px;
}

body.broadcast-ui .ba-affinity-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px 100px;
    align-items: center;
    gap: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #e3e7ef;
}

body.broadcast-ui .ba-affinity-row:last-child { border-bottom: none; }
body.broadcast-ui .ba-affinity-product {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body.broadcast-ui .ba-affinity-rank {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 800;
    flex-shrink: 0;
}
body.broadcast-ui .ba-affinity-rank.rank-1 { background: linear-gradient(135deg,#fde68a,#f59e0b); color: #92400e; }
body.broadcast-ui .ba-affinity-rank.rank-2 { background: #e8ecf5; color: #5a6478; }
body.broadcast-ui .ba-affinity-rank.rank-3 { background: #eef1ff; color: #3b6bff; }
body.broadcast-ui .ba-affinity-rank.rank-n { background: #f0f3fa; color: #8b94a8; }
body.broadcast-ui .ba-affinity-bar {
    height: 5px;
    background: #f0f3fa;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
body.broadcast-ui .ba-affinity-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#10b981,#34d399);
    border-radius: 2px;
}
body.broadcast-ui .ba-affinity-value {
    text-align: right;
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;
    color: #5a6478;
}
body.broadcast-ui .ba-affinity-value.muted-value { color: #b8bfcc; }
body.broadcast-ui .ba-affinity-empty { padding: 24px; }


body.broadcast-ui .broadcast-analytics-row {
    display: grid;
    gap: 14px;
}

body.broadcast-ui .broadcast-analytics-row-primary {
    grid-template-columns: 1fr;
}

body.broadcast-ui .broadcast-analytics-row-secondary,
body.broadcast-ui .broadcast-analytics-row-tertiary {
    grid-template-columns: 1fr;
}

body.broadcast-ui .ba-card {
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

body.broadcast-ui .ba-card-head {
    padding: 13px 16px;
    background: linear-gradient(180deg, #fbfcff 0%, #f4f7fc 100%);
}

body.broadcast-ui .ba-card-head .muted {
    font-size: 11px;
}

body.broadcast-ui .ba-card-body {
    padding: 16px;
}

body.broadcast-ui .ba-card-body.compact {
    padding: 0;
}

body.broadcast-ui .ba-stat-card {
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

body.broadcast-ui .ba-stat-card.accent-green { background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%); }
body.broadcast-ui .ba-stat-card.accent-orange { background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%); }
body.broadcast-ui .ba-stat-card.accent-red { background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%); }
body.broadcast-ui .ba-stat-card.accent-blue { background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%); }
body.broadcast-ui .ba-stat-card.accent-purple { background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%); }
body.broadcast-ui .ba-stat-card.accent-pink { background: linear-gradient(180deg, #ffffff 0%, #fdf2f8 100%); }
body.broadcast-ui .ba-stat-card.accent-green .ba-stat-value { color: #059669; }
body.broadcast-ui .ba-stat-card.accent-orange .ba-stat-value { color: #d97706; }
body.broadcast-ui .ba-stat-card.accent-red .ba-stat-value { color: #dc2626; }
body.broadcast-ui .ba-stat-card.accent-blue .ba-stat-value { color: #1d4ed8; }
body.broadcast-ui .ba-stat-card.accent-purple .ba-stat-value { color: #7c3aed; }
body.broadcast-ui .ba-stat-card.accent-pink .ba-stat-value { color: #db2777; }

body.broadcast-ui .ba-funnel-card,
body.broadcast-ui .ba-ops-metric-card {
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

body.broadcast-ui .ba-card-queue .ba-card-body {
    padding-top: 0;
    gap: 10px;
}

body.broadcast-ui .ba-queue-filter-grid {
    padding-top: 16px;
}

body.broadcast-ui .ba-test-panel {
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

body.broadcast-ui .ba-test-head {
    width: 100%;
    border: none;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(139, 92, 246, 0.09));
    color: #374151;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

body.broadcast-ui .ba-test-body {
    padding: 14px;
}

body.broadcast-ui {
    --ba-surface: var(--color-card);
    --ba-surface-2: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
    --ba-surface-3: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    --ba-border: color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
    --ba-border-2: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    --ba-text-1: var(--color-text);
    --ba-text-2: var(--color-text-muted);
    --ba-text-3: color-mix(in srgb, var(--color-text-muted) 82%, transparent);
    --ba-accent: var(--color-primary);
    --ba-accent-strong: var(--color-primary-strong);
    --ba-accent-dim: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    --ba-accent-bd: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
    --ba-success: #10b981;
    --ba-success-dim: color-mix(in srgb, #10b981 14%, var(--color-surface));
    --ba-warning: #f59e0b;
    --ba-warning-dim: color-mix(in srgb, #f59e0b 15%, var(--color-surface));
    --ba-warning-bd: color-mix(in srgb, #f59e0b 28%, var(--color-border));
    --ba-danger: #ef4444;
    --ba-danger-dim: color-mix(in srgb, #ef4444 12%, var(--color-surface));
    --ba-danger-bd: color-mix(in srgb, #ef4444 24%, var(--color-border));
    --ba-purple: #8b5cf6;
    --ba-purple-dim: color-mix(in srgb, #8b5cf6 11%, var(--color-surface));
    --ba-purple-bd: color-mix(in srgb, #8b5cf6 24%, var(--color-border));
    --ba-teal: #0e8a9e;
    --ba-teal-dim: color-mix(in srgb, #0e8a9e 12%, var(--color-surface));
    --ba-teal-bd: color-mix(in srgb, #0e8a9e 22%, var(--color-border));
}

html.dark body.broadcast-ui {
    --ba-success: #34d399;
    --ba-warning: #fbbf24;
    --ba-danger: #f87171;
    --ba-purple: #a78bfa;
    --ba-teal: #67e8f9;
}

body.broadcast-ui .ba-card,
body.broadcast-ui .ba-stat-card,
body.broadcast-ui .ba-funnel-card,
body.broadcast-ui .ba-ops-metric-card,
body.broadcast-ui .ba-test-panel,
body.broadcast-ui .broadcast-campaign-empty,
body.broadcast-ui .broadcast-contacts-subcard {
    background: linear-gradient(180deg, var(--ba-surface) 0%, var(--ba-surface-2) 100%);
    border-color: var(--ba-border);
    color: var(--ba-text-1);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ba-accent) 8%, transparent);
}

body.broadcast-ui .ba-card-head,
body.broadcast-ui .ba-test-head,
body.broadcast-ui .ba-affinity-head {
    background: linear-gradient(180deg, var(--ba-surface-3) 0%, var(--ba-surface-2) 100%);
    border-color: var(--ba-border);
    color: var(--ba-text-1);
}

body.broadcast-ui .ba-card-head h3,
body.broadcast-ui .ba-card-head h4,
body.broadcast-ui .ba-test-head,
body.broadcast-ui .ba-trend-total strong,
body.broadcast-ui .ba-affinity-product strong,
body.broadcast-ui .ba-card-body strong {
    color: var(--ba-text-1);
}

body.broadcast-ui .ba-card-head .muted,
body.broadcast-ui .ba-kpi-label,
body.broadcast-ui .ba-kpi-sub,
body.broadcast-ui .ba-head-chip.neutral,
body.broadcast-ui .ba-funnel-sub,
body.broadcast-ui .ba-affinity-head > div,
body.broadcast-ui .ba-affinity-value,
body.broadcast-ui .ba-affinity-value.muted-value,
body.broadcast-ui .ba-test-body,
body.broadcast-ui .ba-test-head .muted {
    color: var(--ba-text-2);
}

body.broadcast-ui .ba-head-chip.primary,
body.broadcast-ui .ba-head-chip.wa {
    background: var(--ba-accent-dim);
    border-color: var(--ba-accent-bd);
    color: var(--ba-accent);
}

body.broadcast-ui .ba-head-chip.email {
    background: var(--ba-teal-dim);
    border-color: var(--ba-teal-bd);
    color: var(--ba-teal);
}

body.broadcast-ui .ba-head-chip.purple {
    background: var(--ba-purple-dim);
    border-color: var(--ba-purple-bd);
    color: var(--ba-purple);
}

body.broadcast-ui .ba-head-chip.orange {
    background: var(--ba-warning-dim);
    border-color: var(--ba-warning-bd);
    color: color-mix(in srgb, var(--ba-warning) 84%, #7c2d12);
}

body.broadcast-ui .ba-head-chip.green {
    background: var(--ba-success-dim);
    border-color: color-mix(in srgb, var(--ba-success) 26%, var(--color-border));
    color: var(--ba-success);
}

body.broadcast-ui .ba-channel-badge.email,
body.broadcast-ui .ba-kpi-cell.accent-blue .ba-kpi-value,
body.broadcast-ui .ba-ops-kpi.tone-blue .ba-ops-metric-value,
body.broadcast-ui .ba-ok-link {
    color: var(--ba-accent);
}

body.broadcast-ui .ba-channel-badge.wa,
body.broadcast-ui .ba-ok-text,
body.broadcast-ui .ba-kpi-cell.accent-green .ba-kpi-value {
    color: var(--ba-success);
}

body.broadcast-ui .ba-kpi-cell.accent-orange .ba-kpi-value,
body.broadcast-ui .ba-ops-kpi.tone-orange .ba-ops-metric-value {
    color: var(--ba-warning);
}

body.broadcast-ui .ba-kpi-cell.accent-red .ba-kpi-value,
body.broadcast-ui .ba-error-text,
body.broadcast-ui .ba-ops-kpi.tone-red .ba-ops-metric-value {
    color: var(--ba-danger);
}

body.broadcast-ui .ba-kpi-cell.accent-purple .ba-kpi-value,
body.broadcast-ui .ba-ops-kpi.tone-purple .ba-ops-metric-value {
    color: var(--ba-purple);
}

body.broadcast-ui .ba-affinity-bar {
    background: var(--ba-surface-3);
}

body.broadcast-ui .ba-affinity-bar > span {
    background: linear-gradient(90deg, var(--ba-success), color-mix(in srgb, var(--ba-success) 78%, #065f46));
}

body.broadcast-ui .broadcast-campaign-card,
body.broadcast-ui .broadcast-campaign-grid-head,
body.broadcast-ui .broadcast-campaign-empty,
body.broadcast-ui .broadcast-contacts-filters-card,
body.broadcast-ui .broadcast-contacts-list-shell,
body.broadcast-ui .broadcast-products-subcard,
body.broadcast-ui .broadcast-product-card,
body.broadcast-ui .broadcast-products-bundle-shell .table-wrap,
body.broadcast-ui .broadcast-template-card,
body.broadcast-ui .broadcast-template-card-meta,
body.broadcast-ui .broadcast-subsection,
body.broadcast-ui .broadcast-variable-picker,
body.broadcast-ui .broadcast-syntax-panel,
body.broadcast-ui .broadcast-html-preview,
body.broadcast-ui .broadcast-email-variants,
body.broadcast-ui .broadcast-variant-editor,
body.broadcast-ui .bcm-email-template-cards-panel,
body.broadcast-ui .bcm-email-templates-layout,
body.broadcast-ui .bcm-inline-email-sidebar,
body.broadcast-ui .bcm-editor-panel,
body.broadcast-ui .bcm-builder-body {
    background: linear-gradient(180deg, var(--ba-surface) 0%, var(--ba-surface-2) 100%);
    border-color: var(--ba-border);
    color: var(--ba-text-1);
}

body.broadcast-ui .broadcast-campaign-card,
body.broadcast-ui .broadcast-products-subcard,
body.broadcast-ui .broadcast-product-card,
body.broadcast-ui .broadcast-template-card,
body.broadcast-ui .broadcast-contacts-filters-card,
body.broadcast-ui .broadcast-contacts-list-shell,
body.broadcast-ui .broadcast-products-bundle-shell .table-wrap {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ba-accent) 7%, transparent);
}

body.broadcast-ui .broadcast-campaign-card-empty,
body.broadcast-ui .broadcast-campaign-empty,
body.broadcast-ui .bcm-email-template-head,
body.broadcast-ui .bcm-email-template-actions,
body.broadcast-ui .bse-studio-head,
body.broadcast-ui .bse-type-bar,
body.broadcast-ui .bse-sug-item,
body.broadcast-ui .bcs-collapsible > summary,
body.broadcast-ui .bcs-email-preview-actions,
body.broadcast-ui .bcm-builder-header,
body.broadcast-ui .bcm-stepper-tabs,
body.broadcast-ui .bcm-editor-footer {
    background: linear-gradient(180deg, var(--ba-surface-3) 0%, var(--ba-surface-2) 100%);
    border-color: var(--ba-border);
}

body.broadcast-ui .broadcast-campaign-toggle,
body.broadcast-ui .broadcast-campaign-funnel-value,
body.broadcast-ui .broadcast-campaign-funnel-pct,
body.broadcast-ui .broadcast-campaign-empty-title,
body.broadcast-ui .broadcast-campaign-empty-copy,
body.broadcast-ui .broadcast-contacts-filters-card label,
body.broadcast-ui .broadcast-contacts-list-head .muted,
body.broadcast-ui .broadcast-product-price,
body.broadcast-ui .broadcast-template-card-desc,
body.broadcast-ui .broadcast-template-card-meta,
body.broadcast-ui .bse-char-bar,
body.broadcast-ui .bse-sudio-sub,
body.broadcast-ui .bse-studio-sub,
body.broadcast-ui .bse-sug-cnt,
body.broadcast-ui .bse-vars-help,
body.broadcast-ui .broadcast-toggle-grid label,
body.broadcast-ui .broadcast-step-empty,
body.broadcast-ui .bcm-drag-handle,
body.broadcast-ui .bcm-step-preview,
body.broadcast-ui .broadcast-email-variants > summary,
body.broadcast-ui .bcm-head-actions .btn {
    color: var(--ba-text-2);
}

body.broadcast-ui .broadcast-campaign-card h4,
body.broadcast-ui .broadcast-contacts-subhead h4,
body.broadcast-ui .broadcast-product-card h4,
body.broadcast-ui .broadcast-template-card-head strong,
body.broadcast-ui .bse-studio-name,
body.broadcast-ui .bse-sug-name,
body.broadcast-ui .bcm-step-item,
body.broadcast-ui .bcm-step-item strong,
body.broadcast-ui .broadcast-variable-picker h4,
body.broadcast-ui .broadcast-email-variants > summary,
body.broadcast-ui .bcs-var-group-title,
body.broadcast-ui .bcm-builder-title-wrap h3,
body.broadcast-ui .bcm-stepper-tab,
body.broadcast-ui .bcm-stepper-num,
body.broadcast-ui .bcm-campaign-id-badge {
    color: var(--ba-text-1);
}

body.broadcast-ui .broadcast-campaign-card-empty,
body.broadcast-ui .broadcast-step-empty {
    border-color: var(--ba-border);
    background: var(--ba-surface-2);
    color: var(--ba-text-2);
}

body.broadcast-ui .broadcast-campaign-toggle input,
body.broadcast-ui .broadcast-contacts-filters-card select,
body.broadcast-ui .broadcast-contacts-filters-card input,
body.broadcast-ui .bcm-editor-panel input,
body.broadcast-ui .bcm-editor-panel select,
body.broadcast-ui .bcm-editor-panel textarea,
body.broadcast-ui .broadcast-variable-table input,
body.broadcast-ui .broadcast-html-col textarea,
body.broadcast-ui .bcs-email-live-left .code-textarea,
body.broadcast-ui .broadcast-variant-editor textarea,
body.broadcast-ui .broadcast-variant-editor input {
    background: var(--ba-surface);
    border-color: var(--ba-border-2);
    color: var(--ba-text-1);
}

body.broadcast-ui .broadcast-campaign-toggle input,
body.broadcast-ui .broadcast-inline-switch input[type="checkbox"] {
    accent-color: var(--ba-accent);
}

body.broadcast-ui .broadcast-campaign-action.action-build,
body.broadcast-ui .ba-refresh-btn,
body.broadcast-ui .bse-tc,
body.broadcast-ui .bse-sba,
body.broadcast-ui .broadcast-contacts-subchip,
body.broadcast-ui .broadcast-contacts-pill.tone-blue,
body.broadcast-ui .broadcast-contacts-pill.tone-purple,
body.broadcast-ui .bcm-stepper-num,
body.broadcast-ui .broadcast-template-card-meta,
body.broadcast-ui .bcm-email-card-badge.cb-v1,
body.broadcast-ui .bcm-email-card-badge.cb-v2,
body.broadcast-ui .bcm-email-card-badge.cb-v3,
body.broadcast-ui .bcm-email-card-badge.cb-v4,
body.broadcast-ui .bcm-email-card-badge.cb-v5 {
    background: var(--ba-surface-3);
    border-color: var(--ba-border-2);
    color: var(--ba-text-2);
}

body.broadcast-ui .broadcast-campaign-action.action-build:hover,
body.broadcast-ui .ba-refresh-btn:hover,
body.broadcast-ui .bse-tc:hover,
body.broadcast-ui .bse-sba:hover {
    border-color: var(--ba-accent-bd);
    color: var(--ba-accent);
}

body.broadcast-ui .bse-btn-ai,
body.broadcast-ui .bse-sba-use,
body.broadcast-ui .broadcast-template-tabs .active,
body.broadcast-ui .bcm-email-preview-tab.active,
body.broadcast-ui .bcm-stepper-tab.active .bcm-stepper-num,
body.broadcast-ui .bcm-stepper-tab.active,
body.broadcast-ui .bse-tc.on {
    background: var(--ba-accent) !important;
    border-color: var(--ba-accent) !important;
    color: #ffffff !important;
}

body.broadcast-ui .bcm-stepper-tab.done,
body.broadcast-ui .broadcast-campaign-action.action-live,
body.broadcast-ui #bcmActive:checked + span,
body.broadcast-ui .bse-sb-wa {
    color: var(--ba-success);
}

body.broadcast-ui .bcm-stepper-tab.done .bcm-stepper-num {
    background: var(--ba-success);
    color: #ffffff;
}

body.broadcast-ui #bcmTestMode:checked + span,
body.broadcast-ui .bse-step-type-chip {
    background: var(--ba-warning-dim);
    border-color: var(--ba-warning-bd);
    color: color-mix(in srgb, var(--ba-warning) 84%, #7c2d12);
}

body.broadcast-ui #bcmUnsubWa:checked + span,
body.broadcast-ui #bcmUnsubEmail:checked + span,
body.broadcast-ui #bcmUnsubMessenger:checked + span,
body.broadcast-ui #bcmUnsubSms:checked + span,
body.broadcast-ui .broadcast-campaign-action.action-delete {
    background: var(--ba-danger-dim);
    border-color: var(--ba-danger-bd);
    color: var(--ba-danger);
}

body.broadcast-ui .broadcast-campaign-action.action-delete {
    background: var(--ba-danger);
    color: #ffffff;
}

body.broadcast-ui .broadcast-campaign-action.action-edit,
body.broadcast-ui .broadcast-product-price strong,
body.broadcast-ui .bcm-var-token,
body.broadcast-ui .broadcast-campaign-editor h3,
body.broadcast-ui .broadcast-campaign-editor h4,
body.broadcast-ui .broadcast-campaign-editor label,
body.broadcast-ui .broadcast-template-tabs .active,
body.broadcast-ui .bcm-token-btn.vc-blue,
body.broadcast-ui .bse-vars-col .bcm-token-btn,
body.broadcast-ui .bse-sb-em {
    color: var(--ba-accent);
}

body.broadcast-ui .broadcast-campaign-action.action-edit {
    background: var(--ba-accent);
    border-color: var(--ba-accent);
    color: #ffffff;
}

body.broadcast-ui .bcm-token-btn.vc-blue,
body.broadcast-ui .bse-vars-col .bcm-token-btn {
    background: var(--ba-accent-dim);
    border-color: var(--ba-accent-bd);
}

body.broadcast-ui .bcm-token-btn.vc-teal,
body.broadcast-ui .bse-vars-col .bcm-token-btn.vc-teal,
body.broadcast-ui .ba-head-chip.email,
body.broadcast-ui .bcm-email-card-badge.cb-v5 {
    background: var(--ba-teal-dim);
    border-color: var(--ba-teal-bd);
    color: var(--ba-teal);
}

body.broadcast-ui .bcm-token-btn.vc-purple,
body.broadcast-ui .bse-vars-col .bcm-token-btn.vc-purple,
body.broadcast-ui .ba-head-chip.purple,
body.broadcast-ui .bcm-email-card-badge.cb-v3 {
    background: var(--ba-purple-dim);
    border-color: var(--ba-purple-bd);
    color: var(--ba-purple);
}

body.broadcast-ui .bcm-token-btn.vc-blue:hover,
body.broadcast-ui .bcm-token-btn.vc-teal:hover,
body.broadcast-ui .bcm-token-btn.vc-purple:hover,
body.broadcast-ui .bse-vars-col .bcm-token-btn:hover {
    filter: brightness(.98);
}

body.broadcast-ui .broadcast-products-subcard h4,
body.broadcast-ui .broadcast-template-card-head strong,
body.broadcast-ui .broadcast-contacts-subhead h4,
body.broadcast-ui .broadcast-product-card h4,
body.broadcast-ui .bcm-builder-title-wrap h3,
body.broadcast-ui .bse-studio-name,
body.broadcast-ui .broadcast-email-variants > summary,
body.broadcast-ui .broadcast-variable-picker h4 {
    color: var(--ba-text-1) !important;
}

body.broadcast-ui .broadcast-products-import-status,
body.broadcast-ui .broadcast-template-card-desc,
body.broadcast-ui .broadcast-template-card-meta,
body.broadcast-ui .broadcast-contacts-title,
body.broadcast-ui .broadcast-campaign-empty-title,
body.broadcast-ui .broadcast-campaign-empty-copy {
    color: var(--ba-text-2) !important;
}

@media (max-width: 1320px) {
    body.broadcast-ui .broadcast-campaign-strip,
    body.broadcast-ui .ba-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.broadcast-ui .broadcast-campaign-builder-strip {
        flex-wrap: wrap;
    }

    body.broadcast-ui .broadcast-campaign-builder-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }

    body.broadcast-ui .broadcast-campaign-worker-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.broadcast-ui .broadcast-campaign-worker-stat:nth-child(3n) {
        border-right: none;
    }

    body.broadcast-ui .broadcast-campaign-worker-stat:nth-child(n + 4) {
        border-top: 1px solid #dde3ef;
    }

    body.broadcast-ui .broadcast-campaign-ops-grid,
    body.broadcast-ui .broadcast-analytics-row-primary,
    body.broadcast-ui .broadcast-analytics-row-secondary,
    body.broadcast-ui .broadcast-analytics-row-tertiary {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-campaign-list {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }

    body.broadcast-ui .ba-kpi-hero {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.broadcast-ui .ba-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    body.broadcast-ui .broadcast-campaign-strip,
    body.broadcast-ui .ba-stat-grid,
    body.broadcast-ui .ba-ops-metric-grid,
    body.broadcast-ui .ba-funnel-grid,
    body.broadcast-ui .ba-two-col-tight,
    body.broadcast-ui .ba-two-col {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-campaign-builder-strip,
    body.broadcast-ui .broadcast-campaign-grid-head,
    body.broadcast-ui .broadcast-campaign-card-footer,
    body.broadcast-ui .broadcast-campaign-card-actions,
    body.broadcast-ui .broadcast-campaign-worker-head,
    body.broadcast-ui .broadcast-contacts-subhead,
    body.broadcast-ui .broadcast-contacts-list-head {
        flex-direction: column;
        align-items: stretch;
    }

    body.broadcast-ui .broadcast-campaign-toggle-group {
        flex-wrap: wrap;
    }

    body.broadcast-ui .broadcast-campaign-builder-kpi {
        border-right: none;
        padding-right: 0;
        padding-bottom: 10px;
        border-bottom: 1px solid #e3e7ef;
    }

    body.broadcast-ui .broadcast-campaign-builder-kpi:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
    }

    body.broadcast-ui .broadcast-campaign-builder-actions {
        width: 100%;
        justify-content: stretch;
    }

    body.broadcast-ui .broadcast-campaign-builder-actions .btn {
        flex: 1;
    }

    body.broadcast-ui .broadcast-campaign-worker-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-campaign-worker-stat {
        border-right: none;
        border-top: 1px solid #dde3ef;
    }

    body.broadcast-ui .broadcast-campaign-worker-stat:first-child {
        border-top: none;
    }

    body.broadcast-ui .broadcast-campaign-list {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-campaign-card-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.broadcast-ui .broadcast-campaign-stat:nth-child(2n) {
        border-right: none;
    }

    body.broadcast-ui .broadcast-campaign-stat:nth-child(n + 3) {
        border-top: 1px solid #dde3ef;
    }

    body.broadcast-ui .ba-kpi-hero,
    body.broadcast-ui .ba-funnel-strip,
    body.broadcast-ui .ba-affinity-head,
    body.broadcast-ui .ba-affinity-row {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .ba-ops-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 186px;
    }

    body.broadcast-ui .ba-toolbar,
    body.broadcast-ui .ba-timeline-search {
        flex-direction: column;
        align-items: stretch;
    }

    body.broadcast-ui .ba-queue-test-strip,
    body.broadcast-ui .ba-queue-pagination {
        align-items: flex-start;
    }
}

body.broadcast-ui .broadcast-inline-switch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: #5a6478;
}

body.broadcast-ui .broadcast-inline-switch input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: #3b6bff;
}

body.broadcast-ui .bcc-actions {
    padding: 10px 14px 12px;
    gap: 6px;
    flex-wrap: wrap;
}

body.broadcast-ui .bcc-actions .danger {
    margin-left: auto;
}

body.broadcast-ui .bcm-golive-btn {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

body.broadcast-ui .bcm-golive-btn:hover:not(:disabled) {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

body.broadcast-ui .broadcast-campaign-editor {
    width: min(1200px, 97vw);
    max-height: 92vh;
    overflow: auto;
}

body.broadcast-ui .broadcast-step-editor {
    width: min(95vw, 1400px);
    height: min(95vh, 900px);
    max-height: min(95vh, 900px);
    overflow-y: auto;
    overflow-x: hidden;
}

body.broadcast-ui .broadcast-step-editor.bcs-builder-shell {
    --surface: #ffffff;
    --surface-2: #f7f8fb;
    --surface-3: #f0f3fa;
    --border: #e3e7ef;
    --border-2: #c8d0e0;
    --text-1: #1a1f2e;
    --text-2: #5a6478;
    --text-3: #8b94a8;
    --accent: #3b6bff;
    --accent-dim: #eef1ff;
    --accent-bd: #c7d7ff;
    --success: #10b981;
    --success-dim: #d1fae5;
    --warning: #f59e0b;
    --warning-dim: #fef3c7;
    --warning-bd: #fde68a;
    --danger: #ef4444;
    --danger-dim: #fee2e2;
    --danger-bd: #fca5a5;
    --purple: #8b5cf6;
    --purple-dim: #ede9fe;
    --purple-bd: #ddd6fe;
    --teal: #0e8a9e;
    --teal-dim: #e0f5f8;
    --teal-bd: #a5e0ea;
    --r: 10px;
    --r-sm: 6px;
    --r-xs: 4px;
    --mono: 'JetBrains Mono', monospace;
    width: min(95vw, 1400px);
    max-width: 95vw;
    height: min(95vh, 900px);
    max-height: min(95vh, 900px);
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 0 #fff inset, 0 28px 90px rgba(0,0,0,.14), 0 4px 20px rgba(59,107,255,.06);
    background: var(--surface);
}

body.broadcast-ui .bcs-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
    white-space: nowrap;
}

body.broadcast-ui .bcs-builder-header .broadcast-inline-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

body.broadcast-ui .bcs-builder-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.broadcast-ui .bcs-builder-title-wrap h3 {
    margin: 0;
    color: var(--text-1);
    font-size: 14px;
}

body.broadcast-ui .bcs-stepper-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 18px;
    background: var(--surface);
    min-height: 42px;
    flex-shrink: 0;
    overflow-x: auto;
}

body.broadcast-ui .bcs-builder-body {
    flex: 1;
    min-height: 0;
    padding: 0;
    background: var(--surface);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

body.broadcast-ui .bcs-builder-body * {
    min-width: 0;
}

body.broadcast-ui .bcs-editor-panel {
    display: none;
    height: 100%;
    min-height: 0;
}

body.broadcast-ui .bcs-editor-panel[data-brand-panel].active {
    display: grid;
    align-content: flex-start;
    gap: 10px;
}

body.broadcast-ui .bcs-editor-panel[data-bcs-panel="basics"].active {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
}

body.broadcast-ui .bcs-editor-panel[data-bcs-panel="variants"].active {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    gap: 10px;
}

body.broadcast-ui .bcs-editor-panel[data-bcs-panel="variants"] #bcmEmailVariantsWrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

body.broadcast-ui .bcs-editor-panel[data-bcs-panel="variants"] .bcs-email-card {
    flex-shrink: 0;
}

body.broadcast-ui .bcs-editor-panel .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: visible;
    margin: 0;
}

body.broadcast-ui .bcs-editor-panel .card-head {
    padding: 8px 13px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
}

body.broadcast-ui .bcs-editor-panel .card-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text-3);
    white-space: nowrap;
}

body.broadcast-ui .bcs-editor-panel .card-body {
    padding: 12px 13px;
    display: grid;
    gap: 9px;
}

body.broadcast-ui .bcs-editor-panel input,
body.broadcast-ui .bcs-editor-panel select,
body.broadcast-ui .bcs-editor-panel textarea {
    width: 100%;
    min-height: 30px;
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-1);
    box-sizing: border-box;
}

body.broadcast-ui .bcs-editor-panel textarea {
    resize: vertical;
    max-width: 100%;
    line-height: 1.6;
    overflow-x: hidden;
}

body.broadcast-ui .bcs-editor-panel input:focus,
body.broadcast-ui .bcs-editor-panel select:focus,
body.broadcast-ui .bcs-editor-panel textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 107, 255, .09);
}

body.broadcast-ui .bcs-basic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.broadcast-ui .bcs-basics-layout {
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
}

body.broadcast-ui .bcs-basics-layout.p0 {
    grid-template-columns: minmax(0, 1fr) 204px;
    min-width: 0;
}

body.broadcast-ui .bcs-basics-main {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    border-right: 1px solid var(--border);
    background: var(--surface);
}

body.broadcast-ui .bcs-basics-main.pmain {
    overflow-x: hidden;
}

body.broadcast-ui .bcs-basics-main::-webkit-scrollbar,
body.broadcast-ui .bcs-var-card::-webkit-scrollbar {
    width: 3px;
}

body.broadcast-ui .bcs-basics-main::-webkit-scrollbar-thumb,
body.broadcast-ui .bcs-var-card::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 3px;
}

body.broadcast-ui .bcs-step-config-card {
    display: grid;
    gap: 8px;
}

body.broadcast-ui .bcs-basic-card {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    padding: 0;
    overflow: visible;
}

body.broadcast-ui .bcs-basic-card h4 {
    margin: 0 0 8px;
    color: #1e40af;
    font-size: 12.5px;
}

body.broadcast-ui .bcs-wa-card {
    display: grid;
    gap: 8px;
}

body.broadcast-ui .bcs-wa-card .bcm-template-input {
    min-height: 110px;
    max-height: 150px;
    font-family: var(--mono);
    font-size: 11px;
    resize: vertical;
}

body.broadcast-ui .bcs-var-card {
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    background: var(--surface-2);
    width: 210px;
    flex-shrink: 0;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid var(--border);
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
}

body.broadcast-ui .bcs-var-card.pside {
    width: 204px;
}

body.broadcast-ui .bcs-var-card .card-head {
    border-bottom: 1px solid var(--border);
}

body.broadcast-ui .bcs-var-card .card-body {
    padding: 10px;
    display: grid;
    gap: 10px;
}

body.broadcast-ui .bcs-email-card {
    display: grid;
    gap: 8px;
}

body.broadcast-ui .bcs-email-card .broadcast-html-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.broadcast-ui .bcs-email-card .broadcast-html-preview {
    min-height: 140px;
}

body.broadcast-ui .bse-layout {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 186px;
    background: #ffffff;
}

body.broadcast-ui .bse-step-pain-row {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #e3e7ef;
    background: #f7f8fb;
}

body.broadcast-ui .bse-main {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid #e3e7ef;
    display: flex;
    flex-direction: column;
}

body.broadcast-ui .bse-config-bar {
    flex-shrink: 0;
    padding: 9px 14px;
    border-bottom: 1px solid #e3e7ef;
    background: #f7f8fb;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

body.broadcast-ui .bse-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

body.broadcast-ui .bse-flbl {
    font-size: 10px;
    font-weight: 600;
    color: #5a6478;
}

body.broadcast-ui .bse-input,
body.broadcast-ui .bse-select {
    width: 100%;
    height: 28px;
    border: 1px solid #e3e7ef;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 12px;
    color: #1a1f2e;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

body.broadcast-ui .bse-select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%238b94a8' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

body.broadcast-ui .bse-input:focus,
body.broadcast-ui .bse-select:focus {
    border-color: #3b6bff;
    box-shadow: 0 0 0 2px rgba(59, 107, 255, .09);
}

body.broadcast-ui .bse-input-mono {
    font-family: var(--mono);
    font-size: 10.5px;
}

body.broadcast-ui .bse-wa-studio {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 51%) minmax(0, 49%);
}

body.broadcast-ui .bse-wa-col {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid #e3e7ef;
    display: flex;
    flex-direction: column;
}

body.broadcast-ui .bse-wa-topbar {
    flex-shrink: 0;
    padding: 7px 12px;
    border-bottom: 1px solid #e3e7ef;
    background: #f7f8fb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.broadcast-ui .bse-sec-lbl {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #8b94a8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body.broadcast-ui .bse-sec-lbl::before {
    content: '';
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: #3b6bff;
}

body.broadcast-ui .bse-arow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.broadcast-ui .bse-fb-note {
    font-size: 10px;
    color: #8b94a8;
}

body.broadcast-ui .bse-segtabs {
    display: inline-flex;
    border: 1px solid #e3e7ef;
    border-radius: 6px;
    overflow: hidden;
}

body.broadcast-ui .bse-segtab {
    border: 0;
    border-right: 1px solid #e3e7ef;
    background: #f7f8fb;
    color: #5a6478;
    height: 24px;
    padding: 0 12px;
    font-size: 11px;
    cursor: pointer;
}

body.broadcast-ui .bse-segtab:last-child {
    border-right: 0;
}

body.broadcast-ui .bse-segtab.on,
body.broadcast-ui .bse-segtab.active {
    background: #3b6bff;
    color: #fff;
}

body.broadcast-ui .bse-wa-editor {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

body.broadcast-ui .bse-wa-pane {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
}

body.broadcast-ui .bse-wa-pane.hidden {
    display: none !important;
}

body.broadcast-ui .bse-code-ta {
    flex: 1;
    min-height: 0;
    width: 100%;
    resize: none;
    border: 1px solid #e3e7ef;
    border-radius: 6px;
    background: #f0f3fa;
    padding: 8px 10px;
    color: #2a3a5a;
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.6;
    outline: none;
}

body.broadcast-ui .bse-code-ta:focus {
    border-color: #3b6bff;
    box-shadow: 0 0 0 2px rgba(59, 107, 255, .09);
}

body.broadcast-ui .bse-char-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9.5px;
    color: #8b94a8;
}

body.broadcast-ui .bse-key {
    font-family: var(--mono);
}

body.broadcast-ui .bse-char-warn {
    color: #f59e0b !important;
}

body.broadcast-ui .bse-step-type-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    border-radius: 20px;
    padding: 0 8px;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid #fde68a;
    color: #92400e;
    background: #fef3c7;
}

body.broadcast-ui .bse-studio-col {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #f7f8fb;
    display: flex;
    flex-direction: column;
}

body.broadcast-ui .bse-studio-head {
    flex-shrink: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #e3e7ef;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

body.broadcast-ui .bse-studio-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #1a1f2e;
}

body.broadcast-ui .bse-studio-sub {
    font-size: 10.5px;
    color: #8b94a8;
}

body.broadcast-ui .bse-btn-ai {
    background: linear-gradient(135deg, #7c3aed, #3b6bff);
    border-color: rgba(124, 58, 237, .25);
    color: #fff;
    font-size: 11px;
}

body.broadcast-ui .bse-type-bar {
    flex-shrink: 0;
    padding: 6px 10px;
    border-bottom: 1px solid #e3e7ef;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

body.broadcast-ui .bse-tc {
    border: 1px solid #e3e7ef;
    border-radius: 20px;
    background: #f7f8fb;
    color: #5a6478;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
}

body.broadcast-ui .bse-tc.on {
    background: #3b6bff;
    border-color: #3b6bff;
    color: #fff;
}

body.broadcast-ui .bse-sug-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

body.broadcast-ui .bse-sug-list::-webkit-scrollbar {
    width: 3px;
}

body.broadcast-ui .bse-sug-list::-webkit-scrollbar-thumb {
    background: #c8d0e0;
    border-radius: 3px;
}

body.broadcast-ui .bse-sug-item {
    border-bottom: 1px solid #e3e7ef;
    background: #fff;
}

body.broadcast-ui .bse-sug-row {
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

body.broadcast-ui .bse-sug-row:hover {
    background: #f0f3fa;
}

body.broadcast-ui .bse-sb {
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
}

body.broadcast-ui .bse-sb-wa {
    background: #dcfce7;
    color: #166534;
}

body.broadcast-ui .bse-sb-em {
    background: #eef1ff;
    color: #3b6bff;
}

body.broadcast-ui .bse-sug-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 500;
    color: #1a1f2e;
}

body.broadcast-ui .bse-sug-cnt {
    font-size: 10.5px;
    color: #8b94a8;
}

body.broadcast-ui .bse-sug-acts {
    display: inline-flex;
    gap: 3px;
}

body.broadcast-ui .bse-sba {
    height: 22px;
    padding: 0 7px;
    border-radius: 4px;
    border: 1px solid #e3e7ef;
    background: #f7f8fb;
    color: #5a6478;
    font-size: 10.5px;
    cursor: pointer;
}

body.broadcast-ui .bse-sba-use {
    background: #3b6bff;
    border-color: #3b6bff;
    color: #fff;
}

body.broadcast-ui .bse-sug-exp {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
    background: #f0f3fa;
}

body.broadcast-ui .bse-sug-exp.open {
    max-height: 220px;
}

body.broadcast-ui .bse-sug-exp-inner {
    padding: 6px 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: #2a3a5a;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

body.broadcast-ui .bse-vars-col {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f7f8fb;
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.broadcast-ui .bse-vars-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #5a6478;
}

body.broadcast-ui .bse-vars-help {
    margin: 0;
    font-size: 9.5px;
    color: #8b94a8;
}

body.broadcast-ui .bse-vars-col .bcs-var-group {
    display: grid;
    gap: 4px;
}

body.broadcast-ui .bse-vars-col .bcs-var-group-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #8b94a8;
}

body.broadcast-ui .bse-vars-col .bcs-var-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

body.broadcast-ui .bse-vars-col .bcm-token-btn {
    border-radius: 3px;
    border: 1px solid #c7d7ff;
    background: #eef1ff;
    color: #3b6bff;
    padding: 2px 6px;
    font-family: var(--mono);
    font-size: 9px;
}

body.broadcast-ui .bse-vars-col .bcm-token-btn.vc-teal {
    border-color: #a5e0ea;
    background: #e0f5f8;
    color: #0e8a9e;
}

body.broadcast-ui .bse-vars-col .bcm-token-btn.vc-purple {
    border-color: #ddd6fe;
    background: #ede9fe;
    color: #8b5cf6;
}

body.broadcast-ui .bse-vars-col .bcm-token-btn:hover {
    filter: brightness(.96);
}

body.broadcast-ui .bcs-email-live-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 9px;
    overflow: visible;
}

body.broadcast-ui .bcs-email-live-layout.htmlsplit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
}

body.broadcast-ui .bcs-email-live-layout > * {
    min-width: 0;
}

body.broadcast-ui .bcs-email-live-left {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 8px;
    display: grid;
    gap: 8px;
    min-height: 0;
    min-width: 0;
}

body.broadcast-ui .bcs-email-live-left > * {
    min-width: 0;
}

body.broadcast-ui .bcs-email-live-left .code-textarea {
    width: 100%;
    min-height: 110px;
    background: transparent;
    border: 1px solid var(--border);
    color: #334166;
    font-family: var(--mono);
    font-size: 11px;
    padding: 9px 11px;
    resize: none;
    outline: none;
    line-height: 1.65;
    box-sizing: border-box;
}

body.broadcast-ui .bcs-collapsible {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface);
}

body.broadcast-ui .bcs-collapsible > summary {
    cursor: pointer;
    padding: 7px 11px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 600;
    user-select: none;
}

body.broadcast-ui .bcs-collapsible-body {
    padding: 8px;
    overflow: hidden;
}

body.broadcast-ui .bcs-email-live-left #bcmHtmlFull,
body.broadcast-ui .bcs-email-live-left #bcmHtmlGeneric {
    height: 110px;
    min-height: 110px;
    max-height: 110px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    resize: none;
    overflow-x: hidden;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.65;
}

body.broadcast-ui .bcs-email-subject-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
}

body.broadcast-ui .bcs-email-live-right {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    padding: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    align-content: start;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

body.broadcast-ui .bcs-email-preview-actions {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding: 6px 11px;
    background: var(--surface-3);
    border-bottom: 1px solid var(--border);
    justify-content: space-between;
}

body.broadcast-ui .bcs-email-preview-actions .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

body.broadcast-ui #bcmHtmlModeBtn {
    cursor: pointer;
}

body.broadcast-ui .bcs-email-live-right .broadcast-template-preview-frame {
    min-height: 140px;
    height: 140px;
    border: none;
    border-radius: 0;
}

body.broadcast-ui .bcm-email-preview-tab.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}

body.broadcast-ui .bcs-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
}

body.broadcast-ui .bcs-step-meta-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body.broadcast-ui .bcs-step-meta-row label {
    font-size: 11px;
    margin-bottom: 2px;
}

body.broadcast-ui .bcs-step-meta-row input,
body.broadcast-ui .bcs-step-meta-row select {
    min-height: 28px;
    height: 28px;
    padding: 4px 7px;
    font-size: 11.5px;
}

body.broadcast-ui .bcs-editor-footer {
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    margin-top: 0;
    padding: 10px 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
}

body.broadcast-ui .bcs-foot-hint {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.broadcast-ui .bcs-editor-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

body.broadcast-ui .bcs-editor-footer .btn {
    min-width: 96px;
    justify-content: center;
}

body.broadcast-ui #bcmVariablePickerList {
    display: grid;
    gap: 10px;
}

body.broadcast-ui .bcs-var-group {
    display: grid;
    gap: 6px;
}

body.broadcast-ui .bcs-var-group-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text-2);
}

body.broadcast-ui .bcs-var-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.broadcast-ui .bcm-token-btn.vc {
    padding: 2px 7px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid;
    white-space: nowrap;
    min-height: auto;
}

body.broadcast-ui .bcm-token-btn.vc-blue {
    background: var(--accent-dim);
    border-color: var(--accent-bd);
    color: var(--accent);
}

body.broadcast-ui .bcm-token-btn.vc-blue:hover {
    background: var(--accent);
    color: #fff;
}

body.broadcast-ui .bcm-token-btn.vc-teal {
    background: var(--teal-dim);
    border-color: var(--teal-bd);
    color: var(--teal);
}

body.broadcast-ui .bcm-token-btn.vc-teal:hover {
    background: var(--teal);
    color: #fff;
}

body.broadcast-ui .bcm-token-btn.vc-purple {
    background: var(--purple-dim);
    border-color: var(--purple-bd);
    color: var(--purple);
}

body.broadcast-ui .bcm-token-btn.vc-purple:hover {
    background: var(--purple);
    color: #fff;
}

body.broadcast-ui .broadcast-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

body.broadcast-ui .broadcast-campaign-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
}

body.broadcast-ui .broadcast-campaign-grid .full-width {
    grid-column: 1 / -1;
}

body.broadcast-ui .broadcast-subsection {
    border: 1px solid #dde3ea;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    margin-top: 10px;
}

body.broadcast-ui .broadcast-variable-table input {
    width: 100%;
    min-height: 32px;
}

body.broadcast-ui .bcm-tone-count {
    margin-top: 4px;
    font-size: 12px;
}

body.broadcast-ui .broadcast-toggle-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 4px;
}

body.broadcast-ui .broadcast-toggle-grid label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #334155;
}

body.broadcast-ui .broadcast-step-timeline {
    display: grid;
    gap: 8px;
}

body.broadcast-ui .broadcast-step-empty {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 14px;
    color: #64748b;
    font-size: 13px;
}

body.broadcast-ui .bcm-step-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    border: 1px solid #dde3ea;
    border-radius: 10px;
    padding: 8px;
    background: #fff;
}

body.broadcast-ui .bcm-step-item.is-active {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

body.broadcast-ui .bcm-step-item.is-duplicated {
    border-color: #34d399;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.22);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

body.broadcast-ui .bcm-step-index {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e40af;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.broadcast-ui .bcm-step-content {
    display: grid;
    gap: 6px;
}

body.broadcast-ui .bcm-step-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.broadcast-ui .bcm-drag-handle {
    font-size: 14px;
    color: #64748b;
    cursor: grab;
}

body.broadcast-ui .bcm-step-preview {
    font-size: 12px;
    color: #475569;
}

body.broadcast-ui .broadcast-template-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

body.broadcast-ui .broadcast-template-tabs .active {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}

body.broadcast-ui .broadcast-step-editor-grid {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 10px;
}

body.broadcast-ui .broadcast-variable-picker {
    border: 1px solid #dde3ea;
    border-radius: 10px;
    padding: 8px;
    background: #fff;
}

body.broadcast-ui .broadcast-variable-picker h4 {
    margin: 0 0 8px;
    font-size: 13px;
}

body.broadcast-ui .broadcast-variable-picker .bcm-token-btn {
    margin: 0 6px 6px 0;
}

body.broadcast-ui .broadcast-syntax-panel {
    margin-top: 8px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    padding: 8px;
    background: #f8fafc;
}

body.broadcast-ui #bcmSyntaxPreview {
    margin: 0;
    white-space: pre-wrap;
    font-size: 12px;
    min-height: 48px;
}

body.broadcast-ui .bcm-var-token {
    color: #2563eb;
    font-weight: 700;
}

body.broadcast-ui .broadcast-html-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}

body.broadcast-ui .broadcast-html-col {
    display: grid;
    gap: 6px;
}

body.broadcast-ui .broadcast-html-preview {
    min-height: 90px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    overflow: auto;
    font-size: 12px;
}

body.broadcast-ui .broadcast-email-variants {
    margin-bottom: 8px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #f8fafc;
    padding: 8px;
}

body.broadcast-ui .broadcast-email-variants > summary {
    cursor: pointer;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 6px;
}

body.broadcast-ui .broadcast-variant-toolbar {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

body.broadcast-ui .broadcast-variant-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

body.broadcast-ui .broadcast-variant-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.broadcast-ui .broadcast-variant-tab .variant-remove {
    border: none;
    background: transparent;
    color: #dc2626;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

body.broadcast-ui .broadcast-variant-editor {
    margin-top: 8px;
    border: 1px solid #dde3ea;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
    display: grid;
    gap: 8px;
}

body.broadcast-ui .bcm-email-variant-grid {
    grid-template-columns: 1fr;
}

body.broadcast-ui .broadcast-email-text-fallback {
    border-top: 1px dashed #d1d8e4;
    padding-top: 6px;
}

body.broadcast-ui .broadcast-email-text-fallback > summary {
    cursor: pointer;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

body.broadcast-ui .bcm-email-template-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 12px;
    border: 0;
    border-radius: 0;
    overflow: visible;
    min-height: 0;
    max-height: none;
    background: transparent;
}

body.broadcast-ui .bcm-email-template-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 400px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

body.broadcast-ui .bcm-email-template-card:nth-child(3n) {
    border-right: 1px solid var(--border);
}

body.broadcast-ui .bcm-email-template-card:nth-child(n+4) {
    border-bottom: 1px solid var(--border);
}

body.broadcast-ui .bcm-email-template-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: #f7f8fb;
    border-bottom: 1px solid var(--border);
}

body.broadcast-ui .bcm-email-template-subject {
    min-height: 26px;
    height: 26px;
    border-radius: 5px;
    font-size: 11px;
}

body.broadcast-ui .bcm-email-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

body.broadcast-ui .bcm-email-card-badge.cb-main {
    background: #111827;
    color: #fff;
}

body.broadcast-ui .bcm-email-card-badge.cb-v1 {
    background: #eef2ff;
    color: #2563eb;
    border: 1px solid #c7d2fe;
}

body.broadcast-ui .bcm-email-card-badge.cb-v2 {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

body.broadcast-ui .bcm-email-card-badge.cb-v3 {
    background: #f3e8ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

body.broadcast-ui .bcm-email-card-badge.cb-v4 {
    background: #fff7ed;
    color: #b45309;
    border: 1px solid #fed7aa;
}

body.broadcast-ui .bcm-email-card-badge.cb-v5 {
    background: #e0f2fe;
    color: #0e7490;
    border: 1px solid #bae6fd;
}

body.broadcast-ui .bcm-email-template-view {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: #edf0f7;
}

body.broadcast-ui .bcm-email-template-code,
body.broadcast-ui .bcm-email-template-preview {
    position: absolute;
    inset: 0;
}

body.broadcast-ui .bcm-email-template-card.view-preview .bcm-email-template-code {
    display: none;
}

body.broadcast-ui .bcm-email-template-card.view-html .bcm-email-template-preview {
    display: none;
}

body.broadcast-ui .bcm-email-template-editor-textarea {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    resize: none;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.6;
    background: #f8fafc;
    color: #334155;
    padding: 10px;
}

body.broadcast-ui .bcm-email-template-preview {
    overflow: hidden;
    cursor: zoom-in;
}

body.broadcast-ui .bcm-email-template-preview-wrap {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    width: 600px;
}

body.broadcast-ui .bcm-email-template-frame {
    width: 600px;
    border: 0;
    display: block;
    background: #fff;
    pointer-events: none;
}

body.broadcast-ui .bcm-email-edit-overlay {
    position: absolute;
    inset: auto auto 10px 10px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}

body.broadcast-ui .bcm-email-template-card:hover .bcm-email-edit-overlay,
body.broadcast-ui .bcm-email-template-card:focus-within .bcm-email-edit-overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

body.broadcast-ui .bcm-email-template-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding: 7px 9px;
    background: #f7f8fb;
}

body.broadcast-ui .bcm-email-template-actions-left,
body.broadcast-ui .bcm-email-template-actions-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.broadcast-ui .bcm-email-template-actions .btn.on {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #2563eb;
}

body.broadcast-ui .bcm-email-template-cards-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.broadcast-ui .bcm-email-template-cards-panel .card-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.broadcast-ui .bcm-email-templates-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

body.broadcast-ui .bcm-inline-email-sidebar {
    width: 220px;
    flex: 0 0 220px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
}

body.broadcast-ui .bcm-inline-email-field {
    display: grid;
    gap: 6px;
}

body.broadcast-ui .bcm-inline-email-field label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

body.broadcast-ui .bcm-inline-email-field select {
    width: 100%;
}

body.broadcast-ui .bcm-inline-email-inject-label {
    font-size: 11px;
    font-weight: 600;
}

body.broadcast-ui .bcm-inline-email-inject-targets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

body.broadcast-ui .bcm-inline-email-inject-targets .btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

body.broadcast-ui .bcm-inline-email-inject-targets .btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

body.broadcast-ui .bcm-inline-email-actions {
    margin-top: auto;
}

body.broadcast-ui .bcm-inline-email-actions .btn {
    width: 100%;
    justify-content: center;
}

body.broadcast-ui .bcm-email-cards-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
}

@media (max-width: 820px) {
    body.broadcast-ui .bcm-email-templates-layout {
        flex-direction: column;
    }

    body.broadcast-ui .bcm-inline-email-sidebar {
        width: 100%;
        flex: 0 0 auto;
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    body.broadcast-ui .bcm-email-template-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.broadcast-ui .bcm-email-html-edit-modal {
    width: min(980px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

body.broadcast-ui .bcm-email-html-edit-body {
    padding: 0 12px 10px;
    display: grid;
    gap: 8px;
    min-height: 0;
}

body.broadcast-ui #bcmEmailHtmlEditTextarea {
    width: 100%;
    min-height: 58vh;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.6;
}

body.broadcast-ui .broadcast-segment-rule-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px 12px;
    align-items: center;
}

body.broadcast-ui .broadcast-segment-rule-grid > label {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.broadcast-ui .bcm-head-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

body.broadcast-ui .bcm-head-actions .btn {
    min-height: 30px;
    padding: 5px 11px;
}

body.broadcast-ui #bcmAutoBuildBtn {
    background: var(--accent-primary, #2563eb) !important;
    border-color: var(--accent-primary, #2563eb) !important;
    color: #fff !important;
}

body.broadcast-ui .bcm-row-primary {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    align-items: start;
}

body.broadcast-ui .bcm-row-segment {
    grid-template-columns: 1fr;
    margin-top: -2px;
}

body.broadcast-ui .bcm-row-product {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    align-items: start;
}

body.broadcast-ui .broadcast-segment-rule-grid {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 2px;
}

body.broadcast-ui .broadcast-segment-rule-grid input[type="text"],
body.broadcast-ui .broadcast-segment-rule-grid input[type="number"] {
    min-height: 30px;
    padding: 4px 9px;
    font-size: 12px;
    min-width: 120px;
}

body.broadcast-ui .bcm-segment-help {
    margin-top: 1px;
    font-size: 11px;
}

body.broadcast-ui .bcm-audience-hint {
    font-size: 11px;
    line-height: 1.4;
}

body.broadcast-ui .segment-toggle-btn {
    margin: 0;
}

body.broadcast-ui .segment-toggle-btn input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.broadcast-ui .segment-toggle-btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #d1d8e4;
    background: #f8fafc;
    color: #475569;
    transition: all 0.18s ease;
    white-space: nowrap;
}

body.broadcast-ui .segment-toggle-btn span::before {
    margin-right: 6px;
    font-size: 12px;
}

body.broadcast-ui #bcmSegExternal + span::before { content: "📇"; }
body.broadcast-ui #bcmSegGhost + span::before { content: "👻"; }
body.broadcast-ui #bcmSegAffinity + span::before { content: "🔥"; }
body.broadcast-ui #bcmSegWon + span::before { content: "🏆"; }

body.broadcast-ui #bcmSegExternal:checked + span {
    background: #e8f2ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

body.broadcast-ui #bcmSegGhost:checked + span {
    background: #f3e8ff;
    border-color: #d8b4fe;
    color: #7c3aed;
}

body.broadcast-ui #bcmSegAffinity:checked + span {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}

body.broadcast-ui #bcmSegWon:checked + span {
    background: #ecfdf5;
    border-color: #86efac;
    color: #15803d;
}

body.broadcast-ui .bcm-tone-collapsible {
    min-height: 38px;
    max-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    resize: vertical;
    transition: min-height 0.2s ease, max-height 0.2s ease;
    overflow: auto;
}

body.broadcast-ui .bcm-tone-collapsible.expanded,
body.broadcast-ui .bcm-tone-collapsible:focus {
    min-height: 112px;
    max-height: 220px;
}

body.broadcast-ui .broadcast-subsection-compact {
    padding: 8px 10px;
}

body.broadcast-ui .broadcast-subsection-compact .broadcast-section-head {
    margin-bottom: 6px;
}

body.broadcast-ui .broadcast-subsection-compact .broadcast-section-head h4 {
    font-size: 13px;
}

body.broadcast-ui .broadcast-subsection-compact .conv-table th,
body.broadcast-ui .broadcast-subsection-compact .conv-table td {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
}

body.broadcast-ui .broadcast-subsection-compact .broadcast-variable-table input {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 12px;
}

body.broadcast-ui .bcm-toggle-row {
    margin-top: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

body.broadcast-ui .bcm-switch {
    display: block;
    margin: 0;
}

body.broadcast-ui .bcm-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.broadcast-ui .bcm-switch span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #d1d8e4;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.18s ease;
    white-space: nowrap;
}

body.broadcast-ui .bcm-switch span::before {
    margin-right: 6px;
    font-size: 12px;
}

body.broadcast-ui #bcmUseEngagementWindow + span::before { content: "🕒"; }
body.broadcast-ui #bcmActive + span::before { content: "✅"; }
body.broadcast-ui #bcmTestMode + span::before { content: "🧪"; }
body.broadcast-ui #bcmUnsubWa + span::before { content: "💬"; }
body.broadcast-ui #bcmUnsubEmail + span::before { content: "✉️"; }
body.broadcast-ui #bcmUnsubMessenger + span::before { content: "💭"; }
body.broadcast-ui #bcmUnsubSms + span::before { content: "📱"; }

body.broadcast-ui #bcmUseEngagementWindow:checked + span {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}

body.broadcast-ui #bcmActive:checked + span {
    background: #ecfdf5;
    border-color: #86efac;
    color: #166534;
}

body.broadcast-ui #bcmTestMode:checked + span {
    background: #fef9c3;
    border-color: #fde047;
    color: #854d0e;
}

body.broadcast-ui #bcmUnsubWa:checked + span,
body.broadcast-ui #bcmUnsubEmail:checked + span,
body.broadcast-ui #bcmUnsubMessenger:checked + span,
body.broadcast-ui #bcmUnsubSms:checked + span {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

body.broadcast-ui .broadcast-campaign-editor h3,
body.broadcast-ui .broadcast-campaign-editor h4,
body.broadcast-ui .broadcast-campaign-editor label {
    color: #2563eb;
}

body.broadcast-ui .broadcast-campaign-editor.bcm-builder-shell {
    width: min(1240px, 98vw);
    height: min(95vh, 900px);
    max-height: min(95vh, 900px);
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
}

body.broadcast-ui .bcm-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid #dde3ea;
    background: #f8fbff;
    flex-shrink: 0;
}

body.broadcast-ui .bcm-builder-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

body.broadcast-ui .bcm-builder-title-wrap h3 {
    margin: 0;
    color: #1e40af;
    font-size: 14px;
    white-space: nowrap;
}

body.broadcast-ui .bcm-campaign-id-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid #dbe5f3;
    background: #ffffff;
    color: #64748b;
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
    font-size: 10px;
    font-weight: 600;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.broadcast-ui .bcm-stepper-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    border-bottom: 1px solid #dde3ea;
    padding: 0 10px;
    background: #ffffff;
    min-height: 42px;
    overflow-x: auto;
    flex-shrink: 0;
}

body.broadcast-ui .bcm-stepper-item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

body.broadcast-ui .bcm-stepper-tab {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    padding: 9px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

body.broadcast-ui .bcm-stepper-num {
    width: 17px;
    height: 17px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.broadcast-ui .bcm-stepper-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

body.broadcast-ui .bcm-stepper-tab.active .bcm-stepper-num {
    background: #2563eb;
    color: #ffffff;
}

body.broadcast-ui .bcm-stepper-tab.done {
    color: #059669;
}

body.broadcast-ui .bcm-stepper-tab.done .bcm-stepper-num {
    background: #10b981;
    color: #ffffff;
}

body.broadcast-ui .bcm-stepper-arrow {
    color: #cbd5e1;
    font-size: 14px;
    margin: 0 2px;
}

body.broadcast-ui .bcm-builder-body {
    flex: 1;
    min-height: 0;
    padding: 10px 12px;
    background: #f8fafc;
}

body.broadcast-ui .bcm-editor-panel {
    display: none;
    height: 100%;
    overflow: auto;
    gap: 10px;
}

body.broadcast-ui .bcm-editor-panel.active {
    display: grid;
    align-content: flex-start;
}

body.broadcast-ui .bcm-editor-panel[data-bcm-panel="basics"] {
    overflow: auto;
}

body.broadcast-ui .bcm-editor-panel .broadcast-campaign-grid,
body.broadcast-ui .bcm-editor-panel .broadcast-subsection {
    margin-top: 0;
}

body.broadcast-ui .bcm-editor-panel input,
body.broadcast-ui .bcm-editor-panel select,
body.broadcast-ui .bcm-editor-panel textarea {
    min-height: 30px;
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 7px;
}

body.broadcast-ui .bcm-row-primary {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

body.broadcast-ui .bcm-row-product {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

body.broadcast-ui .bcm-audience-box .broadcast-segment-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 8px;
}

body.broadcast-ui .bcm-segment-chip {
    border: 1px solid #dbe5f3;
    background: #fff;
    border-radius: 10px;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    align-items: center;
}

body.broadcast-ui .bcm-segment-chip-engagement {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(130px, 0.85fr) minmax(110px, 0.72fr) minmax(220px, 1.2fr) auto;
}

body.broadcast-ui .bcm-segment-chip-engagement select {
    width: 100%;
    min-width: 0;
}

body.broadcast-ui .bcm-segment-hints {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -2px;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

body.broadcast-ui .bcm-segment-hints .bcm-segment-help,
body.broadcast-ui .bcm-segment-hints .bcm-audience-hint {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.broadcast-ui .bcm-segment-hint-sep {
    color: #94a3b8;
    flex-shrink: 0;
}

body.broadcast-ui .bcm-segment-chip .segment-toggle-btn span {
    min-height: 24px;
    padding: 3px 9px;
}

body.broadcast-ui .bcm-segment-chip > .btn {
    min-height: 24px;
    width: 24px;
    padding: 0;
    color: #64748b;
}

body.broadcast-ui .bcm-delivery-limits,
body.broadcast-ui .bcm-trigger-grid {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
}

body.broadcast-ui .bcm-delivery-completion,
body.broadcast-ui .bcm-webhook-grid {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
}

body.broadcast-ui .bcm-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 2px 0;
}

body.broadcast-ui .bcm-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.broadcast-ui .bcm-switch span {
    min-height: 26px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #d1d8e4;
    background: #fff;
    color: #5b667a;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.broadcast-ui .bcm-switch span::before {
    margin-right: 0;
}

body.broadcast-ui .bcm-switch input:checked + span {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}

body.broadcast-ui #bcmActive:checked + span {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

body.broadcast-ui #bcmTestMode:checked + span {
    background: #fef9c3;
    border-color: #fde047;
    color: #854d0e;
}

body.broadcast-ui #bcmUnsubWa:checked + span,
body.broadcast-ui #bcmUnsubEmail:checked + span,
body.broadcast-ui #bcmUnsubMessenger:checked + span,
body.broadcast-ui #bcmUnsubSms:checked + span {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

body.broadcast-ui .bcm-steps-box {
    height: 100%;
    overflow: auto;
}

body.broadcast-ui .bcm-editor-footer {
    border-top: 1px solid #dde3ea;
    background: #f8fbff;
    margin-top: 0;
    padding: 10px 14px;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

body.broadcast-ui .bcm-editor-footer .btn {
    min-width: 118px;
    justify-content: center;
}

body.broadcast-ui #bcmSaveNextBtn.success {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

body.broadcast-ui #bcmSaveNextBtn.success:hover:not(:disabled) {
    background: #059669 !important;
    border-color: #059669 !important;
}

@media (max-width: 980px) {
    body.broadcast-ui .broadcast-campaign-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    body.broadcast-ui .bcm-row-primary,
    body.broadcast-ui .bcm-row-product,
    body.broadcast-ui .bcm-row-segment {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-settings-grid,
    body.broadcast-ui .broadcast-settings-inline-grid,
    body.broadcast-ui .broadcast-settings-advanced-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-settings-grid-2,
    body.broadcast-ui .broadcast-settings-grid-3,
    body.broadcast-ui .broadcast-settings-grid-4,
    body.broadcast-ui .broadcast-settings-grid-5,
    body.broadcast-ui .broadcast-settings-grid-6,
    body.broadcast-ui .broadcast-settings-grid-7,
    body.broadcast-ui .broadcast-rule-head-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-survey-add-row {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-add-row-grid {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
    }

    body.broadcast-ui .broadcast-template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.broadcast-ui .broadcast-template-editor-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-step-editor-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-step-editor.bcs-builder-shell {
        height: min(95vh, 900px);
        max-height: min(95vh, 900px);
    }

    body.broadcast-ui .bcs-basic-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .bcs-basics-layout {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .bse-layout {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .bse-main {
        border-right: 0;
    }

    body.broadcast-ui .bse-vars-col {
        border-top: 1px solid #e3e7ef;
    }

    body.broadcast-ui .bse-config-bar {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .bse-step-pain-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    body.broadcast-ui .bse-wa-studio {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .bse-wa-col {
        border-right: 0;
        border-bottom: 1px solid #e3e7ef;
    }

    body.broadcast-ui .bcs-basics-main {
        border-right: none;
    }

    body.broadcast-ui .bcs-var-card {
        width: auto;
        border-left: 0;
        border-top: 1px solid #e3e7ef;
    }

    body.broadcast-ui .bcs-step-meta-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.broadcast-ui .bcs-wa-card,
    body.broadcast-ui .bcs-var-card,
    body.broadcast-ui .bcs-email-card {
        grid-column: auto;
    }

    body.broadcast-ui .bcs-email-card .broadcast-html-split {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .bcs-email-live-layout {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .bcm-email-template-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    body.broadcast-ui .bcs-editor-footer {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    body.broadcast-ui .bcs-foot-hint {
        width: 100%;
    }

    body.broadcast-ui .broadcast-segment-rule-grid {
        flex-wrap: wrap;
    }

    body.broadcast-ui .broadcast-campaign-editor.bcm-builder-shell {
        height: min(95vh, 900px);
        max-height: min(95vh, 900px);
    }

    body.broadcast-ui .bcm-row-primary,
    body.broadcast-ui .bcm-row-product,
    body.broadcast-ui .bcm-delivery-limits,
    body.broadcast-ui .bcm-trigger-grid,
    body.broadcast-ui .bcm-delivery-completion,
    body.broadcast-ui .bcm-webhook-grid,
    body.broadcast-ui .bcm-audience-box .broadcast-segment-rule-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .bcm-segment-chip-engagement {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .bcm-segment-hints {
        flex-wrap: wrap;
        white-space: normal;
    }

    body.broadcast-ui .bcm-segment-hints .bcm-segment-help,
    body.broadcast-ui .bcm-segment-hints .bcm-audience-hint {
        white-space: normal;
    }

    body.broadcast-ui .broadcast-contact-modal-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .broadcast-contact-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    body.broadcast-ui .bcm-email-template-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 640px) {
    body.broadcast-ui .broadcast-add-row-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    body.broadcast-ui .broadcast-template-grid {
        grid-template-columns: 1fr;
    }

    body.broadcast-ui .bcm-head-actions {
        width: 100%;
        justify-content: stretch;
    }

    body.broadcast-ui .bcm-head-actions .btn {
        flex: 1 1 auto;
    }

    body.broadcast-ui .bcm-toggle-row {
        justify-content: flex-start;
    }
}

/* Settings page card redesign */
body.settings-ui .settings-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  margin-bottom: 20px;
  overflow: hidden;
}
body.settings-ui .settings-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}
body.settings-ui .settings-card-icon { font-size: 20px; }
body.settings-ui .settings-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1E293B;
  margin: 0;
}
body.settings-ui .settings-card-desc {
  font-size: 12px;
  color: #9CA3AF;
  margin: 0;
}
body.settings-ui .settings-card-body {
  padding: 24px;
}
body.settings-ui .settings-card > .settings-grid,
body.settings-ui .settings-card > .stage-overrides,
body.settings-ui .settings-card > .capi-events,
body.settings-ui .settings-card > .status-management,
body.settings-ui .settings-card > .save-actions {
  padding: 24px;
}
body.settings-ui .settings-field { margin-bottom: 16px; }
body.settings-ui .settings-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}
body.settings-ui .settings-input {
  width: 100%;
  height: 38px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #1E293B;
}
body.settings-ui .settings-input:focus {
  outline: none;
  border-color: #1E40AF;
  box-shadow: 0 0 0 3px #DBEAFE;
}
body.settings-ui .settings-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
body.settings-ui .settings-page {
  max-width: 1200px;
  margin: 0 auto;
}
body.settings-ui .settings-header {
  margin-bottom: 16px;
}
body.settings-ui .settings-title {
  margin: 0 0 4px;
}
body.settings-ui .settings-subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
}
body.settings-ui .settings-section {
  margin-bottom: 20px;
}
body.settings-ui .settings-helper {
  font-size: 12px;
  color: #9CA3AF;
  margin-top: 4px;
}
body.settings-ui .settings-field-full {
  grid-column: 1 / -1;
}
body.settings-ui .settings-card .settings-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}
body.settings-ui .settings-card .settings-inline .btn {
  white-space: nowrap;
}
body.settings-ui .settings-card .settings-toggle-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.settings-ui .toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
body.settings-ui .toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
body.settings-ui .toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: #D1D5DB;
  border-radius: 999px;
  transition: background-color .2s ease;
  flex: 0 0 44px;
}
body.settings-ui .toggle-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
body.settings-ui .toggle-input:checked + .toggle-slider {
  background: #1E40AF;
}
body.settings-ui .toggle-input:checked + .toggle-slider::before {
  transform: translateX(20px);
}
body.settings-ui .settings-card .settings-inline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
body.settings-ui #notificationChannelsCard .settings-card-body {
  display: grid;
  gap: 14px;
}
body.settings-ui .settings-group {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}
body.settings-ui .settings-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
}
body.settings-ui .settings-group-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}
body.settings-ui .settings-group-body {
  padding: 12px 14px;
}
html.dark body.settings-ui .settings-group {
  border-color: color-mix(in srgb, var(--color-border) 84%, transparent);
  background: color-mix(in srgb, var(--color-card) 90%, transparent);
}
html.dark body.settings-ui .settings-group-header {
  border-bottom-color: color-mix(in srgb, var(--color-border) 72%, transparent);
  background: color-mix(in srgb, var(--color-surface) 74%, transparent);
}
html.dark body.settings-ui .settings-group-title,
html.dark body.settings-ui .settings-group-body {
  color: var(--color-text);
}
body.settings-ui .settings-field-hint {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}
body.settings-ui .blz-btn-secondary {
  height: 34px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 8px;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 600;
}
body.settings-ui .blz-btn-secondary:hover {
  background: #dbeafe;
}
body.settings-ui .blz-toggle {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 24px;
}
body.settings-ui .blz-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
body.settings-ui .blz-toggle-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
body.settings-ui .blz-toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform 0.2s ease;
}
body.settings-ui .blz-toggle input:checked + .blz-toggle-slider {
  background: #2563eb;
}
body.settings-ui .blz-toggle input:checked + .blz-toggle-slider::before {
  transform: translateX(20px);
}

.notif-event-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.notif-event-item {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  color: #374151;
}
.notif-event-item.active {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}
.notif-event-item.soon {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #94a3b8;
}
.settings-test-result {
  font-size: 12px;
  margin-left: 10px;
  font-weight: 500;
}
body.settings-ui .settings-card .settings-input-with-btn,
body.settings-ui .settings-card .password-with-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
}
body.settings-ui .settings-card .settings-input-with-btn .settings-input,
body.settings-ui .settings-card .password-with-toggle .settings-input {
  flex: 1 1 auto;
}
body.settings-ui .settings-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.settings-ui .settings-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.settings-ui #saveAllSettingsBtn {
  width: 100%;
  height: 44px;
  font-weight: 600;
}
body.settings-ui #saveAllSettingsBtn .save-all-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: settings-spin .8s linear infinite;
}
body.settings-ui #saveAllSettingsBtn.is-loading .save-all-spinner {
  display: inline-block;
}
body.settings-ui .capi-disabled {
  opacity: 0.5;
  pointer-events: none;
}
body.settings-ui .field-disabled {
  opacity: 0.6;
}
@keyframes settings-spin {
  to { transform: rotate(360deg); }
}
/* Dark mode */
.dark-mode .settings-card,
body.dark.settings-ui .settings-card { background: #1E293B; }
.dark-mode .settings-card-header,
body.dark.settings-ui .settings-card-header { background: #0F172A; border-color: #334155; }
.dark-mode .settings-card-title,
body.dark.settings-ui .settings-card-title { color: #F1F5F9; }
.dark-mode .settings-input,
body.dark.settings-ui .settings-input { background: #0F172A; border-color: #334155; color: #F1F5F9; }

@media (max-width: 1024px) {
  body.settings-ui .settings-grid-2 {
    grid-template-columns: 1fr;
  }
}

.broadcast-ai-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 18px 0;
}

.broadcast-ai-banner-close {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: 18px;
  cursor: pointer;
}

.broadcast-ai-banner-close:hover {
  background: #f8fafc;
}

.bcm-studio-modal-card {
  width: min(95vw, 1400px);
  max-height: min(95vh, 900px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.bcm-studio-body {
  padding: 14px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bcm-studio-step-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bcm-studio-step-tab.active {
  border-color: #2563eb;
  color: #1d4ed8;
  background: #eff6ff;
}

.bcm-studio-tools {
  justify-content: flex-start;
}

.bcm-studio-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px) {
  .bcm-studio-cards {
    grid-template-columns: 1fr;
  }
}

.bcm-studio-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.bcm-studio-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #eef2f7;
  background: #f8fafc;
}

.bcm-studio-count {
  margin-left: auto;
  font-size: 12px;
}

.bcm-studio-card-body {
  padding: 10px;
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 13px;
  color: #1f2937;
}

.bcm-studio-card-note {
  padding: 0 10px 10px;
  font-size: 12px;
}

.bcm-studio-email {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: visible;
}

.bcm-studio-email-controls {
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.bcm-studio-email-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
  flex: 1 1 260px;
}

.bcm-studio-email-select-wrap label {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

.bcm-studio-email-select-wrap select {
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
}

.bcm-studio-email-result-card {
  margin-top: 10px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.bcm-studio-email-result-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #eef2f7;
  background: #f8fafc;
}

.bcm-studio-email-result-template {
  color: #475569;
  font-size: 12px;
  margin-left: auto;
}

.bcm-studio-email-inject-target {
  height: 30px;
  min-width: 168px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 8px;
  background: #fff;
  color: #334155;
  font-size: 12px;
}

.bcm-studio-email-inline-preview-wrap {
  border-top: 1px solid #eef2f7;
  background: #f8fafc;
  padding: 8px 10px 10px;
  display: grid;
  gap: 6px;
}

.bcm-studio-email-inline-preview-frame {
  width: 100%;
  min-height: 420px;
  height: 52vh;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #fff;
}

/* ── Notification Bell ── */
.blz-bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.blz-bell-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: #64748b;
  border-radius: 8px;
  position: relative;
  transition: background 0.15s;
}
.blz-bell-btn:hover { background: #f1f5f9; color: #1e3a8a; }
.blz-bell-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.blz-bell-panel {
  width: 340px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 99999;
  overflow: hidden;
}
.blz-bell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
  font-size: 13px;
  color: #1e3a8a;
}
.blz-bell-readall {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: #3b82f6;
  padding: 2px 6px;
  border-radius: 4px;
}
.blz-bell-readall:hover { background: #eff6ff; }
.blz-bell-list {
  max-height: 380px;
  overflow-y: auto;
}
.blz-bell-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.1s;
  text-decoration: none;
  color: inherit;
}
.blz-bell-item:hover { background: #f8fafc; }
.blz-bell-item.unread { background: #eff6ff; }
.blz-bell-item.unread:hover { background: #dbeafe; }
.blz-bell-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.blz-bell-content { flex: 1; min-width: 0; }
.blz-bell-title {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blz-bell-msg {
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blz-bell-time {
  font-size: 10px;
  color: #94a3b8;
  flex-shrink: 0;
  margin-top: 2px;
}
.blz-bell-empty {
  padding: 24px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}

/* Settings colorful polish overrides */
body.settings-ui .settings-page .settings-card {
  border: 1px solid rgba(197, 214, 235, 0.82);
  box-shadow: 0 18px 36px rgba(15, 35, 55, 0.08), 0 10px 18px rgba(59, 107, 255, 0.05);
}

body.settings-ui .settings-page .settings-card,
body.settings-ui .settings-page .settings-hero,
body.settings-ui .settings-page .settings-hero-metric,
body.settings-ui .settings-page .settings-two-col > .card,
body.settings-ui .settings-page .settings-top-grid > .card {
  animation: settingsSurfaceRise 0.34s ease both;
}

body.settings-ui .settings-page .settings-hero { animation-delay: 0.02s; }
body.settings-ui .settings-page .settings-top-grid > .card:nth-child(1) { animation-delay: 0.05s; }
body.settings-ui .settings-page .settings-top-grid > .card:nth-child(2) { animation-delay: 0.08s; }
body.settings-ui .settings-page .settings-top-grid > .card:nth-child(3) { animation-delay: 0.11s; }

@keyframes settingsSurfaceRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.settings-ui .settings-page .settings-card,
  body.settings-ui .settings-page .settings-hero,
  body.settings-ui .settings-page .settings-hero-metric,
  body.settings-ui .settings-page .settings-two-col > .card,
  body.settings-ui .settings-page .settings-top-grid > .card,
  .settings-card,
  .settings-hero-metric,
  .settings-page .btn,
  .settings-page input,
  .settings-page select,
  .settings-page textarea {
    animation: none !important;
    transition: none !important;
  }
}

body.settings-ui .settings-page .settings-card-header {
  background: linear-gradient(180deg, rgba(246, 249, 255, 0.96), rgba(255, 255, 255, 0.94));
  border-bottom-color: rgba(197, 214, 235, 0.72);
}

body.settings-ui .settings-page .settings-card-title {
  color: #173057;
}

body.settings-ui .settings-page .settings-card-desc {
  color: #64748b;
}

body.settings-ui .settings-page .settings-capi-pane {
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(180deg, rgba(245, 249, 255, 0.96), rgba(255, 255, 255, 0.88));
}

body.settings-ui .settings-page .settings-generated-hint {
  color: #2563eb;
  font-weight: 700;
}

body.settings-ui .settings-page .notif-event-item {
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.88);
}

body.settings-ui .settings-page .notif-event-item.active {
  color: #5b21b6;
  border-color: rgba(168, 85, 247, 0.2);
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.98), rgba(237, 233, 254, 0.9));
}

body.settings-ui .settings-page .notif-event-item.soon {
  color: #9a3412;
  border-color: rgba(249, 115, 22, 0.18);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 237, 213, 0.9));
}

body.settings-ui .settings-page .settings-group-title {
  color: #173057;
}

body.settings-ui .settings-page .settings-test-result {
  font-weight: 700;
}

body.settings-ui .settings-page {
  --settings-token-surface: var(--color-card);
  --settings-token-border: var(--color-border);
  --settings-token-text-1: var(--color-text);
  --settings-token-text-2: var(--color-text-muted);
}

body.settings-ui .settings-page .settings-hero-metric span,
body.settings-ui .settings-page .settings-card-desc,
body.settings-ui .settings-page .settings-page .muted,
body.settings-ui .settings-page .settings-hero .muted {
  color: var(--settings-token-text-2) !important;
}

body.settings-ui .settings-page .settings-hero-metric strong,
body.settings-ui .settings-page .settings-card-title,
body.settings-ui .settings-page .settings-group-title {
  color: var(--settings-token-text-1) !important;
}

body.settings-ui .settings-page .settings-card-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-card)), color-mix(in srgb, var(--color-card) 94%, transparent)) !important;
  border-bottom-color: color-mix(in srgb, var(--color-primary) 18%, var(--settings-token-border)) !important;
}

body.settings-ui .settings-page .settings-capi-pane {
  border-color: color-mix(in srgb, #2563eb 24%, var(--settings-token-border)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, #2563eb 8%, var(--color-card)), color-mix(in srgb, var(--color-card) 92%, transparent)) !important;
}

body.settings-ui .settings-page .settings-capi-card .settings-block-title,
body.settings-ui .settings-page .settings-capi-card .settings-capi-enable-text,
body.settings-ui .settings-page .settings-capi-card .settings-capi-test-label,
body.settings-ui .settings-page .settings-capi-card .settings-capi-purchase-label {
  color: color-mix(in srgb, #2563eb 72%, var(--settings-token-text-1)) !important;
}

body.settings-ui .settings-page .settings-generated-hint {
  color: var(--color-primary) !important;
}

body.settings-ui .settings-page .notif-event-item {
  border-color: var(--settings-token-border) !important;
  background: color-mix(in srgb, var(--color-card) 90%, transparent) !important;
  color: var(--settings-token-text-1) !important;
}

body.settings-ui .settings-page .notif-event-item.active {
  color: color-mix(in srgb, #8b5cf6 72%, var(--color-text)) !important;
  border-color: color-mix(in srgb, #8b5cf6 24%, var(--settings-token-border)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, #8b5cf6 10%, var(--color-card)), color-mix(in srgb, var(--color-card) 92%, transparent)) !important;
}

body.settings-ui .settings-page .notif-event-item.soon {
  color: color-mix(in srgb, #f59e0b 72%, var(--color-text)) !important;
  border-color: color-mix(in srgb, #f59e0b 24%, var(--settings-token-border)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, #f59e0b 10%, var(--color-card)), color-mix(in srgb, var(--color-card) 92%, transparent)) !important;
}

body.capi-ui {
  --capi-surface: var(--color-surface);
  --capi-card: var(--color-card);
  --capi-border: var(--color-border);
  --capi-border-strong: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  --capi-text-1: var(--color-text);
  --capi-text-2: var(--color-text-muted);
  --capi-blue-bg: color-mix(in srgb, var(--color-primary) 14%, var(--color-card));
  --capi-blue-border: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
  --capi-teal-bg: color-mix(in srgb, #14b8a6 16%, var(--color-card));
  --capi-teal-border: color-mix(in srgb, #14b8a6 30%, var(--color-border));
  --capi-amber-bg: color-mix(in srgb, #f59e0b 16%, var(--color-card));
  --capi-amber-border: color-mix(in srgb, #f59e0b 32%, var(--color-border));
  --capi-red-bg: color-mix(in srgb, #ef4444 14%, var(--color-card));
  --capi-red-border: color-mix(in srgb, #ef4444 30%, var(--color-border));
}

body.capi-ui .capi-hero,
body.capi-ui .capi-stat-card,
body.capi-ui .capi-tab-card,
body.capi-ui .capi-section,
body.capi-ui .capi-health-widget,
body.capi-ui .capi-queue-item,
body.capi-ui .capi-file-preview,
body.capi-ui .capi-manual-wrap,
body.capi-ui .capi-detail-card,
body.capi-ui .capi-mini-table,
body.capi-ui .capi-action-bar {
  color: var(--capi-text-1) !important;
}

body.capi-ui .capi-status-pill {
  background: color-mix(in srgb, var(--color-card) 88%, transparent) !important;
  border-color: var(--capi-blue-border) !important;
  color: var(--color-primary) !important;
}

body.capi-ui .capi-status-pill.paused {
  border-color: var(--capi-amber-border) !important;
  color: color-mix(in srgb, #f59e0b 72%, var(--color-text)) !important;
}

body.capi-ui .capi-status-pill.inactive {
  border-color: color-mix(in srgb, var(--color-text-muted) 26%, var(--color-border)) !important;
  color: var(--capi-text-2) !important;
}

body.capi-ui .capi-stat-label,
body.capi-ui .capi-health-tip,
body.capi-ui .capi-queue-item label,
body.capi-ui .capi-velocity-label,
body.capi-ui .capi-map-item label,
body.capi-ui .capi-mini-table th,
body.capi-ui .capi-manual-table thead th,
body.capi-ui .capi-file-preview th,
body.capi-ui .capi-detail-card h5,
body.capi-ui .capi-row-no {
  color: var(--capi-text-2) !important;
}

body.capi-ui .capi-stat-value,
body.capi-ui .capi-health-widget h4,
body.capi-ui .capi-health-check,
body.capi-ui .capi-health-check li,
body.capi-ui .capi-shared-grid label,
body.capi-ui .capi-section h3,
body.capi-ui .capi-queue-item strong,
body.capi-ui .capi-detail-item .k,
body.capi-ui .capi-detail-item .v {
  color: var(--capi-text-1) !important;
}

body.capi-ui .capi-stat-card:nth-child(1) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--capi-teal-bg) 82%, var(--color-card)), var(--capi-teal-bg)) !important;
  border-color: var(--capi-teal-border) !important;
}

body.capi-ui .capi-stat-card:nth-child(2) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--capi-amber-bg) 82%, var(--color-card)), var(--capi-amber-bg)) !important;
  border-color: var(--capi-amber-border) !important;
}

body.capi-ui .capi-stat-card:nth-child(3) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--capi-red-bg) 82%, var(--color-card)), var(--capi-red-bg)) !important;
  border-color: var(--capi-red-border) !important;
}

body.capi-ui .capi-stat-card:nth-child(4) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--capi-blue-bg) 82%, var(--color-card)), var(--capi-blue-bg)) !important;
  border-color: var(--capi-blue-border) !important;
}

body.capi-ui .capi-stat-icon {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent) !important;
  color: var(--color-primary) !important;
}

body.capi-ui .capi-tab-btn {
  background: color-mix(in srgb, var(--color-card) 90%, transparent) !important;
  border-color: var(--capi-blue-border) !important;
  color: var(--color-primary) !important;
}

body.capi-ui .capi-tab-btn:hover,
body.capi-ui .capi-method-btn.active {
  background: color-mix(in srgb, var(--color-primary-soft) 70%, var(--color-card)) !important;
  border-color: var(--capi-blue-border) !important;
  color: var(--color-primary) !important;
}

body.capi-ui .capi-tab-btn.active {
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-strong)) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

body.capi-ui .capi-manual-wrap,
body.capi-ui .capi-file-preview,
body.capi-ui .capi-mini-table,
body.capi-ui .capi-detail-card,
body.capi-ui .capi-health-widget,
body.capi-ui .capi-queue-item,
body.capi-ui .capi-action-bar {
  background: color-mix(in srgb, var(--color-card) 88%, transparent) !important;
  border-color: var(--capi-border) !important;
}

body.capi-ui .capi-manual-table thead th,
body.capi-ui .capi-file-preview th,
body.capi-ui .capi-mini-table th {
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-card)) !important;
}

body.capi-ui .capi-manual-table tbody td,
body.capi-ui .capi-file-preview td,
body.capi-ui .capi-mini-table td,
body.capi-ui .capi-detail-item,
body.capi-ui .capi-health-check li {
  border-bottom-color: color-mix(in srgb, var(--capi-border) 82%, transparent) !important;
  color: var(--capi-text-1) !important;
}

body.capi-ui .capi-selected-badge {
  border-color: var(--capi-border) !important;
  background: color-mix(in srgb, var(--color-card) 88%, transparent) !important;
  color: var(--capi-text-1) !important;
}

body.capi-ui .capi-file-drop {
  border-color: var(--capi-blue-border) !important;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-card)) !important;
  color: color-mix(in srgb, var(--color-primary) 74%, var(--color-text)) !important;
}

body.capi-ui .capi-match-quality.good { color: #15803d !important; }
body.capi-ui .capi-match-quality.fair { color: #b45309 !important; }
body.capi-ui .capi-match-quality.poor { color: #b91c1c !important; }
body.capi-ui .capi-tone-good { color: #15803d !important; font-weight: 700; }
body.capi-ui .capi-tone-warn { color: #b45309 !important; font-weight: 700; }
body.capi-ui .capi-tone-danger { color: #b91c1c !important; font-weight: 700; }
body.capi-ui .capi-batch-actions { display: flex; gap: 6px; flex-wrap: wrap; }
body.capi-ui .capi-mq-wrap { min-width: 110px; }
body.capi-ui .capi-mq-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
  margin-top: 4px;
}
body.capi-ui .capi-mq-fill { height: 100%; border-radius: 999px; }
body.capi-ui .capi-mq-fill.good { background: #16a34a; }
body.capi-ui .capi-mq-fill.fair { background: #ca8a04; }
body.capi-ui .capi-mq-fill.poor { background: #dc2626; }

body.capi-ui #capiAddRowBtn,
body.capi-ui #capiAddColumnBtn {
  background: #2f8f63 !important;
  border-color: #2f8f63 !important;
  color: #fff !important;
}

body.capi-ui #capiAddRowBtn:hover,
body.capi-ui #capiAddColumnBtn:hover {
  background: #267552 !important;
  border-color: #267552 !important;
}

body.capi-ui #capiRemoveSelectedBtn {
  background: #d05f5f !important;
  border-color: #c04a4a !important;
  color: #fff !important;
}

body.capi-ui #capiRemoveSelectedBtn:hover {
  background: #b54545 !important;
  border-color: #a53c3c !important;
}

body.capi-ui #capiRemoveSelectedBtn:disabled {
  background: rgba(148, 163, 184, 0.35) !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
  color: #64748b !important;
  cursor: not-allowed;
}

body.capi-ui #capiClearAllBtn {
  background: #9f2c2c !important;
  border-color: #8b2020 !important;
  color: #fff !important;
}

body.capi-ui #capiClearAllBtn:hover {
  background: #8b2020 !important;
  border-color: #731818 !important;
}

body.capi-ui #capiRefreshQueueBtn,
body.capi-ui #capiLogRefreshBtn,
body.capi-ui #capiPreviewSendBtn {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}

body.capi-ui #capiRefreshQueueBtn:hover,
body.capi-ui #capiLogRefreshBtn:hover,
body.capi-ui #capiPreviewSendBtn:hover,
body.capi-ui #capiPreviewSendBtn.state-ok,
body.capi-ui #capiPreviewSendBtn.state-warn,
body.capi-ui #capiPreviewSendBtn.state-error {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
}

body.capi-ui .capi-act-edit {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: rgba(217, 119, 6, 0.45) !important;
  color: #8a4b06 !important;
}

body.capi-ui .capi-act-pause {
  background: rgba(217, 119, 6, 0.16) !important;
  border-color: rgba(217, 119, 6, 0.45) !important;
  color: #8a4b06 !important;
}

body.capi-ui .capi-act-resume {
  background: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: #1d4ed8 !important;
}

body.capi-ui .capi-error-link.error {
  border-color: rgba(220, 38, 38, 0.4) !important;
  color: #b91c1c !important;
  background: rgba(254, 226, 226, 0.7) !important;
}

body.capi-ui .capi-error-link.ok {
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #166534 !important;
  background: rgba(220, 252, 231, 0.7) !important;
}

body.capi-ui .capi-act-save {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}

body.capi-ui .capi-act-save:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

body.capi-ui .capi-row-permanent,
body.capi-ui .capi-row-transient {
  background: #fff;
}

body.capi-ui .capi-batch-actions .btn {
  min-height: 30px;
  padding: 5px 9px;
}

body.capi-ui .btn.capi-act-view {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}

body.capi-ui .btn.capi-act-view:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

body.capi-ui .btn.capi-act-retry {
  background: rgba(255, 229, 170, 0.32) !important;
  border-color: rgba(222, 169, 89, 0.62) !important;
  color: #6a4d1d !important;
}

body.capi-ui .btn.capi-act-cancel {
  background: #d41515 !important;
  border-color: #d41515 !important;
  color: #fff !important;
}

body.capi-ui .btn.capi-act-delete {
  background: #9f2c2c !important;
  border-color: #8b2020 !important;
  color: #fff !important;
}

body.capi-ui .btn.capi-act-cancel:hover,
body.capi-ui .btn.capi-act-delete:hover {
  background: #b10f0f !important;
  border-color: #b10f0f !important;
}

body.capi-ui .capi-queue-item label::before {
  margin-right: 6px;
}

body.capi-ui .capi-queue-item:nth-child(1) label::before { content: "⏳"; }
body.capi-ui .capi-queue-item:nth-child(2) label::before { content: "🔄"; }
body.capi-ui .capi-queue-item:nth-child(3) label::before { content: "✅"; }
body.capi-ui .capi-queue-item:nth-child(4) label::before { content: "⚠️"; }
body.capi-ui .capi-queue-item:nth-child(5) label::before { content: "⛔"; }
body.capi-ui .capi-queue-item:nth-child(6) label::before { content: "🕒"; }

body.capi-ui .capi-queue-item,
body.capi-ui .capi-row-permanent,
body.capi-ui .capi-row-transient,
body.capi-ui .capi-detail-card,
body.capi-ui .capi-detail-item.tone-0,
body.capi-ui .capi-detail-item.tone-1,
body.capi-ui .capi-detail-item.tone-2,
body.capi-ui .capi-detail-item.tone-3,
body.capi-ui .capi-detail-item.tone-4,
body.capi-ui .capi-detail-item.tone-5 {
  background: color-mix(in srgb, var(--color-card) 92%, transparent) !important;
}

body.capi-ui .capi-json-box {
  background: color-mix(in srgb, var(--color-card) 88%, #020817) !important;
  color: var(--capi-text-1) !important;
  border: 1px solid var(--capi-border);
}

body.capi-ui .capi-detail-item.tone-0 { border-color: rgba(37, 99, 235, 0.22); }
body.capi-ui .capi-detail-item.tone-0 .k { color: #1e40af !important; }
body.capi-ui .capi-detail-item.tone-0 .v { color: #1d4ed8 !important; }
body.capi-ui .capi-detail-item.tone-1 { border-color: rgba(34, 197, 94, 0.22); }
body.capi-ui .capi-detail-item.tone-1 .k { color: #166534 !important; }
body.capi-ui .capi-detail-item.tone-1 .v { color: #15803d !important; }
body.capi-ui .capi-detail-item.tone-2 { border-color: rgba(245, 158, 11, 0.26); }
body.capi-ui .capi-detail-item.tone-2 .k { color: #92400e !important; }
body.capi-ui .capi-detail-item.tone-2 .v { color: #b45309 !important; }
body.capi-ui .capi-detail-item.tone-3 { border-color: rgba(236, 72, 153, 0.24); }
body.capi-ui .capi-detail-item.tone-3 .k { color: #9d174d !important; }
body.capi-ui .capi-detail-item.tone-3 .v { color: #be185d !important; }
body.capi-ui .capi-detail-item.tone-4 { border-color: rgba(20, 184, 166, 0.24); }
body.capi-ui .capi-detail-item.tone-4 .k { color: #0f766e !important; }
body.capi-ui .capi-detail-item.tone-4 .v { color: #0d9488 !important; }
body.capi-ui .capi-detail-item.tone-5 { border-color: rgba(168, 85, 247, 0.24); }
body.capi-ui .capi-detail-item.tone-5 .k { color: #6b21a8 !important; }
body.capi-ui .capi-detail-item.tone-5 .v { color: #7e22ce !important; }

body.capi-ui #capiVelocityAvg,
body.capi-ui #capiDedupWindow,
body.capi-ui #capiDedupActive,
body.capi-ui #capiLastSent,
body.capi-ui #capiSharedPreviewText,
body.capi-ui .capi-match-quality,
body.capi-ui .capi-summary-pill.total,
body.capi-ui .capi-log-chip.source,
body.capi-ui .capi-log-chip.ref.na,
body.capi-ui .capi-value-pill.na {
  color: var(--capi-text-2) !important;
}

html.dark body.capi-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.dark body.capi-ui select,
html.dark body.capi-ui textarea,
html.dark body.capi-ui .capi-cell-control {
  background: color-mix(in srgb, var(--color-card) 94%, transparent) !important;
  color: var(--capi-text-1) !important;
  border-color: var(--capi-border) !important;
}

html.dark body.capi-ui select option {
  background: var(--color-card) !important;
  color: var(--capi-text-1) !important;
}

html.dark body.capi-ui .capi-date-warning,
html.dark body.capi-ui .capi-summary-pill.total,
html.dark body.capi-ui .capi-summary-pill.valid,
html.dark body.capi-ui .capi-summary-pill.warn,
html.dark body.capi-ui .capi-summary-pill.error,
html.dark body.capi-ui .capi-status-chip.pending,
html.dark body.capi-ui .capi-status-chip.processing,
html.dark body.capi-ui .capi-status-chip.done,
html.dark body.capi-ui .capi-status-chip.partial,
html.dark body.capi-ui .btn.capi-act-retry {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--capi-border) 72%, transparent);
}

html.dark body.capi-ui .capi-tone-danger,
html.dark body.capi-ui .capi-tone-warn {
  filter: brightness(1.18);
}

body.sheet-ui {
  --sheet-token-surface: var(--color-card);
  --sheet-token-border: var(--color-border);
  --sheet-token-text-1: var(--color-text);
  --sheet-token-text-2: var(--color-text-muted);
}

body.sheet-ui .sheet-hero h2,
body.sheet-ui .sheet-panel-head h3,
body.sheet-ui .sheet-panel-title,
body.sheet-ui .sheet-table th,
body.sheet-ui .sheet-table td,
body.sheet-ui .sheet-id-col {
  color: var(--sheet-token-text-1) !important;
}

body.sheet-ui .sheet-hero-copy,
body.sheet-ui .sheet-hero-stat span,
body.sheet-ui .sheet-panel-meta,
body.sheet-ui .sheet-panel-subtitle {
  color: var(--sheet-token-text-2) !important;
}

body.sheet-ui .sheet-hero-stat {
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--sheet-token-border)) !important;
  background: color-mix(in srgb, var(--color-card) 88%, transparent) !important;
}

body.sheet-ui .sheet-hero-tips span,
body.sheet-ui .sheet-panel-meta {
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--sheet-token-border)) !important;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-card)) !important;
}

body.sheet-ui .sheet-create-card,
body.sheet-ui .sheet-panel,
body.sheet-ui .sheet-wrap {
  border-color: var(--sheet-token-border) !important;
  background: color-mix(in srgb, var(--color-card) 90%, transparent) !important;
}

body.sheet-ui .sheet-table thead th {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 98%, transparent), color-mix(in srgb, var(--color-primary) 8%, var(--color-card))) !important;
}

body.sheet-ui .sheet-table th,
body.sheet-ui .sheet-table td {
  border-bottom-color: color-mix(in srgb, var(--sheet-token-border) 80%, transparent) !important;
}

body.ai-composer-ui {
  --composer-token-surface: var(--color-card);
  --composer-token-border: var(--color-border);
  --composer-token-text-1: var(--color-text);
  --composer-token-text-2: var(--color-text-muted);
}

body.ai-composer-ui .ai-composer-kicker,
body.ai-composer-ui .ai-composer-hero-copy,
body.ai-composer-ui .ai-composer-hero-stat span,
body.ai-composer-ui .ai-composer-left-note,
body.ai-composer-ui .ai-composer-model-hint {
  color: var(--composer-token-text-2) !important;
}

body.ai-composer-ui .ai-composer-hero h2,
body.ai-composer-ui .ai-composer-hero-stat strong,
body.ai-composer-ui .ai-composer-toprow h2,
body.ai-composer-ui .ai-composer-section-title,
body.ai-composer-ui .ai-composer-left,
body.ai-composer-ui .ai-composer-main,
body.ai-composer-ui .ai-composer-preview,
body.ai-composer-ui .ai-composer-drawer,
body.ai-composer-ui .ai-composer-prompt-head h3 {
  color: var(--composer-token-text-1) !important;
}

body.ai-composer-ui .ai-composer-hero-stat {
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--composer-token-border)) !important;
  background: color-mix(in srgb, var(--color-card) 88%, transparent) !important;
}

body.ai-composer-ui .ai-composer-topbar,
body.ai-composer-ui .ai-composer-left,
body.ai-composer-ui .ai-composer-main,
body.ai-composer-ui .ai-composer-preview,
body.ai-composer-ui .ai-composer-structured-wrap,
body.ai-composer-ui .ai-composer-raw-wrap,
body.ai-composer-ui .ai-composer-drawer,
body.ai-composer-ui .ai-composer-prompt-modal-card {
  border-color: var(--composer-token-border) !important;
  background: color-mix(in srgb, var(--color-card) 90%, transparent) !important;
}

body.ai-composer-ui .ai-composer-preview-text,
body.ai-composer-ui .ai-composer-prompt-editor {
  color: var(--composer-token-text-1) !important;
  background: color-mix(in srgb, var(--color-card) 92%, transparent) !important;
  border-color: var(--composer-token-border) !important;
}

body.capi-ui .app-container {
  overflow-x: hidden;
  max-width: 100%;
}

body.capi-ui .app,
body.capi-ui .content {
  max-width: 100%;
  overflow-x: hidden;
}

.capi-page {
  display: grid;
  gap: 12px;
  max-width: min(1560px, 100%);
  margin: 0 auto;
  overflow-x: hidden;
}

.capi-page > * {
  min-width: 0;
}

.capi-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.capi-hero-left h1 {
  margin: 0;
  font-size: 24px;
}

.capi-hero-left p {
  margin: 6px 0 0;
}

.capi-hero-right {
  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
}

.capi-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.capi-stat-card {
  margin-bottom: 0;
  display: grid;
  gap: 8px;
}

.capi-stat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.capi-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.capi-tab-btn,
.capi-method-btn {
  transition: all .16s ease;
}

.capi-panel.hidden,
.hidden {
  display: none;
}

.capi-section {
  margin-bottom: 10px;
}

.capi-section h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.capi-method-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.capi-shared-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
}

.capi-shared-row-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.capi-date-warning {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(220, 38, 38, .35);
  background: rgba(254, 226, 226, .7);
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
}

.capi-checkbox-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.capi-manual-wrap {
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 10px;
  overflow: auto;
  max-height: 430px;
  max-width: 100%;
}

.capi-manual-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.capi-manual-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(241, 245, 249, .92);
  border-bottom: 1px solid rgba(15, 23, 42, .1);
  padding: 4px 5px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #475569;
  white-space: normal;
  line-height: 1.15;
}

.capi-manual-table tbody td {
  padding: 3px 4px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  min-width: 0;
  vertical-align: middle;
}

.capi-index-col {
  width: 58px !important;
  min-width: 58px !important;
}

.capi-index-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}

.capi-row-no {
  min-width: 16px;
  font-weight: 700;
  color: #475569;
  text-align: right;
  font-size: 10px;
}

.capi-row-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #94a3b8;
}

.capi-row-dot.ok {
  background: #16a34a;
}

.capi-row-dot.warn {
  background: #d97706;
}

.capi-row-dot.error {
  background: #dc2626;
}

.capi-cell-control {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  font-size: 9px;
  line-height: 1.05;
  padding: 2px 4px;
  height: 24px;
}

.capi-cell-control.capi-cell-error {
  border-color: rgba(220, 38, 38, .65) !important;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, .18);
}

.capi-phone-cell {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px;
  align-items: center;
}

.capi-phone-warning {
  color: #d97706;
  font-size: 9px;
}

.capi-row-remove {
  width: 24px;
  height: 24px;
  padding: 0 !important;
}

.capi-table-footer {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.capi-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.capi-error-link {
  margin-top: 10px;
  text-align: left;
  width: 100%;
}

.capi-match-quality {
  margin-top: 8px;
  font-size: 13px;
}

.capi-file-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.capi-file-drop {
  border: 1px dashed rgba(37, 99, 235, .35);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  background: rgba(59, 130, 246, .06);
  color: #1e3a8a;
  cursor: pointer;
}

.capi-file-drop.drag {
  background: rgba(59, 130, 246, .12);
}

.capi-file-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px 12px;
  margin-top: 10px;
}

.capi-map-item label {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  color: #475569;
}

.capi-file-preview {
  margin-top: 10px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 10px;
  overflow: auto;
  max-width: 100%;
}

.capi-file-preview table {
  width: 100%;
  border-collapse: collapse;
}

.capi-file-preview th,
.capi-file-preview td {
  font-size: 12px;
  padding: 7px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, .07);
  white-space: nowrap;
  text-align: left;
}

.capi-file-preview th {
  background: rgba(241, 245, 249, .85);
  color: #475569;
}

.capi-action-bar {
  position: sticky;
  bottom: 8px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 0;
}

.capi-panel-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}

.capi-sub-card {
  margin-bottom: 0;
}

.capi-mini-table {
  width: 100%;
  border-collapse: collapse;
}

.capi-mini-table th,
.capi-mini-table td {
  padding: 8px 9px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  text-align: left;
  font-size: 13px;
}

.capi-mini-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
}

.capi-mini-table tbody tr:hover {
  background: #fff;
}

.capi-inline-input,
.capi-inline-select {
  width: 100%;
  min-height: 30px;
  height: 30px;
  padding: 4px 6px;
  font-size: 12px;
}

.capi-inline-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.capi-queue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.capi-queue-item {
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, .75);
}

.capi-queue-item label {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
}

.capi-queue-item strong {
  font-size: 15px;
  color: #0f172a;
}

.capi-queue-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.capi-queue-controls-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.capi-table-scroll {
  overflow: auto;
  max-width: 100%;
}

.capi-log-filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.capi-log-filter-actions {
  display: flex;
  align-items: flex-end;
}

.capi-log-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.capi-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.capi-json-box {
  margin: 0;
  white-space: pre-wrap;
  font-size: 12px;
  max-height: 220px;
  overflow: auto;
  background: #0f172a;
  color: #e2e8f0;
  padding: 10px;
  border-radius: 8px;
}

.capi-detail-wrap {
  display: grid;
  gap: 10px;
}

.capi-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 8px;
}

.capi-detail-card {
  border: 1px solid #dde3ea;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}

.capi-detail-card h5 {
  margin: 0 0 6px;
  font-size: 12px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.capi-detail-list {
  display: grid;
  gap: 4px;
}

.capi-detail-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 5px 7px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.capi-detail-item .k {
  font-weight: 700;
}

.capi-detail-item .v {
  font-weight: 600;
  word-break: break-word;
  text-align: right;
}

.capi-detail-raw {
  margin-top: 2px;
}

.capi-batch-modal-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.capi-health-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.capi-health-toggle .caret {
  transition: transform .18s ease;
}

.capi-health-toggle.open .caret {
  transform: rotate(180deg);
}

.capi-health-panel {
  margin-top: 10px;
}

.capi-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.capi-health-widget {
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, .72);
  display: grid;
  gap: 8px;
}

.capi-health-widget h4 {
  margin: 0;
  font-size: 14px;
}

.capi-emq-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .25);
  overflow: hidden;
}

.capi-emq-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #16a34a, #84cc16);
}

.capi-health-check {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #334155;
}

.capi-health-check li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.capi-health-tip {
  font-size: 12px;
  color: #64748b;
}

.capi-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, .25);
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, .7);
  color: #2563eb;
}

.capi-status-pill.paused {
  border-color: rgba(217, 119, 6, .3);
  color: #92400e;
}

.capi-status-pill.inactive {
  border-color: rgba(71, 85, 105, .3);
  color: #475569;
}

.capi-stat-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
}

.capi-stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, .12);
  color: #2563eb;
}

.capi-stat-value {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
}

.capi-stat-value.sent { color: #1f8a4c; }
.capi-stat-value.pending { color: #b76b12; }
.capi-stat-value.failed { color: #bb2f2f; }
.capi-stat-value.quality { color: #2563eb; }
.capi-stat-value.is-zero { color: #94a3b8; }

.capi-stat-hint {
  margin-top: 4px;
  font-size: 9.5px;
  color: #94a3b8;
}

body.capi-ui .capi-kpi-hero {
  gap: 0;
  background: #ffffff;
  border: 1px solid #e3e7ef;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .05);
}

body.capi-ui .capi-kpi-cell {
  position: relative;
  gap: 0;
  padding: 14px 18px;
  background: #ffffff !important;
  border-color: #e3e7ef !important;
  border-right: 1px solid #e3e7ef;
  border-radius: 0;
  border-width: 0 1px 0 0;
  box-shadow: none;
  overflow: hidden;
  transition: transform .18s ease, background .18s ease;
}

body.capi-ui .capi-kpi-cell:last-child {
  border-right: none;
}

body.capi-ui .capi-kpi-cell:hover {
  transform: translateY(-1px);
}

body.capi-ui .capi-kpi-cell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}

body.capi-ui .capi-kpi-cell.accent-blue::before { background: linear-gradient(90deg, #3b6bff, #818cf8); }
body.capi-ui .capi-kpi-cell.accent-orange::before { background: linear-gradient(90deg, #f59e0b, #fb923c); }
body.capi-ui .capi-kpi-cell.accent-red::before { background: linear-gradient(90deg, #ef4444, #f87171); }
body.capi-ui .capi-kpi-cell.accent-teal::before { background: linear-gradient(90deg, #0e8a9e, #22d3ee); }

body.capi-ui .capi-kpi-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #8b94a8 !important;
  margin-bottom: 6px;
}

body.capi-ui .capi-kpi-value {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  font-family: "JetBrains Mono", "Consolas", "Courier New", monospace;
}

body.capi-ui .capi-kpi-cell.accent-blue .capi-kpi-value { color: #3b6bff !important; }
body.capi-ui .capi-kpi-cell.accent-orange .capi-kpi-value { color: #f59e0b !important; }
body.capi-ui .capi-kpi-cell.accent-red .capi-kpi-value { color: #ef4444 !important; }
body.capi-ui .capi-kpi-cell.accent-teal .capi-kpi-value { color: #0e8a9e !important; }

body.capi-ui .capi-kpi-hint {
  color: #b8bfcc !important;
}

body.capi-ui .capi-kpi-cell .capi-stat-head {
  display: block;
}

body.capi-ui .capi-kpi-cell .capi-stat-icon {
  display: none !important;
}

body.capi-ui .capi-kpi-hero .capi-stat-card:nth-child(1),
body.capi-ui .capi-kpi-hero .capi-stat-card:nth-child(2),
body.capi-ui .capi-kpi-hero .capi-stat-card:nth-child(3),
body.capi-ui .capi-kpi-hero .capi-stat-card:nth-child(4) {
  background: transparent !important;
  border-color: inherit !important;
}

html.dark body.capi-ui .capi-kpi-hero {
  background: linear-gradient(180deg, var(--capi-card) 0%, color-mix(in srgb, var(--capi-blue-bg) 12%, var(--capi-card)) 100%) !important;
  border-color: var(--capi-border) !important;
}

html.dark body.capi-ui .capi-kpi-cell {
  background: transparent !important;
  border-color: var(--capi-border) !important;
}

html.dark body.capi-ui .capi-kpi-label,
html.dark body.capi-ui .capi-kpi-hint {
  color: var(--capi-text-2) !important;
}

.capi-tab-btn {
  background: #fff !important;
  border-color: rgba(37, 99, 235, .45) !important;
  color: #2563eb !important;
  font-weight: 700;
}

.capi-tab-btn:hover {
  background: rgba(37, 99, 235, .1) !important;
  border-color: #2563eb !important;
  color: #2563eb !important;
}

.capi-tab-btn.active {
  opacity: 1;
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .28);
}

.capi-method-btn.active {
  opacity: 1;
  background: rgba(37, 99, 235, .12) !important;
  border-color: rgba(37, 99, 235, .32) !important;
  color: #2563eb !important;
  font-weight: 700;
}

.capi-selected-badge {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(255, 255, 255, .8);
  color: #334155;
}

.capi-summary-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.capi-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 600;
}

.capi-summary-pill.total { background: rgba(226, 232, 240, .55); border-color: rgba(148, 163, 184, .4); color: #334155; }
.capi-summary-pill.valid { background: rgba(220, 252, 231, .6); border-color: rgba(34, 197, 94, .4); color: #166534; }
.capi-summary-pill.warn { background: rgba(254, 243, 199, .65); border-color: rgba(245, 158, 11, .45); color: #92400e; }
.capi-summary-pill.error { background: rgba(254, 226, 226, .7); border-color: rgba(220, 38, 38, .45); color: #b91c1c; }

.capi-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}

.capi-status-chip.pending { background: rgba(245, 158, 11, .14); color: #92400e; border-color: rgba(245, 158, 11, .3); }
.capi-status-chip.processing { background: rgba(37, 99, 235, .12); color: #1d4ed8; border-color: rgba(37, 99, 235, .28); }
.capi-status-chip.done { background: rgba(34, 197, 94, .14); color: #166534; border-color: rgba(34, 197, 94, .3); }
.capi-status-chip.partial { background: rgba(220, 38, 38, .12); color: #b91c1c; border-color: rgba(220, 38, 38, .28); }

.capi-log-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.capi-log-chip.event { background: rgba(37, 99, 235, .10); border-color: rgba(37, 99, 235, .25); color: #1e40af; }
.capi-log-chip.event.ev-purchase { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .28); color: #166534; }
.capi-log-chip.event.ev-addtocart { background: rgba(245, 158, 11, .16); border-color: rgba(245, 158, 11, .3); color: #9a5b09; }
.capi-log-chip.event.ev-initiatecheckout { background: rgba(168, 85, 247, .14); border-color: rgba(168, 85, 247, .3); color: #6b21a8; }
.capi-log-chip.event.ev-viewcontent { background: rgba(37, 99, 235, .12); border-color: rgba(37, 99, 235, .3); color: #1d4ed8; }
.capi-log-chip.event.ev-lead { background: rgba(20, 184, 166, .14); border-color: rgba(20, 184, 166, .28); color: #0f766e; }
.capi-log-chip.event.ev-completereg { background: rgba(236, 72, 153, .13); border-color: rgba(236, 72, 153, .3); color: #be185d; }
.capi-log-chip.source { background: rgba(148, 163, 184, .16); border-color: rgba(148, 163, 184, .32); color: #334155; }
.capi-log-chip.ref { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .28); color: #166534; }
.capi-log-chip.ref.na { background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .25); color: #64748b; }

.capi-value-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #dde3ea;
}

.capi-value-pill.good { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .28); color: #166534; }
.capi-value-pill.na { background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .25); color: #64748b; }

.capi-velocity-bars {
  height: 120px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.capi-velocity-chart-wrap {
  position: relative;
  height: 120px;
  margin-bottom: 6px;
}

.capi-velocity-chart-wrap canvas {
  width: 100% !important;
  height: 120px !important;
}

.capi-velocity-bar-wrap {
  flex: 1;
  display: grid;
  gap: 5px;
  justify-items: center;
}

.capi-velocity-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
}

.capi-velocity-label {
  font-size: 10px;
  color: #64748b;
}

.capi-modal-card {
  width: min(1320px, 96vw);
  max-height: 90vh;
  overflow: auto;
}

.capi-modal-card .capi-table-scroll {
  max-height: 58vh;
  overflow: auto;
}

.capi-modal-card .capi-mini-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

@media (max-width: 1200px) {
  .capi-summary-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .capi-shared-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 1024px) {
  .capi-panel-grid {
    grid-template-columns: 1fr;
  }

  .capi-file-map {
    grid-template-columns: 1fr;
  }

  .capi-log-filters {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .capi-health-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .capi-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .capi-hero-right {
    justify-items: start;
    text-align: left;
  }

  .capi-summary-grid,
  .capi-shared-grid {
    grid-template-columns: 1fr;
  }

  .capi-action-bar {
    bottom: 70px;
  }

  .capi-queue-grid {
    grid-template-columns: 1fr 1fr;
  }

  .capi-log-filters {
    grid-template-columns: 1fr;
  }
}

.dashboard-trend-canvas-wrap {
  position: relative;
  min-height: 214px;
  margin-bottom: 8px;
}

.dashboard-trend-canvas-wrap canvas {
  width: 100% !important;
  height: 214px !important;
}

body.dashboard-ops-ui .dashboard-score-chart-layout,
body.dashboard-ui .dashboard-score-chart-layout {
  display: grid;
  gap: 12px;
}

body.dashboard-ops-ui .dashboard-score-chart-wrap,
body.dashboard-ui .dashboard-score-chart-wrap {
  position: relative;
  min-height: 188px;
  padding: 10px 12px 4px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}

body.dashboard-ops-ui .dashboard-score-chart-wrap canvas,
body.dashboard-ui .dashboard-score-chart-wrap canvas {
  width: 100% !important;
  height: 168px !important;
}

html.dark body.conv-settings #convApp[data-view="list"] .actions-cell .action-btn {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 96%, transparent), color-mix(in srgb, var(--color-primary-soft) 42%, var(--color-card)));
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--conv-border));
  color: var(--conv-text-1);
}

html.dark body.conv-settings #convApp[data-view="list"] .conv-row > td {
  background: color-mix(in srgb, var(--color-card) 90%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--conv-border) 82%, transparent) !important;
}

html.dark body.conv-settings .conv-row > td {
  background: color-mix(in srgb, var(--color-card) 90%, transparent) !important;
}

html.dark body.conv-settings #convApp[data-view="list"] .conv-panel,
html.dark body.conv-settings #convApp[data-view="list"] .conv-nested {
  background: color-mix(in srgb, var(--color-card) 94%, transparent) !important;
  border-color: color-mix(in srgb, var(--conv-border) 82%, transparent) !important;
}

html.dark body.conv-settings .conv-panel {
  background: color-mix(in srgb, var(--color-card) 94%, transparent) !important;
  border-color: color-mix(in srgb, var(--conv-border) 82%, transparent) !important;
}

html.dark body.broadcast-ui .bcm-email-template-cards-panel,
html.dark body.broadcast-ui .bcs-email-card {
  background: color-mix(in srgb, var(--ba-surface-2) 86%, var(--ba-surface)) !important;
  color: var(--ba-text-1) !important;
}

html.dark body.broadcast-ui .broadcast-shell-card,
html.dark body.broadcast-ui .broadcast-campaign-builder-strip,
html.dark body.broadcast-ui .broadcast-campaign-worker-card,
html.dark body.broadcast-ui .broadcast-campaign-grid-shell,
html.dark body.broadcast-ui .broadcast-analytics-chart,
html.dark body.broadcast-ui .broadcast-contact-timeline,
html.dark body.broadcast-ui .broadcast-contact-journey,
html.dark body.broadcast-ui .broadcast-contact-row,
html.dark body.broadcast-ui .broadcast-contact-row-empty,
html.dark body.broadcast-ui .broadcast-settings-card,
html.dark body.broadcast-ui .broadcast-settings-card-header,
html.dark body.broadcast-ui .broadcast-settings-card-body,
html.dark body.broadcast-ui .table-wrap {
  background: linear-gradient(180deg, var(--ba-surface) 0%, var(--ba-surface-2) 100%) !important;
  border-color: var(--ba-border) !important;
  color: var(--ba-text-1) !important;
}

html.dark body.broadcast-ui .broadcast-tab,
html.dark body.broadcast-ui .broadcast-campaign-filter,
html.dark body.broadcast-ui .broadcast-settings-card-body input,
html.dark body.broadcast-ui .broadcast-settings-card-body select,
html.dark body.broadcast-ui .broadcast-settings-card-body textarea,
html.dark body.broadcast-ui .broadcast-contacts-filters-card input,
html.dark body.broadcast-ui .broadcast-contacts-filters-card select {
  background: var(--ba-surface) !important;
  border-color: var(--ba-border-2) !important;
  color: var(--ba-text-1) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-filter option,
html.dark body.broadcast-ui .broadcast-settings-card-body select option,
html.dark body.broadcast-ui .broadcast-contacts-filters-card select option {
  background: var(--ba-surface) !important;
  color: var(--ba-text-1) !important;
}

html.dark body.broadcast-ui .broadcast-shell-head h1,
html.dark body.broadcast-ui .broadcast-section-head h3,
html.dark body.broadcast-ui .broadcast-contacts-title,
html.dark body.broadcast-ui .broadcast-campaign-grid-title,
html.dark body.broadcast-ui .broadcast-campaign-builder-label,
html.dark body.broadcast-ui .broadcast-campaign-builder-value,
html.dark body.broadcast-ui .broadcast-settings-card-title,
html.dark body.broadcast-ui .broadcast-settings-card-body label,
html.dark body.broadcast-ui .broadcast-contact-name,
html.dark body.broadcast-ui .broadcast-contact-phone,
html.dark body.broadcast-ui .broadcast-contact-email,
html.dark body.broadcast-ui .broadcast-campaign-card-title,
html.dark body.broadcast-ui .broadcast-campaign-grid-count,
html.dark body.broadcast-ui .broadcast-campaign-worker-card h3,
html.dark body.broadcast-ui .broadcast-campaign-worker-card h4 {
  color: var(--ba-text-1) !important;
}

html.dark body.broadcast-ui .muted,
html.dark body.broadcast-ui .broadcast-section-head .muted,
html.dark body.broadcast-ui .broadcast-products-import-status,
html.dark body.broadcast-ui .broadcast-contact-row-empty,
html.dark body.broadcast-ui .broadcast-campaign-grid-count,
html.dark body.broadcast-ui .broadcast-settings-card-desc,
html.dark body.broadcast-ui .broadcast-contact-presence,
html.dark body.broadcast-ui .broadcast-contact-chip,
html.dark body.broadcast-ui .broadcast-contact-status-pill,
html.dark body.broadcast-ui .broadcast-campaign-builder-copy,
html.dark body.broadcast-ui .broadcast-campaign-worker-card .muted {
  color: var(--ba-text-2) !important;
}

html.dark body.broadcast-ui .broadcast-contact-row:hover {
  background: color-mix(in srgb, var(--ba-surface-3) 82%, var(--ba-surface)) !important;
  border-color: var(--ba-accent-bd) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-card-id,
html.dark body.broadcast-ui .broadcast-campaign-tag.tone-steps,
html.dark body.broadcast-ui .broadcast-campaign-tag.tone-paused,
html.dark body.broadcast-ui .broadcast-campaign-grid-count,
html.dark body.broadcast-ui .broadcast-contact-chip.source,
html.dark body.broadcast-ui .broadcast-contact-chip.campaign,
html.dark body.broadcast-ui .broadcast-contact-chip.fatigue.ok,
html.dark body.broadcast-ui .broadcast-contact-chip.fatigue.warn {
  background: var(--ba-surface-3) !important;
  border-color: var(--ba-border-2) !important;
  color: var(--ba-text-2) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-funnel-bar,
html.dark body.broadcast-ui .broadcast-chart-label,
html.dark body.broadcast-ui .broadcast-timeline-time,
html.dark body.broadcast-ui .presence-label {
  color: var(--ba-text-2) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-funnel-bar,
html.dark body.broadcast-ui .broadcast-campaign-funnel-track,
html.dark body.broadcast-ui .broadcast-campaign-worker-progress,
html.dark body.broadcast-ui .broadcast-campaign-worker-progress span,
html.dark body.broadcast-ui .broadcast-campaign-funnel-track span,
html.dark body.broadcast-ui .ba-funnel-bar,
html.dark body.broadcast-ui .ba-mini-bar {
  border-color: var(--ba-border) !important;
  background: color-mix(in srgb, var(--ba-surface-3) 82%, var(--ba-surface)) !important;
}

html.dark body.broadcast-ui .conv-table th {
  background: color-mix(in srgb, var(--ba-surface-3) 90%, var(--ba-surface)) !important;
  color: var(--ba-text-2) !important;
  border-color: var(--ba-border) !important;
}

html.dark body.broadcast-ui .conv-table td {
  background: color-mix(in srgb, var(--ba-surface) 94%, transparent) !important;
  color: var(--ba-text-1) !important;
  border-color: var(--ba-border) !important;
}

html.dark body.broadcast-ui .ba-kpi-hero {
  background: linear-gradient(180deg, var(--ba-surface) 0%, var(--ba-surface-2) 100%) !important;
  border-color: var(--ba-border) !important;
}

html.dark body.broadcast-ui .ba-head-chip.neutral,
html.dark body.broadcast-ui .broadcast-campaign-grid-count,
html.dark body.broadcast-ui .broadcast-status-badge.unknown,
html.dark body.broadcast-ui .brand-badge.not-configured,
html.dark body.broadcast-ui .broadcast-chip,
html.dark body.broadcast-ui .broadcast-contacts-subchip,
html.dark body.broadcast-ui .broadcast-contacts-subchip.tone-green {
  background: var(--ba-surface-3) !important;
  border-color: var(--ba-border-2) !important;
  color: var(--ba-text-2) !important;
}

html.dark body.broadcast-ui .ba-funnel-label,
html.dark body.broadcast-ui .ba-funnel-value.neutral,
html.dark body.broadcast-ui .ba-trend-total,
html.dark body.broadcast-ui .ba-trend-total strong,
html.dark body.broadcast-ui .ba-queue-test-strip,
html.dark body.broadcast-ui .ba-queue-test-totals,
html.dark body.broadcast-ui .ba-inline-check,
html.dark body.broadcast-ui .broadcast-toggle-label,
html.dark body.broadcast-ui .broadcast-toggle-desc,
html.dark body.broadcast-ui .broadcast-brevo-toggle-field .broadcast-toggle-label,
html.dark body.broadcast-ui .broadcast-brevo-toggle-field .broadcast-toggle-desc,
html.dark body.broadcast-ui .broadcast-survey-add-row .muted,
html.dark body.broadcast-ui .brand-badge,
html.dark body.broadcast-ui .link-btn {
  color: var(--ba-text-2) !important;
}

html.dark body.broadcast-ui .ba-kpi-value,
html.dark body.broadcast-ui .ba-funnel-value.neutral,
html.dark body.broadcast-ui .broadcast-toggle-label,
html.dark body.broadcast-ui .broadcast-settings-status-line {
  color: var(--ba-text-1) !important;
}

html.dark body.broadcast-ui .broadcast-toggle-track {
  background: color-mix(in srgb, var(--ba-surface-3) 86%, var(--ba-surface)) !important;
  border-color: var(--ba-border-2) !important;
}

html.dark body.broadcast-ui .broadcast-toggle-track::after {
  background: var(--ba-text-1) !important;
}

html.dark body.broadcast-ui .broadcast-survey-add-row {
  background: linear-gradient(180deg, var(--ba-surface-2) 0%, var(--ba-surface-3) 100%) !important;
  border-color: var(--ba-border) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-builder-icon {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ba-border-2) 88%, transparent);
}

html.dark body.broadcast-ui .broadcast-campaign-builder-kpi.tone-pending .broadcast-campaign-builder-icon {
  background: var(--ba-warning-dim) !important;
  color: color-mix(in srgb, var(--ba-warning) 88%, #fde68a) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-builder-kpi.tone-dispatched .broadcast-campaign-builder-icon {
  background: var(--ba-success-dim) !important;
  color: var(--ba-success) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-builder-kpi.tone-live .broadcast-campaign-builder-icon {
  background: var(--ba-accent-dim) !important;
  color: var(--ba-accent) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-card,
html.dark body.broadcast-ui .broadcast-campaign-card-head,
html.dark body.broadcast-ui .bcc-mini-stats,
html.dark body.broadcast-ui .bcc-toggle-row,
html.dark body.broadcast-ui .broadcast-campaign-card-footer {
  background: linear-gradient(180deg, var(--ba-surface) 0%, var(--ba-surface-2) 100%) !important;
  border-color: var(--ba-border) !important;
  color: var(--ba-text-1) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-card:hover {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ba-accent) 12%, transparent) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-card h4,
html.dark body.broadcast-ui .broadcast-campaign-card-top h4,
html.dark body.broadcast-ui .broadcast-campaign-stat-value,
html.dark body.broadcast-ui .broadcast-campaign-funnel-value,
html.dark body.broadcast-ui .broadcast-campaign-funnel-pct {
  color: var(--ba-text-1) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-card-id,
html.dark body.broadcast-ui .broadcast-campaign-stat-label,
html.dark body.broadcast-ui .broadcast-campaign-funnel-label,
html.dark body.broadcast-ui .broadcast-campaign-builder-label {
  color: var(--ba-text-2) !important;
}

html.dark body.broadcast-ui .ba-queue-table thead th {
  background: rgba(10, 19, 34, 0.96) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-tag.tone-wa {
  background: color-mix(in srgb, var(--ba-success) 14%, var(--ba-surface)) !important;
  border-color: color-mix(in srgb, var(--ba-success) 28%, var(--ba-border)) !important;
  color: var(--ba-success) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-tag.tone-email {
  background: var(--ba-accent-dim) !important;
  border-color: var(--ba-accent-bd) !important;
  color: var(--ba-accent) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-tag.tone-both {
  background: var(--ba-purple-dim) !important;
  border-color: var(--ba-purple-bd) !important;
  color: var(--ba-purple) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-tag.tone-steps,
html.dark body.broadcast-ui .broadcast-campaign-tag.tone-paused {
  background: var(--ba-surface-3) !important;
  border-color: var(--ba-border-2) !important;
  color: var(--ba-text-2) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-tag.tone-live {
  background: color-mix(in srgb, var(--ba-success) 14%, var(--ba-surface)) !important;
  border-color: color-mix(in srgb, var(--ba-success) 28%, var(--ba-border)) !important;
  color: var(--ba-success) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-tag.tone-test {
  background: var(--ba-warning-dim) !important;
  border-color: var(--ba-warning-bd) !important;
  color: color-mix(in srgb, var(--ba-warning) 88%, #fde68a) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-card-stripe.tone-live {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ba-accent) 20%, transparent), transparent) !important;
  color: var(--ba-accent) !important;
  border-bottom-color: var(--ba-border) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-card-stripe.tone-test {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ba-purple) 20%, transparent), transparent) !important;
  color: var(--ba-purple) !important;
  border-bottom-color: var(--ba-border) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-card-stripe.tone-paused {
  background: linear-gradient(90deg, color-mix(in srgb, var(--ba-text-2) 18%, transparent), transparent) !important;
  color: var(--ba-text-2) !important;
  border-bottom-color: var(--ba-border) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-card-scope {
  color: var(--ba-text-3) !important;
}

html.dark body.broadcast-ui .broadcast-campaign-action.action-build {
  background: var(--ba-surface-3) !important;
  border-color: var(--ba-border-2) !important;
  color: var(--ba-text-1) !important;
}

html.dark body.settings-ui select,
html.dark body.settings-ui select option {
  background: var(--color-card) !important;
  color: var(--color-text) !important;
}

html.dark body.settings-ui .settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html.dark body.settings-ui .settings-page textarea {
  background: color-mix(in srgb, var(--color-card) 94%, transparent) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

html.dark body.settings-ui .settings-hero {
  border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border)) !important;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-card) 98%, transparent), color-mix(in srgb, var(--color-primary) 10%, var(--color-card))) !important;
  box-shadow: 0 20px 40px color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
}

html.dark body.settings-ui .settings-hero-metric,
html.dark body.settings-ui .settings-top-grid > .settings-card.settings-tone-rate,
html.dark body.settings-ui .settings-top-grid > .settings-card.settings-tone-timezone,
html.dark body.settings-ui .settings-capi-card,
html.dark body.settings-ui .settings-tone-alerts,
html.dark body.settings-ui .settings-tone-scoring {
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 98%, transparent), color-mix(in srgb, var(--color-primary) 7%, var(--color-card))) !important;
  color: var(--color-text) !important;
}

html.dark body.settings-ui .settings-hero-metric span,
html.dark body.settings-ui .settings-hero .muted,
html.dark body.settings-ui .settings-top-grid > .settings-card label,
html.dark body.settings-ui .settings-capi-card .muted,
html.dark body.settings-ui .settings-tone-alerts .settings-card-desc,
html.dark body.settings-ui .settings-tone-scoring .muted {
  color: var(--color-text-muted) !important;
}

html.dark body.settings-ui .settings-hero-metric strong,
html.dark body.settings-ui .settings-top-grid > .settings-card strong,
html.dark body.settings-ui .settings-top-grid > .settings-card .settings-block-title,
html.dark body.settings-ui .settings-capi-card .settings-block-title,
html.dark body.settings-ui .settings-tone-alerts .settings-card-title,
html.dark body.settings-ui .settings-tone-scoring .settings-block-title {
  color: var(--color-text) !important;
}

html.dark body.settings-ui .settings-section-link {
  border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border)) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 96%, transparent), color-mix(in srgb, var(--color-primary) 10%, var(--color-card))) !important;
}

html.dark body.settings-ui .settings-section-link:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 16%, var(--color-card)), color-mix(in srgb, var(--color-primary) 10%, var(--color-card))) !important;
}

html.dark body.settings-ui .settings-section-link.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 18%, var(--color-card)), color-mix(in srgb, var(--color-primary) 12%, var(--color-card))) !important;
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)) !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}

html.dark body.settings-ui .settings-card.settings-timezone-card .tz-menu,
html.dark body.settings-ui .settings-card.settings-timezone-card .tz-picker input,
html.dark body.settings-ui .settings-card.settings-timezone-card .tz-menu .tz-item {
  background: color-mix(in srgb, var(--color-card) 96%, transparent) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

html.dark body.settings-ui .settings-card.settings-timezone-card .tz-menu .tz-item:hover,
html.dark body.settings-ui .settings-card.settings-timezone-card .tz-menu .tz-item:active {
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-card)) !important;
}

html.dark body.sheet-ui .sheet-draft-row td {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-card));
}

html.dark body.sheet-ui .sheet-draft-edge,
html.dark body.sheet-ui .sheet-draft-corner,
html.dark body.sheet-ui .sheet-draft-cell[contenteditable="true"]:empty:before {
  color: var(--sheet-token-text-2);
}

@keyframes login-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

body.app-modern.auth-login-page {
  background: #0b1730;
}

body.app-modern.auth-login-page .bg,
body.app-modern.auth-login-page .mobile-header,
body.app-modern.auth-login-page .auth-header,
body.app-modern.auth-login-page .app-auth-theme-row {
  display: none !important;
}

body.app-modern.auth-login-page .app-container {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

body.app-modern.auth-login-page .container.app-container {
  width: 100vw;
  max-width: 100vw;
  padding: 0;
}

body.app-modern.auth-login-page .login-shell {
  min-height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  background: #0b1730;
}

body.app-modern.auth-login-page .login-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 52px;
  overflow: hidden;
  background: #0b1730;
}

body.app-modern.auth-login-page .login-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 15% 25%, rgba(14,125,143,.28) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(43,91,224,.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 55% 50%, rgba(139,92,246,.08) 0%, transparent 55%);
}

body.app-modern.auth-login-page .login-mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: .055;
}

body.app-modern.auth-login-page .login-mesh svg {
  width: 100%;
  height: 100%;
}

body.app-modern.auth-login-page .login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

body.app-modern.auth-login-page .login-orb-a {
  width: 500px;
  height: 500px;
  background: #0e7d8f;
  opacity: .10;
  top: -160px;
  left: -120px;
  animation: float 18s ease-in-out infinite alternate;
}

body.app-modern.auth-login-page .login-orb-b {
  width: 320px;
  height: 320px;
  background: #2b5be0;
  opacity: .12;
  bottom: -80px;
  right: -60px;
  animation: float 14s ease-in-out infinite alternate-reverse;
}

body.app-modern.auth-login-page .login-orb-c {
  width: 200px;
  height: 200px;
  background: #8b5cf6;
  opacity: .08;
  top: 45%;
  left: 55%;
  animation: float 20s ease-in-out infinite alternate;
}

body.app-modern.auth-login-page .login-visual-inner,
body.app-modern.auth-login-page .login-visual-foot {
  position: relative;
  z-index: 1;
}

body.app-modern.auth-login-page .login-brand-logo,
body.app-modern.auth-login-page .login-form-logo {
  display: block;
  object-fit: contain;
  object-position: left center;
}

body.app-modern.auth-login-page .login-brand-logo {
  height: 46px;
  filter: brightness(0) invert(1);
  opacity: .92;
  margin-bottom: 52px;
}

body.app-modern.auth-login-page .login-form-logo {
  height: 32px;
  margin-bottom: 28px;
  opacity: .88;
}

body.app-modern.auth-login-page .login-brand-fallback,
body.app-modern.auth-login-page .login-form-logo-fallback {
  display: none;
  font-weight: 800;
  letter-spacing: -.02em;
}

body.app-modern.auth-login-page .login-brand-fallback {
  color: #ffffff;
  font-size: 22px;
  margin-bottom: 52px;
}

body.app-modern.auth-login-page .login-form-logo-fallback {
  color: #0b1730;
  font-size: 16px;
  margin-bottom: 28px;
}

body.app-modern.auth-login-page .login-hero-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #15a0b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

body.app-modern.auth-login-page .login-hero-label::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: #15a0b8;
}

body.app-modern.auth-login-page .login-hero-title {
  margin: 0 0 16px;
  color: #f0f6ff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.5px;
}

body.app-modern.auth-login-page .login-hero-title span {
  color: #15a0b8;
}

body.app-modern.auth-login-page .login-hero-desc {
  max-width: 380px;
  margin: 0 0 40px;
  color: rgba(180,205,235,.68);
  font-size: 14px;
  line-height: 1.75;
}

body.app-modern.auth-login-page .login-feature-grid {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

body.app-modern.auth-login-page .login-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 8px;
  background: rgba(255,255,255,.042);
  backdrop-filter: blur(8px);
  transition: background .2s ease;
}

body.app-modern.auth-login-page .login-feature:hover {
  background: rgba(255,255,255,.068);
}

body.app-modern.auth-login-page .login-feature-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 15px;
}

body.app-modern.auth-login-page .login-feature-icon.tone-teal {
  background: rgba(14,125,143,.28);
  border: 1px solid rgba(21,160,184,.3);
}

body.app-modern.auth-login-page .login-feature-icon.tone-blue {
  background: rgba(43,91,224,.25);
  border: 1px solid rgba(59,107,255,.3);
}

body.app-modern.auth-login-page .login-feature-icon.tone-purple {
  background: rgba(139,92,246,.2);
  border: 1px solid rgba(139,92,246,.3);
}

body.app-modern.auth-login-page .login-feature-icon.tone-green {
  background: rgba(16,185,129,.2);
  border: 1px solid rgba(16,185,129,.3);
}

body.app-modern.auth-login-page .login-feature-name {
  color: rgba(220,235,255,.9);
  font-size: 12.5px;
  font-weight: 600;
}

body.app-modern.auth-login-page .login-feature-desc {
  margin-top: 1px;
  color: rgba(160,190,225,.52);
  font-size: 11px;
}

body.app-modern.auth-login-page .login-visual-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(130,160,200,.4);
  font-size: 11px;
}

body.app-modern.auth-login-page .login-visual-foot::before {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.07);
}

body.app-modern.auth-login-page .login-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: #f3f6fc;
  box-shadow: -24px 0 80px rgba(0,0,0,.28);
  overflow: hidden;
  animation: slideRight .4s cubic-bezier(.22,1,.36,1) both;
}

body.app-modern.auth-login-page .login-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 10%, rgba(14,125,143,.05) 0%, transparent 55%);
  pointer-events: none;
}

body.app-modern.auth-login-page .login-panel-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
}

body.app-modern.auth-login-page .login-form-eyebrow {
  margin-bottom: 6px;
  color: #0e7d8f;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

body.app-modern.auth-login-page .login-form-title {
  margin-bottom: 4px;
  color: #111827;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.3px;
}

body.app-modern.auth-login-page .login-form-sub {
  margin-bottom: 26px;
  color: #9ca3af;
  font-size: 13px;
}

body.app-modern.auth-login-page .login-form-notice,
body.app-modern.auth-login-page .login-form-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
}

body.app-modern.auth-login-page .login-form-notice {
  color: #0b3d2e;
  background: #d7fff0;
  border: 1px solid #7fe0c0;
}

body.app-modern.auth-login-page .login-form-error {
  color: #ef4444;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

body.app-modern.auth-login-page .login-form-error.hidden {
  display: none;
}

body.app-modern.auth-login-page .login-form-error svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

body.app-modern.auth-login-page .login-field {
  margin-bottom: 13px;
}

body.app-modern.auth-login-page .login-field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
  color: #4b5563;
  font-size: 11.5px;
  font-weight: 600;
}

body.app-modern.auth-login-page .login-input-wrap {
  position: relative;
}

body.app-modern.auth-login-page .login-input-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 15px;
  height: 15px;
  color: #aab4c8;
  transform: translateY(-50%);
  pointer-events: none;
}

body.app-modern.auth-login-page .login-input {
  width: 100%;
  height: 42px;
  margin: 0 !important;
  padding: 0 12px 0 42px !important;
  border: 1.5px solid #dde4f0;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

body.app-modern.auth-login-page .login-input:focus {
  border-color: #15a0b8;
  box-shadow: 0 0 0 3px rgba(21,160,184,.12);
}

body.app-modern.auth-login-page .login-input::placeholder {
  color: #c5cdd9;
}

body.app-modern.auth-login-page .login-input-pw {
  padding-right: 42px !important;
}

body.app-modern.auth-login-page .login-eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  padding: 4px;
  border: 0;
  background: none;
  color: #aab4c8;
  transform: translateY(-50%);
  cursor: pointer;
  transition: color .15s ease;
}

body.app-modern.auth-login-page .login-eye-btn:hover {
  color: #0e7d8f;
}

body.app-modern.auth-login-page .login-eye-btn svg {
  display: block;
  width: 15px;
  height: 15px;
}

body.app-modern.auth-login-page .login-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 10px;
}

body.app-modern.auth-login-page .login-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4b5563;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

body.app-modern.auth-login-page .login-remember input {
  width: 13px;
  height: 13px;
  accent-color: #0e7d8f;
}

body.app-modern.auth-login-page .login-forgot {
  color: #0e7d8f;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s ease;
}

body.app-modern.auth-login-page .login-forgot:hover {
  color: #2b5be0;
  text-decoration: underline;
}

body.app-modern.auth-login-page .login-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #0d8299 0%, #1a6fd4 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: .1px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(13,130,153,.30);
  transition: all .2s ease;
}

body.app-modern.auth-login-page .login-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
}

body.app-modern.auth-login-page .login-btn svg,
body.app-modern.auth-login-page .login-btn span {
  position: relative;
  z-index: 1;
}

body.app-modern.auth-login-page .login-btn svg {
  width: 15px;
  height: 15px;
}

body.app-modern.auth-login-page .login-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 26px rgba(13,130,153,.44);
}

body.app-modern.auth-login-page .login-btn:disabled {
  opacity: .7;
  cursor: default;
  transform: none;
}

body.app-modern.auth-login-page .login-btn:disabled svg {
  animation: login-spin .8s linear infinite;
}

body.app-modern.auth-login-page .login-secondary-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

body.app-modern.auth-login-page .login-auth-links {
  display: grid;
  gap: 8px;
}

body.app-modern.auth-login-page .login-auth-hint,
body.app-modern.auth-login-page .login-auth-debug {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #dde4f0;
  background: #ffffff;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.6;
}

body.app-modern.auth-login-page .login-auth-debug strong {
  display: block;
  margin-bottom: 4px;
  color: #111827;
}

body.app-modern.auth-login-page .login-auth-debug a {
  color: #0e7d8f;
  text-decoration: none;
  overflow-wrap: anywhere;
}

body.app-modern.auth-login-page .login-auth-debug a:hover {
  text-decoration: underline;
}

body.app-modern.auth-login-page .login-secondary-btn {
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid #dde4f0;
  border-radius: 8px;
  background: #ffffff;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease, background .18s ease;
}

body.app-modern.auth-login-page .login-secondary-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(21,160,184,.34);
  color: #0e7d8f;
  box-shadow: 0 8px 20px rgba(15, 35, 55, 0.08);
}

body.app-modern.auth-login-page .login-secondary-btn.is-muted {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

body.app-modern.auth-login-page .login-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: #9ca3af;
  font-size: 11px;
}

body.app-modern.auth-login-page .login-or-divider::before,
body.app-modern.auth-login-page .login-or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dde4f0;
}

body.app-modern.auth-login-page .login-stack-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

body.app-modern.auth-login-page .login-stack-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border: 1px solid #dde4f0;
  border-radius: 20px;
  background: #ffffff;
  color: #4b5563;
  font-size: 10.5px;
  font-weight: 500;
}

body.app-modern.auth-login-page .login-stack-badge .sb-php { color: #6c4bdb; }
body.app-modern.auth-login-page .login-stack-badge .sb-wa { color: #25d366; }
body.app-modern.auth-login-page .login-stack-badge .sb-ai { color: #f97316; }
body.app-modern.auth-login-page .login-stack-badge .sb-capi { color: #1877f2; }

body.app-modern.auth-login-page .login-form-footer {
  margin-top: 20px;
  color: #9ca3af;
  font-size: 11px;
  line-height: 1.75;
  text-align: center;
}

body.app-modern.auth-login-page .login-form-footer a {
  color: #0e7d8f;
  text-decoration: none;
}

body.app-modern.auth-login-page .login-form-footer a:hover {
  text-decoration: underline;
}

html.dark body.app-modern.auth-login-page {
  background: #081224;
}

html.dark body.app-modern.auth-login-page .login-shell,
html.dark body.app-modern.auth-login-page .login-visual {
  background: #081224;
}

html.dark body.app-modern.auth-login-page .login-panel {
  background: #f3f6fc;
  box-shadow: -24px 0 80px rgba(0,0,0,.34);
}

html.dark body.app-modern.auth-login-page .login-form-title,
html.dark body.app-modern.auth-login-page .login-brand-fallback,
html.dark body.app-modern.auth-login-page .login-form-logo-fallback,
html.dark body.app-modern.auth-login-page .login-input,
html.dark body.app-modern.auth-login-page .login-secondary-btn {
  color: var(--color-text);
}

html.dark body.app-modern.auth-login-page .login-form-sub,
html.dark body.app-modern.auth-login-page .login-field-label,
html.dark body.app-modern.auth-login-page .login-remember,
html.dark body.app-modern.auth-login-page .login-form-footer,
html.dark body.app-modern.auth-login-page .login-secondary-btn.is-muted {
  color: var(--color-text-muted);
}

html.dark body.app-modern.auth-login-page .login-input,
html.dark body.app-modern.auth-login-page .login-secondary-btn,
html.dark body.app-modern.auth-login-page .login-secondary-btn.is-muted,
html.dark body.app-modern.auth-login-page .login-auth-hint,
html.dark body.app-modern.auth-login-page .login-auth-debug {
  background: color-mix(in srgb, var(--color-card) 96%, transparent);
  border-color: var(--color-border);
}

html.dark body.app-modern.auth-login-page .login-auth-hint,
html.dark body.app-modern.auth-login-page .login-auth-debug {
  color: var(--color-text-muted);
}

html.dark body.app-modern.auth-login-page .login-auth-debug strong {
  color: var(--color-text);
}

html.dark body.app-modern.auth-login-page .login-auth-debug a {
  color: #58c0d0;
}

html.dark body.app-modern.auth-login-page .login-input::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 90%, transparent);
}

html.dark body.app-modern.auth-login-page .login-input:focus {
  border-color: color-mix(in srgb, var(--color-primary) 82%, #15a0b8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

html.dark body.app-modern.auth-login-page .login-or-divider::before,
html.dark body.app-modern.auth-login-page .login-or-divider::after {
  background: var(--color-border);
}

html.dark body.app-modern.auth-login-page .login-form-notice {
  color: #9ff1cf;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.28);
}

html.dark body.app-modern.auth-login-page .login-form-error {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.26);
}

html.dark body.app-modern.auth-login-page .login-forgot,
html.dark body.app-modern.auth-login-page .login-form-footer a,
html.dark body.app-modern.auth-login-page .login-secondary-btn:hover:not(:disabled) {
  color: #58c0d0;
}

html.dark body.app-modern.auth-login-page .login-hero-desc {
  color: rgba(188, 206, 230, 0.76);
}

html.dark body.app-modern.auth-login-page .login-feature {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}

html.dark body.app-modern.auth-login-page .login-feature:hover {
  background: rgba(255,255,255,.075);
}

@media (max-width: 960px) {
  body.app-modern.auth-login-page .login-shell {
    grid-template-columns: 1fr;
  }

  body.app-modern.auth-login-page .login-visual {
    display: none;
  }

  body.app-modern.auth-login-page .login-panel {
    min-height: 100vh;
    padding: 36px 24px;
    box-shadow: none;
  }

  body.app-modern.auth-login-page .login-panel-wrap {
    max-width: 100%;
  }
}

body.broadcast-unsub-page {
  margin: 0;
  min-height: 100vh;
  color: #0f172a;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  background:
    linear-gradient(135deg, rgba(248, 113, 113, 0.12), rgba(251, 146, 60, 0.12)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.55) 0px,
      rgba(255, 255, 255, 0.55) 1px,
      transparent 1px,
      transparent 24px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.5) 0px,
      rgba(255, 255, 255, 0.5) 1px,
      transparent 1px,
      transparent 24px
    ),
    #fff1f2;
}

.broadcast-unsub-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}

.broadcast-unsub-card {
  width: min(520px, 100%);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #fed7aa;
  box-shadow: 0 14px 36px rgba(127, 29, 29, 0.14);
  animation: cardFadeIn .35s ease-out;
}

.broadcast-unsub-survey-card {
  width: min(680px, 100%);
}

@keyframes cardFadeIn {
  from {
    transform: translateY(8px);
    opacity: .2;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.broadcast-unsub-card-top {
  height: 6px;
  background: linear-gradient(90deg, #fb923c 0%, #ef4444 45%, #dc2626 100%);
}

.broadcast-unsub-card-body {
  padding: 24px;
}

.broadcast-unsub-title {
  margin: 0 0 8px;
  font-size: 27px;
  line-height: 1.2;
}

.broadcast-unsub-sub {
  color: #475569;
  margin-bottom: 16px;
}

.broadcast-unsub-sub-tight {
  margin: 0 0 4px;
}

.broadcast-unsub-muted {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 16px;
}

.broadcast-unsub-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.broadcast-unsub-actions-spaced {
  margin-top: 14px;
}

.broadcast-unsub-actions-survey {
  margin-top: 20px;
}

.broadcast-unsub-btn {
  border: none;
  border-radius: 10px;
  padding: 11px 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: .16s ease;
}

.broadcast-unsub-btn-gray {
  background: #e2e8f0;
  color: #1e293b;
}

.broadcast-unsub-btn-gray:hover {
  background: #cbd5e1;
}

.broadcast-unsub-btn-danger {
  background: linear-gradient(135deg, #ea580c, #dc2626);
  color: #fff;
  box-shadow: 0 7px 18px rgba(220, 38, 38, 0.25);
}

.broadcast-unsub-btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(220, 38, 38, 0.32);
}

.broadcast-unsub-btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.broadcast-unsub-note,
.broadcast-unsub-alert,
.broadcast-unsub-error-box {
  border-radius: 10px;
  padding: 10px 12px;
}

.broadcast-unsub-note-ok,
.broadcast-unsub-alert-ok {
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.broadcast-unsub-note-warn,
.broadcast-unsub-alert,
.broadcast-unsub-error-box {
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.broadcast-unsub-alert {
  margin: 10px 0 4px;
}

.broadcast-unsub-error-box {
  margin: 12px 0 8px;
  font-size: 13px;
  display: none;
}

.broadcast-unsub-hero {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.broadcast-unsub-emoji-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  flex-shrink: 0;
}

.broadcast-unsub-question {
  margin-top: 16px;
  border: 1px solid #ffe4d6;
  border-radius: 12px;
  padding: 12px;
  background: #fffdfa;
}

.broadcast-unsub-q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.broadcast-unsub-q-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.broadcast-unsub-badge {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}

.broadcast-unsub-badge-required {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}

.broadcast-unsub-badge-optional {
  color: #334155;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.broadcast-unsub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.broadcast-unsub-chip-btn {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #9a3412;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: .16s ease-in-out;
}

.broadcast-unsub-chip-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.12);
}

.broadcast-unsub-chip-btn.active {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.broadcast-unsub-textarea,
body.broadcast-unsub-page input[type="text"] {
  width: 100%;
  border: 1px solid #f5c9ac;
  border-radius: 10px;
  padding: 10px 11px;
  font-size: 14px;
  margin-top: 2px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transition: .16s ease;
  min-height: 110px;
  resize: vertical;
  box-sizing: border-box;
}

.broadcast-unsub-textarea:focus,
body.broadcast-unsub-page input[type="text"]:focus {
  border-color: #fb923c;
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.2);
}

.broadcast-unsub-counter-row {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  font-size: 11px;
  color: #64748b;
}

@media (max-width: 640px) {
  .broadcast-unsub-card-body {
    padding: 16px;
  }

  .broadcast-unsub-title {
    font-size: 23px;
  }

  .broadcast-unsub-emoji-badge {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .broadcast-unsub-btn {
    width: 100%;
    text-align: center;
  }
}