/* ===== AEONIK FONT ===== */
@font-face { font-family: 'Aeonik'; src: url('fonts/AeonikTRIAL-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/AeonikTRIAL-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeonik'; src: url('fonts/AeonikTRIAL-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

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

/* =========================================================================
   DESIGN TOKENS — the single source of truth for colour, type, space, shape,
   elevation and motion. Components reference tokens; literal values belong
   here only. See docs/DESIGN_SYSTEM.md.
   ========================================================================= */
:root {
    /* =====================================================================
       DESIGN TOKENS — the single source of truth for the whole product.
       =====================================================================
       Two layers on purpose:

       1. SEMANTIC tokens (--surface, --text-primary, --primary, --border-*).
          These are what new work should use. They say what a value is FOR,
          not what it looks like, so a palette change is one edit here.

       2. LEGACY ALIASES (--grey-400, --accent, --red …). ~1,800 references
          across the CSS, the markup and the JS template literals already
          point at these. They are kept and re-pointed at the semantic layer
          rather than renamed: renaming would have meant touching every one of
          those call sites, which is a large diff with nothing to show for it
          and a high chance of missing some. Re-pointing recolours the entire
          product coherently in one place.

       Direction: calm, light, serious. White surfaces on a warm-grey page, a
       restrained deep forest green for action, near-black text, thin neutral
       borders, barely-there shadows. No gradients, no neon, no glass.
       ===================================================================== */

    /* --- Surfaces ----------------------------------------------------- */
    --background: #f7f8f6;
    --surface: #ffffff;
    --surface-secondary: #f2f4f1;
    --surface-hover: #eef2ef;
    --surface-sunken: #f7f8f6;

    /* --- Text --------------------------------------------------------- */
    --text-primary: #18201c;
    --text-secondary: #66716b;      /* 5.1:1 on white, 4.8:1 on the page */
    /* The direction named #8A948E here. Measured, it is 3.1:1 on white, which
       fails AA for the metadata and placeholders it is used on, so it is one
       step darker. Everything else in the palette passed as specified. */
    --text-tertiary: #65706a;       /* 5.2:1 on white, 4.7:1 on surface-2 */
    --text-disabled: #aeb6b1;       /* disabled text is exempt from AA */
    --text-inverse: #ffffff;

    /* --- Borders ------------------------------------------------------ */
    --border-default: #e2e7e3;
    --border-strong: #cbd3ce;
    --border-subtle: #edf0ee;

    /* --- Brand -------------------------------------------------------- */
    --primary: #0b4a35;
    --primary-hover: #083b2b;
    --primary-active: #062f22;
    --primary-soft: #e7f1ec;
    --primary-soft-strong: #d7e8df;
    --primary-ring: rgba(11, 74, 53, 0.18);

    /* --- Status. Soft tints, never filled neon. ----------------------- */
    --success: #15803d;
    --success-soft: #ecfdf3;
    --warning: #b45309;
    --warning-soft: #fff7ed;
    --danger: #b42318;
    --danger-soft: #fef3f2;
    --info: #175cd3;
    --info-soft: #eff8ff;

    /* --- Typography --------------------------------------------------- */
    --font: 'Aeonik', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* 12px is the floor for anything a person reads. The old floor was 11px,
       which is below comfortable reading size for a tool used all day. */
    --fs-xs: 12px;    /* metadata, badges, table headers */
    --fs-sm: 13px;    /* labels, supporting text, dense tables */
    --fs-md: 14px;    /* body — the default */
    --fs-lg: 15px;    /* card headings */
    --fs-xl: 18px;    /* section headings */
    --fs-2xl: 20px;   /* large section headings */
    --fs-3xl: 28px;   /* page titles, KPI values */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.6;
    --tracking-tight: -0.011em;
    --tracking-normal: 0;

    /* --- Space (8px rhythm, with a 4px half-step) --------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* --- Shape. Restrained: pills are for badges only. ---------------- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-pill: 999px;

    /* --- Controls ----------------------------------------------------- */
    --control-h: 40px;
    --control-h-sm: 32px;
    --control-h-lg: 44px;
    --row-h: 48px;

    /* --- Layout ------------------------------------------------------- */
    --sidebar-w: 240px;
    --sidebar-w-collapsed: 68px;
    --topbar-h: 64px;
    --page-pad-x: 32px;
    --page-pad-y: 28px;
    --measure-form: 920px;    /* forms stop here so fields stay grabbable */
    --measure-data: 1440px;   /* data-heavy pages may run wider */
    --z-topbar: 30; --z-dropdown: 100; --z-fab: 900; --z-drawer: 950;
    --z-modal: 6000; --z-wizard: 7000; --z-toast: 8000;

    /* --- Motion. Short, flat, never bouncy. --------------------------- */
    --dur-instant: 90ms;
    --dur-fast: 140ms;
    --dur-base: 180ms;
    --dur-slow: 240ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

    /* --- Elevation. Borders do the work; shadows only lift overlays. -- */
    --shadow-1: 0 1px 2px rgba(24, 32, 28, 0.04);
    --shadow-2: 0 4px 12px rgba(24, 32, 28, 0.07);
    --shadow-3: 0 12px 32px rgba(24, 32, 28, 0.11);

    /* =====================================================================
       LEGACY ALIASES — do not use in new work; do not delete either.
       ===================================================================== */
    --bg: var(--background);
    --surface-2: var(--surface-secondary);
    --white: var(--surface);
    --black: var(--text-primary);

    --grey-900: #18201c;
    --grey-800: #232b27;
    --grey-700: #3c463f;
    --grey-600: var(--text-secondary);
    --grey-500: var(--text-secondary);
    --grey-400: var(--text-secondary);
    --grey-350: var(--text-tertiary);
    --grey-300: var(--border-strong);
    --grey-200: var(--border-default);
    --grey-150: var(--border-subtle);
    --grey-100: var(--surface-secondary);
    --grey-50: var(--surface-hover);

    --text-1: var(--text-primary);
    --text-2: var(--text-secondary);
    --text-3: var(--text-tertiary);
    --border: var(--border-default);

    --accent: var(--primary);
    --accent-light: var(--primary-soft);
    --green: var(--success);
    --green-subtle: var(--success-soft);
    --green-subtle-solid: var(--primary-soft);
    /* Was a neon lime highlight. Kept as a name, retired as a colour. */
    --lime: var(--primary-soft-strong);
    --blue: var(--info);
    --blue-light: var(--info-soft);
    --blue-glow: var(--primary-ring);
    --red: var(--primary);
    --red-light: var(--primary-soft);

    --negative: var(--danger);
    --negative-subtle: var(--danger-soft);
    --negative-subtle-solid: var(--danger-soft);
    --warning-subtle: var(--warning-soft);
    --amber: var(--warning);
}

html { -webkit-font-smoothing: antialiased; }
::selection { background: var(--primary-soft-strong); color: var(--text-primary); }
body {
    font-family: var(--font);
    background: var(--background);
    color: var(--text-primary);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    letter-spacing: var(--tracking-normal);
}
a { text-decoration: none; color: inherit; }
* { scrollbar-width: thin; scrollbar-color: var(--grey-200) transparent; }
button { border: none; background: none; cursor: pointer; font-family: var(--font); }
table { width: 100%; border-collapse: collapse; }


/* ===== LAYOUT ===== */
.app { display: flex; height: 100vh; overflow: hidden; position: relative; }

/* ===== SIDEBAR — WHITE, SLIM ===== */
.sidebar {
    width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--grey-200);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    transition: width var(--dur-slow) var(--ease-out);
}

.sidebar.collapsed { width: var(--sidebar-w-collapsed); overflow: visible; }
.sidebar.collapsed .sidebar-header { justify-content: center; padding: 24px 0 28px; }
.sidebar.collapsed .sidebar-header .logo { display: none; }
.sidebar.collapsed .nav-item span { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px; }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .sidebar-footer { display: none; }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

.sidebar-header {
    /* Matches the top bar's height so the logo and the page title sit on the
       same baseline instead of the logo floating above it. */
    height: var(--topbar-h);
    padding: 0 var(--space-4) 0 var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.logo { display: flex; align-items: center; gap: 8px; }

.logo-mark {
    width: 24px; height: 24px; border-radius: var(--radius-sm);
    background: var(--primary); color: var(--text-inverse);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}

.logo span { font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); color: var(--text-primary); }

.sidebar-collapse-btn {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--grey-400);
    transition: all 0.15s;
}
.sidebar-collapse-btn:hover { color: var(--black); }

.sidebar-nav { flex: 1; padding: var(--space-3) var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); overflow-y: auto; }

.nav-section { display: flex; flex-direction: column; gap: 2px; }

.nav-label {
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-normal); color: var(--text-tertiary);
    padding: var(--space-2) var(--space-3) var(--space-1);
}

.nav-item {
    position: relative;
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 36px; padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-md); font-weight: var(--fw-regular);
    border-radius: var(--radius-md);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.nav-item:hover { color: var(--text-primary); background: var(--surface-hover); }
/* Active = a pale green field with deep green text and a slim indicator.
   It used to be a solid dark-green block, which shouted louder than the page
   content and made every visit feel like an alert. */
.nav-item.active {
    color: var(--primary); background: var(--primary-soft);
    font-weight: var(--fw-medium);
}
.nav-item.active::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 2px; height: 18px; border-radius: 0 2px 2px 0;
    background: var(--primary);
}
.sidebar.collapsed .nav-item.active::before { display: none; }
.nav-item svg { flex-shrink: 0; width: 18px; height: 18px; }
.nav-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* SOON badges on non-live nav items */
.sidebar-footer { padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--border-subtle); }
.user-info { display: flex; align-items: center; gap: 8px; }
.user-avatar { width: 32px; height: 32px; background: var(--accent); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border-radius: 50%; }
.user-details { display: flex; flex-direction: column; }
.user-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-primary); }
/* Role/plan line: sentence case in the UI font. It used to be an uppercase
   monospace enum, which is how the backend spells a role, not how a person
   reads one. */
.user-plan { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-secondary); }

/* ===== MAIN ===== */
.main { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }

/* ===== TOPBAR ===== */
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    height: var(--topbar-h);
    padding: 0 var(--page-pad-x);
    /* A solid surface with a thin rule. The blurred translucent panel was
       glass for its own sake and made text sitting under it hard to read. */
    background: var(--surface);
    border-bottom: 1px solid var(--border-default);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
}

.topbar-left { display: flex; align-items: center; gap: 14px; }

.sidebar-toggle-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--grey-200); border-radius: var(--radius-md); color: var(--grey-600);
    background: var(--white); transition: all 0.12s;
}
.sidebar-toggle-btn:hover { color: var(--black); border-color: var(--grey-300); }

.topbar-title-group { display: flex; flex-direction: column; gap: 0; }
.topbar-title-row { display: flex; align-items: center; gap: 12px; }
.page-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); color: var(--text-primary); line-height: var(--lh-tight); }
.page-subtitle { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: var(--fw-regular); margin-top: 2px; line-height: var(--lh-normal); }

.topbar-sync-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--grey-200);
    background: var(--white);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    color: var(--grey-600);
}
.sync-dot-wrap {
    position: relative;
    width: 6px;
    height: 6px;
}
.sync-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    display: block;
}
.sync-dot-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--green);
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

.topbar-right { display: flex; align-items: center; gap: 8px; }

.search-box {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; background: var(--white);
    border: 1px solid var(--grey-200); border-radius: var(--radius-lg); color: var(--grey-500);
    transition: border-color 0.15s;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.search-box input { border: none; background: none; outline: none; font-family: var(--font); font-size: 13px; width: 60px; color: var(--black); cursor: pointer; }
.search-box input::placeholder { color: var(--grey-400); }

.topbar-icon-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--grey-200); border-radius: var(--radius-lg); color: var(--grey-600);
    background: var(--white); position: relative; transition: all 0.12s;
}
.topbar-icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.notification-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; background: var(--negative); border-radius: 50%; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.btn-create {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: var(--control-h); padding: 0 var(--space-4);
    background: var(--primary); color: var(--text-inverse);
    font-size: var(--fs-md); font-weight: var(--fw-medium);
    border-radius: var(--radius-md);
    white-space: nowrap;
    /* Colour change only. The old rule lifted the button and dropped a heavy
       shadow, which made the primary action twitch under the cursor. */
    transition: background var(--dur-fast) var(--ease-out);
}
.btn-create:hover { background: var(--primary-hover); }
.btn-create:active { background: var(--primary-active); }
.btn-create:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-create:disabled, .btn-create[disabled] {
    background: var(--border-strong); color: var(--surface); cursor: not-allowed;
}

/* ===== AI BANNER ===== */
.ai-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px 14px 0;
    background: var(--surface);
    border: 1px solid rgba(15, 107, 69, 0.15);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    animation: slideDown 0.4s ease;
}
.ai-banner-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--lime); border-radius: 16px 0 0 16px; }
.ai-banner-icon-badge { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--accent); border-radius: var(--radius-lg); color: var(--lime); flex-shrink: 0; margin-left: 16px; }
.ai-banner-icon-badge svg { width: 16px; height: 16px; }
.ai-banner-content { flex: 1; font-size: 13px; color: var(--grey-600); line-height: 1.5; transition: opacity 0.25s, transform 0.25s; }
.ai-banner-tag { display: inline-block; background: var(--lime); color: var(--black); font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); margin-right: 8px; }
.ai-banner-dismiss { font-size: 18px; color: var(--grey-400); padding: 4px 8px; line-height: 1; transition: color 0.1s; flex-shrink: 0; }
.ai-banner-dismiss:hover { color: var(--black); }
.ai-banner.hidden { display: none; }

/* Severity variants. The left stripe and chip recolour together so the
   seriousness of an insight is readable before the text is. */
.ai-banner.sev-warn .ai-banner-stripe { background: var(--amber); }
.ai-banner.sev-critical .ai-banner-stripe { background: var(--danger); }
.ai-banner-tag.sev-warn { background: var(--amber); color: var(--black); }
.ai-banner-tag.sev-critical { background: var(--danger); color: #fff; }
.ai-banner.sev-warn .ai-banner-icon-badge { color: var(--amber); }
.ai-banner.sev-critical .ai-banner-icon-badge { color: var(--danger); }
/* Detail text is exposed via title=, so signal that hovering does something. */
#aiInsightText[title]:not([title=""]) { cursor: help; }

.ai-banner-dots { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-right: 4px; }
.ai-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--grey-200); cursor: pointer; transition: all 0.2s; }
.ai-dot.active { width: 16px; background: var(--accent); }

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

/* ===== CONTENT ===== */
.content { padding: 24px 32px 48px; display: flex; flex-direction: column; gap: 24px; }

/* ===== STATS ===== */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: none; border: none; }

.stat-card {
    background: var(--surface);
    padding: 20px 22px;
    display: flex; flex-direction: column; gap: 6px;
    position: relative; overflow: hidden;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(16,20,16,0.04), 0 8px 24px -12px rgba(16,20,16,0.08);
    transition: all 0.2s;
    cursor: default;
}
.stat-card:hover { border-color: var(--border-strong); }
.stat-card:hover .stat-value { color: var(--green); }

.stat-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--grey-400); }
.stat-row { display: flex; align-items: baseline; gap: 8px; }
.stat-value { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; transition: color 0.2s; color: var(--black); }
.stat-change { font-size: var(--fs-xs); font-weight: 600; }
.stat-change.up { color: var(--green); }
.stat-change.down { color: var(--negative); }

.stat-bar { height: 3px; background: var(--grey-150); margin-top: 6px; border-radius: var(--radius-sm); overflow: hidden; }
.stat-bar-fill { height: 100%; background: var(--green); border-radius: var(--radius-sm); transition: width 1s cubic-bezier(0.4,0,0.2,1); }

/* KPI Card new structure */
.stat-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.stat-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(15, 107, 69, 0.08); border-radius: var(--radius-lg); color: var(--green); }
.stat-sparkline { flex-shrink: 0; }
.stat-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.stat-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; font-family: var(--font-mono); }
.stat-delta.up { background: rgba(15, 107, 69, 0.08); color: var(--green); }
.stat-delta.down { background: var(--negative-subtle); color: var(--negative); }
.stat-label-text { font-size: 12px; color: var(--grey-500); }

