:root {
      color-scheme: light;
      --bg: #f5f6f8;
      --panel: #ffffff;
      --panel-soft: #f8fafc;
      --line: #dce1e8;
      --line-strong: #c8ced8;
      --text: #15181e;
      --muted: #667085;
      --subtle: #8a94a3;
      --blue: #2563eb;
      --cyan: #07879b;
      --green: #15803d;
      --amber: #b45309;
      --orange: #b45309;
      --red: #b42318;
      --violet: #7c3aed;
      --code: #0f172a;
      --radius: 8px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }
    html, body { min-height: 100%; margin: 0; }
    body { background: var(--bg); color: var(--text); letter-spacing: 0; }
    button, input, select, textarea { font: inherit; letter-spacing: 0; }
    select {
      padding-right: 34px;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5l5 5 5-5' stroke='%23475467' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-position: right 12px center;
      background-repeat: no-repeat;
      background-size: 14px 14px;
      appearance: none;
      -webkit-appearance: none;
    }
    main { min-width: 0; padding: 24px 28px 56px; }

    .topbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 18px;
    }
    .topbar h1, .topbar h2 { margin: 0; font-size: 23px; line-height: 1.25; }
    .topbar p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }

    .dashboard-command-bar {
      position: sticky;
      top: 0;
      z-index: 6;
      align-items: center;
      min-height: 58px;
      padding: 8px 0;
      background: rgba(245, 246, 248, .96);
      backdrop-filter: blur(10px);
    }
    .dashboard-command-bar.is-floating {
      padding-inline: 12px;
      border: 1px solid var(--line);
      border-top: 0;
      border-radius: 0 0 var(--radius) var(--radius);
      box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    }
    .dashboard-command-bar .dashboard-heading { width: 100%; }

    glimpse-reporting-window {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 0 auto;
    }
    glimpse-reporting-window[hidden] { display: none !important; }
    .reporting-window-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    .reporting-window-control { display: grid; gap: 4px; }
    .reporting-window-control > span { color: var(--subtle); font-size: 9px; font-weight: 700; text-transform: uppercase; }

    .panel {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
    }
    .panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 15px 17px;
      border-bottom: 1px solid var(--line);
    }
    .panel-title { margin: 0; font-size: 13px; font-weight: 750; line-height: 1.25; }
    .panel-meta, .panel-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
    .panel-body { padding: 16px; }

    .dashboard-tabs {
      display: flex;
      width: max-content;
      max-width: 100%;
      flex: 0 0 auto;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fff;
    }
    .dashboard-tab {
      min-height: 34px;
      padding: 7px 13px;
      border: 1px solid transparent;
      border-radius: 8px;
      color: #475569;
      background: transparent;
      font-size: 12px;
      font-weight: 750;
      cursor: pointer;
    }
    .dashboard-tab:hover { background: #f8fafc; }
    .dashboard-tab.active {
      border-color: #bfdbfe;
      color: #1e3a8a;
      background: #eff6ff;
    }
    .dashboard-tab-panel[hidden] { display: none !important; }
    .dashboard-heading { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
    .panel-title-group { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 8px 14px; }

    .profile-pool-body { padding: 16px 17px 17px; }
    .profile-pool-flow {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) 72px minmax(180px, 1fr);
      align-items: stretch;
      gap: 10px;
    }
    .profile-state-card {
      position: relative;
      min-width: 0;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--panel-soft);
    }
    .profile-state-card.active {
      border-color: #a9c7ff;
      background: #f5f8ff;
      box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .05);
    }
    .profile-state-card.bench { border-color: #abe8bd; background: #f3fcf5; }
    .profile-state-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .profile-state-name { display: inline-flex; align-items: center; gap: 7px; color: #344054; font-size: 10px; font-weight: 800; text-transform: uppercase; }
    .profile-state-dot { width: 9px; height: 9px; border: 2px solid #98a2b3; border-radius: 50%; background: #fff; }
    .profile-state-dot.bench { border-color: var(--green); background: var(--green); }
    .profile-state-dot.active { border-color: var(--blue); background: var(--blue); }
    .profile-state-tag { color: var(--subtle); font-size: 8px; font-weight: 700; text-transform: uppercase; }
    .profile-state-value { display: block; margin-top: 10px; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }
    .profile-state-detail { min-height: 30px; margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
    .profile-state-footnote { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: #475467; font-size: 8px; font-weight: 700; }
    .profile-state-list-button {
      min-height: 25px;
      margin-top: 9px;
      padding: 4px 8px;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      color: #344054;
      background: #fff;
      cursor: pointer;
      font-size: 9px;
      font-weight: 750;
    }
    .profile-state-list-button:hover { border-color: #98a2b3; background: #f8fafc; }
    .profile-flow-arrow { display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 7px; color: var(--subtle); font-size: 8px; font-weight: 700; line-height: 1.25; text-align: center; text-transform: uppercase; }
    .profile-flow-line { position: relative; width: 100%; height: 2px; border-radius: 2px; background: #cbd5e1; }
    .profile-flow-line::after { position: absolute; top: 50%; right: -1px; width: 7px; height: 7px; border-top: 2px solid #94a3b8; border-right: 2px solid #94a3b8; content: ""; transform: translateY(-50%) rotate(45deg); }

    .dashboard-control-groups {
      display: grid;
      grid-template-columns: minmax(0, 1120px);
      justify-content: start;
      gap: 14px;
      padding: 13px 17px 16px;
    }
    .dashboard-control-group {
      display: grid;
      min-width: 0;
      gap: 11px;
      margin: 0;
      padding: 11px 12px 12px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--panel-soft);
    }
    .dashboard-control-group legend { padding: 0 6px; color: #344054; font-size: 10px; font-weight: 750; text-transform: uppercase; }
    .dashboard-control-group label { display: grid; gap: 5px; color: #344054; font-size: 10px; font-weight: 650; }

    .hidden { display: none !important; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

    .field-help {
      position: relative;
      display: inline-grid;
      flex: 0 0 auto;
      width: 15px;
      height: 15px;
      place-items: center;
      border: 1px solid #aeb7c4;
      border-radius: 50%;
      color: #667085;
      font-size: 9px;
      line-height: 1;
      cursor: help;
    }
    .glimpse-tooltip-layer {
      position: fixed;
      z-index: 2147483647;
      width: 235px;
      max-width: calc(100vw - 16px);
      padding: 8px 9px;
      border: 1px solid #bcc3ce;
      border-radius: 5px;
      background: #fff;
      box-shadow: 0 7px 20px rgba(16, 24, 40, .14);
      color: #344054;
      font-size: 10px;
      font-weight: 500;
      line-height: 1.45;
      pointer-events: none;
      text-transform: none;
      white-space: normal;
    }

    .dashboard-hover-tooltip {
      position: relative;
      cursor: help;
    }

    .chart-tooltip {
      position: absolute;
      z-index: 2147483646;
      min-width: 145px;
      padding: 7px 8px;
      border: 1px solid #bcc3ce;
      border-radius: 5px;
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
      color: #344054;
      font-size: 10px;
      pointer-events: none;
    }
    .tooltip-title, .tooltip-time { margin-bottom: 4px; color: var(--text); font-weight: 750; }
    .tooltip-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; }
    .chart-wrap { position: relative; width: 100%; }
    .dashboard-page .chart-wrap { height: 344px; padding: 8px 10px 10px; }
    .dashboard-page .chart-wrap.small { height: 214px; padding-top: 6px; }
    canvas { display: block; width: 100%; height: 100%; }

    .legend { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; }
    .legend-button {
      display: inline-flex;
      min-height: 28px;
      align-items: center;
      gap: 7px;
      padding: 5px 8px;
      border: 1px solid var(--line);
      border-radius: 5px;
      color: #344054;
      background: #fff;
      font-size: 10px;
      cursor: pointer;
    }
    .legend-button[aria-pressed="false"] { color: #98a2b3; background: #f8f9fb; }
    .legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--series-color); }
    .legend-button[aria-pressed="false"] .legend-dot { background: #c5cad2; }

    .chart-loading {
      position: absolute;
      inset: 0;
      z-index: 4;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, .78);
    }
    .chart-spinner {
      width: 23px;
      height: 23px;
      border: 3px solid #d9dee7;
      border-top-color: var(--blue);
      border-radius: 50%;
      animation: chart-spin 700ms linear infinite;
    }
    @keyframes chart-spin { to { transform: rotate(360deg); } }

    .tooltip-label { display: flex; align-items: center; gap: 5px; }
    .tooltip-swatch { width: 6px; height: 6px; border-radius: 50%; }

    .request-summary {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      border-bottom: 1px solid var(--line);
    }
    .request-summary.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .request-summary-cell { min-width: 0; padding: 12px 14px; border-right: 1px solid var(--line); }
    .request-summary-cell:last-child { border-right: 0; }
    .request-summary-label { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
    .request-summary-label.with-info { display: flex; align-items: center; gap: 5px; }
    .request-summary-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px; margin-top: 6px; font-variant-numeric: tabular-nums; }
    .request-summary-value.paired { display: grid; gap: 6px; }
    .response-summary .request-summary-value.paired { display: flex; flex-wrap: nowrap; gap: 14px; }
    .response-summary-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
    .request-summary-submetric { display: flex; min-width: 0; align-items: baseline; gap: 7px; }
    .request-summary-value strong { color: var(--text); font-size: 17px; line-height: 1; }
    .request-summary-detail { color: var(--muted); font-size: 10px; white-space: nowrap; }
    .response-mini { position: relative; width: 100%; height: 58px; margin-top: 7px; }
    .response-mini .chart-spinner { width: 17px; height: 17px; border-width: 2px; }

    .sort-button {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font: inherit;
      font-weight: inherit;
      text-transform: inherit;
    }
    .sort-button:focus-visible { outline: 2px solid #84adff; outline-offset: 2px; border-radius: 3px; }
    .sort-icon {
      width: 0;
      height: 0;
      border-right: 4px solid transparent;
      border-bottom: 5px solid #c2cad6;
      border-left: 4px solid transparent;
      transform: scaleY(.65);
    }
    .sort-button.active { color: #1849a9; }
    .sort-button.active .sort-icon { border-bottom-color: var(--blue); }
    .sort-button.desc .sort-icon { transform: rotate(180deg) scaleY(.65); }

    .data-table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 10px; }
    .data-table th { padding: 9px 11px; border-bottom: 1px solid var(--line); background: var(--panel-soft); color: var(--muted); font-size: 9px; text-align: left; text-transform: uppercase; }
    .data-table td { max-width: 260px; padding: 9px 11px; border-bottom: 1px solid var(--line); color: #344054; overflow: hidden; text-overflow: ellipsis; }
    .data-table tr:last-child td { border-bottom: 0; }
    .table-wrap { width: 100%; overflow: auto; }
    .table-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); background: var(--panel-soft); }

    .pagination { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
    .pagination button { height: 29px; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; color: #344054; cursor: pointer; font-size: 10px; }
    .pagination button:disabled { opacity: .5; cursor: default; }

    .segmented { display: inline-flex; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; }
    .segmented button { min-height: 28px; padding: 5px 8px; border: 0; border-right: 1px solid var(--line); background: #fff; color: #475467; cursor: pointer; font-size: 9px; }
    .segmented button:last-child { border-right: 0; }
    .segmented button.active { background: #eaf1ff; color: #173f8a; font-weight: 750; }
    .segmented button:hover:not(:disabled):not(.active) { background: #f7f9fc; }
    .segmented button:disabled { color: #c1c7d0; background: #f8f9fb; cursor: default; }

    .primary-button, .secondary-button, .command-button {
      display: inline-flex;
      min-height: 32px;
      align-items: center;
      justify-content: center;
      padding: 7px 11px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 10px;
      font-weight: 750;
      text-decoration: none;
    }
    .primary-button, .command-button { border: 1px solid #1d4ed8; background: var(--blue); color: #fff; }
    .secondary-button { border: 1px solid var(--line-strong); background: #fff; color: #344054; }
    .primary-button:disabled, .secondary-button:disabled, .secondary-button.disabled, .command-button:disabled { cursor: default; opacity: .55; pointer-events: none; }

    .status-pill { display: inline-flex; min-height: 24px; align-items: center; padding: 4px 8px; border-radius: 999px; background: #ecfdf3; color: var(--green); font-size: 9px; font-weight: 750; text-transform: capitalize; }
    .status-pill.inactive { background: #f2f4f7; color: var(--muted); }
    .status-pill.success { background: #ecfdf3; color: var(--green); }
    .status-pill.error { background: #fef3f2; color: var(--red); }

    .form-status { min-height: 15px; color: var(--muted); font-size: 10px; line-height: 1.4; }
    .form-status.success { color: var(--green); }
    .form-status.error { color: var(--red); }

    .control-input {
      height: 34px;
      padding: 6px 9px;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      outline: 0;
      background-color: #fff;
      color: var(--text);
      font-size: 11px;
    }
    .control-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
    select.control-input { padding-right: 34px; }
    select.control-input.compact {
      height: 25px;
      padding: 3px 22px 3px 6px;
      border-radius: 4px;
      background-position: right 5px center;
      background-size: 12px 12px;
      font-size: 9px;
    }

    .metric-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-bottom: 1px solid var(--line);
    }
    .metric-cell { min-width: 0; padding: 13px 15px; border-right: 1px solid var(--line); }
    .metric-cell:last-child { border-right: 0; }
    .metric-cell span { display: block; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
    .metric-cell strong { display: block; margin-top: 6px; font-size: 19px; font-variant-numeric: tabular-nums; }
    .metric-cell small { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

    .pipeline { padding: 12px 17px 16px; }
    .pipeline-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 130px; align-items: center; gap: 10px; min-height: 47px; }
    .pipeline-label { color: #475467; font-size: 10px; }
    .pipeline-bars { display: grid; gap: 5px; }
    .pipeline-measure { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 6px; }
    .pipeline-measure-label { color: var(--subtle); font-size: 9px; }
    .pipeline-track { height: 8px; overflow: hidden; border-radius: 3px; background: #edf0f4; }
    .pipeline-bar { width: 0; height: 100%; border-radius: 3px; background: var(--blue); transition: width 180ms ease; }
    .pipeline-value { display: grid; gap: 4px; color: var(--muted); font-size: 9px; text-align: right; font-variant-numeric: tabular-nums; }
    .pipeline-value strong { color: var(--text); font-size: 10px; }
    .pipeline-value small { color: var(--subtle); font-size: 8px; }
    .pipeline-empty { padding: 28px 0; color: var(--muted); font-size: 11px; text-align: center; }

    .operations-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      gap: 14px;
    }
    .operations-grid[hidden] { display: none !important; }
    .operations-grid > .panel { margin-top: 0; }
    .operations-grid > .table-panel { display: flex; flex-direction: column; }
    .operations-grid > .table-panel .incident-list { flex: 1; }
    .operations-grid > .table-panel .empty-state { display: grid; height: 100%; place-items: center; padding: 16px; }
    .pagination-status { min-width: 74px; color: var(--muted); font-size: 10px; text-align: center; }
    .count-bubble {
      display: inline-flex;
      min-width: 24px;
      height: 20px;
      align-items: center;
      justify-content: center;
      padding: 0 7px;
      border-radius: 999px;
      color: #1849A9;
      background: #EEF4FF;
      font-size: 11px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }
    .incident-list { overflow: visible; }
    .incident-list.full-page { display: grid; grid-template-rows: repeat(8, minmax(0, 1fr)); }
    .incident-list.full-page .incident { align-content: center; }
    .incident-header, .incident {
      display: grid;
      grid-template-columns: 74px 70px minmax(0, 1fr) 64px;
      gap: 10px;
    }
    .incident-header {
      padding: 8px 13px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      background: var(--panel-soft);
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
    }
    .incident { padding: 10px 13px; border-bottom: 1px solid var(--line); font-size: 10px; }
    .incident:last-child { border-bottom: 0; }
    .incident-time, .incident-age { color: var(--muted); font-variant-numeric: tabular-nums; }
    .incident-type { font-weight: 700; }
    .incident-detail { margin-top: 3px; color: var(--muted); overflow-wrap: anywhere; }
    .incident-explorer-button {
      display: inline-flex;
      max-width: 100%;
      min-height: 24px;
      align-items: center;
      justify-content: center;
      padding: 3px 7px;
      overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      color: #1849A9;
      background: #fff;
      cursor: pointer;
      font-size: 9px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .incident-explorer-button:hover { border-color: #98A2B3; background: #F8FAFC; }
    .empty-state { padding: 46px 16px; color: var(--muted); font-size: 11px; text-align: center; }

    .error-banner { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #f1b7b2; border-radius: 6px; background: #fff1f0; color: #912018; font-size: 11px; }

    .query-builder .grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); align-items: start; gap: 14px; }
    .query-builder .left-column, .query-builder .right-column { display: grid; gap: 14px; }
    .query-builder .method { color: var(--green); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 800; }
    .query-builder .path { color: var(--code); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
    .query-builder .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
    .query-builder .bot-filter-control-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; margin-top: 16px; }
    .query-builder .bot-filter-control-groups .dashboard-control-group { align-content: start; }
    .query-builder label { display: grid; min-width: 0; gap: 5px; color: #344054; font-size: 10px; font-weight: 650; }
    .query-builder label.muted { opacity: .5; }
    .query-builder label.full, .query-builder .full { grid-column: 1 / -1; }
    .query-builder .label-row { display: flex; min-height: 20px; align-items: center; justify-content: space-between; gap: 8px; }
    .query-builder .hint, .query-builder .field-note { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.4; }
    .query-builder input, .query-builder select, .query-builder textarea { width: 100%; min-width: 0; min-height: 34px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 5px; outline: 0; background-color: #fff; color: var(--text); font-size: 11px; }
    .query-builder select { padding-right: 34px; }
    .query-builder textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5; }
    .query-builder input:focus, .query-builder select:focus, .query-builder textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
    .query-builder .segmented { display: flex; min-height: 34px; }
    .query-builder .segmented button { flex: 1; font-size: 11px; }
    .query-builder .segmented button.active {
      color: #173f8a;
      background: #fff;
      font-weight: 800;
      box-shadow: inset 0 -2px 0 #1d4ed8;
    }
    .query-builder .checkbox { display: flex; min-height: 34px; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; }
    .query-builder .checkbox input { width: 16px; min-height: 16px; accent-color: var(--blue); }
    .query-builder .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .query-builder .button { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; color: var(--text); cursor: pointer; font-size: 10px; }
    .query-builder .button:hover:not(:disabled), .query-builder .button:focus-visible { border-color: #98a2b3; background: #f8fafc; }
    .query-builder .button.primary { border-color: var(--blue); background: var(--blue); color: #fff; font-weight: 700; }
    .query-builder .button.primary:hover:not(:disabled), .query-builder .button.primary:focus-visible { border-color: #1d4ed8; background: #1d4ed8; }
    .query-builder .button:disabled { opacity: .6; cursor: wait; }
    .query-builder .copy-status { align-self: center; margin-left: auto; color: var(--green); font-size: 10px; font-weight: 700; white-space: nowrap; }
    .query-builder .copy-status.copy-error { color: var(--red); }
    .query-builder .alert { min-height: 18px; margin-top: 12px; color: var(--red); font-size: 11px; line-height: 1.4; }
    .query-builder .code-box { min-height: 95px; max-height: 520px; overflow: auto; padding: 13px; border-radius: var(--radius); background: #0b1220; color: #dbeafe; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
    .query-builder .formula-box { min-height: 58px; }
    .query-builder .result-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
    .query-builder .pill { display: inline-flex; min-height: 28px; align-items: center; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: 10px; }
    .query-builder .pill strong { margin-right: 5px; color: var(--text); }
    .query-builder .table { width: 100%; border-collapse: collapse; font-size: 10px; }
    .query-builder .table th, .query-builder .table td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
    .query-builder .table th { background: var(--panel-soft); color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
    .query-builder .table tbody tr:last-child td { border-bottom: 0; }
    .query-builder .table code { color: var(--code); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .query-builder .response-chart { margin-top: 18px; }
    .query-builder .response-chart-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
    .query-builder .response-chart-header h3 { margin: 0; color: var(--text); font-size: 13px; }
    .query-builder .response-chart-header p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
    .query-builder .response-chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; color: #475467; font-size: 10px; }
    .query-builder .response-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .query-builder .response-chart-legend i { width: 9px; height: 3px; border-radius: 2px; background: var(--series-color); }
    .query-builder .comparison-preview-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
    .query-builder .response-chart-wrap { position: relative; width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
    .query-builder .response-chart-wrap canvas { min-width: 320px; cursor: crosshair; }

    @media (max-width: 1180px) {
      .request-summary:not(.three-columns) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .request-summary:not(.three-columns) .request-summary-cell:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
      .request-summary:not(.three-columns) .request-summary-cell:nth-child(3) { border-right: 0; }
      .dashboard-control-groups { grid-template-columns: 1fr; }
      .operations-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 900px) {
      main { padding: 18px 16px 40px; }
      glimpse-reporting-window { display: block; min-width: 0; max-width: 100%; margin-left: 0; }
      .reporting-window-controls { width: 100%; justify-content: flex-start; margin-top: 10px; }
      .reporting-window-control { min-width: 0; max-width: 100%; }
      .reporting-window-control .segmented { display: flex; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
      .reporting-window-control .segmented button { flex: 0 0 auto; }
      .panel-header { display: block; }
      .panel-header > :last-child:not(:first-child) { margin-top: 10px; }
      .panel-header .legend { justify-content: flex-start; margin-top: 10px; }
      .query-builder .grid { grid-template-columns: 1fr; }
      .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .metric-cell:nth-child(2) { border-right: 0; }
      .metric-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .pipeline-row { grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
      .pipeline-value { grid-column: 2; display: flex; justify-content: flex-end; gap: 10px; }
      .incident-header, .incident { grid-template-columns: 62px 62px minmax(0, 1fr) 64px; }
    }
    @media (max-width: 640px) {
      .topbar { display: block; }
      .request-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .request-summary-cell { border-bottom: 1px solid var(--line); }
      .request-summary-cell:nth-child(even) { border-right: 0; }
      .request-summary-cell:nth-child(3) { border-right: 1px solid var(--line); }
      .request-summary-cell:nth-last-child(-n+2) { border-bottom: 0; }
      .request-summary.three-columns .request-summary-cell:last-child { grid-column: 1 / -1; border-bottom: 0; border-right: 0; }
      .dashboard-page .chart-wrap { height: 300px; padding-right: 2px; padding-left: 2px; }
      .dashboard-page .chart-wrap.small { height: 200px; }
      .dashboard-control-groups { padding-inline: 12px; }
      .query-builder .form-grid { grid-template-columns: 1fr; }
      .query-builder .bot-filter-control-groups { grid-template-columns: 1fr; }
      .query-builder label.full, .query-builder .full { grid-column: auto; }
      .query-builder .button { width: 100%; }
      .query-builder .copy-status { display: block; margin: 0 0 6px; text-align: left; }
      .query-builder .response-chart-header { display: block; }
      .query-builder .response-chart-legend { justify-content: flex-start; margin-top: 8px; }
      .table-footer { align-items: flex-start; flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      .chart-spinner { animation-duration: 1400ms; }
    }

    .peer-distribution-chart { display: grid; gap: 12px; padding: 12px 17px 17px; }
    .peer-distribution-row { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 48px; align-items: center; gap: 10px; font-size: 10px; }
    .peer-distribution-label { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .peer-distribution-track { height: 12px; overflow: hidden; border-radius: 2px; background: #edf0f4; }
    .peer-distribution-bar { display: block; width: var(--bar-width); height: 100%; border-radius: 0 2px 2px 0; background: var(--bar-color, #ea392c); }
    .peer-distribution-percent { color: #344054; font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
    .peer-distribution-empty { padding: 22px 0; color: var(--muted); font-size: 10px; text-align: center; }

    .request-summary.four-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .endpoint-distribution { display: grid; gap: 5px; margin-top: 8px; }
    .endpoint-distribution .peer-distribution-row { grid-template-columns: minmax(0, 1fr) minmax(30px, 1fr) 36px; gap: 6px; font-size: 9px; }
    .endpoint-distribution .peer-distribution-track { height: 9px; }
    .endpoint-pill { background: color-mix(in srgb, var(--endpoint-color) 15%, white); color: var(--text); gap: 5px; white-space: nowrap; text-transform: none; }
    .endpoint-pill .legend-dot { background: var(--endpoint-color); }
    @media (max-width: 1100px) {
      .request-summary.four-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .request-summary.four-columns .request-summary-cell { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
      .request-summary.four-columns .request-summary-cell:nth-child(odd) { border-right: 1px solid var(--line); }
      .request-summary.four-columns .request-summary-cell:nth-child(even) { border-right: 0; }
      .request-summary.four-columns .request-summary-cell:nth-last-child(-n+2) { border-bottom: 0; }
    }

    .peer-filter-field { display: grid; gap: 3px; }
    .peer-filter-field > span { color: var(--muted); font-size: 9px; font-weight: 650; }
    .peer-filter-field > .control-input { height: 32px; min-height: 32px; }