/* The CRM look (Mohamed, 2026-10-22: design/crm-reference/README.md): the shadcn admin shell (sidebar + 64px header,
   neutral tokens, rounded-lg cards, 1px borders, muted text, focus rings) and the dark "bento" dashboard tiles, in plain
   CSS. Loaded last: it re-points the brand tokens used by base.css / crm.css, so every page shares one look.
   Accents: Intellectual Ballers red = main accent (hot, primary, the solid tile) · lime = positive / money · lilac =
   the second series. Dark is the default (theme-boot.js); light is supported. Mono + tabular numbers for big values. */

/* ---------------------------------------------------------------- tokens: dark (default) */
:root[data-theme] {
  color-scheme: dark;
  --radius: 10px;
  --tile-radius: 22px;
  --f-head: 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --bg: #09090b;          /* background */
  --paper: #111113;       /* card */
  --paper-2: #18181b;     /* muted surface */
  --ink: #fafafa;         /* foreground */
  --ink-2: #d4d4d8;
  --muted: #a1a1aa;       /* muted-foreground */
  --line: rgba(255, 255, 255, 0.09);   /* border */
  --line-strong: rgba(255, 255, 255, 0.16);
  --ring: rgba(255, 255, 255, 0.35);
  --hover: rgba(255, 255, 255, 0.06);
  --track: rgba(255, 255, 255, 0.1);
  --dash: rgba(255, 255, 255, 0.22);
  --on-ink: #09090b;
  --shadow: none;
  --card-shadow: 0 0 0 1px var(--line);
  --frame-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line);
  --panel: #18181b; --panel-line: var(--line);

  --red: #fe0000; --red-btn: #e00000; --red-hover: #c80000;
  --red-ink: #ff5a5a; --red-soft: rgba(254, 0, 0, 0.14);
  --lime: #c6f24e; --lime-ink: #c6f24e; --lime-soft: rgba(198, 242, 78, 0.14); --on-lime: #0d1302;
  --lilac: #b8a2f0; --lilac-ink: #c6b5f5; --lilac-soft: rgba(184, 162, 240, 0.16);
  --green: var(--lime); --green-ink: var(--lime-ink); --green-soft: var(--lime-soft);
  --yellow: #ffd60a;

  --pill-good-bg: var(--lime-soft); --pill-good-fg: var(--lime-ink);
  --pill-mid-bg: rgba(255, 255, 255, 0.08); --pill-mid-fg: #d4d4d8;
  --pill-bad-bg: var(--red-soft); --pill-bad-fg: var(--red-ink);
  --tag-risky-bg: rgba(255, 214, 10, 0.13); --tag-risky-fg: #ffd60a;
  --st-new-bg: rgba(255, 255, 255, 0.08); --st-new-fg: #fafafa;
  --st-contacted-bg: var(--lilac-soft); --st-contacted-fg: var(--lilac-ink);
  --st-booked-bg: var(--red-soft); --st-booked-fg: var(--red-ink);
  --st-call_done-bg: rgba(255, 214, 10, 0.12); --st-call_done-fg: #ffd60a;
  --st-client-bg: var(--lime-soft); --st-client-fg: var(--lime-ink);
  --st-not_a_fit-bg: rgba(255, 255, 255, 0.05); --st-not_a_fit-fg: #71717a;
  --bar: #e4e4e7; --bar-soft: rgba(255, 255, 255, 0.07); --today: var(--red);
  --hot-bg: var(--red); --hot-fg: #fff; --warm-bg: #ffd60a; --warm-fg: #1a1500;
  --cold-bg: rgba(255, 255, 255, 0.08); --cold-fg: #d4d4d8; --dq-bg: rgba(255, 255, 255, 0.05); --dq-fg: #71717a;
  --top-bg: rgba(9, 9, 11, 0.8);
  --sidebar-bg: #0c0c0e;
  --glass: rgba(24, 24, 27, 0.72);
}
/* ---------------------------------------------------------------- tokens: light */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa; --paper: #ffffff; --paper-2: #f4f4f5;
  --ink: #09090b; --ink-2: #3f3f46; --muted: #71717a;
  --line: #e4e4e7; --line-strong: #d4d4d8; --ring: rgba(9, 9, 11, 0.35);
  --hover: rgba(9, 9, 11, 0.045); --track: rgba(9, 9, 11, 0.08); --dash: rgba(9, 9, 11, 0.2);
  --on-ink: #ffffff;
  --card-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(9, 9, 11, 0.04);
  --frame-shadow: 0 16px 40px -18px rgba(9, 9, 11, 0.25), 0 0 0 1px var(--line);
  --panel: #18181b;
  --red-ink: #d40000; --red-soft: #fff0f0;
  --lime: #b5e03a; --lime-ink: #3f6212; --lime-soft: #f0fbd5; --on-lime: #1a2600;
  --lilac: #9b7fe6; --lilac-ink: #6d4fc7; --lilac-soft: #f1ecfd;
  --pill-mid-bg: #f4f4f5; --pill-mid-fg: #3f3f46;
  --tag-risky-bg: #fff7d1; --tag-risky-fg: #7a5b00;
  --st-new-bg: #f4f4f5; --st-new-fg: #18181b;
  --st-call_done-bg: #fff7d1; --st-call_done-fg: #7a5b00;
  --st-not_a_fit-bg: #f4f4f5; --st-not_a_fit-fg: #71717a;
  --bar: #27272a; --bar-soft: rgba(9, 9, 11, 0.06);
  --warm-bg: #ffd60a;
  --cold-bg: #f4f4f5; --cold-fg: #3f3f46; --dq-bg: #f4f4f5; --dq-fg: #71717a;
  --top-bg: rgba(250, 250, 250, 0.82);
  --sidebar-bg: #f4f4f5;
  --glass: rgba(255, 255, 255, 0.78);
}

