/* ==== deals/_preview_v2_style.html (emerge app template styles) ==== */

  /* DEALS-V2 BLENDED: design CSS scoped to .dv2-shell so it cannot
     leak into or be overridden by the surrounding CRM chrome.
     Generated by _blend_deals_design.py — re-run to regenerate. */

  /* Reset any inherited body padding/margin around the shell so the
     design's hero/top bar can use the full content width. */
  .dv2-shell { margin: 0; padding: 0; min-height: 100vh; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Stripe-style Deals
     Generous whitespace · soft cards · big numbers ·
     hairline borders · editorial typography · subtle motion.
     Brand green replaces Stripe's signature indigo.
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700;800&display=swap');
.dv2-shell {
    /* Stripe palette, brand-greened */
    --bg: #f6f9fc;
    --pane: #ffffff;
    --rim: rgba(0, 0, 0, 0.06);
    --rim-2: rgba(0, 0, 0, 0.10);
    --hover: #f0f4f8;
    --ink: #0a2540;          /* Stripe's signature deep ink */
    --ink-2: #425466;
    --ink-3: #697386;
    --ink-4: #a3acba;
    --ink-5: #cbd5e0;
    --brand: #84cc16;
    --brand-deep: #4d7c0f;
    --brand-soft: #ecfccb;
    --brand-text: #3f6212;
    --red: #df1b41;
    --red-soft: #fde8ee;
    --amber: #c44e00;
    --amber-soft: #fbeed6;
    --blue: #0073e6;
    --blue-soft: #d6ecff;
    --shadow-card:
      0 0 0 0.5px rgba(50, 50, 93, 0.10),
      0 2px 5px -1px rgba(50, 50, 93, 0.08),
      0 1px 3px -1px rgba(0, 0, 0, 0.05);
    --shadow-card-hover:
      0 0 0 0.5px rgba(50, 50, 93, 0.10),
      0 13px 27px -5px rgba(50, 50, 93, 0.12),
      0 8px 16px -8px rgba(0, 0, 0, 0.10);
    --shadow-sm:
      0 0 0 0.5px rgba(50, 50, 93, 0.10),
      0 1px 2px rgba(50, 50, 93, 0.05);
  }
.dv2-shell * { box-sizing: border-box; }
.dv2-shell {
    margin: 0; padding: 0; background: var(--bg); color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "ss01" 1, "cv11" 1, "calt" 1;
    letter-spacing: -0.005em;
  }
.dv2-shell button, .dv2-shell input { font: inherit; color: inherit; }
.dv2-shell .num { font-variant-numeric: tabular-nums slashed-zero; }
/* ──────────── App shell ──────────── */
.dv2-shell .app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
/* ──────────── Sidebar ──────────── */
.dv2-shell .side {
    background: var(--pane);
    border-right: 1px solid var(--rim);
    display: flex; flex-direction: column;
    padding: 22px 14px 16px;
  }
.dv2-shell .side-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 0 6px 22px;
  }
.dv2-shell .side-brand-mark {
    width: 30px; height: 30px; border-radius: 7px;
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
  }
.dv2-shell .side-brand-mark svg { width: 22px; height: 22px; fill: var(--brand); }
.dv2-shell .side-brand-name {
    font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--ink);
  }
.dv2-shell .side-brand-name small {
    display: block; font-size: 11px; font-weight: 500;
    color: var(--ink-3); letter-spacing: 0;
    margin-top: 1px;
  }
.dv2-shell .side-sec {
    font-size: 11px; font-weight: 600;
    color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase;
    padding: 16px 8px 6px;
  }
.dv2-shell .side-link {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 7px;
    font-size: 14px; font-weight: 500;
    color: var(--ink-2); cursor: pointer; text-decoration: none;
    transition: background 100ms, color 100ms;
  }
.dv2-shell .side-link:hover { background: var(--hover); color: var(--ink); }
.dv2-shell .side-link.on {
    background: var(--brand-soft); color: var(--brand-text);
    font-weight: 600;
  }
.dv2-shell .side-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
.dv2-shell .side-link.on svg { opacity: 1; }
.dv2-shell .side-link-count {
    margin-inline-start: auto;
    font-size: 11.5px; font-weight: 500;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
  }
.dv2-shell .side-link.on .side-link-count { color: var(--brand-deep); }
.dv2-shell .side-spacer { flex: 1; }
.dv2-shell .side-user {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 8px 4px;
    border-top: 1px solid var(--rim);
    margin-top: 16px;
  }
.dv2-shell .side-user-ava {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #84cc16, #4d7c0f);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
  }
.dv2-shell .side-user-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.dv2-shell .side-user-role { font-size: 11.5px; color: var(--ink-3); }
/* ──────────── Main ──────────── */
.dv2-shell .main { min-width: 0; }
/* Top bar */
.dv2-shell .top {
    display: flex; align-items: center; gap: 12px;
    height: 60px; padding: 0 40px;
    background: var(--pane);
    border-bottom: 1px solid var(--rim);
  }
.dv2-shell .top-search {
    display: flex; align-items: center; gap: 9px;
    flex: 1; max-width: 460px;
    background: var(--bg); border: 1px solid var(--rim);
    border-radius: 8px; padding: 7px 12px;
    color: var(--ink-3); font-size: 13.5px;
    transition: border-color 120ms, background 120ms;
  }
.dv2-shell .top-search:hover { border-color: var(--rim-2); }
.dv2-shell .top-search:focus-within { background: var(--pane); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(132,204,22,.12); }
.dv2-shell .top-search svg { width: 14px; height: 14px; }
.dv2-shell .top-search input { flex: 1; border: 0; background: transparent; outline: none; color: var(--ink); }
.dv2-shell .top-search input::placeholder { color: var(--ink-4); }
.dv2-shell .top-search kbd { background: var(--pane); padding: 1px 6px; border-radius: 4px;
    font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-3);
    border: 1px solid var(--rim); }
.dv2-shell .top-spacer { flex: 1; }
.dv2-shell .top-btn {
    background: transparent; border: 0; padding: 7px;
    border-radius: 7px; color: var(--ink-3); cursor: pointer;
    transition: background 100ms, color 100ms;
    display: inline-flex; align-items: center; justify-content: center;
  }
.dv2-shell .top-btn:hover { background: var(--hover); color: var(--ink); }
.dv2-shell .top-btn svg { width: 16px; height: 16px; }
.dv2-shell .top-btn .dot {
    position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand); margin: -10px 0 0 -2px;
  }
/* Page hero */
.dv2-shell .hero {
    padding: 36px 40px 28px;
    display: flex; align-items: flex-end; gap: 32px;
  }