/* ===== CARDS ===== */
.card {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    overflow: hidden; position: relative;
}
.card::before { display: none; }
/* Cards are containers, not controls: they do not lift, glow or move. The
   border is the separation. Hover belongs to things you can click. */

.card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--grey-150);
    background: none;
}
.card-head h2, .card-head h3 { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--black); }
.card-action { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--green); transition: all 0.12s; }
.card-action:hover { color: var(--accent); }
.card-period { font-size: var(--fs-xs); color: var(--grey-400); }

.toggle-group { display: flex; border: 1px solid var(--grey-200); border-radius: var(--radius-md); background: var(--grey-100); overflow: hidden; padding: 2px; gap: 2px; }
.toggle-btn { padding: 9px 16px; font-size: 12px; font-weight: 500; color: var(--grey-600); border-radius: var(--radius-md); transition: all 0.2s; border: none; }
.toggle-btn:last-child { border-right: none; }
.toggle-btn.active { background: var(--accent); color: var(--white); box-shadow: 0 1px 3px rgba(10,61,42,0.2); }
.toggle-btn:hover:not(.active) { color: var(--black); }

.grid-2col { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; }

/* ===== CHART ===== */
.chart-body { padding: 16px 20px 20px; height: 320px; }
.chart-grid { display: flex; align-items: flex-end; gap: 6px; height: 100%; }

/* ===== FUNNEL BAR CHART ===== */
.funnel-col {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    transition: opacity 0.25s ease;
    cursor: pointer;
}
.funnel-col.dimmed { opacity: 0.35; }

.funnel-open-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    font-family: var(--font-mono);
    color: var(--grey-500);
    margin-bottom: 4px;
}

.funnel-bar-wrap {
    position: relative;
    width: 100%;
    max-width: 48px;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.funnel-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 5px 5px 0 0;
    transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.funnel-layer--open { background: #bcd8c6; z-index: 1; }
.funnel-layer--ctr { background: #2f7d57; z-index: 2; border-radius: 4px 4px 0 0; }
.funnel-layer--cvr { background: var(--accent); z-index: 3; border-radius: 3px 3px 0 0; }

.funnel-day-label {
    font-size: var(--fs-xs);
    color: var(--grey-400);
    margin-top: 8px;
    font-weight: 500;
}

/* Funnel tooltip */
.funnel-tooltip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    margin-top: -8px;
    background: var(--black);
    color: var(--white);
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    line-height: 1.8;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
    box-shadow: var(--shadow-3);
    display: flex;
    flex-direction: column;
}
.funnel-tooltip-label {
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--fs-xs);
    margin-bottom: 4px;
}
.funnel-tooltip-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.funnel-tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* ===== CHANNEL LIST ===== */
.channel-list { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.channel-row { display: flex; align-items: center; gap: 12px; transition: transform 0.15s; }
.channel-row:hover { transform: translateX(3px); }
.channel-name { width: 74px; font-size: 13px; font-weight: 450; color: var(--black); }
.channel-bar-wrap { flex: 1; height: 10px; background: var(--grey-100); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.channel-bar-wrap::before { display: none; }
.channel-bar { height: 100%; background: var(--accent); border-radius: var(--radius-sm); transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.channel-bar::after { display: none; }
.channel-bar-top { background: var(--lime); }
.channel-val { font-size: 13px; font-weight: 500; width: 48px; text-align: right; font-family: var(--font-mono); color: var(--black); }

/* Channel icon */
.channel-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(15, 107, 69, 0.08); border-radius: var(--radius-md); color: var(--green); flex-shrink: 0; }
.channel-icon svg { width: 14px; height: 14px; }

/* ===== TABLE ===== */
.table-wrap { overflow-x: auto; }
table thead th { text-align: left; padding: 12px 20px; font-size: var(--fs-xs); font-weight: 500; color: var(--grey-400); border-bottom: 1px solid var(--grey-150); background: none; }
table tbody td { padding: 14px 20px; font-size: 14px; border-bottom: 1px solid var(--grey-100); transition: background 0.1s; }
table tbody tr:last-child td { border-bottom: none; }
table tbody tr { transition: all 0.15s; cursor: pointer; }
table tbody tr:hover { background: var(--grey-50); }
table tbody tr:hover .td-name { color: var(--green); }
.td-name { font-weight: 500; transition: color 0.15s; }
.td-num { font-weight: 500; font-size: var(--fs-xs); }

.badge { display: inline-block; padding: 3px 10px; background: var(--grey-100); border: 1px solid var(--grey-150); font-size: var(--fs-xs); font-weight: 500; color: var(--grey-600); border-radius: var(--radius-pill); }
/* One badge shape for every status in the product. Soft tint + readable
   foreground, sentence case, compact. Never a saturated filled pill. */
.status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px var(--space-2); min-height: 20px;
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-normal); text-transform: none;
    border-radius: var(--radius-sm);
    background: var(--surface-secondary); color: var(--text-secondary);
    border: 1px solid transparent;
}
.status.live, .status.sent, .status.running, .status.active, .status.verified {
    background: var(--success-soft); color: var(--success);
}
.status.done, .status.completed { background: var(--surface-secondary); color: var(--text-secondary); }
.status.draft { background: var(--surface-secondary); color: var(--text-secondary); border-color: var(--border-default); }
.status.scheduled, .status.pending, .status.invited { background: var(--warning-soft); color: var(--warning); }
.status.paused, .status.archived { background: var(--surface-secondary); color: var(--text-secondary); }
.status.failed, .status.error, .status.rejected, .status.suspended { background: var(--danger-soft); color: var(--danger); }
.status.info { background: var(--info-soft); color: var(--info); }

/* ===== JOURNEYS ===== */
.journey-list { padding: 12px 20px; display: flex; flex-direction: column; gap: 2px; }
.journey-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--grey-100); transition: all 0.15s; cursor: pointer; }
.journey-row:last-child { border-bottom: none; }
.journey-row:hover { background: var(--surface-hover); }
.journey-row:hover .journey-name { color: var(--primary); }
.journey-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.journey-name { font-size: 12px; font-weight: 500; transition: color 0.15s; }
.journey-meta { font-size: var(--fs-xs); color: var(--grey-400); }
.journey-bar-wrap { width: 80px; height: 4px; background: var(--grey-150); border-radius: var(--radius-sm); overflow: hidden; }
.journey-bar { height: 100%; background: var(--accent); border-radius: var(--radius-sm); transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.journey-pct { font-size: var(--fs-xs); font-weight: 600; width: 28px; text-align: right; }

/* ===== ACTIVITY FEED ===== */
.feed { padding: 12px 20px; display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.feed-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--grey-100); animation: feedIn 0.3s ease; }
.feed-item:last-child { border-bottom: none; }
.feed-dot { width: 5px; height: 5px; background: var(--grey-300); margin-top: 6px; flex-shrink: 0; }
.feed-item:first-child .feed-dot { background: var(--green); box-shadow: 0 0 6px var(--green-subtle); }
.feed-body { display: flex; flex-direction: column; gap: 2px; }
.feed-body p { font-size: var(--fs-xs); color: var(--grey-600); }
.feed-body p strong { color: var(--black); font-weight: 600; }
.feed-body span { font-size: var(--fs-xs); color: var(--grey-400); }

.live-indicator { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--grey-400); }
.live-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }

@keyframes feedIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

/* ===== TOOLTIP ===== */
.tooltip {
    position: fixed; z-index: 10000;
    background: var(--black); color: var(--white);
    padding: 6px 10px; font-size: var(--fs-xs); font-weight: 500;
    border-radius: var(--radius-md);
    pointer-events: none; opacity: 0;
    transition: opacity 0.15s;
    max-width: 200px;
}
.tooltip.visible { opacity: 1; }

/* ===== NOTIFICATION PANEL ===== */
.notif-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 320px;
    background: var(--white); border-left: 1px solid var(--grey-200);
    border-radius: 16px 0 0 16px;
    z-index: 5000; transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: -4px 0 20px rgba(0,0,0,0.06);
    display: flex; flex-direction: column;
}
.notif-panel.open { transform: translateX(0); }

.notif-dropdown {
    position: absolute;
    top: 48px;
    right: 0;
    width: 320px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-xl);
    z-index: 5000;
    box-shadow: var(--shadow-2);
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: notifIn 0.18s ease;
}
.notif-dropdown.open { display: flex; }
@keyframes notifIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.notif-dropdown-title { border-bottom: 1px solid var(--grey-150); padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--black); }
.notif-dropdown-list { padding: 0; }
.notif-dropdown-item { padding: 12px 16px; border-bottom: 1px solid var(--grey-100); transition: background 0.12s; cursor: pointer; }
.notif-dropdown-item:last-child { border-bottom: none; }
.notif-dropdown-item:hover { background: var(--grey-50); }
.notif-dropdown-item p { font-size: 13px; color: var(--grey-600); line-height: 1.4; margin: 0; }
.notif-dropdown-item span { font-size: var(--fs-xs); color: var(--grey-400); margin-top: 2px; display: block; }
.notif-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--grey-100); }
.notif-header h3, .notif-header h4 { font-size: 13px; font-weight: 600; }
.notif-close { font-size: 20px; color: var(--grey-400); padding: 4px; line-height: 1; }
.notif-close:hover { color: var(--black); }
.notif-list { flex: 1; overflow-y: auto; padding: 12px 0; }
.notif-item { display: flex; gap: 10px; padding: 12px 20px; transition: background 0.12s; cursor: pointer; }
.notif-item:hover { background: var(--grey-50); }
.notif-item.unread .notif-dot { background: var(--green); }
.notif-dot { width: 6px; height: 6px; background: var(--grey-300); margin-top: 6px; flex-shrink: 0; }
.notif-content p { font-size: 12px; color: var(--grey-700); }
.notif-content p strong { color: var(--black); }
.notif-content span { font-size: var(--fs-xs); color: var(--grey-400); }

/* ===== TOAST NOTIFICATIONS ===== */
/* Stacked above the AI launcher (bottom-right) so a toast never covers it. */
.toast-container { position: fixed; bottom: 88px; right: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast-container .toast { pointer-events: auto; }
.toast {
    background: var(--white); border: 1px solid var(--grey-200);
    padding: 12px 16px; min-width: 260px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    animation: toastIn 0.3s ease;
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 450;
    transition: all 0.3s;
}
.toast.leaving { opacity: 0; transform: translateX(20px); }
.toast-icon { width: 8px; height: 8px; background: var(--green); flex-shrink: 0; border-radius: 50%; }
.toast-icon.red { background: var(--negative); }

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

/* ===== COMMAND PALETTE (Cmd+K) ===== */
.cmd-palette-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 9000; display: none; align-items: flex-start; justify-content: center;
    padding-top: 20vh; backdrop-filter: blur(2px);
    animation: fadeIn 0.15s ease;
}
.cmd-palette-overlay.open { display: flex; }
.cmd-palette {
    background: var(--white); border: 1px solid var(--grey-200);
    border-radius: var(--radius-xl);
    width: 480px; box-shadow: var(--shadow-3);
    animation: scaleIn 0.15s ease;
    overflow: hidden;
}
.cmd-palette-input {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px;
    border-bottom: 1px solid var(--grey-100);
}
.cmd-palette-input svg { color: var(--grey-400); flex-shrink: 0; }
.cmd-palette-input input {
    flex: 1; border: none; outline: none; font-family: var(--font);
    font-size: 14px; font-weight: 400; color: var(--black);
}
.cmd-palette-input input::placeholder { color: var(--grey-300); }
.cmd-palette-results { padding: 8px; max-height: 320px; overflow-y: auto; }
.cmd-result {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    cursor: pointer; transition: all 0.1s;
}
.cmd-result:hover, .cmd-result.selected { background: var(--grey-50); }
.cmd-result:hover .cmd-result-name, .cmd-result.selected .cmd-result-name { color: var(--green); }
.cmd-result-icon { width: 28px; height: 28px; background: var(--grey-50); border: 1px solid var(--grey-100); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--grey-500); }
.cmd-result-text { display: flex; flex-direction: column; gap: 1px; }
.cmd-result-name { font-size: 12px; font-weight: 500; transition: color 0.1s; }
.cmd-result-desc { font-size: var(--fs-xs); color: var(--grey-400); }
.cmd-palette-footer { padding: 10px 18px; border-top: 1px solid var(--grey-100); display: flex; gap: 16px; }
.cmd-shortcut { font-size: var(--fs-xs); color: var(--grey-400); display: flex; align-items: center; gap: 4px; }
.cmd-shortcut kbd { background: var(--grey-100); padding: 1px 5px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-family: var(--font); border: 1px solid var(--grey-150); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== PROGRESS RING ON HOVER ===== */
.stat-card .ring-hint {
    position: absolute; top: 16px; right: 16px;
    width: 28px; height: 28px; opacity: 0;
    transition: opacity 0.2s;
}
.stat-card:hover .ring-hint { opacity: 1; }

/* ===== SPA VIEW CONTROLLERS ===== */
/* Page enter is driven by a keyframe (not a transition): the element toggles
   display:none <-> flex, and a transition cannot animate across a display
   change, so it previously snapped in. The animation replays on each switch. */
.page-view { display: none; }
.page-view.active {
    display: flex; flex-direction: column; gap: 24px;
    animation: pageEnter var(--dur-base) var(--ease-out) both;
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== SWITCH / TOGGLE & INTEGRATIONS ===== */
.switch { position: relative; display: inline-block; width: 34px; height: 18px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--grey-300); transition: .3s; border-radius: var(--radius-md); }
.slider::before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: var(--white); transition: .3s; border-radius: 50%; }
.switch input:checked + .slider { background-color: var(--red); }
.switch input:checked + .slider::before { transform: translateX(16px); }

.integration-card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-xl);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}
.integration-card:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.integration-header { display: flex; align-items: center; justify-content: space-between; }
.integration-meta { display: flex; align-items: center; gap: 10px; }
.integration-logo { width: 36px; height: 36px; background: var(--grey-100); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; border-radius: var(--radius-md); }
.integration-title { display: flex; flex-direction: column; }
.integration-title h3, .integration-title h4 { font-size: 13px; font-weight: 600; }
.integration-title span { font-size: var(--fs-xs); color: var(--grey-400); }
.integration-body { font-size: 12px; color: var(--grey-600); line-height: 1.4; }
.integration-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--grey-100); padding-top: 12px; }
.integration-status { font-size: var(--fs-xs); font-weight: 600; padding: 2px 6px; }
.integration-status.connected { background: var(--green-subtle); color: var(--green); border: 1px solid rgba(15, 107, 69, 0.2); }
.integration-status.disconnected { background: var(--grey-100); color: var(--grey-400); border: 1px solid var(--grey-200); }
.integration-status.pending { background: rgba(245, 166, 35, 0.08); color: var(--warning); border: 1px solid rgba(245, 166, 35, 0.25); }

