/*!
 * Go2Market AMP-MAP — Marketing Automation Platform
 * Copyright (c) 2026 Go2MarketCo. All rights reserved.
 * Proprietary and confidential. See LICENSE. Unauthorized use is prohibited.
 */
/* ============ RESET & BASE ============ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    /* Brand accent — swappable platform-wide (Platform Admin → Appearance). Defaults to Signal
       Blue; the classic gold is preserved (never eliminated) under --gold-classic for restore. */
    --blue:#009fff;--blue-rgb:0,159,255;
    --gold-classic:#E0B020;--gold-classic-rgb:224,176,32;
    --brand:var(--blue);--brand-rgb:var(--blue-rgb);
    --primary:var(--brand);--primary-light:#33B3FF;--primary-dark:#007ACC;
    --accent:var(--brand);--accent-light:rgba(var(--brand-rgb),0.2);
    --success:#10B981;--warning:#F59E0B;--danger:#EF4444;--info:#3B82F6;
    --navy:#0D1F3C;--navy-light:#162B50;--gold:var(--brand);--gold-rgb:var(--brand-rgb);--yellow:#F5C842;--orange:#F2611D;
    --cta-yellow:#ffe73d;
    --bg:#FFFFFF;--bg-card:#FFFFFF;--bg-surface:#F9FAFB;--bg-dark:#0D1F3C;--bg-darker:#091529;
    --text:#1A1A2E;--text-secondary:#6B7280;--text-light:#9CA3AF;--text-inverse:#FFFFFF;
    --border:#E5E7EB;--border-light:#F3F4F6;--shadow:0 1px 3px rgba(13,31,60,0.06),0 1px 2px rgba(13,31,60,0.04);--shadow-lg:0 10px 15px -3px rgba(13,31,60,0.08),0 4px 6px -4px rgba(13,31,60,0.04);
    --radius:12px;--radius-sm:8px;--radius-lg:16px;--radius-full:9999px;
    --font-display:'Arial',sans-serif;
    --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --transition:all 0.15s ease;
    --sidebar-width:260px;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
.skip-nav{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:8px 24px;border-radius:0 0 var(--radius-sm) var(--radius-sm);z-index:10000;font-weight:600;transition:top 0.2s}
.skip-nav:focus{top:0;outline:2px solid var(--gold);outline-offset:2px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#main-content:focus{outline:none}
a{color:var(--navy);text-decoration:none;font-weight:500}
a:hover{color:var(--gold)}
button{cursor:pointer;font-family:var(--font)}
input,select,textarea{font-family:var(--font);font-size:1rem}
h1,h2,h3,h4{font-family:var(--font-display)}

/* ============ UTILITIES ============ */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-xs{gap:4px}.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}.gap-xl{gap:32px}
.grid{display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.text-center{text-align:center}.text-right{text-align:right}
.text-sm{font-size:0.875rem}.text-xs{font-size:0.75rem}.text-lg{font-size:1.125rem}
.text-secondary{color:var(--text-secondary)}.text-light{color:var(--text-light)}
.text-primary{color:var(--primary)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}
.mt-xs{margin-top:4px}.mt-sm{margin-top:8px}.mt-md{margin-top:16px}.mt-lg{margin-top:24px}.mt-xl{margin-top:32px}
.mb-xs{margin-bottom:4px}.mb-sm{margin-bottom:8px}.mb-md{margin-bottom:16px}.mb-lg{margin-bottom:24px}
.p-sm{padding:8px}.p-md{padding:16px}.p-lg{padding:24px}.p-xl{padding:32px}
.hidden{display:none!important}
.w-full{width:100%}

@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ============ LAYOUT ============ */
.ampmap-layout{display:flex;min-height:100vh}
.ampmap-sidebar{width:var(--sidebar-width);background:var(--bg-dark);color:var(--text-inverse);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:50;overflow-y:auto;transition:width 0.2s ease}
.ampmap-main{flex:1;margin-left:var(--sidebar-width);min-height:100vh;padding:28px 32px;transition:margin-left 0.2s ease;overflow-x:hidden}

.sidebar-brand{display:flex;align-items:center;gap:12px;padding:24px 24px 20px;border-bottom:1px solid rgba(255,255,255,0.08)}
.sidebar-logo{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sidebar-logo svg{width:34px;height:34px}
.prog-empty-icon svg{width:56px;height:56px}
.sidebar-title{font-size:1rem;font-weight:800;font-family:var(--font-display);color:var(--text-inverse);display:flex;flex-direction:column;white-space:nowrap}
.sidebar-workspace-name{font-size:0.68rem;font-weight:400;color:rgba(255,255,255,0.4);margin-top:2px;font-family:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}

.sidebar-nav{flex:1;padding:16px 12px}
/* Sidebar menu search */
.nav-search{position:relative;padding:0 12px;margin:4px 0 2px}
.nav-search-icon{position:absolute;left:22px;top:50%;transform:translateY(-50%);display:inline-flex;color:rgba(255,255,255,0.5);pointer-events:none}
.nav-search-input{width:100%;box-sizing:border-box;padding:7px 10px 7px 30px;font-size:0.9rem;font-family:inherit;color:#ffffff;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-sm);outline:none;transition:var(--transition)}
.nav-search-input::placeholder{color:rgba(255,255,255,0.5)}
.nav-search-input:focus{background:rgba(255,255,255,0.14);border-color:rgba(var(--gold-rgb),0.5)}
.sidebar-collapsed .nav-search{display:none}
.sidebar-section-label{color:#ffffff;font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;padding:0 12px;margin:20px 0 8px}
.sidebar-section-label:first-child{margin-top:0}
.sidebar-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;color:#ffffff;font-size:0.8rem;font-weight:500;transition:var(--transition);border-radius:var(--radius-sm);border-left:none;margin-bottom:2px}
.sidebar-nav a:hover{color:#ffffff;background:rgba(255,255,255,0.06)}
.sidebar-nav a.active{color:var(--gold);background:rgba(var(--gold-rgb),0.15)}
.sidebar-nav a.nav-sub-item{padding-left:36px;font-size:0.8rem;opacity:1}
.sidebar-nav a.nav-sub-item .nav-icon{font-size:0.8rem}
.nav-icon{font-size:0.9rem;width:20px;text-align:center;opacity:1;flex-shrink:0}
.nav-icon svg{width:18px;height:18px;display:block;margin:0 auto}
/* Inline SVG icons that stand in for an emoji inside a run of text — issue-type glyphs beside an
   issue key, the icons on Workspace buttons and setup cards. They size to the TEXT rather than to
   a fixed pixel box, so they follow whatever font-size the surrounding element sets. */
.inline-icon,.issue-type-svg{width:1em;height:1em;display:inline-block;vertical-align:-0.13em}
.sidebar-nav a.active .nav-icon{opacity:1}

/* Collapsible nav sections (accordion) */
.nav-group{margin-bottom:2px}
.sidebar-section-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;font-family:inherit}
.sidebar-section-static{cursor:default}
.section-caret{display:inline-flex;align-items:center;opacity:0.6;transition:transform 0.15s ease;margin-left:8px}
.nav-group.open .section-caret{transform:rotate(90deg)}
.sidebar-section-toggle:hover .section-caret{opacity:1}
.nav-group-items{overflow:hidden;max-height:0;transition:max-height 0.2s ease}
.nav-group.open .nav-group-items{max-height:1200px}
.sidebar-nav .nav-group:first-child .sidebar-section-label{margin-top:0}
/* Favorite star on each nav item (revealed on hover; always shown when favorited). */
.nav-fav{margin-left:auto;flex-shrink:0;cursor:pointer;opacity:0;color:rgba(255,255,255,0.55);font-size:0.95rem;line-height:1;padding:0 2px;transition:opacity 0.12s,color 0.12s}
.sidebar-nav a:hover .nav-fav{opacity:0.75}
.nav-fav:hover{opacity:1;color:var(--gold)}
.nav-fav.is-fav{opacity:1;color:var(--gold)}
.nav-fav-label{color:rgba(255,255,255,0.5);font-size:0.7rem;text-transform:uppercase;letter-spacing:1px;font-weight:600;padding:8px 12px 4px}
#nav-fav-group:empty{display:none}
.sidebar-collapsed .nav-fav,.sidebar-collapsed .nav-fav-label{display:none}

/* Naming-convention builder (Workspace -> Branding): variable/text/free-text chips. */
.nc-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:0.82rem;line-height:1.2;border:1px solid var(--border);background:var(--bg-secondary,#f4f4f4);color:var(--text-primary);white-space:pre}
.nc-chip-add{cursor:pointer}
.nc-chip-add:hover{border-color:var(--brand);color:var(--brand)}
.nc-chip-var{background:rgba(var(--brand-rgb),0.12);border-color:rgba(var(--brand-rgb),0.35);color:var(--brand)}
.nc-chip-free{background:rgba(242,97,29,0.12);border-color:rgba(242,97,29,0.35);color:#F2611D}
.nc-chip-x{background:none;border:none;padding:0;margin:0;cursor:pointer;color:inherit;opacity:0.6;font-size:1rem;line-height:1}
.nc-chip-x:hover{opacity:1}
.nc-template{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:44px;padding:8px;border:1px dashed var(--border);border-radius:8px}
.nc-template .nc-chip{cursor:grab}
.nc-preview{padding:8px 12px;border-radius:8px;background:var(--bg-secondary,#f4f4f4);font-family:monospace;word-break:break-word}
/* In the icon-rail collapsed mode, section headers are hidden; keep all icons visible. */
.sidebar-collapsed .nav-group-items{max-height:none}

/* Program nav subtree: programs nested under the Programs link, each expandable to its assets. */
.program-nav-tree{padding-left:6px}
.program-nav-item{margin:1px 0}
.program-nav-row{display:flex;align-items:center;gap:2px}
.program-nav-caret{flex:0 0 auto;background:none;border:none;color:rgba(255,255,255,0.85);cursor:pointer;padding:4px 5px;display:flex;align-items:center;transition:transform 0.15s ease}
.program-nav-caret:hover{color:#fff}
.program-nav-item.open>.program-nav-row>.program-nav-caret{transform:rotate(90deg)}
.program-nav-parent{flex:1 1 auto;padding:6px 8px !important;font-size:0.86rem !important;font-weight:500 !important;margin-bottom:0 !important}
.program-nav-children{overflow:hidden;max-height:0;transition:max-height 0.2s ease;padding-left:20px}
.program-nav-item.open>.program-nav-children{max-height:800px}
.program-nav-group-label{padding:6px 8px 2px;font-size:0.66rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:rgba(255,255,255,0.45)}
.program-nav-child{padding:5px 8px !important;font-size:0.82rem !important;font-weight:400 !important;opacity:0.85}
.program-nav-child:hover{opacity:1}
.program-nav-empty{display:block;padding:5px 8px;font-size:0.78rem;color:rgba(255,255,255,0.45)}
/* Hide the whole tree in the collapsed icon rail (labels are hidden there). */
.sidebar-collapsed .program-nav-tree{display:none}

.sidebar-footer{padding:16px 16px;border-top:1px solid rgba(255,255,255,0.08)}
.sidebar-notif-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;text-decoration:none;color:rgba(255,255,255,0.7);border-bottom:1px solid rgba(255,255,255,0.08);transition:var(--transition);font-size:0.85rem}
.sidebar-notif-btn:hover{background:rgba(255,255,255,0.08);color:white}
.sidebar-collapsed .sidebar-notif-btn{justify-content:center;padding:10px 8px}
.notif-badge{background:var(--danger,#e53e3e);color:white;font-size:0.65rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;line-height:1}
.sidebar-theme-toggle{width:100%;padding:8px 12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-sm);color:rgba(255,255,255,0.5);font-size:0.8rem;cursor:pointer;transition:var(--transition);margin-bottom:8px;text-align:left}
.sidebar-theme-toggle:hover{color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.08)}
.sidebar-user{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.sidebar-user-name{font-size:0.8rem;color:rgba(255,255,255,0.6)}
.sidebar-logout{background:none;border:none;color:rgba(255,255,255,0.35);font-size:0.75rem;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm)}
.sidebar-logout:hover{color:var(--gold);background:rgba(255,255,255,0.06)}
.sidebar-legal{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:0.68rem;line-height:1.4}
.sidebar-legal a{color:rgba(255,255,255,0.4);text-decoration:none}
.sidebar-legal a:hover{color:var(--gold)}
.sidebar-legal span{color:rgba(255,255,255,0.2)}

/* Sidebar collapse toggle */
.sidebar-collapse-toggle{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-sm);color:rgba(255,255,255,0.5);font-size:0.8rem;cursor:pointer;transition:var(--transition);margin-bottom:8px;text-align:left}
.sidebar-collapse-toggle:hover{color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.08)}
.sidebar-collapse-toggle .nav-icon{font-size:0.9rem;width:20px;text-align:center;flex-shrink:0}

/* Sidebar collapsed state */
.sidebar-collapsed .ampmap-sidebar{width:60px;overflow-x:hidden;overflow-y:auto}
.sidebar-collapsed .ampmap-main{margin-left:60px}
.sidebar-collapsed .sidebar-title,
.sidebar-collapsed .sidebar-nav .nav-label,
.sidebar-collapsed .sidebar-nav .sidebar-section-label,
.sidebar-collapsed .sidebar-user,
.sidebar-collapsed .sidebar-collapse-toggle .nav-label,
.sidebar-collapsed .sidebar-theme-toggle .nav-label{display:none}
.sidebar-collapsed .sidebar-brand{padding:16px;justify-content:center}
.sidebar-collapsed .sidebar-nav a{padding:12px;justify-content:center;white-space:nowrap}
/* Uniform icon sizing in the icon-rail so top-level and sub-item icons match */
.sidebar-collapsed .sidebar-nav a .nav-icon{font-size:0.9rem}
.sidebar-collapsed .sidebar-footer{padding:12px 8px}
.sidebar-collapsed .sidebar-collapse-toggle{justify-content:center;padding:8px}
.sidebar-collapsed .sidebar-theme-toggle{justify-content:center;padding:8px}

/* Theme toggle layout update */
.sidebar-theme-toggle{display:flex;align-items:center;gap:12px}
.sidebar-theme-toggle .nav-icon{font-size:0.9rem;width:20px;text-align:center;flex-shrink:0}

@media(max-width:768px){
    .ampmap-sidebar{width:60px;overflow:hidden}
    .ampmap-main{margin-left:60px}
    .sidebar-title,.nav-label,.sidebar-section-label,.sidebar-user{display:none}
    .nav-group-items{max-height:none}
    .sidebar-brand{padding:16px;justify-content:center}
    .sidebar-nav a{padding:12px;justify-content:center}
    .sidebar-collapse-toggle{display:none!important}
}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius-sm);font-size:0.84rem;font-weight:600;border:none;transition:var(--transition);line-height:1.4;font-family:var(--font)}
.btn-primary{background:var(--cta-yellow);color:var(--navy)}.btn-primary:hover{box-shadow:0 4px 12px rgba(255,231,61,0.45)}
.btn-secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-surface);border-color:#D1D5DB}
.btn-success{background:var(--success);color:white}.btn-success:hover{opacity:0.9}
.btn-warning{background:var(--warning);color:var(--navy)}.btn-warning:hover{opacity:0.9}
.btn-danger{background:var(--danger);color:white}.btn-danger:hover{opacity:0.9}
.btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--border)}.btn-outline:hover{background:var(--bg-surface);border-color:var(--gold)}
.btn-ghost{background:transparent;color:var(--navy)}.btn-ghost:hover{background:rgba(13,31,60,0.04)}
.btn-navy{background:var(--navy);color:white}.btn-navy:hover{background:var(--navy-light);box-shadow:0 4px 12px rgba(13,31,60,0.15)}
.btn-sm{padding:6px 12px;font-size:0.78rem}
.btn-lg{padding:14px 28px;font-size:1rem}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:0.5;cursor:not-allowed}