.dv2-shell .hero-text { flex: 1; min-width: 0; }
.dv2-shell .hero-eyebrow {
    font-size: 12px; font-weight: 600;
    color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 8px;
  }
.dv2-shell .hero-title {
    font-size: 38px; font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.05;
    margin: 0 0 8px;
    color: var(--ink);
  }
.dv2-shell .hero-title em {
    font-style: normal; color: var(--brand-deep); font-weight: 800;
  }
.dv2-shell .hero-lede {
    font-size: 16px; color: var(--ink-2);
    line-height: 1.45; max-width: 56ch;
    margin: 0;
  }
.dv2-shell .hero-lede b { color: var(--ink); font-weight: 600; }
.dv2-shell .hero-acts {
    display: flex; gap: 8px; flex-shrink: 0;
  }
.dv2-shell .btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 7px;
    font-size: 14px; font-weight: 600;
    border: 1px solid; cursor: pointer;
    text-decoration: none;
    transition: all 140ms cubic-bezier(.16,1,.3,1);
    letter-spacing: -0.005em; line-height: 1;
  }
.dv2-shell .btn svg { width: 14px; height: 14px; }
.dv2-shell .btn-primary {
    background: var(--ink); color: #fff; border-color: var(--ink);
    box-shadow: var(--shadow-sm);
  }
.dv2-shell .btn-primary:hover { background: #1a3a5c; border-color: #1a3a5c; transform: translateY(-1px); box-shadow: var(--shadow-card); }
.dv2-shell .btn-secondary {
    background: var(--pane); color: var(--ink); border-color: var(--rim-2);
    box-shadow: var(--shadow-sm);
  }
.dv2-shell .btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
/* KPI strip */
.dv2-shell .kpis {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    padding: 0 40px 28px;
  }
.dv2-shell .kpi {
    background: var(--pane);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: 8px;
    transition: transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms;
    cursor: default;
  }
.dv2-shell .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.dv2-shell .kpi-lbl {
    font-size: 12px; font-weight: 600;
    color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase;
  }
.dv2-shell .kpi-val {
    font-size: 28px; font-weight: 700;
    letter-spacing: -0.025em; line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums slashed-zero;
    display: flex; align-items: baseline; gap: 6px;
  }
.dv2-shell .kpi-val .cur {
    font-size: 14px; font-weight: 500;
    color: var(--ink-3); letter-spacing: 0;
  }
.dv2-shell .kpi-d {
    font-size: 12.5px; color: var(--ink-3);
    display: inline-flex; align-items: center; gap: 5px;
  }
.dv2-shell .kpi-d .delta {
    display: inline-flex; align-items: center; gap: 3px;
    font-weight: 600;
    padding: 1px 7px; border-radius: 999px;
    font-size: 11.5px;
  }
.dv2-shell .kpi-d.up .delta { color: var(--brand-deep); background: var(--brand-soft); }
.dv2-shell .kpi-d.down .delta { color: var(--red); background: var(--red-soft); }
.dv2-shell .kpi-d.flat .delta { color: var(--amber); background: var(--amber-soft); }
/* Filter/tools row */
.dv2-shell .tools {
    display: flex; align-items: center; gap: 10px;
    padding: 0 40px 18px;
  }
.dv2-shell .seg {
    display: inline-flex; background: var(--pane);
    border-radius: 8px; padding: 3px;
    box-shadow: var(--shadow-sm);
  }
.dv2-shell .seg-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 6px;
    font-size: 13px; font-weight: 500; color: var(--ink-3);
    cursor: pointer; border: 0; background: transparent;
    transition: background 100ms, color 100ms;
  }
.dv2-shell .seg-item svg { width: 14px; height: 14px; }
.dv2-shell .seg-item:hover { color: var(--ink); }
.dv2-shell .seg-item.on {
    background: var(--bg); color: var(--ink);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
  }
.dv2-shell .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--pane); border-radius: 8px;
    font-size: 13px; font-weight: 500; color: var(--ink-2);
    cursor: pointer; border: 0;
    box-shadow: var(--shadow-sm);
    transition: background 100ms;
  }
.dv2-shell .pill:hover { background: var(--hover); }
.dv2-shell .pill svg { width: 13px; height: 13px; opacity: 0.6; }
.dv2-shell .pill .k { color: var(--ink-3); margin-inline-end: 2px; }
.dv2-shell .pill .v { color: var(--ink); }
.dv2-shell .pill.on { background: var(--brand-soft); color: var(--brand-text); box-shadow: 0 0 0 0.5px rgba(132,204,22,.4); }
.dv2-shell .pill.on .k, .dv2-shell .pill.on .v { color: var(--brand-text); }
.dv2-shell .tools-spacer { flex: 1; }
.dv2-shell .tools-meta { font-size: 13px; color: var(--ink-3); }
.dv2-shell .tools-meta b { color: var(--ink); font-weight: 600; }
/* ──────────── Kanban ──────────── */
.dv2-shell .kanban {
    padding: 0 40px 80px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
  }
.dv2-shell .col {
    display: flex; flex-direction: column; gap: 12px;
    min-width: 0;
  }
.dv2-shell .col-head {
    display: flex; flex-direction: column; gap: 4px;
    padding: 0 4px 4px;
  }
.dv2-shell .col-head-top {
    display: flex; align-items: baseline; gap: 8px;
  }
.dv2-shell .col-name {
    font-size: 12px; font-weight: 700;
    color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
  }
.dv2-shell .col-count {
    font-size: 11.5px; font-weight: 600;
    color: var(--ink-4);
    margin-inline-start: auto;
  }
.dv2-shell .col-sum {
    font-size: 22px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums slashed-zero;
    display: flex; align-items: baseline; gap: 6px;
  }
.dv2-shell .col-sum .cur { font-size: 12px; color: var(--ink-3); font-weight: 500; letter-spacing: 0; }
.dv2-shell .col-prob {
    font-size: 11.5px; color: var(--ink-3);
  }
.dv2-shell .col-prob b { color: var(--ink-2); font-weight: 600; }
.dv2-shell .col-bar {
    height: 3px; border-radius: 999px; overflow: hidden;
    background: var(--rim);
    margin-top: 6px;
  }