/* ===== LOGIN / SIGNUP — ENTERPRISE SPLIT SCREEN ===== */
.login-overlay {
    position: fixed;
    inset: 0;
    background: var(--white);
    display: none;
    z-index: 10000;
}
.login-overlay.active {
    display: flex;
}
.login-split {
    display: flex;
    width: 100%;
    height: 100%;
}
.login-hero-panel {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
}
.login-hero-img { display: none; }
.login-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 48px;
}
.login-hero-content {
    max-width: 380px;
}
.login-form-panel {
    width: 440px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: var(--white);
    overflow-y: auto;
}
.login-form-container {
    width: 100%;
    max-width: 340px;
}
.login-form-header {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .login-hero-panel { display: none; }
    .login-form-panel { width: 100%; padding: 32px 24px; }
    .login-mobile-logo { display: block !important; margin-bottom: 20px; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-2col { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; }
    .sidebar.collapsed { width: 0; overflow: hidden; transform: translateX(-100%); }
    .content { padding: 18px 14px; }
    .topbar { padding: 12px 14px; }
    .stats-grid { grid-template-columns: 1fr; }
    .search-box input { width: 100px; }
    .notif-panel { width: 100%; }
}


/* ===== AUTHENTICATION STATE VISIBILITY ENFORCEMENT ===== */
html.unauthenticated .app {
    display: none !important;
}
html.unauthenticated .login-overlay {
    display: flex !important;
}
html.authenticated .login-overlay {
    display: none !important;
}


/* ===== CAMPAIGNS WIZARD ===== */
.step-indicator { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 24px; }
.step { display: flex; align-items: center; gap: 8px; padding: 8px 16px; cursor: pointer; transition: all 0.15s; }
.step-number { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; border: 1.5px solid var(--grey-300); color: var(--grey-400); }
.step-label { font-size: var(--fs-xs); font-weight: 500; color: var(--grey-400); }
.step.active .step-number { background: var(--red); color: var(--white); border-color: var(--red); }
.step.active .step-label { color: var(--black); font-weight: 600; }
.step.done .step-number { background: var(--black); color: var(--white); border-color: var(--black); }
.step.done .step-label { color: var(--black); }
.step-connector { width: 40px; height: 1px; background: var(--grey-200); }
.step-content { display: none; flex-direction: column; gap: 16px; animation: slideDown 0.2s ease; }
.step-content.active { display: flex !important; }
.channel-selector { display: flex; gap: 10px; padding: 16px 20px; }
.channel-btn { display: flex; align-items: center; gap: 8px; padding: 11px 22px; border: 1px solid var(--grey-300); font-size: 12px; font-weight: 500; color: var(--grey-700); background: var(--white); transition: all 0.12s; cursor: pointer; font-family: var(--font); }
.channel-btn.active { border-color: var(--red); color: var(--red); background: var(--red-light); }
.channel-btn:hover:not(.active) { border-color: var(--grey-400); color: var(--black); }
.audience-mode-row { display: flex; gap: 20px; padding: 16px 20px 12px; }
.audience-existing, .audience-new { padding: 0 20px 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.form-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--tracking-normal); color: var(--text-primary); text-transform: none; }
.segment-preview { display: flex; gap: 16px; padding: 10px 14px; background: var(--grey-50); border: 1px solid var(--grey-100); margin-top: 8px; }
.segment-preview-count, .segment-preview-reach { font-size: 12px; font-weight: 600; }
.ab-test-section { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.ab-variants { display: flex; gap: 12px; flex-wrap: wrap; }
.ab-variant-card { border: 1px solid var(--grey-200); padding: 14px 18px; min-width: 180px; flex: 1; }
.variant-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.variant-badge { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; background: var(--black); color: var(--white); }
.variant-title { font-size: var(--fs-xs); font-weight: 500; }
.variant-split { display: flex; align-items: center; gap: 8px; }
.variant-split-input { width: 60px; }
.holdout-section { padding: 16px 20px; }
.holdout-input-row { display: flex; align-items: center; gap: 10px; }
.holdout-suffix { font-size: var(--fs-xs); color: var(--grey-500); }
.toggle-btn-camp input { display: none; }
.toggle-slider-camp { width: 32px; height: 18px; background: var(--grey-200); display: inline-block; position: relative; cursor: pointer; transition: background 0.2s; }
.toggle-slider-camp::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--white); transition: transform 0.2s; }
.toggle-btn-camp input:checked + .toggle-slider-camp { background: var(--red); }
.toggle-btn-camp input:checked + .toggle-slider-camp::after { transform: translateX(14px); }
.step-nav { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; }
.step-nav-btn { padding: 11px 22px; font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.12s; border: none; }
.step-nav-btn.next { background: var(--red); color: var(--white); }
.step-nav-btn.next:hover { background: #0a1a12; }
.step-nav-btn.prev { background: var(--white); color: var(--grey-700); border: 1px solid var(--grey-300); }
.step-nav-btn.prev:hover { color: var(--black); border-color: var(--red); }
.step-nav-btn.launch { background: var(--black); color: var(--white); font-size: 13px; }
.step-nav-btn.launch:hover { background: var(--grey-800); }
.preview-toggle-bar { display: flex; gap: 0; border: 1px solid var(--grey-200); width: fit-content; margin-bottom: 12px; }
.preview-toggle-bar .toggle-btn { padding: 6px 16px; font-size: var(--fs-xs); font-weight: 500; color: var(--grey-500); border-right: 1px solid var(--grey-200); cursor: pointer; font-family: var(--font); background: var(--grey-50); border: none; border-right: 1px solid var(--grey-200); }
.preview-toggle-bar .toggle-btn:last-child { border-right: none; }
.preview-toggle-bar .toggle-btn.active { background: var(--white); color: var(--red); }
.editor-layout { display: grid; grid-template-columns: 180px 1fr 240px; gap: 1px; background: var(--grey-200); border: 1px solid var(--grey-200); min-height: 500px; }
.editor-panel-left, .editor-panel-right { background: var(--white); padding: 16px; }
.editor-canvas-wrap { background: var(--grey-50); padding: 20px; display: flex; justify-content: center; overflow-y: auto; }
.editor-canvas { width: 100%; max-width: 600px; background: var(--white); border: 1px solid var(--grey-200); min-height: 400px; display: flex; flex-direction: column; transition: max-width 0.3s; }
.editor-canvas.phone-view { max-width: 360px; }
.panel-title { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--grey-400); margin-bottom: 12px; }
.block-palette { display: flex; flex-direction: column; gap: 6px; }
.palette-block { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--grey-200); font-size: var(--fs-xs); font-weight: 450; color: var(--grey-600); cursor: grab; transition: all 0.12s; background: var(--white); }
.palette-block:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
.canvas-placeholder { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--grey-300); font-size: 12px; padding: 40px; text-align: center; border: 2px dashed var(--grey-200); margin: 12px; }
.canvas-block { padding: 16px 20px; border: 1px solid transparent; cursor: pointer; position: relative; transition: border-color 0.12s; }
.canvas-block:hover { border-color: var(--grey-200); }
.canvas-block.selected { border-color: var(--red); background: var(--red-light); }
.canvas-block-delete { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; display: none; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--grey-200); font-size: 12px; color: var(--grey-400); cursor: pointer; }
.canvas-block:hover .canvas-block-delete { display: flex; }
.canvas-block-delete:hover { color: var(--negative); border-color: var(--negative); }
.properties-empty { color: var(--grey-400); font-size: var(--fs-xs); text-align: center; padding: 24px 0; }
.properties-form { display: flex; flex-direction: column; gap: 10px; }
.properties-form .form-group { padding: 0; }
.properties-form .form-label { font-size: var(--fs-xs); }
.properties-form .f-input, .properties-form .f-select { font-size: var(--fs-xs); padding: 6px 8px; }
.color-input { width: 100%; height: 30px; padding: 2px; cursor: pointer; }
.card-desc { font-size: var(--fs-xs); color: var(--grey-500); padding: 12px 20px; }
.sms-template-section, .whatsapp-template-section { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.char-counter { font-size: var(--fs-xs); color: var(--grey-400); margin-top: 4px; }
.timing-options { display: flex; gap: 20px; padding: 16px 20px; }
/* Date and time were cramped against their default input width; give each field
   real room and let them share the row evenly. */
.schedule-picker { display: flex; gap: 16px; padding: 0 20px 16px; flex-wrap: wrap; }
.schedule-picker .form-group { flex: 1 1 240px; min-width: 220px; margin-bottom: 0; }
.schedule-picker .f-input { width: 100%; min-width: 200px; padding: 10px 12px; font-size: 13px; }
.campaign-summary { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--grey-100); }
.summary-row:last-child { border-bottom: none; }
.summary-label { font-size: var(--fs-xs); color: var(--grey-500); }
.summary-value { font-size: 12px; font-weight: 500; }

/* ===== SEGMENTS BUILDER ===== */
.segment-builder-card { background: var(--white); border: 1px solid var(--grey-200); padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.filter-area { display: flex; flex-direction: column; gap: 16px; }
.builder-mode-row { display: flex; gap: 24px; align-items: center; }
.radio-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--grey-600); cursor: pointer; }
.radio-label input[type="radio"] { display: none; }
.radio-custom { width: 14px; height: 14px; border: 1.5px solid var(--grey-300); border-radius: 50%; position: relative; transition: border-color 0.12s; }
.radio-label input[type="radio"]:checked ~ .radio-custom { border-color: var(--red); }
.radio-label input[type="radio"]:checked ~ .radio-custom::after { content: ''; position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; background: var(--red); border-radius: 50%; }
.logic-toggle-btn { margin-left: auto; padding: 8px 14px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--grey-300); color: var(--grey-700); background: var(--grey-50); cursor: pointer; transition: all 0.12s; font-family: var(--font); }
.logic-toggle-btn:hover { border-color: var(--red); color: var(--red); }
.filter-block { border: 1px solid var(--grey-200); animation: slideDown 0.2s ease; }
.block-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--grey-50); border-bottom: 1px solid var(--grey-100); }
.block-logic-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--red); }
.block-remove { font-size: 16px; color: var(--grey-400); padding: 2px 6px; line-height: 1; cursor: pointer; background: none; border: none; }
.block-remove:hover { color: var(--negative); }
.block-conditions { padding: 12px 16px; display: flex; flex-direction: column; gap: 0; }
.block-add-row { display: flex; gap: 8px; padding: 8px 16px 12px; }
.block-add-btn { font-size: var(--fs-xs); font-weight: 500; color: var(--red); cursor: pointer; padding: 8px 14px; border: 1px dashed var(--red); background: var(--white); transition: all 0.12s; font-family: var(--font); }
.block-add-btn:hover { border-color: var(--red); background: var(--red-light); }
.inter-block-connector { display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.inter-block-connector span { font-size: var(--fs-xs); font-weight: 700; color: var(--blue); padding: 3px 12px; border: 1px solid var(--blue-light); background: var(--blue-light); }
.intra-connector { display: flex; align-items: center; padding: 6px 0; }
.intra-connector span { font-size: var(--fs-xs); font-weight: 700; color: var(--red); opacity: 0.7; }
.condition-item { padding: 10px 0; border-bottom: 1px solid var(--grey-100); }
.condition-item:last-child { border-bottom: none; }
.condition-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-row-label { font-size: var(--fs-xs); color: var(--grey-500); min-width: 80px; font-weight: 450; }
.f-select, .f-input { padding: 7px 10px; border: 1px solid var(--grey-200); font-family: var(--font); font-size: var(--fs-xs); background: var(--white); outline: none; transition: border-color 0.12s; color: var(--black); }
.f-select:focus, .f-input:focus { border-color: var(--red); }
.f-select { cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%23999' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px; }
.f-input { width: 80px; }
.f-input-wide { width: 140px; }
.f-text { font-size: var(--fs-xs); color: var(--grey-500); }
.cond-remove { font-size: 15px; color: var(--grey-400); padding: 2px 6px; line-height: 1; margin-left: auto; cursor: pointer; background: none; border: none; font-family: var(--font); }
.cond-remove:hover { color: var(--negative); }
.event-attrs-section { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.attr-sub-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0 0; border-top: 1px dashed var(--grey-150); }
.attr-remove { font-size: 14px; color: var(--grey-400); cursor: pointer; padding: 2px 4px; background: none; border: none; }
.attr-remove:hover { color: var(--negative); }
.filter-links { display: flex; gap: 16px; padding-top: 6px; }
.filter-link { font-size: var(--fs-xs); font-weight: 500; color: var(--red); cursor: pointer; transition: color 0.1s; background: none; border: none; font-family: var(--font); }
.filter-link:hover { color: var(--black); }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 450; color: var(--grey-600); cursor: pointer; }
.checkbox-label input { display: none; }
.checkbox-custom { width: 13px; height: 13px; border: 1.5px solid var(--grey-300); position: relative; transition: all 0.12s; }
.checkbox-label input:checked ~ .checkbox-custom { background: var(--red); border-color: var(--red); }
.checkbox-label input:checked ~ .checkbox-custom::after { content: '✓'; position: absolute; top: -1px; left: 2px; font-size: var(--fs-xs); color: var(--white); font-weight: 700; }
.add-filter-row { display: flex; gap: 10px; }
.add-filter-btn { padding: 10px 18px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--red); color: var(--red); background: var(--white); transition: all 0.12s; cursor: pointer; font-family: var(--font); }
.add-filter-btn:hover { background: var(--red-light); }
.add-filter-btn.secondary { border-color: var(--grey-300); color: var(--grey-700); }
.add-filter-btn.secondary:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
.exclude-row { padding-top: 4px; }
.exclude-section { padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.builder-actions-row { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--grey-100); }
.reset-btn { font-size: var(--fs-xs); font-weight: 500; color: var(--red); cursor: pointer; background: none; border: none; font-family: var(--font); }
.reset-btn:hover { color: var(--black); }
.builder-actions-right { display: flex; gap: 8px; }
.actions-btn { padding: 10px 18px; font-size: var(--fs-xs); font-weight: 500; border: 1px solid var(--grey-300); color: var(--grey-700); background: var(--white); transition: all 0.12s; cursor: pointer; font-family: var(--font); }
.actions-btn:hover { border-color: var(--red); color: var(--red); }
.show-count-btn { padding: 10px 20px; font-size: var(--fs-xs); font-weight: 600; background: var(--red); color: var(--white); transition: all 0.15s; border: none; cursor: pointer; font-family: var(--font); }
.show-count-btn:hover { background: #0a1a12; }
.query-results { border-top: 1px solid var(--grey-200); padding-top: 16px; animation: slideDown 0.2s ease; }
.results-header h3, .results-header h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.results-table { width: 100%; }
.results-table th { text-align: left; padding: 8px 12px; font-size: var(--fs-xs); font-weight: 600; color: var(--grey-400); border-bottom: 1px solid var(--grey-150); background: var(--grey-50); }
.results-table td { padding: 10px 12px; font-size: 12px; border-bottom: 1px solid var(--grey-100); }
.page-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--grey-200); margin-bottom: 20px; }
.page-tab { padding: 10px 20px; font-size: 12px; font-weight: 500; color: var(--grey-600); border-bottom: 2px solid transparent; transition: all 0.12s; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font); }
.page-tab.active { color: var(--red); border-bottom-color: var(--red); }
.page-tab:hover:not(.active) { color: var(--black); }
.segment-name-row { margin-bottom: 4px; }
.segment-name-input { width: 100%; padding: 10px 14px; border: 1px solid var(--grey-200); font-family: var(--font); font-size: 14px; font-weight: 500; outline: none; transition: border-color 0.12s; }
.segment-name-input:focus { border-color: var(--red); }
.segment-name-input::placeholder { color: var(--grey-300); font-weight: 400; }
.saved-desc { font-size: var(--fs-xs); color: var(--grey-500); max-width: 320px; line-height: 1.5; }
.saved-row { cursor: pointer; transition: all 0.12s; }
.saved-row:hover { background: var(--red-light); }
.saved-row:hover .td-name { color: var(--red); }
.saved-actions { display: flex; gap: 6px; }
.saved-action-btn { font-size: var(--fs-xs); padding: 8px 14px; border: 1px solid var(--grey-300); color: var(--grey-700); background: var(--white); cursor: pointer; transition: all 0.12s; font-family: var(--font); }
.saved-action-btn:hover { border-color: var(--red); color: var(--red); }
.detail-content { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.detail-meta { display: flex; flex-direction: column; gap: 8px; }
.detail-desc { font-size: 13px; color: var(--grey-700); line-height: 1.6; padding: 12px 16px; background: var(--grey-50); border: 1px solid var(--grey-100); }
.detail-stats { display: flex; gap: 24px; }
.detail-stat { font-size: 12px; color: var(--grey-500); }
.detail-stat strong { color: var(--black); }
.detail-actions-row { display: flex; gap: 8px; }
.detail-users-section h3, .detail-users-section h4 { font-size: var(--fs-xs); font-weight: 600; color: var(--grey-400); margin-bottom: 10px; }
.btn-back { font-size: var(--fs-xs); font-weight: 500; color: var(--red); cursor: pointer; transition: color 0.1s; border: none; background: none; font-family: var(--font); }
.btn-back:hover { color: var(--black); }
.export-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 6000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.export-modal { background: var(--white); width: 480px; box-shadow: var(--shadow-3); }
.export-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--grey-100); }
.export-header h2, .export-header h3 { font-size: 14px; font-weight: 600; }
.export-close { font-size: 20px; color: var(--grey-400); line-height: 1; cursor: pointer; background: none; border: none; }
.export-close:hover { color: var(--black); }
.export-body { padding: 20px 24px; }
.export-desc { font-size: 12px; color: var(--grey-600); margin-bottom: 14px; }
.export-attrs { display: flex; flex-wrap: wrap; gap: 8px; }
.export-attr-item { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--grey-200); font-size: var(--fs-xs); cursor: pointer; transition: all 0.12s; user-select: none; }
.export-attr-item.selected { border-color: var(--red); background: var(--red-light); color: var(--red); }
.export-attr-item:hover:not(.selected) { border-color: var(--grey-300); }
.export-select-actions { display: flex; gap: 12px; margin-top: 12px; }
.export-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--grey-100); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }


