/* ============================================================
   ELEMENT CRM — Design System
   MISFITS × ELEMENT Final Direction (Jun 2026)
   Light identity: #ebebeb ground · white surfaces · dark red #5b0909
   mustard #f7bd01 pop · blue #002172 support · black/greys
   Type: Archivo (display + UI, heavy 800/900 for headings/numbers like element-realestate.com) · Manrope (body) · Playfair (comma motif only)
   ============================================================ */
:root {
  --red: #5b0909;
  --red-deep: #3f0505;
  --red-soft: #7a1f1f;
  --red-tint: #f3e7e7;
  --mustard: #f7bd01;
  --mustard-tint: #fdf3d2;
  --blue: #002172;
  --blue-tint: #e4e9f6;
  --ink: #171212;
  --grey-1: #373737;
  --grey-2: #6d6d6b;
  --grey-3: #979894;
  --grey-4: #d8d8d5;
  --grey-5: #e4e4e1;
  --ground: #ebebeb;
  --surface: #ffffff;
  --col-head: #dcdcd9;   /* kanban chevron header */
  --col-body: #ebebe9;   /* kanban column well behind the white cards */
  --green: #1f7a33;
  --green-tint: #e2f1e5;
  --amber: #b07d00;
  --danger: #b3261e;
  --danger-tint: #f9e5e4;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(23,18,18,.06), 0 4px 14px rgba(23,18,18,.06);
  --shadow-lg: 0 8px 30px rgba(23,18,18,.16);
  --font-ui: 'Archivo', -apple-system, sans-serif;
  --font-body: 'Manrope', -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-display: 'Archivo', -apple-system, sans-serif;  /* heavy black headings, matches element-realestate.com */
  --rail-w: 64px;
  --topbar-h: 58px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
h1, h2, h3, h4, .font-ui { font-family: var(--font-ui); }
.serif { font-family: var(--font-serif); }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--font-ui); cursor: pointer; }
input, select, textarea { font-family: var(--font-body); font-size: 13.5px; color: var(--ink); }
.hidden { display: none !important; }
::selection { background: var(--mustard); color: var(--ink); }

/* ---------- Shell layout ---------- */
#shell { display: flex; height: 100vh; }
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#view { flex: 1; overflow: auto; position: relative; }

/* ---------- Rail ---------- */
#rail {
  width: var(--rail-w);
  background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 10px 0; gap: 2px; flex-shrink: 0; z-index: 40;
}
.rail-logo { display: flex; justify-content: center; padding: 6px 0 14px; }
.rail-logo img { width: 54px; height: auto; }
.rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px; color: rgba(255,255,255,.78); text-decoration: none;
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  transition: background .12s, color .12s;
}
.rail-item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.rail-item.active { background: rgba(0,0,0,.28); color: #fff; border-left-color: var(--mustard); }
.rail-item svg { width: 21px; height: 21px; fill: currentColor; }
.rail-spacer { flex: 1; }

/* ---------- Topbar ---------- */
#topbar {
  height: var(--topbar-h); background: var(--surface);
  border-bottom: 1px solid var(--grey-4);
  display: flex; align-items: center; gap: 18px; padding: 0 18px; z-index: 30;
}

