/* Страницы раздела «Курсы валют»: /currency/cbr/, /kross-kursy/, /metally/. Канон сайта 12/16px Unbounded. */
#cb-page, #ck-kross, #cm-metally,
#cb-page input, #cb-page button, #cb-page table, #cb-page select,
#ck-kross input, #ck-kross button, #ck-kross table, #ck-kross select,
#cm-metally button, #cm-metally table { font-family: "Unbounded", sans-serif; }
#cb-page, #ck-kross, #cm-metally { color: #000; font-size: 12px; line-height: 1.55; }
#cb-page [hidden], #ck-kross [hidden], #cm-metally [hidden] { display: none !important; }
#cb-page .up, #ck-kross .up, #cm-metally .up { color: #0a7a3d; }
#cb-page .down, #ck-kross .down, #cm-metally .down { color: #c0392b; }
#cb-page h2, #ck-kross h2, #cm-metally h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.cp-lead { font-size: 12px; line-height: 1.55; opacity: .8; margin: 4px 0 14px; }
.cp-src { font-size: 12px; opacity: .7; margin-bottom: 12px; }
.cp-src a { color: #000; text-decoration: underline; text-underline-offset: 2px; }
.cp-muted, .cm-muted { opacity: .6; }

/* ── Таблицы курсов/металлов ──────────────────────────── */
.cp-table-wrap { overflow-x: auto; border: 1px solid #eee; border-radius: 14px; margin-bottom: 14px; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cp-table th, .cp-table td { border-bottom: 1px solid #eee; padding: 9px 12px; text-align: right; white-space: nowrap; }
.cp-table th { background: #f7f9fc; font-weight: 700; position: sticky; top: 0; }
.cp-table th:nth-child(-n+2), .cp-table td:nth-child(-n+2) { text-align: left; }
.cp-table td:first-child { font-weight: 700; }
.cp-table a { color: #000; text-decoration: underline; text-underline-offset: 2px; }
.cp-table tr:last-child td { border-bottom: 0; }
#cm-metally .cp-table tbody tr { cursor: pointer; }
#cm-metally .cp-table tbody tr:hover { background: #fafafa; }
#cm-metally .cp-table tbody tr.is-active { background: #f0f4f9; }

/* ── Дата (курс на дату) ──────────────────────────────── */
.cp-daterow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.cp-daterow label { font-size: 12px; display: block; opacity: .7; margin-bottom: 4px; }
.cp-daterow input[type="date"] { height: 48px; padding: 0 14px; border: 1px solid #ddd; border-radius: 12px; font-size: 13px; font-family: "Unbounded", sans-serif; }
.cp-daterow input[type="date"]:focus { outline: none; border-color: #000; }
.cp-reset { height: 44px; padding: 0 16px; border: 1px solid #ddd; border-radius: 12px; background: #fff; cursor: pointer; font-size: 12px; }
.cp-reset:hover { border-color: #000; }

/* ── Матрица кросс-курсов ─────────────────────────────── */
#ck-matrix { width: 100%; border-collapse: collapse; font-size: 12px; }
#ck-matrix th, #ck-matrix td { border: 1px solid #eee; padding: 8px 10px; text-align: right; white-space: nowrap; }
#ck-matrix thead th, #ck-matrix tbody th { background: #f7f9fc; font-weight: 700; text-align: center; }
#ck-matrix tbody th { text-align: left; }
#ck-matrix .ck-diag { background: #f0f4f9; color: #999; text-align: center; }

/* ── Мини-конвертер (кросс) ───────────────────────────── */
.ck-conv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.ck-conv input { width: 150px; height: 52px; padding: 0 14px; border: 1px solid #ddd; border-radius: 12px; font-size: 16px; font-weight: 700; }
.ck-conv select { height: 52px; padding: 0 12px; border: 1px solid #ddd; border-radius: 12px; font-size: 13px; background: #fff; cursor: pointer; }
.ck-conv-swap { width: 44px; height: 44px; border: 1px solid #ddd; border-radius: 50%; background: #fff; cursor: pointer; font-size: 16px; }
.ck-conv-swap:hover { border-color: #000; }
.ck-conv-res { flex: 1 1 100%; font-size: 15px; margin-top: 4px; }
.ck-conv-res b { font-weight: 700; }
.ck-conv-rate { flex: 1 1 100%; font-size: 12px; opacity: .6; }

/* ── График металлов ─────────────────────────────────── */
.cm-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 10px; }
.cm-chart-title { font-size: 16px; font-weight: 700; }
.cm-periods { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-period { width: auto; padding: 6px 12px; border: 1px solid #ddd; border-radius: 16px; background: #fff; color: #000; font-size: 12px; cursor: pointer; }
.cm-period:hover { border-color: #000; }
.cm-period.is-active { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.cm-chart-box { position: relative; }
#cm-chart { width: 100%; height: auto; display: block; cursor: crosshair; touch-action: pan-y; }
.cm-chart-tip { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -135%); background: #000; color: #fff; border-radius: 8px; padding: 5px 9px; white-space: nowrap; font-size: 12px; line-height: 1.3; text-align: center; }
.cm-chart-tip b { display: block; font-weight: 700; }
.cm-chart-tip span { opacity: .7; }
.cm-chart-stat { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; }
.cm-chart-stat b { font-weight: 700; }

.cp-block { border: 1px solid #eee; border-radius: 14px; padding: 16px; margin-bottom: 14px; }

/* ── Таблицы в тексте ─────────────────────────────────── */
.cc-text-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 12px; }
.cc-text-table th, .cc-text-table td { border: 1px solid #e5e7eb; padding: 8px 10px; text-align: left; vertical-align: top; }
.cc-text-table th { background: #f7f9fc; font-weight: 700; }

@media screen and (max-width: 767px) {
  .ck-conv input, .ck-conv select { width: 100%; flex: 1 1 100%; }
}