/* ===== CUSTOMER FILTER CHIPS ===== */
.cust-filter-chip.active { background: var(--red) !important; color: var(--white) !important; border-color: var(--red) !important; }
.cust-filter-chip:hover:not(.active) { border-color: var(--red); color: var(--red); }


/* ===== INTEGRATIONS HUB ===== */
/* 7.1 — Hub container */
.integrations-hub { display: flex; flex-direction: column; gap: 32px; }

/* 7.2 — Section block */
.integration-section { display: flex; flex-direction: column; gap: 16px; }
.integration-section-header { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--grey-200); }
.integration-section-header h2 { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.integration-section-header .section-icon { width: 20px; height: 20px; color: var(--red); }

/* 7.3 — Sub-category */
.integration-subcategory { margin-bottom: 24px; padding: 16px; background: var(--white); border: 1px solid var(--grey-200); display: flex; flex-direction: column; gap: 12px; }
.integration-subcategory-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--grey-700); margin-bottom: 12px; }
.integration-subcategory-header h2, .integration-subcategory-header h3 { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--grey-700); }
.integration-subcategory-header .subcat-icon { width: 16px; height: 16px; color: var(--grey-600); }

/* 7.4 — Provider tabs */
.provider-tabs { display: flex; gap: 0; border: 1px solid var(--grey-300); width: fit-content; margin-bottom: 14px; }
.provider-tab { padding: 6px 14px; font-size: var(--fs-xs); font-weight: 500; color: var(--grey-600); cursor: pointer; border-right: 1px solid var(--grey-300); transition: all 0.12s; background: var(--grey-50); font-family: var(--font); border: none; border-right: 1px solid var(--grey-300); white-space: nowrap; }
.provider-tab:last-child { border-right: none; }
.provider-tab.active { background: var(--white); color: var(--red); font-weight: 600; }
.provider-tab:hover:not(.active) { color: var(--black); }

/* 7.4b — Scrollable provider tabs */
.provider-tabs-scroll {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--grey-200);
  padding-bottom: 0;
}
.provider-tabs-scroll::-webkit-scrollbar { display: none; }

.provider-tabs-scroll .provider-tab {
  padding: 8px 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--grey-600);
  cursor: pointer;
  transition: all 0.12s;
  background: transparent;
  font-family: var(--font);
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.provider-tabs-scroll .provider-tab.active {
  color: var(--red);
  font-weight: 600;
  border-bottom-color: var(--red);
}
.provider-tabs-scroll .provider-tab:hover:not(.active) {
  color: var(--black);
  border-bottom-color: var(--grey-300);
}

/* 7.5 — Card grid */
.integration-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* Single-card provider sections — full width */
#emailProviderCards,
#smsProviderCards {
  display: block;
}
#emailProviderCards .integration-card,
#smsProviderCards .integration-card {
  max-width: 100%;
}

/* Status badges */
.int-status-badge { font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; }
.int-status-badge.connected { background: var(--green-subtle); color: var(--green); border: 1px solid rgba(15, 107, 69,0.2); }
.int-status-badge.disconnected { background: var(--grey-100); color: var(--grey-400); border: 1px solid var(--grey-200); }
.int-status-badge.pending { background: rgba(245,166,35,0.08); color: var(--warning); border: 1px solid rgba(245,166,35,0.25); }
.test-connection-result { padding: 10px 12px; font-size: var(--fs-xs); font-weight: 500; margin-top: 8px; display: none; }
.test-connection-result.success { background: var(--green-subtle); color: var(--green); border: 1px solid rgba(15, 107, 69,0.2); display: block; }
.test-connection-result.error { background: var(--negative-subtle); color: var(--negative); border: 1px solid rgba(225,71,81,0.15); display: block; }

/* Mobile: single column */
@media (max-width: 768px) { .integration-cards-grid { grid-template-columns: 1fr; } }


/* ===== TEMPLATE MANAGER & BUILDER ===== */
.template-mgr-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; margin-bottom: 16px; }
.template-mgr-left { display: flex; align-items: center; }
.template-mgr-right { display: flex; align-items: center; gap: 10px; }
.template-mgr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.template-mgr-empty { grid-column: 1 / -1; }

.template-card { background: var(--white); border: 1px solid var(--grey-200); transition: all 0.15s; cursor: pointer; position: relative; overflow: hidden; }
.template-card:hover { border-color: var(--border-strong); }
.template-card-thumb { height: 120px; background: var(--grey-50); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--grey-100); }
.template-card-thumb-placeholder { font-size: 32px; opacity: 0.3; }
.template-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.template-card-name { font-size: 13px; font-weight: 600; color: var(--grey-900); margin: 0; }
.template-card-meta { display: flex; align-items: center; gap: 8px; }
.template-card-status { font-size: var(--fs-xs); font-weight: 600; }
.template-card-status.published { color: var(--green); }
.template-card-status.draft { color: var(--blue); }
.template-card-date { font-size: var(--fs-xs); color: var(--grey-400); }
.template-card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.template-card:hover .template-card-actions { opacity: 1; }

.btn-sm { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--grey-200); font-size: 12px; cursor: pointer; transition: all 0.12s; }
.btn-sm:hover { border-color: var(--red); color: var(--red); }
.btn-sm.delete:hover { border-color: var(--negative); color: var(--negative); }
.badge-sm { font-size: var(--fs-xs); padding: 1px 5px; }

/* Template Builder Toolbar */
.template-builder-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; margin-bottom: 12px; border-bottom: 1px solid var(--grey-150); }
.template-builder-left { display: flex; align-items: center; gap: 12px; }
.template-builder-right { display: flex; align-items: center; gap: 10px; }
.btn-draft { padding: 10px 18px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--grey-300); color: var(--grey-700); background: var(--white); font-family: var(--font); cursor: pointer; transition: all 0.12s; }
.btn-draft:hover { border-color: var(--red); color: var(--red); }

/* Starter Template Grid (modal) */
.starter-template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.starter-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--grey-200); cursor: pointer; transition: all 0.12s; }
.starter-card:hover { border-color: var(--red); background: var(--red-light); }
.starter-icon { font-size: 22px; width: 40px; text-align: center; }
.starter-info h3, .starter-info h4 { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.starter-info p { font-size: var(--fs-xs); color: var(--grey-500); margin: 0; }

/* ===== HTML CODE EDITOR ===== */
.html-editor-wrapper,
.html-code-editor {
    display: flex;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-sm);
    min-height: 500px;
    max-height: 70vh;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    background: #1e1e2e;
    color: #cdd6f4;
    overflow: hidden;
}
.html-editor-lines {
    width: 40px;
    padding: 12px 8px;
    text-align: right;
    color: #585b70;
    background: #181825;
    border-right: 1px solid #313244;
    overflow: hidden;
    user-select: none;
    white-space: pre;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.html-editor-textarea {
    flex: 1;
    padding: 12px;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: #cdd6f4;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: pre;
    overflow: auto;
    tab-size: 4;
}
.html-editor-textarea::placeholder {
    color: #585b70;
}

/* Modal overlay */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 6000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.modal { background: var(--white); box-shadow: var(--shadow-3); animation: scaleIn 0.15s ease; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--grey-100); }
.modal-header h2, .modal-header h3 { font-size: 14px; font-weight: 600; }
.modal-close { font-size: 22px; color: var(--grey-400); padding: 4px; line-height: 1; cursor: pointer; }
.modal-close:hover { color: var(--black); }

/* Provider config modal form validation */
.provider-field-error input { border-color: var(--negative) !important; }
.provider-field-error-text { color: var(--negative); font-size: var(--fs-xs); margin-top: 4px; }

/* Modal body & footer */
.modal-body { padding: 20px 24px; overflow-y: auto; max-height: 60vh; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--grey-100); }

/* ===== PROVIDER GRID ENHANCEMENTS ===== */

/* Provider logo — 48×48 with centered abbreviation */
.integration-cards-grid .integration-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Provider card configure button */
.integration-card .btn-configure {
    padding: 6px 12px;
    font-size: var(--fs-xs);
    font-weight: 600;
    border: 1px solid var(--grey-300);
    color: var(--grey-700);
    background: var(--white);
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.12s;
}
.integration-card .btn-configure:hover { border-color: var(--red); color: var(--red); }

/* Provider card disconnect button */
.integration-card .btn-disconnect {
    padding: 6px 12px;
    font-size: var(--fs-xs);
    font-weight: 500;
    border: 1px solid var(--grey-200);
    color: var(--grey-500);
    background: var(--white);
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.12s;
}
.integration-card .btn-disconnect:hover { border-color: var(--negative); color: var(--negative); }

/* ===== SDK SETUP WIZARD ===== */

/* SDK Wizard modal sizing */
.sdk-wizard-modal { width: 600px; max-width: 90vw; }

/* SDK Wizard sections */
.sdk-wizard-section { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.sdk-wizard-section:last-child { margin-bottom: 0; }
.sdk-wizard-section h3, .sdk-wizard-section h4 { font-size: 12px; font-weight: 600; color: var(--grey-700); margin-bottom: 4px; }
.sdk-wizard-section p { font-size: var(--fs-xs); color: var(--grey-500); line-height: 1.5; }

/* Code blocks (dark background) */
.sdk-code-block {
    position: relative;
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 14px 16px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    overflow-x: auto;
    border: 1px solid #313244;
    border-radius: var(--radius-sm);
}
.sdk-code-block pre { margin: 0; white-space: pre-wrap; word-break: break-all; }
.sdk-code-block code { font-family: inherit; font-size: inherit; color: inherit; }

/* Copy button for code blocks */
.sdk-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #cdd6f4;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.12s;
}
.sdk-copy-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.sdk-copy-btn.copied { background: var(--green-subtle); color: var(--green); border-color: rgba(15, 107, 69,0.3); }

/* AMP Toggle Switch */
.amp-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}
.amp-toggle-row label { font-size: 12px; font-weight: 500; color: var(--grey-700); cursor: pointer; }
.amp-toggle { position: relative; display: inline-block; width: 38px; height: 20px; }
.amp-toggle input { opacity: 0; width: 0; height: 0; }
.amp-toggle .amp-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--grey-300); transition: 0.3s; border-radius: var(--radius-md);
}
.amp-toggle .amp-slider::before {
    position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px;
    background-color: var(--white); transition: 0.3s; border-radius: 50%;
}
.amp-toggle input:checked + .amp-slider { background-color: var(--green); }
.amp-toggle input:checked + .amp-slider::before { transform: translateX(18px); }

/* AMP snippet section (hidden by default) */
.amp-snippet-section { display: none; margin-top: 8px; }
.amp-snippet-section.visible { display: block; }

/* SDK Verification indicator */
.sdk-verify-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--grey-200);
    font-size: var(--fs-xs);
    font-weight: 500;
}
.sdk-verify-indicator.verified { background: var(--green-subtle); border-color: rgba(15, 107, 69,0.2); color: var(--green); }
.sdk-verify-indicator.pending { background: rgba(245,166,35,0.08); border-color: rgba(245,166,35,0.25); color: var(--warning); }
.sdk-verify-indicator .verify-icon { width: 16px; height: 16px; flex-shrink: 0; }
.sdk-verify-indicator .verify-text { flex: 1; }
.sdk-verify-indicator .verify-time { font-size: var(--fs-xs); color: var(--grey-400); }

/* Refresh button in verification */
.sdk-verify-refresh {
    padding: 4px 10px;
    font-size: var(--fs-xs);
    font-weight: 600;
    border: 1px solid var(--grey-300);
    color: var(--grey-600);
    background: var(--white);
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.12s;
}
.sdk-verify-refresh:hover { border-color: var(--red); color: var(--red); }

/* ===== LOADING SPINNER ===== */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--grey-200);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.spinner.lg { width: 24px; height: 24px; border-width: 3px; }

/* ===== TEMPLATE MANAGER ===== */
.template-manager { display: flex; flex-direction: column; gap: 20px; }
.template-manager-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.template-manager-actions { display: flex; gap: 8px; align-items: center; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.template-card-item { border: 1px solid var(--grey-200); background: var(--white); padding: 16px; transition: all 0.15s; cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.template-card-item:hover { border-color: var(--border-strong); }
.template-card-thumb { height: 120px; background: var(--grey-50); border: 1px solid var(--grey-100); display: flex; align-items: center; justify-content: center; color: var(--grey-400); font-size: var(--fs-xs); overflow: hidden; }
.template-card-info { display: flex; flex-direction: column; gap: 4px; }
.template-card-name { font-size: 13px; font-weight: 600; color: var(--black); }
.template-card-meta { font-size: var(--fs-xs); color: var(--grey-500); }
.template-card-actions { display: flex; gap: 6px; margin-top: auto; }
.template-empty-state { text-align: center; padding: 60px 20px; color: var(--grey-400); font-size: 13px; }

/* Template Builder toolbar */
.template-builder-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--grey-200); background: var(--white); }
.template-builder-toolbar-left { display: flex; align-items: center; gap: 12px; }
.template-builder-toolbar-right { display: flex; align-items: center; gap: 8px; }
.template-name-input { border: 1px solid var(--grey-200); padding: 6px 10px; font-family: var(--font); font-size: 13px; font-weight: 500; outline: none; width: 200px; transition: border-color 0.12s; }
.template-name-input:focus { border-color: var(--red); }
.template-category-select { border: 1px solid var(--grey-200); padding: 6px 10px; font-family: var(--font); font-size: var(--fs-xs); outline: none; background: var(--white); cursor: pointer; }
.mode-toggle-btn { padding: 9px 16px; font-size: var(--fs-xs); font-weight: 500; border: 1px solid var(--grey-300); background: var(--white); color: var(--grey-700); cursor: pointer; font-family: var(--font); transition: all 0.12s; }
.mode-toggle-btn.active { background: var(--red); color: var(--white); border-color: var(--red); }

/* Template Manager Grid Layout */
.template-mgr-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.template-mgr-left { display: flex; align-items: center; gap: 8px; }
.template-mgr-right { display: flex; align-items: center; gap: 10px; }
.template-mgr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding: 0 0 20px; }
.template-mgr-empty { grid-column: 1 / -1; }

/* Template Card (Manager) */
.template-card { border: 1px solid var(--grey-200); background: var(--white); cursor: pointer; display: flex; flex-direction: column; transition: all 0.15s; overflow: hidden; }
.template-card:hover { border-color: var(--border-strong); }
.template-card-thumb { height: 100px; background: var(--grey-50); border-bottom: 1px solid var(--grey-100); display: flex; align-items: center; justify-content: center; color: var(--grey-300); font-size: 28px; }
.template-card-thumb-placeholder { opacity: 0.5; }
.template-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.template-card-name { font-size: 13px; font-weight: 600; color: var(--black); }
.template-card-meta { display: flex; align-items: center; gap: 8px; }
.template-card-status { font-size: var(--fs-xs); font-weight: 600; }
.template-card-status.published { color: var(--green); }
.template-card-status.draft { color: var(--grey-400); }
.template-card-date { font-size: var(--fs-xs); color: var(--grey-400); }
.template-card-actions { display: flex; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--grey-100); }
.badge-sm { font-size: var(--fs-xs); padding: 1px 6px; background: var(--grey-100); border: 1px solid var(--grey-150); color: var(--grey-600); font-weight: 500; }

/* Template Builder Layout */
.template-builder-left { display: flex; align-items: center; gap: 12px; }
.template-builder-right { display: flex; align-items: center; gap: 8px; }

