::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #10b981; }

/* ── Background dot grid ───────────────────────────────────────── */
#app-body {
    background-image:
        radial-gradient(ellipse 70% 40% at 15% 0%, rgba(16,185,129,0.07) 0%, transparent 65%),
        radial-gradient(rgba(16,185,129,0.03) 1px, transparent 1px);
    background-size: 100% 100%, 26px 26px;
}

/* ── Control panel top-edge glow line ─────────────────────────── */
#control-panel-box {
    position: relative;
}
#control-panel-box::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16,185,129,0.5), transparent);
    border-radius: 100%;
    pointer-events: none;
}

/* ── Glow effects ──────────────────────────────────────────────── */
.glow-emerald { box-shadow: 0 0 40px -8px rgba(16,185,129,0.15), inset 0 1px 0 rgba(16,185,129,0.08); }
.glow-btn { position: relative; overflow: hidden; }
.glow-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events: none;
}
.glow-btn:hover { box-shadow: 0 0 24px rgba(16,185,129,0.4), 0 4px 12px rgba(0,0,0,0.3); }

/* ── Input focus glow ──────────────────────────────────────────── */
#control-panel-box input:focus,
#control-panel-box textarea:focus,
#control-panel-box select:focus {
    outline: none;
    border-color: rgba(16,185,129,0.55) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1), 0 0 12px rgba(16,185,129,0.07);
}

/* ── Template preset left-bar accent ──────────────────────────── */
#presets-scroller button {
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
#presets-scroller button::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: #10b981;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.2s ease;
    border-radius: 0 2px 2px 0;
}
#presets-scroller button:hover { transform: translateX(2px); }
#presets-scroller button:hover::before,
#presets-scroller button[style*="2px"] { transform: scaleY(1); }

/* ── Tab buttons ───────────────────────────────────────────────── */
#tabs-wrapper button {
    transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
    position: relative;
}

/* ── Tab panel reveal animation ────────────────────────────────── */
@keyframes tabReveal {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tab-reveal { animation: tabReveal 0.22s ease-out; }

/* ── Progress bar shimmer ─────────────────────────────────────── */
#csb-bar, #consoleProgressBar {
    background: linear-gradient(90deg, #10b981 0%, #34d399 40%, #14b8a6 60%, #10b981 100%);
    background-size: 300% 100%;
    animation: barShimmer 2.5s linear infinite;
}
@keyframes barShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── Email client chrome (preview panel) ──────────────────────── */
.email-client-chrome {
    background: #050810;
    border: 1px solid #1e293b;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.email-chrome-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
}
.email-chrome-label {
    color: #475569;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    min-width: 44px;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.08em;
}
.email-chrome-value {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.email-chrome-value strong { color: #e2e8f0; font-weight: 600; }
#preview-subject-text { color: #cbd5e1; }

/* ── Canvas frame border top remove (joins chrome) ────────────── */
.canvas-joined { border-radius: 0 0 12px 12px !important; }

/* ── Section header mono numbers ──────────────────────────────── */
h2 .text-emerald-400, h2 .text-rose-400 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

/* ── Dispatch console terminal look ───────────────────────────── */
#consoleTextOutput {
    font-family: 'JetBrains Mono', monospace !important;
    letter-spacing: -0.01em;
}
#consoleTextOutput div::before {
    content: '›';
    color: #10b981;
    margin-right: 4px;
    opacity: 0.6;
}

/* ── Campaign status card metric numbers ──────────────────────── */
#csb-total, #csb-sent, #csb-pending {
    font-family: 'JetBrains Mono', monospace;
    font-feature-settings: 'tnum';
    letter-spacing: -0.02em;
}

/* ── Card add button pulse ────────────────────────────────────── */
button[onclick="addNewProductCardRecordObject()"] {
    transition: all 0.15s ease;
}
button[onclick="addNewProductCardRecordObject()"]:hover {
    box-shadow: 0 0 12px rgba(16,185,129,0.25);
    transform: translateY(-1px);
}