/* ============ CARDS ============ */
.card{background:var(--bg-card);border:1px solid var(--border-light);overflow:hidden;transition:var(--transition)}
.card-body{padding:16px 20px}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border-light);font-weight:700;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.3px;color:var(--navy);font-family:var(--font)}
.card-header h3{margin:0;font-size:0.8rem;font-weight:700;font-family:var(--font)}

/* ============ FORMS ============ */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:0.84rem;font-weight:500;margin-bottom:6px;color:var(--text)}
.form-control{width:100%;padding:9px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:0.875rem;transition:var(--transition);background:var(--bg-card);color:var(--text)}
.form-control:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),0.1)}
.form-control::placeholder{color:var(--text-light)}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239CA3AF'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
textarea.form-control{resize:vertical;min-height:100px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rpt-hint{margin-top:5px;font-size:0.76rem;line-height:1.45;color:var(--text-secondary)}

/* ============ BADGES ============ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:6px;font-size:0.72rem;font-weight:600;letter-spacing:0.2px}
.badge-primary{background:rgba(var(--gold-rgb),0.12);color:#B8880F}
.badge-success{background:#ECFDF5;color:#059669}
.badge-warning{background:#FFFBEB;color:#D97706}
.badge-danger{background:#FEF2F2;color:#DC2626}
.badge-info{background:#EFF6FF;color:#2563EB}
.badge-purple{background:#F5F3FF;color:#7C3AED}
.badge-outline{background:transparent;border:1px solid var(--border);color:var(--text-secondary);font-weight:500}
.badge-subscriber{background:#EFF6FF;color:#2563EB}
.badge-lead{background:#F5F3FF;color:#7C3AED}
.badge-mql{background:#FFFBEB;color:#D97706}
.badge-sql{background:#FFF7ED;color:#EA580C}
.badge-opportunity{background:#ECFDF5;color:#059669}
.badge-customer{background:#F0FDF4;color:#16A34A}
.badge-evangelist{background:rgba(var(--gold-rgb),0.12);color:#B8880F}
.badge-secondary{background:#F3F4F6;color:var(--text-secondary)}
/* A badge that is also a dropdown: keeps the badge's colour and shape while staying a native
   <select>, so it is keyboard-accessible and uses the OS picker on touch. `appearance:none` strips
   the browser's own chrome; the caret is drawn back on so it still reads as changeable. */
.badge-select{appearance:none;-webkit-appearance:none;border:none;cursor:pointer;font-family:inherit;
    padding-right:22px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 12px) 55%,calc(100% - 8px) 55%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.badge-select:hover{filter:brightness(0.96)}
.badge-select:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.badge-select:disabled{opacity:0.6;cursor:progress}
.badge-select option{color:var(--text);background:var(--bg-surface);font-size:0.85rem}

/* The project Board "tab": a button carrying the current view, plus an arrow that opens the list.
   Two controls rather than one <select> because a select fires `change` only when the value
   changes, so re-picking the view it already showed did nothing. The select keeps a blank value,
   so every pick counts; the button is what displays the view. They render as one segmented pill. */
.tab-split{display:inline-flex;align-items:stretch;vertical-align:middle}
.tab-split-label{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
.tab-split-caret{appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit;
    width:26px;padding:0;color:transparent;text-indent:-9999px;
    border-top-left-radius:0;border-bottom-left-radius:0;
    background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
    background-position:calc(50% - 2px) 55%,calc(50% + 2px) 55%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
/* The caret is two 4px gradients, and ANY `background:` shorthand wipes the whole set — image,
   size, position and repeat. `.btn-secondary:hover` is exactly such a shorthand and outranks the
   plain `.tab-split-caret` class, so hovering the arrow while the Board tab was inactive reset
   background-size to `auto` and stretched the two triangles across the entire button: a giant
   wedge instead of a caret. The geometry is therefore restated at a specificity that beats the
   button's hover, for both tones. */
.tab-split .tab-split-caret,
.tab-split .tab-split-caret:hover,
.tab-split .tab-split-caret:focus{
    background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
    background-position:calc(50% - 2px) 55%,calc(50% + 2px) 55%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.tab-split .tab-split-caret.btn-secondary,
.tab-split .tab-split-caret.btn-secondary:hover,
.tab-split .tab-split-caret.btn-secondary:focus{
    background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),linear-gradient(135deg,var(--text) 50%,transparent 50%)}
.tab-split-caret:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.tab-split-caret option{color:var(--text);background:var(--bg-surface);text-indent:0}

/* ============ ALERTS ============ */
.alert{padding:14px 18px;border-radius:var(--radius-sm);font-size:0.875rem;margin-bottom:16px}
.alert-danger{background:rgba(225,112,85,0.1);color:var(--danger);border:1px solid rgba(225,112,85,0.2)}
.alert-success{background:rgba(5,150,105,0.08);color:var(--success);border:1px solid rgba(5,150,105,0.2)}
.alert-warning{background:rgba(245,200,66,0.15);color:#B8880F;border:1px solid rgba(245,200,66,0.3)}

/* ============ UTILITIES ============ */
.text-muted{color:var(--text-secondary)}

/* ============ PAGE HEADER ============ */
.page-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;margin-bottom:24px;border-bottom:none}
.page-header h1{font-size:1.6rem;font-weight:700;color:var(--navy);font-family:var(--font-display);letter-spacing:-0.3px}
.page-header p{color:var(--text-secondary);margin-top:2px;font-size:0.84rem}
.page-actions{display:flex;gap:8px}

/* ============ DASHBOARD SCOPE TOGGLE ============ */
.dashboard-scope-toggle{display:flex;background:var(--bg-surface);border-radius:var(--radius);padding:3px;border:1px solid var(--border)}
.scope-btn{padding:6px 14px;border:none;background:none;border-radius:calc(var(--radius) - 2px);font-size:0.8rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all 0.15s;font-family:var(--font)}
.scope-btn:hover{color:var(--navy)}
.scope-btn-active{background:var(--navy);color:#fff;font-weight:600;box-shadow:0 1px 3px rgba(13,31,60,0.2)}

/* ============ STAT CARDS ============ */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{background:var(--bg-card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid var(--border-light)}
.stat-card .stat-value{font-size:1.75rem;font-weight:700;color:var(--navy);font-family:var(--font-display);letter-spacing:-0.3px}
.stat-card .stat-label{font-size:0.75rem;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px;font-weight:600}
.stat-card .stat-change{font-size:0.75rem;font-weight:600;margin-top:6px}
.stat-card .stat-change.up{color:var(--success)}
.stat-card .stat-change.down{color:var(--danger)}
@media(max-width:768px){.stat-cards{grid-template-columns:repeat(2,1fr)}}

/* ============ DATA TABLE ============ */
.data-table{width:100%;border-collapse:collapse;background:var(--bg-card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border-light)}
.data-table th{background:var(--bg-surface);padding:12px 16px;text-align:left;font-size:0.69rem;text-transform:uppercase;color:var(--text-light);letter-spacing:0.5px;font-weight:600;border-bottom:1px solid var(--border)}
.data-table th.sortable{cursor:pointer}.data-table th.sortable:hover{color:var(--navy)}
.data-table td{padding:14px 16px;border-top:1px solid var(--border-light);font-size:0.84rem}
.data-table tr.clickable{cursor:pointer;transition:background 0.1s}
.data-table tr.clickable:hover td{background:#FAFAFA}
.sort-arrow{font-size:0.7rem;opacity:0.5}
.data-table tr.row-selected td{background:rgba(var(--gold-rgb),0.06)}
.bulk-action-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:rgba(var(--gold-rgb),0.06);border:1px solid rgba(var(--gold-rgb),0.2);border-radius:var(--radius-sm);margin-bottom:8px}
.bulk-count{font-size:0.85rem;font-weight:600;color:var(--gold)}
.table-pagination{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--bg-surface);border-top:1px solid var(--border-light)}
.pagination-info{font-size:0.78rem;color:var(--text-secondary)}
.pagination-buttons{display:flex;gap:4px}

/* ============ COLUMN PICKER ============ */
.col-picker-dropdown{position:fixed;z-index:1000;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px 0;min-width:200px;max-height:360px;overflow-y:auto}
.col-picker-title{padding:8px 16px;font-weight:700;font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.04em;border-bottom:1px solid var(--border)}
.col-picker-item{display:flex;align-items:center;gap:8px;padding:6px 16px;font-size:0.85rem;cursor:pointer;margin:0}
.col-picker-item:hover{background:var(--bg-surface)}
.col-picker-item.disabled{opacity:0.5;cursor:default}
.col-picker-item.disabled:hover{background:transparent}
.col-picker-item input[type="checkbox"]{margin:0;cursor:pointer}
.col-picker-item.disabled input[type="checkbox"]{cursor:default}

/* ============ TABLE (generic) ============ */
.table{width:100%;border-collapse:collapse}
.table th{padding:12px 16px;text-align:left;font-weight:600;font-size:0.75rem;text-transform:uppercase;color:var(--text-secondary);letter-spacing:0.04em;border-bottom:2px solid var(--border)}
.table td{padding:10px 16px;border-bottom:1px solid var(--border);font-size:0.85rem;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:rgba(0,0,0,0.02)}
[data-theme="dark"] .table tbody tr:hover{background:rgba(255,255,255,0.03)}

/* ============ PIPELINE ============ */
.pipeline-board{display:flex;gap:12px;overflow-x:auto;min-height:400px;padding-bottom:8px}
.pipeline-column{background:var(--bg-surface);border-radius:var(--radius);padding:0;min-width:240px;flex:0 0 240px;border:1px solid var(--border-light)}
.pipeline-header{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;font-size:0.8rem;font-weight:700;font-family:var(--font-display)}
.pipeline-stage-name{text-transform:uppercase;letter-spacing:0.03em}
.pipeline-stage-count{background:rgba(0,0,0,0.08);padding:2px 8px;border-radius:var(--radius-full);font-size:0.7rem}
.pipeline-total{padding:0 14px 8px;font-size:0.8rem;color:var(--text-secondary);font-weight:600}
.pipeline-cards{padding:8px;display:flex;flex-direction:column;gap:8px;min-height:100px;max-height:calc(100vh - 340px);overflow-y:auto}
.board-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.board-toolbar .pb-search{max-width:240px}
.board-toolbar .pb-count{font-size:0.8rem;color:var(--text-secondary);margin-left:auto}
.pipeline-card{background:var(--bg-card);border-radius:var(--radius-sm);padding:12px;box-shadow:var(--shadow);cursor:pointer;transition:var(--transition)}
/* No transform on hover: a changing ancestor transform dismisses an open native <select>
   (the stage dropdown) the instant the card loses :hover, so the box-shadow is the only cue. */
.pipeline-card:hover{box-shadow:var(--shadow-lg)}
.pipeline-card-name{font-weight:600;font-size:0.85rem;margin-bottom:4px}
.pipeline-card-amount{font-size:0.9rem;font-weight:700;color:var(--gold);font-family:var(--font-display)}
.pipeline-card-contact{font-size:0.75rem;color:var(--text-secondary);margin-top:4px}
/* Which sprint a card is committed to. Truncates rather than widening the column. */
.issue-sprint-chip{display:inline-block;max-width:100%;margin-top:6px;padding:1px 6px;border-radius:10px;font-size:0.7rem;
    background:rgba(var(--gold-rgb),0.14);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.issue-label-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.issue-label-chip{display:inline-block;max-width:100%;padding:1px 7px;border-radius:10px;font-size:0.68rem;
    background:rgba(var(--brand-rgb),0.12);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid rgba(var(--brand-rgb),0.2)}
.issue-label-chip[role=button]{cursor:pointer}
.issue-label-chip[role=button]:hover{background:rgba(var(--brand-rgb),0.22)}
.pipeline-card-date{font-size:0.7rem;color:var(--text-light);margin-top:2px}
.pipeline-card-actions{margin-top:8px}
.pipeline-stage-select{padding:4px 8px;font-size:0.7rem;border:1px solid var(--border);border-radius:4px;background:var(--bg-surface);width:100%}
@media(max-width:640px){.pipeline-board{flex-direction:column;overflow-x:visible}.pipeline-column{min-width:0;flex:none}}
.deals-section-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}.deals-section-header h2{font-size:1.1rem;margin:0}

/* ============ FILTER BUILDER ============ */
.filter-builder{display:flex;flex-direction:column;gap:8px}
.filter-row{display:flex;gap:8px;align-items:center}
.filter-row .form-control{flex:1;padding:8px 10px;font-size:0.85rem}
.filter-row .btn{flex-shrink:0}
.filter-field{max-width:180px}
.filter-operator{max-width:160px}

/* Grouped filter builder */
.filter-builder-grouped{display:flex;flex-direction:column;gap:8px}
.filter-logic-top{display:flex;align-items:center;gap:8px;padding:8px 0;margin-bottom:4px}
.filter-group{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;margin-bottom:4px;background:var(--bg-surface)}
.filter-group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.filter-group-logic{display:flex;align-items:center;gap:6px}
.filter-group-separator{display:flex;align-items:center;justify-content:center;padding:4px 0}
.filter-rule{display:flex;gap:6px;align-items:center;padding:4px 0}
.filter-rule .form-control{flex:1;padding:6px 8px;font-size:0.85rem;min-width:0}
.filter-rule .filter-object{max-width:110px;flex:0 0 110px}
.filter-rule .filter-field{max-width:150px;flex:0 0 150px}
.filter-rule .filter-operator{max-width:140px;flex:0 0 140px}
.filter-rule .filter-value{flex:1;min-width:80px}
.filter-rule .btn{flex-shrink:0}
.filter-rule-logic{display:flex;align-items:center;justify-content:center;padding:2px 0}
.filter-actions{display:flex;gap:8px}

/* Filter summary (read-only) */
.filter-summary-group{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;margin-bottom:4px;background:var(--bg-surface)}
.filter-summary-group-header{margin-bottom:6px}
.filter-summary-rule{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}
.filter-summary-rule:last-child{border-bottom:none}
.filter-summary-logic{text-align:center;padding:2px 0}
.filter-summary-separator{display:flex;align-items:center;justify-content:center;padding:4px 0}

/* Segment membership on entity detail views */
.btn-inline-remove{background:none;border:none;color:var(--danger);cursor:pointer;font-size:16px;line-height:1;padding:0 4px;margin-left:2px;opacity:0.6;transition:opacity 0.15s}
.btn-inline-remove:hover{opacity:1}
.segment-membership-row:hover{opacity:0.85}

/* Segment tabs */
.segment-tabs{display:flex;gap:8px;flex-wrap:wrap}

/* Wide modal for filter builder */
.modal:has(.filter-builder-grouped){max-width:860px}

/* ============ WORKFLOW EDITOR ============ */
.workflow-steps{display:flex;flex-direction:column;gap:0}
.workflow-step{display:flex;align-items:flex-start;gap:16px}
.step-number{width:28px;height:28px;background:var(--gold);color:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8rem;flex-shrink:0;margin-top:10px}
.step-card{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;box-shadow:var(--shadow)}
.step-header{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.step-icon{font-size:1.1rem}
.step-type-select{flex:1;padding:6px 10px;font-size:0.85rem}
.step-config{margin-top:4px}
.step-config .form-control{padding:8px 10px;font-size:0.85rem}

/* ---- Select caret clearance -------------------------------------------------------------------
   `select.form-control` strips the native arrow and paints its own INSIDE the box, so the text
   needs reserved room on the right or a long option slides under the arrow and becomes unreadable.
   The base padding (14px) is narrower than the caret's own footprint.

   This is `!important` on purpose, and it is the only rule of its kind in the file. Two things
   otherwise take the reservation away again, and both are easy to reintroduce by accident:
   every rule that re-declares `.form-control` padding resets the shorthand, and — the one that
   actually shipped broken — roughly thirty selects across the views carry an INLINE
   `style="padding:6px 10px"`, which no ordinary stylesheet rule can outrank. Reserving the room
   here once means a new select cannot reintroduce the overlap, wherever it is written. */
select.form-control{padding-right:34px !important}
.step-connector{display:flex;justify-content:center;padding:4px 0 4px 14px}
.connector-line{width:2px;height:20px;background:var(--border)}

/* ============ CONTACT DETAIL ============ */
.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.detail-info{display:flex;flex-direction:column;gap:16px}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-light);font-size:0.84rem}
.info-row:last-child{border-bottom:none}
.info-label{color:var(--text-light);font-weight:500;font-size:0.8rem}
.info-value{font-weight:500;text-align:right;color:var(--text)}
/* A linked record in a detail row has to LOOK clickable. `.info-value` sets a colour that the
   anchor inherits, so without this every cross-record link renders as plain body text and nobody
   thinks to click it. Matches `.proj-strip-value a`. */
.info-value a{color:var(--primary)}
.info-value a:hover{text-decoration:underline}
/* Long free text (a textarea custom field, a description) reads badly ragged-right in a narrow
   column, so those rows stack: label on top, value left-aligned and wrapping underneath. */
/* ============ @MENTIONS ============ */
/* The picker sits under the comment box rather than at the caret: a caret-accurate popup needs a
   mirrored copy of the textarea, and pinned under the box it is unambiguous at any wrap position. */
.mention-menu{position:relative;z-index:20;margin-top:-4px;border:1px solid var(--border);border-radius:var(--radius-sm);
    background:var(--bg-card);box-shadow:var(--shadow-lg);max-height:220px;overflow-y:auto}
.mention-option{display:flex;align-items:baseline;gap:8px;width:100%;padding:7px 10px;border:none;background:none;
    text-align:left;cursor:pointer;font-family:var(--font);font-size:0.82rem;color:var(--text)}
.mention-option:hover,.mention-option.is-active{background:rgba(var(--brand-rgb),0.12)}
.mention-name{font-weight:600}
.mention-email{color:var(--text-light);font-size:0.74rem}
.mention-chip{background:rgba(var(--brand-rgb),0.14);color:var(--primary-dark);border-radius:3px;padding:0 3px;font-weight:600}
/* The burndown's verdict. Coloured because "behind" and "on track" should be distinguishable
   before the sentence is read, not only after. */
.burndown-verdict{margin-top:10px;padding:8px 10px;border-radius:var(--radius);font-size:0.82rem;line-height:1.5}
.burndown-good{background:rgba(5,150,105,0.10);color:var(--text)}
.burndown-bad{background:rgba(242,97,29,0.12);color:var(--text)}
.burndown-flat{background:var(--bg-light);color:var(--text-secondary)}
/* The issue Details card's inline editors. One width for all of them: sized to content, a long
   sprint name made its row far wider than every other and the column stopped reading as a column. */
.issue-field{width:172px;max-width:100%;display:inline-block;text-overflow:ellipsis}
.info-row.info-row-stack{display:block}
.info-row-stack .info-value{display:block;text-align:left;margin-top:4px;white-space:pre-wrap;word-break:break-word}
.tag-list{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:rgba(var(--gold-rgb),0.1);color:var(--gold);border-radius:var(--radius-full);font-size:0.75rem;font-weight:600}
.tag .tag-remove{cursor:pointer;opacity:0.6;font-size:0.9rem}.tag .tag-remove:hover{opacity:1}
.score-bar{display:flex;align-items:center;gap:8px}
.score-fill{height:8px;border-radius:4px;background:var(--gold)}
.score-bg{flex:1;height:8px;border-radius:4px;background:var(--border)}

/* ============ ACTIVITY TIMELINE ============ */
.activity-timeline{display:flex;flex-direction:column;gap:0}
.activity-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-light)}
.activity-item:last-child{border-bottom:none}
.activity-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0;background:#F3F4F6;color:var(--text-secondary)}
.activity-content{flex:1;min-width:0}
.activity-subject{font-size:0.84rem;font-weight:500}
.activity-time{font-size:0.72rem;color:var(--text-light);margin-top:2px}
.activity-type{font-size:0.68rem;text-transform:uppercase;color:var(--text-light);letter-spacing:0.03em}

/* ============ ACTION ITEMS ============ */
.action-items-card{border-left:3px solid var(--gold)}
.action-item-row{display:flex;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border-light);align-items:flex-start;transition:background 0.15s}
.action-item-row:hover{background:rgba(var(--gold-rgb),0.04)}
.action-item-row:last-child{border-bottom:none}
.action-item-indicator{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:6px}
.action-item-row.action-overdue .action-item-indicator{background:var(--orange)}
.action-item-row.action-today .action-item-indicator{background:var(--orange);animation:pulse-dot 1.5s infinite}
.action-item-row.action-soon .action-item-indicator{background:#e6a700}
.action-item-body{flex:1;min-width:0}
.action-item-content{font-size:0.875rem;font-weight:500;margin-bottom:4px;color:var(--text-primary)}
.action-item-meta{display:flex;align-items:center;gap:12px;font-size:0.75rem}
.action-item-deal{color:var(--gold);text-decoration:none;font-weight:500;white-space:nowrap}
.action-item-deal:hover{text-decoration:underline}
/* The task itself, opened from the dashboard. Inherits the row's colour so the list still reads as
   a list rather than a wall of links; the underline on hover is what says it is clickable. */
.action-item-content a{color:inherit;text-decoration:none;cursor:pointer}
.action-item-content a:hover{color:var(--primary);text-decoration:underline}
/* Ticking a task off without leaving the dashboard. Aligned with the coloured urgency dot, which
   is what it replaces on rows that are tasks. */
.action-item-check{margin-top:4px;flex-shrink:0;cursor:pointer;width:15px;height:15px}
.action-item-date{color:var(--text-light)}
.action-item-date.action-overdue{color:var(--orange);font-weight:600}
.action-item-date.action-today{color:var(--orange);font-weight:600}
.action-item-date.action-soon{color:#c68f00;font-weight:500}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.4}}

/* ============ MODAL ============ */
.modal-overlay{position:fixed;inset:0;background:rgba(13,31,60,0.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal{background:var(--bg-card);border-radius:var(--radius-lg);max-width:640px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(13,31,60,0.15)}
.modal.modal-wide{max-width:720px}
/* A screenshot is opened to be READ. 720px would shrink a 1200px capture into unreadable text, so
   the preview gets as much of the viewport as it can while staying a dialog. */
.modal.modal-preview{max-width:min(1100px,94vw)}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between}
.modal-header h3{font-size:1.05rem;font-family:var(--font-display);font-weight:700}
.modal-close{background:none;border:none;font-size:1.5rem;color:var(--text-light);padding:4px;cursor:pointer}
.modal-close:hover{color:var(--text)}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border-light);display:flex;gap:8px;justify-content:flex-end}

/* ============ TOAST ============ */
.toast-container{position:fixed;top:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:var(--radius-sm);color:white;font-size:0.875rem;font-weight:500;box-shadow:var(--shadow-lg);animation:slideIn 0.3s ease;min-width:280px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.toast-success{background:var(--success)}.toast-error{background:var(--danger)}.toast-info{background:var(--navy)}.toast-warning{background:#B8880F}
.toast .close-toast{background:none;border:none;color:white;opacity:0.7;font-size:1.1rem;cursor:pointer}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ============ EMPTY STATE ============ */
.empty-state{text-align:center;padding:48px 20px}
.empty-state .icon{font-size:3rem;margin-bottom:16px;opacity:0.3}
.empty-state h3{margin-bottom:8px;font-family:var(--font-display)}
.empty-state p{color:var(--text-secondary);font-size:0.9rem}

/* ============ LOADER ============ */
.loader{display:flex;align-items:center;justify-content:center;padding:40px}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ SECTIONS ============ */
.section{margin-bottom:32px}
.section-title{font-size:1rem;font-weight:700;font-family:var(--font-display);color:var(--navy);margin-bottom:12px;display:flex;align-items:center;gap:8px}

/* ============ EMAIL PREVIEW ============ */
.email-preview{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-height:400px;overflow-y:auto}
.variable-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.variable-btn{padding:4px 10px;background:rgba(var(--gold-rgb),0.08);border:1px solid rgba(var(--gold-rgb),0.2);border-radius:var(--radius-full);font-size:0.7rem;color:var(--gold);cursor:pointer;font-weight:600;font-family:var(--font)}
.variable-btn:hover{background:rgba(var(--gold-rgb),0.15)}

/* Toggle switch */
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--border,#ccc);border-radius:24px;transition:.2s}
.toggle-slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle-switch input:checked+.toggle-slider{background:var(--gold,#E0B020)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px)}

/* Logo preview */
.logo-preview{width:80px;height:80px;border-radius:12px;object-fit:contain;border:2px solid var(--border);background:var(--bg,#fff)}
.logo-upload-area{display:flex;align-items:center;gap:16px;padding:16px;border:2px dashed var(--border);border-radius:8px;cursor:pointer}
.logo-upload-area:hover{border-color:var(--gold);background:rgba(var(--gold-rgb),0.03)}

/* ============ TABS ============ */
.ws-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--border-light);margin-bottom:24px}
.ws-tab{padding:10px 16px;font-size:0.84rem;font-weight:600;color:var(--text-light);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:var(--transition);font-family:var(--font);white-space:nowrap}
.ws-tab:hover{color:var(--text-secondary)}
.ws-tab.active{color:var(--navy);border-bottom-color:var(--gold)}
.ws-tab-panel{display:none}
.ws-tab-panel.active{display:block}
.field-tab-panel{display:none}
.field-tab-panel.active{display:block}
.field-search{position:relative;margin-bottom:16px}
.field-search input{width:100%;padding:10px 16px 10px 38px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:0.875rem;background:var(--bg-card);color:var(--text)}
.field-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),0.1)}
.field-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:0.85rem;pointer-events:none}

/* ============ INTEGRATIONS ============ */
.integrations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.integration-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;transition:var(--transition);border:2px solid transparent}
.integration-card:hover{box-shadow:var(--shadow-lg)}
.integration-card.connected{border-color:rgba(5,150,105,0.3)}
.integration-card-header{display:flex;align-items:center;gap:14px}
.integration-card-header h3{margin:0;font-size:1.1rem;font-weight:700;font-family:var(--font-display);color:var(--navy)}
@media(max-width:600px){.integrations-grid{grid-template-columns:1fr}}