/* Starter Template Grid */
.starter-template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.starter-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--grey-200); cursor: pointer; transition: all 0.15s; }
.starter-card:hover { border-color: var(--red); background: var(--red-light); }
.starter-icon { font-size: 22px; flex-shrink: 0; }
.starter-info h3, .starter-info h4 { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.starter-info p { font-size: var(--fs-xs); color: var(--grey-500); }

/* Small buttons for template card actions */
.btn-sm { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 12px; border: 1px solid var(--grey-200); background: var(--white); color: var(--grey-600); cursor: pointer; transition: all 0.12s; }
.btn-sm:hover { border-color: var(--red); color: var(--red); }
.btn-sm.delete:hover { border-color: var(--negative); color: var(--negative); }

/* Draft button */
.btn-draft { padding: 7px 14px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--grey-300); background: var(--white); color: var(--grey-700); cursor: pointer; font-family: var(--font); transition: all 0.12s; }
.btn-draft:hover { border-color: var(--red); color: var(--red); }

/* Back button */
.btn-back { font-size: 12px; font-weight: 500; color: var(--grey-600); cursor: pointer; font-family: var(--font); background: none; border: none; padding: 6px 0; transition: color 0.12s; }
.btn-back:hover { color: var(--red); }


/* ===== CUSTOMER IMPORT WIZARD ===== */
.import-wizard-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 7000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.import-wizard { background: var(--white); width: 680px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.15); }
.import-wizard-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--grey-100); }
.import-wizard-header h2, .import-wizard-header h3 { font-size: 15px; font-weight: 700; }
.import-wizard-body { flex: 1; overflow-y: auto; padding: 24px; }
.import-wizard-footer { padding: 16px 24px; border-top: 1px solid var(--grey-100); display: flex; justify-content: space-between; align-items: center; }
.import-step-indicator { display: flex; gap: 0; align-items: center; margin-bottom: 24px; }
.import-step { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--grey-400); font-weight: 500; }
.import-step.active { color: var(--red); font-weight: 600; }
.import-step.completed { color: var(--green); }
.import-step-dot { width: 20px; height: 20px; border: 1.5px solid var(--grey-300); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; }
.import-step.active .import-step-dot { border-color: var(--red); color: var(--red); }
.import-step.completed .import-step-dot { border-color: var(--green); background: var(--green); color: white; }
.import-step-connector { width: 30px; height: 1px; background: var(--grey-200); margin: 0 6px; }
.import-dropzone { border: 2px dashed var(--grey-300); padding: 48px 24px; text-align: center; cursor: pointer; transition: all 0.15s; }
.import-dropzone:hover { border-color: var(--red); background: var(--red-light); }
.import-dropzone.dragover { border-color: var(--red); background: var(--red-light); }
.import-dropzone-icon { font-size: 36px; margin-bottom: 12px; }
.import-dropzone-text { font-size: 12px; color: var(--grey-500); }
.import-file-info { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--grey-50); border: 1px solid var(--grey-200); margin-top: 16px; }
.import-mapping-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.import-mapping-table th { text-align: left; padding: 8px 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--grey-400); border-bottom: 1px solid var(--grey-150); }
.import-mapping-table td { padding: 8px 10px; border-bottom: 1px solid var(--grey-100); }
.import-confidence-badge { font-size: var(--fs-xs); padding: 2px 6px; font-weight: 600; }
.import-confidence-badge.high { background: var(--green-subtle); color: var(--green); }
.import-confidence-badge.medium { background: rgba(245,166,35,0.1); color: var(--warning); }
.import-confidence-badge.low { background: var(--grey-100); color: var(--grey-400); }
.import-summary-card { padding: 20px; background: var(--grey-50); border: 1px solid var(--grey-200); display: flex; flex-direction: column; gap: 12px; }
.import-summary-row { display: flex; justify-content: space-between; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--grey-100); }
.import-summary-row:last-child { border-bottom: none; }
.import-result-success { color: var(--green); font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 16px; }
.import-result-error { color: var(--negative); font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 16px; }
.import-error-table { width: 100%; font-size: var(--fs-xs); border-collapse: collapse; margin-top: 12px; }
.import-error-table th { text-align: left; padding: 6px 8px; background: var(--grey-50); font-size: var(--fs-xs); font-weight: 600; color: var(--grey-400); }
.import-error-table td { padding: 6px 8px; border-bottom: 1px solid var(--grey-100); }
.import-radio-group { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.import-radio-label { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; padding: 10px 14px; border: 1px solid var(--grey-200); transition: all 0.12s; }
.import-radio-label:hover { border-color: var(--red); }
.import-radio-label input:checked ~ span { color: var(--red); font-weight: 600; }
.import-badge-new { font-size: var(--fs-xs); padding: 2px 6px; background: var(--green-subtle); color: var(--green); border: 1px solid rgba(15, 107, 69,0.2); font-weight: 600; }
.import-badge-duplicate { font-size: var(--fs-xs); padding: 2px 6px; background: rgba(245,166,35,0.1); color: var(--warning); border: 1px solid rgba(245,166,35,0.2); font-weight: 600; }


/* ===== MOBILE GATE — Full-screen app download page for mobile users ===== */
#mobileGate {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 99999;
    min-height: 100vh;
    width: 100%;
    background: var(--primary);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 599px) {
    #mobileGate {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .app, .login-overlay { display: none !important; }
}

.mobile-gate-content {
    padding: 40px 28px;
    text-align: center;
    max-width: 380px;
    width: 100%;
}

#mobileGate h1 {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 14px;
}

.mobile-gate-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
    margin-bottom: 28px;
}

.mobile-gate-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
    text-align: left;
}

.mobile-gate-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
}

.mobile-gate-feature svg {
    color: var(--accent);
    flex-shrink: 0;
}

.mobile-gate-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 32px;
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-gate-stats div {
    text-align: center;
}

.mobile-gate-stats strong {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
}

.mobile-gate-stats span {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.88);
}

.mobile-gate-cta-text {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 16px;
}

.mobile-gate-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 24px;
}

.mobile-gate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    min-height: 44px;
    min-width: 44px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
    border-radius: var(--radius-sm);
}

.mobile-gate-btn:hover, .mobile-gate-btn:active {
    background: rgba(17, 36, 26, 0.15);
    border-color: var(--accent);
}

.mobile-gate-footer {
    font-size: var(--fs-xs);
    /* 0.65 alpha compounded with 0.7 opacity landed this around 2:1. */
    color: rgba(255, 255, 255, 0.88);
    margin-top: 16px;
}

/* Sub-360px: stack buttons vertically, tighten spacing */
@media (max-width: 359px) {
    .mobile-gate-buttons {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .mobile-gate-btn {
        width: 100%;
        justify-content: center;
    }

    .mobile-gate-features {
        gap: 8px;
        margin-bottom: 20px;
    }

    .mobile-gate-stats {
        margin-bottom: 24px;
        padding: 12px 0;
    }
}

/* ===== COMING SOON MODAL ===== */
#comingSoonModal.modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    backdrop-filter: none;
}

#comingSoonModal .modal-content {
    position: relative;
    background: #1a1a2e;
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    width: 90%;
    max-width: 320px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

#comingSoonModal .modal-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.15s;
}

#comingSoonModal .modal-close-btn:hover {
    opacity: 0.7;
}

#comingSoonModal .modal-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
}

#comingSoonModal .modal-message {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}

#comingSoonModal .modal-desktop-hint {
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    #comingSoonModal.modal-overlay,
    #comingSoonModal .modal-content {
        transition: none;
        animation: none;
    }
}

/* ===== LIME HIGHLIGHT BADGE ===== */
.badge-lime { background: var(--lime) !important; color: var(--black) !important; border: none !important; font-weight: 600; }


/* ===== CHART FILTER PILLS ===== */
.chart-filter-pill { padding: 6px 14px; font-size: 12px; font-weight: 500; border-radius: var(--radius-pill); border: 1px solid var(--grey-200); background: var(--grey-50); color: var(--grey-600); cursor: pointer; font-family: var(--font); transition: all 0.15s; }
.chart-filter-pill:hover { border-color: var(--grey-300); color: var(--black); }
.chart-filter-pill.active { background: var(--accent); color: var(--white); border-color: var(--accent); font-weight: 500; }

/* ===== Cohort Retention Matrix ===== */
.cohort-table { width: 100%; border-collapse: separate; border-spacing: 6px; }
.cohort-table th { font-size: var(--fs-xs); font-weight: 500; color: var(--grey-400); letter-spacing: 0.1em; padding: 8px 8px; text-align: center; font-family: var(--font-mono); }
.cohort-table th:first-child { text-align: left; font-family: var(--font); width: 64px; }
.cohort-table th:nth-child(2) { text-align: left; font-family: var(--font); width: 76px; }
.cohort-table td { padding: 3px; text-align: center; }
.cohort-table td:first-child { width: 64px; }
.cohort-table td:nth-child(2) { width: 76px; }
.cohort-label { font-size: 12px; font-weight: 500; color: var(--grey-600); text-align: left !important; font-family: var(--font-mono); }
.cohort-size { font-size: 12px; color: var(--grey-400); text-align: left !important; font-family: var(--font-mono); }
.cohort-cell { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; border-radius: var(--radius-md); font-size: 12px; font-weight: 600; font-family: var(--font-mono); transition: transform 0.15s ease; }

/* Mono font for all numbers */
.stat-value, .td-num, .channel-val, .chart-legend-val, .funnel-open-label, .cohort-cell, .cohort-label, .cohort-size { font-family: var(--font-mono); }

/* Cohort cell hover */
.cohort-cell-hover { cursor: default; transition: transform 0.15s ease; }
.cohort-cell-hover:hover { outline: 2px solid var(--primary); outline-offset: -2px; position: relative; z-index: 5; }
.cohort-cell-empty { background: rgba(10,61,42,0.04); color: var(--grey-300); }
.cohort-cell-m0 { background: #f0f0ea; color: var(--grey-600); }
.cohort-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--black);
    color: var(--white);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    box-shadow: var(--shadow-2);
    animation: tooltipIn 0.15s ease;
}
@keyframes tooltipIn { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ===== JOURNEYS PAGE ===== */
.journeys-page { padding: 0; }
.journeys-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.journeys-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--black); }
.journeys-subtitle { font-size: 13px; color: var(--grey-400); margin-top: 4px; }
.journeys-list { display: flex; flex-direction: column; gap: 12px; }

.journey-card {
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(16,20,16,0.04), 0 8px 24px -12px rgba(16,20,16,0.08);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.journey-card:hover { box-shadow: 0 4px 16px rgba(16,20,16,0.1); }

.journey-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}
.journey-status-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.journey-status-dot.live { background: var(--green); animation: pulse-dot 2s ease-in-out infinite; }
.journey-status-dot.paused { background: #b97f18; }
.journey-status-dot.draft { background: var(--grey-300); }
.journey-status-dot.stopped { background: var(--negative); }

.journey-card-info { flex: 1; min-width: 0; cursor: pointer; }
.journey-card-name { font-size: 14.5px; font-weight: 600; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey-card-meta { font-size: 12px; color: var(--grey-400); margin-top: 2px; }

.journey-card-right { display: flex; align-items: center; gap: 6px; }
.journey-action-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--grey-200); border-radius: var(--radius-md);
    color: var(--grey-500); background: var(--white);
    cursor: pointer; transition: all 0.12s;
}
.journey-action-btn:hover { color: var(--black); border-color: var(--grey-300); }
.journey-action-btn.danger:hover { color: var(--negative); border-color: rgba(194,72,63,0.3); }
.journey-action-btn.success:hover { color: var(--green); border-color: rgba(15,107,69,0.3); }

.journey-canvas-btn {
    height: 32px; display: flex; align-items: center; gap: 6px;
    padding: 0 10px; border: 1px solid var(--grey-200); border-radius: var(--radius-md);
    font-size: 12px; color: var(--grey-500); background: var(--white);
    cursor: pointer; transition: all 0.12s; font-family: var(--font);
}
.journey-canvas-btn:hover { color: var(--black); border-color: var(--grey-300); }

.journey-expand-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    color: var(--grey-400); cursor: pointer; transition: transform 0.25s;
    background: none; border: none;
}
.journey-expand-btn.open svg { transform: rotate(180deg); }

/* Performance Panel */
.journey-perf-panel {
    border-top: 1px solid var(--border-subtle);
    background: var(--surface);
    padding: 16px 20px;
    display: none;
}
.journey-perf-panel.open { display: block; }
.journey-perf-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.journey-perf-label { font-size: 12px; font-weight: 600; color: var(--grey-400); }
.journey-perf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.journey-perf-card {
    background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-lg); padding: 12px 14px;
}
.journey-perf-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.journey-perf-card-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(15,107,69,0.08); border-radius: var(--radius-md); color: var(--green); }
.journey-perf-card-value { font-size: 18px; font-weight: 700; color: var(--black); font-family: var(--font-mono); }
.journey-perf-card-label { font-size: var(--fs-xs); color: var(--grey-400); margin-top: 2px; }

@media (max-width: 768px) {
    .journey-perf-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   GLOBAL MOTION + INTERACTION LAYER
   Standardizes hover/press feedback, enter animations for overlays, keyboard
   focus visibility, and honors reduced-motion. Additive — screen styles win
   on specificity where they already define behavior.
   ========================================================================= */

/* Keyboard focus ring — visible only for keyboard users, never on mouse click.
   Applies app-wide so every interactive control is reachable and legible. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* Nav items: smooth hover/active + a press cue */
.nav-item { transition: background var(--dur-fast) var(--ease-out),
                        color var(--dur-fast) var(--ease-out),
                        transform var(--dur-instant) var(--ease-out); }


/* Primary + secondary buttons: consistent press feedback */
.btn-create:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-1); }