body { background: var(--bg); font: 400 14px/1.5 var(--f-body); letter-spacing: -0.003em; }
body::before { display: none; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.mono, .kpi__value, .pipe__count, .sfun__n, .split__n, .bars__n, .fn-n, .worst__pct, .td-num, .score b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------------------------------------------------------------- buttons (shadcn: default / outline / ghost / icon) */
.btn { min-height: 36px; padding: 8px 14px; border-radius: 8px; font: 600 13.5px/1.2 var(--f-body); letter-spacing: 0; gap: 6px; }
.btn--sm { min-height: 32px; padding: 6px 12px; font-size: 13px; }
.btn--big { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.btn--primary { background: var(--red-btn); color: #fff; }
.btn--primary:hover { background: var(--red-hover); }
.btn--ghost { background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink); }
@media (hover: hover) { .btn--ghost:hover { background: var(--hover); color: var(--ink); } }
.btn--text { min-height: 32px; padding: 6px 10px; background: transparent; color: var(--ink-2); text-decoration: none; font-weight: 500; border-radius: 8px; }
.btn--text:hover { background: var(--hover); color: var(--ink); }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; color: var(--ink-2); }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn .icon { width: 18px; height: 18px; }
.linkish { font: 500 13px var(--f-body); color: var(--muted); }
.linkish:hover { color: var(--ink); text-decoration: none; }
.chip-btn { min-height: 30px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: 500 12.5px var(--f-body); }
.chip-btn:hover { color: var(--ink); border-color: var(--dash); }
.chip-btn.is-on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* inputs */
.select, .search__input, .notes, .input, .cc__search { border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; font: 400 13.5px var(--f-body); color: var(--ink); }
.select { min-height: 36px; padding: 6px 10px; }
.search__input { min-height: 36px; padding: 6px 12px 6px 36px; }
.search__icon { left: 11px; width: 16px; height: 16px; }
.input { min-height: 40px; padding: 8px 12px; font-size: 14px; border-radius: 8px; }
.input--sm { min-height: 40px; font-size: 14px; }
.select:focus, .search__input:focus, .notes:focus, .input:focus { border-color: var(--dash); box-shadow: 0 0 0 3px var(--hover); }
.filter__label, .editor__label, .contact__label, .kpi__label, .prio__label, .call__facts dt, .brief__facts dt { font: 500 11.5px var(--f-body); letter-spacing: 0.01em; text-transform: none; color: var(--muted); }
.field__label { font: 500 13px var(--f-body); }

/* badges / pills */
.pill, .mini-tag, .flag, .route, .due, .support, .score { font-family: var(--f-body); font-weight: 500; letter-spacing: 0; text-transform: none; }
.pill { padding: 2px 9px; font-size: 12px; border: 1px solid transparent; }
.mini-tag, .flag, .route { border-radius: 6px; font-size: 11.5px; padding: 1px 7px; }
.mini-tag--src { border: 1px solid var(--line-strong); }
.flag--priority { background: var(--lime-soft); color: var(--lime-ink); }
.route--call { background: var(--red-soft); color: var(--red-ink); }
.score { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.04em; font-weight: 600; }
.demo-tag { font-family: var(--f-body); }

/* cards */
.card, .calls, .kpi, .d-card, .prio, .tpl, .tcard, .brief, .gate__card, table.leads, table.fn { border-radius: var(--radius); box-shadow: var(--card-shadow); background: var(--paper); }
.card { padding: 18px 20px; }
.card__title { font: 600 15px/1.3 var(--f-body); letter-spacing: -0.01em; }
.card__meta { color: var(--muted); font-size: 12.5px; }
.view-title { font: 600 24px/1.2 var(--f-body); letter-spacing: -0.025em; }
.view-sub { color: var(--muted); font-size: 13.5px; }
.d-sec__title { font: 600 16px var(--f-body); border-bottom: 1px solid var(--line); }
.res-block__title, .ans-sec__title, .fn-sec th, .bottleneck__label { font: 600 11.5px var(--f-body) !important; letter-spacing: 0.06em; }
.calls { border-top: 0; }
.calls__title { font: 600 16px var(--f-body); }
.call { background: var(--paper-2); border-color: var(--line); border-radius: var(--radius); }
.call__name, .kcard__name, .cell-player__name, .latest__name, .tpl__name, .work__title, .prio__title, .drawer__title, .brief__name, .attempts__when { font-family: var(--f-body); font-weight: 600; letter-spacing: -0.01em; }
.drawer__title { font-size: 22px; }
.kpi { border-left: 0; padding: 16px 18px; gap: 6px; }
.kpi__value { font-size: 26px; font-weight: 600; }
.kpi--accent { box-shadow: 0 0 0 1px var(--line); }
.bottleneck { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); }
.bottleneck__text { font: 400 16px/1.5 var(--f-body); }
.bottleneck__trade { color: var(--muted); }
.d-card + .d-card { margin-top: 10px; }
.drawer { background: var(--bg); border-left: 1px solid var(--line); }
.drawer__head { background: var(--bg); }
.drawer-backdrop { background: rgba(0, 0, 0, 0.55); }
.toast { border-radius: 10px; font: 500 13.5px var(--f-body); background: var(--paper-2); color: var(--ink); box-shadow: var(--frame-shadow); }
.toast--error { background: var(--red-btn); color: #fff; }
table.leads th, table.fn thead th { font: 500 12px var(--f-body); letter-spacing: 0; text-transform: none; background: var(--paper); }
.lead-row:hover td { background: var(--hover); }
.lead-row.is-selected td { background: var(--red-soft); }
.tab { display: none; } /* the sidebar replaces the old tabs */
.kcol { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; }
.kcard { border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.timeline__item--call_outcome::before, .timeline__item--booking::before { border-color: var(--red); background: var(--red); }
.timeline__item--submit::before { border-color: var(--lime); background: var(--lime); }
.sfun__step:last-child .sfun__bar span { background: var(--lime); }
.bars__fill { background: var(--ink-2); }
.chart__bar { fill: var(--ink-2); }
.demo-banner { background: var(--yellow); color: #1a1500; font-size: 12.5px; padding: 6px 16px; position: static; }

/* ================================================================ the shell: sidebar + inset */
.shell { display: grid; grid-template-columns: var(--sb-w, 248px) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns 0.25s var(--ease); }
.shell.is-collapsed { --sb-w: 60px; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; background: var(--sidebar-bg); border-right: 1px solid var(--line); overflow: hidden; z-index: 35; }
.sb__brand { display: flex; align-items: center; gap: 10px; padding: 6px 6px 14px; text-decoration: none; color: var(--ink); min-width: 0; }
.sb__logo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--red); color: #fff; font: 800 13px var(--f-body); letter-spacing: -0.04em; }
.sb__name { display: grid; line-height: 1.15; min-width: 0; white-space: nowrap; }
.sb__name b { font: 600 14px var(--f-body); }
.sb__name span { font-size: 11.5px; color: var(--muted); }
.sb__group { margin-top: 10px; padding: 0 8px 4px; font: 500 11.5px var(--f-body); color: var(--muted); white-space: nowrap; }
.sb__link { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font: 500 13.5px var(--f-body); white-space: nowrap; }
.sb__link:hover { background: var(--hover); color: var(--ink); }
.sb__link.is-on { background: var(--paper-2); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.sb__link.is-on::before { content: ''; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red); }
.sb__link .icon { width: 18px; height: 18px; flex: none; }
.sb__count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--hover); font: 500 11.5px/20px var(--f-mono); text-align: center; color: var(--ink-2); }
.sb__count--hot { background: var(--red); color: #fff; }
.sb__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 6px 4px; border-top: 1px solid var(--line); min-width: 0; }
.sb__foot .sb__who { display: grid; min-width: 0; font-size: 12.5px; line-height: 1.3; }
.sb__foot .sb__who span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell.is-collapsed .sb__name, .shell.is-collapsed .sb__group, .shell.is-collapsed .sb__label, .shell.is-collapsed .sb__count, .shell.is-collapsed .sb__who { display: none; }
.shell.is-collapsed .sb__link { justify-content: center; padding: 0; }
.shell.is-collapsed .sb__group { height: 8px; }
.avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lilac-soft); color: var(--lilac-ink); font: 600 12px var(--f-body); border: 1px solid var(--line); }
.inset { min-width: 0; display: flex; flex-direction: column; }
.hdr { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 20px; background: var(--top-bg); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); border-bottom: 1px solid var(--line); }
.hdr__sep { width: 1px; height: 18px; background: var(--line-strong); }
.hdr__title { display: grid; line-height: 1.2; min-width: 0; }
.hdr__title b { font: 600 15px var(--f-body); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr__title span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hdr__end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.hdr .sync { font: 400 12px var(--f-body); margin-right: 6px; display: inline; }
.bell { position: relative; }
.bell__n { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--red); color: #fff; font: 600 10px/16px var(--f-mono); text-align: center; }
.main { max-width: 1440px; width: 100%; margin: 0; padding: 22px 24px 80px; }
.sb-backdrop { display: none; }

/* popovers: bell + search */
.pop { position: fixed; z-index: 70; top: 60px; right: 16px; width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto; padding: 6px; border-radius: 12px; background: var(--paper); box-shadow: var(--frame-shadow); animation: pop-in 0.18s var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.pop__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; font: 600 13.5px var(--f-body); }
.pop__item { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pop__item:hover, .pop__item.is-active { background: var(--hover); }
.pop__item small { display: block; color: var(--muted); font-size: 12px; }
.pop__empty { padding: 18px 10px; color: var(--muted); text-align: center; }
.cmd { position: fixed; inset: 0; z-index: 75; display: grid; place-items: start center; padding-top: 12vh; background: rgba(0, 0, 0, 0.5); }
.cmd__box { width: min(560px, calc(100vw - 24px)); border-radius: 12px; background: var(--paper); box-shadow: var(--frame-shadow); overflow: hidden; animation: pop-in 0.18s var(--ease); }
.cmd__input { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 400 15px var(--f-body); outline: none; }
.cmd__list { max-height: 50vh; overflow: auto; padding: 6px; }
.kbd { font: 500 11px var(--f-mono); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-strong); color: var(--muted); }

/* ================================================================ bento dashboard */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.stat { padding: 16px 18px; border-radius: var(--radius); background: var(--paper); box-shadow: var(--card-shadow); display: grid; gap: 4px; }
.stat__top { display: flex; justify-content: space-between; align-items: center; font: 500 13px var(--f-body); color: var(--ink-2); }
.stat__top .icon { width: 16px; height: 16px; color: var(--muted); }
.stat__value { font: 600 26px/1.15 var(--f-mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat__hint { font-size: 12px; color: var(--muted); }
.up { color: var(--lime-ink); }
.down { color: var(--red-ink); }
.tile { position: relative; overflow: hidden; padding: 18px 20px; border-radius: var(--tile-radius); background: var(--paper); border: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; gap: 10px; animation: tile-in 0.7s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes tile-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
.tile--2 { grid-column: span 2; }
.tile--r2 { grid-row: span 2; }
.tile__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.tile__title { font: 500 13px var(--f-body); color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.tile__title .icon { width: 15px; height: 15px; }
.tile__big { font: 600 44px/1 var(--f-mono); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.tile__big--md { font-size: 34px; }
.tile__sub { font-size: 12.5px; color: var(--muted); }
.tile__sub b { color: var(--ink); font-weight: 600; }
.pills { display: inline-flex; padding: 2px; gap: 2px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); }
.pills button { border: 0; background: none; color: var(--muted); font: 500 11.5px var(--f-body); padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.pills button.is-on { background: var(--ink); color: var(--on-ink); }
.pill-stat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 600 11.5px var(--f-mono); background: var(--lime-soft); color: var(--lime-ink); }
.pill-stat--bad { background: var(--red-soft); color: var(--red-ink); }

/* hero */
.hero { justify-content: space-between; min-height: 230px; }
.hero__top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.hero__greet { font: 600 26px/1.15 var(--f-body); letter-spacing: -0.03em; max-width: 14em; }
.hero__greet em { font-style: normal; color: var(--red-ink); }
.hero__value { text-align: right; }
.hero__value .tile__big { font-size: 46px; }
.dbars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 74px; }
.dbars__b { flex: 1; min-width: 2px; border-radius: 3px 3px 1px 1px; background: var(--lilac); opacity: 0.85; transition: opacity 0.2s, transform 0.2s var(--ease); transform-origin: bottom; animation: grow 0.9s var(--ease) both; animation-delay: calc(var(--j, 0) * 18ms); cursor: default; }
.dbars__b.is-up { background: var(--red); }
.dbars__b.is-zero { background: var(--track); }
.dbars:hover .dbars__b { opacity: 0.35; }
.dbars .dbars__b:hover { opacity: 1; }
@keyframes grow { from { transform: scaleY(0); } }
.dbars__tip { position: absolute; top: -30px; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: var(--ink); color: var(--on-ink); font: 500 11.5px var(--f-mono); white-space: nowrap; pointer-events: none; }
.dbars__legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }

/* card stack */
.stack { position: relative; flex: 1; min-height: 250px; }
.stack__card { position: absolute; left: 0; right: 0; height: 128px; padding: 10px 16px; border-radius: 16px; border: 1px solid var(--line-strong); color: #fff; cursor: pointer; overflow: hidden; transition: transform 0.5s var(--ease), top 0.5s var(--ease), opacity 0.3s; text-align: left; font: inherit;
  background: linear-gradient(135deg, #2a0b0b 0%, #5c0000 45%, #1d1d22 100%); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7); }
.stack__card:nth-child(2n) { background: linear-gradient(135deg, #1d1530 0%, #3b2a66 50%, #17171c 100%); }
.stack__card:nth-child(3n) { background: linear-gradient(135deg, #10160a 0%, #34480e 50%, #17171c 100%); }
.stack__card::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.13) 50%, transparent 60%); animation: glare 6s linear infinite; pointer-events: none; }
@keyframes glare { from { transform: translateX(-30%); } to { transform: translateX(30%); } }
.stack__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stack__name { font: 600 16px var(--f-body); }
.stack__score { font: 600 22px var(--f-mono); letter-spacing: -0.04em; }
.stack__meta { margin-top: 18px; font: 500 12px var(--f-mono); opacity: 0.8; letter-spacing: 0.08em; }
.stack__weak { margin-top: 4px; font-size: 12.5px; opacity: 0.85; }
.stack__panel { position: relative; z-index: 20; margin-top: auto; padding: 10px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; gap: 8px; }
.stack__panel p { font-size: 12.5px; color: var(--ink-2); }
.stack__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.stack__acts .act { padding: 5px 9px; font: 500 12px var(--f-body); }

/* gauge */
.gauge { display: grid; place-items: center; gap: 4px; flex: 1; }
.gauge svg { width: 100%; max-width: 210px; height: auto; overflow: visible; }
.gauge__arc { fill: none; stroke: var(--track); stroke-width: 14; stroke-linecap: round; }
.gauge__val { fill: none; stroke: var(--lime); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.gauge__needle { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; transition: transform 1.2s var(--ease); transform-origin: 100px 100px; }
.gauge__hub { fill: var(--ink); }
.gauge__num { font: 600 34px var(--f-mono); letter-spacing: -0.04em; margin-top: -8px; }

/* big chart */
.lchart { position: relative; flex: 1; min-height: 230px; }
.lchart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lchart__grid { stroke: var(--line); stroke-dasharray: 3 4; }
.lchart__tick { fill: var(--muted); font: 400 10.5px var(--f-mono); }
.lchart__a { fill: none; stroke: var(--red); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.lchart__b { fill: none; stroke: var(--lilac); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.lchart__fill { stroke: none; }
.lchart__x { stroke: var(--dash); stroke-width: 1; }
.lchart__dot { stroke: var(--paper); stroke-width: 2; }
.lchart__tip { position: absolute; top: 4px; padding: 6px 9px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); font: 500 12px var(--f-body); pointer-events: none; white-space: nowrap; box-shadow: var(--frame-shadow); }
.lchart__tip b { font-family: var(--f-mono); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend__line { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--red); margin-right: 6px; vertical-align: 3px; }
.legend__line--dash { border-top: 2px dashed var(--lilac); }

/* segmented bar */
.segbar { display: flex; gap: 4px; height: 14px; }
.segbar span { border-radius: 99px; min-width: 6px; transition: flex-grow 0.8s var(--ease); }
.seglegend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.seglegend div { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.seglegend b { font: 600 13px var(--f-mono); color: var(--ink); }

/* the solid accent tile: next call */
.tile--solid { background: var(--red); border-color: transparent; color: #fff; }
.tile--solid .tile__title, .tile--solid .tile__sub { color: rgba(255, 255, 255, 0.82); }
.tile--solid .tile__sub b { color: #fff; }
.nextcall__count { font: 600 38px/1 var(--f-mono); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.nextcall__who { font: 600 15px var(--f-body); }
.obars { display: flex; align-items: flex-end; gap: 4px; height: 38px; }
.obars span { flex: 1; border-radius: 3px; background: rgba(255, 255, 255, 0.35); }
.obars span.is-won { background: #fff; }
.obars span.is-lost { background: rgba(0, 0, 0, 0.35); }
.tile--solid .btn { background: #0b0b0c; color: #fff; border: 0; }
.tile--solid .btn:hover { background: #1f1f23; }

/* range: speed to lead */
.rangebar { position: relative; height: 26px; border-radius: 99px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.rangebar__band { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--lime-soft) 0 6px, transparent 6px 11px); border-left: 1px solid var(--lime); border-right: 1px solid var(--lime); }
.rangebar__mark { position: absolute; top: 3px; bottom: 3px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--ink); transition: left 1.1s var(--ease); }
.rangebar__ticks { display: flex; justify-content: space-between; font: 400 10.5px var(--f-mono); color: var(--muted); }
.badge-ok { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font: 600 11.5px var(--f-body); background: var(--lime-soft); color: var(--lime-ink); }
.badge-ok::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-bad { background: var(--red-soft); color: var(--red-ink); }

/* stream */
.stream { display: flex; align-items: flex-end; gap: 3px; height: 70px; overflow: hidden; }
.stream span { flex: 1 1 6px; max-width: 10px; border-radius: 2px; background: var(--ink-2); opacity: 0.55; animation: grow 0.8s var(--ease) both; animation-delay: calc(var(--j, 0) * 15ms); }
.stream span.is-new { background: var(--red); opacity: 1; }
.stream span.is-hot { opacity: 0.9; }
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.statrow div { display: grid; gap: 1px; }
.statrow span { font-size: 11.5px; color: var(--muted); }
.statrow b { font: 600 16px var(--f-mono); letter-spacing: -0.03em; }

/* activity */
.acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.acts li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; }
.acts__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2); }
.acts__ico .icon { width: 15px; height: 15px; }
.acts__ico--won { background: var(--lime-soft); color: var(--lime-ink); border-color: transparent; }
.acts__ico--hot { background: var(--red-soft); color: var(--red-ink); border-color: transparent; }
.acts__t { font-size: 13px; line-height: 1.3; min-width: 0; }
.acts__t b { font-weight: 600; }
.acts__t small { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acts__v { font: 500 12px var(--f-mono); color: var(--muted); white-space: nowrap; }

/* template-1 cards under the bento */
.cards2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.plist li { display: grid; gap: 6px; }
.plist__top { display: flex; align-items: center; gap: 8px; }
.plist__n { margin-left: auto; font: 600 13px var(--f-mono); }
.plist__pct { font: 400 12px var(--f-mono); color: var(--muted); width: 38px; text-align: right; }
.progress { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: 99px; background: var(--ink); transform-origin: left; animation: growx 1s var(--ease) both; }
.progress--client span { background: var(--lime); }
.progress--booked span { background: var(--red); }
.progress--contacted span { background: var(--lilac); }
@keyframes growx { from { transform: scaleX(0); } }
.dash-more { margin-top: 12px; }
.cards2--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.revenue-card__row { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: 8px; }
.revenue-card__row .stat__value { font-size: 30px; }
.stat__value.muted { color: var(--muted); }

/* team: assignment chips, purchases, the sale sheet, the leaderboard */
.avatar--sm { width: 24px; height: 24px; font-size: 10.5px; }
.avatar--setter { background: var(--lilac-soft); color: var(--lilac-ink); }
.avatar--closer { background: var(--lime-soft); color: var(--lime-ink); }
.assigns { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.assign { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); background: var(--paper); }
.assign--me { border-color: var(--line-strong); }
.assign--free { padding: 3px 10px; border-style: dashed; color: var(--muted); cursor: pointer; font: 500 12px var(--f-body); background: transparent; }
.assign--free:hover { color: var(--ink); border-color: var(--dash); border-style: solid; }
.assigns--compact .assign { padding: 0; border: 0; background: none; }
.assigns--compact .assign--free { padding: 2px 8px; border: 1px dashed var(--line-strong); }
.assign__x, .assign__take { border: 0; background: none; color: var(--muted); cursor: pointer; font: 500 12px var(--f-body); padding: 0 2px; }
.assign__x:hover, .assign__take:hover { color: var(--ink); }
.assign__take { text-decoration: underline; text-underline-offset: 2px; }
.call .assigns { margin-top: -2px; }
.purchases { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.purchases li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); }
.purchases__amt { font: 600 15px var(--f-mono); color: var(--lime-ink); }
.purchases__what small { display: block; color: var(--muted); font-size: 12px; }
.purchases__btns { display: flex; gap: 2px; }
.sheet-wrap { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.55); }
.sheet { width: min(520px, 100%); display: grid; gap: 12px; padding: 20px; border-radius: 14px; background: var(--paper); box-shadow: var(--frame-shadow); animation: pop-in 0.2s var(--ease); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; }
.sheet__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet .select { max-width: none; width: 100%; }
.leaderboard tr.is-me td { background: var(--hover); }
.lb-who { display: flex; align-items: center; gap: 10px; }
.lb-who small { display: block; color: var(--muted); font-size: 12px; }
.lb-rank { width: 18px; color: var(--muted); }
.lb-rev { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.lb-bar { width: 70px; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; display: inline-block; }
.lb-bar span { display: block; height: 100%; background: var(--lime); border-radius: 99px; }
@media (max-width: 640px) { .sheet__grid, .cards2--even { grid-template-columns: minmax(0, 1fr); } .purchases li { grid-template-columns: 80px minmax(0, 1fr); } .purchases__btns { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  .tile, .dbars__b, .stream span, .progress span, .stack__card::after, .pop, .cmd__box { animation: none !important; }
  .stack__card, .gauge__val, .gauge__needle, .rangebar__mark, .shell { transition: none !important; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1200px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; transform: translateX(-102%); transition: transform 0.28s var(--ease); z-index: 60; }
  .shell.is-open .sidebar { transform: none; box-shadow: var(--frame-shadow); }
  .shell.is-open .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.5); }
  .shell.is-collapsed .sb__name, .shell.is-collapsed .sb__group, .shell.is-collapsed .sb__label, .shell.is-collapsed .sb__count, .shell.is-collapsed .sb__who { display: revert; }
  .shell.is-collapsed .sb__link { justify-content: flex-start; padding: 0 10px; }
  .hdr { padding: 0 12px; gap: 6px; }
  .hdr .sync, .hdr__sep { display: none; }
  .main { padding: 16px 14px 70px; }
}
@media (max-width: 640px) {
  .bento, .stat-row { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 12px 14px; }
  .stat__value { font-size: 22px; }
  .tile--2 { grid-column: auto; }
  .tile--r2 { grid-row: auto; }
  .tile__big { font-size: 38px; }
  .hero__value { text-align: left; }
  .hdr__title span { display: none; }
  .hdr__end .theme-btn, .hdr__end .btn--text { display: none; }
}
.owners { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.owner-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; }
/* the leads table fits a laptop: tighter cells, clipped long emails, the team column on one line */
table.leads td { padding: 10px 8px; }
table.leads th { padding: 10px 8px; }
.cell-contact { max-width: 210px; }
.cell-contact__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.td-prio { max-width: 150px; }
.td-owner .assigns { flex-wrap: nowrap; gap: 4px; }
.td-owner .assign--free { padding: 1px 7px; font-size: 11.5px; }
@media (max-width: 1360px) { table.leads td[data-label='Level'], table.leads th:nth-child(5) { display: none; } }

/* ================= growth pack (0010) ================= */
.waits { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wait { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 6px; font: 600 11.5px/1.6 var(--f-mono); background: var(--tag-risky-bg); color: var(--tag-risky-fg); white-space: nowrap; }
.wait--late { background: var(--red); color: #fff; animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: 0.72; } }
.cell-player .waits { margin-top: 4px; }
.tcard__tpl { font-size: 12.5px; color: var(--muted); font-style: italic; max-width: 70ch; }
.checklist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.checklist li label { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.checklist li label:hover { background: var(--hover); }
.checklist input { width: 16px; height: 16px; accent-color: var(--lime); flex: none; }
.checklist small { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.checklist li.is-done span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--dash); }
.checklist li.is-late span { color: var(--red-ink); font-weight: 600; }
.checklist--compact li label { padding: 3px 4px; font-size: 12.5px; }
.clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.client { display: grid; gap: 8px; align-content: start; }
.client .card__head { margin-bottom: 0; }
.cnote { margin-top: 12px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-2); display: grid; gap: 8px; }
.cnote__meta { font-size: 12px; color: var(--muted); }
.cnote__sum { display: grid; gap: 8px; }
.btn.is-rec { border-color: var(--red); color: var(--red-ink); animation: pulse 1.4s var(--ease) infinite; }
.tgts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.tgts--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tgt { display: grid; gap: 5px; }
.tgt__top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.tgt__top .mono { font-size: 12.5px; color: var(--ink); }
.tgt__bar { position: relative; overflow: visible; }
.tgt__bar > span { border-radius: 99px; }
.tgt__pace { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: 0.6; }
.tgt .tile__sub { font-size: 11.5px; }
.tgt-grid { display: grid; grid-template-columns: 140px repeat(4, minmax(0, 1fr)); gap: 8px 12px; align-items: end; padding: 10px 0; border-top: 1px solid var(--line); }
.tgt-grid:first-of-type { border-top: 0; }
.tgt-grid > b { font-weight: 600; font-size: 13px; padding-bottom: 8px; }
.tgt-grid .select { max-width: none; width: 100%; }
.ob-edit { display: grid; gap: 8px; }
.lb-targets td { background: var(--paper-2); padding: 10px 14px 14px !important; }
.select--sm { min-height: 30px; padding: 3px 8px; font-size: 12.5px; }
table.games td { vertical-align: middle; }
@media (max-width: 860px) {
  .tgts--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tgt-grid { grid-template-columns: 1fr 1fr; }
  .tgt-grid > b { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (max-width: 640px) { .tgts { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .wait--late, .btn.is-rec { animation: none; } }
/* cards in lists never push past a phone screen */
.tlist { grid-template-columns: minmax(0, 1fr); }
.tcard, .tcard__main { min-width: 0; }
.tcard__what, .tcard__tpl { overflow-wrap: anywhere; }
.tcard__btns { flex-wrap: wrap; }
@media (max-width: 640px) { .tcard__btns .btn--text { padding: 6px 8px; } }

/* ================= conversion pack (0012) ================= */
.flag--parent { background: var(--lilac-soft); color: var(--lilac-ink); }
.flag--back { background: var(--tag-risky-bg); color: var(--tag-risky-fg); }
.winloss__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 24px; }
.bars__fill--good { background: var(--lime); }
.mini-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini-table th { text-align: left; font: 500 11.5px var(--f-body); color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.mini-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mini-table--wide td:nth-child(4) { font-size: 12px; }
.mini-table tr.is-changed td { background: var(--hover); }
.factor + .factor { margin-top: 12px; }
.collecting { margin-bottom: 12px; display: grid; gap: 10px; border-left: 4px solid var(--yellow); }
.ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.idea { display: grid; gap: 10px; align-content: start; }
.idea__top { display: flex; align-items: center; gap: 8px; }
.idea__stat { font: 600 17px/1.35 var(--f-body); letter-spacing: -0.01em; }
.idea__hook { font: 400 15px/1.45 var(--f-serif); color: var(--ink-2); }
.idea .btn { justify-self: start; }
@media (max-width: 1100px) { .winloss__grid { grid-template-columns: minmax(0, 1fr); } }

/* v2.1 (team meeting): the report was seen but no contact left yet; a country guessed from the time zone */
.flag--nocontact { background: var(--hover); color: var(--muted); border: 1px dashed var(--dash); }
.flag-emoji.is-guess { opacity: .75; }
.today__nocontact { margin: -4px 0 14px; }

/* ================= the lead's journey (0017): Quiz ✓ · Game ✓ 1/3 → 3/3 · Skool soon ================= */
.journey { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 500 12px/1.5 var(--f-body); color: var(--muted); }
.journey--sm { display: flex; gap: 1px 3px; margin-top: 3px; font-size: 11px; } /* wraps between steps, never inside one */
.journey--sm .journey__step + .journey__step::before { margin-right: 2px; }
.journey--sm .journey__soon { border: 0; padding: 0 0 0 1px; font-size: 9.5px; }
.journey__step { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: var(--muted); text-decoration: none; }
.journey__step.is-done { color: var(--ink-2, var(--ink)); }
.journey__step.is-done .journey__mark { color: var(--lime-ink); font-weight: 700; }
.journey__step.is-soon { opacity: .55; }
.journey__soon { font: 500 10px/1.4 var(--f-body); padding: 0 5px; border: 1px dashed var(--dash, var(--line)); border-radius: 999px; }
.journey__detail { font-size: .95em; color: var(--ink-2, var(--ink)); }
.journey__step + .journey__step::before { content: '·'; margin-right: 3px; color: var(--muted); opacity: .6; } /* a wrapped line never ends on a dot */
a.journey__link:hover, a.journey__link:focus-visible { text-decoration: underline; }
.flag--both { background: var(--lilac-soft); color: var(--lilac-ink); }
.drawer__journey { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cell-journey { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.games__filter { margin: 0 0 12px; }
.cell-journey .btn { white-space: nowrap; }

/* Tap targets (round A, 2026-10-25): on phones and touch screens the small inline controls get a 44 x 44 px hit area
   without changing how they look (an invisible ::after around them): unassign ×, Take over, + Set / + Close, the alert
   badge actions, the journey chips, Edit templates, and the template / purchase buttons. */
@media (max-width: 860px), (pointer: coarse) {
  .assign__x, .assign__take, .assign--free, .ab__act, a.journey__link, .dm-bar__edit, .tpl__btns .btn, .purchases__btns .btn {
    position: relative; touch-action: manipulation;
  }
  .assign__x::after, .assign__take::after, .assign--free::after, .ab__act::after, a.journey__link::after, .dm-bar__edit::after,
  .tpl__btns .btn::after, .purchases__btns .btn::after {
    content: ''; position: absolute;
    top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px));
    left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px));
  }
  .assign__x { min-width: 24px; font-size: 16px; }
  .assigns { gap: 10px; }
  .tpl__btns, .purchases__btns { gap: 8px; }
  .tpl__btns .btn, .purchases__btns .btn { min-height: 44px; }
}