*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --sidebar-w: 220px;
      --sidebar-bg: #0c0c0f;
      --sidebar-border: rgba(255,255,255,0.06);
      --sidebar-text: rgba(255,255,255,0.5);
      --sidebar-text-active: #ffffff;
      --sidebar-hover: rgba(255,255,255,0.04);
      --sidebar-active: rgba(255,255,255,0.08);

      --bg: #f5f5f7;
      --bg-white: #ffffff;
      --bg-hover: #f0f0f3;
      --bg-input: #f0f0f3;
      --bg-elevated: #ffffff;

      --border: #e8e8ec;
      --border-light: #f0f0f3;
      --border-focus: var(--accent);

      /* Skeleton loading shimmer — deliberately darker than the border greys
         so the operator can actually tell the dashboard is loading. Base is a
         clear mid-grey; shine is the lighter band that sweeps across it. */
      --skel-base: #d6d6dd;
      --skel-shine: #e9e9ef;

      --accent: #2E5BFF;
      --accent-hover: #2148d0;
      --accent-bg: rgba(46,91,255,0.06);
      --accent-bg-2: rgba(46,91,255,0.1);

      --text: #0f0f12;
      --text-secondary: #52525b;
      --text-muted: #a1a1aa;

      --green: #10b981;
      --green-bg: rgba(16,185,129,0.08);
      --red: #ef4444;
      --red-bg: rgba(239,68,68,0.08);
      --yellow: #f59e0b;
      --yellow-bg: rgba(245,158,11,0.08);
      --blue: #2E5BFF;
      --blue-bg: rgba(46,91,255,0.08);
      --purple: #8b5cf6;
      --purple-bg: rgba(139,92,246,0.08);
      --orange: #f97316;
      --orange-bg: rgba(249,115,22,0.08);

      --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
      --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
      --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);

      --radius: 10px;
      --radius-lg: 14px;
      --radius-xl: 18px;

      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-out: cubic-bezier(0, 0, 0.2, 1);

      /* ── Type scale ── */
      --fs-2xs: 11px;
      --fs-xs: 11px;
      --fs-sm: 11px;
      --fs-base: 12px;
      --fs-md: 13px;
      --fs-lg: 14px;
      --fs-xl: 22px;

      /* ── Radius scale (extends --radius / --radius-lg / --radius-xl) ── */
      --radius-xs: 4px;
      --radius-sm: 6px;
      --radius-md: 8px;
      --radius-pill: 999px;
    }
    html,body{height:100%;overscroll-behavior-x:none}
    body{font-family:'DM Sans',system-ui,sans-serif;font-size:var(--fs-lg);color:var(--text);background:var(--bg);overflow:hidden;max-width:100vw;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
    /* ── Focus visible ring (WCAG 2.1 AA) ── */
    :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-xs)}
    /* Role-based visibility */
    .admin-only{display:none}
    body.role-admin .admin-only{display:block}
    body.role-admin .admin-only-flex{display:flex}
    body.role-client .admin-only{display:none !important}
    body.role-client .hide-for-client{display:none !important}
    .shell{display:flex;height:100vh}

    /* ── SIDEBAR ── */
    .sidebar{
      width:var(--sidebar-w);
      min-width:var(--sidebar-w);
      background:var(--sidebar-bg);
      border-right:1px solid var(--sidebar-border);
      display:flex;
      flex-direction:column;
      padding:0 0 12px;
      z-index:50;
      transition:width 0.22s cubic-bezier(0.4,0,0.2,1), min-width 0.22s cubic-bezier(0.4,0,0.2,1);
    }
    .sidebar.collapsed{width:64px;min-width:64px}
    .sidebar.collapsed .s-logo{justify-content:center;padding:0;gap:0}
    .sidebar.collapsed .s-logo-text{display:none}
    .sidebar.collapsed .s-logo-mark{display:inline-block}
    .sidebar.collapsed .s-collapse-top{display:none}
    .sidebar.collapsed .s-btn{justify-content:center;padding:0;gap:0}
    .sidebar.collapsed .s-btn-label{display:none}
    .sidebar.collapsed .s-btn.active::before{display:none}
    .sidebar.collapsed .s-nav{padding:0 8px}
    .sidebar.collapsed .s-bottom{padding-left:8px;padding-right:8px}
    .sidebar.collapsed #sAdminBadge,
    .sidebar.collapsed .s-profile-row,
    .sidebar.collapsed #logoutBtnLabel{display:none}
    .sidebar.collapsed .s-profile-row-collapsed{display:flex !important}
    /* Tooltips on icons in collapsed mode */
    .sidebar.collapsed .s-btn{position:relative}
    .sidebar.collapsed .s-btn::after{
      content:attr(data-tip);
      position:absolute;
      left:calc(100% + 12px);
      top:50%;
      transform:translateY(-50%) translateX(-6px);
      background:rgba(12,12,15,0.96);
      color:#fff;
      padding:5px 10px;
      font-size:var(--fs-sm);
      font-weight:600;
      border-radius:var(--radius-sm);
      white-space:nowrap;
      opacity:0;
      pointer-events:none;
      transition:opacity 0.12s, transform 0.12s;
      z-index:100;
      box-shadow:0 4px 14px rgba(0,0,0,0.2);
    }
    .sidebar.collapsed .s-btn:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}

    .s-collapse-top{
      display:flex;align-items:center;justify-content:center;
      width:28px;height:28px;margin-left:auto;
      background:transparent;border:none;cursor:pointer;
      color:rgba(255,255,255,0.4);
      border-radius:7px;
      transition:all .15s;
    }
    .s-collapse-top:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9)}
    .s-collapse-top svg{width:15px;height:15px}
    .sidebar.collapsed .s-collapse-top{margin-left:0}
    .s-profile-row-collapsed{display:none;justify-content:center;padding:8px 0}
    .s-profile-row-collapsed .s-profile-ph,
    .s-profile-row-collapsed .s-profile{width:30px;height:30px}
    /* Settings button in bottom sidebar — styled like nav button */
    .s-settings-btn{margin-bottom:10px;padding:8px 10px !important;height:auto !important}
    .s-logo{
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 16px;
      height:56px;
      margin-bottom:16px;
      border-bottom:1px solid var(--sidebar-border);
      cursor:default;
    }
    .s-logo-mark{
      display:none;
      font-family:'DM Sans',system-ui,sans-serif;
      font-weight:900;
      font-size:var(--fs-xl);
      line-height:1;
      letter-spacing:-0.02em;
      color:var(--sidebar-text-active);
      font-variation-settings:'opsz' 40,'wght' 900;
      cursor:pointer;
    }
    .s-logo-mark .wm-dot{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:#7c9dff;margin-left:0.02em}
    .s-logo-text{
      font-family:'DM Sans',system-ui,sans-serif;
      font-weight:900;
      font-size:var(--fs-xl);
      line-height:1;
      color:var(--sidebar-text-active);
      letter-spacing:-0.02em;
      font-variation-settings:'opsz' 40,'wght' 900;
    }
    .s-logo-text .wm-dot{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:#7c9dff;margin:0 0.025em 0 0.04em}
    .s-logo-text .wm-ai{font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-weight:400;color:#7c9dff;letter-spacing:-0.01em;margin-left:-0.06em}
    .s-nav{
      flex:1;
      display:flex;
      flex-direction:column;
      gap:2px;
      width:100%;
      padding:0 10px;
    }
    .s-btn{
      width:100%;
      height:38px;
      border-radius:9px;
      border:none;
      background:none;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 10px;
      cursor:pointer;
      color:var(--sidebar-text);
      transition:background 0.15s var(--ease), color 0.15s var(--ease);
      position:relative;
      text-align:left;
      font-family:inherit;
    }
    .s-btn:hover{background:var(--sidebar-hover);color:rgba(255,255,255,0.75)}
    .s-btn.active{background:var(--sidebar-active);color:var(--sidebar-text-active)}
    .s-btn.active::before{
      content:'';
      position:absolute;
      left:0;
      top:50%;
      transform:translateY(-50%);
      width:2px;
      height:18px;
      border-radius:0 2px 2px 0;
      background:var(--accent);
    }
    .s-btn svg{width:18px;height:18px;flex-shrink:0;stroke-width:1.5}
    .s-btn-label{font-size:var(--fs-md);font-weight:500;letter-spacing:-0.01em}
    /* Migration 026 — Manual nav count badge. Goes to the right of the label,
       red dot when > 0. Hidden in collapsed sidebar (CSS rule below). */
    .s-btn-count{
      margin-left:auto;
      min-width:18px;height:18px;padding:0 6px;
      border-radius:9px;background:rgba(239,68,68,0.85);color:#fff;
      font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
      display:inline-flex;align-items:center;justify-content:center;
      box-shadow:0 0 0 2px rgba(239,68,68,0.18);
    }
    .sidebar.collapsed .s-btn-count{
      position:absolute;top:4px;right:6px;margin:0;
      min-width:14px;height:14px;padding:0 4px;font-size:var(--fs-2xs);
    }
    .s-bottom{
      padding:10px 10px 0;
      display:flex;
      flex-direction:column;
      gap:6px;
      position:relative;
      border-top:1px solid var(--sidebar-border);
      margin-top:4px;
      padding-top:12px;
    }
    .s-profile{
      width:32px;height:32px;border-radius:50%;
      border:1.5px solid rgba(255,255,255,0.15);
      cursor:pointer;object-fit:cover;
      transition:border-color 0.15s;
      flex-shrink:0;
    }
    .s-profile:hover{border-color:rgba(255,255,255,0.4)}
    .s-profile-ph{
      width:32px;height:32px;border-radius:50%;
      border:1.5px solid rgba(255,255,255,0.15);
      display:flex;align-items:center;justify-content:center;
      font-size:var(--fs-base);font-weight:700;
      color:var(--sidebar-text-active);
      cursor:pointer;
      background:rgba(46,91,255,0.2);
      transition:border-color 0.15s;
      flex-shrink:0;
    }
    .s-profile-ph:hover{border-color:rgba(255,255,255,0.4)}
    .s-profile-row{
      display:flex;align-items:center;gap:10px;
      padding:7px 8px;border-radius:9px;
      cursor:pointer;
      transition:background 0.15s var(--ease);
    }
    .s-profile-row:hover{background:var(--sidebar-hover)}
    .s-profile-name{
      font-size:var(--fs-base);font-weight:600;
      color:var(--sidebar-text-active);
      line-height:1.2;white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis;max-width:130px;
    }
    .s-profile-handle{
      font-size:var(--fs-sm);color:var(--sidebar-text);
      white-space:nowrap;overflow:hidden;
      text-overflow:ellipsis;max-width:130px;
    }

    /* Account dropdown — dark to match sidebar.
       Capped height + internal scroll (Part 6, 2026-07-23): with 12+ accounts
       and growing, an unbounded list ran off the top of the viewport. Search
       input is sticky at the top, results scroll below it. */
    .acct-dd{
      display:none;
      flex-direction:column;
      position:absolute;
      bottom:calc(100% + 8px);
      left:10px;right:10px;
      max-height:min(60vh,420px);
      background:#18181c;
      border:1px solid rgba(255,255,255,0.08);
      border-radius:12px;
      padding:6px;
      box-shadow:0 16px 48px rgba(0,0,0,0.4);
      z-index:200;
    }
    .acct-dd.open{display:flex}
    .acct-dd-search{
      flex-shrink:0;
      width:100%;
      box-sizing:border-box;
      padding:8px 10px;
      margin-bottom:6px;
      border-radius:var(--radius-md);
      border:1px solid rgba(255,255,255,0.1);
      background:rgba(255,255,255,0.04);
      color:var(--sidebar-text-active);
      font-size:var(--fs-base);
      font-family:inherit;
    }
    .acct-dd-search::placeholder{color:rgba(255,255,255,0.35)}
    .acct-dd-search:focus{outline:none;border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.06)}
    .acct-dd-list{overflow-y:auto;min-height:0;flex:1}
    .acct-dd-divider{
      padding:8px 10px 4px;
      font-size:var(--fs-2xs);
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.04em;
      color:rgba(255,255,255,0.35);
    }
    .acct-dd-empty{
      padding:16px 10px;
      text-align:center;
      color:rgba(255,255,255,0.4);
      font-size:var(--fs-sm);
    }
    .acct-dd-item{
      display:flex;align-items:center;gap:10px;
      padding:8px 10px;border-radius:var(--radius-md);
      cursor:pointer;font-size:var(--fs-base);font-weight:500;
      color:var(--sidebar-text);
      transition:background 0.12s, color 0.12s;
    }
    .acct-dd-item:hover{background:var(--sidebar-hover);color:var(--sidebar-text-active)}
    .acct-dd-item.active{background:var(--sidebar-active);color:var(--sidebar-text-active);font-weight:600}
    .acct-dd-pic{
      width:26px;height:26px;border-radius:50%;
      object-fit:cover;
      border:1px solid rgba(255,255,255,0.1);
      flex-shrink:0;
    }
    .acct-dd-pic-ph{
      width:26px;height:26px;border-radius:50%;
      background:rgba(46,91,255,0.2);
      border:1px solid rgba(255,255,255,0.1);
      display:flex;align-items:center;justify-content:center;
      font-size:var(--fs-xs);font-weight:700;
      color:var(--sidebar-text-active);
      flex-shrink:0;
    }
    .acct-dd-name{flex:1;overflow:hidden}
    .acct-dd-handle{
      font-size:var(--fs-base);font-weight:600;
      color:var(--sidebar-text-active);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .acct-dd-ig{
      font-size:var(--fs-sm);color:var(--sidebar-text);
      font-weight:400;white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis;
    }

    /* ── MAIN CONTENT ── */
    .main{flex:1;overflow-y:auto;overflow-x:hidden;padding:0;display:flex;flex-direction:column;min-width:0;scrollbar-gutter:stable}
    .main > .page{padding:24px 36px 32px}
    .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
    .ph-title{font-size:var(--fs-xl);font-weight:700;letter-spacing:-0.025em;color:var(--text)}
    .ph-sub{font-size:var(--fs-base);color:var(--text-muted);margin-top:3px;font-weight:400}
    .ph-acct{font-size:var(--fs-md);color:var(--accent);font-weight:600;margin-top:3px}

    /* Date range buttons */
    .db{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:24px}
    .db-btn{
      background:var(--bg-white);
      border:1px solid var(--border);
      color:var(--text-muted);
      padding:5px 14px;
      border-radius:20px;
      cursor:pointer;
      font-size:var(--fs-base);font-weight:500;
      font-family:inherit;
      transition:all 0.15s var(--ease);
    }
    .db-btn:hover{border-color:var(--border-focus);color:var(--text-secondary);background:var(--bg-white)}
    .db-btn.active{
      background:var(--accent);
      border-color:var(--accent);
      color:#fff;
      font-weight:600;
    }

    /* Custom date picker popover — anchored to the Custom pill */
    .db-custom-wrap{position:relative;display:inline-block}
    .db-pop{
      display:none;
      position:absolute;right:0;top:calc(100% + 8px);
      min-width:280px;
      background:var(--bg-white);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-lg);
      padding:14px;
      z-index:200;
    }
    .db-pop.open{display:block}
    .db-pop-row{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
    .db-pop-row label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
    .db-pop-row input[type="date"]{
      padding:8px 10px;
      background:var(--bg-input);
      border:1px solid var(--border);
      border-radius:var(--radius-md);
      font-size:var(--fs-md);font-family:inherit;
      color:var(--text);outline:none;
      transition:border-color .15s;
    }
    .db-pop-row input[type="date"]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
    .db-pop-actions{display:flex;gap:8px;justify-content:flex-end}
    .db-pop-btn{
      padding:7px 14px;border-radius:var(--radius-md);border:1px solid var(--border);
      background:var(--bg-white);color:var(--text-secondary);
      font-size:var(--fs-base);font-weight:600;cursor:pointer;font-family:inherit;
      transition:all .15s;
    }
    .db-pop-btn:hover{border-color:var(--border-focus);color:var(--text)}
    .db-pop-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
    .db-pop-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
    .db-pop-err{font-size:var(--fs-sm);color:var(--red);margin-bottom:10px;min-height:14px}

    /* Analytics filter bar — entry chips + date presets on one line */
    .an-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
    .an-filter-bar .db{margin-bottom:0}
    .an-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
    .an-chip{
      display:inline-flex;align-items:center;gap:6px;
      padding:5px 12px;
      background:var(--bg-white);border:1px solid var(--border);
      color:var(--text-muted);
      border-radius:20px;cursor:pointer;
      font-size:var(--fs-base);font-weight:500;font-family:inherit;
      transition:all 0.15s var(--ease);
    }
    .an-chip:hover{border-color:var(--border-focus);color:var(--text-secondary)}
    .an-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
    .an-chip-dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.7}

    /* Analytics segment row — Zone 3 small-multiples by entry type */
    .an-segments{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;margin-bottom:22px;
    }
    .an-seg{
      background:var(--bg-white);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      padding:18px 18px 16px;
      transition:all 0.15s var(--ease);
      display:flex;flex-direction:column;gap:10px;
    }
    .an-seg:hover{border-color:var(--border-focus);box-shadow:var(--shadow-sm)}
    .an-seg-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
    .an-seg-t{font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
    .an-seg-pill{font-size:var(--fs-xs);font-weight:700;padding:2px 8px;border-radius:20px;background:var(--bg-input);color:var(--text-secondary);letter-spacing:.04em}
    .an-seg-big{font-size:28px;font-weight:800;letter-spacing:-0.03em;color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
    .an-seg-sub{font-size:var(--fs-base);color:var(--text-muted);font-weight:500}
    .an-seg-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:10px}
    .an-seg-row-6{grid-template-columns:repeat(6,1fr);gap:16px}
    .an-seg-cell{display:flex;flex-direction:column;gap:3px;min-width:0}
    .an-seg-cell-l{font-size:10.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
    .an-seg-cell-v{font-size:18px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
    .an-seg-cell-v.green{color:var(--green)}
    .an-seg-cell-v.blue{color:var(--blue)}
    .an-seg-empty{opacity:.55}
    /* Single-card Zone 3 (replaces the old 3-up small-multiples) */
    .an-seg-wrap{margin-bottom:22px}
    .an-seg-solo{gap:16px;padding:22px 24px}
    .an-seg-solo .an-seg-hd{align-items:flex-start}
    .an-seg-solo .an-seg-t{font-size:var(--fs-md);font-weight:700;color:var(--text);letter-spacing:-0.005em;text-transform:none}
    .an-seg-solo .an-seg-sub{font-size:var(--fs-base);color:var(--text-muted);font-weight:500}
    .an-seg-solo .an-seg-big{color:var(--text)}
    /* Source split (All Sources only) — stacked bars showing where leads came from */
    .an-seg-split{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--border-light)}
    .an-seg-split-row{display:grid;grid-template-columns:140px 1fr auto;gap:14px;align-items:center;cursor:pointer;padding:4px 6px;border-radius:var(--radius-md);transition:background .15s}
    .an-seg-split-row:hover{background:var(--bg-hover)}
    .an-seg-split-hd{display:flex;align-items:center;gap:8px;font-size:var(--fs-md);font-weight:600;color:var(--text)}
    .an-seg-split-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
    .an-seg-split-bar{height:8px;background:var(--bg-input);border-radius:var(--radius-pill);overflow:hidden}
    .an-seg-split-bar-fill{height:100%;border-radius:var(--radius-pill);transition:width .3s var(--ease)}
    .an-seg-split-nums{font-size:var(--fs-base);color:var(--text-muted);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
    .an-seg-split-nums b{color:var(--text);font-weight:700}
    @media(max-width:900px){
      .an-segments{grid-template-columns:1fr}
      .an-seg-row-6{grid-template-columns:repeat(3,1fr)}
      .an-seg-split-row{grid-template-columns:110px 1fr;gap:10px}
      .an-seg-split-nums{grid-column:1/-1;padding-left:118px}
    }
    @media(max-width:600px){
      .an-seg-row-6{grid-template-columns:repeat(2,1fr)}
      .an-seg-split-row{grid-template-columns:1fr}
      .an-seg-split-nums{grid-column:1;padding-left:18px}
    }

    /* Analytics lead table — Zone 4 */
    .an-table-wrap{margin-top:22px}

    /* KPI Cards */
    .kg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
    .kc.kc-alert{border-color:rgba(239,68,68,0.35);background:linear-gradient(180deg,rgba(239,68,68,0.05),var(--bg-white));cursor:pointer}
    .kc.kc-alert:hover{border-color:var(--red);box-shadow:0 4px 14px rgba(239,68,68,0.15)}
    .kc.kc-alert::before{background:var(--red) !important}
    .kc{
      background:var(--bg-white);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      padding:20px 22px;
      transition:box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
      position:relative;
      overflow:hidden;
    }
    .kc::before{
      content:'';
      position:absolute;
      left:0;top:0;bottom:0;
      width:3px;
      background:var(--border);
      border-radius:3px 0 0 3px;
    }
    .kc:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
    .kc-l{
      font-size:var(--fs-sm);text-transform:uppercase;
      letter-spacing:0.08em;color:var(--text-muted);
      font-weight:600;margin-bottom:8px;
    }
    .kc-v{
      font-size:28px;font-weight:800;
      letter-spacing:-0.03em;
      font-variant-numeric:tabular-nums;
      color:var(--text);
    }
    .kc-v.green{color:var(--green)}
    .kc-v.red{color:var(--red)}
    .kc-v.yellow{color:var(--yellow)}
    .kc-v.blue{color:var(--blue)}
    .kc-v.purple{color:var(--purple)}
    .kc-delta{
      font-size:var(--fs-sm);font-weight:600;
      margin-top:6px;
      display:inline-flex;align-items:center;gap:3px;
      padding:3px 10px;border-radius:var(--radius-pill);
    }
    .kc-delta.up{color:var(--green);background:var(--green-bg)}
    .kc-delta.down{color:var(--red);background:var(--red-bg)}
    .kc-delta.new{color:var(--accent);background:var(--accent-bg)}
    .kc-delta.none{display:none}

    /* Analytics KPI layout — row 1 is 4 normal cards, row 2 is 2 wider cards */
    .kg-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
    .kg-bot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:24px}
    .kg-bot .kc{padding:22px 26px}
    .kg-bot .kc-v{font-size:34px}
    .kc-sub{font-size:var(--fs-base);color:var(--text-muted);font-weight:500;margin-top:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .kc-sub b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
    .kc-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius-pill);background:var(--bg-input);color:var(--text-secondary);font-size:var(--fs-sm);font-weight:600;letter-spacing:-0.005em}
    .kc-chip.alert{background:var(--red-bg);color:var(--red);cursor:pointer}
    .kc-chip.sent{background:var(--green-bg);color:var(--green)}
    .kc-chip.ghost{background:var(--bg-input);color:var(--text-muted)}
    @media(max-width:900px){
      .kg-top{grid-template-columns:repeat(2,minmax(0,1fr))}
      .kg-bot{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media(max-width:600px){
      .kg-top,.kg-bot{grid-template-columns:1fr}
    }

    /* Charts */
    .chart-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
    .chart-card{
      background:var(--bg-white);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      padding:22px;
      transition:box-shadow 0.2s var(--ease);
    }
    .chart-card:hover{box-shadow:var(--shadow-md)}
    .chart-title{
      font-size:var(--fs-sm);font-weight:600;
      text-transform:uppercase;letter-spacing:0.08em;
      color:var(--text-muted);margin-bottom:16px;
    }
    .chart-bars{
      display:flex;align-items:flex-end;gap:3px;
      height:140px;
      background:repeating-linear-gradient(
        to top,
        transparent,
        transparent calc(25% - 1px),
        rgba(0,0,0,0.04) calc(25% - 1px),
        rgba(0,0,0,0.04) 25%
      );
      border-bottom:1px solid var(--border);
    }
    .chart-bar{
      flex:1;
      background:var(--accent);
      border-radius:var(--radius-xs) 4px 0 0;
      min-height:2px;
      position:relative;
      transition:background 0.15s, filter 0.15s;
      opacity:0.8;
    }
    .chart-bar:hover{opacity:1;filter:brightness(1.08)}
    .chart-bar-label{
      position:absolute;bottom:-18px;left:50%;
      transform:translateX(-50%);
      font-size:var(--fs-2xs);color:var(--text-muted);
      white-space:nowrap;font-weight:500;
    }
    .chart-bar.green{background:var(--green)}
    .chart-bar.green:hover{background:#0ea572}

    /* ── CRM KANBAN ── */
    /* Fixed-viewport kanban: board caps at ~one screen so columns don't
       stretch the page as leads accumulate. Each .crm-col-body scrolls
       internally via its own overflow-y:auto. */
    .crm-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:16px;min-height:520px;max-height:calc(100vh - 200px);-webkit-overflow-scrolling:touch}
    /* CRM sort dropdown — sits in the filter bar alongside the date pills */
    .crm-sort{padding:7px 12px;background:var(--bg-white);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-md);font-size:var(--fs-base);font-family:inherit;outline:none;cursor:pointer}
    .crm-sort:hover{border-color:var(--border-focus)}
    .crm-col{min-width:280px;flex:1;display:flex;flex-direction:column;background:var(--bg);border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden}
    .crm-col-hd{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
    .crm-col-hd-bar{position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0}
    .crm-col{position:relative}
    .crm-col-name{font-size:var(--fs-base);font-weight:700;text-transform:uppercase;letter-spacing:0.04em}
    .crm-col-count{font-size:var(--fs-sm);font-weight:600;padding:2px 8px;border-radius:20px;background:var(--bg-hover)}
    .crm-col-body{flex:1;padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;min-height:100px}
    .crm-card{background:var(--bg-white);border:1px solid var(--border);border-radius:10px;padding:14px 16px 12px 16px;cursor:grab;transition:all 0.15s var(--ease);position:relative;display:flex;gap:12px;align-items:flex-start}
    /* Reserve right-padding for the top-right cluster (time + IG icon).
       has-tr alone (time only) needs ~36px; has-tr + has-ig needs ~70px. */
    .crm-card.has-tr{padding-right:38px}
    .crm-card.has-tr.has-ig{padding-right:70px}
    .crm-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-1px)}
    .crm-card:active{cursor:grabbing}
    .crm-card.dragging{opacity:0.4;transform:scale(0.95)}
    .crm-card.crm-card-loading{opacity:0.55;pointer-events:none;transition:opacity 0.15s var(--ease)}
    .crm-card-name{font-size:var(--fs-md);font-weight:600;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .crm-card-handle{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    /* Top-right cluster: relative time + IG quick-link. Sits above the
       inner content via absolute positioning so it doesn't push name text
       around. The card reserves padding-right for the cluster width. */
    .crm-card-tr{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:6px;z-index:2}
    .crm-card-tr .crm-card-time{font-size:var(--fs-xs);color:var(--text-muted);font-weight:500;line-height:1;white-space:nowrap}
    /* Pills stack vertically, left-aligned. Entry badge ("Outbound") and
       FU pill ("Expired · Manual") share the same x-axis offset so they
       look directly under each other. */
    .crm-card-pills{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:6px}
    .crm-card-entry{font-size:var(--fs-2xs);font-weight:600;padding:1px 6px;border-radius:20px;text-transform:uppercase;letter-spacing:0.04em;flex-shrink:0}
    .crm-card-pic{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--border);flex-shrink:0}
    .crm-card-pic-ph{width:34px;height:34px;border-radius:50%;background:var(--accent-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:var(--fs-base);font-weight:700;color:var(--accent);flex-shrink:0}
    .crm-col.drag-over{background:var(--accent-bg);border-color:var(--accent)}
    .crm-col.drag-over .crm-col-body{background:rgba(46,91,255,0.03)}
    .crm-collapsed{display:flex;gap:12px;margin-top:12px}
    .crm-collapsed-item{flex:1;background:var(--bg-white);border:1px solid var(--border);border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all 0.15s}
    .crm-collapsed-item:hover{border-color:var(--accent);background:var(--accent-bg)}
    .crm-collapsed-label{font-size:var(--fs-base);font-weight:500;color:var(--text-muted)}
    .crm-collapsed-count{font-size:var(--fs-lg);font-weight:700}

    /* Terminal outcomes row — dedicated drop zones for Lost / Won */
    .crm-terminals{display:flex;gap:12px;margin-top:18px;padding-top:14px;border-top:1px dashed var(--border)}
    .crm-terminal-tile{flex:1;position:relative;background:var(--bg-white);border:1.5px dashed var(--border);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .15s;overflow:hidden}
    .crm-terminal-tile:hover{border-style:solid;background:var(--bg-hover)}
    .crm-terminal-tile.drag-over{border-style:solid;border-color:currentColor;background:rgba(46,91,255,0.04);transform:scale(1.01)}
    .crm-terminal-bar{position:absolute;left:0;top:0;bottom:0;width:3px}
    .crm-terminal-body{flex:1;min-width:0}
    .crm-terminal-label{font-size:var(--fs-md);font-weight:700;text-transform:uppercase;letter-spacing:0.04em}
    .crm-terminal-hint{font-size:var(--fs-sm);color:var(--text-muted);margin-top:3px}
    .crm-terminal-count{font-size:var(--fs-xl);font-weight:700;flex-shrink:0}
    .crm-empty{text-align:center;color:var(--text-muted);font-size:var(--fs-sm);padding:20px 8px;opacity:0.6}

    /* Vertical Funnel */
    .fw{
      background:var(--bg-white);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      padding:26px 24px;
      margin-bottom:24px;
    }
    .fw-t{
      font-size:var(--fs-sm);font-weight:600;
      color:var(--text-muted);
      text-transform:uppercase;letter-spacing:0.08em;
      margin-bottom:20px;
    }

    .vfunnel{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;margin:0 auto 8px}
    .vf-stage{
      display:flex;align-items:center;justify-content:center;
      border-radius:12px;
      padding:14px 22px;
      margin:0 auto;
      color:#fff;
      position:relative;
      transition:filter 0.2s, transform 0.2s;
      cursor:default;
    }
    .vf-stage:hover{filter:brightness(1.07);transform:scale(1.005)}
    .vf-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
    .vf-label{font-size:var(--fs-base);font-weight:600;letter-spacing:0.02em;opacity:0.9}
    .vf-count{font-size:20px;font-weight:800;letter-spacing:-0.02em}
    .vf-connector{
      display:flex;align-items:center;justify-content:center;
      height:24px;position:relative;
    }
    .vf-connector::before{
      content:'';position:absolute;left:50%;top:0;bottom:0;
      width:1px;background:var(--border);
      transform:translateX(-50%);
    }
    .vf-rate-badge{
      background:var(--bg-white);
      border:1px solid var(--border);
      padding:3px 12px;border-radius:var(--radius-pill);
      font-size:var(--fs-xs);font-weight:700;
      color:var(--accent);
      z-index:1;position:relative;
      box-shadow:var(--shadow-sm);
    }

    .fw-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
    .fw-kpi{padding:14px 16px;background:var(--bg);border:1px solid var(--border);border-radius:10px}
    .fw-kpi-l{font-size:var(--fs-xs);color:var(--text-muted);font-weight:600;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em}
    .fw-kpi-v{font-size:var(--fs-xl);font-weight:800;color:var(--text);letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
    .fw-kpi-v.blue{color:var(--accent)}.fw-kpi-v.green{color:var(--green)}
    .fw-kpi-delta{font-size:var(--fs-xs);font-weight:600;margin-top:3px;display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:var(--radius-pill)}
    .fw-kpi-delta.up{color:var(--green);background:var(--green-bg)}
    .fw-kpi-delta.down{color:var(--red);background:var(--red-bg)}
    .fw-kpi-delta.new{color:var(--accent);background:var(--accent-bg)}
    .fw-kpi-delta.none{display:none}

    .fw-bottom{display:flex;gap:12px;margin-top:18px}
    .fw-bot{
      flex:1;padding:12px 16px;
      background:var(--bg);border:1px solid var(--border);
      border-radius:10px;display:flex;
      align-items:center;justify-content:space-between;
    }
    .fw-bot-l{font-size:var(--fs-sm);color:var(--text-muted);font-weight:500}
    .fw-bot-v{font-size:16px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
    .fw-bot-v.red{color:var(--red)}

    /* Stats conversion funnel (vertical) */
    .sfunnel-wrap{
      background:var(--bg-white);border:1px solid var(--border);
      border-radius:var(--radius-lg);padding:26px 24px;margin-bottom:24px;
    }
    .sfunnel-t{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:20px}

    .sec{display:flex;gap:12px;margin-bottom:24px}
    .alrt{
      background:var(--yellow-bg);
      border:1px solid rgba(245,158,11,0.2);
      border-radius:var(--radius);
      padding:10px 16px;margin-bottom:20px;
      display:flex;align-items:center;gap:10px;
      color:var(--yellow);font-size:var(--fs-base);font-weight:500;
    }
    .alrt-d{
      width:7px;height:7px;border-radius:50%;
      background:var(--yellow);flex-shrink:0;
      animation:pulse 2s ease-in-out infinite;
    }
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

    /* Badges */
    .bdg{
      display:inline-flex;align-items:center;
      padding:3px 10px;border-radius:var(--radius-pill);
      font-size:var(--fs-sm);font-weight:600;
      letter-spacing:0.02em;white-space:nowrap;
    }
    .bdg-unassigned{background:rgba(161,161,170,0.12);color:var(--text-muted)}
    .bdg-potential{background:rgba(139,92,246,0.12);color:var(--purple)}
    .bdg-inbound{background:rgba(20,184,166,0.12);color:#0d9488}
    .bdg-manual{background:rgba(245,158,11,0.1);color:var(--yellow)}
    .bdg-outbound{background:var(--blue-bg);color:var(--blue)}
    .bdg-lead-magnet{background:var(--orange-bg);color:var(--orange)}
    .bdg-conversation{background:var(--purple-bg);color:var(--purple)}
    .bdg-qualified{background:rgba(46,91,255,0.12);color:var(--blue)}
    .bdg-proposed{background:var(--yellow-bg);color:var(--yellow)}
    .bdg-booked{background:var(--green-bg);color:var(--green)}
    .bdg-canceled{background:rgba(239,68,68,0.1);color:var(--red)}
    .bdg-not-interested{background:rgba(161,161,170,0.16);color:#71717a}
    .bdg-disqualified{background:var(--red-bg);color:var(--red)}
    .bdg-closed{background:rgba(16,185,129,0.15);color:#059669}
    .bdg-lost{background:rgba(239,68,68,0.1);color:var(--red)}
    .bdg-followup{background:rgba(99,102,241,0.12);color:#6366f1}
    .bdg-expired{
      background:var(--red-bg);color:var(--red);
      font-size:var(--fs-xs);letter-spacing:0.06em;
      padding:2px 8px;
    }

    /* 24h Instagram window — closed state for send rows. Unified across
       Inbox, CRM lead panel, and Leads tab (2026-08 redesign): renders as
       the same composer bar the operator sees when it's open, just
       disabled, so it reads as "the input you'd normally type in, closed
       off" instead of a separate blocked panel. The Open in Instagram
       button stays live next to it since that action still works. */
    .inb-chat-in.window-closed,
    .sl-msg-wrap.window-closed{
      display:flex;align-items:center;gap:10px;
    }
    .win-closed-field{flex:1;min-width:0;position:relative;display:flex;align-items:center}
    .win-closed-lock{position:absolute;left:13px;color:var(--text-muted);pointer-events:none}
    .win-closed-input{
      width:100%;padding:10px 14px 10px 34px;
      background:var(--bg-input);
      border:1px solid var(--border);
      color:var(--text-muted);border-radius:10px;
      font-size:var(--fs-md);font-family:inherit;outline:none;
      cursor:not-allowed;
    }
    .win-closed-input::placeholder{color:var(--text-muted);opacity:1}
    .win-closed-ig-btn{flex:0 0 auto;white-space:nowrap}
    /* .inb-chat-in button:hover / :active (refresh section, ~line 3319) outrank
       .fu-btn.primary:hover on specificity and would leak a stray gradient
       hover/press effect onto this button in the Inbox only, breaking parity
       with the identical button in the CRM panel. Neutralize explicitly. */
    .inb-chat-in.window-closed .win-closed-ig-btn:hover{transform:none;filter:none;box-shadow:none;background:var(--accent-hover)}
    .inb-chat-in.window-closed .win-closed-ig-btn:active{transform:scale(0.97)}

    /* Transient toast — supports types: default, error, success, info */
    .msg-toast{
      position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);
      background:#0f0f12;color:#fff;font-size:var(--fs-md);font-weight:500;
      padding:12px 20px;border-radius:10px;max-width:480px;line-height:1.5;
      box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,0.08);
      opacity:0;transition:opacity .22s ease,transform .22s ease;
      z-index:99999;pointer-events:none;text-align:center;
    }
    .msg-toast.show{opacity:1;transform:translate(-50%,0)}
    .msg-toast.toast-error{background:#2a1212;border-color:rgba(239,68,68,0.3);color:#ffcaca}
    .msg-toast.toast-success{background:#0a2018;border-color:rgba(16,185,129,0.3);color:#a7f3d0}
    .msg-toast.toast-info{background:#0d1630;border-color:rgba(46,91,255,0.3);color:#bfcfff}

    /* ── LEADS TABLE ── */
    .leads-filter-bar{margin-bottom:14px}
    .leads-filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .man-filter-bar{margin-bottom:14px}
    .man-filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    /* Reason chip on the manual-queue lead row. Tonal variant per reason
       so the operator can scan + group by category. */
    .man-reason-chip{display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:var(--radius-sm);text-transform:uppercase;white-space:nowrap}
    .man-reason-chip.window_expired{background:rgba(239,68,68,0.14);color:#b91c1c}
    .man-reason-chip.dashboard_send{background:rgba(99,102,241,0.14);color:#4338ca}
    .man-reason-chip.ig_direct{background:rgba(236,72,153,0.14);color:#be185d}
    .man-reason-chip.operator_toggle{background:rgba(161,161,170,0.16);color:#52525b}
    /* Urgency line — small caption under each row. Red when window has
       already closed, amber when within 4h, neutral past then. */
    .man-urgency{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);margin-top:3px;letter-spacing:-0.005em}
    .man-urgency.crit{color:#b91c1c}
    .man-urgency.warn{color:#b45309}
    .leads-search-wrap{position:relative;flex:1;min-width:220px;max-width:360px}
    .leads-search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-muted);pointer-events:none}
    .leads-search{
      width:100%;padding:8px 12px 8px 34px;
      background:var(--bg-white);border:1px solid var(--border);
      border-radius:9px;font-size:var(--fs-md);color:var(--text);
      font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;
    }
    .leads-search:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}
    .leads-filter-sel{
      padding:8px 10px;background:var(--bg-white);border:1px solid var(--border);
      border-radius:9px;font-size:12.5px;color:var(--text);font-family:inherit;font-weight:500;
      cursor:pointer;outline:none;transition:border-color .15s;
      appearance:none;-webkit-appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right 10px center;padding-right:26px;
    }
    .leads-filter-sel:hover{border-color:var(--border-focus)}
    .leads-clear-btn{
      padding:8px 12px;background:transparent;border:1px solid var(--border);
      border-radius:9px;font-size:var(--fs-base);font-weight:500;color:var(--text-secondary);
      cursor:pointer;font-family:inherit;transition:all .15s;
    }
    .leads-clear-btn:hover{border-color:var(--border-focus);color:var(--text)}

    .leads-table-wrap{
      background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-lg);
      overflow:hidden;box-shadow:var(--shadow-sm);
    }
    .leads-table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
    .leads-table thead{background:var(--bg-hover);border-bottom:1px solid var(--border)}
    .leads-th{
      text-align:left;padding:11px 14px;font-size:var(--fs-sm);font-weight:600;
      color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;
      white-space:nowrap;user-select:none;
    }
    .leads-th.sortable{cursor:pointer;transition:color .15s}
    .leads-th.sortable:hover{color:var(--text-secondary)}
    .leads-sort-arrow{margin-left:4px;opacity:0.35;font-size:var(--fs-xs)}
    .leads-sort-arrow.active{opacity:1;color:var(--accent)}
    .leads-row{cursor:pointer;transition:background .1s}
    .leads-row:hover{background:var(--bg-hover)}
    .leads-td{padding:12px 14px;vertical-align:middle}
    .leads-td-muted{color:var(--text-muted);font-size:12.5px;white-space:nowrap}
    .leads-td-name{min-width:220px;max-width:320px}

    .leads-name-cell{display:flex;align-items:center;gap:10px;min-width:0}
    .leads-pic{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--border);flex-shrink:0}
    .leads-pic-ph{
      width:30px;height:30px;border-radius:50%;flex-shrink:0;
      background:var(--accent-bg);color:var(--accent);
      display:flex;align-items:center;justify-content:center;
      font-weight:700;font-size:var(--fs-base);border:1px solid var(--border);
    }
    .sl-pic{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--border);flex-shrink:0}
    .sl-pic-ph{
      width:40px;height:40px;border-radius:50%;flex-shrink:0;
      background:var(--accent-bg);color:var(--accent);
      display:flex;align-items:center;justify-content:center;
      font-weight:700;font-size:var(--fs-md);border:1px solid var(--border);
    }

    .leads-name-text{min-width:0;overflow:hidden}
    .leads-name-primary{font-weight:600;font-size:var(--fs-md);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .leads-name-sub{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

    .leads-src-pill,.leads-int-pill,.leads-fu-pill,.leads-book-pill{
      display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);
      font-size:var(--fs-sm);font-weight:600;white-space:nowrap;letter-spacing:0.01em;
    }
    .leads-int-pill.high{background:var(--green-bg);color:var(--green)}
    .leads-int-pill.medium{background:var(--yellow-bg);color:var(--yellow)}
    .leads-int-pill.low{background:rgba(161,161,170,0.14);color:var(--text-muted)}
    .leads-fu-pill{background:rgba(99,102,241,0.1);color:#6366f1}
    .leads-book-pill{background:var(--green-bg);color:var(--green)}
    .leads-source-dim{color:var(--text-muted);font-size:var(--fs-base)}
    .leads-24h-tag{font-size:var(--fs-2xs);font-weight:700;margin-left:4px;letter-spacing:0.05em}

    .leads-pagination{
      display:flex;align-items:center;justify-content:space-between;
      margin-top:14px;padding:4px 4px;
      font-size:12.5px;color:var(--text-muted);
    }
    .leads-pagination-btns{display:flex;align-items:center;gap:10px}
    .leads-pagination-pg{font-weight:500;color:var(--text-secondary)}
    .leads-page-btn{
      padding:7px 14px;background:var(--bg-white);border:1px solid var(--border);
      border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:500;color:var(--text);
      cursor:pointer;font-family:inherit;transition:all .15s;
    }
    .leads-page-btn:hover:not(:disabled){border-color:var(--border-focus);background:var(--bg-hover)}
    .leads-page-btn:disabled{opacity:0.4;cursor:not-allowed}

    .leads-empty{
      text-align:center;padding:60px 24px;background:var(--bg-white);
      border:1px solid var(--border);border-radius:var(--radius-lg);
    }
    .leads-empty-title{font-size:var(--fs-lg);color:var(--text-muted);font-weight:500}

    /* Mobile */
    @media(max-width:768px){
      .leads-filter-row{gap:6px}
      .leads-search-wrap{min-width:140px}
      .leads-td{padding:10px 10px}
      .leads-th{padding:9px 10px;font-size:10.5px}
      .leads-td-name{min-width:150px}
      /* Stage column sits right after the sticky name column, so the
         badges land flush against the cropped viewport edge with no
         gutter. Pull them left with a margin instead of relying on the
         td's own padding (Paul mobile screenshot report 2026-07-28). */
      .stage-bdg-group{margin-right:16px}
    }

    /* ── MANUAL QUEUE rows (2026-05-01 redesign) ──
       Mirrors the .leads-table-wrap card (bordered, rounded, shadow) and uses
       a row grid instead of a strict table because each row carries a
       multi-line urgency string + chip row that wouldn't fit a <td> layout. */
    .man-list-wrap{
      background:var(--bg-white);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      overflow:hidden;
      box-shadow:var(--shadow-sm);
    }
    .man-row{
      display:grid;
      grid-template-columns: minmax(220px,1.6fr) minmax(140px,1fr) minmax(180px,1.4fr) auto;
      gap:16px;align-items:center;
      padding:14px 18px;
      border-top:1px solid var(--border-light);
      cursor:pointer;transition:background .1s;
    }
    .man-row:first-child{border-top:none}
    .man-row:hover{background:var(--bg-hover)}
    .man-row-name{display:flex;align-items:center;gap:11px;min-width:0}
    .man-row-pic, .man-row-pic-ph{
      width:34px;height:34px;border-radius:50%;flex-shrink:0;
      border:1px solid var(--border);overflow:hidden;
      background:var(--accent-bg);color:var(--accent);
      display:flex;align-items:center;justify-content:center;
      font-weight:700;font-size:var(--fs-md);
    }
    .man-row-pic img{width:100%;height:100%;object-fit:cover;display:block}
    .man-row-text{min-width:0;overflow:hidden}
    .man-row-name-primary{
      font-weight:600;font-size:var(--fs-md);color:var(--text);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .man-row-name-sub{
      font-size:11.5px;color:var(--text-muted);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;
    }
    .man-row-stage{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .man-row-urgency{
      font-size:var(--fs-base);color:var(--text-muted);
      display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.35;
    }
    .man-row-urgency.crit{color:var(--red);font-weight:500}
    .man-row-urgency.warn{color:var(--yellow);font-weight:500}
    .man-row-urgency-meta{color:var(--text-muted);font-weight:400}
    .man-row-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-shrink:0}
    .man-row-action{
      width:30px;height:30px;border-radius:var(--radius-md);
      background:var(--bg-input);border:1px solid var(--border);
      color:var(--text-muted);cursor:pointer;font-family:inherit;
      display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
      transition:all .15s;
    }
    .man-row-action:hover{color:var(--text);border-color:var(--border-focus)}
    .man-row-action.resume{background:rgba(46,91,255,0.10);color:var(--accent);border-color:transparent}
    .man-row-action.resume:hover{background:rgba(46,91,255,0.18)}
    /* Text variant of the resume action — replaces the bare ↻ glyph button
       in the Manual queue rows. Per Shariq 2026-07-24. */
    .man-resume-btn{
      height:30px;padding:0 12px;border-radius:var(--radius-md);
      background:rgba(46,91,255,0.10);color:var(--accent);border:none;
      cursor:pointer;font-family:inherit;font-size:var(--fs-sm);font-weight:600;
      white-space:nowrap;flex-shrink:0;transition:background .15s;
    }
    .man-resume-btn:hover{background:rgba(46,91,255,0.18)}
    .man-row-action svg{width:14px;height:14px}
    @media(max-width:880px){
      .man-row{
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-rows: auto auto auto;
        gap:8px 12px;
      }
      .man-row-name{grid-column:1; grid-row:1}
      .man-row-actions{grid-column:2; grid-row:1}
      .man-row-stage{grid-column:1 / -1; grid-row:2}
      .man-row-urgency{grid-column:1 / -1; grid-row:3}
    }

    /* ── INBOX ── */
    .inb-layout{display:flex;height:calc(100vh - 56px);position:fixed;top:56px;left:var(--sidebar-w);right:0;bottom:0;transition:left 0.22s cubic-bezier(0.4,0,0.2,1)}
    /* When sidebar collapses to 64px, inbox layout must follow — it's position:fixed and doesn't inherit the flex layout shift */
    .sidebar.collapsed + .main .inb-layout{left:64px}
    .inb-list{
      width:300px;min-width:300px;
      border-right:1px solid var(--border);
      display:flex;flex-direction:column;
      background:var(--bg-white);height:100%;overflow:hidden;
    }
    .inb-list-hd{
      padding:20px 16px 14px;
      border-bottom:1px solid var(--border);flex-shrink:0;
    }
    .inb-list-t{font-size:16px;font-weight:700;margin-bottom:12px;letter-spacing:-0.02em}
    .inb-filter{
      width:100%;padding:7px 12px;font-size:var(--fs-base);font-weight:500;
      background:var(--bg-input);border:1px solid var(--border);
      color:var(--text);border-radius:var(--radius-md);font-family:inherit;
      outline:none;cursor:pointer;
      -webkit-appearance:none;appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right 12px center;
      padding-right:30px;transition:border-color 0.15s;
    }
    .inb-filter:focus{border-color:var(--border-focus)}
    .inb-items{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
    .inb-item{
      padding:13px 16px;
      border-bottom:1px solid var(--border-light);
      cursor:pointer;transition:background 0.12s;
      display:flex;gap:12px;align-items:flex-start;
    }
    .inb-item:hover{background:var(--bg-hover)}
    .inb-item.active{background:rgba(46,91,255,0.04);border-left:2px solid var(--accent);padding-left:14px}
    .inb-pic{
      width:40px;height:40px;border-radius:50%;
      flex-shrink:0;object-fit:cover;
      background:var(--bg-input);border:1px solid var(--border);
    }
    .inb-pic-placeholder{
      width:40px;height:40px;border-radius:50%;flex-shrink:0;
      background:var(--accent-bg);border:1px solid var(--border);
      display:flex;align-items:center;justify-content:center;
      font-weight:700;font-size:var(--fs-lg);color:var(--accent);
    }
    .inb-info{flex:1;min-width:0}
    .inb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;gap:8px}
    .inb-top-right{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
    .inb-name{font-size:var(--fs-md);font-weight:600;color:var(--text)}
    .inb-time{font-size:var(--fs-xs);color:var(--text-muted);font-weight:500}
    .inb-handle{font-size:var(--fs-sm);color:var(--text-muted)}
    /* Flex container so the stage badge and the Manual pill sit on the same
       baseline with proper gap. Wraps cleanly when the row is narrow rather
       than stacking with awkward spacing. */
    .inb-bdg{margin-top:5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
    /* Inbox triage section headers (Needs Attention / Upcoming Calls /
       Canceled Calls / Recent Conversations). Sticky so the section label
       stays visible while the operator scrolls a long section. */
    .inb-sec-hd{
      position:sticky;top:0;z-index:2;
      padding:8px 16px 6px;
      font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
      color:var(--text-muted);background:var(--bg);
      border-bottom:1px solid var(--border-light);
      display:flex;align-items:center;gap:6px;
    }
    .inb-sec-hd.attn{color:#b91c1c}
    .inb-sec-hd.upc{color:var(--accent)}
    /* Amber, not red. Canceled Calls is a re-book queue, not an escalation —
       it must not compete visually with Needs Attention above it. */
    .inb-sec-hd.cncl{color:#b45309}
    .inb-sec-count{
      display:inline-flex;align-items:center;justify-content:center;
      min-width:16px;height:16px;padding:0 4px;border-radius:8px;
      font-size:10px;font-weight:700;
      background:var(--bg-input);color:var(--text-muted);
    }
    .inb-sec-hd.attn .inb-sec-count{background:rgba(239,68,68,0.14);color:#b91c1c}
    .inb-sec-hd.upc .inb-sec-count{background:rgba(46,91,255,0.1);color:var(--accent)}
    .inb-sec-hd.cncl .inb-sec-count{background:rgba(245,158,11,0.14);color:#b45309}
    /* Reason chip on a Needs Attention row, call-time chip on an Upcoming
       Calls row, cancel-age chip on a Canceled Calls row. Same scale as
       .fu-pill so they sit inline in .inb-bdg. */
    .inb-attn-chip{
      display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;
      padding:2px 7px;border-radius:var(--radius-sm);text-transform:uppercase;white-space:nowrap;
      background:rgba(239,68,68,0.12);color:#b91c1c;
    }
    .inb-attn-chip.lead_deferred{background:rgba(245,158,11,0.14);color:#b45309}
    .inb-attn-chip.selfrep{background:rgba(245,158,11,0.14);color:#b45309}
    .inb-call-chip{
      display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;
      padding:2px 7px;border-radius:var(--radius-sm);white-space:nowrap;
      background:rgba(46,91,255,0.1);color:var(--accent);
    }
    .inb-cancel-chip{
      display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;
      padding:2px 7px;border-radius:var(--radius-sm);white-space:nowrap;
      background:rgba(245,158,11,0.14);color:#b45309;
    }
    .inb-attn-actions{display:inline-flex;gap:4px;align-items:center}
    .inb-attn-btn{
      font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:var(--radius-sm);
      border:1px solid var(--border);background:var(--bg-white);color:var(--text);
      cursor:pointer;transition:background 0.12s,border-color 0.12s;
      min-height:24px;
    }
    .inb-attn-btn.confirm{border-color:rgba(34,197,94,0.4);color:#15803d}
    .inb-attn-btn.confirm:hover{background:rgba(34,197,94,0.08)}
    .inb-attn-btn.dismiss:hover{background:var(--bg-hover)}
    .inb-chat{flex:1;display:flex;flex-direction:column;background:var(--bg);height:100%;overflow:hidden}
    .inb-chat-ct{display:flex;flex-direction:column;height:100%;overflow:hidden}
    /* Manual page overlay layout (2026-05-22): list takes the full pane, chat
       slides in from the right when a lead is selected. Mirrors the mobile
       inbox stack but applied on every viewport size since manual triage is
       one-at-a-time. Sidebar offset matches .inb-layout so the chat doesn't
       slide under the nav. */
    /* top:112px = 56px global topbar + 56px sticky .dz-filterbar ("Manual
       Queue") header. Previously top:56px, so the fixed layout slid UNDER the
       z-index:20 filterbar and the first queue row was hidden behind it (the
       inbox only hides this because its .inb-list-hd absorbs the overlap).
       Starting below the filterbar clears both the list AND the chat header. */
    .man-layout{position:fixed;top:var(--chat-top,112px);left:var(--sidebar-w);right:0;bottom:0;background:var(--bg);transition:left 0.22s cubic-bezier(0.4,0,0.2,1);overflow:hidden}
    .sidebar.collapsed + .main .man-layout{left:64px}
    .man-list{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
    .man-chat{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--bg);transform:translateX(100%);transition:transform 0.28s var(--ease);z-index:5;display:flex;flex-direction:column}
    .man-layout.chat-open .man-chat{transform:translateX(0)}
    .man-chat > .inb-chat-ct{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden}
    @media(max-width:780px){.man-layout{left:0;right:0;top:var(--chat-top,110px)}}
    .inb-chat-hd{
      padding:16px 22px;
      border-bottom:1px solid var(--border);
      background:var(--bg-white);
      display:flex;align-items:center;gap:14px;flex-shrink:0;
    }
    .inb-chat-pic{
      width:36px;height:36px;border-radius:50%;
      object-fit:cover;background:var(--bg-input);
      border:1px solid var(--border);flex-shrink:0;
    }
    .inb-chat-pic-ph{
      width:36px;height:36px;border-radius:50%;
      background:var(--accent-bg);border:1px solid var(--border);
      display:flex;align-items:center;justify-content:center;
      font-weight:700;font-size:var(--fs-lg);color:var(--accent);flex-shrink:0;
    }
    /* IG-style default avatar — shown when a lead has neither profile pic
       nor name/handle (fresh outbound_sent rows). Beats a "?" or empty bubble. */
    .avatar-silhouette{
      background:#efefef !important;
      color:transparent;
      padding:0;
      overflow:hidden;
    }
    .avatar-silhouette svg{width:100%;height:100%;display:block}
    .inb-chat-nm{font-size:var(--fs-lg);font-weight:600;letter-spacing:-0.01em}
    .inb-chat-hn{font-size:var(--fs-sm);color:var(--text-muted)}
    .inb-chat-bd{
      flex:1;overflow-y:auto;
      padding:22px 24px;
      -webkit-overflow-scrolling:touch;
    }
    .inb-chat-empty{
      display:flex;align-items:center;justify-content:center;
      height:100%;color:var(--text-muted);font-size:var(--fs-md);
    }
    .inb-chat-in{
      padding:12px 16px;
      border-top:1px solid var(--border);
      background:var(--bg-white);
      display:flex;gap:10px;align-items:center;flex-shrink:0;
    }
    .inb-chat-in input{
      flex:1;padding:10px 14px;
      background:var(--bg-input);
      border:1px solid var(--border);
      color:var(--text);border-radius:10px;
      font-size:var(--fs-md);font-family:inherit;outline:none;
      transition:border-color 0.15s;
    }
    .inb-chat-in input:focus{border-color:var(--border-focus);background:var(--bg-white)}
    .inb-chat-in button{
      padding:10px 18px;
      background:var(--accent);color:#fff;
      border:none;border-radius:10px;
      font-size:var(--fs-base);font-weight:600;
      cursor:pointer;font-family:inherit;
      transition:background 0.15s, transform 0.1s;
      white-space:nowrap;
    }
    .inb-chat-in button:hover{background:var(--accent-hover)}
    .inb-chat-in button:active{transform:scale(0.97)}

    /* Action buttons in chat header */
    .inb-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
    .inb-action{
      padding:6px 14px;font-size:var(--fs-sm);font-weight:600;
      border-radius:var(--radius-md);border:1px solid var(--border);
      background:var(--bg-white);color:var(--text-secondary);
      cursor:pointer;font-family:inherit;
      transition:all 0.15s var(--ease);
    }
    .inb-action:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
    .inb-action.green{border-color:rgba(16,185,129,0.3);color:var(--green);background:var(--green-bg)}
    .inb-action.green:hover{border-color:var(--green)}
    /* Non-clickable state note in the action row — replaces a dead Start AI
       when the lead is manual because the IG 24h window expired. */
    .inb-action-note{padding:6px 12px;font-size:var(--fs-sm);font-weight:600;
      border-radius:var(--radius-md);background:var(--bg-input);
      color:var(--text-muted);white-space:nowrap;cursor:default;
      flex-shrink:0;overflow:hidden;text-overflow:ellipsis}
    /* Icon-only ghost button. Height matches .inb-action text buttons so
       they sit on the same visual line in the flex row. Gap (not margin)
       handles spacing so it scales cleanly next to any sibling. */
    .inb-icon-btn{
      width:28px;height:28px;
      display:inline-flex;align-items:center;justify-content:center;
      padding:0;
      border-radius:var(--radius-md);
      border:1px solid transparent;
      background:transparent;color:var(--text-muted);
      cursor:pointer;
      transition:all 0.15s var(--ease);
      flex-shrink:0;
    }
    .inb-icon-btn svg{width:15px;height:15px;display:block}
    .inb-icon-btn:hover{background:rgba(220,38,38,0.08);color:#dc2626;border-color:rgba(220,38,38,0.2)}
    .inb-icon-btn:active{transform:scale(0.95)}
    /* IG variant — same shape as the trash button but tinted Instagram-pink on
       hover. Used in the inbox chat header + CRM slide panel actions. */
    .inb-icon-btn.ig:hover{background:rgba(193,53,132,0.10);color:#C13584;border-color:rgba(193,53,132,0.25)}
    /* Kanban card IG icon — sits inside the .crm-card-tr cluster (top-right
       of the card) alongside the relative-time stamp. Smaller than the
       chat-header variant so it doesn't compete with the lead's name. */
    .crm-card-ig{
      width:22px;height:22px;
      display:inline-flex;align-items:center;justify-content:center;
      padding:0;border-radius:var(--radius-sm);border:1px solid transparent;
      background:transparent;color:var(--text-muted);
      cursor:pointer;transition:all 0.15s var(--ease);
      flex-shrink:0;
    }
    .crm-card-ig svg{width:14px;height:14px;display:block}
    .crm-card-ig:hover{background:rgba(193,53,132,0.10);color:#C13584;border-color:rgba(193,53,132,0.25)}
    /* Inbox left-row IG icon — sits inline at the right edge of the row, between
       the badges and the row's right padding. Stops the row click. */
    .inb-row-ig{
      /* Top-right placement (next to timestamp) — sized smaller than before
         so it sits naturally in line with the .inb-time text. */
      width:20px;height:20px;
      display:inline-flex;align-items:center;justify-content:center;
      padding:0;border-radius:5px;border:1px solid transparent;
      background:transparent;color:var(--text-muted);
      cursor:pointer;transition:all 0.15s var(--ease);
      flex-shrink:0;margin-left:0;
    }
    .inb-row-ig svg{width:12px;height:12px;display:block}
    .inb-row-ig:hover{background:rgba(193,53,132,0.10);color:#C13584;border-color:rgba(193,53,132,0.25)}

    /* Chat bubbles */
    .msg-group{display:flex;gap:10px;margin-bottom:10px;align-items:flex-end}
    .msg-group.lead{flex-direction:row}
    .msg-group.ai{flex-direction:row-reverse}
    .msg-group.operator{flex-direction:row-reverse}
    .msg-group-pic{
      width:30px;height:30px;border-radius:50%;flex-shrink:0;
      object-fit:cover;background:var(--bg-input);border:1px solid var(--border);
    }
    .msg-group-pic-ph{
      width:30px;height:30px;border-radius:50%;flex-shrink:0;
      background:var(--accent-bg);border:1px solid var(--border);
      display:flex;align-items:center;justify-content:center;
      font-size:var(--fs-xs);font-weight:700;color:var(--accent);
    }
    .msg-group-bubbles{display:flex;flex-direction:column;max-width:70%;gap:2px}
    .msg-group.ai .msg-group-bubbles{align-items:flex-end}
    .msg-group.operator .msg-group-bubbles{align-items:flex-end}
    .cb{
      padding:10px 14px;border-radius:16px;
      font-size:13.5px;line-height:1.55;
    }
    .cb.lead{
      background:var(--bg-input);
      border-bottom-left-radius:4px;
      color:var(--text);
    }
    .cb.ai{
      background:var(--accent);color:#fff;
      border-bottom-right-radius:4px;
      font-weight:500;
    }
    .ct{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:2px;padding:0 4px;font-weight:500}
    .ct.right{text-align:right}
    /* Instagram-style day separator (2026-05-22). One chip per day-group at
       the top of the day's first message. Centered, muted, uppercase. Replaces
       the per-message .ct timestamp for less noise on long conversations. */
    .msg-day-sep{text-align:center;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin:22px 0 14px;padding:0 16px}
    .msg-day-sep:first-child{margin-top:8px}

    /* Table */
    .tc{
      background:var(--bg-white);border:1px solid var(--border);
      border-radius:var(--radius-lg);overflow:hidden;
    }
    .tc-hd{
      padding:16px 20px;border-bottom:1px solid var(--border);
      display:flex;align-items:center;justify-content:space-between;
    }
    .tc-t{font-size:var(--fs-lg);font-weight:700;letter-spacing:-0.01em}
    .tc-c{font-size:var(--fs-base);color:var(--text-muted);font-weight:500}
    .ts{overflow-x:auto}
    table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
    thead{background:var(--bg)}
    th{
      text-align:left;padding:11px 16px;
      font-size:var(--fs-xs);font-weight:700;
      color:var(--text-muted);text-transform:uppercase;
      letter-spacing:0.07em;
      border-bottom:1px solid var(--border);white-space:nowrap;
    }
    td{
      padding:11px 16px;
      border-bottom:1px solid var(--border-light);
      color:var(--text-secondary);
    }
    td.nm{font-weight:600;color:var(--text)}
    tbody tr{cursor:pointer;transition:background 0.12s}
    tbody tr:nth-child(even) td{background:rgba(245,245,247,0.5)}
    tbody tr:hover td{background:var(--accent-bg) !important}

    /* Slide panel */
    .sl-panel{
      position:fixed;top:0;right:-660px;
      width:640px;height:100vh;
      background:var(--bg-white);
      border-left:1px solid var(--border);
      z-index:100;
      transition:right 0.3s var(--ease);
      display:flex;flex-direction:column;
      box-shadow:var(--shadow-lg);
    }
    .sl-panel.open{right:0}
    .sl-ov{
      display:none;position:fixed;inset:0;
      background:rgba(0,0,0,0.15);z-index:99;
      backdrop-filter:blur(3px);
    }
    .sl-ov.open{display:block}
    .sl-hd{
      padding:20px 24px;border-bottom:1px solid var(--border);
      display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
    }
    .sl-hd-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
    /* Internal wrapper for stage + delete buttons. Must be flex so 30x30
       icon button and text button share the same vertical center instead
       of sitting on the text baseline. */
    #slAI{display:inline-flex;align-items:center;gap:10px}
    .sl-x{
      background:none;border:none;
      color:var(--text-muted);font-size:18px;
      cursor:pointer;padding:4px 8px;border-radius:var(--radius-md);
      transition:background 0.15s, color 0.15s;line-height:1;
    }
    .sl-x:hover{background:var(--bg-hover);color:var(--text)}
    .sl-bd{flex:1;overflow-y:auto;padding:22px 24px}

    .page{display:none}.page.active{display:block;animation:pgIn 0.2s var(--ease)}
    #pg-inbox.active,#pg-crm.active{animation:none}
    .main.inb-active{padding:0;overflow:hidden}
    @keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

    @media(max-width:1100px){.kg{grid-template-columns:repeat(2,1fr)}.fw-kpis{grid-template-columns:repeat(2,1fr)}}
    /* ── Tablet landscape — bridge 900→1100 gap for KPI grid ── */
    @media(max-width:1024px){.kg-top{grid-template-columns:repeat(3,minmax(0,1fr))}}
    @media(max-width:900px){
      .sec{flex-direction:column}
      .inb-list{width:240px;min-width:240px}
      /* Stack simulator phone + right panel vertically */
      .sim-wrap-grid{grid-template-columns:1fr !important;justify-items:center}
      .sim-phone{margin:0 auto}
    }
    .mobile-nav-toggle{display:none;position:fixed;top:14px;left:14px;width:40px;height:40px;border-radius:10px;background:var(--sidebar-bg);color:#fff;border:1px solid rgba(255,255,255,0.1);cursor:pointer;z-index:55;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}
    .mobile-nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
    .mobile-nav-backdrop.open{opacity:1;pointer-events:auto}
    /* Mobile back button for the inbox chat — hidden on desktop, shown only on
       mobile where the inbox becomes a two-view stack (list <-> chat). */
    .inb-chat-back{display:none}
    /* Outcome row inside the slide panel (2026-07): the free stage <select>
       is retired — stages are system-owned. Only Won/Lost remain manual,
       because closing happens off-platform and nothing automatic records it. */
    .sl-stage-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px 12px;background:var(--bg-input);border-radius:var(--radius)}
    .sl-stage-label{font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em}
    .sl-outcome-btn{padding:8px 14px;min-height:36px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-white);font-size:var(--fs-base);font-weight:600;font-family:inherit;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
    .sl-outcome-btn.won{color:var(--green)}
    .sl-outcome-btn.won:hover{border-color:var(--green);background:var(--green-bg)}
    .sl-outcome-btn.lost{color:var(--red)}
    .sl-outcome-btn.lost:hover{border-color:var(--red);background:rgba(239,68,68,0.08)}

    @media(max-width:768px){
      .mobile-nav-toggle{display:flex}
      .mobile-nav-backdrop{display:block}
      .sidebar{position:fixed;transform:translateX(-100%);z-index:60}
      .sidebar.open{transform:translateX(0)}
      /* Drawer is always fully-labeled on mobile — no icon-only collapse mode */
      .sidebar,.sidebar.collapsed{width:var(--sidebar-w) !important;min-width:var(--sidebar-w) !important}
      .s-btn span{display:inline !important}
      .s-btn::after{display:none !important}
      .s-collapse-top{display:none}
      .main{padding:0;max-width:100vw}
      .main > .page{padding:20px 14px}
      .main > *{max-width:100%}
      .kg{grid-template-columns:repeat(2,1fr)}
      .ph-title{font-size:var(--fs-xl)}
      .tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch}
      .crm-board{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding:12px;gap:10px;max-height:calc(100vh - 160px)}
      .crm-col{scroll-snap-align:start;min-width:82vw;max-width:320px;min-width:min(82vw,280px)}
      /* Touch target — KPI cards need ≥44px height on mobile */
      .kc{min-height:44px}.leads-row .leads-td{padding-top:14px;padding-bottom:14px}
      .tc,.sfunnel-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
      /* Input zoom prevention — broaden to every numeric/date/tel type iOS zooms on */
      input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="tel"],input[type="url"],input[type="number"],input[type="date"],input[type="datetime-local"],select,textarea{font-size:16px !important}
      /* Hint the CRM swipes horizontally on mobile — subtle fade on right edge */
      .crm-board::after{content:'';position:sticky;right:0;top:0;width:24px;min-width:24px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9));pointer-events:none;align-self:stretch}

      /* ── Inbox two-view stack (Part 2) ──
         Default view is the lead list; tapping a conversation adds .chat-open
         to .inb-layout, which slides the chat pane in from the right over the
         whole viewport. Back arrow in the chat header returns to the list. */
      .inb-layout{left:0;right:0;width:100%}
      .inb-list{width:100%;min-width:0;border-right:0}
      .inb-chat{position:fixed;top:56px;left:0;right:0;bottom:0;transform:translateX(100%);transition:transform 0.28s var(--ease);z-index:50;background:var(--bg)}
      .inb-layout.chat-open .inb-chat{transform:translateX(0)}
      .inb-chat-back{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:0;color:var(--text);cursor:pointer;border-radius:var(--radius-md);font-size:var(--fs-xl);line-height:1;margin-right:4px;flex-shrink:0}
      .inb-chat-back:active{background:var(--bg-hover)}
      /* The "AI paused/unavailable, 24h window expired" note is long and
         white-space:nowrap. Cap its width on phones so it can't shove the
         lead name box to near-zero width (the overflowing unbreakable name
         text then painted underneath the note's opaque background, which
         read as the note "covering" the name). Name box now ellipsizes
         cleanly instead. Per Shariq mobile report 2026-07-27. */
      .inb-action-note{max-width:38vw}

      /* ── Slide panel full-screen (Part 1) ──
         Desktop panel is 500px; on mobile it covers the full viewport so the
         close button and action buttons stay reachable. */
      .sl-panel{width:100%;right:-100%;border-left:0}
      .sl-panel.open{right:0}
      .sl-x{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:24px}
      .sl-stage-row{margin-bottom:16px}

      /* ── Touch target enforcement (Part 5) ──
         iOS HIG + WCAG: interactive controls should be >= 44x44px hit area.
         .inb-chat-back was missed in this pass originally (still 40x40 from
         its base rule above) — bumped 2026-07-28 alongside the history-back
         fix for the "stuck lead chat" report. */
      .inb-icon-btn{min-width:44px;min-height:44px}
      .inb-chat-back{width:44px;height:44px;position:relative;z-index:5}

      /* ── Leads table horizontal scroll with sticky name column (Part 4) ──
         The table has 8 columns; rather than converting to cards, we let it
         scroll horizontally while anchoring the name column on the left so
         the operator always knows which row they're on. */
      .leads-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
      .leads-table{min-width:760px}
      .leads-table th.leads-th-name,
      .leads-table td.leads-td-name{position:sticky;left:0;z-index:2;background:var(--bg-white);box-shadow:2px 0 4px -2px rgba(0,0,0,0.08)}
      .leads-table thead th.leads-th-name{background:var(--bg-white);z-index:3}
      .leads-table tbody tr:hover td.leads-td-name{background:var(--bg-hover)}

      /* ── Settings > All Accounts row wrap (Part 6) ──
         Row is pic + name/handle + status pill + 2 buttons in a single
         non-wrapping flex line — fine on desktop, but with 12+ accounts and
         no flex-wrap it overflowed/clipped the buttons on phone widths.
         Let the pill+buttons drop to their own row under the identity block. */
      .mgmt-acct-row{flex-wrap:wrap;row-gap:10px}
      .mgmt-acct-info{flex:1 1 auto;min-width:120px}
      .mgmt-acct-row .mgmt-status-pill{flex-shrink:0}
      .mgmt-acct-row .mgmt-btn{flex:1 1 auto;min-height:36px;text-align:center}
    }
    @media(max-width:500px){
      .main > .page{padding:16px 12px}
      .kc,.fu-kpi-card{padding:14px}
      .sim-phone{width:100%;max-width:320px;height:auto;aspect-ratio:9/19.5}
    }
    /* ── Ultra-small phones (375px and below) ── */
    @media(max-width:375px){
      .kg-top,.kg-bot{grid-template-columns:1fr}
      .crm-col{min-width:280px}
      .main > .page{padding:12px 10px}
      .global-topbar{padding:0 14px}
      body{font-size:var(--fs-base)}
    }

    /* AI Test Simulator */
    .sim-phone{width:340px;height:640px;background:#0a0a0a;border-radius:44px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,0.18),inset 0 0 0 2px #1a1a1e;position:relative;flex-shrink:0}
    .sim-phone::after{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:108px;height:26px;background:#0a0a0a;border-radius:0 0 16px 16px;z-index:3}
    .sim-screen{width:100%;height:100%;background:#f2f2f7;border-radius:34px;display:flex;flex-direction:column;overflow:hidden;position:relative}
    .sim-header{padding:40px 16px 10px;background:rgba(247,247,247,0.9);backdrop-filter:blur(10px);border-bottom:0.5px solid rgba(0,0,0,0.1);text-align:center;flex-shrink:0}
    .sim-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#ff6b6b,#4ecdc4);margin:0 auto 4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;font-family:'DM Sans',sans-serif}
    .sim-name{font-size:var(--fs-base);font-weight:600;color:#000;font-family:-apple-system,BlinkMacSystemFont,'DM Sans',sans-serif}
    .sim-status{font-size:var(--fs-xs);color:#8e8e93;margin-top:1px}
    .sim-messages{flex:1;overflow-y:auto;padding:12px 10px 6px;display:flex;flex-direction:column;gap:2px}
    .sim-messages::-webkit-scrollbar{width:0}
    .sim-row{display:flex;margin:1px 0}
    .sim-row.lead{justify-content:flex-end}
    .sim-row.ai{justify-content:flex-start}
    .sim-bubble{max-width:76%;padding:7px 12px;border-radius:18px;font-size:var(--fs-md);line-height:1.35;word-wrap:break-word;font-family:-apple-system,BlinkMacSystemFont,'DM Sans',sans-serif;animation:simPop .18s ease-out}
    .sim-row.lead .sim-bubble{background:#007aff;color:#fff;border-bottom-right-radius:4px}
    .sim-row.ai .sim-bubble{background:#e9e9eb;color:#000;border-bottom-left-radius:4px}
    .sim-bubble a{color:inherit;text-decoration:underline}
    .sim-typing{display:inline-flex;gap:3px;padding:2px 0}
    .sim-typing span{width:6px;height:6px;border-radius:50%;background:#8e8e93;animation:simBlink 1.2s infinite ease-in-out}
    .sim-typing span:nth-child(2){animation-delay:.2s}
    .sim-typing span:nth-child(3){animation-delay:.4s}
    .sim-input-area{padding:8px 10px 12px;background:#fff;border-top:0.5px solid rgba(0,0,0,0.08);display:flex;gap:6px;align-items:center;flex-shrink:0}
    .sim-input{flex:1;padding:8px 14px;background:#f0f0f3;border:0.5px solid #d1d1d6;border-radius:18px;font-size:var(--fs-md);font-family:inherit;outline:none;color:#000}
    .sim-input:focus{border-color:#007aff}
    .sim-send{width:30px;height:30px;background:#007aff;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:var(--fs-lg);line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .1s}
    .sim-send:hover{transform:scale(1.05)}
    .sim-send:disabled{background:#c7c7cc;cursor:not-allowed;transform:none}
    .sim-stage-pill{display:inline-block;font-size:var(--fs-xs);padding:2px 8px;background:rgba(0,122,255,0.1);color:#007aff;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin:4px auto;align-self:center}
    @keyframes simBlink{0%,80%,100%{opacity:0.3;transform:scale(0.8)}40%{opacity:1;transform:scale(1)}}
    @keyframes simPop{from{opacity:0;transform:translateY(4px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}

    /* Follow-up status pill on lead rows */
    .fu-pill{display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:var(--radius-sm);margin-left:6px;text-transform:uppercase;white-space:nowrap}
    .fu-pill.sent{background:rgba(46,91,255,0.12);color:#2E5BFF}
    .fu-pill.sched{background:rgba(245,158,11,0.14);color:#b45309}
    .fu-pill.expired{background:rgba(239,68,68,0.14);color:#b91c1c}
    .fu-pill.paused{background:rgba(161,161,170,0.14);color:#52525b}
    /* Migration 026 — unified Manual pill (replaces legacy .expired in most cases).
       Sized byte-for-byte to .bdg (pill shape, 11px, sentence-case, no margin)
       so it sits on the same baseline as the in-conversation badge. Inset
       border removed — it added visual height that made the pill look taller
       than the stage badge. Solid-tone background reads as a peer to .bdg.
       Per Shariq 2026-05-17. */
    .fu-pill.manual{
      display:inline-flex;align-items:center;
      background:rgba(239,68,68,0.10);color:#b91c1c;
      font-size:var(--fs-sm);font-weight:600;letter-spacing:0.02em;text-transform:none;
      padding:3px 10px;border-radius:var(--radius-pill);
      margin-left:0;white-space:nowrap;
    }

    /* Inbox follow-up tabs */
    .inb-fu-tab{padding:5px 10px;background:transparent;border:1px solid transparent;border-radius:7px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;font-family:inherit;color:var(--text-muted);white-space:nowrap;transition:all .15s}
    .inb-fu-tab:hover{background:var(--bg-input);color:var(--text)}
    .inb-fu-tab.active{background:var(--accent-bg);color:var(--accent);border-color:rgba(46,91,255,0.25)}

    /* Follow-up slide-panel section */
    .fu-box{background:var(--bg-input);border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:14px}
    /* Wrapper used when the FU box is rendered as a top-level slide-panel row
       (outside the header). Pulls horizontal margins so the box edges align
       with the stage row + body content underneath, and zeroes the inner
       .fu-box margin so we don't double-stack vertical space. */
    .sl-fu-wrap{margin:14px 24px 0}
    .sl-fu-wrap .fu-box{margin-top:0}
    .sl-fu-wrap:empty{display:none}
    .fu-box-title{font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
    .fu-box-status{font-size:var(--fs-md);color:var(--text);margin-bottom:10px;line-height:1.5}
    /* Single horizontal line — the panel is wide enough now that Send /
       Pause / Open-in-IG fit comfortably side by side. Buttons can shrink
       gracefully on a narrow viewport instead of dropping to a new row. */
    .fu-btn-row{display:flex;gap:6px;flex-wrap:nowrap;align-items:center}
    .fu-btn{padding:7px 12px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:600;cursor:pointer;font-family:inherit;color:var(--text-secondary);transition:all .15s;white-space:nowrap;flex:0 1 auto;min-width:0}
    .fu-btn:hover{color:var(--text);background:var(--bg-hover)}
    .fu-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
    .fu-btn.primary:hover{background:var(--accent-hover)}
    .fu-btn.active{background:var(--yellow-bg);color:var(--yellow);border-color:var(--yellow)}
    .fu-btn:disabled{opacity:.5;cursor:not-allowed}

    /* Dashboard FU KPI widget */
    .fu-kpi{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
    .fu-kpi-card{background:var(--bg-white);border:1px solid var(--border);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:10px;cursor:default}
    .fu-kpi-card.clickable{cursor:pointer;transition:all .15s}
    .fu-kpi-card.clickable:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
    .fu-kpi-val{font-size:20px;font-weight:700;color:var(--text)}
    .fu-kpi-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}

    /* Test Follow-up panel */
    /* Action buttons (Analyze / Preview FU1 / Preview FU2) — hover styles */
    .sim-action-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.08)}
    #simAnalyzeBtn:not(:disabled):hover{background:var(--accent-hover)}
    #simFu1Btn:not(:disabled):hover,#simFu2Btn:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}
    .sim-fu-label{align-self:center;font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;background:rgba(0,0,0,0.08);color:#525252;border-radius:var(--radius-md);text-transform:uppercase;letter-spacing:.06em;margin:8px 0 2px}

    /* Admin badge in sidebar */
    .admin-badge-wrap{padding:10px 12px;background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.25);border-radius:10px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
    .admin-badge-dot{width:8px;height:8px;border-radius:50%;background:#a78bfa;box-shadow:0 0 10px #a78bfa;flex-shrink:0;pointer-events:none}
    .admin-badge-dot[aria-hidden]{}
    .admin-badge-text{flex:1;min-width:0}
    .admin-badge-label{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#a78bfa;margin-bottom:2px}
    .admin-badge-email{font-size:var(--fs-sm);color:rgba(255,255,255,0.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}

    /* Account management cards */
    .mgmt-acct-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border-light)}
    .mgmt-acct-row:last-child{border-bottom:none}
    .mgmt-acct-pic{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--accent-bg)}
    .mgmt-acct-pic-ph{width:34px;height:34px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-md);flex-shrink:0}
    .mgmt-acct-info{flex:1;min-width:0}
    .mgmt-acct-name{font-size:var(--fs-md);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .mgmt-acct-sub{font-size:var(--fs-sm);color:var(--text-muted);margin-top:2px}
    .mgmt-status-pill{padding:3px 10px;border-radius:10px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
    .mgmt-status-pill.active{background:var(--green-bg);color:var(--green)}
    .mgmt-status-pill.paused{background:var(--yellow-bg);color:var(--yellow)}
    .mgmt-btn{padding:6px 12px;background:transparent;border:1px solid var(--border);border-radius:7px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;font-family:inherit;color:var(--text-secondary);transition:all .15s;white-space:nowrap}
    .mgmt-btn:hover{background:var(--bg-input);color:var(--text)}
    .mgmt-btn.danger{color:var(--red);border-color:transparent}
    .mgmt-btn.danger:hover{background:var(--red-bg)}

    /* Sub-tabs (segmented control) */
    .tab-bar{display:flex;gap:2px;margin-bottom:28px;padding:4px;background:var(--bg-input);border-radius:10px;width:fit-content;max-width:100%;overflow-x:auto;flex-wrap:nowrap}
    .tab-btn{padding:8px 18px;background:transparent;border:none;border-radius:7px;font-size:var(--fs-md);font-weight:500;color:var(--text-secondary);cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
    .tab-btn:hover{color:var(--text)}
    .tab-btn.active{background:var(--bg-white);color:var(--text);font-weight:600;box-shadow:var(--shadow-sm)}

    /* AI Critic panel */
    .crit-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
    .crit-score-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
    .crit-score-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
    .crit-score{display:inline-flex;align-items:baseline;gap:2px;padding:6px 14px;background:var(--accent-bg);border-radius:10px;font-weight:800;color:var(--accent);line-height:1}
    .crit-score-num{font-size:26px;font-weight:800;letter-spacing:-0.02em}
    .crit-score-denom{font-size:26px;font-weight:800;opacity:.55}
    .crit-score.good{background:var(--green-bg);color:var(--green)}
    .crit-score.warn{background:var(--yellow-bg);color:var(--yellow)}
    .crit-score.bad{background:var(--red-bg);color:var(--red)}
    .crit-summary{font-size:var(--fs-md);color:var(--text-secondary);line-height:1.5;margin-bottom:16px;padding:12px 14px;background:var(--bg-input);border-radius:10px;border-left:3px solid var(--accent)}
    .crit-flag{background:var(--bg-white);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;display:flex;gap:12px}
    .crit-flag.high{border-left:4px solid var(--red)}
    .crit-flag.medium{border-left:4px solid var(--yellow)}
    .crit-flag.low{border-left:4px solid var(--text-muted)}
    .crit-sev{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:var(--radius-sm);height:fit-content;flex-shrink:0}
    .crit-sev.high{background:var(--red-bg);color:var(--red)}
    .crit-sev.medium{background:var(--yellow-bg);color:var(--yellow)}
    .crit-sev.low{background:var(--bg-input);color:var(--text-muted)}
    .crit-body{flex:1;min-width:0}
    .crit-cat{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
    .crit-quote{font-size:var(--fs-base);color:var(--text);background:var(--bg-input);border-radius:var(--radius-sm);padding:6px 10px;margin:6px 0;font-style:italic;border-left:2px solid var(--text-muted)}
    .crit-explain{font-size:var(--fs-md);color:var(--text-secondary);line-height:1.5;margin-bottom:10px}
    .crit-fix-label{font-size:var(--fs-xs);font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
    .crit-fix{font-size:var(--fs-base);color:var(--text);background:var(--accent-bg);border-radius:var(--radius-md);padding:10px 12px;margin-bottom:10px;line-height:1.5;border:1px dashed var(--accent)}
    .crit-apply-btn{padding:7px 14px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
    .crit-apply-btn:hover{background:var(--accent-hover)}
    .crit-apply-btn.applied{background:var(--green);cursor:default}
    .crit-empty{text-align:center;padding:30px 20px;color:var(--text-muted);font-size:var(--fs-md)}

    /* ──────── UX POLISH PASS ──────── */

    /* Universal focus ring for keyboard accessibility */
    input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
      outline:2px solid rgba(46,91,255,0.5);
      outline-offset:2px;
    }
    input:focus,select:focus,textarea:focus{
      border-color:var(--accent) !important;
    }

    /* Serif accent (for display/hero headlines) */
    .serif-accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-0.01em}

    /* Polished page header */
    .ph-title{font-family:'DM Sans',system-ui,sans-serif;font-size:26px;font-weight:600;letter-spacing:-0.035em;color:var(--text);line-height:1.1}
    .ph-title .serif-accent{font-size:1.05em;margin-right:2px}

    /* KPI card improvements — accent line on hover */
    .kc{cursor:default}
    .kc:hover::before{background:var(--accent)}
    .kc::before{transition:background 0.2s var(--ease)}

    /* Follow-up KPI card hover */
    .fu-kpi-card.clickable:active{transform:translateY(0)}
    .fu-kpi-card:not(.clickable):hover{border-color:var(--accent)}

    /* Inbox item polished hover */
    .inb-item{transition:background 0.12s var(--ease),border-color 0.12s var(--ease)}

    /* CRM cards — smoother transitions */
    .crm-card{transition:all 0.18s cubic-bezier(0.16,1,0.3,1)}
    .crm-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(46,91,255,0.12);transform:translateY(-1px)}

    /* Empty states */
    .empty-state{text-align:center;padding:40px 24px;color:var(--text-muted);font-size:var(--fs-md);line-height:1.5;display:flex;flex-direction:column;align-items:center;gap:10px}
    .empty-state-icon{width:44px;height:44px;border-radius:50%;background:var(--bg-input);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
    .empty-state-icon svg{width:20px;height:20px}
    .empty-state-title{font-size:14.5px;font-weight:600;color:var(--text);letter-spacing:-0.01em}
    .empty-state-desc{font-size:12.5px;color:var(--text-muted);max-width:280px;line-height:1.55}
    .empty-state-action{margin-top:8px;padding:7px 14px;background:var(--bg-white);border:1px solid var(--border);color:var(--text-secondary);font-family:inherit;font-size:var(--fs-base);font-weight:500;border-radius:var(--radius-md);cursor:pointer;transition:all .15s}
    .empty-state-action:hover{border-color:var(--accent);color:var(--accent)}

    /* Error card — shown when an API call fails */
    .error-card{text-align:center;padding:32px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;background:rgba(239,68,68,0.03);border:1px solid rgba(239,68,68,0.15);border-radius:12px;margin:20px}
    .error-card-icon{width:40px;height:40px;border-radius:50%;background:rgba(239,68,68,0.08);display:flex;align-items:center;justify-content:center;color:var(--red)}
    .error-card-icon svg{width:20px;height:20px}
    .error-card-msg{font-size:13.5px;font-weight:500;color:var(--text);letter-spacing:-0.005em;max-width:320px;line-height:1.5}
    .error-card-retry{margin-top:4px;padding:7px 16px;background:var(--red);color:#fff;font-family:inherit;font-size:var(--fs-base);font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:opacity .15s}
    .error-card-retry:hover{opacity:0.9}

    /* Scrollbar styling (subtle, premium feel) */
    .main::-webkit-scrollbar,.inb-items::-webkit-scrollbar,.crm-col-body::-webkit-scrollbar,.sl-bd::-webkit-scrollbar,.inb-chat-bd::-webkit-scrollbar{width:8px;height:8px}
    .main::-webkit-scrollbar-track,.inb-items::-webkit-scrollbar-track,.crm-col-body::-webkit-scrollbar-track,.sl-bd::-webkit-scrollbar-track,.inb-chat-bd::-webkit-scrollbar-track{background:transparent}
    .main::-webkit-scrollbar-thumb,.inb-items::-webkit-scrollbar-thumb,.crm-col-body::-webkit-scrollbar-thumb,.sl-bd::-webkit-scrollbar-thumb,.inb-chat-bd::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:var(--radius-xs);transition:background .15s}
    .main::-webkit-scrollbar-thumb:hover,.inb-items::-webkit-scrollbar-thumb:hover,.crm-col-body::-webkit-scrollbar-thumb:hover,.sl-bd::-webkit-scrollbar-thumb:hover,.inb-chat-bd::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.22)}

    /* Better text selection color */
    ::selection{background:rgba(46,91,255,0.2);color:var(--text)}

    /* Primary button — generic polish (landing-matched choreography) */
    button.btn-primary,.btn-primary{padding:11px 22px;background:linear-gradient(180deg,var(--accent),var(--accent-hover));color:#fff;border:none;border-radius:10px;font-size:var(--fs-md);font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.22s cubic-bezier(0.16,1,0.3,1);box-shadow:0 2px 8px rgba(46,91,255,0.25),inset 0 1px 0 rgba(255,255,255,0.15);letter-spacing:-0.005em}
    button.btn-primary:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(46,91,255,0.32),inset 0 1px 0 rgba(255,255,255,0.18)}
    button.btn-primary:active,.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(46,91,255,0.22)}
    button.btn-primary:disabled,.btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none}

    /* Secondary / outline button (matches landing) */
    button.btn-outline,.btn-outline{padding:11px 20px;background:var(--bg-white);color:var(--text);border:1px solid var(--border);border-radius:10px;font-size:var(--fs-md);font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.22s cubic-bezier(0.16,1,0.3,1);box-shadow:var(--shadow-sm);letter-spacing:-0.005em}
    button.btn-outline:hover,.btn-outline:hover{border-color:rgba(46,91,255,0.4);color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
    button.btn-outline:active,.btn-outline:active{transform:translateY(0);box-shadow:var(--shadow-sm)}

    /* Upgrade chart card with resting shadow */
    .chart-card{box-shadow:var(--shadow-sm)}
    .chart-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:rgba(46,91,255,0.18)}

    /* Funnel wrap + sfunnel-wrap — resting elevation */
    .fw,.sfunnel-wrap{box-shadow:var(--shadow-sm);transition:box-shadow 0.25s var(--ease)}
    .fw:hover,.sfunnel-wrap:hover{box-shadow:var(--shadow-md)}

    /* Follow-up KPI cards — resting shadow */
    .fu-kpi-card{box-shadow:var(--shadow-sm)}

    /* CRM cards — resting elevation + refined drag state */
    .crm-card{box-shadow:var(--shadow-sm)}
    .crm-card:hover{box-shadow:var(--shadow-md);border-color:rgba(46,91,255,0.35);transform:translateY(-1px)}
    .crm-card.dragging{opacity:0.6;transform:scale(0.97) rotate(1.5deg);box-shadow:var(--shadow-lg);border-color:var(--accent)}

    /* Table container — resting shadow */
    .tc{box-shadow:var(--shadow-sm)}

    /* Stat pills / date-range buttons — hover lift */
    .db-btn{transition:all 0.2s cubic-bezier(0.16,1,0.3,1)}
    .db-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
    .db-btn.active{box-shadow:0 4px 14px rgba(46,91,255,0.3)}

    /* Inbox send button — match primary choreography */
    .inb-chat-in button{background:linear-gradient(180deg,var(--accent),var(--accent-hover));box-shadow:0 2px 8px rgba(46,91,255,0.25),inset 0 1px 0 rgba(255,255,255,0.15);transition:all 0.2s var(--ease)}
    .inb-chat-in button:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(46,91,255,0.32),inset 0 1px 0 rgba(255,255,255,0.18)}

    /* Tab bar — active tab slight elevation */
    .tab-btn.active{box-shadow:0 1px 3px rgba(14,18,30,0.05),0 2px 8px rgba(14,18,30,0.04)}

    /* ──────── PHASE 4: COMPONENT POLISH ──────── */

    /* Empty states — bigger, tinted, more intentional */
    .empty-state{padding:56px 24px;gap:14px}
    .empty-state-icon{
      width:64px;height:64px;border-radius:16px;
      background:linear-gradient(135deg,rgba(46,91,255,0.08),rgba(124,58,237,0.08));
      border:1px solid rgba(46,91,255,0.12);
      color:var(--accent);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 2px 12px rgba(46,91,255,0.06);
    }
    .empty-state-icon svg{width:26px;height:26px;stroke-width:1.6}
    .empty-state-title{font-size:16px;font-weight:600;letter-spacing:-0.015em}

    /* Slide-panel overlay — deeper blur */
    .sl-ov{background:rgba(12,14,22,0.25);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
    .sl-panel{border-top-left-radius:16px;border-bottom-left-radius:16px;box-shadow:-24px 0 64px rgba(14,18,30,0.15),-1px 0 0 var(--border)}

    /* Chat bubbles — AI gets gradient, entry animation */
    .cb.ai{
      background:linear-gradient(135deg,#2E5BFF 0%,#2E5BFF 100%);
      box-shadow:0 2px 10px rgba(46,91,255,0.22),inset 0 1px 0 rgba(255,255,255,0.14);
    }
    .cb.lead{box-shadow:0 1px 2px rgba(14,18,30,0.04)}
    /* Migration 026 — operator-typed assistant bubble. Distinct from AI so the
       operator can scan the thread and instantly see who said what. Keeps the
       same right-side alignment as .cb.ai but uses a charcoal fill, not the
       blue brand gradient. "You" label rendered in the avatar slot. */
    .cb.operator{
      background:#1f2937;color:#fff;
      border-bottom-right-radius:4px;font-weight:500;
      box-shadow:0 2px 8px rgba(15,23,42,0.18),inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .msg-group-pic-ph.operator{background:#1f2937;color:#fff}
    .msg-group-pic-ph.operator svg{width:15px;height:15px;display:block}
    /* Stage badge + Expired pill grouping — flex gap keeps stacked/wrapped
       badges from touching (leads table Stage cell, slide-over header). */
    .stage-bdg-group{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
    /* Migration 028 — voice-note label rendered above the bubble that holds
       the Gemini transcript. Makes it obvious to the operator that the prospect
       didn't type this; they sent a voice note and dmset.ai listened to it. */
    .vn-badge{
      display:inline-flex;align-items:center;gap:4px;
      font-size:10.5px;font-weight:600;letter-spacing:.02em;
      color:var(--text-muted);margin-bottom:3px;
      text-transform:uppercase;
    }
    .vn-badge::before{content:"\1F3A4";font-size:var(--fs-sm)}
    /* Manual-mode banner that replaces the composer when the open lead is
       in manual mode. Comes with a Resume AI button. */
    .inb-manual-banner{
      display:flex;align-items:center;gap:10px;padding:12px 16px;
      background:rgba(239,68,68,0.06);border-top:1px solid rgba(239,68,68,0.16);
      font-size:var(--fs-md);color:var(--text);
    }
    .inb-manual-banner-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(239,68,68,0.14);color:#b91c1c;font-size:var(--fs-base);font-weight:700}
    .inb-manual-banner-text{flex:1;min-width:0;line-height:1.35}
    .inb-manual-banner-text small{display:block;color:var(--text-muted);font-size:var(--fs-sm);font-weight:500;margin-top:2px}
    .inb-manual-resume{padding:7px 14px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
    .inb-manual-resume:hover{filter:brightness(1.08)}
    /* Passive sibling of .inb-manual-resume — rendered when the manual reason
       is window_expired, where there's nothing the operator can do until the
       lead replies (AI auto-resumes on inbound). Reads as info, not action. */
    .inb-manual-banner-wait{flex:0 0 auto;padding:7px 12px;background:transparent;border:1px dashed rgba(239,68,68,0.3);border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:500;color:#b91c1c;letter-spacing:.02em;white-space:nowrap}
    /* Take-over link sits next to the composer on non-manual leads. Subtle. */
    .inb-takeover-link{position:absolute;right:12px;top:-26px;font-size:var(--fs-sm);color:var(--text-muted);cursor:pointer;background:transparent;border:none;padding:2px 6px;border-radius:var(--radius-xs);font-family:inherit}
    .inb-takeover-link:hover{color:var(--text);background:var(--bg-hover)}
    @keyframes cbPop{from{opacity:0;transform:translateY(4px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
    .msg-group{animation:cbPop 0.22s var(--ease)}

    /* Inbox list active item — gradient left bar, not flat blue */
    .inb-item.active{
      background:linear-gradient(90deg,rgba(46,91,255,0.06) 0%,transparent 60%);
      border-left:3px solid;
      border-image:linear-gradient(180deg,#2E5BFF,#7c3aed) 1;
      padding-left:13px;
    }

    /* Table rows — polished header + hover */
    thead{background:linear-gradient(180deg,#fafbff,var(--bg))}
    th{font-size:10.5px;letter-spacing:0.08em;color:var(--text-muted)}
    tbody tr{transition:background 0.15s var(--ease)}
    tbody tr:hover td{background:rgba(46,91,255,0.04) !important}

    /* Inbox chat header subtle gradient underline */
    .inb-chat-hd{box-shadow:0 1px 0 var(--border),0 4px 18px -12px rgba(14,18,30,0.06)}

    /* Funnel stages — richer fill gradient on hover */
    .vf-stage{transition:filter 0.2s var(--ease),transform 0.2s var(--ease),box-shadow 0.25s var(--ease)}

    /* Account dropdown polish */
    .acct-dd{backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);background:rgba(24,24,28,0.92)}

    /* Admin badge — softer gradient bg */
    .admin-badge-wrap{background:linear-gradient(135deg,rgba(139,92,246,0.15),rgba(139,92,246,0.08));box-shadow:inset 0 1px 0 rgba(167,139,250,0.1)}

    /* Alert banner — gradient bg */
    .alrt{background:linear-gradient(90deg,rgba(245,158,11,0.1),rgba(245,158,11,0.04))}

    /* Row-cap truncation banner — shown when getDashboardStats returns truncated:true */
    .trunc-banner{
      background:linear-gradient(90deg,rgba(46,91,255,0.09),rgba(46,91,255,0.04));
      border:1px solid rgba(46,91,255,0.22);
      border-radius:var(--radius);
      padding:12px 16px;
      margin-bottom:18px;
      font-size:var(--fs-md);color:var(--text);font-weight:500;
      display:flex;align-items:center;gap:10px;line-height:1.45;
    }
    .trunc-banner::before{
      content:'';width:7px;height:7px;border-radius:50%;
      background:var(--accent);flex-shrink:0;
    }
    .trunc-banner b{font-weight:700;color:var(--text)}

    /* Crit (AI critic) — elevated cards */
    .crit-flag{box-shadow:var(--shadow-sm);transition:box-shadow 0.2s var(--ease),transform 0.2s var(--ease)}
    .crit-flag:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}

    /* Global search focus — gradient glow */
    .global-search:focus{box-shadow:0 0 0 3px rgba(46,91,255,0.12),0 2px 8px rgba(46,91,255,0.08)}

    /* Refined text selection — gradient hint */
    ::selection{background:rgba(124,58,237,0.18);color:var(--text)}


    /* Divider */
    .divider{height:1px;background:var(--border-light);margin:20px 0}

    /* Loading shimmer effect on skeleton states (future use) */
    @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
    .skeleton{background:linear-gradient(90deg,var(--skel-base) 25%,var(--skel-shine) 50%,var(--skel-base) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}

    /* Better section header — "eyebrow" style */
    .section-eyebrow{font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:12px}

    /* Premium card variant with subtle gradient on hover */
    .card-premium{background:var(--bg-white);border:1px solid var(--border);border-radius:14px;transition:all 0.18s var(--ease)}
    .card-premium:hover{border-color:rgba(46,91,255,0.25);box-shadow:var(--shadow-md)}

    /* Global top search bar — Close CRM style: flush header strip, seamless with sidebar */
    .global-topbar{display:flex;align-items:center;gap:16px;margin:0;padding:0 28px;position:sticky;top:0;z-index:30;background:var(--bg-white);border-bottom:1px solid var(--border);height:56px;flex-shrink:0}
    /* Strip native search clear button — our design handles it */
    .global-search::-webkit-search-cancel-button,.global-search::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
    .global-search-wrap{position:relative;width:100%;max-width:560px}
    .global-search{width:100%;padding:9px 80px 9px 38px;background:var(--bg-input);border:1px solid transparent;color:var(--text);border-radius:10px;font-size:var(--fs-md);font-family:inherit;outline:none;transition:all .15s}
    .global-search:hover{background:var(--bg-white);border-color:var(--border)}
    .global-search:focus{background:var(--bg-white);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
    .global-search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-muted);pointer-events:none}
    .global-search-kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:var(--fs-xs);font-weight:600;padding:3px 7px;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:var(--text-muted);font-family:inherit;pointer-events:none}
    .global-search-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg-white);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);z-index:100;max-height:420px;overflow-y:auto;padding:6px}
    .global-search-dropdown.open{display:block}
    .gs-section-title{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:10px 12px 6px}
    .gs-scope-hint{font-size:10.5px;color:var(--text-muted);padding:8px 12px 0;font-style:italic;opacity:.7}
    .gs-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-md);cursor:pointer;transition:background .12s}
    .gs-item:hover,.gs-item.active{background:var(--bg-input)}
    .gs-item-pic{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--accent-bg);flex-shrink:0}
    .gs-item-pic-ph{width:30px;height:30px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm);flex-shrink:0}
    .gs-item-text{flex:1;min-width:0}
    .gs-item-name{font-size:var(--fs-md);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .gs-item-sub{font-size:var(--fs-sm);color:var(--text-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    /* Conversation-content match snippet — appears below sub when the hit
       came from /api/search-messages instead of name/handle filter. */
    .gs-item-snippet{font-size:var(--fs-sm);color:var(--text-secondary);margin-top:4px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--bg-input);padding:4px 8px;border-radius:var(--radius-sm)}
    .gs-item-snippet-who{font-weight:700;color:var(--text-muted);margin-right:4px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
    .gs-empty{padding:18px 14px;text-align:center;color:var(--text-muted);font-size:var(--fs-base)}
    @media(max-width:768px){
      .global-topbar{padding-left:68px;padding-right:14px}
      .global-search-kbd{display:none}
    }

    /* Centered bar loader */
    .loader-wrap{display:flex;align-items:center;justify-content:center;min-height:200px;padding:40px 20px;width:100%}
    .bar-loader{width:220px;height:3px;background:var(--border-light);border-radius:var(--radius-xs);overflow:hidden;position:relative}
    .bar-loader::before{content:'';position:absolute;top:0;left:0;height:100%;width:40%;background:linear-gradient(90deg,transparent 0%,var(--accent) 50%,transparent 100%);border-radius:var(--radius-xs);animation:barLoad 1.1s cubic-bezier(0.4,0.0,0.2,1) infinite}
    .loader-label{font-size:var(--fs-base);color:var(--text-muted);margin-top:14px;letter-spacing:.02em;font-weight:500}
    .loader-stack{display:flex;flex-direction:column;align-items:center}
    @keyframes barLoad{0%{left:-40%}100%{left:100%}}

    /* Skeleton placeholders — used during dashboard data load to prevent layout shift */
    .skel-line{background:linear-gradient(90deg,var(--skel-base) 0%,var(--skel-shine) 50%,var(--skel-base) 100%);background-size:200% 100%;border-radius:var(--radius-sm);animation:shimmer 1.6s ease-in-out infinite;display:block}
    .skel-sm{height:10px;width:58%}
    .skel-md{height:14px;width:48%}
    .skel-lg{height:28px;width:42%;margin-top:10px}
    .skel-xl{height:36px;width:50%;margin-top:10px}
    .skel-chip{height:16px;width:72px;border-radius:var(--radius-pill);margin-top:10px}
    .skel-funnel-row{height:52px;min-width:280px;border-radius:10px;background:linear-gradient(90deg,var(--skel-base) 0%,var(--skel-shine) 50%,var(--skel-base) 100%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}
    .skel-row{height:42px;border-radius:var(--radius-md);background:linear-gradient(90deg,var(--skel-base) 0%,var(--skel-shine) 50%,var(--skel-base) 100%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite;margin-bottom:10px}
    @keyframes shimmer{0%,100%{background-position:200% 0}50%{background-position:-200% 0}}

    /* Subtle fade/lift when rendered cards swap in (skeleton → real) */
    @keyframes kcIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
    .an-enter .kc,.an-enter .fw,.an-enter .an-seg-wrap,.an-enter .an-table-wrap{animation:kcIn .28s var(--ease-out) both}
    .an-enter .fw{animation-delay:.04s}
    .an-enter .an-seg-wrap{animation-delay:.08s}
    .an-enter .an-table-wrap{animation-delay:.12s}

    /* Save-success flash (green button with animated checkmark) */
    @keyframes checkPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}}
    .btn-saved{background:var(--green) !important;color:#fff !important;border-color:var(--green) !important;box-shadow:0 2px 8px rgba(16,185,129,0.25) !important}
    .btn-saved .saved-check{display:inline-block;margin-right:6px;animation:checkPop .35s cubic-bezier(0.34,1.56,0.64,1) both}

    /* Quick Prompt Edits panel */
    .qc-panel{background:var(--bg-white);border:1px solid var(--border);border-radius:12px;padding:16px}
    .qc-title{font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px}
    .qc-sub{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:10px;line-height:1.4}
    .qc-ta{width:100%;min-height:64px;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-md);font-size:var(--fs-md);font-family:inherit;outline:none;resize:vertical;line-height:1.45}
    .qc-ta:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
    .qc-row{display:flex;align-items:center;gap:10px;margin-top:10px}
    .qc-btn{padding:9px 16px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;min-width:120px}
    .qc-btn:hover:not(:disabled){background:var(--accent-hover)}
    .qc-btn:disabled{opacity:.7;cursor:not-allowed}
    .qc-status{font-size:var(--fs-sm);color:var(--text-muted)}

    /* ──────── PHASE 2: SIGNATURE ELEMENTS (ambient orbs, gradient accents) ──────── */

    /* Ambient gradient orbs — subtle atmosphere, ported from landing page */
    .main{position:relative;isolation:isolate}
    .main::before,.main::after{
      content:'';position:absolute;top:0;pointer-events:none;
      border-radius:50%;filter:blur(80px);
      z-index:-1;opacity:0.55;
      will-change:transform;
    }
    .main::before{
      left:8%;width:560px;height:560px;
      background:radial-gradient(circle,rgba(46,91,255,0.14) 0%,transparent 65%);
      transform:translateY(-220px);
      animation:orb-drift 22s cubic-bezier(0.16,1,0.3,1) infinite;
    }
    .main::after{
      right:6%;width:460px;height:460px;
      background:radial-gradient(circle,rgba(124,58,237,0.11) 0%,transparent 65%);
      transform:translateY(-140px);
      animation:orb-drift-2 28s cubic-bezier(0.16,1,0.3,1) infinite;
    }
    .main > *{position:relative;z-index:1}
    /* Topbar must out-stack page content so the global-search dropdown renders above page headers */
    .main > .global-topbar{z-index:40}
    /* Hide orbs on full-bleed inbox layout */
    .main.inb-active::before,.main.inb-active::after{display:none}
    @keyframes orb-drift{0%,100%{transform:translate(0,-220px) scale(1)}50%{transform:translate(-60px,-180px) scale(1.15)}}
    @keyframes orb-drift-2{0%,100%{transform:translate(0,-140px) scale(1)}50%{transform:translate(60px,-170px) scale(1.1)}}
    @media (prefers-reduced-motion: reduce){
      .main::before,.main::after{animation:none}
    }

    /* Top bar sits flush above orbs */
    .global-topbar{background:rgba(255,255,255,0.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}

    /* KPI cards — gradient accent bar (135deg blue → violet on hover / alerts) */
    .kc::before{
      background:linear-gradient(180deg,rgba(46,91,255,0.25),rgba(124,58,237,0.18));
      opacity:0.35;
    }
    .kc:hover::before{
      background:linear-gradient(180deg,#2E5BFF,#7c3aed);
      opacity:1;
    }
    .kc.kc-alert::before{
      background:linear-gradient(180deg,#ef4444,#b91c1c) !important;
      opacity:1 !important;
    }
    .kc{box-shadow:var(--shadow-sm)}
    .kc:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}

    /* Funnel stage cards already use colored bg — add subtle inner sheen + shadow */
    .vf-stage{box-shadow:0 4px 14px rgba(14,18,30,0.08),inset 0 1px 0 rgba(255,255,255,0.2)}
    .vf-stage:hover{box-shadow:0 8px 22px rgba(14,18,30,0.12),inset 0 1px 0 rgba(255,255,255,0.25)}

    /* Premium cards get a thin gradient top-accent on hover */
    .card-premium{position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
    .card-premium::before{
      content:'';position:absolute;top:0;left:0;right:0;height:2px;
      background:linear-gradient(90deg,#2E5BFF 0%,#7c3aed 50%,#2E5BFF 100%);
      opacity:0;transition:opacity 0.25s var(--ease);
    }
    .card-premium:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
    .card-premium:hover::before{opacity:1}

    /* Section eyebrows get a tiny accent line for prestige */
    .section-eyebrow{display:inline-flex;align-items:center;gap:8px}
    .section-eyebrow::before{
      content:'';width:14px;height:1.5px;border-radius:2px;
      background:linear-gradient(90deg,#2E5BFF,#7c3aed);
    }

    /* Sidebar logo — glow halo ring (matches landing's glowing brand icon) */
    .s-logo-icon{box-shadow:0 0 0 1px rgba(46,91,255,0.3),0 0 16px rgba(46,91,255,0.45),inset 0 1px 0 rgba(255,255,255,0.18)}
    .s-logo-icon:hover{box-shadow:0 0 0 1px rgba(46,91,255,0.4),0 0 22px rgba(46,91,255,0.6),inset 0 1px 0 rgba(255,255,255,0.22)}

    /* Active sidebar nav — gradient left-bar instead of flat accent */
    .s-btn.active::before{
      width:3px;height:22px;
      background:linear-gradient(180deg,#2E5BFF,#7c3aed);
      box-shadow:0 0 12px rgba(46,91,255,0.5);
      border-radius:0 3px 3px 0;
    }

    /* ============================================================
       v2 redesign — dashboard chrome (sidebar + topbar) + analytics page
       Aligned with dmset.ai landing page. Solid cobalt only.
       Scoped via .v2 on body to allow incremental rollout.
       ============================================================ */
    body.v2{
      --v2-bg:#ffffff;
      --v2-bg-soft:#fafbff;
      --v2-bg-alt:#f4f5fa;
      --v2-bg-hover:#f3f5fb;
      --v2-bg-input:#f6f8fd;
      --v2-text:#0b0d14;
      --v2-text-2:#3a3f52;
      --v2-text-3:#6a7084;
      --v2-text-mute:#9aa0b4;
      --v2-accent:#2E5BFF;
      --v2-accent-2:#1B3BCC;
      --v2-accent-bg:rgba(46,91,255,0.07);
      --v2-accent-bg2:rgba(46,91,255,0.12);
      --v2-green:#10b981;
      --v2-green-bg:rgba(16,185,129,0.10);
      --v2-amber:#f59e0b;
      --v2-amber-bg:rgba(245,158,11,0.12);
      --v2-red:#ef4444;
      --v2-red-bg:rgba(239,68,68,0.10);
      --v2-violet:#7c3aed;
      --v2-violet-bg:rgba(124,58,237,0.10);
      --v2-border:#e7e9ef;
      --v2-border-soft:#eef0f5;
      --v2-border-light:#f3f4f8;
      --v2-shadow-sm:0 1px 2px rgba(14,18,30,0.04);
      --v2-shadow:0 2px 8px rgba(14,18,30,0.05),0 1px 3px rgba(14,18,30,0.03);
      background:var(--v2-bg-alt);
    }

    /* ── v2 SIDEBAR — light rail, labelled nav, account chip at bottom ── */
    body.v2 .sidebar{
      width:232px;min-width:232px;
      background:var(--v2-bg);
      border-right:1px solid var(--v2-border-soft);
      padding:16px 14px 14px;
      gap:8px;
    }
    body.v2 .sidebar.collapsed{width:64px;min-width:64px;padding:14px 8px}
    body.v2 .s-logo{
      height:36px;padding:0 4px;margin-bottom:8px;border-bottom:0;
    }
    body.v2 .s-logo-mark,
    body.v2 .s-logo-text{color:var(--v2-text);font-size:18px}
    body.v2 .s-logo-mark .wm-dot,
    body.v2 .s-logo-text .wm-dot{color:var(--v2-accent)}
    body.v2 .s-logo-text .wm-ai{color:var(--v2-accent)}
    body.v2 .s-collapse-top{color:var(--v2-text-mute)}
    body.v2 .s-collapse-top:hover{background:var(--v2-bg-hover);color:var(--v2-text)}
    body.v2 .s-nav{padding:0;gap:2px;margin-top:4px}
    body.v2 .s-btn{
      height:38px;padding:0 11px;gap:11px;
      color:var(--v2-text-2);
      font-size:var(--fs-md);font-weight:500;
      border-radius:9px;
    }
    body.v2 .s-btn:hover{background:var(--v2-bg-hover);color:var(--v2-text)}
    body.v2 .s-btn.active{background:var(--v2-accent-bg);color:var(--v2-accent);font-weight:600}
    body.v2 .s-btn.active::before{display:none}
    body.v2 .s-btn svg{width:17px;height:17px;stroke-width:1.7}
    body.v2 .s-btn-label{font-size:var(--fs-md);font-weight:inherit}
    body.v2 .s-btn-count{
      background:var(--v2-red);color:#fff;
      box-shadow:0 0 0 2px rgba(239,68,68,0.18);
    }
    body.v2 .s-bottom{
      border-top:1px solid var(--v2-border-soft);
      padding:8px 0 0;margin-top:6px;gap:4px;
    }
    body.v2 .s-settings-btn{margin-bottom:4px !important}
    body.v2 .s-profile-row{
      padding:8px 8px;border-radius:9px;
    }
    body.v2 .s-profile-row:hover{background:var(--v2-bg-hover)}
    body.v2 .s-profile,
    body.v2 .s-profile-ph{
      border:1px solid var(--v2-border);
    }
    body.v2 .s-profile-ph{
      background:var(--v2-accent-bg);color:var(--v2-accent);
    }
    body.v2 .s-profile-name{color:var(--v2-text)}
    body.v2 .s-profile-handle{color:var(--v2-text-mute)}
    body.v2 #sAdminBadge{color:var(--v2-text-mute)}
    body.v2 .s-logout-btn{
      border:1px solid var(--v2-border-soft) !important;
      color:var(--v2-text-3) !important;
      background:transparent !important;
    }
    body.v2 .s-logout-btn:hover{
      background:var(--v2-bg-hover) !important;
      color:var(--v2-text) !important;
      border-color:var(--v2-border) !important;
    }
    body.v2 .acct-dd{
      background:var(--v2-bg);
      border:1px solid var(--v2-border);
      box-shadow:0 16px 48px rgba(14,18,30,0.10);
    }
    body.v2 .acct-dd-item{color:var(--v2-text-2)}
    body.v2 .acct-dd-item:hover{background:var(--v2-bg-hover);color:var(--v2-text)}
    body.v2 .acct-dd-item.active{background:var(--v2-accent-bg);color:var(--v2-accent)}
    body.v2 .acct-dd-pic,
    body.v2 .acct-dd-pic-ph{border:1px solid var(--v2-border)}
    body.v2 .acct-dd-pic-ph{background:var(--v2-accent-bg);color:var(--v2-accent)}
    body.v2 .acct-dd-handle{color:var(--v2-text)}
    body.v2 .acct-dd-ig{color:var(--v2-text-mute)}
    /* Search + grouping added to the switcher (Part 6, 2026-07-23) — light-theme
       colors for the v2 white sidebar so the box isn't still styled dark. */
    body.v2 .acct-dd-search{
      background:var(--v2-bg-input);
      border:1px solid var(--v2-border);
      color:var(--v2-text);
    }
    body.v2 .acct-dd-search::placeholder{color:var(--v2-text-mute)}
    body.v2 .acct-dd-search:focus{border-color:var(--v2-accent);background:var(--v2-bg)}
    body.v2 .acct-dd-divider{color:var(--v2-text-mute)}
    body.v2 .acct-dd-empty{color:var(--v2-text-mute)}

    /* ── v2 TOPBAR — page title + sticky search + account chip ── */
    body.v2 .global-topbar{
      height:56px;padding:0 22px;gap:14px;
      background:var(--v2-bg);
      border-bottom:1px solid var(--v2-border-soft);
      backdrop-filter:none;-webkit-backdrop-filter:none;
    }
    body.v2 .tb2-page{
      font-size:15.5px;font-weight:600;letter-spacing:-0.015em;color:var(--v2-text);
      flex-shrink:0;
    }
    body.v2 .global-search-wrap{
      max-width:360px;margin:0;flex:1;
    }
    body.v2 .global-search{
      padding:8px 44px 8px 32px;height:34px;
      font-size:12.5px;
      background:var(--v2-bg-soft);
      border:1px solid var(--v2-border-soft);
      border-radius:var(--radius-md);
      color:var(--v2-text);
    }
    body.v2 .global-search:hover{background:var(--v2-bg-hover);border-color:var(--v2-border-soft)}
    body.v2 .global-search:focus{
      background:#fff;border-color:var(--v2-accent);
      box-shadow:0 0 0 3px var(--v2-accent-bg);
    }
    body.v2 .global-search-icon{left:10px;width:13px;height:13px;color:var(--v2-text-mute)}
    body.v2 .global-search-kbd{
      right:8px;padding:2px 6px;
      border:1px solid var(--v2-border-soft);
      background:var(--v2-bg);
      color:var(--v2-text-mute);
    }
    body.v2 .global-search-dropdown{
      background:var(--v2-bg);
      border:1px solid var(--v2-border);
      box-shadow:0 16px 48px rgba(14,18,30,0.10);
    }
    .tb2-spacer{flex:1}
    .tb2-account{
      display:flex;align-items:center;gap:9px;
      padding:5px 12px 5px 5px;
      background:var(--v2-bg-input);
      border:1px solid transparent;
      border-radius:9999px;
      font-size:12.5px;color:var(--v2-text-2);font-weight:500;
      cursor:default;flex-shrink:0;
    }
    .tb2-account-pic{
      width:24px;height:24px;border-radius:50%;
      background:var(--v2-accent-bg);color:var(--v2-accent);
      display:flex;align-items:center;justify-content:center;
      font-weight:700;font-size:var(--fs-xs);
      overflow:hidden;
    }
    .tb2-account-pic img{width:100%;height:100%;object-fit:cover}
    .tb2-account-name{font-size:12.5px;font-weight:600;color:var(--v2-text);letter-spacing:-0.005em}
    .tb2-account-sep{color:var(--v2-text-mute);font-size:var(--fs-base)}
    .tb2-account-status{
      display:inline-flex;align-items:center;gap:5px;
      font-size:var(--fs-sm);font-weight:600;color:var(--v2-green);
    }
    .tb2-account-status::before{
      content:'';width:6px;height:6px;border-radius:50%;
      background:var(--v2-green);
      box-shadow:0 0 6px rgba(16,185,129,0.5);
    }
    .tb2-bell{
      width:36px;height:36px;border-radius:9px;
      background:var(--v2-bg);
      border:1px solid var(--v2-border-soft);
      color:var(--v2-text-3);
      display:inline-flex;align-items:center;justify-content:center;
      cursor:pointer;flex-shrink:0;
      transition:all .15s var(--ease);
      position:relative;
    }
    .tb2-bell:hover{color:var(--v2-text);border-color:var(--v2-border);background:var(--v2-bg-soft)}
    .tb2-bell svg{width:16px;height:16px;stroke-width:1.7}
    .tb2-bell .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--v2-red);border:2px solid var(--v2-bg)}

    /* ── v2 ANALYTICS PAGE ── */
    body.v2 #pg-dashboard{padding:0 !important;background:var(--v2-bg-alt)}
    body.v2 #pg-dashboard .ph,
    body.v2 #pg-dashboard .an-filter-bar,
    body.v2 #pg-dashboard .alrt,
    body.v2 #pg-dashboard .trunc-banner{display:none !important}

    /* ── v2 UNIFIED PAGE HEADER (2026-05-01) ──
       Leads, CRM, Inbox, Manual share the same .dz-filterbar pattern as Dashboard.
       Strip page padding so the bar spans full width, then put body content
       inside .ph-body which restores the standard padding. */
    body.v2 #pg-leads,
    body.v2 #pg-crm,
    body.v2 #pg-inbox,
    body.v2 #pg-manual,
    body.v2 #pg-configure{padding:0 !important;background:var(--v2-bg-alt)}
    /* AI page subtab pills inside the unified .dz-filterbar. Matches the look
       of .dz-seg (range pills) so all bar widgets read as one family. */
    .dz-filterbar .dz-tabs{display:inline-flex;gap:2px;background:var(--v2-bg-input);border:1px solid var(--v2-border-soft);border-radius:10px;padding:3px;flex-shrink:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .dz-filterbar .dz-tabs::-webkit-scrollbar{display:none}
    .dz-filterbar .dz-tabs .tab-btn{
      border:0;background:transparent;
      padding:6px 12px;border-radius:7px;
      font:500 12.5px/1 'DM Sans',system-ui,sans-serif;
      color:var(--v2-text-3);
      cursor:pointer;letter-spacing:-0.005em;
      transition:all .15s var(--ease);white-space:nowrap;
    }
    .dz-filterbar .dz-tabs .tab-btn:hover{color:var(--v2-text)}
    .dz-filterbar .dz-tabs .tab-btn.active{
      background:var(--v2-bg);color:var(--v2-text);
      box-shadow:var(--v2-shadow-sm);
    }
    body.v2 #pg-leads > .ph,
    body.v2 #pg-leads > .leads-filter-bar,
    body.v2 #pg-crm > .ph,
    body.v2 #pg-manual > .ph,
    body.v2 #pg-manual > .man-filter-bar{display:none !important}
    .ph-body{padding:24px 36px 32px}
    .dz-filterbar.is-sticky{position:sticky;top:56px;z-index:20}
    @media(max-width:780px){.dz-filterbar.is-sticky{top:54px}}
    /* Inline page-specific filter dropdowns inside the bar (Leads stage/interest). */
    .dz-filterbar .ph-extra-sel{
      height:32px;padding:0 30px 0 12px;
      background:var(--v2-bg-soft);
      border:1px solid var(--v2-border-soft);
      border-radius:var(--radius-md);
      font:500 12.5px/1 'DM Sans',system-ui,sans-serif;
      color:var(--v2-text);cursor:pointer;flex-shrink:0;
      appearance:none;-webkit-appearance:none;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat:no-repeat;background-position:right 10px center;
    }
    .dz-filterbar .ph-extra-sel:hover{background-color:var(--v2-bg-hover);border-color:var(--v2-border)}
    .dz-filterbar .ph-clear-btn{
      height:32px;padding:0 12px;
      background:transparent;border:1px solid var(--v2-border-soft);border-radius:var(--radius-md);
      font:500 12.5px/1 'DM Sans',system-ui,sans-serif;
      color:var(--v2-text-mute);cursor:pointer;flex-shrink:0;
    }
    .dz-filterbar .ph-clear-btn:hover{color:var(--v2-text);border-color:var(--v2-border)}
    @media(max-width:780px){.ph-body{padding:20px 14px}}
    @media(max-width:600px){.ph-body{padding:16px 12px}}
    /* Dashboard's .dz-filterbar already lives inside a flex column (.dz) with
       its own scrolling body; sticky is redundant there but harmless. */

    .dz{
      display:flex;flex-direction:column;
      min-height:100%;
    }
    .dz-filterbar{
      flex-shrink:0;
      height:56px;
      display:flex;align-items:center;gap:10px;
      padding:0 22px;
      background:var(--v2-bg);
      border-bottom:1px solid var(--v2-border-soft);
    }
    .dz-fb-spacer{flex:1}
    .dz-source-drop{
      position:relative;
      display:inline-flex;align-items:center;gap:6px;
      height:32px;padding:0 12px;
      background:var(--v2-bg-soft);
      border:1px solid var(--v2-border-soft);
      border-radius:var(--radius-md);
      font-size:12.5px;color:var(--v2-text);
      cursor:pointer;flex-shrink:0;
    }
    .dz-source-drop:hover{background:var(--v2-bg-hover);border-color:var(--v2-border)}
    .dz-source-drop-lbl{color:var(--v2-text-mute);font-weight:500;margin-right:4px}
    .dz-source-drop-val{font-weight:600;color:var(--v2-text)}
    .dz-source-drop svg{color:var(--v2-text-3);margin-left:4px}
    .dz-source-drop select{
      position:absolute;inset:0;width:100%;height:100%;
      opacity:0;cursor:pointer;
    }
    .dz-seg{
      display:inline-flex;
      background:var(--v2-bg-input);
      border:1px solid var(--v2-border-soft);
      border-radius:10px;
      padding:3px;
      flex-shrink:0;
    }
    .dz-seg button{
      border:0;background:transparent;
      padding:6px 11px;
      border-radius:7px;
      font:500 12.5px/1 'DM Sans',system-ui,sans-serif;
      color:var(--v2-text-3);
      cursor:pointer;letter-spacing:-0.005em;
      transition:all .15s var(--ease);
      white-space:nowrap;
    }
    .dz-seg button:hover{color:var(--v2-text)}
    .dz-seg button.on{
      background:var(--v2-bg);color:var(--v2-text);
      box-shadow:var(--v2-shadow-sm);
    }
    .dz-export-btn{
      display:inline-flex;align-items:center;gap:7px;
      height:32px;padding:0 12px;
      background:var(--v2-bg);
      border:1px solid var(--v2-border);
      border-radius:9px;
      font:600 12.5px/1 'DM Sans',system-ui,sans-serif;
      color:var(--v2-text-2);
      cursor:pointer;flex-shrink:0;
      transition:all .15s var(--ease);
    }
    .dz-export-btn:hover{color:var(--v2-text);border-color:var(--v2-text-3);background:var(--v2-bg-soft)}
    .dz-export-btn svg{width:13px;height:13px;stroke-width:1.8}

    .dz-body{
      flex:1;overflow-y:auto;
      padding:22px;
    }
    .dz-body-inner{
      max-width:1320px;margin:0 auto;
      display:flex;flex-direction:column;gap:16px;
    }

    /* KPI grid — 5 cards */
    .dz-kpis{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:10px;
      width:100%;
    }
    .dz-kpi{
      position:relative;
      background:var(--v2-bg);
      border:1px solid var(--v2-border-soft);
      border-radius:14px;
      padding:14px 14px 12px;
      min-width:0;
      transition:border-color .15s var(--ease),transform .15s var(--ease);
    }
    .dz-kpi:hover{border-color:var(--v2-border);transform:translateY(-1px)}
    .dz-kpi-hd{
      display:flex;align-items:center;justify-content:space-between;
      margin-bottom:10px;
    }
    .dz-kpi-lbl{
      font-size:10.5px;font-weight:600;letter-spacing:0.07em;
      text-transform:uppercase;color:var(--v2-text-mute);
    }
    .dz-kpi-icn{
      width:26px;height:26px;border-radius:7px;
      background:var(--v2-accent-bg);color:var(--v2-accent);
      display:flex;align-items:center;justify-content:center;
    }
    .dz-kpi-icn svg{width:14px;height:14px;stroke-width:1.8}
    .dz-kpi-num{
      font-size:26px;font-weight:600;letter-spacing:-0.025em;
      line-height:1;color:var(--v2-text);
      font-variant-numeric:tabular-nums;
    }
    .dz-kpi-foot{
      display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;
    }
    .dz-kpi-delta{
      display:inline-flex;align-items:center;gap:4px;
      font-size:11.5px;font-weight:600;
      font-variant-numeric:tabular-nums;
    }
    .dz-kpi-delta svg{width:10px;height:10px;stroke-width:2.4}
    .dz-kpi-delta.up{color:#047857}
    .dz-kpi-delta.down{color:#b91c1c}
    .dz-kpi-delta.flat{color:var(--v2-text-3)}
    .dz-kpi-cmp{
      font-size:10.5px;color:var(--v2-text-mute);
      letter-spacing:-0.005em;
    }

    /* Card primitive */
    .dz-card{
      background:var(--v2-bg);
      border:1px solid var(--v2-border-soft);
      border-radius:14px;
      padding:22px 24px;
    }
    .dz-card-hd{
      display:flex;align-items:flex-start;justify-content:space-between;
      gap:16px;margin-bottom:18px;
    }
    .dz-card-hd-l{display:flex;flex-direction:column;gap:2px;min-width:0}
    .dz-card-title{
      font-size:14.5px;font-weight:600;letter-spacing:-0.01em;
      color:var(--v2-text);margin:0;
    }
    .dz-card-sub{font-size:var(--fs-base);color:var(--v2-text-3)}
    .dz-legend{display:flex;gap:12px;font-size:var(--fs-base);color:var(--v2-text-3)}
    .dz-legend .sw{
      display:inline-block;width:8px;height:8px;border-radius:99px;
      margin-right:6px;vertical-align:1px;
    }

    /* Row layouts: funnel 3fr, side stack 2fr */
    .dz-row-funnel{
      display:grid;
      grid-template-columns:3fr 2fr;
      gap:16px;
    }

    /* Funnel — vertical, centered, big-to-small */
    .dz-funnel-card{display:flex;flex-direction:column}
    .dz-funnel-vert{
      display:flex;flex-direction:column;align-items:center;
      width:100%;margin-top:4px;
    }
    .dz-fstage{
      width:100%;
      display:flex;align-items:center;justify-content:center;
      position:relative;
    }
    .dz-fbar{
      position:relative;
      height:64px;
      border-radius:12px;
      background:var(--v2-accent);
      display:flex;align-items:center;justify-content:space-between;
      padding:0 22px;
      color:#fff;
      box-shadow:0 1px 0 rgba(0,0,0,0.06) inset;
      transition:width .35s var(--ease);
    }
    /* Blue → green ramp signalling progression toward booked revenue */
    .dz-fbar.s1{background:linear-gradient(180deg,#4974ff 0%,#2E5BFF 100%)}
    .dz-fbar.s2{background:linear-gradient(180deg,#2E5BFF 0%,#1f73d6 100%)}
    .dz-fbar.s3{background:linear-gradient(180deg,#1f73d6 0%,#0f9aa8 100%)}
    .dz-fbar.s4{background:linear-gradient(180deg,#0f9aa8 0%,#0f9b6c 100%)}
    .dz-fbar.s5{background:linear-gradient(180deg,#11a363 0%,#047857 100%)}
    .dz-fbar-l{display:flex;flex-direction:column;gap:2px}
    .dz-fbar-name{font-size:13.5px;font-weight:600;letter-spacing:-0.005em;color:#fff}
    .dz-fbar-pct{
      font-size:var(--fs-sm);color:rgba(255,255,255,0.72);
      font-variant-numeric:tabular-nums;letter-spacing:0.01em;
    }
    .dz-fbar-val{
      font-size:var(--fs-xl);font-weight:600;letter-spacing:-0.02em;color:#fff;
      font-variant-numeric:tabular-nums;line-height:1;
    }
    .dz-fconn{
      width:100%;
      display:flex;align-items:center;justify-content:center;
      padding:6px 0;
      position:relative;
    }
    .dz-fconn-pill{
      display:inline-flex;align-items:center;gap:8px;
      background:var(--v2-bg);
      border:1px solid var(--v2-border-soft);
      border-radius:99px;
      padding:5px 12px;
      font-size:11.5px;font-weight:500;color:var(--v2-text-2);
      font-variant-numeric:tabular-nums;
      z-index:1;
      box-shadow:0 1px 2px rgba(15,23,42,0.04);
    }
    .dz-fconn-pill .lbl{color:var(--v2-text-mute)}
    .dz-fconn-pill .v{font-weight:700;color:var(--v2-text)}
    .dz-fconn-pill .cmp{color:var(--v2-text-mute);font-weight:500}
    .dz-fconn-delta{
      display:inline-flex;align-items:center;gap:2px;
      font-size:var(--fs-sm);font-weight:600;
      font-variant-numeric:tabular-nums;
      letter-spacing:0.01em;
    }
    .dz-fconn-delta.up{color:#047857}
    .dz-fconn-delta.down{color:#b91c1c}
    .dz-fconn-delta.flat{color:var(--v2-text-3)}
    .dz-fconn-line{
      position:absolute;left:50%;top:0;bottom:0;
      width:2px;
      background:linear-gradient(180deg,rgba(46,91,255,0.16) 0%,rgba(46,91,255,0.16) 100%);
      transform:translateX(-50%);z-index:0;
    }

    /* Time-series chart card */
    .dz-chart-svg{display:block;width:100%;height:200px}

    /* Source breakdown — full-width row, breathes at 1320px */
    .dz-source-stats{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:0;
      padding:4px 0 14px;
      border-bottom:1px solid var(--v2-border-light);
      margin:8px 0 18px;
    }
    .dz-source-stat{
      padding:0 18px;
      border-left:1px solid var(--v2-border-light);
    }
    .dz-source-stat:first-child{border-left:0;padding-left:0}
    .dz-source-stat-lbl{
      font-size:var(--fs-xs);font-weight:600;letter-spacing:0.08em;
      text-transform:uppercase;color:var(--v2-text-mute);
      margin-bottom:6px;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .dz-source-stat-val{
      font-size:var(--fs-xl);font-weight:600;color:var(--v2-text);
      font-variant-numeric:tabular-nums;letter-spacing:-0.01em;
      line-height:1;
    }
    .dz-source-stat-val.green{color:#047857}
    .dz-source-rows{display:flex;flex-direction:column;gap:14px}
    .dz-source-row{
      display:grid;
      grid-template-columns:140px 1fr auto;
      align-items:center;gap:18px;
      transition:opacity .15s var(--ease);
      cursor:pointer;
    }
    .dz-source-row.is-dim{opacity:0.32}
    .dz-source-row-lbl{
      display:inline-flex;align-items:center;gap:9px;
      font-size:var(--fs-md);color:var(--v2-text);font-weight:500;
    }
    .dz-source-dot{width:8px;height:8px;border-radius:99px;flex:none}
    .dz-source-bar-wrap{
      height:8px;background:var(--v2-border-light);
      border-radius:99px;overflow:hidden;
    }
    .dz-source-bar{height:100%;border-radius:99px;transition:width .35s var(--ease)}
    .dz-source-row-meta{
      font-size:var(--fs-base);color:var(--v2-text-mute);
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
      display:inline-flex;align-items:baseline;gap:5px;
    }
    .dz-source-row-meta strong{color:var(--v2-text);font-weight:600}
    .dz-source-row-meta .sep{margin:0 4px;color:var(--v2-text-3)}
    .dz-source-row-meta .rate{color:var(--v2-text-2);font-weight:600}

    /* ── v2 SIDEBAR header — centred wordmark, slightly larger ── */
    body.v2 .s-logo{
      justify-content:center;
      gap:0;
      padding:4px 0 4px;
      height:42px;margin-bottom:10px;
      position:relative;
    }
    body.v2 .s-logo-text{font-size:var(--fs-xl)}
    body.v2 .s-logo-mark{font-size:24px}
    body.v2 .s-collapse-top{
      position:absolute;
      top:50%;right:0;
      transform:translateY(-50%);
    }
    body.v2 .sidebar.collapsed .s-collapse-top{
      position:static;transform:none;
    }
    body.v2 .sidebar.collapsed .s-logo{padding:0;height:36px}

    /* ── v2 FILTER BAR page label (left-most, before source dropdown) ── */
    .dz-page-label{
      font-size:15.5px;font-weight:600;letter-spacing:-0.015em;
      color:var(--v2-text);
      flex-shrink:0;
      margin-right:8px;
    }

    /* ── v2 FUNNEL: full-width card now, but keep funnel taper centred ── */
    .dz-funnel-vert{
      max-width:720px;
      margin-left:auto;margin-right:auto;
    }

    /* ── v2 LOADER — section-level swirl, viewport-centred ──
       Single overlay shared by all pages. Position FIXED (not absolute) so
       scroll inside .dz-body / .main never offsets the spinner. Bounded by
       sidebar width + topbar height so it covers exactly the content region.
       On Dashboard the filter bar adds another 56px below the topbar. */
    .dz-spinner{
      width:42px;height:42px;
      border:3px solid var(--v2-border);
      border-top-color:var(--v2-accent);
      border-radius:50%;
      animation:dzSpin .9s linear infinite;
    }
    @keyframes dzSpin{to{transform:rotate(360deg)}}
    .v2-page-loader{
      position:fixed;
      top:56px;
      left:232px;
      right:0;
      bottom:0;
      display:flex;align-items:center;justify-content:center;
      background:rgba(244,245,250,0.55);
      backdrop-filter:saturate(180%) blur(2px);
      -webkit-backdrop-filter:saturate(180%) blur(2px);
      z-index:25;
      pointer-events:none;
      opacity:0;
      transition:opacity .18s var(--ease);
    }
    /* On Dashboard, clear the filter-bar too so the spinner centres inside
       the actual data section rather than sliding under the filter row. */
    body.v2.dz-page .v2-page-loader{top:112px}
    /* Collapsed sidebar shrinks the left clear */
    body.v2 .sidebar.collapsed ~ .main ~ .v2-page-loader,
    body.v2 .shell:has(.sidebar.collapsed) .v2-page-loader{left:64px}
    body.v2.is-page-loading .v2-page-loader{
      opacity:1;
      pointer-events:auto;
    }
    @media (max-width:900px){
      .v2-page-loader{left:0;top:54px}
      body.v2.dz-page .v2-page-loader{top:104px}
    }

    /* ── v2 MOBILE — Dashboard page only ── */
    @media (max-width:900px){
      body.v2 .global-topbar{padding:0 14px;height:54px;gap:10px}
      body.v2 .tb2-page{font-size:14.5px}
      body.v2 .global-search-wrap{display:none}
      body.v2 .tb2-account-handle,
      body.v2 .tb2-account-sep{display:none}
      .dz-filterbar{
        height:auto;padding:10px 14px;gap:8px;
        flex-wrap:wrap;
      }
      .dz-source-drop{order:1;flex:1;min-width:160px}
      .dz-export-btn{order:2}
      .dz-fb-spacer{display:none}
      .dz-seg{
        order:3;width:100%;
        overflow-x:auto;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;
      }
      .dz-seg::-webkit-scrollbar{display:none}
      .dz-body{padding:14px 14px 24px}
      .dz-body-inner{gap:12px;max-width:none}
      .dz-kpis{
        grid-template-columns:1fr 1fr;
        gap:8px;
      }
      .dz-kpi{padding:12px 12px 10px;border-radius:12px}
      .dz-kpi-num{font-size:var(--fs-xl)}
      .dz-kpi-lbl{font-size:9.5px;letter-spacing:0.06em}
      .dz-kpi.span-2{grid-column:1 / -1}
      .dz-row-funnel{
        grid-template-columns:1fr;gap:12px;
      }
      .dz-card{padding:16px 14px;border-radius:12px}
      .dz-card-hd{margin-bottom:14px}
      .dz-card-title{font-size:13.5px}
      .dz-fbar{height:48px;padding:0 14px;border-radius:10px}
      .dz-fbar-name{font-size:12.5px}
      .dz-fbar-pct{display:none}
      .dz-fbar-val{font-size:18px}
      .dz-fconn-pill{font-size:10.5px;padding:4px 10px;gap:6px}
      .dz-fconn-pill .cmp{display:none}
      .dz-source-stats{
        grid-template-columns:repeat(2,1fr);
        gap:14px 0;padding:0 0 14px;
      }
      .dz-source-stat{
        padding:0 14px;
        border-left:1px solid var(--v2-border-light);
      }
      .dz-source-stat:nth-child(odd){border-left:0;padding-left:0}
      .dz-source-stat-val{font-size:18px}
      .dz-source-row{
        grid-template-columns:1fr;gap:6px;
      }
      .dz-source-row-meta{font-size:11.5px}
    }

    /* ════════════════════════════════════════════════════════════════════
       DZL — DMSet Loading System (Linear-style)
       Replaces the legacy v2-page-loader overlay spinner + bar-loader +
       skel-* / loader-wrap. Three primitives:
         1. .dzl-topbar  — 3px brand-blue indeterminate bar at viewport top
         2. .dzl-skel-*  — neutral shape skeletons w/ shimmer + 40ms cascade
         3. .dzl-busy / .dzl-success — CSS-driven button states (no innerHTML
            swap). Conic-gradient comet spinner.
       Visual spec validated 2026-05-22 via dashboard-loader-preview.html.
       ════════════════════════════════════════════════════════════════════ */
    .dzl-topbar{
      position:fixed;top:0;left:0;right:0;height:3px;
      background:rgba(46,91,255,.10);
      z-index:99999;
      pointer-events:none;
      opacity:0;
      transition:opacity .15s var(--ease-out, cubic-bezier(.4,0,.2,1));
    }
    .dzl-topbar.is-on{opacity:1}
    .dzl-topbar-fill{
      position:absolute;inset:0;
      background:linear-gradient(90deg,transparent 0%,var(--accent,#2E5BFF) 50%,transparent 100%);
      animation:dzlBar 1.35s cubic-bezier(.4,0,.2,1) infinite;
      transform:translateX(-100%);
      box-shadow:0 1px 2px rgba(46,91,255,.25);
    }
    @keyframes dzlBar{
      0%{transform:translateX(-100%)}
      100%{transform:translateX(100%)}
    }

    .dzl-skel{
      position:relative;
      /* Base fill was #f0f0f3 — barely darker than the white page, so a switch
         read as "nothing changed." Darker, more opaque grey so the loading
         state is unmistakable when switching period / source / account.
         Per Shariq 2026-07-19. */
      background:#d7d7de;
      border-radius:var(--radius-md);
      overflow:hidden;
      opacity:0;
      animation:dzlSkIn .42s cubic-bezier(.4,0,.2,1) forwards;
    }
    .dzl-skel::after{
      content:'';
      position:absolute;inset:0;
      background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.75) 50%,transparent 100%);
      transform:translateX(-100%);
      animation:dzlSkShim 1.5s linear infinite;
    }
    @keyframes dzlSkIn{
      from{opacity:0;transform:translateY(4px)}
      to{opacity:1;transform:translateY(0)}
    }
    @keyframes dzlSkShim{
      0%{transform:translateX(-100%)}
      100%{transform:translateX(100%)}
    }
    .dzl-skel-line{height:12px}
    .dzl-skel-line.h-sm{height:10px}
    .dzl-skel-line.h-md{height:14px}
    .dzl-skel-line.h-lg{height:18px}
    .dzl-skel-line.h-xl{height:24px}
    .dzl-skel-w-20{width:20%}
    .dzl-skel-w-25{width:25%}
    .dzl-skel-w-30{width:30%}
    .dzl-skel-w-35{width:35%}
    .dzl-skel-w-40{width:40%}
    .dzl-skel-w-50{width:50%}
    .dzl-skel-w-55{width:55%}
    .dzl-skel-w-60{width:60%}
    .dzl-skel-w-65{width:65%}
    .dzl-skel-w-70{width:70%}
    .dzl-skel-w-85{width:85%}
    .dzl-skel-w-100{width:100%}
    .dzl-skel-circle{border-radius:50%}
    .dzl-skel-pill{border-radius:var(--radius-pill)}
    .dzl-skel-card{border-radius:12px}
    .dzl-skel-input{height:36px;border-radius:var(--radius-md)}
    .dzl-skel-textarea{height:88px;border-radius:var(--radius-md)}
    .dzl-skel-button{height:36px;width:120px;border-radius:var(--radius-md)}
    .dzl-skel-stack > * + *{margin-top:10px}
    .dzl-skel-stack > *{animation-delay:calc(var(--i,0) * 40ms)}
    .dzl-skel-wrap{padding:20px;transition:opacity .18s cubic-bezier(.4,0,.2,1)}
    .dzl-skel-wrap.is-leaving{opacity:0}

    @keyframes dzlBtnSpin{to{transform:rotate(360deg)}}
    @keyframes dzlBtnFade{
      0%,100%{opacity:.9}
      50%{opacity:1}
    }
    @keyframes dzlBtnSuccessIn{
      0%{opacity:0;transform:translate(-50%,calc(-50% + 4px)) scale(.94)}
      100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    }
    button.dzl-busy, button.dzl-success{
      position:relative;
      color:transparent !important;
      text-shadow:none !important;
      cursor:default;
      pointer-events:none;
      transition:background .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1);
    }
    button.dzl-busy{cursor:wait}
    button.dzl-busy::after{
      content:'';
      position:absolute;
      top:50%;left:50%;
      width:18px;height:18px;
      margin:-9px 0 0 -9px;
      border-radius:50%;
      background:conic-gradient(from 0deg, transparent 0deg, var(--dzl-btn-fg,#fff) 340deg, var(--dzl-btn-fg,#fff) 360deg);
      -webkit-mask:radial-gradient(circle, transparent 5.6px, #000 6.4px);
      mask:radial-gradient(circle, transparent 5.6px, #000 6.4px);
      animation:dzlBtnSpin .72s linear infinite, dzlBtnFade 1.6s ease-in-out infinite;
      will-change:transform;
    }
    button.dzl-success{
      background:#16a34a !important;
      border-color:#16a34a !important;
      color:transparent !important;
    }
    button.dzl-success::after{
      content:'✓ ' attr(data-success-label);
      position:absolute;
      top:50%;left:50%;
      transform:translate(-50%,-50%);
      color:#fff;
      font:inherit;
      font-size:var(--fs-md);
      font-weight:600;
      white-space:nowrap;
      letter-spacing:.01em;
      animation:dzlBtnSuccessIn .22s cubic-bezier(.4,0,.2,1);
    }

    /* Legacy overlay spinner is hidden now that DZL.nav owns page-load UX.
       Keeping the element + CSS in place avoids breaking any pre-existing
       direct DOM references; the legacy bar-loader rules below are also
       overridden by the DZL skeleton classes when loaderHTML() outputs the
       new skeleton markup. */
    .v2-page-loader{display:none !important}

    /* ── Demo mode banner ── */
    .demo-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:99998;background:#1a1000;border-bottom:1px solid rgba(245,158,11,0.3);color:rgba(245,158,11,0.9);font-size:var(--fs-sm);font-weight:600;text-align:center;padding:7px 16px;letter-spacing:.02em;pointer-events:none}
    body.demo-mode .demo-banner{display:block}
    body.demo-mode .shell{padding-top:31px}

    /* ── Confirmation dialog ── */
    .dm-confirm-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .18s var(--ease-out)}
    .dm-confirm-backdrop.open{opacity:1;pointer-events:all}
    .dm-confirm-box{background:var(--bg-white);border-radius:var(--radius-lg);padding:28px 28px 22px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);transform:translateY(10px) scale(0.98);opacity:0;transition:transform .2s var(--ease),opacity .18s var(--ease-out)}
    .dm-confirm-backdrop.open .dm-confirm-box{transform:none;opacity:1}
    .dm-confirm-title{font-size:var(--fs-lg);font-weight:700;color:var(--text);margin-bottom:8px}
    .dm-confirm-body{font-size:var(--fs-md);color:var(--text-secondary);line-height:1.6;margin-bottom:24px}
    .dm-confirm-actions{display:flex;gap:8px;justify-content:flex-end}
    .dm-confirm-cancel{padding:9px 18px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:600;color:var(--text-secondary);cursor:pointer;font-family:inherit;transition:background .12s,color .12s}
    .dm-confirm-cancel:hover{background:var(--bg-hover);color:var(--text)}
    .dm-confirm-ok{padding:9px 18px;border:none;border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:600;cursor:pointer;font-family:inherit;transition:background .12s,box-shadow .12s}
    .dm-confirm-ok.destructive{background:var(--red);color:#fff}
    .dm-confirm-ok.destructive:hover{background:#dc2626;box-shadow:0 2px 8px rgba(239,68,68,0.3)}
    .dm-confirm-ok.primary{background:var(--accent);color:#fff}
    .dm-confirm-ok.primary:hover{background:var(--accent-hover)}

    /* ── Configure collapsible sections ── */
    .cf-section{border:none;margin-bottom:0}
    .cf-section-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;font-size:var(--fs-md);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);cursor:pointer;list-style:none;user-select:none}
    .cf-section-summary::-webkit-details-marker{display:none}
    .cf-section-summary::after{content:'';display:block;width:7px;height:7px;border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg);transition:transform .18s;flex-shrink:0;margin-right:2px}
    details.cf-section[open] .cf-section-summary::after{transform:rotate(-135deg)}
    .cf-section-summary:hover{color:var(--text)}

/* Optimistic (in-flight) operator message: subtly dimmed until the server
   confirms the send, at which point the _optimistic-msg class is stripped (see
   sMsg) and the bubble returns to full opacity. Gives send feedback without
   blocking the operator from firing the next bubble in the optimistic flow. */
._optimistic-msg .cb.operator{opacity:.55;transition:opacity .15s ease}

/* iOS safe-area: with viewport-fit=cover the page can extend under the home
   indicator, so keep the fixed message composer clear of it. max() so it never
   shrinks the base 12px padding on non-notched devices (env() resolves to 0). */
.inb-chat-in{padding-bottom:max(12px, env(safe-area-inset-bottom))}

/* ============================================================
   UI RESTYLE 2026-07 — SHARED CHROME (commit 1 of feat/ui-restyle)
   White sidebar with divider rows, real wordmark, refined nav.
   Approved via the localhost restyle mockups (public/*-restyle-mockup.html
   in the working tree). !important wins over the dark-theme base and the
   inline styles JS paints on footer elements.
   ============================================================ */

/* ---- sidebar shell: white, wider, hairline right border ---- */
.sidebar{width:264px !important;min-width:264px !important;background:#ffffff !important;
  color:#3a3f52;border-right:1px solid #eef0f5 !important;
  padding:20px 16px 14px !important}

/* ---- logo row: wordmark centered, collapse toggle pinned right ---- */
.s-logo{display:flex !important;align-items:center !important;justify-content:center !important;
  padding:6px 6px 20px !important;gap:0 !important;position:relative !important}
.s-logo-img{height:23px;width:auto;display:block;margin:0 auto}
.s-logo-text{display:none !important}   /* replaced by the wordmark image */
.s-logo-mark{color:#0b0d14 !important}
.s-logo-mark .wm-dot{color:#2E5BFF !important}
.s-collapse-top{display:flex !important;align-items:center;justify-content:center;
  position:absolute !important;right:0 !important;top:2px !important;
  background:none !important;border:none !important;color:#9aa0b4 !important;cursor:pointer;
  padding:5px !important;border-radius:7px !important}
.s-collapse-top:hover{color:#0b0d14 !important;background:#f0f0f3 !important}
.s-collapse-top svg{width:18px;height:18px}

/* ---- nav: bigger rows, a divider line between each item ---- */
.s-nav{display:flex !important;flex-direction:column !important;gap:0 !important;padding:0 !important}
.s-nav .s-btn{display:flex !important;align-items:center !important;gap:13px !important;
  padding:14px 12px !important;border-radius:10px !important;font-size:14px !important;
  font-weight:500 !important;color:#3a3f52 !important;background:transparent !important}
.s-nav .s-btn+.s-btn{border-top:1px solid #eef0f5 !important;
  border-top-left-radius:0;border-top-right-radius:0}
.s-nav .s-btn:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}
.s-nav .s-btn svg{width:19px !important;height:19px !important;stroke-width:1.6 !important;opacity:.92}
.s-btn-label{font-size:14px !important;letter-spacing:-0.01em !important}
.s-nav .s-btn:hover{background:#f0f0f3 !important;color:#0b0d14 !important}
.s-nav .s-btn:hover svg{opacity:1}
.s-nav .s-btn.active{color:#fff !important;font-weight:600 !important;
  background:linear-gradient(135deg,#2E5BFF 0%,#1B3BCC 100%) !important;
  box-shadow:0 6px 18px rgba(46,91,255,0.38) !important;border-radius:10px !important}
.s-nav .s-btn.active svg{opacity:1}
.s-nav .s-btn.active::before{display:none !important}
.s-nav .s-btn.active+.s-btn{border-top-color:transparent !important}

/* ---- bottom cluster on white ---- */
.s-bottom .s-btn,.s-settings-btn{color:#3a3f52 !important;background:transparent !important;
  border-radius:10px !important}
.s-bottom .s-btn:hover,.s-settings-btn:hover{background:#f0f0f3 !important;color:#0b0d14 !important}
.s-logout-btn{color:#6a7084 !important;border:1px solid #e7e9ef !important;background:transparent !important}
.s-logout-btn:hover{color:#0b0d14 !important;background:#f0f0f3 !important}
/* JS paints these with dark-theme inline colors; stylesheet !important wins */
#sProfile>div,#sProfile .s-profile-row{color:#0b0d14 !important}
#sProfile .s-profile-row{border-top:1px solid #eef0f5 !important}
#sAdminBadge>div{background:rgba(124,58,237,0.07) !important;border-color:rgba(124,58,237,0.22) !important}
#sAdminBadge .s-admin-tag,#sAdminBadge [class*=admin-tag]{color:#7c3aed !important}

/* ---- collapsed: keep production behavior, hide the wordmark ---- */
.sidebar.collapsed .s-logo-img{display:none !important}
.sidebar.collapsed{padding:20px 10px 14px !important}

/* ============================================================
   UI RESTYLE 2026-07 - FILTERBAR + PAGE BODIES (commit 2)
   Pure CSS port of the approved restyle mockups (crm / leads /
   inbox / queue / dashboard *-restyle-mockup.html + the filter
   bar values in restyle-shared.css). No JS or markup changes.
   Selectors target PRODUCTION class names only; mockup-invented
   classes (crm-card-foot, mq-*, leads-pic-rs, inb-snippet,
   dz-fbook, dz-src-chips, .dz-kpi.hero) are intentionally
   skipped. Functional elements (entry pills, FU pills, IG
   buttons, resume buttons, drag states) stay visible.
   Mobile geometry from the base media queries is re-asserted in
   the guard blocks at the end of this section.
   ============================================================ */

/* ---- FILTER BAR: production v2 is already 56px flush white; only the
   visible deltas from restyle-shared.css are ported (radius 9 pills,
   softer seg track, active-pill shadow). NOTE: .main > .page{padding:0}
   deliberately NOT added; body.v2 already zeroes pg-dashboard / leads /
   crm / inbox / manual / configure, and a blanket rule would strip the
   padding on pg-search and other legacy pages. ---- */
.dz-source-drop{border-radius:9px}
.dz-source-drop:hover{background:#f0f0f3;border-color:#e7e9ef}
.dz-filterbar .ph-extra-sel{border-radius:9px}
.dz-filterbar .ph-extra-sel:hover{background-color:#f0f0f3;border-color:#e7e9ef}
.dz-filterbar .ph-clear-btn{border-radius:9px}
.dz-seg{background:#f0f0f3;border:1px solid #eef0f5;border-radius:10px;padding:3px}
.dz-seg button,.dz-seg .db-custom-btn{padding:6px 11px;border-radius:7px;
  font:500 12.5px/1 'DM Sans',system-ui,sans-serif;color:#6a7084}
.dz-seg button:hover,.dz-seg .db-custom-btn:hover{color:#0b0d14}
.dz-seg button.on,.dz-seg .db-custom-btn.on{background:#fff;color:#0b0d14;
  box-shadow:0 1px 2px rgba(15,18,30,0.06)}

/* ---- CRM BOARD: open columns with hairline dividers, light headers,
   white cards with a hover lift ---- */
.crm-board{gap:0;padding:2px 0 16px}
.crm-col{width:314px;min-width:314px;flex:0 0 auto;
  background:transparent;border:none;border-radius:0;padding:0 12px;overflow:visible}
.crm-col+.crm-col{border-left:1px solid #e7e9ef}
/* column color strip becomes the small square marker beside the name */
.crm-col-hd-bar{top:7px;left:8px;right:auto;bottom:auto;width:8px;height:8px;border-radius:2px}
.crm-col-hd{padding:2px 6px 12px 24px;border-bottom:none;
  display:flex;align-items:center;gap:9px;justify-content:flex-start}
.crm-col-name{font-size:12.5px;font-weight:600;letter-spacing:-0.005em;
  text-transform:none;color:#0b0d14 !important} /* beats the inline per-column color */
.crm-col-count{font-size:12px;font-weight:600;color:#6a7084;background:transparent;
  padding:0;border-radius:0;font-variant-numeric:tabular-nums}
.crm-col-body{padding:2px 2px 14px;gap:8px}
.crm-col.drag-over{background:rgba(46,91,255,0.05);border-radius:10px}
.crm-col.drag-over .crm-col-body{background:transparent}
.crm-card{border:1px solid #e7e9ef;border-radius:10px;padding:13px 14px;box-shadow:none}
.crm-card.has-tr{padding-right:38px}
.crm-card.has-tr.has-ig{padding-right:70px}
.crm-card:hover{border-color:rgba(46,91,255,0.35);
  box-shadow:0 4px 14px rgba(20,30,80,0.07);transform:translateY(-1px)}
.crm-card-name{font-size:13.5px;font-weight:600;letter-spacing:-0.01em}
.crm-card-handle{font-size:12px;color:#6a7084}
.crm-card-tr{top:13px;right:14px}
.crm-card-tr .crm-card-time{font-size:11px;color:#9aa0b4}
.crm-card-pic,.crm-card-pic-ph{width:36px;height:36px}
/* terminal tiles: white cards, color strip becomes the square marker */
.crm-terminals{gap:10px;margin-top:16px;padding-top:6px;border-top:none}
.crm-terminal-tile{background:#fff;border:1px solid #e7e9ef;border-radius:12px;
  padding:10px 16px;gap:12px;align-items:center}
.crm-terminal-tile:hover{border-color:#d7dbe6;background:#fafbff}
.crm-terminal-bar{position:static;width:8px;height:8px;border-radius:2px;flex-shrink:0}
.crm-terminal-label{font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0}
.crm-terminal-hint{font-size:11px;color:#9aa0b4;margin-top:1px}
.crm-terminal-count{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.crm-collapsed{gap:10px;margin-top:12px}
.crm-collapsed-item{flex:0 1 auto;background:#fafbff;border:1px solid #eef0f5;
  border-radius:999px;padding:6px 14px;gap:10px;justify-content:flex-start}
.crm-collapsed-item:hover{border-color:#e7e9ef;background:#f0f0f3}
.crm-collapsed-label{font-size:12px;font-weight:600;color:#6a7084}
.crm-collapsed-count{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---- LEADS TABLE: 64px rows, quiet uppercase header, soft-tint stage
   badges, dot-style source / interest pills ---- */
.leads-table-wrap{border:1px solid #e7e9ef;border-radius:12px;
  box-shadow:0 1px 2px rgba(14,18,30,0.04)}
.leads-table thead{background:#fff;border-bottom:none}
.leads-th{padding:13px 16px;font-size:11px;font-weight:600;letter-spacing:0.07em;
  color:#9aa0b4;border-bottom:1px solid #eef0f5;background:#fff}
.leads-row{height:64px}
.leads-row:hover{background:#fafbff}
.leads-td{padding:10px 16px;border-top:1px solid #f0f2f7}
.leads-table tbody tr:first-child .leads-td{border-top:none}
.leads-td-muted{color:#6a7084;font-size:12.5px;font-variant-numeric:tabular-nums}
.leads-name-cell{gap:12px}
.leads-pic,.leads-pic-ph{width:34px;height:34px}
.leads-name-primary{font-size:13.5px;font-weight:600;letter-spacing:-0.01em}
.leads-name-sub{font-size:12px;color:#6a7084}
/* stage badges on Leads + Manual rows: soft-tint pills (scoped so the CRM
   entry pills, inbox rows and slide panel keep their own treatments) */
.leads-td .bdg,.man-row-stage .bdg{padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:-0.005em}
.leads-td .bdg-potential,.man-row-stage .bdg-potential{background:rgba(139,92,246,0.10);color:#7c3aed}
.leads-td .bdg-inbound,.man-row-stage .bdg-inbound{background:rgba(13,148,136,0.10);color:#0d9488}
.leads-td .bdg-outbound,.man-row-stage .bdg-outbound{background:rgba(46,91,255,0.08);color:#2E5BFF}
.leads-td .bdg-lead-magnet,.man-row-stage .bdg-lead-magnet{background:rgba(249,115,22,0.10);color:#c2570c}
.leads-td .bdg-conversation,.man-row-stage .bdg-conversation{background:rgba(124,58,237,0.08);color:#7c3aed}
.leads-td .bdg-qualified,.man-row-stage .bdg-qualified{background:rgba(46,91,255,0.08);color:#2E5BFF}
.leads-td .bdg-proposed,.man-row-stage .bdg-proposed{background:rgba(245,158,11,0.10);color:#b45309}
.leads-td .bdg-booked,.man-row-stage .bdg-booked{background:rgba(16,185,129,0.08);color:#059669}
.leads-td .bdg-canceled,.man-row-stage .bdg-canceled{background:rgba(239,68,68,0.08);color:#dc2626}
.leads-td .bdg-not-interested,.man-row-stage .bdg-not-interested{background:rgba(113,113,122,0.10);color:#71717a}
.leads-td .bdg-disqualified,.man-row-stage .bdg-disqualified{background:rgba(239,68,68,0.08);color:#dc2626}
.leads-td .bdg-manual,.man-row-stage .bdg-manual{background:rgba(245,158,11,0.10);color:#b45309}
/* source: quiet colored dot + label (inline bg on the pill needs !important) */
.leads-src-pill{background:transparent !important;padding:0;border-radius:0;
  text-transform:none;letter-spacing:0;font-weight:600;font-size:12.5px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.leads-src-pill::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex-shrink:0}
/* interest: colored dot + word */
.leads-int-pill{background:transparent !important;padding:0;border-radius:0;
  font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap}
.leads-int-pill::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex-shrink:0}
.leads-int-pill.high{background:transparent !important;color:#059669}
.leads-int-pill.medium{background:transparent !important;color:#b45309}
.leads-int-pill.low{background:transparent !important;color:#6a7084}
.leads-fu-pill{background:transparent;padding:0;border-radius:0;font-size:12.5px;
  font-weight:700;color:#2E5BFF;font-variant-numeric:tabular-nums}
.leads-book-pill{background:transparent;padding:0;border-radius:0;color:#059669;
  font-weight:600;font-size:12.5px;white-space:nowrap}
.leads-source-dim{color:#9aa0b4;font-size:12.5px;font-variant-numeric:tabular-nums}
/* 24h-window state label — lives in the Last Message column (2026-07),
   lowercase quiet pill instead of the shouty EXP/24H tag beside the name */
.leads-24h-tag{font-size:11px;font-weight:600;margin-left:6px;padding:2px 8px;
  border-radius:999px;white-space:nowrap}
.leads-24h-tag.warn-soon{color:#b45309;background:rgba(245,158,11,0.12)}
.leads-24h-tag.warn-exp{color:#b91c1c;background:rgba(239,68,68,0.10)}
.leads-pagination{margin-top:12px;padding:0 4px;font-size:12.5px;color:#9aa0b4}
.leads-page-btn{border-radius:10px;font-size:12.5px}
.leads-page-btn:hover:not(:disabled){border-color:#2E5BFF;color:#2E5BFF;background:#fff}

/* ---- INBOX: rounded list rows, red/green section headers, cobalt AI
   bubbles, refreshed composer. Chat-pane rules are unscoped because the
   Manual page reuses .inb-chat-ct / .cb / .inb-chat-in. ---- */
.inb-list{width:360px;min-width:360px;border-right:1px solid #e7e9ef}
.inb-list-hd{padding:14px 16px;border-bottom:1px solid #eef0f5}
/* the tabs row carries inline styles in the markup; !important wins */
.inb-fu-tabs{gap:2px !important;background:#f4f5fa;border:1px solid #eef0f5;
  border-radius:10px;padding:3px !important;margin-bottom:0 !important}
.inb-fu-tab{flex-shrink:0;padding:7px 12px;border-radius:8px;font-size:12.5px;
  font-weight:600;color:#6a7084;letter-spacing:-0.01em;border:1px solid transparent}
.inb-fu-tab:hover{background:transparent;color:#0b0d14}
.inb-fu-tab.active{background:#fff;color:#0b0d14;border-color:#e7e9ef;
  box-shadow:0 1px 2px rgba(14,18,30,0.04)}
#inbAfrCount{color:#2E5BFF}
.inb-items{padding:4px 8px 16px}
.inb-sec-hd{padding:14px 8px 7px;font-size:11px;font-weight:700;letter-spacing:0.06em;
  color:#6a7084;background:#fff;border-bottom:none;gap:7px}
.inb-sec-hd.attn{color:#ef4444}
.inb-sec-hd.upc{color:#10b981}
.inb-sec-hd.cncl{color:#d97706}
.inb-sec-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  font-size:10.5px;background:rgba(106,112,132,0.12);color:#6a7084}
.inb-sec-hd.attn .inb-sec-count{background:rgba(239,68,68,0.12);color:#ef4444}
.inb-sec-hd.upc .inb-sec-count{background:rgba(16,185,129,0.14);color:#0c8f66}
.inb-sec-hd.cncl .inb-sec-count{background:rgba(245,158,11,0.14);color:#b45309}
.inb-item{padding:11px 10px;border-bottom:none;border-radius:12px;gap:11px;
  margin-bottom:1px;position:relative}
.inb-item:hover{background:rgba(46,91,255,0.06)}
.inb-item.active{background:rgba(46,91,255,0.06);border-left:0;border-image:none;
  padding-left:10px}
.inb-item.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;
  width:3px;border-radius:0 3px 3px 0;background:#2E5BFF}
.inb-name{font-size:13.5px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.inb-time{font-size:11px}
.inb-top{gap:8px}
.inb-top-right{gap:7px}
.inb-handle{font-size:12px;color:#6a7084;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.inb-bdg{margin-top:6px;gap:6px 10px}
/* stage badge in a list row or the chat header: quiet dot + label */
.inb-bdg .bdg,.inb-chat-hn .bdg{background:transparent;padding:0;border-radius:0;
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  letter-spacing:0;white-space:nowrap}
.inb-bdg .bdg::before,.inb-chat-hn .bdg::before{content:"";width:6px;height:6px;
  border-radius:50%;background:currentColor;flex-shrink:0}
.inb-bdg .bdg-potential,.inb-chat-hn .bdg-potential{color:#8b5cf6}
.inb-bdg .bdg-inbound,.inb-chat-hn .bdg-inbound{color:#0d9488}
.inb-bdg .bdg-outbound,.inb-chat-hn .bdg-outbound{color:#2E5BFF}
.inb-bdg .bdg-lead-magnet,.inb-chat-hn .bdg-lead-magnet{color:#f97316}
.inb-bdg .bdg-conversation,.inb-chat-hn .bdg-conversation{color:#8b5cf6}
.inb-bdg .bdg-qualified,.inb-chat-hn .bdg-qualified{color:#2E5BFF}
.inb-bdg .bdg-proposed,.inb-chat-hn .bdg-proposed{color:#c47f17}
.inb-bdg .bdg-booked,.inb-chat-hn .bdg-booked{color:#10b981}
.inb-bdg .bdg-canceled,.inb-chat-hn .bdg-canceled{color:#ef4444}
.inb-bdg .bdg-not-interested,.inb-chat-hn .bdg-not-interested{color:#71717a}
.inb-bdg .bdg-disqualified,.inb-chat-hn .bdg-disqualified{color:#ef4444}
.inb-attn-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:7px;
  text-transform:none;letter-spacing:0;background:rgba(239,68,68,0.10);color:#c22525}
.inb-attn-chip.selfrep,.inb-attn-chip.lead_deferred{background:rgba(245,158,11,0.14);color:#b45309}
.inb-call-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:7px;
  letter-spacing:0;background:rgba(16,185,129,0.12);color:#0c8f66}
.inb-cancel-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:7px;
  text-transform:none;letter-spacing:0;background:rgba(245,158,11,0.14);color:#b45309}
.fu-pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:7px;
  text-transform:none;letter-spacing:0}
.fu-pill.sent{background:rgba(46,91,255,0.10);color:#2E5BFF}
.fu-pill.sched{background:rgba(245,158,11,0.14);color:#b45309}
/* thread pane */
.inb-chat{background:#fafbff}
.inb-chat-hd{padding:14px 22px;border-bottom:1px solid #eef0f5;gap:13px;box-shadow:none}
.inb-chat-pic,.inb-chat-pic-ph{width:40px;height:40px}
.inb-chat-nm{font-size:15px;font-weight:600;letter-spacing:-0.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.inb-chat-hn{font-size:12.5px;color:#6a7084;display:flex;align-items:center;gap:7px;
  margin-top:1px;overflow:hidden;white-space:nowrap;max-width:100%}
.inb-action{padding:7px 14px;font-size:12.5px;font-weight:600;border-radius:9px}
.inb-icon-btn{width:32px;height:32px;border-radius:9px}
.inb-chat-bd{padding:22px 26px}
.msg-day-sep{font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;
  margin:20px 0 14px}
.msg-day-sep:first-child{margin-top:2px}
.msg-group{gap:10px;margin-bottom:14px}
.msg-group-pic,.msg-group-pic-ph{width:26px;height:26px}
.msg-group-pic-ph{font-size:10px;font-weight:700}
.msg-group.ai .msg-group-pic-ph{border-radius:9px;border:none;
  background:linear-gradient(135deg,#2E5BFF 0%,#1B3BCC 100%);color:#fff;
  letter-spacing:0.02em;box-shadow:0 2px 6px rgba(46,91,255,0.28)}
.msg-group-bubbles{max-width:62%;gap:2px}
/* ── Instagram-style bubbles (2026-07) ─────────────────────────────────
   18px base radius. Corners ADJACENT to a sibling bubble from the same
   sender flatten to 8px on the sender's side (right for ai/operator, left
   for lead) — both within one message (multi-bubble \n---\n rows) and
   ACROSS consecutive same-sender messages (:has(+) sibling rules; a day
   separator between rows naturally breaks adjacency). Outer corners of a
   run stay fully rounded, no permanent tail. -of-type selectors skip the
   media badge <span>/<a> children in the bubbles container. */
.cb{padding:10px 15px;font-size:13.5px;line-height:1.55;border-radius:20px;
  width:fit-content;word-break:break-word}
/* explicit tail-corner resets — the early base block (.cb.lead/.cb.ai/.cb.operator
   ~line 1257) sets 4px tails that would otherwise survive this override */
.cb.lead{background:#f0f2f7;color:#0b0d14;box-shadow:none;border-bottom-left-radius:20px}
.cb.ai{background:linear-gradient(135deg,#2E5BFF 0%,#1B3BCC 100%);color:#fff;
  font-weight:500;box-shadow:0 2px 8px rgba(46,91,255,0.20);border-bottom-right-radius:20px}
.cb.operator{border-bottom-right-radius:20px}
.cb.ai a{color:#fff;text-decoration:underline;text-underline-offset:2px}
/* within one message: flatten inner adjacent corners */
.msg-group-bubbles div.cb.ai:not(:last-of-type),
.msg-group-bubbles div.cb.operator:not(:last-of-type){border-bottom-right-radius:8px}
.msg-group-bubbles div.cb.ai:not(:first-of-type),
.msg-group-bubbles div.cb.operator:not(:first-of-type){border-top-right-radius:8px}
.msg-group-bubbles div.cb.lead:not(:last-of-type){border-bottom-left-radius:8px}
.msg-group-bubbles div.cb.lead:not(:first-of-type){border-top-left-radius:8px}
/* across messages: same-sender neighbors flatten facing corners + tighten gap */
.msg-group.ai:has(+ .msg-group.ai) .msg-group-bubbles div.cb:last-of-type,
.msg-group.operator:has(+ .msg-group.operator) .msg-group-bubbles div.cb:last-of-type{
  border-bottom-right-radius:8px}
.msg-group.ai + .msg-group.ai .msg-group-bubbles div.cb:first-of-type,
.msg-group.operator + .msg-group.operator .msg-group-bubbles div.cb:first-of-type{
  border-top-right-radius:8px}
.msg-group.lead:has(+ .msg-group.lead) .msg-group-bubbles div.cb:last-of-type{
  border-bottom-left-radius:8px}
.msg-group.lead + .msg-group.lead .msg-group-bubbles div.cb:first-of-type{
  border-top-left-radius:8px}
.msg-group.ai:has(+ .msg-group.ai),
.msg-group.operator:has(+ .msg-group.operator),
.msg-group.lead:has(+ .msg-group.lead){margin-bottom:3px}

/* ── Photo messages + in-app lightbox (2026-07) ── */
.msg-photo-wrap{margin:2px 0}
.msg-photo{display:block;max-width:240px;max-height:300px;border-radius:18px;
  cursor:zoom-in;border:1px solid rgba(14,18,30,0.06)}
.msg-photo-expired{display:inline-block;font-size:12px;color:#9aa0b4;
  background:#f0f2f7;border:1px dashed #d7dae3;border-radius:12px;padding:8px 12px}
.media-lightbox{position:fixed;inset:0;z-index:300;display:none;align-items:center;
  justify-content:center;background:rgba(8,10,16,0.86);padding:32px;cursor:zoom-out}
.media-lightbox.open{display:flex}
.media-lightbox img{max-width:92vw;max-height:92vh;border-radius:12px;cursor:default;
  box-shadow:0 24px 80px rgba(0,0,0,0.5)}
.media-lightbox-x{position:absolute;top:16px;right:20px;width:40px;height:40px;
  border-radius:50%;border:none;background:rgba(255,255,255,0.12);color:#fff;
  font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .12s}
.media-lightbox-x:hover{background:rgba(255,255,255,0.24)}
/* composer (padding-bottom keeps the iOS safe-area clearance) */
.inb-chat-in{padding:14px 22px;border-top:1px solid #eef0f5;gap:10px;
  padding-bottom:max(14px, env(safe-area-inset-bottom))}
.inb-chat-in input{padding:11px 16px;border:1px solid #e7e9ef;border-radius:12px;
  background:#fafbff;font-size:13.5px}
.inb-chat-in input:focus{background:#fff;box-shadow:0 0 0 3px rgba(46,91,255,0.06)}
.inb-chat-in button{padding:11px 20px;border-radius:10px;font-size:13px;font-weight:600;
  background:linear-gradient(135deg,#2E5BFF 0%,#1B3BCC 100%);
  box-shadow:0 4px 12px rgba(46,91,255,0.25)}
.inb-chat-in button:hover{transform:none;filter:brightness(1.06);
  box-shadow:0 4px 12px rgba(46,91,255,0.30)}
.inb-chat-in button:active{transform:scale(0.97)}

/* ---- MANUAL QUEUE: 72px rows with quiet dividers, dot-style reason
   chips. The mockup's mq-* section headers and .mq-reply button need
   markup, so they are skipped (later commit). ---- */
.man-list-wrap{border:1px solid #e7e9ef;border-radius:12px;
  box-shadow:0 1px 2px rgba(14,18,30,0.04)}
.man-row{grid-template-columns:minmax(220px,1.35fr) minmax(150px,0.95fr) minmax(250px,1.5fr) auto;
  gap:14px;min-height:72px;padding:10px 16px 10px 18px;border-top:1px solid #f0f2f7}
.man-row:first-child{border-top:none}
.man-row:hover{background:#fafbff}
.man-row-name{gap:12px}
.man-row-pic,.man-row-pic-ph{width:38px;height:38px;font-size:14px}
.man-row-name-primary{font-size:13.5px;font-weight:600;letter-spacing:-0.01em}
.man-row-name-sub{font-size:12px;color:#6a7084}
.man-reason-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:600;padding:3px 10px;border-radius:999px;text-transform:none;
  letter-spacing:0;background:rgba(154,160,180,0.12);color:#6a7084}
.man-reason-chip::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex-shrink:0}
.man-reason-chip.window_expired{background:rgba(239,68,68,0.08);color:#dc2626}
.man-reason-chip.dashboard_send,
.man-reason-chip.ig_direct{background:rgba(99,102,241,0.08);color:#4f46e5}
.man-reason-chip.operator_toggle,
.man-reason-chip.no_slots_available,
.man-reason-chip.lead_deferred,
.man-reason-chip.booking_self_reported{background:rgba(245,158,11,0.10);color:#b45309}
.man-reason-chip.job_applicant,
.man-reason-chip.business_inquiry{background:rgba(154,160,180,0.14);color:#52525b}
.man-row-urgency{font-size:12px;color:#6a7084;gap:10px}
.man-row-urgency.crit{color:#ef4444;font-weight:500}
.man-row-urgency.warn{color:#b45309;font-weight:500}
.man-row-urgency-meta{color:#9aa0b4;font-size:12px;white-space:nowrap}
.man-row-actions{gap:8px}
.man-row-action{width:32px;height:32px;border-radius:8px;background:#fff;
  border:1px solid #e7e9ef;color:#6a7084}
.man-row-action:hover{border-color:rgba(46,91,255,0.35);color:#0b0d14}
.man-row-action svg{width:15px;height:15px}
/* keep the resume button's accent treatment on the new shape */
.man-row-action.resume{background:rgba(46,91,255,0.10);color:#2E5BFF;border-color:transparent}
.man-row-action.resume:hover{background:rgba(46,91,255,0.18);color:#2E5BFF}

/* ---- DASHBOARD BODY: white KPI cards with delta pills, seated card
   headers, cobalt-to-green funnel, hoverable source rows. The Book rate
   hero KPI, funnel book-rate chip and source switcher chips need markup,
   so they are skipped (later commits). ---- */
.dz-kpis{gap:16px}
.dz-kpi{background:#fff;border:1px solid #e7e9ef;border-radius:12px;
  box-shadow:0 1px 2px rgba(14,18,30,0.04);padding:20px 20px 18px;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.dz-kpi:hover{border-color:rgba(46,91,255,0.3);transform:none;
  box-shadow:0 8px 24px rgba(14,18,30,0.06),0 2px 8px rgba(14,18,30,0.04)}
.dz-kpi-hd{margin-bottom:14px;gap:8px}
.dz-kpi-lbl{font-size:12.5px;font-weight:600;letter-spacing:-0.005em;
  text-transform:none;color:#6a7084;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.dz-kpi-icn{width:30px;height:30px;border-radius:9px}
.dz-kpi-icn svg{width:15px;height:15px;stroke-width:1.7}
.dz-kpi-num{font-size:29px;font-weight:700;letter-spacing:-0.03em}
.dz-kpi-foot{margin-top:13px;gap:8px;justify-content:flex-start;flex-wrap:wrap}
.dz-kpi-delta{font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px}
.dz-kpi-delta.up{color:#10b981;background:rgba(16,185,129,0.08)}
.dz-kpi-delta.down{color:#ef4444;background:rgba(239,68,68,0.08)}
.dz-kpi-delta.flat,.dz-kpi-delta.none{color:#9aa0b4;background:transparent;padding:3px 0}
.dz-kpi-cmp{font-size:11px;color:#9aa0b4;white-space:nowrap}
/* card primitive: header seated on a divider, content re-padded below */
.dz-card{background:#fff;border:1px solid #e7e9ef;border-radius:12px;
  box-shadow:0 1px 2px rgba(14,18,30,0.04);padding:0;overflow:hidden}
.dz-card-hd{padding:18px 22px;border-bottom:1px solid #eef0f5;margin-bottom:0}
.dz-card-hd-l{gap:3px}
.dz-card-title{font-size:15px}
.dz-card-sub{font-size:12.5px;color:#9aa0b4}
/* funnel */
.dz-funnel-vert{padding:20px 22px 24px;margin-top:0}
.dz-fbar{height:60px;border-radius:10px;padding:0 20px;box-shadow:none}
.dz-fbar.s1{background:linear-gradient(135deg,#2E5BFF 0%,#1B3BCC 100%)}
.dz-fbar.s2{background:linear-gradient(135deg,#4169ff 0%,#2447e0 100%)}
.dz-fbar.s3{background:linear-gradient(135deg,#5878ff 0%,#3355ea 100%)}
.dz-fbar.s4{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}
.dz-fbar.s5{background:linear-gradient(135deg,#0ca678 0%,#047857 100%)}
.dz-fbar-name{font-size:13.5px;font-weight:600;letter-spacing:-0.005em}
.dz-fbar-pct{font-size:11.5px;color:rgba(255,255,255,0.75)}
.dz-fbar-val{font-size:19px;font-weight:700;letter-spacing:-0.02em;padding-left:14px}
.dz-fconn{padding:7px 0}
.dz-fconn-line{display:none} /* no seam through the funnel in the restyle */
.dz-fconn-pill{background:#fafbff;border:1px solid #eef0f5;padding:5px 13px;
  font-size:11.5px;box-shadow:0 1px 2px rgba(14,18,30,0.04)}
.dz-fconn-pill .lbl{color:#9aa0b4}
.dz-fconn-pill .v{font-weight:700;color:#0b0d14}
.dz-fconn-pill .cmp{color:#9aa0b4}
.dz-fconn-delta{font-size:11px}
.dz-fconn-delta.up{color:#10b981}
.dz-fconn-delta.down{color:#ef4444}
.dz-fconn-delta.flat{color:#6a7084}
/* source breakdown */
.dz-source-stats{grid-template-columns:repeat(4,minmax(0,1fr));
  padding:16px 22px 15px;border-bottom:1px solid #eef0f5;margin:0}
.dz-source-stat{padding:0 20px;border-left:1px solid #eef0f5;min-width:0}
.dz-source-stat:first-child{border-left:0;padding-left:0}
.dz-source-stat-lbl{font-size:12px;font-weight:600;letter-spacing:-0.005em;
  text-transform:none;color:#9aa0b4;margin-bottom:7px}
.dz-source-stat-val{font-size:20px;font-weight:700;letter-spacing:-0.02em}
.dz-source-stat-val.green{color:#10b981}
.dz-source-rows{gap:4px;padding:12px 22px 18px}
.dz-source-row{grid-template-columns:150px 1fr auto;gap:18px;
  padding:9px 10px;margin:0 -10px;border-radius:10px;
  transition:background .15s var(--ease),opacity .15s var(--ease)}
.dz-source-row:hover{background:#fafbff}
.dz-source-row-lbl{font-size:13px;font-weight:500;white-space:nowrap}
.dz-source-bar-wrap{background:#eef0f5}
.dz-source-row-meta{font-size:12.5px;color:#9aa0b4}
.dz-source-row-meta strong{color:#0b0d14}
.dz-source-row-meta .rate{color:#2E5BFF;font-weight:600}
/* time-series chart */
.dz-chart-svg{height:216px;padding:12px 16px 8px}

/* ---- MOBILE GUARDS: the overrides above sit later in the cascade than
   the base media queries, so the mobile geometry those queries set is
   re-asserted here against the new visual model. ---- */
@media(max-width:900px){
  .inb-list{width:240px;min-width:240px}
  .dz-kpis{grid-template-columns:1fr 1fr;gap:8px}
  .dz-kpi{padding:12px 12px 10px;border-radius:12px}
  .dz-kpi-num{font-size:22px}
  .dz-kpi-lbl{font-size:11px}
  .dz-card{border-radius:12px}
  .dz-card-hd{padding:14px}
  .dz-funnel-vert{padding:14px 14px 18px}
  .dz-fbar{height:48px;padding:0 14px;border-radius:10px}
  .dz-fbar-name{font-size:12.5px}
  .dz-fbar-pct{display:none}
  .dz-fbar-val{font-size:18px}
  .dz-fconn-pill{font-size:10.5px;padding:4px 10px;gap:6px}
  .dz-fconn-pill .cmp{display:none}
  .dz-source-stats{grid-template-columns:repeat(2,1fr);gap:14px 0;padding:14px}
  .dz-source-stat{padding:0 14px;border-left:1px solid #eef0f5}
  .dz-source-stat:nth-child(odd){border-left:0;padding-left:0}
  .dz-source-stat-val{font-size:18px}
  .dz-source-rows{padding:10px 14px 16px}
  .dz-source-row{grid-template-columns:1fr;gap:6px;margin:0;padding:8px 0;border-radius:0}
  .dz-source-row:hover{background:transparent}
  .dz-source-row-meta{font-size:11.5px}
}
@media(max-width:880px){
  .man-row{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;
    gap:8px 12px;min-height:0;padding:12px 14px}
}
@media(max-width:768px){
  .crm-board{gap:0}
  .crm-col{width:auto;min-width:min(82vw,280px);max-width:320px;flex:0 0 auto}
  .inb-list{width:100%;min-width:0;border-right:0}
}

/* ============================================================
   UI RESTYLE 2026-07 — PREVIEW FIXES (commit 3/n)
   Regressions caught on the branch preview:
   - inbox pane clipped: .inb-layout is position:fixed and anchored at
     left:var(--sidebar-w), but the restyle widened the sidebar to 264px
     while the variable was still 220px. Sync the variable.
   - leads table sat in a floating card with a gap under the filter bar;
     make it flush.
   - queue reason chip and stage badge used different chip shapes; unify.
   ============================================================ */

/* inbox clip fix: keep the fixed inbox pane aligned to the wider sidebar */
:root{--sidebar-w:264px}

/* leads: flush table under the filter bar, no floating card, no gap */
#pg-leads .ph-body{padding:0 !important}
#pg-leads .leads-table-wrap{border:0 !important;border-radius:0 !important;
  box-shadow:none !important}
#pg-leads .leads-th{padding-left:26px}
#pg-leads .leads-td{padding-left:26px}
#pg-leads .leads-th:last-child,#pg-leads .leads-td:last-child{padding-right:26px}

/* queue: reason chip matches the stage badge exactly (no dot, same pill)
   so "Window Expired" / "Took Over" read as the same family as the
   "Lead Magnet" / "In Conversation" stage badge next to them */
.man-reason-chip{padding:4px 11px !important;font-size:11.5px !important;
  font-weight:600 !important;letter-spacing:-0.005em !important;
  text-transform:none !important;gap:0 !important}
.man-reason-chip::before{display:none !important}
/* keep the stage badge + reason chip cluster tidy and left-aligned */
.man-row-stage{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ============================================================
   UI RESTYLE 2026-07 — AI / SETUP split (commit 4/n)
   AI nav = the tester only (data-subtab="test"). New Setup nav =
   Prompt / Messaging / Follow-ups / Integrations on a left rail,
   both reusing the existing pg-configure render + save + simulator.
   Driven by pg-configure[data-cfmode].
   ============================================================ */

/* top tab bar is retired in both views (JS also hides it) */
#pg-configure .dz-tabs{display:none !important}

/* left rail (Setup only) */
#pg-configure .cf-rail{display:none}
#pg-configure[data-cfmode="setup"] .ph-body{display:flex;gap:28px;align-items:flex-start;
  max-width:1150px;margin:0 auto;width:100%}
#pg-configure[data-cfmode="setup"] .cf-rail{display:flex;flex-direction:column;gap:2px;
  width:210px;flex:0 0 210px;position:sticky;top:20px}
#pg-configure[data-cfmode="setup"] #cfContent{max-width:820px;margin:0;flex:1;min-width:0}
.cf-rail-btn{text-align:left;background:transparent;border:0;font-family:inherit;font-size:13.5px;
  font-weight:600;color:#6a7084;padding:10px 14px;border-radius:9px;cursor:pointer;
  position:relative;transition:background .12s,color .12s}
.cf-rail-btn:hover{background:#f0f0f3;color:#0b0d14}
.cf-rail-btn.on{color:#2E5BFF;background:rgba(46,91,255,0.07)}
.cf-rail-btn.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:2px;background:#2E5BFF}

/* Setup nav item shares the nav-row look; nothing extra needed. AI view
   (tester only) keeps the standard centered content column. */

/* ============================================================
   UI RESTYLE 2026-07 — preview fixes round 2 (commit 5/n)
   Inbox sticky flush, AI tester flush-left, Setup rail flush-left,
   integrations flattened (no dropdowns), Settings gets the same
   left-rail as Setup so the two read as one system.
   ============================================================ */

/* 1. Inbox: kill the gap band above the sticky section header so it sits
      flush to the top of the list as you scroll */
.inb-items{padding-top:0 !important}
.inb-sec-hd{top:0 !important;background:#fff !important;z-index:3}
.inb-sec-hd:first-child{padding-top:10px}

/* 2. AI tester: flush left instead of a floating centered column */
#pg-configure[data-cfmode="ai"] #cfContent{max-width:1080px;margin:0}

/* 3. Setup: left rail flush to the left edge of the content (no centering) */
#pg-configure[data-cfmode="setup"] .ph-body{display:flex;gap:0;align-items:stretch;
  max-width:none;margin:0;padding:0}
#pg-configure[data-cfmode="setup"] .cf-rail{width:216px;flex:0 0 216px;
  padding:4px 14px 20px 0;border-right:1px solid #eef0f5;gap:2px}
#pg-configure[data-cfmode="setup"] #cfContent{max-width:840px;margin:0;flex:1;min-width:0;
  padding-left:28px}

/* 4. Integrations are flat cards now (markup dropped <details>): no chevron,
      no pointer, the summary row is just a card header */
.cf-section-summary{cursor:default !important}
.cf-section-summary::after{display:none !important}

/* 5. Settings: same left-rail as Setup so both pages are uniform */
.settings-body{max-width:none !important;position:relative;padding-left:216px}
.settings-body .tab-bar{position:absolute;left:0;top:0;bottom:0;width:216px;
  flex-direction:column !important;gap:2px;padding:4px 14px 0 0;
  border-right:1px solid #eef0f5;background:transparent !important;align-items:stretch}
.settings-body > [data-subtab]{max-width:840px}
.settings-body .tab-btn{text-align:left;background:transparent;border:0;font-family:inherit;
  font-size:13.5px;font-weight:600;color:#6a7084;padding:10px 14px;border-radius:9px;
  position:relative;width:100%;cursor:pointer;transition:background .12s,color .12s}
.settings-body .tab-btn:hover{background:#f0f0f3;color:#0b0d14}
.settings-body .tab-btn.active{color:#2E5BFF;background:rgba(46,91,255,0.07)}
.settings-body .tab-btn.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;
  width:3px;border-radius:2px;background:#2E5BFF}

/* ============================================================
   UI RESTYLE 2026-07 — preview fixes round 3 (commit 6/n)
   - Manual queue: the chat slides over the whole list as a desktop
     overlay, but the back arrow was mobile-only, so there was no way
     back. Show it inside the manual chat on every width. inbBack()
     already targets .man-layout via chatLayoutSel(), so it just works.
   - Setup/AI: first section (About you / Openers / Follow up timing)
     sat jammed under the "Setup" header bar; add top breathing room.
   - AI tester: flush-left and padded like the Setup page so the two
     read as one system.
   ============================================================ */

/* manual queue: back arrow visible in the desktop overlay */
.man-chat .inb-chat-back{display:inline-flex !important;align-items:center;justify-content:center;
  width:38px;height:38px;background:transparent;border:0;color:#0b0d14;cursor:pointer;
  border-radius:9px;font-size:20px;line-height:1;margin-right:6px;flex-shrink:0}
.man-chat .inb-chat-back:hover{background:#f0f0f3}

/* Setup: breathing room so the first section clears the header bar */
#pg-configure[data-cfmode="setup"] #cfContent{padding-top:24px}
#pg-configure[data-cfmode="setup"] .cf-rail{padding-top:24px}

/* AI tester: flush-left + padded, uniform with the Setup page */
#pg-configure[data-cfmode="ai"] .ph-body{padding:0}
#pg-configure[data-cfmode="ai"] #cfContent{max-width:1120px;margin:0;padding:24px 28px}

/* ============================================================
   UI RESTYLE 2026-07 — preview fixes round 4 (commit 7/n)
   ============================================================ */

/* AI tester flush-left: the #cfContent element carries an INLINE
   style="max-width:980px;margin:0 auto" that was silently beating the
   earlier rules. !important overrides it so AI finally sits flush like
   Setup. */
#pg-configure[data-cfmode="ai"] #cfContent{max-width:1120px !important;margin:0 !important;
  padding:24px 28px !important}
#pg-configure[data-cfmode="setup"] #cfContent{margin:0 !important}

/* Inbox: remove the empty white band above the first sticky section
   header (the extra top padding read as a blank bar). Tight + flush. */
.inb-sec-hd{padding:8px 12px 6px !important}
.inb-sec-hd:first-child{padding-top:8px !important}

/* Manual queue: flush to the left like the other pages, no floating card */
.man-list .ph-body{padding:0 !important}
.man-list-wrap{border:0 !important;border-radius:0 !important;box-shadow:none !important}
.man-row{padding-left:22px !important;padding-right:22px !important}

/* Manual queue: stage badge + reason chip in fixed columns so they line
   up top-to-bottom instead of staggering by badge width */
.man-row-stage{display:grid !important;grid-template-columns:158px auto;align-items:center;
  gap:8px;flex-wrap:nowrap !important}
.man-row-stage .bdg{justify-self:start;white-space:nowrap}
.man-row-stage .man-reason-chip{justify-self:start}

/* Manual chat header "MANUAL" chip: a clean red pill (the generic
   .inb-chat-hn .bdg rule had stripped its padding/radius) */
.inb-chat-hn .bdg.man-hdr-chip{background:rgba(239,68,68,0.10) !important;color:#dc2626 !important;
  padding:3px 10px !important;border-radius:999px !important;font-size:10.5px;font-weight:700;
  letter-spacing:.03em}

/* Back arrow: clean chevron, no box, no line (SVG set in markup) */
.man-chat .inb-chat-back svg,.inb-chat-back svg{width:20px;height:20px}
.man-chat .inb-chat-back{border:0 !important;background:transparent !important}

/* ============================================================
   UI RESTYLE 2026-07 — AI flush hard fix + inbox band (commit 9/n)
   Ground-truth headless test proved the flush CSS works only when
   data-cfmode="ai" is present, but that attribute was not reliably set
   at runtime, so the tester kept using its inline margin:0 auto and
   stayed centered. Match on :not([data-cfmode="setup"]) so the flush
   applies whether the attr is "ai" or absent; Setup (attr="setup") is
   excluded and keeps its rail. go() now also stamps the attr up front.
   ============================================================ */
#pg-configure:not([data-cfmode="setup"]) .ph-body{padding:0 !important}
#pg-configure:not([data-cfmode="setup"]) #cfContent{max-width:1120px !important;
  margin:0 !important;padding:24px 28px !important}

/* Inbox: the first section header sits flush to the top of the list —
   no white band above "Needs Attention" */
.inb-items{padding-top:0 !important}
.inb-sec-hd{padding:6px 12px 6px !important}
.inb-sec-hd:first-child{padding-top:0 !important;margin-top:0 !important}

/* ============================================================
   UI RESTYLE 2026-07 — dashboard book-rate + admin badge (commit 10/n)
   ============================================================ */

/* Book rate hero KPI leads a 6-card row (was 5) */
.dz-kpis{grid-template-columns:repeat(6,minmax(0,1fr)) !important}
@media(max-width:1200px){.dz-kpis{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media(max-width:680px){.dz-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
.dz-kpi.hero{background:linear-gradient(135deg,#2E5BFF 0%,#1B3BCC 100%) !important;
  border-color:transparent !important;box-shadow:0 10px 26px rgba(46,91,255,0.30) !important}
.dz-kpi.hero .dz-kpi-lbl{color:rgba(255,255,255,0.85) !important}
.dz-kpi.hero .dz-kpi-num{color:#fff !important}
.dz-kpi.hero .dz-kpi-icn{background:rgba(255,255,255,0.18) !important;color:#fff !important}
.dz-kpi.hero .dz-kpi-delta.up{color:#fff !important;background:rgba(255,255,255,0.18) !important}
.dz-kpi.hero .dz-kpi-delta.none,.dz-kpi.hero .dz-kpi-delta.flat{color:rgba(255,255,255,0.85) !important;background:transparent !important}
.dz-kpi.hero .dz-kpi-cmp{color:rgba(255,255,255,0.65) !important}
.dz-kpi.hero:hover{box-shadow:0 14px 32px rgba(46,91,255,0.4) !important;border-color:transparent !important}

/* Funnel book-rate chip, centred under the last bar */
.dz-fbook{display:flex;align-items:center;justify-content:center;gap:9px;margin:18px auto 4px;
  padding:11px 22px;width:fit-content;background:rgba(46,91,255,0.06);
  border:1px solid rgba(46,91,255,0.18);border-radius:999px;font-variant-numeric:tabular-nums}
.dz-fbook .lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:#2E5BFF}
.dz-fbook .num{font-size:21px;font-weight:700;letter-spacing:-0.02em;color:#2E5BFF;line-height:1}
.dz-fbook .sub{font-size:12px;color:#6a7084}

/* Source breakdown: which source the book rate is for + accent value */
.dz-br-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;
  background:rgba(46,91,255,0.08);color:#2E5BFF;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;vertical-align:1px}
.dz-source-stat-val.accent{color:#2E5BFF}

/* Admin badge legible on the white sidebar (was faint dark-theme colors) */
.admin-badge-wrap{background:rgba(124,58,237,0.07) !important;border:1px solid rgba(124,58,237,0.20) !important}
.admin-badge-label{color:#7c3aed !important}
.admin-badge-email{color:#6a7084 !important}
.admin-badge-dot{background:#a15bff !important}

/* CRM card source pill: leading origin glyph so it reads as the lead's source */
.crm-card-entry{display:inline-flex !important;align-items:center;gap:5px}
.crm-card-entry-ic{opacity:.7;flex-shrink:0}

/* ============================================================
   UI RESTYLE 2026-07 — rate cards below the funnel (commit 12/n)
   Book rate is no longer a top hero or a funnel chip. Instead a row of
   rate cards sits below the conversion funnel: each funnel stage as a %
   of TOTAL leads, with the lead count as the denominator on every card.
   ============================================================ */
/* KPI row back to 5 count cards (hero removed) */
.dz-kpis{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
@media(max-width:1100px){.dz-kpis{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media(max-width:680px){.dz-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}

.dz-ratecards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
@media(max-width:900px){.dz-ratecards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dz-ratecard{background:#fff;border:1px solid #e7e9ef;border-radius:12px;
  box-shadow:0 1px 2px rgba(14,18,30,0.04);padding:18px 20px;
  transition:border-color .15s,box-shadow .15s}
.dz-ratecard:hover{border-color:rgba(46,91,255,0.3);box-shadow:0 8px 24px rgba(14,18,30,0.06)}
.dz-ratecard-lbl{font-size:12.5px;font-weight:600;color:#6a7084;margin-bottom:12px}
.dz-ratecard-num{font-size:28px;font-weight:700;letter-spacing:-0.03em;color:#2E5BFF;line-height:1;
  font-variant-numeric:tabular-nums}
.dz-ratecard-den{font-size:12px;color:#9aa0b4;margin-top:9px}

/* ============================================================
   UI RESTYLE 2026-07 — Test AI blend + chat avatar (commit 12/n cont.)
   The tester sat in a big white card that read as its own section.
   Drop the card chrome so the iPhone + controls sit on the page and
   belong; lift the phone with a soft shadow instead of a box border.
   ============================================================ */
#pg-configure .sim-wrap-grid{background:transparent !important;border:0 !important;
  box-shadow:none !important;padding:0 !important;gap:40px !important;align-items:flex-start !important}
#pg-configure .sim-phone{box-shadow:0 12px 34px rgba(14,18,30,0.12);border-radius:38px}
/* a touch more air above the tester so the TEST AI heading breathes */
#pg-configure [data-subtab="test"]{padding-top:4px}

/* ============================================================
   SETUP RESTYLE 2026-07 — sp-* card system for Prompt / Messaging /
   Follow-ups. Ported from setup-restyle-mockup.html, retokenized to
   production vars and scoped under #pg-configure. Integrations + Test
   keep their existing markup.
   ============================================================ */
#pg-configure .sp-card{background:var(--bg-white);border:1px solid var(--border);border-radius:12px;
  padding:24px;box-shadow:var(--shadow-sm);margin-bottom:16px}
#pg-configure .sp-hd{padding-bottom:14px;border-bottom:1px solid var(--border-light);margin-bottom:18px}
#pg-configure .sp-title{font-size:15px;font-weight:700;letter-spacing:-0.01em;color:var(--text)}
#pg-configure .sp-desc{font-size:var(--fs-base);color:var(--text-muted);margin-top:3px;line-height:1.55}

/* field pattern */
#pg-configure .sp-field{margin-bottom:18px}
#pg-configure .sp-field:last-child{margin-bottom:0}
#pg-configure .sp-field>label{display:block;font-size:var(--fs-base);font-weight:600;
  color:var(--text-secondary);letter-spacing:-0.005em;margin-bottom:6px}
#pg-configure .sp-sub>label{display:block;font-size:var(--fs-sm);font-weight:500;
  color:var(--text-muted);margin-bottom:6px}
#pg-configure .sp-help{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.55;margin-top:6px}
#pg-configure .sp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:680px){#pg-configure .sp-grid2{grid-template-columns:1fr}}

/* inputs */
#pg-configure .sp-card input[type="text"],
#pg-configure .sp-card input[type="number"],
#pg-configure .sp-card select,
#pg-configure .sp-card textarea{width:100%;background:var(--bg-white);border:1px solid var(--border);
  border-radius:9px;padding:10px 12px;font-size:var(--fs-md);font-family:inherit;
  color:var(--text);outline:none;transition:border-color .12s, box-shadow .12s}
#pg-configure .sp-card textarea{line-height:1.55;resize:vertical}
#pg-configure .sp-card input:focus,
#pg-configure .sp-card select:focus,
#pg-configure .sp-card textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,91,255,0.12)}
#pg-configure .sp-card input[readonly]{opacity:.6}

/* unit-suffix number input: gray unit lives INSIDE the control */
#pg-configure .sp-sfx{display:flex;align-items:center;background:var(--bg-white);
  border:1px solid var(--border);border-radius:9px;overflow:hidden;
  transition:border-color .12s, box-shadow .12s}
#pg-configure .sp-sfx:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,91,255,0.12)}
#pg-configure .sp-card .sp-sfx input[type="number"]{flex:1;min-width:0;border:none;border-radius:0;
  padding:10px 4px 10px 12px;background:transparent}
#pg-configure .sp-card .sp-sfx input[type="number"]:focus{border:none;box-shadow:none}
#pg-configure .sp-sfx .u{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);
  padding:0 12px 0 4px;flex-shrink:0;user-select:none}
#pg-configure .sp-sfx input::-webkit-outer-spin-button,
#pg-configure .sp-sfx input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#pg-configure .sp-sfx input[type="number"]{-moz-appearance:textfield}
#pg-configure .sp-grid2 .sp-sub .sp-sfx{max-width:180px}
#pg-configure .sp-sfx.err{border-color:var(--red)}

/* post-booking sequence: numbered row cards */
#pg-configure .sp-msg{background:var(--bg);border:1px solid var(--border-light);border-radius:10px;
  padding:14px 16px}
#pg-configure .sp-msg+.sp-msg{margin-top:12px}
#pg-configure .sp-msg-hd{display:flex;align-items:center;gap:12px;margin-bottom:10px}
#pg-configure .sp-msg-chip{font-size:var(--fs-sm);font-weight:700;color:var(--accent);
  background:var(--accent-bg);border-radius:var(--pill);padding:4px 11px;flex-shrink:0;white-space:nowrap}
#pg-configure .sp-msg-delay{display:flex;align-items:center;gap:8px;margin-left:auto}
#pg-configure .sp-msg-delay .dl{font-size:var(--fs-sm);font-weight:500;color:var(--text-muted);white-space:nowrap}
#pg-configure .sp-msg-delay .sp-sfx{width:112px;flex-shrink:0;background:var(--bg-white)}
#pg-configure .sp-msg .sp-msg-delay .sp-sfx input[type="number"]{padding:7px 4px 7px 10px}
#pg-configure .sp-msg textarea{min-height:54px;background:var(--bg-white)}
#pg-configure .sp-trash{border:none;background:transparent;color:var(--text-muted);width:30px;height:30px;
  border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  flex-shrink:0;transition:color .12s, background .12s}
#pg-configure .sp-trash:hover{color:var(--red);background:rgba(239,68,68,0.08)}
#pg-configure .sp-trash svg{width:15px;height:15px}
#pg-configure .sp-add{width:100%;background:transparent;border:1px dashed var(--border);border-radius:9px;
  color:var(--text-secondary);font-family:inherit;font-weight:600;font-size:var(--fs-base);
  padding:10px 16px;cursor:pointer;margin-top:12px;transition:border-color .12s,color .12s,background .12s}
#pg-configure .sp-add:hover{border-color:var(--accent);color:var(--accent);background:rgba(46,91,255,0.03)}

/* follow-up tone: two selectable radio cards side by side */
#pg-configure .sp-tone{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:680px){#pg-configure .sp-tone{grid-template-columns:1fr}}
#pg-configure .sp-tcard{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;cursor:pointer;
  border:1px solid var(--border);border-radius:10px;background:var(--bg-white);
  transition:border-color .12s, background .12s}
#pg-configure .sp-tcard:hover{border-color:#c9cfdd}
#pg-configure .sp-tcard.on{border-color:var(--accent);background:rgba(46,91,255,0.05)}
#pg-configure .sp-tcard input{margin-top:2px;accent-color:var(--accent);flex-shrink:0;width:auto}
#pg-configure .sp-tcard .rt{font-size:var(--fs-md);font-weight:600;color:var(--text);display:block;margin-bottom:3px}
#pg-configure .sp-tcard .rd{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}
#pg-configure .sp-tone-wrap{margin-top:12px}

/* dual-handle range slider (min/max pair) */
#pg-configure .sp-dual{margin-top:2px}
#pg-configure .sp-dual-track{position:relative;height:18px;margin:6px 8px 14px}
#pg-configure .sp-dual-track::before{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:6px;border-radius:999px;background:var(--border-light)}
#pg-configure .sp-dual-fill{position:absolute;top:50%;transform:translateY(-50%);height:6px;
  border-radius:999px;background:var(--accent)}
#pg-configure .sp-dual-track input[type="range"]{position:absolute;left:0;right:0;top:0;width:100%;
  height:18px;margin:0;padding:0;background:transparent;border:none;-webkit-appearance:none;
  appearance:none;pointer-events:none;outline:none}
#pg-configure .sp-dual-track input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;
  appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid var(--accent);box-shadow:var(--shadow-sm);cursor:grab}
#pg-configure .sp-dual-track input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing}
#pg-configure .sp-dual-track input[type="range"]::-moz-range-thumb{pointer-events:auto;width:14px;
  height:14px;border-radius:50%;background:#fff;border:2px solid var(--accent);
  box-shadow:var(--shadow-sm);cursor:grab}
#pg-configure .sp-dual-track input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px rgba(46,91,255,0.25)}
#pg-configure .sp-dual-track input[type="range"]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 3px rgba(46,91,255,0.25)}
#pg-configure .sp-dual-bounds{display:flex;justify-content:space-between;
  font-size:var(--fs-2xs);color:var(--text-muted);margin:-8px 8px 10px}

/* one sticky save bar for the whole Setup pane */
#pg-configure .sp-savebar{position:sticky;bottom:0;z-index:5;margin-top:16px;background:var(--bg-white);
  border:1px solid var(--border);border-bottom:none;border-radius:12px 12px 0 0;
  padding:13px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 -8px 24px rgba(14,18,30,0.06)}
#pg-configure .sp-savebar .note{font-size:var(--fs-sm);color:var(--text-muted)}
#pg-configure .sp-savebar-right{display:flex;align-items:center;gap:12px}
#pg-configure .sp-btn-primary{background:linear-gradient(135deg,#2E5BFF 0%,#1B3BCC 100%);color:#fff;
  border:none;border-radius:9px;font-weight:600;font-size:var(--fs-md);font-family:inherit;
  padding:10px 22px;cursor:pointer;box-shadow:0 4px 12px rgba(46,91,255,0.28)}
#pg-configure .sp-btn-primary:hover{filter:brightness(1.06)}

/* ============================================================
   INBOX LAYOUT FIX 2026-07 — the fixed .inb-layout was anchored at
   top:56px (topbar only) so it slid UNDER the 56px sticky .dz-filterbar;
   the clipped remainder of .inb-list-hd read as a stray white strip above
   the conversation list. Anchor below BOTH bars (matching .man-layout's
   112px) so the FU tabs render fully and the list is flush top + bottom.
   ============================================================ */
.inb-layout{top:var(--chat-top,112px);height:calc(100vh - var(--chat-top,112px))}
.inb-list-hd{padding:10px 12px}
@media(max-width:780px){
  .inb-layout{top:var(--chat-top,110px);height:calc(100vh - var(--chat-top,110px))}
  /* MOBILE SCROLL CUT-OFF FIX 2026-07-27, round 2. .inb-chat was positioned
     with top:110px + bottom:0. On mobile, "bottom:0" for a fixed element is
     computed against the LARGE viewport (as if the collapsible
     address/toolbar were hidden), but that toolbar never collapses here
     because scrolling happens inside .inb-chat-bd, an inner div, not the
     document, so the toolbar stays put and silently covers the bottom
     slice of the panel (last message + composer) forever. The first attempt
     used 100dvh alone; that wasn't enough (dvh support / behavior is
     inconsistent across in-app WebViews), so this now drives the height
     from --vvh, a CSS var kept in sync with window.visualViewport.height by
     inline JS near the top of dashboard.html, which is the one measurement
     every engine keeps accurate as chrome shows/hides. dvh stays as the
     pre-JS fallback for the first paint. `height` wins over the earlier
     `bottom:0` per the CSS2.1 over-constrained rule (top+height+bottom all
     set means bottom is ignored), so the base .inb-chat rule doesn't need
     editing. Same fix applied to .man-layout (Manual queue), which had the
     identical top+bottom:0 pattern. Per Shariq mobile report, recurred
     after the first fix.

     TOP-OF-PANEL FIX 2026-07-28 (Paul report: chat header — lead name, back
     arrow, AI-paused note — rendering cut off/behind the filter bar, not
     reachable by scrolling). The 110px top offset above assumed a
     single-row .dz-filterbar (56px topbar + 56px filterbar). On phones too
     narrow to fit the source dropdown + all 6 range pills on one line, the
     bar wraps to two rows and runs taller than 56px, so the chat pane
     (fixed, starting at the hardcoded 110px) began WHILE the still-taller
     filterbar was still rendering — the two occupied the same band and the
     header lost. --chat-top is the real measured height (topbar + however
     tall the filterbar actually rendered), kept in sync by syncChatTop() in
     dashboard.html on load/resize/orientation-change and whenever the
     Inbox/Manual page's filter bar repaints. The literal px stays as the
     pre-JS fallback for first paint, same pattern as --vvh below. */
  .inb-chat{top:var(--chat-top,110px);
    height:calc(100vh - var(--chat-top,110px));
    height:calc(100dvh - var(--chat-top,110px));
    height:calc(var(--vvh, 100vh) - var(--chat-top,110px))}
  .man-layout{top:var(--chat-top,110px);
    height:calc(100vh - var(--chat-top,110px));
    height:calc(100dvh - var(--chat-top,110px));
    height:calc(var(--vvh, 100vh) - var(--chat-top,110px))}
}
/* SLIDE PANEL SCROLL CUT-OFF FIX 2026-07-28. .sl-panel (the mobile lead
   drawer opened from Leads/CRM/Manual, distinct from .inb-chat above) still
   used a bare height:100vh with no dvh/vvh correction, so it had the exact
   same bug already fixed on .inb-chat and .man-layout: on mobile the fixed
   panel is taller than the actually-visible viewport once browser chrome is
   showing, and since .sl-panel itself doesn't scroll (only its inner .sl-bd
   does), the bottom slice, the tail of the conversation plus the message
   composer appended after it, sits below the visible fold, unreachable.
   Reported by Shariq: "cannot scroll down the convo and there's no reply
   space." Same fix, same var. */
@media(max-width:768px){
  .sl-panel{height:100vh;height:100dvh;height:calc(var(--vvh, 100vh))}
}

/* ============================================================
   QUEUE RESTYLE 2026-07 — the Manual queue list now renders with the
   Leads-page table pattern (.leads-table classes) and opens the same
   slide-over conversation panel. Extras below are queue-only cells.
   ============================================================ */
.man-td-urgency.warn{color:#b45309}
.man-td-urgency.crit{color:#b91c1c}
.man-td-actions{white-space:nowrap}
.man-td-actions .man-row-action{margin-left:6px}
.man-exp-note{display:inline-block;font-size:11px;font-weight:600;color:#6a7084;
  background:#f0f2f7;border-radius:999px;padding:4px 10px;white-space:nowrap;cursor:default}
/* the queue's list container now hosts a leads-style table — give it the
   same page gutter the Leads page has */
.man-list .leads-table-wrap{margin:0 16px 16px}

/* ============================================================
   UI PUNCHLIST 2026-07-23 (Shariq prod review)
   ============================================================ */

/* CRM card heights: natural (per-content) sizing, reverted 2026-07-23 on
   Shariq's call after two uniform-height rounds. */
/* classifier summary on Potential cards — quiet neutral note with a thin
   purple accent instead of the solid purple bubble; one line, full text in
   the title tooltip */
.crm-card-note{font-size:var(--fs-xs);color:#5a6072;background:#f6f7fb;
  border-left:2px solid var(--purple);border-radius:0 6px 6px 0;padding:5px 8px;
  margin-top:6px;line-height:1.45}

/* 2. Inbox FU tabs: fill the row as one segmented bar, centered labels
   (true equal thirds can't fit "Awaiting First Reply" at 300px) */
.inb-fu-tabs{display:flex !important}
.inb-fu-tab{flex:1 1 auto;text-align:center}

/* 3. Queue table flush left, cell inset matching the Leads page */
.man-list .leads-table-wrap{margin:0;border:0;border-radius:0;box-shadow:none}
.man-list .leads-th,.man-list .leads-td{padding-left:26px}

/* 4. Slide-panel header badges: real gap between stage + EXPIRED pills */
#slB{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}

/* 5. Save bar: fully rounded floating bar instead of a cut-off docked strip */
#pg-configure .sp-savebar{border-radius:12px;border-bottom:1px solid var(--border);
  bottom:14px;margin-bottom:14px;box-shadow:0 10px 30px rgba(14,18,30,0.10)}

/* 6. Sidebar collapse: actually collapse. The restyle's width:264px!important
   was beating .sidebar.collapsed's width, so toggling only shrank the text.
   Also keep the toggle in a stable spot and the logo row height steady so
   nothing jumps on toggle. */
.sidebar.collapsed,body.v2 .sidebar.collapsed{width:64px !important;min-width:64px !important}
.sidebar.collapsed .s-logo{min-height:44px}
.sidebar.collapsed .s-collapse-top{display:flex !important;position:absolute !important;
  right:50% !important;top:2px !important;transform:translateX(50%)}

/* ============================================================
   UI PUNCHLIST ROUND 2 — 2026-07-23 (Shariq prod review #2)
   ============================================================ */

/* IG-style bottom-anchored avatars: the avatar/badge renders on the LAST
   message of a run (rChat) and sits at the bottom edge of the group */
.msg-group{align-items:flex-end}
.msg-group .msg-group-pic,.msg-group .msg-group-pic-ph{margin-bottom:1px}

/* Sidebar logo row: bigger wordmark, collapse toggle vertically centered
   on the wordmark instead of floating above it */
.s-logo-img{height:28px}
.sidebar:not(.collapsed) .s-collapse-top{top:50% !important;transform:translateY(-50%);margin-top:-8px}

/* Collapsed rail: d. mark on the LEFT, collapse toggle on the RIGHT —
   side by side, nothing overlapping. Overrides the round-1 centered rule. */
.sidebar.collapsed{padding:20px 8px 14px !important}
.sidebar.collapsed .s-logo{display:flex !important;flex-direction:row !important;
  justify-content:center !important;align-items:center !important;
  padding:0 0 16px !important;min-height:0}
.sidebar.collapsed .s-logo-mark{display:inline-block;font-size:22px;line-height:1}
/* toggle hidden when collapsed — clicking the d. mark expands (wired in markup) */
.sidebar.collapsed .s-collapse-top{display:none !important}

/* Settings page: flush sticky header like every other page. body.v2 zeroes
   pg-dashboard/leads/crm/inbox/manual/configure but missed pg-settings. */
body.v2 #pg-settings{padding:0 !important;background:var(--v2-bg-alt)}
.settings-body{padding:24px 36px 32px 216px}
@media(max-width:780px){.settings-body{padding:16px 12px 24px}}

/* ============================================================
   UI PUNCHLIST ROUND 3 — 2026-07-23
   ============================================================ */
/* inbox triage: first section header's count chip was clipping at the top
   edge of the flush list — a touch more headroom */
.inb-items{padding:16px 8px 16px}
/* the Expired badge now sits beside the stage badge (Leads table + panel
   headers) — match the stage-tag dimensions, title case */
.bdg-expired{font-size:var(--fs-sm);letter-spacing:0.02em;padding:3px 10px}

/* ============================================================
   UI PUNCHLIST ROUND 4 — 2026-07-23
   ============================================================ */
/* collapsed rail: logout is a fixed centered icon pill — immune to the
   inline width/hover styles the expanded button carries */
.sidebar.collapsed .s-logout-btn{width:48px !important;min-width:48px;
  padding:8px 0 !important;justify-content:center !important;margin:8px auto 0 !important;
  display:flex !important}
.sidebar.collapsed .s-logout-btn svg{display:block !important;flex-shrink:0;
  width:16px;height:16px}
.sidebar.collapsed .s-bottom{align-items:center;display:flex;flex-direction:column}
.sidebar.collapsed .s-settings-btn{justify-content:center}

/* ============================================================
   UI PUNCHLIST ROUND 5 — 2026-07-24
   ============================================================ */
/* Inbox: the first section header ("Upcoming Calls" + count pill) was
   touching the top of the list. The round-3 .inb-items padding fix lost
   the cascade to the earlier padding-top:0 !important resets, and the
   round-2 :first-child rule pinned the header flush. This later rule at
   equal specificity + !important wins. The header is sticky with a solid
   background, so it carries its own headroom and still looks right when
   stuck mid-scroll. */
.inb-sec-hd:first-child{padding-top:12px !important}