/* Cards: gentle lift so lists feel tactile (only where not already animated) */
.stat-card, .integration-card {
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

/* Overlays/panels get a real enter animation (they toggle display in JS) */
.modal-overlay { animation: overlayFade var(--dur-fast) var(--ease-out); }
.modal-overlay > * { animation: overlayPop var(--dur-base) var(--ease-out) both; }
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlayPop {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toasts already animate; ensure dropdowns/popovers ease in consistently */
.notif-dropdown.open, .filter-dropdown { animation: dropIn var(--dur-fast) var(--ease-out); }
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Events table rows: CSS hover replaces per-row inline onmouseenter JS */
.events-row { border-bottom: 1px solid var(--grey-100); transition: background var(--dur-fast) var(--ease-out); }
.events-row:hover { background: var(--grey-50); }

/* Exit animation for list items that otherwise snap out (segments blocks, etc.) */
@keyframes lcCollapseOut { from { opacity: 1; } to { opacity: 0; transform: translateX(-8px); } }
.lc-removing { animation: lcCollapseOut var(--dur-fast) var(--ease-in-out) forwards; pointer-events: none; }

/* Skeleton shimmer utility for loading states (opt-in via .skeleton) */
.skeleton {
    /* Loading shimmer, not decoration: the only gradient in the product. */
    background: linear-gradient(90deg, var(--surface-secondary) 25%, var(--border-subtle) 37%, var(--surface-secondary) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
    color: transparent !important;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Respect user's reduced-motion preference across the whole app */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== NEW INTEGRATIONS PAGE (Card Grid Design) ===== */
.int-filter-tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.int-tab { padding:7px 14px; border-radius: var(--radius-md); border:1px solid var(--grey-200); background:#fff; font-size:12px; font-weight:500; color:var(--grey-600); cursor:pointer; transition:all 0.15s; }
.int-tab:hover { border-color:var(--green); color:var(--black); }
.int-tab.active { background:var(--black); color:#fff; border-color:var(--black); }
.int-section { margin-bottom:20px; }
.int-cards-row { display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.int-cards-row::-webkit-scrollbar { height:4px; }
.int-cards-row::-webkit-scrollbar-thumb { background:var(--grey-200); border-radius: var(--radius-sm); }
.int-pcard { min-width:184px; max-width:184px; padding:14px; border:1px solid var(--grey-200); border-radius: var(--radius-xl); background:#fff; display:flex; flex-direction:column; scroll-snap-align:start; transition:border-color 0.15s, box-shadow 0.15s; }
.int-pcard:hover { border-color:rgba(15,107,69,0.4); box-shadow:0 4px 16px rgba(16,20,16,0.06); }


/* ===== EMAIL EDITOR — per-device property tabs ===== */
.device-tabs { display: flex; gap: 6px; }
.device-tab {
    flex: 1; padding: 7px 10px; font-size: var(--fs-xs); font-weight: 500; font-family: var(--font);
    border: 1px solid var(--grey-200); background: var(--white); color: var(--grey-500);
    border-radius: var(--radius-md); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.device-tab:hover { border-color: var(--grey-300); color: var(--black); }
.device-tab.active { background: var(--accent, var(--accent)); border-color: var(--accent, var(--accent)); color: #fff; }
.device-hint { font-size: var(--fs-xs); color: var(--grey-500); line-height: 1.5; margin-top: 6px; }
.device-reset {
    background: none; border: none; padding: 0; font-size: var(--fs-xs); font-family: var(--font);
    color: var(--grey-600); text-decoration: underline; cursor: pointer;
}
.device-reset:hover { color: var(--black); }

/* ===== CONVERSION GOAL (campaign scheduling step) ===== */
.conversion-row { display: flex; gap: 16px; flex-wrap: wrap; }
.conversion-row .form-group { flex: 1 1 240px; min-width: 220px; margin-bottom: 0; }
.attribution-row { display: flex; align-items: center; gap: 8px; }
.attribution-row .f-input { width: 90px; }
.field-required { color: var(--danger); margin-left: 2px; }

/* =========================================================================
   AI COPILOT — launcher + slide-over chat panel (ai-copilot.js)
   ========================================================================= */
/* Clagee AI launcher: a circular mark that reveals its label on hover/focus. */
.ai-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: var(--z-fab);
    display: none; align-items: center; gap: 0;
    height: 56px; padding: 0; border-radius: var(--radius-pill); border: 2px solid var(--white);
    background: var(--accent); color: var(--white); font-family: var(--font); font-size: var(--fs-md); font-weight: 600;
    box-shadow: 0 10px 30px rgba(16, 20, 16, 0.22); cursor: pointer; overflow: hidden;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
                gap var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
}
.ai-fab-mark { width: 52px; height: 52px; border-radius: 50%; display: block; object-fit: cover; flex-shrink: 0; }
.ai-fab-label { max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden;
    transition: max-width var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.ai-fab:hover, .ai-fab:focus-visible, .ai-fab.active { gap: 6px; padding-right: 18px; }
.ai-fab:hover .ai-fab-label, .ai-fab:focus-visible .ai-fab-label, .ai-fab.active .ai-fab-label { max-width: 160px; opacity: 1; }
.ai-fab:hover { background: var(--primary-hover); box-shadow: var(--shadow-3); }
.ai-fab.active { background: var(--green); }
.ai-fab::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
    animation: aiPulseRing 3s var(--ease-out) infinite; }
@keyframes aiPulseRing { 0% { box-shadow: 0 0 0 0 rgba(212, 251, 68, 0.55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(212, 251, 68, 0); } }
.ai-fab-icon { font-size: 15px; line-height: 1; }
.ai-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; z-index: 950;
    display: flex; flex-direction: column; background: #fff; border-left: 1px solid var(--grey-200);
    box-shadow: -18px 0 48px rgba(16, 20, 16, 0.12); transform: translateX(104%);
    transition: transform .22s cubic-bezier(.2,.8,.2,1); font-family: var(--font);
}
.ai-panel.open { transform: translateX(0); }
.ai-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--grey-150); }
.ai-head-title { display: flex; align-items: center; gap: 10px; }
.ai-spark { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ai-spark img { width: 32px; height: 32px; display: block; object-fit: cover; }
.ai-title { font-size: 14px; font-weight: 700; color: var(--black); }
.ai-sub { font-size: var(--fs-xs); color: var(--grey-500); margin-top: 2px; }
.ai-head-actions { display: flex; gap: 6px; }
.ai-icon-btn { width: 30px; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--grey-200); background: #fff; color: var(--grey-600); cursor: pointer; font-size: 14px; }
.ai-icon-btn:hover { background: var(--grey-50); color: var(--black); }
.ai-messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--grey-50); }
.ai-msg { max-width: 92%; padding: 11px 14px; border-radius: var(--radius-xl); font-size: 14px; line-height: 1.55; word-wrap: break-word; }
.ai-msg-user { align-self: flex-end; background: var(--black); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.ai-msg-assistant { align-self: flex-start; background: #fff; color: var(--grey-700); border: 1px solid var(--grey-150); border-bottom-left-radius: 4px; }
.ai-msg-assistant p { margin: 0; }
.ai-msg-assistant .ai-gap { height: 8px; }
.ai-msg-assistant .ai-h { font-weight: 700; color: var(--black); margin-top: 4px; }
.ai-msg-assistant ul, .ai-msg-assistant ol { margin: 4px 0 4px 18px; padding: 0; }
.ai-msg-assistant li { margin: 2px 0; }
.ai-msg-assistant code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--grey-100); padding: 1px 5px; border-radius: var(--radius-sm); }
.ai-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ai-action { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-md); background: var(--green-subtle); border: 1px solid rgba(15,107,69,.18); font-size: 12px; color: var(--black); }
.ai-action-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.ai-action-label { flex: 1; }
.ai-action-open { border: 1px solid var(--green); background: #fff; color: var(--green); border-radius: var(--radius-md); padding: 3px 10px; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.ai-action-open:hover { background: var(--green); color: #fff; }
.ai-thinking { display: flex; gap: 5px; padding: 14px 16px; }
.ai-thinking span { width: 7px; height: 7px; border-radius: 50%; background: var(--grey-300); animation: aiPulse 1.1s infinite ease-in-out; }
.ai-thinking span:nth-child(2) { animation-delay: .15s; }
.ai-thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes aiPulse { 0%, 80%, 100% { transform: scale(.7); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px; background: var(--grey-50); }
.ai-suggest:empty { display: none; }
.ai-chip { border: 1px solid var(--grey-200); background: #fff; color: var(--grey-700); border-radius: var(--radius-pill); padding: 6px 11px; font-size: 12px; cursor: pointer; text-align: left; }

/* Shown inside the panel when the plan does not include the assistant, so the
   launcher can stay in the shell for every signed-in person. It sits in its own
   slot rather than in the message list: it is the panel's state, not a turn in
   the conversation. */
.ai-notice:empty { display: none; }
.ai-notice { padding: 0 14px 12px; }
.ai-unavailable {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--space-2); padding: var(--space-4);
    background: var(--surface-secondary); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}
.ai-unavailable__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-primary); }
.ai-unavailable__body { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); }
.ai-chip:hover { border-color: var(--green); color: var(--green); }
.ai-compose { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--grey-150); background: #fff; }
.ai-compose textarea { flex: 1; resize: none; border: 1px solid var(--grey-200); border-radius: var(--radius-lg); padding: 10px 12px; font-family: var(--font); font-size: 14px; line-height: 1.4; outline: none; max-height: 160px; }
.ai-compose textarea:focus { border-color: var(--green); }
.ai-compose textarea:disabled { background: var(--grey-50); color: var(--grey-400); }
.ai-send { width: 40px; height: 40px; border-radius: var(--radius-lg); border: none; background: var(--green); color: #fff; cursor: pointer; font-size: 14px; }
.ai-send:disabled { background: var(--grey-200); cursor: default; }
.ai-foot { padding: 6px 16px 10px; font-size: var(--fs-xs); color: var(--grey-400); background: #fff; }
@media (max-width: 720px) { .ai-panel { width: 100vw; } .ai-fab-label { display: none; } }


/* ---- Data flow panel (Integrations → Data flow) ---- */
.df-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:12px; }
.df-card { border:1px solid var(--grey-200); border-radius: var(--radius-xl); background:#fff; padding:14px 16px; color:var(--black); }
.df-card-title { font-size:12px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; flex-wrap:wrap; }
.df-sub { font-size: var(--fs-xs); font-weight:600; color:var(--grey-600); margin-bottom:6px; }
.df-table { width:100%; border-collapse:collapse; font-size: var(--fs-xs); }
.df-table th { text-align:left; font-size: var(--fs-xs); font-weight:600; color:var(--grey-400); padding:4px 6px; border-bottom:1px solid var(--grey-150); }
.df-table td { padding:5px 6px; border-bottom:1px solid var(--grey-100); vertical-align:top; }
.df-input { width:100%; border:1px solid var(--grey-200); padding:5px 8px; font-size: var(--fs-xs); font-family:var(--font); outline:none; background:#fff; }
.df-input:focus { border-color:var(--grey-600); }
.df-input:disabled { background:var(--bg); color:var(--grey-600); }
.df-mini-btn { font-size: var(--fs-xs); font-weight:600; padding:4px 8px; border:1px solid var(--grey-200); background:#fff; cursor:pointer; font-family:var(--font); color:var(--black); border-radius: var(--radius-sm); }
.df-mini-btn:hover { border-color:var(--grey-600); }
.df-mini-btn.danger { color:var(--negative); }
.df-badge { display:inline-block; font-size: var(--fs-xs); font-weight:600; padding:2px 7px; border-radius: var(--radius-md); letter-spacing:0.03em; }
.df-badge.ok { background:var(--green-subtle-solid); color:var(--green); }
.df-badge.warn { background:var(--warning-subtle); color:var(--warning); }
.df-badge.bad { background:var(--negative-subtle-solid); color:var(--negative); }
.df-endpoint { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--grey-100); }
.df-endpoint-name { font-size: var(--fs-xs); font-weight:600; color:var(--grey-600); min-width:84px; text-transform:capitalize; }
.df-endpoint-url { flex:1; font-size: var(--fs-xs); color:var(--black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--bg); padding:3px 6px; border-radius: var(--radius-sm); }
.import-attr-key:focus { border-color:var(--red); }

/* =========================================================================
   DESIGN SYSTEM LAYER — component contracts every screen inherits.
   Type floor, focus, motion, tables, responsive rail, utilities.
   See docs/DESIGN_SYSTEM.md.
   ========================================================================= */

/* Typography */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--text-1); }
h1, h2, h3, h4 { line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--text-1); }
small, .small { font-size: var(--fs-xs); }
.u-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--tracking-normal); color: var(--text-secondary); }
.u-caption { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-normal); }
.u-muted { color: var(--text-3); }
.u-mono { font-family: var(--font-mono); }
.u-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Keyboard focus: one ring for every control, including text fields whose
   own rules used to swallow the outline. Mouse clicks never show it. */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible,
a:focus-visible, [tabindex]:focus-visible, [contenteditable]:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-light);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible {
    outline-offset: 0;
    border-color: var(--accent) !important;
}

/* Motion: every control eases the same way; hovers never snap. */
button, [role="button"], a, select, input, textarea, label.import-radio-label,
.int-tab, .page-tab, .filter-chip, .nav-item, .df-mini-btn, .badge, .tag-chip, .action-btn, .step, .device-tab {
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}

button:disabled { cursor: not-allowed; opacity: 0.55; }

/* Surfaces lift gently and consistently */
.card, .df-card, .journey-card, .template-card, .stat-card, .int-pcard, .kpi-card, .starter-card, .journey-perf-card {
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

/* Page transitions: a view fades and rises as it becomes active */
/* The fade deliberately carries NO animation-fill-mode. An element with a
   filled opacity animation stays a compositing/stacking context for good, and
   that quietly trapped every overlay inside the page view: the plan editor and
   this console's profile drawer were both painted under the 64px top bar,
   whatever z-index they asked for. The keyframes end where the base style
   already is, so `both` bought nothing and cost that. */
.page-view.active { animation: viewIn var(--dur-base) var(--ease-out); }
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }

/* Overlays: every layer enters the same way (scrim fades, surface pops) */
.import-wizard-overlay { animation: overlayFade var(--dur-fast) var(--ease-out); }
.import-wizard { animation: overlayPop var(--dur-base) var(--ease-out) both; border-radius: var(--radius-xl); overflow: hidden; }
.export-overlay, .cmd-palette-overlay, .login-overlay { animation: overlayFade var(--dur-fast) var(--ease-out); }
.export-modal, .cmd-palette, .sdk-wizard-modal { animation: overlayPop var(--dur-base) var(--ease-out) both; }
.notif-panel { transition: transform var(--dur-slow) var(--ease-emphasized), box-shadow var(--dur-slow) var(--ease-out); }
.toast { animation: toastIn var(--dur-slow) var(--ease-out); transition: opacity var(--dur-base) var(--ease-in-out), transform var(--dur-base) var(--ease-in-out); }

