:root {
      --bg: #080d17;
      --surface: #111827;
      --surface-2: #182234;
      --surface-3: #202d43;
      --line: #2b3a52;
      --line-soft: rgba(91, 112, 143, .22);
      --text: #edf4ff;
      --muted: #93a4bc;
      --muted-2: #65758d;
      --blue: #3b82f6;
      --cyan: #22d3ee;
      --green: #22c55e;
      --amber: #f59e0b;
      --red: #ef4444;
      --purple: #a78bfa;
      --sidebar: 248px;
      --shadow: 0 12px 34px rgba(0, 0, 0, .24);
    }

    * { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; margin: 0; }
    body {
      overflow: hidden;
      background: var(--bg);
      color: var(--text);
      font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 14px;
      line-height: 1.45;
    }
    button, input, select { font: inherit; }
    button { color: inherit; }
    a { color: inherit; text-decoration: none; }
    strong { font-weight: 700; }
    code, .mono { font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; }
    .hidden { display: none !important; }
    .app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); height: 100vh; }

    .sidebar {
      min-width: 0;
      border-right: 1px solid var(--line);
      background: linear-gradient(180deg, #111a29 0%, #0c1320 100%);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .brand {
      height: 72px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      gap: 11px;
      border-bottom: 1px solid var(--line);
    }
    .brand-mark {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(34, 211, 238, .42);
      border-radius: 9px;
      background: linear-gradient(145deg, rgba(34, 211, 238, .17), rgba(59, 130, 246, .09));
      box-shadow: 0 0 20px rgba(34, 211, 238, .12);
      color: var(--cyan);
      font-weight: 900;
      letter-spacing: -.04em;
    }
    .brand-name { font-size: 15px; font-weight: 800; letter-spacing: .08em; }
    .brand-sub { margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
    .live-pill {
      margin-left: auto;
      padding: 3px 6px;
      border: 1px solid rgba(34, 197, 94, .38);
      border-radius: 5px;
      background: rgba(34, 197, 94, .1);
      color: #86efac;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .08em;
    }
    .nav {
      flex: 1;
      padding: 13px 9px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #334155 transparent;
    }
    .nav-button {
      width: 100%;
      min-height: 38px;
      margin: 1px 0;
      padding: 0 11px;
      display: flex;
      align-items: center;
      gap: 11px;
      border: 0;
      border-left: 3px solid transparent;
      border-radius: 6px;
      background: transparent;
      color: #aebbd0;
      cursor: pointer;
      text-align: left;
      transition: background .14s ease, color .14s ease, border-color .14s ease;
    }
    .nav-button:hover { background: rgba(59, 130, 246, .08); color: #e8f2ff; }
    .nav-button.active {
      border-left-color: var(--blue);
      background: linear-gradient(90deg, rgba(59, 130, 246, .16), rgba(59, 130, 246, .04));
      color: #fff;
    }
    .nav-icon { width: 18px; color: #6f86a6; text-align: center; font-size: 13px; }
    .nav-button.active .nav-icon { color: #60a5fa; }
    .sidebar-foot {
      padding: 12px 14px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 11px;
    }

    .main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
    .truth-banner {
      min-height: 30px;
      padding: 6px 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid rgba(34, 197, 94, .24);
      background: rgba(21, 128, 61, .12);
      color: #86efac;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .09em;
      text-align: center;
    }
    .truth-banner.warning { border-bottom-color: rgba(245, 158, 11, .3); background: rgba(120, 72, 7, .18); color: #fbbf24; }
    .truth-banner.error { border-bottom-color: rgba(239, 68, 68, .32); background: rgba(127, 29, 29, .2); color: #fca5a5; }
    .fatal-banner { padding: 14px; background: #7f1d1d; color: #fff; font-weight: 800; text-align: center; }
    .topbar {
      min-height: 66px;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border-bottom: 1px solid var(--line);
      background: rgba(17, 24, 39, .94);
    }
    .page-title { margin: 0; font-size: 19px; font-weight: 760; letter-spacing: -.015em; }
    .page-subtitle { margin-top: 2px; color: var(--muted); font-size: 11px; }
    .top-actions { display: flex; align-items: center; gap: 8px; }
    .clock { margin-right: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; }
    .button {
      min-height: 32px;
      padding: 0 11px;
      border: 1px solid #34455f;
      border-radius: 6px;
      background: #172236;
      color: #d8e6f7;
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
    }
    .button:hover { border-color: #4d6a91; background: #1b2a42; }
    .button.primary { border-color: rgba(59, 130, 246, .5); background: rgba(59, 130, 246, .16); color: #93c5fd; }
    .button:focus-visible, .nav-button:focus-visible, .horizon-button:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
    }
    .content { flex: 1; min-height: 0; overflow: hidden; padding: 10px 12px 12px; }
    .page { width: 100%; max-width: none; height: 100%; margin: 0; overflow: hidden; }

    .fact-strip {
      margin-bottom: 13px;
      padding: 9px 12px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 16px;
      border: 1px solid rgba(239, 68, 68, .24);
      border-left: 3px solid var(--red);
      border-radius: 7px;
      background: rgba(127, 29, 29, .11);
      font-size: 11px;
    }
    .fact-strip .label { color: #fca5a5; font-weight: 800; letter-spacing: .05em; }
    .fact-strip .fact { color: #c7d5e8; }
    .fact-strip .fact strong { color: #fff; }
    .grid { display: grid; gap: 12px; }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overview-main { grid-template-columns: minmax(0, 1.8fr) minmax(280px, .8fr); }
    .panel, .stat-card {
      min-width: 0;
      border: 1px solid var(--line-soft);
      border-radius: 8px;
      background: linear-gradient(145deg, rgba(24, 34, 52, .96), rgba(14, 22, 35, .96));
      box-shadow: var(--shadow);
    }
    .panel { padding: 13px; }
    .panel-head {
      margin-bottom: 11px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .panel-title {
      margin: 0;
      color: #b9c7da;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .075em;
      text-transform: uppercase;
    }
    .panel-note { color: var(--muted-2); font-size: 10px; }
    .stat-card { position: relative; min-height: 91px; padding: 12px 13px; overflow: hidden; }
    .stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent, var(--blue)); }
    .accent-cyan { --accent: var(--cyan); }
    .accent-green { --accent: var(--green); }
    .accent-purple { --accent: var(--purple); }
    .accent-amber { --accent: var(--amber); }
    .accent-blue { --accent: var(--blue); }
    .accent-red { --accent: var(--red); }
    .stat-label { color: var(--muted); font-size: 10px; font-weight: 760; letter-spacing: .075em; text-transform: uppercase; }
    .stat-value { margin-top: 6px; display: flex; align-items: baseline; gap: 7px; font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
    .stat-meta { margin-top: 3px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .up { color: #4ade80; }
    .down { color: #fb7185; }
    .amber { color: #fbbf24; }
    .blue { color: #60a5fa; }
    .cyan { color: #67e8f9; }
    .purple { color: #c4b5fd; }
    .muted { color: var(--muted); }
    .tiny { font-size: 10px; }
    .status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--muted-2); }
    .status-dot.green { background: var(--green); box-shadow: 0 0 10px rgba(34, 197, 94, .68); }
    .status-dot.amber { background: var(--amber); box-shadow: 0 0 9px rgba(245, 158, 11, .55); }
    .status-dot.red { background: var(--red); box-shadow: 0 0 9px rgba(239, 68, 68, .5); }
    .status-dot.blue { background: var(--blue); box-shadow: 0 0 9px rgba(59, 130, 246, .55); }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 7px;
      border: 1px solid #34445e;
      border-radius: 999px;
      background: rgba(42, 56, 79, .42);
      color: #c8d5e7;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .055em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .badge.green { border-color: rgba(34, 197, 94, .35); background: rgba(34, 197, 94, .1); color: #86efac; }
    .badge.amber { border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .1); color: #fcd34d; }
    .badge.red { border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .1); color: #fca5a5; }
    .badge.blue { border-color: rgba(59, 130, 246, .4); background: rgba(59, 130, 246, .12); color: #93c5fd; }

    .horizons { margin: 12px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
    .horizon-button {
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid var(--line-soft);
      border-radius: 7px;
      background: rgba(17, 27, 43, .9);
      cursor: pointer;
      text-align: left;
    }
    .horizon-button:hover { border-color: #3a577e; }
    .horizon-button.active { border-color: rgba(34, 211, 238, .52); background: rgba(34, 211, 238, .08); }
    .horizon-name { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
    .horizon-direction { margin-top: 4px; font-size: 15px; font-weight: 800; }
    .horizon-confidence { margin-top: 1px; color: var(--muted); font-size: 9px; }

    .chart-wrap { height: 230px; min-height: 180px; position: relative; overflow: hidden; }
    .chart-wrap svg { width: 100%; height: 100%; display: block; }
    .chart-grid line { stroke: rgba(91, 112, 143, .17); stroke-width: 1; }
    .chart-area { fill: url(#chartFill); }
    .chart-line { fill: none; stroke: var(--cyan); stroke-width: 2.2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(34, 211, 238, .35)); }
    .chart-target { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 5 5; }
    .chart-label { fill: #8192ab; font: 9px "Segoe UI", sans-serif; }
    .chart-label-end { text-anchor: end; }
    .chart-marker { fill: var(--cyan); stroke: #dffbff; stroke-width: 1.3; }
    .chart-legend { position: absolute; top: 3px; left: 3px; display: flex; gap: 10px; color: var(--muted); font-size: 9px; }
    .legend-line { display: inline-block; width: 15px; margin-right: 5px; border-top: 2px solid var(--cyan); vertical-align: middle; }
    .legend-line.target { border-color: var(--amber); border-top-style: dashed; }
    .chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 11px; pointer-events: none; }

    .source-list, .kv-list, .event-list { display: grid; gap: 7px; }
    .source-row, .kv-row {
      min-width: 0;
      padding-bottom: 7px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--line-soft);
    }
    .source-row:last-child, .kv-row:last-child { padding-bottom: 0; border-bottom: 0; }
    .source-name { font-size: 11px; font-weight: 700; }
    .source-role { margin-top: 1px; color: var(--muted); font-size: 9px; }
    .evidence-counts { margin-top: 12px; padding-top: 11px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); }
    .mini-metric { text-align: center; }
    .mini-metric strong { display: block; color: #e7f0fd; font-size: 16px; }
    .mini-metric span { color: var(--muted); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }

    .meter-row { display: grid; grid-template-columns: 130px minmax(90px, 1fr) 58px; align-items: center; gap: 10px; }
    .meter-row + .meter-row { margin-top: 9px; }
    .meter-label { color: #b9c7da; font-size: 10px; }
    .meter { width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 99px; background: #27344a; appearance: none; }
    .meter::-webkit-progress-bar { border-radius: 99px; background: #27344a; }
    .meter::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
    .meter::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
    .meter.purple::-webkit-progress-value { background: linear-gradient(90deg, #7c3aed, var(--purple)); }
    .meter.purple::-moz-progress-bar { background: linear-gradient(90deg, #7c3aed, var(--purple)); }
    .meter.green::-webkit-progress-value { background: linear-gradient(90deg, #15803d, #4ade80); }
    .meter.green::-moz-progress-bar { background: linear-gradient(90deg, #15803d, #4ade80); }
    .meter-value { color: #dce8f7; font-size: 10px; text-align: right; }

    .agent-strip { margin-top: 12px; grid-template-columns: 1.2fr 1fr 1fr; }
    .agent-card { padding: 11px; }
    .agent-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .agent-name { font-size: 11px; font-weight: 750; }
    .agent-reading { margin-top: 8px; display: flex; align-items: flex-end; gap: 9px; }
    .agent-arrow { color: #4ade80; font-size: 22px; line-height: 1; }
    .agent-summary { color: var(--muted); font-size: 9px; }
    .activity-line { margin-top: 7px; color: #c7d5e8; font-size: 10px; }

    table { width: 100%; border-collapse: collapse; font-size: 10px; }
    th { padding: 9px 10px; background: rgba(35, 48, 69, .75); color: var(--muted); font-size: 9px; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
    td { padding: 9px 10px; border-top: 1px solid var(--line-soft); color: #cbd7e8; vertical-align: middle; }
    tbody tr:hover { background: rgba(59, 130, 246, .035); }
    .table-wrap { overflow: auto; border: 1px solid var(--line-soft); border-radius: 7px; }
    .table-wrap table { min-width: 670px; }
    .wide-table { min-width: 520px !important; }
    .direction { font-weight: 800; }

    .log-toolbar { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
    .filter-button { min-height: 27px; padding: 0 9px; }
    .filter-button.active { border-color: rgba(59, 130, 246, .55); background: rgba(59, 130, 246, .14); color: #93c5fd; }
    .event {
      padding: 8px 9px;
      display: grid;
      grid-template-columns: 64px 72px minmax(0, 1fr);
      gap: 9px;
      border: 1px solid var(--line-soft);
      border-radius: 6px;
      background: rgba(12, 20, 33, .65);
      font-size: 9px;
    }
    .event-time { color: var(--muted); }
    .event-level { font-weight: 800; }
    .event-text { color: #ccd9e9; }

    .command {
      margin-top: 8px;
      padding: 9px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid var(--line-soft);
      border-radius: 6px;
      background: #0a111e;
    }
    .command code { color: #a7f3d0; font-size: 10px; overflow-wrap: anywhere; }
    .copy-button { flex: 0 0 auto; min-height: 26px; }
    .info-box { padding: 12px; border: 1px solid var(--line-soft); border-left: 3px solid var(--blue); border-radius: 7px; background: rgba(59, 130, 246, .06); color: #c6d4e7; font-size: 11px; }
    .warning-box { border-left-color: var(--amber); background: rgba(245, 158, 11, .055); }
    .danger-box { border-left-color: var(--red); background: rgba(239, 68, 68, .055); }
    .empty { padding: 26px; color: var(--muted); text-align: center; }
    .section-stack > * + * { margin-top: 12px; }
    .section-gap { margin-top: 12px; }
    .split-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .footer-truth { margin-top: 12px; color: var(--muted-2); font-size: 9px; text-align: right; }

    /* Wide-screen control-room layout: one viewport, no document scrolling.
       Dense secondary tables scroll inside their own bounded panels. */
    @media (min-width: 1280px) and (min-height: 720px) {
      #page-overview {
        display: grid;
        grid-template-rows:
          auto auto auto minmax(160px, 1.55fr) minmax(78px, .65fr)
          minmax(115px, 1fr) minmax(105px, .9fr);
        gap: 8px;
      }
      #page-overview > * { min-height: 0; margin-top: 0; margin-bottom: 0; }
      #page-overview > .grid { min-height: 0; }
      #page-overview .stat-card { min-height: 66px; padding: 8px 11px; }
      #page-overview .stat-value { margin-top: 3px; font-size: 18px; }
      #page-overview .horizons { margin: 0; }
      #page-overview .horizon-button { padding: 6px 9px; }
      #page-overview .overview-main,
      #page-overview .agent-strip { height: 100%; margin-top: 0; }
      #page-overview .panel { height: 100%; padding: 9px 11px; overflow: hidden; }
      #page-overview .panel-head { margin-bottom: 7px; }
      #page-overview .chart-wrap { height: calc(100% - 46px); min-height: 90px; }
      #page-overview .table-wrap { max-height: calc(100% - 25px); overflow: auto; }
      #page-overview th, #page-overview td { padding: 5px 7px; }
      #page-overview .source-list, #page-overview .kv-list, #page-overview .event-list { gap: 4px; }
      #page-overview .source-row, #page-overview .kv-row { padding-bottom: 4px; }
      #page-overview .evidence-counts { margin-top: 6px; padding-top: 6px; }
      #page-overview .footer-truth { display: none; }
    }

    @media (max-width: 1180px) {
      .content { overflow-y: auto; }
      .page { height: auto; overflow: visible; }
      .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .overview-main { grid-template-columns: 1fr; }
      .agent-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 820px) {
      :root { --sidebar: 74px; }
      .brand { justify-content: center; padding: 0 8px; }
      .brand-copy, .live-pill, .nav-label, .sidebar-foot span:not(.status-dot) { display: none; }
      .nav-button { justify-content: center; padding: 0; }
      .nav-icon { width: auto; font-size: 16px; }
      .topbar { padding: 9px 12px; }
      .content { padding: 12px; }
      .clock { display: none; }
      .grid-3, .grid-2 { grid-template-columns: 1fr; }
      .horizons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .agent-strip { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      .grid-4 { grid-template-columns: 1fr; }
      .top-actions .button:not(.primary) { display: none; }
      .horizons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .fact-strip { align-items: flex-start; flex-direction: column; }
      .meter-row { grid-template-columns: 100px minmax(70px, 1fr) 48px; }
    }