body.cost-page { background: #f9fafb; color: #111827; }
.cost-page .site-header, .cost-page footer { background: #f9fafb; border-color: #e5e7eb; }
.cost-page .site-header { padding: 0 40px; }
.cost-page footer a { color: #111827; }
.cost-main { max-width: 1380px; margin: 0 auto; padding: 40px; }
.cost-controls { margin-bottom: 40px; }
.cost-controls h1 { font-size: 36px; line-height: 1; letter-spacing: -0.04em; margin: 0 0 12px; }
.cost-lede { color: #6b7280; font-size: 15px; margin: 0 0 28px; }
.cost-inputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 720px; }
.cost-field { display: flex; flex-direction: column; gap: 8px; }
.cost-field > span { font: 500 11px 'IBM Plex Mono', monospace; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.cost-token-input { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; }
.cost-token-input:focus-within { outline: 2px solid #2563eb; outline-offset: -1px; border-color: #2563eb; }
.cost-token-input input[type="number"] { width: 100%; border: 0; outline: 0; padding: 12px 0; background: transparent; color: #111827; font: 500 16px 'IBM Plex Sans', sans-serif; }
.cost-token-input b { color: #6b7280; font: 500 13px 'IBM Plex Mono', monospace; }
.cost-slider-wrap { display: flex; align-items: center; gap: 12px; }
.cost-slider-wrap input[type="range"] { flex: 1; accent-color: #2563eb; }
.cost-slider-wrap output { font: 600 14px 'IBM Plex Mono', monospace; color: #111827; min-width: 44px; text-align: right; }
.cost-note { margin: 16px 0 0; font: 11px 'IBM Plex Mono', monospace; color: #9ca3af; max-width: 720px; }
.cost-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cost-results-header p { margin: 0; font: 12px 'IBM Plex Mono', monospace; color: #6b7280; }
.cost-search-wrap { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 0 12px; }
.cost-search-wrap span { font: 11px 'IBM Plex Mono', monospace; color: #6b7280; }
.cost-search-wrap input { border: 0; outline: 0; padding: 10px 0; width: 180px; font: 13px 'IBM Plex Sans', sans-serif; }
.cost-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(17,24,39,.04); }
.cost-table-wrap table { width: 100%; border-collapse: collapse; min-width: 800px; font-size: 13px; }
.cost-table-wrap th, .cost-table-wrap td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.cost-table-wrap th { background: #f9fafb; color: #6b7280; font: 600 10px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; user-select: none; border-bottom: 2px solid #e5e7eb; }
.cost-table-wrap th:hover { color: #111827; }
.cost-table-wrap th.sorted-asc::after { content: ' ▲'; font-size: 9px; }
.cost-table-wrap th.sorted-desc::after { content: ' ▼'; font-size: 9px; }
.cost-table-wrap tbody tr:last-child td { border-bottom: 0; }
.cost-table-wrap tbody tr:hover td { background: #eff6ff; }
.cost-table-wrap td:first-child { font-weight: 600; }
.cost-table-wrap td.cost-model-cell { padding: 0; }
.cost-table-wrap td.cost-model-cell a { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 10px 12px; color: #2563eb; text-decoration: none; }
.cost-table-wrap td.cost-model-cell a:hover span:last-child { text-decoration: underline; }
.cost-provider-logo { display: block; width: 20px; height: 20px; flex: none; object-fit: contain; }
.cost-provider-name { color: #6b7280; font: 10px 'IBM Plex Mono', monospace; }
.cost-table-wrap td:first-child a { color: #2563eb; text-decoration: none; }
.cost-table-wrap td:first-child a:hover { text-decoration: underline; }
.cost-table-wrap td.numeric { text-align: right; font: 500 13px 'IBM Plex Mono', monospace; }
.cost-table-wrap td.best { color: #16a34a; font-weight: 600; }
.cost-table-wrap td.no-price { color: #9ca3af; }
.cost-table-wrap td.context-cell { font: 12px 'IBM Plex Mono', monospace; color: #6b7280; }
.cost-empty { padding: 40px; text-align: center; color: #6b7280; font: 13px 'IBM Plex Sans', sans-serif; }
@media (max-width: 720px) {
  .cost-page .site-header { padding: 0 20px; }
  .cost-main { padding: 24px 20px; }
  .cost-inputs { grid-template-columns: 1fr; }
  .cost-controls h1 { font-size: 28px; }
}