@font-face { font-family:"Recoleta"; src:url("/vendor/fonts/Recoleta-Medium.woff2") format("woff2");
    font-weight:500; font-display:swap; }
  :root { --font-recoleta:"Recoleta", Georgia, serif; --bg:#191308; --card:#221a0e; --tile:#2a2113; --line:rgba(252,252,250,.10); --line-hi:rgba(252,252,250,.22);
    --ivory:#fcfcfa; --orange:#ff4801; --jade:#35d68a; --amber:#f0b429;
    --pink:#e58bb0; --muted:rgba(252,252,250,.62); --faint:rgba(252,252,250,.42);
    --sent:#6b4a52; }
  html { background:var(--bg); }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--ivory); visibility:hidden; min-height:100vh;
    font-family:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    background-image:radial-gradient(1200px 500px at 12% -10%, rgba(255,72,1,.10), transparent 70%); }

  header { display:flex; align-items:center; gap:16px; padding:0 22px; height:58px;
    border-bottom:1px solid var(--line); background:rgba(25,19,8,.6); position:sticky; top:0; z-index:5; backdrop-filter:blur(8px); }
  header .div { width:1px; height:16px; background:rgba(252,252,250,.18); }
  header .crumb { font-size:12.5px; font-weight:500; color:var(--muted); }
  header a.crumb { text-decoration:none; }
  header a.crumb:hover { color:var(--ivory); }
  header .spacer { flex:1; }
  header .who { font-size:12.5px; color:var(--faint); }
  header button { background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:999px;
    padding:6px 13px; font:inherit; font-size:12px; cursor:pointer; }
  header button:hover { border-color:var(--line-hi); color:var(--ivory); }

  /* Sub-menu across the CRM's pages. */
  nav { display:flex; gap:4px; padding:12px 22px 0; border-bottom:1px solid var(--line); background:rgba(25,19,8,.35); }
  nav a { text-decoration:none; color:var(--muted); font-size:13.5px; font-weight:500; padding:9px 15px 12px;
    border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
  nav a:hover { color:var(--ivory); }
  nav a[aria-current="page"] { color:var(--ivory); border-bottom-color:var(--orange); }
  nav .count { display:inline-block; margin-left:7px; font-size:11px; font-weight:700; padding:2px 7px;
    border-radius:999px; background:rgba(255,72,1,.16); color:var(--orange); font-variant-numeric:tabular-nums; }

  main { padding:22px; max-width:1600px; margin:0 auto; }
  h1 { font-size:23px; letter-spacing:-.4px; margin:0 0 3px; font-weight:600; }
  .sub { font-size:13.5px; color:var(--muted); margin:0 0 20px; }

  .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px; align-items:start; }
  .queue { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
  .queue > h2 { font-size:14px; font-weight:600; margin:0; padding:15px 18px; border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .queue > h2 .n { font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px;
    background:rgba(255,72,1,.16); color:var(--orange); font-variant-numeric:tabular-nums; }
  .queue > h2 .n.zero { background:rgba(53,214,138,.14); color:var(--jade); }
  .rows { max-height:60vh; overflow-y:auto; }
  .row { padding:13px 18px; border-bottom:1px solid rgba(252,252,250,.06); }
  .row:last-child { border-bottom:0; }
  .row .top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .row .name { font-size:14px; font-weight:600; letter-spacing:-.1px; }
  .row .age { font-size:11.5px; color:var(--faint); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .row .meta { font-size:12px; color:var(--muted); margin-top:3px; }
  .row .acts { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
  .row .acts button { background:var(--tile); border:1px solid var(--line); color:var(--muted); border-radius:8px;
    padding:6px 11px; font:inherit; font-size:12px; cursor:pointer; }
  .row .acts button:hover, .row .acts a.btn:hover { border-color:var(--line-hi); color:var(--ivory); }
  .row .acts a.btn { background:var(--tile); border:1px solid rgba(255,72,1,.45); color:var(--orange);
    border-radius:8px; padding:6px 11px; font-size:12px; text-decoration:none; }
  .row .acts a.btn:hover { background:rgba(255,72,1,.14); color:var(--orange); }
  .row .acts button.good:hover { border-color:var(--jade); color:var(--jade); }
  .row .acts button.bad:hover { border-color:var(--orange); color:var(--orange); }
  .empty { padding:34px 18px; text-align:center; color:var(--jade); font-size:13.5px; }
  .empty .big { font-size:26px; display:block; margin-bottom:8px; opacity:.8; }

  table { width:100%; border-collapse:collapse; font-size:13px; }
  th { text-align:left; font-size:11px; letter-spacing:.9px; text-transform:uppercase; color:var(--faint);
    font-weight:600; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
  td { padding:11px 14px; border-bottom:1px solid rgba(252,252,250,.06); font-variant-numeric:tabular-nums; }
  tr:last-child td { border-bottom:0; }
  .num { text-align:right; }
  .panel { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:16px; }
  .panel h2 { font-size:14px; font-weight:600; margin:0; padding:15px 18px; border-bottom:1px solid var(--line); }
  /* A panel body. Tables deliberately run edge-to-edge inside .scroll; everything else needs air,
     and without this a chart's axis labels sit hard against the panel border. */
  .pbody { padding:16px 18px 18px; }
  .pbody > :first-child { margin-top:0; }
  .pbody > :last-child { margin-bottom:0; }
  /* When a heading shares its row with a control, the ROW owns the padding and the rule beneath it.
     Left on the h2, the border-bottom stops at the width of the text and reads as a broken underline. */
  .panelhead { border-bottom:1px solid var(--line); padding:13px 18px; }
  .panelhead h2 { padding:0; border-bottom:0; }
  .panelhead .note { margin:2px 0 0; }
  .scroll { overflow-x:auto; }
  .note { font-size:12px; color:var(--faint); padding:12px 18px; border-top:1px solid var(--line); }
  .loading { color:var(--faint); font-size:13.5px; padding:30px 18px; }

  /* Figures are set in Recoleta and tabular, so columns of numbers line up and read as data. */
  .fig { font-family:var(--font-recoleta); letter-spacing:-1px; font-variant-numeric:tabular-nums; }
  .lbl { font-size:10.5px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--faint); }

  /* Charts. The SVG scales to its box; everything inside is in viewBox units. */
  .chart { width:100%; height:auto; display:block; }
  .chart .axis { fill:var(--faint); font-size:11px; }
  .legend { display:flex; gap:16px; align-items:center; font-size:12px; color:var(--muted); }
  .legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
  .legend .ln { display:inline-block; width:14px; height:2px; background:var(--ivory); margin-right:6px; vertical-align:3px; }
  .panelhead { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  /* The three supporting panels read as a row under the main chart rather than a tall column beside
     it: stacked, they were twice its height and left a dead half-screen of empty card next to them. */
  .trio { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:stretch; }
  .trio .panel { margin-bottom:0; display:flex; flex-direction:column; }
  .trio .panel .pbody { flex:1; }
  @media (max-width:1100px) { .trio { grid-template-columns:1fr; } }

  /* Dials: the two conversion rates side by side, which is the point of the panel. */
  .dials { display:flex; gap:22px; justify-content:center; }
  .dial { text-align:center; width:150px; }
  .dial svg { width:130px; height:130px; }
  .dial .dialnum { fill:var(--ivory); font-size:30px; font-family:var(--font-recoleta); }
  .diallab { font-size:12.5px; margin-top:2px; }
  .dialsub { font-size:11px; color:var(--faint); }

  /* Meters: one row per month, filled part is what came back signed. */
  .meter { background:rgba(252,252,250,.07); border-radius:5px; height:16px; overflow:hidden; }
  .meter span { display:block; height:100%; border-radius:5px; }
  .meterrow { display:grid; grid-template-columns:70px 1fr auto auto; gap:14px; align-items:center;
    padding:5px 0; font-size:12.5px; }
  .meterrow .mlab { color:var(--muted); }
  .meterrow .mval { color:var(--muted); font-variant-numeric:tabular-nums; }
  .meterrow .mpct { width:54px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
  .split { display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; }
  @media (max-width:1040px) { .split { grid-template-columns:1fr; } }

  /* Two-bar comparison (expected against actual). */
  .cmprow { display:flex; justify-content:space-between; font-size:12.5px; margin:10px 0 5px; }
  .cmprow b { font-variant-numeric:tabular-nums; }

  .seg { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
  .seg button { background:none; border:0; color:var(--muted); font:inherit; font-size:12px;
    padding:5px 13px; cursor:pointer; }
  .seg button[aria-pressed="true"] { background:var(--orange); color:#fff; font-weight:600; }

  .tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin-bottom:16px; }
  .tile { background:rgba(252,252,250,.035); border:1px solid var(--line); border-radius:16px; padding:15px 17px 16px; }
  .tile.accent { background:rgba(255,72,1,.09); border-color:rgba(255,72,1,.32); }
  .tile .pill { font-size:10.5px; font-weight:600; letter-spacing:.7px; text-transform:uppercase;
    color:var(--orange); background:rgba(255,72,1,.16); padding:2px 7px; border-radius:999px; }
  .tile .pill.j { color:var(--jade); background:rgba(53,214,138,.16); }
  .tile .name { font-size:11.5px; color:var(--muted); }
  .tile .val { font-size:32px; line-height:36px; margin-top:9px; }
  .tile .delta { font-size:11.5px; font-weight:600; margin-left:8px; }
  .tile .up { color:var(--jade); } .tile .down { color:var(--orange); } .tile .flat { color:var(--faint); }
  .tile .foot { font-size:11px; color:var(--faint); margin-top:5px; }

  /* Cohort funnel: bar heights are proportional to the count, so the drop-off is the shape. */
  .funnel { display:grid; align-items:end; gap:0; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr) 92px;
    padding:18px 20px 20px; overflow-x:auto; }
  .fstage { display:flex; flex-direction:column; align-items:center; gap:9px; min-width:78px; }
  .fstage .barwrap { height:190px; display:flex; align-items:flex-end; width:100%; }
  .fstage .bar { width:100%; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,72,1,.22); border:1px solid rgba(255,72,1,.34); min-height:26px; }
  .fstage .bar span { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
  .fstage .nm { font-size:12px; color:rgba(252,252,250,.80); text-align:center; }
  .conv { display:flex; flex-direction:column; align-items:center; gap:2px; padding-bottom:34px; }
  .conv .pct { font-size:30px; line-height:32px; color:var(--orange); }
  .conv .d { font-size:11px; color:var(--faint); }

  select { background:var(--tile); color:var(--ivory); border:1px solid var(--line); border-radius:9px;
    padding:7px 10px; font:inherit; font-size:13px; cursor:pointer; }
  .titlerow { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:20px; }
  .titlerow h1, .titlerow .sub { margin:0; }
  .period { display:flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:3px; background:rgba(252,252,250,.03); }
  .period button { border:none; background:transparent; color:var(--muted); font:inherit; font-size:12.5px;
    font-weight:500; padding:6px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; }
  .period button:hover { color:var(--ivory); }
  .period button[aria-pressed="true"] { background:rgba(255,72,1,.16); color:var(--orange); font-weight:600; }
  .warnbar { background:rgba(240,180,41,.10); border:1px solid rgba(240,180,41,.30); color:var(--amber);
    border-radius:12px; padding:11px 15px; font-size:12.5px; margin-bottom:16px; }
  .msg { margin:11px 0 0; padding:12px 14px; background:rgba(252,252,250,.04); border:1px solid var(--line);
    border-radius:10px; font:inherit; font-size:12.5px; line-height:19px; color:var(--muted);
    white-space:pre-wrap; word-break:break-word; max-height:280px; overflow-y:auto; }
  .toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--tile);
    border:1px solid var(--line-hi); border-radius:10px; padding:11px 16px; font-size:13px; z-index:20; }

  /* ---- Records: split client records awaiting a decision ---- */
  .rec { border:1px solid var(--line); border-radius:10px; margin-bottom:14px; overflow:hidden; }
  .rechead { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px;
    background:var(--tile); border-bottom:1px solid var(--line); }
  .recname { font-family:var(--font-recoleta); font-size:18px; flex:1 1 auto; min-width:160px; }
  .recmeta { font-size:12px; color:var(--faint); }
  .recacts { display:flex; gap:8px; }
  .recrows { display:grid; }
  .recrow { display:grid; grid-template-columns:22px 62px 1fr 140px 150px 150px; gap:12px;
    align-items:baseline; padding:11px 14px; cursor:pointer; }
  .recrow + .recrow { border-top:1px dashed var(--line); }
  .recrow:hover { background:rgba(252,252,250,.03); }
  .recrow.isempty { opacity:.55; }
  .recrow input { margin:0; accent-color:var(--orange); align-self:center; }
  .recrow .rid { font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums; }
  .recrow .rname { display:block; font-size:14px; }
  .recrow .rsub { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; word-break:break-word; }
  .recrow .rchan, .recrow .rstage, .recrow .rdeal { font-size:12px; color:var(--muted); }
  .recrow .rdeal { font-size:11px; word-break:break-all; }
  .recrow .rstage.win { color:var(--jade); }
  .recrow .dead { color:var(--faint); }
  .recwhy { padding:10px 14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); }
  .recwhy b { color:var(--ivory); }
  .recerr { display:inline-block; margin-left:10px; font-size:12px; color:var(--orange); }
  @media (max-width:820px) {
    .recrow { grid-template-columns:22px 1fr; gap:4px 12px; }
    .recrow .rid { grid-column:2; }
  }

  .recfields { padding:11px 14px; border-top:1px dashed var(--line); display:flex;
    flex-wrap:wrap; gap:8px 22px; align-items:baseline; }
  .reclabel { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
    width:100%; }
  .recfield { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; }
  .recfield .fname { font-size:12px; color:var(--muted); min-width:112px; }
  .fopt { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; cursor:pointer; }
  .fopt input { margin:0; accent-color:var(--orange); }

  .recresult { padding:12px 14px; border-top:1px solid var(--line); background:rgba(53,214,138,.05); }
  .recresult .reclabel { color:var(--jade); margin-bottom:6px; display:block; }
  .resline { display:flex; flex-wrap:wrap; gap:4px 18px; align-items:baseline; }
  .resline + .resline { margin-top:4px; }
  .resline .rname { font-size:14px; font-weight:500; }
  .resline .rsub, .resline .rchan, .resline .rstage, .resline .rdeal { font-size:12.5px; color:var(--muted); }
  .resline .rstage.win { color:var(--jade); }

  .period .dates { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 4px 2px;
    width:100%; }
  .period .dates[hidden] { display:none; }
  .period .dates label { display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
    color:var(--muted); }
  .period .dates input[type="date"] { background:var(--tile); color:var(--ivory);
    border:1px solid var(--line-hi); border-radius:7px; padding:5px 8px; font:inherit; font-size:13px;
    color-scheme:dark; }
  .period .dates input[type="date"]:focus-visible { outline:2px solid var(--orange); outline-offset:1px; }
  .period .apply { border-color:var(--line-hi); }
  .period .perr { font-size:12px; color:var(--orange); }

  nav a.adminlink { margin-left:auto; color:var(--muted); }
  nav a.adminlink[hidden] { display:none; }

  /* ---- By channel: the funnel walked one channel at a time ---- */
  h2 .h2sub { font-weight:400; font-size:12.5px; color:var(--muted); margin-left:10px; }
  table.chan th { white-space:nowrap; }
  table.chan td { vertical-align:middle; }
  table.chan .chname { min-width:170px; }
  table.chan .chname span { display:block; font-size:14px; }
  table.chan .chname .dead { color:var(--faint); }
  table.chan .vol { display:block; height:3px; margin-top:6px; background:var(--line);
    border-radius:2px; overflow:hidden; max-width:170px; }
  table.chan .vol i { display:block; height:100%; background:var(--orange); opacity:.7; }
  table.chan .step { line-height:1.15; }
  table.chan .pct { font-family:var(--font-recoleta); font-size:21px; display:block;
    font-variant-numeric:tabular-nums; }
  table.chan .pct.best { color:var(--orange); }
  table.chan .pct.weak { color:var(--pink); }
  table.chan .pct.dfn { color:var(--faint); }
  table.chan .dys { font-size:11.5px; color:var(--faint); display:block; margin-top:2px;
    font-variant-numeric:tabular-nums; }
  table.chan .totalrow td { border-top:1px solid var(--line-hi); }
  table.chan .totalrow .chname span { font-size:11px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--muted); }
  table.chan .totalrow .pct { color:var(--ivory); }

  /* ---- Sales velocity: the conversion strip, read for time ---- */
  /* 18px is the panel's gutter — h2 and .note both use it, so anything that does not sit visibly
     out of line with them. */
  .velo { display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:18px 18px 10px; }
  .velo .stop { display:flex; flex-direction:column; align-items:center; gap:8px; flex:none;
    width:104px; text-align:center; }
  .velo .dot { width:11px; height:11px; border-radius:50%; background:var(--tile);
    border:2px solid var(--line-hi); margin-top:13px; }
  .velo .dot.done { background:var(--orange); border-color:var(--orange); }
  .velo .stopname { font-size:12px; color:var(--muted); line-height:1.25; }
  .velo .leg { flex:1 1 0; min-width:64px; display:flex; flex-direction:column; align-items:center;
    gap:5px; padding-top:8px; }
  .velo .legbar { height:6px; border-radius:3px; background:linear-gradient(90deg,
    rgba(255,72,1,.35), rgba(255,72,1,.85)); align-self:stretch; }
  .velo .legdays { font-family:var(--font-recoleta); font-size:16px; font-variant-numeric:tabular-nums; }
  .velo .legn { font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
  .velototal { display:flex; align-items:baseline; gap:6px 14px; flex-wrap:wrap;
    padding:18px; border-top:1px solid var(--line); }
  /* line-height 1 so the serif's ascenders do not add slack above the figure and push it out of
     line with the sentence beside it. */
  .velototal .vt { font-family:var(--font-recoleta); font-size:27px; line-height:1; color:var(--orange);
    font-variant-numeric:tabular-nums; }
  .velototal .vl { font-size:13.5px; color:var(--muted); }
  @media (max-width:720px) { .velo .stop { width:78px; } .velo .stopname { font-size:11px; } }

  .autobar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 16px;
    margin-bottom:16px; border:1px solid rgba(53,214,138,.32); background:rgba(53,214,138,.07);
    border-radius:12px; }
  .autobar div { flex:1 1 380px; }
  .autobar b { display:block; font-size:14px; }
  .autobar span { display:block; font-size:12.5px; color:var(--muted); margin-top:3px; }
  .autobar button { border-color:rgba(53,214,138,.45); color:var(--jade); }
  .rec.settled { border-color:rgba(53,214,138,.22); }
  .rec.settled .rechead { background:rgba(53,214,138,.05); }