/* ============ CUSTOM CSS EDITOR (utils/css-editor.js) ============ */
/* Syntax palette as classes rather than inline colours, so it can flip with the theme. Light values
   are the VS-Code light set the editor started with; the dark set below keeps contrast on --bg-card. */
.cssk-b{font-weight:600}
.cssk-comment{color:#6a9955;font-style:italic}
.cssk-str{color:#a31515}
.cssk-punc{color:#319331}
.cssk-punc2{color:#999}
.cssk-unit{color:#d32f2f}
.cssk-at{color:#7b30d0}
.cssk-hex{color:#0070c1}
.cssk-sel{color:#795e26}
.cssk-num{color:#098658}
.cssk-kw{color:#0451a5}

/* ============ DARK MODE ============ */
[data-theme="dark"] .cssk-comment{color:#6a9955}
[data-theme="dark"] .cssk-str{color:#ce9178}
[data-theme="dark"] .cssk-punc{color:#8ddb8d}
[data-theme="dark"] .cssk-punc2{color:#7a7a7a}
[data-theme="dark"] .cssk-unit{color:#f48771}
[data-theme="dark"] .cssk-at{color:#c586c0}
[data-theme="dark"] .cssk-hex{color:#4fc1ff}
[data-theme="dark"] .cssk-sel{color:#dcdcaa}
[data-theme="dark"] .cssk-num{color:#b5cea8}
[data-theme="dark"] .cssk-kw{color:#569cd6}

[data-theme="dark"]{
    --bg:#0D1520;--bg-card:#152030;--bg-surface:#1A2840;--bg-dark:#091220;--bg-darker:#060E18;
    --text:#E8E2D8;--text-secondary:#A0998E;--text-light:#6B6560;--text-inverse:#FFFFFF;
    --border:#243040;--border-light:#1E2A3E;--shadow:0 2px 12px rgba(0,0,0,0.3);--shadow-lg:0 8px 32px rgba(0,0,0,0.4);
}
[data-theme="dark"] .form-control{background:var(--bg);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .form-control:focus{border-color:var(--gold)}
[data-theme="dark"] .btn-secondary{background:var(--bg);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .pipeline-stage-select{background:var(--bg-card);color:var(--text);border-color:var(--border)}

/* ============ LINKEDIN ENRICHMENT ============ */
.linkedin-card{border-left:3px solid #0A66C2}
.linkedin-card .card-header{border-bottom-color:#0A66C233}
.linkedin-card table td{padding:8px;border-bottom:1px solid var(--border)}
.linkedin-card table tr:last-child td{border-bottom:none}
.enrich-diff{background:rgba(var(--gold-rgb),0.06)}
.enrich-accept-btn{background:var(--cta-yellow);color:var(--navy);border:none;padding:3px 10px;font-size:0.75rem;font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}
.enrich-accept-btn:hover{background:#f5d800}

/* ============ BLOCK EDITOR ============ */
.template-edit-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;height:calc(100vh - 140px)}
.template-edit-main{min-width:0;overflow-y:auto;padding-right:8px}
.template-preview-pane{overflow-y:auto;padding-right:4px}
.editor-mode-toggle{display:flex;gap:0;margin-bottom:16px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;width:fit-content}
.mode-btn{padding:8px 20px;background:var(--bg-surface);border:none;cursor:pointer;font-size:0.85rem;font-weight:500;color:var(--text-secondary);transition:var(--transition)}
.mode-btn.active{background:var(--navy);color:#fff}
.mode-btn:hover:not(.active){background:var(--bg-card)}
.block-editor{display:flex;gap:16px;min-height:400px}
.block-palette{width:180px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;background:var(--bg-card);max-height:600px;overflow-y:auto}
.palette-title{font-size:0.75rem;font-weight:600;text-transform:uppercase;color:var(--text-secondary);margin:0 0 8px;letter-spacing:0.05em}
.palette-section{margin-bottom:16px}
.palette-section:last-child{margin-bottom:0}
.block-palette-item{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:4px;border-radius:var(--radius-sm);cursor:pointer;font-size:0.85rem;transition:var(--transition);border:1px solid transparent}
.block-palette-item:hover{background:var(--bg-surface);border-color:var(--border)}
.palette-icon{width:20px;text-align:center;font-weight:700;color:var(--gold)}
.variable-group-label{font-size:0.7rem;font-weight:600;color:var(--text-secondary);margin:8px 0 4px;text-transform:uppercase}
.variable-chip{display:inline-block;padding:3px 8px;margin:2px;font-size:0.75rem;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:var(--transition);color:var(--text)}
.variable-chip:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.block-canvas{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;background:var(--bg-surface);min-height:400px}
.block-empty{text-align:center;padding:60px 20px;color:var(--text-secondary);font-size:0.9rem}
.block-card{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;background:var(--bg-card);transition:box-shadow 0.15s,opacity 0.15s}
.block-card:hover{box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.block-card.dragging{opacity:0.4;transform:rotate(1deg)}
.block-drop-indicator{height:3px;background:transparent;border-radius:2px;margin:-2px 0;transition:background 0.15s}
.block-drop-indicator.active{background:var(--gold)}
.block-header{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);gap:8px}
.block-drag-handle{cursor:grab;font-size:1rem;color:var(--text-secondary);user-select:none;line-height:1}
.block-drag-handle:active{cursor:grabbing}
.block-type-label{flex:1;font-size:0.8rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.03em}
.block-delete-btn{background:none;border:none;font-size:1.2rem;color:var(--text-secondary);cursor:pointer;padding:0 4px;line-height:1}
.block-delete-btn:hover{color:#e53e3e}
.block-config{padding:10px 12px}
.config-row{margin-bottom:8px}
.config-row:last-child{margin-bottom:0}
.config-row-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.config-mini-label{font-size:0.75rem;color:var(--text-secondary);display:flex;align-items:center;gap:4px}
.config-columns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.block-textarea{min-height:60px;resize:vertical;font-size:0.85rem}
.block-textarea-sm{min-height:40px;resize:vertical;font-size:0.85rem}
.social-row{margin-bottom:6px}
.social-name{font-size:0.8rem;font-weight:500;min-width:60px}
.form-control-sm{padding:4px 8px;font-size:0.8rem}
.variable-toolbar{display:flex;flex-wrap:wrap;gap:4px}
.variable-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:3px 10px;font-size:0.75rem;cursor:pointer;transition:var(--transition);font-family:monospace}
.variable-btn:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
[contenteditable="true"]:empty:before{content:attr(placeholder);color:#999;pointer-events:none}
.send-email-toolbar .btn-sm.btn-outline{padding:2px 8px;font-size:0.8rem;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;cursor:pointer;min-width:28px;display:inline-flex;align-items:center;justify-content:center}
.send-email-toolbar .btn-sm.btn-outline:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
#send-email-body{border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:var(--bg-card)}
#send-email-body:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(var(--gold-rgb),0.15)}
/* badge override for block editor context is removed — uses main badge styles */

@media(max-width:900px){
    .template-edit-layout{grid-template-columns:1fr;height:auto}
    .block-editor{flex-direction:column}
    .block-palette{width:100%;max-height:none;display:flex;flex-wrap:wrap;gap:8px}
    .palette-section{margin-bottom:0}
    .block-canvas{max-height:none}
}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--border-light);margin-bottom:0}
.tab-btn{padding:10px 16px;border:none;background:none;font-size:13px;font-weight:600;cursor:pointer;color:var(--text-light);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;white-space:nowrap}
.tab-btn:hover{color:var(--text-secondary)}
.tab-btn.tab-active{color:var(--navy);border-bottom-color:var(--gold)}

/* Rich Text Editor */
.rich-text-toolbar{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--border);background:var(--bg-surface);flex-wrap:wrap;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.rich-text-toolbar button{background:var(--bg-card);border:1px solid var(--border);border-radius:4px;cursor:pointer;min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:0.8rem;color:var(--text);transition:var(--transition);padding:0 6px;line-height:1}
.rich-text-toolbar button:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.rich-text-toolbar button.active{background:var(--navy);color:var(--text-inverse);border-color:var(--navy)}
.rich-text-toolbar select{padding:4px 6px;font-size:0.75rem;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);color:var(--text);cursor:pointer;height:28px;max-width:120px}
.rich-text-toolbar select:focus{outline:none;border-color:var(--gold)}
.rich-text-toolbar .rte-separator{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0}
.rich-text-toolbar .rte-color-label{display:inline-flex;align-items:center;cursor:pointer;position:relative;width:28px;height:28px;justify-content:center;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);transition:var(--transition)}
.rich-text-toolbar .rte-color-label:hover{border-color:var(--gold)}
.rich-text-toolbar .rte-color-icon{font-weight:700;font-size:0.8rem;color:var(--text);border-bottom:3px solid #000;line-height:1;padding-bottom:1px}
.rich-text-toolbar .rte-text-color{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;cursor:pointer}
.rich-text-area{min-height:120px;padding:12px;outline:none;overflow-y:auto;background:var(--bg-card);color:var(--text);font-size:0.875rem;line-height:1.6;border-radius:0 0 var(--radius-sm) var(--radius-sm);border:1px solid var(--border);border-top:none}
.rich-text-area:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(var(--gold-rgb),0.1)}
.rich-text-area:empty:before{content:attr(placeholder);color:var(--text-light);pointer-events:none}
.rich-text-area img{max-width:100%;height:auto}
[data-theme="dark"] .rich-text-toolbar{background:var(--bg-surface)}
[data-theme="dark"] .rich-text-toolbar button{background:var(--bg);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .rich-text-toolbar button:hover{background:var(--gold);color:var(--navy)}
[data-theme="dark"] .rich-text-toolbar button.active{background:var(--gold);color:var(--navy);border-color:var(--gold)}
[data-theme="dark"] .rich-text-toolbar select{background:var(--bg);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .rich-text-area{background:var(--bg);color:var(--text);border-color:var(--border)}
.block-card.block-locked{border-left:3px solid var(--text-light);opacity:0.7}
.block-card.block-locked .block-config{pointer-events:none;opacity:0.5}
.block-editable-toggle{background:none;border:none;cursor:pointer;font-size:1rem;padding:2px 4px;line-height:1;opacity:0.7;transition:opacity 0.15s}
.block-editable-toggle:hover{opacity:1}
.block-lock-badge{font-size:0.8rem;opacity:0.5}
.template-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;max-height:300px;overflow-y:auto;padding:4px}
.template-picker-card{border:2px solid var(--border);border-radius:var(--radius-sm);padding:12px;cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s}
.template-picker-card:hover{border-color:var(--gold);box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.template-picker-card.selected{border-color:var(--gold);background:rgba(var(--gold-rgb),0.06);box-shadow:0 0 0 2px rgba(var(--gold-rgb),0.2)}
.template-picker-name{font-weight:600;font-size:0.9rem;margin-bottom:4px}
.template-picker-meta{display:flex;gap:4px;flex-wrap:wrap}
.badge-sm{font-size:0.65rem;padding:1px 5px}

/* ============ FLOATING TOOLBAR (INLINE EDITING) ============ */
.be-floating-toolbar{position:absolute;z-index:100;display:flex;align-items:center;gap:2px;padding:4px 8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);white-space:nowrap}
.be-floating-toolbar button{background:var(--bg-card);border:1px solid var(--border);border-radius:4px;cursor:pointer;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-size:0.75rem;color:var(--text);transition:var(--transition);padding:0 4px;line-height:1}
.be-floating-toolbar button:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.be-floating-toolbar button.active{background:var(--navy);color:var(--text-inverse);border-color:var(--navy)}
.be-floating-toolbar select{padding:2px 4px;font-size:0.72rem;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);color:var(--text);cursor:pointer;height:26px}
.be-floating-toolbar .toolbar-sep{width:1px;height:18px;background:var(--border);margin:0 4px;flex-shrink:0}

/* ============ PREVIEW CONTROLS ============ */
.preview-controls{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.preview-btn{padding:6px 14px;border:1px solid var(--border);background:var(--bg-card);border-radius:var(--radius-sm);cursor:pointer;font-size:0.8rem;font-weight:500;color:var(--text-secondary);transition:var(--transition)}
.preview-btn:hover{border-color:var(--gold);color:var(--navy)}
.preview-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.preview-frame-wrapper{transition:width 0.3s ease;overflow:hidden;margin:0 auto}
.preview-frame-wrapper.preview-desktop{width:600px}
.preview-frame-wrapper.preview-mobile{width:375px}
.preview-frame-wrapper.preview-mobile iframe{transform:scale(0.625);transform-origin:top left;width:600px;height:800px}
.preview-fullscreen-overlay{position:fixed;inset:0;background:rgba(13,31,60,0.6);backdrop-filter:blur(4px);z-index:250;display:flex;align-items:center;justify-content:center;padding:24px}
.preview-fullscreen-content{background:var(--bg-card);border-radius:var(--radius-lg);max-width:700px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.preview-fullscreen-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.preview-fullscreen-body{flex:1;overflow-y:auto;padding:0;display:flex;justify-content:center}

/* ============ BLOCK EDITOR ENHANCEMENTS ============ */
.block-style-panel{padding:8px 12px;border-top:1px solid var(--border-light);background:var(--bg-surface)}
.block-style-toggle{background:none;border:none;font-size:0.75rem;color:var(--text-secondary);cursor:pointer;padding:4px 0;display:flex;align-items:center;gap:4px;width:100%;transition:color 0.15s}
.block-style-toggle:hover{color:var(--text)}
.block-style-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.block-style-fields label{font-size:0.7rem;color:var(--text-light);display:flex;flex-direction:column;gap:2px}
.block-style-fields input{padding:3px 6px;font-size:0.78rem;border:1px solid var(--border);border-radius:4px}
.brand-swatch{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;display:inline-block}
.brand-swatch:hover{transform:scale(1.15);box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.brand-swatch.selected{border-color:var(--navy);box-shadow:0 0 0 2px rgba(13,31,60,0.3)}
.brand-swatches{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}

/* Module library */
.module-library-section{border-top:1px solid var(--border);padding-top:12px;margin-top:8px}
.module-card{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:4px;border-radius:var(--radius-sm);cursor:pointer;font-size:0.82rem;transition:var(--transition);border:1px solid var(--border);background:var(--bg-card)}
.module-card:hover{border-color:var(--gold);background:rgba(var(--gold-rgb),0.04)}
.module-card .module-name{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.module-card .module-delete{background:none;border:none;color:var(--text-light);cursor:pointer;font-size:0.9rem;padding:0 2px;line-height:1;opacity:0}
.module-card:hover .module-delete{opacity:1}
.module-card .module-delete:hover{color:var(--danger)}

/* Column layout picker */
.column-layout-picker{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.layout-option{width:48px;height:32px;border:2px solid var(--border);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:1px;padding:4px;transition:border-color 0.15s,background 0.15s}
.layout-option:hover{border-color:var(--gold)}
.layout-option.selected{border-color:var(--gold);background:rgba(var(--gold-rgb),0.08)}
.layout-option .col-bar{background:var(--border);border-radius:2px;height:100%}
.layout-option.selected .col-bar{background:var(--gold)}

/* Drop zones (drag-and-drop insertion points) */
.drop-zone{height:4px;margin:0 -2px;border-radius:2px;transition:all 0.2s;position:relative}
.drop-zone.active{height:28px;background:rgba(var(--gold-rgb),0.1);border:2px dashed var(--gold);margin:4px -2px}
.drop-zone.active::after{content:'Drop here';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:0.7rem;color:var(--gold);font-weight:600;white-space:nowrap}

/* Lock level indicators */
.lock-level-full{border-left:3px solid var(--text-light);opacity:0.6}
.lock-level-full .block-config{pointer-events:none;opacity:0.4}
.lock-level-content .block-header .block-delete-btn,.lock-level-content .block-drag-handle{opacity:0.3;pointer-events:none}

/* Inline editable blocks */
.block-inline-edit{outline:none;min-height:1.2em;cursor:text;padding:4px;border-radius:2px;transition:background 0.15s}
.block-inline-edit:hover{background:rgba(var(--gold-rgb),0.04)}
.block-inline-edit:focus{background:rgba(var(--gold-rgb),0.06);box-shadow:0 0 0 2px rgba(var(--gold-rgb),0.15)}

/* ============ APPROVAL WORKFLOW ============ */
.badge-pending-approval{background:#FEF3C7;color:#92400E}
.badge-revision-requested{background:#FFF7ED;color:#C2410C}
.approval-comment-alert{padding:12px 16px;border-radius:var(--radius-sm);background:#FFF7ED;border:1px solid #FDBA74;color:#9A3412;font-size:0.875rem;margin-bottom:16px}
.approval-comment-alert strong{font-weight:600}
.approval-info{display:flex;flex-direction:column;gap:6px;padding:12px 16px;background:var(--bg-surface);border-radius:var(--radius-sm);border:1px solid var(--border);margin-top:12px}
.approval-info .info-line{font-size:0.8rem;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
.approval-info .info-line strong{color:var(--text);font-weight:600}

/* ============ A/B TESTING ============ */
.ab-comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.ab-variant-card{background:var(--bg-card);border-radius:var(--radius);padding:20px;border:2px solid var(--border);transition:border-color 0.15s}
.ab-variant-card.ab-winner{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),0.15)}
.ab-variant-label{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.ab-winner-badge{background:var(--gold);color:var(--navy);padding:2px 8px;border-radius:var(--radius-full);font-size:0.65rem;font-weight:700}
.ab-variant-subject{font-size:0.95rem;font-weight:600;color:var(--text);margin-bottom:12px}
.ab-variant-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ab-stat{text-align:center}
.ab-stat-value{font-size:1.2rem;font-weight:700;color:var(--navy);font-family:var(--font-display)}
.ab-stat-label{font-size:0.7rem;color:var(--text-secondary);text-transform:uppercase}
@media(max-width:640px){.ab-comparison{grid-template-columns:1fr}}

/* ============ CAMPAIGN ANALYTICS ============ */
.stat-card .stat-rate{font-size:0.85rem;color:var(--text-secondary);margin-top:2px}
.stat-card .stat-rate strong{color:var(--navy);font-weight:700}
.link-stats-table{width:100%;border-collapse:collapse;font-size:0.85rem}
.link-stats-table th{text-align:left;padding:8px 12px;font-size:0.7rem;text-transform:uppercase;color:var(--text-light);border-bottom:1px solid var(--border);font-weight:600}
.link-stats-table td{padding:8px 12px;border-bottom:1px solid var(--border-light)}
.link-stats-table td:first-child{word-break:break-all;max-width:300px}
.link-stats-table tr:last-child td{border-bottom:none}
.engagement-chart-container{position:relative;height:250px;margin-top:8px}

/* Campaign wizard steps */
.wizard-steps{display:flex;align-items:center;gap:0;margin-bottom:24px;padding:0 8px}
.wizard-step{display:flex;align-items:center;gap:8px;flex:1}
.wizard-step-number{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8rem;border:2px solid var(--border);color:var(--text-light);transition:var(--transition)}
.wizard-step.active .wizard-step-number{background:var(--navy);color:#fff;border-color:var(--navy)}
.wizard-step.completed .wizard-step-number{background:var(--success);color:#fff;border-color:var(--success)}
.wizard-step-label{font-size:0.8rem;font-weight:500;color:var(--text-light)}
.wizard-step.active .wizard-step-label{color:var(--text);font-weight:600}
.wizard-step.completed .wizard-step-label{color:var(--success)}
.wizard-step-line{flex:1;height:2px;background:var(--border);margin:0 8px}
.wizard-step.completed+.wizard-step-line,.wizard-step.completed .wizard-step-line{background:var(--success)}
.wizard-panel{display:none}
.wizard-panel.active{display:block}

/* ============ STARTER TEMPLATE GALLERY ============ */
.starter-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-height:400px;overflow-y:auto;padding:4px}
.starter-card{border:2px solid var(--border);border-radius:var(--radius-sm);padding:16px;cursor:pointer;text-align:center;transition:border-color 0.15s,box-shadow 0.15s,background 0.15s}
.starter-card:hover{border-color:var(--gold);box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.starter-card.selected{border-color:var(--gold);background:rgba(var(--gold-rgb),0.06)}
.starter-card-icon{font-size:2rem;margin-bottom:8px}
.starter-card-name{font-weight:600;font-size:0.9rem;margin-bottom:4px}
.starter-card-desc{font-size:0.75rem;color:var(--text-secondary)}
@media(max-width:640px){.starter-gallery{grid-template-columns:repeat(2,1fr)}}

/* Dashboard Grid */
.dashboard-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;grid-auto-flow:dense}
.dashboard-widget{background:var(--bg-card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow 0.15s,opacity 0.15s}
.dashboard-widget.drag-over{box-shadow:0 0 0 2px var(--primary,#0D1F3C),var(--shadow)}
.widget-header{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:0.85rem;flex-shrink:0}
.widget-body{padding:16px;position:relative;flex:1;min-height:0}
.chart-container{position:relative;width:100%;height:100%}
@media(max-width:768px){.dashboard-grid{grid-template-columns:1fr}.dashboard-widget{grid-column:span 1!important}}

/* Project detail strip: the project's own facts, under the title on every tab. Small on purpose —
   it answers "who is the client / how much budget is left" without becoming a second dashboard. */
.proj-strip{display:flex;flex-wrap:wrap;gap:8px 28px;padding:10px 14px;margin-bottom:14px;border:1px solid var(--border);border-radius:var(--radius,8px);background:var(--bg-secondary,#f8f9fb)}
.proj-strip-item{display:flex;flex-direction:column;gap:1px;min-width:0}
.proj-strip-label{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-light,#8a93a3);font-weight:600;white-space:nowrap}
.proj-strip-value{font-size:0.88rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-strip-value a{color:var(--primary)}
@media(max-width:768px){.proj-strip{gap:8px 18px}.proj-strip-value{font-size:0.82rem}}

/* Project calendar view — the .cal-* classes live inside the booking page's inline <style>,
   so the month grid needs its own set here. */
/* minmax(0,1fr) + min-width:0 on the cell, not `1fr` alone: a grid item's default min-width is
   `auto`, i.e. its MIN-CONTENT width, so a long nowrap chip widened its whole column and threw the
   week out of alignment — the ellipsis never engaged because the box grew instead of clipping. */
.pcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius,8px);overflow:hidden}
.pcal-head{background:var(--bg-secondary,#f8f9fb);padding:6px 8px;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-light,#8a93a3);text-align:center}
/* Documentation view */
.doc-layout{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start}
.doc-toc{position:sticky;top:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}
.doc-toc-group{margin-bottom:12px}
.doc-toc-heading{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-light);font-weight:700;margin:6px 4px 4px}
.doc-toc-link{display:block;padding:6px 10px;border-radius:var(--radius-sm);font-size:0.85rem;color:var(--text-secondary);text-decoration:none;line-height:1.3}
.doc-toc-link:hover{background:rgba(var(--gold-rgb),0.08);color:var(--text-primary)}
.doc-toc-link.active{background:rgba(var(--gold-rgb),0.14);color:var(--text-primary);font-weight:600}
.doc-content{min-width:0}
.doc-breadcrumb{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-light);font-weight:700;margin-bottom:4px}
.doc-title{font-size:1.5rem;margin:0 0 14px;color:var(--text-primary)}
.doc-body{font-size:0.92rem;line-height:1.65;color:var(--text-primary);max-width:760px}
.doc-body h3{font-size:1.02rem;margin:20px 0 8px;color:var(--text-primary)}
.doc-body p{margin:0 0 12px}
.doc-body ul{margin:0 0 14px;padding-left:22px}
.doc-body li{margin-bottom:7px}
.doc-body code{background:var(--bg-secondary,#f4f5f7);border-radius:4px;padding:1px 5px;font-size:0.85em}
.doc-body a{color:var(--primary);font-weight:600}
.doc-callout{background:rgba(var(--gold-rgb),0.07);border:1px solid rgba(var(--gold-rgb),0.28);border-radius:var(--radius-sm);padding:12px 14px;margin:16px 0 4px}
.doc-callout-title{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;font-weight:700;color:var(--text-secondary);margin-bottom:6px}
.doc-callout ul{margin:0;padding-left:18px}
.doc-callout li{margin-bottom:4px;font-size:0.85rem}
.doc-flow{margin-top:14px;padding:12px 14px;background:var(--bg-secondary,#f4f5f7);border-radius:var(--radius-sm);font-size:0.82rem;font-weight:600;line-height:1.7;color:var(--text-primary)}
.doc-shot{margin:0 0 18px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-secondary,#f4f5f7)}
.doc-shot img{display:block;width:100%;height:auto}
.doc-shot figcaption{padding:8px 12px;font-size:0.78rem;color:var(--text-secondary);border-top:1px solid var(--border);background:var(--bg-card)}
@media (max-width:820px){.doc-layout{grid-template-columns:1fr}.doc-toc{position:static}}

/* QA / review panel (components/qa-panel.js) */
.qa-panel{margin-top:16px}
.qa-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qa-header-badges{display:inline-flex;gap:6px}
.qa-banner{padding:8px 12px;border-radius:var(--radius-sm);font-size:0.85rem;margin-bottom:12px}
.qa-banner-ok{background:rgba(46,160,67,0.12);border:1px solid rgba(46,160,67,0.35);color:var(--text-primary,#1a2233)}
.qa-banner-block{background:rgba(220,53,69,0.10);border:1px solid rgba(220,53,69,0.35);color:var(--text-primary,#1a2233)}
.qa-banner-info{background:rgba(var(--gold-rgb),0.12);border:1px solid rgba(var(--gold-rgb),0.30);color:var(--text-primary,#1a2233)}
.qa-levels{display:flex;flex-direction:column;gap:14px}
.qa-level{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}
.qa-level-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qa-level-label{font-weight:600;font-size:0.85rem}
.qa-level-status{min-width:120px}
.qa-level-actions{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.qa-muted{font-size:0.8rem}
.qa-request{margin-top:12px}
.qa-assignee{font-size:0.82rem;color:var(--text-secondary)}
.qa-assignee-name{cursor:pointer;color:var(--text-primary,#1a2233);border-bottom:1px dotted var(--border)}
.qa-assignee-name.qa-unassigned{color:var(--text-secondary);font-style:italic}
.qa-asgn-select{width:auto;display:inline-block;min-width:150px}
.qa-checklist{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.qa-checklist-title{font-weight:600;font-size:0.82rem;margin-bottom:6px}
.qa-checklist-saved{font-weight:500;font-size:0.72rem;color:var(--success,#2e7d32);margin-left:6px}
.qa-check{display:flex;align-items:flex-start;gap:8px;font-size:0.85rem;font-weight:400;margin-bottom:5px;cursor:pointer}
.qa-check input{margin-top:3px}
.qa-checklist-note{font-size:0.76rem;color:var(--text-secondary);margin-top:5px}
.qa-notes{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.qa-notes-title{font-weight:600;font-size:0.82rem;margin-bottom:6px}
.qa-note{background:var(--bg-secondary,#f4f5f7);border-radius:var(--radius-sm);padding:6px 10px;margin-bottom:6px}
.qa-note-meta{font-size:0.72rem;color:var(--text-secondary);display:flex;gap:8px}
.qa-note-author{font-weight:600;color:var(--text-primary,#1a2233)}
.qa-note-body{font-size:0.85rem;white-space:pre-wrap;margin-top:2px}
.qa-note-add{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:6px}
.qa-note-add textarea{width:100%}
.qa-cfg-list{display:flex;flex-direction:column;gap:12px}
.qa-cfg-row{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}
.qa-cfg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.qa-cfg-name{display:flex;align-items:center;gap:8px;font-weight:400;cursor:pointer}
.qa-cfg-controls{display:inline-flex;align-items:center;gap:16px;font-size:0.85rem}
.qa-cfg-controls label{display:inline-flex;align-items:center;gap:6px}
.qa-cfg-checklist{margin-top:10px}
.qa-cfg-checklist summary{cursor:pointer;font-size:0.85rem;color:var(--text-secondary)}
.qa-cfg-checklist textarea{margin-top:8px}

/* Type-to-search multiselect (lead-routing watched fields) */
.rt-ms{position:relative}
.rt-ms-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;min-height:0}
.rt-ms-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(var(--gold-rgb),0.12);border:1px solid rgba(var(--gold-rgb),0.35);color:var(--text-primary,#1a2233);border-radius:14px;padding:2px 6px 2px 10px;font-size:0.8rem}
.rt-ms-x{border:none;background:none;cursor:pointer;font-size:1rem;line-height:1;color:var(--text-secondary);padding:0 2px}
.rt-ms-x:hover{color:#dc2626}
.rt-ms-dd{position:absolute;left:0;right:0;z-index:30;background:var(--bg-card,#fff);border:1px solid var(--border);border-radius:var(--radius-sm);margin-top:4px;max-height:240px;overflow-y:auto;box-shadow:var(--shadow-lg)}
.rt-ms-item{padding:8px 11px;cursor:pointer;font-size:0.85rem}
.rt-ms-item:hover{background:rgba(var(--gold-rgb),0.10)}
.rt-ms-empty{padding:8px 11px;font-size:0.8rem;color:var(--text-secondary)}
.cap-hint-wrap{margin-top:6px}
.cap-hint{font-size:0.78rem;line-height:1.35;padding:6px 9px;border-radius:var(--radius-sm);border:1px solid transparent}
.cap-hint.cap-over{background:rgba(220,38,38,0.08);border-color:rgba(220,38,38,0.35);color:#b91c1c}
.cap-hint.cap-tight{background:rgba(245,158,11,0.10);border-color:rgba(245,158,11,0.35);color:#b45309}
.cap-hint.cap-ok{background:rgba(5,150,105,0.08);border-color:rgba(5,150,105,0.30);color:#047857}
.cap-hint.cap-muted{background:var(--bg-secondary,#f4f5f7);color:var(--text-secondary,#6b7280)}
.pm-contact-results{margin-top:6px;max-height:220px;overflow-y:auto}
.pm-contact-result{padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:4px;cursor:pointer;font-size:0.85rem}
.pm-contact-result:hover{background:rgba(var(--gold-rgb),0.08)}
.pcal-day{background:var(--bg-primary,#fff);min-height:92px;min-width:0;padding:5px 6px;display:flex;flex-direction:column;gap:3px}
.pcal-day.pcal-empty{background:var(--bg-secondary,#f8f9fb)}
.pcal-day.pcal-today{box-shadow:inset 0 0 0 2px var(--primary)}
.pcal-num{font-size:0.75rem;font-weight:700;color:var(--text-light,#8a93a3)}
.pcal-today .pcal-num{color:var(--primary)}
.pcal-chip{display:block;max-width:100%;font-size:0.72rem;line-height:1.25;padding:2px 5px;border-radius:4px;background:rgba(0,159,255,0.12);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcal-chip:hover{background:rgba(0,159,255,0.22)}
.pcal-chip.pcal-done{background:rgba(5,150,105,0.12);text-decoration:line-through;color:var(--text-light,#8a93a3)}
.pcal-chip.pcal-late{background:rgba(220,38,38,0.12);color:#dc2626}
.pcal-more{font-size:0.68rem;color:var(--text-light,#8a93a3);background:none;border:none;padding:1px 4px;text-align:left;cursor:pointer;font-family:inherit}
.pcal-more:hover{color:var(--primary);text-decoration:underline}
@media(max-width:768px){.pcal-day{min-height:64px}.pcal-chip{font-size:0.66rem}}

/* Inline edit pencils on the issue detail — quiet until you look for them, so the reading view
   stays a reading view. */
.inline-edit-btn{background:none;border:none;cursor:pointer;color:var(--text-secondary);font-size:0.85rem;padding:0 4px;font-family:inherit;opacity:0.55;transition:var(--transition)}
.inline-edit-btn:hover{opacity:1;color:var(--primary)}
.card-header .inline-edit-btn{float:right}
input.issue-overdue{color:#dc2626;font-weight:600;border-color:#dc2626}

/* ===== Workspace → Limits ===== */
.limits-table td{vertical-align:middle}
.limit-name{font-weight:500;margin-bottom:6px}
.limit-figure{white-space:nowrap;font-variant-numeric:tabular-nums}
.limit-bar{height:6px;border-radius:3px;background:var(--border-light);overflow:hidden;max-width:320px}
.limit-bar-fill{display:block;height:100%;border-radius:3px;transition:width 0.3s}
/* Green while there is room, amber approaching the ceiling, red once it stops accepting more —
   the same three states the notice above the table uses. */
.limit-bar-fill.limit-ok{background:var(--brand)}
.limit-bar-fill.limit-warn{background:#e6a700}
.limit-bar-fill.limit-full{background:var(--orange)}

/* ===== Issue attachments ===== */
.attach-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border-light)}
.attach-row:last-of-type{border-bottom:none}
.attach-thumb{width:40px;height:40px;flex-shrink:0;border-radius:var(--radius-sm);background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden}
.attach-thumb img{width:100%;height:100%;object-fit:cover}
.attach-thumb-clickable{cursor:pointer}
/* The preview modal. contain, not cover: a screenshot is being READ here, so nothing may be cropped. */
.attach-preview{display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:var(--radius-sm);padding:8px;min-height:120px}
/* The dialog itself is the scroll container, so a 70vh image pushed Close/Download below its own
   fold. The chrome around the image (header, meta, footer, padding) is a roughly constant ~250px
   whatever the screen height, so subtract it rather than guessing another percentage. */
.attach-preview img{max-width:100%;max-height:max(160px, calc(90vh - 260px));object-fit:contain}
.attach-meta{flex:1;min-width:0}
.attach-name{display:block;font-weight:500;font-size:0.85rem;color:var(--text);text-decoration:none;word-break:break-word}
.attach-name:hover{color:var(--primary);text-decoration:underline}
.attach-add{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.attach-input{font-size:0.8rem}

/* ===== My Work ===== */
.mw-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mw-filters input#mw-q{flex:1;min-width:240px}
.mw-filters select{width:auto;min-width:130px}
.mw-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8rem;white-space:nowrap}
.mw-title{font-weight:500;color:var(--text);text-decoration:none}
.mw-title:hover{color:var(--primary);text-decoration:underline}
.mw-overdue{color:var(--orange);font-weight:600}