/* ============================================================
   Token 成本计算器 / 价格对比
   ============================================================ */

.tk-calc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; align-items: stretch; }
.tk-card { background: #fff; border-radius: var(--radius-card); box-shadow: var(--c-shadow-card); padding: 26px 28px; }
.tk-card h2 { font-size: 17px; margin: 0 0 18px; color: var(--c-text-main); }

.tk-form .tk-field { display: block; margin-bottom: 18px; }
.tk-form .tk-flabel { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; font-size: 13px; color: var(--c-text-sub); }
.tk-form .tk-fval { display: inline-flex; align-items: baseline; gap: 5px; }
.tk-form .tk-fval b { font-size: 16px; font-weight: 600; color: var(--c-text-main); font-variant-numeric: tabular-nums; }
.tk-form .tk-fval em { font-style: normal; font-size: 12px; color: var(--c-text-light); white-space: nowrap; }
.tk-form select {
  width: 100%; height: 42px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--c-text-main);
  background: #f8fafd; border: 1px solid #e3ebf7; border-radius: 9px; outline: none; transition: border-color .2s, background .2s;
}
.tk-form select:focus { border-color: var(--c-primary); background: #fff; }

.tk-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 6px 0 0; border-radius: 2px; background: #e6eefb; outline: none; }
.tk-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--c-primary); cursor: pointer; box-shadow: 0 1px 5px rgba(43,127,255,.28);
}
.tk-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--c-primary); cursor: pointer; }
.tk-range:focus-visible { box-shadow: 0 0 0 3px rgba(43,127,255,.16); }
.tk-hint { margin: 14px 0 0; font-size: 12px; line-height: 1.7; color: var(--c-text-light); }
.tk-hint b { color: var(--c-text-sub); font-weight: 600; }

.tk-result { display: flex; flex-direction: column; }
.tk-big { text-align: center; padding: 2px 0 18px; margin-bottom: 8px; border-bottom: 1px solid #eef2f9; }
.tk-big span { display: block; order: 2; margin-top: 6px; font-size: 13px; color: var(--c-text-light); }
.tk-big strong { display: block; order: 1; font-size: 42px; line-height: 1.1; color: var(--c-primary); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.tk-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed #eef2f9; font-size: 14px; color: var(--c-text-sub); }
.tk-row:last-of-type { border-bottom: 0; }
.tk-row strong { font-weight: 600; color: var(--c-text-main); font-variant-numeric: tabular-nums; }
.tk-row.tk-hl strong { color: var(--c-primary); }
.tk-result .tk-hint { margin-top: auto; }
.tk-src { margin: 16px 2px 0; font-size: 12px; line-height: 1.8; color: var(--c-text-light); }

/* 价格对比 */
.tk-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.tk-search { width: 210px; height: 34px; padding: 0 12px; font: inherit; font-size: 13px; color: var(--c-text-main); background: #fff; border: 1px solid #e3ebf7; border-radius: 9px; outline: none; transition: border-color .2s; }
.tk-search:focus { border-color: var(--c-primary); }
.tk-vendor-sel { height: 34px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--c-text-main); background: #fff; border: 1px solid #e3ebf7; border-radius: 9px; outline: none; cursor: pointer; max-width: 160px; }
.tk-vendor-sel:focus { border-color: var(--c-primary); }
.tk-count { margin-left: auto; font-size: 13px; color: var(--c-text-light); }
.tk-count b { color: var(--c-text-main); font-weight: 600; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-chip { border: 1px solid #e3ebf7; background: #fff; color: var(--c-text-sub); font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: all .18s; }
.tk-chip:hover { border-color: #c9dbfb; color: var(--c-text-main); }
.tk-chip.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.tk-table-wrap { background: #fff; border-radius: var(--radius-card); box-shadow: var(--c-shadow-card); overflow-x: auto; }
.tk-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 780px; }
.tk-table th, .tk-table td { padding: 13px 16px; text-align: left; white-space: nowrap; }
.tk-table thead th { background: #f5f9ff; color: var(--c-text-sub); font-weight: 600; font-size: 13px; border-bottom: 1px solid #e9f0fa; }
.tk-table thead th em { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: var(--c-text-light); }
.tk-table .tk-empty { padding: 40px 16px; text-align: center; color: var(--c-text-light); font-size: 14px; }
.tk-table tbody tr { border-bottom: 1px solid #f1f5fb; transition: background .15s; }
.tk-table tbody tr:last-child { border-bottom: 0; }
.tk-table tbody tr:hover { background: #f8fbff; }
.tk-table .tk-model { font-weight: 600; color: var(--c-text-main); }
.tk-table .tk-vendor { color: var(--c-text-sub); font-size: 13px; }
.tk-table .tk-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #eef2f7; color: #7b8aa3; font-size: 11px; font-weight: 500; vertical-align: 1px; }
.tk-table .tk-legacy { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #fff4e8; color: #b07a3c; font-size: 11px; font-weight: 500; vertical-align: 1px; }
.tk-table .tk-num { font-variant-numeric: tabular-nums; color: var(--c-text-main); }
.tk-table thead th .tk-u { margin-left: 3px; font-size: 11px; font-weight: 400; color: var(--c-text-light); white-space: nowrap; }
.tk-table .tk-ctx { color: var(--c-text-sub); }
.tk-table .tk-note { color: var(--c-text-sub); font-size: 13px; }
.tk-table tbody tr.low td { color: #0f8a4a; }
.tk-table tbody tr.low .tk-model, .tk-table tbody tr.low .tk-num { color: #0f8a4a; }

@media (max-width: 900px) {
  .tk-calc { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tk-tools { gap: 8px; }
  .tk-search { width: 100%; }
  .tk-count { margin-left: 0; }
  .tk-card { padding: 20px; }
  .tk-big strong { font-size: 34px; }
}