/* ── ZoeIly brand typography ─────────────────────────────── */
.zoeily-brand {
    font-family: "Segoe Script", "Brush Script MT", "Apple Chancery", cursive;
    font-weight: 700;
    background: linear-gradient(135deg, #4F46E5 0%, #A855F7 60%, #EC4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: .01em;
    line-height: 1;
}

/* ── Searchable combobox (shared) ────────────────────────── */
.cb-wrap { position: relative; }
.cb-input-wrap { position: relative; }
.cb-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.cb-input { padding-left: 28px !important; padding-right: 28px !important; }
.cb-spinner { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: #9CA3AF; }

.cb-chip { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .75rem; border-radius: 10px; border: 1px solid #D1FAE5; background: #F0FDF4; }
.cb-chip-body { flex: 1; min-width: 0; }
.cb-chip-name { font-size: 13px; font-weight: 600; color: #111827; }
.cb-chip-sub  { font-size: 11.5px; color: #6B7280; }
.cb-chip-clear { background: none; border: none; padding: 0; cursor: pointer; color: #9CA3AF; flex-shrink: 0; margin-top: 1px; transition: color .15s; }
.cb-chip-clear:hover { color: #EF4444; }

.cb-avatar { border-radius: 50%; background: linear-gradient(135deg, #6366F1, #8B5CF6); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; text-transform: uppercase; }
.cb-avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.cb-avatar-xs { width: 24px; height: 24px; font-size: 9px; }

.cb-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 200; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.10); max-height: 220px; overflow-y: auto; }
.cb-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; cursor: pointer; border-bottom: 1px solid #F9FAFB; transition: background .1s; }
.cb-item:last-child { border-bottom: none; }
.cb-item:hover { background: #F5F3FF; }
.cb-item-body { min-width: 0; flex: 1; }
.cb-item-name { font-size: 13px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-item-sub  { font-size: 11px; color: #9CA3AF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-empty { padding: .875rem .75rem; font-size: 12.5px; color: #9CA3AF; text-align: center; }
.cb-loading-more { display: flex; justify-content: center; padding: .5rem; border-top: 1px solid #F3F4F6; }

/* ── Design tokens ───────────────────────────────────────── */
:root {
    --accent:         #4F46E5;
    --accent-hover:   #4338CA;
    --accent-light:   #EEF2FF;
    --accent-ring:    rgba(79,70,229,.18);

    --green:   #059669; --green-bg:  #ECFDF5;
    --amber:   #D97706; --amber-bg:  #FFFBEB;
    --red:     #DC2626; --red-bg:    #FEF2F2;
    --blue:    #2563EB; --blue-bg:   #EFF6FF;
    --purple:  #7C3AED; --purple-bg: #F5F3FF;
    --teal:    #0D9488; --teal-bg:   #F0FDFA;

    --sidebar-bg:     #0A0F1E;
    --sidebar-border: rgba(255,255,255,.06);
    --sidebar-width:  240px;

    --page-bg:    #F8FAFC;
    --surface:    #FFFFFF;
    --border:     #E5E7EB;
    --border-sm:  #F3F4F6;

    --txt-1: #111827;
    --txt-2: #374151;
    --txt-3: #6B7280;
    --txt-4: #9CA3AF;

    --r:    14px;
    --r-sm: 8px;
    --r-xs: 6px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,.08);
}

/* ── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--page-bg);
    color: var(--txt-2);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4 { color: var(--txt-1); font-weight: 700; letter-spacing: -.02em; margin: 0; }
.page-title { font-size: 1.2rem; font-weight: 700; color: var(--txt-1); letter-spacing: -.02em; }
.page-subtitle { font-size: 12.5px; color: var(--txt-3); margin-top: .2rem; }

/* ── Layout ──────────────────────────────────────────────── */
.content { padding: 1.75rem 2rem; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    font-size: 13px; font-weight: 500;
    border-radius: var(--r-sm);
    padding: .45rem 1rem;
    display: inline-flex; align-items: center; gap: .35rem;
    transition: all .12s ease;
    line-height: 1.4;
}
.btn-primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
    box-shadow: 0 1px 3px rgba(79,70,229,.25);
}
.btn-primary:hover  { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; box-shadow: 0 3px 8px rgba(79,70,229,.3); }
.btn-secondary      { background: var(--surface); border-color: var(--border); color: var(--txt-2); box-shadow: var(--shadow-sm); }
.btn-secondary:hover{ background: var(--page-bg); color: var(--txt-1); }
.btn-outline-secondary { background: var(--surface); border-color: var(--border); color: var(--txt-3); }
.btn-outline-secondary:hover { background: var(--page-bg); color: var(--txt-1); border-color: #D1D5DB; }
.btn-outline-primary { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn-outline-primary:hover { background: var(--accent); color: #fff; }
.btn-outline-info    { border-color: var(--blue);   color: var(--blue);   background: transparent; }
.btn-outline-info:hover    { background: var(--blue);   border-color: var(--blue);   color: #fff; }
.btn-outline-warning { border-color: var(--amber);  color: var(--amber);  background: transparent; }
.btn-outline-warning:hover { background: var(--amber);  border-color: var(--amber);  color: #fff; }
.btn-outline-danger  { border-color: var(--red);    color: var(--red);    background: transparent; }
.btn-outline-danger:hover  { background: var(--red);    border-color: var(--red);    color: #fff; }
.btn-sm { padding: .3rem .65rem; font-size: 12px; }
.btn-lg { padding: .55rem 1.4rem; font-size: 14px; }
.btn:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 3px var(--accent-ring); outline: none;
}

/* ── Cards ───────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: .875rem 1.25rem;
    font-weight: 600; font-size: 13.5px; color: var(--txt-1);
    display: flex; align-items: center; gap: .5rem;
}
.card-body { padding: 1.25rem; }
.card-footer { background: #FAFAFA; border-top: 1px solid var(--border); padding: .875rem 1.25rem; border-radius: 0 0 var(--r) var(--r); }

/* ── Stat cards ──────────────────────────────────────────── */
.stat-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r); padding: 1.25rem; box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .15s;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-icon { width: 42px; height: 42px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-value { font-size: 1.65rem; font-weight: 700; color: var(--txt-1); line-height: 1.15; letter-spacing: -.03em; }
.stat-label { font-size: 12px; color: var(--txt-3); font-weight: 500; margin-top: .15rem; }

/* ── Tables ──────────────────────────────────────────────── */
.table { font-size: 13px; margin-bottom: 0; color: var(--txt-2); }
.table thead th {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--txt-3); background: #F9FAFB;
    border-bottom: 1px solid var(--border);
    padding: .7rem 1rem; white-space: nowrap;
}
.table tbody td { padding: .8rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--border-sm); }
.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr { transition: background .1s; }
.table-hover tbody tr:hover td { background: #F9FAFB; }
.table-light { background: transparent !important; }
.table-responsive {
    border: 1px solid var(--border); border-radius: var(--r);
    background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    font-size: 11px; font-weight: 600;
    padding: .28em .65em; border-radius: 99px;
    display: inline-flex; align-items: center; gap: .2rem;
}
/* solid */
.bg-primary   { background: var(--accent) !important; color: #fff !important; }
.bg-success   { background: var(--green)  !important; color: #fff !important; }
.bg-danger    { background: var(--red)    !important; color: #fff !important; }
.bg-warning   { background: var(--amber)  !important; color: #fff !important; }
.bg-info      { background: var(--blue)   !important; color: #fff !important; }
.bg-secondary { background: #9CA3AF       !important; color: #fff !important; }
/* soft */
.badge-soft-success { background: var(--green-bg);  color: #065F46; }
.badge-soft-warning { background: var(--amber-bg);  color: #92400E; }
.badge-soft-danger  { background: var(--red-bg);    color: #991B1B; }
.badge-soft-info    { background: var(--blue-bg);   color: #1D4ED8; }
.badge-soft-primary { background: var(--accent-light); color: #4338CA; }
.badge-soft-purple  { background: var(--purple-bg); color: #6D28D9; }
.badge-soft-teal    { background: var(--teal-bg);   color: #0F766E; }
.badge-soft-neutral { background: #F3F4F6;           color: #4B5563; }

/* ── Form controls ───────────────────────────────────────── */
.form-control, .form-select {
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font-size: 13px; color: var(--txt-1);
    padding: .475rem .8rem; background: var(--surface);
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
}
.form-control:focus, .form-select:focus { border-color: var(--accent); }
.form-control::placeholder { color: var(--txt-4); }
.form-label { font-size: 13px; font-weight: 500; color: var(--txt-1); margin-bottom: .3rem; }
.form-text  { font-size: 12px; color: var(--txt-3); }
.form-control-sm, .form-select-sm { font-size: 12px; padding: .3rem .6rem; }
.input-group-text { background: #F9FAFB; border-color: var(--border); color: var(--txt-3); font-size: 13px; }

/* ── Progress ────────────────────────────────────────────── */
.progress { background: #E5E7EB; border-radius: 99px; height: 6px; overflow: hidden; }
.progress-bar { background: var(--accent); border-radius: 99px; transition: width .4s; }
.progress-bar.bg-success { background: var(--green)  !important; }
.progress-bar.bg-warning { background: var(--amber)  !important; }
.progress-bar.bg-danger  { background: var(--red)    !important; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb { font-size: 12.5px; color: var(--txt-3); padding: 0; background: transparent; margin-bottom: .875rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--txt-4); }
.breadcrumb-item a { color: var(--txt-3); }
.breadcrumb-item a:hover { color: var(--accent); text-decoration: none; }
.breadcrumb-item.active { color: var(--txt-1); font-weight: 500; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert { border-radius: var(--r-sm); font-size: 13px; padding: .75rem 1rem; border: 1px solid transparent; }
.alert-info    { background: var(--blue-bg);  color: #1E40AF; border-color: #BFDBFE; }
.alert-danger  { background: var(--red-bg);   color: #991B1B; border-color: #FECACA; }
.alert-success { background: var(--green-bg); color: #065F46; border-color: #A7F3D0; }
.alert-warning { background: var(--amber-bg); color: #92400E; border-color: #FDE68A; }

/* ── Definition lists ────────────────────────────────────── */
dt { font-size: 11px; font-weight: 600; color: var(--txt-3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .2rem; }
dd { font-size: 13.5px; color: var(--txt-1); margin-bottom: .875rem; font-weight: 500; }

/* ── List groups ─────────────────────────────────────────── */
.list-group-item { font-size: 13px; padding: .75rem 1.25rem; border-color: var(--border-sm); color: var(--txt-2); }

/* ── Spinners ────────────────────────────────────────────── */
.spinner-border     { color: var(--accent); width: 2rem;   height: 2rem;   border-width: 3px; }
.spinner-border-sm  { color: var(--accent); width: 1rem;   height: 1rem;   border-width: 2px; }

/* ── Text utilities ──────────────────────────────────────── */
.text-primary { color: var(--accent) !important; }
.text-muted   { color: var(--txt-3)  !important; }
.text-dark    { color: var(--txt-1)  !important; }
.text-danger  { color: var(--red)    !important; }
.text-success { color: var(--green)  !important; }
.text-warning { color: var(--amber)  !important; }

/* ── Validation ──────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--green); }
.invalid { outline: 1px solid var(--red); }
.validation-message { color: var(--red); font-size: 12px; margin-top: .25rem; }

/* ── Blazor error boundary ───────────────────────────────── */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: var(--r-sm);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ── Gradient text ───────────────────────────────────────── */
.gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #CBD5E1; }

/* ── Animations ──────────────────────────────────────────── */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.anim-fade-in  { animation: fadeIn  .3s ease both; }
.anim-slide-up { animation: slideUp .4s cubic-bezier(.16,1,.3,1) both; }

.stagger-1 { animation: slideUp .4s  .05s cubic-bezier(.16,1,.3,1) both; }
.stagger-2 { animation: slideUp .4s  .10s cubic-bezier(.16,1,.3,1) both; }
.stagger-3 { animation: slideUp .4s  .15s cubic-bezier(.16,1,.3,1) both; }
.stagger-4 { animation: slideUp .4s  .20s cubic-bezier(.16,1,.3,1) both; }
.stagger-5 { animation: slideUp .4s  .25s cubic-bezier(.16,1,.3,1) both; }
.stagger-6 { animation: slideUp .4s  .30s cubic-bezier(.16,1,.3,1) both; }

/* ── Page header utility ─────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.page-header-meta {
    font-size: 11px;
    font-weight: 700;
    color: var(--txt-3);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .25rem;
}
.page-header h1 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--txt-1);
    letter-spacing: -.03em;
    line-height: 1.15;
}
.page-header p {
    font-size: 12.5px;
    color: var(--txt-3);
    margin-top: .25rem;
    margin-bottom: 0;
}

/* ── KPI stat card ───────────────────────────────────────── */
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1);
}
.kpi-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.09); transform: translateY(-2px); }
.kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kpi-value { font-size: 1.6rem; font-weight: 800; color: var(--txt-1); letter-spacing: -.04em; line-height: 1.1; }
.kpi-label { font-size: 12px; color: var(--txt-3); font-weight: 500; margin-top: .15rem; }

/* ── Trend badge ─────────────────────────────────────────── */
.trend-up   { background: #ECFDF5; color: #065F46; }
.trend-down { background: #FEF2F2; color: #991B1B; }
.trend-up, .trend-down {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 99px;
}

/* ── Sparkline ───────────────────────────────────────────── */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 24px; }
.spark-bar { width: 3px; border-radius: 2px; background: currentColor; opacity: .2; }
.spark-bar.hi { opacity: .75; }

/* ── Avatar ──────────────────────────────────────────────── */
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
    text-transform: uppercase;
}
.avatar-sm { width: 26px; height: 26px; font-size: 9px; }
.avatar-square { border-radius: 8px; }

/* ── Mobile collapsible sections ────────────────────────── */
.mob-section-btn {
    display: none;
}
.mob-collapse {
    display: block;
}
@media (max-width: 640.98px) {
    .mob-section-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 9px 14px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        color: var(--txt-2);
        text-align: left;
    }
    .mob-section-btn .mob-chevron {
        transition: transform .2s;
        color: var(--txt-4);
        flex-shrink: 0;
    }
    .mob-section-btn.open .mob-chevron {
        transform: rotate(180deg);
    }
    .mob-collapse {
        display: none;
    }
    .mob-collapse.open {
        display: block;
    }
}

/* ── Stage badge colors ──────────────────────────────────── */
.stage-prospecting   { background: #F8FAFC;  color: #475569; border: 1px solid #E2E8F0; }
.stage-qualification { background: #FFFBEB;  color: #92400E; border: 1px solid #FDE68A; }
.stage-proposal      { background: #EFF6FF;  color: #1D4ED8; border: 1px solid #BFDBFE; }
.stage-negotiation   { background: #EEF2FF;  color: #4338CA; border: 1px solid #C7D2FE; }
.stage-closed-won    { background: #ECFDF5;  color: #065F46; border: 1px solid #A7F3D0; }
.stage-closed-lost   { background: #FEF2F2;  color: #991B1B; border: 1px solid #FECACA; }