/* ──────────────────────────────────────────────────────────────
   Cato — refined dark UI
     Single muted-violet accent on neutral graphite surfaces.
     Linear / Vercel / Stripe vibe rather than Duolingo neon.
     Sora headings, Nunito body. No multi-hue gradients, no
     loud per-tab colors, soft glows only.
   ────────────────────────────────────────────────────────────── */

:root {
    /* Tell the browser our default is dark — controls scrollbar color,
       form-control defaults, scroll-bounce area. body.light flips it. */
    color-scheme: dark;

    /* Surfaces — lighter grey graphite (not full black) per user pref */
    --bg:           #18181d;
    --bg-elev:      #1e1e25;
    --bg-card:      #23232b;
    --bg-card-2:    #2a2a33;

    /* Text */
    --fg:           #f5f5f7;
    --fg-muted:     #a3a3ac;
    --fg-dim:       #6b6b75;

    /* Borders — quieter than before so cards float subtly */
    --border:        rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.12);

    /* Brand — pastel purple accent. Single hue, no gradient flourish. */
    --c-blue:    #a78bfa;
    --c-purple:  #a78bfa;
    --c-pink:    #a78bfa;
    --accent:        #a78bfa;   /* Tailwind violet-400, refined pastel purple */
    --accent-hover:  #b8a0fb;
    --accent-soft:   rgba(167, 139, 250, 0.14);
    --accent-strong: rgba(167, 139, 250, 0.32);
    --gradient:      linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
    --gradient-soft: linear-gradient(135deg, rgba(167, 139, 250, 0.10) 0%, rgba(196, 181, 253, 0.10) 100%);
    --glow:      0 0 18px rgba(167, 139, 250, 0.20);
    --glow-soft: 0 0 8px  rgba(167, 139, 250, 0.10);

    /* Per-tab colors retired. Old tokens aliased to the single accent so any
       remaining references render in-brand instead of looking like a
       rainbow nav. */
    --tab-sky-1: var(--c-purple);     --tab-sky-2: var(--c-purple);     --tab-sky-shadow: rgba(0,0,0,0.3);
    --tab-purple-1: var(--c-purple);  --tab-purple-2: var(--c-purple);  --tab-purple-shadow: rgba(0,0,0,0.3);
    --tab-pink-1: var(--c-purple);    --tab-pink-2: var(--c-purple);    --tab-pink-shadow: rgba(0,0,0,0.3);
    --tab-orange-1: var(--c-purple);  --tab-orange-2: var(--c-purple);  --tab-orange-shadow: rgba(0,0,0,0.3);
    --tab-emerald-1: var(--c-purple); --tab-emerald-2: var(--c-purple); --tab-emerald-shadow: rgba(0,0,0,0.3);
    --tab-amber-1: var(--c-purple);   --tab-amber-2: var(--c-purple);   --tab-amber-shadow: rgba(0,0,0,0.3);
    --tab-cyan-1: var(--c-purple);    --tab-cyan-2: var(--c-purple);    --tab-cyan-shadow: rgba(0,0,0,0.3);
    --tab-violet-1: var(--c-purple);  --tab-violet-2: var(--c-purple);  --tab-violet-shadow: rgba(0,0,0,0.3);

    /* Semantic — primary is the same pastel purple as the accent */
    --primary:        #a78bfa;
    --primary-hover:  #b8a0fb;
    --primary-light:  rgba(167, 139, 250, 0.10);
    --success:        #4ade80;
    --success-bg:     rgba(74, 222, 128, 0.08);
    --error:          #ef6e7e;
    --error-bg:       rgba(239, 110, 126, 0.08);
    --warning:        #f59e0b;
    --warning-bg:     rgba(245, 158, 11, 0.08);
    --info:           #6e7eed;
    --info-bg:        rgba(110, 126, 237, 0.08);

    /* Shape */
    --radius:        14px;
    --radius-lg:     20px;
    --radius-pill:   100px;
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.4);
    --shadow:        0 4px 20px rgba(0,0,0,0.5);
    --shadow-md:     0 10px 40px rgba(0,0,0,0.6);

    /* Type */
    --font-body:     'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading:  'Sora', 'Nunito', -apple-system, sans-serif;
}

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

/* html bg matches body so the scroll-bounce / elastic-scroll area at
   the top/bottom of the page doesn't show the default browser color
   (which renders as black on macOS in light mode if color-scheme isn't
   set right). Safari specifically reads the html element's bg AND
   color-scheme for the overscroll area, so we set both explicitly.
   _applyTheme() in app.js mirrors the .light class from body onto html
   AND sets style.colorScheme on document.documentElement. */
html             { background-color: #18181d; color-scheme: dark; }
html.light       { background-color: #f8f7fc; color-scheme: light; }
html.light body  { background-color: #f8f7fc; }

body {
    font-family: var(--font-body);
    font-weight: 400;
    background: var(--bg);   /* outer frame — shows as a thin gap around the canvas */
    color: var(--fg);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--fg);
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

code {
    font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
    font-size: 0.85em;
    background: rgba(167,139,250,0.14);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    color: var(--c-purple);
    font-weight: 700;
}

/* ──────────── Top nav ──────────── */
/* ──── Vertical left sidebar nav (Larven-style) ──── */
.sidenav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 72px;
    background: var(--bg);
    /* No right border — the canvas's own border to the right of the
       sidebar provides the visual separation. A second line here would
       create a doubled-line look. */
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.4rem;
    gap: 0.3rem;
}
.sidenav-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0 0.75rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--fg-muted);
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}
.sidenav-logo i { display: none; }
.sidenav-logo span { display: block; }

.sidenav-items {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    overflow-y: auto;
}
.sidenav-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding-top: 0.5rem;
    /* No border-top — the user wants a clean uninterrupted sidebar. */
}

/* Icon-over-label nav items. Compact, no border. Active gets a subtle
   blue-tinted tile + blue icon — matches the Larven reference. */
.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 0.3rem;
    border-radius: 12px;
    color: var(--fg-dim);
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    border: none;
    transition: background 0.15s, color 0.15s;
    text-align: center;
    line-height: 1.15;
}
.nav-link i {
    font-size: 1.05rem;
    color: inherit;
    transition: color 0.15s;
}
.nav-link .nav-label {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.nav-link:hover {
    color: var(--fg-muted);
    background: rgba(255, 255, 255, 0.025);
}
.nav-link.active {
    background: var(--accent-soft);
    color: var(--fg);
}
.nav-link.active i {
    color: var(--accent);
}

/* Sidebar-foot server status pill */
.nav-status-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.6rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--fg-muted);
    padding: 0.45rem 0.5rem;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.15s;
}
.nav-status-card:hover { border-color: var(--border-strong); }
.nav-status-card span { overflow: hidden; text-overflow: ellipsis; }

.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
}
.status-dot.connected   { background: var(--success); color: var(--success); }
.status-dot.disconnected{ background: var(--error);   color: var(--error); }
.status-dot.warning     { background: var(--warning); color: var(--warning); }
.status-dot.loading     { background: var(--c-blue);  color: var(--c-blue);
                          animation: dotPulse 1s infinite; }
@keyframes dotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.dark-toggle {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--fg-muted);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dark-toggle:hover { border-color: var(--border-strong); color: var(--fg); }

/* ──────────── Layout (Larven-style framed canvas) ──────────── */
/* body background is the OUTER frame. .page-container is the canvas:
   elevated surface, rounded corners, subtle border. The outer body bg
   shows as a thin gap around the canvas, making the canvas "pop" out
   of the page (matches the Larven reference screenshots). */
.page-container {
    position: relative;
    min-height: calc(100vh - 16px);
    margin: 8px 8px 8px 80px;          /* sidebar (72) + 8px gap on the left */
    /* Dark mode: same bg as body/sidebar — only the rounded border defines
       the canvas. Light mode override below adds the subtle "pop". */
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    /* No overflow:hidden — would clip the topbar popovers that open downward
       below the topbar (e.g. when content is short and the popover extends
       past the canvas bottom). The rounded corners still clip cleanly
       because nothing else is positioned outside the canvas box. */
}
/* Light mode: elevate the canvas to white so it pops out of the light-grey
   body bg. Subtler border since the bg contrast does the heavy lifting. */
body.light .page-container {
    background: var(--bg-elev);
    border-color: var(--border-strong);
}
.page { display: none; }
.page.active { display: block; }
.container {
    width: 100%; max-width: 1080px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}
.container.narrow { max-width: 800px; }

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.page-title {
    font-family: var(--font-heading);
    font-size: 1.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--gradient);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.1;
}
.page-subtitle {
    color: var(--fg-dim);
    font-size: 0.95rem;
    margin-top: 0.4rem;
    font-weight: 500;
}

/* ──────────── Eyebrow tag (dark fill + gradient border) ──────────── */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem;
    background: var(--bg-elev);
    color: var(--fg-muted);
    font-size: 0.7rem;
    font-weight: 800;
    font-family: var(--font-heading);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    position: relative;
    margin-bottom: 0.85rem;
}
.eyebrow::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: var(--gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* ──────────── Section cards ──────────── */
.section-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color 0.18s;
}
.section-card:hover {
    border-color: var(--border-strong);
}

