:root {
      --bg: #0d1117;
      --card: #161b22;
      --card-2: #11161d;
      --text: #e6edf3;
      --muted: #8b949e;
      --border: #2d333b;
      --purple: #7c3aed;
      --purple-soft: rgba(124, 58, 237, 0.25);
      --teal: #06b6d4;
      --teal-soft: rgba(6, 182, 212, 0.24);
      --green: #22c55e;
      --amber: #f59e0b;
      --red: #ef4444;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--text);
      font: 14px/1.45 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body {
      padding: 16px;
    }

    .mono {
      font-family: "Courier New", Courier, monospace;
      font-variant-numeric: tabular-nums;
    }

    .container {
      max-width: 1500px;
      margin: 0 auto;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 14px;
    }

    .title h1 {
      margin: 0;
      font-size: 28px;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .title p,
    .statusline,
    .empty-state {
      color: var(--muted);
    }

    .title p {
      margin: 4px 0 0;
    }

    .topbar-right {
      text-align: right;
      min-width: 220px;
    }

    .statusline {
      font-size: 12px;
      margin-top: 4px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 12px;
    }

    .card,
    .panel {
      background: var(--card);
      border: 1px solid var(--border);
      padding: 12px;
      border-radius: 8px;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.01) inset;
    }

    .card-label {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 6px;
    }

    .card-value {
      font-size: 28px;
      font-weight: 700;
      line-height: 1.1;
    }

    .card-subgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 8px;
    }

    .card-sub {
      background: var(--card-2);
      border: 1px solid var(--border);
      padding: 8px;
      border-radius: 6px;
    }

    .card-sub small {
      display: block;
      color: var(--muted);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 11px;
    }

    .filters {
      display: grid;
      grid-template-columns: 1.1fr 1fr 1fr auto;
      gap: 12px;
      align-items: end;
      margin-bottom: 12px;
    }

    .filter-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .filter-label,
    .section-title,
    .table-meta {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .gran-btn {
      background: #21262d;
      border: 1px solid #30363d;
      color: #8b949e;
      font-size: 11px;
      padding: 2px 8px;
      cursor: pointer;
      border-radius: 3px;
      margin-right: 4px;
    }
    .gran-btn.active {
      background: #7c3aed22;
      border-color: #7c3aed;
      color: #c4b5fd;
    }
    .gran-btn:hover { color: #e6edf3; }

    .date-row,
    .checkbox-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    input[type="date"], input[type="datetime-local"] {
      background: #0f141b;
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 8px 10px;
      min-height: 36px;
    }

    label.chk {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      background: #0f141b;
      border: 1px solid var(--border);
      border-radius: 6px;
      cursor: pointer;
      user-select: none;
      color: var(--text);
    }

    input[type="checkbox"] {
      accent-color: var(--purple);
    }

    button {
      background: linear-gradient(135deg, var(--purple), var(--teal));
      color: white;
      border: none;
      border-radius: 6px;
      padding: 9px 12px;
      min-height: 36px;
      cursor: pointer;
      font-weight: 600;
    }

    button.secondary,
    th button {
      background: #0f141b;
      color: var(--text);
      border: 1px solid var(--border);
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px;
    }

    .grid-1 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-bottom: 12px;
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .panel h2 {
      margin: 0;
      font-size: 16px;
    }

    .canvas-wrap {
      position: relative;
      height: 260px;
    }

    .canvas-wrap.tall {
      height: 320px;
    }

    .table-wrap {
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 8px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 920px;
    }

    th, td {
      padding: 9px 10px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      vertical-align: middle;
    }

    th {
      position: sticky;
      top: 0;
      background: #121821;
      z-index: 1;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
    }

    th button {
      width: 100%;
      text-align: left;
      padding: 0;
      border: none;
      background: transparent;
      color: inherit;
      font: inherit;
      text-transform: inherit;
      letter-spacing: inherit;
    }

    tbody tr:hover {
      background: rgba(124, 58, 237, 0.08);
    }

    .pill {
      display: inline-block;
      border: 1px solid var(--border);
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 12px;
      background: #0f141b;
    }

    .provider-anthropic { color: #c084fc; }
    .provider-bailian { color: #5eead4; }
    .provider-openai { color: #fbbf24; }

    .empty-state {
      padding: 20px 8px 8px;
      text-align: center;
    }

    .footer-note {
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
    }

    @media (max-width: 1100px) {
      .cards,
      .filters,
      .grid-2 {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 760px) {
      body { padding: 12px; }
      .topbar,
      .cards,
      .filters,
      .grid-2 {
        grid-template-columns: 1fr;
        display: grid;
      }
      .topbar-right {
        text-align: left;
        min-width: 0;
      }
      .canvas-wrap,
      .canvas-wrap.tall {
        height: 240px;
      }
    }

/* New elements */
.card-tokens {
  font-size: 12px;
  margin-top: 3px;
  opacity: 0.85;
  font-family: "Courier New", Courier, monospace;
}

.panel-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-hint {
  color: #8b949e;
  font-size: 11px;
  text-align: right;
  margin-top: 4px;
  opacity: 0.7;
}

.toolbar-label {
  font-size: 11px;
  color: #8b949e;
  margin-right: 4px;
}

.toolbar-sep {
  margin: 0 10px;
  color: #30363d;
}

.reset-zoom-btn {
  font-size: 11px !important;
  padding: 2px 8px !important;
}