/* Tables: legible headers, hover rows, never wrapped headers, scroll inside the card */
/* One table contract for every data page. */
table thead th {
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-normal); text-transform: none;
    color: var(--text-secondary); white-space: nowrap;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
    text-align: left;
    background: var(--surface);
}
table tbody td {
    font-size: var(--fs-md); color: var(--text-primary);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
table tbody tr:last-child > td { border-bottom: none; }
table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
table tbody tr:hover > td { background: var(--surface-hover); }
table tbody tr[aria-selected="true"] > td, table tbody tr.is-selected > td { background: var(--primary-soft); }
/* Numbers read right-aligned and tabular so columns line up. */
.td-num, th.td-num, td.td-num { text-align: right; font-variant-numeric: tabular-nums; }
.td-name { font-weight: var(--fw-medium); }
/* Long tables keep their header in view. */
.table-wrap--sticky thead th { position: sticky; top: 0; z-index: 1; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#view-campaigns .table-wrap > table, #view-customers .table-wrap > table, #view-analytics .table-wrap > table, #view-events .table-wrap > table { min-width: 720px; }

/* Forms */
.f-input, .f-select, .df-input, .rich-input, .import-mapping-select, .search-box { border-radius: var(--radius-md); }
::placeholder { color: var(--text-tertiary); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { color: var(--text-disabled); background: var(--surface-secondary); cursor: not-allowed; }

/* Badges & chips share one shape */
.badge, .df-badge, .import-confidence-badge, .import-badge-new, .import-badge-duplicate, .tag-chip { border-radius: var(--radius-sm); }

/* Scrollbars */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--grey-200); border-radius: var(--radius-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--grey-300); }

/* Responsive: the rail collapses (JS) and grids step down before content squeezes */
@media (max-width: 1180px) {
    .content { padding: 20px 20px 40px; gap: 20px; }
    .stats-grid, #view-campaigns .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .df-grid { grid-template-columns: 1fr; }
    .grid-2col { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
    .topbar { padding: 12px 16px; }
    .page-title { font-size: 18px; }
    .search-box input { width: 48px; }
}

/* Reduced motion: no movement, instant state changes (also covers the layer above) */
@media (prefers-reduced-motion: reduce) {
    .page-view.active, .import-wizard, .import-wizard-overlay, .modal-overlay, .modal-overlay > *, .toast, .export-modal, .cmd-palette { animation: none !important; }
    .stat-card:hover, .btn-create:hover, .int-pcard:hover, .color-swatch:hover { transform: none !important; }
}


/* ---- Roles & access + AI usage panels ---- */
.role-pill { background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
.role-pill:hover { color: var(--accent); text-decoration: underline; }
.roles-current { margin-bottom: 14px; }
.roles-you { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-2); padding: 12px 14px; background: var(--grey-50); border: 1px solid var(--border); border-radius: var(--radius-md); }
.roles-you-pill { font-size: var(--fs-xs); font-weight: 700; color: var(--white); background: var(--accent); padding: 4px 10px; border-radius: var(--radius-pill); }
.roles-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.roles-matrix th, .roles-matrix td { padding: 9px 10px; border-bottom: 1px solid var(--grey-100); }
.roles-matrix th { text-align: center; }
.roles-matrix th:first-child, .roles-matrix td:first-child { text-align: left; color: var(--text-2); }
.roles-cell { text-align: center; }
.roles-col-you { background: var(--green-subtle); }
.roles-yes { color: var(--green); font-weight: 700; }
.roles-no { color: var(--grey-350); }
.ai-usage-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ai-kpi { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.ai-kpi-value { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 700; color: var(--text-1); line-height: var(--lh-tight); margin-bottom: 4px; }
.ai-usage-days { display: flex; align-items: flex-end; gap: 4px; height: 84px; padding: 6px 0 0; overflow-x: auto; }
.ai-day { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 28px; }
.ai-day-bar { width: 18px; background: var(--green); border-radius: 3px 3px 0 0; transition: height var(--dur-base) var(--ease-out); }
.ai-day span { font-size: var(--fs-xs); color: var(--text-3); font-family: var(--font-mono); }


/* ---- Clagee AI on every page (ai-features.js) ---- */
.aif-mark { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.aif-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.aif-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-1); }
.aif-briefing { padding: 16px 20px; margin-bottom: 16px; border-left: 4px solid var(--lime); }
.aif-headline { font-size: var(--fs-lg); font-weight: 600; color: var(--text-1); line-height: 1.45; margin: 4px 0 8px; }
.aif-bullets { margin: 6px 0 0 18px; padding: 0; font-size: var(--fs-md); color: var(--text-2); line-height: 1.55; }
.aif-bullets li { margin: 2px 0; }
.aif-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.aif-chip { border: 1px solid var(--border); background: var(--white); color: var(--text-1); border-radius: var(--radius-pill); padding: 6px 12px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; font-family: var(--font); }
.aif-chip:hover { border-color: var(--green); color: var(--green); }
.aif-refresh { margin-left: auto; }
.aif-strip { padding: 14px 18px; margin-bottom: 16px; }
.aif-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.aif-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.aif-card-name { font-size: var(--fs-md); font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aif-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.aif-next { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; background: var(--green-subtle); border-radius: var(--radius-md); }
.aif-do { padding: 8px 14px; font-size: var(--fs-sm); }
.aif-compose-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 10px 5px 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--white); color: var(--text-1); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; font-family: var(--font); }
.aif-compose-btn:hover { border-color: var(--green); color: var(--green); }
.aif-pop { position: relative; z-index: 5; margin-top: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 10px; max-width: 560px; animation: overlayPop var(--dur-base) var(--ease-out) both; }
.aif-pop-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.aif-pop-close { margin-left: auto; background: none; border: none; color: var(--text-3); cursor: pointer; font-size: var(--fs-md); }
.aif-pop-row { display: flex; gap: 8px; flex-wrap: wrap; }
.aif-pop-row .f-input, .aif-pop-row .f-select { flex: 1; min-width: 140px; width: auto; }
.aif-results { display: flex; flex-direction: column; gap: 6px; }
.aif-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.aif-option-text { font-size: var(--fs-md); color: var(--text-1); line-height: 1.45; }


/* ---- Registration wizard (signup.js) + onboarding ---- */
.su-wizard { display: flex; flex-direction: column; gap: 6px; animation: viewIn var(--dur-base) var(--ease-out) both; }
.su-steps { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; flex-wrap: wrap; }
.su-step { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; }
.su-step + .su-step::before { content: ""; width: 10px; height: 1px; background: var(--border); margin-right: 4px; }
/* Compact stepper: numbered dots for every step, a label only for the current one. */
.su-step:not(.active) > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.su-step { position: relative; }
.su-steps { flex-wrap: nowrap; }
/* File pickers inside the wizard and settings use the button style, not the browser default. */
input[type="file"] { font-family: var(--font); font-size: var(--fs-xs); color: var(--text-3); }
input[type="file"]::file-selector-button { font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; color: var(--text-1); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 12px; margin-right: 8px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
input[type="file"]::file-selector-button:hover { border-color: var(--green); color: var(--green); }
.su-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); background: var(--white); color: var(--text-3); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.su-step.active { color: var(--text-1); }
.su-step.active .su-dot { background: var(--accent); border-color: var(--accent); color: var(--white); }
.su-step.done .su-dot { background: var(--green-subtle-solid); border-color: var(--green); color: var(--green); }
.su-title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
.su-desc { font-size: var(--fs-sm); color: var(--text-3); line-height: var(--lh-normal); margin-bottom: 16px; }
.su-form { display: flex; flex-direction: column; gap: 8px; }
.su-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); letter-spacing: .02em; margin-top: 6px; }
.su-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.su-row .f-input { flex: 1; min-width: 160px; }
.su-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.su-strength { display: flex; gap: 4px; height: 4px; margin-top: 2px; }
.su-strength span { flex: 1; background: var(--grey-150); border-radius: 2px; transition: background var(--dur-fast) var(--ease-out); }
.su-strength span.weak { background: var(--negative); } .su-strength span.ok { background: var(--amber); } .su-strength span.strong { background: var(--green); }
.su-check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-2); margin-top: 8px; }
.su-check a { color: var(--green); text-decoration: underline; }
.su-error { font-size: var(--fs-xs); color: var(--negative); background: var(--negative-subtle-solid); padding: 8px 10px; border-radius: var(--radius-md); }
.su-primary { width: 100%; height: 44px; justify-content: center; font-weight: 700; margin-top: 8px; }
.su-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.su-actions .su-primary { width: auto; min-width: 180px; margin: 0; }
.su-foot { font-size: var(--fs-sm); color: var(--text-3); text-align: center; margin-top: 14px; }
.su-foot a { color: var(--green); font-weight: 600; }
.su-code-row { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.su-docs { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.su-doc-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 720px) { .su-grid { grid-template-columns: 1fr; } }
.ob-card { padding: 16px 20px; margin-bottom: 16px; }
.ob-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ob-progress { flex: 1; min-width: 120px; height: 6px; background: var(--grey-150); border-radius: var(--radius-pill); overflow: hidden; }
.ob-progress span { display: block; height: 100%; background: var(--green); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }
.ob-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; }
.ob-steps li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--text-2); padding: 6px 0; }
.ob-steps li.done { color: var(--text-3); text-decoration: line-through; }
.ob-tick { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); color: var(--green); flex-shrink: 0; }
.ob-steps li.done .ob-tick { background: var(--green-subtle-solid); border-color: var(--green); }
.ob-go { margin-left: auto; }

/* ===== SETTINGS AS A MENU WITH SUB-PAGES =====================================
   Settings used to be one page behind a row of tabs, which hid most of the
   product's configuration behind a control people do not scan. It is a menu
   with dedicated sub-pages now: each section has its own sidebar entry, its
   own title and its own URL, so it can be linked to and found. */
.nav-parent { justify-content: space-between; }
.nav-parent .nav-caret {
    width: 12px; height: 12px; margin-left: auto; flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease-out);
}
.nav-parent[aria-expanded="true"] .nav-caret { transform: rotate(90deg); }
.nav-submenu {
    display: none; flex-direction: column; gap: 1px;
    margin: 2px 0 6px 0; padding-left: 10px;
    border-left: 1px solid var(--grey-150); margin-left: 16px;
}
.nav-submenu.open { display: flex; }
/* The settings submenu carried Account / Agency / This brand headings. Eight
   items do not need three headings above them: the labels already say which
   level they belong to, and the headings made a short list look like a form. */
.nav-subitem {
    display: flex; align-items: center; min-height: 32px;
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-md);
    font-size: var(--fs-md); color: var(--text-secondary); text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-subitem:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav-subitem.active { background: var(--primary-soft); color: var(--primary); font-weight: var(--fw-medium); }
.nav-subitem:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.settings-crumb {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: var(--grey-400); margin-bottom: 14px;
}
.settings-crumb .crumb-sep { color: var(--grey-300); }
.settings-crumb .crumb-now { color: var(--grey-600); font-weight: 600; }

/* =========================================================================
   COMPONENT LAYER — the reusable contracts pages compose from.
   =========================================================================
   Appended last so it wins over the older page-specific rules without
   having to delete them one by one. Everything here is a variant of an
   existing pattern rather than a new parallel system: the goal is one
   product, not a second design language living beside the first.
   ========================================================================= */

/* --- Layout measures ---------------------------------------------------
   Forms stop at a readable measure. A 1,600px-wide text input is harder to
   use than a 480px one, not easier. Data pages may run wider. */
.content { padding: var(--page-pad-y) var(--page-pad-x); }
.measure-form { max-width: var(--measure-form); }
.measure-data { max-width: var(--measure-data); }
.page-view > .measure-form, .page-view > .measure-data { margin-inline: 0; }

/* --- Page header ------------------------------------------------------- */
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4); margin-bottom: var(--space-6);
}
.page-header__text { min-width: 0; }
.page-header__title {
    font-size: var(--fs-2xl); font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight); color: var(--text-primary);
    line-height: var(--lh-tight);
}
.page-header__desc {
    font-size: var(--fs-md); color: var(--text-secondary);
    margin-top: var(--space-1); line-height: var(--lh-normal);
}
.page-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* --- Breadcrumb -------------------------------------------------------- */
.breadcrumb {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    font-size: var(--fs-sm); color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--text-primary); text-decoration: underline; }
.breadcrumb__sep { color: var(--border-strong); }
.breadcrumb__current { color: var(--text-primary); font-weight: var(--fw-medium); }

/* --- Section (a card is not always the answer) ------------------------- */
.section { margin-bottom: var(--space-8); }
.section__head { margin-bottom: var(--space-4); }
.section__title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-primary); }
.section__desc { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 2px; }

/* --- Card: one padding, one border, no shadow unless it overlays ------- */
.card { box-shadow: none; }
.card + .card { margin-top: var(--space-5); }
.card-head {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface);
    gap: var(--space-4);
}
.card-head h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal); }
.card-body-pad { padding: var(--space-6); }
.card-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-sunken);
}

/* --- Buttons: one family, clear rank ----------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: var(--control-h); padding: 0 var(--space-4);
    font-family: var(--font); font-size: var(--fs-md); font-weight: var(--fw-medium);
    border-radius: var(--radius-md); border: 1px solid transparent;
    white-space: nowrap; cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:disabled { cursor: not-allowed; opacity: .55; }
.btn--primary { background: var(--primary); color: var(--text-inverse); }
.btn--primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn--primary:active:not(:disabled) { background: var(--primary-active); }
.btn--secondary { background: var(--surface-secondary); color: var(--text-primary); border-color: var(--border-default); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.btn--outline { background: var(--surface); color: var(--text-primary); border-color: var(--border-default); }
.btn--outline:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }
.btn--danger { background: var(--danger); color: var(--text-inverse); }
.btn--danger:hover:not(:disabled) { background: #99200f; }
.btn--danger-quiet { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.btn--sm { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--fs-sm); }
.btn--lg { height: var(--control-h-lg); padding: 0 var(--space-5); }
.btn--block { width: 100%; }
/* A loading button keeps its width so the layout does not jump. */
.btn.is-loading { pointer-events: none; position: relative; color: transparent; }
.btn.is-loading::after {
    content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    color: var(--text-inverse); animation: spin .7s linear infinite;
}
.btn--secondary.is-loading::after, .btn--outline.is-loading::after, .btn--ghost.is-loading::after { color: var(--text-primary); }

/* Icon-only button. Always needs an aria-label; the CSS cannot supply one. */
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--control-h); height: var(--control-h);
    border-radius: var(--radius-md); color: var(--text-secondary);
    background: transparent; border: 1px solid transparent; cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-icon:hover { background: var(--surface-hover); color: var(--text-primary); }
.btn-icon:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-icon--sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.btn-icon svg { width: 18px; height: 18px; }

/* Bring the older button classes onto the same scale. */
.btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--control-h-sm); padding: 0 var(--space-3);
    background: var(--surface); color: var(--text-primary);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.btn-outline:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.step-nav-btn {
    height: var(--control-h); padding: 0 var(--space-4);
    border-radius: var(--radius-md); font-size: var(--fs-md); font-weight: var(--fw-medium);
}
.step-nav-btn.next { background: var(--primary); color: var(--text-inverse); }
.step-nav-btn.next:hover { background: var(--primary-hover); }
.step-nav-btn.prev { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-default); }
.step-nav-btn.prev:hover { background: var(--surface-hover); }
.df-mini-btn {
    height: var(--control-h-sm); padding: 0 var(--space-3);
    border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium);
    background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-default);
}
.df-mini-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }

/* --- Form system ------------------------------------------------------- */
.f-input, .f-select, .f-text, .df-input, .segment-name-input, .template-name-input {
    min-height: var(--control-h);
    padding: 0 var(--space-3);
    font-family: var(--font); font-size: var(--fs-md); color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.f-text, textarea.f-input { padding: var(--space-3); min-height: 88px; line-height: var(--lh-normal); }
.f-input:hover:not(:disabled), .f-select:hover:not(:disabled) { border-color: var(--border-strong); }
.f-input:focus, .f-select:focus, .f-text:focus, .df-input:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none;
}
.f-input[aria-invalid="true"], .f-input.is-error, .f-select.is-error {
    border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft);
}
.f-input[readonly] { background: var(--surface-secondary); color: var(--text-secondary); }
.f-select { padding-right: var(--space-8); }

/* Field wrapper: label, control, help, error — always in this order. */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field__label {
    font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-primary);
    display: flex; align-items: center; gap: var(--space-2);
}
.field__optional { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-tertiary); }
.field__help { font-size: var(--fs-sm); color: var(--text-secondary); }
.field__error { font-size: var(--fs-sm); color: var(--danger); display: flex; align-items: center; gap: 5px; }
.field--sm { max-width: 220px; }
.field--md { max-width: 360px; }
.field--lg { max-width: 520px; }
.field input, .field select, .field textarea { width: 100%; }
/* Two columns only when the fields belong together and there is room. */
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.form-group { margin-bottom: var(--space-4); }

/* --- Search + filter toolbar ------------------------------------------ */
.toolbar {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    padding: var(--space-3) 0 var(--space-4);
}
.toolbar__spacer { flex: 1 1 auto; }
.toolbar__count { font-size: var(--fs-sm); color: var(--text-secondary); }
.search-field { position: relative; display: inline-flex; align-items: center; min-width: 240px; }
.search-field svg { position: absolute; left: var(--space-3); width: 16px; height: 16px; color: var(--text-tertiary); pointer-events: none; }
.search-field input {
    width: 100%; min-height: var(--control-h);
    padding: 0 var(--space-3) 0 36px;
    font-size: var(--fs-md); color: var(--text-primary);
    background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.search-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none; }
.filter-chip-active {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--control-h-sm); padding: 0 var(--space-2) 0 var(--space-3);
    background: var(--primary-soft); color: var(--primary);
    border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.filter-chip-active button { color: inherit; display: inline-flex; padding: 2px; border-radius: var(--radius-sm); }

/* --- Tabs: a quiet underline, not a pill ------------------------------- */
.page-tabs {
    display: flex; align-items: stretch; gap: var(--space-1);
    border-bottom: 1px solid var(--border-default);
    margin-bottom: var(--space-6); overflow-x: auto; scrollbar-width: none;
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tab {
    position: relative; display: inline-flex; align-items: center;
    height: 38px; padding: 0 var(--space-3);
    font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-secondary);
    background: none; border: none; border-radius: 0; white-space: nowrap;
}
.page-tab:hover { color: var(--text-primary); }
.page-tab.active { color: var(--primary); }
.page-tab.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; background: var(--primary); border-radius: 2px 2px 0 0;
}
.page-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* The hidden attribute means hidden, whatever a component's display says. */
[hidden] { display: none !important; }

/* Settings and the platform console are both menus of sub-pages: one panel
   shows at a time, chosen by openSettingsPage() / openConsolePage(). */
#view-settings .settings-panel,
#view-role-management .console-panel { display: none; }
#view-settings .settings-panel.active,
#view-role-management .console-panel.active { display: block; }

/* --- Dropdown menu ---------------------------------------------------- */
.menu {
    min-width: 200px; padding: var(--space-1);
    background: var(--surface); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
.menu__item {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; padding: var(--space-2) var(--space-3);
    font-size: var(--fs-md); color: var(--text-primary); text-align: left;
    border-radius: var(--radius-sm);
}
.menu__item:hover { background: var(--surface-hover); }
.menu__item svg { width: 16px; height: 16px; color: var(--text-secondary); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-soft); }
.menu__sep { height: 1px; margin: var(--space-1) 0; background: var(--border-subtle); }
/* A long menu gets a filter: Clagee's agency list is as long as the business. */
.menu__filter { padding: var(--space-1) var(--space-1) var(--space-2); }
.menu__filter .f-input { width: 100%; height: var(--control-h-sm); font-size: var(--fs-sm); }
.menu__label { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-xs); color: var(--text-tertiary); }