.section-header {
    padding: 1.1rem 1.4rem 0.7rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.section-header h2,
.section-header h3 {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.005em;
    margin: 0;
}
/* Subtitle pattern: small dim line directly under the section heading. */
.section-header > h2 + .section-sub,
.section-header > h3 + .section-sub {
    display: block;
    margin-top: 0.2rem;
    color: var(--fg-dim);
    font-size: 0.82rem;
    font-weight: 400;
}
.header-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.section-body { padding: 0.4rem 1.4rem 1.3rem; }

/* ──────────── Buttons (refined, Larven-style) ──────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.83rem;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}
.btn-primary:active:not(:disabled) {
    background: var(--accent);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--fg);
}
.btn-outline:hover {
    border-color: var(--accent);
    color: var(--fg);
    background: var(--accent-soft);
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid rgba(239, 110, 126, 0.40);
    color: var(--error);
}
.btn-outline-danger:hover {
    background: var(--error-bg);
    border-color: var(--error);
}

.btn-outline-success {
    background: transparent;
    border: 1px solid rgba(74, 222, 128, 0.40);
    color: var(--success);
}
.btn-outline-success:hover {
    background: var(--success-bg);
    border-color: var(--success);
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    padding: 0.45rem;
    font-family: inherit;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.btn-link:hover { color: var(--accent-hover); text-decoration: underline; }

.btn-icon {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--fg-muted);
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
}
.btn-icon:hover { border-color: var(--border-strong); color: var(--fg); }

.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.78rem; }
.btn-lg { padding: 0.7rem 1.25rem; font-size: 0.9rem; }
.full-width { width: 100%; justify-content: center; }

/* ──────────── Forms ──────────── */
.input, .select, .textarea {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-size: 0.88rem;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--fg);
    background: var(--bg-elev);
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-dim); opacity: 0.75; font-weight: 400; }
.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a3ac' 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");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.4rem;
    cursor: pointer;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.form-group {
    display: flex; flex-direction: column;
    gap: 0.45rem; margin-bottom: 1.1rem;
}
.form-group label {
    font-size: 0.7rem;
    font-weight: 600;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-dim);
}
.inline-fields { display: flex; gap: 1rem; flex-wrap: wrap; }
.inline-fields .form-group { flex: 1; min-width: 0; }
.help-text { font-size: 0.8rem; color: var(--fg-dim); font-weight: 500; }

/* ──────────── Stub banner ──────────── */
.stub-banner {
    background: linear-gradient(135deg, rgba(91,141,239,0.12), rgba(167,139,250,0.12));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
    color: var(--fg-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.stub-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: var(--gradient);
}
.stub-banner strong { color: var(--fg); font-weight: 800; }

/* ──────────── Tables ──────────── */
.table-wrapper { overflow-x: auto; max-width: 100%; }
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 800;
    font-size: 0.7rem;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-dim);
    border-bottom: 1px solid var(--border);
    background: rgba(167,139,250,0.04);
}
.table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(167,139,250,0.08);
    color: var(--fg-muted);
}
.empty-cell {
    text-align: center;
    color: var(--fg-dim);
    padding: 2.5rem !important;
}

/* ──────────── Alerts ──────────── */
.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    display: flex;
    gap: 0.85rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
    line-height: 1.6;
    border: 2px solid;
}
.alert i { margin-top: 0.15rem; flex-shrink: 0; font-size: 1rem; }
.alert-info {
    background: var(--info-bg);
    color: var(--fg);
    border-color: rgba(91,141,239,0.45);
}
.alert-info i { color: var(--info); }
.alert-success {
    background: var(--success-bg);
    color: var(--fg);
    border-color: rgba(16,217,158,0.45);
}
.alert-success i { color: var(--success); }
.alert-error {
    background: var(--error-bg);
    color: var(--fg);
    border-color: rgba(255,107,138,0.45);
}
.alert-error i { color: var(--error); }
.alert ol { margin-left: 1.2rem; margin-top: 0.5rem; }
.alert a { color: var(--primary); font-weight: 700; }

/* ──────────── Empty state ──────────── */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--fg-dim);
}
.empty-state i {
    font-size: 2.75rem;
    margin-bottom: 0.85rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.75;
}
.empty-state p { font-size: 0.92rem; font-weight: 600; }

/* ──────────── Modals ──────────── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(5, 2, 8, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), var(--glow);
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
}
.modal-header {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-header h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
}
.modal-close {
    background: none; border: none;
    font-size: 1.5rem; cursor: pointer;
    color: var(--fg-dim);
    line-height: 1;
}
.modal-close:hover { color: var(--fg); }
.modal-body { padding: 1.5rem; font-size: 0.9rem; color: var(--fg-muted); }
.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.65rem;
    justify-content: flex-end;
}

/* ──────────── Toasts ──────────── */
.toast-container {
    position: fixed;
    top: 5rem;
    right: 1.25rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.toast {
    padding: 0.95rem 1.2rem;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 2px solid var(--border-strong);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--fg);
    font-weight: 700;
    animation: slideIn 0.3s ease;
    border-left: 4px solid var(--primary);
    max-width: 380px;
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--error); }
.toast.warning { border-left-color: var(--warning); }
.toast i { color: var(--primary); }
.toast.success i { color: var(--success); }
.toast.error i   { color: var(--error); }
.toast.warning i { color: var(--warning); }
@keyframes slideIn {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* ──────────── Password toggle / status pill ──────────── */
.pwd-toggle {
    cursor: pointer;
    color: var(--fg-dim);
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    border-radius: var(--radius);
    background: var(--bg-elev);
    border: 2px solid var(--border);
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}
.pwd-toggle:hover { color: var(--fg); border-color: var(--border-strong); }

.status-pill {
    display: inline-block;
    margin-left: 0.45rem;
    font-size: 0.66rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    background: rgba(167,139,250,0.14);
    color: var(--fg-dim);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--font-heading);
}
.status-pill.ok {
    background: var(--success-bg);
    color: var(--success);
}

/* ──────────── Hero ──────────── */
.hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
}
.hero h1 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.05;
    background: var(--gradient);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.65rem;
    letter-spacing: -0.025em;
    animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.hero p {
    color: var(--fg-muted);
    font-size: 1.08rem;
    font-weight: 500;
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.55;
}

/* ──────────── Stat tiles (gradient-glow card grid, with colored top accents) ──────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.95rem;
    margin-bottom: 1.75rem;
}
.stat-tile {
    background: linear-gradient(180deg, rgba(26,15,46,0.75), rgba(17,8,33,0.75));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.15s;
    position: relative;
    overflow: hidden;
}
.stat-tile::before {
    /* Colored top accent line, cycling through brand colors */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gradient);
    opacity: 0.85;
}
.stat-tile:nth-child(1)::before { background: linear-gradient(90deg, var(--tab-sky-1),     var(--tab-sky-2)); }
.stat-tile:nth-child(2)::before { background: linear-gradient(90deg, var(--tab-purple-1),  var(--tab-purple-2)); }
.stat-tile:nth-child(3)::before { background: linear-gradient(90deg, var(--tab-pink-1),    var(--tab-pink-2)); }
.stat-tile:nth-child(4)::before { background: linear-gradient(90deg, var(--tab-emerald-1), var(--tab-emerald-2)); }
.stat-tile:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.stat-tile .label {
    font-size: 0.68rem;
    font-weight: 800;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-dim);
    margin-bottom: 0.4rem;
}
.stat-tile .value {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.025em;
}
.stat-tile .delta {
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 0.3rem;
    color: var(--fg-dim);
}
.stat-tile .delta.up   { color: var(--success); }
.stat-tile .delta.down { color: var(--error); }

/* ──────────── Embedded mode (inside iframe in host app) ────────────
   Activated by ?embedded=1. Hides the sidebar entirely — the host app
   provides its own chrome and we don't want two side panels. */
body.embedded .sidenav { display: none !important; }
body.embedded .page-container { min-height: 0; margin: 0; border-radius: 0; border: none; }
body.embedded .container { padding-top: 1.5rem; }
body.embedded .hero { padding-top: 1rem; padding-bottom: 1rem; }
body.embedded .hero h1 { font-size: 2.4rem; }
body.embedded {
    background-image: radial-gradient(ellipse 60% 40% at 50% 110%, rgba(167,139,250,0.10), transparent 60%);
}

/* ──────────── Light mode (off by default) ──────────── */
body.light {
    /* Tell browser the scope is now light — fixes scrollbar / scroll-bounce
       artifacts that were rendering with the dark color-scheme default. */
    color-scheme: light;
    /* Surfaces — soft warm white, gentle violet wash */
    --bg:        #f8f7fc;
    --bg-elev:   #ffffff;
    --bg-card:   #ffffff;
    --bg-card-2: #f4f1fb;
    --fg:        #1a1230;
    --fg-muted:  #4b3e6b;
    --fg-dim:    #7a6b9a;
    --border:        rgba(26, 18, 48, 0.08);
    --border-strong: rgba(26, 18, 48, 0.16);
    /* Same pastel-purple accent — works well on both surfaces */
    background-image: none;
}

/* Light-mode darker variants of the semantic pill text colors.
   Pastel text (e.g. #86efac) is unreadable on white — swap to the
   darker shade for each status family. */