.dv2-shell .col-bar > i { display: block; height: 100%; }
.dv2-shell .col[data-stage="discovery"]   .col-bar > i { background: var(--ink-4);  width: 25%; }
.dv2-shell .col[data-stage="qualified"]   .col-bar > i { background: var(--blue);   width: 45%; }
.dv2-shell .col[data-stage="proposal"]    .col-bar > i { background: var(--amber);  width: 65%; }
.dv2-shell .col[data-stage="negotiation"] .col-bar > i { background: var(--brand);  width: 85%; }
.dv2-shell .col[data-stage="won"]         .col-bar > i { background: var(--brand-deep); width: 100%; }
/* Cards */
.dv2-shell .card {
    background: var(--pane);
    border-radius: 10px;
    padding: 16px 18px 14px;
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column; gap: 10px;
    cursor: grab;
    transition: transform 200ms cubic-bezier(.16,1,.3,1), box-shadow 200ms;
    text-decoration: none; color: var(--ink);
    position: relative;
  }
.dv2-shell .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
  }
.dv2-shell .card-co {
    display: flex; align-items: center; gap: 9px;
  }
.dv2-shell .card-logo {
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; color: #fff;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }
.dv2-shell .card-logo.l1 { background: linear-gradient(135deg, #f59e0b, #c2410c); }
.dv2-shell .card-logo.l2 { background: linear-gradient(135deg, #6366f1, #3730a3); }
.dv2-shell .card-logo.l3 { background: linear-gradient(135deg, #ec4899, #9d174d); }
.dv2-shell .card-logo.l4 { background: linear-gradient(135deg, #10b981, #047857); }
.dv2-shell .card-logo.l5 { background: linear-gradient(135deg, #0ea5e9, #0c4a6e); }
.dv2-shell .card-logo.l6 { background: linear-gradient(135deg, #84cc16, #4d7c0f); }
.dv2-shell .card-logo.l7 { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.dv2-shell .card-logo.l8 { background: linear-gradient(135deg, #f97316, #9a3412); }
.dv2-shell .card-co-meta { flex: 1; min-width: 0; }
.dv2-shell .card-co-name {
    font-size: 14px; font-weight: 600;
    color: var(--ink); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    letter-spacing: -0.01em;
  }
.dv2-shell .card-co-sub {
    font-size: 12px; color: var(--ink-3); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-top: 1px;
  }
.dv2-shell .card-val {
    font-size: 22px; font-weight: 700;
    letter-spacing: -0.025em; line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums slashed-zero;
    display: flex; align-items: baseline; gap: 5px;
  }
.dv2-shell .card-val .cur { font-size: 11px; color: var(--ink-3); font-weight: 500; letter-spacing: 0; }
.dv2-shell .card-foot {
    display: flex; align-items: center; gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--rim);
    font-size: 12px; color: var(--ink-3);
  }
.dv2-shell .card-foot .badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px; border-radius: 999px;
    background: var(--bg);
    font-size: 11px; font-weight: 600; color: var(--ink-2);
    border: 1px solid var(--rim);
  }
.dv2-shell .card-foot .badge.hot { background: var(--red-soft); color: var(--red); border-color: transparent; }
.dv2-shell .card-foot .badge.warm { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.dv2-shell .card-foot .badge.cold { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.dv2-shell .card-foot .age {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
  }
.dv2-shell .card-foot .age.warn { color: var(--amber); font-weight: 600; }
.dv2-shell .card-foot .age.bad { color: var(--red); font-weight: 600; }
.dv2-shell .card-owner-ava {
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 700; color: #fff;
    flex-shrink: 0;
  }
.dv2-shell .card-owner-ava.ar { background: #b58105; }
.dv2-shell .card-owner-ava.yo { background: #5a67ca; }
.dv2-shell .card-owner-ava.no { background: #b04877; }
.dv2-shell .card-owner-ava.ha { background: #547755; }
/* Add deal button */
.dv2-shell .card-add {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px;
    background: transparent;
    border: 1.5px dashed var(--ink-5);
    border-radius: 10px;
    color: var(--ink-3); font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: all 140ms;
  }
.dv2-shell .card-add:hover {
    background: var(--pane);
    border-color: var(--brand);
    color: var(--brand-deep);
  }
.dv2-shell .card-add svg { width: 13px; height: 13px; }
/* Closed-won card: subtle green tint */
.dv2-shell .col[data-stage="won"] .card {
    background: linear-gradient(180deg, #f7fde6 0%, #ffffff 60%);
  }
.dv2-shell .col[data-stage="won"] .card-val { color: var(--brand-deep); }
  /* Hide the design's own mock sidebar — CRM provides the real one. */
  .dv2-shell .side { display: none !important; }
  /* The design's `.app` was a 232px+1fr grid for sidebar+main. Inside
     the shell we just want main to fill 100%. */
  .dv2-shell .app { display: block !important; min-height: 100vh; }

/* ==== _sales_inbox_nav.html (emerge app template styles) ==== */

  .sales-inbox-nav .ch-logo { vertical-align: -2px; margin-inline-end: 2px; }

/* ==== leads_inbox.html (emerge app template styles) ==== */

 .li-page { padding: 0 0 60px; }

 .li-topbar {
 display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
 padding: 14px 18px;
 background: #fff;
 border: 1px solid var(--border); border-radius: 12px;
 margin-bottom: 12px;
 box-shadow: 0 1px 2px rgba(15,23,42,.03);
 }
 .li-topbar h1 { margin: 0; font-size: 22px; font-weight: 700; }
 .li-topbar .li-count {
 font-size: 13px; color: var(--text-2);
 background: #f1f5f9; padding: 2px 12px; border-radius: 999px;
 }

 .li-classic-btn {
 background: #fff; border: 1px solid var(--border);
 border-radius: 6px; padding: 6px 14px;
 font-size: 12.5px; text-decoration: none; color: var(--text);
 }
 .li-classic-btn:hover { background: #f3f4f6; }

 .li-filters {
 display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
 }
 .li-chip {
 background: #fff; border: 1px solid var(--border);
 border-radius: 999px;
 padding: 4px 12px;
 font-size: 12px; color: var(--text-2);
 text-decoration: none;
 display: inline-flex; align-items: center; gap: 6px;
 }
 .li-chip:hover { background: #f3f4f6; }
 .li-chip.is-on { background: #0f172a; color: #fff; border-color: #0f172a; }
 .li-chip.is-on:hover { background: #1e293b; }
 .li-chip .li-chip-color {
 width: 10px; height: 10px; border-radius: 999px;
 background: var(--c);
 }
 .li-chip small { color: inherit; opacity: .7; margin-left: 4px; }

 .li-group {
 display: inline-flex; align-items: center; gap: 6px;
 margin-right: 12px;
 }
 .li-group-label {
 font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
 color: var(--text-2); font-weight: 600;
 margin-right: 4px;
 }

 /* Bulk action bar */
 .li-bulk {
 display: none;
 background: #0f172a; color: #fff;
 border-radius: 12px; padding: 12px 16px;
 margin-bottom: 12px;
 align-items: center; gap: 12px; flex-wrap: wrap;
 box-shadow: 0 4px 12px rgba(15,23,42,.18);
 }
 .li-bulk.is-on { display: flex; }
 .li-bulk-count {
 background: rgba(255,255,255,.15);
 padding: 4px 12px; border-radius: 999px;
 font-size: 13px; font-weight: 600;
 }
 .li-bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; }
 .li-bulk-actions form { margin: 0; display: inline-flex; gap: 4px; align-items: center; }
 .li-bulk-actions select {
 background: rgba(255,255,255,.1); color: #fff;
 border: 1px solid rgba(255,255,255,.2);
 border-radius: 6px; padding: 5px 8px; font-size: 12px;
 }
 .li-bulk-actions select option { color: #0f172a; background: #fff; }
 .li-bulk-actions button {
 background: rgba(255,255,255,.15); color: #fff;
 border: 1px solid rgba(255,255,255,.2);
 border-radius: 6px; padding: 5px 14px; font-size: 12px; cursor: pointer;
 font-weight: 600;
 }
 .li-bulk-actions button:hover { background: rgba(255,255,255,.25); }
 .li-bulk-clear {
 margin-left: auto;
 background: transparent; border: 0; color: #fff;
 cursor: pointer; font-size: 12px; opacity: .7;
 }

 /* List */
 .li-card {
 background: #fff;
 border: 1px solid var(--border); border-radius: 12px;
 box-shadow: 0 1px 2px rgba(15,23,42,.03);
 overflow: hidden;
 }
 .li-row {
 display: grid;
 grid-template-columns: 28px 1fr 140px 130px 90px 130px 140px;
 align-items: center; gap: 12px;
 padding: 12px 16px;
 border-bottom: 1px solid var(--border);
 font-size: 13px;
 cursor: pointer;
 transition: background 120ms ease;
 }
 .li-row:last-child { border-bottom: 0; }
 .li-row:hover { background: #f5f7ff; }
 /* Hint that the whole row is clickable */
 .li-row:hover .li-name a { text-decoration: underline; }
 .li-row.is-selected { background: #eef2ff; }
 .li-row.is-selected:hover { background: #e0e7ff; }

 .li-checkbox { accent-color: #6366f1; cursor: pointer; }

 .li-name { font-weight: 600; }
 .li-name a { color: inherit; text-decoration: none; }
 .li-name a:hover { color: #6366f1; }
 /* AI summary line — the digest of what the lead wants */
 .li-summary {
 color: #334155; font-size: 12.5px; line-height: 1.45;
 margin-top: 3px;
 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
 overflow: hidden;
 }
 .li-ai-badge {
 display: inline-flex; vertical-align: -2px; margin-inline-end: 5px;
 color: #7c3aed;
 }
 .li-ai-badge svg { width: 13px; height: 13px; }
 .li-meta {
 color: var(--text-2); font-size: 11.5px;
 margin-top: 5px;
 display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
 }
 .li-meta-bit { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
 .li-meta-bit svg { width: 11px; height: 11px; opacity: .65; }

 .li-pill {
 background: #eef2ff; color: #4338ca;
 padding: 2px 10px; border-radius: 999px;
 font-size: 11px; font-weight: 600;
 display: inline-block;
 }
 .li-label-chip {
 padding: 3px 12px; border-radius: 999px;
 font-size: 11.5px; font-weight: 600;
 color: #fff;
 display: inline-block;
 }
 .li-tier-pill {
 padding: 2px 10px; border-radius: 999px;
 font-size: 11px; font-weight: 600;
 display: inline-block;
 }
 .li-tier-pill.hot { background: #fee2e2; color: #991b1b; }
 .li-tier-pill.warm { background: #fef3c7; color: #92400e; }
 .li-tier-pill.cold { background: #dbeafe; color: #1e40af; }
 .li-tier-pill.neutral { background: #f1f5f9; color: #475569; }

 .li-score {
 font-variant-numeric: tabular-nums;
 font-weight: 700;
 color: var(--text);
 }

 .li-owner {
 display: flex; align-items: center; gap: 6px;
 font-size: 12px;
 }
 .li-owner-avatar {
 width: 22px; height: 22px; border-radius: 50%;
 background: #e0e7ff; color: #4338ca;
 display: flex; align-items: center; justify-content: center;
 font-weight: 700; font-size: 10px;
 }
 .li-owner.is-unassigned { color: var(--text-2); font-style: italic; }

 .li-actions { display: flex; gap: 4px; justify-content: flex-end; }
 .li-action-btn {
 background: #fff; border: 1px solid var(--border);
 border-radius: 6px; padding: 3px 10px;
 font-size: 11.5px; cursor: pointer;
 color: var(--text); text-decoration: none;
 }
 .li-action-btn:hover { background: #f3f4f6; }
 .li-action-btn.is-primary {
 background: #6366f1; color: #fff; border-color: #6366f1;
 }
 .li-action-btn.is-primary:hover { background: #4f46e5; }

 .li-empty {
 padding: 60px 20px; text-align: center;
 color: var(--text-2);
 }
 .li-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--text); }

 @media (max-width: 880px) {
 .li-row { grid-template-columns: 1fr; }
 }

 /* ── Configurable table view (overrides the old card grid) ── */
 .li-tablewrap { background:#fff; border:1px solid var(--border,#e5e7eb); border-radius:14px; overflow-x:auto; }
 .li-table { width:100%; border-collapse:collapse; font-size:13.5px; }
 .li-table thead th { text-align:start; font-size:11px; font-weight:700; text-transform:uppercase;
   letter-spacing:.04em; color:var(--text-2,#6b7280); padding:10px 12px; border-bottom:1px solid var(--border,#e5e7eb);
   background:#f8fafc; white-space:nowrap; }
 .li-table td { text-align:start; padding:10px 12px; border-bottom:1px solid var(--p-divider-soft,#eef2f6); vertical-align:middle; }
 .li-table tr.li-row { display:table-row; cursor:pointer; }
 .li-table tr.li-row:hover { background:#f5f7ff; }
 .li-table tr.li-row.is-selected { background:#eef2ff; }
 .li-th-check, .li-td-check { width:34px; text-align:center; }
 .li-th-actions, .li-td-actions { text-align:right; white-space:nowrap; }
 .li-name-link { font-weight:600; color:var(--text); text-decoration:none; }
 .li-table tr.li-row:hover .li-name-link { text-decoration:underline; }
 .li-td-summary { max-width:320px; }
 .li-summary-cell { color:var(--text-2); }
 .li-owner-name { font-size:12.5px; }
 .li-table .muted { color:var(--text-2,#6b7280); }

 /* ── Columns customizer popover ── */
 .li-cols-wrap { position:relative; display:inline-block; }
 .li-cols-pop { position:absolute; top:calc(100% + 6px); inset-inline-end:0; z-index:50; width:260px;
   max-width:calc(100vw - 24px); background:#fff;
   border:1px solid var(--border,#e5e7eb); border-radius:12px; box-shadow:0 10px 30px rgba(15,23,42,.16); padding:12px; }
 .li-cols-head { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
 .li-cols-list { list-style:none; margin:0 0 10px; padding:0; max-height:340px; overflow:auto; }
 .li-cols-list li { display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:7px; }
 .li-cols-list li:hover { background:#f8fafc; }
 .li-cols-list label { display:flex; align-items:center; gap:7px; margin:0; font-size:13px; cursor:pointer; flex:1; }
 .li-col-move { display:flex; gap:3px; }
 .li-col-move button { width:20px; height:20px; border:1px solid var(--border,#e5e7eb); background:#fff;
   border-radius:5px; cursor:pointer; font-size:11px; line-height:1; padding:0; color:#475569; }
 .li-col-move button:hover { background:#eef2ff; border-color:#c7d2fe; }
 .li-cols-save { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:6px; }

  /* ── Modal overlay ── */
  div.modal {
    position: fixed; inset: 0;
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
  }
  div.modal[hidden] { display: none !important; }
  div.modal .modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  }
  div.modal .modal-body {
    position: relative; z-index: 1;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 64px -12px rgba(15, 23, 42, 0.25) !important;
    width: 100%;
  }
  .nl-modal {
    max-width: 800px; padding: 0;
    overflow: hidden;
  }
  .nd-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px; border-bottom: 1px solid var(--border);
    background: rgba(250, 250, 252, 0.5) !important;
  }
  .nd-head h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--text); }
  .nd-x {
    background: transparent; border: 0; font-size: 24px;
    color: var(--text-2); cursor: pointer; line-height: 1;
    transition: color .15s;
  }
  .nd-x:hover { color: var(--primary); }
  .nd-label {
    display: block;
    font-size: 13px; color: var(--text-2);
    margin: 16px 0 6px;
    font-weight: 600;
  }
  .nd-input {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px;
    background: #fff;
    font: inherit; color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .nd-input:focus {
    outline: none;
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 3px rgba(156, 203, 71, 0.15) !important;
  }
 
/* ==== quote_detail.html (emerge app template styles) ==== */

.qt-split-prev iframe{width:100%;height:72vh;border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.qt-prev-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:#64748b;margin:0 0 6px;font-weight:600}
@media(min-width:1120px){
  .qt-split{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:20px;align-items:start}
  .qt-split-prev{position:sticky;top:calc(var(--qt-tb,60px) + 12px);height:calc(100vh - var(--qt-tb,60px) - 28px);display:flex;flex-direction:column}
  .qt-split-prev iframe{flex:1 1 auto;min-height:0;height:auto}
}


 .qt-recip { position:relative; }
 .qt-recip-box { position:relative; }
 .qt-recip-input { width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid #d1d5db; border-radius:8px; font:inherit; }
 .qt-recip-pop { position:absolute; left:0; right:0; top:100%; margin-top:4px; z-index:30; background:#fff; border:1px solid #e5e7eb; border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,.12); max-height:260px; overflow-y:auto; }
 .qt-recip-opt { display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border:0; border-bottom:1px solid #f1f5f9; background:transparent; text-align:start; cursor:pointer; font:inherit; }
 .qt-recip-opt:last-child { border-bottom:0; }
 .qt-recip-opt:hover, .qt-recip-opt.is-active { background:#f1f5f9; }
 .qt-recip-opt b { font-weight:600; }
 .qt-recip-opt small { color:#64748b; font-size:11px; }
 .qt-recip-tag, .qt-recip-otag { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:99px; flex-shrink:0; white-space:nowrap; }
 .qt-tag-client { background:#dcfce7; color:#15803d; }
 .qt-tag-lead   { background:#fef3c7; color:#b45309; }
 .qt-tag-new    { background:#e0e7ff; color:#4338ca; }
 .qt-recip-opt-create { color:#4338ca; font-weight:600; background:rgba(99,102,241,.04); }
 .qt-recip-pill { display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#f8fafc; }
 .qt-recip-pname { font-weight:600; flex:1; }
 .qt-recip-clear { background:transparent; border:0; cursor:pointer; color:#64748b; font-size:18px; line-height:1; }
 .qt-recip-new { margin-top:6px; display:flex; flex-direction:column; gap:6px; padding:8px; border:1px dashed #c7d2fe; border-radius:8px; background:#eef2ff; }
 /* the `hidden` attribute must beat the display:flex above — otherwise the pill
    and the new-recipient form would show ALL the time, not just when picked. */
 .qt-recip-pill[hidden], .qt-recip-new[hidden] { display:none; }
 .qt-recip-new-h { font-size:11.5px; color:#4338ca; font-weight:600; }
 .qt-recip-newin { width:100%; box-sizing:border-box; padding:7px 9px; border:1px solid #d1d5db; border-radius:7px; font:inherit; font-size:13px; }
 

   .qt-items-cards { display:flex; flex-direction:column; gap:10px; }
   .qline { border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:#fff; }
   .qline-top { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
   .qline-type { min-width:160px; }
   .qline-name { flex:1; min-width:160px; }
   .qline-desc { width:100%; margin-bottom:8px; }
   .qline-cols { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
   .qline-col { display:flex; flex-direction:column; gap:2px; }
   .qline-col label { font-size:11.5px; color:var(--text-2); }
   .qline-col input, .qline-col select { width:130px; }
   .qline-total { margin-top:8px; font-variant-numeric:tabular-nums; color:var(--text-2); }
   .qline-rm { color:#dc2626; margin-left:auto; }
 

 .qt-detail-head { display:flex; align-items:flex-end; justify-content:space-between;
 gap:16px; margin:4px 0 18px; flex-wrap:wrap; }
 .qt-detail-head h2 { margin:0 0 4px; display:inline-flex; align-items:center; gap:8px; }
 .qt-actions { display:flex; gap:8px; flex-wrap:wrap; }

 .qt-meta-grid {
 display:grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap:14px;
 margin-bottom:6px;
 }
 @media (max-width: 800px) { .qt-meta-grid { grid-template-columns: 1fr; } }
 .qt-meta-grid label { font-size:12px; color: var(--text-2); font-weight:600; display:block; margin-bottom:4px; }
 .qt-meta-grid select { width:100%; }

 .qt-locked {
 padding:8px 10px; border:1px solid var(--border); border-radius:6px;
 background: var(--surface-2); color: var(--text);
 }
 .qt-total-display {
 font-size:22px; font-weight:700; color: var(--text);
 padding:6px 0; line-height:1.1;
 }

 .qt-items td, .qt-items th { vertical-align: top; }
 .qt-items input { width:100%; }
 .qt-items input.right { text-align:right; font-variant-numeric:tabular-nums; }

 /* Reuse pill / button colours from the list page. */
 .qt-pill { display:inline-block; padding:3px 10px; border-radius:999px;
 font-size:11px; font-weight:600; letter-spacing:.01em; }
 .qt-pill-draft { background:#f1f5f9; color:#475569; }
 .qt-pill-sent { background:#ffedd5; color:#9a3412; }
 .qt-pill-approved { background:#dcfce7; color:#15803d; }
 .qt-pill-rejected { background:#fee2e2; color:#991b1b; }

 .qt-invoice-strip {
 margin-top:14px; padding:10px 14px;
 background:#eff6ff; border:1px dashed #bfdbfe; border-radius:8px;
 font-size:13px; color:#1e3a8a;
 display:flex; align-items:center; gap:10px; flex-wrap:wrap;
 }
 .qt-btn-preview { background:#fff; color:#1e40af; border:1px solid #bfdbfe; font-weight:600; padding:6px 12px; border-radius:6px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
 .qt-btn-preview:hover { background:#dbeafe; }
 .qt-btn-approve { background:#16a34a; color:#fff; border:1px solid #15803d; font-weight:600; }
 .qt-btn-approve:hover { background:#15803d; }
 .qt-btn-reject { background:#fff; color:#991b1b; border:1px solid #fecaca; font-weight:600; }
 .qt-btn-reject:hover { background:#fee2e2; }

/* ==== dashboard.html (emerge app template styles) ==== */

 :root {
 /* Warm neutrals (stone) */
 --w-bg: #fafaf9;
 --w-surface: #ffffff;
 --w-soft: #f5f5f4;
 --w-ink: #18181b;
 --w-ink-2: #44403c;
 --w-ink-3: #78716c;
 --w-ink-4: #a8a29e;
 --w-rim: #e7e5e4;
 --w-hairline: #f1f0ee;

 /* Lime / olive accents */
 --w-lime: #65a30d;
 --w-lime-d: #4d7c0f;
 --w-lime-soft: #ecfccb;
 --w-lime-50: #f7fee7;

 /* Signal colors (muted, friendly) */
 --w-red: #dc2626;
 --w-red-50: #fef2f2;
 --w-amber: #d97706;
 --w-amber-50: #fffbeb;
 --w-blue: #2563eb;
 --w-blue-50: #eff6ff;
 --w-violet-50: #f5f3ff;

 /* Shadows — soft, layered */
 --w-shadow-sm: 0 1px 2px rgba(24,24,27,.04);
 --w-shadow: 0 1px 3px rgba(24,24,27,.06), 0 4px 14px rgba(24,24,27,.04);
 --w-shadow-lg: 0 12px 32px rgba(24,24,27,.08), 0 4px 12px rgba(24,24,27,.05);

 --w-r: 14px;
 --w-r-sm: 10px;
 --w-r-pill: 999px;
 }

 body { background: var(--w-bg) !important; }
 .dx-page {
 padding: 24px 0 100px;
 max-width: 1280px;
 margin: 0 auto;
 color: var(--w-ink);
 }

 /* ═════════ 1. HEADER ═════════ */
 .dx-head {
 display: flex; align-items: center; justify-content: space-between;
 gap: 20px;
 margin-bottom: 24px;
 padding: 0 4px;
 }
 .dx-head h1 {
 margin: 0 0 4px;
 font-family: 'Geist', 'Cairo', sans-serif;
 font-size: 24px;
 font-weight: 600;
 letter-spacing: -0.02em;
 color: var(--w-ink);
 }
 .dx-head h1 em {
 font-style: normal;
 color: var(--w-lime-d);
 font-weight: 600;
 }
 .dx-head-meta {
 display: flex; align-items: center; gap: 9px;
 font-size: 13px;
 color: var(--w-ink-3);
 font-variant-numeric: tabular-nums;
 }
 .dx-head-meta .sep { color: var(--w-ink-4); }
 .dx-role-pill {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 2px 9px;
 background: var(--w-lime-50);
 color: var(--w-lime-d);
 border-radius: var(--w-r-pill);
 font-size: 12px;
 font-weight: 600;
 }
 .dx-role-dot {
 width: 5px; height: 5px;
 border-radius: 50%;
 background: var(--w-lime);
 }
 .dx-head-actions { display: flex; gap: 8px; }
 .dx-head-btn {
 display: inline-flex; align-items: center; gap: 7px;
 padding: 8px 14px;
 background: var(--w-surface);
 border: 1px solid var(--w-rim);
 color: var(--w-ink-2);
 font-size: 13px;
 font-weight: 500;
 border-radius: var(--w-r-sm);
 text-decoration: none; cursor: pointer;
 transition: all 120ms ease;
 box-shadow: var(--w-shadow-sm);
 }
 .dx-head-btn:hover {
 color: var(--w-ink);
 border-color: var(--w-ink-4);
 transform: translateY(-1px);
 }
 .dx-head-btn .icon { width: 14px; height: 14px; color: var(--w-ink-3); }
 .dx-head-btn kbd {
 background: var(--w-soft);
 border-radius: 4px;
 padding: 0 5px;
 font-size: 11px;
 color: var(--w-ink-3);
 font-family: 'Geist Mono', monospace;
 }
 .dx-head-btn.primary {
 background: var(--w-ink);
 color: #fff;
 border-color: var(--w-ink);
 }
 .dx-head-btn.primary .icon { color: var(--w-lime); }
 .dx-head-btn.primary:hover {
 background: #27272a;
 border-color: #27272a;
 }

 /* ═════════ 2. KPI ROW ═════════ */
 .dx-kpis {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
 margin-bottom: 20px;
 }
 .dx-kpi {
 display: block;
 background: var(--w-surface);
 border-radius: var(--w-r);
 padding: 22px 24px;
 text-decoration: none;
 color: var(--w-ink);
 box-shadow: var(--w-shadow);
 transition: all 220ms cubic-bezier(.2,.7,.3,1);
 position: relative;
 overflow: hidden;
 }
 .dx-kpi:hover {
 transform: translateY(-3px);
 box-shadow: var(--w-shadow-lg);
 }
 .dx-kpi-top {
 display: flex; align-items: center; gap: 9px;
 margin-bottom: 14px;
 }
 .dx-kpi-bubble {
 width: 28px; height: 28px;
 border-radius: 8px;
 display: inline-flex; align-items: center; justify-content: center;
 background: var(--w-lime-50);
 color: var(--w-lime-d);
 }
 .dx-kpi-bubble .icon { width: 14px; height: 14px; }
 .dx-kpi.blue .dx-kpi-bubble { background: var(--w-blue-50); color: var(--w-blue); }
 .dx-kpi.violet .dx-kpi-bubble { background: var(--w-violet-50); color: #7c3aed; }
 .dx-kpi.red .dx-kpi-bubble { background: var(--w-red-50); color: var(--w-red); }
 .dx-kpi.amber .dx-kpi-bubble { background: var(--w-amber-50); color: var(--w-amber); }
 .dx-kpi-label {
 font-size: 12.5px;
 color: var(--w-ink-3);
 font-weight: 500;
 }
 .dx-kpi-value {
 font-family: 'Geist', sans-serif;
 font-size: 26px;
 font-weight: 700;
 color: var(--w-ink);
 letter-spacing: -0.02em;
 line-height: 1.1;
 font-variant-numeric: tabular-nums;
 direction: ltr;
 text-align: start;
 }
 .dx-kpi-delta {
 margin-top: 8px;
 font-size: 12.5px;
 color: var(--w-ink-3);
 display: inline-flex; align-items: center; gap: 5px;
 }
 .dx-kpi-delta .pill {
 display: inline-flex; align-items: center; gap: 3px;
 padding: 1px 7px;
 border-radius: var(--w-r-pill);
 background: var(--w-soft);
 font-size: 11.5px;
 font-weight: 600;
 color: var(--w-ink-2);
 }
 .dx-kpi-delta.up .pill { background: var(--w-lime-soft); color: var(--w-lime-d); }
 .dx-kpi-delta.down .pill { background: var(--w-red-50); color: var(--w-red); }
 .dx-kpi-delta.warn .pill { background: var(--w-amber-50); color: var(--w-amber); }

 /* ═════════ 3. AI INSIGHT ═════════ */
 .dx-insight {
 display: flex; align-items: center; gap: 12px;
 padding: 14px 18px;
 background: linear-gradient(120deg, var(--w-lime-50) 0%, #fafaf9 100%);
 border-radius: var(--w-r);
 margin-bottom: 20px;
 box-shadow: var(--w-shadow-sm);
 }
 .dx-insight-bubble {
 flex-shrink: 0;
 width: 32px; height: 32px;
 border-radius: var(--w-r-pill);
 background: var(--w-surface);
 color: var(--w-lime-d);
 display: inline-flex; align-items: center; justify-content: center;
 box-shadow: var(--w-shadow-sm);
 }
 .dx-insight-bubble .icon { width: 16px; height: 16px; }
 .dx-insight-text {
 flex: 1;
 font-size: 13.5px;
 color: var(--w-ink);
 line-height: 1.4;
 }
 .dx-insight-text b {
 color: var(--w-lime-d);
 font-weight: 600;
 margin-inline-end: 4px;
 }
 .dx-insight-cta {
 display: inline-flex; align-items: center; gap: 4px;
 padding: 6px 12px;
 background: var(--w-lime);
 color: #fff;
 font-size: 12.5px;
 font-weight: 600;
 border-radius: var(--w-r-sm);
 text-decoration: none;
 transition: background 120ms ease;
 flex-shrink: 0;
 }
 .dx-insight-cta:hover { background: var(--w-lime-d); color: #fff; }
 .dx-insight-cta .icon { width: 12px; height: 12px; }
 [dir="rtl"] .dx-insight-cta .icon { transform: scaleX(-1); }

 /* ═════════ MAIN GRID ═════════ */
 .dx-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
 gap: 16px;
 margin-bottom: 18px;
 }
 .dx-stack { display: flex; flex-direction: column; gap: 16px; }

 @media (max-width: 980px) {
 .dx-kpis { grid-template-columns: repeat(2, 1fr); }
 .dx-grid { grid-template-columns: 1fr; }
 .dx-head { flex-direction: column; align-items: flex-start; gap: 14px; }
 }
 @media (max-width: 560px) {
 .dx-kpis { grid-template-columns: 1fr; }
 }

 /* ═════════ CARD (Notion-style) ═════════ */
 .dx-card {
 background: var(--w-surface);
 border-radius: var(--w-r);
 box-shadow: var(--w-shadow);
 overflow: hidden;
 }
 .dx-card-head {
 display: flex; align-items: center; justify-content: space-between;
 padding: 16px 20px 14px;
 }
 .dx-card-head h3 {
 margin: 0;
 font-family: 'Geist', sans-serif;
 font-size: 14.5px;
 font-weight: 600;
 color: var(--w-ink);
 letter-spacing: -0.01em;
 display: inline-flex; align-items: center; gap: 8px;
 }
 .dx-card-head .head-emoji {
 font-size: 16px;
 line-height: 1;
 }
 .dx-card-head .head-count {
 color: var(--w-ink-3);
 font-weight: 500;
 margin-inline-start: 4px;
 }
 .dx-card-more {
 display: inline-flex; align-items: center; gap: 3px;
 font-size: 12.5px; font-weight: 500;
 color: var(--w-ink-3);
 text-decoration: none;
 padding: 3px 8px;
 border-radius: 6px;
 transition: all 120ms ease;
 }
 .dx-card-more:hover {
 background: var(--w-soft);
 color: var(--w-ink-2);
 }
 .dx-card-more .icon { width: 11px; height: 11px; }
 [dir="rtl"] .dx-card-more .icon { transform: scaleX(-1); }

 /* ═════════ FEED ROWS ═════════ */
 .dx-list { display: flex; flex-direction: column; padding: 4px 0 8px; }
 .dx-item {
 display: flex; align-items: center; gap: 12px;
 padding: 11px 20px;
 text-decoration: none;
 color: var(--w-ink);
 transition: background 120ms ease;
 border-radius: 0;
 }
 .dx-item:hover { background: var(--w-soft); }
 .dx-item-dot {
 width: 8px; height: 8px;
 border-radius: 50%;
 background: var(--w-ink-4);
 flex-shrink: 0;
 }
 .dx-item.sev-critical .dx-item-dot { background: var(--w-red); }
 .dx-item.sev-warning .dx-item-dot { background: var(--w-amber); }
 .dx-item.sev-info .dx-item-dot { background: var(--w-blue); }
 .dx-item-body { flex: 1; min-width: 0; }
 .dx-item-title {
 font-size: 13.5px;
 font-weight: 500;
 color: var(--w-ink);
 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .dx-item-meta {
 font-size: 11.5px;
 color: var(--w-ink-3);
 margin-top: 2px;
 }
 .dx-item-arrow {
 color: var(--w-ink-4);
 font-size: 15px;
 flex-shrink: 0;
 transition: all 120ms ease;
 }
 [dir="rtl"] .dx-item-arrow { transform: scaleX(-1); }
 .dx-item:hover .dx-item-arrow { color: var(--w-lime-d); }

 /* ═════════ AGENDA ═════════ */
 .dx-agenda-row {
 display: flex; gap: 12px;
 padding: 11px 20px;
 text-decoration: none;
 color: var(--w-ink);
 transition: background 120ms ease;
 }
 .dx-agenda-row:hover { background: var(--w-soft); }
 .dx-agenda-time {
 flex-shrink: 0;
 width: 46px;
 font-family: 'Geist Mono', 'Geist', monospace;
 font-size: 12.5px;
 font-weight: 700;
 color: var(--w-lime-d);
 font-variant-numeric: tabular-nums;
 direction: ltr;
 letter-spacing: -0.02em;
 }
 .dx-agenda-time:empty::before { content: "—"; color: var(--w-ink-4); font-weight: 400; }
 .dx-agenda-body { flex: 1; min-width: 0; }
 .dx-agenda-title {
 font-size: 13px;
 font-weight: 500;
 color: var(--w-ink);
 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .dx-agenda-type {
 font-size: 11px;
 color: var(--w-ink-3);
 margin-top: 1px;
 }

 /* ═════════ EMPTY STATES ═════════ */
 .dx-empty {
 padding: 30px 24px;
 text-align: center;
 color: var(--w-ink-3);
 font-size: 13px;
 }
 .dx-empty-emoji {
 font-size: 28px;
 margin-bottom: 8px;
 opacity: .7;
 }
 .dx-empty-cta {
 display: inline-block;
 margin-top: 10px;
 padding: 6px 13px;
 background: var(--w-lime);
 color: #fff;
 font-weight: 600;
 font-size: 12.5px;
 border-radius: var(--w-r-sm);
 text-decoration: none;
 }
 .dx-empty-cta:hover { background: var(--w-lime-d); }

 /* ═════════ PIPELINE ═════════ */
 .dx-pipe-list { padding: 4px 0 14px; }
 .dx-pipe-row {
 display: grid;
 grid-template-columns: 130px 1fr 70px 130px;
 align-items: center;
 gap: 16px;
 padding: 10px 22px;
 text-decoration: none;
 color: var(--w-ink);
 transition: background 120ms ease;
 }
 .dx-pipe-row:hover { background: var(--w-soft); }
 .dx-pipe-label {
 font-size: 13px;
 font-weight: 500;
 color: var(--w-ink);
 }
 .dx-pipe-track {
 height: 8px;
 background: var(--w-soft);
 border-radius: var(--w-r-pill);
 overflow: hidden;
 }
 .dx-pipe-fill {
 height: 100%;
 background: linear-gradient(90deg, var(--w-lime) 0%, #84cc16 100%);
 border-radius: var(--w-r-pill);
 transition: width 700ms cubic-bezier(.2,.7,.3,1);
 }
 .dx-pipe-count {
 font-size: 12.5px;
 font-weight: 600;
 color: var(--w-ink-2);
 text-align: end;
 font-variant-numeric: tabular-nums;
 }
 .dx-pipe-count sub {
 font-weight: 400; color: var(--w-ink-4);
 font-size: 10.5px; vertical-align: baseline;
 }
 .dx-pipe-value {
 font-family: 'Geist', sans-serif;
 font-size: 13px;
 font-weight: 700;
 color: var(--w-ink);
 text-align: end;
 font-variant-numeric: tabular-nums;
 direction: ltr;
 }
 @media (max-width: 720px) {
 .dx-pipe-row { grid-template-columns: 1fr; gap: 4px; }
 }

 /* ═════════ DEAL ROWS ═════════ */
 .dx-deal {
 display: flex; align-items: center; gap: 12px;
 padding: 11px 20px;
 text-decoration: none;
 color: var(--w-ink);
 transition: background 120ms ease;
 }
 .dx-deal:hover { background: var(--w-soft); }
 .dx-deal-body { flex: 1; min-width: 0; }
 .dx-deal-title {
 font-size: 13px;
 font-weight: 500;
 color: var(--w-ink);
 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .dx-deal-meta {
 font-size: 11.5px;
 color: var(--w-ink-3);
 margin-top: 2px;
 }
 .dx-deal-value {
 font-family: 'Geist', sans-serif;
 font-size: 13px;
 font-weight: 700;
 color: var(--w-ink);
 flex-shrink: 0;
 font-variant-numeric: tabular-nums;
 direction: ltr;
 }
 .dx-deal.risk .dx-deal-value { color: var(--w-red); }

 /* ═════════ QUICK LINKS STRIP ═════════ */
 .dx-quick {
 margin-top: 24px;
 padding: 16px 20px;
 background: var(--w-surface);
 border-radius: var(--w-r);
 box-shadow: var(--w-shadow);
 display: flex; flex-wrap: wrap;
 gap: 8px 10px;
 align-items: center;
 }
 .dx-quick-label {
 font-size: 11.5px;
 font-weight: 600;
 color: var(--w-ink-3);
 text-transform: uppercase;
 letter-spacing: .06em;
 margin-inline-end: 4px;
 }
 .dx-quick a {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 6px 11px;
 background: var(--w-soft);
 color: var(--w-ink-2);
 font-size: 12.5px;
 font-weight: 500;
 border-radius: var(--w-r-sm);
 text-decoration: none;
 transition: all 120ms ease;
 }
 .dx-quick a:hover {
 background: var(--w-lime-soft);
 color: var(--w-lime-d);
 }
 .dx-quick a .icon { width: 12px; height: 12px; }

 /* ═════════ FADE-UP ═════════ */
 @keyframes dxFade {
 from { opacity: 0; transform: translateY(6px); }
 to { opacity: 1; transform: translateY(0); }
 }
 .dx-page > * { animation: dxFade 360ms cubic-bezier(.2,.7,.3,1) both; }
 .dx-page > *:nth-child(2) { animation-delay: 60ms; }
 .dx-page > *:nth-child(3) { animation-delay: 120ms; }
 .dx-page > *:nth-child(4) { animation-delay: 180ms; }
 .dx-page > *:nth-child(5) { animation-delay: 240ms; }
 .dx-page > *:nth-child(6) { animation-delay: 300ms; }
 @media (prefers-reduced-motion: reduce) {
 .dx-page > * { animation: none; }
 .dx-pipe-fill { transition: none; }
 }