/* --- Modal + drawer --------------------------------------------------- */
.modal-overlay { background: rgba(24, 32, 28, 0.45); padding: var(--space-4); }
.modal {
    border-radius: var(--radius-xl); border: 1px solid var(--border-default);
    box-shadow: var(--shadow-3); max-height: calc(100vh - 2 * var(--space-8));
    display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    align-items: flex-start; gap: var(--space-4);
}
.modal-header h2, .modal-header h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.modal-body { padding: var(--space-6); overflow-y: auto; }
.modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-subtle); background: var(--surface-sunken);
}
.modal-close { border-radius: var(--radius-sm); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.modal-close:hover { background: var(--surface-hover); }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%);
    background: var(--surface); border-left: 1px solid var(--border-default);
    box-shadow: var(--shadow-3); display: flex; flex-direction: column;
    z-index: var(--z-drawer);
    transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-emphasized);
}
.drawer.open { transform: none; }
.drawer--wide { width: min(760px, 100%); }
.drawer-scrim {
    position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1);
    background: rgba(24, 32, 28, 0.35);
}
.drawer__head {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}
.drawer__heading { flex: 1; min-width: 0; }
.drawer__eyebrow { margin: 0 0 2px; font-size: var(--fs-xs); color: var(--text-tertiary); }
.drawer__eyebrow:empty { display: none; }
.drawer__head h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-primary); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6) var(--space-8); }

/* --- Profile sections inside the drawer -------------------------------- */
.prof-section + .prof-section { margin-top: var(--space-6); }
.prof-section__title {
    margin: 0 0 var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}
.prof-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3) var(--space-5);
}
.prof-field__label { font-size: var(--fs-xs); color: var(--text-tertiary); }
.prof-field__value { font-size: var(--fs-md); color: var(--text-primary); overflow-wrap: anywhere; }
.prof-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); }
.prof-stat {
    padding: var(--space-3); background: var(--surface-secondary);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.prof-stat__value {
    font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.prof-stat__label { font-size: var(--fs-xs); color: var(--text-tertiary); }
.prof-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.prof-identity { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.prof-logo {
    width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-md);
    object-fit: contain; background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
}
.prof-logo--sm { width: 22px; height: 22px; border-radius: var(--radius-sm); }
.prof-logo--none {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-tertiary); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.prof-logo--sm.prof-logo--none { font-size: 0; }   /* decorative: no text to shrink */
/* A button that reads as an inline link. Three places wanted one — a brand
   name in the profile drawer, an agency name in the console table, and
   "Upgrade your plan" in a sentence — so it is one rule, not three copies. */
.u-linkish,
.prof-brand-name,
.agc-open {
    display: inline; background: none; border: none; padding: 0;
    font: inherit; font-weight: var(--fw-medium); color: var(--primary);
    text-align: left; cursor: pointer;
}
.u-linkish:hover,
.prof-brand-name:hover,
.agc-open:hover { text-decoration: underline; }
.u-linkish:focus-visible,
.prof-brand-name:focus-visible,
.agc-open:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
/* The drawer's brand name sits beside a mark, so it lines up with it. */
.prof-brand-name { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); }

/* --- Toast ------------------------------------------------------------ */
.toast {
    display: flex; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface); color: var(--text-primary);
    border: 1px solid var(--border-default); border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-md); box-shadow: var(--shadow-2);
    font-size: var(--fs-md); max-width: 380px;
}
.toast--success { border-left-color: var(--success); }
.toast--error { border-left-color: var(--danger); }
.toast--warning { border-left-color: var(--warning); }
.toast--info { border-left-color: var(--info); }

/* --- Tooltip ---------------------------------------------------------- */
.tooltip {
    background: var(--text-primary); color: var(--text-inverse);
    font-size: var(--fs-xs); padding: 5px var(--space-2);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
}

/* --- Avatar ----------------------------------------------------------- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-pill);
    background: var(--primary-soft); color: var(--primary);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); flex-shrink: 0;
    text-transform: uppercase;
}
.avatar--lg { width: 56px; height: 56px; font-size: var(--fs-xl); }
.avatar--sm { width: 24px; height: 24px; font-size: var(--fs-xs); }
.user-avatar { border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); font-weight: var(--fw-semibold); }

/* --- Empty state: an explanation and a next step, nothing decorative -- */
.empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--space-2); padding: var(--space-10) var(--space-6);
    color: var(--text-secondary);
}
.empty svg { width: 22px; height: 22px; color: var(--text-tertiary); margin-bottom: var(--space-1); }
.empty__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-primary); }
.empty__desc { font-size: var(--fs-md); max-width: 46ch; line-height: var(--lh-relaxed); }
.empty__actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); }

/* --- Skeleton --------------------------------------------------------- */
.skeleton-line { height: 12px; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.skeleton-line:last-child { width: 70%; margin-bottom: 0; }

/* --- Switch / checkbox / radio ---------------------------------------- */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }
.checkbox-label, .radio-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); cursor: pointer; }

/* --- Pagination ------------------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0 0; }
.pagination__info { font-size: var(--fs-sm); color: var(--text-secondary); }
.pagination__controls { display: flex; align-items: center; gap: var(--space-1); }

/* --- KPI cards: neutral, colour only where it means something --------- */
.stat-card { border-radius: var(--radius-xl); box-shadow: none; }
.stat-label { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-secondary); letter-spacing: var(--tracking-normal); text-transform: none; }
.stat-value { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.stat-delta { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.stat-delta.up { color: var(--success); }
.stat-delta.down { color: var(--danger); }

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 1180px) {
    :root { --page-pad-x: 24px; }
}
@media (max-width: 860px) {
    :root { --page-pad-x: 16px; --page-pad-y: 20px; }
    .field-row { grid-template-columns: minmax(0, 1fr); }
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header__actions { justify-content: flex-start; }
    .card-head, .card-body-pad, .modal-body { padding: var(--space-4); }
    .card-foot, .modal-footer { padding: var(--space-3) var(--space-4); }
    .search-field { min-width: 0; flex: 1 1 100%; }
    .modal { max-height: calc(100vh - 2 * var(--space-4)); }
    .drawer { width: 100%; }
}
@media (max-width: 640px) {
    .toolbar { flex-direction: column; align-items: stretch; }
    .page-header__actions > * { flex: 1 1 auto; }
}

/* Touch targets stay grabbable on a phone. */
@media (pointer: coarse) {
    .btn, .btn-outline, .df-mini-btn, .page-tab, .nav-item, .nav-subitem { min-height: 40px; }
}

/* =========================================================================
   ACCESSIBILITY + RESPONSIVE CORRECTIONS from the cross-route audit.
   ========================================================================= */

/* Section labels need AA contrast at 12px, so they use the secondary tone
   rather than the tertiary one. */
.nav-label { color: var(--text-secondary); }

/* A collapsed rail hid its labels with display:none, which also removed the
   only accessible name each link had. Keep them for assistive tech. */
.sidebar.collapsed .nav-item span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    display: inline !important;
}

/* Touch targets: keyed to viewport width, not pointer type. A phone-width
   viewport in a desktop browser still needs grabbable controls, and the
   pointer media query did not fire there. */
@media (max-width: 640px) {
    .btn, .btn-outline, .btn-create, .step-nav-btn, .df-mini-btn,
    .page-tab, .nav-item, .nav-subitem, .modal-close, .btn-icon,
    .toggle-btn, .provider-tab, .int-tab {
        min-height: 40px;
    }
    .modal-close, .btn-icon { min-width: 40px; }
    .export-close, .import-wizard-header button, .notif-close { min-width: 40px; min-height: 40px; }
}

/* Every view fades in the same way, including the three channel pages that
   were never given the class. */
#view-email.active, #view-sms.active, #view-whatsapp.active {
    animation: viewIn var(--dur-base) var(--ease-out) both;
}

/* --- Contrast + target corrections, round two -------------------------- */

/* The insight banner's tag filled itself with the raw status colour and put
   near-black text on it. It uses the same soft-tint badge treatment as every
   other status in the product now. */
.ai-banner-tag {
    background: var(--primary-soft); color: var(--primary);
    font-weight: var(--fw-medium); border-radius: var(--radius-sm);
}
.ai-banner-tag.sev-warn { background: var(--warning-soft); color: var(--warning); }
.ai-banner-tag.sev-critical { background: var(--danger-soft); color: var(--danger); }
.ai-banner-tag.sev-info { background: var(--info-soft); color: var(--info); }

/* KPI deltas: the tinted pill made a 12px label sit at 3:1. Plain coloured
   text on the card surface reads better and passes. */
.stat-delta { background: none; padding: 0; border-radius: 0; }
.stat-delta.up { background: none; color: var(--success); }
.stat-delta.down { background: none; color: var(--danger); }

/* The login hero sits on the deep-green field, so its supporting text needs
   to be brighter than a half-transparent white. */
.login-hero-content span, .login-hero-content div { color: rgba(255, 255, 255, 0.86); }

/* Copilot chips and icon buttons were below the 40px target on a phone. */
.ai-chip { border-radius: var(--radius-md); color: var(--text-primary); }
.ai-chip:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text-primary); }
@media (max-width: 640px) {
    .ai-chip { min-height: 40px; }
    .ai-icon-btn { width: 40px; height: 40px; }
}
.ai-icon-btn { color: var(--text-secondary); }
.ai-send { background: var(--primary); border-radius: var(--radius-md); }
.ai-send:hover:not(:disabled) { background: var(--primary-hover); }

/* Telemetry's view switch was a 28px-high primary button. */
#telViewPlatformBtn, #telViewTenantBtn { height: var(--control-h-sm) !important; }

/* --- Contrast + semantics, round three -------------------------------- */

/* A quiet label at 12px needs the secondary tone, not the tertiary one:
   measured on white, tertiary lands just under AA at that size. */
.journey-perf-label, .stat-meta, .card-period, .detail-meta, .u-muted { color: var(--text-secondary); }

/* The login hero's stat labels sit on the deep-green field. */
.login-hero-content span { color: rgba(255, 255, 255, 0.88); }

/* A scrollable table needs to be reachable by keyboard, not only by wheel. */
.table-wrap { outline-offset: -2px; }
.table-wrap:focus-visible { outline: 2px solid var(--primary); }

/* --- Numerals: proportional face, tabular figures --------------------- */
/* Metrics were set in a monospace face, which reads as a terminal rather than
   a dashboard and fought the rest of the typography. The UI font with tabular
   figures gives the same column alignment without changing typeface. */
.stat-value, .td-num, .channel-val, .chart-legend-val, .funnel-open-label,
.cohort-cell, .cohort-label, .cohort-size, .journey-perf-card-value,
.ai-kpi-value, .ai-day span, .detail-stat, .summary-value {
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-normal);
}
/* Genuine code and identifiers keep the monospace face. */
.u-mono, code, pre, .sdk-code-block, .df-endpoint-url, .html-editor-textarea {
    font-family: var(--font-mono);
}
.ai-kpi-value { font-weight: var(--fw-semibold); }
.journey-perf-card-value { font-weight: var(--fw-semibold); }

/* --- Filter pills come down to the control scale ---------------------- */
/* Large rounded pills read as marketing chips, not filters. They match the
   other controls now: 32px, 8px radius, quiet until active. */
.filter-chip, .cust-filter-chip, .chart-filter-pill, .int-tab, .provider-tab, .device-tab {
    height: var(--control-h-sm);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border: 1px solid var(--border-default);
    background: var(--surface);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.filter-chip:hover, .cust-filter-chip:hover, .chart-filter-pill:hover,
.int-tab:hover, .provider-tab:hover, .device-tab:hover {
    background: var(--surface-hover); color: var(--text-primary); border-color: var(--border-strong);
}
.filter-chip.active, .cust-filter-chip.active, .chart-filter-pill.active,
.int-tab.active, .provider-tab.active, .device-tab.active {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
    border-color: var(--primary-soft-strong) !important;
    font-weight: var(--fw-medium) !important;
}

/* The segment-builder logic toggle and the "add" affordances were outlined in
   the brand colour at a heavy weight, which competed with the primary action. */
.logic-toggle-btn, .add-filter-btn, .block-add-btn {
    height: var(--control-h-sm); border-radius: var(--radius-md);
    font-weight: var(--fw-medium); font-size: var(--fs-sm);
}
/* AND / OR is the rule's meaning, not decoration, so it gets primary text.
   The secondary tone measured 4.49:1 on the header tint — just under AA. */
.block-logic-label { font-weight: var(--fw-semibold); color: var(--text-primary); }
.intra-connector span, .inter-block-connector span {
    font-weight: var(--fw-medium); color: var(--text-primary);
}

/* Channel tags in tables: the soft badge, not a shouted abbreviation. */
.badge { text-transform: none; font-weight: var(--fw-medium); }

/* =========================================================================
   BRAND SWITCHER — the workspace control at the top of the rail.
   =========================================================================
   It was a bare <select> in the sidebar footer, hidden whenever an agency ran
   only one brand. Two problems with that: the brand in context is not
   optional information, and a footer select does not read as "you are working
   in this brand". This is the standard workspace-switcher pattern: current
   context, one click to change it, and a way through to managing the list.
   The native <select> stays in the DOM, visually hidden, so existing wiring
   and the automated checks keep working against one source of truth. */
.brand-switch { padding: var(--space-3) var(--space-3) 0; display: flex; flex-direction: column; gap: var(--space-1); }
.brand-switch__row { position: relative; }
.brand-switch__btn {
    display: flex; align-items: center; gap: var(--space-2); width: 100%;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-2);
    background: var(--surface); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); cursor: pointer; text-align: left;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.brand-switch__btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.brand-switch__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.brand-switch__mark {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: var(--radius-sm);
    background: var(--primary-soft); color: var(--primary);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase;
}
.brand-switch__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.brand-switch__scope {
    font-size: var(--fs-xs); color: var(--text-tertiary); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-switch__scope:empty { display: none; }
.brand-switch__name {
    font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-primary);
    line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-switch__caret { color: var(--text-tertiary); flex-shrink: 0; }
.brand-switch__menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    z-index: var(--z-dropdown); max-height: 320px; overflow-y: auto;
    animation: slideDown var(--dur-fast) var(--ease-out);
}
/* .menu__item carries the layout; this only tightens it for the two-line row. */
.brand-switch__item { font-size: var(--fs-sm); }
.brand-switch__item[aria-checked="true"] { background: var(--primary-soft); color: var(--primary); font-weight: var(--fw-medium); }
.brand-switch__item .brand-switch__mark { width: 22px; height: 22px; font-size: var(--fs-xs); }
.brand-switch__item-sub { font-size: var(--fs-xs); color: var(--text-tertiary); }
.brand-switch__tick { margin-left: auto; flex-shrink: 0; }

/* Collapsed rail: the mark alone, still clickable. */
.sidebar.collapsed .brand-switch { padding: var(--space-3) 0 0; }
.sidebar.collapsed .brand-switch__btn { justify-content: center; padding: var(--space-2) 0; border: none; background: none; }
.sidebar.collapsed .brand-switch__text,
.sidebar.collapsed .brand-switch__caret { display: none; }
.sidebar.collapsed .brand-switch__menu { left: 0; right: auto; width: 240px; }
/* Nothing to pick yet: the control still shows the scope, it just does not
   pretend to be a button. */
.brand-switch__btn[disabled] { cursor: default; opacity: .75; }
.brand-switch__btn[disabled]:hover { background: var(--surface); border-color: var(--border-default); }

/* --- No brand selected ------------------------------------------------- */
.nobrand { max-width: var(--measure-form); }
.nobrand__card {
    padding: var(--space-6); background: var(--surface);
    border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}
.nobrand__title { margin: 0 0 var(--space-2); font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text-primary); }
.nobrand__body { margin: 0 0 var(--space-5); font-size: var(--fs-md); color: var(--text-secondary); line-height: var(--lh-relaxed); }
.nobrand__pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.nobrand__brand {
    display: flex; align-items: center; gap: var(--space-3); width: 100%;
    padding: var(--space-3) var(--space-4); text-align: left;
    background: var(--surface); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nobrand__brand:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.nobrand__brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.nobrand__brand-name { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-primary); }
.nobrand__brand-meta { font-size: var(--fs-xs); color: var(--text-tertiary); }