body.light .mb-status-pill.mb-pill-info    { background: rgba(99, 102, 241, 0.10); color: #4f46e5; }
body.light .mb-status-pill.mb-pill-warn    { background: rgba(245, 158, 11, 0.10); color: #b45309; }
body.light .mb-status-pill.mb-pill-danger  { background: rgba(239, 68, 68, 0.10);  color: #b91c1c; }

body.light .mb-status-badge.mb-status-executed { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.30); color: #166534; }
body.light .mb-status-badge.mb-status-dry      { background: rgba(99, 102, 241, 0.10); border-color: rgba(99, 102, 241, 0.30); color: #4f46e5; }
body.light .mb-status-badge.mb-status-pending  { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); color: #b45309; }
body.light .mb-status-badge.mb-status-failed   { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.30); color: #b91c1c; }

body.light .mb-conf-pill.mb-conf-high   { background: rgba(34, 197, 94, 0.10); color: #166534; border-color: rgba(34, 197, 94, 0.30); }
body.light .mb-conf-pill.mb-conf-medium { background: rgba(245, 158, 11, 0.10); color: #b45309; border-color: rgba(245, 158, 11, 0.30); }
body.light .mb-conf-pill.mb-conf-low    { background: rgba(239, 68, 68, 0.10); color: #b91c1c; border-color: rgba(239, 68, 68, 0.30); }

body.light .mb-mp-conf.high   { background: rgba(34, 197, 94, 0.10); color: #166534; }
body.light .mb-mp-conf.medium { background: rgba(245, 158, 11, 0.10); color: #b45309; }
body.light .mb-mp-conf.low    { background: rgba(239, 68, 68, 0.10); color: #b91c1c; }

body.light .mb-action-badge.mb-action-pause     { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.30); color: #b91c1c; }
body.light .mb-action-badge.mb-action-scale     { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.30); color: #166534; }
body.light .mb-action-badge.mb-action-downscale { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); color: #b45309; }
body.light .mb-target-tag                       { background: rgba(167, 139, 250, 0.14); color: #6d28d9; border-color: rgba(167, 139, 250, 0.35); }

/* Light-mode hover/elevation surfaces use a tiny dark tint so they
   show against white instead of disappearing. */
body.light .nav-link:hover                      { background: rgba(26, 18, 48, 0.04); }
body.light .perf-row-data.depth-1               { background: rgba(26, 18, 48, 0.02); }
body.light .perf-row-data.depth-2               { background: rgba(26, 18, 48, 0.04); }
body.light .mb-log-table tbody tr:hover         { background: rgba(26, 18, 48, 0.025); }
body.light .settings-subnav-item:hover          { background: rgba(26, 18, 48, 0.04); }

/* Diagnostic block: needs darker red text on white */
body.light .mb-diag                             { background: rgba(239, 68, 68, 0.05); border-color: rgba(239, 68, 68, 0.30); }
body.light .mb-diag-head                        { color: #b91c1c; }

/* Stat tiles in uploader: original had gradient top-borders using retired tab
   tokens, which now alias to the single accent. Restate in light mode for
   contrast since the original gradient is barely visible on white. */
body.light .stat-tile::before                   { opacity: 0.7; }
body.light .stat-tile                           { background: var(--bg-card); }

/* ──────────── Responsive ──────────── */
@media (max-width: 720px) {
    /* Narrow screens: collapse sidebar to a thin icon-only strip. Labels
       hide but icons stay so the nav remains usable. */
    .sidenav { width: 56px; padding: 0.6rem 0.3rem; }
    .sidenav-logo span { display: none; }
    .nav-link .nav-label { display: none; }
    .nav-link { padding: 0.55rem 0.25rem; }
    .nav-status-card span { display: none; }
    .page-container { margin: 4px 4px 4px 60px; border-radius: 12px; }
    .container { padding: 1.25rem 1rem 2rem; }
    .inline-fields { flex-direction: column; }
    .page-title { font-size: 1.55rem; }
    .hero h1 { font-size: 2rem; }
    body.embedded .hero h1 { font-size: 1.75rem; }
}

/* ──────────── Supabase Auth overlay ──────────── */
body.auth-pending .sidenav,
body.auth-pending .topbar,
body.auth-pending .page-container,
body.unauthenticated .sidenav,
body.unauthenticated .topbar,
body.unauthenticated .page-container { display: none; }

.auth-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    z-index: 10000;
    padding: 1.5rem;
}
.auth-overlay.hidden { display: none; }
.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--glow-soft);
    padding: 2.25rem 2rem;
    border-radius: 16px;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.auth-card h1 {
    text-align: center;
    margin: 0;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.auth-subtitle {
    text-align: center;
    margin: 0 0 0.5rem;
    color: var(--fg-dim);
    font-size: 0.875rem;
}
.auth-card input {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--fg);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s;
}
.auth-card input:focus { border-color: var(--border-strong); }
.auth-card button {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
    font-family: inherit;
    transition: opacity 0.15s, transform 0.05s;
}
.auth-card button:hover { opacity: 0.92; }
.auth-card button:active { transform: scale(0.98); }
.auth-card button:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-card button.auth-primary {
    background: var(--gradient);
    color: var(--fg);
    margin-top: 0.5rem;
}
.auth-card button.auth-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-muted);
}
.auth-error {
    color: #ff8a8a;
    font-size: 0.85rem;
    text-align: center;
    margin: 0.25rem 0 0;
}
.auth-error.hidden { display: none; }
.auth-legal {
    color: var(--fg-dim);
    font-size: 0.78rem;
    text-align: center;
    margin: 0.85rem 0 0;
    line-height: 1.5;
}
.auth-legal a { color: var(--fg-muted); text-decoration: underline; }
.auth-legal a:hover { color: var(--fg); }

/* ──────────── Welcome / onboarding banner ──────────── */
.welcome-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: 1.25rem auto 0;
    max-width: 1200px;
    background: var(--gradient-soft);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: var(--glow-soft);
    position: relative;
}
.welcome-banner .welcome-icon {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient);
    border-radius: 10px;
    color: var(--fg);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.welcome-banner .welcome-text { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.welcome-banner .welcome-text strong { color: var(--fg); font-family: 'Sora', sans-serif; font-weight: 700; }
.welcome-banner .welcome-text span { color: var(--fg-muted); font-size: 0.88rem; }
.welcome-banner .welcome-dismiss {
    position: absolute;
    top: 0.5rem; right: 0.65rem;
    background: transparent; border: none;
    color: var(--fg-dim);
    font-size: 1.3rem; line-height: 1; cursor: pointer;
    padding: 0.2rem 0.4rem;
}
.welcome-banner .welcome-dismiss:hover { color: var(--fg); }
@media (max-width: 600px) {
    .welcome-banner { flex-wrap: wrap; }
    .welcome-banner .btn { width: 100%; }

    /* Topnav: scrollable horizontal strip on phones so tabs don't wrap awkwardly */
    .topnav { padding: 0.5rem 0.75rem; }
    .topnav-center { overflow-x: auto; flex-wrap: nowrap; gap: 2px; padding: 4px 0; -webkit-overflow-scrolling: touch; }
    .topnav-center::-webkit-scrollbar { display: none; }
    .nav-link { white-space: nowrap; flex-shrink: 0; }

    /* Page headers: stack the date toggle below the title */
    .page-header { flex-direction: column !important; align-items: flex-start !important; }
    .date-toggle { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .date-toggle button { flex-shrink: 0; }

    /* KPI grid: 2 columns on phone (was auto-fit minmax 170 which gave 1) */
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .kpi-tile { padding: 0.85rem; }
    .kpi-value { font-size: 1.2rem; }

    /* Dashboard top performers / needs attention: stack */
    .dash-row { grid-template-columns: 1fr; }

    /* Performance table: keep horizontal scroll but reduce default font size */
    .perf-table { font-size: 0.78rem; }
    .perf-table th, .perf-table td { padding: 0.5rem 0.55rem; }

    /* Modals: full-width on small screens, less padding */
    .modal-overlay { padding: 0.5rem; }
    .modal-card { max-width: 100%; max-height: 92vh; border-radius: 12px; }
    .modal-head, .modal-body, .modal-foot { padding-left: 1rem; padding-right: 1rem; }

    /* Adset config grid: single column instead of auto-fit */
    .adset-config-grid { grid-template-columns: 1fr; gap: 0.7rem; }

    /* Drive ads grid: two columns instead of auto-fill 200 */
    .drive-ads { grid-template-columns: repeat(2, 1fr); }

    /* Settings + legal containers: tighter padding */
    .container.narrow, .legal-container { padding: 1.5rem 1rem 4rem; }

    /* Launch footer: stack summary above button */
    .launch-footer { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.85rem 1rem; }
    .launch-footer .btn { width: 100%; }

    /* Drive scan tree: tighter padding */
    .drive-campaign-head, .drive-adset-head { padding: 0.6rem 0.85rem; }
    .drive-adsets { padding-left: 1rem; }

    /* Tooltip: prevent overflow off-screen on tiny viewports */
    .help-tip[data-tip]:hover::after { width: 180px; max-width: 90vw; }
}

/* ──────────── Meta connection card ──────────── */
.conn-status {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.45;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    transition: background 0.2s, border-color 0.2s;
}
.conn-status i { font-size: 1.1rem; margin-top: 0.1rem; }
.conn-status .conn-status-text { flex: 1; }
.conn-status .conn-meta {
    color: var(--fg-dim);
    font-size: 0.82rem;
    margin-top: 0.2rem;
}
.conn-status.pending { color: var(--fg-muted); }
.conn-status.disconnected {
    color: var(--fg-muted);
    background: var(--bg-elev);
    border-color: var(--border);
}
.conn-status.connected {
    color: var(--success);
    background: var(--success-bg);
    border-color: rgba(16, 217, 158, 0.35);
}
.conn-status.error {
    color: #ff8a8a;
    background: rgba(255, 138, 138, 0.06);
    border-color: rgba(255, 138, 138, 0.32);
}

.setup-help {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-elev);
}
.setup-help summary {
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    color: var(--fg-muted);
    font-size: 0.88rem;
    user-select: none;
    list-style: none;
}
.setup-help summary::-webkit-details-marker { display: none; }
.setup-help summary i { margin-right: 0.45rem; opacity: 0.8; }
.setup-help[open] summary { border-bottom: 1px solid var(--border); }
.setup-help ol {
    padding: 0.85rem 1.25rem 1rem 2.25rem;
    margin: 0;
    color: var(--fg-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}
.setup-help ol li { margin-bottom: 0.4rem; }
.setup-help a { color: var(--primary); }

.meta-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.btn-lg {
    padding: 0.7rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 700;
}
.btn[disabled],
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn .fa-spinner { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ──────────── Date toggle (Dashboard / Performance) ──────────── */
.date-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    flex-wrap: wrap;
}
.date-toggle button {
    background: transparent;
    border: none;
    color: var(--fg-muted);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.8rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, color 0.12s;
}
.date-toggle button:hover { color: var(--fg); background: var(--bg-card); }
.date-toggle button.active {
    background: var(--gradient);
    color: var(--fg);
    box-shadow: var(--glow-soft);
}

/* ──────────── KPI grid (Dashboard) ──────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.85rem;
    margin: 1.5rem 0 1.75rem;
}
.kpi-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    transition: border-color 0.15s, transform 0.05s;
}
.kpi-tile:hover { border-color: var(--border-strong); }
.kpi-tile.accent {
    background: var(--gradient-soft);
    border-color: var(--border-strong);
}
.kpi-label {
    color: var(--fg-dim);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}
.kpi-value {
    color: var(--fg);
    font-family: 'Sora', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    word-break: break-word;
}
.kpi-tile.accent .kpi-value {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ──────────── Top performers / needs attention rows ──────────── */
.dash-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1rem;
}
.section-meta {
    color: var(--fg-dim);
    font-size: 0.8rem;
    margin-left: auto;
}
.perf-list { display: flex; flex-direction: column; }
.perf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}
.perf-row:last-child { border-bottom: none; }
.perf-row.muted {
    color: var(--fg-dim);
    justify-content: center;
    text-align: center;
    font-style: italic;
    padding: 1.5rem;
}
.perf-row-name {
    color: var(--fg);
    font-weight: 600;
    flex: 1 1 240px;
    min-width: 0;
    /* Allow up to 2 lines of wrapping before clamping with ellipsis — long
       campaign / adset names stay readable instead of truncating after 30 chars. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    line-height: 1.35;
}
.perf-row-stats {
    display: flex;
    gap: 0.9rem;
    flex-shrink: 0;
    color: var(--fg-muted);
    font-size: 0.82rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.perf-row-stats b { color: var(--fg); }
.perf-roas { font-variant-numeric: tabular-nums; }
.perf-roas.good { color: var(--success); }
.perf-roas.bad  { color: var(--error); }

/* Needs-attention adset cards (vertical layout: name → reasons → stats → actions) */
.att-card {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.att-card:last-child { border-bottom: none; }
.att-card.muted {
    color: var(--fg-dim);
    text-align: center;
    padding: 1.5rem 1rem;
    font-style: italic;
}

.att-card-name {
    color: var(--fg);
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.att-card-parent {
    color: var(--fg-dim);
    font-size: 0.82rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.att-card-reasons {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.1rem;
}
.att-reason {
    font-size: 0.72rem;
    color: var(--error);
    background: var(--error-bg);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(239, 110, 126, 0.25);
    font-weight: 500;
}

.att-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-top: 0.2rem;
}
.att-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.att-stat-label {
    font-size: 0.68rem;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.att-stat-value {
    font-family: 'Sora', sans-serif;
    color: var(--fg);
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.att-stat-value.bad { color: var(--error); }
.att-stat-value.good { color: var(--success); }
.att-reason.good {
    color: var(--success);
    background: var(--success-bg);
    border-color: rgba(74, 222, 128, 0.25);
}
.btn-att-good { color: var(--success); border-color: rgba(74, 222, 128, 0.40); }
.btn-att-good:hover { color: var(--success); border-color: var(--success); background: var(--success-bg); }

.att-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
}
.att-card-actions > * { flex: 0 0 auto; }
@media (max-width: 600px) {
    .att-card-stats { grid-template-columns: repeat(2, 1fr); }
    .att-card-actions { flex-direction: column; }
    .att-card-actions > * { width: 100%; }
    .att-card-actions .att-downscale { width: 100%; }
    .att-card-actions .btn-att { width: 100%; justify-content: center; }
}
.btn-att {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--fg-muted);
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-att:hover { background: var(--bg-card); color: var(--fg); border-color: var(--border-strong); }
.btn-att:disabled { opacity: 0.5; cursor: wait; }
.att-pause:hover { color: var(--warning); border-color: rgba(245, 158, 11, 0.4); }
.att-downscale,
.att-upscale {
    position: relative;
    display: inline-block;
}
.att-downscale-menu {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 0.3rem;
    min-width: 240px;
    max-width: calc(100vw - 16px);
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.att-downscale-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--fg-muted);
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
}
.att-downscale-menu button:hover { background: var(--bg-elev); color: var(--fg); }
@media (max-width: 600px) {
    .att-actions { width: 100%; justify-content: flex-end; margin-top: 0.4rem; }
}

/* ──────────── Performance columns chooser ──────────── */
.perf-cols-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 0.5rem;
    min-width: 220px;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    max-height: 60vh;
    overflow-y: auto;
}
.perf-cols-menu label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    color: var(--fg-muted);
    font-size: 0.85rem;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.perf-cols-menu label:hover { background: var(--bg-elev); color: var(--fg); }
.perf-cols-menu input[type="checkbox"] { margin: 0; cursor: pointer; }
.perf-cols-menu .perf-cols-actions {
    display: flex;
    gap: 0.35rem;
    padding: 0.35rem 0.2rem 0.2rem;
    border-top: 1px solid var(--border);
    margin-top: 0.35rem;
}
.perf-cols-menu .perf-cols-actions button {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-muted);
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
}
.perf-cols-menu .perf-cols-actions button:hover { color: var(--fg); border-color: var(--border-strong); }

/* ──────────── Performance filters + table ──────────── */
.perf-filters {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.filter-group { display: flex; flex-direction: column; gap: 0.35rem; }
.filter-group label {
    color: var(--fg-dim);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.filter-group select {
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--fg);
    font-family: inherit;
    font-size: 0.9rem;
    min-width: 130px;
}
.perf-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}
.perf-table {
    /* Critical: `table-layout: fixed` is what makes the per-column widths
       set in JS actually take effect. With the default `auto` layout, browsers
       treat <th width> as a hint and may grow columns to fit content,
       defeating the resize handle entirely. */
    table-layout: fixed;
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.perf-table th, .perf-table td {
    padding: 0.65rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Name column: allow wrapping to 2 lines so it doesn't fight the user's
   chosen width. Other columns stay nowrap (numbers shouldn't wrap). The
   line-clamp goes on the inner .perf-name-text span — `display: -webkit-box`
   would break <td> table-cell layout if applied to the cell itself. */
.perf-table th[data-sort="name"],
.perf-table tbody td:first-child {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    vertical-align: middle;
}
.perf-name-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}
.perf-table thead th {
    color: var(--fg-dim);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
    background: var(--bg-elev);
    /* `relative` is required for the absolutely-positioned resize handle on
       the right edge. It also doubles as a positioning context for sticky
       behavior of the header background. */
    position: relative;
}
.perf-table thead th .th-label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    vertical-align: middle;
}
.col-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 12px;
    cursor: col-resize;
    z-index: 5;
    /* Always visible so users find it without hunting. A 2px-wide vertical bar
       on the right edge of every column header. Hover / dragging amplifies it. */
    background:
        linear-gradient(to right, transparent calc(100% - 2px), var(--border-strong) calc(100% - 2px));
    transition: background 0.12s, opacity 0.12s;
}
.col-resizer:hover {
    background:
        linear-gradient(to right, transparent calc(100% - 4px), var(--c-purple) calc(100% - 4px));
}
.col-resizer.dragging {
    background: var(--c-purple);
    opacity: 0.6;
}
/* Remove the pointer cursor on the th itself when hovering the resize area;
   the resizer's `cursor: col-resize` wins because it's on top. */
body.col-resizing { cursor: col-resize !important; user-select: none !important; }
body.col-resizing * { cursor: col-resize !important; }

/* ──────────── Source tabs (Uploader: Drive vs Manual) ──────────── */
.source-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 1.25rem;
    width: fit-content;
}
.source-tab {
    background: transparent;
    border: none;
    color: var(--fg-muted);
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.12s, color 0.12s;
}
.source-tab:hover { color: var(--fg); }
.source-tab.active {
    background: var(--accent-soft);
    color: var(--fg);
    box-shadow: none;
}
.source-tab.active i { color: var(--accent); }

/* ──────────── Manual upload: per-adset cards ──────────── */
.manual-adset {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-elev);
    margin-bottom: 0.85rem;
    overflow: hidden;
}
.manual-adset .ma-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.manual-adset .ma-head input.ma-name {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px dashed transparent;
    color: var(--fg);
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.2rem 0.4rem;
    outline: none;
    transition: border-color 0.12s, background 0.12s;
}
.manual-adset .ma-head input.ma-name:focus,
.manual-adset .ma-head input.ma-name:hover {
    border-bottom-color: var(--border-strong);
    background: var(--bg-elev);
}
.manual-adset .ma-remove {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-dim);
    width: 30px; height: 30px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}
.manual-adset .ma-remove:hover { color: var(--error); border-color: rgba(239,110,126,0.4); }
.manual-adset .ma-body { padding: 1rem 1.1rem; }

/* Drag-drop file area */
.dropzone {
    border: 2px dashed var(--border-strong);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--fg-muted);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.dropzone:hover, .dropzone.dragover {
    background: var(--gradient-soft);
    border-color: var(--c-purple);
    color: var(--fg);
}
.dropzone i { font-size: 1.5rem; margin-bottom: 0.4rem; opacity: 0.65; }
.dropzone .dz-label { font-weight: 600; font-size: 0.92rem; }
.dropzone .dz-hint { font-size: 0.8rem; color: var(--fg-dim); margin-top: 0.25rem; }

.ma-files {
    margin-top: 0.85rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.5rem;
}
.ma-file {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.85rem;
}
.ma-file .ma-file-icon {
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 6px;
    background: var(--bg-elev);
    display: flex; align-items: center; justify-content: center;
    color: var(--fg-dim);
}
.ma-file input.ma-file-name {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--fg);
    font-family: inherit;
    font-size: 0.83rem;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    outline: none;
}
.ma-file input.ma-file-name:focus,
.ma-file input.ma-file-name:hover { background: var(--bg-elev); }
.ma-file .ma-file-remove {
    background: transparent;
    border: none;
    color: var(--fg-dim);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    font-size: 0.85rem;
    border-radius: 4px;
}
.ma-file .ma-file-remove:hover { color: var(--error); background: var(--bg-elev); }
.ma-file.uploading { opacity: 0.6; }

/* ──────────── Onboarding quiz modal ──────────── */
.onb-card { max-width: 620px; }
.onb-steps {
    display: flex;
    gap: 6px;
    margin-bottom: 1.5rem;
}
.onb-step {
    flex: 1;
    height: 4px;
    background: var(--bg-elev);
    border-radius: 999px;
    transition: background 0.25s;
}
.onb-step.active { background: var(--gradient); }
.onb-step.done { background: var(--c-purple); opacity: 0.5; }

.onb-question h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: var(--fg);
}
.onb-question p.help { color: var(--fg-muted); font-size: 0.92rem; margin: 0 0 1rem; line-height: 1.5; }

.onb-radio-group { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.85rem; }
.onb-radio {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.onb-radio:hover { border-color: var(--border-strong); }
.onb-radio.selected { background: var(--gradient-soft); border-color: var(--c-purple); }
.onb-radio input[type="radio"] { accent-color: var(--c-purple); flex-shrink: 0; }
.onb-radio .onb-radio-label { color: var(--fg); font-weight: 600; }
.onb-radio .onb-radio-sub { color: var(--fg-muted); font-size: 0.82rem; display: block; margin-top: 0.15rem; font-weight: 400; }

.onb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}
.onb-grid .form-group { margin: 0; }
.onb-grid label { color: var(--fg-dim); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 0.3rem; }
.onb-grid .input { padding: 0.55rem 0.8rem; }

.onb-naming-choice { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.85rem; }
.onb-result { margin-top: 1rem; padding: 0.85rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; font-size: 0.85rem; color: var(--fg-muted); }

/* ──────────── Naming AI assist panel ──────────── */
.naming-ai-panel {
    background: var(--gradient-soft);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}
.naming-ai-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.naming-ai-head i { font-size: 1.15rem; margin-top: 0.15rem; flex-shrink: 0; }
.naming-ai-head strong {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    margin-bottom: 0.15rem;
    color: var(--fg);
}
.naming-ai-head span { display: block; line-height: 1.45; }
.naming-ai-body textarea.input { font-family: monospace; font-size: 0.88rem; }

.naming-ai-result {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.naming-ai-result .nar-meta {
    color: var(--fg-muted);
    font-size: 0.82rem;
    margin: 0 0 0.65rem;
}
.naming-ai-result .nar-row {
    display: grid;
    grid-template-columns: 70px 90px 1fr;
    gap: 0.5rem;
    align-items: start;
    padding: 0.55rem 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}
.naming-ai-result .nar-row .nar-tag {
    font-family: monospace;
    font-weight: 700;
    color: var(--c-purple);
    background: var(--bg-elev);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    text-align: center;
}
.naming-ai-result .nar-row .nar-key {
    color: var(--fg-dim);
    font-family: monospace;
    font-size: 0.78rem;
    align-self: center;
}
.naming-ai-result .nar-row .nar-meaning {
    color: var(--fg);
    line-height: 1.4;
}
.naming-ai-result .nar-row .nar-meaning input {
    background: transparent;
    border: 1px dashed transparent;
    color: var(--fg);
    width: 100%;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
}
.naming-ai-result .nar-row .nar-meaning input:hover,
.naming-ai-result .nar-row .nar-meaning input:focus { border-color: var(--border-strong); background: var(--bg-elev); }
.naming-ai-result .nar-row .nar-sample {
    font-size: 0.74rem;
    color: var(--fg-dim);
    margin-top: 0.2rem;
}
.naming-ai-result .nar-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}
.naming-ai-result .nar-error {
    color: var(--error);
    background: var(--error-bg);
    border: 1px solid rgba(239, 110, 126, 0.25);
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

/* ──────────── Inline help tooltip ──────────── */
.help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--fg-dim);
    font-size: 0.62rem;
    font-weight: 700;
    margin-left: 0.4rem;
    cursor: help;
    position: relative;
    vertical-align: middle;
}
.help-tip::before {
    content: "?";
}
.help-tip:hover {
    background: var(--bg-card);
    color: var(--fg);
    border-color: var(--border-strong);
}
.help-tip[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.55rem 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--fg-muted);
    line-height: 1.4;
    white-space: normal;
    width: 220px;
    text-align: left;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    text-transform: none;
    letter-spacing: normal;
}
.perf-table thead th:hover { color: var(--fg); }
.perf-table tbody tr:hover { background: var(--bg-elev); }
.perf-table tfoot td {
    border-top: 2px solid var(--border-strong);
    border-bottom: none;
    background: var(--bg-elev);
}
.roas-good { color: var(--success); }
.roas-ok   { color: var(--fg); }
.roas-bad  { color: var(--error); }

/* Performance drill-down chevron + indentation */
.perf-chevron {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-muted);
    width: 22px; height: 22px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    vertical-align: middle;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.perf-chevron:hover { background: var(--bg-elev); color: var(--fg); border-color: var(--border-strong); }
.perf-chevron-spacer {
    display: inline-block;
    width: 22px; height: 22px;
    margin-right: 0.5rem;
    vertical-align: middle;
}
.perf-row-data.depth-1 { background: rgba(255, 255, 255, 0.012); }
.perf-row-data.depth-2 { background: rgba(255, 255, 255, 0.025); }
.perf-row-data.depth-1 td:first-child,
.perf-row-data.depth-2 td:first-child {
    border-left: 2px solid var(--border-strong);
}
.perf-level-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-dim);
    background: var(--bg-elev);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* ──────────── Drive scan tree ──────────── */