/* ── Light mode dot grid ──────────────────────────────────────── */
html.light-mode #app-body {
    background-image:
        radial-gradient(ellipse 70% 40% at 15% 0%, rgba(16,185,129,0.05) 0%, transparent 65%),
        radial-gradient(rgba(16,185,129,0.06) 1px, transparent 1px) !important;
    background-size: 100% 100%, 26px 26px !important;
}
html.light-mode #control-panel-box::before {
    background: linear-gradient(90deg, transparent, rgba(16,185,129,0.35), transparent);
}
html.light-mode .email-client-chrome {
    background: #f1f5f9;
    border-color: #e2e8f0;
}
html.light-mode .email-chrome-label { color: #94a3b8; }
html.light-mode .email-chrome-value { color: #475569; }
html.light-mode #preview-subject-text { color: #1e293b; }

/* ── Light Mode Overrides ─────────────────────────────────────────────── */
html.light-mode #app-body {
    background-color: #f0f4f8 !important;
    color: #1e293b !important;
}
html.light-mode #app-header {
    background-color: rgba(255,255,255,0.9) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
}
html.light-mode #tabs-wrapper {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}
html.light-mode #control-panel-box {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 24px -4px rgba(0,0,0,0.07) !important;
}
html.light-mode #preview-panel-box {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 24px -4px rgba(0,0,0,0.07) !important;
}
html.light-mode #tuning-wrapper-box,
html.light-mode #headers-wrapper-box,
html.light-mode #dropzone-box,
html.light-mode #listMetaStatus,
html.light-mode #blacklist-summary-card,
html.light-mode #gateway-credentials-box,
html.light-mode #dispatch-summary-card,
html.light-mode #dispatchConsoleLog,
html.light-mode #licensing-footer-card,
html.light-mode #canvas-inner-bg,
html.light-mode #mock-browser-dots,
html.light-mode #campaignStatusBar {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html.light-mode #presets-scroller button {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html.light-mode input:not([type="color"]):not([type="file"]):not([type="checkbox"]),
html.light-mode textarea,
html.light-mode select {
    background-color: #f1f5f9 !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}
html.light-mode #brand-title               { color: #0f172a !important; }
html.light-mode #brand-subtitle            { color: #64748b !important; }
html.light-mode #design-title-node,
html.light-mode #audience-title-node,
html.light-mode #blacklist-title-node,
html.light-mode #dispatch-title-node       { color: #0f172a !important; }
html.light-mode #design-subtitle-node,
html.light-mode #audience-subtitle-node,
html.light-mode #blacklist-subtitle-node,
html.light-mode #dispatch-subtitle-node    { color: #64748b !important; }
html.light-mode #preview-title-node        { color: #0f172a !important; }
html.light-mode #preview-subtitle-node     { color: #64748b !important; }
html.light-mode #asset-block-title         { color: #64748b !important; }
html.light-mode #dropzone-text             { color: #1e293b !important; }
html.light-mode #licensing-author          { color: #1e293b !important; font-weight: 700; }

/* Drag-over highlight on dropzone */
#dropzone-box.drag-over {
    border-color: #10b981 !important;
    background-color: rgba(16, 185, 129, 0.05) !important;
}

/* ── Light mode: preset button titles ────────────────────────────── */
html.light-mode #tpl-grid-title,
html.light-mode #tpl-hero-title,
html.light-mode #tpl-split-title,
html.light-mode #tpl-arrivals-title,
html.light-mode #tpl-custom-title { color: #0f172a !important; }

/* ── Light mode: blacklist inner display ──────────────────────────── */
html.light-mode #blacklistCollectionDisplay {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

/* ── Light mode: dispatch metric numbers ──────────────────────────── */
html.light-mode #csb-total,
html.light-mode #finalTargetDisplay,
html.light-mode #resend-counter-badge { color: #0f172a !important; }

/* ── Light mode scrollbar ─────────────────────────────────────────── */
html.light-mode ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html.light-mode ::-webkit-scrollbar-thumb:hover { background: #10b981; }