:root{
    color-scheme: dark;
    --font-sans: -apple-system, "SF Pro Display", "Segoe UI Variable", "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

    --bg: #06080F;
    --bg-elevated: #0A0E18;
    --surface: rgba(19,24,38,0.68);
    --surface-solid: #131826;
    --surface-2: rgba(25,31,48,0.55);
    --surface-hover: rgba(35,42,62,0.75);
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.16);
    --border-glow: rgba(59,130,246,0.35);

    --text-primary: #F3F5FA;
    --text-secondary: #9AA5C0;
    --text-muted: #626E8A;

    --primary: #3B82F6;
    --primary-600: #2563EB;
    --primary-soft: rgba(59,130,246,0.14);
    --accent: #06B6D4;
    --grad-brand: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%);
    --grad-brand-soft: linear-gradient(135deg, rgba(59,130,246,0.16), rgba(6,182,212,0.10));

    --status-good: #22C55E;
    --status-good-soft: rgba(34,197,94,0.14);
    --status-warning: #FBBF24;
    --status-warning-soft: rgba(251,191,36,0.14);
    --status-serious: #FB923C;
    --status-serious-soft: rgba(251,146,60,0.14);
    --status-critical: #F87171;
    --status-critical-soft: rgba(248,113,113,0.14);

    --series-1: #3B82F6; --series-2: #22D3EE; --series-3: #34D399; --series-4: #FBBF24; --series-5: #A78BFA; --series-6: #FB7185;

    --seq-100: rgba(59,130,246,0.10); --seq-200: rgba(59,130,246,0.24); --seq-300: rgba(59,130,246,0.40);
    --seq-400: rgba(59,130,246,0.58); --seq-500: rgba(59,130,246,0.76); --seq-600: rgba(6,182,212,0.9);

    --radius-sm: 9px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 26px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.45);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
    --glow-primary: 0 0 0 1px rgba(59,130,246,0.25), 0 8px 24px rgba(59,130,246,0.25);
    --ease-standard: cubic-bezier(.2,.7,.3,1);
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }
  *{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0; font-family: var(--font-sans); background: var(--bg); color: var(--text-primary);
    -webkit-font-smoothing: antialiased; font-size:14px; overflow:hidden;
  }
  button{ font-family: inherit; cursor:pointer; }
  ::selection{ background: rgba(59,130,246,0.35); }
  a{ color: inherit; }
  .tnum{ font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius:20px; }
  ::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.2); }

  :focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  /* ambient background glow */
  .ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .ambient .blob{ position:absolute; border-radius:50%; filter: blur(90px); opacity:.22; }
  .ambient .b1{ width:520px; height:520px; background: var(--primary); top:-180px; left:-120px; }
  .ambient .b2{ width:460px; height:460px; background: var(--accent); bottom:-160px; right:-100px; opacity:.16; }
  .ambient .b3{ width:340px; height:340px; background:#8B5CF6; top:40%; left:38%; opacity:.08; }

  /* ---------- App shell ---------- */
  .app{ display:flex; height:100vh; overflow:hidden; position:relative; z-index:1; }

  .sidebar{
    width:248px; flex-shrink:0; background: linear-gradient(180deg, rgba(10,14,24,0.92), rgba(6,8,15,0.96));
    backdrop-filter: blur(20px); border-right:1px solid var(--border);
    color: var(--text-secondary); display:flex; flex-direction:column; padding:18px 12px;
  }
  .brand{ display:flex; align-items:center; gap:10px; padding:6px 10px 22px; }
  .brand-mark{
    width:32px; height:32px; border-radius:10px; background: var(--grad-brand); display:flex; align-items:center; justify-content:center;
    font-weight:800; color:#fff; font-size:13px; flex-shrink:0; box-shadow: var(--glow-primary);
  }
  .brand-name{ color:#fff; font-weight:700; font-size:14px; line-height:1.25; letter-spacing:-.01em; }
  .brand-sub{ font-size:10.5px; color: var(--text-muted); font-weight:600; letter-spacing:.03em; }

  .navgroup-label{ font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color: var(--text-muted); padding:15px 12px 6px; }
  .navitem{
    display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius: var(--radius-sm);
    font-size:13px; font-weight:600; color: var(--text-secondary); cursor:pointer; user-select:none;
    transition: background .15s var(--ease-standard), color .15s var(--ease-standard); position:relative; margin-bottom:1px;
  }
  .navitem svg{ width:16.5px; height:16.5px; flex-shrink:0; opacity:.8; }
  .navitem:hover{ background: rgba(255,255,255,0.05); color:#fff; }
  .navitem.active{ background: var(--grad-brand-soft); color:#fff; box-shadow: inset 0 0 0 1px rgba(59,130,246,0.25); }
  .navitem.active::before{ content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:3px; background: var(--grad-brand); }
  .navitem.active svg{ opacity:1; color: var(--accent); }
  .navitem .livedot{ margin-left:auto; width:7px; height:7px; border-radius:50%; background: var(--status-good); box-shadow:0 0 0 3px rgba(34,197,94,0.18), 0 0 8px rgba(34,197,94,0.6); }
  .navitem .navbadge{ margin-left:auto; font-size:9.5px; font-weight:800; padding:2px 6px; border-radius:20px; background: var(--status-critical-soft); color: var(--status-critical); }

  .sidebar-spacer{ flex:1; }
  .sidebar-foot{ border-top:1px solid var(--border); padding-top:12px; margin-top:8px; }
  .user-chip{ display:flex; align-items:center; gap:9px; padding:8px; border-radius: var(--radius-sm); cursor:pointer; }
  .user-chip:hover{ background: rgba(255,255,255,0.05); }
  .user-avatar{ width:32px; height:32px; border-radius:50%; background: linear-gradient(135deg,#3B82F6,#8B5CF6); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#fff; flex-shrink:0; position:relative; box-shadow: 0 0 0 2px rgba(255,255,255,0.06); }
  .user-avatar .status-dot{ position:absolute; bottom:-1px; right:-1px; width:9px; height:9px; border-radius:50%; background: var(--status-good); border:2px solid #0A0E18; }
  .user-meta{ line-height:1.3; min-width:0; }
  .user-name{ font-size:12.5px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .user-role{ font-size:10.5px; color: var(--text-muted); }

  .main{ flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }

  .topbar{
    height:60px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
    padding:0 26px; border-bottom:1px solid var(--border); background: rgba(10,14,24,0.55); backdrop-filter: blur(16px);
  }
  .topbar-left{ display:flex; align-items:center; gap:14px; }
  .page-title{ font-size:16px; font-weight:700; color: #fff; letter-spacing:-.01em; }
  .page-sub{ font-size:11px; color: var(--text-muted); }
  .search-pill{
    display:flex; align-items:center; gap:8px; background: var(--surface-2); border:1px solid var(--border); border-radius:20px;
    padding:7px 14px; font-size:12px; color: var(--text-muted); width:220px;
  }
  .search-pill svg{ width:14px; height:14px; flex-shrink:0; }
  .clock{ font-family: var(--font-mono); font-size:12px; color: var(--text-secondary); background: var(--surface-2); border:1px solid var(--border); padding:5px 11px; border-radius:20px; }
  .topbar-right{ display:flex; align-items:center; gap:10px; }
  .icon-btn{
    width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background: var(--surface-2);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--text-secondary);
    transition: all .15s var(--ease-standard); position:relative;
  }
  .icon-btn:hover{ background: var(--surface-hover); border-color: var(--border-strong); color:#fff; }
  .icon-btn svg{ width:16px; height:16px; }
  .badge-dot{ position:absolute; top:-2px; right:-2px; width:8px; height:8px; border-radius:50%; background: var(--status-critical); border:2px solid var(--bg-elevated); }

  .content{ flex:1; overflow-y:auto; padding:26px 30px 60px; }
  .view{ display:none; max-width:1400px; margin:0 auto; }
  .view.active{ display:block; }

  /* ---------- Generic components ---------- */
  .card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); }
  .card.raised{ box-shadow: var(--shadow-md); }
  .pill{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap; }
  .pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; box-shadow: 0 0 6px currentColor; }
  .pill.good{ background: var(--status-good-soft); color: var(--status-good); }
  .pill.warn{ background: var(--status-warning-soft); color: var(--status-warning); }
  .pill.serious{ background: var(--status-serious-soft); color: var(--status-serious); }
  .pill.crit{ background: var(--status-critical-soft); color: var(--status-critical); }
  .pill.blue{ background: var(--primary-soft); color: #7DAEFB; }
  .pill.neutral{ background: rgba(255,255,255,0.06); color: var(--text-secondary); }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:12.5px;
    padding:10px 16px; border-radius:11px; border:1px solid transparent; transition: all .15s var(--ease-standard); min-height:38px;
  }
  .btn:active{ transform: translateY(1px) scale(.98); }
  .btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
  .btn-primary{ background: var(--grad-brand); color:#fff; box-shadow: var(--glow-primary); }
  .btn-primary:hover:not(:disabled){ filter: brightness(1.08); }
  .btn-ghost{ background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
  .btn-ghost:hover:not(:disabled){ background: var(--surface-hover); color:#fff; border-color: var(--border-strong); }
  .btn-danger{ background: rgba(248,113,113,0.12); color: var(--status-critical); border-color: rgba(248,113,113,0.3); }
  .btn-danger:hover:not(:disabled){ background: rgba(248,113,113,0.2); }
  .btn-sm{ padding:7px 12px; font-size:11.5px; min-height:32px; border-radius:9px; }
  .btn-block{ width:100%; }

  h1,h2,h3,h4,p{ margin:0; }
  .section-title{ font-size:16px; font-weight:700; color:#fff; letter-spacing:-.01em; }
  .section-sub{ font-size:12px; color: var(--text-muted); margin-top:3px; }

  table.data-table{ width:100%; border-collapse: collapse; font-size:12px; }
  table.data-table th{ text-align:left; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color: var(--text-muted); padding:0 8px 9px; border-bottom:1px solid var(--border); cursor:pointer; user-select:none; white-space:nowrap; }
  table.data-table th.num, table.data-table td.num{ text-align:right; }
  table.data-table th .arrow{ font-size:9px; margin-left:3px; opacity:.5; }
  table.data-table th.sorted .arrow{ opacity:1; color: var(--primary); }
  table.data-table td{ padding:10px 8px; border-bottom:1px solid var(--border); font-weight:600; color: var(--text-secondary); }
  table.data-table td.strong{ color:#fff; font-weight:700; }
  table.data-table tr{ transition: background .12s; }
  table.data-table tr:hover td{ background: rgba(255,255,255,0.02); }
  table.data-table tr:last-child td{ border-bottom:none; }
  table.data-table td.num, table.data-table td .val{ font-family: var(--font-mono); }

  .avatar-grad{ background: linear-gradient(135deg, var(--series-1), var(--series-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }

  /* Drawer */
  .drawer-overlay{ position:fixed; inset:0; background: rgba(2,4,10,0.6); backdrop-filter: blur(2px); display:none; z-index:70; }
  .drawer-overlay.show{ display:block; }
  .drawer{
    position:fixed; top:0; right:-460px; width:440px; height:100vh; background: rgba(12,16,27,0.92); backdrop-filter: blur(24px);
    border-left:1px solid var(--border-strong); box-shadow: var(--shadow-lg); z-index:71; transition: right .32s var(--ease-standard);
    display:flex; flex-direction:column;
  }
  .drawer.show{ right:0; }
  .drawer-head{ padding:20px 22px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:12px; }
  .drawer-close{ margin-left:auto; }
  .drawer-body{ flex:1; overflow-y:auto; padding:18px 22px; }
  .drawer-tabs{ display:flex; gap:4px; padding:0 22px; border-bottom:1px solid var(--border); }
  .drawer-tab{ padding:10px 12px; font-size:12px; font-weight:700; color: var(--text-muted); border-bottom:2px solid transparent; cursor:pointer; }
  .drawer-tab.active{ color:#fff; border-color: var(--primary); }
  .drawer-pane{ display:none; }
  .drawer-pane.active{ display:block; }

  /* Kanban */
  .kanban-col{ background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-md); padding:12px; min-height:120px; }
  .kanban-col-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding:0 2px; }
  .kanban-col-head .t{ font-size:11.5px; font-weight:800; color:#fff; text-transform:uppercase; letter-spacing:.03em; }
  .kanban-col-head .c{ font-size:10.5px; font-weight:700; color: var(--text-muted); background: rgba(255,255,255,0.06); padding:1px 7px; border-radius:20px; }
  .kanban-card{
    background: var(--surface-solid); border:1px solid var(--border); border-radius:12px; padding:11px 12px; margin-bottom:8px; cursor:pointer;
    transition: all .15s var(--ease-standard);
  }
  .kanban-card:hover{ border-color: var(--border-glow); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.35); }
  .kanban-card .name{ font-size:12.5px; font-weight:700; color:#fff; margin-bottom:3px; }
  .kanban-card .meta{ font-size:10.5px; color: var(--text-muted); margin-bottom:8px; }
  .kanban-card .foot{ display:flex; align-items:center; justify-content:space-between; }
  .stale-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .stale-dot.fresh{ background: var(--status-good); box-shadow:0 0 6px var(--status-good); }
  .stale-dot.aging{ background: var(--status-warning); box-shadow:0 0 6px var(--status-warning); }
  .stale-dot.stale{ background: var(--status-critical); box-shadow:0 0 6px var(--status-critical); }

  .qual-panel{ background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-md); padding:14px; }
  .qual-panel h4{ font-size:11px; font-weight:800; color: var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
  .qual-item{ display:flex; align-items:center; gap:9px; padding:7px 0; font-size:12.5px; color: var(--text-secondary); border-bottom:1px solid var(--border); }
  .qual-item:last-child{ border-bottom:none; }
  .qual-check{ width:18px; height:18px; border-radius:50%; border:2px solid var(--border-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition: all .2s var(--ease-standard); }
  .qual-check svg{ width:10px; height:10px; opacity:0; transform: scale(.5); transition: all .2s var(--ease-standard); color:#04140a; }
  .qual-item.done{ color:#fff; font-weight:600; }
  .qual-item.done .qual-check{ background: var(--status-good); border-color: var(--status-good); box-shadow: 0 0 10px rgba(34,197,94,0.5); }
  .qual-item.done .qual-check svg{ opacity:1; transform: scale(1); }

  .footnote{ text-align:center; font-size:11px; color: var(--text-muted); margin:26px 0 6px; }

  @media (max-width: 1300px){ .kanban{ grid-template-columns: repeat(3,1fr); } }

  /* ============================================================
     DASHBOARD
     ============================================================ */
  .dash-filterbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
  .range-pills{ display:flex; gap:4px; background: var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:3px; }
  .range-pill{ padding:6px 13px; border-radius:8px; font-size:11.5px; font-weight:700; color: var(--text-secondary); border:none; background:transparent; }
  .range-pill.active{ background: var(--grad-brand); color:#fff; box-shadow: var(--glow-primary); }

  .kpi-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:12px; margin-bottom:16px; }
  .kpi-tile{ padding:16px 17px; position:relative; overflow:hidden; }
  .kpi-tile::after{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background: var(--grad-brand); opacity:.7; }
  .kpi-tile .l{ font-size:10px; font-weight:700; color: var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
  .kpi-tile .v{ font-family: var(--font-mono); font-size:23px; font-weight:700; color:#fff; margin-top:7px; }
  .kpi-tile .d{ font-size:11px; font-weight:700; margin-top:6px; display:flex; align-items:center; gap:4px; }
  .kpi-tile .d.up{ color: var(--status-good); } .kpi-tile .d.down{ color: var(--status-critical); } .kpi-tile .d.flat{ color: var(--text-muted); }
  .kpi-tile.alert::after{ background: linear-gradient(90deg, var(--status-critical), var(--status-warning)); }

  .dash-grid{ display:grid; grid-template-columns: 1.35fr 1fr; gap:14px; margin-bottom:14px; align-items:start; }
  .panel{ padding:19px 21px; }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
  .panel-head h3{ font-size:13.5px; font-weight:800; color:#fff; }

  .funnel-row{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .funnel-label{ width:112px; font-size:11.5px; font-weight:700; color: var(--text-secondary); flex-shrink:0; text-align:right; }
  .funnel-bar-wrap{ flex:1; background: var(--surface-2); border-radius:8px; height:30px; position:relative; }
  .funnel-bar{ height:100%; border-radius:8px; background: var(--grad-brand); display:flex; align-items:center; justify-content:flex-end; padding-right:10px; box-shadow: 0 0 16px rgba(59,130,246,0.35); }
  .funnel-bar .n{ color:#fff; font-size:11.5px; font-weight:800; font-family: var(--font-mono); }
  .funnel-drop{ font-size:10.5px; color: var(--text-muted); width:78px; flex-shrink:0; }
  .funnel-drop.leak{ color: var(--status-critical); font-weight:800; }

  .trend-wrap{ position:relative; }
  .trend-tooltip{ position:absolute; background: var(--surface-solid); border:1px solid var(--border-strong); color:#fff; font-size:10.5px; font-weight:600; padding:5px 9px; border-radius:8px; pointer-events:none; opacity:0; transform: translate(-50%,-115%); transition: opacity .1s; white-space:nowrap; }

  .leader-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
  .leader-row:last-child{ border-bottom:none; }
  .leader-rank{ width:20px; height:20px; border-radius:6px; background: var(--surface-2); border:1px solid var(--border); font-size:10px; font-weight:800; color: var(--text-secondary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .leader-rank.top{ background: rgba(251,191,36,0.16); color: var(--status-warning); border-color:transparent; }
  .leader-avatar{ width:26px; height:26px; border-radius:50%; font-size:10px; }
  .leader-name{ font-size:12px; font-weight:700; color:#fff; width:82px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .leader-bar-wrap{ flex:1; background: var(--surface-2); border-radius:6px; height:8px; overflow:hidden; }
  .leader-bar{ height:100%; background: var(--grad-brand); border-radius:6px; }
  .leader-val{ font-family: var(--font-mono); font-size:11.5px; font-weight:700; color: var(--text-secondary); width:34px; text-align:right; flex-shrink:0; }

  .heatmap-wrap{ display:grid; grid-template-columns: 46px repeat(7,1fr); gap:3px; }
  .heat-hdr{ font-size:10px; font-weight:700; color: var(--text-muted); text-align:center; padding-bottom:4px; }
  .heat-rowlabel{ font-size:10px; font-weight:700; color: var(--text-muted); display:flex; align-items:center; justify-content:flex-end; padding-right:4px; }
  .heat-cell{ aspect-ratio:1; border-radius:5px; }

  .live-row{ display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--border); }
  .live-row:last-child{ border-bottom:none; }
  .live-pulse{ width:7px; height:7px; border-radius:50%; background: var(--status-good); flex-shrink:0; box-shadow:0 0 8px var(--status-good); }
  .live-name{ font-size:12px; font-weight:700; color:#fff; flex:1; }
  .live-lead{ font-size:11px; color: var(--text-muted); }
  .live-timer{ font-family: var(--font-mono); font-size:11.5px; font-weight:700; color: var(--text-secondary); }

  .stress-card{ padding:17px 21px; }
  .stress-card h4{ font-size:12px; font-weight:800; margin-bottom:9px; display:flex; align-items:center; gap:7px; color:#fff; }
  .stress-card h4 svg{ width:14px; height:14px; color: var(--accent); }
  .stress-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:6px 18px; font-size:11.5px; color: var(--text-secondary); }
  .stress-list li{ display:flex; gap:6px; align-items:flex-start; }
  .stress-list li svg{ width:12px; height:12px; color: var(--status-good); flex-shrink:0; margin-top:2px; }

  /* ============================================================
     DIALER
     ============================================================ */
  .dialer-grid{ display:grid; grid-template-columns: 1fr 320px; gap:18px; align-items:start; }
  .console-top{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
  .rec-dot{ width:8px; height:8px; border-radius:50%; background: var(--status-critical); box-shadow:0 0 8px var(--status-critical); }
  .timer{ font-family: var(--font-mono); font-size:13px; color: var(--text-secondary); }

  .call-state{ display:none; width:100%; }
  .call-state.active{ display:flex; flex-direction:column; align-items:center; }

  .lead-avatar{
    width:86px; height:86px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:28px; font-weight:800; color:#fff; background: var(--grad-brand); box-shadow: var(--glow-primary);
    margin-bottom:16px; position:relative;
  }
  .lead-avatar .ring{ position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--primary); opacity:0; }
  .lead-name{ font-size:19px; font-weight:800; color:#fff; text-align:center; letter-spacing:-.01em; }
  .lead-meta{ font-size:12.5px; color: var(--text-muted); margin-top:4px; text-align:center; }
  .lead-phone{ font-family: var(--font-mono); font-size:15px; color: var(--text-secondary); margin-top:10px; letter-spacing:.02em; }

  .call-fab{
    width:60px; height:60px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg,#22C55E,#16A34A); color:#fff; box-shadow: 0 0 0 1px rgba(34,197,94,0.3), 0 10px 26px rgba(34,197,94,0.35); transition: all .15s var(--ease-standard);
  }
  .call-fab:hover:not(:disabled){ filter: brightness(1.08); transform: translateY(-2px); }
  .call-fab:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
  .call-fab svg{ width:23px; height:23px; }

  .connecting-label{ font-size:13px; font-weight:700; color: var(--text-secondary); margin-top:18px; display:flex; align-items:center; gap:8px; }
  .spinner{ width:15px; height:15px; border-radius:50%; border:2.5px solid var(--border); border-top-color: var(--primary); animation: spin .8s linear infinite; }
  @keyframes spin{ to{ transform: rotate(360deg); } }

  .active-call-layout{ width:100%; display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start; text-align:left; }
  .waveform{ display:flex; align-items:center; gap:3px; height:34px; margin-top:14px; }
  .waveform span{ width:3px; border-radius:2px; background: var(--accent); opacity:.7; box-shadow: 0 0 4px var(--accent); }

  .transcript-panel{ background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-md); padding:14px; height:190px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
  .transcript-panel h4{ font-size:11px; font-weight:800; color: var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
  .t-line{ font-size:12.5px; line-height:1.5; display:flex; gap:6px; }
  .t-who{ font-weight:700; flex-shrink:0; }
  .t-line.rep .t-who{ color: var(--primary); }
  .t-line.prospect .t-who{ color: var(--status-good); }
  .t-text{ color: var(--text-secondary); }

  .controls-bar{ display:flex; align-items:center; justify-content:center; gap:12px; padding:18px 20px 22px; border-top:1px solid var(--border); }
  .ctrl-btn{
    width:46px; height:46px; border-radius:50%; border:1px solid var(--border); background: var(--surface-2);
    display:flex; align-items:center; justify-content:center; color: var(--text-secondary);
    transition: all .15s var(--ease-standard); position:relative;
  }
  .ctrl-btn svg{ width:18px; height:18px; }
  .ctrl-btn:hover{ background: var(--surface-hover); color:#fff; }
  .ctrl-btn[aria-pressed="true"]{ background: var(--primary-soft); border-color: var(--primary); color:#7DAEFB; }
  .ctrl-btn.end{ background: linear-gradient(135deg,#F87171,#DC2626); border-color: transparent; color:#fff; width:52px; height:52px; box-shadow: 0 8px 20px rgba(248,113,113,0.35); }
  .ctrl-btn.end:hover{ filter: brightness(1.08); }
  .ctrl-tooltip{ position:absolute; bottom:calc(100% + 8px); left:50%; transform: translateX(-50%); background: var(--surface-solid); border:1px solid var(--border-strong); color:#fff; font-size:10.5px; font-weight:600; padding:4px 8px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition: opacity .12s; }
  .ctrl-btn:hover .ctrl-tooltip{ opacity:1; }

  .end-confirm{ display:none; align-items:center; gap:8px; background: var(--status-critical-soft); border:1px solid rgba(248,113,113,0.3); color: var(--status-critical); padding:8px 12px; border-radius:11px; font-size:11.5px; font-weight:600; margin-top:10px; }
  .end-confirm.show{ display:flex; }

  .wrapup-box{ width:100%; max-width:560px; text-align:left; }
  .wrapup-box h3{ font-size:15px; font-weight:800; margin-bottom:4px; color:#fff; }
  .wrapup-box .section-sub{ margin-bottom:16px; }
  .disp-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:8px; margin-bottom:14px; }
  .disp-btn{
    display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:11px; border:1.5px solid var(--border);
    background: var(--surface-2); font-size:12.5px; font-weight:700; color: var(--text-secondary);
    transition: all .15s var(--ease-standard); text-align:left;
  }
  .disp-btn:hover{ border-color: var(--border-strong); }
  .disp-btn .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .disp-btn[data-tone="warn"] .dot{ background: var(--status-warning); box-shadow:0 0 5px var(--status-warning); }
  .disp-btn[data-tone="blue"] .dot{ background: var(--primary); box-shadow:0 0 5px var(--primary); }
  .disp-btn[data-tone="good"] .dot{ background: var(--status-good); box-shadow:0 0 5px var(--status-good); }
  .disp-btn[data-tone="crit"] .dot{ background: var(--status-critical); box-shadow:0 0 5px var(--status-critical); }
  .disp-btn.selected{ border-color: var(--primary); background: var(--primary-soft); color:#fff; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }

  .wrapup-detail{ display:none; background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-md); padding:14px; margin-bottom:14px; font-size:12.5px; }
  .wrapup-detail.show{ display:block; }
  .wrapup-detail .inline-error{ color: var(--status-critical); font-weight:700; font-size:11.5px; margin-top:8px; display:none; align-items:center; gap:6px; }
  .wrapup-detail .inline-error.show{ display:flex; }
  .mini-check{ display:flex; align-items:center; gap:8px; padding:5px 0; user-select:none; }
  .mini-check input{ width:15px; height:15px; accent-color: var(--primary); }
  textarea, input[type="text"], input[type="datetime-local"]{
    width:100%; border:1px solid var(--border); border-radius:9px; padding:8px 10px; font-family: var(--font-sans); font-size:12.5px; color: var(--text-primary); background: var(--surface-2);
  }
  textarea{ resize: vertical; min-height:56px; }
  .field-label{ font-size:11px; font-weight:700; color: var(--text-secondary); margin-bottom:5px; display:block; }

  .empty-state{ text-align:center; max-width:340px; }
  .empty-illustration{ width:88px; height:88px; margin:0 auto 16px; opacity:.9; }
  .empty-state h3{ font-size:15px; font-weight:800; margin-bottom:6px; color:#fff; }
  .empty-state p{ font-size:12.5px; color: var(--text-muted); margin-bottom:18px; line-height:1.5; }

  .queue-card{ padding:16px; }
  .queue-card .head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .queue-row{ display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:10px; cursor:pointer; transition: background .12s var(--ease-standard); border:1px solid transparent; }
  .queue-row:hover{ background: var(--surface-hover); }
  .queue-row.current{ background: var(--primary-soft); border-color: rgba(59,130,246,0.25); }
  .queue-row.locked{ cursor:not-allowed; opacity:.5; }
  .queue-avatar{ width:30px; height:30px; border-radius:50%; background: var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color: var(--text-secondary); flex-shrink:0; }
  .queue-info{ min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
  .queue-info .name{ font-size:12px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .queue-info .src{ font-size:10.5px; color: var(--text-muted); }
  .queue-num{ font-size:10.5px; font-weight:700; color: var(--text-muted); width:16px; text-align:center; flex-shrink:0; }
  .lock-note{ display:flex; align-items:center; gap:6px; font-size:10.5px; color: var(--text-muted); padding:8px; background: var(--surface-2); border-radius:9px; margin-top:8px; }
  .lock-note svg{ width:12px; height:12px; flex-shrink:0; }

  .modal-overlay{ position:fixed; inset:0; background: rgba(2,4,10,0.65); display:none; align-items:center; justify-content:center; z-index:75; backdrop-filter: blur(3px); }
  .modal-overlay.show{ display:flex; }
  .modal-box{ background: var(--surface-solid); border:1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width:320px; padding:20px; }
  .modal-box h3{ font-size:14px; font-weight:800; margin-bottom:4px; color:#fff; }
  .modal-display{ font-family: var(--font-mono); font-size:22px; font-weight:700; text-align:center; padding:16px 0 6px; letter-spacing:.03em; min-height:36px; color:#fff; }
  .modal-error{ font-size:11px; color: var(--status-critical); text-align:center; font-weight:700; min-height:16px; margin-bottom:6px; }
  .keypad-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin:8px 0 16px; }
  .keypad-key{ aspect-ratio:1; border-radius:13px; border:1px solid var(--border); background: var(--surface-2); font-size:16px; font-weight:700; color:#fff; transition: all .1s; }
  .keypad-key:hover{ background: var(--primary-soft); }
  .keypad-key:active{ transform: scale(.94); }
  .modal-actions{ display:flex; gap:8px; }
  .toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

  /* ============================================================
     MISC SCREENS (leads/assignment/followups/proposals/sources/team/success/integrations)
     ============================================================ */
  .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
  .grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
  .grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }

  .tag-row{ display:flex; flex-wrap:wrap; gap:8px; }

  .list-row{ display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--border); }
  .list-row:last-child{ border-bottom:none; }
  .list-row:hover{ background: rgba(255,255,255,0.02); }

  .progress-track{ background: var(--surface-2); border-radius:6px; height:8px; overflow:hidden; }
  .progress-fill{ height:100%; background: var(--grad-brand); border-radius:6px; }

  .channel-card{ padding:16px; }
  .channel-card .top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .channel-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: var(--surface-2); border:1px solid var(--border); flex-shrink:0; }
  .channel-icon svg{ width:18px; height:18px; color: var(--accent); }
  .spark-mini{ height:34px; }

  .agent-card{ padding:16px; cursor:pointer; transition: all .15s var(--ease-standard); }
  .agent-card:hover{ border-color: var(--border-glow); transform: translateY(-2px); }
  .agent-card .top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .agent-card .name{ font-weight:700; color:#fff; font-size:13px; }
  .agent-card .role{ font-size:10.5px; color: var(--text-muted); }
  .score-ring{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:700; font-size:12px; color:#fff; flex-shrink:0; }

  .ticket-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
  .ticket-row:last-child{ border-bottom:none; }
  .sla-chip{ font-family: var(--font-mono); font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:20px; }

  .onboard-item{ display:flex; align-items:center; gap:10px; padding:8px 0; font-size:12.5px; color: var(--text-secondary); }
  .onboard-check{ width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .onboard-check.done{ background: var(--status-good-soft); color: var(--status-good); }
  .onboard-check.pending{ background: var(--surface-2); border:1px solid var(--border); color: var(--text-muted); }

  .rule-card{ padding:16px; display:flex; gap:14px; align-items:flex-start; }
  .rule-num{ width:30px; height:30px; border-radius:9px; background: var(--grad-brand-soft); border:1px solid rgba(59,130,246,0.3); color: var(--accent); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

  /* ============ DEAL DESK ============ */
  .stepper{ display:flex; align-items:center; margin-bottom:20px; }
  .stepper .step{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; color: var(--text-muted); flex-shrink:0; }
  .stepper .step .num{ width:23px; height:23px; border-radius:50%; background: var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:10.5px; flex-shrink:0; }
  .stepper .step.active{ color:#fff; } .stepper .step.done{ color: var(--status-good); }
  .stepper .step.active .num{ background: var(--grad-brand); border-color:transparent; color:#fff; box-shadow: var(--glow-primary); }
  .stepper .step.done .num{ background: var(--status-good-soft); border-color: var(--status-good); color: var(--status-good); }
  .stepper .sep{ flex:1; height:1px; background: var(--border); margin:0 10px; }

  .equip-pick{ padding:14px; cursor:pointer; border:1.5px solid var(--border); transition: all .15s var(--ease-standard); }
  .equip-pick:hover{ border-color: var(--border-strong); transform: translateY(-1px); }
  .equip-pick.selected{ border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
  .equip-pick .name{ font-size:12.5px; font-weight:700; color:#fff; }
  .equip-pick .cost{ font-size:11px; color: var(--text-muted); margin-top:5px; }

  .term-row{ display:flex; gap:8px; flex-wrap:wrap; }
  .term-chip{ padding:8px 15px; border-radius:20px; border:1.5px solid var(--border); background: var(--surface-2); font-size:12px; font-weight:700; color: var(--text-secondary); transition: all .15s var(--ease-standard); }
  .term-chip.selected{ border-color: var(--primary); background: var(--primary-soft); color:#fff; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }

  .range-row{ margin-bottom:6px; }
  .range-row .head{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color: var(--text-secondary); margin-bottom:9px; }
  .range-row .head .v{ font-family: var(--font-mono); font-weight:800; color:#fff; font-size:14px; }
  input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background: var(--surface-2); outline:none; margin:4px 0; }
  input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background: var(--grad-brand); box-shadow: var(--glow-primary); cursor:pointer; border:2px solid #fff; }
  input[type="range"]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background: var(--primary); cursor:pointer; border:2px solid #fff; }

  .attrib-row{ display:flex; gap:10px; }
  .attrib-opt{ flex:1; padding:12px 13px; border-radius:12px; border:1.5px solid var(--border); background: var(--surface-2); cursor:pointer; font-size:11.5px; color: var(--text-secondary); transition: all .15s var(--ease-standard); }
  .attrib-opt:hover{ border-color: var(--border-strong); }
  .attrib-opt.selected{ border-color: var(--primary); background: var(--primary-soft); color:#fff; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
  .attrib-opt b{ display:block; font-size:12.5px; color:#fff; margin-bottom:3px; }

  .calc-panel{ position:sticky; top:0; }
  .calc-line{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; color: var(--text-secondary); padding:10px 0; border-bottom:1px solid var(--border); }
  .calc-line:last-child{ border-bottom:none; }
  .calc-line .lbl{ display:flex; flex-direction:column; gap:2px; }
  .calc-line .sub{ font-size:10px; color: var(--text-muted); font-weight:500; }
  .calc-line .val{ font-family: var(--font-mono); font-weight:800; font-size:13.5px; color:#fff; white-space:nowrap; }
  .calc-line .val.good{ color: var(--status-good); }
  .calc-line.total{ padding-top:15px; margin-top:5px; border-top:1px solid var(--border-strong); border-bottom:none; }
  .calc-line.total .val{ font-size:19px; }
  .calc-line.you{ background: rgba(6,182,212,0.06); margin:8px -8px; padding:12px 8px; border-radius:10px; border-bottom:none; }
  .calc-note{ font-size:10.5px; color: var(--text-muted); line-height:1.5; margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); }

  /* ============ E-SIGNATURE ============ */
  .esign-track{ display:flex; align-items:flex-start; margin:4px 0 20px; }
  .esign-track .pt{ display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; position:relative; }
  .esign-track .pt .ln{ position:absolute; top:13px; left:-50%; width:100%; height:2px; background: var(--border); z-index:0; }
  .esign-track .pt:first-child .ln{ display:none; }
  .esign-track .pt.done .ln{ background: var(--status-good); }
  .esign-track .pt .dot{ position:relative; z-index:1; width:27px; height:27px; border-radius:50%; background: var(--surface-2); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; color: var(--text-muted); }
  .esign-track .pt.done .dot{ background: var(--status-good-soft); border-color: var(--status-good); color: var(--status-good); }
  .esign-track .pt.current .dot{ background: var(--grad-brand); border-color:transparent; color:#fff; box-shadow: var(--glow-primary); }
  .esign-track .pt .lbl{ font-size:9.5px; font-weight:700; color: var(--text-muted); text-align:center; }
  .esign-track .pt.done .lbl, .esign-track .pt.current .lbl{ color:#fff; }

  .doc-card{ display:flex; align-items:center; gap:12px; padding:14px; }
  .doc-card .ic{ width:38px; height:38px; border-radius:10px; background: var(--primary-soft); color: var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .doc-card .ic svg{ width:18px; height:18px; }

  /* ============ ADMIN / COMMISSIONS ============ */
  .admin-banner{ display:flex; align-items:center; gap:10px; background: var(--status-warning-soft); border:1px solid rgba(251,191,36,0.3); border-radius:12px; padding:11px 15px; font-size:11.5px; font-weight:700; color: var(--status-warning); margin-bottom:16px; }
  .admin-banner svg{ width:16px; height:16px; flex-shrink:0; }
  .navitem .lockicon{ margin-left:auto; width:12.5px; height:12.5px; color: var(--status-warning); opacity:.85; flex-shrink:0; }
  .buyback-card{ padding:15px; border-left:3px solid var(--status-critical); }
  .buyback-card .top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
  .makegood-track{ display:flex; align-items:center; gap:6px; margin-top:10px; }
  .makegood-dot{ width:22px; height:22px; border-radius:6px; background: var(--surface-2); border:1px solid var(--border); flex-shrink:0; }
  .makegood-dot.owed{ background: var(--status-critical-soft); border-color: var(--status-critical); }

  /* ============ EQUIPMENT INVENTORY ============ */
  .inv-cost-free{ color: var(--status-good); } .inv-cost-paid{ color: var(--status-warning); }

/* ===========================================================================
   Application layer — classes the live app needs that the mockup styled inline.
   =========================================================================== */

/* Toast (was inline in the prototype) */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--surface-solid); border:1px solid var(--border-strong); color:#fff;
  padding:11px 18px; border-radius:12px; font-size:12.5px; font-weight:600;
  display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:all .25s var(--ease-standard); z-index:120;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast[data-tone="warn"] svg{ color:var(--status-warning); }
.toast[data-tone="crit"] svg{ color:var(--status-critical); }

/* Server-side messages */
.note-banner{
  border-radius:12px; padding:12px 16px; margin-bottom:14px; font-size:13px;
  font-weight:600; border-left:3px solid var(--primary);
  background:var(--primary-soft); color:#C4DBFB;
}
.note-banner.success{ border-color:var(--status-good); background:var(--status-good-soft); color:#B6F0CB; }
.note-banner.warning{ border-color:var(--status-warning); background:var(--status-warning-soft); color:#F6E4B4; }
.note-banner.error{ border-color:var(--status-critical); background:var(--status-critical-soft); color:#F8C7C7; }

/* Anchor tags used as nav items must not inherit link styling */
a.navitem, a.brand, a.user-chip{ text-decoration:none; color:inherit; }

/* Forms */
.form-row{ margin-bottom:15px; }
.form-row label{ display:block; font-size:11.5px; font-weight:700;
  color:var(--text-secondary); margin-bottom:6px; }
.form-row .helptext{ font-size:11px; color:var(--text-muted); margin-top:5px; display:block; }
.form-row .errorlist{ list-style:none; margin:6px 0 0; padding:0;
  font-size:11.5px; color:var(--status-critical); font-weight:700; }
input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="url"], select{
  width:100%; border:1px solid var(--border); border-radius:9px; padding:9px 11px;
  font-family:var(--font-sans); font-size:12.5px; color:var(--text-primary);
  background:var(--surface-2);
}
select{ appearance:none; background-image:
  linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),
  linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:32px; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(59,130,246,.14); }
.checkbox-row{ display:flex; align-items:center; gap:9px; padding:6px 0;
  font-size:12.5px; color:var(--text-secondary); user-select:none; cursor:pointer; }
.checkbox-row input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--primary); cursor:pointer; }

/* Empty states for lists that have no rows yet */
.blank{ text-align:center; padding:48px 20px; color:var(--text-muted); }
.blank h3{ color:#fff; font-size:15px; margin:0 0 6px; }
.blank p{ margin:0 0 16px; font-size:13px; }

/* Sign-in screen */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{ width:100%; max-width:390px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px; box-shadow:var(--shadow-lg); backdrop-filter:blur(16px); }
.auth-brand{ display:flex; align-items:center; gap:11px; justify-content:center; margin-bottom:24px; }

/* Page-level utilities */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.stack-sm > * + *{ margin-top:8px; }
.stack > * + *{ margin-top:14px; }
.muted{ color:var(--text-muted); }
.right{ text-align:right; }
.nowrap{ white-space:nowrap; }

/* ---- Role builder ---- */
.perm-group{ margin-bottom:22px; }
.perm-group:last-child{ margin-bottom:0; }
.perm-group-label{ font-size:10px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.perm-table th.perm-col, .perm-table td.perm-col{ text-align:center; width:11%; }
.perm-table td.perm-col input{ width:17px; height:17px; accent-color:var(--primary); cursor:pointer; }
.perm-table td.perm-col input:disabled{ opacity:.25; cursor:not-allowed; }
.perm-table tr.perm-off td.strong{ opacity:.5; }
.hidden-fields-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; }
@media(max-width:1100px){ .hidden-fields-grid{ grid-template-columns:1fr; } }

/* ===========================================================================
   Leads — pipeline, quick view, detail
   =========================================================================== */

.lead-filters{ display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:12px 14px; margin-bottom:14px; }
.lead-filters input[type="text"]{ width:280px; }
.lead-filters select{ width:170px; }

/* Board */
.kanban-drop{ min-height:120px; display:flex; flex-direction:column; gap:9px;
  border-radius:12px; transition:background .15s, box-shadow .15s; padding:2px; }
.kanban-drop.over{ background:rgba(59,130,246,.09);
  box-shadow:inset 0 0 0 1.5px rgba(59,130,246,.45); }
.kanban-card{ position:relative; cursor:pointer; }
.kanban-card:active{ cursor:grabbing; }
.kanban-card.dragging{ opacity:.4; }
.kanban-card.saving{ opacity:.6; pointer-events:none; }
.kanban-empty{ text-align:center; font-size:11px; color:var(--text-muted);
  padding:18px 0; border:1px dashed var(--border); border-radius:10px; }
.lead-score{ font-family:var(--font-mono); font-size:10px; font-weight:800;
  background:var(--primary-soft); color:#7DAEFB; padding:2px 6px; border-radius:20px; }
.dnc-flag{ position:absolute; top:8px; right:8px; font-size:8.5px; font-weight:800;
  letter-spacing:.06em; background:var(--status-critical-soft);
  color:var(--status-critical); padding:2px 5px; border-radius:4px; }

/* Quick view popup */
.quick-box{ width:min(620px,92vw); max-height:88vh; overflow-y:auto; text-align:left; }
.quick-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.quick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.quick-val{ font-size:13px; color:#fff; font-weight:600; margin-top:2px; }
.qual-mini{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.qual-chip{ font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:20px;
  background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); }
.qual-chip.on{ background:var(--status-good-soft); color:var(--status-good);
  border-color:rgba(34,197,94,.35); }
.quick-actions{ display:flex; gap:8px; margin-top:20px;
  padding-top:16px; border-top:1px solid var(--border); }

/* Detail */
.lead-header{ display:flex; align-items:center; gap:16px; }
.lead-header-stats{ display:flex; gap:26px; flex-shrink:0; }
.lead-header-stats .l{ display:block; font-size:9.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); margin-bottom:4px; font-weight:700; }
.lead-header-stats .v{ font-size:13px; color:#fff; font-weight:700; }

.timeline-row{ display:flex; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--border); }
.timeline-row:last-child{ border-bottom:none; }
.timeline-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:5px;
  background:var(--text-muted); }
.timeline-dot.call{ background:var(--primary); box-shadow:0 0 6px var(--primary); }
.timeline-dot.sms{ background:var(--accent); }
.timeline-dot.note{ background:var(--status-warning); }
.timeline-dot.stage_change{ background:var(--status-good); }
.timeline-dot.file{ background:var(--series-5); }

.sms-bubble{ max-width:74%; margin-bottom:11px; padding:10px 13px; border-radius:14px;
  background:var(--surface-2); border:1px solid var(--border); }
.sms-bubble.outbound{ margin-left:auto; background:var(--primary-soft);
  border-color:rgba(59,130,246,.3); }
.sms-body{ font-size:12.5px; color:#fff; white-space:pre-wrap; }
.sms-meta{ font-size:10px; color:var(--text-muted); margin-top:5px; }

.upload-row{ display:flex; gap:9px; align-items:center; margin-bottom:16px;
  padding-bottom:16px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.upload-row select{ width:190px; }
.upload-row input[type="file"]{ flex:1; min-width:180px; font-size:12px;
  color:var(--text-secondary); }
.doc-icon{ width:34px; height:34px; border-radius:9px; background:var(--primary-soft);
  color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* The prototype hard-coded five columns. The live board's column count comes
   from the pipeline stages, so it scrolls horizontally instead of wrapping. */
.kanban{
  display:flex; grid-template-columns:none; gap:12px; align-items:flex-start;
  overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity;
}
.kanban > .kanban-col{
  flex:0 0 272px; width:272px; scroll-snap-align:start;
  max-height:calc(100vh - 230px); display:flex; flex-direction:column;
}
.kanban > .kanban-col > .kanban-drop{ overflow-y:auto; flex:1; }

/* ===========================================================================
   Dialer console
   =========================================================================== */

.dialer-layout{ display:grid; grid-template-columns:300px 1fr 300px; gap:14px;
  align-items:start; }
@media(max-width:1400px){ .dialer-layout{ grid-template-columns:280px 1fr; }
  .dialer-layout > .dial-rail:last-child{ grid-column:1 / -1; } }
.dial-rail{ display:flex; flex-direction:column; gap:14px; }
.dial-main{ min-width:0; }

/* Dialpad — always visible, never a modal */
.dialpad-panel{ position:sticky; top:0; }
.dial-display{ position:relative; margin-bottom:4px; }
.dial-display input{ width:100%; background:var(--surface-2);
  border:1px solid var(--border-strong); border-radius:11px;
  padding:13px 44px 13px 14px; font-family:var(--font-mono); font-size:18px;
  font-weight:700; color:#fff; letter-spacing:.04em; text-align:center; }
.dial-clear{ position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-muted); font-size:15px;
  cursor:pointer; padding:6px; }
.dial-clear:hover{ color:#fff; }
.dial-error{ font-size:11px; color:var(--status-critical); font-weight:700;
  text-align:center; min-height:15px; margin-bottom:6px; }
.dial-error.show{ display:block; }
.dialpad{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:12px; }
.dial-key{ aspect-ratio:1.35; border-radius:12px; border:1px solid var(--border);
  background:var(--surface-2); font-size:17px; font-weight:700; color:#fff;
  transition:all .1s var(--ease-standard); }
.dial-key:hover{ background:var(--primary-soft); border-color:var(--border-strong); }
.dial-key:active{ transform:scale(.93); background:var(--primary); }

/* Session stats */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stat-row .l{ display:block; font-size:9.5px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-muted); font-weight:700; margin-bottom:3px; }
.stat-row .v{ font-size:19px; font-weight:700; color:#fff; }

/* Breaks */
.break-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.break-btn{ padding:9px 8px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); font-size:11.5px; font-weight:700;
  color:var(--text-secondary); transition:all .15s var(--ease-standard); }
.break-btn:hover{ border-color:var(--status-warning); color:var(--status-warning); }
#breakPanel.on-break{ border-color:rgba(251,191,36,.45);
  box-shadow:0 0 0 1px rgba(251,191,36,.2); }
.break-live{ text-align:center; padding:10px 0 14px; }
.break-live-reason{ font-size:12px; font-weight:700; color:var(--status-warning);
  text-transform:uppercase; letter-spacing:.05em; }
.break-live-timer{ font-size:30px; font-weight:700; color:#fff; margin-top:4px; }

/* Console */
.console{ overflow:hidden; min-height:560px; display:flex; flex-direction:column; }
.console-body{ flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:20px 0; position:relative; }
#viewActive, #viewWrap{ align-items:stretch; justify-content:flex-start; }
.lead-name{ font-size:22px; font-weight:800; color:#fff; margin:14px 0 4px;
  text-align:center; }
.lead-phone{ font-size:16px; color:var(--text-secondary); margin-top:8px; }
.queue-reason{ font-size:11px; color:var(--accent); margin-top:10px;
  background:rgba(6,182,212,.1); padding:4px 11px; border-radius:20px; }
.idle-actions{ display:flex; align-items:center; gap:12px; margin-top:26px; }

.active-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.active-head .lead-avatar{ width:52px; height:52px; font-size:16px; margin:0; }
.active-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
@media(max-width:900px){ .active-grid{ grid-template-columns:1fr; } }
.qual-live, .notes-live{ padding:14px; }
.qual-count{ font-size:11px; font-weight:700; color:var(--text-muted);
  margin-top:9px; padding-top:9px; border-top:1px solid var(--border); }
.qual-count.complete{ color:var(--status-good); }
.notes-live textarea{ min-height:150px; }

.quick-times{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.chip{ padding:5px 11px; border-radius:20px; border:1px solid var(--border);
  background:var(--surface-2); font-size:11px; font-weight:700;
  color:var(--text-secondary); }
.chip:hover{ border-color:var(--primary); color:#fff; }

.inline-error{ font-size:11.5px; color:var(--status-critical); font-weight:700;
  margin-top:9px; display:none; }
.inline-error.show{ display:block; }

/* Auto-dial: a state the rep reads, not a switch they hold. Green while it is
   running, amber when a supervisor has paused it — an unexplained stop is the
   thing this replaced. */
.autodial-state{ display:inline-flex; align-items:center; gap:7px; font-size:12px;
                 font-weight:600; color:var(--text-muted); }
.autodial-state .dot{ width:8px; height:8px; border-radius:50%;
                      background:var(--text-muted); flex:none; }
.autodial-state[data-on="true"]{ color:var(--status-good); }
.autodial-state[data-on="true"] .dot{ background:var(--status-good);
                                      box-shadow:0 0 7px var(--status-good); }
.autodial-state[data-on="false"]{ color:var(--status-warning); }
.autodial-state[data-on="false"] .dot{ background:var(--status-warning); }

.queue-row.locked{ opacity:.45; pointer-events:none; }
.queue-lock{ font-size:11px; color:var(--text-muted); text-align:center;
  padding:9px; background:var(--surface-2); border-radius:9px; margin-top:9px; }

.sms-foot{ display:flex; align-items:center; justify-content:space-between;
  margin-top:9px; gap:9px; }
#smsSent{ margin-top:12px; max-height:220px; overflow-y:auto; }

/* Console status badge.
   Named .call-status, not .call-state — the v3 stylesheet already uses
   .call-state for a different, display:none-by-default component. */
.call-status{ display:inline-flex; align-items:center; gap:7px; font-size:11px;
  font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 12px; border-radius:20px; background:var(--surface-2);
  color:var(--text-secondary); border:1px solid var(--border); }
.call-status .dot{ width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 0 6px currentColor; flex-shrink:0; }
.call-status.warn{ background:var(--status-warning-soft); color:var(--status-warning);
  border-color:rgba(251,191,36,.3); }
.call-status.crit{ background:var(--status-critical-soft); color:var(--status-critical);
  border-color:rgba(248,113,113,.3); }
.call-status.crit .dot{ animation:recPulse 1.4s ease-in-out infinite; }
.call-status.blue{ background:var(--primary-soft); color:#7DAEFB;
  border-color:rgba(59,130,246,.3); }
@keyframes recPulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ===========================================================================
   Follow-ups, calendar, and the alarm
   =========================================================================== */

.fu-section.overdue{ border-color:rgba(248,113,113,.35);
  box-shadow:0 0 0 1px rgba(248,113,113,.12); }
.fu-row{ display:flex; align-items:flex-start; gap:12px; padding:13px 0;
  border-bottom:1px solid var(--border); }
.fu-row:last-child{ border-bottom:none; }
.fu-dot{ width:9px; height:9px; border-radius:50%; margin-top:5px; flex-shrink:0;
  background:var(--text-muted); }
.fu-row.overdue .fu-dot{ background:var(--status-warning);
  box-shadow:0 0 7px var(--status-warning); }
.fu-row.critical .fu-dot{ background:var(--status-critical);
  box-shadow:0 0 7px var(--status-critical); animation:recPulse 1.6s infinite; }
.fu-title{ font-size:13px; font-weight:700; color:#fff; }
.fu-meta{ font-size:11px; color:var(--text-muted); margin-top:3px; }
.fu-note{ font-size:12px; color:var(--text-secondary); margin-top:6px;
  background:var(--surface-2); padding:8px 11px; border-radius:9px; }
.fu-actions{ display:flex; gap:7px; flex-shrink:0; align-items:center; }

/* Calendar */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-head{ margin-bottom:6px; }
.cal-weekday{ font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-muted); text-align:center; padding-bottom:4px; }
.cal-cell{ min-height:104px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:11px; padding:7px; display:flex; flex-direction:column; gap:3px; }
.cal-cell.empty{ background:transparent; border-color:transparent; }
.cal-cell.past{ opacity:.55; }
.cal-cell.today{ border-color:var(--primary); box-shadow:0 0 0 1px rgba(59,130,246,.3); }
.cal-daynum{ font-size:11px; font-weight:800; color:var(--text-secondary);
  display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; }
.cal-cell.today .cal-daynum{ color:var(--accent); }
.cal-overdue{ background:var(--status-critical); color:#fff; font-size:9px;
  font-weight:800; padding:1px 5px; border-radius:20px; }
.cal-item{ font-size:10px; padding:3px 6px; border-radius:6px; display:block;
  background:var(--primary-soft); color:#C4DBFB; text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-item .t{ font-family:var(--font-mono); font-weight:700; opacity:.8; margin-right:3px; }
.cal-item.overdue{ background:var(--status-warning-soft); color:var(--status-warning); }
.cal-item.critical{ background:var(--status-critical-soft); color:var(--status-critical); }
.cal-item.closed{ opacity:.45; text-decoration:line-through; }
.cal-more{ font-size:9.5px; color:var(--text-muted); padding-left:4px; }

/* ---- The alarm ---- */
/* The app already sets body{overflow:hidden} and scrolls inside .content, so
   this is redundant there — it matters on the auth pages, which do scroll. */
body.alarm-locked{ overflow:hidden; }
.alarm-overlay{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(3,5,12,.88); backdrop-filter:blur(7px);
}
.alarm-overlay.show{ display:flex; animation:alarmIn .25s var(--ease-standard); }
.alarm-overlay.dismissing{ animation:alarmOut .2s var(--ease-standard) forwards; }
@keyframes alarmIn{ from{opacity:0;} to{opacity:1;} }
@keyframes alarmOut{ from{opacity:1;} to{opacity:0;} }

.alarm-card{
  position:relative; width:min(470px,94vw); max-height:92vh; overflow-y:auto;
  background:var(--surface-solid); border:1px solid rgba(248,113,113,.4);
  border-radius:22px; padding:30px 28px 24px; text-align:center;
  box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(248,113,113,.14);
  animation:alarmPop .3s var(--ease-standard);
}
@keyframes alarmPop{ from{transform:scale(.94) translateY(10px);} to{transform:none;} }
.alarm-pulse{ position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--status-critical),transparent);
  border-radius:22px 22px 0 0; animation:alarmSweep 2s linear infinite; }
@keyframes alarmSweep{ 0%{opacity:.35;} 50%{opacity:1;} 100%{opacity:.35;} }

.alarm-kind{ font-size:10.5px; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--status-critical); margin-bottom:9px; }
.alarm-business{ font-size:23px; font-weight:800; color:#fff; margin:0 0 6px;
  line-height:1.25; }
.alarm-phone{ font-size:15px; color:var(--text-secondary); }
.alarm-late{ display:none; font-size:12px; font-weight:700; margin-top:11px;
  color:var(--status-critical); }
.alarm-late.show{ display:block; }
.alarm-late.soft{ color:var(--status-warning); }
.alarm-note{ font-size:12.5px; color:var(--text-secondary); margin-top:13px;
  background:var(--surface-2); padding:11px 14px; border-radius:11px;
  text-align:left; white-space:pre-wrap; }

.alarm-actions{ display:flex; gap:9px; margin-top:20px; }
.alarm-actions .btn{ flex:1; justify-content:center; }
.alarm-call{ font-size:14px; padding:13px; }

.alarm-snooze{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.alarm-snooze-label{ font-size:11px; color:var(--text-muted); margin-bottom:9px;
  font-weight:700; }
.alarm-snooze-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.alarm-snooze-btn{ padding:9px 6px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface-2); font-size:11px; font-weight:700;
  color:var(--text-secondary); transition:all .15s var(--ease-standard); }
.alarm-snooze-btn:hover{ border-color:var(--primary); color:#fff; }
.alarm-snooze-warn{ font-size:11px; color:var(--status-warning); margin-top:10px;
  font-weight:700; }

.alarm-cancel-link{ background:none; border:none; color:var(--text-muted);
  font-size:11px; margin-top:16px; cursor:pointer; text-decoration:underline;
  font-family:inherit; }
.alarm-cancel-link:hover{ color:var(--status-critical); }
.alarm-cancel-box{ display:none; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--border); }
.alarm-cancel-box.show{ display:block; }
.alarm-cancel-actions{ display:flex; gap:8px; margin-top:9px; }
.alarm-cancel-actions .btn{ flex:1; justify-content:center; }
.alarm-error{ display:none; font-size:11.5px; color:var(--status-critical);
  font-weight:700; margin-top:11px; }
.alarm-error.show{ display:block; }

/* ===========================================================================
   Deal Desk
   =========================================================================== */
.dd-layout{ display:grid; grid-template-columns:1fr 360px; gap:14px; align-items:start; }
@media(max-width:1200px){ .dd-layout{ grid-template-columns:1fr; } }
.dd-sticky{ position:sticky; top:0; }
.dd-divider{ height:1px; background:var(--border); margin:14px 0; }

.program-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:16px; }
@media(max-width:820px){ .program-grid{ grid-template-columns:1fr; } }
.program-btn{ text-align:left; padding:13px 15px; border-radius:13px;
  border:1.5px solid var(--border); background:var(--surface-2);
  transition:all .15s var(--ease-standard); }
.program-btn:hover{ border-color:var(--border-strong); }
.program-btn.selected{ border-color:var(--primary); background:var(--primary-soft);
  box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.program-btn .pname{ display:block; font-size:13px; font-weight:700; color:#fff; }
.program-btn .pdesc{ display:block; font-size:11px; color:var(--text-muted);
  margin-top:4px; line-height:1.45; }

.program-fields{ display:none; padding-top:14px; border-top:1px solid var(--border); }
.program-fields.show{ display:block; }

.terminal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
@media(max-width:820px){ .terminal-grid{ grid-template-columns:1fr 1fr; } }
.terminal-btn{ text-align:left; padding:12px; border-radius:12px;
  border:1.5px solid var(--border); background:var(--surface-2);
  transition:all .15s var(--ease-standard); }
.terminal-btn:hover{ border-color:var(--border-strong); transform:translateY(-1px); }
.terminal-btn.selected{ border-color:var(--primary); background:var(--primary-soft);
  box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.terminal-btn .tname{ display:block; font-size:12.5px; font-weight:700; color:#fff; }
.terminal-btn .tmeta{ display:block; font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.terminal-btn .tcost{ display:block; font-size:10px; font-weight:700; margin-top:6px; }
.terminal-btn .tcost.free{ color:var(--status-good); }
.terminal-btn .tcost.paid{ color:var(--status-warning); }

.price-row{ display:flex; gap:8px; flex-wrap:wrap; }
.price-btn{ position:relative; padding:11px 15px; border-radius:12px;
  border:1.5px solid var(--border); background:var(--surface-2); text-align:center;
  transition:all .15s var(--ease-standard); min-width:96px; }
.price-btn:hover{ border-color:var(--border-strong); }
.price-btn.selected{ border-color:var(--primary); background:var(--primary-soft);
  box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.price-btn .pprice{ display:block; font-family:var(--font-mono); font-size:13px;
  font-weight:800; color:#fff; }
.price-btn .pcomm{ display:block; font-size:10px; color:var(--status-good);
  font-weight:700; margin-top:3px; }
.price-btn .pmax{ position:absolute; top:-7px; right:-5px; font-size:8.5px;
  font-weight:800; background:var(--status-warning); color:#1a1400;
  padding:1px 5px; border-radius:20px; text-transform:uppercase; }

/* Commission ledger */
.buyback-form{ display:none; }
.buyback-form.show{ display:table-row; }
.buyback-form td{ background:rgba(248,113,113,.05); padding:12px 8px; }

/* ---------- Lead sourcing ---------- */
/* A two-column form that collapses on narrow screens. Labels wrap their own
   field so the label and input can never drift apart when the grid reflows. */
.form-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap:13px 16px; }
.form-grid label{ display:flex; flex-direction:column; gap:5px;
                  font-size:11px; font-weight:700; color: var(--text-muted);
                  text-transform:uppercase; letter-spacing:.04em; }
.form-grid textarea{ font-family: var(--font-mono); font-size:12px; resize:vertical;
                     line-height:1.55; }
.form-grid input, .form-grid select, .form-grid textarea{ width:100%; }
/* A checkbox inside the grid is a sentence, not a field label — opt it out of
   the uppercase label styling above. */
.form-grid label.checkbox-row{ flex-direction:row; align-items:center; gap:8px;
                               text-transform:none; letter-spacing:0;
                               font-size:12px; color: var(--text-secondary); }
.form-grid label.checkbox-row input{ width:auto; }

/* Rank pill carries a tooltip of the score breakdown, so a weak lead can be
   explained rather than just asserted. */
.data-table .pill[title]{ cursor:help; }

/* ---------- Internal chat ---------- */
/* Two panes, fixed to the viewport height so only the message stream scrolls.
   A page that scrolls as a whole puts the composer off-screen exactly when
   someone wants to type. */
.chat-layout{ display:grid; grid-template-columns:300px 1fr; gap:14px;
              height:calc(100vh - 110px); min-height:480px; }
.chat-list{ display:flex; flex-direction:column; overflow:hidden; }
.chat-threads{ overflow-y:auto; margin:0 -17px -17px; padding:0 8px 8px; flex:1; }

.chat-thread{ display:flex; align-items:center; gap:10px; padding:10px 9px;
              border-radius:10px; text-decoration:none; position:relative; }
.chat-thread:hover{ background:rgba(255,255,255,0.03); }
.chat-thread.active{ background:rgba(56,189,248,0.09); }
.chat-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0;
              display:flex; align-items:center; justify-content:center;
              background:var(--grad-brand); color:#fff; font-weight:800; font-size:13px; }
.chat-avatar.group{ background:var(--surface-2); color:var(--text-muted); }
.chat-thread-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.chat-thread-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.chat-thread-top b{ font-size:12.5px; color:#fff; }
.chat-time{ font-size:10px; color:var(--text-muted); font-family:var(--font-mono); }
.chat-preview{ font-size:11px; color:var(--text-muted); white-space:nowrap;
               overflow:hidden; text-overflow:ellipsis; }
.chat-badge{ background:var(--primary); color:#04121c; font-size:10px; font-weight:800;
             border-radius:9px; padding:1px 6px; flex-shrink:0; }

.chat-new{ display:none; gap:12px; flex-direction:column; padding:0 0 12px;
           border-bottom:1px solid var(--border); margin-bottom:8px; }
.chat-new.show{ display:flex; }
.chat-new-block{ display:flex; flex-direction:column; gap:6px; }
.chat-new-label{ font-size:10px; font-weight:800; text-transform:uppercase;
                 letter-spacing:.04em; color:var(--text-muted); }

.chat-room{ display:flex; flex-direction:column; overflow:hidden; }
.chat-room-head{ align-items:flex-start; }
.chat-invite{ display:none; gap:8px; align-items:flex-start; margin-bottom:12px; }
.chat-invite.show{ display:flex; }

.chat-stream{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px;
              padding:4px 2px 12px; margin:0 -4px; }
.chat-msg{ display:flex; flex-direction:column; gap:3px; max-width:66%; }
.chat-msg.mine{ align-self:flex-end; align-items:flex-end; }
.chat-msg-author{ font-size:10.5px; font-weight:700; color:var(--text-muted);
                  padding-left:11px; }
.chat-bubble{ background:var(--surface-2); border:1px solid var(--border);
              border-radius:13px 13px 13px 4px; padding:9px 12px 6px;
              font-size:12.5px; color:var(--text-secondary); line-height:1.55; }
.chat-msg.mine .chat-bubble{ background:rgba(56,189,248,0.12);
                             border-color:rgba(56,189,248,0.28); color:#e8f6ff;
                             border-radius:13px 13px 4px 13px; }
.chat-bubble.deleted{ font-style:italic; color:var(--text-muted); }
.chat-text{ white-space:pre-wrap; word-break:break-word; }
.chat-meta{ display:block; font-size:9.5px; color:var(--text-muted);
            font-family:var(--font-mono); margin-top:4px; text-align:right; }
.chat-quote{ border-left:2px solid var(--primary); padding:3px 0 3px 8px;
             font-size:11px; color:var(--text-muted); margin-bottom:3px; }
.chat-system{ align-self:center; font-size:10.5px; color:var(--text-muted);
              background:var(--surface-2); border-radius:20px; padding:4px 13px; }

.chat-image img{ max-width:220px; border-radius:8px; margin-top:6px; display:block; }
.chat-file{ display:flex; align-items:center; gap:9px; margin-top:6px; padding:8px 10px;
            background:rgba(255,255,255,0.04); border-radius:9px; text-decoration:none; }
.chat-file svg{ width:17px; height:17px; color:var(--text-muted); flex-shrink:0; }
.chat-file span{ display:flex; flex-direction:column; min-width:0; }
.chat-file b{ font-size:11.5px; color:#fff; overflow:hidden; text-overflow:ellipsis;
              white-space:nowrap; }
.chat-file small{ font-size:10px; color:var(--text-muted); font-family:var(--font-mono); }

.chat-composer{ border-top:1px solid var(--border); padding-top:11px; margin-top:4px; }
.chat-composer-row{ display:flex; gap:9px; align-items:flex-end; }
.chat-composer textarea{ flex:1; resize:none; min-height:38px; max-height:140px;
                         font-size:12.5px; line-height:1.5; }
.chat-attach{ cursor:pointer; padding:9px; border-radius:9px; background:var(--surface-2);
              border:1px solid var(--border); display:flex; }
.chat-attach:hover{ border-color:var(--primary); }
.chat-attach svg{ width:16px; height:16px; color:var(--text-muted); }
.chat-attach input[type="file"]{ display:none; }
.chat-attach-strip{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.chat-chip{ font-size:10.5px; background:var(--surface-2); border:1px solid var(--border);
            border-radius:20px; padding:3px 10px; color:var(--text-secondary); }

@media(max-width:1000px){
  .chat-layout{ grid-template-columns:1fr; height:auto; }
  .chat-list{ max-height:280px; }
  .chat-stream{ min-height:380px; }
  .chat-msg{ max-width:88%; }
}

/* ---------- E-signature ---------- */
/* The signing link is the signer's credential, so it needs to be easy to copy
   accurately and hard to confuse with an ordinary field. */
.esign-link{ margin-top:9px; }
.esign-link input{ width:100%; font-family:var(--font-mono); font-size:10px;
                   background:var(--surface-2); cursor:pointer; }
.esign-link span{ display:block; font-size:10px; color:var(--text-muted);
                  margin-top:4px; }

/* ---------- Support tickets ---------- */
/* A queue sorted by date buries whatever is on fire, so the row carries its
   own urgency and the worst sort to the top. */
.tabs{ display:flex; gap:6px; }
.tab{ padding:7px 14px; border-radius:9px; font-size:12px; font-weight:700;
      color:var(--text-muted); text-decoration:none; border:1px solid var(--border);
      background:var(--surface-2); }
.tab:hover{ color:#fff; }
.tab.active{ background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.35);
             color:var(--primary); }

.urgency-dot{ display:inline-block; width:8px; height:8px; border-radius:50%;
              background:var(--text-muted); }
.urgency-dot.breached{ background:var(--status-critical);
                       box-shadow:0 0 0 3px rgba(248,113,113,.18); }
.urgency-dot.critical{ background:var(--status-critical); }
.urgency-dot.warning{ background:var(--status-warning); }
.urgency-dot.ok{ background:var(--status-good); }
.urgency-dot.done{ background:var(--text-muted); opacity:.4; }
/* Named `tkt-row`, not `ticket-row`: the v3 stylesheet already uses
   `.ticket-row` for a flex list component, and reusing it turned every
   table row into a flex container. */
.tkt-row.breached td{ background:rgba(248,113,113,.05); }

.ticket-msg{ padding:11px 0; border-bottom:1px solid var(--border); }
.ticket-msg:last-of-type{ border-bottom:none; }
.ticket-msg-head{ display:flex; align-items:center; gap:9px; margin-bottom:5px; }
.ticket-msg-head b{ font-size:12px; color:#fff; }
.ticket-msg-body{ font-size:12.5px; color:var(--text-secondary); line-height:1.6;
                  white-space:pre-wrap; }
/* An inbound message is the one thing that means the ball is in our court. */
.ticket-msg.inbound{ border-left:2px solid var(--status-warning); padding-left:11px; }
.ticket-msg.reply{ border-left:2px solid var(--status-good); padding-left:11px; }

/* ---------- Scorecards ---------- */
.period-bar{ display:flex; gap:6px; margin-bottom:14px; }

/* A finding is advice, not a metric — it gets prose width and a severity
   stripe rather than a number tile. */
.finding{ display:flex; flex-direction:column; gap:4px; padding:11px 13px;
          border-radius:10px; margin-bottom:9px; border-left:3px solid var(--border);
          background:rgba(255,255,255,0.02); }
.finding:last-child{ margin-bottom:0; }
.finding b{ font-size:12.5px; color:#fff; }
.finding span{ font-size:12px; color:var(--text-secondary); line-height:1.6; }
.finding.bad{ border-left-color:var(--status-critical);
              background:rgba(248,113,113,0.06); }
.finding.warn{ border-left-color:var(--status-warning);
               background:rgba(251,191,36,0.05); }
.finding.good{ border-left-color:var(--status-good);
               background:rgba(52,211,153,0.05); }

/* Each funnel step is measured against the step above it, so the bars are
   deliberately not a shrinking silhouette — a step can be 90% of a small
   number, and that is the point. */
.funnel-step{ display:flex; align-items:center; gap:14px; padding:9px 0;
              border-bottom:1px solid var(--border); }
.funnel-step:last-child{ border-bottom:none; }
.funnel-label{ width:190px; flex-shrink:0; display:flex; flex-direction:column; }
.funnel-label b{ font-size:12.5px; color:#fff; }
.funnel-label span{ font-size:10.5px; color:var(--text-muted); }
.funnel-bar{ flex:1; height:9px; background:var(--surface-2); border-radius:6px;
             overflow:hidden; }
.funnel-fill{ height:100%; background:var(--grad-brand); border-radius:6px; }
.funnel-value{ width:88px; flex-shrink:0; text-align:right; display:flex;
               flex-direction:column; }
.funnel-value b{ font-size:14px; color:#fff; font-family:var(--font-mono); }
.funnel-value span{ font-size:10.5px; color:var(--text-muted);
                    font-family:var(--font-mono); }

.rollup{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
         gap:12px; }
.rollup > div{ display:flex; flex-direction:column; gap:3px; }
.rollup .l{ font-size:10px; font-weight:700; color:var(--text-muted);
            text-transform:uppercase; letter-spacing:.04em; }
.rollup b{ font-size:17px; color:#fff; }

/* ---------- Dashboard ---------- */
/* Widgets flow into a responsive grid; the ones that carry a table or a list
   claim the full width so their rows don't get squeezed into two columns. */
.dash{ display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
       gap:14px; align-items:start; }
.dash > .dash-wide{ grid-column:1 / -1; }
.dash .panel.urgent{ border-color:rgba(248,113,113,.28); }

.dash-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(74px, 1fr));
             gap:12px; }
.dash-stats > div{ display:flex; flex-direction:column; gap:2px; }
.dash-stats b{ font-size:21px; color:#fff; font-family:var(--font-mono); }
.dash-stats span{ font-size:10.5px; color:var(--text-muted); font-weight:600; }

/* --- Who you are calling ---------------------------------------------------
   Option A: a band of facts between the status bar and the call, and a foot
   of contact details and history below it. Both are direct children of the
   console card rather than of any one pane, so nothing about the merchant
   moves or disappears as the call goes from ringing to talking to wrap-up —
   which is when the rep is writing down what was said and most needs it. */
.lead-band{ flex-shrink:0; border-bottom:1px solid var(--border); }
.band-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(142px, 1fr));
            gap:1px; background:var(--border); }
.band-cell{ background:var(--surface-solid); padding:10px 14px; min-width:0; }
.band-cell .k, .foot-cell .k{ display:block; font-size:9.5px; font-weight:700;
                              letter-spacing:.05em; text-transform:uppercase;
                              color:var(--text-muted); }
.band-cell b, .foot-cell b{ display:block; font-size:13px; color:#fff; margin-top:3px;
                            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.band-cell i, .foot-cell i{ display:block; font-style:normal; font-size:10.5px;
                            color:var(--text-muted); margin-top:2px;
                            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.band-cell i.warn{ color:var(--status-warning); font-weight:700; }
.band-cell i.good{ color:var(--status-good); font-weight:700; }

/* The last call, stated rather than filed away. */
.band-last{ margin:11px 14px 13px; padding:10px 13px; border-radius:var(--radius-sm);
            border:1px solid rgba(251,191,36,0.34); background:rgba(251,191,36,0.07); }
.band-last .hdr{ font-size:10px; font-weight:800; letter-spacing:.05em;
                 text-transform:uppercase; color:var(--status-warning); }
.band-last .what{ font-size:13px; color:#fff; font-weight:700; margin-top:4px; }
.band-last .said{ font-size:12.5px; color:var(--text-secondary); margin-top:3px;
                  white-space:pre-wrap; }

.lead-foot{ flex-shrink:0; border-top:1px solid var(--border); }
.foot-facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
             gap:1px; background:var(--border); }
.foot-cell{ background:var(--surface-solid); padding:10px 14px; min-width:0; }
.foot-cell.wide{ grid-column:span 2; }
.foot-actions{ display:flex; flex-wrap:wrap; gap:7px; padding:11px 14px;
               align-items:center; border-top:1px solid var(--border); }
.band-flag{ margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.06em;
            color:var(--status-critical); border:1px solid var(--status-critical);
            border-radius:5px; padding:3px 8px; }

/* The full history stays collapsed — it is reference. The summary carries the
   count; the block above carries the part that changes what the rep says. */
.foot-history{ border-top:1px solid var(--border); }
.foot-history > summary{ cursor:pointer; padding:10px 14px; font-size:11.5px;
                         color:var(--text-secondary); font-weight:600; list-style:none; }
.foot-history > summary::-webkit-details-marker{ display:none; }
.foot-history > summary::before{ content:"\25B8 "; color:var(--text-muted); }
.foot-history[open] > summary::before{ content:"\25BE "; }
.foot-history > summary:hover{ color:#fff; }
.foot-history > div{ padding:0 14px 12px; }
.hist-row{ display:flex; gap:11px; padding:8px 0; border-top:1px solid var(--border); }
.hist-when{ width:88px; flex-shrink:0; font-size:11px; color:var(--text-muted); }
.hist-body{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.hist-body b{ font-size:12px; color:#fff; }
.hist-who{ font-size:10.5px; color:var(--text-muted); }
.hist-notes{ font-size:11.5px; color:var(--text-secondary); white-space:pre-wrap; }

@media (max-width:820px){ .foot-cell.wide{ grid-column:auto; } }

/* --- Daily bars on the dashboard -----------------------------------------
   Deliberately CSS and markup rather than a charting library: the page has to
   draw on a slow link, has to print, and has to survive a blocked script. The
   figure for each day rides in the bar's title attribute, so hovering gives
   the exact number with no JavaScript involved. */
.dash-chart{ margin-top:16px; padding-top:13px; border-top:1px solid var(--border); }
.dash-chart-head{ display:flex; justify-content:space-between; align-items:baseline;
                  font-size:10.5px; font-weight:700; color:var(--text-muted);
                  text-transform:uppercase; letter-spacing:.04em; margin-bottom:9px; }
.dash-chart-head b{ font-size:12px; color:var(--text-secondary);
                    text-transform:none; letter-spacing:0; }
.sparkbars{ display:flex; align-items:flex-end; gap:3px; }
.sparkbar{ flex:1; min-width:4px; border-radius:2px 2px 0 0;
           background:var(--grad-brand); opacity:.55;
           transition:opacity .12s ease; }
.sparkbar:hover{ opacity:1; }
/* The last bar is today, and today is the one being asked about. */
.sparkbar.today{ opacity:1; }
/* A day with no calls still occupies its slot, so a gap reads as a quiet day
   rather than as a day the chart forgot. */
.sparkbar[style*="height:0px"]{ height:2px !important; opacity:.16; }
.sparkbars-axis{ display:flex; justify-content:space-between; margin-top:6px;
                 font-size:10px; color:var(--text-muted); font-weight:600; }

.stage-row{ display:flex; align-items:center; gap:11px; padding:6px 0; }
.stage-label{ width:104px; flex-shrink:0; font-size:11.5px;
              color:var(--text-secondary); font-weight:600; }
.stage-bar{ flex:1; height:7px; background:var(--surface-2); border-radius:6px;
            overflow:hidden; }
.stage-fill{ display:block; height:100%; background:var(--grad-brand);
             border-radius:6px; }
.stage-row b{ width:38px; text-align:right; font-size:12.5px; color:#fff; }

.access-note{ margin-top:16px; }
.access-note summary{ cursor:pointer; font-size:12px; color:var(--text-muted);
                      padding:6px 0; }
.access-note summary:hover{ color:#fff; }

/* Rate card: the company's cost basis, when the role is allowed to see it. */
.cost-note{ margin-top:12px; padding:9px 12px; border-radius:9px;
            background:var(--status-warning-soft);
            border:1px solid rgba(251,191,36,.24);
            font-size:11.5px; font-weight:700; color:var(--status-warning); }
.cost-note span{ font-weight:500; opacity:.75; }

/* Proposal preview — the agent sees exactly the PDF the merchant gets. */
.proposal-frame{ width:100%; height:640px; border:1px solid var(--border);
                 border-radius:9px; background:#fff; }

/* ---------- Client success ---------- */
/* A checklist of dates, not booleans — "when" is the useful question, and a
   step done three weeks ago says something a tick alone does not. */
.checklist-row{ display:flex; align-items:center; gap:12px; padding:10px 0;
                border-bottom:1px solid var(--border); }
.checklist-row:last-child{ border-bottom:none; }
.checklist-row b{ font-size:12.5px; color:var(--text-secondary); }
.checklist-row.done b{ color:#fff; }
.checklist-row .muted{ font-size:10.5px; color:var(--text-muted); margin-left:8px; }
.check-mark{ width:23px; height:23px; border-radius:50%; flex-shrink:0;
             display:flex; align-items:center; justify-content:center;
             font-size:11px; font-weight:800; background:var(--surface-2);
             color:var(--text-muted); border:1px solid var(--border); }
.checklist-row.done .check-mark{ background:var(--status-good-soft);
                                 color:var(--status-good);
                                 border-color:rgba(52,211,153,.35); }

/* ---------- Integrations ---------- */
.integration.blocking{ border-color:rgba(248,113,113,.28); }
.integration-impact{ background:var(--surface-2); border-radius:9px;
                     padding:10px 12px; font-size:12px;
                     color:var(--text-secondary); line-height:1.6; }
.integration-impact b{ color:#fff; }
.env-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.env-list code{ font-size:10.5px; background:var(--surface-2);
                border:1px solid var(--border); border-radius:6px;
                padding:3px 8px; color:var(--text-muted); }

/* ---------- Settings ---------- */
.day-picker{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px;
             padding-top:14px; border-top:1px solid var(--border); }
.settings-link{ display:flex; flex-direction:column; gap:2px; padding:11px 0;
                border-bottom:1px solid var(--border); text-decoration:none; }
.settings-link:last-child{ border-bottom:none; }
.settings-link b{ font-size:12.5px; color:#fff; }
.settings-link span{ font-size:11px; color:var(--text-muted); }
.settings-link:hover b{ color:var(--primary); }

/* ---------- Pre-submission check ---------- */
/* The verdict is the first thing on the page and carries its own colour,
   because "don't send this yet" is the entire point of the screen. */
.verdict-card.ready{ border-left:3px solid var(--status-good); }
.verdict-card.gaps{ border-left:3px solid var(--status-warning); }
.verdict-card.blocked, .verdict-card.specialist{
  border-left:3px solid var(--status-critical); }

.uw-item{ padding:12px 0; border-bottom:1px solid var(--border); }
.uw-item:last-child{ border-bottom:none; }
.uw-item b{ font-size:12.5px; color:var(--text-secondary); display:inline; }
.uw-item.done b{ color:#fff; }
.uw-item.blocking:not(.done){ background:rgba(248,113,113,.04);
                              margin:0 -8px; padding:12px 8px; border-radius:8px; }
.uw-why{ display:block; font-size:11px; color:var(--text-muted);
         margin-top:5px; line-height:1.6; }
.uw-gather{ display:block; font-size:11px; color:var(--primary);
            margin-top:6px; line-height:1.6; }
.uw-gather b{ color:var(--primary); font-size:11px; }

/* --- RingCentral number pickers -------------------------------------------
   Shown only when an agent actually has a choice of numbers. One number means
   no picker at all, so the common case stays uncluttered. */
.dial-callerid,
.sms-from{ display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.dial-callerid .section-sub,
.sms-from .section-sub{ white-space:nowrap; margin:0; }
.dial-callerid select,
.sms-from select{ flex:1 1 auto; min-width:0; font-size:12px; padding:5px 7px; }

/* Connection state on the profile page. */
.rc-status{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rc-numbers{ margin:10px 0 0; padding:0; list-style:none;
             font-size:12px; color:var(--text-muted); }
.rc-numbers li{ padding:2px 0; }
.rc-numbers .rc-feature{ color:var(--text-subtle); }

/* Sign-out is a form, not a link — see base.html. These rules make the button
   sit in the top bar exactly as the old anchor did. */
.logout-form{ display:flex; margin:0; }
.logout-form .icon-btn{ background:none; border:0; cursor:pointer;
                        display:flex; align-items:center; justify-content:center;
                        color:inherit; font:inherit; padding:0; }

/* "Ring me on" — the phone click-to-dial calls first. */
.rc-ring{ padding:0 0 14px; margin:0 0 14px; border-bottom:1px solid var(--border); }
.rc-ring-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rc-ring-form input{ flex:1 1 200px; min-width:0; }

/* Which phone click-to-dial rings, shown where the rep is about to press call. */
.dial-ringto{ font-size:11px; color:var(--text-muted); margin:0 0 10px; line-height:1.5; }
.dial-ringto b{ color:var(--text-secondary); font-weight:600; }

/* Softphone readiness. A rep must never be unsure whether their headset is
   live — an ambiguous state here costs a whole shift. */
.phone-status{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
               font-weight:700; margin:0 0 8px; color:var(--text-muted); }
.phone-status.ok{ color:var(--status-good); }
.phone-status.warn{ color:var(--status-warning); }
.phone-status.crit{ color:var(--status-critical); }
.ctrl-btn.on{ background:var(--primary); color:#fff; }

/* Call diagnostics, shown only with ?sipdebug=1 */
.sip-trace{ margin-top:16px; }
.sip-trace pre{ margin:0; padding:10px 12px; max-height:260px; overflow:auto;
                font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                font-size:11px; line-height:1.55; white-space:pre-wrap;
                word-break:break-word; color:var(--text-secondary);
                background:rgba(0,0,0,0.25); border-radius:8px; }

/* ── Lead directory ────────────────────────────────────────────────────────
   A faceted list, not a board. Once bulk loading has put hundreds of
   thousands of merchants in the system, the counts beside each filter are
   the point: a rep needs to see there are 4,000 restaurants in Cook County
   before deciding to spend a morning on them. */
.dir-layout{ display:grid; grid-template-columns: 232px minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width: 900px){ .dir-layout{ grid-template-columns: 1fr; } }

.dir-facets{ background: var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:14px; position:sticky; top:12px; max-height:calc(100vh - 40px); overflow-y:auto; }
.dir-group + .dir-group{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.dir-group h4{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color: var(--text-muted); margin-bottom:8px; }

.dir-facet{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 8px; border-radius:8px; font-size:12px; font-weight:600;
  color: var(--text-secondary); text-decoration:none; transition: background .12s, color .12s; }
.dir-facet:hover{ background: var(--surface-hover); color:#fff; }
.dir-facet b{ font-family: var(--font-mono); font-size:11px; font-weight:700; color: var(--text-muted); }
.dir-facet.on{ background: var(--primary-soft); color:#fff; }
.dir-facet.on b{ color: var(--primary); }

.dir-states{ display:flex; flex-wrap:wrap; gap:5px; }
.dir-state{ display:inline-flex; flex-direction:column; align-items:center; min-width:38px;
  padding:5px 6px; border-radius:8px; border:1px solid var(--border);
  font-size:11px; font-weight:700; color: var(--text-secondary); text-decoration:none;
  transition: border-color .12s, color .12s, background .12s; }
.dir-state i{ font-style:normal; font-size:9px; font-weight:600; color: var(--text-muted);
  font-family: var(--font-mono); margin-top:2px; }
.dir-state:hover{ border-color: var(--border-strong); color:#fff; }
.dir-state.on{ background: var(--primary-soft); border-color: var(--border-glow); color:#fff; }
.dir-state.on i{ color: var(--primary); }

.dir-active{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.dir-active .pill{ background: var(--primary-soft); color: var(--primary);
  text-decoration:none; cursor:pointer; }

.dir-results{ background: var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:14px 16px; min-width:0; overflow-x:auto; }
.dir-results a{ color: var(--text-primary); text-decoration:none; font-weight:700; }
.dir-results a:hover{ color: var(--primary); }

.pager{ display:flex; align-items:center; justify-content:center; gap:12px;
  padding:14px 0 4px; font-size:12px; }

/* ── Lead console (admin only) ─────────────────────────────────────────────
   The board is for working leads, the directory is for picking a call list.
   This is neither: it answers "what is in the database, where did it come
   from, and what is missing" — the question you ask when deciding what to
   build next rather than who to phone next. */
.con-tiles{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap:10px; margin-bottom:14px; }
.con-tile{ background: var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; }
.con-tile.wide{ grid-column: span 2; }
.con-tile .k{ display:block; font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color: var(--text-muted); margin-bottom:5px; }
.con-tile b{ font-size:21px; font-weight:800; color:#fff;
  font-family: var(--font-mono); letter-spacing:-.02em; }
.con-tile i{ display:block; font-style:normal; font-size:11px;
  color: var(--text-muted); margin-top:3px; }
.con-tile.ok b{ color: var(--status-good); }
.con-tile.warn b{ color: var(--status-warning); }

.con-provenance{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:10px; margin-bottom:14px; }
.con-panel{ background: var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; max-height:230px; overflow-y:auto; }
.con-panel h4{ font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color: var(--text-muted); margin-bottom:8px; }
.con-row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:5px 7px; border-radius:7px; font-size:12px; font-weight:600;
  color: var(--text-secondary); text-decoration:none; }
.con-row:hover{ background: var(--surface-hover); color:#fff; }
.con-row b{ font-family: var(--font-mono); font-size:11px; color: var(--text-muted); }

.con-filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  background: var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.con-filters input[type="text"]{ width:230px; }
.con-filters select{ width:auto; min-width:150px; }
.con-date{ display:inline-flex; align-items:center; gap:6px; font-size:11px;
  color: var(--text-muted); white-space:nowrap; }

.con-results{ background: var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:8px 14px 14px; overflow-x:auto; }
.con-results a{ color: var(--text-primary); text-decoration:none; }
.con-results a:hover{ color: var(--primary); }

/* History drawer */
.con-drawer{ position:fixed; inset:0; background: rgba(3,6,14,.72);
  display:flex; justify-content:flex-end; z-index:80; }
.con-drawer[hidden]{ display:none; }
.con-drawer-panel{ width:min(760px, 96vw); height:100%; overflow-y:auto;
  background: var(--surface-solid); border-left:1px solid var(--border-strong);
  padding:22px 24px; position:relative; }
.con-drawer-close{ position:absolute; top:14px; right:16px; background:none;
  border:none; color: var(--text-muted); font-size:26px; line-height:1;
  cursor:pointer; }
.con-drawer-close:hover{ color:#fff; }

.hist-head h3{ font-size:17px; font-weight:700; color:#fff; }
.hist-head p{ font-size:12px; margin-top:3px; }
.hist-facts{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap:8px; margin:16px 0; }
.hist-facts > div{ background: var(--surface-2); border:1px solid var(--border);
  border-radius:9px; padding:8px 10px; }
.hist-facts .k{ display:block; font-size:9px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color: var(--text-muted); margin-bottom:3px; }
.hist-facts b{ font-size:12.5px; font-weight:700; color: var(--text-primary); }

.hist-note{ background: var(--primary-soft); border:1px solid var(--border-glow);
  border-radius:10px; padding:10px 12px; margin-bottom:16px; }
.hist-note .k{ font-size:9px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color: var(--primary); }
.hist-note p{ font-size:12px; color: var(--text-secondary); margin-top:4px; }

.hist-section{ font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color: var(--text-muted); margin:18px 0 8px; }
.hist-log{ list-style:none; margin:0; padding:0; }
.hist-log li{ display:flex; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--border); }
.hist-log li:last-child{ border-bottom:none; }
.hist-log .when{ flex-shrink:0; width:112px; font-size:11px;
  font-family: var(--font-mono); color: var(--text-muted); }
.hist-log .what{ font-size:12px; color: var(--text-secondary);
  display:flex; flex-wrap:wrap; gap:6px; align-items:baseline; }