.drive-campaign {
    border-bottom: 1px solid var(--border);
}
.drive-campaign:last-child { border-bottom: none; }
.drive-campaign-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    font-weight: 700;
    background: var(--bg-elev);
    color: var(--fg);
}
.drive-campaign-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-mode-tag {
    font-size: 0.72rem;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-weight: 600;
}
.drive-adsets { padding: 0.4rem 0.4rem 0.85rem 1.6rem; }
.drive-adset { padding: 0.45rem 0; }
.drive-adset-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fg-muted);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.25rem 0;
}
.drive-adset-head span:nth-child(2) {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drive-ads {
    padding: 0.2rem 0 0.4rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.3rem 0.85rem;
}
.drive-ad {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fg-dim);
    font-size: 0.83rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drive-ad span { overflow: hidden; text-overflow: ellipsis; }

/* Campaign match banner */
.campaign-match {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.campaign-match i { font-size: 1.1rem; margin-top: 0.1rem; }
.campaign-match.ok { background: var(--success-bg); color: var(--success); }
.campaign-match.warn { background: rgba(251, 146, 60, 0.08); color: #fbbf24; }

/* Adset checkbox + inline config */
.drive-adset-head {
    cursor: pointer;
    user-select: none;
}
.drive-adset-head input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--c-purple);
    cursor: pointer;
    margin: 0;
}
.drive-adset-head input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.45; }
.drive-adset-config {
    margin: 0.4rem 0 0.85rem 1.7rem;
    padding: 1rem 1.1rem;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.adset-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}
