:root {
      --paper: #FFFFFF;
      --mist: #F5F5F5;
      --ink: #0A0A0A;
      --ink-80: rgba(10,10,10,0.80);
      --ink-60: rgba(10,10,10,0.62);
      --ink-40: rgba(10,10,10,0.38);
      --ink-15: rgba(10,10,10,0.12);
      --ink-08: rgba(10,10,10,0.06);
      --emerald: #0B6E3D;
      --emerald-700: #0E7F46;
      --emerald-900: #074427;
      --gold: #C8922E;
      --rust: #9A2E1A;
      --hot: #9A2E1A;
      --warm: #C8922E;
      --cold: #3b82f6;
      --lost: #6b7280;
      --bg: var(--paper);
      --fg: var(--ink);
      --surface: var(--paper);
      --surface-2: var(--mist);
      --border: var(--ink-15);
      --cta-fg: #ffffff;
      --bar-track: #eee;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg);
      color: var(--fg);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }
    header {
      padding: 18px 28px;
      display: flex; justify-content: space-between; align-items: center;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      position: sticky; top: 0; z-index: 10;
    }
    header .brand { display: flex; align-items: center; gap: 10px; }
    header h1 { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
    header .controls { display: flex; gap: 8px; align-items: center; }
    header button {
      padding: 8px 14px; border: 1px solid var(--border);
      background: var(--surface); color: var(--fg); border-radius: 6px; cursor: pointer;
      font: inherit; font-size: 13px; font-weight: 500;
    }
    header button:hover { background: var(--surface-2); }
    .container { padding: 24px 28px; max-width: 1280px; margin: 0 auto; }

    .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
    .stat { background: var(--surface); padding: 16px; border-radius: 10px; border: 1px solid var(--border); }
    .stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-60); }
    .stat .value { font-size: 26px; font-weight: 700; margin-top: 4px; }

    .legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; font-size: 12px; color: var(--ink-60); }
    .legend .chip { display: inline-flex; align-items: center; gap: 6px; }
    .dot { width: 10px; height: 10px; border-radius: 50%; }
    .dot.hot { background: var(--hot); }
    .dot.warm { background: var(--warm); }
    .dot.cold { background: var(--cold); }
    .dot.lost { background: var(--lost); }

    section.block {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px 24px;
      margin-bottom: 20px;
    }
    section.block h3 {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-60);
      margin-bottom: 14px;
      font-weight: 600;
    }

    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th { text-align: left; padding: 10px 12px; font-weight: 500; color: var(--ink-60); border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
    td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
    td.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-60); }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: var(--surface-2); }
    .temp {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .temp.hot { background: rgba(154,46,26,0.12); color: var(--hot); }
    .temp.warm { background: rgba(200,146,46,0.14); color: var(--warm); }
    .temp.cold { background: rgba(59,130,246,0.12); color: var(--cold); }
    .temp.lost { background: rgba(107,114,128,0.14); color: var(--lost); }
    .bar { display: inline-block; width: 60px; height: 6px; background: var(--bar-track); border-radius: 3px; overflow: hidden; margin-right: 6px; vertical-align: middle; }
    .bar span { display: block; height: 100%; background: var(--emerald); }
    .pills { display: flex; gap: 4px; flex-wrap: wrap; }
    .pill { padding: 2px 7px; background: var(--surface-2); border-radius: 10px; color: var(--ink-60); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; }
    .pill.active { background: var(--emerald); color: var(--cta-fg); }
    .empty { padding: 40px; text-align: center; color: var(--ink-40); font-size: 14px; }
    .loading { padding: 40px; text-align: center; color: var(--ink-40); }

    details { margin-top: 10px; }
    details summary { cursor: pointer; color: var(--ink-60); font-size: 12px; padding: 4px 0; }
    details[open] summary { margin-bottom: 8px; }
    .events-list { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-60); }
    .events-list div { padding: 3px 0; border-bottom: 1px dashed var(--border); }

    /* Boot / loading state — the dashboard used to render nothing at all
       until every row was ready, which read as a broken white page. */
    .boot {
      position: fixed;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      background: var(--bg);
      z-index: 500;
    }
    .boot p { font-size: 13px; color: var(--ink-60); margin: 0; }
    .boot.error .spinner { display: none; }
    .spinner {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 3px solid var(--border);
      border-top-color: var(--emerald);
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .banner {
      margin-bottom: 16px;
      padding: 10px 14px;
      border-radius: 6px;
      font-size: 13px;
      background: rgba(154, 46, 26, 0.1);
      color: var(--hot);
      border: 1px solid rgba(154, 46, 26, 0.3);
    }

    .pager {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 14px 12px 4px;
      font-size: 13px;
      color: var(--ink-60);
    }
    .pager button[disabled] { opacity: 0.4; cursor: default; }

    @media (max-width: 640px) {
      header { padding: 14px 18px; }
      .container { padding: 16px 18px; }
      th, td { padding: 8px 6px; font-size: 12px; }
    }