.search-wrap { position: relative; flex: 0 1 620px; margin-right: auto; }   /* a comfortable field, not a full-width bar */
.search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--grey-3); }
#global-search {
  width: 100%; height: 36px; border: 1px solid var(--grey-4); border-radius: 18px;
  background: var(--ground); padding: 0 16px 0 36px; outline: none;
  transition: border-color .12s, background .12s;
}
#global-search:focus { border-color: var(--red); background: #fff; }
#search-results {
  position: absolute; top: 42px; left: 0; right: 0; background: #fff;
  border: 1px solid var(--grey-4); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  max-height: 380px; overflow: auto; z-index: 60;
}
.search-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; }
.search-row:hover { background: var(--red-tint); }
.search-row .sr-type {
  font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: var(--grey-2);
  border-radius: 3px; padding: 2px 6px; min-width: 52px; text-align: center;
}
.search-row .sr-type.deal { background: var(--red); }
.search-row .sr-type.person { background: var(--blue); }
.search-row .sr-type.org { background: var(--grey-1); }
.search-row .sr-type.lead { background: var(--amber); }
.search-row .sr-sub { color: var(--grey-3); font-size: 12px; margin-left: auto; }
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.user-chip {
  width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; cursor: pointer;
  border: 2px solid var(--mustard);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  transition: background .12s, box-shadow .12s, border-color .12s;
  white-space: nowrap;
}
.btn svg { flex-shrink: 0; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--grey-4); }
.btn-secondary:hover { border-color: var(--grey-2); }
.btn-ghost { background: transparent; color: var(--grey-1); }
.btn-ghost:hover { background: var(--grey-5); }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { background: #16602a; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #911e17; }
.btn-mustard { background: var(--mustard); color: var(--ink); }
.btn-mustard:hover { background: #e0ab00; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- View header (toolbar) ---------- */
.view-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  background: var(--surface); border-bottom: 1px solid var(--grey-4);
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.view-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.view-title .count { color: var(--grey-3); font-weight: 500; font-size: 15px; margin-left: 6px; }
.head-spacer { flex: 1; }
.seg {
  display: inline-flex; border: 1px solid var(--grey-4); border-radius: var(--radius-sm); overflow: hidden;
}
.seg button {
  height: 32px; padding: 0 12px; background: #fff; border: none; color: var(--grey-2);
  font-weight: 600; font-size: 12.5px; display: flex; align-items: center; gap: 6px;
}
.seg button + button { border-left: 1px solid var(--grey-4); }
.seg button.active { background: var(--red); color: #fff; }
.seg button svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- Select / inputs ---------- */
.select, select.select {
  height: 34px; border: 1px solid var(--grey-4); border-radius: var(--radius-sm);
  background: #fff; padding: 0 10px; outline: none; font-family: var(--font-ui); font-weight: 600; font-size: 12.5px;
  color: var(--ink); cursor: pointer;
}
.select:focus { border-color: var(--red); }
.input, input.input, textarea.input {
  height: 36px; border: 1px solid var(--grey-4); border-radius: var(--radius-sm);
  background: #fff; padding: 0 12px; outline: none; width: 100%;
}
textarea.input { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
.input:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.field { margin-bottom: 14px; }
.field label {
  display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 5px;
}
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

/* ---------- Kanban pipeline (Pipedrive-style: white page, soft grey columns, white cards) ---------- */
.kanban-wrap { display: flex; flex-direction: column; height: 100%; background: var(--surface); }
.kanban { flex: 1; display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; padding: 14px 16px 6px; align-items: stretch; }
/* one continuous shape per stage: chevron head on top of the column body (Pipedrive) */
/* fixed width (no stretching on wide screens); each column overlaps the previous by 10px so the tip nests in the notch */
/* straight column edges; the notch is cut INTO the left edge and the tip sticks OUT of the right edge, so head and body line up */
.kb-col { flex: 0 0 232px; width: 232px; display: flex; flex-direction: column; background: #f4f4f4; min-height: 0; transition: background .15s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 30px, calc(100% - 12px) 60px, calc(100% - 12px) 100%, 0 100%, 0 60px, 12px 30px); }
.kb-col + .kb-col { margin-left: -7px; }
.kb-col:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 30px, calc(100% - 12px) 60px, calc(100% - 12px) 100%, 0 100%); border-radius: 12px 0 0 12px; }
.kb-col-head { height: 60px; padding: 12px 22px 0 22px; flex-shrink: 0; }
.kb-col:first-child .kb-col-head { padding-left: 16px; }
.kb-col-name { font-family: var(--font-ui); font-weight: 800; font-size: 16px; letter-spacing: -.015em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-col-meta { font-size: 12.5px; color: var(--grey-2); margin-top: 3px; font-weight: 500; }
.kb-col.drag-over { background: var(--mustard-tint); }
/* the body sits inside the clipped edges (15px each side) so its scrollbar stays visible */
.kb-col-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 2px 10px 12px 10px; margin: 0 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.kb-add { width: 100%; height: 36px; border: 1px dashed var(--grey-4); border-radius: 8px; background: transparent; color: var(--grey-3); display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s, border-color .12s, opacity .12s; flex-shrink: 0; opacity: 0; }
.kb-col:hover .kb-add, .kb-col.drag-over .kb-add { opacity: 1; }
.kb-add:hover { background: #fff; color: var(--red); border-color: var(--red); }
.kb-add svg { width: 18px; height: 18px; }

.deal-card { background: var(--surface); border: 1px solid transparent; border-radius: 8px; padding: 13px 14px 12px; min-height: 132px; display: flex; flex-direction: column; cursor: grab; box-shadow: 0 1px 3px rgba(23,18,18,.14); transition: box-shadow .14s, transform .14s; position: relative; }   /* room to grow: more fields can go between the name and the value row */
.kb-col-body > .deal-card, .deal-card { flex: 0 0 auto; }   /* the column body is a flex column: never let a card shrink below its content (value row was spilling out of the box) */
.deal-card:hover { box-shadow: 0 6px 18px rgba(23,18,18,.16); transform: translateY(-1px); }
.deal-card.dragging { opacity: .45; transform: rotate(1.5deg); }
.deal-card.rotten { border-left: 3px solid var(--danger); }
.dc-main { padding-right: 0; display: flex; flex-direction: column; flex: 1; }
.dc-title, .dc-sub { padding-right: 36px; }
.dc-title { font-family: var(--font-ui); font-weight: 700; font-size: 14px; line-height: 1.28; margin-bottom: 3px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-sub { font-size: 12.5px; color: var(--grey-2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-sub a { color: var(--grey-2); }
.dc-sub a:hover { color: var(--blue); }
.dc-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; flex-shrink: 0; }
.dc-team { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--grey-2); font-weight: 600; padding-right: 30px; }
.dc-team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-phone { margin-top: 3px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 36px; }
.dc-phone a { color: var(--blue); font-weight: 600; }
.dc-nophone { color: var(--grey-3); font-style: italic; }
.dc-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
.dc-date { font-size: 11px; color: var(--grey-3); font-weight: 600; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dc-value { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--grey-1); white-space: nowrap; }
.dc-foot .spacer { flex: 1; }

/* ---- pipeline toolbar (two rows) ---- */
.pl-head { padding: 12px 20px 10px; border-bottom: 0; gap: 10px; }
.vt { display: inline-flex; border: 1px solid var(--grey-4); border-radius: 8px; overflow: hidden; background: #fff; }
.vt button { width: 38px; height: 34px; background: #fff; border: none; color: var(--grey-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vt button + button { border-left: 1px solid var(--grey-4); }
.vt button svg { width: 17px; height: 17px; fill: currentColor; }
.vt button:hover { background: var(--grey-5); color: var(--ink); }
.vt button.active { background: var(--red-tint); color: var(--red); }
.pl-head .btn-primary { height: 36px; padding: 0 14px 0 12px; gap: 6px; border-radius: 8px; font-size: 13.5px; }
/* Two or three pipelines show as one switch: both branches visible, one click to change, the active half filled. */
.pl-pipeseg { display: inline-flex; align-items: center; gap: 3px; height: 38px; padding: 3px; border-radius: 13px;
  background: linear-gradient(180deg, #efedec, #e7e4e3); border: 1px solid rgba(23,18,18,.07); box-shadow: inset 0 1px 3px rgba(23,18,18,.08); }
.pl-pipeseg button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 13.5px; letter-spacing: -.01em; color: var(--grey-2); white-space: nowrap; transition: color .14s ease, background .16s ease, box-shadow .16s ease, transform .12s ease; }
.pl-pipeseg button:hover { color: var(--ink); background: rgba(255,255,255,.65); }
.pl-pipeseg button.on { color: #fff; background: linear-gradient(180deg, #7a1f1f, #5b0909); box-shadow: 0 1px 2px rgba(63,5,5,.35), 0 6px 16px rgba(91,9,9,.28); transform: translateY(-.5px); }
.pl-pipeseg button.on:hover { background: linear-gradient(180deg, #8a2626, #5b0909); }
.pl-pipeseg button svg { width: 14px; height: 14px; fill: currentColor; opacity: .95; }
.pl-pipeseg button.on svg { fill: var(--mustard); }
@media (max-width: 760px) { .pl-pipeseg button { padding: 0 10px; font-size: 12.5px; } }

/* the pipeline switch is the most important control on the page, so it reads as burgundy, not as another grey box */
.pl-pipesel { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px 0 8px; border: 1px solid rgba(91,9,9,.16); border-radius: 12px; position: relative;
  background: linear-gradient(180deg, #fff, #fbf7f7); box-shadow: 0 1px 2px rgba(23,18,18,.05), 0 6px 16px rgba(91,9,9,.07); transition: box-shadow .16s ease, border-color .16s ease, transform .12s ease; }
.pl-pipesel:hover { border-color: rgba(91,9,9,.3); box-shadow: 0 2px 4px rgba(23,18,18,.06), 0 10px 22px rgba(91,9,9,.12); }
.pl-pipesel:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(91,9,9,.12); }
.pl-pipesel > svg:first-child { width: 15px; height: 15px; fill: var(--red); flex-shrink: 0; pointer-events: none; box-sizing: content-box; padding: 6px; border-radius: 9px; background: var(--red-tint); }
.pl-pipesel > svg:last-child { width: 15px; height: 15px; fill: none; stroke: var(--red); stroke-width: 2.4; flex-shrink: 0; pointer-events: none; opacity: .75; }
.pl-pipesel select { appearance: none; -webkit-appearance: none; border: none; background: transparent; font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; font-size: 14px; color: var(--ink); outline: none; cursor: pointer; padding-right: 2px; max-width: 280px; }
.pl-ibtn { width: 36px; height: 36px; border: 1px solid var(--grey-4); border-radius: 8px; background: #fff; color: var(--grey-2); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; }
.pl-ibtn:hover { color: var(--ink); border-color: var(--grey-3); }
.pl-ibtn svg { width: 16px; height: 16px; }
.pl-filter { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--grey-4); border-radius: 8px; background: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.pl-filter svg { width: 16px; height: 16px; }
.pl-filter.on { border-color: var(--red); color: var(--red); background: var(--red-tint); }
.pl-fbadge { background: var(--red); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 11px; }
.pl-cond { display: flex; align-items: center; gap: 8px; padding: 0 20px 10px; flex-wrap: wrap; background: var(--surface); border-bottom: 1px solid var(--grey-4); }
.pl-link { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; color: var(--blue); font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.pl-link:hover { background: var(--blue-tint); }
.pl-link svg { width: 14px; height: 14px; }
.pl-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--blue-tint); color: var(--blue); border-radius: 14px; padding: 3px 6px 3px 10px; font-family: var(--font-ui); font-weight: 700; font-size: 12px; }
.pl-chip button { border: none; background: none; color: inherit; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pl-chip button:hover { background: rgba(0,33,114,.12); }
.pl-chip button svg { width: 11px; height: 11px; }
.pl-count { font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; color: var(--grey-1); margin-right: 2px; }
.pl-dir { width: 28px; height: 28px; border: none; border-radius: 6px; background: var(--blue-tint); color: var(--blue); font-size: 15px; cursor: pointer; }
.pl-dir:hover { background: #d6dcef; }
.pl-show { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--grey-2); font-weight: 600; }
.pl-mini { height: 28px; border: 1px solid transparent; border-radius: 6px; background: transparent; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--blue); cursor: pointer; padding: 0 4px; }
.pl-mini:hover { border-color: var(--grey-4); background: #fff; }
/* filter dialog rows */
.fl-row { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.fl-row .input { height: 36px; }
.fl-x svg { width: 14px; height: 14px; }
/* pipelines overview */
.pipes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; padding: 18px 20px 40px; }
.pipe-card { background: var(--surface); border: 1px solid var(--grey-4); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 2px rgba(23,18,18,.05); }
.pipe-card .pc-top { display: flex; align-items: center; gap: 10px; }
.pipe-card .pc-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; flex: 1; }
.pipe-card .pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pipe-card .pc-stats div { background: #f6f6f4; border-radius: 8px; padding: 8px 10px; }
.pipe-card .pc-stats b { display: block; font-family: var(--font-ui); font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-card .pc-stats span { font-size: 11px; color: var(--grey-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pipe-card .pc-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--grey-5); }
.pipe-card .pc-bar .pg-seg { display: block; height: 100%; }
.pipe-card .pc-empty { font-size: 11px; color: var(--grey-3); line-height: 10px; padding-left: 4px; }
.pipe-card .pc-stages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px; }
.pipe-card .pc-stage { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--grey-1); }
.pipe-card .pc-stage b { margin-left: auto; font-family: var(--font-ui); }
.pipe-card .pc-sname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-card .pc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pipe-card .pc-open { align-self: flex-start; margin-top: 4px; }
.pipe-new { align-items: center; justify-content: center; border-style: dashed; color: var(--grey-2); font-family: var(--font-ui); font-weight: 700; min-height: 180px; text-decoration: none; }
.pipe-new span { font-size: 30px; line-height: 1; color: var(--red); }
.pipe-new:hover { border-color: var(--red); color: var(--red); }

/* Right-hand status badge — swaps to stage-move arrows on hover */
.dc-badge {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  display: flex; align-items: center; gap: 5px;
}
.dc-flag {
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.dc-flag.overdue { background: var(--danger); }
.dc-flag.today { background: var(--green); }         /* any scheduled activity is green; only overdue is red (Ramy, 2026-09-10) */
.dc-flag.planned { background: var(--green); }      /* green clock = scheduled, today or later */
.dc-flag.none { background: transparent; color: var(--mustard); font-size: 17px; }

/* ---- hierarchical owner filter ---- */
.owner-host { display: inline-flex; }
.owner-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 1px solid var(--grey-4);
  border-radius: 7px; background: #fff; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; max-width: 230px; }
.owner-btn:hover { border-color: var(--grey-3); }
.owner-btn .ob-ico { width: 16px; height: 16px; opacity: .65; flex-shrink: 0; }
.owner-btn .ob-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.owner-btn .ob-caret { width: 15px; height: 15px; margin-left: auto; opacity: .55; flex-shrink: 0; }
.owner-pop { background: #fff; border: 1px solid var(--grey-4); border-radius: 12px; box-shadow: 0 12px 34px rgba(23,18,18,.18);
  padding: 6px; z-index: 9999; max-height: 62vh; overflow: auto; font-size: 13px;
  /* a name like "Mohamed Morsy Hassan Abdelhamid" must not push the panel off the screen */
  max-width: min(420px, calc(100vw - 24px)); }
.owner-pop .op-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-pop .op-name { min-width: 0; }
.owner-pop .op-row { display: flex; align-items: center; gap: 3px; }
.owner-pop .op-caret { width: 22px; height: 26px; border: none; background: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--grey-2); flex-shrink: 0; border-radius: 5px; }
.owner-pop .op-caret:hover { background: var(--grey-5); }
.owner-pop .op-caret svg { width: 12px; height: 12px; fill: currentColor; transition: transform .12s; }
.owner-pop .op-caret.open svg { transform: rotate(90deg); }
.owner-pop .op-caret-sp { width: 22px; flex-shrink: 0; }
.owner-pop .op-name { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 4px; border-radius: 6px; cursor: pointer; flex: 1; min-width: 0; }
.owner-pop .op-name:hover { background: var(--mustard-tint); }
.owner-pop .op-name.sel { background: var(--red-tint); color: var(--red); font-weight: 700; }
.owner-pop .op-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.owner-pop .op-role { margin-left: auto; font-size: 10px; color: var(--grey-3); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; padding-left: 12px; }
.owner-pop .op-name.sel .op-role { color: var(--red); opacity: .7; }
.owner-pop .op-div { height: 1px; background: var(--grey-5); margin: 4px 2px; }
.owner-pop .op-every-ic { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--grey-2); font-size: 15px; flex-shrink: 0; }
.dc-flag svg { width: 11px; height: 11px; fill: currentColor; }
.dc-flag svg.back { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.avatar {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 700; font-size: 9.5px;
}
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.status-dot.overdue { background: var(--danger); }
.status-dot.today { background: var(--green); }
.status-dot.planned { background: var(--green); }
.status-dot.none { background: var(--mustard); }

/* drag action bar (Pipedrive bottom bar) */
.drop-bar {
  display: none; height: 74px; border-top: 1px solid var(--grey-4);
  background: var(--surface); align-items: stretch; gap: 0;
}
.drop-bar.visible { display: flex; }
.drop-zone {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 800; font-size: 13px; letter-spacing: .1em;
  border-right: 1px solid var(--grey-4); transition: filter .1s, opacity .1s; opacity: .92;
}
.drop-zone:last-child { border-right: none; }
.drop-zone.dz-delete { background: var(--grey-5); color: var(--grey-1); }
.drop-zone.dz-lost { background: var(--danger-tint); color: var(--danger); }
.drop-zone.dz-won { background: var(--green-tint); color: var(--green); }
.drop-zone.dz-move { background: var(--blue-tint); color: var(--blue); }
.drop-zone.drag-over { filter: brightness(.92); opacity: 1; outline: 2px dashed currentColor; outline-offset: -6px; }

/* pipeline footer weighted bar */
.pipe-summary {
  padding: 8px 20px; background: var(--surface); border-top: 1px solid var(--grey-4);
  display: flex; gap: 26px; font-size: 12.5px; color: var(--grey-2); font-weight: 600;
}
.pipe-summary b { color: var(--ink); font-family: var(--font-ui); }

/* ---------- Tables (list views) ---------- */
.table-wrap { padding: 0; overflow: auto; }
table.grid { width: 100%; border-collapse: collapse; background: var(--surface); }
table.grid th {
  text-align: left; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--grey-2);
  background: var(--surface); border-bottom: 2px solid var(--grey-4);
  padding: 10px 14px; position: sticky; top: 0; z-index: 5; white-space: nowrap;
}
table.grid td { padding: 10px 14px; border-bottom: 1px solid var(--grey-5); vertical-align: middle; }
table.grid tr:hover td { background: #f6f1ea33; background: var(--mustard-tint); }
table.grid tr { cursor: pointer; }
table.grid .cell-main { font-family: var(--font-ui); font-weight: 600; color: var(--red); }
table.grid .muted { color: var(--grey-2); }

/* ---------- Bulk action bar ---------- */
.bulk-bar {
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--ink); color: #fff;
  position: sticky; top: 0; z-index: 19;
}
.bulk-bar.show { display: flex; }
.bulk-bar .bb-count { font-family: var(--font-ui); font-size: 13px; }
.bulk-bar .bb-count b { font-size: 15px; }
.bulk-bar .bb-label {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.bulk-bar .bb-sep { width: 1px; height: 22px; background: rgba(255,255,255,.2); }
.bulk-bar .select { height: 30px; background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); }
.bulk-bar .select option { color: var(--ink); }
.bulk-bar .btn-ghost { color: rgba(255,255,255,.75); }
.bulk-bar .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.bulk-bar .head-spacer { flex: 1; }
table.grid tr.row-picked td { background: var(--mustard-tint); }
table.grid input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--red); cursor: pointer; }

/* ---------- Chips / labels ---------- */
.chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 10px;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.chip.hot { background: var(--red); color: #fff; }
.chip.warm { background: var(--mustard); color: var(--ink); }
.chip.cold { background: var(--blue-tint); color: var(--blue); }
.chip.won { background: var(--green-tint); color: var(--green); }
.chip.lost { background: var(--danger-tint); color: var(--danger); }
.chip.open { background: var(--grey-5); color: var(--grey-1); }
.chip.grey { background: var(--grey-5); color: var(--grey-1); }
.chip.blue { background: var(--blue-tint); color: var(--blue); }
.chip.red { background: var(--red-tint); color: var(--red); }

/* ---------- Cards / panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--grey-4); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(23,18,18,.04); }
.panel-head {
  padding: 12px 16px; border-bottom: 1px solid var(--grey-5);
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.panel-head .spacer { flex: 1; }
.panel-body { padding: 14px 16px; }

/* ---------- Detail pages (deal / person / org) ---------- */
.detail-layout { display: grid; grid-template-columns: 320px 1fr 300px; gap: 16px; padding: 16px 20px; align-items: start; }
@media (max-width: 1200px) { .detail-layout { grid-template-columns: 300px 1fr; } .detail-right { grid-column: 1 / -1; } }
.detail-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kv { display: flex; padding: 6px 0; font-size: 13px; gap: 10px; }
.kv .k { width: 36%; color: var(--grey-2); flex-shrink: 0; }
.kv .v { font-weight: 600; min-width: 0; overflow-wrap: break-word; }
.kv .v.editable:hover { background: var(--mustard-tint); cursor: pointer; border-radius: 3px; }

/* stage progress bar (deal detail) */
.stage-bar { display: flex; gap: 3px; margin: 4px 0 0; }
.stage-bar .sb-seg {
  flex: 1; height: 26px; background: var(--grey-5); cursor: pointer; position: relative;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 700; color: var(--grey-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 12px;
}
.stage-bar .sb-seg:first-child { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
.stage-bar .sb-seg.done { background: var(--red); color: #fff; }
.stage-bar .sb-seg.current { background: var(--mustard); color: var(--ink); }
.stage-bar .sb-seg:hover { filter: brightness(.95); }

/* timeline */
.tl { position: relative; padding-left: 26px; }
.tl::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--grey-4); }
.tl-item { position: relative; padding: 8px 0 14px; }
.tl-item::before {
  content: ''; position: absolute; left: -24px; top: 13px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--surface); border: 2.5px solid var(--red);
}
.tl-item.done::before { background: var(--red); }
.tl-item.note-item::before { border-color: var(--mustard); }
.tl-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.tl-head .tl-type { font-family: var(--font-ui); font-weight: 700; }
.tl-head .tl-when { color: var(--grey-3); margin-left: auto; font-size: 11.5px; white-space: nowrap; }
.tl-body { font-size: 13px; color: var(--grey-1); margin-top: 3px; line-height: 1.45; }
.tl-item .tl-actions { margin-top: 6px; display: flex; gap: 8px; }

/* focus tabs (notes/activity composer) */
.focus-tabs { display: flex; border-bottom: 1px solid var(--grey-5); }
.focus-tabs button {
  padding: 10px 16px; background: none; border: none; border-bottom: 2.5px solid transparent;
  font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--grey-2);
}
.focus-tabs button.active { color: var(--red); border-bottom-color: var(--red); }
.focus-body { padding: 14px 16px; }

/* ---------- Combobox (type to search or create) ---------- */
.combo { position: relative; }
.combo .combo-input { width: 100%; padding-right: 28px; }
.combo-clear {
  position: absolute; right: 7px; top: 18px; transform: translateY(-50%);
  background: none; border: none; color: var(--grey-3); font-size: 17px; line-height: 1; padding: 2px 4px;
}
.combo-clear:hover { color: var(--ink); }
.combo-list {
  position: absolute; top: calc(100% + 3px); left: 0; right: 0; background: #fff;
  border: 1px solid var(--grey-4); border-radius: 6px; box-shadow: var(--shadow-lg);
  max-height: 232px; overflow-y: auto; z-index: 140;
}
.combo-item {
  padding: 8px 12px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.combo-item:hover, .combo-item.hl { background: var(--red-tint); }
.combo-item .sub { margin-left: auto; color: var(--grey-3); font-size: 11.5px; white-space: nowrap; }
.combo-item.create { color: var(--red); font-family: var(--font-ui); font-weight: 700; }
.combo-item.none { color: var(--grey-3); cursor: default; }
.combo-item.none:hover { background: none; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(23,18,18,.44); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px;
  animation: fadeIn .14s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff; border-radius: 10px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; max-height: calc(100vh - 120px); overflow: auto;
  animation: slideUp .16s ease;
}
@keyframes slideUp { from { transform: translateY(14px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--grey-5);
  display: flex; align-items: center;
  font-family: var(--font-ui); font-weight: 700; font-size: 16px;
  border-top: 4px solid var(--red); border-radius: 10px 10px 0 0;
}
.modal-head .close-x { margin-left: auto; background: none; border: none; font-size: 20px; color: var(--grey-3); line-height: 1; }
.modal-head .close-x:hover { color: var(--ink); }
.modal-body { padding: 18px 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--grey-5); display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Tooltip ---------- */
#tip-root {
  position: fixed; z-index: 300; background: var(--ink); color: #fff;
  font-family: var(--font-ui); font-size: 12px; font-weight: 500; line-height: 1.5;
  padding: 8px 11px; border-radius: 6px; box-shadow: var(--shadow-lg);
  max-width: 290px; white-space: pre-line; pointer-events: none;
  opacity: 0; transition: opacity .09s; display: none;
}
#tip-root.show { display: block; opacity: 1; }
#tip-root .tip-head { font-weight: 800; }
#tip-root .tip-body { margin-top: 3px; color: rgba(255,255,255,.82); font-weight: 500; }
#tip-root.kind-bad .tip-head { color: #ff8a80; }
#tip-root.kind-warn .tip-head { color: var(--mustard); }
#tip-root.kind-good .tip-head { color: #9be3a8; }

/* ---------- Toast ---------- */
#toast-root { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-weight: 600; font-size: 13px; box-shadow: var(--shadow-lg);
  border-left: 4px solid var(--mustard); animation: slideUp .18s ease;
  display: flex; align-items: center; gap: 10px;
}
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--danger); }

/* ---------- Dropdown menu ---------- */
.menu {
  position: absolute; background: #fff; border: 1px solid var(--grey-4); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); z-index: 90; min-width: 190px; padding: 5px 0; overflow: hidden;
}
.menu-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 15px; font-size: 13px;
  font-family: var(--font-ui); font-weight: 500; cursor: pointer; white-space: nowrap;
}
.menu-item:hover { background: var(--red-tint); }
.menu-item.danger { color: var(--danger); }
.menu-sep { height: 1px; background: var(--grey-5); margin: 5px 0; }

/* ---------- Insights ---------- */
.insights-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: 18px 20px; }
.stat-tile { grid-column: span 3; padding: 18px; }
.stat-tile .st-label { font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--grey-2); }
.stat-tile .st-value { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--red); margin-top: 6px; line-height: 1.1; }
.stat-tile .st-sub { font-size: 12px; color: var(--grey-2); margin-top: 4px; font-weight: 600; }
.chart-card { grid-column: span 6; }
.chart-card.wide { grid-column: span 12; }
@media (max-width: 1100px) { .stat-tile { grid-column: span 6; } .chart-card { grid-column: span 12; } }

/* ---------- Calendar (activities) ---------- */
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); border-left: 1px solid var(--grey-4); }
.cal-day { border-right: 1px solid var(--grey-4); min-height: 420px; background: var(--surface); }
.cal-day.today { background: var(--mustard-tint); }
.cal-day-head {
  padding: 8px 10px; border-bottom: 2px solid var(--grey-4); font-family: var(--font-ui);
  font-weight: 700; font-size: 12px; text-align: center; position: sticky; top: 0; background: inherit;
}
.cal-day-head .dnum { font-size: 17px; display: block; }
.cal-day-head.today-head { color: var(--red); }
.cal-slot { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.act-pill {
  border-left: 3px solid var(--red); background: var(--red-tint); padding: 6px 8px;
  border-radius: 4px; font-size: 11.5px; cursor: pointer;
}
.act-pill.done { opacity: .55; text-decoration: line-through; border-left-color: var(--green); background: var(--green-tint); }
.act-pill.overdue { border-left-color: var(--danger); background: var(--danger-tint); }
.act-pill b { font-family: var(--font-ui); display: block; font-size: 11.5px; }
.act-pill .ap-time { color: var(--grey-2); font-size: 10.5px; }

/* activity type icons row */
.type-tabs { display: flex; gap: 6px; }
.type-tabs button {
  height: 30px; padding: 0 12px; border: 1px solid var(--grey-4); background: #fff;
  border-radius: 15px; font-family: var(--font-ui); font-weight: 600; font-size: 12px; color: var(--grey-2);
}
.type-tabs button.active { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 70px 20px; color: var(--grey-2); }
.empty-state .es-mark { font-family: var(--font-serif); font-size: 64px; color: var(--red); line-height: 1; opacity: .18; }
.empty-state h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; font-size: 22px; color: var(--ink); margin: 12px 0 6px; }
.empty-state p { font-size: 13.5px; max-width: 380px; margin: 0 auto 18px; }

/* ---------- Won/Lost banners ---------- */
.deal-status-banner {
  padding: 10px 20px; font-family: var(--font-ui); font-weight: 700; display: flex; align-items: center; gap: 12px;
}
.deal-status-banner.won { background: var(--green-tint); color: var(--green); }
.deal-status-banner.lost { background: var(--danger-tint); color: var(--danger); }

/* checkbox */
.done-check {
  width: 19px; height: 19px; border: 2px solid var(--grey-3); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: transparent; flex-shrink: 0; background: #fff; transition: all .12s;
}
.done-check:hover { border-color: var(--green); color: var(--green); }
.done-check.checked { background: var(--green); border-color: var(--green); color: #fff; }
.done-check svg { width: 11px; height: 11px; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--grey-4); border-radius: 5px; border: 2px solid var(--ground); }
::-webkit-scrollbar-thumb:hover { background: var(--grey-3); }
::-webkit-scrollbar-track { background: transparent; }

/* utility */
.flex { display: flex; align-items: center; gap: 8px; }
.muted { color: var(--grey-2); }
.small { font-size: 11.5px; }
.money { font-family: var(--font-ui); font-weight: 700; }
.mt8 { margin-top: 8px; } .mt14 { margin-top: 14px; }
.link-strong { font-family: var(--font-ui); font-weight: 600; }

/* ---- Deal info modal (paperwork for Reserved / Contracted) ---- */
.di-req { color: var(--danger); font-weight: 800; }
.di-docs { border-top: 1px solid var(--grey-5); margin-top: 4px; padding-top: 12px; }
.di-docs-h { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 8px; }
.di-doc { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--grey-5); }
.di-doc:first-of-type { border-top: 0; }
.di-doc-l { font-family: var(--font-ui); font-weight: 700; font-size: 13px; padding-top: 5px; }
.di-doc-v { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.di-doc-cur { font-size: 12.5px; font-weight: 600; color: var(--blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-doc-cur::before { content: "✓ "; color: var(--green); }
.di-file { font-size: 12.5px; color: var(--grey-1); }
.di-toggle { align-self: flex-start; background: none; border: none; padding: 0; font-size: 11.5px; color: var(--grey-2); text-decoration: underline; cursor: pointer; }
.di-toggle:hover { color: var(--red); }
.di-warn { background: var(--mustard-tint); color: var(--ink); border-left: 3px solid var(--mustard); border-radius: 6px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; margin: 6px 0 8px; }

/* ---- Sales assistant ---- */
.ai-btn { width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; color: #fff; font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--red) 0%, #9a2a2a 55%, var(--mustard) 130%); box-shadow: 0 2px 8px rgba(91,9,9,.25); transition: transform .12s, box-shadow .12s; }
.ai-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(91,9,9,.35); }
.ai-btn span { transform: translateY(-1px); }
.assistant { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--grey-4); box-shadow: -8px 0 30px rgba(23,18,18,.12); z-index: 60; display: flex; flex-direction: column; animation: as-in .18s ease; }
@keyframes as-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.as-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--grey-5); }
.as-spark { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--red), var(--mustard) 140%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.as-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.as-sub { font-size: 11.5px; color: var(--grey-2); }
.as-close { margin-left: auto; background: none; border: none; font-size: 22px; color: var(--grey-3); cursor: pointer; line-height: 1; }
.as-close:hover { color: var(--ink); }
.as-body { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 18px; }
.as-sec-h { font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 8px; }
.as-focus { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid var(--grey-5); border-radius: 10px; margin-bottom: 6px; font-size: 13px; color: var(--ink); text-decoration: none; line-height: 1.4; background: #fff; }
.as-focus:hover { border-color: var(--grey-3); background: var(--grey-5); }
.as-k { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-family: var(--font-ui); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.as-empty { font-size: 13px; color: var(--grey-2); padding: 6px 2px; }
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.as-chip { border: 1px solid var(--grey-4); background: #fff; border-radius: 14px; padding: 5px 11px; font-size: 12px; font-family: var(--font-ui); font-weight: 600; color: var(--grey-1); cursor: pointer; }
.as-chip:hover { border-color: var(--red); color: var(--red); background: var(--red-tint); }
.as-chat { display: flex; flex-direction: column; gap: 8px; }
.as-msg { max-width: 92%; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.as-msg.me { align-self: flex-end; background: var(--red); color: #fff; border-bottom-right-radius: 4px; }
.as-msg.bot { align-self: flex-start; background: #f4f4f2; color: var(--ink); border-bottom-left-radius: 4px; }
.as-msg.as-typing { color: var(--grey-2); font-style: italic; }
.as-msg p { margin: 0 0 4px; }
.as-msg ul { margin: 2px 0 6px 16px; padding: 0; }
.as-msg li { margin: 2px 0; }
.as-gap { height: 4px; }
.as-link { color: var(--blue); font-weight: 700; }
.as-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--grey-5); }
.as-input .input { flex: 1; }
@media (max-width: 900px) { .assistant { width: 100vw; } }

/* ---- developer directory form ---- */
.dev-c-row { display: grid; grid-template-columns: 1.4fr 1fr 34px; gap: 8px; margin-bottom: 6px; align-items: center; }
.dev-c-row .input { height: 34px; }
/* call context line on pipeline cards */
.dc-call { margin-top: 5px; font-size: 11.5px; font-weight: 600; color: var(--grey-2); padding-right: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-call.bad { color: var(--danger); }
.dc-call.cb { color: var(--blue); }
.dc-call.ok { color: var(--green); }
.sm-existing { background: var(--grey-5); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; line-height: 1.45; }

/* ---------- Tier 1 engine badges on cards (SLA timer, assignment state) ---------- */
.dc-eng { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.dc-sla, .dc-asg { display: inline-block; font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 1px 7px; border-radius: 9px; background: var(--grey-5); color: var(--grey-2); }
.dc-sla { background: #e3e9f7; color: #1e3a8a; } .dc-sla.soon { background: #fbe8c8; color: #8a5a00; } .dc-sla.over { background: #f3d6d6; color: #7a1f1f; }
.dc-asg { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid #dfe3ea; color: #5f6b7a; padding: 1px 7px 1px 5px; letter-spacing: .02em; text-transform: none; font-size: 10.5px; font-weight: 600; border-radius: 999px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-asg svg { width: 11px; height: 11px; }
.dc-asg.pool { border-color: rgba(91,9,9,.28); color: #5b0909; background: rgba(91,9,9,.04); } .dc-asg.rot { border-color: #e2c98a; color: #8a6200; background: #fff8e6; } .dc-asg.mgr { border-color: #c9d6ea; color: #2a4f86; } .dc-asg.dup { border-color: #e6c6c6; color: #a33; }

/* ---------- Settings: grouped left navigation, page header, one card style for every panel ---------- */
.st-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100vh - 88px); background: #f3f2f0; }
.st-nav { position: sticky; top: 0; align-self: start; height: calc(100vh - 88px); overflow-y: auto; padding: 22px 12px 24px 18px; border-right: 1px solid #e6e3df; background: #faf9f7; }
.st-nav-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 8px 14px; }
.st-nav-group { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-3); margin: 16px 8px 6px; }
.st-nav-item { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--grey-1, #373737); text-decoration: none; margin-bottom: 2px; transition: background .12s, color .12s; }
.st-nav-item:hover { background: #efece7; color: var(--ink); }
.st-nav-item.active { background: var(--ink, #5b0909); color: #fff; }
.st-main { padding: 26px 32px 48px; min-width: 0; }
.st-page-head { margin: 0 0 18px; max-width: 980px; }
.st-page-head h1 { font-family: var(--font-display); font-size: 26px; margin: 0 0 4px; color: var(--ink); }
.st-page-head p { margin: 0; color: var(--grey-2); font-size: 13.5px; line-height: 1.5; }
/* every panel, old or new, becomes the same card */
.st-content > .panel, .st-content .st-card, .st-content .st-panel, .st-content .eng .card, .st-content .inb .card, .st-content .cm-root .card { background: #fff; border: 1px solid #e6e3df; border-radius: 12px; box-shadow: 0 1px 2px rgba(23,18,18,.04); margin: 0 0 16px; max-width: 980px; }
.st-content > .panel { padding: 0; }
.st-content .panel-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #efece7; font-weight: 700; font-size: 14px; }
.st-content .panel-head .spacer { flex: 1; }
.st-content .panel-body { padding: 14px 18px 16px; }
.st-content .st-panel { padding: 16px 18px; }
.st-content .st-h, .st-content .eng .card h3, .st-content .inb .card h3 { font-family: var(--font-ui); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--grey-2); margin: 0 0 10px; }
.st-content .st-h { margin-top: 4px; }
.st-card-title { display: inline-flex; align-items: center; gap: 8px; }
.st-tag { font-family: var(--font-ui); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 8px; background: #efece7; color: var(--grey-2); font-weight: 700; }
.st-card-actions { max-width: 980px; margin: 4px 0 20px; }
.st-danger { color: #7a1f1f; }
.st-danger:hover { background: #f8e9e9; }
/* stage editor */
.settings-view .st-content .st-stage-grid { display: grid; grid-template-columns: 62px 26px minmax(200px, 320px) 130px 150px 36px; gap: 10px; align-items: center; }
.settings-view .st-content .st-cols.st-stage-grid { padding: 0 0 8px; border-bottom: 1px solid #efece7; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--grey-3); }
.settings-view .st-content .st-row.st-stage-grid { padding: 6px 0; border-bottom: 1px solid #f3f1ee; }
.settings-view .st-content .st-row.st-stage-grid:last-child { border-bottom: none; }
.settings-view .st-content .st-stage-grid .input { width: 100%; height: 34px; }
.settings-view .st-content .st-stage-grid .st-move { display: flex; gap: 2px; width: auto; }
.settings-view .st-content .st-stage-grid .st-ord { width: 26px; }
.st-ico { width: 26px; height: 26px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--grey-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.st-ico:hover { background: #efece7; color: var(--ink); }
.st-ico:disabled { opacity: .3; cursor: default; background: transparent; }
.st-content .st-ord { width: 26px; height: 26px; border-radius: 50%; background: #f3f1ee; color: var(--grey-2); font-family: var(--font-ui); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.st-content .pipe-actions { display: flex; align-items: center; gap: 10px; padding-top: 14px; }
/* tables inside settings share one look */
.st-content table th { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--grey-3); }
.st-content .eng, .st-content .inb, .st-content .cm-root { max-width: 980px; }
.st-content .eng .row, .st-content .inb .row { margin-bottom: 10px; }
.st-content .eng .card, .st-content .inb .card { padding: 16px 18px; }
.st-content .hint { font-size: 12.5px; color: var(--grey-2); line-height: 1.55; }
@media (max-width: 900px) { .st-shell { grid-template-columns: 1fr; } .st-nav { position: static; height: auto; border-right: none; border-bottom: 1px solid #e6e3df; display: flex; flex-wrap: wrap; gap: 2px; padding: 12px; } .st-nav-title, .st-nav-group { width: 100%; } }

/* ============================================================
   UPLIFT (2026-09-08) — modern look and feel layer.
   Same identity (burgundy rail, mustard pop, Archivo/Manrope), more depth:
   cool tinted ground, glass topbar, layered shadows, gradient CTAs,
   stage-coloured kanban heads (same blue ramp as the Insights funnel),
   softer radii and micro-motion. Overrides the base rules above.
   ============================================================ */
:root {
  --ground: #f2f4f8;
  --grey-4: #dfe3ea;
  --grey-5: #e9edf3;
  --ink: #151a23;
  --grey-1: #2f3644;
  --grey-2: #626b7a;
  --grey-3: #8e97a6;
  --blue: #0b5fb0;
  --blue-tint: #e6f0fb;
  --col-body: #eef2f7;
  --radius: 12px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.06);
  --shadow-lg: 0 12px 36px rgba(16,24,40,.16);
}
body { background: radial-gradient(1100px 520px at 6% -8%, rgba(91,9,9,.07), transparent 60%), radial-gradient(900px 480px at 100% 0%, rgba(11,123,214,.08), transparent 55%), var(--ground); }
#view { background: transparent; }
#view > * { animation: viewIn .26s ease both; }
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd3de; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #aeb8c6; background-clip: content-box; border: 3px solid transparent; }

/* rail: deeper gradient, pill-shaped items, mustard glow on the active one */
#rail { background: linear-gradient(180deg, #5b0909 0%, #3d0606 55%, #23080c 100%); box-shadow: 4px 0 28px rgba(23,18,18,.22); padding: 12px 6px; gap: 4px; }
.rail-item { border: 0; border-radius: 12px; padding: 9px 0 7px; color: rgba(255,255,255,.72); transition: background .15s, color .15s, transform .15s; }
.rail-item:hover { background: rgba(255,255,255,.10); color: #fff; transform: translateY(-1px); }
.rail-item.active { background: linear-gradient(135deg, rgba(247,189,1,.26), rgba(255,255,255,.10)); color: #fff; box-shadow: inset 0 0 0 1px rgba(247,189,1,.38), 0 6px 16px rgba(0,0,0,.25); }
.rail-item.active svg { filter: drop-shadow(0 2px 6px rgba(247,189,1,.55)); }

/* topbar: frosted glass */
#topbar { background: rgba(255,255,255,.84); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(16,24,40,.06); box-shadow: 0 6px 20px rgba(16,24,40,.05); }
#global-search { height: 38px; background: #f1f4f8; border-color: transparent; box-shadow: inset 0 1px 2px rgba(16,24,40,.05); border-radius: 19px; }
#global-search:focus { background: #fff; border-color: rgba(91,9,9,.5); box-shadow: 0 0 0 4px rgba(91,9,9,.10), 0 8px 24px rgba(16,24,40,.10); }
#search-results { border-radius: 14px; border-color: #e6eaf0; overflow: hidden; }
.user-chip { box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(91,9,9,.28); transition: transform .15s; }
.user-chip:hover { transform: scale(1.06); }

/* buttons: gradient primary with a coloured shadow, lift on hover, press on click */
.btn { border-radius: 10px; transition: background .15s, box-shadow .15s, transform .12s, border-color .15s; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: linear-gradient(135deg, #7d1515 0%, #5b0909 55%, #3f0505 100%); box-shadow: 0 6px 16px rgba(91,9,9,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.btn-primary:hover { background: linear-gradient(135deg, #8f1b1b 0%, #5b0909 60%, #3f0505 100%); box-shadow: 0 9px 24px rgba(91,9,9,.36), inset 0 1px 0 rgba(255,255,255,.12); transform: translateY(-1px); }
.btn-secondary { border-color: var(--grey-4); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.btn-secondary:hover { border-color: #c5cdd9; box-shadow: 0 5px 14px rgba(16,24,40,.09); transform: translateY(-1px); }
.btn-ghost:hover { background: rgba(16,24,40,.06); }
.btn-success { background: linear-gradient(135deg, #34a35c, #1f7a33); box-shadow: 0 6px 16px rgba(31,122,51,.28); }
.btn-success:hover { background: linear-gradient(135deg, #3bb166, #1f7a33); transform: translateY(-1px); }
.btn-danger { background: linear-gradient(135deg, #d63a2e, #b3261e); box-shadow: 0 6px 16px rgba(179,38,30,.26); }
.btn-danger:hover { transform: translateY(-1px); }
.btn-mustard { background: linear-gradient(135deg, #ffd23f, #f7bd01); box-shadow: 0 6px 16px rgba(247,189,1,.35); }
.ai-btn { box-shadow: 0 6px 18px rgba(91,9,9,.35); }

/* inputs */
.select, select.select, .input, input.input, textarea.input { border-radius: 10px; border-color: var(--grey-4); box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: border-color .15s, box-shadow .15s; }
.select:hover, .input:hover { border-color: #c5cdd9; }
.input:focus, .select:focus, textarea.input:focus { border-color: rgba(91,9,9,.55); box-shadow: 0 0 0 4px rgba(91,9,9,.10); }
.field label { color: var(--grey-2); }

/* view headers and panels */
.view-head { background: rgba(255,255,255,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(16,24,40,.06); }
.view-title { letter-spacing: -.025em; }
.seg, .vt, .pl-pipesel, .pl-filter, .pl-ibtn { border-radius: 10px; border-color: var(--grey-4); box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.seg button.active { background: linear-gradient(135deg, #7d1515, #5b0909); }
.vt button.active { background: linear-gradient(135deg, #fdf3d2, #f3e7e7); color: var(--red); }
.panel { border-radius: 14px; border-color: #e6eaf0; box-shadow: var(--shadow); }
.panel-head { border-bottom-color: #eef1f5; }
.pl-cond { background: transparent; border-bottom-color: rgba(16,24,40,.06); }
.bulk-bar { background: linear-gradient(90deg, #151a23, #2b1a1f); }

/* tables */
table.grid th { background: #f6f8fb; border-bottom: 1px solid var(--grey-4); color: var(--grey-2); }
table.grid tr:hover td { background: #f3f7fc; }
table.grid tr.row-picked td { background: #fdf3d2; }
table.grid .cell-main { color: var(--ink); }
table.grid tr:hover .cell-main { color: var(--red); }

/* kanban: soft blue-grey wells, stage heads coloured on the same ramp as the Insights funnel */
.kanban-wrap { background: transparent; }
.kanban { padding: 16px 18px 8px; }
.kb-col { background: #eef2f7; }
.kb-col-head { background: #dde4ee; }
.kb-col:nth-child(1) .kb-col-head { background: linear-gradient(135deg, #a9d3fb, #8fc3f6); }
.kb-col:nth-child(2) .kb-col-head { background: linear-gradient(135deg, #8cc0f4, #6fb0ee); }
.kb-col:nth-child(3) .kb-col-head { background: linear-gradient(135deg, #5fa3e9, #4693e2); }
.kb-col:nth-child(4) .kb-col-head { background: linear-gradient(135deg, #3b8de0, #2179d5); }
.kb-col:nth-child(5) .kb-col-head { background: linear-gradient(135deg, #1f7cd6, #0b6bc4); }
.kb-col:nth-child(6) .kb-col-head { background: linear-gradient(135deg, #1868b9, #145aa3); }
.kb-col:nth-child(7) .kb-col-head { background: linear-gradient(135deg, #17579a, #164b86); }
.kb-col:nth-child(8) .kb-col-head { background: linear-gradient(135deg, #1a4a82, #173f70); }
.kb-col:nth-child(9) .kb-col-head, .kb-col:nth-child(n+10) .kb-col-head { background: linear-gradient(135deg, #34a35c, #257a3f); }
.kb-col:nth-child(-n+2) .kb-col-name { color: #0f2a4a; }
.kb-col:nth-child(-n+2) .kb-col-meta { color: rgba(15,42,74,.72); }
.kb-col:nth-child(n+3) .kb-col-name { color: #fff; }
.kb-col:nth-child(n+3) .kb-col-meta { color: rgba(255,255,255,.82); }
.kb-col-body { padding-top: 10px; }
.kb-col.drag-over { background: #fdf3d2; }
.deal-card { border-radius: 12px; border: 1px solid rgba(16,24,40,.05); box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06); }
.deal-card:hover { box-shadow: 0 12px 28px rgba(16,24,40,.15); transform: translateY(-2px); border-color: rgba(11,123,214,.25); }
.deal-card.rotten { border-left: 3px solid var(--danger); }
.kb-add { border-radius: 10px; }
.pipe-summary { background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-top-color: rgba(16,24,40,.06); }
.drop-bar { border-top-color: rgba(16,24,40,.08); }

/* deal detail */
.stage-bar .sb-seg { height: 30px; font-size: 10px; }
.stage-bar .sb-seg.done { background: linear-gradient(90deg, #6b0c0c, #5b0909); }
.stage-bar .sb-seg.current { background: linear-gradient(90deg, #ffd23f, #f7bd01); }
.avatar { box-shadow: 0 0 0 2px #fff; }
.chip { border-radius: 999px; }

/* modals, menus, toasts */
.modal-overlay { background: rgba(16,24,40,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal { border-radius: 16px; box-shadow: 0 30px 80px rgba(16,24,40,.30); }
.modal-head { border-radius: 16px 16px 0 0; }
.menu { border-radius: 12px; border-color: #e6eaf0; box-shadow: 0 16px 40px rgba(16,24,40,.18); padding: 6px; }
.menu-item { border-radius: 8px; }
.menu-item:hover { background: #f3e7e7; }
.toast { border-radius: 12px; }

/* My Day hero: a warm burgundy band with a mustard glow */
#view .md-hero { background: linear-gradient(120deg, #5b0909 0%, #7a1414 48%, #3f0505 100%); color: #fff; border-bottom: 0; padding: 28px 28px 24px; position: relative; overflow: hidden; }
#view .md-hero::after { content: ''; position: absolute; right: -90px; top: -140px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(247,189,1,.42), transparent 62%); pointer-events: none; }
#view .md-hero::before { content: ''; position: absolute; left: 40%; bottom: -160px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.10), transparent 62%); pointer-events: none; }
#view .md-hero .md-greet { color: #fff; font-size: 28px; position: relative; }
#view .md-hero .md-sub, #view .md-hero .muted, #view .md-hero p, #view .md-hero div:not(.md-greet) { color: rgba(255,255,255,.84); position: relative; }
#view .md-hero b { color: #f7bd01; }
/* My Day hero stat tiles (glass) */
#view .md-hero .md-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; position: relative; }
#view .md-hero .md-stat { display: flex; flex-direction: column; gap: 2px; min-width: 132px; padding: 12px 16px 11px; border-radius: 14px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0,0,0,.14); transition: transform .15s, background .15s; }
#view .md-hero .md-stat:hover { transform: translateY(-2px); background: rgba(255,255,255,.16); }
#view .md-hero .md-stat b { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.05; font-variant-numeric: tabular-nums; }
#view .md-hero .md-stat span { font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.72); }
#view .md-hero .md-stat.bad b { color: #ffb4a8; }
#view .md-hero .md-stat.warn b { color: #ffd66b; }
#view .md-hero .md-stat.good b { color: #f7bd01; }
#view .md-hero .md-sub { margin-top: 4px; }

/* drag reliability: the whole card is the drag handle, never its text or links */
.deal-card { user-select: none; -webkit-user-select: none; }
.deal-card a, .deal-card img, .deal-card .avatar { -webkit-user-drag: none; user-drag: none; }
.kb-col.drag-over { background: #fdf3d2; box-shadow: inset 0 0 0 2px rgba(247,189,1,.7); }
.kb-col.drag-over .kb-col-head { filter: brightness(1.06); }

/* ---------- Lost ---------- */
.lost-summary { gap: 16px; padding: 18px 20px 6px; }
.lost-tile { border-radius: 14px; border-color: #e6eaf0; box-shadow: var(--shadow); padding: 16px 18px 15px; position: relative; overflow: hidden; }
.lost-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--danger); }
.lost-tile:nth-child(2)::before { background: #0B7BD6; }
.lost-tile:nth-child(3)::before { background: #E39A00; }
.lost-tile:nth-child(4)::before { background: #7F8DE1; }
.lost-tile .lt-v { color: var(--ink); font-size: 30px; }
.lost-tile:nth-child(1) .lt-v { color: var(--danger); }
.reason-bars { padding: 10px 20px 16px; }
.reason-row, .who-row { padding: 6px 8px; margin: 0 -8px; border-radius: 10px; transition: background .12s; }
.reason-row:hover, .who-row:hover { background: #f3f7fc; }
.reason-row .rr-t, .who-row .wr-t { height: 20px; background: #eef2f7; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(16,24,40,.04); }
.reason-row .rr-f { background: linear-gradient(90deg, #E2531D, #c9401a); opacity: 1; border-radius: 999px; }
.who-row .wr-f { background: linear-gradient(90deg, #0B7BD6, #2F5FA8); border-radius: 999px; }
.reason-row.active .rr-l, .who-row.active .wr-l { color: var(--ink); }
.reason-row .rr-v, .who-row .wr-v { font-family: var(--font-ui); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Pool ---------- */
.pool-wrap { gap: 20px; }
.pool-card { border-radius: 16px; border-color: #e6eaf0; box-shadow: var(--shadow); overflow: hidden; }
.pool-card.pc-get .pc-head { background: linear-gradient(120deg, #5b0909, #7a1414 60%, #3f0505); color: #fff; padding: 22px 22px 6px; margin: 0; }
.pool-card.pc-get .pc-head .count { color: rgba(255,255,255,.75); }
.pool-card.pc-get .pc-sub { background: linear-gradient(120deg, #5b0909, #7a1414 60%, #3f0505); color: rgba(255,255,255,.82); padding: 4px 22px 20px; }
.pool-get { height: 50px; border-radius: 12px; font-size: 16px; }
.pool-hint { border-radius: 12px; }
.quota { border-radius: 999px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.quota .qb { height: 8px; border-radius: 999px; background: #eef2f7; }
.quota .qf { background: linear-gradient(90deg, #0B7BD6, #2F5FA8); border-radius: 999px; }
.team-row { padding: 9px 8px; margin: 0 -8px; border-radius: 10px; border-top: 0 !important; transition: background .12s; }
.team-row:hover { background: #f3f7fc; }
.team-row .tl { display: inline-block; margin-left: 8px; background: #eef2f7; color: var(--grey-2); border-radius: 999px; padding: 2px 9px; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.team-row .tb { height: 8px; border-radius: 999px; background: #eef2f7; }
.team-row .tf { background: linear-gradient(90deg, #0B7BD6, #2F5FA8); border-radius: 999px; }
.team-row .tv { font-family: var(--font-ui); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- TCR ---------- */
.tcr-board { gap: 14px; padding: 4px 2px 14px; }
.tcr-col { background: #eef2f7; border-radius: 14px; border-top-width: 5px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.tcr-col-head { padding: 12px 14px 8px; font-size: 13.5px; }
.tcr-col-head .sum { margin-top: 2px; }
.tcr-col-cards { padding: 4px 10px 10px; gap: 10px; }
.tcr-card { border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06); border: 1px solid rgba(16,24,40,.05); transition: transform .14s, box-shadow .14s, border-color .14s; }
.tcr-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16,24,40,.14); border-color: rgba(11,123,214,.25); }
.tcr-card .no > span:first-child { display: inline-block; background: #e8f1fb; color: #0B5FB0; border-radius: 6px; padding: 2px 7px; font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: .03em; }
.tcr-card .nm { font-size: 14px; font-weight: 700; margin-top: 6px; }
.tcr-card .am { margin-top: 8px; }
.tcr-card .am > span:first-child { color: #1E4E8C; font-weight: 800; font-size: 14px; }
.tcr-chip { border-radius: 999px; padding: 5px 12px; font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.tcr-chip.on { background: linear-gradient(135deg, #7d1515, #5b0909); border-color: transparent; box-shadow: 0 4px 12px rgba(91,9,9,.25); }

/* ---------- Activities ---------- */
.acts-view .panel-head { background: #f8fafc; padding: 12px 16px; font-size: 13.5px; }
.acts-view .panel-head .ph-count { background: #eef2f7; border-radius: 999px; padding: 1px 9px; margin-left: 4px; font-size: 12px; }
.acts-view table.grid td { padding: 11px 14px; }
.acts-view td.c-type { color: var(--grey-1); }
.acts-view .a-subj { font-size: 13.5px; }
.acts-view table.grid tr:hover td { background: #f3f7fc; }

/* ---------- Contacts / list tables ---------- */
table.grid tbody tr:nth-child(even) td { background: #fbfcfe; }
table.grid td { padding: 11px 14px; }
.p-av { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 10.5px; margin-right: 10px; vertical-align: middle; box-shadow: 0 0 0 2px #fff; flex-shrink: 0; }
.chip.grey { background: #eef2f7; color: var(--grey-1); }

/* ---------- Deal page uplift ---------- */
#view .deal-view .view-head { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 16px 22px 14px; }
#view .deal-view .view-title { font-size: 22px; }
#view .deal-view .dv-value { color: #1E4E8C; background: #e8f1fb; border-radius: 999px; padding: 6px 14px; font-size: 16px; }
#view .deal-view .dv-owner { background: #fff; border: 1px solid #e6eaf0; border-radius: 999px; padding: 4px 12px 4px 5px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
#view .deal-view .crumb { display: inline-flex; align-items: center; gap: 6px; background: #eef2f7; border-radius: 999px; padding: 4px 12px; margin-top: 10px; font-size: 12px; color: var(--grey-1); }
#view .deal-view .crumb b { color: var(--red); }
#view .deal-view .stage-bar { gap: 4px; margin-top: 2px; }
#view .deal-view .stage-bar .sb-seg { height: 34px; font-size: 10.5px; background: #e9edf3; color: var(--grey-2); }
#view .deal-view .stage-bar .sb-seg.done { background: linear-gradient(90deg, #6b0c0c, #5b0909); color: #fff; }
#view .deal-view .stage-bar .sb-seg.current { background: linear-gradient(90deg, #ffd23f, #f7bd01); color: #3f0505; box-shadow: 0 4px 12px rgba(247,189,1,.35); }
#view .deal-view .dv-grid { background: #f3f6fa; }
#view .deal-view .dv-side { background: transparent; border-right: 0; padding: 14px 0 30px 16px; }
#view .deal-view .dv-sec { background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.04); overflow: hidden; }
#view .deal-view .dv-sec-head { padding: 12px 16px; font-size: 13.5px; }
#view .deal-view .dv-sec-head:hover { background: #f8fafc; }
#view .deal-view .dv-sec-body { padding: 0 16px 14px; }
#view .deal-view .fr { padding: 5px 0; border-bottom: 1px dashed #eef2f7; }
#view .deal-view .fr:last-child { border-bottom: 0; }
#view .deal-view .fr .fk { color: var(--grey-3); font-size: 12.5px; }
#view .deal-view .nba-card { background: linear-gradient(135deg, #fff5f5, #fdf3d2); border: 1px solid #f3d9a0; border-radius: 12px; padding: 14px 14px 12px; box-shadow: 0 6px 16px rgba(247,189,1,.14); }
#view .deal-view .nba-head { color: #7a5200; }
#view .deal-view .enrich-head { color: var(--grey-3); }
#view .deal-view .dv-main { background: transparent; padding: 14px 22px 40px 16px; }
#view .deal-view .dv-tabs { border-radius: 14px 14px 0 0; border-color: #e6eaf0; background: #fff; padding: 6px 8px 0; gap: 4px; }
#view .deal-view .dv-tab { border-radius: 10px 10px 0 0; font-weight: 700; }
#view .deal-view .dv-tab.active { background: #fdf6f6; }
#view .deal-view .dv-composer { border-color: #e6eaf0; border-radius: 0 0 14px 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05); }
#view .deal-view .dv-placeholder { padding: 12px 8px; }
#view .deal-view .dv-block-head { font-size: 15px; }
#view .deal-view .hist-tab { background: #fff; border: 1px solid #e6eaf0; padding: 5px 12px; font-weight: 600; }
#view .deal-view .hist-tab.active { background: linear-gradient(135deg, #7d1515, #5b0909); border-color: transparent; color: #fff; }
#view .deal-view .act-item { border-radius: 12px; border-color: #e6eaf0; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.04); transition: transform .14s, box-shadow .14s; position: relative; overflow: hidden; }
#view .deal-view .act-item:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(16,24,40,.10); }
#view .deal-view .act-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #0B7BD6; }
#view .deal-view .act-item:has(.badge-overdue)::before { background: var(--danger); }
#view .deal-view .badge-overdue { border-radius: 999px; }
#view .deal-view .ev { padding: 10px 0; }
#view .deal-view .ev-ic { background: #fff; border: 1px solid #e6eaf0; box-shadow: 0 1px 2px rgba(16,24,40,.05); color: #1E4E8C; }
#view .deal-view .ev-body { background: #fff; border: 1px solid #e6eaf0; border-radius: 12px; padding: 10px 14px; flex: 1; min-width: 0; box-shadow: 0 1px 2px rgba(16,24,40,.04); }

/* ---------- Deal page: hero header + tiled details (bolder pass) ---------- */
#view .deal-view .view-head { background: linear-gradient(120deg, #5b0909 0%, #7a1414 55%, #3f0505 100%); color: #fff; border-bottom: 0; padding: 20px 24px 18px; position: relative; overflow: hidden; }
#view .deal-view .view-head::after { content: ''; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(247,189,1,.38), transparent 62%); pointer-events: none; }
#view .deal-view .view-head > * { position: relative; }
#view .deal-view .view-head a, #view .deal-view .view-head .btn-ghost { color: rgba(255,255,255,.85); }
#view .deal-view .view-title { color: #fff; font-size: 26px; letter-spacing: -.03em; }
#view .deal-view .dv-value { color: #3f0505; background: linear-gradient(135deg, #ffd23f, #f7bd01); font-size: 17px; padding: 7px 16px; box-shadow: 0 6px 16px rgba(247,189,1,.35); }
#view .deal-view .dv-owner { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); backdrop-filter: blur(6px); }
#view .deal-view .view-head .btn-secondary, #view .deal-view .view-head .dv-ico { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.22); }
#view .deal-view .stage-bar { padding: 14px 24px 0; background: #fff; margin: 0; }
#view .deal-view .stage-bar .sb-seg { height: 36px; }
#view .deal-view .crumb { margin: 10px 24px 14px; background: #fff; border: 1px solid #e6eaf0; }
#view .deal-view .dv-sec-body:has(.fr + .fr + .fr) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 4px 14px 14px; }
#view .deal-view .dv-sec-body:has(.fr + .fr + .fr) .fr { flex-direction: column; align-items: stretch; gap: 3px; padding: 8px 11px; background: #f7f9fc; border: 1px solid #eef2f7; border-radius: 10px; min-width: 0; }
#view .deal-view .dv-sec-body:has(.fr + .fr + .fr) .fr .fk { width: auto; padding: 0; font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--grey-3); }
#view .deal-view .dv-sec-body:has(.fr + .fr + .fr) .fr .fv { font-size: 13.5px; overflow-wrap: anywhere; }
#view .deal-view .enrich-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; background: #f7f9fc; border: 1px solid #eef2f7; border-radius: 8px; margin-bottom: 5px; font-size: 12.5px; }
#view .deal-view .enrich-row .er-v { font-weight: 700; color: var(--ink); }
#view .deal-view .dv-tab { padding: 12px 14px; font-size: 13.5px; }
#view .deal-view .dv-tab.active { background: #fdf6f6; box-shadow: inset 0 -3px 0 var(--red); border-bottom-color: transparent; }

/* [hidden] must beat display:flex utilities (call-back rows in the Call tab stayed visible) */
[hidden] { display: none !important; }
/* three-column field grid for dialogs (marketing info, TCR) */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.grid3 .field { margin-bottom: 4px; min-width: 0; }
.grid3 .field .input, .grid3 .field .select { width: 100%; }

/* ---------- Rail v2 (2026-09-08): icon tiles, mustard active state, grouped ---------- */
:root { --rail-w: 76px; }
#rail { width: var(--rail-w); padding: 10px 8px 12px; gap: 3px; }
.rail-logo { padding: 4px 0 12px; }
.rail-logo img { width: 42px; }
.rail-item { flex-direction: column; gap: 4px; padding: 7px 2px 6px; border-radius: 14px; color: rgba(255,255,255,.7); font-size: 9.5px; letter-spacing: .03em; }
.rail-item svg { width: 22px; height: 22px; padding: 5px; box-sizing: content-box; border-radius: 12px; transition: background .15s, color .15s, transform .15s; }
.rail-item:hover { background: transparent; color: #fff; transform: none; }
.rail-item:hover svg { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.rail-item.active { background: transparent; box-shadow: none; color: #fff; font-weight: 700; }
.rail-item.active svg { background: linear-gradient(135deg, #ffd23f, #f7bd01); color: #3f0505; fill: #3f0505; box-shadow: 0 6px 16px rgba(247,189,1,.35); filter: none; }
.rail-sep { height: 1px; margin: 5px 14px; background: rgba(255,255,255,.12); }

/* rail: the middle scrolls if the window is short, Settings stays pinned; tiles compact enough for a laptop screen */
#rail { overflow: hidden; }
.rail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 2px; }
.rail-scroll::-webkit-scrollbar { display: none; }
.rail-logo { padding: 2px 0 8px; }
.rail-logo img { width: 38px; }
.rail-item { padding: 4px 2px 3px; gap: 2px; font-size: 9px; }
.rail-item svg { width: 20px; height: 20px; padding: 5px; }
.rail-sep { margin: 3px 16px; }
#rail > .rail-item[data-route="settings"] { flex-shrink: 0; margin-top: 4px; }

/* ===== 2026-09-08: owner picker search, user switch popover, list view v2, stage chips ===== */
.owner-pop .op-search { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 2px 2px 6px; border: 1px solid var(--grey-4); border-radius: 9px; background: #f6f8fb; }
.owner-pop .op-search svg { width: 15px; height: 15px; color: var(--grey-3); flex-shrink: 0; }
.owner-pop .op-q { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: 13px; color: var(--ink); min-width: 0; }
.owner-pop .op-qx { border: none; background: none; color: var(--grey-3); font-size: 16px; cursor: pointer; line-height: 1; padding: 0 2px; }
.owner-pop .op-body { max-height: min(60vh, 420px); overflow: auto; }
.owner-pop .op-none { padding: 14px 10px; color: var(--grey-2); font-size: 13px; }

.user-pop { position: fixed; z-index: 95; width: 340px; max-width: calc(100vw - 16px); background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; box-shadow: 0 20px 50px rgba(16,24,40,.22); overflow: hidden; display: flex; flex-direction: column; max-height: min(72vh, 560px); }
.user-pop .up-head { padding: 14px 16px 8px; }
.user-pop .up-title { font-family: var(--font-ui); font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: -.01em; }
.user-pop .up-sub { font-size: 12px; color: var(--grey-2); margin-top: 2px; }
.user-pop .up-search { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 8px 10px; border: 1px solid var(--grey-4); border-radius: 10px; background: #f6f8fb; }
.user-pop .up-search svg { width: 15px; height: 15px; color: var(--grey-3); flex-shrink: 0; }
.user-pop .up-q { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: 13px; color: var(--ink); min-width: 0; }
.user-pop .up-list { overflow: auto; padding: 0 8px 8px; }
.user-pop .up-group { font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-3); padding: 10px 8px 4px; }
.user-pop .up-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; cursor: pointer; }
.user-pop .up-row:hover { background: var(--mustard-tint); }
.user-pop .up-row.cur { background: var(--red-tint); }
.user-pop .up-av { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.user-pop .up-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.user-pop .up-name { font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pop .up-role { font-size: 11.5px; color: var(--grey-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pop .up-cur { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--red); background: #fff; border: 1px solid var(--red-tint); border-radius: 999px; padding: 2px 7px; flex-shrink: 0; }
.user-pop .up-none, .user-pop .up-more { padding: 14px 10px; color: var(--grey-2); font-size: 13px; text-align: center; }

.pl-stages { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 18px 0; }
.stg-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #e3e8ef; background: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--ink); cursor: pointer; transition: all .12s; }
.stg-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--stg, #94a3b8); flex-shrink: 0; }
.stg-chip b { font-weight: 800; color: var(--grey-2); font-size: 11.5px; background: #f1f4f8; border-radius: 999px; padding: 1px 7px; }
.stg-chip:hover { border-color: #c9d3e0; box-shadow: 0 2px 8px rgba(16,24,40,.08); }
.stg-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.stg-chip.on b { background: rgba(255,255,255,.18); color: #fff; }
.stg-chip.empty { opacity: .55; }
.list-wrap.list-v2 { padding: 12px 18px 18px; background: transparent; }
.list-v2 table.grid { border: 1px solid #e6eaf0; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.05); border-collapse: separate; border-spacing: 0; }
.list-v2 table.grid th { background: #f6f8fb; padding: 11px 14px; font-size: 10.5px; letter-spacing: .08em; }
.list-v2 table.grid th.sorted { color: var(--blue); }
.list-v2 .th-arrow { margin-left: 4px; }
.list-v2 table.grid td { padding: 11px 14px; height: 50px; border-bottom: 1px solid #eef1f5; font-size: 13px; }
.list-v2 table.grid tbody tr:last-child td { border-bottom: none; }
.list-v2 table.grid tr:hover td { background: #f8fafd; }
.list-v2 .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list-v2 th.num { text-align: right; }
.list-v2 .cell-main { max-width: 240px; }
.list-v2 .lt-title { font-family: var(--font-ui); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; vertical-align: middle; }
.list-v2 tr:hover .lt-title { color: var(--red); }
.list-v2 .lt-label { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: #f1f4f8; color: var(--grey-2); vertical-align: middle; }
.list-v2 .lt-label.lt-hot { background: #fdecec; color: #c0392b; }
.list-v2 .lt-label.lt-vip { background: #fff3d6; color: #9a6b00; }
.list-v2 .lt-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; display: inline-block; vertical-align: middle; }
.list-v2 .lt-owner { gap: 8px; }
.stg-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--stg, #94a3b8); color: var(--stg-fg, #fff); font-family: var(--font-ui); font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.list-v2 .na { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.list-v2 .na-rel { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; background: #f1f4f8; color: var(--grey-2); }
.list-v2 .na-late .na-rel { background: #fdecec; color: #c0392b; }
.list-v2 .na-today .na-rel { background: #fff3d6; color: #9a6b00; }
.list-v2 .na-ok .na-rel { background: #e6f4ea; color: #2e844a; }
.list-v2 .na-none { color: var(--grey-2); }

/* bulk bar: searchable owner picker on the dark bar */
.bulk-bar .owner-btn { height: 30px; background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); border-radius: 8px; }
.bulk-bar .owner-btn:hover { background: rgba(255,255,255,.18); }
.bulk-bar .owner-btn .ob-caret, .bulk-bar .owner-btn .ob-ico { color: rgba(255,255,255,.75); }

/* ===== 2026-09-08: modern dialogs + form fields ===== */
.modal { border-radius: 18px; box-shadow: 0 32px 90px rgba(16,24,40,.32), 0 0 0 1px rgba(16,24,40,.04); }
.modal-head { border-top: none; border-bottom: 1px solid #eef1f5; padding: 20px 24px 16px; font-size: 18px; font-weight: 800; letter-spacing: -.015em; border-radius: 18px 18px 0 0; background: #fff; position: sticky; top: 0; z-index: 3; }
.modal-head .close-x { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--grey-3); background: #f3f5f8; cursor: pointer; transition: background .12s, color .12s; }
.modal-head .close-x:hover { background: #e8ecf1; color: var(--ink); }
.modal-body { padding: 22px 24px 10px; }
.modal-foot { padding: 14px 24px; background: #f8fafc; border-top: 1px solid #eef1f5; border-radius: 0 0 18px 18px; position: sticky; bottom: 0; z-index: 3; }
.modal-foot .btn { min-width: 96px; height: 40px; border-radius: 11px; }

.field { margin-bottom: 16px; }
.field label { font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #3d4756; margin-bottom: 6px; }
.field-row { gap: 16px; }
.grid3 { gap: 12px 16px; }
.grid3 .field { margin-bottom: 6px; }
.modal .input:not([multiple]), .field .input:not([multiple]), .modal input.input, .field input.input { height: 40px; border-radius: 11px; border: 1px solid #dfe5ed; background: #fbfcfe; padding: 0 13px; font-size: 13.5px; color: var(--ink); box-shadow: none; }
.modal .select, .field .select, .modal select.select, .field select.select { height: 40px; border-radius: 11px; border: 1px solid #dfe5ed; background-color: #fbfcfe; font-size: 13.5px; font-weight: 600; color: var(--ink); box-shadow: none; }
.modal textarea.input, .field textarea.input { height: auto; min-height: 90px; padding: 10px 13px; line-height: 1.45; }
.modal select.input:not([multiple]), .modal select.select:not([multiple]), .field select.input:not([multiple]), .field select.select:not([multiple]) { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; }
.modal .input:hover, .field .input:hover, .modal .select:hover, .field .select:hover { border-color: #c5cdd9; background-color: #fff; }
.modal .input:focus, .field .input:focus, .modal .select:focus, .field .select:focus, .modal textarea.input:focus { border-color: rgba(91,9,9,.5); box-shadow: 0 0 0 4px rgba(91,9,9,.08); background-color: #fff; outline: none; }
.modal .input::placeholder { color: #a3adbb; }
.modal .input[readonly], .modal .input:disabled { background: #f3f5f8; color: var(--grey-2); }
.mk-sec { grid-column: 1 / -1; font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-3); padding-top: 12px; margin-top: 2px; border-top: 1px solid #eef1f5; }
.mk-sec:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.mk-hint { grid-column: 1 / -1; font-size: 12px; color: var(--grey-2); margin-top: -4px; }

/* ===== 2026-09-08b: dialogs with depth (icon tile, subtitle, section cards) ===== */
.modal { border-radius: 20px; box-shadow: 0 40px 100px rgba(16,24,40,.38), 0 0 0 1px rgba(16,24,40,.05); }
.modal-head { padding: 20px 26px 18px; gap: 14px; align-items: center; background: linear-gradient(180deg, #fff 0%, #fafbfd 100%); border-bottom: 1px solid #e9edf3; border-radius: 20px 20px 0 0; }
.modal-head .mh-ic { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, #7a1212 0%, var(--red) 55%, #b0722e 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(91,9,9,.30), inset 0 1px 0 rgba(255,255,255,.18); flex-shrink: 0; }
.modal-head .mh-ic svg { width: 21px; height: 21px; }
.modal-head .mh-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.modal-head .mh-title { font-family: var(--font-ui); font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.modal-head .mh-sub { font-size: 12.5px; font-weight: 500; color: var(--grey-2); margin-top: 3px; line-height: 1.35; }
.modal-head .close-x { margin-left: 8px; }
.modal-body { padding: 20px 26px 10px; background: #fff; }
.modal-foot { padding: 14px 26px; background: #f7f9fc; border-top: 1px solid #e9edf3; border-radius: 0 0 20px 20px; }
.modal-foot .btn-primary { background: linear-gradient(135deg, #7a1212, var(--red)); box-shadow: 0 8px 18px rgba(91,9,9,.28); }
.modal-foot .btn-primary:hover { box-shadow: 0 10px 22px rgba(91,9,9,.36); transform: translateY(-1px); }
.modal-foot .btn-secondary { background: #fff; }

.f-card { background: #f6f8fb; border: 1px solid #e4e9f0; border-radius: 16px; padding: 16px 18px 6px; margin-bottom: 14px; box-shadow: inset 0 1px 0 #fff; }
.f-card:last-child { margin-bottom: 6px; }
.f-card-h { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.f-card-h .f-ic { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--c, var(--blue)); box-shadow: 0 4px 10px color-mix(in srgb, var(--c, var(--blue)) 35%, transparent); flex-shrink: 0; }
.f-card-h .f-ic svg { width: 16px; height: 16px; }
.f-card-h b { font-family: var(--font-ui); font-size: 13.5px; font-weight: 800; color: var(--ink); display: block; letter-spacing: -.01em; }
.f-card-h small { font-size: 12px; color: var(--grey-2); display: block; margin-top: 1px; }
.f-card .grid3 { gap: 10px 14px; }
.f-card .field { margin-bottom: 10px; }
.f-card .field label { color: #4a5568; font-size: 12px; }
.f-card .input, .f-card .select, .f-card select.input { background-color: #fff; border-color: #dbe2ea; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.f-card .input:focus, .f-card .select:focus { border-color: rgba(91,9,9,.5); box-shadow: 0 0 0 4px rgba(91,9,9,.08); }
.modal .mk-sec { display: none; }
/* selects: ellipsis instead of clipping long option labels under the chevron */
.modal select.input, .modal select.select, .field select.input, .field select.select, .fl-row select.input { text-overflow: ellipsis; }
.type-tabs button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ===== 2026-09-08c: searchable people pickers replacing native user selects ===== */
.u-host { display: inline-flex; vertical-align: middle; max-width: 100%; }
.u-host .owner-btn { max-width: 100%; }
.u-host.u-form, .field .u-host { width: 100%; }
.u-host.u-form .owner-btn, .field .u-host .owner-btn { width: 100%; height: 40px; border-radius: 11px; border: 1px solid #dfe5ed; background: #fbfcfe; padding: 0 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); justify-content: flex-start; }
.f-card .u-host .owner-btn { background: #fff; border-color: #dbe2ea; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.u-host.u-form .owner-btn:hover, .field .u-host .owner-btn:hover { border-color: #c5cdd9; background: #fff; }
.u-host.u-form .owner-btn:focus, .field .u-host .owner-btn:focus { outline: none; border-color: rgba(91,9,9,.5); box-shadow: 0 0 0 4px rgba(91,9,9,.08); }
.u-host.disabled { opacity: .55; pointer-events: none; }
.owner-btn { border-radius: 10px; }
.owner-btn .ob-label { max-width: 220px; }

/* Insights dashboard toolbar: card header with grouped quick filters */
.ins-toolbar { background: #fff; border: 1px solid #e6eaf0; border-radius: 16px; padding: 12px 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.05); gap: 12px; align-items: center; }
.ins-toolbar .ins-title { font-size: 22px; letter-spacing: -.02em; }
.dash-qf { display: inline-flex; align-items: center; gap: 4px; background: #f3f5f9; border: 1px solid #e6eaf0; border-radius: 12px; padding: 4px; }
.dash-qf .qf-item { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; color: var(--grey-2); }
.dash-qf .qf-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.dash-qf .select { border: none; background: transparent; box-shadow: none; height: 32px; font-weight: 700; color: var(--ink); padding: 0 26px 0 4px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 6px center; background-size: 14px; }
.dash-qf .select:hover { background-color: #fff; border-radius: 9px; }
.dash-qf .owner-btn { height: 32px; border: none; background: transparent; box-shadow: none; font-weight: 700; border-radius: 9px; }
.dash-qf .owner-btn:hover { background: #fff; }
.dash-qf .btn-ghost { height: 30px; }
.dash-actions { display: inline-flex; gap: 8px; align-items: center; }
.dash-actions .btn svg { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }

/* ===== 2026-09-08d: styled dropdowns for every native select ===== */
select[data-nice] { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
.sel-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; font-family: var(--font-ui); background-image: none !important; appearance: none; -webkit-appearance: none; padding-right: 10px; transition: border-color .12s, box-shadow .12s, background-color .12s; }
.sel-btn .sb-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-btn .sb-caret { width: 15px; height: 15px; flex-shrink: 0; opacity: .6; transition: transform .12s; }
.sel-btn:hover .sb-caret { opacity: .9; }
.sel-btn.placeholder .sb-label { color: var(--grey-2); font-weight: 500; }
.sel-btn:disabled { opacity: .55; cursor: default; }
.sel-btn:focus-visible { outline: none; border-color: rgba(91,9,9,.5); box-shadow: 0 0 0 4px rgba(91,9,9,.08); }
.sel-btn.select { height: 34px; }
.sel-btn.input { height: 36px; }
.modal .sel-btn.input, .field .sel-btn.input, .modal .sel-btn.select, .field .sel-btn.select, .modal .sel-btn, .field .sel-btn { width: 100%; height: 40px; border-radius: 11px; border: 1px solid #dfe5ed; background: #fbfcfe; padding: 0 12px 0 13px; font-size: 13.5px; font-weight: 600; color: var(--ink); box-shadow: none; }
.f-card .sel-btn { background: #fff; border-color: #dbe2ea; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.modal .sel-btn:hover, .field .sel-btn:hover { border-color: #c5cdd9; background: #fff; }
.fl-row .sel-btn { width: auto; flex: 1; }
.bulk-bar .sel-btn { height: 30px; background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); border-radius: 8px; }
.bulk-bar .sel-btn:hover { background: rgba(255,255,255,.18); }
.pl-pipesel .sel-btn { border: none; background: transparent; height: auto; padding: 0; font-weight: 700; font-size: 14px; color: var(--ink); }
.pl-pipesel .sel-btn .sb-caret { display: none; }
.dash-qf .sel-btn { border: none; background: transparent; box-shadow: none; height: 32px; font-weight: 700; color: var(--ink); border-radius: 9px; padding: 0 8px 0 4px; }
.dash-qf .sel-btn:hover { background: #fff; }
.pl-mini.sel-btn { height: 28px; }
table .sel-btn, td .sel-btn { height: 32px; border-radius: 8px; }
.sel-pop { position: fixed; z-index: 9999; background: #fff; border: 1px solid #e6eaf0; border-radius: 12px; box-shadow: 0 16px 40px rgba(16,24,40,.18), 0 0 0 1px rgba(16,24,40,.03); padding: 6px; min-width: 180px; max-width: min(420px, calc(100vw - 16px)); max-height: 340px; display: flex; flex-direction: column; font-family: var(--font-ui); }
.sel-pop .sp-search { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 0 6px; border: 1px solid var(--grey-4); border-radius: 9px; background: #f6f8fb; flex-shrink: 0; }
.sel-pop .sp-search svg { width: 14px; height: 14px; color: var(--grey-3); flex-shrink: 0; }
.sel-pop .sp-q { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: 13px; color: var(--ink); min-width: 0; }
.sel-pop .sp-list { overflow: auto; min-height: 0; }
.sel-pop .sp-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; white-space: nowrap; }
.sel-pop .sp-opt:hover, .sel-pop .sp-opt.focus { background: var(--mustard-tint); }
.sel-pop .sp-opt.on { background: var(--red-tint); color: var(--red); font-weight: 700; }
.sel-pop .sp-opt.on svg { margin-left: auto; width: 14px; height: 14px; flex-shrink: 0; }
.sel-pop .sp-opt.dis { opacity: .45; pointer-events: none; }
.sel-pop .sp-group { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-3); padding: 8px 10px 4px; }
.sel-pop .sp-none { padding: 12px 10px; color: var(--grey-2); font-size: 13px; }

.modal select[multiple].input, .field select[multiple].input { height: auto; min-height: 96px; padding: 6px 8px; border-radius: 11px; border: 1px solid #dfe5ed; background: #fff; font-size: 13px; }

/* ===== 2026-09-09: Settings uplift, stage bar on the kanban ramp, deal page body pass ===== */
.st-shell { background: #f3f6fa; }
.st-nav { background: #fff; border-right: 1px solid #e6eaf0; padding: 22px 14px 24px 16px; }
.st-nav-title { font-family: var(--font-ui); font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 8px 12px; }
.st-nav-group { font-size: 10.5px; letter-spacing: .12em; color: #8b95a5; margin: 18px 10px 6px; font-weight: 800; }
.st-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #3d4756; }
.st-nav-item .st-nav-ic { width: 26px; height: 26px; border-radius: 8px; background: #f1f4f8; color: #5b6676; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s, color .12s; }
.st-nav-item .st-nav-ic svg { width: 15px; height: 15px; }
.st-nav-item:hover { background: #f6f8fb; color: var(--ink); }
.st-nav-item:hover .st-nav-ic { background: #e8eef6; color: var(--blue); }
.st-nav-item.active { background: linear-gradient(135deg, #1c2333, #0f172a); color: #fff; box-shadow: 0 6px 16px rgba(15,23,42,.22); }
.st-nav-item.active .st-nav-ic { background: rgba(255,255,255,.14); color: #fff; }
.st-main { padding: 26px 32px 48px; }
.st-page-head { margin: 0 0 18px; }
.st-crumb { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); background: #e8f1fb; border-radius: 999px; padding: 4px 10px 4px 6px; margin-bottom: 8px; }
.st-crumb-ic { width: 18px; height: 18px; border-radius: 6px; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .st-crumb-ic svg { width: 11px; height: 11px; }
.st-page-head h1 { font-family: var(--font-ui); font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.st-content > .panel, .st-content .st-card, .st-content .st-panel, .st-content .eng .card, .st-content .inb .card, .st-content .cm-root .card { border-color: #e6eaf0; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.04); }
.st-content .panel-head { padding: 14px 18px; border-bottom-color: #eef1f5; font-family: var(--font-ui); font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.st-tag { background: #e8f1fb; color: var(--blue); border-radius: 999px; }
.settings-view .st-content .st-stage-grid { grid-template-columns: 62px 30px minmax(200px, 340px) 140px 160px 36px; }
.settings-view .st-content .st-cols.st-stage-grid { color: #8b95a5; letter-spacing: .08em; }
.settings-view .st-content .st-stage-grid .st-ord { width: 30px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 12px; font-weight: 800; box-shadow: 0 2px 6px rgba(16,24,40,.12); }
.settings-view .st-content .st-stage-grid .input { height: 38px; border-radius: 10px; border-color: #dfe5ed; background: #fbfcfe; }
.settings-view .st-content .st-stage-grid .input:focus { background: #fff; }
.settings-view .st-content .st-row.st-stage-grid { padding: 7px 0; }
.settings-view .st-content .st-row.st-stage-grid:hover { background: #f8fafd; border-radius: 10px; }
.settings-view .st-ico { width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--grey-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.settings-view .st-ico:hover { background: #f1f4f8; color: var(--ink); border-color: #e3e8ef; }
.settings-view .st-ico:disabled { opacity: .3; cursor: default; }

/* deal page: stage bar on the same ramp as the kanban heads */
#view .deal-view .stage-bar .sb-seg { background: color-mix(in srgb, var(--stg, #4693e2) 14%, #fff); color: color-mix(in srgb, var(--stg, #4693e2) 70%, #0f172a); font-weight: 700; }
#view .deal-view .stage-bar .sb-seg.future { background: color-mix(in srgb, var(--stg, #4693e2) 12%, #fff); color: color-mix(in srgb, var(--stg, #4693e2) 65%, #0f172a); }
#view .deal-view .stage-bar .sb-seg.done { background: var(--stg); color: var(--stg-fg); opacity: .92; }
#view .deal-view .stage-bar .sb-seg.current { background: var(--stg); color: var(--stg-fg); box-shadow: 0 6px 16px color-mix(in srgb, var(--stg) 45%, transparent), 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--stg) 55%, transparent); opacity: 1; z-index: 1; }
#view .deal-view .stage-bar .sb-seg .sb-days { opacity: .85; font-weight: 600; }
#view .deal-view .stage-bar .sb-seg:hover { filter: brightness(1.04); }
#view .deal-view .crumb { background: #f1f4f8; }

/* deal page: section heads with tinted icons */
#view .deal-view .dv-sec-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; }
#view .deal-view .dv-sec-ic { width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--c, #0B7BD6) 14%, #fff); color: var(--c, #0B7BD6); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
#view .deal-view .dv-sec-ic svg { width: 14px; height: 14px; }
#view .deal-view .dv-sec-title { font-family: var(--font-ui); font-weight: 800; font-size: 13.5px; letter-spacing: -.01em; }
#view .deal-view .dv-sec-count { margin-left: 2px; }

/* deal page: quick-add bar and composer */
#view .deal-view .dv-quick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: text; }
#view .deal-view .dv-quick .dq-text { flex: 1; color: var(--grey-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .deal-view .dv-quick .dq-btns { display: inline-flex; gap: 6px; flex-shrink: 0; }
#view .deal-view .dv-quick .dq-btns button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #e3e8ef; background: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--ink); cursor: pointer; transition: all .12s; }
#view .deal-view .dv-quick .dq-btns button:hover { border-color: var(--blue); color: var(--blue); background: #e8f1fb; }
#view .deal-view .dv-quick .dq-btns button svg { width: 14px; height: 14px; }
#view .deal-view .type-tabs { gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
#view .deal-view .type-tabs button { height: 32px; border-radius: 999px; border: 1px solid #e3e8ef; background: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--ink); padding: 0 12px; }
#view .deal-view .type-tabs button.active { background: linear-gradient(135deg, #7a1212, var(--red)); border-color: transparent; color: #fff; box-shadow: 0 4px 10px rgba(91,9,9,.25); }
#view .deal-view .cmp-row { gap: 8px; margin-bottom: 8px; }
#view .deal-view .cmp-row .input { height: 38px; border-radius: 10px; border-color: #dfe5ed; background: #fbfcfe; }
#view .deal-view .cmp-row textarea.input { height: auto; min-height: 70px; }

/* deal page: history as a timeline with day dividers and merged change cards */
#view .deal-view .dv-block { background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; padding: 14px 16px; margin-top: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
#view .deal-view .dv-block-head { font-family: var(--font-ui); font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
#view .deal-view .hist-tab { border-radius: 999px; font-size: 12.5px; }
#view .deal-view .ev-timeline { position: relative; margin-top: 6px; }
#view .deal-view .ev-timeline::before { content: ''; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: #e6eaf0; border-radius: 2px; }
#view .deal-view .ev-day { position: relative; display: flex; align-items: center; margin: 10px 0 4px 0; }
#view .deal-view .ev-day span { position: relative; z-index: 1; background: #f1f4f8; color: #5b6676; font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; margin-left: 2px; }
#view .deal-view .ev { position: relative; display: flex; gap: 12px; padding: 6px 0; }
#view .deal-view .ev-ic { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #e6eaf0; color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
#view .deal-view .ev-ic svg { width: 15px; height: 15px; }
#view .deal-view .ev-change .ev-ic { color: #8b95a5; background: #f6f8fb; }
#view .deal-view .ev-body { border-radius: 12px; padding: 10px 14px; }
#view .deal-view .ev-head { font-size: 12.5px; color: var(--grey-2); display: flex; align-items: center; gap: 6px; }
#view .deal-view .ev-head b { color: var(--ink); font-family: var(--font-ui); font-weight: 800; }
#view .deal-view .ev-text { margin-top: 4px; font-size: 13.5px; color: var(--ink); }
#view .deal-view .ev-list { margin: 6px 0 0; padding-left: 16px; font-size: 13px; color: var(--ink); line-height: 1.6; }
#view .deal-view .ev-list li::marker { color: #a3adbb; }
#view .deal-view .ev-change .ev-body { background: #fbfcfe; }
/* focus items */
#view .deal-view .act-item { border-radius: 12px; }

/* ===== 2026-09-09b: collapsible cards (deal sections, settings panels), users toolbar ===== */
#view .deal-view .dv-sec.collapsed .dv-sec-body { display: none !important; }
#view .deal-view .dv-block.collapsed .dv-block-body, #view .deal-view .dv-block.collapsed > *:not(.dv-block-head) { display: none !important; }
#view .deal-view .dv-sec-head .chev, #view .deal-view .dv-block-head .chev { transition: transform .15s; }
#view .deal-view .dv-sec.collapsed .dv-sec-head .chev, #view .deal-view .dv-block.collapsed .dv-block-head .chev { transform: rotate(-90deg); }
.st-content .panel .panel-head { cursor: pointer; user-select: none; }
.st-content .panel .fold-chev { width: 24px; height: 24px; border-radius: 7px; background: #f1f4f8; color: #5b6676; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .15s, background .12s; }
.st-content .panel .fold-chev svg { width: 14px; height: 14px; }
.st-content .panel.collapsed .fold-chev { transform: rotate(-90deg); }
.st-content .panel.collapsed .panel-body { display: none !important; }
.st-content .panel.collapsed .panel-head { border-bottom: none; }
.st-content .panel .panel-head:hover .fold-chev { background: #e8eef6; color: var(--blue); }
.ut-bar { display: flex; align-items: center; gap: 12px; max-width: 900px; margin: 0 20px 6px; padding: 12px 14px; background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04); flex-wrap: wrap; }
.ut-kpis { display: inline-flex; gap: 14px; font-size: 12.5px; color: var(--grey-2); } .ut-kpis b { color: var(--ink); font-family: var(--font-ui); font-size: 14px; }
.ut-search { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid #dfe5ed; border-radius: 10px; background: #fbfcfe; min-width: 240px; }
.ut-search svg { width: 15px; height: 15px; color: var(--grey-3); } .ut-search input { border: none; background: none; outline: none; font: inherit; font-size: 13px; flex: 1; min-width: 0; }
.ut-search:focus-within { border-color: rgba(91,9,9,.5); box-shadow: 0 0 0 4px rgba(91,9,9,.08); background: #fff; }
.capi-ev { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #eef1f5; color: #5b6676; margin: 1px 2px 1px 0; }
.capi-ev.sent { background: #e6f4ea; color: #2e844a; } .capi-ev.test { background: #fff3d6; color: #9a6b00; } .capi-ev.failed { background: #fdecec; color: #c0392b; } .capi-ev.queued { background: #e3e9f7; color: #2b4a8a; }

/* combobox: floating list styled like the other popovers, two-line rows */
.combo-list { background: #fff; border: 1px solid #e6eaf0; border-radius: 12px; box-shadow: 0 16px 40px rgba(16,24,40,.18), 0 0 0 1px rgba(16,24,40,.03); padding: 6px; overflow: auto; }
.combo-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.combo-item:hover, .combo-item.hl { background: var(--mustard-tint); }
.combo-item .combo-av { width: 28px; height: 28px; border-radius: 8px; background: #e8f1fb; color: #1E4E8C; font-family: var(--font-ui); font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.combo-item .combo-txt { display: flex; flex-direction: column; min-width: 0; }
.combo-item .combo-name { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-item .sub { margin-left: 0; font-size: 11.5px; color: var(--grey-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-item.create { padding: 9px 10px; color: var(--red); font-family: var(--font-ui); font-weight: 700; border-top: 1px dashed #e6eaf0; margin-top: 4px; border-radius: 0 0 8px 8px; }
.combo-item.none { color: var(--grey-3); cursor: default; }

/* ===== 2026-09-09: My Day hero, light and layered ===== */
#view .md-hero { background: linear-gradient(135deg, #ffffff 0%, #fbf6ee 55%, #f3f6fa 100%); color: var(--ink); border-bottom: 1px solid #e6eaf0; padding: 26px 28px 22px; position: relative; overflow: hidden; }
#view .md-hero::after { content: ''; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(247,189,1,.22), transparent 62%); pointer-events: none; }
#view .md-hero::before { content: ''; position: absolute; left: 38%; bottom: -200px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(11,123,214,.10), transparent 62%); pointer-events: none; }
#view .md-hero .md-greet { color: var(--ink); font-family: var(--font-ui); font-size: 28px; font-weight: 800; letter-spacing: -.02em; position: relative; }
#view .md-hero .md-sub, #view .md-hero .muted, #view .md-hero p, #view .md-hero div:not(.md-greet) { color: var(--grey-2); position: relative; }
#view .md-hero div.md-date { position: absolute; right: 28px; top: 28px; display: inline-flex; width: auto; font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: #fff; border: 1px solid #e6eaf0; border-radius: 999px; padding: 6px 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
#view .md-hero b { color: var(--ink); }
#view .md-hero .md-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; position: relative; }
#view .md-hero .md-stat { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 14px 16px 12px 16px; border-radius: 16px; background: #fff; border: 1px solid #e6eaf0; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 20px rgba(16,24,40,.06); transition: transform .15s, box-shadow .15s; overflow: hidden; --c: #0B7BD6; }
#view .md-hero .md-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
#view .md-hero .md-stat:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16,24,40,.12); background: #fff; }
#view .md-hero .md-stat .md-ic { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); display: inline-flex; align-items: center; justify-content: center; }
#view .md-hero .md-stat .md-ic svg { width: 16px; height: 16px; }
#view .md-hero .md-stat b { font-family: var(--font-ui); font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1.05; font-variant-numeric: tabular-nums; padding-right: 40px; }
#view .md-hero .md-stat span { font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-3); }
#view .md-hero .md-stat.s-overdue { --c: #E2531D; } #view .md-hero .md-stat.s-today { --c: #0B7BD6; } #view .md-hero .md-stat.s-next { --c: #E39A00; } #view .md-hero .md-stat.s-open { --c: #2F5FA8; } #view .md-hero .md-stat.s-won { --c: #2E844A; }
#view .md-hero .md-stat.bad b { color: #c0392b; } #view .md-hero .md-stat.warn b { color: #9a6b00; } #view .md-hero .md-stat.good b { color: #2E844A; }

/* ===== TCR board: coloured stage heads, lifted cards ===== */
.tcr-board { padding: 4px 2px 12px; }
.tcr-col { background: #eef2f7; border-radius: 14px; border-top: 0 !important; overflow: hidden; }
.tcr-col-head { padding: 12px 14px 10px; background: var(--stage, #8e97a6); color: #fff; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; background-image: linear-gradient(135deg, rgba(255,255,255,.14), rgba(0,0,0,.06)); }
.tcr-col-head .sum { color: rgba(255,255,255,.85); font-size: 11.5px; font-weight: 600; }
.tcr-col-cards { padding: 10px 8px 10px; gap: 10px; }
.tcr-card { border-radius: 12px; border: 1px solid rgba(16,24,40,.05); box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06); padding: 11px 12px 12px; transition: transform .12s, box-shadow .12s; border-left: 3px solid var(--stage, #8e97a6); }
.tcr-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16,24,40,.15); border-color: rgba(16,24,40,.05); border-left-color: var(--stage, #8e97a6); }
.tcr-card .no { align-items: center; }
.tcr-card .no > span:first-child { background: #e8f1fb; color: #1E4E8C; border-radius: 999px; padding: 2px 9px; font-weight: 800; letter-spacing: .05em; }
.tcr-card .nm { font-size: 14px; margin: 6px 0 2px; }
.tcr-card .am { color: #1E4E8C; font-size: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e6eaf0; }
.tcr-card .ow { display: inline-flex; align-items: center; gap: 6px; }

/* ===== Pool hero: light card with coloured stat tiles ===== */
#view .pool-hero { background: linear-gradient(135deg, #ffffff 0%, #fbf6ee 55%, #f3f6fa 100%); color: var(--ink); border: 1px solid #e6eaf0; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.07); padding: 24px 28px; }
#view .pool-hero::after { background: radial-gradient(circle, rgba(247,189,1,.22), transparent 62%); }
#view .pool-hero .ph-title { color: var(--ink); font-family: var(--font-ui); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
#view .pool-hero .ph-sub { color: var(--grey-2); }
#view .pool-hero .ph-stat { position: relative; min-width: 156px; padding: 14px 16px 12px 18px; border-radius: 16px; background: #fff; border: 1px solid #e6eaf0; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 20px rgba(16,24,40,.06); backdrop-filter: none; overflow: hidden; --c: #0B7BD6; transition: transform .15s, box-shadow .15s; }
#view .pool-hero .ph-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
#view .pool-hero .ph-stat:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16,24,40,.12); }
#view .pool-hero .ph-stat:nth-child(1) { --c: #E39A00; } #view .pool-hero .ph-stat:nth-child(2) { --c: #0B7BD6; } #view .pool-hero .ph-stat:nth-child(3) { --c: #2E844A; }
#view .pool-hero .ph-stat b { font-family: var(--font-ui); font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
#view .pool-hero .ph-stat b small { color: var(--grey-3); font-size: 14px; }
#view .pool-hero .ph-stat span { color: var(--grey-3); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; }
#view .pool-hero .ph-bar { background: #eef1f5; }
#view .pool-hero .ph-bar i { background: linear-gradient(90deg, #f7bd01, #E39A00); }

/* ===== My Day hero, take three: deep brand band with white KPI cards floating over its edge ===== */
#view .md-hero { background: radial-gradient(620px 320px at 88% -10%, rgba(247,189,1,.30), transparent 62%), radial-gradient(520px 280px at 25% 130%, rgba(255,255,255,.08), transparent 60%), linear-gradient(135deg, #5b0909 0%, #3b0a12 52%, #111827 100%); color: #fff; border-bottom: 0; padding: 30px 28px 0; overflow: visible; display: flow-root; }
#view .md-hero::before, #view .md-hero::after { display: none; }
#view .md-hero .md-greet { color: #fff; font-size: 30px; }
#view .md-hero .md-sub, #view .md-hero .muted, #view .md-hero p, #view .md-hero div:not(.md-greet) { color: rgba(255,255,255,.78); }
#view .md-hero div.md-date { top: 32px; color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); box-shadow: none; backdrop-filter: blur(6px); }
#view .md-hero .md-stats { margin-top: 24px; margin-bottom: -44px; gap: 14px; }
#view .md-hero .md-stat { min-width: 168px; padding: 16px 18px 14px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(16,24,40,.06); box-shadow: 0 12px 30px rgba(16,24,40,.22), 0 2px 6px rgba(16,24,40,.08); }
#view .md-hero .md-stat::before { display: none; }
#view .md-hero .md-stat:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(16,24,40,.28); }
#view .md-hero .md-stat .md-ic { position: static; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 10px; box-shadow: 0 4px 10px color-mix(in srgb, var(--c) 30%, transparent); background: var(--c); color: #fff; }
#view .md-hero .md-stat .md-ic svg { width: 17px; height: 17px; }
#view .md-hero .md-stat b { padding-right: 0; font-size: 30px; color: var(--ink); }
#view .md-hero .md-stat span { color: var(--grey-2); }
#view .md-hero .md-stat.bad b { color: #c0392b; } #view .md-hero .md-stat.warn b { color: #9a6b00; } #view .md-hero .md-stat.good b { color: #2E844A; }
#view .md-wrap { padding-top: 68px; }

/* ===== Laila: one calm centred column ===== */
.laila { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #fff; }
.ll-top { display: flex; justify-content: flex-end; padding: 12px 24px 0; min-height: 40px; }
.ll-new { border: 1px solid #e6eaf0; background: #fff; border-radius: 999px; padding: 6px 14px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--grey-2); cursor: pointer; } .ll-new:hover { color: var(--ink); border-color: #c9d3e0; }
.ll-msgs { flex: 1; min-height: 0; overflow: auto; padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 22px; }
.ll-msgs > * { flex-shrink: 0; width: 100%; max-width: 760px; margin: 0 auto; }
.ll-av { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, #7a1212, var(--red) 55%, #c9a24d); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(91,9,9,.25); flex-shrink: 0; }
.ll-empty { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 8vh; }
.ll-empty .ll-av { width: 56px; height: 56px; font-size: 28px; border-radius: 18px; margin-bottom: 8px; }
.ll-empty h1 { font-family: var(--font-ui); font-size: 30px; font-weight: 800; letter-spacing: -.025em; margin: 0; color: var(--ink); }
.ll-empty p { margin: 0; font-size: 15px; color: var(--grey-2); }
.ll-warn { background: #fff8e6; border: 1px solid #f3dfa0; color: #7a5a00; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.lm { display: flex; gap: 14px; align-items: flex-start; }
.lm.user { justify-content: flex-end; }
.lm.user .lb { background: #f1f4f8; color: var(--ink); border-radius: 18px 18px 4px 18px; max-width: 72%; padding: 11px 16px; }
.lm.bot .lbw { flex: 1; min-width: 0; padding-top: 4px; }
.lm.bot .lb { padding: 0 2px; }
.lb { font-size: 15px; line-height: 1.6; color: var(--ink); }
.lb p { margin: 0 0 8px; } .lb p:last-child { margin: 0; } .lb ul { margin: 4px 0 8px; padding-left: 20px; } .lb li { margin: 3px 0; } .lb .lg { height: 6px; } .lb a { color: var(--blue); font-weight: 700; text-decoration: none; } .lb a:hover { text-decoration: underline; }
.lu { font-size: 11.5px; color: var(--grey-3); margin: 0 0 6px 2px; }
.lps { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lp { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05); }
.lp.done { background: #f8fafc; box-shadow: none; }
.lp .lp-txt { flex: 1; font-size: 13.5px; } .lp .lp-sub { font-size: 12.5px; color: var(--grey-2); margin-top: 2px; } .lp .lp-btns { display: flex; gap: 6px; } .lp .lp-ok { font-size: 12px; font-weight: 800; color: #2e844a; }
.ll-dock { padding: 8px 24px 18px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 30%); }
.ll-input { display: flex; align-items: flex-end; gap: 8px; max-width: 760px; margin: 0 auto; padding: 8px 8px 8px 18px; border: 1px solid #dfe5ed; border-radius: 26px; background: #fff; box-shadow: 0 2px 4px rgba(16,24,40,.04), 0 12px 32px rgba(16,24,40,.08); transition: border-color .12s, box-shadow .12s; }
.ll-input:focus-within { border-color: rgba(91,9,9,.45); box-shadow: 0 0 0 4px rgba(91,9,9,.07), 0 12px 32px rgba(16,24,40,.08); }
.ll-input textarea { flex: 1; resize: none; min-height: 36px; max-height: 160px; padding: 8px 0; border: none; background: transparent; font: inherit; font-size: 15px; outline: none; line-height: 1.4; }
.ll-send { width: 36px; height: 36px; border-radius: 50%; border: none; background: linear-gradient(135deg, #7a1212, var(--red)); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(91,9,9,.25); flex-shrink: 0; } .ll-send svg { width: 18px; height: 18px; } .ll-send:hover { transform: translateY(-1px); }
.ll-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 12px auto 0; transition: opacity .2s; } .ll-chips.gone { display: none; }
.ll-chip { border: 1px solid #e3e8ef; background: #fff; border-radius: 999px; padding: 8px 14px; font-family: var(--font-body); font-size: 13px; color: var(--ink); cursor: pointer; transition: all .12s; }
.ll-chip:hover { border-color: var(--blue); background: #e8f1fb; color: #1E4E8C; }
.ll-foot { text-align: center; font-size: 11.5px; color: var(--grey-3); margin-top: 10px; }
.dots { display: inline-flex; gap: 4px; vertical-align: middle; padding: 6px 0; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--grey-3); animation: llb 1.2s infinite; } .dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes llb { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.rail-item.rail-laila svg { color: #f7bd01; }

/* Laila identity, shared with the website and the consumer app: "ليلى" in Amiri, the gold Playfair comma as her mark, a mustard disc with ل */
.ll-av { width: 38px; height: 38px; border-radius: 50%; background: var(--mustard, #f7bd01); color: var(--ink); font-family: 'Amiri', serif; font-weight: 700; font-size: 21px; line-height: 1; box-shadow: 0 6px 16px rgba(247,189,1,.35); display: inline-flex; align-items: center; justify-content: center; }
.ll-empty .ll-av { width: 64px; height: 64px; font-size: 34px; border-radius: 50%; margin-bottom: 4px; }
.ll-arname { font-family: 'Amiri', serif; font-weight: 700; font-size: 44px; line-height: 1.15; color: var(--ink); direction: rtl; display: inline-flex; align-items: baseline; gap: 4px; }
.ll-arname .ll-mark { font-size: 30px; margin-top: 0; }
.ll-empty h1 { font-size: 22px; font-weight: 700; color: var(--grey-1); margin-top: -2px; }
.ll-mark { flex: none; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 900; font-size: 26px; line-height: 1; color: var(--mustard, #f7bd01); margin-top: 6px; width: 24px; text-align: center; }
.rail-item .rail-glyph { font-family: 'Amiri', serif; font-weight: 700; font-size: 22px; line-height: 1; color: #f7bd01; }
.rail-item.rail-laila > span:last-child { font-family: 'Amiri', serif; font-weight: 700; font-size: 13px; }
.ll-mark { font-size: 40px; margin-top: -2px; width: 26px; height: 30px; display: inline-flex; align-items: flex-start; justify-content: center; }
.ll-arname .ll-mark { font-size: 44px; height: auto; margin-top: 0; align-items: baseline; }
.rail-item.rail-laila > span:last-child { overflow: visible; text-overflow: clip; white-space: nowrap; font-size: 14px; }

/* Laila entry points: comma mark in the rail, name pill in the top bar; no circle on the page */
.rail-item .rail-mark { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 900; font-size: 30px; line-height: 20px; color: #f7bd01; display: block; height: 22px; }
.rail-item.rail-laila > span:last-child { font-family: 'Amiri', serif; font-weight: 700; font-size: 14px; }
.ai-btn.ai-laila { width: auto; border-radius: 999px; padding: 0 14px 0 10px; gap: 6px; height: 36px; }
.ai-btn.ai-laila .ai-comma { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 900; font-size: 22px; color: #f7bd01; line-height: 1; transform: translateY(-3px); }
.ai-btn.ai-laila .ai-name { font-family: 'Amiri', serif; font-weight: 700; font-size: 17px; color: #fff; transform: none; line-height: 1; }
.ll-empty .ll-av { display: none; }

/* owner picker: sections per branch, role pills by level, counts, indent guides */
.owner-pop .op-sec { font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8b95a5; padding: 10px 8px 4px; }
.owner-pop .op-row[data-depth]:not([data-depth="0"]) { position: relative; }
.owner-pop .op-row[data-depth]:not([data-depth="0"])::before { content: ''; position: absolute; left: calc(var(--d, 1) * 18px - 8px); top: 0; bottom: 0; width: 1px; background: #e6eaf0; }
.owner-pop .op-row[data-depth="1"] { --d: 1; } .owner-pop .op-row[data-depth="2"] { --d: 2; } .owner-pop .op-row[data-depth="3"] { --d: 3; } .owner-pop .op-row[data-depth="4"] { --d: 4; } .owner-pop .op-row[data-depth="5"] { --d: 5; }
.owner-pop .op-role { font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; background: #f1f4f8; color: #5b6676; }
.owner-pop .op-role.r-admin { background: #fdecec; color: #c0392b; }
.owner-pop .op-role.r-head { background: #fff3d6; color: #9a6b00; }
.owner-pop .op-role.r-director { background: #e8f1fb; color: #1E4E8C; }
.owner-pop .op-role.r-group_admin { background: #f1e6f7; color: #5b2a86; }
.owner-pop .op-role.r-manager { background: #e3e9f7; color: #2b4a8a; }
.owner-pop .op-role.r-team_leader { background: #e0f4f1; color: #00695c; }
.owner-pop .op-name.sel .op-role { background: rgba(255,255,255,.7); }
.owner-pop .op-cnt { margin-left: 6px; font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; color: var(--grey-3); background: #f1f4f8; border-radius: 999px; padding: 1px 7px; flex-shrink: 0; }
.owner-pop { min-width: 340px; }
.owner-pop .op-sec { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 8px; }
.owner-pop .op-sec:hover { background: #f7f7f5; }
.owner-pop .op-sec-c { width: 13px; height: 13px; flex: 0 0 auto; transition: transform .15s ease; opacity: .6; }
.owner-pop .op-sec.open .op-sec-c { transform: rotate(90deg); }
.owner-pop .op-sec-t { font: inherit; letter-spacing: inherit; }
.owner-pop .op-sec-n { font-size: 10px; background: #f1f4f8; color: #8b95a5; border-radius: 999px; padding: 1px 6px; letter-spacing: 0; }
.owner-pop .op-sec.here { color: var(--red); } .owner-pop .op-sec.here .op-sec-n { background: var(--red-tint); color: var(--red); }
.owner-pop .op-sec-here { font-size: 9.5px; letter-spacing: .04em; background: var(--mustard-tint); color: #8a6500; border-radius: 999px; padding: 2px 7px; }

/* ===== sign-in screen ===== */
body.lg-open > *:not(#login-root) { display: none !important; }
/* ---------- sign-in: MISFITS x Element final direction (Jun 2026) ---------- */
#login-root { position: fixed; inset: 0; z-index: 500; display: grid; grid-template-columns: minmax(360px, 44%) 1fr; background: #ebebeb; color: #000; overflow: auto; }
.lg-side { position: relative; overflow: hidden; background: #5b0909; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 36px 44px 32px; min-height: 100%; }
.lg-side::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 10px; background: #f7bd01; }
.lg-side-top, .lg-side-bottom { position: relative; z-index: 2; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); display: flex; align-items: center; gap: 12px; }
.lg-dot { width: 4px; height: 4px; border-radius: 50%; background: #f7bd01; display: inline-block; }
.lg-logo { position: relative; z-index: 2; width: min(420px, 82%); height: auto; align-self: flex-start; margin: 24px 0; }
.lg-ghost { position: absolute; z-index: 1; top: -103vh; left: 47%; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 900; font-size: 190vh; line-height: 1; color: #fff; opacity: .08; pointer-events: none; user-select: none; }
.lg-main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 40px; min-height: 100%; }
.lg-main-top { position: absolute; top: 30px; right: 36px; max-width: 260px; text-align: right; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #5b0909; line-height: 1.6; }
.lg-card { width: 100%; max-width: 400px; background: transparent; border-radius: 0; padding: 0; box-shadow: none; }
.lg-card h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 40px; font-weight: 600; letter-spacing: -.01em; line-height: 1.05; margin: 0 0 10px; color: #000; display: flex; align-items: baseline; gap: 2px; }
.lg-mark { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 900; font-size: 44px; line-height: .6; color: #5b0909; }
.lg-lead { margin: 0 0 30px; font-family: var(--font-body); font-size: 15px; color: #373737; line-height: 1.55; } .lg-lead.lg-bad { color: #5b0909; }
.lg-lead b { color: #000; }
.lg-card label { display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #373737; margin-bottom: 18px; }
.lg-in { display: block; width: 100%; margin-top: 8px; height: 50px; border-radius: 4px; border: 1.5px solid #cfcfcf; background: #fff; padding: 0 16px; font-family: var(--font-body); font-size: 15.5px; font-weight: 500; color: #000; letter-spacing: 0; text-transform: none; outline: none; transition: border-color .15s, box-shadow .15s; }
.lg-in::placeholder { color: #979894; font-weight: 400; }
.lg-in:focus { border-color: #5b0909; box-shadow: 0 0 0 3px rgba(91,9,9,.12); }
.lg-btn { width: 100%; height: 52px; border: none; border-radius: 4px; background: #5b0909; color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; margin-top: 6px; transition: background .15s, transform .05s; }
.lg-btn:hover { background: #6e0b0b; } .lg-btn:active { transform: translateY(1px); }
.lg-btn:disabled { opacity: .6; cursor: default; }
.lg-err { min-height: 18px; color: #5b0909; font-family: var(--font-body); font-size: 13px; font-weight: 600; margin: -6px 0 10px; }
.lg-help { margin: 18px 0 0; font-family: var(--font-body); font-size: 13px; color: #6b6b6b; text-align: left; line-height: 1.5; }
.lg-help a { color: #5b0909; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(91,9,9,.25); } .lg-help a:hover { border-bottom-color: #5b0909; }
.lg-foot { position: absolute; right: 36px; bottom: 26px; color: #979894; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
@media (max-width: 860px) {
  #login-root { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .lg-side { min-height: 0; padding: 22px 24px 20px; flex-direction: row; align-items: center; justify-content: space-between; }
  .lg-side::after { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 6px; }
  .lg-side-top { display: none; } .lg-side-bottom { display: none; } .lg-ghost { display: none; }
  .lg-logo { width: 150px; margin: 0; }
  .lg-main { padding: 34px 22px 64px; justify-content: flex-start; }
  .lg-main-top { display: none; } .lg-foot { right: 0; left: 0; text-align: center; bottom: 20px; }
  .lg-card h1 { font-size: 32px; } .lg-mark { font-size: 36px; }
}
.user-pop .up-acts { display: flex; gap: 6px; margin-top: 8px; }

/* kanban: the per-stage cap hint */
.kb-more { border: none; background: rgba(255,255,255,.22); color: inherit; font: inherit; font-weight: 700; padding: 1px 8px; border-radius: 999px; cursor: pointer; }
.kb-more:hover { background: rgba(255,255,255,.38); }
.kb-sentinel { flex: 0 0 1px; height: 1px; width: 100%; }   /* the column observer watches this to draw the next slice of cards */

/* ===== Laila charts: the Insights visual language ===== */
@keyframes lc-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lc-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lc-draw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
.lc-chart { margin: 12px 0 4px; background: #fff; border: 1px solid #e6eaf0; border-radius: 16px; padding: 16px 18px 14px; max-width: 620px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.05); }
.lc-title { font-family: var(--font-ui); font-weight: 800; font-size: 14px; letter-spacing: -.01em; margin-bottom: 12px; }
.lc-note { font-size: 11.5px; color: var(--grey-2); margin-top: 10px; }
.lc-bars { display: flex; flex-direction: column; gap: 7px; }
.lc-bar { display: grid; grid-template-columns: 132px 1fr 66px 38px; align-items: center; gap: 10px; font-size: 12.5px; animation: lc-fade .4s cubic-bezier(.2,.8,.2,1) both; }
.lc-bar .lc-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-family: var(--font-ui); color: var(--grey-1); }
.lc-bar .lc-t { height: 20px; background: #eef2f7; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(23,18,18,.04); }
.lc-bar .lc-t i { display: block; height: 100%; border-radius: 3px; transform-origin: left center; animation: lc-grow-x .6s cubic-bezier(.2,.8,.2,1) both; }
.lc-bar b { text-align: right; font-family: var(--font-ui); font-weight: 800; font-variant-numeric: tabular-nums; }
.lc-bar em { font-style: normal; text-align: right; font-size: 11px; color: var(--grey-3); font-variant-numeric: tabular-nums; }
.lc-svg { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font-ui); }
.lc-grid { stroke: #e6ebf2; stroke-width: 1; shape-rendering: crispEdges; }
.lc-ax { font-size: 10.5px; fill: #7a869a; font-variant-numeric: tabular-nums; }
.lc-line { stroke-dasharray: 1200; animation: lc-draw 1s ease-out both; } .lc-area { animation: lc-fade .6s .3s both; } .lc-dot { animation: lc-fade .4s .5s both; }
.lc-donut-wrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.lc-donut { width: 184px; height: 184px; flex-shrink: 0; }
.lc-slice { animation: lc-fade .5s both; transition: opacity .18s ease, transform .18s ease; transform-box: view-box; transform-origin: 92px 92px; }
.lc-donut:hover .lc-slice { opacity: .4; } .lc-donut .lc-slice:hover { opacity: 1; transform: scale(1.04); }
.lc-total { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.lc-cap { font-size: 9px; fill: var(--grey-3); letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }
.lc-legend { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.lc-li { display: grid; grid-template-columns: 10px 1fr auto 38px; align-items: center; gap: 9px; font-size: 12.5px; animation: lc-fade .4s both; }
.lc-dot2 { width: 10px; height: 10px; border-radius: 3px; }
.lc-ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-ui); font-weight: 600; color: var(--grey-1); }
.lc-lv { font-family: var(--font-ui); font-weight: 800; font-variant-numeric: tabular-nums; }
.lc-lp { text-align: right; font-size: 11px; color: var(--grey-3); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .lc-donut-wrap { justify-content: center; } .lc-bar { grid-template-columns: 100px 1fr 58px 34px; } }
@media (prefers-reduced-motion: reduce) { .lc-slice, .lc-bar, .lc-bar .lc-t i, .lc-line, .lc-area, .lc-dot, .lc-li { animation: none !important; } }

/* deal lock (TCR at Reserved/Contracted) */
.deal-lock { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.14); color: #fff; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; backdrop-filter: blur(4px); } .deal-lock svg { width: 14px; height: 14px; } .deal-lock a { color: inherit; text-decoration: underline; }
.dc-asg.lock { border-color: rgba(91,9,9,.3); color: #5b0909; background: rgba(91,9,9,.05); }

.dc-asg.src { border-color: #dfe3ea; color: #3d4756; background: #fafbfc; } .dc-asg.src.meta { border-color: #c9d6ea; color: #1f4f9a; background: #f3f7fd; } .dc-asg.src.ref { border-color: #d9c7ea; color: #5b2a86; background: #f8f3fc; } .dc-asg.src.data { border-color: #e2c98a; color: #8a6200; background: #fff8e6; } .dc-asg.src.req { border-color: #c4e1cb; color: #2E844A; background: #f1faf3; } .dc-asg.src.web { border-color: #dfe3ea; color: #3d4756; }

.dc-src-block { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
.dc-asg.agency { border-color: #e6eaf0; color: #6b7684; background: #f6f7f9; }

.dc-phone a.wa, .wa-inline { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; color: #25D366; } .dc-phone a.wa svg, .wa-inline svg { width: 15px; height: 15px; } .dc-phone a.wa:hover, .wa-inline:hover { color: #128C7E; }
.dc-phone2 { margin-top: -2px; font-size: 12px; opacity: .85; }

/* offer picker */
.of-search { display: flex; gap: 8px; margin-bottom: 10px; } .of-search .input { flex: 1; }
.of-list { max-height: 340px; overflow: auto; border: 1px solid var(--grey-4); border-radius: 10px; padding: 6px; margin-bottom: 12px; }
.of-row { display: grid; grid-template-columns: 18px 64px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.of-row:hover { background: var(--grey-5); } .of-row.on { background: rgba(91,9,9,.06); box-shadow: inset 0 0 0 1px rgba(91,9,9,.25); }
.of-row img, .of-noimg { width: 64px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--grey-5); display: block; }
.of-txt { display: flex; flex-direction: column; min-width: 0; } .of-txt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .of-txt span { font-size: 12px; color: var(--grey-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-price { font-family: var(--font-ui); font-weight: 700; font-size: 13px; white-space: nowrap; }

/* ===== Insights leaderboard ===== */
.side-item.lb-entry { margin: 0 0 10px; }
.ins-toolbar .vt.lb-by { display: inline-flex; border: 1px solid #e6eaf0; border-radius: 9px; overflow: hidden; background: #fff; }
.ins-toolbar .vt.lb-by { flex: 0 0 auto; }
.ins-toolbar .vt.lb-by button { border: 0; background: #fff; padding: 7px 14px; white-space: nowrap; width: auto; min-width: 0; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--grey-2); cursor: pointer; border-left: 1px solid #eef1f5; }
.ins-toolbar .vt.lb-by button:first-child { border-left: 0; } .ins-toolbar .vt.lb-by button.on { background: #5b0909; color: #fff; }
.lb-wrap { padding: 16px 20px 40px; }
.lb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.lb-kpi { background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.lb-kpi b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; line-height: 1.05; } .lb-kpi b.good { color: #2E844A; }
.lb-kpi span { display: block; font-size: 12px; color: var(--grey-2); margin-top: 4px; } .lb-kpi small { display: block; font-size: 11.5px; color: var(--grey-3); margin-top: 2px; }
.lb-kpi.lead { background: linear-gradient(135deg, #5b0909, #3b0a12); border-color: transparent; } .lb-kpi.lead b { color: #fff; font-size: 20px; } .lb-kpi.lead span { color: rgba(255,255,255,.75); } .lb-kpi.lead small { color: #f7bd01; }
.lb-tablewrap { background: #fff; border: 1px solid #e6eaf0; border-radius: 14px; overflow: auto; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.lb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lb-table th, .lb-table td { padding: 10px 12px; text-align: left; white-space: nowrap; }
.lb-table thead th.st { text-align: center; } .lb-table td.lb-st { text-align: center; }
.lb-table thead th:nth-last-child(-n+6), .lb-table td.lb-won, .lb-table td.lb-val, .lb-table td:nth-last-child(-n+4) { text-align: right; }
.lb-table thead th { position: sticky; top: 0; background: #fafbfc; border-bottom: 1px solid #eef1f5; font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--grey-2); cursor: pointer; z-index: 1; }
.lb-table thead th.on { color: #5b0909; } .lb-table thead th.on::after { content: ' ▾'; } .lb-table thead th.on.asc::after { content: ' ▴'; }
.lb-table thead th.st span { display: inline-block; max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.lb-table tbody tr { border-top: 1px solid #f4f6f8; } .lb-table tbody tr:hover { background: #fafbfc; }
.lb-rk { width: 44px; } .lb-rank { color: var(--grey-3); font-family: var(--font-ui); font-weight: 700; font-size: 12px; }
.lb-medal { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-family: var(--font-ui); font-weight: 800; font-size: 11.5px; color: #4a3a00; }
.lb-medal.g { background: linear-gradient(140deg, #f7d774, #c9a24d); } .lb-medal.s { background: linear-gradient(140deg, #e6e9ee, #b9c0cc); } .lb-medal.b { background: linear-gradient(140deg, #e8b98a, #c08552); color: #fff; }
.lb-who { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; } .lb-who b { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; } .lb-who em { font-style: normal; font-size: 11.5px; color: var(--grey-3); }
.lb-who:hover b { color: #5b0909; }
.lb-team { width: 26px; height: 26px; border-radius: 8px; background: #5b0909; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 800; font-size: 11px; }
.lb-recv { min-width: 120px; } .lb-bar { display: inline-block; width: 62px; height: 7px; background: #eef2f7; border-radius: 999px; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.lb-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5b0909, #b5433a); border-radius: 999px; }
.lb-recv b, .lb-won b { font-family: var(--font-ui); font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 7px; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); font-family: var(--font-ui); font-weight: 800; font-size: 12px; }
.lb-zero { color: #d7dbe2; } .lb-val { font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-rate { font-family: var(--font-ui); font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #f1f3f6; color: var(--grey-2); } .lb-rate.up { background: #eaf7ee; color: #2E844A; } .lb-rate.down { background: #fdecea; color: #c0392b; }
.lb-loading { padding: 40px; text-align: center; }

/* system self-check badge on the Feeds rail entry (App.healthPoll) */
.rail-item[data-health] { position: relative; }
.rail-item[data-health="warn"]::after, .rail-item[data-health="down"]::after { content: ''; position: absolute; top: 5px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--mustard); box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.rail-item[data-health="down"]::after { background: #ff5a4e; animation: railBlink 1.1s infinite; }
@keyframes railBlink { 50% { opacity: .3; } }

/* ---------- lead header (2026-09-15): one calm bar, name and where it stands on the left, money and actions on the right ---------- */
#view .deal-view .view-head.dv-hero { display: flex; align-items: center; gap: 18px; padding: 16px 22px; background: #5b0909; }
#view .deal-view .view-head.dv-hero::after { display: none; }   /* no gradient, no glow: one flat burgundy bar */
#view .deal-view .dv-hero-l { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
#view .deal-view .dv-hero-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
#view .deal-view .dv-back { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: #fff; cursor: pointer; transition: background .15s ease; }
#view .deal-view .dv-back:hover { background: rgba(255,255,255,.2); }
#view .deal-view .dv-back svg { width: 17px; height: 17px; }
#view .deal-view .dv-hero-txt { min-width: 0; }
#view .deal-view .dv-hero .view-title { font-size: 23px; line-height: 1.15; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
#view .deal-view .dv-hero-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; color: rgba(255,255,255,.72); }
#view .deal-view .dv-hero-sub .dot { opacity: .5; }
#view .deal-view .dv-stage-now { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #ffe08a; background: rgba(247,189,1,.16); border: 1px solid rgba(247,189,1,.35); border-radius: 999px; padding: 3px 9px; }
#view .deal-view .dv-hero .dv-value { color: #3f0505; background: linear-gradient(135deg, #ffd23f, #f7bd01); font-family: var(--font-ui); font-weight: 800; font-size: 16px; border-radius: 999px; padding: 8px 16px; box-shadow: 0 6px 18px rgba(247,189,1,.32); cursor: text; }
#view .deal-view .dv-hero .dv-owner { display: inline-flex; align-items: center; gap: 7px; color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 4px 13px 4px 5px; font-size: 12.5px; max-width: 200px; }
#view .deal-view .dv-hero .dv-owner-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .deal-view .dv-hero .btn { border-radius: 11px; height: 36px; }
#view .deal-view .dv-hero .btn-danger { background: #c0392b; border: 0; color: #fff; font-weight: 700; }
#view .deal-view .dv-hero .btn-danger:hover { background: #a93226; }
#view .deal-view .dv-hero .dv-ico { width: 36px; padding: 0; display: grid; place-items: center; }
#view .deal-view .dv-hero .deal-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #ffe08a; background: rgba(247,189,1,.14); border: 1px solid rgba(247,189,1,.34); border-radius: 999px; padding: 6px 12px; }
#view .deal-view .dv-hero .deal-lock a { color: #fff; text-decoration: underline; }
#view .deal-view .dv-hero .chip { background: rgba(255,255,255,.14); color: #fff; border: 0; }
@media (max-width: 1100px) {
  #view .deal-view .dv-hero { flex-wrap: wrap; gap: 12px; }
  #view .deal-view .dv-hero .view-title { max-width: 70vw; font-size: 20px; }
  #view .deal-view .dv-hero .dv-owner { display: none; }
}

/* the client's name carries the header: a quiet initials disc, the name in tight display type, the project beside it */
#view .deal-view .dv-face { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(140deg, rgba(247,189,1,.22), rgba(247,189,1,.08)); border: 1px solid rgba(247,189,1,.34); color: #ffdc7a; font-family: var(--font-ui); font-weight: 800; font-size: 15px; letter-spacing: .02em; }
#view .deal-view .dv-hero .view-title { display: flex; align-items: baseline; gap: 0; font-size: 24px; }
#view .deal-view .dv-hero .view-title .ie { display: inline-flex; align-items: baseline; gap: 9px; border-radius: 10px; }
#view .deal-view .dv-hero .view-title .ie:hover { background: rgba(255,255,255,.10); box-shadow: none; }
#view .deal-view .dv-name { font-family: var(--font-display, var(--font-ui)); font-weight: 800; letter-spacing: -.025em; color: #fff; }
#view .deal-view .dv-sep { color: rgba(255,255,255,.34); font-size: 18px; transform: translateY(-2px); }
#view .deal-view .dv-proj { font-family: var(--font-ui); font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: rgba(255,255,255,.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
@media (max-width: 1100px) { #view .deal-view .dv-face { display: none; } #view .deal-view .dv-proj { max-width: 40vw; font-size: 14px; } }