.adset-config-grid .form-group { margin: 0; }
.adset-config-grid label {
    color: var(--fg-dim);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 0.3rem;
}
.adset-config-grid .input,
.drive-adset-config .input {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--fg);
    font-family: inherit;
    font-size: 0.88rem;
    width: 100%;
}
.text-rows { display: flex; flex-direction: column; gap: 0.35rem; }
.text-row { display: flex; gap: 0.4rem; align-items: center; }
.text-row .input { flex: 1; }
.btn-icon {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-muted);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.btn-icon:hover { color: #ff8a8a; border-color: rgba(255, 138, 138, 0.4); }
.btn-text-add {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--fg-muted);
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
    margin-top: 0.25rem;
    width: max-content;
}
.btn-text-add:hover { color: var(--fg); border-color: var(--border-strong); }

/* Sticky launch footer */
.launch-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 1.5rem;
    background: rgba(10, 6, 18, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 800;
}
body.embedded .launch-footer { left: 0; }
.launch-summary { color: var(--fg); font-size: 0.92rem; }
.launch-summary b { color: var(--c-purple); }

/* Launch progress modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 680px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-head {
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-head h2 { margin: 0; font-family: 'Sora', sans-serif; font-size: 1.15rem; }
.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--fg-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}
.modal-body { padding: 1.25rem 1.4rem; overflow-y: auto; flex: 1; }
.modal-foot { padding: 0.85rem 1.4rem; border-top: 1px solid var(--border); display: flex; gap: 0.75rem; justify-content: flex-end; }

.progress-bar {
    height: 8px;
    background: var(--bg-elev);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.progress-fill {
    height: 100%;
    background: var(--gradient);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.progress-text {
    font-family: 'Sora', sans-serif;
    color: var(--fg-muted);
    font-size: 0.92rem;
    margin-bottom: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.log-stream {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    max-height: 260px;
    overflow-y: auto;
    color: var(--fg-muted);
}
.log-line { margin: 0; padding: 0.15rem 0; }
.log-line.info { color: var(--fg-muted); }
.log-line.success { color: var(--success); }
.log-line.warning { color: var(--warning); }
.log-line.error { color: var(--error); }

/* ──────────── Preflight modal ──────────── */
.preflight-summary {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
    border: 1px solid var(--border);
}
.preflight-summary.pass { background: var(--success-bg); border-color: rgba(74, 222, 128, 0.30); color: var(--success); }
.preflight-summary.warn { background: var(--warning-bg); border-color: rgba(245, 158, 11, 0.30); color: var(--warning); }
.preflight-summary.fail { background: var(--error-bg); border-color: rgba(239, 110, 126, 0.30); color: var(--error); }
.preflight-summary b { display: block; margin-bottom: 0.15rem; font-family: 'Sora', sans-serif; }

.preflight-section-title {
    font-family: 'Sora', sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-dim);
    margin: 1.2rem 0 0.5rem;
    font-weight: 700;
}
.preflight-list { display: flex; flex-direction: column; gap: 0.4rem; }

