.metrics-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-5);
      padding-top: var(--space-5);
    }

    .metrics-grid {
      gap: var(--space-6);
    }



    .metrics-toolbar__filters {
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }

    .metrics-search {
      width: 100%;
      border: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
      background: color-mix(in oklab, var(--surface) 55%, transparent);
      border-radius: 99px;
      padding: 8px 12px 8px calc(var(--space-4) + 18px);
      transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
      font-size: var(--size-13);
      color: var(--text);
    }

    .metrics-search:focus {
      border-color: color-mix(in oklab, var(--accent-metrics) 60%, transparent);
      background: color-mix(in oklab, var(--surface) 92%, transparent);
      box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-metrics) 35%, transparent);
      outline: none;
    }

    .metrics-search::placeholder {
      color: color-mix(in oklab, var(--text-muted) 80%, transparent);
    }

    .metrics-search-icon {
      position: absolute;
      width: 16px;
      height: 16px;
      left: var(--space-3);
      top: 50%;
      transform: translateY(-50%);
      color: color-mix(in oklab, var(--text-muted) 70%, transparent);
      pointer-events: none;
    }

    .metrics-search-wrap {
      position: relative;
      flex: 1;
      min-width: 140px;
    }

    .metrics-chips {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      width: 100%;
    }

    .metrics-chip {
      border: none;
      background: transparent;
      color: color-mix(in oklab, var(--text) 80%, transparent);
      border-radius: 10px;
      padding: 6px 12px;
      font-size: var(--size-12);
      cursor: pointer;
      transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
    }

    .metrics-chip[aria-pressed="true"] {
      background: color-mix(in oklab, var(--border) 40%, transparent);
      color: var(--text);
    }

    .metrics-chip:hover {
      background: color-mix(in oklab, var(--border) 30%, transparent);
      transform: translateY(-1px);
    }

    .metrics-chip:focus-visible {
      outline: 2px solid color-mix(in oklab, var(--accent-metrics) 50%, transparent);
      outline-offset: 2px;
    }

    .metrics-row {
      border: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
      border-radius: var(--radius-lg);
      background: color-mix(in oklab, var(--surface-2) 94%, transparent);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
      transition: box-shadow 160ms var(--ease), border-color 160ms var(--ease);
    }

    .metrics-row:hover {
      transform: translateY(0);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
      border-color: color-mix(in oklab, var(--border) 100%, transparent);
    }

    .metrics-row__inner {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto auto;
      column-gap: var(--space-5);
      row-gap: var(--space-4);
      padding: var(--space-5);
      align-items: start;
    }

    .metrics-label--left {
      grid-column: 1;
      grid-row: 1;
    }

    .metrics-input--left {
      grid-column: 1;
      grid-row: 2;
    }

    .metrics-label--right {
      grid-column: 2;
      grid-row: 1;
    }

    .metrics-input--right {
      grid-column: 2;
      grid-row: 2;
    }

    @media (max-width: 720px) {
      .metrics-row__inner {
        grid-template-columns: 1fr;
        grid-template-rows: none;
      }

      .metrics-label--left,
      .metrics-input--left,
      .metrics-label--right,
      .metrics-input--right {
        grid-column: 1;
        grid-row: auto;
      }
    }

    .metrics-label {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 0.35em;
      font-size: var(--text-base);
      font-weight: var(--weight-medium);
      color: color-mix(in oklab, var(--text) 88%, transparent);
      letter-spacing: 0.01em;
    }

    .metrics-label__name {
      font-weight: var(--weight-semibold);
    }

    .metrics-label__unit {
      font-weight: var(--weight-regular);
      opacity: 0.75;
      letter-spacing: 0.01em;
    }

    .metrics-input {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .metrics-input .wa-input {
      flex: 1;
      min-width: 0;
      border-radius: var(--radius);
      border: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
      background: color-mix(in oklab, var(--surface) 94%, transparent);
      transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease);
    }

    .metrics-input .wa-input:focus {
      border-color: color-mix(in oklab, var(--accent-metrics) 60%, transparent);
      box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-metrics) 35%, transparent);
      background: color-mix(in oklab, var(--surface) 98%, transparent);
      outline: none;
    }

    .metrics-copy {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid transparent;
      background: transparent;
      color: color-mix(in oklab, var(--text) 65%, transparent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
      cursor: pointer;
    }

    .metrics-copy:hover,
    .metrics-copy:focus-visible {
      color: color-mix(in oklab, var(--accent-metrics) 80%, var(--text) 20%);
      border-color: color-mix(in oklab, var(--accent-metrics) 35%, transparent);
      background: color-mix(in oklab, var(--accent-metrics) 12%, transparent);
      transform: translateY(-1px);
    }

    .metrics-copy[data-feedback="copied"] {
      color: var(--accent-info);
      border-color: color-mix(in oklab, var(--accent-info) 65%, transparent);
    }

    .metrics-copy[data-feedback="error"] {
      color: var(--status-warning, var(--accent-metrics));
      border-color: color-mix(in oklab, var(--status-warning, var(--accent-metrics)) 60%, transparent);
    }

    .metrics-copy svg {
      width: 18px;
      height: 18px;
    }

    @media (max-width: 720px) {
      .metrics-grid {
        grid-template-columns: 1fr;
      }

      /* Redesign mobile toolbar to be a panel instead of a pill */
      .metrics-toolbar.sticky-bar {
        border-radius: var(--radius-lg);
        width: calc(100% - var(--space-4) * 2);
        /* Full width minus margins */
        max-width: none;
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-3);
        gap: var(--space-3);
      }

      .metrics-toolbar__filters {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        width: 100%;
      }

      .metrics-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        mask-image: linear-gradient(to right, black 90%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
      }

      .metrics-chips::-webkit-scrollbar {
        display: none;
      }

      .metrics-chip {
        white-space: nowrap;
        flex-shrink: 0;
      }
    }