:root {
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-radius: 8px;
  --ui-control-height: 40px;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f6f8f9;
  --ui-ink: #17252b;
  --ui-muted: #60727a;
  --ui-line: #d7e1e4;
  --ui-accent: #137f79;
  --ui-info: #2563a8;
  --ui-warning: #a76600;
}

.official-metrics-cards {
  display: none;
}

body[data-route="secondhand-listing"] .official-panel > .panel-title {
  margin-bottom: var(--ui-space-4);
}

body[data-route="secondhand-listing"] .official-panel > .panel-title .panel-tools {
  align-items: center;
  gap: var(--ui-space-2);
}

body[data-route="secondhand-listing"] .official-panel > .panel-title input,
body[data-route="secondhand-listing"] .official-panel > .panel-title select,
body[data-route="secondhand-listing"] .official-panel > .panel-title .button,
body[data-route="secondhand-listing"] .official-trend-controls select {
  min-height: var(--ui-control-height);
  border-radius: 6px;
}

body[data-route="secondhand-listing"] .official-trend-wrap {
  margin-bottom: var(--ui-space-4);
  padding: var(--ui-space-4);
}

body[data-route="secondhand-listing"] .official-trend-wrap > .section-note {
  align-items: flex-start;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-3);
}

body[data-route="secondhand-listing"] .official-trend-wrap > .section-note > span {
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.5;
}

body[data-route="secondhand-listing"] #officialTrendChart {
  height: 300px;
}

body[data-theme="light"][data-route="secondhand-listing"] .official-trend-wrap,
body[data-theme="light"][data-route="secondhand-listing"] .monthly-table-wrap {
  border-color: var(--ui-line);
  background: var(--ui-surface);
}

body[data-theme="light"][data-route="secondhand-listing"] .official-trend-line-toggles label {
  border-color: var(--ui-line);
  background: var(--ui-surface-subtle);
  color: var(--ui-ink);
}

body[data-theme="light"][data-route="secondhand-listing"] #officialTrendChart line:not(.axis-line) {
  stroke: #dfe7e9;
}

body[data-theme="dark"][data-route="secondhand-listing"] {
  --ui-surface: #0b1b23;
  --ui-surface-subtle: #102630;
  --ui-ink: #eef7f7;
  --ui-muted: #a7bbc1;
  --ui-line: #29444d;
  --ui-accent: #3dd9cb;
}

body[data-theme="dark"][data-route="secondhand-listing"] #officialTrendChart line:not(.axis-line) {
  stroke: #29444d;
}

@media (max-width: 640px) {
  :root {
    --ui-control-height: 44px;
  }

  body[data-route="secondhand-listing"] .official-panel {
    padding: var(--ui-space-4);
  }

  body[data-route="secondhand-listing"] .official-panel > .panel-title .panel-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
  }

  body[data-route="secondhand-listing"] .official-panel > .panel-title input,
  body[data-route="secondhand-listing"] .official-panel > .panel-title select,
  body[data-route="secondhand-listing"] .official-panel > .panel-title .button {
    width: 100%;
    min-width: 0;
  }

  body[data-route="secondhand-listing"] .official-trend-wrap {
    padding: var(--ui-space-3);
  }

  body[data-route="secondhand-listing"] .official-trend-head,
  body[data-route="secondhand-listing"] .official-trend-controls {
    gap: var(--ui-space-2);
  }

  body[data-route="secondhand-listing"] .official-trend-controls select {
    flex: 1 1 100%;
    width: 100%;
  }

  body[data-route="secondhand-listing"] .official-trend-line-toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  body[data-route="secondhand-listing"] .official-trend-line-toggles label {
    justify-content: center;
    min-height: var(--ui-control-height);
    border-radius: 6px;
  }

  body[data-route="secondhand-listing"] #officialTrendChart {
    height: 280px;
  }

  body[data-route="secondhand-listing"] .monthly-table-wrap {
    display: none;
  }

  body[data-route="secondhand-listing"] .official-metrics-cards {
    display: grid;
    gap: var(--ui-space-3);
  }

  body[data-route="secondhand-listing"] .official-metric-card {
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-ink);
  }

  body[data-route="secondhand-listing"] .official-metric-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-4);
    border-bottom: 1px solid var(--ui-line);
    background: var(--ui-surface-subtle);
  }

  body[data-route="secondhand-listing"] .official-metric-card-head time {
    font-size: 16px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
  }

  body[data-route="secondhand-listing"] .official-metric-card-head span {
    color: var(--ui-muted);
    font-size: 12px;
  }

  body[data-route="secondhand-listing"] .official-stock-row {
    padding: var(--ui-space-4);
  }

  body[data-route="secondhand-listing"] .official-stock-row + .official-stock-row {
    border-top: 1px solid var(--ui-line);
  }

  body[data-route="secondhand-listing"] .official-stock-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-3);
  }

  body[data-route="secondhand-listing"] .official-stock-heading strong {
    color: var(--ui-accent);
    font-size: 15px;
  }

  body[data-route="secondhand-listing"] .official-stock-heading span,
  body[data-route="secondhand-listing"] .official-stock-row small {
    color: var(--ui-muted);
    font-size: 12px;
  }

  body[data-route="secondhand-listing"] .official-stock-row dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-3);
    margin: 0;
  }

  body[data-route="secondhand-listing"] .official-stock-row dl > div {
    min-width: 0;
  }

  body[data-route="secondhand-listing"] .official-stock-row dt {
    margin-bottom: var(--ui-space-1);
    color: var(--ui-muted);
    font-size: 12px;
  }

  body[data-route="secondhand-listing"] .official-stock-row dd {
    margin: 0;
    color: var(--ui-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  body[data-route="secondhand-listing"] .official-stock-row small {
    display: block;
    margin-top: var(--ui-space-3);
  }

  body[data-route="secondhand-listing"] .official-metrics-empty {
    margin: 0;
    padding: var(--ui-space-5) var(--ui-space-4);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-muted);
    text-align: center;
  }
}