.preflight-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    font-size: 0.88rem;
}
.preflight-row .pf-status {
    width: 22px; height: 22px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 0.05rem;
}
.preflight-row.pass .pf-status { background: var(--success-bg); color: var(--success); }
.preflight-row.warn .pf-status { background: var(--warning-bg); color: var(--warning); }
.preflight-row.fail .pf-status { background: var(--error-bg); color: var(--error); }
.preflight-row .pf-text { flex: 1; }
.preflight-row .pf-name { color: var(--fg); font-weight: 600; }
.preflight-row .pf-message { color: var(--fg-muted); font-size: 0.82rem; margin-top: 0.15rem; }

.preflight-adset {
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    font-size: 0.88rem;
}
.preflight-adset .pf-adset-head {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.preflight-adset .pf-adset-head .pf-status {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    font-size: 0.78rem; font-weight: 700;
}
.preflight-adset.pass .pf-status { background: var(--success-bg); color: var(--success); }
.preflight-adset.warn .pf-status { background: var(--warning-bg); color: var(--warning); }
.preflight-adset.fail .pf-status { background: var(--error-bg); color: var(--error); }
.preflight-adset .pf-name { color: var(--fg); font-weight: 600; flex: 1; }
.preflight-adset .pf-issues {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding-left: 1.85rem;
    color: var(--fg-muted);
    font-size: 0.82rem;
}
.preflight-adset .pf-issue.fail { color: var(--error); }
.preflight-adset .pf-issue.warn { color: var(--warning); }

/* ──────────── Post-launch results panel ──────────── */
.launch-results {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.launch-results .lr-title {
    font-family: 'Sora', sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-dim);
    margin: 0 0 0.6rem;
    font-weight: 700;
}
.launch-results .lr-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
}
.launch-results .lr-row .lr-name { flex: 1; color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.launch-results .lr-row .lr-meta { color: var(--fg-dim); font-size: 0.78rem; flex-shrink: 0; }
.launch-results .lr-row .lr-status {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    flex-shrink: 0;
}
.launch-results .lr-row .lr-status.PAUSED { background: var(--warning-bg); color: var(--warning); }
.launch-results .lr-row .lr-status.ACTIVE { background: var(--success-bg); color: var(--success); }
.launch-results .lr-toggle {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--fg);
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: inherit;
    flex-shrink: 0;
}
.launch-results .lr-toggle:hover { background: var(--bg-card); }
.launch-results .lr-toggle:disabled { opacity: 0.5; cursor: wait; }

/* ──────────── Media Buying ──────────── */
.mb-status-pill {
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.mb-status-pill.mb-pill-info    { background: rgba(99, 102, 241, 0.12); color: #a5b4fc; }
.mb-status-pill.mb-pill-warn    { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }
.mb-status-pill.mb-pill-danger  { background: rgba(239, 68, 68, 0.14);  color: #fca5a5; }
.mb-status-pill.mb-pill-muted   { opacity: 0.55; }

.mb-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-bottom: 1rem;
}
@media (max-width: 800px) {
    .mb-mode-grid { grid-template-columns: 1fr; }
}
.mb-mode-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1rem 1.1rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.06s;
}
.mb-mode-card:hover { border-color: var(--border-strong); }
.mb-mode-card.active {
    border-color: var(--accent, #7c3aed);
    background: var(--bg-card);
    box-shadow: 0 0 0 1px var(--accent, #7c3aed);
}
.mb-mode-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mb-mode-icon {
    font-size: 1.2rem;
    color: var(--fg-muted);
}
.mb-mode-card.active .mb-mode-icon { color: var(--accent, #a78bfa); }
.mb-mode-title { font-weight: 600; color: var(--fg); }
.mb-mode-desc {
    font-size: 0.82rem;
    color: var(--fg-dim);
    line-height: 1.4;
}

.mb-master-row {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: 0.5rem;
}
.mb-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
}
.mb-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mb-toggle-track {
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.mb-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fg-muted);
    transition: transform 0.18s, background 0.15s;
}
.mb-toggle input:checked + .mb-toggle-track {
    background: var(--accent-strong);
    border-color: var(--accent);
}
.mb-toggle input:checked + .mb-toggle-track::after {
    transform: translateX(16px);
    background: var(--accent);
}
.mb-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.mb-toggle-label strong { color: var(--fg); }
.mb-toggle-label .help-text { font-size: 0.78rem; }

.mb-cadence-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-top: 1rem;
}
@media (max-width: 700px) {
    .mb-cadence-row { grid-template-columns: 1fr; }
}

.mb-count-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    font-size: 0.72rem;
    font-weight: 700;
}

.mb-pending-card {
    border: 1px solid var(--border);
    background: var(--bg-elev);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
}
.mb-pending-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.mb-pending-name {
    font-weight: 600;
    color: var(--fg);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-pending-rule {
    font-size: 0.75rem;
    color: var(--fg-dim);
    font-family: var(--font-mono, monospace);
}
.mb-pending-reason { font-size: 0.85rem; color: var(--fg-muted); }
.mb-pending-meta { font-size: 0.75rem; color: var(--fg-dim); }
.mb-pending-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.mb-rule-card {
    border: 1px solid var(--border);
    background: var(--bg-elev);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.7rem;
}
.mb-rule-card.enabled {
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.18);
}
.mb-rule-head { display: flex; align-items: flex-start; gap: 0.85rem; }
.mb-rule-titlebox { flex: 1; min-width: 0; }
.mb-rule-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 0.2rem;
}
.mb-rule-desc {
    font-size: 0.83rem;
    color: var(--fg-dim);
    line-height: 1.45;
}
.mb-rule-params {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
    margin: 0.9rem 0 0.6rem;
}
.mb-rule-param label {
    display: block;
    font-size: 0.72rem;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}
.mb-rule-param input {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--fg);
    font-family: inherit;
    font-size: 0.85rem;
}
.mb-rule-foot { display: flex; justify-content: flex-end; }

.mb-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--fg-muted);
}
.mb-action-badge.mb-action-pause {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.mb-action-badge.mb-action-scale {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.mb-status-badge {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--fg-muted);
}
.mb-status-badge.mb-status-executed { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.35); color: #86efac; }
.mb-status-badge.mb-status-dry      { background: rgba(99, 102, 241, 0.14); border-color: rgba(99, 102, 241, 0.35); color: #a5b4fc; }
.mb-status-badge.mb-status-pending  { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.35); color: #fbbf24; }
.mb-status-badge.mb-status-failed   { background: rgba(239, 68, 68, 0.14);  border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; }

.mb-mode-toggle {
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elev);
    margin-bottom: 1rem;
}
.mb-mode-pill {
    position: relative;
    padding: 0.45rem 0.85rem;
    border-radius: 7px;
    cursor: pointer;
    color: var(--fg-muted);
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}
.mb-mode-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mb-mode-pill.active {
    background: var(--bg-card);
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.mb-product-toolbar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.mb-product-toolbar > .help-text { flex: 1; min-width: 200px; }
.mb-product-table-wrap { overflow-x: auto; }
.mb-product-table {
    width: 100%;
    border-collapse: collapse;
}
.mb-product-table th, .mb-product-table td {
    padding: 0.55rem 0.7rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.mb-product-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-dim);
    font-weight: 600;
    background: var(--bg-elev);
}
.mb-product-table input[type="number"] {
    width: 90px;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--fg);
    font-family: inherit;
    font-size: 0.85rem;
    text-align: right;
}

.mb-log-wrap { overflow-x: auto; }
.mb-log-table { width: 100%; border-collapse: collapse; }
.mb-log-table th, .mb-log-table td {
    padding: 0.55rem 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.mb-log-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-dim);
    font-weight: 600;
    background: var(--bg-elev);
}
.mb-log-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

.mb-preview-disabled td { opacity: 0.55; }
.mb-preview-disabled-tag {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    background: var(--bg-card);
    color: var(--fg-dim);
    border: 1px solid var(--border);
}
.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--fg-muted);
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
}
.btn-ghost:hover { color: var(--fg); border-color: var(--border-strong); }

/* ──── Media buying · account snapshot ──── */
.mb-snap-header { margin-bottom: 0.85rem; }
.mb-snap-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
}
.mb-snap-stat {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
}
.mb-snap-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-dim);
    margin-bottom: 0.35rem;
}
.mb-snap-value {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--fg);
}
.mb-snap-value .help-text { font-size: 0.78rem; font-weight: 400; }

.mb-inferred-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin: 1rem 0 1.2rem;
}
@media (max-width: 800px) {
    .mb-inferred-row { grid-template-columns: 1fr; }
}
.mb-inferred-tile {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}
.mb-inferred-tile .mb-snap-roas { font-size: 1.55rem; }
.mb-snap-method {
    font-size: 0.85rem;
    color: var(--fg-muted);
    margin-bottom: 0.25rem;
}
.mb-conf-pill {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--bg-elev);
    color: var(--fg-muted);
    border: 1px solid var(--border);
}
.mb-conf-pill.mb-conf-high   { background: rgba(34, 197, 94, 0.14); color: #86efac; border-color: rgba(34, 197, 94, 0.3); }
.mb-conf-pill.mb-conf-medium { background: rgba(245, 158, 11, 0.14); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }
.mb-conf-pill.mb-conf-low    { background: rgba(239, 68, 68, 0.14); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); }

.mb-snap-section { margin-top: 1.2rem; }
.mb-snap-section h4 {
    margin: 0 0 0.55rem;
    font-size: 0.95rem;
    color: var(--fg);
}
.mb-snap-h4 {
    margin: 0 0 0.55rem;
    font-size: 0.85rem;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mb-snap-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.2rem;
}
@media (max-width: 700px) { .mb-snap-grid-2col { grid-template-columns: 1fr; } }
.mb-snap-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.mb-snap-list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.mb-snap-list li:last-child { border-bottom: none; }
.mb-snap-list-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg);
}

/* ──── Media buying · diagnostic error block ──── */
.mb-diag {
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.06);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    color: var(--fg);
}
.mb-diag-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #fca5a5;
    margin-bottom: 0.5rem;
}
.mb-diag-msg {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--fg);
    background: var(--bg-elev);
    padding: 0.6rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    word-break: break-word;
    white-space: pre-wrap;
}
.mb-diag-hint {
    margin-top: 0.55rem;
    color: var(--fg-muted);
    font-size: 0.85rem;
}
.mb-diag-tb { margin-top: 0.7rem; }
.mb-diag-tb summary {
    cursor: pointer;
    color: var(--fg-muted);
    font-size: 0.78rem;
    padding: 0.25rem 0;
}
.mb-diag-tb pre {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem 0.7rem;
    color: var(--fg-muted);
    font-size: 0.75rem;
    line-height: 1.4;
    overflow-x: auto;
    max-height: 280px;
}

.mb-target-tag {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(124, 58, 237, 0.18);
    color: #c4b5fd;
    border: 1px solid rgba(124, 58, 237, 0.35);
    margin-right: 0.35rem;
    vertical-align: middle;
}

/* ──── Media buying · manual thresholds ──── */
.mb-thresh-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
}
@media (max-width: 800px) {
    .mb-thresh-grid { grid-template-columns: 1fr; }
}
.mb-thresh-tile { display: flex; flex-direction: column; gap: 0.45rem; }
.mb-thresh-tile label {
    font-size: 0.72rem;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mb-thresh-inputs {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.mb-thresh-inputs .input { flex: 1; max-width: 130px; }
.mb-thresh-auto {
    font-size: 0.78rem;
    color: var(--fg-dim);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.mb-thresh-actions { display: flex; gap: 0.5rem; }

/* ──── Multi-product ──── */
.mb-mp-row {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.mb-mp-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.mb-mp-table-wrap { overflow-x: auto; }
.mb-mp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.mb-mp-table th, .mb-mp-table td {
    padding: 0.55rem 0.7rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.mb-mp-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-dim);
    font-weight: 600;
    background: var(--bg-elev);
}
.mb-mp-table input[type="number"] {
    width: 80px;
    padding: 0.32rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--fg);
    font-family: inherit;
    font-size: 0.85rem;
    text-align: right;
}
.mb-mp-table input[type="number"]::placeholder { color: var(--fg-dim); font-style: italic; }
.mb-mp-conf {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}
.mb-mp-conf.high   { background: rgba(34, 197, 94, 0.14); color: #86efac; }
.mb-mp-conf.medium { background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
.mb-mp-conf.low    { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }

.mb-action-badge.mb-action-downscale {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}

/* ──────────── Settings two-column layout (Larven-style) ──────────── */
.settings-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}
.settings-subnav {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding-right: 0.25rem;
}
.settings-subnav-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fg);
    margin: 0 0 1rem 0.45rem;
    letter-spacing: -0.01em;
}
.settings-subnav-group { margin-bottom: 1.2rem; }
.settings-subnav-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-dim);
    padding: 0.25rem 0.55rem 0.45rem;
}

/* ──── Settings main-content group dividers ──── */
.settings-group-divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 2rem 0 0.85rem;
    color: var(--fg);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.settings-group-divider:first-child { margin-top: 0; }
.settings-group-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.settings-subnav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: 9px;
    color: var(--fg-muted);
    text-decoration: none;
    cursor: pointer;
    font-size: 0.86rem;
    transition: background 0.15s, color 0.15s;
}
.settings-subnav-item:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--fg);
}
.settings-subnav-item.active {
    background: var(--accent-soft);
    color: var(--fg);
}
.settings-subnav-item.active i {
    color: var(--accent);
}
.settings-subnav-item i {
    width: 18px;
    text-align: center;
    color: var(--fg-dim);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.settings-subnav-item > div { min-width: 0; }
.settings-subnav-name {
    font-weight: 500;
    color: inherit;
}
.settings-subnav-sub {
    font-size: 0.72rem;
    color: var(--fg-dim);
    margin-top: 0.05rem;
}
.settings-main {
    min-width: 0;
}
.settings-main .section-card { margin-bottom: 1rem; }
.settings-main .section-card:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .settings-layout {
        grid-template-columns: 1fr;
        padding: 1rem 0.75rem 3rem;
    }
    .settings-subnav {
        position: relative;
        top: auto;
        max-height: none;
    }
}

/* ──────────── Top bar (sticky, full-width header) ──────────── */
/* Spans the full width of the content area (right of the sidebar), stays
   anchored at the top while the user scrolls. The pills sit on the right
   side and overlap the rounded top corners of the content card below,
   so they feel planted in the page rather than floating in space. */
/* Topbar lives ABOVE the canvas (in the outer-frame area to the right of
   the sidebar). Transparent so the body bg shows through — the canvas's
   own top border provides the visual separation below. */
.topbar {
    position: relative;
    margin-left: 80px;     /* align with the canvas left edge (sidebar + 8 gap) */
    margin-right: 8px;     /* align with the canvas right edge */
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 0.5rem;
    background: transparent;
}
@media (max-width: 720px) {
    .topbar {
        margin-left: 60px;
        margin-right: 4px;
        padding: 0 0.25rem;
        height: 42px;
    }
}
.topbar-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--fg-muted);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1;
}
.topbar-pill:hover {
    border-color: var(--accent);
    color: var(--fg);
}
.topbar-pill i { font-size: 0.85rem; }
.topbar-pill .topbar-pill-count { font-weight: 600; color: var(--fg); }
.topbar-pill .topbar-pill-label { color: var(--fg-muted); }

/* Problems pill: amber when count > 0, neutral when zero (no fires) */
.topbar-pill.problems {
    padding: 0.4rem 0.7rem;
    gap: 0.4rem;
}
.topbar-pill.problems.has-issues {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}
.topbar-pill.problems.has-issues i { color: #fbbf24; }
.topbar-pill.problems.has-issues .topbar-pill-count { color: #fbbf24; }

.topbar-pill.icon-only {
    padding: 0.5rem 0.6rem;
    gap: 0;
}

/* Popovers (open on pill click) */
.topbar-popover {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.35);
    z-index: 99;
}
.topbar-popover-head {
    padding: 0.85rem 1rem 0.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.topbar-popover-body {
    padding: 0.4rem 0.4rem 0.6rem;
    max-height: 340px;
    overflow-y: auto;
}

/* Task / problem rows inside the popovers */
.topbar-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--fg);
    font-size: 0.84rem;
    cursor: pointer;
}
.topbar-row:hover { background: var(--accent-soft); }
.topbar-row .topbar-row-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--bg-elev);
    display: flex; align-items: center; justify-content: center;
    color: var(--fg-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.topbar-row.problem .topbar-row-icon { color: #fbbf24; background: rgba(245,158,11,0.10); }
.topbar-row.task .topbar-row-icon    { color: var(--accent); background: var(--accent-soft); }
.topbar-row > div { flex: 1; min-width: 0; }
.topbar-row .topbar-row-name { font-weight: 500; }
.topbar-row .topbar-row-sub  { font-size: 0.74rem; color: var(--fg-dim); margin-top: 0.1rem; }
.topbar-empty {
    padding: 0.85rem 1rem;
    color: var(--fg-dim);
    font-size: 0.85rem;
    text-align: center;
}

/* Light-mode-specific tweaks for the topbar */
body.light .topbar-pill { background: var(--bg-card); border-color: var(--border-strong); }
body.light .topbar-pill.problems.has-issues {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.45);
    color: #b45309;
}
body.light .topbar-pill.problems.has-issues i,
body.light .topbar-pill.problems.has-issues .topbar-pill-count { color: #b45309; }
body.light .topbar-popover { box-shadow: 0 12px 36px rgba(60, 36, 110, 0.15); }
body.light .topbar-row.problem .topbar-row-icon { color: #b45309; }

/* Hide topbar in embedded mode (host app provides its own chrome) */
body.embedded .topbar { display: none !important; }

/* Squeeze on narrow viewports — drop the "active tasks" label */
@media (max-width: 720px) {
    .topbar-pill .topbar-pill-label { display: none; }
    .topbar-popover { width: 280px; }
}

/* ──────────── Polished product-field card (Media Buying) ──────────── */
.mb-field-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}
.mb-field-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}
.mb-field-card-head > i {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.mb-field-card-title {
    font-weight: 500;
    color: var(--fg);
    font-size: 0.92rem;
}
.mb-field-card-sub {
    font-size: 0.78rem;
    color: var(--fg-dim);
    margin-top: 0.15rem;
    line-height: 1.45;
}
.mb-field-card-control select { width: 100%; }

/* Theme toggle SVG icons. Show the TARGET state:
   - dark mode → show sun (click goes to light)
   - light mode → show moon (click goes to dark) */
.theme-icon { display: none; }
body:not(.light) .theme-icon-sun  { display: block; }
body.light       .theme-icon-moon { display: block; }
#themeToggle { color: var(--fg-muted); }
#themeToggle:hover { color: var(--fg); }

/* ──────────── Help & FAQ ──────────── */
.help-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.help-contacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
@media (max-width: 900px) { .help-contacts { grid-template-columns: 1fr; } }
.help-contact-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.help-contact-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--bg-elev);
    color: var(--fg-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}
.help-contact-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fg);
    margin: 0;
}
.help-contact-card p {
    font-size: 0.83rem;
    color: var(--fg-muted);
    margin: 0;
    line-height: 1.5;
    flex: 1;
}
.help-contact-link {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
    font-size: 0.86rem;
}
.help-contact-link:hover { text-decoration: underline; }
.help-contact-link.muted { color: var(--fg-dim); cursor: default; }

.help-section-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--fg);
    margin: 2.5rem 0 0.35rem;
}
.help-section-sub {
    color: var(--fg-muted);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}
.help-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}
@media (max-width: 900px) { .help-faq-grid { grid-template-columns: 1fr; } }
.help-faq-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.15rem;
}
.help-faq-card h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fg);
    margin: 0 0 0.5rem;
}
.help-faq-card p {
    color: var(--fg-muted);
    font-size: 0.83rem;
    line-height: 1.55;
    margin: 0;
}
.help-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    border-radius: 14px;
}
.help-callout strong { color: var(--fg); font-size: 0.95rem; }
.help-callout p { color: var(--fg-muted); font-size: 0.85rem; }
.help-callout a { color: var(--accent); text-decoration: none; }
.help-callout a:hover { text-decoration: underline; }
@media (max-width: 700px) {
    .help-callout { flex-direction: column; align-items: flex-start; }
}

/* ──────────── Home (Larven-inspired hero + calendar) ──────────── */
.home-hero {
    position: relative;
    background:
        radial-gradient(ellipse 90% 60% at 0% 100%, rgba(167, 139, 250, 0.18), transparent 60%),
        linear-gradient(135deg, rgba(124, 109, 208, 0.06) 0%, rgba(196, 181, 253, 0.04) 100%),
        var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    padding: 2rem 2.25rem;
    margin-bottom: 1.75rem;
    overflow: hidden;
}
.home-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--accent-soft);
    color: var(--accent);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.home-hero-title {
    font-family: var(--font-heading);
    font-size: 2.05rem;
    font-weight: 700;
    color: var(--fg);
    margin: 0 0 0.5rem;
    line-height: 1.18;
    letter-spacing: -0.015em;
}
.home-hero-title-accent {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.home-hero-sub {
    color: var(--fg-muted);
    font-size: 0.95rem;
    margin: 0 0 1.4rem;
    max-width: 580px;
}
.home-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 720px) { .home-feature-grid { grid-template-columns: 1fr; } }
.home-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.home-feature > i {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.home-feature > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.home-feature strong { color: var(--fg); font-size: 0.88rem; }
.home-feature span { color: var(--fg-muted); font-size: 0.78rem; line-height: 1.45; }

.home-cta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.home-cta-note { color: var(--fg-dim); font-size: 0.8rem; }

.home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}
.home-section-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fg);
    margin: 0 0 0.2rem;
    letter-spacing: -0.01em;
}
.home-section-sub { color: var(--fg-muted); font-size: 0.85rem; margin: 0; }
.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--fg-dim);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Calendar widget */
.home-calendar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.2rem 1.2rem;
}
.home-calendar-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}
.home-cal-nav {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-muted);
    width: 28px; height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
}
.home-cal-nav:hover { color: var(--fg); border-color: var(--border-strong); }
.home-cal-month {
    font-weight: 600;
    color: var(--fg);
    font-size: 0.9rem;
    min-width: 90px;
}
.home-cal-count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--fg-dim);
}
.home-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal-weekday {
    font-size: 0.7rem;
    color: var(--fg-dim);
    text-align: center;
    padding: 0.3rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.cal-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--fg-muted);
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    cursor: default;
    user-select: none;
    transition: background 0.12s, border-color 0.12s;
}
.cal-day.outside { color: var(--fg-dim); opacity: 0.45; }
.cal-day.today {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--fg);
    font-weight: 600;
}
.cal-day:hover:not(.outside) { background: var(--bg-elev); }

/* ──────────── Marketing sub-sidebar ──────────── */
.marketing-layout {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 100%;
}
.marketing-subnav {
    border-right: 1px solid var(--border);
    padding: 1.25rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
}
.msub-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: 10px;
    color: var(--fg-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: background 0.15s, color 0.15s;
}
.msub-btn:hover {
    background: var(--bg-elev);
    color: var(--fg);
}
.msub-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
}
.msub-btn.coming-soon,
.msub-btn.locked {
    opacity: 0.55;
}
.msub-btn.coming-soon:hover,
.msub-btn.locked:hover {
    opacity: 0.75;
    color: var(--fg);
}
.msub-btn .msub-lock {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 0.55rem;
    color: var(--fg-dim);
}
.msub-divider {
    width: 28px;
    height: 1px;
    background: var(--border);
    margin: 0.4rem 0;
}

.marketing-main {
    padding: 1.5rem 1.75rem 3rem;
    min-width: 0;
}
.mkt-section { display: none; }
.mkt-section.active { display: block; }
.marketing-main .page-header {
    margin-bottom: 1.25rem;
}

/* Coming-soon / locked placeholder panels */
.mkt-coming-soon,
.mkt-locked {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem 2.25rem;
    text-align: center;
    max-width: 580px;
    margin: 1rem auto;
}
.mkt-coming-soon h2,
.mkt-locked h2 {
    color: var(--fg);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0.75rem 0 0.5rem;
}
.mkt-coming-soon p,
.mkt-locked p {
    color: var(--fg-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
}
.mkt-coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
body.light .mkt-coming-soon-badge { color: #b45309; }
.mkt-locked-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--bg-elev);
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 720px) {
    .marketing-layout { grid-template-columns: 52px minmax(0, 1fr); }
    .marketing-subnav { padding: 0.85rem 0.3rem; }
    .msub-btn { width: 36px; height: 36px; font-size: 0.9rem; }
    .marketing-main { padding: 1rem 1rem 2.5rem; }
}

/* ──────────── Marketing Overview: KPI strip (Larven-style) ──────────── */
/* Asymmetric layout: Revenue is the big anchor tile on the left,
   ROAS / Spend / Conversions / CPA stack to the right in a 2x2 grid. */
.mkt-kpi-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.85rem;
    margin-top: 0.5rem;
}
@media (max-width: 900px) {
    .mkt-kpi-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
}
.mkt-kpi-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.15s;
}
.mkt-kpi-tile:hover { border-color: var(--border-strong); }
.mkt-kpi-tile.big {
    grid-row: span 2;
    justify-content: space-between;
}
@media (max-width: 900px) {
    .mkt-kpi-tile.big { grid-row: auto; grid-column: span 2; }
}
.mkt-kpi-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--fg-muted);
    letter-spacing: 0.005em;
}
.mkt-kpi-value {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: -0.01em;
    line-height: 1.05;
}
.mkt-kpi-tile.big .mkt-kpi-value { font-size: 2.6rem; }
.mkt-kpi-sub {
    font-size: 0.78rem;
    color: var(--fg-dim);
    line-height: 1.45;
    max-width: 280px;
}

/* Connection-status pill in the Meta tab header */
.mkt-conn-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    color: var(--fg-muted);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}
.mkt-conn-pill.connected {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.35);
    color: var(--success);
}
.mkt-conn-pill.disconnected {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}
body.light .mkt-conn-pill.disconnected { color: #b45309; }

/* Calendar day badge — count of ads uploaded that day */
.cal-day { position: relative; }
.cal-day-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-card);
}
.cal-day.has-ads { font-weight: 600; }

/* ──────────── Settings → Products ──────────── */
.prod-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.85rem;
}
.prod-card-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: start;
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}
.prod-card-head h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fg);
    margin: 0;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.01em;
}
.prod-card-roas {
    display: flex;
    gap: 0.6rem;
}
.prod-card-roas .form-group { margin: 0; }
.prod-card-roas input { width: 90px; }
.prod-card-body { display: flex; flex-direction: column; gap: 0.85rem; }
.prod-card-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}
.prod-card-status {
    font-size: 0.78rem;
    color: var(--fg-dim);
}
.prod-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 0.5rem;
}
.prod-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.prod-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.prod-photo-del {
    position: absolute;
    top: 4px; right: 4px;
    background: rgba(0,0,0,0.55);
    border: none;
    color: #fff;
    width: 22px; height: 22px;
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    transition: background 0.15s;
}
.prod-photo-del:hover { background: rgba(0,0,0,0.78); }
.prod-photo-add {
    aspect-ratio: 1 / 1;
    border: 1.5px dashed var(--border-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--fg-dim);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.prod-photo-add:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.prod-photo-add i { font-size: 0.9rem; }

/* ──── Marketing empty-state CTA (when a platform isn't connected) ──── */
.mkt-empty-cta {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2.5rem 2rem;
    text-align: center;
    max-width: 580px;
    margin: 1.5rem auto;
}
.mkt-empty-cta-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 0.85rem;
}
.mkt-empty-cta h2 {
    color: var(--fg);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.mkt-empty-cta p {
    color: var(--fg-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
}

/* ──── TikTok-uploader specific ──── */
.source-toggle {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}
.source-toggle .src-btn {
    background: transparent;
    border: none;
    color: var(--fg-muted);
    padding: 0.5rem 0.9rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: background 0.12s, color 0.12s;
}
.source-toggle .src-btn:hover { color: var(--fg); }
.source-toggle .src-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
}
.tt-dropzone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 2.25rem 1.5rem;
    text-align: center;
    color: var(--fg-muted);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tt-dropzone:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.tt-dropzone.dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--fg);
}
.tt-dropzone p { margin: 0.5rem 0 0; }
.tt-file-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: var(--bg-card);
    font-size: 0.88rem;
}
.tt-file-row .tt-file-name { flex: 1; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-file-row .tt-file-meta { color: var(--fg-dim); font-size: 0.78rem; }
.tt-file-row.tt-ok { border-color: rgba(16, 185, 129, 0.4); }
.tt-file-row.tt-bad { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.06); }
.tt-file-row.tt-bad .tt-file-meta { color: #ef4444; }
.tt-badge {
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.tt-badge-ok { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.tt-badge-bad { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* ──── Slack schedule UI ──── */
.day-toggle {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.day-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--fg-muted);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.day-toggle label:hover { color: var(--fg); }
.day-toggle input[type="checkbox"] {
    width: 14px; height: 14px;
    accent-color: var(--accent);
    margin: 0;
}
.day-toggle label:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}
.slack-sched-list { display: flex; flex-direction: column; gap: 0.5rem; }
.slack-sched-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.slack-sched-row.disabled { opacity: 0.55; }
.slack-sched-meta { flex: 1; min-width: 0; }
.slack-sched-name {
    font-weight: 600;
    color: var(--fg);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slack-sched-sub {
    font-size: 0.78rem;
    color: var(--fg-dim);
    margin-top: 2px;
}
.slack-sched-error {
    color: #ef4444;
    font-size: 0.75rem;
    margin-top: 2px;
}
.slack-sched-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}
.slack-sched-actions .btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
}